TypeScript menthe/utils unit Examples

Example #1

File: constants.ts Project: nippoiboy/nippoiboy.github.io

'use strict';

import {unit, hex} from 'menthe/utils';

import {mediaQuery} from './utils';

export const MaxWidth = unit(1024).px();

const Breakpoints = {
  Mobile: unit(481).px(),
  Desktop: unit(1000).px(),
};

export const Height = {
  Large: unit(46).px(),
  Normal: unit(30).px(),
  Small: unit(24).px(),
};

export const Default = {
  FontFamily: [
    'Noto Sans Japanese',
    '游ゴシック',
    'YuGothic',
    'ヒラギノ角ゴ ProN W3',
    'Hiragino Kaku Gothic ProN',
    '源ノ角ゴシック',
    '源ノ角ゴシック Normal',
    'Source Han Sans J Normal',
    'Source Han Sans J',
    'SourceHanSans-Normal',

Example #2

File: style.ts Project: nippoiboy/nippoiboy.github.io

interface OutlinedSkinOptions {
  borderColor: MentheColor;
  fontColor?: MentheColor;
}

interface SizeOptions {
  height: Px;
  horizontalPadding: Px;
  fontSize: string;
}

const DefaultHeight = Height.Normal;
const SmallHeight = Height.Small;
const LargeHeight = Height.Large;
const DefaultPadding = unit(13).px();
const SmallPadding = unit(10).px();
const LargePadding = unit(18).px();
const BorderWidth = unit(2).px();
const RoundShapeRadius = unit(3).px();
const TransitionDuration = unit(.12).s();
const DefaultSkinColor = Color.LightGray;

const applySkin = ({bgColor, fontColor}: SkinOptions) => ({
  backgroundColor: bgColor,
  color: fontColor || '#fff',
  transition: `background-color ${TransitionDuration} ease`,
  '&:active': {
    backgroundColor: bgColor.darken(.15),
  },
});