Kds 1611 fix border config (#4256)

* Add DEFAULT styles to TW preset

* Add @kaizen/reset package

* Update docs

* Add changeset

* Fix export issue

* cleanup + docs

* cleanup package.json

* remove version

* add changeset

* add changeset

* fix changesets

* remove '-default' utility classes + replace defaultTheme usage in tw preset

* bring back default

* upgrade tailwind design token dep

* change  to peerDep

* revert token changes

* revert design-tokens peerDep

* fix up tailwind docs

* revert token source for less noisy PR

* cleanup

* update changeset

* fix tailwind docs styles

* fix missing borders

* update tw preset to a major + disclaimer

* darkened border examples

* fix border styling

* fix missing borders

* fix lint

* fix stories

* lint

* remove unuseful script

* update changeset

* cleanup

---------

Co-authored-by: Geoffrey Chong <[email protected]>
Co-authored-by: Geoffrey Chong <[email protected]>

.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"
+```

.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

docs/Systems/Tailwind/components/CodeSnippet.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from "react"
+import { ClosedIcon, SurveysIcon } from "~components/Icon"
 
 type Props = {
   text: string
   onCopy?: (text: string) => void
 }
 
 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 (
     <button
       type="button"
-      className="bg-[#00182e] h-min rounded-default px-12 border-none cursor-pointer w-full"
+      className="bg-[#00182e] h-min rounded px-12 border-none cursor-pointer w-full"
       onClick={(): void => handleCopy(text)}
       onBlur={(): void => setCopyIconIsChecked(false)}
     >
       <p className="font-family-paragraph text-white flex justify-between items-center">
         <span>{text}</span>
-        {/* Replace with Icons */}
-        {/* <span className="text-underline">
-          {copyIconIsChecked ? "copied" : "copy"}
-        </span> */}
+        <span className="text-underline text-white">
+          {copyIconIsChecked ? (
+            <ClosedIcon role="img" aria-label="copied" />
+          ) : (
+            <SurveysIcon role="img" aria-label="copy" />
+          )}
+        </span>
       </p>
     </button>
   )

docs/Systems/Tailwind/components/DemoBox.tsx

@@ -6,7 +6,7 @@ type Props = {
 
 const DemoBox = ({ classnameOverride }: Props): React.ReactElement => (
   <div
-    className={`h-100 w-full rounded-default bg-blue-200 ${
+    className={`h-100 w-full rounded bg-blue-200 ${
       classnameOverride ? classnameOverride : ""
     }`}
   />

docs/Systems/Tailwind/components/UtilityClassTemplate.tsx

@@ -27,22 +27,21 @@ export const UtilityClassTemplate = ({
         rules="rows"
       >
         <StickerSheet.Header
-          className="text-left border-transparent border-solid border-b-gray-400"
+          className="text-left border-b border-gray-400"
           headings={["Utility Class", "Compiled CSS", "Example"]}
         />
         <StickerSheet.Body>
           {classKeyValues.map((presetData, _index) => {
             const { utilityClassName, cssProperty } = presetData
-
             return (
               <StickerSheet.Row
                 key={_index}
                 rowTitle=""
-                className="border-gray-400"
+                className="border-b-1 border-gray-400"
               >
                 <div className="mr-32 min-w-max max-w-[300px]">
                   <CodeSnippet
-                    text={utilityClassName}
+                    text={utilityClassName.replace("-DEFAULT", "")}
                     onCopy={(text: string): void => setCopiedText(text)}
                   />
                 </div>

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.
 

docs/Systems/Tailwind/UtilityClassReferences/Backgrounds/background-color.stories.tsx → 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 => (
       <div
         className={classnames(
-          "w-[100px] h-[100px] border-solid",
-          "rounded-default",
+          "w-[100px] h-[100px] border border-purple-100 rounded",
           utilityClass
         )}
       />

docs/Systems/Tailwind/UtilityClassReferences/Borders/border-color.stories.tsx → 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 => (
       <div
         className={classnames(
-          "rounded-default w-[100px] h-[100px] border-solid",
-          utilityClass
+          "rounded w-[100px] h-[100px] border",
+          utilityClass.replace("-DEFAULT", "")
         )}
       />
     )}

docs/Systems/Tailwind/UtilityClassReferences/Borders/border-radius.stories.tsx → 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 => (
       <div
-        className={classnames("w-[100px] h-[100px] border-solid", utilityClass)}
+        className={classnames(
+          "w-[100px] h-[100px] border border-purple-500",
+          utilityClass.replace("-DEFAULT", "")
+        )}
       />
     )}
     isReversed={isReversed}

docs/Systems/Tailwind/UtilityClassReferences/Borders/border-width.stories.tsx → 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 => (
       <div
         className={classnames(
-          "w-[100px] h-[100px] border-solid border-[black] border-default",
-          utilityClass
+          "w-[100px] h-[100px] border rounded",
+          !utilityClass.includes("-DEFAULT") && utilityClass
         )}
       />
     )}

docs/Systems/Tailwind/UtilityClassReferences/Modifiers/media-queries.stories.tsx → 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 <em>wider</em>.
     </Heading>
     <QueryInfo selector="md" selectorValue="768px">
-      <div className="border-solid md:bg-blue-400 h-[50px] w-full rounded-default" />
+      <div className="border-solid md:bg-blue-400 h-[50px] w-full rounded" />
     </QueryInfo>
     <QueryInfo selector="lg" selectorValue="1080px">
-      <div className="border-solid lg:bg-blue-400 h-[50px] w-full rounded-default" />
+      <div className="border-solid lg:bg-blue-400 h-[50px] w-full rounded" />
     </QueryInfo>
   </div>
 )
@@ -71,7 +71,7 @@ export const ArbitraryMediaQueries: StoryFn = () => (
       <Paragraph variant="body">
         In this example: min-[500px]:bg-blue-400
       </Paragraph>
-      <div className="border-solid min-[500px]:bg-blue-400 h-[50px] w-full rounded-default" />
+      <div className="border-solid min-[500px]:bg-blue-400 h-[50px] w-full rounded" />
     </div>
 
     <Paragraph variant="body">
@@ -81,6 +81,6 @@ export const ArbitraryMediaQueries: StoryFn = () => (
     <Paragraph variant="body">
       In this example: max-[500px]:bg-blue-400
     </Paragraph>
-    <div className="border-solid max-[500px]:bg-blue-400 h-[50px] w-full rounded-default" />
+    <div className="border-solid max-[500px]:bg-blue-400 h-[50px] w-full rounded" />
   </div>
 )

docs/Systems/Tailwind/UtilityClassReferences/Modifiers/pseudo-states.stories.tsx → docs/Systems/Tailwind/utility-class-helpers/modifiers/pseudo-states.stories.tsx

@@ -29,7 +29,7 @@ export const PseudoSelectors: StoryFn<{ isReversed: boolean }> = ({
       <p className="font-family-paragraph">background-color: #bde2f5</p>
       <button
         type="button"
-        className="border-solid bg-white border-[black] font-family-paragraph w-[150px] rounded-default hover:bg-blue-200 py-16 px-12 text-center"
+        className="border-solid bg-white border-[black] font-family-paragraph w-[150px] rounded hover:bg-blue-200 py-16 px-12 text-center"
       >
         Hover me
       </button>
@@ -40,7 +40,7 @@ export const PseudoSelectors: StoryFn<{ isReversed: boolean }> = ({
       <button
         type="button"
         tabIndex={0}
-        className="border-solid bg-white border-[black] font-family-paragraph w-[150px] rounded-default focus:bg-blue-200 py-16 px-12 text-center"
+        className="border-solid bg-white border-[black] font-family-paragraph w-[150px] rounded focus:bg-blue-200 py-16 px-12 text-center"
       >
         Focus me
       </button>

docs/Systems/Tailwind/UtilityClassReferences/overview.mdx → 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
-<div className="rounded-default ...">...</div>
+<div className="rounded ...">...</div>
 ```
 <Canvas>
-<div className="rounded-default border-solid w-max border-blue-500 bg-blue-100 px-12">
+<div className="rounded border-solid w-max border-blue-500 bg-blue-100 px-12">
   <p className="font-family-paragraph text-blue-700">Example</p>
 </div>
 </Canvas>

docs/Systems/Tailwind/UtilityClassReferences/Spacing/margin.stories.tsx → 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 => (
-      <div className="w-min border-solid rounded-default">
+      <div className="w-min border rounded">
         <p
           className={classnames(
-            "p-4 border-dashed w-min rounded-default bg-blue-100",
+            "p-4 border border-dashed w-min rounded bg-blue-100",
             utilityClass
           )}
         >

docs/Systems/Tailwind/UtilityClassReferences/Spacing/padding.stories.tsx → 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 => (
       <p
         className={classnames(
-          "border-solid w-min rounded-default bg-blue-100",
+          "border border-purple-100 w-min rounded bg-blue-100",
           utilityClass
         )}
       >

docs/Systems/Tailwind/UtilityClassReferences/Typography/text-color.stories.tsx → docs/Systems/Tailwind/utility-class-helpers/typography/text-color.stories.tsx

@@ -31,15 +31,15 @@ export const TextColor: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => (
       <div className="flex items-center h-100">
         <p
           className={classnames(
-            "font-family-paragraph p-8 rounded-default font-weight-display text-heading-3 m-0 mr-16",
+            "font-family-paragraph p-8 rounded font-weight-display text-heading-3 m-0 mr-16",
             utilityClass
           )}
         >
           Light bg
         </p>
         <p
           className={classnames(
-            "font-family-paragraph p-8 bg-[black] rounded-default font-weight-display text-heading-3 m-0",
+            "font-family-paragraph p-8 bg-[black] rounded font-weight-display text-heading-3 m-0",
             utilityClass
           )}
         >

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)
 
 <br/>

docs/Systems/Tailwind/working-with-tailwind.stories.tsx

@@ -91,7 +91,7 @@ export const TailwindExampleClassNameOverrideHeading: StoryFn = () => (
 
 export const TailwindExampleSnowflake: StoryFn = () => (
   <div className="flex justify-center">
-    <div className="w-[250px] rounded-default border-dashed border-red-500 bg-blue-100">
+    <div className="w-[250px] rounded border-dashed border-red-500 bg-blue-100">
       <p className="m-0 p-12 pl-16 font-family-paragraph text-blue-500 text-center">
         Not a Kaizen Component
       </p>

docs/pages/app-starter.stories.mdx → docs/app-starter.stories.mdx

@@ -38,14 +38,44 @@ For full installation instructions, see the <LinkTo pageId="systems-tailwind-get
 
 Whether or not you are already familiar with Tailwind, you'll want to take a look at our <LinkTo pageId="systems-tailwind-utility-class-references-overview">Utility Class References</LinkTo>, 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;

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",

packages/components/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx

@@ -26,7 +26,7 @@ const FieldGroupTemplate = ({
     <FieldGroup inline={inline} classNameOverride="mr-6">
       <Label htmlFor={`id--field-${id}`}>Email</Label>
       <input
-        className="ms-6"
+        className="border border-gray-500"
         placeholder="Native text input..."
         type="text"
         id="id--field-2"
@@ -35,7 +35,7 @@ const FieldGroupTemplate = ({
     <FieldGroup inline={inline}>
       <Label htmlFor={`id--field-${id}`}>Username</Label>
       <input
-        className="ms-6"
+        className="border border-gray-500"
         placeholder="Native text input..."
         type="text"
         id="id--field-2"