diff --git a/.changeset/gold-carrots-notice.md b/.changeset/gold-carrots-notice.md new file mode 100644 index 00000000000..e8edf30cf60 --- /dev/null +++ b/.changeset/gold-carrots-notice.md @@ -0,0 +1,19 @@ +--- +"@kaizen/tailwind": major +--- + +Fix long utility strings for borders in Tailwind (in combination with the introduction of `@kaizen/reset.css`) + +**note: these utilities will not work without installing `@kaizen/reset.css`** + +- Adds DEFAULT values to `borderWidth` and `borderColor` in the Tailwind preset, so these don't need to be written with utility classes. + +These changes mean that border styles require much less utility classes to be written. +For example, to add a border-bottom to an element, we would previously need to write: +``` +className="border-b-default border-l-none border-r-none border-t-none border-solid border-purple-800" +``` +We can now achieve the same css by simply writing: +``` +className="border-b" +``` diff --git a/.changeset/quiet-poems-hammer.md b/.changeset/quiet-poems-hammer.md new file mode 100644 index 00000000000..3e99ef6fcc5 --- /dev/null +++ b/.changeset/quiet-poems-hammer.md @@ -0,0 +1,9 @@ +--- +"@kaizen/reset.css": major +--- + +Initialising this package with a reset to the border properties to support Tailwind's border default settings. + +- Allows for simpler use of border util classes, ie: border-l +- This will also remove all non-explicit borders, ie: inheritance from native browser styles +- Check your chromatic snapshots and add sensible defaults where required diff --git a/docs/Systems/Tailwind/components/CodeSnippet.tsx b/docs/Systems/Tailwind/components/CodeSnippet.tsx index 0bac3524ce1..5e4c1814250 100644 --- a/docs/Systems/Tailwind/components/CodeSnippet.tsx +++ b/docs/Systems/Tailwind/components/CodeSnippet.tsx @@ -1,4 +1,5 @@ import React, { useState } from "react" +import { ClosedIcon, SurveysIcon } from "~components/Icon" type Props = { text: string @@ -6,7 +7,7 @@ type Props = { } export const CodeSnippet = ({ text, onCopy }: Props): React.ReactElement => { - const [_, setCopyIconIsChecked] = useState(false) + const [copyIconIsChecked, setCopyIconIsChecked] = useState(false) const handleCopy = (utilityClassNameName: string): void => { navigator.clipboard.writeText(text) setCopyIconIsChecked(true) @@ -16,16 +17,19 @@ export const CodeSnippet = ({ text, onCopy }: Props): React.ReactElement => { return ( ) diff --git a/docs/Systems/Tailwind/components/DemoBox.tsx b/docs/Systems/Tailwind/components/DemoBox.tsx index 06c1c2b7e8d..2ed2cf22ded 100644 --- a/docs/Systems/Tailwind/components/DemoBox.tsx +++ b/docs/Systems/Tailwind/components/DemoBox.tsx @@ -6,7 +6,7 @@ type Props = { const DemoBox = ({ classnameOverride }: Props): React.ReactElement => (
diff --git a/docs/Systems/Tailwind/components/UtilityClassTemplate.tsx b/docs/Systems/Tailwind/components/UtilityClassTemplate.tsx index 451d5c23802..21356a6baa1 100644 --- a/docs/Systems/Tailwind/components/UtilityClassTemplate.tsx +++ b/docs/Systems/Tailwind/components/UtilityClassTemplate.tsx @@ -27,22 +27,21 @@ export const UtilityClassTemplate = ({ rules="rows" > {classKeyValues.map((presetData, _index) => { const { utilityClassName, cssProperty } = presetData - return (
setCopiedText(text)} />
diff --git a/docs/Systems/Tailwind/getting-started.mdx b/docs/Systems/Tailwind/getting-started.mdx index 90ef3e6011b..76271f9418a 100644 --- a/docs/Systems/Tailwind/getting-started.mdx +++ b/docs/Systems/Tailwind/getting-started.mdx @@ -69,7 +69,7 @@ For more information, see [here](https://tailwindcss.com/docs/functions-and-dire ### Tailwind Play -Tailwind Play is an online code sandbox with Tailwind set up out of the box. The Kaizen Team has created an instance with the Kaizen Preset values [here](https://play.tailwindcss.com/RAS26OUabN) +Tailwind Play is an online code sandbox with Tailwind set up out of the box. The Kaizen Team has created an instance with the Kaizen Preset values [here](https://play.tailwindcss.com/OUogvUgXQR) Use this playground to get familiar with our preset, test out new config extensions, create a quick proof of concept, or share code examples with other engineers. Feel free to hit ‘Share’ - it’ll create a new url without overriding the one provided here. diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Backgrounds/background-color.mdx b/docs/Systems/Tailwind/utility-class-helpers/backgrounds/background-color.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Backgrounds/background-color.mdx rename to docs/Systems/Tailwind/utility-class-helpers/backgrounds/background-color.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Backgrounds/background-color.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/backgrounds/background-color.stories.tsx similarity index 94% rename from docs/Systems/Tailwind/UtilityClassReferences/Backgrounds/background-color.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/backgrounds/background-color.stories.tsx index 383b57f3ffb..8a5ef59b389 100644 --- a/docs/Systems/Tailwind/UtilityClassReferences/Backgrounds/background-color.stories.tsx +++ b/docs/Systems/Tailwind/utility-class-helpers/backgrounds/background-color.stories.tsx @@ -33,8 +33,7 @@ export const BackgroundColor: StoryFn<{ isReversed: boolean }> = ({ renderExampleComponent={(utilityClass): React.ReactElement => (
diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Borders/border-color.mdx b/docs/Systems/Tailwind/utility-class-helpers/borders/border-color.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Borders/border-color.mdx rename to docs/Systems/Tailwind/utility-class-helpers/borders/border-color.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Borders/border-color.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/borders/border-color.stories.tsx similarity index 92% rename from docs/Systems/Tailwind/UtilityClassReferences/Borders/border-color.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/borders/border-color.stories.tsx index f949041120d..dd6b8052e2b 100644 --- a/docs/Systems/Tailwind/UtilityClassReferences/Borders/border-color.stories.tsx +++ b/docs/Systems/Tailwind/utility-class-helpers/borders/border-color.stories.tsx @@ -35,8 +35,8 @@ export const BorderColor: StoryFn<{ isReversed: boolean }> = ({ renderExampleComponent={(utilityClass): React.ReactElement => (
)} diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Borders/border-radius.mdx b/docs/Systems/Tailwind/utility-class-helpers/borders/border-radius.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Borders/border-radius.mdx rename to docs/Systems/Tailwind/utility-class-helpers/borders/border-radius.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Borders/border-radius.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/borders/border-radius.stories.tsx similarity index 85% rename from docs/Systems/Tailwind/UtilityClassReferences/Borders/border-radius.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/borders/border-radius.stories.tsx index 7ac0b3d5d2c..947004dd378 100644 --- a/docs/Systems/Tailwind/UtilityClassReferences/Borders/border-radius.stories.tsx +++ b/docs/Systems/Tailwind/utility-class-helpers/borders/border-radius.stories.tsx @@ -22,7 +22,7 @@ export default { docsLayout: "fullPage", docs: { description: { - component: utilityDescription(prefix, classEntries[0].utilityClassName), + component: utilityDescription(prefix, classEntries[3].utilityClassName), }, }, }, @@ -36,7 +36,10 @@ export const BorderRadius: StoryFn<{ isReversed: boolean }> = ({ classKeyValues={classEntries} renderExampleComponent={(utilityClass): React.ReactElement => (
)} isReversed={isReversed} diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Borders/border-spacing.mdx b/docs/Systems/Tailwind/utility-class-helpers/borders/border-spacing.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Borders/border-spacing.mdx rename to docs/Systems/Tailwind/utility-class-helpers/borders/border-spacing.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Borders/border-spacing.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/borders/border-spacing.stories.tsx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Borders/border-spacing.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/borders/border-spacing.stories.tsx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Borders/border-width.mdx b/docs/Systems/Tailwind/utility-class-helpers/borders/border-width.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Borders/border-width.mdx rename to docs/Systems/Tailwind/utility-class-helpers/borders/border-width.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Borders/border-width.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/borders/border-width.stories.tsx similarity index 87% rename from docs/Systems/Tailwind/UtilityClassReferences/Borders/border-width.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/borders/border-width.stories.tsx index 384fbc74629..04d3d6b82f6 100644 --- a/docs/Systems/Tailwind/UtilityClassReferences/Borders/border-width.stories.tsx +++ b/docs/Systems/Tailwind/utility-class-helpers/borders/border-width.stories.tsx @@ -22,7 +22,7 @@ export default { docsLayout: "fullPage", docs: { description: { - component: utilityDescription(prefix, classEntries[0].utilityClassName), + component: utilityDescription(prefix, classEntries[1].utilityClassName), }, }, }, @@ -37,8 +37,8 @@ export const BorderWidth: StoryFn<{ isReversed: boolean }> = ({ renderExampleComponent={(utilityClass): React.ReactElement => (
)} diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Effects/shadow.mdx b/docs/Systems/Tailwind/utility-class-helpers/effects/shadow.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Effects/shadow.mdx rename to docs/Systems/Tailwind/utility-class-helpers/effects/shadow.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Effects/shadow.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/effects/shadow.stories.tsx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Effects/shadow.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/effects/shadow.stories.tsx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Modifiers/media-queries.mdx b/docs/Systems/Tailwind/utility-class-helpers/modifiers/media-queries.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Modifiers/media-queries.mdx rename to docs/Systems/Tailwind/utility-class-helpers/modifiers/media-queries.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Modifiers/media-queries.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/modifiers/media-queries.stories.tsx similarity index 96% rename from docs/Systems/Tailwind/UtilityClassReferences/Modifiers/media-queries.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/modifiers/media-queries.stories.tsx index 5a06aa51c3d..3ff6ad73a82 100644 --- a/docs/Systems/Tailwind/UtilityClassReferences/Modifiers/media-queries.stories.tsx +++ b/docs/Systems/Tailwind/utility-class-helpers/modifiers/media-queries.stories.tsx @@ -44,10 +44,10 @@ export const MediaQueries: StoryFn = () => ( that bg-blue-400 will be applied when the screen gets wider. -
+
-
+
) @@ -71,7 +71,7 @@ export const ArbitraryMediaQueries: StoryFn = () => ( In this example: min-[500px]:bg-blue-400 -
+
@@ -81,6 +81,6 @@ export const ArbitraryMediaQueries: StoryFn = () => ( In this example: max-[500px]:bg-blue-400 -
+
) diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Modifiers/pseudo-states.mdx b/docs/Systems/Tailwind/utility-class-helpers/modifiers/pseudo-states.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Modifiers/pseudo-states.mdx rename to docs/Systems/Tailwind/utility-class-helpers/modifiers/pseudo-states.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Modifiers/pseudo-states.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/modifiers/pseudo-states.stories.tsx similarity index 90% rename from docs/Systems/Tailwind/UtilityClassReferences/Modifiers/pseudo-states.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/modifiers/pseudo-states.stories.tsx index d91d72dac94..dda51bcc655 100644 --- a/docs/Systems/Tailwind/UtilityClassReferences/Modifiers/pseudo-states.stories.tsx +++ b/docs/Systems/Tailwind/utility-class-helpers/modifiers/pseudo-states.stories.tsx @@ -29,7 +29,7 @@ export const PseudoSelectors: StoryFn<{ isReversed: boolean }> = ({

background-color: #bde2f5

@@ -40,7 +40,7 @@ export const PseudoSelectors: StoryFn<{ isReversed: boolean }> = ({ diff --git a/docs/Systems/Tailwind/UtilityClassReferences/overview.mdx b/docs/Systems/Tailwind/utility-class-helpers/overview.mdx similarity index 95% rename from docs/Systems/Tailwind/UtilityClassReferences/overview.mdx rename to docs/Systems/Tailwind/utility-class-helpers/overview.mdx index 558af0e4594..70375824d6b 100644 --- a/docs/Systems/Tailwind/UtilityClassReferences/overview.mdx +++ b/docs/Systems/Tailwind/utility-class-helpers/overview.mdx @@ -79,10 +79,10 @@ A visual representation of the CSS generated by the utility class. You can inspe ### 3. Add the utility class to the element ```tsx -
...
+
...
``` -
+

Example

diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Spacing/margin.mdx b/docs/Systems/Tailwind/utility-class-helpers/spacing/margin.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Spacing/margin.mdx rename to docs/Systems/Tailwind/utility-class-helpers/spacing/margin.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Spacing/margin.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/spacing/margin.stories.tsx similarity index 91% rename from docs/Systems/Tailwind/UtilityClassReferences/Spacing/margin.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/spacing/margin.stories.tsx index f995f3cc4c9..5092a2b1759 100644 --- a/docs/Systems/Tailwind/UtilityClassReferences/Spacing/margin.stories.tsx +++ b/docs/Systems/Tailwind/utility-class-helpers/spacing/margin.stories.tsx @@ -33,10 +33,10 @@ export const Margin: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => ( compiledCssPropertyName="margin" classKeyValues={classEntries} renderExampleComponent={(utilityClass): React.ReactElement => ( -
+

diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Spacing/padding.mdx b/docs/Systems/Tailwind/utility-class-helpers/spacing/padding.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Spacing/padding.mdx rename to docs/Systems/Tailwind/utility-class-helpers/spacing/padding.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Spacing/padding.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/spacing/padding.stories.tsx similarity index 95% rename from docs/Systems/Tailwind/UtilityClassReferences/Spacing/padding.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/spacing/padding.stories.tsx index 0b0d563c22d..e4de073aad0 100644 --- a/docs/Systems/Tailwind/UtilityClassReferences/Spacing/padding.stories.tsx +++ b/docs/Systems/Tailwind/utility-class-helpers/spacing/padding.stories.tsx @@ -35,7 +35,7 @@ export const Padding: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => ( renderExampleComponent={(utilityClass): React.ReactElement => (

diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Typography/font-family.mdx b/docs/Systems/Tailwind/utility-class-helpers/typography/font-family.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Typography/font-family.mdx rename to docs/Systems/Tailwind/utility-class-helpers/typography/font-family.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Typography/font-family.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/typography/font-family.stories.tsx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Typography/font-family.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/typography/font-family.stories.tsx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Typography/font-size.mdx b/docs/Systems/Tailwind/utility-class-helpers/typography/font-size.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Typography/font-size.mdx rename to docs/Systems/Tailwind/utility-class-helpers/typography/font-size.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Typography/font-size.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/typography/font-size.stories.tsx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Typography/font-size.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/typography/font-size.stories.tsx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Typography/font-weight.mdx b/docs/Systems/Tailwind/utility-class-helpers/typography/font-weight.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Typography/font-weight.mdx rename to docs/Systems/Tailwind/utility-class-helpers/typography/font-weight.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Typography/font-weight.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/typography/font-weight.stories.tsx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Typography/font-weight.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/typography/font-weight.stories.tsx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Typography/line-height.mdx b/docs/Systems/Tailwind/utility-class-helpers/typography/line-height.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Typography/line-height.mdx rename to docs/Systems/Tailwind/utility-class-helpers/typography/line-height.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Typography/line-height.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/typography/line-height.stories.tsx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Typography/line-height.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/typography/line-height.stories.tsx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Typography/max-text-width.mdx b/docs/Systems/Tailwind/utility-class-helpers/typography/max-text-width.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Typography/max-text-width.mdx rename to docs/Systems/Tailwind/utility-class-helpers/typography/max-text-width.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Typography/max-text-width.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/typography/max-text-width.stories.tsx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Typography/max-text-width.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/typography/max-text-width.stories.tsx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Typography/text-color.mdx b/docs/Systems/Tailwind/utility-class-helpers/typography/text-color.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/Typography/text-color.mdx rename to docs/Systems/Tailwind/utility-class-helpers/typography/text-color.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/Typography/text-color.stories.tsx b/docs/Systems/Tailwind/utility-class-helpers/typography/text-color.stories.tsx similarity index 87% rename from docs/Systems/Tailwind/UtilityClassReferences/Typography/text-color.stories.tsx rename to docs/Systems/Tailwind/utility-class-helpers/typography/text-color.stories.tsx index e9e889295c9..ba3e37c89df 100644 --- a/docs/Systems/Tailwind/UtilityClassReferences/Typography/text-color.stories.tsx +++ b/docs/Systems/Tailwind/utility-class-helpers/typography/text-color.stories.tsx @@ -31,7 +31,7 @@ export const TextColor: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => (

@@ -39,7 +39,7 @@ export const TextColor: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => (

diff --git a/docs/Systems/Tailwind/working-with-tailwind.mdx b/docs/Systems/Tailwind/working-with-tailwind.mdx index d905b82f42b..91294929fa0 100644 --- a/docs/Systems/Tailwind/working-with-tailwind.mdx +++ b/docs/Systems/Tailwind/working-with-tailwind.mdx @@ -61,7 +61,7 @@ Here is an example of our TW package being used to create a bespoke, non-Kaizen ### The container div - `w-[250px]`: Adds `width: 250px`. This is an example of an arbitrary value being used to inject a custom suffix -- `rounded-default`: Adds `border-radius: 7px`. This is one of our custom preset values, defined here +- `rounded`: Adds `border-radius: 7px`. This is one of our custom preset values - `border-dashed`: Adds `border-style: dashed` - `border-red-500`: Adds `border-color: #c93b55` (our red-500 design token) - `bg-blue-100`: Adds `background: #e6f6ff` (our blue-100 design token) @@ -71,7 +71,7 @@ Here is an example of our TW package being used to create a bespoke, non-Kaizen - `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", ...` (defined in our preset here) +- `font-family-paragraph`: Adds `font-family: "Inter", "Noto Sans", ...` - `text-blue-500`: Adds `color: #0168b3` (our blue-500 design token)
diff --git a/docs/Systems/Tailwind/working-with-tailwind.stories.tsx b/docs/Systems/Tailwind/working-with-tailwind.stories.tsx index 246c132830a..48983eedd27 100644 --- a/docs/Systems/Tailwind/working-with-tailwind.stories.tsx +++ b/docs/Systems/Tailwind/working-with-tailwind.stories.tsx @@ -91,7 +91,7 @@ export const TailwindExampleClassNameOverrideHeading: StoryFn = () => ( export const TailwindExampleSnowflake: StoryFn = () => (

-
+

Not a Kaizen Component

diff --git a/docs/Systems/LayoutAndSpacing/DemoComponents/MarginExample.tsx b/docs/Systems/layout-and-spacing/DemoComponents/MarginExample.tsx similarity index 100% rename from docs/Systems/LayoutAndSpacing/DemoComponents/MarginExample.tsx rename to docs/Systems/layout-and-spacing/DemoComponents/MarginExample.tsx diff --git a/docs/Systems/LayoutAndSpacing/DemoComponents/SpacingTokens.tsx b/docs/Systems/layout-and-spacing/DemoComponents/SpacingTokens.tsx similarity index 100% rename from docs/Systems/LayoutAndSpacing/DemoComponents/SpacingTokens.tsx rename to docs/Systems/layout-and-spacing/DemoComponents/SpacingTokens.tsx diff --git a/docs/Systems/LayoutAndSpacing/DemoComponents/index.ts b/docs/Systems/layout-and-spacing/DemoComponents/index.ts similarity index 100% rename from docs/Systems/LayoutAndSpacing/DemoComponents/index.ts rename to docs/Systems/layout-and-spacing/DemoComponents/index.ts diff --git a/docs/Systems/LayoutAndSpacing/layout-and-spacing.mdx b/docs/Systems/layout-and-spacing/layout-and-spacing.mdx similarity index 100% rename from docs/Systems/LayoutAndSpacing/layout-and-spacing.mdx rename to docs/Systems/layout-and-spacing/layout-and-spacing.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/color-tokens.mdx b/docs/Systems/tokens/color/color-tokens.mdx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/color-tokens.mdx rename to docs/Systems/tokens/color/color-tokens.mdx diff --git a/docs/Systems/Tailwind/UtilityClassReferences/color-tokens.stories.tsx b/docs/Systems/tokens/color/color-tokens.stories.tsx similarity index 100% rename from docs/Systems/Tailwind/UtilityClassReferences/color-tokens.stories.tsx rename to docs/Systems/tokens/color/color-tokens.stories.tsx diff --git a/docs/pages/app-starter.stories.mdx b/docs/app-starter.stories.mdx similarity index 68% rename from docs/pages/app-starter.stories.mdx rename to docs/app-starter.stories.mdx index 14ff7a8c3ac..78bf9e24ebc 100644 --- a/docs/pages/app-starter.stories.mdx +++ b/docs/app-starter.stories.mdx @@ -38,14 +38,44 @@ For full installation instructions, see the Utility Class References, as we have made distinct modifications to vanilla Tailwind to suit our design system. -## 4. Add the Kaizen global CSS +## 3. Add Kaizen's global CSS stylesheets -For the convenience of your app, we've compiled all the necessary styles for our components into a single stylesheet to make it easy to set and forget. +There are 2 CSS stylesheets to import: +- reset: which handles any global styles that need to be applied +- components: which has all the styles for Kaizen's component library + +### Important to note +The order of these CSS stylesheets is **very important**: +1. Normalize +2. Kaizen Reset +3. Kaizen Components +4. Tailwind (ie. your product CSS) + +No matter how you choose to import the following, this order must be upheld. + +### Reset + +Kaizen's CSS reset aims to add any global default styles such as typography or base styles which enable Tailwind utilities (you can think of this as Kaizen's own Preflight). + +Note: this is different from a Normalize which aims to create uniformity in basic elements across the multiple browsers. (eg. Corrects bugs and common browser inconsistencies). -Add the following import to the top of your `tailwind.css` file: +You can either import this via JS or CSS, just make sure it is placed _after normalize_ but _before_ any custom CSS: +```js +import "normalize.css" +import "@kaizen/reset.css" // <- Right here! +import "../src/tailwind.css" +``` + +You can also import this into your CSS files if your project perfers, however you must preserve the above order. + +### Components + +For the convenience of your app, we've compiled all the necessary styles for our components into a single stylesheet to make it easy to set and forget. +We've especially accounted for using Tailwind's de-duping process for any Tailwind within our components: ```css -@import "../node_modules/@kaizen/components/dist/styles.css"; +// tailwind.css +@import "@kaizen/components/dist/styles.css"; @tailwind base; @tailwind components; @tailwind utilities; diff --git a/docs/pages/welcome.mdx b/docs/welcome.mdx similarity index 100% rename from docs/pages/welcome.mdx rename to docs/welcome.mdx diff --git a/package.json b/package.json index 97c9deacded..5f3430b49f2 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ }, "dependencies": { "@kaizen/design-tokens": "*", + "@kaizen/reset.css": "*", "@kaizen/tailwind": "*", "@storybook/addons": "^7.5.2", "@storybook/api": "^7.5.2", diff --git a/packages/components/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx b/packages/components/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx index fe026b96260..2252983f247 100644 --- a/packages/components/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx +++ b/packages/components/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx @@ -26,7 +26,7 @@ const FieldGroupTemplate = ({ - - - - -
+
setIsOpen(!isOpen)} > Pancakes! @@ -115,7 +116,7 @@ const PopoverWithPortal = ({ // overflow-hidden is added so we can ensure the last row autoplaces above // padding added to allow buffer for box-shadow which gets cut off by overflow-hidden className={classnames( - "relative border-solid border-default overflow-hidden", + "relative border border-purple-500 overflow-hidden", portalClassName )} > diff --git a/packages/components/src/Workflow/_docs/Workflow.stories.tsx b/packages/components/src/Workflow/_docs/Workflow.stories.tsx index 9a3b2770258..81d2d1808ba 100644 --- a/packages/components/src/Workflow/_docs/Workflow.stories.tsx +++ b/packages/components/src/Workflow/_docs/Workflow.stories.tsx @@ -2,6 +2,7 @@ import React from "react" import { Meta, StoryObj } from "@storybook/react" import { Button } from "~components/Button" import { CloseIcon, VisibleIcon } from "~components/Icon" +import { TextField } from "~components/TextField" import { Workflow } from "../" import { WorkflowControls } from "./controls" @@ -11,23 +12,15 @@ const MockContent = (): JSX.Element => (

Name and schedule the self-reflection cycle

Name the cycle

- - -

- This is the name that will be displayed across the cycle for everyone -

diff --git a/packages/components/src/__future__/Workflow/_docs/Workflow.stories.tsx b/packages/components/src/__future__/Workflow/_docs/Workflow.stories.tsx index 42788e56ee0..5e04aaff42b 100644 --- a/packages/components/src/__future__/Workflow/_docs/Workflow.stories.tsx +++ b/packages/components/src/__future__/Workflow/_docs/Workflow.stories.tsx @@ -2,6 +2,7 @@ import React from "react" import { Meta, StoryObj } from "@storybook/react" import { Button } from "~components/Button" import { CloseIcon, VisibleIcon } from "~components/Icon" +import { TextField } from "~components/TextField" import { Workflow } from "../" import { WorkflowControls } from "./controls" @@ -11,23 +12,15 @@ const MockContent = (): JSX.Element => (

Name and schedule the self-reflection cycle

Name the cycle

- - -

- This is the name that will be displayed across the cycle for everyone -

diff --git a/packages/reset.css/package.json b/packages/reset.css/package.json new file mode 100644 index 00000000000..a0901cfb0a4 --- /dev/null +++ b/packages/reset.css/package.json @@ -0,0 +1,21 @@ +{ + "name": "@kaizen/reset.css", + "version": "0.0.0", + "description": "Kaizen CSS reset", + "author": "Jake Pitman ", + "homepage": "https://cultureamp.design", + "license": "MIT", + "bugs": { + "url": "https://github.com/cultureamp/kaizen-discourse/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/cultureamp/kaizen-design-system.git", + "directory": "packages/reset.css" + }, + "files": [ + "reset.css" + ], + "private": false, + "main": "reset.css" +} diff --git a/packages/reset.css/reset.css b/packages/reset.css/reset.css new file mode 100644 index 00000000000..ab98fcaa6d9 --- /dev/null +++ b/packages/reset.css/reset.css @@ -0,0 +1,7 @@ +*, +::before, +::after { + border-width: 0; + border-style: solid; + border-color: var(--border-solid-border-color, "currentColor"); +} diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json index a754bf58964..3ba596b6924 100644 --- a/packages/tailwind/package.json +++ b/packages/tailwind/package.json @@ -25,7 +25,7 @@ "private": false, "license": "MIT", "dependencies": { - "@kaizen/design-tokens": "^10.3.14" + "@kaizen/design-tokens": "^10.3.15" }, "peerDependencies": { "tailwindcss": "^3.3.5" diff --git a/packages/tailwind/src/tailwind-presets.ts b/packages/tailwind/src/tailwind-presets.ts index 5b4eb9d8b4a..903c741c714 100644 --- a/packages/tailwind/src/tailwind-presets.ts +++ b/packages/tailwind/src/tailwind-presets.ts @@ -1,5 +1,5 @@ import { ThemeConfig } from "tailwindcss/types/config" -import { defaultTheme } from "@kaizen/design-tokens" +import { defaultTheme } from "@kaizen/design-tokens/" import { kzSpacing } from "./kz-spacing" export type KaizenTailwindTheme = Partial @@ -7,7 +7,7 @@ export type KaizenTailwindPreset = { theme: KaizenTailwindTheme } -// Note: changing any token will require to to run build:ts from the root `design-tokens` +// Note: changing any token will require to to run `yarn build` from the root export const kaizenTailwindTheme: KaizenTailwindTheme = { extend: { maxWidth: { @@ -31,15 +31,17 @@ export const kaizenTailwindTheme: KaizenTailwindTheme = { lg: defaultTheme.shadow.large.boxShadow, }, borderRadius: { + DEFAULT: "7px", default: "7px", none: "0px", "focus-ring": "10px", full: "100%", }, - borderWidth: { - none: "0px", + DEFAULT: "2px", default: "2px", + none: "0px", + 1: "1px", "focus-ring": "2px", }, borderColor: { diff --git a/storybook/styles/tailwind.scss b/storybook/styles/tailwind.scss index e0d9025902b..1ea5e8432fa 100644 --- a/storybook/styles/tailwind.scss +++ b/storybook/styles/tailwind.scss @@ -1,12 +1,10 @@ -@layer normalize; +// Standard base stylesheet used across Culture Amp products +// See: https://github.com/necolas/normalize.css/ +@import "normalize.css"; +@import "./fonts.scss"; +@import "@kaizen/reset.css"; +@import "./docs.scss"; @tailwind base; @tailwind components; @tailwind utilities; - -@import "./fonts.scss"; -@import "./docs.scss"; - -// Standard base stylesheet used across Culture Amp products -// See: https://github.com/necolas/normalize.css/ -@import "normalize.css" layer(normalize);