diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 330cc9bedae..e266870fd25 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -24,7 +24,7 @@ on: default: "20" experimental: required: false - default: false + default: "false" ref: description: "The branch or tag to checkout" required: false @@ -153,7 +153,6 @@ jobs: git diff --staged > changes.diff exit 1 fi - - name: Upload changes if: ${{ failure() }} uses: actions/upload-artifact@v4 diff --git a/nx.json b/nx.json index 28b05ff46ee..cb6371c9357 100644 --- a/nx.json +++ b/nx.json @@ -47,7 +47,7 @@ ], "options": { "commands": [ - "node --no-warnings -e 'require(\"./tasks/component-builder.js\").default()'" + "node --no-warnings ./tasks/component-builder.js {projectName}" ] }, "outputs": [ @@ -102,7 +102,7 @@ ], "options": { "commands": [ - "node --no-warnings ./tasks/compare-compiled-output.js $NX_TASK_TARGET_PROJECT" + "node --no-warnings ./tasks/compare-compiled-output.js {projectName}" ] }, "outputs": ["{workspaceRoot}/.diff-output"] @@ -155,7 +155,7 @@ ], "options": { "commands": [ - "cross-env NODE_OPTIONS=\"--no-warnings\" node -e 'require(\"./tasks/component-reporter.js\").default()'" + "node --no-warnings ./tasks/component-reporter.js {projectName}" ] }, "outputs": [ diff --git a/tasks/component-builder.js b/tasks/component-builder.js index d3fca06ecca..4407057fa05 100644 --- a/tasks/component-builder.js +++ b/tasks/component-builder.js @@ -17,6 +17,9 @@ const fs = require("fs"); const fsp = fs.promises; const path = require("path"); +const { hideBin } = require("yargs/helpers"); +const yargs = require("yargs"); + const postcss = require("postcss"); const postcssrc = require("postcss-load-config"); const prettier = require("prettier"); @@ -223,8 +226,8 @@ async function buildThemes({ cwd = process.cwd(), clean = false } = {}) { const theme = path.basename(input, ".css"); return processCSS( content, - path.join(cwd, input), - path.join(cwd, "dist", input), + input, + path.join(cwd, "dist", "themes", `${theme}.css`), { cwd, clean, @@ -334,3 +337,9 @@ async function main({ exports.processCSS = processCSS; exports.fetchContent = fetchContent; exports.default = main; + +let { + _: components, +} = yargs(hideBin(process.argv)).argv; + +Promise.all(components.map((componentName) => main({ componentName }))); diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js index 48bdf9bc582..057eb89925b 100644 --- a/tasks/component-reporter.js +++ b/tasks/component-reporter.js @@ -16,6 +16,9 @@ const fs = require("fs"); const fsp = fs.promises; const path = require("path"); +const { hideBin } = require("yargs/helpers"); +const yargs = require("yargs"); + const postcss = require("postcss"); const prettier = require("prettier"); @@ -268,3 +271,9 @@ async function main({ exports.extractModifiers = extractModifiers; exports.default = main; + +let { + _: components, +} = yargs(hideBin(process.argv)).argv; + +Promise.all(components.map((componentName) => main({ componentName }))); diff --git a/tasks/utilities.js b/tasks/utilities.js index 5868c8b2e01..8df7c5f8681 100644 --- a/tasks/utilities.js +++ b/tasks/utilities.js @@ -200,27 +200,20 @@ async function fetchContent( })), ); - // Combine the content into 1 file; @todo do this in future using CSS imports - if (shouldCombine) { - let content = ""; - fileData.forEach((dataset) => { - if (dataset.content) content += "\n\n" + dataset.content; - }); + if (!shouldCombine) return Promise.resolve(fileData); - return Promise.resolve([ - { - content, - input: fileData[0].input, - }, - ]); - } + // Combine the content into 1 file; @todo do this in future using CSS imports + let content = ""; + fileData.forEach((dataset) => { + if (dataset.content) content += "\n\n" + dataset.content; + }); - return Promise.all( - files.map(async (file) => ({ - content: await fsp.readFile(path.join(cwd, file), "utf8"), - input: file, - })), - ); + return Promise.resolve([ + { + content, + input: fileData[0].input, + }, + ]); } /** @@ -286,8 +279,7 @@ async function writeAndReport(content, output, { cwd = process.cwd() } = {}) { }) .catch((err) => { if (!err) return; - const relativePath = path.relative(cwd, output); - console.log(`${"✗".red} ${relativePath.yellow} not written`); + console.log(`${"✗".red} ${relativePrint(cwd, output).yellow} not written`); return Promise.reject(err); }); } diff --git a/tokens/dist/css/dark-vars.css b/tokens/dist/css/dark-vars.css new file mode 100644 index 00000000000..4ae60835874 --- /dev/null +++ b/tokens/dist/css/dark-vars.css @@ -0,0 +1,472 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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); +} diff --git a/tokens/dist/css/darkest-vars.css b/tokens/dist/css/darkest-vars.css new file mode 100644 index 00000000000..084a3fc8753 --- /dev/null +++ b/tokens/dist/css/darkest-vars.css @@ -0,0 +1,472 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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/custom-large-vars.css b/tokens/dist/css/express/custom-large-vars.css new file mode 100644 index 00000000000..e91e617d134 --- /dev/null +++ b/tokens/dist/css/express/custom-large-vars.css @@ -0,0 +1,23 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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"; + + --spectrum-dialog-confirm-border-radius:8px; + + --spectrum-dial-border-radius:15px; + + --spectrum-assetcard-focus-ring-border-radius:12px; +} diff --git a/tokens/dist/css/express/custom-medium-vars.css b/tokens/dist/css/express/custom-medium-vars.css new file mode 100644 index 00000000000..2fd3a95da3b --- /dev/null +++ b/tokens/dist/css/express/custom-medium-vars.css @@ -0,0 +1,23 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--express.spectrum--medium{ + --spectrum-colorwheel-path:"M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0"; + --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + + --spectrum-dialog-confirm-border-radius:6px; + + --spectrum-dial-border-radius:12px; + + --spectrum-assetcard-focus-ring-border-radius:10px; +} diff --git a/tokens/dist/css/express/custom-vars.css b/tokens/dist/css/express/custom-vars.css new file mode 100644 index 00000000000..675f4c9c61a --- /dev/null +++ b/tokens/dist/css/express/custom-vars.css @@ -0,0 +1,16 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--express{ + --system:express; +} diff --git a/tokens/dist/css/express/dark-vars.css b/tokens/dist/css/express/dark-vars.css new file mode 100644 index 00000000000..bc153b58cf7 --- /dev/null +++ b/tokens/dist/css/express/dark-vars.css @@ -0,0 +1,22 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--express.spectrum--dark{ + --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-900-rgb); + --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); + + --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-800); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-700); +} diff --git a/tokens/dist/css/express/darkest-vars.css b/tokens/dist/css/express/darkest-vars.css new file mode 100644 index 00000000000..51b3a61df06 --- /dev/null +++ b/tokens/dist/css/express/darkest-vars.css @@ -0,0 +1,22 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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); + + --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-800); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-700); +} diff --git a/tokens/dist/css/express/global-vars.css b/tokens/dist/css/express/global-vars.css new file mode 100644 index 00000000000..3e21dad6395 --- /dev/null +++ b/tokens/dist/css/express/global-vars.css @@ -0,0 +1,53 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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); + --system:express; +} diff --git a/tokens/dist/css/express/index.css b/tokens/dist/css/express/index.css new file mode 100644 index 00000000000..6ce93008ee5 --- /dev/null +++ b/tokens/dist/css/express/index.css @@ -0,0 +1,195 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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); + + --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-800); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-700); +} + +.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); + --system:express; +} + +.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; + --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"; + + --spectrum-dialog-confirm-border-radius:8px; + + --spectrum-dial-border-radius:15px; + + --spectrum-assetcard-focus-ring-border-radius:12px; +} + +.spectrum--express.spectrum--light,.spectrum--express.spectrum--lightest{ + --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-800-rgb); + --spectrum-well-border-color:rgba(var(--spectrum-black-rgb), 0.05); + + --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-900); +} + +.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; + --spectrum-colorwheel-path:"M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0"; + --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + + --spectrum-dialog-confirm-border-radius:6px; + + --spectrum-dial-border-radius:12px; + + --spectrum-assetcard-focus-ring-border-radius:10px; +} diff --git a/tokens/dist/css/express/large-vars.css b/tokens/dist/css/express/large-vars.css new file mode 100644 index 00000000000..308dae90052 --- /dev/null +++ b/tokens/dist/css/express/large-vars.css @@ -0,0 +1,73 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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; + --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"; + + --spectrum-dialog-confirm-border-radius:8px; + + --spectrum-dial-border-radius:15px; + + --spectrum-assetcard-focus-ring-border-radius:12px; +} diff --git a/tokens/dist/css/express/light-vars.css b/tokens/dist/css/express/light-vars.css new file mode 100644 index 00000000000..a3463408cde --- /dev/null +++ b/tokens/dist/css/express/light-vars.css @@ -0,0 +1,22 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--express.spectrum--light,.spectrum--express.spectrum--lightest{ + --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-800-rgb); + --spectrum-well-border-color:rgba(var(--spectrum-black-rgb), 0.05); + + --spectrum-assetcard-border-color-selected:var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-900); +} diff --git a/tokens/dist/css/express/medium-vars.css b/tokens/dist/css/express/medium-vars.css new file mode 100644 index 00000000000..519c280781b --- /dev/null +++ b/tokens/dist/css/express/medium-vars.css @@ -0,0 +1,73 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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; + --spectrum-colorwheel-path:"M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0"; + --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + + --spectrum-dialog-confirm-border-radius:6px; + + --spectrum-dial-border-radius:12px; + + --spectrum-assetcard-focus-ring-border-radius:10px; +} diff --git a/tokens/dist/css/global-vars.css b/tokens/dist/css/global-vars.css new file mode 100644 index 00000000000..f707cb22d7d --- /dev/null +++ b/tokens/dist/css/global-vars.css @@ -0,0 +1,586 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum{ + --spectrum-focus-indicator-color:var(--spectrum-blue-800); + --spectrum-static-white-focus-indicator-color:var(--spectrum-white); + --spectrum-static-black-focus-indicator-color:var(--spectrum-black); + --spectrum-overlay-color:var(--spectrum-black); + --spectrum-opacity-disabled:0.3; + --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-background-opacity-default:0; + --spectrum-background-opacity-hover:0.1; + --spectrum-background-opacity-down:0.1; + --spectrum-background-opacity-key-focus:0.1; + --spectrum-neutral-content-color-default:var(--spectrum-gray-800); + --spectrum-neutral-content-color-hover:var(--spectrum-gray-900); + --spectrum-neutral-content-color-down:var(--spectrum-gray-900); + --spectrum-neutral-content-color-focus-hover:var(--spectrum-neutral-content-color-down); + --spectrum-neutral-content-color-focus:var(--spectrum-neutral-content-color-down); + --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-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-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-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-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); + --spectrum-negative-border-color-default:var(--spectrum-negative-color-900); + --spectrum-negative-border-color-hover:var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-border-color-focus-hover:var(--spectrum-negative-border-color-down); + --spectrum-negative-border-color-focus:var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-swatch-border-color:var(--spectrum-gray-900); + --spectrum-swatch-border-opacity:0.51; + --spectrum-swatch-disabled-icon-border-color:var(--spectrum-black); + --spectrum-swatch-disabled-icon-border-opacity:0.51; + --spectrum-thumbnail-border-color:var(--spectrum-gray-800); + --spectrum-thumbnail-border-opacity:0.1; + --spectrum-thumbnail-opacity-disabled:var(--spectrum-opacity-disabled); + --spectrum-opacity-checkerboard-square-light:var(--spectrum-white); + --spectrum-avatar-opacity-disabled:var(--spectrum-opacity-disabled); + --spectrum-color-area-border-color:var(--spectrum-gray-900); + --spectrum-color-area-border-opacity:0.1; + --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-inner-border:var(--spectrum-transparent-black-200); + --spectrum-color-loupe-outer-border:var(--spectrum-white); + --spectrum-card-selection-background-color:var(--spectrum-gray-100); + --spectrum-card-selection-background-color-opacity:0.95; + --spectrum-drop-zone-background-color:var(--spectrum-accent-visual-color); + --spectrum-drop-zone-background-color-opacity:0.1; + --spectrum-drop-zone-background-color-opacity-filled:0.3; + --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); + --spectrum-floating-action-button-shadow-color:var(--spectrum-floating-action-button-drop-shadow-color); + --spectrum-table-row-hover-color:var(--spectrum-gray-900); + --spectrum-table-row-hover-opacity:0.07; + --spectrum-table-selected-row-background-color:var(--spectrum-informative-background-color-default); + --spectrum-table-selected-row-background-opacity:0.1; + --spectrum-table-selected-row-background-color-non-emphasized:var(--spectrum-neutral-background-color-selected-default); + --spectrum-table-selected-row-background-opacity-non-emphasized:0.1; + --spectrum-table-row-down-opacity:0.1; + --spectrum-table-selected-row-background-opacity-hover:0.15; + --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-100-rgb:255, 255, 255; + --spectrum-transparent-white-100-opacity:0; + --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: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: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: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: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: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: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: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-black-rgb:0, 0, 0; + --spectrum-black:rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-100-rgb:0, 0, 0; + --spectrum-transparent-black-100-opacity:0; + --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: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: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: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: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: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: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: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-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; + --spectrum-divider-thickness-large:4px; + --spectrum-swatch-rectangle-width-multiplier:2; + --spectrum-swatch-slash-thickness-extra-small:2px; + --spectrum-swatch-slash-thickness-small:3px; + --spectrum-swatch-slash-thickness-medium:4px; + --spectrum-swatch-slash-thickness-large:5px; + --spectrum-progress-bar-minimum-width:48px; + --spectrum-progress-bar-maximum-width:768px; + --spectrum-meter-minimum-width:48px; + --spectrum-meter-maximum-width:768px; + --spectrum-meter-default-width:var(--spectrum-meter-width); + --spectrum-in-line-alert-minimum-width:240px; + --spectrum-popover-tip-width:16px; + --spectrum-popover-tip-height:8px; + --spectrum-menu-item-label-to-description:1px; + --spectrum-menu-item-section-divider-height:8px; + --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; + --spectrum-text-field-minimum-width-multiplier:1.5; + --spectrum-combo-box-minimum-width-multiplier:2.5; + --spectrum-combo-box-quiet-minimum-width-multiplier:2; + --spectrum-combo-box-visual-to-field-button-quiet:0px; + --spectrum-alert-dialog-minimum-width:288px; + --spectrum-alert-dialog-maximum-width:480px; + --spectrum-contextual-help-minimum-width:268px; + --spectrum-breadcrumbs-height:var(--spectrum-component-height-300); + --spectrum-breadcrumbs-height-compact:var(--spectrum-component-height-200); + --spectrum-breadcrumbs-end-edge-to-text:0px; + --spectrum-breadcrumbs-truncated-menu-to-separator-icon:0px; + --spectrum-breadcrumbs-start-edge-to-truncated-menu:0px; + --spectrum-breadcrumbs-truncated-menu-to-bottom-text:0px; + --spectrum-alert-banner-to-top-workflow-icon:var(--spectrum-alert-banner-top-to-workflow-icon); + --spectrum-alert-banner-to-top-text:var(--spectrum-alert-banner-top-to-text); + --spectrum-alert-banner-to-bottom-text:var(--spectrum-alert-banner-bottom-to-text); + --spectrum-color-area-border-width:var(--spectrum-border-width-100); + --spectrum-color-area-border-rounding:var(--spectrum-corner-radius-100); + --spectrum-color-wheel-color-area-margin:12px; + --spectrum-color-slider-border-width:1px; + --spectrum-color-slider-border-rounding:4px; + --spectrum-floating-action-button-drop-shadow-blur:12px; + --spectrum-floating-action-button-drop-shadow-y:4px; + --spectrum-illustrated-message-maximum-width:380px; + --spectrum-search-field-minimum-width-multiplier:3; + --spectrum-color-loupe-height:64px; + --spectrum-color-loupe-width:48px; + --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; + --spectrum-drop-zone-width:428px; + --spectrum-drop-zone-content-maximum-width:var(--spectrum-illustrated-message-maximum-width); + --spectrum-drop-zone-border-dash-length:8px; + --spectrum-drop-zone-border-dash-gap:4px; + --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; + --spectrum-color-handle-drop-shadow-x:0; + --spectrum-color-handle-drop-shadow-y:0; + --spectrum-color-handle-drop-shadow-blur:0; + --spectrum-table-row-height-small-compact:var(--spectrum-component-height-75); + --spectrum-table-row-height-medium-compact:var(--spectrum-component-height-100); + --spectrum-table-row-height-large-compact:var(--spectrum-component-height-200); + --spectrum-table-row-height-extra-large-compact:var(--spectrum-component-height-300); + --spectrum-table-row-top-to-text-small-compact:var(--spectrum-component-top-to-text-75); + --spectrum-table-row-top-to-text-medium-compact:var(--spectrum-component-top-to-text-100); + --spectrum-table-row-top-to-text-large-compact:var(--spectrum-component-top-to-text-200); + --spectrum-table-row-top-to-text-extra-large-compact:var(--spectrum-component-top-to-text-300); + --spectrum-table-row-bottom-to-text-small-compact:var(--spectrum-component-bottom-to-text-75); + --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); + --spectrum-tab-item-height-large:var(--spectrum-component-height-400); + --spectrum-tab-item-height-extra-large:var(--spectrum-component-height-500); + --spectrum-tab-item-compact-height-small:var(--spectrum-component-height-75); + --spectrum-tab-item-compact-height-medium:var(--spectrum-component-height-100); + --spectrum-tab-item-compact-height-large:var(--spectrum-component-height-200); + --spectrum-tab-item-compact-height-extra-large:var(--spectrum-component-height-300); + --spectrum-tab-item-start-to-edge-quiet:0px; + --spectrum-in-field-button-width-stacked-small:20px; + --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-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-android-elevation:2dp; + --spectrum-spacing-50:2px; + --spectrum-spacing-75:4px; + --spectrum-spacing-100:8px; + --spectrum-spacing-200:12px; + --spectrum-spacing-300:16px; + --spectrum-spacing-400:24px; + --spectrum-spacing-500:32px; + --spectrum-spacing-600:40px; + --spectrum-spacing-700:48px; + --spectrum-spacing-800:64px; + --spectrum-spacing-900:80px; + --spectrum-spacing-1000:96px; + --spectrum-focus-indicator-thickness:2px; + --spectrum-focus-indicator-gap:2px; + --spectrum-border-width-200:2px; + --spectrum-border-width-400:4px; + --spectrum-field-edge-to-text-quiet:0px; + --spectrum-field-edge-to-visual-quiet:0px; + --spectrum-field-edge-to-border-quiet:0px; + --spectrum-field-edge-to-alert-icon-quiet:0px; + --spectrum-field-edge-to-validation-icon-quiet:0px; + --spectrum-text-underline-thickness:1px; + --spectrum-text-underline-gap:1px; + --spectrum-informative-color-100:var(--spectrum-blue-100); + --spectrum-informative-color-200:var(--spectrum-blue-200); + --spectrum-informative-color-300:var(--spectrum-blue-300); + --spectrum-informative-color-400:var(--spectrum-blue-400); + --spectrum-informative-color-500:var(--spectrum-blue-500); + --spectrum-informative-color-600:var(--spectrum-blue-600); + --spectrum-informative-color-700:var(--spectrum-blue-700); + --spectrum-informative-color-800:var(--spectrum-blue-800); + --spectrum-informative-color-900:var(--spectrum-blue-900); + --spectrum-informative-color-1000:var(--spectrum-blue-1000); + --spectrum-informative-color-1100:var(--spectrum-blue-1100); + --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-negative-color-100:var(--spectrum-red-100); + --spectrum-negative-color-200:var(--spectrum-red-200); + --spectrum-negative-color-300:var(--spectrum-red-300); + --spectrum-negative-color-400:var(--spectrum-red-400); + --spectrum-negative-color-500:var(--spectrum-red-500); + --spectrum-negative-color-600:var(--spectrum-red-600); + --spectrum-negative-color-700:var(--spectrum-red-700); + --spectrum-negative-color-800:var(--spectrum-red-800); + --spectrum-negative-color-900:var(--spectrum-red-900); + --spectrum-negative-color-1000:var(--spectrum-red-1000); + --spectrum-negative-color-1100:var(--spectrum-red-1100); + --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-notice-color-100:var(--spectrum-orange-100); + --spectrum-notice-color-200:var(--spectrum-orange-200); + --spectrum-notice-color-300:var(--spectrum-orange-300); + --spectrum-notice-color-400:var(--spectrum-orange-400); + --spectrum-notice-color-500:var(--spectrum-orange-500); + --spectrum-notice-color-600:var(--spectrum-orange-600); + --spectrum-notice-color-700:var(--spectrum-orange-700); + --spectrum-notice-color-800:var(--spectrum-orange-800); + --spectrum-notice-color-900:var(--spectrum-orange-900); + --spectrum-notice-color-1000:var(--spectrum-orange-1000); + --spectrum-notice-color-1100:var(--spectrum-orange-1100); + --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-positive-color-100:var(--spectrum-green-100); + --spectrum-positive-color-200:var(--spectrum-green-200); + --spectrum-positive-color-300:var(--spectrum-green-300); + --spectrum-positive-color-400:var(--spectrum-green-400); + --spectrum-positive-color-500:var(--spectrum-green-500); + --spectrum-positive-color-600:var(--spectrum-green-600); + --spectrum-positive-color-700:var(--spectrum-green-700); + --spectrum-positive-color-800:var(--spectrum-green-800); + --spectrum-positive-color-900:var(--spectrum-green-900); + --spectrum-positive-color-1000:var(--spectrum-green-1000); + --spectrum-positive-color-1100:var(--spectrum-green-1100); + --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-default-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-sans-serif-font-family:Adobe Clean; + --spectrum-serif-font-family:Adobe Clean Serif; + --spectrum-cjk-font-family:Adobe Clean Han; + --spectrum-light-font-weight:300; + --spectrum-regular-font-weight:400; + --spectrum-medium-font-weight:500; + --spectrum-bold-font-weight:700; + --spectrum-extra-bold-font-weight:800; + --spectrum-black-font-weight:900; + --spectrum-italic-font-style:italic; + --spectrum-default-font-style:400; + --spectrum-line-height-100:1.3; + --spectrum-line-height-200:1.5; + --spectrum-cjk-line-height-100:1.5; + --spectrum-cjk-line-height-200:1.7; + --spectrum-cjk-letter-spacing:0.05em; + --spectrum-heading-sans-serif-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-heading-serif-font-family:var(--spectrum-serif-font-family); + --spectrum-heading-cjk-font-family:var(--spectrum-cjk-font-family); + --spectrum-heading-sans-serif-light-font-weight:var(--spectrum-light-font-weight); + --spectrum-heading-sans-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-light-font-weight:var(--spectrum-regular-font-weight); + --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-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-font-style:var(--spectrum-default-font-style); + --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); + --spectrum-heading-serif-heavy-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-heavy-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-light-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-light-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-heavy-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-strong-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-emphasized-font-weight:var(--spectrum-light-font-weight); + --spectrum-heading-sans-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --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-style:var(--spectrum-italic-font-style); + --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); + --spectrum-heading-sans-serif-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-heavy-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-light-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-heading-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-light-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-light-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-cjk-heavy-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-size-xxxl:var(--spectrum-font-size-1300); + --spectrum-heading-size-xxl:var(--spectrum-font-size-1100); + --spectrum-heading-size-xl:var(--spectrum-font-size-900); + --spectrum-heading-size-l:var(--spectrum-font-size-700); + --spectrum-heading-size-m:var(--spectrum-font-size-500); + --spectrum-heading-size-s:var(--spectrum-font-size-300); + --spectrum-heading-size-xs:var(--spectrum-font-size-200); + --spectrum-heading-size-xxs:var(--spectrum-font-size-100); + --spectrum-heading-cjk-size-xxxl:var(--spectrum-font-size-1300); + --spectrum-heading-cjk-size-xxl:var(--spectrum-font-size-900); + --spectrum-heading-cjk-size-xl:var(--spectrum-font-size-800); + --spectrum-heading-cjk-size-l:var(--spectrum-font-size-600); + --spectrum-heading-cjk-size-m:var(--spectrum-font-size-400); + --spectrum-heading-cjk-size-s:var(--spectrum-font-size-300); + --spectrum-heading-cjk-size-xs:var(--spectrum-font-size-200); + --spectrum-heading-cjk-size-xxs:var(--spectrum-font-size-100); + --spectrum-heading-line-height:var(--spectrum-line-height-100); + --spectrum-heading-cjk-line-height:var(--spectrum-cjk-line-height-100); + --spectrum-heading-margin-top-multiplier:0.88888889; + --spectrum-heading-margin-bottom-multiplier:0.25; + --spectrum-heading-color:var(--spectrum-gray-900); + --spectrum-body-sans-serif-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-body-serif-font-family:var(--spectrum-serif-font-family); + --spectrum-body-cjk-font-family:var(--spectrum-cjk-font-family); + --spectrum-body-sans-serif-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-body-serif-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-serif-font-style:var(--spectrum-default-font-style); + --spectrum-body-cjk-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-body-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-body-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-body-sans-serif-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-serif-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-body-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-cjk-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-body-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-body-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-body-size-xxxl:var(--spectrum-font-size-600); + --spectrum-body-size-xxl:var(--spectrum-font-size-500); + --spectrum-body-size-xl:var(--spectrum-font-size-400); + --spectrum-body-size-l:var(--spectrum-font-size-300); + --spectrum-body-size-m:var(--spectrum-font-size-200); + --spectrum-body-size-s:var(--spectrum-font-size-100); + --spectrum-body-size-xs:var(--spectrum-font-size-75); + --spectrum-body-line-height:var(--spectrum-line-height-200); + --spectrum-body-cjk-line-height:var(--spectrum-cjk-line-height-200); + --spectrum-body-margin-multiplier:0.75; + --spectrum-body-color:var(--spectrum-gray-800); + --spectrum-detail-sans-serif-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-detail-serif-font-family:var(--spectrum-serif-font-family); + --spectrum-detail-cjk-font-family:var(--spectrum-cjk-font-family); + --spectrum-detail-sans-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-light-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-light-font-weight:var(--spectrum-light-font-weight); + --spectrum-detail-cjk-light-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-serif-light-strong-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-cjk-light-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-light-strong-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-serif-light-strong-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-detail-cjk-light-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-light-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-detail-size-xl:var(--spectrum-font-size-200); + --spectrum-detail-size-l:var(--spectrum-font-size-100); + --spectrum-detail-size-m:var(--spectrum-font-size-75); + --spectrum-detail-size-s:var(--spectrum-font-size-50); + --spectrum-detail-line-height:var(--spectrum-line-height-100); + --spectrum-detail-cjk-line-height:var(--spectrum-cjk-line-height-100); + --spectrum-detail-margin-top-multiplier:0.88888889; + --spectrum-detail-margin-bottom-multiplier:0.25; + --spectrum-detail-letter-spacing:0.06em; + --spectrum-detail-sans-serif-text-transform:uppercase; + --spectrum-detail-serif-text-transform:uppercase; + --spectrum-detail-color:var(--spectrum-gray-900); + --spectrum-code-font-family:Source Code Pro; + --spectrum-code-cjk-font-family:var(--spectrum-code-font-family); + --spectrum-code-font-weight:var(--spectrum-regular-font-weight); + --spectrum-code-font-style:var(--spectrum-default-font-style); + --spectrum-code-cjk-font-weight:var(--spectrum-regular-font-weight); + --spectrum-code-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-code-strong-font-weight:var(--spectrum-bold-font-weight); + --spectrum-code-strong-font-style:var(--spectrum-default-font-style); + --spectrum-code-cjk-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-code-emphasized-font-weight:var(--spectrum-regular-font-weight); + --spectrum-code-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-code-cjk-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-code-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-code-strong-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-code-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-code-cjk-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-code-size-xl:var(--spectrum-font-size-400); + --spectrum-code-size-l:var(--spectrum-font-size-300); + --spectrum-code-size-m:var(--spectrum-font-size-200); + --spectrum-code-size-s:var(--spectrum-font-size-100); + --spectrum-code-size-xs:var(--spectrum-font-size-75); + --spectrum-code-line-height:var(--spectrum-line-height-200); + --spectrum-code-cjk-line-height:var(--spectrum-cjk-line-height-200); + --spectrum-code-color:var(--spectrum-gray-800); +} diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css new file mode 100644 index 00000000000..232dcfb2877 --- /dev/null +++ b/tokens/dist/css/large-vars.css @@ -0,0 +1,504 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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-field-label-text-to-asterisk-small:5px; + --spectrum-field-label-text-to-asterisk-medium:5px; + --spectrum-field-label-text-to-asterisk-large:6px; + --spectrum-field-label-text-to-asterisk-extra-large:6px; + --spectrum-field-label-top-to-asterisk-small:11px; + --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-medium:5px; + --spectrum-field-label-top-margin-large:6px; + --spectrum-field-label-top-margin-extra-large:6px; + --spectrum-field-label-to-component-quiet-small:-10px; + --spectrum-field-label-to-component-quiet-medium:-10px; + --spectrum-field-label-to-component-quiet-large:-15px; + --spectrum-field-label-to-component-quiet-extra-large:-19px; + --spectrum-help-text-top-to-workflow-icon-small:5px; + --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-medium:10px; + --spectrum-status-light-dot-size-large:12px; + --spectrum-status-light-dot-size-extra-large:12px; + --spectrum-status-light-top-to-dot-small:11px; + --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-medium:5px; + --spectrum-action-button-edge-to-hold-icon-large:6px; + --spectrum-action-button-edge-to-hold-icon-extra-large:7px; + --spectrum-tooltip-tip-width:10px; + --spectrum-tooltip-tip-height:5px; + --spectrum-tooltip-maximum-width:200px; + --spectrum-progress-circle-size-small:20px; + --spectrum-progress-circle-size-medium:40px; + --spectrum-progress-circle-size-large:80px; + --spectrum-progress-circle-thickness-small:3px; + --spectrum-progress-circle-thickness-medium:4px; + --spectrum-progress-circle-thickness-large:5px; + --spectrum-toast-height:56px; + --spectrum-toast-maximum-width:420px; + --spectrum-toast-top-to-workflow-icon:17px; + --spectrum-toast-top-to-text:16px; + --spectrum-toast-bottom-to-text:19px; + --spectrum-action-bar-height:56px; + --spectrum-action-bar-top-to-item-counter:16px; + --spectrum-swatch-size-extra-small:20px; + --spectrum-swatch-size-small:30px; + --spectrum-swatch-size-medium:40px; + --spectrum-swatch-size-large:50px; + --spectrum-progress-bar-thickness-small:5px; + --spectrum-progress-bar-thickness-medium:8px; + --spectrum-progress-bar-thickness-large:10px; + --spectrum-progress-bar-thickness-extra-large:13px; + --spectrum-meter-width:240px; + --spectrum-meter-thickness-small:5px; + --spectrum-meter-thickness-large:8px; + --spectrum-tag-top-to-avatar-small:5px; + --spectrum-tag-top-to-avatar-medium:7px; + --spectrum-tag-top-to-avatar-large:11px; + --spectrum-tag-top-to-cross-icon-small:10px; + --spectrum-tag-top-to-cross-icon-medium:15px; + --spectrum-tag-top-to-cross-icon-large:19px; + --spectrum-popover-top-to-content-area:5px; + --spectrum-menu-item-edge-to-content-not-selected-small:24px; + --spectrum-menu-item-edge-to-content-not-selected-medium:42px; + --spectrum-menu-item-edge-to-content-not-selected-large:47px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large:54px; + --spectrum-menu-item-top-to-disclosure-icon-small:9px; + --spectrum-menu-item-top-to-disclosure-icon-medium:13px; + --spectrum-menu-item-top-to-disclosure-icon-large:17px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large:22px; + --spectrum-menu-item-top-to-selected-icon-small:9px; + --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-to-field-label-small:6px; + --spectrum-slider-control-to-field-label-medium:10px; + --spectrum-slider-control-to-field-label-large:14px; + --spectrum-slider-control-to-field-label-extra-large:17px; + --spectrum-picker-visual-to-disclosure-icon-small:9px; + --spectrum-picker-visual-to-disclosure-icon-medium:10px; + --spectrum-picker-visual-to-disclosure-icon-large:11px; + --spectrum-picker-visual-to-disclosure-icon-extra-large:13px; + --spectrum-text-area-minimum-width:140px; + --spectrum-text-area-minimum-height:70px; + --spectrum-combo-box-visual-to-field-button-small:9px; + --spectrum-combo-box-visual-to-field-button-medium:10px; + --spectrum-combo-box-visual-to-field-button-large:11px; + --spectrum-combo-box-visual-to-field-button-extra-large:13px; + --spectrum-thumbnail-size-50:20px; + --spectrum-thumbnail-size-75:22px; + --spectrum-thumbnail-size-100:26px; + --spectrum-thumbnail-size-200:28px; + --spectrum-thumbnail-size-300:32px; + --spectrum-thumbnail-size-400:36px; + --spectrum-thumbnail-size-500:40px; + --spectrum-thumbnail-size-600:46px; + --spectrum-thumbnail-size-700:50px; + --spectrum-thumbnail-size-800:55px; + --spectrum-thumbnail-size-900:62px; + --spectrum-thumbnail-size-1000:70px; + --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs); + --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-breadcrumbs-height-multiline:84px; + --spectrum-breadcrumbs-top-to-text:17px; + --spectrum-breadcrumbs-top-to-text-compact:16px; + --spectrum-breadcrumbs-top-to-text-multiline:15px; + --spectrum-breadcrumbs-bottom-to-text:19px; + --spectrum-breadcrumbs-bottom-to-text-compact:19px; + --spectrum-breadcrumbs-bottom-to-text-multiline:10px; + --spectrum-breadcrumbs-start-edge-to-text:9px; + --spectrum-breadcrumbs-top-text-to-bottom-text:11px; + --spectrum-breadcrumbs-top-to-separator-icon:25px; + --spectrum-breadcrumbs-top-to-separator-icon-compact:23px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline:20px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:15px; + --spectrum-breadcrumbs-top-to-truncated-menu:10px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact:5px; + --spectrum-avatar-size-50:20px; + --spectrum-avatar-size-75:22px; + --spectrum-avatar-size-100:26px; + --spectrum-avatar-size-200:28px; + --spectrum-avatar-size-300:32px; + --spectrum-avatar-size-400:36px; + --spectrum-avatar-size-500:40px; + --spectrum-avatar-size-600:46px; + --spectrum-avatar-size-700:50px; + --spectrum-alert-banner-minimum-height:64px; + --spectrum-alert-banner-width:680px; + --spectrum-alert-banner-top-to-workflow-icon:21px; + --spectrum-alert-banner-top-to-text:21px; + --spectrum-alert-banner-bottom-to-text:22px; + --spectrum-rating-indicator-width:22px; + --spectrum-rating-indicator-to-icon:5px; + --spectrum-color-area-width:240px; + --spectrum-color-area-minimum-width:80px; + --spectrum-color-area-height:240px; + --spectrum-color-area-minimum-height:80px; + --spectrum-color-wheel-width:240px; + --spectrum-color-wheel-minimum-width:219px; + --spectrum-color-slider-length:240px; + --spectrum-color-slider-minimum-length:100px; + --spectrum-illustrated-message-title-size:var(--spectrum-heading-size-s); + --spectrum-illustrated-message-cjk-title-size:var(--spectrum-heading-cjk-size-s); + --spectrum-illustrated-message-body-size:var(--spectrum-body-size-xs); + --spectrum-coach-mark-width:216px; + --spectrum-coach-mark-minimum-width:216px; + --spectrum-coach-mark-maximum-width:248px; + --spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-300); + --spectrum-coach-mark-pagination-text-to-bottom-edge:22px; + --spectrum-coach-mark-media-height:162px; + --spectrum-coach-mark-media-minimum-height:121px; + --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-regular-small:7px; + --spectrum-accordion-small-top-to-text-spacious:12px; + --spectrum-accordion-top-to-text-regular-medium:9px; + --spectrum-accordion-top-to-text-spacious-medium:14px; + --spectrum-accordion-top-to-text-compact-large:7px; + --spectrum-accordion-top-to-text-regular-large:12px; + --spectrum-accordion-top-to-text-spacious-large:14px; + --spectrum-accordion-top-to-text-compact-extra-large:7px; + --spectrum-accordion-top-to-text-regular-extra-large:12px; + --spectrum-accordion-top-to-text-spacious-extra-large:14px; + --spectrum-accordion-bottom-to-text-compact-small:4px; + --spectrum-accordion-bottom-to-text-regular-small:9px; + --spectrum-accordion-bottom-to-text-spacious-small:14px; + --spectrum-accordion-bottom-to-text-compact-medium:8px; + --spectrum-accordion-bottom-to-text-regular-medium:13px; + --spectrum-accordion-bottom-to-text-spacious-medium:18px; + --spectrum-accordion-bottom-to-text-compact-large:9px; + --spectrum-accordion-bottom-to-text-regular-large:14px; + --spectrum-accordion-bottom-to-text-spacious-large:19px; + --spectrum-accordion-bottom-to-text-compact-extra-large:10px; + --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-content-area-top-to-content:10px; + --spectrum-accordion-content-area-bottom-to-content:20px; + --spectrum-color-handle-size:20px; + --spectrum-color-handle-size-key-focus:40px; + --spectrum-table-column-header-row-top-to-text-small:10px; + --spectrum-table-column-header-row-top-to-text-medium:9px; + --spectrum-table-column-header-row-top-to-text-large:13px; + --spectrum-table-column-header-row-top-to-text-extra-large:16px; + --spectrum-table-column-header-row-bottom-to-text-small:11px; + --spectrum-table-column-header-row-bottom-to-text-medium:10px; + --spectrum-table-column-header-row-bottom-to-text-large:13px; + --spectrum-table-column-header-row-bottom-to-text-extra-large:17px; + --spectrum-table-row-height-small-regular:40px; + --spectrum-table-row-height-medium-regular:50px; + --spectrum-table-row-height-large-regular:60px; + --spectrum-table-row-height-extra-large-regular:70px; + --spectrum-table-row-height-small-spacious:50px; + --spectrum-table-row-height-medium-spacious:60px; + --spectrum-table-row-height-large-spacious:70px; + --spectrum-table-row-height-extra-large-spacious:80px; + --spectrum-table-row-top-to-text-small-regular:10px; + --spectrum-table-row-top-to-text-medium-regular:14px; + --spectrum-table-row-top-to-text-large-regular:18px; + --spectrum-table-row-top-to-text-extra-large-regular:21px; + --spectrum-table-row-bottom-to-text-small-regular:11px; + --spectrum-table-row-bottom-to-text-medium-regular:15px; + --spectrum-table-row-bottom-to-text-large-regular:18px; + --spectrum-table-row-bottom-to-text-extra-large-regular:22px; + --spectrum-table-row-top-to-text-small-spacious:15px; + --spectrum-table-row-top-to-text-medium-spacious:18px; + --spectrum-table-row-top-to-text-large-spacious:23px; + --spectrum-table-row-top-to-text-extra-large-spacious:26px; + --spectrum-table-row-bottom-to-text-small-spacious:16px; + --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-checkbox-to-text:30px; + --spectrum-table-header-row-checkbox-to-top-small:14px; + --spectrum-table-header-row-checkbox-to-top-medium:13px; + --spectrum-table-header-row-checkbox-to-top-large:17px; + --spectrum-table-header-row-checkbox-to-top-extra-large:21px; + --spectrum-table-row-checkbox-to-top-small-compact:9px; + --spectrum-table-row-checkbox-to-top-small-regular:14px; + --spectrum-table-row-checkbox-to-top-small-spacious:19px; + --spectrum-table-row-checkbox-to-top-medium-compact:13px; + --spectrum-table-row-checkbox-to-top-medium-regular:18px; + --spectrum-table-row-checkbox-to-top-medium-spacious:23px; + --spectrum-table-row-checkbox-to-top-large-compact:17px; + --spectrum-table-row-checkbox-to-top-large-regular:22px; + --spectrum-table-row-checkbox-to-top-large-spacious:27px; + --spectrum-table-row-checkbox-to-top-extra-large-compact:21px; + --spectrum-table-row-checkbox-to-top-extra-large-regular:26px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious:31px; + --spectrum-table-section-header-row-height-small:30px; + --spectrum-table-section-header-row-height-medium:40px; + --spectrum-table-section-header-row-height-large:50px; + --spectrum-table-section-header-row-height-extra-large:60px; + --spectrum-table-thumbnail-to-top-minimum-small-compact:5px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact:6px; + --spectrum-table-thumbnail-to-top-minimum-large-compact:9px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact:10px; + --spectrum-table-thumbnail-to-top-minimum-small-regular:6px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular:9px; + --spectrum-table-thumbnail-to-top-minimum-large-regular:10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular:10px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious:9px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious:10px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious:10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:12px; + --spectrum-tab-item-to-tab-item-horizontal-small:27px; + --spectrum-tab-item-to-tab-item-horizontal-medium:30px; + --spectrum-tab-item-to-tab-item-horizontal-large:33px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large:36px; + --spectrum-tab-item-to-tab-item-vertical-small:5px; + --spectrum-tab-item-to-tab-item-vertical-medium:5px; + --spectrum-tab-item-to-tab-item-vertical-large:6px; + --spectrum-tab-item-to-tab-item-vertical-extra-large:6px; + --spectrum-tab-item-start-to-edge-small:13px; + --spectrum-tab-item-start-to-edge-medium:15px; + --spectrum-tab-item-start-to-edge-large:17px; + --spectrum-tab-item-start-to-edge-extra-large:19px; + --spectrum-tab-item-top-to-text-small:14px; + --spectrum-tab-item-bottom-to-text-small:15px; + --spectrum-tab-item-top-to-text-medium:18px; + --spectrum-tab-item-bottom-to-text-medium:19px; + --spectrum-tab-item-top-to-text-large:22px; + --spectrum-tab-item-bottom-to-text-large:22px; + --spectrum-tab-item-top-to-text-extra-large:25px; + --spectrum-tab-item-bottom-to-text-extra-large:25px; + --spectrum-tab-item-top-to-text-compact-small:5px; + --spectrum-tab-item-bottom-to-text-compact-small:6px; + --spectrum-tab-item-top-to-text-compact-medium:9px; + --spectrum-tab-item-bottom-to-text-compact-medium:10px; + --spectrum-tab-item-top-to-text-compact-large:12px; + --spectrum-tab-item-bottom-to-text-compact-large:14px; + --spectrum-tab-item-top-to-text-compact-extra-large:15px; + --spectrum-tab-item-bottom-to-text-compact-extra-large:17px; + --spectrum-tab-item-top-to-workflow-icon-small:15px; + --spectrum-tab-item-top-to-workflow-icon-medium:19px; + --spectrum-tab-item-top-to-workflow-icon-large:23px; + --spectrum-tab-item-top-to-workflow-icon-extra-large:26px; + --spectrum-tab-item-top-to-workflow-icon-compact-small:5px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium:9px; + --spectrum-tab-item-top-to-workflow-icon-compact-large:13px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large:16px; + --spectrum-tab-item-focus-indicator-gap-small:9px; + --spectrum-tab-item-focus-indicator-gap-medium:10px; + --spectrum-tab-item-focus-indicator-gap-large:11px; + --spectrum-tab-item-focus-indicator-gap-extra-large:12px; + --spectrum-side-navigation-width:240px; + --spectrum-side-navigation-minimum-width:200px; + --spectrum-side-navigation-maximum-width:300px; + --spectrum-side-navigation-second-level-edge-to-text:30px; + --spectrum-side-navigation-third-level-edge-to-text:45px; + --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-bottom-to-text:10px; + --spectrum-tray-top-to-content-area:5px; + --spectrum-accordion-top-to-text-spacious-small:12px; + --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-text-to-control-75:11px; + --spectrum-text-to-control-100:13px; + --spectrum-text-to-control-200:14px; + --spectrum-text-to-control-300:16px; + --spectrum-component-height-50:26px; + --spectrum-component-height-75:30px; + --spectrum-component-height-100:40px; + --spectrum-component-height-200:50px; + --spectrum-component-height-300:60px; + --spectrum-component-height-400:70px; + --spectrum-component-height-500:80px; + --spectrum-component-pill-edge-to-visual-75:13px; + --spectrum-component-pill-edge-to-visual-100:17px; + --spectrum-component-pill-edge-to-visual-200:22px; + --spectrum-component-pill-edge-to-visual-300:27px; + --spectrum-component-pill-edge-to-visual-only-75:5px; + --spectrum-component-pill-edge-to-visual-only-100:9px; + --spectrum-component-pill-edge-to-visual-only-200:13px; + --spectrum-component-pill-edge-to-visual-only-300:16px; + --spectrum-component-pill-edge-to-text-75:15px; + --spectrum-component-pill-edge-to-text-100:20px; + --spectrum-component-pill-edge-to-text-200:25px; + --spectrum-component-pill-edge-to-text-300:30px; + --spectrum-component-edge-to-visual-50:7px; + --spectrum-component-edge-to-visual-75:9px; + --spectrum-component-edge-to-visual-100:12px; + --spectrum-component-edge-to-visual-200:16px; + --spectrum-component-edge-to-visual-300:19px; + --spectrum-component-edge-to-visual-only-50:4px; + --spectrum-component-edge-to-visual-only-75:5px; + --spectrum-component-edge-to-visual-only-100:9px; + --spectrum-component-edge-to-visual-only-200:13px; + --spectrum-component-edge-to-visual-only-300:16px; + --spectrum-component-edge-to-text-50:10px; + --spectrum-component-edge-to-text-75:11px; + --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-text-50:4px; + --spectrum-component-top-to-text-75:5px; + --spectrum-component-top-to-text-100:8px; + --spectrum-component-top-to-text-200:12px; + --spectrum-component-top-to-text-300:15px; + --spectrum-component-bottom-to-text-50:6px; + --spectrum-component-bottom-to-text-75:6px; + --spectrum-component-bottom-to-text-100:11px; + --spectrum-component-bottom-to-text-200:14px; + --spectrum-component-bottom-to-text-300:18px; + --spectrum-component-to-menu-small:7px; + --spectrum-component-to-menu-medium:8px; + --spectrum-component-to-menu-large:9px; + --spectrum-component-to-menu-extra-large:10px; + --spectrum-field-edge-to-disclosure-icon-75:9px; + --spectrum-field-edge-to-disclosure-icon-100:13px; + --spectrum-field-edge-to-disclosure-icon-200:17px; + --spectrum-field-edge-to-disclosure-icon-300:22px; + --spectrum-field-end-edge-to-disclosure-icon-75:9px; + --spectrum-field-end-edge-to-disclosure-icon-100:13px; + --spectrum-field-end-edge-to-disclosure-icon-200:17px; + --spectrum-field-end-edge-to-disclosure-icon-300:22px; + --spectrum-field-top-to-disclosure-icon-75:9px; + --spectrum-field-top-to-disclosure-icon-100:13px; + --spectrum-field-top-to-disclosure-icon-200:17px; + --spectrum-field-top-to-disclosure-icon-300:22px; + --spectrum-field-top-to-alert-icon-small:5px; + --spectrum-field-top-to-alert-icon-medium:9px; + --spectrum-field-top-to-alert-icon-large:13px; + --spectrum-field-top-to-alert-icon-extra-large:16px; + --spectrum-field-top-to-validation-icon-small:9px; + --spectrum-field-top-to-validation-icon-medium:13px; + --spectrum-field-top-to-validation-icon-large:17px; + --spectrum-field-top-to-validation-icon-extra-large:22px; + --spectrum-field-top-to-progress-circle-small:7px; + --spectrum-field-top-to-progress-circle-medium:12px; + --spectrum-field-top-to-progress-circle-large:17px; + --spectrum-field-top-to-progress-circle-extra-large:22px; + --spectrum-field-edge-to-alert-icon-small:11px; + --spectrum-field-edge-to-alert-icon-medium:15px; + --spectrum-field-edge-to-alert-icon-large:19px; + --spectrum-field-edge-to-alert-icon-extra-large:22px; + --spectrum-field-edge-to-validation-icon-small:11px; + --spectrum-field-edge-to-validation-icon-medium:15px; + --spectrum-field-edge-to-validation-icon-large:19px; + --spectrum-field-edge-to-validation-icon-extra-large:22px; + --spectrum-field-text-to-alert-icon-small:10px; + --spectrum-field-text-to-alert-icon-medium:15px; + --spectrum-field-text-to-alert-icon-large:19px; + --spectrum-field-text-to-alert-icon-extra-large:22px; + --spectrum-field-text-to-validation-icon-small:10px; + --spectrum-field-text-to-validation-icon-medium:15px; + --spectrum-field-text-to-validation-icon-large:19px; + --spectrum-field-text-to-validation-icon-extra-large:22px; + --spectrum-field-width:240px; + --spectrum-character-count-to-field-quiet-small:-4px; + --spectrum-character-count-to-field-quiet-medium:-4px; + --spectrum-character-count-to-field-quiet-large:-4px; + --spectrum-character-count-to-field-quiet-extra-large:-5px; + --spectrum-side-label-character-count-to-field:15px; + --spectrum-side-label-character-count-top-margin-small:5px; + --spectrum-side-label-character-count-top-margin-medium:10px; + --spectrum-side-label-character-count-top-margin-large:14px; + --spectrum-side-label-character-count-top-margin-extra-large:18px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small:9px; + --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-color-control-track-width:30px; + --spectrum-font-size-50:13px; + --spectrum-font-size-75:15px; + --spectrum-font-size-100:17px; + --spectrum-font-size-200:19px; + --spectrum-font-size-300:22px; + --spectrum-font-size-400:24px; + --spectrum-font-size-500:27px; + --spectrum-font-size-600:31px; + --spectrum-font-size-700:34px; + --spectrum-font-size-800:39px; + --spectrum-font-size-900:44px; + --spectrum-font-size-1000:49px; + --spectrum-font-size-1100:55px; + --spectrum-font-size-1200:62px; + --spectrum-font-size-1300:70px; +} diff --git a/tokens/dist/css/light-vars.css b/tokens/dist/css/light-vars.css new file mode 100644 index 00000000000..5411d477c5f --- /dev/null +++ b/tokens/dist/css/light-vars.css @@ -0,0 +1,472 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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-neutral-subdued-background-color-down:var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-700); + --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-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-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-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-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); + --spectrum-yellow-background-color-default:var(--spectrum-yellow-400); + --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-500); + --spectrum-celery-background-color-default:var(--spectrum-celery-600); + --spectrum-green-background-color-default:var(--spectrum-green-900); + --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-900); + --spectrum-cyan-background-color-default:var(--spectrum-cyan-900); + --spectrum-blue-background-color-default:var(--spectrum-blue-900); + --spectrum-indigo-background-color-default:var(--spectrum-indigo-900); + --spectrum-purple-background-color-default:var(--spectrum-purple-900); + --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-900); + --spectrum-magenta-background-color-default:var(--spectrum-magenta-900); + --spectrum-neutral-visual-color:var(--spectrum-gray-500); + --spectrum-accent-visual-color:var(--spectrum-accent-color-800); + --spectrum-informative-visual-color:var(--spectrum-informative-color-800); + --spectrum-negative-visual-color:var(--spectrum-negative-color-800); + --spectrum-notice-visual-color:var(--spectrum-notice-color-700); + --spectrum-positive-visual-color:var(--spectrum-positive-color-700); + --spectrum-gray-visual-color:var(--spectrum-gray-500); + --spectrum-red-visual-color:var(--spectrum-red-800); + --spectrum-orange-visual-color:var(--spectrum-orange-700); + --spectrum-yellow-visual-color:var(--spectrum-yellow-600); + --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-600); + --spectrum-celery-visual-color:var(--spectrum-celery-700); + --spectrum-green-visual-color:var(--spectrum-green-700); + --spectrum-seafoam-visual-color:var(--spectrum-seafoam-700); + --spectrum-cyan-visual-color:var(--spectrum-cyan-600); + --spectrum-blue-visual-color:var(--spectrum-blue-800); + --spectrum-indigo-visual-color:var(--spectrum-indigo-800); + --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-opacity-checkerboard-square-dark:var(--spectrum-gray-200); + --spectrum-gray-50-rgb:255, 255, 255; + --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb:253, 253, 253; + --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb:248, 248, 248; + --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb:230, 230, 230; + --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb:213, 213, 213; + --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb:177, 177, 177; + --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:109, 109, 109; + --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb:70, 70, 70; + --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb:34, 34, 34; + --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb:0, 0, 0; + --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb:224, 242, 255; + --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb:202, 232, 255; + --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb:181, 222, 255; + --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb:150, 206, 253; + --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb:120, 187, 250; + --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb:89, 167, 246; + --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb:56, 146, 243; + --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb:20, 122, 243; + --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb:2, 101, 220; + --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb:0, 84, 182; + --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb:0, 68, 145; + --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb:0, 53, 113; + --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb:0, 39, 84; + --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb:0, 28, 60; + --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb:255, 235, 231; + --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb:255, 221, 214; + --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb:255, 205, 195; + --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb:255, 183, 169; + --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb:255, 155, 136; + --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb:255, 124, 101; + --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb:247, 92, 70; + --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb:234, 56, 41; + --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb:211, 21, 16; + --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb:180, 0, 0; + --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb:147, 0, 0; + --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb:116, 0, 0; + --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb:89, 0, 0; + --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb:67, 0, 0; + --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb:255, 236, 204; + --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb:255, 223, 173; + --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb:253, 210, 145; + --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb:255, 187, 99; + --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb:255, 160, 55; + --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb:246, 133, 17; + --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb:228, 111, 0; + --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb:203, 93, 0; + --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb:177, 76, 0; + --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb:149, 61, 0; + --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb:122, 47, 0; + --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb:97, 35, 0; + --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb:73, 25, 1; + --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb:53, 18, 1; + --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb:251, 241, 152; + --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb:248, 231, 80; + --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb:248, 217, 4; + --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb:232, 198, 0; + --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb:215, 179, 0; + --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb:196, 159, 0; + --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb:176, 140, 0; + --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb:155, 120, 0; + --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb:133, 102, 0; + --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb:112, 83, 0; + --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb:91, 67, 0; + --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb:72, 51, 0; + --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb:54, 37, 0; + --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb:40, 26, 0; + --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb:219, 252, 110; + --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb:203, 244, 67; + --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb:188, 233, 42; + --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb:170, 216, 22; + --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb:152, 197, 10; + --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb:135, 177, 3; + --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb:118, 156, 0; + --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb:103, 136, 0; + --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb:87, 116, 0; + --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb:72, 96, 0; + --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb:58, 77, 0; + --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb:44, 59, 0; + --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb:33, 44, 0; + --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb:24, 31, 0; + --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb:205, 252, 191; + --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb:174, 246, 157; + --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb:150, 238, 133; + --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb:114, 224, 106; + --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb:78, 207, 80; + --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb:39, 187, 54; + --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb:7, 167, 33; + --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb:0, 145, 18; + --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb:0, 124, 15; + --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb:0, 103, 15; + --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb:0, 83, 13; + --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb:0, 64, 10; + --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb:0, 48, 7; + --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb:0, 34, 5; + --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb:206, 248, 224; + --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb:173, 244, 206; + --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb:137, 236, 188; + --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb:103, 222, 168; + --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb:73, 204, 147; + --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb:47, 184, 128; + --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb:21, 164, 110; + --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb:0, 143, 93; + --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb:0, 122, 77; + --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb:0, 101, 62; + --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb:0, 81, 50; + --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb:5, 63, 39; + --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb:10, 46, 29; + --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb:10, 32, 21; + --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb:206, 247, 243; + --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb:170, 241, 234; + --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb:140, 233, 226; + --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb:101, 218, 210; + --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb:63, 201, 193; + --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb:15, 181, 174; + --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb:0, 161, 154; + --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb:0, 140, 135; + --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb:0, 119, 114; + --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb:0, 99, 95; + --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb:12, 79, 76; + --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb:18, 60, 58; + --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb:18, 44, 43; + --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb:15, 31, 30; + --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb:197, 248, 255; + --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb:164, 240, 255; + --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb:136, 231, 250; + --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb:96, 216, 243; + --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb:51, 197, 232; + --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb:18, 176, 218; + --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb:1, 156, 200; + --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb:0, 134, 180; + --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb:0, 113, 159; + --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb:0, 93, 137; + --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb:0, 74, 115; + --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb:0, 57, 93; + --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb:0, 42, 70; + --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb:0, 30, 51; + --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb:237, 238, 255; + --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb:224, 226, 255; + --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb:211, 213, 255; + --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb:193, 196, 255; + --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb:172, 175, 255; + --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb:149, 153, 255; + --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb:126, 132, 252; + --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb:104, 109, 244; + --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb:82, 88, 228; + --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb:64, 70, 202; + --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb:50, 54, 168; + --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb:38, 41, 134; + --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb:27, 30, 100; + --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb:20, 22, 72; + --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb:246, 235, 255; + --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb:238, 221, 255; + --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb:230, 208, 255; + --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb:219, 187, 254; + --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb:204, 164, 253; + --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb:189, 139, 252; + --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb:174, 114, 249; + --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb:157, 87, 244; + --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb:137, 61, 231; + --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb:115, 38, 211; + --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb:93, 19, 183; + --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb:71, 12, 148; + --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb:51, 16, 106; + --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb:35, 15, 73; + --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb:255, 233, 252; + --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb:255, 218, 250; + --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb:254, 199, 248; + --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb:251, 174, 246; + --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb:245, 146, 243; + --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb:237, 116, 237; + --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb:224, 85, 226; + --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb:205, 58, 206; + --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb:182, 34, 183; + --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb:157, 3, 158; + --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb:128, 0, 129; + --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb:100, 6, 100; + --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb:71, 14, 70; + --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb:50, 13, 49; + --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb:255, 234, 241; + --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb:255, 220, 232; + --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb:255, 202, 221; + --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb:255, 178, 206; + --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb:255, 149, 189; + --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb:250, 119, 170; + --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb:239, 90, 152; + --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb:222, 61, 130; + --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb:200, 34, 105; + --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb:173, 9, 85; + --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb:142, 0, 69; + --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb:112, 0, 55; + --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb:84, 3, 42; + --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb:60, 6, 29; + --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-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); + --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-400); +} diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css new file mode 100644 index 00000000000..9756afa3545 --- /dev/null +++ b/tokens/dist/css/medium-vars.css @@ -0,0 +1,504 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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-field-label-text-to-asterisk-small:4px; + --spectrum-field-label-text-to-asterisk-medium:4px; + --spectrum-field-label-text-to-asterisk-large:5px; + --spectrum-field-label-text-to-asterisk-extra-large:5px; + --spectrum-field-label-top-to-asterisk-small:8px; + --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-medium:4px; + --spectrum-field-label-top-margin-large:5px; + --spectrum-field-label-top-margin-extra-large:5px; + --spectrum-field-label-to-component-quiet-small:-8px; + --spectrum-field-label-to-component-quiet-medium:-8px; + --spectrum-field-label-to-component-quiet-large:-12px; + --spectrum-field-label-to-component-quiet-extra-large:-15px; + --spectrum-help-text-top-to-workflow-icon-small:4px; + --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-medium:8px; + --spectrum-status-light-dot-size-large:10px; + --spectrum-status-light-dot-size-extra-large:10px; + --spectrum-status-light-top-to-dot-small:8px; + --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-medium:4px; + --spectrum-action-button-edge-to-hold-icon-large:5px; + --spectrum-action-button-edge-to-hold-icon-extra-large:6px; + --spectrum-tooltip-tip-width:8px; + --spectrum-tooltip-tip-height:4px; + --spectrum-tooltip-maximum-width:160px; + --spectrum-progress-circle-size-small:16px; + --spectrum-progress-circle-size-medium:32px; + --spectrum-progress-circle-size-large:64px; + --spectrum-progress-circle-thickness-small:2px; + --spectrum-progress-circle-thickness-medium:3px; + --spectrum-progress-circle-thickness-large:4px; + --spectrum-toast-height:48px; + --spectrum-toast-maximum-width:336px; + --spectrum-toast-top-to-workflow-icon:15px; + --spectrum-toast-top-to-text:14px; + --spectrum-toast-bottom-to-text:17px; + --spectrum-action-bar-height:48px; + --spectrum-action-bar-top-to-item-counter:14px; + --spectrum-swatch-size-extra-small:16px; + --spectrum-swatch-size-small:24px; + --spectrum-swatch-size-medium:32px; + --spectrum-swatch-size-large:40px; + --spectrum-progress-bar-thickness-small:4px; + --spectrum-progress-bar-thickness-medium:6px; + --spectrum-progress-bar-thickness-large:8px; + --spectrum-progress-bar-thickness-extra-large:10px; + --spectrum-meter-width:192px; + --spectrum-meter-thickness-small:4px; + --spectrum-meter-thickness-large:6px; + --spectrum-tag-top-to-avatar-small:4px; + --spectrum-tag-top-to-avatar-medium:6px; + --spectrum-tag-top-to-avatar-large:9px; + --spectrum-tag-top-to-cross-icon-small:8px; + --spectrum-tag-top-to-cross-icon-medium:12px; + --spectrum-tag-top-to-cross-icon-large:15px; + --spectrum-popover-top-to-content-area:4px; + --spectrum-menu-item-edge-to-content-not-selected-small:28px; + --spectrum-menu-item-edge-to-content-not-selected-medium:32px; + --spectrum-menu-item-edge-to-content-not-selected-large:38px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large:45px; + --spectrum-menu-item-top-to-disclosure-icon-small:7px; + --spectrum-menu-item-top-to-disclosure-icon-medium:11px; + --spectrum-menu-item-top-to-disclosure-icon-large:14px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large:17px; + --spectrum-menu-item-top-to-selected-icon-small:7px; + --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-to-field-label-small:5px; + --spectrum-slider-control-to-field-label-medium:8px; + --spectrum-slider-control-to-field-label-large:11px; + --spectrum-slider-control-to-field-label-extra-large:14px; + --spectrum-picker-visual-to-disclosure-icon-small:7px; + --spectrum-picker-visual-to-disclosure-icon-medium:8px; + --spectrum-picker-visual-to-disclosure-icon-large:9px; + --spectrum-picker-visual-to-disclosure-icon-extra-large:10px; + --spectrum-text-area-minimum-width:112px; + --spectrum-text-area-minimum-height:56px; + --spectrum-combo-box-visual-to-field-button-small:7px; + --spectrum-combo-box-visual-to-field-button-medium:8px; + --spectrum-combo-box-visual-to-field-button-large:9px; + --spectrum-combo-box-visual-to-field-button-extra-large:10px; + --spectrum-thumbnail-size-50:16px; + --spectrum-thumbnail-size-75:18px; + --spectrum-thumbnail-size-100:20px; + --spectrum-thumbnail-size-200:22px; + --spectrum-thumbnail-size-300:26px; + --spectrum-thumbnail-size-400:28px; + --spectrum-thumbnail-size-500:32px; + --spectrum-thumbnail-size-600:36px; + --spectrum-thumbnail-size-700:40px; + --spectrum-thumbnail-size-800:44px; + --spectrum-thumbnail-size-900:50px; + --spectrum-thumbnail-size-1000:56px; + --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-s); + --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-breadcrumbs-height-multiline:72px; + --spectrum-breadcrumbs-top-to-text:13px; + --spectrum-breadcrumbs-top-to-text-compact:11px; + --spectrum-breadcrumbs-top-to-text-multiline:12px; + --spectrum-breadcrumbs-bottom-to-text:15px; + --spectrum-breadcrumbs-bottom-to-text-compact:12px; + --spectrum-breadcrumbs-bottom-to-text-multiline:9px; + --spectrum-breadcrumbs-start-edge-to-text:8px; + --spectrum-breadcrumbs-top-text-to-bottom-text:9px; + --spectrum-breadcrumbs-top-to-separator-icon:19px; + --spectrum-breadcrumbs-top-to-separator-icon-compact:15px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline:15px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline:11px; + --spectrum-breadcrumbs-top-to-truncated-menu:8px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact:4px; + --spectrum-avatar-size-50:16px; + --spectrum-avatar-size-75:18px; + --spectrum-avatar-size-100:20px; + --spectrum-avatar-size-200:22px; + --spectrum-avatar-size-300:26px; + --spectrum-avatar-size-400:28px; + --spectrum-avatar-size-500:32px; + --spectrum-avatar-size-600:36px; + --spectrum-avatar-size-700:40px; + --spectrum-alert-banner-minimum-height:48px; + --spectrum-alert-banner-width:832px; + --spectrum-alert-banner-top-to-workflow-icon:15px; + --spectrum-alert-banner-top-to-text:14px; + --spectrum-alert-banner-bottom-to-text:17px; + --spectrum-rating-indicator-width:18px; + --spectrum-rating-indicator-to-icon:4px; + --spectrum-color-area-width:192px; + --spectrum-color-area-minimum-width:64px; + --spectrum-color-area-height:192px; + --spectrum-color-area-minimum-height:64px; + --spectrum-color-wheel-width:192px; + --spectrum-color-wheel-minimum-width:175px; + --spectrum-color-slider-length:192px; + --spectrum-color-slider-minimum-length:80px; + --spectrum-illustrated-message-title-size:var(--spectrum-heading-size-m); + --spectrum-illustrated-message-cjk-title-size:var(--spectrum-heading-cjk-size-m); + --spectrum-illustrated-message-body-size:var(--spectrum-body-size-s); + --spectrum-coach-mark-width:296px; + --spectrum-coach-mark-minimum-width:296px; + --spectrum-coach-mark-maximum-width:380px; + --spectrum-coach-mark-edge-to-content:var(--spectrum-spacing-400); + --spectrum-coach-mark-pagination-text-to-bottom-edge:33px; + --spectrum-coach-mark-media-height:222px; + --spectrum-coach-mark-media-minimum-height:166px; + --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-regular-small:5px; + --spectrum-accordion-small-top-to-text-spacious:9px; + --spectrum-accordion-top-to-text-regular-medium:8px; + --spectrum-accordion-top-to-text-spacious-medium:12px; + --spectrum-accordion-top-to-text-compact-large:4px; + --spectrum-accordion-top-to-text-regular-large:9px; + --spectrum-accordion-top-to-text-spacious-large:12px; + --spectrum-accordion-top-to-text-compact-extra-large:5px; + --spectrum-accordion-top-to-text-regular-extra-large:9px; + --spectrum-accordion-top-to-text-spacious-extra-large:13px; + --spectrum-accordion-bottom-to-text-compact-small:2px; + --spectrum-accordion-bottom-to-text-regular-small:7px; + --spectrum-accordion-bottom-to-text-spacious-small:11px; + --spectrum-accordion-bottom-to-text-compact-medium:5px; + --spectrum-accordion-bottom-to-text-regular-medium:9px; + --spectrum-accordion-bottom-to-text-spacious-medium:13px; + --spectrum-accordion-bottom-to-text-compact-large:8px; + --spectrum-accordion-bottom-to-text-regular-large:11px; + --spectrum-accordion-bottom-to-text-spacious-large:16px; + --spectrum-accordion-bottom-to-text-compact-extra-large:8px; + --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-content-area-top-to-content:8px; + --spectrum-accordion-content-area-bottom-to-content:16px; + --spectrum-color-handle-size:16px; + --spectrum-color-handle-size-key-focus:32px; + --spectrum-table-column-header-row-top-to-text-small:8px; + --spectrum-table-column-header-row-top-to-text-medium:7px; + --spectrum-table-column-header-row-top-to-text-large:10px; + --spectrum-table-column-header-row-top-to-text-extra-large:13px; + --spectrum-table-column-header-row-bottom-to-text-small:9px; + --spectrum-table-column-header-row-bottom-to-text-medium:8px; + --spectrum-table-column-header-row-bottom-to-text-large:10px; + --spectrum-table-column-header-row-bottom-to-text-extra-large:13px; + --spectrum-table-row-height-small-regular:32px; + --spectrum-table-row-height-medium-regular:40px; + --spectrum-table-row-height-large-regular:48px; + --spectrum-table-row-height-extra-large-regular:56px; + --spectrum-table-row-height-small-spacious:40px; + --spectrum-table-row-height-medium-spacious:48px; + --spectrum-table-row-height-large-spacious:56px; + --spectrum-table-row-height-extra-large-spacious:64px; + --spectrum-table-row-top-to-text-small-regular:8px; + --spectrum-table-row-top-to-text-medium-regular:11px; + --spectrum-table-row-top-to-text-large-regular:14px; + --spectrum-table-row-top-to-text-extra-large-regular:17px; + --spectrum-table-row-bottom-to-text-small-regular:9px; + --spectrum-table-row-bottom-to-text-medium-regular:12px; + --spectrum-table-row-bottom-to-text-large-regular:14px; + --spectrum-table-row-bottom-to-text-extra-large-regular:17px; + --spectrum-table-row-top-to-text-small-spacious:12px; + --spectrum-table-row-top-to-text-medium-spacious:15px; + --spectrum-table-row-top-to-text-large-spacious:18px; + --spectrum-table-row-top-to-text-extra-large-spacious:21px; + --spectrum-table-row-bottom-to-text-small-spacious:13px; + --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-checkbox-to-text:24px; + --spectrum-table-header-row-checkbox-to-top-small:10px; + --spectrum-table-header-row-checkbox-to-top-medium:9px; + --spectrum-table-header-row-checkbox-to-top-large:12px; + --spectrum-table-header-row-checkbox-to-top-extra-large:15px; + --spectrum-table-row-checkbox-to-top-small-compact:6px; + --spectrum-table-row-checkbox-to-top-small-regular:10px; + --spectrum-table-row-checkbox-to-top-small-spacious:14px; + --spectrum-table-row-checkbox-to-top-medium-compact:9px; + --spectrum-table-row-checkbox-to-top-medium-regular:13px; + --spectrum-table-row-checkbox-to-top-medium-spacious:17px; + --spectrum-table-row-checkbox-to-top-large-compact:12px; + --spectrum-table-row-checkbox-to-top-large-regular:16px; + --spectrum-table-row-checkbox-to-top-large-spacious:20px; + --spectrum-table-row-checkbox-to-top-extra-large-compact:15px; + --spectrum-table-row-checkbox-to-top-extra-large-regular:19px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious:23px; + --spectrum-table-section-header-row-height-small:24px; + --spectrum-table-section-header-row-height-medium:32px; + --spectrum-table-section-header-row-height-large:40px; + --spectrum-table-section-header-row-height-extra-large:48px; + --spectrum-table-thumbnail-to-top-minimum-small-compact:4px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact:5px; + --spectrum-table-thumbnail-to-top-minimum-large-compact:7px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact:8px; + --spectrum-table-thumbnail-to-top-minimum-small-regular:5px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular:7px; + --spectrum-table-thumbnail-to-top-minimum-large-regular:8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular:8px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious:7px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious:8px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious:8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious:10px; + --spectrum-tab-item-to-tab-item-horizontal-small:21px; + --spectrum-tab-item-to-tab-item-horizontal-medium:24px; + --spectrum-tab-item-to-tab-item-horizontal-large:27px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large:30px; + --spectrum-tab-item-to-tab-item-vertical-small:4px; + --spectrum-tab-item-to-tab-item-vertical-medium:4px; + --spectrum-tab-item-to-tab-item-vertical-large:5px; + --spectrum-tab-item-to-tab-item-vertical-extra-large:5px; + --spectrum-tab-item-start-to-edge-small:12px; + --spectrum-tab-item-start-to-edge-medium:12px; + --spectrum-tab-item-start-to-edge-large:13px; + --spectrum-tab-item-start-to-edge-extra-large:13px; + --spectrum-tab-item-top-to-text-small:11px; + --spectrum-tab-item-bottom-to-text-small:12px; + --spectrum-tab-item-top-to-text-medium:14px; + --spectrum-tab-item-bottom-to-text-medium:14px; + --spectrum-tab-item-top-to-text-large:16px; + --spectrum-tab-item-bottom-to-text-large:18px; + --spectrum-tab-item-top-to-text-extra-large:19px; + --spectrum-tab-item-bottom-to-text-extra-large:20px; + --spectrum-tab-item-top-to-text-compact-small:4px; + --spectrum-tab-item-bottom-to-text-compact-small:5px; + --spectrum-tab-item-top-to-text-compact-medium:6px; + --spectrum-tab-item-bottom-to-text-compact-medium:8px; + --spectrum-tab-item-top-to-text-compact-large:10px; + --spectrum-tab-item-bottom-to-text-compact-large:12px; + --spectrum-tab-item-top-to-text-compact-extra-large:12px; + --spectrum-tab-item-bottom-to-text-compact-extra-large:13px; + --spectrum-tab-item-top-to-workflow-icon-small:13px; + --spectrum-tab-item-top-to-workflow-icon-medium:15px; + --spectrum-tab-item-top-to-workflow-icon-large:17px; + --spectrum-tab-item-top-to-workflow-icon-extra-large:19px; + --spectrum-tab-item-top-to-workflow-icon-compact-small:3px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium:7px; + --spectrum-tab-item-top-to-workflow-icon-compact-large:9px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large:11px; + --spectrum-tab-item-focus-indicator-gap-small:7px; + --spectrum-tab-item-focus-indicator-gap-medium:8px; + --spectrum-tab-item-focus-indicator-gap-large:9px; + --spectrum-tab-item-focus-indicator-gap-extra-large:10px; + --spectrum-side-navigation-width:192px; + --spectrum-side-navigation-minimum-width:160px; + --spectrum-side-navigation-maximum-width:240px; + --spectrum-side-navigation-second-level-edge-to-text:24px; + --spectrum-side-navigation-third-level-edge-to-text:36px; + --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-bottom-to-text:8px; + --spectrum-tray-top-to-content-area:4px; + --spectrum-accordion-top-to-text-spacious-small:9px; + --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-text-to-control-75:9px; + --spectrum-text-to-control-100:10px; + --spectrum-text-to-control-200:11px; + --spectrum-text-to-control-300:13px; + --spectrum-component-height-50:20px; + --spectrum-component-height-75:24px; + --spectrum-component-height-100:32px; + --spectrum-component-height-200:40px; + --spectrum-component-height-300:48px; + --spectrum-component-height-400:56px; + --spectrum-component-height-500:64px; + --spectrum-component-pill-edge-to-visual-75:10px; + --spectrum-component-pill-edge-to-visual-100:14px; + --spectrum-component-pill-edge-to-visual-200:18px; + --spectrum-component-pill-edge-to-visual-300:21px; + --spectrum-component-pill-edge-to-visual-only-75:4px; + --spectrum-component-pill-edge-to-visual-only-100:7px; + --spectrum-component-pill-edge-to-visual-only-200:10px; + --spectrum-component-pill-edge-to-visual-only-300:13px; + --spectrum-component-pill-edge-to-text-75:12px; + --spectrum-component-pill-edge-to-text-100:16px; + --spectrum-component-pill-edge-to-text-200:20px; + --spectrum-component-pill-edge-to-text-300:24px; + --spectrum-component-edge-to-visual-50:6px; + --spectrum-component-edge-to-visual-75:7px; + --spectrum-component-edge-to-visual-100:10px; + --spectrum-component-edge-to-visual-200:13px; + --spectrum-component-edge-to-visual-300:15px; + --spectrum-component-edge-to-visual-only-50:3px; + --spectrum-component-edge-to-visual-only-75:4px; + --spectrum-component-edge-to-visual-only-100:7px; + --spectrum-component-edge-to-visual-only-200:10px; + --spectrum-component-edge-to-visual-only-300:13px; + --spectrum-component-edge-to-text-50:8px; + --spectrum-component-edge-to-text-75:9px; + --spectrum-component-edge-to-text-100:12px; + --spectrum-component-edge-to-text-200:15px; + --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-text-50:3px; + --spectrum-component-top-to-text-75:4px; + --spectrum-component-top-to-text-100:6px; + --spectrum-component-top-to-text-200:9px; + --spectrum-component-top-to-text-300:12px; + --spectrum-component-bottom-to-text-50:3px; + --spectrum-component-bottom-to-text-75:5px; + --spectrum-component-bottom-to-text-100:9px; + --spectrum-component-bottom-to-text-200:11px; + --spectrum-component-bottom-to-text-300:14px; + --spectrum-component-to-menu-small:6px; + --spectrum-component-to-menu-medium:6px; + --spectrum-component-to-menu-large:7px; + --spectrum-component-to-menu-extra-large:8px; + --spectrum-field-edge-to-disclosure-icon-75:7px; + --spectrum-field-edge-to-disclosure-icon-100:11px; + --spectrum-field-edge-to-disclosure-icon-200:14px; + --spectrum-field-edge-to-disclosure-icon-300:17px; + --spectrum-field-end-edge-to-disclosure-icon-75:7px; + --spectrum-field-end-edge-to-disclosure-icon-100:11px; + --spectrum-field-end-edge-to-disclosure-icon-200:14px; + --spectrum-field-end-edge-to-disclosure-icon-300:17px; + --spectrum-field-top-to-disclosure-icon-75:7px; + --spectrum-field-top-to-disclosure-icon-100:11px; + --spectrum-field-top-to-disclosure-icon-200:14px; + --spectrum-field-top-to-disclosure-icon-300:17px; + --spectrum-field-top-to-alert-icon-small:4px; + --spectrum-field-top-to-alert-icon-medium:7px; + --spectrum-field-top-to-alert-icon-large:10px; + --spectrum-field-top-to-alert-icon-extra-large:13px; + --spectrum-field-top-to-validation-icon-small:7px; + --spectrum-field-top-to-validation-icon-medium:11px; + --spectrum-field-top-to-validation-icon-large:14px; + --spectrum-field-top-to-validation-icon-extra-large:17px; + --spectrum-field-top-to-progress-circle-small:4px; + --spectrum-field-top-to-progress-circle-medium:8px; + --spectrum-field-top-to-progress-circle-large:12px; + --spectrum-field-top-to-progress-circle-extra-large:16px; + --spectrum-field-edge-to-alert-icon-small:9px; + --spectrum-field-edge-to-alert-icon-medium:12px; + --spectrum-field-edge-to-alert-icon-large:15px; + --spectrum-field-edge-to-alert-icon-extra-large:18px; + --spectrum-field-edge-to-validation-icon-small:9px; + --spectrum-field-edge-to-validation-icon-medium:12px; + --spectrum-field-edge-to-validation-icon-large:15px; + --spectrum-field-edge-to-validation-icon-extra-large:18px; + --spectrum-field-text-to-alert-icon-small:8px; + --spectrum-field-text-to-alert-icon-medium:12px; + --spectrum-field-text-to-alert-icon-large:15px; + --spectrum-field-text-to-alert-icon-extra-large:18px; + --spectrum-field-text-to-validation-icon-small:8px; + --spectrum-field-text-to-validation-icon-medium:12px; + --spectrum-field-text-to-validation-icon-large:15px; + --spectrum-field-text-to-validation-icon-extra-large:18px; + --spectrum-field-width:192px; + --spectrum-character-count-to-field-quiet-small:-3px; + --spectrum-character-count-to-field-quiet-medium:-3px; + --spectrum-character-count-to-field-quiet-large:-3px; + --spectrum-character-count-to-field-quiet-extra-large:-4px; + --spectrum-side-label-character-count-to-field:12px; + --spectrum-side-label-character-count-top-margin-small:4px; + --spectrum-side-label-character-count-top-margin-medium:8px; + --spectrum-side-label-character-count-top-margin-large:11px; + --spectrum-side-label-character-count-top-margin-extra-large:14px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small:7px; + --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-color-control-track-width:24px; + --spectrum-font-size-50:11px; + --spectrum-font-size-75:12px; + --spectrum-font-size-100:14px; + --spectrum-font-size-200:16px; + --spectrum-font-size-300:18px; + --spectrum-font-size-400:20px; + --spectrum-font-size-500:22px; + --spectrum-font-size-600:25px; + --spectrum-font-size-700:28px; + --spectrum-font-size-800:32px; + --spectrum-font-size-900:36px; + --spectrum-font-size-1000:40px; + --spectrum-font-size-1100:45px; + --spectrum-font-size-1200:50px; + --spectrum-font-size-1300:60px; +} diff --git a/tokens/dist/css/spectrum/custom-large-vars.css b/tokens/dist/css/spectrum/custom-large-vars.css new file mode 100644 index 00000000000..3a22a849de0 --- /dev/null +++ b/tokens/dist/css/spectrum/custom-large-vars.css @@ -0,0 +1,121 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--large{ + --spectrum-slider-tick-mark-height:13px; + --spectrum-slider-ramp-track-height:20px; + + --spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 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"; + --spectrum-colorwheel-colorarea-container-size:182px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary); + + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px; + + --spectrum-menu-item-checkmark-height-small:12px; + --spectrum-menu-item-checkmark-height-medium:14px; + --spectrum-menu-item-checkmark-height-large:16px; + --spectrum-menu-item-checkmark-height-extra-large:16px; + + --spectrum-menu-item-checkmark-width-small:12px; + --spectrum-menu-item-checkmark-width-medium:14px; + --spectrum-menu-item-checkmark-width-large:16px; + --spectrum-menu-item-checkmark-width-extra-large:16px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-100); + + --spectrum-button-top-to-text-small:6px; + --spectrum-button-bottom-to-text-small:5px; + --spectrum-button-top-to-text-medium:9px; + --spectrum-button-bottom-to-text-medium:10px; + --spectrum-button-top-to-text-large:12px; + --spectrum-button-bottom-to-text-large:13px; + --spectrum-button-top-to-text-extra-large:16px; + --spectrum-button-bottom-to-text-extra-large:17px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600); + + --spectrum-coach-indicator-gap:8px; + --spectrum-coach-indicator-ring-diameter:20px; + --spectrum-coach-indicator-quiet-ring-diameter:10px; + + --spectrum-coachmark-buttongroup-display:none; + --spectrum-coachmark-buttongroup-mobile-display:flex; + --spectrum-coachmark-menu-display:none; + --spectrum-coachmark-menu-mobile-display:inline-flex; + + --spectrum-well-padding:20px; + --spectrum-well-margin-top:5px; + --spectrum-well-min-width:300px; + --spectrum-well-border-radius:5px; + --spectrum-workflow-icon-size-xxl:40px; + --spectrum-workflow-icon-size-xxs:15px; + + --spectrum-treeview-item-indentation-medium:20px; + --spectrum-treeview-item-indentation-small:15px; + --spectrum-treeview-item-indentation-large:25px; + --spectrum-treeview-item-indentation-extra-large:30px; + --spectrum-treeview-indicator-inset-block-start:6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px; + + --spectrum-dialog-confirm-entry-animation-distance:25px; + --spectrum-dialog-confirm-hero-height:160px; + --spectrum-dialog-confirm-border-radius:5px; + --spectrum-dialog-confirm-title-text-size:19px; + --spectrum-dialog-confirm-description-text-size:15px; + --spectrum-dialog-confirm-padding-grid:24px; + + --spectrum-datepicker-initial-width:160px; + --spectrum-datepicker-generic-padding:15px; + --spectrum-datepicker-dash-line-height:30px; + --spectrum-datepicker-width-quiet-first:90px; + --spectrum-datepicker-width-quiet-second:20px; + --spectrum-datepicker-datetime-width-first:45px; + --spectrum-datepicker-invalid-icon-to-button:10px; + --spectrum-datepicker-invalid-icon-to-button-quiet:9px; + --spectrum-datepicker-input-datetime-width:30px; + + --spectrum-pagination-textfield-width:60px; + --spectrum-pagination-item-inline-spacing:6px; + + --spectrum-dial-border-radius:20px; + --spectrum-dial-handle-position:10px; + --spectrum-dial-handle-block-margin:20px; + --spectrum-dial-handle-inline-margin:20px; + --spectrum-dial-controls-margin:10px; + --spectrum-dial-label-gap-y:6px; + --spectrum-dial-label-container-top-to-text:5px; + + --spectrum-assetcard-focus-ring-border-radius:9px; + --spectrum-assetcard-selectionindicator-margin:15px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance:5px; + + --spectrum-ui-icon-medium-display:none; + --spectrum-ui-icon-large-display:block; +} diff --git a/tokens/dist/css/spectrum/custom-medium-vars.css b/tokens/dist/css/spectrum/custom-medium-vars.css new file mode 100644 index 00000000000..4e22b9302e5 --- /dev/null +++ b/tokens/dist/css/spectrum/custom-medium-vars.css @@ -0,0 +1,120 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--medium{ + --spectrum-slider-tick-mark-height:10px; + --spectrum-slider-ramp-track-height:16px; + + --spectrum-colorwheel-path:"M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + --spectrum-colorwheel-colorarea-container-size:144px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary); + + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-100); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:45px; + + --spectrum-menu-item-checkmark-height-small:10px; + --spectrum-menu-item-checkmark-height-medium:10px; + --spectrum-menu-item-checkmark-height-large:12px; + --spectrum-menu-item-checkmark-height-extra-large:14px; + + --spectrum-menu-item-checkmark-width-small:10px; + --spectrum-menu-item-checkmark-width-medium:10px; + --spectrum-menu-item-checkmark-width-large:12px; + --spectrum-menu-item-checkmark-width-extra-large:14px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-75); + + --spectrum-button-top-to-text-small:5px; + --spectrum-button-bottom-to-text-small:4px; + --spectrum-button-top-to-text-medium:7px; + --spectrum-button-bottom-to-text-medium:8px; + --spectrum-button-top-to-text-large:10px; + --spectrum-button-bottom-to-text-large:10px; + --spectrum-button-top-to-text-extra-large:13px; + --spectrum-button-bottom-to-text-extra-large:13px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-100); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-700); + + --spectrum-coach-indicator-gap:6px; + --spectrum-coach-indicator-ring-diameter:var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter:var(--spectrum-spacing-100); + + --spectrum-coachmark-buttongroup-display:flex; + --spectrum-coachmark-buttongroup-mobile-display:none; + --spectrum-coachmark-menu-display:inline-flex; + --spectrum-coachmark-menu-mobile-display:none; + --spectrum-well-padding:var(--spectrum-spacing-300); + --spectrum-well-margin-top:var(--spectrum-spacing-75); + --spectrum-well-min-width:240px; + --spectrum-well-border-radius:var(--spectrum-spacing-75); + --spectrum-workflow-icon-size-xxl:32px; + --spectrum-workflow-icon-size-xxs:12px; + + --spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large:20px; + --spectrum-treeview-item-indentation-extra-large:var(--spectrum-spacing-400); + --spectrum-treeview-indicator-inset-block-start:5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:0px; + + --spectrum-dialog-confirm-entry-animation-distance:20px; + --spectrum-dialog-confirm-hero-height:128px; + --spectrum-dialog-confirm-border-radius:4px; + --spectrum-dialog-confirm-title-text-size:18px; + --spectrum-dialog-confirm-description-text-size:14px; + --spectrum-dialog-confirm-padding-grid:40px; + + --spectrum-datepicker-initial-width:128px; + --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height:24px; + --spectrum-datepicker-width-quiet-first:72px; + --spectrum-datepicker-width-quiet-second:16px; + --spectrum-datepicker-datetime-width-first:36px; + --spectrum-datepicker-invalid-icon-to-button:8px; + --spectrum-datepicker-invalid-icon-to-button-quiet:7px; + --spectrum-datepicker-input-datetime-width:var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width:var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing:5px; + + --spectrum-dial-border-radius:16px; + --spectrum-dial-handle-position:8px; + --spectrum-dial-handle-block-margin:16px; + --spectrum-dial-handle-inline-margin:16px; + --spectrum-dial-controls-margin:8px; + --spectrum-dial-label-gap-y:5px; + --spectrum-dial-label-container-top-to-text:4px; + + --spectrum-assetcard-focus-ring-border-radius:8px; + --spectrum-assetcard-selectionindicator-margin:12px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance:var(--spectrum-spacing-75); + + --spectrum-ui-icon-medium-display:block; + --spectrum-ui-icon-large-display:none; +} diff --git a/tokens/dist/css/spectrum/custom-vars.css b/tokens/dist/css/spectrum/custom-vars.css new file mode 100644 index 00000000000..6481b08241c --- /dev/null +++ b/tokens/dist/css/spectrum/custom-vars.css @@ -0,0 +1,59 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum{ + --system:spectrum; + --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0:0ms; + --spectrum-animation-duration-100:130ms; + --spectrum-animation-duration-200:160ms; + --spectrum-animation-duration-300:190ms; + --spectrum-animation-duration-400:220ms; + --spectrum-animation-duration-500:250ms; + --spectrum-animation-duration-600:300ms; + --spectrum-animation-duration-700:350ms; + --spectrum-animation-duration-800:400ms; + --spectrum-animation-duration-900:450ms; + --spectrum-animation-duration-1000:500ms; + --spectrum-animation-duration-2000:1000ms; + --spectrum-animation-duration-4000:2000ms; + --spectrum-animation-duration-6000:3000ms; + --spectrum-animation-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-animation-ease-in:cubic-bezier(0.5, 0, 1, 1); + --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.4, 1); + --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1); + + --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack); + + --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; + --spectrum-serif-font:var(--spectrum-serif-font-family-stack); + + --spectrum-code-font-family-stack:"Source Code Pro", Monaco, monospace; + + --spectrum-font-family-ar:myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he:myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + + --spectrum-font-family:var(--spectrum-sans-font-family-stack); + --spectrum-font-style:var(--spectrum-default-font-style); + --spectrum-font-size:var(--spectrum-font-size-100); + + --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font:var(--spectrum-code-font-family-stack); + --spectrum-docs-static-white-background-color-rgb:15, 121, 125; + --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); + --spectrum-docs-static-black-background-color-rgb:181, 209, 211; + --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); + + --spectrum-coach-indicator-ring-static-white-color:var(--spectrum-white); +} diff --git a/tokens/dist/css/spectrum/dark-vars.css b/tokens/dist/css/spectrum/dark-vars.css new file mode 100644 index 00000000000..c93a8ad02c3 --- /dev/null +++ b/tokens/dist/css/spectrum/dark-vars.css @@ -0,0 +1,76 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--dark{ + --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-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); + --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-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-card-selected-background-color-rgb:var(--spectrum-blue-500-rgb); + + --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-swatch-border-color-rgb:255, 255, 255; + + --spectrum-swatch-border-color-opacity:0.51; + + --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb:255, 255, 255; + --spectrum-swatch-border-color-light-opacity:0.2; + --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); +} diff --git a/tokens/dist/css/spectrum/darkest-vars.css b/tokens/dist/css/spectrum/darkest-vars.css new file mode 100644 index 00000000000..810c81900d0 --- /dev/null +++ b/tokens/dist/css/spectrum/darkest-vars.css @@ -0,0 +1,76 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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-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); + --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-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-card-selected-background-color-rgb:var(--spectrum-blue-600-rgb); + + --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-swatch-border-color-rgb:255, 255, 255; + + --spectrum-swatch-border-color-opacity:0.51; + + --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb:255, 255, 255; + --spectrum-swatch-border-color-light-opacity:0.2; + --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); +} diff --git a/tokens/dist/css/spectrum/global-vars.css b/tokens/dist/css/spectrum/global-vars.css new file mode 100644 index 00000000000..d5e7de474ed --- /dev/null +++ b/tokens/dist/css/spectrum/global-vars.css @@ -0,0 +1,98 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum{ + --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-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); + --system:spectrum; + --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0:0ms; + --spectrum-animation-duration-100:130ms; + --spectrum-animation-duration-200:160ms; + --spectrum-animation-duration-300:190ms; + --spectrum-animation-duration-400:220ms; + --spectrum-animation-duration-500:250ms; + --spectrum-animation-duration-600:300ms; + --spectrum-animation-duration-700:350ms; + --spectrum-animation-duration-800:400ms; + --spectrum-animation-duration-900:450ms; + --spectrum-animation-duration-1000:500ms; + --spectrum-animation-duration-2000:1000ms; + --spectrum-animation-duration-4000:2000ms; + --spectrum-animation-duration-6000:3000ms; + --spectrum-animation-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-animation-ease-in:cubic-bezier(0.5, 0, 1, 1); + --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.4, 1); + --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1); + + --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack); + + --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; + --spectrum-serif-font:var(--spectrum-serif-font-family-stack); + + --spectrum-code-font-family-stack:"Source Code Pro", Monaco, monospace; + + --spectrum-font-family-ar:myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he:myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + + --spectrum-font-family:var(--spectrum-sans-font-family-stack); + --spectrum-font-style:var(--spectrum-default-font-style); + --spectrum-font-size:var(--spectrum-font-size-100); + + --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font:var(--spectrum-code-font-family-stack); + --spectrum-docs-static-white-background-color-rgb:15, 121, 125; + --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); + --spectrum-docs-static-black-background-color-rgb:181, 209, 211; + --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); + + --spectrum-coach-indicator-ring-static-white-color:var(--spectrum-white); +} diff --git a/tokens/dist/css/spectrum/index.css b/tokens/dist/css/spectrum/index.css new file mode 100644 index 00000000000..491fd946d45 --- /dev/null +++ b/tokens/dist/css/spectrum/index.css @@ -0,0 +1,603 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--dark{ + --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-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); + --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-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-card-selected-background-color-rgb:var(--spectrum-blue-500-rgb); + + --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-swatch-border-color-rgb:255, 255, 255; + + --spectrum-swatch-border-color-opacity:0.51; + + --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb:255, 255, 255; + --spectrum-swatch-border-color-light-opacity:0.2; + --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); +} + +.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-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); + --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-900-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-card-selected-background-color-rgb:var(--spectrum-blue-600-rgb); + + --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-swatch-border-color-rgb:255, 255, 255; + + --spectrum-swatch-border-color-opacity:0.51; + + --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb:255, 255, 255; + --spectrum-swatch-border-color-light-opacity:0.2; + --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); +} + +.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-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); + --system:spectrum; + --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0:0ms; + --spectrum-animation-duration-100:130ms; + --spectrum-animation-duration-200:160ms; + --spectrum-animation-duration-300:190ms; + --spectrum-animation-duration-400:220ms; + --spectrum-animation-duration-500:250ms; + --spectrum-animation-duration-600:300ms; + --spectrum-animation-duration-700:350ms; + --spectrum-animation-duration-800:400ms; + --spectrum-animation-duration-900:450ms; + --spectrum-animation-duration-1000:500ms; + --spectrum-animation-duration-2000:1000ms; + --spectrum-animation-duration-4000:2000ms; + --spectrum-animation-duration-6000:3000ms; + --spectrum-animation-ease-in-out:cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-animation-ease-in:cubic-bezier(0.5, 0, 1, 1); + --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.4, 1); + --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1); + + --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack); + + --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; + --spectrum-serif-font:var(--spectrum-serif-font-family-stack); + + --spectrum-code-font-family-stack:"Source Code Pro", Monaco, monospace; + + --spectrum-font-family-ar:myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he:myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + + --spectrum-font-family:var(--spectrum-sans-font-family-stack); + --spectrum-font-style:var(--spectrum-default-font-style); + --spectrum-font-size:var(--spectrum-font-size-100); + + --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font:var(--spectrum-code-font-family-stack); + --spectrum-docs-static-white-background-color-rgb:15, 121, 125; + --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); + --spectrum-docs-static-black-background-color-rgb:181, 209, 211; + --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); + + --spectrum-coach-indicator-ring-static-white-color:var(--spectrum-white); +} + +.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; + --spectrum-slider-tick-mark-height:13px; + --spectrum-slider-ramp-track-height:20px; + + --spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 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"; + --spectrum-colorwheel-colorarea-container-size:182px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary); + + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px; + + --spectrum-menu-item-checkmark-height-small:12px; + --spectrum-menu-item-checkmark-height-medium:14px; + --spectrum-menu-item-checkmark-height-large:16px; + --spectrum-menu-item-checkmark-height-extra-large:16px; + + --spectrum-menu-item-checkmark-width-small:12px; + --spectrum-menu-item-checkmark-width-medium:14px; + --spectrum-menu-item-checkmark-width-large:16px; + --spectrum-menu-item-checkmark-width-extra-large:16px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-100); + + --spectrum-button-top-to-text-small:6px; + --spectrum-button-bottom-to-text-small:5px; + --spectrum-button-top-to-text-medium:9px; + --spectrum-button-bottom-to-text-medium:10px; + --spectrum-button-top-to-text-large:12px; + --spectrum-button-bottom-to-text-large:13px; + --spectrum-button-top-to-text-extra-large:16px; + --spectrum-button-bottom-to-text-extra-large:17px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600); + + --spectrum-coach-indicator-gap:8px; + --spectrum-coach-indicator-ring-diameter:20px; + --spectrum-coach-indicator-quiet-ring-diameter:10px; + + --spectrum-coachmark-buttongroup-display:none; + --spectrum-coachmark-buttongroup-mobile-display:flex; + --spectrum-coachmark-menu-display:none; + --spectrum-coachmark-menu-mobile-display:inline-flex; + + --spectrum-well-padding:20px; + --spectrum-well-margin-top:5px; + --spectrum-well-min-width:300px; + --spectrum-well-border-radius:5px; + --spectrum-workflow-icon-size-xxl:40px; + --spectrum-workflow-icon-size-xxs:15px; + + --spectrum-treeview-item-indentation-medium:20px; + --spectrum-treeview-item-indentation-small:15px; + --spectrum-treeview-item-indentation-large:25px; + --spectrum-treeview-item-indentation-extra-large:30px; + --spectrum-treeview-indicator-inset-block-start:6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px; + + --spectrum-dialog-confirm-entry-animation-distance:25px; + --spectrum-dialog-confirm-hero-height:160px; + --spectrum-dialog-confirm-border-radius:5px; + --spectrum-dialog-confirm-title-text-size:19px; + --spectrum-dialog-confirm-description-text-size:15px; + --spectrum-dialog-confirm-padding-grid:24px; + + --spectrum-datepicker-initial-width:160px; + --spectrum-datepicker-generic-padding:15px; + --spectrum-datepicker-dash-line-height:30px; + --spectrum-datepicker-width-quiet-first:90px; + --spectrum-datepicker-width-quiet-second:20px; + --spectrum-datepicker-datetime-width-first:45px; + --spectrum-datepicker-invalid-icon-to-button:10px; + --spectrum-datepicker-invalid-icon-to-button-quiet:9px; + --spectrum-datepicker-input-datetime-width:30px; + + --spectrum-pagination-textfield-width:60px; + --spectrum-pagination-item-inline-spacing:6px; + + --spectrum-dial-border-radius:20px; + --spectrum-dial-handle-position:10px; + --spectrum-dial-handle-block-margin:20px; + --spectrum-dial-handle-inline-margin:20px; + --spectrum-dial-controls-margin:10px; + --spectrum-dial-label-gap-y:6px; + --spectrum-dial-label-container-top-to-text:5px; + + --spectrum-assetcard-focus-ring-border-radius:9px; + --spectrum-assetcard-selectionindicator-margin:15px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance:5px; + + --spectrum-ui-icon-medium-display:none; + --spectrum-ui-icon-large-display:block; +} + +.spectrum--light,.spectrum--lightest{ + --spectrum-menu-item-background-color-default-rgb:0, 0, 0; + --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-menu-item-background-color-hover:var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-down:var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-black-200); + --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-800-rgb); + --spectrum-dropindicator-color:var(--spectrum-blue-800); + + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-black-200); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-800); + + --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-900-rgb); + + --spectrum-badge-label-icon-color-primary:var(--spectrum-white); + + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800); + --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); + + --spectrum-well-border-color:var(--spectrum-black); + + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-800); + + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.06); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + + --spectrum-logic-button-and-background-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1100); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1100); + + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-1100); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-1100); + + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-900); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-800); + + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800); + + --spectrum-swatch-border-color-rgb:0, 0, 0; + + --spectrum-swatch-border-color-opacity:0.51; + + --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb:0, 0, 0; + --spectrum-swatch-border-color-light-opacity:0.2; + --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); +} + +.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; + --spectrum-slider-tick-mark-height:10px; + --spectrum-slider-ramp-track-height:16px; + + --spectrum-colorwheel-path:"M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + --spectrum-colorwheel-colorarea-container-size:144px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary); + + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-100); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:45px; + + --spectrum-menu-item-checkmark-height-small:10px; + --spectrum-menu-item-checkmark-height-medium:10px; + --spectrum-menu-item-checkmark-height-large:12px; + --spectrum-menu-item-checkmark-height-extra-large:14px; + + --spectrum-menu-item-checkmark-width-small:10px; + --spectrum-menu-item-checkmark-width-medium:10px; + --spectrum-menu-item-checkmark-width-large:12px; + --spectrum-menu-item-checkmark-width-extra-large:14px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-75); + + --spectrum-button-top-to-text-small:5px; + --spectrum-button-bottom-to-text-small:4px; + --spectrum-button-top-to-text-medium:7px; + --spectrum-button-bottom-to-text-medium:8px; + --spectrum-button-top-to-text-large:10px; + --spectrum-button-bottom-to-text-large:10px; + --spectrum-button-top-to-text-extra-large:13px; + --spectrum-button-bottom-to-text-extra-large:13px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-100); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-700); + + --spectrum-coach-indicator-gap:6px; + --spectrum-coach-indicator-ring-diameter:var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter:var(--spectrum-spacing-100); + + --spectrum-coachmark-buttongroup-display:flex; + --spectrum-coachmark-buttongroup-mobile-display:none; + --spectrum-coachmark-menu-display:inline-flex; + --spectrum-coachmark-menu-mobile-display:none; + --spectrum-well-padding:var(--spectrum-spacing-300); + --spectrum-well-margin-top:var(--spectrum-spacing-75); + --spectrum-well-min-width:240px; + --spectrum-well-border-radius:var(--spectrum-spacing-75); + --spectrum-workflow-icon-size-xxl:32px; + --spectrum-workflow-icon-size-xxs:12px; + + --spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large:20px; + --spectrum-treeview-item-indentation-extra-large:var(--spectrum-spacing-400); + --spectrum-treeview-indicator-inset-block-start:5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:0px; + + --spectrum-dialog-confirm-entry-animation-distance:20px; + --spectrum-dialog-confirm-hero-height:128px; + --spectrum-dialog-confirm-border-radius:4px; + --spectrum-dialog-confirm-title-text-size:18px; + --spectrum-dialog-confirm-description-text-size:14px; + --spectrum-dialog-confirm-padding-grid:40px; + + --spectrum-datepicker-initial-width:128px; + --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height:24px; + --spectrum-datepicker-width-quiet-first:72px; + --spectrum-datepicker-width-quiet-second:16px; + --spectrum-datepicker-datetime-width-first:36px; + --spectrum-datepicker-invalid-icon-to-button:8px; + --spectrum-datepicker-invalid-icon-to-button-quiet:7px; + --spectrum-datepicker-input-datetime-width:var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width:var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing:5px; + + --spectrum-dial-border-radius:16px; + --spectrum-dial-handle-position:8px; + --spectrum-dial-handle-block-margin:16px; + --spectrum-dial-handle-inline-margin:16px; + --spectrum-dial-controls-margin:8px; + --spectrum-dial-label-gap-y:5px; + --spectrum-dial-label-container-top-to-text:4px; + + --spectrum-assetcard-focus-ring-border-radius:8px; + --spectrum-assetcard-selectionindicator-margin:12px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance:var(--spectrum-spacing-75); + + --spectrum-ui-icon-medium-display:block; + --spectrum-ui-icon-large-display:none; +} diff --git a/tokens/dist/css/spectrum/large-vars.css b/tokens/dist/css/spectrum/large-vars.css new file mode 100644 index 00000000000..8938d608258 --- /dev/null +++ b/tokens/dist/css/spectrum/large-vars.css @@ -0,0 +1,169 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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; + --spectrum-slider-tick-mark-height:13px; + --spectrum-slider-ramp-track-height:20px; + + --spectrum-colorwheel-path:"M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 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"; + --spectrum-colorwheel-colorarea-container-size:182px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary); + + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:54px; + + --spectrum-menu-item-checkmark-height-small:12px; + --spectrum-menu-item-checkmark-height-medium:14px; + --spectrum-menu-item-checkmark-height-large:16px; + --spectrum-menu-item-checkmark-height-extra-large:16px; + + --spectrum-menu-item-checkmark-width-small:12px; + --spectrum-menu-item-checkmark-width-medium:14px; + --spectrum-menu-item-checkmark-width-large:16px; + --spectrum-menu-item-checkmark-width-extra-large:16px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-100); + + --spectrum-button-top-to-text-small:6px; + --spectrum-button-bottom-to-text-small:5px; + --spectrum-button-top-to-text-medium:9px; + --spectrum-button-bottom-to-text-medium:10px; + --spectrum-button-top-to-text-large:12px; + --spectrum-button-bottom-to-text-large:13px; + --spectrum-button-top-to-text-extra-large:16px; + --spectrum-button-bottom-to-text-extra-large:17px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-200); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-600); + + --spectrum-coach-indicator-gap:8px; + --spectrum-coach-indicator-ring-diameter:20px; + --spectrum-coach-indicator-quiet-ring-diameter:10px; + + --spectrum-coachmark-buttongroup-display:none; + --spectrum-coachmark-buttongroup-mobile-display:flex; + --spectrum-coachmark-menu-display:none; + --spectrum-coachmark-menu-mobile-display:inline-flex; + + --spectrum-well-padding:20px; + --spectrum-well-margin-top:5px; + --spectrum-well-min-width:300px; + --spectrum-well-border-radius:5px; + --spectrum-workflow-icon-size-xxl:40px; + --spectrum-workflow-icon-size-xxs:15px; + + --spectrum-treeview-item-indentation-medium:20px; + --spectrum-treeview-item-indentation-small:15px; + --spectrum-treeview-item-indentation-large:25px; + --spectrum-treeview-item-indentation-extra-large:30px; + --spectrum-treeview-indicator-inset-block-start:6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:2px; + + --spectrum-dialog-confirm-entry-animation-distance:25px; + --spectrum-dialog-confirm-hero-height:160px; + --spectrum-dialog-confirm-border-radius:5px; + --spectrum-dialog-confirm-title-text-size:19px; + --spectrum-dialog-confirm-description-text-size:15px; + --spectrum-dialog-confirm-padding-grid:24px; + + --spectrum-datepicker-initial-width:160px; + --spectrum-datepicker-generic-padding:15px; + --spectrum-datepicker-dash-line-height:30px; + --spectrum-datepicker-width-quiet-first:90px; + --spectrum-datepicker-width-quiet-second:20px; + --spectrum-datepicker-datetime-width-first:45px; + --spectrum-datepicker-invalid-icon-to-button:10px; + --spectrum-datepicker-invalid-icon-to-button-quiet:9px; + --spectrum-datepicker-input-datetime-width:30px; + + --spectrum-pagination-textfield-width:60px; + --spectrum-pagination-item-inline-spacing:6px; + + --spectrum-dial-border-radius:20px; + --spectrum-dial-handle-position:10px; + --spectrum-dial-handle-block-margin:20px; + --spectrum-dial-handle-inline-margin:20px; + --spectrum-dial-controls-margin:10px; + --spectrum-dial-label-gap-y:6px; + --spectrum-dial-label-container-top-to-text:5px; + + --spectrum-assetcard-focus-ring-border-radius:9px; + --spectrum-assetcard-selectionindicator-margin:15px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance:5px; + + --spectrum-ui-icon-medium-display:none; + --spectrum-ui-icon-large-display:block; +} diff --git a/tokens/dist/css/spectrum/light-vars.css b/tokens/dist/css/spectrum/light-vars.css new file mode 100644 index 00000000000..26da0b8bd9a --- /dev/null +++ b/tokens/dist/css/spectrum/light-vars.css @@ -0,0 +1,76 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--light,.spectrum--lightest{ + --spectrum-menu-item-background-color-default-rgb:0, 0, 0; + --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-menu-item-background-color-hover:var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-down:var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-black-200); + --spectrum-drop-zone-background-color-rgb:var(--spectrum-blue-800-rgb); + --spectrum-dropindicator-color:var(--spectrum-blue-800); + + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-down:var(--spectrum-transparent-black-200); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-800); + + --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-900-rgb); + + --spectrum-badge-label-icon-color-primary:var(--spectrum-white); + + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800); + --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); + + --spectrum-well-border-color:var(--spectrum-black); + + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-800); + + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.06); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + + --spectrum-logic-button-and-background-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1100); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1100); + + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-1100); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-1100); + + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-900); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-800); + + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800); + + --spectrum-swatch-border-color-rgb:0, 0, 0; + + --spectrum-swatch-border-color-opacity:0.51; + + --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb:0, 0, 0; + --spectrum-swatch-border-color-light-opacity:0.2; + --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); +} diff --git a/tokens/dist/css/spectrum/medium-vars.css b/tokens/dist/css/spectrum/medium-vars.css new file mode 100644 index 00000000000..4f5e99009c8 --- /dev/null +++ b/tokens/dist/css/spectrum/medium-vars.css @@ -0,0 +1,168 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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; + --spectrum-slider-tick-mark-height:10px; + --spectrum-slider-ramp-track-height:16px; + + --spectrum-colorwheel-path:"M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders:"M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + --spectrum-colorwheel-colorarea-container-size:144px; + + --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary); + + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-100); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large:45px; + + --spectrum-menu-item-checkmark-height-small:10px; + --spectrum-menu-item-checkmark-height-medium:10px; + --spectrum-menu-item-checkmark-height-large:12px; + --spectrum-menu-item-checkmark-height-extra-large:14px; + + --spectrum-menu-item-checkmark-width-small:10px; + --spectrum-menu-item-checkmark-width-medium:10px; + --spectrum-menu-item-checkmark-width-large:12px; + --spectrum-menu-item-checkmark-width-extra-large:14px; + + --spectrum-rating-icon-spacing:var(--spectrum-spacing-75); + + --spectrum-button-top-to-text-small:5px; + --spectrum-button-bottom-to-text-small:4px; + --spectrum-button-top-to-text-medium:7px; + --spectrum-button-bottom-to-text-medium:8px; + --spectrum-button-top-to-text-large:10px; + --spectrum-button-bottom-to-text-large:10px; + --spectrum-button-top-to-text-extra-large:13px; + --spectrum-button-bottom-to-text-extra-large:13px; + + --spectrum-alert-banner-close-button-spacing:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider:var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button:var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical:var(--spectrum-spacing-100); + + --spectrum-alert-dialog-padding:var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons:var(--spectrum-spacing-700); + + --spectrum-coach-indicator-gap:6px; + --spectrum-coach-indicator-ring-diameter:var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter:var(--spectrum-spacing-100); + + --spectrum-coachmark-buttongroup-display:flex; + --spectrum-coachmark-buttongroup-mobile-display:none; + --spectrum-coachmark-menu-display:inline-flex; + --spectrum-coachmark-menu-mobile-display:none; + --spectrum-well-padding:var(--spectrum-spacing-300); + --spectrum-well-margin-top:var(--spectrum-spacing-75); + --spectrum-well-min-width:240px; + --spectrum-well-border-radius:var(--spectrum-spacing-75); + --spectrum-workflow-icon-size-xxl:32px; + --spectrum-workflow-icon-size-xxs:12px; + + --spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large:20px; + --spectrum-treeview-item-indentation-extra-large:var(--spectrum-spacing-400); + --spectrum-treeview-indicator-inset-block-start:5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium:0px; + + --spectrum-dialog-confirm-entry-animation-distance:20px; + --spectrum-dialog-confirm-hero-height:128px; + --spectrum-dialog-confirm-border-radius:4px; + --spectrum-dialog-confirm-title-text-size:18px; + --spectrum-dialog-confirm-description-text-size:14px; + --spectrum-dialog-confirm-padding-grid:40px; + + --spectrum-datepicker-initial-width:128px; + --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height:24px; + --spectrum-datepicker-width-quiet-first:72px; + --spectrum-datepicker-width-quiet-second:16px; + --spectrum-datepicker-datetime-width-first:36px; + --spectrum-datepicker-invalid-icon-to-button:8px; + --spectrum-datepicker-invalid-icon-to-button-quiet:7px; + --spectrum-datepicker-input-datetime-width:var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width:var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing:5px; + + --spectrum-dial-border-radius:16px; + --spectrum-dial-handle-position:8px; + --spectrum-dial-handle-block-margin:16px; + --spectrum-dial-handle-inline-margin:16px; + --spectrum-dial-controls-margin:8px; + --spectrum-dial-label-gap-y:5px; + --spectrum-dial-label-container-top-to-text:4px; + + --spectrum-assetcard-focus-ring-border-radius:8px; + --spectrum-assetcard-selectionindicator-margin:12px; + --spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs); + --spectrum-assetcard-content-font-size:var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance:var(--spectrum-spacing-75); + + --spectrum-ui-icon-medium-display:block; + --spectrum-ui-icon-large-display:none; +} diff --git a/tokens/dist/index.css b/tokens/dist/index.css new file mode 100644 index 00000000000..e5a122e282d --- /dev/null +++ b/tokens/dist/index.css @@ -0,0 +1,3712 @@ +/*! + * Copyright 2024 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 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum--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--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); +} +.spectrum { + --spectrum-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-static-white-focus-indicator-color: var(--spectrum-white); + --spectrum-static-black-focus-indicator-color: var(--spectrum-black); + --spectrum-overlay-color: var(--spectrum-black); + --spectrum-opacity-disabled: 0.3; + --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-background-opacity-default: 0; + --spectrum-background-opacity-hover: 0.1; + --spectrum-background-opacity-down: 0.1; + --spectrum-background-opacity-key-focus: 0.1; + --spectrum-neutral-content-color-default: var(--spectrum-gray-800); + --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); + --spectrum-neutral-content-color-down: var(--spectrum-gray-900); + --spectrum-neutral-content-color-focus-hover: var(--spectrum-neutral-content-color-down); + --spectrum-neutral-content-color-focus: var(--spectrum-neutral-content-color-down); + --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-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-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-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-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); + --spectrum-negative-border-color-default: var(--spectrum-negative-color-900); + --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); + --spectrum-negative-border-color-focus-hover: var(--spectrum-negative-border-color-down); + --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-key-focus: var(--spectrum-negative-color-1000); + --spectrum-swatch-border-color: var(--spectrum-gray-900); + --spectrum-swatch-border-opacity: 0.51; + --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); + --spectrum-swatch-disabled-icon-border-opacity: 0.51; + --spectrum-thumbnail-border-color: var(--spectrum-gray-800); + --spectrum-thumbnail-border-opacity: 0.1; + --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); + --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); + --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); + --spectrum-color-area-border-color: var(--spectrum-gray-900); + --spectrum-color-area-border-opacity: 0.1; + --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-inner-border: var(--spectrum-transparent-black-200); + --spectrum-color-loupe-outer-border: var(--spectrum-white); + --spectrum-card-selection-background-color: var(--spectrum-gray-100); + --spectrum-card-selection-background-color-opacity: 0.95; + --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); + --spectrum-drop-zone-background-color-opacity: 0.1; + --spectrum-drop-zone-background-color-opacity-filled: 0.3; + --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); + --spectrum-floating-action-button-shadow-color: var(--spectrum-floating-action-button-drop-shadow-color); + --spectrum-table-row-hover-color: var(--spectrum-gray-900); + --spectrum-table-row-hover-opacity: 0.07; + --spectrum-table-selected-row-background-color: var(--spectrum-informative-background-color-default); + --spectrum-table-selected-row-background-opacity: 0.1; + --spectrum-table-selected-row-background-color-non-emphasized: var(--spectrum-neutral-background-color-selected-default); + --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; + --spectrum-table-row-down-opacity: 0.1; + --spectrum-table-selected-row-background-opacity-hover: 0.15; + --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-100-rgb: 255, 255, 255; + --spectrum-transparent-white-100-opacity: 0; + --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: 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: 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: 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: 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: 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: 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: 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-black-rgb: 0, 0, 0; + --spectrum-black: rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-100-rgb: 0, 0, 0; + --spectrum-transparent-black-100-opacity: 0; + --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: 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: 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: 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: 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: 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: 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: 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-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; + --spectrum-divider-thickness-large: 4px; + --spectrum-swatch-rectangle-width-multiplier: 2; + --spectrum-swatch-slash-thickness-extra-small: 2px; + --spectrum-swatch-slash-thickness-small: 3px; + --spectrum-swatch-slash-thickness-medium: 4px; + --spectrum-swatch-slash-thickness-large: 5px; + --spectrum-progress-bar-minimum-width: 48px; + --spectrum-progress-bar-maximum-width: 768px; + --spectrum-meter-minimum-width: 48px; + --spectrum-meter-maximum-width: 768px; + --spectrum-meter-default-width: var(--spectrum-meter-width); + --spectrum-in-line-alert-minimum-width: 240px; + --spectrum-popover-tip-width: 16px; + --spectrum-popover-tip-height: 8px; + --spectrum-menu-item-label-to-description: 1px; + --spectrum-menu-item-section-divider-height: 8px; + --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; + --spectrum-text-field-minimum-width-multiplier: 1.5; + --spectrum-combo-box-minimum-width-multiplier: 2.5; + --spectrum-combo-box-quiet-minimum-width-multiplier: 2; + --spectrum-combo-box-visual-to-field-button-quiet: 0px; + --spectrum-alert-dialog-minimum-width: 288px; + --spectrum-alert-dialog-maximum-width: 480px; + --spectrum-contextual-help-minimum-width: 268px; + --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); + --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); + --spectrum-breadcrumbs-end-edge-to-text: 0px; + --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; + --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; + --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; + --spectrum-alert-banner-to-top-workflow-icon: var(--spectrum-alert-banner-top-to-workflow-icon); + --spectrum-alert-banner-to-top-text: var(--spectrum-alert-banner-top-to-text); + --spectrum-alert-banner-to-bottom-text: var(--spectrum-alert-banner-bottom-to-text); + --spectrum-color-area-border-width: var(--spectrum-border-width-100); + --spectrum-color-area-border-rounding: var(--spectrum-corner-radius-100); + --spectrum-color-wheel-color-area-margin: 12px; + --spectrum-color-slider-border-width: 1px; + --spectrum-color-slider-border-rounding: 4px; + --spectrum-floating-action-button-drop-shadow-blur: 12px; + --spectrum-floating-action-button-drop-shadow-y: 4px; + --spectrum-illustrated-message-maximum-width: 380px; + --spectrum-search-field-minimum-width-multiplier: 3; + --spectrum-color-loupe-height: 64px; + --spectrum-color-loupe-width: 48px; + --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; + --spectrum-drop-zone-width: 428px; + --spectrum-drop-zone-content-maximum-width: var(--spectrum-illustrated-message-maximum-width); + --spectrum-drop-zone-border-dash-length: 8px; + --spectrum-drop-zone-border-dash-gap: 4px; + --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; + --spectrum-color-handle-drop-shadow-x: 0; + --spectrum-color-handle-drop-shadow-y: 0; + --spectrum-color-handle-drop-shadow-blur: 0; + --spectrum-table-row-height-small-compact: var(--spectrum-component-height-75); + --spectrum-table-row-height-medium-compact: var(--spectrum-component-height-100); + --spectrum-table-row-height-large-compact: var(--spectrum-component-height-200); + --spectrum-table-row-height-extra-large-compact: var(--spectrum-component-height-300); + --spectrum-table-row-top-to-text-small-compact: var(--spectrum-component-top-to-text-75); + --spectrum-table-row-top-to-text-medium-compact: var(--spectrum-component-top-to-text-100); + --spectrum-table-row-top-to-text-large-compact: var(--spectrum-component-top-to-text-200); + --spectrum-table-row-top-to-text-extra-large-compact: var(--spectrum-component-top-to-text-300); + --spectrum-table-row-bottom-to-text-small-compact: var(--spectrum-component-bottom-to-text-75); + --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); + --spectrum-tab-item-height-large: var(--spectrum-component-height-400); + --spectrum-tab-item-height-extra-large: var(--spectrum-component-height-500); + --spectrum-tab-item-compact-height-small: var(--spectrum-component-height-75); + --spectrum-tab-item-compact-height-medium: var(--spectrum-component-height-100); + --spectrum-tab-item-compact-height-large: var(--spectrum-component-height-200); + --spectrum-tab-item-compact-height-extra-large: var(--spectrum-component-height-300); + --spectrum-tab-item-start-to-edge-quiet: 0px; + --spectrum-in-field-button-width-stacked-small: 20px; + --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-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-android-elevation: 2dp; + --spectrum-spacing-50: 2px; + --spectrum-spacing-75: 4px; + --spectrum-spacing-100: 8px; + --spectrum-spacing-200: 12px; + --spectrum-spacing-300: 16px; + --spectrum-spacing-400: 24px; + --spectrum-spacing-500: 32px; + --spectrum-spacing-600: 40px; + --spectrum-spacing-700: 48px; + --spectrum-spacing-800: 64px; + --spectrum-spacing-900: 80px; + --spectrum-spacing-1000: 96px; + --spectrum-focus-indicator-thickness: 2px; + --spectrum-focus-indicator-gap: 2px; + --spectrum-border-width-200: 2px; + --spectrum-border-width-400: 4px; + --spectrum-field-edge-to-text-quiet: 0px; + --spectrum-field-edge-to-visual-quiet: 0px; + --spectrum-field-edge-to-border-quiet: 0px; + --spectrum-field-edge-to-alert-icon-quiet: 0px; + --spectrum-field-edge-to-validation-icon-quiet: 0px; + --spectrum-text-underline-thickness: 1px; + --spectrum-text-underline-gap: 1px; + --spectrum-informative-color-100: var(--spectrum-blue-100); + --spectrum-informative-color-200: var(--spectrum-blue-200); + --spectrum-informative-color-300: var(--spectrum-blue-300); + --spectrum-informative-color-400: var(--spectrum-blue-400); + --spectrum-informative-color-500: var(--spectrum-blue-500); + --spectrum-informative-color-600: var(--spectrum-blue-600); + --spectrum-informative-color-700: var(--spectrum-blue-700); + --spectrum-informative-color-800: var(--spectrum-blue-800); + --spectrum-informative-color-900: var(--spectrum-blue-900); + --spectrum-informative-color-1000: var(--spectrum-blue-1000); + --spectrum-informative-color-1100: var(--spectrum-blue-1100); + --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-negative-color-100: var(--spectrum-red-100); + --spectrum-negative-color-200: var(--spectrum-red-200); + --spectrum-negative-color-300: var(--spectrum-red-300); + --spectrum-negative-color-400: var(--spectrum-red-400); + --spectrum-negative-color-500: var(--spectrum-red-500); + --spectrum-negative-color-600: var(--spectrum-red-600); + --spectrum-negative-color-700: var(--spectrum-red-700); + --spectrum-negative-color-800: var(--spectrum-red-800); + --spectrum-negative-color-900: var(--spectrum-red-900); + --spectrum-negative-color-1000: var(--spectrum-red-1000); + --spectrum-negative-color-1100: var(--spectrum-red-1100); + --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-notice-color-100: var(--spectrum-orange-100); + --spectrum-notice-color-200: var(--spectrum-orange-200); + --spectrum-notice-color-300: var(--spectrum-orange-300); + --spectrum-notice-color-400: var(--spectrum-orange-400); + --spectrum-notice-color-500: var(--spectrum-orange-500); + --spectrum-notice-color-600: var(--spectrum-orange-600); + --spectrum-notice-color-700: var(--spectrum-orange-700); + --spectrum-notice-color-800: var(--spectrum-orange-800); + --spectrum-notice-color-900: var(--spectrum-orange-900); + --spectrum-notice-color-1000: var(--spectrum-orange-1000); + --spectrum-notice-color-1100: var(--spectrum-orange-1100); + --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-positive-color-100: var(--spectrum-green-100); + --spectrum-positive-color-200: var(--spectrum-green-200); + --spectrum-positive-color-300: var(--spectrum-green-300); + --spectrum-positive-color-400: var(--spectrum-green-400); + --spectrum-positive-color-500: var(--spectrum-green-500); + --spectrum-positive-color-600: var(--spectrum-green-600); + --spectrum-positive-color-700: var(--spectrum-green-700); + --spectrum-positive-color-800: var(--spectrum-green-800); + --spectrum-positive-color-900: var(--spectrum-green-900); + --spectrum-positive-color-1000: var(--spectrum-green-1000); + --spectrum-positive-color-1100: var(--spectrum-green-1100); + --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-default-font-family: var(--spectrum-sans-serif-font-family); + --spectrum-sans-serif-font-family: Adobe Clean; + --spectrum-serif-font-family: Adobe Clean Serif; + --spectrum-cjk-font-family: Adobe Clean Han; + --spectrum-light-font-weight: 300; + --spectrum-regular-font-weight: 400; + --spectrum-medium-font-weight: 500; + --spectrum-bold-font-weight: 700; + --spectrum-extra-bold-font-weight: 800; + --spectrum-black-font-weight: 900; + --spectrum-italic-font-style: italic; + --spectrum-default-font-style: 400; + --spectrum-line-height-100: 1.3; + --spectrum-line-height-200: 1.5; + --spectrum-cjk-line-height-100: 1.5; + --spectrum-cjk-line-height-200: 1.7; + --spectrum-cjk-letter-spacing: 0.05em; + --spectrum-heading-sans-serif-font-family: var(--spectrum-sans-serif-font-family); + --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-heading-sans-serif-light-font-weight: var(--spectrum-light-font-weight); + --spectrum-heading-sans-serif-light-font-style: var(--spectrum-default-font-style); + --spectrum-heading-serif-light-font-weight: var(--spectrum-regular-font-weight); + --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-style: var(--spectrum-default-font-style); + --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); + --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); + --spectrum-heading-serif-heavy-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-light-strong-font-style: var(--spectrum-default-font-style); + --spectrum-heading-serif-light-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-serif-light-strong-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-light-strong-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-light-strong-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-heading-serif-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-strong-font-style: var(--spectrum-default-font-style); + --spectrum-heading-serif-heavy-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-strong-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-heavy-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-strong-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-emphasized-font-weight: var(--spectrum-light-font-weight); + --spectrum-heading-sans-serif-light-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-heading-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight); + --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-style: var(--spectrum-italic-font-style); + --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); + --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-heading-serif-heavy-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-heading-cjk-heavy-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-heading-serif-light-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-heading-cjk-light-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-light-strong-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-strong-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-heading-serif-strong-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-heading-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-serif-heavy-strong-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); + --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); + --spectrum-heading-size-xl: var(--spectrum-font-size-900); + --spectrum-heading-size-l: var(--spectrum-font-size-700); + --spectrum-heading-size-m: var(--spectrum-font-size-500); + --spectrum-heading-size-s: var(--spectrum-font-size-300); + --spectrum-heading-size-xs: var(--spectrum-font-size-200); + --spectrum-heading-size-xxs: var(--spectrum-font-size-100); + --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); + --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); + --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); + --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); + --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); + --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); + --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); + --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); + --spectrum-heading-line-height: var(--spectrum-line-height-100); + --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-heading-margin-top-multiplier: 0.88888889; + --spectrum-heading-margin-bottom-multiplier: 0.25; + --spectrum-heading-color: var(--spectrum-gray-900); + --spectrum-body-sans-serif-font-family: var(--spectrum-sans-serif-font-family); + --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-serif-font-style: var(--spectrum-default-font-style); + --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-body-sans-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-emphasized-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-body-serif-emphasized-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-serif-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-body-cjk-emphasized-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-body-cjk-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-body-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-body-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-body-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-body-size-xxxl: var(--spectrum-font-size-600); + --spectrum-body-size-xxl: var(--spectrum-font-size-500); + --spectrum-body-size-xl: var(--spectrum-font-size-400); + --spectrum-body-size-l: var(--spectrum-font-size-300); + --spectrum-body-size-m: var(--spectrum-font-size-200); + --spectrum-body-size-s: var(--spectrum-font-size-100); + --spectrum-body-size-xs: var(--spectrum-font-size-75); + --spectrum-body-line-height: var(--spectrum-line-height-200); + --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); + --spectrum-body-margin-multiplier: 0.75; + --spectrum-body-color: var(--spectrum-gray-800); + --spectrum-detail-sans-serif-font-family: var(--spectrum-sans-serif-font-family); + --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-font-weight: var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-font-style: var(--spectrum-default-font-style); + --spectrum-detail-serif-light-font-weight: var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); + --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-detail-serif-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-font-weight: var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-strong-font-style: var(--spectrum-default-font-style); + --spectrum-detail-serif-light-strong-font-weight: var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-strong-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-light-strong-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-light-strong-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-detail-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-serif-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-detail-cjk-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-detail-cjk-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-detail-serif-light-emphasized-font-weight: var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-detail-cjk-light-emphasized-font-weight: var(--spectrum-regular-font-weight); + --spectrum-detail-cjk-light-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-detail-serif-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-serif-strong-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-detail-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var(--spectrum-regular-font-weight); + --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-detail-serif-light-strong-emphasized-font-weight: var(--spectrum-regular-font-weight); + --spectrum-detail-serif-light-strong-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-detail-cjk-light-strong-emphasized-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-light-strong-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-detail-size-xl: var(--spectrum-font-size-200); + --spectrum-detail-size-l: var(--spectrum-font-size-100); + --spectrum-detail-size-m: var(--spectrum-font-size-75); + --spectrum-detail-size-s: var(--spectrum-font-size-50); + --spectrum-detail-line-height: var(--spectrum-line-height-100); + --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-detail-margin-top-multiplier: 0.88888889; + --spectrum-detail-margin-bottom-multiplier: 0.25; + --spectrum-detail-letter-spacing: 0.06em; + --spectrum-detail-sans-serif-text-transform: uppercase; + --spectrum-detail-serif-text-transform: uppercase; + --spectrum-detail-color: var(--spectrum-gray-900); + --spectrum-code-font-family: Source Code Pro; + --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); + --spectrum-code-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-font-style: var(--spectrum-default-font-style); + --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-code-strong-font-style: var(--spectrum-default-font-style); + --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-code-cjk-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-code-cjk-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-code-strong-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-code-strong-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-code-cjk-strong-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-emphasized-font-style: var(--spectrum-default-font-style); + --spectrum-code-size-xl: var(--spectrum-font-size-400); + --spectrum-code-size-l: var(--spectrum-font-size-300); + --spectrum-code-size-m: var(--spectrum-font-size-200); + --spectrum-code-size-s: var(--spectrum-font-size-100); + --spectrum-code-size-xs: var(--spectrum-font-size-75); + --spectrum-code-line-height: var(--spectrum-line-height-200); + --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); + --spectrum-code-color: var(--spectrum-gray-800); +} +.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-field-label-text-to-asterisk-small: 5px; + --spectrum-field-label-text-to-asterisk-medium: 5px; + --spectrum-field-label-text-to-asterisk-large: 6px; + --spectrum-field-label-text-to-asterisk-extra-large: 6px; + --spectrum-field-label-top-to-asterisk-small: 11px; + --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-medium: 5px; + --spectrum-field-label-top-margin-large: 6px; + --spectrum-field-label-top-margin-extra-large: 6px; + --spectrum-field-label-to-component-quiet-small: -10px; + --spectrum-field-label-to-component-quiet-medium: -10px; + --spectrum-field-label-to-component-quiet-large: -15px; + --spectrum-field-label-to-component-quiet-extra-large: -19px; + --spectrum-help-text-top-to-workflow-icon-small: 5px; + --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-medium: 10px; + --spectrum-status-light-dot-size-large: 12px; + --spectrum-status-light-dot-size-extra-large: 12px; + --spectrum-status-light-top-to-dot-small: 11px; + --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-medium: 5px; + --spectrum-action-button-edge-to-hold-icon-large: 6px; + --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; + --spectrum-tooltip-tip-width: 10px; + --spectrum-tooltip-tip-height: 5px; + --spectrum-tooltip-maximum-width: 200px; + --spectrum-progress-circle-size-small: 20px; + --spectrum-progress-circle-size-medium: 40px; + --spectrum-progress-circle-size-large: 80px; + --spectrum-progress-circle-thickness-small: 3px; + --spectrum-progress-circle-thickness-medium: 4px; + --spectrum-progress-circle-thickness-large: 5px; + --spectrum-toast-height: 56px; + --spectrum-toast-maximum-width: 420px; + --spectrum-toast-top-to-workflow-icon: 17px; + --spectrum-toast-top-to-text: 16px; + --spectrum-toast-bottom-to-text: 19px; + --spectrum-action-bar-height: 56px; + --spectrum-action-bar-top-to-item-counter: 16px; + --spectrum-swatch-size-extra-small: 20px; + --spectrum-swatch-size-small: 30px; + --spectrum-swatch-size-medium: 40px; + --spectrum-swatch-size-large: 50px; + --spectrum-progress-bar-thickness-small: 5px; + --spectrum-progress-bar-thickness-medium: 8px; + --spectrum-progress-bar-thickness-large: 10px; + --spectrum-progress-bar-thickness-extra-large: 13px; + --spectrum-meter-width: 240px; + --spectrum-meter-thickness-small: 5px; + --spectrum-meter-thickness-large: 8px; + --spectrum-tag-top-to-avatar-small: 5px; + --spectrum-tag-top-to-avatar-medium: 7px; + --spectrum-tag-top-to-avatar-large: 11px; + --spectrum-tag-top-to-cross-icon-small: 10px; + --spectrum-tag-top-to-cross-icon-medium: 15px; + --spectrum-tag-top-to-cross-icon-large: 19px; + --spectrum-popover-top-to-content-area: 5px; + --spectrum-menu-item-edge-to-content-not-selected-small: 24px; + --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; + --spectrum-menu-item-edge-to-content-not-selected-large: 47px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; + --spectrum-menu-item-top-to-disclosure-icon-small: 9px; + --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; + --spectrum-menu-item-top-to-disclosure-icon-large: 17px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; + --spectrum-menu-item-top-to-selected-icon-small: 9px; + --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-to-field-label-small: 6px; + --spectrum-slider-control-to-field-label-medium: 10px; + --spectrum-slider-control-to-field-label-large: 14px; + --spectrum-slider-control-to-field-label-extra-large: 17px; + --spectrum-picker-visual-to-disclosure-icon-small: 9px; + --spectrum-picker-visual-to-disclosure-icon-medium: 10px; + --spectrum-picker-visual-to-disclosure-icon-large: 11px; + --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; + --spectrum-text-area-minimum-width: 140px; + --spectrum-text-area-minimum-height: 70px; + --spectrum-combo-box-visual-to-field-button-small: 9px; + --spectrum-combo-box-visual-to-field-button-medium: 10px; + --spectrum-combo-box-visual-to-field-button-large: 11px; + --spectrum-combo-box-visual-to-field-button-extra-large: 13px; + --spectrum-thumbnail-size-50: 20px; + --spectrum-thumbnail-size-75: 22px; + --spectrum-thumbnail-size-100: 26px; + --spectrum-thumbnail-size-200: 28px; + --spectrum-thumbnail-size-300: 32px; + --spectrum-thumbnail-size-400: 36px; + --spectrum-thumbnail-size-500: 40px; + --spectrum-thumbnail-size-600: 46px; + --spectrum-thumbnail-size-700: 50px; + --spectrum-thumbnail-size-800: 55px; + --spectrum-thumbnail-size-900: 62px; + --spectrum-thumbnail-size-1000: 70px; + --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); + --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-breadcrumbs-height-multiline: 84px; + --spectrum-breadcrumbs-top-to-text: 17px; + --spectrum-breadcrumbs-top-to-text-compact: 16px; + --spectrum-breadcrumbs-top-to-text-multiline: 15px; + --spectrum-breadcrumbs-bottom-to-text: 19px; + --spectrum-breadcrumbs-bottom-to-text-compact: 19px; + --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; + --spectrum-breadcrumbs-start-edge-to-text: 9px; + --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; + --spectrum-breadcrumbs-top-to-separator-icon: 25px; + --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; + --spectrum-breadcrumbs-top-to-truncated-menu: 10px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; + --spectrum-avatar-size-50: 20px; + --spectrum-avatar-size-75: 22px; + --spectrum-avatar-size-100: 26px; + --spectrum-avatar-size-200: 28px; + --spectrum-avatar-size-300: 32px; + --spectrum-avatar-size-400: 36px; + --spectrum-avatar-size-500: 40px; + --spectrum-avatar-size-600: 46px; + --spectrum-avatar-size-700: 50px; + --spectrum-alert-banner-minimum-height: 64px; + --spectrum-alert-banner-width: 680px; + --spectrum-alert-banner-top-to-workflow-icon: 21px; + --spectrum-alert-banner-top-to-text: 21px; + --spectrum-alert-banner-bottom-to-text: 22px; + --spectrum-rating-indicator-width: 22px; + --spectrum-rating-indicator-to-icon: 5px; + --spectrum-color-area-width: 240px; + --spectrum-color-area-minimum-width: 80px; + --spectrum-color-area-height: 240px; + --spectrum-color-area-minimum-height: 80px; + --spectrum-color-wheel-width: 240px; + --spectrum-color-wheel-minimum-width: 219px; + --spectrum-color-slider-length: 240px; + --spectrum-color-slider-minimum-length: 100px; + --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); + --spectrum-illustrated-message-cjk-title-size: var(--spectrum-heading-cjk-size-s); + --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); + --spectrum-coach-mark-width: 216px; + --spectrum-coach-mark-minimum-width: 216px; + --spectrum-coach-mark-maximum-width: 248px; + --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); + --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; + --spectrum-coach-mark-media-height: 162px; + --spectrum-coach-mark-media-minimum-height: 121px; + --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-regular-small: 7px; + --spectrum-accordion-small-top-to-text-spacious: 12px; + --spectrum-accordion-top-to-text-regular-medium: 9px; + --spectrum-accordion-top-to-text-spacious-medium: 14px; + --spectrum-accordion-top-to-text-compact-large: 7px; + --spectrum-accordion-top-to-text-regular-large: 12px; + --spectrum-accordion-top-to-text-spacious-large: 14px; + --spectrum-accordion-top-to-text-compact-extra-large: 7px; + --spectrum-accordion-top-to-text-regular-extra-large: 12px; + --spectrum-accordion-top-to-text-spacious-extra-large: 14px; + --spectrum-accordion-bottom-to-text-compact-small: 4px; + --spectrum-accordion-bottom-to-text-regular-small: 9px; + --spectrum-accordion-bottom-to-text-spacious-small: 14px; + --spectrum-accordion-bottom-to-text-compact-medium: 8px; + --spectrum-accordion-bottom-to-text-regular-medium: 13px; + --spectrum-accordion-bottom-to-text-spacious-medium: 18px; + --spectrum-accordion-bottom-to-text-compact-large: 9px; + --spectrum-accordion-bottom-to-text-regular-large: 14px; + --spectrum-accordion-bottom-to-text-spacious-large: 19px; + --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; + --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-content-area-top-to-content: 10px; + --spectrum-accordion-content-area-bottom-to-content: 20px; + --spectrum-color-handle-size: 20px; + --spectrum-color-handle-size-key-focus: 40px; + --spectrum-table-column-header-row-top-to-text-small: 10px; + --spectrum-table-column-header-row-top-to-text-medium: 9px; + --spectrum-table-column-header-row-top-to-text-large: 13px; + --spectrum-table-column-header-row-top-to-text-extra-large: 16px; + --spectrum-table-column-header-row-bottom-to-text-small: 11px; + --spectrum-table-column-header-row-bottom-to-text-medium: 10px; + --spectrum-table-column-header-row-bottom-to-text-large: 13px; + --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; + --spectrum-table-row-height-small-regular: 40px; + --spectrum-table-row-height-medium-regular: 50px; + --spectrum-table-row-height-large-regular: 60px; + --spectrum-table-row-height-extra-large-regular: 70px; + --spectrum-table-row-height-small-spacious: 50px; + --spectrum-table-row-height-medium-spacious: 60px; + --spectrum-table-row-height-large-spacious: 70px; + --spectrum-table-row-height-extra-large-spacious: 80px; + --spectrum-table-row-top-to-text-small-regular: 10px; + --spectrum-table-row-top-to-text-medium-regular: 14px; + --spectrum-table-row-top-to-text-large-regular: 18px; + --spectrum-table-row-top-to-text-extra-large-regular: 21px; + --spectrum-table-row-bottom-to-text-small-regular: 11px; + --spectrum-table-row-bottom-to-text-medium-regular: 15px; + --spectrum-table-row-bottom-to-text-large-regular: 18px; + --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; + --spectrum-table-row-top-to-text-small-spacious: 15px; + --spectrum-table-row-top-to-text-medium-spacious: 18px; + --spectrum-table-row-top-to-text-large-spacious: 23px; + --spectrum-table-row-top-to-text-extra-large-spacious: 26px; + --spectrum-table-row-bottom-to-text-small-spacious: 16px; + --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-checkbox-to-text: 30px; + --spectrum-table-header-row-checkbox-to-top-small: 14px; + --spectrum-table-header-row-checkbox-to-top-medium: 13px; + --spectrum-table-header-row-checkbox-to-top-large: 17px; + --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; + --spectrum-table-row-checkbox-to-top-small-compact: 9px; + --spectrum-table-row-checkbox-to-top-small-regular: 14px; + --spectrum-table-row-checkbox-to-top-small-spacious: 19px; + --spectrum-table-row-checkbox-to-top-medium-compact: 13px; + --spectrum-table-row-checkbox-to-top-medium-regular: 18px; + --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; + --spectrum-table-row-checkbox-to-top-large-compact: 17px; + --spectrum-table-row-checkbox-to-top-large-regular: 22px; + --spectrum-table-row-checkbox-to-top-large-spacious: 27px; + --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; + --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; + --spectrum-table-section-header-row-height-small: 30px; + --spectrum-table-section-header-row-height-medium: 40px; + --spectrum-table-section-header-row-height-large: 50px; + --spectrum-table-section-header-row-height-extra-large: 60px; + --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; + --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; + --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; + --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; + --spectrum-tab-item-to-tab-item-horizontal-small: 27px; + --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; + --spectrum-tab-item-to-tab-item-horizontal-large: 33px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; + --spectrum-tab-item-to-tab-item-vertical-small: 5px; + --spectrum-tab-item-to-tab-item-vertical-medium: 5px; + --spectrum-tab-item-to-tab-item-vertical-large: 6px; + --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; + --spectrum-tab-item-start-to-edge-small: 13px; + --spectrum-tab-item-start-to-edge-medium: 15px; + --spectrum-tab-item-start-to-edge-large: 17px; + --spectrum-tab-item-start-to-edge-extra-large: 19px; + --spectrum-tab-item-top-to-text-small: 14px; + --spectrum-tab-item-bottom-to-text-small: 15px; + --spectrum-tab-item-top-to-text-medium: 18px; + --spectrum-tab-item-bottom-to-text-medium: 19px; + --spectrum-tab-item-top-to-text-large: 22px; + --spectrum-tab-item-bottom-to-text-large: 22px; + --spectrum-tab-item-top-to-text-extra-large: 25px; + --spectrum-tab-item-bottom-to-text-extra-large: 25px; + --spectrum-tab-item-top-to-text-compact-small: 5px; + --spectrum-tab-item-bottom-to-text-compact-small: 6px; + --spectrum-tab-item-top-to-text-compact-medium: 9px; + --spectrum-tab-item-bottom-to-text-compact-medium: 10px; + --spectrum-tab-item-top-to-text-compact-large: 12px; + --spectrum-tab-item-bottom-to-text-compact-large: 14px; + --spectrum-tab-item-top-to-text-compact-extra-large: 15px; + --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; + --spectrum-tab-item-top-to-workflow-icon-small: 15px; + --spectrum-tab-item-top-to-workflow-icon-medium: 19px; + --spectrum-tab-item-top-to-workflow-icon-large: 23px; + --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; + --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; + --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; + --spectrum-tab-item-focus-indicator-gap-small: 9px; + --spectrum-tab-item-focus-indicator-gap-medium: 10px; + --spectrum-tab-item-focus-indicator-gap-large: 11px; + --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; + --spectrum-side-navigation-width: 240px; + --spectrum-side-navigation-minimum-width: 200px; + --spectrum-side-navigation-maximum-width: 300px; + --spectrum-side-navigation-second-level-edge-to-text: 30px; + --spectrum-side-navigation-third-level-edge-to-text: 45px; + --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-bottom-to-text: 10px; + --spectrum-tray-top-to-content-area: 5px; + --spectrum-accordion-top-to-text-spacious-small: 12px; + --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-text-to-control-75: 11px; + --spectrum-text-to-control-100: 13px; + --spectrum-text-to-control-200: 14px; + --spectrum-text-to-control-300: 16px; + --spectrum-component-height-50: 26px; + --spectrum-component-height-75: 30px; + --spectrum-component-height-100: 40px; + --spectrum-component-height-200: 50px; + --spectrum-component-height-300: 60px; + --spectrum-component-height-400: 70px; + --spectrum-component-height-500: 80px; + --spectrum-component-pill-edge-to-visual-75: 13px; + --spectrum-component-pill-edge-to-visual-100: 17px; + --spectrum-component-pill-edge-to-visual-200: 22px; + --spectrum-component-pill-edge-to-visual-300: 27px; + --spectrum-component-pill-edge-to-visual-only-75: 5px; + --spectrum-component-pill-edge-to-visual-only-100: 9px; + --spectrum-component-pill-edge-to-visual-only-200: 13px; + --spectrum-component-pill-edge-to-visual-only-300: 16px; + --spectrum-component-pill-edge-to-text-75: 15px; + --spectrum-component-pill-edge-to-text-100: 20px; + --spectrum-component-pill-edge-to-text-200: 25px; + --spectrum-component-pill-edge-to-text-300: 30px; + --spectrum-component-edge-to-visual-50: 7px; + --spectrum-component-edge-to-visual-75: 9px; + --spectrum-component-edge-to-visual-100: 12px; + --spectrum-component-edge-to-visual-200: 16px; + --spectrum-component-edge-to-visual-300: 19px; + --spectrum-component-edge-to-visual-only-50: 4px; + --spectrum-component-edge-to-visual-only-75: 5px; + --spectrum-component-edge-to-visual-only-100: 9px; + --spectrum-component-edge-to-visual-only-200: 13px; + --spectrum-component-edge-to-visual-only-300: 16px; + --spectrum-component-edge-to-text-50: 10px; + --spectrum-component-edge-to-text-75: 11px; + --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-text-50: 4px; + --spectrum-component-top-to-text-75: 5px; + --spectrum-component-top-to-text-100: 8px; + --spectrum-component-top-to-text-200: 12px; + --spectrum-component-top-to-text-300: 15px; + --spectrum-component-bottom-to-text-50: 6px; + --spectrum-component-bottom-to-text-75: 6px; + --spectrum-component-bottom-to-text-100: 11px; + --spectrum-component-bottom-to-text-200: 14px; + --spectrum-component-bottom-to-text-300: 18px; + --spectrum-component-to-menu-small: 7px; + --spectrum-component-to-menu-medium: 8px; + --spectrum-component-to-menu-large: 9px; + --spectrum-component-to-menu-extra-large: 10px; + --spectrum-field-edge-to-disclosure-icon-75: 9px; + --spectrum-field-edge-to-disclosure-icon-100: 13px; + --spectrum-field-edge-to-disclosure-icon-200: 17px; + --spectrum-field-edge-to-disclosure-icon-300: 22px; + --spectrum-field-end-edge-to-disclosure-icon-75: 9px; + --spectrum-field-end-edge-to-disclosure-icon-100: 13px; + --spectrum-field-end-edge-to-disclosure-icon-200: 17px; + --spectrum-field-end-edge-to-disclosure-icon-300: 22px; + --spectrum-field-top-to-disclosure-icon-75: 9px; + --spectrum-field-top-to-disclosure-icon-100: 13px; + --spectrum-field-top-to-disclosure-icon-200: 17px; + --spectrum-field-top-to-disclosure-icon-300: 22px; + --spectrum-field-top-to-alert-icon-small: 5px; + --spectrum-field-top-to-alert-icon-medium: 9px; + --spectrum-field-top-to-alert-icon-large: 13px; + --spectrum-field-top-to-alert-icon-extra-large: 16px; + --spectrum-field-top-to-validation-icon-small: 9px; + --spectrum-field-top-to-validation-icon-medium: 13px; + --spectrum-field-top-to-validation-icon-large: 17px; + --spectrum-field-top-to-validation-icon-extra-large: 22px; + --spectrum-field-top-to-progress-circle-small: 7px; + --spectrum-field-top-to-progress-circle-medium: 12px; + --spectrum-field-top-to-progress-circle-large: 17px; + --spectrum-field-top-to-progress-circle-extra-large: 22px; + --spectrum-field-edge-to-alert-icon-small: 11px; + --spectrum-field-edge-to-alert-icon-medium: 15px; + --spectrum-field-edge-to-alert-icon-large: 19px; + --spectrum-field-edge-to-alert-icon-extra-large: 22px; + --spectrum-field-edge-to-validation-icon-small: 11px; + --spectrum-field-edge-to-validation-icon-medium: 15px; + --spectrum-field-edge-to-validation-icon-large: 19px; + --spectrum-field-edge-to-validation-icon-extra-large: 22px; + --spectrum-field-text-to-alert-icon-small: 10px; + --spectrum-field-text-to-alert-icon-medium: 15px; + --spectrum-field-text-to-alert-icon-large: 19px; + --spectrum-field-text-to-alert-icon-extra-large: 22px; + --spectrum-field-text-to-validation-icon-small: 10px; + --spectrum-field-text-to-validation-icon-medium: 15px; + --spectrum-field-text-to-validation-icon-large: 19px; + --spectrum-field-text-to-validation-icon-extra-large: 22px; + --spectrum-field-width: 240px; + --spectrum-character-count-to-field-quiet-small: -4px; + --spectrum-character-count-to-field-quiet-medium: -4px; + --spectrum-character-count-to-field-quiet-large: -4px; + --spectrum-character-count-to-field-quiet-extra-large: -5px; + --spectrum-side-label-character-count-to-field: 15px; + --spectrum-side-label-character-count-top-margin-small: 5px; + --spectrum-side-label-character-count-top-margin-medium: 10px; + --spectrum-side-label-character-count-top-margin-large: 14px; + --spectrum-side-label-character-count-top-margin-extra-large: 18px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; + --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-color-control-track-width: 30px; + --spectrum-font-size-50: 13px; + --spectrum-font-size-75: 15px; + --spectrum-font-size-100: 17px; + --spectrum-font-size-200: 19px; + --spectrum-font-size-300: 22px; + --spectrum-font-size-400: 24px; + --spectrum-font-size-500: 27px; + --spectrum-font-size-600: 31px; + --spectrum-font-size-700: 34px; + --spectrum-font-size-800: 39px; + --spectrum-font-size-900: 44px; + --spectrum-font-size-1000: 49px; + --spectrum-font-size-1100: 55px; + --spectrum-font-size-1200: 62px; + --spectrum-font-size-1300: 70px; +} +.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-neutral-subdued-background-color-down: var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-700); + --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-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-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-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-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); + --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); + --spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-500); + --spectrum-celery-background-color-default: var(--spectrum-celery-600); + --spectrum-green-background-color-default: var(--spectrum-green-900); + --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); + --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); + --spectrum-blue-background-color-default: var(--spectrum-blue-900); + --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); + --spectrum-purple-background-color-default: var(--spectrum-purple-900); + --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); + --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); + --spectrum-neutral-visual-color: var(--spectrum-gray-500); + --spectrum-accent-visual-color: var(--spectrum-accent-color-800); + --spectrum-informative-visual-color: var(--spectrum-informative-color-800); + --spectrum-negative-visual-color: var(--spectrum-negative-color-800); + --spectrum-notice-visual-color: var(--spectrum-notice-color-700); + --spectrum-positive-visual-color: var(--spectrum-positive-color-700); + --spectrum-gray-visual-color: var(--spectrum-gray-500); + --spectrum-red-visual-color: var(--spectrum-red-800); + --spectrum-orange-visual-color: var(--spectrum-orange-700); + --spectrum-yellow-visual-color: var(--spectrum-yellow-600); + --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); + --spectrum-celery-visual-color: var(--spectrum-celery-700); + --spectrum-green-visual-color: var(--spectrum-green-700); + --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); + --spectrum-cyan-visual-color: var(--spectrum-cyan-600); + --spectrum-blue-visual-color: var(--spectrum-blue-800); + --spectrum-indigo-visual-color: var(--spectrum-indigo-800); + --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-opacity-checkerboard-square-dark: var(--spectrum-gray-200); + --spectrum-gray-50-rgb: 255, 255, 255; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 253, 253, 253; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 248, 248, 248; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 230, 230, 230; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 213, 213, 213; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 177, 177, 177; + --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: 109, 109, 109; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 70, 70, 70; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 34, 34, 34; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 0, 0, 0; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-blue-100-rgb: 224, 242, 255; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 202, 232, 255; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 181, 222, 255; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 150, 206, 253; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 120, 187, 250; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 89, 167, 246; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 56, 146, 243; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 20, 122, 243; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 2, 101, 220; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 0, 84, 182; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 0, 68, 145; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 0, 53, 113; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 0, 39, 84; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 0, 28, 60; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-red-100-rgb: 255, 235, 231; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 255, 221, 214; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 255, 205, 195; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 255, 183, 169; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 255, 155, 136; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 255, 124, 101; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 247, 92, 70; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 234, 56, 41; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 211, 21, 16; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 180, 0, 0; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 147, 0, 0; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 116, 0, 0; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 89, 0, 0; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 67, 0, 0; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-orange-100-rgb: 255, 236, 204; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 255, 223, 173; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 253, 210, 145; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 255, 187, 99; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 255, 160, 55; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 246, 133, 17; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 228, 111, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 203, 93, 0; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 177, 76, 0; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 149, 61, 0; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 122, 47, 0; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 97, 35, 0; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 73, 25, 1; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 53, 18, 1; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-yellow-100-rgb: 251, 241, 152; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 248, 231, 80; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 248, 217, 4; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 232, 198, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 215, 179, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 196, 159, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 176, 140, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 155, 120, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 133, 102, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 112, 83, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 91, 67, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 72, 51, 0; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 54, 37, 0; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 40, 26, 0; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-chartreuse-100-rgb: 219, 252, 110; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 203, 244, 67; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 188, 233, 42; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 170, 216, 22; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 152, 197, 10; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 135, 177, 3; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 118, 156, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 103, 136, 0; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 87, 116, 0; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 72, 96, 0; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 58, 77, 0; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 44, 59, 0; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 33, 44, 0; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 24, 31, 0; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-celery-100-rgb: 205, 252, 191; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 174, 246, 157; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 150, 238, 133; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 114, 224, 106; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 78, 207, 80; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 39, 187, 54; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 7, 167, 33; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 0, 145, 18; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 0, 124, 15; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 0, 103, 15; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 0, 83, 13; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 0, 64, 10; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 0, 48, 7; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 0, 34, 5; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-green-100-rgb: 206, 248, 224; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 173, 244, 206; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 137, 236, 188; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 103, 222, 168; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 73, 204, 147; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 47, 184, 128; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 21, 164, 110; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 0, 143, 93; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 0, 122, 77; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 0, 101, 62; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 0, 81, 50; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 5, 63, 39; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 10, 46, 29; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 10, 32, 21; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-seafoam-100-rgb: 206, 247, 243; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 170, 241, 234; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 140, 233, 226; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 101, 218, 210; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 63, 201, 193; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 15, 181, 174; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 0, 161, 154; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 0, 140, 135; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 0, 119, 114; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 0, 99, 95; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 12, 79, 76; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 18, 60, 58; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 18, 44, 43; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 15, 31, 30; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-cyan-100-rgb: 197, 248, 255; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 164, 240, 255; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 136, 231, 250; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 96, 216, 243; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 51, 197, 232; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 18, 176, 218; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 1, 156, 200; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 0, 134, 180; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 0, 113, 159; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 0, 93, 137; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 0, 74, 115; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 0, 57, 93; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 0, 42, 70; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 0, 30, 51; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-indigo-100-rgb: 237, 238, 255; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 224, 226, 255; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 211, 213, 255; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 193, 196, 255; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 172, 175, 255; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 149, 153, 255; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 126, 132, 252; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 104, 109, 244; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 82, 88, 228; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 64, 70, 202; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 50, 54, 168; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 38, 41, 134; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 27, 30, 100; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 20, 22, 72; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-purple-100-rgb: 246, 235, 255; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 238, 221, 255; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 230, 208, 255; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 219, 187, 254; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 204, 164, 253; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 189, 139, 252; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 174, 114, 249; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 157, 87, 244; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 137, 61, 231; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 115, 38, 211; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 93, 19, 183; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 71, 12, 148; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 51, 16, 106; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 35, 15, 73; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-fuchsia-100-rgb: 255, 233, 252; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 255, 218, 250; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 254, 199, 248; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 251, 174, 246; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 245, 146, 243; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 237, 116, 237; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 224, 85, 226; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 205, 58, 206; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 182, 34, 183; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 157, 3, 158; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 128, 0, 129; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 100, 6, 100; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 71, 14, 70; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 50, 13, 49; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-magenta-100-rgb: 255, 234, 241; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 255, 220, 232; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 255, 202, 221; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 255, 178, 206; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 255, 149, 189; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 250, 119, 170; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 239, 90, 152; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 222, 61, 130; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 200, 34, 105; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 173, 9, 85; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 142, 0, 69; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 112, 0, 55; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 84, 3, 42; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 60, 6, 29; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-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); + --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); +} +.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-field-label-text-to-asterisk-small: 4px; + --spectrum-field-label-text-to-asterisk-medium: 4px; + --spectrum-field-label-text-to-asterisk-large: 5px; + --spectrum-field-label-text-to-asterisk-extra-large: 5px; + --spectrum-field-label-top-to-asterisk-small: 8px; + --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-medium: 4px; + --spectrum-field-label-top-margin-large: 5px; + --spectrum-field-label-top-margin-extra-large: 5px; + --spectrum-field-label-to-component-quiet-small: -8px; + --spectrum-field-label-to-component-quiet-medium: -8px; + --spectrum-field-label-to-component-quiet-large: -12px; + --spectrum-field-label-to-component-quiet-extra-large: -15px; + --spectrum-help-text-top-to-workflow-icon-small: 4px; + --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-medium: 8px; + --spectrum-status-light-dot-size-large: 10px; + --spectrum-status-light-dot-size-extra-large: 10px; + --spectrum-status-light-top-to-dot-small: 8px; + --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-medium: 4px; + --spectrum-action-button-edge-to-hold-icon-large: 5px; + --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; + --spectrum-tooltip-tip-width: 8px; + --spectrum-tooltip-tip-height: 4px; + --spectrum-tooltip-maximum-width: 160px; + --spectrum-progress-circle-size-small: 16px; + --spectrum-progress-circle-size-medium: 32px; + --spectrum-progress-circle-size-large: 64px; + --spectrum-progress-circle-thickness-small: 2px; + --spectrum-progress-circle-thickness-medium: 3px; + --spectrum-progress-circle-thickness-large: 4px; + --spectrum-toast-height: 48px; + --spectrum-toast-maximum-width: 336px; + --spectrum-toast-top-to-workflow-icon: 15px; + --spectrum-toast-top-to-text: 14px; + --spectrum-toast-bottom-to-text: 17px; + --spectrum-action-bar-height: 48px; + --spectrum-action-bar-top-to-item-counter: 14px; + --spectrum-swatch-size-extra-small: 16px; + --spectrum-swatch-size-small: 24px; + --spectrum-swatch-size-medium: 32px; + --spectrum-swatch-size-large: 40px; + --spectrum-progress-bar-thickness-small: 4px; + --spectrum-progress-bar-thickness-medium: 6px; + --spectrum-progress-bar-thickness-large: 8px; + --spectrum-progress-bar-thickness-extra-large: 10px; + --spectrum-meter-width: 192px; + --spectrum-meter-thickness-small: 4px; + --spectrum-meter-thickness-large: 6px; + --spectrum-tag-top-to-avatar-small: 4px; + --spectrum-tag-top-to-avatar-medium: 6px; + --spectrum-tag-top-to-avatar-large: 9px; + --spectrum-tag-top-to-cross-icon-small: 8px; + --spectrum-tag-top-to-cross-icon-medium: 12px; + --spectrum-tag-top-to-cross-icon-large: 15px; + --spectrum-popover-top-to-content-area: 4px; + --spectrum-menu-item-edge-to-content-not-selected-small: 28px; + --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; + --spectrum-menu-item-edge-to-content-not-selected-large: 38px; + --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; + --spectrum-menu-item-top-to-disclosure-icon-small: 7px; + --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; + --spectrum-menu-item-top-to-disclosure-icon-large: 14px; + --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; + --spectrum-menu-item-top-to-selected-icon-small: 7px; + --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-to-field-label-small: 5px; + --spectrum-slider-control-to-field-label-medium: 8px; + --spectrum-slider-control-to-field-label-large: 11px; + --spectrum-slider-control-to-field-label-extra-large: 14px; + --spectrum-picker-visual-to-disclosure-icon-small: 7px; + --spectrum-picker-visual-to-disclosure-icon-medium: 8px; + --spectrum-picker-visual-to-disclosure-icon-large: 9px; + --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; + --spectrum-text-area-minimum-width: 112px; + --spectrum-text-area-minimum-height: 56px; + --spectrum-combo-box-visual-to-field-button-small: 7px; + --spectrum-combo-box-visual-to-field-button-medium: 8px; + --spectrum-combo-box-visual-to-field-button-large: 9px; + --spectrum-combo-box-visual-to-field-button-extra-large: 10px; + --spectrum-thumbnail-size-50: 16px; + --spectrum-thumbnail-size-75: 18px; + --spectrum-thumbnail-size-100: 20px; + --spectrum-thumbnail-size-200: 22px; + --spectrum-thumbnail-size-300: 26px; + --spectrum-thumbnail-size-400: 28px; + --spectrum-thumbnail-size-500: 32px; + --spectrum-thumbnail-size-600: 36px; + --spectrum-thumbnail-size-700: 40px; + --spectrum-thumbnail-size-800: 44px; + --spectrum-thumbnail-size-900: 50px; + --spectrum-thumbnail-size-1000: 56px; + --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); + --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-breadcrumbs-height-multiline: 72px; + --spectrum-breadcrumbs-top-to-text: 13px; + --spectrum-breadcrumbs-top-to-text-compact: 11px; + --spectrum-breadcrumbs-top-to-text-multiline: 12px; + --spectrum-breadcrumbs-bottom-to-text: 15px; + --spectrum-breadcrumbs-bottom-to-text-compact: 12px; + --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; + --spectrum-breadcrumbs-start-edge-to-text: 8px; + --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; + --spectrum-breadcrumbs-top-to-separator-icon: 19px; + --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; + --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; + --spectrum-breadcrumbs-top-to-truncated-menu: 8px; + --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; + --spectrum-avatar-size-50: 16px; + --spectrum-avatar-size-75: 18px; + --spectrum-avatar-size-100: 20px; + --spectrum-avatar-size-200: 22px; + --spectrum-avatar-size-300: 26px; + --spectrum-avatar-size-400: 28px; + --spectrum-avatar-size-500: 32px; + --spectrum-avatar-size-600: 36px; + --spectrum-avatar-size-700: 40px; + --spectrum-alert-banner-minimum-height: 48px; + --spectrum-alert-banner-width: 832px; + --spectrum-alert-banner-top-to-workflow-icon: 15px; + --spectrum-alert-banner-top-to-text: 14px; + --spectrum-alert-banner-bottom-to-text: 17px; + --spectrum-rating-indicator-width: 18px; + --spectrum-rating-indicator-to-icon: 4px; + --spectrum-color-area-width: 192px; + --spectrum-color-area-minimum-width: 64px; + --spectrum-color-area-height: 192px; + --spectrum-color-area-minimum-height: 64px; + --spectrum-color-wheel-width: 192px; + --spectrum-color-wheel-minimum-width: 175px; + --spectrum-color-slider-length: 192px; + --spectrum-color-slider-minimum-length: 80px; + --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); + --spectrum-illustrated-message-cjk-title-size: var(--spectrum-heading-cjk-size-m); + --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); + --spectrum-coach-mark-width: 296px; + --spectrum-coach-mark-minimum-width: 296px; + --spectrum-coach-mark-maximum-width: 380px; + --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); + --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; + --spectrum-coach-mark-media-height: 222px; + --spectrum-coach-mark-media-minimum-height: 166px; + --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-regular-small: 5px; + --spectrum-accordion-small-top-to-text-spacious: 9px; + --spectrum-accordion-top-to-text-regular-medium: 8px; + --spectrum-accordion-top-to-text-spacious-medium: 12px; + --spectrum-accordion-top-to-text-compact-large: 4px; + --spectrum-accordion-top-to-text-regular-large: 9px; + --spectrum-accordion-top-to-text-spacious-large: 12px; + --spectrum-accordion-top-to-text-compact-extra-large: 5px; + --spectrum-accordion-top-to-text-regular-extra-large: 9px; + --spectrum-accordion-top-to-text-spacious-extra-large: 13px; + --spectrum-accordion-bottom-to-text-compact-small: 2px; + --spectrum-accordion-bottom-to-text-regular-small: 7px; + --spectrum-accordion-bottom-to-text-spacious-small: 11px; + --spectrum-accordion-bottom-to-text-compact-medium: 5px; + --spectrum-accordion-bottom-to-text-regular-medium: 9px; + --spectrum-accordion-bottom-to-text-spacious-medium: 13px; + --spectrum-accordion-bottom-to-text-compact-large: 8px; + --spectrum-accordion-bottom-to-text-regular-large: 11px; + --spectrum-accordion-bottom-to-text-spacious-large: 16px; + --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; + --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-content-area-top-to-content: 8px; + --spectrum-accordion-content-area-bottom-to-content: 16px; + --spectrum-color-handle-size: 16px; + --spectrum-color-handle-size-key-focus: 32px; + --spectrum-table-column-header-row-top-to-text-small: 8px; + --spectrum-table-column-header-row-top-to-text-medium: 7px; + --spectrum-table-column-header-row-top-to-text-large: 10px; + --spectrum-table-column-header-row-top-to-text-extra-large: 13px; + --spectrum-table-column-header-row-bottom-to-text-small: 9px; + --spectrum-table-column-header-row-bottom-to-text-medium: 8px; + --spectrum-table-column-header-row-bottom-to-text-large: 10px; + --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; + --spectrum-table-row-height-small-regular: 32px; + --spectrum-table-row-height-medium-regular: 40px; + --spectrum-table-row-height-large-regular: 48px; + --spectrum-table-row-height-extra-large-regular: 56px; + --spectrum-table-row-height-small-spacious: 40px; + --spectrum-table-row-height-medium-spacious: 48px; + --spectrum-table-row-height-large-spacious: 56px; + --spectrum-table-row-height-extra-large-spacious: 64px; + --spectrum-table-row-top-to-text-small-regular: 8px; + --spectrum-table-row-top-to-text-medium-regular: 11px; + --spectrum-table-row-top-to-text-large-regular: 14px; + --spectrum-table-row-top-to-text-extra-large-regular: 17px; + --spectrum-table-row-bottom-to-text-small-regular: 9px; + --spectrum-table-row-bottom-to-text-medium-regular: 12px; + --spectrum-table-row-bottom-to-text-large-regular: 14px; + --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; + --spectrum-table-row-top-to-text-small-spacious: 12px; + --spectrum-table-row-top-to-text-medium-spacious: 15px; + --spectrum-table-row-top-to-text-large-spacious: 18px; + --spectrum-table-row-top-to-text-extra-large-spacious: 21px; + --spectrum-table-row-bottom-to-text-small-spacious: 13px; + --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-checkbox-to-text: 24px; + --spectrum-table-header-row-checkbox-to-top-small: 10px; + --spectrum-table-header-row-checkbox-to-top-medium: 9px; + --spectrum-table-header-row-checkbox-to-top-large: 12px; + --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; + --spectrum-table-row-checkbox-to-top-small-compact: 6px; + --spectrum-table-row-checkbox-to-top-small-regular: 10px; + --spectrum-table-row-checkbox-to-top-small-spacious: 14px; + --spectrum-table-row-checkbox-to-top-medium-compact: 9px; + --spectrum-table-row-checkbox-to-top-medium-regular: 13px; + --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; + --spectrum-table-row-checkbox-to-top-large-compact: 12px; + --spectrum-table-row-checkbox-to-top-large-regular: 16px; + --spectrum-table-row-checkbox-to-top-large-spacious: 20px; + --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; + --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; + --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; + --spectrum-table-section-header-row-height-small: 24px; + --spectrum-table-section-header-row-height-medium: 32px; + --spectrum-table-section-header-row-height-large: 40px; + --spectrum-table-section-header-row-height-extra-large: 48px; + --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; + --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; + --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; + --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; + --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; + --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; + --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; + --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; + --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; + --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; + --spectrum-tab-item-to-tab-item-horizontal-small: 21px; + --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; + --spectrum-tab-item-to-tab-item-horizontal-large: 27px; + --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; + --spectrum-tab-item-to-tab-item-vertical-small: 4px; + --spectrum-tab-item-to-tab-item-vertical-medium: 4px; + --spectrum-tab-item-to-tab-item-vertical-large: 5px; + --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; + --spectrum-tab-item-start-to-edge-small: 12px; + --spectrum-tab-item-start-to-edge-medium: 12px; + --spectrum-tab-item-start-to-edge-large: 13px; + --spectrum-tab-item-start-to-edge-extra-large: 13px; + --spectrum-tab-item-top-to-text-small: 11px; + --spectrum-tab-item-bottom-to-text-small: 12px; + --spectrum-tab-item-top-to-text-medium: 14px; + --spectrum-tab-item-bottom-to-text-medium: 14px; + --spectrum-tab-item-top-to-text-large: 16px; + --spectrum-tab-item-bottom-to-text-large: 18px; + --spectrum-tab-item-top-to-text-extra-large: 19px; + --spectrum-tab-item-bottom-to-text-extra-large: 20px; + --spectrum-tab-item-top-to-text-compact-small: 4px; + --spectrum-tab-item-bottom-to-text-compact-small: 5px; + --spectrum-tab-item-top-to-text-compact-medium: 6px; + --spectrum-tab-item-bottom-to-text-compact-medium: 8px; + --spectrum-tab-item-top-to-text-compact-large: 10px; + --spectrum-tab-item-bottom-to-text-compact-large: 12px; + --spectrum-tab-item-top-to-text-compact-extra-large: 12px; + --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; + --spectrum-tab-item-top-to-workflow-icon-small: 13px; + --spectrum-tab-item-top-to-workflow-icon-medium: 15px; + --spectrum-tab-item-top-to-workflow-icon-large: 17px; + --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; + --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; + --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; + --spectrum-tab-item-focus-indicator-gap-small: 7px; + --spectrum-tab-item-focus-indicator-gap-medium: 8px; + --spectrum-tab-item-focus-indicator-gap-large: 9px; + --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; + --spectrum-side-navigation-width: 192px; + --spectrum-side-navigation-minimum-width: 160px; + --spectrum-side-navigation-maximum-width: 240px; + --spectrum-side-navigation-second-level-edge-to-text: 24px; + --spectrum-side-navigation-third-level-edge-to-text: 36px; + --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-bottom-to-text: 8px; + --spectrum-tray-top-to-content-area: 4px; + --spectrum-accordion-top-to-text-spacious-small: 9px; + --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-text-to-control-75: 9px; + --spectrum-text-to-control-100: 10px; + --spectrum-text-to-control-200: 11px; + --spectrum-text-to-control-300: 13px; + --spectrum-component-height-50: 20px; + --spectrum-component-height-75: 24px; + --spectrum-component-height-100: 32px; + --spectrum-component-height-200: 40px; + --spectrum-component-height-300: 48px; + --spectrum-component-height-400: 56px; + --spectrum-component-height-500: 64px; + --spectrum-component-pill-edge-to-visual-75: 10px; + --spectrum-component-pill-edge-to-visual-100: 14px; + --spectrum-component-pill-edge-to-visual-200: 18px; + --spectrum-component-pill-edge-to-visual-300: 21px; + --spectrum-component-pill-edge-to-visual-only-75: 4px; + --spectrum-component-pill-edge-to-visual-only-100: 7px; + --spectrum-component-pill-edge-to-visual-only-200: 10px; + --spectrum-component-pill-edge-to-visual-only-300: 13px; + --spectrum-component-pill-edge-to-text-75: 12px; + --spectrum-component-pill-edge-to-text-100: 16px; + --spectrum-component-pill-edge-to-text-200: 20px; + --spectrum-component-pill-edge-to-text-300: 24px; + --spectrum-component-edge-to-visual-50: 6px; + --spectrum-component-edge-to-visual-75: 7px; + --spectrum-component-edge-to-visual-100: 10px; + --spectrum-component-edge-to-visual-200: 13px; + --spectrum-component-edge-to-visual-300: 15px; + --spectrum-component-edge-to-visual-only-50: 3px; + --spectrum-component-edge-to-visual-only-75: 4px; + --spectrum-component-edge-to-visual-only-100: 7px; + --spectrum-component-edge-to-visual-only-200: 10px; + --spectrum-component-edge-to-visual-only-300: 13px; + --spectrum-component-edge-to-text-50: 8px; + --spectrum-component-edge-to-text-75: 9px; + --spectrum-component-edge-to-text-100: 12px; + --spectrum-component-edge-to-text-200: 15px; + --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-text-50: 3px; + --spectrum-component-top-to-text-75: 4px; + --spectrum-component-top-to-text-100: 6px; + --spectrum-component-top-to-text-200: 9px; + --spectrum-component-top-to-text-300: 12px; + --spectrum-component-bottom-to-text-50: 3px; + --spectrum-component-bottom-to-text-75: 5px; + --spectrum-component-bottom-to-text-100: 9px; + --spectrum-component-bottom-to-text-200: 11px; + --spectrum-component-bottom-to-text-300: 14px; + --spectrum-component-to-menu-small: 6px; + --spectrum-component-to-menu-medium: 6px; + --spectrum-component-to-menu-large: 7px; + --spectrum-component-to-menu-extra-large: 8px; + --spectrum-field-edge-to-disclosure-icon-75: 7px; + --spectrum-field-edge-to-disclosure-icon-100: 11px; + --spectrum-field-edge-to-disclosure-icon-200: 14px; + --spectrum-field-edge-to-disclosure-icon-300: 17px; + --spectrum-field-end-edge-to-disclosure-icon-75: 7px; + --spectrum-field-end-edge-to-disclosure-icon-100: 11px; + --spectrum-field-end-edge-to-disclosure-icon-200: 14px; + --spectrum-field-end-edge-to-disclosure-icon-300: 17px; + --spectrum-field-top-to-disclosure-icon-75: 7px; + --spectrum-field-top-to-disclosure-icon-100: 11px; + --spectrum-field-top-to-disclosure-icon-200: 14px; + --spectrum-field-top-to-disclosure-icon-300: 17px; + --spectrum-field-top-to-alert-icon-small: 4px; + --spectrum-field-top-to-alert-icon-medium: 7px; + --spectrum-field-top-to-alert-icon-large: 10px; + --spectrum-field-top-to-alert-icon-extra-large: 13px; + --spectrum-field-top-to-validation-icon-small: 7px; + --spectrum-field-top-to-validation-icon-medium: 11px; + --spectrum-field-top-to-validation-icon-large: 14px; + --spectrum-field-top-to-validation-icon-extra-large: 17px; + --spectrum-field-top-to-progress-circle-small: 4px; + --spectrum-field-top-to-progress-circle-medium: 8px; + --spectrum-field-top-to-progress-circle-large: 12px; + --spectrum-field-top-to-progress-circle-extra-large: 16px; + --spectrum-field-edge-to-alert-icon-small: 9px; + --spectrum-field-edge-to-alert-icon-medium: 12px; + --spectrum-field-edge-to-alert-icon-large: 15px; + --spectrum-field-edge-to-alert-icon-extra-large: 18px; + --spectrum-field-edge-to-validation-icon-small: 9px; + --spectrum-field-edge-to-validation-icon-medium: 12px; + --spectrum-field-edge-to-validation-icon-large: 15px; + --spectrum-field-edge-to-validation-icon-extra-large: 18px; + --spectrum-field-text-to-alert-icon-small: 8px; + --spectrum-field-text-to-alert-icon-medium: 12px; + --spectrum-field-text-to-alert-icon-large: 15px; + --spectrum-field-text-to-alert-icon-extra-large: 18px; + --spectrum-field-text-to-validation-icon-small: 8px; + --spectrum-field-text-to-validation-icon-medium: 12px; + --spectrum-field-text-to-validation-icon-large: 15px; + --spectrum-field-text-to-validation-icon-extra-large: 18px; + --spectrum-field-width: 192px; + --spectrum-character-count-to-field-quiet-small: -3px; + --spectrum-character-count-to-field-quiet-medium: -3px; + --spectrum-character-count-to-field-quiet-large: -3px; + --spectrum-character-count-to-field-quiet-extra-large: -4px; + --spectrum-side-label-character-count-to-field: 12px; + --spectrum-side-label-character-count-top-margin-small: 4px; + --spectrum-side-label-character-count-top-margin-medium: 8px; + --spectrum-side-label-character-count-top-margin-large: 11px; + --spectrum-side-label-character-count-top-margin-extra-large: 14px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; + --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-color-control-track-width: 24px; + --spectrum-font-size-50: 11px; + --spectrum-font-size-75: 12px; + --spectrum-font-size-100: 14px; + --spectrum-font-size-200: 16px; + --spectrum-font-size-300: 18px; + --spectrum-font-size-400: 20px; + --spectrum-font-size-500: 22px; + --spectrum-font-size-600: 25px; + --spectrum-font-size-700: 28px; + --spectrum-font-size-800: 32px; + --spectrum-font-size-900: 36px; + --spectrum-font-size-1000: 40px; + --spectrum-font-size-1100: 45px; + --spectrum-font-size-1200: 50px; + --spectrum-font-size-1300: 60px; +} +.spectrum--dark { + --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-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); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-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-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); + + --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-swatch-border-color-rgb: 255, 255, 255; + + --spectrum-swatch-border-color-opacity: 0.51; + + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb: 255, 255, 255; + --spectrum-swatch-border-color-light-opacity: 0.2; + --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); +} +.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-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); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-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-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb); + + --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-swatch-border-color-rgb: 255, 255, 255; + + --spectrum-swatch-border-color-opacity: 0.51; + + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb: 255, 255, 255; + --spectrum-swatch-border-color-light-opacity: 0.2; + --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); +} +.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-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); + --system: spectrum; + --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0: 0ms; + --spectrum-animation-duration-100: 130ms; + --spectrum-animation-duration-200: 160ms; + --spectrum-animation-duration-300: 190ms; + --spectrum-animation-duration-400: 220ms; + --spectrum-animation-duration-500: 250ms; + --spectrum-animation-duration-600: 300ms; + --spectrum-animation-duration-700: 350ms; + --spectrum-animation-duration-800: 400ms; + --spectrum-animation-duration-900: 450ms; + --spectrum-animation-duration-1000: 500ms; + --spectrum-animation-duration-2000: 1000ms; + --spectrum-animation-duration-4000: 2000ms; + --spectrum-animation-duration-6000: 3000ms; + --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); + --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); + --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); + + --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); + + --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; + --spectrum-serif-font: var(--spectrum-serif-font-family-stack); + + --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; + + --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + + --spectrum-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-font-style: var(--spectrum-default-font-style); + --spectrum-font-size: var(--spectrum-font-size-100); + + --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font: var(--spectrum-code-font-family-stack); + --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; + --spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb)); + --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; + --spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb)); + + --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); +} +.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; + --spectrum-slider-tick-mark-height: 13px; + --spectrum-slider-ramp-track-height: 20px; + + --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 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"; + --spectrum-colorwheel-colorarea-container-size: 182px; + + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); + + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; + + --spectrum-menu-item-checkmark-height-small: 12px; + --spectrum-menu-item-checkmark-height-medium: 14px; + --spectrum-menu-item-checkmark-height-large: 16px; + --spectrum-menu-item-checkmark-height-extra-large: 16px; + + --spectrum-menu-item-checkmark-width-small: 12px; + --spectrum-menu-item-checkmark-width-medium: 14px; + --spectrum-menu-item-checkmark-width-large: 16px; + --spectrum-menu-item-checkmark-width-extra-large: 16px; + + --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); + + --spectrum-button-top-to-text-small: 6px; + --spectrum-button-bottom-to-text-small: 5px; + --spectrum-button-top-to-text-medium: 9px; + --spectrum-button-bottom-to-text-medium: 10px; + --spectrum-button-top-to-text-large: 12px; + --spectrum-button-bottom-to-text-large: 13px; + --spectrum-button-top-to-text-extra-large: 16px; + --spectrum-button-bottom-to-text-extra-large: 17px; + + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200); + + --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); + + --spectrum-coach-indicator-gap: 8px; + --spectrum-coach-indicator-ring-diameter: 20px; + --spectrum-coach-indicator-quiet-ring-diameter: 10px; + + --spectrum-coachmark-buttongroup-display: none; + --spectrum-coachmark-buttongroup-mobile-display: flex; + --spectrum-coachmark-menu-display: none; + --spectrum-coachmark-menu-mobile-display: inline-flex; + + --spectrum-well-padding: 20px; + --spectrum-well-margin-top: 5px; + --spectrum-well-min-width: 300px; + --spectrum-well-border-radius: 5px; + --spectrum-workflow-icon-size-xxl: 40px; + --spectrum-workflow-icon-size-xxs: 15px; + + --spectrum-treeview-item-indentation-medium: 20px; + --spectrum-treeview-item-indentation-small: 15px; + --spectrum-treeview-item-indentation-large: 25px; + --spectrum-treeview-item-indentation-extra-large: 30px; + --spectrum-treeview-indicator-inset-block-start: 6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; + + --spectrum-dialog-confirm-entry-animation-distance: 25px; + --spectrum-dialog-confirm-hero-height: 160px; + --spectrum-dialog-confirm-border-radius: 5px; + --spectrum-dialog-confirm-title-text-size: 19px; + --spectrum-dialog-confirm-description-text-size: 15px; + --spectrum-dialog-confirm-padding-grid: 24px; + + --spectrum-datepicker-initial-width: 160px; + --spectrum-datepicker-generic-padding: 15px; + --spectrum-datepicker-dash-line-height: 30px; + --spectrum-datepicker-width-quiet-first: 90px; + --spectrum-datepicker-width-quiet-second: 20px; + --spectrum-datepicker-datetime-width-first: 45px; + --spectrum-datepicker-invalid-icon-to-button: 10px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; + --spectrum-datepicker-input-datetime-width: 30px; + + --spectrum-pagination-textfield-width: 60px; + --spectrum-pagination-item-inline-spacing: 6px; + + --spectrum-dial-border-radius: 20px; + --spectrum-dial-handle-position: 10px; + --spectrum-dial-handle-block-margin: 20px; + --spectrum-dial-handle-inline-margin: 20px; + --spectrum-dial-controls-margin: 10px; + --spectrum-dial-label-gap-y: 6px; + --spectrum-dial-label-container-top-to-text: 5px; + + --spectrum-assetcard-focus-ring-border-radius: 9px; + --spectrum-assetcard-selectionindicator-margin: 15px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance: 5px; + + --spectrum-ui-icon-medium-display: none; + --spectrum-ui-icon-large-display: block; +} +.spectrum--light, +.spectrum--lightest { + --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; + --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-menu-item-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-black-200); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-800); + + --spectrum-calendar-day-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-calendar-day-background-color-hover: rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-today-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-calendar-day-background-color-cap-selected: rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); + + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + + --spectrum-badge-label-icon-color-primary: var(--spectrum-white); + + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); + --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + + --spectrum-well-border-color: var(--spectrum-black); + + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); + + --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06); + --spectrum-treeview-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1); + + --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); + + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); + + --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2); + --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); + + --spectrum-swatch-border-color-rgb: 0, 0, 0; + + --spectrum-swatch-border-color-opacity: 0.51; + + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb: 0, 0, 0; + --spectrum-swatch-border-color-light-opacity: 0.2; + --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); +} +.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; + --spectrum-slider-tick-mark-height: 10px; + --spectrum-slider-ramp-track-height: 16px; + + --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; + --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + --spectrum-colorwheel-colorarea-container-size: 144px; + + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); + + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; + + --spectrum-menu-item-checkmark-height-small: 10px; + --spectrum-menu-item-checkmark-height-medium: 10px; + --spectrum-menu-item-checkmark-height-large: 12px; + --spectrum-menu-item-checkmark-height-extra-large: 14px; + + --spectrum-menu-item-checkmark-width-small: 10px; + --spectrum-menu-item-checkmark-width-medium: 10px; + --spectrum-menu-item-checkmark-width-large: 12px; + --spectrum-menu-item-checkmark-width-extra-large: 14px; + + --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); + + --spectrum-button-top-to-text-small: 5px; + --spectrum-button-bottom-to-text-small: 4px; + --spectrum-button-top-to-text-medium: 7px; + --spectrum-button-bottom-to-text-medium: 8px; + --spectrum-button-top-to-text-large: 10px; + --spectrum-button-bottom-to-text-large: 10px; + --spectrum-button-top-to-text-extra-large: 13px; + --spectrum-button-bottom-to-text-extra-large: 13px; + + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100); + + --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); + + --spectrum-coach-indicator-gap: 6px; + --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); + + --spectrum-coachmark-buttongroup-display: flex; + --spectrum-coachmark-buttongroup-mobile-display: none; + --spectrum-coachmark-menu-display: inline-flex; + --spectrum-coachmark-menu-mobile-display: none; + --spectrum-well-padding: var(--spectrum-spacing-300); + --spectrum-well-margin-top: var(--spectrum-spacing-75); + --spectrum-well-min-width: 240px; + --spectrum-well-border-radius: var(--spectrum-spacing-75); + --spectrum-workflow-icon-size-xxl: 32px; + --spectrum-workflow-icon-size-xxs: 12px; + + --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large: 20px; + --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); + --spectrum-treeview-indicator-inset-block-start: 5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; + + --spectrum-dialog-confirm-entry-animation-distance: 20px; + --spectrum-dialog-confirm-hero-height: 128px; + --spectrum-dialog-confirm-border-radius: 4px; + --spectrum-dialog-confirm-title-text-size: 18px; + --spectrum-dialog-confirm-description-text-size: 14px; + --spectrum-dialog-confirm-padding-grid: 40px; + + --spectrum-datepicker-initial-width: 128px; + --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height: 24px; + --spectrum-datepicker-width-quiet-first: 72px; + --spectrum-datepicker-width-quiet-second: 16px; + --spectrum-datepicker-datetime-width-first: 36px; + --spectrum-datepicker-invalid-icon-to-button: 8px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; + --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing: 5px; + + --spectrum-dial-border-radius: 16px; + --spectrum-dial-handle-position: 8px; + --spectrum-dial-handle-block-margin: 16px; + --spectrum-dial-handle-inline-margin: 16px; + --spectrum-dial-controls-margin: 8px; + --spectrum-dial-label-gap-y: 5px; + --spectrum-dial-label-container-top-to-text: 4px; + + --spectrum-assetcard-focus-ring-border-radius: 8px; + --spectrum-assetcard-selectionindicator-margin: 12px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); + + --spectrum-ui-icon-medium-display: block; + --spectrum-ui-icon-large-display: none; +} +.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); + + --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700); +} +.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); + --system: express; +} +.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; + --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"; + + --spectrum-dialog-confirm-border-radius: 8px; + + --spectrum-dial-border-radius: 15px; + + --spectrum-assetcard-focus-ring-border-radius: 12px; +} +.spectrum--express.spectrum--light, +.spectrum--express.spectrum--lightest { + --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); + --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); + + --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-900); +} +.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; + --spectrum-colorwheel-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0"; + --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; + + --spectrum-dialog-confirm-border-radius: 6px; + + --spectrum-dial-border-radius: 12px; + + --spectrum-assetcard-focus-ring-border-radius: 10px; +} diff --git a/tokens/package.json b/tokens/package.json index 8d827144562..ca4cf9ffc21 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -33,8 +33,7 @@ "postcss-rgb-mapping": "workspace:^", "postcss-sorting": "^9.1.0", "prettier": "^3.4.2", - "style-dictionary": "^4.2.0", - "style-dictionary-sets": "^2.3.0" + "style-dictionary": "^4.2.0" }, "keywords": [ "spectrum", diff --git a/tokens/project.json b/tokens/project.json index f7b27a0c22c..2ea7dc71e91 100644 --- a/tokens/project.json +++ b/tokens/project.json @@ -17,7 +17,7 @@ "inputs": ["core", "tools", { "externalDependencies": ["postcss", "rimraf"] }], "options": { "commands": [ - "cross-env NODE_OPTIONS=\"--no-warnings\" node \"./tasks/token-rollup.js\"", + "node --no-warnings ./tasks/token-rollup.js", "rm -f ./dist/css/express/custom-light*.css ./dist/css/express/custom-dark*.css ./dist/css/spectrum/custom-dark*.css ./dist/css/spectrum/custom-light*.css", "cross-env NODE_OPTIONS=\"--no-warnings\" postcss ./dist/css/*.css ./dist/css/spectrum/*.css ./dist/css/express/*.css --replace" ], @@ -50,7 +50,11 @@ "style-dictionary": { "dependsOn": ["clean"], "executor": "nx:run-commands", - "inputs": ["scripts"], + "inputs": [ + "{projectRoot}/postcss.config.js", + "{projectRoot}/style-dictionary.config.js", + "{projectRoot}/utilities/style-dictionary.utils.js" + ], "options": { "commands": [ "style-dictionary build --config style-dictionary.config.js" diff --git a/tokens/style-dictionary.config.js b/tokens/style-dictionary.config.js index 10c3465b735..6ed151902dd 100644 --- a/tokens/style-dictionary.config.js +++ b/tokens/style-dictionary.config.js @@ -12,17 +12,21 @@ */ import { createRequire } from "node:module"; -import { dirname, join } from "path"; +import { dirname, join, sep } from "node:path"; import generateFileConfig from "./utilities/style-dictionary.utils.js"; -// import { registerFormat, registerTransform } from "style-dictionary"; -// // import { AttributeSetsTransform, CSSOpenTypeTransform, CSSSetsFormatter, NameKebabTransfom } from "style-dictionary-sets"; +import StyleDictionary from "style-dictionary"; -// // registerTransform(CSSOpenTypeTransform); -// // registerTransform(NameKebabTransfom); -// // registerTransform(AttributeSetsTransform); -// // registerFormat(CSSSetsFormatter); +import AttributeSetsTransform from "./utilities/attribute-sets-transform.js"; +import CSSOpenTypeTransform from "./utilities/css-font-open-type-transform.js"; +import CSSSetsFormatter from "./utilities/css-sets-formatter.js"; +import NameKebabTransfom from "./utilities/name-kebab-transform.js"; + +StyleDictionary.registerTransform(CSSOpenTypeTransform); +StyleDictionary.registerTransform(NameKebabTransfom); +StyleDictionary.registerTransform(AttributeSetsTransform); +StyleDictionary.registerFormat(CSSSetsFormatter); /** * @note This references the package.json because we want the root folder and @@ -30,36 +34,33 @@ import generateFileConfig from "./utilities/style-dictionary.utils.js"; * in the package.json is present. */ const require = createRequire(import.meta.url); -const tokensPath = require.resolve("@adobe/spectrum-tokens/package.json"); +const tokensPath = require.resolve(join("@adobe", "spectrum-tokens", "package.json")); const tokensDir = dirname(tokensPath); const setNames = ["desktop", "mobile", "light", "dark", "darkest"]; export default { - source: [join(tokensDir, "src/*.json")], + source: [join(tokensDir, "src", "*.json")], platforms: { css: { - buildPath: "dist/css/", - // transforms: [ - // AttributeSetsTransform.name, - // NameKebabTransfom.name, - // CSSOpenTypeTransform.name, - // ], + buildPath: join("dist", "css") + sep, + transforms: [ + AttributeSetsTransform.name, + NameKebabTransfom.name, + CSSOpenTypeTransform.name, + ], prefix: "spectrum", files: [ generateFileConfig(), - ...["spectrum", "express"].map((subSystemName) => generateFileConfig({ subSystemName }) - ), + ...["spectrum", "express"].map((subSystemName) => generateFileConfig({ subSystemName })), ...setNames.map((context) => generateFileConfig({ setName: context })), ...setNames.map((context) => generateFileConfig({ setName: context, subSystemName: "spectrum", - }) - ), + })), ...setNames.map((context) => generateFileConfig({ setName: context, subSystemName: "express", - }) - ), + })), ], }, }, diff --git a/tokens/tasks/token-rollup.js b/tokens/tasks/token-rollup.js index d7b07d96016..f51e91ca528 100644 --- a/tokens/tasks/token-rollup.js +++ b/tokens/tasks/token-rollup.js @@ -14,7 +14,7 @@ /* eslint-disable no-console */ import fs, { existsSync, readdirSync } from "fs"; -import { basename, join } from "path"; +import { basename, join, relative } from "path"; const fsp = fs.promises; import fg from "fast-glob"; @@ -63,7 +63,7 @@ async function componentTheming() { // Nothing to do if there's no content if (!contentData || contentData.length === 0) continue; - const imports = contentData.map(({ input }) => `@import "${input}";`).join("\n"); + const imports = contentData.map(({ input }) => `@import "./${relative(componentDir, input)}";`).join("\n"); const sharedPostCSSConfig = { cwd: componentDir, @@ -93,7 +93,7 @@ async function componentTheming() { }, ), ...contentData.map(async ({ content, input }) => { - return processCSS(content, join(componentDir, input), join(dirs.tokens, "dist", "css", "components", basename(input, ".css"), `${component}.css`), { + return processCSS(content, input, join(dirs.tokens, "dist", "css", "components", basename(input, ".css"), `${component}.css`), { skipMapping: false, // Only output the new selectors with the system mappings stripLocalSelectors: true, @@ -135,7 +135,7 @@ async function appendCustomOverrides({ cwd = process.cwd() } = {}) { promises.push( copy(join(`custom-${theme}`, file), join("dist", "css", theme, file), { cwd }), - combinedContent[0].content ? writeAndReport(combinedContent[0].content, join(cwd, "dist", "css", theme, strippedFilename), { cwd }) : Promise.resolve() + combinedContent?.[0]?.content ? writeAndReport(combinedContent[0].content, join(cwd, "dist", "css", theme, strippedFilename), { cwd }) : Promise.resolve() ); } }); @@ -231,4 +231,6 @@ async function main({ }); } +main(); + export { main as default }; diff --git a/tokens/utilities/attribute-sets-transform.js b/tokens/utilities/attribute-sets-transform.js new file mode 100644 index 00000000000..f1a41ad21c8 --- /dev/null +++ b/tokens/utilities/attribute-sets-transform.js @@ -0,0 +1,12 @@ +export default { + type: "attribute", + name: "attribute/sets", + matcher: (token) => token.path.includes("sets"), + transform: (token) => { + return { + sets: token.path.filter( + (_, index, array) => array[index - 1] == "sets" + ), + }; + }, +}; diff --git a/tokens/utilities/css-font-open-type-transform.js b/tokens/utilities/css-font-open-type-transform.js new file mode 100644 index 00000000000..3a461b357fb --- /dev/null +++ b/tokens/utilities/css-font-open-type-transform.js @@ -0,0 +1,46 @@ +export default { + type: "value", + name: "font/openType", + matcher: (token) => token.name.includes("font-weight"), + transform: (token) => { + switch(token.value) { + case "thin": + case "hairline": + return "100"; + case "extra-light": + case "extralight": + case "ultra-light": + case "ultralight": + return "200"; + case "light": + return "300"; + case "normal": + case "regular": + return "400"; + case "medium": + return "500"; + case "semibold": + case "semi-bold": + case "demibold": + case "demi-bold": + return "600"; + case "bold": + return "700"; + case "extrabold": + case "extra-bold": + case "ultrabold": + case "ultra-bold": + return "800"; + case "black": + case "heavy": + return "900"; + case "extra-black": + case "extrablack": + case "ultra-black": + case "ultrablack": + return "950"; + default: + return token.value; + } + }, +}; diff --git a/tokens/utilities/css-sets-formatter.js b/tokens/utilities/css-sets-formatter.js new file mode 100644 index 00000000000..d5668262a43 --- /dev/null +++ b/tokens/utilities/css-sets-formatter.js @@ -0,0 +1,49 @@ +import { usesReferences } from "style-dictionary/utils"; +import { generateNameArray } from "./helper-functions.js"; + +/** + * @description Formats the value of a token for CSS + * @param {import('style-dictionary').Token} token + * @param {import('style-dictionary').PlatformConfig} platform + * @returns {string} + */ +const valueFormatter = (token, platform) => { + if (!usesReferences(token.original.value)) return token.value; + + const resultAr = token.original.value + .substring(1, token.original.value.length - 1) + .split("."); + + if (platform.prefix) resultAr.splice(0, 0, platform.prefix); + + return `var(--${resultAr.join("-")})`; +}; + +/** + * The format function to split out the token set data into distinct CSS variables + * @type {import('style-dictionary/types').FormatFn} format + */ +const format = ({ dictionary, platform, options }) => { + const resultAr = []; + + dictionary.allTokens.forEach((token) => { + const name = generateNameArray(token, platform.prefix); + const value = valueFormatter(token, platform); + + if (!value) return; + + resultAr.push( + ` --${name.join("-")}: ${value};` + ); + }); + + const selector = options.selector ? options.selector : ":root"; + + return `${selector} {\n${resultAr.join("\n")}\n}\n`; +}; +format.nested = true; + +export default { + name: "css/sets", + format, +}; diff --git a/tokens/utilities/helper-functions.js b/tokens/utilities/helper-functions.js new file mode 100644 index 00000000000..b44dceacda8 --- /dev/null +++ b/tokens/utilities/helper-functions.js @@ -0,0 +1,30 @@ +export const dimensionRegex = /(?:[0-9]+px)|(?:[0-9]+\.[0-9]+)/; +export const colorRegex = /rgba?\(([0-9]+), ?([0-9]+), ?([0-9]+)(?:, ?([0-1]|0\.[0-9]+))?\)/; + +export const isObject = (item) => + typeof item === "object" && !Array.isArray(item) && item !== null; + +export const isASet = (value) => isObject(value) && "sets" in value; + +export const generateNameArray = (token, prefix) => { + let name = prefix ? [prefix] : []; + const cleanTokenPath = []; + for (let i = 0; i < token.path.length; i++) { + if (token.path[i] === "sets") { + i++; + } + else { + cleanTokenPath.push(token.path[i]); + } + } + name = name.concat(cleanTokenPath); + return name; +}; + +export const sortObject = (obj, initialObj = {}) => + Object.keys(obj) + .sort() + .reduce(function (result, key) { + result[key] = obj[key]; + return result; + }, initialObj); diff --git a/tokens/utilities/json-sets-formatter.js b/tokens/utilities/json-sets-formatter.js new file mode 100644 index 00000000000..22fe08219c9 --- /dev/null +++ b/tokens/utilities/json-sets-formatter.js @@ -0,0 +1,50 @@ +import merge from "deepmerge"; +import { usesReferences } from "style-dictionary/utils"; + +const isObject = (item) => { + return typeof item === "object" && !Array.isArray(item) && item !== null; +}; + +const pathToObj = (pathAr, value) => + pathAr.reduceRight((value, key) => ({ [key]: value }), value); + +const isASet = (value) => { + return isObject(value) && "sets" in value; +}; + +const getValue = (token, dictionary) => { + if (usesReferences(token)) { + const ref = token.original.value; + if (isASet(token.value)) { + const sets = {}; + for (const setName in token.value.sets) { + sets[setName] = getValue(token.value.sets[setName], dictionary); + } + const uuidObj = (Object.hasOwn(token, "uuid")) ? {uuid: token.uuid}: {}; + return { ref, sets, ...uuidObj }; + } + else { + const uuidObj = (Object.hasOwn(token, "uuid")) ? {uuid: token.uuid}: {}; + return { ref, value: token.value, ...uuidObj }; + } + } + else { + const uuidObj = (Object.hasOwn(token, "uuid")) ? {uuid: token.uuid}: {}; + return { value: token.value, ...uuidObj }; + } +}; + +const format = ({ dictionary }) => { + let resultObj = {}; + dictionary.allTokens.forEach((token) => { + const value = getValue(token, dictionary); + resultObj = merge(resultObj, pathToObj(token.path, value)); + }); + return JSON.stringify(resultObj, null, 2); +}; +format.nested = true; + +export default { + name: "json/sets", + format, +}; diff --git a/tokens/utilities/name-kebab-transform.js b/tokens/utilities/name-kebab-transform.js new file mode 100644 index 00000000000..606a52caaca --- /dev/null +++ b/tokens/utilities/name-kebab-transform.js @@ -0,0 +1,8 @@ +import { kebabCase } from "lodash-es"; + +export default { + type: "name", + name: "name/kebab", + transform: (token, options) => + kebabCase([options.prefix].concat(token.path).join(" ")), +}; diff --git a/tokens/utilities/style-dictionary.utils.js b/tokens/utilities/style-dictionary.utils.js index b745a238a7f..c6356a4a1bd 100644 --- a/tokens/utilities/style-dictionary.utils.js +++ b/tokens/utilities/style-dictionary.utils.js @@ -11,10 +11,11 @@ * governing permissions and limitations under the License. */ +import path from "path"; + export default function ({ setName, subSystemName } = {}) { const baseConfig = { - // format: "css/sets", - format: "css/variables", + format: "css/sets", options: { showFileHeader: false, outputReferences: true, @@ -22,14 +23,14 @@ export default function ({ setName, subSystemName } = {}) { }; const sets = [setName, subSystemName].filter(Boolean); - if (!sets.length) { + if (sets.length === 0) { return { ...baseConfig, destination: "global-vars.css", filter: (token) => !token.path.includes("sets"), options: { - ...baseConfig.options, selector: ".spectrum", + ...baseConfig.options, }, }; } @@ -106,7 +107,7 @@ export default function ({ setName, subSystemName } = {}) { return { ...baseConfig, - destination: `${subSystemName ? `${subSystemName}/` : ""}${scope}-vars.css`, + destination: subSystemName ? path.join(subSystemName, `${scope}-vars.css`) : `${scope}-vars.css`, filter, options: { ...baseConfig.options, diff --git a/yarn.lock b/yarn.lock index 303dda92fbd..84aef2820a8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4232,7 +4232,6 @@ __metadata: postcss-sorting: "npm:^9.1.0" prettier: "npm:^3.4.2" style-dictionary: "npm:^4.2.0" - style-dictionary-sets: "npm:^2.3.0" languageName: unknown linkType: soft @@ -6558,31 +6557,10 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001640": - version: 1.0.30001643 - resolution: "caniuse-lite@npm:1.0.30001643" - checksum: 10c0/7fcd0fd180bbe6764311ad57b0d39c23afdcc3bb1d8f804e7a76752c62a85b1bb7cf74b672d9da2f0afe7ad75336ff811a6fe279eb2a54bc04c272b6b62e57f1 - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001629": - version: 1.0.30001636 - resolution: "caniuse-lite@npm:1.0.30001636" - checksum: 10c0/e5f965b4da7bae1531fd9f93477d015729ff9e3fa12670ead39a9e6cdc4c43e62c272d47857c5cc332e7b02d697cb3f2f965a1030870ac7476da60c2fc81ee94 - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001646": - version: 1.0.30001660 - resolution: "caniuse-lite@npm:1.0.30001660" - checksum: 10c0/d28900b56c597176d515c3175ca75c454f2d30cb2c09a44d7bdb009bb0c4d8a2557905adb77642889bbe9feb85fbfe9d974c8b8e53521fb4b50ee16ab246104e - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001669": - version: 1.0.30001673 - resolution: "caniuse-lite@npm:1.0.30001673" - checksum: 10c0/0e73a2b0f06973052e563dec9990a6fd440d510fa2ff54fa50310e736abb86e96c96b43c10e609fc22f2109f98fe76428b70441baf6b1a49f69ccf50c1879f6b +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001629, caniuse-lite@npm:^1.0.30001640, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001669": + version: 1.0.30001690 + resolution: "caniuse-lite@npm:1.0.30001690" + checksum: 10c0/646bd469032afa90400a84dec30a2b00a6eda62c03ead358117e3f884cda8aacec02ec058a6dbee5eaf9714f83e483b9b0eb4fb42febb8076569f5ca40f1d347 languageName: node linkType: hard @@ -7920,7 +7898,7 @@ __metadata: languageName: node linkType: hard -"deepmerge@npm:^4.2.2, deepmerge@npm:^4.3.1": +"deepmerge@npm:^4.3.1": version: 4.3.1 resolution: "deepmerge@npm:4.3.1" checksum: 10c0/e53481aaf1aa2c4082b5342be6b6d8ad9dfe387bc92ce197a66dea08bd4265904a087e75e464f14d1347cf2ac8afe1e4c16b266e0561cc5df29382d3c5f80044 @@ -16190,15 +16168,6 @@ __metadata: languageName: node linkType: hard -"style-dictionary-sets@npm:^2.3.0": - version: 2.3.0 - resolution: "style-dictionary-sets@npm:2.3.0" - dependencies: - deepmerge: "npm:^4.2.2" - checksum: 10c0/4ed6506ae1709546d4a93d303386dae4d11610c0f409bada47b77607ab564ff95003c1f44b2e18a64752b586c8b065636a1bacab30054d307c6ef19a9aa73c93 - languageName: node - linkType: hard - "style-dictionary@npm:^4.2.0": version: 4.2.0 resolution: "style-dictionary@npm:4.2.0"