@kaizen/tailwind 1.3.11 → 1.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/tailwind",
-  "version": "1.3.11",
+  "version": "1.3.12",
   "description": "Kaizen Tailwind presets",
   "repository": {
     "type": "git",
@@ -22,14 +22,14 @@
   "private": false,
   "license": "MIT",
   "dependencies": {
-    "@kaizen/design-tokens": "10.8.5"
+    "@kaizen/design-tokens": "10.8.6"
   },
   "devDependencies": {
     "classnames": "^2.5.1",
-    "rollup": "^4.27.2",
+    "rollup": "^4.28.0",
     "tailwindcss": "^3.4.15",
-    "tslib": "^2.8.0",
-    "@kaizen/package-bundler": "2.0.2"
+    "tslib": "^2.8.1",
+    "@kaizen/package-bundler": "2.0.3"
   },
   "peerDependencies": {
     "tailwindcss": ">=3.4.7"

package/src/_docs/pages/backgrounds/background-color.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./background-color.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './background-color.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/borders/border-color.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./border-color.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './border-color.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/borders/border-radius.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./border-radius.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './border-radius.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/borders/border-spacing.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./border-spacing.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './border-spacing.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/borders/border-width.mdx

@@ -1,6 +1,6 @@
-import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "~components/Card"
-import * as Examples from "./border-width.stories"
+import { Description, Meta, Story, Unstyled } from '@storybook/blocks'
+import { Card } from '~components/Card'
+import * as Examples from './border-width.stories'
 
 <Meta of={Examples} />
 
@@ -12,14 +12,13 @@ import * as Examples from "./border-width.stories"
   <Card variant="informative" classNameOverride="w-fit mb-24">
     <div className="p-24 font-family-paragraph">
       <p>
-        This document demonstrates the list of border-width suffixes available
-        from the Kaizen preset, by showing what they look like on the
-        &apos;border-&apos; prefix.
+        This document demonstrates the list of border-width suffixes available from the Kaizen
+        preset, by showing what they look like on the &apos;border-&apos; prefix.
       </p>
       <p>
-        Note that there are other border-width prefixes (such as `border-l-`
-        for `border-left-width`) that can be used instead. Available
-        border-width prefixes can be referenced <a href="https://tailwindcss.com/docs/border-width">here</a>.
+        Note that there are other border-width prefixes (such as `border-l-` for
+        `border-left-width`) that can be used instead. Available border-width prefixes can be
+        referenced <a href="https://tailwindcss.com/docs/border-width">here</a>.
       </p>
     </div>
   </Card>

package/src/_docs/pages/configuration.mdx

@@ -1,5 +1,5 @@
-import { Meta } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
+import { Meta } from '@storybook/blocks'
+import { InlineNotification } from '~components/Notification'
 
 <Meta title="Guides/Tailwind/Configuration" />
 
@@ -10,7 +10,7 @@ This page provides guidance on potential configuration options and how they work
 - [Extending the Kaizen preset](#extending-the-kaizen-preset)
 - [Customising the important selector](#customising-the-important-selector)
 
-<br/>
+<br />
 
 ## Extending the Kaizen preset
 
@@ -20,18 +20,18 @@ This page provides guidance on potential configuration options and how they work
 To extend upon the preset with values specific to your project, we recommend passing a theme object to `theme.extend`.
 
 ```js
-const { Preset } = require("@kaizen/tailwind")
+const { Preset } = require('@kaizen/tailwind')
 
 module.exports = {
   presets: [Preset],
   theme: {
     extend: {
       colors: {
-        myCoolNewColor: "#ffffff",
-        "purple-100": "lime"
-      }
-    }
-  }
+        'myCoolNewColor': '#ffffff',
+        'purple-100': 'lime',
+      },
+    },
+  },
 }
 ```
 
@@ -46,7 +46,7 @@ Be careful though! While adding in a _new_ field to `colors` won't overwrite any
 
 `<p className="text-purple-200">` ✅ Value from `Preset` not overwritten
 
-<br/>
+<br />
 
 ## Customising the important selector
 
@@ -54,25 +54,21 @@ If the `"#root"` id selector is incompatible with your application wrapper or yo
 
 If this is changed or you are not using the [Frontend Template](https://github.com/cultureamp/frontend-template), be sure that the `important` selector matches to an `id`, `class`, or `HTML Element` within your application, ie:
 
-``` tsx
-<div id="#root">
- {/* Application code */}
-</div>
+```tsx
+<div id="#root">{/* Application code */}</div>
 ```
 
-<InlineNotification
-  persistent
-  type="cautionary"
-  style="inline"
-  title="Changing the selector"
->
-  We advise using an <code>id</code> with <code>&quot;#root&quot;</code> as the default selector. Using different id&apos;s, classes or HTML elements like <code>body</code> as the selector could result in:
+<InlineNotification persistent type="cautionary" style="inline" title="Changing the selector">
+  We advise using an <code>id</code> with <code>&quot;#root&quot;</code> as the default selector.
+  Using different id&apos;s, classes or HTML elements like <code>body</code> as the selector could
+  result in:
   <ul>
     <li>
       Utility classes not superseding Kaizen defaults when using <code>classNameOverride</code>
     </li>
     <li>
-      Duplication of utillity classes in your CSS bundle caused by consuming components with different <code>important</code> selectors
+      Duplication of utillity classes in your CSS bundle caused by consuming components with
+      different <code>important</code> selectors
     </li>
   </ul>
 </InlineNotification>

package/src/_docs/pages/contributing.mdx

@@ -1,10 +1,10 @@
-import { Meta } from "@storybook/blocks"
+import { Meta } from '@storybook/blocks'
 
 <Meta title="Guides/Tailwind/Contributing to this package" />
 
 # Contributing
 
-<br/>
+<br />
 
 ## Local Development within Kaizen
 

package/src/_docs/pages/effects/shadow.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./shadow.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './shadow.stories'
 
 <Meta of={Examples} />
 

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

@@ -1,7 +1,7 @@
-import { Meta } from "@storybook/blocks"
-import CssGeneration from "../assets/css-generation.png"
-import InlineFold from "../assets/inline-fold.gif"
-import TailwindPlay from "../assets/tailwind-play.gif"
+import { Meta } from '@storybook/blocks'
+import CssGeneration from '../assets/css-generation.png'
+import InlineFold from '../assets/inline-fold.gif'
+import TailwindPlay from '../assets/tailwind-play.gif'
 
 <Meta title="Guides/Tailwind/Getting Started" />
 
@@ -18,7 +18,7 @@ If your project was created from this template, you should only need to do [Step
 - [3. Add the Tailwind directives](#3-add-the-tailwind-directives)
 - [4. Useful tools](#4-useful-tools)
 
-<br/>
+<br />
 
 ## 1. Install the preset
 
@@ -34,15 +34,15 @@ This will override the default Tailwind preset, and make ours available for use.
 ```js
 // tailwind.config.js
 
-const { Preset } = require("@kaizen/tailwind")
+const { Preset } = require('@kaizen/tailwind')
 
 module.exports = {
   // Glob pattern to match files containing TW classes. May be different for your project.
-  content: ["./**/*.{ts,tsx}"],
+  content: ['./**/*.{ts,tsx}'],
   // Override the default Tailwind preset with the Kaizen one.
   presets: [Preset],
   // This should be a selector that wraps your app. It ensures that your Tailwind classes supersede component styles, by increasing their specificity with the chosen selector.
-  important: "#root",
+  important: '#root',
   // Preflight is a heavy-handed css reset. We recommend disabling it in your project.
   corePlugins: {
     preflight: false,
@@ -109,12 +109,12 @@ Ideally you only add the pattern that is used in your repo.
 Calling out that this is still an experimental feature for the VSCode plugin.
 
 ### Inline fold VSCode extension
+
 Using tailwind often results in long class names, that can even span over multiple lines.
 Inline fold is a great extension that hides/ shows long class strings.
 
 Check it out [here](https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold):
 
-
 <div className="flex justify-center">
   <img src={InlineFold} alt="Inline fold VSCode extension" />
 </div>

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

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./media-queries.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './media-queries.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/modifiers/pseudo-states.mdx

@@ -1,6 +1,6 @@
-import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "~components/Card"
-import * as Examples from "./pseudo-states.stories"
+import { Description, Meta, Story, Unstyled } from '@storybook/blocks'
+import { Card } from '~components/Card'
+import * as Examples from './pseudo-states.stories'
 
 <Meta of={Examples} />
 
@@ -12,8 +12,8 @@ import * as Examples from "./pseudo-states.stories"
   <Card variant="informative" classNameOverride="w-fit mb-24">
     <div className="font-family-paragraph p-24">
       <p>
-        Pseudo selectors can be used to apply standard Tailwind utility
-        classes under certain pseudo states, such as on hover or focus.
+        Pseudo selectors can be used to apply standard Tailwind utility classes under certain pseudo
+        states, such as on hover or focus.
       </p>
       <p>
         Read more on Tailwind&apos;s pseudo selectors

package/src/_docs/pages/overview.mdx

@@ -1,26 +1,27 @@
-import { Meta } from "@storybook/blocks"
-import AnatomyDiagram from "../assets/tw-anatomy.png"
+import { Meta } from '@storybook/blocks'
+import AnatomyDiagram from '../assets/tw-anatomy.png'
 
 <Meta title="Guides/Tailwind/Overview" />
 
 # Overview
 
-<br/>
+<br />
 
 ## Caveat before use
+
 This is an early release of the Kaizen Tailwind Preset - the API may change and evolve as we receive feedback from our teams. We will endeavour to assist where possible if classes or utilities are updated in the future.
 
 ## 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).
 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" />
 
 ```css
 .hover\:bg-blue-400:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 139 214 / var(--tw-bg-opacity))
+  background-color: rgb(0 139 214 / var(--tw-bg-opacity));
 }
 ```

package/src/_docs/pages/spacing/margin.mdx

@@ -1,6 +1,6 @@
-import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "~components/Card"
-import * as Examples from "./margin.stories"
+import { Description, Meta, Story, Unstyled } from '@storybook/blocks'
+import { Card } from '~components/Card'
+import * as Examples from './margin.stories'
 
 <Meta of={Examples} />
 
@@ -12,12 +12,12 @@ import * as Examples from "./margin.stories"
   <Card variant="informative" classNameOverride="w-fit mb-24">
     <div className="font-family-paragraph p-24">
       <p>
-        The padding prefix &apos;m-&apos; has been used in the examples in this
-        document, which compiles to the `margin` property in CSS.
+        The padding prefix &apos;m-&apos; has been used in the examples in this document, which
+        compiles to the `margin` property in CSS.
       </p>
       <p>
-        Note that there are other prefixes (such as `ml-` for `margin-left`)
-        that can be used instead. Available padding prefixes can be referenced
+        Note that there are other prefixes (such as `ml-` for `margin-left`) that can be used
+        instead. Available padding prefixes can be referenced
         <a href="https://tailwindcss.com/docs/margin#basic-usage">here</a>.
       </p>
     </div>

package/src/_docs/pages/spacing/padding.mdx

@@ -1,6 +1,6 @@
-import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "~components/Card"
-import * as Examples from "./padding.stories"
+import { Description, Meta, Story, Unstyled } from '@storybook/blocks'
+import { Card } from '~components/Card'
+import * as Examples from './padding.stories'
 
 <Meta of={Examples} />
 
@@ -12,12 +12,12 @@ import * as Examples from "./padding.stories"
   <Card variant="informative" classNameOverride="w-fit mb-24">
     <div className="font-family-paragraph p-24">
       <p>
-        The padding prefix &apos;p-&apos; has been used in the examples in this
-        document, which compiles to the `padding` property in CSS.
+        The padding prefix &apos;p-&apos; has been used in the examples in this document, which
+        compiles to the `padding` property in CSS.
       </p>
       <p>
-        Note that there are other prefixes (such as `pl-` for `padding-left`)
-        that can be used instead. Available padding prefixes can be referenced
+        Note that there are other prefixes (such as `pl-` for `padding-left`) that can be used
+        instead. Available padding prefixes can be referenced
         <a href="https://tailwindcss.com/docs/padding#basic-usage">here</a>.
       </p>
     </div>

package/src/_docs/pages/typography/font-family.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./font-family.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './font-family.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/typography/font-size.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./font-size.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './font-size.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/typography/font-weight.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./font-weight.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './font-weight.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/typography/line-height.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./line-height.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './line-height.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/typography/max-text-width.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./max-text-width.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './max-text-width.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/typography/text-color.mdx

@@ -1,5 +1,5 @@
-import { Description, Meta, Story } from "@storybook/blocks"
-import * as Examples from "./text-color.stories"
+import { Description, Meta, Story } from '@storybook/blocks'
+import * as Examples from './text-color.stories'
 
 <Meta of={Examples} />
 

package/src/_docs/pages/utility-class-helpers-overview.mdx

@@ -1,8 +1,8 @@
-import { Meta, Unstyled } from "@storybook/blocks"
-import { LinkTo } from "~storybook/components/LinkTo"
-import CopyUtilityClass from "~tailwind/_docs/assets/copy-utility-class.gif?url"
-import UtilitySearchResult from "~tailwind/_docs/assets/utility-search-result.png?url"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
+import { Meta, Unstyled } from '@storybook/blocks'
+import { LinkTo } from '~storybook/components/LinkTo'
+import CopyUtilityClass from '~tailwind/_docs/assets/copy-utility-class.gif?url'
+import UtilitySearchResult from '~tailwind/_docs/assets/utility-search-result.png?url'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 
 <Meta title="Guides/Tailwind/Utility Class References/Overview" />
 
@@ -18,26 +18,24 @@ As an example, `borderColor` is listed in this section because we have a custom
 - [Structure](#structure)
 - [Example usage](#example-usage)
 
-<br/>
+<br />
 
 ## Structure
 
 The references provide the following structure for each utility class:
 
 <Unstyled>
-<div className="w-100">
-  <TailwindStoryTemplate
-    compiledCssPropertyName="width"
-    classKeyValues={[{utilityClassName: "text-heading-1", cssProperty: "2.125rem"}]}
-    renderExampleComponent={cssProperty => (
-      <p style={{ fontSize: cssProperty }}>Aa</p>
-    )}
-  />
-</div>
+  <div className="w-100">
+    <TailwindStoryTemplate
+      compiledCssPropertyName="width"
+      classKeyValues={[{ utilityClassName: 'text-heading-1', cssProperty: '2.125rem' }]}
+      renderExampleComponent={(cssProperty) => <p style={{ fontSize: cssProperty }}>Aa</p>}
+    />
+  </div>
 </Unstyled>
 
-<br/>
-<br/>
+<br />
+<br />
 
 ### Utility Class
 
@@ -51,7 +49,7 @@ Represents the CSS property that Tailwind will compile for you when it recognize
 
 A visual representation of the CSS generated by the utility class. You can inspect this element in the DOM to see the utility class in action.
 
-<br/>
+<br />
 
 ## Example usage
 
@@ -69,18 +67,21 @@ A visual representation of the CSS generated by the utility class. You can inspe
   <img src={UtilitySearchResult} alt="Utility class search result" />
 </div>
 
-<p>Can&apos;t find it here? That means we don&apos;t have a custom preset for it, and the utility class you need will be unchanged from the Tailwind Default.</p>
+<p>
+  Can&apos;t find it here? That means we don&apos;t have a custom preset for it, and the utility
+  class you need will be unchanged from the Tailwind Default.
+</p>
 <p>Search in the [Tailwind docs](https://tailwindcss.com/docs/installation) instead.</p>
 
-<br/>
-<br/>
+<br />
+<br />
 
 ### 2. Find the utility class that compiles to the desired CSS, and copy it
 
 <img src={CopyUtilityClass} alt="Copy utility class" />
 
-<br/>
-<br/>
+<br />
+<br />
 
 ### 3. Add the utility class to the element
 

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

@@ -1,5 +1,5 @@
-import { Canvas, Meta } from "@storybook/blocks"
-import * as Examples from "./working-with-tailwind.stories"
+import { Canvas, Meta } from '@storybook/blocks'
+import * as Examples from './working-with-tailwind.stories'
 
 <Meta of={Examples} />
 
@@ -12,7 +12,7 @@ This page describes and demonstrates the main intended use cases for this packag
 - [Creating bespoke components](#creating-bespoke-components)
 - [Recommended escape hatch](#recommended-escape-hatch)
 
-<br/>
+<br />
 
 ## Spacing and layouts
 
@@ -33,7 +33,7 @@ Here's a more complex example, where some `<Card>` components and text have been
 
 <Canvas of={Examples.TailwindExampleSpacingAndLayoutsComplex} />
 
-<br/>
+<br />
 
 ## Altering Kaizen components with classNameOverride
 
@@ -48,18 +48,20 @@ In this example, a Tailwind css rule is being applied to a Kaizen `<Heading />`
 
 - first-letter:capitalize: Adds text-transform: capitalize on the first-letter pseudo selector
 
-<br/>
+<br />
 
 ## Creating bespoke components
+
 Occasionally snowflakes need to be created. This package provides common utilities based on our design tokens, such as color, border-radius, and font-family. Ideally, as much styling of bespoke components should be handled with Tailwind, but keep in mind that scss can still be used when necessary.
 
 Here is an example of our TW package being used to create a bespoke, non-Kaizen component:
 
 <Canvas of={Examples.TailwindExampleSnowflake} />
 
-<br/>
+<br />
 
 ### The container div
+
 - `w-[250px]`: Adds `width: 250px`. This is an example of an arbitrary value being used to inject a custom suffix
 - `rounded`: Adds `border-radius: 7px`. This is one of our custom preset values
 - `border-dashed`: Adds `border-style: dashed`
@@ -68,18 +70,20 @@ Here is an example of our TW package being used to create a bespoke, non-Kaizen
 - `text-center`: Adds `text-align: center`
 
 ### The p tag
+
 - `m-0`: Adds `margin: 0`
 - `p-12`: Adds `padding: .75rem` (12px = 0.75rem)
 - `pl-16`: Adds `padding-left: 1rem` (16px = 1rem)
 - `font-family-paragraph`: Adds `font-family: "Inter", "Noto Sans", ...`
 - `text-blue-500`: Adds `color: #0168b3` (our blue-500 design token)
 
-<br/>
+<br />
 
 ## Recommended Escape Hatch
 
 If you find yourself needing to add styles in a way that is unsupported or otherwise difficult in Tailwind, the recommended alternative is CSS. CSS classes can be added alongside Tailwind utility classes without trouble, and the Tailwind docs recommend some useful post-css plugins [here](https://tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus).
 
 ### Why not SCSS?
+
 - SCSS is currently a contained option, so writing new SCSS in our codebases is discouraged.
 - The Tailwind docs explicitly recommend <em>not</em> using Tailwind with preprocessors, as it leads to all sorts of quirks and work-arounds. Read more [here](https://tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus).