@wwtdev/bsds-css 2.29.0 → 3.0.0-rc.21

package/README.md

@@ -14,11 +14,11 @@ import '@wwtdev/bsds-css/dist/wwt-bsds.min.css'
 
 ## Using with Tailwind CSS
 
-If your project uses Tailwind, complete the steps above and then [install Tailwind](https://tailwindcss.com/docs/installation) if you haven't already. You can follow the instructions in their docs with the exceptions listed below.
+If your project uses Tailwind, complete the steps above and then [install Tailwind](https://tailwindcss.com/docs/installation) if you haven't already. You can follow the instructions in their docs with the exceptions listed below
 
 ### 1. Add the WWT Preset to the Tailwind config.
 
-For new projects, we recommend that you use the provided config file as a [**preset**](https://tailwindcss.com/docs/presets).  When setting up the `tailwind.config.js` file, import the WWT preset from the CSS Framework package.  Note that `wwt-bsds-preset.js` sets `config.corePlugins.preflight: false` by default; we do this to apply our style resets instead of the Tailwind resets. 
+For new projects, we recommend that you use the provided config file as a [**preset**](https://tailwindcss.com/docs/presets).  When setting up the `tailwind.config.js` file, import the WWT preset from the CSS Framework package.  Note that `wwt-bsds-preset.js` sets `config.corePlugins.preflight: false` by default; we do this to apply our style resets instead of the Tailwind resets.
 
 ```javascript
 /* tailwind.config.js */
@@ -58,7 +58,7 @@ Once you have completed the Tailwind installation steps, you can use the classes
 
 #### Order matters!
 
-In your project's stylesheet ordering, the BSDS CSS framework should come first, _then_ the base Tailwind styles for easier overriding via TW utilities.  
+In your project's stylesheet ordering, the BSDS CSS framework should come first, _then_ the base Tailwind styles for easier overriding via TW utilities.
 
 ```javascript
 /* src/main.js */
@@ -71,7 +71,7 @@ import './styles/tailwind.css'
 
 ```
 
-Alternatively, you can leverage native CSS `@layer` to ensure TW utilities will always trump these styles.  
+Alternatively, you can leverage native CSS `@layer` to ensure TW utilities will always trump these styles.
 
 ```css
 /* src/styles/index.css (or wherever your styles live)  */

package/dist/wwt-bsds-preset.js

@@ -100,12 +100,47 @@ module.exports = {
         500: "#17171F",
         600: "#0B0B10"
       },
+      "shadow-primary": "rgba(0, 0, 0, 0.06)",
+      "shadow-secondary": "rgba(28, 0, 135, 0.2)",
       "gradient-dark":
         "linear-gradient(90deg, #1C0087 0%, #EE282A 35%, #FFFFFF 50%, #0086EA 65%, #1C0087 100%)",
       "gradient-light":
         "linear-gradient(90deg, #1C0087 0%, #EE282A 20%, #EE282A 40%, #1C0087 50%, #0086EA 60%, #0086EA 80%, #1C0087 100%)",
       "gradient-line":
-        "linear-gradient(90deg, #EE282A 0%, #1C0087 50%, #0086EA 100%)"
+        "linear-gradient(90deg, #EE282A 0%, #1C0087 50%, #0086EA 100%)",
+      // Atom
+      "gradient-atom-ai-border": "conic-gradient(from 180deg at 50% 50%, var(--bs-royal-400) -96.8deg, var(--bs-pink-400) 74.2deg, var(--bs-blue-400) 98.8deg, var(--bs-orange-400) 259.6deg, var(--bs-royal-400) 283.2deg, var(--bs-pink-400) 414.4deg)",
+      "gradient-atom-ai-bg": "conic-gradient(from 180deg at 50% 50%, rgba(22, 47, 180, 0.05) -96.8deg, rgba(227, 28, 121, 0.05) 74.2deg, rgba(0, 134, 234, 0.05) 98.8deg, rgba(251, 85, 14, 0.05) 259.6deg, rgba(22, 47, 180, 0.05) 283.2deg, rgba(227, 28, 121, 0.05) 414.4deg)",
+      // Top
+      "gradient-blue-top-left":
+        "radial-gradient(312.54% 141.42% at 0% 0%, #162FB4 0%, #1D1E48 100%)",
+      "gradient-blue-top-center":
+        "radial-gradient(201.14% 201.14% at 50% -51.28%, #162FB4 26.06%, #1D1E48 100%)",
+      "gradient-blue-top-right":
+        "radial-gradient(312.54% 141.42% at 100% 0%, #162FB4 0%, #1D1E48 100%)",
+      // Mid
+      "gradient-blue-mid-left":
+        "radial-gradient(347.1% 117.22% at -9.27% 49.86%, #162FB4 8.19%, #1D1E48 100%)",
+      // "gradient-blue-mid-right":
+      //   "radial-gradient(347.1% 117.22% at -9.27% 49.86%, #162FB4 8.19%, #1D1E48 100%)",
+      // Center
+      "gradient-blue-center":
+        "radial-gradient(172.57% 58.28% at 50% 49.86%, #162FB4 0%, #1D1E48 100%)",
+      // Bottom
+      // "gradient-blue-bottom-left":
+      //   "radial-gradient(312.54% 141.42% at 100% 0%, #162FB4 0%, #1D1E48 100%)",
+      // "gradient-blue-bottom-center":
+      //   "radial-gradient(201.14% 201.14% at  50% -51.28%, #162FB4 26.06%, #1D1E48 100%)",
+      // "gradient-blue-bottom-right":
+      //   "radial-gradient(312.54% 141.42% at 100% 0%, #162FB4 0%, #1D1E48 100%)",
+      // Light Blue
+      "gradient-light-blue-transparent":
+        "radial-gradient(236% 114.71% at 94.24% 7.6%, rgba(153, 207, 247, 0.20) 0%, rgba(203, 192, 218, 0.08) 100%)",
+      "gradient-light-blue-opaque":
+        "linear-gradient(311deg, #EBF7FF 9.29%, #FBFAFC 92%)",
+      // Light Gray
+      "gradient-light-gray":
+        "linear-gradient(180deg, #F7F7FC 24.82%, #F0F0FA 100%)",
     },
     fontFamily: {
       sans: [
@@ -125,60 +160,57 @@ module.exports = {
       ]
     },
     fontSize: {
-      xs: ".75rem", // 12px
-      sm: ".875rem", // 14px
+      xs: "0.75rem", // 12px
+      sm: "0.875rem", // 14px
       base: "1rem", // 16px
       md: "1.125rem", // 18px
       lg: "1.25rem", // 20px
       xl: "1.5rem", // 24px
-      "2xl": "2rem", // 32px
-      "3xl": "2.25rem", // 36px
-      "4xl": "3rem", // 48px
-      // @link https://utopia.fyi/type/calculator/?c=400,16,1.125,1200,16,1.2,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-xl
-      // We're using utopia as a staring point but adjusting to our scale with the same math functions
-      "f-xs": "clamp(0.69rem, calc(0.84rem + -0.19vw), 0.79rem)",
-      "f-sm": "clamp(0.83rem, calc(0.92rem + -0.11vw), 0.89rem)",
-      "f-base": "clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem)",
-      "f-md": "clamp(1.00rem, calc(0.94rem + 0.25vw), 1.125rem)",
-      "f-lg": "clamp(1.125rem, calc(1.06rem + 0.25vw), 1.25rem)",
-      "f-xl": "clamp(1.25rem, calc(1.13rem + 0.50vw), 1.50rem)",
-      "f-2xl": "clamp(1.50rem, calc(1.25rem + 1.00vw), 2.00rem)",
-      "f-3xl": "clamp(2.00rem, calc(1.88rem + 0.50vw), 2.25rem)",
-      "f-4xl": "clamp(2.25rem, calc(1.88rem + 1.50vw), 3.00rem)"
+      "2xl": "1.75rem", // 28px
+      "3xl": "2rem", // 32px
+      "4xl": "2.25rem", // 36px
+      "5xl": "2.625rem", // 42px
+      "6xl": "3rem", // 48px
+    },
+    fontWeight: {
+      "light": "300",
+      "normal": "400",
+      "semibold": "600"
     },
     extend: {
-      animation: {
-        'spin-2': 'spin 2s linear infinite',
-        'spin-3': 'spin 3s linear infinite'
-      },
       backgroundColor: {
+        "transparent": "var(--bs-transparent)",
+        "inherit": "var(--bs-inherit)",
+        "current": "var(--bs-current)",
         "base": "var(--bs-bg-base)",
-        "base-elevated": "var(--bs-bg-base-elevated)",
+        "light": "var(--bs-bg-light)",
+        "medium": "var(--bs-bg-medium)",
+        "disabled": "var(--bs-bg-disabled)",
+        "invert-base": "var(--bs-bg-invert-base)",
+        "invert-light": "var(--bs-bg-invert-light)",
+        "invert-medium": "var(--bs-bg-invert-medium)",
         "base-to-light": "var(--bs-bg-base-to-light)",
         "base-to-medium": "var(--bs-bg-base-to-medium)",
-        "light": "var(--bs-bg-light)",
+        "medium-to-base": "var(--bs-bg-medium-to-base)",
+        "medium-to-light": "var(--bs-bg-medium-to-light)",
         "light-to-base": "var(--bs-bg-light-to-base)",
         "light-to-medium": "var(--bs-bg-light-to-medium)",
-        "medium": "var(--bs-bg-medium)",
-        "medium-to-light": "var(--bs-bg-medium-to-light)",
-        "medium-to-base": "var(--bs-bg-medium-to-base)",
-        "invert-to-light": "var(--bs-bg-invert-to-light)",
-        "invert-to-base": "var(--bs-bg-invert-to-base)",
-        "invert-to-medium": "var(--bs-bg-invert-to-medium)",
-        "disabled": "var(--bs-bg-disabled)"
       },
       borderColor: {
-        "dark": "var(--bs-border-dark)",
+        "transparent": "var(--bs-transparent)",
+        "inherit": "var(--bs-inherit)",
+        "current": "var(--bs-current)",
         "base": "var(--bs-border-base)",
         "medium": "var(--bs-border-medium)",
-        "medium-to-light": "var(--bs-border-medium-to-light)",
         "light": "var(--bs-border-light)",
+        "dark": "var(--bs-border-dark)",
+        "medium-to-light": "var(--bs-border-medium-to-light)",
         "input": "var(--bs-border-input)",
         "active": "var(--bs-border-active)",
         "error": "var(--bs-border-error)"
       },
       borderRadius: {
-        md: ".25rem"
+        md: "0.25rem"
       },
       borderWidth: {
         1: "1px",
@@ -186,66 +218,74 @@ module.exports = {
       },
       boxShadow: {
         DEFAULT:
-        "-4px 4px 12px rgba(0,0,0,0.06), -8px 8px 16px rgba(28,0,135,0.2)",
+        "-4px 4px 12px var(--bs-shadow-primary), -8px 8px 16px var(--bs-shadow-secondary)",
         contentLow:
-          "-4px 4px 12px rgba(0,0,0,0.06), -8px 8px 16px rgba(28,0,135,0.2)",
+          "-4px 4px 12px var(--bs-shadow-primary), -8px 8px 16px var(--bs-shadow-secondary)",
         contentLowCenter:
-          "0px 0px 12px rgba(0,0,0,0.06), 0px 0px 16px rgba(28,0,135,0.2)",
+          "0px 0px 12px var(--bs-shadow-primary), 0px 0px 16px var(--bs-shadow-secondary)",
         contentMedium:
-          "-8px 8px 24px rgba(0,0,0,0.06), -16px 16px 32px rgba(28,0,135,0.2)",
+          "-8px 8px 24px var(--bs-shadow-primary), -16px 16px 32px var(--bs-shadow-secondary)",
         contentHigh:
-          "0px 16px 48px rgba(0,0,0,0.06), 0px 32px 64px rgba(28,0,135,0.2)",
+          "0px 16px 48px var(--bs-shadow-primary), 0px 32px 64px var(--bs-shadow-secondary)",
         drawerLeft:
-          "-12px 12px 24px rgba(0,0,0,0.06), -16px 16px 32px rgba(28,0,135,0.2)",
+          "-12px 12px 24px var(--bs-shadow-primary), -16px 16px 32px var(--bs-shadow-secondary)",
         drawerRight:
-          "-12px 12px 24px rgba(0,0,0,0.06), 16px 16px 32px rgba(28,0,135,0.2)",
-        profilePhoto: "inset 0px 0px 0.5em rgba(28,0,135,0.25)"
+          "-12px 12px 24px var(--bs-shadow-primary), 16px 16px 32px var(--bs-shadow-secondary)",
+        profilePhoto: "inset 0px 0px 0.5em var(--bs-shadow-secondary)",
       },
       colors: {
+        // Blue
         "blue-base": "var(--bs-blue-base)",
         "blue-medium": "var(--bs-blue-medium)",
         "blue-light": "var(--bs-blue-light)",
         "blue-lightest": "var(--bs-blue-lightest)",
+        // Plum
         "plum-base": "var(--bs-plum-base)",
         "plum-medium": "var(--bs-plum-medium)",
         "plum-light": "var(--bs-plum-light)",
         "plum-lightest": "var(--bs-plum-lightest)",
+        // Red
         "red-base": "var(--bs-red-base)",
         "red-medium": "var(--bs-red-medium)",
         "red-light": "var(--bs-red-light)",
         "red-lightest": "var(--bs-red-lightest)",
+        // Royal
         "royal-base": "var(--bs-royal-base)",
         "royal-medium": "var(--bs-royal-medium)",
         "royal-light": "var(--bs-royal-light)",
         "royal-lightest": "var(--bs-royal-lightest)",
+        // Navy
         "navy-base": "var(--bs-navy-base)",
         "navy-medium": "var(--bs-navy-medium)",
         "navy-light": "var(--bs-navy-light)",
         "navy-lightest": "var(--bs-navy-lightest)",
+        // Pink
         "pink-base": "var(--bs-pink-base)",
         "pink-medium": "var(--bs-pink-medium)",
         "pink-light": "var(--bs-pink-light)",
         "pink-lightest": "var(--bs-pink-lightest)",
+        // Violet
         "violet-base": "var(--bs-violet-base)",
         "violet-medium": "var(--bs-violet-medium)",
         "violet-light": "var(--bs-violet-light)",
         "violet-lightest": "var(--bs-violet-lightest)",
+        // Orange
+        "warning": "var(--bs-warning)",
         "orange-base": "var(--bs-orange-base)",
         "orange-medium": "var(--bs-orange-medium)",
         "orange-light": "var(--bs-orange-light)",
         "orange-lightest": "var(--bs-orange-lightest)",
-        "orange-warning": "var(--bs-orange-warning)",
-        // 👆 leaving here for compatibility.  Map to / deprecate in favor of 'warning.'
+        // Purple
         "purple-base": "var(--bs-purple-base)",
         "purple-medium": "var(--bs-purple-medium)",
         "purple-light": "var(--bs-purple-light)",
         "purple-lightest": "var(--bs-purple-lightest)",
+        // Gray
         "gray-dark": "var(--bs-gray-dark)",
         "gray-base": "var(--bs-gray-base)",
         "gray-medium": "var(--bs-gray-medium)",
         "gray-light": "var(--bs-gray-light)",
-        "gray-lightest": "var(--bs-gray-lightest)",
-        "warning": "var(--bs-warning)"
+        "gray-lightest": "var(--bs-gray-lightest)"
       },
       height: {
         18: "4.5rem",
@@ -255,9 +295,10 @@ module.exports = {
         76: "19rem",
       },
       lineHeight: {
-        sm: "115%",
-        base: "150%",
-        regular: 1.33,
+        "none": 1,
+        "sm": 1.10,
+        "regular": 1.30,
+        "lg": 1.50
       },
       margin: {
         13: "3.25rem",
@@ -289,30 +330,37 @@ module.exports = {
         dt: "1166px",
       },
       spacing: {
-        // referenced so we can generate css properties in tokens.css
-        ...defaultTheme.spacing,
-        // @link https://utopia.fyi/space/calculator?c=400,16,1.125,1200,16,1.2,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|m-xl|xl-3xl
-        // for fluid sizing we are only using the one up pairs and custom pairs - base sizing is static
-        "f-1": "clamp(0.25rem, calc(0.13rem + 0.50vw), 0.50rem)",
-        "f-2": "clamp(0.50rem, calc(0.38rem + 0.50vw), 0.75rem)",
-        "f-3": "clamp(0.75rem, calc(0.63rem + 0.50vw), 1.00rem)",
-        "f-4": "clamp(1.00rem, calc(0.75rem + 1.00vw), 1.50rem)",
-        "f-6": "clamp(1.50rem, calc(1.25rem + 1.00vw), 2.00rem)",
-        "f-8": "clamp(2.00rem, calc(1.50rem + 2.00vw), 3.00rem)",
-        "f-12": "clamp(4.00rem, calc(3.00rem + 4.00vw), 6.00rem)",
-        "f-16": "clamp(4.00rem, calc(3.00rem + 4.00vw), 6.00rem)",
-        "f-24": "clamp(6.00rem, calc(5.00rem + 4.00vw), 8.00rem)",
-        "f-4to8": "clamp(1.00rem, calc(0.50rem + 2.00vw), 2.00rem)", // small to large
-        "f-6to12": "clamp(1.50rem, calc(0.75rem + 3.00vw), 3.00rem)", // medium to XL
-        "f-12to24": "clamp(3.00rem, calc(1.50rem + 6.00vw), 6.00rem)" // XL to 3XL
+        "none": "0", // 0
+        "0": "var(--bs-space-none)",
+        "3xs": "0.25rem", // 4px
+        "1": "var(--bs-space-3xs)",
+        "2xs": "0.5rem", // 8px
+        "2": "var(--bs-space-2xs)",
+        "xs": "0.75rem", // 12px
+        "3": "var(--bs-space-xs)",
+        "sm": "1rem", // 16px
+        "4": "var(--bs-space-sm)",
+        "md": "1.5rem", // 24px
+        "6": "var(--bs-space-md)",
+        "lg": "2rem", // 32px
+        "8": "var(--bs-space-lg)",
+        "xl": "3rem", // 48px
+        "12": "var(--bs-space-xl)",
+        "2xl": "4rem", // 64px
+        "16": "var(--bs-space-2xl)",
+        "3xl": "6rem", // 96px
+        "24": "var(--bs-space-3xl)",
+        "4xl": "8rem", // 128px
+        "32": "var(--bs-space-4xl)",
       },
       textColor: {
+        "transparent": "var(--bs-transparent)",
+        "inherit": "var(--bs-inherit)",
+        "current": "var(--bs-current)",
         "ink-base": "var(--bs-ink-base)",
         "ink-medium": "var(--bs-ink-medium)",
         "ink-light": "var(--bs-ink-light)",
-        "ink-accent": "var(--bs-ink-accent)",
         "ink-disabled": "var(--bs-ink-disabled)",
-        "ink-invert": "var(--bs-ink-invert)",
         "ink-invert-base": "var(--bs-ink-invert-base)",
         "ink-invert-light": "var(--bs-ink-invert-light)",
         "ink-invert-medium": "var(--bs-ink-invert-medium)",
@@ -336,14 +384,94 @@ module.exports = {
     plugin(function ({ addUtilities }) {
       addUtilities({
         '.bs-bg-atom-ai': {
-          backgroundImage: `var(--bs-bg-atom-ai)`
+          backgroundImage: `var(--bs-gradient-atom-ai-bg)`
         },
         '.bs-border-atom-ai': {
           /* border-image (which is needed for the border gradient) cannot be combined with border-radius 🤷‍♂️  */
           /* this uses the background-clip property, which is compatible */
           background: `linear-gradient(white, white) padding-box,
-                      var(--bs-atom-ai) border-box`,
+                      var(--bs-gradient-atom-ai-border) border-box`,
           border: '2px solid transparent'
+        },
+        // Text size overrides for mobile/dt screens and font-weight + line-height
+        'text-xs': {
+          fontSize: 'var(--bs-text-xs)',
+          fontWeight: "var(--bs-font-semibold)",
+          lineHeight: "var(--bs-leading-lg)",
+        },
+        'text-sm': {
+          fontSize: 'var(--bs-text-sm)',
+          fontWeight: "var(--bs-font-normal)",
+          lineHeight: "var(--bs-leading-lg)",
+        },
+        'text-base': {
+          fontSize: 'var(--bs-text-base)',
+          fontWeight: "var(--bs-font-normal)",
+          lineHeight: "var(--bs-leading-lg)",
+        },
+        '.text-md': {
+          fontSize: 'var(--bs-text-base)',
+          fontWeight: "var(--bs-font-normal)",
+          lineHeight: "var(--bs-leading-lg)",
+          '@screen dt': {
+            fontSize: 'var(--bs-text-md)',
+          }
+        },
+        '.text-lg': {
+          fontSize: 'var(--bs-text-md)',
+          fontWeight: "var(--bs-font-normal)",
+          lineHeight: "var(--bs-leading-regular)",
+          '@screen dt': {
+            fontSize: 'var(--bs-text-lg)',
+          }
+        },
+        '.text-xl': {
+          fontSize: 'var(--bs-text-lg)',
+          fontWeight: "var(--bs-font-normal)",
+          lineHeight: "var(--bs-leading-sm)",
+          '@screen dt': {
+            fontSize: 'var(--bs-text-xl)'
+          }
+        },
+        '.text-2xl': {
+          fontSize: 'var(--bs-text-xl)',
+          fontWeight: "var(--bs-font-light)",
+          lineHeight: "var(--bs-leading-sm)",
+          '@screen dt': {
+            fontSize: 'var(--bs-text-2xl)'
+          }
+        },
+        '.text-3xl': {
+          fontSize: 'var(--bs-text-2xl)',
+          fontWeight: "var(--bs-font-light)",
+          lineHeight: "var(--bs-leading-sm)",
+          '@screen dt': {
+            fontSize: 'var(--bs-text-3xl)'
+          }
+        },
+        '.text-4xl': {
+          fontSize: 'var(--bs-text-3xl)',
+          fontWeight: "var(--bs-font-light)",
+          lineHeight: "var(--bs-leading-sm)",
+          '@screen dt': {
+            fontSize: 'var(--bs-text-4xl)'
+          }
+        },
+        '.text-5xl': {
+          fontSize: 'var(--bs-text-4xl)',
+          fontWeight: "var(--bs-font-light)",
+          lineHeight: "var(--bs-leading-sm)",
+          '@screen dt': {
+            fontSize: 'var(--bs-text-5xl)'
+          }
+        },
+        '.text-6xl': {
+          fontSize: 'var(--bs-text-5xl)',
+          fontWeight: "var(--bs-font-light)",
+          lineHeight: "var(--bs-leading-sm)",
+          '@screen dt': {
+            fontSize: 'var(--bs-text-6xl)'
+          }
         }
       })
     })