@dotss/ui 1.0.3 → 1.0.4

package/resources/tictoccroc/icons/line/wifi-line.svg

@@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.9986 6.5C8.54653 6.5 5.44396 8.05053 3.31842 10.5197C3.04819 10.8337 2.57464 10.8691 2.26072 10.5988C1.94679 10.3286 1.91137 9.85506 2.1816 9.54113C4.57518 6.76056 8.08447 5 11.9986 5C15.9126 5 19.4219 6.76056 21.8155 9.54113C22.0857 9.85506 22.0503 10.3286 21.7364 10.5988C21.4225 10.8691 20.9489 10.8337 20.6787 10.5197C18.5532 8.05053 15.4506 6.5 11.9986 6.5Z" fill="currentColor"/>
-<path d="M5.66951 12.8645C7.22896 11.078 9.488 9.96033 11.9981 9.96033C14.5081 9.96033 16.7672 11.078 18.3266 12.8645C18.599 13.1765 19.0728 13.2086 19.3849 12.9363C19.6969 12.6639 19.7291 12.1901 19.4567 11.878C17.6292 9.78448 14.9662 8.46033 11.9981 8.46033C9.02992 8.46033 6.36697 9.78448 4.53948 11.878C4.26708 12.1901 4.29923 12.6639 4.61128 12.9363C4.92333 13.2086 5.39711 13.1765 5.66951 12.8645Z" fill="currentColor"/>
-<path d="M7.94243 15.4998C8.93819 14.3431 10.3878 13.6203 11.9983 13.6203C13.6088 13.6203 15.0584 14.3431 16.0542 15.4998C16.3244 15.8138 16.7979 15.8492 17.1119 15.579C17.4258 15.3087 17.4612 14.8352 17.191 14.5212C15.9272 13.0531 14.0709 12.1203 11.9983 12.1203C9.92574 12.1203 8.06941 13.0531 6.80562 14.5212C6.53538 14.8352 6.5708 15.3087 6.88473 15.579C7.19865 15.8492 7.6722 15.8138 7.94243 15.4998Z" fill="currentColor"/>
-<path d="M12 19.8C12.9665 19.8 13.75 19.0165 13.75 18.05C13.75 17.0835 12.9665 16.3 12 16.3C11.0335 16.3 10.25 17.0835 10.25 18.05C10.25 19.0165 11.0335 19.8 12 19.8Z" fill="currentColor"/>
-</svg>

package/stories/Introduction.mdx

@@ -1,113 +0,0 @@
-<div
-  style={{
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '60px 0 40px',
-    position: 'relative',
-    marginBottom: '40px'
-  }}
->
-  <div
-    style={{
-      width: '100%',
-      height: '160px',
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      background: 'linear-gradient(90deg, #18C1E7, #FFC800)',
-      clipPath: 'polygon(0 0, 100% 0, 100% 70%, 0 100%)',
-      opacity: '0.8',
-      zIndex: -1
-    }}
-  ></div>
-
-<h2
-  style={{
-    fontSize: '2.6em',
-    fontWeight: '800',
-    margin: '60px 0 10px',
-    background: '#000014',
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
-    textAlign: 'center'
-  }}
->
-  <span style={{ fontSize: 'inherit' }}>커넥팅더닷츠</span> <br />{' '}
-  <span style={{ fontSize: 'inherit' }}>디자인 시스템</span>
-</h2>
-
-<div
-  style={{
-    fontSize: '1.3em',
-    color: '#313135',
-    maxWidth: '600px',
-    textAlign: 'center',
-    margin: '20px 0 30px',
-    lineHeight: '1.6',
-    wordBreak: 'keep-all'
-  }}
->
-  <strong>커넥팅더닷츠 디자인 시스템</strong>은 일관된 사용자 경험과 브랜드 아이덴티티를 제공하기
-  위해 개발된 <br /> 리액트 컴포넌트 라이브러리입니다.
-</div>
-
-  <div
-    style={{
-      display: 'flex',
-      gap: '15px',
-      flexWrap: 'wrap',
-      justifyContent: 'center'
-    }}
-  >
-    <span
-      style={{
-        padding: '8px 16px',
-        backgroundColor: '#FFF2B3',
-        color: '#E08E00',
-        borderRadius: '20px',
-        fontSize: '0.9em',
-        fontWeight: '600'
-      }}
-    >
-      React 18+
-    </span>
-    <span
-      style={{
-        padding: '8px 16px',
-        backgroundColor: '#DFF7FC',
-        color: '#148ABD',
-        borderRadius: '20px',
-        fontSize: '0.9em',
-        fontWeight: '600'
-      }}
-    >
-      TypeScript
-    </span>
-    <span
-      style={{
-        padding: '8px 16px',
-        backgroundColor: '#E7F8ED',
-        color: '#288A63',
-        borderRadius: '20px',
-        fontSize: '0.9em',
-        fontWeight: '600'
-      }}
-    >
-      Customizable
-    </span>
-    <span
-      style={{
-        padding: '8px 16px',
-        backgroundColor: '#FEECF2',
-        color: '#B8285B',
-        borderRadius: '20px',
-        fontSize: '0.9em',
-        fontWeight: '600'
-      }}
-    >
-      Accessible
-    </span>
-  </div>
-</div>

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: '#A4E5BB',
-  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';