@loidolt/theme-tokens 0.2.0 → 0.4.0

package/README.md

@@ -0,0 +1,16 @@
+# @loidolt/theme-tokens
+
+Typed design tokens and generated CSS custom properties for the Loidolt design system.
+
+```sh
+npm install @loidolt/theme-tokens
+```
+
+```ts
+import { colors, semantic, spacing, tokens } from '@loidolt/theme-tokens';
+```
+
+```css
+@import '@loidolt/theme-tokens/css';
+@import '@loidolt/theme-tokens/css/dark';
+```

package/dist/dark-auto.css

@@ -5,6 +5,7 @@
   --loidolt-surface: #1e211c;
   --loidolt-surface-alt: #24271f;
   --loidolt-surface-sunken: #101210;
+  --loidolt-surface-paper: #ffffff;
   --loidolt-surface-inverse: #ebe7dc;
   --loidolt-surface-input: #24271f;
   --loidolt-text: #ebe7dc;
@@ -15,10 +16,12 @@
   --loidolt-border-soft: #2b2e26;
   --loidolt-border-strong: #6a6e5f;
   --loidolt-border-control: #787c6b;
+  --loidolt-border-sunken: #262922;
   --loidolt-accent: #e0672f;
   --loidolt-accent-hover: #f0895c;
   --loidolt-on-accent: #161814;
   --loidolt-danger: #d75f55;
+  --loidolt-danger-hover: #e07a70;
   --loidolt-on-danger: #161814;
   --loidolt-text-danger: #e88b81;
   --loidolt-success: #7fa074;
@@ -42,6 +45,7 @@
     --loidolt-surface: #1e211c;
     --loidolt-surface-alt: #24271f;
     --loidolt-surface-sunken: #101210;
+    --loidolt-surface-paper: #ffffff;
     --loidolt-surface-inverse: #ebe7dc;
     --loidolt-surface-input: #24271f;
     --loidolt-text: #ebe7dc;
@@ -52,10 +56,12 @@
     --loidolt-border-soft: #2b2e26;
     --loidolt-border-strong: #6a6e5f;
     --loidolt-border-control: #787c6b;
+    --loidolt-border-sunken: #262922;
     --loidolt-accent: #e0672f;
     --loidolt-accent-hover: #f0895c;
     --loidolt-on-accent: #161814;
     --loidolt-danger: #d75f55;
+    --loidolt-danger-hover: #e07a70;
     --loidolt-on-danger: #161814;
     --loidolt-text-danger: #e88b81;
     --loidolt-success: #7fa074;

package/dist/dark.css

@@ -5,6 +5,7 @@
   --loidolt-surface: #1e211c;
   --loidolt-surface-alt: #24271f;
   --loidolt-surface-sunken: #101210;
+  --loidolt-surface-paper: #ffffff;
   --loidolt-surface-inverse: #ebe7dc;
   --loidolt-surface-input: #24271f;
   --loidolt-text: #ebe7dc;
@@ -15,10 +16,12 @@
   --loidolt-border-soft: #2b2e26;
   --loidolt-border-strong: #6a6e5f;
   --loidolt-border-control: #787c6b;
+  --loidolt-border-sunken: #262922;
   --loidolt-accent: #e0672f;
   --loidolt-accent-hover: #f0895c;
   --loidolt-on-accent: #161814;
   --loidolt-danger: #d75f55;
+  --loidolt-danger-hover: #e07a70;
   --loidolt-on-danger: #161814;
   --loidolt-text-danger: #e88b81;
   --loidolt-success: #7fa074;

package/dist/index.d.ts

@@ -28,6 +28,7 @@ declare const colors: {
     readonly orange: "#c65224";
     readonly orangeDark: "#a9441d";
     readonly error: "#9b2822";
+    readonly errorDark: "#7f1f1a";
     readonly success: "#3f5139";
     readonly warning: "#7c4d17";
     readonly info: "#265162";
@@ -80,8 +81,8 @@ declare const sizing: {
 };
 declare const borders: {
     readonly width: "1px";
-    readonly color: "#c8c1b1";
     readonly radius: "0px";
+    readonly radiusPill: "999px";
 };
 declare const shadows: {
     readonly popover: "0 12px 30px color-mix(in srgb, var(--loidolt-shadow-color) 18%, transparent)";
@@ -105,9 +106,19 @@ declare const zIndex: {
     readonly tooltip: "90";
     readonly skipLink: "1000";
 };
-/** Breakpoints are not custom properties (`@media` cannot read `var()`), but stay tokenized here. */
+/**
+ * Breakpoints are not custom properties (`@media` cannot read `var()`), but stay tokenized here
+ * so an app and the library agree on where the layout changes.
+ *
+ * - `compact` — the phone/narrow-tablet break. The only one the package's own CSS uses: below
+ *   it the workspace grid collapses to a single column and the sidebar becomes a stacked block.
+ * - `expanded` — where a sidebar plus content plus inspector all fit at once.
+ * - `wide` — where content stops growing and gutters take the extra room.
+ */
 declare const breakpoints: {
     readonly compact: "760px";
+    readonly expanded: "1024px";
+    readonly wide: "1400px";
 };
 /**
  * The role layer. Every value links to a primitive, so overriding a primitive propagates and
@@ -118,6 +129,8 @@ declare const semanticDefs: {
     readonly surface: TokenRef;
     readonly surfaceAlt: TokenRef;
     readonly surfaceSunken: TokenRef;
+    /** Artwork-on-paper backing: stays white in every theme so previews read true. */
+    readonly surfacePaper: TokenRef;
     readonly surfaceInverse: TokenRef;
     readonly surfaceInput: TokenRef;
     readonly text: TokenRef;
@@ -129,10 +142,13 @@ declare const semanticDefs: {
     readonly borderStrong: TokenRef;
     /** Boundary of an input, select, textarea or switch — held to 3:1 against its surface. */
     readonly borderControl: TokenRef;
+    /** Decorative rule on the sunken surface (canvas grids, artboard guides). Not a boundary. */
+    readonly borderSunken: TokenRef;
     readonly accent: TokenRef;
     readonly accentHover: TokenRef;
     readonly onAccent: TokenRef;
     readonly danger: TokenRef;
+    readonly dangerHover: TokenRef;
     readonly onDanger: TokenRef;
     readonly textDanger: TokenRef;
     readonly success: TokenRef;
@@ -168,6 +184,7 @@ declare const darkSemantic: {
     readonly surface: "#1e211c";
     readonly surfaceAlt: "#24271f";
     readonly surfaceSunken: "#101210";
+    readonly surfacePaper: "#ffffff";
     readonly surfaceInverse: "#ebe7dc";
     readonly surfaceInput: "#24271f";
     readonly text: "#ebe7dc";
@@ -178,10 +195,12 @@ declare const darkSemantic: {
     readonly borderSoft: "#2b2e26";
     readonly borderStrong: "#6a6e5f";
     readonly borderControl: "#787c6b";
+    readonly borderSunken: "#262922";
     readonly accent: "#e0672f";
     readonly accentHover: "#f0895c";
     readonly onAccent: "#161814";
     readonly danger: "#d75f55";
+    readonly dangerHover: "#e07a70";
     readonly onDanger: "#161814";
     readonly textDanger: "#e88b81";
     readonly success: "#7fa074";
@@ -220,6 +239,7 @@ declare const tokens: {
         readonly orange: "#c65224";
         readonly orangeDark: "#a9441d";
         readonly error: "#9b2822";
+        readonly errorDark: "#7f1f1a";
         readonly success: "#3f5139";
         readonly warning: "#7c4d17";
         readonly info: "#265162";
@@ -272,8 +292,8 @@ declare const tokens: {
     };
     readonly borders: {
         readonly width: "1px";
-        readonly color: "#c8c1b1";
         readonly radius: "0px";
+        readonly radiusPill: "999px";
     };
     readonly shadows: {
         readonly popover: "0 12px 30px color-mix(in srgb, var(--loidolt-shadow-color) 18%, transparent)";
@@ -299,12 +319,15 @@ declare const tokens: {
     };
     readonly breakpoints: {
         readonly compact: "760px";
+        readonly expanded: "1024px";
+        readonly wide: "1400px";
     };
     readonly semantic: {
         readonly background: string;
         readonly surface: string;
         readonly surfaceAlt: string;
         readonly surfaceSunken: string;
+        readonly surfacePaper: string;
         readonly surfaceInverse: string;
         readonly surfaceInput: string;
         readonly text: string;
@@ -315,10 +338,12 @@ declare const tokens: {
         readonly borderSoft: string;
         readonly borderStrong: string;
         readonly borderControl: string;
+        readonly borderSunken: string;
         readonly accent: string;
         readonly accentHover: string;
         readonly onAccent: string;
         readonly danger: string;
+        readonly dangerHover: string;
         readonly onDanger: string;
         readonly textDanger: string;
         readonly success: string;
@@ -339,6 +364,7 @@ declare const tokens: {
         readonly surface: "#1e211c";
         readonly surfaceAlt: "#24271f";
         readonly surfaceSunken: "#101210";
+        readonly surfacePaper: "#ffffff";
         readonly surfaceInverse: "#ebe7dc";
         readonly surfaceInput: "#24271f";
         readonly text: "#ebe7dc";
@@ -349,10 +375,12 @@ declare const tokens: {
         readonly borderSoft: "#2b2e26";
         readonly borderStrong: "#6a6e5f";
         readonly borderControl: "#787c6b";
+        readonly borderSunken: "#262922";
         readonly accent: "#e0672f";
         readonly accentHover: "#f0895c";
         readonly onAccent: "#161814";
         readonly danger: "#d75f55";
+        readonly dangerHover: "#e07a70";
         readonly onDanger: "#161814";
         readonly textDanger: "#e88b81";
         readonly success: "#7fa074";

package/dist/index.js

@@ -20,6 +20,7 @@ var colors = {
   orange: "#c65224",
   orangeDark: "#a9441d",
   error: "#9b2822",
+  errorDark: "#7f1f1a",
   success: "#3f5139",
   warning: "#7c4d17",
   info: "#265162"
@@ -63,7 +64,7 @@ var sizing = {
   inspector: "18rem",
   content: "75rem"
 };
-var borders = { width: "1px", color: colors.line, radius: "0px" };
+var borders = { width: "1px", radius: "0px", radiusPill: "999px" };
 var shadows = {
   popover: "0 12px 30px color-mix(in srgb, var(--loidolt-shadow-color) 18%, transparent)",
   modal: "0 24px 60px color-mix(in srgb, var(--loidolt-shadow-color) 24%, transparent)",
@@ -86,12 +87,14 @@ var zIndex = {
   tooltip: "90",
   skipLink: "1000"
 };
-var breakpoints = { compact: "760px" };
+var breakpoints = { compact: "760px", expanded: "1024px", wide: "1400px" };
 var semanticDefs = {
   background: ref("color-paper"),
   surface: ref("color-panel"),
   surfaceAlt: ref("color-panel-alt"),
   surfaceSunken: ref("color-canvas"),
+  /** Artwork-on-paper backing: stays white in every theme so previews read true. */
+  surfacePaper: ref("color-white"),
   surfaceInverse: ref("color-deep"),
   surfaceInput: ref("color-white"),
   text: ref("color-deep"),
@@ -103,6 +106,8 @@ var semanticDefs = {
   borderStrong: ref("color-deep"),
   /** Boundary of an input, select, textarea or switch — held to 3:1 against its surface. */
   borderControl: ref("color-line-strong"),
+  /** Decorative rule on the sunken surface (canvas grids, artboard guides). Not a boundary. */
+  borderSunken: ref("color-canvas-line"),
   accent: ref("color-orange"),
   accentHover: ref("color-orange-dark"),
   onAccent: ref("color-white"),
@@ -112,6 +117,7 @@ var semanticDefs = {
    * value: a fill tuned for white ink is too light to read as text, and vice versa.
    */
   danger: ref("color-error"),
+  dangerHover: ref("color-error-dark"),
   onDanger: ref("color-white"),
   textDanger: ref("color-error"),
   success: ref("color-success"),
@@ -132,7 +138,7 @@ var PRIMITIVE_GROUPS = [
   ["font", typography],
   ["space", spacing],
   ["size", sizing],
-  ["border", { width: borders.width, color: ref("color-line"), radius: borders.radius }],
+  ["border", borders],
   ["shadow", shadows],
   ["motion", motion],
   ["z", zIndex]
@@ -175,6 +181,7 @@ var darkSemantic = {
   surface: "#1e211c",
   surfaceAlt: "#24271f",
   surfaceSunken: "#101210",
+  surfacePaper: "#ffffff",
   surfaceInverse: "#ebe7dc",
   surfaceInput: "#24271f",
   text: "#ebe7dc",
@@ -185,10 +192,12 @@ var darkSemantic = {
   borderSoft: "#2b2e26",
   borderStrong: "#6a6e5f",
   borderControl: "#787c6b",
+  borderSunken: "#262922",
   accent: "#e0672f",
   accentHover: "#f0895c",
   onAccent: "#161814",
   danger: "#d75f55",
+  dangerHover: "#e07a70",
   onDanger: "#161814",
   textDanger: "#e88b81",
   success: "#7fa074",

package/dist/tokens.css

@@ -14,6 +14,7 @@
   --loidolt-color-orange: #c65224;
   --loidolt-color-orange-dark: #a9441d;
   --loidolt-color-error: #9b2822;
+  --loidolt-color-error-dark: #7f1f1a;
   --loidolt-color-success: #3f5139;
   --loidolt-color-warning: #7c4d17;
   --loidolt-color-info: #265162;
@@ -52,8 +53,8 @@
   --loidolt-size-inspector: 18rem;
   --loidolt-size-content: 75rem;
   --loidolt-border-width: 1px;
-  --loidolt-border-color: var(--loidolt-color-line);
   --loidolt-border-radius: 0px;
+  --loidolt-border-radius-pill: 999px;
   --loidolt-shadow-popover: 0 12px 30px color-mix(in srgb, var(--loidolt-shadow-color) 18%, transparent);
   --loidolt-shadow-modal: 0 24px 60px color-mix(in srgb, var(--loidolt-shadow-color) 24%, transparent);
   --loidolt-shadow-artwork: 0 18px 23px color-mix(in srgb, var(--loidolt-shadow-color) 14%, transparent);
@@ -74,6 +75,7 @@
   --loidolt-surface: var(--loidolt-color-panel);
   --loidolt-surface-alt: var(--loidolt-color-panel-alt);
   --loidolt-surface-sunken: var(--loidolt-color-canvas);
+  --loidolt-surface-paper: var(--loidolt-color-white);
   --loidolt-surface-inverse: var(--loidolt-color-deep);
   --loidolt-surface-input: var(--loidolt-color-white);
   --loidolt-text: var(--loidolt-color-deep);
@@ -84,10 +86,12 @@
   --loidolt-border-soft: var(--loidolt-color-line-soft);
   --loidolt-border-strong: var(--loidolt-color-deep);
   --loidolt-border-control: var(--loidolt-color-line-strong);
+  --loidolt-border-sunken: var(--loidolt-color-canvas-line);
   --loidolt-accent: var(--loidolt-color-orange);
   --loidolt-accent-hover: var(--loidolt-color-orange-dark);
   --loidolt-on-accent: var(--loidolt-color-white);
   --loidolt-danger: var(--loidolt-color-error);
+  --loidolt-danger-hover: var(--loidolt-color-error-dark);
   --loidolt-on-danger: var(--loidolt-color-white);
   --loidolt-text-danger: var(--loidolt-color-error);
   --loidolt-success: var(--loidolt-color-success);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loidolt/theme-tokens",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Typed design tokens for Loidolt applications",
   "license": "MIT",
   "type": "module",
@@ -23,11 +23,9 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "engines": {
-    "node": ">=22"
-  },
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --clean && node scripts/generate-css.mjs",
+    "prepack": "npm run build",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "clean": "rimraf dist"