chore: run components through formatter

adobe · Jul 9, 2024 · e233a8c · e233a8c
1 parent 3347e4c
commit e233a8c
Show file tree

Hide file tree

Showing 62 changed files with 251 additions and 234 deletions.
diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js
@@ -84,8 +84,7 @@ export const withContextWrapper = makeDecorator({
  toggleStyles(contextContainer, "vars-base-express", legacy?.express?.base, isExpress);
  }
 
- // @todo note that darkest is being deprecated in the S2 system
- for (const c of ["light", "dark", "darkest"]) {
+ for (const c of ["light", "dark"]) {
  // Force light or dark mode if the static color is set
  const isColor = c === staticColorSettings[staticKey]?.color || !staticKey && c === color;
 

diff --git a/.storybook/types/global.js b/.storybook/types/global.js
@@ -27,7 +27,6 @@ export default {
  items: [
  { value: "light", title: "Light", right: "default" },
  { value: "dark", title: "Dark" },
- { value: "darkest", title: "Darkest" },
  ],
  dynamicTitle: true,
  },

diff --git a/components/accordion/stories/accordion.mdx b/components/accordion/stories/accordion.mdx
@@ -1,6 +1,6 @@
-import { Canvas, ArgTypes, Meta, Description, Title } from '@storybook/blocks';
+import { Canvas, ArgTypes, Meta, Description, Title } from "@storybook/blocks";
 
-import * as AccordionStories from './accordion.stories';
+import * as AccordionStories from "./accordion.stories";
 
 <Meta of={AccordionStories} title="Docs" />
 

diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json
@@ -28,18 +28,18 @@
  "@spectrum-css/icon": ">=7",
  "@spectrum-css/tokens": ">=14"
  },
+ "peerDependenciesMeta": {
+ "@spectrum-css/icon": {
+ "optional": true
+ }
+ },
  "devDependencies": {
  "@spectrum-css/button": "workspace:^",
  "@spectrum-css/closebutton": "workspace:^",
  "@spectrum-css/divider": "workspace:^",
  "@spectrum-css/icon": "workspace:^",
  "@spectrum-css/tokens": "workspace:^"
  },
- "peerDependenciesMeta": {
- "@spectrum-css/icon": {
- "optional": true
- }
- },
  "keywords": [
  "spectrum",
  "css",

diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json
@@ -29,14 +29,6 @@
  "@spectrum-css/tokens": ">=14",
  "@spectrum-css/underlay": ">=4"
  },
- "devDependencies": {
- "@spectrum-css/buttongroup": "workspace:^",
- "@spectrum-css/divider": "workspace:^",
- "@spectrum-css/icon": "workspace:^",
- "@spectrum-css/modal": "workspace:^",
- "@spectrum-css/tokens": "workspace:^",
- "@spectrum-css/underlay": "workspace:^"
- },
  "peerDependenciesMeta": {
  "@spectrum-css/buttongroup": {
  "optional": true
@@ -45,6 +37,14 @@
  "optional": true
  }
  },
+ "devDependencies": {
+ "@spectrum-css/buttongroup": "workspace:^",
+ "@spectrum-css/divider": "workspace:^",
+ "@spectrum-css/icon": "workspace:^",
+ "@spectrum-css/modal": "workspace:^",
+ "@spectrum-css/tokens": "workspace:^",
+ "@spectrum-css/underlay": "workspace:^"
+ },
  "keywords": [
  "spectrum",
  "css",

diff --git a/components/asset/stories/asset.mdx b/components/asset/stories/asset.mdx
@@ -1,6 +1,6 @@
-import { ArgTypes, Canvas, Meta, Description, Title } from '@storybook/blocks';
+import { ArgTypes, Canvas, Meta, Description, Title } from "@storybook/blocks";
 
-import * as AssetStories from './asset.stories';
+import * as AssetStories from "./asset.stories";
 
 <Meta of={AssetStories} title="Docs" />
 

diff --git a/components/assetcard/index.css b/components/assetcard/index.css
@@ -197,7 +197,7 @@
 
  border-radius: var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius));
 
- box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0, 0, 0, 15%);
+ box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgb(0 0 0 / 15%);
 
  transition: opacity var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;
 }

diff --git a/components/assetcard/package.json b/components/assetcard/package.json
@@ -25,15 +25,15 @@
  "@spectrum-css/checkbox": ">=9",
  "@spectrum-css/tokens": ">=14"
  },
- "devDependencies": {
- "@spectrum-css/checkbox": "workspace:^",
- "@spectrum-css/tokens": "workspace:^"
- },
  "peerDependenciesMeta": {
  "@spectrum-css/checkbox": {
  "optional": true
  }
  },
+ "devDependencies": {
+ "@spectrum-css/checkbox": "workspace:^",
+ "@spectrum-css/tokens": "workspace:^"
+ },
  "keywords": [
  "spectrum",
  "css",

diff --git a/components/assetcard/stories/assetcard.mdx b/components/assetcard/stories/assetcard.mdx
@@ -1,6 +1,6 @@
-import { ArgTypes, Canvas, Meta, Description, Title } from '@storybook/blocks';
+import { ArgTypes, Canvas, Meta, Description, Title } from "@storybook/blocks";
 
-import * as AssetCardStories from './assetcard.stories';
+import * as AssetCardStories from "./assetcard.stories";
 
 <Meta of={AssetCardStories} title="Docs" />
 

diff --git a/components/assetcard/themes/express.css b/components/assetcard/themes/express.css
@@ -13,7 +13,7 @@
 
 @container style(--system: express) {
  .spectrum-AssetCard {
- --spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 10%);
+ --spectrum-assetcard-overlay-background-color: rgb(27 127 245 / 10%);
 
  /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */
  --spectrum-assetcard-asset-size: 224px;

diff --git a/components/assetcard/themes/legacy.css b/components/assetcard/themes/legacy.css
@@ -13,7 +13,7 @@
 
 @container style(--system: legacy) {
  .spectrum-AssetCard {
- --spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 10%);
+ --spectrum-assetcard-overlay-background-color: rgb(27 127 245 / 10%);
 
  /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */
  --spectrum-assetcard-asset-size: 224px;

diff --git a/components/assetcard/themes/spectrum.css b/components/assetcard/themes/spectrum.css
@@ -13,7 +13,7 @@
 
 @container style(--system: spectrum) {
  .spectrum-AssetCard {
- --spectrum-assetcard-overlay-background-color: rgba(27, 127, 245, 10%);
+ --spectrum-assetcard-overlay-background-color: rgb(27 127 245 / 10%);
 
  /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */
  --spectrum-assetcard-asset-size: 224px;

diff --git a/components/assetlist/package.json b/components/assetlist/package.json
@@ -26,11 +26,6 @@
  "@spectrum-css/icon": ">=7",
  "@spectrum-css/tokens": ">=14"
  },
- "devDependencies": {
- "@spectrum-css/checkbox": "workspace:^",
- "@spectrum-css/icon": "workspace:^",
- "@spectrum-css/tokens": "workspace:^"
- },
  "peerDependenciesMeta": {
  "@spectrum-css/checkbox": {
  "optional": true
@@ -39,6 +34,11 @@
  "optional": true
  }
  },
+ "devDependencies": {
+ "@spectrum-css/checkbox": "workspace:^",
+ "@spectrum-css/icon": "workspace:^",
+ "@spectrum-css/tokens": "workspace:^"
+ },
  "keywords": [
  "spectrum",
  "css",

diff --git a/components/avatar/stories/avatar.mdx b/components/avatar/stories/avatar.mdx
@@ -1,6 +1,6 @@
-import { ArgTypes, Canvas, Meta, Description, Title } from '@storybook/blocks';
+import { ArgTypes, Canvas, Meta, Description, Title } from "@storybook/blocks";
 
-import * as AvatarStories from './avatar.stories';
+import * as AvatarStories from "./avatar.stories";
 
 <Meta of={AvatarStories} title="Docs" />
 

diff --git a/components/badge/package.json b/components/badge/package.json
@@ -25,15 +25,15 @@
  "@spectrum-css/icon": ">=7",
  "@spectrum-css/tokens": ">=14"
  },
- "devDependencies": {
- "@spectrum-css/icon": "workspace:^",
- "@spectrum-css/tokens": "workspace:^"
- },
  "peerDependenciesMeta": {
  "@spectrum-css/icon": {
  "optional": true
  }
  },
+ "devDependencies": {
+ "@spectrum-css/icon": "workspace:^",
+ "@spectrum-css/tokens": "workspace:^"
+ },
  "keywords": [
  "spectrum",
  "css",

diff --git a/components/badge/stories/badge.mdx b/components/badge/stories/badge.mdx
@@ -1,6 +1,6 @@
-import { ArgTypes, Canvas, Meta, Description, Title } from '@storybook/blocks';
+import { ArgTypes, Canvas, Meta, Description, Title } from "@storybook/blocks";
 
-import * as BadgeStories from './badge.stories';
+import * as BadgeStories from "./badge.stories";
 
 <Meta of={BadgeStories} title="Docs" />
 

diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json
@@ -26,11 +26,6 @@
  "@spectrum-css/icon": ">=7",
  "@spectrum-css/tokens": ">=14"
  },
- "devDependencies": {
- "@spectrum-css/actionbutton": "workspace:^",
- "@spectrum-css/icon": "workspace:^",
- "@spectrum-css/tokens": "workspace:^"
- },
  "peerDependenciesMeta": {
  "@spectrum-css/actionbutton": {
  "optional": true
@@ -39,6 +34,11 @@
  "optional": true
  }
  },
+ "devDependencies": {
+ "@spectrum-css/actionbutton": "workspace:^",
+ "@spectrum-css/icon": "workspace:^",
+ "@spectrum-css/tokens": "workspace:^"
+ },
  "keywords": [
  "spectrum",
  "css",

diff --git a/components/calendar/stories/calendar.mdx b/components/calendar/stories/calendar.mdx
@@ -1,6 +1,6 @@
-import { ArgTypes, Canvas, Meta, Description, Title } from '@storybook/blocks';
+import { ArgTypes, Canvas, Meta, Description, Title } from "@storybook/blocks";
 
-import * as CalendarStories from './calendar.stories';
+import * as CalendarStories from "./calendar.stories";
 
 <Meta of={CalendarStories} title="Docs" />
 

diff --git a/components/card/package.json b/components/card/package.json
@@ -30,14 +30,6 @@
  "@spectrum-css/tokens": ">=14",
  "@spectrum-css/typography": ">=6"
  },
- "devDependencies": {
- "@spectrum-css/actionbutton": "workspace:^",
- "@spectrum-css/asset": "workspace:^",
- "@spectrum-css/checkbox": "workspace:^",
- "@spectrum-css/icon": "workspace:^",
- "@spectrum-css/tokens": "workspace:^",
- "@spectrum-css/typography": "workspace:^"
- },
  "peerDependenciesMeta": {
  "@spectrum-css/actionbutton": {
  "optional": true
@@ -55,6 +47,14 @@
  "optional": true
  }
  },
+ "devDependencies": {
+ "@spectrum-css/actionbutton": "workspace:^",
+ "@spectrum-css/asset": "workspace:^",
+ "@spectrum-css/checkbox": "workspace:^",
+ "@spectrum-css/icon": "workspace:^",
+ "@spectrum-css/tokens": "workspace:^",
+ "@spectrum-css/typography": "workspace:^"
+ },
  "keywords": [
  "spectrum",
  "css",

diff --git a/components/card/stories/card.mdx b/components/card/stories/card.mdx
@@ -1,6 +1,6 @@
-import { ArgTypes, Canvas, Meta, Description, Title } from '@storybook/blocks';
+import { ArgTypes, Canvas, Meta, Description, Title } from "@storybook/blocks";
 
-import * as CardStories from './card.stories';
+import * as CardStories from "./card.stories";
 
 <Meta of={CardStories} title="Docs" />
 
@@ -48,11 +48,13 @@ import * as CardStories from './card.stories';
 <Canvas of={CardStories.Horizontal} />
 
 ## Asset preview
+
 A standard card with a full-sized asset preview.
 
 <Canvas of={CardStories.AssetPreview} />
 
 ## Gallery
+
 A gallery card for an image.
 
 <Canvas of={CardStories.Gallery} />

diff --git a/components/card/themes/spectrum.css b/components/card/themes/spectrum.css
@@ -83,10 +83,6 @@
  .spectrum--dark & {
  --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
  }
-
- .spectrum--darkest & {
- --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
- }
  }
 
  /* Quiet/Gallery */

diff --git a/components/coachmark/package.json b/components/coachmark/package.json
@@ -30,6 +30,11 @@
  "@spectrum-css/popover": ">=7",
  "@spectrum-css/tokens": ">=14"
  },
+ "peerDependenciesMeta": {
+ "@spectrum-css/button": {
+ "optional": true
+ }
+ },
  "devDependencies": {
  "@spectrum-css/actionbutton": "workspace:^",
  "@spectrum-css/actionmenu": "workspace:^",
@@ -39,11 +44,6 @@
  "@spectrum-css/popover": "workspace:^",
  "@spectrum-css/tokens": "workspace:^"
  },
- "peerDependenciesMeta": {
- "@spectrum-css/button": {
- "optional": true
- }
- },
  "keywords": [
  "spectrum",
  "css",

diff --git a/components/coachmark/stories/coachmark.mdx b/components/coachmark/stories/coachmark.mdx
@@ -1,6 +1,6 @@
-import { ArgTypes, Canvas, Meta, Description, Title } from '@storybook/blocks';
+import { ArgTypes, Canvas, Meta, Description, Title } from "@storybook/blocks";
 
-import * as CoachmarkStories from './coachmark.stories';
+import * as CoachmarkStories from "./coachmark.stories";
 
 <Meta of={CoachmarkStories} title="Docs" />
 

diff --git a/components/colorarea/stories/colorarea.mdx b/components/colorarea/stories/colorarea.mdx
@@ -1,6 +1,6 @@
-import { ArgTypes, Canvas, Meta, Description, Title } from '@storybook/blocks';
+import { ArgTypes, Canvas, Meta, Description, Title } from "@storybook/blocks";
 
-import * as ColorAreaStories from './colorarea.stories';
+import * as ColorAreaStories from "./colorarea.stories";
 
 <Meta of={ColorAreaStories} title="Docs" />
 

diff --git a/components/colorarea/themes/express.css b/components/colorarea/themes/express.css
@@ -14,7 +14,7 @@
 @container style(--system: express) {
  .spectrum-ColorArea {
  --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
- --spectrum-colorarea-border-color: rgba(0, 0, 0, 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
+ --spectrum-colorarea-border-color: rgb(0 0 0 / 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
  --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
  --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
  --spectrum-colorarea-height: var(--spectrum-color-area-height);

diff --git a/components/colorarea/themes/legacy.css b/components/colorarea/themes/legacy.css
@@ -14,7 +14,7 @@
 @container style(--system: legacy) {
  .spectrum-ColorArea {
  --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
- --spectrum-colorarea-border-color: rgba(0, 0, 0, 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
+ --spectrum-colorarea-border-color: rgb(0 0 0 / 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
  --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
  --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
  --spectrum-colorarea-height: var(--spectrum-color-area-height);

diff --git a/components/colorarea/themes/spectrum.css b/components/colorarea/themes/spectrum.css
@@ -14,7 +14,7 @@
 @container style(--system: spectrum) {
  .spectrum-ColorArea {
  --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding);
- --spectrum-colorarea-border-color: rgba(0, 0, 0, 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
+ --spectrum-colorarea-border-color: rgb(0 0 0 / 10%); /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */
  --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
  --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
  --spectrum-colorarea-height: var(--spectrum-color-area-height);