@crowdstrike/tailwind-toucan-base 4.1.0 → 4.3.0

package/index.css

@@ -603,6 +603,7 @@ video {
   --code-bg: #232326;
   --code-outline: #1c1c21;
   --code-text: #9dc1fd;
+  --neutral: #84869A;
   --critical: #fa4147;
   --destructive-hover: #fa9497;
   --destructive-idle: #1e1d20;
@@ -672,6 +673,7 @@ video {
   --code-bg: #ffffff;
   --code-outline: #e5e5e5;
   --code-text: #0b54c1;
+  --neutral: #868798;
   --critical: #e9181f;
   --destructive-hover: #f47479;
   --destructive-idle: #ffffff;
@@ -688,8 +690,8 @@ video {
   --graph-4: #961574;
   --graph-5: #ce4789;
   --graph-6: #bf4815;
-  --graph-7: #946613;
-  --graph-8: #2e5c0e;
+  --graph-7: #2e5c0e;
+  --graph-8: #946613;
   --graph-9: #684444;
   --graph-disabled: #d3d3d3;
   --ground-floor: #ffffff;
@@ -20211,6 +20213,10 @@ video {
   border-color: var(--code-text);
 }
 
+.divide-neutral > :not([hidden]) ~ :not([hidden]) {
+  border-color: var(--neutral);
+}
+
 .divide-critical > :not([hidden]) ~ :not([hidden]) {
   border-color: var(--critical);
 }
@@ -22602,6 +22608,10 @@ video {
   border-color: var(--code-text);
 }
 
+.border-neutral {
+  border-color: var(--neutral);
+}
+
 .border-critical {
   border-color: var(--critical);
 }
@@ -22878,6 +22888,10 @@ video {
   border-color: var(--code-text);
 }
 
+.hover\:border-neutral:hover {
+  border-color: var(--neutral);
+}
+
 .hover\:border-critical:hover {
   border-color: var(--critical);
 }
@@ -23154,6 +23168,10 @@ video {
   border-color: var(--code-text);
 }
 
+.active\:border-neutral:active {
+  border-color: var(--neutral);
+}
+
 .active\:border-critical:active {
   border-color: var(--critical);
 }
@@ -23610,6 +23628,10 @@ video {
   background-color: var(--code-text);
 }
 
+.bg-neutral {
+  background-color: var(--neutral);
+}
+
 .bg-critical {
   background-color: var(--critical);
 }
@@ -23886,6 +23908,10 @@ video {
   background-color: var(--code-text);
 }
 
+.even\:bg-neutral:nth-child(even) {
+  background-color: var(--neutral);
+}
+
 .even\:bg-critical:nth-child(even) {
   background-color: var(--critical);
 }
@@ -24162,6 +24188,10 @@ video {
   background-color: var(--code-text);
 }
 
+.group:hover .group-hover\:bg-neutral {
+  background-color: var(--neutral);
+}
+
 .group:hover .group-hover\:bg-critical {
   background-color: var(--critical);
 }
@@ -24438,6 +24468,10 @@ video {
   background-color: var(--code-text);
 }
 
+.hover\:bg-neutral:hover {
+  background-color: var(--neutral);
+}
+
 .hover\:bg-critical:hover {
   background-color: var(--critical);
 }
@@ -24714,6 +24748,10 @@ video {
   background-color: var(--code-text);
 }
 
+.focus\:bg-neutral:focus {
+  background-color: var(--neutral);
+}
+
 .focus\:bg-critical:focus {
   background-color: var(--critical);
 }
@@ -24990,6 +25028,10 @@ video {
   background-color: var(--code-text);
 }
 
+.focus-within\:bg-neutral:focus-within {
+  background-color: var(--neutral);
+}
+
 .focus-within\:bg-critical:focus-within {
   background-color: var(--critical);
 }
@@ -25266,6 +25308,10 @@ video {
   background-color: var(--code-text);
 }
 
+.focus-visible\:bg-neutral:focus-visible {
+  background-color: var(--neutral);
+}
+
 .focus-visible\:bg-critical:focus-visible {
   background-color: var(--critical);
 }
@@ -25542,6 +25588,10 @@ video {
   background-color: var(--code-text);
 }
 
+.active\:bg-neutral:active {
+  background-color: var(--neutral);
+}
+
 .active\:bg-critical:active {
   background-color: var(--critical);
 }
@@ -25818,6 +25868,10 @@ video {
   background-color: var(--code-text);
 }
 
+.disabled\:bg-neutral:disabled {
+  background-color: var(--neutral);
+}
+
 .disabled\:bg-critical:disabled {
   background-color: var(--critical);
 }
@@ -26321,6 +26375,11 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
 
+.from-neutral {
+  --tw-gradient-from: var(--neutral);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+}
+
 .from-critical {
   --tw-gradient-from: var(--critical);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
@@ -26666,6 +26725,11 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
 
+.hover\:from-neutral:hover {
+  --tw-gradient-from: var(--neutral);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+}
+
 .hover\:from-critical:hover {
   --tw-gradient-from: var(--critical);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
@@ -27011,6 +27075,11 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
 
+.focus\:from-neutral:focus {
+  --tw-gradient-from: var(--neutral);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+}
+
 .focus\:from-critical:focus {
   --tw-gradient-from: var(--critical);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
@@ -27345,6 +27414,10 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--code-text), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
 
+.via-neutral {
+  --tw-gradient-stops: var(--tw-gradient-from), var(--neutral), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+}
+
 .via-critical {
   --tw-gradient-stops: var(--tw-gradient-from), var(--critical), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
@@ -27621,6 +27694,10 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--code-text), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
 
+.hover\:via-neutral:hover {
+  --tw-gradient-stops: var(--tw-gradient-from), var(--neutral), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+}
+
 .hover\:via-critical:hover {
   --tw-gradient-stops: var(--tw-gradient-from), var(--critical), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
@@ -27897,6 +27974,10 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--code-text), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
 
+.focus\:via-neutral:focus {
+  --tw-gradient-stops: var(--tw-gradient-from), var(--neutral), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+}
+
 .focus\:via-critical:focus {
   --tw-gradient-stops: var(--tw-gradient-from), var(--critical), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
@@ -28173,6 +28254,10 @@ video {
   --tw-gradient-to: var(--code-text);
 }
 
+.to-neutral {
+  --tw-gradient-to: var(--neutral);
+}
+
 .to-critical {
   --tw-gradient-to: var(--critical);
 }
@@ -28449,6 +28534,10 @@ video {
   --tw-gradient-to: var(--code-text);
 }
 
+.hover\:to-neutral:hover {
+  --tw-gradient-to: var(--neutral);
+}
+
 .hover\:to-critical:hover {
   --tw-gradient-to: var(--critical);
 }
@@ -28725,6 +28814,10 @@ video {
   --tw-gradient-to: var(--code-text);
 }
 
+.focus\:to-neutral:focus {
+  --tw-gradient-to: var(--neutral);
+}
+
 .focus\:to-critical:focus {
   --tw-gradient-to: var(--critical);
 }
@@ -30712,6 +30805,10 @@ video {
   color: var(--code-text);
 }
 
+.text-neutral {
+  color: var(--neutral);
+}
+
 .text-critical {
   color: var(--critical);
 }
@@ -30988,6 +31085,10 @@ video {
   color: var(--code-text);
 }
 
+.hover\:text-neutral:hover {
+  color: var(--neutral);
+}
+
 .hover\:text-critical:hover {
   color: var(--critical);
 }
@@ -31264,6 +31365,10 @@ video {
   color: var(--code-text);
 }
 
+.focus\:text-neutral:focus {
+  color: var(--neutral);
+}
+
 .focus\:text-critical:focus {
   color: var(--critical);
 }
@@ -31540,6 +31645,10 @@ video {
   color: var(--code-text);
 }
 
+.focus-visible\:text-neutral:focus-visible {
+  color: var(--neutral);
+}
+
 .focus-visible\:text-critical:focus-visible {
   color: var(--critical);
 }
@@ -31816,6 +31925,10 @@ video {
   color: var(--code-text);
 }
 
+.group:hover .group-hover\:text-neutral {
+  color: var(--neutral);
+}
+
 .group:hover .group-hover\:text-critical {
   color: var(--critical);
 }
@@ -32092,6 +32205,10 @@ video {
   color: var(--code-text);
 }
 
+.active\:text-neutral:active {
+  color: var(--neutral);
+}
+
 .active\:text-critical:active {
   color: var(--critical);
 }
@@ -32368,6 +32485,10 @@ video {
   color: var(--code-text);
 }
 
+.disabled\:text-neutral:disabled {
+  color: var(--neutral);
+}
+
 .disabled\:text-critical:disabled {
   color: var(--critical);
 }
@@ -32914,6 +33035,14 @@ video {
   color: var(--code-text);
 }
 
+.placeholder-neutral::-moz-placeholder {
+  color: var(--neutral);
+}
+
+.placeholder-neutral::placeholder {
+  color: var(--neutral);
+}
+
 .placeholder-critical::-moz-placeholder {
   color: var(--critical);
 }
@@ -33466,6 +33595,14 @@ video {
   color: var(--code-text);
 }
 
+.focus\:placeholder-neutral:focus::-moz-placeholder {
+  color: var(--neutral);
+}
+
+.focus\:placeholder-neutral:focus::placeholder {
+  color: var(--neutral);
+}
+
 .focus\:placeholder-critical:focus::-moz-placeholder {
   color: var(--critical);
 }
@@ -34214,6 +34351,10 @@ video {
   caret-color: var(--code-text);
 }
 
+.caret-neutral {
+  caret-color: var(--neutral);
+}
+
 .caret-critical {
   caret-color: var(--critical);
 }
@@ -35681,6 +35822,10 @@ video {
   --tw-ring-color: var(--code-text);
 }
 
+.ring-neutral {
+  --tw-ring-color: var(--neutral);
+}
+
 .ring-critical {
   --tw-ring-color: var(--critical);
 }
@@ -35957,6 +36102,10 @@ video {
   --tw-ring-color: var(--code-text);
 }
 
+.focus-within\:ring-neutral:focus-within {
+  --tw-ring-color: var(--neutral);
+}
+
 .focus-within\:ring-critical:focus-within {
   --tw-ring-color: var(--critical);
 }
@@ -36233,6 +36382,10 @@ video {
   --tw-ring-color: var(--code-text);
 }
 
+.focus\:ring-neutral:focus {
+  --tw-ring-color: var(--neutral);
+}
+
 .focus\:ring-critical:focus {
   --tw-ring-color: var(--critical);
 }
@@ -36749,6 +36902,10 @@ video {
   --tw-ring-offset-color: var(--code-text);
 }
 
+.ring-offset-neutral {
+  --tw-ring-offset-color: var(--neutral);
+}
+
 .ring-offset-critical {
   --tw-ring-offset-color: var(--critical);
 }
@@ -37025,6 +37182,10 @@ video {
   --tw-ring-offset-color: var(--code-text);
 }
 
+.focus-within\:ring-offset-neutral:focus-within {
+  --tw-ring-offset-color: var(--neutral);
+}
+
 .focus-within\:ring-offset-critical:focus-within {
   --tw-ring-offset-color: var(--critical);
 }
@@ -37301,6 +37462,10 @@ video {
   --tw-ring-offset-color: var(--code-text);
 }
 
+.focus\:ring-offset-neutral:focus {
+  --tw-ring-offset-color: var(--neutral);
+}
+
 .focus\:ring-offset-critical:focus {
   --tw-ring-offset-color: var(--critical);
 }

package/index.d.ts

@@ -130,6 +130,22 @@
           "name": "code-text",
           "value": "#9dc1fd"
         },
+        {
+          "category": [
+            "hues",
+            "main-hues"
+          ],
+          "fill": {
+            "r": 132,
+            "g": 134,
+            "b": 154,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(132, 134, 154)",
+          "name": "neutral",
+          "value": "#84869A"
+        },
         {
           "category": [
             "hues",
@@ -1202,6 +1218,22 @@
           "name": "code-text",
           "value": "#0b54c1"
         },
+        {
+          "category": [
+            "hues",
+            "main-hues"
+          ],
+          "fill": {
+            "r": 134,
+            "g": 135,
+            "b": 152,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(134, 135, 152)",
+          "name": "neutral",
+          "value": "#868798"
+        },
         {
           "category": [
             "hues",
@@ -1462,7 +1494,7 @@
           "hasAlpha": false,
           "rgbFill": "rgb(148, 102, 19)",
           "name": "graph-7",
-          "value": "#946613"
+          "value": "#2e5c0e"
         },
         {
           "category": [
@@ -1477,7 +1509,7 @@
           "hasAlpha": false,
           "rgbFill": "rgb(46, 92, 14)",
           "name": "graph-8",
-          "value": "#2e5c0e"
+          "value": "#946613"
         },
         {
           "category": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/tailwind-toucan-base",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "private": false,
   "description": "Tailwind preset for CrowdStrike's Toucan design system",
   "repository": "https://github.com/CrowdStrike/tailwind-toucan-base",
@@ -59,7 +59,7 @@
     "postcss": "^8.4.28",
     "tailwind-config-viewer": "^1.7.2",
     "typescript": "^5.2.2",
-    "vitest": "0.34.4"
+    "vitest": "0.34.6"
   },
   "engines": {
     "node": ">=14.15.0"
@@ -67,10 +67,10 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@8.6.10",
+  "packageManager": "pnpm@8.9.2",
   "volta": {
-    "node": "18.17.1",
-    "pnpm": "8.6.10"
+    "node": "18.18.2",
+    "pnpm": "8.9.2"
   },
   "scripts": {
     "start": "pnpm run build && npx http-server ./dist",

package/src/theme-data.js

@@ -129,6 +129,22 @@ export default {
           "name": "code-text",
           "value": "#9dc1fd"
         },
+        {
+          "category": [
+            "hues",
+            "main-hues"
+          ],
+          "fill": {
+            "r": 132,
+            "g": 134,
+            "b": 154,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(132, 134, 154)",
+          "name": "neutral",
+          "value": "#84869A"
+        },
         {
           "category": [
             "hues",
@@ -1201,6 +1217,22 @@ export default {
           "name": "code-text",
           "value": "#0b54c1"
         },
+        {
+          "category": [
+            "hues",
+            "main-hues"
+          ],
+          "fill": {
+            "r": 134,
+            "g": 135,
+            "b": 152,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(134, 135, 152)",
+          "name": "neutral",
+          "value": "#868798"
+        },
         {
           "category": [
             "hues",
@@ -1461,7 +1493,7 @@ export default {
           "hasAlpha": false,
           "rgbFill": "rgb(148, 102, 19)",
           "name": "graph-7",
-          "value": "#946613"
+          "value": "#2e5c0e"
         },
         {
           "category": [
@@ -1476,7 +1508,7 @@ export default {
           "hasAlpha": false,
           "rgbFill": "rgb(46, 92, 14)",
           "name": "graph-8",
-          "value": "#2e5c0e"
+          "value": "#946613"
         },
         {
           "category": [

package/src/themes.json

@@ -129,6 +129,22 @@
           "name": "code-text",
           "value": "#9dc1fd"
         },
+        {
+          "category": [
+            "hues",
+            "main-hues"
+          ],
+          "fill": {
+            "r": 132,
+            "g": 134,
+            "b": 154,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(132, 134, 154)",
+          "name": "neutral",
+          "value": "#84869A"
+        },
         {
           "category": [
             "hues",
@@ -1201,6 +1217,22 @@
           "name": "code-text",
           "value": "#0b54c1"
         },
+        {
+          "category": [
+            "hues",
+            "main-hues"
+          ],
+          "fill": {
+            "r": 134,
+            "g": 135,
+            "b": 152,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(134, 135, 152)",
+          "name": "neutral",
+          "value": "#868798"
+        },
         {
           "category": [
             "hues",
@@ -1461,7 +1493,7 @@
           "hasAlpha": false,
           "rgbFill": "rgb(148, 102, 19)",
           "name": "graph-7",
-          "value": "#946613"
+          "value": "#2e5c0e"
         },
         {
           "category": [
@@ -1476,7 +1508,7 @@
           "hasAlpha": false,
           "rgbFill": "rgb(46, 92, 14)",
           "name": "graph-8",
-          "value": "#2e5c0e"
+          "value": "#946613"
         },
         {
           "category": [
@@ -2855,4 +2887,4 @@
       ]
     }
   }
-}
+}

package/toucan.css

@@ -603,6 +603,7 @@ video {
   --code-bg: #232326;
   --code-outline: #1c1c21;
   --code-text: #9dc1fd;
+  --neutral: #84869A;
   --critical: #fa4147;
   --destructive-hover: #fa9497;
   --destructive-idle: #1e1d20;
@@ -672,6 +673,7 @@ video {
   --code-bg: #ffffff;
   --code-outline: #e5e5e5;
   --code-text: #0b54c1;
+  --neutral: #868798;
   --critical: #e9181f;
   --destructive-hover: #f47479;
   --destructive-idle: #ffffff;
@@ -688,8 +690,8 @@ video {
   --graph-4: #961574;
   --graph-5: #ce4789;
   --graph-6: #bf4815;
-  --graph-7: #946613;
-  --graph-8: #2e5c0e;
+  --graph-7: #2e5c0e;
+  --graph-8: #946613;
   --graph-9: #684444;
   --graph-disabled: #d3d3d3;
   --ground-floor: #ffffff;
@@ -20211,6 +20213,10 @@ video {
   border-color: var(--code-text);
 }
 
+.divide-neutral > :not([hidden]) ~ :not([hidden]) {
+  border-color: var(--neutral);
+}
+
 .divide-critical > :not([hidden]) ~ :not([hidden]) {
   border-color: var(--critical);
 }
@@ -22602,6 +22608,10 @@ video {
   border-color: var(--code-text);
 }
 
+.border-neutral {
+  border-color: var(--neutral);
+}
+
 .border-critical {
   border-color: var(--critical);
 }
@@ -22878,6 +22888,10 @@ video {
   border-color: var(--code-text);
 }
 
+.hover\:border-neutral:hover {
+  border-color: var(--neutral);
+}
+
 .hover\:border-critical:hover {
   border-color: var(--critical);
 }
@@ -23154,6 +23168,10 @@ video {
   border-color: var(--code-text);
 }
 
+.active\:border-neutral:active {
+  border-color: var(--neutral);
+}
+
 .active\:border-critical:active {
   border-color: var(--critical);
 }
@@ -23610,6 +23628,10 @@ video {
   background-color: var(--code-text);
 }
 
+.bg-neutral {
+  background-color: var(--neutral);
+}
+
 .bg-critical {
   background-color: var(--critical);
 }
@@ -23886,6 +23908,10 @@ video {
   background-color: var(--code-text);
 }
 
+.even\:bg-neutral:nth-child(even) {
+  background-color: var(--neutral);
+}
+
 .even\:bg-critical:nth-child(even) {
   background-color: var(--critical);
 }
@@ -24162,6 +24188,10 @@ video {
   background-color: var(--code-text);
 }
 
+.group:hover .group-hover\:bg-neutral {
+  background-color: var(--neutral);
+}
+
 .group:hover .group-hover\:bg-critical {
   background-color: var(--critical);
 }
@@ -24438,6 +24468,10 @@ video {
   background-color: var(--code-text);
 }
 
+.hover\:bg-neutral:hover {
+  background-color: var(--neutral);
+}
+
 .hover\:bg-critical:hover {
   background-color: var(--critical);
 }
@@ -24714,6 +24748,10 @@ video {
   background-color: var(--code-text);
 }
 
+.focus\:bg-neutral:focus {
+  background-color: var(--neutral);
+}
+
 .focus\:bg-critical:focus {
   background-color: var(--critical);
 }
@@ -24990,6 +25028,10 @@ video {
   background-color: var(--code-text);
 }
 
+.focus-within\:bg-neutral:focus-within {
+  background-color: var(--neutral);
+}
+
 .focus-within\:bg-critical:focus-within {
   background-color: var(--critical);
 }
@@ -25266,6 +25308,10 @@ video {
   background-color: var(--code-text);
 }
 
+.focus-visible\:bg-neutral:focus-visible {
+  background-color: var(--neutral);
+}
+
 .focus-visible\:bg-critical:focus-visible {
   background-color: var(--critical);
 }
@@ -25542,6 +25588,10 @@ video {
   background-color: var(--code-text);
 }
 
+.active\:bg-neutral:active {
+  background-color: var(--neutral);
+}
+
 .active\:bg-critical:active {
   background-color: var(--critical);
 }
@@ -25818,6 +25868,10 @@ video {
   background-color: var(--code-text);
 }
 
+.disabled\:bg-neutral:disabled {
+  background-color: var(--neutral);
+}
+
 .disabled\:bg-critical:disabled {
   background-color: var(--critical);
 }
@@ -26321,6 +26375,11 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
 
+.from-neutral {
+  --tw-gradient-from: var(--neutral);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+}
+
 .from-critical {
   --tw-gradient-from: var(--critical);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
@@ -26666,6 +26725,11 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
 
+.hover\:from-neutral:hover {
+  --tw-gradient-from: var(--neutral);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+}
+
 .hover\:from-critical:hover {
   --tw-gradient-from: var(--critical);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
@@ -27011,6 +27075,11 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
 
+.focus\:from-neutral:focus {
+  --tw-gradient-from: var(--neutral);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+}
+
 .focus\:from-critical:focus {
   --tw-gradient-from: var(--critical);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
@@ -27345,6 +27414,10 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--code-text), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
 
+.via-neutral {
+  --tw-gradient-stops: var(--tw-gradient-from), var(--neutral), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+}
+
 .via-critical {
   --tw-gradient-stops: var(--tw-gradient-from), var(--critical), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
@@ -27621,6 +27694,10 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--code-text), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
 
+.hover\:via-neutral:hover {
+  --tw-gradient-stops: var(--tw-gradient-from), var(--neutral), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+}
+
 .hover\:via-critical:hover {
   --tw-gradient-stops: var(--tw-gradient-from), var(--critical), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
@@ -27897,6 +27974,10 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--code-text), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
 
+.focus\:via-neutral:focus {
+  --tw-gradient-stops: var(--tw-gradient-from), var(--neutral), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+}
+
 .focus\:via-critical:focus {
   --tw-gradient-stops: var(--tw-gradient-from), var(--critical), var(--tw-gradient-to, rgba(255, 255, 255, 0));
 }
@@ -28173,6 +28254,10 @@ video {
   --tw-gradient-to: var(--code-text);
 }
 
+.to-neutral {
+  --tw-gradient-to: var(--neutral);
+}
+
 .to-critical {
   --tw-gradient-to: var(--critical);
 }
@@ -28449,6 +28534,10 @@ video {
   --tw-gradient-to: var(--code-text);
 }
 
+.hover\:to-neutral:hover {
+  --tw-gradient-to: var(--neutral);
+}
+
 .hover\:to-critical:hover {
   --tw-gradient-to: var(--critical);
 }
@@ -28725,6 +28814,10 @@ video {
   --tw-gradient-to: var(--code-text);
 }
 
+.focus\:to-neutral:focus {
+  --tw-gradient-to: var(--neutral);
+}
+
 .focus\:to-critical:focus {
   --tw-gradient-to: var(--critical);
 }
@@ -30712,6 +30805,10 @@ video {
   color: var(--code-text);
 }
 
+.text-neutral {
+  color: var(--neutral);
+}
+
 .text-critical {
   color: var(--critical);
 }
@@ -30988,6 +31085,10 @@ video {
   color: var(--code-text);
 }
 
+.hover\:text-neutral:hover {
+  color: var(--neutral);
+}
+
 .hover\:text-critical:hover {
   color: var(--critical);
 }
@@ -31264,6 +31365,10 @@ video {
   color: var(--code-text);
 }
 
+.focus\:text-neutral:focus {
+  color: var(--neutral);
+}
+
 .focus\:text-critical:focus {
   color: var(--critical);
 }
@@ -31540,6 +31645,10 @@ video {
   color: var(--code-text);
 }
 
+.focus-visible\:text-neutral:focus-visible {
+  color: var(--neutral);
+}
+
 .focus-visible\:text-critical:focus-visible {
   color: var(--critical);
 }
@@ -31816,6 +31925,10 @@ video {
   color: var(--code-text);
 }
 
+.group:hover .group-hover\:text-neutral {
+  color: var(--neutral);
+}
+
 .group:hover .group-hover\:text-critical {
   color: var(--critical);
 }
@@ -32092,6 +32205,10 @@ video {
   color: var(--code-text);
 }
 
+.active\:text-neutral:active {
+  color: var(--neutral);
+}
+
 .active\:text-critical:active {
   color: var(--critical);
 }
@@ -32368,6 +32485,10 @@ video {
   color: var(--code-text);
 }
 
+.disabled\:text-neutral:disabled {
+  color: var(--neutral);
+}
+
 .disabled\:text-critical:disabled {
   color: var(--critical);
 }
@@ -32914,6 +33035,14 @@ video {
   color: var(--code-text);
 }
 
+.placeholder-neutral::-moz-placeholder {
+  color: var(--neutral);
+}
+
+.placeholder-neutral::placeholder {
+  color: var(--neutral);
+}
+
 .placeholder-critical::-moz-placeholder {
   color: var(--critical);
 }
@@ -33466,6 +33595,14 @@ video {
   color: var(--code-text);
 }
 
+.focus\:placeholder-neutral:focus::-moz-placeholder {
+  color: var(--neutral);
+}
+
+.focus\:placeholder-neutral:focus::placeholder {
+  color: var(--neutral);
+}
+
 .focus\:placeholder-critical:focus::-moz-placeholder {
   color: var(--critical);
 }
@@ -34214,6 +34351,10 @@ video {
   caret-color: var(--code-text);
 }
 
+.caret-neutral {
+  caret-color: var(--neutral);
+}
+
 .caret-critical {
   caret-color: var(--critical);
 }
@@ -35681,6 +35822,10 @@ video {
   --tw-ring-color: var(--code-text);
 }
 
+.ring-neutral {
+  --tw-ring-color: var(--neutral);
+}
+
 .ring-critical {
   --tw-ring-color: var(--critical);
 }
@@ -35957,6 +36102,10 @@ video {
   --tw-ring-color: var(--code-text);
 }
 
+.focus-within\:ring-neutral:focus-within {
+  --tw-ring-color: var(--neutral);
+}
+
 .focus-within\:ring-critical:focus-within {
   --tw-ring-color: var(--critical);
 }
@@ -36233,6 +36382,10 @@ video {
   --tw-ring-color: var(--code-text);
 }
 
+.focus\:ring-neutral:focus {
+  --tw-ring-color: var(--neutral);
+}
+
 .focus\:ring-critical:focus {
   --tw-ring-color: var(--critical);
 }
@@ -36749,6 +36902,10 @@ video {
   --tw-ring-offset-color: var(--code-text);
 }
 
+.ring-offset-neutral {
+  --tw-ring-offset-color: var(--neutral);
+}
+
 .ring-offset-critical {
   --tw-ring-offset-color: var(--critical);
 }
@@ -37025,6 +37182,10 @@ video {
   --tw-ring-offset-color: var(--code-text);
 }
 
+.focus-within\:ring-offset-neutral:focus-within {
+  --tw-ring-offset-color: var(--neutral);
+}
+
 .focus-within\:ring-offset-critical:focus-within {
   --tw-ring-offset-color: var(--critical);
 }
@@ -37301,6 +37462,10 @@ video {
   --tw-ring-offset-color: var(--code-text);
 }
 
+.focus\:ring-offset-neutral:focus {
+  --tw-ring-offset-color: var(--neutral);
+}
+
 .focus\:ring-offset-critical:focus {
   --tw-ring-offset-color: var(--critical);
 }