@loidolt/theme-tokens 0.3.0 → 0.5.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;
@@ -44,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;

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;

package/dist/index.d.ts

@@ -129,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;
@@ -182,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";
@@ -324,6 +327,7 @@ declare const tokens: {
         readonly surface: string;
         readonly surfaceAlt: string;
         readonly surfaceSunken: string;
+        readonly surfacePaper: string;
         readonly surfaceInverse: string;
         readonly surfaceInput: string;
         readonly text: string;
@@ -360,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";

package/dist/index.js

@@ -93,6 +93,8 @@ var semanticDefs = {
   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"),
@@ -179,6 +181,7 @@ var darkSemantic = {
   surface: "#1e211c",
   surfaceAlt: "#24271f",
   surfaceSunken: "#101210",
+  surfacePaper: "#ffffff",
   surfaceInverse: "#ebe7dc",
   surfaceInput: "#24271f",
   text: "#ebe7dc",

package/dist/tokens.css

@@ -75,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);

package/package.json

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