chore: Extract and move Storybook stylesheets (#1453)

storybook/config/preview.tsx

@@ -2,7 +2,8 @@ import '@amsterdam/design-system-tokens/dist/index.css'
 import '@amsterdam/design-system-tokens/dist/compact.theme.css'
 import '@amsterdam/design-system-assets/font/index.css'
 import '@amsterdam/design-system-css/dist/index.css'
-import './storybook-overrides.css'
+import '../src/styles/docs.css'
+import '../src/styles/overrides.css'
 import { withThemeByClassName } from '@storybook/addon-themes'
 import { viewports } from './viewports'
 

storybook/src/styles/docs.css

@@ -0,0 +1,116 @@
+:root {
+  --ams-docs-grey: rgb(0 0 0 / 6.25%);
+  --ams-docs-pink: rgb(229 0 130 / 25%);
+}
+
+.ams-docs-figure {
+  display: flex;
+  gap: 0.25rem;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.ams-docs-image,
+.ams-docs-figure > img {
+  display: block;
+  max-inline-size: 100%;
+  outline: 0.0625rem dashed #e8e8e8;
+}
+
+.ams-docs-figure > figcaption {
+  text-align: center;
+}
+
+.ams-docs-gallery {
+  align-items: flex-end;
+  display: flex;
+  gap: 2rem;
+  margin-block: 1.5rem;
+}
+
+.ams-docs-gallery .ams-docs-figure {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  inline-size: fit-content;
+  margin-inline: 0;
+}
+
+.ams-docs-card {
+  border: 0.0625rem solid hotpink;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  inline-size: 50%;
+  padding-block: 0.5rem;
+  padding-inline: 0.5rem;
+}
+
+.ams-docs-dark-background {
+  background-color: #004699;
+  margin-block: -1rem;
+  margin-inline: -1rem;
+  padding-block: 1rem;
+  padding-inline: 1rem;
+}
+
+.ams-docs-column,
+.ams-docs-row {
+  background: repeating-linear-gradient(
+    135deg,
+    var(--ams-docs-grey),
+    var(--ams-docs-grey) 0.5rem,
+    white 0.5rem,
+    white 1rem
+  );
+  border: thin solid var(--ams-docs-grey);
+}
+
+.ams-docs-column {
+  max-inline-size: 16rem;
+  min-block-size: 16rem;
+}
+
+.ams-docs-row {
+  min-block-size: 6rem;
+}
+
+.ams-docs-grid {
+  /* Todo columns background */
+}
+
+.ams-docs-item {
+  background-color: var(--ams-docs-pink);
+  border: thin dashed var(--ams-docs-grey);
+  font-family: "Amsterdam Sans", sans-serif;
+  font-size: var(--ams-paragraph-small-font-size);
+  line-height: var(--ams-paragraph-small-line-height);
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 1.5rem;
+  text-align: center;
+}
+
+.ams-docs-row > .ams-docs-item {
+  flex-basis: 8rem;
+  padding-inline: 1.5rem;
+}
+
+.ams-docs-column > .ams-docs-item {
+  min-inline-size: 3rem;
+}
+
+[class*="ams-docs-token-preview--"] {
+  block-size: 1rem;
+}
+
+[class*="ams-docs-token-preview--border"] {
+  border-inline-start-style: solid;
+}
+
+[class*="ams-docs-token-preview--space"] {
+  background-color: var(--ams-color-primary-white);
+  outline: 1px dashed var(--ams-color-neutral-grey2);
+}

storybook/config/storybook-overrides.css → storybook/src/styles/overrides.css

@@ -1,4 +1,4 @@
-/* stylelint-disable */
+/* stylelint-disable no-descending-specificity, selector-class-pattern, selector-max-id */
 
 .sbdocs-wrapper.sbdocs-wrapper {
   padding-inline: 8vw;
@@ -11,8 +11,8 @@
 .sbdocs-content.sbdocs-content > table:not(.sb-unstyled) :is(td, th),
 .sbdocs-content.sbdocs-content > div:not(.sb-unstyled) > table:not(.sb-unstyled) :is(td, th),
 .sbdocs-content.sbdocs-content > div:not(.sb-unstyled) figcaption {
-  color: #000000;
-  font-family: "Amsterdam Sans", Arial, sans-serif;
+  color: #000;
+  font-family: "Amsterdam Sans", "Arial", sans-serif;
 }
 
 .sbdocs-content.sbdocs-content > p,
@@ -38,8 +38,8 @@
 }
 
 .sbdocs-content.sbdocs-content > .ams-storybook-status-badge > span:nth-child(2) {
-  color: #000000;
-  font-family: "Amsterdam Sans", Arial, sans-serif;
+  color: #000;
+  font-family: "Amsterdam Sans", "Arial", sans-serif;
   font-size: var(--ams-text-level-6-font-size);
 }
 
@@ -70,8 +70,8 @@
 
 .sbdocs-content.sbdocs-content > h2,
 .sbdocs-content.sbdocs-content > div:not(.sb-unstyled) > h2 {
+  border-block-end: none;
   font-size: 1.5rem;
-  border-bottom: none;
 }
 
 .sbdocs-content.sbdocs-content > h3,
@@ -117,5 +117,3 @@
 :is(#storybook-root, .sbdocs-content) a[href="#"] {
   cursor: not-allowed;
 }
-
-/* stylelint-enable */