@nswds/tokens 2.3.0 → 2.4.0

package/src/css/colors/global/rgb.css

@@ -0,0 +1,192 @@
+:root {
+  --nsw-grey-50: rgb(250, 250, 250);
+  --nsw-grey-100: rgb(245, 245, 245);
+  --nsw-grey-150: rgb(240, 240, 240);
+  --nsw-grey-200: rgb(235, 235, 235);
+  --nsw-grey-250: rgb(229, 228, 229);
+  --nsw-grey-300: rgb(222, 222, 225);
+  --nsw-grey-350: rgb(214, 216, 220);
+  --nsw-grey-400: rgb(205, 211, 214);
+  --nsw-grey-450: rgb(170, 176, 180);
+  --nsw-grey-500: rgb(136, 143, 146);
+  --nsw-grey-550: rgb(104, 111, 114);
+  --nsw-grey-600: rgb(73, 80, 84);
+  --nsw-grey-650: rgb(63, 69, 73);
+  --nsw-grey-700: rgb(53, 59, 63);
+  --nsw-grey-750: rgb(43, 49, 53);
+  --nsw-grey-800: rgb(34, 39, 43);
+  --nsw-grey-850: rgb(24, 28, 31);
+  --nsw-grey-900: rgb(14, 17, 19);
+  --nsw-grey-950: rgb(5, 7, 9);
+  --nsw-green-50: rgb(245, 255, 246);
+  --nsw-green-100: rgb(236, 253, 238);
+  --nsw-green-150: rgb(228, 252, 231);
+  --nsw-green-200: rgb(219, 250, 223);
+  --nsw-green-250: rgb(207, 247, 212);
+  --nsw-green-300: rgb(194, 244, 201);
+  --nsw-green-350: rgb(181, 240, 190);
+  --nsw-green-400: rgb(168, 237, 179);
+  --nsw-green-450: rgb(138, 220, 152);
+  --nsw-green-500: rgb(106, 204, 125);
+  --nsw-green-550: rgb(69, 187, 98);
+  --nsw-green-600: rgb(0, 170, 69);
+  --nsw-green-650: rgb(7, 142, 50);
+  --nsw-green-700: rgb(7, 115, 32);
+  --nsw-green-750: rgb(3, 89, 15);
+  --nsw-green-800: rgb(0, 64, 0);
+  --nsw-green-850: rgb(0, 48, 0);
+  --nsw-green-900: rgb(0, 32, 0);
+  --nsw-green-950: rgb(0, 17, 0);
+  --nsw-teal-50: rgb(242, 251, 250);
+  --nsw-teal-100: rgb(231, 247, 245);
+  --nsw-teal-150: rgb(220, 242, 239);
+  --nsw-teal-200: rgb(209, 238, 234);
+  --nsw-teal-250: rgb(193, 234, 231);
+  --nsw-teal-300: rgb(176, 229, 229);
+  --nsw-teal-350: rgb(158, 224, 229);
+  --nsw-teal-400: rgb(140, 219, 229);
+  --nsw-teal-450: rgb(117, 196, 207);
+  --nsw-teal-500: rgb(94, 172, 185);
+  --nsw-teal-550: rgb(70, 150, 163);
+  --nsw-teal-600: rgb(46, 128, 142);
+  --nsw-teal-650: rgb(37, 111, 123);
+  --nsw-teal-700: rgb(28, 95, 105);
+  --nsw-teal-750: rgb(20, 78, 88);
+  --nsw-teal-800: rgb(11, 63, 71);
+  --nsw-teal-850: rgb(4, 47, 53);
+  --nsw-teal-900: rgb(1, 31, 36);
+  --nsw-teal-950: rgb(0, 17, 20);
+  --nsw-blue-50: rgb(240, 251, 255);
+  --nsw-blue-100: rgb(228, 246, 255);
+  --nsw-blue-150: rgb(215, 242, 254);
+  --nsw-blue-200: rgb(203, 237, 253);
+  --nsw-blue-250: rgb(188, 234, 254);
+  --nsw-blue-300: rgb(173, 231, 255);
+  --nsw-blue-350: rgb(157, 227, 255);
+  --nsw-blue-400: rgb(140, 224, 255);
+  --nsw-blue-450: rgb(90, 201, 255);
+  --nsw-blue-500: rgb(38, 174, 255);
+  --nsw-blue-550: rgb(0, 143, 255);
+  --nsw-blue-600: rgb(20, 108, 253);
+  --nsw-blue-650: rgb(12, 90, 212);
+  --nsw-blue-700: rgb(5, 72, 173);
+  --nsw-blue-750: rgb(2, 54, 136);
+  --nsw-blue-800: rgb(0, 38, 100);
+  --nsw-blue-850: rgb(0, 26, 77);
+  --nsw-blue-900: rgb(0, 16, 55);
+  --nsw-blue-950: rgb(0, 6, 34);
+  --nsw-purple-50: rgb(249, 247, 255);
+  --nsw-purple-100: rgb(242, 240, 255);
+  --nsw-purple-150: rgb(236, 232, 254);
+  --nsw-purple-200: rgb(230, 225, 253);
+  --nsw-purple-250: rgb(224, 217, 254);
+  --nsw-purple-300: rgb(218, 208, 254);
+  --nsw-purple-350: rgb(212, 200, 255);
+  --nsw-purple-400: rgb(206, 191, 255);
+  --nsw-purple-450: rgb(186, 166, 252);
+  --nsw-purple-500: rgb(166, 141, 249);
+  --nsw-purple-550: rgb(147, 114, 245);
+  --nsw-purple-600: rgb(128, 85, 241);
+  --nsw-purple-650: rgb(114, 67, 207);
+  --nsw-purple-700: rgb(100, 50, 174);
+  --nsw-purple-750: rgb(84, 33, 142);
+  --nsw-purple-800: rgb(68, 17, 112);
+  --nsw-purple-850: rgb(51, 8, 86);
+  --nsw-purple-900: rgb(35, 2, 62);
+  --nsw-purple-950: rgb(19, 0, 39);
+  --nsw-fuchsia-50: rgb(255, 246, 253);
+  --nsw-fuchsia-100: rgb(255, 238, 249);
+  --nsw-fuchsia-150: rgb(254, 230, 245);
+  --nsw-fuchsia-200: rgb(253, 222, 242);
+  --nsw-fuchsia-250: rgb(251, 212, 239);
+  --nsw-fuchsia-300: rgb(249, 201, 235);
+  --nsw-fuchsia-350: rgb(247, 191, 233);
+  --nsw-fuchsia-400: rgb(244, 181, 230);
+  --nsw-fuchsia-450: rgb(239, 150, 218);
+  --nsw-fuchsia-500: rgb(233, 117, 204);
+  --nsw-fuchsia-550: rgb(225, 80, 190);
+  --nsw-fuchsia-600: rgb(217, 18, 174);
+  --nsw-fuchsia-650: rgb(187, 12, 148);
+  --nsw-fuchsia-700: rgb(157, 6, 123);
+  --nsw-fuchsia-750: rgb(129, 2, 100);
+  --nsw-fuchsia-800: rgb(101, 0, 77);
+  --nsw-fuchsia-850: rgb(77, 0, 58);
+  --nsw-fuchsia-900: rgb(55, 0, 40);
+  --nsw-fuchsia-950: rgb(34, 0, 23);
+  --nsw-red-50: rgb(255, 248, 249);
+  --nsw-red-100: rgb(255, 242, 244);
+  --nsw-red-150: rgb(255, 236, 239);
+  --nsw-red-200: rgb(255, 230, 234);
+  --nsw-red-250: rgb(255, 219, 224);
+  --nsw-red-300: rgb(255, 207, 214);
+  --nsw-red-350: rgb(255, 196, 204);
+  --nsw-red-400: rgb(255, 184, 193);
+  --nsw-red-450: rgb(248, 151, 162);
+  --nsw-red-500: rgb(239, 117, 129);
+  --nsw-red-550: rgb(228, 79, 95);
+  --nsw-red-600: rgb(215, 21, 58);
+  --nsw-red-650: rgb(185, 14, 50);
+  --nsw-red-700: rgb(155, 7, 42);
+  --nsw-red-750: rgb(126, 3, 34);
+  --nsw-red-800: rgb(99, 0, 25);
+  --nsw-red-850: rgb(76, 0, 16);
+  --nsw-red-900: rgb(54, 0, 8);
+  --nsw-red-950: rgb(33, 0, 3);
+  --nsw-orange-50: rgb(255, 250, 246);
+  --nsw-orange-100: rgb(255, 246, 238);
+  --nsw-orange-150: rgb(254, 241, 231);
+  --nsw-orange-200: rgb(253, 237, 223);
+  --nsw-orange-250: rgb(254, 229, 206);
+  --nsw-orange-300: rgb(255, 221, 189);
+  --nsw-orange-350: rgb(255, 214, 171);
+  --nsw-orange-400: rgb(255, 206, 153);
+  --nsw-orange-450: rgb(253, 182, 120);
+  --nsw-orange-500: rgb(251, 157, 88);
+  --nsw-orange-550: rgb(247, 129, 57);
+  --nsw-orange-600: rgb(243, 99, 27);
+  --nsw-orange-650: rgb(219, 81, 21);
+  --nsw-orange-700: rgb(195, 63, 14);
+  --nsw-orange-750: rgb(171, 46, 6);
+  --nsw-orange-800: rgb(148, 27, 0);
+  --nsw-orange-850: rgb(115, 15, 0);
+  --nsw-orange-900: rgb(83, 4, 0);
+  --nsw-orange-950: rgb(53, 0, 0);
+  --nsw-yellow-50: rgb(255, 252, 240);
+  --nsw-yellow-100: rgb(255, 250, 229);
+  --nsw-yellow-150: rgb(255, 247, 218);
+  --nsw-yellow-200: rgb(255, 244, 207);
+  --nsw-yellow-250: rgb(255, 241, 194);
+  --nsw-yellow-300: rgb(254, 238, 181);
+  --nsw-yellow-350: rgb(254, 234, 168);
+  --nsw-yellow-400: rgb(253, 231, 154);
+  --nsw-yellow-450: rgb(251, 218, 128);
+  --nsw-yellow-500: rgb(250, 205, 99);
+  --nsw-yellow-550: rgb(250, 190, 66);
+  --nsw-yellow-600: rgb(250, 175, 5);
+  --nsw-yellow-650: rgb(212, 148, 2);
+  --nsw-yellow-700: rgb(175, 122, 1);
+  --nsw-yellow-750: rgb(139, 96, 0);
+  --nsw-yellow-800: rgb(105, 72, 0);
+  --nsw-yellow-850: rgb(80, 53, 0);
+  --nsw-yellow-900: rgb(57, 36, 0);
+  --nsw-yellow-950: rgb(34, 19, 0);
+  --nsw-brown-50: rgb(251, 248, 244);
+  --nsw-brown-100: rgb(246, 241, 234);
+  --nsw-brown-150: rgb(242, 234, 225);
+  --nsw-brown-200: rgb(237, 227, 215);
+  --nsw-brown-250: rgb(236, 222, 206);
+  --nsw-brown-300: rgb(234, 218, 198);
+  --nsw-brown-350: rgb(233, 213, 189);
+  --nsw-brown-400: rgb(232, 208, 181);
+  --nsw-brown-450: rgb(219, 191, 159);
+  --nsw-brown-500: rgb(207, 174, 137);
+  --nsw-brown-550: rgb(194, 157, 115);
+  --nsw-brown-600: rgb(182, 141, 93);
+  --nsw-brown-650: rgb(156, 118, 75);
+  --nsw-brown-700: rgb(130, 96, 58);
+  --nsw-brown-750: rgb(106, 75, 41);
+  --nsw-brown-800: rgb(82, 55, 25);
+  --nsw-brown-850: rgb(62, 40, 15);
+  --nsw-brown-900: rgb(43, 26, 7);
+  --nsw-brown-950: rgb(25, 13, 2);
+}

package/src/css/colors/themes/masterbrand/hex.css

@@ -0,0 +1,2 @@
+:root {
+}

package/src/css/colors/themes/masterbrand/hsl.css

@@ -0,0 +1,2 @@
+:root {
+}

package/src/css/colors/themes/masterbrand/oklch.css

@@ -0,0 +1,2 @@
+:root {
+}

package/src/css/colors/themes/masterbrand/rgb.css

@@ -0,0 +1,2 @@
+:root {
+}

package/src/index.ts

@@ -0,0 +1,295 @@
+// JSON Tokens Imports
+const globalColorHex = require('../tokens/global/color/hex.json');
+const globalColorHsl = require('../tokens/global/color/hsl.json');
+const globalColorOklch = require('../tokens/global/color/oklch.json');
+const globalColorRgb = require('../tokens/global/color/rgb.json');
+
+const masterbrandColorHex = require('../tokens/themes/masterbrand/color/hex.json');
+const masterbrandColorHsl = require('../tokens/themes/masterbrand/color/hsl.json');
+const masterbrandColorOklch = require('../tokens/themes/masterbrand/color/oklch.json');
+const masterbrandColorRgb = require('../tokens/themes/masterbrand/color/rgb.json');
+
+// CSS Imports
+import * as globalCssHex from './css/colors/global/hex.css';
+import * as globalCssHsl from './css/colors/global/hsl.css';
+import * as globalCssOklch from './css/colors/global/oklch.css';
+import * as globalCssRgb from './css/colors/global/rgb.css';
+import * as masterbrandCssHex from './css/colors/themes/masterbrand/hex.css';
+import * as masterbrandCssHsl from './css/colors/themes/masterbrand/hsl.css';
+import * as masterbrandCssOklch from './css/colors/themes/masterbrand/oklch.css';
+import * as masterbrandCssRgb from './css/colors/themes/masterbrand/rgb.css';
+
+// JavaScript Imports
+import * as globalJsHex from './js/colors/global/hex.js';
+import * as globalJsHsl from './js/colors/global/hsl.js';
+import * as globalJsOklch from './js/colors/global/oklch.js';
+import * as globalJsRgb from './js/colors/global/rgb.js';
+import * as masterbrandJsHex from './js/colors/themes/masterbrand/hex.js';
+import * as masterbrandJsHsl from './js/colors/themes/masterbrand/hsl.js';
+import * as masterbrandJsOklch from './js/colors/themes/masterbrand/oklch.js';
+import * as masterbrandJsRgb from './js/colors/themes/masterbrand/rgb.js';
+
+// JSON Imports
+const globalJsonHex = require('./json/colors/global/hex.json');
+const globalJsonHsl = require('./json/colors/global/hsl.json');
+const globalJsonOklch = require('./json/colors/global/oklch.json');
+const globalJsonRgb = require('./json/colors/global/rgb.json');
+const masterbrandJsonHex = require('./json/colors/themes/masterbrand/hex.json');
+const masterbrandJsonHsl = require('./json/colors/themes/masterbrand/hsl.json');
+const masterbrandJsonOklch = require('./json/colors/themes/masterbrand/oklch.json');
+const masterbrandJsonRgb = require('./json/colors/themes/masterbrand/rgb.json');
+
+// LESS Imports
+import * as globalLessHex from './less/colors/global/hex.less';
+import * as globalLessHsl from './less/colors/global/hsl.less';
+import * as globalLessOklch from './less/colors/global/oklch.less';
+import * as globalLessRgb from './less/colors/global/rgb.less';
+import * as masterbrandLessHex from './less/colors/themes/masterbrand/hex.less';
+import * as masterbrandLessHsl from './less/colors/themes/masterbrand/hsl.less';
+import * as masterbrandLessOklch from './less/colors/themes/masterbrand/oklch.less';
+import * as masterbrandLessRgb from './less/colors/themes/masterbrand/rgb.less';
+
+// SCSS Imports
+import * as globalScssHex from './scss/colors/global/hex.scss';
+import * as globalScssHsl from './scss/colors/global/hsl.scss';
+import * as globalScssOklch from './scss/colors/global/oklch.scss';
+import * as globalScssRgb from './scss/colors/global/rgb.scss';
+import * as masterbrandScssHex from './scss/colors/themes/masterbrand/hex.scss';
+import * as masterbrandScssHsl from './scss/colors/themes/masterbrand/hsl.scss';
+import * as masterbrandScssOklch from './scss/colors/themes/masterbrand/oklch.scss';
+import * as masterbrandScssRgb from './scss/colors/themes/masterbrand/rgb.scss';
+
+// Tailwind Imports
+import * as globalTailwindHex from './tailwind/colors/global/hex.css';
+import * as globalTailwindHsl from './tailwind/colors/global/hsl.css';
+import * as globalTailwindOklch from './tailwind/colors/global/oklch.css';
+import * as globalTailwindRgb from './tailwind/colors/global/rgb.css';
+import * as masterbrandTailwindHex from './tailwind/colors/themes/masterbrand/hex.css';
+import * as masterbrandTailwindHsl from './tailwind/colors/themes/masterbrand/hsl.css';
+import * as masterbrandTailwindOklch from './tailwind/colors/themes/masterbrand/oklch.css';
+import * as masterbrandTailwindRgb from './tailwind/colors/themes/masterbrand/rgb.css';
+
+// TypeScript Imports
+import * as globalTsHex from './ts/colors/global/hex';
+import * as globalTsHsl from './ts/colors/global/hsl';
+import * as globalTsOklch from './ts/colors/global/oklch';
+import * as globalTsRgb from './ts/colors/global/rgb';
+import * as masterbrandTsHex from './ts/colors/themes/masterbrand/hex';
+import * as masterbrandTsHsl from './ts/colors/themes/masterbrand/hsl';
+import * as masterbrandTsOklch from './ts/colors/themes/masterbrand/oklch';
+import * as masterbrandTsRgb from './ts/colors/themes/masterbrand/rgb';
+
+export const tokens = {
+  colors: {
+    global: {
+      hex: globalColorHex,
+      hsl: globalColorHsl,
+      oklch: globalColorOklch,
+      rgb: globalColorRgb
+    },
+    themes: {
+      masterbrand: {
+        hex: masterbrandColorHex,
+        hsl: masterbrandColorHsl,
+        oklch: masterbrandColorOklch,
+        rgb: masterbrandColorRgb
+      }
+    }
+  },
+  css: {
+    global: {
+      hex: globalCssHex,
+      hsl: globalCssHsl,
+      oklch: globalCssOklch,
+      rgb: globalCssRgb
+    },
+    themes: {
+      masterbrand: {
+        hex: masterbrandCssHex,
+        hsl: masterbrandCssHsl,
+        oklch: masterbrandCssOklch,
+        rgb: masterbrandCssRgb
+      }
+    }
+  },
+  js: {
+    global: {
+      hex: globalJsHex,
+      hsl: globalJsHsl,
+      oklch: globalJsOklch,
+      rgb: globalJsRgb
+    },
+    themes: {
+      masterbrand: {
+        hex: masterbrandJsHex,
+        hsl: masterbrandJsHsl,
+        oklch: masterbrandJsOklch,
+        rgb: masterbrandJsRgb
+      }
+    }
+  },
+  json: {
+    global: {
+      hex: globalJsonHex,
+      hsl: globalJsonHsl,
+      oklch: globalJsonOklch,
+      rgb: globalJsonRgb
+    },
+    themes: {
+      masterbrand: {
+        hex: masterbrandJsonHex,
+        hsl: masterbrandJsonHsl,
+        oklch: masterbrandJsonOklch,
+        rgb: masterbrandJsonRgb
+      }
+    }
+  },
+  less: {
+    global: {
+      hex: globalLessHex,
+      hsl: globalLessHsl,
+      oklch: globalLessOklch,
+      rgb: globalLessRgb
+    },
+    themes: {
+      masterbrand: {
+        hex: masterbrandLessHex,
+        hsl: masterbrandLessHsl,
+        oklch: masterbrandLessOklch,
+        rgb: masterbrandLessRgb
+      }
+    }
+  },
+  scss: {
+    global: {
+      hex: globalScssHex,
+      hsl: globalScssHsl,
+      oklch: globalScssOklch,
+      rgb: globalScssRgb
+    },
+    themes: {
+      masterbrand: {
+        hex: masterbrandScssHex,
+        hsl: masterbrandScssHsl,
+        oklch: masterbrandScssOklch,
+        rgb: masterbrandScssRgb
+      }
+    }
+  },
+  tailwind: {
+    global: {
+      hex: globalTailwindHex,
+      hsl: globalTailwindHsl,
+      oklch: globalTailwindOklch,
+      rgb: globalTailwindRgb
+    },
+    themes: {
+      masterbrand: {
+        hex: masterbrandTailwindHex,
+        hsl: masterbrandTailwindHsl,
+        oklch: masterbrandTailwindOklch,
+        rgb: masterbrandTailwindRgb
+      }
+    }
+  },
+  ts: {
+    global: {
+      hex: globalTsHex,
+      hsl: globalTsHsl,
+      oklch: globalTsOklch,
+      rgb: globalTsRgb
+    },
+    themes: {
+      masterbrand: {
+        hex: masterbrandTsHex,
+        hsl: masterbrandTsHsl,
+        oklch: masterbrandTsOklch,
+        rgb: masterbrandTsRgb
+      }
+    }
+  }
+};
+
+export const colorTokens = tokens.colors;
+export const cssTokens = tokens.css;
+export const jsTokens = tokens.js;
+export const jsonTokens = tokens.json;
+export const lessTokens = tokens.less;
+export const scssTokens = tokens.scss;
+export const tailwindTokens = tokens.tailwind;
+export const tsTokens = tokens.ts;
+
+// Export icon paths
+export const icons = {
+  accountCircle: './icons/account_circle.svg',
+  attachFile: './icons/attach_file.svg',
+  cancel: './icons/cancel.svg',
+  check: './icons/check.svg',
+  checkCircle: './icons/check_circle.svg',
+  chevronDown: './icons/chevron_down.svg',
+  chevronLeft: './icons/chevron_left.svg',
+  chevronRight: './icons/chevron_right.svg',
+  chevronUp: './icons/chevron_up.svg',
+  close: './icons/close.svg',
+  collapseAll: './icons/collapse_all.svg',
+  computer: './icons/computer.svg',
+  copy: './icons/copy.svg',
+  darkMode: './icons/dark_mode.svg',
+  delete: './icons/delete.svg',
+  desktop: './icons/desktop.svg',
+  displaySettings: './icons/display_settings.svg',
+  dockToLeft: './icons/dock_to_left.svg',
+  dockToRight: './icons/dock_to_right.svg',
+  doubleArrowLeft: './icons/double_arrow_left.svg',
+  doubleArrowRight: './icons/double_arrow_right.svg',
+  download: './icons/download.svg',
+  east: './icons/east.svg',
+  error: './icons/error.svg',
+  exclamation: './icons/exclamation.svg',
+  eye: './icons/eye.svg',
+  favorite: './icons/favorite.svg',
+  help: './icons/help.svg',
+  info: './icons/info.svg',
+  language: './icons/language.svg',
+  lightMode: './icons/light_mode.svg',
+  link: './icons/link.svg',
+  login: './icons/login.svg',
+  logout: './icons/logout.svg',
+  menu: './icons/menu.svg',
+  moreHoriz: './icons/more_horiz.svg',
+  moreVert: './icons/more_vert.svg',
+  north: './icons/north.svg',
+  openInNew: './icons/open_in_new.svg',
+  print: './icons/print.svg',
+  progressActivity: './icons/progress_activity.svg',
+  remove: './icons/remove.svg',
+  search: './icons/search.svg',
+  settingsBrightness: './icons/settings_brightness.svg',
+  share: './icons/share.svg',
+  sideNavigation: './icons/side_navigation.svg',
+  south: './icons/south.svg',
+  unfoldLess: './icons/unfold_less.svg',
+  unfoldMore: './icons/unfold_more.svg',
+  upload: './icons/upload.svg',
+  west: './icons/west.svg'
+};
+
+// Export brand assets
+export const brand = {
+  iconDark: {
+    ico: './brand/icon-dark.ico',
+    png: './brand/icon-dark.png',
+    svg: './brand/icon-dark.svg'
+  },
+  iconLight: {
+    ico: './brand/icon-light.ico',
+    png: './brand/icon-light.png',
+    svg: './brand/icon-light.svg'
+  },
+  icon: './brand/icon.svg',
+  logo: {
+    png: './brand/logo.png',
+    svg: './brand/logo.svg'
+  },
+  placeholder: './brand/placeholder.svg'
+};