Skip to content

Commit

Permalink
fix(styles,theme): add S2 tokens and theme (#4241)
Browse files Browse the repository at this point in the history
* refactor(theme): adds new system attribute and deprecates theme attribute

* chore(theme): made changes on theme attribute

* chore: reverted THEME Key to support migrations

* chore: theme registrated hard break

* refactor(theme): adds new system attribute and deprecates theme attribute

* chore(theme): made changes on theme attribute

* chore: reverted THEME Key to support migrations

* chore: theme registrated hard break

* chore(theme): updated theme property to system

* chore(theme): updated theme to system in sp-theme in layout

* chore(theme): updated config for VRT

* chore(theme): updated config for VRT from theme to system

* chore: update theme property to system

* fix: added spectrum system variant

* chore: updated theme for deprecation against system in theme files

* chore: updated config to support system

* chore: updated config yml

* chore: updated config yml

* chore: updated config yml

* chore: undo system changes in stories

* chore: updated runner utils

* chore: review to run with theme

* chore(theme): updated command-line arguments to ue system instea do f theme

* chore(theme): updated command-line arguments to ue system instea do f theme

* chore(theme): updated and cleaned up reduntant theme definitions with system

* chore: added theme fallback to the storydecotrator render

* chore: added system flag in the create review site job in CI

* chore: added system flag in the create review site job in CI

* chore: updated config to include system

* chore: removed classic from system variant

* chore: removed classic from system variant

* chore: added system in parameters in config

* chore: added system in parameters in config

* chore: added system in parameters in config

* chore: added system in parameters in config

* chore: added system in parameters in config

* chore: added theme  in parameters in config

* chore: reverted to theme in currentStyles

* chore: update styles for both system/theme changes

* chore: fixed updating theme when system value is not there

* chore: added t theme coverage tests

* chore: updated doc on prperty theme

* chore: updated golden image cache

* chore: updated golden image cache

* chore: check added to update system for theme only attribute during deprecation

* chore: rebased to systems pr

* feat: added s2 theme to storyDecorator

* chore: added s2 to documentation site

* chore: added spectrum-two to the visual testing pipeline

* chore: added s2 in web-test-util

* chore: added s2 theme to vrts

* chore: testing if vrts run

* chore: added spectrum-two-tokens-config in package.json

* chore: removed extra console log and updated tokens

* chore: trying s2 as a theme in vrt instead of spectrum-two

* chore: updated config

* chore: testing a hacky fix for s2 vrts

* chore: updated button and fieldlable to s2

* chore: added core.ts to import theme helpers inside spectrum-two

* chore: spectrum-two core export

* chore: testing if updating the global vars fixes the build

* chore: revert back css updates for button and field-label

* chore(styles): reapply some poorly cached build output (#4232)

* performance: added memory tests in packages (#4228)

* test: added memory tests in packages

* test: updated  memory tests in packages

* chore: asbtracted the memory profiler as a testing helper

* chore: added memory tests for components

* chore: update grid and menu to use testing helper

* chore: added mem test for card, button and button group

---------

Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local>

* fix(coachmark): add "step-count" slot for custom/internationalized pagination content (#4215)

* chore(coachmark): added separator property

* chore(coachmark): updated tests

* chore(coachmark): updated golden image cache

* fix(coachmark): localized the step count

* chore(coachmark): updated golden image cache

* chore(coachmark): update readme and coachmark to default to english

* chore(coachmark): removed separator from the props

* chore(coachmark): updated to check for 1 of 4 stepcount context

* chore(coachmark): updated golden image cache

* chore(coachmark): added locallixation story for step count

* chore(coachmark): updated golden image cache

* chore(coachmark): update readme to include slot for docs site

---------

Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local>

* chore: bump the commitlint-ecosystem group with 2 updates (#4219)

Bumps the commitlint-ecosystem group with 2 updates: [@commitlint/cli](https://github.com/conventional-changelog/commitlint/tree/HEAD/@commitlint/cli) and [@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/HEAD/@commitlint/config-conventional).

Updates `@commitlint/cli` from 19.0.1 to 19.2.1
- [Release notes](https://github.com/conventional-changelog/commitlint/releases)
- [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/cli/CHANGELOG.md)
- [Commits](https://github.com/conventional-changelog/commitlint/commits/v19.2.1/@commitlint/cli)

Updates `@commitlint/config-conventional` from 19.0.0 to 19.1.0
- [Release notes](https://github.com/conventional-changelog/commitlint/releases)
- [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/config-conventional/CHANGELOG.md)
- [Commits](https://github.com/conventional-changelog/commitlint/commits/v19.1.0/@commitlint/config-conventional)

---
updated-dependencies:
- dependency-name: "@commitlint/cli"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: commitlint-ecosystem
- dependency-name: "@commitlint/config-conventional"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: commitlint-ecosystem
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* test: update benchmarking to configure "end" as "updateComplete" or "paint"

* fix(shared): ensure the "updateComplete" in Focusable is stable

* chore: release new versions #publish

* chore: bump webpack-dev-server from 5.0.2 to 5.0.4

Bumps [webpack-dev-server](https://github.com/webpack/webpack-dev-server) from 5.0.2 to 5.0.4.
- [Release notes](https://github.com/webpack/webpack-dev-server/releases)
- [Changelog](https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md)
- [Commits](webpack/webpack-dev-server@v5.0.2...v5.0.4)

---
updated-dependencies:
- dependency-name: webpack-dev-server
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: bump markdown-it from 14.0.0 to 14.1.0

Bumps [markdown-it](https://github.com/markdown-it/markdown-it) from 14.0.0 to 14.1.0.
- [Changelog](https://github.com/markdown-it/markdown-it/blob/master/CHANGELOG.md)
- [Commits](markdown-it/markdown-it@14.0.0...14.1.0)

---
updated-dependencies:
- dependency-name: markdown-it
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: bump fs-extra from 11.1.1 to 11.2.0

Bumps [fs-extra](https://github.com/jprichardson/node-fs-extra) from 11.1.1 to 11.2.0.
- [Changelog](https://github.com/jprichardson/node-fs-extra/blob/master/CHANGELOG.md)
- [Commits](jprichardson/node-fs-extra@11.1.1...11.2.0)

---
updated-dependencies:
- dependency-name: fs-extra
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore(picker): update event bind timing

* chore: release new versions #publish

* fix(color-area): providing x and y attributes renders color handle correctly (#4240)

* fix(color-area): providing x and y attributes renders color handle correctly

* fix(color-area): minor fix

* chore(menu): remove deprecated CSS file (#4249)

Co-authored-by: rmanole <rmanole@adobe.com>

* fix(combobox): correct package.json listings

* chore: bump webpack from 5.90.3 to 5.91.0

Bumps [webpack](https://github.com/webpack/webpack) from 5.90.3 to 5.91.0.
- [Release notes](https://github.com/webpack/webpack/releases)
- [Commits](webpack/webpack@v5.90.3...v5.91.0)

---
updated-dependencies:
- dependency-name: webpack
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: bump prettier-plugin-package from 1.3.0 to 1.4.0

Bumps [prettier-plugin-package](https://github.com/shellscape/prettier-plugin-package) from 1.3.0 to 1.4.0.
- [Release notes](https://github.com/shellscape/prettier-plugin-package/releases)
- [Commits](shellscape/prettier-plugin-package@v1.3.0...v1.4.0)

---
updated-dependencies:
- dependency-name: prettier-plugin-package
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: bump @types/react from 18.2.15 to 18.2.75

Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 18.2.15 to 18.2.75.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react)

---
updated-dependencies:
- dependency-name: "@types/react"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: bump protobufjs from 7.2.4 to 7.2.6

Bumps [protobufjs](https://github.com/protobufjs/protobuf.js) from 7.2.4 to 7.2.6.
- [Release notes](https://github.com/protobufjs/protobuf.js/releases)
- [Changelog](https://github.com/protobufjs/protobuf.js/blob/master/CHANGELOG.md)
- [Commits](protobufjs/protobuf.js@protobufjs-v7.2.4...protobufjs-v7.2.6)

---
updated-dependencies:
- dependency-name: protobufjs
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: bump @11ty/eleventy in the eleventy-ecosystem group

Bumps the eleventy-ecosystem group with 1 update: [@11ty/eleventy](https://github.com/11ty/eleventy).


Updates `@11ty/eleventy` from 3.0.0-alpha.5 to 3.0.0-alpha.6
- [Release notes](https://github.com/11ty/eleventy/releases)
- [Changelog](https://github.com/11ty/eleventy/blob/main/docs/release-instructions.md)
- [Commits](https://github.com/11ty/eleventy/commits)

---
updated-dependencies:
- dependency-name: "@11ty/eleventy"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: eleventy-ecosystem
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: bump tar-stream from 3.1.6 to 3.1.7

Bumps [tar-stream](https://github.com/mafintosh/tar-stream) from 3.1.6 to 3.1.7.
- [Commits](mafintosh/tar-stream@v3.1.6...v3.1.7)

---
updated-dependencies:
- dependency-name: tar-stream
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: updated golden image hash

* chore: updated golden image hash

* chore: added sideeffectful registration of theme and removed lightest and darkest theme e examples

* chore: Configure Renovate (#4248)

* Add renovate.json

* chore: update renovate config

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Westbrook Johnson <wesjohns@adobe.com>

* chore: update dependency rollup to v4.16.2 (#4288)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore: bump @11ty/eleventy in the eleventy-ecosystem group (#4291)

Bumps the eleventy-ecosystem group with 1 update: [@11ty/eleventy](https://github.com/11ty/eleventy).


Updates `@11ty/eleventy` from 3.0.0-alpha.6 to 3.0.0-alpha.7
- [Release notes](https://github.com/11ty/eleventy/releases)
- [Changelog](https://github.com/11ty/eleventy/blob/main/docs/release-instructions.md)
- [Commits](https://github.com/11ty/eleventy/commits/v3.0.0-alpha.7)

---
updated-dependencies:
- dependency-name: "@11ty/eleventy"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: eleventy-ecosystem
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore: bump the commitlint-ecosystem group with 2 updates (#4290)

Bumps the commitlint-ecosystem group with 2 updates: [@commitlint/cli](https://github.com/conventional-changelog/commitlint/tree/HEAD/@commitlint/cli) and [@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/HEAD/@commitlint/config-conventional).


Updates `@commitlint/cli` from 19.2.1 to 19.3.0
- [Release notes](https://github.com/conventional-changelog/commitlint/releases)
- [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/cli/CHANGELOG.md)
- [Commits](https://github.com/conventional-changelog/commitlint/commits/v19.3.0/@commitlint/cli)

Updates `@commitlint/config-conventional` from 19.1.0 to 19.2.2
- [Release notes](https://github.com/conventional-changelog/commitlint/releases)
- [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/config-conventional/CHANGELOG.md)
- [Commits](https://github.com/conventional-changelog/commitlint/commits/v19.2.2/@commitlint/config-conventional)

---
updated-dependencies:
- dependency-name: "@commitlint/cli"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: commitlint-ecosystem
- dependency-name: "@commitlint/config-conventional"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: commitlint-ecosystem
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore: update chromedriver (#4293)

* chore: use latest playwright (#4295)

* chore: use latest playwright

* ci: update golden images cache

* chore: updated golden image hash

* chore: fixed merge conflicts

* chore: fixed merge conflicts

* chore: use system instead of theme in s2

* chore: externalised process spectrum script and update golden image hash

* chore: normalized spectrum-two var naming usage

* chore: updated golden image hash

* chore: testing something

* chore: freshly processed tokens after cleaning everything

* chore: fixed the generate-tokens script

* chore: updated golden image hash

* chore: updated golden image hash

* chore: normalized the classic theme to spectrum

* chore: updating baseline for spectrum

* chore: updated golden image hash

* chore: updated golden image hash

* chore: removed lightest and darkest theme for spectrum-two

* chore: fixed the ci config

* chore: updated golden image hash

* chore: fixed broken sidenav for vrts site

* chore: added devmode warning for S2 theme

* chore: show devmode warning on using s2 theme only in devmode

* chore: added devmode tests for code coverage

* chore: updated devmode tests for theme

* chore: update tests for theme

* chore: updated golden image cache

* chore: updated golden image cache

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Josh Johnson <jnjosh@adobe.com>
Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local>
Co-authored-by: Westbrook Johnson <wesjohns@adobe.com>
Co-authored-by: Rajdeep Chandra <rajrock38@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Westbrook Johnson <westbrook.johnson@gmail.com>
Co-authored-by: Piyush Vashisht <piyush17303@iiitd.ac.in>
Co-authored-by: Roxana Burduja <13311865+Rocss@users.noreply.github.com>
Co-authored-by: rmanole <rmanole@adobe.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
  • Loading branch information
11 people authored May 14, 2024
1 parent 7835eb8 commit a29e4a2
Show file tree
Hide file tree
Showing 47 changed files with 10,426 additions and 133 deletions.
19 changes: 16 additions & 3 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ executors:
parameters:
current_golden_images_hash:
type: string
default: 00f8d230a15ce013f289abbe80bc64cd9e90963b
default: c5a1a42567a3c179a5e89f57c99e12c1058d682a
wireit_cache_name:
type: string
default: wireit
Expand Down Expand Up @@ -229,7 +229,7 @@ jobs:
keys:
- v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-hcm-
- v2-golden-images-main-hcm-
- v2-golden-images-main-classic-lightest-medium-ltr-
- v2-golden-images-main-spectrum-lightest-medium-ltr-
- run:
name: Count baseline images
command: find test/visual/screenshots-baseline -type f | wc -l > count_start.txt
Expand Down Expand Up @@ -333,11 +333,24 @@ workflows:
name: << matrix.theme >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
matrix:
parameters:
theme: [classic, express]
theme: [spectrum, express]
color: [lightest, light, dark, darkest]
scale: [medium, large]
dir: [ltr, rtl]
filters:
branches:
# Forked pull requests have CIRCLE_BRANCH set to pull/XXX
ignore: /pull\/[0-9]+/
- visual:
name: << matrix.theme >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >>
matrix:
parameters:
# Spectrum-two doesn't support the lightest and darkest themes
theme: [spectrum-two]
color: [light, dark]
scale: [medium, large]
dir: [ltr, rtl]
filters:
branches:
# Forked pull requests have CIRCLE_BRANCH set to pull/XXX
ignore: /pull\/[0-9]+/
4 changes: 2 additions & 2 deletions package.json
100644 → 100755
Original file line number Diff line number Diff line change
Expand Up @@ -369,13 +369,13 @@
]
},
"process-spectrum": {
"command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/spectrum-tokens.js && yarn lint:css --fix && pretty-quick --pattern \"{packages,tools}/**/*.css\" && pretty-quick --pattern \"packages/dialog/src/spectrum-dialog.css\"",
"command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint:css --fix && pretty-quick --pattern \"{packages,tools}/**/*.css\" && pretty-quick --pattern \"packages/dialog/src/spectrum-dialog.css\"",
"files": [
"tasks/process-spectrum.js",
"packages/**/spectrum-config.js",
"tools/**/spectrum-config.js",
"node_modules/@spectrum-css/**/index-vars.css",
"scripts/spectrum-tokens.js",
"scripts/generate-tokens.js",
"node_modules/@spectrum-css/**/*.css",
"scripts/spectrum-vars.js",
"tools/styles/package.json"
Expand Down
2 changes: 1 addition & 1 deletion packages/action-bar/src/ActionBar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import '@spectrum-web-components/button/sp-close-button.js';
import '@spectrum-web-components/field-label/sp-field-label.js';
import actionBarStyles from './action-bar.css.js';
import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
export const actionBarVariants = ['sticky', 'fixed'];

/**
Expand Down
5 changes: 4 additions & 1 deletion packages/overlay/src/slottable-request-directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ import {
render,
TemplateResult,
} from '@spectrum-web-components/base';
import { AsyncDirective, directive } from '@spectrum-web-components/base/src/async-directive.js';
import {
AsyncDirective,
directive,
} from '@spectrum-web-components/base/src/async-directive.js';
import {
removeSlottableRequest,
SlottableRequestEvent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Outside of your new package, you will need to manually add information about you

Open `tsconfig-all.json`, find "references", and add an entry for your package (`{ "path": "packages/spectrum-pattern" }`) alphabetically (replacing "spectrum-pattern" with the pattern you're implementing, such as "action-button" or "progress-bar"). The `tsconfig-all.json` config is used to build types for the project in parallel with the JS build that is handled outside of `tsc`. This will ensure that the types for your new package are available throughout the library, include at demonstration and test time.

Open `tsconfig-react-wrapper.json`, find "references", and add an entry for your package (`{ "path": "react/spectrum-pattern" }`) alphabetically (replacing "spectrum-pattern" with the pattern you're implementing, such as "action-button" or "progress-bar"). The `tsconfig-react-wrapper.json` config is used to build types for the `@swc-react` project, so that consumers can benefit of type definitions for SWC components even when using the React wrapper.
Open `tsconfig-react-wrapper.json`, find "references", and add an entry for your package (`{ "path": "react/spectrum-pattern" }`) alphabetically (replacing "spectrum-pattern" with the pattern you're implementing, such as "action-button" or "progress-bar"). The `tsconfig-react-wrapper.json` config is used to build types for the `@swc-react` project, so that consumers can benefit of type definitions for SWC components even when using the React wrapper.

Include a listing for your package in `bundle/elements.ts` and `bundle/src/index.js`. Then, confirm that your new package is already listed in `tools/bundle/package.json`. The `bundle` package makes it possible to build demo projects with _all_ of the components from the library registered in a single place, and is also leveraged for ease of component consumption in the documentation site build.

Expand Down
55 changes: 29 additions & 26 deletions projects/documentation/src/components/layout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,42 +93,50 @@ const lazyStyleFragment = (
): void => {
var fragmentName = `${name}-${system}`;
switch (fragmentName) {
case 'darkest-spectrum':
import('@spectrum-web-components/theme/theme-darkest.js');
break;
case 'dark-spectrum':
case 'dark-spectrum' || 'darkest-spectrum':
import('@spectrum-web-components/theme/theme-dark.js');
break;
case 'light-spectrum':
case 'light-spectrum' || 'lightest-spectrum':
import('@spectrum-web-components/theme/theme-light.js');
break;
case 'lightest-spectrum':
import('@spectrum-web-components/theme/theme-lightest.js');
break;
case 'medium-spectrum':
import('@spectrum-web-components/theme/scale-medium.js');
break;
case 'large-spectrum':
import('@spectrum-web-components/theme/scale-large.js');
break;
case 'darkest-express':
import('@spectrum-web-components/theme/express/theme-darkest.js');
break;
case 'dark-express':
case 'dark-express' || 'darkest-express':
import('@spectrum-web-components/theme/express/theme-dark.js');
break;
case 'light-express':
case 'light-express' || 'lightest-express':
import('@spectrum-web-components/theme/express/theme-light.js');
break;
case 'lightest-express':
import('@spectrum-web-components/theme/express/theme-lightest.js');
break;
case 'medium-express':
import('@spectrum-web-components/theme/express/scale-medium.js');
break;
case 'large-express':
import('@spectrum-web-components/theme/express/scale-large.js');
break;
case 'light-spectrum-two':
import(
'@spectrum-web-components/theme/spectrum-two/theme-light-core-tokens.js'
);
break;
case 'dark-spectrum-two':
import(
'@spectrum-web-components/theme/spectrum-two/theme-dark-core-tokens.js'
);
break;
case 'medium-spectrum-two':
import(
'@spectrum-web-components/theme/spectrum-two/scale-medium-core-tokens.js'
);
break;
case 'large-spectrum-two':
import(
'@spectrum-web-components/theme/spectrum-two/scale-large-core-tokens.js'
);
break;
}
};

Expand Down Expand Up @@ -346,6 +354,9 @@ export class LayoutElement extends LitElement {
>
<sp-menu-item value="spectrum">Spectrum</sp-menu-item>
<sp-menu-item value="express">Express</sp-menu-item>
<sp-menu-item value="spectrum-two">
Spectrum 2
</sp-menu-item>
</sp-picker>
</div>
<div class="theme-control">
Expand All @@ -356,10 +367,8 @@ export class LayoutElement extends LitElement {
value=${this.color}
@change=${this.updateColor}
>
<sp-menu-item value="lightest">Lightest</sp-menu-item>
<sp-menu-item value="light">Light</sp-menu-item>
<sp-menu-item value="dark">Dark</sp-menu-item>
<sp-menu-item value="darkest">Darkest</sp-menu-item>
</sp-picker>
</div>
<div class="theme-control">
Expand Down Expand Up @@ -483,17 +492,11 @@ export class LayoutElement extends LitElement {
...this.querySelectorAll('code-example'),
] as CodeExample[];
examples.forEach((example) => {
example.codeTheme =
this.color === 'dark' || this.color === 'darkest'
? 'dark'
: 'light';
example.codeTheme = this.color;
});
(
document.querySelector('html') as HTMLHtmlElement
).style.colorScheme =
this.color === 'dark' || this.color === 'darkest'
? 'dark'
: 'light';
).style.colorScheme = this.color;
}
if (changes.has('scale')) {
if (window.localStorage) {
Expand Down
6 changes: 3 additions & 3 deletions projects/story-decorator/src/StoryDecorator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
import { DARK_MODE } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
import '@spectrum-web-components/theme/sp-theme.js';
import '@spectrum-web-components/theme/src/themes.js';
import '@spectrum-web-components/theme/src/spectrum-two/themes-core-tokens.js';
import '@spectrum-web-components/theme/src/express/themes.js';
import '@spectrum-web-components/field-label/sp-field-label.js';
import '@spectrum-web-components/picker/sp-picker.js';
Expand Down Expand Up @@ -317,8 +318,9 @@ export class StoryDecorator extends SpectrumElement {
.value=${this.system}
@change=${this.updateTheme}
>
<sp-menu-item value="spectrum">Classic</sp-menu-item>
<sp-menu-item value="spectrum">Spectrum</sp-menu-item>
<sp-menu-item value="express">Express</sp-menu-item>
<sp-menu-item value="spectrum-two">Spectrum 2</sp-menu-item>
</sp-picker>
`;
}
Expand All @@ -335,10 +337,8 @@ export class StoryDecorator extends SpectrumElement {
.value=${this.color}
@change=${this.updateTheme}
>
<sp-menu-item value="lightest">Lightest</sp-menu-item>
<sp-menu-item value="light">Light</sp-menu-item>
<sp-menu-item value="dark">Dark</sp-menu-item>
<sp-menu-item value="darkest">Darkest</sp-menu-item>
</sp-picker>
`;
}
Expand Down
2 changes: 1 addition & 1 deletion projects/vrt-quick-link/404.html
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@
return temp.toLowerCase();
};
const { pathname, search } = window.location;
const flavor = search ? search.slice(1) : 'classic';
const flavor = search ? search.slice(1) : 'spectrum';
const destColor = 'light';
const destScale = 'medium';
const destDir = 'ltr';
Expand Down
Loading

0 comments on commit a29e4a2

Please sign in to comment.