Merge branch 'main' into KDS-1953-port-button-fix-from-kaizen-legacy

.changeset/new-cups-poke.md

@@ -0,0 +1,2 @@
+---
+---

docs/app-starter.mdx

@@ -10,7 +10,7 @@ This guide is all about how to introduce the Kaizen Design System to your app.
 
 Whilst the Kaizen Design System mainly focuses on the more atomic components in your app, some of the components have a high level of complexity requiring various global components to be present in order for them to function.
 
-<InlineNotification persistent type="informative">You won't need to apply any of the below if you have the latest <a href="https://github.com/cultureamp/frontend-template" target="_blank" rel="noreferrer">Frontend template</a> or <a href="https://github.com/cultureamp/next-template">next-template</a>.</InlineNotification>
+<InlineNotification persistent type="informative">You won't need to apply any of the below if you have the latest <a href="https://github.com/cultureamp/next-template">next-template</a>.</InlineNotification>
 ## 1. Add the KaizenProvider
 
 The <LinkTo pageId="components-kaizen-provider-installation">KaizenProvider</LinkTo> feeds your entire app with Kaizen defaults so it's important that it goes at the very root of your application.

storybook/main.ts

@@ -45,12 +45,6 @@ const config = {
     name: "@storybook/react-webpack5",
     options: {},
   },
-  refs: {
-    legacy: {
-      title: "Legacy",
-      url: "https://main--64bde0b812df1bbcb02a4937.chromatic.com/",
-    },
-  },
   typescript: {
     reactDocgen: "react-docgen-typescript",
     reactDocgenTypescriptOptions: {

storybook/preview.tsx

@@ -1,4 +1,3 @@
-import "./styles/styles.scss"
 import "./styles/tailwind.scss"
 
 import React, { useEffect } from "react"

storybook/styles/tailwind.scss

@@ -1,3 +1,42 @@
+@import "../../packages/components/styles/foundation/styles.css";
+@import "highlight.js/styles/a11y-light.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+pre code {
+  font-family: ui-monospace, "Menlo", "Monaco", "Roboto Mono", "Oxygen Mono",
+    "Ubuntu Monospace", "Source Code Pro", "Droid Sans Mono", "Courier New",
+    monospace !important;
+  font-size: 14px !important;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  padding: 20px !important;
+  font-weight: 300 !important;
+  -webkit-font-smoothing: antialiased;
+  line-height: 19px;
+}
+
+#storybook-docs {
+  .sbdocs-wrapper {
+    padding: 2.5rem;
+  }
+
+  .sbdocs-content {
+    max-width: unset;
+  }
+
+  .sbdocs-a {
+    color: var(--color-blue-400);
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    & code {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
+}