@crowdstrike/tailwind-toucan-base 3.1.1 → 3.2.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/package.json

@@ -1,44 +1,44 @@
 {
   "name": "@crowdstrike/tailwind-toucan-base",
-  "version": "3.1.1",
+  "version": "3.2.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.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": {
     "*": {
+      "types": [
+        "./src/types.d.ts"
+      ],
       "theme-data": [
-        "./theme-data.d.ts"
+        "./src/theme-data.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 +48,23 @@
   },
   "devDependencies": {
     "@figma-export/cli": "4.4.0",
-    "@nullvoxpopuli/eslint-configs": "2.2.22",
+    "@nullvoxpopuli/eslint-configs": "2.2.33",
     "@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.0",
     "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.17.0"
   },
   "engines": {
     "node": ">=14.15.0"
@@ -86,10 +86,10 @@
       "@semantic-release/git"
     ]
   },
-  "packageManager": "pnpm@7.1.9",
+  "packageManager": "pnpm@7.5.0",
   "volta": {
-    "node": "16.15.1",
+    "node": "16.15.0",
     "yarn": "1.22.19",
-    "npm": "8.12.1"
+    "npm": "8.13.2"
   }
 }

package/src/types.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Generic loosley typed version of the strict types provided by
+ * ```ts
+ * import type ThemeData from '@crowdstrike/tailwind-toucan-base/theme-data';
+ * ```
+ */
+export interface ColorInfo {
+  category: string[];
+  hasAlpha: boolean;
+  rgbFill: string;
+  fill: {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+  };
+  name: string;
+  value: string;
+}
+
+/**
+ * Generic loosley typed version of the strict types provided by
+ * ```ts
+ * import type ThemeData from '@crowdstrike/tailwind-toucan-base/theme-data';
+ * ```
+ */
+export interface Theme {
+  colors: ColorInfo[];
+  cssSelector: string;
+  shadows: Array<{
+    name: string;
+    effects: string[];
+  }>;
+}
+
+/**
+ * Generic loosley typed version of the strict types provided by
+ * ```ts
+ * import type ThemeData from '@crowdstrike/tailwind-toucan-base/theme-data';
+ * ```
+ */
+export interface ThemeData {
+  aliases: { name: string; value: string }[];
+  themes: {
+    dark: Theme;
+    light: Theme;
+  };
+}