teachable-design-system 0.1.0

package/src/components/TabBar/style.ts

@@ -0,0 +1,53 @@
+import styled from "@emotion/styled";
+import { colors } from "@/style/theme";
+import { typography } from "@/style/theme";
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 160px;
+  height: 100vh;
+  padding: 16px;
+  background-color: ${colors.surface.white};
+  gap: 16px;
+`;
+
+export const Title = styled.span`
+  padding: 4px 0;
+  margin: 0;
+  ${typography.heading.xxsmall}
+  font-family:${typography.fontFamily.primary};
+  color: ${colors.text.bolder};
+`;
+
+interface TabItemProps {
+  isSelected: boolean;
+}
+export const Tablist = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+export const TabItem = styled.div<TabItemProps>`
+  padding: 8px 8px;
+  font-family: ${typography.fontFamily.primary};
+  ${({ isSelected }) =>
+    isSelected ? typography.body.xsmallBold : typography.body.xsmall}
+  color: ${({ isSelected }) =>
+    isSelected ? colors.text.secondary : colors.text.subtle};
+  background-color: ${({ isSelected }) =>
+    isSelected ? colors.action["secondary-selected"] : "transparent"};
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ isSelected }) =>
+      isSelected
+        ? colors.action["secondary-selected"]
+        : colors.action["secondary-hover"]};
+  }
+
+  &:active {
+    background-color: ${colors.action["secondary-pressed"]};
+  }
+`;

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from './Button'
+export * from './CheckBox'
+export * from './Dropdown'
+export * from './Input'
+export * from './Sidebar'
+export * from './TabBar'

package/src/foundation/index.ts

@@ -0,0 +1 @@
+// export * from "./Avatar"; 형식으로

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./components";
+export * from "./foundation";

package/src/style/index.ts

@@ -0,0 +1 @@
+export * from "./theme";

package/src/style/theme/colors.ts

@@ -0,0 +1,504 @@
+export const colors = {
+  //mode
+  background: {
+    'white': '#FFFFFF',
+    'black': '#000000',
+    'gray-subtler': '#F4F5F6',
+    'gray-subtle': '#E6E8EA',
+    'inverse': '#1E2124',
+    
+  },
+  surface: {
+    'white': '#FFFFFF',
+    'white-subtler': '#FFFFFF',
+    'white-subtle': '#FFFFFF',
+    'white-static': '#FFFFFF',
+    'inverse' : '#1E2124',
+    'inverse-static': '#1E2124',
+    'gray-subtler' :'#F4F5F6',
+    'gray-subtle' :'#E6E8EA',
+    'disabled' : '#CDD1D5',
+    'primary-subtler': '#ECF2FE',
+    'secondary-subtler': '#EEF2F7',
+    'point-subtler': '#FBEFF0',
+    'danger-subtler': '#FDEFEC',
+    'warning-subtler': '#FFF3DB',
+    'success-subtler': '#EAF6EC',
+    'information-subtler': '#E7F4FE'
+  },
+  
+  border: {
+    'transparency' : 'rgba(0, 0, 0, 0)',
+    'inverse' : '#FFFFFF',
+    'disabled' : '#B1B8BE',
+    'gray-light' : '#CDD1D5',
+    'gray' : '#B1B8BE',
+    'gray-dark' : '#58616A',
+    'gray-darker' : '#1E2124',
+    'primary-light' : '#D8E5FD',
+    'primary' : '#256EF4',
+    'secondary-light' : '#D6E0EB',
+    'secondary' : '#063A74',
+    'point-light' : '#F5D6D9',
+    'point' : '#D63D4A',
+    'danger-light' : '#FCDFD9',
+    'danger' : '#DE3412',
+    'warning-light' : '#FFE0A3',
+    'warning' : '#9E6A00',
+    'success-light' : '#D8EEDD',
+    'success' : '#228738',
+    'information-light' : '#D3EBFD',
+    'information' : '#0B78CB'
+  },
+  
+  divider: {
+    'gray-light' : '#CDD1D5',
+    'gray' : '#8A949E',
+    'gray-dark' : '#6D7882',
+    'gray-darker' : '#1E2124',
+    'inverse' : '#FFFFFF',
+    'primary-light' : '#D8E5FD',
+    'primary' : '#256EF4',
+    'secondary-light' : '#D6E0EB',
+    'secondary' : '#063A74',
+    'error' : '#DE3412',
+    'point' : '#D63D4A'
+  },
+  
+  text: {
+    'bolder' : '#131416',
+    'basic' : '#1E2124',
+    'subtle' : '#464C53',
+    'disabled' : '#8A949E',
+    'disabled-on' : '#6D7882',
+    'border-inverse' : '#FFFFFF',
+    'basic-inverse' : '#FFFFFF',
+    'subtle-inverse' : '#B1B8BE',
+    'static' : '#1E2124',
+    'inverse-static' : '#FFFFFF',
+    'primary' : '#0B50D0',
+    'secondary' : '#052B57',
+    'point' : '#AB2B36',
+    'danger' : '#BD2C0F',
+    'warning' : '#8A5C00',
+    'success' : '#267337',
+    'information' : '#096AB3'
+  },
+  
+  action: {
+    'white' : '#FFFFFF',
+    'primary' : 'rgba(255, 255, 255, 0)',
+    'primary-hover' : '#ECF2FE',
+    'primary-pressed' : '#D8E5FD',
+    'primary-selected' : '#ECF2FE',
+    'primary-active' : '#256EF4',
+    'secondary' : 'rgba(255, 255, 255, 0)',
+    'secondary-hover' : '#EEF2F7',
+    'secondary-pressed' : '#D6E0EB',
+    'secondary-selected' : '#EEF2F7',
+    'secondary-on' : '#rgba(255, 255, 255, 0)',
+    'secondary-on-hover' : '#FFFFFF',
+    'secondary-on-pressed' : '#D6E0EB',
+    'secondary-on-selected' : '#FFFFFF',
+    'secondary-active' : '#063A74',
+    'disabled' : '#CDD1D5'
+  },
+  
+  element: {
+    'inverse': '#FFFFFF',
+    'inverse-static': '#FFFFFF',
+    'gray-lighter': '#',
+    'gray-light': '#E6E8EA',
+    'gray': '#6D7882',
+    'gray-dark': '#58616A',
+    'disabled-light': '#CDD1D5',
+    'disabled-dark': '#8A949E',
+    'primary-light': '#D8E5FD',
+    'primary-lighter': '#ECF2FE',
+    'primary': '#256EF4',
+    'secondary-light': '#D6E0EB',
+    'secondary-lighter': '#EEF2F7',
+    'secondary': '#063A74',
+    'point-light': '#F5D6D9',
+    'point-lighter': '#FBEFF0',
+    'point': '#D63D4A',
+    'danger': '#DE3412',
+    'danger-lighter': '#FDEFEC',
+    'warning': '#FFB114',
+    'warning-lighter': '#FFF3DB',
+    'success': '#228738',
+    'success-lighter': '#EAF6EC',
+    'information': '#0B78CB',
+    'information-lighter': '#E7F4FE',
+    'logo-text' : '#575756'
+  },
+  
+  icon: {
+    'gray': '#33363D',
+    'gary-light': '#464C53',
+    'gray-fill': '#CDD1D5',
+    'inverse': '#FFFFFF',
+    'disabled': '#8A949E',
+    'disabled-on': '#6D7882',
+    'primary': '#256EF4',
+    'secondary': '#052B57',
+    'point': '#D63D4A',
+    'danger': '#DE3412',
+    'warning': '#9E6A00',
+    'success': '#228738',
+    'information': '#0B78CB',
+    'inverse-static': '#FFFFFF',
+    'primary-static': '#256EF4',
+    'secondary-static': '#052B57',
+    'point-static': '#D63D4A',
+    'danger-static': '#DE3412',
+    'warning-static': '#9E6A00',
+    'success-static': '#228738',
+    'information-static': '#0B78CB'
+  },
+  
+  link: {
+    'default': '#0B78CB',
+    'hover': '#0B50D0',
+    'pressed': '#083891',
+    'visited': '#5917B8'
+  },
+  
+  button: {
+    'primary-fill': '#256EF4',
+    'primary-fill-hover': '#0B50D0',
+    'primary-fill-pressed': '#083891',
+    'secondary-fill': '#ECF2FE',
+    'secondary-fill-hover': '#D8E5FD',
+    'secondary-fill-pressed': '#B1CEFB',
+    'secondary-border': '#256EF4',
+    'tertiary-fill': 'rgba(255, 255, 255, 0)',
+    'tertiary-fill-hover': '#F4F5F6',
+    'tertiary-fill-pressed': '#E6E8EA',
+    'tertiary-border': '#58616A',
+    'text-fill': 'rgba(255, 255, 255, 0)',
+    'text-fill-hover': '#EEF2F7',
+    'text-fill-pressed': '#D6E0EB',
+    'text-border': 'rgba(0, 0, 0, 0)',
+    'disabled-fill': '#CDD1D5',
+    'disabled-border': '#B1B8BE'
+  },
+  
+  input: {
+    'surface': '#FFFFFF',
+    'border': '#58616A',
+    'border-active': '#256EF4',
+    'border-error': '#DE3412',
+    'surface-disabled': '#CDD1D5',
+    'border-disabled': '#B1B8BE',
+  },
+  
+  graphic: {
+    'blue-subtler': '#E5ECF9',
+    'blue-subtle': '#98ACC5',
+    'blue': '#61758F',
+    'blue-dark': '#39506C',
+    'blue-darker': '#223A58',
+    'red-subtler': '#FBEFF0',
+    'red-subtle': '#F5D6D9',
+    'red': '#EBADB2',
+    'red-dark': '#D65C66',
+    'red-darker': '#7A1F26',
+    'brand': '#256EF4'
+  },
+  
+  alpha: {
+    'base100': 'rgba(255, 255, 255, 1)',
+    'base75': 'rgba(255, 255, 255, 0.75)',
+    'base50': 'rgba(255, 255, 255, 0.50)',
+    'base25': 'rgba(255, 255, 255, 0.25)',
+    'base10': 'rgba(255, 255, 255, 0.1)',
+    'base0': 'rgba(255, 255, 255, 0)',
+    'inverse100': 'rgba(0, 0, 0, 1)',
+    'inverse75': 'rgba(0, 0, 0, 0.75)',
+    'inverse50': 'rgba(0, 0, 0, 0.5)',
+    'inverse25': 'rgba(0, 0, 0, 0.25)',
+    'inverse10': 'rgba(0, 0, 0, 0.1)',
+    'inverse0': 'rgba(0, 0, 0, 0)',
+    'shadow0': 'rgba(0, 0, 0, 0)',
+    'shadow1': 'rgba(0, 0, 0, 0.05)',
+    'shadow2': 'rgba(0, 0, 0, 0.08)',
+    'shadow3': 'rgba(0, 0, 0, 0.12)',
+  },
+  //primitive
+  light: {
+    gray: {
+      '100': '#000000',
+      '95': '#131416',
+      '90': '#1E2124',
+      '80': '#33363D',
+      '70': '#464C53',
+      '60': '#58616A',
+      '50': '#6D7882',
+      '40': '#8A949E',
+      '30': '#B1B8BE',
+      '20': '#CDD1D5',
+      '10': '#E6E8EA',
+      '5': '#F4F5F6',
+      '0': '#FFFFFF',
+    },
+    
+    primary: {
+      '95': '#020F27',
+      '90': '#03163A',
+      '80': '#052561',
+      '70': '#083891',
+      '60': '#0B50D0',
+      '50': '#256EF4',
+      '40': '#4C87F6',
+      '30': '#86AFF9',
+      '20': '#B1CEFB',
+      '10': '#D8E5FD',
+      '5': '#ECF2FE',
+    },
+    
+    secondary: {
+      '95': '#02162C',
+      '90': '#031F3F',
+      '80': '#052B57',
+      '70': '#063A74',
+      '60': '#1C589C',
+      '50': '#346FB2',
+      '40': '#6B96C7',
+      '30': '#90B0D5',
+      '20': '#BACBDE',
+      '10': '#D6E0EB',
+      '5': '#EEF2F7',
+    },
+    
+    point: {
+      '95': '#21080A',
+      '90': '#310C0F',
+      '80': '#521419',
+      '70': '#7A1F26',
+      '60': '#AB2B36',
+      '50': '#D63D4A',
+      '40': '#D65C66',
+      '30': '#E0858C',
+      '20': '#EBADB2',
+      '10': '#F5D6D9',
+      '5': '#FBEFF0'
+    },
+    
+    danger: {
+      '95': '#260903',
+      '90': '#390D05',
+      '80': '#5C180A',
+      '70': '#8A240F',
+      '60': '#BD2C0F',
+      '50': '#DE3412',
+      '40': '#F05F42',
+      '30': '#F48771',
+      '20': '#F7AFA1',
+      '10': '#FCDFD9',
+      '5': '#FDEFEC',
+    },
+    
+    warning: {
+      '95': '#241800',
+      '90': '#2E1F00',
+      '80': '#422C00',
+      '70': '#614100',
+      '60': '#8A5C00',
+      '50': '#9E6A00',
+      '40': '#C78500',
+      '30': '#FFB114',
+      '20': '#FFC95C',
+      '10': '#FFE0A3',
+      '5': '#FFF3DB'
+    },
+    
+    success: {
+      '95': '#0E2012',
+      '90': '#122B18',
+      '80': '#1F4727',
+      '70': '#285D33',
+      '60': '#267337',
+      '50': '#228738',
+      '40': '#3FA654',
+      '30': '#7EC88E',
+      '20': '#A9DAB4',
+      '10': '#D8EEDD',
+      '5': '#EAF6EC',
+    },
+    
+    information: {
+      '95': '#021A2C',
+      '90': '#03253F',
+      '80': '#053961',
+      '70': '#085691',
+      '60': '#096AB3',
+      '50': '#0B78CB',
+      '40': '#2098F3',
+      '30': '#5FB5F7',
+      '20': '#9ED2FA',
+      '10': '#D3EBFD',
+      '5': '#E7F4FE'
+    },
+    
+    alpha: {
+      'black100': 'rgba(0, 0, 0, 1)',
+      'black75': 'rgba(0, 0, 0, 0.75)',
+      'black50': 'rgba(0, 0, 0, 0.5)',
+      'black25': 'rgba(0, 0, 0, 0.25)',
+      'black10': 'rgba(0, 0, 0, 0.1)',
+      'black0': 'rgba(0, 0, 0, 0)',
+      'white100': 'rgba(0, 0, 0, 1)',
+      'white75': 'rgba(0, 0, 0, 0.75)',
+      'white50': 'rgba(0, 0, 0, 0.50)',
+      'white25': 'rgba(0, 0, 0, 0.25)',
+      'white10': 'rgba(0, 0, 0, 0.1)',
+      'white0': 'rgba(0, 0, 0, 0)',
+    },
+    
+    graphic: {
+      '90': '#223A58',
+      '70': '#39506C',
+      '50': '#61758F',
+      '30': '#98ACC5',
+      '10': '#E5ECF9'
+    },
+  },
+  
+  highContrast:{
+    gray: {
+      '100': '#000000',
+      '95': '#131416',
+      '90': '#1E2124',
+      '80': '#33363D',
+      '70': '#464C53',
+      '60': '#58616A',
+      '50': '#6D7882',
+      '40': '#8A949E',
+      '30': '#B1B8BE',
+      '20': '#CDD1D5',
+      '10': '#E6E8EA',
+      '5': '#F4F5F6',
+      '0': '#FFFFFF',
+    },
+    
+    primary: {
+      '95': '#020F27',
+      '90': '#03163A',
+      '80': '#052561',
+      '70': '#083891',
+      '60': '#0B50D0',
+      '50': '#256EF4',
+      '40': '#4C87F6',
+      '30': '#86AFF9',
+      '20': '#B1CEFB',
+      '10': '#D8E5FD',
+      '5': '#ECF2FE',
+    },
+    
+    secondary: {
+      '95': '#091F25',
+      '90': '#0E3139',
+      '80': '#113B45',
+      '70': '#17505E',
+      '60': '#1F687A',
+      '50': '#268097',
+      '40': '#3D9FB8',
+      '30': '#75C0D1',
+      '20': '#ABD8E3',
+      '10': '#D5EBF1',
+      '5': '#EDF6F8'
+    },
+    point: {
+      '95': '#21080A',
+      '90': '#310C0F',
+      '80': '#521419',
+      '70': '#7A1F26',
+      '60': '#AB2B36',
+      '50': '#D63D4A',
+      '40': '#D65C66',
+      '30': '#E0858C',
+      '20': '#EBADB2',
+      '10': '#F5D6D9',
+      '5': '#FBEFF0'
+    },
+    danger: {
+      '95': '#260903',
+      '90': '#390D05',
+      '80': '#5C180A',
+      '70': '#8A240F',
+      '60': '#BD2C0F',
+      '50': '#DE3412',
+      '40': '#F05F42',
+      '30': '#F48771',
+      '20': '#F7AFA1',
+      '10': '#FCDFD9',
+      '5': '#FDEFEC',
+    },
+    
+    warning: {
+      '95': '#241800',
+      '90': '#2E1F00',
+      '80': '#422C00',
+      '70': '#614100',
+      '60': '#8A5C00',
+      '50': '#9E6A00',
+      '40': '#C78500',
+      '30': '#FFB114',
+      '20': '#FFC95C',
+      '10': '#FFE0A3',
+      '5': '#FFF3DB'
+    },
+    
+    success: {
+      '95': '#0E2012',
+      '90': '#122B18',
+      '80': '#1F4727',
+      '70': '#285D33',
+      '60': '#267337',
+      '50': '#228738',
+      '40': '#3FA654',
+      '30': '#7EC88E',
+      '20': '#A9DAB4',
+      '10': '#D8EEDD',
+      '5': '#EAF6EC',
+    },
+    
+    information: {
+      '95': '#021A2C',
+      '90': '#03253F',
+      '80': '#053961',
+      '70': '#085691',
+      '60': '#096AB3',
+      '50': '#0B78CB',
+      '40': '#2098F3',
+      '30': '#5FB5F7',
+      '20': '#9ED2FA',
+      '10': '#D3EBFD',
+      '5': '#E7F4FE'
+    },
+    
+    alpha: {
+      'black100': 'rgba(0, 0, 0, 1)',
+      'black75': 'rgba(0, 0, 0, 0.75)',
+      'black50': 'rgba(0, 0, 0, 0.5)',
+      'black25': 'rgba(0, 0, 0, 0.25)',
+      'black10': 'rgba(0, 0, 0, 0.1)',
+      'black0': 'rgba(0, 0, 0, 0)',
+      'white100': 'rgba(0, 0, 0, 1)',
+      'white75': 'rgba(0, 0, 0, 0.75)',
+      'white50': 'rgba(0, 0, 0, 0.50)',
+      'white25': 'rgba(0, 0, 0, 0.25)',
+      'white10': 'rgba(0, 0, 0, 0.1)',
+      'white0': 'rgba(0, 0, 0, 0)',
+    },
+    
+    graphic: {
+      '90': '#223A58',
+      '70': '#39506C',
+      '50': '#61758F',
+      '30': '#98ACC5',
+      '10': '#E5ECF9'
+    },
+  },
+};

package/src/style/theme/index.ts

@@ -0,0 +1,2 @@
+export { colors } from './colors';
+export { typography } from './typography';