@crowdstrike/tailwind-toucan-base 3.1.1 → 3.3.0

package/README.md

@@ -57,6 +57,26 @@ pnpm run build:preview
 npx http-server ./dist
 ```
 
+Note that changes to `src` or `build` scripts will require re-running `pnpm start`.
+
+## Previewing manual tests locally
+
+```bash
+pnpm build
+```
+
+then, open the `manual-test.html`
+```bash
+firefox ./manual-test.html
+```
+
+Or, along with the tailwind-preview
+```bash
+pnpm start
+```
+
+and visit `http://localhost:8080/manual`
+
 ## Importing colors and shadows from Figma
 
 This addon provides the ability to pull our palette information directly from Figma files and store them in

package/index.css

@@ -7036,6 +7036,10 @@ video {
   z-index: var(--z-index-overlay);
 }
 
+.z-overlay-loader {
+  z-index: var(--z-index-overlay-loader);
+}
+
 .z-tooltip {
   z-index: var(--z-index-tooltip);
 }
@@ -7136,6 +7140,10 @@ video {
   z-index: var(--z-index-overlay);
 }
 
+.hover\:z-overlay-loader:hover {
+  z-index: var(--z-index-overlay-loader);
+}
+
 .hover\:z-tooltip:hover {
   z-index: var(--z-index-tooltip);
 }
@@ -7236,6 +7244,10 @@ video {
   z-index: var(--z-index-overlay);
 }
 
+.active\:z-overlay-loader:active {
+  z-index: var(--z-index-overlay-loader);
+}
+
 .active\:z-tooltip:active {
   z-index: var(--z-index-tooltip);
 }
@@ -7336,6 +7348,10 @@ video {
   z-index: var(--z-index-overlay);
 }
 
+.group:hover .group-hover\:z-overlay-loader {
+  z-index: var(--z-index-overlay-loader);
+}
+
 .group:hover .group-hover\:z-tooltip {
   z-index: var(--z-index-tooltip);
 }

package/{theme-data.d.ts → index.d.ts}

@@ -1,4 +1,5 @@
-declare let ThemeData = {
+// Strict type for the themes.json structure
+      interface ThemeData {
   "themes": {
     "dark": {
       "cssSelector": ".theme-dark",
@@ -2705,6 +2706,47 @@ declare let ThemeData = {
       ]
     }
   }
-};
+}
 
-      export default ThemeData;
+      // Full Built CSS
+      declare module '@crowdstrike/tailwind-toucan-base/index.css';
+      declare module '@crowdstrike/tailwind-toucan-base/toucan.css';
+
+
+      // Raw Theme JSON -- also available as theme-data.js
+      declare module '@crowdstrike/tailwind-toucan-base/themes' {
+        export = ThemeData;
+      }
+      declare module '@crowdstrike/tailwind-toucan-base/themes.json' {
+        export = ThemeData;
+      }
+
+      // Tailwind Config
+      declare module '@crowdstrike/tailwind-toucan-base';
+
+      declare module '@crowdstrike/tailwind-toucan-base/theme-data' {
+        /**
+          * Utility type which describes the shape and properties of a particular color.
+          */
+        export interface ColorInfo {
+          category: string[];
+          hasAlpha: boolean;
+          rgbFill: string;
+          fill: {
+            r: number;
+            g: number;
+            b: number;
+            a: number;
+          };
+          name: string;
+          value: string;
+        }
+
+        const _ThemeData: ThemeData;
+
+        /**
+          * The data from the generated theme.json document containing all of the
+          * Toucan colors, shadows, etc
+          */
+        export default _ThemeData;
+      }

package/package.json

@@ -1,44 +1,51 @@
 {
   "name": "@crowdstrike/tailwind-toucan-base",
-  "version": "3.1.1",
+  "version": "3.3.0",
   "private": false,
   "description": "Tailwind preset for CrowdStrike's Toucan design system",
   "repository": "https://github.com/CrowdStrike/tailwind-toucan-base",
   "license": "MIT",
   "author": "CrowdStrike UX Team",
-  "main": "index.js",
+  "main": "src/tailwind.config.js",
   "files": [
-    "index.js",
+    "src",
+    "index.d.ts",
     "index.css",
     "themes.json",
-    "theme-data.js",
-    "theme-data.d.ts",
-    "toucan.css",
-    "plugins/**/*.js"
+    "toucan.css"
   ],
   "exports": {
-    ".": "./index.js",
-    "./themes": "./themes.json",
-    "./themes.json": "./themes.json",
-    "./theme-data": "./theme-data.js"
+    ".": "./src/tailwind.config.js",
+    "./themes": "./src/themes.json",
+    "./themes.json": "./src/themes.json",
+    "./theme-data": "./src/theme-data.js"
   },
   "typesVersions": {
     "*": {
+      "*": [
+        "./index.d.ts"
+      ],
+      "themes": [
+        "./index.d.ts"
+      ],
+      "themes.json": [
+        "./index.d.ts"
+      ],
       "theme-data": [
-        "./theme-data.d.ts"
+        "./index.d.ts"
       ]
     }
   },
   "scripts": {
     "start": "pnpm run build && npx http-server ./dist",
     "build": "npm-run-all clean build:cdn build:alias build:preview build:theme-data",
-    "build:theme-data": "node ./lib/build-theme-data.mjs",
-    "build:preview": "node ./lib/build-preview.mjs",
-    "build:cdn": "NODE_ENV=production tailwind build -i ./lib/index.css -o ./index.css -c ./lib/tailwind.config.cdn.js",
+    "build:theme-data": "node ./build/theme-data.mjs",
+    "build:preview": "node ./build/preview/index.mjs",
+    "build:cdn": "NODE_ENV=production tailwind build -i ./build/input.css -o ./index.css -c ./build/tailwind.config.cdn.js",
     "clean": "rm -f ./toucan.css ./index.css",
     "build:alias": "cp index.css toucan.css",
     "figma:export-styles": "figma-export use-config",
-    "test": "pnpm exec vitest --coverage --run",
+    "test": "pnpm --filter='tests' exec vitest --coverage --run",
     "lint:fix": "pnpm run lint:js --fix",
     "lint:js": "eslint .",
     "prepublishOnly": "pnpm build"
@@ -48,23 +55,23 @@
   },
   "devDependencies": {
     "@figma-export/cli": "4.4.0",
-    "@nullvoxpopuli/eslint-configs": "2.2.22",
+    "@nullvoxpopuli/eslint-configs": "2.2.35",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
     "@types/fs-extra": "^9.0.13",
     "autoprefixer": "^10.4.7",
     "c8": "^7.11.3",
     "common-tags": "^1.8.2",
-    "eslint": "^8.17.0",
+    "eslint": "^8.19.0",
     "execa": "^6.1.0",
     "fs-extra": "^10.1.0",
     "npm-run-all": "^4.1.5",
-    "pnpm": "^7.1.9",
+    "pnpm": "^7.5.1",
     "postcss": "^8.4.14",
-    "semantic-release": "^19.0.2",
+    "semantic-release": "^19.0.3",
     "tailwind-config-viewer": "^1.7.1",
-    "typescript": "^4.7.3",
-    "vitest": "0.14.1"
+    "typescript": "^4.7.4",
+    "vitest": "0.18.0"
   },
   "engines": {
     "node": ">=14.15.0"
@@ -86,10 +93,10 @@
       "@semantic-release/git"
     ]
   },
-  "packageManager": "pnpm@7.1.9",
+  "packageManager": "pnpm@7.5.1",
   "volta": {
-    "node": "16.15.1",
+    "node": "16.16.0",
     "yarn": "1.22.19",
-    "npm": "8.12.1"
+    "npm": "8.13.2"
   }
 }

package/{index.js → src/tailwind.config.js}

@@ -80,6 +80,7 @@ module.exports = {
       10: '10',
       'flash-messages': 'var(--z-index-flash-messages)',
       overlay: 'var(--z-index-overlay)',
+      'overlay-loader': 'var(--z-index-overlay-loader)',
       tooltip: 'var(--z-index-tooltip)',
       'popover-sticky': 'var(--z-index-popover-sticky)',
       popover: 'var(--z-index-popover)',

package/toucan.css

@@ -7036,6 +7036,10 @@ video {
   z-index: var(--z-index-overlay);
 }
 
+.z-overlay-loader {
+  z-index: var(--z-index-overlay-loader);
+}
+
 .z-tooltip {
   z-index: var(--z-index-tooltip);
 }
@@ -7136,6 +7140,10 @@ video {
   z-index: var(--z-index-overlay);
 }
 
+.hover\:z-overlay-loader:hover {
+  z-index: var(--z-index-overlay-loader);
+}
+
 .hover\:z-tooltip:hover {
   z-index: var(--z-index-tooltip);
 }
@@ -7236,6 +7244,10 @@ video {
   z-index: var(--z-index-overlay);
 }
 
+.active\:z-overlay-loader:active {
+  z-index: var(--z-index-overlay-loader);
+}
+
 .active\:z-tooltip:active {
   z-index: var(--z-index-tooltip);
 }
@@ -7336,6 +7348,10 @@ video {
   z-index: var(--z-index-overlay);
 }
 
+.group:hover .group-hover\:z-overlay-loader {
+  z-index: var(--z-index-overlay-loader);
+}
+
 .group:hover .group-hover\:z-tooltip {
   z-index: var(--z-index-tooltip);
 }