docs(Storybook): improve styles and BEEQ light/dark mode (#501)

Endava · Aug 31, 2023 · 0acb276 · 0acb276
1 parent 642c3c6
commit 0acb276
Show file tree

Hide file tree

Showing 43 changed files with 1,193 additions and 795 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,7 +9,7 @@
 .angular
 master.zip
 packages/beeq/.stencil
-packages/beeq/.storybook/css/**
+packages/beeq/.storybook/assets/css/stories.css
 packages/beeq/custom-elements.json
 packages/beeq/src/components/icon/svg/**
 packages/beeq-angular/**/directives

diff --git a/packages/beeq/.storybook/assets/css/font.css b/packages/beeq/.storybook/assets/css/font.css
@@ -0,0 +1,65 @@
+/* Thin */
+@font-face {
+  font-family: '"Outfit"';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Light */
+@font-face {
+  font-family: '"Outfit"';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Regular */
+@font-face {
+  font-family: '"Outfit"';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Medium */
+@font-face {
+  font-family: '"Outfit"';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Semibold */
+@font-face {
+  font-family: '"Outfit"';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Bold */
+@font-face {
+  font-family: '"Outfit"';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/packages/beeq/.storybook/assets/css/preview.css b/packages/beeq/.storybook/assets/css/preview.css
@@ -0,0 +1,125 @@
+/* stylelint-disable media-feature-range-notation */
+/* stylelint-disable custom-property-pattern */
+
+.sbdocs-wrapper {
+  padding: 0 !important;
+}
+
+.sbdocs-wrapper .sbdocs-content {
+  max-width: 100% !important;
+  min-height: 100vh;
+}
+
+.sbdocs-content a,
+.sbdocs-content blockquote,
+.sbdocs-content h1,
+.sbdocs-content h2,
+.sbdocs-content li,
+.sbdocs-content ol,
+.sbdocs-content p,
+.sbdocs-content table,
+.sbdocs-content td,
+.sbdocs-content th,
+.sbdocs-content tr,
+.sbdocs-content ul {
+  font-family: var(--bq-font-family--outfit);
+  font-size: var(--bq-font-size--m);
+  font-weight: var(--bq-font-weight--regular);
+  color: var(--bq-text--primary);
+}
+
+.sbdocs-content a {
+  color: var(--bq-text--brand);
+}
+
+.sbdocs-content h1,
+.sbdocs-content h2 {
+  line-height: var(--bq-font-line-height--small);
+}
+
+.sbdocs-content h1 {
+  font-size: var(--bq-font-size--xxl2);
+}
+
+.sbdocs-content h2 {
+  font-size: var(--bq-font-size--xxl);
+  border-bottom: none;
+}
+
+.docblock-typeset {
+  background-color: var(--bq-background--primary) !important;
+}
+
+.docblock-argstable .docblock-argstable-body {
+  box-shadow: var(--bq-box-shadow--m);
+  filter: none !important;
+}
+
+.docblock-argstable .docblock-argstable-body > tr:first-of-type > td:first-of-type {
+  border-top-left-radius: var(--bq-radius--m) !important;
+}
+
+.docblock-argstable .docblock-argstable-body > tr:first-of-type > td:last-of-type {
+  border-top-right-radius: var(--bq-radius--m) !important;
+}
+
+.docblock-argstable .docblock-argstable-body > tr:last-of-type > td:first-of-type {
+  border-bottom-left-radius: var(--bq-radius--m) !important;
+}
+
+.docblock-argstable .docblock-argstable-body > tr:last-of-type > td:last-of-type {
+  border-bottom-right-radius: var(--bq-radius--m) !important;
+}
+
+.docblock-argstable .docblock-argstable-body > tr >td[colspan="1"],
+.docblock-argstable .docblock-argstable-body > tr >td[colspan="2"] {
+  background-color: var(--bq-ui--primary-alt) !important;
+}
+
+.docs-story > div:first-child {
+  min-height: 250px;
+}
+
+.bq-doc__wrapper {
+  display: flex;
+  justify-content: center;
+  background-color: var(--bq-background--primary);
+  padding-top: var(--bq-spacing-xl);
+  min-height: 100vh;
+  width: 100%;
+}
+
+
+.bq-doc__container {
+  font-family: '"Outfit"', sans-serif;
+  color: var(--bq-text--primary);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--bq-spacing-l);
+  padding-right: var(--bq-spacing-l);
+  width: 100%px;
+}
+
+@media (min-width: 640px) {
+  .bq-doc__container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .bq-doc__container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .bq-doc__container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .bq-doc__container {
+    max-width: 1280px;
+  }
+}
diff --git a/packages/beeq/.storybook/assets/css/storybook.css b/packages/beeq/.storybook/assets/css/storybook.css
@@ -0,0 +1,76 @@
+html,
+body {
+  font-family: '"Outfit"', sans-serif;
+  font-size: 1rem;
+}
+
+.search-field input {
+  border-color: #6b7280;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  font-size: 16px;
+  min-height: 32px;
+}
+
+.search-field input:active,
+.search-field input:focus {
+  border-color: #4f46e5;
+  box-shadow: none;
+}
+
+.sidebar-item,
+.sidebar-item a {
+  display: flex !important;
+  align-items: center !important;
+  font-family: '"Outfit"', sans-serif;
+  font-size: 1rem !important;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+.sidebar-item > span {
+  margin-top: initial !important;
+}
+
+.sidebar-item > svg,
+.sidebar-item a > svg {
+  height: 16px !important;
+  width: 16px !important;
+  margin-top: 0;
+}
+
+.sidebar-item > svg[color='primary'] {
+  color: #4f46e5;
+}
+
+.sidebar-item > svg[color='secondary'] {
+  color: #4f46e5;
+}
+
+.sidebar-subheading {
+  margin-top: 16px !important;
+  margin-bottom: 6px !important;
+  font-weight: 600 !important;
+  font-size: 1.125rem !important;
+  line-height: 20px !important;
+  min-height: 20px !important;
+  letter-spacing: 0.05rem !important;
+  text-transform: none !important;
+}
+
+.sidebar-subheading > button {
+  color: #a6aab3;
+  font-family: '"Outfit"', sans-serif;
+  font-size: 1.125rem;
+}
+
+.sidebar-subheading > button:not(.sidebar-subheading-action) > span {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid;
+}
+
+.sidebar-subheading > button.sidebar-subheading-action > span > svg {
+  height: 16px !important;
+  width: 16px !important;
+}
diff --git a/packages/beeq/.storybook/main.ts b/packages/beeq/.storybook/main.ts
@@ -25,13 +25,34 @@ const config: StorybookConfig = {
   },
   framework: '@storybook/web-components-vite',
   stories: ['../src/_storybook/**/*.mdx', '../src/**/*.stories.@(mdx|ts|tsx)'],
-  staticDirs: ['../../../dist/beeq/www', { from: '../../../dist/beeq/dist/bee-q', to: '/beeq' }],
+  staticDirs: [
+    '../../../dist/beeq/www',
+    { from: '../../../dist/beeq/dist/bee-q', to: '/beeq' },
+    { from: './assets/css', to: '/css' },
+  ],
   viteFinal: async (config: InlineConfig, { configType }) => {
     // Add your own config tweaks if needed and return the modified config
     return mergeConfig(config, {
       plugins: [configType === 'PRODUCTION' && turbosnap({ rootDir: config.root ?? process.cwd() })].filter(Boolean),
     });
   },
+  managerHead: (head) => `
+    ${head}
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="stylesheet" type="text/css" href="css/font.css" />
+    <link rel="stylesheet" type="text/css" href="css/storybook.css" />
+  `,
+  previewHead: (head) => `
+    ${head}
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="stylesheet" type="text/css" href="css/font.css" />
+    <link rel="stylesheet" type="text/css" href="css/preview.css" />
+    <link rel="stylesheet" type="text/css" href="beeq/bee-q.css" />
+    <script type="module" src="beeq/bee-q.esm.js"></script>
+    <script type="text/javascript">
+      document.addEventListener('touchstart', function () {}, false);
+    </script>
+  `,
 };
 
 export default config;
diff --git a/packages/beeq/.storybook/manager.ts b/packages/beeq/.storybook/manager.ts
@@ -4,7 +4,7 @@ import { create } from '@storybook/theming';
 const theme = create({
   base: 'light',
 
-  colorPrimary: '#f0f1f2',
+  colorPrimary: '#f7f8f9',
   colorSecondary: '#4f46e5',
 
   // BRAND
@@ -13,20 +13,22 @@ const theme = create({
   brandImage: './assets/beeq-logo.svg',
 
   // UI
-  appBg: '#f0f1f2',
+  appBg: '#f7f8f9',
   appContentBg: '#fff',
+  appBorderRadius: 12,
 
   // Typography
   fontBase: '"Outfit", sans-serif',
+  fontCode: 'monospace',
 
   // Text colors
-  textColor: '#2b2e33',
+  textColor: '#25282d',
   textInverseColor: '#fff',
 
   // Toolbar default and active colors
-  barTextColor: '#2b2e33',
-  barSelectedColor: '#6366F1',
-  barBg: '#f0f1f2',
+  barTextColor: '#25282d',
+  barSelectedColor: '#4f46e5',
+  barBg: '#f7f8f9',
 });
 
 addons.setConfig({

diff --git a/packages/beeq/.storybook/preview-head.html b/packages/beeq/.storybook/preview-head.html
diff --git a/packages/beeq/.storybook/preview.ts b/packages/beeq/.storybook/preview.ts
@@ -1,4 +1,4 @@
-import './css/sb-styles.css';
+import './assets/css/stories.css';
 
 import type { DecoratorFunction } from '@storybook/types';
 import type { Preview, WebComponentsRenderer } from '@storybook/web-components';

diff --git a/packages/beeq/project.json b/packages/beeq/project.json
@@ -95,16 +95,16 @@
     },
     "storybook-start-css": {
       "executor": "nx:run-commands",
-      "outputs": ["{projectRoot}/.storybook/css"],
+      "outputs": ["{projectRoot}/.storybook/assets/css"],
       "options": {
-        "command": "npx tailwindcss -i packages/beeq/src/global/styles/tailwind.pcss -o packages/beeq/.storybook/css/sb-styles.css --postcss ./postcss.config.js --watch"
+        "command": "npx tailwindcss -i packages/beeq/src/global/styles/tailwind.pcss -o packages/beeq/.storybook/assets/css/stories.css --postcss ./postcss.config.js --watch"
       }
     },
     "storybook-build-css": {
       "executor": "nx:run-commands",
-      "outputs": ["{projectRoot}/.storybook/css"],
+      "outputs": ["{projectRoot}/.storybook/assets/css"],
       "options": {
-        "command": "npx tailwindcss -i packages/beeq/src/global/styles/tailwind.pcss -o packages/beeq/.storybook/css/sb-styles.css --postcss ./postcss.config.js --minify"
+        "command": "npx tailwindcss -i packages/beeq/src/global/styles/tailwind.pcss -o packages/beeq/.storybook/assets/css/stories.css --postcss ./postcss.config.js --minify"
       }
     },
     "generate-icons": {