@crowdstrike/tailwind-toucan-base 3.5.0 → 4.0.0

package/index.css

@@ -1029,130 +1029,213 @@ video {
 }
 
 .type-4xl {
+  font-family: Calibre, sans-serif;
   font-size: 3rem;
-  line-height: 3.25rem;
   font-weight: 500;
   letter-spacing: -0.025em;
+  line-height: 3.25rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-3xl {
+  font-family: Calibre, sans-serif;
   font-size: 2.5rem;
-  line-height: 3rem;
   font-weight: 500;
   letter-spacing: -0.025em;
+  line-height: 3rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-2xl {
+  font-family: Calibre, sans-serif;
   font-size: 2rem;
-  line-height: 2.5rem;
   font-weight: 500;
+  letter-spacing: 0em;
+  line-height: 2.5rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-xl {
+  font-family: Calibre, sans-serif;
   font-size: 1.5rem;
-  line-height: 2rem;
   font-weight: 500;
+  letter-spacing: 0em;
+  line-height: 2rem;
+  text-decoration: initial;
   text-rendering: geometricPrecision;
 }
 
 .type-lg {
+  font-family: Calibre, sans-serif;
   font-size: 1.25rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 2rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-lg-medium {
+  font-family: Calibre, sans-serif;
   font-size: 1.25rem;
-  line-height: 2rem;
   font-weight: 500;
+  letter-spacing: 0em;
+  line-height: 2rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-lg-tight-medium {
+  font-family: Calibre, sans-serif;
   font-size: 1.25rem;
-  line-height: 1.5rem;
   font-weight: 500;
+  letter-spacing: 0em;
+  line-height: 1.5rem;
+  text-decoration: initial;
   text-rendering: geometricPrecision;
 }
 
 .type-md {
+  font-family: Calibre, sans-serif;
   font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.5rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-md-medium {
+  font-family: Calibre, sans-serif;
   font-size: 1rem;
-  line-height: 1.5rem;
   font-weight: 500;
+  letter-spacing: 0em;
+  line-height: 1.5rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-md-underline {
+  font-family: Calibre, sans-serif;
   font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.5rem;
   text-decoration: underline;
+  text-rendering: initial;
 }
 
 .type-md-tight {
+  font-family: Calibre, sans-serif;
   font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.25rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-md-tight-medium {
+  font-family: Calibre, sans-serif;
   font-size: 1rem;
-  line-height: 1.25rem;
   font-weight: 500;
+  letter-spacing: 0em;
+  line-height: 1.25rem;
+  text-decoration: initial;
   text-rendering: geometricPrecision;
 }
 
 .type-md-tight-underline {
+  font-family: Calibre, sans-serif;
   font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.25rem;
   text-decoration: underline;
+  text-rendering: initial;
 }
 
 .type-sm-mono {
+  font-family: Monaco, monospace;
   font-size: .875rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.5rem;
-  font-family: Monaco, monospace;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-sm-mono-tight {
-  font-size: .875rem;
   font-family: Monaco, monospace;
+  font-size: .875rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.25rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-sm-mono-underline {
+  font-family: Monaco, monospace;
   font-size: .875rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.5rem;
-  font-family: Monaco, monospace;
   text-decoration: underline;
+  text-rendering: initial;
 }
 
 .type-xs {
+  font-family: Calibre, sans-serif;
   font-size: .75rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.25rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-xs-tight {
+  font-family: Calibre, sans-serif;
   font-size: .75rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-xs-tight-underline {
+  font-family: Calibre, sans-serif;
   font-size: .75rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1rem;
   text-decoration: underline;
+  text-rendering: initial;
 }
 
 .type-xs-mono {
+  font-family: Monaco, monospace;
   font-size: .75rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.5rem;
-  font-family: Monaco, monospace;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-xxs-mono {
+  font-family: Monaco, monospace;
   font-size: .5625rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1rem;
-  font-family: Monaco, monospace;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .geometric-precision-text {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/tailwind-toucan-base",
-  "version": "3.5.0",
+  "version": "4.0.0",
   "private": false,
   "description": "Tailwind preset for CrowdStrike's Toucan design system",
   "repository": "https://github.com/CrowdStrike/tailwind-toucan-base",
@@ -37,26 +37,26 @@
     }
   },
   "dependencies": {
-    "@changesets/changelog-github": "^0.4.8",
-    "@changesets/cli": "^2.26.1",
     "tailwindcss": "^2.2.15"
   },
   "devDependencies": {
-    "@figma-export/cli": "4.5.0",
+    "@changesets/changelog-github": "^0.4.8",
+    "@changesets/cli": "^2.26.2",
+    "@figma-export/cli": "4.7.0",
     "@nullvoxpopuli/eslint-configs": "2.2.62",
     "@types/fs-extra": "^11.0.1",
     "autoprefixer": "^10.4.14",
-    "c8": "^7.13.0",
+    "c8": "^8.0.0",
     "common-tags": "^1.8.2",
-    "eslint": "^8.38.0",
+    "eslint": "^8.45.0",
     "execa": "^7.1.1",
     "fs-extra": "^11.1.1",
     "npm-run-all": "^4.1.5",
-    "pnpm": "^8.3.1",
-    "postcss": "^8.4.23",
+    "pnpm": "^8.6.10",
+    "postcss": "^8.4.27",
     "tailwind-config-viewer": "^1.7.2",
-    "typescript": "^5.0.4",
-    "vitest": "0.30.1"
+    "typescript": "^5.1.6",
+    "vitest": "0.33.0"
   },
   "engines": {
     "node": ">=14.15.0"
@@ -64,11 +64,10 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@8.3.1",
+  "packageManager": "pnpm@8.6.10",
   "volta": {
-    "node": "18.16.0",
-    "yarn": "1.22.19",
-    "npm": "9.6.5"
+    "node": "18.17.0",
+    "pnpm": "7.32.5"
   },
   "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/toucan.css

@@ -1029,130 +1029,213 @@ video {
 }
 
 .type-4xl {
+  font-family: Calibre, sans-serif;
   font-size: 3rem;
-  line-height: 3.25rem;
   font-weight: 500;
   letter-spacing: -0.025em;
+  line-height: 3.25rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-3xl {
+  font-family: Calibre, sans-serif;
   font-size: 2.5rem;
-  line-height: 3rem;
   font-weight: 500;
   letter-spacing: -0.025em;
+  line-height: 3rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-2xl {
+  font-family: Calibre, sans-serif;
   font-size: 2rem;
-  line-height: 2.5rem;
   font-weight: 500;
+  letter-spacing: 0em;
+  line-height: 2.5rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-xl {
+  font-family: Calibre, sans-serif;
   font-size: 1.5rem;
-  line-height: 2rem;
   font-weight: 500;
+  letter-spacing: 0em;
+  line-height: 2rem;
+  text-decoration: initial;
   text-rendering: geometricPrecision;
 }
 
 .type-lg {
+  font-family: Calibre, sans-serif;
   font-size: 1.25rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 2rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-lg-medium {
+  font-family: Calibre, sans-serif;
   font-size: 1.25rem;
-  line-height: 2rem;
   font-weight: 500;
+  letter-spacing: 0em;
+  line-height: 2rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-lg-tight-medium {
+  font-family: Calibre, sans-serif;
   font-size: 1.25rem;
-  line-height: 1.5rem;
   font-weight: 500;
+  letter-spacing: 0em;
+  line-height: 1.5rem;
+  text-decoration: initial;
   text-rendering: geometricPrecision;
 }
 
 .type-md {
+  font-family: Calibre, sans-serif;
   font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.5rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-md-medium {
+  font-family: Calibre, sans-serif;
   font-size: 1rem;
-  line-height: 1.5rem;
   font-weight: 500;
+  letter-spacing: 0em;
+  line-height: 1.5rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-md-underline {
+  font-family: Calibre, sans-serif;
   font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.5rem;
   text-decoration: underline;
+  text-rendering: initial;
 }
 
 .type-md-tight {
+  font-family: Calibre, sans-serif;
   font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.25rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-md-tight-medium {
+  font-family: Calibre, sans-serif;
   font-size: 1rem;
-  line-height: 1.25rem;
   font-weight: 500;
+  letter-spacing: 0em;
+  line-height: 1.25rem;
+  text-decoration: initial;
   text-rendering: geometricPrecision;
 }
 
 .type-md-tight-underline {
+  font-family: Calibre, sans-serif;
   font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.25rem;
   text-decoration: underline;
+  text-rendering: initial;
 }
 
 .type-sm-mono {
+  font-family: Monaco, monospace;
   font-size: .875rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.5rem;
-  font-family: Monaco, monospace;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-sm-mono-tight {
-  font-size: .875rem;
   font-family: Monaco, monospace;
+  font-size: .875rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.25rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-sm-mono-underline {
+  font-family: Monaco, monospace;
   font-size: .875rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.5rem;
-  font-family: Monaco, monospace;
   text-decoration: underline;
+  text-rendering: initial;
 }
 
 .type-xs {
+  font-family: Calibre, sans-serif;
   font-size: .75rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.25rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-xs-tight {
+  font-family: Calibre, sans-serif;
   font-size: .75rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1rem;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-xs-tight-underline {
+  font-family: Calibre, sans-serif;
   font-size: .75rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1rem;
   text-decoration: underline;
+  text-rendering: initial;
 }
 
 .type-xs-mono {
+  font-family: Monaco, monospace;
   font-size: .75rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1.5rem;
-  font-family: Monaco, monospace;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .type-xxs-mono {
+  font-family: Monaco, monospace;
   font-size: .5625rem;
+  font-weight: 400;
+  letter-spacing: 0em;
   line-height: 1rem;
-  font-family: Monaco, monospace;
+  text-decoration: initial;
+  text-rendering: initial;
 }
 
 .geometric-precision-text {