@spectrum-web-components/styles 0.13.2-slim.30 → 0.15.0

package/core-global.css

@@ -2863,120 +2863,6 @@ governing permissions and limitations under the License.
     --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var(
         --spectrum-alias-component-background-color-disabled
     );
-    --spectrum-alias-actionbutton-staticBlack-border-color-default: rgba(
-        0,
-        0,
-        0,
-        0.4
-    );
-    --spectrum-alias-actionbutton-staticBlack-background-color-default: transparent;
-    --spectrum-alias-actionbutton-staticBlack-border-color-hover: rgba(
-        0,
-        0,
-        0,
-        0.55
-    );
-    --spectrum-alias-actionbutton-staticBlack-background-color-hover: rgba(
-        0,
-        0,
-        0,
-        0.25
-    );
-    --spectrum-alias-actionbutton-staticBlack-border-color-down: rgba(
-        0,
-        0,
-        0,
-        0.7
-    );
-    --spectrum-alias-actionbutton-staticBlack-background-color-down: rgba(
-        0,
-        0,
-        0,
-        0.4
-    );
-    --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: rgba(
-        0,
-        0,
-        0,
-        0.55
-    );
-    --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: rgba(
-        0,
-        0,
-        0,
-        0.25
-    );
-    --spectrum-alias-actionbutton-staticBlack-border-color-disabled: rgba(
-        0,
-        0,
-        0,
-        0.25
-    );
-    --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: rgba(
-        0,
-        0,
-        0,
-        0.1
-    );
-    --spectrum-alias-actionbutton-staticWhite-border-color-default: hsla(
-        0,
-        0%,
-        100%,
-        0.4
-    );
-    --spectrum-alias-actionbutton-staticWhite-background-color-default: transparent;
-    --spectrum-alias-actionbutton-staticWhite-border-color-hover: hsla(
-        0,
-        0%,
-        100%,
-        0.55
-    );
-    --spectrum-alias-actionbutton-staticWhite-background-color-hover: hsla(
-        0,
-        0%,
-        100%,
-        0.25
-    );
-    --spectrum-alias-actionbutton-staticWhite-border-color-down: hsla(
-        0,
-        0%,
-        100%,
-        0.7
-    );
-    --spectrum-alias-actionbutton-staticWhite-background-color-down: hsla(
-        0,
-        0%,
-        100%,
-        0.4
-    );
-    --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: hsla(
-        0,
-        0%,
-        100%,
-        0.55
-    );
-    --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: hsla(
-        0,
-        0%,
-        100%,
-        0.25
-    );
-    --spectrum-alias-actionbutton-staticWhite-border-color-disabled: hsla(
-        0,
-        0%,
-        100%,
-        0.25
-    );
-    --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: hsla(
-        0,
-        0%,
-        100%,
-        0.1
-    );
     --spectrum-alias-tabs-divider-background-color-default: var(
         --spectrum-global-color-gray-300
     );

package/express/core-global.css

@@ -2330,80 +2330,6 @@ governing permissions and limitations under the License.
         --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus
     );
     --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticBlack-border-color-default: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-default: rgba(
-        0,
-        0,
-        0,
-        0.1
-    );
-    --spectrum-alias-actionbutton-staticBlack-border-color-hover: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-hover: rgba(
-        0,
-        0,
-        0,
-        0.25
-    );
-    --spectrum-alias-actionbutton-staticBlack-border-color-down: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-down: rgba(
-        0,
-        0,
-        0,
-        0.4
-    );
-    --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: rgba(
-        0,
-        0,
-        0,
-        0.25
-    );
-    --spectrum-alias-actionbutton-staticBlack-border-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent;
-    --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: rgba(
-        0,
-        0,
-        0,
-        0.1
-    );
-    --spectrum-alias-actionbutton-staticWhite-border-color-default: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-default: hsla(
-        0,
-        0%,
-        100%,
-        0.1
-    );
-    --spectrum-alias-actionbutton-staticWhite-border-color-hover: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-hover: hsla(
-        0,
-        0%,
-        100%,
-        0.25
-    );
-    --spectrum-alias-actionbutton-staticWhite-border-color-down: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-down: hsla(
-        0,
-        0%,
-        100%,
-        0.4
-    );
-    --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: hsla(
-        0,
-        0%,
-        100%,
-        0.25
-    );
-    --spectrum-alias-actionbutton-staticWhite-border-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent;
-    --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent;
-    --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: hsla(
-        0,
-        0%,
-        100%,
-        0.1
-    );
     --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300);
     --spectrum-alias-thumbnail-darksquare-background-color: var(
         --spectrum-global-color-gray-200

package/express/spectrum-scale-large.css

@@ -280,9 +280,6 @@ governing permissions and limitations under the License.
     --spectrum-alias-avatar-size-100: 26px;
     --spectrum-alias-avatar-size-400: 36px;
     --spectrum-alias-avatar-size-600: 46px;
-    --spectrum-actionbutton-m-texticon-padding-left: var(
-        --spectrum-global-dimension-static-size-150
-    );
     --spectrum-badge-s-neutral-textonly-text-padding-bottom: var(
         --spectrum-global-dimension-static-size-85
     );

package/express/spectrum-scale-medium.css

@@ -284,9 +284,6 @@ governing permissions and limitations under the License.
     --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250);
     --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350);
     --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450);
-    --spectrum-actionbutton-m-texticon-padding-left: var(
-        --spectrum-global-dimension-size-125
-    );
     --spectrum-badge-s-neutral-textonly-text-padding-bottom: var(
         --spectrum-global-dimension-static-size-65
     );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/styles",
-    "version": "0.13.2-slim.30+c71efb901",
+    "version": "0.15.0",
     "publishConfig": {
         "access": "public"
     },
@@ -48,7 +48,8 @@
         "./heading.js": "./heading.js",
         "./typography": "./typography.js",
         "./typography.js": "./typography.js",
-        "./src/*": "./src/*"
+        "./src/*": "./src/*",
+        "./tokens/*": "./tokens/*"
     },
     "scripts": {
         "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
@@ -69,12 +70,13 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.5.6"
+        "@spectrum-web-components/base": "^0.5.8"
     },
     "devDependencies": {
-        "@spectrum-css/commons": "^3.0.5",
+        "@spectrum-css/commons": "^3.0.6",
         "@spectrum-css/expressvars": "^2.0.0",
-        "@spectrum-css/typography": "^4.0.18",
+        "@spectrum-css/tokens": "^1.0.1",
+        "@spectrum-css/typography": "^4.0.20",
         "@spectrum-css/vars": "^8.0.0"
     },
     "customElements": "custom-elements.json",
@@ -82,5 +84,5 @@
         "./*.css"
     ],
     "style": "all-medium-lightest.css",
-    "gitHead": "c71efb901d48037f76afdd4a1cd23f0ab07223b1"
+    "gitHead": "3be62133721efba844cd7032566a2c49ed6d9875"
 }

package/spectrum-scale-large.css

@@ -291,9 +291,6 @@ governing permissions and limitations under the License.
     --spectrum-alias-tag-focusring-border-radius: var(
         --spectrum-global-dimension-static-size-75
     );
-    --spectrum-actionbutton-m-texticon-padding-left: var(
-        --spectrum-global-dimension-static-size-150
-    );
     --spectrum-badge-s-neutral-textonly-text-padding-bottom: var(
         --spectrum-global-dimension-static-size-85
     );

package/spectrum-scale-medium.css

@@ -289,9 +289,6 @@ governing permissions and limitations under the License.
     --spectrum-alias-tag-focusring-border-radius: var(
         --spectrum-global-dimension-static-size-65
     );
-    --spectrum-actionbutton-m-texticon-padding-left: var(
-        --spectrum-global-dimension-size-125
-    );
     --spectrum-badge-s-neutral-textonly-text-padding-bottom: var(
         --spectrum-global-dimension-static-size-65
     );

package/tokens/dark-vars.css

@@ -0,0 +1,267 @@
+/*
+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.
+*/
+
+:host {
+    --spectrum-neutral-background-color-default: var(--spectrum-gray-400);
+    --spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
+    --spectrum-neutral-background-color-down: var(--spectrum-gray-200);
+    --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300);
+    --spectrum-neutral-subdued-background-color-default: var(
+        --spectrum-gray-400
+    );
+    --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300);
+    --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200);
+    --spectrum-neutral-subdued-background-color-key-focus: var(
+        --spectrum-gray-300
+    );
+    --spectrum-accent-background-color-default: var(
+        --spectrum-accent-color-500
+    );
+    --spectrum-accent-background-color-hover: var(--spectrum-accent-color-400);
+    --spectrum-accent-background-color-down: var(--spectrum-accent-color-300);
+    --spectrum-accent-background-color-key-focus: var(
+        --spectrum-accent-color-400
+    );
+    --spectrum-informative-background-color-default: var(
+        --spectrum-informative-color-500
+    );
+    --spectrum-informative-background-color-hover: var(
+        --spectrum-informative-color-400
+    );
+    --spectrum-informative-background-color-down: var(
+        --spectrum-informative-color-300
+    );
+    --spectrum-informative-background-color-key-focus: var(
+        --spectrum-informative-color-400
+    );
+    --spectrum-negative-background-color-default: var(
+        --spectrum-negative-color-500
+    );
+    --spectrum-negative-background-color-hover: var(
+        --spectrum-negative-color-400
+    );
+    --spectrum-negative-background-color-down: var(
+        --spectrum-negative-color-300
+    );
+    --spectrum-negative-background-color-key-focus: var(
+        --spectrum-negative-color-400
+    );
+    --spectrum-positive-background-color-default: var(
+        --spectrum-positive-color-500
+    );
+    --spectrum-positive-background-color-hover: var(
+        --spectrum-positive-color-400
+    );
+    --spectrum-positive-background-color-down: var(
+        --spectrum-positive-color-300
+    );
+    --spectrum-positive-background-color-key-focus: var(
+        --spectrum-positive-color-400
+    );
+    --spectrum-drop-shadow-color: rgba(0, 0, 0, 0.5);
+    --spectrum-background-base-color: var(--spectrum-gray-50);
+    --spectrum-background-layer-1-color: var(--spectrum-gray-75);
+    --spectrum-background-layer-2-color: var(--spectrum-gray-100);
+    --spectrum-gray-50: rgb(29, 29, 29);
+    --spectrum-gray-75: rgb(38, 38, 38);
+    --spectrum-gray-100: rgb(50, 50, 50);
+    --spectrum-gray-200: rgb(63, 63, 63);
+    --spectrum-gray-300: rgb(84, 84, 84);
+    --spectrum-gray-400: rgb(112, 112, 112);
+    --spectrum-gray-500: rgb(144, 144, 144);
+    --spectrum-gray-600: rgb(178, 178, 178);
+    --spectrum-gray-700: rgb(209, 209, 209);
+    --spectrum-gray-800: rgb(235, 235, 235);
+    --spectrum-gray-900: rgb(255, 255, 255);
+    --spectrum-red-100: rgb(123, 0, 0);
+    --spectrum-red-200: rgb(141, 0, 0);
+    --spectrum-red-300: rgb(165, 0, 0);
+    --spectrum-red-400: rgb(190, 4, 3);
+    --spectrum-red-500: rgb(215, 25, 19);
+    --spectrum-red-600: rgb(234, 56, 41);
+    --spectrum-red-700: rgb(246, 88, 67);
+    --spectrum-red-800: rgb(255, 117, 94);
+    --spectrum-red-900: rgb(255, 149, 129);
+    --spectrum-red-1000: rgb(255, 176, 161);
+    --spectrum-red-1100: rgb(255, 201, 189);
+    --spectrum-red-1200: rgb(255, 222, 216);
+    --spectrum-red-1300: rgb(255, 241, 238);
+    --spectrum-red-1400: rgb(255, 255, 255);
+    --spectrum-orange-100: rgb(102, 37, 0);
+    --spectrum-orange-200: rgb(117, 45, 0);
+    --spectrum-orange-300: rgb(137, 55, 0);
+    --spectrum-orange-400: rgb(158, 66, 0);
+    --spectrum-orange-500: rgb(180, 78, 0);
+    --spectrum-orange-600: rgb(202, 93, 0);
+    --spectrum-orange-700: rgb(225, 109, 0);
+    --spectrum-orange-800: rgb(244, 129, 12);
+    --spectrum-orange-900: rgb(254, 154, 46);
+    --spectrum-orange-1000: rgb(255, 181, 88);
+    --spectrum-orange-1100: rgb(253, 206, 136);
+    --spectrum-orange-1200: rgb(255, 225, 179);
+    --spectrum-orange-1300: rgb(255, 242, 221);
+    --spectrum-orange-1400: rgb(255, 253, 249);
+    --spectrum-yellow-100: rgb(76, 54, 0);
+    --spectrum-yellow-200: rgb(88, 64, 0);
+    --spectrum-yellow-300: rgb(103, 76, 0);
+    --spectrum-yellow-400: rgb(119, 89, 0);
+    --spectrum-yellow-500: rgb(136, 104, 0);
+    --spectrum-yellow-600: rgb(155, 120, 0);
+    --spectrum-yellow-700: rgb(174, 137, 0);
+    --spectrum-yellow-800: rgb(192, 156, 0);
+    --spectrum-yellow-900: rgb(211, 174, 0);
+    --spectrum-yellow-1000: rgb(228, 194, 0);
+    --spectrum-yellow-1100: rgb(244, 213, 0);
+    --spectrum-yellow-1200: rgb(249, 232, 92);
+    --spectrum-yellow-1300: rgb(252, 246, 187);
+    --spectrum-yellow-1400: rgb(255, 255, 255);
+    --spectrum-chartreuse-100: rgb(48, 64, 0);
+    --spectrum-chartreuse-200: rgb(55, 74, 0);
+    --spectrum-chartreuse-300: rgb(65, 87, 0);
+    --spectrum-chartreuse-400: rgb(76, 102, 0);
+    --spectrum-chartreuse-500: rgb(89, 118, 0);
+    --spectrum-chartreuse-600: rgb(102, 136, 0);
+    --spectrum-chartreuse-700: rgb(117, 154, 0);
+    --spectrum-chartreuse-800: rgb(132, 173, 1);
+    --spectrum-chartreuse-900: rgb(148, 192, 8);
+    --spectrum-chartreuse-1000: rgb(166, 211, 18);
+    --spectrum-chartreuse-1100: rgb(184, 229, 37);
+    --spectrum-chartreuse-1200: rgb(205, 245, 71);
+    --spectrum-chartreuse-1300: rgb(231, 254, 154);
+    --spectrum-chartreuse-1400: rgb(255, 255, 255);
+    --spectrum-celery-100: rgb(0, 69, 10);
+    --spectrum-celery-200: rgb(0, 80, 12);
+    --spectrum-celery-300: rgb(0, 94, 14);
+    --spectrum-celery-400: rgb(0, 109, 15);
+    --spectrum-celery-500: rgb(0, 127, 15);
+    --spectrum-celery-600: rgb(0, 145, 18);
+    --spectrum-celery-700: rgb(4, 165, 30);
+    --spectrum-celery-800: rgb(34, 184, 51);
+    --spectrum-celery-900: rgb(68, 202, 73);
+    --spectrum-celery-1000: rgb(105, 220, 99);
+    --spectrum-celery-1100: rgb(142, 235, 127);
+    --spectrum-celery-1200: rgb(180, 247, 162);
+    --spectrum-celery-1300: rgb(221, 253, 211);
+    --spectrum-celery-1400: rgb(255, 255, 255);
+    --spectrum-green-100: rgb(4, 67, 41);
+    --spectrum-green-200: rgb(0, 78, 47);
+    --spectrum-green-300: rgb(0, 92, 56);
+    --spectrum-green-400: rgb(0, 108, 67);
+    --spectrum-green-500: rgb(0, 125, 78);
+    --spectrum-green-600: rgb(0, 143, 93);
+    --spectrum-green-700: rgb(18, 162, 108);
+    --spectrum-green-800: rgb(43, 180, 125);
+    --spectrum-green-900: rgb(67, 199, 143);
+    --spectrum-green-1000: rgb(94, 217, 162);
+    --spectrum-green-1100: rgb(129, 233, 184);
+    --spectrum-green-1200: rgb(177, 244, 209);
+    --spectrum-green-1300: rgb(223, 250, 234);
+    --spectrum-green-1400: rgb(254, 255, 252);
+    --spectrum-seafoam-100: rgb(18, 65, 63);
+    --spectrum-seafoam-200: rgb(14, 76, 73);
+    --spectrum-seafoam-300: rgb(4, 90, 87);
+    --spectrum-seafoam-400: rgb(0, 105, 101);
+    --spectrum-seafoam-500: rgb(0, 122, 117);
+    --spectrum-seafoam-600: rgb(0, 140, 135);
+    --spectrum-seafoam-700: rgb(0, 158, 152);
+    --spectrum-seafoam-800: rgb(3, 178, 171);
+    --spectrum-seafoam-900: rgb(54, 197, 189);
+    --spectrum-seafoam-1000: rgb(93, 214, 207);
+    --spectrum-seafoam-1100: rgb(132, 230, 223);
+    --spectrum-seafoam-1200: rgb(176, 242, 236);
+    --spectrum-seafoam-1300: rgb(223, 249, 246);
+    --spectrum-seafoam-1400: rgb(254, 255, 254);
+    --spectrum-cyan-100: rgb(0, 61, 98);
+    --spectrum-cyan-200: rgb(0, 71, 111);
+    --spectrum-cyan-300: rgb(0, 85, 127);
+    --spectrum-cyan-400: rgb(0, 100, 145);
+    --spectrum-cyan-500: rgb(0, 116, 162);
+    --spectrum-cyan-600: rgb(0, 134, 180);
+    --spectrum-cyan-700: rgb(0, 153, 198);
+    --spectrum-cyan-800: rgb(14, 173, 215);
+    --spectrum-cyan-900: rgb(44, 193, 230);
+    --spectrum-cyan-1000: rgb(84, 211, 241);
+    --spectrum-cyan-1100: rgb(127, 228, 249);
+    --spectrum-cyan-1200: rgb(167, 241, 255);
+    --spectrum-cyan-1300: rgb(215, 250, 255);
+    --spectrum-cyan-1400: rgb(255, 255, 255);
+    --spectrum-blue-100: rgb(0, 56, 119);
+    --spectrum-blue-200: rgb(0, 65, 138);
+    --spectrum-blue-300: rgb(0, 77, 163);
+    --spectrum-blue-400: rgb(0, 89, 194);
+    --spectrum-blue-500: rgb(3, 103, 224);
+    --spectrum-blue-600: rgb(19, 121, 243);
+    --spectrum-blue-700: rgb(52, 143, 244);
+    --spectrum-blue-800: rgb(84, 163, 246);
+    --spectrum-blue-900: rgb(114, 183, 249);
+    --spectrum-blue-1000: rgb(143, 202, 252);
+    --spectrum-blue-1100: rgb(174, 219, 254);
+    --spectrum-blue-1200: rgb(204, 233, 255);
+    --spectrum-blue-1300: rgb(232, 246, 255);
+    --spectrum-blue-1400: rgb(255, 255, 255);
+    --spectrum-indigo-100: rgb(40, 44, 140);
+    --spectrum-indigo-200: rgb(47, 52, 163);
+    --spectrum-indigo-300: rgb(57, 63, 187);
+    --spectrum-indigo-400: rgb(70, 75, 211);
+    --spectrum-indigo-500: rgb(85, 91, 231);
+    --spectrum-indigo-600: rgb(104, 109, 244);
+    --spectrum-indigo-700: rgb(124, 129, 251);
+    --spectrum-indigo-800: rgb(145, 149, 255);
+    --spectrum-indigo-900: rgb(167, 170, 255);
+    --spectrum-indigo-1000: rgb(188, 190, 255);
+    --spectrum-indigo-1100: rgb(208, 210, 255);
+    --spectrum-indigo-1200: rgb(226, 228, 255);
+    --spectrum-indigo-1300: rgb(243, 243, 254);
+    --spectrum-indigo-1400: rgb(255, 255, 255);
+    --spectrum-purple-100: rgb(76, 13, 157);
+    --spectrum-purple-200: rgb(89, 17, 177);
+    --spectrum-purple-300: rgb(105, 28, 200);
+    --spectrum-purple-400: rgb(122, 45, 218);
+    --spectrum-purple-500: rgb(140, 65, 233);
+    --spectrum-purple-600: rgb(157, 87, 243);
+    --spectrum-purple-700: rgb(172, 111, 249);
+    --spectrum-purple-800: rgb(187, 135, 251);
+    --spectrum-purple-900: rgb(202, 159, 252);
+    --spectrum-purple-1000: rgb(215, 182, 254);
+    --spectrum-purple-1100: rgb(228, 204, 254);
+    --spectrum-purple-1200: rgb(239, 223, 255);
+    --spectrum-purple-1300: rgb(249, 240, 255);
+    --spectrum-purple-1400: rgb(255, 253, 255);
+    --spectrum-fuchsia-100: rgb(107, 3, 106);
+    --spectrum-fuchsia-200: rgb(123, 0, 123);
+    --spectrum-fuchsia-300: rgb(144, 0, 145);
+    --spectrum-fuchsia-400: rgb(165, 13, 166);
+    --spectrum-fuchsia-500: rgb(185, 37, 185);
+    --spectrum-fuchsia-600: rgb(205, 57, 206);
+    --spectrum-fuchsia-700: rgb(223, 81, 224);
+    --spectrum-fuchsia-800: rgb(235, 110, 236);
+    --spectrum-fuchsia-900: rgb(244, 140, 242);
+    --spectrum-fuchsia-1000: rgb(250, 168, 245);
+    --spectrum-fuchsia-1100: rgb(254, 194, 248);
+    --spectrum-fuchsia-1200: rgb(255, 219, 250);
+    --spectrum-fuchsia-1300: rgb(255, 239, 252);
+    --spectrum-fuchsia-1400: rgb(255, 253, 255);
+    --spectrum-magenta-100: rgb(118, 0, 58);
+    --spectrum-magenta-200: rgb(137, 0, 66);
+    --spectrum-magenta-300: rgb(160, 0, 77);
+    --spectrum-magenta-400: rgb(182, 18, 90);
+    --spectrum-magenta-500: rgb(203, 38, 109);
+    --spectrum-magenta-600: rgb(222, 61, 130);
+    --spectrum-magenta-700: rgb(237, 87, 149);
+    --spectrum-magenta-800: rgb(249, 114, 167);
+    --spectrum-magenta-900: rgb(255, 143, 185);
+    --spectrum-magenta-1000: rgb(255, 172, 202);
+    --spectrum-magenta-1100: rgb(255, 198, 218);
+    --spectrum-magenta-1200: rgb(255, 221, 233);
+    --spectrum-magenta-1300: rgb(255, 240, 245);
+    --spectrum-magenta-1400: rgb(255, 252, 253);
+}