@kaizen/tailwind 1.5.0 → 1.5.2

package/dist/cjs/kz-spacing.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var designTokens = require('@kaizen/design-tokens');
+var js = require('@kaizen/design-tokens/js');
 var tokenDenyList = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl', 'xxxxl', 'xxxxxl', 'xs-id', 'sm-id', 'md-id', 'lg-id', 'xl-id', 'xxl-id', 'xxxl-id', 'xxxxl-id', 'xxxxxl-id'];
 /**
  * checks if a key from design tokens should be filtered from tailwind
@@ -16,6 +16,6 @@ var filterDenyListValues = function (spacingTokensObject) {
     return isValidToken(key);
   }));
 };
-var kzSpacing = filterDenyListValues(designTokens.heartTheme.spacing);
+var kzSpacing = filterDenyListValues(js.tokens.spacing);
 exports.filterDenyListValues = filterDenyListValues;
 exports.kzSpacing = kzSpacing;

package/dist/cjs/tailwind-presets.cjs

@@ -102,7 +102,7 @@ var kaizenTailwindTheme = {
   screens: {
     md: js.tokens.layout.breakpoints.medium,
     // => @media (min-width: 768px) { ... }
-    lg: js.tokens.layout.breakpoints.large // => @media (min-width: 1080px) { ... }
+    lg: js.tokens.layout.breakpoints.large // => @media (min-width: 1024px) { ... }
   }
 };
 var Preset = {

package/dist/esm/kz-spacing.mjs

@@ -1,4 +1,4 @@
-import { heartTheme } from '@kaizen/design-tokens';
+import { tokens } from '@kaizen/design-tokens/js';
 var tokenDenyList = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl', 'xxxxl', 'xxxxxl', 'xs-id', 'sm-id', 'md-id', 'lg-id', 'xl-id', 'xxl-id', 'xxxl-id', 'xxxxl-id', 'xxxxxl-id'];
 /**
  * checks if a key from design tokens should be filtered from tailwind
@@ -14,5 +14,5 @@ var filterDenyListValues = function (spacingTokensObject) {
     return isValidToken(key);
   }));
 };
-var kzSpacing = filterDenyListValues(heartTheme.spacing);
+var kzSpacing = filterDenyListValues(tokens.spacing);
 export { filterDenyListValues, kzSpacing };

package/dist/esm/tailwind-presets.mjs

@@ -100,7 +100,7 @@ var kaizenTailwindTheme = {
   screens: {
     md: tokens.layout.breakpoints.medium,
     // => @media (min-width: 768px) { ... }
-    lg: tokens.layout.breakpoints.large // => @media (min-width: 1080px) { ... }
+    lg: tokens.layout.breakpoints.large // => @media (min-width: 1024px) { ... }
   }
 };
 var Preset = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/tailwind",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Kaizen Tailwind presets",
   "repository": {
     "type": "git",
@@ -22,21 +22,22 @@
   "private": false,
   "license": "MIT",
   "dependencies": {
-    "@kaizen/design-tokens": "10.10.0"
+    "@kaizen/design-tokens": "11.0.0"
   },
   "devDependencies": {
-    "@cultureamp/package-bundler": "^2.3.1",
+    "@cultureamp/package-bundler": "^2.3.2",
+    "@tailwindcss/container-queries": "^0.1.1",
     "classnames": "^2.5.1",
-    "rollup": "^4.40.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rollup": "^4.46.2",
     "tailwindcss": "^3.4.17",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "tailwindcss": ">=3.4.7",
     "react": "^18.3.1 || ^19.0.0",
-    "react-dom": "^18.3.1 || ^19.0.0"
+    "react-dom": "^18.3.1 || ^19.0.0",
+    "tailwindcss": ">=3.4.7"
   },
   "scripts": {
     "build": "pnpm package-bundler build",

package/src/_docs/pages/configuration.mdx

@@ -59,7 +59,7 @@ If this is changed or you are not using the [Frontend Template](https://github.c
 ```
 
 <Unstyled>
-  <InlineNotification persistent type="cautionary" style="inline" title="Changing the selector">
+  <InlineNotification persistent variant="cautionary" style="inline" title="Changing the selector">
     {
       <>
         We advise using an <code>id</code> with <code>&quot;#root&quot;</code> as the default

package/src/_docs/pages/contributing.mdx

@@ -19,7 +19,7 @@ You may also need to reload the window for these to be picked up with TW Intelli
 
 **Intellisense not working within the class attributes**
 
-For configuring IntelliSense refer to the [CONFIGURATION.md](/story/systems-tailwind-preset-configuration--page)
+For configuring IntelliSense refer to the [Getting Started guide](/docs/guides-tailwind-getting-started--docs#tailwind-css-vscode-intellisense-plugin)
 
 Check the output in your terminal output for TailwindCSS IntelliSense.
 

package/src/_docs/pages/getting-started.mdx

@@ -50,7 +50,7 @@ module.exports = {
 }
 ```
 
-For preset configuration options, see our [configuration docs](/story/systems-tailwind-configuration--page).
+For preset configuration options, see our [configuration docs](/docs/guides-tailwind-configuration--docs).
 
 ## 3. Add the Tailwind Directives
 

package/src/_docs/pages/modifiers/container-queries.mdx

@@ -0,0 +1,72 @@
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './container-queries.stories'
+
+<Meta of={Examples} />
+
+# Container Queries
+
+<Description />
+
+Container queries allow you to apply styles based on the size of a container rather than the viewport. This is especially useful for creating truly reusable components that adapt to their context.
+
+## Fallback container parent
+
+The Kaizen design system includes a fallback container parent in the `_reset.css` file:
+
+```css
+body {
+  container-type: inline-size;
+}
+```
+
+This means that if you use container query classes (like `@md:bg-blue-400`) without explicitly adding an `@container` parent, the body element will act as the container context. In this case, container queries will functionally behave the same as viewport media queries, making the transition from media queries to container queries non-breaking for existing components.
+
+## Preset container queries
+
+Container queries work by establishing a containment context on a parent element using the `@container` class, then applying conditional styles to child elements using the `@` prefix.
+
+<Story of={Examples.ContainerQueries} />
+
+## Using arbitrary values
+
+For one-off container sizes that don't match your configured breakpoints, you can use arbitrary values in square brackets.
+
+<Story of={Examples.ArbitraryContainerQueries} />
+
+## Named containers
+
+When you have nested containers, you can use named containers to query specific containers by name. This prevents conflicts where a child element might respond to the wrong container.
+
+```tsx
+<div className="mt-12 border-1 border-dashed border-purple-300 p-8">
+  <Text variant="body">
+    <strong>Outer container ("sidebar") - resize to see effect</strong>
+  </Text>
+  <div className="@container/sidebar mt-4 resize overflow-auto border-2 border-blue-300">
+    <div className="p-4">
+      <Text variant="body">
+        <strong>Inner container ("card")</strong>
+      </Text>
+      <div className="@container/card mt-2 border border-gray-300 p-2">
+        <div className="@md/sidebar:bg-green-400 h-[50px] w-full rounded border-solid">
+          <div className="flex h-full items-center justify-center text-xs">
+            <Text variant="body">Responds to sidebar container</Text>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+<Story of={Examples.NamedContainers} />
+
+## Best practices
+
+- **For container behavior**: Always establish a containment context with `@container` (or named `@container/name`) on the parent element
+- **Fallback behavior**: Without an explicit `@container` parent, container queries will use the body element and behave like viewport media queries
+- Container queries respond to the **container's** size, not the viewport size (unless using the body fallback)
+- Use named containers when you have nested container contexts
+- Combine container queries with regular responsive design for optimal flexibility
+- Container queries work great for component-level responsive design
+- The fallback body container makes migrating from media queries to container queries seamless

package/src/_docs/pages/modifiers/container-queries.stories.tsx

@@ -0,0 +1,124 @@
+import React from 'react'
+import { type Meta, type StoryFn } from '@storybook/react'
+import { Heading } from '~components/Heading'
+import { Text } from '~components/Text'
+
+export default {
+  title: 'Guides/Tailwind/Utility Class References/Modifiers/Container Queries',
+  parameters: {
+    docsLayout: 'fullPage',
+    docs: {
+      a11y: { disable: true },
+      description: {
+        component: 'Require @kaizen/tailwind and add it into your tailwind config',
+      },
+    },
+  },
+} satisfies Meta
+
+type ContainerQueryInfoProps = {
+  selector: string
+  selectorValue: string
+  children: React.ReactElement
+}
+
+const ContainerQueryInfo = ({
+  selector,
+  selectorValue,
+  children,
+}: ContainerQueryInfoProps): React.ReactElement => (
+  <div className="my-12">
+    <Text variant="intro-lede">Container query selector: @{selector}</Text>
+    <Text variant="body">Breakpoint: {selectorValue}</Text>
+    <Text variant="body">In this example: @{selector}:bg-blue-400</Text>
+    {/* Container wrapper to demonstrate container queries */}
+    <div className="mt-12 border-2 border-dashed border-purple-300 p-8">
+      <Text variant="body">
+        <strong>Container wrapper (resize to see effect)</strong>
+      </Text>
+      <div className="mt-4 resize overflow-auto border border-gray-300">{children}</div>
+    </div>
+  </div>
+)
+
+export const ContainerQueries: StoryFn = () => (
+  <div className="py-32">
+    <Heading tag="p" variant="heading-4" classNameOverride="mb-16">
+      Container query breakpoints activate based on the <em>container&apos;s</em> width, not the
+      viewport. These elements will change color when their parent container reaches the specified
+      width.
+    </Heading>
+
+    <ContainerQueryInfo selector="md" selectorValue="768px">
+      <div className="@container">
+        <div className="@md:bg-blue-400 h-[50px] w-full rounded border-solid" />
+      </div>
+    </ContainerQueryInfo>
+
+    <ContainerQueryInfo selector="lg" selectorValue="1080px">
+      <div className="@container">
+        <div className="@lg:bg-blue-400 h-[50px] w-full rounded border-solid" />
+      </div>
+    </ContainerQueryInfo>
+  </div>
+)
+
+export const ArbitraryContainerQueries: StoryFn = () => (
+  <div className="py-32">
+    <Heading tag="p" variant="heading-4" classNameOverride="mb-16">
+      Custom container query breakpoints can be created with arbitrary values.
+    </Heading>
+
+    <div className="my-12">
+      <Text variant="body">
+        <strong>Custom container width breakpoint</strong> (applied when the container gets wider
+        than 500px)
+      </Text>
+      <Text variant="body">In this example: @[500px]:bg-green-400</Text>
+      <div className="mt-12 border-2 border-dashed border-purple-300 p-8">
+        <Text variant="body">
+          <strong>Container wrapper (resize to see effect)</strong>
+        </Text>
+        <div className="@container mt-4 resize overflow-auto border border-gray-300">
+          <div className="@[500px]:bg-green-400 h-[50px] w-full rounded border-solid" />
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+export const NamedContainers: StoryFn = () => (
+  <div className="py-32">
+    <Heading tag="p" variant="heading-4" classNameOverride="mb-16">
+      Named containers allow you to query specific containers by name, useful when you have nested
+      containers.
+    </Heading>
+
+    <div className="my-12">
+      <Text variant="body">
+        <strong>Named container example</strong> - The inner element responds to the outer
+        &quot;sidebar&quot; container, not the inner &quot;card&quot; container
+      </Text>
+      <Text variant="body">In this example: @container/sidebar and @md/sidebar:bg-green-400</Text>
+      <div className="mt-12 border-1 border-dashed border-purple-300 p-8">
+        <Text variant="body">
+          <strong>Outer container (&quot;sidebar&quot;) - resize to see effect</strong>
+        </Text>
+        <div className="@container/sidebar mt-4 resize overflow-auto border-2 border-blue-300">
+          <div className="p-4">
+            <Text variant="body">
+              <strong>Inner container (&quot;card&quot;)</strong>
+            </Text>
+            <div className="@container/card mt-2 border border-gray-300 p-2">
+              <div className="@md/sidebar:bg-green-400 h-[50px] w-full rounded border-solid">
+                <div className="flex h-full items-center justify-center text-xs">
+                  <Text variant="body">Responds to sidebar container</Text>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+)

package/src/_docs/pages/overview.mdx

@@ -10,7 +10,7 @@ import AnatomyDiagram from '../assets/tw-anatomy.png'
 ## What our package does
 
 The `@kaizen/tailwind` package is essentially a custom Tailwind preset. For more information about Tailwind presets, see their docs [here](https://tailwindcss.com/docs/presets). This package does not change how Tailwind works; it only defines the suffixes that can be applied when constructing utility classes.
-To see a list of utilities generated by our preset, see our [Utility Class Reference Docs](/story/systems-tailwind-utility-class-references-utility-class-references--page).
+To see a list of utilities generated by our preset, see our [Utility Class Reference Docs](/docs/guides-tailwind-utility-class-references-overview--docs).
 The following diagram shows the construction of a utility class that adds a background of `blue-400` on hover. The modifier `hover:` and the prefix `bg-` are part of Tailwind by default. The suffix `gray-400` is defined by our preset, and represents one of our color design tokens.
 
 <img src={AnatomyDiagram} alt="Tailwind utility class anatomy" />

package/src/_docs/pages/working-with-tailwind.mdx

@@ -16,7 +16,7 @@ This page describes and demonstrates the main intended use cases for this packag
 
 ## Spacing and layouts
 
-For information about Cultureamp's spacing and layout system in general, see [here](/story/systems-layout-and-spacing--page).
+For information about Cultureamp's spacing and layout system in general, see [here](/docs/guides-layout-and-spacing--docs).
 
 When building a page, ideally [Kaizen](https://github.com/cultureamp/kaizen-design-system) components should be used as much as possible, with the front-end engineer responsible for the spacing between them. In these cases, our Tailwind preset makes it easy by adding our spacing tokens to Tailwind's core spacing modules.
 
@@ -27,7 +27,7 @@ Here, Tailwind has been used to center a Kaizen button within a div.
 - `flex`: Adds `display: flex`
 - `justify-center`: Adds `justify-content: center`
 - `border-solid`: Adds `border-style: solid`
-- `p-16`: Adds `padding: 1rem` (`16px` = `1rem` - see the [layout and spacing docs](/story/systems-layout-and-spacing--page) for more on this)
+- `p-16`: Adds `padding: 1rem` (`16px` = `1rem` - see the [layout and spacing docs](/docs/guides-layout-and-spacing--docs) for more on this)
 
 Here's a more complex example, where some `<Card>` components and text have been spaced and laid out with Tailwind:
 

package/src/_docs/pages/working-with-tailwind.stories.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { type StoryFn } from '@storybook/react'
-import { Button } from '~components/Button'
+import { Button } from '~components/ButtonV1'
 import { Card } from '~components/Card'
+import { Container } from '~components/Container'
+import { Content } from '~components/Content'
 import { Heading } from '~components/Heading'
 import { CustomSurvey, CustomUnattributedSurvey } from '~components/Illustration'
-import { Skirt } from '~components/Skirt'
 import { TailwindStoryTemplate } from '../utils/TailwindStoryTemplate'
 
 export default {
@@ -19,14 +20,16 @@ export const TailwindExampleSpacingAndLayouts: StoryFn = () => (
 
 export const TailwindExampleSpacingAndLayoutsComplex: StoryFn = () => (
   <>
-    <Skirt>
-      <Heading variant="heading-2" color="white" classNameOverride="pt-24">
-        Laid out with Tailwind
-      </Heading>
-      <Card variant="informative" classNameOverride="mt-24">
-        <div className="h-[300px]" />
-      </Card>
-    </Skirt>
+    <Container>
+      <Content>
+        <Heading variant="heading-2" color="dark" classNameOverride="pt-24">
+          Laid out with Tailwind
+        </Heading>
+        <Card color="blue" classNameOverride="mt-24">
+          <div className="h-[300px]" />
+        </Card>
+      </Content>
+    </Container>
     {/* Adds flex, makes the width 100% and centers content */}
     <div className="flex w-full justify-center">
       {/* Adds margins, width, and max width */}
@@ -45,7 +48,7 @@ export const TailwindExampleSpacingAndLayoutsComplex: StoryFn = () => (
         {/* Adds margin-top, flex, and a height of 200px */}
         <div className="mt-64 flex h-[200px]">
           {[0, 1, 2, 3].map((index) => (
-            <Card key={index} variant="informative" classNameOverride="mr-24 last:mr-0 w-full">
+            <Card key={index} color="blue" classNameOverride="mr-24 last:mr-0 w-full">
               {/* Adds height and width of 100% */}
               <div className="w-full h-100" />
             </Card>

package/src/_docs/utils/TailwindStoryTemplate/TailwindStoryTemplate.tsx

@@ -70,7 +70,7 @@ export const TailwindStoryTemplate = ({
       <div className="fixed top-[10px] left-[10px]">
         {copiedText && (
           <InlineNotification
-            type="positive"
+            variant="success"
             hideCloseIcon
             onHide={(): void => setCopiedText(null)}
             headingProps={{

package/src/_docs/utils/TailwindStoryTemplate/components/CardContent/CardContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from '~components/Button'
+import { Button } from '~components/ButtonV1'
 import { Heading } from '~components/Heading'
 
 type CardContentProps = {

package/src/_docs/utils/TailwindStoryTemplate/components/CodeSnippet/CodeSnippet.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Icon } from '~components/__next__'
+import { Icon } from '~components/Icon'
 
 type Props = {
   text: string

package/src/kz-spacing.ts

@@ -1,4 +1,4 @@
-import { heartTheme } from '@kaizen/design-tokens'
+import { tokens } from '@kaizen/design-tokens/js'
 
 const tokenDenyList: string[] = [
   'xs',
@@ -35,4 +35,4 @@ export const filterDenyListValues = (
   return Object.fromEntries(keyValuePairs.filter(([key]) => isValidToken(key)))
 }
 
-export const kzSpacing = filterDenyListValues(heartTheme.spacing)
+export const kzSpacing = filterDenyListValues(tokens.spacing)

package/src/tailwind-presets.ts

@@ -107,7 +107,7 @@ export const kaizenTailwindTheme: KaizenTailwindTheme = {
   // A mix of layout styles
   screens: {
     md: tokens.layout.breakpoints.medium, // => @media (min-width: 768px) { ... }
-    lg: tokens.layout.breakpoints.large, // => @media (min-width: 1080px) { ... }
+    lg: tokens.layout.breakpoints.large, // => @media (min-width: 1024px) { ... }
   },
 } as const