astralkit 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astralkit",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Design tokens and component primitives for accessible UI — Tailwind CSS v3 & v4",
   "type": "module",
   "exports": {
@@ -13,7 +13,8 @@
     "./motion": "./lib/motion.js",
     "./theme-context": "./lib/theme-context.js",
     "./ai-rules": "./ai-rules.md",
-    "./palettes": "./palettes.css"
+    "./palettes": "./palettes.css",
+    "./presets": "./lib/presets/index.js"
   },
   "files": [
     "astralkit-theme.css",

package/primitives/animations.css

@@ -11,7 +11,49 @@
   transition: transform var(--duration-ak-fast, 110ms) var(--ease-ak-default, ease);
 }
 .ak-press:active {
-  transform: scale(0.98);
+  /* Var-driven so material appearances can re-behave the press
+     (neo-brutal translates, liquid squishes). Default = the house scale. */
+  transform: var(--ak-press-transform, scale(0.98));
+}
+
+
+/* -- Hover shimmer --
+   The house hover micro-interaction: one diagonal sheen sweep across a
+   filled surface on hover (same recipe as the avatar shimmer). Hidden at
+   rest so it can never leak a band; clipped by the element's own radius;
+   skipped under prefers-reduced-motion.
+   Usage: <button class="ak-hover-shimmer"> — for FILLED surfaces only
+   (a sheen over a transparent/outline surface reads as a stray flash). */
+.ak-hover-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+.ak-hover-shimmer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    110deg,
+    transparent 30%,
+    rgba(255, 255, 255, 0.35) 50%,
+    transparent 70%
+  );
+  transform: translateX(-120%);
+  opacity: 0;
+  pointer-events: none;
+}
+.ak-hover-shimmer:hover::after {
+  animation: ak-hover-shimmer-sweep 700ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+@keyframes ak-hover-shimmer-sweep {
+  0%   { transform: translateX(-120%); opacity: 1; }
+  100% { transform: translateX(120%);  opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ak-hover-shimmer:hover::after {
+    animation: none;
+  }
 }
 
 

package/tailwind.cjs

@@ -143,12 +143,12 @@ module.exports = plugin(
           'ak-on-surface':                 'var(--color-ak-on-surface, var(--color-ak-text))',
           'ak-on-surface-variant':         'var(--color-ak-on-surface-variant, var(--color-ak-text-secondary))',
           'ak-outline':                    'var(--color-ak-outline, var(--color-ak-border))',
-          'ak-outline-variant':            'var(--color-ak-outline-variant, var(--color-ak-border-subtle))',
-          'ak-primary-container':          'var(--color-ak-primary-container, var(--color-ak-primary-subtle))',
-          'ak-on-primary-container':       'var(--color-ak-on-primary-container, var(--color-ak-primary-900))',
-          'ak-selection-ink':              'var(--color-ak-selection-ink, var(--color-ak-on-primary-container, var(--color-ak-primary-900)))',
-          'ak-primary-container-emphasis': 'var(--color-ak-primary-container-emphasis, var(--color-ak-selection-ink, var(--color-ak-on-primary-container)))',
-          'ak-secondary':                  'var(--color-ak-secondary, var(--color-ak-accent, var(--color-ak-primary)))',
+          'ak-outline-variant':            'var(--color-ak-outline-variant, var(--color-ak-border-subtle))',
+          'ak-primary-container':          'var(--color-ak-primary-container, var(--color-ak-primary-subtle))',
+          'ak-on-primary-container':       'var(--color-ak-on-primary-container, var(--color-ak-primary-900))',
+          'ak-selection-ink':              'var(--color-ak-selection-ink, var(--color-ak-on-primary-container, var(--color-ak-primary-900)))',
+          'ak-primary-container-emphasis': 'var(--color-ak-primary-container-emphasis, var(--color-ak-selection-ink, var(--color-ak-on-primary-container)))',
+          'ak-secondary':                  'var(--color-ak-secondary, var(--color-ak-accent, var(--color-ak-primary)))',
           'ak-on-secondary':               'var(--color-ak-on-secondary, var(--color-ak-on-accent, var(--color-ak-on-primary)))',
           'ak-secondary-container':        'var(--color-ak-secondary-container, var(--color-ak-accent-soft, var(--color-ak-surface-2)))',
           'ak-on-secondary-container':     'var(--color-ak-on-secondary-container, var(--color-ak-text))',
@@ -157,6 +157,7 @@ module.exports = plugin(
           'ak-tertiary-container':         'var(--color-ak-tertiary-container, var(--color-ak-info-subtle))',
           'ak-on-tertiary-container':      'var(--color-ak-on-tertiary-container, var(--color-ak-info-text))',
           'ak-error':                      'var(--color-ak-error, var(--color-ak-danger))',
+          'ak-error-hover':                'var(--color-ak-error-hover, var(--color-ak-danger-hover))',
           'ak-on-error':                   'var(--color-ak-on-error)',
           'ak-error-container':            'var(--color-ak-error-container, var(--color-ak-danger-subtle))',
           'ak-on-error-container':         'var(--color-ak-on-error-container, var(--color-ak-danger-text))',
@@ -191,6 +192,7 @@ module.exports = plugin(
           'ak-warning-subtle': 'var(--color-ak-warning-subtle)',
           'ak-warning-text':   'var(--color-ak-warning-text)',
           'ak-danger':         'var(--color-ak-danger)',
+          'ak-danger-hover':   'var(--color-ak-danger-hover)',
           'ak-danger-subtle':  'var(--color-ak-danger-subtle)',
           'ak-danger-text':    'var(--color-ak-danger-text)',
           'ak-info':           'var(--color-ak-info)',
@@ -243,9 +245,12 @@ module.exports = plugin(
 
         /* ── Font Family ── */
         fontFamily: {
-          'ak-sans':  ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
-          'ak-serif': ['DM Serif Display', 'Georgia', 'serif'],
-          'ak-mono':  ['JetBrains Mono', 'Fira Code', 'ui-monospace', 'monospace'],
+          // Var-driven so a container/theme can re-font at runtime by setting
+          // the CSS variable (the font dial). Literal stacks remain as var fallbacks.
+          'ak-sans':    ['var(--font-ak-sans, Inter)', 'system-ui', '-apple-system', 'sans-serif'],
+          'ak-heading': ['var(--font-ak-heading, var(--font-ak-sans, Inter))', 'system-ui', 'sans-serif'],
+          'ak-serif':   ['var(--font-ak-serif, "DM Serif Display")', 'Georgia', 'serif'],
+          'ak-mono':    ['var(--font-ak-mono, "JetBrains Mono")', 'Fira Code', 'ui-monospace', 'monospace'],
         },
 
         /* ── Font Size ──
@@ -379,6 +384,7 @@ module.exports = plugin(
           'ak-3xl':   'var(--radius-ak-3xl)',
           'ak-full':  'var(--radius-ak-full)',
           'ak-input': 'var(--radius-ak-input)',
+          'ak-control-sm': 'var(--radius-ak-control-sm)',
           // Neobrutalist
           'ak-brutal':    'var(--radius-ak-brutal)',
           'ak-brutal-sm': 'var(--radius-ak-brutal-sm)',