diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index d20b4b1d540..894d00f5fa1 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -15,11 +15,7 @@ export const withContextWrapper = makeDecorator({ rootClass, staticColor, } = {}, - globals: { - color = "light", - context = "spectrum", - scale = "medium", - } = {}, + globals = {}, viewMode, id, loaded: { @@ -28,6 +24,10 @@ export const withContextWrapper = makeDecorator({ } = {} } = data; + let color = globals.color ?? "light"; + let context = globals.context ?? "spectrum"; + let scale = globals.scale ?? "medium"; + const staticColorSettings = { "black": { background: "var(--spectrum-docs-static-black-background-color)", @@ -84,7 +84,10 @@ export const withContextWrapper = makeDecorator({ toggleStyles(contextContainer, "vars-base-express", legacy?.express?.base, isExpress); } - for (const c of ["light", "dark"]) { + // Darkest is deprecated in Spectrum 2 + if (!isLegacy && color === "darkest") color = "dark"; + + for (let c of ["light", "dark", "darkest"]) { // Force light or dark mode if the static color is set const isColor = c === staticColorSettings[staticKey]?.color || !staticKey && c === color; diff --git a/.storybook/main.js b/.storybook/main.js index d2f8491e4e9..daddf6f0433 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,3 +1,5 @@ +import path from "node:path"; + export default { stories: [ { @@ -66,6 +68,7 @@ export default { css: { devSourcemap: configType === "DEVELOPMENT", }, + postcss: path.join(__dirname, "postcss.config.js"), }); }, framework: { diff --git a/.storybook/postcss.config.js b/.storybook/postcss.config.js new file mode 100644 index 00000000000..2c28fcbf93e --- /dev/null +++ b/.storybook/postcss.config.js @@ -0,0 +1,23 @@ +/*! + * 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 + * + * 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. + */ + +const rootConfig = require(__dirname, "../postcss.config"); + +console.log("👋"); +module.exports = (options) => rootConfig({ + skipMapping: true, + referencesOnly: false, + preserveVariables: false, + stripLocalSelectors: false, + ...options, +}); diff --git a/.storybook/types/global.js b/.storybook/types/global.js index c64333d03a9..2ea063d9497 100644 --- a/.storybook/types/global.js +++ b/.storybook/types/global.js @@ -27,6 +27,7 @@ export default { items: [ { value: "light", title: "Light", right: "default" }, { value: "dark", title: "Dark" }, + { value: "darkest", title: "Darkest", right: "deprecated" }, ], dynamicTitle: true, }, diff --git a/.vscode/settings.json b/.vscode/settings.json index 62d1f65e00b..998c67cf176 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -42,8 +42,8 @@ } ], "atlascode.jira.lastCreateSiteAndProject": { - "projectKey": "CSS", - "siteId": "jira.corp.adobe.com" + "siteId": "jira.corp.adobe.com", + "projectKey": "" }, "atlascode.jira.workingSite": { "baseUrlSuffix": "jira.corp.adobe.com" diff --git a/components/accordion/index.css b/components/accordion/index.css index 8510076a53b..01c16c64155 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -14,6 +14,12 @@ @import "themes/spectrum.css"; .spectrum-Accordion { + /** @note used for internal calculation on itemHeader and iconContainer */ + --spectrum-accordion-min-block-size: max( + var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), + calc(var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)))) + ); + display: block; margin: 0; padding: 0; diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 654b610373d..de33725d0e2 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -7,6 +7,8 @@ import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; +import "../themes/express.css"; +import "../themes/legacy.css"; export const AccordionItem = ({ heading, @@ -81,15 +83,6 @@ export const Template = ({ } = {}, context) => { const [, updateArgs] = useArgs(); - const { globals = {} } = context; - - if (globals.context === "express") { - import("../themes/express.css"); - } - else if (globals.context === "legacy") { - import("../themes/legacy.css"); - } - return html`