@duro-app/tokens 0.48.0 → 0.50.0

package/dist/vars.css

@@ -0,0 +1,149 @@
+/*
+ * GENERATED by scripts/generate-vars-css.mjs — do not edit.
+ *
+ * Stable public names for the design tokens. The StyleX variables these point
+ * at carry a build-generated hash and are not a stable API; these are.
+ *
+ *   .thing { background: var(--duro-color-bg-card); }
+ *
+ * Declared on :root AND on every themed element, deliberately: a custom
+ * property resolves its var() where it is declared, so a :root-only alias
+ * would freeze the base palette and ignore the theme applied further down.
+ */
+:root,
+[data-theme] {
+  /* colors */
+  --duro-color-accent: var(--accent-xw7wp3v);
+  --duro-color-accent-contrast: var(--accentContrast-x3gzxyp);
+  --duro-color-accent-hover: var(--accentHover-x18fqoz);
+  --duro-color-bg: var(--bg-xqkwqtp);
+  --duro-color-bg-card: var(--bgCard-xj2l5r);
+  --duro-color-bg-card-hover: var(--bgCardHover-xlxk7vw);
+  --duro-color-border: var(--border-x1drj1pb);
+  --duro-color-error: var(--error-x13gdhh0);
+  --duro-color-error-bg: var(--errorBg-xrl8836);
+  --duro-color-error-border: var(--errorBorder-x1a6pjl);
+  --duro-color-error-contrast: var(--errorContrast-x1lvjkah);
+  --duro-color-error-hover: var(--errorHover-x7eyu03);
+  --duro-color-error-text: var(--errorText-xf51nwe);
+  --duro-color-info: var(--info-x97ho0r);
+  --duro-color-info-bg: var(--infoBg-xho8jir);
+  --duro-color-info-border: var(--infoBorder-xnevk3x);
+  --duro-color-info-text: var(--infoText-x19pseus);
+  --duro-color-success: var(--success-x197pe5n);
+  --duro-color-success-bg: var(--successBg-xzjukav);
+  --duro-color-success-border: var(--successBorder-x1my3ygc);
+  --duro-color-success-text: var(--successText-x46dg9e);
+  --duro-color-text: var(--text-xlpbogt);
+  --duro-color-text-muted: var(--textMuted-x651nu9);
+  --duro-color-warning: var(--warning-x1gq0pyw);
+  --duro-color-warning-bg: var(--warningBg-xtnxqss);
+  --duro-color-warning-border: var(--warningBorder-x1ev2mr5);
+  --duro-color-warning-text: var(--warningText-x1lgjghx);
+  /* radii */
+  --duro-radius-full: var(--full-x9vxdtd);
+  --duro-radius-lg: var(--lg-xwd56yl);
+  --duro-radius-md: var(--md-xx2g89g);
+  --duro-radius-sm: var(--sm-x1bhtfs5);
+  --duro-radius-xs: var(--xs-x1gb5bcy);
+  /* shadows */
+  --duro-shadow-lg: var(--lg-x1mxd62i);
+  --duro-shadow-md: var(--md-x1oyt0aw);
+  --duro-shadow-sm: var(--sm-x17hhtln);
+  /* spacing */
+  --duro-spacing-lg: var(--lg-x34mutn);
+  --duro-spacing-md: var(--md-x3pkb85);
+  --duro-spacing-ms: var(--ms-x13y09zs);
+  --duro-spacing-sm: var(--sm-xbh8y7f);
+  --duro-spacing-xl: var(--xl-xttpygj);
+  --duro-spacing-xs: var(--xs-xxfyjsd);
+  --duro-spacing-xxl: var(--xxl-xbe9eha);
+  --duro-spacing-xxxl: var(--xxxl-xroalp5);
+  /* layoutSpacing */
+  --duro-layout-spacing-container-lg: var(--containerLg-x1n6aasq);
+  --duro-layout-spacing-container-md: var(--containerMd-x170dvin);
+  --duro-layout-spacing-container-sm: var(--containerSm-x3nosus);
+  --duro-layout-spacing-inline-lg: var(--inlineLg-xz69o43);
+  --duro-layout-spacing-inline-md: var(--inlineMd-x1oalkxi);
+  --duro-layout-spacing-inline-sm: var(--inlineSm-x2o8bbf);
+  --duro-layout-spacing-inline-xs: var(--inlineXs-xq4tp4f);
+  --duro-layout-spacing-stack-lg: var(--stackLg-xeue779);
+  --duro-layout-spacing-stack-md: var(--stackMd-xhblkt4);
+  --duro-layout-spacing-stack-sm: var(--stackSm-x2rk1ut);
+  --duro-layout-spacing-stack-xl: var(--stackXl-x7sbbgu);
+  --duro-layout-spacing-stack-xs: var(--stackXs-x1qfrfo2);
+  /* typography */
+  --duro-typography-font-family: var(--fontFamily-xvrmnat);
+  --duro-typography-font-family-mono: var(--fontFamilyMono-x1bzqfky);
+  --duro-typography-font-size-heading: var(--fontSizeHeading-x1stydh2);
+  --duro-typography-font-size-lg: var(--fontSizeLg-x18ngplw);
+  --duro-typography-font-size-md: var(--fontSizeMd-xq8d99q);
+  --duro-typography-font-size-sm: var(--fontSizeSm-x1bjjs4u);
+  --duro-typography-font-size-xl: var(--fontSizeXl-x1b1mqsu);
+  --duro-typography-font-size-xs: var(--fontSizeXs-x1w5m325);
+  --duro-typography-font-weight-bold: var(--fontWeightBold-x1pjkvwg);
+  --duro-typography-font-weight-medium: var(--fontWeightMedium-xaw13ft);
+  --duro-typography-font-weight-normal: var(--fontWeightNormal-x1y1cayu);
+  --duro-typography-font-weight-semibold: var(--fontWeightSemibold-xg6c7xe);
+  --duro-typography-line-height: var(--lineHeight-x1gubzd5);
+  /* typeScale */
+  --duro-type-scale-display-lg: var(--displayLg-x6qsr1u);
+  --duro-type-scale-display-md: var(--displayMd-x1oektom);
+  --duro-type-scale-display-sm: var(--displaySm-x5inqzv);
+  --duro-type-scale-font-size1: var(--fontSize1-xx27tux);
+  --duro-type-scale-font-size2: var(--fontSize2-x5hag8h);
+  --duro-type-scale-font-size3: var(--fontSize3-x1mf6j39);
+  --duro-type-scale-font-size4: var(--fontSize4-xh0hch2);
+  --duro-type-scale-font-size5: var(--fontSize5-xcllv62);
+  --duro-type-scale-font-size6: var(--fontSize6-xo5veds);
+  --duro-type-scale-font-size7: var(--fontSize7-x1j85tz8);
+  --duro-type-scale-font-size8: var(--fontSize8-x17zhits);
+  --duro-type-scale-font-size9: var(--fontSize9-xveysf7);
+  --duro-type-scale-letter-spacing-normal: var(--letterSpacingNormal-x1ih41v1);
+  --duro-type-scale-letter-spacing-tight: var(--letterSpacingTight-xmavxfk);
+  --duro-type-scale-letter-spacing-wide: var(--letterSpacingWide-xt8z9rj);
+  --duro-type-scale-line-height1: var(--lineHeight1-x17o1wol);
+  --duro-type-scale-line-height2: var(--lineHeight2-xinpx5n);
+  --duro-type-scale-line-height3: var(--lineHeight3-x1163vpm);
+  --duro-type-scale-line-height4: var(--lineHeight4-x1y0jdbp);
+  --duro-type-scale-line-height5: var(--lineHeight5-xjln4cz);
+  --duro-type-scale-line-height6: var(--lineHeight6-x1h1b5wo);
+  --duro-type-scale-line-height7: var(--lineHeight7-xx3gx0p);
+  --duro-type-scale-line-height8: var(--lineHeight8-xk1f09j);
+  --duro-type-scale-line-height9: var(--lineHeight9-xshcxhh);
+  /* duration */
+  --duro-duration-base: var(--base-x13vs74m);
+  --duro-duration-fast: var(--fast-x8gs7zb);
+  --duro-duration-instant: var(--instant-x3tclo2);
+  --duro-duration-slow: var(--slow-xtti36c);
+  /* easing */
+  --duro-easing-ease-in: var(--easeIn-xxaysck);
+  --duro-easing-ease-out: var(--easeOut-x1dtgzac);
+  --duro-easing-standard: var(--standard-xg4ngex);
+}
+
+/*
+ * The page canvas, per theme.
+ *
+ * In @layer reset so an app that paints its own body wins without needing
+ * !important — unlayered author CSS beats layered CSS regardless of order.
+ */
+@layer reset {
+  body {
+    background-color: #0f0f0f;
+    color: #e5e5e5;
+    color-scheme: dark;
+  }
+
+  body:has([data-theme='light']) {
+    background-color: #ffffff;
+    color: #1a1a1a;
+    color-scheme: light;
+  }
+
+  body:has([data-theme='high-contrast']) {
+    background-color: #000000;
+    color: #ffffff;
+    color-scheme: dark;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/tokens",
-  "version": "0.48.0",
+  "version": "0.50.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -44,7 +44,8 @@
     "./tokens/motion.css": "./src/tokens/motion.css.ts",
     "./tokens/type-presets.css": "./src/tokens/type-presets.css.ts",
     "./themes/light.css": "./src/themes/light.css.ts",
-    "./themes/high-contrast.css": "./src/themes/high-contrast.css.ts"
+    "./themes/high-contrast.css": "./src/themes/high-contrast.css.ts",
+    "./vars.css": "./dist/vars.css"
   },
   "peerDependencies": {
     "react-strict-dom": "^0.0.55"
@@ -61,6 +62,7 @@
     "dev": "vite build --watch",
     "prebuild": "node scripts/check-token-drift.mjs",
     "build": "vite build",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "postbuild": "node scripts/generate-vars-css.mjs"
   }
 }