@askrjs/themes 0.0.1

package/src/themes/default/styles/shell/navbar.css

@@ -0,0 +1,158 @@
+@layer components {
+  :where(.navbar, [data-slot="navbar"]) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ak-space-md);
+    padding-block: var(--ak-space-xs);
+  }
+
+  :where(.navbar, [data-slot="navbar"]):has(> [data-slot="navbar-group"][data-align="center"]) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items: center;
+  }
+
+  :where(.navbar-brand, [data-slot="navbar-brand"]) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ak-space-sm);
+    min-inline-size: 0;
+  }
+
+  :where(.navbar-brand, [data-slot="navbar-brand"]) :where(a) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :where(.navbar-group, [data-slot="navbar-group"]) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ak-space-md);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+  }
+
+  :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"]) {
+    justify-content: center;
+    margin-inline: auto;
+  }
+
+  :where(.navbar, [data-slot="navbar"]):has(> [data-slot="navbar-group"][data-align="center"])
+    > :where(.navbar-brand, [data-slot="navbar-brand"]) {
+    grid-column: 1;
+    justify-self: start;
+  }
+
+  :where(.navbar, [data-slot="navbar"]):has(> [data-slot="navbar-group"][data-align="center"])
+    > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"]) {
+    grid-column: 2;
+    justify-self: center;
+    margin-inline: 0;
+  }
+
+  :where(.navbar, [data-slot="navbar"]):has(> [data-slot="navbar-group"][data-align="center"])
+    > :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
+    grid-column: 3;
+    justify-self: end;
+    margin-inline-start: 0;
+  }
+
+  :where(.navbar-item, [data-slot="nav-item"]) {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: 2.25rem;
+    padding-inline: var(--ak-space-sm);
+    border: 1px solid transparent;
+    border-radius: var(--ak-radius-md);
+    color: var(--ak-color-text-muted);
+    font-size: var(--ak-font-size-sm);
+    font-weight: var(--ak-font-weight-medium);
+    text-decoration: none;
+    transition:
+      color var(--ak-duration-fast) var(--ak-ease-standard),
+      background var(--ak-duration-fast) var(--ak-ease-standard);
+  }
+
+  :where(.navbar-item:hover, [data-slot="nav-item"]:hover) {
+    color: var(--ak-color-text);
+    background: var(--ak-color-surface-muted);
+    border-color: color-mix(in srgb, var(--ak-color-border) 78%, white 22%);
+    box-shadow: var(--ak-shadow-sm);
+  }
+
+  :where(.navbar-item-icon, [data-slot="nav-item"][data-variant="icon"]) {
+    justify-content: center;
+    inline-size: var(--ak-density-control-height-md);
+    min-block-size: var(--ak-density-control-height-md);
+    padding-inline: 0;
+    border: 1px solid transparent;
+    color: var(--ak-color-text);
+    line-height: 1;
+  }
+
+  :where(.navbar-item-icon, [data-slot="nav-item"][data-variant="icon"])
+    > :where([data-slot="icon"], svg) {
+    flex: none;
+    color: currentColor;
+  }
+
+  :where(.navbar-item-icon:hover, [data-slot="nav-item"][data-variant="icon"]:hover) {
+    border-color: transparent;
+  }
+
+  :where(.navbar-item-icon:active, [data-slot="nav-item"][data-variant="icon"]:active) {
+    background: var(--ak-color-active);
+    border-color: transparent;
+  }
+
+  :where(
+    .navbar-item[aria-current="page"],
+    [data-slot="nav-item"][aria-current="page"],
+    .navbar-item[data-active="true"],
+    [data-slot="nav-item"][data-active="true"]
+  ) {
+    color: var(--ak-color-text);
+    background: color-mix(in srgb, var(--ak-color-primary-soft) 22%, var(--ak-color-surface));
+    border-color: color-mix(in srgb, var(--ak-color-primary) 16%, var(--ak-color-border));
+    box-shadow: var(--ak-shadow-sm);
+  }
+
+  :where(.navbar-item:focus-visible, [data-slot="nav-item"]:focus-visible) {
+    outline: none;
+    box-shadow:
+      0 0 0 1px var(--ak-color-surface),
+      0 0 0 4px var(--ak-color-focus-ring);
+  }
+
+  :where(.navbar-item[data-active="true"]:hover, [data-slot="nav-item"][data-active="true"]:hover) {
+    background: color-mix(in srgb, var(--ak-color-primary-soft) 30%, var(--ak-color-surface-muted));
+    border-color: color-mix(in srgb, var(--ak-color-primary) 22%, var(--ak-color-border-strong));
+  }
+
+  :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
+    margin-inline-start: auto;
+    justify-content: flex-end;
+  }
+  @media (max-width: 48rem) {
+    :where(.navbar, [data-slot="navbar"]) {
+      display: flex;
+      align-items: stretch;
+      flex-wrap: wrap;
+    }
+
+    :where(.navbar-group, [data-slot="navbar-group"]) {
+      inline-size: 100%;
+    }
+
+    :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"]) {
+      justify-content: flex-start;
+      margin-inline: 0;
+    }
+
+    :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
+      justify-content: flex-start;
+      margin-inline-start: 0;
+    }
+  }
+}

package/src/themes/default/styles/shell/theme.css

@@ -0,0 +1,35 @@
+:where([data-slot="theme-provider"]) {
+  min-block-size: 100vh;
+  color: var(--ak-color-text);
+  background: var(--ak-color-bg);
+}
+
+:where(html) {
+  background: var(--ak-color-bg);
+}
+
+:where(body) {
+  background: transparent;
+}
+
+:where([data-slot="theme-picker"]) {
+  display: inline-flex;
+  min-height: 2.5rem;
+  min-width: 8rem;
+  padding-inline: 0.85rem 2.1rem;
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  font: inherit;
+  font-size: var(--ak-font-size-sm);
+  line-height: 1;
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where([data-slot="theme-picker"]:focus-visible) {
+  outline: none;
+  box-shadow:
+    0 0 0 1px var(--ak-color-surface),
+    0 0 0 4px var(--ak-color-focus-ring);
+}

package/src/themes/default/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;
+  }
+}

package/templates/theme/index.css

@@ -0,0 +1,48 @@
+@import "./tokens.css";
+@import "./styles/base/typography.css";
+@import "./styles/base/icon.css";
+@import "./styles/base/utilities.css";
+@import "./styles/layout/layout.css";
+@import "./styles/layout/responsive-layout.css";
+@import "./styles/layout/patterns.css";
+@import "./styles/layout/aspect-ratio.css";
+@import "./styles/shell/theme.css";
+@import "./styles/shell/header.css";
+@import "./styles/shell/navbar.css";
+@import "./styles/actions/button.css";
+@import "./styles/actions/toggle.css";
+@import "./styles/actions/toggle-group.css";
+@import "./styles/forms/input.css";
+@import "./styles/forms/textarea.css";
+@import "./styles/forms/checkbox.css";
+@import "./styles/forms/switch.css";
+@import "./styles/forms/radio-group.css";
+@import "./styles/forms/select.css";
+@import "./styles/forms/slider.css";
+@import "./styles/forms/label.css";
+@import "./styles/forms/form.css";
+@import "./styles/display/card.css";
+@import "./styles/display/progress.css";
+@import "./styles/display/progress-circle.css";
+@import "./styles/display/badge.css";
+@import "./styles/display/skeleton.css";
+@import "./styles/display/avatar.css";
+@import "./styles/display/separator.css";
+@import "./styles/display/table.css";
+@import "./styles/display/scroll-area.css";
+@import "./styles/display/spinner.css";
+@import "./styles/display/coverage.css";
+@import "./styles/navigation/breadcrumb.css";
+@import "./styles/navigation/tabs.css";
+@import "./styles/navigation/menu.css";
+@import "./styles/navigation/menubar.css";
+@import "./styles/navigation/navigation-menu.css";
+@import "./styles/disclosure/accordion.css";
+@import "./styles/disclosure/collapsible.css";
+@import "./styles/overlays/alert-dialog.css";
+@import "./styles/overlays/dropdown-menu.css";
+@import "./styles/overlays/toast.css";
+@import "./styles/overlays/dialog.css";
+@import "./styles/overlays/popover.css";
+@import "./styles/overlays/hover-card.css";
+@import "./styles/overlays/tooltip.css";