+
+
+ ${this.renderIcon(this.variant)}
+
+
+ ${this.dismissible
+ ? html`
+
+ `;
+ }
+}
diff --git a/packages/alert-banner/src/alert-banner-overrides.css b/first-gen/packages/alert-banner/src/alert-banner-overrides.css
similarity index 100%
rename from packages/alert-banner/src/alert-banner-overrides.css
rename to first-gen/packages/alert-banner/src/alert-banner-overrides.css
diff --git a/packages/alert-banner/src/alert-banner.css b/first-gen/packages/alert-banner/src/alert-banner.css
similarity index 100%
rename from packages/alert-banner/src/alert-banner.css
rename to first-gen/packages/alert-banner/src/alert-banner.css
diff --git a/packages/alert-banner/src/index.ts b/first-gen/packages/alert-banner/src/index.ts
similarity index 100%
rename from packages/alert-banner/src/index.ts
rename to first-gen/packages/alert-banner/src/index.ts
diff --git a/packages/alert-banner/src/spectrum-alert-banner.css b/first-gen/packages/alert-banner/src/spectrum-alert-banner.css
similarity index 100%
rename from packages/alert-banner/src/spectrum-alert-banner.css
rename to first-gen/packages/alert-banner/src/spectrum-alert-banner.css
diff --git a/packages/alert-banner/stories/alert-banner.stories.ts b/first-gen/packages/alert-banner/stories/alert-banner.stories.ts
similarity index 100%
rename from packages/alert-banner/stories/alert-banner.stories.ts
rename to first-gen/packages/alert-banner/stories/alert-banner.stories.ts
diff --git a/packages/alert-banner/stories/args.ts b/first-gen/packages/alert-banner/stories/args.ts
similarity index 100%
rename from packages/alert-banner/stories/args.ts
rename to first-gen/packages/alert-banner/stories/args.ts
diff --git a/packages/alert-banner/stories/index.ts b/first-gen/packages/alert-banner/stories/index.ts
similarity index 100%
rename from packages/alert-banner/stories/index.ts
rename to first-gen/packages/alert-banner/stories/index.ts
diff --git a/packages/alert-banner/stories/template.ts b/first-gen/packages/alert-banner/stories/template.ts
similarity index 100%
rename from packages/alert-banner/stories/template.ts
rename to first-gen/packages/alert-banner/stories/template.ts
diff --git a/packages/alert-banner/test/alert-banner-memory.test.ts b/first-gen/packages/alert-banner/test/alert-banner-memory.test.ts
similarity index 100%
rename from packages/alert-banner/test/alert-banner-memory.test.ts
rename to first-gen/packages/alert-banner/test/alert-banner-memory.test.ts
diff --git a/packages/alert-banner/test/alert-banner.test.ts b/first-gen/packages/alert-banner/test/alert-banner.test.ts
similarity index 100%
rename from packages/alert-banner/test/alert-banner.test.ts
rename to first-gen/packages/alert-banner/test/alert-banner.test.ts
diff --git a/packages/alert-banner/test/benchmark/basic-test.ts b/first-gen/packages/alert-banner/test/benchmark/basic-test.ts
similarity index 100%
rename from packages/alert-banner/test/benchmark/basic-test.ts
rename to first-gen/packages/alert-banner/test/benchmark/basic-test.ts
diff --git a/packages/alert-banner/tsconfig.json b/first-gen/packages/alert-banner/tsconfig.json
similarity index 100%
rename from packages/alert-banner/tsconfig.json
rename to first-gen/packages/alert-banner/tsconfig.json
diff --git a/packages/alert-dialog/.npmignore b/first-gen/packages/alert-dialog/.npmignore
similarity index 100%
rename from packages/alert-dialog/.npmignore
rename to first-gen/packages/alert-dialog/.npmignore
diff --git a/packages/alert-dialog/.npmrc b/first-gen/packages/alert-dialog/.npmrc
similarity index 100%
rename from packages/alert-dialog/.npmrc
rename to first-gen/packages/alert-dialog/.npmrc
diff --git a/packages/alert-dialog/CHANGELOG.md b/first-gen/packages/alert-dialog/CHANGELOG.md
similarity index 100%
rename from packages/alert-dialog/CHANGELOG.md
rename to first-gen/packages/alert-dialog/CHANGELOG.md
diff --git a/packages/alert-dialog/README.md b/first-gen/packages/alert-dialog/README.md
similarity index 100%
rename from packages/alert-dialog/README.md
rename to first-gen/packages/alert-dialog/README.md
diff --git a/packages/alert-dialog/package.json b/first-gen/packages/alert-dialog/package.json
similarity index 97%
rename from packages/alert-dialog/package.json
rename to first-gen/packages/alert-dialog/package.json
index f0ad1ba0717..f54242868c3 100644
--- a/packages/alert-dialog/package.json
+++ b/first-gen/packages/alert-dialog/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/alert-dialog"
+ "directory": "first-gen/packages/alert-dialog"
},
"author": "Adobe",
"homepage": "https://adobe.github.io/spectrum-web-components/components/alert-dialog",
diff --git a/packages/alert-dialog/sp-alert-dialog.ts b/first-gen/packages/alert-dialog/sp-alert-dialog.ts
similarity index 100%
rename from packages/alert-dialog/sp-alert-dialog.ts
rename to first-gen/packages/alert-dialog/sp-alert-dialog.ts
diff --git a/packages/alert-dialog/src/AlertDialog.ts b/first-gen/packages/alert-dialog/src/AlertDialog.ts
similarity index 100%
rename from packages/alert-dialog/src/AlertDialog.ts
rename to first-gen/packages/alert-dialog/src/AlertDialog.ts
diff --git a/first-gen/packages/alert-dialog/src/alert-dialog-overrides.css b/first-gen/packages/alert-dialog/src/alert-dialog-overrides.css
new file mode 100644
index 00000000000..695efb61689
--- /dev/null
+++ b/first-gen/packages/alert-dialog/src/alert-dialog-overrides.css
@@ -0,0 +1,29 @@
+/*!
+ * Copyright 2025 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./
+ *
+ * Override divider background color when used inside alert-dialog/
+ * .divider {
+ * --spectrum-divider-background-color: var(--system-alert-dialog-divider-background-color);
+ * --spectrum-divider-background-color-static-white: var(--spectrum-alert-dialog-divider-background-color-static-white);
+ * --spectrum-divider-background-color-static-black: var(--spectrum-alert-dialog-divider-background-color-static-black);
+ * }
+ */
+
+/**
+ * Copyright 2025 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.
+ */
+
+/* Override divider background color when used inside alert-dialog */
+.divider {
+ --spectrum-divider-background-color: var(--system-alert-dialog-divider-background-color);
+ --spectrum-divider-background-color-static-white: var(--spectrum-alert-dialog-divider-background-color-static-white);
+ --spectrum-divider-background-color-static-black: var(--spectrum-alert-dialog-divider-background-color-static-black);
+}
diff --git a/packages/alert-dialog/src/alert-dialog.css b/first-gen/packages/alert-dialog/src/alert-dialog.css
similarity index 100%
rename from packages/alert-dialog/src/alert-dialog.css
rename to first-gen/packages/alert-dialog/src/alert-dialog.css
diff --git a/packages/alert-dialog/src/index.ts b/first-gen/packages/alert-dialog/src/index.ts
similarity index 100%
rename from packages/alert-dialog/src/index.ts
rename to first-gen/packages/alert-dialog/src/index.ts
diff --git a/packages/alert-dialog/src/spectrum-alert-dialog.css b/first-gen/packages/alert-dialog/src/spectrum-alert-dialog.css
similarity index 100%
rename from packages/alert-dialog/src/spectrum-alert-dialog.css
rename to first-gen/packages/alert-dialog/src/spectrum-alert-dialog.css
diff --git a/packages/alert-dialog/stories/alert-dialog.stories.ts b/first-gen/packages/alert-dialog/stories/alert-dialog.stories.ts
similarity index 100%
rename from packages/alert-dialog/stories/alert-dialog.stories.ts
rename to first-gen/packages/alert-dialog/stories/alert-dialog.stories.ts
diff --git a/packages/alert-dialog/test/alert-dialog-memory.test.ts b/first-gen/packages/alert-dialog/test/alert-dialog-memory.test.ts
similarity index 100%
rename from packages/alert-dialog/test/alert-dialog-memory.test.ts
rename to first-gen/packages/alert-dialog/test/alert-dialog-memory.test.ts
diff --git a/packages/alert-dialog/test/alert-dialog.test.ts b/first-gen/packages/alert-dialog/test/alert-dialog.test.ts
similarity index 100%
rename from packages/alert-dialog/test/alert-dialog.test.ts
rename to first-gen/packages/alert-dialog/test/alert-dialog.test.ts
diff --git a/packages/alert-dialog/test/benchmark/basic-test.ts b/first-gen/packages/alert-dialog/test/benchmark/basic-test.ts
similarity index 100%
rename from packages/alert-dialog/test/benchmark/basic-test.ts
rename to first-gen/packages/alert-dialog/test/benchmark/basic-test.ts
diff --git a/packages/alert-dialog/tsconfig.json b/first-gen/packages/alert-dialog/tsconfig.json
similarity index 100%
rename from packages/alert-dialog/tsconfig.json
rename to first-gen/packages/alert-dialog/tsconfig.json
diff --git a/packages/asset/.npmrc b/first-gen/packages/asset/.npmrc
similarity index 100%
rename from packages/asset/.npmrc
rename to first-gen/packages/asset/.npmrc
diff --git a/packages/asset/CHANGELOG.md b/first-gen/packages/asset/CHANGELOG.md
similarity index 100%
rename from packages/asset/CHANGELOG.md
rename to first-gen/packages/asset/CHANGELOG.md
diff --git a/packages/asset/README.md b/first-gen/packages/asset/README.md
similarity index 100%
rename from packages/asset/README.md
rename to first-gen/packages/asset/README.md
diff --git a/packages/asset/package.json b/first-gen/packages/asset/package.json
similarity index 91%
rename from packages/asset/package.json
rename to first-gen/packages/asset/package.json
index d7c180e9bfd..73ad3dbf9fb 100644
--- a/packages/asset/package.json
+++ b/first-gen/packages/asset/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/asset"
+ "directory": "first-gen/packages/asset"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/asset",
@@ -25,6 +25,10 @@
"default": "./src/index.js"
},
"./package.json": "./package.json",
+ "./src/Asset.base.ts": {
+ "development": "./src/Asset.base.dev.ts",
+ "default": "./src/Asset.base.ts"
+ },
"./src/Asset.js": {
"development": "./src/Asset.dev.js",
"default": "./src/Asset.js"
diff --git a/packages/asset/sp-asset.ts b/first-gen/packages/asset/sp-asset.ts
similarity index 100%
rename from packages/asset/sp-asset.ts
rename to first-gen/packages/asset/sp-asset.ts
diff --git a/packages/asset/src/Asset.ts b/first-gen/packages/asset/src/Asset.ts
similarity index 90%
rename from packages/asset/src/Asset.ts
rename to first-gen/packages/asset/src/Asset.ts
index 1c30821a259..38e135479a1 100644
--- a/packages/asset/src/Asset.ts
+++ b/first-gen/packages/asset/src/Asset.ts
@@ -13,11 +13,10 @@
import {
CSSResultArray,
html,
- SpectrumElement,
TemplateResult,
} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
+import { AssetBase } from '@swc/core/components/asset';
import styles from './asset.css.js';
const file = (label: string): TemplateResult => html`
@@ -60,17 +59,11 @@ const folder = (label: string): TemplateResult => html`
* @element sp-asset
* @slot - content to be displayed in the asset when an acceptable value for `file` is not present
*/
-export class Asset extends SpectrumElement {
+export class Asset extends AssetBase {
public static override get styles(): CSSResultArray {
return [styles];
}
- @property({ type: String, reflect: true })
- public variant: 'file' | 'folder' | undefined;
-
- @property()
- public label = '';
-
protected override render(): TemplateResult {
if (this.variant === 'file') {
return file(this.label);
diff --git a/packages/asset/src/asset-overrides.css b/first-gen/packages/asset/src/asset-overrides.css
similarity index 100%
rename from packages/asset/src/asset-overrides.css
rename to first-gen/packages/asset/src/asset-overrides.css
diff --git a/packages/asset/src/asset.css b/first-gen/packages/asset/src/asset.css
similarity index 100%
rename from packages/asset/src/asset.css
rename to first-gen/packages/asset/src/asset.css
diff --git a/packages/asset/src/index.ts b/first-gen/packages/asset/src/index.ts
similarity index 100%
rename from packages/asset/src/index.ts
rename to first-gen/packages/asset/src/index.ts
diff --git a/packages/asset/src/spectrum-asset.css b/first-gen/packages/asset/src/spectrum-asset.css
similarity index 100%
rename from packages/asset/src/spectrum-asset.css
rename to first-gen/packages/asset/src/spectrum-asset.css
diff --git a/packages/asset/stories/asset.stories.ts b/first-gen/packages/asset/stories/asset.stories.ts
similarity index 100%
rename from packages/asset/stories/asset.stories.ts
rename to first-gen/packages/asset/stories/asset.stories.ts
diff --git a/packages/asset/test/asset-memory.test.ts b/first-gen/packages/asset/test/asset-memory.test.ts
similarity index 100%
rename from packages/asset/test/asset-memory.test.ts
rename to first-gen/packages/asset/test/asset-memory.test.ts
diff --git a/packages/asset/test/asset.test.ts b/first-gen/packages/asset/test/asset.test.ts
similarity index 100%
rename from packages/asset/test/asset.test.ts
rename to first-gen/packages/asset/test/asset.test.ts
diff --git a/packages/asset/test/benchmark/basic-test.ts b/first-gen/packages/asset/test/benchmark/basic-test.ts
similarity index 100%
rename from packages/asset/test/benchmark/basic-test.ts
rename to first-gen/packages/asset/test/benchmark/basic-test.ts
diff --git a/packages/asset/tsconfig.json b/first-gen/packages/asset/tsconfig.json
similarity index 100%
rename from packages/asset/tsconfig.json
rename to first-gen/packages/asset/tsconfig.json
diff --git a/packages/avatar/.npmrc b/first-gen/packages/avatar/.npmrc
similarity index 100%
rename from packages/avatar/.npmrc
rename to first-gen/packages/avatar/.npmrc
diff --git a/packages/avatar/CHANGELOG.md b/first-gen/packages/avatar/CHANGELOG.md
similarity index 100%
rename from packages/avatar/CHANGELOG.md
rename to first-gen/packages/avatar/CHANGELOG.md
diff --git a/packages/avatar/README.md b/first-gen/packages/avatar/README.md
similarity index 100%
rename from packages/avatar/README.md
rename to first-gen/packages/avatar/README.md
diff --git a/packages/avatar/package.json b/first-gen/packages/avatar/package.json
similarity index 97%
rename from packages/avatar/package.json
rename to first-gen/packages/avatar/package.json
index ff569ab8ecd..371facb4ffe 100644
--- a/packages/avatar/package.json
+++ b/first-gen/packages/avatar/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/avatar"
+ "directory": "first-gen/packages/avatar"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/avatar",
diff --git a/packages/avatar/sp-avatar.ts b/first-gen/packages/avatar/sp-avatar.ts
similarity index 100%
rename from packages/avatar/sp-avatar.ts
rename to first-gen/packages/avatar/sp-avatar.ts
diff --git a/packages/avatar/src/Avatar.ts b/first-gen/packages/avatar/src/Avatar.ts
similarity index 100%
rename from packages/avatar/src/Avatar.ts
rename to first-gen/packages/avatar/src/Avatar.ts
diff --git a/packages/avatar/src/avatar-overrides.css b/first-gen/packages/avatar/src/avatar-overrides.css
similarity index 100%
rename from packages/avatar/src/avatar-overrides.css
rename to first-gen/packages/avatar/src/avatar-overrides.css
diff --git a/packages/avatar/src/avatar.css b/first-gen/packages/avatar/src/avatar.css
similarity index 100%
rename from packages/avatar/src/avatar.css
rename to first-gen/packages/avatar/src/avatar.css
diff --git a/packages/avatar/src/index.ts b/first-gen/packages/avatar/src/index.ts
similarity index 100%
rename from packages/avatar/src/index.ts
rename to first-gen/packages/avatar/src/index.ts
diff --git a/packages/avatar/src/spectrum-avatar.css b/first-gen/packages/avatar/src/spectrum-avatar.css
similarity index 100%
rename from packages/avatar/src/spectrum-avatar.css
rename to first-gen/packages/avatar/src/spectrum-avatar.css
diff --git a/packages/avatar/stories/avatar.stories.ts b/first-gen/packages/avatar/stories/avatar.stories.ts
similarity index 100%
rename from packages/avatar/stories/avatar.stories.ts
rename to first-gen/packages/avatar/stories/avatar.stories.ts
diff --git a/packages/avatar/stories/images.ts b/first-gen/packages/avatar/stories/images.ts
similarity index 100%
rename from packages/avatar/stories/images.ts
rename to first-gen/packages/avatar/stories/images.ts
diff --git a/packages/avatar/test/avatar-memory.test.ts b/first-gen/packages/avatar/test/avatar-memory.test.ts
similarity index 100%
rename from packages/avatar/test/avatar-memory.test.ts
rename to first-gen/packages/avatar/test/avatar-memory.test.ts
diff --git a/packages/avatar/test/avatar.test.ts b/first-gen/packages/avatar/test/avatar.test.ts
similarity index 100%
rename from packages/avatar/test/avatar.test.ts
rename to first-gen/packages/avatar/test/avatar.test.ts
diff --git a/packages/avatar/test/benchmark/test-basic.ts b/first-gen/packages/avatar/test/benchmark/test-basic.ts
similarity index 100%
rename from packages/avatar/test/benchmark/test-basic.ts
rename to first-gen/packages/avatar/test/benchmark/test-basic.ts
diff --git a/packages/avatar/tsconfig.json b/first-gen/packages/avatar/tsconfig.json
similarity index 100%
rename from packages/avatar/tsconfig.json
rename to first-gen/packages/avatar/tsconfig.json
diff --git a/packages/badge/.npmignore b/first-gen/packages/badge/.npmignore
similarity index 100%
rename from packages/badge/.npmignore
rename to first-gen/packages/badge/.npmignore
diff --git a/packages/badge/.npmrc b/first-gen/packages/badge/.npmrc
similarity index 100%
rename from packages/badge/.npmrc
rename to first-gen/packages/badge/.npmrc
diff --git a/packages/badge/CHANGELOG.md b/first-gen/packages/badge/CHANGELOG.md
similarity index 100%
rename from packages/badge/CHANGELOG.md
rename to first-gen/packages/badge/CHANGELOG.md
diff --git a/packages/badge/README.md b/first-gen/packages/badge/README.md
similarity index 100%
rename from packages/badge/README.md
rename to first-gen/packages/badge/README.md
diff --git a/packages/badge/package.json b/first-gen/packages/badge/package.json
similarity index 89%
rename from packages/badge/package.json
rename to first-gen/packages/badge/package.json
index 03b8121aae2..f7dadf581db 100644
--- a/packages/badge/package.json
+++ b/first-gen/packages/badge/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/badge"
+ "directory": "first-gen/packages/badge"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/badge",
@@ -26,8 +26,8 @@
},
"./package.json": "./package.json",
"./src/Badge.js": {
- "development": "./src/Badge.dev.js",
- "default": "./src/Badge.js"
+ "default": "./src/Badge.js",
+ "development": "./src/Badge.dev.js"
},
"./src/badge-overrides.css.js": "./src/badge-overrides.css.js",
"./src/badge.css.js": "./src/badge.css.js",
@@ -65,7 +65,8 @@
],
"dependencies": {
"@spectrum-web-components/base": "1.8.0",
- "@spectrum-web-components/shared": "1.8.0"
+ "@spectrum-web-components/shared": "1.8.0",
+ "@swc/core": "workspace:*"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
diff --git a/packages/badge/sp-badge.ts b/first-gen/packages/badge/sp-badge.ts
similarity index 100%
rename from packages/badge/sp-badge.ts
rename to first-gen/packages/badge/sp-badge.ts
diff --git a/first-gen/packages/badge/src/Badge.ts b/first-gen/packages/badge/src/Badge.ts
new file mode 100644
index 00000000000..740e8056f02
--- /dev/null
+++ b/first-gen/packages/badge/src/Badge.ts
@@ -0,0 +1,111 @@
+/**
+ * Copyright 2025 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.
+ */
+
+import {
+ CSSResultArray,
+ html,
+ nothing,
+ TemplateResult,
+} from '@spectrum-web-components/base';
+
+import { property } from '@spectrum-web-components/base/src/decorators.js';
+
+import {
+ BADGE_VARIANTS_COLOR_S1,
+ BADGE_VARIANTS_S1,
+ BadgeBase,
+ type BadgeVariantS1,
+ FIXED_VALUES as FIXED_VALUES_BASE,
+ type FixedValues as FixedValuesBase,
+} from '@swc/core/components/badge';
+
+import styles from './badge.css.js';
+
+/**
+ * @deprecated The `BADGE_VARIANTS` export is deprecated and will be removed
+ * in a future release. If needed, you can access the internal
+ * `Badge.VARIANTS` property from the constructor.
+ */
+export const BADGE_VARIANTS = BADGE_VARIANTS_S1;
+
+/**
+ * @deprecated The `FIXED_VALUES` export is deprecated and will be removed
+ * in a future release. If needed, you can access the internal
+ * `Badge.FIXED_VALUES` property from the constructor.
+ */
+export const FIXED_VALUES = FIXED_VALUES_BASE;
+
+/**
+ * @deprecated The `BadgeVariant` type export is deprecated and will be removed
+ * in a future release. If needed, you can infer this type from the `Badge`
+ * prototype as follows: `typeof Badge.prototype.variant`
+ */
+export type BadgeVariant = BadgeVariantS1;
+
+/**
+ * @deprecated The `FixedValues` type export is deprecated and will be removed
+ * in a future release. If needed, you can infer this type from the `Badge`
+ * constructor as follows: `typeof Badge.FIXED_VALUES`
+ */
+export type FixedValues = FixedValuesBase;
+
+/**
+ * @element sp-badge
+ *
+ * @slot - Text label of the badge
+ * @slot icon - Optional icon that appears to the left of the label
+ */
+export class Badge extends BadgeBase {
+ // ────────────────────
+ // API OVERRIDES
+ // ────────────────────
+
+ /**
+ * @internal
+ */
+ static override readonly VARIANTS_COLOR = BADGE_VARIANTS_COLOR_S1;
+
+ /**
+ * @internal
+ */
+ static override readonly VARIANTS = BADGE_VARIANTS_S1;
+
+ /**
+ * The variant of the badge.
+ */
+ @property({ type: String, reflect: true })
+ public override variant: BadgeVariantS1 = 'informative';
+
+ // ──────────────────────────────
+ // RENDERING & STYLING
+ // ──────────────────────────────
+
+ public static override get styles(): CSSResultArray {
+ return [styles];
+ }
+
+ protected override render(): TemplateResult {
+ return html`
+ ${this.hasIcon
+ ? html`
+
+
+ `;
+ }
+}
diff --git a/packages/badge/src/badge-overrides.css b/first-gen/packages/badge/src/badge-overrides.css
similarity index 100%
rename from packages/badge/src/badge-overrides.css
rename to first-gen/packages/badge/src/badge-overrides.css
diff --git a/packages/badge/src/badge.css b/first-gen/packages/badge/src/badge.css
similarity index 100%
rename from packages/badge/src/badge.css
rename to first-gen/packages/badge/src/badge.css
diff --git a/packages/badge/src/index.ts b/first-gen/packages/badge/src/index.ts
similarity index 100%
rename from packages/badge/src/index.ts
rename to first-gen/packages/badge/src/index.ts
diff --git a/packages/badge/src/spectrum-badge.css b/first-gen/packages/badge/src/spectrum-badge.css
similarity index 100%
rename from packages/badge/src/spectrum-badge.css
rename to first-gen/packages/badge/src/spectrum-badge.css
diff --git a/packages/badge/stories/badge.stories.ts b/first-gen/packages/badge/stories/badge.stories.ts
similarity index 100%
rename from packages/badge/stories/badge.stories.ts
rename to first-gen/packages/badge/stories/badge.stories.ts
diff --git a/packages/badge/test/badge-memory.test.ts b/first-gen/packages/badge/test/badge-memory.test.ts
similarity index 100%
rename from packages/badge/test/badge-memory.test.ts
rename to first-gen/packages/badge/test/badge-memory.test.ts
diff --git a/packages/badge/test/badge.test.ts b/first-gen/packages/badge/test/badge.test.ts
similarity index 100%
rename from packages/badge/test/badge.test.ts
rename to first-gen/packages/badge/test/badge.test.ts
diff --git a/packages/badge/test/benchmark/basic-test.ts b/first-gen/packages/badge/test/benchmark/basic-test.ts
similarity index 100%
rename from packages/badge/test/benchmark/basic-test.ts
rename to first-gen/packages/badge/test/benchmark/basic-test.ts
diff --git a/packages/badge/tsconfig.json b/first-gen/packages/badge/tsconfig.json
similarity index 100%
rename from packages/badge/tsconfig.json
rename to first-gen/packages/badge/tsconfig.json
diff --git a/packages/breadcrumbs/.npmignore b/first-gen/packages/breadcrumbs/.npmignore
similarity index 100%
rename from packages/breadcrumbs/.npmignore
rename to first-gen/packages/breadcrumbs/.npmignore
diff --git a/packages/breadcrumbs/.npmrc b/first-gen/packages/breadcrumbs/.npmrc
similarity index 100%
rename from packages/breadcrumbs/.npmrc
rename to first-gen/packages/breadcrumbs/.npmrc
diff --git a/packages/breadcrumbs/CHANGELOG.md b/first-gen/packages/breadcrumbs/CHANGELOG.md
similarity index 100%
rename from packages/breadcrumbs/CHANGELOG.md
rename to first-gen/packages/breadcrumbs/CHANGELOG.md
diff --git a/packages/breadcrumbs/README.md b/first-gen/packages/breadcrumbs/README.md
similarity index 100%
rename from packages/breadcrumbs/README.md
rename to first-gen/packages/breadcrumbs/README.md
diff --git a/packages/breadcrumbs/breadcrumb-item.md b/first-gen/packages/breadcrumbs/breadcrumb-item.md
similarity index 100%
rename from packages/breadcrumbs/breadcrumb-item.md
rename to first-gen/packages/breadcrumbs/breadcrumb-item.md
diff --git a/packages/breadcrumbs/package.json b/first-gen/packages/breadcrumbs/package.json
similarity index 98%
rename from packages/breadcrumbs/package.json
rename to first-gen/packages/breadcrumbs/package.json
index 53443b1bcd6..1e04e0ea439 100644
--- a/packages/breadcrumbs/package.json
+++ b/first-gen/packages/breadcrumbs/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/breadcrumbs"
+ "directory": "first-gen/packages/breadcrumbs"
},
"author": "Adobe",
"homepage": "https://adobe.github.io/spectrum-web-components/components/breadcrumbs",
diff --git a/packages/breadcrumbs/sp-breadcrumb-item.ts b/first-gen/packages/breadcrumbs/sp-breadcrumb-item.ts
similarity index 100%
rename from packages/breadcrumbs/sp-breadcrumb-item.ts
rename to first-gen/packages/breadcrumbs/sp-breadcrumb-item.ts
diff --git a/packages/breadcrumbs/sp-breadcrumbs.ts b/first-gen/packages/breadcrumbs/sp-breadcrumbs.ts
similarity index 100%
rename from packages/breadcrumbs/sp-breadcrumbs.ts
rename to first-gen/packages/breadcrumbs/sp-breadcrumbs.ts
diff --git a/packages/breadcrumbs/src/BreadcrumbItem.ts b/first-gen/packages/breadcrumbs/src/BreadcrumbItem.ts
similarity index 100%
rename from packages/breadcrumbs/src/BreadcrumbItem.ts
rename to first-gen/packages/breadcrumbs/src/BreadcrumbItem.ts
diff --git a/packages/breadcrumbs/src/Breadcrumbs.ts b/first-gen/packages/breadcrumbs/src/Breadcrumbs.ts
similarity index 100%
rename from packages/breadcrumbs/src/Breadcrumbs.ts
rename to first-gen/packages/breadcrumbs/src/Breadcrumbs.ts
diff --git a/packages/breadcrumbs/src/breadcrumb-item.css b/first-gen/packages/breadcrumbs/src/breadcrumb-item.css
similarity index 100%
rename from packages/breadcrumbs/src/breadcrumb-item.css
rename to first-gen/packages/breadcrumbs/src/breadcrumb-item.css
diff --git a/packages/breadcrumbs/src/breadcrumbs-item-overrides.css b/first-gen/packages/breadcrumbs/src/breadcrumbs-item-overrides.css
similarity index 100%
rename from packages/breadcrumbs/src/breadcrumbs-item-overrides.css
rename to first-gen/packages/breadcrumbs/src/breadcrumbs-item-overrides.css
diff --git a/packages/breadcrumbs/src/breadcrumbs-overrides.css b/first-gen/packages/breadcrumbs/src/breadcrumbs-overrides.css
similarity index 100%
rename from packages/breadcrumbs/src/breadcrumbs-overrides.css
rename to first-gen/packages/breadcrumbs/src/breadcrumbs-overrides.css
diff --git a/packages/breadcrumbs/src/breadcrumbs.css b/first-gen/packages/breadcrumbs/src/breadcrumbs.css
similarity index 100%
rename from packages/breadcrumbs/src/breadcrumbs.css
rename to first-gen/packages/breadcrumbs/src/breadcrumbs.css
diff --git a/packages/breadcrumbs/src/index.ts b/first-gen/packages/breadcrumbs/src/index.ts
similarity index 100%
rename from packages/breadcrumbs/src/index.ts
rename to first-gen/packages/breadcrumbs/src/index.ts
diff --git a/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css b/first-gen/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css
similarity index 100%
rename from packages/breadcrumbs/src/spectrum-breadcrumbs-item.css
rename to first-gen/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css
diff --git a/packages/breadcrumbs/src/spectrum-breadcrumbs.css b/first-gen/packages/breadcrumbs/src/spectrum-breadcrumbs.css
similarity index 100%
rename from packages/breadcrumbs/src/spectrum-breadcrumbs.css
rename to first-gen/packages/breadcrumbs/src/spectrum-breadcrumbs.css
diff --git a/packages/breadcrumbs/stories/args.ts b/first-gen/packages/breadcrumbs/stories/args.ts
similarity index 100%
rename from packages/breadcrumbs/stories/args.ts
rename to first-gen/packages/breadcrumbs/stories/args.ts
diff --git a/packages/breadcrumbs/stories/breadcrumbs.stories.ts b/first-gen/packages/breadcrumbs/stories/breadcrumbs.stories.ts
similarity index 100%
rename from packages/breadcrumbs/stories/breadcrumbs.stories.ts
rename to first-gen/packages/breadcrumbs/stories/breadcrumbs.stories.ts
diff --git a/packages/breadcrumbs/stories/template.ts b/first-gen/packages/breadcrumbs/stories/template.ts
similarity index 100%
rename from packages/breadcrumbs/stories/template.ts
rename to first-gen/packages/breadcrumbs/stories/template.ts
diff --git a/packages/breadcrumbs/test/benchmark/basic-test.ts b/first-gen/packages/breadcrumbs/test/benchmark/basic-test.ts
similarity index 100%
rename from packages/breadcrumbs/test/benchmark/basic-test.ts
rename to first-gen/packages/breadcrumbs/test/benchmark/basic-test.ts
diff --git a/packages/breadcrumbs/test/breadcrumb-item.test.ts b/first-gen/packages/breadcrumbs/test/breadcrumb-item.test.ts
similarity index 100%
rename from packages/breadcrumbs/test/breadcrumb-item.test.ts
rename to first-gen/packages/breadcrumbs/test/breadcrumb-item.test.ts
diff --git a/packages/breadcrumbs/test/breadcrumbs.test.ts b/first-gen/packages/breadcrumbs/test/breadcrumbs.test.ts
similarity index 100%
rename from packages/breadcrumbs/test/breadcrumbs.test.ts
rename to first-gen/packages/breadcrumbs/test/breadcrumbs.test.ts
diff --git a/packages/breadcrumbs/tsconfig.json b/first-gen/packages/breadcrumbs/tsconfig.json
similarity index 100%
rename from packages/breadcrumbs/tsconfig.json
rename to first-gen/packages/breadcrumbs/tsconfig.json
diff --git a/packages/button-group/.npmrc b/first-gen/packages/button-group/.npmrc
similarity index 100%
rename from packages/button-group/.npmrc
rename to first-gen/packages/button-group/.npmrc
diff --git a/packages/button-group/CHANGELOG.md b/first-gen/packages/button-group/CHANGELOG.md
similarity index 100%
rename from packages/button-group/CHANGELOG.md
rename to first-gen/packages/button-group/CHANGELOG.md
diff --git a/packages/button-group/README.md b/first-gen/packages/button-group/README.md
similarity index 100%
rename from packages/button-group/README.md
rename to first-gen/packages/button-group/README.md
diff --git a/packages/button-group/package.json b/first-gen/packages/button-group/package.json
similarity index 97%
rename from packages/button-group/package.json
rename to first-gen/packages/button-group/package.json
index 93de7a5ff0d..97dd703a951 100644
--- a/packages/button-group/package.json
+++ b/first-gen/packages/button-group/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/button-group"
+ "directory": "first-gen/packages/button-group"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/button-group",
diff --git a/packages/button-group/sp-button-group.ts b/first-gen/packages/button-group/sp-button-group.ts
similarity index 100%
rename from packages/button-group/sp-button-group.ts
rename to first-gen/packages/button-group/sp-button-group.ts
diff --git a/packages/button-group/src/ButtonGroup.ts b/first-gen/packages/button-group/src/ButtonGroup.ts
similarity index 100%
rename from packages/button-group/src/ButtonGroup.ts
rename to first-gen/packages/button-group/src/ButtonGroup.ts
diff --git a/packages/button-group/src/button-group-overrides.css b/first-gen/packages/button-group/src/button-group-overrides.css
similarity index 100%
rename from packages/button-group/src/button-group-overrides.css
rename to first-gen/packages/button-group/src/button-group-overrides.css
diff --git a/packages/button-group/src/button-group.css b/first-gen/packages/button-group/src/button-group.css
similarity index 100%
rename from packages/button-group/src/button-group.css
rename to first-gen/packages/button-group/src/button-group.css
diff --git a/packages/button-group/src/index.ts b/first-gen/packages/button-group/src/index.ts
similarity index 100%
rename from packages/button-group/src/index.ts
rename to first-gen/packages/button-group/src/index.ts
diff --git a/packages/button-group/src/spectrum-button-group.css b/first-gen/packages/button-group/src/spectrum-button-group.css
similarity index 100%
rename from packages/button-group/src/spectrum-button-group.css
rename to first-gen/packages/button-group/src/spectrum-button-group.css
diff --git a/packages/button-group/stories/button-group-sizes.stories.ts b/first-gen/packages/button-group/stories/button-group-sizes.stories.ts
similarity index 100%
rename from packages/button-group/stories/button-group-sizes.stories.ts
rename to first-gen/packages/button-group/stories/button-group-sizes.stories.ts
diff --git a/packages/button-group/stories/button-group.stories.ts b/first-gen/packages/button-group/stories/button-group.stories.ts
similarity index 100%
rename from packages/button-group/stories/button-group.stories.ts
rename to first-gen/packages/button-group/stories/button-group.stories.ts
diff --git a/packages/button-group/test/benchmark/basic-test.ts b/first-gen/packages/button-group/test/benchmark/basic-test.ts
similarity index 100%
rename from packages/button-group/test/benchmark/basic-test.ts
rename to first-gen/packages/button-group/test/benchmark/basic-test.ts
diff --git a/packages/button-group/test/button-group-memory.test.ts b/first-gen/packages/button-group/test/button-group-memory.test.ts
similarity index 100%
rename from packages/button-group/test/button-group-memory.test.ts
rename to first-gen/packages/button-group/test/button-group-memory.test.ts
diff --git a/packages/button-group/test/button-group.test.ts b/first-gen/packages/button-group/test/button-group.test.ts
similarity index 100%
rename from packages/button-group/test/button-group.test.ts
rename to first-gen/packages/button-group/test/button-group.test.ts
diff --git a/packages/button-group/tsconfig.json b/first-gen/packages/button-group/tsconfig.json
similarity index 100%
rename from packages/button-group/tsconfig.json
rename to first-gen/packages/button-group/tsconfig.json
diff --git a/packages/button/.npmrc b/first-gen/packages/button/.npmrc
similarity index 100%
rename from packages/button/.npmrc
rename to first-gen/packages/button/.npmrc
diff --git a/packages/button/CHANGELOG.md b/first-gen/packages/button/CHANGELOG.md
similarity index 99%
rename from packages/button/CHANGELOG.md
rename to first-gen/packages/button/CHANGELOG.md
index fb0dd6584a5..06396c653cf 100644
--- a/packages/button/CHANGELOG.md
+++ b/first-gen/packages/button/CHANGELOG.md
@@ -7,12 +7,10 @@
- [#5320](https://github.com/adobe/spectrum-web-components/pull/5320) [`15be17d`](https://github.com/adobe/spectrum-web-components/commit/15be17db91f1140ccf3cad52b1f2ed6c4b9e28ba) Thanks [@renovate](https://github.com/apps/renovate)! - Clear button styles have been updated to the latest Spectrum CSS version of the clear button. This update includes a major reduction in the number of custom property abstractions needed to support the multiple theming layers (as seen in the `styles` package).
This update spans the following additional packages:
-
- @spectrum-web-components/button
- @spectrum-web-components/styles
As the updated styles now offer additional styling options, we have added the following API to the clear button component that exists in the `button` package:
-
- `quiet` - when set to true, the button will be rendered as a quiet button. This is useful for cases where you want to use the clear button in a more subtle way.
- `disabled` - when set to true, the button will be rendered as a disabled button.
- `static-color` - currently this only supports the `white` context color. This is useful for cases where the button appears on a dark background texture. This is a replacement for the previously used `variant="overBackground"` attribute which is deprecated.
@@ -81,7 +79,6 @@
Adjusts static color buttons to more closely resemble the S2 specifications. There are no expected changes to non-static button variants in S2, and no expected changes to other themes.
This PR includes changes to:
-
- Static white primary button (outline variant), static white secondary button (fill variant), static black primary button (outline variant), static black secondary button (fill variant)
- Static white secondary button (outline variant) and static black secondary button (outline variant) border and background colors
- Static color buttons' content color
diff --git a/packages/button/README.md b/first-gen/packages/button/README.md
similarity index 100%
rename from packages/button/README.md
rename to first-gen/packages/button/README.md
diff --git a/packages/button/clear-button.md b/first-gen/packages/button/clear-button.md
similarity index 100%
rename from packages/button/clear-button.md
rename to first-gen/packages/button/clear-button.md
diff --git a/packages/button/close-button.md b/first-gen/packages/button/close-button.md
similarity index 100%
rename from packages/button/close-button.md
rename to first-gen/packages/button/close-button.md
diff --git a/packages/button/package.json b/first-gen/packages/button/package.json
similarity index 98%
rename from packages/button/package.json
rename to first-gen/packages/button/package.json
index 9a2a9fdc2df..b83c422d641 100644
--- a/packages/button/package.json
+++ b/first-gen/packages/button/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/button"
+ "directory": "first-gen/packages/button"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/button",
diff --git a/packages/button/sp-button.ts b/first-gen/packages/button/sp-button.ts
similarity index 100%
rename from packages/button/sp-button.ts
rename to first-gen/packages/button/sp-button.ts
diff --git a/packages/button/sp-clear-button.ts b/first-gen/packages/button/sp-clear-button.ts
similarity index 100%
rename from packages/button/sp-clear-button.ts
rename to first-gen/packages/button/sp-clear-button.ts
diff --git a/packages/button/sp-close-button.ts b/first-gen/packages/button/sp-close-button.ts
similarity index 100%
rename from packages/button/sp-close-button.ts
rename to first-gen/packages/button/sp-close-button.ts
diff --git a/packages/button/src/Button.ts b/first-gen/packages/button/src/Button.ts
similarity index 100%
rename from packages/button/src/Button.ts
rename to first-gen/packages/button/src/Button.ts
diff --git a/packages/button/src/ButtonBase.ts b/first-gen/packages/button/src/ButtonBase.ts
similarity index 100%
rename from packages/button/src/ButtonBase.ts
rename to first-gen/packages/button/src/ButtonBase.ts
diff --git a/packages/button/src/ClearButton.ts b/first-gen/packages/button/src/ClearButton.ts
similarity index 100%
rename from packages/button/src/ClearButton.ts
rename to first-gen/packages/button/src/ClearButton.ts
diff --git a/packages/button/src/CloseButton.ts b/first-gen/packages/button/src/CloseButton.ts
similarity index 100%
rename from packages/button/src/CloseButton.ts
rename to first-gen/packages/button/src/CloseButton.ts
diff --git a/packages/button/src/StyledButton.ts b/first-gen/packages/button/src/StyledButton.ts
similarity index 100%
rename from packages/button/src/StyledButton.ts
rename to first-gen/packages/button/src/StyledButton.ts
diff --git a/packages/button/src/button-base.css b/first-gen/packages/button/src/button-base.css
similarity index 100%
rename from packages/button/src/button-base.css
rename to first-gen/packages/button/src/button-base.css
diff --git a/packages/button/src/button-overrides.css b/first-gen/packages/button/src/button-overrides.css
similarity index 100%
rename from packages/button/src/button-overrides.css
rename to first-gen/packages/button/src/button-overrides.css
diff --git a/packages/button/src/button.css b/first-gen/packages/button/src/button.css
similarity index 100%
rename from packages/button/src/button.css
rename to first-gen/packages/button/src/button.css
diff --git a/packages/button/src/index.ts b/first-gen/packages/button/src/index.ts
similarity index 100%
rename from packages/button/src/index.ts
rename to first-gen/packages/button/src/index.ts
diff --git a/packages/button/src/spectrum-button-base.css b/first-gen/packages/button/src/spectrum-button-base.css
similarity index 100%
rename from packages/button/src/spectrum-button-base.css
rename to first-gen/packages/button/src/spectrum-button-base.css
diff --git a/packages/button/src/spectrum-button.css b/first-gen/packages/button/src/spectrum-button.css
similarity index 100%
rename from packages/button/src/spectrum-button.css
rename to first-gen/packages/button/src/spectrum-button.css
diff --git a/packages/button/stories/button-accent-fill-pending.stories.ts b/first-gen/packages/button/stories/button-accent-fill-pending.stories.ts
similarity index 100%
rename from packages/button/stories/button-accent-fill-pending.stories.ts
rename to first-gen/packages/button/stories/button-accent-fill-pending.stories.ts
diff --git a/packages/button/stories/button-accent-fill-sizes.stories.ts b/first-gen/packages/button/stories/button-accent-fill-sizes.stories.ts
similarity index 100%
rename from packages/button/stories/button-accent-fill-sizes.stories.ts
rename to first-gen/packages/button/stories/button-accent-fill-sizes.stories.ts
diff --git a/packages/button/stories/button-accent-fill.stories.ts b/first-gen/packages/button/stories/button-accent-fill.stories.ts
similarity index 100%
rename from packages/button/stories/button-accent-fill.stories.ts
rename to first-gen/packages/button/stories/button-accent-fill.stories.ts
diff --git a/packages/button/stories/button-accent-outline-pending.stories.ts b/first-gen/packages/button/stories/button-accent-outline-pending.stories.ts
similarity index 100%
rename from packages/button/stories/button-accent-outline-pending.stories.ts
rename to first-gen/packages/button/stories/button-accent-outline-pending.stories.ts
diff --git a/packages/button/stories/button-accent-outline-sizes.stories.ts b/first-gen/packages/button/stories/button-accent-outline-sizes.stories.ts
similarity index 100%
rename from packages/button/stories/button-accent-outline-sizes.stories.ts
rename to first-gen/packages/button/stories/button-accent-outline-sizes.stories.ts
diff --git a/packages/button/stories/button-accent-outline.stories.ts b/first-gen/packages/button/stories/button-accent-outline.stories.ts
similarity index 100%
rename from packages/button/stories/button-accent-outline.stories.ts
rename to first-gen/packages/button/stories/button-accent-outline.stories.ts
diff --git a/packages/button/stories/button-black-fill-pending.stories.ts b/first-gen/packages/button/stories/button-black-fill-pending.stories.ts
similarity index 100%
rename from packages/button/stories/button-black-fill-pending.stories.ts
rename to first-gen/packages/button/stories/button-black-fill-pending.stories.ts
diff --git a/packages/button/stories/button-black-fill-sizes.stories.ts b/first-gen/packages/button/stories/button-black-fill-sizes.stories.ts
similarity index 100%
rename from packages/button/stories/button-black-fill-sizes.stories.ts
rename to first-gen/packages/button/stories/button-black-fill-sizes.stories.ts
diff --git a/packages/button/stories/button-black-fill.stories.ts b/first-gen/packages/button/stories/button-black-fill.stories.ts
similarity index 100%
rename from packages/button/stories/button-black-fill.stories.ts
rename to first-gen/packages/button/stories/button-black-fill.stories.ts
diff --git a/packages/button/stories/button-black-outline-pending.stories.ts b/first-gen/packages/button/stories/button-black-outline-pending.stories.ts
similarity index 100%
rename from packages/button/stories/button-black-outline-pending.stories.ts
rename to first-gen/packages/button/stories/button-black-outline-pending.stories.ts
diff --git a/packages/button/stories/button-black-outline-sizes.stories.ts b/first-gen/packages/button/stories/button-black-outline-sizes.stories.ts
similarity index 100%
rename from packages/button/stories/button-black-outline-sizes.stories.ts
rename to first-gen/packages/button/stories/button-black-outline-sizes.stories.ts
diff --git a/packages/button/stories/button-black-outline.stories.ts b/first-gen/packages/button/stories/button-black-outline.stories.ts
similarity index 100%
rename from packages/button/stories/button-black-outline.stories.ts
rename to first-gen/packages/button/stories/button-black-outline.stories.ts
diff --git a/packages/button/stories/button-negative-fill-pending.stories.ts b/first-gen/packages/button/stories/button-negative-fill-pending.stories.ts
similarity index 100%
rename from packages/button/stories/button-negative-fill-pending.stories.ts
rename to first-gen/packages/button/stories/button-negative-fill-pending.stories.ts
diff --git a/packages/button/stories/button-negative-fill-sizes.stories.ts b/first-gen/packages/button/stories/button-negative-fill-sizes.stories.ts
similarity index 100%
rename from packages/button/stories/button-negative-fill-sizes.stories.ts
rename to first-gen/packages/button/stories/button-negative-fill-sizes.stories.ts
diff --git a/packages/button/stories/button-negative-fill.stories.ts b/first-gen/packages/button/stories/button-negative-fill.stories.ts
similarity index 100%
rename from packages/button/stories/button-negative-fill.stories.ts
rename to first-gen/packages/button/stories/button-negative-fill.stories.ts
diff --git a/packages/button/stories/button-negative-outline-pending.stories.ts b/first-gen/packages/button/stories/button-negative-outline-pending.stories.ts
similarity index 100%
rename from packages/button/stories/button-negative-outline-pending.stories.ts
rename to first-gen/packages/button/stories/button-negative-outline-pending.stories.ts
diff --git a/packages/button/stories/button-negative-outline-sizes.stories.ts b/first-gen/packages/button/stories/button-negative-outline-sizes.stories.ts
similarity index 100%
rename from packages/button/stories/button-negative-outline-sizes.stories.ts
rename to first-gen/packages/button/stories/button-negative-outline-sizes.stories.ts
diff --git a/packages/button/stories/button-negative-outline.stories.ts b/first-gen/packages/button/stories/button-negative-outline.stories.ts
similarity index 100%
rename from packages/button/stories/button-negative-outline.stories.ts
rename to first-gen/packages/button/stories/button-negative-outline.stories.ts
diff --git a/packages/button/stories/button-primary-fill-pending.stories.ts b/first-gen/packages/button/stories/button-primary-fill-pending.stories.ts
similarity index 100%
rename from packages/button/stories/button-primary-fill-pending.stories.ts
rename to first-gen/packages/button/stories/button-primary-fill-pending.stories.ts
diff --git a/packages/button/stories/button-primary-fill-sizes.stories.ts b/first-gen/packages/button/stories/button-primary-fill-sizes.stories.ts
similarity index 100%
rename from packages/button/stories/button-primary-fill-sizes.stories.ts
rename to first-gen/packages/button/stories/button-primary-fill-sizes.stories.ts
diff --git a/packages/button/stories/button-primary-fill.stories.ts b/first-gen/packages/button/stories/button-primary-fill.stories.ts
similarity index 100%
rename from packages/button/stories/button-primary-fill.stories.ts
rename to first-gen/packages/button/stories/button-primary-fill.stories.ts
diff --git a/packages/button/stories/button-primary-outline-pending.stories.ts b/first-gen/packages/button/stories/button-primary-outline-pending.stories.ts
similarity index 100%
rename from packages/button/stories/button-primary-outline-pending.stories.ts
rename to first-gen/packages/button/stories/button-primary-outline-pending.stories.ts
diff --git a/packages/button/stories/button-primary-outline-sizes.stories.ts b/first-gen/packages/button/stories/button-primary-outline-sizes.stories.ts
similarity index 100%
rename from packages/button/stories/button-primary-outline-sizes.stories.ts
rename to first-gen/packages/button/stories/button-primary-outline-sizes.stories.ts
diff --git a/packages/button/stories/button-primary-outline.stories.ts b/first-gen/packages/button/stories/button-primary-outline.stories.ts
similarity index 100%
rename from packages/button/stories/button-primary-outline.stories.ts
rename to first-gen/packages/button/stories/button-primary-outline.stories.ts
diff --git a/packages/button/stories/button-secondary-fill-pending.stories.ts b/first-gen/packages/button/stories/button-secondary-fill-pending.stories.ts
similarity index 100%
rename from packages/button/stories/button-secondary-fill-pending.stories.ts
rename to first-gen/packages/button/stories/button-secondary-fill-pending.stories.ts
diff --git a/packages/button/stories/button-secondary-fill-sizes.stories.ts b/first-gen/packages/button/stories/button-secondary-fill-sizes.stories.ts
similarity index 100%
rename from packages/button/stories/button-secondary-fill-sizes.stories.ts
rename to first-gen/packages/button/stories/button-secondary-fill-sizes.stories.ts
diff --git a/packages/button/stories/button-secondary-fill.stories.ts b/first-gen/packages/button/stories/button-secondary-fill.stories.ts
similarity index 100%
rename from packages/button/stories/button-secondary-fill.stories.ts
rename to first-gen/packages/button/stories/button-secondary-fill.stories.ts
diff --git a/packages/button/stories/button-secondary-outline-pending.stories.ts b/first-gen/packages/button/stories/button-secondary-outline-pending.stories.ts
similarity index 100%
rename from packages/button/stories/button-secondary-outline-pending.stories.ts
rename to first-gen/packages/button/stories/button-secondary-outline-pending.stories.ts
diff --git a/packages/button/stories/button-secondary-outline-sizes.stories.ts b/first-gen/packages/button/stories/button-secondary-outline-sizes.stories.ts
similarity index 100%
rename from packages/button/stories/button-secondary-outline-sizes.stories.ts
rename to first-gen/packages/button/stories/button-secondary-outline-sizes.stories.ts
diff --git a/packages/button/stories/button-secondary-outline.stories.ts b/first-gen/packages/button/stories/button-secondary-outline.stories.ts
similarity index 100%
rename from packages/button/stories/button-secondary-outline.stories.ts
rename to first-gen/packages/button/stories/button-secondary-outline.stories.ts
diff --git a/packages/button/stories/button-white-fill-pending.stories.ts b/first-gen/packages/button/stories/button-white-fill-pending.stories.ts
similarity index 100%
rename from packages/button/stories/button-white-fill-pending.stories.ts
rename to first-gen/packages/button/stories/button-white-fill-pending.stories.ts
diff --git a/packages/button/stories/button-white-fill-sizes.stories.ts b/first-gen/packages/button/stories/button-white-fill-sizes.stories.ts
similarity index 100%
rename from packages/button/stories/button-white-fill-sizes.stories.ts
rename to first-gen/packages/button/stories/button-white-fill-sizes.stories.ts
diff --git a/packages/button/stories/button-white-fill.stories.ts b/first-gen/packages/button/stories/button-white-fill.stories.ts
similarity index 100%
rename from packages/button/stories/button-white-fill.stories.ts
rename to first-gen/packages/button/stories/button-white-fill.stories.ts
diff --git a/packages/button/stories/button-white-outline-pending.stories.ts b/first-gen/packages/button/stories/button-white-outline-pending.stories.ts
similarity index 100%
rename from packages/button/stories/button-white-outline-pending.stories.ts
rename to first-gen/packages/button/stories/button-white-outline-pending.stories.ts
diff --git a/packages/button/stories/button-white-outline-sizes.stories.ts b/first-gen/packages/button/stories/button-white-outline-sizes.stories.ts
similarity index 100%
rename from packages/button/stories/button-white-outline-sizes.stories.ts
rename to first-gen/packages/button/stories/button-white-outline-sizes.stories.ts
diff --git a/packages/button/stories/button-white-outline.stories.ts b/first-gen/packages/button/stories/button-white-outline.stories.ts
similarity index 100%
rename from packages/button/stories/button-white-outline.stories.ts
rename to first-gen/packages/button/stories/button-white-outline.stories.ts
diff --git a/packages/button/stories/index.ts b/first-gen/packages/button/stories/index.ts
similarity index 100%
rename from packages/button/stories/index.ts
rename to first-gen/packages/button/stories/index.ts
diff --git a/packages/button/stories/template.ts b/first-gen/packages/button/stories/template.ts
similarity index 100%
rename from packages/button/stories/template.ts
rename to first-gen/packages/button/stories/template.ts
diff --git a/packages/button/test/benchmark/test-basic.ts b/first-gen/packages/button/test/benchmark/test-basic.ts
similarity index 100%
rename from packages/button/test/benchmark/test-basic.ts
rename to first-gen/packages/button/test/benchmark/test-basic.ts
diff --git a/packages/button/test/button-memory.test.ts b/first-gen/packages/button/test/button-memory.test.ts
similarity index 100%
rename from packages/button/test/button-memory.test.ts
rename to first-gen/packages/button/test/button-memory.test.ts
diff --git a/packages/button/test/button.test.ts b/first-gen/packages/button/test/button.test.ts
similarity index 100%
rename from packages/button/test/button.test.ts
rename to first-gen/packages/button/test/button.test.ts
diff --git a/packages/button/test/clear-button.test.ts b/first-gen/packages/button/test/clear-button.test.ts
similarity index 100%
rename from packages/button/test/clear-button.test.ts
rename to first-gen/packages/button/test/clear-button.test.ts
diff --git a/packages/button/test/close-button.test.ts b/first-gen/packages/button/test/close-button.test.ts
similarity index 100%
rename from packages/button/test/close-button.test.ts
rename to first-gen/packages/button/test/close-button.test.ts
diff --git a/packages/button/tsconfig.json b/first-gen/packages/button/tsconfig.json
similarity index 100%
rename from packages/button/tsconfig.json
rename to first-gen/packages/button/tsconfig.json
diff --git a/packages/card/.npmrc b/first-gen/packages/card/.npmrc
similarity index 100%
rename from packages/card/.npmrc
rename to first-gen/packages/card/.npmrc
diff --git a/packages/card/CHANGELOG.md b/first-gen/packages/card/CHANGELOG.md
similarity index 100%
rename from packages/card/CHANGELOG.md
rename to first-gen/packages/card/CHANGELOG.md
diff --git a/packages/card/README.md b/first-gen/packages/card/README.md
similarity index 100%
rename from packages/card/README.md
rename to first-gen/packages/card/README.md
diff --git a/packages/card/package.json b/first-gen/packages/card/package.json
similarity index 98%
rename from packages/card/package.json
rename to first-gen/packages/card/package.json
index ef39c077e1d..8765b4db5a6 100644
--- a/packages/card/package.json
+++ b/first-gen/packages/card/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/card"
+ "directory": "first-gen/packages/card"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/card",
diff --git a/packages/card/sp-card.ts b/first-gen/packages/card/sp-card.ts
similarity index 100%
rename from packages/card/sp-card.ts
rename to first-gen/packages/card/sp-card.ts
diff --git a/packages/card/src/Card.ts b/first-gen/packages/card/src/Card.ts
similarity index 100%
rename from packages/card/src/Card.ts
rename to first-gen/packages/card/src/Card.ts
diff --git a/packages/card/src/card-overrides.css b/first-gen/packages/card/src/card-overrides.css
similarity index 100%
rename from packages/card/src/card-overrides.css
rename to first-gen/packages/card/src/card-overrides.css
diff --git a/packages/card/src/card.css b/first-gen/packages/card/src/card.css
similarity index 100%
rename from packages/card/src/card.css
rename to first-gen/packages/card/src/card.css
diff --git a/packages/card/src/index.ts b/first-gen/packages/card/src/index.ts
similarity index 100%
rename from packages/card/src/index.ts
rename to first-gen/packages/card/src/index.ts
diff --git a/packages/card/src/spectrum-card.css b/first-gen/packages/card/src/spectrum-card.css
similarity index 96%
rename from packages/card/src/spectrum-card.css
rename to first-gen/packages/card/src/spectrum-card.css
index 7759e6321d0..9a14b347b5e 100644
--- a/packages/card/src/spectrum-card.css
+++ b/first-gen/packages/card/src/spectrum-card.css
@@ -72,7 +72,6 @@
border-color: var(--mod-card-border-color, var(--spectrum-card-border-color));
background-color: var(--spectrum-card-background-color);
flex-direction: column;
- -webkit-text-decoration: none;
text-decoration: none;
display: inline-flex;
position: relative;
@@ -112,11 +111,12 @@
}
:host([selected]):before {
- background-color: rgba(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--spectrum-card-selected-background-opacity));
+ background-color: rgb(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--spectrum-card-selected-background-opacity));
}
:host([drop-target]) {
--mod-card-background-color: var(--spectrum-background-base-color);
+
box-shadow: 0 0 0 1px var(--spectrum-card-border-color);
}
@@ -137,7 +137,7 @@
inline-size: var(--spectrum-card-actions-size);
block-size: var(--spectrum-card-actions-size);
border-radius: var(--spectrum-card-actions-border-radius);
- background-color: rgba(var(--spectrum-card-actions-background-color-rgb), var(--spectrum-card-actions-background-color-opacity));
+ background-color: rgb(var(--spectrum-card-actions-background-color-rgb), var(--spectrum-card-actions-background-color-opacity));
pointer-events: auto;
box-sizing: border-box;
transition:
@@ -282,6 +282,7 @@
:host([variant="gallery"]),
:host([variant="quiet"]) {
--mod-card-border-color-hover: transparent;
+
background-color: initial;
block-size: 100%;
border-width: 0;
@@ -354,7 +355,7 @@
:host([variant="gallery"][selected]) #preview:before,
:host([variant="quiet"][selected]) #preview:before {
- background-color: rgba(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity)));
+ background-color: rgb(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity)));
}
:host([variant="gallery"]) .body,
diff --git a/packages/card/stories/card.stories.ts b/first-gen/packages/card/stories/card.stories.ts
similarity index 100%
rename from packages/card/stories/card.stories.ts
rename to first-gen/packages/card/stories/card.stories.ts
diff --git a/packages/card/stories/images.ts b/first-gen/packages/card/stories/images.ts
similarity index 100%
rename from packages/card/stories/images.ts
rename to first-gen/packages/card/stories/images.ts
diff --git a/packages/card/test/benchmark/test-basic.ts b/first-gen/packages/card/test/benchmark/test-basic.ts
similarity index 100%
rename from packages/card/test/benchmark/test-basic.ts
rename to first-gen/packages/card/test/benchmark/test-basic.ts
diff --git a/packages/card/test/card-memory.test.ts b/first-gen/packages/card/test/card-memory.test.ts
similarity index 100%
rename from packages/card/test/card-memory.test.ts
rename to first-gen/packages/card/test/card-memory.test.ts
diff --git a/packages/card/test/card.test.ts b/first-gen/packages/card/test/card.test.ts
similarity index 100%
rename from packages/card/test/card.test.ts
rename to first-gen/packages/card/test/card.test.ts
diff --git a/packages/card/tsconfig.json b/first-gen/packages/card/tsconfig.json
similarity index 100%
rename from packages/card/tsconfig.json
rename to first-gen/packages/card/tsconfig.json
diff --git a/packages/checkbox/.npmrc b/first-gen/packages/checkbox/.npmrc
similarity index 100%
rename from packages/checkbox/.npmrc
rename to first-gen/packages/checkbox/.npmrc
diff --git a/packages/checkbox/CHANGELOG.md b/first-gen/packages/checkbox/CHANGELOG.md
similarity index 99%
rename from packages/checkbox/CHANGELOG.md
rename to first-gen/packages/checkbox/CHANGELOG.md
index 34bdd1a3beb..59c7b8b2fc8 100644
--- a/packages/checkbox/CHANGELOG.md
+++ b/first-gen/packages/checkbox/CHANGELOG.md
@@ -59,7 +59,6 @@
### Patch Changes
- [#5176](https://github.com/adobe/spectrum-web-components/pull/5176) [`468314f`](https://github.com/adobe/spectrum-web-components/commit/468314f45cf5fedb2e9029da210a5886260abca9) Thanks [@TarunAdobe](https://github.com/TarunAdobe)! - 1. chore(checkbox): updated to latest css v10.1.1 for s2 fast follow
-
2. chore(dialog):
The error property was not properly deprecated with a full migration plan in place. This has caused confusion and false sense of urgency for consumers to migrate. We are removing it to eliminate those pain points for consumers while we take a deep look at our dialogs and patterns.
3. chore(menu): updated to latest css v9.1.1 for s2 fast follow
diff --git a/packages/checkbox/README.md b/first-gen/packages/checkbox/README.md
similarity index 100%
rename from packages/checkbox/README.md
rename to first-gen/packages/checkbox/README.md
diff --git a/packages/checkbox/package.json b/first-gen/packages/checkbox/package.json
similarity index 98%
rename from packages/checkbox/package.json
rename to first-gen/packages/checkbox/package.json
index 701dd8793b2..31d51f0207b 100644
--- a/packages/checkbox/package.json
+++ b/first-gen/packages/checkbox/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/checkbox"
+ "directory": "first-gen/packages/checkbox"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/checkbox",
diff --git a/packages/checkbox/sp-checkbox.ts b/first-gen/packages/checkbox/sp-checkbox.ts
similarity index 100%
rename from packages/checkbox/sp-checkbox.ts
rename to first-gen/packages/checkbox/sp-checkbox.ts
diff --git a/packages/checkbox/src/Checkbox.ts b/first-gen/packages/checkbox/src/Checkbox.ts
similarity index 100%
rename from packages/checkbox/src/Checkbox.ts
rename to first-gen/packages/checkbox/src/Checkbox.ts
diff --git a/packages/checkbox/src/CheckboxBase.ts b/first-gen/packages/checkbox/src/CheckboxBase.ts
similarity index 100%
rename from packages/checkbox/src/CheckboxBase.ts
rename to first-gen/packages/checkbox/src/CheckboxBase.ts
diff --git a/packages/checkbox/src/CheckboxMixin.ts b/first-gen/packages/checkbox/src/CheckboxMixin.ts
similarity index 100%
rename from packages/checkbox/src/CheckboxMixin.ts
rename to first-gen/packages/checkbox/src/CheckboxMixin.ts
diff --git a/packages/checkbox/src/checkbox-overrides.css b/first-gen/packages/checkbox/src/checkbox-overrides.css
similarity index 100%
rename from packages/checkbox/src/checkbox-overrides.css
rename to first-gen/packages/checkbox/src/checkbox-overrides.css
diff --git a/packages/checkbox/src/checkbox.css b/first-gen/packages/checkbox/src/checkbox.css
similarity index 100%
rename from packages/checkbox/src/checkbox.css
rename to first-gen/packages/checkbox/src/checkbox.css
diff --git a/packages/checkbox/src/index.ts b/first-gen/packages/checkbox/src/index.ts
similarity index 100%
rename from packages/checkbox/src/index.ts
rename to first-gen/packages/checkbox/src/index.ts
diff --git a/packages/checkbox/src/spectrum-checkbox.css b/first-gen/packages/checkbox/src/spectrum-checkbox.css
similarity index 100%
rename from packages/checkbox/src/spectrum-checkbox.css
rename to first-gen/packages/checkbox/src/spectrum-checkbox.css
diff --git a/packages/checkbox/stories/checkbox-sizes.stories.ts b/first-gen/packages/checkbox/stories/checkbox-sizes.stories.ts
similarity index 100%
rename from packages/checkbox/stories/checkbox-sizes.stories.ts
rename to first-gen/packages/checkbox/stories/checkbox-sizes.stories.ts
diff --git a/packages/checkbox/stories/checkbox.stories.ts b/first-gen/packages/checkbox/stories/checkbox.stories.ts
similarity index 100%
rename from packages/checkbox/stories/checkbox.stories.ts
rename to first-gen/packages/checkbox/stories/checkbox.stories.ts
diff --git a/packages/checkbox/test/benchmark/test-basic.ts b/first-gen/packages/checkbox/test/benchmark/test-basic.ts
similarity index 100%
rename from packages/checkbox/test/benchmark/test-basic.ts
rename to first-gen/packages/checkbox/test/benchmark/test-basic.ts
diff --git a/packages/checkbox/test/checkbox-memory.test.ts b/first-gen/packages/checkbox/test/checkbox-memory.test.ts
similarity index 100%
rename from packages/checkbox/test/checkbox-memory.test.ts
rename to first-gen/packages/checkbox/test/checkbox-memory.test.ts
diff --git a/packages/checkbox/test/checkbox.test.ts b/first-gen/packages/checkbox/test/checkbox.test.ts
similarity index 100%
rename from packages/checkbox/test/checkbox.test.ts
rename to first-gen/packages/checkbox/test/checkbox.test.ts
diff --git a/packages/checkbox/tsconfig.json b/first-gen/packages/checkbox/tsconfig.json
similarity index 100%
rename from packages/checkbox/tsconfig.json
rename to first-gen/packages/checkbox/tsconfig.json
diff --git a/packages/clear-button/.npmignore b/first-gen/packages/clear-button/.npmignore
similarity index 100%
rename from packages/clear-button/.npmignore
rename to first-gen/packages/clear-button/.npmignore
diff --git a/packages/clear-button/.npmrc b/first-gen/packages/clear-button/.npmrc
similarity index 100%
rename from packages/clear-button/.npmrc
rename to first-gen/packages/clear-button/.npmrc
diff --git a/packages/clear-button/CHANGELOG.md b/first-gen/packages/clear-button/CHANGELOG.md
similarity index 99%
rename from packages/clear-button/CHANGELOG.md
rename to first-gen/packages/clear-button/CHANGELOG.md
index ae2f3273c12..459968bab9b 100644
--- a/packages/clear-button/CHANGELOG.md
+++ b/first-gen/packages/clear-button/CHANGELOG.md
@@ -7,12 +7,10 @@
- [#5320](https://github.com/adobe/spectrum-web-components/pull/5320) [`15be17d`](https://github.com/adobe/spectrum-web-components/commit/15be17db91f1140ccf3cad52b1f2ed6c4b9e28ba) Thanks [@renovate](https://github.com/apps/renovate)! - Clear button styles have been updated to the latest Spectrum CSS version of the clear button. This update includes a major reduction in the number of custom property abstractions needed to support the multiple theming layers (as seen in the `styles` package).
This update spans the following additional packages:
-
- @spectrum-web-components/button
- @spectrum-web-components/styles
As the updated styles now offer additional styling options, we have added the following API to the clear button component that exists in the `button` package:
-
- `quiet` - when set to true, the button will be rendered as a quiet button. This is useful for cases where you want to use the clear button in a more subtle way.
- `disabled` - when set to true, the button will be rendered as a disabled button.
- `static-color` - currently this only supports the `white` context color. This is useful for cases where the button appears on a dark background texture. This is a replacement for the previously used `variant="overBackground"` attribute which is deprecated.
diff --git a/packages/clear-button/package.json b/first-gen/packages/clear-button/package.json
similarity index 96%
rename from packages/clear-button/package.json
rename to first-gen/packages/clear-button/package.json
index 636e5c867f2..0a66b1cafa2 100644
--- a/packages/clear-button/package.json
+++ b/first-gen/packages/clear-button/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/clear-button"
+ "directory": "first-gen/packages/clear-button"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/clear-button",
diff --git a/packages/clear-button/src/clear-button-overrides.css b/first-gen/packages/clear-button/src/clear-button-overrides.css
similarity index 100%
rename from packages/clear-button/src/clear-button-overrides.css
rename to first-gen/packages/clear-button/src/clear-button-overrides.css
diff --git a/packages/clear-button/src/clear-button.css b/first-gen/packages/clear-button/src/clear-button.css
similarity index 100%
rename from packages/clear-button/src/clear-button.css
rename to first-gen/packages/clear-button/src/clear-button.css
diff --git a/packages/clear-button/tsconfig.json b/first-gen/packages/clear-button/tsconfig.json
similarity index 100%
rename from packages/clear-button/tsconfig.json
rename to first-gen/packages/clear-button/tsconfig.json
diff --git a/packages/close-button/.npmignore b/first-gen/packages/close-button/.npmignore
similarity index 100%
rename from packages/close-button/.npmignore
rename to first-gen/packages/close-button/.npmignore
diff --git a/packages/close-button/.npmrc b/first-gen/packages/close-button/.npmrc
similarity index 100%
rename from packages/close-button/.npmrc
rename to first-gen/packages/close-button/.npmrc
diff --git a/packages/close-button/CHANGELOG.md b/first-gen/packages/close-button/CHANGELOG.md
similarity index 100%
rename from packages/close-button/CHANGELOG.md
rename to first-gen/packages/close-button/CHANGELOG.md
diff --git a/packages/close-button/package.json b/first-gen/packages/close-button/package.json
similarity index 96%
rename from packages/close-button/package.json
rename to first-gen/packages/close-button/package.json
index 22384b83c5e..6d41e7c2ca7 100644
--- a/packages/close-button/package.json
+++ b/first-gen/packages/close-button/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/close-button"
+ "directory": "first-gen/packages/close-button"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/close-button",
diff --git a/packages/close-button/src/close-button-overrides.css b/first-gen/packages/close-button/src/close-button-overrides.css
similarity index 100%
rename from packages/close-button/src/close-button-overrides.css
rename to first-gen/packages/close-button/src/close-button-overrides.css
diff --git a/packages/close-button/src/close-button.css b/first-gen/packages/close-button/src/close-button.css
similarity index 100%
rename from packages/close-button/src/close-button.css
rename to first-gen/packages/close-button/src/close-button.css
diff --git a/packages/close-button/src/spectrum-close-button.css b/first-gen/packages/close-button/src/spectrum-close-button.css
similarity index 100%
rename from packages/close-button/src/spectrum-close-button.css
rename to first-gen/packages/close-button/src/spectrum-close-button.css
diff --git a/packages/close-button/tsconfig.json b/first-gen/packages/close-button/tsconfig.json
similarity index 100%
rename from packages/close-button/tsconfig.json
rename to first-gen/packages/close-button/tsconfig.json
diff --git a/packages/coachmark/.npmrc b/first-gen/packages/coachmark/.npmrc
similarity index 100%
rename from packages/coachmark/.npmrc
rename to first-gen/packages/coachmark/.npmrc
diff --git a/packages/coachmark/CHANGELOG.md b/first-gen/packages/coachmark/CHANGELOG.md
similarity index 100%
rename from packages/coachmark/CHANGELOG.md
rename to first-gen/packages/coachmark/CHANGELOG.md
diff --git a/packages/coachmark/README.md b/first-gen/packages/coachmark/README.md
similarity index 100%
rename from packages/coachmark/README.md
rename to first-gen/packages/coachmark/README.md
diff --git a/packages/coachmark/coach-indicator.md b/first-gen/packages/coachmark/coach-indicator.md
similarity index 100%
rename from packages/coachmark/coach-indicator.md
rename to first-gen/packages/coachmark/coach-indicator.md
diff --git a/packages/coachmark/package.json b/first-gen/packages/coachmark/package.json
similarity index 98%
rename from packages/coachmark/package.json
rename to first-gen/packages/coachmark/package.json
index 29fc5b353a7..2b9d39acb79 100644
--- a/packages/coachmark/package.json
+++ b/first-gen/packages/coachmark/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/coachmark"
+ "directory": "first-gen/packages/coachmark"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/coachmark",
diff --git a/packages/coachmark/sp-coach-indicator.ts b/first-gen/packages/coachmark/sp-coach-indicator.ts
similarity index 100%
rename from packages/coachmark/sp-coach-indicator.ts
rename to first-gen/packages/coachmark/sp-coach-indicator.ts
diff --git a/packages/coachmark/sp-coachmark.ts b/first-gen/packages/coachmark/sp-coachmark.ts
similarity index 100%
rename from packages/coachmark/sp-coachmark.ts
rename to first-gen/packages/coachmark/sp-coachmark.ts
diff --git a/packages/coachmark/src/CoachIndicator.ts b/first-gen/packages/coachmark/src/CoachIndicator.ts
similarity index 100%
rename from packages/coachmark/src/CoachIndicator.ts
rename to first-gen/packages/coachmark/src/CoachIndicator.ts
diff --git a/packages/coachmark/src/Coachmark.ts b/first-gen/packages/coachmark/src/Coachmark.ts
similarity index 100%
rename from packages/coachmark/src/Coachmark.ts
rename to first-gen/packages/coachmark/src/Coachmark.ts
diff --git a/packages/coachmark/src/CoachmarkItem.ts b/first-gen/packages/coachmark/src/CoachmarkItem.ts
similarity index 100%
rename from packages/coachmark/src/CoachmarkItem.ts
rename to first-gen/packages/coachmark/src/CoachmarkItem.ts
diff --git a/packages/coachmark/src/coach-indicator-overrides.css b/first-gen/packages/coachmark/src/coach-indicator-overrides.css
similarity index 100%
rename from packages/coachmark/src/coach-indicator-overrides.css
rename to first-gen/packages/coachmark/src/coach-indicator-overrides.css
diff --git a/packages/coachmark/src/coach-indicator.css b/first-gen/packages/coachmark/src/coach-indicator.css
similarity index 100%
rename from packages/coachmark/src/coach-indicator.css
rename to first-gen/packages/coachmark/src/coach-indicator.css
diff --git a/packages/coachmark/src/coachmark-overrides.css b/first-gen/packages/coachmark/src/coachmark-overrides.css
similarity index 100%
rename from packages/coachmark/src/coachmark-overrides.css
rename to first-gen/packages/coachmark/src/coachmark-overrides.css
diff --git a/packages/coachmark/src/coachmark.css b/first-gen/packages/coachmark/src/coachmark.css
similarity index 100%
rename from packages/coachmark/src/coachmark.css
rename to first-gen/packages/coachmark/src/coachmark.css
diff --git a/packages/coachmark/src/index.ts b/first-gen/packages/coachmark/src/index.ts
similarity index 100%
rename from packages/coachmark/src/index.ts
rename to first-gen/packages/coachmark/src/index.ts
diff --git a/packages/coachmark/src/spectrum-coach-indicator.css b/first-gen/packages/coachmark/src/spectrum-coach-indicator.css
similarity index 100%
rename from packages/coachmark/src/spectrum-coach-indicator.css
rename to first-gen/packages/coachmark/src/spectrum-coach-indicator.css
diff --git a/packages/coachmark/src/spectrum-coachmark.css b/first-gen/packages/coachmark/src/spectrum-coachmark.css
similarity index 100%
rename from packages/coachmark/src/spectrum-coachmark.css
rename to first-gen/packages/coachmark/src/spectrum-coachmark.css
diff --git a/packages/coachmark/stories/coach-indicator-static.stories.ts b/first-gen/packages/coachmark/stories/coach-indicator-static.stories.ts
similarity index 100%
rename from packages/coachmark/stories/coach-indicator-static.stories.ts
rename to first-gen/packages/coachmark/stories/coach-indicator-static.stories.ts
diff --git a/packages/coachmark/stories/coach-indicator.stories.ts b/first-gen/packages/coachmark/stories/coach-indicator.stories.ts
similarity index 100%
rename from packages/coachmark/stories/coach-indicator.stories.ts
rename to first-gen/packages/coachmark/stories/coach-indicator.stories.ts
diff --git a/packages/coachmark/stories/coachmark.stories.ts b/first-gen/packages/coachmark/stories/coachmark.stories.ts
similarity index 100%
rename from packages/coachmark/stories/coachmark.stories.ts
rename to first-gen/packages/coachmark/stories/coachmark.stories.ts
diff --git a/packages/coachmark/stories/images.ts b/first-gen/packages/coachmark/stories/images.ts
similarity index 100%
rename from packages/coachmark/stories/images.ts
rename to first-gen/packages/coachmark/stories/images.ts
diff --git a/packages/coachmark/test/benchmark/basic-test.ts b/first-gen/packages/coachmark/test/benchmark/basic-test.ts
similarity index 100%
rename from packages/coachmark/test/benchmark/basic-test.ts
rename to first-gen/packages/coachmark/test/benchmark/basic-test.ts
diff --git a/packages/coachmark/test/coach-indicator-memory.test.ts b/first-gen/packages/coachmark/test/coach-indicator-memory.test.ts
similarity index 100%
rename from packages/coachmark/test/coach-indicator-memory.test.ts
rename to first-gen/packages/coachmark/test/coach-indicator-memory.test.ts
diff --git a/packages/coachmark/test/coach-indicator.test.ts b/first-gen/packages/coachmark/test/coach-indicator.test.ts
similarity index 100%
rename from packages/coachmark/test/coach-indicator.test.ts
rename to first-gen/packages/coachmark/test/coach-indicator.test.ts
diff --git a/packages/coachmark/test/coach-mark-memory.test.ts b/first-gen/packages/coachmark/test/coach-mark-memory.test.ts
similarity index 100%
rename from packages/coachmark/test/coach-mark-memory.test.ts
rename to first-gen/packages/coachmark/test/coach-mark-memory.test.ts
diff --git a/packages/coachmark/test/coachmark.test.ts b/first-gen/packages/coachmark/test/coachmark.test.ts
similarity index 100%
rename from packages/coachmark/test/coachmark.test.ts
rename to first-gen/packages/coachmark/test/coachmark.test.ts
diff --git a/packages/coachmark/tsconfig.json b/first-gen/packages/coachmark/tsconfig.json
similarity index 100%
rename from packages/coachmark/tsconfig.json
rename to first-gen/packages/coachmark/tsconfig.json
diff --git a/packages/color-area/.npmrc b/first-gen/packages/color-area/.npmrc
similarity index 100%
rename from packages/color-area/.npmrc
rename to first-gen/packages/color-area/.npmrc
diff --git a/packages/color-area/CHANGELOG.md b/first-gen/packages/color-area/CHANGELOG.md
similarity index 100%
rename from packages/color-area/CHANGELOG.md
rename to first-gen/packages/color-area/CHANGELOG.md
diff --git a/packages/color-area/README.md b/first-gen/packages/color-area/README.md
similarity index 100%
rename from packages/color-area/README.md
rename to first-gen/packages/color-area/README.md
diff --git a/packages/color-area/package.json b/first-gen/packages/color-area/package.json
similarity index 97%
rename from packages/color-area/package.json
rename to first-gen/packages/color-area/package.json
index 6660df7a448..520c5e50345 100644
--- a/packages/color-area/package.json
+++ b/first-gen/packages/color-area/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/color-area"
+ "directory": "first-gen/packages/color-area"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/color-area",
diff --git a/packages/color-area/sp-color-area.ts b/first-gen/packages/color-area/sp-color-area.ts
similarity index 100%
rename from packages/color-area/sp-color-area.ts
rename to first-gen/packages/color-area/sp-color-area.ts
diff --git a/packages/color-area/src/ColorArea.ts b/first-gen/packages/color-area/src/ColorArea.ts
similarity index 100%
rename from packages/color-area/src/ColorArea.ts
rename to first-gen/packages/color-area/src/ColorArea.ts
diff --git a/packages/color-area/src/color-area-overrides.css b/first-gen/packages/color-area/src/color-area-overrides.css
similarity index 100%
rename from packages/color-area/src/color-area-overrides.css
rename to first-gen/packages/color-area/src/color-area-overrides.css
diff --git a/packages/color-area/src/color-area.css b/first-gen/packages/color-area/src/color-area.css
similarity index 100%
rename from packages/color-area/src/color-area.css
rename to first-gen/packages/color-area/src/color-area.css
diff --git a/packages/color-area/src/index.ts b/first-gen/packages/color-area/src/index.ts
similarity index 100%
rename from packages/color-area/src/index.ts
rename to first-gen/packages/color-area/src/index.ts
diff --git a/packages/color-area/src/spectrum-color-area.css b/first-gen/packages/color-area/src/spectrum-color-area.css
similarity index 100%
rename from packages/color-area/src/spectrum-color-area.css
rename to first-gen/packages/color-area/src/spectrum-color-area.css
diff --git a/packages/color-area/src/types.ts b/first-gen/packages/color-area/src/types.ts
similarity index 100%
rename from packages/color-area/src/types.ts
rename to first-gen/packages/color-area/src/types.ts
diff --git a/packages/color-area/stories/color-area.stories.ts b/first-gen/packages/color-area/stories/color-area.stories.ts
similarity index 100%
rename from packages/color-area/stories/color-area.stories.ts
rename to first-gen/packages/color-area/stories/color-area.stories.ts
diff --git a/packages/color-area/test/benchmark/basic-test.ts b/first-gen/packages/color-area/test/benchmark/basic-test.ts
similarity index 100%
rename from packages/color-area/test/benchmark/basic-test.ts
rename to first-gen/packages/color-area/test/benchmark/basic-test.ts
diff --git a/packages/color-area/test/color-area-memory.test.ts b/first-gen/packages/color-area/test/color-area-memory.test.ts
similarity index 100%
rename from packages/color-area/test/color-area-memory.test.ts
rename to first-gen/packages/color-area/test/color-area-memory.test.ts
diff --git a/packages/color-area/test/color-area.test.ts b/first-gen/packages/color-area/test/color-area.test.ts
similarity index 100%
rename from packages/color-area/test/color-area.test.ts
rename to first-gen/packages/color-area/test/color-area.test.ts
diff --git a/packages/color-area/tsconfig.json b/first-gen/packages/color-area/tsconfig.json
similarity index 100%
rename from packages/color-area/tsconfig.json
rename to first-gen/packages/color-area/tsconfig.json
diff --git a/packages/color-field/.npmignore b/first-gen/packages/color-field/.npmignore
similarity index 100%
rename from packages/color-field/.npmignore
rename to first-gen/packages/color-field/.npmignore
diff --git a/packages/color-field/.npmrc b/first-gen/packages/color-field/.npmrc
similarity index 100%
rename from packages/color-field/.npmrc
rename to first-gen/packages/color-field/.npmrc
diff --git a/packages/color-field/CHANGELOG.md b/first-gen/packages/color-field/CHANGELOG.md
similarity index 100%
rename from packages/color-field/CHANGELOG.md
rename to first-gen/packages/color-field/CHANGELOG.md
diff --git a/packages/color-field/README.md b/first-gen/packages/color-field/README.md
similarity index 100%
rename from packages/color-field/README.md
rename to first-gen/packages/color-field/README.md
diff --git a/packages/color-field/package.json b/first-gen/packages/color-field/package.json
similarity index 97%
rename from packages/color-field/package.json
rename to first-gen/packages/color-field/package.json
index a17e2998d59..e13b8ed9196 100644
--- a/packages/color-field/package.json
+++ b/first-gen/packages/color-field/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/color-field"
+ "directory": "first-gen/packages/color-field"
},
"author": "Adobe",
"homepage": "https://adobe.github.io/spectrum-web-components/components/color-field",
diff --git a/packages/color-field/sp-color-field.ts b/first-gen/packages/color-field/sp-color-field.ts
similarity index 100%
rename from packages/color-field/sp-color-field.ts
rename to first-gen/packages/color-field/sp-color-field.ts
diff --git a/packages/color-field/src/ColorField.ts b/first-gen/packages/color-field/src/ColorField.ts
similarity index 100%
rename from packages/color-field/src/ColorField.ts
rename to first-gen/packages/color-field/src/ColorField.ts
diff --git a/packages/color-field/src/color-field.css b/first-gen/packages/color-field/src/color-field.css
similarity index 100%
rename from packages/color-field/src/color-field.css
rename to first-gen/packages/color-field/src/color-field.css
diff --git a/packages/color-field/src/index.ts b/first-gen/packages/color-field/src/index.ts
similarity index 100%
rename from packages/color-field/src/index.ts
rename to first-gen/packages/color-field/src/index.ts
diff --git a/packages/color-field/stories/args.ts b/first-gen/packages/color-field/stories/args.ts
similarity index 100%
rename from packages/color-field/stories/args.ts
rename to first-gen/packages/color-field/stories/args.ts
diff --git a/packages/color-field/stories/color-field-sizes.stories.ts b/first-gen/packages/color-field/stories/color-field-sizes.stories.ts
similarity index 100%
rename from packages/color-field/stories/color-field-sizes.stories.ts
rename to first-gen/packages/color-field/stories/color-field-sizes.stories.ts
diff --git a/packages/color-field/stories/color-field.stories.ts b/first-gen/packages/color-field/stories/color-field.stories.ts
similarity index 100%
rename from packages/color-field/stories/color-field.stories.ts
rename to first-gen/packages/color-field/stories/color-field.stories.ts
diff --git a/packages/color-field/stories/colors.ts b/first-gen/packages/color-field/stories/colors.ts
similarity index 100%
rename from packages/color-field/stories/colors.ts
rename to first-gen/packages/color-field/stories/colors.ts
diff --git a/packages/color-field/stories/template.ts b/first-gen/packages/color-field/stories/template.ts
similarity index 100%
rename from packages/color-field/stories/template.ts
rename to first-gen/packages/color-field/stories/template.ts
diff --git a/packages/color-field/test/benchmark/basic-test.ts b/first-gen/packages/color-field/test/benchmark/basic-test.ts
similarity index 100%
rename from packages/color-field/test/benchmark/basic-test.ts
rename to first-gen/packages/color-field/test/benchmark/basic-test.ts
diff --git a/packages/color-field/test/color-field-memory.test.ts b/first-gen/packages/color-field/test/color-field-memory.test.ts
similarity index 100%
rename from packages/color-field/test/color-field-memory.test.ts
rename to first-gen/packages/color-field/test/color-field-memory.test.ts
diff --git a/packages/color-field/test/color-field.test.ts b/first-gen/packages/color-field/test/color-field.test.ts
similarity index 100%
rename from packages/color-field/test/color-field.test.ts
rename to first-gen/packages/color-field/test/color-field.test.ts
diff --git a/packages/color-field/tsconfig.json b/first-gen/packages/color-field/tsconfig.json
similarity index 100%
rename from packages/color-field/tsconfig.json
rename to first-gen/packages/color-field/tsconfig.json
diff --git a/packages/color-handle/.npmrc b/first-gen/packages/color-handle/.npmrc
similarity index 100%
rename from packages/color-handle/.npmrc
rename to first-gen/packages/color-handle/.npmrc
diff --git a/packages/color-handle/CHANGELOG.md b/first-gen/packages/color-handle/CHANGELOG.md
similarity index 100%
rename from packages/color-handle/CHANGELOG.md
rename to first-gen/packages/color-handle/CHANGELOG.md
diff --git a/packages/color-handle/README.md b/first-gen/packages/color-handle/README.md
similarity index 100%
rename from packages/color-handle/README.md
rename to first-gen/packages/color-handle/README.md
diff --git a/packages/color-handle/package.json b/first-gen/packages/color-handle/package.json
similarity index 97%
rename from packages/color-handle/package.json
rename to first-gen/packages/color-handle/package.json
index 1f7a3e2d7d5..6dc20f39e12 100644
--- a/packages/color-handle/package.json
+++ b/first-gen/packages/color-handle/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/color-handle"
+ "directory": "first-gen/packages/color-handle"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/color-handle",
diff --git a/packages/color-handle/sp-color-handle.ts b/first-gen/packages/color-handle/sp-color-handle.ts
similarity index 100%
rename from packages/color-handle/sp-color-handle.ts
rename to first-gen/packages/color-handle/sp-color-handle.ts
diff --git a/packages/color-handle/src/ColorHandle.ts b/first-gen/packages/color-handle/src/ColorHandle.ts
similarity index 100%
rename from packages/color-handle/src/ColorHandle.ts
rename to first-gen/packages/color-handle/src/ColorHandle.ts
diff --git a/packages/color-handle/src/color-handle-overrides.css b/first-gen/packages/color-handle/src/color-handle-overrides.css
similarity index 100%
rename from packages/color-handle/src/color-handle-overrides.css
rename to first-gen/packages/color-handle/src/color-handle-overrides.css
diff --git a/packages/color-handle/src/color-handle.css b/first-gen/packages/color-handle/src/color-handle.css
similarity index 100%
rename from packages/color-handle/src/color-handle.css
rename to first-gen/packages/color-handle/src/color-handle.css
diff --git a/packages/color-handle/src/index.ts b/first-gen/packages/color-handle/src/index.ts
similarity index 100%
rename from packages/color-handle/src/index.ts
rename to first-gen/packages/color-handle/src/index.ts
diff --git a/packages/color-handle/src/spectrum-color-handle.css b/first-gen/packages/color-handle/src/spectrum-color-handle.css
similarity index 100%
rename from packages/color-handle/src/spectrum-color-handle.css
rename to first-gen/packages/color-handle/src/spectrum-color-handle.css
diff --git a/packages/color-handle/stories/color-handle.stories.ts b/first-gen/packages/color-handle/stories/color-handle.stories.ts
similarity index 100%
rename from packages/color-handle/stories/color-handle.stories.ts
rename to first-gen/packages/color-handle/stories/color-handle.stories.ts
diff --git a/packages/color-handle/test/benchmark/basic-test.ts b/first-gen/packages/color-handle/test/benchmark/basic-test.ts
similarity index 100%
rename from packages/color-handle/test/benchmark/basic-test.ts
rename to first-gen/packages/color-handle/test/benchmark/basic-test.ts
diff --git a/packages/color-handle/test/color-handle-memory.test.ts b/first-gen/packages/color-handle/test/color-handle-memory.test.ts
similarity index 100%
rename from packages/color-handle/test/color-handle-memory.test.ts
rename to first-gen/packages/color-handle/test/color-handle-memory.test.ts
diff --git a/packages/color-handle/test/color-handle.test.ts b/first-gen/packages/color-handle/test/color-handle.test.ts
similarity index 100%
rename from packages/color-handle/test/color-handle.test.ts
rename to first-gen/packages/color-handle/test/color-handle.test.ts
diff --git a/packages/color-handle/tsconfig.json b/first-gen/packages/color-handle/tsconfig.json
similarity index 100%
rename from packages/color-handle/tsconfig.json
rename to first-gen/packages/color-handle/tsconfig.json
diff --git a/packages/color-loupe/.npmrc b/first-gen/packages/color-loupe/.npmrc
similarity index 100%
rename from packages/color-loupe/.npmrc
rename to first-gen/packages/color-loupe/.npmrc
diff --git a/packages/color-loupe/CHANGELOG.md b/first-gen/packages/color-loupe/CHANGELOG.md
similarity index 100%
rename from packages/color-loupe/CHANGELOG.md
rename to first-gen/packages/color-loupe/CHANGELOG.md
diff --git a/packages/color-loupe/README.md b/first-gen/packages/color-loupe/README.md
similarity index 100%
rename from packages/color-loupe/README.md
rename to first-gen/packages/color-loupe/README.md
diff --git a/packages/color-loupe/package.json b/first-gen/packages/color-loupe/package.json
similarity index 97%
rename from packages/color-loupe/package.json
rename to first-gen/packages/color-loupe/package.json
index d518a283a1b..1cb35d49f82 100644
--- a/packages/color-loupe/package.json
+++ b/first-gen/packages/color-loupe/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/color-loupe"
+ "directory": "first-gen/packages/color-loupe"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/color-loupe",
diff --git a/packages/color-loupe/sp-color-loupe.ts b/first-gen/packages/color-loupe/sp-color-loupe.ts
similarity index 100%
rename from packages/color-loupe/sp-color-loupe.ts
rename to first-gen/packages/color-loupe/sp-color-loupe.ts
diff --git a/packages/color-loupe/src/ColorLoupe.ts b/first-gen/packages/color-loupe/src/ColorLoupe.ts
similarity index 100%
rename from packages/color-loupe/src/ColorLoupe.ts
rename to first-gen/packages/color-loupe/src/ColorLoupe.ts
diff --git a/packages/color-loupe/src/color-loupe-overrides.css b/first-gen/packages/color-loupe/src/color-loupe-overrides.css
similarity index 100%
rename from packages/color-loupe/src/color-loupe-overrides.css
rename to first-gen/packages/color-loupe/src/color-loupe-overrides.css
diff --git a/packages/color-loupe/src/color-loupe.css b/first-gen/packages/color-loupe/src/color-loupe.css
similarity index 100%
rename from packages/color-loupe/src/color-loupe.css
rename to first-gen/packages/color-loupe/src/color-loupe.css
diff --git a/packages/color-loupe/src/index.ts b/first-gen/packages/color-loupe/src/index.ts
similarity index 100%
rename from packages/color-loupe/src/index.ts
rename to first-gen/packages/color-loupe/src/index.ts
diff --git a/packages/color-loupe/src/spectrum-color-loupe.css b/first-gen/packages/color-loupe/src/spectrum-color-loupe.css
similarity index 100%
rename from packages/color-loupe/src/spectrum-color-loupe.css
rename to first-gen/packages/color-loupe/src/spectrum-color-loupe.css
diff --git a/packages/color-loupe/stories/color-loupe.stories.ts b/first-gen/packages/color-loupe/stories/color-loupe.stories.ts
similarity index 100%
rename from packages/color-loupe/stories/color-loupe.stories.ts
rename to first-gen/packages/color-loupe/stories/color-loupe.stories.ts
diff --git a/packages/color-loupe/test/benchmark/basic-test.ts b/first-gen/packages/color-loupe/test/benchmark/basic-test.ts
similarity index 100%
rename from packages/color-loupe/test/benchmark/basic-test.ts
rename to first-gen/packages/color-loupe/test/benchmark/basic-test.ts
diff --git a/packages/color-loupe/test/color-loupe-memory.test.ts b/first-gen/packages/color-loupe/test/color-loupe-memory.test.ts
similarity index 100%
rename from packages/color-loupe/test/color-loupe-memory.test.ts
rename to first-gen/packages/color-loupe/test/color-loupe-memory.test.ts
diff --git a/packages/color-loupe/test/color-loupe.test.ts b/first-gen/packages/color-loupe/test/color-loupe.test.ts
similarity index 100%
rename from packages/color-loupe/test/color-loupe.test.ts
rename to first-gen/packages/color-loupe/test/color-loupe.test.ts
diff --git a/packages/color-loupe/tsconfig.json b/first-gen/packages/color-loupe/tsconfig.json
similarity index 100%
rename from packages/color-loupe/tsconfig.json
rename to first-gen/packages/color-loupe/tsconfig.json
diff --git a/packages/color-slider/.npmrc b/first-gen/packages/color-slider/.npmrc
similarity index 100%
rename from packages/color-slider/.npmrc
rename to first-gen/packages/color-slider/.npmrc
diff --git a/packages/color-slider/CHANGELOG.md b/first-gen/packages/color-slider/CHANGELOG.md
similarity index 100%
rename from packages/color-slider/CHANGELOG.md
rename to first-gen/packages/color-slider/CHANGELOG.md
diff --git a/packages/color-slider/README.md b/first-gen/packages/color-slider/README.md
similarity index 100%
rename from packages/color-slider/README.md
rename to first-gen/packages/color-slider/README.md
diff --git a/packages/color-slider/package.json b/first-gen/packages/color-slider/package.json
similarity index 97%
rename from packages/color-slider/package.json
rename to first-gen/packages/color-slider/package.json
index 567fe87eac6..6b1bd384475 100644
--- a/packages/color-slider/package.json
+++ b/first-gen/packages/color-slider/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/color-slider"
+ "directory": "first-gen/packages/color-slider"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/color-slider",
diff --git a/packages/color-slider/sp-color-slider.ts b/first-gen/packages/color-slider/sp-color-slider.ts
similarity index 100%
rename from packages/color-slider/sp-color-slider.ts
rename to first-gen/packages/color-slider/sp-color-slider.ts
diff --git a/packages/color-slider/src/ColorSlider.ts b/first-gen/packages/color-slider/src/ColorSlider.ts
similarity index 100%
rename from packages/color-slider/src/ColorSlider.ts
rename to first-gen/packages/color-slider/src/ColorSlider.ts
diff --git a/packages/color-slider/src/color-slider-overrides.css b/first-gen/packages/color-slider/src/color-slider-overrides.css
similarity index 100%
rename from packages/color-slider/src/color-slider-overrides.css
rename to first-gen/packages/color-slider/src/color-slider-overrides.css
diff --git a/packages/color-slider/src/color-slider.css b/first-gen/packages/color-slider/src/color-slider.css
similarity index 100%
rename from packages/color-slider/src/color-slider.css
rename to first-gen/packages/color-slider/src/color-slider.css
diff --git a/packages/color-slider/src/index.ts b/first-gen/packages/color-slider/src/index.ts
similarity index 100%
rename from packages/color-slider/src/index.ts
rename to first-gen/packages/color-slider/src/index.ts
diff --git a/packages/color-slider/src/spectrum-color-slider.css b/first-gen/packages/color-slider/src/spectrum-color-slider.css
similarity index 100%
rename from packages/color-slider/src/spectrum-color-slider.css
rename to first-gen/packages/color-slider/src/spectrum-color-slider.css
diff --git a/packages/color-slider/src/types.ts b/first-gen/packages/color-slider/src/types.ts
similarity index 100%
rename from packages/color-slider/src/types.ts
rename to first-gen/packages/color-slider/src/types.ts
diff --git a/packages/color-slider/stories/color-slider.stories.ts b/first-gen/packages/color-slider/stories/color-slider.stories.ts
similarity index 100%
rename from packages/color-slider/stories/color-slider.stories.ts
rename to first-gen/packages/color-slider/stories/color-slider.stories.ts
diff --git a/packages/color-slider/stories/images.ts b/first-gen/packages/color-slider/stories/images.ts
similarity index 100%
rename from packages/color-slider/stories/images.ts
rename to first-gen/packages/color-slider/stories/images.ts
diff --git a/packages/color-slider/test/benchmark/basic-test.ts b/first-gen/packages/color-slider/test/benchmark/basic-test.ts
similarity index 100%
rename from packages/color-slider/test/benchmark/basic-test.ts
rename to first-gen/packages/color-slider/test/benchmark/basic-test.ts
diff --git a/packages/color-slider/test/color-slider-memory.test.ts b/first-gen/packages/color-slider/test/color-slider-memory.test.ts
similarity index 100%
rename from packages/color-slider/test/color-slider-memory.test.ts
rename to first-gen/packages/color-slider/test/color-slider-memory.test.ts
diff --git a/packages/color-slider/test/color-slider.test.ts b/first-gen/packages/color-slider/test/color-slider.test.ts
similarity index 100%
rename from packages/color-slider/test/color-slider.test.ts
rename to first-gen/packages/color-slider/test/color-slider.test.ts
diff --git a/packages/color-slider/tsconfig.json b/first-gen/packages/color-slider/tsconfig.json
similarity index 100%
rename from packages/color-slider/tsconfig.json
rename to first-gen/packages/color-slider/tsconfig.json
diff --git a/packages/color-wheel/.npmrc b/first-gen/packages/color-wheel/.npmrc
similarity index 100%
rename from packages/color-wheel/.npmrc
rename to first-gen/packages/color-wheel/.npmrc
diff --git a/packages/color-wheel/CHANGELOG.md b/first-gen/packages/color-wheel/CHANGELOG.md
similarity index 100%
rename from packages/color-wheel/CHANGELOG.md
rename to first-gen/packages/color-wheel/CHANGELOG.md
diff --git a/packages/color-wheel/README.md b/first-gen/packages/color-wheel/README.md
similarity index 100%
rename from packages/color-wheel/README.md
rename to first-gen/packages/color-wheel/README.md
diff --git a/packages/color-wheel/package.json b/first-gen/packages/color-wheel/package.json
similarity index 97%
rename from packages/color-wheel/package.json
rename to first-gen/packages/color-wheel/package.json
index f993e0231c6..ce15c866c67 100644
--- a/packages/color-wheel/package.json
+++ b/first-gen/packages/color-wheel/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/color-wheel"
+ "directory": "first-gen/packages/color-wheel"
},
"author": "Adobe",
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/color-wheel",
diff --git a/packages/color-wheel/sp-color-wheel.ts b/first-gen/packages/color-wheel/sp-color-wheel.ts
similarity index 100%
rename from packages/color-wheel/sp-color-wheel.ts
rename to first-gen/packages/color-wheel/sp-color-wheel.ts
diff --git a/packages/color-wheel/src/ColorWheel.ts b/first-gen/packages/color-wheel/src/ColorWheel.ts
similarity index 100%
rename from packages/color-wheel/src/ColorWheel.ts
rename to first-gen/packages/color-wheel/src/ColorWheel.ts
diff --git a/packages/color-wheel/src/color-wheel-overrides.css b/first-gen/packages/color-wheel/src/color-wheel-overrides.css
similarity index 100%
rename from packages/color-wheel/src/color-wheel-overrides.css
rename to first-gen/packages/color-wheel/src/color-wheel-overrides.css
diff --git a/packages/color-wheel/src/color-wheel.css b/first-gen/packages/color-wheel/src/color-wheel.css
similarity index 100%
rename from packages/color-wheel/src/color-wheel.css
rename to first-gen/packages/color-wheel/src/color-wheel.css
diff --git a/packages/color-wheel/src/index.ts b/first-gen/packages/color-wheel/src/index.ts
similarity index 100%
rename from packages/color-wheel/src/index.ts
rename to first-gen/packages/color-wheel/src/index.ts
diff --git a/packages/color-wheel/src/spectrum-color-wheel.css b/first-gen/packages/color-wheel/src/spectrum-color-wheel.css
similarity index 100%
rename from packages/color-wheel/src/spectrum-color-wheel.css
rename to first-gen/packages/color-wheel/src/spectrum-color-wheel.css
diff --git a/packages/color-wheel/src/types.ts b/first-gen/packages/color-wheel/src/types.ts
similarity index 100%
rename from packages/color-wheel/src/types.ts
rename to first-gen/packages/color-wheel/src/types.ts
diff --git a/packages/color-wheel/stories/color-wheel.stories.ts b/first-gen/packages/color-wheel/stories/color-wheel.stories.ts
similarity index 100%
rename from packages/color-wheel/stories/color-wheel.stories.ts
rename to first-gen/packages/color-wheel/stories/color-wheel.stories.ts
diff --git a/packages/color-wheel/test/benchmark/basic-test.ts b/first-gen/packages/color-wheel/test/benchmark/basic-test.ts
similarity index 100%
rename from packages/color-wheel/test/benchmark/basic-test.ts
rename to first-gen/packages/color-wheel/test/benchmark/basic-test.ts
diff --git a/packages/color-wheel/test/color-wheel-memory.test.ts b/first-gen/packages/color-wheel/test/color-wheel-memory.test.ts
similarity index 100%
rename from packages/color-wheel/test/color-wheel-memory.test.ts
rename to first-gen/packages/color-wheel/test/color-wheel-memory.test.ts
diff --git a/packages/color-wheel/test/color-wheel.test.ts b/first-gen/packages/color-wheel/test/color-wheel.test.ts
similarity index 100%
rename from packages/color-wheel/test/color-wheel.test.ts
rename to first-gen/packages/color-wheel/test/color-wheel.test.ts
diff --git a/packages/color-wheel/tsconfig.json b/first-gen/packages/color-wheel/tsconfig.json
similarity index 100%
rename from packages/color-wheel/tsconfig.json
rename to first-gen/packages/color-wheel/tsconfig.json
diff --git a/packages/combobox/.npmrc b/first-gen/packages/combobox/.npmrc
similarity index 100%
rename from packages/combobox/.npmrc
rename to first-gen/packages/combobox/.npmrc
diff --git a/packages/combobox/CHANGELOG.md b/first-gen/packages/combobox/CHANGELOG.md
similarity index 99%
rename from packages/combobox/CHANGELOG.md
rename to first-gen/packages/combobox/CHANGELOG.md
index 5d58fed00cf..2b29048153e 100644
--- a/packages/combobox/CHANGELOG.md
+++ b/first-gen/packages/combobox/CHANGELOG.md
@@ -56,7 +56,6 @@
### Minor Changes
- [#5202](https://github.com/adobe/spectrum-web-components/pull/5202) [`fa4be70`](https://github.com/adobe/spectrum-web-components/commit/fa4be70e9ab9dbeff26867edd3bdeb3f41c423e3) Thanks [@Rajdeepc](https://github.com/Rajdeepc)! - Updates the combobox component from version 4.0.0-s2-foundations.21 to 4.1.2. This work also addresses the design feedback for combobox in S2 foundations:
-
- corrects the border colors for several combobox states including focus, keyboardFocus, focus+hover, disabled, read-only for all themes
- increases the specificity of the `#textfield:hover .input` selector to `#textfield:hover .input:focus` in order to properly render the focus+hover border color styles (within the `combobox.css` file)
- adds an additional selector for disabled comboboxes that correctly renders the border colors based on theme context
diff --git a/packages/combobox/README.md b/first-gen/packages/combobox/README.md
similarity index 100%
rename from packages/combobox/README.md
rename to first-gen/packages/combobox/README.md
diff --git a/packages/combobox/package.json b/first-gen/packages/combobox/package.json
similarity index 98%
rename from packages/combobox/package.json
rename to first-gen/packages/combobox/package.json
index 7d3a7ee68d8..0d412bf1974 100644
--- a/packages/combobox/package.json
+++ b/first-gen/packages/combobox/package.json
@@ -9,7 +9,7 @@
"repository": {
"type": "git",
"url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/combobox"
+ "directory": "first-gen/packages/combobox"
},
"author": "Adobe",
"homepage": "https://adobe.github.io/spectrum-web-components/components/combobox",
diff --git a/packages/combobox/sp-combobox.ts b/first-gen/packages/combobox/sp-combobox.ts
similarity index 100%
rename from packages/combobox/sp-combobox.ts
rename to first-gen/packages/combobox/sp-combobox.ts
diff --git a/packages/combobox/src/Combobox.ts b/first-gen/packages/combobox/src/Combobox.ts
similarity index 94%
rename from packages/combobox/src/Combobox.ts
rename to first-gen/packages/combobox/src/Combobox.ts
index 2495b1537aa..7822c80c4a0 100644
--- a/packages/combobox/src/Combobox.ts
+++ b/first-gen/packages/combobox/src/Combobox.ts
@@ -64,6 +64,16 @@ export class Combobox extends Textfield {
@state()
private activeDescendant?: ComboboxOption | MenuItem;
+ /**
+ * Internal tracking property to detect activeDescendant changes
+ */
+ private _previousActiveDescendant?: ComboboxOption | MenuItem;
+
+ /**
+ * Internal tracking property to detect optionEls changes
+ */
+ private _previousOptionEls?: MenuItem[];
+
@property({ type: String })
public override autocomplete: 'list' | 'none' = 'none';
@@ -583,11 +593,7 @@ export class Combobox extends Textfield {
}
}
- protected override updated(
- changed: PropertyValues<
- this & { optionEls: MenuItem[]; activeDescendant: MenuItem }
- >
- ): void {
+ protected override updated(changed: PropertyValues
+ ${masks.map(
+ (mask, index) => html`
+
+ `;
+ }
+}
diff --git a/packages/progress-circle/src/index.ts b/first-gen/packages/progress-circle/src/index.ts
similarity index 100%
rename from packages/progress-circle/src/index.ts
rename to first-gen/packages/progress-circle/src/index.ts
diff --git a/packages/progress-circle/src/progress-circle-overrides.css b/first-gen/packages/progress-circle/src/progress-circle-overrides.css
similarity index 100%
rename from packages/progress-circle/src/progress-circle-overrides.css
rename to first-gen/packages/progress-circle/src/progress-circle-overrides.css
diff --git a/packages/progress-circle/src/progress-circle.css b/first-gen/packages/progress-circle/src/progress-circle.css
similarity index 100%
rename from packages/progress-circle/src/progress-circle.css
rename to first-gen/packages/progress-circle/src/progress-circle.css
diff --git a/packages/progress-circle/src/spectrum-progress-circle.css b/first-gen/packages/progress-circle/src/spectrum-progress-circle.css
similarity index 100%
rename from packages/progress-circle/src/spectrum-progress-circle.css
rename to first-gen/packages/progress-circle/src/spectrum-progress-circle.css
diff --git a/packages/progress-circle/stories/progress-circle.stories.ts b/first-gen/packages/progress-circle/stories/progress-circle.stories.ts
similarity index 98%
rename from packages/progress-circle/stories/progress-circle.stories.ts
rename to first-gen/packages/progress-circle/stories/progress-circle.stories.ts
index 2b25cae2592..640498dfce4 100644
--- a/packages/progress-circle/stories/progress-circle.stories.ts
+++ b/first-gen/packages/progress-circle/stories/progress-circle.stories.ts
@@ -47,7 +47,6 @@ export const Default = ({ indeterminate }: StoryArgs = {}): TemplateResult => {
progress="27"
size="s"
?indeterminate=${indeterminate}
- label="Loading progress demo"
>
+
+ `
+ )}
+
+
+
+
-
- `;
- }
-}
diff --git a/packages/field-label/src/field-label-overrides.css b/packages/field-label/src/field-label-overrides.css
deleted file mode 100644
index eff41c46903..00000000000
--- a/packages/field-label/src/field-label-overrides.css
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
- --spectrum-field-label-top-to-text: var(--system-field-label-top-to-text);
- --spectrum-field-label-bottom-to-text: var(--system-field-label-bottom-to-text);
-}
-
-:host([size="s"]) {
- --spectrum-field-label-top-to-text: var(--system-field-label-top-to-text-small);
- --spectrum-field-label-bottom-to-text: var(--system-field-label-bottom-to-text-small);
-}
-
-:host([size="l"]) {
- --spectrum-field-label-top-to-text: var(--system-field-label-top-to-text-large);
- --spectrum-field-label-bottom-to-text: var(--system-field-label-bottom-to-text-large);
-}
-
-:host([size="xl"]) {
- --spectrum-field-label-top-to-text: var(--system-field-label-top-to-text-extra-large);
- --spectrum-field-label-bottom-to-text: var(--system-field-label-bottom-to-text-extra-large);
-}
diff --git a/packages/help-text/src/help-text-overrides.css b/packages/help-text/src/help-text-overrides.css
deleted file mode 100644
index d030f5eeb02..00000000000
--- a/packages/help-text/src/help-text-overrides.css
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-
-:host {
- --spectrum-helptext-top-to-text: var(--system-helptext-top-to-text);
- --spectrum-helptext-bottom-to-text: var(--system-helptext-bottom-to-text);
-}
-
-:host([size="s"]) {
- --spectrum-helptext-top-to-text: var(--system-helptext-top-to-text-small);
- --spectrum-helptext-bottom-to-text: var(--system-helptext-bottom-to-text-small);
-}
-
-:host([size="l"]) {
- --spectrum-helptext-top-to-text: var(--system-helptext-top-to-text-large);
- --spectrum-helptext-bottom-to-text: var(--system-helptext-bottom-to-text-large);
-}
-
-:host([size="xl"]) {
- --spectrum-helptext-top-to-text: var(--system-helptext-top-to-text-extra-large);
- --spectrum-helptext-bottom-to-text: var(--system-helptext-bottom-to-text-extra-large);
-}
diff --git a/packages/icons/src/icons-large.svg.ts b/packages/icons/src/icons-large.svg.ts
deleted file mode 100644
index c24942eab2d..00000000000
--- a/packages/icons/src/icons-large.svg.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-import { svg } from '@spectrum-web-components/base';
-export default svg``;
diff --git a/packages/icons/src/icons-medium.svg.ts b/packages/icons/src/icons-medium.svg.ts
deleted file mode 100644
index 4790ea4d69d..00000000000
--- a/packages/icons/src/icons-medium.svg.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright 2025 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.
- */
-import { svg } from '@spectrum-web-components/base';
-export default svg``;
diff --git a/projects/css-custom-vars-viewer/src/parsed-data.ts b/projects/css-custom-vars-viewer/src/parsed-data.ts
deleted file mode 100644
index 482a0eebd48..00000000000
--- a/projects/css-custom-vars-viewer/src/parsed-data.ts
+++ /dev/null
@@ -1,1769 +0,0 @@
-/* eslint-disable notice/notice */
-/* eslint-disable prettier/prettier */
- import { Item } from './CssTable.js';
-
- export const grayValues: Item[] = [
- {
- "customVar": "--spectrum-gray-50",
- "sets": {
- "light": "rgb(255, 255, 255)",
- "dark": "rgb(29, 29, 29)",
- "darkest": "rgb(0, 0, 0)",
- "wireframe": "rgb(255, 255, 255)"
- }
- },
- {
- "customVar": "--spectrum-gray-75",
- "sets": {
- "light": "rgb(253, 253, 253)",
- "dark": "rgb(38, 38, 38)",
- "darkest": "rgb(14, 14, 14)",
- "wireframe": "rgb(253, 253, 254)"
- }
- },
- {
- "customVar": "--spectrum-gray-100",
- "sets": {
- "light": "rgb(248, 248, 248)",
- "dark": "rgb(50, 50, 50)",
- "darkest": "rgb(29, 29, 29)",
- "wireframe": "rgb(244, 246, 252)"
- }
- },
- {
- "customVar": "--spectrum-gray-200",
- "sets": {
- "light": "rgb(230, 230, 230)",
- "dark": "rgb(63, 63, 63)",
- "darkest": "rgb(48, 48, 48)",
- "wireframe": "rgb(230, 236, 248)"
- }
- },
- {
- "customVar": "--spectrum-gray-300",
- "sets": {
- "light": "rgb(213, 213, 213)",
- "dark": "rgb(84, 84, 84)",
- "darkest": "rgb(75, 75, 75)",
- "wireframe": "rgb(210, 220, 243)"
- }
- },
- {
- "customVar": "--spectrum-gray-400",
- "sets": {
- "light": "rgb(177, 177, 177)",
- "dark": "rgb(112, 112, 112)",
- "darkest": "rgb(106, 106, 106)",
- "wireframe": "rgb(183, 200, 235)"
- }
- },
- {
- "customVar": "--spectrum-gray-500",
- "sets": {
- "light": "rgb(144, 144, 144)",
- "dark": "rgb(144, 144, 144)",
- "darkest": "rgb(141, 141, 141)",
- "wireframe": "rgb(152, 176, 226)"
- }
- },
- {
- "customVar": "--spectrum-gray-600",
- "sets": {
- "light": "rgb(109, 109, 109)",
- "dark": "rgb(178, 178, 178)",
- "darkest": "rgb(176, 176, 176)",
- "wireframe": "rgb(113, 144, 210)"
- }
- },
- {
- "customVar": "--spectrum-gray-700",
- "sets": {
- "light": "rgb(70, 70, 70)",
- "dark": "rgb(209, 209, 209)",
- "darkest": "rgb(208, 208, 208)",
- "wireframe": "rgb(78, 112, 187)"
- }
- },
- {
- "customVar": "--spectrum-gray-800",
- "sets": {
- "light": "rgb(34, 34, 34)",
- "dark": "rgb(235, 235, 235)",
- "darkest": "rgb(235, 235, 235)",
- "wireframe": "rgb(73, 110, 194)"
- }
- },
- {
- "customVar": "--spectrum-gray-900",
- "sets": {
- "light": "rgb(0, 0, 0)",
- "dark": "rgb(255, 255, 255)",
- "darkest": "rgb(255, 255, 255)",
- "wireframe": "rgb(72, 110, 194)"
- }
- }
-];
-export const blueValues: Item[] = [
- {
- "customVar": "--spectrum-blue-100",
- "sets": {
- "light": "rgb(224, 242, 255)",
- "dark": "rgb(0, 56, 119)",
- "darkest": "rgb(0, 38, 81)",
- "wireframe": "rgb(242, 245, 251)"
- }
- },
- {
- "customVar": "--spectrum-blue-200",
- "sets": {
- "light": "rgb(202, 232, 255)",
- "dark": "rgb(0, 65, 138)",
- "darkest": "rgb(0, 50, 106)",
- "wireframe": "rgb(237, 241, 250)"
- }
- },
- {
- "customVar": "--spectrum-blue-300",
- "sets": {
- "light": "rgb(181, 222, 255)",
- "dark": "rgb(0, 77, 163)",
- "darkest": "rgb(0, 64, 135)",
- "wireframe": "rgb(233, 238, 248)"
- }
- },
- {
- "customVar": "--spectrum-blue-400",
- "sets": {
- "light": "rgb(150, 206, 253)",
- "dark": "rgb(0, 89, 194)",
- "darkest": "rgb(0, 78, 166)",
- "wireframe": "rgb(226, 232, 247)"
- }
- },
- {
- "customVar": "--spectrum-blue-500",
- "sets": {
- "light": "rgb(120, 187, 250)",
- "dark": "rgb(3, 103, 224)",
- "darkest": "rgb(0, 92, 200)",
- "wireframe": "rgb(216, 225, 244)"
- }
- },
- {
- "customVar": "--spectrum-blue-600",
- "sets": {
- "light": "rgb(89, 167, 246)",
- "dark": "rgb(19, 121, 243)",
- "darkest": "rgb(6, 108, 231)",
- "wireframe": "rgb(203, 215, 241)"
- }
- },
- {
- "customVar": "--spectrum-blue-700",
- "sets": {
- "light": "rgb(56, 146, 243)",
- "dark": "rgb(52, 143, 244)",
- "darkest": "rgb(29, 128, 245)",
- "wireframe": "rgb(190, 205, 237)"
- }
- },
- {
- "customVar": "--spectrum-blue-800",
- "sets": {
- "light": "rgb(20, 122, 243)",
- "dark": "rgb(84, 163, 246)",
- "darkest": "rgb(64, 150, 243)",
- "wireframe": "rgb(173, 192, 233)"
- }
- },
- {
- "customVar": "--spectrum-blue-900",
- "sets": {
- "light": "rgb(2, 101, 220)",
- "dark": "rgb(114, 183, 249)",
- "darkest": "rgb(94, 170, 247)",
- "wireframe": "rgb(154, 177, 227)"
- }
- },
- {
- "customVar": "--spectrum-blue-1000",
- "sets": {
- "light": "rgb(0, 84, 182)",
- "dark": "rgb(143, 202, 252)",
- "darkest": "rgb(124, 189, 250)",
- "wireframe": "rgb(133, 161, 219)"
- }
- },
- {
- "customVar": "--spectrum-blue-1100",
- "sets": {
- "light": "rgb(0, 68, 145)",
- "dark": "rgb(174, 219, 254)",
- "darkest": "rgb(152, 206, 253)",
- "wireframe": "rgb(114, 145, 211)"
- }
- },
- {
- "customVar": "--spectrum-blue-1200",
- "sets": {
- "light": "rgb(0, 53, 113)",
- "dark": "rgb(204, 233, 255)",
- "darkest": "rgb(179, 222, 254)",
- "wireframe": "rgb(96, 130, 201)"
- }
- },
- {
- "customVar": "--spectrum-blue-1300",
- "sets": {
- "light": "rgb(0, 39, 84)",
- "dark": "rgb(232, 246, 255)",
- "darkest": "rgb(206, 234, 255)",
- "wireframe": "rgb(82, 117, 192)"
- }
- },
- {
- "customVar": "--spectrum-blue-1400",
- "sets": {
- "light": "rgb(0, 28, 60)",
- "dark": "rgb(255, 255, 255)",
- "darkest": "rgb(227, 243, 255)",
- "wireframe": "rgb(74, 109, 184)"
- }
- }
-];
-export const redValues: Item[] = [
- {
- "customVar": "--spectrum-red-100",
- "sets": {
- "light": "rgb(255, 235, 231)",
- "dark": "rgb(123, 0, 0)",
- "darkest": "rgb(87, 0, 0)",
- "wireframe": "rgb(242, 245, 251)"
- }
- },
- {
- "customVar": "--spectrum-red-200",
- "sets": {
- "light": "rgb(255, 221, 214)",
- "dark": "rgb(141, 0, 0)",
- "darkest": "rgb(110, 0, 0)",
- "wireframe": "rgb(237, 241, 250)"
- }
- },
- {
- "customVar": "--spectrum-red-300",
- "sets": {
- "light": "rgb(255, 205, 195)",
- "dark": "rgb(165, 0, 0)",
- "darkest": "rgb(138, 0, 0)",
- "wireframe": "rgb(233, 238, 248)"
- }
- },
- {
- "customVar": "--spectrum-red-400",
- "sets": {
- "light": "rgb(255, 183, 169)",
- "dark": "rgb(190, 4, 3)",
- "darkest": "rgb(167, 0, 0)",
- "wireframe": "rgb(226, 232, 247)"
- }
- },
- {
- "customVar": "--spectrum-red-500",
- "sets": {
- "light": "rgb(255, 155, 136)",
- "dark": "rgb(215, 25, 19)",
- "darkest": "rgb(196, 7, 6)",
- "wireframe": "rgb(216, 225, 244)"
- }
- },
- {
- "customVar": "--spectrum-red-600",
- "sets": {
- "light": "rgb(255, 124, 101)",
- "dark": "rgb(234, 56, 41)",
- "darkest": "rgb(221, 33, 24)",
- "wireframe": "rgb(203, 215, 241)"
- }
- },
- {
- "customVar": "--spectrum-red-700",
- "sets": {
- "light": "rgb(247, 92, 70)",
- "dark": "rgb(246, 88, 67)",
- "darkest": "rgb(238, 67, 49)",
- "wireframe": "rgb(190, 205, 237)"
- }
- },
- {
- "customVar": "--spectrum-red-800",
- "sets": {
- "light": "rgb(234, 56, 41)",
- "dark": "rgb(255, 117, 94)",
- "darkest": "rgb(249, 99, 76)",
- "wireframe": "rgb(173, 192, 233)"
- }
- },
- {
- "customVar": "--spectrum-red-900",
- "sets": {
- "light": "rgb(211, 21, 16)",
- "dark": "rgb(255, 149, 129)",
- "darkest": "rgb(255, 129, 107)",
- "wireframe": "rgb(154, 177, 227)"
- }
- },
- {
- "customVar": "--spectrum-red-1000",
- "sets": {
- "light": "rgb(180, 0, 0)",
- "dark": "rgb(255, 176, 161)",
- "darkest": "rgb(255, 158, 140)",
- "wireframe": "rgb(133, 161, 219)"
- }
- },
- {
- "customVar": "--spectrum-red-1100",
- "sets": {
- "light": "rgb(147, 0, 0)",
- "dark": "rgb(255, 201, 189)",
- "darkest": "rgb(255, 183, 169)",
- "wireframe": "rgb(114, 145, 211)"
- }
- },
- {
- "customVar": "--spectrum-red-1200",
- "sets": {
- "light": "rgb(116, 0, 0)",
- "dark": "rgb(255, 222, 216)",
- "darkest": "rgb(255, 205, 195)",
- "wireframe": "rgb(96, 130, 201)"
- }
- },
- {
- "customVar": "--spectrum-red-1300",
- "sets": {
- "light": "rgb(89, 0, 0)",
- "dark": "rgb(255, 241, 238)",
- "darkest": "rgb(255, 223, 217)",
- "wireframe": "rgb(82, 117, 192)"
- }
- },
- {
- "customVar": "--spectrum-red-1400",
- "sets": {
- "light": "rgb(67, 0, 0)",
- "dark": "rgb(255, 255, 255)",
- "darkest": "rgb(255, 237, 234)",
- "wireframe": "rgb(74, 109, 184)"
- }
- }
-];
-export const orangeValues: Item[] = [
- {
- "customVar": "--spectrum-orange-100",
- "sets": {
- "light": "rgb(255, 236, 204)",
- "dark": "rgb(102, 37, 0)",
- "darkest": "rgb(72, 24, 1)",
- "wireframe": "rgb(242, 245, 251)"
- }
- },
- {
- "customVar": "--spectrum-orange-200",
- "sets": {
- "light": "rgb(255, 223, 173)",
- "dark": "rgb(117, 45, 0)",
- "darkest": "rgb(92, 32, 0)",
- "wireframe": "rgb(237, 241, 250)"
- }
- },
- {
- "customVar": "--spectrum-orange-300",
- "sets": {
- "light": "rgb(253, 210, 145)",
- "dark": "rgb(137, 55, 0)",
- "darkest": "rgb(115, 43, 0)",
- "wireframe": "rgb(233, 238, 248)"
- }
- },
- {
- "customVar": "--spectrum-orange-400",
- "sets": {
- "light": "rgb(255, 187, 99)",
- "dark": "rgb(158, 66, 0)",
- "darkest": "rgb(138, 55, 0)",
- "wireframe": "rgb(226, 232, 247)"
- }
- },
- {
- "customVar": "--spectrum-orange-500",
- "sets": {
- "light": "rgb(255, 160, 55)",
- "dark": "rgb(180, 78, 0)",
- "darkest": "rgb(162, 68, 0)",
- "wireframe": "rgb(216, 225, 244)"
- }
- },
- {
- "customVar": "--spectrum-orange-600",
- "sets": {
- "light": "rgb(246, 133, 17)",
- "dark": "rgb(202, 93, 0)",
- "darkest": "rgb(186, 82, 0)",
- "wireframe": "rgb(203, 215, 241)"
- }
- },
- {
- "customVar": "--spectrum-orange-700",
- "sets": {
- "light": "rgb(228, 111, 0)",
- "dark": "rgb(225, 109, 0)",
- "darkest": "rgb(210, 98, 0)",
- "wireframe": "rgb(190, 205, 237)"
- }
- },
- {
- "customVar": "--spectrum-orange-800",
- "sets": {
- "light": "rgb(203, 93, 0)",
- "dark": "rgb(244, 129, 12)",
- "darkest": "rgb(232, 116, 0)",
- "wireframe": "rgb(173, 192, 233)"
- }
- },
- {
- "customVar": "--spectrum-orange-900",
- "sets": {
- "light": "rgb(177, 76, 0)",
- "dark": "rgb(254, 154, 46)",
- "darkest": "rgb(249, 137, 23)",
- "wireframe": "rgb(154, 177, 227)"
- }
- },
- {
- "customVar": "--spectrum-orange-1000",
- "sets": {
- "light": "rgb(149, 61, 0)",
- "dark": "rgb(255, 181, 88)",
- "darkest": "rgb(255, 162, 59)",
- "wireframe": "rgb(133, 161, 219)"
- }
- },
- {
- "customVar": "--spectrum-orange-1100",
- "sets": {
- "light": "rgb(122, 47, 0)",
- "dark": "rgb(253, 206, 136)",
- "darkest": "rgb(255, 188, 102)",
- "wireframe": "rgb(114, 145, 211)"
- }
- },
- {
- "customVar": "--spectrum-orange-1200",
- "sets": {
- "light": "rgb(97, 35, 0)",
- "dark": "rgb(255, 225, 179)",
- "darkest": "rgb(253, 210, 145)",
- "wireframe": "rgb(96, 130, 201)"
- }
- },
- {
- "customVar": "--spectrum-orange-1300",
- "sets": {
- "light": "rgb(73, 25, 1)",
- "dark": "rgb(255, 242, 221)",
- "darkest": "rgb(255, 226, 181)",
- "wireframe": "rgb(82, 117, 192)"
- }
- },
- {
- "customVar": "--spectrum-orange-1400",
- "sets": {
- "light": "rgb(53, 18, 1)",
- "dark": "rgb(255, 253, 249)",
- "darkest": "rgb(255, 239, 213)",
- "wireframe": "rgb(74, 109, 184)"
- }
- }
-];
-export const yellowValues: Item[] = [
- {
- "customVar": "--spectrum-yellow-100",
- "sets": {
- "light": "rgb(251, 241, 152)",
- "dark": "rgb(76, 54, 0)",
- "darkest": "rgb(53, 36, 0)",
- "wireframe": "rgb(242, 245, 251)"
- }
- },
- {
- "customVar": "--spectrum-yellow-200",
- "sets": {
- "light": "rgb(248, 231, 80)",
- "dark": "rgb(88, 64, 0)",
- "darkest": "rgb(68, 47, 0)",
- "wireframe": "rgb(237, 241, 250)"
- }
- },
- {
- "customVar": "--spectrum-yellow-300",
- "sets": {
- "light": "rgb(248, 217, 4)",
- "dark": "rgb(103, 76, 0)",
- "darkest": "rgb(86, 62, 0)",
- "wireframe": "rgb(233, 238, 248)"
- }
- },
- {
- "customVar": "--spectrum-yellow-400",
- "sets": {
- "light": "rgb(232, 198, 0)",
- "dark": "rgb(119, 89, 0)",
- "darkest": "rgb(103, 77, 0)",
- "wireframe": "rgb(226, 232, 247)"
- }
- },
- {
- "customVar": "--spectrum-yellow-500",
- "sets": {
- "light": "rgb(215, 179, 0)",
- "dark": "rgb(136, 104, 0)",
- "darkest": "rgb(122, 92, 0)",
- "wireframe": "rgb(216, 225, 244)"
- }
- },
- {
- "customVar": "--spectrum-yellow-600",
- "sets": {
- "light": "rgb(196, 159, 0)",
- "dark": "rgb(155, 120, 0)",
- "darkest": "rgb(141, 108, 0)",
- "wireframe": "rgb(203, 215, 241)"
- }
- },
- {
- "customVar": "--spectrum-yellow-700",
- "sets": {
- "light": "rgb(176, 140, 0)",
- "dark": "rgb(174, 137, 0)",
- "darkest": "rgb(161, 126, 0)",
- "wireframe": "rgb(190, 205, 237)"
- }
- },
- {
- "customVar": "--spectrum-yellow-800",
- "sets": {
- "light": "rgb(155, 120, 0)",
- "dark": "rgb(192, 156, 0)",
- "darkest": "rgb(180, 144, 0)",
- "wireframe": "rgb(173, 192, 233)"
- }
- },
- {
- "customVar": "--spectrum-yellow-900",
- "sets": {
- "light": "rgb(133, 102, 0)",
- "dark": "rgb(211, 174, 0)",
- "darkest": "rgb(199, 162, 0)",
- "wireframe": "rgb(154, 177, 227)"
- }
- },
- {
- "customVar": "--spectrum-yellow-1000",
- "sets": {
- "light": "rgb(112, 83, 0)",
- "dark": "rgb(228, 194, 0)",
- "darkest": "rgb(216, 181, 0)",
- "wireframe": "rgb(133, 161, 219)"
- }
- },
- {
- "customVar": "--spectrum-yellow-1100",
- "sets": {
- "light": "rgb(91, 67, 0)",
- "dark": "rgb(244, 213, 0)",
- "darkest": "rgb(233, 199, 0)",
- "wireframe": "rgb(114, 145, 211)"
- }
- },
- {
- "customVar": "--spectrum-yellow-1200",
- "sets": {
- "light": "rgb(72, 51, 0)",
- "dark": "rgb(249, 232, 92)",
- "darkest": "rgb(247, 216, 4)",
- "wireframe": "rgb(96, 130, 201)"
- }
- },
- {
- "customVar": "--spectrum-yellow-1300",
- "sets": {
- "light": "rgb(54, 37, 0)",
- "dark": "rgb(252, 246, 187)",
- "darkest": "rgb(249, 233, 97)",
- "wireframe": "rgb(82, 117, 192)"
- }
- },
- {
- "customVar": "--spectrum-yellow-1400",
- "sets": {
- "light": "rgb(40, 26, 0)",
- "dark": "rgb(255, 255, 255)",
- "darkest": "rgb(252, 243, 170)",
- "wireframe": "rgb(74, 109, 184)"
- }
- }
-];
-export const chartreuseValues: Item[] = [
- {
- "customVar": "--spectrum-chartreuse-100",
- "sets": {
- "light": "rgb(219, 252, 110)",
- "dark": "rgb(48, 64, 0)",
- "darkest": "rgb(32, 43, 0)",
- "wireframe": "rgb(242, 245, 251)"
- }
- },
- {
- "customVar": "--spectrum-chartreuse-200",
- "sets": {
- "light": "rgb(203, 244, 67)",
- "dark": "rgb(55, 74, 0)",
- "darkest": "rgb(42, 56, 0)",
- "wireframe": "rgb(237, 241, 250)"
- }
- },
- {
- "customVar": "--spectrum-chartreuse-300",
- "sets": {
- "light": "rgb(188, 233, 42)",
- "dark": "rgb(65, 87, 0)",
- "darkest": "rgb(54, 72, 0)",
- "wireframe": "rgb(233, 238, 248)"
- }
- },
- {
- "customVar": "--spectrum-chartreuse-400",
- "sets": {
- "light": "rgb(170, 216, 22)",
- "dark": "rgb(76, 102, 0)",
- "darkest": "rgb(66, 88, 0)",
- "wireframe": "rgb(226, 232, 247)"
- }
- },
- {
- "customVar": "--spectrum-chartreuse-500",
- "sets": {
- "light": "rgb(152, 197, 10)",
- "dark": "rgb(89, 118, 0)",
- "darkest": "rgb(79, 105, 0)",
- "wireframe": "rgb(216, 225, 244)"
- }
- },
- {
- "customVar": "--spectrum-chartreuse-600",
- "sets": {
- "light": "rgb(135, 177, 3)",
- "dark": "rgb(102, 136, 0)",
- "darkest": "rgb(93, 123, 0)",
- "wireframe": "rgb(203, 215, 241)"
- }
- },
- {
- "customVar": "--spectrum-chartreuse-700",
- "sets": {
- "light": "rgb(118, 156, 0)",
- "dark": "rgb(117, 154, 0)",
- "darkest": "rgb(107, 142, 0)",
- "wireframe": "rgb(190, 205, 237)"
- }
- },
- {
- "customVar": "--spectrum-chartreuse-800",
- "sets": {
- "light": "rgb(103, 136, 0)",
- "dark": "rgb(132, 173, 1)",
- "darkest": "rgb(122, 161, 0)",
- "wireframe": "rgb(173, 192, 233)"
- }
- },
- {
- "customVar": "--spectrum-chartreuse-900",
- "sets": {
- "light": "rgb(87, 116, 0)",
- "dark": "rgb(148, 192, 8)",
- "darkest": "rgb(138, 180, 3)",
- "wireframe": "rgb(154, 177, 227)"
- }
- },
- {
- "customVar": "--spectrum-chartreuse-1000",
- "sets": {
- "light": "rgb(72, 96, 0)",
- "dark": "rgb(166, 211, 18)",
- "darkest": "rgb(154, 198, 11)",
- "wireframe": "rgb(133, 161, 219)"
- }
- },
- {
- "customVar": "--spectrum-chartreuse-1100",
- "sets": {
- "light": "rgb(58, 77, 0)",
- "dark": "rgb(184, 229, 37)",
- "darkest": "rgb(170, 216, 22)",
- "wireframe": "rgb(114, 145, 211)"
- }
- },
- {
- "customVar": "--spectrum-chartreuse-1200",
- "sets": {
- "light": "rgb(44, 59, 0)",
- "dark": "rgb(205, 245, 71)",
- "darkest": "rgb(187, 232, 41)",
- "wireframe": "rgb(96, 130, 201)"
- }
- },
- {
- "customVar": "--spectrum-chartreuse-1300",
- "sets": {
- "light": "rgb(33, 44, 0)",
- "dark": "rgb(231, 254, 154)",
- "darkest": "rgb(205, 246, 72)",
- "wireframe": "rgb(82, 117, 192)"
- }
- },
- {
- "customVar": "--spectrum-chartreuse-1400",
- "sets": {
- "light": "rgb(24, 31, 0)",
- "dark": "rgb(255, 255, 255)",
- "darkest": "rgb(225, 253, 132)",
- "wireframe": "rgb(74, 109, 184)"
- }
- }
-];
-export const celeryValues: Item[] = [
- {
- "customVar": "--spectrum-celery-100",
- "sets": {
- "light": "rgb(205, 252, 191)",
- "dark": "rgb(0, 69, 10)",
- "darkest": "rgb(0, 47, 7)",
- "wireframe": "rgb(242, 245, 251)"
- }
- },
- {
- "customVar": "--spectrum-celery-200",
- "sets": {
- "light": "rgb(174, 246, 157)",
- "dark": "rgb(0, 80, 12)",
- "darkest": "rgb(0, 61, 9)",
- "wireframe": "rgb(237, 241, 250)"
- }
- },
- {
- "customVar": "--spectrum-celery-300",
- "sets": {
- "light": "rgb(150, 238, 133)",
- "dark": "rgb(0, 94, 14)",
- "darkest": "rgb(0, 77, 12)",
- "wireframe": "rgb(233, 238, 248)"
- }
- },
- {
- "customVar": "--spectrum-celery-400",
- "sets": {
- "light": "rgb(114, 224, 106)",
- "dark": "rgb(0, 109, 15)",
- "darkest": "rgb(0, 95, 15)",
- "wireframe": "rgb(226, 232, 247)"
- }
- },
- {
- "customVar": "--spectrum-celery-500",
- "sets": {
- "light": "rgb(78, 207, 80)",
- "dark": "rgb(0, 127, 15)",
- "darkest": "rgb(0, 113, 15)",
- "wireframe": "rgb(216, 225, 244)"
- }
- },
- {
- "customVar": "--spectrum-celery-600",
- "sets": {
- "light": "rgb(39, 187, 54)",
- "dark": "rgb(0, 145, 18)",
- "darkest": "rgb(0, 132, 15)",
- "wireframe": "rgb(203, 215, 241)"
- }
- },
- {
- "customVar": "--spectrum-celery-700",
- "sets": {
- "light": "rgb(7, 167, 33)",
- "dark": "rgb(4, 165, 30)",
- "darkest": "rgb(0, 151, 20)",
- "wireframe": "rgb(190, 205, 237)"
- }
- },
- {
- "customVar": "--spectrum-celery-800",
- "sets": {
- "light": "rgb(0, 145, 18)",
- "dark": "rgb(34, 184, 51)",
- "darkest": "rgb(13, 171, 37)",
- "wireframe": "rgb(173, 192, 233)"
- }
- },
- {
- "customVar": "--spectrum-celery-900",
- "sets": {
- "light": "rgb(0, 124, 15)",
- "dark": "rgb(68, 202, 73)",
- "darkest": "rgb(45, 191, 58)",
- "wireframe": "rgb(154, 177, 227)"
- }
- },
- {
- "customVar": "--spectrum-celery-1000",
- "sets": {
- "light": "rgb(0, 103, 15)",
- "dark": "rgb(105, 220, 99)",
- "darkest": "rgb(80, 208, 82)",
- "wireframe": "rgb(133, 161, 219)"
- }
- },
- {
- "customVar": "--spectrum-celery-1100",
- "sets": {
- "light": "rgb(0, 83, 13)",
- "dark": "rgb(142, 235, 127)",
- "darkest": "rgb(115, 224, 107)",
- "wireframe": "rgb(114, 145, 211)"
- }
- },
- {
- "customVar": "--spectrum-celery-1200",
- "sets": {
- "light": "rgb(0, 64, 10)",
- "dark": "rgb(180, 247, 162)",
- "darkest": "rgb(147, 237, 131)",
- "wireframe": "rgb(96, 130, 201)"
- }
- },
- {
- "customVar": "--spectrum-celery-1300",
- "sets": {
- "light": "rgb(0, 48, 7)",
- "dark": "rgb(221, 253, 211)",
- "darkest": "rgb(180, 247, 162)",
- "wireframe": "rgb(82, 117, 192)"
- }
- },
- {
- "customVar": "--spectrum-celery-1400",
- "sets": {
- "light": "rgb(0, 34, 5)",
- "dark": "rgb(255, 255, 255)",
- "darkest": "rgb(213, 252, 202)",
- "wireframe": "rgb(74, 109, 184)"
- }
- }
-];
-export const greenValues: Item[] = [
- {
- "customVar": "--spectrum-green-100",
- "sets": {
- "light": "rgb(206, 248, 224)",
- "dark": "rgb(4, 67, 41)",
- "darkest": "rgb(10, 44, 28)",
- "wireframe": "rgb(242, 245, 251)"
- }
- },
- {
- "customVar": "--spectrum-green-200",
- "sets": {
- "light": "rgb(173, 244, 206)",
- "dark": "rgb(0, 78, 47)",
- "darkest": "rgb(7, 59, 36)",
- "wireframe": "rgb(237, 241, 250)"
- }
- },
- {
- "customVar": "--spectrum-green-300",
- "sets": {
- "light": "rgb(137, 236, 188)",
- "dark": "rgb(0, 92, 56)",
- "darkest": "rgb(0, 76, 46)",
- "wireframe": "rgb(233, 238, 248)"
- }
- },
- {
- "customVar": "--spectrum-green-400",
- "sets": {
- "light": "rgb(103, 222, 168)",
- "dark": "rgb(0, 108, 67)",
- "darkest": "rgb(0, 93, 57)",
- "wireframe": "rgb(226, 232, 247)"
- }
- },
- {
- "customVar": "--spectrum-green-500",
- "sets": {
- "light": "rgb(73, 204, 147)",
- "dark": "rgb(0, 125, 78)",
- "darkest": "rgb(0, 111, 69)",
- "wireframe": "rgb(216, 225, 244)"
- }
- },
- {
- "customVar": "--spectrum-green-600",
- "sets": {
- "light": "rgb(47, 184, 128)",
- "dark": "rgb(0, 143, 93)",
- "darkest": "rgb(0, 130, 82)",
- "wireframe": "rgb(203, 215, 241)"
- }
- },
- {
- "customVar": "--spectrum-green-700",
- "sets": {
- "light": "rgb(21, 164, 110)",
- "dark": "rgb(18, 162, 108)",
- "darkest": "rgb(0, 149, 98)",
- "wireframe": "rgb(190, 205, 237)"
- }
- },
- {
- "customVar": "--spectrum-green-800",
- "sets": {
- "light": "rgb(0, 143, 93)",
- "dark": "rgb(43, 180, 125)",
- "darkest": "rgb(28, 168, 114)",
- "wireframe": "rgb(173, 192, 233)"
- }
- },
- {
- "customVar": "--spectrum-green-900",
- "sets": {
- "light": "rgb(0, 122, 77)",
- "dark": "rgb(67, 199, 143)",
- "darkest": "rgb(52, 187, 132)",
- "wireframe": "rgb(154, 177, 227)"
- }
- },
- {
- "customVar": "--spectrum-green-1000",
- "sets": {
- "light": "rgb(0, 101, 62)",
- "dark": "rgb(94, 217, 162)",
- "darkest": "rgb(75, 205, 149)",
- "wireframe": "rgb(133, 161, 219)"
- }
- },
- {
- "customVar": "--spectrum-green-1100",
- "sets": {
- "light": "rgb(0, 81, 50)",
- "dark": "rgb(129, 233, 184)",
- "darkest": "rgb(103, 222, 168)",
- "wireframe": "rgb(114, 145, 211)"
- }
- },
- {
- "customVar": "--spectrum-green-1200",
- "sets": {
- "light": "rgb(5, 63, 39)",
- "dark": "rgb(177, 244, 209)",
- "darkest": "rgb(137, 236, 188)",
- "wireframe": "rgb(96, 130, 201)"
- }
- },
- {
- "customVar": "--spectrum-green-1300",
- "sets": {
- "light": "rgb(10, 46, 29)",
- "dark": "rgb(223, 250, 234)",
- "darkest": "rgb(177, 244, 209)",
- "wireframe": "rgb(82, 117, 192)"
- }
- },
- {
- "customVar": "--spectrum-green-1400",
- "sets": {
- "light": "rgb(10, 32, 21)",
- "dark": "rgb(254, 255, 252)",
- "darkest": "rgb(214, 249, 228)",
- "wireframe": "rgb(74, 109, 184)"
- }
- }
-];
-export const seafoamValues: Item[] = [
- {
- "customVar": "--spectrum-seafoam-100",
- "sets": {
- "light": "rgb(206, 247, 243)",
- "dark": "rgb(18, 65, 63)",
- "darkest": "rgb(18, 43, 42)",
- "wireframe": "rgb(242, 245, 251)"
- }
- },
- {
- "customVar": "--spectrum-seafoam-200",
- "sets": {
- "light": "rgb(170, 241, 234)",
- "dark": "rgb(14, 76, 73)",
- "darkest": "rgb(19, 57, 55)",
- "wireframe": "rgb(237, 241, 250)"
- }
- },
- {
- "customVar": "--spectrum-seafoam-300",
- "sets": {
- "light": "rgb(140, 233, 226)",
- "dark": "rgb(4, 90, 87)",
- "darkest": "rgb(16, 73, 70)",
- "wireframe": "rgb(233, 238, 248)"
- }
- },
- {
- "customVar": "--spectrum-seafoam-400",
- "sets": {
- "light": "rgb(101, 218, 210)",
- "dark": "rgb(0, 105, 101)",
- "darkest": "rgb(3, 91, 88)",
- "wireframe": "rgb(226, 232, 247)"
- }
- },
- {
- "customVar": "--spectrum-seafoam-500",
- "sets": {
- "light": "rgb(63, 201, 193)",
- "dark": "rgb(0, 122, 117)",
- "darkest": "rgb(0, 108, 104)",
- "wireframe": "rgb(216, 225, 244)"
- }
- },
- {
- "customVar": "--spectrum-seafoam-600",
- "sets": {
- "light": "rgb(15, 181, 174)",
- "dark": "rgb(0, 140, 135)",
- "darkest": "rgb(0, 127, 121)",
- "wireframe": "rgb(203, 215, 241)"
- }
- },
- {
- "customVar": "--spectrum-seafoam-700",
- "sets": {
- "light": "rgb(0, 161, 154)",
- "dark": "rgb(0, 158, 152)",
- "darkest": "rgb(0, 146, 140)",
- "wireframe": "rgb(190, 205, 237)"
- }
- },
- {
- "customVar": "--spectrum-seafoam-800",
- "sets": {
- "light": "rgb(0, 140, 135)",
- "dark": "rgb(3, 178, 171)",
- "darkest": "rgb(0, 165, 159)",
- "wireframe": "rgb(173, 192, 233)"
- }
- },
- {
- "customVar": "--spectrum-seafoam-900",
- "sets": {
- "light": "rgb(0, 119, 114)",
- "dark": "rgb(54, 197, 189)",
- "darkest": "rgb(26, 185, 178)",
- "wireframe": "rgb(154, 177, 227)"
- }
- },
- {
- "customVar": "--spectrum-seafoam-1000",
- "sets": {
- "light": "rgb(0, 99, 95)",
- "dark": "rgb(93, 214, 207)",
- "darkest": "rgb(66, 202, 195)",
- "wireframe": "rgb(133, 161, 219)"
- }
- },
- {
- "customVar": "--spectrum-seafoam-1100",
- "sets": {
- "light": "rgb(12, 79, 76)",
- "dark": "rgb(132, 230, 223)",
- "darkest": "rgb(102, 218, 211)",
- "wireframe": "rgb(114, 145, 211)"
- }
- },
- {
- "customVar": "--spectrum-seafoam-1200",
- "sets": {
- "light": "rgb(18, 60, 58)",
- "dark": "rgb(176, 242, 236)",
- "darkest": "rgb(139, 232, 225)",
- "wireframe": "rgb(96, 130, 201)"
- }
- },
- {
- "customVar": "--spectrum-seafoam-1300",
- "sets": {
- "light": "rgb(18, 44, 43)",
- "dark": "rgb(223, 249, 246)",
- "darkest": "rgb(179, 242, 237)",
- "wireframe": "rgb(82, 117, 192)"
- }
- },
- {
- "customVar": "--spectrum-seafoam-1400",
- "sets": {
- "light": "rgb(15, 31, 30)",
- "dark": "rgb(254, 255, 254)",
- "darkest": "rgb(215, 248, 244)",
- "wireframe": "rgb(74, 109, 184)"
- }
- }
-];
-export const cyanValues: Item[] = [
- {
- "customVar": "--spectrum-cyan-100",
- "sets": {
- "light": "rgb(197, 248, 255)",
- "dark": "rgb(0, 61, 98)",
- "darkest": "rgb(0, 41, 68)",
- "wireframe": "rgb(242, 245, 251)"
- }
- },
- {
- "customVar": "--spectrum-cyan-200",
- "sets": {
- "light": "rgb(164, 240, 255)",
- "dark": "rgb(0, 71, 111)",
- "darkest": "rgb(0, 54, 88)",
- "wireframe": "rgb(237, 241, 250)"
- }
- },
- {
- "customVar": "--spectrum-cyan-300",
- "sets": {
- "light": "rgb(136, 231, 250)",
- "dark": "rgb(0, 85, 127)",
- "darkest": "rgb(0, 69, 108)",
- "wireframe": "rgb(233, 238, 248)"
- }
- },
- {
- "customVar": "--spectrum-cyan-400",
- "sets": {
- "light": "rgb(96, 216, 243)",
- "dark": "rgb(0, 100, 145)",
- "darkest": "rgb(0, 86, 128)",
- "wireframe": "rgb(226, 232, 247)"
- }
- },
- {
- "customVar": "--spectrum-cyan-500",
- "sets": {
- "light": "rgb(51, 197, 232)",
- "dark": "rgb(0, 116, 162)",
- "darkest": "rgb(0, 103, 147)",
- "wireframe": "rgb(216, 225, 244)"
- }
- },
- {
- "customVar": "--spectrum-cyan-600",
- "sets": {
- "light": "rgb(18, 176, 218)",
- "dark": "rgb(0, 134, 180)",
- "darkest": "rgb(0, 121, 167)",
- "wireframe": "rgb(203, 215, 241)"
- }
- },
- {
- "customVar": "--spectrum-cyan-700",
- "sets": {
- "light": "rgb(1, 156, 200)",
- "dark": "rgb(0, 153, 198)",
- "darkest": "rgb(0, 140, 186)",
- "wireframe": "rgb(190, 205, 237)"
- }
- },
- {
- "customVar": "--spectrum-cyan-800",
- "sets": {
- "light": "rgb(0, 134, 180)",
- "dark": "rgb(14, 173, 215)",
- "darkest": "rgb(4, 160, 205)",
- "wireframe": "rgb(173, 192, 233)"
- }
- },
- {
- "customVar": "--spectrum-cyan-900",
- "sets": {
- "light": "rgb(0, 113, 159)",
- "dark": "rgb(44, 193, 230)",
- "darkest": "rgb(23, 180, 221)",
- "wireframe": "rgb(154, 177, 227)"
- }
- },
- {
- "customVar": "--spectrum-cyan-1000",
- "sets": {
- "light": "rgb(0, 93, 137)",
- "dark": "rgb(84, 211, 241)",
- "darkest": "rgb(57, 199, 234)",
- "wireframe": "rgb(133, 161, 219)"
- }
- },
- {
- "customVar": "--spectrum-cyan-1100",
- "sets": {
- "light": "rgb(0, 74, 115)",
- "dark": "rgb(127, 228, 249)",
- "darkest": "rgb(96, 216, 243)",
- "wireframe": "rgb(114, 145, 211)"
- }
- },
- {
- "customVar": "--spectrum-cyan-1200",
- "sets": {
- "light": "rgb(0, 57, 93)",
- "dark": "rgb(167, 241, 255)",
- "darkest": "rgb(134, 230, 250)",
- "wireframe": "rgb(96, 130, 201)"
- }
- },
- {
- "customVar": "--spectrum-cyan-1300",
- "sets": {
- "light": "rgb(0, 42, 70)",
- "dark": "rgb(215, 250, 255)",
- "darkest": "rgb(170, 242, 255)",
- "wireframe": "rgb(82, 117, 192)"
- }
- },
- {
- "customVar": "--spectrum-cyan-1400",
- "sets": {
- "light": "rgb(0, 30, 51)",
- "dark": "rgb(255, 255, 255)",
- "darkest": "rgb(206, 249, 255)",
- "wireframe": "rgb(74, 109, 184)"
- }
- }
-];
-export const indigoValues: Item[] = [
- {
- "customVar": "--spectrum-indigo-100",
- "sets": {
- "light": "rgb(237, 238, 255)",
- "dark": "rgb(40, 44, 140)",
- "darkest": "rgb(26, 29, 97)",
- "wireframe": "rgb(242, 245, 251)"
- }
- },
- {
- "customVar": "--spectrum-indigo-200",
- "sets": {
- "light": "rgb(224, 226, 255)",
- "dark": "rgb(47, 52, 163)",
- "darkest": "rgb(35, 39, 125)",
- "wireframe": "rgb(237, 241, 250)"
- }
- },
- {
- "customVar": "--spectrum-indigo-300",
- "sets": {
- "light": "rgb(211, 213, 255)",
- "dark": "rgb(57, 63, 187)",
- "darkest": "rgb(46, 50, 158)",
- "wireframe": "rgb(233, 238, 248)"
- }
- },
- {
- "customVar": "--spectrum-indigo-400",
- "sets": {
- "light": "rgb(193, 196, 255)",
- "dark": "rgb(70, 75, 211)",
- "darkest": "rgb(58, 63, 189)",
- "wireframe": "rgb(226, 232, 247)"
- }
- },
- {
- "customVar": "--spectrum-indigo-500",
- "sets": {
- "light": "rgb(172, 175, 255)",
- "dark": "rgb(85, 91, 231)",
- "darkest": "rgb(73, 78, 216)",
- "wireframe": "rgb(216, 225, 244)"
- }
- },
- {
- "customVar": "--spectrum-indigo-600",
- "sets": {
- "light": "rgb(149, 153, 255)",
- "dark": "rgb(104, 109, 244)",
- "darkest": "rgb(90, 96, 235)",
- "wireframe": "rgb(203, 215, 241)"
- }
- },
- {
- "customVar": "--spectrum-indigo-700",
- "sets": {
- "light": "rgb(126, 132, 252)",
- "dark": "rgb(124, 129, 251)",
- "darkest": "rgb(110, 115, 246)",
- "wireframe": "rgb(190, 205, 237)"
- }
- },
- {
- "customVar": "--spectrum-indigo-800",
- "sets": {
- "light": "rgb(104, 109, 244)",
- "dark": "rgb(145, 149, 255)",
- "darkest": "rgb(132, 136, 253)",
- "wireframe": "rgb(173, 192, 233)"
- }
- },
- {
- "customVar": "--spectrum-indigo-900",
- "sets": {
- "light": "rgb(82, 88, 228)",
- "dark": "rgb(167, 170, 255)",
- "darkest": "rgb(153, 157, 255)",
- "wireframe": "rgb(154, 177, 227)"
- }
- },
- {
- "customVar": "--spectrum-indigo-1000",
- "sets": {
- "light": "rgb(64, 70, 202)",
- "dark": "rgb(188, 190, 255)",
- "darkest": "rgb(174, 177, 255)",
- "wireframe": "rgb(133, 161, 219)"
- }
- },
- {
- "customVar": "--spectrum-indigo-1100",
- "sets": {
- "light": "rgb(50, 54, 168)",
- "dark": "rgb(208, 210, 255)",
- "darkest": "rgb(194, 196, 255)",
- "wireframe": "rgb(114, 145, 211)"
- }
- },
- {
- "customVar": "--spectrum-indigo-1200",
- "sets": {
- "light": "rgb(38, 41, 134)",
- "dark": "rgb(226, 228, 255)",
- "darkest": "rgb(212, 213, 255)",
- "wireframe": "rgb(96, 130, 201)"
- }
- },
- {
- "customVar": "--spectrum-indigo-1300",
- "sets": {
- "light": "rgb(27, 30, 100)",
- "dark": "rgb(243, 243, 254)",
- "darkest": "rgb(227, 228, 255)",
- "wireframe": "rgb(82, 117, 192)"
- }
- },
- {
- "customVar": "--spectrum-indigo-1400",
- "sets": {
- "light": "rgb(20, 22, 72)",
- "dark": "rgb(255, 255, 255)",
- "darkest": "rgb(240, 240, 255)",
- "wireframe": "rgb(74, 109, 184)"
- }
- }
-];
-export const purpleValues: Item[] = [
- {
- "customVar": "--spectrum-purple-100",
- "sets": {
- "light": "rgb(246, 235, 255)",
- "dark": "rgb(76, 13, 157)",
- "darkest": "rgb(50, 16, 104)",
- "wireframe": "rgb(242, 245, 251)"
- }
- },
- {
- "customVar": "--spectrum-purple-200",
- "sets": {
- "light": "rgb(238, 221, 255)",
- "dark": "rgb(89, 17, 177)",
- "darkest": "rgb(67, 13, 140)",
- "wireframe": "rgb(237, 241, 250)"
- }
- },
- {
- "customVar": "--spectrum-purple-300",
- "sets": {
- "light": "rgb(230, 208, 255)",
- "dark": "rgb(105, 28, 200)",
- "darkest": "rgb(86, 16, 173)",
- "wireframe": "rgb(233, 238, 248)"
- }
- },
- {
- "customVar": "--spectrum-purple-400",
- "sets": {
- "light": "rgb(219, 187, 254)",
- "dark": "rgb(122, 45, 218)",
- "darkest": "rgb(106, 29, 200)",
- "wireframe": "rgb(226, 232, 247)"
- }
- },
- {
- "customVar": "--spectrum-purple-500",
- "sets": {
- "light": "rgb(204, 164, 253)",
- "dark": "rgb(140, 65, 233)",
- "darkest": "rgb(126, 49, 222)",
- "wireframe": "rgb(216, 225, 244)"
- }
- },
- {
- "customVar": "--spectrum-purple-600",
- "sets": {
- "light": "rgb(189, 139, 252)",
- "dark": "rgb(157, 87, 243)",
- "darkest": "rgb(145, 70, 236)",
- "wireframe": "rgb(203, 215, 241)"
- }
- },
- {
- "customVar": "--spectrum-purple-700",
- "sets": {
- "light": "rgb(174, 114, 249)",
- "dark": "rgb(172, 111, 249)",
- "darkest": "rgb(162, 94, 246)",
- "wireframe": "rgb(190, 205, 237)"
- }
- },
- {
- "customVar": "--spectrum-purple-800",
- "sets": {
- "light": "rgb(157, 87, 244)",
- "dark": "rgb(187, 135, 251)",
- "darkest": "rgb(178, 119, 250)",
- "wireframe": "rgb(173, 192, 233)"
- }
- },
- {
- "customVar": "--spectrum-purple-900",
- "sets": {
- "light": "rgb(137, 61, 231)",
- "dark": "rgb(202, 159, 252)",
- "darkest": "rgb(192, 143, 252)",
- "wireframe": "rgb(154, 177, 227)"
- }
- },
- {
- "customVar": "--spectrum-purple-1000",
- "sets": {
- "light": "rgb(115, 38, 211)",
- "dark": "rgb(215, 182, 254)",
- "darkest": "rgb(206, 166, 253)",
- "wireframe": "rgb(133, 161, 219)"
- }
- },
- {
- "customVar": "--spectrum-purple-1100",
- "sets": {
- "light": "rgb(93, 19, 183)",
- "dark": "rgb(228, 204, 254)",
- "darkest": "rgb(219, 188, 254)",
- "wireframe": "rgb(114, 145, 211)"
- }
- },
- {
- "customVar": "--spectrum-purple-1200",
- "sets": {
- "light": "rgb(71, 12, 148)",
- "dark": "rgb(239, 223, 255)",
- "darkest": "rgb(230, 207, 255)",
- "wireframe": "rgb(96, 130, 201)"
- }
- },
- {
- "customVar": "--spectrum-purple-1300",
- "sets": {
- "light": "rgb(51, 16, 106)",
- "dark": "rgb(249, 240, 255)",
- "darkest": "rgb(240, 224, 255)",
- "wireframe": "rgb(82, 117, 192)"
- }
- },
- {
- "customVar": "--spectrum-purple-1400",
- "sets": {
- "light": "rgb(35, 15, 73)",
- "dark": "rgb(255, 253, 255)",
- "darkest": "rgb(248, 237, 255)",
- "wireframe": "rgb(74, 109, 184)"
- }
- }
-];
-export const fuchsiaValues: Item[] = [
- {
- "customVar": "--spectrum-fuchsia-100",
- "sets": {
- "light": "rgb(255, 233, 252)",
- "dark": "rgb(107, 3, 106)",
- "darkest": "rgb(70, 14, 68)",
- "wireframe": "rgb(242, 245, 251)"
- }
- },
- {
- "customVar": "--spectrum-fuchsia-200",
- "sets": {
- "light": "rgb(255, 218, 250)",
- "dark": "rgb(123, 0, 123)",
- "darkest": "rgb(93, 9, 92)",
- "wireframe": "rgb(237, 241, 250)"
- }
- },
- {
- "customVar": "--spectrum-fuchsia-300",
- "sets": {
- "light": "rgb(254, 199, 248)",
- "dark": "rgb(144, 0, 145)",
- "darkest": "rgb(120, 0, 120)",
- "wireframe": "rgb(233, 238, 248)"
- }
- },
- {
- "customVar": "--spectrum-fuchsia-400",
- "sets": {
- "light": "rgb(251, 174, 246)",
- "dark": "rgb(165, 13, 166)",
- "darkest": "rgb(146, 0, 147)",
- "wireframe": "rgb(226, 232, 247)"
- }
- },
- {
- "customVar": "--spectrum-fuchsia-500",
- "sets": {
- "light": "rgb(245, 146, 243)",
- "dark": "rgb(185, 37, 185)",
- "darkest": "rgb(169, 19, 170)",
- "wireframe": "rgb(216, 225, 244)"
- }
- },
- {
- "customVar": "--spectrum-fuchsia-600",
- "sets": {
- "light": "rgb(237, 116, 237)",
- "dark": "rgb(205, 57, 206)",
- "darkest": "rgb(191, 43, 191)",
- "wireframe": "rgb(203, 215, 241)"
- }
- },
- {
- "customVar": "--spectrum-fuchsia-700",
- "sets": {
- "light": "rgb(224, 85, 226)",
- "dark": "rgb(223, 81, 224)",
- "darkest": "rgb(211, 65, 213)",
- "wireframe": "rgb(190, 205, 237)"
- }
- },
- {
- "customVar": "--spectrum-fuchsia-800",
- "sets": {
- "light": "rgb(205, 58, 206)",
- "dark": "rgb(235, 110, 236)",
- "darkest": "rgb(228, 91, 229)",
- "wireframe": "rgb(173, 192, 233)"
- }
- },
- {
- "customVar": "--spectrum-fuchsia-900",
- "sets": {
- "light": "rgb(182, 34, 183)",
- "dark": "rgb(244, 140, 242)",
- "darkest": "rgb(239, 120, 238)",
- "wireframe": "rgb(154, 177, 227)"
- }
- },
- {
- "customVar": "--spectrum-fuchsia-1000",
- "sets": {
- "light": "rgb(157, 3, 158)",
- "dark": "rgb(250, 168, 245)",
- "darkest": "rgb(246, 149, 243)",
- "wireframe": "rgb(133, 161, 219)"
- }
- },
- {
- "customVar": "--spectrum-fuchsia-1100",
- "sets": {
- "light": "rgb(128, 0, 129)",
- "dark": "rgb(254, 194, 248)",
- "darkest": "rgb(251, 175, 246)",
- "wireframe": "rgb(114, 145, 211)"
- }
- },
- {
- "customVar": "--spectrum-fuchsia-1200",
- "sets": {
- "light": "rgb(100, 6, 100)",
- "dark": "rgb(255, 219, 250)",
- "darkest": "rgb(254, 199, 248)",
- "wireframe": "rgb(96, 130, 201)"
- }
- },
- {
- "customVar": "--spectrum-fuchsia-1300",
- "sets": {
- "light": "rgb(71, 14, 70)",
- "dark": "rgb(255, 239, 252)",
- "darkest": "rgb(255, 220, 250)",
- "wireframe": "rgb(82, 117, 192)"
- }
- },
- {
- "customVar": "--spectrum-fuchsia-1400",
- "sets": {
- "light": "rgb(50, 13, 49)",
- "dark": "rgb(255, 253, 255)",
- "darkest": "rgb(255, 235, 252)",
- "wireframe": "rgb(74, 109, 184)"
- }
- }
-];
-export const magentaValues: Item[] = [
- {
- "customVar": "--spectrum-magenta-100",
- "sets": {
- "light": "rgb(255, 234, 241)",
- "dark": "rgb(118, 0, 58)",
- "darkest": "rgb(83, 3, 41)",
- "wireframe": "rgb(242, 245, 251)"
- }
- },
- {
- "customVar": "--spectrum-magenta-200",
- "sets": {
- "light": "rgb(255, 220, 232)",
- "dark": "rgb(137, 0, 66)",
- "darkest": "rgb(106, 0, 52)",
- "wireframe": "rgb(237, 241, 250)"
- }
- },
- {
- "customVar": "--spectrum-magenta-300",
- "sets": {
- "light": "rgb(255, 202, 221)",
- "dark": "rgb(160, 0, 77)",
- "darkest": "rgb(133, 0, 65)",
- "wireframe": "rgb(233, 238, 248)"
- }
- },
- {
- "customVar": "--spectrum-magenta-400",
- "sets": {
- "light": "rgb(255, 178, 206)",
- "dark": "rgb(182, 18, 90)",
- "darkest": "rgb(161, 0, 78)",
- "wireframe": "rgb(226, 232, 247)"
- }
- },
- {
- "customVar": "--spectrum-magenta-500",
- "sets": {
- "light": "rgb(255, 149, 189)",
- "dark": "rgb(203, 38, 109)",
- "darkest": "rgb(186, 22, 93)",
- "wireframe": "rgb(216, 225, 244)"
- }
- },
- {
- "customVar": "--spectrum-magenta-600",
- "sets": {
- "light": "rgb(250, 119, 170)",
- "dark": "rgb(222, 61, 130)",
- "darkest": "rgb(209, 43, 114)",
- "wireframe": "rgb(203, 215, 241)"
- }
- },
- {
- "customVar": "--spectrum-magenta-700",
- "sets": {
- "light": "rgb(239, 90, 152)",
- "dark": "rgb(237, 87, 149)",
- "darkest": "rgb(227, 69, 137)",
- "wireframe": "rgb(190, 205, 237)"
- }
- },
- {
- "customVar": "--spectrum-magenta-800",
- "sets": {
- "light": "rgb(222, 61, 130)",
- "dark": "rgb(249, 114, 167)",
- "darkest": "rgb(241, 97, 156)",
- "wireframe": "rgb(173, 192, 233)"
- }
- },
- {
- "customVar": "--spectrum-magenta-900",
- "sets": {
- "light": "rgb(200, 34, 105)",
- "dark": "rgb(255, 143, 185)",
- "darkest": "rgb(252, 124, 173)",
- "wireframe": "rgb(154, 177, 227)"
- }
- },
- {
- "customVar": "--spectrum-magenta-1000",
- "sets": {
- "light": "rgb(173, 9, 85)",
- "dark": "rgb(255, 172, 202)",
- "darkest": "rgb(255, 152, 191)",
- "wireframe": "rgb(133, 161, 219)"
- }
- },
- {
- "customVar": "--spectrum-magenta-1100",
- "sets": {
- "light": "rgb(142, 0, 69)",
- "dark": "rgb(255, 198, 218)",
- "darkest": "rgb(255, 179, 207)",
- "wireframe": "rgb(114, 145, 211)"
- }
- },
- {
- "customVar": "--spectrum-magenta-1200",
- "sets": {
- "light": "rgb(112, 0, 55)",
- "dark": "rgb(255, 221, 233)",
- "darkest": "rgb(255, 202, 221)",
- "wireframe": "rgb(96, 130, 201)"
- }
- },
- {
- "customVar": "--spectrum-magenta-1300",
- "sets": {
- "light": "rgb(84, 3, 42)",
- "dark": "rgb(255, 240, 245)",
- "darkest": "rgb(255, 221, 233)",
- "wireframe": "rgb(82, 117, 192)"
- }
- },
- {
- "customVar": "--spectrum-magenta-1400",
- "sets": {
- "light": "rgb(60, 6, 29)",
- "dark": "rgb(255, 252, 253)",
- "darkest": "rgb(255, 236, 243)",
- "wireframe": "rgb(74, 109, 184)"
- }
- }
-];
diff --git a/projects/example-project-webpack/src/styles.css.ts b/projects/example-project-webpack/src/styles.css.ts
deleted file mode 100755
index 68608827270..00000000000
--- a/projects/example-project-webpack/src/styles.css.ts
+++ /dev/null
@@ -1,1947 +0,0 @@
-/*
- * Copyright 2025 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.
- */
-import { css } from 'lit-element';
-const styles = css`
- :host,
- :root {
- --spectrum-global-animation-duration-0: 0ms;
- --spectrum-global-animation-duration-100: 130ms;
- --spectrum-global-animation-duration-200: 160ms;
- --spectrum-global-animation-duration-300: 190ms;
- --spectrum-global-animation-duration-400: 220ms;
- --spectrum-global-animation-duration-500: 250ms;
- --spectrum-global-animation-duration-600: 300ms;
- --spectrum-global-animation-duration-700: 350ms;
- --spectrum-global-animation-duration-800: 400ms;
- --spectrum-global-animation-duration-900: 450ms;
- --spectrum-global-animation-duration-1000: 500ms;
- --spectrum-global-animation-duration-2000: 1000ms;
- --spectrum-global-animation-duration-4000: 2000ms;
- --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
- --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
- --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
- --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1);
- --spectrum-global-color-static-black: #000;
- --spectrum-global-color-static-white: #fff;
- --spectrum-global-color-static-blue: #1473e6;
- --spectrum-global-color-static-gray-50: #fff;
- --spectrum-global-color-static-gray-75: #fff;
- --spectrum-global-color-static-gray-100: #fff;
- --spectrum-global-color-static-gray-200: #f4f4f4;
- --spectrum-global-color-static-gray-300: #eaeaea;
- --spectrum-global-color-static-gray-400: #d3d3d3;
- --spectrum-global-color-static-gray-500: #bcbcbc;
- --spectrum-global-color-static-gray-600: #959595;
- --spectrum-global-color-static-gray-700: #747474;
- --spectrum-global-color-static-gray-800: #505050;
- --spectrum-global-color-static-gray-900: #323232;
- --spectrum-global-color-static-blue-400: #378ef0;
- --spectrum-global-color-static-blue-500: #2680eb;
- --spectrum-global-color-static-blue-600: #1473e6;
- --spectrum-global-color-static-blue-700: #0d66d0;
- --spectrum-global-color-static-red-400: #ec5b62;
- --spectrum-global-color-static-red-500: #e34850;
- --spectrum-global-color-static-red-600: #d7373f;
- --spectrum-global-color-static-red-700: #c9252d;
- --spectrum-global-color-static-orange-400: #f29423;
- --spectrum-global-color-static-orange-500: #e68619;
- --spectrum-global-color-static-orange-600: #da7b11;
- --spectrum-global-color-static-orange-700: #cb6f10;
- --spectrum-global-color-static-green-400: #33ab84;
- --spectrum-global-color-static-green-500: #2d9d78;
- --spectrum-global-color-static-green-600: #268e6c;
- --spectrum-global-color-static-green-700: #12805c;
- --spectrum-global-color-static-celery-400: #4bc35f;
- --spectrum-global-color-static-celery-500: #44b556;
- --spectrum-global-color-static-celery-600: #3da74e;
- --spectrum-global-color-static-celery-700: #379947;
- --spectrum-global-color-static-chartreuse-400: #8ede49;
- --spectrum-global-color-static-chartreuse-500: #85d044;
- --spectrum-global-color-static-chartreuse-600: #7cc33f;
- --spectrum-global-color-static-chartreuse-700: #73b53a;
- --spectrum-global-color-static-yellow-400: #edcc00;
- --spectrum-global-color-static-yellow-500: #dfbf00;
- --spectrum-global-color-static-yellow-600: #d2b200;
- --spectrum-global-color-static-yellow-700: #c4a600;
- --spectrum-global-color-static-magenta-400: #e2499d;
- --spectrum-global-color-static-magenta-500: #d83790;
- --spectrum-global-color-static-magenta-600: #ca2982;
- --spectrum-global-color-static-magenta-700: #bc1c74;
- --spectrum-global-color-static-fuchsia-400: #cf3edc;
- --spectrum-global-color-static-fuchsia-500: #c038cc;
- --spectrum-global-color-static-fuchsia-600: #b130bd;
- --spectrum-global-color-static-fuchsia-700: #a228ad;
- --spectrum-global-color-static-purple-400: #9d64e1;
- --spectrum-global-color-static-purple-500: #9256d9;
- --spectrum-global-color-static-purple-600: #864ccc;
- --spectrum-global-color-static-purple-700: #7a42bf;
- --spectrum-global-color-static-indigo-400: #7575f1;
- --spectrum-global-color-static-indigo-500: #6767ec;
- --spectrum-global-color-static-indigo-600: #5c5ce0;
- --spectrum-global-color-static-indigo-700: #5151d3;
- --spectrum-global-color-static-seafoam-400: #20a3a8;
- --spectrum-global-color-static-seafoam-500: #1b959a;
- --spectrum-global-color-static-seafoam-600: #16878c;
- --spectrum-global-color-static-seafoam-700: #0f797d;
- --spectrum-global-color-opacity-100: 1;
- --spectrum-global-color-opacity-90: 0.9;
- --spectrum-global-color-opacity-80: 0.8;
- --spectrum-global-color-opacity-60: 0.6;
- --spectrum-global-color-opacity-50: 0.5;
- --spectrum-global-color-opacity-40: 0.4;
- --spectrum-global-color-opacity-30: 0.3;
- --spectrum-global-color-opacity-25: 0.25;
- --spectrum-global-color-opacity-20: 0.2;
- --spectrum-global-color-opacity-15: 0.15;
- --spectrum-global-color-opacity-10: 0.1;
- --spectrum-global-color-opacity-8: 0.08;
- --spectrum-global-color-opacity-7: 0.07;
- --spectrum-global-color-opacity-6: 0.06;
- --spectrum-global-color-opacity-5: 0.05;
- --spectrum-global-color-opacity-4: 0.04;
- --spectrum-semantic-negative-color-background: var(
- --spectrum-global-color-static-red-700
- );
- --spectrum-semantic-negative-color-default: var(
- --spectrum-global-color-red-500
- );
- --spectrum-semantic-negative-color-dark: var(
- --spectrum-global-color-red-600
- );
- --spectrum-semantic-negative-color-border: var(
- --spectrum-global-color-red-400
- );
- --spectrum-semantic-negative-color-icon: var(
- --spectrum-global-color-red-600
- );
- --spectrum-semantic-negative-color-status: var(
- --spectrum-global-color-red-400
- );
- --spectrum-semantic-negative-color-text-large: var(
- --spectrum-global-color-red-500
- );
- --spectrum-semantic-negative-color-text-small: var(
- --spectrum-global-color-red-600
- );
- --spectrum-semantic-negative-color-state-down: var(
- --spectrum-global-color-red-700
- );
- --spectrum-semantic-negative-color-state-focus: var(
- --spectrum-global-color-red-400
- );
- --spectrum-semantic-notice-color-background: var(
- --spectrum-global-color-static-orange-700
- );
- --spectrum-semantic-notice-color-default: var(
- --spectrum-global-color-orange-500
- );
- --spectrum-semantic-notice-color-dark: var(
- --spectrum-global-color-orange-600
- );
- --spectrum-semantic-notice-color-border: var(
- --spectrum-global-color-orange-400
- );
- --spectrum-semantic-notice-color-icon: var(
- --spectrum-global-color-orange-600
- );
- --spectrum-semantic-notice-color-status: var(
- --spectrum-global-color-orange-400
- );
- --spectrum-semantic-notice-color-text-large: var(
- --spectrum-global-color-orange-500
- );
- --spectrum-semantic-notice-color-text-small: var(
- --spectrum-global-color-orange-600
- );
- --spectrum-semantic-notice-color-state-down: var(
- --spectrum-global-color-orange-700
- );
- --spectrum-semantic-notice-color-state-focus: var(
- --spectrum-global-color-orange-400
- );
- --spectrum-semantic-positive-color-background: var(
- --spectrum-global-color-static-green-700
- );
- --spectrum-semantic-positive-color-default: var(
- --spectrum-global-color-green-500
- );
- --spectrum-semantic-positive-color-dark: var(
- --spectrum-global-color-green-600
- );
- --spectrum-semantic-positive-color-border: var(
- --spectrum-global-color-green-400
- );
- --spectrum-semantic-positive-color-icon: var(
- --spectrum-global-color-green-600
- );
- --spectrum-semantic-positive-color-status: var(
- --spectrum-global-color-green-400
- );
- --spectrum-semantic-positive-color-text-large: var(
- --spectrum-global-color-green-500
- );
- --spectrum-semantic-positive-color-text-small: var(
- --spectrum-global-color-green-600
- );
- --spectrum-semantic-positive-color-state-down: var(
- --spectrum-global-color-green-700
- );
- --spectrum-semantic-positive-color-state-focus: var(
- --spectrum-global-color-green-400
- );
- --spectrum-semantic-informative-color-background: var(
- --spectrum-global-color-static-blue-700
- );
- --spectrum-semantic-informative-color-default: var(
- --spectrum-global-color-blue-500
- );
- --spectrum-semantic-informative-color-dark: var(
- --spectrum-global-color-blue-600
- );
- --spectrum-semantic-informative-color-border: var(
- --spectrum-global-color-blue-400
- );
- --spectrum-semantic-informative-color-icon: var(
- --spectrum-global-color-blue-600
- );
- --spectrum-semantic-informative-color-status: var(
- --spectrum-global-color-blue-400
- );
- --spectrum-semantic-informative-color-text-large: var(
- --spectrum-global-color-blue-500
- );
- --spectrum-semantic-informative-color-text-small: var(
- --spectrum-global-color-blue-600
- );
- --spectrum-semantic-informative-color-state-down: var(
- --spectrum-global-color-blue-700
- );
- --spectrum-semantic-informative-color-state-focus: var(
- --spectrum-global-color-blue-400
- );
- --spectrum-semantic-cta-color-background-default: var(
- --spectrum-global-color-static-blue-600
- );
- --spectrum-semantic-cta-color-background-hover: var(
- --spectrum-global-color-static-blue-700
- );
- --spectrum-semantic-cta-color-background-down: var(
- --spectrum-global-color-static-blue-700
- );
- --spectrum-semantic-cta-color-background-key-focus: var(
- --spectrum-global-color-static-blue-600
- );
- --spectrum-semantic-background-color-key-focus: var(
- --spectrum-global-color-static-blue-600
- );
- --spectrum-semantic-neutral-color-background: var(
- --spectrum-global-color-static-gray-700
- );
- --spectrum-semantic-presence-color-1: var(
- --spectrum-global-color-static-red-500
- );
- --spectrum-semantic-presence-color-2: var(
- --spectrum-global-color-static-orange-400
- );
- --spectrum-semantic-presence-color-3: var(
- --spectrum-global-color-static-yellow-400
- );
- --spectrum-semantic-presence-color-4: #4bcca2;
- --spectrum-semantic-presence-color-5: #00c7ff;
- --spectrum-semantic-presence-color-6: #008cb8;
- --spectrum-semantic-presence-color-7: #7e4bf3;
- --spectrum-semantic-presence-color-8: var(
- --spectrum-global-color-static-fuchsia-600
- );
- --spectrum-global-dimension-static-size-0: 0px;
- --spectrum-global-dimension-static-size-10: 1px;
- --spectrum-global-dimension-static-size-25: 2px;
- --spectrum-global-dimension-static-size-50: 4px;
- --spectrum-global-dimension-static-size-40: 3px;
- --spectrum-global-dimension-static-size-65: 5px;
- --spectrum-global-dimension-static-size-100: 8px;
- --spectrum-global-dimension-static-size-115: 9px;
- --spectrum-global-dimension-static-size-125: 10px;
- --spectrum-global-dimension-static-size-150: 12px;
- --spectrum-global-dimension-static-size-175: 14px;
- --spectrum-global-dimension-static-size-200: 16px;
- --spectrum-global-dimension-static-size-225: 18px;
- --spectrum-global-dimension-static-size-250: 20px;
- --spectrum-global-dimension-static-size-300: 24px;
- --spectrum-global-dimension-static-size-400: 32px;
- --spectrum-global-dimension-static-size-450: 36px;
- --spectrum-global-dimension-static-size-500: 40px;
- --spectrum-global-dimension-static-size-550: 44px;
- --spectrum-global-dimension-static-size-600: 48px;
- --spectrum-global-dimension-static-size-700: 56px;
- --spectrum-global-dimension-static-size-800: 64px;
- --spectrum-global-dimension-static-size-900: 72px;
- --spectrum-global-dimension-static-size-1000: 80px;
- --spectrum-global-dimension-static-size-1200: 96px;
- --spectrum-global-dimension-static-size-1700: 136px;
- --spectrum-global-dimension-static-size-2400: 192px;
- --spectrum-global-dimension-static-size-2600: 208px;
- --spectrum-global-dimension-static-size-3400: 272px;
- --spectrum-global-dimension-static-size-3600: 288px;
- --spectrum-global-dimension-static-size-4600: 368px;
- --spectrum-global-dimension-static-size-5000: 400px;
- --spectrum-global-dimension-static-size-6000: 480px;
- --spectrum-global-dimension-static-font-size-50: 11px;
- --spectrum-global-dimension-static-font-size-75: 12px;
- --spectrum-global-dimension-static-font-size-100: 14px;
- --spectrum-global-dimension-static-font-size-150: 15px;
- --spectrum-global-dimension-static-font-size-200: 16px;
- --spectrum-global-dimension-static-font-size-300: 18px;
- --spectrum-global-dimension-static-font-size-400: 20px;
- --spectrum-global-dimension-static-font-size-500: 22px;
- --spectrum-global-dimension-static-font-size-600: 25px;
- --spectrum-global-dimension-static-font-size-700: 28px;
- --spectrum-global-dimension-static-font-size-800: 32px;
- --spectrum-global-dimension-static-font-size-900: 36px;
- --spectrum-global-dimension-static-font-size-1000: 40px;
- --spectrum-global-dimension-static-percent-50: 50%;
- --spectrum-global-dimension-static-percent-100: 100%;
- --spectrum-global-dimension-static-breakpoint-xsmall: 304px;
- --spectrum-global-dimension-static-breakpoint-small: 768px;
- --spectrum-global-dimension-static-breakpoint-medium: 1280px;
- --spectrum-global-dimension-static-breakpoint-large: 1768px;
- --spectrum-global-dimension-static-breakpoint-xlarge: 2160px;
- --spectrum-global-dimension-static-grid-columns: 12;
- --spectrum-global-dimension-static-grid-fluid-width: 100%;
- --spectrum-global-dimension-static-grid-fixed-max-width: 1280px;
- --spectrum-global-font-family-base: adobe-clean, 'Source Sans Pro',
- -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
- 'Trebuchet MS', 'Lucida Grande', sans-serif;
- --spectrum-global-font-family-serif: adobe-clean-serif,
- 'Source Serif Pro', Georgia, serif;
- --spectrum-global-font-family-code: 'Source Code Pro', Monaco, monospace;
- --spectrum-global-font-weight-thin: 100;
- --spectrum-global-font-weight-ultra-light: 200;
- --spectrum-global-font-weight-light: 300;
- --spectrum-global-font-weight-regular: 400;
- --spectrum-global-font-weight-medium: 500;
- --spectrum-global-font-weight-semi-bold: 600;
- --spectrum-global-font-weight-bold: 700;
- --spectrum-global-font-weight-extra-bold: 800;
- --spectrum-global-font-weight-black: 900;
- --spectrum-global-font-style-regular: normal;
- --spectrum-global-font-style-italic: italic;
- --spectrum-global-font-letter-spacing-none: 0;
- --spectrum-global-font-letter-spacing-small: 0.0125em;
- --spectrum-global-font-letter-spacing-han: 0.05em;
- --spectrum-global-font-letter-spacing-medium: 0.06em;
- --spectrum-global-font-line-height-large: 1.7;
- --spectrum-global-font-line-height-medium: 1.5;
- --spectrum-global-font-line-height-small: 1.3;
- --spectrum-global-font-multiplier-25: 0.25em;
- --spectrum-global-font-multiplier-75: 0.75em;
- --spectrum-alias-border-size-thin: var(
- --spectrum-global-dimension-static-size-10
- );
- --spectrum-alias-border-size-thick: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-alias-border-size-thicker: var(
- --spectrum-global-dimension-static-size-50
- );
- --spectrum-alias-border-size-thickest: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-alias-border-offset-thin: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-alias-border-offset-thick: var(
- --spectrum-global-dimension-static-size-50
- );
- --spectrum-alias-border-offset-thicker: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-alias-border-offset-thickest: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-alias-grid-baseline: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-alias-grid-gutter-xsmall: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-alias-grid-gutter-small: var(
- --spectrum-global-dimension-static-size-300
- );
- --spectrum-alias-grid-gutter-medium: var(
- --spectrum-global-dimension-static-size-400
- );
- --spectrum-alias-grid-gutter-large: var(
- --spectrum-global-dimension-static-size-500
- );
- --spectrum-alias-grid-gutter-xlarge: var(
- --spectrum-global-dimension-static-size-600
- );
- --spectrum-alias-grid-margin-xsmall: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-alias-grid-margin-small: var(
- --spectrum-global-dimension-static-size-300
- );
- --spectrum-alias-grid-margin-medium: var(
- --spectrum-global-dimension-static-size-400
- );
- --spectrum-alias-grid-margin-large: var(
- --spectrum-global-dimension-static-size-500
- );
- --spectrum-alias-grid-margin-xlarge: var(
- --spectrum-global-dimension-static-size-600
- );
- --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-alias-grid-layout-region-margin-bottom-small: var(
- --spectrum-global-dimension-static-size-300
- );
- --spectrum-alias-grid-layout-region-margin-bottom-medium: var(
- --spectrum-global-dimension-static-size-400
- );
- --spectrum-alias-grid-layout-region-margin-bottom-large: var(
- --spectrum-global-dimension-static-size-500
- );
- --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(
- --spectrum-global-dimension-static-size-600
- );
- --spectrum-alias-radial-reaction-size-default: var(
- --spectrum-global-dimension-static-size-550
- );
- --spectrum-alias-font-family-ar: myriad-arabic, adobe-clean,
- 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
- Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
- --spectrum-alias-font-family-he: myriad-hebrew, adobe-clean,
- 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
- Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
- --spectrum-alias-font-family-zh: adobe-clean-han-traditional,
- source-han-traditional, 'MingLiu', 'Heiti TC Light', 'sans-serif';
- --spectrum-alias-font-family-zhhans: adobe-clean-han-simplified-c,
- source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif';
- --spectrum-alias-font-family-ko: adobe-clean-han-korean,
- source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif';
- --spectrum-alias-font-family-ja: adobe-clean-han-japanese,
- source-han-japanese, 'Yu Gothic', '\\30E1 \\30A4 \\30EA \\30AA',
- '\\30D2 \\30E9 \\30AE \\30CE \\89D2 \\30B4 Pro W3',
- 'Hiragino Kaku Gothic Pro W3', 'Osaka',
- '\\FF2D \\FF33 \\FF30 \\30B4 \\30B7 \\30C3 \\30AF', 'MS PGothic',
- 'sans-serif';
- --spectrum-alias-font-family-condensed: adobe-clean-han-traditional,
- source-han-traditional, 'MingLiu', 'Heiti TC Light', adobe-clean,
- 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
- Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
- --spectrum-alias-line-height-body: var(
- --spectrum-global-font-line-height-medium
- );
- --spectrum-alias-line-height-title: var(
- --spectrum-global-font-line-height-small
- );
- --spectrum-alias-body-han-text-line-height: var(
- --spectrum-global-font-line-height-large
- );
- --spectrum-alias-body-text-font-family: var(
- --spectrum-global-font-family-base
- );
- --spectrum-alias-body-text-line-height: var(
- --spectrum-global-font-line-height-medium
- );
- --spectrum-alias-body-text-font-weight: var(
- --spectrum-global-font-weight-regular
- );
- --spectrum-alias-body-text-font-weight-strong: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-button-text-line-height: var(
- --spectrum-global-font-line-height-small
- );
- --spectrum-alias-heading-han-text-line-height: var(
- --spectrum-global-font-line-height-medium
- );
- --spectrum-alias-heading-text-line-height: var(
- --spectrum-global-font-line-height-small
- );
- --spectrum-alias-heading-text-font-weight-regular: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-heading-text-font-weight-regular-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-heading-text-font-weight-quiet: var(
- --spectrum-global-font-weight-light
- );
- --spectrum-alias-heading-text-font-weight-quiet-strong: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-heading-text-font-weight-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-heading-text-font-weight-strong-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-subheading-text-font-weight: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-subheading-text-font-weight-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-detail-text-font-weight: var(
- --spectrum-global-font-weight-regular
- );
- --spectrum-alias-detail-text-font-weight-strong: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-serif-text-font-family: var(
- --spectrum-global-font-family-serif
- );
- --spectrum-alias-article-text-font-family: var(
- --spectrum-global-font-family-serif
- );
- --spectrum-alias-article-body-text-font-weight: var(
- --spectrum-global-font-weight-regular
- );
- --spectrum-alias-article-body-text-font-weight-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-article-heading-text-font-weight: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-article-heading-text-font-weight-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-article-heading-text-font-weight-quiet: var(
- --spectrum-global-font-weight-regular
- );
- --spectrum-alias-article-heading-text-font-weight-quiet-strong: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-article-subheading-text-font-weight: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-article-subheading-text-font-weight-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-article-detail-text-font-weight: var(
- --spectrum-global-font-weight-regular
- );
- --spectrum-alias-article-detail-text-font-weight-strong: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-code-text-font-family: var(
- --spectrum-global-font-family-code
- );
- --spectrum-alias-han-heading-text-font-weight-regular: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var(
- --spectrum-global-font-weight-extra-bold
- );
- --spectrum-alias-han-heading-text-font-weight-regular-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-han-heading-text-font-weight-quiet: var(
- --spectrum-global-font-weight-light
- );
- --spectrum-alias-han-heading-text-font-weight-quiet-emphasis: var(
- --spectrum-global-font-weight-regular
- );
- --spectrum-alias-han-heading-text-font-weight-quiet-strong: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-han-heading-text-font-weight-light: var(
- --spectrum-global-font-weight-light
- );
- --spectrum-alias-han-heading-text-font-weight-light-emphasis: var(
- --spectrum-global-font-weight-regular
- );
- --spectrum-alias-han-heading-text-font-weight-light-strong: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-han-heading-text-font-weight-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-han-heading-text-font-weight-strong-emphasis: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-han-heading-text-font-weight-strong-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-han-heading-text-font-weight-heavy: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-han-heading-text-font-weight-heavy-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-han-body-text-font-weight-regular: var(
- --spectrum-global-font-weight-regular
- );
- --spectrum-alias-han-body-text-font-weight-emphasis: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-han-body-text-font-weight-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-han-subheading-text-font-weight-regular: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-han-subheading-text-font-weight-emphasis: var(
- --spectrum-global-font-weight-extra-bold
- );
- --spectrum-alias-han-subheading-text-font-weight-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-han-detail-text-font-weight: var(
- --spectrum-global-font-weight-regular
- );
- --spectrum-alias-han-detail-text-font-weight-emphasis: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-han-detail-text-font-weight-strong: var(
- --spectrum-global-font-weight-black
- );
- --spectrum-alias-code-text-font-weight-regular: var(
- --spectrum-global-font-weight-regular
- );
- --spectrum-alias-code-text-font-weight-strong: var(
- --spectrum-global-font-weight-bold
- );
- --spectrum-alias-code-text-line-height: var(
- --spectrum-global-font-line-height-medium
- );
- --spectrum-alias-heading-margin-bottom: var(
- --spectrum-global-font-multiplier-25
- );
- --spectrum-alias-body-margin-bottom: var(
- --spectrum-global-font-multiplier-75
- );
- --spectrum-alias-dropshadow-blur: var(
- --spectrum-global-dimension-size-50
- );
- --spectrum-alias-dropshadow-offset-y: var(
- --spectrum-global-dimension-size-10
- );
- --spectrum-alias-font-size-default: var(
- --spectrum-global-dimension-font-size-100
- );
- --spectrum-alias-line-height-small: var(
- --spectrum-global-dimension-size-200
- );
- --spectrum-alias-line-height-medium: var(
- --spectrum-global-dimension-size-250
- );
- --spectrum-alias-line-height-large: var(
- --spectrum-global-dimension-size-300
- );
- --spectrum-alias-line-height-xlarge: var(
- --spectrum-global-dimension-size-400
- );
- --spectrum-alias-line-height-xxlarge: var(
- --spectrum-global-dimension-size-600
- );
- --spectrum-alias-layout-label-gap-size: var(
- --spectrum-global-dimension-size-100
- );
- --spectrum-alias-pill-button-text-size: var(
- --spectrum-global-dimension-font-size-100
- );
- --spectrum-alias-pill-button-text-baseline: var(
- --spectrum-global-dimension-static-size-150
- );
- --spectrum-alias-border-radius-xsmall: var(
- --spectrum-global-dimension-size-10
- );
- --spectrum-alias-border-radius-small: var(
- --spectrum-global-dimension-size-25
- );
- --spectrum-alias-border-radius-regular: var(
- --spectrum-global-dimension-size-50
- );
- --spectrum-alias-border-radius-medium: var(
- --spectrum-global-dimension-size-100
- );
- --spectrum-alias-border-radius-large: var(
- --spectrum-global-dimension-size-200
- );
- --spectrum-alias-single-line-height: var(
- --spectrum-global-dimension-size-400
- );
- --spectrum-alias-single-line-width: var(
- --spectrum-global-dimension-size-2400
- );
- --spectrum-alias-workflow-icon-size: var(
- --spectrum-global-dimension-size-225
- );
- --spectrum-alias-heading-han-display1-text-size: var(
- --spectrum-global-dimension-font-size-1000
- );
- --spectrum-alias-heading-han-xxxl-text-size: var(
- --spectrum-global-dimension-font-size-1000
- );
- --spectrum-alias-heading-han-display1-margin-top: var(
- --spectrum-global-dimension-font-size-900
- );
- --spectrum-alias-heading-han-xxxl-margin-top: var(
- --spectrum-global-dimension-font-size-900
- );
- --spectrum-alias-heading-han-display2-text-size: var(
- --spectrum-global-dimension-font-size-900
- );
- --spectrum-alias-heading-han-xxl-text-size: var(
- --spectrum-global-dimension-font-size-900
- );
- --spectrum-alias-heading-han-display2-margin-top: var(
- --spectrum-global-dimension-font-size-800
- );
- --spectrum-alias-heading-han-xxl-margin-top: var(
- --spectrum-global-dimension-font-size-800
- );
- --spectrum-alias-heading1-han-text-size: var(
- --spectrum-global-dimension-font-size-800
- );
- --spectrum-alias-heading-han-xl-text-size: var(
- --spectrum-global-dimension-font-size-800
- );
- --spectrum-alias-heading1-han-margin-top: var(
- --spectrum-global-dimension-font-size-700
- );
- --spectrum-alias-heading-han-xl-margin-top: var(
- --spectrum-global-dimension-font-size-700
- );
- --spectrum-alias-heading2-han-text-size: var(
- --spectrum-global-dimension-font-size-600
- );
- --spectrum-alias-heading-han-l-text-size: var(
- --spectrum-global-dimension-font-size-600
- );
- --spectrum-alias-heading2-han-margin-top: var(
- --spectrum-global-dimension-font-size-500
- );
- --spectrum-alias-heading-han-l-margin-top: var(
- --spectrum-global-dimension-font-size-500
- );
- --spectrum-alias-heading3-han-text-size: var(
- --spectrum-global-dimension-font-size-400
- );
- --spectrum-alias-heading-han-m-text-size: var(
- --spectrum-global-dimension-font-size-400
- );
- --spectrum-alias-heading3-han-margin-top: var(
- --spectrum-global-dimension-font-size-300
- );
- --spectrum-alias-heading-han-m-margin-top: var(
- --spectrum-global-dimension-font-size-300
- );
- --spectrum-alias-heading4-text-size: var(
- --spectrum-global-dimension-font-size-300
- );
- --spectrum-alias-heading-s-text-size: var(
- --spectrum-global-dimension-font-size-300
- );
- --spectrum-alias-heading4-margin-top: var(
- --spectrum-global-dimension-font-size-200
- );
- --spectrum-alias-heading-s-margin-top: var(
- --spectrum-global-dimension-font-size-200
- );
- --spectrum-alias-heading5-text-size: var(
- --spectrum-global-dimension-font-size-200
- );
- --spectrum-alias-heading-xs-text-size: var(
- --spectrum-global-dimension-font-size-200
- );
- --spectrum-alias-heading5-margin-top: var(
- --spectrum-global-dimension-font-size-100
- );
- --spectrum-alias-heading-xs-margin-top: var(
- --spectrum-global-dimension-font-size-100
- );
- --spectrum-alias-heading6-text-size: var(
- --spectrum-global-dimension-font-size-100
- );
- --spectrum-alias-heading-xxs-text-size: var(
- --spectrum-global-dimension-font-size-100
- );
- --spectrum-alias-heading6-margin-top: var(
- --spectrum-global-dimension-font-size-75
- );
- --spectrum-alias-heading-xxs-margin-top: var(
- --spectrum-global-dimension-font-size-75
- );
- --spectrum-alias-background-color-default: var(
- --spectrum-global-color-gray-100
- );
- --spectrum-alias-background-color-transparent: transparent;
- --spectrum-alias-background-color-label-gray: #707070;
- --spectrum-alias-background-color-quickactions-overlay: rgba(
- 0,
- 0,
- 0,
- 0.2
- );
- --spectrum-alias-placeholder-text-color: var(
- --spectrum-global-color-gray-600
- );
- --spectrum-alias-placeholder-text-color-hover: var(
- --spectrum-global-color-gray-900
- );
- --spectrum-alias-placeholder-text-color-down: var(
- --spectrum-global-color-gray-900
- );
- --spectrum-alias-placeholder-text-color-selected: var(
- --spectrum-global-color-gray-800
- );
- --spectrum-alias-label-text-color: var(
- --spectrum-global-color-gray-700
- );
- --spectrum-alias-text-color: var(--spectrum-global-color-gray-800);
- --spectrum-alias-text-color-hover: var(
- --spectrum-global-color-gray-900
- );
- --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900);
- --spectrum-alias-text-color-key-focus: var(
- --spectrum-global-color-blue-600
- );
- --spectrum-alias-text-color-mouse-focus: var(
- --spectrum-global-color-blue-600
- );
- --spectrum-alias-text-color-disabled: var(
- --spectrum-global-color-gray-500
- );
- --spectrum-alias-text-color-invalid: var(
- --spectrum-global-color-red-500
- );
- --spectrum-alias-text-color-selected: var(
- --spectrum-global-color-blue-600
- );
- --spectrum-alias-text-color-selected-neutral: var(
- --spectrum-global-color-gray-900
- );
- --spectrum-alias-title-text-color: var(
- --spectrum-global-color-gray-900
- );
- --spectrum-alias-heading-text-color: var(
- --spectrum-global-color-gray-900
- );
- --spectrum-alias-border-color: var(--spectrum-global-color-gray-300);
- --spectrum-alias-border-color-hover: var(
- --spectrum-global-color-gray-400
- );
- --spectrum-alias-border-color-focus: var(
- --spectrum-global-color-blue-400
- );
- --spectrum-alias-border-color-down: var(
- --spectrum-global-color-blue-500
- );
- --spectrum-alias-border-color-extralight: var(
- --spectrum-global-color-gray-100
- );
- --spectrum-alias-border-color-light: var(
- --spectrum-global-color-gray-200
- );
- --spectrum-alias-border-color-mid: var(
- --spectrum-global-color-gray-300
- );
- --spectrum-alias-border-color-dark: var(
- --spectrum-global-color-gray-400
- );
- --spectrum-alias-border-color-transparent: transparent;
- --spectrum-alias-border-color-translucent-dark: rgba(0, 0, 0, 0.05);
- --spectrum-alias-border-color-translucent-darker: rgba(0, 0, 0, 0.1);
- --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400);
- --spectrum-alias-track-color-default: var(
- --spectrum-global-color-gray-300
- );
- --spectrum-alias-track-color-disabled: var(
- --spectrum-global-color-gray-300
- );
- --spectrum-alias-track-color-over-background: hsla(0, 0%, 100%, 0.2);
- --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700);
- --spectrum-alias-icon-color-over-background: var(
- --spectrum-global-color-static-white
- );
- --spectrum-alias-icon-color-hover: var(
- --spectrum-global-color-gray-900
- );
- --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900);
- --spectrum-alias-icon-color-focus: var(
- --spectrum-global-color-gray-900
- );
- --spectrum-alias-icon-color-disabled: var(
- --spectrum-global-color-gray-400
- );
- --spectrum-alias-icon-color-selected-neutral: var(
- --spectrum-global-color-gray-900
- );
- --spectrum-alias-icon-color-selected: var(
- --spectrum-global-color-blue-500
- );
- --spectrum-alias-icon-color-selected-hover: var(
- --spectrum-global-color-blue-600
- );
- --spectrum-alias-icon-color-selected-down: var(
- --spectrum-global-color-blue-700
- );
- --spectrum-alias-icon-color-selected-focus: var(
- --spectrum-global-color-blue-600
- );
- --spectrum-alias-icon-color-error: var(--spectrum-global-color-red-400);
- --spectrum-alias-toolbar-background-color: var(
- --spectrum-global-color-gray-100
- );
- --spectrum-font-fallbacks-sans: -apple-system, BlinkMacSystemFont,
- 'Segoe UI', Roboto, sans-serif;
- --spectrum-font-family-base: 'adobe-clean-ux', 'adobe-clean',
- 'Source Sans Pro', var(--spectrum-font-fallbacks-sans);
- --spectrum-font-family-han: 'adobe-clean-han-japanese',
- var(--spectrum-font-fallbacks-sans);
- --spectrum-font-family-ar: 'adobe-arabic', 'myriad-arabic',
- var(--spectrum-font-fallbacks-sans);
- --spectrum-font-family-he: 'adobe-hebrew',
- var(--spectrum-font-fallbacks-sans);
- --spectrum-font-family-zhhans: 'adobe-clean-han-simplified-c', 'SimSun',
- 'Heiti SC Light', var(--spectrum-font-fallbacks-sans);
- --spectrum-font-family-zh: var(--spectrum-font-family-zhhans);
- --spectrum-font-family-zhhant: 'adobe-clean-han-traditional',
- 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light',
- var(--spectrum-font-fallbacks-sans);
- --spectrum-font-family-ko: 'adobe-clean-han-korean', 'Malgun Gothic',
- 'Apple Gothic', var(--spectrum-font-fallbacks-sans);
- --spectrum-font-family-ja: 'adobe-clean-han-japanese', 'Yu Gothic',
- '\\30E1 \\30A4 \\30EA \\30AA',
- '\\30D2 \\30E9 \\30AE \\30CE \\89D2 \\30B4 Pro W3',
- 'Hiragino Kaku Gothic Pro W3', 'Osaka',
- '\\FF2D \\FF33 \\FF30 \\30B4 \\30B7 \\30C3 \\30AF', 'MS PGothic',
- var(--spectrum-font-fallbacks-sans);
- --spectrum-text-size: var(--spectrum-alias-font-size-default);
- --spectrum-text-body-line-height: var(
- --spectrum-alias-line-height-medium
- );
- --spectrum-text-size-text-label: var(--spectrum-label-text-size);
- --spectrum-line-height-text-label: var(
- --spectrum-label-text-line-height
- );
- font-family: var(--spectrum-font-family-base);
- font-size: var(--spectrum-text-size);
- }
- :host:lang(ar),
- :root:lang(ar) {
- font-family: var(--spectrum-font-family-ar);
- }
- :host:lang(he),
- :root:lang(he) {
- font-family: var(--spectrum-font-family-he);
- }
- :host:lang(zh-Hans),
- :root:lang(zh-Hans) {
- font-family: var(--spectrum-font-family-zhhans);
- }
- :host:lang(zh-Hant),
- :root:lang(zh-Hant) {
- font-family: var(--spectrum-font-family-zhhant);
- }
- :host:lang(zh),
- :root:lang(zh) {
- font-family: var(--spectrum-font-family-zh);
- }
- :host:lang(ko),
- :root:lang(ko) {
- font-family: var(--spectrum-font-family-ko);
- }
- :host:lang(ja),
- :root:lang(ja) {
- font-family: var(--spectrum-font-family-ja);
- }
- :host,
- :root {
- --spectrum-global-color-celery-400: #44b556;
- --spectrum-global-color-celery-500: #3da74e;
- --spectrum-global-color-celery-600: #379947;
- --spectrum-global-color-celery-700: #318b40;
- --spectrum-global-color-chartreuse-400: #85d044;
- --spectrum-global-color-chartreuse-500: #7cc33f;
- --spectrum-global-color-chartreuse-600: #73b53a;
- --spectrum-global-color-chartreuse-700: #6aa834;
- --spectrum-global-color-yellow-400: #dfbf00;
- --spectrum-global-color-yellow-500: #d2b200;
- --spectrum-global-color-yellow-600: #c4a600;
- --spectrum-global-color-yellow-700: #b79900;
- --spectrum-global-color-magenta-400: #d83790;
- --spectrum-global-color-magenta-500: #ce2783;
- --spectrum-global-color-magenta-600: #bc1c74;
- --spectrum-global-color-magenta-700: #ae0e66;
- --spectrum-global-color-fuchsia-400: #c038cc;
- --spectrum-global-color-fuchsia-500: #b130bd;
- --spectrum-global-color-fuchsia-600: #a228ad;
- --spectrum-global-color-fuchsia-700: #93219e;
- --spectrum-global-color-purple-400: #9256d9;
- --spectrum-global-color-purple-500: #864ccc;
- --spectrum-global-color-purple-600: #7a42bf;
- --spectrum-global-color-purple-700: #6f38b1;
- --spectrum-global-color-indigo-400: #6767ec;
- --spectrum-global-color-indigo-500: #5c5ce0;
- --spectrum-global-color-indigo-600: #5151d3;
- --spectrum-global-color-indigo-700: #4646c6;
- --spectrum-global-color-seafoam-400: #1b959a;
- --spectrum-global-color-seafoam-500: #16878c;
- --spectrum-global-color-seafoam-600: #0f797d;
- --spectrum-global-color-seafoam-700: #096c6f;
- --spectrum-global-color-red-400: #e34850;
- --spectrum-global-color-red-500: #d7373f;
- --spectrum-global-color-red-600: #c9252d;
- --spectrum-global-color-red-700: #bb121a;
- --spectrum-global-color-orange-400: #e68619;
- --spectrum-global-color-orange-500: #da7b11;
- --spectrum-global-color-orange-600: #cb6f10;
- --spectrum-global-color-orange-700: #bd640d;
- --spectrum-global-color-green-400: #2d9d78;
- --spectrum-global-color-green-500: #268e6c;
- --spectrum-global-color-green-600: #12805c;
- --spectrum-global-color-green-700: #107154;
- --spectrum-global-color-blue-400: #2680eb;
- --spectrum-global-color-blue-500: #1473e6;
- --spectrum-global-color-blue-600: #0d66d0;
- --spectrum-global-color-blue-700: #095aba;
- --spectrum-global-color-gray-50: #fff;
- --spectrum-global-color-gray-75: #fafafa;
- --spectrum-global-color-gray-100: #f5f5f5;
- --spectrum-global-color-gray-200: #eaeaea;
- --spectrum-global-color-gray-300: #e1e1e1;
- --spectrum-global-color-gray-400: #cacaca;
- --spectrum-global-color-gray-500: #b3b3b3;
- --spectrum-global-color-gray-600: #8e8e8e;
- --spectrum-global-color-gray-700: #6e6e6e;
- --spectrum-global-color-gray-800: #4b4b4b;
- --spectrum-global-color-gray-900: #2c2c2c;
- --spectrum-alias-background-color-modal-overlay: rgba(0, 0, 0, 0.4);
- --spectrum-alias-dropshadow-color: rgba(0, 0, 0, 0.15);
- --spectrum-alias-background-color-hover-overlay: rgba(44, 44, 44, 0.04);
- --spectrum-alias-highlight-hover: rgba(44, 44, 44, 0.06);
- --spectrum-alias-highlight-active: rgba(44, 44, 44, 0.1);
- --spectrum-alias-highlight-selected: rgba(20, 115, 230, 0.1);
- --spectrum-alias-highlight-selected-hover: rgba(20, 115, 230, 0.2);
- --spectrum-alias-text-highlight-color: rgba(20, 115, 230, 0.2);
- --spectrum-alias-background-color-quickactions: hsla(0, 0%, 96.1%, 0.9);
- --spectrum-alias-radial-reaction-color-default: rgba(75, 75, 75, 0.6);
- --spectrum-alias-pasteboard-background-color: var(
- --spectrum-global-color-gray-300
- );
- --spectrum-alias-appframe-border-color: var(
- --spectrum-global-color-gray-300
- );
- --spectrum-alias-appframe-separator-color: var(
- --spectrum-global-color-gray-300
- );
- --spectrum-colorarea-border-color: rgba(44, 44, 44, 0.1);
- --spectrum-colorarea-border-color-hover: rgba(44, 44, 44, 0.1);
- --spectrum-colorarea-border-color-down: rgba(44, 44, 44, 0.1);
- --spectrum-colorarea-border-color-key-focus: rgba(44, 44, 44, 0.1);
- --spectrum-colorslider-border-color: rgba(44, 44, 44, 0.1);
- --spectrum-colorslider-border-color-hover: rgba(44, 44, 44, 0.1);
- --spectrum-colorslider-border-color-down: rgba(44, 44, 44, 0.1);
- --spectrum-colorslider-border-color-key-focus: rgba(44, 44, 44, 0.1);
- --spectrum-colorslider-vertical-border-color: rgba(44, 44, 44, 0.1);
- --spectrum-colorslider-vertical-border-color-hover: rgba(
- 44,
- 44,
- 44,
- 0.1
- );
- --spectrum-colorslider-vertical-border-color-down: rgba(
- 44,
- 44,
- 44,
- 0.1
- );
- --spectrum-colorslider-vertical-border-color-key-focus: rgba(
- 44,
- 44,
- 44,
- 0.1
- );
- --spectrum-colorwheel-border-color: rgba(44, 44, 44, 0.1);
- --spectrum-colorwheel-border-color-hover: rgba(44, 44, 44, 0.1);
- --spectrum-colorwheel-border-color-down: rgba(44, 44, 44, 0.1);
- --spectrum-colorwheel-border-color-key-focus: rgba(44, 44, 44, 0.1);
- --spectrum-miller-column-item-background-color-selected: rgba(
- 20,
- 115,
- 230,
- 0.1
- );
- --spectrum-miller-column-item-background-color-selected-hover: rgba(
- 20,
- 115,
- 230,
- 0.2
- );
- --spectrum-tabs-compact-selection-indicator-color: var(
- --spectrum-global-color-blue-500
- );
- --spectrum-tabs-compact-vertical-rule-color: var(
- --spectrum-global-color-gray-200
- );
- --spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var(
- --spectrum-global-color-blue-500
- );
- --spectrum-tabs-compact-vertical-emphasized-rule-color: var(
- --spectrum-global-color-gray-200
- );
- --spectrum-tabs-emphasized-selection-indicator-color: var(
- --spectrum-global-color-blue-500
- );
- --spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var(
- --spectrum-global-color-blue-500
- );
- --spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var(
- --spectrum-global-color-blue-500
- );
- --spectrum-tabs-quiet-emphasized-selection-indicator-color: var(
- --spectrum-global-color-blue-500
- );
- --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var(
- --spectrum-global-color-blue-500
- );
- --spectrum-well-background-color: rgba(75, 75, 75, 0.02);
- --spectrum-well-border-color: rgba(44, 44, 44, 0.05);
- --spectrum-global-dimension-scale-factor: 1;
- --spectrum-global-dimension-size-0: 0px;
- --spectrum-global-dimension-size-10: 1px;
- --spectrum-global-dimension-size-25: 2px;
- --spectrum-global-dimension-size-40: 3px;
- --spectrum-global-dimension-size-50: 4px;
- --spectrum-global-dimension-size-65: 5px;
- --spectrum-global-dimension-size-75: 6px;
- --spectrum-global-dimension-size-85: 7px;
- --spectrum-global-dimension-size-100: 8px;
- --spectrum-global-dimension-size-115: 9px;
- --spectrum-global-dimension-size-125: 10px;
- --spectrum-global-dimension-size-130: 11px;
- --spectrum-global-dimension-size-150: 12px;
- --spectrum-global-dimension-size-160: 13px;
- --spectrum-global-dimension-size-175: 14px;
- --spectrum-global-dimension-size-200: 16px;
- --spectrum-global-dimension-size-225: 18px;
- --spectrum-global-dimension-size-250: 20px;
- --spectrum-global-dimension-size-300: 24px;
- --spectrum-global-dimension-size-350: 28px;
- --spectrum-global-dimension-size-400: 32px;
- --spectrum-global-dimension-size-450: 36px;
- --spectrum-global-dimension-size-500: 40px;
- --spectrum-global-dimension-size-550: 44px;
- --spectrum-global-dimension-size-600: 48px;
- --spectrum-global-dimension-size-675: 54px;
- --spectrum-global-dimension-size-700: 56px;
- --spectrum-global-dimension-size-800: 64px;
- --spectrum-global-dimension-size-900: 72px;
- --spectrum-global-dimension-size-1000: 80px;
- --spectrum-global-dimension-size-1200: 96px;
- --spectrum-global-dimension-size-1250: 100px;
- --spectrum-global-dimension-size-1600: 128px;
- --spectrum-global-dimension-size-1700: 136px;
- --spectrum-global-dimension-size-2000: 160px;
- --spectrum-global-dimension-size-2400: 192px;
- --spectrum-global-dimension-size-3000: 240px;
- --spectrum-global-dimension-size-3400: 272px;
- --spectrum-global-dimension-size-3600: 288px;
- --spectrum-global-dimension-size-4600: 368px;
- --spectrum-global-dimension-size-5000: 400px;
- --spectrum-global-dimension-size-6000: 480px;
- --spectrum-global-dimension-font-size-25: 10px;
- --spectrum-global-dimension-font-size-50: 11px;
- --spectrum-global-dimension-font-size-75: 12px;
- --spectrum-global-dimension-font-size-100: 14px;
- --spectrum-global-dimension-font-size-150: 15px;
- --spectrum-global-dimension-font-size-200: 16px;
- --spectrum-global-dimension-font-size-300: 18px;
- --spectrum-global-dimension-font-size-400: 20px;
- --spectrum-global-dimension-font-size-500: 22px;
- --spectrum-global-dimension-font-size-600: 25px;
- --spectrum-global-dimension-font-size-700: 28px;
- --spectrum-global-dimension-font-size-800: 32px;
- --spectrum-global-dimension-font-size-900: 36px;
- --spectrum-global-dimension-font-size-1000: 40px;
- --spectrum-global-dimension-font-size-1100: 45px;
- --spectrum-alias-heading-display1-text-size: var(
- --spectrum-global-dimension-font-size-1100
- );
- --spectrum-alias-heading-xxxl-text-size: var(
- --spectrum-global-dimension-font-size-1100
- );
- --spectrum-alias-heading-display1-margin-top: var(
- --spectrum-global-dimension-font-size-1000
- );
- --spectrum-alias-heading-xxxl-margin-top: var(
- --spectrum-global-dimension-font-size-1000
- );
- --spectrum-alias-heading-display2-text-size: var(
- --spectrum-global-dimension-font-size-1000
- );
- --spectrum-alias-heading-xxl-text-size: var(
- --spectrum-global-dimension-font-size-1000
- );
- --spectrum-alias-heading-display2-margin-top: var(
- --spectrum-global-dimension-font-size-900
- );
- --spectrum-alias-heading-xxl-margin-top: var(
- --spectrum-global-dimension-font-size-900
- );
- --spectrum-alias-heading1-text-size: var(
- --spectrum-global-dimension-font-size-900
- );
- --spectrum-alias-heading-xl-text-size: var(
- --spectrum-global-dimension-font-size-900
- );
- --spectrum-alias-heading1-margin-top: var(
- --spectrum-global-dimension-font-size-800
- );
- --spectrum-alias-heading-xl-margin-top: var(
- --spectrum-global-dimension-font-size-800
- );
- --spectrum-alias-heading2-text-size: var(
- --spectrum-global-dimension-font-size-700
- );
- --spectrum-alias-heading-l-text-size: var(
- --spectrum-global-dimension-font-size-700
- );
- --spectrum-alias-heading2-margin-top: var(
- --spectrum-global-dimension-font-size-600
- );
- --spectrum-alias-heading-l-margin-top: var(
- --spectrum-global-dimension-font-size-600
- );
- --spectrum-alias-heading3-text-size: var(
- --spectrum-global-dimension-font-size-500
- );
- --spectrum-alias-heading-m-text-size: var(
- --spectrum-global-dimension-font-size-500
- );
- --spectrum-alias-heading3-margin-top: var(
- --spectrum-global-dimension-font-size-400
- );
- --spectrum-alias-heading-m-margin-top: var(
- --spectrum-global-dimension-font-size-400
- );
- --spectrum-actionbutton-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-actionbutton-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-actionbutton-emphasized-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-actionbutton-emphasized-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-actionbutton-quiet-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-actionbutton-quiet-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-actionbutton-quiet-emphasized-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-actionbutton-quiet-emphasized-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-barloader-large-border-radius: 3px;
- --spectrum-barloader-large-indeterminate-border-radius: 3px;
- --spectrum-barloader-large-over-background-border-radius: 3px;
- --spectrum-barloader-small-border-radius: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-barloader-small-indeterminate-border-radius: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-barloader-small-over-background-border-radius: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-breadcrumb-compact-item-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-breadcrumb-compact-button-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-breadcrumb-item-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-breadcrumb-button-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-breadcrumb-multiline-item-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-breadcrumb-multiline-button-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-cta-text-padding-bottom: [object Object];
- --spectrum-button-cta-min-width: var(
- --spectrum-global-dimension-size-900
- );
- --spectrum-button-cta-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-cta-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-over-background-text-padding-bottom: [object Object];
- --spectrum-button-over-background-min-width: var(
- --spectrum-global-dimension-size-900
- );
- --spectrum-button-over-background-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-over-background-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-primary-text-padding-bottom: [object Object];
- --spectrum-button-primary-min-width: var(
- --spectrum-global-dimension-size-900
- );
- --spectrum-button-primary-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-primary-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-quiet-over-background-text-padding-bottom: [object
- Object];
- --spectrum-button-quiet-over-background-min-width: var(
- --spectrum-global-dimension-size-900
- );
- --spectrum-button-quiet-over-background-touch-hit-x: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-button-quiet-over-background-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-quiet-over-background-cursor-hit-x: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-button-quiet-primary-text-padding-bottom: [object Object];
- --spectrum-button-quiet-primary-min-width: var(
- --spectrum-global-dimension-size-900
- );
- --spectrum-button-quiet-primary-touch-hit-x: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-button-quiet-primary-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-quiet-primary-cursor-hit-x: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-button-quiet-secondary-text-padding-bottom: [object Object];
- --spectrum-button-quiet-secondary-min-width: var(
- --spectrum-global-dimension-size-900
- );
- --spectrum-button-quiet-secondary-touch-hit-x: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-button-quiet-secondary-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-quiet-secondary-cursor-hit-x: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-button-quiet-warning-text-padding-bottom: [object Object];
- --spectrum-button-quiet-warning-min-width: var(
- --spectrum-global-dimension-size-900
- );
- --spectrum-button-quiet-warning-touch-hit-x: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-button-quiet-warning-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-quiet-warning-cursor-hit-x: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-button-secondary-text-padding-bottom: [object Object];
- --spectrum-button-secondary-min-width: var(
- --spectrum-global-dimension-size-900
- );
- --spectrum-button-secondary-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-secondary-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-warning-text-padding-bottom: [object Object];
- --spectrum-button-warning-min-width: var(
- --spectrum-global-dimension-size-900
- );
- --spectrum-button-warning-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-button-warning-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-checkbox-text-gap-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-text-gap-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-text-gap-indeterminate-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-text-gap-error-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-text-gap-error-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-text-gap-error-indeterminate-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-checkbox-emphasized-text-gap-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-emphasized-text-gap-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-emphasized-text-gap-indeterminate-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-emphasized-text-gap-error-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-emphasized-text-gap-error-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-emphasized-text-gap-error-indeterminate-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-emphasized-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-checkbox-quiet-text-gap-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-quiet-text-gap-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-quiet-text-gap-indeterminate-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-quiet-text-gap-error-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-quiet-text-gap-error-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-quiet-text-gap-error-indeterminate-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-checkbox-quiet-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-circleloader-medium-border-size: 3px;
- --spectrum-circleloader-medium-over-background-border-size: 3px;
- --spectrum-circleloader-small-border-size: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-circleloader-small-over-background-border-size: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-colorhandle-loupe-margin: var(
- --spectrum-global-dimension-static-size-125
- );
- --spectrum-colorslider-touch-hit-y: var(
- --spectrum-global-dimension-size-150
- );
- --spectrum-colorslider-vertical-touch-hit-x: var(
- --spectrum-global-dimension-size-150
- );
- --spectrum-colorwheel-min-size: var(
- --spectrum-global-dimension-size-2400
- );
- --spectrum-colorwheel-touch-hit-outer: var(
- --spectrum-global-dimension-size-150
- );
- --spectrum-colorwheel-touch-hit-inner: var(
- --spectrum-global-dimension-size-150
- );
- --spectrum-cyclebutton-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-cyclebutton-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-dialog-confirm-max-width: var(
- --spectrum-global-dimension-static-size-6000
- );
- --spectrum-dialog-confirm-title-text-size: var(
- --spectrum-global-dimension-font-size-300
- );
- --spectrum-dialog-confirm-description-text-size: var(
- --spectrum-global-dimension-font-size-100
- );
- --spectrum-dialog-confirm-padding: var(
- --spectrum-global-dimension-static-size-500
- );
- --spectrum-dialog-confirm-description-margin-bottom: var(
- --spectrum-global-dimension-static-size-600
- );
- --spectrum-dialog-max-width: var(
- --spectrum-global-dimension-static-size-6000
- );
- --spectrum-dialog-title-text-size: var(
- --spectrum-global-dimension-font-size-300
- );
- --spectrum-dialog-content-text-size: var(
- --spectrum-global-dimension-font-size-100
- );
- --spectrum-dialog-padding: var(
- --spectrum-global-dimension-static-size-500
- );
- --spectrum-dialog-content-margin-bottom: var(
- --spectrum-global-dimension-static-size-600
- );
- --spectrum-dialog-destructive-max-width: var(
- --spectrum-global-dimension-static-size-6000
- );
- --spectrum-dialog-destructive-title-text-size: var(
- --spectrum-global-dimension-font-size-300
- );
- --spectrum-dialog-destructive-description-text-size: var(
- --spectrum-global-dimension-font-size-100
- );
- --spectrum-dialog-destructive-padding: var(
- --spectrum-global-dimension-static-size-500
- );
- --spectrum-dialog-destructive-description-margin-bottom: var(
- --spectrum-global-dimension-static-size-600
- );
- --spectrum-dialog-error-max-width: var(
- --spectrum-global-dimension-static-size-6000
- );
- --spectrum-dialog-error-title-text-size: var(
- --spectrum-global-dimension-font-size-300
- );
- --spectrum-dialog-error-description-text-size: var(
- --spectrum-global-dimension-font-size-100
- );
- --spectrum-dialog-error-padding: var(
- --spectrum-global-dimension-static-size-500
- );
- --spectrum-dialog-error-description-margin-bottom: var(
- --spectrum-global-dimension-static-size-600
- );
- --spectrum-dialog-info-max-width: var(
- --spectrum-global-dimension-static-size-6000
- );
- --spectrum-dialog-info-title-text-size: var(
- --spectrum-global-dimension-font-size-300
- );
- --spectrum-dialog-info-description-text-size: var(
- --spectrum-global-dimension-font-size-100
- );
- --spectrum-dialog-info-padding: var(
- --spectrum-global-dimension-static-size-500
- );
- --spectrum-dialog-info-description-margin-bottom: var(
- --spectrum-global-dimension-static-size-600
- );
- --spectrum-dropdown-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-dropdown-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-dropdown-quiet-touch-hit-y: var(
- --spectrum-global-dimension-static-size-400
- );
- --spectrum-dropdown-thumbnail-small-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-dropdown-thumbnail-small-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-fieldbutton-quiet-min-width: var(
- --spectrum-global-dimension-size-225
- );
- --spectrum-icon-arrow-down-small-height: var(
- --spectrum-global-dimension-size-125
- );
- --spectrum-icon-arrow-left-medium-height: var(
- --spectrum-global-dimension-size-125
- );
- --spectrum-icon-checkmark-medium-width: var(
- --spectrum-global-dimension-size-150
- );
- --spectrum-icon-checkmark-medium-height: var(
- --spectrum-global-dimension-size-150
- );
- --spectrum-icon-checkmark-small-width: var(
- --spectrum-global-dimension-size-125
- );
- --spectrum-icon-checkmark-small-height: var(
- --spectrum-global-dimension-size-125
- );
- --spectrum-icon-chevron-down-medium-width: var(
- --spectrum-global-dimension-size-125
- );
- --spectrum-icon-chevron-left-large-width: var(
- --spectrum-global-dimension-size-150
- );
- --spectrum-icon-chevron-left-medium-height: var(
- --spectrum-global-dimension-size-125
- );
- --spectrum-icon-chevron-right-large-width: var(
- --spectrum-global-dimension-size-150
- );
- --spectrum-icon-chevron-right-medium-height: var(
- --spectrum-global-dimension-size-125
- );
- --spectrum-icon-cross-large-width: var(
- --spectrum-global-dimension-size-150
- );
- --spectrum-icon-cross-large-height: var(
- --spectrum-global-dimension-size-150
- );
- --spectrum-icon-dash-small-width: var(
- --spectrum-global-dimension-size-125
- );
- --spectrum-icon-dash-small-height: var(
- --spectrum-global-dimension-size-125
- );
- --spectrum-icon-skip-left-width: 9px;
- --spectrum-icon-skip-left-height: var(
- --spectrum-global-dimension-size-125
- );
- --spectrum-icon-skip-right-width: 9px;
- --spectrum-icon-skip-right-height: var(
- --spectrum-global-dimension-size-125
- );
- --spectrum-icon-triplegripper-width: var(
- --spectrum-global-dimension-size-125
- );
- --spectrum-loader-bar-large-border-radius: 3px;
- --spectrum-loader-bar-large-over-background-border-radius: 3px;
- --spectrum-loader-bar-small-border-radius: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-loader-bar-small-over-background-border-radius: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-loader-circle-medium-border-size: 3px;
- --spectrum-loader-circle-medium-over-background-border-size: 3px;
- --spectrum-loader-circle-small-border-size: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-loader-circle-small-over-background-border-size: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-meter-large-border-radius: 3px;
- --spectrum-meter-small-border-radius: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-pagination-page-button-line-height: 26px;
- --spectrum-radio-text-gap-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-radio-text-gap-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-radio-text-gap-error-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-radio-text-gap-error-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-radio-margin-bottom: 0px;
- --spectrum-radio-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-radio-emphasized-text-gap-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-radio-emphasized-text-gap-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-radio-emphasized-text-gap-error-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-radio-emphasized-text-gap-error-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-radio-emphasized-margin-bottom: 0px;
- --spectrum-radio-emphasized-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-radio-quiet-text-gap-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-radio-quiet-text-gap-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-radio-quiet-text-gap-error-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-radio-quiet-text-gap-error-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-radio-quiet-margin-bottom: 0px;
- --spectrum-radio-quiet-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-rating-icon-width: 24px;
- --spectrum-rating-indicator-width: 16px;
- --spectrum-rating-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-rating-emphasized-icon-width: 24px;
- --spectrum-rating-emphasized-indicator-width: 16px;
- --spectrum-rating-emphasized-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-rating-quiet-icon-width: 24px;
- --spectrum-rating-quiet-indicator-width: 16px;
- --spectrum-rating-quiet-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-search-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-search-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-search-icon-frame: var(
- --spectrum-global-dimension-static-size-400
- );
- --spectrum-search-quiet-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-search-quiet-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-search-quiet-icon-frame: var(
- --spectrum-global-dimension-static-size-400
- );
- --spectrum-selectlist-option-icon-size: var(
- --spectrum-global-dimension-static-size-150
- );
- --spectrum-selectlist-option-icon-padding-y: var(
- --spectrum-global-dimension-static-size-125
- );
- --spectrum-selectlist-option-icon-margin-top: var(
- --spectrum-global-dimension-static-size-65
- );
- --spectrum-selectlist-option-height: var(
- --spectrum-global-dimension-static-size-400
- );
- --spectrum-selectlist-thumbnail-option-icon-padding-y: var(
- --spectrum-global-dimension-static-size-125
- );
- --spectrum-selectlist-thumbnail-small-option-icon-padding-y: var(
- --spectrum-global-dimension-static-size-125
- );
- --spectrum-sidenav-item-touch-hit-bottom: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-sidenav-multilevel-item-touch-hit-bottom: var(
- --spectrum-global-dimension-static-size-25
- );
- --spectrum-slider-track-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-slider-handle-touch-hit-x: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-slider-handle-touch-hit-y: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-slider-editable-track-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-slider-editable-handle-touch-hit-x: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-slider-editable-handle-touch-hit-y: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-slider-fill-track-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-slider-fill-handle-touch-hit-x: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-slider-fill-handle-touch-hit-y: var(
- --spectrum-global-dimension-static-size-200
- );
- --spectrum-switch-text-gap-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-switch-text-gap-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-switch-text-gap-error-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-switch-text-gap-error-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-switch-track-width: 26px;
- --spectrum-switch-handle-border-radius: 7px;
- --spectrum-switch-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-switch-emphasized-text-gap-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-switch-emphasized-text-gap-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-switch-emphasized-text-gap-error-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-switch-emphasized-text-gap-error-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-switch-emphasized-track-width: 26px;
- --spectrum-switch-emphasized-handle-border-radius: 7px;
- --spectrum-switch-emphasized-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-switch-quiet-text-gap-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-switch-quiet-text-gap-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-switch-quiet-text-gap-error-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-switch-quiet-text-gap-error-selected-key-focus: var(
- --spectrum-global-dimension-static-size-115
- );
- --spectrum-switch-quiet-track-width: 26px;
- --spectrum-switch-quiet-handle-border-radius: 7px;
- --spectrum-switch-quiet-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-tabs-compact-focus-ring-border-radius: 5px;
- --spectrum-tabs-compact-margin-left: -8px;
- --spectrum-tabs-compact-margin-right: -8px;
- --spectrum-tabs-compact-vertical-focus-ring-border-radius: 5px;
- --spectrum-tabs-compact-vertical-emphasized-focus-ring-border-radius: 5px;
- --spectrum-tabs-baseline: var(--spectrum-global-dimension-size-225);
- --spectrum-tabs-focus-ring-border-radius: 5px;
- --spectrum-tabs-margin-left: -8px;
- --spectrum-tabs-margin-right: -8px;
- --spectrum-tabs-emphasized-baseline: var(
- --spectrum-global-dimension-size-225
- );
- --spectrum-tabs-emphasized-focus-ring-border-radius: 5px;
- --spectrum-tabs-emphasized-margin-left: -8px;
- --spectrum-tabs-emphasized-margin-right: -8px;
- --spectrum-tabs-quiet-baseline: var(
- --spectrum-global-dimension-size-225
- );
- --spectrum-tabs-quiet-focus-ring-border-radius: 5px;
- --spectrum-tabs-quiet-margin-left: -8px;
- --spectrum-tabs-quiet-margin-right: -8px;
- --spectrum-tabs-quiet-compact-focus-ring-border-radius: 5px;
- --spectrum-tabs-quiet-compact-margin-left: -8px;
- --spectrum-tabs-quiet-compact-margin-right: -8px;
- --spectrum-tabs-quiet-compact-emphasized-focus-ring-border-radius: 5px;
- --spectrum-tabs-quiet-compact-emphasized-margin-left: -8px;
- --spectrum-tabs-quiet-compact-emphasized-margin-right: -8px;
- --spectrum-tabs-quiet-compact-vertical-focus-ring-border-radius: 5px;
- --spectrum-tabs-quiet-compact-vertical-emphasized-focus-ring-border-radius: 5px;
- --spectrum-tabs-quiet-emphasized-baseline: var(
- --spectrum-global-dimension-size-225
- );
- --spectrum-tabs-quiet-emphasized-focus-ring-border-radius: 5px;
- --spectrum-tabs-quiet-emphasized-margin-left: -8px;
- --spectrum-tabs-quiet-emphasized-margin-right: -8px;
- --spectrum-tabs-quiet-vertical-baseline: var(
- --spectrum-global-dimension-size-225
- );
- --spectrum-tabs-quiet-vertical-focus-ring-border-radius: 5px;
- --spectrum-tabs-quiet-vertical-emphasized-baseline: var(
- --spectrum-global-dimension-size-225
- );
- --spectrum-tabs-quiet-vertical-emphasized-focus-ring-border-radius: 5px;
- --spectrum-tabs-vertical-baseline: var(
- --spectrum-global-dimension-size-225
- );
- --spectrum-tabs-vertical-focus-ring-border-radius: 5px;
- --spectrum-textarea-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-textarea-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-textarea-icon-frame: var(
- --spectrum-global-dimension-static-size-400
- );
- --spectrum-textarea-quiet-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-textarea-quiet-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-textarea-quiet-icon-frame: var(
- --spectrum-global-dimension-static-size-400
- );
- --spectrum-textfield-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-textfield-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-textfield-icon-frame: var(
- --spectrum-global-dimension-static-size-400
- );
- --spectrum-textfield-quiet-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-textfield-quiet-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-textfield-quiet-icon-frame: var(
- --spectrum-global-dimension-static-size-400
- );
- --spectrum-tool-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-tool-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-tool-high-emphasis-touch-hit-x: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-tool-high-emphasis-touch-hit-y: var(
- --spectrum-global-dimension-static-size-100
- );
- --spectrum-tooltip-padding-bottom: 5px;
- --spectrum-tooltip-content-max-width: 101px;
- --spectrum-tooltip-info-padding-bottom: 5px;
- --spectrum-tooltip-info-content-max-width: 101px;
- --spectrum-tooltip-negative-padding-bottom: 5px;
- --spectrum-tooltip-negative-content-max-width: 101px;
- --spectrum-tooltip-positive-padding-bottom: 5px;
- --spectrum-tooltip-positive-content-max-width: 101px;
- }
-`;
-export default styles;
diff --git a/second-gen/.eslintrc.json b/second-gen/.eslintrc.json
new file mode 100644
index 00000000000..bdfe92ddeeb
--- /dev/null
+++ b/second-gen/.eslintrc.json
@@ -0,0 +1,170 @@
+{
+ "env": {
+ "browser": true,
+ "es6": true,
+ "node": true
+ },
+ "extends": [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:prettier/recommended",
+ "plugin:lit-a11y/recommended"
+ ],
+ "ignorePatterns": ["**/dist/**"],
+ "overrides": [
+ {
+ "extends": ["plugin:jsonc/recommended-with-jsonc"],
+ "files": ["*.json"],
+ "parser": "jsonc-eslint-parser",
+ "rules": {
+ "jsonc/sort-keys": ["warn"],
+ "notice/notice": "off"
+ }
+ },
+ {
+ "extends": ["plugin:jsonc/recommended-with-jsonc"],
+ "files": ["package.json"],
+ "parser": "jsonc-eslint-parser",
+ "rules": {
+ "jsonc/sort-keys": [
+ "warn",
+ {
+ "hasProperties": ["type"],
+ "order": [
+ "$schema",
+ "name",
+ "version",
+ "private",
+ "description",
+ "license",
+ "author",
+ "maintainers",
+ "contributors",
+ "homepage",
+ "repository",
+ "bugs",
+ "type",
+ "exports",
+ "main",
+ "module",
+ "browser",
+ "man",
+ "preferGlobal",
+ "bin",
+ "files",
+ "directories",
+ "scripts",
+ "config",
+ "sideEffects",
+ "types",
+ "typings",
+ "workspaces",
+ "resolutions",
+ "dependencies",
+ "bundleDependencies",
+ "bundledDependencies",
+ "peerDependencies",
+ "peerDependenciesMeta",
+ "optionalDependencies",
+ "devDependencies",
+ "keywords",
+ "engines",
+ "engineStrict",
+ "os",
+ "cpu",
+ "publishConfig"
+ ],
+ "pathPattern": "^$" // Top-level properties
+ },
+ {
+ /*
+ * This rule excludes export conditions from alphabetical sorting.
+ * Since node.js processes export conditions in order and chooses the
+ * first match, they need to be ordered logically, not alphabetically.
+ */
+ "order": { "type": "asc" },
+ "pathPattern": "^(?!exports\\[).*" // All properties except export conditions
+ }
+ ]
+ }
+ },
+ {
+ "files": ["scripts/*"],
+ "rules": {
+ "no-console": ["off"]
+ }
+ },
+ {
+ "files": ["react/**/*.ts"],
+ "rules": {
+ "@typescript-eslint/no-explicit-any": "off"
+ }
+ }
+ ],
+ "parser": "@typescript-eslint/parser",
+ "parserOptions": {
+ "ecmaVersion": 2020,
+ "sourceType": "module"
+ },
+ "plugins": [
+ "@typescript-eslint",
+ "notice",
+ "@spectrum-web-components",
+ "import",
+ "simple-import-sort"
+ ],
+ "root": true,
+ "rules": {
+ "@spectrum-web-components/prevent-argument-names": [
+ "error",
+ ["e", "ev", "evt", "err"]
+ ],
+ "curly": ["error", "all"],
+ "import/prefer-default-export": "off",
+ "lit-a11y/click-events-have-key-events": [
+ "error",
+ {
+ "allowList": [
+ "sp-button",
+ "sp-action-button",
+ "sp-checkbox",
+ "sp-radio",
+ "sp-switch",
+ "sp-menu-item",
+ "sp-clear-button",
+ "sp-underlay"
+ ]
+ }
+ ],
+ "no-console": [
+ "error",
+ {
+ "allow": ["warn", "error"]
+ }
+ ],
+ "no-debugger": 2,
+ "notice/notice": [
+ "error",
+ {
+ "mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.",
+ "templateFile": "first-gen/config/license.js"
+ }
+ ],
+ "simple-import-sort/imports": [
+ "error",
+ {
+ "groups": [
+ [
+ "^lit",
+ "^@lit",
+ "^(?!@swc|@spectrum-web-components)@?\\w"
+ ],
+ ["^@swc", "^@spectrum-web-components"],
+ ["^\\u0000"],
+ ["^\\."],
+ ["^.+\\.(css|scss|sass|less|styl)$"]
+ ]
+ }
+ ]
+ }
+}
diff --git a/second-gen/README.md b/second-gen/README.md
new file mode 100644
index 00000000000..e3bcf4476cc
--- /dev/null
+++ b/second-gen/README.md
@@ -0,0 +1,159 @@
+# Spectrum Web Components - Second Generation
+
+This folder contains the second generation of Spectrum Web Components.
+
+## Architecture Overview
+
+The 2nd generation follows a dual-package architecture:
+
+- **`packages/core/`** - Abstract base classes providing common functionality
+- **`packages/swc/`** - Concrete component implementations with styling and stories
+
+## Components
+
+The following components are available in the barebones milestone:
+
+- ...
+
+## Tooling Stack
+
+### Build System
+
+- **Vite**
+- **TypeScript**
+
+### Development & Testing
+
+- **Storybook v9** - Component development with Web Components + Vite framework
+- **Vitest** - Fast testing with browser mode and Playwright integration
+- **Playwright** - End-to-end testing and accessibility validation
+
+### Code Quality
+
+- **ESLint** - Code linting with TypeScript support
+- **Prettier** - Code formatting
+- **Accessibility** - Built-in a11y testing with axe-core
+
+## Getting Started
+
+### Installation
+
+```bash
+# Install dependencies
+yarn install
+
+# Build packages
+yarn build
+```
+
+### Development
+
+```bash
+# Start Storybook for component development
+yarn storybook
+
+# Run tests
+yarn test
+
+# Build all packages
+yarn build
+```
+
+### Project Structure
+
+```
+second-gen/
+├── packages/
+│ ├── base/ # Abstract base classes
+│ │ └── components/
+│ │ ├── alert/
+│ │ ├── badge/
+│ │ ├── button/
+│ │ ├── divider/
+│ │ ├── progress-bar/
+│ │ └── slider/
+│ └── swc/ # Concrete implementations
+│ ├── .storybook/ # Storybook configuration
+│ └── components/
+│ ├── alert/
+│ │ ├── Alert.ts
+│ │ ├── styles.css.js
+│ │ ├── stories/
+│ │ ├── test/
+│ │ └── README.md
+│ └── ... (other components)
+├── vitest.config.js # Test configuration
+├── playwright.config.js # E2E test configuration
+└── tsconfig.json # TypeScript configuration
+```
+
+## Component Development
+
+### Creating a New Component
+
+1. **Base Class**: Create base class in `packages/core/components/`
+2. **Implementation**: Create concrete rendering implementation in `packages/swc/components/`
+3. **Styles**: TBD (WIP)
+4. **Stories**: Create Storybook stories (CSF) for development and documentation
+5. **Tests**: Add Vitest tests for functionality and accessibility
+
+### Component Structure
+
+Each component follows this structure:
+
+```
+component-name/
+├── index.ts # Main export
+├── ComponentName.ts # Implementation
+├── styles.css.js # Styling
+├── stories/
+│ └── ComponentName.stories.ts
+├── test/
+│ └── ComponentName.test.ts
+└── README.md # Component documentation
+```
+
+## Testing Strategy
+
+WIP
+
+## Build Outputs
+
+WIP
+
+Each package produces:
+
+- **ESM modules** targeting ES2022
+- **TypeScript declarations** (.d.ts files)
+- **Source maps** for debugging
+- **Tree-shakable exports** for optimal bundle sizes
+
+## Design Principles
+
+## Migration from 1st Generation
+
+The 2nd generation is designed to coexist with the 1st generation during the transition period. Components can be migrated incrementally as needed.
+
+## Contributing
+
+WIP
+
+### Code Standards
+
+WIP, example ideas below:
+
+- Follow existing component patterns
+- Include comprehensive tests
+- Document public APIs
+- Use semantic commit messages
+
+## Future Roadmap
+
+The barebones milestone establishes the foundation. Future iterations will add:
+
+- Additional components
+- Advanced accessibility features
+- Enhanced developer tooling
+- Visual regression testing
+- React wrapper generation
+- ...
diff --git a/second-gen/package.json b/second-gen/package.json
new file mode 100644
index 00000000000..9698a3e147b
--- /dev/null
+++ b/second-gen/package.json
@@ -0,0 +1,48 @@
+{
+ "name": "@adobe/spectrum-web-components-2nd-gen",
+ "version": "0.0.1",
+ "private": true,
+ "description": "Second generation Spectrum Web Components with modern tooling and architecture",
+ "license": "Apache-2.0",
+ "author": "Adobe",
+ "homepage": "https://opensource.adobe.com/spectrum-web-components/",
+ "repository": {
+ "directory": "second-gen",
+ "type": "git",
+ "url": "https://github.com/adobe/spectrum-web-components.git"
+ },
+ "bugs": {
+ "url": "https://github.com/adobe/spectrum-web-components/issues"
+ },
+ "type": "module",
+ "scripts": {
+ "build": "yarn workspaces foreach --from '@swc/*' run build",
+ "clean": "yarn workspaces foreach --from '@swc/*' run clean",
+ "lint": "eslint . --ext .ts,.js,.json",
+ "storybook": "yarn workspace @swc/components storybook",
+ "storybook:build": "yarn workspace @swc/components storybook:build",
+ "test": "yarn workspace @swc/components test"
+ },
+ "workspaces": [
+ "packages/*"
+ ],
+ "devDependencies": {
+ "eslint-plugin-simple-import-sort": "^12.1.1"
+ },
+ "keywords": [
+ "design-system",
+ "spectrum",
+ "adobe",
+ "adobe-spectrum",
+ "web components",
+ "web-components",
+ "lit-element",
+ "lit-html",
+ "second-gen"
+ ],
+ "engines": {
+ "node": ">=20",
+ "yarn": ">=4.6.0"
+ },
+ "packageManager": "yarn@4.9.2"
+}
diff --git a/packages/alert-banner/src/AlertBanner.ts b/second-gen/packages/core/components/alert-banner/AlertBanner.base.ts
similarity index 61%
rename from packages/alert-banner/src/AlertBanner.ts
rename to second-gen/packages/core/components/alert-banner/AlertBanner.base.ts
index a1006dd53fa..8acf923fa4b 100644
--- a/packages/alert-banner/src/AlertBanner.ts
+++ b/second-gen/packages/core/components/alert-banner/AlertBanner.base.ts
@@ -9,33 +9,20 @@
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
-import {
- CSSResultArray,
- html,
- PropertyValues,
- SpectrumElement,
- TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import '@spectrum-web-components/button/sp-close-button.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
-import styles from './alert-banner.css.js';
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import { SpectrumElement } from '@swc/core/shared/base';
const VALID_VARIANTS = ['neutral', 'info', 'negative'];
export type AlertBannerVariants = (typeof VALID_VARIANTS)[number];
/**
- * @element sp-alert-banner
- *
- * @slot - The alert banner text context
- * @slot action - Slot for the button element that surfaces the contextual action a user can take
- *
- * @fires close - Announces the alert banner has been closed
+ * Base class for alert banner components
*/
-export class AlertBanner extends SpectrumElement {
+export abstract class AlertBannerBase extends SpectrumElement {
public static override get styles(): CSSResultArray {
- return [styles];
+ return [];
}
/**
@@ -98,25 +85,9 @@ export class AlertBanner extends SpectrumElement {
return VALID_VARIANTS.includes(variant);
}
- protected renderIcon(variant: string): TemplateResult {
- switch (variant) {
- case 'info':
- return html`
-
-
-
- ${this.renderIcon(this.variant)}
-
-
- ${this.dismissible
- ? html`
-
- `;
- }
-
protected override updated(changes: PropertyValues): void {
super.updated(changes);
diff --git a/second-gen/packages/core/components/alert-banner/index.ts b/second-gen/packages/core/components/alert-banner/index.ts
new file mode 100644
index 00000000000..7524aa7d463
--- /dev/null
+++ b/second-gen/packages/core/components/alert-banner/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright 2025 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.
+ */
+export * from './AlertBanner.base';
diff --git a/second-gen/packages/core/components/asset/Asset.base.ts b/second-gen/packages/core/components/asset/Asset.base.ts
new file mode 100644
index 00000000000..75415d7d189
--- /dev/null
+++ b/second-gen/packages/core/components/asset/Asset.base.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright 2025 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.
+ */
+
+import { property } from 'lit/decorators.js';
+
+import { SpectrumElement } from '@swc/core/shared/base';
+
+export abstract class AssetBase extends SpectrumElement {
+ @property({ type: String, reflect: true })
+ public variant: 'file' | 'folder' | undefined;
+
+ @property()
+ public label = '';
+}
diff --git a/second-gen/packages/core/components/asset/index.ts b/second-gen/packages/core/components/asset/index.ts
new file mode 100644
index 00000000000..474e6f57376
--- /dev/null
+++ b/second-gen/packages/core/components/asset/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright 2025 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.
+ */
+export * from './Asset.base';
diff --git a/second-gen/packages/core/components/badge/Badge.base.ts b/second-gen/packages/core/components/badge/Badge.base.ts
new file mode 100644
index 00000000000..73d3765d60c
--- /dev/null
+++ b/second-gen/packages/core/components/badge/Badge.base.ts
@@ -0,0 +1,170 @@
+/**
+ * Copyright 2025 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.
+ */
+import { PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import { SizedMixin, SpectrumElement } from '@swc/core/shared/base';
+import { ObserveSlotPresence } from '@swc/core/shared/observe-slot-presence';
+import { ObserveSlotText } from '@swc/core/shared/observe-slot-text';
+
+import {
+ BADGE_VARIANTS_SEMANTIC,
+ type BadgeVariant,
+ FIXED_VALUES,
+ type FixedValues,
+} from './Badge.types';
+
+/**
+ * A badge component that displays short, descriptive information about an element.
+ * Badges are typically used to indicate status, categories, or provide supplementary information.
+ *
+ * @attribute {ElementSize} size - The size of the badge.
+ *
+ * @slot - Text label of the badge.
+ * @slot icon - Optional icon that appears to the left of the label
+ */
+export abstract class BadgeBase extends SizedMixin(
+ ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), ''),
+ {
+ noDefaultSize: true,
+ }
+) {
+ // ─────────────────────────
+ // API TO OVERRIDE
+ // ─────────────────────────
+
+ /**
+ * @internal
+ *
+ * A readonly array of the valid color variants for the badge.
+ *
+ * This is an actual internal property, intended not for customer use
+ * but for use in internal validation logic, stories, tests, etc.
+ *
+ * Because S1 and S2 support different color variants, the value of this
+ * property must be set in each subclass.
+ */
+ static readonly VARIANTS_COLOR: readonly string[];
+
+ /**
+ * @internal
+ *
+ * A readonly array of all valid variants for the badge.
+ *
+ * This is an actual internal property, intended not for customer use
+ * but for use in internal validation logic, stories, tests, etc.
+ *
+ * Because S1 and S2 support different variants, the value of this
+ * property must be set in each subclass.
+ */
+ static readonly VARIANTS: readonly string[];
+
+ /**
+ * @internal
+ *
+ * The variant of the badge.
+ *
+ * This is a public property, but its valid values vary between S1 and S2,
+ * so the property (and its docs) need to be redefined in each subclass.
+ *
+ * The type declared here is a union of the valid values for S1 and S2,
+ * and should be narrowed in each subclass.
+ */
+ @property({ type: String, reflect: true })
+ public variant: BadgeVariant = 'informative';
+
+ // ──────────────────
+ // SHARED API
+ // ──────────────────
+
+ /**
+ * @internal
+ */
+ static readonly FIXED_VALUES: readonly string[] = FIXED_VALUES;
+
+ /**
+ * @internal
+ */
+ static readonly VARIANTS_SEMANTIC: readonly string[] =
+ BADGE_VARIANTS_SEMANTIC;
+
+ /**
+ * The fixed position of the badge.
+ *
+ * @todo The purpose of the bespoke getter and setter is unclear, as it
+ * looks like they may be behaving just like a standard Lit reactive
+ * property. Explore replacing after the Barebones milestone.
+ */
+ @property({ reflect: true })
+ public get fixed(): FixedValues | undefined {
+ return this._fixed;
+ }
+
+ public set fixed(fixed: FixedValues | undefined) {
+ if (fixed === this.fixed) {
+ return;
+ }
+ const oldValue = this.fixed;
+ this._fixed = fixed;
+ if (fixed) {
+ this.setAttribute('fixed', fixed);
+ } else {
+ this.removeAttribute('fixed');
+ }
+ this.requestUpdate('fixed', oldValue);
+ }
+
+ private _fixed?: FixedValues;
+
+ // ──────────────────────
+ // IMPLEMENTATION
+ // ──────────────────────
+
+ /**
+ * @internal Used for rendering gap when the badge has an icon.
+ */
+ protected get hasIcon(): boolean {
+ return this.slotContentIsPresent;
+ }
+
+ protected override update(changedProperties: PropertyValues): void {
+ super.update(changedProperties);
+ if (window.__swc?.DEBUG) {
+ const constructor = this.constructor as typeof BadgeBase;
+ if (!constructor.VARIANTS.includes(this.variant)) {
+ window.__swc.warn(
+ this,
+ `<${this.localName}> element expect the "variant" attribute to be one of the following:`,
+ 'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',
+ {
+ issues: [...constructor.VARIANTS],
+ }
+ );
+ }
+ // Check outline property if it exists (S2 only)
+ if (
+ 'outline' in this &&
+ (this as { outline: boolean }).outline === true &&
+ !constructor.VARIANTS_SEMANTIC.includes(this.variant)
+ ) {
+ window.__swc.warn(
+ this,
+ `<${this.localName}> element only supports the outline styling if the variant is a semantic color variant.`,
+ 'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',
+ {
+ issues: [...constructor.VARIANTS_SEMANTIC],
+ }
+ );
+ }
+ }
+ }
+}
diff --git a/second-gen/packages/core/components/badge/Badge.types.ts b/second-gen/packages/core/components/badge/Badge.types.ts
new file mode 100644
index 00000000000..05cf282b0e8
--- /dev/null
+++ b/second-gen/packages/core/components/badge/Badge.types.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright 2025 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.
+ */
+
+/*
+ * @todo The S1 types can be removed once we are no longer maintaining 1st-gen.
+ */
+
+export const FIXED_VALUES = [
+ 'inline-start',
+ 'inline-end',
+ 'block-start',
+ 'block-end',
+] as const;
+
+export type FixedValues = (typeof FIXED_VALUES)[number];
+
+export const BADGE_VARIANTS_SEMANTIC = [
+ 'accent',
+ 'neutral',
+ 'informative',
+ 'positive',
+ 'negative',
+ 'notice',
+] as const;
+
+export const BADGE_VARIANTS_COLOR_S1 = [
+ 'fuchsia',
+ 'indigo',
+ 'magenta',
+ 'purple',
+ 'seafoam',
+ 'yellow',
+ 'gray',
+ 'red',
+ 'orange',
+ 'chartreuse',
+ 'celery',
+ 'green',
+ 'cyan',
+ 'blue',
+] as const;
+
+export const BADGE_VARIANTS_COLOR_S2 = [
+ ...BADGE_VARIANTS_COLOR_S1,
+ 'pink',
+ 'turquoise',
+ 'brown',
+ 'cinnamon',
+ 'silver',
+] as const;
+
+export const BADGE_VARIANTS_S1 = [
+ ...BADGE_VARIANTS_SEMANTIC,
+ ...BADGE_VARIANTS_COLOR_S1,
+] as const;
+
+export const BADGE_VARIANTS_S2 = [
+ ...BADGE_VARIANTS_SEMANTIC,
+ ...BADGE_VARIANTS_COLOR_S2,
+] as const;
+
+export type BadgeVariantS1 = (typeof BADGE_VARIANTS_S1)[number];
+export type BadgeVariantS2 = (typeof BADGE_VARIANTS_S2)[number];
+export type BadgeVariant = BadgeVariantS1 | BadgeVariantS2;
diff --git a/second-gen/packages/core/components/badge/index.ts b/second-gen/packages/core/components/badge/index.ts
new file mode 100644
index 00000000000..79b06143fcd
--- /dev/null
+++ b/second-gen/packages/core/components/badge/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright 2025 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.
+ */
+export * from './Badge.base';
+export * from './Badge.types';
diff --git a/packages/divider/src/Divider.ts b/second-gen/packages/core/components/divider/Divider.base.ts
similarity index 76%
rename from packages/divider/src/Divider.ts
rename to second-gen/packages/core/components/divider/Divider.base.ts
index 647f6ab562f..7c7b6d2a893 100644
--- a/packages/divider/src/Divider.ts
+++ b/second-gen/packages/core/components/divider/Divider.base.ts
@@ -10,27 +10,18 @@
* governing permissions and limitations under the License.
*/
-import {
- CSSResultArray,
- html,
- PropertyValues,
- SizedMixin,
- SpectrumElement,
- TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
+import { PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
-import styles from './divider.css.js';
+import { SizedMixin, SpectrumElement } from '@swc/core/shared/base';
/**
- * @element sp-divider
+ * @element swc-divider
*/
-export class Divider extends SizedMixin(SpectrumElement, {
+export abstract class DividerBase extends SizedMixin(SpectrumElement, {
validSizes: ['s', 'm', 'l'],
noDefaultSize: true,
}) {
- public static override styles: CSSResultArray = [styles];
-
/**
* Whether the divider is vertical. If false, the divider is horizontal. The default is false.
*/
@@ -43,10 +34,6 @@ export class Divider extends SizedMixin(SpectrumElement, {
@property({ reflect: true, attribute: 'static-color' })
public staticColor?: 'white' | 'black';
- protected override render(): TemplateResult {
- return html``;
- }
-
protected override firstUpdated(changed: PropertyValues
- ${masks.map(
- (mask, index) => html`
-
- `;
- }
-
protected handleSlotchange(): void {
const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);
if (labelFromSlot) {
@@ -131,7 +159,7 @@ export class ProgressCircle extends SizedMixin(SpectrumElement, {
!hasAccessibleName() &&
this.getAttribute('role') === 'progressbar'
) {
- window.__swc.warn(
+ window.__swc?.warn(
this,
'
-
- `
- )}
-
-
-
-
+ ${when(
+ this.hasIcon,
+ () => html`
+
+ `;
+}
+```
+
+Let's compare this to the 1st-generation implementation:
+
+```ts
+protected override render(): TemplateResult {
+ return html`
+ ${this.hasIcon
+ ? html`
+
+
+ `
+ )}
+
+
+
+
+ `;
+}
+```
+
+As you can see, the 2nd-generation implementation leverages the `classMap` function to conditionally apply classes to the component based on the component's properties. This is a common pattern in the 2nd-generation components. This approach has several benefits:
+
+- It separates the styling application from the properties and states of the component
+- It creates a container inside the Shadow DOM which provides stronger encapsulation
+- It allows for more efficient rendering by only applying the necessary classes to the component
+
+In our 2nd-generation version, we will likely want to maintain any slots available in the 1st-generation component unless design changes from S2 provide a compelling reason to change or remove them.
+
+Once your render function is in place, you can spin up Storybook and start seeing these new styles in action.
+
+```bash
+yarn workspace @swc/components storybook
+```
+
+_Note_: Run all commands provided in this guide from the root of the Spectrum Web Components monorepo.
+
+_Tip_: If you want to run S1 Storybook alongside S2 Storybook, you can use the following command:
+
+```bash
+yarn start
+```
+
+## Implementing the API
+
+Now that we have the base styles and render function in place, we can start to adjust styling and API to match the 2nd-generation design language.
+
+Start by determining what display property your component's host should use. All components should have at least the following style added to the top of their 2nd-generation CSS.
+
+```css
+:host {
+ display: inline-flex;
+}
+```
+
+Use the `display` property most aligned with the component's semantic role or purpose in the document.
+
+### Properties
+
+The 2nd-generation components may have changes to the properties and attributes of the component. These changes are typically due to design changes from S2 or to align with the 2nd-generation design language.
+
+There are several resources you can use to help you understand the design changes from S2.
+
+- [Migration roadmap](https://github.com/adobe/spectrum-web-components/tree/2nd-gen-component-analysis/migration-roadmap) - SWC branch name: `2nd-gen-component-analysis`
+- [S2 design assets](https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2---Desktop?m=auto) - Figma file
+
+You can also use the `CHANGELOG.md` file in the Spectrum CSS repository to see the migration notes for the component.
+
+```bash
+cat spectrum-css/components/
+ ${when(
+ this.hasIcon,
+ () => html`
+
+ `;
+ }
+}
diff --git a/second-gen/packages/swc/components/badge/badge.css b/second-gen/packages/swc/components/badge/badge.css
new file mode 100644
index 00000000000..2a4997ba46e
--- /dev/null
+++ b/second-gen/packages/swc/components/badge/badge.css
@@ -0,0 +1,663 @@
+/*!
+ * 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
+
+ `
+ )}
+
+
+
+ ${content}
+
`;
+}
diff --git a/second-gen/packages/swc/components/badge/test/badge.test.ts b/second-gen/packages/swc/components/badge/test/badge.test.ts
new file mode 100644
index 00000000000..5fae274e286
--- /dev/null
+++ b/second-gen/packages/swc/components/badge/test/badge.test.ts
@@ -0,0 +1,201 @@
+/**
+ * Copyright 2025 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.
+ */
+
+import { html } from 'lit';
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import type { Badge } from '@swc/components/badge';
+
+import '@swc/components/badge';
+
+import { fixture } from '../../../utils/test-utils.js';
+
+describe('swc-badge', () => {
+ beforeEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ // ──────────────────────────────────────────────────────────────
+ // TEST: Defaults
+ // ──────────────────────────────────────────────────────────────
+
+ describe('defaults', () => {
+ test('should render with shadow root', async () => {
+ const badge = await fixture(html`
+ ✓
+ With Icon
+ Small
++ Divide like-elements (tables, tool groups, elements within a panel, + etc.) +
+ `, +}; diff --git a/second-gen/packages/swc/components/progress-circle/ProgressCircle.ts b/second-gen/packages/swc/components/progress-circle/ProgressCircle.ts new file mode 100644 index 00000000000..7efe578bde3 --- /dev/null +++ b/second-gen/packages/swc/components/progress-circle/ProgressCircle.ts @@ -0,0 +1,128 @@ +/** + * Copyright 2025 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. + */ + +import { CSSResultArray, html, TemplateResult } from 'lit'; +import { property } from 'lit/decorators.js'; +import { classMap } from 'lit/directives/class-map.js'; + +import { + PROGRESS_CIRCLE_STATIC_COLORS_S2, + ProgressCircleBase, + type ProgressCircleStaticColorS2, +} from '@swc/core/components/progress-circle'; + +import progressCircleStyles from './progress-circle.css'; + +function capitalize(str?: string): string { + if (typeof str !== 'string') { + return ''; + } + return str.charAt(0).toUpperCase() + str.slice(1); +} +/** + * A progress circle component that visually represents the completion progress of a task. + * Can be used in both determinate (with specific progress value) and indeterminate (loading) states. + * + * @element swc-progress-circle + * + * @prop {string} static-color - Static color variant for use on different backgrounds. + * @prop {number} progress - Progress value between 0 and 100. + * @prop {boolean} indeterminate - Indeterminate state for loading. + * @prop {string} size - Size of the component. + * @prop {string} label - Label for the component. + * + * @example + *
+
+ `;
+ }
+}
diff --git a/second-gen/packages/swc/components/progress-circle/index.ts b/second-gen/packages/swc/components/progress-circle/index.ts
new file mode 100644
index 00000000000..88b43697a2b
--- /dev/null
+++ b/second-gen/packages/swc/components/progress-circle/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright 2025 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.
+ */
+import { defineElement } from '@swc/core/shared/base';
+
+import { ProgressCircle } from './ProgressCircle';
+
+export * from './ProgressCircle';
+declare global {
+ interface HTMLElementTagNameMap {
+ 'swc-progress-circle': ProgressCircle;
+ }
+}
+defineElement('swc-progress-circle', ProgressCircle);
diff --git a/second-gen/packages/swc/components/progress-circle/progress-circle.css b/second-gen/packages/swc/components/progress-circle/progress-circle.css
new file mode 100644
index 00000000000..8c3d93eb205
--- /dev/null
+++ b/second-gen/packages/swc/components/progress-circle/progress-circle.css
@@ -0,0 +1,146 @@
+/*!
+ * Copyright 2025 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.
+ */
+
+@keyframes spectrum-fills-rotate {
+ 0% {
+ transform: rotate(-90deg);
+ }
+
+ 100% {
+ transform: rotate(270deg);
+ }
+}
+
+@keyframes spectrum-dashoffset-animation {
+ 0%,
+ 100% {
+ stroke-dashoffset: 75px;
+ }
+
+ 30% {
+ stroke-dashoffset: 20px;
+ }
+}
+
+:host {
+ display: inline-block;
+}
+
+.spectrum-ProgressCircle {
+ --spectrum-progress-circle-track-border-color: var(--spectrum-track-color);
+ --spectrum-progress-circle-fill-border-color: var(
+ --spectrum-accent-content-color-default
+ );
+ --spectrum-progress-circle-size: var(
+ --spectrum-progress-circle-size-medium
+ );
+ --spectrum-progress-circle-thickness: var(
+ --spectrum-progress-circle-thickness-medium
+ );
+}
+
+.spectrum-ProgressCircle--sizeS {
+ --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
+ --spectrum-progress-circle-thickness: var(
+ --spectrum-progress-circle-thickness-small
+ );
+}
+
+.spectrum-ProgressCircle--sizeL {
+ --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
+ --spectrum-progress-circle-thickness: var(
+ --spectrum-progress-circle-thickness-large
+ );
+}
+
+.spectrum-ProgressCircle {
+ display: inline-block;
+ inline-size: var(--spectrum-progress-circle-size);
+ block-size: var(--spectrum-progress-circle-size);
+ position: relative;
+ direction: ltr;
+ transform: translateZ(0);
+}
+
+.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite {
+ --spectrum-progress-circle-track-border-color: var(
+ --spectrum-static-white-track-color
+ );
+ --spectrum-progress-circle-fill-border-color: var(
+ --spectrum-static-white-track-indicator-color
+ );
+}
+
+.spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack {
+ --spectrum-progress-circle-track-border-color: var(
+ --spectrum-static-black-track-color
+ );
+ --spectrum-progress-circle-fill-border-color: var(
+ --spectrum-static-black-track-indicator-color
+ );
+}
+
+.spectrum-ProgressCircle-fill,
+.spectrum-ProgressCircle-track {
+ box-sizing: border-box;
+ inline-size: var(--spectrum-progress-circle-size);
+ block-size: var(--spectrum-progress-circle-size);
+}
+
+.spectrum-ProgressCircle-track {
+ stroke-width: var(--spectrum-progress-circle-thickness);
+ stroke: var(
+ --highcontrast-progress-circle-track-color,
+ var(--spectrum-progress-circle-track-border-color)
+ );
+}
+
+.spectrum-ProgressCircle-fill {
+ stroke-width: var(--spectrum-progress-circle-thickness);
+ stroke: var(
+ --highcontrast-progress-circle-fill-border-color,
+ var(--spectrum-progress-circle-fill-border-color)
+ );
+ transform: rotate(-90deg);
+ transform-origin: center;
+}
+
+.spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fill {
+ will-change: transform;
+ animation:
+ spectrum-fills-rotate 1s cubic-bezier(0.6, 0.1, 0.3, 0.9) infinite,
+ spectrum-dashoffset-animation 1s cubic-bezier(0.25, 0.1, 0.25, 1.3)
+ infinite;
+ transform-origin: center;
+}
+
+@media (forced-colors: active) {
+ .spectrum-ProgressCircle {
+ --highcontrast-progress-circle-fill-border-color: Highlight;
+ --highcontrast-progress-circle-track-color: Background;
+ }
+
+ .spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate)
+ .spectrum-innerCircle {
+ stroke: CanvasText;
+ }
+
+ .spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate)
+ .spectrum-outerCircle {
+ border: 1px solid CanvasText;
+ border-radius: 50%;
+ }
+}
+
+slot {
+ display: none;
+}
diff --git a/second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts b/second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts
new file mode 100644
index 00000000000..9ba0eb6a01b
--- /dev/null
+++ b/second-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts
@@ -0,0 +1,239 @@
+/**
+ * Copyright 2025 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.
+ */
+
+import { html } from 'lit';
+import type { Meta, StoryObj as Story } from '@storybook/web-components';
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+
+import { ProgressCircle } from '@swc/components/progress-circle';
+
+import '@swc/components/progress-circle';
+
+// ────────────────
+// METADATA
+// ────────────────
+
+const { events, args, argTypes, template } = getStorybookHelpers(
+ 'swc-progress-circle'
+);
+
+/*
+ * @todo Blurring the range control seems to cause a catastrophic Storybook
+ * render failure, so disabling for now.
+ */
+// argTypes.progress = {
+// ...argTypes.progress,
+// control: { type: 'range', min: 0, max: 100, step: 1 },
+// };
+
+/*
+ * @todo This is properly configuring the Select, but the control doesn't
+ * seem to work; need to investigate.
+ */
+// argTypes.size = {
+// ...argTypes.size,
+// control: { type: 'select' },
+// options: ProgressCircle.VALID_SIZES,
+// };
+
+argTypes['static-color'] = {
+ ...argTypes['static-color'],
+ control: { type: 'select' },
+ options: [undefined, ...ProgressCircle.STATIC_COLORS],
+};
+
+/**
+ * A progress circle component that visually represents the completion progress of a task.
+ * Can be used in both determinate (with specific progress value) and indeterminate (loading) states.
+ */
+const meta: Meta = {
+ title: 'Progress circle',
+ component: 'swc-progress-circle',
+ args,
+ argTypes,
+ render: (args) => template(args),
+ parameters: {
+ actions: {
+ handles: events,
+ },
+ },
+ tags: ['migrated'],
+};
+
+export default meta;
+
+// ───────────────
+// STORIES
+// ───────────────
+
+export const Default: Story = {
+ args: {
+ progress: 50,
+ size: 'm',
+ label: 'Loading progress',
+ },
+ render: (args) => template(args),
+};
+
+export const Sizes: Story = {
+ render: () => html`
+
+
+ `,
+ tags: ['!dev'],
+};
+
+export const ProgressValues: Story = {
+ render: () => html`
+
+
+ `,
+ tags: ['!dev'],
+};
+
+export const Indeterminate: Story = {
+ render: () => html`
+
+
+ `,
+ tags: ['!dev'],
+};
+
+export const StaticWhite: Story = {
+ render: () => html`
+
+
+ `,
+ tags: ['!dev'],
+};
+
+export const StaticBlack: Story = {
+ render: () => html`
+
+
+ `,
+ tags: ['!dev'],
+};
+
+export const IndeterminateStaticWhite: Story = {
+ render: () => html`
+
+
+ `,
+ tags: ['!dev'],
+};
diff --git a/second-gen/packages/swc/components/status-light/StatusLight.ts b/second-gen/packages/swc/components/status-light/StatusLight.ts
new file mode 100644
index 00000000000..ef51cc59a2e
--- /dev/null
+++ b/second-gen/packages/swc/components/status-light/StatusLight.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2025 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.
+ */
+
+import { CSSResultArray, html, TemplateResult } from 'lit';
+
+import { StatusLightBase } from '@swc/core/components/status-light';
+
+import statusLightStyles from './status-light.css';
+
+/**
+ * @element sp-status-light
+ *
+ * @slot - text label of the Status Light
+ */
+export class StatusLight extends StatusLightBase {
+ public static override get styles(): CSSResultArray {
+ return [statusLightStyles];
+ }
+
+ protected override render(): TemplateResult {
+ return html`