@askrjs/themes 0.0.1

package/templates/theme/tokens.css

@@ -0,0 +1,316 @@
+:root {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  --ak-font-family-body:
+    "Aptos", "Segoe UI Variable Text", "Segoe UI", "SF Pro Text", Inter, ui-sans-serif, system-ui,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --ak-font-family-mono:
+    "IBM Plex Mono", "SFMono-Regular", "Menlo", "Consolas", ui-monospace, monospace,
+    "Apple Color Emoji", "Segoe UI Emoji";
+  --ak-font-family-emphasis: var(--ak-font-family-body);
+  --ak-font-family-quote: "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
+  --ak-font-family: var(--ak-font-family-body);
+
+  --ak-font-size-xs: 0.75rem;
+  --ak-font-size-sm: 0.875rem;
+  --ak-font-size-md: 1rem;
+  --ak-font-size-lg: 1.125rem;
+  --ak-font-size-xl: 1.25rem;
+  --ak-font-size-2xl: 1.5rem;
+  --ak-font-size-3xl: 1.75rem;
+  --ak-font-size-heading: clamp(1.2rem, 1.05rem + 0.72vw, 1.75rem);
+  --ak-font-size-display: clamp(2.2rem, 1.55rem + 2.35vw, 3.55rem);
+
+  --ak-font-weight-light: 300;
+  --ak-font-weight-regular: 400;
+  --ak-font-weight-medium: 500;
+  --ak-font-weight-semibold: 600;
+  --ak-font-weight-bold: 700;
+
+  --ak-line-height-tight: 1.15;
+  --ak-line-height-normal: 1.55;
+  --ak-line-height-relaxed: 1.7;
+
+  --ak-type-1-size: 0.75rem;
+  --ak-type-1-line-height: 1rem;
+  --ak-type-1-letter-spacing: 0.0025em;
+  --ak-type-2-size: 0.875rem;
+  --ak-type-2-line-height: 1.25rem;
+  --ak-type-2-letter-spacing: 0em;
+  --ak-type-3-size: 1rem;
+  --ak-type-3-line-height: 1.5rem;
+  --ak-type-3-letter-spacing: 0em;
+  --ak-type-4-size: 1.125rem;
+  --ak-type-4-line-height: 1.625rem;
+  --ak-type-4-letter-spacing: -0.0025em;
+  --ak-type-5-size: 1.25rem;
+  --ak-type-5-line-height: 1.75rem;
+  --ak-type-5-letter-spacing: -0.005em;
+  --ak-type-6-size: 1.625rem;
+  --ak-type-6-line-height: 2rem;
+  --ak-type-6-letter-spacing: -0.02em;
+  --ak-type-7-size: 2rem;
+  --ak-type-7-line-height: 2.35rem;
+  --ak-type-7-letter-spacing: -0.03em;
+  --ak-type-8-size: 2.75rem;
+  --ak-type-8-line-height: 2.95rem;
+  --ak-type-8-letter-spacing: -0.04em;
+  --ak-type-9-size: 4.75rem;
+  --ak-type-9-line-height: 4.65rem;
+  --ak-type-9-letter-spacing: -0.055em;
+
+  --ak-space-xs: 0.25rem;
+  --ak-space-sm: 0.5rem;
+  --ak-space-md: 0.875rem;
+  --ak-space-lg: 1.125rem;
+  --ak-space-xl: 1.5rem;
+  --ak-space-2xl: 2.25rem;
+  --ak-space-3xl: 3.5rem;
+  --ak-space-1: 0.25rem;
+  --ak-space-2: 0.5rem;
+  --ak-space-3: 0.75rem;
+  --ak-space-4: 1rem;
+  --ak-space-5: 1.5rem;
+  --ak-space-6: 2rem;
+  --ak-space-7: 2.5rem;
+  --ak-space-8: 3rem;
+  --ak-space-9: 4rem;
+
+  --ak-radius-sm: 6px;
+  --ak-radius-md: 8px;
+  --ak-radius-lg: 12px;
+  --ak-radius-xl: 18px;
+  --ak-radius-round: 9999px;
+
+  --ak-border-width-sm: 1px;
+  --ak-border-width-md: 2px;
+  --ak-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.03);
+  --ak-shadow-md: 0 10px 30px -18px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
+  --ak-shadow-lg: 0 24px 64px -32px rgba(15, 23, 42, 0.24), 0 8px 24px rgba(15, 23, 42, 0.08);
+  --ak-focus-ring-width: 3px;
+  --ak-focus-ring-offset: 2px;
+  --ak-duration-fast: 160ms;
+  --ak-duration-normal: 220ms;
+  --ak-duration-slow: 320ms;
+  --ak-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
+
+  --ak-icon-size-sm: 1rem;
+  --ak-icon-size-md: 1.25rem;
+  --ak-icon-size-lg: 1.5rem;
+  --ak-icon-size-xl: 1.75rem;
+  --ak-icon-stroke-width-sm: 1.75;
+  --ak-icon-stroke-width-md: 2;
+  --ak-icon-stroke-width-lg: 2;
+  --ak-icon-stroke-width-xl: 2.25;
+
+  --ak-breakpoint-sm: 40rem;
+  --ak-breakpoint-md: 48rem;
+  --ak-breakpoint-lg: 64rem;
+  --ak-breakpoint-xl: 80rem;
+  --ak-layout-navbar-height: 60px;
+  --ak-layout-sidebar-width-sm: 15rem;
+  --ak-layout-sidebar-width-md: 17rem;
+  --ak-layout-sidebar-width-lg: 20rem;
+  --ak-layout-sidebar-width-xl: 23rem;
+  --ak-layout-sidebar-width: 17rem;
+  --ak-layout-content-max-width: 80rem;
+  --ak-layout-page-gutter: clamp(1rem, 0.7rem + 1.25vw, 1.75rem);
+  --ak-layout-panel-padding: clamp(1rem, 0.88rem + 0.55vw, 1.35rem);
+  --ak-container-inline-size: 100%;
+  --ak-density-control-height-sm: 2rem;
+  --ak-density-control-height-md: 2.5rem;
+  --ak-density-control-height-lg: 2.9rem;
+  --ak-density-control-padding-x-sm: 0.8rem;
+  --ak-density-control-padding-x-md: 1rem;
+  --ak-density-control-padding-x-lg: 1.15rem;
+  --ak-container-1: 30rem;
+  --ak-container-2: 42rem;
+  --ak-container-3: 58rem;
+  --ak-container-4: 72rem;
+  --ak-section-1: var(--ak-space-4);
+  --ak-section-2: var(--ak-space-5);
+  --ak-section-3: var(--ak-space-6);
+  --ak-section-4: var(--ak-space-7);
+
+  --ak-z-dropdown: 1000;
+  --ak-z-sticky: 1100;
+  --ak-z-fixed: 1200;
+  --ak-z-modal-backdrop: 1300;
+  --ak-z-modal: 1400;
+  --ak-z-popover: 1500;
+  --ak-z-toast: 1550;
+  --ak-z-tooltip: 1600;
+}
+
+:root,
+[data-theme="light"] {
+  --ak-color-primary: #2563eb;
+  --ak-color-primary-hover: #1d4ed8;
+  --ak-color-primary-active: #1e40af;
+  --ak-color-primary-soft: #dbeafe;
+  --ak-color-primary-ink: #163b8a;
+
+  --ak-color-text: #1b2434;
+  --ak-color-text-muted: #5d6b85;
+  --ak-color-text-subtle: #8b96ab;
+  --ak-color-text-inverse: #ffffff;
+
+  --ak-color-bg: #f6f7fb;
+  --ak-color-surface: #ffffff;
+  --ak-color-surface-muted: #f1f4fa;
+  --ak-color-surface-raised: #ffffff;
+  --ak-color-surface-overlay: rgba(255, 255, 255, 0.86);
+
+  --ak-color-border-subtle: #e6ebf5;
+  --ak-color-border: #d7deec;
+  --ak-color-border-strong: #b7c2d8;
+
+  --ak-color-success: #16a34a;
+  --ak-color-success-soft: rgba(22, 163, 74, 0.14);
+  --ak-color-success-ink: #166534;
+  --ak-color-warning: #f59e0b;
+  --ak-color-warning-soft: rgba(245, 158, 11, 0.16);
+  --ak-color-warning-ink: #854d0e;
+  --ak-color-danger: #ef4444;
+  --ak-color-danger-soft: rgba(239, 68, 68, 0.15);
+  --ak-color-danger-ink: #991b1b;
+  --ak-color-info: #0ea5e9;
+  --ak-color-info-soft: rgba(14, 165, 233, 0.16);
+  --ak-color-info-ink: #0c4a6e;
+
+  --ak-color-link: var(--ak-color-primary);
+  --ak-color-link-hover: var(--ak-color-primary-hover);
+  --ak-color-focus-ring: rgba(37, 99, 235, 0.18);
+  --ak-color-disabled-bg: #ecf0f7;
+  --ak-color-disabled-surface: #f7f9fc;
+  --ak-color-disabled-border: #d9e0ec;
+  --ak-color-disabled-text: #9aa6bc;
+  --ak-color-selected: #e4edff;
+  --ak-color-selected-border: #93c5fd;
+  --ak-color-hover: rgba(37, 99, 235, 0.06);
+  --ak-color-active: rgba(37, 99, 235, 0.11);
+  --ak-color-backdrop: rgba(10, 17, 33, 0.42);
+
+  --ak-color-fg: var(--ak-color-text);
+  --ak-color-muted: var(--ak-color-text-muted);
+
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  --ak-color-primary: #60a5fa;
+  --ak-color-primary-hover: #7ab8ff;
+  --ak-color-primary-active: #4d92ef;
+  --ak-color-primary-soft: rgba(96, 165, 250, 0.2);
+  --ak-color-primary-ink: #dcedff;
+
+  --ak-color-text: #edf3ff;
+  --ak-color-text-muted: #a9b7cc;
+  --ak-color-text-subtle: #8090a8;
+  --ak-color-text-inverse: #0e1320;
+
+  --ak-color-bg: #0f1420;
+  --ak-color-surface: #171d2b;
+  --ak-color-surface-muted: #20283a;
+  --ak-color-surface-raised: #263249;
+  --ak-color-surface-overlay: rgba(23, 29, 43, 0.88);
+
+  --ak-color-border-subtle: #2a3449;
+  --ak-color-border: #38445c;
+  --ak-color-border-strong: #59698a;
+
+  --ak-color-success: #4ade80;
+  --ak-color-success-soft: rgba(74, 222, 128, 0.18);
+  --ak-color-success-ink: #dcfce7;
+  --ak-color-warning: #fbbf24;
+  --ak-color-warning-soft: rgba(251, 191, 36, 0.18);
+  --ak-color-warning-ink: #fef3c7;
+  --ak-color-danger: #fb7185;
+  --ak-color-danger-soft: rgba(251, 113, 133, 0.18);
+  --ak-color-danger-ink: #ffe4e6;
+  --ak-color-info: #38bdf8;
+  --ak-color-info-soft: rgba(56, 189, 248, 0.18);
+  --ak-color-info-ink: #e0f2fe;
+
+  --ak-color-link: var(--ak-color-primary);
+  --ak-color-link-hover: var(--ak-color-primary-hover);
+  --ak-color-focus-ring: rgba(96, 165, 250, 0.22);
+  --ak-color-disabled-bg: #1e2737;
+  --ak-color-disabled-surface: #171d2b;
+  --ak-color-disabled-border: #2f3b50;
+  --ak-color-disabled-text: #74849d;
+  --ak-color-selected: rgba(110, 168, 254, 0.15);
+  --ak-color-selected-border: #60a5fa;
+  --ak-color-hover: rgba(237, 243, 255, 0.06);
+  --ak-color-active: rgba(237, 243, 255, 0.12);
+  --ak-color-backdrop: rgba(2, 6, 12, 0.66);
+
+  --ak-color-fg: var(--ak-color-text);
+  --ak-color-muted: var(--ak-color-text-muted);
+
+  color-scheme: dark;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ak-duration-fast: 0s;
+    --ak-duration-normal: 0s;
+    --ak-duration-slow: 0s;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --ak-color-primary: #60a5fa;
+    --ak-color-primary-hover: #7ab8ff;
+    --ak-color-primary-active: #4d92ef;
+    --ak-color-primary-soft: rgba(96, 165, 250, 0.2);
+    --ak-color-primary-ink: #dcedff;
+
+    --ak-color-text: #edf3ff;
+    --ak-color-text-muted: #a9b7cc;
+    --ak-color-text-subtle: #8090a8;
+    --ak-color-text-inverse: #0e1320;
+
+    --ak-color-bg: #0f1420;
+    --ak-color-surface: #171d2b;
+    --ak-color-surface-muted: #20283a;
+    --ak-color-surface-raised: #263249;
+    --ak-color-surface-overlay: rgba(23, 29, 43, 0.88);
+
+    --ak-color-border-subtle: #2a3449;
+    --ak-color-border: #38445c;
+    --ak-color-border-strong: #59698a;
+
+    --ak-color-success: #4ade80;
+    --ak-color-success-soft: rgba(74, 222, 128, 0.18);
+    --ak-color-success-ink: #dcfce7;
+    --ak-color-warning: #fbbf24;
+    --ak-color-warning-soft: rgba(251, 191, 36, 0.18);
+    --ak-color-warning-ink: #fef3c7;
+    --ak-color-danger: #fb7185;
+    --ak-color-danger-soft: rgba(251, 113, 133, 0.18);
+    --ak-color-danger-ink: #ffe4e6;
+    --ak-color-info: #38bdf8;
+    --ak-color-info-soft: rgba(56, 189, 248, 0.18);
+    --ak-color-info-ink: #e0f2fe;
+
+    --ak-color-link: var(--ak-color-primary);
+    --ak-color-link-hover: var(--ak-color-primary-hover);
+    --ak-color-focus-ring: rgba(96, 165, 250, 0.22);
+    --ak-color-disabled-bg: #1e2737;
+    --ak-color-disabled-surface: #171d2b;
+    --ak-color-disabled-border: #2f3b50;
+    --ak-color-disabled-text: #74849d;
+    --ak-color-selected: rgba(110, 168, 254, 0.15);
+    --ak-color-selected-border: #60a5fa;
+    --ak-color-hover: rgba(237, 243, 255, 0.06);
+    --ak-color-active: rgba(237, 243, 255, 0.12);
+    --ak-color-backdrop: rgba(2, 6, 12, 0.66);
+
+    --ak-color-fg: var(--ak-color-text);
+    --ak-color-muted: var(--ak-color-text-muted);
+
+    color-scheme: dark;
+  }
+}