From d669cad4ff64ad1f54a0722640f6a9774ebe11a2 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Mon, 11 Dec 2023 15:38:11 -0500 Subject: [PATCH 01/42] feat(tokens): use 13.0.0-beta.5 Includes new color values for Spectrum 2 --- tokens/dist/css/dark-vars.css | 619 ++++-- tokens/dist/css/darkest-vars.css | 459 ---- tokens/dist/css/express/global-vars.css | 39 - tokens/dist/css/express/large-vars.css | 52 - tokens/dist/css/express/medium-vars.css | 52 - tokens/dist/css/global-vars.css | 144 +- tokens/dist/css/large-vars.css | 129 +- tokens/dist/css/light-vars.css | 595 ++++-- tokens/dist/css/medium-vars.css | 129 +- tokens/dist/css/spectrum/global-vars.css | 39 +- tokens/dist/css/spectrum/large-vars.css | 50 - tokens/dist/css/spectrum/medium-vars.css | 50 - tokens/dist/index.css | 2460 ++++++++++------------ tokens/package.json | 2 +- yarn.lock | 19 +- 15 files changed, 2142 insertions(+), 2696 deletions(-) delete mode 100644 tokens/dist/css/darkest-vars.css delete mode 100644 tokens/dist/css/express/global-vars.css delete mode 100644 tokens/dist/css/express/large-vars.css delete mode 100644 tokens/dist/css/express/medium-vars.css delete mode 100644 tokens/dist/css/spectrum/large-vars.css delete mode 100644 tokens/dist/css/spectrum/medium-vars.css diff --git a/tokens/dist/css/dark-vars.css b/tokens/dist/css/dark-vars.css index 7683a1a3235..752ad50ac53 100644 --- a/tokens/dist/css/dark-vars.css +++ b/tokens/dist/css/dark-vars.css @@ -1,36 +1,31 @@ .spectrum--dark{ - --spectrum-overlay-opacity:0.5; + --spectrum-overlay-opacity:0.6; --spectrum-drop-shadow-color-rgb:0, 0, 0; - --spectrum-drop-shadow-color-opacity:0.5; + --spectrum-drop-shadow-color-opacity:0.8; --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --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-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-background-base-color:var(--spectrum-gray-25); + --spectrum-background-layer-1-color:var(--spectrum-gray-50); + --spectrum-background-layer-2-color:var(--spectrum-gray-75); --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-down:var(--spectrum-gray-300); --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-notice-background-color-default:var(--spectrum-notice-color-800); + --spectrum-accent-background-color-default:var(--spectrum-accent-color-600); + --spectrum-accent-background-color-hover:var(--spectrum-accent-color-500); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-500); + --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-500); + --spectrum-informative-background-color-default:var(--spectrum-informative-color-600); + --spectrum-informative-background-color-hover:var(--spectrum-informative-color-500); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-500); + --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-500); + --spectrum-negative-background-color-default:var(--spectrum-negative-color-600); + --spectrum-negative-background-color-hover:var(--spectrum-negative-color-500); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-500); + --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-500); + --spectrum-positive-background-color-default:var(--spectrum-positive-color-600); + --spectrum-positive-background-color-hover:var(--spectrum-positive-color-500); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-500); + --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-500); --spectrum-gray-background-color-default:var(--spectrum-gray-700); --spectrum-red-background-color-default:var(--spectrum-red-700); --spectrum-orange-background-color-default:var(--spectrum-orange-800); @@ -66,392 +61,576 @@ --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); --spectrum-magenta-visual-color:var(--spectrum-magenta-900); --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); - --spectrum-gray-50-rgb:29, 29, 29; + --spectrum-gray-25-rgb:17, 17, 17; + --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb:27, 27, 27; --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb:38, 38, 38; + --spectrum-gray-75-rgb:34, 34, 34; --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb:50, 50, 50; + --spectrum-gray-100-rgb:44, 44, 44; --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb:63, 63, 63; + --spectrum-gray-200-rgb:50, 50, 50; --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb:84, 84, 84; + --spectrum-gray-300-rgb:57, 57, 57; --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb:112, 112, 112; + --spectrum-gray-400-rgb:68, 68, 68; --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb:144, 144, 144; + --spectrum-gray-500-rgb:109, 109, 109; --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb:178, 178, 178; + --spectrum-gray-600-rgb:138, 138, 138; --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb:209, 209, 209; + --spectrum-gray-700-rgb:175, 175, 175; --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb:235, 235, 235; + --spectrum-gray-800-rgb:219, 219, 219; --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb:255, 255, 255; + --spectrum-gray-900-rgb:242, 242, 242; --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb:0, 56, 119; + --spectrum-gray-1000-rgb:255, 255, 255; + --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb:14, 23, 63; --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb:0, 65, 138; + --spectrum-blue-200-rgb:15, 28, 82; --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb:0, 77, 163; + --spectrum-blue-300-rgb:12, 33, 117; --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb:0, 89, 194; + --spectrum-blue-400-rgb:18, 45, 154; --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb:3, 103, 224; + --spectrum-blue-500-rgb:26, 58, 195; --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb:19, 121, 243; + --spectrum-blue-600-rgb:37, 73, 229; --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb:52, 143, 244; + --spectrum-blue-700-rgb:52, 91, 248; --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb:84, 163, 246; + --spectrum-blue-800-rgb:69, 110, 254; --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb:114, 183, 249; + --spectrum-blue-900-rgb:86, 129, 255; --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb:143, 202, 252; + --spectrum-blue-1000-rgb:105, 149, 254; --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb:174, 219, 254; + --spectrum-blue-1100-rgb:124, 169, 252; --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb:204, 233, 255; + --spectrum-blue-1200-rgb:152, 192, 252; --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb:232, 246, 255; + --spectrum-blue-1300-rgb:181, 213, 253; --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb:255, 255, 255; + --spectrum-blue-1400-rgb:213, 231, 254; --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb:123, 0, 0; + --spectrum-blue-1500-rgb:238, 245, 255; + --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb:255, 255, 255; + --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb:54, 10, 3; --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb:141, 0, 0; + --spectrum-red-200-rgb:68, 13, 5; --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb:165, 0, 0; + --spectrum-red-300-rgb:87, 17, 7; --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb:190, 4, 3; + --spectrum-red-400-rgb:115, 24, 11; --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb:215, 25, 19; + --spectrum-red-500-rgb:147, 31, 17; --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb:234, 56, 41; + --spectrum-red-600-rgb:177, 38, 23; --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb:246, 88, 67; + --spectrum-red-700-rgb:205, 46, 29; --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb:255, 117, 94; + --spectrum-red-800-rgb:230, 54, 35; --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb:255, 149, 129; + --spectrum-red-900-rgb:252, 67, 46; --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb:255, 176, 161; + --spectrum-red-1000-rgb:255, 103, 86; --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb:255, 201, 189; + --spectrum-red-1100-rgb:255, 134, 120; --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb:255, 222, 216; + --spectrum-red-1200-rgb:255, 167, 157; --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb:255, 241, 238; + --spectrum-red-1300-rgb:255, 196, 189; --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb:255, 255, 255; + --spectrum-red-1400-rgb:255, 222, 219; --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb:102, 37, 0; + --spectrum-red-1500-rgb:255, 242, 240; + --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb:255, 255, 255; + --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb:49, 16, 0; --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb:117, 45, 0; + --spectrum-orange-200-rgb:61, 21, 0; --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb:137, 55, 0; + --spectrum-orange-300-rgb:80, 27, 0; --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb:158, 66, 0; + --spectrum-orange-400-rgb:106, 36, 0; --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb:180, 78, 0; + --spectrum-orange-500-rgb:135, 47, 0; --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb:202, 93, 0; + --spectrum-orange-600-rgb:162, 59, 0; --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb:225, 109, 0; + --spectrum-orange-700-rgb:185, 73, 0; --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb:244, 129, 12; + --spectrum-orange-800-rgb:205, 86, 0; --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb:254, 154, 46; + --spectrum-orange-900-rgb:224, 100, 0; --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb:255, 181, 88; + --spectrum-orange-1000-rgb:243, 117, 0; --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb:253, 206, 136; + --spectrum-orange-1100-rgb:255, 137, 0; --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb:255, 225, 179; + --spectrum-orange-1200-rgb:255, 173, 45; --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb:255, 242, 221; + --spectrum-orange-1300-rgb:255, 201, 116; --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb:255, 253, 249; + --spectrum-orange-1400-rgb:255, 225, 178; --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb:76, 54, 0; + --spectrum-orange-1500-rgb:255, 243, 225; + --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb:255, 255, 255; + --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb:37, 23, 0; --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb:88, 64, 0; + --spectrum-yellow-200-rgb:47, 29, 0; --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb:103, 76, 0; + --spectrum-yellow-300-rgb:61, 39, 0; --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb:119, 89, 0; + --spectrum-yellow-400-rgb:83, 52, 0; --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb:136, 104, 0; + --spectrum-yellow-500-rgb:107, 67, 0; --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb:155, 120, 0; + --spectrum-yellow-600-rgb:130, 82, 0; --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb:174, 137, 0; + --spectrum-yellow-700-rgb:151, 97, 0; --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb:192, 156, 0; + --spectrum-yellow-800-rgb:169, 110, 0; --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb:211, 174, 0; + --spectrum-yellow-900-rgb:186, 124, 0; --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb:228, 194, 0; + --spectrum-yellow-1000-rgb:203, 141, 0; --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb:244, 213, 0; + --spectrum-yellow-1100-rgb:218, 159, 0; --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb:249, 232, 92; + --spectrum-yellow-1200-rgb:235, 183, 0; --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb:252, 246, 187; + --spectrum-yellow-1300-rgb:249, 206, 0; --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb:255, 255, 255; + --spectrum-yellow-1400-rgb:255, 230, 86; --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb:48, 64, 0; + --spectrum-yellow-1500-rgb:255, 246, 195; + --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb:255, 255, 255; + --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb:23, 28, 0; --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb:55, 74, 0; + --spectrum-chartreuse-200-rgb:30, 36, 0; --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb:65, 87, 0; + --spectrum-chartreuse-300-rgb:39, 47, 0; --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb:76, 102, 0; + --spectrum-chartreuse-400-rgb:53, 63, 0; --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb:89, 118, 0; + --spectrum-chartreuse-500-rgb:68, 82, 0; --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb:102, 136, 0; + --spectrum-chartreuse-600-rgb:83, 100, 0; --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb:117, 154, 0; + --spectrum-chartreuse-700-rgb:97, 116, 0; --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb:132, 173, 1; + --spectrum-chartreuse-800-rgb:109, 131, 0; --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb:148, 192, 8; + --spectrum-chartreuse-900-rgb:122, 147, 0; --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb:166, 211, 18; + --spectrum-chartreuse-1000-rgb:136, 164, 0; --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb:184, 229, 37; + --spectrum-chartreuse-1100-rgb:151, 181, 0; --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb:205, 245, 71; + --spectrum-chartreuse-1200-rgb:169, 203, 0; --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb:231, 254, 154; + --spectrum-chartreuse-1300-rgb:187, 225, 0; --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb:255, 255, 255; + --spectrum-chartreuse-1400-rgb:219, 240, 117; --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb:0, 69, 10; + --spectrum-chartreuse-1500-rgb:242, 249, 206; + --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb:255, 255, 255; + --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb:11, 31, 0; --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb:0, 80, 12; + --spectrum-celery-200-rgb:15, 38, 0; --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb:0, 94, 14; + --spectrum-celery-300-rgb:21, 51, 1; --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb:0, 109, 15; + --spectrum-celery-400-rgb:31, 67, 4; --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb:0, 127, 15; + --spectrum-celery-500-rgb:41, 86, 8; --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb:0, 145, 18; + --spectrum-celery-600-rgb:50, 105, 11; --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb:4, 165, 30; + --spectrum-celery-700-rgb:60, 122, 15; --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb:34, 184, 51; + --spectrum-celery-800-rgb:69, 138, 19; --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb:68, 202, 73; + --spectrum-celery-900-rgb:78, 154, 23; --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb:105, 220, 99; + --spectrum-celery-1000-rgb:88, 172, 28; --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb:142, 235, 127; + --spectrum-celery-1100-rgb:100, 190, 35; --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb:180, 247, 162; + --spectrum-celery-1200-rgb:116, 213, 46; --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb:221, 253, 211; + --spectrum-celery-1300-rgb:136, 234, 65; --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb:255, 255, 255; + --spectrum-celery-1400-rgb:170, 251, 112; --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb:4, 67, 41; + --spectrum-celery-1500-rgb:222, 255, 198; + --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb:255, 255, 255; + --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb:0, 30, 23; --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb:0, 78, 47; + --spectrum-green-200-rgb:0, 38, 29; --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb:0, 92, 56; + --spectrum-green-300-rgb:0, 51, 38; --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb:0, 108, 67; + --spectrum-green-400-rgb:0, 68, 48; --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb:0, 125, 78; + --spectrum-green-500-rgb:2, 87, 58; --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb:0, 143, 93; + --spectrum-green-600-rgb:3, 106, 67; --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb:18, 162, 108; + --spectrum-green-700-rgb:4, 124, 75; --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb:43, 180, 125; + --spectrum-green-800-rgb:6, 140, 82; --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb:67, 199, 143; + --spectrum-green-900-rgb:9, 157, 89; --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb:94, 217, 162; + --spectrum-green-1000-rgb:14, 175, 98; --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb:129, 233, 184; + --spectrum-green-1100-rgb:24, 193, 110; --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb:177, 244, 209; + --spectrum-green-1200-rgb:57, 215, 134; --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb:223, 250, 234; + --spectrum-green-1300-rgb:126, 231, 172; --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb:254, 255, 252; + --spectrum-green-1400-rgb:189, 241, 208; --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb:18, 65, 63; + --spectrum-green-1500-rgb:229, 250, 236; + --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb:255, 255, 255; + --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb:0, 30, 27; --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb:14, 76, 73; + --spectrum-seafoam-200-rgb:0, 39, 35; --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb:4, 90, 87; + --spectrum-seafoam-300-rgb:0, 50, 44; --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb:0, 105, 101; + --spectrum-seafoam-400-rgb:0, 67, 59; --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb:0, 122, 117; + --spectrum-seafoam-500-rgb:2, 86, 75; --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb:0, 140, 135; + --spectrum-seafoam-600-rgb:4, 105, 89; --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb:0, 158, 152; + --spectrum-seafoam-700-rgb:6, 122, 103; --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb:3, 178, 171; + --spectrum-seafoam-800-rgb:8, 138, 116; --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb:54, 197, 189; + --spectrum-seafoam-900-rgb:10, 154, 128; --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb:93, 214, 207; + --spectrum-seafoam-1000-rgb:12, 173, 142; --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb:132, 230, 223; + --spectrum-seafoam-1100-rgb:14, 190, 156; --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb:176, 242, 236; + --spectrum-seafoam-1200-rgb:29, 214, 176; --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb:223, 249, 246; + --spectrum-seafoam-1300-rgb:122, 229, 203; --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb:254, 255, 254; + --spectrum-seafoam-1400-rgb:186, 241, 222; --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb:0, 61, 98; + --spectrum-seafoam-1500-rgb:229, 249, 243; + --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb:255, 255, 255; + --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb:0, 29, 39; --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb:0, 71, 111; + --spectrum-cyan-200-rgb:0, 36, 49; --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb:0, 85, 127; + --spectrum-cyan-300-rgb:0, 48, 65; --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb:0, 100, 145; + --spectrum-cyan-400-rgb:0, 64, 88; --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb:0, 116, 162; + --spectrum-cyan-500-rgb:0, 82, 113; --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb:0, 134, 180; + --spectrum-cyan-600-rgb:3, 99, 140; --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb:0, 153, 198; + --spectrum-cyan-700-rgb:8, 115, 168; --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb:14, 173, 215; + --spectrum-cyan-800-rgb:15, 128, 194; --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb:44, 193, 230; + --spectrum-cyan-900-rgb:24, 142, 220; --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb:84, 211, 241; + --spectrum-cyan-1000-rgb:38, 159, 244; --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb:127, 228, 249; + --spectrum-cyan-1100-rgb:63, 177, 255; --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb:167, 241, 255; + --spectrum-cyan-1200-rgb:107, 199, 255; --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb:215, 250, 255; + --spectrum-cyan-1300-rgb:152, 219, 255; --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb:255, 255, 255; + --spectrum-cyan-1400-rgb:195, 236, 252; --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb:40, 44, 140; + --spectrum-cyan-1500-rgb:230, 248, 253; + --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb:255, 255, 255; + --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb:30, 0, 93; --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb:47, 52, 163; + --spectrum-indigo-200-rgb:35, 0, 110; --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb:57, 63, 187; + --spectrum-indigo-300-rgb:47, 0, 140; --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb:70, 75, 211; + --spectrum-indigo-400-rgb:62, 12, 174; --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb:85, 91, 231; + --spectrum-indigo-500-rgb:79, 30, 209; --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb:104, 109, 244; + --spectrum-indigo-600-rgb:95, 52, 235; --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb:124, 129, 251; + --spectrum-indigo-700-rgb:109, 75, 248; --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb:145, 149, 255; + --spectrum-indigo-800-rgb:119, 97, 252; --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb:167, 170, 255; + --spectrum-indigo-900-rgb:128, 119, 254; --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb:188, 190, 255; + --spectrum-indigo-1000-rgb:139, 141, 254; --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb:208, 210, 255; + --spectrum-indigo-1100-rgb:153, 161, 255; --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb:226, 228, 255; + --spectrum-indigo-1200-rgb:176, 186, 255; --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb:243, 243, 254; + --spectrum-indigo-1300-rgb:199, 208, 255; --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb:255, 255, 255; + --spectrum-indigo-1400-rgb:223, 228, 255; --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb:76, 13, 157; + --spectrum-indigo-1500-rgb:243, 244, 255; + --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb:255, 255, 255; + --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb:41, 0, 79; --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb:89, 17, 177; + --spectrum-purple-200-rgb:50, 0, 96; --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb:105, 28, 200; + --spectrum-purple-300-rgb:64, 0, 122; --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb:122, 45, 218; + --spectrum-purple-400-rgb:83, 0, 159; --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb:140, 65, 233; + --spectrum-purple-500-rgb:107, 6, 195; --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb:157, 87, 243; + --spectrum-purple-600-rgb:130, 34, 215; --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb:172, 111, 249; + --spectrum-purple-700-rgb:148, 62, 224; --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb:187, 135, 251; + --spectrum-purple-800-rgb:161, 84, 229; --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb:202, 159, 252; + --spectrum-purple-900-rgb:173, 105, 233; --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb:215, 182, 254; + --spectrum-purple-1000-rgb:186, 127, 237; --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb:228, 204, 254; + --spectrum-purple-1100-rgb:197, 149, 240; --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb:239, 223, 255; + --spectrum-purple-1200-rgb:212, 176, 244; --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb:249, 240, 255; + --spectrum-purple-1300-rgb:225, 201, 247; --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb:255, 253, 255; + --spectrum-purple-1400-rgb:238, 224, 250; --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb:107, 3, 106; + --spectrum-purple-1500-rgb:248, 243, 253; + --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb:255, 255, 255; + --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb:50, 0, 61; --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb:123, 0, 123; + --spectrum-fuchsia-200-rgb:61, 0, 74; --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb:144, 0, 145; + --spectrum-fuchsia-300-rgb:79, 0, 95; --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb:165, 13, 166; + --spectrum-fuchsia-400-rgb:102, 9, 120; --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb:185, 37, 185; + --spectrum-fuchsia-500-rgb:127, 23, 146; --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb:205, 57, 206; + --spectrum-fuchsia-600-rgb:151, 38, 170; --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb:223, 81, 224; + --spectrum-fuchsia-700-rgb:173, 51, 192; --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb:235, 110, 236; + --spectrum-fuchsia-800-rgb:192, 64, 212; --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb:244, 140, 242; + --spectrum-fuchsia-900-rgb:213, 73, 235; --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb:250, 168, 245; + --spectrum-fuchsia-1000-rgb:232, 91, 253; --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb:254, 194, 248; + --spectrum-fuchsia-1100-rgb:240, 122, 255; --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb:255, 219, 250; + --spectrum-fuchsia-1200-rgb:245, 159, 255; --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb:255, 239, 252; + --spectrum-fuchsia-1300-rgb:248, 191, 255; --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb:255, 253, 255; + --spectrum-fuchsia-1400-rgb:251, 219, 255; --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb:118, 0, 58; + --spectrum-fuchsia-1500-rgb:253, 241, 255; + --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb:255, 255, 255; + --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb:59, 0, 22; --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb:137, 0, 66; + --spectrum-magenta-200-rgb:74, 0, 27; --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb:160, 0, 77; + --spectrum-magenta-300-rgb:93, 0, 34; --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb:182, 18, 90; + --spectrum-magenta-400-rgb:123, 0, 45; --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb:203, 38, 109; + --spectrum-magenta-500-rgb:152, 7, 60; --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb:222, 61, 130; + --spectrum-magenta-600-rgb:181, 19, 76; --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb:237, 87, 149; + --spectrum-magenta-700-rgb:207, 31, 92; --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb:249, 114, 167; + --spectrum-magenta-800-rgb:231, 41, 105; --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb:255, 143, 185; + --spectrum-magenta-900-rgb:255, 51, 119; --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb:255, 172, 202; + --spectrum-magenta-1000-rgb:255, 96, 149; --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb:255, 198, 218; + --spectrum-magenta-1100-rgb:255, 128, 171; --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb:255, 221, 233; + --spectrum-magenta-1200-rgb:255, 163, 194; --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb:255, 240, 245; + --spectrum-magenta-1300-rgb:255, 193, 214; --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb:255, 252, 253; + --spectrum-magenta-1400-rgb:255, 220, 232; --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb:255, 241, 246; + --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb:255, 255, 255; + --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb:58, 0, 37; + --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb:71, 0, 44; + --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb:90, 0, 57; + --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb:115, 7, 75; + --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb:143, 18, 97; + --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb:171, 29, 119; + --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb:196, 39, 138; + --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb:220, 47, 156; + --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb:236, 67, 175; + --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb:251, 90, 196; + --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb:255, 122, 210; + --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb:255, 159, 223; + --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb:255, 191, 234; + --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb:255, 219, 243; + --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb:255, 241, 250; + --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb:255, 255, 255; + --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb:0, 30, 33; + --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb:0, 37, 41; + --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb:0, 49, 54; + --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb:0, 66, 72; + --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb:3, 84, 92; + --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb:5, 103, 112; + --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb:7, 120, 131; + --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb:9, 135, 147; + --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb:11, 151, 164; + --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb:13, 168, 182; + --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb:16, 186, 202; + --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb:64, 208, 220; + --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb:128, 225, 231; + --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb:183, 240, 240; + --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb:228, 249, 249; + --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb:255, 255, 255; + --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb:35, 24, 8; + --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb:44, 31, 11; + --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb:58, 40, 14; + --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb:78, 55, 19; + --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb:98, 71, 30; + --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb:115, 88, 47; + --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb:132, 104, 61; + --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb:148, 118, 73; + --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb:163, 132, 84; + --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb:181, 147, 98; + --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb:199, 163, 112; + --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb:222, 185, 130; + --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb:232, 207, 169; + --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb:242, 227, 206; + --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb:250, 244, 236; + --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb:255, 255, 255; + --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb:26, 26, 26; + --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb:33, 33, 33; + --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb:44, 44, 44; + --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb:59, 59, 59; + --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb:76, 76, 76; + --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb:92, 92, 92; + --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb:108, 108, 108; + --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb:123, 123, 123; + --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb:137, 137, 137; + --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb:152, 152, 152; + --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb:169, 169, 169; + --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb:190, 190, 190; + --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb:211, 211, 211; + --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb:229, 229, 229; + --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb:244, 244, 244; + --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb:255, 255, 255; + --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); diff --git a/tokens/dist/css/darkest-vars.css b/tokens/dist/css/darkest-vars.css deleted file mode 100644 index a12e6bf4992..00000000000 --- a/tokens/dist/css/darkest-vars.css +++ /dev/null @@ -1,459 +0,0 @@ -.spectrum--darkest{ - --spectrum-overlay-opacity:0.6; - --spectrum-drop-shadow-color-rgb:0, 0, 0; - --spectrum-drop-shadow-color-opacity:0.8; - --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --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-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-600); - --spectrum-accent-background-color-hover:var(--spectrum-accent-color-500); - --spectrum-accent-background-color-down:var(--spectrum-accent-color-400); - --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-500); - --spectrum-informative-background-color-default:var(--spectrum-informative-color-600); - --spectrum-informative-background-color-hover:var(--spectrum-informative-color-500); - --spectrum-informative-background-color-down:var(--spectrum-informative-color-400); - --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-500); - --spectrum-negative-background-color-default:var(--spectrum-negative-color-600); - --spectrum-negative-background-color-hover:var(--spectrum-negative-color-500); - --spectrum-negative-background-color-down:var(--spectrum-negative-color-400); - --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-500); - --spectrum-positive-background-color-default:var(--spectrum-positive-color-600); - --spectrum-positive-background-color-hover:var(--spectrum-positive-color-500); - --spectrum-positive-background-color-down:var(--spectrum-positive-color-400); - --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-500); - --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); - --spectrum-gray-background-color-default:var(--spectrum-gray-700); - --spectrum-red-background-color-default:var(--spectrum-red-700); - --spectrum-orange-background-color-default:var(--spectrum-orange-800); - --spectrum-yellow-background-color-default:var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-900); - --spectrum-celery-background-color-default:var(--spectrum-celery-800); - --spectrum-green-background-color-default:var(--spectrum-green-700); - --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default:var(--spectrum-cyan-700); - --spectrum-blue-background-color-default:var(--spectrum-blue-700); - --spectrum-indigo-background-color-default:var(--spectrum-indigo-700); - --spectrum-purple-background-color-default:var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default:var(--spectrum-magenta-700); - --spectrum-neutral-visual-color:var(--spectrum-gray-600); - --spectrum-accent-visual-color:var(--spectrum-accent-color-900); - --spectrum-informative-visual-color:var(--spectrum-informative-color-900); - --spectrum-negative-visual-color:var(--spectrum-negative-color-700); - --spectrum-notice-visual-color:var(--spectrum-notice-color-900); - --spectrum-positive-visual-color:var(--spectrum-positive-color-800); - --spectrum-gray-visual-color:var(--spectrum-gray-600); - --spectrum-red-visual-color:var(--spectrum-red-700); - --spectrum-orange-visual-color:var(--spectrum-orange-900); - --spectrum-yellow-visual-color:var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color:var(--spectrum-celery-800); - --spectrum-green-visual-color:var(--spectrum-green-800); - --spectrum-seafoam-visual-color:var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color:var(--spectrum-cyan-900); - --spectrum-blue-visual-color:var(--spectrum-blue-900); - --spectrum-indigo-visual-color:var(--spectrum-indigo-900); - --spectrum-purple-visual-color:var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color:var(--spectrum-magenta-900); - --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); - --spectrum-gray-50-rgb:0, 0, 0; - --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb:14, 14, 14; - --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb:29, 29, 29; - --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb:48, 48, 48; - --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb:75, 75, 75; - --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb:106, 106, 106; - --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb:141, 141, 141; - --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb:176, 176, 176; - --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb:208, 208, 208; - --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb:235, 235, 235; - --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb:255, 255, 255; - --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb:0, 38, 81; - --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb:0, 50, 106; - --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb:0, 64, 135; - --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb:0, 78, 166; - --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb:0, 92, 200; - --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb:6, 108, 231; - --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb:29, 128, 245; - --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb:64, 150, 243; - --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb:94, 170, 247; - --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb:124, 189, 250; - --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb:152, 206, 253; - --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb:179, 222, 254; - --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb:206, 234, 255; - --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb:227, 243, 255; - --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb:87, 0, 0; - --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb:110, 0, 0; - --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb:138, 0, 0; - --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb:167, 0, 0; - --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb:196, 7, 6; - --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb:221, 33, 24; - --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb:238, 67, 49; - --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb:249, 99, 76; - --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb:255, 129, 107; - --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb:255, 158, 140; - --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb:255, 183, 169; - --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb:255, 205, 195; - --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb:255, 223, 217; - --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb:255, 237, 234; - --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb:72, 24, 1; - --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb:92, 32, 0; - --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb:115, 43, 0; - --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb:138, 55, 0; - --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb:162, 68, 0; - --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb:186, 82, 0; - --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb:210, 98, 0; - --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb:232, 116, 0; - --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb:249, 137, 23; - --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb:255, 162, 59; - --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb:255, 188, 102; - --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb:253, 210, 145; - --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb:255, 226, 181; - --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb:255, 239, 213; - --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb:53, 36, 0; - --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb:68, 47, 0; - --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb:86, 62, 0; - --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb:103, 77, 0; - --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb:122, 92, 0; - --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb:141, 108, 0; - --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb:161, 126, 0; - --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb:180, 144, 0; - --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb:199, 162, 0; - --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb:216, 181, 0; - --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb:233, 199, 0; - --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb:247, 216, 4; - --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb:249, 233, 97; - --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb:252, 243, 170; - --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb:32, 43, 0; - --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb:42, 56, 0; - --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb:54, 72, 0; - --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb:66, 88, 0; - --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb:79, 105, 0; - --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb:93, 123, 0; - --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb:107, 142, 0; - --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb:122, 161, 0; - --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb:138, 180, 3; - --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb:154, 198, 11; - --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb:170, 216, 22; - --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb:187, 232, 41; - --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb:205, 246, 72; - --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb:225, 253, 132; - --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb:0, 47, 7; - --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb:0, 61, 9; - --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb:0, 77, 12; - --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb:0, 95, 15; - --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb:0, 113, 15; - --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb:0, 132, 15; - --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb:0, 151, 20; - --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb:13, 171, 37; - --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb:45, 191, 58; - --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb:80, 208, 82; - --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb:115, 224, 107; - --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb:147, 237, 131; - --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb:180, 247, 162; - --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb:213, 252, 202; - --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb:10, 44, 28; - --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb:7, 59, 36; - --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb:0, 76, 46; - --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb:0, 93, 57; - --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb:0, 111, 69; - --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb:0, 130, 82; - --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb:0, 149, 98; - --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb:28, 168, 114; - --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb:52, 187, 132; - --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb:75, 205, 149; - --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb:103, 222, 168; - --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb:137, 236, 188; - --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb:177, 244, 209; - --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb:214, 249, 228; - --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb:18, 43, 42; - --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb:19, 57, 55; - --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb:16, 73, 70; - --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb:3, 91, 88; - --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb:0, 108, 104; - --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb:0, 127, 121; - --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb:0, 146, 140; - --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb:0, 165, 159; - --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb:26, 185, 178; - --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb:66, 202, 195; - --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb:102, 218, 211; - --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb:139, 232, 225; - --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb:179, 242, 237; - --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb:215, 248, 244; - --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb:0, 41, 68; - --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb:0, 54, 88; - --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb:0, 69, 108; - --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb:0, 86, 128; - --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb:0, 103, 147; - --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb:0, 121, 167; - --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb:0, 140, 186; - --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb:4, 160, 205; - --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb:23, 180, 221; - --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb:57, 199, 234; - --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb:96, 216, 243; - --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb:134, 230, 250; - --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb:170, 242, 255; - --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb:206, 249, 255; - --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb:26, 29, 97; - --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb:35, 39, 125; - --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb:46, 50, 158; - --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb:58, 63, 189; - --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb:73, 78, 216; - --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb:90, 96, 235; - --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb:110, 115, 246; - --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb:132, 136, 253; - --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb:153, 157, 255; - --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb:174, 177, 255; - --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb:194, 196, 255; - --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb:212, 213, 255; - --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb:227, 228, 255; - --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb:240, 240, 255; - --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb:50, 16, 104; - --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb:67, 13, 140; - --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb:86, 16, 173; - --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb:106, 29, 200; - --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb:126, 49, 222; - --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb:145, 70, 236; - --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb:162, 94, 246; - --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb:178, 119, 250; - --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb:192, 143, 252; - --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb:206, 166, 253; - --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb:219, 188, 254; - --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb:230, 207, 255; - --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb:240, 224, 255; - --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb:248, 237, 255; - --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb:70, 14, 68; - --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb:93, 9, 92; - --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb:120, 0, 120; - --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb:146, 0, 147; - --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb:169, 19, 170; - --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb:191, 43, 191; - --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb:211, 65, 213; - --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb:228, 91, 229; - --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb:239, 120, 238; - --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb:246, 149, 243; - --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb:251, 175, 246; - --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb:254, 199, 248; - --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb:255, 220, 250; - --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb:255, 235, 252; - --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb:83, 3, 41; - --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb:106, 0, 52; - --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb:133, 0, 65; - --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb:161, 0, 78; - --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb:186, 22, 93; - --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb:209, 43, 114; - --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb:227, 69, 137; - --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb:241, 97, 156; - --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb:252, 124, 173; - --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb:255, 152, 191; - --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb:255, 179, 207; - --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb:255, 202, 221; - --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb:255, 221, 233; - --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb:255, 236, 243; - --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-1000); -} diff --git a/tokens/dist/css/express/global-vars.css b/tokens/dist/css/express/global-vars.css deleted file mode 100644 index 2afc013168c..00000000000 --- a/tokens/dist/css/express/global-vars.css +++ /dev/null @@ -1,39 +0,0 @@ -.spectrum--express{ - --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800); - --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); - --spectrum-slider-track-thickness:4px; - --spectrum-slider-handle-gap:0px; - --spectrum-picker-border-width:0; - --spectrum-in-field-button-fill-stacked-inner-border-rounding:1px; - --spectrum-in-field-button-edge-to-fill:4px; - --spectrum-in-field-button-stacked-inner-edge-to-fill:1px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:5px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:7px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:8px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:3px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:4px; - --spectrum-border-width-100:2px; - --spectrum-accent-color-100:var(--spectrum-indigo-100); - --spectrum-accent-color-200:var(--spectrum-indigo-200); - --spectrum-accent-color-300:var(--spectrum-indigo-300); - --spectrum-accent-color-400:var(--spectrum-indigo-400); - --spectrum-accent-color-500:var(--spectrum-indigo-500); - --spectrum-accent-color-600:var(--spectrum-indigo-600); - --spectrum-accent-color-700:var(--spectrum-indigo-700); - --spectrum-accent-color-800:var(--spectrum-indigo-800); - --spectrum-accent-color-900:var(--spectrum-indigo-900); - --spectrum-accent-color-1000:var(--spectrum-indigo-1000); - --spectrum-accent-color-1100:var(--spectrum-indigo-1100); - --spectrum-accent-color-1200:var(--spectrum-indigo-1200); - --spectrum-accent-color-1300:var(--spectrum-indigo-1300); - --spectrum-accent-color-1400:var(--spectrum-indigo-1400); - --spectrum-heading-sans-serif-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-cjk-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-black-font-weight); -} diff --git a/tokens/dist/css/express/large-vars.css b/tokens/dist/css/express/large-vars.css deleted file mode 100644 index a1f73565193..00000000000 --- a/tokens/dist/css/express/large-vars.css +++ /dev/null @@ -1,52 +0,0 @@ -.spectrum--express.spectrum--large{ - --spectrum-checkbox-control-size-small:18px; - --spectrum-checkbox-control-size-medium:20px; - --spectrum-checkbox-control-size-large:22px; - --spectrum-checkbox-control-size-extra-large:26px; - --spectrum-checkbox-top-to-control-small:6px; - --spectrum-checkbox-top-to-control-medium:10px; - --spectrum-checkbox-top-to-control-large:14px; - --spectrum-checkbox-top-to-control-extra-large:17px; - --spectrum-switch-control-width-small:32px; - --spectrum-switch-control-width-medium:36px; - --spectrum-switch-control-width-large:41px; - --spectrum-switch-control-width-extra-large:46px; - --spectrum-switch-control-height-small:18px; - --spectrum-switch-control-height-medium:20px; - --spectrum-switch-control-height-large:22px; - --spectrum-switch-control-height-extra-large:26px; - --spectrum-switch-top-to-control-small:6px; - --spectrum-switch-top-to-control-medium:10px; - --spectrum-switch-top-to-control-large:14px; - --spectrum-switch-top-to-control-extra-large:17px; - --spectrum-radio-button-control-size-small:18px; - --spectrum-radio-button-control-size-medium:20px; - --spectrum-radio-button-control-size-large:22px; - --spectrum-radio-button-control-size-extra-large:26px; - --spectrum-radio-button-top-to-control-small:6px; - --spectrum-radio-button-top-to-control-medium:10px; - --spectrum-radio-button-top-to-control-large:14px; - --spectrum-radio-button-top-to-control-extra-large:17px; - --spectrum-slider-control-height-small:22px; - --spectrum-slider-control-height-medium:24px; - --spectrum-slider-control-height-large:28px; - --spectrum-slider-control-height-extra-large:30px; - --spectrum-slider-handle-size-small:22px; - --spectrum-slider-handle-size-medium:24px; - --spectrum-slider-handle-size-large:28px; - --spectrum-slider-handle-size-extra-large:30px; - --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200); - --spectrum-slider-bottom-to-handle-small:4px; - --spectrum-slider-bottom-to-handle-medium:8px; - --spectrum-slider-bottom-to-handle-large:12px; - --spectrum-slider-bottom-to-handle-extra-large:15px; - --spectrum-corner-radius-75:4px; - --spectrum-corner-radius-100:8px; - --spectrum-corner-radius-200:16px; - --spectrum-drop-shadow-x:0px; - --spectrum-drop-shadow-y:4px; - --spectrum-drop-shadow-blur:16px; -} diff --git a/tokens/dist/css/express/medium-vars.css b/tokens/dist/css/express/medium-vars.css deleted file mode 100644 index 306753d6693..00000000000 --- a/tokens/dist/css/express/medium-vars.css +++ /dev/null @@ -1,52 +0,0 @@ -.spectrum--express.spectrum--medium{ - --spectrum-checkbox-control-size-small:14px; - --spectrum-checkbox-control-size-medium:16px; - --spectrum-checkbox-control-size-large:18px; - --spectrum-checkbox-control-size-extra-large:20px; - --spectrum-checkbox-top-to-control-small:5px; - --spectrum-checkbox-top-to-control-medium:8px; - --spectrum-checkbox-top-to-control-large:11px; - --spectrum-checkbox-top-to-control-extra-large:14px; - --spectrum-switch-control-width-small:25px; - --spectrum-switch-control-width-medium:28px; - --spectrum-switch-control-width-large:32px; - --spectrum-switch-control-width-extra-large:35px; - --spectrum-switch-control-height-small:14px; - --spectrum-switch-control-height-medium:16px; - --spectrum-switch-control-height-large:18px; - --spectrum-switch-control-height-extra-large:20px; - --spectrum-switch-top-to-control-small:5px; - --spectrum-switch-top-to-control-medium:8px; - --spectrum-switch-top-to-control-large:11px; - --spectrum-switch-top-to-control-extra-large:14px; - --spectrum-radio-button-control-size-small:14px; - --spectrum-radio-button-control-size-medium:16px; - --spectrum-radio-button-control-size-large:18px; - --spectrum-radio-button-control-size-extra-large:20px; - --spectrum-radio-button-top-to-control-small:5px; - --spectrum-radio-button-top-to-control-medium:8px; - --spectrum-radio-button-top-to-control-large:11px; - --spectrum-radio-button-top-to-control-extra-large:14px; - --spectrum-slider-control-height-small:18px; - --spectrum-slider-control-height-medium:20px; - --spectrum-slider-control-height-large:22px; - --spectrum-slider-control-height-extra-large:24px; - --spectrum-slider-handle-size-small:18px; - --spectrum-slider-handle-size-medium:20px; - --spectrum-slider-handle-size-large:22px; - --spectrum-slider-handle-size-extra-large:24px; - --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200); - --spectrum-slider-bottom-to-handle-small:3px; - --spectrum-slider-bottom-to-handle-medium:6px; - --spectrum-slider-bottom-to-handle-large:9px; - --spectrum-slider-bottom-to-handle-extra-large:12px; - --spectrum-corner-radius-75:3px; - --spectrum-corner-radius-100:6px; - --spectrum-corner-radius-200:12px; - --spectrum-drop-shadow-x:0px; - --spectrum-drop-shadow-y:4px; - --spectrum-drop-shadow-blur:16px; -} diff --git a/tokens/dist/css/global-vars.css b/tokens/dist/css/global-vars.css index b80512bd452..368ced8d2c8 100644 --- a/tokens/dist/css/global-vars.css +++ b/tokens/dist/css/global-vars.css @@ -4,11 +4,20 @@ --spectrum-static-black-focus-indicator-color:var(--spectrum-black); --spectrum-overlay-color:var(--spectrum-black); --spectrum-opacity-disabled:0.3; + --spectrum-neutral-background-color-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); --spectrum-neutral-subdued-content-color-selected:var(--spectrum-neutral-subdued-content-color-down); --spectrum-accent-content-color-selected:var(--spectrum-accent-content-color-down); - --spectrum-disabled-background-color:var(--spectrum-gray-200); - --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-200); - --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-200); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); + --spectrum-disabled-background-color:var(--spectrum-gray-100); + --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-100); + --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-100); --spectrum-background-opacity-default:0; --spectrum-background-opacity-hover:0.1; --spectrum-background-opacity-down:0.1; @@ -21,19 +30,19 @@ --spectrum-neutral-content-color-key-focus:var(--spectrum-gray-900); --spectrum-neutral-subdued-content-color-default:var(--spectrum-gray-700); --spectrum-neutral-subdued-content-color-hover:var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-800); --spectrum-neutral-subdued-content-color-key-focus:var(--spectrum-gray-800); --spectrum-accent-content-color-default:var(--spectrum-accent-color-900); --spectrum-accent-content-color-hover:var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down:var(--spectrum-accent-color-1100); + --spectrum-accent-content-color-down:var(--spectrum-accent-color-1000); --spectrum-accent-content-color-key-focus:var(--spectrum-accent-color-1000); --spectrum-negative-content-color-default:var(--spectrum-negative-color-900); --spectrum-negative-content-color-hover:var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-content-color-down:var(--spectrum-negative-color-1000); --spectrum-negative-content-color-key-focus:var(--spectrum-negative-color-1000); --spectrum-disabled-content-color:var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-500); - --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-500); + --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-400); + --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-400); --spectrum-disabled-border-color:var(--spectrum-gray-300); --spectrum-disabled-static-white-border-color:var(--spectrum-transparent-white-300); --spectrum-disabled-static-black-border-color:var(--spectrum-transparent-black-300); @@ -57,6 +66,8 @@ --spectrum-color-slider-border-color:var(--spectrum-gray-900); --spectrum-color-slider-border-opacity:0.1; --spectrum-color-loupe-drop-shadow-color:var(--spectrum-transparent-black-300); + --spectrum-color-loupe-drop-shadow-y:2px; + --spectrum-color-loupe-drop-shadow-blur:8px; --spectrum-color-loupe-inner-border:var(--spectrum-transparent-black-200); --spectrum-color-loupe-outer-border:var(--spectrum-white); --spectrum-card-selection-background-color:var(--spectrum-gray-100); @@ -67,7 +78,6 @@ --spectrum-coach-mark-pagination-color:var(--spectrum-gray-600); --spectrum-color-handle-inner-border-color:var(--spectrum-black); --spectrum-color-handle-inner-border-opacity:0.42; - --spectrum-color-handle-outer-border-color:var(--spectrum-black); --spectrum-color-handle-outer-border-opacity:var(--spectrum-color-handle-inner-border-opacity); --spectrum-color-handle-drop-shadow-color:var(--spectrum-drop-shadow-color); --spectrum-floating-action-button-drop-shadow-color:var(--spectrum-transparent-black-300); @@ -83,70 +93,89 @@ --spectrum-table-selected-row-background-opacity-non-emphasized-hover:0.15; --spectrum-white-rgb:255, 255, 255; --spectrum-white:rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-25-rgb:255, 255, 255; + --spectrum-transparent-white-25-opacity:0; + --spectrum-transparent-white-25:rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity)); + --spectrum-transparent-white-50-rgb:255, 255, 255; + --spectrum-transparent-white-50-opacity:0.04; + --spectrum-transparent-white-50:rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity)); + --spectrum-transparent-white-75-rgb:255, 255, 255; + --spectrum-transparent-white-75-opacity:0.07; + --spectrum-transparent-white-75:rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity)); --spectrum-transparent-white-100-rgb:255, 255, 255; - --spectrum-transparent-white-100-opacity:0; + --spectrum-transparent-white-100-opacity:0.11; --spectrum-transparent-white-100:rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); --spectrum-transparent-white-200-rgb:255, 255, 255; - --spectrum-transparent-white-200-opacity:0.1; + --spectrum-transparent-white-200-opacity:0.14; --spectrum-transparent-white-200:rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity)); --spectrum-transparent-white-300-rgb:255, 255, 255; - --spectrum-transparent-white-300-opacity:0.25; + --spectrum-transparent-white-300-opacity:0.17; --spectrum-transparent-white-300:rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity)); --spectrum-transparent-white-400-rgb:255, 255, 255; - --spectrum-transparent-white-400-opacity:0.4; + --spectrum-transparent-white-400-opacity:0.21; --spectrum-transparent-white-400:rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity)); --spectrum-transparent-white-500-rgb:255, 255, 255; - --spectrum-transparent-white-500-opacity:0.55; + --spectrum-transparent-white-500-opacity:0.39; --spectrum-transparent-white-500:rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity)); --spectrum-transparent-white-600-rgb:255, 255, 255; - --spectrum-transparent-white-600-opacity:0.7; + --spectrum-transparent-white-600-opacity:0.51; --spectrum-transparent-white-600:rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity)); --spectrum-transparent-white-700-rgb:255, 255, 255; - --spectrum-transparent-white-700-opacity:0.8; + --spectrum-transparent-white-700-opacity:0.66; --spectrum-transparent-white-700:rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity)); --spectrum-transparent-white-800-rgb:255, 255, 255; - --spectrum-transparent-white-800-opacity:0.9; + --spectrum-transparent-white-800-opacity:0.85; --spectrum-transparent-white-800:rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity)); --spectrum-transparent-white-900-rgb:255, 255, 255; - --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb)); + --spectrum-transparent-white-900-opacity:0.94; + --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity)); + --spectrum-transparent-white-1000-rgb:255, 255, 255; + --spectrum-transparent-white-1000:rgba(var(--spectrum-transparent-white-1000-rgb)); --spectrum-black-rgb:0, 0, 0; --spectrum-black:rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-25-rgb:0, 0, 0; + --spectrum-transparent-black-25-opacity:0; + --spectrum-transparent-black-25:rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity)); + --spectrum-transparent-black-50-rgb:0, 0, 0; + --spectrum-transparent-black-50-opacity:0.03; + --spectrum-transparent-black-50:rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity)); + --spectrum-transparent-black-75-rgb:0, 0, 0; + --spectrum-transparent-black-75-opacity:0.05; + --spectrum-transparent-black-75:rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity)); --spectrum-transparent-black-100-rgb:0, 0, 0; - --spectrum-transparent-black-100-opacity:0; + --spectrum-transparent-black-100-opacity:0.09; --spectrum-transparent-black-100:rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity)); --spectrum-transparent-black-200-rgb:0, 0, 0; - --spectrum-transparent-black-200-opacity:0.1; + --spectrum-transparent-black-200-opacity:0.12; --spectrum-transparent-black-200:rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity)); --spectrum-transparent-black-300-rgb:0, 0, 0; - --spectrum-transparent-black-300-opacity:0.25; + --spectrum-transparent-black-300-opacity:0.15; --spectrum-transparent-black-300:rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity)); --spectrum-transparent-black-400-rgb:0, 0, 0; - --spectrum-transparent-black-400-opacity:0.4; + --spectrum-transparent-black-400-opacity:0.22; --spectrum-transparent-black-400:rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); --spectrum-transparent-black-500-rgb:0, 0, 0; - --spectrum-transparent-black-500-opacity:0.55; + --spectrum-transparent-black-500-opacity:0.44; --spectrum-transparent-black-500:rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity)); --spectrum-transparent-black-600-rgb:0, 0, 0; - --spectrum-transparent-black-600-opacity:0.7; + --spectrum-transparent-black-600-opacity:0.56; --spectrum-transparent-black-600:rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity)); --spectrum-transparent-black-700-rgb:0, 0, 0; - --spectrum-transparent-black-700-opacity:0.8; + --spectrum-transparent-black-700-opacity:0.69; --spectrum-transparent-black-700:rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity)); --spectrum-transparent-black-800-rgb:0, 0, 0; - --spectrum-transparent-black-800-opacity:0.9; + --spectrum-transparent-black-800-opacity:0.84; --spectrum-transparent-black-800:rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity)); --spectrum-transparent-black-900-rgb:0, 0, 0; - --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb)); + --spectrum-transparent-black-900-opacity:0.93; + --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity)); + --spectrum-transparent-black-1000-rgb:0, 0, 0; + --spectrum-transparent-black-1000:rgba(var(--spectrum-transparent-black-1000-rgb)); --spectrum-icon-color-inverse:var(--spectrum-gray-50); --spectrum-icon-color-primary-default:var(--spectrum-neutral-content-color-default); - --spectrum-asterisk-icon-size-75:8px; --spectrum-radio-button-selection-indicator:4px; - --spectrum-field-label-top-margin-small:0px; --spectrum-field-label-to-component:0px; --spectrum-help-text-to-component:0px; - --spectrum-status-light-dot-size-small:8px; - --spectrum-action-button-edge-to-hold-icon-extra-small:3px; - --spectrum-action-button-edge-to-hold-icon-small:3px; --spectrum-button-minimum-width-multiplier:2.25; --spectrum-divider-thickness-small:1px; --spectrum-divider-thickness-medium:2px; @@ -166,6 +195,8 @@ --spectrum-popover-tip-height:8px; --spectrum-menu-item-label-to-description:1px; --spectrum-menu-item-section-divider-height:8px; + --spectrum-slider-track-thickness:2px; + --spectrum-slider-handle-gap:4px; --spectrum-picker-minimum-width-multiplier:2; --spectrum-picker-end-edge-to-disclousure-icon-quiet:var(--spectrum-picker-end-edge-to-disclosure-icon-quiet); --spectrum-picker-end-edge-to-disclosure-icon-quiet:0px; @@ -199,8 +230,6 @@ --spectrum-color-loupe-bottom-to-color-handle:12px; --spectrum-color-loupe-outer-border-width:var(--spectrum-border-width-200); --spectrum-color-loupe-inner-border-width:1px; - --spectrum-color-loupe-drop-shadow-y:2px; - --spectrum-color-loupe-drop-shadow-blur:8px; --spectrum-card-minimum-width:100px; --spectrum-card-preview-minimum-height:130px; --spectrum-card-selection-background-size:40px; @@ -211,12 +240,6 @@ --spectrum-drop-zone-title-size:var(--spectrum-illustrated-message-title-size); --spectrum-drop-zone-cjk-title-size:var(--spectrum-illustrated-message-cjk-title-size); --spectrum-drop-zone-body-size:var(--spectrum-illustrated-message-body-size); - --spectrum-accordion-top-to-text-compact-small:2px; - --spectrum-accordion-top-to-text-compact-medium:4px; - --spectrum-accordion-disclosure-indicator-to-text:0px; - --spectrum-accordion-edge-to-disclosure-indicator:0px; - --spectrum-accordion-edge-to-text:0px; - --spectrum-accordion-focus-indicator-gap:0px; --spectrum-color-handle-border-width:var(--spectrum-border-width-200); --spectrum-color-handle-inner-border-width:1px; --spectrum-color-handle-outer-border-width:1px; @@ -235,7 +258,6 @@ --spectrum-table-row-bottom-to-text-medium-compact:var(--spectrum-component-bottom-to-text-100); --spectrum-table-row-bottom-to-text-large-compact:var(--spectrum-component-bottom-to-text-200); --spectrum-table-row-bottom-to-text-extra-large-compact:var(--spectrum-component-bottom-to-text-300); - --spectrum-table-edge-to-content:16px; --spectrum-table-border-divider-width:1px; --spectrum-tab-item-height-small:var(--spectrum-component-height-200); --spectrum-tab-item-height-medium:var(--spectrum-component-height-300); @@ -250,11 +272,21 @@ --spectrum-in-field-button-width-stacked-medium:28px; --spectrum-in-field-button-width-stacked-large:36px; --spectrum-in-field-button-width-stacked-extra-large:44px; + --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px; + --spectrum-in-field-button-edge-to-fill:0px; + --spectrum-in-field-button-stacked-inner-edge-to-fill:0px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small:7px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium:9px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large:13px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large:16px; --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); --spectrum-android-elevation:2dp; --spectrum-spacing-50:2px; --spectrum-spacing-75:4px; @@ -270,6 +302,7 @@ --spectrum-spacing-1000:96px; --spectrum-focus-indicator-thickness:2px; --spectrum-focus-indicator-gap:2px; + --spectrum-border-width-100:1px; --spectrum-border-width-200:2px; --spectrum-border-width-400:4px; --spectrum-field-edge-to-text-quiet:0px; @@ -279,6 +312,22 @@ --spectrum-field-edge-to-validation-icon-quiet:0px; --spectrum-text-underline-thickness:1px; --spectrum-text-underline-gap:1px; + --spectrum-accent-color-100:var(--spectrum-blue-100); + --spectrum-accent-color-200:var(--spectrum-blue-200); + --spectrum-accent-color-300:var(--spectrum-blue-300); + --spectrum-accent-color-400:var(--spectrum-blue-400); + --spectrum-accent-color-500:var(--spectrum-blue-500); + --spectrum-accent-color-600:var(--spectrum-blue-600); + --spectrum-accent-color-700:var(--spectrum-blue-700); + --spectrum-accent-color-800:var(--spectrum-blue-800); + --spectrum-accent-color-900:var(--spectrum-blue-900); + --spectrum-accent-color-1000:var(--spectrum-blue-1000); + --spectrum-accent-color-1100:var(--spectrum-blue-1100); + --spectrum-accent-color-1200:var(--spectrum-blue-1200); + --spectrum-accent-color-1300:var(--spectrum-blue-1300); + --spectrum-accent-color-1400:var(--spectrum-blue-1400); + --spectrum-accent-color-1500:var(--spectrum-blue-1500); + --spectrum-accent-color-1600:var(--spectrum-blue-1600); --spectrum-informative-color-100:var(--spectrum-blue-100); --spectrum-informative-color-200:var(--spectrum-blue-200); --spectrum-informative-color-300:var(--spectrum-blue-300); @@ -293,6 +342,8 @@ --spectrum-informative-color-1200:var(--spectrum-blue-1200); --spectrum-informative-color-1300:var(--spectrum-blue-1300); --spectrum-informative-color-1400:var(--spectrum-blue-1400); + --spectrum-informative-color-1500:var(--spectrum-blue-1500); + --spectrum-informative-color-1600:var(--spectrum-blue-1600); --spectrum-negative-color-100:var(--spectrum-red-100); --spectrum-negative-color-200:var(--spectrum-red-200); --spectrum-negative-color-300:var(--spectrum-red-300); @@ -307,6 +358,8 @@ --spectrum-negative-color-1200:var(--spectrum-red-1200); --spectrum-negative-color-1300:var(--spectrum-red-1300); --spectrum-negative-color-1400:var(--spectrum-red-1400); + --spectrum-negative-color-1500:var(--spectrum-red-1500); + --spectrum-negative-color-1600:var(--spectrum-red-1600); --spectrum-notice-color-100:var(--spectrum-orange-100); --spectrum-notice-color-200:var(--spectrum-orange-200); --spectrum-notice-color-300:var(--spectrum-orange-300); @@ -321,6 +374,8 @@ --spectrum-notice-color-1200:var(--spectrum-orange-1200); --spectrum-notice-color-1300:var(--spectrum-orange-1300); --spectrum-notice-color-1400:var(--spectrum-orange-1400); + --spectrum-notice-color-1500:var(--spectrum-orange-1500); + --spectrum-notice-color-1600:var(--spectrum-orange-1600); --spectrum-positive-color-100:var(--spectrum-green-100); --spectrum-positive-color-200:var(--spectrum-green-200); --spectrum-positive-color-300:var(--spectrum-green-300); @@ -335,6 +390,8 @@ --spectrum-positive-color-1200:var(--spectrum-green-1200); --spectrum-positive-color-1300:var(--spectrum-green-1300); --spectrum-positive-color-1400:var(--spectrum-green-1400); + --spectrum-positive-color-1500:var(--spectrum-green-1500); + --spectrum-positive-color-1600:var(--spectrum-green-1600); --spectrum-default-font-family:var(--spectrum-sans-serif-font-family); --spectrum-sans-serif-font-family:Adobe Clean; --spectrum-serif-font-family:Adobe Clean Serif; @@ -361,8 +418,11 @@ --spectrum-heading-serif-light-font-style:var(--spectrum-default-font-style); --spectrum-heading-cjk-light-font-weight:var(--spectrum-light-font-weight); --spectrum-heading-cjk-light-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); --spectrum-heading-cjk-font-style:var(--spectrum-default-font-style); --spectrum-heading-sans-serif-heavy-font-weight:var(--spectrum-black-font-weight); --spectrum-heading-sans-serif-heavy-font-style:var(--spectrum-default-font-style); @@ -394,7 +454,9 @@ --spectrum-heading-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); --spectrum-heading-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); --spectrum-heading-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-serif-emphasized-font-style:var(--spectrum-italic-font-style); --spectrum-heading-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); --spectrum-heading-cjk-emphasized-font-style:var(--spectrum-default-font-style); diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css index 411c827e0db..03dcddc236c 100644 --- a/tokens/dist/css/large-vars.css +++ b/tokens/dist/css/large-vars.css @@ -1,54 +1,32 @@ .spectrum--large{ - --spectrum-workflow-icon-size-50:18px; - --spectrum-workflow-icon-size-75:20px; - --spectrum-workflow-icon-size-100:22px; - --spectrum-workflow-icon-size-200:24px; - --spectrum-workflow-icon-size-300:28px; - --spectrum-arrow-icon-size-75:12px; - --spectrum-arrow-icon-size-100:14px; - --spectrum-arrow-icon-size-200:16px; - --spectrum-arrow-icon-size-300:16px; - --spectrum-arrow-icon-size-400:18px; - --spectrum-arrow-icon-size-500:22px; - --spectrum-arrow-icon-size-600:24px; - --spectrum-asterisk-icon-size-100:10px; - --spectrum-asterisk-icon-size-200:12px; - --spectrum-asterisk-icon-size-300:12px; - --spectrum-checkmark-icon-size-50:12px; - --spectrum-checkmark-icon-size-75:12px; - --spectrum-checkmark-icon-size-100:14px; - --spectrum-checkmark-icon-size-200:14px; - --spectrum-checkmark-icon-size-300:16px; - --spectrum-checkmark-icon-size-400:18px; - --spectrum-checkmark-icon-size-500:20px; - --spectrum-checkmark-icon-size-600:24px; - --spectrum-chevron-icon-size-50:8px; - --spectrum-chevron-icon-size-75:12px; - --spectrum-chevron-icon-size-100:14px; - --spectrum-chevron-icon-size-200:14px; - --spectrum-chevron-icon-size-300:16px; - --spectrum-chevron-icon-size-400:18px; - --spectrum-chevron-icon-size-500:20px; - --spectrum-chevron-icon-size-600:24px; - --spectrum-corner-triangle-icon-size-75:6px; - --spectrum-corner-triangle-icon-size-100:7px; - --spectrum-corner-triangle-icon-size-200:8px; - --spectrum-corner-triangle-icon-size-300:8px; - --spectrum-cross-icon-size-75:10px; - --spectrum-cross-icon-size-100:10px; - --spectrum-cross-icon-size-200:12px; - --spectrum-cross-icon-size-300:14px; - --spectrum-cross-icon-size-400:16px; - --spectrum-cross-icon-size-500:16px; - --spectrum-cross-icon-size-600:18px; - --spectrum-dash-icon-size-50:10px; - --spectrum-dash-icon-size-75:10px; - --spectrum-dash-icon-size-100:12px; - --spectrum-dash-icon-size-200:14px; - --spectrum-dash-icon-size-300:16px; - --spectrum-dash-icon-size-400:18px; - --spectrum-dash-icon-size-500:20px; - --spectrum-dash-icon-size-600:22px; + --spectrum-checkbox-control-size-small:16px; + --spectrum-checkbox-control-size-medium:18px; + --spectrum-checkbox-control-size-large:20px; + --spectrum-checkbox-control-size-extra-large:22px; + --spectrum-checkbox-top-to-control-small:7px; + --spectrum-checkbox-top-to-control-medium:11px; + --spectrum-checkbox-top-to-control-large:15px; + --spectrum-checkbox-top-to-control-extra-large:19px; + --spectrum-switch-control-width-small:32px; + --spectrum-switch-control-width-medium:36px; + --spectrum-switch-control-width-large:41px; + --spectrum-switch-control-width-extra-large:46px; + --spectrum-switch-control-height-small:16px; + --spectrum-switch-control-height-medium:18px; + --spectrum-switch-control-height-large:20px; + --spectrum-switch-control-height-extra-large:22px; + --spectrum-switch-top-to-control-small:7px; + --spectrum-switch-top-to-control-medium:11px; + --spectrum-switch-top-to-control-large:15px; + --spectrum-switch-top-to-control-extra-large:19px; + --spectrum-radio-button-control-size-small:16px; + --spectrum-radio-button-control-size-medium:18px; + --spectrum-radio-button-control-size-large:20px; + --spectrum-radio-button-control-size-extra-large:22px; + --spectrum-radio-button-top-to-control-small:7px; + --spectrum-radio-button-top-to-control-medium:11px; + --spectrum-radio-button-top-to-control-large:15px; + --spectrum-radio-button-top-to-control-extra-large:19px; --spectrum-field-label-text-to-asterisk-small:5px; --spectrum-field-label-text-to-asterisk-medium:5px; --spectrum-field-label-text-to-asterisk-large:6px; @@ -57,6 +35,7 @@ --spectrum-field-label-top-to-asterisk-medium:15px; --spectrum-field-label-top-to-asterisk-large:19px; --spectrum-field-label-top-to-asterisk-extra-large:24px; + --spectrum-field-label-top-margin-small:0px; --spectrum-field-label-top-margin-medium:5px; --spectrum-field-label-top-margin-large:6px; --spectrum-field-label-top-margin-extra-large:6px; @@ -68,6 +47,7 @@ --spectrum-help-text-top-to-workflow-icon-medium:4px; --spectrum-help-text-top-to-workflow-icon-large:8px; --spectrum-help-text-top-to-workflow-icon-extra-large:11px; + --spectrum-status-light-dot-size-small:8px; --spectrum-status-light-dot-size-medium:10px; --spectrum-status-light-dot-size-large:12px; --spectrum-status-light-dot-size-extra-large:12px; @@ -75,6 +55,8 @@ --spectrum-status-light-top-to-dot-medium:15px; --spectrum-status-light-top-to-dot-large:19px; --spectrum-status-light-top-to-dot-extra-large:24px; + --spectrum-action-button-edge-to-hold-icon-extra-small:3px; + --spectrum-action-button-edge-to-hold-icon-small:3px; --spectrum-action-button-edge-to-hold-icon-medium:5px; --spectrum-action-button-edge-to-hold-icon-large:6px; --spectrum-action-button-edge-to-hold-icon-extra-large:7px; @@ -124,6 +106,22 @@ --spectrum-menu-item-top-to-selected-icon-medium:13px; --spectrum-menu-item-top-to-selected-icon-large:17px; --spectrum-menu-item-top-to-selected-icon-extra-large:22px; + --spectrum-slider-control-height-small:18px; + --spectrum-slider-control-height-medium:20px; + --spectrum-slider-control-height-large:22px; + --spectrum-slider-control-height-extra-large:26px; + --spectrum-slider-handle-size-small:18px; + --spectrum-slider-handle-size-medium:20px; + --spectrum-slider-handle-size-large:22px; + --spectrum-slider-handle-size-extra-large:26px; + --spectrum-slider-handle-border-width-down-small:7px; + --spectrum-slider-handle-border-width-down-medium:8px; + --spectrum-slider-handle-border-width-down-large:9px; + --spectrum-slider-handle-border-width-down-extra-large:11px; + --spectrum-slider-bottom-to-handle-small:6px; + --spectrum-slider-bottom-to-handle-medium:10px; + --spectrum-slider-bottom-to-handle-large:14px; + --spectrum-slider-bottom-to-handle-extra-large:17px; --spectrum-slider-control-to-field-label-small:6px; --spectrum-slider-control-to-field-label-medium:10px; --spectrum-slider-control-to-field-label-large:14px; @@ -154,7 +152,7 @@ --spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs); --spectrum-opacity-checkerboard-square-size:10px; --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size:var(--spectrum-body-size-xs); + --spectrum-contextual-help-body-size:var(--spectrum-heading-size-xs); --spectrum-breadcrumbs-height-multiline:84px; --spectrum-breadcrumbs-top-to-text:17px; --spectrum-breadcrumbs-top-to-text-compact:16px; @@ -207,8 +205,10 @@ --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xxs); --spectrum-coach-mark-body-size:var(--spectrum-body-size-xs); --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-xs); + --spectrum-accordion-top-to-text-compact-small:2px; --spectrum-accordion-top-to-text-regular-small:7px; --spectrum-accordion-small-top-to-text-spacious:12px; + --spectrum-accordion-top-to-text-compact-medium:4px; --spectrum-accordion-top-to-text-regular-medium:9px; --spectrum-accordion-top-to-text-spacious-medium:14px; --spectrum-accordion-top-to-text-compact-large:7px; @@ -230,6 +230,10 @@ --spectrum-accordion-bottom-to-text-regular-extra-large:15px; --spectrum-accordion-bottom-to-text-spacious-extra-large:21px; --spectrum-accordion-minimum-width:250px; + --spectrum-accordion-disclosure-indicator-to-text:0px; + --spectrum-accordion-edge-to-disclosure-indicator:0px; + --spectrum-accordion-edge-to-text:0px; + --spectrum-accordion-focus-indicator-gap:0px; --spectrum-accordion-content-area-top-to-content:10px; --spectrum-accordion-content-area-bottom-to-content:20px; --spectrum-color-handle-size:20px; @@ -266,6 +270,7 @@ --spectrum-table-row-bottom-to-text-medium-spacious:18px; --spectrum-table-row-bottom-to-text-large-spacious:23px; --spectrum-table-row-bottom-to-text-extra-large-spacious:27px; + --spectrum-table-edge-to-content:16px; --spectrum-table-checkbox-to-text:30px; --spectrum-table-header-row-checkbox-to-top-small:14px; --spectrum-table-header-row-checkbox-to-top-medium:13px; @@ -347,10 +352,20 @@ --spectrum-side-navigation-with-icon-second-level-edge-to-text:62px; --spectrum-side-navigation-with-icon-third-level-edge-to-text:77px; --spectrum-side-navigation-item-to-item:5px; - --spectrum-side-navigation-item-to-header:30px; - --spectrum-side-navigation-header-to-item:10px; + --spectrum-side-navigation-item-to-header:20px; --spectrum-side-navigation-bottom-to-text:10px; --spectrum-tray-top-to-content-area:5px; + --spectrum-corner-radius-75:2px; + --spectrum-corner-radius-100:5px; + --spectrum-corner-radius-200:10px; + --spectrum-drop-shadow-x:0px; + --spectrum-drop-shadow-y:2px; + --spectrum-drop-shadow-blur:6px; + --spectrum-workflow-icon-size-50:18px; + --spectrum-workflow-icon-size-75:20px; + --spectrum-workflow-icon-size-100:22px; + --spectrum-workflow-icon-size-200:24px; + --spectrum-workflow-icon-size-300:28px; --spectrum-text-to-visual-50:8px; --spectrum-text-to-visual-75:9px; --spectrum-text-to-visual-100:10px; @@ -467,10 +482,10 @@ --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px; --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:22px; - --spectrum-navigational-indicator-top-to-back-icon-small:7px; - --spectrum-navigational-indicator-top-to-back-icon-medium:12px; - --spectrum-navigational-indicator-top-to-back-icon-large:16px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large:19px; + --spectrum-navigational-indicator-top-to-back-icon-small:9px; + --spectrum-navigational-indicator-top-to-back-icon-medium:13px; + --spectrum-navigational-indicator-top-to-back-icon-large:17px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:22px; --spectrum-color-control-track-width:30px; --spectrum-font-size-50:13px; --spectrum-font-size-75:15px; diff --git a/tokens/dist/css/light-vars.css b/tokens/dist/css/light-vars.css index 43d7086ec86..fb2692cc1dc 100644 --- a/tokens/dist/css/light-vars.css +++ b/tokens/dist/css/light-vars.css @@ -3,34 +3,29 @@ --spectrum-drop-shadow-color-rgb:0, 0, 0; --spectrum-drop-shadow-color-opacity:0.15; --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --spectrum-background-base-color:var(--spectrum-gray-200); - --spectrum-background-layer-1-color:var(--spectrum-gray-100); - --spectrum-background-layer-2-color:var(--spectrum-gray-50); - --spectrum-neutral-background-color-default:var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover:var(--spectrum-gray-900); - --spectrum-neutral-background-color-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900); - --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-600); - --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-700); + --spectrum-background-base-color:var(--spectrum-gray-100); + --spectrum-background-layer-1-color:var(--spectrum-gray-50); + --spectrum-background-layer-2-color:var(--spectrum-gray-25); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-800); --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-800); --spectrum-accent-background-color-default:var(--spectrum-accent-color-900); --spectrum-accent-background-color-hover:var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down:var(--spectrum-accent-color-1100); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-1000); --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-1000); --spectrum-informative-background-color-default:var(--spectrum-informative-color-900); --spectrum-informative-background-color-hover:var(--spectrum-informative-color-1000); - --spectrum-informative-background-color-down:var(--spectrum-informative-color-1100); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-1000); --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-1000); --spectrum-negative-background-color-default:var(--spectrum-negative-color-900); --spectrum-negative-background-color-hover:var(--spectrum-negative-color-1000); - --spectrum-negative-background-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-1000); --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-1000); --spectrum-positive-background-color-default:var(--spectrum-positive-color-900); --spectrum-positive-background-color-hover:var(--spectrum-positive-color-1000); - --spectrum-positive-background-color-down:var(--spectrum-positive-color-1100); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-1000); --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000); - --spectrum-notice-background-color-default:var(--spectrum-notice-color-600); --spectrum-gray-background-color-default:var(--spectrum-gray-700); --spectrum-red-background-color-default:var(--spectrum-red-900); --spectrum-orange-background-color-default:var(--spectrum-orange-600); @@ -66,392 +61,576 @@ --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-800); --spectrum-magenta-visual-color:var(--spectrum-magenta-800); --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200); - --spectrum-gray-50-rgb:255, 255, 255; + --spectrum-gray-25-rgb:255, 255, 255; + --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb:248, 248, 248; --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb:253, 253, 253; + --spectrum-gray-75-rgb:243, 243, 243; --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb:248, 248, 248; + --spectrum-gray-100-rgb:233, 233, 233; --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb:230, 230, 230; + --spectrum-gray-200-rgb:225, 225, 225; --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb:213, 213, 213; + --spectrum-gray-300-rgb:218, 218, 218; --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb:177, 177, 177; + --spectrum-gray-400-rgb:198, 198, 198; --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb:144, 144, 144; + --spectrum-gray-500-rgb:143, 143, 143; --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb:109, 109, 109; + --spectrum-gray-600-rgb:113, 113, 113; --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb:70, 70, 70; + --spectrum-gray-700-rgb:80, 80, 80; --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb:34, 34, 34; + --spectrum-gray-800-rgb:41, 41, 41; --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb:0, 0, 0; + --spectrum-gray-900-rgb:19, 19, 19; --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb:224, 242, 255; + --spectrum-gray-1000-rgb:0, 0, 0; + --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb:245, 249, 255; --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb:202, 232, 255; + --spectrum-blue-200-rgb:229, 240, 254; --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb:181, 222, 255; + --spectrum-blue-300-rgb:203, 226, 254; --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb:150, 206, 253; + --spectrum-blue-400-rgb:172, 207, 253; --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb:120, 187, 250; + --spectrum-blue-500-rgb:142, 185, 252; --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb:89, 167, 246; + --spectrum-blue-600-rgb:114, 158, 253; --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb:56, 146, 243; + --spectrum-blue-700-rgb:93, 137, 255; --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb:20, 122, 243; + --spectrum-blue-800-rgb:75, 117, 255; --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb:2, 101, 220; + --spectrum-blue-900-rgb:59, 99, 251; --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb:0, 84, 182; + --spectrum-blue-1000-rgb:39, 77, 234; --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb:0, 68, 145; + --spectrum-blue-1100-rgb:29, 62, 207; --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb:0, 53, 113; + --spectrum-blue-1200-rgb:21, 50, 173; --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb:0, 39, 84; + --spectrum-blue-1300-rgb:16, 40, 140; --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb:0, 28, 60; + --spectrum-blue-1400-rgb:12, 31, 105; --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb:255, 235, 231; + --spectrum-blue-1500-rgb:14, 24, 67; + --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb:7, 11, 30; + --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb:255, 246, 245; --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb:255, 221, 214; + --spectrum-red-200-rgb:255, 235, 232; --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb:255, 205, 195; + --spectrum-red-300-rgb:255, 214, 209; --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb:255, 183, 169; + --spectrum-red-400-rgb:255, 188, 180; --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb:255, 155, 136; + --spectrum-red-500-rgb:255, 157, 145; --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb:255, 124, 101; + --spectrum-red-600-rgb:255, 118, 101; --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb:247, 92, 70; + --spectrum-red-700-rgb:255, 81, 61; --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb:234, 56, 41; + --spectrum-red-800-rgb:240, 56, 35; --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb:211, 21, 16; + --spectrum-red-900-rgb:215, 50, 32; --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb:180, 0, 0; + --spectrum-red-1000-rgb:183, 40, 24; --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb:147, 0, 0; + --spectrum-red-1100-rgb:156, 33, 19; --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb:116, 0, 0; + --spectrum-red-1200-rgb:129, 27, 14; --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb:89, 0, 0; + --spectrum-red-1300-rgb:104, 21, 10; --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb:67, 0, 0; + --spectrum-red-1400-rgb:80, 16, 6; --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb:255, 236, 204; + --spectrum-red-1500-rgb:59, 11, 4; + --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb:29, 5, 2; + --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb:255, 246, 231; --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb:255, 223, 173; + --spectrum-orange-200-rgb:255, 236, 207; --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb:253, 210, 145; + --spectrum-orange-300-rgb:255, 218, 158; --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb:255, 187, 99; + --spectrum-orange-400-rgb:255, 193, 94; --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb:255, 160, 55; + --spectrum-orange-500-rgb:255, 162, 19; --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb:246, 133, 17; + --spectrum-orange-600-rgb:252, 125, 0; --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb:228, 111, 0; + --spectrum-orange-700-rgb:232, 106, 0; --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb:203, 93, 0; + --spectrum-orange-800-rgb:212, 91, 0; --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb:177, 76, 0; + --spectrum-orange-900-rgb:194, 78, 0; --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb:149, 61, 0; + --spectrum-orange-1000-rgb:167, 62, 0; --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb:122, 47, 0; + --spectrum-orange-1100-rgb:144, 51, 0; --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb:97, 35, 0; + --spectrum-orange-1200-rgb:118, 41, 0; --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb:73, 25, 1; + --spectrum-orange-1300-rgb:95, 32, 0; --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb:53, 18, 1; + --spectrum-orange-1400-rgb:73, 24, 0; --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb:251, 241, 152; + --spectrum-orange-1500-rgb:52, 18, 0; + --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb:25, 8, 0; + --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb:255, 248, 204; --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb:248, 231, 80; + --spectrum-yellow-200-rgb:255, 241, 151; --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb:248, 217, 4; + --spectrum-yellow-300-rgb:255, 222, 44; --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb:232, 198, 0; + --spectrum-yellow-400-rgb:245, 199, 0; --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb:215, 179, 0; + --spectrum-yellow-500-rgb:230, 175, 0; --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb:196, 159, 0; + --spectrum-yellow-600-rgb:210, 149, 0; --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb:176, 140, 0; + --spectrum-yellow-700-rgb:193, 131, 0; --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb:155, 120, 0; + --spectrum-yellow-800-rgb:175, 116, 0; --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb:133, 102, 0; + --spectrum-yellow-900-rgb:158, 102, 0; --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb:112, 83, 0; + --spectrum-yellow-1000-rgb:134, 85, 0; --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb:91, 67, 0; + --spectrum-yellow-1100-rgb:114, 72, 0; --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb:72, 51, 0; + --spectrum-yellow-1200-rgb:93, 59, 0; --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb:54, 37, 0; + --spectrum-yellow-1300-rgb:75, 47, 0; --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb:40, 26, 0; + --spectrum-yellow-1400-rgb:56, 35, 0; --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb:219, 252, 110; + --spectrum-yellow-1500-rgb:40, 25, 0; + --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb:18, 11, 0; + --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb:246, 251, 222; --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb:203, 244, 67; + --spectrum-chartreuse-200-rgb:234, 246, 173; --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb:188, 233, 42; + --spectrum-chartreuse-300-rgb:208, 236, 70; --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb:170, 216, 22; + --spectrum-chartreuse-400-rgb:182, 219, 0; --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb:152, 197, 10; + --spectrum-chartreuse-500-rgb:163, 196, 0; --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb:135, 177, 3; + --spectrum-chartreuse-600-rgb:143, 172, 0; --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb:118, 156, 0; + --spectrum-chartreuse-700-rgb:128, 153, 0; --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb:103, 136, 0; + --spectrum-chartreuse-800-rgb:114, 137, 0; --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb:87, 116, 0; + --spectrum-chartreuse-900-rgb:102, 122, 0; --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb:72, 96, 0; + --spectrum-chartreuse-1000-rgb:86, 103, 0; --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb:58, 77, 0; + --spectrum-chartreuse-1100-rgb:73, 87, 0; --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb:44, 59, 0; + --spectrum-chartreuse-1200-rgb:60, 71, 0; --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb:33, 44, 0; + --spectrum-chartreuse-1300-rgb:47, 57, 0; --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb:24, 31, 0; + --spectrum-chartreuse-1400-rgb:35, 43, 0; --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb:205, 252, 191; + --spectrum-chartreuse-1500-rgb:25, 30, 0; + --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb:11, 14, 0; + --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb:235, 255, 220; --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb:174, 246, 157; + --spectrum-celery-200-rgb:197, 255, 156; --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb:150, 238, 133; + --spectrum-celery-300-rgb:157, 247, 92; --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb:114, 224, 106; + --spectrum-celery-400-rgb:129, 228, 58; --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb:78, 207, 80; + --spectrum-celery-500-rgb:110, 206, 42; --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb:39, 187, 54; + --spectrum-celery-600-rgb:93, 180, 31; --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb:7, 167, 33; + --spectrum-celery-700-rgb:82, 161, 25; --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb:0, 145, 18; + --spectrum-celery-800-rgb:72, 144, 20; --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb:0, 124, 15; + --spectrum-celery-900-rgb:64, 129, 17; --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb:0, 103, 15; + --spectrum-celery-1000-rgb:52, 109, 12; --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb:0, 83, 13; + --spectrum-celery-1100-rgb:44, 92, 9; --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb:0, 64, 10; + --spectrum-celery-1200-rgb:35, 75, 6; --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb:0, 48, 7; + --spectrum-celery-1300-rgb:27, 60, 3; --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb:0, 34, 5; + --spectrum-celery-1400-rgb:19, 46, 0; --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb:206, 248, 224; + --spectrum-celery-1500-rgb:12, 33, 0; + --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb:4, 15, 0; + --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb:237, 252, 241; --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb:173, 244, 206; + --spectrum-green-200-rgb:215, 247, 225; --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb:137, 236, 188; + --spectrum-green-300-rgb:173, 238, 197; --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb:103, 222, 168; + --spectrum-green-400-rgb:107, 227, 162; --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb:73, 204, 147; + --spectrum-green-500-rgb:43, 209, 125; --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb:47, 184, 128; + --spectrum-green-600-rgb:18, 184, 103; --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb:21, 164, 110; + --spectrum-green-700-rgb:11, 164, 93; --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb:0, 143, 93; + --spectrum-green-800-rgb:7, 147, 85; --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb:0, 122, 77; + --spectrum-green-900-rgb:5, 131, 78; --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb:0, 101, 62; + --spectrum-green-1000-rgb:3, 110, 69; --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb:0, 81, 50; + --spectrum-green-1100-rgb:2, 93, 60; --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb:5, 63, 39; + --spectrum-green-1200-rgb:1, 76, 52; --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb:10, 46, 29; + --spectrum-green-1300-rgb:0, 61, 44; --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb:10, 32, 21; + --spectrum-green-1400-rgb:0, 46, 34; --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb:206, 247, 243; + --spectrum-green-1500-rgb:0, 33, 25; + --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb:0, 15, 12; + --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb:235, 251, 246; --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb:170, 241, 234; + --spectrum-seafoam-200-rgb:211, 246, 234; --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb:140, 233, 226; + --spectrum-seafoam-300-rgb:169, 237, 216; --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb:101, 218, 210; + --spectrum-seafoam-400-rgb:92, 225, 194; --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb:63, 201, 193; + --spectrum-seafoam-500-rgb:16, 207, 169; --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb:15, 181, 174; + --spectrum-seafoam-600-rgb:13, 181, 149; --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb:0, 161, 154; + --spectrum-seafoam-700-rgb:11, 162, 134; --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb:0, 140, 135; + --spectrum-seafoam-800-rgb:9, 144, 120; --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb:0, 119, 114; + --spectrum-seafoam-900-rgb:7, 129, 109; --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb:0, 99, 95; + --spectrum-seafoam-1000-rgb:5, 108, 92; --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb:12, 79, 76; + --spectrum-seafoam-1100-rgb:3, 92, 80; --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb:18, 60, 58; + --spectrum-seafoam-1200-rgb:1, 75, 67; --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb:18, 44, 43; + --spectrum-seafoam-1300-rgb:0, 60, 54; --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb:15, 31, 30; + --spectrum-seafoam-1400-rgb:0, 46, 40; --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb:197, 248, 255; + --spectrum-seafoam-1500-rgb:0, 33, 29; + --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb:0, 15, 14; + --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb:238, 250, 254; --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb:164, 240, 255; + --spectrum-cyan-200-rgb:217, 244, 253; --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb:136, 231, 250; + --spectrum-cyan-300-rgb:183, 231, 252; --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb:96, 216, 243; + --spectrum-cyan-400-rgb:138, 213, 255; --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb:51, 197, 232; + --spectrum-cyan-500-rgb:92, 192, 255; --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb:18, 176, 218; + --spectrum-cyan-600-rgb:48, 167, 254; --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb:1, 156, 200; + --spectrum-cyan-700-rgb:29, 149, 231; --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb:0, 134, 180; + --spectrum-cyan-800-rgb:18, 134, 205; --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb:0, 113, 159; + --spectrum-cyan-900-rgb:11, 120, 179; --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb:0, 93, 137; + --spectrum-cyan-1000-rgb:4, 102, 145; --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb:0, 74, 115; + --spectrum-cyan-1100-rgb:0, 87, 121; --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb:0, 57, 93; + --spectrum-cyan-1200-rgb:0, 71, 98; --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb:0, 42, 70; + --spectrum-cyan-1300-rgb:0, 57, 78; --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb:0, 30, 51; + --spectrum-cyan-1400-rgb:0, 43, 59; --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb:237, 238, 255; + --spectrum-cyan-1500-rgb:0, 31, 43; + --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb:0, 14, 20; + --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb:247, 248, 255; --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb:224, 226, 255; + --spectrum-indigo-200-rgb:235, 238, 255; --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb:211, 213, 255; + --spectrum-indigo-300-rgb:216, 222, 255; --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb:193, 196, 255; + --spectrum-indigo-400-rgb:192, 201, 255; --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb:172, 175, 255; + --spectrum-indigo-500-rgb:167, 178, 255; --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb:149, 153, 255; + --spectrum-indigo-600-rgb:145, 151, 254; --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb:126, 132, 252; + --spectrum-indigo-700-rgb:132, 128, 254; --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb:104, 109, 244; + --spectrum-indigo-800-rgb:122, 106, 253; --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb:82, 88, 228; + --spectrum-indigo-900-rgb:113, 85, 250; --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb:64, 70, 202; + --spectrum-indigo-1000-rgb:99, 56, 238; --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb:50, 54, 168; + --spectrum-indigo-1100-rgb:84, 36, 219; --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb:38, 41, 134; + --spectrum-indigo-1200-rgb:69, 19, 191; --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb:27, 30, 100; + --spectrum-indigo-1300-rgb:55, 6, 160; --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb:20, 22, 72; + --spectrum-indigo-1400-rgb:42, 0, 129; --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb:246, 235, 255; + --spectrum-indigo-1500-rgb:31, 0, 98; + --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb:17, 0, 54; + --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb:251, 247, 254; --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb:238, 221, 255; + --spectrum-purple-200-rgb:244, 235, 252; --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb:230, 208, 255; + --spectrum-purple-300-rgb:235, 218, 249; --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb:219, 187, 254; + --spectrum-purple-400-rgb:221, 193, 246; --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb:204, 164, 253; + --spectrum-purple-500-rgb:208, 167, 243; --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb:189, 139, 252; + --spectrum-purple-600-rgb:191, 138, 238; --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb:174, 114, 249; + --spectrum-purple-700-rgb:178, 114, 235; --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb:157, 87, 244; + --spectrum-purple-800-rgb:166, 92, 231; --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb:137, 61, 231; + --spectrum-purple-900-rgb:154, 71, 226; --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb:115, 38, 211; + --spectrum-purple-1000-rgb:134, 40, 217; --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb:93, 19, 183; + --spectrum-purple-1100-rgb:115, 13, 204; --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb:71, 12, 148; + --spectrum-purple-1200-rgb:93, 0, 177; --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb:51, 16, 106; + --spectrum-purple-1300-rgb:75, 0, 144; --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb:35, 15, 73; + --spectrum-purple-1400-rgb:59, 0, 111; --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb:255, 233, 252; + --spectrum-purple-1500-rgb:44, 0, 84; + --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb:23, 0, 45; + --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb:254, 246, 255; --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb:255, 218, 250; + --spectrum-fuchsia-200-rgb:253, 233, 255; --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb:254, 199, 248; + --spectrum-fuchsia-300-rgb:250, 211, 255; --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb:251, 174, 246; + --spectrum-fuchsia-400-rgb:247, 181, 255; --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb:245, 146, 243; + --spectrum-fuchsia-500-rgb:243, 147, 255; --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb:237, 116, 237; + --spectrum-fuchsia-600-rgb:236, 105, 255; --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb:224, 85, 226; + --spectrum-fuchsia-700-rgb:223, 77, 245; --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb:205, 58, 206; + --spectrum-fuchsia-800-rgb:200, 68, 220; --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb:182, 34, 183; + --spectrum-fuchsia-900-rgb:181, 57, 200; --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb:157, 3, 158; + --spectrum-fuchsia-1000-rgb:156, 40, 175; --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb:128, 0, 129; + --spectrum-fuchsia-1100-rgb:135, 27, 154; --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb:100, 6, 100; + --spectrum-fuchsia-1200-rgb:113, 15, 131; --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb:71, 14, 70; + --spectrum-fuchsia-1300-rgb:92, 4, 109; --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb:50, 13, 49; + --spectrum-fuchsia-1400-rgb:72, 0, 88; --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb:255, 234, 241; + --spectrum-fuchsia-1500-rgb:54, 0, 66; + --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb:29, 0, 35; + --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb:255, 245, 248; --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb:255, 220, 232; + --spectrum-magenta-200-rgb:255, 232, 240; --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb:255, 202, 221; + --spectrum-magenta-300-rgb:255, 213, 227; --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb:255, 178, 206; + --spectrum-magenta-400-rgb:255, 185, 208; --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb:255, 149, 189; + --spectrum-magenta-500-rgb:255, 152, 187; --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb:250, 119, 170; + --spectrum-magenta-600-rgb:255, 112, 159; --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb:239, 90, 152; + --spectrum-magenta-700-rgb:255, 72, 133; --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb:222, 61, 130; + --spectrum-magenta-800-rgb:240, 45, 110; --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb:200, 34, 105; + --spectrum-magenta-900-rgb:217, 35, 97; --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb:173, 9, 85; + --spectrum-magenta-1000-rgb:186, 22, 80; --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb:142, 0, 69; + --spectrum-magenta-1100-rgb:163, 5, 62; --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb:112, 0, 55; + --spectrum-magenta-1200-rgb:136, 0, 51; --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb:84, 3, 42; + --spectrum-magenta-1300-rgb:111, 0, 40; --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb:60, 6, 29; + --spectrum-magenta-1400-rgb:86, 0, 30; --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb:64, 0, 22; + --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb:35, 0, 12; + --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb:255, 246, 252; + --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb:255, 232, 247; + --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb:255, 211, 240; + --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb:255, 181, 230; + --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb:255, 148, 219; + --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb:255, 103, 204; + --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb:242, 76, 184; + --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb:228, 52, 163; + --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb:206, 42, 146; + --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb:176, 31, 123; + --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb:152, 22, 104; + --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb:128, 12, 85; + --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb:105, 3, 68; + --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb:83, 0, 53; + --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb:62, 0, 39; + --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb:33, 0, 21; + --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb:238, 251, 251; + --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb:209, 245, 245; + --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb:169, 236, 237; + --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb:111, 221, 228; + --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb:39, 202, 216; + --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb:15, 177, 192; + --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb:12, 158, 171; + --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb:10, 141, 153; + --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb:8, 126, 137; + --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb:5, 107, 116; + --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb:3, 90, 98; + --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb:1, 74, 81; + --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb:0, 59, 65; + --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb:0, 44, 49; + --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb:0, 32, 35; + --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb:0, 15, 17; + --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb:252, 247, 242; + --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb:247, 238, 225; + --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb:239, 221, 195; + --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb:229, 200, 157; + --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb:214, 177, 123; + --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb:190, 155, 104; + --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb:171, 138, 90; + --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb:154, 123, 77; + --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb:139, 109, 66; + --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb:119, 91, 50; + --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb:103, 76, 35; + --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb:88, 61, 21; + --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb:70, 49, 17; + --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb:52, 37, 13; + --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb:38, 26, 9; + --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb:16, 12, 4; + --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb:247, 247, 247; + --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb:239, 239, 239; + --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb:223, 223, 223; + --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb:204, 204, 204; + --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb:183, 183, 183; + --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb:160, 160, 160; + --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb:143, 143, 143; + --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb:128, 128, 128; + --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb:114, 114, 114; + --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb:96, 96, 96; + --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb:81, 81, 81; + --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb:66, 66, 66; + --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb:52, 52, 52; + --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb:39, 39, 39; + --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb:28, 28, 28; + --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb:12, 12, 12; + --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-900); --spectrum-icon-color-green-primary-default:var(--spectrum-green-900); --spectrum-icon-color-red-primary-default:var(--spectrum-red-900); diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css index d89901c5f48..99bd8530e17 100644 --- a/tokens/dist/css/medium-vars.css +++ b/tokens/dist/css/medium-vars.css @@ -1,54 +1,32 @@ .spectrum--medium{ - --spectrum-workflow-icon-size-50:14px; - --spectrum-workflow-icon-size-75:16px; - --spectrum-workflow-icon-size-100:18px; - --spectrum-workflow-icon-size-200:20px; - --spectrum-workflow-icon-size-300:22px; - --spectrum-arrow-icon-size-75:10px; - --spectrum-arrow-icon-size-100:10px; - --spectrum-arrow-icon-size-200:12px; - --spectrum-arrow-icon-size-300:14px; - --spectrum-arrow-icon-size-400:16px; - --spectrum-arrow-icon-size-500:18px; - --spectrum-arrow-icon-size-600:20px; - --spectrum-asterisk-icon-size-100:8px; - --spectrum-asterisk-icon-size-200:10px; - --spectrum-asterisk-icon-size-300:10px; - --spectrum-checkmark-icon-size-50:10px; - --spectrum-checkmark-icon-size-75:10px; - --spectrum-checkmark-icon-size-100:10px; - --spectrum-checkmark-icon-size-200:12px; - --spectrum-checkmark-icon-size-300:14px; - --spectrum-checkmark-icon-size-400:16px; - --spectrum-checkmark-icon-size-500:16px; - --spectrum-checkmark-icon-size-600:18px; - --spectrum-chevron-icon-size-50:6px; - --spectrum-chevron-icon-size-75:10px; - --spectrum-chevron-icon-size-100:10px; - --spectrum-chevron-icon-size-200:12px; - --spectrum-chevron-icon-size-300:14px; - --spectrum-chevron-icon-size-400:16px; - --spectrum-chevron-icon-size-500:16px; - --spectrum-chevron-icon-size-600:18px; - --spectrum-corner-triangle-icon-size-75:5px; - --spectrum-corner-triangle-icon-size-100:5px; - --spectrum-corner-triangle-icon-size-200:6px; - --spectrum-corner-triangle-icon-size-300:7px; - --spectrum-cross-icon-size-75:8px; - --spectrum-cross-icon-size-100:8px; - --spectrum-cross-icon-size-200:10px; - --spectrum-cross-icon-size-300:12px; - --spectrum-cross-icon-size-400:12px; - --spectrum-cross-icon-size-500:14px; - --spectrum-cross-icon-size-600:16px; - --spectrum-dash-icon-size-50:8px; - --spectrum-dash-icon-size-75:8px; - --spectrum-dash-icon-size-100:10px; - --spectrum-dash-icon-size-200:12px; - --spectrum-dash-icon-size-300:12px; - --spectrum-dash-icon-size-400:14px; - --spectrum-dash-icon-size-500:16px; - --spectrum-dash-icon-size-600:18px; + --spectrum-checkbox-control-size-small:12px; + --spectrum-checkbox-control-size-medium:14px; + --spectrum-checkbox-control-size-large:16px; + --spectrum-checkbox-control-size-extra-large:18px; + --spectrum-checkbox-top-to-control-small:6px; + --spectrum-checkbox-top-to-control-medium:9px; + --spectrum-checkbox-top-to-control-large:12px; + --spectrum-checkbox-top-to-control-extra-large:15px; + --spectrum-switch-control-width-small:23px; + --spectrum-switch-control-width-medium:26px; + --spectrum-switch-control-width-large:29px; + --spectrum-switch-control-width-extra-large:33px; + --spectrum-switch-control-height-small:12px; + --spectrum-switch-control-height-medium:14px; + --spectrum-switch-control-height-large:16px; + --spectrum-switch-control-height-extra-large:18px; + --spectrum-switch-top-to-control-small:6px; + --spectrum-switch-top-to-control-medium:9px; + --spectrum-switch-top-to-control-large:12px; + --spectrum-switch-top-to-control-extra-large:15px; + --spectrum-radio-button-control-size-small:12px; + --spectrum-radio-button-control-size-medium:14px; + --spectrum-radio-button-control-size-large:16px; + --spectrum-radio-button-control-size-extra-large:18px; + --spectrum-radio-button-top-to-control-small:6px; + --spectrum-radio-button-top-to-control-medium:9px; + --spectrum-radio-button-top-to-control-large:12px; + --spectrum-radio-button-top-to-control-extra-large:15px; --spectrum-field-label-text-to-asterisk-small:4px; --spectrum-field-label-text-to-asterisk-medium:4px; --spectrum-field-label-text-to-asterisk-large:5px; @@ -57,6 +35,7 @@ --spectrum-field-label-top-to-asterisk-medium:12px; --spectrum-field-label-top-to-asterisk-large:15px; --spectrum-field-label-top-to-asterisk-extra-large:19px; + --spectrum-field-label-top-margin-small:0px; --spectrum-field-label-top-margin-medium:4px; --spectrum-field-label-top-margin-large:5px; --spectrum-field-label-top-margin-extra-large:5px; @@ -68,6 +47,7 @@ --spectrum-help-text-top-to-workflow-icon-medium:3px; --spectrum-help-text-top-to-workflow-icon-large:6px; --spectrum-help-text-top-to-workflow-icon-extra-large:9px; + --spectrum-status-light-dot-size-small:8px; --spectrum-status-light-dot-size-medium:8px; --spectrum-status-light-dot-size-large:10px; --spectrum-status-light-dot-size-extra-large:10px; @@ -75,6 +55,8 @@ --spectrum-status-light-top-to-dot-medium:12px; --spectrum-status-light-top-to-dot-large:15px; --spectrum-status-light-top-to-dot-extra-large:19px; + --spectrum-action-button-edge-to-hold-icon-extra-small:3px; + --spectrum-action-button-edge-to-hold-icon-small:3px; --spectrum-action-button-edge-to-hold-icon-medium:4px; --spectrum-action-button-edge-to-hold-icon-large:5px; --spectrum-action-button-edge-to-hold-icon-extra-large:6px; @@ -124,6 +106,22 @@ --spectrum-menu-item-top-to-selected-icon-medium:11px; --spectrum-menu-item-top-to-selected-icon-large:14px; --spectrum-menu-item-top-to-selected-icon-extra-large:17px; + --spectrum-slider-control-height-small:14px; + --spectrum-slider-control-height-medium:16px; + --spectrum-slider-control-height-large:18px; + --spectrum-slider-control-height-extra-large:20px; + --spectrum-slider-handle-size-small:14px; + --spectrum-slider-handle-size-medium:16px; + --spectrum-slider-handle-size-large:18px; + --spectrum-slider-handle-size-extra-large:20px; + --spectrum-slider-handle-border-width-down-small:5px; + --spectrum-slider-handle-border-width-down-medium:6px; + --spectrum-slider-handle-border-width-down-large:7px; + --spectrum-slider-handle-border-width-down-extra-large:8px; + --spectrum-slider-bottom-to-handle-small:5px; + --spectrum-slider-bottom-to-handle-medium:8px; + --spectrum-slider-bottom-to-handle-large:11px; + --spectrum-slider-bottom-to-handle-extra-large:14px; --spectrum-slider-control-to-field-label-small:5px; --spectrum-slider-control-to-field-label-medium:8px; --spectrum-slider-control-to-field-label-large:11px; @@ -154,7 +152,7 @@ --spectrum-alert-dialog-description-size:var(--spectrum-body-size-s); --spectrum-opacity-checkerboard-square-size:8px; --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size:var(--spectrum-body-size-s); + --spectrum-contextual-help-body-size:var(--spectrum-heading-size-s); --spectrum-breadcrumbs-height-multiline:72px; --spectrum-breadcrumbs-top-to-text:13px; --spectrum-breadcrumbs-top-to-text-compact:11px; @@ -207,8 +205,10 @@ --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xs); --spectrum-coach-mark-body-size:var(--spectrum-body-size-s); --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-s); + --spectrum-accordion-top-to-text-compact-small:2px; --spectrum-accordion-top-to-text-regular-small:5px; --spectrum-accordion-small-top-to-text-spacious:9px; + --spectrum-accordion-top-to-text-compact-medium:4px; --spectrum-accordion-top-to-text-regular-medium:8px; --spectrum-accordion-top-to-text-spacious-medium:12px; --spectrum-accordion-top-to-text-compact-large:4px; @@ -230,6 +230,10 @@ --spectrum-accordion-bottom-to-text-regular-extra-large:12px; --spectrum-accordion-bottom-to-text-spacious-extra-large:16px; --spectrum-accordion-minimum-width:200px; + --spectrum-accordion-disclosure-indicator-to-text:0px; + --spectrum-accordion-edge-to-disclosure-indicator:0px; + --spectrum-accordion-edge-to-text:0px; + --spectrum-accordion-focus-indicator-gap:0px; --spectrum-accordion-content-area-top-to-content:8px; --spectrum-accordion-content-area-bottom-to-content:16px; --spectrum-color-handle-size:16px; @@ -266,6 +270,7 @@ --spectrum-table-row-bottom-to-text-medium-spacious:16px; --spectrum-table-row-bottom-to-text-large-spacious:18px; --spectrum-table-row-bottom-to-text-extra-large-spacious:21px; + --spectrum-table-edge-to-content:16px; --spectrum-table-checkbox-to-text:24px; --spectrum-table-header-row-checkbox-to-top-small:10px; --spectrum-table-header-row-checkbox-to-top-medium:9px; @@ -347,10 +352,20 @@ --spectrum-side-navigation-with-icon-second-level-edge-to-text:50px; --spectrum-side-navigation-with-icon-third-level-edge-to-text:62px; --spectrum-side-navigation-item-to-item:4px; - --spectrum-side-navigation-item-to-header:24px; - --spectrum-side-navigation-header-to-item:8px; + --spectrum-side-navigation-item-to-header:16px; --spectrum-side-navigation-bottom-to-text:8px; --spectrum-tray-top-to-content-area:4px; + --spectrum-corner-radius-75:2px; + --spectrum-corner-radius-100:4px; + --spectrum-corner-radius-200:8px; + --spectrum-drop-shadow-x:0px; + --spectrum-drop-shadow-y:1px; + --spectrum-drop-shadow-blur:4px; + --spectrum-workflow-icon-size-50:14px; + --spectrum-workflow-icon-size-75:16px; + --spectrum-workflow-icon-size-100:18px; + --spectrum-workflow-icon-size-200:20px; + --spectrum-workflow-icon-size-300:22px; --spectrum-text-to-visual-50:6px; --spectrum-text-to-visual-75:7px; --spectrum-text-to-visual-100:8px; @@ -467,10 +482,10 @@ --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:11px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large:14px; --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:17px; - --spectrum-navigational-indicator-top-to-back-icon-small:6px; - --spectrum-navigational-indicator-top-to-back-icon-medium:9px; - --spectrum-navigational-indicator-top-to-back-icon-large:12px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large:15px; + --spectrum-navigational-indicator-top-to-back-icon-small:7px; + --spectrum-navigational-indicator-top-to-back-icon-medium:11px; + --spectrum-navigational-indicator-top-to-back-icon-large:14px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:17px; --spectrum-color-control-track-width:24px; --spectrum-font-size-50:11px; --spectrum-font-size-75:12px; diff --git a/tokens/dist/css/spectrum/global-vars.css b/tokens/dist/css/spectrum/global-vars.css index a383bc8aaae..bbd978f8cc3 100644 --- a/tokens/dist/css/spectrum/global-vars.css +++ b/tokens/dist/css/spectrum/global-vars.css @@ -1,41 +1,4 @@ .spectrum{ - --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-700); - --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-800); - --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-800); - --spectrum-slider-track-thickness:2px; - --spectrum-slider-handle-gap:4px; + --spectrum-color-handle-outer-border-color:var(--spectrum-black); --spectrum-picker-border-width:var(--spectrum-border-width-100); - --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px; - --spectrum-in-field-button-edge-to-fill:0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill:0px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); - --spectrum-corner-radius-75:2px; - --spectrum-drop-shadow-x:0px; - --spectrum-border-width-100:1px; - --spectrum-accent-color-100:var(--spectrum-blue-100); - --spectrum-accent-color-200:var(--spectrum-blue-200); - --spectrum-accent-color-300:var(--spectrum-blue-300); - --spectrum-accent-color-400:var(--spectrum-blue-400); - --spectrum-accent-color-500:var(--spectrum-blue-500); - --spectrum-accent-color-600:var(--spectrum-blue-600); - --spectrum-accent-color-700:var(--spectrum-blue-700); - --spectrum-accent-color-800:var(--spectrum-blue-800); - --spectrum-accent-color-900:var(--spectrum-blue-900); - --spectrum-accent-color-1000:var(--spectrum-blue-1000); - --spectrum-accent-color-1100:var(--spectrum-blue-1100); - --spectrum-accent-color-1200:var(--spectrum-blue-1200); - --spectrum-accent-color-1300:var(--spectrum-blue-1300); - --spectrum-accent-color-1400:var(--spectrum-blue-1400); - --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); } diff --git a/tokens/dist/css/spectrum/large-vars.css b/tokens/dist/css/spectrum/large-vars.css deleted file mode 100644 index 7b8e056e61a..00000000000 --- a/tokens/dist/css/spectrum/large-vars.css +++ /dev/null @@ -1,50 +0,0 @@ -.spectrum--large{ - --spectrum-checkbox-control-size-small:16px; - --spectrum-checkbox-control-size-medium:18px; - --spectrum-checkbox-control-size-large:20px; - --spectrum-checkbox-control-size-extra-large:22px; - --spectrum-checkbox-top-to-control-small:7px; - --spectrum-checkbox-top-to-control-medium:11px; - --spectrum-checkbox-top-to-control-large:15px; - --spectrum-checkbox-top-to-control-extra-large:19px; - --spectrum-switch-control-width-small:32px; - --spectrum-switch-control-width-medium:36px; - --spectrum-switch-control-width-large:41px; - --spectrum-switch-control-width-extra-large:46px; - --spectrum-switch-control-height-small:16px; - --spectrum-switch-control-height-medium:18px; - --spectrum-switch-control-height-large:20px; - --spectrum-switch-control-height-extra-large:22px; - --spectrum-switch-top-to-control-small:7px; - --spectrum-switch-top-to-control-medium:11px; - --spectrum-switch-top-to-control-large:15px; - --spectrum-switch-top-to-control-extra-large:19px; - --spectrum-radio-button-control-size-small:16px; - --spectrum-radio-button-control-size-medium:18px; - --spectrum-radio-button-control-size-large:20px; - --spectrum-radio-button-control-size-extra-large:22px; - --spectrum-radio-button-top-to-control-small:7px; - --spectrum-radio-button-top-to-control-medium:11px; - --spectrum-radio-button-top-to-control-large:15px; - --spectrum-radio-button-top-to-control-extra-large:19px; - --spectrum-slider-control-height-small:18px; - --spectrum-slider-control-height-medium:20px; - --spectrum-slider-control-height-large:22px; - --spectrum-slider-control-height-extra-large:26px; - --spectrum-slider-handle-size-small:18px; - --spectrum-slider-handle-size-medium:20px; - --spectrum-slider-handle-size-large:22px; - --spectrum-slider-handle-size-extra-large:26px; - --spectrum-slider-handle-border-width-down-small:7px; - --spectrum-slider-handle-border-width-down-medium:8px; - --spectrum-slider-handle-border-width-down-large:9px; - --spectrum-slider-handle-border-width-down-extra-large:11px; - --spectrum-slider-bottom-to-handle-small:6px; - --spectrum-slider-bottom-to-handle-medium:10px; - --spectrum-slider-bottom-to-handle-large:14px; - --spectrum-slider-bottom-to-handle-extra-large:17px; - --spectrum-corner-radius-100:5px; - --spectrum-corner-radius-200:10px; - --spectrum-drop-shadow-y:2px; - --spectrum-drop-shadow-blur:6px; -} diff --git a/tokens/dist/css/spectrum/medium-vars.css b/tokens/dist/css/spectrum/medium-vars.css deleted file mode 100644 index bd8298fd061..00000000000 --- a/tokens/dist/css/spectrum/medium-vars.css +++ /dev/null @@ -1,50 +0,0 @@ -.spectrum--medium{ - --spectrum-checkbox-control-size-small:12px; - --spectrum-checkbox-control-size-medium:14px; - --spectrum-checkbox-control-size-large:16px; - --spectrum-checkbox-control-size-extra-large:18px; - --spectrum-checkbox-top-to-control-small:6px; - --spectrum-checkbox-top-to-control-medium:9px; - --spectrum-checkbox-top-to-control-large:12px; - --spectrum-checkbox-top-to-control-extra-large:15px; - --spectrum-switch-control-width-small:23px; - --spectrum-switch-control-width-medium:26px; - --spectrum-switch-control-width-large:29px; - --spectrum-switch-control-width-extra-large:33px; - --spectrum-switch-control-height-small:12px; - --spectrum-switch-control-height-medium:14px; - --spectrum-switch-control-height-large:16px; - --spectrum-switch-control-height-extra-large:18px; - --spectrum-switch-top-to-control-small:6px; - --spectrum-switch-top-to-control-medium:9px; - --spectrum-switch-top-to-control-large:12px; - --spectrum-switch-top-to-control-extra-large:15px; - --spectrum-radio-button-control-size-small:12px; - --spectrum-radio-button-control-size-medium:14px; - --spectrum-radio-button-control-size-large:16px; - --spectrum-radio-button-control-size-extra-large:18px; - --spectrum-radio-button-top-to-control-small:6px; - --spectrum-radio-button-top-to-control-medium:9px; - --spectrum-radio-button-top-to-control-large:12px; - --spectrum-radio-button-top-to-control-extra-large:15px; - --spectrum-slider-control-height-small:14px; - --spectrum-slider-control-height-medium:16px; - --spectrum-slider-control-height-large:18px; - --spectrum-slider-control-height-extra-large:20px; - --spectrum-slider-handle-size-small:14px; - --spectrum-slider-handle-size-medium:16px; - --spectrum-slider-handle-size-large:18px; - --spectrum-slider-handle-size-extra-large:20px; - --spectrum-slider-handle-border-width-down-small:5px; - --spectrum-slider-handle-border-width-down-medium:6px; - --spectrum-slider-handle-border-width-down-large:7px; - --spectrum-slider-handle-border-width-down-extra-large:8px; - --spectrum-slider-bottom-to-handle-small:5px; - --spectrum-slider-bottom-to-handle-medium:8px; - --spectrum-slider-bottom-to-handle-large:11px; - --spectrum-slider-bottom-to-handle-extra-large:14px; - --spectrum-corner-radius-100:4px; - --spectrum-corner-radius-200:8px; - --spectrum-drop-shadow-y:1px; - --spectrum-drop-shadow-blur:4px; -} diff --git a/tokens/dist/index.css b/tokens/dist/index.css index fc9685e0c46..b0470a1e1e4 100644 --- a/tokens/dist/index.css +++ b/tokens/dist/index.css @@ -1,549 +1,31 @@ .spectrum--dark{ - --spectrum-overlay-opacity:0.5; - --spectrum-drop-shadow-color-rgb:0, 0, 0; - --spectrum-drop-shadow-color-opacity:0.5; - --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --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-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-notice-background-color-default:var(--spectrum-notice-color-800); - --spectrum-gray-background-color-default:var(--spectrum-gray-700); - --spectrum-red-background-color-default:var(--spectrum-red-700); - --spectrum-orange-background-color-default:var(--spectrum-orange-800); - --spectrum-yellow-background-color-default:var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-900); - --spectrum-celery-background-color-default:var(--spectrum-celery-800); - --spectrum-green-background-color-default:var(--spectrum-green-700); - --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default:var(--spectrum-cyan-700); - --spectrum-blue-background-color-default:var(--spectrum-blue-700); - --spectrum-indigo-background-color-default:var(--spectrum-indigo-700); - --spectrum-purple-background-color-default:var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default:var(--spectrum-magenta-700); - --spectrum-neutral-visual-color:var(--spectrum-gray-600); - --spectrum-accent-visual-color:var(--spectrum-accent-color-900); - --spectrum-informative-visual-color:var(--spectrum-informative-color-900); - --spectrum-negative-visual-color:var(--spectrum-negative-color-700); - --spectrum-notice-visual-color:var(--spectrum-notice-color-900); - --spectrum-positive-visual-color:var(--spectrum-positive-color-800); - --spectrum-gray-visual-color:var(--spectrum-gray-600); - --spectrum-red-visual-color:var(--spectrum-red-700); - --spectrum-orange-visual-color:var(--spectrum-orange-900); - --spectrum-yellow-visual-color:var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color:var(--spectrum-celery-800); - --spectrum-green-visual-color:var(--spectrum-green-800); - --spectrum-seafoam-visual-color:var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color:var(--spectrum-cyan-900); - --spectrum-blue-visual-color:var(--spectrum-blue-900); - --spectrum-indigo-visual-color:var(--spectrum-indigo-900); - --spectrum-purple-visual-color:var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color:var(--spectrum-magenta-900); - --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); - --spectrum-gray-50-rgb:29, 29, 29; - --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb:38, 38, 38; - --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb:50, 50, 50; - --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb:63, 63, 63; - --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb:84, 84, 84; - --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb:112, 112, 112; - --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb:144, 144, 144; - --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb:178, 178, 178; - --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb:209, 209, 209; - --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb:235, 235, 235; - --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb:255, 255, 255; - --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb:0, 56, 119; - --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb:0, 65, 138; - --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb:0, 77, 163; - --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb:0, 89, 194; - --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb:3, 103, 224; - --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb:19, 121, 243; - --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb:52, 143, 244; - --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb:84, 163, 246; - --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb:114, 183, 249; - --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb:143, 202, 252; - --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb:174, 219, 254; - --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb:204, 233, 255; - --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb:232, 246, 255; - --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb:255, 255, 255; - --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb:123, 0, 0; - --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb:141, 0, 0; - --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb:165, 0, 0; - --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb:190, 4, 3; - --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb:215, 25, 19; - --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb:234, 56, 41; - --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb:246, 88, 67; - --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb:255, 117, 94; - --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb:255, 149, 129; - --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb:255, 176, 161; - --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb:255, 201, 189; - --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb:255, 222, 216; - --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb:255, 241, 238; - --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb:255, 255, 255; - --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb:102, 37, 0; - --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb:117, 45, 0; - --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb:137, 55, 0; - --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb:158, 66, 0; - --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb:180, 78, 0; - --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb:202, 93, 0; - --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb:225, 109, 0; - --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb:244, 129, 12; - --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb:254, 154, 46; - --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb:255, 181, 88; - --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb:253, 206, 136; - --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb:255, 225, 179; - --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb:255, 242, 221; - --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb:255, 253, 249; - --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb:76, 54, 0; - --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb:88, 64, 0; - --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb:103, 76, 0; - --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb:119, 89, 0; - --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb:136, 104, 0; - --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb:155, 120, 0; - --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb:174, 137, 0; - --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb:192, 156, 0; - --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb:211, 174, 0; - --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb:228, 194, 0; - --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb:244, 213, 0; - --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb:249, 232, 92; - --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb:252, 246, 187; - --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb:255, 255, 255; - --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb:48, 64, 0; - --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb:55, 74, 0; - --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb:65, 87, 0; - --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb:76, 102, 0; - --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb:89, 118, 0; - --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb:102, 136, 0; - --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb:117, 154, 0; - --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb:132, 173, 1; - --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb:148, 192, 8; - --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb:166, 211, 18; - --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb:184, 229, 37; - --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb:205, 245, 71; - --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb:231, 254, 154; - --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb:255, 255, 255; - --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb:0, 69, 10; - --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb:0, 80, 12; - --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb:0, 94, 14; - --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb:0, 109, 15; - --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb:0, 127, 15; - --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb:0, 145, 18; - --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb:4, 165, 30; - --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb:34, 184, 51; - --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb:68, 202, 73; - --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb:105, 220, 99; - --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb:142, 235, 127; - --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb:180, 247, 162; - --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb:221, 253, 211; - --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb:255, 255, 255; - --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb:4, 67, 41; - --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb:0, 78, 47; - --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb:0, 92, 56; - --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb:0, 108, 67; - --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb:0, 125, 78; - --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb:0, 143, 93; - --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb:18, 162, 108; - --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb:43, 180, 125; - --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb:67, 199, 143; - --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb:94, 217, 162; - --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb:129, 233, 184; - --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb:177, 244, 209; - --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb:223, 250, 234; - --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb:254, 255, 252; - --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb:18, 65, 63; - --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb:14, 76, 73; - --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb:4, 90, 87; - --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb:0, 105, 101; - --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb:0, 122, 117; - --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb:0, 140, 135; - --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb:0, 158, 152; - --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb:3, 178, 171; - --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb:54, 197, 189; - --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb:93, 214, 207; - --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb:132, 230, 223; - --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb:176, 242, 236; - --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb:223, 249, 246; - --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb:254, 255, 254; - --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb:0, 61, 98; - --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb:0, 71, 111; - --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb:0, 85, 127; - --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb:0, 100, 145; - --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb:0, 116, 162; - --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb:0, 134, 180; - --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb:0, 153, 198; - --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb:14, 173, 215; - --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb:44, 193, 230; - --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb:84, 211, 241; - --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb:127, 228, 249; - --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb:167, 241, 255; - --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb:215, 250, 255; - --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb:255, 255, 255; - --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb:40, 44, 140; - --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb:47, 52, 163; - --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb:57, 63, 187; - --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb:70, 75, 211; - --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb:85, 91, 231; - --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb:104, 109, 244; - --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb:124, 129, 251; - --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb:145, 149, 255; - --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb:167, 170, 255; - --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb:188, 190, 255; - --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb:208, 210, 255; - --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb:226, 228, 255; - --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb:243, 243, 254; - --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb:255, 255, 255; - --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb:76, 13, 157; - --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb:89, 17, 177; - --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb:105, 28, 200; - --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb:122, 45, 218; - --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb:140, 65, 233; - --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb:157, 87, 243; - --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb:172, 111, 249; - --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb:187, 135, 251; - --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb:202, 159, 252; - --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb:215, 182, 254; - --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb:228, 204, 254; - --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb:239, 223, 255; - --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb:249, 240, 255; - --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb:255, 253, 255; - --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb:107, 3, 106; - --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb:123, 0, 123; - --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb:144, 0, 145; - --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb:165, 13, 166; - --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb:185, 37, 185; - --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb:205, 57, 206; - --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb:223, 81, 224; - --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb:235, 110, 236; - --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb:244, 140, 242; - --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb:250, 168, 245; - --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb:254, 194, 248; - --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb:255, 219, 250; - --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb:255, 239, 252; - --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb:255, 253, 255; - --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb:118, 0, 58; - --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb:137, 0, 66; - --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb:160, 0, 77; - --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb:182, 18, 90; - --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb:203, 38, 109; - --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb:222, 61, 130; - --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb:237, 87, 149; - --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb:249, 114, 167; - --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb:255, 143, 185; - --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb:255, 172, 202; - --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb:255, 198, 218; - --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb:255, 221, 233; - --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb:255, 240, 245; - --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb:255, 252, 253; - --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-1000); - --spectrum-menu-item-background-color-default-rgb:255, 255, 255; - --spectrum-menu-item-background-color-default-opacity:0; - --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-white-200); - --spectrum-menu-item-background-color-down:var(--spectrum-transparent-white-200); - --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200); - - /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb:var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ - - /* Drop Indicator color rgb */ - --spectrum-dropindicator-color:var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); - --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.07); - --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-white-200); - --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.07); - --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); - - --spectrum-badge-label-icon-color-primary:var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); - - --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700); - - --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.07); - --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); - - --spectrum-logic-button-and-background-color:var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color:var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000); - --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800); - --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); - --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); -} -.spectrum--darkest{ --spectrum-overlay-opacity:0.6; --spectrum-drop-shadow-color-rgb:0, 0, 0; --spectrum-drop-shadow-color-opacity:0.8; --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --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-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-background-base-color:var(--spectrum-gray-25); + --spectrum-background-layer-1-color:var(--spectrum-gray-50); + --spectrum-background-layer-2-color:var(--spectrum-gray-75); --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-down:var(--spectrum-gray-300); --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-300); --spectrum-accent-background-color-default:var(--spectrum-accent-color-600); --spectrum-accent-background-color-hover:var(--spectrum-accent-color-500); - --spectrum-accent-background-color-down:var(--spectrum-accent-color-400); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-500); --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-500); --spectrum-informative-background-color-default:var(--spectrum-informative-color-600); --spectrum-informative-background-color-hover:var(--spectrum-informative-color-500); - --spectrum-informative-background-color-down:var(--spectrum-informative-color-400); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-500); --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-500); --spectrum-negative-background-color-default:var(--spectrum-negative-color-600); --spectrum-negative-background-color-hover:var(--spectrum-negative-color-500); - --spectrum-negative-background-color-down:var(--spectrum-negative-color-400); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-500); --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-500); --spectrum-positive-background-color-default:var(--spectrum-positive-color-600); --spectrum-positive-background-color-hover:var(--spectrum-positive-color-500); - --spectrum-positive-background-color-down:var(--spectrum-positive-color-400); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-500); --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-500); - --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); --spectrum-gray-background-color-default:var(--spectrum-gray-700); --spectrum-red-background-color-default:var(--spectrum-red-700); --spectrum-orange-background-color-default:var(--spectrum-orange-800); @@ -579,392 +61,576 @@ --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); --spectrum-magenta-visual-color:var(--spectrum-magenta-900); --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); - --spectrum-gray-50-rgb:0, 0, 0; + --spectrum-gray-25-rgb:17, 17, 17; + --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb:27, 27, 27; --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb:14, 14, 14; + --spectrum-gray-75-rgb:34, 34, 34; --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb:29, 29, 29; + --spectrum-gray-100-rgb:44, 44, 44; --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb:48, 48, 48; + --spectrum-gray-200-rgb:50, 50, 50; --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb:75, 75, 75; + --spectrum-gray-300-rgb:57, 57, 57; --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb:106, 106, 106; + --spectrum-gray-400-rgb:68, 68, 68; --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb:141, 141, 141; + --spectrum-gray-500-rgb:109, 109, 109; --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb:176, 176, 176; + --spectrum-gray-600-rgb:138, 138, 138; --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb:208, 208, 208; + --spectrum-gray-700-rgb:175, 175, 175; --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb:235, 235, 235; + --spectrum-gray-800-rgb:219, 219, 219; --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb:255, 255, 255; + --spectrum-gray-900-rgb:242, 242, 242; --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb:0, 38, 81; + --spectrum-gray-1000-rgb:255, 255, 255; + --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb:14, 23, 63; --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb:0, 50, 106; + --spectrum-blue-200-rgb:15, 28, 82; --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb:0, 64, 135; + --spectrum-blue-300-rgb:12, 33, 117; --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb:0, 78, 166; + --spectrum-blue-400-rgb:18, 45, 154; --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb:0, 92, 200; + --spectrum-blue-500-rgb:26, 58, 195; --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb:6, 108, 231; + --spectrum-blue-600-rgb:37, 73, 229; --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb:29, 128, 245; + --spectrum-blue-700-rgb:52, 91, 248; --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb:64, 150, 243; + --spectrum-blue-800-rgb:69, 110, 254; --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb:94, 170, 247; + --spectrum-blue-900-rgb:86, 129, 255; --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb:124, 189, 250; + --spectrum-blue-1000-rgb:105, 149, 254; --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb:152, 206, 253; + --spectrum-blue-1100-rgb:124, 169, 252; --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb:179, 222, 254; + --spectrum-blue-1200-rgb:152, 192, 252; --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb:206, 234, 255; + --spectrum-blue-1300-rgb:181, 213, 253; --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb:227, 243, 255; + --spectrum-blue-1400-rgb:213, 231, 254; --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb:87, 0, 0; + --spectrum-blue-1500-rgb:238, 245, 255; + --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb:255, 255, 255; + --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb:54, 10, 3; --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb:110, 0, 0; + --spectrum-red-200-rgb:68, 13, 5; --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb:138, 0, 0; + --spectrum-red-300-rgb:87, 17, 7; --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb:167, 0, 0; + --spectrum-red-400-rgb:115, 24, 11; --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb:196, 7, 6; + --spectrum-red-500-rgb:147, 31, 17; --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb:221, 33, 24; + --spectrum-red-600-rgb:177, 38, 23; --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb:238, 67, 49; + --spectrum-red-700-rgb:205, 46, 29; --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb:249, 99, 76; + --spectrum-red-800-rgb:230, 54, 35; --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb:255, 129, 107; + --spectrum-red-900-rgb:252, 67, 46; --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb:255, 158, 140; + --spectrum-red-1000-rgb:255, 103, 86; --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb:255, 183, 169; + --spectrum-red-1100-rgb:255, 134, 120; --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb:255, 205, 195; + --spectrum-red-1200-rgb:255, 167, 157; --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb:255, 223, 217; + --spectrum-red-1300-rgb:255, 196, 189; --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb:255, 237, 234; + --spectrum-red-1400-rgb:255, 222, 219; --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb:72, 24, 1; + --spectrum-red-1500-rgb:255, 242, 240; + --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb:255, 255, 255; + --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb:49, 16, 0; --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb:92, 32, 0; + --spectrum-orange-200-rgb:61, 21, 0; --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb:115, 43, 0; + --spectrum-orange-300-rgb:80, 27, 0; --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb:138, 55, 0; + --spectrum-orange-400-rgb:106, 36, 0; --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb:162, 68, 0; + --spectrum-orange-500-rgb:135, 47, 0; --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb:186, 82, 0; + --spectrum-orange-600-rgb:162, 59, 0; --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb:210, 98, 0; + --spectrum-orange-700-rgb:185, 73, 0; --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb:232, 116, 0; + --spectrum-orange-800-rgb:205, 86, 0; --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb:249, 137, 23; + --spectrum-orange-900-rgb:224, 100, 0; --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb:255, 162, 59; + --spectrum-orange-1000-rgb:243, 117, 0; --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb:255, 188, 102; + --spectrum-orange-1100-rgb:255, 137, 0; --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb:253, 210, 145; + --spectrum-orange-1200-rgb:255, 173, 45; --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb:255, 226, 181; + --spectrum-orange-1300-rgb:255, 201, 116; --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb:255, 239, 213; + --spectrum-orange-1400-rgb:255, 225, 178; --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb:53, 36, 0; + --spectrum-orange-1500-rgb:255, 243, 225; + --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb:255, 255, 255; + --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb:37, 23, 0; --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb:68, 47, 0; + --spectrum-yellow-200-rgb:47, 29, 0; --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb:86, 62, 0; + --spectrum-yellow-300-rgb:61, 39, 0; --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb:103, 77, 0; + --spectrum-yellow-400-rgb:83, 52, 0; --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb:122, 92, 0; + --spectrum-yellow-500-rgb:107, 67, 0; --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb:141, 108, 0; + --spectrum-yellow-600-rgb:130, 82, 0; --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb:161, 126, 0; + --spectrum-yellow-700-rgb:151, 97, 0; --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb:180, 144, 0; + --spectrum-yellow-800-rgb:169, 110, 0; --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb:199, 162, 0; + --spectrum-yellow-900-rgb:186, 124, 0; --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb:216, 181, 0; + --spectrum-yellow-1000-rgb:203, 141, 0; --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb:233, 199, 0; + --spectrum-yellow-1100-rgb:218, 159, 0; --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb:247, 216, 4; + --spectrum-yellow-1200-rgb:235, 183, 0; --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb:249, 233, 97; + --spectrum-yellow-1300-rgb:249, 206, 0; --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb:252, 243, 170; + --spectrum-yellow-1400-rgb:255, 230, 86; --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb:32, 43, 0; + --spectrum-yellow-1500-rgb:255, 246, 195; + --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb:255, 255, 255; + --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb:23, 28, 0; --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb:42, 56, 0; + --spectrum-chartreuse-200-rgb:30, 36, 0; --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb:54, 72, 0; + --spectrum-chartreuse-300-rgb:39, 47, 0; --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb:66, 88, 0; + --spectrum-chartreuse-400-rgb:53, 63, 0; --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb:79, 105, 0; + --spectrum-chartreuse-500-rgb:68, 82, 0; --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb:93, 123, 0; + --spectrum-chartreuse-600-rgb:83, 100, 0; --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb:107, 142, 0; + --spectrum-chartreuse-700-rgb:97, 116, 0; --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb:122, 161, 0; + --spectrum-chartreuse-800-rgb:109, 131, 0; --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb:138, 180, 3; + --spectrum-chartreuse-900-rgb:122, 147, 0; --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb:154, 198, 11; + --spectrum-chartreuse-1000-rgb:136, 164, 0; --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb:170, 216, 22; + --spectrum-chartreuse-1100-rgb:151, 181, 0; --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb:187, 232, 41; + --spectrum-chartreuse-1200-rgb:169, 203, 0; --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb:205, 246, 72; + --spectrum-chartreuse-1300-rgb:187, 225, 0; --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb:225, 253, 132; + --spectrum-chartreuse-1400-rgb:219, 240, 117; --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb:0, 47, 7; + --spectrum-chartreuse-1500-rgb:242, 249, 206; + --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb:255, 255, 255; + --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb:11, 31, 0; --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb:0, 61, 9; + --spectrum-celery-200-rgb:15, 38, 0; --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb:0, 77, 12; + --spectrum-celery-300-rgb:21, 51, 1; --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb:0, 95, 15; + --spectrum-celery-400-rgb:31, 67, 4; --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb:0, 113, 15; + --spectrum-celery-500-rgb:41, 86, 8; --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb:0, 132, 15; + --spectrum-celery-600-rgb:50, 105, 11; --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb:0, 151, 20; + --spectrum-celery-700-rgb:60, 122, 15; --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb:13, 171, 37; + --spectrum-celery-800-rgb:69, 138, 19; --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb:45, 191, 58; + --spectrum-celery-900-rgb:78, 154, 23; --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb:80, 208, 82; + --spectrum-celery-1000-rgb:88, 172, 28; --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb:115, 224, 107; + --spectrum-celery-1100-rgb:100, 190, 35; --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb:147, 237, 131; + --spectrum-celery-1200-rgb:116, 213, 46; --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb:180, 247, 162; + --spectrum-celery-1300-rgb:136, 234, 65; --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb:213, 252, 202; + --spectrum-celery-1400-rgb:170, 251, 112; --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb:10, 44, 28; + --spectrum-celery-1500-rgb:222, 255, 198; + --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb:255, 255, 255; + --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb:0, 30, 23; --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb:7, 59, 36; + --spectrum-green-200-rgb:0, 38, 29; --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb:0, 76, 46; + --spectrum-green-300-rgb:0, 51, 38; --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb:0, 93, 57; + --spectrum-green-400-rgb:0, 68, 48; --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb:0, 111, 69; + --spectrum-green-500-rgb:2, 87, 58; --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb:0, 130, 82; + --spectrum-green-600-rgb:3, 106, 67; --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb:0, 149, 98; + --spectrum-green-700-rgb:4, 124, 75; --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb:28, 168, 114; + --spectrum-green-800-rgb:6, 140, 82; --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb:52, 187, 132; + --spectrum-green-900-rgb:9, 157, 89; --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb:75, 205, 149; + --spectrum-green-1000-rgb:14, 175, 98; --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb:103, 222, 168; + --spectrum-green-1100-rgb:24, 193, 110; --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb:137, 236, 188; + --spectrum-green-1200-rgb:57, 215, 134; --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb:177, 244, 209; + --spectrum-green-1300-rgb:126, 231, 172; --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb:214, 249, 228; + --spectrum-green-1400-rgb:189, 241, 208; --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb:18, 43, 42; + --spectrum-green-1500-rgb:229, 250, 236; + --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb:255, 255, 255; + --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb:0, 30, 27; --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb:19, 57, 55; + --spectrum-seafoam-200-rgb:0, 39, 35; --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb:16, 73, 70; + --spectrum-seafoam-300-rgb:0, 50, 44; --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb:3, 91, 88; + --spectrum-seafoam-400-rgb:0, 67, 59; --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb:0, 108, 104; + --spectrum-seafoam-500-rgb:2, 86, 75; --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb:0, 127, 121; + --spectrum-seafoam-600-rgb:4, 105, 89; --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb:0, 146, 140; + --spectrum-seafoam-700-rgb:6, 122, 103; --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb:0, 165, 159; + --spectrum-seafoam-800-rgb:8, 138, 116; --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb:26, 185, 178; + --spectrum-seafoam-900-rgb:10, 154, 128; --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb:66, 202, 195; + --spectrum-seafoam-1000-rgb:12, 173, 142; --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb:102, 218, 211; + --spectrum-seafoam-1100-rgb:14, 190, 156; --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb:139, 232, 225; + --spectrum-seafoam-1200-rgb:29, 214, 176; --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb:179, 242, 237; + --spectrum-seafoam-1300-rgb:122, 229, 203; --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb:215, 248, 244; + --spectrum-seafoam-1400-rgb:186, 241, 222; --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb:0, 41, 68; + --spectrum-seafoam-1500-rgb:229, 249, 243; + --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb:255, 255, 255; + --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb:0, 29, 39; --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb:0, 54, 88; + --spectrum-cyan-200-rgb:0, 36, 49; --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb:0, 69, 108; + --spectrum-cyan-300-rgb:0, 48, 65; --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb:0, 86, 128; + --spectrum-cyan-400-rgb:0, 64, 88; --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb:0, 103, 147; + --spectrum-cyan-500-rgb:0, 82, 113; --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb:0, 121, 167; + --spectrum-cyan-600-rgb:3, 99, 140; --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb:0, 140, 186; + --spectrum-cyan-700-rgb:8, 115, 168; --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb:4, 160, 205; + --spectrum-cyan-800-rgb:15, 128, 194; --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb:23, 180, 221; + --spectrum-cyan-900-rgb:24, 142, 220; --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb:57, 199, 234; + --spectrum-cyan-1000-rgb:38, 159, 244; --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb:96, 216, 243; + --spectrum-cyan-1100-rgb:63, 177, 255; --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb:134, 230, 250; + --spectrum-cyan-1200-rgb:107, 199, 255; --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb:170, 242, 255; + --spectrum-cyan-1300-rgb:152, 219, 255; --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb:206, 249, 255; + --spectrum-cyan-1400-rgb:195, 236, 252; --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb:26, 29, 97; + --spectrum-cyan-1500-rgb:230, 248, 253; + --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb:255, 255, 255; + --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb:30, 0, 93; --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb:35, 39, 125; + --spectrum-indigo-200-rgb:35, 0, 110; --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb:46, 50, 158; + --spectrum-indigo-300-rgb:47, 0, 140; --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb:58, 63, 189; + --spectrum-indigo-400-rgb:62, 12, 174; --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb:73, 78, 216; + --spectrum-indigo-500-rgb:79, 30, 209; --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb:90, 96, 235; + --spectrum-indigo-600-rgb:95, 52, 235; --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb:110, 115, 246; + --spectrum-indigo-700-rgb:109, 75, 248; --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb:132, 136, 253; + --spectrum-indigo-800-rgb:119, 97, 252; --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb:153, 157, 255; + --spectrum-indigo-900-rgb:128, 119, 254; --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb:174, 177, 255; + --spectrum-indigo-1000-rgb:139, 141, 254; --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb:194, 196, 255; + --spectrum-indigo-1100-rgb:153, 161, 255; --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb:212, 213, 255; + --spectrum-indigo-1200-rgb:176, 186, 255; --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb:227, 228, 255; + --spectrum-indigo-1300-rgb:199, 208, 255; --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb:240, 240, 255; + --spectrum-indigo-1400-rgb:223, 228, 255; --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb:50, 16, 104; + --spectrum-indigo-1500-rgb:243, 244, 255; + --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb:255, 255, 255; + --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb:41, 0, 79; --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb:67, 13, 140; + --spectrum-purple-200-rgb:50, 0, 96; --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb:86, 16, 173; + --spectrum-purple-300-rgb:64, 0, 122; --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb:106, 29, 200; + --spectrum-purple-400-rgb:83, 0, 159; --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb:126, 49, 222; + --spectrum-purple-500-rgb:107, 6, 195; --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb:145, 70, 236; + --spectrum-purple-600-rgb:130, 34, 215; --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb:162, 94, 246; + --spectrum-purple-700-rgb:148, 62, 224; --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb:178, 119, 250; + --spectrum-purple-800-rgb:161, 84, 229; --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb:192, 143, 252; + --spectrum-purple-900-rgb:173, 105, 233; --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb:206, 166, 253; + --spectrum-purple-1000-rgb:186, 127, 237; --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb:219, 188, 254; + --spectrum-purple-1100-rgb:197, 149, 240; --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb:230, 207, 255; + --spectrum-purple-1200-rgb:212, 176, 244; --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb:240, 224, 255; + --spectrum-purple-1300-rgb:225, 201, 247; --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb:248, 237, 255; + --spectrum-purple-1400-rgb:238, 224, 250; --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb:70, 14, 68; + --spectrum-purple-1500-rgb:248, 243, 253; + --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb:255, 255, 255; + --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb:50, 0, 61; --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb:93, 9, 92; + --spectrum-fuchsia-200-rgb:61, 0, 74; --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb:120, 0, 120; + --spectrum-fuchsia-300-rgb:79, 0, 95; --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb:146, 0, 147; + --spectrum-fuchsia-400-rgb:102, 9, 120; --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb:169, 19, 170; + --spectrum-fuchsia-500-rgb:127, 23, 146; --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb:191, 43, 191; + --spectrum-fuchsia-600-rgb:151, 38, 170; --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb:211, 65, 213; + --spectrum-fuchsia-700-rgb:173, 51, 192; --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb:228, 91, 229; + --spectrum-fuchsia-800-rgb:192, 64, 212; --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb:239, 120, 238; + --spectrum-fuchsia-900-rgb:213, 73, 235; --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb:246, 149, 243; + --spectrum-fuchsia-1000-rgb:232, 91, 253; --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb:251, 175, 246; + --spectrum-fuchsia-1100-rgb:240, 122, 255; --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb:254, 199, 248; + --spectrum-fuchsia-1200-rgb:245, 159, 255; --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb:255, 220, 250; + --spectrum-fuchsia-1300-rgb:248, 191, 255; --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb:255, 235, 252; + --spectrum-fuchsia-1400-rgb:251, 219, 255; --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb:83, 3, 41; + --spectrum-fuchsia-1500-rgb:253, 241, 255; + --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb:255, 255, 255; + --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb:59, 0, 22; --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb:106, 0, 52; + --spectrum-magenta-200-rgb:74, 0, 27; --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb:133, 0, 65; + --spectrum-magenta-300-rgb:93, 0, 34; --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb:161, 0, 78; + --spectrum-magenta-400-rgb:123, 0, 45; --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb:186, 22, 93; + --spectrum-magenta-500-rgb:152, 7, 60; --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb:209, 43, 114; + --spectrum-magenta-600-rgb:181, 19, 76; --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb:227, 69, 137; + --spectrum-magenta-700-rgb:207, 31, 92; --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb:241, 97, 156; + --spectrum-magenta-800-rgb:231, 41, 105; --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb:252, 124, 173; + --spectrum-magenta-900-rgb:255, 51, 119; --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb:255, 152, 191; + --spectrum-magenta-1000-rgb:255, 96, 149; --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb:255, 179, 207; + --spectrum-magenta-1100-rgb:255, 128, 171; --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb:255, 202, 221; + --spectrum-magenta-1200-rgb:255, 163, 194; --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb:255, 221, 233; + --spectrum-magenta-1300-rgb:255, 193, 214; --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb:255, 236, 243; + --spectrum-magenta-1400-rgb:255, 220, 232; --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb:255, 241, 246; + --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb:255, 255, 255; + --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb:58, 0, 37; + --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb:71, 0, 44; + --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb:90, 0, 57; + --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb:115, 7, 75; + --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb:143, 18, 97; + --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb:171, 29, 119; + --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb:196, 39, 138; + --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb:220, 47, 156; + --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb:236, 67, 175; + --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb:251, 90, 196; + --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb:255, 122, 210; + --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb:255, 159, 223; + --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb:255, 191, 234; + --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb:255, 219, 243; + --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb:255, 241, 250; + --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb:255, 255, 255; + --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb:0, 30, 33; + --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb:0, 37, 41; + --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb:0, 49, 54; + --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb:0, 66, 72; + --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb:3, 84, 92; + --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb:5, 103, 112; + --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb:7, 120, 131; + --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb:9, 135, 147; + --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb:11, 151, 164; + --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb:13, 168, 182; + --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb:16, 186, 202; + --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb:64, 208, 220; + --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb:128, 225, 231; + --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb:183, 240, 240; + --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb:228, 249, 249; + --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb:255, 255, 255; + --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb:35, 24, 8; + --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb:44, 31, 11; + --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb:58, 40, 14; + --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb:78, 55, 19; + --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb:98, 71, 30; + --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb:115, 88, 47; + --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb:132, 104, 61; + --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb:148, 118, 73; + --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb:163, 132, 84; + --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb:181, 147, 98; + --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb:199, 163, 112; + --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb:222, 185, 130; + --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb:232, 207, 169; + --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb:242, 227, 206; + --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb:250, 244, 236; + --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb:255, 255, 255; + --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb:26, 26, 26; + --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb:33, 33, 33; + --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb:44, 44, 44; + --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb:59, 59, 59; + --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb:76, 76, 76; + --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb:92, 92, 92; + --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb:108, 108, 108; + --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb:123, 123, 123; + --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb:137, 137, 137; + --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb:152, 152, 152; + --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb:169, 169, 169; + --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb:190, 190, 190; + --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb:211, 211, 211; + --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb:229, 229, 229; + --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb:244, 244, 244; + --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb:255, 255, 255; + --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); @@ -982,13 +648,13 @@ /* Drop Indicator color rgb */ --spectrum-dropindicator-color:var(--spectrum-blue-700); - --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); - --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.08); - --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); - --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); - --spectrum-calendar-day-background-color-down:rgba(var(--spectrum-white-rgb), 0.15); - --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.3); - --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.08); + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.07); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-white-200); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.07); --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); --spectrum-badge-label-icon-color-primary:var(--spectrum-black); @@ -1001,8 +667,8 @@ --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.08); - --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.07); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); --spectrum-logic-button-and-background-color:var(--spectrum-blue-800); --spectrum-logic-button-and-border-color:var(--spectrum-blue-800); @@ -1020,8 +686,8 @@ --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800); --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700); - --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); - --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); } .spectrum{ @@ -1030,11 +696,20 @@ --spectrum-static-black-focus-indicator-color:var(--spectrum-black); --spectrum-overlay-color:var(--spectrum-black); --spectrum-opacity-disabled:0.3; + --spectrum-neutral-background-color-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); --spectrum-neutral-subdued-content-color-selected:var(--spectrum-neutral-subdued-content-color-down); --spectrum-accent-content-color-selected:var(--spectrum-accent-content-color-down); - --spectrum-disabled-background-color:var(--spectrum-gray-200); - --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-200); - --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-200); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); + --spectrum-disabled-background-color:var(--spectrum-gray-100); + --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-100); + --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-100); --spectrum-background-opacity-default:0; --spectrum-background-opacity-hover:0.1; --spectrum-background-opacity-down:0.1; @@ -1047,19 +722,19 @@ --spectrum-neutral-content-color-key-focus:var(--spectrum-gray-900); --spectrum-neutral-subdued-content-color-default:var(--spectrum-gray-700); --spectrum-neutral-subdued-content-color-hover:var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-800); --spectrum-neutral-subdued-content-color-key-focus:var(--spectrum-gray-800); --spectrum-accent-content-color-default:var(--spectrum-accent-color-900); --spectrum-accent-content-color-hover:var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down:var(--spectrum-accent-color-1100); + --spectrum-accent-content-color-down:var(--spectrum-accent-color-1000); --spectrum-accent-content-color-key-focus:var(--spectrum-accent-color-1000); --spectrum-negative-content-color-default:var(--spectrum-negative-color-900); --spectrum-negative-content-color-hover:var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-content-color-down:var(--spectrum-negative-color-1000); --spectrum-negative-content-color-key-focus:var(--spectrum-negative-color-1000); --spectrum-disabled-content-color:var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-500); - --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-500); + --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-400); + --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-400); --spectrum-disabled-border-color:var(--spectrum-gray-300); --spectrum-disabled-static-white-border-color:var(--spectrum-transparent-white-300); --spectrum-disabled-static-black-border-color:var(--spectrum-transparent-black-300); @@ -1083,6 +758,8 @@ --spectrum-color-slider-border-color:var(--spectrum-gray-900); --spectrum-color-slider-border-opacity:0.1; --spectrum-color-loupe-drop-shadow-color:var(--spectrum-transparent-black-300); + --spectrum-color-loupe-drop-shadow-y:2px; + --spectrum-color-loupe-drop-shadow-blur:8px; --spectrum-color-loupe-inner-border:var(--spectrum-transparent-black-200); --spectrum-color-loupe-outer-border:var(--spectrum-white); --spectrum-card-selection-background-color:var(--spectrum-gray-100); @@ -1093,7 +770,6 @@ --spectrum-coach-mark-pagination-color:var(--spectrum-gray-600); --spectrum-color-handle-inner-border-color:var(--spectrum-black); --spectrum-color-handle-inner-border-opacity:0.42; - --spectrum-color-handle-outer-border-color:var(--spectrum-black); --spectrum-color-handle-outer-border-opacity:var(--spectrum-color-handle-inner-border-opacity); --spectrum-color-handle-drop-shadow-color:var(--spectrum-drop-shadow-color); --spectrum-floating-action-button-drop-shadow-color:var(--spectrum-transparent-black-300); @@ -1109,70 +785,89 @@ --spectrum-table-selected-row-background-opacity-non-emphasized-hover:0.15; --spectrum-white-rgb:255, 255, 255; --spectrum-white:rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-25-rgb:255, 255, 255; + --spectrum-transparent-white-25-opacity:0; + --spectrum-transparent-white-25:rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity)); + --spectrum-transparent-white-50-rgb:255, 255, 255; + --spectrum-transparent-white-50-opacity:0.04; + --spectrum-transparent-white-50:rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity)); + --spectrum-transparent-white-75-rgb:255, 255, 255; + --spectrum-transparent-white-75-opacity:0.07; + --spectrum-transparent-white-75:rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity)); --spectrum-transparent-white-100-rgb:255, 255, 255; - --spectrum-transparent-white-100-opacity:0; + --spectrum-transparent-white-100-opacity:0.11; --spectrum-transparent-white-100:rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); --spectrum-transparent-white-200-rgb:255, 255, 255; - --spectrum-transparent-white-200-opacity:0.1; + --spectrum-transparent-white-200-opacity:0.14; --spectrum-transparent-white-200:rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity)); --spectrum-transparent-white-300-rgb:255, 255, 255; - --spectrum-transparent-white-300-opacity:0.25; + --spectrum-transparent-white-300-opacity:0.17; --spectrum-transparent-white-300:rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity)); --spectrum-transparent-white-400-rgb:255, 255, 255; - --spectrum-transparent-white-400-opacity:0.4; + --spectrum-transparent-white-400-opacity:0.21; --spectrum-transparent-white-400:rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity)); --spectrum-transparent-white-500-rgb:255, 255, 255; - --spectrum-transparent-white-500-opacity:0.55; + --spectrum-transparent-white-500-opacity:0.39; --spectrum-transparent-white-500:rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity)); --spectrum-transparent-white-600-rgb:255, 255, 255; - --spectrum-transparent-white-600-opacity:0.7; + --spectrum-transparent-white-600-opacity:0.51; --spectrum-transparent-white-600:rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity)); --spectrum-transparent-white-700-rgb:255, 255, 255; - --spectrum-transparent-white-700-opacity:0.8; + --spectrum-transparent-white-700-opacity:0.66; --spectrum-transparent-white-700:rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity)); --spectrum-transparent-white-800-rgb:255, 255, 255; - --spectrum-transparent-white-800-opacity:0.9; + --spectrum-transparent-white-800-opacity:0.85; --spectrum-transparent-white-800:rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity)); --spectrum-transparent-white-900-rgb:255, 255, 255; - --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb)); + --spectrum-transparent-white-900-opacity:0.94; + --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity)); + --spectrum-transparent-white-1000-rgb:255, 255, 255; + --spectrum-transparent-white-1000:rgba(var(--spectrum-transparent-white-1000-rgb)); --spectrum-black-rgb:0, 0, 0; --spectrum-black:rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-25-rgb:0, 0, 0; + --spectrum-transparent-black-25-opacity:0; + --spectrum-transparent-black-25:rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity)); + --spectrum-transparent-black-50-rgb:0, 0, 0; + --spectrum-transparent-black-50-opacity:0.03; + --spectrum-transparent-black-50:rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity)); + --spectrum-transparent-black-75-rgb:0, 0, 0; + --spectrum-transparent-black-75-opacity:0.05; + --spectrum-transparent-black-75:rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity)); --spectrum-transparent-black-100-rgb:0, 0, 0; - --spectrum-transparent-black-100-opacity:0; + --spectrum-transparent-black-100-opacity:0.09; --spectrum-transparent-black-100:rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity)); --spectrum-transparent-black-200-rgb:0, 0, 0; - --spectrum-transparent-black-200-opacity:0.1; + --spectrum-transparent-black-200-opacity:0.12; --spectrum-transparent-black-200:rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity)); --spectrum-transparent-black-300-rgb:0, 0, 0; - --spectrum-transparent-black-300-opacity:0.25; + --spectrum-transparent-black-300-opacity:0.15; --spectrum-transparent-black-300:rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity)); --spectrum-transparent-black-400-rgb:0, 0, 0; - --spectrum-transparent-black-400-opacity:0.4; + --spectrum-transparent-black-400-opacity:0.22; --spectrum-transparent-black-400:rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); --spectrum-transparent-black-500-rgb:0, 0, 0; - --spectrum-transparent-black-500-opacity:0.55; + --spectrum-transparent-black-500-opacity:0.44; --spectrum-transparent-black-500:rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity)); --spectrum-transparent-black-600-rgb:0, 0, 0; - --spectrum-transparent-black-600-opacity:0.7; + --spectrum-transparent-black-600-opacity:0.56; --spectrum-transparent-black-600:rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity)); --spectrum-transparent-black-700-rgb:0, 0, 0; - --spectrum-transparent-black-700-opacity:0.8; + --spectrum-transparent-black-700-opacity:0.69; --spectrum-transparent-black-700:rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity)); --spectrum-transparent-black-800-rgb:0, 0, 0; - --spectrum-transparent-black-800-opacity:0.9; + --spectrum-transparent-black-800-opacity:0.84; --spectrum-transparent-black-800:rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity)); --spectrum-transparent-black-900-rgb:0, 0, 0; - --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb)); + --spectrum-transparent-black-900-opacity:0.93; + --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity)); + --spectrum-transparent-black-1000-rgb:0, 0, 0; + --spectrum-transparent-black-1000:rgba(var(--spectrum-transparent-black-1000-rgb)); --spectrum-icon-color-inverse:var(--spectrum-gray-50); --spectrum-icon-color-primary-default:var(--spectrum-neutral-content-color-default); - --spectrum-asterisk-icon-size-75:8px; --spectrum-radio-button-selection-indicator:4px; - --spectrum-field-label-top-margin-small:0px; --spectrum-field-label-to-component:0px; --spectrum-help-text-to-component:0px; - --spectrum-status-light-dot-size-small:8px; - --spectrum-action-button-edge-to-hold-icon-extra-small:3px; - --spectrum-action-button-edge-to-hold-icon-small:3px; --spectrum-button-minimum-width-multiplier:2.25; --spectrum-divider-thickness-small:1px; --spectrum-divider-thickness-medium:2px; @@ -1192,6 +887,8 @@ --spectrum-popover-tip-height:8px; --spectrum-menu-item-label-to-description:1px; --spectrum-menu-item-section-divider-height:8px; + --spectrum-slider-track-thickness:2px; + --spectrum-slider-handle-gap:4px; --spectrum-picker-minimum-width-multiplier:2; --spectrum-picker-end-edge-to-disclousure-icon-quiet:var(--spectrum-picker-end-edge-to-disclosure-icon-quiet); --spectrum-picker-end-edge-to-disclosure-icon-quiet:0px; @@ -1225,8 +922,6 @@ --spectrum-color-loupe-bottom-to-color-handle:12px; --spectrum-color-loupe-outer-border-width:var(--spectrum-border-width-200); --spectrum-color-loupe-inner-border-width:1px; - --spectrum-color-loupe-drop-shadow-y:2px; - --spectrum-color-loupe-drop-shadow-blur:8px; --spectrum-card-minimum-width:100px; --spectrum-card-preview-minimum-height:130px; --spectrum-card-selection-background-size:40px; @@ -1237,12 +932,6 @@ --spectrum-drop-zone-title-size:var(--spectrum-illustrated-message-title-size); --spectrum-drop-zone-cjk-title-size:var(--spectrum-illustrated-message-cjk-title-size); --spectrum-drop-zone-body-size:var(--spectrum-illustrated-message-body-size); - --spectrum-accordion-top-to-text-compact-small:2px; - --spectrum-accordion-top-to-text-compact-medium:4px; - --spectrum-accordion-disclosure-indicator-to-text:0px; - --spectrum-accordion-edge-to-disclosure-indicator:0px; - --spectrum-accordion-edge-to-text:0px; - --spectrum-accordion-focus-indicator-gap:0px; --spectrum-color-handle-border-width:var(--spectrum-border-width-200); --spectrum-color-handle-inner-border-width:1px; --spectrum-color-handle-outer-border-width:1px; @@ -1261,7 +950,6 @@ --spectrum-table-row-bottom-to-text-medium-compact:var(--spectrum-component-bottom-to-text-100); --spectrum-table-row-bottom-to-text-large-compact:var(--spectrum-component-bottom-to-text-200); --spectrum-table-row-bottom-to-text-extra-large-compact:var(--spectrum-component-bottom-to-text-300); - --spectrum-table-edge-to-content:16px; --spectrum-table-border-divider-width:1px; --spectrum-tab-item-height-small:var(--spectrum-component-height-200); --spectrum-tab-item-height-medium:var(--spectrum-component-height-300); @@ -1276,11 +964,21 @@ --spectrum-in-field-button-width-stacked-medium:28px; --spectrum-in-field-button-width-stacked-large:36px; --spectrum-in-field-button-width-stacked-extra-large:44px; + --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px; + --spectrum-in-field-button-edge-to-fill:0px; + --spectrum-in-field-button-stacked-inner-edge-to-fill:0px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small:7px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium:9px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large:13px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large:16px; --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); --spectrum-android-elevation:2dp; --spectrum-spacing-50:2px; --spectrum-spacing-75:4px; @@ -1296,6 +994,7 @@ --spectrum-spacing-1000:96px; --spectrum-focus-indicator-thickness:2px; --spectrum-focus-indicator-gap:2px; + --spectrum-border-width-100:1px; --spectrum-border-width-200:2px; --spectrum-border-width-400:4px; --spectrum-field-edge-to-text-quiet:0px; @@ -1305,6 +1004,22 @@ --spectrum-field-edge-to-validation-icon-quiet:0px; --spectrum-text-underline-thickness:1px; --spectrum-text-underline-gap:1px; + --spectrum-accent-color-100:var(--spectrum-blue-100); + --spectrum-accent-color-200:var(--spectrum-blue-200); + --spectrum-accent-color-300:var(--spectrum-blue-300); + --spectrum-accent-color-400:var(--spectrum-blue-400); + --spectrum-accent-color-500:var(--spectrum-blue-500); + --spectrum-accent-color-600:var(--spectrum-blue-600); + --spectrum-accent-color-700:var(--spectrum-blue-700); + --spectrum-accent-color-800:var(--spectrum-blue-800); + --spectrum-accent-color-900:var(--spectrum-blue-900); + --spectrum-accent-color-1000:var(--spectrum-blue-1000); + --spectrum-accent-color-1100:var(--spectrum-blue-1100); + --spectrum-accent-color-1200:var(--spectrum-blue-1200); + --spectrum-accent-color-1300:var(--spectrum-blue-1300); + --spectrum-accent-color-1400:var(--spectrum-blue-1400); + --spectrum-accent-color-1500:var(--spectrum-blue-1500); + --spectrum-accent-color-1600:var(--spectrum-blue-1600); --spectrum-informative-color-100:var(--spectrum-blue-100); --spectrum-informative-color-200:var(--spectrum-blue-200); --spectrum-informative-color-300:var(--spectrum-blue-300); @@ -1319,6 +1034,8 @@ --spectrum-informative-color-1200:var(--spectrum-blue-1200); --spectrum-informative-color-1300:var(--spectrum-blue-1300); --spectrum-informative-color-1400:var(--spectrum-blue-1400); + --spectrum-informative-color-1500:var(--spectrum-blue-1500); + --spectrum-informative-color-1600:var(--spectrum-blue-1600); --spectrum-negative-color-100:var(--spectrum-red-100); --spectrum-negative-color-200:var(--spectrum-red-200); --spectrum-negative-color-300:var(--spectrum-red-300); @@ -1333,6 +1050,8 @@ --spectrum-negative-color-1200:var(--spectrum-red-1200); --spectrum-negative-color-1300:var(--spectrum-red-1300); --spectrum-negative-color-1400:var(--spectrum-red-1400); + --spectrum-negative-color-1500:var(--spectrum-red-1500); + --spectrum-negative-color-1600:var(--spectrum-red-1600); --spectrum-notice-color-100:var(--spectrum-orange-100); --spectrum-notice-color-200:var(--spectrum-orange-200); --spectrum-notice-color-300:var(--spectrum-orange-300); @@ -1347,6 +1066,8 @@ --spectrum-notice-color-1200:var(--spectrum-orange-1200); --spectrum-notice-color-1300:var(--spectrum-orange-1300); --spectrum-notice-color-1400:var(--spectrum-orange-1400); + --spectrum-notice-color-1500:var(--spectrum-orange-1500); + --spectrum-notice-color-1600:var(--spectrum-orange-1600); --spectrum-positive-color-100:var(--spectrum-green-100); --spectrum-positive-color-200:var(--spectrum-green-200); --spectrum-positive-color-300:var(--spectrum-green-300); @@ -1361,6 +1082,8 @@ --spectrum-positive-color-1200:var(--spectrum-green-1200); --spectrum-positive-color-1300:var(--spectrum-green-1300); --spectrum-positive-color-1400:var(--spectrum-green-1400); + --spectrum-positive-color-1500:var(--spectrum-green-1500); + --spectrum-positive-color-1600:var(--spectrum-green-1600); --spectrum-default-font-family:var(--spectrum-sans-serif-font-family); --spectrum-sans-serif-font-family:Adobe Clean; --spectrum-serif-font-family:Adobe Clean Serif; @@ -1387,8 +1110,11 @@ --spectrum-heading-serif-light-font-style:var(--spectrum-default-font-style); --spectrum-heading-cjk-light-font-weight:var(--spectrum-light-font-weight); --spectrum-heading-cjk-light-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); --spectrum-heading-cjk-font-style:var(--spectrum-default-font-style); --spectrum-heading-sans-serif-heavy-font-weight:var(--spectrum-black-font-weight); --spectrum-heading-sans-serif-heavy-font-style:var(--spectrum-default-font-style); @@ -1420,7 +1146,9 @@ --spectrum-heading-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); --spectrum-heading-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); --spectrum-heading-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-serif-emphasized-font-style:var(--spectrum-italic-font-style); --spectrum-heading-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); --spectrum-heading-cjk-emphasized-font-style:var(--spectrum-default-font-style); @@ -1634,97 +1362,38 @@ --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb:206, 247, 243; --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); - --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-700); - --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-800); - --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-800); - --spectrum-slider-track-thickness:2px; - --spectrum-slider-handle-gap:4px; + --spectrum-color-handle-outer-border-color:var(--spectrum-black); --spectrum-picker-border-width:var(--spectrum-border-width-100); - --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px; - --spectrum-in-field-button-edge-to-fill:0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill:0px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); - --spectrum-corner-radius-75:2px; - --spectrum-drop-shadow-x:0px; - --spectrum-border-width-100:1px; - --spectrum-accent-color-100:var(--spectrum-blue-100); - --spectrum-accent-color-200:var(--spectrum-blue-200); - --spectrum-accent-color-300:var(--spectrum-blue-300); - --spectrum-accent-color-400:var(--spectrum-blue-400); - --spectrum-accent-color-500:var(--spectrum-blue-500); - --spectrum-accent-color-600:var(--spectrum-blue-600); - --spectrum-accent-color-700:var(--spectrum-blue-700); - --spectrum-accent-color-800:var(--spectrum-blue-800); - --spectrum-accent-color-900:var(--spectrum-blue-900); - --spectrum-accent-color-1000:var(--spectrum-blue-1000); - --spectrum-accent-color-1100:var(--spectrum-blue-1100); - --spectrum-accent-color-1200:var(--spectrum-blue-1200); - --spectrum-accent-color-1300:var(--spectrum-blue-1300); - --spectrum-accent-color-1400:var(--spectrum-blue-1400); - --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); } .spectrum--large{ - --spectrum-workflow-icon-size-50:18px; - --spectrum-workflow-icon-size-75:20px; - --spectrum-workflow-icon-size-100:22px; - --spectrum-workflow-icon-size-200:24px; - --spectrum-workflow-icon-size-300:28px; - --spectrum-arrow-icon-size-75:12px; - --spectrum-arrow-icon-size-100:14px; - --spectrum-arrow-icon-size-200:16px; - --spectrum-arrow-icon-size-300:16px; - --spectrum-arrow-icon-size-400:18px; - --spectrum-arrow-icon-size-500:22px; - --spectrum-arrow-icon-size-600:24px; - --spectrum-asterisk-icon-size-100:10px; - --spectrum-asterisk-icon-size-200:12px; - --spectrum-asterisk-icon-size-300:12px; - --spectrum-checkmark-icon-size-50:12px; - --spectrum-checkmark-icon-size-75:12px; - --spectrum-checkmark-icon-size-100:14px; - --spectrum-checkmark-icon-size-200:14px; - --spectrum-checkmark-icon-size-300:16px; - --spectrum-checkmark-icon-size-400:18px; - --spectrum-checkmark-icon-size-500:20px; - --spectrum-checkmark-icon-size-600:24px; - --spectrum-chevron-icon-size-50:8px; - --spectrum-chevron-icon-size-75:12px; - --spectrum-chevron-icon-size-100:14px; - --spectrum-chevron-icon-size-200:14px; - --spectrum-chevron-icon-size-300:16px; - --spectrum-chevron-icon-size-400:18px; - --spectrum-chevron-icon-size-500:20px; - --spectrum-chevron-icon-size-600:24px; - --spectrum-corner-triangle-icon-size-75:6px; - --spectrum-corner-triangle-icon-size-100:7px; - --spectrum-corner-triangle-icon-size-200:8px; - --spectrum-corner-triangle-icon-size-300:8px; - --spectrum-cross-icon-size-75:10px; - --spectrum-cross-icon-size-100:10px; - --spectrum-cross-icon-size-200:12px; - --spectrum-cross-icon-size-300:14px; - --spectrum-cross-icon-size-400:16px; - --spectrum-cross-icon-size-500:16px; - --spectrum-cross-icon-size-600:18px; - --spectrum-dash-icon-size-50:10px; - --spectrum-dash-icon-size-75:10px; - --spectrum-dash-icon-size-100:12px; - --spectrum-dash-icon-size-200:14px; - --spectrum-dash-icon-size-300:16px; - --spectrum-dash-icon-size-400:18px; - --spectrum-dash-icon-size-500:20px; - --spectrum-dash-icon-size-600:22px; + --spectrum-checkbox-control-size-small:16px; + --spectrum-checkbox-control-size-medium:18px; + --spectrum-checkbox-control-size-large:20px; + --spectrum-checkbox-control-size-extra-large:22px; + --spectrum-checkbox-top-to-control-small:7px; + --spectrum-checkbox-top-to-control-medium:11px; + --spectrum-checkbox-top-to-control-large:15px; + --spectrum-checkbox-top-to-control-extra-large:19px; + --spectrum-switch-control-width-small:32px; + --spectrum-switch-control-width-medium:36px; + --spectrum-switch-control-width-large:41px; + --spectrum-switch-control-width-extra-large:46px; + --spectrum-switch-control-height-small:16px; + --spectrum-switch-control-height-medium:18px; + --spectrum-switch-control-height-large:20px; + --spectrum-switch-control-height-extra-large:22px; + --spectrum-switch-top-to-control-small:7px; + --spectrum-switch-top-to-control-medium:11px; + --spectrum-switch-top-to-control-large:15px; + --spectrum-switch-top-to-control-extra-large:19px; + --spectrum-radio-button-control-size-small:16px; + --spectrum-radio-button-control-size-medium:18px; + --spectrum-radio-button-control-size-large:20px; + --spectrum-radio-button-control-size-extra-large:22px; + --spectrum-radio-button-top-to-control-small:7px; + --spectrum-radio-button-top-to-control-medium:11px; + --spectrum-radio-button-top-to-control-large:15px; + --spectrum-radio-button-top-to-control-extra-large:19px; --spectrum-field-label-text-to-asterisk-small:5px; --spectrum-field-label-text-to-asterisk-medium:5px; --spectrum-field-label-text-to-asterisk-large:6px; @@ -1733,6 +1402,7 @@ --spectrum-field-label-top-to-asterisk-medium:15px; --spectrum-field-label-top-to-asterisk-large:19px; --spectrum-field-label-top-to-asterisk-extra-large:24px; + --spectrum-field-label-top-margin-small:0px; --spectrum-field-label-top-margin-medium:5px; --spectrum-field-label-top-margin-large:6px; --spectrum-field-label-top-margin-extra-large:6px; @@ -1744,6 +1414,7 @@ --spectrum-help-text-top-to-workflow-icon-medium:4px; --spectrum-help-text-top-to-workflow-icon-large:8px; --spectrum-help-text-top-to-workflow-icon-extra-large:11px; + --spectrum-status-light-dot-size-small:8px; --spectrum-status-light-dot-size-medium:10px; --spectrum-status-light-dot-size-large:12px; --spectrum-status-light-dot-size-extra-large:12px; @@ -1751,6 +1422,8 @@ --spectrum-status-light-top-to-dot-medium:15px; --spectrum-status-light-top-to-dot-large:19px; --spectrum-status-light-top-to-dot-extra-large:24px; + --spectrum-action-button-edge-to-hold-icon-extra-small:3px; + --spectrum-action-button-edge-to-hold-icon-small:3px; --spectrum-action-button-edge-to-hold-icon-medium:5px; --spectrum-action-button-edge-to-hold-icon-large:6px; --spectrum-action-button-edge-to-hold-icon-extra-large:7px; @@ -1800,6 +1473,22 @@ --spectrum-menu-item-top-to-selected-icon-medium:13px; --spectrum-menu-item-top-to-selected-icon-large:17px; --spectrum-menu-item-top-to-selected-icon-extra-large:22px; + --spectrum-slider-control-height-small:18px; + --spectrum-slider-control-height-medium:20px; + --spectrum-slider-control-height-large:22px; + --spectrum-slider-control-height-extra-large:26px; + --spectrum-slider-handle-size-small:18px; + --spectrum-slider-handle-size-medium:20px; + --spectrum-slider-handle-size-large:22px; + --spectrum-slider-handle-size-extra-large:26px; + --spectrum-slider-handle-border-width-down-small:7px; + --spectrum-slider-handle-border-width-down-medium:8px; + --spectrum-slider-handle-border-width-down-large:9px; + --spectrum-slider-handle-border-width-down-extra-large:11px; + --spectrum-slider-bottom-to-handle-small:6px; + --spectrum-slider-bottom-to-handle-medium:10px; + --spectrum-slider-bottom-to-handle-large:14px; + --spectrum-slider-bottom-to-handle-extra-large:17px; --spectrum-slider-control-to-field-label-small:6px; --spectrum-slider-control-to-field-label-medium:10px; --spectrum-slider-control-to-field-label-large:14px; @@ -1830,7 +1519,7 @@ --spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs); --spectrum-opacity-checkerboard-square-size:10px; --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size:var(--spectrum-body-size-xs); + --spectrum-contextual-help-body-size:var(--spectrum-heading-size-xs); --spectrum-breadcrumbs-height-multiline:84px; --spectrum-breadcrumbs-top-to-text:17px; --spectrum-breadcrumbs-top-to-text-compact:16px; @@ -1883,8 +1572,10 @@ --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xxs); --spectrum-coach-mark-body-size:var(--spectrum-body-size-xs); --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-xs); + --spectrum-accordion-top-to-text-compact-small:2px; --spectrum-accordion-top-to-text-regular-small:7px; --spectrum-accordion-small-top-to-text-spacious:12px; + --spectrum-accordion-top-to-text-compact-medium:4px; --spectrum-accordion-top-to-text-regular-medium:9px; --spectrum-accordion-top-to-text-spacious-medium:14px; --spectrum-accordion-top-to-text-compact-large:7px; @@ -1906,6 +1597,10 @@ --spectrum-accordion-bottom-to-text-regular-extra-large:15px; --spectrum-accordion-bottom-to-text-spacious-extra-large:21px; --spectrum-accordion-minimum-width:250px; + --spectrum-accordion-disclosure-indicator-to-text:0px; + --spectrum-accordion-edge-to-disclosure-indicator:0px; + --spectrum-accordion-edge-to-text:0px; + --spectrum-accordion-focus-indicator-gap:0px; --spectrum-accordion-content-area-top-to-content:10px; --spectrum-accordion-content-area-bottom-to-content:20px; --spectrum-color-handle-size:20px; @@ -1942,6 +1637,7 @@ --spectrum-table-row-bottom-to-text-medium-spacious:18px; --spectrum-table-row-bottom-to-text-large-spacious:23px; --spectrum-table-row-bottom-to-text-extra-large-spacious:27px; + --spectrum-table-edge-to-content:16px; --spectrum-table-checkbox-to-text:30px; --spectrum-table-header-row-checkbox-to-top-small:14px; --spectrum-table-header-row-checkbox-to-top-medium:13px; @@ -2023,10 +1719,20 @@ --spectrum-side-navigation-with-icon-second-level-edge-to-text:62px; --spectrum-side-navigation-with-icon-third-level-edge-to-text:77px; --spectrum-side-navigation-item-to-item:5px; - --spectrum-side-navigation-item-to-header:30px; - --spectrum-side-navigation-header-to-item:10px; + --spectrum-side-navigation-item-to-header:20px; --spectrum-side-navigation-bottom-to-text:10px; --spectrum-tray-top-to-content-area:5px; + --spectrum-corner-radius-75:2px; + --spectrum-corner-radius-100:5px; + --spectrum-corner-radius-200:10px; + --spectrum-drop-shadow-x:0px; + --spectrum-drop-shadow-y:2px; + --spectrum-drop-shadow-blur:6px; + --spectrum-workflow-icon-size-50:18px; + --spectrum-workflow-icon-size-75:20px; + --spectrum-workflow-icon-size-100:22px; + --spectrum-workflow-icon-size-200:24px; + --spectrum-workflow-icon-size-300:28px; --spectrum-text-to-visual-50:8px; --spectrum-text-to-visual-75:9px; --spectrum-text-to-visual-100:10px; @@ -2143,10 +1849,10 @@ --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px; --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:22px; - --spectrum-navigational-indicator-top-to-back-icon-small:7px; - --spectrum-navigational-indicator-top-to-back-icon-medium:12px; - --spectrum-navigational-indicator-top-to-back-icon-large:16px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large:19px; + --spectrum-navigational-indicator-top-to-back-icon-small:9px; + --spectrum-navigational-indicator-top-to-back-icon-medium:13px; + --spectrum-navigational-indicator-top-to-back-icon-large:17px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:22px; --spectrum-color-control-track-width:30px; --spectrum-font-size-50:13px; --spectrum-font-size-75:15px; @@ -2269,88 +1975,35 @@ --spectrum-ui-icon-medium-display:none; --spectrum-ui-icon-large-display:block; - --spectrum-checkbox-control-size-small:16px; - --spectrum-checkbox-control-size-medium:18px; - --spectrum-checkbox-control-size-large:20px; - --spectrum-checkbox-control-size-extra-large:22px; - --spectrum-checkbox-top-to-control-small:7px; - --spectrum-checkbox-top-to-control-medium:11px; - --spectrum-checkbox-top-to-control-large:15px; - --spectrum-checkbox-top-to-control-extra-large:19px; - --spectrum-switch-control-width-small:32px; - --spectrum-switch-control-width-medium:36px; - --spectrum-switch-control-width-large:41px; - --spectrum-switch-control-width-extra-large:46px; - --spectrum-switch-control-height-small:16px; - --spectrum-switch-control-height-medium:18px; - --spectrum-switch-control-height-large:20px; - --spectrum-switch-control-height-extra-large:22px; - --spectrum-switch-top-to-control-small:7px; - --spectrum-switch-top-to-control-medium:11px; - --spectrum-switch-top-to-control-large:15px; - --spectrum-switch-top-to-control-extra-large:19px; - --spectrum-radio-button-control-size-small:16px; - --spectrum-radio-button-control-size-medium:18px; - --spectrum-radio-button-control-size-large:20px; - --spectrum-radio-button-control-size-extra-large:22px; - --spectrum-radio-button-top-to-control-small:7px; - --spectrum-radio-button-top-to-control-medium:11px; - --spectrum-radio-button-top-to-control-large:15px; - --spectrum-radio-button-top-to-control-extra-large:19px; - --spectrum-slider-control-height-small:18px; - --spectrum-slider-control-height-medium:20px; - --spectrum-slider-control-height-large:22px; - --spectrum-slider-control-height-extra-large:26px; - --spectrum-slider-handle-size-small:18px; - --spectrum-slider-handle-size-medium:20px; - --spectrum-slider-handle-size-large:22px; - --spectrum-slider-handle-size-extra-large:26px; - --spectrum-slider-handle-border-width-down-small:7px; - --spectrum-slider-handle-border-width-down-medium:8px; - --spectrum-slider-handle-border-width-down-large:9px; - --spectrum-slider-handle-border-width-down-extra-large:11px; - --spectrum-slider-bottom-to-handle-small:6px; - --spectrum-slider-bottom-to-handle-medium:10px; - --spectrum-slider-bottom-to-handle-large:14px; - --spectrum-slider-bottom-to-handle-extra-large:17px; - --spectrum-corner-radius-100:5px; - --spectrum-corner-radius-200:10px; - --spectrum-drop-shadow-y:2px; - --spectrum-drop-shadow-blur:6px; } .spectrum--light, .spectrum--lightest{ --spectrum-overlay-opacity:0.4; --spectrum-drop-shadow-color-rgb:0, 0, 0; --spectrum-drop-shadow-color-opacity:0.15; --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --spectrum-background-base-color:var(--spectrum-gray-200); - --spectrum-background-layer-1-color:var(--spectrum-gray-100); - --spectrum-background-layer-2-color:var(--spectrum-gray-50); - --spectrum-neutral-background-color-default:var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover:var(--spectrum-gray-900); - --spectrum-neutral-background-color-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900); - --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-600); - --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-700); + --spectrum-background-base-color:var(--spectrum-gray-100); + --spectrum-background-layer-1-color:var(--spectrum-gray-50); + --spectrum-background-layer-2-color:var(--spectrum-gray-25); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-800); --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-800); --spectrum-accent-background-color-default:var(--spectrum-accent-color-900); --spectrum-accent-background-color-hover:var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down:var(--spectrum-accent-color-1100); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-1000); --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-1000); --spectrum-informative-background-color-default:var(--spectrum-informative-color-900); --spectrum-informative-background-color-hover:var(--spectrum-informative-color-1000); - --spectrum-informative-background-color-down:var(--spectrum-informative-color-1100); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-1000); --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-1000); --spectrum-negative-background-color-default:var(--spectrum-negative-color-900); --spectrum-negative-background-color-hover:var(--spectrum-negative-color-1000); - --spectrum-negative-background-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-1000); --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-1000); --spectrum-positive-background-color-default:var(--spectrum-positive-color-900); --spectrum-positive-background-color-hover:var(--spectrum-positive-color-1000); - --spectrum-positive-background-color-down:var(--spectrum-positive-color-1100); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-1000); --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000); - --spectrum-notice-background-color-default:var(--spectrum-notice-color-600); --spectrum-gray-background-color-default:var(--spectrum-gray-700); --spectrum-red-background-color-default:var(--spectrum-red-900); --spectrum-orange-background-color-default:var(--spectrum-orange-600); @@ -2386,392 +2039,576 @@ --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-800); --spectrum-magenta-visual-color:var(--spectrum-magenta-800); --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200); - --spectrum-gray-50-rgb:255, 255, 255; + --spectrum-gray-25-rgb:255, 255, 255; + --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb:248, 248, 248; --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb:253, 253, 253; + --spectrum-gray-75-rgb:243, 243, 243; --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb:248, 248, 248; + --spectrum-gray-100-rgb:233, 233, 233; --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb:230, 230, 230; + --spectrum-gray-200-rgb:225, 225, 225; --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb:213, 213, 213; + --spectrum-gray-300-rgb:218, 218, 218; --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb:177, 177, 177; + --spectrum-gray-400-rgb:198, 198, 198; --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb:144, 144, 144; + --spectrum-gray-500-rgb:143, 143, 143; --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb:109, 109, 109; + --spectrum-gray-600-rgb:113, 113, 113; --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb:70, 70, 70; + --spectrum-gray-700-rgb:80, 80, 80; --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb:34, 34, 34; + --spectrum-gray-800-rgb:41, 41, 41; --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb:0, 0, 0; + --spectrum-gray-900-rgb:19, 19, 19; --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb:224, 242, 255; + --spectrum-gray-1000-rgb:0, 0, 0; + --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb:245, 249, 255; --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb:202, 232, 255; + --spectrum-blue-200-rgb:229, 240, 254; --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb:181, 222, 255; + --spectrum-blue-300-rgb:203, 226, 254; --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb:150, 206, 253; + --spectrum-blue-400-rgb:172, 207, 253; --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb:120, 187, 250; + --spectrum-blue-500-rgb:142, 185, 252; --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb:89, 167, 246; + --spectrum-blue-600-rgb:114, 158, 253; --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb:56, 146, 243; + --spectrum-blue-700-rgb:93, 137, 255; --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb:20, 122, 243; + --spectrum-blue-800-rgb:75, 117, 255; --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb:2, 101, 220; + --spectrum-blue-900-rgb:59, 99, 251; --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb:0, 84, 182; + --spectrum-blue-1000-rgb:39, 77, 234; --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb:0, 68, 145; + --spectrum-blue-1100-rgb:29, 62, 207; --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb:0, 53, 113; + --spectrum-blue-1200-rgb:21, 50, 173; --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb:0, 39, 84; + --spectrum-blue-1300-rgb:16, 40, 140; --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb:0, 28, 60; + --spectrum-blue-1400-rgb:12, 31, 105; --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb:255, 235, 231; + --spectrum-blue-1500-rgb:14, 24, 67; + --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb:7, 11, 30; + --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb:255, 246, 245; --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb:255, 221, 214; + --spectrum-red-200-rgb:255, 235, 232; --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb:255, 205, 195; + --spectrum-red-300-rgb:255, 214, 209; --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb:255, 183, 169; + --spectrum-red-400-rgb:255, 188, 180; --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb:255, 155, 136; + --spectrum-red-500-rgb:255, 157, 145; --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb:255, 124, 101; + --spectrum-red-600-rgb:255, 118, 101; --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb:247, 92, 70; + --spectrum-red-700-rgb:255, 81, 61; --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb:234, 56, 41; + --spectrum-red-800-rgb:240, 56, 35; --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb:211, 21, 16; + --spectrum-red-900-rgb:215, 50, 32; --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb:180, 0, 0; + --spectrum-red-1000-rgb:183, 40, 24; --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb:147, 0, 0; + --spectrum-red-1100-rgb:156, 33, 19; --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb:116, 0, 0; + --spectrum-red-1200-rgb:129, 27, 14; --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb:89, 0, 0; + --spectrum-red-1300-rgb:104, 21, 10; --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb:67, 0, 0; + --spectrum-red-1400-rgb:80, 16, 6; --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb:255, 236, 204; + --spectrum-red-1500-rgb:59, 11, 4; + --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb:29, 5, 2; + --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb:255, 246, 231; --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb:255, 223, 173; + --spectrum-orange-200-rgb:255, 236, 207; --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb:253, 210, 145; + --spectrum-orange-300-rgb:255, 218, 158; --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb:255, 187, 99; + --spectrum-orange-400-rgb:255, 193, 94; --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb:255, 160, 55; + --spectrum-orange-500-rgb:255, 162, 19; --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb:246, 133, 17; + --spectrum-orange-600-rgb:252, 125, 0; --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb:228, 111, 0; + --spectrum-orange-700-rgb:232, 106, 0; --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb:203, 93, 0; + --spectrum-orange-800-rgb:212, 91, 0; --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb:177, 76, 0; + --spectrum-orange-900-rgb:194, 78, 0; --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb:149, 61, 0; + --spectrum-orange-1000-rgb:167, 62, 0; --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb:122, 47, 0; + --spectrum-orange-1100-rgb:144, 51, 0; --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb:97, 35, 0; + --spectrum-orange-1200-rgb:118, 41, 0; --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb:73, 25, 1; + --spectrum-orange-1300-rgb:95, 32, 0; --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb:53, 18, 1; + --spectrum-orange-1400-rgb:73, 24, 0; --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb:251, 241, 152; + --spectrum-orange-1500-rgb:52, 18, 0; + --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb:25, 8, 0; + --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb:255, 248, 204; --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb:248, 231, 80; + --spectrum-yellow-200-rgb:255, 241, 151; --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb:248, 217, 4; + --spectrum-yellow-300-rgb:255, 222, 44; --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb:232, 198, 0; + --spectrum-yellow-400-rgb:245, 199, 0; --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb:215, 179, 0; + --spectrum-yellow-500-rgb:230, 175, 0; --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb:196, 159, 0; + --spectrum-yellow-600-rgb:210, 149, 0; --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb:176, 140, 0; + --spectrum-yellow-700-rgb:193, 131, 0; --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb:155, 120, 0; + --spectrum-yellow-800-rgb:175, 116, 0; --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb:133, 102, 0; + --spectrum-yellow-900-rgb:158, 102, 0; --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb:112, 83, 0; + --spectrum-yellow-1000-rgb:134, 85, 0; --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb:91, 67, 0; + --spectrum-yellow-1100-rgb:114, 72, 0; --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb:72, 51, 0; + --spectrum-yellow-1200-rgb:93, 59, 0; --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb:54, 37, 0; + --spectrum-yellow-1300-rgb:75, 47, 0; --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb:40, 26, 0; + --spectrum-yellow-1400-rgb:56, 35, 0; --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb:219, 252, 110; + --spectrum-yellow-1500-rgb:40, 25, 0; + --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb:18, 11, 0; + --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb:246, 251, 222; --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb:203, 244, 67; + --spectrum-chartreuse-200-rgb:234, 246, 173; --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb:188, 233, 42; + --spectrum-chartreuse-300-rgb:208, 236, 70; --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb:170, 216, 22; + --spectrum-chartreuse-400-rgb:182, 219, 0; --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb:152, 197, 10; + --spectrum-chartreuse-500-rgb:163, 196, 0; --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb:135, 177, 3; + --spectrum-chartreuse-600-rgb:143, 172, 0; --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb:118, 156, 0; + --spectrum-chartreuse-700-rgb:128, 153, 0; --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb:103, 136, 0; + --spectrum-chartreuse-800-rgb:114, 137, 0; --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb:87, 116, 0; + --spectrum-chartreuse-900-rgb:102, 122, 0; --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb:72, 96, 0; + --spectrum-chartreuse-1000-rgb:86, 103, 0; --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb:58, 77, 0; + --spectrum-chartreuse-1100-rgb:73, 87, 0; --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb:44, 59, 0; + --spectrum-chartreuse-1200-rgb:60, 71, 0; --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb:33, 44, 0; + --spectrum-chartreuse-1300-rgb:47, 57, 0; --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb:24, 31, 0; + --spectrum-chartreuse-1400-rgb:35, 43, 0; --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb:205, 252, 191; + --spectrum-chartreuse-1500-rgb:25, 30, 0; + --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb:11, 14, 0; + --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb:235, 255, 220; --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb:174, 246, 157; + --spectrum-celery-200-rgb:197, 255, 156; --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb:150, 238, 133; + --spectrum-celery-300-rgb:157, 247, 92; --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb:114, 224, 106; + --spectrum-celery-400-rgb:129, 228, 58; --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb:78, 207, 80; + --spectrum-celery-500-rgb:110, 206, 42; --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb:39, 187, 54; + --spectrum-celery-600-rgb:93, 180, 31; --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb:7, 167, 33; + --spectrum-celery-700-rgb:82, 161, 25; --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb:0, 145, 18; + --spectrum-celery-800-rgb:72, 144, 20; --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb:0, 124, 15; + --spectrum-celery-900-rgb:64, 129, 17; --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb:0, 103, 15; + --spectrum-celery-1000-rgb:52, 109, 12; --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb:0, 83, 13; + --spectrum-celery-1100-rgb:44, 92, 9; --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb:0, 64, 10; + --spectrum-celery-1200-rgb:35, 75, 6; --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb:0, 48, 7; + --spectrum-celery-1300-rgb:27, 60, 3; --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb:0, 34, 5; + --spectrum-celery-1400-rgb:19, 46, 0; --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb:206, 248, 224; + --spectrum-celery-1500-rgb:12, 33, 0; + --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb:4, 15, 0; + --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb:237, 252, 241; --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb:173, 244, 206; + --spectrum-green-200-rgb:215, 247, 225; --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb:137, 236, 188; + --spectrum-green-300-rgb:173, 238, 197; --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb:103, 222, 168; + --spectrum-green-400-rgb:107, 227, 162; --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb:73, 204, 147; + --spectrum-green-500-rgb:43, 209, 125; --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb:47, 184, 128; + --spectrum-green-600-rgb:18, 184, 103; --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb:21, 164, 110; + --spectrum-green-700-rgb:11, 164, 93; --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb:0, 143, 93; + --spectrum-green-800-rgb:7, 147, 85; --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb:0, 122, 77; + --spectrum-green-900-rgb:5, 131, 78; --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb:0, 101, 62; + --spectrum-green-1000-rgb:3, 110, 69; --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb:0, 81, 50; + --spectrum-green-1100-rgb:2, 93, 60; --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb:5, 63, 39; + --spectrum-green-1200-rgb:1, 76, 52; --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb:10, 46, 29; + --spectrum-green-1300-rgb:0, 61, 44; --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb:10, 32, 21; + --spectrum-green-1400-rgb:0, 46, 34; --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb:206, 247, 243; + --spectrum-green-1500-rgb:0, 33, 25; + --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb:0, 15, 12; + --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb:235, 251, 246; --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb:170, 241, 234; + --spectrum-seafoam-200-rgb:211, 246, 234; --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb:140, 233, 226; + --spectrum-seafoam-300-rgb:169, 237, 216; --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb:101, 218, 210; + --spectrum-seafoam-400-rgb:92, 225, 194; --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb:63, 201, 193; + --spectrum-seafoam-500-rgb:16, 207, 169; --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb:15, 181, 174; + --spectrum-seafoam-600-rgb:13, 181, 149; --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb:0, 161, 154; + --spectrum-seafoam-700-rgb:11, 162, 134; --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb:0, 140, 135; + --spectrum-seafoam-800-rgb:9, 144, 120; --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb:0, 119, 114; + --spectrum-seafoam-900-rgb:7, 129, 109; --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb:0, 99, 95; + --spectrum-seafoam-1000-rgb:5, 108, 92; --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb:12, 79, 76; + --spectrum-seafoam-1100-rgb:3, 92, 80; --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb:18, 60, 58; + --spectrum-seafoam-1200-rgb:1, 75, 67; --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb:18, 44, 43; + --spectrum-seafoam-1300-rgb:0, 60, 54; --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb:15, 31, 30; + --spectrum-seafoam-1400-rgb:0, 46, 40; --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb:197, 248, 255; + --spectrum-seafoam-1500-rgb:0, 33, 29; + --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb:0, 15, 14; + --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb:238, 250, 254; --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb:164, 240, 255; + --spectrum-cyan-200-rgb:217, 244, 253; --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb:136, 231, 250; + --spectrum-cyan-300-rgb:183, 231, 252; --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb:96, 216, 243; + --spectrum-cyan-400-rgb:138, 213, 255; --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb:51, 197, 232; + --spectrum-cyan-500-rgb:92, 192, 255; --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb:18, 176, 218; + --spectrum-cyan-600-rgb:48, 167, 254; --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb:1, 156, 200; + --spectrum-cyan-700-rgb:29, 149, 231; --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb:0, 134, 180; + --spectrum-cyan-800-rgb:18, 134, 205; --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb:0, 113, 159; + --spectrum-cyan-900-rgb:11, 120, 179; --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb:0, 93, 137; + --spectrum-cyan-1000-rgb:4, 102, 145; --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb:0, 74, 115; + --spectrum-cyan-1100-rgb:0, 87, 121; --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb:0, 57, 93; + --spectrum-cyan-1200-rgb:0, 71, 98; --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb:0, 42, 70; + --spectrum-cyan-1300-rgb:0, 57, 78; --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb:0, 30, 51; + --spectrum-cyan-1400-rgb:0, 43, 59; --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb:237, 238, 255; + --spectrum-cyan-1500-rgb:0, 31, 43; + --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb:0, 14, 20; + --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb:247, 248, 255; --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb:224, 226, 255; + --spectrum-indigo-200-rgb:235, 238, 255; --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb:211, 213, 255; + --spectrum-indigo-300-rgb:216, 222, 255; --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb:193, 196, 255; + --spectrum-indigo-400-rgb:192, 201, 255; --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb:172, 175, 255; + --spectrum-indigo-500-rgb:167, 178, 255; --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb:149, 153, 255; + --spectrum-indigo-600-rgb:145, 151, 254; --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb:126, 132, 252; + --spectrum-indigo-700-rgb:132, 128, 254; --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb:104, 109, 244; + --spectrum-indigo-800-rgb:122, 106, 253; --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb:82, 88, 228; + --spectrum-indigo-900-rgb:113, 85, 250; --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb:64, 70, 202; + --spectrum-indigo-1000-rgb:99, 56, 238; --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb:50, 54, 168; + --spectrum-indigo-1100-rgb:84, 36, 219; --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb:38, 41, 134; + --spectrum-indigo-1200-rgb:69, 19, 191; --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb:27, 30, 100; + --spectrum-indigo-1300-rgb:55, 6, 160; --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb:20, 22, 72; + --spectrum-indigo-1400-rgb:42, 0, 129; --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb:246, 235, 255; + --spectrum-indigo-1500-rgb:31, 0, 98; + --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb:17, 0, 54; + --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb:251, 247, 254; --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb:238, 221, 255; + --spectrum-purple-200-rgb:244, 235, 252; --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb:230, 208, 255; + --spectrum-purple-300-rgb:235, 218, 249; --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb:219, 187, 254; + --spectrum-purple-400-rgb:221, 193, 246; --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb:204, 164, 253; + --spectrum-purple-500-rgb:208, 167, 243; --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb:189, 139, 252; + --spectrum-purple-600-rgb:191, 138, 238; --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb:174, 114, 249; + --spectrum-purple-700-rgb:178, 114, 235; --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb:157, 87, 244; + --spectrum-purple-800-rgb:166, 92, 231; --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb:137, 61, 231; + --spectrum-purple-900-rgb:154, 71, 226; --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb:115, 38, 211; + --spectrum-purple-1000-rgb:134, 40, 217; --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb:93, 19, 183; + --spectrum-purple-1100-rgb:115, 13, 204; --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb:71, 12, 148; + --spectrum-purple-1200-rgb:93, 0, 177; --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb:51, 16, 106; + --spectrum-purple-1300-rgb:75, 0, 144; --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb:35, 15, 73; + --spectrum-purple-1400-rgb:59, 0, 111; --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb:255, 233, 252; + --spectrum-purple-1500-rgb:44, 0, 84; + --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb:23, 0, 45; + --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb:254, 246, 255; --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb:255, 218, 250; + --spectrum-fuchsia-200-rgb:253, 233, 255; --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb:254, 199, 248; + --spectrum-fuchsia-300-rgb:250, 211, 255; --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb:251, 174, 246; + --spectrum-fuchsia-400-rgb:247, 181, 255; --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb:245, 146, 243; + --spectrum-fuchsia-500-rgb:243, 147, 255; --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb:237, 116, 237; + --spectrum-fuchsia-600-rgb:236, 105, 255; --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb:224, 85, 226; + --spectrum-fuchsia-700-rgb:223, 77, 245; --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb:205, 58, 206; + --spectrum-fuchsia-800-rgb:200, 68, 220; --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb:182, 34, 183; + --spectrum-fuchsia-900-rgb:181, 57, 200; --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb:157, 3, 158; + --spectrum-fuchsia-1000-rgb:156, 40, 175; --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb:128, 0, 129; + --spectrum-fuchsia-1100-rgb:135, 27, 154; --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb:100, 6, 100; + --spectrum-fuchsia-1200-rgb:113, 15, 131; --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb:71, 14, 70; + --spectrum-fuchsia-1300-rgb:92, 4, 109; --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb:50, 13, 49; + --spectrum-fuchsia-1400-rgb:72, 0, 88; --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb:255, 234, 241; + --spectrum-fuchsia-1500-rgb:54, 0, 66; + --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb:29, 0, 35; + --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb:255, 245, 248; --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb:255, 220, 232; + --spectrum-magenta-200-rgb:255, 232, 240; --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb:255, 202, 221; + --spectrum-magenta-300-rgb:255, 213, 227; --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb:255, 178, 206; + --spectrum-magenta-400-rgb:255, 185, 208; --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb:255, 149, 189; + --spectrum-magenta-500-rgb:255, 152, 187; --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb:250, 119, 170; + --spectrum-magenta-600-rgb:255, 112, 159; --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb:239, 90, 152; + --spectrum-magenta-700-rgb:255, 72, 133; --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb:222, 61, 130; + --spectrum-magenta-800-rgb:240, 45, 110; --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb:200, 34, 105; + --spectrum-magenta-900-rgb:217, 35, 97; --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb:173, 9, 85; + --spectrum-magenta-1000-rgb:186, 22, 80; --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb:142, 0, 69; + --spectrum-magenta-1100-rgb:163, 5, 62; --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb:112, 0, 55; + --spectrum-magenta-1200-rgb:136, 0, 51; --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb:84, 3, 42; + --spectrum-magenta-1300-rgb:111, 0, 40; --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb:60, 6, 29; + --spectrum-magenta-1400-rgb:86, 0, 30; --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb:64, 0, 22; + --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb:35, 0, 12; + --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb:255, 246, 252; + --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb:255, 232, 247; + --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb:255, 211, 240; + --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb:255, 181, 230; + --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb:255, 148, 219; + --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb:255, 103, 204; + --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb:242, 76, 184; + --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb:228, 52, 163; + --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb:206, 42, 146; + --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb:176, 31, 123; + --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb:152, 22, 104; + --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb:128, 12, 85; + --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb:105, 3, 68; + --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb:83, 0, 53; + --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb:62, 0, 39; + --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb:33, 0, 21; + --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb:238, 251, 251; + --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb:209, 245, 245; + --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb:169, 236, 237; + --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb:111, 221, 228; + --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb:39, 202, 216; + --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb:15, 177, 192; + --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb:12, 158, 171; + --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb:10, 141, 153; + --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb:8, 126, 137; + --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb:5, 107, 116; + --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb:3, 90, 98; + --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb:1, 74, 81; + --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb:0, 59, 65; + --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb:0, 44, 49; + --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb:0, 32, 35; + --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb:0, 15, 17; + --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb:252, 247, 242; + --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb:247, 238, 225; + --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb:239, 221, 195; + --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb:229, 200, 157; + --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb:214, 177, 123; + --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb:190, 155, 104; + --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb:171, 138, 90; + --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb:154, 123, 77; + --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb:139, 109, 66; + --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb:119, 91, 50; + --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb:103, 76, 35; + --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb:88, 61, 21; + --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb:70, 49, 17; + --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb:52, 37, 13; + --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb:38, 26, 9; + --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb:16, 12, 4; + --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb:247, 247, 247; + --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb:239, 239, 239; + --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb:223, 223, 223; + --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb:204, 204, 204; + --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb:183, 183, 183; + --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb:160, 160, 160; + --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb:143, 143, 143; + --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb:128, 128, 128; + --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb:114, 114, 114; + --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb:96, 96, 96; + --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb:81, 81, 81; + --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb:66, 66, 66; + --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb:52, 52, 52; + --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb:39, 39, 39; + --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb:28, 28, 28; + --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb:12, 12, 12; + --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-900); --spectrum-icon-color-green-primary-default:var(--spectrum-green-900); --spectrum-icon-color-red-primary-default:var(--spectrum-red-900); @@ -2832,56 +2669,34 @@ --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800); } .spectrum--medium{ - --spectrum-workflow-icon-size-50:14px; - --spectrum-workflow-icon-size-75:16px; - --spectrum-workflow-icon-size-100:18px; - --spectrum-workflow-icon-size-200:20px; - --spectrum-workflow-icon-size-300:22px; - --spectrum-arrow-icon-size-75:10px; - --spectrum-arrow-icon-size-100:10px; - --spectrum-arrow-icon-size-200:12px; - --spectrum-arrow-icon-size-300:14px; - --spectrum-arrow-icon-size-400:16px; - --spectrum-arrow-icon-size-500:18px; - --spectrum-arrow-icon-size-600:20px; - --spectrum-asterisk-icon-size-100:8px; - --spectrum-asterisk-icon-size-200:10px; - --spectrum-asterisk-icon-size-300:10px; - --spectrum-checkmark-icon-size-50:10px; - --spectrum-checkmark-icon-size-75:10px; - --spectrum-checkmark-icon-size-100:10px; - --spectrum-checkmark-icon-size-200:12px; - --spectrum-checkmark-icon-size-300:14px; - --spectrum-checkmark-icon-size-400:16px; - --spectrum-checkmark-icon-size-500:16px; - --spectrum-checkmark-icon-size-600:18px; - --spectrum-chevron-icon-size-50:6px; - --spectrum-chevron-icon-size-75:10px; - --spectrum-chevron-icon-size-100:10px; - --spectrum-chevron-icon-size-200:12px; - --spectrum-chevron-icon-size-300:14px; - --spectrum-chevron-icon-size-400:16px; - --spectrum-chevron-icon-size-500:16px; - --spectrum-chevron-icon-size-600:18px; - --spectrum-corner-triangle-icon-size-75:5px; - --spectrum-corner-triangle-icon-size-100:5px; - --spectrum-corner-triangle-icon-size-200:6px; - --spectrum-corner-triangle-icon-size-300:7px; - --spectrum-cross-icon-size-75:8px; - --spectrum-cross-icon-size-100:8px; - --spectrum-cross-icon-size-200:10px; - --spectrum-cross-icon-size-300:12px; - --spectrum-cross-icon-size-400:12px; - --spectrum-cross-icon-size-500:14px; - --spectrum-cross-icon-size-600:16px; - --spectrum-dash-icon-size-50:8px; - --spectrum-dash-icon-size-75:8px; - --spectrum-dash-icon-size-100:10px; - --spectrum-dash-icon-size-200:12px; - --spectrum-dash-icon-size-300:12px; - --spectrum-dash-icon-size-400:14px; - --spectrum-dash-icon-size-500:16px; - --spectrum-dash-icon-size-600:18px; + --spectrum-checkbox-control-size-small:12px; + --spectrum-checkbox-control-size-medium:14px; + --spectrum-checkbox-control-size-large:16px; + --spectrum-checkbox-control-size-extra-large:18px; + --spectrum-checkbox-top-to-control-small:6px; + --spectrum-checkbox-top-to-control-medium:9px; + --spectrum-checkbox-top-to-control-large:12px; + --spectrum-checkbox-top-to-control-extra-large:15px; + --spectrum-switch-control-width-small:23px; + --spectrum-switch-control-width-medium:26px; + --spectrum-switch-control-width-large:29px; + --spectrum-switch-control-width-extra-large:33px; + --spectrum-switch-control-height-small:12px; + --spectrum-switch-control-height-medium:14px; + --spectrum-switch-control-height-large:16px; + --spectrum-switch-control-height-extra-large:18px; + --spectrum-switch-top-to-control-small:6px; + --spectrum-switch-top-to-control-medium:9px; + --spectrum-switch-top-to-control-large:12px; + --spectrum-switch-top-to-control-extra-large:15px; + --spectrum-radio-button-control-size-small:12px; + --spectrum-radio-button-control-size-medium:14px; + --spectrum-radio-button-control-size-large:16px; + --spectrum-radio-button-control-size-extra-large:18px; + --spectrum-radio-button-top-to-control-small:6px; + --spectrum-radio-button-top-to-control-medium:9px; + --spectrum-radio-button-top-to-control-large:12px; + --spectrum-radio-button-top-to-control-extra-large:15px; --spectrum-field-label-text-to-asterisk-small:4px; --spectrum-field-label-text-to-asterisk-medium:4px; --spectrum-field-label-text-to-asterisk-large:5px; @@ -2890,6 +2705,7 @@ --spectrum-field-label-top-to-asterisk-medium:12px; --spectrum-field-label-top-to-asterisk-large:15px; --spectrum-field-label-top-to-asterisk-extra-large:19px; + --spectrum-field-label-top-margin-small:0px; --spectrum-field-label-top-margin-medium:4px; --spectrum-field-label-top-margin-large:5px; --spectrum-field-label-top-margin-extra-large:5px; @@ -2901,6 +2717,7 @@ --spectrum-help-text-top-to-workflow-icon-medium:3px; --spectrum-help-text-top-to-workflow-icon-large:6px; --spectrum-help-text-top-to-workflow-icon-extra-large:9px; + --spectrum-status-light-dot-size-small:8px; --spectrum-status-light-dot-size-medium:8px; --spectrum-status-light-dot-size-large:10px; --spectrum-status-light-dot-size-extra-large:10px; @@ -2908,6 +2725,8 @@ --spectrum-status-light-top-to-dot-medium:12px; --spectrum-status-light-top-to-dot-large:15px; --spectrum-status-light-top-to-dot-extra-large:19px; + --spectrum-action-button-edge-to-hold-icon-extra-small:3px; + --spectrum-action-button-edge-to-hold-icon-small:3px; --spectrum-action-button-edge-to-hold-icon-medium:4px; --spectrum-action-button-edge-to-hold-icon-large:5px; --spectrum-action-button-edge-to-hold-icon-extra-large:6px; @@ -2957,6 +2776,22 @@ --spectrum-menu-item-top-to-selected-icon-medium:11px; --spectrum-menu-item-top-to-selected-icon-large:14px; --spectrum-menu-item-top-to-selected-icon-extra-large:17px; + --spectrum-slider-control-height-small:14px; + --spectrum-slider-control-height-medium:16px; + --spectrum-slider-control-height-large:18px; + --spectrum-slider-control-height-extra-large:20px; + --spectrum-slider-handle-size-small:14px; + --spectrum-slider-handle-size-medium:16px; + --spectrum-slider-handle-size-large:18px; + --spectrum-slider-handle-size-extra-large:20px; + --spectrum-slider-handle-border-width-down-small:5px; + --spectrum-slider-handle-border-width-down-medium:6px; + --spectrum-slider-handle-border-width-down-large:7px; + --spectrum-slider-handle-border-width-down-extra-large:8px; + --spectrum-slider-bottom-to-handle-small:5px; + --spectrum-slider-bottom-to-handle-medium:8px; + --spectrum-slider-bottom-to-handle-large:11px; + --spectrum-slider-bottom-to-handle-extra-large:14px; --spectrum-slider-control-to-field-label-small:5px; --spectrum-slider-control-to-field-label-medium:8px; --spectrum-slider-control-to-field-label-large:11px; @@ -2987,7 +2822,7 @@ --spectrum-alert-dialog-description-size:var(--spectrum-body-size-s); --spectrum-opacity-checkerboard-square-size:8px; --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size:var(--spectrum-body-size-s); + --spectrum-contextual-help-body-size:var(--spectrum-heading-size-s); --spectrum-breadcrumbs-height-multiline:72px; --spectrum-breadcrumbs-top-to-text:13px; --spectrum-breadcrumbs-top-to-text-compact:11px; @@ -3040,8 +2875,10 @@ --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xs); --spectrum-coach-mark-body-size:var(--spectrum-body-size-s); --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-s); + --spectrum-accordion-top-to-text-compact-small:2px; --spectrum-accordion-top-to-text-regular-small:5px; --spectrum-accordion-small-top-to-text-spacious:9px; + --spectrum-accordion-top-to-text-compact-medium:4px; --spectrum-accordion-top-to-text-regular-medium:8px; --spectrum-accordion-top-to-text-spacious-medium:12px; --spectrum-accordion-top-to-text-compact-large:4px; @@ -3063,6 +2900,10 @@ --spectrum-accordion-bottom-to-text-regular-extra-large:12px; --spectrum-accordion-bottom-to-text-spacious-extra-large:16px; --spectrum-accordion-minimum-width:200px; + --spectrum-accordion-disclosure-indicator-to-text:0px; + --spectrum-accordion-edge-to-disclosure-indicator:0px; + --spectrum-accordion-edge-to-text:0px; + --spectrum-accordion-focus-indicator-gap:0px; --spectrum-accordion-content-area-top-to-content:8px; --spectrum-accordion-content-area-bottom-to-content:16px; --spectrum-color-handle-size:16px; @@ -3099,6 +2940,7 @@ --spectrum-table-row-bottom-to-text-medium-spacious:16px; --spectrum-table-row-bottom-to-text-large-spacious:18px; --spectrum-table-row-bottom-to-text-extra-large-spacious:21px; + --spectrum-table-edge-to-content:16px; --spectrum-table-checkbox-to-text:24px; --spectrum-table-header-row-checkbox-to-top-small:10px; --spectrum-table-header-row-checkbox-to-top-medium:9px; @@ -3180,10 +3022,20 @@ --spectrum-side-navigation-with-icon-second-level-edge-to-text:50px; --spectrum-side-navigation-with-icon-third-level-edge-to-text:62px; --spectrum-side-navigation-item-to-item:4px; - --spectrum-side-navigation-item-to-header:24px; - --spectrum-side-navigation-header-to-item:8px; + --spectrum-side-navigation-item-to-header:16px; --spectrum-side-navigation-bottom-to-text:8px; --spectrum-tray-top-to-content-area:4px; + --spectrum-corner-radius-75:2px; + --spectrum-corner-radius-100:4px; + --spectrum-corner-radius-200:8px; + --spectrum-drop-shadow-x:0px; + --spectrum-drop-shadow-y:1px; + --spectrum-drop-shadow-blur:4px; + --spectrum-workflow-icon-size-50:14px; + --spectrum-workflow-icon-size-75:16px; + --spectrum-workflow-icon-size-100:18px; + --spectrum-workflow-icon-size-200:20px; + --spectrum-workflow-icon-size-300:22px; --spectrum-text-to-visual-50:6px; --spectrum-text-to-visual-75:7px; --spectrum-text-to-visual-100:8px; @@ -3300,10 +3152,10 @@ --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:11px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large:14px; --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:17px; - --spectrum-navigational-indicator-top-to-back-icon-small:6px; - --spectrum-navigational-indicator-top-to-back-icon-medium:9px; - --spectrum-navigational-indicator-top-to-back-icon-large:12px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large:15px; + --spectrum-navigational-indicator-top-to-back-icon-small:7px; + --spectrum-navigational-indicator-top-to-back-icon-medium:11px; + --spectrum-navigational-indicator-top-to-back-icon-large:14px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:17px; --spectrum-color-control-track-width:24px; --spectrum-font-size-50:11px; --spectrum-font-size-75:12px; @@ -3425,58 +3277,68 @@ --spectrum-ui-icon-medium-display:block; --spectrum-ui-icon-large-display:none; - --spectrum-checkbox-control-size-small:12px; - --spectrum-checkbox-control-size-medium:14px; - --spectrum-checkbox-control-size-large:16px; - --spectrum-checkbox-control-size-extra-large:18px; - --spectrum-checkbox-top-to-control-small:6px; - --spectrum-checkbox-top-to-control-medium:9px; - --spectrum-checkbox-top-to-control-large:12px; - --spectrum-checkbox-top-to-control-extra-large:15px; - --spectrum-switch-control-width-small:23px; - --spectrum-switch-control-width-medium:26px; - --spectrum-switch-control-width-large:29px; - --spectrum-switch-control-width-extra-large:33px; - --spectrum-switch-control-height-small:12px; - --spectrum-switch-control-height-medium:14px; - --spectrum-switch-control-height-large:16px; - --spectrum-switch-control-height-extra-large:18px; - --spectrum-switch-top-to-control-small:6px; - --spectrum-switch-top-to-control-medium:9px; - --spectrum-switch-top-to-control-large:12px; - --spectrum-switch-top-to-control-extra-large:15px; - --spectrum-radio-button-control-size-small:12px; - --spectrum-radio-button-control-size-medium:14px; - --spectrum-radio-button-control-size-large:16px; - --spectrum-radio-button-control-size-extra-large:18px; - --spectrum-radio-button-top-to-control-small:6px; - --spectrum-radio-button-top-to-control-medium:9px; - --spectrum-radio-button-top-to-control-large:12px; - --spectrum-radio-button-top-to-control-extra-large:15px; - --spectrum-slider-control-height-small:14px; - --spectrum-slider-control-height-medium:16px; - --spectrum-slider-control-height-large:18px; - --spectrum-slider-control-height-extra-large:20px; - --spectrum-slider-handle-size-small:14px; - --spectrum-slider-handle-size-medium:16px; - --spectrum-slider-handle-size-large:18px; - --spectrum-slider-handle-size-extra-large:20px; - --spectrum-slider-handle-border-width-down-small:5px; - --spectrum-slider-handle-border-width-down-medium:6px; - --spectrum-slider-handle-border-width-down-large:7px; - --spectrum-slider-handle-border-width-down-extra-large:8px; - --spectrum-slider-bottom-to-handle-small:5px; - --spectrum-slider-bottom-to-handle-medium:8px; - --spectrum-slider-bottom-to-handle-large:11px; - --spectrum-slider-bottom-to-handle-extra-large:14px; - --spectrum-corner-radius-100:4px; - --spectrum-corner-radius-200:8px; - --spectrum-drop-shadow-y:1px; - --spectrum-drop-shadow-blur:4px; } -.spectrum--express.spectrum--dark,.spectrum--express.spectrum--darkest{ +.spectrum--darkest{ + --spectrum-menu-item-background-color-default-rgb:255, 255, 255; + --spectrum-menu-item-background-color-default-opacity:0; + --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); /* --spectrum-gray-900 */ + --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down:var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200); + /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-900-rgb); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb:var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ + + /* Drop Indicator color rgb */ + --spectrum-dropindicator-color:var(--spectrum-blue-700); + + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.08); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-down:rgba(var(--spectrum-white-rgb), 0.15); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.08); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); + + --spectrum-badge-label-icon-color-primary:var(--spectrum-black); + + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); + --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); + + --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); + + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700); + + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.08); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); + + --spectrum-logic-button-and-background-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000); + + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900); + + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700); + + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); +} +.spectrum--express.spectrum--dark{ + /* Drop Zone background color rgb */ /* var(--spectrum-accent-color-900);*/ +} +.spectrum--express.spectrum--dark,.spectrum--express.spectrum--darkest{ + --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-900-rgb); --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); @@ -3485,6 +3347,9 @@ --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-800); --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-700); } +.spectrum--express.spectrum--darkest{ + /* Drop Zone background color rgb */ /* var(--spectrum-accent-color-900);*/ +} .spectrum--express.spectrum--large{ --spectrum-colorwheel-path:"M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0"; --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; @@ -3494,56 +3359,6 @@ --spectrum-dial-border-radius:15px; --spectrum-assetcard-focus-ring-border-radius:12px; - --spectrum-checkbox-control-size-small:18px; - --spectrum-checkbox-control-size-medium:20px; - --spectrum-checkbox-control-size-large:22px; - --spectrum-checkbox-control-size-extra-large:26px; - --spectrum-checkbox-top-to-control-small:6px; - --spectrum-checkbox-top-to-control-medium:10px; - --spectrum-checkbox-top-to-control-large:14px; - --spectrum-checkbox-top-to-control-extra-large:17px; - --spectrum-switch-control-width-small:32px; - --spectrum-switch-control-width-medium:36px; - --spectrum-switch-control-width-large:41px; - --spectrum-switch-control-width-extra-large:46px; - --spectrum-switch-control-height-small:18px; - --spectrum-switch-control-height-medium:20px; - --spectrum-switch-control-height-large:22px; - --spectrum-switch-control-height-extra-large:26px; - --spectrum-switch-top-to-control-small:6px; - --spectrum-switch-top-to-control-medium:10px; - --spectrum-switch-top-to-control-large:14px; - --spectrum-switch-top-to-control-extra-large:17px; - --spectrum-radio-button-control-size-small:18px; - --spectrum-radio-button-control-size-medium:20px; - --spectrum-radio-button-control-size-large:22px; - --spectrum-radio-button-control-size-extra-large:26px; - --spectrum-radio-button-top-to-control-small:6px; - --spectrum-radio-button-top-to-control-medium:10px; - --spectrum-radio-button-top-to-control-large:14px; - --spectrum-radio-button-top-to-control-extra-large:17px; - --spectrum-slider-control-height-small:22px; - --spectrum-slider-control-height-medium:24px; - --spectrum-slider-control-height-large:28px; - --spectrum-slider-control-height-extra-large:30px; - --spectrum-slider-handle-size-small:22px; - --spectrum-slider-handle-size-medium:24px; - --spectrum-slider-handle-size-large:28px; - --spectrum-slider-handle-size-extra-large:30px; - --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200); - --spectrum-slider-bottom-to-handle-small:4px; - --spectrum-slider-bottom-to-handle-medium:8px; - --spectrum-slider-bottom-to-handle-large:12px; - --spectrum-slider-bottom-to-handle-extra-large:15px; - --spectrum-corner-radius-75:4px; - --spectrum-corner-radius-100:8px; - --spectrum-corner-radius-200:16px; - --spectrum-drop-shadow-x:0px; - --spectrum-drop-shadow-y:4px; - --spectrum-drop-shadow-blur:16px; } .spectrum--express.spectrum--light, .spectrum--express.spectrum--lightest{ @@ -3566,94 +3381,7 @@ --spectrum-dial-border-radius:12px; --spectrum-assetcard-focus-ring-border-radius:10px; - --spectrum-checkbox-control-size-small:14px; - --spectrum-checkbox-control-size-medium:16px; - --spectrum-checkbox-control-size-large:18px; - --spectrum-checkbox-control-size-extra-large:20px; - --spectrum-checkbox-top-to-control-small:5px; - --spectrum-checkbox-top-to-control-medium:8px; - --spectrum-checkbox-top-to-control-large:11px; - --spectrum-checkbox-top-to-control-extra-large:14px; - --spectrum-switch-control-width-small:25px; - --spectrum-switch-control-width-medium:28px; - --spectrum-switch-control-width-large:32px; - --spectrum-switch-control-width-extra-large:35px; - --spectrum-switch-control-height-small:14px; - --spectrum-switch-control-height-medium:16px; - --spectrum-switch-control-height-large:18px; - --spectrum-switch-control-height-extra-large:20px; - --spectrum-switch-top-to-control-small:5px; - --spectrum-switch-top-to-control-medium:8px; - --spectrum-switch-top-to-control-large:11px; - --spectrum-switch-top-to-control-extra-large:14px; - --spectrum-radio-button-control-size-small:14px; - --spectrum-radio-button-control-size-medium:16px; - --spectrum-radio-button-control-size-large:18px; - --spectrum-radio-button-control-size-extra-large:20px; - --spectrum-radio-button-top-to-control-small:5px; - --spectrum-radio-button-top-to-control-medium:8px; - --spectrum-radio-button-top-to-control-large:11px; - --spectrum-radio-button-top-to-control-extra-large:14px; - --spectrum-slider-control-height-small:18px; - --spectrum-slider-control-height-medium:20px; - --spectrum-slider-control-height-large:22px; - --spectrum-slider-control-height-extra-large:24px; - --spectrum-slider-handle-size-small:18px; - --spectrum-slider-handle-size-medium:20px; - --spectrum-slider-handle-size-large:22px; - --spectrum-slider-handle-size-extra-large:24px; - --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200); - --spectrum-slider-bottom-to-handle-small:3px; - --spectrum-slider-bottom-to-handle-medium:6px; - --spectrum-slider-bottom-to-handle-large:9px; - --spectrum-slider-bottom-to-handle-extra-large:12px; - --spectrum-corner-radius-75:3px; - --spectrum-corner-radius-100:6px; - --spectrum-corner-radius-200:12px; - --spectrum-drop-shadow-x:0px; - --spectrum-drop-shadow-y:4px; - --spectrum-drop-shadow-blur:16px; } .spectrum--express{ --system:express; - --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800); - --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); - --spectrum-slider-track-thickness:4px; - --spectrum-slider-handle-gap:0px; - --spectrum-picker-border-width:0; - --spectrum-in-field-button-fill-stacked-inner-border-rounding:1px; - --spectrum-in-field-button-edge-to-fill:4px; - --spectrum-in-field-button-stacked-inner-edge-to-fill:1px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:5px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:7px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:8px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:3px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:4px; - --spectrum-border-width-100:2px; - --spectrum-accent-color-100:var(--spectrum-indigo-100); - --spectrum-accent-color-200:var(--spectrum-indigo-200); - --spectrum-accent-color-300:var(--spectrum-indigo-300); - --spectrum-accent-color-400:var(--spectrum-indigo-400); - --spectrum-accent-color-500:var(--spectrum-indigo-500); - --spectrum-accent-color-600:var(--spectrum-indigo-600); - --spectrum-accent-color-700:var(--spectrum-indigo-700); - --spectrum-accent-color-800:var(--spectrum-indigo-800); - --spectrum-accent-color-900:var(--spectrum-indigo-900); - --spectrum-accent-color-1000:var(--spectrum-indigo-1000); - --spectrum-accent-color-1100:var(--spectrum-indigo-1100); - --spectrum-accent-color-1200:var(--spectrum-indigo-1200); - --spectrum-accent-color-1300:var(--spectrum-indigo-1300); - --spectrum-accent-color-1400:var(--spectrum-indigo-1400); - --spectrum-heading-sans-serif-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-cjk-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-black-font-weight); } diff --git a/tokens/package.json b/tokens/package.json index f55afc97496..17a7609a241 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -28,7 +28,7 @@ "adobe" ], "devDependencies": { - "@adobe/spectrum-tokens": "12.24.0", + "@adobe/spectrum-tokens": "13.0.0-beta.5", "@nxkit/style-dictionary": "^5.0.0", "postcss": "^8.4.35", "postcss-cli": "^11.0.0", diff --git a/yarn.lock b/yarn.lock index d301780a0fc..9b7d17e1d7f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -121,10 +121,10 @@ __metadata: languageName: node linkType: hard -"@adobe/spectrum-tokens@npm:12.24.0": - version: 12.24.0 - resolution: "@adobe/spectrum-tokens@npm:12.24.0" - checksum: 10c0/73dfcccf07d1051826f0f77bba53966ac931120819798f1e2e8201493e1f2df62b8b00eefb9754868ed5d77e44d231a09f2fc41f6d10fd419e81fc6823efb364 +"@adobe/spectrum-tokens@npm:13.0.0-beta.5": + version: 13.0.0-beta.5 + resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.5" + checksum: 10c0/4b2d8540c552cccbfe6cd48e9e4d6019d0728d1c6108a4d711d15aa443807572978c79aac8db5810d5dc886ec4194e1a7abd6144bfc3183866018ca6e75c3d00 languageName: node linkType: hard @@ -5424,11 +5424,18 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/tokens@npm:^14.0.0, @spectrum-css/tokens@workspace:tokens": +"@spectrum-css/tokens@npm:^14.0.0": + version: 14.0.0 + resolution: "@spectrum-css/tokens@npm:14.0.0" + checksum: 10c0/59b9a49c01b939035af8e73fec914f18cbd18eae17815fb8ce93a0c2e3b1217d21a20f8b697a6ac7b4d135d5dca52f985d6556e5f9c2a9f52698ce0c5dd401b1 + languageName: node + linkType: hard + +"@spectrum-css/tokens@workspace:tokens": version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:12.24.0" + "@adobe/spectrum-tokens": "npm:13.0.0-beta.5" "@nxkit/style-dictionary": "npm:^5.0.0" postcss: "npm:^8.4.35" postcss-cli: "npm:^11.0.0" From 0aa513a0a5f7cc36ae7b4df1843f25657dc56aa3 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Mon, 8 Jan 2024 16:14:51 -0500 Subject: [PATCH 02/42] feat(tokens): use 13.0.0-beta.8 --- tokens/dist/css/dark-vars.css | 35 ++++ tokens/dist/css/global-vars.css | 3 +- tokens/dist/css/large-vars.css | 59 ++++++- tokens/dist/css/light-vars.css | 37 ++++- tokens/dist/css/medium-vars.css | 59 ++++++- tokens/dist/css/spectrum/global-vars.css | 4 - tokens/dist/index.css | 195 +++++++++++++++++++++-- tokens/package.json | 2 +- yarn.lock | 10 +- 9 files changed, 364 insertions(+), 40 deletions(-) delete mode 100644 tokens/dist/css/spectrum/global-vars.css diff --git a/tokens/dist/css/dark-vars.css b/tokens/dist/css/dark-vars.css index 752ad50ac53..b73de4985ea 100644 --- a/tokens/dist/css/dark-vars.css +++ b/tokens/dist/css/dark-vars.css @@ -26,6 +26,7 @@ --spectrum-positive-background-color-hover:var(--spectrum-positive-color-500); --spectrum-positive-background-color-down:var(--spectrum-positive-color-500); --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-500); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); --spectrum-gray-background-color-default:var(--spectrum-gray-700); --spectrum-red-background-color-default:var(--spectrum-red-700); --spectrum-orange-background-color-default:var(--spectrum-orange-800); @@ -60,6 +61,8 @@ --spectrum-purple-visual-color:var(--spectrum-purple-900); --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); --spectrum-magenta-visual-color:var(--spectrum-magenta-900); + --spectrum-background-elevated-color:var(--spectrum-gray-75); + --spectrum-background-pasteboard-color:var(--spectrum-gray-25); --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); --spectrum-gray-25-rgb:17, 17, 17; --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); @@ -631,6 +634,38 @@ --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); --spectrum-silver-1600-rgb:255, 255, 255; --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb:48, 17, 4; + --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb:59, 21, 5; + --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb:79, 28, 7; + --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb:100, 41, 15; + --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb:122, 57, 28; + --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb:143, 74, 40; + --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb:163, 88, 52; + --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb:179, 103, 64; + --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb:192, 119, 80; + --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb:206, 136, 99; + --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb:220, 154, 118; + --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb:232, 179, 149; + --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb:239, 203, 183; + --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb:246, 225, 214; + --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb:252, 244, 239; + --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb:255, 255, 255; + --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb)); --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); diff --git a/tokens/dist/css/global-vars.css b/tokens/dist/css/global-vars.css index 368ced8d2c8..e33423cb9c7 100644 --- a/tokens/dist/css/global-vars.css +++ b/tokens/dist/css/global-vars.css @@ -14,7 +14,6 @@ --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); --spectrum-neutral-subdued-content-color-selected:var(--spectrum-neutral-subdued-content-color-down); --spectrum-accent-content-color-selected:var(--spectrum-accent-content-color-down); - --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); --spectrum-disabled-background-color:var(--spectrum-gray-100); --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-100); --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-100); @@ -78,6 +77,7 @@ --spectrum-coach-mark-pagination-color:var(--spectrum-gray-600); --spectrum-color-handle-inner-border-color:var(--spectrum-black); --spectrum-color-handle-inner-border-opacity:0.42; + --spectrum-color-handle-outer-border-color:var(--spectrum-black); --spectrum-color-handle-outer-border-opacity:var(--spectrum-color-handle-inner-border-opacity); --spectrum-color-handle-drop-shadow-color:var(--spectrum-drop-shadow-color); --spectrum-floating-action-button-drop-shadow-color:var(--spectrum-transparent-black-300); @@ -198,6 +198,7 @@ --spectrum-slider-track-thickness:2px; --spectrum-slider-handle-gap:4px; --spectrum-picker-minimum-width-multiplier:2; + --spectrum-picker-border-width:var(--spectrum-border-width-100); --spectrum-picker-end-edge-to-disclousure-icon-quiet:var(--spectrum-picker-end-edge-to-disclosure-icon-quiet); --spectrum-picker-end-edge-to-disclosure-icon-quiet:0px; --spectrum-text-field-minimum-width-multiplier:1.5; diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css index 03dcddc236c..f1d06e56628 100644 --- a/tokens/dist/css/large-vars.css +++ b/tokens/dist/css/large-vars.css @@ -152,7 +152,7 @@ --spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs); --spectrum-opacity-checkerboard-square-size:10px; --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size:var(--spectrum-heading-size-xs); + --spectrum-contextual-help-body-size:var(--spectrum-body-size-xs); --spectrum-breadcrumbs-height-multiline:84px; --spectrum-breadcrumbs-top-to-text:17px; --spectrum-breadcrumbs-top-to-text-compact:16px; @@ -352,9 +352,52 @@ --spectrum-side-navigation-with-icon-second-level-edge-to-text:62px; --spectrum-side-navigation-with-icon-third-level-edge-to-text:77px; --spectrum-side-navigation-item-to-item:5px; - --spectrum-side-navigation-item-to-header:20px; + --spectrum-side-navigation-item-to-header:30px; --spectrum-side-navigation-bottom-to-text:10px; --spectrum-tray-top-to-content-area:5px; + --spectrum-arrow-icon-size-75:12px; + --spectrum-arrow-icon-size-100:14px; + --spectrum-arrow-icon-size-200:16px; + --spectrum-arrow-icon-size-300:16px; + --spectrum-arrow-icon-size-400:18px; + --spectrum-arrow-icon-size-500:22px; + --spectrum-arrow-icon-size-600:24px; + --spectrum-asterisk-icon-size-75:8px; + --spectrum-asterisk-icon-size-100:10px; + --spectrum-asterisk-icon-size-200:12px; + --spectrum-asterisk-icon-size-300:12px; + --spectrum-checkmark-icon-size-50:12px; + --spectrum-checkmark-icon-size-75:12px; + --spectrum-checkmark-icon-size-100:14px; + --spectrum-checkmark-icon-size-200:14px; + --spectrum-checkmark-icon-size-300:16px; + --spectrum-checkmark-icon-size-400:18px; + --spectrum-checkmark-icon-size-500:20px; + --spectrum-checkmark-icon-size-600:24px; + --spectrum-chevron-icon-size-50:8px; + --spectrum-chevron-icon-size-75:12px; + --spectrum-chevron-icon-size-100:14px; + --spectrum-chevron-icon-size-200:14px; + --spectrum-chevron-icon-size-300:16px; + --spectrum-chevron-icon-size-400:18px; + --spectrum-chevron-icon-size-500:20px; + --spectrum-chevron-icon-size-600:24px; + --spectrum-cross-icon-size-75:10px; + --spectrum-cross-icon-size-100:10px; + --spectrum-cross-icon-size-200:12px; + --spectrum-cross-icon-size-300:14px; + --spectrum-cross-icon-size-400:16px; + --spectrum-cross-icon-size-500:16px; + --spectrum-cross-icon-size-600:18px; + --spectrum-dash-icon-size-50:10px; + --spectrum-dash-icon-size-75:10px; + --spectrum-dash-icon-size-100:12px; + --spectrum-dash-icon-size-200:14px; + --spectrum-dash-icon-size-300:16px; + --spectrum-dash-icon-size-400:18px; + --spectrum-dash-icon-size-500:20px; + --spectrum-dash-icon-size-600:22px; + --spectrum-side-navigation-header-to-item:10px; --spectrum-corner-radius-75:2px; --spectrum-corner-radius-100:5px; --spectrum-corner-radius-200:10px; @@ -482,11 +525,15 @@ --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px; --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:22px; - --spectrum-navigational-indicator-top-to-back-icon-small:9px; - --spectrum-navigational-indicator-top-to-back-icon-medium:13px; - --spectrum-navigational-indicator-top-to-back-icon-large:17px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large:22px; + --spectrum-navigational-indicator-top-to-back-icon-small:7px; + --spectrum-navigational-indicator-top-to-back-icon-medium:12px; + --spectrum-navigational-indicator-top-to-back-icon-large:16px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:19px; --spectrum-color-control-track-width:30px; + --spectrum-corner-triangle-icon-size-75:6px; + --spectrum-corner-triangle-icon-size-100:7px; + --spectrum-corner-triangle-icon-size-200:8px; + --spectrum-corner-triangle-icon-size-300:8px; --spectrum-font-size-50:13px; --spectrum-font-size-75:15px; --spectrum-font-size-100:17px; diff --git a/tokens/dist/css/light-vars.css b/tokens/dist/css/light-vars.css index fb2692cc1dc..50a0b6c0c18 100644 --- a/tokens/dist/css/light-vars.css +++ b/tokens/dist/css/light-vars.css @@ -3,7 +3,7 @@ --spectrum-drop-shadow-color-rgb:0, 0, 0; --spectrum-drop-shadow-color-opacity:0.15; --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --spectrum-background-base-color:var(--spectrum-gray-100); + --spectrum-background-base-color:var(--spectrum-gray-25); --spectrum-background-layer-1-color:var(--spectrum-gray-50); --spectrum-background-layer-2-color:var(--spectrum-gray-25); --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-700); @@ -26,6 +26,7 @@ --spectrum-positive-background-color-hover:var(--spectrum-positive-color-1000); --spectrum-positive-background-color-down:var(--spectrum-positive-color-1000); --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-600); --spectrum-gray-background-color-default:var(--spectrum-gray-700); --spectrum-red-background-color-default:var(--spectrum-red-900); --spectrum-orange-background-color-default:var(--spectrum-orange-600); @@ -60,6 +61,8 @@ --spectrum-purple-visual-color:var(--spectrum-purple-800); --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-800); --spectrum-magenta-visual-color:var(--spectrum-magenta-800); + --spectrum-background-elevated-color:var(--spectrum-gray-25); + --spectrum-background-pasteboard-color:var(--spectrum-gray-100); --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200); --spectrum-gray-25-rgb:255, 255, 255; --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); @@ -631,6 +634,38 @@ --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); --spectrum-silver-1600-rgb:12, 12, 12; --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb:253, 247, 243; + --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb:249, 236, 229; + --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb:244, 218, 203; + --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb:237, 196, 172; + --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb:229, 170, 136; + --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb:212, 145, 108; + --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb:198, 126, 88; + --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb:184, 109, 70; + --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb:170, 94, 56; + --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb:147, 77, 43; + --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb:128, 62, 32; + --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb:110, 48, 21; + --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb:92, 35, 11; + --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb:72, 25, 6; + --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb:52, 18, 4; + --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb:24, 8, 2; + --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb)); --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-900); --spectrum-icon-color-green-primary-default:var(--spectrum-green-900); --spectrum-icon-color-red-primary-default:var(--spectrum-red-900); diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css index 99bd8530e17..552f807d4a3 100644 --- a/tokens/dist/css/medium-vars.css +++ b/tokens/dist/css/medium-vars.css @@ -152,7 +152,7 @@ --spectrum-alert-dialog-description-size:var(--spectrum-body-size-s); --spectrum-opacity-checkerboard-square-size:8px; --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size:var(--spectrum-heading-size-s); + --spectrum-contextual-help-body-size:var(--spectrum-body-size-s); --spectrum-breadcrumbs-height-multiline:72px; --spectrum-breadcrumbs-top-to-text:13px; --spectrum-breadcrumbs-top-to-text-compact:11px; @@ -352,9 +352,52 @@ --spectrum-side-navigation-with-icon-second-level-edge-to-text:50px; --spectrum-side-navigation-with-icon-third-level-edge-to-text:62px; --spectrum-side-navigation-item-to-item:4px; - --spectrum-side-navigation-item-to-header:16px; + --spectrum-side-navigation-item-to-header:24px; --spectrum-side-navigation-bottom-to-text:8px; --spectrum-tray-top-to-content-area:4px; + --spectrum-arrow-icon-size-75:10px; + --spectrum-arrow-icon-size-100:10px; + --spectrum-arrow-icon-size-200:12px; + --spectrum-arrow-icon-size-300:14px; + --spectrum-arrow-icon-size-400:16px; + --spectrum-arrow-icon-size-500:18px; + --spectrum-arrow-icon-size-600:20px; + --spectrum-asterisk-icon-size-75:8px; + --spectrum-asterisk-icon-size-100:8px; + --spectrum-asterisk-icon-size-200:10px; + --spectrum-asterisk-icon-size-300:10px; + --spectrum-checkmark-icon-size-50:10px; + --spectrum-checkmark-icon-size-75:10px; + --spectrum-checkmark-icon-size-100:10px; + --spectrum-checkmark-icon-size-200:12px; + --spectrum-checkmark-icon-size-300:14px; + --spectrum-checkmark-icon-size-400:16px; + --spectrum-checkmark-icon-size-500:16px; + --spectrum-checkmark-icon-size-600:18px; + --spectrum-chevron-icon-size-50:6px; + --spectrum-chevron-icon-size-75:10px; + --spectrum-chevron-icon-size-100:10px; + --spectrum-chevron-icon-size-200:12px; + --spectrum-chevron-icon-size-300:14px; + --spectrum-chevron-icon-size-400:16px; + --spectrum-chevron-icon-size-500:16px; + --spectrum-chevron-icon-size-600:18px; + --spectrum-cross-icon-size-75:8px; + --spectrum-cross-icon-size-100:8px; + --spectrum-cross-icon-size-200:10px; + --spectrum-cross-icon-size-300:12px; + --spectrum-cross-icon-size-400:12px; + --spectrum-cross-icon-size-500:14px; + --spectrum-cross-icon-size-600:16px; + --spectrum-dash-icon-size-50:8px; + --spectrum-dash-icon-size-75:8px; + --spectrum-dash-icon-size-100:10px; + --spectrum-dash-icon-size-200:12px; + --spectrum-dash-icon-size-300:12px; + --spectrum-dash-icon-size-400:14px; + --spectrum-dash-icon-size-500:16px; + --spectrum-dash-icon-size-600:18px; + --spectrum-side-navigation-header-to-item:8px; --spectrum-corner-radius-75:2px; --spectrum-corner-radius-100:4px; --spectrum-corner-radius-200:8px; @@ -482,11 +525,15 @@ --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:11px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large:14px; --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:17px; - --spectrum-navigational-indicator-top-to-back-icon-small:7px; - --spectrum-navigational-indicator-top-to-back-icon-medium:11px; - --spectrum-navigational-indicator-top-to-back-icon-large:14px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large:17px; + --spectrum-navigational-indicator-top-to-back-icon-small:6px; + --spectrum-navigational-indicator-top-to-back-icon-medium:9px; + --spectrum-navigational-indicator-top-to-back-icon-large:12px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:15px; --spectrum-color-control-track-width:24px; + --spectrum-corner-triangle-icon-size-75:5px; + --spectrum-corner-triangle-icon-size-100:5px; + --spectrum-corner-triangle-icon-size-200:6px; + --spectrum-corner-triangle-icon-size-300:7px; --spectrum-font-size-50:11px; --spectrum-font-size-75:12px; --spectrum-font-size-100:14px; diff --git a/tokens/dist/css/spectrum/global-vars.css b/tokens/dist/css/spectrum/global-vars.css deleted file mode 100644 index bbd978f8cc3..00000000000 --- a/tokens/dist/css/spectrum/global-vars.css +++ /dev/null @@ -1,4 +0,0 @@ -.spectrum{ - --spectrum-color-handle-outer-border-color:var(--spectrum-black); - --spectrum-picker-border-width:var(--spectrum-border-width-100); -} diff --git a/tokens/dist/index.css b/tokens/dist/index.css index b0470a1e1e4..b421b23968d 100644 --- a/tokens/dist/index.css +++ b/tokens/dist/index.css @@ -26,6 +26,7 @@ --spectrum-positive-background-color-hover:var(--spectrum-positive-color-500); --spectrum-positive-background-color-down:var(--spectrum-positive-color-500); --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-500); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); --spectrum-gray-background-color-default:var(--spectrum-gray-700); --spectrum-red-background-color-default:var(--spectrum-red-700); --spectrum-orange-background-color-default:var(--spectrum-orange-800); @@ -60,6 +61,8 @@ --spectrum-purple-visual-color:var(--spectrum-purple-900); --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); --spectrum-magenta-visual-color:var(--spectrum-magenta-900); + --spectrum-background-elevated-color:var(--spectrum-gray-75); + --spectrum-background-pasteboard-color:var(--spectrum-gray-25); --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); --spectrum-gray-25-rgb:17, 17, 17; --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); @@ -631,6 +634,38 @@ --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); --spectrum-silver-1600-rgb:255, 255, 255; --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb:48, 17, 4; + --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb:59, 21, 5; + --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb:79, 28, 7; + --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb:100, 41, 15; + --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb:122, 57, 28; + --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb:143, 74, 40; + --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb:163, 88, 52; + --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb:179, 103, 64; + --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb:192, 119, 80; + --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb:206, 136, 99; + --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb:220, 154, 118; + --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb:232, 179, 149; + --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb:239, 203, 183; + --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb:246, 225, 214; + --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb:252, 244, 239; + --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb:255, 255, 255; + --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb)); --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); @@ -706,7 +741,6 @@ --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); --spectrum-neutral-subdued-content-color-selected:var(--spectrum-neutral-subdued-content-color-down); --spectrum-accent-content-color-selected:var(--spectrum-accent-content-color-down); - --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); --spectrum-disabled-background-color:var(--spectrum-gray-100); --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-100); --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-100); @@ -770,6 +804,7 @@ --spectrum-coach-mark-pagination-color:var(--spectrum-gray-600); --spectrum-color-handle-inner-border-color:var(--spectrum-black); --spectrum-color-handle-inner-border-opacity:0.42; + --spectrum-color-handle-outer-border-color:var(--spectrum-black); --spectrum-color-handle-outer-border-opacity:var(--spectrum-color-handle-inner-border-opacity); --spectrum-color-handle-drop-shadow-color:var(--spectrum-drop-shadow-color); --spectrum-floating-action-button-drop-shadow-color:var(--spectrum-transparent-black-300); @@ -890,6 +925,7 @@ --spectrum-slider-track-thickness:2px; --spectrum-slider-handle-gap:4px; --spectrum-picker-minimum-width-multiplier:2; + --spectrum-picker-border-width:var(--spectrum-border-width-100); --spectrum-picker-end-edge-to-disclousure-icon-quiet:var(--spectrum-picker-end-edge-to-disclosure-icon-quiet); --spectrum-picker-end-edge-to-disclosure-icon-quiet:0px; --spectrum-text-field-minimum-width-multiplier:1.5; @@ -1362,8 +1398,6 @@ --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb:206, 247, 243; --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); - --spectrum-color-handle-outer-border-color:var(--spectrum-black); - --spectrum-picker-border-width:var(--spectrum-border-width-100); } .spectrum--large{ --spectrum-checkbox-control-size-small:16px; @@ -1519,7 +1553,7 @@ --spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs); --spectrum-opacity-checkerboard-square-size:10px; --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs); - --spectrum-contextual-help-body-size:var(--spectrum-heading-size-xs); + --spectrum-contextual-help-body-size:var(--spectrum-body-size-xs); --spectrum-breadcrumbs-height-multiline:84px; --spectrum-breadcrumbs-top-to-text:17px; --spectrum-breadcrumbs-top-to-text-compact:16px; @@ -1719,9 +1753,52 @@ --spectrum-side-navigation-with-icon-second-level-edge-to-text:62px; --spectrum-side-navigation-with-icon-third-level-edge-to-text:77px; --spectrum-side-navigation-item-to-item:5px; - --spectrum-side-navigation-item-to-header:20px; + --spectrum-side-navigation-item-to-header:30px; --spectrum-side-navigation-bottom-to-text:10px; --spectrum-tray-top-to-content-area:5px; + --spectrum-arrow-icon-size-75:12px; + --spectrum-arrow-icon-size-100:14px; + --spectrum-arrow-icon-size-200:16px; + --spectrum-arrow-icon-size-300:16px; + --spectrum-arrow-icon-size-400:18px; + --spectrum-arrow-icon-size-500:22px; + --spectrum-arrow-icon-size-600:24px; + --spectrum-asterisk-icon-size-75:8px; + --spectrum-asterisk-icon-size-100:10px; + --spectrum-asterisk-icon-size-200:12px; + --spectrum-asterisk-icon-size-300:12px; + --spectrum-checkmark-icon-size-50:12px; + --spectrum-checkmark-icon-size-75:12px; + --spectrum-checkmark-icon-size-100:14px; + --spectrum-checkmark-icon-size-200:14px; + --spectrum-checkmark-icon-size-300:16px; + --spectrum-checkmark-icon-size-400:18px; + --spectrum-checkmark-icon-size-500:20px; + --spectrum-checkmark-icon-size-600:24px; + --spectrum-chevron-icon-size-50:8px; + --spectrum-chevron-icon-size-75:12px; + --spectrum-chevron-icon-size-100:14px; + --spectrum-chevron-icon-size-200:14px; + --spectrum-chevron-icon-size-300:16px; + --spectrum-chevron-icon-size-400:18px; + --spectrum-chevron-icon-size-500:20px; + --spectrum-chevron-icon-size-600:24px; + --spectrum-cross-icon-size-75:10px; + --spectrum-cross-icon-size-100:10px; + --spectrum-cross-icon-size-200:12px; + --spectrum-cross-icon-size-300:14px; + --spectrum-cross-icon-size-400:16px; + --spectrum-cross-icon-size-500:16px; + --spectrum-cross-icon-size-600:18px; + --spectrum-dash-icon-size-50:10px; + --spectrum-dash-icon-size-75:10px; + --spectrum-dash-icon-size-100:12px; + --spectrum-dash-icon-size-200:14px; + --spectrum-dash-icon-size-300:16px; + --spectrum-dash-icon-size-400:18px; + --spectrum-dash-icon-size-500:20px; + --spectrum-dash-icon-size-600:22px; + --spectrum-side-navigation-header-to-item:10px; --spectrum-corner-radius-75:2px; --spectrum-corner-radius-100:5px; --spectrum-corner-radius-200:10px; @@ -1849,11 +1926,15 @@ --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px; --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:22px; - --spectrum-navigational-indicator-top-to-back-icon-small:9px; - --spectrum-navigational-indicator-top-to-back-icon-medium:13px; - --spectrum-navigational-indicator-top-to-back-icon-large:17px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large:22px; + --spectrum-navigational-indicator-top-to-back-icon-small:7px; + --spectrum-navigational-indicator-top-to-back-icon-medium:12px; + --spectrum-navigational-indicator-top-to-back-icon-large:16px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:19px; --spectrum-color-control-track-width:30px; + --spectrum-corner-triangle-icon-size-75:6px; + --spectrum-corner-triangle-icon-size-100:7px; + --spectrum-corner-triangle-icon-size-200:8px; + --spectrum-corner-triangle-icon-size-300:8px; --spectrum-font-size-50:13px; --spectrum-font-size-75:15px; --spectrum-font-size-100:17px; @@ -1981,7 +2062,7 @@ --spectrum-drop-shadow-color-rgb:0, 0, 0; --spectrum-drop-shadow-color-opacity:0.15; --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --spectrum-background-base-color:var(--spectrum-gray-100); + --spectrum-background-base-color:var(--spectrum-gray-25); --spectrum-background-layer-1-color:var(--spectrum-gray-50); --spectrum-background-layer-2-color:var(--spectrum-gray-25); --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-700); @@ -2004,6 +2085,7 @@ --spectrum-positive-background-color-hover:var(--spectrum-positive-color-1000); --spectrum-positive-background-color-down:var(--spectrum-positive-color-1000); --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-600); --spectrum-gray-background-color-default:var(--spectrum-gray-700); --spectrum-red-background-color-default:var(--spectrum-red-900); --spectrum-orange-background-color-default:var(--spectrum-orange-600); @@ -2038,6 +2120,8 @@ --spectrum-purple-visual-color:var(--spectrum-purple-800); --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-800); --spectrum-magenta-visual-color:var(--spectrum-magenta-800); + --spectrum-background-elevated-color:var(--spectrum-gray-25); + --spectrum-background-pasteboard-color:var(--spectrum-gray-100); --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200); --spectrum-gray-25-rgb:255, 255, 255; --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); @@ -2609,6 +2693,38 @@ --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); --spectrum-silver-1600-rgb:12, 12, 12; --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb:253, 247, 243; + --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb:249, 236, 229; + --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb:244, 218, 203; + --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb:237, 196, 172; + --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb:229, 170, 136; + --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb:212, 145, 108; + --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb:198, 126, 88; + --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb:184, 109, 70; + --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb:170, 94, 56; + --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb:147, 77, 43; + --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb:128, 62, 32; + --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb:110, 48, 21; + --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb:92, 35, 11; + --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb:72, 25, 6; + --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb:52, 18, 4; + --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb:24, 8, 2; + --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb)); --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-900); --spectrum-icon-color-green-primary-default:var(--spectrum-green-900); --spectrum-icon-color-red-primary-default:var(--spectrum-red-900); @@ -2822,7 +2938,7 @@ --spectrum-alert-dialog-description-size:var(--spectrum-body-size-s); --spectrum-opacity-checkerboard-square-size:8px; --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xs); - --spectrum-contextual-help-body-size:var(--spectrum-heading-size-s); + --spectrum-contextual-help-body-size:var(--spectrum-body-size-s); --spectrum-breadcrumbs-height-multiline:72px; --spectrum-breadcrumbs-top-to-text:13px; --spectrum-breadcrumbs-top-to-text-compact:11px; @@ -3022,9 +3138,52 @@ --spectrum-side-navigation-with-icon-second-level-edge-to-text:50px; --spectrum-side-navigation-with-icon-third-level-edge-to-text:62px; --spectrum-side-navigation-item-to-item:4px; - --spectrum-side-navigation-item-to-header:16px; + --spectrum-side-navigation-item-to-header:24px; --spectrum-side-navigation-bottom-to-text:8px; --spectrum-tray-top-to-content-area:4px; + --spectrum-arrow-icon-size-75:10px; + --spectrum-arrow-icon-size-100:10px; + --spectrum-arrow-icon-size-200:12px; + --spectrum-arrow-icon-size-300:14px; + --spectrum-arrow-icon-size-400:16px; + --spectrum-arrow-icon-size-500:18px; + --spectrum-arrow-icon-size-600:20px; + --spectrum-asterisk-icon-size-75:8px; + --spectrum-asterisk-icon-size-100:8px; + --spectrum-asterisk-icon-size-200:10px; + --spectrum-asterisk-icon-size-300:10px; + --spectrum-checkmark-icon-size-50:10px; + --spectrum-checkmark-icon-size-75:10px; + --spectrum-checkmark-icon-size-100:10px; + --spectrum-checkmark-icon-size-200:12px; + --spectrum-checkmark-icon-size-300:14px; + --spectrum-checkmark-icon-size-400:16px; + --spectrum-checkmark-icon-size-500:16px; + --spectrum-checkmark-icon-size-600:18px; + --spectrum-chevron-icon-size-50:6px; + --spectrum-chevron-icon-size-75:10px; + --spectrum-chevron-icon-size-100:10px; + --spectrum-chevron-icon-size-200:12px; + --spectrum-chevron-icon-size-300:14px; + --spectrum-chevron-icon-size-400:16px; + --spectrum-chevron-icon-size-500:16px; + --spectrum-chevron-icon-size-600:18px; + --spectrum-cross-icon-size-75:8px; + --spectrum-cross-icon-size-100:8px; + --spectrum-cross-icon-size-200:10px; + --spectrum-cross-icon-size-300:12px; + --spectrum-cross-icon-size-400:12px; + --spectrum-cross-icon-size-500:14px; + --spectrum-cross-icon-size-600:16px; + --spectrum-dash-icon-size-50:8px; + --spectrum-dash-icon-size-75:8px; + --spectrum-dash-icon-size-100:10px; + --spectrum-dash-icon-size-200:12px; + --spectrum-dash-icon-size-300:12px; + --spectrum-dash-icon-size-400:14px; + --spectrum-dash-icon-size-500:16px; + --spectrum-dash-icon-size-600:18px; + --spectrum-side-navigation-header-to-item:8px; --spectrum-corner-radius-75:2px; --spectrum-corner-radius-100:4px; --spectrum-corner-radius-200:8px; @@ -3152,11 +3311,15 @@ --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:11px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large:14px; --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large:17px; - --spectrum-navigational-indicator-top-to-back-icon-small:7px; - --spectrum-navigational-indicator-top-to-back-icon-medium:11px; - --spectrum-navigational-indicator-top-to-back-icon-large:14px; - --spectrum-navigational-indicator-top-to-back-icon-extra-large:17px; + --spectrum-navigational-indicator-top-to-back-icon-small:6px; + --spectrum-navigational-indicator-top-to-back-icon-medium:9px; + --spectrum-navigational-indicator-top-to-back-icon-large:12px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large:15px; --spectrum-color-control-track-width:24px; + --spectrum-corner-triangle-icon-size-75:5px; + --spectrum-corner-triangle-icon-size-100:5px; + --spectrum-corner-triangle-icon-size-200:6px; + --spectrum-corner-triangle-icon-size-300:7px; --spectrum-font-size-50:11px; --spectrum-font-size-75:12px; --spectrum-font-size-100:14px; diff --git a/tokens/package.json b/tokens/package.json index 17a7609a241..f4dcd54afea 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -28,7 +28,7 @@ "adobe" ], "devDependencies": { - "@adobe/spectrum-tokens": "13.0.0-beta.5", + "@adobe/spectrum-tokens": "13.0.0-beta.8", "@nxkit/style-dictionary": "^5.0.0", "postcss": "^8.4.35", "postcss-cli": "^11.0.0", diff --git a/yarn.lock b/yarn.lock index 9b7d17e1d7f..a1c788fc435 100644 --- a/yarn.lock +++ b/yarn.lock @@ -121,10 +121,10 @@ __metadata: languageName: node linkType: hard -"@adobe/spectrum-tokens@npm:13.0.0-beta.5": - version: 13.0.0-beta.5 - resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.5" - checksum: 10c0/4b2d8540c552cccbfe6cd48e9e4d6019d0728d1c6108a4d711d15aa443807572978c79aac8db5810d5dc886ec4194e1a7abd6144bfc3183866018ca6e75c3d00 +"@adobe/spectrum-tokens@npm:13.0.0-beta.8": + version: 13.0.0-beta.8 + resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.8" + checksum: 10c0/a259d380a4b203f57bb6b84ec2fc53dbee53fa1ebff23c4cc400254fe9dd8aace2f016b40b0748c1937fa60eccdfc26db91786e64a8f12485063595266461205 languageName: node linkType: hard @@ -5435,7 +5435,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:13.0.0-beta.5" + "@adobe/spectrum-tokens": "npm:13.0.0-beta.8" "@nxkit/style-dictionary": "npm:^5.0.0" postcss: "npm:^8.4.35" postcss-cli: "npm:^11.0.0" From 07288a56cd6ce8ed85e3c504fd68dd6ad6b37bd8 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Thu, 11 Jan 2024 09:30:35 -0500 Subject: [PATCH 03/42] feat(tokens): use 13.0.0-beta.9 --- tokens/dist/css/global-vars.css | 3 ++ tokens/dist/css/large-vars.css | 30 +++++++++--------- tokens/dist/css/medium-vars.css | 22 ++++++------- tokens/dist/index.css | 55 +++++++++++++++++---------------- tokens/package.json | 2 +- yarn.lock | 10 +++--- 6 files changed, 64 insertions(+), 58 deletions(-) diff --git a/tokens/dist/css/global-vars.css b/tokens/dist/css/global-vars.css index e33423cb9c7..ac2f611792a 100644 --- a/tokens/dist/css/global-vars.css +++ b/tokens/dist/css/global-vars.css @@ -313,6 +313,9 @@ --spectrum-field-edge-to-validation-icon-quiet:0px; --spectrum-text-underline-thickness:1px; --spectrum-text-underline-gap:1px; + --spectrum-component-size-width-ratio-down:0.3333; + --spectrum-component-size-minimum-perspective-down:24px; + --spectrum-component-size-difference-down:-2px; --spectrum-accent-color-100:var(--spectrum-blue-100); --spectrum-accent-color-200:var(--spectrum-blue-200); --spectrum-accent-color-300:var(--spectrum-blue-300); diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css index f1d06e56628..4fcf990f550 100644 --- a/tokens/dist/css/large-vars.css +++ b/tokens/dist/css/large-vars.css @@ -404,16 +404,16 @@ --spectrum-drop-shadow-x:0px; --spectrum-drop-shadow-y:2px; --spectrum-drop-shadow-blur:6px; - --spectrum-workflow-icon-size-50:18px; - --spectrum-workflow-icon-size-75:20px; - --spectrum-workflow-icon-size-100:22px; - --spectrum-workflow-icon-size-200:24px; - --spectrum-workflow-icon-size-300:28px; - --spectrum-text-to-visual-50:8px; - --spectrum-text-to-visual-75:9px; - --spectrum-text-to-visual-100:10px; - --spectrum-text-to-visual-200:11px; - --spectrum-text-to-visual-300:13px; + --spectrum-workflow-icon-size-50:16px; + --spectrum-workflow-icon-size-75:18px; + --spectrum-workflow-icon-size-100:24px; + --spectrum-workflow-icon-size-200:28px; + --spectrum-workflow-icon-size-300:30px; + --spectrum-text-to-visual-50:7px; + --spectrum-text-to-visual-75:7px; + --spectrum-text-to-visual-100:8px; + --spectrum-text-to-visual-200:9px; + --spectrum-text-to-visual-300:11px; --spectrum-text-to-control-75:11px; --spectrum-text-to-control-100:13px; --spectrum-text-to-control-200:14px; @@ -452,11 +452,11 @@ --spectrum-component-edge-to-text-100:15px; --spectrum-component-edge-to-text-200:19px; --spectrum-component-edge-to-text-300:22px; - --spectrum-component-top-to-workflow-icon-50:4px; - --spectrum-component-top-to-workflow-icon-75:5px; - --spectrum-component-top-to-workflow-icon-100:9px; - --spectrum-component-top-to-workflow-icon-200:13px; - --spectrum-component-top-to-workflow-icon-300:16px; + --spectrum-component-top-to-workflow-icon-50:5px; + --spectrum-component-top-to-workflow-icon-75:6px; + --spectrum-component-top-to-workflow-icon-100:8px; + --spectrum-component-top-to-workflow-icon-200:11px; + --spectrum-component-top-to-workflow-icon-300:15px; --spectrum-component-top-to-text-50:4px; --spectrum-component-top-to-text-75:5px; --spectrum-component-top-to-text-100:8px; diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css index 552f807d4a3..d5ba2cc0540 100644 --- a/tokens/dist/css/medium-vars.css +++ b/tokens/dist/css/medium-vars.css @@ -406,14 +406,14 @@ --spectrum-drop-shadow-blur:4px; --spectrum-workflow-icon-size-50:14px; --spectrum-workflow-icon-size-75:16px; - --spectrum-workflow-icon-size-100:18px; - --spectrum-workflow-icon-size-200:20px; - --spectrum-workflow-icon-size-300:22px; - --spectrum-text-to-visual-50:6px; - --spectrum-text-to-visual-75:7px; - --spectrum-text-to-visual-100:8px; - --spectrum-text-to-visual-200:9px; - --spectrum-text-to-visual-300:10px; + --spectrum-workflow-icon-size-100:20px; + --spectrum-workflow-icon-size-200:22px; + --spectrum-workflow-icon-size-300:26px; + --spectrum-text-to-visual-50:5px; + --spectrum-text-to-visual-75:5px; + --spectrum-text-to-visual-100:6px; + --spectrum-text-to-visual-200:7px; + --spectrum-text-to-visual-300:8px; --spectrum-text-to-control-75:9px; --spectrum-text-to-control-100:10px; --spectrum-text-to-control-200:11px; @@ -454,9 +454,9 @@ --spectrum-component-edge-to-text-300:18px; --spectrum-component-top-to-workflow-icon-50:3px; --spectrum-component-top-to-workflow-icon-75:4px; - --spectrum-component-top-to-workflow-icon-100:7px; - --spectrum-component-top-to-workflow-icon-200:10px; - --spectrum-component-top-to-workflow-icon-300:13px; + --spectrum-component-top-to-workflow-icon-100:6px; + --spectrum-component-top-to-workflow-icon-200:9px; + --spectrum-component-top-to-workflow-icon-300:11px; --spectrum-component-top-to-text-50:3px; --spectrum-component-top-to-text-75:4px; --spectrum-component-top-to-text-100:6px; diff --git a/tokens/dist/index.css b/tokens/dist/index.css index b421b23968d..383f9a6255d 100644 --- a/tokens/dist/index.css +++ b/tokens/dist/index.css @@ -1040,6 +1040,9 @@ --spectrum-field-edge-to-validation-icon-quiet:0px; --spectrum-text-underline-thickness:1px; --spectrum-text-underline-gap:1px; + --spectrum-component-size-width-ratio-down:0.3333; + --spectrum-component-size-minimum-perspective-down:24px; + --spectrum-component-size-difference-down:-2px; --spectrum-accent-color-100:var(--spectrum-blue-100); --spectrum-accent-color-200:var(--spectrum-blue-200); --spectrum-accent-color-300:var(--spectrum-blue-300); @@ -1805,16 +1808,16 @@ --spectrum-drop-shadow-x:0px; --spectrum-drop-shadow-y:2px; --spectrum-drop-shadow-blur:6px; - --spectrum-workflow-icon-size-50:18px; - --spectrum-workflow-icon-size-75:20px; - --spectrum-workflow-icon-size-100:22px; - --spectrum-workflow-icon-size-200:24px; - --spectrum-workflow-icon-size-300:28px; - --spectrum-text-to-visual-50:8px; - --spectrum-text-to-visual-75:9px; - --spectrum-text-to-visual-100:10px; - --spectrum-text-to-visual-200:11px; - --spectrum-text-to-visual-300:13px; + --spectrum-workflow-icon-size-50:16px; + --spectrum-workflow-icon-size-75:18px; + --spectrum-workflow-icon-size-100:24px; + --spectrum-workflow-icon-size-200:28px; + --spectrum-workflow-icon-size-300:30px; + --spectrum-text-to-visual-50:7px; + --spectrum-text-to-visual-75:7px; + --spectrum-text-to-visual-100:8px; + --spectrum-text-to-visual-200:9px; + --spectrum-text-to-visual-300:11px; --spectrum-text-to-control-75:11px; --spectrum-text-to-control-100:13px; --spectrum-text-to-control-200:14px; @@ -1853,11 +1856,11 @@ --spectrum-component-edge-to-text-100:15px; --spectrum-component-edge-to-text-200:19px; --spectrum-component-edge-to-text-300:22px; - --spectrum-component-top-to-workflow-icon-50:4px; - --spectrum-component-top-to-workflow-icon-75:5px; - --spectrum-component-top-to-workflow-icon-100:9px; - --spectrum-component-top-to-workflow-icon-200:13px; - --spectrum-component-top-to-workflow-icon-300:16px; + --spectrum-component-top-to-workflow-icon-50:5px; + --spectrum-component-top-to-workflow-icon-75:6px; + --spectrum-component-top-to-workflow-icon-100:8px; + --spectrum-component-top-to-workflow-icon-200:11px; + --spectrum-component-top-to-workflow-icon-300:15px; --spectrum-component-top-to-text-50:4px; --spectrum-component-top-to-text-75:5px; --spectrum-component-top-to-text-100:8px; @@ -3192,14 +3195,14 @@ --spectrum-drop-shadow-blur:4px; --spectrum-workflow-icon-size-50:14px; --spectrum-workflow-icon-size-75:16px; - --spectrum-workflow-icon-size-100:18px; - --spectrum-workflow-icon-size-200:20px; - --spectrum-workflow-icon-size-300:22px; - --spectrum-text-to-visual-50:6px; - --spectrum-text-to-visual-75:7px; - --spectrum-text-to-visual-100:8px; - --spectrum-text-to-visual-200:9px; - --spectrum-text-to-visual-300:10px; + --spectrum-workflow-icon-size-100:20px; + --spectrum-workflow-icon-size-200:22px; + --spectrum-workflow-icon-size-300:26px; + --spectrum-text-to-visual-50:5px; + --spectrum-text-to-visual-75:5px; + --spectrum-text-to-visual-100:6px; + --spectrum-text-to-visual-200:7px; + --spectrum-text-to-visual-300:8px; --spectrum-text-to-control-75:9px; --spectrum-text-to-control-100:10px; --spectrum-text-to-control-200:11px; @@ -3240,9 +3243,9 @@ --spectrum-component-edge-to-text-300:18px; --spectrum-component-top-to-workflow-icon-50:3px; --spectrum-component-top-to-workflow-icon-75:4px; - --spectrum-component-top-to-workflow-icon-100:7px; - --spectrum-component-top-to-workflow-icon-200:10px; - --spectrum-component-top-to-workflow-icon-300:13px; + --spectrum-component-top-to-workflow-icon-100:6px; + --spectrum-component-top-to-workflow-icon-200:9px; + --spectrum-component-top-to-workflow-icon-300:11px; --spectrum-component-top-to-text-50:3px; --spectrum-component-top-to-text-75:4px; --spectrum-component-top-to-text-100:6px; diff --git a/tokens/package.json b/tokens/package.json index f4dcd54afea..9ee6c09c43d 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -28,7 +28,7 @@ "adobe" ], "devDependencies": { - "@adobe/spectrum-tokens": "13.0.0-beta.8", + "@adobe/spectrum-tokens": "13.0.0-beta.9", "@nxkit/style-dictionary": "^5.0.0", "postcss": "^8.4.35", "postcss-cli": "^11.0.0", diff --git a/yarn.lock b/yarn.lock index a1c788fc435..791329fc969 100644 --- a/yarn.lock +++ b/yarn.lock @@ -121,10 +121,10 @@ __metadata: languageName: node linkType: hard -"@adobe/spectrum-tokens@npm:13.0.0-beta.8": - version: 13.0.0-beta.8 - resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.8" - checksum: 10c0/a259d380a4b203f57bb6b84ec2fc53dbee53fa1ebff23c4cc400254fe9dd8aace2f016b40b0748c1937fa60eccdfc26db91786e64a8f12485063595266461205 +"@adobe/spectrum-tokens@npm:13.0.0-beta.9": + version: 13.0.0-beta.9 + resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.9" + checksum: 10c0/3928c7a7ca8e6f8f307d0c5eee6e95093771625b1e18465c4fe7b08997cff0a97cf65b5329ee8f1f3a03b2534c704a8cd06bf102a23613057544039c90592078 languageName: node linkType: hard @@ -5435,7 +5435,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:13.0.0-beta.8" + "@adobe/spectrum-tokens": "npm:13.0.0-beta.9" "@nxkit/style-dictionary": "npm:^5.0.0" postcss: "npm:^8.4.35" postcss-cli: "npm:^11.0.0" From 5c63236cef5c52631e6d58ad6a0d68944440d39e Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Fri, 2 Feb 2024 11:26:25 -0500 Subject: [PATCH 04/42] feat(actiongroup)!: migrate to S2 (#2453) BREAKING CHANGE: migrates `Action Group` to Spectrum 2, Removes some mod properties --- components/actiongroup/index.css | 24 +------------------ components/actiongroup/metadata/mods.md | 3 --- .../stories/actiongroup.stories.js | 14 +++++++++++ components/actiongroup/themes/express.css | 7 ------ components/actiongroup/themes/spectrum.css | 7 ------ 5 files changed, 15 insertions(+), 40 deletions(-) diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css index 7f78b2945f1..492f0be14f5 100644 --- a/components/actiongroup/index.css +++ b/components/actiongroup/index.css @@ -16,6 +16,7 @@ governing permissions and limitations under the License. --spectrum-actiongroup-button-spacing-reset: 0; --spectrum-actiongroup-border-radius-reset: 0; --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); + --spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50); } .spectrum-ActionGroup--sizeXS, @@ -76,15 +77,6 @@ governing permissions and limitations under the License. border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - } - - & + .spectrum-ActionGroup-item { - /* Action button passthrough styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px; - - margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); - margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); } &:last-child { @@ -93,8 +85,6 @@ governing permissions and limitations under the License. border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); - margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); } &.is-selected { @@ -128,16 +118,6 @@ governing permissions and limitations under the License. border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - } - - & + .spectrum-ActionGroup-item { - margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); } &:last-child { @@ -146,8 +126,6 @@ governing permissions and limitations under the License. border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - margin-block-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); } } } diff --git a/components/actiongroup/metadata/mods.md b/components/actiongroup/metadata/mods.md index 2fcc384c89f..50e28461152 100644 --- a/components/actiongroup/metadata/mods.md +++ b/components/actiongroup/metadata/mods.md @@ -2,9 +2,6 @@ | ---------------------------------------------- | | `--mod-actiongroup-border-radius` | | `--mod-actiongroup-border-radius-reset` | -| `--mod-actiongroup-button-spacing-reset` | | `--mod-actiongroup-gap-size-compact` | -| `--mod-actiongroup-horizontal-spacing-compact` | | `--mod-actiongroup-horizontal-spacing-regular` | -| `--mod-actiongroup-vertical-spacing-compact` | | `--mod-actiongroup-vertical-spacing-regular` | diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index 056eb3d71f9..77eb03f8345 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -117,8 +117,22 @@ Justified.args = { content: items }; +export const JustifiedCompact = Template.bind({}); +JustifiedCompact.args = { + justified: true, + compact: true, + content: items, +}; + export const Quiet = Template.bind({}); Quiet.args = { areQuiet: true, content: items }; + +export const QuietCompact = Template.bind({}); +QuietCompact.args = { + areQuiet: true, + compact: true, + content: items, +}; diff --git a/components/actiongroup/themes/express.css b/components/actiongroup/themes/express.css index 73630a7c0b2..48de489f60a 100644 --- a/components/actiongroup/themes/express.css +++ b/components/actiongroup/themes/express.css @@ -13,11 +13,4 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--system: express) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50); - - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - --spectrum-actiongroup-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - } } diff --git a/components/actiongroup/themes/spectrum.css b/components/actiongroup/themes/spectrum.css index 0b606f3f6b3..7507c3c1e64 100644 --- a/components/actiongroup/themes/spectrum.css +++ b/components/actiongroup/themes/spectrum.css @@ -11,11 +11,4 @@ governing permissions and limitations under the License. */ @container (--system: spectrum) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: 0; - - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: -1px; - --spectrum-actiongroup-vertical-spacing-compact: -1px; - } } From d86f546ae901e637ed82d4ee9f10e38e9371a783 Mon Sep 17 00:00:00 2001 From: Jennifer Grenier Diaz Date: Fri, 2 Feb 2024 10:07:46 -0700 Subject: [PATCH 05/42] feat(buttongroup)!: migrate to S2 (#2457) BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes --- components/buttongroup/index.css | 21 +++---------------- .../buttongroup/metadata/buttongroup.yml | 13 ++++++++---- .../stories/buttongroup.stories.js | 16 ++++++++++++-- 3 files changed, 26 insertions(+), 24 deletions(-) diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css index ebc9683da69..bdaf0716ccb 100644 --- a/components/buttongroup/index.css +++ b/components/buttongroup/index.css @@ -11,28 +11,13 @@ governing permissions and limitations under the License. */ .spectrum-ButtonGroup { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); -} - -.spectrum-ButtonGroup--sizeS { --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200); --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200); } -.spectrum-ButtonGroup--sizeM { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); -} - -.spectrum-ButtonGroup--sizeL { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); -} - -.spectrum-ButtonGroup--sizeXL { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); +.spectrum-ButtonGroup--sizeS { + --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); + --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-100); } .spectrum-ButtonGroup { diff --git a/components/buttongroup/metadata/buttongroup.yml b/components/buttongroup/metadata/buttongroup.yml index f35ccb05ec5..b74efb3726c 100644 --- a/components/buttongroup/metadata/buttongroup.yml +++ b/components/buttongroup/metadata/buttongroup.yml @@ -1,6 +1,11 @@ name: Button group SpectrumSiteSlug: https://spectrum.adobe.com/page/button/ sections: + - name: Migration Guide + description: | + ### 1/24/2024 - Version 7.0.0 + #### Spectrum 2 migration also removed `.spectrum-ButtonGroup--sizeM`, `.spectrum-ButtonGroup--sizeL`, and `.spectrum-ButtonGroup--sizeXL` + Since each of these classes were using the same tokens for spacing, these classes were removed. - name: Custom Properties API description: | This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. @@ -8,7 +13,7 @@ examples: - id: buttongroup-horizontal name: Horizontal description: | - Default spacing for Medium, Large, and Extra Large t-shirt sizes. + Default horizontal spacing for when using medium, large, and extra large buttons. markup: |
diff --git a/components/closebutton/themes/express.css b/components/closebutton/themes/express.css deleted file mode 100644 index 482625bd921..00000000000 --- a/components/closebutton/themes/express.css +++ /dev/null @@ -1,21 +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 "./spectrum.css"; - -@container (--system: express) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-default: transparent; - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-400); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-300); - } -} diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css deleted file mode 100644 index e14e52e3628..00000000000 --- a/components/closebutton/themes/spectrum.css +++ /dev/null @@ -1,19 +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. -*/ - -@container (--system: spectrum) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-default: transparent; - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-300); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-200); - } -} diff --git a/yarn.lock b/yarn.lock index f80135208c5..53c442ffa9f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4654,7 +4654,7 @@ __metadata: "@spectrum-css/commons": "npm:^10.0.0" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.0" languageName: unknown linkType: soft From 4aab1e69a4c75bbcf669773d0e00e15e3922218a Mon Sep 17 00:00:00 2001 From: Patrick Fulton <360251+pfulton@users.noreply.github.com> Date: Thu, 7 Mar 2024 09:24:08 -0500 Subject: [PATCH 11/42] chore: s2 grays component-level migration (#2583) * chore: migrate gray-50 to gray-25 Migrates any instance of `--spectrum-gray-50` to use `--spectrum-gray-25` as per the S2 migration guide * chore: migrate gray-75 to gray-50 Migrates usages of `--spectrum-gray-75` to use `--spectrum-gray-50` as per the s2 migration guide. * chore: migrate gray-100 to gray-75 Migrates usages of `--spectrum-gray-100` to use `--spectrum-gray-75` as per the s2 migration guide * chore: migrate gray-200 to gray-100 Migrates usages of `--spectrum-gray-200` to use `--spectrum-gray-100` as per the s2 migration guide * chore: migrate gray-300 to gray-200 Migrates usages of `--spectrum-gray-300` to use `spectrum-gray-200` as per the s2 migration guide * chore(infieldbutton): gray-300 to gray-200 --- components/accordion/index.css | 2 +- components/actionbar/index.css | 2 +- components/actionbutton/index.css | 8 +- components/actionbutton/themes/express.css | 10 +-- components/actionbutton/themes/spectrum.css | 14 ++-- components/asset/index.css | 4 +- components/assetcard/index.css | 2 +- components/assetlist/index.css | 4 +- components/button/themes/express.css | 6 +- components/button/themes/spectrum.css | 30 +++---- components/card/index.css | 87 ++++++++++++-------- components/checkbox/index.css | 2 +- components/clearbutton/themes/express.css | 6 +- components/closebutton/themes/express.css | 19 +++++ components/closebutton/themes/spectrum.css | 19 +++++ components/dial/index.css | 12 +-- components/divider/index.css | 4 +- components/dropzone/index.css | 2 +- components/infieldbutton/themes/express.css | 6 +- components/infieldbutton/themes/spectrum.css | 8 +- components/logicbutton/index.css | 16 ++-- components/modal/index.css | 2 +- components/page/index.css | 2 +- components/picker/themes/express.css | 10 +-- components/picker/themes/spectrum.css | 12 +-- components/pickerbutton/themes/express.css | 6 +- components/pickerbutton/themes/spectrum.css | 8 +- components/progressbar/index.css | 2 +- components/progresscircle/index.css | 2 +- components/radio/index.css | 2 +- components/search/index.css | 2 +- components/sidenav/index.css | 16 ++-- components/slider/index.css | 4 +- components/slider/themes/express.css | 18 ++-- components/slider/themes/spectrum.css | 12 +-- components/splitview/index.css | 4 +- components/steplist/index.css | 4 +- components/stepper/themes/express.css | 4 +- components/stepper/themes/spectrum.css | 6 +- components/swatch/index.css | 2 +- components/switch/index.css | 6 +- components/table/index.css | 14 ++-- components/tabs/index.css | 2 +- components/tag/index.css | 2 +- components/tag/themes/express.css | 6 +- components/tag/themes/spectrum.css | 8 +- components/textfield/index.css | 2 +- components/treeview/index.css | 4 +- 48 files changed, 242 insertions(+), 183 deletions(-) create mode 100644 components/closebutton/themes/express.css create mode 100644 components/closebutton/themes/spectrum.css diff --git a/components/accordion/index.css b/components/accordion/index.css index 643a33ed5dc..4ff270c953f 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -120,7 +120,7 @@ governing permissions and limitations under the License. ); /* Divider */ - --spectrum-accordion-divider-color: var(--spectrum-gray-300); + --spectrum-accordion-divider-color: var(--spectrum-gray-200); --spectrum-accordion-min-block-size: max( var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), calc( diff --git a/components/actionbar/index.css b/components/actionbar/index.css index 0c306f02923..bbe279eb0a4 100644 --- a/components/actionbar/index.css +++ b/components/actionbar/index.css @@ -26,7 +26,7 @@ governing permissions and limitations under the License. } /* colors - applied to popover */ - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50); + --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25); --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); /* emphasized variation colors */ diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index f833caed867..f8243e34cfc 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -38,10 +38,10 @@ governing permissions and limitations under the License. --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-50)); + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-25)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-25)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-25)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-25)); &.spectrum-ActionButton--emphasized { --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css index f56b4e5081b..70f3a177ba1 100644 --- a/components/actionbutton/themes/express.css +++ b/components/actionbutton/themes/express.css @@ -14,10 +14,10 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); --spectrum-actionbutton-border-color-default: transparent; --spectrum-actionbutton-border-color-hover: transparent; @@ -29,9 +29,9 @@ governing permissions and limitations under the License. &.spectrum-ActionButton--quiet { --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); } &.spectrum-ActionButton--staticBlack, diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css index 30de8aaf3a6..23a64b906b8 100644 --- a/components/actionbutton/themes/spectrum.css +++ b/components/actionbutton/themes/spectrum.css @@ -12,10 +12,10 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-50); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100); --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); @@ -28,9 +28,9 @@ governing permissions and limitations under the License. &.spectrum-ActionButton--quiet { --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100); --spectrum-actionbutton-border-color-default: transparent; --spectrum-actionbutton-border-color-hover: transparent; diff --git a/components/asset/index.css b/components/asset/index.css index 29fdf09c0fd..8c83901a8de 100644 --- a/components/asset/index.css +++ b/components/asset/index.css @@ -42,7 +42,7 @@ governing permissions and limitations under the License. --highcontrast-asset-folder-background-color, var( --mod-asset-folder-background-color, - var(--spectrum-gray-300) + var(--spectrum-gray-200) ) ); } @@ -52,7 +52,7 @@ governing permissions and limitations under the License. --highcontrast-asset-file-background-color, var( --mod-asset-file-background-color, - var(--spectrum-gray-50) + var(--spectrum-gray-25) ) ); } diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 418275e4019..ab9ca3238c3 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -16,7 +16,7 @@ governing permissions and limitations under the License. .spectrum-AssetCard { /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */ --spectrum-assetcard-asset-size: 224px; - --spectrum-assetcard-background-color: var(--spectrum-gray-200); + --spectrum-assetcard-background-color: var(--spectrum-gray-100); --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100); --spectrum-assetcard-asset-container-border-size: 1px; --spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300); diff --git a/components/assetlist/index.css b/components/assetlist/index.css index ccb9ba09be3..73b035f3fa5 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -23,8 +23,8 @@ governing permissions and limitations under the License. --spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100); --spectrum-assetlist-item-font-size: var(--spectrum-font-size-100); --spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight); - --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300); - --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200); + --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); + --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); /* thumbnail */ --spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400); diff --git a/components/button/themes/express.css b/components/button/themes/express.css index 495d6cf1fcc..d23f67bfcc2 100644 --- a/components/button/themes/express.css +++ b/components/button/themes/express.css @@ -14,10 +14,10 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-200); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-default: var(--spectrum-gray-100); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); --spectrum-button-border-color-default: transparent; --spectrum-button-border-color-hover: transparent; diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css index 2b1ded8454d..b90399e6cdc 100644 --- a/components/button/themes/spectrum.css +++ b/components/button/themes/spectrum.css @@ -12,10 +12,10 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-75); - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-300); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); + --spectrum-button-background-color-default: var(--spectrum-gray-50); + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); --spectrum-button-border-color-default: var(--spectrum-gray-400); --spectrum-button-border-color-hover: var(--spectrum-gray-500); @@ -139,9 +139,9 @@ governing permissions and limitations under the License. &.spectrum-Button--outline { --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); --spectrum-button-border-color-default: var(--spectrum-gray-800); --spectrum-button-border-color-hover: var(--spectrum-gray-900); @@ -160,10 +160,10 @@ governing permissions and limitations under the License. } &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-gray-200); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-default: var(--spectrum-gray-100); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); --spectrum-button-border-color-default: transparent; --spectrum-button-border-color-hover: transparent; @@ -181,11 +181,11 @@ governing permissions and limitations under the License. &.spectrum-Button--outline { --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); - --spectrum-button-border-color-default: var(--spectrum-gray-300); + --spectrum-button-border-color-default: var(--spectrum-gray-200); --spectrum-button-border-color-hover: var(--spectrum-gray-400); --spectrum-button-border-color-down: var(--spectrum-gray-500); --spectrum-button-border-color-focus: var(--spectrum-gray-400); @@ -203,9 +203,9 @@ governing permissions and limitations under the License. &.spectrum-Button--quiet { --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-300); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); --spectrum-button-border-color-default: transparent; --spectrum-button-border-color-hover: transparent; diff --git a/components/card/index.css b/components/card/index.css index c03b6a8c9e3..883f1f5934b 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -23,11 +23,11 @@ governing permissions and limitations under the License. --spectrum-card-border-width: var(--spectrum-border-width-100); --spectrum-card-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-card-border-color: var(--spectrum-gray-200); - --spectrum-card-border-color-hover: var(--spectrum-gray-300); + --spectrum-card-border-color: var(--spectrum-gray-100); + --spectrum-card-border-color-hover: var(--spectrum-gray-200); --spectrum-card-border-color-selected: var(--spectrum-blue-700); - --spectrum-card-divider-color: var(--spectrum-gray-300); + --spectrum-card-divider-color: var(--spectrum-gray-200); /* Typography */ --spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack); @@ -72,14 +72,22 @@ governing permissions and limitations under the License. /* Selected */ --spectrum-card-selected-background-opacity: 0.1; /* table-selected-row-background-opacity does not exist in tokens yet */ - --spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100); - --spectrum-card-preview-background-color: var(--spectrum-background-base-color); + --spectrum-card-preview-border-width-selected: var( + --spectrum-border-width-100 + ); + --spectrum-card-preview-background-color: var( + --spectrum-background-base-color + ); --spectrum-card-preview-background-color-hover: var(--spectrum-gray-300); /* Horizontal */ --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300); --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200); + /* Horizontal */ + --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300); + --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200); + /* TODO: These are placeholder until recursive RGB is available */ .spectrum--light &, .spectrum--lightest & { @@ -108,6 +116,19 @@ governing permissions and limitations under the License. ); } +.spectrum-Card--quiet, +.spectrum-Card--gallery, +.spectrum-Card--horizontal { + --mod-card-preview-background-color: var( + --spectrum-card-preview-background-color-quiet, + var(--spectrum-background-base-color) + ); + --spectrum-card-preview-background-color-hover: var( + --spectrum-card-background-color-hover-quiet, + var(--spectrum-gray-200) + ); +} + .spectrum-Card { position: relative; display: inline-flex; @@ -412,30 +433,27 @@ governing permissions and limitations under the License. and will be removed in a future version. */ padding-block-start: var( --mod-card-body-padding-block-start, - var( - --mod-card-title-padding-top, - var(--spectrum-card-title-padding-top) - ) + var(--mod-card-title-padding-top, var(--spectrum-card-title-padding-top)) ); padding-inline-end: var( --mod-card-body-padding-inline-end, calc( var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) + var(--mod-card-border-width, var(--spectrum-card-border-width)) ) ); padding-inline-start: var( --mod-card-body-padding-inline-start, calc( var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) + var(--mod-card-border-width, var(--spectrum-card-border-width)) ) ); padding-block-end: var( --mod-card-body-padding-block-end, calc( var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) + var(--mod-card-border-width, var(--spectrum-card-border-width)) ) ); } @@ -552,23 +570,17 @@ governing permissions and limitations under the License. ); margin-inline-start: var( --mod-card-footer-margin-inline-start, - var( - --mod-card-body-spacing, - var(--spectrum-card-body-spacing) - ) + var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) ); margin-inline-end: var( --mod-card-footer-margin-inline-end, - var( - --mod-card-body-spacing, - var(--spectrum-card-body-spacing) - ) + var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) ); padding-block-end: var( --mod-card-footer-padding-block-end, calc( var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) + var(--mod-card-border-width, var(--spectrum-card-border-width)) ) ); @@ -576,10 +588,7 @@ governing permissions and limitations under the License. and will be removed in a future version. */ padding-block-start: var( --mod-card-footer-padding-block-start, - var( - --mod-card-footer-margin-top, - var(--spectrum-card-footer-padding-top) - ) + var(--mod-card-footer-margin-top, var(--spectrum-card-footer-padding-top)) ); color: var( @@ -698,7 +707,13 @@ governing permissions and limitations under the License. /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */ transition: background-color - var(--mod-card-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))); + var( + --mod-card-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ); overflow: visible; /* Use ::before to show the selected overlay */ @@ -834,9 +849,15 @@ governing permissions and limitations under the License. align-items: center; justify-content: center; - border-start-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); + border-start-start-radius: calc( + var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ); border-start-end-radius: 0; - border-end-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); + border-end-start-radius: calc( + var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ); border-end-end-radius: 0; padding: var( @@ -881,10 +902,10 @@ governing permissions and limitations under the License. } .spectrum-Card--gallery { - min-inline-size: 0; + min-inline-size: 0; - .spectrum-Card-preview { - padding: 0; - border-radius: 0; - } + .spectrum-Card-preview { + padding: 0; + border-radius: 0; + } } diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 9d467bd1010..2cb3aac560f 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -30,7 +30,7 @@ governing permissions and limitations under the License. --spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); --spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75); + --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); --spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900); --spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); diff --git a/components/clearbutton/themes/express.css b/components/clearbutton/themes/express.css index b7e935e3ec7..84006f7559f 100644 --- a/components/clearbutton/themes/express.css +++ b/components/clearbutton/themes/express.css @@ -13,9 +13,9 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-ClearButton { - --spectrum-clear-button-background-color: var(--spectrum-gray-200); - --spectrum-clear-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-clear-button-background-color: var(--spectrum-gray-100); + --spectrum-clear-button-background-color-hover: var(--spectrum-gray-200); --spectrum-clear-button-background-color-down: var(--spectrum-gray-400); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-200); } } diff --git a/components/closebutton/themes/express.css b/components/closebutton/themes/express.css new file mode 100644 index 00000000000..aba9a602e0a --- /dev/null +++ b/components/closebutton/themes/express.css @@ -0,0 +1,19 @@ +/*! +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) { + .spectrum-CloseButton { + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-closebutton-background-color-down: var(--spectrum-gray-400); + --spectrum-closebutton-background-color-focus: var(--spectrum-gray-200); + } +} diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css new file mode 100644 index 00000000000..7315c90a7ab --- /dev/null +++ b/components/closebutton/themes/spectrum.css @@ -0,0 +1,19 @@ +/*! +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) { + .spectrum-CloseButton { + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-closebutton-background-color-down: var(--spectrum-gray-200); + --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); + } +} diff --git a/components/dial/index.css b/components/dial/index.css index 8d3f6dd8a97..5eb5fb249b0 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -11,10 +11,10 @@ governing permissions and limitations under the License. */ .spectrum-Dial { - --spectrum-dial-background-color-default: var(--spectrum-gray-100); - - --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300); - --spectrum-dial-border-color-disabled: var(--spectrum-gray-300); + --spectrum-dial-background-color-default: var(--spectrum-gray-75); + + --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-200); + --spectrum-dial-border-color-disabled: var(--spectrum-gray-200); --spectrum-dial-handle-marker-color: var(--spectrum-gray-700); --spectrum-dial-border-color: var(--spectrum-gray-700); @@ -24,8 +24,8 @@ governing permissions and limitations under the License. --spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800); --spectrum-dial-border-color-hover: var(--spectrum-gray-800); - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); - --spectrum-dial-border-color-key-focus: var(--spectrum-gray-50); + --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); + --spectrum-dial-border-color-key-focus: var(--spectrum-gray-25); --spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); --spectrum-dial-border-color-mouse-focus: var(--spectrum-gray-700); diff --git a/components/divider/index.css b/components/divider/index.css index d8e69872ba2..8594c903dc4 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -18,8 +18,8 @@ governing permissions and limitations under the License. --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); /* background colors */ - --spectrum-divider-background-color-small: var(--spectrum-gray-300); - --spectrum-divider-background-color-medium: var(--spectrum-gray-300); + --spectrum-divider-background-color-small: var(--spectrum-gray-200); + --spectrum-divider-background-color-medium: var(--spectrum-gray-200); --spectrum-divider-background-color-large: var(--spectrum-gray-800); /* static white background colors */ diff --git a/components/dropzone/index.css b/components/dropzone/index.css index df0e8e8e711..c2230090219 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -17,7 +17,7 @@ governing permissions and limitations under the License. --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-drop-zone-border-color: var(--spectrum-gray-300); + --spectrum-drop-zone-border-color: var(--spectrum-gray-200); --spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack); --spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); diff --git a/components/infieldbutton/themes/express.css b/components/infieldbutton/themes/express.css index d08bbd8cc6c..7fd3dfcb63c 100644 --- a/components/infieldbutton/themes/express.css +++ b/components/infieldbutton/themes/express.css @@ -23,9 +23,9 @@ governing permissions and limitations under the License. --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); - --spectrum-infield-button-background-color: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-infield-button-background-color: var(--spectrum-gray-100); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); --spectrum-infield-button-background-color-down: var(--spectrum-gray-400); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); } } diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css index ae22ee72443..426cdd4c6bc 100644 --- a/components/infieldbutton/themes/spectrum.css +++ b/components/infieldbutton/themes/spectrum.css @@ -22,9 +22,9 @@ governing permissions and limitations under the License. --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); - --spectrum-infield-button-background-color: var(--spectrum-gray-75); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-300); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); + --spectrum-infield-button-background-color: var(--spectrum-gray-50); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-infield-button-background-color-down: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-100); } } diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index dee858148c5..ad65f071120 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -33,17 +33,17 @@ governing permissions and limitations under the License. &:disabled, &.is-disabled { - --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-gray-200)); - --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-gray-200)); + --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-gray-100)); + --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-gray-100)); --mod-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-gray-500)); - --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-gray-200)); - --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-gray-200)); + --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-gray-100)); + --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-gray-100)); - --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-gray-200)); - --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-gray-200)); + --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-gray-100)); + --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-gray-100)); --mod-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-gray-500)); - --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-gray-200)); - --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-gray-200)); + --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-gray-100)); + --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-gray-100)); } } diff --git a/components/modal/index.css b/components/modal/index.css index ada06633931..8f272e8da6f 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -21,7 +21,7 @@ governing permissions and limitations under the License. --spectrum-modal-max-height: 90vh; --spectrum-modal-max-width: 90%; - --spectrum-modal-background-color: var(--spectrum-gray-100); + --spectrum-modal-background-color: var(--spectrum-gray-75); --spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100); --spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100); --spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500); diff --git a/components/page/index.css b/components/page/index.css index 513b114a586..f8a78b775cd 100644 --- a/components/page/index.css +++ b/components/page/index.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ :root { - background-color: var(--spectrum-gray-100); + background-color: var(--spectrum-gray-75); /* Prevent tap highlights */ -webkit-tap-highlight-color: var(--spectrum-transparent-black-100); diff --git a/components/picker/themes/express.css b/components/picker/themes/express.css index 4b305b4846f..ac253f63db9 100644 --- a/components/picker/themes/express.css +++ b/components/picker/themes/express.css @@ -13,12 +13,12 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-Picker { - --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-default: var(--spectrum-gray-100); + --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); --spectrum-picker-background-color-active: var(--spectrum-gray-400); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); --spectrum-picker-border-color-default: transparent; --spectrum-picker-border-color-default-open: transparent; diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css index c9452754589..d6ed20d735a 100644 --- a/components/picker/themes/spectrum.css +++ b/components/picker/themes/spectrum.css @@ -11,12 +11,12 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-Picker { - --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-background-color-default: var(--spectrum-gray-50); + --spectrum-picker-background-color-default-open: var(--spectrum-gray-100); + --spectrum-picker-background-color-active: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover: var(--spectrum-gray-100); + --spectrum-picker-background-color-hover-open: var(--spectrum-gray-100); + --spectrum-picker-background-color-key-focus: var(--spectrum-gray-100); --spectrum-picker-border-color-default: var(--spectrum-gray-500); --spectrum-picker-border-color-default-open: var(--spectrum-gray-500); diff --git a/components/pickerbutton/themes/express.css b/components/pickerbutton/themes/express.css index 76d7a370cfa..6556bd62e9a 100644 --- a/components/pickerbutton/themes/express.css +++ b/components/pickerbutton/themes/express.css @@ -14,10 +14,10 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-picker-button-background-color: var(--spectrum-gray-100); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); --spectrum-picker-button-background-color-down: var(--spectrum-gray-400); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); --spectrum-picker-button-border-color: none; --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css index 5250be4186e..c1ade89850c 100644 --- a/components/pickerbutton/themes/spectrum.css +++ b/components/pickerbutton/themes/spectrum.css @@ -12,10 +12,10 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-75); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-down: var(--spectrum-gray-300); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); + --spectrum-picker-button-background-color: var(--spectrum-gray-50); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-picker-button-background-color-down: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100); --spectrum-picker-button-border-color: inherit; --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100); diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 252f0d7e576..7c0fc4880ef 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -44,7 +44,7 @@ governing permissions and limitations under the License. /* Color */ --spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default); - --spectrum-progressbar-track-color: var(--spectrum-gray-300); + --spectrum-progressbar-track-color: var(--spectrum-gray-200); --spectrum-progressbar-fill-color: var(--spectrum-accent-color-900); --spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color); --spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color); diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index 5184180a382..673e59f2878 100644 --- a/components/progresscircle/index.css +++ b/components/progresscircle/index.css @@ -14,7 +14,7 @@ governing permissions and limitations under the License. .spectrum-ProgressCircle { /* circle unfilled border color */ - --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300); + --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200); /* circle progress fill border color */ --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); diff --git a/components/radio/index.css b/components/radio/index.css index 3256d3091f5..00a6f528a6a 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -43,7 +43,7 @@ governing permissions and limitations under the License. /* selection indicator all themes */ --spectrum-radio-border-width: var(--spectrum-border-width-200); - --spectrum-radio-button-background-color: var(--spectrum-gray-75); + --spectrum-radio-button-background-color: var(--spectrum-gray-50); /* checked selection indicator */ --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); diff --git a/components/search/index.css b/components/search/index.css index dbe83a533f1..d3e24a33492 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -59,7 +59,7 @@ governing permissions and limitations under the License. /* Background and Border */ --spectrum-search-border-width: var(--spectrum-border-width-100); - --spectrum-search-background-color: var(--spectrum-gray-50); + --spectrum-search-background-color: var(--spectrum-gray-25); /* Disabled */ --spectrum-search-color-disabled: var(--spectrum-disabled-content-color); diff --git a/components/sidenav/index.css b/components/sidenav/index.css index ca558437ef8..714822a9f80 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -42,14 +42,14 @@ governing permissions and limitations under the License. /* color - background */ --spectrum-sidenav-background-disabled: transparent; --spectrum-sidenav-background-default: transparent; - --spectrum-sidenav-background-hover: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-down: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200); - - --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-200); - --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300); - --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200); + --spectrum-sidenav-background-hover: var(--spectrum-gray-100); + --spectrum-sidenav-item-background-down: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100); + + --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100); + --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200); + --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100); /* color font */ --spectrum-sidenav-header-color: var(--spectrum-gray-600); diff --git a/components/slider/index.css b/components/slider/index.css index 81fe996c63a..80334273a1e 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -88,7 +88,7 @@ governing permissions and limitations under the License. --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); --spectrum-slider-tick-mark-border-radius: 2px; - --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100); + --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-75); /* colors */ --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color); @@ -97,7 +97,7 @@ governing permissions and limitations under the License. --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default); --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100); + --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); /* values */ --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css index 1df5f6ef8ee..f3b47ac5fc2 100644 --- a/components/slider/themes/express.css +++ b/components/slider/themes/express.css @@ -13,19 +13,19 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-200); + --spectrum-slider-track-color: var(--spectrum-gray-100); --spectrum-slider-track-fill-color: var(--spectrum-gray-600); - --spectrum-slider-ramp-track-color: var(--spectrum-gray-300); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --spectrum-slider-ramp-track-color: var(--spectrum-gray-200); + --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); - --spectrum-slider-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-50); - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-50); + --spectrum-slider-handle-background-color: var(--spectrum-gray-25); + --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-25); + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-25); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-25); --spectrum-slider-handle-border-color: var(--spectrum-gray-800); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-25); - --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + --spectrum-slider-tick-mark-color: var(--spectrum-gray-100); --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900); --spectrum-slider-handle-border-color-down: var(--spectrum-gray-900); diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css index 90f77d3b6db..5711d043d3f 100644 --- a/components/slider/themes/spectrum.css +++ b/components/slider/themes/spectrum.css @@ -11,19 +11,19 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-300); + --spectrum-slider-track-color: var(--spectrum-gray-200); --spectrum-slider-track-fill-color: var(--spectrum-gray-700); --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); --spectrum-slider-handle-background-color: transparent; --spectrum-slider-handle-background-color-disabled: transparent; - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100); + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); --spectrum-slider-handle-border-color: var(--spectrum-gray-700); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); - --spectrum-slider-tick-mark-color: var(--spectrum-gray-300); + --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); diff --git a/components/splitview/index.css b/components/splitview/index.css index f40bd050a95..8cd2867f2c7 100644 --- a/components/splitview/index.css +++ b/components/splitview/index.css @@ -16,8 +16,8 @@ governing permissions and limitations under the License. --spectrum-splitview-vertical-gripper-outer-width: 100%; --spectrum-splitview-vertical-gripper-reset: 0; - --spectrum-splitview-background-color: var(--spectrum-gray-100); - --spectrum-splitview-handle-background-color: var(--spectrum-gray-300); + --spectrum-splitview-background-color: var(--spectrum-gray-75); + --spectrum-splitview-handle-background-color: var(--spectrum-gray-200); --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400); --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800); --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color); diff --git a/components/steplist/index.css b/components/steplist/index.css index 7b4d11919e0..f9feb9df164 100644 --- a/components/steplist/index.css +++ b/components/steplist/index.css @@ -46,9 +46,9 @@ governing permissions and limitations under the License. --spectrum-steplist-complete-marker-background-color: var(--spectrum-gray-600); - --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300); + --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200); - --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300); + --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200); --spectrum-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600); } diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css index 835ebeb952b..d674b2b8aca 100644 --- a/components/stepper/themes/express.css +++ b/components/stepper/themes/express.css @@ -19,7 +19,7 @@ governing permissions and limitations under the License. --spectrum-stepper-buttons-border-style: solid; --spectrum-stepper-buttons-border-width: var(--spectrum-border-width-200); --spectrum-stepper-buttons-border-color: transparent; - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --spectrum-stepper-buttons-background-color: var(--spectrum-gray-25); --spectrum-stepper-buttons-border-color-hover: transparent; --spectrum-stepper-buttons-border-color-focus: transparent; --spectrum-stepper-buttons-border-color-keyboard-focus: transparent; @@ -39,7 +39,7 @@ governing permissions and limitations under the License. --spectrum-stepper-border-color-keyboard-focus-invalid: transparent; --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400); - --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300); + --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); &.is-disabled { --spectrum-stepper-buttons-background-color: var(--spectrum-disabled-background-color); diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css index a59b448068d..da0ed2a7976 100644 --- a/components/stepper/themes/spectrum.css +++ b/components/stepper/themes/spectrum.css @@ -17,7 +17,7 @@ governing permissions and limitations under the License. --spectrum-stepper-buttons-border-style: none; --spectrum-stepper-buttons-border-width: 0; --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --spectrum-stepper-buttons-background-color: var(--spectrum-gray-25); --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600); --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800); --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); @@ -36,7 +36,7 @@ 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-background-color-focus: var(--spectrum-gray-300); - --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); + --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-200); + --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-100); } } diff --git a/components/swatch/index.css b/components/swatch/index.css index 0fbf80340c0..f9392006494 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -28,7 +28,7 @@ governing permissions and limitations under the License. /* Color */ --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50); + --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); --spectrum-swatch-disabled-icon-border-color: var(--spectrum-swatch-disabled-icon-border-color); --spectrum-swatch-disabled-icon-color: var(--spectrum-white); --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); diff --git a/components/switch/index.css b/components/switch/index.css index 360f8b0f97f..e2797037c52 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -19,8 +19,8 @@ governing permissions and limitations under the License. --spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus); --spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-switch-background-color: var(--spectrum-gray-300); - --spectrum-switch-background-color-disabled: var(--spectrum-gray-300); + --spectrum-switch-background-color: var(--spectrum-gray-200); + --spectrum-switch-background-color-disabled: var(--spectrum-gray-200); --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); @@ -31,7 +31,7 @@ governing permissions and limitations under the License. --spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-switch-handle-background-color: var(--spectrum-gray-75); + --spectrum-switch-handle-background-color: var(--spectrum-gray-50); --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); } diff --git a/components/table/index.css b/components/table/index.css index 09f92a6b11d..4d19a9d9b39 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -41,13 +41,13 @@ governing permissions and limitations under the License. --spectrum-table-row-line-height: var(--spectrum-line-height-100); /* General Colors */ - --spectrum-table-border-color: var(--spectrum-gray-300); - --spectrum-table-divider-color: var(--spectrum-gray-300); + --spectrum-table-border-color: var(--spectrum-gray-200); + --spectrum-table-divider-color: var(--spectrum-gray-200); --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); --spectrum-table-header-text-color: var(--spectrum-body-color); - --spectrum-table-row-background-color: var(--spectrum-gray-50); + --spectrum-table-row-background-color: var(--spectrum-gray-25); --spectrum-table-row-text-color: var(--spectrum-neutral-content-color-default); /* ----- * @@ -83,14 +83,14 @@ governing permissions and limitations under the License. /* Summary Row and Section Header Row */ --spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-summary-row-background-color: var(--spectrum-gray-200); + --spectrum-table-summary-row-background-color: var(--spectrum-gray-100); --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium); --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100); --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100); --spectrum-table-section-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-section-header-background-color: var(--spectrum-gray-200); + --spectrum-table-section-header-background-color: var(--spectrum-gray-100); /* Collapsible and Thumbnails */ --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300); @@ -809,7 +809,7 @@ governing permissions and limitations under the License. /********* SCROLLABLE *********/ /* Wrapper that allows a scrollable body and sticky column header. */ .spectrum-Table-scroller { - --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100))); + --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-75))); box-sizing: border-box; display: inline-block; @@ -825,7 +825,7 @@ governing permissions and limitations under the License. var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); &.spectrum-Table--quiet { - --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100))); + --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-75))); border-block-start: none; } diff --git a/components/tabs/index.css b/components/tabs/index.css index 72ec7fc2cdc..8becad8156b 100644 --- a/components/tabs/index.css +++ b/components/tabs/index.css @@ -64,7 +64,7 @@ governing permissions and limitations under the License. ); --spectrum-tabs-list-background-direction: top; - --spectrum-tabs-divider-background-color: var(--spectrum-gray-300); + --spectrum-tabs-divider-background-color: var(--spectrum-gray-200); --spectrum-tabs-divider-size: var(--spectrum-border-width-200); --spectrum-tabs-divider-border-radius: 1px; diff --git a/components/tag/index.css b/components/tag/index.css index 88319c8854f..5e23a317947 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -29,7 +29,7 @@ governing permissions and limitations under the License. --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight); /* selected */ - --spectrum-tag-content-color-selected: var(--spectrum-gray-50); + --spectrum-tag-content-color-selected: var(--spectrum-gray-25); --spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); --spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); --spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); diff --git a/components/tag/themes/express.css b/components/tag/themes/express.css index 720c1b53f71..f4817e107f9 100644 --- a/components/tag/themes/express.css +++ b/components/tag/themes/express.css @@ -16,9 +16,9 @@ governing permissions and limitations under the License. .spectrum-Tag { /* border */ --spectrum-tag-background-color: transparent; - --spectrum-tag-background-color-hover: var(--spectrum-gray-300); + --spectrum-tag-background-color-hover: var(--spectrum-gray-200); --spectrum-tag-background-color-active: var(--spectrum-gray-400); - --spectrum-tag-background-color-focus: var(--spectrum-gray-300); + --spectrum-tag-background-color-focus: var(--spectrum-gray-200); /* express has pill style full corner radius */ --spectrum-tag-size-small-corner-radius: var(--spectrum-component-height-75); @@ -26,7 +26,7 @@ governing permissions and limitations under the License. --spectrum-tag-size-large-corner-radius: var(--spectrum-component-height-200); /* background */ - --spectrum-tag-border-color: var(--spectrum-gray-300); + --spectrum-tag-border-color: var(--spectrum-gray-200); --spectrum-tag-border-color-hover: var(--spectrum-gray-400); --spectrum-tag-border-color-active: var(--spectrum-gray-500); --spectrum-tag-border-color-focus: var(--spectrum-gray-400); diff --git a/components/tag/themes/spectrum.css b/components/tag/themes/spectrum.css index 8c02defb2f8..01bff14b1b2 100644 --- a/components/tag/themes/spectrum.css +++ b/components/tag/themes/spectrum.css @@ -24,10 +24,10 @@ governing permissions and limitations under the License. --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); /* background */ - --spectrum-tag-background-color: var(--spectrum-gray-75); - --spectrum-tag-background-color-hover: var(--spectrum-gray-75); - --spectrum-tag-background-color-active: var(--spectrum-gray-200); - --spectrum-tag-background-color-focus: var(--spectrum-gray-75); + --spectrum-tag-background-color: var(--spectrum-gray-50); + --spectrum-tag-background-color-hover: var(--spectrum-gray-50); + --spectrum-tag-background-color-active: var(--spectrum-gray-100); + --spectrum-tag-background-color-focus: var(--spectrum-gray-50); /* content color */ --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); diff --git a/components/textfield/index.css b/components/textfield/index.css index dfea49a1646..e36b0c868a8 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -131,7 +131,7 @@ governing permissions and limitations under the License. --spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); /*** Colors ***/ - --spectrum-textfield-background-color: var(--spectrum-gray-50); + --spectrum-textfield-background-color: var(--spectrum-gray-25); /* Text Colors */ --spectrum-textfield-text-color-default: var( diff --git a/components/treeview/index.css b/components/treeview/index.css index 26b23eef661..df216c004d2 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -32,8 +32,8 @@ governing permissions and limitations under the License. --spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800); --spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200); - --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200); + --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); + --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); --spectrum-treeview-item-border-color-quiet-selected: transparent; From 417899c48d0c0bbd72bf1befd7b0c8fdf5d6ab4f Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Fri, 8 Mar 2024 09:45:24 -0500 Subject: [PATCH 12/42] fix(closebutton): use correct casing for class names --- components/closebutton/index.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/closebutton/index.css b/components/closebutton/index.css index 046b43fbc8f..3fdfd003551 100644 --- a/components/closebutton/index.css +++ b/components/closebutton/index.css @@ -14,7 +14,7 @@ governing permissions and limitations under the License. /* closebutton/index.css * - * .spectrum-Closebutton::after is the Focus ring + * .spectrum-CloseButton::after is the Focus ring */ @import "@spectrum-css/commons/basebutton.css"; @@ -48,17 +48,17 @@ governing permissions and limitations under the License. --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); } -.spectrum-Closebutton--sizeS { +.spectrum-CloseButton--sizeS { --spectrum-closebutton-height: var(--spectrum-component-height-75); --spectrum-closebutton-width: var(--spectrum-closebutton-height); } -.spectrum-Closebutton--sizeL { +.spectrum-CloseButton--sizeL { --spectrum-closebutton-height: var(--spectrum-component-height-200); --spectrum-closebutton-width: var(--spectrum-closebutton-height); } -.spectrum-Closebutton--sizeXL { +.spectrum-CloseButton--sizeXL { --spectrum-closebutton-height: var(--spectrum-component-height-300); --spectrum-closebutton-width: var(--spectrum-closebutton-height); } From 29165d20c2bbab28b2f84e93e4c5d1c0fb106a94 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 8 Mar 2024 13:45:59 -0500 Subject: [PATCH 13/42] fix(commons): remove renamed mods marked for deprecation (#2580) * fix(commons): remove renamed mods marked for deprecation Remove mods that were renamed and previously marked for deprecation, and regenerate mods lists. This will help in reviewing the accuracy of other components' mods lists as they are being migrated to s2. * docs: migration guide notes for mod property deprecations Add notes to components affected by mod property changes in the commons basebutton. * docs(closebutton): updated docs for migration guide and icon size - Removes the "Icon size" variant options, as noted in the closebutton PR. Per Figma changelog "removed icon size as a property". - Updates migration guide with a more organized history. * fix(commons): remove another mod referencing global token Deprecates an additional mod name that was referencing a global token, and updates migration notes for all affected components. --- .../actionbutton/metadata/actionbutton.yml | 22 +++-- components/actionbutton/metadata/mods.md | 3 - components/button/metadata/button-accent.yml | 20 ++-- .../button/metadata/button-negative.yml | 22 +++-- components/button/metadata/button-primary.yml | 22 +++-- .../button/metadata/button-secondary.yml | 22 +++-- .../button/metadata/button-staticcolor.yml | 22 +++-- components/button/metadata/mods.md | 3 - .../closebutton/metadata/closebutton.yml | 95 +++++-------------- components/closebutton/metadata/mods.md | 3 - components/commons/basebutton.css | 29 ++---- .../logicbutton/metadata/logicbutton.yml | 11 ++- components/logicbutton/metadata/mods.md | 4 - components/picker/metadata/mods.md | 3 - components/picker/metadata/picker.yml | 22 +++-- 15 files changed, 148 insertions(+), 155 deletions(-) diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml index acc03b5be7c..e2cdbb7badf 100644 --- a/components/actionbutton/metadata/actionbutton.yml +++ b/components/actionbutton/metadata/actionbutton.yml @@ -12,16 +12,24 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - name: Migration Guide description: | - ### Action Button now requires a class on its icon + ### x/x/2024 - Version 6.0.0 + #### Spectrum 2 release + Action button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 6.0.0 + #### Action Button now requires a class on its icon The `.spectrum-ActionButton-icon` class is now required on the icon. - ### T-shirt sizing + #### T-shirt sizing Action Button now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-ActionButton--size*` class. - ### Action Button is now a separate component + #### Action Button is now a separate component Action Button has been moved to the [Action Button](actionbutton.html) component. - ### Change workflow icon size + #### Change workflow icon size Previously, all Action Buttons used `.spectrum-Icon--sizeS`. This has changed: @@ -33,7 +41,7 @@ sections: | `.spectrum-ActionButton--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-ActionButton--sizeXL` | `.spectrum-Icon--sizeXL` | - ### Change hold icon classnames + #### Change hold icon classnames Hold icon classnames must be set as follows: @@ -45,10 +53,10 @@ sections: | `.spectrum-ActionButton--sizeL` | `.spectrum-UIIcon-CornerTriangle200` | | `.spectrum-ActionButton--sizeXL` | `.spectrum-UIIcon-CornerTriangle300` | - ### Include markup for hold icon before workflow icon + #### Include markup for hold icon before workflow icon Because of the way padding is calculated, the hold icon must be placed before the workflow icon. - ### Remove focus-ring class + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: actionbutton-sizing diff --git a/components/actionbutton/metadata/mods.md b/components/actionbutton/metadata/mods.md index 1ee43dbeda1..fd40645cf65 100644 --- a/components/actionbutton/metadata/mods.md +++ b/components/actionbutton/metadata/mods.md @@ -49,9 +49,6 @@ | `--mod-actionbutton-min-width` | | `--mod-actionbutton-static-content-color` | | `--mod-actionbutton-text-to-visual` | -| `--mod-animation-duration-100` | | `--mod-button-animation-duration` | | `--mod-button-font-family` | | `--mod-button-line-height` | -| `--mod-line-height-100` | -| `--mod-sans-font-family-stack` | diff --git a/components/button/metadata/button-accent.yml b/components/button/metadata/button-accent.yml index 8d3be60b926..9870c50f9ec 100644 --- a/components/button/metadata/button-accent.yml +++ b/components/button/metadata/button-accent.yml @@ -8,20 +8,28 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - name: Migration Guide description: | - ### Fill or Outline class required + ### x/x/2024 - Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 13.0.0 + #### Fill or Outline class required All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - ### CTA replaced by Accent with Fill + #### CTA replaced by Accent with Fill Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`. - ### Icon Only + #### Icon Only Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. Provide an `aria-label` on the button itself when using this variant for accessibility. - ### T-shirt sizing + #### T-shirt sizing Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - ### Change workflow icon size + #### Change workflow icon size Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: @@ -32,7 +40,7 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### Remove focus-ring class + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: button-accent diff --git a/components/button/metadata/button-negative.yml b/components/button/metadata/button-negative.yml index 9acb42c7e1f..633599be170 100644 --- a/components/button/metadata/button-negative.yml +++ b/components/button/metadata/button-negative.yml @@ -8,23 +8,31 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - name: Migration Guide description: | - ### Fill or Outline class required + ### x/x/2024 - Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 13.0.0 + #### Fill or Outline class required All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - ### Negative replaced by Negative with Outline + #### Negative replaced by Negative with Outline Replace all `.spectrum-Button--negative` with `.spectrum-Button--negative .spectrum-Button--outline`. - ### Negative Quiet replaced by Negative with Outline + #### Negative Quiet replaced by Negative with Outline Replace all `.spectrum-Button--negative .spectrum-Button--quiet` with `.spectrum-Button--negative .spectrum-Button--outline`. - ### Icon Only + #### Icon Only Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. Provide an `aria-label` on the button itself when using this variant for accessibility. - ### T-shirt sizing + #### T-shirt sizing Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - ### Change workflow icon size + #### Change workflow icon size Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: @@ -35,7 +43,7 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### Remove focus-ring class + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: button-negative diff --git a/components/button/metadata/button-primary.yml b/components/button/metadata/button-primary.yml index e7bb7f449ec..707495aec11 100644 --- a/components/button/metadata/button-primary.yml +++ b/components/button/metadata/button-primary.yml @@ -8,23 +8,31 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - name: Migration Guide description: | - ### Fill or Outline class required + ### x/x/2024 - Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 13.0.0 + #### Fill or Outline class required All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - ### Primary replaced by Primary with Outline + #### Primary replaced by Primary with Outline Replace all `.spectrum-Button--primary` with `.spectrum-Button--primary .spectrum-Button--outline`. - ### Primary Quiet replaced by Secondary with Outline + #### Primary Quiet replaced by Secondary with Outline Replace all `.spectrum-Button--primary .spectrum-Button--quiet` with `.spectrum-Button--secondary .spectrum-Button--outline`. - ### Icon Only + #### Icon Only Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. Provide an `aria-label` on the button itself when using this variant for accessibility. - ### T-shirt sizing + #### T-shirt sizing Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - ### Change workflow icon size + #### Change workflow icon size Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: @@ -35,7 +43,7 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### Remove focus-ring class + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: button-primary diff --git a/components/button/metadata/button-secondary.yml b/components/button/metadata/button-secondary.yml index 7b86a380ffc..989879ab204 100644 --- a/components/button/metadata/button-secondary.yml +++ b/components/button/metadata/button-secondary.yml @@ -8,23 +8,31 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - name: Migration Guide description: | - ### Fill or Outline class required + ### x/x/2024 - Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 13.0.0 + #### Fill or Outline class required All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - ### Secondary replaced by Secondary with Outline + #### Secondary replaced by Secondary with Outline Replace all `.spectrum-Button--secondary` with `.spectrum-Button--secondary .spectrum-Button--outline`. - ### Secondary Quiet replaced by Secondary with Outline + #### Secondary Quiet replaced by Secondary with Outline Replace all `.spectrum-Button--secondary .spectrum-Button--quiet` with `.spectrum-Button--secondary .spectrum-Button--outline`. - ### Icon Only + #### Icon Only Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. Provide an `aria-label` on the button itself when using this variant for accessibility. - ### T-shirt sizing + #### T-shirt sizing Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - ### Change workflow icon size + #### Change workflow icon size Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: @@ -35,7 +43,7 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### Remove focus-ring class + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: button-secondary diff --git a/components/button/metadata/button-staticcolor.yml b/components/button/metadata/button-staticcolor.yml index ae8792424af..9c588cf0298 100644 --- a/components/button/metadata/button-staticcolor.yml +++ b/components/button/metadata/button-staticcolor.yml @@ -8,23 +8,31 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - name: Migration Guide description: | - ### Fill or Outline class required + ### x/x/2024 - Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 13.0.0 + #### Fill or Outline class required All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - ### Over background replaced by StaticWhite with Outline + #### Over background replaced by StaticWhite with Outline Replace all `.spectrum-Button--overBackground` with `.spectrum-Button--staticWhite .spectrum-Button--outline`. - ### Over background Quiet replaced by StaticWhite with Outline + #### Over background Quiet replaced by StaticWhite with Outline Replace all `.spectrum-Button--overBackground .spectrum-Button--quiet` with `.spectrum-Button--staticWhite .spectrum-Button--outline`. - ### Icon Only + #### Icon Only Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. Provide an `aria-label` on the button itself when using this variant for accessibility. - ### T-shirt sizing + #### T-shirt sizing Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - ### Change workflow icon size + #### Change workflow icon size Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: @@ -35,7 +43,7 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### Remove focus-ring class + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: button-staticcolor diff --git a/components/button/metadata/mods.md b/components/button/metadata/mods.md index c8fa31d2674..4460826b8ac 100644 --- a/components/button/metadata/mods.md +++ b/components/button/metadata/mods.md @@ -1,6 +1,5 @@ | Modifiable custom properties | | ------------------------------------------ | -| `--mod-animation-duration-100` | | `--mod-bold-font-weight` | | `--mod-button-animation-duration` | | `--mod-button-background-color-default` | @@ -45,6 +44,4 @@ | `--mod-button-top-to-icon` | | `--mod-button-top-to-text` | | `--mod-focus-indicator-gap` | -| `--mod-line-height-100` | -| `--mod-sans-font-family-stack` | | `--mod-static-black-focus-indicator-color` | diff --git a/components/closebutton/metadata/closebutton.yml b/components/closebutton/metadata/closebutton.yml index 84263edc628..42da1f98b6e 100644 --- a/components/closebutton/metadata/closebutton.yml +++ b/components/closebutton/metadata/closebutton.yml @@ -11,15 +11,14 @@ sections: ### x/x/2024 - Version 5.0.0 #### Spectrum 2 release Close button now uses Spectrum 2 tokens and specifications. A few notable changes and additions: - * Removes all static-specific `--mod` custom properties since they are no longer needed: + * Removes all static-specific `--mod` custom properties since they are no longer needed. The existing background-color mods can be used instead: | Removed | |-----------------------------------------------------| | `--mod-closebutton-static-background-color-default` | | `--mod-closebutton-static-background-color-down` | | `--mod-closebutton-static-background-color-focus` | | `--mod-closebutton-static-background-color-hover` | - - Consumers can use these existing background-color mods instead: + | Use these existing mods instead | |----------------------------------------------| | `--mod-closebutton-background-color-default` | @@ -27,11 +26,19 @@ sections: | `--mod-closebutton-background-color-focus` | | `--mod-closebutton-background-color-hover` | - * Also removes --mod-closebutton-size since we'll be setting rounded border-radius with a single rounding token, to be formally implemented as part of [S2 Corner Rounding](https://github.com/adobe/spectrum-css/pull/2559/files#diff-d6e9caa794bd8e1c659425d223e23ab53a93a254f00fb11a626e1b7563bd0c61R39-R41). - + * The mod custom property `--mod-closebutton-size` has been removed. It was only used for rounded corners, that are now set with a single rounding token. + * The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + * The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + * The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + * The regular and large "Icon size" variants have been removed. + + ### 8/16/2023 - Version 4.0.0 + #### Remove focus-ring class + We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. - ### Sizing - Close button supports different sized icons. By default, you should use the following icons: + ### 8/3/2022 - Version 2.0.0 + #### Sizing and Spectrum tokens migration + Close button was migrated to use Spectrum tokens. Close button now supports different sizes. By default, the following icons should be used for each size: | Close button classname | UI icon classname | | ------------------------------- | --------------------------- | @@ -39,72 +46,18 @@ sections: | `.spectrum-CloseButton--sizeM` | `.spectrum-UIIcon-Cross100` | | `.spectrum-CloseButton--sizeL` | `.spectrum-UIIcon-Cross200` | | `.spectrum-CloseButton--sizeXL` | `.spectrum-UIIcon-Cross300` | - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - - id: close - name: Icon Size - Regular - markup: | -
-
-

S

- -
- -
-
-
-

M (default)

- -
- -
-
- -
-

L

- -
- -
-
- -
-

XL

- -
- -
-
-
- - id: closebutton-largeicon - name: Icon Size - Large + - id: closebutton + name: Sizing description: | - Close button supports different sized icons. For cases where you need large icons, you should use the following icons: - - | Close button classname | UI icon classname | - | ------------------------------- | --------------------------- | - | `.spectrum-CloseButton--sizeS` | `.spectrum-UIIcon-Cross200` | - | `.spectrum-CloseButton--sizeM` | `.spectrum-UIIcon-Cross300` | - | `.spectrum-CloseButton--sizeL` | `.spectrum-UIIcon-Cross400` | - | `.spectrum-CloseButton--sizeXL` | `.spectrum-UIIcon-Cross500` | + At each size, Close button uses a specific UI icon size: + + | Close button size | UI icon | + | ------------------ | ---------- | + | Small | `Cross200` | + | Medium | `Cross300` | + | Large | `Cross400` | + | Extra large | `Cross500` | markup: |
diff --git a/components/closebutton/metadata/mods.md b/components/closebutton/metadata/mods.md index dbf39678f36..aef46b690ae 100644 --- a/components/closebutton/metadata/mods.md +++ b/components/closebutton/metadata/mods.md @@ -1,6 +1,5 @@ | Modifiable custom properties | | --------------------------------------------- | -| `--mod-animation-duration-100` | | `--mod-button-animation-duration` | | `--mod-button-font-family` | | `--mod-button-line-height` | @@ -24,5 +23,3 @@ | `--mod-closebutton-margin-inline` | | `--mod-closebutton-margin-top` | | `--mod-closebutton-width` | -| `--mod-line-height-100` | -| `--mod-sans-font-family-stack` | diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css index 00ca18e6808..38936c53b99 100644 --- a/components/commons/basebutton.css +++ b/components/commons/basebutton.css @@ -31,14 +31,10 @@ governing permissions and limitations under the License. /* Remove button the margin in Firefox and Safari. */ margin: 0; - /* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */ - font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))); - - /* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */ - line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100))); + font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack)); + line-height: var(--mod-button-line-height, var(--spectrum-line-height-100)); text-decoration: none; - /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */ text-transform: none; @@ -49,10 +45,10 @@ governing permissions and limitations under the License. -webkit-appearance: button; border-style: solid; - transition: background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out; + transition: background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + border-color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + box-shadow var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out; -webkit-font-smoothing: antialiased; @@ -61,11 +57,9 @@ governing permissions and limitations under the License. /* Fix Firefox */ &::-moz-focus-inner { - /* Use uppercase PX so values don't get converted to rem */ margin-block-start: -2px; margin-block-end: -2px; padding: 0; - border: 0; /* Remove the inner border and padding for button in Firefox. */ @@ -98,17 +92,14 @@ governing permissions and limitations under the License. inset-inline-end: 0; display: block; + margin: calc(var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1); - /* @deprecation --mod-focus-indicator-gap has been renamed and will be removed in a future version. */ - margin: calc(var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) * -1); - - /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */ - transition: opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out, - margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out; + transition: opacity var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + margin var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out; } &:focus-visible::after { - margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2); + margin: calc(var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2); } } diff --git a/components/logicbutton/metadata/logicbutton.yml b/components/logicbutton/metadata/logicbutton.yml index f8dba482fc8..f7ee38eb9d9 100644 --- a/components/logicbutton/metadata/logicbutton.yml +++ b/components/logicbutton/metadata/logicbutton.yml @@ -4,7 +4,16 @@ description: A LogicButton displays an operator within a boolean logic sequence. sections: - name: Migration Guide description: | - ### Remove focus-ring class + ### x/x/2024 - Version 4.0.0 + #### Spectrum 2 release + Logic button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-focus-indicator-gap` has been renamed to `--mod-button-focus-indicator-gap`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### 8/16/2023 - Version 2.0.0 + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: logicbutton-and diff --git a/components/logicbutton/metadata/mods.md b/components/logicbutton/metadata/mods.md index a3187f962e5..c9ee009b8ea 100644 --- a/components/logicbutton/metadata/mods.md +++ b/components/logicbutton/metadata/mods.md @@ -1,12 +1,9 @@ | Modifiable custom properties | | -------------------------------------------------------- | -| `--mod-animation-duration-100` | | `--mod-button-animation-duration` | | `--mod-button-focus-indicator-gap` | | `--mod-button-font-family` | | `--mod-button-line-height` | -| `--mod-focus-indicator-gap` | -| `--mod-line-height-100` | | `--mod-logic-button-and-background-color` | | `--mod-logic-button-and-background-color-disabled` | | `--mod-logic-button-and-background-color-hover` | @@ -36,4 +33,3 @@ | `--mod-logic-button-or-text-color` | | `--mod-logic-button-or-text-color-disabled` | | `--mod-logic-button-padding` | -| `--mod-sans-font-family-stack` | diff --git a/components/picker/metadata/mods.md b/components/picker/metadata/mods.md index 057ce9d8643..6a75c97b7b3 100644 --- a/components/picker/metadata/mods.md +++ b/components/picker/metadata/mods.md @@ -1,10 +1,8 @@ | Modifiable custom properties | | ------------------------------------------------------ | -| `--mod-animation-duration-100` | | `--mod-button-animation-duration` | | `--mod-button-font-family` | | `--mod-button-line-height` | -| `--mod-line-height-100` | | `--mod-picker-animation-duration` | | `--mod-picker-background-color-active` | | `--mod-picker-background-color-default` | @@ -68,4 +66,3 @@ | `--mod-picker-spacing-top-to-disclosure-icon` | | `--mod-picker-spacing-top-to-progress-circle` | | `--mod-picker-spacing-top-to-text` | -| `--mod-sans-font-family-stack` | diff --git a/components/picker/metadata/picker.yml b/components/picker/metadata/picker.yml index 5339feeca39..783f9fd1a49 100644 --- a/components/picker/metadata/picker.yml +++ b/components/picker/metadata/picker.yml @@ -7,17 +7,25 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here. - name: Migration Guide description: | - ### Component renamed + ### x/x/2024 - Version 8.0.0 + #### Spectrum 2 release + Picker now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 8.0 + #### Component renamed Dropdown is now known as Picker. Replace all `.spectrum-Dropdown*` classnames with `.spectrum-Picker*`. - ### Markup change + #### Markup change The outer `
` is now gone and `.spectrum-FieldButton` is no longer used. Instead, the outer tag is now `
- +
@@ -100,7 +115,7 @@ examples:

-
-