@dotss/ui 0.0.6 → 0.0.8

package/stories/foundations/tictoccroc-parent.mdx

@@ -1,189 +0,0 @@
-import { Meta, ColorPalette, ColorItem, Typeset } from '@storybook/addon-docs';
-
-import {
-  grey,
-  background,
-  yellow,
-  blue,
-  green,
-  pink,
-  classType,
-  etc
-} from '@themes/tictoccroc/colors';
-import { display, headline, body, caption } from '@themes/tictoccroc/typography';
-
-<Meta title="Foundation/tictoccroc-parent" />
-
-# Palette
-
-<br />
-## Light
-<br />
-<ColorPalette>
-  <ColorItem
-    title="Brand"
-    colors={{
-      primary: yellow['70'],
-      secondary: grey['90'],
-      tertiary: grey['60'],
-      yellow: yellow['70'],
-      blue: blue['60'],
-      green: green['70'],
-      pink: pink['70']
-    }}
-  />
-  <ColorItem
-    title="BrandPrimary"
-    colors={{
-      main: yellow['70'],
-      disable: yellow['10'],
-      bg: yellow['20'],
-      disableLine: yellow['30'],
-      pageControl: yellow['40'],
-      tooltip: yellow['50'],
-      line: yellow['60'],
-      press: yellow['80'],
-      text: yellow['90']
-    }}
-  />
-  <ColorItem title="Grey" colors={grey} />
-  <ColorItem title="Background" colors={background} />
-  <ColorItem title="Yellow" colors={yellow} />
-  <ColorItem title="Blue" colors={blue} />
-  <ColorItem title="Green" colors={green} />
-  <ColorItem title="Pink" colors={pink} />
-  <ColorItem title="ClassType" colors={classType} />
-  <ColorItem title="ETC" colors={etc} />
-</ColorPalette>
-
-<br />
-
-# Typography
-
-<br />
-
-**Typeface:** Pretendard
-
-**LetterSpacing:** -0.32px
-
-<br />
-
-## Display
-
-**Tag:** div
-
-**Variants:** {Object.keys(display).reverse().join(', ')}
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[40, 48, 60, 100]}
-  fontWeight={400}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[40, 48, 60, 100]}
-  fontWeight={500}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[40, 48, 60, 100]}
-  fontWeight={700}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<br />
-
-## Headline
-
-**Tag:** heading
-
-**Variants:** {Object.keys(headline).reverse().join(', ')}
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[14, 16, 18, 20, 24, 36]}
-  fontWeight={500}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[14, 16, 18, 20, 24, 36]}
-  fontWeight={700}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-## Body
-
-**Tag:** div
-
-**Variants:** {Object.keys(body).reverse().join(', ')}
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[12, 14, 15, 16, 18]}
-  fontWeight={400}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[12, 14, 15, 16, 18]}
-  fontWeight={500}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-## Caption
-
-**Tag:** span
-
-**Variants:** {Object.keys(caption).reverse().join(', ')}
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[10, 11, 12, 13, 14]}
-  fontWeight={400}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[10, 11, 12, 13, 14]}
-  fontWeight={500}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[10, 11, 12, 13, 14]}
-  fontWeight={700}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<br />
-
-# Spacing
-
-**Layout:** 8x
-
-**Content:** 4x
-
-<br />
-
-# Elevation
-
-**Elevation 0:** -
-
-**Elevation 1:** 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
-
-**Elevation 2:** 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
-
-**Elevation 3:**: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
-
-**Elevation 4:**: 0px 0px 16px 0px rgba(0, 0, 0, 0.20);
-
-**Elevation 5:**: '0px 1px 2px 0px rgba(0, 0, 0, 0.20), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)';

package/stories/foundations/tictoccroc-teacher.mdx

@@ -1,189 +0,0 @@
-import { Meta, ColorPalette, ColorItem, Typeset } from '@storybook/addon-docs';
-
-import {
-  grey,
-  background,
-  yellow,
-  blue,
-  green,
-  pink,
-  classType,
-  etc
-} from '@themes/tictoccroc/colors';
-import { display, headline, body, caption } from '@themes/tictoccroc/typography';
-
-<Meta title="Foundation/tictoccroc-teacher" />
-
-# Palette
-
-<br />
-## Light
-<br />
-<ColorPalette>
-  <ColorItem
-    title="Brand"
-    colors={{
-      primary: blue['70'],
-      secondary: grey['90'],
-      tertiary: grey['60'],
-      yellow: yellow['70'],
-      blue: blue['60'],
-      green: green['70'],
-      pink: pink['70']
-    }}
-  />
-  <ColorItem
-    title="BrandPrimary"
-    colors={{
-      main: blue['70'],
-      disable: blue['10'],
-      bg: blue['20'],
-      disableLine: blue['30'],
-      pageControl: blue['50'],
-      tooltip: blue['40'],
-      line: blue['60'],
-      press: blue['80'],
-      text: blue['90']
-    }}
-  />
-  <ColorItem title="Grey" colors={grey} />
-  <ColorItem title="Background" colors={background} />
-  <ColorItem title="Yellow" colors={yellow} />
-  <ColorItem title="Blue" colors={blue} />
-  <ColorItem title="Green" colors={green} />
-  <ColorItem title="Pink" colors={pink} />
-  <ColorItem title="ClassType" colors={classType} />
-  <ColorItem title="ETC" colors={etc} />
-</ColorPalette>
-
-<br />
-
-# Typography
-
-<br />
-
-**Typeface:** Pretendard
-
-**LetterSpacing:** -0.32px
-
-<br />
-
-## Display
-
-**Tag:** div
-
-**Variants:** {Object.keys(display).reverse().join(', ')}
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[40, 48, 60, 100]}
-  fontWeight={400}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[40, 48, 60, 100]}
-  fontWeight={500}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[40, 48, 60, 100]}
-  fontWeight={700}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<br />
-
-## Headline
-
-**Tag:** heading
-
-**Variants:** {Object.keys(headline).reverse().join(', ')}
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[14, 16, 18, 20, 24, 36]}
-  fontWeight={500}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[14, 16, 18, 20, 24, 36]}
-  fontWeight={700}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-## Body
-
-**Tag:** div
-
-**Variants:** {Object.keys(body).reverse().join(', ')}
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[12, 14, 15, 16, 18]}
-  fontWeight={400}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[12, 14, 15, 16, 18]}
-  fontWeight={500}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-## Caption
-
-**Tag:** span
-
-**Variants:** {Object.keys(caption).reverse().join(', ')}
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[10, 11, 12, 13, 14]}
-  fontWeight={400}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[10, 11, 12, 13, 14]}
-  fontWeight={500}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<Typeset
-  fontFamily="Pretendard"
-  fontSizes={[10, 11, 12, 13, 14]}
-  fontWeight={700}
-  sampleText="놀이부터 돌봄까지 째깍악어와 함께해요"
-/>
-
-<br />
-
-# Spacing
-
-**Layout:** 8x
-
-**Content:** 4x
-
-<br />
-
-# Elevation
-
-**Elevation 0:** -
-
-**Elevation 1:** 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
-
-**Elevation 2:** 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
-
-**Elevation 3:**: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
-
-**Elevation 4:**: 0px 0px 16px 0px rgba(0, 0, 0, 0.20);
-
-**Elevation 5:**: '0px 1px 2px 0px rgba(0, 0, 0, 0.20), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)';

package/themes/tictoccroc/colors/background.ts

@@ -1,9 +0,0 @@
-import type { BrandColorKey } from '@typings/color';
-import type { ColorValue } from '@typings/utility';
-
-const background: Record<Extract<BrandColorKey, 'primary' | 'secondary'>, ColorValue> = {
-  primary: '#F7F7F8',
-  secondary: '#FAFAFC'
-};
-
-export default background;

package/themes/tictoccroc/colors/blue.ts

@@ -1,16 +0,0 @@
-import type { ColorScale } from '@typings/color';
-
-const blue: ColorScale = {
-  10: '#DFF7FC',
-  20: '#C8F2F9',
-  30: '#B1ECF7',
-  40: '#82E1F2',
-  50: '#54D6ED',
-  60: '#26CAE8',
-  70: '#18C1E7',
-  80: '#17AFD9',
-  90: '#169ECB',
-  100: '#148ABD'
-};
-
-export default blue;

package/themes/tictoccroc/colors/classType.ts

@@ -1,12 +0,0 @@
-import type { TictoccrocClassType } from '@typings/theme/tictoccroc';
-
-const classType: TictoccrocClassType = {
-  play: '#FAF194',
-  commute: '#ECD9F4',
-  learning: '#BDE7EF',
-  creativeArt: '#FFE4EF',
-  english: '#C2E5C9',
-  package: '#D9E3FF'
-};
-
-export default classType;

package/themes/tictoccroc/colors/etc.ts

@@ -1,12 +0,0 @@
-import type { EtcColorKey } from '@typings/theme/core';
-import type { ColorValue } from '@typings/utility';
-
-const etc: Record<EtcColorKey, ColorValue> = {
-  red: '#F24A45',
-  orange: '#FC6A00',
-  dimmed01: 'rgba(0, 0, 0, 0.60)',
-  dimmed02: 'rgba(0, 0, 0, 0.40)',
-  dimmed03: 'rgba(0, 0, 0, 0.80)'
-};
-
-export default etc;

package/themes/tictoccroc/colors/green.ts

@@ -1,16 +0,0 @@
-import type { ColorScale } from '@typings/color';
-
-const green: ColorScale = {
-  10: '#E7F8ED',
-  20: '#D7F4E1',
-  30: '#C0EDD0',
-  40: '#C0EDD0',
-  50: '#7CD99D',
-  60: '#55CE80',
-  70: '#36BB65',
-  80: '#31AA66',
-  90: '#2D9A65',
-  100: '#288A63'
-};
-
-export default green;

package/themes/tictoccroc/colors/grey.ts

@@ -1,18 +0,0 @@
-import type { GreyColorScale } from '@typings/color';
-
-const grey: GreyColorScale = {
-  10: '#F2F2F3',
-  20: '#E5E5E6',
-  30: '#D7D7DA',
-  40: '#BDBDC1',
-  50: '#A3A3A9',
-  60: '#7B7B84',
-  70: '#62626A',
-  80: '#4A4A4F',
-  90: '#313135',
-  100: '#19191A',
-  white: '#FFFFFF',
-  black: '#000000'
-};
-
-export default grey;

package/themes/tictoccroc/colors/index.ts

@@ -1,8 +0,0 @@
-export { default as background } from './background';
-export { default as blue } from './blue';
-export { default as green } from './green';
-export { default as etc } from './etc';
-export { default as grey } from './grey';
-export { default as classType } from './classType';
-export { default as pink } from './pink';
-export { default as yellow } from './yellow';

package/themes/tictoccroc/colors/pink.ts

@@ -1,16 +0,0 @@
-import type { ColorScale } from '@typings/color';
-
-const pink: ColorScale = {
-  10: '#FEECF2',
-  20: '#FDE2EC',
-  30: '#FCCADC',
-  40: '#FAB2CC',
-  50: '#F99ABC',
-  60: '#F783AC',
-  70: '#F56A9C',
-  80: '#ED5A8E',
-  90: '#DE3571',
-  100: '#B8285B'
-};
-
-export default pink;

package/themes/tictoccroc/colors/yellow.ts

@@ -1,16 +0,0 @@
-import type { ColorScale } from '@typings/color';
-
-const yellow: ColorScale = {
-  10: '#FFFBE6',
-  20: '#FFF7CC',
-  30: '#FFF2B3',
-  40: '#FFEA80',
-  50: '#FFE14C',
-  60: '#FFD500',
-  70: '#FFC800',
-  80: '#F5B400',
-  90: '#EBA000',
-  100: '#E08E00'
-};
-
-export default yellow;

package/themes/tictoccroc/index.ts

@@ -1,5 +0,0 @@
-export * from './colors';
-export * from './typography';
-
-export { default as parentLight } from './parentLight';
-export { default as teacherLight } from './teacherLight';

package/themes/tictoccroc/parentLight.ts

@@ -1,65 +0,0 @@
-import type TictoccrocTheme from '@typings/theme/tictoccroc';
-
-import { background, blue, classType, etc, green, grey, pink, yellow } from './colors';
-import { body, caption, display, headline } from './typography';
-
-const content = (value: number) => 4 * value;
-const layout = (value: number) => 8 * value;
-
-const parentLight: TictoccrocTheme = {
-  mode: 'light',
-  type: 'tictoccroc-parent',
-  palette: {
-    brand: {
-      primary: {
-        main: yellow['70'],
-        disable: yellow['10'],
-        bg: yellow['20'],
-        disableLine: yellow['30'],
-        pageControl: yellow['40'],
-        tooltip: yellow['50'],
-        line: yellow['60'],
-        press: yellow['80'],
-        text: yellow['90']
-      },
-      secondary: grey['90'],
-      tertiary: grey['60'],
-      extend: {
-        yellow: yellow['70'],
-        green: green['70'],
-        blue: blue['70'],
-        pink: pink['70']
-      }
-    },
-    yellow,
-    blue,
-    grey,
-    pink,
-    green,
-    background,
-    etc,
-    extend: {
-      classType
-    }
-  },
-  typography: {
-    ...display,
-    ...headline,
-    ...body,
-    ...caption
-  },
-  spacing: {
-    content,
-    layout
-  },
-  elevation: {
-    0: '0px 0px 0px 0px rgba(0, 0, 0, 0)',
-    1: '0px 2px 10px 0px rgba(0, 0, 0, 0.08)',
-    2: '0px 4px 12px 0px rgba(0, 0, 0, 0.08)',
-    3: '0px 8px 16px 0px rgba(0, 0, 0, 0.08)',
-    4: '0px 0px 16px 0px rgba(0, 0, 0, 0.20)',
-    5: '0px 1px 2px 0px rgba(0, 0, 0, 0.20), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)'
-  }
-};
-
-export default parentLight;

package/themes/tictoccroc/teacherLight.ts

@@ -1,65 +0,0 @@
-import type TictoccrocTheme from '@typings/theme/tictoccroc';
-
-import { background, blue, classType, etc, green, grey, pink, yellow } from './colors';
-import { body, caption, display, headline } from './typography';
-
-const content = (value: number) => 4 * value;
-const layout = (value: number) => 8 * value;
-
-const teacherLight: TictoccrocTheme = {
-  mode: 'light',
-  type: 'tictoccroc-teacher',
-  palette: {
-    brand: {
-      primary: {
-        main: blue['70'],
-        disable: blue['10'],
-        bg: blue['20'],
-        disableLine: blue['30'],
-        pageControl: blue['50'],
-        tooltip: blue['50'],
-        line: blue['60'],
-        press: blue['80'],
-        text: blue['90']
-      },
-      secondary: grey['90'],
-      tertiary: grey['60'],
-      extend: {
-        yellow: yellow['70'],
-        green: green['70'],
-        blue: blue['70'],
-        pink: pink['70']
-      }
-    },
-    yellow,
-    blue,
-    grey,
-    pink,
-    green,
-    background,
-    etc,
-    extend: {
-      classType
-    }
-  },
-  typography: {
-    ...display,
-    ...headline,
-    ...body,
-    ...caption
-  },
-  spacing: {
-    content,
-    layout
-  },
-  elevation: {
-    0: '0px 0px 0px 0px rgba(0, 0, 0, 0)',
-    1: '0px 2px 10px 0px rgba(0, 0, 0, 0.08)',
-    2: '0px 4px 12px 0px rgba(0, 0, 0, 0.08)',
-    3: '0px 8px 16px 0px rgba(0, 0, 0, 0.08)',
-    4: '0px 0px 16px 0px rgba(0, 0, 0, 0.20)',
-    5: '0px 1px 2px 0px rgba(0, 0, 0, 0.20), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)'
-  }
-};
-
-export default teacherLight;