refactor(picker)!: use spectrum tokens (#1528)

BREAKING CHANGE: migrates Picker to new tokens system --------- Co-authored-by: Patrick Fulton <[email protected]>
adobe · Feb 6, 2023 · 7cdbad2 · 7cdbad2
1 parent 71e6e22
commit 7cdbad2
Show file tree

Hide file tree

Showing 7 changed files with 819 additions and 617 deletions.
diff --git a/components/picker/gulpfile.js b/components/picker/gulpfile.js
@@ -1 +1 @@
-module.exports = require('@spectrum-css/component-builder');
+module.exports = require('@spectrum-css/component-builder-simple');
diff --git a/components/picker/index.css b/components/picker/index.css
diff --git a/components/picker/metadata/picker.yml b/components/picker/metadata/picker.yml
diff --git a/components/picker/package.json b/components/picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/picker",
-  "version": "1.2.21",
+  "version": "2.0.0-beta.2",
   "description": "The Spectrum CSS picker component",
   "license": "Apache-2.0",
   "homepage": "https://opensource.adobe.com/spectrum-css/",
@@ -19,15 +19,17 @@
   "peerDependencies": {
     "@spectrum-css/icon": "^3.0.21",
     "@spectrum-css/menu": "^4.0.0",
-    "@spectrum-css/popover": "^5.0.0",
-    "@spectrum-css/vars": "^8.0.0"
+    "@spectrum-css/popover": "^6.0.16",
+    "@spectrum-css/tokens": "^7.0.0"
   },
   "devDependencies": {
-    "@spectrum-css/component-builder": "^4.0.1",
+    "@spectrum-css/component-builder-simple": "^2.0.4",
+    "@spectrum-css/helptext": "^4.0.1",
     "@spectrum-css/icon": "^3.0.32",
     "@spectrum-css/menu": "^4.0.13",
-    "@spectrum-css/popover": "^5.0.18",
-    "@spectrum-css/vars": "^8.0.3",
+    "@spectrum-css/popover": "^6.0.16",
+    "@spectrum-css/progresscircle": "^2.0.12",
+    "@spectrum-css/tokens": "^7.0.0",
     "gulp": "^4.0.0"
   },
   "publishConfig": {

diff --git a/components/picker/themes/express.css b/components/picker/themes/express.css
@@ -0,0 +1,23 @@
+/*
+Copyright 2022 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) {
+  .spectrum-Picker {
+    --spectrum-picker-border-size: none;
+
+    --spectrum-picker-background-color-default: var(--spectrum-gray-200);
+    --spectrum-picker-background-color-default-open: var(--spectrum-gray-300);
+    --spectrum-picker-background-color-hover: var(--spectrum-gray-300);
+    --spectrum-picker-background-color-hover-open: var(--spectrum-gray-300);
+    --spectrum-picker-background-color-active: var(--spectrum-gray-400);
+    --spectrum-picker-background-color-key-focus: var(--spectrum-gray-300);
+  }
+}
diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css
@@ -0,0 +1,30 @@
+/*
+Copyright 2022 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) {
+  .spectrum-Picker {
+    --spectrum-picker-border-size: var(--spectrum-border-width-100);
+
+    --spectrum-picker-background-color-default: var(--spectrum-gray-75);
+    --spectrum-picker-background-color-default-open: var(--spectrum-gray-200);
+    --spectrum-picker-background-color-active: var(--spectrum-gray-300);
+    --spectrum-picker-background-color-hover: var(--spectrum-gray-200);
+    --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200);
+    --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200);
+
+    --spectrum-picker-border-color-default: var(--spectrum-gray-400);
+    --spectrum-picker-border-color-default-open: var(--spectrum-gray-400);
+    --spectrum-picker-border-color-hover: var(--spectrum-gray-500);
+    --spectrum-picker-border-color-hover-open: var(--spectrum-gray-500);
+    --spectrum-picker-border-color-active: var(--spectrum-gray-600);
+    --spectrum-picker-border-color-key-focus: var(--spectrum-gray-500);
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		module.exports = require('@spectrum-css/component-builder');
		module.exports = require('@spectrum-css/component-builder-simple');