@crowdstrike/tailwind-toucan-base 3.5.1 → 4.1.0

package/index.d.ts

@@ -514,6 +514,51 @@
           "name": "lines-light",
           "value": "#14141a"
         },
+        {
+          "category": [
+            "divider-lines"
+          ],
+          "fill": {
+            "r": 75,
+            "g": 75,
+            "b": 88,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(75, 75, 88)",
+          "name": "border-reg",
+          "value": "#4b4b58"
+        },
+        {
+          "category": [
+            "divider-lines"
+          ],
+          "fill": {
+            "r": 56,
+            "g": 56,
+            "b": 66,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(56, 56, 66)",
+          "name": "border-faint",
+          "value": "#383842"
+        },
+        {
+          "category": [
+            "divider-lines"
+          ],
+          "fill": {
+            "r": 103,
+            "g": 108,
+            "b": 121,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(103, 108, 121)",
+          "name": "border-bold",
+          "value": "#676c79"
+        },
         {
           "category": [
             "hues",
@@ -700,6 +745,21 @@
           "name": "overlay-2",
           "value": "#00000099"
         },
+        {
+          "category": [
+            "transparency"
+          ],
+          "fill": {
+            "r": 102,
+            "g": 102,
+            "b": 102,
+            "a": 0.13
+          },
+          "hasAlpha": true,
+          "rgbFill": "rgba(102, 102, 102, 0.13)",
+          "name": "overlay-reverse-0\\.5",
+          "value": "#666666"
+        },
         {
           "category": [
             "hues",
@@ -917,6 +977,21 @@
           "name": "surface-xl",
           "value": "#38373c"
         },
+        {
+          "category": [
+            "surfaces"
+          ],
+          "fill": {
+            "r": 0,
+            "g": 0,
+            "b": 0,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(0, 0, 0)",
+          "name": "surface-dash-widget",
+          "value": "#000000"
+        },
         {
           "category": [
             "interactive",
@@ -1511,6 +1586,51 @@
           "name": "lines-light",
           "value": "#eeeeee"
         },
+        {
+          "category": [
+            "divider-lines"
+          ],
+          "fill": {
+            "r": 200,
+            "g": 200,
+            "b": 208,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(200, 200, 208)",
+          "name": "border-reg",
+          "value": "#c8c8d0"
+        },
+        {
+          "category": [
+            "divider-lines"
+          ],
+          "fill": {
+            "r": 222,
+            "g": 222,
+            "b": 227,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(222, 222, 227)",
+          "name": "border-faint",
+          "value": "#dedee3"
+        },
+        {
+          "category": [
+            "divider-lines"
+          ],
+          "fill": {
+            "r": 156,
+            "g": 156,
+            "b": 170,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(156, 156, 170)",
+          "name": "border-bold",
+          "value": "#9c9caa"
+        },
         {
           "category": [
             "hues",
@@ -1697,6 +1817,21 @@
           "name": "overlay-2",
           "value": "#00000026"
         },
+        {
+          "category": [
+            "transparency"
+          ],
+          "fill": {
+            "r": 153,
+            "g": 153,
+            "b": 153,
+            "a": 0.13
+          },
+          "hasAlpha": true,
+          "rgbFill": "rgba(153, 153, 153, 0.13)",
+          "name": "overlay-reverse-0\\.5",
+          "value": "#999999"
+        },
         {
           "category": [
             "hues",
@@ -1914,6 +2049,21 @@
           "name": "surface-xl",
           "value": "#ffffff"
         },
+        {
+          "category": [
+            "surfaces"
+          ],
+          "fill": {
+            "r": 255,
+            "g": 255,
+            "b": 255,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(255, 255, 255)",
+          "name": "surface-dash-widget",
+          "value": "#ffffff"
+        },
         {
           "category": [
             "interactive",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/tailwind-toucan-base",
-  "version": "3.5.1",
+  "version": "4.1.0",
   "private": false,
   "description": "Tailwind preset for CrowdStrike's Toucan design system",
   "repository": "https://github.com/CrowdStrike/tailwind-toucan-base",
@@ -41,22 +41,25 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.8",
-    "@changesets/cli": "^2.26.1",
-    "@figma-export/cli": "4.6.0",
-    "@nullvoxpopuli/eslint-configs": "2.2.62",
+    "@changesets/cli": "^2.26.2",
+    "@figma-export/cli": "4.7.0",
+    "@nullvoxpopuli/eslint-configs": "^3.2.2",
     "@types/fs-extra": "^11.0.1",
-    "autoprefixer": "^10.4.14",
-    "c8": "^7.14.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
+    "@vitest/coverage-v8": "^0.34.4",
+    "autoprefixer": "^10.4.15",
+    "c8": "^8.0.1",
     "common-tags": "^1.8.2",
-    "eslint": "^8.41.0",
-    "execa": "^7.1.1",
+    "eslint": "^8.47.0",
+    "execa": "^8.0.1",
     "fs-extra": "^11.1.1",
     "npm-run-all": "^4.1.5",
-    "pnpm": "^8.6.0",
-    "postcss": "^8.4.24",
+    "pnpm": "^8.6.10",
+    "postcss": "^8.4.28",
     "tailwind-config-viewer": "^1.7.2",
-    "typescript": "^5.0.4",
-    "vitest": "0.31.2"
+    "typescript": "^5.2.2",
+    "vitest": "0.34.4"
   },
   "engines": {
     "node": ">=14.15.0"
@@ -64,11 +67,10 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@8.6.0",
+  "packageManager": "pnpm@8.6.10",
   "volta": {
-    "node": "18.16.0",
-    "yarn": "1.22.19",
-    "npm": "9.6.7"
+    "node": "18.17.1",
+    "pnpm": "8.6.10"
   },
   "scripts": {
     "start": "pnpm run build && npx http-server ./dist",

package/src/plugins/typography.js

@@ -8,13 +8,11 @@ module.exports = (fontSizes) =>
   });
 
 function addTextStyles({ addComponents, theme }, fontSize) {
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
-  let geometricPrecision = { textRendering: 'geometricPrecision' };
-  let underline = { textDecoration: 'underline' };
-
+  // geometricPrecision text rendering makes it appear slightly
+  // lighter than the standard font-weight
   let text = {
     '.geometric-precision-text': {
-      ...geometricPrecision,
+      textRendering: 'geometricPrecision',
     },
   };
 
@@ -24,114 +22,200 @@ function addTextStyles({ addComponents, theme }, fontSize) {
    * fontSize and lineHeight when used in this type of object, every usage
    * provides *two* fontSizes (one desired, one is supposed to be the lineHeight,
    * but is interpreted as a fontSize here).
+   *
+   * We use the `initial` value to unset values that might be otherwise
+   * inherited from parent elements eg. textRendering, textDecoration
    */
   let textStyles = {
     '.type-4xl': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize['4xl'],
-      lineHeight: theme('lineHeight.13'),
       fontWeight: theme('fontWeight.medium'),
       letterSpacing: theme('letterSpacing.tight'),
+      lineHeight: theme('lineHeight.13'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
     '.type-3xl': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize['3xl'],
-      lineHeight: theme('lineHeight.12'),
       fontWeight: theme('fontWeight.medium'),
       letterSpacing: theme('letterSpacing.tight'),
+      lineHeight: theme('lineHeight.12'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
     '.type-2xl': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize['2xl'],
-      lineHeight: theme('lineHeight.10'),
       fontWeight: theme('fontWeight.medium'),
+      letterSpacing: theme('letterSpacing.normal'),
+      lineHeight: theme('lineHeight.10'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
     '.type-xl': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize.xl,
-      lineHeight: theme('lineHeight.8'),
       fontWeight: theme('fontWeight.medium'),
-      ...geometricPrecision,
+      letterSpacing: theme('letterSpacing.normal'),
+      lineHeight: theme('lineHeight.8'),
+      textDecoration: 'initial',
+      textRendering: 'geometricPrecision',
     },
     '.type-lg': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize.lg,
+      fontWeight: theme('fontWeight.normal'),
+      letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.8'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
     '.type-lg-medium': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize.lg,
-      lineHeight: theme('lineHeight.8'),
       fontWeight: theme('fontWeight.medium'),
+      letterSpacing: theme('letterSpacing.normal'),
+      lineHeight: theme('lineHeight.8'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
     '.type-lg-tight-medium': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize.lg,
-      lineHeight: theme('lineHeight.6'),
       fontWeight: theme('fontWeight.medium'),
-      ...geometricPrecision,
+      letterSpacing: theme('letterSpacing.normal'),
+      lineHeight: theme('lineHeight.6'),
+      textDecoration: 'initial',
+      textRendering: 'geometricPrecision',
     },
     '.type-md': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize.md,
+      fontWeight: theme('fontWeight.normal'),
+      letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.6'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
     // deprecated? md-medium?
     '.type-md-medium': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize.md,
-      lineHeight: theme('lineHeight.6'),
       fontWeight: theme('fontWeight.medium'),
+      letterSpacing: theme('letterSpacing.normal'),
+      lineHeight: theme('lineHeight.6'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
     '.type-md-underline': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize.md,
+      fontWeight: theme('fontWeight.normal'),
+      letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.6'),
-      ...underline,
+      textDecoration: 'underline',
+      textRendering: 'initial',
     },
     '.type-md-tight': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize.md,
+      fontWeight: theme('fontWeight.normal'),
+      letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.5'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
     '.type-md-tight-medium': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize.md,
-      lineHeight: theme('lineHeight.5'),
       fontWeight: theme('fontWeight.medium'),
-      ...geometricPrecision,
+      letterSpacing: theme('letterSpacing.normal'),
+      lineHeight: theme('lineHeight.5'),
+      textDecoration: 'initial',
+      textRendering: 'geometricPrecision',
     },
     '.type-md-tight-underline': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize.md,
+      fontWeight: theme('fontWeight.normal'),
+      letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.5'),
-      ...underline,
+      textDecoration: 'underline',
+      textRendering: 'initial',
     },
     '.type-sm-mono': {
+      fontFamily: theme('fontFamily.mono'),
       fontSize: fontSize.sm,
+      fontWeight: theme('fontWeight.normal'),
+      letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.6'),
-      fontFamily: theme('fontFamily.mono'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
     '.type-sm-mono-tight': {
-      fontSize: fontSize.sm,
       fontFamily: theme('fontFamily.mono'),
+      fontSize: fontSize.sm,
+      fontWeight: theme('fontWeight.normal'),
+      letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.5'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
     '.type-sm-mono-underline': {
+      fontFamily: theme('fontFamily.mono'),
       fontSize: fontSize.sm,
+      fontWeight: theme('fontWeight.normal'),
+      letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.6'),
-      fontFamily: theme('fontFamily.mono'),
-      ...underline,
+      textDecoration: 'underline',
+      textRendering: 'initial',
     },
     '.type-xs': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize.xs,
+      fontWeight: theme('fontWeight.normal'),
+      letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.5'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
     '.type-xs-tight': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize.xs,
+      fontWeight: theme('fontWeight.normal'),
+      letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.4'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
     '.type-xs-tight-underline': {
+      fontFamily: theme('fontFamily.sans'),
       fontSize: fontSize.xs,
+      fontWeight: theme('fontWeight.normal'),
+      letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.4'),
-      ...underline,
+      textDecoration: 'underline',
+      textRendering: 'initial',
     },
     '.type-xs-mono': {
+      fontFamily: theme('fontFamily.mono'),
       fontSize: fontSize.xs,
+      fontWeight: theme('fontWeight.normal'),
+      letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.6'),
-      fontFamily: theme('fontFamily.mono'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
     '.type-xxs-mono': {
+      fontFamily: theme('fontFamily.mono'),
       fontSize: fontSize.xxs,
+      fontWeight: theme('fontWeight.normal'),
+      letterSpacing: theme('letterSpacing.normal'),
       lineHeight: theme('lineHeight.4'),
-      fontFamily: theme('fontFamily.mono'),
+      textDecoration: 'initial',
+      textRendering: 'initial',
     },
   };
 

package/src/theme-data.js

@@ -513,6 +513,51 @@ export default {
           "name": "lines-light",
           "value": "#14141a"
         },
+        {
+          "category": [
+            "divider-lines"
+          ],
+          "fill": {
+            "r": 75,
+            "g": 75,
+            "b": 88,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(75, 75, 88)",
+          "name": "border-reg",
+          "value": "#4b4b58"
+        },
+        {
+          "category": [
+            "divider-lines"
+          ],
+          "fill": {
+            "r": 56,
+            "g": 56,
+            "b": 66,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(56, 56, 66)",
+          "name": "border-faint",
+          "value": "#383842"
+        },
+        {
+          "category": [
+            "divider-lines"
+          ],
+          "fill": {
+            "r": 103,
+            "g": 108,
+            "b": 121,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(103, 108, 121)",
+          "name": "border-bold",
+          "value": "#676c79"
+        },
         {
           "category": [
             "hues",
@@ -699,6 +744,21 @@ export default {
           "name": "overlay-2",
           "value": "#00000099"
         },
+        {
+          "category": [
+            "transparency"
+          ],
+          "fill": {
+            "r": 102,
+            "g": 102,
+            "b": 102,
+            "a": 0.13
+          },
+          "hasAlpha": true,
+          "rgbFill": "rgba(102, 102, 102, 0.13)",
+          "name": "overlay-reverse-0\\.5",
+          "value": "#666666"
+        },
         {
           "category": [
             "hues",
@@ -916,6 +976,21 @@ export default {
           "name": "surface-xl",
           "value": "#38373c"
         },
+        {
+          "category": [
+            "surfaces"
+          ],
+          "fill": {
+            "r": 0,
+            "g": 0,
+            "b": 0,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(0, 0, 0)",
+          "name": "surface-dash-widget",
+          "value": "#000000"
+        },
         {
           "category": [
             "interactive",
@@ -1510,6 +1585,51 @@ export default {
           "name": "lines-light",
           "value": "#eeeeee"
         },
+        {
+          "category": [
+            "divider-lines"
+          ],
+          "fill": {
+            "r": 200,
+            "g": 200,
+            "b": 208,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(200, 200, 208)",
+          "name": "border-reg",
+          "value": "#c8c8d0"
+        },
+        {
+          "category": [
+            "divider-lines"
+          ],
+          "fill": {
+            "r": 222,
+            "g": 222,
+            "b": 227,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(222, 222, 227)",
+          "name": "border-faint",
+          "value": "#dedee3"
+        },
+        {
+          "category": [
+            "divider-lines"
+          ],
+          "fill": {
+            "r": 156,
+            "g": 156,
+            "b": 170,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(156, 156, 170)",
+          "name": "border-bold",
+          "value": "#9c9caa"
+        },
         {
           "category": [
             "hues",
@@ -1696,6 +1816,21 @@ export default {
           "name": "overlay-2",
           "value": "#00000026"
         },
+        {
+          "category": [
+            "transparency"
+          ],
+          "fill": {
+            "r": 153,
+            "g": 153,
+            "b": 153,
+            "a": 0.13
+          },
+          "hasAlpha": true,
+          "rgbFill": "rgba(153, 153, 153, 0.13)",
+          "name": "overlay-reverse-0\\.5",
+          "value": "#999999"
+        },
         {
           "category": [
             "hues",
@@ -1913,6 +2048,21 @@ export default {
           "name": "surface-xl",
           "value": "#ffffff"
         },
+        {
+          "category": [
+            "surfaces"
+          ],
+          "fill": {
+            "r": 255,
+            "g": 255,
+            "b": 255,
+            "a": 1
+          },
+          "hasAlpha": false,
+          "rgbFill": "rgb(255, 255, 255)",
+          "name": "surface-dash-widget",
+          "value": "#ffffff"
+        },
         {
           "category": [
             "interactive",