@nurihaus/web-design-system 2.0.9 → 3.0.0

package/dist/tokens.css

@@ -0,0 +1,235 @@
+/* 변수만. 이것만 가져와도 화면이 바뀌지 않는다. CSS Modules 에서 var() 로 쓴다. */
+/* tokens/figma.json 에서 생성됨 — 손으로 고치지 않는다. `npm run tokens` */
+:root {
+  --color-purple-50: #F4EFFA;
+  --color-purple-100: #E9E0F5;
+  --color-purple-200: #DDD1F0;
+  --color-purple-300: #C3B4DD;
+  --color-purple-400: #A894C7;
+  --color-purple-500: #957EB4;
+  --color-purple-600: #6F56A3;
+  --color-purple-700: #4C277C;
+  --color-purple-800: #4C1D88;
+  --color-purple-900: #391D5D;
+  --color-grey-scale-50: #FAFAFA;
+  --color-grey-scale-100: #F4F4F5;
+  --color-grey-scale-200: #E4E4E7;
+  --color-grey-scale-300: #D4D4D8;
+  --color-grey-scale-400: #A1A1AA;
+  --color-grey-scale-500: #71717A;
+  --color-grey-scale-600: #52525B;
+  --color-grey-scale-700: #3F3F46;
+  --color-grey-scale-800: #27272A;
+  --color-grey-scale-900: #18181B;
+  --color-accent-red-50: #FFF5F6;
+  --color-accent-red-100: #FFE8E9;
+  --color-accent-red-200: #FBCFD2;
+  --color-accent-red-300: #F39AA0;
+  --color-accent-red-400: #E86F77;
+  --color-accent-red-500: #DF535C;
+  --color-accent-red-600: #C94751;
+  --color-accent-red-700: #B02E4C;
+  --color-accent-red-800: #8F243A;
+  --color-accent-red-900: #6E1A2C;
+  --color-accent-pink-50: #FFF1F6;
+  --color-accent-pink-100: #FFE4EE;
+  --color-accent-pink-200: #FECFE3;
+  --color-accent-pink-300: #FDA4CC;
+  --color-accent-pink-400: #F472B6;
+  --color-accent-pink-500: #EC6FAE;
+  --color-accent-pink-600: #D95D9A;
+  --color-accent-pink-700: #B94A7E;
+  --color-accent-pink-800: #93385F;
+  --color-accent-pink-900: #6E2644;
+  --color-accent-magenta-50: #FEF0FF;
+  --color-accent-magenta-100: #FEF0FF;
+  --color-accent-magenta-200: #F8C6FF;
+  --color-accent-magenta-300: #F29BFF;
+  --color-accent-magenta-400: #EC5CEF;
+  --color-accent-magenta-500: #E13BE7;
+  --color-accent-magenta-600: #C82FCC;
+  --color-accent-magenta-700: #A923A8;
+  --color-accent-magenta-800: #831C83;
+  --color-accent-magenta-900: #5E145E;
+  --color-accent-blue-50: #F1F4FF;
+  --color-accent-blue-100: #E3E8FF;
+  --color-accent-blue-200: #C7D2FE;
+  --color-accent-blue-300: #A5B4FC;
+  --color-accent-blue-400: #818CF8;
+  --color-accent-blue-500: #2563EB;
+  --color-accent-blue-600: #1F52C9;
+  --color-accent-blue-700: #1E40AF;
+  --color-accent-blue-800: #1C348A;
+  --color-accent-blue-900: #162763;
+  --color-accent-mint-50: #ECFEFD;
+  --color-accent-mint-100: #D1FAF7;
+  --color-accent-mint-200: #A7F3EE;
+  --color-accent-mint-300: #6EE7E0;
+  --color-accent-mint-400: #2DD4CB;
+  --color-accent-mint-500: #01ECE1;
+  --color-accent-mint-600: #0BC5BC;
+  --color-accent-mint-700: #0F9F99;
+  --color-accent-mint-800: #117D78;
+  --color-accent-mint-900: #135C58;
+  --color-accent-green-50: #ECFDF3;
+  --color-accent-green-100: #D1FAE1;
+  --color-accent-green-200: #A7F3C8;
+  --color-accent-green-300: #6EE7A3;
+  --color-accent-green-400: #41E176;
+  --color-accent-green-500: #22C55E;
+  --color-accent-green-600: #16A34A;
+  --color-accent-green-700: #289A3A;
+  --color-accent-green-800: #166534;
+  --color-accent-green-900: #14532D;
+  --color-accent-yellow-50: #FFFBEB;
+  --color-accent-yellow-100: #FEF3C7;
+  --color-accent-yellow-200: #FDE68A;
+  --color-accent-yellow-300: #FCD34D;
+  --color-accent-yellow-400: #FBBF24;
+  --color-accent-yellow-500: #FFB800;
+  --color-accent-yellow-600: #E0A106;
+  --color-accent-yellow-700: #B58105;
+  --color-accent-yellow-800: #8A6404;
+  --color-accent-yellow-900: #5F4703;
+  --color-accent-orange-50: #FFF7ED;
+  --color-accent-orange-100: #FFEDD5;
+  --color-accent-orange-200: #FED7AA;
+  --color-accent-orange-300: #FDBA74;
+  --color-accent-orange-400: #FB923C;
+  --color-accent-orange-500: #F97316;
+  --color-accent-orange-600: #EA580C;
+  --color-accent-orange-700: #C2410C;
+  --color-accent-orange-800: #9A3412;
+  --color-accent-orange-900: #7C2D12;
+  --font-family-primary: Pretendard;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-size-xsm: 12px;
+  --font-size-sm: 14px;
+  --font-size-base: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 30px;
+  --font-size-4xl: 36px;
+  --font-size-5xl: 48px;
+  --font-size-6xl: 60px;
+  --spacing-2: 2px;
+  --spacing-4: 4px;
+  --spacing-6: 6px;
+  --spacing-8: 8px;
+  --spacing-10: 10px;
+  --spacing-12: 12px;
+  --spacing-14: 14px;
+  --spacing-16: 16px;
+  --spacing-18: 18px;
+  --spacing-20: 20px;
+  --spacing-22: 22px;
+  --spacing-24: 24px;
+  --spacing-26: 26px;
+  --spacing-28: 28px;
+  --spacing-30: 30px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-16: 16px;
+  --radius-20: 20px;
+  --radius-full: 9999px;
+  --color-black: #000000;
+  --color-white: #FFFFFF;
+
+  --line-height-xsm: 18px;
+  --line-height-sm: 18px;
+  --line-height-base: 22px;
+  --line-height-lg: 24px;
+  --line-height-xl: 28px;
+  --line-height-2xl: 32px;
+  --line-height-3xl: 36px;
+  --line-height-4xl: 43px;
+  --line-height-5xl: 66px;
+  --line-height-6xl: 82px;
+}
+/* semantic: app */
+:root, :root[data-ds-theme='app'] {
+  --button-variant-primary-background: var(--color-purple-900);
+  --button-variant-primary-border: var(--color-purple-900);
+  --button-variant-primary-text: var(--color-white);
+  --button-variant-ghost-background: var(--color-white);
+  --button-variant-ghost-border: var(--color-grey-scale-300);
+  --button-variant-ghost-text: var(--color-purple-900);
+  --button-variant-secondary-background: var(--color-purple-50);
+  --button-variant-secondary-border: var(--color-purple-50);
+  --button-variant-secondary-text: var(--color-purple-900);
+  --button-variant-neutral-background: var(--color-white);
+  --button-variant-neutral-border: var(--color-white);
+  --button-variant-neutral-text: var(--color-purple-900);
+  --button-variant-disabled-background: var(--color-grey-scale-200);
+  --button-variant-disabled-border: var(--color-grey-scale-200);
+  --button-variant-disabled-text: var(--color-white);
+  --button-variant-outlined-background: var(--color-white);
+  --button-variant-outlined-border: var(--color-accent-red-700);
+  --button-variant-outlined-text: var(--color-accent-red-700);
+  --button-size-xl: [object Object];
+  --button-size-lg: [object Object];
+  --button-size-md: [object Object];
+  --button-size-rg: [object Object];
+  --button-size-sm: [object Object];
+  --button-size-xs: [object Object];
+}
+/* semantic: admin */
+:root[data-ds-theme='admin'] {
+  --button-variant-primary-border: var(--color-purple-900);
+  --button-variant-primary-text: var(--color-white);
+  --button-variant-primary-hover-background: var(--color-purple-900);
+  --button-variant-primary-hover-border: var(--color-purple-900);
+  --button-variant-primary-hover-text: var(--color-white);
+  --button-variant-ghost-background: var(--color-white);
+  --button-variant-ghost-border: var(--color-grey-scale-300);
+  --button-variant-ghost-text: var(--color-purple-900);
+  --button-variant-ghost-hover-background: var(--color-white);
+  --button-variant-ghost-hover-border: var(--color-purple-900);
+  --button-variant-ghost-hover-text: var(--color-purple-900);
+  --button-variant-secondary-background: var(--color-purple-50);
+  --button-variant-secondary-border: var(--color-purple-50);
+  --button-variant-secondary-text: var(--color-purple-900);
+  --button-variant-secondary-hover-background: var(--color-purple-100);
+  --button-variant-secondary-hover-border: var(--color-purple-100);
+  --button-variant-secondary-hover-text: var(--color-purple-900);
+  --button-variant-disabled-background: var(--color-grey-scale-200);
+  --button-variant-disabled-border: var(--color-grey-scale-200);
+  --button-variant-disabled-text: var(--color-white);
+  --button-variant-outlined-background: var(--color-white);
+  --button-variant-outlined-border: var(--color-accent-red-700);
+  --button-variant-outlined-text: var(--color-accent-red-700);
+  --button-variant-neutral-background: var(--color-white);
+  --button-variant-neutral-border: var(--color-white);
+  --button-variant-neutral-text: var(--color-purple-900);
+  --button-variant-neutral-hover-background: var(--color-grey-scale-100);
+  --button-variant-neutral-hover-border: var(--color-grey-scale-100);
+  --button-variant-neutral-hover-text: var(--color-purple-900);
+  --button-variant-confirm-background: var(--color-accent-red-500);
+  --button-variant-confirm-border: var(--color-accent-red-500);
+  --button-variant-confirm-text: var(--color-white);
+  --button-variant-confirm-hover-background: var(--color-accent-red-700);
+  --button-variant-confirm-hover-border: var(--color-accent-red-700);
+  --button-variant-confirm-hover-text: var(--color-white);
+  --button-xl: [object Object];
+  --button-l: [object Object];
+  --button-sb: [object Object];
+  --button-r: [object Object];
+  --button-s: [object Object];
+  --button-xs: [object Object];
+  --button-size-xs: 30;
+  --button-size-s: 40;
+  --button-size-r: 48;
+  --button-size-m: 50;
+  --button-size-l: 54;
+  --button-size-xl: 60;
+}
+.nuri-theme {
+  --cursor-button: pointer;
+  --cursor-disabled: not-allowed;
+  --cursor-link: pointer;
+}