orbit-ds-variables 1.0.0

package/README.md

@@ -0,0 +1,174 @@
+# Orbit Personal Tokens
+
+Design tokens exported from Figma (`tokens.json`), built with [Style Dictionary](https://styledictionary.com/) and [@tokens-studio/sd-transforms](https://www.npmjs.com/package/@tokens-studio/sd-transforms) into **SCSS variables**, **CSS custom properties**, and **Tailwind maps** for colors and platform tokens.
+
+Semantic theme colors keep their **links** to primitives (e.g. `{Green.400}` → `$green-400` / `var(--green-400)`).
+
+## Quick start (developers)
+
+Clone the repo and use the pre-built files in `dist/` — no build step required:
+
+```bash
+git clone https://github.com/divyanshutomar78/Orbit-Personal-Tokens.git
+# import from dist/scss, dist/css, or dist/tailwind in your app
+```
+
+To rebuild locally (optional):
+
+```bash
+npm install
+npm run build:tokens
+```
+
+Source of truth: `tokens.json` (Figma / Tokens Studio export).
+
+Generated output lives in `dist/` (updated automatically by GitHub Actions when `tokens.json` changes):
+
+| Output | Path | Notes |
+|--------|------|--------|
+| Primitive SCSS | `dist/scss/primitives/_variables.scss` | Hex values |
+| Theme SCSS | `dist/scss/themes/<theme>/_variables.scss` | References primitive `$variables` |
+| Primitive CSS | `dist/css/primitives/variables.css` | `:root` custom properties |
+| Theme CSS | `dist/css/themes/<theme>/variables.css` | `var(--primitive)` references |
+| Theme CSS bundle | `dist/css/themes/<theme>/index.css` | Imports primitives + theme |
+| Tailwind colors | `dist/tailwind/themes/<theme>/colors.js` | Nested object, `var(--*)` for aliases |
+| Platform SCSS | `dist/scss/platforms/<platform>/_variables.scss` | Spacing, radius, font, components |
+| Platform CSS | `dist/css/platforms/<platform>/variables.css` | `:root` custom properties |
+| Platform Tailwind | `dist/tailwind/platforms/<platform>/tokens.js` | Full nested token tree |
+| Platform Tailwind theme | `dist/tailwind/platforms/<platform>/theme.js` | Mapped to `theme.extend` keys |
+| Barrel files | `dist/scss/_index.scss`, `dist/tailwind/index.js` | Re-exports all sets |
+
+**Color themes:** `d-green`, `n-green`, `n-grey`, `n-blue`, `d-grey`
+
+**Platforms:** `web`, `desktop`, `ipad`
+
+## Usage
+
+### SCSS
+
+Import primitives before a theme so aliases resolve:
+
+```scss
+@use 'path/to/dist/scss/primitives/variables' as primitives;
+@use 'path/to/dist/scss/themes/d-green/variables' as theme;
+```
+
+Or forward everything:
+
+```scss
+@use 'path/to/dist/scss/index';
+```
+
+### CSS / Tailwind v4
+
+Load primitive CSS variables first, then the theme (or use the bundled `index.css`):
+
+```css
+@import "path/to/dist/css/themes/d-green/index.css";
+```
+
+Tailwind v4 `@theme` example:
+
+```css
+@import "tailwindcss";
+@import "../dist/css/primitives/variables.css";
+@import "../dist/css/themes/d-green/variables.css";
+```
+
+Tailwind v3 `theme.extend` from generated JS:
+
+```js
+import colors from './dist/tailwind/themes/d-green/colors.js';
+
+export default {
+  theme: {
+    extend: { colors },
+  },
+};
+```
+
+Import `dist/css/primitives/variables.css` in your app so `var(--green-400)` tokens resolve.
+
+### Platform tokens
+
+SCSS:
+
+```scss
+@use 'path/to/dist/scss/platforms/web/variables' as web;
+// web.$gap-m, web.$radius-s, web.$font-font-size-body, etc.
+```
+
+Tailwind v3 — use the pre-mapped `theme.js` for `theme.extend`:
+
+```js
+import webTheme from './dist/tailwind/platforms/web/theme.js';
+
+export default {
+  theme: {
+    extend: webTheme,
+  },
+};
+```
+
+Or import the full nested tree from `tokens.js`:
+
+```js
+import webPlatform from './dist/tailwind/platforms/web/tokens.js';
+```
+
+Load platform CSS variables in your app:
+
+```css
+@import "path/to/dist/css/platforms/web/variables.css";
+```
+
+## How it works
+
+1. **`scripts/split-tokens.mjs`** — splits `tokens.json` into `tokens/*.json` per Figma collection (gitignored; recreated on each build).
+2. **`scripts/build-tokens.mjs`** — runs Style Dictionary per set:
+   - **Color primitives** — single source file.
+   - **Color themes** — primitives + theme sources (for alias resolution), output filtered to theme tokens only.
+   - **Platforms** — Web, Desktop, iPad spacing, radius, typography, and component tokens.
+3. **`outputReferences: true`** — SCSS/CSS keep aliases; Tailwind formats emit `var(--token-name)` for linked values.
+
+## Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run build:tokens` | Split + build all platforms |
+| `npm run split:tokens` | Split `tokens.json` only |
+
+## GitHub automation
+
+When `tokens.json` is pushed to `main`, the [Build design tokens](.github/workflows/build-tokens.yml) workflow runs automatically:
+
+1. Installs dependencies and runs `npm run build:tokens`
+2. Commits updated `dist/` back to the same branch
+3. Developers pull the latest `main` to get fresh SCSS, CSS, and Tailwind outputs
+
+**Typical flow (Figma → developers):**
+
+1. Export or sync `tokens.json` from Figma / Tokens Studio
+2. Commit and push `tokens.json` to `main` on GitHub
+3. Wait for the Actions workflow to finish (check the **Actions** tab)
+4. `git pull` in consuming projects — or re-clone — to pick up new `dist/` files
+
+You can also trigger a rebuild manually: **Actions → Build design tokens → Run workflow**.
+
+The workflow only re-runs when `tokens.json`, build scripts, or `package.json` change — commits that touch only `dist/` do not trigger another build (no infinite loop).
+
+**Repo setup (one time):** ensure [GitHub Actions](https://github.com/divyanshutomar78/Orbit-Personal-Tokens/actions) is enabled for the repository. Push this workflow file to `main` once to activate it.
+
+## Project layout
+
+```
+tokens.json              # Figma export (source of truth)
+scripts/
+  build-tokens.mjs       # Style Dictionary orchestration
+  split-tokens.mjs       # Split multi-set JSON for SD
+  formats/tailwind-colors.mjs
+  formats/tailwind-nested.mjs
+  formats/tailwind-theme.mjs
+dist/                    # Generated; committed by CI on tokens.json changes
+.github/workflows/       # build-tokens.yml — automated rebuild
+```

package/dist/css/platforms/desktop/variables.css

@@ -0,0 +1,100 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --font-font-weight-body: Medium;
+  --font-font-weight-comment: Regular;
+  --font-font-weight-body-small: Medium;
+  --font-font-weight-title: Bold;
+  --font-font-weight-body-input: Medium;
+  --font-font-weight-body-big: Medium;
+  --font-letter-spacing-title-4: 24;
+  --font-font-size-body: 14;
+  --font-font-size-body-small: 12;
+  --font-font-size-title-3: 22;
+  --font-font-size-title-2: 28;
+  --font-font-size-title-1: 38;
+  --font-font-size-body-input: 14;
+  --font-font-size-title-4: 14;
+  --font-font-size-comment: 14;
+  --font-font-size-title-5: 14;
+  --font-font-size-title-6: 14;
+  --font-font-size-body-big: 17;
+  --font-line-height-title-1: 44;
+  --font-line-height-title-2: 32;
+  --font-line-height-t-itle-3: 26;
+  --font-line-height-body: 20;
+  --font-line-height-body-small: 16;
+  --font-line-height-body-input: 14;
+  --font-line-height-title-4: 20;
+  --font-line-height-comment: 22;
+  --font-line-height-title-5: 20;
+  --font-line-height-title-6: 20;
+  --font-line-height-body-big: 17;
+  --platform: Web;
+  --icon-default: 24;
+  --icon-small: 18;
+  --icon-big: 36;
+  --gap-0: 0;
+  --gap-l: 18;
+  --gap-m: 12;
+  --gap-s: 6;
+  --gap-xs: 4;
+  --gap-xl: 24;
+  --gap-xxl: 36;
+  --gap-xxs: 2;
+  --gap-ml: 16;
+  --components-input-button-select-compact-height: 24;
+  --components-input-button-select-default: 36;
+  --components-input-button-select-min-height-textarea: 128;
+  --components-input-button-select-border-width: 1;
+  --components-input-button-select-min-width-hidden: 84;
+  --components-input-button-select-min-width-compact-hidden: 66;
+  --components-input-button-select-top-offset: 8; /** Used to make top offset inside the Input, because input needs to be V align Top */
+  --components-input-button-select-nested-option-offset: 32; /** Used to make top offset inside the Input, because input needs to be V align Top */
+  --components-input-button-select-compact-min-width: 24;
+  --components-titles-and-tabs-header: 36;
+  --components-toolbar-toolbar: 40;
+  --components-action-menu-item-action-menu: 36;
+  --components-e-was-nav-item-height-horizontal: 55;
+  --components-e-was-nav-item-height-split-view: 55;
+  --components-e-was-nav-item-height-vertical: 55;
+  --components-e-was-nav-item-width-horizontal: 72;
+  --components-e-was-nav-item-width-split-view: 45;
+  --components-e-was-nav-item-width-vertical: 60;
+  --components-chip-height-default: 32;
+  --components-chip-height-compact: 26;
+  --radius-s: 4;
+  --radius-m: 8;
+  --radius-l: 12;
+  --radius-card: 8;
+  --radius-input: 4;
+  --radius-section: 8;
+  --radius-action-menu: 4;
+  --radius-popup-message: 8;
+  --radius-xl: 24;
+  --radius-chip: 24;
+  --radius-chip-squared: 4;
+  --padding-vertical-0: 0;
+  --padding-vertical-xs: 4;
+  --padding-vertical-s: 8;
+  --padding-vertical-m: 12;
+  --padding-vertical-l: 18;
+  --padding-vertical-xl: 24;
+  --padding-vertical-xxl: 36;
+  --padding-vertical-xxs: 2;
+  --padding-vertical-ml: 16;
+  --padding-horizontal-0: 0;
+  --padding-horizontal-xs: 4;
+  --padding-horizontal-s: 8;
+  --padding-horizontal-m: 12;
+  --padding-horizontal-l: 18;
+  --padding-horizontal-xl: 24;
+  --padding-horizontal-xxl: 36;
+  --padding-horizontal-xxs: 2;
+  --padding-horizontal-ml: 16;
+  --icon-frame-size-small: 18;
+  --icon-frame-size-default: 26;
+  --icon-frame-size-big: 36;
+}

package/dist/css/platforms/ipad/variables.css

@@ -0,0 +1,100 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --font-font-weight-body: Medium;
+  --font-font-weight-comment: Regular;
+  --font-font-weight-body-small: Medium;
+  --font-font-weight-title: Bold;
+  --font-font-weight-body-input: Semi Bold;
+  --font-font-weight-body-big: Medium;
+  --font-letter-spacing-title-4: 24;
+  --font-font-size-body: 13;
+  --font-font-size-body-small: 11;
+  --font-font-size-title-3: 18;
+  --font-font-size-title-2: 24;
+  --font-font-size-title-1: 36;
+  --font-font-size-body-input: 13;
+  --font-font-size-title-4: 13;
+  --font-font-size-comment: 13;
+  --font-font-size-title-5: 13;
+  --font-font-size-title-6: 13;
+  --font-font-size-body-big: 17;
+  --font-line-height-title-1: 46;
+  --font-line-height-title-2: 38;
+  --font-line-height-t-itle-3: 28;
+  --font-line-height-body: 26;
+  --font-line-height-body-small: 20;
+  --font-line-height-body-input: 17;
+  --font-line-height-title-4: 22;
+  --font-line-height-comment: 26;
+  --font-line-height-title-5: 22;
+  --font-line-height-title-6: 22;
+  --font-line-height-body-big: 17;
+  --platform: Mobile;
+  --icon-default: 24;
+  --icon-small: 24;
+  --icon-big: 48;
+  --gap-0: 0;
+  --gap-l: 18;
+  --gap-m: 12;
+  --gap-s: 8;
+  --gap-xs: 4;
+  --gap-xl: 24;
+  --gap-xxl: 36;
+  --gap-xxs: 2;
+  --gap-ml: 16;
+  --components-input-button-select-compact-height: 32;
+  --components-input-button-select-default: 48;
+  --components-input-button-select-min-height-textarea: 160;
+  --components-input-button-select-border-width: 1;
+  --components-input-button-select-min-width-hidden: 112;
+  --components-input-button-select-min-width-compact-hidden: 80;
+  --components-input-button-select-top-offset: 13; /** Used to make top offset inside the Input, because input needs to be V align Top */
+  --components-input-button-select-nested-option-offset: 40; /** Used to make top offset inside the Input, because input needs to be V align Top */
+  --components-input-button-select-compact-min-width: 32;
+  --components-titles-and-tabs-header: 55;
+  --components-toolbar-toolbar: 55;
+  --components-action-menu-item-action-menu: 44;
+  --components-e-was-nav-item-height-horizontal: 55;
+  --components-e-was-nav-item-height-split-view: 55;
+  --components-e-was-nav-item-height-vertical: 55;
+  --components-e-was-nav-item-width-horizontal: 72;
+  --components-e-was-nav-item-width-split-view: 45;
+  --components-e-was-nav-item-width-vertical: 60;
+  --components-chip-height-default: 44;
+  --components-chip-height-compact: 30;
+  --radius-s: 4;
+  --radius-m: 8;
+  --radius-l: 12;
+  --radius-card: 10;
+  --radius-input: 6;
+  --radius-section: 10;
+  --radius-action-menu: 6;
+  --radius-popup-message: 10;
+  --radius-xl: 24;
+  --radius-chip: 36;
+  --radius-chip-squared: 6;
+  --padding-vertical-0: 0;
+  --padding-vertical-xs: 4;
+  --padding-vertical-s: 8;
+  --padding-vertical-m: 12;
+  --padding-vertical-l: 18;
+  --padding-vertical-xl: 24;
+  --padding-vertical-xxl: 36;
+  --padding-vertical-xxs: 2;
+  --padding-vertical-ml: 16;
+  --padding-horizontal-0: 0;
+  --padding-horizontal-xs: 4;
+  --padding-horizontal-s: 8;
+  --padding-horizontal-m: 12;
+  --padding-horizontal-l: 18;
+  --padding-horizontal-xl: 24;
+  --padding-horizontal-xxl: 36;
+  --padding-horizontal-xxs: 2;
+  --padding-horizontal-ml: 16;
+  --icon-frame-size-small: 24;
+  --icon-frame-size-default: 44;
+  --icon-frame-size-big: 48;
+}

package/dist/css/platforms/web/variables.css

@@ -0,0 +1,100 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --font-font-weight-body: Medium;
+  --font-font-weight-comment: Regular;
+  --font-font-weight-body-small: Medium;
+  --font-font-weight-title: Bold;
+  --font-font-weight-body-input: Semi Bold;
+  --font-font-weight-body-big: Medium;
+  --font-letter-spacing-title-4: 24;
+  --font-font-size-body: 13;
+  --font-font-size-body-small: 11;
+  --font-font-size-title-3: 18;
+  --font-font-size-title-2: 24;
+  --font-font-size-title-1: 36;
+  --font-font-size-body-input: 13;
+  --font-font-size-title-4: 13;
+  --font-font-size-comment: 13;
+  --font-font-size-title-5: 13;
+  --font-font-size-title-6: 13;
+  --font-font-size-body-big: 17;
+  --font-line-height-title-1: 42;
+  --font-line-height-title-2: 30;
+  --font-line-height-t-itle-3: 23;
+  --font-line-height-body: 20;
+  --font-line-height-body-small: 17;
+  --font-line-height-body-input: 13;
+  --font-line-height-title-4: 18;
+  --font-line-height-comment: 20;
+  --font-line-height-title-5: 18;
+  --font-line-height-title-6: 18;
+  --font-line-height-body-big: 17;
+  --platform: Desktop;
+  --icon-default: 24;
+  --icon-small: 18;
+  --icon-big: 36;
+  --gap-0: 0;
+  --gap-l: 18;
+  --gap-m: 12;
+  --gap-s: 6;
+  --gap-xs: 4;
+  --gap-xl: 24;
+  --gap-xxl: 36;
+  --gap-xxs: 2;
+  --gap-ml: 16;
+  --components-input-button-select-compact-height: 24;
+  --components-input-button-select-default: 36;
+  --components-input-button-select-min-height-textarea: 128;
+  --components-input-button-select-border-width: 1;
+  --components-input-button-select-min-width-hidden: 84;
+  --components-input-button-select-min-width-compact-hidden: 66;
+  --components-input-button-select-top-offset: 9; /** Used to make top offset inside the Input, because input needs to be V align Top */
+  --components-input-button-select-nested-option-offset: 32; /** Used to make top offset inside the Input, because input needs to be V align Top */
+  --components-input-button-select-compact-min-width: 24;
+  --components-titles-and-tabs-header: 36;
+  --components-toolbar-toolbar: 40;
+  --components-action-menu-item-action-menu: 36;
+  --components-e-was-nav-item-height-horizontal: 55;
+  --components-e-was-nav-item-height-split-view: 55;
+  --components-e-was-nav-item-height-vertical: 55;
+  --components-e-was-nav-item-width-horizontal: 72;
+  --components-e-was-nav-item-width-split-view: 45;
+  --components-e-was-nav-item-width-vertical: 60;
+  --components-chip-height-default: 32;
+  --components-chip-height-compact: 26;
+  --radius-s: 4;
+  --radius-m: 8;
+  --radius-l: 12;
+  --radius-card: 8;
+  --radius-input: 4;
+  --radius-section: 8;
+  --radius-action-menu: 4;
+  --radius-popup-message: 8;
+  --radius-xl: 24;
+  --radius-chip: 24;
+  --radius-chip-squared: 4;
+  --padding-vertical-0: 0;
+  --padding-vertical-xs: 4;
+  --padding-vertical-s: 8;
+  --padding-vertical-m: 12;
+  --padding-vertical-l: 18;
+  --padding-vertical-xl: 24;
+  --padding-vertical-xxl: 36;
+  --padding-vertical-xxs: 2;
+  --padding-vertical-ml: 16;
+  --padding-horizontal-0: 0;
+  --padding-horizontal-xs: 4;
+  --padding-horizontal-s: 8;
+  --padding-horizontal-m: 12;
+  --padding-horizontal-l: 18;
+  --padding-horizontal-xl: 24;
+  --padding-horizontal-xxl: 36;
+  --padding-horizontal-xxs: 2;
+  --padding-horizontal-ml: 16;
+  --icon-frame-size-small: 18;
+  --icon-frame-size-default: 24;
+  --icon-frame-size-big: 36;
+}

package/dist/css/primitives/variables.css

@@ -0,0 +1,91 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --system-feedback-neutral-tbd: #00eaea;
+  --system-feedback-success: #439f35;
+  --system-feedback-attention: #f5821f;
+  --system-feedback-warning: #ff0000;
+  --system-feedback-critical: #ff47e0;
+  --blue-50: #ebf1fd;
+  --blue-100: #37c0ff;
+  --blue-200: #0095da;
+  --blue-250: #1ab2f8;
+  --blue-300: #0071bb;
+  --blue-350: #12597c;
+  --blue-400: #1f3048;
+  --blue-425: #202d41;
+  --blue-450: #1d283a;
+  --blue-500: #1a2434;
+  --green-50: #dae8d8;
+  --green-100: #daf1da;
+  --green-150: #c7eac7;
+  --green-175: #e6f7f1;
+  --green-200: #8af28a;
+  --green-300: #78ce6b;
+  --green-315: #86c57c;
+  --green-320: #308723;
+  --green-325: #58bd47;
+  --green-350: #306228;
+  --green-400: #446b44;
+  --green-500: #374f37;
+  --green-525: #2b3e2b;
+  --green-550: #2e4c29;
+  --green-600: #263f22;
+  --green-600-copy: #263f22;
+  --neutral-0: #ffffff;
+  --neutral-100: #fafafa;
+  --neutral-200: #f5f5f5;
+  --neutral-300: #e8e8e3;
+  --neutral-350: #363636;
+  --neutral-400: #2e2e2e;
+  --neutral-500: #242424;
+  --neutral-600: #1d1d1d;
+  --neutral-700: #141414;
+  --neutral-10000: #000000;
+  --cyan-500: #00eaea;
+  --orange-100: #f5e4d5;
+  --orange-200: #f2dbca;
+  --orange-300: #fff3e7;
+  --orange-400: #e88a33;
+  --orange-500: #e26800;
+  --orange-600: #f5821f;
+  --orange-700: #5a3d21;
+  --orange-800: #592f00;
+  --red-100: #f8cece;
+  --red-200: #f6c1c1;
+  --red-300: #fceeeb;
+  --red-350: #ff4a4a;
+  --red-500: #d61f1f;
+  --red-700: #711414;
+  --magenta-100: #f7dbf2;
+  --magenta-200: #f6e4f3;
+  --magenta-300: #ff47e0;
+  --magenta-400: #e222c1;
+  --magenta-500: #532d4c;
+  --magenta-600: #5d2d55;
+  --neutral-alpha-10: rgba(36, 36, 36, 0.1);
+  --neutral-alpha-20: rgba(36, 36, 36, 0.2);
+  --neutral-alpha-25: rgba(36, 36, 36, 0.25);
+  --neutral-alpha-65: rgba(36, 36, 36, 0.65);
+  --white-alpha-1: rgba(255, 255, 255, 0.01);
+  --white-alpha-2: rgba(255, 255, 255, 0.02);
+  --white-alpha-3: rgba(255, 255, 255, 0.03);
+  --white-alpha-5: rgba(255, 255, 255, 0.05);
+  --white-alpha-7: rgba(255, 255, 255, 0.07);
+  --white-alpha-15: rgba(255, 255, 255, 0.15);
+  --white-alpha-25: rgba(255, 255, 255, 0.25);
+  --white-alpha-30: rgba(255, 255, 255, 0.3);
+  --white-alpha-50: rgba(255, 255, 255, 0.5);
+  --white-alpha-60: rgba(255, 255, 255, 0.6);
+  --white-alpha-65: rgba(255, 255, 255, 0.65);
+  --black-alpha-1: rgba(0, 0, 0, 0.01);
+  --black-alpha-2: rgba(0, 0, 0, 0.02);
+  --black-alpha-4: rgba(0, 0, 0, 0.04);
+  --black-alpha-10: rgba(0, 0, 0, 0.1);
+  --black-alpha-14: rgba(0, 0, 0, 0.14);
+  --black-alpha-20: rgba(0, 0, 0, 0.2);
+  --black-alpha-30: rgba(0, 0, 0, 0.3);
+  --black-alpha-35: rgba(0, 0, 0, 0.35);
+}

package/dist/css/themes/d-green/index.css

@@ -0,0 +1,3 @@
+/* Auto-generated from tokens.json — do not edit directly. */
+@import '../primitives/variables.css';
+@import './variables.css';

package/dist/css/themes/d-green/variables.css

@@ -0,0 +1,93 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --shadow-action-menu: rgba(0, 0, 0, 0.15);
+  --shadow-navigation: rgba(0, 0, 0, 0.07);
+  --shadow-card: rgba(0, 0, 0, 0.1);
+  --shadow-popup-message: rgba(0, 0, 0, 0.3);
+  --shadow-submit-section: rgba(0, 0, 0, 0.2);
+  --shadow-chip: rgba(0, 0, 0, 0.3);
+  --chips-attemtion-default: #ffffff;
+  --chips-attemtion-hover: #ffffff;
+  --chips-attemtion-selected: #ffffff;
+  --chips-warning-default: #ffffff;
+  --chips-warning-hover: #ffffff;
+  --chips-warning-selected: #ffffff;
+  --chips-success-default: #ffffff;
+  --chips-success-hover: #ffffff;
+  --chips-success-selected: #ffffff;
+  --chips-critical-default: #ffffff;
+  --chips-critical-hover: #ffffff;
+  --chips-critical-selected: #ffffff;
+  --chips-blue-default: #ffffff;
+  --chips-blue-hover: #ffffff;
+  --chips-blue-selected: #ffffff;
+  --xtra-sergei-variables-bg-darker: var(--black-alpha-2);
+  --xtra-sergei-variables-bg-lighter: var(--white-alpha-60);
+  --xtra-sergei-variables-documet-line-formerly-on-bg-disabled: var(--neutral-alpha-20);
+  --xtra-sergei-variables-bg-accent: var(--black-alpha-2); /** BG dark inverse */
+  --xtra-sergei-variables-always-black: var(--neutral-10000);
+  --xtra-sergei-variables-always-white: var(--neutral-0);
+  --xtra-sergei-variables-bg-2: var(--neutral-100);
+  --xtra-sergei-variables-bg-accent-inverted: var(--white-alpha-65); /** BG light inverse */
+  --xtra-sergei-variables-on-action-hover: var(--neutral-100);
+  --xtra-sergei-variables-on-action-active: var(--neutral-0);
+  --xtra-sergei-variables-bg-accent-2: var(--black-alpha-10); /** BG light inverse */
+  --border-primary: var(--neutral-alpha-25);
+  --border-secondary: var(--neutral-alpha-10);
+  --border-action: var(--green-400);
+  --border-action-hover: var(--green-600);
+  --border-attention: var(--orange-500);
+  --border-neutral: var(--blue-50);
+  --text-action: var(--green-525);
+  --text-action-hover: var(--green-600);
+  --text-primary: var(--neutral-500);
+  --text-secondary: var(--neutral-alpha-65);
+  --text-on-action: var(--neutral-100);
+  --text-action-active: var(--neutral-10000);
+  --text-disabled: var(--black-alpha-30);
+  --text-on-disabled: var(--neutral-200);
+  --text-attention: var(--orange-500);
+  --text-warning: var(--red-500);
+  --text-critical: var(--magenta-400);
+  --text-on-success-container-variant: var(--green-300);
+  --text-on-attention-container: var(--orange-600);
+  --text-on-success-container: var(--green-325);
+  --text-on-attention-container-variant: var(--orange-600);
+  --text-success: var(--green-320);
+  --text-on-warning-container: var(--red-500);
+  --text-on-warning-container-variant: var(--red-500);
+  --text-on-critical-container: var(--magenta-300);
+  --background-background: var(--neutral-200);
+  --background-inside-surface-2: var(--black-alpha-4);
+  --background-inside-surface-1: var(--white-alpha-65);
+  --background-surface-container-2: var(--neutral-100);
+  --background-surface-container-1: var(--neutral-0);
+  --background-input-fields: var(--black-alpha-2);
+  --background-success-container-variant: var(--green-100);
+  --background-attention-container: var(--orange-100);
+  --background-warning-container-variant: var(--red-100);
+  --background-success-container: var(--green-150);
+  --background-attention-container-variant: var(--orange-200);
+  --background-warning-container: var(--red-100);
+  --background-critical-container: var(--magenta-100);
+  --background-critical-container-variant: var(--magenta-200);
+  --background-action: var(--green-525);
+  --background-disabled: var(--black-alpha-30);
+  --background-action-hover: var(--green-550);
+  --background-neutral-container: var(--blue-50);
+  --background-surface-container-3: var(--neutral-200);
+  --chips-neutral-color-neutral: var(--neutral-500);
+  --chips-neutral-color-neutral-2: var(--neutral-500);
+  --chips-neutral-color-hover: var(--neutral-500);
+  --chips-neutral-color-checked: var(--neutral-500);
+  --icon-secondary: var(--neutral-alpha-65);
+  --icon-action: var(--green-525);
+  --icon-disabled: var(--black-alpha-20);
+  --icon-primary: var(--neutral-500);
+  --icon-on-action: var(--neutral-100);
+  --icon-attention: var(--orange-500);
+  --scrollbar: var(--black-alpha-20);
+}

package/dist/css/themes/d-grey/index.css

@@ -0,0 +1,3 @@
+/* Auto-generated from tokens.json — do not edit directly. */
+@import '../primitives/variables.css';
+@import './variables.css';