@nswds/tokens 2.4.0 → 2.4.1

package/dist/json/colors/global/hex.json

@@ -1 +1 @@
-{}
+{}

package/dist/json/colors/global/hsl.json

@@ -1 +1 @@
-{}
+{}

package/dist/json/colors/global/oklch.json

@@ -1 +1 @@
-{}
+{}

package/dist/json/colors/global/rgb.json

@@ -1 +1 @@
-{}
+{}

package/dist/json/colors/themes/masterbrand/hex.json

@@ -1 +1 @@
-{}
+{}

package/dist/json/colors/themes/masterbrand/hsl.json

@@ -1 +1 @@
-{}
+{}

package/dist/json/colors/themes/masterbrand/oklch.json

@@ -1 +1 @@
-{}
+{}

package/dist/json/colors/themes/masterbrand/rgb.json

@@ -1 +1 @@
-{}
+{}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nswds/tokens",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "NSW Application Design System Design Tokens",
   "homepage": "https://github.com/digitalnsw/nswds-tokens#readme",
   "repository": {
@@ -16,7 +16,8 @@
     "lint": "npx eslint . ",
     "format": "npx prettier --write .",
     "copy-styles": "cp -r src/{css,figma,js,json,less,scss,tailwind,ts} dist/",
-    "build": "tsup src/index.ts --format esm,cjs --dts --target esnext --treeshake --clean"
+    "build": "tsup src/index.ts --format esm,cjs --dts --target esnext --treeshake --clean",
+    "test:tokens": "tsx test/token-imports/esm-typescript.ts"
   },
   "tsup": {
     "entry": [
@@ -40,19 +41,16 @@
     "onSuccess": "npm run copy-styles"
   },
   "author": "NSW Design System",
-  "type": "commonjs",
+  "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    },
-    "./src/css/*": "./src/css/*",
-    "./src/scss/*": "./src/scss/*",
-    "./src/less/*": "./src/less/*"
+    }
   },
   "publishConfig": {
     "access": "public",
@@ -76,10 +74,11 @@
     "semantic-release": "^24.2.3",
     "style-loader": "^4.0.0",
     "tsup": "^8.0.2",
+    "tsx": "^4.0.0",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.28.0"
   },
   "dependencies": {
     "@eslint/eslintrc": "^3.3.1"
   }
-}
+}

package/src/index.ts

@@ -1,83 +1,84 @@
+/* eslint-disable */
 // 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 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');
+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';
+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';
+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');
+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';
+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';
+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';
+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';
+import * as globalTsHex from './ts/colors/global/hex.js'
+import * as globalTsHsl from './ts/colors/global/hsl.js'
+import * as globalTsOklch from './ts/colors/global/oklch.js'
+import * as globalTsRgb from './ts/colors/global/rgb.js'
+import * as masterbrandTsHex from './ts/colors/themes/masterbrand/hex.js'
+import * as masterbrandTsHsl from './ts/colors/themes/masterbrand/hsl.js'
+import * as masterbrandTsOklch from './ts/colors/themes/masterbrand/oklch.js'
+import * as masterbrandTsRgb from './ts/colors/themes/masterbrand/rgb.js'
 
 export const tokens = {
   colors: {
@@ -85,139 +86,139 @@ export const tokens = {
       hex: globalColorHex,
       hsl: globalColorHsl,
       oklch: globalColorOklch,
-      rgb: globalColorRgb
+      rgb: globalColorRgb,
     },
     themes: {
       masterbrand: {
         hex: masterbrandColorHex,
         hsl: masterbrandColorHsl,
         oklch: masterbrandColorOklch,
-        rgb: masterbrandColorRgb
-      }
-    }
+        rgb: masterbrandColorRgb,
+      },
+    },
   },
   css: {
     global: {
       hex: globalCssHex,
       hsl: globalCssHsl,
       oklch: globalCssOklch,
-      rgb: globalCssRgb
+      rgb: globalCssRgb,
     },
     themes: {
       masterbrand: {
         hex: masterbrandCssHex,
         hsl: masterbrandCssHsl,
         oklch: masterbrandCssOklch,
-        rgb: masterbrandCssRgb
-      }
-    }
+        rgb: masterbrandCssRgb,
+      },
+    },
   },
   js: {
     global: {
       hex: globalJsHex,
       hsl: globalJsHsl,
       oklch: globalJsOklch,
-      rgb: globalJsRgb
+      rgb: globalJsRgb,
     },
     themes: {
       masterbrand: {
         hex: masterbrandJsHex,
         hsl: masterbrandJsHsl,
         oklch: masterbrandJsOklch,
-        rgb: masterbrandJsRgb
-      }
-    }
+        rgb: masterbrandJsRgb,
+      },
+    },
   },
   json: {
     global: {
       hex: globalJsonHex,
       hsl: globalJsonHsl,
       oklch: globalJsonOklch,
-      rgb: globalJsonRgb
+      rgb: globalJsonRgb,
     },
     themes: {
       masterbrand: {
         hex: masterbrandJsonHex,
         hsl: masterbrandJsonHsl,
         oklch: masterbrandJsonOklch,
-        rgb: masterbrandJsonRgb
-      }
-    }
+        rgb: masterbrandJsonRgb,
+      },
+    },
   },
   less: {
     global: {
       hex: globalLessHex,
       hsl: globalLessHsl,
       oklch: globalLessOklch,
-      rgb: globalLessRgb
+      rgb: globalLessRgb,
     },
     themes: {
       masterbrand: {
         hex: masterbrandLessHex,
         hsl: masterbrandLessHsl,
         oklch: masterbrandLessOklch,
-        rgb: masterbrandLessRgb
-      }
-    }
+        rgb: masterbrandLessRgb,
+      },
+    },
   },
   scss: {
     global: {
       hex: globalScssHex,
       hsl: globalScssHsl,
       oklch: globalScssOklch,
-      rgb: globalScssRgb
+      rgb: globalScssRgb,
     },
     themes: {
       masterbrand: {
         hex: masterbrandScssHex,
         hsl: masterbrandScssHsl,
         oklch: masterbrandScssOklch,
-        rgb: masterbrandScssRgb
-      }
-    }
+        rgb: masterbrandScssRgb,
+      },
+    },
   },
   tailwind: {
     global: {
       hex: globalTailwindHex,
       hsl: globalTailwindHsl,
       oklch: globalTailwindOklch,
-      rgb: globalTailwindRgb
+      rgb: globalTailwindRgb,
     },
     themes: {
       masterbrand: {
         hex: masterbrandTailwindHex,
         hsl: masterbrandTailwindHsl,
         oklch: masterbrandTailwindOklch,
-        rgb: masterbrandTailwindRgb
-      }
-    }
+        rgb: masterbrandTailwindRgb,
+      },
+    },
   },
   ts: {
     global: {
       hex: globalTsHex,
       hsl: globalTsHsl,
       oklch: globalTsOklch,
-      rgb: globalTsRgb
+      rgb: globalTsRgb,
     },
     themes: {
       masterbrand: {
         hex: masterbrandTsHex,
         hsl: masterbrandTsHsl,
         oklch: masterbrandTsOklch,
-        rgb: masterbrandTsRgb
-      }
-    }
-  }
-};
+        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 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 = {
@@ -271,25 +272,25 @@ export const icons = {
   unfoldLess: './icons/unfold_less.svg',
   unfoldMore: './icons/unfold_more.svg',
   upload: './icons/upload.svg',
-  west: './icons/west.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'
+    svg: './brand/icon-dark.svg',
   },
   iconLight: {
     ico: './brand/icon-light.ico',
     png: './brand/icon-light.png',
-    svg: './brand/icon-light.svg'
+    svg: './brand/icon-light.svg',
   },
   icon: './brand/icon.svg',
   logo: {
     png: './brand/logo.png',
-    svg: './brand/logo.svg'
+    svg: './brand/logo.svg',
   },
-  placeholder: './brand/placeholder.svg'
-};
+  placeholder: './brand/placeholder.svg',
+}

package/src/json/colors/global/hex.json

@@ -1 +1 @@
-{}
+{}

package/src/json/colors/global/hsl.json

@@ -1 +1 @@
-{}
+{}

package/src/json/colors/global/oklch.json

@@ -1 +1 @@
-{}
+{}

package/src/json/colors/global/rgb.json

@@ -1 +1 @@
-{}
+{}

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

@@ -1 +1 @@
-{}
+{}

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

@@ -1 +1 @@
-{}
+{}

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

@@ -1 +1 @@
-{}
+{}

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

@@ -1 +1 @@
-{}
+{}

package/src/types.d.ts

@@ -1,25 +1,27 @@
+interface JsModule {
+  [key: string]: string | number
+}
 declare module '*.css' {
-  const content: string;
-  export default content;
+  const content: string
+  export default content
 }
 
 declare module '*.scss' {
-  const content: string;
-  export default content;
+  const content: string
+  export default content
 }
 
 declare module '*.less' {
-  const content: string;
-  export default content;
+  const content: string
+  export default content
 }
 
 declare module '*.js' {
-  const content: { [key: string]: any };
-  export default content;
+  const content: { [key: string]: JsModule }
+  export default content
 }
 
 declare module '*.ts' {
-  const content: { [key: string]: any };
-  export default content;
+  const content: { [key: string]: JsModule }
+  export default content
 }
-