@dorsk/tsumikit 0.78.0 → 0.80.0

package/dist/styles/tokens.css

@@ -19,10 +19,10 @@
   --c-bg-elev-2: #1f232c;
   --c-surface: #21262f;
   --c-border: #2c323d;
-  --c-border-strong: #68707e;
+  --c-border-strong: #757d8b;
   --c-text: #e6e9ef;
   --c-text-muted: #9aa3b2;
-  --c-text-faint: #848c9e;
+  --c-text-faint: #929bad;
 
   --c-accent: #5ad6a0;
   --c-accent-ink: #04130c;
@@ -267,6 +267,7 @@
 
   --dur-instant: 0ms;
   --dur-press: 100ms;
+  --dur-release: 150ms;
   --dur-fast: 120ms;
   --dur-base: 180ms;
   --dur-slow: 240ms;
@@ -285,6 +286,40 @@
   --shift-xs: 2px;
   --shift-sm: 4px;
   --shift-md: 8px;
+
+  /* Structural look. Components read these instead of hardcoding borders,
+     fills and shadows, so a theme can restyle the kit's surfaces from tokens. */
+  --edge-width: 1px;
+  --surface-fill: var(--bg-elevated);
+  --surface-fill-2: var(--bg-elevated-2);
+  --surface-edge: var(--border);
+  --surface-edge-strong: var(--border-strong);
+  --surface-shadow: 0 0 0 0 transparent;
+  --surface-shadow-hover: var(--surface-shadow);
+  --raised-fill: var(--bg-elevated);
+  --raised-edge: var(--border-strong);
+  --raised-shadow: var(--shadow-md);
+  --overlay-fill: var(--bg-elevated);
+  --overlay-edge: var(--border);
+  --overlay-shadow: var(--shadow-lg);
+  --control-fill: var(--bg);
+  --control-edge: var(--border-strong);
+  --control-edge-hover: var(--text-faint);
+  --control-shadow: 0 0 0 0 transparent;
+  --track-fill: var(--bg-elevated-2);
+  --track-edge: var(--control-edge);
+  --thumb-fill: var(--bg);
+  --thumb-shadow: var(--shadow-sm);
+  --btn-fill: var(--surface);
+  --btn-edge: var(--border-strong);
+  --btn-shadow: 0 0 0 0 transparent;
+  --btn-shadow-hover: var(--btn-shadow);
+  --btn-primary-fill: var(--accent);
+  --btn-primary-edge: var(--accent);
+  --btn-primary-shadow: 0 0 0 0 transparent;
+  --btn-primary-shadow-hover: var(--btn-primary-shadow);
+  --hover-lift: 0px;
+  --focus-glow: 0 0 0 0 transparent;
 }
 
 @supports (animation-timing-function: linear(0, 1)) {

package/dist/theme-mode.d.ts

@@ -7,6 +7,8 @@ export interface ThemePreference {
     light: string;
     /** Last dark theme the user picked. */
     dark: string;
+    /** Structural look; absent means the default look. */
+    look?: string;
 }
 /** The picker value that means "follow the system". Never a theme id. */
 export declare const AUTO_THEME = "auto";
@@ -31,3 +33,32 @@ export declare function preferenceFrom(raw: {
 }, slotOf: SlotOf, defaults?: ThemePreference): ThemePreference;
 /** The picker's current value: `auto`, or the pinned slot's theme id. */
 export declare function pickerValue(pref: ThemePreference): string;
+export type LookStatus = 'stable' | 'experimental';
+/** Structural looks, an axis independent of the theme. Each non-default look
+ *  ships as `@dorsk/tsumikit/looks/<id>.css`, scoped to `:root[data-look="<id>"]`. */
+export declare const LOOKS: readonly [{
+    readonly id: "default";
+    readonly label: "Polished";
+    readonly status: "stable";
+}, {
+    readonly id: "depth";
+    readonly label: "Depth";
+    readonly status: "stable";
+}, {
+    readonly id: "tactile";
+    readonly label: "Tactile";
+    readonly status: "stable";
+}, {
+    readonly id: "editorial";
+    readonly label: "Editorial";
+    readonly status: "experimental";
+}];
+export type LookId = (typeof LOOKS)[number]['id'];
+export declare const DEFAULT_LOOK: LookId;
+export declare function parseLook(v: unknown): LookId;
+/** Inline script that paints `data-theme`, `data-mode` and `data-look` from the
+ *  persisted blob before first paint. `themes` resolves a legacy lone theme id. */
+export declare function themePrepaint(key: string, themes: readonly {
+    id: string;
+    mode: ThemeSlot;
+}[]): string;

package/dist/theme-mode.js

@@ -43,3 +43,22 @@ export function preferenceFrom(raw, slotOf, defaults = DEFAULT_THEME_PREFERENCE)
 export function pickerValue(pref) {
     return pref.mode === 'auto' ? AUTO_THEME : pref.mode === 'dark' ? pref.dark : pref.light;
 }
+/** Structural looks, an axis independent of the theme. Each non-default look
+ *  ships as `@dorsk/tsumikit/looks/<id>.css`, scoped to `:root[data-look="<id>"]`. */
+export const LOOKS = [
+    { id: 'default', label: 'Polished', status: 'stable' },
+    { id: 'depth', label: 'Depth', status: 'stable' },
+    { id: 'tactile', label: 'Tactile', status: 'stable' },
+    { id: 'editorial', label: 'Editorial', status: 'experimental' },
+];
+export const DEFAULT_LOOK = 'default';
+export function parseLook(v) {
+    return LOOKS.find((l) => l.id === v)?.id ?? DEFAULT_LOOK;
+}
+/** Inline script that paints `data-theme`, `data-mode` and `data-look` from the
+ *  persisted blob before first paint. `themes` resolves a legacy lone theme id. */
+export function themePrepaint(key, themes) {
+    const looks = LOOKS.filter((l) => l.id !== DEFAULT_LOOK).map((l) => l.id);
+    const modes = Object.fromEntries(themes.map((t) => [t.id, t.mode]));
+    return `(function(){try{var d=document.documentElement,s=localStorage.getItem(${JSON.stringify(key)});if(!s)return;var b,t,m;try{b=JSON.parse(s)}catch(e){}if(b&&typeof b==='object'){m=b.mode==='auto'?(matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):b.mode==='light'?'light':'dark';t=b[m];if(${JSON.stringify(looks)}.indexOf(b.look)>=0)d.setAttribute('data-look',b.look)}else{var k=${JSON.stringify(modes)};if(!Object.prototype.hasOwnProperty.call(k,s))return;t=s;m=k[s]}if(typeof t==='string'&&t)d.setAttribute('data-theme',t);d.setAttribute('data-mode',m)}catch(e){}})();`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.78.0",
+  "version": "0.80.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",
@@ -40,7 +40,8 @@
     "./styles/themes.css": "./dist/styles/themes.css",
     "./styles/reset.css": "./dist/styles/reset.css",
     "./styles/utilities.css": "./dist/styles/utilities.css",
-    "./styles/syntax.css": "./dist/styles/syntax.css"
+    "./styles/syntax.css": "./dist/styles/syntax.css",
+    "./looks/*.css": "./dist/looks/*.css"
   },
   "publishConfig": {
     "access": "public",