From 7b4b6457c7986849b7019f3f39ed6a7692a81f72 Mon Sep 17 00:00:00 2001 From: Venkatesh Josyula Date: Wed, 5 Jul 2023 06:51:20 +0530 Subject: [PATCH 01/12] feat(opacity-checkerboard): adding new component --- packages/opacity-checkerboard/README.md | 7 ++ packages/opacity-checkerboard/exports.json | 6 ++ packages/opacity-checkerboard/package.json | 69 +++++++++++++++++++ .../sp-opacity-checkerboard.ts | 22 ++++++ .../src/OpacityCheckerboard.ts | 45 ++++++++++++ packages/opacity-checkerboard/src/index.ts | 12 ++++ .../src/opacity-checkerboard.css | 13 ++++ .../src/spectrum-config.js | 37 ++++++++++ .../src/spectrum-opacity-checkerboard.css | 60 ++++++++++++++++ .../opacity-checkerboard/stories/index.ts | 20 ++++++ .../stories/opacity-checkerboard.stories.ts | 23 +++++++ packages/opacity-checkerboard/tsconfig.json | 13 ++++ tsconfig-all.json | 1 + 13 files changed, 328 insertions(+) create mode 100644 packages/opacity-checkerboard/README.md create mode 100644 packages/opacity-checkerboard/exports.json create mode 100644 packages/opacity-checkerboard/package.json create mode 100644 packages/opacity-checkerboard/sp-opacity-checkerboard.ts create mode 100644 packages/opacity-checkerboard/src/OpacityCheckerboard.ts create mode 100644 packages/opacity-checkerboard/src/index.ts create mode 100644 packages/opacity-checkerboard/src/opacity-checkerboard.css create mode 100644 packages/opacity-checkerboard/src/spectrum-config.js create mode 100644 packages/opacity-checkerboard/src/spectrum-opacity-checkerboard.css create mode 100644 packages/opacity-checkerboard/stories/index.ts create mode 100644 packages/opacity-checkerboard/stories/opacity-checkerboard.stories.ts create mode 100644 packages/opacity-checkerboard/tsconfig.json diff --git a/packages/opacity-checkerboard/README.md b/packages/opacity-checkerboard/README.md new file mode 100644 index 0000000000..12d1d389d0 --- /dev/null +++ b/packages/opacity-checkerboard/README.md @@ -0,0 +1,7 @@ +# @spectrum-css/opacitycheckerboard + +> Opacity checkerboard + +This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). + +See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/opacitycheckerboard). diff --git a/packages/opacity-checkerboard/exports.json b/packages/opacity-checkerboard/exports.json new file mode 100644 index 0000000000..d3b2a23dfd --- /dev/null +++ b/packages/opacity-checkerboard/exports.json @@ -0,0 +1,6 @@ +{ + ".": "./src/index.js", + "./src/*.js": "./src/*.js", + "./package.json": "./package.json", + "./sp-opacity-checkerboard.js": "./sp-opacity-checkerboard.js" +} diff --git a/packages/opacity-checkerboard/package.json b/packages/opacity-checkerboard/package.json new file mode 100644 index 0000000000..fdc05cafc5 --- /dev/null +++ b/packages/opacity-checkerboard/package.json @@ -0,0 +1,69 @@ +{ + "name": "@spectrum-web-components/opacity-checkerboard", + "version": "1.0.0-alpha.0", + "publishConfig": { + "access": "public" + }, + "description": "", + "license": "Apache-2.0", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-web-components.git", + "directory": "packages/opacity-checkerboard" + }, + "author": "", + "homepage": "https://opensource.adobe.com/spectrum-web-components/components/opacity-checkerboard", + "bugs": { + "url": "https://github.com/adobe/spectrum-web-components/issues" + }, + "main": "./src/index.js", + "module": "./src/index.js", + "type": "module", + "exports": { + ".": { + "development": "./src/index.dev.js", + "default": "./src/index.js" + }, + "./package.json": "./package.json", + "./src/OpacityCheckerboard.js": { + "development": "./src/OpacityCheckerboard.dev.js", + "default": "./src/OpacityCheckerboard.js" + }, + "./src/index.js": { + "development": "./src/index.dev.js", + "default": "./src/index.js" + }, + "./src/opacity-checkerboard.css.js": "./src/opacity-checkerboard.css.js", + "./sp-opacity-checkerboard.js": { + "development": "./sp-opacity-checkerboard.dev.js", + "default": "./sp-opacity-checkerboard.js" + } + }, + "scripts": { + "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" + }, + "files": [ + "**/*.d.ts", + "**/*.js", + "**/*.js.map", + "custom-elements.json", + "!stories/", + "!test/" + ], + "keywords": [ + "spectrum css", + "web components", + "lit-element", + "lit-html" + ], + "dependencies": {}, + "devDependencies": { + "@spectrum-css/opacitycheckerboard": "^1.0.0-alpha.0" + }, + "types": "./src/index.d.ts", + "customElements": "custom-elements.json", + "sideEffects": [ + "./sp-*.js", + "./**/*.dev.js" + ] +} diff --git a/packages/opacity-checkerboard/sp-opacity-checkerboard.ts b/packages/opacity-checkerboard/sp-opacity-checkerboard.ts new file mode 100644 index 0000000000..7c5b34c665 --- /dev/null +++ b/packages/opacity-checkerboard/sp-opacity-checkerboard.ts @@ -0,0 +1,22 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { OpacityCheckerboard } from './src/OpacityCheckerboard.js'; +import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; + +defineElement('sp-opacity-checkerboard', OpacityCheckerboard); + +declare global { + interface HTMLElementTagNameMap { + 'sp-opacity-checkerboard': OpacityCheckerboard; + } +} diff --git a/packages/opacity-checkerboard/src/OpacityCheckerboard.ts b/packages/opacity-checkerboard/src/OpacityCheckerboard.ts new file mode 100644 index 0000000000..42d7e1d67e --- /dev/null +++ b/packages/opacity-checkerboard/src/OpacityCheckerboard.ts @@ -0,0 +1,45 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { + CSSResultArray, + html, + PropertyValues, + SpectrumElement, + TemplateResult, +} from '@spectrum-web-components/base'; + +import styles from './opacity-checkerboard.css.js'; + +/** + * @element sp-opacity-checkerboard + */ +export class OpacityCheckerboard extends SpectrumElement { + public static override get styles(): CSSResultArray { + return [styles]; + } + + protected override render(): TemplateResult { + return html` +
+
+
+ `; + } + + protected override update(changedProperties: PropertyValues): void { + super.update(changedProperties); + } +} diff --git a/packages/opacity-checkerboard/src/index.ts b/packages/opacity-checkerboard/src/index.ts new file mode 100644 index 0000000000..4877cefd41 --- /dev/null +++ b/packages/opacity-checkerboard/src/index.ts @@ -0,0 +1,12 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ +export * from './OpacityCheckerboard.js'; diff --git a/packages/opacity-checkerboard/src/opacity-checkerboard.css b/packages/opacity-checkerboard/src/opacity-checkerboard.css new file mode 100644 index 0000000000..a1d1f7523b --- /dev/null +++ b/packages/opacity-checkerboard/src/opacity-checkerboard.css @@ -0,0 +1,13 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +@import './spectrum-opacity-checkerboard.css'; diff --git a/packages/opacity-checkerboard/src/spectrum-config.js b/packages/opacity-checkerboard/src/spectrum-config.js new file mode 100644 index 0000000000..42ff9ba007 --- /dev/null +++ b/packages/opacity-checkerboard/src/spectrum-config.js @@ -0,0 +1,37 @@ +// @ts-check +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the 'License'); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { converterFor } from '../../../tasks/process-spectrum-utils.js'; + +const converter = converterFor('spectrum-OpacityCheckerboard'); + +/** + * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } + */ +const config = { + conversions: [ + { + inPackage: '@spectrum-css/opacitycheckerboard', + outPackage: 'opacity-checkerboard', + fileName: 'opacity-checkerboard', + components: [ + converter.classToClass( + 'spectrum-OpacityCheckerboard', + 'opacityCheckerboard' + ), + ], + }, + ], +}; + +export default config; diff --git a/packages/opacity-checkerboard/src/spectrum-opacity-checkerboard.css b/packages/opacity-checkerboard/src/spectrum-opacity-checkerboard.css new file mode 100644 index 0000000000..5516264570 --- /dev/null +++ b/packages/opacity-checkerboard/src/spectrum-opacity-checkerboard.css @@ -0,0 +1,60 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.opacityCheckerboard { + --spectrum-opacity-checkerboard-dark: var( + --spectrum-opacity-checkerboard-square-dark + ); + --spectrum-opacity-checkerboard-light: var( + --spectrum-opacity-checkerboard-square-light + ); + --spectrum-opacity-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --spectrum-opacity-checkerboard-position: left top; + background: repeating-conic-gradient( + var( + --mod-opacity-checkerboard-light, + var(--spectrum-opacity-checkerboard-light) + ) + 0 25%, + var( + --mod-opacity-checkerboard-dark, + var(--spectrum-opacity-checkerboard-dark) + ) + 0 50% + ) + var( + --mod-opacity-checkerboard-position, + var(--spectrum-opacity-checkerboard-position) + ) / + calc( + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-size) + ) * 2 + ) + calc( + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-size) + ) * 2 + ); + block-size: 100%; + inline-size: 100%; +} +@media (forced-colors: active) { + .opacityCheckerboard { + forced-color-adjust: none; + } +} diff --git a/packages/opacity-checkerboard/stories/index.ts b/packages/opacity-checkerboard/stories/index.ts new file mode 100644 index 0000000000..a20de49f4b --- /dev/null +++ b/packages/opacity-checkerboard/stories/index.ts @@ -0,0 +1,20 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ +import { html, TemplateResult } from '@spectrum-web-components/base'; + +import '@spectrum-web-components/opacity-checkerboard/sp-opacity-checkerboard.js'; + +export const OpacityCheckerboardMarkup = ({} = {}): TemplateResult => { + return html` + + `; +}; diff --git a/packages/opacity-checkerboard/stories/opacity-checkerboard.stories.ts b/packages/opacity-checkerboard/stories/opacity-checkerboard.stories.ts new file mode 100644 index 0000000000..f332c75fd8 --- /dev/null +++ b/packages/opacity-checkerboard/stories/opacity-checkerboard.stories.ts @@ -0,0 +1,23 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ +import { TemplateResult } from '@spectrum-web-components/base'; + +import { OpacityCheckerboardMarkup } from './'; + +import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js'; + +export default { + component: 'sp-opacity-checkerboard', + title: 'Opacity Checkerboard', +}; + +export const Default = (): TemplateResult => OpacityCheckerboardMarkup(); diff --git a/packages/opacity-checkerboard/tsconfig.json b/packages/opacity-checkerboard/tsconfig.json new file mode 100644 index 0000000000..f82682bd29 --- /dev/null +++ b/packages/opacity-checkerboard/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "composite": true, + "rootDir": "./" + }, + "include": ["*.ts", "src/*.ts"], + "exclude": ["test/*.ts", "stories/*.ts"], + "references": [ + { "path": "../../tools/base" }, + { "path": "../../tools/shared" } + ] +} diff --git a/tsconfig-all.json b/tsconfig-all.json index 7ef6eb3380..012a31c977 100644 --- a/tsconfig-all.json +++ b/tsconfig-all.json @@ -54,6 +54,7 @@ { "path": "packages/meter" }, { "path": "packages/modal" }, { "path": "packages/number-field" }, + { "path": "packages/opacity-checkerboard" }, { "path": "packages/overlay" }, { "path": "packages/picker" }, { "path": "packages/picker-button" }, From 34f9e143cae0fbbfff33e075f6abd4faf7ebc59c Mon Sep 17 00:00:00 2001 From: Venkatesh Josyula Date: Tue, 18 Jul 2023 16:37:44 +0530 Subject: [PATCH 02/12] feat(opacity-checkerboard): adding benchmark tests --- .../test/benchmark/basic-test.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 packages/opacity-checkerboard/test/benchmark/basic-test.ts diff --git a/packages/opacity-checkerboard/test/benchmark/basic-test.ts b/packages/opacity-checkerboard/test/benchmark/basic-test.ts new file mode 100644 index 0000000000..96a9eac96c --- /dev/null +++ b/packages/opacity-checkerboard/test/benchmark/basic-test.ts @@ -0,0 +1,20 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { html } from '@spectrum-web-components/base'; + +import '@spectrum-web-components/opacity-checkerboard/sp-opacity-checkerboard.js'; +import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js'; + +measureFixtureCreation(html` + +`); From b4a93f769327eae23e29b7544f025ffc728b37b4 Mon Sep 17 00:00:00 2001 From: Venkatesh Josyula Date: Thu, 20 Jul 2023 13:50:40 +0530 Subject: [PATCH 03/12] feat(opacity-checkerboard): removing the custom element creation --- packages/opacity-checkerboard/exports.json | 6 +-- packages/opacity-checkerboard/package.json | 19 +------- .../sp-opacity-checkerboard.ts | 22 --------- .../src/OpacityCheckerboard.ts | 45 ------------------- packages/opacity-checkerboard/src/index.ts | 12 ----- .../opacity-checkerboard/stories/index.ts | 20 --------- .../stories/opacity-checkerboard.stories.ts | 23 ---------- .../test/benchmark/basic-test.ts | 20 --------- 8 files changed, 4 insertions(+), 163 deletions(-) delete mode 100644 packages/opacity-checkerboard/sp-opacity-checkerboard.ts delete mode 100644 packages/opacity-checkerboard/src/OpacityCheckerboard.ts delete mode 100644 packages/opacity-checkerboard/src/index.ts delete mode 100644 packages/opacity-checkerboard/stories/index.ts delete mode 100644 packages/opacity-checkerboard/stories/opacity-checkerboard.stories.ts delete mode 100644 packages/opacity-checkerboard/test/benchmark/basic-test.ts diff --git a/packages/opacity-checkerboard/exports.json b/packages/opacity-checkerboard/exports.json index d3b2a23dfd..b652713111 100644 --- a/packages/opacity-checkerboard/exports.json +++ b/packages/opacity-checkerboard/exports.json @@ -1,6 +1,4 @@ { - ".": "./src/index.js", - "./src/*.js": "./src/*.js", - "./package.json": "./package.json", - "./sp-opacity-checkerboard.js": "./sp-opacity-checkerboard.js" + ".": "./src/opacity-checkerboard.css.js", + "./src/*": "./src/*" } diff --git a/packages/opacity-checkerboard/package.json b/packages/opacity-checkerboard/package.json index fdc05cafc5..19b66e219a 100644 --- a/packages/opacity-checkerboard/package.json +++ b/packages/opacity-checkerboard/package.json @@ -20,24 +20,9 @@ "module": "./src/index.js", "type": "module", "exports": { - ".": { - "development": "./src/index.dev.js", - "default": "./src/index.js" - }, + ".": "./src/opacity-checkerboard.css.js", "./package.json": "./package.json", - "./src/OpacityCheckerboard.js": { - "development": "./src/OpacityCheckerboard.dev.js", - "default": "./src/OpacityCheckerboard.js" - }, - "./src/index.js": { - "development": "./src/index.dev.js", - "default": "./src/index.js" - }, - "./src/opacity-checkerboard.css.js": "./src/opacity-checkerboard.css.js", - "./sp-opacity-checkerboard.js": { - "development": "./sp-opacity-checkerboard.dev.js", - "default": "./sp-opacity-checkerboard.js" - } + "./src/opacity-checkerboard.css.js": "./src/opacity-checkerboard.css.js" }, "scripts": { "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" diff --git a/packages/opacity-checkerboard/sp-opacity-checkerboard.ts b/packages/opacity-checkerboard/sp-opacity-checkerboard.ts deleted file mode 100644 index 7c5b34c665..0000000000 --- a/packages/opacity-checkerboard/sp-opacity-checkerboard.ts +++ /dev/null @@ -1,22 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { OpacityCheckerboard } from './src/OpacityCheckerboard.js'; -import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; - -defineElement('sp-opacity-checkerboard', OpacityCheckerboard); - -declare global { - interface HTMLElementTagNameMap { - 'sp-opacity-checkerboard': OpacityCheckerboard; - } -} diff --git a/packages/opacity-checkerboard/src/OpacityCheckerboard.ts b/packages/opacity-checkerboard/src/OpacityCheckerboard.ts deleted file mode 100644 index 42d7e1d67e..0000000000 --- a/packages/opacity-checkerboard/src/OpacityCheckerboard.ts +++ /dev/null @@ -1,45 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - CSSResultArray, - html, - PropertyValues, - SpectrumElement, - TemplateResult, -} from '@spectrum-web-components/base'; - -import styles from './opacity-checkerboard.css.js'; - -/** - * @element sp-opacity-checkerboard - */ -export class OpacityCheckerboard extends SpectrumElement { - public static override get styles(): CSSResultArray { - return [styles]; - } - - protected override render(): TemplateResult { - return html` -
-
-
- `; - } - - protected override update(changedProperties: PropertyValues): void { - super.update(changedProperties); - } -} diff --git a/packages/opacity-checkerboard/src/index.ts b/packages/opacity-checkerboard/src/index.ts deleted file mode 100644 index 4877cefd41..0000000000 --- a/packages/opacity-checkerboard/src/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -export * from './OpacityCheckerboard.js'; diff --git a/packages/opacity-checkerboard/stories/index.ts b/packages/opacity-checkerboard/stories/index.ts deleted file mode 100644 index a20de49f4b..0000000000 --- a/packages/opacity-checkerboard/stories/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -import { html, TemplateResult } from '@spectrum-web-components/base'; - -import '@spectrum-web-components/opacity-checkerboard/sp-opacity-checkerboard.js'; - -export const OpacityCheckerboardMarkup = ({} = {}): TemplateResult => { - return html` - - `; -}; diff --git a/packages/opacity-checkerboard/stories/opacity-checkerboard.stories.ts b/packages/opacity-checkerboard/stories/opacity-checkerboard.stories.ts deleted file mode 100644 index f332c75fd8..0000000000 --- a/packages/opacity-checkerboard/stories/opacity-checkerboard.stories.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -import { TemplateResult } from '@spectrum-web-components/base'; - -import { OpacityCheckerboardMarkup } from './'; - -import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js'; - -export default { - component: 'sp-opacity-checkerboard', - title: 'Opacity Checkerboard', -}; - -export const Default = (): TemplateResult => OpacityCheckerboardMarkup(); diff --git a/packages/opacity-checkerboard/test/benchmark/basic-test.ts b/packages/opacity-checkerboard/test/benchmark/basic-test.ts deleted file mode 100644 index 96a9eac96c..0000000000 --- a/packages/opacity-checkerboard/test/benchmark/basic-test.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { html } from '@spectrum-web-components/base'; - -import '@spectrum-web-components/opacity-checkerboard/sp-opacity-checkerboard.js'; -import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js'; - -measureFixtureCreation(html` - -`); From 0e68a8b500c45f7e592c879ca0d0709f73414692 Mon Sep 17 00:00:00 2001 From: Venkatesh Josyula Date: Fri, 21 Jul 2023 10:57:43 +0530 Subject: [PATCH 04/12] feat(opacity-checkerboard): converting name to Kabob case --- packages/opacity-checkerboard/src/spectrum-config.js | 2 +- .../src/spectrum-opacity-checkerboard.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/opacity-checkerboard/src/spectrum-config.js b/packages/opacity-checkerboard/src/spectrum-config.js index 42ff9ba007..912d7eb981 100644 --- a/packages/opacity-checkerboard/src/spectrum-config.js +++ b/packages/opacity-checkerboard/src/spectrum-config.js @@ -27,7 +27,7 @@ const config = { components: [ converter.classToClass( 'spectrum-OpacityCheckerboard', - 'opacityCheckerboard' + 'OpacityCheckerboard' ), ], }, diff --git a/packages/opacity-checkerboard/src/spectrum-opacity-checkerboard.css b/packages/opacity-checkerboard/src/spectrum-opacity-checkerboard.css index 5516264570..ebc8f76b3c 100644 --- a/packages/opacity-checkerboard/src/spectrum-opacity-checkerboard.css +++ b/packages/opacity-checkerboard/src/spectrum-opacity-checkerboard.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.opacityCheckerboard { +.OpacityCheckerboard { --spectrum-opacity-checkerboard-dark: var( --spectrum-opacity-checkerboard-square-dark ); @@ -54,7 +54,7 @@ governing permissions and limitations under the License. inline-size: 100%; } @media (forced-colors: active) { - .opacityCheckerboard { + .OpacityCheckerboard { forced-color-adjust: none; } } From 1cc75e1ad1f06674944e126a59eca259fe34549c Mon Sep 17 00:00:00 2001 From: Venkatesh Josyula Date: Thu, 27 Jul 2023 09:28:03 +0530 Subject: [PATCH 05/12] feat(opacity-checkerboard): updating the package version --- packages/opacity-checkerboard/README.md | 4 ++++ packages/opacity-checkerboard/package.json | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/opacity-checkerboard/README.md b/packages/opacity-checkerboard/README.md index 12d1d389d0..85c2c21c7a 100644 --- a/packages/opacity-checkerboard/README.md +++ b/packages/opacity-checkerboard/README.md @@ -5,3 +5,7 @@ This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/opacitycheckerboard). + +Opacity checkerboard is intended to be used within other components, including: + +ColorHandle, ColorSlider, Swatch and Thumbnail diff --git a/packages/opacity-checkerboard/package.json b/packages/opacity-checkerboard/package.json index 19b66e219a..7a6224a53e 100644 --- a/packages/opacity-checkerboard/package.json +++ b/packages/opacity-checkerboard/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-web-components/opacity-checkerboard", - "version": "1.0.0-alpha.0", + "version": "1.0.0", "publishConfig": { "access": "public" }, @@ -43,7 +43,7 @@ ], "dependencies": {}, "devDependencies": { - "@spectrum-css/opacitycheckerboard": "^1.0.0-alpha.0" + "@spectrum-css/opacitycheckerboard": "^1.0.0" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", From ff0d615b23138ef101d2f9436832672165104ab4 Mon Sep 17 00:00:00 2001 From: Venkatesh Josyula Date: Thu, 27 Jul 2023 09:33:01 +0530 Subject: [PATCH 06/12] feat(opacity-checkerboard): rebasing with main --- yarn.lock | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/yarn.lock b/yarn.lock index f8727fd6dd..2423665e93 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5441,6 +5441,11 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.48.tgz#2a1bf781b6845583fdff07a9dcf33159aba85991" integrity sha512-ciX5xKTn6TdxxbQ1K0p7jGjrynIE6VsjGUrbISX07kexPa0E1JSbLdd1max8zqceH6Ik8cSIRC50ENjN5aO+rQ== +"@spectrum-css/opacitycheckerboard@^1.0.0": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/opacitycheckerboard/-/opacitycheckerboard-1.0.1.tgz#a6e47b1c1923a80afc7c3fdf3244e99ea8413a24" + integrity sha512-T1ZmDViKICdSZVwAt0qER0/uOr3eX4vNOdAOLA/tpc2RX+qu731ODwXd9UrdmOy9Y3jdHsTy7hR4CbpyrWEMCQ== + "@spectrum-css/picker@^4.0.22": version "4.0.22" resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-4.0.22.tgz#ecee722cf2f819d40eb5bb77de11cd98ef5c7029" From 5b89da42852cbb3ab11494f396848636940f2cb1 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Wed, 9 Aug 2023 15:48:54 +0530 Subject: [PATCH 07/12] chore: updated documentation --- packages/opacity-checkerboard/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/opacity-checkerboard/README.md b/packages/opacity-checkerboard/README.md index 85c2c21c7a..3531d8816c 100644 --- a/packages/opacity-checkerboard/README.md +++ b/packages/opacity-checkerboard/README.md @@ -1,11 +1,11 @@ -# @spectrum-css/opacitycheckerboard - -> Opacity checkerboard +## Description This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). -See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/opacitycheckerboard). - Opacity checkerboard is intended to be used within other components, including: ColorHandle, ColorSlider, Swatch and Thumbnail + +## Usage + +See the [Opacity Checkerboard Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/opacitycheckerboard). From 0eae799a474dea4f3bf325aba3383f364795c995 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Mon, 14 Aug 2023 19:21:46 +0530 Subject: [PATCH 08/12] chore: added opacity css to other components --- packages/opacity-checkerboard/README.md | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/opacity-checkerboard/README.md b/packages/opacity-checkerboard/README.md index 3531d8816c..c062f6e4e9 100644 --- a/packages/opacity-checkerboard/README.md +++ b/packages/opacity-checkerboard/README.md @@ -8,4 +8,26 @@ ColorHandle, ColorSlider, Swatch and Thumbnail ## Usage -See the [Opacity Checkerboard Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/opacitycheckerboard). +Import the styles from `opacity-checkerboard` css + +``` +import opacityCheckeryBoardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js'; + +``` + +Add it to your component's styles array + +```js + public static override get styles(): CSSResultArray { + return [...styles, opacityCheckeryBoardStyles]; + } + +``` + +Use the `OpacityCheckerboard` class in `render()` method + +``` +
+
+
+``` From a647a7b59c500ab950effb5c9140dd8a2ca9cd54 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Wed, 16 Aug 2023 12:09:52 +0530 Subject: [PATCH 09/12] chore: removed opacity checkerboard from pacakges and added to tools --- .stylelintrc.json | 1 + .../src/spectrum-opacity-checkerboard.css | 60 ------------------- .../opacity-checkerboard/README.md | 14 ++--- .../opacity-checkerboard/exports.json | 0 .../opacity-checkerboard/package.json | 4 +- .../src/opacity-checkerboard.css | 0 .../src/spectrum-config.js | 2 +- .../opacity-checkerboard/tsconfig.json | 5 +- tsconfig-all.json | 2 +- 9 files changed, 10 insertions(+), 78 deletions(-) delete mode 100644 packages/opacity-checkerboard/src/spectrum-opacity-checkerboard.css rename {packages => tools}/opacity-checkerboard/README.md (50%) rename {packages => tools}/opacity-checkerboard/exports.json (100%) rename {packages => tools}/opacity-checkerboard/package.json (94%) rename {packages => tools}/opacity-checkerboard/src/opacity-checkerboard.css (100%) rename {packages => tools}/opacity-checkerboard/src/spectrum-config.js (96%) rename {packages => tools}/opacity-checkerboard/tsconfig.json (66%) diff --git a/.stylelintrc.json b/.stylelintrc.json index 72f57badda..56322d5e40 100755 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -11,6 +11,7 @@ { "files": [ "packages/**/src/spectrum-*.css", + "tools/**/src/spectrum-*.css", "tools/styles/**/*.css" ], "extends": [], diff --git a/packages/opacity-checkerboard/src/spectrum-opacity-checkerboard.css b/packages/opacity-checkerboard/src/spectrum-opacity-checkerboard.css deleted file mode 100644 index ebc8f76b3c..0000000000 --- a/packages/opacity-checkerboard/src/spectrum-opacity-checkerboard.css +++ /dev/null @@ -1,60 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.OpacityCheckerboard { - --spectrum-opacity-checkerboard-dark: var( - --spectrum-opacity-checkerboard-square-dark - ); - --spectrum-opacity-checkerboard-light: var( - --spectrum-opacity-checkerboard-square-light - ); - --spectrum-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size - ); - --spectrum-opacity-checkerboard-position: left top; - background: repeating-conic-gradient( - var( - --mod-opacity-checkerboard-light, - var(--spectrum-opacity-checkerboard-light) - ) - 0 25%, - var( - --mod-opacity-checkerboard-dark, - var(--spectrum-opacity-checkerboard-dark) - ) - 0 50% - ) - var( - --mod-opacity-checkerboard-position, - var(--spectrum-opacity-checkerboard-position) - ) / - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ) - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ); - block-size: 100%; - inline-size: 100%; -} -@media (forced-colors: active) { - .OpacityCheckerboard { - forced-color-adjust: none; - } -} diff --git a/packages/opacity-checkerboard/README.md b/tools/opacity-checkerboard/README.md similarity index 50% rename from packages/opacity-checkerboard/README.md rename to tools/opacity-checkerboard/README.md index c062f6e4e9..58df7c6d79 100644 --- a/packages/opacity-checkerboard/README.md +++ b/tools/opacity-checkerboard/README.md @@ -1,18 +1,13 @@ ## Description -This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). - -Opacity checkerboard is intended to be used within other components, including: - -ColorHandle, ColorSlider, Swatch and Thumbnail +The `opacity-checkerboard` class is used to highlight opacity. Leverage these styles in your component as outlined below to unify you application's visuals with those delivered by various Spectrum Web Components. ## Usage Import the styles from `opacity-checkerboard` css ``` -import opacityCheckeryBoardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js'; - +import opacityCheckeryBoardStyles from '@spectrum-web-components/tools/opacity-checkerboard/src/opacity-checkerboard.css.js'; ``` Add it to your component's styles array @@ -21,13 +16,12 @@ Add it to your component's styles array public static override get styles(): CSSResultArray { return [...styles, opacityCheckeryBoardStyles]; } - ``` -Use the `OpacityCheckerboard` class in `render()` method +Use the `opacity-checkerboard` class in `render()` method ```
-
+
``` diff --git a/packages/opacity-checkerboard/exports.json b/tools/opacity-checkerboard/exports.json similarity index 100% rename from packages/opacity-checkerboard/exports.json rename to tools/opacity-checkerboard/exports.json diff --git a/packages/opacity-checkerboard/package.json b/tools/opacity-checkerboard/package.json similarity index 94% rename from packages/opacity-checkerboard/package.json rename to tools/opacity-checkerboard/package.json index 7a6224a53e..d5ebb684b4 100644 --- a/packages/opacity-checkerboard/package.json +++ b/tools/opacity-checkerboard/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-web-components/opacity-checkerboard", - "version": "1.0.0", + "version": "0.0.1", "publishConfig": { "access": "public" }, @@ -9,7 +9,7 @@ "repository": { "type": "git", "url": "https://github.com/adobe/spectrum-web-components.git", - "directory": "packages/opacity-checkerboard" + "directory": "tools/opacity-checkerboard" }, "author": "", "homepage": "https://opensource.adobe.com/spectrum-web-components/components/opacity-checkerboard", diff --git a/packages/opacity-checkerboard/src/opacity-checkerboard.css b/tools/opacity-checkerboard/src/opacity-checkerboard.css similarity index 100% rename from packages/opacity-checkerboard/src/opacity-checkerboard.css rename to tools/opacity-checkerboard/src/opacity-checkerboard.css diff --git a/packages/opacity-checkerboard/src/spectrum-config.js b/tools/opacity-checkerboard/src/spectrum-config.js similarity index 96% rename from packages/opacity-checkerboard/src/spectrum-config.js rename to tools/opacity-checkerboard/src/spectrum-config.js index 912d7eb981..c2f574a6bb 100644 --- a/packages/opacity-checkerboard/src/spectrum-config.js +++ b/tools/opacity-checkerboard/src/spectrum-config.js @@ -27,7 +27,7 @@ const config = { components: [ converter.classToClass( 'spectrum-OpacityCheckerboard', - 'OpacityCheckerboard' + 'opacity-checkerboard' ), ], }, diff --git a/packages/opacity-checkerboard/tsconfig.json b/tools/opacity-checkerboard/tsconfig.json similarity index 66% rename from packages/opacity-checkerboard/tsconfig.json rename to tools/opacity-checkerboard/tsconfig.json index f82682bd29..14a6b1df9b 100644 --- a/packages/opacity-checkerboard/tsconfig.json +++ b/tools/opacity-checkerboard/tsconfig.json @@ -6,8 +6,5 @@ }, "include": ["*.ts", "src/*.ts"], "exclude": ["test/*.ts", "stories/*.ts"], - "references": [ - { "path": "../../tools/base" }, - { "path": "../../tools/shared" } - ] + "references": [{ "path": "../base" }, { "path": "../shared" }] } diff --git a/tsconfig-all.json b/tsconfig-all.json index 012a31c977..fc9a73a739 100644 --- a/tsconfig-all.json +++ b/tsconfig-all.json @@ -54,7 +54,6 @@ { "path": "packages/meter" }, { "path": "packages/modal" }, { "path": "packages/number-field" }, - { "path": "packages/opacity-checkerboard" }, { "path": "packages/overlay" }, { "path": "packages/picker" }, { "path": "packages/picker-button" }, @@ -81,6 +80,7 @@ { "path": "packages/top-nav" }, { "path": "packages/tray" }, { "path": "packages/underlay" }, + { "path": "tools/opacity-checkerboard" }, { "path": "tools/base" }, { "path": "tools/bundle" }, { "path": "tools/grid" }, From c8130ece30f353f3afbdcdca4bb98e4d65d59249 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Wed, 16 Aug 2023 13:30:35 +0530 Subject: [PATCH 10/12] chore: outPackage update --- tools/opacity-checkerboard/src/spectrum-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/opacity-checkerboard/src/spectrum-config.js b/tools/opacity-checkerboard/src/spectrum-config.js index c2f574a6bb..3f2e8f1d1a 100644 --- a/tools/opacity-checkerboard/src/spectrum-config.js +++ b/tools/opacity-checkerboard/src/spectrum-config.js @@ -22,7 +22,7 @@ const config = { conversions: [ { inPackage: '@spectrum-css/opacitycheckerboard', - outPackage: 'opacity-checkerboard', + outPackage: ['tools', 'opacity-checkerboard'], fileName: 'opacity-checkerboard', components: [ converter.classToClass( From 31ebe64e3ca0c14f819ce893a9f0b5688d698a45 Mon Sep 17 00:00:00 2001 From: Rajdeep Chandra Date: Wed, 16 Aug 2023 13:42:52 +0530 Subject: [PATCH 11/12] chore: updated readme --- tools/opacity-checkerboard/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tools/opacity-checkerboard/README.md b/tools/opacity-checkerboard/README.md index 58df7c6d79..03238a71be 100644 --- a/tools/opacity-checkerboard/README.md +++ b/tools/opacity-checkerboard/README.md @@ -13,9 +13,9 @@ import opacityCheckeryBoardStyles from '@spectrum-web-components/tools/opacity-c Add it to your component's styles array ```js - public static override get styles(): CSSResultArray { - return [...styles, opacityCheckeryBoardStyles]; - } +public static override get styles(): CSSResultArray { + return [...styles, opacityCheckeryBoardStyles]; +} ``` Use the `opacity-checkerboard` class in `render()` method From abd9f07a895e71ba8d79ecb4490eeac2bb9b6c39 Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Wed, 16 Aug 2023 16:36:39 -0400 Subject: [PATCH 12/12] docs: ensure opacity checkerboard demo --- .../documentation/src/components/styles.css | 1 + tools/opacity-checkerboard/README.md | 9 +-- .../src/spectrum-opacity-checkerboard.css | 60 +++++++++++++++++++ yarn.lock | 6 +- 4 files changed, 69 insertions(+), 7 deletions(-) create mode 100644 tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css diff --git a/projects/documentation/src/components/styles.css b/projects/documentation/src/components/styles.css index 1171b02f72..d423653817 100644 --- a/projects/documentation/src/components/styles.css +++ b/projects/documentation/src/components/styles.css @@ -15,6 +15,7 @@ governing permissions and limitations under the License. @import '@spectrum-web-components/styles/tokens/spectrum/global-vars.css'; @import '@spectrum-web-components/styles/tokens/spectrum/custom-vars.css'; @import '@spectrum-web-components/styles/typography.css'; +@import '@spectrum-web-components/opacity-checkerboard/src/spectrum-opacity-checkerboard.css'; @import '@spectrum-web-components/styles/scale-medium.css' screen and (min-width: 701px) and (min-height: 701px), diff --git a/tools/opacity-checkerboard/README.md b/tools/opacity-checkerboard/README.md index 03238a71be..e5cb65c2fb 100644 --- a/tools/opacity-checkerboard/README.md +++ b/tools/opacity-checkerboard/README.md @@ -20,8 +20,9 @@ public static override get styles(): CSSResultArray { Use the `opacity-checkerboard` class in `render()` method -``` -
-
-
+```html-live demo +
``` diff --git a/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css b/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css new file mode 100644 index 0000000000..c967083f7c --- /dev/null +++ b/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css @@ -0,0 +1,60 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.opacity-checkerboard { + --spectrum-opacity-checkerboard-dark: var( + --spectrum-opacity-checkerboard-square-dark + ); + --spectrum-opacity-checkerboard-light: var( + --spectrum-opacity-checkerboard-square-light + ); + --spectrum-opacity-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size + ); + --spectrum-opacity-checkerboard-position: left top; + background: repeating-conic-gradient( + var( + --mod-opacity-checkerboard-light, + var(--spectrum-opacity-checkerboard-light) + ) + 0 25%, + var( + --mod-opacity-checkerboard-dark, + var(--spectrum-opacity-checkerboard-dark) + ) + 0 50% + ) + var( + --mod-opacity-checkerboard-position, + var(--spectrum-opacity-checkerboard-position) + ) / + calc( + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-size) + ) * 2 + ) + calc( + var( + --mod-opacity-checkerboard-size, + var(--spectrum-opacity-checkerboard-size) + ) * 2 + ); + block-size: 100%; + inline-size: 100%; +} +@media (forced-colors: active) { + .opacity-checkerboard { + forced-color-adjust: none; + } +} diff --git a/yarn.lock b/yarn.lock index 2423665e93..07c74ce66f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5442,9 +5442,9 @@ integrity sha512-ciX5xKTn6TdxxbQ1K0p7jGjrynIE6VsjGUrbISX07kexPa0E1JSbLdd1max8zqceH6Ik8cSIRC50ENjN5aO+rQ== "@spectrum-css/opacitycheckerboard@^1.0.0": - version "1.0.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/opacitycheckerboard/-/opacitycheckerboard-1.0.1.tgz#a6e47b1c1923a80afc7c3fdf3244e99ea8413a24" - integrity sha512-T1ZmDViKICdSZVwAt0qER0/uOr3eX4vNOdAOLA/tpc2RX+qu731ODwXd9UrdmOy9Y3jdHsTy7hR4CbpyrWEMCQ== + version "1.0.4" + resolved "https://registry.yarnpkg.com/@spectrum-css/opacitycheckerboard/-/opacitycheckerboard-1.0.4.tgz#d0341d609419e091e7597cdfe42b4f0691199343" + integrity sha512-SRUwZqsSWHol83cvcK5l0aGrQLlHG/YGDQOgfsHZb64RwG4zTDsaQBAmGSNtaZTU4foDwrIKSsntfI3fum9oXA== "@spectrum-css/picker@^4.0.22": version "4.0.22"