@polastack/design-system 0.1.18 → 0.1.20

package/src/styles/tokens.css

@@ -0,0 +1,235 @@
+/* ============================================================
+   Polastack Design System - Design Tokens
+   Tailwind CSS v4 @theme directive
+
+   トークン定義のみ。Tailwind の初期化（@import 'tailwindcss'）は含まない。
+   消費側が自前の Tailwind 設定を持つ場合はこのファイルだけを @import する。
+   ============================================================ */
+
+@theme {
+  /* --------------------------------------------------------
+     Colors: Brand (Primary)
+     Teal系 - #1BA491をベースにしたPolastackブランドカラー
+     -------------------------------------------------------- */
+  --color-primary-50: #f0fdfb;
+  --color-primary-100: #cdfbf0;
+  --color-primary-200: #9bf7e2;
+  --color-primary-300: #61ebd0;
+  --color-primary-400: #2fd4ba;
+  --color-primary-500: #1BA491;
+  --color-primary-600: #138575;
+  --color-primary-700: #146b5f;
+  --color-primary-800: #15564e;
+  --color-primary-900: #134841;
+  --color-primary-950: #042c28;
+
+  /* --------------------------------------------------------
+     Colors: Neutral (Zinc系)
+     高密度UIでの微妙なコントラスト差を表現する広いグレースケール
+     -------------------------------------------------------- */
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f4f4f5;
+  --color-neutral-200: #e4e4e7;
+  --color-neutral-300: #d4d4d8;
+  --color-neutral-400: #a1a1aa;
+  --color-neutral-500: #71717a;
+  --color-neutral-600: #52525b;
+  --color-neutral-700: #3f3f46;
+  --color-neutral-800: #27272a;
+  --color-neutral-900: #18181b;
+  --color-neutral-950: #09090b;
+
+  /* --------------------------------------------------------
+     Colors: Semantic - Success (Green)
+     Primaryのティールと区別しやすい純粋なグリーン系
+     -------------------------------------------------------- */
+  --color-success-50: #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-200: #bbf7d0;
+  --color-success-300: #86efac;
+  --color-success-400: #4ade80;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-success-700: #15803d;
+  --color-success-800: #166534;
+  --color-success-900: #14532d;
+  --color-success-950: #052e16;
+
+  /* --------------------------------------------------------
+     Colors: Semantic - Warning (Amber)
+     -------------------------------------------------------- */
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde68a;
+  --color-warning-300: #fcd34d;
+  --color-warning-400: #fbbf24;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+  --color-warning-800: #92400e;
+  --color-warning-900: #78350f;
+  --color-warning-950: #451a03;
+
+  /* --------------------------------------------------------
+     Colors: Semantic - Error (Red)
+     -------------------------------------------------------- */
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-200: #fecaca;
+  --color-error-300: #fca5a5;
+  --color-error-400: #f87171;
+  --color-error-500: #ef4444;
+  --color-error-600: #dc2626;
+  --color-error-700: #b91c1c;
+  --color-error-800: #991b1b;
+  --color-error-900: #7f1d1d;
+  --color-error-950: #450a0a;
+
+  /* --------------------------------------------------------
+     Colors: Semantic - Info (Blue)
+     -------------------------------------------------------- */
+  --color-info-50: #eff6ff;
+  --color-info-100: #dbeafe;
+  --color-info-200: #bfdbfe;
+  --color-info-300: #93c5fd;
+  --color-info-400: #60a5fa;
+  --color-info-500: #3b82f6;
+  --color-info-600: #2563eb;
+  --color-info-700: #1d4ed8;
+  --color-info-800: #1e40af;
+  --color-info-900: #1e3a8a;
+  --color-info-950: #172554;
+
+  /* --------------------------------------------------------
+     Typography: Font Families
+     Inter(欧文) + Noto Sans JP(和文) で混在表示を最適化
+     -------------------------------------------------------- */
+  --font-sans: 'Inter', 'Noto Sans JP', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
+
+  /* --------------------------------------------------------
+     Typography: Font Sizes
+     base=14px - BtoB業務アプリの高密度表示に最適化
+     -------------------------------------------------------- */
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.8125rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base: 0.875rem;
+  --text-base--line-height: 1.25rem;
+  --text-lg: 1rem;
+  --text-lg--line-height: 1.5rem;
+  --text-xl: 1.125rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.25rem;
+  --text-2xl--line-height: 1.75rem;
+  --text-3xl: 1.5rem;
+  --text-3xl--line-height: 2rem;
+
+  /* --------------------------------------------------------
+     Spacing: 4px Grid
+     -------------------------------------------------------- */
+  --spacing-0: 0px;
+  --spacing-px: 1px;
+  --spacing-0_5: 0.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-1_5: 0.375rem;
+  --spacing-2: 0.5rem;
+  --spacing-2_5: 0.625rem;
+  --spacing-3: 0.75rem;
+  --spacing-3_5: 0.875rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
+  --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-11: 2.75rem;
+  --spacing-12: 3rem;
+  --spacing-14: 3.5rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+
+  /* --------------------------------------------------------
+     Elevation: Shadows
+     -------------------------------------------------------- */
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-drawer: 0 0 48px rgb(0 0 0 / 0.16);
+
+  /* --------------------------------------------------------
+     Elevation: Border Radius
+     -------------------------------------------------------- */
+  --radius-none: 0px;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+
+  /* --------------------------------------------------------
+     Animation: Duration
+     -------------------------------------------------------- */
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+
+  /* --------------------------------------------------------
+     Animation: Easing
+     -------------------------------------------------------- */
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* --------------------------------------------------------
+     Z-Index Scale
+     Drawer重ね表示パターン対応
+     -------------------------------------------------------- */
+  --z-dropdown: 50;
+  --z-sticky: 100;
+  --z-drawer: 200;
+  --z-modal: 300;
+  --z-popover: 400;
+  --z-toast: 500;
+  --z-tooltip: 600;
+
+  /* --------------------------------------------------------
+     PWA: Safe Area Insets
+     ノッチ端末・ホームバー端末のSafe Area対応
+     -------------------------------------------------------- */
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
+
+  /* --------------------------------------------------------
+     PWA: Touch Target
+     WCAG 2.5.5 準拠の最小タッチターゲットサイズ
+     -------------------------------------------------------- */
+  --touch-target-min: 44px;
+  --touch-target-comfortable: 48px;
+
+  /* --------------------------------------------------------
+     PWA: Bottom Navigation
+     -------------------------------------------------------- */
+  --bottom-nav-height: 56px;
+
+  /* --------------------------------------------------------
+     Animation: Keyframes
+     -------------------------------------------------------- */
+  --animate-fade-in: fade-in var(--duration-normal) var(--ease-out);
+  --animate-fade-out: fade-out var(--duration-normal) var(--ease-in);
+  --animate-slide-in-right: slide-in-right var(--duration-slow) var(--ease-out);
+  --animate-slide-out-right: slide-out-right var(--duration-slow) var(--ease-in);
+  --animate-slide-in-left: slide-in-left var(--duration-slow) var(--ease-out);
+  --animate-slide-out-left: slide-out-left var(--duration-slow) var(--ease-in);
+  --animate-spinner: spinner-fade 0.8s ease-in-out infinite;
+}