Feat: Theming Brandless

.storybook/components/SectionList.tsx

@@ -3,14 +3,16 @@ import type { PropsWithChildren } from 'react'
 
 type SectionListProps = {
   grid?: 'row' | 'grid'
+  classes?: string
 }
 
 const SectionList = ({
   children,
+  classes,
   grid = 'row',
 }: PropsWithChildren<SectionListProps>) => {
   return (
-    <section className="sbdocs-list">
+    <section className={`${classes} sbdocs-list`}>
       <ul
         className={`sbdocs-ul ${
           grid === 'grid' ? 'sbdocs-ul-grid' : 'sbdocs-ul-row'

.storybook/manager-head.html

@@ -0,0 +1,9 @@
+<style>
+  #storybook-explorer-menu a:hover { background-color: #d8e2ff; }
+
+  #storybook-explorer-menu a[data-selected="true"],
+  #storybook-explorer-menu a[data-selected="true"]:hover {
+    color: #fff;
+    background-color: #001947;
+  }
+</style>

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" />

.storybook/preview.js

@@ -1,4 +1,3 @@
-import '!style-loader!css-loader!sass-loader!../src/styles/fonts.css'
 import '!style-loader!css-loader!sass-loader!../src/styles/global/layout.scss'
 import '!style-loader!css-loader!sass-loader!../src/styles/global/resets.scss'
 import '!style-loader!css-loader!sass-loader!../src/styles/global/storybook-components.scss'
@@ -76,8 +75,9 @@ export const parameters = {
       order: [
         'Getting Started',
         'Theming',
-        'Fundamentals',
-        ['Colors', 'Typography', 'Icons'],
+        'Global Tokens',
+        'Media',
+        ['Colors', 'Typography', 'Spacing', 'Grid & Layout'],
         'Atoms',
         'Molecules',
         'Organisms',

.storybook/storybook.css

@@ -21,6 +21,8 @@
   font-size: var(--fs-text-size-legend);
 }
 
+.sbdocs.sbdocs-a { text-decoration: underline; }
+
 .sbdocs.sbdocs-p a {
   text-decoration: underline;
 }
@@ -41,6 +43,15 @@
   border-bottom: none;
 }
 
+.sbdocs.sbdocs-h2 code {
+  padding: 2px 5px;
+  margin: 0 5px;
+  font-size: 22px;
+  background-color: #ecf0ff;
+  border: 1px solid #d8e2ff;
+  border-radius: 4px;
+}
+
 h3.sbdocs.sbdocs-h3 {
   margin: var(--fs-spacing-6) 0 0;
   font-size: var(--fs-text-size-lead);
@@ -56,8 +67,8 @@ h3.sbdocs.sbdocs-h3 {
   padding: var(--fs-spacing-4) var(--fs-spacing-5);
   margin-bottom: var(--fs-spacing-6);
   color: var(--fs-color-text-inverse);
-  background-color: var(--fs-color-main-0);
-  border-radius: var(--fs-border-radius);
+  background-color: #ecf0ff;
+  border-radius: 4px;
 }
 
 /* Divisor */
@@ -78,7 +89,11 @@ h3.sbdocs.sbdocs-h3 {
   margin: 0;
 }
 
-/*  Table */
+/* List */
+
+.sbdocs.sbdocs-ol { padding-left: 17px; }
+
+/* Table */
 
 .sbdocs-table {
   width: 100%;
@@ -336,3 +351,134 @@ h3.sbdocs.sbdocs-h3 {
 .sbdocs-callout small {
   font-size: var(--fs-text-size-1);
 }
+
+/* Tokens Links */
+
+.sbdocs-tokens-links.sbdocs-list .sbdocs-div {
+  height: 170px;
+  background-color: #ecf0ff;
+  border-radius: 10px;
+}
+
+.sbdocs-tokens-links .sbdocs-ul {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.sbdocs-tokens-links .sbdocs-li:nth-child(odd) .sbdocs-div {
+  background-color: #00419e;
+}
+
+.sbdocs-tokens-links .sbdocs-li .sbdocs-div {
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 30% auto;
+}
+
+.sbdocs-tokens-links .sbdocs-ul .sbdocs-list-text { flex-basis: 50%; }
+.sbdocs-tokens-links .sbdocs-ul .sbdocs-list-text p { margin-bottom: 0; }
+
+.sbdocs-tokens-links .sbdocs-li:nth-child(1) .sbdocs-div {
+  background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/colors___038effcf345acf3d037bc63ed8671455.png");
+}
+
+.sbdocs-tokens-links .sbdocs-li:nth-child(2) .sbdocs-div {
+  background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/typography___318fbc78202402728a2113e63b47241f.png");
+}
+
+.sbdocs-tokens-links .sbdocs-li:nth-child(3) .sbdocs-div {
+  background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/spacing___ca1d02b0bcc238811347eddc66a807ad.png");
+}
+
+.sbdocs-tokens-links .sbdocs-li:nth-child(4) .sbdocs-div {
+  background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/grid___6dfb4949712be94273bc119b7945babf.png");
+}
+
+.sbdocs-tokens-links .sbdocs-li:nth-child(5) .sbdocs-div {
+  background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/controls___a8302bd539d61653e60cb0aacd1c18e7.png");
+}
+
+.sbdocs-tokens-links .sbdocs-li:nth-child(6) .sbdocs-div {
+  background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/refinements___ca4c7814b2771e84601f4a6d457612fd.png");
+}
+
+/* Hero Section */
+
+.sbdocs-content > header.sbdocs-hero {
+  padding: var(--fs-spacing-6) var(--fs-spacing-5);
+  background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/starters___45131194d6158dfd0612f089a6a91070.png");
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  background-size: 30% auto;
+}
+
+header.sbdocs-hero + .sbdocs-callout {
+  margin-top: 0;
+  margin-bottom: var(--fs-spacing-5);
+}
+
+.sbdocs-content > header.sbdocs-hero [data-fs-button-link]:first-of-type {
+  margin-left: calc(-1 * var(--fs-spacing-1));
+}
+
+.sbdocs-content > header.sbdocs-hero p {
+  width: 65%;
+  margin-top: var(--fs-spacing-3);
+  margin-bottom: var(--fs-spacing-3);
+  font-size: var(--fs-text-size-lead);
+  line-height: 1.5;
+}
+
+.sbdocs-content > header.sbdocs-hero h1 {
+  font-size: var(--fs-text-size-title-page);
+}
+
+/* Theme Section */
+
+.sbdocs-section-theme {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.sbdocs-section-theme .sbdocs-section-theme-img {
+  width: 30%;
+  height: 280px;
+  overflow: hidden;
+  background-color: #f1f2f3;
+  border-radius: 4px;
+}
+
+.sbdocs-section-theme .sbdocs-section-theme-img img {
+  display: block;
+  width: auto;
+  max-width: unset;
+  height: 100%;
+  margin: 0 auto;
+}
+
+.sbdocs-section-theme > article {
+  width: 65%;
+}
+
+/* Text Scale Section */
+
+.sbdocs-section-text-scale {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  margin-bottom: var(--fs-spacing-7);
+}
+
+.sbdocs-section-text-scale .sbdocs.sbdocs-h3 { margin-top: var(--fs-spacing-3); }
+
+.sbdocs-section-text-scale .docblock-typeset {
+  height: 100%;
+  margin-bottom: 0;
+}
+
+.sbdocs-section-text-scale > div {
+  display: flex;
+  flex-direction: column;
+  width: 49%;
+}

.storybook/theme.js

@@ -1,5 +1,5 @@
 import { create } from '@storybook/theming/create'
-import Logo from '../static/logo.svg'
+import Logo from '../static/brandless-storybook.png'
 
 export default create({
   base: 'light',
@@ -8,14 +8,14 @@ export default create({
   colorSecondary: '#00419e',
 
   // UI
-  appBg: 'white',
+  appBg: '#f3f4ff',
   appContentBg: 'white',
   appBorderRadius: 6,
 
   // Typography
   fontBase: '"Lato", -apple-system, system-ui, BlinkMacSystemFont, sans-serif',
 
-  brandTitle: `BaseStore UI`,
+  brandTitle: `Brandless UI`,
   brandUrl: 'https://github.com/vtex-sites/gatsby.store',
   brandImage: Logo,
 })

CHANGELOG.md

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Creates Themes doc pages on storybook ([#156](https://github.com/vtex-sites/gatsby.store/pull/156))
+- Added a new theme for testing purposes called midnight ([#156](https://github.com/vtex-sites/gatsby.store/pull/156))
+- Extracted all BaseStore visual to a new theme called soft-blue ([#156](https://github.com/vtex-sites/gatsby.store/pull/156))
 - Newsletter form and `useNewsletter` hook ([#134](https://github.com/vtex-sites/gatsby.store/pull/134))
 - Applies new local tokens to `SearchHistory`, `SearchTop`, `SearchDropdown` and `SearchSuggestions` ([#150](https://github.com/vtex-sites/gatsby.store/pull/150))
 - Applies CSS Modules to `Incentives` ([#147](https://github.com/vtex-sites/gatsby.store/pull/147))
@@ -24,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Updates global tokens to follow Brandless approach ([#156](https://github.com/vtex-sites/gatsby.store/pull/156))
 - Cypress version from 9.5.4 to 9.6.0 to match WebOps' ([#151](https://github.com/vtex-sites/gatsby.store/pull/151))
 - Renames and refactors the components of Search feature ([#150](https://github.com/vtex-sites/gatsby.store/pull/150))
 - A flaky PLP infinite scroll test to be more stable ([#149](https://github.com/vtex-sites/gatsby.store/pull/149))

gatsby-browser.tsx

@@ -1,9 +1,11 @@
-import './src/styles/fonts.css'
 import './src/styles/global/tokens.scss'
 import './src/styles/global/resets.scss'
 import './src/styles/global/typography.scss'
 import './src/styles/global/layout.scss'
 
+// Replace this with your theme style file
+import './src/styles/themes/custom-theme.scss'
+
 import { CartProvider, SessionProvider } from '@faststore/sdk'
 import Layout from 'src/Layout'
 import AnalyticsHandler from 'src/sdk/analytics'

gatsby-ssr.tsx

@@ -38,8 +38,12 @@ export const wrapPageElement: GatsbySSR['wrapPageElement'] = ({ element }) => {
 
 export const onRenderBody: GatsbySSR['onRenderBody'] = ({
   setHeadComponents,
+  setBodyAttributes,
 }) => {
   setHeadComponents([<ThirdPartyScripts key="ThirdPartyScripts" />])
+  setBodyAttributes({
+    className: storeConfig.theme,
+  })
 }
 
 // Gatsby types the returned elements from `getHeadComponents` as

src/components/cart/CartSidebar/CartSidebar.stories.mdx

@@ -55,6 +55,12 @@ The `CartSidebar` displays the summary of items added to the cart along with det
 
 </header>
 
+## Overview
+
+Uses [SlideOver](?path=/docs/organisms-slideover--default-story) as base.
+
+---
+
 ## Usage
 
 `import CartSidebar from 'src/components/cart/CartSidebar'`

src/components/cart/CartToggle/cart-toggle.scss

@@ -19,7 +19,13 @@
     font-weight: var(--fs-text-weight-bold);
     color: var(--fs-color-text-inverse);
     content: attr(data-items);
-    background: var(--fs-color-primary-bkg);
+    background: var(--fs-color-link);
     border-radius: var(--fs-border-radius-pill);
+    box-shadow: 0 0 0 2px var(--fs-color-body-bkg);
+    transition: var(--fs-transition-property) var(--fs-transition-timing) var(--fs-transition-function);
+  }
+
+  &:hover, &:active, &:focus, &:focus-visible {
+    &::after { box-shadow: 0 0 0 2px var(--fs-color-tertiary-bkg-hover); }
   }
 }