@ultimat3/ui 22.15.0 → 24.0.0

package/src/tokens/_units.scss

@@ -0,0 +1,47 @@
+// Computed lengths: px → rem, and one fluid `clamp()` between two viewport widths. Functions only —
+// nothing here emits CSS. The scale maps restate a constant; these compute a value from one.
+
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+
+/// The one conversion both functions read, so `fluid(16px, 32px)` and `rem(16px)` cannot disagree
+/// about what a px is — and so a refusal names the function the author actually called.
+@function -to-rem($value, $root, $caller, $example) {
+  @if meta.type-of($value) != 'number' or not (math.is-unitless($value) or math.unit($value) == 'px' or math.unit($value) == 'rem') {
+    @error string.unquote('X_UI_INVALID_VALUE: #{$caller}() expected px, rem or a unitless px count — got `#{meta.inspect($value)}`. fix: pass a px length, e.g. #{$example}');
+  }
+  @if math.is-unitless($value) {
+    @return math.div($value * 1px, $root) * 1rem;
+  }
+  @if math.unit($value) == 'rem' {
+    @return $value;
+  }
+  @return math.div($value, $root) * 1rem;
+}
+
+/// px → rem against the root size. Lengths are rem so a layout holds at 200% text zoom; a unit
+/// that cannot be converted is a build error rather than a size that is subtly off.
+@function rem($value, $root: 16px) {
+  @return -to-rem($value, $root, 'rem', 'rem(24px)');
+}
+
+/// One `clamp()` with a real slope and intercept: `$min` at a viewport `$from` wide, `$max` at
+/// `$to`, linear between and held outside. Type and space then scale with the viewport instead of
+/// stepping at a breakpoint. `$min` above `$max` is a size that shrinks, and is legal.
+@function fluid($min, $max, $from: 20rem, $to: 80rem) {
+  $min: -to-rem($min, 16px, 'fluid', 'fluid(16px, 32px)');
+  $max: -to-rem($max, 16px, 'fluid', 'fluid(16px, 32px)');
+  $from: -to-rem($from, 16px, 'fluid', 'fluid(16px, 32px)');
+  $to: -to-rem($to, 16px, 'fluid', 'fluid(16px, 32px)');
+
+  @if $from >= $to {
+    @error string.unquote('X_UI_INVALID_VALUE: fluid() needs $from below $to — got `#{$from}` and `#{$to}`. fix: pass the narrower viewport first, e.g. fluid(1rem, 2rem, 20rem, 80rem)');
+  }
+
+  $slope: math.div($max - $min, $to - $from);
+  $intercept: $min - $slope * $from;
+  // `clamp(MIN, VAL, MAX)` with MIN above MAX answers MIN at every width, so the bounds are
+  // ordered here rather than trusted to be.
+  @return clamp(math.min($min, $max), $intercept + $slope * 100vw, math.max($min, $max));
+}

package/src/tokens/reset.scss

@@ -115,8 +115,8 @@
 
 // Themed keyboard focus for anything the component layer forgot.
 :where(:focus-visible) {
-  outline: 2px solid t.role('accent');
-  outline-offset: 2px;
+  outline: t.stroke(thick) solid t.role('accent');
+  outline-offset: t.stroke(thick);
 }
 
 :where(:focus:not(:focus-visible)) {
@@ -153,9 +153,9 @@ html:has(dialog:modal) {
   *,
   *::before,
   *::after {
-    animation-duration: 0.01ms !important;
+    animation-duration: t.$still !important;
     animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
+    transition-duration: t.$still !important;
     scroll-behavior: auto !important;
   }
 }

package/src/tokens/theme.scss

@@ -7,6 +7,7 @@
 @use 'radius';
 @use 'shadow';
 @use 'space';
+@use 'stroke';
 @use 'typography';
 @use 'z';
 
@@ -14,6 +15,7 @@
 @include shadow.emit;
 @include space.emit;
 @include radius.emit;
+@include stroke.emit;
 @include typography.emit;
 @include motion.emit;
 @include z.emit;

package/src/tokens/tokens.ts

@@ -119,6 +119,12 @@ export const radiusTokens = {
 
 export type RadiusName = keyof typeof radiusTokens;
 
+export const strokeTokens = {
+  hairline: '1px',
+  thick: '2px',
+  heavy: '3px',
+} as const;
+
 export const zTokens = {
   base: '0',
   raised: '10',

package/src/theme/inline-script.ts

@@ -1,49 +0,0 @@
-// The blocking <head> snippet that kills the flash of wrong theme. Built from the
-// same constants as theme.ts so the two can never disagree. Server/build-only:
-// the hash is computed with Bun's hasher for the CSP header.
-//
-// DEPRECATED `As of 20.2.0`: the framework's boot inlines this script itself, from
-// `@ultimat3/render`'s `themeScript({ fallback })` with `theme.defaultMode` in `app.config.ts` as
-// the fallback, and admits it to the CSP — an app no longer writes either half. This module stays
-// exported for one major so an app that inlined it by hand keeps building; it is removed in 21.
-
-import { runtimeMissingError } from '../errors';
-import { THEME_ATTRIBUTE, THEME_MEDIA_QUERY, THEME_STORAGE_KEY } from './theme';
-
-/**
- * Minified on purpose — this runs before first paint and is inlined into every
- * document. Reads the explicit choice, falls back to the OS, and always stamps
- * `data-theme` so screenshots and Playwright runs are deterministic.
- */
-export const THEME_INLINE_SCRIPT =
-  `try{var d=document.documentElement,` +
-  `s=localStorage.getItem('${THEME_STORAGE_KEY}');` +
-  `d.setAttribute('${THEME_ATTRIBUTE}',` +
-  `s==='light'||s==='dark'?s:` +
-  `matchMedia('${THEME_MEDIA_QUERY}').matches?'dark':'light')}catch(e){}`;
-
-/** The exact tag to inline. No attributes, so the CSP hash stays valid. */
-export function themeInlineScriptTag(): string {
-  return `<script>${THEME_INLINE_SCRIPT}</script>`;
-}
-
-let cachedHash: string | null = null;
-
-/** `sha256-<base64>` for `script-src`. Stable for a given script text. */
-export function themeInlineScriptHash(): string {
-  if (cachedHash !== null) return cachedHash;
-  if (typeof Bun === 'undefined') {
-    throw runtimeMissingError(
-      'Bun.CryptoHasher to hash the theme inline script',
-      'call themeInlineScriptHash() during build or SSR, never in browser code',
-    );
-  }
-  const digest = new Bun.CryptoHasher('sha256').update(THEME_INLINE_SCRIPT).digest('base64');
-  cachedHash = `sha256-${digest}`;
-  return cachedHash;
-}
-
-/** Quoted CSP source expression, ready to concatenate into a `script-src`. */
-export function themeInlineScriptCspSource(): string {
-  return `'${themeInlineScriptHash()}'`;
-}