@viasat/beam-tokens 2.0.0

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@viasat/beam-tokens",
+  "version": "2.0.0",
+  "description": "Design tokens for the Beam Design System with support for CSS, SASS, and CSS-in-JS",
+  "license": "MIT",
+  "author": "Viasat",
+  "homepage": "https://react.beam.viasat.com/",
+  "repository": {
+    "type": "git",
+    "url": "https://git.viasat.com/vega/beam",
+    "directory": "libs/tokens"
+  },
+  "bugs": {
+    "url": "https://git.viasat.com/vega/beam/issues"
+  },
+  "keywords": [
+    "design-tokens",
+    "tokens",
+    "design-system",
+    "beam",
+    "css-variables",
+    "tailwind",
+    "sass",
+    "theming"
+  ],
+  "type": "module",
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "types": "./types/lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs",
+      "types": "./types/lib/index.d.ts"
+    },
+    "./styles.css": "./tokens.css",
+    "./tokens.css": "./tokens.css",
+    "./tokens.scss": "./tokens.scss",
+    "./styles.scss": "./tokens.scss",
+    "./themes/*.css": "./themes/*.css",
+    "./components/*.css": "./components/*.css"
+  },
+  "files": [
+    "index.cjs",
+    "index.js",
+    "tokens.css",
+    "tokens.scss",
+    "themes/",
+    "components/",
+    "types/",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/themes/blue.css

@@ -0,0 +1,32 @@
+.bm-blue,
+.bm-light.bm-blue,
+[data-bm-theme~="bm-light"][data-bm-theme~="bm-blue"] {
+  --bm-theme-color-brand-100: var(--bm-primitive-color-blue-100, #ebf9ff);
+  --bm-theme-color-brand-200: var(--bm-primitive-color-blue-200, #ccf0ff);
+  --bm-theme-color-brand-300: var(--bm-primitive-color-blue-300, #9be1ff);
+  --bm-theme-color-brand-400: var(--bm-primitive-color-blue-400, #64cefb);
+  --bm-theme-color-brand-500: var(--bm-primitive-color-blue-500, #14b9ff);
+  --bm-theme-color-brand-600: var(--bm-primitive-color-blue-600, #0095e0);
+  --bm-theme-color-brand-650: var(--bm-primitive-color-blue-650, #0081c2);
+  --bm-theme-color-brand-700: var(--bm-primitive-color-blue-700, #006ead);
+  --bm-theme-color-brand-800: var(--bm-primitive-color-blue-800, #00528c);
+  --bm-theme-color-brand-900: var(--bm-primitive-color-blue-900, #003f73);
+  --bm-theme-color-brand-1000: var(--bm-primitive-color-blue-1000, #002f57);
+  --bm-theme-color-brand-1100: var(--bm-primitive-color-blue-1100, #001c33);
+}
+.bm-blue,
+.bm-dark.bm-blue,
+[data-bm-theme~="bm-dark"][data-bm-theme~="bm-blue"] {
+  --bm-theme-color-brand-100: var(--bm-primitive-color-blue-100, #ebf9ff);
+  --bm-theme-color-brand-200: var(--bm-primitive-color-blue-200, #ccf0ff);
+  --bm-theme-color-brand-300: var(--bm-primitive-color-blue-300, #9be1ff);
+  --bm-theme-color-brand-400: var(--bm-primitive-color-blue-400, #64cefb);
+  --bm-theme-color-brand-500: var(--bm-primitive-color-blue-500, #14b9ff);
+  --bm-theme-color-brand-600: var(--bm-primitive-color-blue-600, #0095e0);
+  --bm-theme-color-brand-650: var(--bm-primitive-color-blue-650, #0081c2);
+  --bm-theme-color-brand-700: var(--bm-primitive-color-blue-700, #006ead);
+  --bm-theme-color-brand-800: var(--bm-primitive-color-blue-800, #00528c);
+  --bm-theme-color-brand-900: var(--bm-primitive-color-blue-900, #003f73);
+  --bm-theme-color-brand-1000: var(--bm-primitive-color-blue-1000, #002f57);
+  --bm-theme-color-brand-1100: var(--bm-primitive-color-blue-1100, #001c33);
+}

package/themes/green.css

@@ -0,0 +1,44 @@
+.bm-green,
+.bm-light.bm-green,
+[data-bm-theme~="bm-light"][data-bm-theme~="bm-green"] {
+  --bm-theme-color-brand-100: var(--bm-primitive-color-lime-green-100, #f7ffcc);
+  --bm-theme-color-brand-200: var(--bm-primitive-color-lime-green-200, #f1ffa4);
+  --bm-theme-color-brand-300: var(--bm-primitive-color-lime-green-300, #daee6b);
+  --bm-theme-color-brand-400: var(--bm-primitive-color-lime-green-400, #bed733);
+  --bm-theme-color-brand-500: var(--bm-primitive-color-lime-green-500, #8dc002);
+  --bm-theme-color-brand-600: var(--bm-primitive-color-lime-green-600, #5c9e14);
+  --bm-theme-color-brand-650: var(--bm-primitive-color-lime-green-650, #438a00);
+  --bm-theme-color-brand-700: var(--bm-primitive-color-lime-green-700, #358000);
+  --bm-theme-color-brand-800: var(--bm-primitive-color-lime-green-800, #1d5700);
+  --bm-theme-color-brand-900: var(--bm-primitive-color-lime-green-900, #1e4700);
+  --bm-theme-color-brand-1000: var(
+    --bm-primitive-color-lime-green-1000,
+    #173800
+  );
+  --bm-theme-color-brand-1100: var(
+    --bm-primitive-color-lime-green-1100,
+    #0d1f00
+  );
+}
+.bm-green,
+.bm-dark.bm-green,
+[data-bm-theme~="bm-dark"][data-bm-theme~="bm-green"] {
+  --bm-theme-color-brand-100: var(--bm-primitive-color-lime-green-100, #f7ffcc);
+  --bm-theme-color-brand-200: var(--bm-primitive-color-lime-green-200, #f1ffa4);
+  --bm-theme-color-brand-300: var(--bm-primitive-color-lime-green-300, #daee6b);
+  --bm-theme-color-brand-400: var(--bm-primitive-color-lime-green-400, #bed733);
+  --bm-theme-color-brand-500: var(--bm-primitive-color-lime-green-500, #8dc002);
+  --bm-theme-color-brand-600: var(--bm-primitive-color-lime-green-600, #5c9e14);
+  --bm-theme-color-brand-650: var(--bm-primitive-color-lime-green-650, #438a00);
+  --bm-theme-color-brand-700: var(--bm-primitive-color-lime-green-700, #358000);
+  --bm-theme-color-brand-800: var(--bm-primitive-color-lime-green-800, #1d5700);
+  --bm-theme-color-brand-900: var(--bm-primitive-color-lime-green-900, #1e4700);
+  --bm-theme-color-brand-1000: var(
+    --bm-primitive-color-lime-green-1000,
+    #173800
+  );
+  --bm-theme-color-brand-1100: var(
+    --bm-primitive-color-lime-green-1100,
+    #0d1f00
+  );
+}

package/themes/neutral.css

@@ -0,0 +1,32 @@
+.bm-neutral,
+.bm-light.bm-neutral,
+[data-bm-theme~="bm-light"][data-bm-theme~="bm-neutral"] {
+  --bm-theme-color-brand-100: var(--bm-primitive-color-gray-100, #f2f5f8);
+  --bm-theme-color-brand-200: var(--bm-primitive-color-gray-200, #dfe7ec);
+  --bm-theme-color-brand-300: var(--bm-primitive-color-gray-300, #d1dae0);
+  --bm-theme-color-brand-400: var(--bm-primitive-color-gray-400, #c3cdd5);
+  --bm-theme-color-brand-500: var(--bm-primitive-color-gray-500, #9fafbc);
+  --bm-theme-color-brand-600: var(--bm-primitive-color-gray-600, #8697a5);
+  --bm-theme-color-brand-650: var(--bm-primitive-color-gray-650, #6b7f8f);
+  --bm-theme-color-brand-700: var(--bm-primitive-color-gray-700, #576775);
+  --bm-theme-color-brand-800: var(--bm-primitive-color-gray-800, #465967);
+  --bm-theme-color-brand-900: var(--bm-primitive-color-gray-900, #32424e);
+  --bm-theme-color-brand-1000: var(--bm-primitive-color-gray-1000, #202e39);
+  --bm-theme-color-brand-1100: var(--bm-primitive-color-gray-1100, #141d24);
+}
+.bm-neutral,
+.bm-dark.bm-neutral,
+[data-bm-theme~="bm-dark"][data-bm-theme~="bm-neutral"] {
+  --bm-theme-color-brand-100: var(--bm-primitive-color-gray-100, #f2f5f8);
+  --bm-theme-color-brand-200: var(--bm-primitive-color-gray-200, #dfe7ec);
+  --bm-theme-color-brand-300: var(--bm-primitive-color-gray-300, #d1dae0);
+  --bm-theme-color-brand-400: var(--bm-primitive-color-gray-400, #c3cdd5);
+  --bm-theme-color-brand-500: var(--bm-primitive-color-gray-500, #9fafbc);
+  --bm-theme-color-brand-600: var(--bm-primitive-color-gray-600, #8697a5);
+  --bm-theme-color-brand-650: var(--bm-primitive-color-gray-650, #6b7f8f);
+  --bm-theme-color-brand-700: var(--bm-primitive-color-gray-700, #576775);
+  --bm-theme-color-brand-800: var(--bm-primitive-color-gray-800, #465967);
+  --bm-theme-color-brand-900: var(--bm-primitive-color-gray-900, #32424e);
+  --bm-theme-color-brand-1000: var(--bm-primitive-color-gray-1000, #202e39);
+  --bm-theme-color-brand-1100: var(--bm-primitive-color-gray-1100, #141d24);
+}