feat(opacity-checkerboard): adding new component

.stylelintrc.json

@@ -11,6 +11,7 @@
         {
             "files": [
                 "packages/**/src/spectrum-*.css",
+                "tools/**/src/spectrum-*.css",
                 "tools/styles/**/*.css"
             ],
             "extends": [],

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),

tools/opacity-checkerboard/README.md

@@ -0,0 +1,28 @@
+## Description
+
+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/tools/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 `opacity-checkerboard` class in `render()` method
+
+```html-live demo
+<div
+    class="opacity-checkerboard"
+    style="inline-size: 100px; block-size: 100px;"
+></div>
+```

tools/opacity-checkerboard/exports.json

@@ -0,0 +1,4 @@
+{
+    ".": "./src/opacity-checkerboard.css.js",
+    "./src/*": "./src/*"
+}

tools/opacity-checkerboard/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "@spectrum-web-components/opacity-checkerboard",
+    "version": "0.0.1",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "tools/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": {
+        ".": "./src/opacity-checkerboard.css.js",
+        "./package.json": "./package.json",
+        "./src/opacity-checkerboard.css.js": "./src/opacity-checkerboard.css.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"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ]
+}

tools/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';

tools/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: ['tools', 'opacity-checkerboard'],
+            fileName: 'opacity-checkerboard',
+            components: [
+                converter.classToClass(
+                    'spectrum-OpacityCheckerboard',
+                    'opacity-checkerboard'
+                ),
+            ],
+        },
+    ],
+};
+
+export default config;

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;
+    }
+}

tools/opacity-checkerboard/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "composite": true,
+        "rootDir": "./"
+    },
+    "include": ["*.ts", "src/*.ts"],
+    "exclude": ["test/*.ts", "stories/*.ts"],
+    "references": [{ "path": "../base" }, { "path": "../shared" }]
+}

tsconfig-all.json

@@ -80,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" },

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.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"
   resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-4.0.22.tgz#ecee722cf2f819d40eb5bb77de11cd98ef5c7029"