chore(storybook): add custom styling and upgrade static color

.circleci/config.yml

@@ -231,7 +231,7 @@ jobs:
                   command: yarn docs:analyze
             - run:
                   name: Move CEM to Storybook directory
-                  command: cp projects/documentation/custom-elements.json storybook/
+                  command: cp projects/documentation/custom-elements.json .storybook/
             - run:
                   name: Build documentation
                   command: yarn docs:build
@@ -254,7 +254,7 @@ jobs:
                   command: yarn docs:analyze
             - run:
                   name: Move CEM to Storybook directory
-                  command: cp projects/documentation/custom-elements.json storybook/
+                  command: cp projects/documentation/custom-elements.json .storybook/
             - run:
                   name: Build documentation
                   command: yarn docs:build

.github/workflows/chromatic-vrt.yml

@@ -39,7 +39,7 @@ jobs:
               run: yarn docs:analyze
 
             - name: Move CEM to Storybook directory
-              run: cp projects/documentation/custom-elements.json storybook/
+              run: cp projects/documentation/custom-elements.json .storybook/
 
             - name: Publish to Chromatic
               id: chromatic

.github/workflows/publish.yml

@@ -23,7 +23,7 @@ jobs:
               run: yarn docs:analyze
 
             - name: Move CEM to Storybook directory
-              run: cp projects/documentation/custom-elements.json storybook/
+              run: cp projects/documentation/custom-elements.json .storybook/
 
             - name: Build documentation
               run: yarn docs:production

storybook/DocumentationTemplate.mdx → .storybook/DocumentationTemplate.mdx

@@ -1,8 +1,18 @@
-import { Meta, Title, Primary, Controls, Stories } from '@storybook/blocks';
+import {
+    Meta,
+    Title,
+    Subtitle,
+    Description,
+    Primary,
+    ArgTypes,
+    Stories,
+} from '@storybook/blocks';
 
 <Meta isTemplate />
 
 <Title />
+<Subtitle />
+<Description />
 
 # Default implementation
 
@@ -12,7 +22,7 @@ import { Meta, Title, Primary, Controls, Stories } from '@storybook/blocks';
 
 The component accepts the following inputs (props):
 
-<Controls />
+<ArgTypes />
 
 ---
 

.storybook/assets/base.css

@@ -0,0 +1,269 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+:root {
+    --spectrum-font-family: var(
+        --spectrum-sans-font-family-stack,
+        adobe-clean,
+        'Adobe Clean',
+        'Source Sans Pro',
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        Ubuntu,
+        'Trebuchet MS',
+        'Lucida Grande',
+        sans-serif
+    );
+    --spectrum-font-style: var(--spectrum-default-font-style, normal);
+    --spectrum-font-size: var(--spectrum-font-size-100, 14px);
+    --spectrum-gray-100: light-dark(rgb(248 248 248), rgb(34 34 34));
+    --spectrum-gray-800: light-dark(rgb(34 34 34), rgb(255 255 255));
+
+    /* Gradient that changes with the color theme. */
+    --spectrum-examples-gradient: linear-gradient(
+        45deg,
+        var(
+            --spectrum-magenta-300,
+            light-dark(rgb(255, 213, 227), rgb(93, 0, 34))
+        ),
+        var(
+            --spectrum-blue-300,
+            light-dark(rgb(203, 226, 254), rgb(12, 33, 117))
+        )
+    );
+
+    /* Gradients that do not change with the color theme, for use in static color backgrounds. */
+    --spectrum-examples-gradient-static-black: linear-gradient(
+        45deg,
+        rgb(255 241 246),
+        rgb(238 245 255)
+    );
+    --spectrum-examples-gradient-static-white: linear-gradient(
+        45deg,
+        rgb(64 0 22),
+        rgb(14 24 67)
+    );
+}
+
+body {
+    --mod-story-decorator-background: var(
+        --spectrum-gray-50,
+        light-dark(white, rgb(27 27 27))
+    );
+
+    color-scheme: light dark;
+    margin: 0;
+    font-family: var(--spectrum-font-family);
+    font-size: var(--spectrum-font-size);
+    font-style: var(--spectrum-font-style);
+    background: var(--spectrum-gray-100);
+    color: var(--spectrum-gray-800);
+    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+}
+
+body:has([static-color='black']) {
+    --mod-story-decorator-background: var(
+        --spectrum-examples-gradient-static-black
+    );
+}
+
+body:has([static-color='white']) {
+    --mod-story-decorator-background: var(
+        --spectrum-examples-gradient-static-white
+    );
+}
+
+body .docs-story {
+    background: var(--mod-story-decorator-background) !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+li,
+dl {
+    font-family: var(--spectrum-sans-font-family-stack);
+    font-style: var(--spectrum-default-font-style);
+    color: var(--spectrum-gray-800);
+}
+
+/* Hide the SVG elements that only include references */
+svg:has(symbol):not(:has(use)) {
+    display: none;
+}
+
+/* --- DOCS STYLES --- */
+.docs-story > *:first-child {
+    overflow: hidden;
+}
+
+.sb-story {
+    /* Prevent inline stories in the Docs from cutting off content (which is different than the regular
+	story view), due to Storybook's inline style that sets overflow: auto */
+    overflow: visible !important;
+}
+
+main > div:not(.sb-bar) {
+    --app-corner-radius: 16px;
+    --border-width: calc(var(--app-corner-radius) / 2);
+
+    border-top-left-radius: var(--app-corner-radius);
+    border: var(--border-width) solid var(--spectrum-gray-100) !important;
+    border-right-width: 0 !important;
+    border-bottom-width: 0 !important;
+    margin-block-start: calc(var(--border-width) * -1);
+    margin-inline-start: calc(var(--border-width) * -1);
+    width: auto;
+}
+
+.sidebar-header > div {
+    margin-right: 0;
+}
+
+.sidebar-header > div > a {
+    display: inline-flex;
+    gap: 8px;
+}
+
+.sidebar-header > div > a > img {
+    display: inline-block;
+    block-size: 48px;
+    inline-size: 54px;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.sidebar-header > div > a:after {
+    flex-grow: 1;
+    content: 'Spectrum Web Components';
+    display: inline-block;
+    width: 100px;
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--spectrum-gray-800);
+}
+
+.docblock-argstable-body tr td {
+    letter-spacing: unset;
+    font-size: 11px;
+}
+
+.docblock-argstable-body td > span:has(select),
+.docblock-argstable-body td textarea {
+    max-inline-size: 192px !important;
+}
+
+div[role='combobox'] {
+    background-color: white !important;
+    border-radius: 16px;
+}
+
+.sidebar-subheading,
+button.sidebar-item {
+    color: var(--spectrum-gray-800);
+    font-size: 14px;
+    font-weight: 700;
+}
+
+button[data-action='collapse-root'] {
+    font-family: var(--spectrum-sans-font-family-stack);
+    font-style: var(--spectrum-detail-sans-serif-font-style);
+    font-weight: var(--spectrum-detail-sans-serif-font-weight);
+    font-size: var(--spectrum-detail-size-m);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    color: var(--spectrum-detail-color);
+    line-height: var(--spectrum-detail-line-height);
+    letter-spacing: var(--spectrum-detail-letter-spacing);
+    text-transform: uppercase;
+}
+
+.sidebar-item {
+    padding-block: 4px;
+}
+
+input,
+textarea,
+select {
+    border-radius: 4px !important;
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+#storybook-explorer-searchfield:focus {
+    border-color: rgb(2 101 220) !important;
+    box-shadow: rgb(2 101 220) 0 0 0 1px inset !important;
+}
+
+nav.sidebar-container,
+.sb-bar {
+    color: var(--spectrum-gray-800) !important;
+    background: var(--spectrum-gray-100) !important;
+}
+
+.sbdocs.sbdocs-wrapper {
+    background: transparent !important;
+}
+
+.sbdocs.sbdocs-preview,
+main > .sb-bar {
+    box-shadow: none !important;
+}
+
+.docblock-argstable-body {
+    filter: none !important;
+}
+
+#root > div > div:has(.sidebar-container) {
+    border-right-color: transparent !important;
+}
+
+.docblock-argstable {
+    color-scheme: light;
+}
+
+.docblock-argstable-head th span {
+    font-size: 14px;
+    font-weight: var(--spectrum-table-header-font-weight, 700);
+    color: var(--spectrum-gray-800);
+}
+
+.docblock-argstable-body tr[title]:has(button) td {
+    background-color: var(--spectrum-gray-100) !important;
+}
+
+.docblock-argstable-body tr[title]:has(button) span {
+    color: var(--spectrum-gray-800);
+    text-transform: capitalize;
+    font-weight: 400;
+    font-size: 14px;
+}
+
+#storybook-docs {
+    color-scheme: light;
+
+    code {
+        border-radius: 4px !important;
+        font-size: inherit !important;
+        border: 1px solid rgb(225 225 225);
+        color: var(--spectrum-gray-800);
+        background-color: var(--spectrum-gray-100);
+    }
+}