@tide-tds/foundation 0.0.0-stage → 0.2.0

package/dist/tokens.css

@@ -0,0 +1,551 @@
+/* 이 파일은 @tide-tds/foundation 빌드 스크립트가 만든다. 직접 고치지 않는다. */
+
+:root {
+  --tide-color-white: #ffffff;
+  --tide-color-black: #000000;
+  --tide-color-blue-50: #f0f6fe;
+  --tide-color-blue-100: #ddeafc;
+  --tide-color-blue-200: #c3dafb;
+  --tide-color-blue-300: #9bc3fd;
+  --tide-color-blue-400: #65a1f9;
+  --tide-color-blue-500: #3183f5;
+  --tide-color-blue-600: #006ae2;
+  --tide-color-blue-700: #005ac2;
+  --tide-color-blue-800: #0049a1;
+  --tide-color-blue-900: #093f85;
+  --tide-color-blue-950: #0d2850;
+  --tide-color-gray-50: #f5f5f6;
+  --tide-color-gray-100: #e8e8ea;
+  --tide-color-gray-200: #d7d8da;
+  --tide-color-gray-300: #bec1c4;
+  --tide-color-gray-400: #9da1a6;
+  --tide-color-gray-500: #82878e;
+  --tide-color-gray-600: #6b7179;
+  --tide-color-gray-700: #5b6068;
+  --tide-color-gray-800: #4a4e54;
+  --tide-color-gray-900: #3f4247;
+  --tide-color-gray-950: #28292c;
+  --tide-color-green-50: #f0f7f1;
+  --tide-color-green-100: #deeee0;
+  --tide-color-green-200: #c4e1c9;
+  --tide-color-green-300: #9bd0a5;
+  --tide-color-green-400: #60b775;
+  --tide-color-green-500: #15a14c;
+  --tide-color-green-600: #00873d;
+  --tide-color-green-700: #007433;
+  --tide-color-green-800: #005f28;
+  --tide-color-green-900: #005121;
+  --tide-color-green-950: #073315;
+  --tide-color-amber-50: #faf4ed;
+  --tide-color-amber-100: #f3e7d7;
+  --tide-color-amber-200: #ead5b8;
+  --tide-color-amber-300: #e0ba85;
+  --tide-color-amber-400: #ce9437;
+  --tide-color-amber-500: #b47900;
+  --tide-color-amber-600: #976500;
+  --tide-color-amber-700: #815600;
+  --tide-color-amber-800: #6a4600;
+  --tide-color-amber-900: #5b3b00;
+  --tide-color-amber-950: #3a2400;
+  --tide-color-red-50: #fff2f0;
+  --tide-color-red-100: #fde1dd;
+  --tide-color-red-200: #fccac4;
+  --tide-color-red-300: #fca79d;
+  --tide-color-red-400: #f47368;
+  --tide-color-red-500: #ea3e39;
+  --tide-color-red-600: #d30016;
+  --tide-color-red-700: #b60011;
+  --tide-color-red-800: #96000c;
+  --tide-color-red-900: #7d0e10;
+  --tide-color-red-950: #4c120f;
+  --tide-color-cyan-50: #eff7fa;
+  --tide-color-cyan-100: #dcecf2;
+  --tide-color-cyan-200: #c0deea;
+  --tide-color-cyan-300: #93cae0;
+  --tide-color-cyan-400: #51aed0;
+  --tide-color-cyan-500: #0094bc;
+  --tide-color-cyan-600: #007c9e;
+  --tide-color-cyan-700: #006a87;
+  --tide-color-cyan-800: #00576f;
+  --tide-color-cyan-900: #004a5f;
+  --tide-color-cyan-950: #002f3d;
+  --tide-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  --tide-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --tide-font-size-12: 0.75rem;
+  --tide-font-size-14: 0.875rem;
+  --tide-font-size-16: 1rem;
+  --tide-font-size-18: 1.125rem;
+  --tide-font-size-20: 1.25rem;
+  --tide-font-size-24: 1.5rem;
+  --tide-font-size-32: 2rem;
+  --tide-font-size-40: 2.5rem;
+  --tide-font-size-48: 3rem;
+  --tide-font-size-56: 3.5rem;
+  --tide-font-light: 300;
+  --tide-font-normal: 400;
+  --tide-font-medium: 500;
+  --tide-font-semibold: 600;
+  --tide-font-bold: 700;
+  --tide-text-display-lg: var(--tide-font-size-56);
+  --tide-text-display-lg--line-height: 4rem;
+  --tide-text-display-lg--font-weight: var(--tide-font-bold);
+  --tide-text-display-md: var(--tide-font-size-48);
+  --tide-text-display-md--line-height: 3.5rem;
+  --tide-text-display-md--font-weight: var(--tide-font-bold);
+  --tide-text-heading-xl: var(--tide-font-size-40);
+  --tide-text-heading-xl--line-height: 3rem;
+  --tide-text-heading-xl--font-weight: var(--tide-font-bold);
+  --tide-text-heading-lg: var(--tide-font-size-32);
+  --tide-text-heading-lg--line-height: 2.5rem;
+  --tide-text-heading-lg--font-weight: var(--tide-font-bold);
+  --tide-text-heading-md: var(--tide-font-size-24);
+  --tide-text-heading-md--line-height: 2rem;
+  --tide-text-heading-md--font-weight: var(--tide-font-bold);
+  --tide-text-heading-sm: var(--tide-font-size-20);
+  --tide-text-heading-sm--line-height: 1.75rem;
+  --tide-text-heading-sm--font-weight: var(--tide-font-semibold);
+  --tide-text-heading-xs: var(--tide-font-size-18);
+  --tide-text-heading-xs--line-height: 1.75rem;
+  --tide-text-heading-xs--font-weight: var(--tide-font-semibold);
+  --tide-text-body-lg: var(--tide-font-size-18);
+  --tide-text-body-lg--line-height: 1.75rem;
+  --tide-text-body-lg--font-weight: var(--tide-font-normal);
+  --tide-text-body-md: var(--tide-font-size-16);
+  --tide-text-body-md--line-height: 1.5rem;
+  --tide-text-body-md--font-weight: var(--tide-font-normal);
+  --tide-text-body-sm: var(--tide-font-size-14);
+  --tide-text-body-sm--line-height: 1.25rem;
+  --tide-text-body-sm--font-weight: var(--tide-font-normal);
+  --tide-text-label-lg: var(--tide-font-size-16);
+  --tide-text-label-lg--line-height: 1.25rem;
+  --tide-text-label-lg--font-weight: var(--tide-font-medium);
+  --tide-text-label-md: var(--tide-font-size-14);
+  --tide-text-label-md--line-height: 1.25rem;
+  --tide-text-label-md--font-weight: var(--tide-font-medium);
+  --tide-text-label-sm: var(--tide-font-size-12);
+  --tide-text-label-sm--line-height: 1rem;
+  --tide-text-label-sm--font-weight: var(--tide-font-medium);
+  --tide-text-caption: var(--tide-font-size-12);
+  --tide-text-caption--line-height: 1rem;
+  --tide-text-caption--font-weight: var(--tide-font-normal);
+  --tide-rounded-sm: 0.25rem;
+  --tide-rounded-md: 0.375rem;
+  --tide-rounded-lg: 0.5rem;
+  --tide-rounded-xl: 0.75rem;
+  --tide-rounded-full: 9999px;
+  --tide-focus-ring-width: 2px;
+  --tide-focus-ring-offset: 2px;
+  --tide-duration-fast: 150ms;
+  --tide-duration-normal: 300ms;
+  --tide-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --tide-z-sticky: 100;
+  --tide-z-modal: 200;
+  --tide-z-popover: 300;
+  --tide-z-toast: 400;
+  --tide-z-tooltip: 500;
+}
+
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+  --tide-blue-solid: var(--tide-color-blue-600);
+  --tide-blue-solid-hover: var(--tide-color-blue-700);
+  --tide-blue-solid-active: var(--tide-color-blue-800);
+  --tide-blue-subtle: var(--tide-color-blue-50);
+  --tide-blue-subtle-hover: var(--tide-color-blue-100);
+  --tide-blue-subtle-active: var(--tide-color-blue-200);
+  --tide-blue-text: var(--tide-color-blue-800);
+  --tide-blue-border: var(--tide-color-blue-600);
+  --tide-blue-on-solid: var(--tide-color-white);
+  --tide-gray-solid: var(--tide-color-gray-600);
+  --tide-gray-solid-hover: var(--tide-color-gray-700);
+  --tide-gray-solid-active: var(--tide-color-gray-800);
+  --tide-gray-subtle: var(--tide-color-gray-50);
+  --tide-gray-subtle-hover: var(--tide-color-gray-100);
+  --tide-gray-subtle-active: var(--tide-color-gray-200);
+  --tide-gray-text: var(--tide-color-gray-800);
+  --tide-gray-border: var(--tide-color-gray-600);
+  --tide-gray-on-solid: var(--tide-color-white);
+  --tide-green-solid: var(--tide-color-green-600);
+  --tide-green-solid-hover: var(--tide-color-green-700);
+  --tide-green-solid-active: var(--tide-color-green-800);
+  --tide-green-subtle: var(--tide-color-green-50);
+  --tide-green-subtle-hover: var(--tide-color-green-100);
+  --tide-green-subtle-active: var(--tide-color-green-200);
+  --tide-green-text: var(--tide-color-green-800);
+  --tide-green-border: var(--tide-color-green-600);
+  --tide-green-on-solid: var(--tide-color-white);
+  --tide-amber-solid: var(--tide-color-amber-600);
+  --tide-amber-solid-hover: var(--tide-color-amber-700);
+  --tide-amber-solid-active: var(--tide-color-amber-800);
+  --tide-amber-subtle: var(--tide-color-amber-50);
+  --tide-amber-subtle-hover: var(--tide-color-amber-100);
+  --tide-amber-subtle-active: var(--tide-color-amber-200);
+  --tide-amber-text: var(--tide-color-amber-800);
+  --tide-amber-border: var(--tide-color-amber-600);
+  --tide-amber-on-solid: var(--tide-color-white);
+  --tide-red-solid: var(--tide-color-red-600);
+  --tide-red-solid-hover: var(--tide-color-red-700);
+  --tide-red-solid-active: var(--tide-color-red-800);
+  --tide-red-subtle: var(--tide-color-red-50);
+  --tide-red-subtle-hover: var(--tide-color-red-100);
+  --tide-red-subtle-active: var(--tide-color-red-200);
+  --tide-red-text: var(--tide-color-red-800);
+  --tide-red-border: var(--tide-color-red-600);
+  --tide-red-on-solid: var(--tide-color-white);
+  --tide-cyan-solid: var(--tide-color-cyan-600);
+  --tide-cyan-solid-hover: var(--tide-color-cyan-700);
+  --tide-cyan-solid-active: var(--tide-color-cyan-800);
+  --tide-cyan-subtle: var(--tide-color-cyan-50);
+  --tide-cyan-subtle-hover: var(--tide-color-cyan-100);
+  --tide-cyan-subtle-active: var(--tide-color-cyan-200);
+  --tide-cyan-text: var(--tide-color-cyan-800);
+  --tide-cyan-border: var(--tide-color-cyan-600);
+  --tide-cyan-on-solid: var(--tide-color-white);
+  --tide-bg-canvas: var(--tide-color-white);
+  --tide-bg-surface: var(--tide-color-white);
+  --tide-bg-raised: var(--tide-color-white);
+  --tide-bg-disabled: var(--tide-color-gray-100);
+  --tide-bg-overlay: #28292c80;
+  --tide-bg-neutral-solid: var(--tide-gray-solid);
+  --tide-bg-neutral-solid-hover: var(--tide-gray-solid-hover);
+  --tide-bg-neutral-solid-active: var(--tide-gray-solid-active);
+  --tide-bg-neutral-subtle: var(--tide-gray-subtle);
+  --tide-bg-neutral-subtle-hover: var(--tide-gray-subtle-hover);
+  --tide-bg-neutral-subtle-active: var(--tide-gray-subtle-active);
+  --tide-bg-primary-solid: var(--tide-blue-solid);
+  --tide-bg-primary-solid-hover: var(--tide-blue-solid-hover);
+  --tide-bg-primary-solid-active: var(--tide-blue-solid-active);
+  --tide-bg-primary-subtle: var(--tide-blue-subtle);
+  --tide-bg-primary-subtle-hover: var(--tide-blue-subtle-hover);
+  --tide-bg-primary-subtle-active: var(--tide-blue-subtle-active);
+  --tide-bg-success-solid: var(--tide-green-solid);
+  --tide-bg-success-solid-hover: var(--tide-green-solid-hover);
+  --tide-bg-success-solid-active: var(--tide-green-solid-active);
+  --tide-bg-success-subtle: var(--tide-green-subtle);
+  --tide-bg-success-subtle-hover: var(--tide-green-subtle-hover);
+  --tide-bg-success-subtle-active: var(--tide-green-subtle-active);
+  --tide-bg-warning-solid: var(--tide-amber-solid);
+  --tide-bg-warning-solid-hover: var(--tide-amber-solid-hover);
+  --tide-bg-warning-solid-active: var(--tide-amber-solid-active);
+  --tide-bg-warning-subtle: var(--tide-amber-subtle);
+  --tide-bg-warning-subtle-hover: var(--tide-amber-subtle-hover);
+  --tide-bg-warning-subtle-active: var(--tide-amber-subtle-active);
+  --tide-bg-danger-solid: var(--tide-red-solid);
+  --tide-bg-danger-solid-hover: var(--tide-red-solid-hover);
+  --tide-bg-danger-solid-active: var(--tide-red-solid-active);
+  --tide-bg-danger-subtle: var(--tide-red-subtle);
+  --tide-bg-danger-subtle-hover: var(--tide-red-subtle-hover);
+  --tide-bg-danger-subtle-active: var(--tide-red-subtle-active);
+  --tide-bg-info-solid: var(--tide-cyan-solid);
+  --tide-bg-info-solid-hover: var(--tide-cyan-solid-hover);
+  --tide-bg-info-solid-active: var(--tide-cyan-solid-active);
+  --tide-bg-info-subtle: var(--tide-cyan-subtle);
+  --tide-bg-info-subtle-hover: var(--tide-cyan-subtle-hover);
+  --tide-bg-info-subtle-active: var(--tide-cyan-subtle-active);
+  --tide-text-default: var(--tide-color-gray-900);
+  --tide-text-muted: var(--tide-color-gray-600);
+  --tide-text-disabled: var(--tide-color-gray-400);
+  --tide-text-on-solid: var(--tide-color-white);
+  --tide-text-primary: var(--tide-blue-text);
+  --tide-text-success: var(--tide-green-text);
+  --tide-text-warning: var(--tide-amber-text);
+  --tide-text-danger: var(--tide-red-text);
+  --tide-text-info: var(--tide-cyan-text);
+  --tide-border-default: var(--tide-color-gray-200);
+  --tide-border-strong: var(--tide-color-gray-500);
+  --tide-border-raised: transparent;
+  --tide-border-primary: var(--tide-blue-border);
+  --tide-border-success: var(--tide-green-border);
+  --tide-border-warning: var(--tide-amber-border);
+  --tide-border-danger: var(--tide-red-border);
+  --tide-border-info: var(--tide-cyan-border);
+  --tide-outline-focus: var(--tide-color-blue-600);
+  --tide-accent-solid: var(--tide-bg-primary-solid);
+  --tide-accent-solid-hover: var(--tide-bg-primary-solid-hover);
+  --tide-accent-solid-active: var(--tide-bg-primary-solid-active);
+  --tide-accent-subtle: var(--tide-bg-primary-subtle);
+  --tide-accent-subtle-hover: var(--tide-bg-primary-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-bg-primary-subtle-active);
+  --tide-accent-text: var(--tide-text-primary);
+  --tide-accent-border: var(--tide-border-primary);
+  --tide-accent-on-solid: var(--tide-text-on-solid);
+  --tide-shadow-color: #28292c14;
+  --tide-shadow-sm: 0 1px 1px color-mix(in srgb, var(--tide-shadow-color) 60%, transparent), 0 1px 2px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
+  --tide-shadow-md: 0 1px 3px color-mix(in srgb, var(--tide-shadow-color) 50%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
+  --tide-shadow-lg: 0 2px 6px -1px color-mix(in srgb, var(--tide-shadow-color) 50%, transparent), 0 12px 24px -6px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --tide-blue-solid: var(--tide-color-blue-600);
+  --tide-blue-solid-hover: var(--tide-color-blue-700);
+  --tide-blue-solid-active: var(--tide-color-blue-800);
+  --tide-blue-subtle: var(--tide-color-blue-950);
+  --tide-blue-subtle-hover: var(--tide-color-blue-900);
+  --tide-blue-subtle-active: var(--tide-color-blue-800);
+  --tide-blue-text: var(--tide-color-blue-200);
+  --tide-blue-border: var(--tide-color-blue-400);
+  --tide-blue-on-solid: var(--tide-color-white);
+  --tide-gray-solid: var(--tide-color-gray-600);
+  --tide-gray-solid-hover: var(--tide-color-gray-700);
+  --tide-gray-solid-active: var(--tide-color-gray-800);
+  --tide-gray-subtle: var(--tide-color-gray-950);
+  --tide-gray-subtle-hover: var(--tide-color-gray-900);
+  --tide-gray-subtle-active: var(--tide-color-gray-800);
+  --tide-gray-text: var(--tide-color-gray-200);
+  --tide-gray-border: var(--tide-color-gray-400);
+  --tide-gray-on-solid: var(--tide-color-white);
+  --tide-green-solid: var(--tide-color-green-600);
+  --tide-green-solid-hover: var(--tide-color-green-700);
+  --tide-green-solid-active: var(--tide-color-green-800);
+  --tide-green-subtle: var(--tide-color-green-950);
+  --tide-green-subtle-hover: var(--tide-color-green-900);
+  --tide-green-subtle-active: var(--tide-color-green-800);
+  --tide-green-text: var(--tide-color-green-200);
+  --tide-green-border: var(--tide-color-green-400);
+  --tide-green-on-solid: var(--tide-color-white);
+  --tide-amber-solid: var(--tide-color-amber-600);
+  --tide-amber-solid-hover: var(--tide-color-amber-700);
+  --tide-amber-solid-active: var(--tide-color-amber-800);
+  --tide-amber-subtle: var(--tide-color-amber-950);
+  --tide-amber-subtle-hover: var(--tide-color-amber-900);
+  --tide-amber-subtle-active: var(--tide-color-amber-800);
+  --tide-amber-text: var(--tide-color-amber-200);
+  --tide-amber-border: var(--tide-color-amber-400);
+  --tide-amber-on-solid: var(--tide-color-white);
+  --tide-red-solid: var(--tide-color-red-600);
+  --tide-red-solid-hover: var(--tide-color-red-700);
+  --tide-red-solid-active: var(--tide-color-red-800);
+  --tide-red-subtle: var(--tide-color-red-950);
+  --tide-red-subtle-hover: var(--tide-color-red-900);
+  --tide-red-subtle-active: var(--tide-color-red-800);
+  --tide-red-text: var(--tide-color-red-200);
+  --tide-red-border: var(--tide-color-red-400);
+  --tide-red-on-solid: var(--tide-color-white);
+  --tide-cyan-solid: var(--tide-color-cyan-600);
+  --tide-cyan-solid-hover: var(--tide-color-cyan-700);
+  --tide-cyan-solid-active: var(--tide-color-cyan-800);
+  --tide-cyan-subtle: var(--tide-color-cyan-950);
+  --tide-cyan-subtle-hover: var(--tide-color-cyan-900);
+  --tide-cyan-subtle-active: var(--tide-color-cyan-800);
+  --tide-cyan-text: var(--tide-color-cyan-200);
+  --tide-cyan-border: var(--tide-color-cyan-400);
+  --tide-cyan-on-solid: var(--tide-color-white);
+  --tide-bg-canvas: var(--tide-color-gray-950);
+  --tide-bg-surface: var(--tide-color-gray-950);
+  --tide-bg-raised: var(--tide-color-gray-900);
+  --tide-bg-disabled: var(--tide-color-gray-900);
+  --tide-bg-overlay: #28292cb3;
+  --tide-bg-neutral-solid: var(--tide-gray-solid);
+  --tide-bg-neutral-solid-hover: var(--tide-gray-solid-hover);
+  --tide-bg-neutral-solid-active: var(--tide-gray-solid-active);
+  --tide-bg-neutral-subtle: var(--tide-color-gray-900);
+  --tide-bg-neutral-subtle-hover: var(--tide-color-gray-800);
+  --tide-bg-neutral-subtle-active: var(--tide-color-gray-700);
+  --tide-bg-primary-solid: var(--tide-blue-solid);
+  --tide-bg-primary-solid-hover: var(--tide-blue-solid-hover);
+  --tide-bg-primary-solid-active: var(--tide-blue-solid-active);
+  --tide-bg-primary-subtle: var(--tide-blue-subtle);
+  --tide-bg-primary-subtle-hover: var(--tide-blue-subtle-hover);
+  --tide-bg-primary-subtle-active: var(--tide-blue-subtle-active);
+  --tide-bg-success-solid: var(--tide-green-solid);
+  --tide-bg-success-solid-hover: var(--tide-green-solid-hover);
+  --tide-bg-success-solid-active: var(--tide-green-solid-active);
+  --tide-bg-success-subtle: var(--tide-green-subtle);
+  --tide-bg-success-subtle-hover: var(--tide-green-subtle-hover);
+  --tide-bg-success-subtle-active: var(--tide-green-subtle-active);
+  --tide-bg-warning-solid: var(--tide-amber-solid);
+  --tide-bg-warning-solid-hover: var(--tide-amber-solid-hover);
+  --tide-bg-warning-solid-active: var(--tide-amber-solid-active);
+  --tide-bg-warning-subtle: var(--tide-amber-subtle);
+  --tide-bg-warning-subtle-hover: var(--tide-amber-subtle-hover);
+  --tide-bg-warning-subtle-active: var(--tide-amber-subtle-active);
+  --tide-bg-danger-solid: var(--tide-red-solid);
+  --tide-bg-danger-solid-hover: var(--tide-red-solid-hover);
+  --tide-bg-danger-solid-active: var(--tide-red-solid-active);
+  --tide-bg-danger-subtle: var(--tide-red-subtle);
+  --tide-bg-danger-subtle-hover: var(--tide-red-subtle-hover);
+  --tide-bg-danger-subtle-active: var(--tide-red-subtle-active);
+  --tide-bg-info-solid: var(--tide-cyan-solid);
+  --tide-bg-info-solid-hover: var(--tide-cyan-solid-hover);
+  --tide-bg-info-solid-active: var(--tide-cyan-solid-active);
+  --tide-bg-info-subtle: var(--tide-cyan-subtle);
+  --tide-bg-info-subtle-hover: var(--tide-cyan-subtle-hover);
+  --tide-bg-info-subtle-active: var(--tide-cyan-subtle-active);
+  --tide-text-default: var(--tide-color-gray-50);
+  --tide-text-muted: var(--tide-color-gray-300);
+  --tide-text-disabled: var(--tide-color-gray-600);
+  --tide-text-on-solid: var(--tide-color-white);
+  --tide-text-primary: var(--tide-blue-text);
+  --tide-text-success: var(--tide-green-text);
+  --tide-text-warning: var(--tide-amber-text);
+  --tide-text-danger: var(--tide-red-text);
+  --tide-text-info: var(--tide-cyan-text);
+  --tide-border-default: var(--tide-color-gray-800);
+  --tide-border-strong: var(--tide-color-gray-400);
+  --tide-border-raised: var(--tide-color-gray-800);
+  --tide-border-primary: var(--tide-blue-border);
+  --tide-border-success: var(--tide-green-border);
+  --tide-border-warning: var(--tide-amber-border);
+  --tide-border-danger: var(--tide-red-border);
+  --tide-border-info: var(--tide-cyan-border);
+  --tide-outline-focus: var(--tide-color-blue-400);
+  --tide-accent-solid: var(--tide-bg-primary-solid);
+  --tide-accent-solid-hover: var(--tide-bg-primary-solid-hover);
+  --tide-accent-solid-active: var(--tide-bg-primary-solid-active);
+  --tide-accent-subtle: var(--tide-bg-primary-subtle);
+  --tide-accent-subtle-hover: var(--tide-bg-primary-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-bg-primary-subtle-active);
+  --tide-accent-text: var(--tide-text-primary);
+  --tide-accent-border: var(--tide-border-primary);
+  --tide-accent-on-solid: var(--tide-text-on-solid);
+  --tide-shadow-color: #0000004d;
+  --tide-shadow-sm: 0 1px 1px color-mix(in srgb, var(--tide-shadow-color) 60%, transparent), 0 1px 2px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
+  --tide-shadow-md: 0 1px 3px color-mix(in srgb, var(--tide-shadow-color) 50%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
+  --tide-shadow-lg: 0 2px 6px -1px color-mix(in srgb, var(--tide-shadow-color) 50%, transparent), 0 12px 24px -6px color-mix(in srgb, var(--tide-shadow-color) 100%, transparent);
+}
+
+[data-color="neutral"] {
+  --tide-accent-solid: var(--tide-bg-neutral-solid);
+  --tide-accent-solid-hover: var(--tide-bg-neutral-solid-hover);
+  --tide-accent-solid-active: var(--tide-bg-neutral-solid-active);
+  --tide-accent-subtle: var(--tide-bg-neutral-subtle);
+  --tide-accent-subtle-hover: var(--tide-bg-neutral-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-bg-neutral-subtle-active);
+  --tide-accent-text: var(--tide-text-default);
+  --tide-accent-border: var(--tide-border-strong);
+  --tide-accent-on-solid: var(--tide-text-on-solid);
+}
+
+[data-color="primary"] {
+  --tide-accent-solid: var(--tide-bg-primary-solid);
+  --tide-accent-solid-hover: var(--tide-bg-primary-solid-hover);
+  --tide-accent-solid-active: var(--tide-bg-primary-solid-active);
+  --tide-accent-subtle: var(--tide-bg-primary-subtle);
+  --tide-accent-subtle-hover: var(--tide-bg-primary-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-bg-primary-subtle-active);
+  --tide-accent-text: var(--tide-text-primary);
+  --tide-accent-border: var(--tide-border-primary);
+  --tide-accent-on-solid: var(--tide-text-on-solid);
+}
+
+[data-color="success"] {
+  --tide-accent-solid: var(--tide-bg-success-solid);
+  --tide-accent-solid-hover: var(--tide-bg-success-solid-hover);
+  --tide-accent-solid-active: var(--tide-bg-success-solid-active);
+  --tide-accent-subtle: var(--tide-bg-success-subtle);
+  --tide-accent-subtle-hover: var(--tide-bg-success-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-bg-success-subtle-active);
+  --tide-accent-text: var(--tide-text-success);
+  --tide-accent-border: var(--tide-border-success);
+  --tide-accent-on-solid: var(--tide-text-on-solid);
+}
+
+[data-color="warning"] {
+  --tide-accent-solid: var(--tide-bg-warning-solid);
+  --tide-accent-solid-hover: var(--tide-bg-warning-solid-hover);
+  --tide-accent-solid-active: var(--tide-bg-warning-solid-active);
+  --tide-accent-subtle: var(--tide-bg-warning-subtle);
+  --tide-accent-subtle-hover: var(--tide-bg-warning-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-bg-warning-subtle-active);
+  --tide-accent-text: var(--tide-text-warning);
+  --tide-accent-border: var(--tide-border-warning);
+  --tide-accent-on-solid: var(--tide-text-on-solid);
+}
+
+[data-color="danger"] {
+  --tide-accent-solid: var(--tide-bg-danger-solid);
+  --tide-accent-solid-hover: var(--tide-bg-danger-solid-hover);
+  --tide-accent-solid-active: var(--tide-bg-danger-solid-active);
+  --tide-accent-subtle: var(--tide-bg-danger-subtle);
+  --tide-accent-subtle-hover: var(--tide-bg-danger-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-bg-danger-subtle-active);
+  --tide-accent-text: var(--tide-text-danger);
+  --tide-accent-border: var(--tide-border-danger);
+  --tide-accent-on-solid: var(--tide-text-on-solid);
+}
+
+[data-color="info"] {
+  --tide-accent-solid: var(--tide-bg-info-solid);
+  --tide-accent-solid-hover: var(--tide-bg-info-solid-hover);
+  --tide-accent-solid-active: var(--tide-bg-info-solid-active);
+  --tide-accent-subtle: var(--tide-bg-info-subtle);
+  --tide-accent-subtle-hover: var(--tide-bg-info-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-bg-info-subtle-active);
+  --tide-accent-text: var(--tide-text-info);
+  --tide-accent-border: var(--tide-border-info);
+  --tide-accent-on-solid: var(--tide-text-on-solid);
+}
+
+[data-color="blue"] {
+  --tide-accent-solid: var(--tide-blue-solid);
+  --tide-accent-solid-hover: var(--tide-blue-solid-hover);
+  --tide-accent-solid-active: var(--tide-blue-solid-active);
+  --tide-accent-subtle: var(--tide-blue-subtle);
+  --tide-accent-subtle-hover: var(--tide-blue-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-blue-subtle-active);
+  --tide-accent-text: var(--tide-blue-text);
+  --tide-accent-border: var(--tide-blue-border);
+  --tide-accent-on-solid: var(--tide-blue-on-solid);
+}
+
+[data-color="gray"] {
+  --tide-accent-solid: var(--tide-gray-solid);
+  --tide-accent-solid-hover: var(--tide-gray-solid-hover);
+  --tide-accent-solid-active: var(--tide-gray-solid-active);
+  --tide-accent-subtle: var(--tide-gray-subtle);
+  --tide-accent-subtle-hover: var(--tide-gray-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-gray-subtle-active);
+  --tide-accent-text: var(--tide-gray-text);
+  --tide-accent-border: var(--tide-gray-border);
+  --tide-accent-on-solid: var(--tide-gray-on-solid);
+}
+
+[data-color="green"] {
+  --tide-accent-solid: var(--tide-green-solid);
+  --tide-accent-solid-hover: var(--tide-green-solid-hover);
+  --tide-accent-solid-active: var(--tide-green-solid-active);
+  --tide-accent-subtle: var(--tide-green-subtle);
+  --tide-accent-subtle-hover: var(--tide-green-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-green-subtle-active);
+  --tide-accent-text: var(--tide-green-text);
+  --tide-accent-border: var(--tide-green-border);
+  --tide-accent-on-solid: var(--tide-green-on-solid);
+}
+
+[data-color="amber"] {
+  --tide-accent-solid: var(--tide-amber-solid);
+  --tide-accent-solid-hover: var(--tide-amber-solid-hover);
+  --tide-accent-solid-active: var(--tide-amber-solid-active);
+  --tide-accent-subtle: var(--tide-amber-subtle);
+  --tide-accent-subtle-hover: var(--tide-amber-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-amber-subtle-active);
+  --tide-accent-text: var(--tide-amber-text);
+  --tide-accent-border: var(--tide-amber-border);
+  --tide-accent-on-solid: var(--tide-amber-on-solid);
+}
+
+[data-color="red"] {
+  --tide-accent-solid: var(--tide-red-solid);
+  --tide-accent-solid-hover: var(--tide-red-solid-hover);
+  --tide-accent-solid-active: var(--tide-red-solid-active);
+  --tide-accent-subtle: var(--tide-red-subtle);
+  --tide-accent-subtle-hover: var(--tide-red-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-red-subtle-active);
+  --tide-accent-text: var(--tide-red-text);
+  --tide-accent-border: var(--tide-red-border);
+  --tide-accent-on-solid: var(--tide-red-on-solid);
+}
+
+[data-color="cyan"] {
+  --tide-accent-solid: var(--tide-cyan-solid);
+  --tide-accent-solid-hover: var(--tide-cyan-solid-hover);
+  --tide-accent-solid-active: var(--tide-cyan-solid-active);
+  --tide-accent-subtle: var(--tide-cyan-subtle);
+  --tide-accent-subtle-hover: var(--tide-cyan-subtle-hover);
+  --tide-accent-subtle-active: var(--tide-cyan-subtle-active);
+  --tide-accent-text: var(--tide-cyan-text);
+  --tide-accent-border: var(--tide-cyan-border);
+  --tide-accent-on-solid: var(--tide-cyan-on-solid);
+}

package/dist/typography.d.ts

@@ -0,0 +1,132 @@
+/**
+ * font-family 스택. 공개 계약은 `--tide-font-<이름>`이고 `font-<이름>` class와 기본 글꼴이 쓴다.
+ * - sans: Pretendard README의 「어디서든 동일한 환경」 스택. 가변판 이름(`Pretendard Variable`)을 맨 앞에 둔다.
+ * - mono: 시스템 고정폭 글꼴만 쓴다(tailwindcss 4.3.5 기본 `--font-mono`와 같은 순서).
+ */
+export declare const fontFamily: {
+  readonly sans: readonly ["Pretendard Variable", "Pretendard", "-apple-system", "BlinkMacSystemFont", "system-ui", "Roboto", "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "sans-serif"];
+  readonly mono: readonly ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"];
+};
+/** font-family Token 이름 */
+export type FontFamilyName = keyof typeof fontFamily;
+/**
+ * Primitive 크기. 키는 px, 값은 rem이다. class로 노출하지 않고 공개 계약 `--tide-font-size-<px>`만 둔다.
+ * 텍스트 스타일이 이 값을 참조한다.
+ */
+export declare const fontSize: {
+  readonly 12: "0.75rem";
+  readonly 14: "0.875rem";
+  readonly 16: "1rem";
+  readonly 18: "1.125rem";
+  readonly 20: "1.25rem";
+  readonly 24: "1.5rem";
+  readonly 32: "2rem";
+  readonly 40: "2.5rem";
+  readonly 48: "3rem";
+  readonly 56: "3.5rem";
+};
+/** Primitive 크기 단계(px) */
+export type FontSizeStep = keyof typeof fontSize;
+/** 굵기 Token. Tailwind 기본 굵기는 지우고 이 다섯 개만 `font-<이름>` class로 둔다. */
+export declare const fontWeight: {
+  readonly light: 300;
+  readonly normal: 400;
+  readonly medium: 500;
+  readonly semibold: 600;
+  readonly bold: 700;
+};
+/** 굵기 Token 이름 */
+export type FontWeightName = keyof typeof fontWeight;
+/** 텍스트 스타일 하나의 값 */
+export interface TextStyleValue {
+  /** Primitive 크기 단계(px) */
+  readonly fontSize: FontSizeStep;
+  /** 행간(rem). 4px 격자를 따른다. */
+  readonly lineHeight: string;
+  /** 굵기 Token 이름. 텍스트 스타일은 light를 쓰지 않는다. */
+  readonly fontWeight: Exclude<FontWeightName, "light">;
+}
+/**
+ * 텍스트 스타일 14개. `text-<이름>` class 하나가 크기, 행간, 굵기를 함께 정한다.
+ * 공개 계약은 `--tide-text-<이름>`과 그 `--line-height`, `--font-weight` 하위 변수다.
+ * 값은 spec 표를 그대로 옮겼다(크기/행간 px → rem).
+ */
+export declare const textStyle: {
+  readonly "display-lg": {
+    readonly fontSize: 56;
+    readonly lineHeight: "4rem";
+    readonly fontWeight: "bold";
+  };
+  readonly "display-md": {
+    readonly fontSize: 48;
+    readonly lineHeight: "3.5rem";
+    readonly fontWeight: "bold";
+  };
+  readonly "heading-xl": {
+    readonly fontSize: 40;
+    readonly lineHeight: "3rem";
+    readonly fontWeight: "bold";
+  };
+  readonly "heading-lg": {
+    readonly fontSize: 32;
+    readonly lineHeight: "2.5rem";
+    readonly fontWeight: "bold";
+  };
+  readonly "heading-md": {
+    readonly fontSize: 24;
+    readonly lineHeight: "2rem";
+    readonly fontWeight: "bold";
+  };
+  readonly "heading-sm": {
+    readonly fontSize: 20;
+    readonly lineHeight: "1.75rem";
+    readonly fontWeight: "semibold";
+  };
+  readonly "heading-xs": {
+    readonly fontSize: 18;
+    readonly lineHeight: "1.75rem";
+    readonly fontWeight: "semibold";
+  };
+  readonly "body-lg": {
+    readonly fontSize: 18;
+    readonly lineHeight: "1.75rem";
+    readonly fontWeight: "normal";
+  };
+  readonly "body-md": {
+    readonly fontSize: 16;
+    readonly lineHeight: "1.5rem";
+    readonly fontWeight: "normal";
+  };
+  readonly "body-sm": {
+    readonly fontSize: 14;
+    readonly lineHeight: "1.25rem";
+    readonly fontWeight: "normal";
+  };
+  readonly "label-lg": {
+    readonly fontSize: 16;
+    readonly lineHeight: "1.25rem";
+    readonly fontWeight: "medium";
+  };
+  readonly "label-md": {
+    readonly fontSize: 14;
+    readonly lineHeight: "1.25rem";
+    readonly fontWeight: "medium";
+  };
+  readonly "label-sm": {
+    readonly fontSize: 12;
+    readonly lineHeight: "1rem";
+    readonly fontWeight: "medium";
+  };
+  readonly caption: {
+    readonly fontSize: 12;
+    readonly lineHeight: "1rem";
+    readonly fontWeight: "normal";
+  };
+};
+/** 텍스트 스타일 이름. Typography의 `variant` 값이다. */
+export type TextStyleName = keyof typeof textStyle;
+/**
+ * font-family 스택을 CSS 값으로 만든다. 영문과 하이픈만으로 된 이름은 그대로 두고, 나머지(공백이 있는 이름)는 따옴표로 감싼다.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare function fontFamilyCss(name: FontFamilyName): string;