@kaizen/tailwind 1.4.1 → 1.5.1

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/tailwind",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "description": "Kaizen Tailwind presets",
   "repository": {
     "type": "git",
@@ -22,17 +22,21 @@
   "private": false,
   "license": "MIT",
   "dependencies": {
-    "@kaizen/design-tokens": "10.9.1"
+    "@kaizen/design-tokens": "11.0.0"
   },
   "devDependencies": {
-    "@cultureamp/package-bundler": "^2.3.0",
+    "@cultureamp/package-bundler": "^2.3.2",
     "classnames": "^2.5.1",
-    "rollup": "^4.39.0",
+    "rollup": "^4.46.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "tailwindcss": "^3.4.17",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "tailwindcss": ">=3.4.7"
+    "tailwindcss": ">=3.4.7",
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
   },
   "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/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)