feat: support nested variable references in system mappings

adobe · Jul 9, 2024 · 8142be9 · 8142be9
1 parent 40ac835
commit 8142be9
Show file tree

Hide file tree

Showing 729 changed files with 29,918 additions and 29,413 deletions.
diff --git 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
@@ -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
@@ -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 <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.
+ */
+
+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
@@ -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
@@ -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
@@ -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
@@ -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`
  <div
  class="${classMap({

diff --git a/components/accordion/themes/express.css b/components/accordion/themes/express.css
@@ -65,10 +65,6 @@
 
  /* Divider */
  --spectrum-accordion-divider-color: var(--spectrum-gray-200);
- --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))))
- );
 
  &:dir(rtl) {
  --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);

diff --git a/components/accordion/themes/legacy.css b/components/accordion/themes/legacy.css
@@ -65,10 +65,6 @@
 
  /* Divider */
  --spectrum-accordion-divider-color: var(--spectrum-gray-200);
- --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))))
- );
 
  &:dir(rtl) {
  --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);

diff --git a/components/accordion/themes/spectrum.css b/components/accordion/themes/spectrum.css
@@ -65,10 +65,6 @@
 
  /* Divider */
  --spectrum-accordion-divider-color: var(--spectrum-gray-200);
- --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))))
- );
 
  &:dir(rtl) {
  --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);

diff --git a/components/actionbar/index.css b/components/actionbar/index.css
@@ -28,25 +28,52 @@
 
 /* ActionBar is outer wrapper with nested popover component within */
 .spectrum-ActionBar {
+ /** @passthrough CloseButton */
+ --mod-closebutton-margin-block-start: var(--mod-actionbar-spacing-close-button-top, var(--spectrum-actionbar-spacing-close-button-top));
+ --mod-closebutton-margin-inline-start: var(--mod-actionbar-spacing-close-button-start, var(--spectrum-actionbar-spacing-close-button-start));
+ --mod-closebutton-margin-inline-end: var(--mod-actionbar-spacing-close-button-end, var(--spectrum-actionbar-spacing-close-button-end));
+ --mod-closebutton-flex-shrink: 0;
+
+ /** @passthrough FieldLabel */
+ /* neutralize padding for correct spacing within ActionBar */
+ --mod-field-label-top-to-text: 0;
+ --mod-field-label-bottom-to-text: 0;
+ --mod-fieldlabel-font-size: var(--mod-actionbar-item-counter-font-size, var(--spectrum-actionbar-item-counter-font-size));
+ --mod-fieldlabel-line-height: var(--mod-actionbar-item-counter-line-height, var(--spectrum-actionbar-item-counter-line-height));
+ --mod-fieldlabel-line-height-cjk: var(--mod-actionbar-item-counter-line-height-cjk, var(--spectrum-actionbar-item-counter-line-height-cjk));
+ --mod-fieldlabel-color: var(--mod-actionbar-item-counter-color, var(--spectrum-actionbar-item-counter-color));
+ --mod-fieldlabel-margin-block-start: var(--mod-actionbar-spacing-item-counter-top, var(--spectrum-actionbar-spacing-item-counter-top));
+ --mod-fieldlabel-margin-inline-end: var(--mod-actionbar-spacing-item-counter-end, var(--spectrum-actionbar-spacing-item-counter-end));
+
+ /** @passthrough ActionGroup */
+ /* align to end by default */
+ --mod-actiongroup-margin-block-start: var(--mod-actionbar-spacing-action-group-top, var(--spectrum-actionbar-spacing-action-group-top));
+ --mod-actiongroup-margin-inline-start: auto;
+ --mod-actiongroup-margin-inline-end: var(--mod-actionbar-spacing-action-group-end, var(--spectrum-actionbar-spacing-action-group-end));
+
  /* Let clicks in blank space fall through */
  pointer-events: none;
+
+ position: var(--mod-actionbar-position);
  z-index: 1;
  inset-block-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
 
  /* Account for fixed width */
  box-sizing: border-box;
 
  /* Take up no space and be invisible when not open */
- block-size: 0;
+ block-size: var(--mod-actionbar-block-size, 0);
 
  /* creates horizontal spacing to edge */
  padding: 0 var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge));
- opacity: 0;
+ opacity: var(--mod-actionbar-opacity, 0);
 
  &.is-open {
  /* add ActionBar bottom margin to height for correct spacing even when sticky */
- block-size: calc(var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge)) + var(--mod-actionbar-height, var(--spectrum-actionbar-height)));
- opacity: 1;
+ --mod-actionbar-block-size: calc(var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge)) + var(--mod-actionbar-height, var(--spectrum-actionbar-height)));
+ --mod-actionbar-opacity: 1;
  }
 
  .spectrum-ActionBar-popover {
@@ -59,8 +86,9 @@
  /* inner layout of content items */
  display: flex;
  flex-direction: row;
+
  box-sizing: border-box;
- inline-size: 100%;
+ inline-size: var(--mod-actionbar-popover-inline-size, 100%);
 
  /* popover is ActionBar height */
  block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height));
@@ -69,78 +97,33 @@
  padding-block-end: 0;
  background-color: var(--mod-actionbar-popover-background-color, var(--spectrum-actionbar-popover-background-color));
 
- filter: drop-shadow(var(--mod-actionbar-shadow-horizontal, var(--spectrum-actionbar-shadow-horizontal)) var(--mod-actionbar-shadow-vertical, var(--spectrum-actionbar-shadow-vertical)) var(--mod-actionbar-shadow-blur, var(--spectrum-actionbar-shadow-blur)) var(--mod-actionbar-shadow-color, var(--spectrum-actionbar-shadow-color)));
+ filter: var(--mod-actionbar-popover-filter, drop-shadow(var(--mod-actionbar-shadow-horizontal, var(--spectrum-actionbar-shadow-horizontal)) var(--mod-actionbar-shadow-vertical, var(--spectrum-actionbar-shadow-vertical)) var(--mod-actionbar-shadow-blur, var(--spectrum-actionbar-shadow-blur)) var(--mod-actionbar-shadow-color, var(--spectrum-actionbar-shadow-color))));
  border-color: var(--highcontrast-actionbar-popover-border-color, var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color)));
 
  border-radius: var(--mod-actionbar-corner-radius, var(--spectrum-actionbar-corner-radius));
  }
-
- /* close button */
- .spectrum-CloseButton {
- flex-shrink: 0;
- margin-block-start: var(--mod-actionbar-spacing-close-button-top, var(--spectrum-actionbar-spacing-close-button-top));
- margin-inline-start: var(--mod-actionbar-spacing-close-button-start, var(--spectrum-actionbar-spacing-close-button-start));
- margin-inline-end: var(--mod-actionbar-spacing-close-button-end, var(--spectrum-actionbar-spacing-close-button-end));
- }
-
- /* item counter */
- .spectrum-FieldLabel {
- margin-block-start: var(--mod-actionbar-spacing-item-counter-top, var(--spectrum-actionbar-spacing-item-counter-top));
- margin-inline-end: var(--mod-actionbar-spacing-item-counter-end, var(--spectrum-actionbar-spacing-item-counter-end));
-
- /* neutralize padding for correct spacing within ActionBar */
- padding: 0;
-
- font-size: var(--mod-actionbar-item-counter-font-size, var(--spectrum-actionbar-item-counter-font-size));
- line-height: var(--mod-actionbar-item-counter-line-height, var(--spectrum-actionbar-item-counter-line-height));
- color: var(--mod-actionbar-item-counter-color, var(--spectrum-actionbar-item-counter-color));
-
- /* cjk language support */
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- line-height: var(--mod-actionbar-item-counter-line-height-cjk, var(--spectrum-actionbar-item-counter-line-height-cjk));
- }
- }
-
- /* action group */
- .spectrum-ActionGroup {
- margin-block-start: var(--mod-actionbar-spacing-action-group-top, var(--spectrum-actionbar-spacing-action-group-top));
-
- /* align to end by default */
- margin-inline-start: auto;
- margin-inline-end: var(--mod-actionbar-spacing-action-group-end, var(--spectrum-actionbar-spacing-action-group-end));
- }
 }
 
 .spectrum-ActionBar--emphasized {
- .spectrum-ActionBar-popover {
- background-color: var(--mod-actionbar-emphasized-background-color, var(--spectrum-actionbar-emphasized-background-color));
- filter: none;
+ --mod-actionbar-popover-background-color: var(--mod-actionbar-emphasized-background-color, var(--spectrum-actionbar-emphasized-background-color));
+ --mod-actionbar-popover-filter: none;
 
- /* border transparent instead of none so WHCM will have visible border */
- border-color: transparent;
- }
+ /* border transparent instead of none so WHCM will have visible border */
+ --mod-actionbar-popover-border-color: transparent;
 
  /* ensure text is legible on emphasized background */
- .spectrum-FieldLabel {
- color: var(--mod-actionbar-emphasized-item-counter-color, var(--spectrum-actionbar-emphasized-item-counter-color));
- }
+ --mod-fieldlabel-color: var(--mod-actionbar-emphasized-item-counter-color, var(--spectrum-actionbar-emphasized-item-counter-color));
 }
 
 .spectrum-ActionBar--sticky {
- position: sticky;
- inset-inline-start: 0;
- inset-inline-end: 0;
+ --mod-actionbar-position: sticky;
 }
 
 .spectrum-ActionBar--fixed {
- position: fixed;
+ --mod-actionbar-position: fixed;
 }
 
 /* flexible width */
 .spectrum-ActionBar--flexible {
- .spectrum-ActionBar-popover {
- inline-size: auto;
- }
+ --mod-actionbar-popover-inline-size: auto;
 }
diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js
@@ -7,6 +7,8 @@ import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
+import "../themes/express.css";
+import "../themes/legacy.css";
 
 export const Template = ({
  rootClass = "spectrum-ActionBar",
@@ -18,15 +20,6 @@ export const Template = ({
  isFlexible = false,
  customClasses = [],
 } = {}, context) => {
- const { globals = {} } = context;
-
- if (globals.context === "express") {
- import("../themes/express.css");
- }
- else if (globals.context === "legacy") {
- import("../themes/legacy.css");
- }
-
  return html`
  <div
  class=${classMap({