bch-style-dictionary 0.0.0

package/README.md

@@ -0,0 +1,15 @@
+# Basic Style Dictionary
+
+This example code is bare-bones to show you what this framework can do. If you have the style-dictionary module installed globally, you can `cd` into this directory and run:
+
+```bash
+npx style-dictionary build
+```
+
+Otherwise, install Style Dictionary locally for this project first, `cd` into this directory and run:
+
+```bash
+npm init -y && npm install style-dictionary
+```
+
+and then run the above command.

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "bch-style-dictionary",
+  "version": "0.0.0",
+  "files": [
+    "tokens/converted/"
+  ],
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "node build.js",
+    "figma:archive": "node tools/token-archivist.js",
+    "figma:clean": "node tools/token-cleaner.js",
+    "figma:split": "node tools/token-splitter.js",
+    "core-styles:create": "node tools/core-styles-creator.js",
+    "decision-tokens:create": "node tools/decision-tokens-creator.js",
+    "web-tokens:create": "node tools/web-tokens-creator.js",
+    "core-web-tokens:create": "node tools/core-web-tokens-creator.js",
+    "library-tokens:create": "node tools/library-tokens-creator.js",
+    "summary-tokens:create": "node tools/summary-tokens-creator.js",
+    "all-tokens:create": "node tools/all-tokens-creator.js",
+    "design-tokens:create": "node tools/design-tokens-creator.js",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "lint": "ng lint"
+  },
+  "packageManager": "npm@11.9.0",
+  "devDependencies": {
+    "@types/node": "^25.7.0",
+    "style-dictionary": "^5.4.0"
+  }
+}

package/tokens/converted/all.scss

@@ -0,0 +1,20 @@
+@use "color-dark";
+@use "color-light";
+@use "color";
+@use "spacing";
+
+@mixin bch-design-language {
+  :root {
+    // color dark tokens
+    @include color-dark.tokens;
+
+    // color light tokens
+    @include color-light.tokens;
+
+    // color tokens
+    @include color.tokens;
+
+    // spacing tokens
+    @include spacing.tokens;
+  }
+}

package/tokens/converted/color/color-background.scss

@@ -0,0 +1,3 @@
+$background-color-primary: var(--bch-decision-color-background-background-color-primary);
+
+$background-color-secondary: var(--bch-decision-color-background-background-color-secondary);

package/tokens/converted/color/color-text.scss

@@ -0,0 +1,9 @@
+/**
+ * Primary color for text
+ */
+$text-color-primary: var(--bch-decision-color-text-text-color-primary);
+
+/**
+ * Secondary color for text
+ */
+$text-color-secondary: var(--bch-decision-color-text-text-color-secondary);

package/tokens/converted/color/core-color.scss

@@ -0,0 +1,8 @@
+$color-white: var(--bch-core-color-color-white);
+$color-black: var(--bch-core-color-color-black);
+$color-neutral-300: var(--bch-core-color-color-neutral-300);
+$color-neutral-600: var(--bch-core-color-color-neutral-600);
+$color-neutral-900: var(--bch-core-color-color-neutral-900);
+$color-blue-300: var(--bch-core-color-color-blue-300);
+$color-blue-600: var(--bch-core-color-color-blue-600);
+$color-blue-900: var(--bch-core-color-color-blue-900);

package/tokens/converted/color-dark.scss

@@ -0,0 +1,7 @@
+@use "./src/color/web/dark/color-background";
+@use "./src/color/web/dark/color-text";
+
+@mixin tokens {
+  @include color-background.tokens;
+  @include color-text.tokens;
+}

package/tokens/converted/color-light.scss

@@ -0,0 +1,7 @@
+@use "./src/color/web/light/color-background";
+@use "./src/color/web/light/color-text";
+
+@mixin tokens {
+  @include color-background.tokens;
+  @include color-text.tokens;
+}

package/tokens/converted/color.scss

@@ -0,0 +1,5 @@
+@use "./src/color/web/core-color";
+
+@mixin tokens {
+  @include core-color.tokens;
+}

package/tokens/converted/spacing/core-spacing.scss

@@ -0,0 +1,6 @@
+$spacing-spacing-2: var(--bch-core-spacing-spacing-spacing-2);
+$spacing-spacing-5: var(--bch-core-spacing-spacing-spacing-5);
+$spacing-spacing-10: var(--bch-core-spacing-spacing-spacing-10);
+$spacing-spacing-15: var(--bch-core-spacing-spacing-spacing-15);
+$spacing-spacing-20: var(--bch-core-spacing-spacing-spacing-20);
+$spacing-spacing-25: var(--bch-core-spacing-spacing-spacing-25);

package/tokens/converted/spacing/spacing-box.scss

@@ -0,0 +1,29 @@
+/**
+ * 2 px spacing for boxex
+ */
+$spacing-box-xs: var(--bch-decision-spacing-box-spacing-box-xs);
+
+/**
+ * 5 px spacing for boxex
+ */
+$spacing-box-s: var(--bch-decision-spacing-box-spacing-box-s);
+
+/**
+ * 10 px spacing for boxex
+ */
+$spacing-box-m: var(--bch-decision-spacing-box-spacing-box-m);
+
+/**
+ * 15 px spacing for boxex
+ */
+$spacing-box-l: var(--bch-decision-spacing-box-spacing-box-l);
+
+/**
+ * 20 px spacing for boxex
+ */
+$spacing-box-xl: var(--bch-decision-spacing-box-spacing-box-xl);
+
+/**
+ * 25 px spacing for boxex
+ */
+$spacing-box-xxl: var(--bch-decision-spacing-box-spacing-box-xxl);

package/tokens/converted/spacing.scss

@@ -0,0 +1,7 @@
+@use "./src/spacing/web/core-spacing";
+@use "./src/spacing/web/spacing-box";
+
+@mixin tokens {
+  @include core-spacing.tokens;
+  @include spacing-box.tokens;
+}

package/tokens/converted/src/color/raw/_core-color.scss

@@ -0,0 +1,8 @@
+$color-white: #ffffff;
+$color-black: #000000;
+$color-neutral-300: #333333;
+$color-neutral-600: #666666;
+$color-neutral-900: #999999;
+$color-blue-300: #3333ff;
+$color-blue-600: #6666ff;
+$color-blue-900: #9999ff;

package/tokens/converted/src/color/raw/decision/dark/_decision-color-background.scss

@@ -0,0 +1,11 @@
+/** Design Language Configuration
+ * Do not use directly in project
+ * @access private
+ */
+
+@use "../../core-color";
+
+$background-color-primary: core-color.$color-white;
+
+$background-color-secondary: core-color.$color-black;
+

package/tokens/converted/src/color/raw/decision/dark/_decision-color-text.scss

@@ -0,0 +1,17 @@
+/** Design Language Configuration
+ * Do not use directly in project
+ * @access private
+ */
+
+@use "../../core-color";
+
+/**
+ * Primary color for text
+ */
+$text-color-primary: core-color.$color-neutral-300;
+
+/**
+ * Secondary color for text
+ */
+$text-color-secondary: core-color.$color-neutral-900;
+

package/tokens/converted/src/color/raw/decision/light/_decision-color-background.scss

@@ -0,0 +1,11 @@
+/** Design Language Configuration
+ * Do not use directly in project
+ * @access private
+ */
+
+@use "../../core-color";
+
+$background-color-primary: core-color.$color-black;
+
+$background-color-secondary: core-color.$color-white;
+

package/tokens/converted/src/color/raw/decision/light/_decision-color-text.scss

@@ -0,0 +1,17 @@
+/** Design Language Configuration
+ * Do not use directly in project
+ * @access private
+ */
+
+@use "../../core-color";
+
+/**
+ * Primary color for text
+ */
+$text-color-primary: core-color.$color-neutral-900;
+
+/**
+ * Secondary color for text
+ */
+$text-color-secondary: core-color.$color-neutral-300;
+

package/tokens/converted/src/color/web/core-color.scss

@@ -0,0 +1,12 @@
+@use "../raw/core-color";
+
+@mixin tokens {
+  --bch-core-color-color-white: #{core-color.$color-white};
+  --bch-core-color-color-black: #{core-color.$color-black};
+  --bch-core-color-color-neutral-300: #{core-color.$color-neutral-300};
+  --bch-core-color-color-neutral-600: #{core-color.$color-neutral-600};
+  --bch-core-color-color-neutral-900: #{core-color.$color-neutral-900};
+  --bch-core-color-color-blue-300: #{core-color.$color-blue-300};
+  --bch-core-color-color-blue-600: #{core-color.$color-blue-600};
+  --bch-core-color-color-blue-900: #{core-color.$color-blue-900};
+}

package/tokens/converted/src/color/web/dark/color-background.scss

@@ -0,0 +1,7 @@
+@use "../../raw/decision/dark/decision-color-background";
+
+@mixin tokens {
+  --bch-decision-color-background-background-color-primary: #{decision-color-background.$background-color-primary};
+
+  --bch-decision-color-background-background-color-secondary: #{decision-color-background.$background-color-secondary};
+}

package/tokens/converted/src/color/web/dark/color-text.scss

@@ -0,0 +1,13 @@
+@use "../../raw/decision/dark/decision-color-text";
+
+@mixin tokens {
+  /**
+   * Primary color for text
+   */
+  --bch-decision-color-text-text-color-primary: #{decision-color-text.$text-color-primary};
+
+  /**
+   * Secondary color for text
+   */
+  --bch-decision-color-text-text-color-secondary: #{decision-color-text.$text-color-secondary};
+}

package/tokens/converted/src/color/web/light/color-background.scss

@@ -0,0 +1,7 @@
+@use "../../raw/decision/light/decision-color-background";
+
+@mixin tokens {
+  --bch-decision-color-background-background-color-primary: #{decision-color-background.$background-color-primary};
+
+  --bch-decision-color-background-background-color-secondary: #{decision-color-background.$background-color-secondary};
+}

package/tokens/converted/src/color/web/light/color-text.scss

@@ -0,0 +1,13 @@
+@use "../../raw/decision/light/decision-color-text";
+
+@mixin tokens {
+  /**
+   * Primary color for text
+   */
+  --bch-decision-color-text-text-color-primary: #{decision-color-text.$text-color-primary};
+
+  /**
+   * Secondary color for text
+   */
+  --bch-decision-color-text-text-color-secondary: #{decision-color-text.$text-color-secondary};
+}

package/tokens/converted/src/spacing/raw/_core-spacing.scss

@@ -0,0 +1,6 @@
+$spacing-spacing-2: 2;
+$spacing-spacing-5: 5;
+$spacing-spacing-10: 10;
+$spacing-spacing-15: 15;
+$spacing-spacing-20: 20;
+$spacing-spacing-25: 25;

package/tokens/converted/src/spacing/raw/decision/_decision-spacing-box.scss

@@ -0,0 +1,37 @@
+/** Design Language Configuration
+ * Do not use directly in project
+ * @access private
+ */
+
+@use "../core-spacing";
+
+/**
+ * 2 px spacing for boxex
+ */
+$spacing-box-xs: core-spacing.$spacing-spacing-2;
+
+/**
+ * 5 px spacing for boxex
+ */
+$spacing-box-s: core-spacing.$spacing-spacing-5;
+
+/**
+ * 10 px spacing for boxex
+ */
+$spacing-box-m: core-spacing.$spacing-spacing-10;
+
+/**
+ * 15 px spacing for boxex
+ */
+$spacing-box-l: core-spacing.$spacing-spacing-15;
+
+/**
+ * 20 px spacing for boxex
+ */
+$spacing-box-xl: core-spacing.$spacing-spacing-20;
+
+/**
+ * 25 px spacing for boxex
+ */
+$spacing-box-xxl: core-spacing.$spacing-spacing-25;
+

package/tokens/converted/src/spacing/web/core-spacing.scss

@@ -0,0 +1,10 @@
+@use "../raw/core-spacing";
+
+@mixin tokens {
+  --bch-core-spacing-spacing-spacing-2: #{core-spacing.$spacing-spacing-2};
+  --bch-core-spacing-spacing-spacing-5: #{core-spacing.$spacing-spacing-5};
+  --bch-core-spacing-spacing-spacing-10: #{core-spacing.$spacing-spacing-10};
+  --bch-core-spacing-spacing-spacing-15: #{core-spacing.$spacing-spacing-15};
+  --bch-core-spacing-spacing-spacing-20: #{core-spacing.$spacing-spacing-20};
+  --bch-core-spacing-spacing-spacing-25: #{core-spacing.$spacing-spacing-25};
+}

package/tokens/converted/src/spacing/web/spacing-box.scss

@@ -0,0 +1,33 @@
+@use "../raw/decision/decision-spacing-box";
+
+@mixin tokens {
+  /**
+   * 2 px spacing for boxex
+   */
+  --bch-decision-spacing-box-spacing-box-xs: #{decision-spacing-box.$spacing-box-xs};
+
+  /**
+   * 5 px spacing for boxex
+   */
+  --bch-decision-spacing-box-spacing-box-s: #{decision-spacing-box.$spacing-box-s};
+
+  /**
+   * 10 px spacing for boxex
+   */
+  --bch-decision-spacing-box-spacing-box-m: #{decision-spacing-box.$spacing-box-m};
+
+  /**
+   * 15 px spacing for boxex
+   */
+  --bch-decision-spacing-box-spacing-box-l: #{decision-spacing-box.$spacing-box-l};
+
+  /**
+   * 20 px spacing for boxex
+   */
+  --bch-decision-spacing-box-spacing-box-xl: #{decision-spacing-box.$spacing-box-xl};
+
+  /**
+   * 25 px spacing for boxex
+   */
+  --bch-decision-spacing-box-spacing-box-xxl: #{decision-spacing-box.$spacing-box-xxl};
+}