diff --git a/.storybook/assets/index.css b/.storybook/assets/index.css
index 80ca8db098b..95b4d83897d 100644
--- a/.storybook/assets/index.css
+++ b/.storybook/assets/index.css
@@ -26,9 +26,6 @@ body {
font-family: var(--spectrum-font-family);
font-size: var(--spectrum-font-size);
font-style: var(--spectrum-font-style);
-
- color: var(--spectrum-neutral-content-color-default);
- background-color: var(--spectrum-background-layer-2-color);
}
body:lang(ar) {
@@ -72,15 +69,9 @@ div.sb-bar > div > div > span:first-child {
display: none;
}
-div.sb-bar > div > div > div > button {
- background-color: white !important;
-}
-
.docblock-argstable-body tr td {
letter-spacing: unset;
font-size: 11px;
- color: rgb(34, 34, 34);
- background-color: rgb(255, 255, 255);
}
.docblock-argstable-body td > span:has(select),
@@ -128,11 +119,4 @@ select:focus,
border-color: rgb(2, 101, 220) !important;
box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important;
}
-
-nav.sidebar-container,
-div.sb-bar {
- color: var(--spectrum-neutral-content-color-default) !important;
- background-color: var(--spectrum-background-layer-2-color) !important;
-}
-
/* stylelint-enable selector-class-pattern */
diff --git a/.storybook/decorators/utilities.js b/.storybook/decorators/utilities.js
index 444a4e2ff8d..396d9a1b320 100644
--- a/.storybook/decorators/utilities.js
+++ b/.storybook/decorators/utilities.js
@@ -331,10 +331,12 @@ export const ArgGrid = ({
export const Sizes = ({
withHeading = true,
withBorder = false,
+ withWrapperBorder = true,
...args
} = {}, context = {}) => {
return ArgGrid({
withBorder,
+ withWrapperBorder,
heading: withHeading ? "Sizing" : undefined,
argKey: "size",
labels: {
diff --git a/.storybook/manager.js b/.storybook/manager.js
index d3bc832002f..0dba49e4442 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -12,39 +12,54 @@ addons.setConfig({
theme: create({
base: "light",
- brandTitle: "Spectrum CSS",
+ brandTitle: "Adobe | Spectrum CSS",
brandUrl: pkg.homepage ?? "https://opensource.adobe.com/spectrum-css",
brandImage: logo,
+ brandTarget: "_self",
typography: {
fonts: {
- base: "adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif",
+ base: "adobe-clean, \"Adobe Clean\", \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif",
code: "\"Source Code Pro\", Monaco, monospace",
}
},
+ // colorPrimary: "#7326d3",
colorSecondary: "rgb(2, 101, 220)",
- // UI
- appBg:
- "rgb(255,255,255)" /* Being applied to the active state of radio buttons */,
- appContentBg: "rgb(255, 255, 255)" /* Being applied to the arg table */,
+ /* Being applied to the active state of radio buttons */
+ appBg: "rgb(255, 255, 255)",
+ /* Being applied to the arg table */
+ appContentBg: "rgb(255, 255, 255)",
+ // appPreviewBg: "rgb(248, 248, 248)",
appBorderColor: "rgb(213, 213, 213)",
appBorderRadius: 4,
- // Text colors
+ /* Text colors */
+ fontBase: "adobe-clean, \"Adobe Clean\", \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif",
+ fontCode: "\"Source Code Pro\", Monaco, monospace",
textColor: "rgb(34, 34, 34)",
+ textInverseColor: "rgb(219, 219, 219)",
+ textMutedColor: "rgb(175, 175, 175)",
- // Toolbar default and active colors
+ /* Toolbar default and active colors */
barTextColor: "rgb(34, 34, 34)",
+ barHoverColor: "rgb(2, 101, 220)",
barSelectedColor: "rgb(2, 101, 220)",
- // barBg: 'rgb(248, 248, 248)',
+ barBg: "rgb(255, 255, 255)",
- // Form colors
+ // buttonBg: "rgb(255, 255, 255)",
+ // buttonBorder: "transparent",
+ // booleanBg: "rgb(255, 255, 255)",
+ // booleanSelectedBg: "rgb(213, 213, 213)",
+
+ /* Form colors */
inputBg: "rgb(255, 255, 255)",
inputBorder: "rgb(177, 177, 177)",
inputTextColor: "rgb(34, 34, 34)",
inputBorderRadius: 4,
+
+ // gridCellSize?: number;
}),
sidebar: {
showRoots: false,
diff --git a/.storybook/modes/index.js b/.storybook/modes/index.js
index f1f305a18fd..a52ecc790e2 100644
--- a/.storybook/modes/index.js
+++ b/.storybook/modes/index.js
@@ -12,30 +12,30 @@
*/
const modes = {
- // "Context: Spectrum 2": {
- // scale: "medium",
- // color: "light",
- // textDirection: "ltr",
- // context: "spectrum",
- // },
+ "Context: Spectrum 2": {
+ scale: "medium",
+ color: "light",
+ textDirection: "ltr",
+ context: "spectrum",
+ },
"Context: Spectrum 1": {
scale: "medium",
color: "light",
textDirection: "ltr",
context: "legacy",
},
- // "Context: Express": {
- // scale: "medium",
- // color: "light",
- // textDirection: "ltr",
- // context: "express",
- // },
- // "Dark | RTL": {
- // scale: "medium",
- // color: "dark",
- // textDirection: "rtl",
- // context: "legacy",
- // },
+ "Context: Express": {
+ scale: "medium",
+ color: "light",
+ textDirection: "ltr",
+ context: "express",
+ },
+ "Dark | RTL": {
+ scale: "medium",
+ color: "dark",
+ textDirection: "rtl",
+ context: "legacy",
+ },
};
export default modes;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 73194fd52ed..b886455195a 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,3 +1,15 @@
+
+Adobe | Spectrum CSS
+
+${content}