@onereach/styles 25.3.6 → 25.3.7-beta.5823.0

package/README.md

@@ -1,152 +0,0 @@
-# 💅 Onereach styles for components.
-
-## 🎯 Install
-```sh
-$ yarn add @onereach/styles
-$ npm install @onereach/styles --save
-```
-
-## 🛠️ Develop
-```sh
-$ pnpm dev
-```
-
-## 🛠️ How to generate tokens?
-1. Modified `src/mock/design-tokens.json`
-2. Run:
-```shell
-$ pnpm build
-```
-#### Will update:
-**SCSS**: `src/variables/tokens/design-tokens.scss`
-#### design-tokens.json (mock)
-```json
-{
-  "spacings": {
-    "level-0": 0,
-    "level-1": 2,
-    "level-2": 4,
-    "level-3": 8,
-    "level-4": 16,
-    "level-5": 24,
-    "level-6": 32,
-    "level-7": 48,
-    "level-8": 64,
-    "level-9": 128
-  },
-  "typography": {
-    "font-sizes": {
-      "level-0": 12,
-      "level-1": 14,
-      "level-2": 18,
-      "level-3": 22
-    },
-    "font-weights": {
-      "level-0": 400,
-      "level-1": 600,
-      "level-2": 700
-    },
-    "line-heights": {
-      "level-0": 18,
-      "level-1": 21,
-      "level-2": 26
-    }
-  },
-  "transition": {
-    "function": "cubic-bezier(0.12, 0.39, 0.5, 0.93)",
-    "time": "0.25s"
-  },
-  "themes": {
-    "light": {
-      "primary": "#178ae7",
-      "error": "#da1e28",
-      "warning": "#f0d10d",
-      "success": "#4ec00f",
-      "neutral-0": "#fff",
-      "neutral-1": "#f6f6f6",
-      "neutral-2": "#dfdfdf",
-      "neutral-3": "#c6c6c6",
-      "neutral-4": "#91969d",
-      "neutral-5": "#6c747d",
-      "neutral-6": "#1e232b",
-      "body-bg": "#fff",
-      "white": "#fff",
-      "black": "#000"
-    },
-    "dark": {
-      "primary": "#c94277",
-      "error": "#2f0a28",
-      "warning": "#A27E6F",
-      "success": "#cadbc0",
-      "neutral-0": "#A27E6F",
-      "neutral-1": "#9F7366",
-      "neutral-2": "#94524A",
-      "neutral-3": "#7B4042",
-      "neutral-4": "#622E39",
-      "neutral-5": "#491C31",
-      "neutral-6": "#B6AD98",
-      "c-body-bg": "#fff",
-      "white": "#fff",
-      "black": "#000"
-    },
-    "custom": {
-      "primary": "rgb(236, 0, 140)",
-      "error": "rgb(232, 17, 35)",
-      "warning": "rgb(255, 241, 0)",
-      "success": "rgb(186, 216, 10)",
-      "neutral-0": "rgb(255, 140, 0)",
-      "neutral-1": "rgb(236, 0, 140)",
-      "neutral-2": "rgb(104, 33, 122)",
-      "neutral-3": "rgb(0, 24, 143)",
-      "neutral-4": "rgb(0, 188, 242)",
-      "neutral-5": "rgb(0, 178, 148)",
-      "neutral-6": "rgb(0, 158, 73)",
-      "c-body-bg": "#fff",
-      "white": "#fff",
-      "black": "#000"
-    }
-  }
-}
-```
-## 🛠️ How to add a new theme and generate CSS variables for that:
-1. Nowadays you should add to the mock design-tokens.json in object theme colors.
-```json
-"spacings": {...}
-"typography": {...}
-"transition": {...}
-"themes": {
-    "light": {...},
-    "dark": {...},
-    "custom": {...}
-    "custom-new": {
-      "primary": "rgb(236, 0, 140)",
-      "error": "rgb(232, 17, 35)",
-      "warning": "rgb(255, 241, 0)",
-      "success": "rgb(186, 216, 10)",
-      "neutral-0": "rgb(255, 140, 0)",
-      "neutral-1": "rgb(236, 0, 140)",
-      "neutral-2": "rgb(104, 33, 122)",
-      "neutral-3": "rgb(0, 24, 143)",
-      "neutral-4": "rgb(0, 188, 242)",
-      "neutral-5": "rgb(0, 178, 148)",
-      "neutral-6": "rgb(0, 158, 73)",
-      "c-body-bg": "#fff",
-      "white": "#fff",
-      "black": "#000"
-    }
-  }
-```
-2. Generate CSS variables. _**Run:**_
-```shell
-$ pnpm build
-```
-3. How to change theme. Example in OrThemeSwitcherExample.vue
-## 🚀 Usage in JS:
-### Don't forget that you need style loaders.
-#### Webpack: https://webpack.js.org/loaders/sass-loader
-### Global styles:
-```js
-import '@onereach/styles';
-// or
-import '@onereach/styles/src/main.scss';
-```

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@onereach/styles",
-  "version": "25.3.6",
+  "version": "25.3.7-beta.5823.0",
   "description": "Styles for or-ui-next",
   "license": "Apache-2.0",
-  "main": "./main.css",
-  "unpkg": "./main.css",
-  "style": "./main.css",
   "files": [
     "dist",
     "icons",
@@ -15,7 +12,6 @@
     "font.css",
     "legacy-ui-warning.scss",
     "main-v3.css",
-    "main.css",
     "preflight-revert.css",
     "rollup-plugin-tailwindcss-cli.css",
     "scrollbar.css",
@@ -29,28 +25,19 @@
     "screens.json"
   ],
   "scripts": {
-    "dev": "pnpm build:scss -- --watch",
-    "build": "npm-run-all build:tokens build:scss build:autoprefixer build:cleancss build:tokens:css build:tokens:css:v3 build:resolve-config",
-    "build:scss": "sass --embed-source-map ./src/main.scss dist/index.css",
-    "build:cleancss": "cleancss -o dist/index.min.css dist/index.css",
-    "build:autoprefixer": "npx postcss --use autoprefixer --map false --output dist/index.css dist/index.css",
-    "build:tokens": "pnpm json-to-scss",
+    "build": "npm-run-all build:tokens:css build:tokens:css:v3 build:resolve-config",
+    "build:resolve-config": "node ./scripts/resolveConfig.js",
     "build:tokens:css": "node ./utils/makeCssVaribales.js",
     "build:tokens:css:v3": "node ./utils/makeCssVariablesV3.js",
-    "build:resolve-config": "node ./scripts/resolveConfig.js",
-    "lint": "stylelint '**/*.scss'",
-    "fix": "stylelint --fix '**/*.scss'",
     "clean": "rimraf dist",
-    "json-to-scss": "json-to-scss mock/design-tokens.json src/variables/tokens"
+    "fix": "stylelint --fix '**/*.scss'",
+    "lint": "stylelint '**/*.scss'"
   },
   "dependencies": {
-    "@onereach/font-icons": "^25.3.6",
+    "@onereach/font-icons": "^25.3.7-beta.5823.0",
     "tailwindcss": "3.4.16"
   },
   "devDependencies": {
-    "autoprefixer": "^10.2.5",
-    "clean-css-cli": "^5.2.2",
-    "json-to-scss": "^1.6.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.27",
     "postcss-cli": "^10.1.0",
@@ -60,6 +47,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "d6853de2849ea84f0e97a502cf5c40e93ca4de2d"
+  }
 }

package/tailwind/utils.js

@@ -12,6 +12,32 @@ module.exports = {
       }), {});
   },
 
+  parseSpacingTokensNames(designTokens, options = {}) {
+    const { prefix = 'or-s', includeStar = true, withFallback = false } = options;
+    const toVar = (varName, fallback) =>
+      withFallback && typeof fallback === 'string'
+        ? `var(--${varName}, ${fallback})`
+        : `var(--${varName})`;
+
+    return Object.values(designTokens).reduce((preset, { name, value }) => {
+      const varName = `${prefix}-${name}`;
+
+      if (name === 'none') {
+        preset['0'] = toVar(varName, value);
+        if (includeStar) {
+          preset['0*'] = `calc(${toVar(varName, value)} - 1px)`;
+        }
+      } else {
+        preset[name] = toVar(varName, value);
+        if (includeStar) {
+          preset[`${name}*`] = `calc(${toVar(varName, value)} - 1px)`;
+        }
+      }
+
+      return preset;
+    }, {});
+  },
+
   parseColorTokens(designTokens, colorGroups) {
     const isBackground = (name) => /\b(?:container|background|surface)\b/.test(name) && !isText(name);
     const isText = (name) => /\b(?:on)\b/.test(name);