@dotss/ui 0.0.6 → 0.0.8

package/themes/tictoccroc/typography/body.ts

@@ -1,76 +0,0 @@
-import type { TypographyBody } from '@typings/typography';
-
-const body: TypographyBody = {
-  b1M: {
-    tag: 'div',
-    size: '18px',
-    weight: 500,
-    lineHeight: '26px',
-    letterSpacing: '-0.36px'
-  },
-  b1R: {
-    tag: 'div',
-    size: '18px',
-    weight: 400,
-    lineHeight: '26px',
-    letterSpacing: '-0.36px'
-  },
-  b2M: {
-    tag: 'div',
-    size: '16px',
-    weight: 500,
-    lineHeight: '24px',
-    letterSpacing: '-0.32px'
-  },
-  b2R: {
-    tag: 'div',
-    size: '16px',
-    weight: 400,
-    lineHeight: '24px',
-    letterSpacing: '-0.32px'
-  },
-  b3M: {
-    tag: 'div',
-    size: '15px',
-    weight: 500,
-    lineHeight: '22px',
-    letterSpacing: '-0.3px'
-  },
-  b3R: {
-    tag: 'div',
-    size: '15px',
-    weight: 400,
-    lineHeight: '22px',
-    letterSpacing: '-0.3px'
-  },
-  b4M: {
-    tag: 'div',
-    size: '14px',
-    weight: 500,
-    lineHeight: '20px',
-    letterSpacing: '-0.28px'
-  },
-  b4R: {
-    tag: 'div',
-    size: '14px',
-    weight: 400,
-    lineHeight: '20px',
-    letterSpacing: '-0.28px'
-  },
-  b5M: {
-    tag: 'div',
-    size: '12px',
-    weight: 500,
-    lineHeight: '18px',
-    letterSpacing: '-0.24px'
-  },
-  b5R: {
-    tag: 'div',
-    size: '12px',
-    weight: 400,
-    lineHeight: '18px',
-    letterSpacing: '-0.24px'
-  }
-};
-
-export default body;

package/themes/tictoccroc/typography/caption.ts

@@ -1,111 +0,0 @@
-import type { TypographyCaption } from '@typings/typography';
-
-const caption: TypographyCaption = {
-  c1B: {
-    tag: 'span',
-    size: '14px',
-    weight: 700,
-    lineHeight: '18px',
-    letterSpacing: '-0.28px'
-  },
-  c1M: {
-    tag: 'span',
-    size: '14px',
-    weight: 500,
-    lineHeight: '18px',
-    letterSpacing: '-0.28px'
-  },
-  c1R: {
-    tag: 'span',
-    size: '14px',
-    weight: 400,
-    lineHeight: '18px',
-    letterSpacing: '-0.28px'
-  },
-  c2B: {
-    tag: 'span',
-    size: '13px',
-    weight: 700,
-    lineHeight: '16px',
-    letterSpacing: '-0.26px'
-  },
-  c2M: {
-    tag: 'span',
-    size: '13px',
-    weight: 500,
-    lineHeight: '16px',
-    letterSpacing: '-0.26px'
-  },
-  c2R: {
-    tag: 'span',
-    size: '13px',
-    weight: 400,
-    lineHeight: '16px',
-    letterSpacing: '-0.26px'
-  },
-  c3B: {
-    tag: 'span',
-    size: '12px',
-    weight: 700,
-    lineHeight: '16px',
-    letterSpacing: '-0.24px'
-  },
-  c3M: {
-    tag: 'span',
-    size: '12px',
-    weight: 500,
-    lineHeight: '16px',
-    letterSpacing: '-0.24px'
-  },
-  c3R: {
-    tag: 'span',
-    size: '12px',
-    weight: 400,
-    lineHeight: '16px',
-    letterSpacing: '-0.24px'
-  },
-  c4B: {
-    tag: 'span',
-    size: '11px',
-    weight: 700,
-    lineHeight: '14px',
-    letterSpacing: '-0.22px'
-  },
-  c4M: {
-    tag: 'span',
-    size: '11px',
-    weight: 500,
-    lineHeight: '14px',
-    letterSpacing: '-0.22px'
-  },
-  c4R: {
-    tag: 'span',
-    size: '11px',
-    weight: 400,
-    lineHeight: '14px',
-    letterSpacing: '-0.22px'
-  },
-  c5B: {
-    tag: 'span',
-    size: '10px',
-    weight: 700,
-    lineHeight: '12px',
-    letterSpacing: '-0.2px'
-  },
-  c5M: {
-    tag: 'span',
-    size: '10px',
-    weight: 500,
-    lineHeight: '12px',
-    letterSpacing: '-0.2px'
-  },
-  c5R: {
-    tag: 'span',
-    size: '10px',
-    weight: 400,
-    lineHeight: '12px',
-    letterSpacing: '-0.2px'
-  }
-};
-
-export default caption;

package/themes/tictoccroc/typography/display.ts

@@ -1,90 +0,0 @@
-import type { TypographyDisplay } from '@typings/typography';
-
-const display: TypographyDisplay = {
-  d1B: {
-    tag: 'div',
-    size: '100px',
-    weight: 700,
-    lineHeight: '150px',
-    letterSpacing: '-2px'
-  },
-  d1M: {
-    tag: 'div',
-    size: '100px',
-    weight: 500,
-    lineHeight: '150px',
-    letterSpacing: '-2px'
-  },
-  d1R: {
-    tag: 'div',
-    size: '100px',
-    weight: 400,
-    lineHeight: '150px',
-    letterSpacing: '-2px'
-  },
-  d2B: {
-    tag: 'div',
-    size: '60px',
-    weight: 700,
-    lineHeight: '90px',
-    letterSpacing: '-1.2px'
-  },
-  d2M: {
-    tag: 'div',
-    size: '60px',
-    weight: 500,
-    lineHeight: '90px',
-    letterSpacing: '-1.2px'
-  },
-  d2R: {
-    tag: 'div',
-    size: '60px',
-    weight: 400,
-    lineHeight: '90px',
-    letterSpacing: '-1.2px'
-  },
-  d3B: {
-    tag: 'div',
-    size: '48px',
-    weight: 700,
-    lineHeight: '72px',
-    letterSpacing: '-0.96px'
-  },
-  d3M: {
-    tag: 'div',
-    size: '48px',
-    weight: 500,
-    lineHeight: '72px',
-    letterSpacing: '-0.96px'
-  },
-  d3R: {
-    tag: 'div',
-    size: '48px',
-    weight: 400,
-    lineHeight: '72px',
-    letterSpacing: '-0.96px'
-  },
-  d4B: {
-    tag: 'div',
-    size: '40px',
-    weight: 700,
-    lineHeight: '60px',
-    letterSpacing: '-0.8px'
-  },
-  d4M: {
-    tag: 'div',
-    size: '40px',
-    weight: 500,
-    lineHeight: '60px',
-    letterSpacing: '-0.8px'
-  },
-  d4R: {
-    tag: 'div',
-    size: '40px',
-    weight: 400,
-    lineHeight: '60px',
-    letterSpacing: '-0.8px'
-  }
-};
-
-export default display;

package/themes/tictoccroc/typography/headline.ts

@@ -1,132 +0,0 @@
-import type { TypographyHeadline } from '@typings/typography';
-
-const headline: TypographyHeadline = {
-  h0B: {
-    tag: 'h1',
-    size: '36px',
-    weight: 700,
-    lineHeight: '48px',
-    letterSpacing: '-0.72px'
-  },
-  h0M: {
-    tag: 'h1',
-    size: '36px',
-    weight: 500,
-    lineHeight: '48px',
-    letterSpacing: '-0.72px'
-  },
-  h0R: {
-    tag: 'h1',
-    size: '36px',
-    weight: 400,
-    lineHeight: '48px',
-    letterSpacing: '-0.72px'
-  },
-  h1B: {
-    tag: 'h1',
-    size: '24px',
-    weight: 700,
-    lineHeight: '36px',
-    letterSpacing: '-0.48px'
-  },
-  h1M: {
-    tag: 'h1',
-    size: '24px',
-    weight: 500,
-    lineHeight: '36px',
-    letterSpacing: '-0.48px'
-  },
-  h1R: {
-    tag: 'h1',
-    size: '24px',
-    weight: 400,
-    lineHeight: '36px',
-    letterSpacing: '-0.48px'
-  },
-  h2B: {
-    tag: 'h2',
-    size: '20px',
-    weight: 700,
-    lineHeight: '30px',
-    letterSpacing: '-0.4px'
-  },
-  h2M: {
-    tag: 'h2',
-    size: '20px',
-    weight: 500,
-    lineHeight: '30px',
-    letterSpacing: '-0.4px'
-  },
-  h2R: {
-    tag: 'h2',
-    size: '20px',
-    weight: 400,
-    lineHeight: '30px',
-    letterSpacing: '-0.4px'
-  },
-  h3B: {
-    tag: 'h3',
-    size: '18px',
-    weight: 700,
-    lineHeight: '26px',
-    letterSpacing: '-0.36px'
-  },
-  h3M: {
-    tag: 'h3',
-    size: '18px',
-    weight: 500,
-    lineHeight: '26px',
-    letterSpacing: '-0.36px'
-  },
-  h3R: {
-    tag: 'h3',
-    size: '18px',
-    weight: 400,
-    lineHeight: '26px',
-    letterSpacing: '-0.36px'
-  },
-  h4B: {
-    tag: 'h4',
-    size: '16px',
-    weight: 700,
-    lineHeight: '24px',
-    letterSpacing: '-0.32px'
-  },
-  h4M: {
-    tag: 'h4',
-    size: '16px',
-    weight: 500,
-    lineHeight: '24px',
-    letterSpacing: '-0.32px'
-  },
-  h4R: {
-    tag: 'h4',
-    size: '16px',
-    weight: 400,
-    lineHeight: '24px',
-    letterSpacing: '-0.32px'
-  },
-  h5B: {
-    tag: 'h5',
-    size: '14px',
-    weight: 700,
-    lineHeight: '20px',
-    letterSpacing: '-0.28px'
-  },
-  h5M: {
-    tag: 'h5',
-    size: '14px',
-    weight: 500,
-    lineHeight: '20px',
-    letterSpacing: '-0.28px'
-  },
-  h5R: {
-    tag: 'h5',
-    size: '14px',
-    weight: 400,
-    lineHeight: '20px',
-    letterSpacing: '-0.28px'
-  }
-};
-
-export default headline;

package/themes/tictoccroc/typography/index.ts

@@ -1,4 +0,0 @@
-export { default as body } from './body';
-export { default as caption } from './caption';
-export { default as headline } from './headline';
-export { default as display } from './display';

package/tsconfig.json

@@ -1,32 +0,0 @@
-{
-  "extends": "@dotss/typescript-config/react",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@components": ["./components"],
-      "@components/*": ["./components/*"],
-      "@resources": ["./resources"],
-      "@resources/*": ["./resources/*"],
-      "@core": ["./core"],
-      "@core/*": ["./core/*"],
-      "@hooks": ["./hooks"],
-      "@hooks/*": ["./hooks/*"],
-      "@themes": ["./themes"],
-      "@themes/*": ["./themes/*"],
-      "@typings": ["./typings"],
-      "@typings/*": ["./typings/*"],
-      "@utils": ["./utils"],
-      "@utils/*": ["./utils/*"]
-    }
-  },
-  "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts"],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "**/*.styles.tsx",
-    "**/*.styles.ts",
-    "**/*.test.tsx",
-    "vitest.setup.ts"
-  ],
-  "types": ["vitest/globals"]
-}

package/typings/color.ts

@@ -1,37 +0,0 @@
-import type { ColorValue } from '@typings/utility';
-
-export type BrandColorKey = 'primary' | 'secondary' | 'tertiary';
-
-export type BrandColorShade = {
-  primary:
-    | 'main'
-    | 'disable'
-    | 'disableLine'
-    | 'bg'
-    | 'pageControl'
-    | 'tooltip'
-    | 'line'
-    | 'press'
-    | 'text';
-  secondary: never;
-  tertiary: never;
-};
-
-export type BrandColorStyle<K extends BrandColorKey> = BrandColorShade[K] extends never
-  ? string
-  : Record<BrandColorShade[K], string>;
-
-export type ColorScaleKey = 'yellow' | 'blue' | 'green' | 'pink' | 'grey' | 'background' | 'etc';
-export type ColorScaleRange = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;
-
-export type BaseColorScaleKey = Exclude<ColorScaleKey, 'grey' | 'background' | 'etc'>;
-export type SpecifyColorScaleKey = 'background' | 'etc' | 'grey';
-
-export type ColorScale<T = unknown> = {
-  [key in ColorScaleRange]: ColorValue;
-} & T;
-
-export type GreyColorScale = ColorScale<{
-  white: ColorValue;
-  black: ColorValue;
-}>;

package/typings/component.ts

@@ -1,59 +0,0 @@
-import type {
-  ComponentPropsWithRef,
-  ComponentPropsWithoutRef,
-  ElementType,
-  ReactNode
-} from 'react';
-
-import type { Theme } from '@emotion/react';
-import type { CSSInterpolation } from '@emotion/serialize';
-
-import type * as SvgIcons from '@resources/tictoccroc/icons';
-import type { BaseColorScaleKey, BrandColorKey, ColorScaleRange } from '@typings/color';
-import type { BackgroundPalette, EtcPalette, GreyPalette, ThemeType } from '@typings/theme/core';
-import type {
-  TictoccrocBrandColorKey,
-  TictoccrocClassTypeColorKey
-} from '@typings/theme/tictoccroc';
-
-export type Variant = 'standard' | 'filled' | 'outlined' | 'ghost' | 'solid' | 'text';
-
-export type Size = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | '2xLarge';
-
-export type Color =
-  | BrandColorKey
-  | `${BaseColorScaleKey}.${ColorScaleRange}`
-  | `${keyof GreyPalette}.${keyof GreyPalette['grey']}`
-  | `${keyof EtcPalette}.${keyof EtcPalette['etc']}`
-  | `${keyof BackgroundPalette}.${keyof BackgroundPalette['background']}`
-  | `${ThemeType}.brand.${TictoccrocBrandColorKey}`
-  | `${ThemeType}.classType.${TictoccrocClassTypeColorKey}`;
-
-export type Spacing<T = unknown> = T &
-  Partial<
-    { spacingType: keyof Theme['spacing'] } & {
-      [key in `${'m' | 'p'}${'t' | 'b' | 'l' | 'r'}`]: number;
-    } & {
-      p: number;
-      m: number;
-    }
-  >;
-
-export type IconName = keyof typeof SvgIcons;
-
-export type InlineCSS = {
-  inlineCSS?: CSSInterpolation;
-};
-
-export type GeneralComponentProps<T> = T & InlineCSS;
-
-export type PolymorphicComponentProps<T extends ElementType> = {
-  tag?: T;
-} & InlineCSS &
-  ComponentPropsWithoutRef<T> & { ref?: PolymorphicRef<T> };
-
-export type PolymorphicRef<T extends ElementType> = ComponentPropsWithRef<T>['ref'];
-
-export type PolymorphicComponent<T extends ElementType, Q> = (
-  props: Omit<PolymorphicComponentProps<T>, keyof Q> & Q
-) => ReactNode;

package/typings/index.ts

@@ -1,7 +0,0 @@
-import type TictoccrocTheme from '@typings/theme/tictoccroc';
-
-declare module '@emotion/react' {
-  export interface Theme extends TictoccrocTheme {}
-}
-
-export type { TictoccrocTheme };

package/typings/theme/core.ts

@@ -1,72 +0,0 @@
-import type {
-  BaseColorScaleKey,
-  BrandColorKey,
-  BrandColorStyle,
-  ColorScale,
-  GreyColorScale,
-  SpecifyColorScaleKey
-} from '@typings/color';
-import type {
-  TypographyBody,
-  TypographyCaption,
-  TypographyDisplay,
-  TypographyHeadline
-} from '@typings/typography';
-import type { CSSValue, ColorValue } from '@typings/utility';
-
-type Palette<ExtendPalette> = {
-  [key in BaseColorScaleKey]: ColorScale;
-} & {
-  extend?: ExtendPalette;
-};
-
-type BrandPalette<ExtendBrandPalette> = Record<
-  'brand',
-  {
-    [K in BrandColorKey]: BrandColorStyle<K>;
-  } & {
-    extend?: ExtendBrandPalette;
-  }
->;
-
-export type GreyPalette = {
-  [key in Extract<SpecifyColorScaleKey, 'grey'>]: GreyColorScale;
-};
-
-export type BackgroundPalette = {
-  [key in Extract<SpecifyColorScaleKey, 'background'>]: Record<
-    Exclude<BrandColorKey, 'tertiary'>,
-    ColorValue
-  >;
-};
-
-export type EtcColorKey = 'red' | 'orange' | 'dimmed01' | 'dimmed02' | 'dimmed03';
-
-export type EtcPalette = {
-  [key in Extract<SpecifyColorScaleKey, 'etc'>]: Record<EtcColorKey, ColorValue>;
-};
-
-export type ThemeMode = 'light' | 'dark';
-
-export type ThemeType = 'tictoccroc-parent' | 'tictoccroc-teacher';
-
-export type ThemeConfig = {
-  mode: ThemeMode;
-  type: ThemeType;
-};
-
-export default interface BaseTheme<ExtendPalette = unknown, ExtendBrandPalette = unknown> {
-  mode: ThemeMode;
-  type: ThemeType;
-  palette: Palette<ExtendPalette> &
-    BrandPalette<ExtendBrandPalette> &
-    GreyPalette &
-    BackgroundPalette &
-    EtcPalette;
-  typography: TypographyDisplay & TypographyHeadline & TypographyBody & TypographyCaption;
-  spacing: {
-    content: (value: number) => number;
-    layout: (value: number) => number;
-  };
-  elevation: Record<0 | 1 | 2 | 3 | 4 | 5, CSSValue>;
-}

package/typings/theme/tictoccroc.ts

@@ -1,29 +0,0 @@
-import type BaseTheme from '@typings/theme/core';
-import type { ColorValue } from '@typings/utility';
-
-export type TictoccrocClassTypeColorKey =
-  | 'play'
-  | 'commute'
-  | 'learning'
-  | 'creativeArt'
-  | 'english'
-  | 'package';
-
-export type TictoccrocClassType = {
-  [key in TictoccrocClassTypeColorKey]: ColorValue;
-};
-
-export type TictoccrocBrandColorKey = 'yellow' | 'blue' | 'green' | 'pink';
-
-export type TictoccrocBrandColor = {
-  [key in TictoccrocBrandColorKey]: ColorValue;
-};
-
-type TictoccrocTheme = BaseTheme<
-  {
-    classType: TictoccrocClassType;
-  },
-  TictoccrocBrandColor
->;
-
-export default TictoccrocTheme;

package/typings/typography.ts

@@ -1,30 +0,0 @@
-import type { CSSValue } from '@typings/utility';
-
-type TypographyWeightKey = 'B' | 'M' | 'R';
-type TypographyWeight = 700 | 500 | 400;
-type TypographySizeRange = 0 | 1 | 2 | 3 | 4 | 5;
-type TypographyVariantKey = 'd' | 'h' | 'b' | 'c';
-
-export type TypographyContent = {
-  tag: `h${1 | 2 | 3 | 4 | 5}` | 'div' | 'span';
-  size: CSSValue;
-  weight: TypographyWeight;
-  lineHeight: CSSValue;
-  letterSpacing: CSSValue;
-};
-
-export type TypographyVariant<
-  Key extends TypographyVariantKey = TypographyVariantKey,
-  SizeRange extends TypographySizeRange = TypographySizeRange,
-  WeightKey extends TypographyWeightKey = TypographyWeightKey
-> = `${Extract<TypographyVariantKey, Key>}${Extract<TypographySizeRange, SizeRange>}${Extract<TypographyWeightKey, WeightKey>}`;
-
-export type TypographyDisplayKey = TypographyVariant<'d', 1 | 2 | 3 | 4, 'B' | 'M' | 'R'>;
-export type TypographyHeadlineKey = TypographyVariant<'h', 0 | 1 | 2 | 3 | 4 | 5, 'B' | 'M' | 'R'>;
-export type TypographyBodyKey = TypographyVariant<'b', 1 | 2 | 3 | 4 | 5, 'M' | 'R'>;
-export type TypographyCaptionKey = TypographyVariant<'c', 1 | 2 | 3 | 4 | 5>;
-
-export type TypographyDisplay = Record<TypographyDisplayKey, TypographyContent>;
-export type TypographyHeadline = Record<TypographyHeadlineKey, TypographyContent>;
-export type TypographyBody = Record<TypographyBodyKey, TypographyContent>;
-export type TypographyCaption = Record<TypographyCaptionKey, TypographyContent>;