@onereach/styles 26.2.2-beta.5850.0 → 26.2.2-beta.5851.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/styles",
-  "version": "26.2.2-beta.5850.0",
+  "version": "26.2.2-beta.5851.0",
   "description": "Styles for or-ui-next",
   "license": "Apache-2.0",
   "files": [
@@ -34,7 +34,7 @@
     "lint": "stylelint '**/*.scss'"
   },
   "dependencies": {
-    "@onereach/font-icons": "^26.2.2-beta.5850.0",
+    "@onereach/font-icons": "^26.2.2-beta.5851.0",
     "tailwindcss": "3.4.16"
   },
   "devDependencies": {

package/src/variables/tokens/custom-tokens.json

@@ -0,0 +1,8 @@
+{
+  "min-button-width": "96px",
+  "confirm-dialog-width": "320px",
+  "confirm-dialog-action-width": "128px",
+  "max-select-dropdown-height": "172px",
+  "desktop-toast-width": "512px",
+  "mobile-toast-width": "343px"
+}

package/tailwind/utils.js

@@ -228,4 +228,22 @@ module.exports = {
 
     return colorMap;
   },
+
+  // Converts a flat key:value object of custom tokens into CSS variable-based references
+  // Example: { "min-button-width": "96px" } -> { "min-button-width": "var(--or-t-min-button-width, 96px)" }
+  parseCustomTokensNames(customTokens, options = {}) {
+    const { prefix = 'or-t', withFallback = true } = options;
+    const sanitizeForVar = (name) => String(name).replace(/\+/g, 'plus').replace(/\*/g, 'star');
+
+    const toVar = (varName, fallback) =>
+      withFallback && typeof fallback === 'string'
+        ? `var(--${varName}, ${fallback})`
+        : `var(--${varName})`;
+
+    return Object.entries(customTokens).reduce((preset, [name, value]) => {
+      const varName = `${prefix}-${sanitizeForVar(name)}`;
+      preset[name] = toVar(varName, value);
+      return preset;
+    }, {});
+  },
 };

package/tailwind.config.json

@@ -1,12 +1,12 @@
 {
   "theme": {
     "tokens": {
-      "min-button-width": "96px",
-      "confirm-dialog-width": "320px",
-      "confirm-dialog-action-width": "128px",
-      "max-select-dropdown-height": "172px",
-      "desktop-toast-width": "512px",
-      "mobile-toast-width": "343px"
+      "min-button-width": "var(--or-t-min-button-width, 96px)",
+      "confirm-dialog-width": "var(--or-t-confirm-dialog-width, 320px)",
+      "confirm-dialog-action-width": "var(--or-t-confirm-dialog-action-width, 128px)",
+      "max-select-dropdown-height": "var(--or-t-max-select-dropdown-height, 172px)",
+      "desktop-toast-width": "var(--or-t-desktop-toast-width, 512px)",
+      "mobile-toast-width": "var(--or-t-mobile-toast-width, 343px)"
     },
     "screens": {},
     "spacing": {

package/tailwind.config.preset.js

@@ -1,3 +1,4 @@
+const customTokens = require('./src/variables/tokens/custom-tokens.json');
 const {
   SpacePatterns: spacingTokens,
   colors: colorTokens,
@@ -30,6 +31,7 @@ const {
   parseColorTokensNames,
   parseSpacingTokensNames,
   parseBorderRadiusTokensNames,
+  parseCustomTokensNames,
 } = require('./tailwind/utils');
 
 
@@ -38,12 +40,7 @@ module.exports = {
 
   theme: {
     tokens: {
-      'min-button-width': '96px',
-      'confirm-dialog-width': '320px',
-      'confirm-dialog-action-width': '128px',
-      'max-select-dropdown-height': '172px',
-      'desktop-toast-width': '512px',
-      'mobile-toast-width': '343px',
+      ...parseCustomTokensNames(customTokens),
     },
 
     screens: {},

package/tokens-v3.css

@@ -331,4 +331,12 @@
 	--or-r-md: 4px;
 	--or-r-lg: 8px;
 	--or-r-xl: 16px;
+}
+:root {
+	--or-t-min-button-width: 96px;
+	--or-t-confirm-dialog-width: 320px;
+	--or-t-confirm-dialog-action-width: 128px;
+	--or-t-max-select-dropdown-height: 172px;
+	--or-t-desktop-toast-width: 512px;
+	--or-t-mobile-toast-width: 343px;
 }

package/tokens.css

@@ -329,4 +329,12 @@
 	--or-r-md: 4px;
 	--or-r-lg: 8px;
 	--or-r-xl: 16px;
+}
+:root {
+	--or-t-min-button-width: 96px;
+	--or-t-confirm-dialog-width: 320px;
+	--or-t-confirm-dialog-action-width: 128px;
+	--or-t-max-select-dropdown-height: 172px;
+	--or-t-desktop-toast-width: 512px;
+	--or-t-mobile-toast-width: 343px;
 }