@crowdstrike/tailwind-toucan-base 3.4.0 → 3.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/index.css +40 -0
  2. package/package.json +32 -47
  3. package/src/tailwind.config.js +1 -0
  4. package/toucan.css +40 -0
package/index.css CHANGED
@@ -34120,6 +34120,11 @@ video {
34120
34120
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34121
34121
  }
34122
34122
 
34123
+ .shadow-read-only-outline {
34124
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34125
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34126
+ }
34127
+
34123
34128
  .shadow-2xl {
34124
34129
  --tw-shadow: var(--elevation-2xl);
34125
34130
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34185,6 +34190,11 @@ video {
34185
34190
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34186
34191
  }
34187
34192
 
34193
+ .hover\:shadow-read-only-outline:hover {
34194
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34195
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34196
+ }
34197
+
34188
34198
  .hover\:shadow-2xl:hover {
34189
34199
  --tw-shadow: var(--elevation-2xl);
34190
34200
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34250,6 +34260,11 @@ video {
34250
34260
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34251
34261
  }
34252
34262
 
34263
+ .group:hover .group-hover\:shadow-read-only-outline {
34264
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34265
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34266
+ }
34267
+
34253
34268
  .group:hover .group-hover\:shadow-2xl {
34254
34269
  --tw-shadow: var(--elevation-2xl);
34255
34270
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34315,6 +34330,11 @@ video {
34315
34330
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34316
34331
  }
34317
34332
 
34333
+ .focus\:shadow-read-only-outline:focus {
34334
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34335
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34336
+ }
34337
+
34318
34338
  .focus\:shadow-2xl:focus {
34319
34339
  --tw-shadow: var(--elevation-2xl);
34320
34340
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34380,6 +34400,11 @@ video {
34380
34400
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34381
34401
  }
34382
34402
 
34403
+ .focus-within\:shadow-read-only-outline:focus-within {
34404
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34405
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34406
+ }
34407
+
34383
34408
  .focus-within\:shadow-2xl:focus-within {
34384
34409
  --tw-shadow: var(--elevation-2xl);
34385
34410
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34445,6 +34470,11 @@ video {
34445
34470
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34446
34471
  }
34447
34472
 
34473
+ .focus-visible\:shadow-read-only-outline:focus-visible {
34474
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34475
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34476
+ }
34477
+
34448
34478
  .focus-visible\:shadow-2xl:focus-visible {
34449
34479
  --tw-shadow: var(--elevation-2xl);
34450
34480
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34510,6 +34540,11 @@ video {
34510
34540
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34511
34541
  }
34512
34542
 
34543
+ .active\:shadow-read-only-outline:active {
34544
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34545
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34546
+ }
34547
+
34513
34548
  .active\:shadow-2xl:active {
34514
34549
  --tw-shadow: var(--elevation-2xl);
34515
34550
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34575,6 +34610,11 @@ video {
34575
34610
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34576
34611
  }
34577
34612
 
34613
+ .disabled\:shadow-read-only-outline:disabled {
34614
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34615
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34616
+ }
34617
+
34578
34618
  .disabled\:shadow-2xl:disabled {
34579
34619
  --tw-shadow: var(--elevation-2xl);
34580
34620
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crowdstrike/tailwind-toucan-base",
3
- "version": "3.4.0",
3
+ "version": "3.5.1",
4
4
  "private": false,
5
5
  "description": "Tailwind preset for CrowdStrike's Toucan design system",
6
6
  "repository": "https://github.com/CrowdStrike/tailwind-toucan-base",
@@ -36,42 +36,27 @@
36
36
  ]
37
37
  }
38
38
  },
39
- "scripts": {
40
- "start": "pnpm run build && npx http-server ./dist",
41
- "build": "npm-run-all clean build:cdn build:alias build:preview build:theme-data",
42
- "build:theme-data": "node ./build/theme-data.mjs",
43
- "build:preview": "node ./build/preview/index.mjs",
44
- "build:cdn": "NODE_ENV=production tailwind build -i ./build/input.css -o ./index.css -c ./build/tailwind.config.cdn.js",
45
- "clean": "rm -f ./toucan.css ./index.css",
46
- "build:alias": "cp index.css toucan.css",
47
- "figma:export-styles": "figma-export use-config",
48
- "test": "pnpm --filter='tests' exec vitest --coverage --run",
49
- "lint:fix": "pnpm run lint:js --fix",
50
- "lint:js": "eslint .",
51
- "prepublishOnly": "pnpm build"
52
- },
53
39
  "dependencies": {
54
40
  "tailwindcss": "^2.2.15"
55
41
  },
56
42
  "devDependencies": {
57
- "@figma-export/cli": "4.5.0",
43
+ "@changesets/changelog-github": "^0.4.8",
44
+ "@changesets/cli": "^2.26.1",
45
+ "@figma-export/cli": "4.6.0",
58
46
  "@nullvoxpopuli/eslint-configs": "2.2.62",
59
- "@semantic-release/changelog": "^6.0.1",
60
- "@semantic-release/git": "^10.0.1",
61
- "@types/fs-extra": "^9.0.13",
62
- "autoprefixer": "^10.4.12",
63
- "c8": "^7.12.0",
47
+ "@types/fs-extra": "^11.0.1",
48
+ "autoprefixer": "^10.4.14",
49
+ "c8": "^7.14.0",
64
50
  "common-tags": "^1.8.2",
65
- "eslint": "^8.25.0",
66
- "execa": "^6.1.0",
67
- "fs-extra": "^10.1.0",
51
+ "eslint": "^8.41.0",
52
+ "execa": "^7.1.1",
53
+ "fs-extra": "^11.1.1",
68
54
  "npm-run-all": "^4.1.5",
69
- "pnpm": "^7.13.5",
70
- "postcss": "^8.4.18",
71
- "semantic-release": "^19.0.5",
55
+ "pnpm": "^8.6.0",
56
+ "postcss": "^8.4.24",
72
57
  "tailwind-config-viewer": "^1.7.2",
73
- "typescript": "^4.8.4",
74
- "vitest": "0.24.3"
58
+ "typescript": "^5.0.4",
59
+ "vitest": "0.31.2"
75
60
  },
76
61
  "engines": {
77
62
  "node": ">=14.15.0"
@@ -79,24 +64,24 @@
79
64
  "publishConfig": {
80
65
  "access": "public"
81
66
  },
82
- "release": {
83
- "branches": [
84
- "main",
85
- "master"
86
- ],
87
- "plugins": [
88
- "@semantic-release/commit-analyzer",
89
- "@semantic-release/release-notes-generator",
90
- "@semantic-release/changelog",
91
- "@semantic-release/npm",
92
- "@semantic-release/github",
93
- "@semantic-release/git"
94
- ]
95
- },
96
- "packageManager": "pnpm@7.13.5",
67
+ "packageManager": "pnpm@8.6.0",
97
68
  "volta": {
98
- "node": "16.18.0",
69
+ "node": "18.16.0",
99
70
  "yarn": "1.22.19",
100
- "npm": "8.19.2"
71
+ "npm": "9.6.7"
72
+ },
73
+ "scripts": {
74
+ "start": "pnpm run build && npx http-server ./dist",
75
+ "build": "npm-run-all clean build:cdn build:alias build:preview build:theme-data",
76
+ "build:theme-data": "node ./build/theme-data.mjs",
77
+ "build:preview": "node ./build/preview/index.mjs",
78
+ "build:cdn": "NODE_ENV=production tailwind build -i ./build/input.css -o ./index.css -c ./build/tailwind.config.cdn.js",
79
+ "clean": "rm -f ./toucan.css ./index.css",
80
+ "build:alias": "cp index.css toucan.css",
81
+ "figma:export-styles": "figma-export use-config",
82
+ "test": "pnpm --filter='tests' exec vitest --coverage --run",
83
+ "lint:fix": "pnpm run lint:js --fix",
84
+ "lint:js": "eslint .",
85
+ "release": "changeset publish"
101
86
  }
102
- }
87
+ }
package/src/tailwind.config.js CHANGED
@@ -39,6 +39,7 @@ module.exports = {
39
39
  'search-input': 'inset 0 0 0 1px var(--nav-text-secondary)',
40
40
  'error-focus-outline':
41
41
  'inset 0 0 0 2px var(--critical), 0 0 0 2px var(--surface-base), 0 0 0 4px var(--focus)',
42
+ 'read-only-outline': 'inset 0 0 0 1px var(--disabled)',
42
43
  ...boxShadow,
43
44
  },
44
45
 
package/toucan.css CHANGED
@@ -34120,6 +34120,11 @@ video {
34120
34120
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34121
34121
  }
34122
34122
 
34123
+ .shadow-read-only-outline {
34124
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34125
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34126
+ }
34127
+
34123
34128
  .shadow-2xl {
34124
34129
  --tw-shadow: var(--elevation-2xl);
34125
34130
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34185,6 +34190,11 @@ video {
34185
34190
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34186
34191
  }
34187
34192
 
34193
+ .hover\:shadow-read-only-outline:hover {
34194
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34195
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34196
+ }
34197
+
34188
34198
  .hover\:shadow-2xl:hover {
34189
34199
  --tw-shadow: var(--elevation-2xl);
34190
34200
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34250,6 +34260,11 @@ video {
34250
34260
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34251
34261
  }
34252
34262
 
34263
+ .group:hover .group-hover\:shadow-read-only-outline {
34264
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34265
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34266
+ }
34267
+
34253
34268
  .group:hover .group-hover\:shadow-2xl {
34254
34269
  --tw-shadow: var(--elevation-2xl);
34255
34270
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34315,6 +34330,11 @@ video {
34315
34330
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34316
34331
  }
34317
34332
 
34333
+ .focus\:shadow-read-only-outline:focus {
34334
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34335
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34336
+ }
34337
+
34318
34338
  .focus\:shadow-2xl:focus {
34319
34339
  --tw-shadow: var(--elevation-2xl);
34320
34340
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34380,6 +34400,11 @@ video {
34380
34400
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34381
34401
  }
34382
34402
 
34403
+ .focus-within\:shadow-read-only-outline:focus-within {
34404
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34405
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34406
+ }
34407
+
34383
34408
  .focus-within\:shadow-2xl:focus-within {
34384
34409
  --tw-shadow: var(--elevation-2xl);
34385
34410
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34445,6 +34470,11 @@ video {
34445
34470
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34446
34471
  }
34447
34472
 
34473
+ .focus-visible\:shadow-read-only-outline:focus-visible {
34474
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34475
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34476
+ }
34477
+
34448
34478
  .focus-visible\:shadow-2xl:focus-visible {
34449
34479
  --tw-shadow: var(--elevation-2xl);
34450
34480
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34510,6 +34540,11 @@ video {
34510
34540
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34511
34541
  }
34512
34542
 
34543
+ .active\:shadow-read-only-outline:active {
34544
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34545
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34546
+ }
34547
+
34513
34548
  .active\:shadow-2xl:active {
34514
34549
  --tw-shadow: var(--elevation-2xl);
34515
34550
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -34575,6 +34610,11 @@ video {
34575
34610
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34576
34611
  }
34577
34612
 
34613
+ .disabled\:shadow-read-only-outline:disabled {
34614
+ --tw-shadow: inset 0 0 0 1px var(--disabled);
34615
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
34616
+ }
34617
+
34578
34618
  .disabled\:shadow-2xl:disabled {
34579
34619
  --tw-shadow: var(--elevation-2xl);
34580
34620
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);