diff --git a/.circleci/config.yml b/.circleci/config.yml index f6995810a02..3c89a6b0323 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -3,7 +3,7 @@ version: 2.1 executors: node: docker: - - image: mcr.microsoft.com/playwright:v1.44.0 + - image: mcr.microsoft.com/playwright:v1.52.0 resource_class: xlarge environment: NODE_ENV: development @@ -22,12 +22,12 @@ commands: downstream: steps: - checkout - # - restore_cache: - # keys: - # - v4c-dependencies-{{ arch }}-{{ checksum "yarn.lock" }} - # - restore_cache: - # keys: - # - v4b-<< pipeline.parameters.wireit_cache_name >>-{{ arch }}-{{ checksum "package.json" }}- + - restore_cache: + keys: + - v4c-dependencies-{{ arch }}-{{ checksum "yarn.lock" }} + - restore_cache: + keys: + - v4b-<< pipeline.parameters.wireit_cache_name >>-{{ arch }}-{{ checksum "package.json" }}- - run: name: Installing Dependencies command: | @@ -128,7 +128,7 @@ commands: - run: when: always command: | - rm -rf test/visual/screenshots-baseline + [[ -f test/visual/screenshots-baseline ]] && rm -rf test/visual/screenshots-baseline cp -R test/visual/screenshots-actual/updates test/visual/screenshots-baseline - save_cache: when: always @@ -338,7 +338,7 @@ jobs: - run: when: always command: | - rm -rf test/visual/screenshots-baseline + [[ -f test/visual/screenshots-baseline ]] && rm -rf test/visual/screenshots-baseline cp -R test/visual/screenshots-actual/updates test/visual/screenshots-baseline - save_cache: when: always diff --git a/.eslintrc.json b/.eslintrc.json index f85a33242f7..c9b45ef53ef 100755 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -34,6 +34,7 @@ } ], "import/prefer-default-export": "off", + "import/no-extraneous-dependencies": "off", "@spectrum-web-components/prevent-argument-names": [ "error", ["e", "ev", "evt", "err"] @@ -83,6 +84,21 @@ "rules": { "no-console": ["off"] } + }, + { + "files": [ + "packages/*/src/*.ts", + "tools/*/src/*.ts", + "projects/*/src/*.ts" + ], + "rules": { + "import/no-extraneous-dependencies": [ + "error", + { + "devDependencies": true + } + ] + } } ] } diff --git a/lint-staged.config.js b/lint-staged.config.js index 3306505e04a..7f61230d9e0 100644 --- a/lint-staged.config.js +++ b/lint-staged.config.js @@ -12,12 +12,12 @@ governing permissions and limitations under the License. export default { '*.css': [ - 'stylelint --fix --cache --allow-empty-input', 'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write', + 'stylelint --fix --cache --allow-empty-input', ], '*.ts': [ - 'eslint --fix --format pretty --cache --no-error-on-unmatched-pattern --quiet', 'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write', + 'eslint --fix --format pretty --config .eslintrc.json --cache --no-error-on-unmatched-pattern --quiet', ], '{packages,tools}/*/src/**/!(*.css).ts': ['yarn lit-analyzer'], 'package.json': () => [ diff --git a/package.json b/package.json index 90c907f4f7b..20511859d34 100644 --- a/package.json +++ b/package.json @@ -2,8 +2,18 @@ "name": "@adobe/spectrum-web-components", "version": "0.0.9", "private": true, - "description": "", + "description": "A web-component implementation of the Adobe Spectrum design system.", "type": "module", + "license": "Apache-2.0", + "author": "Adobe", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-web-components.git" + }, + "homepage": "https://opensource.adobe.com/spectrum-web-components/", + "bugs": { + "url": "https://github.com/adobe/spectrum-web-components/issues" + }, "engines": { "node": ">=20", "yarn": ">=4.6.0" @@ -101,7 +111,7 @@ "@netlify/build": "^29.17.3", "@open-wc/dev-server-hmr": "^0.2.0", "@open-wc/testing": "^4.0.0", - "@playwright/test": "^1.44.0", + "@playwright/test": "^1.52.0", "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-json": "^6.0.1", "@rollup/plugin-node-resolve": "^15.2.3", @@ -199,6 +209,27 @@ "wireit": "^0.14.3", "yargs": "^17.2.1" }, + "resolutions": { + "playwright": "^1.52.0" + }, + "workspaces": [ + "linters/*", + "packages/*", + "projects/*", + "tools/*", + "react/*" + ], + "packageManager": "yarn@4.6.0", + "keywords": [ + "design-system", + "spectrum", + "adobe", + "adobe-spectrum", + "web components", + "web-components", + "lit-element", + "lit-html" + ], "wireit": { "build:css:watch": { "command": "node ./tasks/watch-css.js", @@ -426,33 +457,5 @@ ], "clean": "if-file-deleted" } - }, - "workspaces": [ - "linters/*", - "packages/*", - "projects/*", - "tools/*", - "react/*" - ], - "packageManager": "yarn@4.9.1", - "license": "Apache-2.0", - "author": "Adobe", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-web-components.git" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-web-components/issues" - }, - "keywords": [ - "design-system", - "spectrum", - "adobe", - "adobe-spectrum", - "web components", - "web-components", - "lit-element", - "lit-html" - ], - "homepage": "https://opensource.adobe.com/spectrum-web-components/" + } } diff --git a/packages/icons-workflow/bin/build.js b/packages/icons-workflow/bin/build.js index 76e7dcd9167..55a5cc5f4d1 100644 --- a/packages/icons-workflow/bin/build.js +++ b/packages/icons-workflow/bin/build.js @@ -169,9 +169,9 @@ async function buildIcons(icons, tag, iconsNameList) { const iconLiteral = ` ${disclaimer} - + import {tag as html, TemplateResult} from '../custom-tag.js'; - + export {setCustomTemplateLiteralTag} from '../custom-tag.js'; export const ${ComponentName}Icon = ({ width = 24, @@ -241,7 +241,7 @@ async function buildIcons(icons, tag, iconsNameList) { const iconElement = ` ${disclaimer} - + import { html, TemplateResult @@ -252,22 +252,22 @@ async function buildIcons(icons, tag, iconsNameList) { import { setCustomTemplateLiteralTag } from '../custom-tag.js'; - + ${currenVersionIconImport} ${otherVersionIconImport} - + /** * @element ${iconElementName} */ export class Icon${ComponentName} extends IconBase { protected override render(): TemplateResult { setCustomTemplateLiteralTag(html); - + if(this.spectrumVersion === ${spectrumVersion}){ return CurrentIcon({ hidden: !this.label, title: this.label }) as TemplateResult; } return AlternateIcon({ hidden: !this.label, title: this.label }) as TemplateResult; - + } } `; @@ -302,12 +302,12 @@ async function buildIcons(icons, tag, iconsNameList) { const iconRegistration = ` ${disclaimer} - + import { Icon${ComponentName} } from '../src/elements/Icon${id}.js'; import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; - + defineElement('${iconElementName}', Icon${ComponentName}); - + declare global { interface HTMLElementTagNameMap { '${iconElementName}': Icon${ComponentName}; diff --git a/packages/iconset/stories/icons-demo.ts b/packages/iconset/stories/icons-demo.ts index 92e119be292..14c2acbc9ef 100644 --- a/packages/iconset/stories/icons-demo.ts +++ b/packages/iconset/stories/icons-demo.ts @@ -209,7 +209,8 @@ export class IconsDemo extends SpectrumElement { var( --spectrum-alias-focus-ring-gap, var(--spectrum-spacing-50) - ) * 2 + ) * + 2 ); } `, @@ -225,7 +226,9 @@ export class IconsDemo extends SpectrumElement { } private shouldCopy(tag: string): void { - if (!this.package) return; + if (!this.package) { + return; + } const conditionedTag = tag.slice(1, tag.length - 1); const importURL = `import '@spectrum-web-components/${this.package}/icons/${conditionedTag}.js';`; this.dispatchEvent( diff --git a/packages/number-field/test/inputs.test.ts b/packages/number-field/test/inputs.test.ts index ea905ec522e..5934e257a25 100644 --- a/packages/number-field/test/inputs.test.ts +++ b/packages/number-field/test/inputs.test.ts @@ -14,7 +14,6 @@ import { html } from '@spectrum-web-components/base'; import { elementUpdated, expect, nextFrame } from '@open-wc/testing'; import { getElFrom } from './helpers.js'; import { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js'; -import { shouldPolyfill } from '@formatjs/intl-numberformat/should-polyfill.js'; import '@spectrum-web-components/number-field/sp-number-field.js'; import { remapMultiByteCharacters } from '@spectrum-web-components/number-field'; @@ -28,23 +27,6 @@ import { import { sendKeys } from '@web/test-runner-commands'; describe('NumberField - inputs', () => { - before(async () => { - const shouldPolyfillEn = shouldPolyfill('en'); - const shouldPolyfillEs = shouldPolyfill('es'); - const shouldPolyfillFr = shouldPolyfill('fr'); - if (shouldPolyfillEn || shouldPolyfillEs || shouldPolyfillFr) { - await import('@formatjs/intl-numberformat/polyfill-force.js'); - } - if (shouldPolyfillEn) { - await import('@formatjs/intl-numberformat/locale-data/en.js'); - } - if (shouldPolyfillEs) { - await import('@formatjs/intl-numberformat/locale-data/es.js'); - } - if (shouldPolyfillFr) { - await import('@formatjs/intl-numberformat/locale-data/fr.js'); - } - }); describe('keystroke prevention', () => { it('converts 2 byte characters, default', async () => { const el = await getElFrom(html` diff --git a/packages/number-field/test/number-field.test.ts b/packages/number-field/test/number-field.test.ts index 333bca287f0..e0538f3e984 100644 --- a/packages/number-field/test/number-field.test.ts +++ b/packages/number-field/test/number-field.test.ts @@ -18,7 +18,6 @@ import { nextFrame, oneEvent, } from '@open-wc/testing'; -import { shouldPolyfill } from '@formatjs/intl-numberformat/should-polyfill.js'; import { currency, @@ -54,19 +53,6 @@ import { import { isMac } from '@spectrum-web-components/shared/src/platform.js'; describe('NumberField', () => { - before(async () => { - const shouldPolyfillEn = shouldPolyfill('en'); - const shouldPolyfillFr = shouldPolyfill('fr'); - if (shouldPolyfillEn || shouldPolyfillFr) { - await import('@formatjs/intl-numberformat/polyfill-force.js'); - } - if (shouldPolyfillEn) { - await import('@formatjs/intl-numberformat/locale-data/en.js'); - } - if (shouldPolyfillFr) { - await import('@formatjs/intl-numberformat/locale-data/fr.js'); - } - }); testForLitDevWarnings(async () => await getElFrom(Default({}))); it('loads default number-field accessibly', async () => { const el = await getElFrom(Default({})); @@ -575,21 +561,21 @@ describe('NumberField', () => { el.value = 45; expect(el.value).to.equal(45); el.focus(); - await sendKeys({ type: '7' }); // Visible text: EUR 45.007 + await sendKeys({ type: '7' }); // Visible text: EUR 45.007 expect(el.value).to.equal(45.007); expect(inputSpy.calledWith(el.value), 'first input').to.be.true; - await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 - await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 - await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 - await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 - await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 - await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 - await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 - await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 - await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 - await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 - await sendKeys({ type: '1' }); // Visible text: 1EUR 45.007 - await sendKeys({ press: 'Enter' }); // Visible text: EUR 145.01 + await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 + await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 + await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 + await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 + await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 + await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 + await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 + await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 + await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 + await sendKeys({ press: 'ArrowLeft' }); // Visible text: EUR 45.007 + await sendKeys({ type: '1' }); // Visible text: 1EUR 45.007 + await sendKeys({ press: 'Enter' }); // Visible text: EUR 145.01 expect(el.value).to.equal(145.007); expect(inputSpy.calledWith(145.007), 'second input').to.be.true; expect(changeSpy.calledWith(145.007), 'change').to.be.true; @@ -616,7 +602,9 @@ describe('NumberField', () => { expect(el.value).to.equal(50); }); it('click with modifier key', async () => { - let target = el.shadowRoot.querySelector('.step-up') as HTMLElement; + let target = el.shadowRoot!.querySelector( + '.step-up' + ) as HTMLElement; const stepUpRect = target.getBoundingClientRect(); const options = { bubbles: true, @@ -646,7 +634,7 @@ describe('NumberField', () => { expect(inputSpy.callCount).to.equal(1); expect(changeSpy.callCount).to.equal(1); expect(el.value).to.equal(60); - target = el.shadowRoot.querySelector('.step-down') as HTMLElement; + target = el.shadowRoot!.querySelector('.step-down') as HTMLElement; const stepDownRect = target.getBoundingClientRect(); options.clientX = stepDownRect.x + 1; options.clientY = stepDownRect.y + 1; @@ -659,7 +647,7 @@ describe('NumberField', () => { expect(el.value).to.equal(50); }); it('many input, but one change', async () => { - const buttonUp = el.shadowRoot.querySelector( + const buttonUp = el.shadowRoot!.querySelector( '.step-up' ) as HTMLElement; const buttonUpRect = buttonUp.getBoundingClientRect(); @@ -667,7 +655,7 @@ describe('NumberField', () => { buttonUpRect.x + buttonUpRect.width / 2, buttonUpRect.y + buttonUpRect.height / 2, ]; - const buttonDown = el.shadowRoot.querySelector( + const buttonDown = el.shadowRoot!.querySelector( '.step-down' ) as HTMLElement; const buttonDownRect = buttonDown.getBoundingClientRect(); @@ -725,7 +713,7 @@ describe('NumberField', () => { expect(changeSpy.callCount).to.equal(1); }); it('no change in committed value - using buttons', async () => { - const buttonUp = el.shadowRoot.querySelector( + const buttonUp = el.shadowRoot!.querySelector( '.step-up' ) as HTMLElement; const buttonUpRect = buttonUp.getBoundingClientRect(); @@ -733,7 +721,7 @@ describe('NumberField', () => { buttonUpRect.x + buttonUpRect.width / 2, buttonUpRect.y + buttonUpRect.height / 2, ]; - const buttonDown = el.shadowRoot.querySelector( + const buttonDown = el.shadowRoot!.querySelector( '.step-down' ) as HTMLElement; const buttonDownRect = buttonDown.getBoundingClientRect(); @@ -797,13 +785,15 @@ describe('NumberField', () => { expect(el.formattedValue).to.equal('50'); expect(el.valueAsString).to.equal('50'); expect(el.value).to.equal(50); - const buttonUp = el.shadowRoot.querySelector('.step-up') as HTMLElement; + const buttonUp = el.shadowRoot!.querySelector( + '.step-up' + ) as HTMLElement; const buttonUpRect = buttonUp.getBoundingClientRect(); const buttonUpPosition: [number, number] = [ buttonUpRect.x + buttonUpRect.width / 2, buttonUpRect.y + buttonUpRect.height / 2, ]; - const buttonDown = el.shadowRoot.querySelector( + const buttonDown = el.shadowRoot!.querySelector( '.step-down' ) as HTMLElement; const buttonDownRect = buttonDown.getBoundingClientRect(); @@ -1088,7 +1078,7 @@ describe('NumberField', () => { }); it('constrains pointer usage', async () => { expect(el.value).to.equal(10); - const buttonUp = el.shadowRoot.querySelector( + const buttonUp = el.shadowRoot!.querySelector( '.step-up' ) as HTMLElement; const buttonUpRect = buttonUp.getBoundingClientRect(); @@ -1328,7 +1318,7 @@ describe('NumberField', () => { el.value = 0; await elementUpdated(el); expect(el.value).to.equal(0); - const buttonDown = el.shadowRoot.querySelector( + const buttonDown = el.shadowRoot!.querySelector( '.step-down' ) as HTMLElement; const buttonDownRect = buttonDown.getBoundingClientRect(); @@ -1667,8 +1657,8 @@ describe('NumberField', () => { }); it('removes the stepper UI with [hide-stepper]', async () => { const el = await getElFrom(Default({ hideStepper: true })); - const stepUp = el.shadowRoot.querySelector('.step-up'); - const stepDown = el.shadowRoot.querySelector('.step-down'); + const stepUp = el.shadowRoot!.querySelector('.step-up'); + const stepDown = el.shadowRoot!.querySelector('.step-down'); expect(stepUp).to.be.null; expect(stepDown).to.be.null; }); diff --git a/tasks/create-git-tag.js b/tasks/create-git-tag.js index 02d9a032c4d..ad47ac76c96 100644 --- a/tasks/create-git-tag.js +++ b/tasks/create-git-tag.js @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import { execSync } from 'child_process'; -import pkg from '@spectrum-web-components/button/package.json' with { type: 'json' }; +import pkg from '@spectrum-web-components/button/package.json' assert { type: 'json' }; const version = pkg.version; diff --git a/test/benchmark/cli.ts b/test/benchmark/cli.ts index 57802c77453..3f447b6c8b8 100644 --- a/test/benchmark/cli.ts +++ b/test/benchmark/cli.ts @@ -245,7 +245,9 @@ $ node test/benchmark/cli -n 20 ); return; } - if (!config.benchmarks) return; + if (!config.benchmarks) { + return; + } if (opts.compare !== 'none') { config.benchmarks.push({ name: `${packageName}:${benchmark}`, diff --git a/tools/opacity-checkerboard/src/is-opacity-checkerboard.css b/tools/opacity-checkerboard/src/is-opacity-checkerboard.css index 067419fb8ad..eea86f17478 100644 --- a/tools/opacity-checkerboard/src/is-opacity-checkerboard.css +++ b/tools/opacity-checkerboard/src/is-opacity-checkerboard.css @@ -10,5 +10,5 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('./spectrum-is-opacity-checkerboard.css'); -@import url('./is-opacity-checkerboard-overrides.css'); +@import url("./spectrum-is-opacity-checkerboard.css"); +@import url("./is-opacity-checkerboard-overrides.css"); diff --git a/tools/opacity-checkerboard/src/opacity-checkerboard.css b/tools/opacity-checkerboard/src/opacity-checkerboard.css index e174aa1d0cc..ba68917e042 100644 --- a/tools/opacity-checkerboard/src/opacity-checkerboard.css +++ b/tools/opacity-checkerboard/src/opacity-checkerboard.css @@ -10,5 +10,5 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('./spectrum-opacity-checkerboard.css'); -@import url('./opacity-checkerboard-overrides.css'); +@import url("./spectrum-opacity-checkerboard.css"); +@import url("./opacity-checkerboard-overrides.css"); diff --git a/tools/reactive-controllers/package.json b/tools/reactive-controllers/package.json index 52d1b817be6..55b9525bd28 100644 --- a/tools/reactive-controllers/package.json +++ b/tools/reactive-controllers/package.json @@ -85,6 +85,7 @@ ], "dependencies": { "@spectrum-web-components/progress-circle": "1.6.0", + "@spectrum-web-components/theme": "1.6.0", "colorjs.io": "^0.5.2", "lit": "^2.5.0 || ^3.1.3" }, diff --git a/tools/reactive-controllers/src/LanguageResolution.ts b/tools/reactive-controllers/src/LanguageResolution.ts index 7dd7fe446b7..4bb280087be 100644 --- a/tools/reactive-controllers/src/LanguageResolution.ts +++ b/tools/reactive-controllers/src/LanguageResolution.ts @@ -10,8 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import type { ReactiveController, ReactiveElement } from 'lit'; import { ProvideLang } from '@spectrum-web-components/theme'; +import type { ReactiveController, ReactiveElement } from 'lit'; export const languageResolverUpdatedSymbol = Symbol( 'language resolver updated' @@ -20,6 +20,25 @@ export const languageResolverUpdatedSymbol = Symbol( export class LanguageResolutionController implements ReactiveController { private host: ReactiveElement; language = document.documentElement.lang || navigator.language; + /** + * @todo: This was the original solution above. + * Suggested solution: This should use a getter and setting to ensure the language is set correctly. + * This is fetching the root-level language but shouldn't we also be honoring if the language attribute is set on a container too? + */ + // get language(): string { + // return document.documentElement.lang || navigator.language; + // } + // set language(value: string) { + // // Replace all _ with - in the language string + // value = value.replace(/_/g, '-'); + // // Set the document language + // if (this.language === value) { + // return; + // } + // + // document.documentElement.lang = value; + // this.host.requestUpdate(languageResolverUpdatedSymbol, value); + // } private unsubscribe?: () => void; constructor(host: ReactiveElement) { diff --git a/tools/styles/all-large-dark.css b/tools/styles/all-large-dark.css index 0bbbc2248f2..f9973b5756b 100755 --- a/tools/styles/all-large-dark.css +++ b/tools/styles/all-large-dark.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import 'core-global.css'; -@import 'typography.css'; -@import 'theme-dark.css'; -@import 'scale-large.css'; +@import "core-global.css"; +@import "typography.css"; +@import "theme-dark.css"; +@import "scale-large.css"; diff --git a/tools/styles/all-large-darkest.css b/tools/styles/all-large-darkest.css index 0dc9164a983..ae32b64fa75 100755 --- a/tools/styles/all-large-darkest.css +++ b/tools/styles/all-large-darkest.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import 'core-global.css'; -@import 'typography.css'; -@import 'theme-darkest.css'; -@import 'scale-large.css'; +@import "core-global.css"; +@import "typography.css"; +@import "theme-darkest.css"; +@import "scale-large.css"; diff --git a/tools/styles/all-large-light.css b/tools/styles/all-large-light.css index 0f26d97f300..d99d2956ced 100755 --- a/tools/styles/all-large-light.css +++ b/tools/styles/all-large-light.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import 'core-global.css'; -@import 'typography.css'; -@import 'theme-light.css'; -@import 'scale-large.css'; +@import "core-global.css"; +@import "typography.css"; +@import "theme-light.css"; +@import "scale-large.css"; diff --git a/tools/styles/all-large-lightest.css b/tools/styles/all-large-lightest.css index e566aa23340..f204ce78d1c 100755 --- a/tools/styles/all-large-lightest.css +++ b/tools/styles/all-large-lightest.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import 'core-global.css'; -@import 'typography.css'; -@import 'theme-lightest.css'; -@import 'scale-large.css'; +@import "core-global.css"; +@import "typography.css"; +@import "theme-lightest.css"; +@import "scale-large.css"; diff --git a/tools/styles/all-medium-dark.css b/tools/styles/all-medium-dark.css index 9e6c481d23a..565807559ce 100755 --- a/tools/styles/all-medium-dark.css +++ b/tools/styles/all-medium-dark.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import 'core-global.css'; -@import 'typography.css'; -@import 'theme-dark.css'; -@import 'scale-medium.css'; +@import "core-global.css"; +@import "typography.css"; +@import "theme-dark.css"; +@import "scale-medium.css"; diff --git a/tools/styles/all-medium-darkest.css b/tools/styles/all-medium-darkest.css index 16b734241d6..d859a2b9cc1 100755 --- a/tools/styles/all-medium-darkest.css +++ b/tools/styles/all-medium-darkest.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import 'core-global.css'; -@import 'typography.css'; -@import 'theme-darkest.css'; -@import 'scale-medium.css'; +@import "core-global.css"; +@import "typography.css"; +@import "theme-darkest.css"; +@import "scale-medium.css"; diff --git a/tools/styles/all-medium-light.css b/tools/styles/all-medium-light.css index de444f23e89..504ae364d00 100755 --- a/tools/styles/all-medium-light.css +++ b/tools/styles/all-medium-light.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import 'core-global.css'; -@import 'typography.css'; -@import 'theme-light.css'; -@import 'scale-medium.css'; +@import "core-global.css"; +@import "typography.css"; +@import "theme-light.css"; +@import "scale-medium.css"; diff --git a/tools/styles/all-medium-lightest.css b/tools/styles/all-medium-lightest.css index 4f99af38d5e..5d882beb0dc 100755 --- a/tools/styles/all-medium-lightest.css +++ b/tools/styles/all-medium-lightest.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import 'core-global.css'; -@import 'typography.css'; -@import 'theme-lightest.css'; -@import 'scale-medium.css'; +@import "core-global.css"; +@import "typography.css"; +@import "theme-lightest.css"; +@import "scale-medium.css"; diff --git a/tools/styles/core-global.css b/tools/styles/core-global.css index 9df26c07db5..f1b10fed28e 100644 --- a/tools/styles/core-global.css +++ b/tools/styles/core-global.css @@ -9,7 +9,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-core-global.css'; +@import "./spectrum-core-global.css"; :host, :root { diff --git a/tools/styles/express/core-global.css b/tools/styles/express/core-global.css index 9df26c07db5..f1b10fed28e 100644 --- a/tools/styles/express/core-global.css +++ b/tools/styles/express/core-global.css @@ -9,7 +9,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-core-global.css'; +@import "./spectrum-core-global.css"; :host, :root { diff --git a/tools/styles/express/scale-large.css b/tools/styles/express/scale-large.css index e71510e5157..0692f5d2218 100644 --- a/tools/styles/express/scale-large.css +++ b/tools/styles/express/scale-large.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-scale-large.css'; +@import "./spectrum-scale-large.css"; :host, :root { diff --git a/tools/styles/express/scale-medium.css b/tools/styles/express/scale-medium.css index a7641bd609c..1ed7b04149d 100644 --- a/tools/styles/express/scale-medium.css +++ b/tools/styles/express/scale-medium.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-scale-medium.css'; +@import "./spectrum-scale-medium.css"; :host, :root { diff --git a/tools/styles/express/theme-dark.css b/tools/styles/express/theme-dark.css index d36696ee36c..847d1257743 100644 --- a/tools/styles/express/theme-dark.css +++ b/tools/styles/express/theme-dark.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-theme-dark.css'; +@import "./spectrum-theme-dark.css"; :host, :root { diff --git a/tools/styles/express/theme-light.css b/tools/styles/express/theme-light.css index 5d30ef82d16..10968368674 100644 --- a/tools/styles/express/theme-light.css +++ b/tools/styles/express/theme-light.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-theme-light.css'; +@import "./spectrum-theme-light.css"; :host, :root { diff --git a/tools/styles/scale-large.css b/tools/styles/scale-large.css index e71510e5157..0692f5d2218 100644 --- a/tools/styles/scale-large.css +++ b/tools/styles/scale-large.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-scale-large.css'; +@import "./spectrum-scale-large.css"; :host, :root { diff --git a/tools/styles/scale-medium.css b/tools/styles/scale-medium.css index a7641bd609c..1ed7b04149d 100644 --- a/tools/styles/scale-medium.css +++ b/tools/styles/scale-medium.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-scale-medium.css'; +@import "./spectrum-scale-medium.css"; :host, :root { diff --git a/tools/styles/spectrum-two/core-global.css b/tools/styles/spectrum-two/core-global.css index 9df26c07db5..f1b10fed28e 100644 --- a/tools/styles/spectrum-two/core-global.css +++ b/tools/styles/spectrum-two/core-global.css @@ -9,7 +9,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-core-global.css'; +@import "./spectrum-core-global.css"; :host, :root { diff --git a/tools/styles/spectrum-two/scale-large.css b/tools/styles/spectrum-two/scale-large.css index e71510e5157..0692f5d2218 100644 --- a/tools/styles/spectrum-two/scale-large.css +++ b/tools/styles/spectrum-two/scale-large.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-scale-large.css'; +@import "./spectrum-scale-large.css"; :host, :root { diff --git a/tools/styles/spectrum-two/scale-medium.css b/tools/styles/spectrum-two/scale-medium.css index a7641bd609c..1ed7b04149d 100644 --- a/tools/styles/spectrum-two/scale-medium.css +++ b/tools/styles/spectrum-two/scale-medium.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-scale-medium.css'; +@import "./spectrum-scale-medium.css"; :host, :root { diff --git a/tools/styles/spectrum-two/theme-dark.css b/tools/styles/spectrum-two/theme-dark.css index d36696ee36c..847d1257743 100644 --- a/tools/styles/spectrum-two/theme-dark.css +++ b/tools/styles/spectrum-two/theme-dark.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-theme-dark.css'; +@import "./spectrum-theme-dark.css"; :host, :root { diff --git a/tools/styles/spectrum-two/theme-light.css b/tools/styles/spectrum-two/theme-light.css index 5d30ef82d16..10968368674 100644 --- a/tools/styles/spectrum-two/theme-light.css +++ b/tools/styles/spectrum-two/theme-light.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-theme-light.css'; +@import "./spectrum-theme-light.css"; :host, :root { diff --git a/tools/styles/src/spectrum-base.css b/tools/styles/src/spectrum-base.css index 04ff517c675..24f86d19c6a 100644 --- a/tools/styles/src/spectrum-base.css +++ b/tools/styles/src/spectrum-base.css @@ -13,14 +13,8 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum { color: var(--spectrum-body-m-text-color, var(--spectrum-alias-text-color)); - font-family: var( - --spectrum-alias-body-text-font-family, - var(--spectrum-global-font-family-base) - ); /* .spectrum */ + font-family: var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base)); /* .spectrum */ - font-size: var( - --spectrum-alias-font-size-default, - var(--spectrum-global-dimension-font-size-100) - ); /* .spectrum, + font-size: var(--spectrum-alias-font-size-default, var(--spectrum-global-dimension-font-size-100)); /* .spectrum, * .spectrum-Body */ } diff --git a/tools/styles/theme-dark.css b/tools/styles/theme-dark.css index d36696ee36c..847d1257743 100644 --- a/tools/styles/theme-dark.css +++ b/tools/styles/theme-dark.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-theme-dark.css'; +@import "./spectrum-theme-dark.css"; :host, :root { diff --git a/tools/styles/theme-darkest.css b/tools/styles/theme-darkest.css index 94deaa069e7..8079033c61f 100644 --- a/tools/styles/theme-darkest.css +++ b/tools/styles/theme-darkest.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-theme-darkest.css'; +@import "./spectrum-theme-darkest.css"; :host, :root { diff --git a/tools/styles/theme-light.css b/tools/styles/theme-light.css index 5d30ef82d16..10968368674 100644 --- a/tools/styles/theme-light.css +++ b/tools/styles/theme-light.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-theme-light.css'; +@import "./spectrum-theme-light.css"; :host, :root { diff --git a/tools/styles/theme-lightest.css b/tools/styles/theme-lightest.css index 77e43adb55a..426975e7951 100644 --- a/tools/styles/theme-lightest.css +++ b/tools/styles/theme-lightest.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import './spectrum-theme-lightest.css'; +@import "./spectrum-theme-lightest.css"; :host, :root { diff --git a/tools/styles/tokens-v2/spectrum/custom-dark-vars.css b/tools/styles/tokens-v2/spectrum/custom-dark-vars.css index 63b393fc32c..7c73eb52846 100644 --- a/tools/styles/tokens-v2/spectrum/custom-dark-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-dark-vars.css @@ -3,55 +3,24 @@ :root { --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); + --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); /* --spectrum-gray-900 */ + --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-900-rgb - ); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ /* Drop Indicator color rgb */ --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); + --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15); + --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07); + --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); --spectrum-badge-label-icon-color-primary: var(--spectrum-black); @@ -62,48 +31,28 @@ --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); + --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07); + --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15); --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); + --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); + --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); } diff --git a/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css b/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css index a928e4d7d5e..8ab79a20080 100644 --- a/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css @@ -3,56 +3,24 @@ :root { --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); + --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); /* --spectrum-gray-900 */ + --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-900-rgb - ); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ /* Drop Indicator color rgb */ --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-down: rgba( - var(--spectrum-white-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.08 - ); + --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2); + --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.08); + --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-down: rgba(var(--spectrum-white-rgb), 0.15); + --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.08); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); --spectrum-badge-label-icon-color-primary: var(--spectrum-black); @@ -63,48 +31,28 @@ --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.08 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); + --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.08); + --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2); --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); + --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); + --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); } diff --git a/tools/styles/tokens-v2/spectrum/custom-large-vars.css b/tools/styles/tokens-v2/spectrum/custom-large-vars.css index 24e93e29a95..7e1b339bd36 100644 --- a/tools/styles/tokens-v2/spectrum/custom-large-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-large-vars.css @@ -10,8 +10,8 @@ --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; + --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; + --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; --spectrum-colorwheel-colorarea-container-size: 182px; --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); @@ -45,9 +45,7 @@ --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-200 - ); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200); --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); @@ -109,9 +107,7 @@ --spectrum-assetcard-focus-ring-border-radius: 9px; --spectrum-assetcard-selectionindicator-margin: 15px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); + --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); --spectrum-tooltip-animation-distance: 5px; diff --git a/tools/styles/tokens-v2/spectrum/custom-light-vars.css b/tools/styles/tokens-v2/spectrum/custom-light-vars.css index f14a082b752..dfb5ff32ab2 100644 --- a/tools/styles/tokens-v2/spectrum/custom-light-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-light-vars.css @@ -3,55 +3,24 @@ :root { --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); + --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); /* --spectrum-gray-900 */ + --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-black-200); /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var( - --spectrum-blue-800-rgb - ); /* var(--spectrum-accent-color-800);*/ + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800);*/ /* Drop Indicator color rgb */ --spectrum-dropindicator-color: var(--spectrum-blue-800); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); + --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); --spectrum-badge-label-icon-color-primary: var(--spectrum-white); @@ -62,48 +31,28 @@ --spectrum-well-border-color: var(--spectrum-black-rgb); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); + --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06); + --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1); --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); + --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); + --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); } diff --git a/tools/styles/tokens-v2/spectrum/custom-medium-vars.css b/tools/styles/tokens-v2/spectrum/custom-medium-vars.css index b174d71e41c..4a7f30e10a9 100644 --- a/tools/styles/tokens-v2/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-medium-vars.css @@ -10,8 +10,8 @@ --spectrum-slider-tick-mark-height: 10px; --spectrum-slider-ramp-track-height: 16px; - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; + --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; --spectrum-colorwheel-colorarea-container-size: 144px; --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); @@ -45,9 +45,7 @@ --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100); --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); @@ -73,9 +71,7 @@ --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); + --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; @@ -110,9 +106,7 @@ --spectrum-assetcard-focus-ring-border-radius: 8px; --spectrum-assetcard-selectionindicator-margin: 12px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); + --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); diff --git a/tools/styles/tokens-v2/spectrum/custom-vars.css b/tools/styles/tokens-v2/spectrum/custom-vars.css index 0c6f4e55eaf..687d158d9b9 100644 --- a/tools/styles/tokens-v2/spectrum/custom-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-vars.css @@ -22,31 +22,22 @@ --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, - BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; + --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; + --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; + --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font: var(--spectrum-code-font-family-stack); /* static white / black background color for docs containers */ --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; - --spectrum-docs-static-white-background-color: rgba( - var(--spectrum-docs-static-white-background-color-rgb) - ); + --spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb: 206, 247, 243; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); + --spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb)); /* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */ --spectrum-corner-radius-1000: 9999px; diff --git a/tools/styles/tokens/express/custom-dark-vars.css b/tools/styles/tokens/express/custom-dark-vars.css index 895972f958a..1a5eec2d8a5 100644 --- a/tools/styles/tokens/express/custom-dark-vars.css +++ b/tools/styles/tokens/express/custom-dark-vars.css @@ -4,11 +4,7 @@ --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-700 - ); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700); --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700); } diff --git a/tools/styles/tokens/express/custom-darkest-vars.css b/tools/styles/tokens/express/custom-darkest-vars.css index 8f698ce68b7..26a339b0f55 100644 --- a/tools/styles/tokens/express/custom-darkest-vars.css +++ b/tools/styles/tokens/express/custom-darkest-vars.css @@ -4,11 +4,7 @@ --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-700 - ); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700); --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700); } diff --git a/tools/styles/tokens/express/custom-large-vars.css b/tools/styles/tokens/express/custom-large-vars.css index 8b60059274c..3fd534673c8 100644 --- a/tools/styles/tokens/express/custom-large-vars.css +++ b/tools/styles/tokens/express/custom-large-vars.css @@ -1,8 +1,8 @@ /* @deprecated these assets should not be used; the custom override values exist in express/large-vars.css */ :host, :root { - --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; + --spectrum-colorwheel-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0"; + --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; --spectrum-dialog-confirm-border-radius: 8px; diff --git a/tools/styles/tokens/express/custom-light-vars.css b/tools/styles/tokens/express/custom-light-vars.css index 0967a7e97a8..1b64128a6e9 100644 --- a/tools/styles/tokens/express/custom-light-vars.css +++ b/tools/styles/tokens/express/custom-light-vars.css @@ -4,13 +4,7 @@ --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-900 - ); - --spectrum-assetcard-border-color-selected-down: var( - --spectrum-indigo-1000 - ); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-900 - ); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-900); } diff --git a/tools/styles/tokens/express/custom-medium-vars.css b/tools/styles/tokens/express/custom-medium-vars.css index 603bec8895a..094179217ef 100644 --- a/tools/styles/tokens/express/custom-medium-vars.css +++ b/tools/styles/tokens/express/custom-medium-vars.css @@ -1,8 +1,8 @@ /* @deprecated these assets should not be used; the custom override values exist in express/medium-vars.css */ :host, :root { - --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; + --spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0"; + --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; --spectrum-dialog-confirm-border-radius: 6px; diff --git a/tools/styles/tokens/spectrum/custom-dark-vars.css b/tools/styles/tokens/spectrum/custom-dark-vars.css index 81f97927fc4..110fd3f9db1 100644 --- a/tools/styles/tokens/spectrum/custom-dark-vars.css +++ b/tools/styles/tokens/spectrum/custom-dark-vars.css @@ -3,91 +3,42 @@ :root { --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); + --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); + --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.07 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.07 - ); + --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15); + --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.07); + --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); --spectrum-badge-label-icon-color-primary: var(--spectrum-black); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.07 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); + --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07); + --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15); --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); + --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.25 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.15 - ); + --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); } diff --git a/tools/styles/tokens/spectrum/custom-darkest-vars.css b/tools/styles/tokens/spectrum/custom-darkest-vars.css index c031561a94d..95c9ad9276d 100644 --- a/tools/styles/tokens/spectrum/custom-darkest-vars.css +++ b/tools/styles/tokens/spectrum/custom-darkest-vars.css @@ -3,92 +3,42 @@ :root { --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); + --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); + --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); --spectrum-dropindicator-color: var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-white-rgb), - 0.08 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-down: rgba( - var(--spectrum-white-rgb), - 0.15 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-white-rgb), - 0.08 - ); + --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2); + --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-white-rgb), 0.08); + --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-down: rgba(var(--spectrum-white-rgb), 0.15); + --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.08); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); --spectrum-badge-label-icon-color-primary: var(--spectrum-black); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.08 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); + --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.08); + --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2); --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1000 - ); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-900 - ); + --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-800 - ); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-800-rgb), - 0.3 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-800-rgb), - 0.2 - ); + --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); } diff --git a/tools/styles/tokens/spectrum/custom-large-vars.css b/tools/styles/tokens/spectrum/custom-large-vars.css index ce67a1b2626..8205aef2228 100644 --- a/tools/styles/tokens/spectrum/custom-large-vars.css +++ b/tools/styles/tokens/spectrum/custom-large-vars.css @@ -4,8 +4,8 @@ --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; + --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; + --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; --spectrum-colorwheel-colorarea-container-size: 182px; --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); @@ -39,9 +39,7 @@ --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-200 - ); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200); --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); @@ -100,9 +98,7 @@ --spectrum-assetcard-focus-ring-border-radius: 9px; --spectrum-assetcard-selectionindicator-margin: 15px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xxs - ); + --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); --spectrum-tooltip-animation-distance: 5px; diff --git a/tools/styles/tokens/spectrum/custom-light-vars.css b/tools/styles/tokens/spectrum/custom-light-vars.css index d2dc03ed277..8c9ec00e993 100644 --- a/tools/styles/tokens/spectrum/custom-light-vars.css +++ b/tools/styles/tokens/spectrum/custom-light-vars.css @@ -3,91 +3,42 @@ :root { --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); + --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); + --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-black-200); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); --spectrum-dropindicator-color: var(--spectrum-blue-800); - --spectrum-calendar-day-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); - --spectrum-calendar-day-background-color-hover: rgba( - var(--spectrum-black-rgb), - 0.06 - ); - --spectrum-calendar-day-today-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-calendar-day-background-color-cap-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-calendar-day-background-color-key-focus: rgba( - var(--spectrum-black-rgb), - 0.06 - ); + --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); --spectrum-badge-label-icon-color-primary: var(--spectrum-white); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); --spectrum-well-border-color: var(--spectrum-black-rgb); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); - --spectrum-treeview-item-background-color-quiet-selected: rgba( - var(--spectrum-gray-900-rgb), - 0.06 - ); - --spectrum-treeview-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); + --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06); + --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1); --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var( - --spectrum-blue-1100 - ); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var( - --spectrum-magenta-1100 - ); + --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-blue-900 - ); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900); --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - --spectrum-assetlist-item-background-color-selected-hover: rgba( - var(--spectrum-blue-900-rgb), - 0.2 - ); - --spectrum-assetlist-item-background-color-selected: rgba( - var(--spectrum-blue-900-rgb), - 0.1 - ); + --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); } diff --git a/tools/styles/tokens/spectrum/custom-medium-vars.css b/tools/styles/tokens/spectrum/custom-medium-vars.css index 1a4d3b8bea9..e2fc6372ba7 100644 --- a/tools/styles/tokens/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens/spectrum/custom-medium-vars.css @@ -4,8 +4,8 @@ --spectrum-slider-tick-mark-height: 10px; --spectrum-slider-ramp-track-height: 16px; - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; + --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; --spectrum-colorwheel-colorarea-container-size: 144px; --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); @@ -39,9 +39,7 @@ --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100); --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); @@ -64,9 +62,7 @@ --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); + --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; @@ -101,9 +97,7 @@ --spectrum-assetcard-focus-ring-border-radius: 8px; --spectrum-assetcard-selectionindicator-margin: 12px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); + --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); diff --git a/tools/styles/tokens/spectrum/custom-vars.css b/tools/styles/tokens/spectrum/custom-vars.css index 78ef5e021f8..70402b4534c 100644 --- a/tools/styles/tokens/spectrum/custom-vars.css +++ b/tools/styles/tokens/spectrum/custom-vars.css @@ -22,27 +22,18 @@ --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack: adobe-clean, - var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, - BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', - 'Lucida Grande', sans-serif; + --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - --spectrum-serif-font-family-stack: adobe-clean-serif, - var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; + --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; + --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font: var(--spectrum-code-font-family-stack); --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; - --spectrum-docs-static-white-background-color: rgba( - var(--spectrum-docs-static-white-background-color-rgb) - ); + --spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); + --spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb)); } diff --git a/tools/theme/src/express/scale-large-core-tokens.css b/tools/theme/src/express/scale-large-core-tokens.css index 574ddc4ab5b..26ed96a76d0 100644 --- a/tools/theme/src/express/scale-large-core-tokens.css +++ b/tools/theme/src/express/scale-large-core-tokens.css @@ -10,9 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/large-vars.css'); +@import url("@spectrum-web-components/styles/tokens/large-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/large-vars.css"); +@import url("@spectrum-web-components/styles/tokens/express/large-vars.css"); :root, :host { diff --git a/tools/theme/src/express/scale-large.css b/tools/theme/src/express/scale-large.css index f8d09c76d48..559e38e5833 100644 --- a/tools/theme/src/express/scale-large.css +++ b/tools/theme/src/express/scale-large.css @@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/express/scale-large.css'); -@import url('@spectrum-web-components/styles/tokens/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/large-vars.css'); +@import url("@spectrum-web-components/styles/express/scale-large.css"); +@import url("@spectrum-web-components/styles/tokens/large-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/large-vars.css"); +@import url("@spectrum-web-components/styles/tokens/express/large-vars.css"); :root, :host { diff --git a/tools/theme/src/express/scale-medium-core-tokens.css b/tools/theme/src/express/scale-medium-core-tokens.css index 4e384f05e53..fd15a09e279 100644 --- a/tools/theme/src/express/scale-medium-core-tokens.css +++ b/tools/theme/src/express/scale-medium-core-tokens.css @@ -10,9 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/medium-vars.css'); +@import url("@spectrum-web-components/styles/tokens/medium-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/medium-vars.css"); +@import url("@spectrum-web-components/styles/tokens/express/medium-vars.css"); :root, :host { diff --git a/tools/theme/src/express/scale-medium.css b/tools/theme/src/express/scale-medium.css index 106202e8e86..13e89d041fa 100644 --- a/tools/theme/src/express/scale-medium.css +++ b/tools/theme/src/express/scale-medium.css @@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/medium-vars.css'); -@import url('@spectrum-web-components/styles/express/scale-medium.css'); +@import url("@spectrum-web-components/styles/tokens/medium-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/medium-vars.css"); +@import url("@spectrum-web-components/styles/tokens/express/medium-vars.css"); +@import url("@spectrum-web-components/styles/express/scale-medium.css"); :root, :host { diff --git a/tools/theme/src/express/theme-core-tokens.css b/tools/theme/src/express/theme-core-tokens.css index ad36016b838..aa7154fba7e 100644 --- a/tools/theme/src/express/theme-core-tokens.css +++ b/tools/theme/src/express/theme-core-tokens.css @@ -10,11 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/system-theme-bridge.css'); -@import url('@spectrum-web-components/styles/typography.css'); +@import url("@spectrum-web-components/styles/tokens/global-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/global-vars.css"); +@import url("@spectrum-web-components/styles/tokens/express/global-vars.css"); +@import url("@spectrum-web-components/styles/tokens/express/system-theme-bridge.css"); +@import url("@spectrum-web-components/styles/typography.css"); :host { display: block; diff --git a/tools/theme/src/express/theme-dark-core-tokens.css b/tools/theme/src/express/theme-dark-core-tokens.css index 3b699f42611..33f3e33f8fc 100644 --- a/tools/theme/src/express/theme-dark-core-tokens.css +++ b/tools/theme/src/express/theme-dark-core-tokens.css @@ -10,9 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/dark-vars.css'); +@import url("@spectrum-web-components/styles/tokens/dark-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/dark-vars.css"); +@import url("@spectrum-web-components/styles/tokens/express/dark-vars.css"); :host, :root { diff --git a/tools/theme/src/express/theme-dark.css b/tools/theme/src/express/theme-dark.css index e8b821e0db5..bb767dc17de 100644 --- a/tools/theme/src/express/theme-dark.css +++ b/tools/theme/src/express/theme-dark.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/express/theme-dark.css'); -@import url('@spectrum-web-components/styles/tokens/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/dark-vars.css'); +@import url("@spectrum-web-components/styles/express/theme-dark.css"); +@import url("@spectrum-web-components/styles/tokens/dark-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/dark-vars.css"); +@import url("@spectrum-web-components/styles/tokens/express/dark-vars.css"); diff --git a/tools/theme/src/express/theme-light-core-tokens.css b/tools/theme/src/express/theme-light-core-tokens.css index 6c06fedf5b1..ea1593e6917 100644 --- a/tools/theme/src/express/theme-light-core-tokens.css +++ b/tools/theme/src/express/theme-light-core-tokens.css @@ -10,9 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/light-vars.css'); +@import url("@spectrum-web-components/styles/tokens/light-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/light-vars.css"); +@import url("@spectrum-web-components/styles/tokens/express/light-vars.css"); :host, :root { diff --git a/tools/theme/src/express/theme-light.css b/tools/theme/src/express/theme-light.css index ae019f41d63..845abf560c8 100644 --- a/tools/theme/src/express/theme-light.css +++ b/tools/theme/src/express/theme-light.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/express/theme-light.css'); -@import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/light-vars.css'); +@import url("@spectrum-web-components/styles/express/theme-light.css"); +@import url("@spectrum-web-components/styles/tokens/light-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/light-vars.css"); +@import url("@spectrum-web-components/styles/tokens/express/light-vars.css"); diff --git a/tools/theme/src/express/theme.css b/tools/theme/src/express/theme.css index 33d91e40815..b98228c9c5c 100644 --- a/tools/theme/src/express/theme.css +++ b/tools/theme/src/express/theme.css @@ -10,12 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens/express/global-vars.css'); -@import url('@spectrum-web-components/styles/express/core-global.css'); -@import url('@spectrum-web-components/styles/tokens/express/system-theme-bridge.css'); -@import url('@spectrum-web-components/styles/typography.css'); +@import url("@spectrum-web-components/styles/tokens/global-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/global-vars.css"); +@import url("@spectrum-web-components/styles/tokens/express/global-vars.css"); +@import url("@spectrum-web-components/styles/express/core-global.css"); +@import url("@spectrum-web-components/styles/tokens/express/system-theme-bridge.css"); +@import url("@spectrum-web-components/styles/typography.css"); :host { display: block; diff --git a/tools/theme/src/scale-large-core-tokens.css b/tools/theme/src/scale-large-core-tokens.css index af4f5a50cbb..6a73ac83e3a 100644 --- a/tools/theme/src/scale-large-core-tokens.css +++ b/tools/theme/src/scale-large-core-tokens.css @@ -10,8 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/large-vars.css'); +@import url("@spectrum-web-components/styles/tokens/large-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/large-vars.css"); :root, :host { diff --git a/tools/theme/src/scale-large.css b/tools/theme/src/scale-large.css index 81a0b9b6ef3..b2d9e9bc55b 100644 --- a/tools/theme/src/scale-large.css +++ b/tools/theme/src/scale-large.css @@ -10,9 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/scale-large.css'); -@import url('@spectrum-web-components/styles/tokens/large-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/large-vars.css'); +@import url("@spectrum-web-components/styles/scale-large.css"); +@import url("@spectrum-web-components/styles/tokens/large-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/large-vars.css"); :root, :host { diff --git a/tools/theme/src/scale-medium-core-tokens.css b/tools/theme/src/scale-medium-core-tokens.css index 26686b8a8c3..422ae99de23 100644 --- a/tools/theme/src/scale-medium-core-tokens.css +++ b/tools/theme/src/scale-medium-core-tokens.css @@ -10,8 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/medium-vars.css'); +@import url("@spectrum-web-components/styles/tokens/medium-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/medium-vars.css"); :root, :host { diff --git a/tools/theme/src/scale-medium.css b/tools/theme/src/scale-medium.css index bfba8a20bcd..1ce0639faac 100644 --- a/tools/theme/src/scale-medium.css +++ b/tools/theme/src/scale-medium.css @@ -10,9 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/scale-medium.css'); -@import url('@spectrum-web-components/styles/tokens/medium-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/medium-vars.css'); +@import url("@spectrum-web-components/styles/scale-medium.css"); +@import url("@spectrum-web-components/styles/tokens/medium-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/medium-vars.css"); :root, :host { diff --git a/tools/theme/src/spectrum-two/scale-large-core-tokens.css b/tools/theme/src/spectrum-two/scale-large-core-tokens.css index 3454840842b..73e1289f720 100755 --- a/tools/theme/src/spectrum-two/scale-large-core-tokens.css +++ b/tools/theme/src/spectrum-two/scale-large-core-tokens.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens-v2/large-vars.css'); +@import url("@spectrum-web-components/styles/tokens-v2/large-vars.css"); :root, :host { diff --git a/tools/theme/src/spectrum-two/scale-large.css b/tools/theme/src/spectrum-two/scale-large.css index 4b9a27607ac..16f760200b2 100644 --- a/tools/theme/src/spectrum-two/scale-large.css +++ b/tools/theme/src/spectrum-two/scale-large.css @@ -10,8 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/spectrum-two/scale-large.css'); -@import url('@spectrum-web-components/styles/tokens-v2/large-vars.css'); +@import url("@spectrum-web-components/styles/spectrum-two/scale-large.css"); +@import url("@spectrum-web-components/styles/tokens-v2/large-vars.css"); :root, :host { diff --git a/tools/theme/src/spectrum-two/scale-medium-core-tokens.css b/tools/theme/src/spectrum-two/scale-medium-core-tokens.css index a9b5350ee83..37aaac19a72 100755 --- a/tools/theme/src/spectrum-two/scale-medium-core-tokens.css +++ b/tools/theme/src/spectrum-two/scale-medium-core-tokens.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens-v2/medium-vars.css'); +@import url("@spectrum-web-components/styles/tokens-v2/medium-vars.css"); :root, :host { diff --git a/tools/theme/src/spectrum-two/scale-medium.css b/tools/theme/src/spectrum-two/scale-medium.css index 649c6e9dc21..66ba954d55f 100644 --- a/tools/theme/src/spectrum-two/scale-medium.css +++ b/tools/theme/src/spectrum-two/scale-medium.css @@ -10,8 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/spectrum-two/scale-medium.css'); -@import url('@spectrum-web-components/styles/tokens-v2/medium-vars.css'); +@import url("@spectrum-web-components/styles/spectrum-two/scale-medium.css"); +@import url("@spectrum-web-components/styles/tokens-v2/medium-vars.css"); :root, :host { diff --git a/tools/theme/src/spectrum-two/theme-core-tokens.css b/tools/theme/src/spectrum-two/theme-core-tokens.css index 4b540bef4df..c60edd83bf4 100755 --- a/tools/theme/src/spectrum-two/theme-core-tokens.css +++ b/tools/theme/src/spectrum-two/theme-core-tokens.css @@ -10,9 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens-v2/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/system-theme-bridge.css'); -@import url('@spectrum-web-components/styles/typography.css'); +@import url("@spectrum-web-components/styles/tokens-v2/global-vars.css"); +@import url("@spectrum-web-components/styles/tokens-v2/system-theme-bridge.css"); +@import url("@spectrum-web-components/styles/typography.css"); :host { display: block; diff --git a/tools/theme/src/spectrum-two/theme-dark-core-tokens.css b/tools/theme/src/spectrum-two/theme-dark-core-tokens.css index 365faa704ec..c15ef2714ab 100755 --- a/tools/theme/src/spectrum-two/theme-dark-core-tokens.css +++ b/tools/theme/src/spectrum-two/theme-dark-core-tokens.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens-v2/dark-vars.css'); +@import url("@spectrum-web-components/styles/tokens-v2/dark-vars.css"); :host, :root { diff --git a/tools/theme/src/spectrum-two/theme-dark.css b/tools/theme/src/spectrum-two/theme-dark.css index 4bb15d70d32..f011a445ad1 100644 --- a/tools/theme/src/spectrum-two/theme-dark.css +++ b/tools/theme/src/spectrum-two/theme-dark.css @@ -10,5 +10,5 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/spectrum-two/theme-dark.css'); -@import url('@spectrum-web-components/styles/tokens-v2/dark-vars.css'); +@import url("@spectrum-web-components/styles/spectrum-two/theme-dark.css"); +@import url("@spectrum-web-components/styles/tokens-v2/dark-vars.css"); diff --git a/tools/theme/src/spectrum-two/theme-light-core-tokens.css b/tools/theme/src/spectrum-two/theme-light-core-tokens.css index f08bd2465d6..2059e688667 100755 --- a/tools/theme/src/spectrum-two/theme-light-core-tokens.css +++ b/tools/theme/src/spectrum-two/theme-light-core-tokens.css @@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens-v2/light-vars.css'); +@import url("@spectrum-web-components/styles/tokens-v2/light-vars.css"); :host, :root { diff --git a/tools/theme/src/spectrum-two/theme-light.css b/tools/theme/src/spectrum-two/theme-light.css index 74d2cca2079..94d4fc5e9bc 100644 --- a/tools/theme/src/spectrum-two/theme-light.css +++ b/tools/theme/src/spectrum-two/theme-light.css @@ -10,5 +10,5 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/spectrum-two/theme-light.css'); -@import url('@spectrum-web-components/styles/tokens-v2/light-vars.css'); +@import url("@spectrum-web-components/styles/spectrum-two/theme-light.css"); +@import url("@spectrum-web-components/styles/tokens-v2/light-vars.css"); diff --git a/tools/theme/src/spectrum-two/theme.css b/tools/theme/src/spectrum-two/theme.css index 08041fd0671..fbfda63a2c7 100755 --- a/tools/theme/src/spectrum-two/theme.css +++ b/tools/theme/src/spectrum-two/theme.css @@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/spectrum-two/core-global.css'); -@import url('@spectrum-web-components/styles/tokens-v2/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens-v2/system-theme-bridge.css'); -@import url('@spectrum-web-components/styles/typography.css'); +@import url("@spectrum-web-components/styles/spectrum-two/core-global.css"); +@import url("@spectrum-web-components/styles/tokens-v2/global-vars.css"); +@import url("@spectrum-web-components/styles/tokens-v2/system-theme-bridge.css"); +@import url("@spectrum-web-components/styles/typography.css"); :host { display: block; diff --git a/tools/theme/src/theme-core-tokens.css b/tools/theme/src/theme-core-tokens.css index 34c339d7d06..f824c835bd1 100644 --- a/tools/theme/src/theme-core-tokens.css +++ b/tools/theme/src/theme-core-tokens.css @@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/system-theme-bridge.css'); -@import url('@spectrum-web-components/styles/typography.css'); +@import url("@spectrum-web-components/styles/tokens/global-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/global-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/system-theme-bridge.css"); +@import url("@spectrum-web-components/styles/typography.css"); :host { display: block; diff --git a/tools/theme/src/theme-dark-core-tokens.css b/tools/theme/src/theme-dark-core-tokens.css index 992cce5ae80..ccf2f18b85f 100644 --- a/tools/theme/src/theme-dark-core-tokens.css +++ b/tools/theme/src/theme-dark-core-tokens.css @@ -10,8 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/dark-vars.css'); +@import url("@spectrum-web-components/styles/tokens/dark-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/dark-vars.css"); :host, :root { diff --git a/tools/theme/src/theme-dark.css b/tools/theme/src/theme-dark.css index b3a60dd71a6..01988431e0c 100644 --- a/tools/theme/src/theme-dark.css +++ b/tools/theme/src/theme-dark.css @@ -10,6 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/theme-dark.css'); -@import url('@spectrum-web-components/styles/tokens/dark-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/dark-vars.css'); +@import url("@spectrum-web-components/styles/theme-dark.css"); +@import url("@spectrum-web-components/styles/tokens/dark-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/dark-vars.css"); diff --git a/tools/theme/src/theme-darkest-core-tokens.css b/tools/theme/src/theme-darkest-core-tokens.css index e6b1a4e8441..f4964b5d3ba 100644 --- a/tools/theme/src/theme-darkest-core-tokens.css +++ b/tools/theme/src/theme-darkest-core-tokens.css @@ -10,8 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/darkest-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/darkest-vars.css'); +@import url("@spectrum-web-components/styles/tokens/darkest-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/darkest-vars.css"); :host, :root { diff --git a/tools/theme/src/theme-darkest.css b/tools/theme/src/theme-darkest.css index 70cc7dd60e4..147af7c2bea 100644 --- a/tools/theme/src/theme-darkest.css +++ b/tools/theme/src/theme-darkest.css @@ -10,6 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/theme-darkest.css'); -@import url('@spectrum-web-components/styles/tokens/darkest-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/darkest-vars.css'); +@import url("@spectrum-web-components/styles/theme-darkest.css"); +@import url("@spectrum-web-components/styles/tokens/darkest-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/darkest-vars.css"); diff --git a/tools/theme/src/theme-light-core-tokens.css b/tools/theme/src/theme-light-core-tokens.css index eab7c88dd0f..bdc6804f5cc 100644 --- a/tools/theme/src/theme-light-core-tokens.css +++ b/tools/theme/src/theme-light-core-tokens.css @@ -10,8 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); +@import url("@spectrum-web-components/styles/tokens/light-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/light-vars.css"); :host, :root { diff --git a/tools/theme/src/theme-light.css b/tools/theme/src/theme-light.css index 4f5dc7fc2fe..999ab06ae53 100644 --- a/tools/theme/src/theme-light.css +++ b/tools/theme/src/theme-light.css @@ -10,6 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/theme-light.css'); -@import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); +@import url("@spectrum-web-components/styles/theme-light.css"); +@import url("@spectrum-web-components/styles/tokens/light-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/light-vars.css"); diff --git a/tools/theme/src/theme-lightest-core-tokens.css b/tools/theme/src/theme-lightest-core-tokens.css index eab7c88dd0f..bdc6804f5cc 100644 --- a/tools/theme/src/theme-lightest-core-tokens.css +++ b/tools/theme/src/theme-lightest-core-tokens.css @@ -10,8 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); +@import url("@spectrum-web-components/styles/tokens/light-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/light-vars.css"); :host, :root { diff --git a/tools/theme/src/theme-lightest.css b/tools/theme/src/theme-lightest.css index fadba254dfa..34ebdd1c6af 100644 --- a/tools/theme/src/theme-lightest.css +++ b/tools/theme/src/theme-lightest.css @@ -10,6 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/theme-lightest.css'); -@import url('@spectrum-web-components/styles/tokens/light-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/light-vars.css'); +@import url("@spectrum-web-components/styles/theme-lightest.css"); +@import url("@spectrum-web-components/styles/tokens/light-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/light-vars.css"); diff --git a/tools/theme/src/theme.css b/tools/theme/src/theme.css index 79d2d47853e..ef587833ec5 100644 --- a/tools/theme/src/theme.css +++ b/tools/theme/src/theme.css @@ -10,11 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/core-global.css'); -@import url('@spectrum-web-components/styles/tokens/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/global-vars.css'); -@import url('@spectrum-web-components/styles/tokens/spectrum/system-theme-bridge.css'); -@import url('@spectrum-web-components/styles/typography.css'); +@import url("@spectrum-web-components/styles/core-global.css"); +@import url("@spectrum-web-components/styles/tokens/global-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/global-vars.css"); +@import url("@spectrum-web-components/styles/tokens/spectrum/system-theme-bridge.css"); +@import url("@spectrum-web-components/styles/typography.css"); :host { display: block; diff --git a/tools/theme/src/typography.css b/tools/theme/src/typography.css index 1ff87940bd5..f922035af06 100644 --- a/tools/theme/src/typography.css +++ b/tools/theme/src/typography.css @@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import url('@spectrum-web-components/styles/typography.css'); +@import url("@spectrum-web-components/styles/typography.css"); diff --git a/web-test-runner.config.vrt.js b/web-test-runner.config.vrt.js index eac93c9bfc8..ed02a601fd6 100644 --- a/web-test-runner.config.vrt.js +++ b/web-test-runner.config.vrt.js @@ -11,9 +11,9 @@ governing permissions and limitations under the License. */ import standard from './web-test-runner.config.ci.js'; -standard.concurrency = 4; +standard.concurrency = 10; standard.testsFinishTimeout = 200000; standard.testFramework.config.timeout = 100000; -standard.testFramework.config.retries = 0; +standard.testFramework.config.retries = 1; export default standard; diff --git a/web-test-runner.utils.js b/web-test-runner.utils.js index f20cf4a1c8c..f5c8db66536 100644 --- a/web-test-runner.utils.js +++ b/web-test-runner.utils.js @@ -32,14 +32,13 @@ export const chromium = playwrightLauncher({ */ export const coverallsChromium = playwrightLauncher({ product: 'chromium', + concurrency: 10, createBrowserContext: ({ browser }) => browser.newContext({ ignoreHTTPSErrors: true, permissions: ['clipboard-read', 'clipboard-write'], }), launchOptions: { - executablePath: - '/home/runner/.cache/ms-playwright/chromium-1148/chrome-linux/chrome', headless: true, }, }); @@ -68,7 +67,7 @@ export const chromiumWithMemoryTooling = playwrightLauncher({ export const chromiumWithMemoryToolingCI = playwrightLauncher({ product: 'chromium', - concurrency: 2, + concurrency: 10, createBrowserContext: ({ browser }) => browser.newContext({ ignoreHTTPSErrors: true, @@ -76,16 +75,7 @@ export const chromiumWithMemoryToolingCI = playwrightLauncher({ }), launchOptions: { headless: false, - args: [ - '--js-flags=--expose-gc', - '--headless=new', - /** - * Cause `measureUserAgentSpecificMemory()` to GC immediately, - * instead of up to 20s later: - * https://web.dev/articles/monitor-total-page-memory-usage#local_testing - **/ - '--enable-blink-features=ForceEagerMeasureMemory', - ], + args: ['--js-flags=--expose-gc', '--headless=new'], }, }); @@ -108,7 +98,9 @@ export const firefox = playwrightLauncher({ browser.newContext({ ignoreHTTPSErrors: true, }), + createPage: ({ context }) => context.newPage(), launchOptions: { + headless: true, firefoxUserPrefs: { 'toolkit.telemetry.reportingpolicy.firstRun': false, 'browser.shell.checkDefaultBrowser': false, @@ -126,7 +118,7 @@ export const firefox = playwrightLauncher({ export const webkit = playwrightLauncher({ product: 'webkit', - concurrency: 4, + concurrency: 10, createBrowserContext: ({ browser }) => browser.newContext({ ignoreHTTPSErrors: true, diff --git a/yarn.lock b/yarn.lock index b30e3198708..2bae64e28e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -216,7 +216,7 @@ __metadata: "@netlify/build": "npm:^29.17.3" "@open-wc/dev-server-hmr": "npm:^0.2.0" "@open-wc/testing": "npm:^4.0.0" - "@playwright/test": "npm:^1.44.0" + "@playwright/test": "npm:^1.52.0" "@rollup/plugin-commonjs": "npm:^25.0.7" "@rollup/plugin-json": "npm:^6.0.1" "@rollup/plugin-node-resolve": "npm:^15.2.3" @@ -5788,14 +5788,14 @@ __metadata: languageName: node linkType: hard -"@playwright/test@npm:^1.44.0": - version: 1.51.1 - resolution: "@playwright/test@npm:1.51.1" +"@playwright/test@npm:^1.52.0": + version: 1.52.0 + resolution: "@playwright/test@npm:1.52.0" dependencies: - playwright: "npm:1.51.1" + playwright: "npm:1.52.0" bin: playwright: cli.js - checksum: 10c0/bdb98f3df58f60b5c62e6d5c79c30910404d1855afea0803af0efd6dc63f90c473dbf92ff7dc212f1459f1d32c85dc44a60f70c2e0ea604f975b953d59523234 + checksum: 10c0/1c428b421593eb4f79b7c99783a389c3ab3526c9051ec772749f4fca61414dfa9f2344eba846faac5f238084aa96c836364a91d81d3034ac54924f239a93e247 languageName: node linkType: hard @@ -8235,6 +8235,7 @@ __metadata: resolution: "@spectrum-web-components/reactive-controllers@workspace:tools/reactive-controllers" dependencies: "@spectrum-web-components/progress-circle": "npm:1.6.0" + "@spectrum-web-components/theme": "npm:1.6.0" colorjs.io: "npm:^0.5.2" lit: "npm:^2.5.0 || ^3.1.3" languageName: unknown @@ -27989,51 +27990,27 @@ __metadata: languageName: node linkType: hard -"playwright-core@npm:1.44.0": - version: 1.44.0 - resolution: "playwright-core@npm:1.44.0" - bin: - playwright-core: cli.js - checksum: 10c0/e1220371a76cdf145f6aaefb2dd6c5194531d1c1e2b67712c56dbc1d589dffb66fd4fc0168be60cd2115aca40660aa13c572e14be47674c0542bc879705b9fb3 - languageName: node - linkType: hard - -"playwright-core@npm:1.51.1": - version: 1.51.1 - resolution: "playwright-core@npm:1.51.1" +"playwright-core@npm:1.52.0": + version: 1.52.0 + resolution: "playwright-core@npm:1.52.0" bin: playwright-core: cli.js - checksum: 10c0/4f004d9dea5ecbd76b84c858fa4880ed955600b6cda972a3e8093ea47e150ce20bf2ea806e73e740497d34f4b61b080c208339a661fc75ad04d8f00bedcc21e0 + checksum: 10c0/640945507e6ca2144e9f596b2a6ecac042c2fd3683ff99e6271e9a7b38f3602d415f282609d569456f66680aab8b3c5bb1b257d8fb63a7fc0ed648261110421f languageName: node linkType: hard -"playwright@npm:1.51.1": - version: 1.51.1 - resolution: "playwright@npm:1.51.1" - dependencies: - fsevents: "npm:2.3.2" - playwright-core: "npm:1.51.1" - dependenciesMeta: - fsevents: - optional: true - bin: - playwright: cli.js - checksum: 10c0/2aea553b8b1086ee419e72c9d4f4117686e6bdb5e09e0f47dfe563ce0f0bd79c4ee79dd9c8a0f023a2fb7803b81d4fdc552887410d16c036be07f21ab72b3f46 - languageName: node - linkType: hard - -"playwright@npm:^1.22.2": - version: 1.44.0 - resolution: "playwright@npm:1.44.0" +"playwright@npm:^1.52.0": + version: 1.52.0 + resolution: "playwright@npm:1.52.0" dependencies: fsevents: "npm:2.3.2" - playwright-core: "npm:1.44.0" + playwright-core: "npm:1.52.0" dependenciesMeta: fsevents: optional: true bin: playwright: cli.js - checksum: 10c0/dcbee9022623dd9e219e9867983789262e80339f0c3601219930883e5a304ce75e1397715c0f378a2bab0a799cf88a73ea4b58fe595cfd9058bd7a82f5d8e3b6 + checksum: 10c0/2c6edf1e15e59bbaf77f3fa0fe0ac975793c17cff835d9c8b8bc6395a3b6f1c01898b3058ab37891b2e4d424bcc8f1b4844fe70d943e0143d239d7451408c579 languageName: node linkType: hard