From 54849b2c4f68a8d11f7b54c552bf161db1d2ff73 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Fri, 8 Dec 2023 11:58:32 -0500 Subject: [PATCH 01/21] feat!: spectrum 2 BREAKING CHANGE: Merges Express and Spectrum to create Spectrum 2 --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index fe0775d32e..92d5b5b2a6 100644 --- a/README.md +++ b/README.md @@ -395,3 +395,7 @@ Occasionally, you may want to run a prerelease for an individual package and ski - You **must** run a build **before** continuing with the prerelease. An npm task for cleaning, building, and beta publishing is available, and it can be run via the following command: `yarn release:beta-from-package`. This command will perform a full `clean` (via the `clean` task), a full `build` (via the `build` task), and will attempt to publish the package (via `lerna publish --conventional-prerelease --preid beta --pre-dist-tag beta --no-private`). - Depending on the severity of your change(s), and before publishing to npm, Lerna should show a preview of the affected package version number that looks something like: `@spectrum-css/switch: 1.0.23 => 2.0.0-beta.0`. Additionally, at this time, Lerna will ask if you would like to continue with publishing the changes or cancel. - Selecting `y` to publish will publish the affected package(s) to npm. + +## Spectrum 2 + +More information coming soon! From 5ec70afc9280b81659f92097a0531f6b96934fa4 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Mon, 11 Dec 2023 15:38:11 -0500 Subject: [PATCH 02/21] feat(tokens): use 13.0.0-beta.5 Includes new color values for Spectrum 2 --- tokens/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/tokens/package.json b/tokens/package.json index 19bec0fb7c..b376fe3fbf 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -27,7 +27,7 @@ "format:results": "prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --loglevel silent --write dist/" }, "devDependencies": { - "@adobe/spectrum-tokens": "12.23.1", + "@adobe/spectrum-tokens": "13.0.0-beta.5", "concat-cli": "^4.0.0", "npm-run-all": "^4.1.5", "postcss": "^8.4.21", diff --git a/yarn.lock b/yarn.lock index bce0efee82..baf5fff9bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -61,10 +61,10 @@ resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.5.4.tgz#0e09ff519c36139176c3ba3ce617a995c9032f67" integrity sha512-sZ19YOLGw5xTZzCEkVXPjf53lXVzo063KmDTJjpSjy/XLVsF+RaX0b436SfSM4hsIUZ7n27+UsbOvzFaFjcYXw== -"@adobe/spectrum-tokens@12.23.1": - version "12.23.1" - resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens/-/spectrum-tokens-12.23.1.tgz#60bce03365850508bc3d36aa5dfc9b77533f0008" - integrity sha512-PQnZ7KRsOA7M8AsEE5ajEmfSjnmo1/1tiUymFPFcGrWnV0jNYO/6n16LA3925KJo/+IbmNrYNpdHhpBGpXjhcQ== +"@adobe/spectrum-tokens@13.0.0-beta.5": + version "13.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens/-/spectrum-tokens-13.0.0-beta.5.tgz#a84cfe1250adadb3985a15a0ebabdbcc870db2dc" + integrity sha512-u2cqkNcszFw4IHWnvOSfv7++Wt67wHL7Sj1QmUZCpBSp7fLGdjixiGf/eLXEwXbur65qNcFOsI3yC5pS9Ns4/Q== "@ampproject/remapping@^2.2.0": version "2.2.1" From bff70aab07adc9fb429975a20f77e6d9de0cbc31 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Mon, 11 Dec 2023 16:18:37 -0500 Subject: [PATCH 03/21] fix(stepper): no longer touches InfieldButton classes (#2300) * fix(stepper): no longer touches InfieldButton classes * fix(stepper): button size + space match infieldbutton spec --- components/infieldbutton/index.css | 15 +++++++++++++- components/infieldbutton/metadata/mods.md | 3 +++ components/stepper/index.css | 25 ++++++----------------- components/stepper/metadata/mods.md | 2 +- components/stepper/themes/express.css | 1 + components/stepper/themes/spectrum.css | 5 +++-- 6 files changed, 28 insertions(+), 23 deletions(-) diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index bccacc5334..aebc2d4c4a 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -44,6 +44,8 @@ governing permissions and limitations under the License. --spectrum-neutral-content-color-key-focus ); + --spectrum-infield-button-fill-justify-content: center; + &:disabled { --mod-infield-button-background-color: var( --mod-infield-button-background-color-disabled, @@ -327,7 +329,10 @@ governing permissions and limitations under the License. /* center icon */ display: flex; align-items: center; - justify-content: center; + justify-content: var( + --mod-infield-button-fill-justify-content, + var(--spectrum-infield-button-fill-justify-content) + ); transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out; } @@ -390,6 +395,14 @@ governing permissions and limitations under the License. --mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset) ); + border-end-end-radius: var( + --mod-infield-button-stacked-bottom-border-radius-end-end, + var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)) + ); + border-block-end-width: var( + --mod-infield-button-stacked-bottom-border-block-end-width, + var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)) + ); } } diff --git a/components/infieldbutton/metadata/mods.md b/components/infieldbutton/metadata/mods.md index 62953aedf5..f76ca098e6 100644 --- a/components/infieldbutton/metadata/mods.md +++ b/components/infieldbutton/metadata/mods.md @@ -21,6 +21,7 @@ | `--mod-infield-button-border-width` | | `--mod-infield-button-border-width-quiet` | | `--mod-infield-button-edge-to-fill` | +| `--mod-infield-button-fill-justify-content` | | `--mod-infield-button-fill-padding` | | `--mod-infield-button-height` | | `--mod-infield-button-icon-color` | @@ -33,6 +34,8 @@ | `--mod-infield-button-icon-color-key-focus-disabled` | | `--mod-infield-button-inner-edge-to-fill` | | `--mod-infield-button-stacked-border-radius-reset` | +| `--mod-infield-button-stacked-bottom-border-block-end-width` | +| `--mod-infield-button-stacked-bottom-border-radius-end-end` | | `--mod-infield-button-stacked-bottom-border-radius-end-start` | | `--mod-infield-button-stacked-fill-padding-inline` | | `--mod-infield-button-stacked-fill-padding-inner` | diff --git a/components/stepper/index.css b/components/stepper/index.css index cfcf9dde55..93eedf16b3 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -36,7 +36,7 @@ governing permissions and limitations under the License. /*** MODS for sub components ***/ --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-buttons-border-color, var(--spectrum-stepper-buttons-border-color))); - --mod-infield-button-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + --mod-infield-button-border-width: var(--mod-stepper-button-border-width, var(--spectrum-stepper-button-border-width)); --mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); &.spectrum-Stepper--sizeS { @@ -226,19 +226,14 @@ governing permissions and limitations under the License. } .spectrum-Stepper-button { + --mod-infield-button-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + --mod-infield-button-stacked-bottom-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + --mod-infield-button-stacked-bottom-border-radius-end-end: 0; + --mod-infield-button-stacked-bottom-border-radius-end-start: 0; + --mod-infield-button-fill-justify-content: flex-end; padding: 0; } - .spectrum-Stepper-button.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill { - border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - border-end-end-radius: 0; - border-end-start-radius: 0; - } - - .spectrum-Stepper-button .spectrum-InfieldButton-fill { - justify-content: flex-end; - } - .spectrum-Stepper-input, .spectrum-Stepper-buttons { background-color: transparent; @@ -307,14 +302,6 @@ governing permissions and limitations under the License. transition: border-color var(--mod-stepper-animation-duration, var(--spectrum-stepper-animation-duration)) ease-in-out; } -.spectrum-Stepper-button.spectrum-InfieldButton--top { - padding-block-start: calc(var(--mod-stepper-button-padding, var(--spectrum-stepper-button-padding)) - var(--mod-stepper-border-width, var(--spectrum-stepper-border-width))); -} - -.spectrum-Stepper-button.spectrum-InfieldButton--bottom { - padding-block-end: calc(var(--mod-stepper-button-padding, var(--spectrum-stepper-button-padding)) - var(--mod-stepper-border-width, var(--spectrum-stepper-border-width))); -} - /* hide-stepper */ .spectrum-Stepper.hide-stepper .spectrum-Stepper-input { border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); diff --git a/components/stepper/metadata/mods.md b/components/stepper/metadata/mods.md index ce2df8d418..aa81c18f4f 100644 --- a/components/stepper/metadata/mods.md +++ b/components/stepper/metadata/mods.md @@ -15,7 +15,7 @@ | `--mod-stepper-border-width` | | `--mod-stepper-button-background-color-focus` | | `--mod-stepper-button-background-color-keyboard-focus` | -| `--mod-stepper-button-padding` | +| `--mod-stepper-button-border-width` | | `--mod-stepper-button-width` | | `--mod-stepper-button-width-quiet` | | `--mod-stepper-buttons-background-color` | diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css index c500033395..f5b575d243 100644 --- a/components/stepper/themes/express.css +++ b/components/stepper/themes/express.css @@ -23,6 +23,7 @@ governing permissions and limitations under the License. --spectrum-stepper-buttons-border-color-keyboard-focus: transparent; --spectrum-stepper-button-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); + --spectrum-stepper-button-border-width: 0; --spectrum-stepper-border-color: var(--spectrum-gray-400); --spectrum-stepper-border-color-hover: var(--spectrum-gray-500); diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css index b92c4a3ad9..a59b448068 100644 --- a/components/stepper/themes/spectrum.css +++ b/components/stepper/themes/spectrum.css @@ -22,6 +22,9 @@ governing permissions and limitations under the License. --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800); --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); + --spectrum-stepper-button-border-radius-reset: 0px; + --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); + --spectrum-stepper-border-color: var(--spectrum-gray-500); --spectrum-stepper-border-color-hover: var(--spectrum-gray-600); --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); @@ -33,8 +36,6 @@ governing permissions and limitations under the License. --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); - --spectrum-stepper-button-border-radius-reset: 0px; - --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300); --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); } From 5e15717e70aff25fe5ea80b76447b2a02467343f Mon Sep 17 00:00:00 2001 From: Jenn Diaz Date: Tue, 7 Nov 2023 16:48:50 -0700 Subject: [PATCH 04/21] feat(backgroundlayers): add as component --- components/backgroundlayers/README.md | 7 ++++ components/backgroundlayers/gulpfile.js | 1 + components/backgroundlayers/index.css | 36 +++++++++++++++++ .../metadata/backgroundlayers.yml | 18 +++++++++ components/backgroundlayers/metadata/mods.md | 3 ++ components/backgroundlayers/package.json | 35 +++++++++++++++++ .../stories/backgroundlayers.stories.js | 39 +++++++++++++++++++ .../backgroundlayers/stories/template.js | 24 ++++++++++++ .../backgroundlayers/themes/express.css | 13 +++++++ .../backgroundlayers/themes/spectrum.css | 13 +++++++ 10 files changed, 189 insertions(+) create mode 100644 components/backgroundlayers/README.md create mode 100644 components/backgroundlayers/gulpfile.js create mode 100644 components/backgroundlayers/index.css create mode 100644 components/backgroundlayers/metadata/backgroundlayers.yml create mode 100644 components/backgroundlayers/metadata/mods.md create mode 100644 components/backgroundlayers/package.json create mode 100644 components/backgroundlayers/stories/backgroundlayers.stories.js create mode 100644 components/backgroundlayers/stories/template.js create mode 100644 components/backgroundlayers/themes/express.css create mode 100644 components/backgroundlayers/themes/spectrum.css diff --git a/components/backgroundlayers/README.md b/components/backgroundlayers/README.md new file mode 100644 index 0000000000..de6ed9d862 --- /dev/null +++ b/components/backgroundlayers/README.md @@ -0,0 +1,7 @@ +# @spectrum-css/backgroundlayers + +> The Spectrum CSS background layers component + +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/backgroundlayers). diff --git a/components/backgroundlayers/gulpfile.js b/components/backgroundlayers/gulpfile.js new file mode 100644 index 0000000000..f13104999f --- /dev/null +++ b/components/backgroundlayers/gulpfile.js @@ -0,0 +1 @@ +module.exports = require('@spectrum-css/component-builder-simple'); diff --git a/components/backgroundlayers/index.css b/components/backgroundlayers/index.css new file mode 100644 index 0000000000..b49bce9392 --- /dev/null +++ b/components/backgroundlayers/index.css @@ -0,0 +1,36 @@ +/*! +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. +*/ + +.spectrum-BackgroundLayers { + --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); +} + +.spectrum-BackgroundLayers--elevated { + --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); +} +.spectrum-BackgroundLayers--layer2 { + --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); +} +.spectrum-BackgroundLayers--layer1 { + --spectum-backgroundlayers-background-color: var(--spectrum-gray-50); +} +.spectrum-BackgroundLayers--pasteboard { + --spectum-backgroundlayers-background-color: var(--spectrum-gray-100); +} +.spectrum-BackgroundLayers--base { + --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); + border: 2px solid gray; +} + +.spectrum-BackgroundLayers { + background-color: var(--spectum-backgroundlayers-background-color); +} \ No newline at end of file diff --git a/components/backgroundlayers/metadata/backgroundlayers.yml b/components/backgroundlayers/metadata/backgroundlayers.yml new file mode 100644 index 0000000000..bec2480569 --- /dev/null +++ b/components/backgroundlayers/metadata/backgroundlayers.yml @@ -0,0 +1,18 @@ +name: Background layers +status: Verified +SpectrumSiteSlug: https://spectrum.adobe.com/page/background-layers/ +examples: + - id: backgroundlayers-browsing + name: Browsing Contexts + markup: | +
+
+
+
+ - id: backgroundlayers-editting + name: Editting Contexts + markup: | +
+
+
+
diff --git a/components/backgroundlayers/metadata/mods.md b/components/backgroundlayers/metadata/mods.md new file mode 100644 index 0000000000..d6752c31cd --- /dev/null +++ b/components/backgroundlayers/metadata/mods.md @@ -0,0 +1,3 @@ +| Modifiable Custom Properties | +| ---------------------------------------------- | +| `--mod-backgroundlayers-content-color-default` | diff --git a/components/backgroundlayers/package.json b/components/backgroundlayers/package.json new file mode 100644 index 0000000000..d335435f29 --- /dev/null +++ b/components/backgroundlayers/package.json @@ -0,0 +1,35 @@ +{ + "name": "@spectrum-css/backgroundlayers", + "version": "1.0.0-alpha.0", + "description": "The Spectrum CSS backgroundlayers component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/backgroundlayers" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index-vars.css", + "scripts": { + "build": "gulp", + "clean": "rimraf dist", + "test": "nx test:scope @spectrum-css/preview backgroundlayers" + }, + "peerDependencies": { + "@spectrum-css/tokens": ">=12" + }, + "devDependencies": { + "@spectrum-css/component-builder-simple": "^2.0.17", + "@spectrum-css/tokens": "^12.0.0", + "gulp": "^4.0.0", + "nx": "^17.0.3", + "rimraf": "^5.0.1" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/components/backgroundlayers/stories/backgroundlayers.stories.js b/components/backgroundlayers/stories/backgroundlayers.stories.js new file mode 100644 index 0000000000..3c7c49d91b --- /dev/null +++ b/components/backgroundlayers/stories/backgroundlayers.stories.js @@ -0,0 +1,39 @@ +// Import the component markup template +import { Template } from "./template"; + +// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export +export default { + title: "Components/background layers", + description: "The background layers component is...", + component: "BackgroundLayers", + argTypes: { + size: { + name: "Size", + type: { name: "string", required: true }, + defaultValue: "m", + table: { + type: { summary: "string" }, + category: "Component", + defaultValue: { summary: "m" } + }, + options: ["s", "m", "l", "xl"], + control: "select" + }, + }, + // More on args: https://storybook.js.org/docs/web-components/writing-stories/args + args: { + rootClass: "spectrum-BackgroundLayers", + size: "m", + }, + parameters: { + actions: { + handles: [] + }, + status: { + type: process.env.MIGRATED_PACKAGES.includes('backgroundlayers') ? 'migrated' : undefined + } + } +}; + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/components/backgroundlayers/stories/template.js b/components/backgroundlayers/stories/template.js new file mode 100644 index 0000000000..838e500b33 --- /dev/null +++ b/components/backgroundlayers/stories/template.js @@ -0,0 +1,24 @@ +import { html } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; + +import "../index.css"; + +// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args +export const Template = ({ + rootClass = "spectrum-BackgroundLayers", + size, + id, + customClasses = [], + ...globals +}) => { + return html` +
({ ...a, [c]: true }), {}), + })} id=${ifDefined(id)}> + +
+ `; +} diff --git a/components/backgroundlayers/themes/express.css b/components/backgroundlayers/themes/express.css new file mode 100644 index 0000000000..2899a53a73 --- /dev/null +++ b/components/backgroundlayers/themes/express.css @@ -0,0 +1,13 @@ +/*! +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. +*/ + +@container (--system: express) {} diff --git a/components/backgroundlayers/themes/spectrum.css b/components/backgroundlayers/themes/spectrum.css new file mode 100644 index 0000000000..d963d64ba6 --- /dev/null +++ b/components/backgroundlayers/themes/spectrum.css @@ -0,0 +1,13 @@ +/*! +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. +*/ + +@container (--system: spectrum) {} From 2e4abb09bd1398995724cc1efeef720d6e0c1467 Mon Sep 17 00:00:00 2001 From: Jenn Diaz Date: Tue, 7 Nov 2023 17:26:39 -0700 Subject: [PATCH 05/21] feat(backroundlayers): display each layer --- components/backgroundlayers/index.css | 9 +++++++- .../metadata/backgroundlayers.yml | 22 ++++++++++++++----- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/components/backgroundlayers/index.css b/components/backgroundlayers/index.css index b49bce9392..16d9805e69 100644 --- a/components/backgroundlayers/index.css +++ b/components/backgroundlayers/index.css @@ -12,10 +12,16 @@ governing permissions and limitations under the License. .spectrum-BackgroundLayers { --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); + --spectrum-backgroundlayers-drop-shadow: } .spectrum-BackgroundLayers--elevated { --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); + --spectrum-backgroundlayers-shadow-horizontal: 0; + --spectrum-backgroundlayers-shadow-vertical: 0; + --spectrum-backgroundlayers-shadow-blur: 5px; + --spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-200); + } .spectrum-BackgroundLayers--layer2 { --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); @@ -28,9 +34,10 @@ governing permissions and limitations under the License. } .spectrum-BackgroundLayers--base { --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); - border: 2px solid gray; + border: 2px solid rgba(180, 180, 180, 0.25); } .spectrum-BackgroundLayers { background-color: var(--spectum-backgroundlayers-background-color); + filter: drop-shadow(var(--spectrum-backgroundlayers-shadow-horizontal) var(--spectrum-backgroundlayers-shadow-vertical) var(--spectrum-backgroundlayers-shadow-blur) var(--spectrum-backgroundlayers-shadow-color)); } \ No newline at end of file diff --git a/components/backgroundlayers/metadata/backgroundlayers.yml b/components/backgroundlayers/metadata/backgroundlayers.yml index bec2480569..a1228b016c 100644 --- a/components/backgroundlayers/metadata/backgroundlayers.yml +++ b/components/backgroundlayers/metadata/backgroundlayers.yml @@ -5,14 +5,24 @@ examples: - id: backgroundlayers-browsing name: Browsing Contexts markup: | -
-
-
+
+
+
+
+
+
+
+
+
- id: backgroundlayers-editting name: Editting Contexts markup: | -
-
-
+
+
+
+
+
+
+
From e06114491eba1503cdaef9b0ea202c70c4650dd2 Mon Sep 17 00:00:00 2001 From: Jenn Diaz Date: Tue, 7 Nov 2023 17:32:25 -0700 Subject: [PATCH 06/21] feat(backgroundlayers): adds dark values --- components/backgroundlayers/index.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/components/backgroundlayers/index.css b/components/backgroundlayers/index.css index 16d9805e69..bc36279027 100644 --- a/components/backgroundlayers/index.css +++ b/components/backgroundlayers/index.css @@ -21,16 +21,25 @@ governing permissions and limitations under the License. --spectrum-backgroundlayers-shadow-vertical: 0; --spectrum-backgroundlayers-shadow-blur: 5px; --spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-200); - + .spectrum--dark & { + --spectum-backgroundlayers-background-color: var(--spectrum-gray-75); + --spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100); + } } .spectrum-BackgroundLayers--layer2 { --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); + .spectrum--dark & { + --spectum-backgroundlayers-background-color: var(--spectrum-gray-75); + } } .spectrum-BackgroundLayers--layer1 { --spectum-backgroundlayers-background-color: var(--spectrum-gray-50); } .spectrum-BackgroundLayers--pasteboard { --spectum-backgroundlayers-background-color: var(--spectrum-gray-100); + .spectrum--dark & { + --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); + } } .spectrum-BackgroundLayers--base { --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); From 7f14e4cc7586c321f7b514a929083cad7e6ca8d8 Mon Sep 17 00:00:00 2001 From: Jenn Diaz Date: Wed, 8 Nov 2023 10:58:27 -0700 Subject: [PATCH 07/21] feat(backgroundlayers): add to storybook --- .../stories/backgroundlayers.stories.js | 69 +++++++++++++++---- .../backgroundlayers/stories/template.js | 12 ++-- 2 files changed, 61 insertions(+), 20 deletions(-) diff --git a/components/backgroundlayers/stories/backgroundlayers.stories.js b/components/backgroundlayers/stories/backgroundlayers.stories.js index 3c7c49d91b..ea7e5e914f 100644 --- a/components/backgroundlayers/stories/backgroundlayers.stories.js +++ b/components/backgroundlayers/stories/backgroundlayers.stories.js @@ -1,29 +1,26 @@ -// Import the component markup template import { Template } from "./template"; +import { html } from 'lit'; -// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export export default { - title: "Components/background layers", - description: "The background layers component is...", + title: "Elements/Background layers", + description: "The background layers is a series of classes used to style background layers.", component: "BackgroundLayers", argTypes: { - size: { - name: "Size", + context: { + name: "Context", type: { name: "string", required: true }, - defaultValue: "m", + defaultValue: "Browsing", table: { type: { summary: "string" }, category: "Component", - defaultValue: { summary: "m" } + defaultValue: { summary: "browsing" } }, - options: ["s", "m", "l", "xl"], + options: ["browsing", "editing"], control: "select" }, }, - // More on args: https://storybook.js.org/docs/web-components/writing-stories/args args: { rootClass: "spectrum-BackgroundLayers", - size: "m", }, parameters: { actions: { @@ -35,5 +32,51 @@ export default { } }; -export const Default = Template.bind({}); -Default.args = {}; +const EditingContext = ({ +}) => { + return html` +
+ ${Template({ + style: "z-index: 4;", + layer: 'elevated', + })} + ${Template({ + style: "z-index: 3; inset-inline-start: 15px; inset-block-start: 15px;", + layer: 'layer2', + })} + ${Template({ + style: "z-index: 2; inset-inline-start: 25px; inset-block-start: 25px;", + layer: 'layer1', + })} + ${Template({ + style: "z-index: 1; inset-inline-start: 35px; inset-block-start: 35px;", + layer: "pasteboard", + })} +
+ `; +}; + +const BrowsingContext = ({ +}) => { + return html` +
+ ${Template({ + style: "z-index: 3;", + layer: 'elevated', + })} + ${Template({ + style: "z-index: 2; inset-inline-start: 15px; inset-block-start: 15px;", + layer: 'layer1', + })} + ${Template({ + style: "z-index: 1; inset-inline-start: 25px; inset-block-start: 25px;", + layer: "base", + })} +
+ `; +}; +export const Editing = EditingContext.bind({}); +Editing.args = {}; + +export const Browsing = BrowsingContext.bind({}); +Browsing.args = {}; diff --git a/components/backgroundlayers/stories/template.js b/components/backgroundlayers/stories/template.js index 838e500b33..05687d0c52 100644 --- a/components/backgroundlayers/stories/template.js +++ b/components/backgroundlayers/stories/template.js @@ -1,24 +1,22 @@ import { html } from 'lit'; import { classMap } from 'lit/directives/class-map.js'; -import { ifDefined } from 'lit/directives/if-defined.js'; import "../index.css"; -// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args export const Template = ({ rootClass = "spectrum-BackgroundLayers", - size, + style, + layer, id, customClasses = [], - ...globals }) => { return html`
({ ...a, [c]: true }), {}), - })} id=${ifDefined(id)}> - + })} + style="${style} inline-size: 100px; block-size: 100px; border-radius: 10px; position: absolute;">
`; } From 55ac83f2d488898e52a192d9e6bb4d7978e30a1b Mon Sep 17 00:00:00 2001 From: Jenn Diaz Date: Wed, 8 Nov 2023 15:41:12 -0700 Subject: [PATCH 08/21] refactor(backgroundlayers): cleans up storybook --- .../stories/backgroundlayers.stories.js | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/components/backgroundlayers/stories/backgroundlayers.stories.js b/components/backgroundlayers/stories/backgroundlayers.stories.js index ea7e5e914f..629cbed041 100644 --- a/components/backgroundlayers/stories/backgroundlayers.stories.js +++ b/components/backgroundlayers/stories/backgroundlayers.stories.js @@ -5,20 +5,7 @@ export default { title: "Elements/Background layers", description: "The background layers is a series of classes used to style background layers.", component: "BackgroundLayers", - argTypes: { - context: { - name: "Context", - type: { name: "string", required: true }, - defaultValue: "Browsing", - table: { - type: { summary: "string" }, - category: "Component", - defaultValue: { summary: "browsing" } - }, - options: ["browsing", "editing"], - control: "select" - }, - }, + argTypes: {}, args: { rootClass: "spectrum-BackgroundLayers", }, @@ -35,7 +22,7 @@ export default { const EditingContext = ({ }) => { return html` -
+
${Template({ style: "z-index: 4;", layer: 'elevated', @@ -59,7 +46,7 @@ const EditingContext = ({ const BrowsingContext = ({ }) => { return html` -
+
${Template({ style: "z-index: 3;", layer: 'elevated', From 59f4acbe1a03893d5a63006f60205a743033ec77 Mon Sep 17 00:00:00 2001 From: Jenn Diaz Date: Wed, 8 Nov 2023 15:41:27 -0700 Subject: [PATCH 09/21] chore(backgroundlayer): hard code token values --- components/backgroundlayers/index.css | 56 +++++++++++++++------------ 1 file changed, 32 insertions(+), 24 deletions(-) diff --git a/components/backgroundlayers/index.css b/components/backgroundlayers/index.css index bc36279027..aa7f21a6cb 100644 --- a/components/backgroundlayers/index.css +++ b/components/backgroundlayers/index.css @@ -9,44 +9,52 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ - .spectrum-BackgroundLayers { - --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); - --spectrum-backgroundlayers-drop-shadow: + --spectrum-gray-25: rgb(255, 255, 255); + --spectrum-gray-50: rgb(248, 248, 248); + --spectrum-gray-75: rgb(243, 243, 243); + --spectrum-gray-100: rgb(233, 233, 233); + --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); + } .spectrum-BackgroundLayers--elevated { - --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); - --spectrum-backgroundlayers-shadow-horizontal: 0; - --spectrum-backgroundlayers-shadow-vertical: 0; - --spectrum-backgroundlayers-shadow-blur: 5px; - --spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-200); - .spectrum--dark & { - --spectum-backgroundlayers-background-color: var(--spectrum-gray-75); - --spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100); - } + --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); + --spectrum-backgroundlayers-shadow-horizontal: 0; + --spectrum-backgroundlayers-shadow-vertical: 0; + --spectrum-backgroundlayers-shadow-blur: 5px; + --spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-200); + .spectrum--dark & { + --spectum-backgroundlayers-background-color: var(--spectrum-gray-75); + --spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100); + } } .spectrum-BackgroundLayers--layer2 { - --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); - .spectrum--dark & { - --spectum-backgroundlayers-background-color: var(--spectrum-gray-75); + --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); + .spectrum--dark & { + --spectum-backgroundlayers-background-color: var(--spectrum-gray-75); } } .spectrum-BackgroundLayers--layer1 { - --spectum-backgroundlayers-background-color: var(--spectrum-gray-50); + --spectum-backgroundlayers-background-color: var(--spectrum-gray-50); } .spectrum-BackgroundLayers--pasteboard { - --spectum-backgroundlayers-background-color: var(--spectrum-gray-100); - .spectrum--dark & { - --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); + --spectum-backgroundlayers-background-color: var(--spectrum-gray-100); + .spectrum--dark & { + --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); } } .spectrum-BackgroundLayers--base { - --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); - border: 2px solid rgba(180, 180, 180, 0.25); + --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); + border: 2px solid rgba(180, 180, 180, 0.25); } .spectrum-BackgroundLayers { - background-color: var(--spectum-backgroundlayers-background-color); - filter: drop-shadow(var(--spectrum-backgroundlayers-shadow-horizontal) var(--spectrum-backgroundlayers-shadow-vertical) var(--spectrum-backgroundlayers-shadow-blur) var(--spectrum-backgroundlayers-shadow-color)); -} \ No newline at end of file + background-color: var(--spectum-backgroundlayers-background-color); + filter: drop-shadow( + var(--spectrum-backgroundlayers-shadow-horizontal) + var(--spectrum-backgroundlayers-shadow-vertical) + var(--spectrum-backgroundlayers-shadow-blur) + var(--spectrum-backgroundlayers-shadow-color) + ); +} From 5fd9d8bf04bb15027f1c0fc1faff52da537c81a9 Mon Sep 17 00:00:00 2001 From: Jenn Diaz Date: Wed, 8 Nov 2023 16:26:14 -0700 Subject: [PATCH 10/21] refactor(backgroundlayers): use just 1 class --- components/backgroundlayers/index.css | 42 ++++++++++--------- .../metadata/backgroundlayers.yml | 14 +++---- 2 files changed, 29 insertions(+), 27 deletions(-) diff --git a/components/backgroundlayers/index.css b/components/backgroundlayers/index.css index aa7f21a6cb..ab636f8d23 100644 --- a/components/backgroundlayers/index.css +++ b/components/backgroundlayers/index.css @@ -9,15 +9,8 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ -.spectrum-BackgroundLayers { - --spectrum-gray-25: rgb(255, 255, 255); - --spectrum-gray-50: rgb(248, 248, 248); - --spectrum-gray-75: rgb(243, 243, 243); - --spectrum-gray-100: rgb(233, 233, 233); - --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); - -} +/* used in editing and browsing contexts */ .spectrum-BackgroundLayers--elevated { --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); --spectrum-backgroundlayers-shadow-horizontal: 0; @@ -28,33 +21,42 @@ governing permissions and limitations under the License. --spectum-backgroundlayers-background-color: var(--spectrum-gray-75); --spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100); } + + background-color: var(--spectum-backgroundlayers-background-color); + filter: drop-shadow( + var(--spectrum-backgroundlayers-shadow-horizontal) + var(--spectrum-backgroundlayers-shadow-vertical) + var(--spectrum-backgroundlayers-shadow-blur) + var(--spectrum-backgroundlayers-shadow-color) + ); +} + +.spectrum-BackgroundLayers--layer1 { + --spectum-backgroundlayers-background-color: var(--spectrum-gray-50); + background-color: var(--spectum-backgroundlayers-background-color); } + +/* only used in browsing contexts */ .spectrum-BackgroundLayers--layer2 { --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); .spectrum--dark & { --spectum-backgroundlayers-background-color: var(--spectrum-gray-75); } + background-color: var(--spectum-backgroundlayers-background-color); } -.spectrum-BackgroundLayers--layer1 { - --spectum-backgroundlayers-background-color: var(--spectrum-gray-50); -} + .spectrum-BackgroundLayers--pasteboard { --spectum-backgroundlayers-background-color: var(--spectrum-gray-100); .spectrum--dark & { --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); } + background-color: var(--spectum-backgroundlayers-background-color); } + +/* only used in editing contexts */ .spectrum-BackgroundLayers--base { --spectum-backgroundlayers-background-color: var(--spectrum-gray-25); border: 2px solid rgba(180, 180, 180, 0.25); -} - -.spectrum-BackgroundLayers { background-color: var(--spectum-backgroundlayers-background-color); - filter: drop-shadow( - var(--spectrum-backgroundlayers-shadow-horizontal) - var(--spectrum-backgroundlayers-shadow-vertical) - var(--spectrum-backgroundlayers-shadow-blur) - var(--spectrum-backgroundlayers-shadow-color) - ); } + diff --git a/components/backgroundlayers/metadata/backgroundlayers.yml b/components/backgroundlayers/metadata/backgroundlayers.yml index a1228b016c..00c18594db 100644 --- a/components/backgroundlayers/metadata/backgroundlayers.yml +++ b/components/backgroundlayers/metadata/backgroundlayers.yml @@ -6,23 +6,23 @@ examples: name: Browsing Contexts markup: |
-
+
-
+
-
+
-
+
- id: backgroundlayers-editting name: Editting Contexts markup: |
-
+
-
+
-
+
From e3170864dc6573445347d61cb4c673654bcbbb3e Mon Sep 17 00:00:00 2001 From: Jenn Diaz Date: Wed, 8 Nov 2023 16:48:10 -0700 Subject: [PATCH 11/21] feat(backgroundlayers): demo in alert dialog --- components/alertdialog/metadata/alertdialog.yml | 14 +++++++------- components/alertdialog/package.json | 2 ++ components/modal/index.css | 2 +- components/modal/metadata/modal.yml | 2 +- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/components/alertdialog/metadata/alertdialog.yml b/components/alertdialog/metadata/alertdialog.yml index 91a0441b5b..4506394c49 100644 --- a/components/alertdialog/metadata/alertdialog.yml +++ b/components/alertdialog/metadata/alertdialog.yml @@ -8,7 +8,7 @@ examples: markup: |
-
+