@kommon-lab/tokens 0.1.0

package/dist/css/kiabi.css

@@ -0,0 +1,231 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --size-0: 0;
+  --size-25: 4;
+  --size-50: 8;
+  --size-75: 12;
+  --size-100: 16;
+  --size-125: 20;
+  --size-150: 24;
+  --size-175: 28;
+  --size-200: 32;
+  --size-225: 36;
+  --size-250: 40;
+  --size-275: 44;
+  --size-300: 48;
+  --size-325: 52;
+  --size-350: 56;
+  --size-375: 60;
+  --size-400: 64;
+  --size-425: 68;
+  --size-450: 72;
+  --size-475: 76;
+  --size-500: 80;
+  --size-xxxs: 20;
+  --size-xxs: 24;
+  --size-xs: 32;
+  --size-s: 36;
+  --size-m: 40;
+  --size-l: 48;
+  --size-xl: 56;
+  --size-xxl: 64;
+  --size-xxxl: 80;
+  --space-0: 0;
+  --space-12: 2;
+  --space-25: 4;
+  --space-50: 8;
+  --space-75: 12;
+  --space-100: 16;
+  --space-125: 20;
+  --space-150: 24;
+  --space-175: 28;
+  --space-200: 32;
+  --space-225: 36;
+  --space-250: 40;
+  --space-275: 44;
+  --space-300: 48;
+  --space-325: 52;
+  --space-350: 56;
+  --space-375: 60;
+  --space-400: 64;
+  --space-none: 0;
+  --space-xxxxs: 2;
+  --space-xxxs: 4;
+  --space-xxs: 8;
+  --space-xs: 12;
+  --space-s: 16;
+  --space-m: 20;
+  --space-l: 24;
+  --space-xl: 32;
+  --space-xxl: 40;
+  --space-xxxl: 48;
+  --space-xxxxl: 56;
+  --font-body-m-font-family: Figtree;
+  --font-body-m-font-size: 1rem;
+  --font-body-m-line-height: 140%;
+  --font-body-m-font-weight: 400;
+  --font-body-m-letter-spacing: 0;
+  --font-body-m-text-decoration: none;
+  --font-body-m-bold-font-family: Figtree;
+  --font-body-m-bold-font-size: 1rem;
+  --font-body-m-bold-line-height: 140%;
+  --font-body-m-bold-font-weight: 600;
+  --font-body-m-bold-letter-spacing: 0;
+  --font-body-m-bold-text-decoration: none;
+  --font-body-s-font-family: Figtree;
+  --font-body-s-font-size: 0.875rem;
+  --font-body-s-line-height: 140%;
+  --font-body-s-font-weight: 400;
+  --font-body-s-letter-spacing: 0;
+  --font-body-s-text-decoration: none;
+  --font-body-s-bold-font-family: Figtree;
+  --font-body-s-bold-font-size: 0.875rem;
+  --font-body-s-bold-line-height: 140%;
+  --font-body-s-bold-font-weight: 600;
+  --font-body-s-bold-letter-spacing: 0;
+  --font-body-s-bold-text-decoration: none;
+  --font-body-xs-font-family: Figtree;
+  --font-body-xs-font-size: 0.75rem;
+  --font-body-xs-line-height: 140%;
+  --font-body-xs-font-weight: 400;
+  --font-body-xs-letter-spacing: 0;
+  --font-body-xs-text-decoration: none;
+  --font-body-xs-bold-font-family: Figtree;
+  --font-body-xs-bold-font-size: 0.75rem;
+  --font-body-xs-bold-line-height: 140%;
+  --font-body-xs-bold-font-weight: 600;
+  --font-body-xs-bold-letter-spacing: 0;
+  --font-body-xs-bold-text-decoration: none;
+  --font-link-m-font-family: Figtree;
+  --font-link-m-font-size: 1rem;
+  --font-link-m-line-height: 140%;
+  --font-link-m-font-weight: 400;
+  --font-link-m-letter-spacing: 0;
+  --font-link-m-text-decoration: underline;
+  --font-link-m-bold-font-family: Figtree;
+  --font-link-m-bold-font-size: 1rem;
+  --font-link-m-bold-line-height: 140%;
+  --font-link-m-bold-font-weight: 600;
+  --font-link-m-bold-letter-spacing: 0;
+  --font-link-m-bold-text-decoration: underline;
+  --font-link-s-font-family: Figtree;
+  --font-link-s-font-size: 0.875rem;
+  --font-link-s-line-height: 140%;
+  --font-link-s-font-weight: 400;
+  --font-link-s-letter-spacing: 0;
+  --font-link-s-text-decoration: underline;
+  --font-link-s-bold-font-family: Figtree;
+  --font-link-s-bold-font-size: 0.875rem;
+  --font-link-s-bold-line-height: 140%;
+  --font-link-s-bold-font-weight: 600;
+  --font-link-s-bold-letter-spacing: 0;
+  --font-link-s-bold-text-decoration: underline;
+  --font-link-xs-font-family: Figtree;
+  --font-link-xs-font-size: 0.75rem;
+  --font-link-xs-line-height: 140%;
+  --font-link-xs-font-weight: 400;
+  --font-link-xs-letter-spacing: 0;
+  --font-link-xs-text-decoration: underline;
+  --font-link-xs-bold-font-family: Figtree;
+  --font-link-xs-bold-font-size: 0.75rem;
+  --font-link-xs-bold-line-height: 140%;
+  --font-link-xs-bold-font-weight: 600;
+  --font-link-xs-bold-letter-spacing: 0;
+  --font-link-xs-bold-text-decoration: underline;
+  --font-display-l-font-family: Figtree;
+  --font-display-l-font-size: 3rem;
+  --font-display-l-line-height: 100%;
+  --font-display-l-font-weight: 700;
+  --font-display-l-letter-spacing: 0;
+  --font-display-l-text-decoration: none;
+  --font-display-m-font-family: Figtree;
+  --font-display-m-font-size: 2.375rem;
+  --font-display-m-line-height: 100%;
+  --font-display-m-font-weight: 700;
+  --font-display-m-letter-spacing: 0;
+  --font-display-m-text-decoration: none;
+  --font-title-l-font-family: Figtree;
+  --font-title-l-font-size: 2rem;
+  --font-title-l-line-height: 120%;
+  --font-title-l-font-weight: 800;
+  --font-title-l-letter-spacing: 0;
+  --font-title-l-text-decoration: none;
+  --font-title-m-font-family: Figtree;
+  --font-title-m-font-size: 1.75rem;
+  --font-title-m-line-height: 120%;
+  --font-title-m-font-weight: 800;
+  --font-title-m-letter-spacing: 0;
+  --font-title-m-text-decoration: none;
+  --font-title-s-font-family: Figtree;
+  --font-title-s-font-size: 1.5rem;
+  --font-title-s-line-height: 120%;
+  --font-title-s-font-weight: 800;
+  --font-title-s-letter-spacing: 0;
+  --font-title-s-text-decoration: none;
+  --font-title-xs-font-family: Figtree;
+  --font-title-xs-font-size: 1.25rem;
+  --font-title-xs-line-height: 120%;
+  --font-title-xs-font-weight: 800;
+  --font-title-xs-letter-spacing: 0;
+  --font-title-xs-text-decoration: none;
+  --color-bg-brand: #040037;
+  --color-bg-base: #ffffff;
+  --color-bg-alternate: #f2f2f8;
+  --color-fg-brand: #040037;
+  --color-fg-neutral: #33323d;
+  --color-fg-subtle: #757388;
+  --color-fg-inverse: #ffffff;
+  --border-width-thin: 1;
+  --border-width-thick: 2;
+  --border-radius-none: 0;
+  --border-radius-xs: 4;
+  --border-radius-s: 8;
+  --border-radius-m: 12;
+  --border-radius-l: 16;
+  --border-radius-xl: 24;
+  --border-radius-pill: 999;
+}
+
+@media (min-width: 768px) {
+  :root {
+    --font-display-l-font-family: Figtree;
+    --font-display-l-font-size: 4.5rem;
+    --font-display-l-line-height: 100%;
+    --font-display-l-font-weight: 700;
+    --font-display-l-letter-spacing: 0;
+    --font-display-l-text-decoration: none;
+    --font-display-m-font-family: Figtree;
+    --font-display-m-font-size: 3.5rem;
+    --font-display-m-line-height: 100%;
+    --font-display-m-font-weight: 700;
+    --font-display-m-letter-spacing: 0;
+    --font-display-m-text-decoration: none;
+    --font-title-l-font-family: Figtree;
+    --font-title-l-font-size: 2.5rem;
+    --font-title-l-line-height: 120%;
+    --font-title-l-font-weight: 800;
+    --font-title-l-letter-spacing: 0;
+    --font-title-l-text-decoration: none;
+    --font-title-m-font-family: Figtree;
+    --font-title-m-font-size: 2rem;
+    --font-title-m-line-height: 120%;
+    --font-title-m-font-weight: 800;
+    --font-title-m-letter-spacing: 0;
+    --font-title-m-text-decoration: none;
+    --font-title-s-font-family: Figtree;
+    --font-title-s-font-size: 1.5rem;
+    --font-title-s-line-height: 120%;
+    --font-title-s-font-weight: 800;
+    --font-title-s-letter-spacing: 0;
+    --font-title-s-text-decoration: none;
+    --font-title-xs-font-family: Figtree;
+    --font-title-xs-font-size: 1.25rem;
+    --font-title-xs-line-height: 120%;
+    --font-title-xs-font-weight: 800;
+    --font-title-xs-letter-spacing: 0;
+    --font-title-xs-text-decoration: none;
+  }
+}

package/dist/css/kitchoun.css

@@ -0,0 +1,231 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --size-0: 0;
+  --size-25: 4;
+  --size-50: 8;
+  --size-75: 12;
+  --size-100: 16;
+  --size-125: 20;
+  --size-150: 24;
+  --size-175: 28;
+  --size-200: 32;
+  --size-225: 36;
+  --size-250: 40;
+  --size-275: 44;
+  --size-300: 48;
+  --size-325: 52;
+  --size-350: 56;
+  --size-375: 60;
+  --size-400: 64;
+  --size-425: 68;
+  --size-450: 72;
+  --size-475: 76;
+  --size-500: 80;
+  --size-xxxs: 20;
+  --size-xxs: 24;
+  --size-xs: 32;
+  --size-s: 36;
+  --size-m: 40;
+  --size-l: 48;
+  --size-xl: 56;
+  --size-xxl: 64;
+  --size-xxxl: 80;
+  --space-0: 0;
+  --space-12: 2;
+  --space-25: 4;
+  --space-50: 8;
+  --space-75: 12;
+  --space-100: 16;
+  --space-125: 20;
+  --space-150: 24;
+  --space-175: 28;
+  --space-200: 32;
+  --space-225: 36;
+  --space-250: 40;
+  --space-275: 44;
+  --space-300: 48;
+  --space-325: 52;
+  --space-350: 56;
+  --space-375: 60;
+  --space-400: 64;
+  --space-none: 0;
+  --space-xxxxs: 2;
+  --space-xxxs: 4;
+  --space-xxs: 8;
+  --space-xs: 12;
+  --space-s: 16;
+  --space-m: 20;
+  --space-l: 24;
+  --space-xl: 32;
+  --space-xxl: 40;
+  --space-xxxl: 48;
+  --space-xxxxl: 56;
+  --font-body-m-font-family: Figtree;
+  --font-body-m-font-size: 1rem;
+  --font-body-m-line-height: 140%;
+  --font-body-m-font-weight: 400;
+  --font-body-m-letter-spacing: 0;
+  --font-body-m-text-decoration: none;
+  --font-body-m-bold-font-family: Figtree;
+  --font-body-m-bold-font-size: 1rem;
+  --font-body-m-bold-line-height: 140%;
+  --font-body-m-bold-font-weight: 600;
+  --font-body-m-bold-letter-spacing: 0;
+  --font-body-m-bold-text-decoration: none;
+  --font-body-s-font-family: Figtree;
+  --font-body-s-font-size: 0.875rem;
+  --font-body-s-line-height: 140%;
+  --font-body-s-font-weight: 400;
+  --font-body-s-letter-spacing: 0;
+  --font-body-s-text-decoration: none;
+  --font-body-s-bold-font-family: Figtree;
+  --font-body-s-bold-font-size: 0.875rem;
+  --font-body-s-bold-line-height: 140%;
+  --font-body-s-bold-font-weight: 600;
+  --font-body-s-bold-letter-spacing: 0;
+  --font-body-s-bold-text-decoration: none;
+  --font-body-xs-font-family: Figtree;
+  --font-body-xs-font-size: 0.75rem;
+  --font-body-xs-line-height: 140%;
+  --font-body-xs-font-weight: 400;
+  --font-body-xs-letter-spacing: 0;
+  --font-body-xs-text-decoration: none;
+  --font-body-xs-bold-font-family: Figtree;
+  --font-body-xs-bold-font-size: 0.75rem;
+  --font-body-xs-bold-line-height: 140%;
+  --font-body-xs-bold-font-weight: 600;
+  --font-body-xs-bold-letter-spacing: 0;
+  --font-body-xs-bold-text-decoration: none;
+  --font-link-m-font-family: Figtree;
+  --font-link-m-font-size: 1rem;
+  --font-link-m-line-height: 140%;
+  --font-link-m-font-weight: 400;
+  --font-link-m-letter-spacing: 0;
+  --font-link-m-text-decoration: underline;
+  --font-link-m-bold-font-family: Figtree;
+  --font-link-m-bold-font-size: 1rem;
+  --font-link-m-bold-line-height: 140%;
+  --font-link-m-bold-font-weight: 600;
+  --font-link-m-bold-letter-spacing: 0;
+  --font-link-m-bold-text-decoration: underline;
+  --font-link-s-font-family: Figtree;
+  --font-link-s-font-size: 0.875rem;
+  --font-link-s-line-height: 140%;
+  --font-link-s-font-weight: 400;
+  --font-link-s-letter-spacing: 0;
+  --font-link-s-text-decoration: underline;
+  --font-link-s-bold-font-family: Figtree;
+  --font-link-s-bold-font-size: 0.875rem;
+  --font-link-s-bold-line-height: 140%;
+  --font-link-s-bold-font-weight: 600;
+  --font-link-s-bold-letter-spacing: 0;
+  --font-link-s-bold-text-decoration: underline;
+  --font-link-xs-font-family: Figtree;
+  --font-link-xs-font-size: 0.75rem;
+  --font-link-xs-line-height: 140%;
+  --font-link-xs-font-weight: 400;
+  --font-link-xs-letter-spacing: 0;
+  --font-link-xs-text-decoration: underline;
+  --font-link-xs-bold-font-family: Figtree;
+  --font-link-xs-bold-font-size: 0.75rem;
+  --font-link-xs-bold-line-height: 140%;
+  --font-link-xs-bold-font-weight: 600;
+  --font-link-xs-bold-letter-spacing: 0;
+  --font-link-xs-bold-text-decoration: underline;
+  --font-display-l-font-family: Fredoka;
+  --font-display-l-font-size: 3rem;
+  --font-display-l-line-height: 100%;
+  --font-display-l-font-weight: 700;
+  --font-display-l-letter-spacing: 0;
+  --font-display-l-text-decoration: none;
+  --font-display-m-font-family: Fredoka;
+  --font-display-m-font-size: 2.375rem;
+  --font-display-m-line-height: 100%;
+  --font-display-m-font-weight: 700;
+  --font-display-m-letter-spacing: 0;
+  --font-display-m-text-decoration: none;
+  --font-title-l-font-family: Fredoka;
+  --font-title-l-font-size: 2rem;
+  --font-title-l-line-height: 120%;
+  --font-title-l-font-weight: 800;
+  --font-title-l-letter-spacing: 0;
+  --font-title-l-text-decoration: none;
+  --font-title-m-font-family: Fredoka;
+  --font-title-m-font-size: 1.75rem;
+  --font-title-m-line-height: 120%;
+  --font-title-m-font-weight: 800;
+  --font-title-m-letter-spacing: 0;
+  --font-title-m-text-decoration: none;
+  --font-title-s-font-family: Fredoka;
+  --font-title-s-font-size: 1.5rem;
+  --font-title-s-line-height: 120%;
+  --font-title-s-font-weight: 800;
+  --font-title-s-letter-spacing: 0;
+  --font-title-s-text-decoration: none;
+  --font-title-xs-font-family: Fredoka;
+  --font-title-xs-font-size: 1.25rem;
+  --font-title-xs-line-height: 120%;
+  --font-title-xs-font-weight: 800;
+  --font-title-xs-letter-spacing: 0;
+  --font-title-xs-text-decoration: none;
+  --color-bg-brand: #a39cf4;
+  --color-bg-base: #ffffff;
+  --color-bg-alternate: #f2f2f8;
+  --color-fg-brand: #040037;
+  --color-fg-neutral: #33323d;
+  --color-fg-subtle: #757388;
+  --color-fg-inverse: #ffffff;
+  --border-width-thin: 1;
+  --border-width-thick: 2;
+  --border-radius-none: 0;
+  --border-radius-xs: 4;
+  --border-radius-s: 8;
+  --border-radius-m: 12;
+  --border-radius-l: 16;
+  --border-radius-xl: 24;
+  --border-radius-pill: 999;
+}
+
+@media (min-width: 768px) {
+  :root {
+    --font-display-l-font-family: Fredoka;
+    --font-display-l-font-size: 4.5rem;
+    --font-display-l-line-height: 100%;
+    --font-display-l-font-weight: 700;
+    --font-display-l-letter-spacing: 0;
+    --font-display-l-text-decoration: none;
+    --font-display-m-font-family: Fredoka;
+    --font-display-m-font-size: 3.5rem;
+    --font-display-m-line-height: 100%;
+    --font-display-m-font-weight: 700;
+    --font-display-m-letter-spacing: 0;
+    --font-display-m-text-decoration: none;
+    --font-title-l-font-family: Fredoka;
+    --font-title-l-font-size: 2.5rem;
+    --font-title-l-line-height: 120%;
+    --font-title-l-font-weight: 800;
+    --font-title-l-letter-spacing: 0;
+    --font-title-l-text-decoration: none;
+    --font-title-m-font-family: Fredoka;
+    --font-title-m-font-size: 2rem;
+    --font-title-m-line-height: 120%;
+    --font-title-m-font-weight: 800;
+    --font-title-m-letter-spacing: 0;
+    --font-title-m-text-decoration: none;
+    --font-title-s-font-family: Fredoka;
+    --font-title-s-font-size: 1.5rem;
+    --font-title-s-line-height: 120%;
+    --font-title-s-font-weight: 800;
+    --font-title-s-letter-spacing: 0;
+    --font-title-s-text-decoration: none;
+    --font-title-xs-font-family: Fredoka;
+    --font-title-xs-font-size: 1.25rem;
+    --font-title-xs-line-height: 120%;
+    --font-title-xs-font-weight: 800;
+    --font-title-xs-letter-spacing: 0;
+    --font-title-xs-text-decoration: none;
+  }
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@kommon-lab/tokens",
+  "version": "0.1.0",
+  "description": "Design tokens for Kommon Lab multi-brand design system",
+  "exports": {
+    "./css/*": "./dist/css/*",
+    "./tokens/*": "./tokens/*"
+  },
+  "files": [
+    "dist/",
+    "tokens/"
+  ],
+  "scripts": {
+    "transform": "node scripts/transform-tokens.js",
+    "build": "node scripts/transform-tokens.js && node scripts/build-tokens.js",
+    "build:tokens": "node scripts/build-tokens.js",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "style-dictionary": "^4.0.0"
+  }
+}

package/tokens/beebs_tokens.json

@@ -0,0 +1,213 @@
+{
+  "font": {
+    "family": { "value": "Really Sans Small" },
+    "weight": {
+      "regular": { "value": "400" },
+      "semi-bold": { "value": "600" },
+      "bold": { "value": "600" },
+      "extra-bold": { "value": 700 }
+    }
+  },
+  "color": {
+    "bg": {
+      "brand": { "value": "{beebs.lily.500}" },
+      "base": { "value": "{beebs.grey.white}" },
+      "alternate": { "value": "{beebs.grey.50}" }
+    },
+    "fg": {
+      "brand": { "value": "{beebs.lily.500}" },
+      "neutral": { "value": "{beebs.grey.900}" },
+      "subtle": { "value": "{beebs.grey.600}" },
+      "inverse": { "value": "{beebs.grey.white}" }
+    }
+  },
+  "focus": { "value": "{global.blue.400}" },
+  "action": {
+    "bg": {
+      "disabled": { "value": "{beebs.grey.200}" },
+      "brand": {
+        "primary": {
+          "default": { "value": "{beebs.mustard.500}" },
+          "hover": { "value": "{beebs.mustard.300}" }
+        },
+        "secondary": {
+          "default": { "value": "{beebs.grey.white}", "opacity": 0 },
+          "hover": { "value": "{beebs.grey.100}" }
+        }
+      },
+      "inverse": {
+        "primary": {
+          "default": { "value": "{beebs.grey.white}" },
+          "hover": { "value": "{beebs.mustard.50}" }
+        },
+        "secondary": {
+          "default": { "value": "{beebs.grey.white}", "opacity": 0 },
+          "hover": { "value": "{beebs.grey.white}", "opacity": 0.18 }
+        }
+      },
+      "alert": {
+        "primary": {
+          "default": { "value": "{beebs.coral.500}" },
+          "hover": { "value": "{beebs.coral.400}" }
+        },
+        "secondary": {
+          "default": { "value": "{beebs.coral.50}", "opacity": 0 },
+          "hover": { "value": "{beebs.coral.50}" }
+        }
+      }
+    },
+    "ripple": {
+      "brand": {
+        "primary": { "value": "{beebs.grey.white}", "opacity": 0 },
+        "secondary": { "value": "{beebs.mustard.600}", "opacity": 0 }
+      },
+      "alert": {
+        "primary": { "value": "{beebs.grey.white}", "opacity": 0 },
+        "secondary": { "value": "{global.orange.500}", "opacity": 0 }
+      },
+      "inverse": {
+        "primary": { "value": "{beebs.mustard.600}", "opacity": 0 },
+        "secondary": { "value": "{beebs.mustard.600}", "opacity": 0 }
+      }
+    },
+    "fg": {
+      "on-disabled": { "value": "{beebs.grey.600}" },
+      "brand": { "value": "{beebs.aqua.500}" },
+      "inverse": { "value": "{global.white}" },
+      "on-brand": {
+        "primary": { "value": "{beebs.grey.1000}" },
+        "secondary": { "value": "{beebs.grey.1000}" }
+      },
+      "on-inverse": {
+        "primary": { "value": "{beebs.grey.1000}" },
+        "secondary": { "value": "{beebs.grey.white}" }
+      },
+      "on-alert": {
+        "primary": { "value": "{beebs.grey.white}" },
+        "secondary": { "value": "{beebs.coral.500}" }
+      }
+    },
+    "border": {
+      "brand": { "value": "{beebs.grey.200}" },
+      "inverse": { "value": "{beebs.grey.white}" },
+      "alert": { "value": "{beebs.coral.500}" }
+    }
+  },
+  "control": {
+    "bg": {
+      "default": { "value": "{beebs.grey.white}" },
+      "disabled": { "value": "{beebs.grey.50}" },
+      "selected": {
+        "default": { "value": "{beebs.grey.1000}" },
+        "hover": { "value": "{beebs.grey.800}" }
+      }
+    },
+    "border": {
+      "default": { "value": "{beebs.grey.200}" },
+      "hover": { "value": "{beebs.grey.600}" },
+      "selected": { "value": "{beebs.grey.1000}" },
+      "alert": { "value": "{beebs.coral.500}" },
+      "success": { "value": "{beebs.aqua.500}" }
+    },
+    "fg": {
+      "neutral": { "value": "{beebs.grey.800}" },
+      "subtle": { "value": "{beebs.grey.600}" },
+      "selected": { "value": "{beebs.grey.1000}" },
+      "disabled": { "value": "{beebs.grey.400}" },
+      "inverse": { "value": "{beebs.grey.white}" }
+    }
+  },
+  "feedback": {
+    "bg": {
+      "alert": { "value": "{global.red.50}" },
+      "alert-bold": { "value": "{global.red.500}" },
+      "info": { "value": "{beebs.lily.50}" },
+      "info-bold": { "value": "{beebs.lily.500}" },
+      "success": { "value": "{beebs.aqua.100}" },
+      "success-bold": { "value": "{beebs.aqua.500}" },
+      "warning": { "value": "{beebs.coral.50}" },
+      "warning-bold": { "value": "{beebs.coral.600}" },
+      "neutral": { "value": "{beebs.grey.white}", "opacity": 0 },
+      "neutral-bold": { "value": "{beebs.grey.600}" },
+      "operational": { "value": "{global.red.500}" },
+      "best-seller": { "value": "{beebs.mustard.500}" },
+      "service": { "value": "{global.blue.500}" },
+      "inverse": { "value": "{global.white}" }
+    },
+    "border": {
+      "alert": { "value": "{global.red.500}" },
+      "info": { "value": "{beebs.lily.500}" },
+      "success": { "value": "{beebs.aqua.500}" },
+      "warning": { "value": "{beebs.coral.500}" },
+      "neutral": { "value": "{beebs.grey.600}" },
+      "brand": { "value": "{beebs.mustard.500}" }
+    },
+    "fg": {
+      "alert": { "value": "{global.red.500}" },
+      "info": { "value": "{beebs.lily.500}" },
+      "success": { "value": "{beebs.aqua.500}" },
+      "warning": { "value": "{beebs.coral.600}" },
+      "neutral": { "value": "{beebs.grey.800}" },
+      "subtle": { "value": "{beebs.grey.600}" },
+      "brand": { "value": "{beebs.grey.1000}" },
+      "inverse": { "value": "{beebs.grey.white}" }
+    }
+  },
+  "layout": {
+    "bg": {
+      "default": { "value": "{global.white}" },
+      "inverse": { "value": "{beebs.green.500}" },
+      "overlay": { "value": "{beebs.green.900}", "opacity": 0.3 }
+    },
+    "border": {
+      "default": { "value": "{beebs.grey.200}" },
+      "inverse": { "value": "{beebs.grey.800}" }
+    },
+    "fg": {
+      "default": { "value": "{beebs.grey.1000}" },
+      "inverse": { "value": "{beebs.grey.white}" }
+    }
+  },
+  "navigation": {
+    "bg": {
+      "default": { "value": "{beebs.grey.white}" },
+      "hover": { "value": "{beebs.grey.50}" },
+      "pressed": { "value": "{beebs.grey.100}" },
+      "brand": { "value": "{beebs.green.500}" },
+      "neutral": { "value": "{beebs.grey.200}" },
+      "disabled": { "value": "{beebs.grey.100}" }
+    },
+    "fg": {
+      "brand": { "value": "{beebs.grey.1000}" },
+      "neutral": { "value": "{beebs.grey.900}" },
+      "inverse": { "value": "{beebs.grey.white}" },
+      "disabled": { "value": "{beebs.grey.600}" }
+    },
+    "border": {
+      "brand": { "value": "{beebs.grey.1000}" },
+      "neutral": { "value": "{beebs.grey.200}" }
+    }
+  },
+  "theme": {
+    "theme-1": {
+      "bg": { "value": "{beebs.grey.white}" },
+      "fg": { "value": "{beebs.grey.1000}" },
+      "button": { "value": "Brand" }
+    },
+    "theme-2": {
+      "bg": { "value": "{beebs.green.100}" },
+      "fg": { "value": "{beebs.grey.1000}" },
+      "button": { "value": "Brand" }
+    },
+    "theme-3": {
+      "bg": { "value": "{beebs.green.300}" },
+      "fg": { "value": "{beebs.grey.1000}" },
+      "button": { "value": "Inverse" }
+    },
+    "theme-4": {
+      "bg": { "value": "{beebs.grey.1000}" },
+      "fg": { "value": "{beebs.grey.white}" },
+      "button": { "value": "Inverse" }
+    }
+  }
+}