astralkit 0.4.0 → 0.6.0

package/astralkit-utilities.css

@@ -196,12 +196,41 @@ html {
 .ak-switch-track-icon:last-child { right: 10px; }
 /* Off state: left icon hidden (behind knob), right icon visible */
 .ak-switch-with-icons .ak-switch-track-icon:first-child { opacity: 0; }
-.ak-switch-with-icons .ak-switch-track-icon:last-child { color: var(--color-ak-on-primary); opacity: 0.7; }
+.ak-switch-with-icons .ak-switch-track-icon:last-child { color: var(--color-ak-inverse-on-surface, #ffffff); opacity: 0.7; }
 /* On state: left icon visible, right icon hidden (behind knob) */
 .ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:first-child { color: var(--color-ak-on-primary); opacity: 0.7; }
 .ak-switch-with-icons[aria-checked="true"] .ak-switch-track-icon:last-child { opacity: 0; }
+/* Off-state surfaces: ink track from the inverse pair — palettes tint it, and
+   it stays softer than the checked primary track — with the knob swapping the
+   same pair so the state icon is legible on every palette in both modes. */
+.ak-switch-with-icons[aria-checked="false"] .ak-switch-track {
+  background: color-mix(in srgb, var(--color-ak-inverse-surface, #171717) 84%, var(--color-ak-surface, #ffffff));
+}
+.ak-switch-with-icons[aria-checked="false"] .ak-switch-knob {
+  background: var(--color-ak-inverse-on-surface, #ffffff);
+}
 /* Knob icon */
 .ak-switch-knob-icon { font-size: 14px; color: var(--color-ak-text); line-height: 1; }
+.ak-switch-with-icons .ak-switch-knob-icon { color: var(--color-ak-inverse-surface, #171717); }
+.ak-switch-with-icons[aria-checked="true"] .ak-switch-knob-icon { color: var(--color-ak-primary); }
+/* Dark mode: the page is already ink — the off track returns to the neutral
+   border tone and the inverse pair flips (inverse-surface reads light). */
+.dark .ak-switch-with-icons[aria-checked="false"] .ak-switch-track,
+[data-theme="dark"] .ak-switch-with-icons[aria-checked="false"] .ak-switch-track {
+  background: var(--color-ak-border-strong);
+}
+.dark .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob,
+[data-theme="dark"] .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob {
+  background: var(--color-ak-inverse-surface, var(--color-ak-text, #ffffff));
+}
+.dark .ak-switch-with-icons .ak-switch-track-icon:last-child,
+[data-theme="dark"] .ak-switch-with-icons .ak-switch-track-icon:last-child {
+  color: var(--color-ak-text, #ffffff);
+}
+.dark .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob-icon,
+[data-theme="dark"] .ak-switch-with-icons[aria-checked="false"] .ak-switch-knob-icon {
+  color: var(--color-ak-inverse-on-surface, var(--color-ak-bg, #171717));
+}
 
 /* Icon switch — lg (88×44) */
 .ak-switch-icons-lg .ak-switch-track { width: 88px; height: 44px; }
@@ -524,8 +553,253 @@ body.ak-ew-resizing, body.ak-ew-resizing * {
   cursor: ew-resize !important; user-select: none !important; -webkit-user-select: none !important;
 }
 
+/* ── Theme Role Utilities ── */
+.ak-theme-control {
+  background: var(--color-ak-surface-container-lowest, var(--color-ak-bg));
+  border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
+  color: var(--color-ak-on-surface, var(--color-ak-text));
+}
+.ak-theme-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover {
+  background: var(--color-ak-surface-container-low, var(--color-ak-hover));
+  border-color: var(--color-ak-outline, var(--color-ak-border));
+}
+.ak-theme-control-selected {
+  background: var(--color-ak-secondary, var(--color-ak-primary));
+  border-color: var(--color-ak-secondary, var(--color-ak-primary));
+  color: var(--color-ak-on-secondary, var(--color-ak-on-primary));
+}
+.ak-theme-control-selected-soft {
+  background: var(--color-ak-secondary-container, var(--color-ak-primary-subtle));
+  border-color: var(--color-ak-secondary-outline, var(--color-ak-secondary, var(--color-ak-primary)));
+  color: var(--color-ak-on-secondary-container, var(--color-ak-text));
+}
+.ak-theme-control-selected-primary {
+  background: var(--color-ak-primary);
+  border-color: var(--color-ak-primary);
+  color: var(--color-ak-on-primary);
+}
+.ak-theme-control-selected-primary-soft {
+  background: var(--color-ak-primary-container, var(--color-ak-primary-subtle));
+  border-color: var(--color-ak-primary-outline, var(--color-ak-primary));
+  color: var(--color-ak-selection-ink, var(--color-ak-on-primary-container, var(--color-ak-text)));
+}
+.ak-theme-icon-well {
+  background: var(--color-ak-surface-container, var(--color-ak-surface-2));
+  border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
+  color: var(--color-ak-on-surface-variant, var(--color-ak-text-secondary));
+}
+.ak-theme-icon-well-selected {
+  background: var(--color-ak-secondary, var(--color-ak-primary));
+  border-color: var(--color-ak-secondary, var(--color-ak-primary));
+  color: var(--color-ak-on-secondary, var(--color-ak-on-primary));
+}
+.ak-theme-icon-well-selected-primary {
+  background: var(--color-ak-primary-selection, var(--color-ak-primary));
+  border-color: var(--color-ak-primary-selection, var(--color-ak-primary));
+  color: var(--color-ak-on-primary-selection, var(--color-ak-on-primary));
+}
+.ak-theme-badge {
+  background: var(--color-ak-surface-container-lowest, var(--color-ak-bg));
+  border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
+  color: var(--color-ak-on-surface-variant, var(--color-ak-text-secondary));
+}
+.ak-theme-badge-selected {
+  background: var(--color-ak-accent, var(--color-ak-primary));
+  border-color: var(--color-ak-accent, var(--color-ak-primary));
+  color: var(--color-ak-on-accent, var(--color-ak-on-primary));
+}
+.ak-theme-media-caption {
+  background: var(--color-ak-primary-container, var(--color-ak-secondary-container, var(--color-ak-surface-container-lowest, var(--color-ak-bg))));
+  border-color: color-mix(in srgb, var(--color-ak-primary, var(--color-ak-border)) 34%, transparent);
+  color: var(--color-ak-on-primary-container, var(--color-ak-on-secondary-container, var(--color-ak-on-surface, var(--color-ak-text))));
+}
+.ak-theme-cta-gradient {
+  background: var(--gradient-ak-primary, linear-gradient(135deg, var(--color-ak-primary-hover), var(--color-ak-primary), var(--color-ak-primary-active)));
+  background-size: 160% 160%;
+  border-color: transparent;
+  color: var(--color-ak-on-primary);
+  transition:
+    background-position var(--duration-ak-slow, 240ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1)),
+    filter var(--duration-ak-fast, 110ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1)),
+    transform var(--duration-ak-fast, 110ms) var(--ease-ak-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
+}
+.ak-theme-cta-gradient:is(button, a, [role="button"]):not([aria-disabled="true"]):not(:disabled):hover {
+  background: var(--gradient-ak-primary-hover, var(--gradient-ak-primary, linear-gradient(135deg, var(--color-ak-primary-hover), var(--color-ak-primary), var(--color-ak-primary-active))));
+  background-position: 100% 50%;
+  filter: saturate(1.05);
+}
+.ak-theme-cta-gradient:is(button, a, [role="button"]):not([aria-disabled="true"]):not(:disabled):active {
+  transform: translateY(1px) scale(0.99);
+}
+.ak-theme-switch-track {
+  background: var(--color-ak-surface-container-high, var(--color-ak-surface-2));
+  border-color: var(--color-ak-outline-variant, var(--color-ak-border-subtle));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ak-on-surface-variant, var(--color-ak-text-secondary)) 6%, transparent);
+}
+.ak-theme-switch-track-selected {
+  background: var(--color-ak-secondary, var(--color-ak-primary));
+  border-color: var(--color-ak-secondary, var(--color-ak-primary));
+}
+.ak-theme-switch-track-selected-primary {
+  background: var(--color-ak-primary);
+  border-color: var(--color-ak-primary);
+}
+.ak-theme-switch-thumb {
+  background: var(--color-ak-bg);
+  box-shadow: var(--shadow-ak-xs);
+}
+.ak-theme-switch-track-selected .ak-theme-switch-thumb {
+  background: var(--color-ak-on-secondary, var(--color-ak-on-primary));
+}
+.ak-theme-switch-track-selected-primary .ak-theme-switch-thumb {
+  background: var(--color-ak-on-primary);
+}
+.dark .ak-theme-switch-thumb,
+[data-theme="dark"] .ak-theme-switch-thumb,
+[data-ak-dark-panel] .ak-theme-switch-thumb {
+  background: var(--color-ak-text);
+}
+.dark .ak-theme-switch-track-selected .ak-theme-switch-thumb,
+[data-theme="dark"] .ak-theme-switch-track-selected .ak-theme-switch-thumb,
+[data-ak-dark-panel] .ak-theme-switch-track-selected .ak-theme-switch-thumb {
+  background: var(--color-ak-on-secondary, var(--color-ak-on-primary));
+}
+.dark .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb,
+[data-theme="dark"] .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb,
+[data-ak-dark-panel] .ak-theme-switch-track-selected-primary .ak-theme-switch-thumb {
+  background: var(--color-ak-on-primary);
+}
+.ak-theme-logo-mark {
+  transition: filter var(--duration-ak-fast, 110ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1)), opacity var(--duration-ak-fast, 110ms) var(--ease-ak-default, cubic-bezier(0.4, 0, 0.2, 1));
+}
+.dark .ak-theme-logo-mark,
+[data-theme="dark"] .ak-theme-logo-mark,
+[data-ak-dark-panel] .ak-theme-logo-mark {
+  filter: invert(1) brightness(1.08) contrast(0.96);
+}
+
+/* Dark premium material utilities.
+   These stay dormant in light mode and use the palette glow tokens in dark contexts. */
+.ak-dark-material:is([data-ak-dark-panel], [data-ak-dark-rail], [data-ak-dark-mobile]),
+.ak-dark-material:is(.dark *),
+.dark .ak-dark-material,
+[data-theme="dark"] .ak-dark-material,
+[data-ak-dark-panel] .ak-dark-material,
+[data-ak-dark-rail] .ak-dark-material,
+[data-ak-dark-mobile] .ak-dark-material {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-ak-on-surface, #fff) 5%, transparent), transparent 42%),
+    radial-gradient(90% 64% at 50% 0%, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 10%, transparent), transparent 72%),
+    color-mix(in srgb, var(--color-ak-bg, #111) 90%, var(--color-ak-mesh-base, #050509) 10%);
+  border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 18%, var(--color-ak-border, rgba(255,255,255,0.12)));
+  color: var(--color-ak-on-surface, var(--color-ak-text));
+}
+.ak-dark-control:is(.dark *),
+.dark .ak-dark-control,
+[data-theme="dark"] .ak-dark-control,
+[data-ak-dark-panel] .ak-dark-control,
+[data-ak-dark-rail] .ak-dark-control,
+[data-ak-dark-mobile] .ak-dark-control {
+  background-color: transparent;
+  border-color: transparent;
+}
+.ak-dark-outlined-control:is(.dark *),
+.dark .ak-dark-outlined-control,
+[data-theme="dark"] .ak-dark-outlined-control,
+[data-ak-dark-panel] .ak-dark-outlined-control,
+[data-ak-dark-rail] .ak-dark-outlined-control,
+[data-ak-dark-mobile] .ak-dark-outlined-control {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-ak-on-surface, #fff) 3%, transparent), transparent 58%),
+    color-mix(in srgb, var(--color-ak-bg, #111) 86%, var(--color-ak-on-surface, #fff) 5%);
+  border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 26%, var(--color-ak-border, rgba(255,255,255,0.12)));
+}
+.ak-dark-avatar-tile:is(.dark *),
+.dark .ak-dark-avatar-tile,
+[data-theme="dark"] .ak-dark-avatar-tile,
+[data-ak-dark-panel] .ak-dark-avatar-tile,
+[data-ak-dark-rail] .ak-dark-avatar-tile,
+[data-ak-dark-mobile] .ak-dark-avatar-tile {
+  background:
+    radial-gradient(circle at 35% 22%, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 30%, transparent), transparent 62%),
+    color-mix(in srgb, var(--color-ak-primary-container, #31245a) 72%, var(--color-ak-bg, #111) 28%);
+  color: var(--color-ak-on-primary-container, var(--color-ak-on-surface, #fff));
+}
+.ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):is(:hover, [data-highlighted]),
+.ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled)[data-highlighted],
+.dark .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
+[data-theme="dark"] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
+[data-ak-dark-panel] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
+[data-ak-dark-rail] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover,
+[data-ak-dark-mobile] .ak-dark-control:is(button, a, [role="button"], [tabindex]):not([aria-disabled="true"]):not(:disabled):hover {
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 10%, transparent), transparent 64%),
+    color-mix(in srgb, var(--color-ak-on-surface, #fff) 6%, transparent);
+  color: var(--color-ak-on-surface, var(--color-ak-text));
+}
+.ak-dark-control-selected:is(.dark *),
+.dark .ak-dark-control-selected,
+[data-theme="dark"] .ak-dark-control-selected,
+[data-ak-dark-panel] .ak-dark-control-selected,
+[data-ak-dark-rail] .ak-dark-control-selected,
+[data-ak-dark-mobile] .ak-dark-control-selected {
+  background:
+    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--color-ak-on-primary, #fff) 22%, transparent), transparent 36%),
+    linear-gradient(135deg, var(--color-ak-gradient-start, var(--color-ak-primary-hover)) 0%, var(--color-ak-gradient-mid, var(--color-ak-primary)) 52%, var(--color-ak-gradient-end, var(--color-ak-primary-active)) 100%);
+  border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 64%, var(--color-ak-border, rgba(255,255,255,0.12)));
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 46%, transparent),
+    inset 0 1px 0 color-mix(in srgb, var(--color-ak-neutral-0, #fff) 16%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 14%, transparent),
+    0 12px 28px -22px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 78%, transparent);
+  color: var(--color-ak-on-primary-selection, var(--color-ak-on-primary, #fff));
+}
+.dark .ak-dark-control-selected.ak-selection-ink,
+[data-theme="dark"] .ak-dark-control-selected.ak-selection-ink,
+[data-ak-dark-panel] .ak-dark-control-selected.ak-selection-ink,
+[data-ak-dark-rail] .ak-dark-control-selected.ak-selection-ink,
+[data-ak-dark-mobile] .ak-dark-control-selected.ak-selection-ink,
+.dark .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
+[data-theme="dark"] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
+[data-ak-dark-panel] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
+[data-ak-dark-rail] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph),
+[data-ak-dark-mobile] .ak-dark-control-selected :where(.ak-selection-ink, i, svg, .ph) {
+  color: var(--color-ak-on-primary-selection, var(--color-ak-on-primary, #fff));
+}
+.ak-dark-accent-tile:is(.dark *),
+.dark .ak-dark-accent-tile,
+[data-theme="dark"] .ak-dark-accent-tile,
+[data-ak-dark-panel] .ak-dark-accent-tile,
+[data-ak-dark-rail] .ak-dark-accent-tile,
+[data-ak-dark-mobile] .ak-dark-accent-tile {
+  background:
+    radial-gradient(circle at 22% 16%, color-mix(in srgb, var(--color-ak-on-primary, #fff) 20%, transparent), transparent 38%),
+    linear-gradient(135deg, var(--color-ak-gradient-start, var(--color-ak-primary-hover)) 0%, var(--color-ak-gradient-mid, var(--color-ak-primary)) 50%, var(--color-ak-gradient-end, var(--color-ak-primary-active)) 100%);
+  border-color: color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 62%, transparent);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--color-ak-on-primary, #fff) 16%, transparent),
+    0 10px 28px -18px color-mix(in srgb, var(--color-ak-glow-primary, #818cf8) 90%, transparent);
+  color: var(--color-ak-on-primary, #fff);
+}
+.ak-dark-accent-tile:is(.dark *) :where(i, svg, .ph),
+.dark .ak-dark-accent-tile :where(i, svg, .ph),
+[data-theme="dark"] .ak-dark-accent-tile :where(i, svg, .ph),
+[data-ak-dark-panel] .ak-dark-accent-tile :where(i, svg, .ph),
+[data-ak-dark-rail] .ak-dark-accent-tile :where(i, svg, .ph),
+[data-ak-dark-mobile] .ak-dark-accent-tile :where(i, svg, .ph) {
+  color: var(--color-ak-on-primary, #fff);
+}
+.ak-dark-vivid-ink:is(.dark *),
+.dark .ak-dark-vivid-ink,
+[data-theme="dark"] .ak-dark-vivid-ink,
+[data-ak-dark-panel] .ak-dark-vivid-ink,
+[data-ak-dark-rail] .ak-dark-vivid-ink,
+[data-ak-dark-mobile] .ak-dark-vivid-ink {
+  color: var(--color-ak-glow-primary, var(--color-ak-primary));
+}
+
 /* ── Focus Ring Utility ── */
-.ak-focus-ring:focus-visible { outline: 2px solid var(--color-ak-primary); outline-offset: 2px; }
+.ak-focus-ring:focus-visible { outline: 2px solid var(--color-ak-border-focus, var(--color-ak-primary)); outline-offset: 2px; }
 
 /* ── Price Fade Transition ── */
 .ak-price-fade { transition: opacity 0.15s ease-in-out; }

package/lib/theme-context.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react'
+
+export interface AkThemeContextValue {
+  dark: boolean
+}
+
+/**
+ * Provides dark mode state to descendants — including Radix portaled content,
+ * which escapes the data-ak-dark-* attribute scope on ancestor elements.
+ */
+export declare function AkThemeProvider(props: {
+  dark: boolean
+  children: React.ReactNode
+}): React.ReactElement
+
+/** Read the nearest AkThemeProvider's dark flag. Defaults to { dark: false }. */
+export declare function useAkTheme(): AkThemeContextValue

package/lib/theme-context.js

@@ -0,0 +1,33 @@
+'use client'
+
+import { createContext, createElement, useContext } from 'react'
+
+/**
+ * AkThemeContext — propagates dark mode state to Radix portaled content.
+ *
+ * Problem: Radix Dialog/DropdownMenu/Popover portal content to document.body,
+ * which exits the CSS custom property inheritance chain from data-ak-dark-*
+ * attributes on ancestor elements.
+ *
+ * Solution: Every component that uses Radix portals reads this context and
+ * applies the dark mode data attributes directly onto the portaled content.
+ *
+ * Usage:
+ *   <AkThemeProvider dark={isDark}>
+ *     <MyComponentWithRadixPortals />
+ *   </AkThemeProvider>
+ *
+ *   // Inside the component:
+ *   const { dark } = useAkTheme()
+ *   <DropdownMenu.Content data-ak-dark-panel={dark || undefined}>
+ */
+
+const AkThemeContext = createContext({ dark: false })
+
+export function AkThemeProvider({ dark, children }) {
+  return createElement(AkThemeContext.Provider, { value: { dark } }, children)
+}
+
+export function useAkTheme() {
+  return useContext(AkThemeContext)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astralkit",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Design tokens and component primitives for accessible UI — Tailwind CSS v3 & v4",
   "type": "module",
   "exports": {
@@ -11,6 +11,7 @@
     "./tailwind.cjs": "./tailwind.cjs",
     "./utils": "./lib/utils.js",
     "./motion": "./lib/motion.js",
+    "./theme-context": "./lib/theme-context.js",
     "./ai-rules": "./ai-rules.md",
     "./palettes": "./palettes.css"
   },
@@ -32,11 +33,15 @@
     "tailwind-merge": "^2.2.0 || ^3.0.0"
   },
   "peerDependencies": {
-    "tailwindcss": ">=3.0.0"
+    "tailwindcss": ">=3.0.0",
+    "react": ">=18.0.0"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
       "optional": false
+    },
+    "react": {
+      "optional": true
     }
   },
   "keywords": [