shifted styles back (#4189)

* shifted styles back

* fix lint

* add underscore

* move fonts back to tailwind

* incoporated a layer for normalize

* add changeset

* ignore tailwind scss styles

* ignore storybook styles

.changeset/calm-ligers-promise.md

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

.stylelintignore

@@ -1,2 +1,3 @@
 packages/design-tokens/**/*.scss
 packages/components/locales/*
+storybook/styles/*

storybook/preview.tsx

@@ -1,4 +1,4 @@
-import "./tailwind.scss"
+import "./styles/tailwind.scss"
 import React, { useEffect } from "react"
 import { Preview } from "@storybook/react"
 import { KaizenProvider } from "~components/KaizenProvider"

storybook/tailwind.scss → storybook/styles/_docs.scss

@@ -1,12 +1,7 @@
 @import "~@kaizen/design-tokens/sass/color";
 
-/* stylelint-disable */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 pre code {
-  font-family: ui-monospace, Menlo, Monaco, "Roboto Mono", "Oxygen Mono",
+  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;

storybook/styles/_fonts.scss

@@ -0,0 +1,105 @@
+/* stylelint-disable function-url-quotes */
+@import "~@kaizen/hosted-assets/index";
+
+// =============== TIEMPOS ===============
+@font-face {
+  font-family: "Tiempos Headline";
+  src: url(asset-url("fonts/tiempos/tiempos-headline-bold.woff2")),
+    url(asset-url("fonts/tiempos/tiempos-headline-bold.woff"));
+  font-weight: 800;
+}
+
+// =============== GREYCLIFF ===============
+
+@font-face {
+  font-family: "Greycliff CF";
+  src: url(asset-url("fonts/greycliff/greycliff-cf-light.woff")) format("woff");
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "Greycliff CF";
+  src: url(asset-url("fonts/greycliff/greycliff-cf-regular.woff"))
+    format("woff");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Greycliff CF";
+  src: url(asset-url("fonts/greycliff/greycliff-cf-medium.woff")) format("woff");
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Greycliff CF";
+  src: url(asset-url("fonts/greycliff/greycliff-cf-demi-bold.woff"))
+    format("woff");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Greycliff CF";
+  src: url(asset-url("fonts/greycliff/greycliff-cf-bold.woff")) format("woff");
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Greycliff CF";
+  src: url(asset-url("fonts/greycliff/greycliff-cf-extra-bold.woff"))
+    format("woff");
+  font-weight: 800;
+}
+
+// =============== INTER ===============
+
+@font-face {
+  font-family: "Inter";
+  src: url(asset-url("fonts/inter/inter-light.woff2"))
+    url(asset-url("fonts/inter/inter-light.woff"));
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url(asset-url("fonts/inter/inter-regular.woff2")),
+    url(asset-url("fonts/inter/inter-regular.woff"));
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url(asset-url("fonts/inter/inter-medium.woff2")),
+    url(asset-url("fonts/inter/inter-medium.woff"));
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url(asset-url("fonts/inter/inter-demi-bold.woff2")),
+    url(asset-url("fonts/inter/inter-demi-bold.woff"));
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url(asset-url("fonts/inter/inter-bold.woff2")),
+    url(asset-url("fonts/inter/inter-bold.woff"));
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url(asset-url("fonts/inter/inter-extra-bold.woff2")),
+    url(asset-url("fonts/inter/inter-extra-bold.woff"));
+  font-weight: 800;
+}
+
+// =============== IBM PLEX MONO ===============
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  src: url(asset-url("fonts/ibm-plex-mono/ibm-plex-mono-regular.woff2")),
+    url(asset-url("fonts/ibm-plex-mono/ibm-plex-mono-regular.woff"));
+}
+
+/* stylelint-enable function-url-quotes */

storybook/styles/tailwind.scss

@@ -0,0 +1,12 @@
+@layer normalize;
+
+@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);