@polastack/design-system 0.1.0

package/src/styles/globals.css

@@ -0,0 +1,395 @@
+@import 'tailwindcss';
+
+/* ============================================================
+   Dark Mode Variant
+   .dark クラスベースのダークモード切替
+   ============================================================ */
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ============================================================
+   Polastack Design System - Design Tokens
+   Tailwind CSS v4 @theme directive
+   ============================================================ */
+
+@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);
+}
+
+/* ============================================================
+   Semantic Color Tokens
+   ライト/ダークモードで自動切替されるセマンティック変数
+   ============================================================ */
+
+:root {
+  --color-surface: #ffffff;
+  --color-surface-raised: #ffffff;
+  --color-surface-sunken: var(--color-neutral-50);
+  --color-surface-muted: var(--color-neutral-100);
+  --color-on-surface: var(--color-neutral-900);
+  --color-on-surface-secondary: var(--color-neutral-600);
+  --color-on-surface-muted: var(--color-neutral-500);
+  --color-border: var(--color-neutral-200);
+  --color-border-input: var(--color-neutral-300);
+  --color-ring: var(--color-primary-500);
+  --color-ring-offset: #ffffff;
+  --color-surface-overlay: rgb(0 0 0 / 0.5);
+  --color-tooltip-bg: var(--color-neutral-900);
+  --color-tooltip-text: #ffffff;
+  --color-skeleton: var(--color-neutral-200);
+}
+
+.dark {
+  --color-surface: var(--color-neutral-950);
+  --color-surface-raised: var(--color-neutral-900);
+  --color-surface-sunken: var(--color-neutral-950);
+  --color-surface-muted: var(--color-neutral-800);
+  --color-on-surface: var(--color-neutral-50);
+  --color-on-surface-secondary: var(--color-neutral-400);
+  --color-on-surface-muted: var(--color-neutral-400);
+  --color-border: var(--color-neutral-800);
+  --color-border-input: var(--color-neutral-700);
+  --color-ring: var(--color-primary-400);
+  --color-ring-offset: var(--color-neutral-950);
+  --color-surface-overlay: rgb(0 0 0 / 0.6);
+  --color-tooltip-bg: var(--color-neutral-100);
+  --color-tooltip-text: var(--color-neutral-900);
+  --color-skeleton: var(--color-neutral-800);
+  color-scheme: dark;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes slide-in-right {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slide-out-right {
+  from { transform: translateX(0); }
+  to { transform: translateX(100%); }
+}
+
+@keyframes slide-in-left {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slide-out-left {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+
+/* ============================================================
+   Base Styles
+   ============================================================ */
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    border-color: var(--color-border);
+  }
+
+  body {
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+    color: var(--color-on-surface);
+    background-color: var(--color-surface);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+/* ============================================================
+   PWA: Standalone Mode
+   ============================================================ */
+
+@media (display-mode: standalone) {
+  body {
+    /* PWAスタンドアロンモードではoverscrollを無効化 */
+    overscroll-behavior-y: contain;
+    /* ユーザー選択を制限（ネイティブアプリ的な挙動） */
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* テキスト入力要素ではユーザー選択を許可 */
+  input,
+  textarea,
+  [contenteditable='true'] {
+    -webkit-user-select: text;
+    user-select: text;
+  }
+}
+
+/* ============================================================
+   PWA: Viewport Height
+   モバイルブラウザのアドレスバーを考慮した実高さ
+   ============================================================ */
+
+@supports (height: 100dvh) {
+  :root {
+    --vh-full: 100dvh;
+  }
+}
+
+@supports not (height: 100dvh) {
+  :root {
+    --vh-full: 100vh;
+  }
+}
+
+/* ============================================================
+   PWA: Touch Device Variant
+   タッチデバイスでのタッチターゲット最適化
+   ============================================================ */
+
+@custom-variant touch (@media (pointer: coarse));
+
+/* ============================================================
+   Accessibility: Reduced Motion
+   ============================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}