@nswds/tokens 2.2.1 → 2.4.0

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'
+};

package/src/js/colors/global/hex.js

@@ -0,0 +1,210 @@
+export const nswGrey = {
+  50: '#fafafa',
+  100: '#f5f5f5',
+  150: '#f0f0f0',
+  200: '#ebebeb',
+  250: '#e5e4e5',
+  300: '#dedee1',
+  350: '#d6d8dc',
+  400: '#cdd3d6',
+  450: '#aab0b4',
+  500: '#888f92',
+  550: '#686f72',
+  600: '#495054',
+  650: '#3f4549',
+  700: '#353b3f',
+  750: '#2b3135',
+  800: '#22272b',
+  850: '#181c1f',
+  900: '#0e1113',
+  950: '#050709',
+}
+export const nswGreen = {
+  50: '#f5fff6',
+  100: '#ecfdee',
+  150: '#e4fce7',
+  200: '#dbfadf',
+  250: '#cff7d4',
+  300: '#c2f4c9',
+  350: '#b5f0be',
+  400: '#a8edb3',
+  450: '#8adc98',
+  500: '#6acc7d',
+  550: '#45bb62',
+  600: '#00aa45',
+  650: '#078e32',
+  700: '#077320',
+  750: '#03590f',
+  800: '#004000',
+  850: '#003000',
+  900: '#002000',
+  950: '#001100',
+}
+export const nswTeal = {
+  50: '#f2fbfa',
+  100: '#e7f7f5',
+  150: '#dcf2ef',
+  200: '#d1eeea',
+  250: '#c1eae7',
+  300: '#b0e5e5',
+  350: '#9ee0e5',
+  400: '#8cdbe5',
+  450: '#75c4cf',
+  500: '#5eacb9',
+  550: '#4696a3',
+  600: '#2e808e',
+  650: '#256f7b',
+  700: '#1c5f69',
+  750: '#144e58',
+  800: '#0b3f47',
+  850: '#042f35',
+  900: '#011f24',
+  950: '#001114',
+}
+export const nswBlue = {
+  50: '#f0fbff',
+  100: '#e4f6ff',
+  150: '#d7f2fe',
+  200: '#cbedfd',
+  250: '#bceafe',
+  300: '#ade7ff',
+  350: '#9de3ff',
+  400: '#8ce0ff',
+  450: '#5ac9ff',
+  500: '#26aeff',
+  550: '#008fff',
+  600: '#146cfd',
+  650: '#0c5ad4',
+  700: '#0548ad',
+  750: '#023688',
+  800: '#002664',
+  850: '#001a4d',
+  900: '#001037',
+  950: '#000622',
+}
+export const nswPurple = {
+  50: '#f9f7ff',
+  100: '#f2f0ff',
+  150: '#ece8fe',
+  200: '#e6e1fd',
+  250: '#e0d9fe',
+  300: '#dad0fe',
+  350: '#d4c8ff',
+  400: '#cebfff',
+  450: '#baa6fc',
+  500: '#a68df9',
+  550: '#9372f5',
+  600: '#8055f1',
+  650: '#7243cf',
+  700: '#6432ae',
+  750: '#54218e',
+  800: '#441170',
+  850: '#330856',
+  900: '#23023e',
+  950: '#130027',
+}
+export const nswFuchsia = {
+  50: '#fff6fd',
+  100: '#ffeef9',
+  150: '#fee6f5',
+  200: '#fddef2',
+  250: '#fbd4ef',
+  300: '#f9c9eb',
+  350: '#f7bfe9',
+  400: '#f4b5e6',
+  450: '#ef96da',
+  500: '#e975cc',
+  550: '#e150be',
+  600: '#d912ae',
+  650: '#bb0c94',
+  700: '#9d067b',
+  750: '#810264',
+  800: '#65004d',
+  850: '#4d003a',
+  900: '#370028',
+  950: '#220017',
+}
+export const nswRed = {
+  50: '#fff8f9',
+  100: '#fff2f4',
+  150: '#ffecef',
+  200: '#ffe6ea',
+  250: '#ffdbe0',
+  300: '#ffcfd6',
+  350: '#ffc4cc',
+  400: '#ffb8c1',
+  450: '#f897a2',
+  500: '#ef7581',
+  550: '#e44f5f',
+  600: '#d7153a',
+  650: '#b90e32',
+  700: '#9b072a',
+  750: '#7e0322',
+  800: '#630019',
+  850: '#4c0010',
+  900: '#360008',
+  950: '#210003',
+}
+export const nswOrange = {
+  50: '#fffaf6',
+  100: '#fff6ee',
+  150: '#fef1e7',
+  200: '#fdeddf',
+  250: '#fee5ce',
+  300: '#ffddbd',
+  350: '#ffd6ab',
+  400: '#ffce99',
+  450: '#fdb678',
+  500: '#fb9d58',
+  550: '#f78139',
+  600: '#f3631b',
+  650: '#db5115',
+  700: '#c33f0e',
+  750: '#ab2e06',
+  800: '#941b00',
+  850: '#730f00',
+  900: '#530400',
+  950: '#350000',
+}
+export const nswYellow = {
+  50: '#fffcf0',
+  100: '#fffae5',
+  150: '#fff7da',
+  200: '#fff4cf',
+  250: '#fff1c2',
+  300: '#feeeb5',
+  350: '#feeaa8',
+  400: '#fde79a',
+  450: '#fbda80',
+  500: '#facd63',
+  550: '#fabe42',
+  600: '#faaf05',
+  650: '#d49402',
+  700: '#af7a01',
+  750: '#8b6000',
+  800: '#694800',
+  850: '#503500',
+  900: '#392400',
+  950: '#221300',
+}
+export const nswBrown = {
+  50: '#fbf8f4',
+  100: '#f6f1ea',
+  150: '#f2eae1',
+  200: '#ede3d7',
+  250: '#ecdece',
+  300: '#eadac6',
+  350: '#e9d5bd',
+  400: '#e8d0b5',
+  450: '#dbbf9f',
+  500: '#cfae89',
+  550: '#c29d73',
+  600: '#b68d5d',
+  650: '#9c764b',
+  700: '#82603a',
+  750: '#6a4b29',
+  800: '#523719',
+  850: '#3e280f',
+  900: '#2b1a07',
+  950: '#190d02',
+}