@bitrise/bitkit-v2 0.3.251-beta.1696 → 0.3.252-beta.1703

package/dist/theme/tokens/index.d.ts

@@ -14,140 +14,38 @@ declare const tokens: {
         };
     };
     colors: {
-        brand: {
-            purple: {
-                darkest: {
-                    value: string;
-                };
-                dark: {
-                    value: string;
-                };
-                mid: {
-                    value: string;
-                };
-                light: {
-                    value: string;
-                };
-                lightest: {
-                    value: string;
-                };
-            };
-            blue: {
-                dark: {
-                    value: string;
-                };
-                mid: {
-                    value: string;
-                };
-                light: {
-                    value: string;
-                };
-                lightest: {
-                    value: string;
-                };
-            };
-            teal: {
-                dark: {
-                    value: string;
-                };
-                mid: {
-                    value: string;
-                };
-                light: {
-                    value: string;
-                };
-                lightest: {
-                    value: string;
-                };
-            };
-            green: {
-                dark: {
-                    value: string;
-                };
-                mid: {
-                    value: string;
-                };
-                light: {
-                    value: string;
-                };
-                lightest: {
-                    value: string;
-                };
-            };
-            yellow: {
-                mid: {
-                    value: string;
-                };
-                light: {
-                    value: string;
-                };
-                lightest: {
-                    value: string;
-                };
-            };
-            orange: {
-                dark: {
-                    value: string;
-                };
-                mid: {
-                    value: string;
-                };
-                light: {
-                    value: string;
-                };
-            };
-            red: {
-                dark: {
-                    value: string;
-                };
-                mid: {
-                    value: string;
-                };
-                light: {
-                    value: string;
-                };
-            };
-            neutral: {
-                black: {
-                    value: string;
-                };
-                dark: {
-                    value: string;
-                };
-                light: {
-                    value: string;
-                };
-                white: {
-                    value: string;
-                };
-            };
-        };
         white: {
-            a0: {
+            '10': {
                 value: string;
             };
-            a10: {
+            '15': {
                 value: string;
             };
-            a15: {
+            '20': {
                 value: string;
             };
-            a20: {
+            '30': {
                 value: string;
             };
-            a30: {
+            '40': {
                 value: string;
             };
-            a50: {
+            '50': {
                 value: string;
             };
-            a80: {
+            '60': {
                 value: string;
             };
-            a90: {
+            '70': {
                 value: string;
             };
-            a100: {
+            '80': {
+                value: string;
+            };
+            '90': {
+                value: string;
+            };
+            '100': {
                 value: string;
             };
         };
@@ -188,27 +86,6 @@ declare const tokens: {
             '100': {
                 value: string;
             };
-            base: {
-                value: string;
-            };
-            bold: {
-                value: string;
-            };
-            minimal: {
-                value: string;
-            };
-            moderate: {
-                value: string;
-            };
-            muted: {
-                value: string;
-            };
-            strong: {
-                value: string;
-            };
-            subtle: {
-                value: string;
-            };
         };
         purple: {
             '10': {
@@ -244,27 +121,6 @@ declare const tokens: {
             '95': {
                 value: string;
             };
-            base: {
-                value: string;
-            };
-            bold: {
-                value: string;
-            };
-            minimal: {
-                value: string;
-            };
-            moderate: {
-                value: string;
-            };
-            muted: {
-                value: string;
-            };
-            strong: {
-                value: string;
-            };
-            subtle: {
-                value: string;
-            };
         };
         indigo: {
             '10': {
@@ -300,33 +156,6 @@ declare const tokens: {
             '95': {
                 value: string;
             };
-            base: {
-                value: string;
-            };
-            bold: {
-                value: string;
-            };
-            dark: {
-                value: string;
-            };
-            emphasized: {
-                value: string;
-            };
-            minimal: {
-                value: string;
-            };
-            moderate: {
-                value: string;
-            };
-            muted: {
-                value: string;
-            };
-            strong: {
-                value: string;
-            };
-            subtle: {
-                value: string;
-            };
         };
         red: {
             '10': {
@@ -362,27 +191,6 @@ declare const tokens: {
             '95': {
                 value: string;
             };
-            base: {
-                value: string;
-            };
-            bold: {
-                value: string;
-            };
-            minimal: {
-                value: string;
-            };
-            moderate: {
-                value: string;
-            };
-            muted: {
-                value: string;
-            };
-            strong: {
-                value: string;
-            };
-            subtle: {
-                value: string;
-            };
         };
         orange: {
             '10': {
@@ -418,27 +226,6 @@ declare const tokens: {
             '95': {
                 value: string;
             };
-            base: {
-                value: string;
-            };
-            bold: {
-                value: string;
-            };
-            minimal: {
-                value: string;
-            };
-            moderate: {
-                value: string;
-            };
-            muted: {
-                value: string;
-            };
-            strong: {
-                value: string;
-            };
-            subtle: {
-                value: string;
-            };
         };
         yellow: {
             '10': {
@@ -474,27 +261,6 @@ declare const tokens: {
             '95': {
                 value: string;
             };
-            base: {
-                value: string;
-            };
-            bold: {
-                value: string;
-            };
-            minimal: {
-                value: string;
-            };
-            moderate: {
-                value: string;
-            };
-            muted: {
-                value: string;
-            };
-            strong: {
-                value: string;
-            };
-            subtle: {
-                value: string;
-            };
         };
         green: {
             '10': {
@@ -530,27 +296,6 @@ declare const tokens: {
             '95': {
                 value: string;
             };
-            base: {
-                value: string;
-            };
-            bold: {
-                value: string;
-            };
-            minimal: {
-                value: string;
-            };
-            moderate: {
-                value: string;
-            };
-            muted: {
-                value: string;
-            };
-            strong: {
-                value: string;
-            };
-            subtle: {
-                value: string;
-            };
         };
         turquoise: {
             '10': {
@@ -586,27 +331,6 @@ declare const tokens: {
             '95': {
                 value: string;
             };
-            base: {
-                value: string;
-            };
-            bold: {
-                value: string;
-            };
-            minimal: {
-                value: string;
-            };
-            moderate: {
-                value: string;
-            };
-            muted: {
-                value: string;
-            };
-            strong: {
-                value: string;
-            };
-            subtle: {
-                value: string;
-            };
         };
         blue: {
             '10': {
@@ -642,27 +366,6 @@ declare const tokens: {
             '95': {
                 value: string;
             };
-            base: {
-                value: string;
-            };
-            bold: {
-                value: string;
-            };
-            minimal: {
-                value: string;
-            };
-            moderate: {
-                value: string;
-            };
-            muted: {
-                value: string;
-            };
-            strong: {
-                value: string;
-            };
-            subtle: {
-                value: string;
-            };
         };
     };
     durations: {

package/dist/theme/tokens/index.js

@@ -1,5 +1,5 @@
-import colors from "./colors.js";
 import animations from "./animations.js";
+import colors from "./colors.js";
 import durations from "./durations.js";
 import easings from "./easings.js";
 import fonts from "./fonts.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.251-beta.1696",
+  "version": "0.3.252-beta.1703",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",
@@ -15,6 +15,7 @@
     "dist",
     "docs",
     "scripts/postinstall.cjs",
+    "scripts/prune-color-tokens.cjs",
     "AGENTS.md",
     "README.md",
     "package.json"
@@ -40,7 +41,7 @@
     "build": "vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "theme:generate-types": "chakra typegen lib/theme/index.ts",
+    "theme:generate-types": "chakra typegen lib/theme/index.ts && node ./scripts/prune-color-tokens.cjs",
     "theme:watch": "chakra typegen lib/theme/index.ts --watch",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -74,10 +75,10 @@
     "@figma-export/output-components-as-svg": "^6.4.0",
     "@figma-export/transform-svg-with-svgo": "^6.4.0",
     "@google-cloud/storage": "^7.21.0",
-    "@storybook/addon-docs": "^10.4.2",
+    "@storybook/addon-docs": "^10.4.3",
     "@storybook/addon-mcp": "^0.6.0",
     "@storybook/mcp": "^0.7.0",
-    "@storybook/react-vite": "^10.4.2",
+    "@storybook/react-vite": "^10.4.3",
     "@svgr/plugin-jsx": "^8.1.0",
     "@types/node": "^24.13.1",
     "@types/react": "^18.3.31",
@@ -86,7 +87,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "release-it": "^20.2.0",
-    "storybook": "^10.4.2",
+    "storybook": "^10.4.3",
     "tsx": "^4.22.4",
     "typescript": "^6.0.3",
     "vite": "^8.0.16",

package/scripts/postinstall.cjs

@@ -33,6 +33,14 @@ if (result.status !== 0) {
     '[@bitrise/bitkit-v2] Chakra typegen failed — bitkit-specific theme types are unavailable. ' +
       'You can retry manually with `npx chakra typegen node_modules/@bitrise/bitkit-v2/dist/theme/index.js`.',
   );
+  process.exit(0);
+}
+
+// Trim internal color tokens (sys/*, primitives) from style-prop autocomplete.
+try {
+  require('./prune-color-tokens.cjs');
+} catch (error) {
+  console.warn(`[@bitrise/bitkit-v2] Color-token prune skipped: ${error.message}`);
 }
 
 process.exit(0);

package/scripts/prune-color-tokens.cjs

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+
+/*
+ * Post-processes the Chakra-generated `token.gen.d.ts` to keep the color-token
+ * autocomplete focused on usable tokens.
+ *
+ * Bitkit registers three layers of color tokens, but only one should be offered
+ * in style-prop autocomplete (`color`, `background`, …):
+ *   - core/primitive palette (`red.50`, `white.10`, …)  -> internal, hide
+ *   - `sys/*` system layer                               -> internal, hide
+ *   - everything else (`color/*`, `background/*`, …)     -> keep
+ *
+ * The tokens still exist and resolve at runtime (references, recipes); we only
+ * trim the `ColorsToken` union that drives editor suggestions. `strictTokens`
+ * is off, so hidden tokens are not errors if used directly — just not suggested.
+ *
+ * Runs after `chakra typegen` (locally via `theme:generate-types`, and in
+ * consumer repos via this package's postinstall). Idempotent.
+ */
+
+const { existsSync, readFileSync, writeFileSync } = require('node:fs');
+const { dirname, resolve } = require('node:path');
+
+const PRIMITIVE_SCALES = ['white', 'neutral', 'purple', 'indigo', 'red', 'orange', 'yellow', 'green', 'turquoise', 'blue'];
+const PRIMITIVE_DOT = new RegExp(`^(${PRIMITIVE_SCALES.join('|')})\\.`);
+
+const isHidden = (token) => token.startsWith('sys/') || PRIMITIVE_DOT.test(token);
+
+function resolveTokenGenPath() {
+  try {
+    const pkg = require.resolve('@chakra-ui/react/package.json');
+    return resolve(dirname(pkg), 'dist/types/styled-system/generated/token.gen.d.ts');
+  } catch {
+    return null;
+  }
+}
+
+function prune() {
+  const filePath = resolveTokenGenPath();
+  if (!filePath || !existsSync(filePath)) {
+    console.warn('[@bitrise/bitkit-v2] token.gen.d.ts not found — skipping color-token prune.');
+    return;
+  }
+
+  const lines = readFileSync(filePath, 'utf8').split('\n');
+  let inColorsToken = false;
+  let dropped = 0;
+  const out = [];
+
+  for (const line of lines) {
+    if (line.startsWith('export type ColorsToken')) {
+      inColorsToken = true;
+      out.push(line);
+      continue;
+    }
+    if (inColorsToken) {
+      // Allow an optional trailing `;` so the final union member is matched too,
+      // regardless of how the generator terminates the type.
+      const match = line.match(/^\s*\|\s*"(.+)"\s*;?\s*$/);
+      if (match) {
+        if (isHidden(match[1])) {
+          dropped += 1;
+          continue;
+        }
+        out.push(line);
+        continue;
+      }
+      // First line that is not a union member ends the ColorsToken block.
+      inColorsToken = false;
+    }
+    out.push(line);
+  }
+
+  writeFileSync(filePath, out.join('\n'));
+  console.log(`[@bitrise/bitkit-v2] Pruned ${dropped} internal color tokens (sys/*, primitives) from autocomplete.`);
+}
+
+prune();