diff --git a/.xo-config.cjs b/.xo-config.cjs index 1fe07640a08..87b2ce7e981 100644 --- a/.xo-config.cjs +++ b/.xo-config.cjs @@ -1,6 +1,9 @@ module.exports = { prettier: true, - ignores: ['./showcases/nuxt-showcase/**'], + ignores: [ + './showcases/nuxt-showcase/**', + './packages/foundations/scripts/**' + ], overrides: [ { files: ['./showcases/angular-showcase/**'], diff --git a/__snapshots__/accordion-item/patternhub/accordion-item-docs-should-match-screenshot.png b/__snapshots__/accordion-item/patternhub/accordion-item-docs-should-match-screenshot.png index 0afb43a6930..a7b5e1061ae 100644 Binary files a/__snapshots__/accordion-item/patternhub/accordion-item-docs-should-match-screenshot.png and b/__snapshots__/accordion-item/patternhub/accordion-item-docs-should-match-screenshot.png differ diff --git a/__snapshots__/accordion-item/patternhub/accordion-item-properties-should-match-screenshot.png b/__snapshots__/accordion-item/patternhub/accordion-item-properties-should-match-screenshot.png index d8da2d723ac..5bd862bd2d5 100644 Binary files a/__snapshots__/accordion-item/patternhub/accordion-item-properties-should-match-screenshot.png and b/__snapshots__/accordion-item/patternhub/accordion-item-properties-should-match-screenshot.png differ diff --git a/__snapshots__/accordion-item/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png b/__snapshots__/accordion-item/showcase/chromium-highContrast/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png similarity index 100% rename from __snapshots__/accordion-item/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png rename to __snapshots__/accordion-item/showcase/chromium-highContrast/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png diff --git a/__snapshots__/accordion-item/showcase/chromium/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png b/__snapshots__/accordion-item/showcase/chromium/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png new file mode 100644 index 00000000000..8d52f39a2c8 Binary files /dev/null and b/__snapshots__/accordion-item/showcase/chromium/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png differ diff --git a/__snapshots__/accordion-item/showcase/chromium/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png b/__snapshots__/accordion-item/showcase/chromium/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png deleted file mode 100644 index b6dc584ef5d..00000000000 Binary files a/__snapshots__/accordion-item/showcase/chromium/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/accordion-item/showcase/firefox/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png b/__snapshots__/accordion-item/showcase/firefox/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png new file mode 100644 index 00000000000..ac2960422bf Binary files /dev/null and b/__snapshots__/accordion-item/showcase/firefox/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png differ diff --git a/__snapshots__/accordion-item/showcase/firefox/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png b/__snapshots__/accordion-item/showcase/firefox/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png deleted file mode 100644 index 7421e6ea17d..00000000000 Binary files a/__snapshots__/accordion-item/showcase/firefox/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/accordion-item/showcase/mobile-chrome/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png b/__snapshots__/accordion-item/showcase/mobile-chrome/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png new file mode 100644 index 00000000000..a3dc5c1b912 Binary files /dev/null and b/__snapshots__/accordion-item/showcase/mobile-chrome/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png differ diff --git a/__snapshots__/accordion-item/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png b/__snapshots__/accordion-item/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png deleted file mode 100644 index b8d20fec177..00000000000 Binary files a/__snapshots__/accordion-item/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/accordion-item/showcase/mobile-safari/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png b/__snapshots__/accordion-item/showcase/mobile-safari/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png new file mode 100644 index 00000000000..6c39e072b5c Binary files /dev/null and b/__snapshots__/accordion-item/showcase/mobile-safari/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png differ diff --git a/__snapshots__/accordion-item/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png b/__snapshots__/accordion-item/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png deleted file mode 100644 index 6883843ecb9..00000000000 Binary files a/__snapshots__/accordion-item/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/accordion-item/showcase/webkit/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png b/__snapshots__/accordion-item/showcase/webkit/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png new file mode 100644 index 00000000000..1dd0f5bcf14 Binary files /dev/null and b/__snapshots__/accordion-item/showcase/webkit/DBAccordionItem-should-match-screenshot-1/DBAccordionItem-should-match-screenshot.png differ diff --git a/__snapshots__/accordion-item/showcase/webkit/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png b/__snapshots__/accordion-item/showcase/webkit/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png deleted file mode 100644 index 6f5c47b3c44..00000000000 Binary files a/__snapshots__/accordion-item/showcase/webkit/regular/neutral-bg-lvl-1/DBAccordionItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/accordion/patternhub/accordion-docs-should-match-screenshot.png b/__snapshots__/accordion/patternhub/accordion-docs-should-match-screenshot.png index 107f3f9c767..07eb715c0fd 100644 Binary files a/__snapshots__/accordion/patternhub/accordion-docs-should-match-screenshot.png and b/__snapshots__/accordion/patternhub/accordion-docs-should-match-screenshot.png differ diff --git a/__snapshots__/accordion/patternhub/accordion-properties-should-match-screenshot.png b/__snapshots__/accordion/patternhub/accordion-properties-should-match-screenshot.png index eb481d46c87..b5a6d440561 100644 Binary files a/__snapshots__/accordion/patternhub/accordion-properties-should-match-screenshot.png and b/__snapshots__/accordion/patternhub/accordion-properties-should-match-screenshot.png differ diff --git a/__snapshots__/accordion/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png b/__snapshots__/accordion/showcase/chromium-highContrast/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png similarity index 100% rename from __snapshots__/accordion/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png rename to __snapshots__/accordion/showcase/chromium-highContrast/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png diff --git a/__snapshots__/accordion/showcase/chromium/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png b/__snapshots__/accordion/showcase/chromium/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png new file mode 100644 index 00000000000..077aac609e0 Binary files /dev/null and b/__snapshots__/accordion/showcase/chromium/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png differ diff --git a/__snapshots__/accordion/showcase/chromium/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png b/__snapshots__/accordion/showcase/chromium/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png deleted file mode 100644 index 3efc1fe0bb4..00000000000 Binary files a/__snapshots__/accordion/showcase/chromium/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/accordion/showcase/firefox/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png b/__snapshots__/accordion/showcase/firefox/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png new file mode 100644 index 00000000000..6f0f5ffab80 Binary files /dev/null and b/__snapshots__/accordion/showcase/firefox/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png differ diff --git a/__snapshots__/accordion/showcase/firefox/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png b/__snapshots__/accordion/showcase/firefox/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png deleted file mode 100644 index 8ce22b0eea5..00000000000 Binary files a/__snapshots__/accordion/showcase/firefox/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/accordion/showcase/mobile-chrome/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png b/__snapshots__/accordion/showcase/mobile-chrome/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png new file mode 100644 index 00000000000..0a9e5a071d3 Binary files /dev/null and b/__snapshots__/accordion/showcase/mobile-chrome/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png differ diff --git a/__snapshots__/accordion/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png b/__snapshots__/accordion/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png deleted file mode 100644 index c3660fb94b3..00000000000 Binary files a/__snapshots__/accordion/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/accordion/showcase/mobile-safari/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png b/__snapshots__/accordion/showcase/mobile-safari/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png new file mode 100644 index 00000000000..835b8dd81c1 Binary files /dev/null and b/__snapshots__/accordion/showcase/mobile-safari/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png differ diff --git a/__snapshots__/accordion/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png b/__snapshots__/accordion/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png deleted file mode 100644 index 812f7b4fe6f..00000000000 Binary files a/__snapshots__/accordion/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/accordion/showcase/webkit/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png b/__snapshots__/accordion/showcase/webkit/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png new file mode 100644 index 00000000000..03694ac338f Binary files /dev/null and b/__snapshots__/accordion/showcase/webkit/DBAccordion-should-match-screenshot-1/DBAccordion-should-match-screenshot.png differ diff --git a/__snapshots__/accordion/showcase/webkit/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png b/__snapshots__/accordion/showcase/webkit/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png deleted file mode 100644 index 51b066bcd01..00000000000 Binary files a/__snapshots__/accordion/showcase/webkit/regular/neutral-bg-lvl-1/DBAccordion-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/badge/patternhub/badge-docs-should-match-screenshot.png b/__snapshots__/badge/patternhub/badge-docs-should-match-screenshot.png index 27aad4689d9..d5509cf1356 100644 Binary files a/__snapshots__/badge/patternhub/badge-docs-should-match-screenshot.png and b/__snapshots__/badge/patternhub/badge-docs-should-match-screenshot.png differ diff --git a/__snapshots__/badge/patternhub/badge-properties-should-match-screenshot.png b/__snapshots__/badge/patternhub/badge-properties-should-match-screenshot.png index 47e8c0f927c..01e0a07a822 100644 Binary files a/__snapshots__/badge/patternhub/badge-properties-should-match-screenshot.png and b/__snapshots__/badge/patternhub/badge-properties-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/chromium-highContrast/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png similarity index 100% rename from __snapshots__/badge/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png rename to __snapshots__/badge/showcase/chromium-highContrast/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png diff --git a/__snapshots__/badge/showcase/chromium/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/chromium/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png new file mode 100644 index 00000000000..2f5eb6481f7 Binary files /dev/null and b/__snapshots__/badge/showcase/chromium/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/chromium/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/chromium/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png deleted file mode 100644 index f16310b4ebd..00000000000 Binary files a/__snapshots__/badge/showcase/chromium/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/badge/showcase/firefox/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/firefox/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png new file mode 100644 index 00000000000..0ab20599d11 Binary files /dev/null and b/__snapshots__/badge/showcase/firefox/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/firefox/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/firefox/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png deleted file mode 100644 index 13beb420f24..00000000000 Binary files a/__snapshots__/badge/showcase/firefox/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/badge/showcase/mobile-chrome/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-chrome/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png new file mode 100644 index 00000000000..8ece5d70144 Binary files /dev/null and b/__snapshots__/badge/showcase/mobile-chrome/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png deleted file mode 100644 index 0b4e12b4580..00000000000 Binary files a/__snapshots__/badge/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/badge/showcase/mobile-safari/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-safari/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png new file mode 100644 index 00000000000..00ebba719b3 Binary files /dev/null and b/__snapshots__/badge/showcase/mobile-safari/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png deleted file mode 100644 index f2a270079c5..00000000000 Binary files a/__snapshots__/badge/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/badge/showcase/webkit/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/webkit/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png new file mode 100644 index 00000000000..a6068b0eec5 Binary files /dev/null and b/__snapshots__/badge/showcase/webkit/DBBadge-should-match-screenshot-1/DBBadge-should-match-screenshot.png differ diff --git a/__snapshots__/badge/showcase/webkit/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png b/__snapshots__/badge/showcase/webkit/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png deleted file mode 100644 index dc517385363..00000000000 Binary files a/__snapshots__/badge/showcase/webkit/regular/neutral-bg-lvl-1/DBBadge-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/brand/patternhub/brand-docs-should-match-screenshot.png b/__snapshots__/brand/patternhub/brand-docs-should-match-screenshot.png index 53da0326c6f..6a8cf931a79 100644 Binary files a/__snapshots__/brand/patternhub/brand-docs-should-match-screenshot.png and b/__snapshots__/brand/patternhub/brand-docs-should-match-screenshot.png differ diff --git a/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png b/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png index 2d645193228..fd6d2f39e04 100644 Binary files a/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png and b/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png differ diff --git a/__snapshots__/brand/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png b/__snapshots__/brand/showcase/chromium-highContrast/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png similarity index 100% rename from __snapshots__/brand/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png rename to __snapshots__/brand/showcase/chromium-highContrast/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png diff --git a/__snapshots__/brand/showcase/chromium/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png b/__snapshots__/brand/showcase/chromium/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png new file mode 100644 index 00000000000..219304ff1ed Binary files /dev/null and b/__snapshots__/brand/showcase/chromium/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png differ diff --git a/__snapshots__/brand/showcase/chromium/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png b/__snapshots__/brand/showcase/chromium/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png deleted file mode 100644 index d14ab511e21..00000000000 Binary files a/__snapshots__/brand/showcase/chromium/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/brand/showcase/firefox/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png b/__snapshots__/brand/showcase/firefox/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png new file mode 100644 index 00000000000..fc20e3b8dd8 Binary files /dev/null and b/__snapshots__/brand/showcase/firefox/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png differ diff --git a/__snapshots__/brand/showcase/firefox/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png b/__snapshots__/brand/showcase/firefox/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png deleted file mode 100644 index b578e504b99..00000000000 Binary files a/__snapshots__/brand/showcase/firefox/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/brand/showcase/mobile-chrome/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png b/__snapshots__/brand/showcase/mobile-chrome/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png new file mode 100644 index 00000000000..5ba2d9205ae Binary files /dev/null and b/__snapshots__/brand/showcase/mobile-chrome/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png differ diff --git a/__snapshots__/brand/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png b/__snapshots__/brand/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png deleted file mode 100644 index c69bdd141e8..00000000000 Binary files a/__snapshots__/brand/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/brand/showcase/mobile-safari/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png b/__snapshots__/brand/showcase/mobile-safari/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png new file mode 100644 index 00000000000..3919cfafb8d Binary files /dev/null and b/__snapshots__/brand/showcase/mobile-safari/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png differ diff --git a/__snapshots__/brand/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png b/__snapshots__/brand/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png deleted file mode 100644 index 76846c06839..00000000000 Binary files a/__snapshots__/brand/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/brand/showcase/webkit/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png b/__snapshots__/brand/showcase/webkit/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png new file mode 100644 index 00000000000..1ee577c78af Binary files /dev/null and b/__snapshots__/brand/showcase/webkit/DBBrand-should-match-screenshot-1/DBBrand-should-match-screenshot.png differ diff --git a/__snapshots__/brand/showcase/webkit/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png b/__snapshots__/brand/showcase/webkit/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png deleted file mode 100644 index 5a644ba1cf6..00000000000 Binary files a/__snapshots__/brand/showcase/webkit/regular/neutral-bg-lvl-1/DBBrand-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/button/patternhub/button-properties-should-match-screenshot.png b/__snapshots__/button/patternhub/button-properties-should-match-screenshot.png index 5621c866f0d..409aa30e642 100644 Binary files a/__snapshots__/button/patternhub/button-properties-should-match-screenshot.png and b/__snapshots__/button/patternhub/button-properties-should-match-screenshot.png differ diff --git a/__snapshots__/button/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/chromium-highContrast/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png similarity index 100% rename from __snapshots__/button/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png rename to __snapshots__/button/showcase/chromium-highContrast/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png diff --git a/__snapshots__/button/showcase/chromium/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/chromium/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png new file mode 100644 index 00000000000..dde14d2f829 Binary files /dev/null and b/__snapshots__/button/showcase/chromium/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png differ diff --git a/__snapshots__/button/showcase/chromium/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/chromium/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png deleted file mode 100644 index f9225ab94a8..00000000000 Binary files a/__snapshots__/button/showcase/chromium/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/button/showcase/firefox/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/firefox/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png new file mode 100644 index 00000000000..c3cfd09c3e7 Binary files /dev/null and b/__snapshots__/button/showcase/firefox/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png differ diff --git a/__snapshots__/button/showcase/firefox/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/firefox/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png deleted file mode 100644 index c5c0bcc3caa..00000000000 Binary files a/__snapshots__/button/showcase/firefox/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/button/showcase/mobile-chrome/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/mobile-chrome/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png new file mode 100644 index 00000000000..d2212706b14 Binary files /dev/null and b/__snapshots__/button/showcase/mobile-chrome/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png differ diff --git a/__snapshots__/button/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png deleted file mode 100644 index 56dd907a279..00000000000 Binary files a/__snapshots__/button/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/button/showcase/mobile-safari/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/mobile-safari/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png new file mode 100644 index 00000000000..9726932780e Binary files /dev/null and b/__snapshots__/button/showcase/mobile-safari/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png differ diff --git a/__snapshots__/button/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png deleted file mode 100644 index f0754b9ad8d..00000000000 Binary files a/__snapshots__/button/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/button/showcase/webkit/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/webkit/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png new file mode 100644 index 00000000000..a769a91f262 Binary files /dev/null and b/__snapshots__/button/showcase/webkit/DBButton-should-match-screenshot-1/DBButton-should-match-screenshot.png differ diff --git a/__snapshots__/button/showcase/webkit/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png b/__snapshots__/button/showcase/webkit/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png deleted file mode 100644 index 8d23e93db68..00000000000 Binary files a/__snapshots__/button/showcase/webkit/regular/neutral-bg-lvl-1/DBButton-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/card/patternhub/card-docs-should-match-screenshot.png b/__snapshots__/card/patternhub/card-docs-should-match-screenshot.png index cdae7e8cd30..7504a846a43 100644 Binary files a/__snapshots__/card/patternhub/card-docs-should-match-screenshot.png and b/__snapshots__/card/patternhub/card-docs-should-match-screenshot.png differ diff --git a/__snapshots__/card/patternhub/card-overview-should-match-screenshot.png b/__snapshots__/card/patternhub/card-overview-should-match-screenshot.png index a25af5ac4b7..e7afc733839 100644 Binary files a/__snapshots__/card/patternhub/card-overview-should-match-screenshot.png and b/__snapshots__/card/patternhub/card-overview-should-match-screenshot.png differ diff --git a/__snapshots__/card/patternhub/card-properties-should-match-screenshot.png b/__snapshots__/card/patternhub/card-properties-should-match-screenshot.png index 383def8a262..4d8e39fb2b5 100644 Binary files a/__snapshots__/card/patternhub/card-properties-should-match-screenshot.png and b/__snapshots__/card/patternhub/card-properties-should-match-screenshot.png differ diff --git a/__snapshots__/card/showcase/chromium-highContrast/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png b/__snapshots__/card/showcase/chromium-highContrast/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png new file mode 100644 index 00000000000..af12e2b6d61 Binary files /dev/null and b/__snapshots__/card/showcase/chromium-highContrast/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png differ diff --git a/__snapshots__/card/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png b/__snapshots__/card/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png deleted file mode 100644 index 1793daa3f74..00000000000 Binary files a/__snapshots__/card/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/card/showcase/chromium/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png b/__snapshots__/card/showcase/chromium/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png new file mode 100644 index 00000000000..92e8abef31d Binary files /dev/null and b/__snapshots__/card/showcase/chromium/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png differ diff --git a/__snapshots__/card/showcase/chromium/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png b/__snapshots__/card/showcase/chromium/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png deleted file mode 100644 index bfe979c55c0..00000000000 Binary files a/__snapshots__/card/showcase/chromium/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/card/showcase/firefox/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png b/__snapshots__/card/showcase/firefox/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png new file mode 100644 index 00000000000..c008332af4e Binary files /dev/null and b/__snapshots__/card/showcase/firefox/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png differ diff --git a/__snapshots__/card/showcase/firefox/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png b/__snapshots__/card/showcase/firefox/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png deleted file mode 100644 index 46b04520491..00000000000 Binary files a/__snapshots__/card/showcase/firefox/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/card/showcase/mobile-chrome/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png b/__snapshots__/card/showcase/mobile-chrome/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png new file mode 100644 index 00000000000..c45a35cf549 Binary files /dev/null and b/__snapshots__/card/showcase/mobile-chrome/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png differ diff --git a/__snapshots__/card/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png b/__snapshots__/card/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png deleted file mode 100644 index bb8ad3476e0..00000000000 Binary files a/__snapshots__/card/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/card/showcase/mobile-safari/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png b/__snapshots__/card/showcase/mobile-safari/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png new file mode 100644 index 00000000000..24357a57141 Binary files /dev/null and b/__snapshots__/card/showcase/mobile-safari/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png differ diff --git a/__snapshots__/card/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png b/__snapshots__/card/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png deleted file mode 100644 index 3b834ac14f8..00000000000 Binary files a/__snapshots__/card/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/card/showcase/webkit/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png b/__snapshots__/card/showcase/webkit/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png new file mode 100644 index 00000000000..73ed4e6ffcc Binary files /dev/null and b/__snapshots__/card/showcase/webkit/DBCard-should-match-screenshot-1/DBCard-should-match-screenshot.png differ diff --git a/__snapshots__/card/showcase/webkit/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png b/__snapshots__/card/showcase/webkit/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png deleted file mode 100644 index 3c46da8816e..00000000000 Binary files a/__snapshots__/card/showcase/webkit/regular/neutral-bg-lvl-1/DBCard-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/checkbox/patternhub/checkbox-docs-should-match-screenshot.png b/__snapshots__/checkbox/patternhub/checkbox-docs-should-match-screenshot.png index b8948f4db78..5cb72474d05 100644 Binary files a/__snapshots__/checkbox/patternhub/checkbox-docs-should-match-screenshot.png and b/__snapshots__/checkbox/patternhub/checkbox-docs-should-match-screenshot.png differ diff --git a/__snapshots__/checkbox/patternhub/checkbox-properties-should-match-screenshot.png b/__snapshots__/checkbox/patternhub/checkbox-properties-should-match-screenshot.png index 82ce22b582f..7c686df3d4c 100644 Binary files a/__snapshots__/checkbox/patternhub/checkbox-properties-should-match-screenshot.png and b/__snapshots__/checkbox/patternhub/checkbox-properties-should-match-screenshot.png differ diff --git a/__snapshots__/checkbox/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/showcase/chromium-highContrast/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png similarity index 100% rename from __snapshots__/checkbox/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png rename to __snapshots__/checkbox/showcase/chromium-highContrast/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png diff --git a/__snapshots__/checkbox/showcase/chromium/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/showcase/chromium/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png new file mode 100644 index 00000000000..069e1ca490f Binary files /dev/null and b/__snapshots__/checkbox/showcase/chromium/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png differ diff --git a/__snapshots__/checkbox/showcase/chromium/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/showcase/chromium/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png deleted file mode 100644 index 0790d0626a7..00000000000 Binary files a/__snapshots__/checkbox/showcase/chromium/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/checkbox/showcase/firefox/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/showcase/firefox/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png new file mode 100644 index 00000000000..d0cda046923 Binary files /dev/null and b/__snapshots__/checkbox/showcase/firefox/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png differ diff --git a/__snapshots__/checkbox/showcase/firefox/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/showcase/firefox/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png deleted file mode 100644 index 948cb958353..00000000000 Binary files a/__snapshots__/checkbox/showcase/firefox/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/checkbox/showcase/mobile-chrome/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/showcase/mobile-chrome/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png new file mode 100644 index 00000000000..8288ef62d78 Binary files /dev/null and b/__snapshots__/checkbox/showcase/mobile-chrome/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png differ diff --git a/__snapshots__/checkbox/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png deleted file mode 100644 index a8c54e33d3c..00000000000 Binary files a/__snapshots__/checkbox/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/checkbox/showcase/mobile-safari/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/showcase/mobile-safari/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png new file mode 100644 index 00000000000..f349ba778d9 Binary files /dev/null and b/__snapshots__/checkbox/showcase/mobile-safari/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png differ diff --git a/__snapshots__/checkbox/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png deleted file mode 100644 index 54ad471425f..00000000000 Binary files a/__snapshots__/checkbox/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/checkbox/showcase/webkit/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/showcase/webkit/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png new file mode 100644 index 00000000000..14f8df21ec0 Binary files /dev/null and b/__snapshots__/checkbox/showcase/webkit/DBCheckbox-should-match-screenshot-1/DBCheckbox-should-match-screenshot.png differ diff --git a/__snapshots__/checkbox/showcase/webkit/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png b/__snapshots__/checkbox/showcase/webkit/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png deleted file mode 100644 index 2d49aded799..00000000000 Binary files a/__snapshots__/checkbox/showcase/webkit/regular/neutral-bg-lvl-1/DBCheckbox-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/divider/patternhub/divider-docs-should-match-screenshot.png b/__snapshots__/divider/patternhub/divider-docs-should-match-screenshot.png index 2ac4056b93c..c261f1f076f 100644 Binary files a/__snapshots__/divider/patternhub/divider-docs-should-match-screenshot.png and b/__snapshots__/divider/patternhub/divider-docs-should-match-screenshot.png differ diff --git a/__snapshots__/divider/patternhub/divider-properties-should-match-screenshot.png b/__snapshots__/divider/patternhub/divider-properties-should-match-screenshot.png index 1889bff3cf6..e50d1307a3a 100644 Binary files a/__snapshots__/divider/patternhub/divider-properties-should-match-screenshot.png and b/__snapshots__/divider/patternhub/divider-properties-should-match-screenshot.png differ diff --git a/__snapshots__/divider/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/chromium-highContrast/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png similarity index 100% rename from __snapshots__/divider/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png rename to __snapshots__/divider/showcase/chromium-highContrast/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png diff --git a/__snapshots__/divider/showcase/chromium/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/chromium/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png new file mode 100644 index 00000000000..fd20f4f5231 Binary files /dev/null and b/__snapshots__/divider/showcase/chromium/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png differ diff --git a/__snapshots__/divider/showcase/chromium/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/chromium/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png deleted file mode 100644 index 1c388c0a988..00000000000 Binary files a/__snapshots__/divider/showcase/chromium/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/divider/showcase/firefox/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/firefox/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png new file mode 100644 index 00000000000..592541f9965 Binary files /dev/null and b/__snapshots__/divider/showcase/firefox/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png differ diff --git a/__snapshots__/divider/showcase/firefox/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/firefox/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png deleted file mode 100644 index ee4a5b589a7..00000000000 Binary files a/__snapshots__/divider/showcase/firefox/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/divider/showcase/mobile-chrome/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/mobile-chrome/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png new file mode 100644 index 00000000000..6ae75cb7dd7 Binary files /dev/null and b/__snapshots__/divider/showcase/mobile-chrome/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png differ diff --git a/__snapshots__/divider/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png deleted file mode 100644 index 5caa881b9dc..00000000000 Binary files a/__snapshots__/divider/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/divider/showcase/mobile-safari/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/mobile-safari/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png new file mode 100644 index 00000000000..7b1708308f5 Binary files /dev/null and b/__snapshots__/divider/showcase/mobile-safari/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png differ diff --git a/__snapshots__/divider/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png deleted file mode 100644 index c2b8cdb4513..00000000000 Binary files a/__snapshots__/divider/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/divider/showcase/webkit/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/webkit/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png new file mode 100644 index 00000000000..b8073e51af3 Binary files /dev/null and b/__snapshots__/divider/showcase/webkit/DBDivider-should-match-screenshot-1/DBDivider-should-match-screenshot.png differ diff --git a/__snapshots__/divider/showcase/webkit/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png b/__snapshots__/divider/showcase/webkit/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png deleted file mode 100644 index 86f2925ed29..00000000000 Binary files a/__snapshots__/divider/showcase/webkit/regular/neutral-bg-lvl-1/DBDivider-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/drawer/patternhub/drawer-docs-should-match-screenshot.png b/__snapshots__/drawer/patternhub/drawer-docs-should-match-screenshot.png index faec5a1a779..f35cbe6afed 100644 Binary files a/__snapshots__/drawer/patternhub/drawer-docs-should-match-screenshot.png and b/__snapshots__/drawer/patternhub/drawer-docs-should-match-screenshot.png differ diff --git a/__snapshots__/drawer/patternhub/drawer-properties-should-match-screenshot.png b/__snapshots__/drawer/patternhub/drawer-properties-should-match-screenshot.png index 20fe11e98eb..89234882723 100644 Binary files a/__snapshots__/drawer/patternhub/drawer-properties-should-match-screenshot.png and b/__snapshots__/drawer/patternhub/drawer-properties-should-match-screenshot.png differ diff --git a/__snapshots__/drawer/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/chromium-highContrast/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png similarity index 100% rename from __snapshots__/drawer/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png rename to __snapshots__/drawer/showcase/chromium-highContrast/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png diff --git a/__snapshots__/drawer/showcase/chromium/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/chromium/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png new file mode 100644 index 00000000000..fd5bdbc1ae0 Binary files /dev/null and b/__snapshots__/drawer/showcase/chromium/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png differ diff --git a/__snapshots__/drawer/showcase/chromium/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/chromium/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png deleted file mode 100644 index 12411018554..00000000000 Binary files a/__snapshots__/drawer/showcase/chromium/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/drawer/showcase/firefox/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/firefox/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png new file mode 100644 index 00000000000..96a9a99cbb6 Binary files /dev/null and b/__snapshots__/drawer/showcase/firefox/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png differ diff --git a/__snapshots__/drawer/showcase/firefox/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/firefox/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png deleted file mode 100644 index 46f757d4ed2..00000000000 Binary files a/__snapshots__/drawer/showcase/firefox/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/drawer/showcase/mobile-chrome/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/mobile-chrome/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png new file mode 100644 index 00000000000..7e24949b239 Binary files /dev/null and b/__snapshots__/drawer/showcase/mobile-chrome/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png differ diff --git a/__snapshots__/drawer/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png deleted file mode 100644 index 06a28d7f991..00000000000 Binary files a/__snapshots__/drawer/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/drawer/showcase/mobile-safari/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/mobile-safari/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png new file mode 100644 index 00000000000..8172fef6aed Binary files /dev/null and b/__snapshots__/drawer/showcase/mobile-safari/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png differ diff --git a/__snapshots__/drawer/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png deleted file mode 100644 index cfd681df175..00000000000 Binary files a/__snapshots__/drawer/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/drawer/showcase/webkit/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/webkit/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png new file mode 100644 index 00000000000..3daa7cdb939 Binary files /dev/null and b/__snapshots__/drawer/showcase/webkit/DBDrawer-should-match-screenshot-1/DBDrawer-should-match-screenshot.png differ diff --git a/__snapshots__/drawer/showcase/webkit/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png b/__snapshots__/drawer/showcase/webkit/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png deleted file mode 100644 index 9a77be72225..00000000000 Binary files a/__snapshots__/drawer/showcase/webkit/regular/neutral-bg-lvl-1/DBDrawer-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/header/patternhub/header-docs-should-match-screenshot.png b/__snapshots__/header/patternhub/header-docs-should-match-screenshot.png index cfae77494ad..c384c72ff80 100644 Binary files a/__snapshots__/header/patternhub/header-docs-should-match-screenshot.png and b/__snapshots__/header/patternhub/header-docs-should-match-screenshot.png differ diff --git a/__snapshots__/header/patternhub/header-properties-should-match-screenshot.png b/__snapshots__/header/patternhub/header-properties-should-match-screenshot.png index 4a054426a38..2b47314d23a 100644 Binary files a/__snapshots__/header/patternhub/header-properties-should-match-screenshot.png and b/__snapshots__/header/patternhub/header-properties-should-match-screenshot.png differ diff --git a/__snapshots__/header/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png similarity index 100% rename from __snapshots__/header/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png rename to __snapshots__/header/showcase/chromium-highContrast/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png diff --git a/__snapshots__/header/showcase/chromium/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/chromium/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png new file mode 100644 index 00000000000..5d949cc4413 Binary files /dev/null and b/__snapshots__/header/showcase/chromium/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png differ diff --git a/__snapshots__/header/showcase/chromium/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/chromium/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png deleted file mode 100644 index a2ec2ad3e49..00000000000 Binary files a/__snapshots__/header/showcase/chromium/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/header/showcase/firefox/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/firefox/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png new file mode 100644 index 00000000000..ef249e3b425 Binary files /dev/null and b/__snapshots__/header/showcase/firefox/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png differ diff --git a/__snapshots__/header/showcase/firefox/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/firefox/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png deleted file mode 100644 index 3d35f99fcdc..00000000000 Binary files a/__snapshots__/header/showcase/firefox/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/header/showcase/mobile-chrome/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/mobile-chrome/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png new file mode 100644 index 00000000000..f641c3a2f27 Binary files /dev/null and b/__snapshots__/header/showcase/mobile-chrome/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png differ diff --git a/__snapshots__/header/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png deleted file mode 100644 index 1bfca9e6b14..00000000000 Binary files a/__snapshots__/header/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/header/showcase/mobile-safari/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/mobile-safari/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png new file mode 100644 index 00000000000..cb35b2e9a97 Binary files /dev/null and b/__snapshots__/header/showcase/mobile-safari/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png differ diff --git a/__snapshots__/header/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png deleted file mode 100644 index 30103828795..00000000000 Binary files a/__snapshots__/header/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/header/showcase/webkit/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/webkit/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png new file mode 100644 index 00000000000..b9bab0672d8 Binary files /dev/null and b/__snapshots__/header/showcase/webkit/DBHeader-should-match-screenshot-1/DBHeader-should-match-screenshot.png differ diff --git a/__snapshots__/header/showcase/webkit/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png b/__snapshots__/header/showcase/webkit/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png deleted file mode 100644 index 6f40809b71f..00000000000 Binary files a/__snapshots__/header/showcase/webkit/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/icon/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png b/__snapshots__/icon/showcase/chromium-highContrast/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png similarity index 100% rename from __snapshots__/icon/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png rename to __snapshots__/icon/showcase/chromium-highContrast/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png diff --git a/__snapshots__/icon/showcase/chromium/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png b/__snapshots__/icon/showcase/chromium/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png new file mode 100644 index 00000000000..0039fe2aa1f Binary files /dev/null and b/__snapshots__/icon/showcase/chromium/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png differ diff --git a/__snapshots__/icon/showcase/chromium/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png b/__snapshots__/icon/showcase/chromium/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png deleted file mode 100644 index ee4eeb025fc..00000000000 Binary files a/__snapshots__/icon/showcase/chromium/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/icon/showcase/firefox/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png b/__snapshots__/icon/showcase/firefox/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png new file mode 100644 index 00000000000..dfde89c18e7 Binary files /dev/null and b/__snapshots__/icon/showcase/firefox/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png differ diff --git a/__snapshots__/icon/showcase/firefox/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png b/__snapshots__/icon/showcase/firefox/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png deleted file mode 100644 index 0d88f3489c6..00000000000 Binary files a/__snapshots__/icon/showcase/firefox/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/icon/showcase/mobile-chrome/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png b/__snapshots__/icon/showcase/mobile-chrome/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png new file mode 100644 index 00000000000..63921509621 Binary files /dev/null and b/__snapshots__/icon/showcase/mobile-chrome/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png differ diff --git a/__snapshots__/icon/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png b/__snapshots__/icon/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png deleted file mode 100644 index 3730f79ff67..00000000000 Binary files a/__snapshots__/icon/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/icon/showcase/mobile-safari/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png b/__snapshots__/icon/showcase/mobile-safari/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png new file mode 100644 index 00000000000..263e5248783 Binary files /dev/null and b/__snapshots__/icon/showcase/mobile-safari/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png differ diff --git a/__snapshots__/icon/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png b/__snapshots__/icon/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png deleted file mode 100644 index f91e83a6cb5..00000000000 Binary files a/__snapshots__/icon/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/icon/showcase/webkit/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png b/__snapshots__/icon/showcase/webkit/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png new file mode 100644 index 00000000000..5dd6e2bfc02 Binary files /dev/null and b/__snapshots__/icon/showcase/webkit/DBIcon-should-match-screenshot-1/DBIcon-should-match-screenshot.png differ diff --git a/__snapshots__/icon/showcase/webkit/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png b/__snapshots__/icon/showcase/webkit/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png deleted file mode 100644 index 995d94869a0..00000000000 Binary files a/__snapshots__/icon/showcase/webkit/regular/neutral-bg-lvl-1/DBIcon-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/infotext/patternhub/infotext-docs-should-match-screenshot.png b/__snapshots__/infotext/patternhub/infotext-docs-should-match-screenshot.png index 3d60f50fab6..68bef52bb9b 100644 Binary files a/__snapshots__/infotext/patternhub/infotext-docs-should-match-screenshot.png and b/__snapshots__/infotext/patternhub/infotext-docs-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/patternhub/infotext-properties-should-match-screenshot.png b/__snapshots__/infotext/patternhub/infotext-properties-should-match-screenshot.png index 758ca61ce3e..cb580800571 100644 Binary files a/__snapshots__/infotext/patternhub/infotext-properties-should-match-screenshot.png and b/__snapshots__/infotext/patternhub/infotext-properties-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/chromium-highContrast/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png similarity index 100% rename from __snapshots__/infotext/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png rename to __snapshots__/infotext/showcase/chromium-highContrast/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png diff --git a/__snapshots__/infotext/showcase/chromium/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/chromium/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png new file mode 100644 index 00000000000..77bf6ed2c11 Binary files /dev/null and b/__snapshots__/infotext/showcase/chromium/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/chromium/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/chromium/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png deleted file mode 100644 index 38cf7cdc25c..00000000000 Binary files a/__snapshots__/infotext/showcase/chromium/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/infotext/showcase/firefox/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/firefox/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png new file mode 100644 index 00000000000..b98b11ea796 Binary files /dev/null and b/__snapshots__/infotext/showcase/firefox/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/firefox/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/firefox/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png deleted file mode 100644 index a18f3d62c7a..00000000000 Binary files a/__snapshots__/infotext/showcase/firefox/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/infotext/showcase/mobile-chrome/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/mobile-chrome/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png new file mode 100644 index 00000000000..0ff11ad94c5 Binary files /dev/null and b/__snapshots__/infotext/showcase/mobile-chrome/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png deleted file mode 100644 index 6efb07dbe47..00000000000 Binary files a/__snapshots__/infotext/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/infotext/showcase/mobile-safari/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/mobile-safari/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png new file mode 100644 index 00000000000..540b9a9fd03 Binary files /dev/null and b/__snapshots__/infotext/showcase/mobile-safari/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png deleted file mode 100644 index 5b21f18fcf0..00000000000 Binary files a/__snapshots__/infotext/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/infotext/showcase/webkit/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/webkit/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png new file mode 100644 index 00000000000..0673edb84df Binary files /dev/null and b/__snapshots__/infotext/showcase/webkit/DBInfotext-should-match-screenshot-1/DBInfotext-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/showcase/webkit/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png b/__snapshots__/infotext/showcase/webkit/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png deleted file mode 100644 index c6ef216c80e..00000000000 Binary files a/__snapshots__/infotext/showcase/webkit/regular/neutral-bg-lvl-1/DBInfotext-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/input/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png similarity index 100% rename from __snapshots__/input/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png rename to __snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png diff --git a/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png new file mode 100644 index 00000000000..9fc51c58d8c Binary files /dev/null and b/__snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/chromium/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/chromium/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png deleted file mode 100644 index fb7620af2ff..00000000000 Binary files a/__snapshots__/input/showcase/chromium/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png new file mode 100644 index 00000000000..c8fcf1184e1 Binary files /dev/null and b/__snapshots__/input/showcase/firefox/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/firefox/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/firefox/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png deleted file mode 100644 index a419abc2e4c..00000000000 Binary files a/__snapshots__/input/showcase/firefox/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png new file mode 100644 index 00000000000..4cdec40b5b0 Binary files /dev/null and b/__snapshots__/input/showcase/mobile-chrome/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png deleted file mode 100644 index 199edc9d18c..00000000000 Binary files a/__snapshots__/input/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png new file mode 100644 index 00000000000..15a6e213b8a Binary files /dev/null and b/__snapshots__/input/showcase/mobile-safari/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png deleted file mode 100644 index aff34dde5c8..00000000000 Binary files a/__snapshots__/input/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png new file mode 100644 index 00000000000..933e2a37d56 Binary files /dev/null and b/__snapshots__/input/showcase/webkit/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png differ diff --git a/__snapshots__/input/showcase/webkit/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png b/__snapshots__/input/showcase/webkit/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png deleted file mode 100644 index d5d67ce907d..00000000000 Binary files a/__snapshots__/input/showcase/webkit/regular/neutral-bg-lvl-1/DBInput-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/link/patternhub/link-docs-should-match-screenshot.png b/__snapshots__/link/patternhub/link-docs-should-match-screenshot.png index 89e7daaae6d..47bc2086e08 100644 Binary files a/__snapshots__/link/patternhub/link-docs-should-match-screenshot.png and b/__snapshots__/link/patternhub/link-docs-should-match-screenshot.png differ diff --git a/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png b/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png index 5e34ec7e1d1..f4094e92210 100644 Binary files a/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png and b/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/chromium-highContrast/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png similarity index 100% rename from __snapshots__/link/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png rename to __snapshots__/link/showcase/chromium-highContrast/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png diff --git a/__snapshots__/link/showcase/chromium/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/chromium/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png new file mode 100644 index 00000000000..0dc622fee10 Binary files /dev/null and b/__snapshots__/link/showcase/chromium/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/chromium/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/chromium/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png deleted file mode 100644 index f8f61d61f19..00000000000 Binary files a/__snapshots__/link/showcase/chromium/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/link/showcase/firefox/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/firefox/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png new file mode 100644 index 00000000000..3b70119be56 Binary files /dev/null and b/__snapshots__/link/showcase/firefox/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/firefox/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/firefox/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png deleted file mode 100644 index b910681f1dc..00000000000 Binary files a/__snapshots__/link/showcase/firefox/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/link/showcase/mobile-chrome/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-chrome/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png new file mode 100644 index 00000000000..665a051969e Binary files /dev/null and b/__snapshots__/link/showcase/mobile-chrome/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png deleted file mode 100644 index c7a76c51318..00000000000 Binary files a/__snapshots__/link/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/link/showcase/mobile-safari/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-safari/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png new file mode 100644 index 00000000000..d30bb245725 Binary files /dev/null and b/__snapshots__/link/showcase/mobile-safari/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png deleted file mode 100644 index d5f4009d768..00000000000 Binary files a/__snapshots__/link/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/link/showcase/webkit/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/webkit/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png new file mode 100644 index 00000000000..4ee2ea64937 Binary files /dev/null and b/__snapshots__/link/showcase/webkit/DBLink-should-match-screenshot-1/DBLink-should-match-screenshot.png differ diff --git a/__snapshots__/link/showcase/webkit/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png b/__snapshots__/link/showcase/webkit/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png deleted file mode 100644 index 1bdb77eba3d..00000000000 Binary files a/__snapshots__/link/showcase/webkit/regular/neutral-bg-lvl-1/DBLink-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/navigation-item/patternhub/navigation-item-docs-should-match-screenshot.png b/__snapshots__/navigation-item/patternhub/navigation-item-docs-should-match-screenshot.png index 6014229007d..ff5dcb9ee6a 100644 Binary files a/__snapshots__/navigation-item/patternhub/navigation-item-docs-should-match-screenshot.png and b/__snapshots__/navigation-item/patternhub/navigation-item-docs-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/patternhub/navigation-item-properties-should-match-screenshot.png b/__snapshots__/navigation-item/patternhub/navigation-item-properties-should-match-screenshot.png index 96c5fa8162c..532c971625e 100644 Binary files a/__snapshots__/navigation-item/patternhub/navigation-item-properties-should-match-screenshot.png and b/__snapshots__/navigation-item/patternhub/navigation-item-properties-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/chromium-highContrast/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png similarity index 100% rename from __snapshots__/navigation-item/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png rename to __snapshots__/navigation-item/showcase/chromium-highContrast/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png diff --git a/__snapshots__/navigation-item/showcase/chromium/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/chromium/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png new file mode 100644 index 00000000000..47821203f82 Binary files /dev/null and b/__snapshots__/navigation-item/showcase/chromium/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/showcase/chromium/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/chromium/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png deleted file mode 100644 index 344a8d6c4a4..00000000000 Binary files a/__snapshots__/navigation-item/showcase/chromium/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/navigation-item/showcase/firefox/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/firefox/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png new file mode 100644 index 00000000000..55120bbd31e Binary files /dev/null and b/__snapshots__/navigation-item/showcase/firefox/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/showcase/firefox/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/firefox/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png deleted file mode 100644 index 0bdb4800917..00000000000 Binary files a/__snapshots__/navigation-item/showcase/firefox/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/navigation-item/showcase/mobile-chrome/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/mobile-chrome/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png new file mode 100644 index 00000000000..d83a4c0e69b Binary files /dev/null and b/__snapshots__/navigation-item/showcase/mobile-chrome/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png deleted file mode 100644 index 0ee29987046..00000000000 Binary files a/__snapshots__/navigation-item/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/navigation-item/showcase/mobile-safari/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/mobile-safari/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png new file mode 100644 index 00000000000..70c9e635919 Binary files /dev/null and b/__snapshots__/navigation-item/showcase/mobile-safari/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png deleted file mode 100644 index 0befd4811bb..00000000000 Binary files a/__snapshots__/navigation-item/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/navigation-item/showcase/webkit/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/webkit/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png new file mode 100644 index 00000000000..769e4f7aa9b Binary files /dev/null and b/__snapshots__/navigation-item/showcase/webkit/DBNavigationItem-should-match-screenshot-1/DBNavigationItem-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/showcase/webkit/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png b/__snapshots__/navigation-item/showcase/webkit/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png deleted file mode 100644 index 72e40aa4c7f..00000000000 Binary files a/__snapshots__/navigation-item/showcase/webkit/regular/neutral-bg-lvl-1/DBNavigationItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/navigation/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png b/__snapshots__/navigation/showcase/chromium-highContrast/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png similarity index 100% rename from __snapshots__/navigation/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png rename to __snapshots__/navigation/showcase/chromium-highContrast/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png diff --git a/__snapshots__/navigation/showcase/chromium/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png b/__snapshots__/navigation/showcase/chromium/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png new file mode 100644 index 00000000000..c75b061b727 Binary files /dev/null and b/__snapshots__/navigation/showcase/chromium/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png differ diff --git a/__snapshots__/navigation/showcase/chromium/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png b/__snapshots__/navigation/showcase/chromium/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png deleted file mode 100644 index aa8aa4eae34..00000000000 Binary files a/__snapshots__/navigation/showcase/chromium/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/navigation/showcase/firefox/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png b/__snapshots__/navigation/showcase/firefox/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png new file mode 100644 index 00000000000..6649f3709ad Binary files /dev/null and b/__snapshots__/navigation/showcase/firefox/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png differ diff --git a/__snapshots__/navigation/showcase/firefox/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png b/__snapshots__/navigation/showcase/firefox/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png deleted file mode 100644 index 11f451dc806..00000000000 Binary files a/__snapshots__/navigation/showcase/firefox/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/navigation/showcase/mobile-chrome/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png b/__snapshots__/navigation/showcase/mobile-chrome/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png new file mode 100644 index 00000000000..40973e905d5 Binary files /dev/null and b/__snapshots__/navigation/showcase/mobile-chrome/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png differ diff --git a/__snapshots__/navigation/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png b/__snapshots__/navigation/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png deleted file mode 100644 index 53762e29b71..00000000000 Binary files a/__snapshots__/navigation/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/navigation/showcase/mobile-safari/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png b/__snapshots__/navigation/showcase/mobile-safari/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png new file mode 100644 index 00000000000..882ba5d9d66 Binary files /dev/null and b/__snapshots__/navigation/showcase/mobile-safari/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png differ diff --git a/__snapshots__/navigation/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png b/__snapshots__/navigation/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png deleted file mode 100644 index b6ad5484f80..00000000000 Binary files a/__snapshots__/navigation/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/navigation/showcase/webkit/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png b/__snapshots__/navigation/showcase/webkit/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png new file mode 100644 index 00000000000..f756258ddcd Binary files /dev/null and b/__snapshots__/navigation/showcase/webkit/DBNavigation-should-match-screenshot-1/DBNavigation-should-match-screenshot.png differ diff --git a/__snapshots__/navigation/showcase/webkit/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png b/__snapshots__/navigation/showcase/webkit/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png deleted file mode 100644 index a6af9ae44e6..00000000000 Binary files a/__snapshots__/navigation/showcase/webkit/regular/neutral-bg-lvl-1/DBNavigation-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/notification/patternhub/notification-docs-should-match-screenshot.png b/__snapshots__/notification/patternhub/notification-docs-should-match-screenshot.png index e613da2a7b8..2fd4592fda9 100644 Binary files a/__snapshots__/notification/patternhub/notification-docs-should-match-screenshot.png and b/__snapshots__/notification/patternhub/notification-docs-should-match-screenshot.png differ diff --git a/__snapshots__/notification/patternhub/notification-properties-should-match-screenshot.png b/__snapshots__/notification/patternhub/notification-properties-should-match-screenshot.png index 87351f33cb8..326b5b6cbf1 100644 Binary files a/__snapshots__/notification/patternhub/notification-properties-should-match-screenshot.png and b/__snapshots__/notification/patternhub/notification-properties-should-match-screenshot.png differ diff --git a/__snapshots__/notification/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/chromium-highContrast/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png similarity index 100% rename from __snapshots__/notification/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png rename to __snapshots__/notification/showcase/chromium-highContrast/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png diff --git a/__snapshots__/notification/showcase/chromium/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/chromium/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png new file mode 100644 index 00000000000..35b3279a0e2 Binary files /dev/null and b/__snapshots__/notification/showcase/chromium/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png differ diff --git a/__snapshots__/notification/showcase/chromium/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/chromium/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png deleted file mode 100644 index 58733c8f920..00000000000 Binary files a/__snapshots__/notification/showcase/chromium/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/notification/showcase/firefox/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/firefox/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png new file mode 100644 index 00000000000..6290cc53e25 Binary files /dev/null and b/__snapshots__/notification/showcase/firefox/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png differ diff --git a/__snapshots__/notification/showcase/firefox/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/firefox/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png deleted file mode 100644 index 435866bec47..00000000000 Binary files a/__snapshots__/notification/showcase/firefox/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/notification/showcase/mobile-chrome/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/mobile-chrome/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png new file mode 100644 index 00000000000..baa4f81ff81 Binary files /dev/null and b/__snapshots__/notification/showcase/mobile-chrome/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png differ diff --git a/__snapshots__/notification/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png deleted file mode 100644 index ad0ca7a3113..00000000000 Binary files a/__snapshots__/notification/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/notification/showcase/mobile-safari/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/mobile-safari/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png new file mode 100644 index 00000000000..887880ff002 Binary files /dev/null and b/__snapshots__/notification/showcase/mobile-safari/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png differ diff --git a/__snapshots__/notification/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png deleted file mode 100644 index a3f7f67809f..00000000000 Binary files a/__snapshots__/notification/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/notification/showcase/webkit/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/webkit/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png new file mode 100644 index 00000000000..5163068923b Binary files /dev/null and b/__snapshots__/notification/showcase/webkit/DBNotification-should-match-screenshot-1/DBNotification-should-match-screenshot.png differ diff --git a/__snapshots__/notification/showcase/webkit/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png b/__snapshots__/notification/showcase/webkit/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png deleted file mode 100644 index 5a536761bd5..00000000000 Binary files a/__snapshots__/notification/showcase/webkit/regular/neutral-bg-lvl-1/DBNotification-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/popover/patternhub/popover-docs-should-match-screenshot.png b/__snapshots__/popover/patternhub/popover-docs-should-match-screenshot.png index c59457cffc6..7b988c17346 100644 Binary files a/__snapshots__/popover/patternhub/popover-docs-should-match-screenshot.png and b/__snapshots__/popover/patternhub/popover-docs-should-match-screenshot.png differ diff --git a/__snapshots__/popover/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png b/__snapshots__/popover/showcase/chromium-highContrast/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png similarity index 100% rename from __snapshots__/popover/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png rename to __snapshots__/popover/showcase/chromium-highContrast/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png diff --git a/__snapshots__/popover/showcase/chromium/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png b/__snapshots__/popover/showcase/chromium/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png new file mode 100644 index 00000000000..6214289725d Binary files /dev/null and b/__snapshots__/popover/showcase/chromium/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png differ diff --git a/__snapshots__/popover/showcase/chromium/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png b/__snapshots__/popover/showcase/chromium/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png deleted file mode 100644 index fb1067c292d..00000000000 Binary files a/__snapshots__/popover/showcase/chromium/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/popover/showcase/firefox/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png b/__snapshots__/popover/showcase/firefox/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png new file mode 100644 index 00000000000..070c950bfae Binary files /dev/null and b/__snapshots__/popover/showcase/firefox/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png differ diff --git a/__snapshots__/popover/showcase/firefox/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png b/__snapshots__/popover/showcase/firefox/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png deleted file mode 100644 index c76315c33ea..00000000000 Binary files a/__snapshots__/popover/showcase/firefox/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/popover/showcase/mobile-chrome/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png b/__snapshots__/popover/showcase/mobile-chrome/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png new file mode 100644 index 00000000000..a712ecd7e2e Binary files /dev/null and b/__snapshots__/popover/showcase/mobile-chrome/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png differ diff --git a/__snapshots__/popover/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png b/__snapshots__/popover/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png deleted file mode 100644 index cee93f06689..00000000000 Binary files a/__snapshots__/popover/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/popover/showcase/mobile-safari/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png b/__snapshots__/popover/showcase/mobile-safari/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png new file mode 100644 index 00000000000..f006c2fdaa0 Binary files /dev/null and b/__snapshots__/popover/showcase/mobile-safari/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png differ diff --git a/__snapshots__/popover/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png b/__snapshots__/popover/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png deleted file mode 100644 index 5e5f8d10fe6..00000000000 Binary files a/__snapshots__/popover/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/popover/showcase/webkit/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png b/__snapshots__/popover/showcase/webkit/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png new file mode 100644 index 00000000000..01b1fdae26e Binary files /dev/null and b/__snapshots__/popover/showcase/webkit/DBPopover-should-match-screenshot-1/DBPopover-should-match-screenshot.png differ diff --git a/__snapshots__/popover/showcase/webkit/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png b/__snapshots__/popover/showcase/webkit/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png deleted file mode 100644 index b24acc208d2..00000000000 Binary files a/__snapshots__/popover/showcase/webkit/regular/neutral-bg-lvl-1/DBPopover-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/radio/patternhub/radio-docs-should-match-screenshot.png b/__snapshots__/radio/patternhub/radio-docs-should-match-screenshot.png index 41f2f50ee8c..1bb1020d733 100644 Binary files a/__snapshots__/radio/patternhub/radio-docs-should-match-screenshot.png and b/__snapshots__/radio/patternhub/radio-docs-should-match-screenshot.png differ diff --git a/__snapshots__/radio/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png b/__snapshots__/radio/showcase/chromium-highContrast/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png similarity index 100% rename from __snapshots__/radio/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png rename to __snapshots__/radio/showcase/chromium-highContrast/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png diff --git a/__snapshots__/radio/showcase/chromium/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png b/__snapshots__/radio/showcase/chromium/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png new file mode 100644 index 00000000000..04d4b3c2c41 Binary files /dev/null and b/__snapshots__/radio/showcase/chromium/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png differ diff --git a/__snapshots__/radio/showcase/chromium/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png b/__snapshots__/radio/showcase/chromium/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png deleted file mode 100644 index 7485934d911..00000000000 Binary files a/__snapshots__/radio/showcase/chromium/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/radio/showcase/firefox/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png b/__snapshots__/radio/showcase/firefox/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png new file mode 100644 index 00000000000..0a513bb1d55 Binary files /dev/null and b/__snapshots__/radio/showcase/firefox/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png differ diff --git a/__snapshots__/radio/showcase/firefox/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png b/__snapshots__/radio/showcase/firefox/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png deleted file mode 100644 index dea635813d0..00000000000 Binary files a/__snapshots__/radio/showcase/firefox/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/radio/showcase/mobile-chrome/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png b/__snapshots__/radio/showcase/mobile-chrome/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png new file mode 100644 index 00000000000..0d503853ddc Binary files /dev/null and b/__snapshots__/radio/showcase/mobile-chrome/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png differ diff --git a/__snapshots__/radio/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png b/__snapshots__/radio/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png deleted file mode 100644 index e5f152d0df8..00000000000 Binary files a/__snapshots__/radio/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/radio/showcase/mobile-safari/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png b/__snapshots__/radio/showcase/mobile-safari/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png new file mode 100644 index 00000000000..890edd86269 Binary files /dev/null and b/__snapshots__/radio/showcase/mobile-safari/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png differ diff --git a/__snapshots__/radio/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png b/__snapshots__/radio/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png deleted file mode 100644 index 7c621ffe40a..00000000000 Binary files a/__snapshots__/radio/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/radio/showcase/webkit/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png b/__snapshots__/radio/showcase/webkit/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png new file mode 100644 index 00000000000..88a30bbdd87 Binary files /dev/null and b/__snapshots__/radio/showcase/webkit/DBRadio-should-match-screenshot-1/DBRadio-should-match-screenshot.png differ diff --git a/__snapshots__/radio/showcase/webkit/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png b/__snapshots__/radio/showcase/webkit/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png deleted file mode 100644 index 9f7c412e0f2..00000000000 Binary files a/__snapshots__/radio/showcase/webkit/regular/neutral-bg-lvl-1/DBRadio-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/section/patternhub/section-docs-should-match-screenshot.png b/__snapshots__/section/patternhub/section-docs-should-match-screenshot.png index 629a976b4ca..5dfaf3bd634 100644 Binary files a/__snapshots__/section/patternhub/section-docs-should-match-screenshot.png and b/__snapshots__/section/patternhub/section-docs-should-match-screenshot.png differ diff --git a/__snapshots__/section/patternhub/section-properties-should-match-screenshot.png b/__snapshots__/section/patternhub/section-properties-should-match-screenshot.png index e325a16b163..e18e19d4801 100644 Binary files a/__snapshots__/section/patternhub/section-properties-should-match-screenshot.png and b/__snapshots__/section/patternhub/section-properties-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/chromium-highContrast/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png similarity index 100% rename from __snapshots__/section/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png rename to __snapshots__/section/showcase/chromium-highContrast/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png diff --git a/__snapshots__/section/showcase/chromium/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/chromium/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png new file mode 100644 index 00000000000..20cded139f1 Binary files /dev/null and b/__snapshots__/section/showcase/chromium/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/chromium/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/chromium/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png deleted file mode 100644 index 3507c0f8964..00000000000 Binary files a/__snapshots__/section/showcase/chromium/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/section/showcase/firefox/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/firefox/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png new file mode 100644 index 00000000000..9b31a1bdb7f Binary files /dev/null and b/__snapshots__/section/showcase/firefox/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/firefox/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/firefox/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png deleted file mode 100644 index 6f4e780eccd..00000000000 Binary files a/__snapshots__/section/showcase/firefox/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/section/showcase/mobile-chrome/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/mobile-chrome/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png new file mode 100644 index 00000000000..b5499276ac7 Binary files /dev/null and b/__snapshots__/section/showcase/mobile-chrome/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png deleted file mode 100644 index d80eb9838bc..00000000000 Binary files a/__snapshots__/section/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/section/showcase/mobile-safari/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/mobile-safari/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png new file mode 100644 index 00000000000..364fc31e014 Binary files /dev/null and b/__snapshots__/section/showcase/mobile-safari/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png deleted file mode 100644 index efd1c10808a..00000000000 Binary files a/__snapshots__/section/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/section/showcase/webkit/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/webkit/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png new file mode 100644 index 00000000000..24c51f21161 Binary files /dev/null and b/__snapshots__/section/showcase/webkit/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png differ diff --git a/__snapshots__/section/showcase/webkit/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png b/__snapshots__/section/showcase/webkit/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png deleted file mode 100644 index 05dddd761b0..00000000000 Binary files a/__snapshots__/section/showcase/webkit/regular/neutral-bg-lvl-1/DBSection-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/select/patternhub/select-docs-should-match-screenshot.png b/__snapshots__/select/patternhub/select-docs-should-match-screenshot.png index 8c484817a26..2f105a619af 100644 Binary files a/__snapshots__/select/patternhub/select-docs-should-match-screenshot.png and b/__snapshots__/select/patternhub/select-docs-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png similarity index 100% rename from __snapshots__/select/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png rename to __snapshots__/select/showcase/chromium-highContrast/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png diff --git a/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png new file mode 100644 index 00000000000..ec05c18c637 Binary files /dev/null and b/__snapshots__/select/showcase/chromium/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/chromium/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/chromium/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png deleted file mode 100644 index 2e9f1eadefd..00000000000 Binary files a/__snapshots__/select/showcase/chromium/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/select/showcase/firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png new file mode 100644 index 00000000000..71fc9e44e73 Binary files /dev/null and b/__snapshots__/select/showcase/firefox/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/firefox/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/firefox/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png deleted file mode 100644 index 339ab1933cc..00000000000 Binary files a/__snapshots__/select/showcase/firefox/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/select/showcase/mobile-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/mobile-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png new file mode 100644 index 00000000000..c02e58831b8 Binary files /dev/null and b/__snapshots__/select/showcase/mobile-chrome/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png deleted file mode 100644 index bd7775860bc..00000000000 Binary files a/__snapshots__/select/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/select/showcase/mobile-safari/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/mobile-safari/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png new file mode 100644 index 00000000000..384b0cd0f8f Binary files /dev/null and b/__snapshots__/select/showcase/mobile-safari/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png deleted file mode 100644 index a30a86df820..00000000000 Binary files a/__snapshots__/select/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/select/showcase/webkit/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/webkit/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png new file mode 100644 index 00000000000..9779ddba660 Binary files /dev/null and b/__snapshots__/select/showcase/webkit/DBSelect-should-match-screenshot-1/DBSelect-should-match-screenshot.png differ diff --git a/__snapshots__/select/showcase/webkit/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png b/__snapshots__/select/showcase/webkit/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png deleted file mode 100644 index 0cbb1843435..00000000000 Binary files a/__snapshots__/select/showcase/webkit/regular/neutral-bg-lvl-1/DBSelect-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/switch/patternhub/switch-docs-should-match-screenshot.png b/__snapshots__/switch/patternhub/switch-docs-should-match-screenshot.png index eac2ebb04ac..b9e712a6185 100644 Binary files a/__snapshots__/switch/patternhub/switch-docs-should-match-screenshot.png and b/__snapshots__/switch/patternhub/switch-docs-should-match-screenshot.png differ diff --git a/__snapshots__/switch/patternhub/switch-properties-should-match-screenshot.png b/__snapshots__/switch/patternhub/switch-properties-should-match-screenshot.png index 83ec5ce3ee2..7dc7d78b358 100644 Binary files a/__snapshots__/switch/patternhub/switch-properties-should-match-screenshot.png and b/__snapshots__/switch/patternhub/switch-properties-should-match-screenshot.png differ diff --git a/__snapshots__/switch/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/chromium-highContrast/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png similarity index 100% rename from __snapshots__/switch/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png rename to __snapshots__/switch/showcase/chromium-highContrast/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png diff --git a/__snapshots__/switch/showcase/chromium/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/chromium/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png new file mode 100644 index 00000000000..d6c253d408c Binary files /dev/null and b/__snapshots__/switch/showcase/chromium/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png differ diff --git a/__snapshots__/switch/showcase/chromium/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/chromium/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png deleted file mode 100644 index ba2a2d99553..00000000000 Binary files a/__snapshots__/switch/showcase/chromium/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/switch/showcase/chromium/regular/neutral/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/chromium/regular/neutral/DBSwitch-should-match-screenshot.png deleted file mode 100644 index 958ccf8087d..00000000000 Binary files a/__snapshots__/switch/showcase/chromium/regular/neutral/DBSwitch-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/switch/showcase/firefox/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/firefox/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png new file mode 100644 index 00000000000..0c299c8a3ab Binary files /dev/null and b/__snapshots__/switch/showcase/firefox/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png differ diff --git a/__snapshots__/switch/showcase/firefox/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/firefox/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png deleted file mode 100644 index 8d97bc608e5..00000000000 Binary files a/__snapshots__/switch/showcase/firefox/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/switch/showcase/firefox/regular/neutral/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/firefox/regular/neutral/DBSwitch-should-match-screenshot.png deleted file mode 100644 index f9c1519d1ea..00000000000 Binary files a/__snapshots__/switch/showcase/firefox/regular/neutral/DBSwitch-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/switch/showcase/mobile-chrome/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/mobile-chrome/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png new file mode 100644 index 00000000000..c26b95f69d2 Binary files /dev/null and b/__snapshots__/switch/showcase/mobile-chrome/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png differ diff --git a/__snapshots__/switch/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png deleted file mode 100644 index 065121b9ada..00000000000 Binary files a/__snapshots__/switch/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/switch/showcase/mobile-chrome/regular/neutral/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/mobile-chrome/regular/neutral/DBSwitch-should-match-screenshot.png deleted file mode 100644 index 2c9965c4861..00000000000 Binary files a/__snapshots__/switch/showcase/mobile-chrome/regular/neutral/DBSwitch-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/switch/showcase/mobile-safari/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/mobile-safari/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png new file mode 100644 index 00000000000..348a78fd0e7 Binary files /dev/null and b/__snapshots__/switch/showcase/mobile-safari/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png differ diff --git a/__snapshots__/switch/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png deleted file mode 100644 index f37598c0cc2..00000000000 Binary files a/__snapshots__/switch/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/switch/showcase/mobile-safari/regular/neutral/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/mobile-safari/regular/neutral/DBSwitch-should-match-screenshot.png deleted file mode 100644 index f37598c0cc2..00000000000 Binary files a/__snapshots__/switch/showcase/mobile-safari/regular/neutral/DBSwitch-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/switch/showcase/webkit/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/webkit/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png new file mode 100644 index 00000000000..d64ab315c09 Binary files /dev/null and b/__snapshots__/switch/showcase/webkit/DBSwitch-should-match-screenshot-1/DBSwitch-should-match-screenshot.png differ diff --git a/__snapshots__/switch/showcase/webkit/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/webkit/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png deleted file mode 100644 index 3b2dce07bc4..00000000000 Binary files a/__snapshots__/switch/showcase/webkit/regular/neutral-bg-lvl-1/DBSwitch-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/switch/showcase/webkit/regular/neutral/DBSwitch-should-match-screenshot.png b/__snapshots__/switch/showcase/webkit/regular/neutral/DBSwitch-should-match-screenshot.png deleted file mode 100644 index 3b2dce07bc4..00000000000 Binary files a/__snapshots__/switch/showcase/webkit/regular/neutral/DBSwitch-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tab-item/patternhub/tab-item-docs-should-match-screenshot.png b/__snapshots__/tab-item/patternhub/tab-item-docs-should-match-screenshot.png index 85a6e7ab89f..27b95c62f5c 100644 Binary files a/__snapshots__/tab-item/patternhub/tab-item-docs-should-match-screenshot.png and b/__snapshots__/tab-item/patternhub/tab-item-docs-should-match-screenshot.png differ diff --git a/__snapshots__/tab-item/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png b/__snapshots__/tab-item/showcase/chromium-highContrast/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png similarity index 100% rename from __snapshots__/tab-item/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png rename to __snapshots__/tab-item/showcase/chromium-highContrast/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png diff --git a/__snapshots__/tab-item/showcase/chromium/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png b/__snapshots__/tab-item/showcase/chromium/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png new file mode 100644 index 00000000000..6d63de51581 Binary files /dev/null and b/__snapshots__/tab-item/showcase/chromium/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png differ diff --git a/__snapshots__/tab-item/showcase/chromium/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png b/__snapshots__/tab-item/showcase/chromium/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png deleted file mode 100644 index 8a19b2a4a21..00000000000 Binary files a/__snapshots__/tab-item/showcase/chromium/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tab-item/showcase/firefox/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png b/__snapshots__/tab-item/showcase/firefox/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png new file mode 100644 index 00000000000..2a86b0216f6 Binary files /dev/null and b/__snapshots__/tab-item/showcase/firefox/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png differ diff --git a/__snapshots__/tab-item/showcase/firefox/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png b/__snapshots__/tab-item/showcase/firefox/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png deleted file mode 100644 index 868a97637b4..00000000000 Binary files a/__snapshots__/tab-item/showcase/firefox/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tab-item/showcase/mobile-chrome/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png b/__snapshots__/tab-item/showcase/mobile-chrome/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png new file mode 100644 index 00000000000..06e59709f88 Binary files /dev/null and b/__snapshots__/tab-item/showcase/mobile-chrome/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png differ diff --git a/__snapshots__/tab-item/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png b/__snapshots__/tab-item/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png deleted file mode 100644 index 26119806795..00000000000 Binary files a/__snapshots__/tab-item/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tab-item/showcase/mobile-safari/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png b/__snapshots__/tab-item/showcase/mobile-safari/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png new file mode 100644 index 00000000000..4f224bba027 Binary files /dev/null and b/__snapshots__/tab-item/showcase/mobile-safari/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png differ diff --git a/__snapshots__/tab-item/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png b/__snapshots__/tab-item/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png deleted file mode 100644 index 52e41a1b88a..00000000000 Binary files a/__snapshots__/tab-item/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tab-item/showcase/webkit/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png b/__snapshots__/tab-item/showcase/webkit/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png new file mode 100644 index 00000000000..1a4413f7950 Binary files /dev/null and b/__snapshots__/tab-item/showcase/webkit/DBTabItem-should-match-screenshot-1/DBTabItem-should-match-screenshot.png differ diff --git a/__snapshots__/tab-item/showcase/webkit/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png b/__snapshots__/tab-item/showcase/webkit/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png deleted file mode 100644 index 5b31a62c907..00000000000 Binary files a/__snapshots__/tab-item/showcase/webkit/regular/neutral-bg-lvl-1/DBTabItem-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tabs/patternhub/tabs-docs-should-match-screenshot.png b/__snapshots__/tabs/patternhub/tabs-docs-should-match-screenshot.png index 85a6e7ab89f..27b95c62f5c 100644 Binary files a/__snapshots__/tabs/patternhub/tabs-docs-should-match-screenshot.png and b/__snapshots__/tabs/patternhub/tabs-docs-should-match-screenshot.png differ diff --git a/__snapshots__/tabs/patternhub/tabs-properties-should-match-screenshot.png b/__snapshots__/tabs/patternhub/tabs-properties-should-match-screenshot.png index a614f106184..520016ede6b 100644 Binary files a/__snapshots__/tabs/patternhub/tabs-properties-should-match-screenshot.png and b/__snapshots__/tabs/patternhub/tabs-properties-should-match-screenshot.png differ diff --git a/__snapshots__/tabs/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/showcase/chromium-highContrast/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png similarity index 100% rename from __snapshots__/tabs/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png rename to __snapshots__/tabs/showcase/chromium-highContrast/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png diff --git a/__snapshots__/tabs/showcase/chromium/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/showcase/chromium/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png new file mode 100644 index 00000000000..14134f7cc9e Binary files /dev/null and b/__snapshots__/tabs/showcase/chromium/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png differ diff --git a/__snapshots__/tabs/showcase/chromium/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/showcase/chromium/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png deleted file mode 100644 index bbb4a31f0c3..00000000000 Binary files a/__snapshots__/tabs/showcase/chromium/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tabs/showcase/firefox/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/showcase/firefox/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png new file mode 100644 index 00000000000..2a99bc458fc Binary files /dev/null and b/__snapshots__/tabs/showcase/firefox/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png differ diff --git a/__snapshots__/tabs/showcase/firefox/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/showcase/firefox/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png deleted file mode 100644 index c70066f770d..00000000000 Binary files a/__snapshots__/tabs/showcase/firefox/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tabs/showcase/mobile-chrome/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/showcase/mobile-chrome/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png new file mode 100644 index 00000000000..9c059e0624b Binary files /dev/null and b/__snapshots__/tabs/showcase/mobile-chrome/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png differ diff --git a/__snapshots__/tabs/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png deleted file mode 100644 index e48ed11f6b1..00000000000 Binary files a/__snapshots__/tabs/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tabs/showcase/mobile-safari/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/showcase/mobile-safari/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png new file mode 100644 index 00000000000..fa8b71df5db Binary files /dev/null and b/__snapshots__/tabs/showcase/mobile-safari/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png differ diff --git a/__snapshots__/tabs/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png deleted file mode 100644 index 3a1fa91f92f..00000000000 Binary files a/__snapshots__/tabs/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tabs/showcase/webkit/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/showcase/webkit/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png new file mode 100644 index 00000000000..41cb7b470f6 Binary files /dev/null and b/__snapshots__/tabs/showcase/webkit/DBTabs-should-match-screenshot-1/DBTabs-should-match-screenshot.png differ diff --git a/__snapshots__/tabs/showcase/webkit/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png b/__snapshots__/tabs/showcase/webkit/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png deleted file mode 100644 index 8f6f632af85..00000000000 Binary files a/__snapshots__/tabs/showcase/webkit/regular/neutral-bg-lvl-1/DBTabs-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox-checked.png b/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox-checked.png index 8097f971b9a..d955b6d3610 100644 Binary files a/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox-checked.png and b/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox-checked.png differ diff --git a/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox.png b/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox.png index c92fa0bf3c0..355b5e84eb9 100644 Binary files a/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox.png and b/__snapshots__/tag/component/chromium/DBTag-should-be-a-checkbox.png differ diff --git a/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox-checked.png b/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox-checked.png index 8e60b91ca08..03bd8627b3c 100644 Binary files a/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox-checked.png and b/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox-checked.png differ diff --git a/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox.png b/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox.png index 0544845a729..3f62459470e 100644 Binary files a/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox.png and b/__snapshots__/tag/component/firefox/DBTag-should-be-a-checkbox.png differ diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox-checked.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox-checked.png index 8097f971b9a..d955b6d3610 100644 Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox-checked.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox-checked.png differ diff --git a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox.png b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox.png index c92fa0bf3c0..355b5e84eb9 100644 Binary files a/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox.png and b/__snapshots__/tag/component/mobile-chrome/DBTag-should-be-a-checkbox.png differ diff --git a/__snapshots__/tag/patternhub/tag-docs-should-match-screenshot.png b/__snapshots__/tag/patternhub/tag-docs-should-match-screenshot.png index e80a12f7684..194d22d3fd1 100644 Binary files a/__snapshots__/tag/patternhub/tag-docs-should-match-screenshot.png and b/__snapshots__/tag/patternhub/tag-docs-should-match-screenshot.png differ diff --git a/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png b/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png index b5bfa3cce5a..69dcfbdd6d8 100644 Binary files a/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png and b/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/chromium-highContrast/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png similarity index 100% rename from __snapshots__/tag/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png rename to __snapshots__/tag/showcase/chromium-highContrast/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png diff --git a/__snapshots__/tag/showcase/chromium/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/chromium/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png new file mode 100644 index 00000000000..61a984fb029 Binary files /dev/null and b/__snapshots__/tag/showcase/chromium/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/chromium/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/chromium/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png deleted file mode 100644 index 227cb923e86..00000000000 Binary files a/__snapshots__/tag/showcase/chromium/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tag/showcase/firefox/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/firefox/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png new file mode 100644 index 00000000000..121aa963f4c Binary files /dev/null and b/__snapshots__/tag/showcase/firefox/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/firefox/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/firefox/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png deleted file mode 100644 index 35d1251b878..00000000000 Binary files a/__snapshots__/tag/showcase/firefox/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tag/showcase/mobile-chrome/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/mobile-chrome/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png new file mode 100644 index 00000000000..edca09dfff0 Binary files /dev/null and b/__snapshots__/tag/showcase/mobile-chrome/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png deleted file mode 100644 index b1a0142777d..00000000000 Binary files a/__snapshots__/tag/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tag/showcase/mobile-safari/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/mobile-safari/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png new file mode 100644 index 00000000000..b0f324b5bbe Binary files /dev/null and b/__snapshots__/tag/showcase/mobile-safari/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png deleted file mode 100644 index 7ccabecff47..00000000000 Binary files a/__snapshots__/tag/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tag/showcase/webkit/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/webkit/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png new file mode 100644 index 00000000000..095eb6cb28e Binary files /dev/null and b/__snapshots__/tag/showcase/webkit/DBTag-should-match-screenshot-1/DBTag-should-match-screenshot.png differ diff --git a/__snapshots__/tag/showcase/webkit/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png b/__snapshots__/tag/showcase/webkit/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png deleted file mode 100644 index b6a0f03b2e5..00000000000 Binary files a/__snapshots__/tag/showcase/webkit/regular/neutral-bg-lvl-1/DBTag-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/textarea/patternhub/textarea-docs-should-match-screenshot.png b/__snapshots__/textarea/patternhub/textarea-docs-should-match-screenshot.png index 2fee0812a69..d59f126bb20 100644 Binary files a/__snapshots__/textarea/patternhub/textarea-docs-should-match-screenshot.png and b/__snapshots__/textarea/patternhub/textarea-docs-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/chromium-highContrast/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png similarity index 100% rename from __snapshots__/textarea/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png rename to __snapshots__/textarea/showcase/chromium-highContrast/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png diff --git a/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png new file mode 100644 index 00000000000..e59d00d2406 Binary files /dev/null and b/__snapshots__/textarea/showcase/chromium/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/chromium/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/chromium/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png deleted file mode 100644 index 82ba3bc5515..00000000000 Binary files a/__snapshots__/textarea/showcase/chromium/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png new file mode 100644 index 00000000000..7edb7929db9 Binary files /dev/null and b/__snapshots__/textarea/showcase/firefox/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/firefox/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/firefox/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png deleted file mode 100644 index b68c836e81d..00000000000 Binary files a/__snapshots__/textarea/showcase/firefox/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png new file mode 100644 index 00000000000..1aaa9f95995 Binary files /dev/null and b/__snapshots__/textarea/showcase/mobile-chrome/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png deleted file mode 100644 index 95d8d892b34..00000000000 Binary files a/__snapshots__/textarea/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/textarea/showcase/mobile-safari/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/mobile-safari/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png new file mode 100644 index 00000000000..7a8561ffd79 Binary files /dev/null and b/__snapshots__/textarea/showcase/mobile-safari/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png deleted file mode 100644 index 3b85674ce6e..00000000000 Binary files a/__snapshots__/textarea/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/textarea/showcase/webkit/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/webkit/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png new file mode 100644 index 00000000000..1416687efd6 Binary files /dev/null and b/__snapshots__/textarea/showcase/webkit/DBTextarea-should-match-screenshot-1/DBTextarea-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/showcase/webkit/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png b/__snapshots__/textarea/showcase/webkit/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png deleted file mode 100644 index 6912803a189..00000000000 Binary files a/__snapshots__/textarea/showcase/webkit/regular/neutral-bg-lvl-1/DBTextarea-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tooltip/patternhub/tooltip-docs-should-match-screenshot.png b/__snapshots__/tooltip/patternhub/tooltip-docs-should-match-screenshot.png index 47e3678a055..827baf1ebe9 100644 Binary files a/__snapshots__/tooltip/patternhub/tooltip-docs-should-match-screenshot.png and b/__snapshots__/tooltip/patternhub/tooltip-docs-should-match-screenshot.png differ diff --git a/__snapshots__/tooltip/patternhub/tooltip-properties-should-match-screenshot.png b/__snapshots__/tooltip/patternhub/tooltip-properties-should-match-screenshot.png index 4297ac655d7..916ad09bf8f 100644 Binary files a/__snapshots__/tooltip/patternhub/tooltip-properties-should-match-screenshot.png and b/__snapshots__/tooltip/patternhub/tooltip-properties-should-match-screenshot.png differ diff --git a/__snapshots__/tooltip/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png b/__snapshots__/tooltip/showcase/chromium-highContrast/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png similarity index 100% rename from __snapshots__/tooltip/showcase/chromium-highContrast/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png rename to __snapshots__/tooltip/showcase/chromium-highContrast/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png diff --git a/__snapshots__/tooltip/showcase/chromium/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png b/__snapshots__/tooltip/showcase/chromium/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png new file mode 100644 index 00000000000..55165cd9c7d Binary files /dev/null and b/__snapshots__/tooltip/showcase/chromium/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png differ diff --git a/__snapshots__/tooltip/showcase/chromium/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png b/__snapshots__/tooltip/showcase/chromium/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png deleted file mode 100644 index c3793983b99..00000000000 Binary files a/__snapshots__/tooltip/showcase/chromium/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tooltip/showcase/firefox/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png b/__snapshots__/tooltip/showcase/firefox/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png new file mode 100644 index 00000000000..5f1fefe3bb6 Binary files /dev/null and b/__snapshots__/tooltip/showcase/firefox/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png differ diff --git a/__snapshots__/tooltip/showcase/firefox/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png b/__snapshots__/tooltip/showcase/firefox/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png deleted file mode 100644 index 49e56effd2b..00000000000 Binary files a/__snapshots__/tooltip/showcase/firefox/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tooltip/showcase/mobile-chrome/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png b/__snapshots__/tooltip/showcase/mobile-chrome/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png new file mode 100644 index 00000000000..25c981892e6 Binary files /dev/null and b/__snapshots__/tooltip/showcase/mobile-chrome/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png differ diff --git a/__snapshots__/tooltip/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png b/__snapshots__/tooltip/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png deleted file mode 100644 index 51f796e5e4c..00000000000 Binary files a/__snapshots__/tooltip/showcase/mobile-chrome/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tooltip/showcase/mobile-safari/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png b/__snapshots__/tooltip/showcase/mobile-safari/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png new file mode 100644 index 00000000000..567453454a0 Binary files /dev/null and b/__snapshots__/tooltip/showcase/mobile-safari/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png differ diff --git a/__snapshots__/tooltip/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png b/__snapshots__/tooltip/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png deleted file mode 100644 index be80d60b244..00000000000 Binary files a/__snapshots__/tooltip/showcase/mobile-safari/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png and /dev/null differ diff --git a/__snapshots__/tooltip/showcase/webkit/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png b/__snapshots__/tooltip/showcase/webkit/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png new file mode 100644 index 00000000000..aa70615da02 Binary files /dev/null and b/__snapshots__/tooltip/showcase/webkit/DBTooltip-should-match-screenshot-1/DBTooltip-should-match-screenshot.png differ diff --git a/__snapshots__/tooltip/showcase/webkit/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png b/__snapshots__/tooltip/showcase/webkit/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png deleted file mode 100644 index 591728848fe..00000000000 Binary files a/__snapshots__/tooltip/showcase/webkit/regular/neutral-bg-lvl-1/DBTooltip-should-match-screenshot.png and /dev/null differ diff --git a/docs/migration/v0.2.x-to-v0.3.x.md b/docs/migration/v0.2.x-to-v0.3.x.md new file mode 100644 index 00000000000..117fb6ebce3 --- /dev/null +++ b/docs/migration/v0.2.x-to-v0.3.x.md @@ -0,0 +1,29 @@ +## Migration Beta (0.2.x) ➡ Beta (0.3.x) + +We refactored our colors which might add some breaking changes to current projects: + +## Migration table + +| old | new | description | +| ---------------------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------- | +| bg-lvl-1 | bg-basic-level-1 | | +| bg-lvl-2 | bg-basic-level-2 | | +| bg-lvl-3 | bg-basic-level-3 | | +| bg-transparent-full | bg-basic-transparent-full | | +| bg-transparent-semi | bg-basic-transparent-semi | | +| bg-transparent-hover | bg-basic-transparent-hovered | | +| bg-transparent-pressed | bg-basic-transparent-pressed | | +| on-bg | on-bg-basic-emphasis-100 | | +| on-bg-weak | on-bg-basic-emphasis-90 | | +| contrast-high | bg-inverted-contrast-high / on-bg-basic-emphasis-80 | we split this color as background color and foreground color. `❗ automigration might not work` | +| contrast-low | bg-inverted-contrast-low / on-bg-basic-emphasis-70 | we split this color as background color and foreground color. `❗ automigration might not work` | +| border | on-bg-basic-emphasis-60 | | +| on-contrast | on-bg-inverted | | + +## Automate migration via CLI + +We provide a cli tool to auto migrate your source code. Use this command in your repository: + +```shell +npx @db-ui/foundations migration --src=./src +``` diff --git a/package-lock.json b/package-lock.json index 25af38c014b..19aad021bb2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5484,15 +5484,6 @@ "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", "devOptional": true }, - "node_modules/@eslint/js": { - "version": "9.7.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.7.0.tgz", - "integrity": "sha512-ChuWDQenef8OSFnvuxv0TCVxEwmu3+hPNKvM9B34qpM0rDRbjL8t5QkQeHHeAfsKQjuH9wS82WeCi1J/owatng==", - "devOptional": true, - "engines": { - "node": "^18.18.0 || ^20.9.0 || >=21.1.0" - } - }, "node_modules/@eslint/object-schema": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz", @@ -17672,6 +17663,15 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/eslint/node_modules/@eslint/js": { + "version": "9.7.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.7.0.tgz", + "integrity": "sha512-ChuWDQenef8OSFnvuxv0TCVxEwmu3+hPNKvM9B34qpM0rDRbjL8t5QkQeHHeAfsKQjuH9wS82WeCi1J/owatng==", + "devOptional": true, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, "node_modules/eslint/node_modules/ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", @@ -38327,15 +38327,19 @@ "version": "0.0.0", "license": "Apache-2.0", "bin": { - "generate-icon-fonts": "build/scripts/generate-icon-fonts/index.js" + "foundations": "build/index.js" }, "devDependencies": { "@csstools/normalize.css": "12.1.1", + "commander": "^12.0.0", "cpr": "3.0.1", "cssnano": "^7.0.4", "dotenv": "^16.4.5", + "glob": "^11.0.0", "nodemon": "3.1.4", - "sass": "1.77.4" + "replace-in-file": "^8.1.0", + "sass": "1.77.4", + "tsx": "^4.16.2" } }, "scripts": { @@ -38402,7 +38406,7 @@ }, "showcases/next-showcase": { "dependencies": { - "next": "*", + "next": "latest", "react": "18.3.1", "react-dom": "18.3.1" }, diff --git a/packages/components/src/README.md b/packages/components/src/README.md index 360956fa63d..7ab59a33f0f 100644 --- a/packages/components/src/README.md +++ b/packages/components/src/README.md @@ -52,16 +52,18 @@ Main use-case to overwrite a color or change colors by `data-variant`. Example: .db-xxx { @include helpers.hover { - background-color: colors.$db-current-color-bg-transparent-hover; + background-color: colors.$db-adaptive-bg-basic-transparent-hovered; } @include helpers.active { - background-color: colors.$db-current-color-bg-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-pressed; } @each $name in colors.$variant-colors { &[data-variant="#{$name}"] { - --db-current-color-border: var(--db-#{$name}-contrast-low-enabled); + --db-adaptive-on-bg-basic-emphasis-60-default: var( + --db-#{$name}-on-bg-basic-emphasis-70-default + ); } } } diff --git a/packages/components/src/components/accordion-item/accordion-item.scss b/packages/components/src/components/accordion-item/accordion-item.scss index 5efe5f3d841..ca3334ebdf6 100644 --- a/packages/components/src/components/accordion-item/accordion-item.scss +++ b/packages/components/src/components/accordion-item/accordion-item.scss @@ -26,7 +26,7 @@ $db-accordion-item-border-radius: variables.$db-border-radius-sm; @extend %dropdown-icon; @extend %db-overwrite-font-size-md; - background-color: colors.$db-current-color-bg-transparent-full-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-full-default; list-style: none; display: flex; justify-content: space-between; @@ -35,19 +35,19 @@ $db-accordion-item-border-radius: variables.$db-border-radius-sm; border-radius: $db-accordion-item-border-radius; @include helpers.hover { - background-color: colors.$db-current-color-bg-transparent-hover; + background-color: colors.$db-adaptive-bg-basic-transparent-hovered; } @include helpers.active { - background-color: colors.$db-current-color-bg-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-pressed; } @include helpers.hover { - background-color: colors.$db-current-color-bg-transparent-hover; + background-color: colors.$db-adaptive-bg-basic-transparent-hovered; } @include helpers.active { - background-color: colors.$db-current-color-bg-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-pressed; } &::-webkit-details-marker { diff --git a/packages/components/src/components/brand/brand.scss b/packages/components/src/components/brand/brand.scss index d3684d2d9fd..70110651547 100644 --- a/packages/components/src/components/brand/brand.scss +++ b/packages/components/src/components/brand/brand.scss @@ -13,7 +13,7 @@ &::before { --db-icon-font-size: #{variables.$db-sizing-md}; --db-icon-margin-end: 0; - --db-icon-color: #{colors.$db-brand-origin-enabled}; + --db-icon-color: #{colors.$db-brand-origin-default}; } img { diff --git a/packages/components/src/components/button/button.scss b/packages/components/src/components/button/button.scss index e3641613acf..8a231863aed 100644 --- a/packages/components/src/components/button/button.scss +++ b/packages/components/src/components/button/button.scss @@ -13,7 +13,7 @@ @extend %default-button; @extend %db-overwrite-font-size-md; - color: colors.$db-current-color-on-bg-enabled; + color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; block-size: variables.$db-sizing-md; inline-size: fit-content; padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md; @@ -22,11 +22,11 @@ text-decoration: none; @include helpers.hover { - background-color: colors.$db-current-color-bg-transparent-hover; + background-color: colors.$db-adaptive-bg-basic-transparent-hovered; } @include helpers.active { - background-color: colors.$db-current-color-bg-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-pressed; } // Square icon only buttons @@ -66,17 +66,18 @@ } &[data-variant="brand"] { - @extend %transparent-border; - - background-color: colors.$db-brand-origin-enabled; - color: colors.$db-brand-on-enabled; + background-color: colors.$db-brand-origin-default; + color: colors.$db-brand-on-origin-default; + border-color: colors.$db-brand-on-bg-basic-emphasis-70-default; @include helpers.hover { - background-color: colors.$db-brand-origin-hover; + background-color: colors.$db-brand-origin-hovered; + border-color: colors.$db-brand-on-bg-basic-emphasis-70-hovered; } @include helpers.active { background-color: colors.$db-brand-origin-pressed; + border-color: colors.$db-brand-on-bg-basic-emphasis-70-pressed; } } @@ -88,11 +89,11 @@ &[data-variant="outlined"], &:not([data-variant]), &[data-variant="ghost"] { - background-color: colors.$db-current-color-bg-transparent-full-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-full-default; } &[data-variant="filled"] { - background-color: colors.$db-current-color-bg-transparent-semi-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-semi-default; } &:disabled { diff --git a/packages/components/src/components/card/card.scss b/packages/components/src/components/card/card.scss index 20030498d66..ef079283da9 100644 --- a/packages/components/src/components/card/card.scss +++ b/packages/components/src/components/card/card.scss @@ -24,43 +24,43 @@ &[data-elevation-level="1"], &:not([data-elevation-level]) { - background-color: colors.$db-current-color-bg-lvl-1-enabled; + background-color: colors.$db-adaptive-bg-basic-level-1-default; &[data-behaviour="interactive"] { @include helpers.hover { - background-color: colors.$db-current-color-bg-lvl-1-hover; + background-color: colors.$db-adaptive-bg-basic-level-1-hovered; } @include helpers.active { - background-color: colors.$db-current-color-bg-lvl-1-pressed; + background-color: colors.$db-adaptive-bg-basic-level-1-pressed; } } } &[data-elevation-level="2"] { - background-color: colors.$db-current-color-bg-lvl-2-enabled; + background-color: colors.$db-adaptive-bg-basic-level-2-default; &[data-behaviour="interactive"] { @include helpers.hover { - background-color: colors.$db-current-color-bg-lvl-2-hover; + background-color: colors.$db-adaptive-bg-basic-level-2-hovered; } @include helpers.active { - background-color: colors.$db-current-color-bg-lvl-2-pressed; + background-color: colors.$db-adaptive-bg-basic-level-2-pressed; } } } &[data-elevation-level="3"] { - background-color: colors.$db-current-color-bg-lvl-3-enabled; + background-color: colors.$db-adaptive-bg-basic-level-3-default; &[data-behaviour="interactive"] { @include helpers.hover { - background-color: colors.$db-current-color-bg-lvl-3-hover; + background-color: colors.$db-adaptive-bg-basic-level-3-hovered; } @include helpers.active { - background-color: colors.$db-current-color-bg-lvl-3-pressed; + background-color: colors.$db-adaptive-bg-basic-level-3-pressed; } } } diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss index 286baf065c4..8381e1824eb 100644 --- a/packages/components/src/components/checkbox/checkbox.scss +++ b/packages/components/src/components/checkbox/checkbox.scss @@ -26,10 +26,10 @@ // Check icon @include icons.set-icon("check"); @include colors.set-current-colors( - colors.$db-current-color-on-bg-enabled, - colors.$db-current-color-bg-lvl-1-enabled, - colors.$db-current-color-on-bg-hover, - colors.$db-current-color-on-bg-pressed + colors.$db-adaptive-bg-inverted-contrast-max-default, + colors.$db-adaptive-on-bg-inverted-default, + colors.$db-adaptive-bg-inverted-contrast-max-hovered, + colors.$db-adaptive-bg-inverted-contrast-max-pressed ); // The icon within the checkbox has the same dimensions as the checkbox itself and that for there can't be any border @@ -43,7 +43,7 @@ @media (forced-colors: active) { &:indeterminate, &:checked { - --db-check-element-border-color: #{colors.$db-current-color-on-bg-enabled}; + --db-check-element-border-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default}; border-width: form-components.$check-border-size; diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss index b0e4c143d16..bba1e611135 100644 --- a/packages/components/src/components/drawer/drawer.scss +++ b/packages/components/src/components/drawer/drawer.scss @@ -114,7 +114,7 @@ $spacings: ( display: flex; flex-direction: column; - background-color: colors.$db-current-color-bg-lvl-1-enabled; + background-color: colors.$db-adaptive-bg-basic-level-1-default; block-size: 100%; inline-size: 100%; position: fixed; diff --git a/packages/components/src/components/header/header.scss b/packages/components/src/components/header/header.scss index 2beeaba5f7a..e61b2b4e5e5 100644 --- a/packages/components/src/components/header/header.scss +++ b/packages/components/src/components/header/header.scss @@ -6,13 +6,13 @@ @use "../../styles/component"; .db-header { - background-color: colors.$db-current-color-bg-lvl-1-enabled; + background-color: colors.$db-adaptive-bg-basic-level-1-default; display: flex; flex-direction: column; position: relative; min-block-size: component.$min-mobile-header-height; border-block-end: variables.$db-border-height-3xs solid - colors.$db-current-color-border; + colors.$db-adaptive-on-bg-basic-emphasis-60-default; @include screen-sizes.screen("md") { --db-drawer-max-width: #{screen-sizes.$db-breakpoint-sm}; @@ -70,7 +70,7 @@ flex-direction: column; gap: variables.$db-spacing-fixed-sm; justify-content: flex-end; - background-color: colors.$db-current-color-bg-lvl-2-enabled; + background-color: colors.$db-adaptive-bg-basic-level-2-default; padding: variables.$db-spacing-fixed-md; @include screen-sizes.screen("md") { diff --git a/packages/components/src/components/infotext/infotext.scss b/packages/components/src/components/infotext/infotext.scss index bfaa9d8aa65..2991e329cd6 100644 --- a/packages/components/src/components/infotext/infotext.scss +++ b/packages/components/src/components/infotext/infotext.scss @@ -22,10 +22,10 @@ &[data-semantic="adaptive"], &:not([data-semantic]) { - color: colors.$db-current-color-contrast-high-enabled; + color: colors.$db-adaptive-bg-inverted-contrast-high-default; &::before { - --db-icon-color: #{colors.$db-current-color-contrast-low-enabled}; + --db-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default}; } } @@ -33,10 +33,12 @@ &[data-semantic="#{$name}"] { @include icons.variant-icons($name); - color: var(--db-#{$name}-contrast-high-enabled); + color: var(--db-#{$name}-bg-inverted-contrast-high-default); &::before { - --db-icon-color: var(--db-#{$name}-contrast-low-enabled); + --db-icon-color: var( + --db-#{$name}-on-bg-basic-emphasis-70-default + ); } } } diff --git a/packages/components/src/components/link/link.scss b/packages/components/src/components/link/link.scss index 6d897489db1..70e65f7461c 100644 --- a/packages/components/src/components/link/link.scss +++ b/packages/components/src/components/link/link.scss @@ -42,14 +42,14 @@ // We couldn't extend any existing SCSS placeholders, as this is a special construct &[data-variant="brand"] { - color: colors.$db-brand-contrast-high-enabled; + color: colors.$db-brand-bg-inverted-contrast-high-default; @include helpers.hover { - color: #{colors.$db-brand-contrast-high-hover}; + color: #{colors.$db-brand-bg-inverted-contrast-high-hovered}; } @include helpers.active { - color: #{colors.$db-brand-contrast-high-pressed}; + color: #{colors.$db-brand-bg-inverted-contrast-high-pressed}; } } diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss index 48d41e91b39..fa32b88ce8d 100644 --- a/packages/components/src/components/navigation-item/navigation-item.scss +++ b/packages/components/src/components/navigation-item/navigation-item.scss @@ -51,7 +51,7 @@ @extend %transparent-border; @extend %db-overwrite-font-size-md; - background-color: colors.$db-current-color-bg-transparent-full-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-full-default; cursor: pointer; inline-size: 100%; display: inline-flex; @@ -62,15 +62,15 @@ align-items: center; // Centering the content vertically and horizontally @include helpers.hover { - background-color: colors.$db-current-color-bg-transparent-hover; + background-color: colors.$db-adaptive-bg-basic-transparent-hovered; } @include helpers.active { - background-color: colors.$db-current-color-bg-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-pressed; } &:has(~ .db-sub-navigation:is(:hover, :focus)) { - background-color: colors.$db-current-color-bg-transparent-hover; + background-color: colors.$db-adaptive-bg-basic-transparent-hovered; } } @@ -175,7 +175,7 @@ flex-direction: column; z-index: 70; inset-inline-start: 0; - background-color: colors.$db-current-color-bg-lvl-1-enabled; + background-color: colors.$db-adaptive-bg-basic-level-1-default; visibility: hidden; @include screen-sizes.screen("md", "max") { @@ -297,7 +297,7 @@ display: flex; font-weight: normal; - background-color: colors.$db-current-color-bg-lvl-1-enabled; + background-color: colors.$db-adaptive-bg-basic-level-1-default; padding-block-end: variables.$db-spacing-fixed-md; margin-block-end: variables.$db-spacing-fixed-md; } diff --git a/packages/components/src/components/notification/notification.scss b/packages/components/src/components/notification/notification.scss index 0e1c90a68cc..3ce0de1e76a 100644 --- a/packages/components/src/components/notification/notification.scss +++ b/packages/components/src/components/notification/notification.scss @@ -31,10 +31,10 @@ padding: variables.$db-spacing-fixed-md; gap: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md; inline-size: inherit; - background-color: colors.$db-current-color-bg-lvl-2-enabled; + background-color: colors.$db-adaptive-bg-basic-level-2-default; &::before { - --db-icon-color: #{colors.$db-current-color-contrast-low-enabled}; + --db-icon-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default}; } a { diff --git a/packages/components/src/components/radio/radio.scss b/packages/components/src/components/radio/radio.scss index 1cd3b3fea9b..b93479b955d 100644 --- a/packages/components/src/components/radio/radio.scss +++ b/packages/components/src/components/radio/radio.scss @@ -17,7 +17,7 @@ &:checked { // The radio element still has the default background for the dot on :hover when in checked state &:not(:disabled):is(:hover, :focus) { - background-color: colors.$db-current-color-bg-transparent-full-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-full-default; } &:not([data-size="small"]) { diff --git a/packages/components/src/components/select/select.scss b/packages/components/src/components/select/select.scss index fb721f50cf5..dad6ba4bb60 100644 --- a/packages/components/src/components/select/select.scss +++ b/packages/components/src/components/select/select.scss @@ -38,7 +38,7 @@ $has-before-padding: calc( // Most likely this wouldn't work on MacOS, but we're still progressively enhancing Windows by this option { - background-color: colors.$db-current-color-bg-transparent-semi-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-semi-default; } &[data-variant="hidden"] { diff --git a/packages/components/src/components/switch/switch.scss b/packages/components/src/components/switch/switch.scss index dd7035f22e1..fe611e16886 100644 --- a/packages/components/src/components/switch/switch.scss +++ b/packages/components/src/components/switch/switch.scss @@ -61,7 +61,7 @@ $checked-active-transition-size: calc( display: flex; align-items: center; gap: $switch-fixed-padding; - background-color: colors.$db-current-color-bg-transparent-full-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-full-default; border-radius: variables.$db-border-radius-full; &::after { @@ -77,8 +77,8 @@ $checked-active-transition-size: calc( align-content: center; aspect-ratio: 1; block-size: $switch-inactive-thumb-size; - background-color: colors.$db-current-color-on-bg-enabled; - color: colors.$db-current-color-on-bg-enabled; + background-color: colors.$db-adaptive-bg-inverted-contrast-max-default; + color: colors.$db-adaptive-bg-inverted-contrast-max-default; border-radius: variables.$db-border-radius-full; transform: translateX(var(--thumb-offset-x)); margin-inline-end: calc( @@ -103,26 +103,26 @@ $checked-active-transition-size: calc( --thumb-offset-x: calc(100% + #{$switch-fixed-padding}); @include colors.set-current-colors( - colors.$db-current-color-on-bg-enabled, - colors.$db-current-color-bg-lvl-1-enabled, - colors.$db-current-color-on-bg-hover, - colors.$db-current-color-on-bg-pressed + colors.$db-adaptive-bg-inverted-contrast-max-default, + colors.$db-adaptive-on-bg-inverted-default, + colors.$db-adaptive-bg-inverted-contrast-max-hovered, + colors.$db-adaptive-bg-inverted-contrast-max-pressed ); - border-color: colors.$db-current-color-on-bg-enabled; + border-color: colors.$db-adaptive-bg-inverted-contrast-max-default; @include helpers.hover { - border-color: colors.$db-current-color-on-bg-hover; + border-color: colors.$db-adaptive-bg-inverted-contrast-max-hovered; } @include helpers.active { - border-color: colors.$db-current-color-on-bg-pressed; + border-color: colors.$db-adaptive-bg-inverted-contrast-max-pressed; } &::before { block-size: $switch-active-thumb-size; - background-color: colors.$db-current-color-bg-lvl-1-enabled; - color: colors.$db-current-color-bg-lvl-1-enabled; + background-color: colors.$db-adaptive-on-bg-inverted-default; + color: colors.$db-adaptive-on-bg-inverted-default; margin: 0; } } @@ -139,6 +139,11 @@ $checked-active-transition-size: calc( &[data-aid-icon-after]:checked::after { --db-icon-after: attr(data-aid-icon-after); } + + @media screen and (prefers-reduced-motion: no-preference) { + // Overwrite default transition for switch border + transition: none; + } } &[data-variant="hidden"] { @@ -155,21 +160,22 @@ $checked-active-transition-size: calc( &[data-emphasis="strong"] { > input { - --db-check-element-border-color: #{colors.$db-current-color-bg-transparent-full-enabled}; + --db-check-element-border-color: #{colors.$db-adaptive-bg-basic-transparent-full-default}; @extend %db-critical-variables; - @extend %db-critical-contrast-low; - border-color: colors.$db-current-color-contrast-low-enabled; + background-color: colors.$db-adaptive-bg-inverted-contrast-low-default; + color: colors.$db-adaptive-on-bg-inverted-default; + border-color: colors.$db-adaptive-bg-inverted-contrast-low-default; @include helpers.hover { - background-color: colors.$db-current-color-contrast-low-hover; - border-color: colors.$db-current-color-contrast-low-hover; + background-color: colors.$db-adaptive-bg-inverted-contrast-low-hovered; + border-color: colors.$db-adaptive-bg-inverted-contrast-low-hovered; } @include helpers.active { - background-color: colors.$db-current-color-contrast-low-pressed; - border-color: colors.$db-current-color-contrast-low-pressed; + background-color: colors.$db-adaptive-bg-inverted-contrast-low-pressed; + border-color: colors.$db-adaptive-bg-inverted-contrast-low-pressed; &::before { block-size: $checked-active-transition-size; @@ -182,17 +188,16 @@ $checked-active-transition-size: calc( &:checked { @extend %db-successful-variables; - @extend %db-successful-contrast-low; &::before { - background-color: colors.$db-current-color-on-contrast-enabled; - color: colors.$db-current-color-on-contrast-enabled; + background-color: colors.$db-adaptive-on-bg-inverted-default; + color: colors.$db-adaptive-on-bg-inverted-default; } } &::before { - background-color: colors.$db-current-color-on-contrast-enabled; - color: colors.$db-current-color-on-contrast-enabled; + background-color: colors.$db-adaptive-on-bg-inverted-default; + color: colors.$db-adaptive-on-bg-inverted-default; block-size: $switch-active-thumb-size; margin: 0; } diff --git a/packages/components/src/components/tab-item/tab-item.scss b/packages/components/src/components/tab-item/tab-item.scss index d3bac72cfe9..6237df501c9 100644 --- a/packages/components/src/components/tab-item/tab-item.scss +++ b/packages/components/src/components/tab-item/tab-item.scss @@ -23,7 +23,7 @@ $tab-border-radius: variables.$db-border-radius-sm; } label { - background-color: colors.$db-current-color-bg-transparent-full-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-full-default; padding: variables.$db-spacing-fixed-xs; align-items: center; display: inline-block; @@ -35,7 +35,7 @@ $tab-border-radius: variables.$db-border-radius-sm; @include helpers.hover { &:has(:not(input:disabled)) { - background-color: colors.$db-current-color-bg-transparent-hover; + background-color: colors.$db-adaptive-bg-basic-transparent-hovered; } &:has(input:disabled) { @@ -45,7 +45,7 @@ $tab-border-radius: variables.$db-border-radius-sm; @include helpers.hover { &:has(:not(input:disabled)) { - background-color: colors.$db-current-color-bg-transparent-hover; + background-color: colors.$db-adaptive-bg-basic-transparent-hovered; } &:has(input:disabled) { @@ -104,7 +104,7 @@ $tab-border-radius: variables.$db-border-radius-sm; inline-size: 100%; margin-inline-end: initial; inset: 0; - background-color: colors.$db-current-color-bg-transparent-full-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-full-default; border-radius: $tab-border-radius; z-index: -1; diff --git a/packages/components/src/components/tabs/tabs.scss b/packages/components/src/components/tabs/tabs.scss index ac8f10957ad..c3dd55e4155 100644 --- a/packages/components/src/components/tabs/tabs.scss +++ b/packages/components/src/components/tabs/tabs.scss @@ -51,7 +51,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; } %pulse-track { - background-color: colors.$db-current-color-bg-transparent-semi-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-semi-default; content: ""; border-radius: variables.$db-border-radius-xs; position: absolute; @@ -309,7 +309,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; &::after { position: absolute; z-index: $db-tabs-z-index-button-background; - background-color: colors.$db-current-color-bg-lvl-1-enabled; + background-color: colors.$db-adaptive-bg-basic-level-1-default; inline-size: variables.$db-sizing-md; block-size: calc( #{variables.$db-spacing-fixed-sm} + #{variables.$db-sizing-md} diff --git a/packages/components/src/components/tag/tag.scss b/packages/components/src/components/tag/tag.scss index 0551b056c56..a5a7a0651b2 100644 --- a/packages/components/src/components/tag/tag.scss +++ b/packages/components/src/components/tag/tag.scss @@ -116,7 +116,7 @@ &:checked { &, &:not(:disabled):is(:hover, :focus, :active) { - background-color: colors.$db-brand-bg-transparent-full-enabled; + background-color: colors.$db-brand-bg-basic-transparent-full-default; } &::before { @@ -198,7 +198,7 @@ &:is(button), button { // overwrite to transparent - background-color: colors.$db-current-color-bg-transparent-full-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-full-default; margin-inline-start: variables.$db-spacing-fixed-2xs; border: 0; aspect-ratio: 1 / 1; diff --git a/packages/components/src/components/textarea/textarea.scss b/packages/components/src/components/textarea/textarea.scss index f5aec1804df..a37e28b92dc 100644 --- a/packages/components/src/components/textarea/textarea.scss +++ b/packages/components/src/components/textarea/textarea.scss @@ -58,7 +58,7 @@ @include get-scrolling-workaround(); - background-color: colors.$db-current-color-bg-lvl-1-enabled; + background-color: colors.$db-adaptive-bg-basic-level-1-default; } &::after { @@ -66,19 +66,19 @@ @include get-scrolling-workaround(); - background-color: colors.$db-current-color-bg-transparent-semi-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-semi-default; z-index: 1; border-block-end: none; border-inline-end: none; } &:has(textarea:read-only)::after { - background-color: colors.$db-current-color-bg-lvl-1-enabled !important; + background-color: colors.$db-adaptive-bg-basic-level-1-default !important; } &:has(textarea:not(:disabled):is(:hover, :focus)) { &::after { - background-color: colors.$db-current-color-bg-transparent-hover; + background-color: colors.$db-adaptive-bg-basic-transparent-hovered; } } } diff --git a/packages/components/src/components/tooltip/tooltip.scss b/packages/components/src/components/tooltip/tooltip.scss index 01cc4d7fff6..da42e97bde1 100644 --- a/packages/components/src/components/tooltip/tooltip.scss +++ b/packages/components/src/components/tooltip/tooltip.scss @@ -14,8 +14,8 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs; @extend %db-overwrite-font-size-sm; @extend %default-popover; - background-color: colors.$db-current-color-bg-lvl-1-enabled; - color: colors.$db-current-color-on-bg-enabled; + background-color: colors.$db-adaptive-bg-basic-level-1-default; + color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; // i HTML tags browsers default styling reset font-style: normal; @@ -25,7 +25,7 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs; padding: variables.$db-spacing-fixed-2xs variables.$db-spacing-fixed-xs; &::after { - background-color: colors.$db-current-color-bg-lvl-1-enabled; + background-color: colors.$db-adaptive-bg-basic-level-1-default; } // Only for testing @@ -41,7 +41,7 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs; content: ""; box-shadow: variables.$db-elevation-md; position: absolute; - background-color: colors.$db-current-color-bg-lvl-1-enabled; + background-color: colors.$db-adaptive-bg-basic-level-1-default; inline-size: $tooltip-arrow-shadow-size; block-size: $tooltip-arrow-shadow-size; clip-path: polygon( @@ -99,15 +99,15 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs; } &[data-emphasis="strong"] { - background-color: colors.$db-current-color-contrast-high-enabled; - color: colors.$db-current-color-on-contrast-enabled; + background-color: colors.$db-adaptive-bg-inverted-contrast-high-default; + color: colors.$db-adaptive-on-bg-inverted-default; &::before { - --db-icon-color: #{colors.$db-current-color-on-contrast-enabled}; + --db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default}; } &::after { - background-color: colors.$db-current-color-contrast-high-enabled; + background-color: colors.$db-adaptive-bg-inverted-contrast-high-default; } } } diff --git a/packages/components/src/shared/constants.ts b/packages/components/src/shared/constants.ts index a1a519eb710..2b834db17c6 100644 --- a/packages/components/src/shared/constants.ts +++ b/packages/components/src/shared/constants.ts @@ -30,36 +30,36 @@ export enum COLOR_SIMPLE { } export enum COLOR { - 'NEUTRAL_BG_LEVEL_1' = 'neutral-bg-lvl-1', - 'NEUTRAL_BG_LEVEL_2' = 'neutral-bg-lvl-2', - 'NEUTRAL_BG_LEVEL_3' = 'neutral-bg-lvl-3', - 'NEUTRAL_BG_TRANSPARENT_SEMI' = 'neutral-bg-transparent-semi', - 'NEUTRAL_BG_TRANSPARENT_FULL' = 'neutral-bg-transparent-full', - 'BRAND_BG_LEVEL_1' = 'brand-bg-lvl-1', - 'BRAND_BG_LEVEL_2' = 'brand-bg-lvl-2', - 'BRAND_BG_LEVEL_3' = 'brand-bg-lvl-3', - 'BRAND_BG_TRANSPARENT_SEMI' = 'brand-bg-transparent-semi', - 'BRAND_BG_TRANSPARENT_FULL' = 'brand-bg-transparent-full', - 'SUCCESSFUL_BG_LEVEL_1' = 'successful-bg-lvl-1', - 'SUCCESSFUL_BG_LEVEL_2' = 'successful-bg-lvl-2', - 'SUCCESSFUL_BG_LEVEL_3' = 'successful-bg-lvl-3', - 'SUCCESSFUL_BG_TRANSPARENT_SEMI' = 'successful-bg-transparent-semi', - 'SUCCESSFUL_BG_TRANSPARENT_FULL' = 'successful-bg-transparent-full', - 'CRITICAL_BG_LEVEL_1' = 'critical-bg-lvl-1', - 'CRITICAL_BG_LEVEL_2' = 'critical-bg-lvl-2', - 'CRITICAL_BG_LEVEL_3' = 'critical-bg-lvl-3', - 'CRITICAL_BG_TRANSPARENT_SEMI' = 'critical-bg-transparent-semi', - 'CRITICAL_BG_TRANSPARENT_Full' = 'critical-bg-transparent-full', - 'WARNING_BG_LEVEL_1' = 'warning-bg-lvl-1', - 'WARNING_BG_LEVEL_2' = 'warning-bg-lvl-2', - 'WARNING_BG_LEVEL_3' = 'warning-bg-lvl-3', - 'WARNING_BG_TRANSPARENT_SEMI' = 'warning-bg-transparent-semi', - 'WARNING_BG_TRANSPARENT_FULL' = 'warning-bg-transparent-full', - 'INFORMATIONAL_BG_LEVEL_1' = 'informational-bg-lvl-1', - 'INFORMATIONAL_BG_LEVEL_2' = 'informational-bg-lvl-2', - 'INFORMATIONAL_BG_LEVEL_3' = 'informational-bg-lvl-3', - 'INFORMATIONAL_BG_TRANSPARENT_SEMI' = 'informational-bg-transparent-semi', - 'INFORMATIONAL_BG_TRANSPARENT_FULL' = 'informational-bg-transparent-full' + 'NEUTRAL_BG_LEVEL_1' = 'neutral-bg-basic-level-1', + 'NEUTRAL_BG_LEVEL_2' = 'neutral-bg-basic-level-2', + 'NEUTRAL_BG_LEVEL_3' = 'neutral-bg-basic-level-3', + 'NEUTRAL_BG_TRANSPARENT_SEMI' = 'neutral-bg-basic-transparent-semi', + 'NEUTRAL_BG_TRANSPARENT_FULL' = 'neutral-bg-basic-transparent-full', + 'BRAND_BG_LEVEL_1' = 'brand-bg-basic-level-1', + 'BRAND_BG_LEVEL_2' = 'brand-bg-basic-level-2', + 'BRAND_BG_LEVEL_3' = 'brand-bg-basic-level-3', + 'BRAND_BG_TRANSPARENT_SEMI' = 'brand-bg-basic-transparent-semi', + 'BRAND_BG_TRANSPARENT_FULL' = 'brand-bg-basic-transparent-full', + 'SUCCESSFUL_BG_LEVEL_1' = 'successful-bg-basic-level-1', + 'SUCCESSFUL_BG_LEVEL_2' = 'successful-bg-basic-level-2', + 'SUCCESSFUL_BG_LEVEL_3' = 'successful-bg-basic-level-3', + 'SUCCESSFUL_BG_TRANSPARENT_SEMI' = 'successful-bg-basic-transparent-semi', + 'SUCCESSFUL_BG_TRANSPARENT_FULL' = 'successful-bg-basic-transparent-full', + 'CRITICAL_BG_LEVEL_1' = 'critical-bg-basic-level-1', + 'CRITICAL_BG_LEVEL_2' = 'critical-bg-basic-level-2', + 'CRITICAL_BG_LEVEL_3' = 'critical-bg-basic-level-3', + 'CRITICAL_BG_TRANSPARENT_SEMI' = 'critical-bg-basic-transparent-semi', + 'CRITICAL_BG_TRANSPARENT_Full' = 'critical-bg-basic-transparent-full', + 'WARNING_BG_LEVEL_1' = 'warning-bg-basic-level-1', + 'WARNING_BG_LEVEL_2' = 'warning-bg-basic-level-2', + 'WARNING_BG_LEVEL_3' = 'warning-bg-basic-level-3', + 'WARNING_BG_TRANSPARENT_SEMI' = 'warning-bg-basic-transparent-semi', + 'WARNING_BG_TRANSPARENT_FULL' = 'warning-bg-basic-transparent-full', + 'INFORMATIONAL_BG_LEVEL_1' = 'informational-bg-basic-level-1', + 'INFORMATIONAL_BG_LEVEL_2' = 'informational-bg-basic-level-2', + 'INFORMATIONAL_BG_LEVEL_3' = 'informational-bg-basic-level-3', + 'INFORMATIONAL_BG_TRANSPARENT_SEMI' = 'informational-bg-basic-transparent-semi', + 'INFORMATIONAL_BG_TRANSPARENT_FULL' = 'informational-bg-basic-transparent-full' } export const COLORS: COLOR[] = Object.entries(COLOR).map(([, value]) => value); diff --git a/packages/components/src/styles/_component.scss b/packages/components/src/styles/_component.scss index 78641865d34..6b402bc79a1 100644 --- a/packages/components/src/styles/_component.scss +++ b/packages/components/src/styles/_component.scss @@ -11,7 +11,7 @@ $default-disabled: 0.4; %default-adaptive-border { border: variables.$db-border-height-3xs solid - colors.$db-current-color-on-bg-enabled; + colors.$db-adaptive-on-bg-basic-emphasis-100-default; } %transparent-border { @@ -20,7 +20,7 @@ $default-disabled: 0.4; %component-border { border: variables.$db-border-height-3xs solid - colors.$db-current-color-border; + colors.$db-adaptive-on-bg-basic-emphasis-60-default; } %default-interactive-component { diff --git a/packages/components/src/styles/_db-puls.scss b/packages/components/src/styles/_db-puls.scss index 7befbe47d43..76e5895926f 100644 --- a/packages/components/src/styles/_db-puls.scss +++ b/packages/components/src/styles/_db-puls.scss @@ -8,7 +8,7 @@ inline-size: 0; transform: translate(-50%, 0); inset-inline-start: 50%; - background-color: colors.$db-brand-origin-enabled; + background-color: colors.$db-brand-on-bg-basic-emphasis-70-default; inset-block: auto calc(-1 * #{variables.$db-spacing-fixed-xs}); } } @@ -19,7 +19,7 @@ inline-size: variables.$db-border-height-xs; transform: translate(0, -50%); inset-block: 50% auto; - background-color: colors.$db-brand-origin-enabled; + background-color: colors.$db-brand-on-bg-basic-emphasis-70-default; inset-inline-start: calc(-1 * #{variables.$db-spacing-fixed-xs}); } } diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss index 287382169b5..5766b184c0d 100644 --- a/packages/components/src/styles/_form-components.scss +++ b/packages/components/src/styles/_form-components.scss @@ -165,8 +165,8 @@ $check-border-size: min(#{variables.$db-border-height-2xs}, 2px); #{$selector}, [id$="-placeholder"] { - color: var(--db-#{$variant}-on-bg-enabled); - caret-color: var(--db-#{$variant}-on-bg-enabled); + color: var(--db-#{$variant}-on-bg-basic-emphasis-100-default); + caret-color: var(--db-#{$variant}-on-bg-basic-emphasis-100-default); } @if ($key != "valid") { @@ -178,21 +178,25 @@ $check-border-size: min(#{variables.$db-border-height-2xs}, 2px); /* stylelint-disable-next-line at-rule-empty-line-before */ } @else { // this is a workaround for the textarea scrollbar - --db-textarea-read-only: var(--db-#{$variant}-bg-lvl-1-enabled); - --db-current-color-bg-transparent-full-enabled: var( - --db-#{$variant}-bg-transparent-full-enabled + --db-textarea-read-only: var(--db-#{$variant}-bg-basic-level-1-default); + --db-adaptive-bg-basic-transparent-full-default: var( + --db-#{$variant}-bg-basic-transparent-full-default ); - --db-current-color-bg-transparent-semi-enabled: var( - --db-#{$variant}-bg-transparent-semi-enabled + --db-adaptive-bg-basic-transparent-semi-default: var( + --db-#{$variant}-bg-basic-transparent-semi-default ); - --db-current-color-bg-transparent-hover: var( - --db-#{$variant}-bg-transparent-hover + --db-adaptive-bg-basic-transparent-hovered: var( + --db-#{$variant}-bg-basic-transparent-hovered ); - --db-current-color-bg-transparent-pressed: var( - --db-#{$variant}-bg-transparent-pressed + --db-adaptive-bg-basic-transparent-pressed: var( + --db-#{$variant}-bg-basic-transparent-pressed + ); + --db-adaptive-default: var( + --db-#{$variant}-on-bg-basic-emphasis-100-default + ); + --db-adaptive-on-bg-basic-emphasis-60-default: var( + --db-#{$variant}-border ); - --db-current-color-enabled: var(--db-#{$variant}-on-bg-enabled); - --db-current-color-border: var(--db-#{$variant}-border); } } @@ -293,8 +297,8 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden" @extend %default-interactive-component; @extend %component-border; - background-color: colors.$db-current-color-bg-transparent-semi-enabled; - caret-color: colors.$db-current-color-on-bg-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-semi-default; + caret-color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; appearance: none; max-inline-size: 100%; inline-size: 100%; @@ -312,13 +316,13 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden" } @include helpers.hover { - background-color: colors.$db-current-color-bg-transparent-hover; + background-color: colors.$db-adaptive-bg-basic-transparent-hovered; } &:is(input, textarea):not(:disabled):read-only { background-color: var( --db-textarea-read-only, - #{colors.$db-current-color-bg-lvl-1-enabled} + #{colors.$db-adaptive-bg-basic-level-1-default} ) !important; } } @@ -368,7 +372,7 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden" 1 ) - 1px ); - color: colors.$db-current-color-on-bg-enabled; + color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; } &::before { @@ -401,36 +405,38 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden" @include get-validity-message($key); input { - --db-current-color-bg-transparent-semi: var( - --db-#{$variant}-bg-transparent-semi-enabled + --db-adaptive-bg-basic-transparent-semi: var( + --db-#{$variant}-bg-basic-transparent-semi-default ); - --db-current-color-bg-transparent-hover: var( - --db-#{$variant}-bg-transparent-hover + --db-adaptive-bg-basic-transparent-hovered: var( + --db-#{$variant}-bg-basic-transparent-hovered ); - --db-current-color-bg-transparent-pressed: var( - --db-#{$variant}-bg-transparent-pressed + --db-adaptive-bg-basic-transparent-pressed: var( + --db-#{$variant}-bg-basic-transparent-pressed ); - border-color: colors.$db-current-color-on-bg-enabled; + border-color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; &:not(:checked), &:is([type="radio"]) { - border-color: var(--db-#{$variant}-contrast-high-enabled); + border-color: var( + --db-#{$variant}-bg-inverted-contrast-high-default + ); } &:not([type="radio"]):checked { @include colors.set-current-colors( - colors.$db-successful-contrast-high-enabled, - colors.$db-successful-on-contrast-enabled, - colors.$db-successful-contrast-high-hover, - colors.$db-successful-contrast-high-pressed + colors.$db-successful-bg-inverted-contrast-high-default, + colors.$db-successful-on-bg-inverted-default, + colors.$db-successful-bg-inverted-contrast-high-hovered, + colors.$db-successful-bg-inverted-contrast-high-pressed ); } } &:is(label), label { - color: var(--db-#{$variant}-contrast-high-enabled); + color: var(--db-#{$variant}-bg-inverted-contrast-high-default); } } @@ -465,7 +471,7 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden" } input { - background-color: colors.$db-current-color-bg-transparent-full-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-full-default; place-content: center center; appearance: none; aspect-ratio: 1; @@ -478,11 +484,11 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden" padding: 0; @include helpers.hover { - background-color: colors.$db-current-color-bg-transparent-hover; + background-color: colors.$db-adaptive-bg-basic-transparent-hovered; } @include helpers.active { - background-color: colors.$db-current-color-bg-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-pressed; } } diff --git a/packages/components/src/styles/_link-components.scss b/packages/components/src/styles/_link-components.scss index 50768ce0725..2ce980db6e5 100644 --- a/packages/components/src/styles/_link-components.scss +++ b/packages/components/src/styles/_link-components.scss @@ -10,13 +10,13 @@ } %db-link-default-color { - color: colors.$db-current-color-on-bg-enabled; + color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; @include helpers.hover { color: color-mix( in srgb, transparent 25%, - #{colors.$db-current-color-on-bg-enabled} + #{colors.$db-adaptive-on-bg-basic-emphasis-100-default} ); } @@ -24,7 +24,7 @@ color: color-mix( in srgb, transparent 50%, - #{colors.$db-current-color-on-bg-enabled} + #{colors.$db-adaptive-on-bg-basic-emphasis-100-default} ); } } diff --git a/packages/components/src/styles/_popover-component.scss b/packages/components/src/styles/_popover-component.scss index 19e46377d5c..b1a3af34450 100644 --- a/packages/components/src/styles/_popover-component.scss +++ b/packages/components/src/styles/_popover-component.scss @@ -193,7 +193,7 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size}); @extend %popover-placement; position: absolute; - background-color: colors.$db-current-color-bg-lvl-1-enabled; + background-color: colors.$db-adaptive-bg-basic-level-1-default; box-shadow: variables.$db-elevation-md; display: none; z-index: 1; diff --git a/packages/components/src/styles/_scrollbar.scss b/packages/components/src/styles/_scrollbar.scss index 3d50641b429..bc21c32db85 100644 --- a/packages/components/src/styles/_scrollbar.scss +++ b/packages/components/src/styles/_scrollbar.scss @@ -13,46 +13,46 @@ $scrollbar-width: helpers.px-to-rem(8); z-index: 3; inline-size: $scrollbar-width; block-size: $scrollbar-width; - background-color: colors.$db-current-color-bg-lvl-1-enabled; + background-color: colors.$db-adaptive-bg-basic-level-1-default; border-start-end-radius: variables.$db-border-radius-xs; } &:is(:hover, :focus) { &::-webkit-scrollbar-track, &::-webkit-scrollbar-button:single-button { - background-color: colors.$db-current-color-bg-transparent-hover; + background-color: colors.$db-adaptive-bg-basic-transparent-hovered; } } &:read-only { &::-webkit-scrollbar-track, &::-webkit-scrollbar-button:single-button { - background-color: colors.$db-current-color-bg-lvl-1-enabled !important; + background-color: colors.$db-adaptive-bg-basic-level-1-default !important; } } &::-webkit-scrollbar-track { - background-color: colors.$db-current-color-bg-transparent-semi-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-semi-default; } &::-webkit-scrollbar-thumb { - background-color: colors.$db-current-color-bg-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-pressed; } /* Buttons */ &::-webkit-scrollbar-button:single-button { - background-color: colors.$db-current-color-bg-transparent-semi-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-semi-default; background-size: $scrollbar-width; background-repeat: no-repeat; background-position: center; block-size: form-components.$floating-label-size; &:is(:hover, :focus) { - background-color: colors.$db-current-color-bg-transparent-hover; + background-color: colors.$db-adaptive-bg-basic-transparent-hovered; } &:active { - background-color: colors.$db-current-color-bg-transparent-pressed; + background-color: colors.$db-adaptive-bg-basic-transparent-pressed; } } @@ -68,16 +68,16 @@ $scrollbar-width: helpers.px-to-rem(8); &[data-variant="floating"] { &::-webkit-resizer { - background-color: colors.$db-current-color-bg-transparent-semi-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-semi-default; } &::-webkit-scrollbar-corner { - background-color: colors.$db-current-color-bg-lvl-1-enabled; + background-color: colors.$db-adaptive-bg-basic-level-1-default; } } &::-webkit-resizer { - background-color: colors.$db-current-color-bg-transparent-full-enabled; + background-color: colors.$db-adaptive-bg-basic-transparent-full-default; background-size: $scrollbar-width; background-repeat: no-repeat; background-position: center; diff --git a/packages/components/src/styles/_tag-components.scss b/packages/components/src/styles/_tag-components.scss index 319cb5d9c36..184ba4845b1 100644 --- a/packages/components/src/styles/_tag-components.scss +++ b/packages/components/src/styles/_tag-components.scss @@ -7,16 +7,16 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a"; %set-adaptive-strong-tag { - --db-current-color-border: #{colors.$db-current-color-contrast-high-enabled}; + --db-adaptive-on-bg-basic-emphasis-60-default: #{colors.$db-adaptive-bg-inverted-contrast-high-default}; @include colors.set-current-colors( - colors.$db-current-color-contrast-high-enabled, - colors.$db-current-color-on-contrast-enabled + colors.$db-adaptive-bg-inverted-contrast-high-default, + colors.$db-adaptive-on-bg-inverted-default ); } @mixin get-tag-colors() { - background-color: colors.$db-current-color-bg-lvl-3-enabled; + background-color: colors.$db-adaptive-bg-basic-level-3-default; &[data-emphasis="strong"] { @extend %set-adaptive-strong-tag; @@ -24,10 +24,17 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a"; @each $name in colors.$variant-colors { &[data-semantic="#{$name}"] { - @extend %db-#{$name}-bg-lvl-3; + @extend %db-#{$name}-bg-basic-level-3; &[data-emphasis="strong"] { - @extend %db-#{$name}-contrast-high; + --db-adaptive-on-bg-basic-emphasis-60-default: var( + --db-#{$name}-bg-inverted-contrast-high-default + ); + + @include colors.set-current-colors( + var(--db-#{$name}-bg-inverted-contrast-high-default), + var(--db-#{$name}-on-bg-inverted-default) + ); } } } @@ -43,27 +50,17 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a"; } } -%set-interactive-weak { - background-color: colors.$db-current-color-bg-lvl-1-enabled; - - @include helpers.hover { - background-color: colors.$db-current-color-bg-lvl-1-hover; - } - - @include helpers.active { - background-color: colors.$db-current-color-bg-lvl-1-pressed; - } -} - %set-interactive-strong { @extend %set-adaptive-strong-tag; @include helpers.hover { - background-color: colors.$db-current-color-contrast-high-hover; + background-color: colors.$db-adaptive-bg-inverted-contrast-high-hovered; + border-color: colors.$db-adaptive-bg-inverted-contrast-high-hovered; } @include helpers.active { - background-color: colors.$db-current-color-contrast-high-pressed; + background-color: colors.$db-adaptive-bg-inverted-contrast-high-pressed; + border-color: colors.$db-adaptive-bg-inverted-contrast-high-pressed; } } @@ -104,34 +101,50 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a"; } label:has(input) { - @extend %set-interactive-weak; + background-color: colors.$db-adaptive-bg-basic-level-1-default; + + @include helpers.hover { + background-color: colors.$db-adaptive-bg-basic-level-1-hovered; + } + + @include helpers.active { + background-color: colors.$db-adaptive-bg-basic-level-1-pressed; + } } &:not([data-emphasis]), &[data-emphasis="weak"] { - // buttons and links should have bg-lvl-2 + // buttons and links should have bg-basic-level-2 @include get-interactive-selectors() { - @extend %set-interactive-weak; + background-color: colors.$db-adaptive-bg-basic-level-3-default; + + @include helpers.hover { + background-color: colors.$db-adaptive-bg-basic-level-3-hovered; + } + + @include helpers.active { + background-color: colors.$db-adaptive-bg-basic-level-3-pressed; + } } - // checkbox should have bg-lvl-3 (checked) + // checkbox should have bg-basic-level-3 (checked) label:has(input[type="checkbox"]:checked) { - background-color: colors.$db-current-color-bg-lvl-3-enabled; + background-color: colors.$db-adaptive-bg-basic-level-3-default; @include helpers.hover { - background-color: colors.$db-current-color-bg-lvl-3-hover; + background-color: colors.$db-adaptive-bg-basic-level-3-hovered; } @include helpers.active { - background-color: colors.$db-current-color-bg-lvl-3-pressed; + background-color: colors.$db-adaptive-bg-basic-level-3-pressed; } } - // radio should have bg-lvl-3 (checked) without hover/pressed + // radio should have bg-basic-level-3 (checked) without hover/pressed label:has(input[type="radio"]:checked) { &, &:is(:hover, :focus, :active) { - background-color: colors.$db-current-color-bg-lvl-3-enabled; + background-color: colors.$db-adaptive-bg-basic-level-3-default; } } } @@ -146,12 +159,12 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a"; /* Revert this for checked radio button (it's not clickable again) */ @include helpers.hover { - background-color: colors.$db-current-color-contrast-high-enabled; + background-color: colors.$db-adaptive-bg-inverted-contrast-high-default; } @include helpers.active { cursor: default; - background-color: colors.$db-current-color-contrast-high-enabled; + background-color: colors.$db-adaptive-bg-inverted-contrast-high-default; } } diff --git a/packages/components/src/styles/dialog-init.scss b/packages/components/src/styles/dialog-init.scss index 0012f42e162..14267200eb6 100644 --- a/packages/components/src/styles/dialog-init.scss +++ b/packages/components/src/styles/dialog-init.scss @@ -1,6 +1,6 @@ @use "@db-ui/foundations/build/scss/colors"; -$backdrop-color: #{colors.$db-current-color-on-bg-enabled}; +$backdrop-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default}; $backdrop-opacity-strong: 0.64; $backdrop-opacity-weak: 0.32; diff --git a/packages/foundations/README.md b/packages/foundations/README.md index 49a62fbeebb..8ed39953297 100644 --- a/packages/foundations/README.md +++ b/packages/foundations/README.md @@ -298,6 +298,14 @@ If you want to optimize the size of the loaded styles, you might skip loading `@ @import "@db-ui/foundations/build/css/init/default-root.css"; ``` +## Migration + +We provide a cli tool to auto migrate your source code. Use this command in your repository: + +```shell +npx @db-ui/foundations migration --src=./src +``` + ## Deutsche Bahn brand As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UI products free to use and release it under the Apache 2.0 license. diff --git a/packages/foundations/package.json b/packages/foundations/package.json index c41e6e89e1f..5a2d088e127 100644 --- a/packages/foundations/package.json +++ b/packages/foundations/package.json @@ -8,7 +8,7 @@ }, "license": "Apache-2.0", "bin": { - "generate-icon-fonts": "build/scripts/generate-icon-fonts/index.js" + "@db-ui/foundations": "build/index.js" }, "main": "build.js", "files": [ @@ -22,6 +22,7 @@ "build:03_css": "sass --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ build/scss/:build/css/ --future-deprecation=import", "build:04_tailwind": "cpr tailwind build/tailwind -o", "build:05_postcss": "postcss build/css/**/*.css --replace", + "build:99_foundations_common": "esbuild scripts/cli.ts --bundle --outfile=build/index.js --platform=node", "clean": "rm -rf build", "copy-build": "npm-run-all copy-build:*", "copy-build:assets": "cpr assets ../../build-outputs/foundations/assets -o", @@ -35,15 +36,20 @@ "prepare": "npm run copy-normalize", "regenerate:screenshots": "npx playwright test -c ./test/playwright.config.mjs --update-snapshots", "start": "nodemon --config nodemon.json", - "test:e2e": "npx playwright test --config=./test/playwright.config.mjs" + "test:e2e": "npx playwright test --config=./test/playwright.config.mjs", + "test:migration": "tsx scripts/cli.ts migration --src=./scss --dryRun=true" }, "devDependencies": { "@csstools/normalize.css": "12.1.1", + "commander": "^12.0.0", "cpr": "3.0.1", "cssnano": "^7.0.4", "dotenv": "^16.4.5", + "glob": "^11.0.0", "nodemon": "3.1.4", - "sass": "1.77.4" + "replace-in-file": "^8.1.0", + "sass": "1.77.4", + "tsx": "^4.16.2" }, "publishConfig": { "registry": "https://registry.npmjs.org/", diff --git a/packages/foundations/scripts/cli.ts b/packages/foundations/scripts/cli.ts new file mode 100644 index 00000000000..9ce69c18f09 --- /dev/null +++ b/packages/foundations/scripts/cli.ts @@ -0,0 +1,23 @@ +#!/usr/bin/env node + +import { type OptionsType } from './types'; +import startProgram from './program'; +import { options } from './data'; +import { migrate } from './migration'; + +const action = async (functionName: string, options: OptionsType) => { + if (functionName === 'migration') { + migrate(options); + } else { + console.error( + `There is no function for this library named ${functionName}` + ); + } +}; + +startProgram( + '@db-ui/foundations - migration', + 'CLI for DB UX Design System foundations', + options, + action +); diff --git a/packages/foundations/scripts/data.ts b/packages/foundations/scripts/data.ts new file mode 100644 index 00000000000..4fa7964349c --- /dev/null +++ b/packages/foundations/scripts/data.ts @@ -0,0 +1,14 @@ +import { type ProgrammOptionsType } from './types'; + +export const options: ProgrammOptionsType[] = [ + { + name: 'src', + description: 'Src folder with all files', + required: true + }, + { + name: 'dryRun', + short: 'dry', + description: 'prints the output of the command' + } +]; diff --git a/packages/foundations/scripts/migration/color-update.ts b/packages/foundations/scripts/migration/color-update.ts new file mode 100644 index 00000000000..6ad5638c0a3 --- /dev/null +++ b/packages/foundations/scripts/migration/color-update.ts @@ -0,0 +1,159 @@ +import { type ReplaceInFileConfig } from 'replace-in-file'; + +export const colorUpdateQ32024: ReplaceInFileConfig[] = [ + // Basic backgrounds + { + files: '', + from: /bg-lvl-1/g, + to: 'bg-basic-level-1' + }, + { + files: '', + from: /bg-lvl-2/g, + to: 'bg-basic-level-2' + }, + { + files: '', + from: /bg-lvl-3/g, + to: 'bg-basic-level-3' + }, + { + files: '', + from: /bg-transparent-full/g, + to: 'bg-basic-transparent-full' + }, + { + files: '', + from: /bg-transparent-semi/g, + to: 'bg-basic-transparent-semi' + }, + { + files: '', + from: /bg-transparent-hover/g, + to: 'bg-basic-transparent-hovered' + }, + { + files: '', + from: /bg-transparent-pressed/g, + to: 'bg-basic-transparent-pressed' + }, + { + files: '', + from: /on-bg-enabled/g, + to: 'on-bg-basic-emphasis-100-default' + }, + { + files: '', + from: /on-bg-hover/g, + to: 'on-bg-basic-emphasis-100-hovered' + }, + { + files: '', + from: /on-bg-pressed/g, + to: 'on-bg-basic-emphasis-100-pressed' + }, + { + files: '', + from: /on-bg-weak-enabled/g, + to: 'on-bg-basic-emphasis-90-default' + }, + { + files: '', + from: /on-bg-weak-hover/g, + to: 'on-bg-basic-emphasis-90-hovered' + }, + { + files: '', + from: /on-bg-weak-pressed/g, + to: 'on-bg-basic-emphasis-90-pressed' + }, + { + files: '', + from: /contrast-low-enabled/g, + to: 'on-bg-basic-emphasis-70-default' + }, + { + files: '', + from: /color-border/g, + // We will replace adaptive-color afterward + to: 'color-on-bg-basic-emphasis-60-default' + }, + + // Contrast -> inverted + { + files: '', + from: /on-contrast-enabled/g, + to: 'on-bg-inverted-default' + }, + { + files: '', + from: /on-contrast-hover/g, + to: 'on-bg-inverted-hovered' + }, + { + files: '', + from: /on-contrast-pressed/g, + to: 'on-bg-inverted-pressed' + }, + { + files: '', + from: /contrast-high-enabled/g, + to: 'bg-inverted-contrast-high-default' + }, + { + files: '', + from: /contrast-high-hover/g, + to: 'bg-inverted-contrast-high-hovered' + }, + { + files: '', + from: /contrast-high-pressed/g, + to: 'bg-inverted-contrast-high-pressed' + }, + { + files: '', + from: /contrast-low-hover/g, + to: 'bg-inverted-contrast-low-hovered' + }, + { + files: '', + from: /contrast-low-pressed/g, + to: 'bg-inverted-contrast-low-pressed' + }, + + // Rest + { + files: '', + from: /-enabled/g, + to: '-default' + }, + { + files: '', + // Fix issues with double hovered + from: /-hovereded/g, + to: '-hovered' + }, + { + files: '', + // Fix all old hover + from: /-hover/g, + to: '-hovered' + }, + { + files: '', + // Fix issues with double hovered again + from: /-hovereded/g, + to: '-hovered' + }, + { + files: '', + from: /current-color/g, + to: 'adaptive' + }, + { + files: '', + // Fix issues with current color mixin + from: /set-adaptives/g, + to: 'set-current-colors' + } +]; diff --git a/packages/foundations/scripts/migration/index.ts b/packages/foundations/scripts/migration/index.ts new file mode 100644 index 00000000000..782b5891e3d --- /dev/null +++ b/packages/foundations/scripts/migration/index.ts @@ -0,0 +1,30 @@ +import { globSync } from 'glob'; +import { replaceInFileSync, type ReplaceResult } from 'replace-in-file'; +import { type OptionsType } from '../types'; +import { colorUpdateQ32024 } from './color-update'; + +export const migrate = (options?: OptionsType) => { + if (options) { + const { src, dryRun } = options; + const dry = Boolean(dryRun); + const paths = `${src}/**`; + + const globPaths: string[] = globSync(paths, { + nodir: true + }).map((path) => path.replaceAll('\\', '/')); + + for (const update of colorUpdateQ32024) { + const option = { + ...update, + files: globPaths, + dry + }; + const result: ReplaceResult[] = replaceInFileSync(option); + if (dry) { + console.log(result); + } + } + } +}; + +export default { migrate }; diff --git a/packages/foundations/scripts/program.ts b/packages/foundations/scripts/program.ts new file mode 100644 index 00000000000..fd801a8a535 --- /dev/null +++ b/packages/foundations/scripts/program.ts @@ -0,0 +1,49 @@ +import { program } from 'commander'; +import { type OptionsType, type ProgrammOptionsType } from './types'; + +const startProgram = ( + name: string, + description: string, + options: ProgrammOptionsType[], + action: (functionName: string, options: OptionsType) => void +) => { + program.name(name).description(description); + + program.argument( + '[function]', + 'function of this library you want to use [migration]' + ); + + for (const option of options) { + const short = + (option.short && + (option.short?.startsWith('-') + ? option.short + : `-${option.short}`)) ?? + `-${option.name.charAt(0)}`; + const long = + option.long ?? + `--${option.name} ${option.array ? '[' : '<'}${option.name}${ + option.array ? 's...]' : '>' + }`; + if (option.required) { + program.requiredOption( + `${short}, ${long}`, + option.description ?? '', + option.defaultValue + ); + } else { + program.option( + `${short}, ${long}`, + option.description ?? '', + option.defaultValue + ); + } + } + + program.action(action); + + program.parse(); +}; + +export default startProgram; diff --git a/packages/foundations/scripts/tsconfig.json b/packages/foundations/scripts/tsconfig.json new file mode 100644 index 00000000000..04688f1bd20 --- /dev/null +++ b/packages/foundations/scripts/tsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es2021", + "module": "nodenext", + "strictNullChecks": true, + "lib": ["ESNext"] + } +} diff --git a/packages/foundations/scripts/types.ts b/packages/foundations/scripts/types.ts new file mode 100644 index 00000000000..efd890995e8 --- /dev/null +++ b/packages/foundations/scripts/types.ts @@ -0,0 +1,14 @@ +export type ProgrammOptionsType = { + name: string; + short?: string; + long?: string; + array?: boolean; + required?: boolean; + description?: string; + defaultValue?: string | boolean | string[]; +}; + +export type OptionsType = { + src: string; + dryRun: string; +}; diff --git a/packages/foundations/scss/animation/_transitions.scss b/packages/foundations/scss/animation/_transitions.scss index e5578ae815e..0360876157e 100644 --- a/packages/foundations/scss/animation/_transitions.scss +++ b/packages/foundations/scss/animation/_transitions.scss @@ -3,6 +3,7 @@ %default-transition { transition: outline #{variables.$db-transition-duration-extra-fast}, + border-color #{variables.$db-transition-straight-emotional}, background-color #{variables.$db-transition-straight-emotional}; } diff --git a/packages/foundations/scss/colors/_default-color-scheme.scss b/packages/foundations/scss/colors/_default-color-scheme.scss index 5b7e48d57a2..1c78e306d71 100644 --- a/packages/foundations/scss/colors/_default-color-scheme.scss +++ b/packages/foundations/scss/colors/_default-color-scheme.scss @@ -1,705 +1,1179 @@ @mixin get-color-scheme { - --db-neutral-bg-lvl-1-enabled: light-dark( + --db-neutral-origin-default: light-dark( + var(--db-neutral-origin-light-default), + var(--db-neutral-origin-dark-default) + ); + --db-neutral-origin-hovered: light-dark( + var(--db-neutral-origin-light-hovered), + var(--db-neutral-origin-dark-hovered) + ); + --db-neutral-origin-pressed: light-dark( + var(--db-neutral-origin-light-pressed), + var(--db-neutral-origin-dark-pressed) + ); + --db-neutral-on-origin-default: light-dark( + var(--db-neutral-on-origin-light-default), + var(--db-neutral-on-origin-dark-default) + ); + --db-neutral-on-origin-hovered: light-dark( + var(--db-neutral-on-origin-light-hovered), + var(--db-neutral-on-origin-dark-hovered) + ); + --db-neutral-on-origin-pressed: light-dark( + var(--db-neutral-on-origin-light-pressed), + var(--db-neutral-on-origin-dark-pressed) + ); + --db-neutral-bg-basic-level-1-default: light-dark( var(--db-neutral-14), var(--db-neutral-3) ); - --db-neutral-bg-lvl-1-hover: light-dark( + --db-neutral-bg-basic-level-1-hovered: light-dark( var(--db-neutral-13), var(--db-neutral-4) ); - --db-neutral-bg-lvl-1-pressed: light-dark( + --db-neutral-bg-basic-level-1-pressed: light-dark( var(--db-neutral-12), var(--db-neutral-5) ); - --db-neutral-bg-lvl-2-enabled: light-dark( + --db-neutral-bg-basic-level-2-default: light-dark( var(--db-neutral-13), var(--db-neutral-2) ); - --db-neutral-bg-lvl-2-hover: light-dark( + --db-neutral-bg-basic-level-2-hovered: light-dark( var(--db-neutral-12), var(--db-neutral-3) ); - --db-neutral-bg-lvl-2-pressed: light-dark( + --db-neutral-bg-basic-level-2-pressed: light-dark( var(--db-neutral-11), var(--db-neutral-4) ); - --db-neutral-bg-lvl-3-enabled: light-dark( + --db-neutral-bg-basic-level-3-default: light-dark( var(--db-neutral-12), var(--db-neutral-1) ); - --db-neutral-bg-lvl-3-hover: light-dark( + --db-neutral-bg-basic-level-3-hovered: light-dark( var(--db-neutral-11), var(--db-neutral-2) ); - --db-neutral-bg-lvl-3-pressed: light-dark( + --db-neutral-bg-basic-level-3-pressed: light-dark( var(--db-neutral-10), var(--db-neutral-3) ); - --db-neutral-bg-transparent-full-enabled: light-dark( + --db-neutral-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-neutral-6)), color-mix(in srgb, transparent 100%, var(--db-neutral-9)) ); - --db-neutral-bg-transparent-semi-enabled: light-dark( + --db-neutral-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-neutral-6)), color-mix(in srgb, transparent 84%, var(--db-neutral-9)) ); - --db-neutral-bg-transparent-hover: light-dark( + --db-neutral-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-neutral-6)), color-mix(in srgb, transparent 76%, var(--db-neutral-9)) ); - --db-neutral-bg-transparent-pressed: light-dark( + --db-neutral-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-neutral-6)), color-mix(in srgb, transparent 68%, var(--db-neutral-9)) ); - --db-neutral-on-bg-enabled: light-dark( + --db-neutral-on-bg-basic-emphasis-100-default: light-dark( var(--db-neutral-3), var(--db-neutral-12) ); - --db-neutral-on-bg-hover: light-dark( + --db-neutral-on-bg-basic-emphasis-100-hovered: light-dark( var(--db-neutral-4), var(--db-neutral-11) ); - --db-neutral-on-bg-pressed: light-dark( + --db-neutral-on-bg-basic-emphasis-100-pressed: light-dark( var(--db-neutral-5), var(--db-neutral-10) ); - --db-neutral-on-bg-weak-enabled: light-dark( + --db-neutral-on-bg-basic-emphasis-90-default: light-dark( var(--db-neutral-5), var(--db-neutral-10) ); - --db-neutral-on-bg-weak-hover: light-dark( + --db-neutral-on-bg-basic-emphasis-90-hovered: light-dark( var(--db-neutral-6), var(--db-neutral-9) ); - --db-neutral-on-bg-weak-pressed: light-dark( + --db-neutral-on-bg-basic-emphasis-90-pressed: light-dark( var(--db-neutral-7), var(--db-neutral-8) ); - --db-neutral-on-contrast-enabled: light-dark( - var(--db-neutral-14), - var(--db-neutral-3) + --db-neutral-on-bg-basic-emphasis-80-default: light-dark( + var(--db-neutral-6), + var(--db-neutral-9) ); - --db-neutral-on-contrast-hover: light-dark( - var(--db-neutral-13), + --db-neutral-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-neutral-5), + var(--db-neutral-8) + ); + --db-neutral-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-neutral-4), + var(--db-neutral-7) + ); + --db-neutral-on-bg-basic-emphasis-70-default: light-dark( + var(--db-neutral-7), + var(--db-neutral-8) + ); + --db-neutral-on-bg-basic-emphasis-70-hovered: light-dark( + var(--db-neutral-6), + var(--db-neutral-7) + ); + --db-neutral-on-bg-basic-emphasis-70-pressed: light-dark( + var(--db-neutral-5), + var(--db-neutral-6) + ); + --db-neutral-on-bg-basic-emphasis-60-default: light-dark( + var(--db-neutral-10), + var(--db-neutral-6) + ); + --db-neutral-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-neutral-9), + var(--db-neutral-5) + ); + --db-neutral-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-neutral-8), var(--db-neutral-4) ); - --db-neutral-on-contrast-pressed: light-dark( - var(--db-neutral-12), + --db-neutral-on-bg-basic-emphasis-50-default: light-dark( + var(--db-neutral-9), var(--db-neutral-5) ); - --db-neutral-contrast-high-enabled: light-dark( + --db-neutral-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-neutral-8), + var(--db-neutral-4) + ); + --db-neutral-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-neutral-7), + var(--db-neutral-3) + ); + --db-neutral-bg-inverted-contrast-max-default: light-dark( + var(--db-neutral-3), + var(--db-neutral-12) + ); + --db-neutral-bg-inverted-contrast-max-hovered: light-dark( + var(--db-neutral-4), + var(--db-neutral-11) + ); + --db-neutral-bg-inverted-contrast-max-pressed: light-dark( + var(--db-neutral-5), + var(--db-neutral-10) + ); + --db-neutral-bg-inverted-contrast-high-default: light-dark( var(--db-neutral-6), var(--db-neutral-9) ); - --db-neutral-contrast-high-hover: light-dark( + --db-neutral-bg-inverted-contrast-high-hovered: light-dark( var(--db-neutral-5), var(--db-neutral-8) ); - --db-neutral-contrast-high-pressed: light-dark( + --db-neutral-bg-inverted-contrast-high-pressed: light-dark( var(--db-neutral-4), var(--db-neutral-7) ); - --db-neutral-contrast-low-enabled: light-dark( + --db-neutral-bg-inverted-contrast-low-default: light-dark( var(--db-neutral-7), var(--db-neutral-8) ); - --db-neutral-contrast-low-hover: light-dark( + --db-neutral-bg-inverted-contrast-low-hovered: light-dark( var(--db-neutral-6), var(--db-neutral-7) ); - --db-neutral-contrast-low-pressed: light-dark( + --db-neutral-bg-inverted-contrast-low-pressed: light-dark( var(--db-neutral-5), var(--db-neutral-6) ); - --db-neutral-border: light-dark(var(--db-neutral-10), var(--db-neutral-6)); - --db-brand-on-enabled: light-dark( - var(--db-brand-on-light), - var(--db-brand-on-dark) + --db-neutral-on-bg-inverted-default: light-dark( + var(--db-neutral-14), + var(--db-neutral-3) ); - --db-brand-on-hover: light-dark( - var(--db-brand-on-hover-light), - var(--db-brand-on-hover-dark) + --db-neutral-on-bg-inverted-hovered: light-dark( + var(--db-neutral-13), + var(--db-neutral-4) ); - --db-brand-on-pressed: light-dark( - var(--db-brand-on-pressed-light), - var(--db-brand-on-pressed-dark) + --db-neutral-on-bg-inverted-pressed: light-dark( + var(--db-neutral-12), + var(--db-neutral-5) ); - --db-brand-origin-enabled: light-dark( - var(--db-brand-origin-light), - var(--db-brand-origin-dark) + --db-brand-origin-default: light-dark( + var(--db-brand-origin-light-default), + var(--db-brand-origin-dark-default) ); - --db-brand-origin-hover: light-dark( - var(--db-brand-hover-light), - var(--db-brand-hover-dark) + --db-brand-origin-hovered: light-dark( + var(--db-brand-origin-light-hovered), + var(--db-brand-origin-dark-hovered) ); --db-brand-origin-pressed: light-dark( - var(--db-brand-pressed-light), - var(--db-brand-pressed-dark) + var(--db-brand-origin-light-pressed), + var(--db-brand-origin-dark-pressed) ); - --db-brand-bg-lvl-1-enabled: light-dark( + --db-brand-on-origin-default: light-dark( + var(--db-brand-on-origin-light-default), + var(--db-brand-on-origin-dark-default) + ); + --db-brand-on-origin-hovered: light-dark( + var(--db-brand-on-origin-light-hovered), + var(--db-brand-on-origin-dark-hovered) + ); + --db-brand-on-origin-pressed: light-dark( + var(--db-brand-on-origin-light-pressed), + var(--db-brand-on-origin-dark-pressed) + ); + --db-brand-bg-basic-level-1-default: light-dark( var(--db-brand-14), var(--db-brand-3) ); - --db-brand-bg-lvl-1-hover: light-dark( + --db-brand-bg-basic-level-1-hovered: light-dark( var(--db-brand-13), var(--db-brand-4) ); - --db-brand-bg-lvl-1-pressed: light-dark( + --db-brand-bg-basic-level-1-pressed: light-dark( var(--db-brand-12), var(--db-brand-5) ); - --db-brand-bg-lvl-2-enabled: light-dark( + --db-brand-bg-basic-level-2-default: light-dark( var(--db-brand-13), var(--db-brand-2) ); - --db-brand-bg-lvl-2-hover: light-dark( + --db-brand-bg-basic-level-2-hovered: light-dark( var(--db-brand-12), var(--db-brand-3) ); - --db-brand-bg-lvl-2-pressed: light-dark( + --db-brand-bg-basic-level-2-pressed: light-dark( var(--db-brand-11), var(--db-brand-4) ); - --db-brand-bg-lvl-3-enabled: light-dark( + --db-brand-bg-basic-level-3-default: light-dark( var(--db-brand-12), var(--db-brand-1) ); - --db-brand-bg-lvl-3-hover: light-dark( + --db-brand-bg-basic-level-3-hovered: light-dark( var(--db-brand-11), var(--db-brand-2) ); - --db-brand-bg-lvl-3-pressed: light-dark( + --db-brand-bg-basic-level-3-pressed: light-dark( var(--db-brand-10), var(--db-brand-3) ); - --db-brand-bg-transparent-full-enabled: light-dark( + --db-brand-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-brand-6)), color-mix(in srgb, transparent 100%, var(--db-brand-9)) ); - --db-brand-bg-transparent-semi-enabled: light-dark( + --db-brand-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-brand-6)), color-mix(in srgb, transparent 84%, var(--db-brand-9)) ); - --db-brand-bg-transparent-hover: light-dark( + --db-brand-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-brand-6)), color-mix(in srgb, transparent 76%, var(--db-brand-9)) ); - --db-brand-bg-transparent-pressed: light-dark( + --db-brand-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-brand-6)), color-mix(in srgb, transparent 68%, var(--db-brand-9)) ); - --db-brand-on-bg-enabled: light-dark(var(--db-brand-3), var(--db-brand-12)); - --db-brand-on-bg-hover: light-dark(var(--db-brand-4), var(--db-brand-11)); - --db-brand-on-bg-pressed: light-dark(var(--db-brand-5), var(--db-brand-10)); - --db-brand-on-bg-weak-enabled: light-dark( + --db-brand-on-bg-basic-emphasis-100-default: light-dark( + var(--db-brand-3), + var(--db-brand-12) + ); + --db-brand-on-bg-basic-emphasis-100-hovered: light-dark( + var(--db-brand-4), + var(--db-brand-11) + ); + --db-brand-on-bg-basic-emphasis-100-pressed: light-dark( + var(--db-brand-5), + var(--db-brand-10) + ); + --db-brand-on-bg-basic-emphasis-90-default: light-dark( var(--db-brand-5), var(--db-brand-10) ); - --db-brand-on-bg-weak-hover: light-dark( + --db-brand-on-bg-basic-emphasis-90-hovered: light-dark( var(--db-brand-6), var(--db-brand-9) ); - --db-brand-on-bg-weak-pressed: light-dark( + --db-brand-on-bg-basic-emphasis-90-pressed: light-dark( var(--db-brand-7), var(--db-brand-8) ); - --db-brand-on-contrast-enabled: light-dark( - var(--db-brand-14), - var(--db-brand-3) + --db-brand-on-bg-basic-emphasis-80-default: light-dark( + var(--db-brand-6), + var(--db-brand-9) ); - --db-brand-on-contrast-hover: light-dark( - var(--db-brand-13), + --db-brand-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-brand-5), + var(--db-brand-8) + ); + --db-brand-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-brand-4), + var(--db-brand-7) + ); + --db-brand-on-bg-basic-emphasis-70-default: light-dark( + var(--db-brand-7), + var(--db-brand-8) + ); + --db-brand-on-bg-basic-emphasis-70-hovered: light-dark( + var(--db-brand-6), + var(--db-brand-7) + ); + --db-brand-on-bg-basic-emphasis-70-pressed: light-dark( + var(--db-brand-5), + var(--db-brand-6) + ); + --db-brand-on-bg-basic-emphasis-60-default: light-dark( + var(--db-brand-10), + var(--db-brand-6) + ); + --db-brand-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-brand-9), + var(--db-brand-5) + ); + --db-brand-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-brand-8), var(--db-brand-4) ); - --db-brand-on-contrast-pressed: light-dark( - var(--db-brand-12), + --db-brand-on-bg-basic-emphasis-50-default: light-dark( + var(--db-brand-9), var(--db-brand-5) ); - --db-brand-contrast-high-enabled: light-dark( + --db-brand-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-brand-8), + var(--db-brand-4) + ); + --db-brand-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-brand-7), + var(--db-brand-3) + ); + --db-brand-bg-inverted-contrast-max-default: light-dark( + var(--db-brand-3), + var(--db-brand-12) + ); + --db-brand-bg-inverted-contrast-max-hovered: light-dark( + var(--db-brand-4), + var(--db-brand-11) + ); + --db-brand-bg-inverted-contrast-max-pressed: light-dark( + var(--db-brand-5), + var(--db-brand-10) + ); + --db-brand-bg-inverted-contrast-high-default: light-dark( var(--db-brand-6), var(--db-brand-9) ); - --db-brand-contrast-high-hover: light-dark( + --db-brand-bg-inverted-contrast-high-hovered: light-dark( var(--db-brand-5), var(--db-brand-8) ); - --db-brand-contrast-high-pressed: light-dark( + --db-brand-bg-inverted-contrast-high-pressed: light-dark( var(--db-brand-4), var(--db-brand-7) ); - --db-brand-contrast-low-enabled: light-dark( + --db-brand-bg-inverted-contrast-low-default: light-dark( var(--db-brand-7), var(--db-brand-8) ); - --db-brand-contrast-low-hover: light-dark( + --db-brand-bg-inverted-contrast-low-hovered: light-dark( var(--db-brand-6), var(--db-brand-7) ); - --db-brand-contrast-low-pressed: light-dark( + --db-brand-bg-inverted-contrast-low-pressed: light-dark( var(--db-brand-5), var(--db-brand-6) ); - --db-brand-border: light-dark(var(--db-brand-10), var(--db-brand-6)); - --db-informational-bg-lvl-1-enabled: light-dark( + --db-brand-on-bg-inverted-default: light-dark( + var(--db-brand-14), + var(--db-brand-3) + ); + --db-brand-on-bg-inverted-hovered: light-dark( + var(--db-brand-13), + var(--db-brand-4) + ); + --db-brand-on-bg-inverted-pressed: light-dark( + var(--db-brand-12), + var(--db-brand-5) + ); + --db-informational-origin-default: light-dark( + var(--db-informational-origin-light-default), + var(--db-informational-origin-dark-default) + ); + --db-informational-origin-hovered: light-dark( + var(--db-informational-origin-light-hovered), + var(--db-informational-origin-dark-hovered) + ); + --db-informational-origin-pressed: light-dark( + var(--db-informational-origin-light-pressed), + var(--db-informational-origin-dark-pressed) + ); + --db-informational-on-origin-default: light-dark( + var(--db-informational-on-origin-light-default), + var(--db-informational-on-origin-dark-default) + ); + --db-informational-on-origin-hovered: light-dark( + var(--db-informational-on-origin-light-hovered), + var(--db-informational-on-origin-dark-hovered) + ); + --db-informational-on-origin-pressed: light-dark( + var(--db-informational-on-origin-light-pressed), + var(--db-informational-on-origin-dark-pressed) + ); + --db-informational-bg-basic-level-1-default: light-dark( var(--db-informational-14), var(--db-informational-3) ); - --db-informational-bg-lvl-1-hover: light-dark( + --db-informational-bg-basic-level-1-hovered: light-dark( var(--db-informational-13), var(--db-informational-4) ); - --db-informational-bg-lvl-1-pressed: light-dark( + --db-informational-bg-basic-level-1-pressed: light-dark( var(--db-informational-12), var(--db-informational-5) ); - --db-informational-bg-lvl-2-enabled: light-dark( + --db-informational-bg-basic-level-2-default: light-dark( var(--db-informational-13), var(--db-informational-2) ); - --db-informational-bg-lvl-2-hover: light-dark( + --db-informational-bg-basic-level-2-hovered: light-dark( var(--db-informational-12), var(--db-informational-3) ); - --db-informational-bg-lvl-2-pressed: light-dark( + --db-informational-bg-basic-level-2-pressed: light-dark( var(--db-informational-11), var(--db-informational-4) ); - --db-informational-bg-lvl-3-enabled: light-dark( + --db-informational-bg-basic-level-3-default: light-dark( var(--db-informational-12), var(--db-informational-1) ); - --db-informational-bg-lvl-3-hover: light-dark( + --db-informational-bg-basic-level-3-hovered: light-dark( var(--db-informational-11), var(--db-informational-2) ); - --db-informational-bg-lvl-3-pressed: light-dark( + --db-informational-bg-basic-level-3-pressed: light-dark( var(--db-informational-10), var(--db-informational-3) ); - --db-informational-bg-transparent-full-enabled: light-dark( + --db-informational-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-informational-6)), color-mix(in srgb, transparent 100%, var(--db-informational-9)) ); - --db-informational-bg-transparent-semi-enabled: light-dark( + --db-informational-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-informational-6)), color-mix(in srgb, transparent 84%, var(--db-informational-9)) ); - --db-informational-bg-transparent-hover: light-dark( + --db-informational-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-informational-6)), color-mix(in srgb, transparent 76%, var(--db-informational-9)) ); - --db-informational-bg-transparent-pressed: light-dark( + --db-informational-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-informational-6)), color-mix(in srgb, transparent 68%, var(--db-informational-9)) ); - --db-informational-on-bg-enabled: light-dark( + --db-informational-on-bg-basic-emphasis-100-default: light-dark( var(--db-informational-3), var(--db-informational-12) ); - --db-informational-on-bg-hover: light-dark( + --db-informational-on-bg-basic-emphasis-100-hovered: light-dark( var(--db-informational-4), var(--db-informational-11) ); - --db-informational-on-bg-pressed: light-dark( + --db-informational-on-bg-basic-emphasis-100-pressed: light-dark( var(--db-informational-5), var(--db-informational-10) ); - --db-informational-on-bg-weak-enabled: light-dark( + --db-informational-on-bg-basic-emphasis-90-default: light-dark( var(--db-informational-5), var(--db-informational-10) ); - --db-informational-on-bg-weak-hover: light-dark( + --db-informational-on-bg-basic-emphasis-90-hovered: light-dark( var(--db-informational-6), var(--db-informational-9) ); - --db-informational-on-bg-weak-pressed: light-dark( + --db-informational-on-bg-basic-emphasis-90-pressed: light-dark( var(--db-informational-7), var(--db-informational-8) ); - --db-informational-on-contrast-enabled: light-dark( - var(--db-informational-14), - var(--db-informational-3) + --db-informational-on-bg-basic-emphasis-80-default: light-dark( + var(--db-informational-6), + var(--db-informational-9) ); - --db-informational-on-contrast-hover: light-dark( - var(--db-informational-13), + --db-informational-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-informational-5), + var(--db-informational-8) + ); + --db-informational-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-informational-4), + var(--db-informational-7) + ); + --db-informational-on-bg-basic-emphasis-70-default: light-dark( + var(--db-informational-7), + var(--db-informational-8) + ); + --db-informational-on-bg-basic-emphasis-70-hovered: light-dark( + var(--db-informational-6), + var(--db-informational-7) + ); + --db-informational-on-bg-basic-emphasis-70-pressed: light-dark( + var(--db-informational-5), + var(--db-informational-6) + ); + --db-informational-on-bg-basic-emphasis-60-default: light-dark( + var(--db-informational-10), + var(--db-informational-6) + ); + --db-informational-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-informational-9), + var(--db-informational-5) + ); + --db-informational-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-informational-8), var(--db-informational-4) ); - --db-informational-on-contrast-pressed: light-dark( - var(--db-informational-12), + --db-informational-on-bg-basic-emphasis-50-default: light-dark( + var(--db-informational-9), var(--db-informational-5) ); - --db-informational-contrast-high-enabled: light-dark( + --db-informational-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-informational-8), + var(--db-informational-4) + ); + --db-informational-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-informational-7), + var(--db-informational-3) + ); + --db-informational-bg-inverted-contrast-max-default: light-dark( + var(--db-informational-3), + var(--db-informational-12) + ); + --db-informational-bg-inverted-contrast-max-hovered: light-dark( + var(--db-informational-4), + var(--db-informational-11) + ); + --db-informational-bg-inverted-contrast-max-pressed: light-dark( + var(--db-informational-5), + var(--db-informational-10) + ); + --db-informational-bg-inverted-contrast-high-default: light-dark( var(--db-informational-6), var(--db-informational-9) ); - --db-informational-contrast-high-hover: light-dark( + --db-informational-bg-inverted-contrast-high-hovered: light-dark( var(--db-informational-5), var(--db-informational-8) ); - --db-informational-contrast-high-pressed: light-dark( + --db-informational-bg-inverted-contrast-high-pressed: light-dark( var(--db-informational-4), var(--db-informational-7) ); - --db-informational-contrast-low-enabled: light-dark( + --db-informational-bg-inverted-contrast-low-default: light-dark( var(--db-informational-7), var(--db-informational-8) ); - --db-informational-contrast-low-hover: light-dark( + --db-informational-bg-inverted-contrast-low-hovered: light-dark( var(--db-informational-6), var(--db-informational-7) ); - --db-informational-contrast-low-pressed: light-dark( + --db-informational-bg-inverted-contrast-low-pressed: light-dark( var(--db-informational-5), var(--db-informational-6) ); - --db-informational-border: light-dark( - var(--db-informational-10), - var(--db-informational-6) + --db-informational-on-bg-inverted-default: light-dark( + var(--db-informational-14), + var(--db-informational-3) + ); + --db-informational-on-bg-inverted-hovered: light-dark( + var(--db-informational-13), + var(--db-informational-4) ); - --db-warning-bg-lvl-1-enabled: light-dark( + --db-informational-on-bg-inverted-pressed: light-dark( + var(--db-informational-12), + var(--db-informational-5) + ); + --db-warning-origin-default: light-dark( + var(--db-warning-origin-light-default), + var(--db-warning-origin-dark-default) + ); + --db-warning-origin-hovered: light-dark( + var(--db-warning-origin-light-hovered), + var(--db-warning-origin-dark-hovered) + ); + --db-warning-origin-pressed: light-dark( + var(--db-warning-origin-light-pressed), + var(--db-warning-origin-dark-pressed) + ); + --db-warning-on-origin-default: light-dark( + var(--db-warning-on-origin-light-default), + var(--db-warning-on-origin-dark-default) + ); + --db-warning-on-origin-hovered: light-dark( + var(--db-warning-on-origin-light-hovered), + var(--db-warning-on-origin-dark-hovered) + ); + --db-warning-on-origin-pressed: light-dark( + var(--db-warning-on-origin-light-pressed), + var(--db-warning-on-origin-dark-pressed) + ); + --db-warning-bg-basic-level-1-default: light-dark( var(--db-warning-14), var(--db-warning-3) ); - --db-warning-bg-lvl-1-hover: light-dark( + --db-warning-bg-basic-level-1-hovered: light-dark( var(--db-warning-13), var(--db-warning-4) ); - --db-warning-bg-lvl-1-pressed: light-dark( + --db-warning-bg-basic-level-1-pressed: light-dark( var(--db-warning-12), var(--db-warning-5) ); - --db-warning-bg-lvl-2-enabled: light-dark( + --db-warning-bg-basic-level-2-default: light-dark( var(--db-warning-13), var(--db-warning-2) ); - --db-warning-bg-lvl-2-hover: light-dark( + --db-warning-bg-basic-level-2-hovered: light-dark( var(--db-warning-12), var(--db-warning-3) ); - --db-warning-bg-lvl-2-pressed: light-dark( + --db-warning-bg-basic-level-2-pressed: light-dark( var(--db-warning-11), var(--db-warning-4) ); - --db-warning-bg-lvl-3-enabled: light-dark( + --db-warning-bg-basic-level-3-default: light-dark( var(--db-warning-12), var(--db-warning-1) ); - --db-warning-bg-lvl-3-hover: light-dark( + --db-warning-bg-basic-level-3-hovered: light-dark( var(--db-warning-11), var(--db-warning-2) ); - --db-warning-bg-lvl-3-pressed: light-dark( + --db-warning-bg-basic-level-3-pressed: light-dark( var(--db-warning-10), var(--db-warning-3) ); - --db-warning-bg-transparent-full-enabled: light-dark( + --db-warning-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-warning-6)), color-mix(in srgb, transparent 100%, var(--db-warning-9)) ); - --db-warning-bg-transparent-semi-enabled: light-dark( + --db-warning-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-warning-6)), color-mix(in srgb, transparent 84%, var(--db-warning-9)) ); - --db-warning-bg-transparent-hover: light-dark( + --db-warning-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-warning-6)), color-mix(in srgb, transparent 76%, var(--db-warning-9)) ); - --db-warning-bg-transparent-pressed: light-dark( + --db-warning-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-warning-6)), color-mix(in srgb, transparent 68%, var(--db-warning-9)) ); - --db-warning-on-bg-enabled: light-dark( + --db-warning-on-bg-basic-emphasis-100-default: light-dark( var(--db-warning-3), var(--db-warning-12) ); - --db-warning-on-bg-hover: light-dark( + --db-warning-on-bg-basic-emphasis-100-hovered: light-dark( var(--db-warning-4), var(--db-warning-11) ); - --db-warning-on-bg-pressed: light-dark( + --db-warning-on-bg-basic-emphasis-100-pressed: light-dark( var(--db-warning-5), var(--db-warning-10) ); - --db-warning-on-bg-weak-enabled: light-dark( + --db-warning-on-bg-basic-emphasis-90-default: light-dark( var(--db-warning-5), var(--db-warning-10) ); - --db-warning-on-bg-weak-hover: light-dark( + --db-warning-on-bg-basic-emphasis-90-hovered: light-dark( var(--db-warning-6), var(--db-warning-9) ); - --db-warning-on-bg-weak-pressed: light-dark( + --db-warning-on-bg-basic-emphasis-90-pressed: light-dark( var(--db-warning-7), var(--db-warning-8) ); - --db-warning-on-contrast-enabled: light-dark( - var(--db-warning-14), - var(--db-warning-3) + --db-warning-on-bg-basic-emphasis-80-default: light-dark( + var(--db-warning-6), + var(--db-warning-9) ); - --db-warning-on-contrast-hover: light-dark( - var(--db-warning-13), + --db-warning-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-warning-5), + var(--db-warning-8) + ); + --db-warning-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-warning-4), + var(--db-warning-7) + ); + --db-warning-on-bg-basic-emphasis-70-default: light-dark( + var(--db-warning-7), + var(--db-warning-8) + ); + --db-warning-on-bg-basic-emphasis-70-hovered: light-dark( + var(--db-warning-6), + var(--db-warning-7) + ); + --db-warning-on-bg-basic-emphasis-70-pressed: light-dark( + var(--db-warning-5), + var(--db-warning-6) + ); + --db-warning-on-bg-basic-emphasis-60-default: light-dark( + var(--db-warning-10), + var(--db-warning-6) + ); + --db-warning-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-warning-9), + var(--db-warning-5) + ); + --db-warning-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-warning-8), var(--db-warning-4) ); - --db-warning-on-contrast-pressed: light-dark( - var(--db-warning-12), + --db-warning-on-bg-basic-emphasis-50-default: light-dark( + var(--db-warning-9), var(--db-warning-5) ); - --db-warning-contrast-high-enabled: light-dark( + --db-warning-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-warning-8), + var(--db-warning-4) + ); + --db-warning-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-warning-7), + var(--db-warning-3) + ); + --db-warning-bg-inverted-contrast-max-default: light-dark( + var(--db-warning-3), + var(--db-warning-12) + ); + --db-warning-bg-inverted-contrast-max-hovered: light-dark( + var(--db-warning-4), + var(--db-warning-11) + ); + --db-warning-bg-inverted-contrast-max-pressed: light-dark( + var(--db-warning-5), + var(--db-warning-10) + ); + --db-warning-bg-inverted-contrast-high-default: light-dark( var(--db-warning-6), var(--db-warning-9) ); - --db-warning-contrast-high-hover: light-dark( + --db-warning-bg-inverted-contrast-high-hovered: light-dark( var(--db-warning-5), var(--db-warning-8) ); - --db-warning-contrast-high-pressed: light-dark( + --db-warning-bg-inverted-contrast-high-pressed: light-dark( var(--db-warning-4), var(--db-warning-7) ); - --db-warning-contrast-low-enabled: light-dark( + --db-warning-bg-inverted-contrast-low-default: light-dark( var(--db-warning-7), var(--db-warning-8) ); - --db-warning-contrast-low-hover: light-dark( + --db-warning-bg-inverted-contrast-low-hovered: light-dark( var(--db-warning-6), var(--db-warning-7) ); - --db-warning-contrast-low-pressed: light-dark( + --db-warning-bg-inverted-contrast-low-pressed: light-dark( var(--db-warning-5), var(--db-warning-6) ); - --db-warning-border: light-dark(var(--db-warning-10), var(--db-warning-6)); - --db-successful-bg-lvl-1-enabled: light-dark( + --db-warning-on-bg-inverted-default: light-dark( + var(--db-warning-14), + var(--db-warning-3) + ); + --db-warning-on-bg-inverted-hovered: light-dark( + var(--db-warning-13), + var(--db-warning-4) + ); + --db-warning-on-bg-inverted-pressed: light-dark( + var(--db-warning-12), + var(--db-warning-5) + ); + --db-successful-origin-default: light-dark( + var(--db-successful-origin-light-default), + var(--db-successful-origin-dark-default) + ); + --db-successful-origin-hovered: light-dark( + var(--db-successful-origin-light-hovered), + var(--db-successful-origin-dark-hovered) + ); + --db-successful-origin-pressed: light-dark( + var(--db-successful-origin-light-pressed), + var(--db-successful-origin-dark-pressed) + ); + --db-successful-on-origin-default: light-dark( + var(--db-successful-on-origin-light-default), + var(--db-successful-on-origin-dark-default) + ); + --db-successful-on-origin-hovered: light-dark( + var(--db-successful-on-origin-light-hovered), + var(--db-successful-on-origin-dark-hovered) + ); + --db-successful-on-origin-pressed: light-dark( + var(--db-successful-on-origin-light-pressed), + var(--db-successful-on-origin-dark-pressed) + ); + --db-successful-bg-basic-level-1-default: light-dark( var(--db-successful-14), var(--db-successful-3) ); - --db-successful-bg-lvl-1-hover: light-dark( + --db-successful-bg-basic-level-1-hovered: light-dark( var(--db-successful-13), var(--db-successful-4) ); - --db-successful-bg-lvl-1-pressed: light-dark( + --db-successful-bg-basic-level-1-pressed: light-dark( var(--db-successful-12), var(--db-successful-5) ); - --db-successful-bg-lvl-2-enabled: light-dark( + --db-successful-bg-basic-level-2-default: light-dark( var(--db-successful-13), var(--db-successful-2) ); - --db-successful-bg-lvl-2-hover: light-dark( + --db-successful-bg-basic-level-2-hovered: light-dark( var(--db-successful-12), var(--db-successful-3) ); - --db-successful-bg-lvl-2-pressed: light-dark( + --db-successful-bg-basic-level-2-pressed: light-dark( var(--db-successful-11), var(--db-successful-4) ); - --db-successful-bg-lvl-3-enabled: light-dark( + --db-successful-bg-basic-level-3-default: light-dark( var(--db-successful-12), var(--db-successful-1) ); - --db-successful-bg-lvl-3-hover: light-dark( + --db-successful-bg-basic-level-3-hovered: light-dark( var(--db-successful-11), var(--db-successful-2) ); - --db-successful-bg-lvl-3-pressed: light-dark( + --db-successful-bg-basic-level-3-pressed: light-dark( var(--db-successful-10), var(--db-successful-3) ); - --db-successful-bg-transparent-full-enabled: light-dark( + --db-successful-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-successful-6)), color-mix(in srgb, transparent 100%, var(--db-successful-9)) ); - --db-successful-bg-transparent-semi-enabled: light-dark( + --db-successful-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-successful-6)), color-mix(in srgb, transparent 84%, var(--db-successful-9)) ); - --db-successful-bg-transparent-hover: light-dark( + --db-successful-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-successful-6)), color-mix(in srgb, transparent 76%, var(--db-successful-9)) ); - --db-successful-bg-transparent-pressed: light-dark( + --db-successful-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-successful-6)), color-mix(in srgb, transparent 68%, var(--db-successful-9)) ); - --db-successful-on-bg-enabled: light-dark( + --db-successful-on-bg-basic-emphasis-100-default: light-dark( var(--db-successful-3), var(--db-successful-12) ); - --db-successful-on-bg-hover: light-dark( + --db-successful-on-bg-basic-emphasis-100-hovered: light-dark( var(--db-successful-4), var(--db-successful-11) ); - --db-successful-on-bg-pressed: light-dark( + --db-successful-on-bg-basic-emphasis-100-pressed: light-dark( var(--db-successful-5), var(--db-successful-10) ); - --db-successful-on-bg-weak-enabled: light-dark( + --db-successful-on-bg-basic-emphasis-90-default: light-dark( var(--db-successful-5), var(--db-successful-10) ); - --db-successful-on-bg-weak-hover: light-dark( + --db-successful-on-bg-basic-emphasis-90-hovered: light-dark( var(--db-successful-6), var(--db-successful-9) ); - --db-successful-on-bg-weak-pressed: light-dark( + --db-successful-on-bg-basic-emphasis-90-pressed: light-dark( var(--db-successful-7), var(--db-successful-8) ); - --db-successful-on-contrast-enabled: light-dark( - var(--db-successful-14), - var(--db-successful-3) - ); - --db-successful-on-contrast-hover: light-dark( - var(--db-successful-13), - var(--db-successful-4) - ); - --db-successful-on-contrast-pressed: light-dark( - var(--db-successful-12), - var(--db-successful-5) - ); - --db-successful-contrast-high-enabled: light-dark( + --db-successful-on-bg-basic-emphasis-80-default: light-dark( var(--db-successful-6), var(--db-successful-9) ); - --db-successful-contrast-high-hover: light-dark( + --db-successful-on-bg-basic-emphasis-80-hovered: light-dark( var(--db-successful-5), var(--db-successful-8) ); - --db-successful-contrast-high-pressed: light-dark( + --db-successful-on-bg-basic-emphasis-80-pressed: light-dark( var(--db-successful-4), var(--db-successful-7) ); - --db-successful-contrast-low-enabled: light-dark( + --db-successful-on-bg-basic-emphasis-70-default: light-dark( var(--db-successful-7), var(--db-successful-8) ); - --db-successful-contrast-low-hover: light-dark( + --db-successful-on-bg-basic-emphasis-70-hovered: light-dark( var(--db-successful-6), var(--db-successful-7) ); - --db-successful-contrast-low-pressed: light-dark( + --db-successful-on-bg-basic-emphasis-70-pressed: light-dark( var(--db-successful-5), var(--db-successful-6) ); - --db-successful-border: light-dark( + --db-successful-on-bg-basic-emphasis-60-default: light-dark( var(--db-successful-10), var(--db-successful-6) ); - --db-critical-bg-lvl-1-enabled: light-dark( - var(--db-critical-14), - var(--db-critical-3) - ); - --db-critical-bg-lvl-1-hover: light-dark( - var(--db-critical-13), - var(--db-critical-4) + --db-successful-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-successful-9), + var(--db-successful-5) ); - --db-critical-bg-lvl-1-pressed: light-dark( - var(--db-critical-12), - var(--db-critical-5) + --db-successful-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-successful-8), + var(--db-successful-4) ); - --db-critical-bg-lvl-2-enabled: light-dark( - var(--db-critical-13), - var(--db-critical-2) + --db-successful-on-bg-basic-emphasis-50-default: light-dark( + var(--db-successful-9), + var(--db-successful-5) ); - --db-critical-bg-lvl-2-hover: light-dark( - var(--db-critical-12), - var(--db-critical-3) + --db-successful-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-successful-8), + var(--db-successful-4) ); - --db-critical-bg-lvl-2-pressed: light-dark( - var(--db-critical-11), - var(--db-critical-4) + --db-successful-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-successful-7), + var(--db-successful-3) ); - --db-critical-bg-lvl-3-enabled: light-dark( - var(--db-critical-12), - var(--db-critical-1) + --db-successful-bg-inverted-contrast-max-default: light-dark( + var(--db-successful-3), + var(--db-successful-12) ); - --db-critical-bg-lvl-3-hover: light-dark( + --db-successful-bg-inverted-contrast-max-hovered: light-dark( + var(--db-successful-4), + var(--db-successful-11) + ); + --db-successful-bg-inverted-contrast-max-pressed: light-dark( + var(--db-successful-5), + var(--db-successful-10) + ); + --db-successful-bg-inverted-contrast-high-default: light-dark( + var(--db-successful-6), + var(--db-successful-9) + ); + --db-successful-bg-inverted-contrast-high-hovered: light-dark( + var(--db-successful-5), + var(--db-successful-8) + ); + --db-successful-bg-inverted-contrast-high-pressed: light-dark( + var(--db-successful-4), + var(--db-successful-7) + ); + --db-successful-bg-inverted-contrast-low-default: light-dark( + var(--db-successful-7), + var(--db-successful-8) + ); + --db-successful-bg-inverted-contrast-low-hovered: light-dark( + var(--db-successful-6), + var(--db-successful-7) + ); + --db-successful-bg-inverted-contrast-low-pressed: light-dark( + var(--db-successful-5), + var(--db-successful-6) + ); + --db-successful-on-bg-inverted-default: light-dark( + var(--db-successful-14), + var(--db-successful-3) + ); + --db-successful-on-bg-inverted-hovered: light-dark( + var(--db-successful-13), + var(--db-successful-4) + ); + --db-successful-on-bg-inverted-pressed: light-dark( + var(--db-successful-12), + var(--db-successful-5) + ); + --db-critical-origin-default: light-dark( + var(--db-critical-origin-light-default), + var(--db-critical-origin-dark-default) + ); + --db-critical-origin-hovered: light-dark( + var(--db-critical-origin-light-hovered), + var(--db-critical-origin-dark-hovered) + ); + --db-critical-origin-pressed: light-dark( + var(--db-critical-origin-light-pressed), + var(--db-critical-origin-dark-pressed) + ); + --db-critical-on-origin-default: light-dark( + var(--db-critical-on-origin-light-default), + var(--db-critical-on-origin-dark-default) + ); + --db-critical-on-origin-hovered: light-dark( + var(--db-critical-on-origin-light-hovered), + var(--db-critical-on-origin-dark-hovered) + ); + --db-critical-on-origin-pressed: light-dark( + var(--db-critical-on-origin-light-pressed), + var(--db-critical-on-origin-dark-pressed) + ); + --db-critical-bg-basic-level-1-default: light-dark( + var(--db-critical-14), + var(--db-critical-3) + ); + --db-critical-bg-basic-level-1-hovered: light-dark( + var(--db-critical-13), + var(--db-critical-4) + ); + --db-critical-bg-basic-level-1-pressed: light-dark( + var(--db-critical-12), + var(--db-critical-5) + ); + --db-critical-bg-basic-level-2-default: light-dark( + var(--db-critical-13), + var(--db-critical-2) + ); + --db-critical-bg-basic-level-2-hovered: light-dark( + var(--db-critical-12), + var(--db-critical-3) + ); + --db-critical-bg-basic-level-2-pressed: light-dark( + var(--db-critical-11), + var(--db-critical-4) + ); + --db-critical-bg-basic-level-3-default: light-dark( + var(--db-critical-12), + var(--db-critical-1) + ); + --db-critical-bg-basic-level-3-hovered: light-dark( var(--db-critical-11), var(--db-critical-2) ); - --db-critical-bg-lvl-3-pressed: light-dark( + --db-critical-bg-basic-level-3-pressed: light-dark( var(--db-critical-10), var(--db-critical-3) ); - --db-critical-bg-transparent-full-enabled: light-dark( + --db-critical-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-critical-6)), color-mix(in srgb, transparent 100%, var(--db-critical-9)) ); - --db-critical-bg-transparent-semi-enabled: light-dark( + --db-critical-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-critical-6)), color-mix(in srgb, transparent 84%, var(--db-critical-9)) ); - --db-critical-bg-transparent-hover: light-dark( + --db-critical-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-critical-6)), color-mix(in srgb, transparent 76%, var(--db-critical-9)) ); - --db-critical-bg-transparent-pressed: light-dark( + --db-critical-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-critical-6)), color-mix(in srgb, transparent 68%, var(--db-critical-9)) ); - --db-critical-on-bg-enabled: light-dark( + --db-critical-on-bg-basic-emphasis-100-default: light-dark( var(--db-critical-3), var(--db-critical-12) ); - --db-critical-on-bg-hover: light-dark( + --db-critical-on-bg-basic-emphasis-100-hovered: light-dark( var(--db-critical-4), var(--db-critical-11) ); - --db-critical-on-bg-pressed: light-dark( + --db-critical-on-bg-basic-emphasis-100-pressed: light-dark( var(--db-critical-5), var(--db-critical-10) ); - --db-critical-on-bg-weak-enabled: light-dark( + --db-critical-on-bg-basic-emphasis-90-default: light-dark( var(--db-critical-5), var(--db-critical-10) ); - --db-critical-on-bg-weak-hover: light-dark( + --db-critical-on-bg-basic-emphasis-90-hovered: light-dark( var(--db-critical-6), var(--db-critical-9) ); - --db-critical-on-bg-weak-pressed: light-dark( + --db-critical-on-bg-basic-emphasis-90-pressed: light-dark( var(--db-critical-7), var(--db-critical-8) ); - --db-critical-on-contrast-enabled: light-dark( - var(--db-critical-14), - var(--db-critical-3) + --db-critical-on-bg-basic-emphasis-80-default: light-dark( + var(--db-critical-6), + var(--db-critical-9) ); - --db-critical-on-contrast-hover: light-dark( - var(--db-critical-13), + --db-critical-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-critical-5), + var(--db-critical-8) + ); + --db-critical-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-critical-4), + var(--db-critical-7) + ); + --db-critical-on-bg-basic-emphasis-70-default: light-dark( + var(--db-critical-7), + var(--db-critical-8) + ); + --db-critical-on-bg-basic-emphasis-70-hovered: light-dark( + var(--db-critical-6), + var(--db-critical-7) + ); + --db-critical-on-bg-basic-emphasis-70-pressed: light-dark( + var(--db-critical-5), + var(--db-critical-6) + ); + --db-critical-on-bg-basic-emphasis-60-default: light-dark( + var(--db-critical-10), + var(--db-critical-6) + ); + --db-critical-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-critical-9), + var(--db-critical-5) + ); + --db-critical-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-critical-8), var(--db-critical-4) ); - --db-critical-on-contrast-pressed: light-dark( - var(--db-critical-12), + --db-critical-on-bg-basic-emphasis-50-default: light-dark( + var(--db-critical-9), var(--db-critical-5) ); - --db-critical-contrast-high-enabled: light-dark( + --db-critical-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-critical-8), + var(--db-critical-4) + ); + --db-critical-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-critical-7), + var(--db-critical-3) + ); + --db-critical-bg-inverted-contrast-max-default: light-dark( + var(--db-critical-3), + var(--db-critical-12) + ); + --db-critical-bg-inverted-contrast-max-hovered: light-dark( + var(--db-critical-4), + var(--db-critical-11) + ); + --db-critical-bg-inverted-contrast-max-pressed: light-dark( + var(--db-critical-5), + var(--db-critical-10) + ); + --db-critical-bg-inverted-contrast-high-default: light-dark( var(--db-critical-6), var(--db-critical-9) ); - --db-critical-contrast-high-hover: light-dark( + --db-critical-bg-inverted-contrast-high-hovered: light-dark( var(--db-critical-5), var(--db-critical-8) ); - --db-critical-contrast-high-pressed: light-dark( + --db-critical-bg-inverted-contrast-high-pressed: light-dark( var(--db-critical-4), var(--db-critical-7) ); - --db-critical-contrast-low-enabled: light-dark( + --db-critical-bg-inverted-contrast-low-default: light-dark( var(--db-critical-7), var(--db-critical-8) ); - --db-critical-contrast-low-hover: light-dark( + --db-critical-bg-inverted-contrast-low-hovered: light-dark( var(--db-critical-6), var(--db-critical-7) ); - --db-critical-contrast-low-pressed: light-dark( + --db-critical-bg-inverted-contrast-low-pressed: light-dark( var(--db-critical-5), var(--db-critical-6) ); - --db-critical-border: light-dark( - var(--db-critical-10), - var(--db-critical-6) + --db-critical-on-bg-inverted-default: light-dark( + var(--db-critical-14), + var(--db-critical-3) + ); + --db-critical-on-bg-inverted-hovered: light-dark( + var(--db-critical-13), + var(--db-critical-4) + ); + --db-critical-on-bg-inverted-pressed: light-dark( + var(--db-critical-12), + var(--db-critical-5) ); } @@ -716,1048 +1190,1768 @@ } @mixin get-additional-color-scheme { - --db-yellow-on-enabled: light-dark( - var(--db-yellow-on-light), - var(--db-yellow-on-dark) + --db-yellow-origin-default: light-dark( + var(--db-yellow-origin-light-default), + var(--db-yellow-origin-dark-default) ); - --db-yellow-on-hover: light-dark( - var(--db-yellow-on-hover-light), - var(--db-yellow-on-hover-dark) + --db-yellow-origin-hovered: light-dark( + var(--db-yellow-origin-light-hovered), + var(--db-yellow-origin-dark-hovered) ); - --db-yellow-on-pressed: light-dark( - var(--db-yellow-on-pressed-light), - var(--db-yellow-on-pressed-dark) + --db-yellow-origin-pressed: light-dark( + var(--db-yellow-origin-light-pressed), + var(--db-yellow-origin-dark-pressed) ); - --db-yellow-origin-enabled: light-dark( - var(--db-yellow-origin-light), - var(--db-yellow-origin-dark) + --db-yellow-on-origin-default: light-dark( + var(--db-yellow-on-origin-light-default), + var(--db-yellow-on-origin-dark-default) ); - --db-yellow-origin-hover: light-dark( - var(--db-yellow-hover-light), - var(--db-yellow-hover-dark) + --db-yellow-on-origin-hovered: light-dark( + var(--db-yellow-on-origin-light-hovered), + var(--db-yellow-on-origin-dark-hovered) ); - --db-yellow-origin-pressed: light-dark( - var(--db-yellow-pressed-light), - var(--db-yellow-pressed-dark) + --db-yellow-on-origin-pressed: light-dark( + var(--db-yellow-on-origin-light-pressed), + var(--db-yellow-on-origin-dark-pressed) ); - --db-yellow-bg-lvl-1-enabled: light-dark( + --db-yellow-bg-basic-level-1-default: light-dark( var(--db-yellow-14), var(--db-yellow-3) ); - --db-yellow-bg-lvl-1-hover: light-dark( + --db-yellow-bg-basic-level-1-hovered: light-dark( var(--db-yellow-13), var(--db-yellow-4) ); - --db-yellow-bg-lvl-1-pressed: light-dark( + --db-yellow-bg-basic-level-1-pressed: light-dark( var(--db-yellow-12), var(--db-yellow-5) ); - --db-yellow-bg-lvl-2-enabled: light-dark( + --db-yellow-bg-basic-level-2-default: light-dark( var(--db-yellow-13), var(--db-yellow-2) ); - --db-yellow-bg-lvl-2-hover: light-dark( + --db-yellow-bg-basic-level-2-hovered: light-dark( var(--db-yellow-12), var(--db-yellow-3) ); - --db-yellow-bg-lvl-2-pressed: light-dark( + --db-yellow-bg-basic-level-2-pressed: light-dark( var(--db-yellow-11), var(--db-yellow-4) ); - --db-yellow-bg-lvl-3-enabled: light-dark( + --db-yellow-bg-basic-level-3-default: light-dark( var(--db-yellow-12), var(--db-yellow-1) ); - --db-yellow-bg-lvl-3-hover: light-dark( + --db-yellow-bg-basic-level-3-hovered: light-dark( var(--db-yellow-11), var(--db-yellow-2) ); - --db-yellow-bg-lvl-3-pressed: light-dark( + --db-yellow-bg-basic-level-3-pressed: light-dark( var(--db-yellow-10), var(--db-yellow-3) ); - --db-yellow-bg-transparent-full-enabled: light-dark( + --db-yellow-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-yellow-6)), color-mix(in srgb, transparent 100%, var(--db-yellow-9)) ); - --db-yellow-bg-transparent-semi-enabled: light-dark( + --db-yellow-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-yellow-6)), color-mix(in srgb, transparent 84%, var(--db-yellow-9)) ); - --db-yellow-bg-transparent-hover: light-dark( + --db-yellow-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-yellow-6)), color-mix(in srgb, transparent 76%, var(--db-yellow-9)) ); - --db-yellow-bg-transparent-pressed: light-dark( + --db-yellow-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-yellow-6)), color-mix(in srgb, transparent 68%, var(--db-yellow-9)) ); - --db-yellow-on-bg-enabled: light-dark( + --db-yellow-on-bg-basic-emphasis-100-default: light-dark( var(--db-yellow-3), var(--db-yellow-12) ); - --db-yellow-on-bg-hover: light-dark( + --db-yellow-on-bg-basic-emphasis-100-hovered: light-dark( var(--db-yellow-4), var(--db-yellow-11) ); - --db-yellow-on-bg-pressed: light-dark( + --db-yellow-on-bg-basic-emphasis-100-pressed: light-dark( var(--db-yellow-5), var(--db-yellow-10) ); - --db-yellow-on-bg-weak-enabled: light-dark( + --db-yellow-on-bg-basic-emphasis-90-default: light-dark( var(--db-yellow-5), var(--db-yellow-10) ); - --db-yellow-on-bg-weak-hover: light-dark( + --db-yellow-on-bg-basic-emphasis-90-hovered: light-dark( var(--db-yellow-6), var(--db-yellow-9) ); - --db-yellow-on-bg-weak-pressed: light-dark( + --db-yellow-on-bg-basic-emphasis-90-pressed: light-dark( var(--db-yellow-7), var(--db-yellow-8) ); - --db-yellow-on-contrast-enabled: light-dark( - var(--db-yellow-14), - var(--db-yellow-3) + --db-yellow-on-bg-basic-emphasis-80-default: light-dark( + var(--db-yellow-6), + var(--db-yellow-9) ); - --db-yellow-on-contrast-hover: light-dark( - var(--db-yellow-13), + --db-yellow-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-yellow-5), + var(--db-yellow-8) + ); + --db-yellow-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-yellow-4), + var(--db-yellow-7) + ); + --db-yellow-on-bg-basic-emphasis-70-default: light-dark( + var(--db-yellow-7), + var(--db-yellow-8) + ); + --db-yellow-on-bg-basic-emphasis-70-hovered: light-dark( + var(--db-yellow-6), + var(--db-yellow-7) + ); + --db-yellow-on-bg-basic-emphasis-70-pressed: light-dark( + var(--db-yellow-5), + var(--db-yellow-6) + ); + --db-yellow-on-bg-basic-emphasis-60-default: light-dark( + var(--db-yellow-10), + var(--db-yellow-6) + ); + --db-yellow-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-yellow-9), + var(--db-yellow-5) + ); + --db-yellow-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-yellow-8), var(--db-yellow-4) ); - --db-yellow-on-contrast-pressed: light-dark( - var(--db-yellow-12), + --db-yellow-on-bg-basic-emphasis-50-default: light-dark( + var(--db-yellow-9), var(--db-yellow-5) ); - --db-yellow-contrast-high-enabled: light-dark( + --db-yellow-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-yellow-8), + var(--db-yellow-4) + ); + --db-yellow-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-yellow-7), + var(--db-yellow-3) + ); + --db-yellow-bg-inverted-contrast-max-default: light-dark( + var(--db-yellow-3), + var(--db-yellow-12) + ); + --db-yellow-bg-inverted-contrast-max-hovered: light-dark( + var(--db-yellow-4), + var(--db-yellow-11) + ); + --db-yellow-bg-inverted-contrast-max-pressed: light-dark( + var(--db-yellow-5), + var(--db-yellow-10) + ); + --db-yellow-bg-inverted-contrast-high-default: light-dark( var(--db-yellow-6), var(--db-yellow-9) ); - --db-yellow-contrast-high-hover: light-dark( + --db-yellow-bg-inverted-contrast-high-hovered: light-dark( var(--db-yellow-5), var(--db-yellow-8) ); - --db-yellow-contrast-high-pressed: light-dark( + --db-yellow-bg-inverted-contrast-high-pressed: light-dark( var(--db-yellow-4), var(--db-yellow-7) ); - --db-yellow-contrast-low-enabled: light-dark( + --db-yellow-bg-inverted-contrast-low-default: light-dark( var(--db-yellow-7), var(--db-yellow-8) ); - --db-yellow-contrast-low-hover: light-dark( + --db-yellow-bg-inverted-contrast-low-hovered: light-dark( var(--db-yellow-6), var(--db-yellow-7) ); - --db-yellow-contrast-low-pressed: light-dark( + --db-yellow-bg-inverted-contrast-low-pressed: light-dark( var(--db-yellow-5), var(--db-yellow-6) ); - --db-yellow-border: light-dark(var(--db-yellow-10), var(--db-yellow-6)); - --db-orange-on-enabled: light-dark( - var(--db-orange-on-light), - var(--db-orange-on-dark) + --db-yellow-on-bg-inverted-default: light-dark( + var(--db-yellow-14), + var(--db-yellow-3) ); - --db-orange-on-hover: light-dark( - var(--db-orange-on-hover-light), - var(--db-orange-on-hover-dark) + --db-yellow-on-bg-inverted-hovered: light-dark( + var(--db-yellow-13), + var(--db-yellow-4) ); - --db-orange-on-pressed: light-dark( - var(--db-orange-on-pressed-light), - var(--db-orange-on-pressed-dark) + --db-yellow-on-bg-inverted-pressed: light-dark( + var(--db-yellow-12), + var(--db-yellow-5) ); - --db-orange-origin-enabled: light-dark( - var(--db-orange-origin-light), - var(--db-orange-origin-dark) + --db-orange-origin-default: light-dark( + var(--db-orange-origin-light-default), + var(--db-orange-origin-dark-default) ); - --db-orange-origin-hover: light-dark( - var(--db-orange-hover-light), - var(--db-orange-hover-dark) + --db-orange-origin-hovered: light-dark( + var(--db-orange-origin-light-hovered), + var(--db-orange-origin-dark-hovered) ); --db-orange-origin-pressed: light-dark( - var(--db-orange-pressed-light), - var(--db-orange-pressed-dark) + var(--db-orange-origin-light-pressed), + var(--db-orange-origin-dark-pressed) + ); + --db-orange-on-origin-default: light-dark( + var(--db-orange-on-origin-light-default), + var(--db-orange-on-origin-dark-default) + ); + --db-orange-on-origin-hovered: light-dark( + var(--db-orange-on-origin-light-hovered), + var(--db-orange-on-origin-dark-hovered) ); - --db-orange-bg-lvl-1-enabled: light-dark( + --db-orange-on-origin-pressed: light-dark( + var(--db-orange-on-origin-light-pressed), + var(--db-orange-on-origin-dark-pressed) + ); + --db-orange-bg-basic-level-1-default: light-dark( var(--db-orange-14), var(--db-orange-3) ); - --db-orange-bg-lvl-1-hover: light-dark( + --db-orange-bg-basic-level-1-hovered: light-dark( var(--db-orange-13), var(--db-orange-4) ); - --db-orange-bg-lvl-1-pressed: light-dark( + --db-orange-bg-basic-level-1-pressed: light-dark( var(--db-orange-12), var(--db-orange-5) ); - --db-orange-bg-lvl-2-enabled: light-dark( + --db-orange-bg-basic-level-2-default: light-dark( var(--db-orange-13), var(--db-orange-2) ); - --db-orange-bg-lvl-2-hover: light-dark( + --db-orange-bg-basic-level-2-hovered: light-dark( var(--db-orange-12), var(--db-orange-3) ); - --db-orange-bg-lvl-2-pressed: light-dark( + --db-orange-bg-basic-level-2-pressed: light-dark( var(--db-orange-11), var(--db-orange-4) ); - --db-orange-bg-lvl-3-enabled: light-dark( + --db-orange-bg-basic-level-3-default: light-dark( var(--db-orange-12), var(--db-orange-1) ); - --db-orange-bg-lvl-3-hover: light-dark( + --db-orange-bg-basic-level-3-hovered: light-dark( var(--db-orange-11), var(--db-orange-2) ); - --db-orange-bg-lvl-3-pressed: light-dark( + --db-orange-bg-basic-level-3-pressed: light-dark( var(--db-orange-10), var(--db-orange-3) ); - --db-orange-bg-transparent-full-enabled: light-dark( + --db-orange-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-orange-6)), color-mix(in srgb, transparent 100%, var(--db-orange-9)) ); - --db-orange-bg-transparent-semi-enabled: light-dark( + --db-orange-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-orange-6)), color-mix(in srgb, transparent 84%, var(--db-orange-9)) ); - --db-orange-bg-transparent-hover: light-dark( + --db-orange-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-orange-6)), color-mix(in srgb, transparent 76%, var(--db-orange-9)) ); - --db-orange-bg-transparent-pressed: light-dark( + --db-orange-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-orange-6)), color-mix(in srgb, transparent 68%, var(--db-orange-9)) ); - --db-orange-on-bg-enabled: light-dark( + --db-orange-on-bg-basic-emphasis-100-default: light-dark( var(--db-orange-3), var(--db-orange-12) ); - --db-orange-on-bg-hover: light-dark( + --db-orange-on-bg-basic-emphasis-100-hovered: light-dark( var(--db-orange-4), var(--db-orange-11) ); - --db-orange-on-bg-pressed: light-dark( + --db-orange-on-bg-basic-emphasis-100-pressed: light-dark( var(--db-orange-5), var(--db-orange-10) ); - --db-orange-on-bg-weak-enabled: light-dark( + --db-orange-on-bg-basic-emphasis-90-default: light-dark( var(--db-orange-5), var(--db-orange-10) ); - --db-orange-on-bg-weak-hover: light-dark( + --db-orange-on-bg-basic-emphasis-90-hovered: light-dark( var(--db-orange-6), var(--db-orange-9) ); - --db-orange-on-bg-weak-pressed: light-dark( + --db-orange-on-bg-basic-emphasis-90-pressed: light-dark( var(--db-orange-7), var(--db-orange-8) ); - --db-orange-on-contrast-enabled: light-dark( - var(--db-orange-14), - var(--db-orange-3) + --db-orange-on-bg-basic-emphasis-80-default: light-dark( + var(--db-orange-6), + var(--db-orange-9) ); - --db-orange-on-contrast-hover: light-dark( - var(--db-orange-13), + --db-orange-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-orange-5), + var(--db-orange-8) + ); + --db-orange-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-orange-4), + var(--db-orange-7) + ); + --db-orange-on-bg-basic-emphasis-70-default: light-dark( + var(--db-orange-7), + var(--db-orange-8) + ); + --db-orange-on-bg-basic-emphasis-70-hovered: light-dark( + var(--db-orange-6), + var(--db-orange-7) + ); + --db-orange-on-bg-basic-emphasis-70-pressed: light-dark( + var(--db-orange-5), + var(--db-orange-6) + ); + --db-orange-on-bg-basic-emphasis-60-default: light-dark( + var(--db-orange-10), + var(--db-orange-6) + ); + --db-orange-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-orange-9), + var(--db-orange-5) + ); + --db-orange-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-orange-8), var(--db-orange-4) ); - --db-orange-on-contrast-pressed: light-dark( - var(--db-orange-12), + --db-orange-on-bg-basic-emphasis-50-default: light-dark( + var(--db-orange-9), var(--db-orange-5) ); - --db-orange-contrast-high-enabled: light-dark( + --db-orange-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-orange-8), + var(--db-orange-4) + ); + --db-orange-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-orange-7), + var(--db-orange-3) + ); + --db-orange-bg-inverted-contrast-max-default: light-dark( + var(--db-orange-3), + var(--db-orange-12) + ); + --db-orange-bg-inverted-contrast-max-hovered: light-dark( + var(--db-orange-4), + var(--db-orange-11) + ); + --db-orange-bg-inverted-contrast-max-pressed: light-dark( + var(--db-orange-5), + var(--db-orange-10) + ); + --db-orange-bg-inverted-contrast-high-default: light-dark( var(--db-orange-6), var(--db-orange-9) ); - --db-orange-contrast-high-hover: light-dark( + --db-orange-bg-inverted-contrast-high-hovered: light-dark( var(--db-orange-5), var(--db-orange-8) ); - --db-orange-contrast-high-pressed: light-dark( + --db-orange-bg-inverted-contrast-high-pressed: light-dark( var(--db-orange-4), var(--db-orange-7) ); - --db-orange-contrast-low-enabled: light-dark( + --db-orange-bg-inverted-contrast-low-default: light-dark( var(--db-orange-7), var(--db-orange-8) ); - --db-orange-contrast-low-hover: light-dark( + --db-orange-bg-inverted-contrast-low-hovered: light-dark( var(--db-orange-6), var(--db-orange-7) ); - --db-orange-contrast-low-pressed: light-dark( + --db-orange-bg-inverted-contrast-low-pressed: light-dark( var(--db-orange-5), var(--db-orange-6) ); - --db-orange-border: light-dark(var(--db-orange-10), var(--db-orange-6)); - --db-red-on-enabled: light-dark( - var(--db-red-on-light), - var(--db-red-on-dark) + --db-orange-on-bg-inverted-default: light-dark( + var(--db-orange-14), + var(--db-orange-3) ); - --db-red-on-hover: light-dark( - var(--db-red-on-hover-light), - var(--db-red-on-hover-dark) + --db-orange-on-bg-inverted-hovered: light-dark( + var(--db-orange-13), + var(--db-orange-4) ); - --db-red-on-pressed: light-dark( - var(--db-red-on-pressed-light), - var(--db-red-on-pressed-dark) + --db-orange-on-bg-inverted-pressed: light-dark( + var(--db-orange-12), + var(--db-orange-5) ); - --db-red-origin-enabled: light-dark( - var(--db-red-origin-light), - var(--db-red-origin-dark) + --db-red-origin-default: light-dark( + var(--db-red-origin-light-default), + var(--db-red-origin-dark-default) ); - --db-red-origin-hover: light-dark( - var(--db-red-hover-light), - var(--db-red-hover-dark) + --db-red-origin-hovered: light-dark( + var(--db-red-origin-light-hovered), + var(--db-red-origin-dark-hovered) ); --db-red-origin-pressed: light-dark( - var(--db-red-pressed-light), - var(--db-red-pressed-dark) - ); - --db-red-bg-lvl-1-enabled: light-dark(var(--db-red-14), var(--db-red-3)); - --db-red-bg-lvl-1-hover: light-dark(var(--db-red-13), var(--db-red-4)); - --db-red-bg-lvl-1-pressed: light-dark(var(--db-red-12), var(--db-red-5)); - --db-red-bg-lvl-2-enabled: light-dark(var(--db-red-13), var(--db-red-2)); - --db-red-bg-lvl-2-hover: light-dark(var(--db-red-12), var(--db-red-3)); - --db-red-bg-lvl-2-pressed: light-dark(var(--db-red-11), var(--db-red-4)); - --db-red-bg-lvl-3-enabled: light-dark(var(--db-red-12), var(--db-red-1)); - --db-red-bg-lvl-3-hover: light-dark(var(--db-red-11), var(--db-red-2)); - --db-red-bg-lvl-3-pressed: light-dark(var(--db-red-10), var(--db-red-3)); - --db-red-bg-transparent-full-enabled: light-dark( + var(--db-red-origin-light-pressed), + var(--db-red-origin-dark-pressed) + ); + --db-red-on-origin-default: light-dark( + var(--db-red-on-origin-light-default), + var(--db-red-on-origin-dark-default) + ); + --db-red-on-origin-hovered: light-dark( + var(--db-red-on-origin-light-hovered), + var(--db-red-on-origin-dark-hovered) + ); + --db-red-on-origin-pressed: light-dark( + var(--db-red-on-origin-light-pressed), + var(--db-red-on-origin-dark-pressed) + ); + --db-red-bg-basic-level-1-default: light-dark( + var(--db-red-14), + var(--db-red-3) + ); + --db-red-bg-basic-level-1-hovered: light-dark( + var(--db-red-13), + var(--db-red-4) + ); + --db-red-bg-basic-level-1-pressed: light-dark( + var(--db-red-12), + var(--db-red-5) + ); + --db-red-bg-basic-level-2-default: light-dark( + var(--db-red-13), + var(--db-red-2) + ); + --db-red-bg-basic-level-2-hovered: light-dark( + var(--db-red-12), + var(--db-red-3) + ); + --db-red-bg-basic-level-2-pressed: light-dark( + var(--db-red-11), + var(--db-red-4) + ); + --db-red-bg-basic-level-3-default: light-dark( + var(--db-red-12), + var(--db-red-1) + ); + --db-red-bg-basic-level-3-hovered: light-dark( + var(--db-red-11), + var(--db-red-2) + ); + --db-red-bg-basic-level-3-pressed: light-dark( + var(--db-red-10), + var(--db-red-3) + ); + --db-red-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-red-6)), color-mix(in srgb, transparent 100%, var(--db-red-9)) ); - --db-red-bg-transparent-semi-enabled: light-dark( + --db-red-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-red-6)), color-mix(in srgb, transparent 84%, var(--db-red-9)) ); - --db-red-bg-transparent-hover: light-dark( + --db-red-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-red-6)), color-mix(in srgb, transparent 76%, var(--db-red-9)) ); - --db-red-bg-transparent-pressed: light-dark( + --db-red-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-red-6)), color-mix(in srgb, transparent 68%, var(--db-red-9)) ); - --db-red-on-bg-enabled: light-dark(var(--db-red-3), var(--db-red-12)); - --db-red-on-bg-hover: light-dark(var(--db-red-4), var(--db-red-11)); - --db-red-on-bg-pressed: light-dark(var(--db-red-5), var(--db-red-10)); - --db-red-on-bg-weak-enabled: light-dark(var(--db-red-5), var(--db-red-10)); - --db-red-on-bg-weak-hover: light-dark(var(--db-red-6), var(--db-red-9)); - --db-red-on-bg-weak-pressed: light-dark(var(--db-red-7), var(--db-red-8)); - --db-red-on-contrast-enabled: light-dark(var(--db-red-14), var(--db-red-3)); - --db-red-on-contrast-hover: light-dark(var(--db-red-13), var(--db-red-4)); - --db-red-on-contrast-pressed: light-dark(var(--db-red-12), var(--db-red-5)); - --db-red-contrast-high-enabled: light-dark( - var(--db-red-6), - var(--db-red-9) + --db-red-on-bg-basic-emphasis-100-default: light-dark( + var(--db-red-3), + var(--db-red-12) ); - --db-red-contrast-high-hover: light-dark(var(--db-red-5), var(--db-red-8)); - --db-red-contrast-high-pressed: light-dark( + --db-red-on-bg-basic-emphasis-100-hovered: light-dark( var(--db-red-4), - var(--db-red-7) + var(--db-red-11) ); - --db-red-contrast-low-enabled: light-dark(var(--db-red-7), var(--db-red-8)); - --db-red-contrast-low-hover: light-dark(var(--db-red-6), var(--db-red-7)); - --db-red-contrast-low-pressed: light-dark(var(--db-red-5), var(--db-red-6)); - --db-red-border: light-dark(var(--db-red-10), var(--db-red-6)); - --db-pink-on-enabled: light-dark( - var(--db-pink-on-light), - var(--db-pink-on-dark) + --db-red-on-bg-basic-emphasis-100-pressed: light-dark( + var(--db-red-5), + var(--db-red-10) ); - --db-pink-on-hover: light-dark( - var(--db-pink-on-hover-light), - var(--db-pink-on-hover-dark) + --db-red-on-bg-basic-emphasis-90-default: light-dark( + var(--db-red-5), + var(--db-red-10) ); - --db-pink-on-pressed: light-dark( - var(--db-pink-on-pressed-light), - var(--db-pink-on-pressed-dark) + --db-red-on-bg-basic-emphasis-90-hovered: light-dark( + var(--db-red-6), + var(--db-red-9) ); - --db-pink-origin-enabled: light-dark( - var(--db-pink-origin-light), - var(--db-pink-origin-dark) + --db-red-on-bg-basic-emphasis-90-pressed: light-dark( + var(--db-red-7), + var(--db-red-8) ); - --db-pink-origin-hover: light-dark( - var(--db-pink-hover-light), - var(--db-pink-hover-dark) + --db-red-on-bg-basic-emphasis-80-default: light-dark( + var(--db-red-6), + var(--db-red-9) ); - --db-pink-origin-pressed: light-dark( - var(--db-pink-pressed-light), - var(--db-pink-pressed-dark) - ); - --db-pink-bg-lvl-1-enabled: light-dark(var(--db-pink-14), var(--db-pink-3)); - --db-pink-bg-lvl-1-hover: light-dark(var(--db-pink-13), var(--db-pink-4)); - --db-pink-bg-lvl-1-pressed: light-dark(var(--db-pink-12), var(--db-pink-5)); - --db-pink-bg-lvl-2-enabled: light-dark(var(--db-pink-13), var(--db-pink-2)); - --db-pink-bg-lvl-2-hover: light-dark(var(--db-pink-12), var(--db-pink-3)); - --db-pink-bg-lvl-2-pressed: light-dark(var(--db-pink-11), var(--db-pink-4)); - --db-pink-bg-lvl-3-enabled: light-dark(var(--db-pink-12), var(--db-pink-1)); - --db-pink-bg-lvl-3-hover: light-dark(var(--db-pink-11), var(--db-pink-2)); - --db-pink-bg-lvl-3-pressed: light-dark(var(--db-pink-10), var(--db-pink-3)); - --db-pink-bg-transparent-full-enabled: light-dark( - color-mix(in srgb, transparent 100%, var(--db-pink-6)), - color-mix(in srgb, transparent 100%, var(--db-pink-9)) + --db-red-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-red-5), + var(--db-red-8) ); - --db-pink-bg-transparent-semi-enabled: light-dark( - color-mix(in srgb, transparent 92%, var(--db-pink-6)), - color-mix(in srgb, transparent 84%, var(--db-pink-9)) + --db-red-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-red-4), + var(--db-red-7) ); - --db-pink-bg-transparent-hover: light-dark( - color-mix(in srgb, transparent 84%, var(--db-pink-6)), - color-mix(in srgb, transparent 76%, var(--db-pink-9)) + --db-red-on-bg-basic-emphasis-70-default: light-dark( + var(--db-red-7), + var(--db-red-8) ); - --db-pink-bg-transparent-pressed: light-dark( - color-mix(in srgb, transparent 76%, var(--db-pink-6)), - color-mix(in srgb, transparent 68%, var(--db-pink-9)) + --db-red-on-bg-basic-emphasis-70-hovered: light-dark( + var(--db-red-6), + var(--db-red-7) ); - --db-pink-on-bg-enabled: light-dark(var(--db-pink-3), var(--db-pink-12)); - --db-pink-on-bg-hover: light-dark(var(--db-pink-4), var(--db-pink-11)); - --db-pink-on-bg-pressed: light-dark(var(--db-pink-5), var(--db-pink-10)); - --db-pink-on-bg-weak-enabled: light-dark( - var(--db-pink-5), - var(--db-pink-10) + --db-red-on-bg-basic-emphasis-70-pressed: light-dark( + var(--db-red-5), + var(--db-red-6) ); - --db-pink-on-bg-weak-hover: light-dark(var(--db-pink-6), var(--db-pink-9)); - --db-pink-on-bg-weak-pressed: light-dark( - var(--db-pink-7), - var(--db-pink-8) + --db-red-on-bg-basic-emphasis-60-default: light-dark( + var(--db-red-10), + var(--db-red-6) ); - --db-pink-on-contrast-enabled: light-dark( - var(--db-pink-14), - var(--db-pink-3) + --db-red-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-red-9), + var(--db-red-5) ); - --db-pink-on-contrast-hover: light-dark( - var(--db-pink-13), - var(--db-pink-4) + --db-red-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-red-8), + var(--db-red-4) ); - --db-pink-on-contrast-pressed: light-dark( - var(--db-pink-12), - var(--db-pink-5) + --db-red-on-bg-basic-emphasis-50-default: light-dark( + var(--db-red-9), + var(--db-red-5) ); - --db-pink-contrast-high-enabled: light-dark( - var(--db-pink-6), - var(--db-pink-9) + --db-red-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-red-8), + var(--db-red-4) ); - --db-pink-contrast-high-hover: light-dark( - var(--db-pink-5), - var(--db-pink-8) + --db-red-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-red-7), + var(--db-red-3) ); - --db-pink-contrast-high-pressed: light-dark( - var(--db-pink-4), - var(--db-pink-7) + --db-red-bg-inverted-contrast-max-default: light-dark( + var(--db-red-3), + var(--db-red-12) ); - --db-pink-contrast-low-enabled: light-dark( + --db-red-bg-inverted-contrast-max-hovered: light-dark( + var(--db-red-4), + var(--db-red-11) + ); + --db-red-bg-inverted-contrast-max-pressed: light-dark( + var(--db-red-5), + var(--db-red-10) + ); + --db-red-bg-inverted-contrast-high-default: light-dark( + var(--db-red-6), + var(--db-red-9) + ); + --db-red-bg-inverted-contrast-high-hovered: light-dark( + var(--db-red-5), + var(--db-red-8) + ); + --db-red-bg-inverted-contrast-high-pressed: light-dark( + var(--db-red-4), + var(--db-red-7) + ); + --db-red-bg-inverted-contrast-low-default: light-dark( + var(--db-red-7), + var(--db-red-8) + ); + --db-red-bg-inverted-contrast-low-hovered: light-dark( + var(--db-red-6), + var(--db-red-7) + ); + --db-red-bg-inverted-contrast-low-pressed: light-dark( + var(--db-red-5), + var(--db-red-6) + ); + --db-red-on-bg-inverted-default: light-dark( + var(--db-red-14), + var(--db-red-3) + ); + --db-red-on-bg-inverted-hovered: light-dark( + var(--db-red-13), + var(--db-red-4) + ); + --db-red-on-bg-inverted-pressed: light-dark( + var(--db-red-12), + var(--db-red-5) + ); + --db-pink-origin-default: light-dark( + var(--db-pink-origin-light-default), + var(--db-pink-origin-dark-default) + ); + --db-pink-origin-hovered: light-dark( + var(--db-pink-origin-light-hovered), + var(--db-pink-origin-dark-hovered) + ); + --db-pink-origin-pressed: light-dark( + var(--db-pink-origin-light-pressed), + var(--db-pink-origin-dark-pressed) + ); + --db-pink-on-origin-default: light-dark( + var(--db-pink-on-origin-light-default), + var(--db-pink-on-origin-dark-default) + ); + --db-pink-on-origin-hovered: light-dark( + var(--db-pink-on-origin-light-hovered), + var(--db-pink-on-origin-dark-hovered) + ); + --db-pink-on-origin-pressed: light-dark( + var(--db-pink-on-origin-light-pressed), + var(--db-pink-on-origin-dark-pressed) + ); + --db-pink-bg-basic-level-1-default: light-dark( + var(--db-pink-14), + var(--db-pink-3) + ); + --db-pink-bg-basic-level-1-hovered: light-dark( + var(--db-pink-13), + var(--db-pink-4) + ); + --db-pink-bg-basic-level-1-pressed: light-dark( + var(--db-pink-12), + var(--db-pink-5) + ); + --db-pink-bg-basic-level-2-default: light-dark( + var(--db-pink-13), + var(--db-pink-2) + ); + --db-pink-bg-basic-level-2-hovered: light-dark( + var(--db-pink-12), + var(--db-pink-3) + ); + --db-pink-bg-basic-level-2-pressed: light-dark( + var(--db-pink-11), + var(--db-pink-4) + ); + --db-pink-bg-basic-level-3-default: light-dark( + var(--db-pink-12), + var(--db-pink-1) + ); + --db-pink-bg-basic-level-3-hovered: light-dark( + var(--db-pink-11), + var(--db-pink-2) + ); + --db-pink-bg-basic-level-3-pressed: light-dark( + var(--db-pink-10), + var(--db-pink-3) + ); + --db-pink-bg-basic-transparent-full-default: light-dark( + color-mix(in srgb, transparent 100%, var(--db-pink-6)), + color-mix(in srgb, transparent 100%, var(--db-pink-9)) + ); + --db-pink-bg-basic-transparent-semi-default: light-dark( + color-mix(in srgb, transparent 92%, var(--db-pink-6)), + color-mix(in srgb, transparent 84%, var(--db-pink-9)) + ); + --db-pink-bg-basic-transparent-hovered: light-dark( + color-mix(in srgb, transparent 84%, var(--db-pink-6)), + color-mix(in srgb, transparent 76%, var(--db-pink-9)) + ); + --db-pink-bg-basic-transparent-pressed: light-dark( + color-mix(in srgb, transparent 76%, var(--db-pink-6)), + color-mix(in srgb, transparent 68%, var(--db-pink-9)) + ); + --db-pink-on-bg-basic-emphasis-100-default: light-dark( + var(--db-pink-3), + var(--db-pink-12) + ); + --db-pink-on-bg-basic-emphasis-100-hovered: light-dark( + var(--db-pink-4), + var(--db-pink-11) + ); + --db-pink-on-bg-basic-emphasis-100-pressed: light-dark( + var(--db-pink-5), + var(--db-pink-10) + ); + --db-pink-on-bg-basic-emphasis-90-default: light-dark( + var(--db-pink-5), + var(--db-pink-10) + ); + --db-pink-on-bg-basic-emphasis-90-hovered: light-dark( + var(--db-pink-6), + var(--db-pink-9) + ); + --db-pink-on-bg-basic-emphasis-90-pressed: light-dark( + var(--db-pink-7), + var(--db-pink-8) + ); + --db-pink-on-bg-basic-emphasis-80-default: light-dark( + var(--db-pink-6), + var(--db-pink-9) + ); + --db-pink-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-pink-5), + var(--db-pink-8) + ); + --db-pink-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-pink-4), + var(--db-pink-7) + ); + --db-pink-on-bg-basic-emphasis-70-default: light-dark( var(--db-pink-7), var(--db-pink-8) ); - --db-pink-contrast-low-hover: light-dark( + --db-pink-on-bg-basic-emphasis-70-hovered: light-dark( var(--db-pink-6), var(--db-pink-7) ); - --db-pink-contrast-low-pressed: light-dark( + --db-pink-on-bg-basic-emphasis-70-pressed: light-dark( var(--db-pink-5), var(--db-pink-6) ); - --db-pink-border: light-dark(var(--db-pink-10), var(--db-pink-6)); - --db-violet-on-enabled: light-dark( - var(--db-violet-on-light), - var(--db-violet-on-dark) + --db-pink-on-bg-basic-emphasis-60-default: light-dark( + var(--db-pink-10), + var(--db-pink-6) + ); + --db-pink-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-pink-9), + var(--db-pink-5) + ); + --db-pink-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-pink-8), + var(--db-pink-4) + ); + --db-pink-on-bg-basic-emphasis-50-default: light-dark( + var(--db-pink-9), + var(--db-pink-5) ); - --db-violet-on-hover: light-dark( - var(--db-violet-on-hover-light), - var(--db-violet-on-hover-dark) + --db-pink-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-pink-8), + var(--db-pink-4) ); - --db-violet-on-pressed: light-dark( - var(--db-violet-on-pressed-light), - var(--db-violet-on-pressed-dark) + --db-pink-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-pink-7), + var(--db-pink-3) ); - --db-violet-origin-enabled: light-dark( - var(--db-violet-origin-light), - var(--db-violet-origin-dark) + --db-pink-bg-inverted-contrast-max-default: light-dark( + var(--db-pink-3), + var(--db-pink-12) ); - --db-violet-origin-hover: light-dark( - var(--db-violet-hover-light), - var(--db-violet-hover-dark) + --db-pink-bg-inverted-contrast-max-hovered: light-dark( + var(--db-pink-4), + var(--db-pink-11) + ); + --db-pink-bg-inverted-contrast-max-pressed: light-dark( + var(--db-pink-5), + var(--db-pink-10) + ); + --db-pink-bg-inverted-contrast-high-default: light-dark( + var(--db-pink-6), + var(--db-pink-9) + ); + --db-pink-bg-inverted-contrast-high-hovered: light-dark( + var(--db-pink-5), + var(--db-pink-8) + ); + --db-pink-bg-inverted-contrast-high-pressed: light-dark( + var(--db-pink-4), + var(--db-pink-7) + ); + --db-pink-bg-inverted-contrast-low-default: light-dark( + var(--db-pink-7), + var(--db-pink-8) + ); + --db-pink-bg-inverted-contrast-low-hovered: light-dark( + var(--db-pink-6), + var(--db-pink-7) + ); + --db-pink-bg-inverted-contrast-low-pressed: light-dark( + var(--db-pink-5), + var(--db-pink-6) + ); + --db-pink-on-bg-inverted-default: light-dark( + var(--db-pink-14), + var(--db-pink-3) + ); + --db-pink-on-bg-inverted-hovered: light-dark( + var(--db-pink-13), + var(--db-pink-4) + ); + --db-pink-on-bg-inverted-pressed: light-dark( + var(--db-pink-12), + var(--db-pink-5) + ); + --db-violet-origin-default: light-dark( + var(--db-violet-origin-light-default), + var(--db-violet-origin-dark-default) + ); + --db-violet-origin-hovered: light-dark( + var(--db-violet-origin-light-hovered), + var(--db-violet-origin-dark-hovered) ); --db-violet-origin-pressed: light-dark( - var(--db-violet-pressed-light), - var(--db-violet-pressed-dark) + var(--db-violet-origin-light-pressed), + var(--db-violet-origin-dark-pressed) + ); + --db-violet-on-origin-default: light-dark( + var(--db-violet-on-origin-light-default), + var(--db-violet-on-origin-dark-default) + ); + --db-violet-on-origin-hovered: light-dark( + var(--db-violet-on-origin-light-hovered), + var(--db-violet-on-origin-dark-hovered) ); - --db-violet-bg-lvl-1-enabled: light-dark( + --db-violet-on-origin-pressed: light-dark( + var(--db-violet-on-origin-light-pressed), + var(--db-violet-on-origin-dark-pressed) + ); + --db-violet-bg-basic-level-1-default: light-dark( var(--db-violet-14), var(--db-violet-3) ); - --db-violet-bg-lvl-1-hover: light-dark( + --db-violet-bg-basic-level-1-hovered: light-dark( var(--db-violet-13), var(--db-violet-4) ); - --db-violet-bg-lvl-1-pressed: light-dark( + --db-violet-bg-basic-level-1-pressed: light-dark( var(--db-violet-12), var(--db-violet-5) ); - --db-violet-bg-lvl-2-enabled: light-dark( + --db-violet-bg-basic-level-2-default: light-dark( var(--db-violet-13), var(--db-violet-2) ); - --db-violet-bg-lvl-2-hover: light-dark( + --db-violet-bg-basic-level-2-hovered: light-dark( var(--db-violet-12), var(--db-violet-3) ); - --db-violet-bg-lvl-2-pressed: light-dark( + --db-violet-bg-basic-level-2-pressed: light-dark( var(--db-violet-11), var(--db-violet-4) ); - --db-violet-bg-lvl-3-enabled: light-dark( + --db-violet-bg-basic-level-3-default: light-dark( var(--db-violet-12), var(--db-violet-1) ); - --db-violet-bg-lvl-3-hover: light-dark( + --db-violet-bg-basic-level-3-hovered: light-dark( var(--db-violet-11), var(--db-violet-2) ); - --db-violet-bg-lvl-3-pressed: light-dark( + --db-violet-bg-basic-level-3-pressed: light-dark( var(--db-violet-10), var(--db-violet-3) ); - --db-violet-bg-transparent-full-enabled: light-dark( + --db-violet-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-violet-6)), color-mix(in srgb, transparent 100%, var(--db-violet-9)) ); - --db-violet-bg-transparent-semi-enabled: light-dark( + --db-violet-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-violet-6)), color-mix(in srgb, transparent 84%, var(--db-violet-9)) ); - --db-violet-bg-transparent-hover: light-dark( + --db-violet-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-violet-6)), color-mix(in srgb, transparent 76%, var(--db-violet-9)) ); - --db-violet-bg-transparent-pressed: light-dark( + --db-violet-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-violet-6)), color-mix(in srgb, transparent 68%, var(--db-violet-9)) ); - --db-violet-on-bg-enabled: light-dark( + --db-violet-on-bg-basic-emphasis-100-default: light-dark( var(--db-violet-3), var(--db-violet-12) ); - --db-violet-on-bg-hover: light-dark( + --db-violet-on-bg-basic-emphasis-100-hovered: light-dark( var(--db-violet-4), var(--db-violet-11) ); - --db-violet-on-bg-pressed: light-dark( + --db-violet-on-bg-basic-emphasis-100-pressed: light-dark( var(--db-violet-5), var(--db-violet-10) ); - --db-violet-on-bg-weak-enabled: light-dark( + --db-violet-on-bg-basic-emphasis-90-default: light-dark( var(--db-violet-5), var(--db-violet-10) ); - --db-violet-on-bg-weak-hover: light-dark( + --db-violet-on-bg-basic-emphasis-90-hovered: light-dark( var(--db-violet-6), var(--db-violet-9) ); - --db-violet-on-bg-weak-pressed: light-dark( + --db-violet-on-bg-basic-emphasis-90-pressed: light-dark( var(--db-violet-7), var(--db-violet-8) ); - --db-violet-on-contrast-enabled: light-dark( - var(--db-violet-14), - var(--db-violet-3) + --db-violet-on-bg-basic-emphasis-80-default: light-dark( + var(--db-violet-6), + var(--db-violet-9) ); - --db-violet-on-contrast-hover: light-dark( - var(--db-violet-13), + --db-violet-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-violet-5), + var(--db-violet-8) + ); + --db-violet-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-violet-4), + var(--db-violet-7) + ); + --db-violet-on-bg-basic-emphasis-70-default: light-dark( + var(--db-violet-7), + var(--db-violet-8) + ); + --db-violet-on-bg-basic-emphasis-70-hovered: light-dark( + var(--db-violet-6), + var(--db-violet-7) + ); + --db-violet-on-bg-basic-emphasis-70-pressed: light-dark( + var(--db-violet-5), + var(--db-violet-6) + ); + --db-violet-on-bg-basic-emphasis-60-default: light-dark( + var(--db-violet-10), + var(--db-violet-6) + ); + --db-violet-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-violet-9), + var(--db-violet-5) + ); + --db-violet-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-violet-8), var(--db-violet-4) ); - --db-violet-on-contrast-pressed: light-dark( - var(--db-violet-12), + --db-violet-on-bg-basic-emphasis-50-default: light-dark( + var(--db-violet-9), var(--db-violet-5) ); - --db-violet-contrast-high-enabled: light-dark( + --db-violet-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-violet-8), + var(--db-violet-4) + ); + --db-violet-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-violet-7), + var(--db-violet-3) + ); + --db-violet-bg-inverted-contrast-max-default: light-dark( + var(--db-violet-3), + var(--db-violet-12) + ); + --db-violet-bg-inverted-contrast-max-hovered: light-dark( + var(--db-violet-4), + var(--db-violet-11) + ); + --db-violet-bg-inverted-contrast-max-pressed: light-dark( + var(--db-violet-5), + var(--db-violet-10) + ); + --db-violet-bg-inverted-contrast-high-default: light-dark( var(--db-violet-6), var(--db-violet-9) ); - --db-violet-contrast-high-hover: light-dark( + --db-violet-bg-inverted-contrast-high-hovered: light-dark( var(--db-violet-5), var(--db-violet-8) ); - --db-violet-contrast-high-pressed: light-dark( + --db-violet-bg-inverted-contrast-high-pressed: light-dark( var(--db-violet-4), var(--db-violet-7) ); - --db-violet-contrast-low-enabled: light-dark( + --db-violet-bg-inverted-contrast-low-default: light-dark( var(--db-violet-7), var(--db-violet-8) ); - --db-violet-contrast-low-hover: light-dark( + --db-violet-bg-inverted-contrast-low-hovered: light-dark( var(--db-violet-6), var(--db-violet-7) ); - --db-violet-contrast-low-pressed: light-dark( + --db-violet-bg-inverted-contrast-low-pressed: light-dark( var(--db-violet-5), var(--db-violet-6) ); - --db-violet-border: light-dark(var(--db-violet-10), var(--db-violet-6)); - --db-blue-on-enabled: light-dark( - var(--db-blue-on-light), - var(--db-blue-on-dark) + --db-violet-on-bg-inverted-default: light-dark( + var(--db-violet-14), + var(--db-violet-3) ); - --db-blue-on-hover: light-dark( - var(--db-blue-on-hover-light), - var(--db-blue-on-hover-dark) + --db-violet-on-bg-inverted-hovered: light-dark( + var(--db-violet-13), + var(--db-violet-4) ); - --db-blue-on-pressed: light-dark( - var(--db-blue-on-pressed-light), - var(--db-blue-on-pressed-dark) + --db-violet-on-bg-inverted-pressed: light-dark( + var(--db-violet-12), + var(--db-violet-5) ); - --db-blue-origin-enabled: light-dark( - var(--db-blue-origin-light), - var(--db-blue-origin-dark) + --db-blue-origin-default: light-dark( + var(--db-blue-origin-light-default), + var(--db-blue-origin-dark-default) ); - --db-blue-origin-hover: light-dark( - var(--db-blue-hover-light), - var(--db-blue-hover-dark) + --db-blue-origin-hovered: light-dark( + var(--db-blue-origin-light-hovered), + var(--db-blue-origin-dark-hovered) ); --db-blue-origin-pressed: light-dark( - var(--db-blue-pressed-light), - var(--db-blue-pressed-dark) - ); - --db-blue-bg-lvl-1-enabled: light-dark(var(--db-blue-14), var(--db-blue-3)); - --db-blue-bg-lvl-1-hover: light-dark(var(--db-blue-13), var(--db-blue-4)); - --db-blue-bg-lvl-1-pressed: light-dark(var(--db-blue-12), var(--db-blue-5)); - --db-blue-bg-lvl-2-enabled: light-dark(var(--db-blue-13), var(--db-blue-2)); - --db-blue-bg-lvl-2-hover: light-dark(var(--db-blue-12), var(--db-blue-3)); - --db-blue-bg-lvl-2-pressed: light-dark(var(--db-blue-11), var(--db-blue-4)); - --db-blue-bg-lvl-3-enabled: light-dark(var(--db-blue-12), var(--db-blue-1)); - --db-blue-bg-lvl-3-hover: light-dark(var(--db-blue-11), var(--db-blue-2)); - --db-blue-bg-lvl-3-pressed: light-dark(var(--db-blue-10), var(--db-blue-3)); - --db-blue-bg-transparent-full-enabled: light-dark( + var(--db-blue-origin-light-pressed), + var(--db-blue-origin-dark-pressed) + ); + --db-blue-on-origin-default: light-dark( + var(--db-blue-on-origin-light-default), + var(--db-blue-on-origin-dark-default) + ); + --db-blue-on-origin-hovered: light-dark( + var(--db-blue-on-origin-light-hovered), + var(--db-blue-on-origin-dark-hovered) + ); + --db-blue-on-origin-pressed: light-dark( + var(--db-blue-on-origin-light-pressed), + var(--db-blue-on-origin-dark-pressed) + ); + --db-blue-bg-basic-level-1-default: light-dark( + var(--db-blue-14), + var(--db-blue-3) + ); + --db-blue-bg-basic-level-1-hovered: light-dark( + var(--db-blue-13), + var(--db-blue-4) + ); + --db-blue-bg-basic-level-1-pressed: light-dark( + var(--db-blue-12), + var(--db-blue-5) + ); + --db-blue-bg-basic-level-2-default: light-dark( + var(--db-blue-13), + var(--db-blue-2) + ); + --db-blue-bg-basic-level-2-hovered: light-dark( + var(--db-blue-12), + var(--db-blue-3) + ); + --db-blue-bg-basic-level-2-pressed: light-dark( + var(--db-blue-11), + var(--db-blue-4) + ); + --db-blue-bg-basic-level-3-default: light-dark( + var(--db-blue-12), + var(--db-blue-1) + ); + --db-blue-bg-basic-level-3-hovered: light-dark( + var(--db-blue-11), + var(--db-blue-2) + ); + --db-blue-bg-basic-level-3-pressed: light-dark( + var(--db-blue-10), + var(--db-blue-3) + ); + --db-blue-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-blue-6)), color-mix(in srgb, transparent 100%, var(--db-blue-9)) ); - --db-blue-bg-transparent-semi-enabled: light-dark( + --db-blue-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-blue-6)), color-mix(in srgb, transparent 84%, var(--db-blue-9)) ); - --db-blue-bg-transparent-hover: light-dark( + --db-blue-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-blue-6)), color-mix(in srgb, transparent 76%, var(--db-blue-9)) ); - --db-blue-bg-transparent-pressed: light-dark( + --db-blue-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-blue-6)), color-mix(in srgb, transparent 68%, var(--db-blue-9)) ); - --db-blue-on-bg-enabled: light-dark(var(--db-blue-3), var(--db-blue-12)); - --db-blue-on-bg-hover: light-dark(var(--db-blue-4), var(--db-blue-11)); - --db-blue-on-bg-pressed: light-dark(var(--db-blue-5), var(--db-blue-10)); - --db-blue-on-bg-weak-enabled: light-dark( + --db-blue-on-bg-basic-emphasis-100-default: light-dark( + var(--db-blue-3), + var(--db-blue-12) + ); + --db-blue-on-bg-basic-emphasis-100-hovered: light-dark( + var(--db-blue-4), + var(--db-blue-11) + ); + --db-blue-on-bg-basic-emphasis-100-pressed: light-dark( var(--db-blue-5), var(--db-blue-10) ); - --db-blue-on-bg-weak-hover: light-dark(var(--db-blue-6), var(--db-blue-9)); - --db-blue-on-bg-weak-pressed: light-dark( + --db-blue-on-bg-basic-emphasis-90-default: light-dark( + var(--db-blue-5), + var(--db-blue-10) + ); + --db-blue-on-bg-basic-emphasis-90-hovered: light-dark( + var(--db-blue-6), + var(--db-blue-9) + ); + --db-blue-on-bg-basic-emphasis-90-pressed: light-dark( var(--db-blue-7), var(--db-blue-8) ); - --db-blue-on-contrast-enabled: light-dark( - var(--db-blue-14), - var(--db-blue-3) + --db-blue-on-bg-basic-emphasis-80-default: light-dark( + var(--db-blue-6), + var(--db-blue-9) ); - --db-blue-on-contrast-hover: light-dark( - var(--db-blue-13), + --db-blue-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-blue-5), + var(--db-blue-8) + ); + --db-blue-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-blue-4), + var(--db-blue-7) + ); + --db-blue-on-bg-basic-emphasis-70-default: light-dark( + var(--db-blue-7), + var(--db-blue-8) + ); + --db-blue-on-bg-basic-emphasis-70-hovered: light-dark( + var(--db-blue-6), + var(--db-blue-7) + ); + --db-blue-on-bg-basic-emphasis-70-pressed: light-dark( + var(--db-blue-5), + var(--db-blue-6) + ); + --db-blue-on-bg-basic-emphasis-60-default: light-dark( + var(--db-blue-10), + var(--db-blue-6) + ); + --db-blue-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-blue-9), + var(--db-blue-5) + ); + --db-blue-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-blue-8), var(--db-blue-4) ); - --db-blue-on-contrast-pressed: light-dark( - var(--db-blue-12), + --db-blue-on-bg-basic-emphasis-50-default: light-dark( + var(--db-blue-9), var(--db-blue-5) ); - --db-blue-contrast-high-enabled: light-dark( + --db-blue-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-blue-8), + var(--db-blue-4) + ); + --db-blue-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-blue-7), + var(--db-blue-3) + ); + --db-blue-bg-inverted-contrast-max-default: light-dark( + var(--db-blue-3), + var(--db-blue-12) + ); + --db-blue-bg-inverted-contrast-max-hovered: light-dark( + var(--db-blue-4), + var(--db-blue-11) + ); + --db-blue-bg-inverted-contrast-max-pressed: light-dark( + var(--db-blue-5), + var(--db-blue-10) + ); + --db-blue-bg-inverted-contrast-high-default: light-dark( var(--db-blue-6), var(--db-blue-9) ); - --db-blue-contrast-high-hover: light-dark( + --db-blue-bg-inverted-contrast-high-hovered: light-dark( var(--db-blue-5), var(--db-blue-8) ); - --db-blue-contrast-high-pressed: light-dark( + --db-blue-bg-inverted-contrast-high-pressed: light-dark( var(--db-blue-4), var(--db-blue-7) ); - --db-blue-contrast-low-enabled: light-dark( + --db-blue-bg-inverted-contrast-low-default: light-dark( var(--db-blue-7), var(--db-blue-8) ); - --db-blue-contrast-low-hover: light-dark( + --db-blue-bg-inverted-contrast-low-hovered: light-dark( var(--db-blue-6), var(--db-blue-7) ); - --db-blue-contrast-low-pressed: light-dark( + --db-blue-bg-inverted-contrast-low-pressed: light-dark( var(--db-blue-5), var(--db-blue-6) ); - --db-blue-border: light-dark(var(--db-blue-10), var(--db-blue-6)); - --db-cyan-on-enabled: light-dark( - var(--db-cyan-on-light), - var(--db-cyan-on-dark) + --db-blue-on-bg-inverted-default: light-dark( + var(--db-blue-14), + var(--db-blue-3) ); - --db-cyan-on-hover: light-dark( - var(--db-cyan-on-hover-light), - var(--db-cyan-on-hover-dark) + --db-blue-on-bg-inverted-hovered: light-dark( + var(--db-blue-13), + var(--db-blue-4) ); - --db-cyan-on-pressed: light-dark( - var(--db-cyan-on-pressed-light), - var(--db-cyan-on-pressed-dark) + --db-blue-on-bg-inverted-pressed: light-dark( + var(--db-blue-12), + var(--db-blue-5) ); - --db-cyan-origin-enabled: light-dark( - var(--db-cyan-origin-light), - var(--db-cyan-origin-dark) + --db-cyan-origin-default: light-dark( + var(--db-cyan-origin-light-default), + var(--db-cyan-origin-dark-default) ); - --db-cyan-origin-hover: light-dark( - var(--db-cyan-hover-light), - var(--db-cyan-hover-dark) + --db-cyan-origin-hovered: light-dark( + var(--db-cyan-origin-light-hovered), + var(--db-cyan-origin-dark-hovered) ); --db-cyan-origin-pressed: light-dark( - var(--db-cyan-pressed-light), - var(--db-cyan-pressed-dark) - ); - --db-cyan-bg-lvl-1-enabled: light-dark(var(--db-cyan-14), var(--db-cyan-3)); - --db-cyan-bg-lvl-1-hover: light-dark(var(--db-cyan-13), var(--db-cyan-4)); - --db-cyan-bg-lvl-1-pressed: light-dark(var(--db-cyan-12), var(--db-cyan-5)); - --db-cyan-bg-lvl-2-enabled: light-dark(var(--db-cyan-13), var(--db-cyan-2)); - --db-cyan-bg-lvl-2-hover: light-dark(var(--db-cyan-12), var(--db-cyan-3)); - --db-cyan-bg-lvl-2-pressed: light-dark(var(--db-cyan-11), var(--db-cyan-4)); - --db-cyan-bg-lvl-3-enabled: light-dark(var(--db-cyan-12), var(--db-cyan-1)); - --db-cyan-bg-lvl-3-hover: light-dark(var(--db-cyan-11), var(--db-cyan-2)); - --db-cyan-bg-lvl-3-pressed: light-dark(var(--db-cyan-10), var(--db-cyan-3)); - --db-cyan-bg-transparent-full-enabled: light-dark( + var(--db-cyan-origin-light-pressed), + var(--db-cyan-origin-dark-pressed) + ); + --db-cyan-on-origin-default: light-dark( + var(--db-cyan-on-origin-light-default), + var(--db-cyan-on-origin-dark-default) + ); + --db-cyan-on-origin-hovered: light-dark( + var(--db-cyan-on-origin-light-hovered), + var(--db-cyan-on-origin-dark-hovered) + ); + --db-cyan-on-origin-pressed: light-dark( + var(--db-cyan-on-origin-light-pressed), + var(--db-cyan-on-origin-dark-pressed) + ); + --db-cyan-bg-basic-level-1-default: light-dark( + var(--db-cyan-14), + var(--db-cyan-3) + ); + --db-cyan-bg-basic-level-1-hovered: light-dark( + var(--db-cyan-13), + var(--db-cyan-4) + ); + --db-cyan-bg-basic-level-1-pressed: light-dark( + var(--db-cyan-12), + var(--db-cyan-5) + ); + --db-cyan-bg-basic-level-2-default: light-dark( + var(--db-cyan-13), + var(--db-cyan-2) + ); + --db-cyan-bg-basic-level-2-hovered: light-dark( + var(--db-cyan-12), + var(--db-cyan-3) + ); + --db-cyan-bg-basic-level-2-pressed: light-dark( + var(--db-cyan-11), + var(--db-cyan-4) + ); + --db-cyan-bg-basic-level-3-default: light-dark( + var(--db-cyan-12), + var(--db-cyan-1) + ); + --db-cyan-bg-basic-level-3-hovered: light-dark( + var(--db-cyan-11), + var(--db-cyan-2) + ); + --db-cyan-bg-basic-level-3-pressed: light-dark( + var(--db-cyan-10), + var(--db-cyan-3) + ); + --db-cyan-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-cyan-6)), color-mix(in srgb, transparent 100%, var(--db-cyan-9)) ); - --db-cyan-bg-transparent-semi-enabled: light-dark( + --db-cyan-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-cyan-6)), color-mix(in srgb, transparent 84%, var(--db-cyan-9)) ); - --db-cyan-bg-transparent-hover: light-dark( + --db-cyan-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-cyan-6)), color-mix(in srgb, transparent 76%, var(--db-cyan-9)) ); - --db-cyan-bg-transparent-pressed: light-dark( + --db-cyan-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-cyan-6)), color-mix(in srgb, transparent 68%, var(--db-cyan-9)) ); - --db-cyan-on-bg-enabled: light-dark(var(--db-cyan-3), var(--db-cyan-12)); - --db-cyan-on-bg-hover: light-dark(var(--db-cyan-4), var(--db-cyan-11)); - --db-cyan-on-bg-pressed: light-dark(var(--db-cyan-5), var(--db-cyan-10)); - --db-cyan-on-bg-weak-enabled: light-dark( + --db-cyan-on-bg-basic-emphasis-100-default: light-dark( + var(--db-cyan-3), + var(--db-cyan-12) + ); + --db-cyan-on-bg-basic-emphasis-100-hovered: light-dark( + var(--db-cyan-4), + var(--db-cyan-11) + ); + --db-cyan-on-bg-basic-emphasis-100-pressed: light-dark( var(--db-cyan-5), var(--db-cyan-10) ); - --db-cyan-on-bg-weak-hover: light-dark(var(--db-cyan-6), var(--db-cyan-9)); - --db-cyan-on-bg-weak-pressed: light-dark( + --db-cyan-on-bg-basic-emphasis-90-default: light-dark( + var(--db-cyan-5), + var(--db-cyan-10) + ); + --db-cyan-on-bg-basic-emphasis-90-hovered: light-dark( + var(--db-cyan-6), + var(--db-cyan-9) + ); + --db-cyan-on-bg-basic-emphasis-90-pressed: light-dark( var(--db-cyan-7), var(--db-cyan-8) ); - --db-cyan-on-contrast-enabled: light-dark( - var(--db-cyan-14), - var(--db-cyan-3) + --db-cyan-on-bg-basic-emphasis-80-default: light-dark( + var(--db-cyan-6), + var(--db-cyan-9) ); - --db-cyan-on-contrast-hover: light-dark( - var(--db-cyan-13), + --db-cyan-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-cyan-5), + var(--db-cyan-8) + ); + --db-cyan-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-cyan-4), + var(--db-cyan-7) + ); + --db-cyan-on-bg-basic-emphasis-70-default: light-dark( + var(--db-cyan-7), + var(--db-cyan-8) + ); + --db-cyan-on-bg-basic-emphasis-70-hovered: light-dark( + var(--db-cyan-6), + var(--db-cyan-7) + ); + --db-cyan-on-bg-basic-emphasis-70-pressed: light-dark( + var(--db-cyan-5), + var(--db-cyan-6) + ); + --db-cyan-on-bg-basic-emphasis-60-default: light-dark( + var(--db-cyan-10), + var(--db-cyan-6) + ); + --db-cyan-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-cyan-9), + var(--db-cyan-5) + ); + --db-cyan-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-cyan-8), var(--db-cyan-4) ); - --db-cyan-on-contrast-pressed: light-dark( - var(--db-cyan-12), + --db-cyan-on-bg-basic-emphasis-50-default: light-dark( + var(--db-cyan-9), var(--db-cyan-5) ); - --db-cyan-contrast-high-enabled: light-dark( + --db-cyan-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-cyan-8), + var(--db-cyan-4) + ); + --db-cyan-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-cyan-7), + var(--db-cyan-3) + ); + --db-cyan-bg-inverted-contrast-max-default: light-dark( + var(--db-cyan-3), + var(--db-cyan-12) + ); + --db-cyan-bg-inverted-contrast-max-hovered: light-dark( + var(--db-cyan-4), + var(--db-cyan-11) + ); + --db-cyan-bg-inverted-contrast-max-pressed: light-dark( + var(--db-cyan-5), + var(--db-cyan-10) + ); + --db-cyan-bg-inverted-contrast-high-default: light-dark( var(--db-cyan-6), var(--db-cyan-9) ); - --db-cyan-contrast-high-hover: light-dark( + --db-cyan-bg-inverted-contrast-high-hovered: light-dark( var(--db-cyan-5), var(--db-cyan-8) ); - --db-cyan-contrast-high-pressed: light-dark( + --db-cyan-bg-inverted-contrast-high-pressed: light-dark( var(--db-cyan-4), var(--db-cyan-7) ); - --db-cyan-contrast-low-enabled: light-dark( + --db-cyan-bg-inverted-contrast-low-default: light-dark( var(--db-cyan-7), var(--db-cyan-8) ); - --db-cyan-contrast-low-hover: light-dark( + --db-cyan-bg-inverted-contrast-low-hovered: light-dark( var(--db-cyan-6), var(--db-cyan-7) ); - --db-cyan-contrast-low-pressed: light-dark( + --db-cyan-bg-inverted-contrast-low-pressed: light-dark( var(--db-cyan-5), var(--db-cyan-6) ); - --db-cyan-border: light-dark(var(--db-cyan-10), var(--db-cyan-6)); - --db-turquoise-on-enabled: light-dark( - var(--db-turquoise-on-light), - var(--db-turquoise-on-dark) + --db-cyan-on-bg-inverted-default: light-dark( + var(--db-cyan-14), + var(--db-cyan-3) ); - --db-turquoise-on-hover: light-dark( - var(--db-turquoise-on-hover-light), - var(--db-turquoise-on-hover-dark) + --db-cyan-on-bg-inverted-hovered: light-dark( + var(--db-cyan-13), + var(--db-cyan-4) ); - --db-turquoise-on-pressed: light-dark( - var(--db-turquoise-on-pressed-light), - var(--db-turquoise-on-pressed-dark) + --db-cyan-on-bg-inverted-pressed: light-dark( + var(--db-cyan-12), + var(--db-cyan-5) ); - --db-turquoise-origin-enabled: light-dark( - var(--db-turquoise-origin-light), - var(--db-turquoise-origin-dark) + --db-turquoise-origin-default: light-dark( + var(--db-turquoise-origin-light-default), + var(--db-turquoise-origin-dark-default) ); - --db-turquoise-origin-hover: light-dark( - var(--db-turquoise-hover-light), - var(--db-turquoise-hover-dark) + --db-turquoise-origin-hovered: light-dark( + var(--db-turquoise-origin-light-hovered), + var(--db-turquoise-origin-dark-hovered) ); --db-turquoise-origin-pressed: light-dark( - var(--db-turquoise-pressed-light), - var(--db-turquoise-pressed-dark) + var(--db-turquoise-origin-light-pressed), + var(--db-turquoise-origin-dark-pressed) + ); + --db-turquoise-on-origin-default: light-dark( + var(--db-turquoise-on-origin-light-default), + var(--db-turquoise-on-origin-dark-default) + ); + --db-turquoise-on-origin-hovered: light-dark( + var(--db-turquoise-on-origin-light-hovered), + var(--db-turquoise-on-origin-dark-hovered) + ); + --db-turquoise-on-origin-pressed: light-dark( + var(--db-turquoise-on-origin-light-pressed), + var(--db-turquoise-on-origin-dark-pressed) ); - --db-turquoise-bg-lvl-1-enabled: light-dark( + --db-turquoise-bg-basic-level-1-default: light-dark( var(--db-turquoise-14), var(--db-turquoise-3) ); - --db-turquoise-bg-lvl-1-hover: light-dark( + --db-turquoise-bg-basic-level-1-hovered: light-dark( var(--db-turquoise-13), var(--db-turquoise-4) ); - --db-turquoise-bg-lvl-1-pressed: light-dark( + --db-turquoise-bg-basic-level-1-pressed: light-dark( var(--db-turquoise-12), var(--db-turquoise-5) ); - --db-turquoise-bg-lvl-2-enabled: light-dark( + --db-turquoise-bg-basic-level-2-default: light-dark( var(--db-turquoise-13), var(--db-turquoise-2) ); - --db-turquoise-bg-lvl-2-hover: light-dark( + --db-turquoise-bg-basic-level-2-hovered: light-dark( var(--db-turquoise-12), var(--db-turquoise-3) ); - --db-turquoise-bg-lvl-2-pressed: light-dark( + --db-turquoise-bg-basic-level-2-pressed: light-dark( var(--db-turquoise-11), var(--db-turquoise-4) ); - --db-turquoise-bg-lvl-3-enabled: light-dark( + --db-turquoise-bg-basic-level-3-default: light-dark( var(--db-turquoise-12), var(--db-turquoise-1) ); - --db-turquoise-bg-lvl-3-hover: light-dark( + --db-turquoise-bg-basic-level-3-hovered: light-dark( var(--db-turquoise-11), var(--db-turquoise-2) ); - --db-turquoise-bg-lvl-3-pressed: light-dark( + --db-turquoise-bg-basic-level-3-pressed: light-dark( var(--db-turquoise-10), var(--db-turquoise-3) ); - --db-turquoise-bg-transparent-full-enabled: light-dark( + --db-turquoise-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-turquoise-6)), color-mix(in srgb, transparent 100%, var(--db-turquoise-9)) ); - --db-turquoise-bg-transparent-semi-enabled: light-dark( + --db-turquoise-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-turquoise-6)), color-mix(in srgb, transparent 84%, var(--db-turquoise-9)) ); - --db-turquoise-bg-transparent-hover: light-dark( + --db-turquoise-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-turquoise-6)), color-mix(in srgb, transparent 76%, var(--db-turquoise-9)) ); - --db-turquoise-bg-transparent-pressed: light-dark( + --db-turquoise-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-turquoise-6)), color-mix(in srgb, transparent 68%, var(--db-turquoise-9)) ); - --db-turquoise-on-bg-enabled: light-dark( + --db-turquoise-on-bg-basic-emphasis-100-default: light-dark( var(--db-turquoise-3), var(--db-turquoise-12) ); - --db-turquoise-on-bg-hover: light-dark( + --db-turquoise-on-bg-basic-emphasis-100-hovered: light-dark( var(--db-turquoise-4), var(--db-turquoise-11) ); - --db-turquoise-on-bg-pressed: light-dark( + --db-turquoise-on-bg-basic-emphasis-100-pressed: light-dark( var(--db-turquoise-5), var(--db-turquoise-10) ); - --db-turquoise-on-bg-weak-enabled: light-dark( + --db-turquoise-on-bg-basic-emphasis-90-default: light-dark( var(--db-turquoise-5), var(--db-turquoise-10) ); - --db-turquoise-on-bg-weak-hover: light-dark( + --db-turquoise-on-bg-basic-emphasis-90-hovered: light-dark( var(--db-turquoise-6), var(--db-turquoise-9) ); - --db-turquoise-on-bg-weak-pressed: light-dark( + --db-turquoise-on-bg-basic-emphasis-90-pressed: light-dark( var(--db-turquoise-7), var(--db-turquoise-8) ); - --db-turquoise-on-contrast-enabled: light-dark( - var(--db-turquoise-14), - var(--db-turquoise-3) + --db-turquoise-on-bg-basic-emphasis-80-default: light-dark( + var(--db-turquoise-6), + var(--db-turquoise-9) ); - --db-turquoise-on-contrast-hover: light-dark( - var(--db-turquoise-13), + --db-turquoise-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-turquoise-5), + var(--db-turquoise-8) + ); + --db-turquoise-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-turquoise-4), + var(--db-turquoise-7) + ); + --db-turquoise-on-bg-basic-emphasis-70-default: light-dark( + var(--db-turquoise-7), + var(--db-turquoise-8) + ); + --db-turquoise-on-bg-basic-emphasis-70-hovered: light-dark( + var(--db-turquoise-6), + var(--db-turquoise-7) + ); + --db-turquoise-on-bg-basic-emphasis-70-pressed: light-dark( + var(--db-turquoise-5), + var(--db-turquoise-6) + ); + --db-turquoise-on-bg-basic-emphasis-60-default: light-dark( + var(--db-turquoise-10), + var(--db-turquoise-6) + ); + --db-turquoise-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-turquoise-9), + var(--db-turquoise-5) + ); + --db-turquoise-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-turquoise-8), var(--db-turquoise-4) ); - --db-turquoise-on-contrast-pressed: light-dark( - var(--db-turquoise-12), + --db-turquoise-on-bg-basic-emphasis-50-default: light-dark( + var(--db-turquoise-9), var(--db-turquoise-5) ); - --db-turquoise-contrast-high-enabled: light-dark( + --db-turquoise-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-turquoise-8), + var(--db-turquoise-4) + ); + --db-turquoise-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-turquoise-7), + var(--db-turquoise-3) + ); + --db-turquoise-bg-inverted-contrast-max-default: light-dark( + var(--db-turquoise-3), + var(--db-turquoise-12) + ); + --db-turquoise-bg-inverted-contrast-max-hovered: light-dark( + var(--db-turquoise-4), + var(--db-turquoise-11) + ); + --db-turquoise-bg-inverted-contrast-max-pressed: light-dark( + var(--db-turquoise-5), + var(--db-turquoise-10) + ); + --db-turquoise-bg-inverted-contrast-high-default: light-dark( var(--db-turquoise-6), var(--db-turquoise-9) ); - --db-turquoise-contrast-high-hover: light-dark( + --db-turquoise-bg-inverted-contrast-high-hovered: light-dark( var(--db-turquoise-5), var(--db-turquoise-8) ); - --db-turquoise-contrast-high-pressed: light-dark( + --db-turquoise-bg-inverted-contrast-high-pressed: light-dark( var(--db-turquoise-4), var(--db-turquoise-7) ); - --db-turquoise-contrast-low-enabled: light-dark( + --db-turquoise-bg-inverted-contrast-low-default: light-dark( var(--db-turquoise-7), var(--db-turquoise-8) ); - --db-turquoise-contrast-low-hover: light-dark( + --db-turquoise-bg-inverted-contrast-low-hovered: light-dark( var(--db-turquoise-6), var(--db-turquoise-7) ); - --db-turquoise-contrast-low-pressed: light-dark( + --db-turquoise-bg-inverted-contrast-low-pressed: light-dark( var(--db-turquoise-5), var(--db-turquoise-6) ); - --db-turquoise-border: light-dark( - var(--db-turquoise-10), - var(--db-turquoise-6) - ); - --db-green-on-enabled: light-dark( - var(--db-green-on-light), - var(--db-green-on-dark) + --db-turquoise-on-bg-inverted-default: light-dark( + var(--db-turquoise-14), + var(--db-turquoise-3) ); - --db-green-on-hover: light-dark( - var(--db-green-on-hover-light), - var(--db-green-on-hover-dark) + --db-turquoise-on-bg-inverted-hovered: light-dark( + var(--db-turquoise-13), + var(--db-turquoise-4) ); - --db-green-on-pressed: light-dark( - var(--db-green-on-pressed-light), - var(--db-green-on-pressed-dark) + --db-turquoise-on-bg-inverted-pressed: light-dark( + var(--db-turquoise-12), + var(--db-turquoise-5) ); - --db-green-origin-enabled: light-dark( - var(--db-green-origin-light), - var(--db-green-origin-dark) + --db-green-origin-default: light-dark( + var(--db-green-origin-light-default), + var(--db-green-origin-dark-default) ); - --db-green-origin-hover: light-dark( - var(--db-green-hover-light), - var(--db-green-hover-dark) + --db-green-origin-hovered: light-dark( + var(--db-green-origin-light-hovered), + var(--db-green-origin-dark-hovered) ); --db-green-origin-pressed: light-dark( - var(--db-green-pressed-light), - var(--db-green-pressed-dark) + var(--db-green-origin-light-pressed), + var(--db-green-origin-dark-pressed) + ); + --db-green-on-origin-default: light-dark( + var(--db-green-on-origin-light-default), + var(--db-green-on-origin-dark-default) ); - --db-green-bg-lvl-1-enabled: light-dark( + --db-green-on-origin-hovered: light-dark( + var(--db-green-on-origin-light-hovered), + var(--db-green-on-origin-dark-hovered) + ); + --db-green-on-origin-pressed: light-dark( + var(--db-green-on-origin-light-pressed), + var(--db-green-on-origin-dark-pressed) + ); + --db-green-bg-basic-level-1-default: light-dark( var(--db-green-14), var(--db-green-3) ); - --db-green-bg-lvl-1-hover: light-dark( + --db-green-bg-basic-level-1-hovered: light-dark( var(--db-green-13), var(--db-green-4) ); - --db-green-bg-lvl-1-pressed: light-dark( + --db-green-bg-basic-level-1-pressed: light-dark( var(--db-green-12), var(--db-green-5) ); - --db-green-bg-lvl-2-enabled: light-dark( + --db-green-bg-basic-level-2-default: light-dark( var(--db-green-13), var(--db-green-2) ); - --db-green-bg-lvl-2-hover: light-dark( + --db-green-bg-basic-level-2-hovered: light-dark( var(--db-green-12), var(--db-green-3) ); - --db-green-bg-lvl-2-pressed: light-dark( + --db-green-bg-basic-level-2-pressed: light-dark( var(--db-green-11), var(--db-green-4) ); - --db-green-bg-lvl-3-enabled: light-dark( + --db-green-bg-basic-level-3-default: light-dark( var(--db-green-12), var(--db-green-1) ); - --db-green-bg-lvl-3-hover: light-dark( + --db-green-bg-basic-level-3-hovered: light-dark( var(--db-green-11), var(--db-green-2) ); - --db-green-bg-lvl-3-pressed: light-dark( + --db-green-bg-basic-level-3-pressed: light-dark( var(--db-green-10), var(--db-green-3) ); - --db-green-bg-transparent-full-enabled: light-dark( + --db-green-bg-basic-transparent-full-default: light-dark( color-mix(in srgb, transparent 100%, var(--db-green-6)), color-mix(in srgb, transparent 100%, var(--db-green-9)) ); - --db-green-bg-transparent-semi-enabled: light-dark( + --db-green-bg-basic-transparent-semi-default: light-dark( color-mix(in srgb, transparent 92%, var(--db-green-6)), color-mix(in srgb, transparent 84%, var(--db-green-9)) ); - --db-green-bg-transparent-hover: light-dark( + --db-green-bg-basic-transparent-hovered: light-dark( color-mix(in srgb, transparent 84%, var(--db-green-6)), color-mix(in srgb, transparent 76%, var(--db-green-9)) ); - --db-green-bg-transparent-pressed: light-dark( + --db-green-bg-basic-transparent-pressed: light-dark( color-mix(in srgb, transparent 76%, var(--db-green-6)), color-mix(in srgb, transparent 68%, var(--db-green-9)) ); - --db-green-on-bg-enabled: light-dark(var(--db-green-3), var(--db-green-12)); - --db-green-on-bg-hover: light-dark(var(--db-green-4), var(--db-green-11)); - --db-green-on-bg-pressed: light-dark(var(--db-green-5), var(--db-green-10)); - --db-green-on-bg-weak-enabled: light-dark( + --db-green-on-bg-basic-emphasis-100-default: light-dark( + var(--db-green-3), + var(--db-green-12) + ); + --db-green-on-bg-basic-emphasis-100-hovered: light-dark( + var(--db-green-4), + var(--db-green-11) + ); + --db-green-on-bg-basic-emphasis-100-pressed: light-dark( + var(--db-green-5), + var(--db-green-10) + ); + --db-green-on-bg-basic-emphasis-90-default: light-dark( var(--db-green-5), var(--db-green-10) ); - --db-green-on-bg-weak-hover: light-dark( + --db-green-on-bg-basic-emphasis-90-hovered: light-dark( var(--db-green-6), var(--db-green-9) ); - --db-green-on-bg-weak-pressed: light-dark( + --db-green-on-bg-basic-emphasis-90-pressed: light-dark( var(--db-green-7), var(--db-green-8) ); - --db-green-on-contrast-enabled: light-dark( - var(--db-green-14), - var(--db-green-3) + --db-green-on-bg-basic-emphasis-80-default: light-dark( + var(--db-green-6), + var(--db-green-9) ); - --db-green-on-contrast-hover: light-dark( - var(--db-green-13), + --db-green-on-bg-basic-emphasis-80-hovered: light-dark( + var(--db-green-5), + var(--db-green-8) + ); + --db-green-on-bg-basic-emphasis-80-pressed: light-dark( + var(--db-green-4), + var(--db-green-7) + ); + --db-green-on-bg-basic-emphasis-70-default: light-dark( + var(--db-green-7), + var(--db-green-8) + ); + --db-green-on-bg-basic-emphasis-70-hovered: light-dark( + var(--db-green-6), + var(--db-green-7) + ); + --db-green-on-bg-basic-emphasis-70-pressed: light-dark( + var(--db-green-5), + var(--db-green-6) + ); + --db-green-on-bg-basic-emphasis-60-default: light-dark( + var(--db-green-10), + var(--db-green-6) + ); + --db-green-on-bg-basic-emphasis-60-hovered: light-dark( + var(--db-green-9), + var(--db-green-5) + ); + --db-green-on-bg-basic-emphasis-60-pressed: light-dark( + var(--db-green-8), var(--db-green-4) ); - --db-green-on-contrast-pressed: light-dark( - var(--db-green-12), + --db-green-on-bg-basic-emphasis-50-default: light-dark( + var(--db-green-9), var(--db-green-5) ); - --db-green-contrast-high-enabled: light-dark( + --db-green-on-bg-basic-emphasis-50-hovered: light-dark( + var(--db-green-8), + var(--db-green-4) + ); + --db-green-on-bg-basic-emphasis-50-pressed: light-dark( + var(--db-green-7), + var(--db-green-3) + ); + --db-green-bg-inverted-contrast-max-default: light-dark( + var(--db-green-3), + var(--db-green-12) + ); + --db-green-bg-inverted-contrast-max-hovered: light-dark( + var(--db-green-4), + var(--db-green-11) + ); + --db-green-bg-inverted-contrast-max-pressed: light-dark( + var(--db-green-5), + var(--db-green-10) + ); + --db-green-bg-inverted-contrast-high-default: light-dark( var(--db-green-6), var(--db-green-9) ); - --db-green-contrast-high-hover: light-dark( + --db-green-bg-inverted-contrast-high-hovered: light-dark( var(--db-green-5), var(--db-green-8) ); - --db-green-contrast-high-pressed: light-dark( + --db-green-bg-inverted-contrast-high-pressed: light-dark( var(--db-green-4), var(--db-green-7) ); - --db-green-contrast-low-enabled: light-dark( + --db-green-bg-inverted-contrast-low-default: light-dark( var(--db-green-7), var(--db-green-8) ); - --db-green-contrast-low-hover: light-dark( + --db-green-bg-inverted-contrast-low-hovered: light-dark( var(--db-green-6), var(--db-green-7) ); - --db-green-contrast-low-pressed: light-dark( + --db-green-bg-inverted-contrast-low-pressed: light-dark( var(--db-green-5), var(--db-green-6) ); - --db-green-border: light-dark(var(--db-green-10), var(--db-green-6)); + --db-green-on-bg-inverted-default: light-dark( + var(--db-green-14), + var(--db-green-3) + ); + --db-green-on-bg-inverted-hovered: light-dark( + var(--db-green-13), + var(--db-green-4) + ); + --db-green-on-bg-inverted-pressed: light-dark( + var(--db-green-12), + var(--db-green-5) + ); } diff --git a/packages/foundations/scss/colors/_default-palette.scss b/packages/foundations/scss/colors/_default-palette.scss index 3b02410de1c..e80d6eb9a16 100644 --- a/packages/foundations/scss/colors/_default-palette.scss +++ b/packages/foundations/scss/colors/_default-palette.scss @@ -1,19 +1,32 @@ @mixin get-color-palette { - --db-neutral-0: #070708; - --db-neutral-1: #0d0e10; - --db-neutral-2: #121315; - --db-neutral-3: #1a1c1e; - --db-neutral-4: #2e3134; - --db-neutral-5: #44474c; - --db-neutral-6: #5a5f65; - --db-neutral-7: #72777f; - --db-neutral-8: #8b919a; - --db-neutral-9: #a6acb4; - --db-neutral-10: #c3c7cc; - --db-neutral-11: #e1e3e5; + --db-neutral-0: #070709; + --db-neutral-1: #0d0e11; + --db-neutral-2: #121316; + --db-neutral-3: #1a1c1f; + --db-neutral-4: #2e3036; + --db-neutral-5: #43474e; + --db-neutral-6: #5a5e68; + --db-neutral-7: #727782; + --db-neutral-8: #8a919e; + --db-neutral-9: #a6abb6; + --db-neutral-10: #c3c7ce; + --db-neutral-11: #e1e2e6; --db-neutral-12: #edeef0; - --db-neutral-13: #f3f4f5; + --db-neutral-13: #f3f3f5; --db-neutral-14: #fff; + --db-neutral-origin: #646973; + --db-neutral-origin-light-default: #646973; + --db-neutral-origin-light-hovered: #4d5159; + --db-neutral-origin-light-pressed: #373a40; + --db-neutral-on-origin-light-default: #f9f9fa; + --db-neutral-on-origin-light-hovered: #dcdce2; + --db-neutral-on-origin-light-pressed: #c0c0cb; + --db-neutral-origin-dark-default: #646973; + --db-neutral-origin-dark-hovered: #7c828e; + --db-neutral-origin-dark-pressed: #969ca9; + --db-neutral-on-origin-dark-default: #f9f9fa; + --db-neutral-on-origin-dark-hovered: #dcdce2; + --db-neutral-on-origin-dark-pressed: #c0c0cb; --db-brand-0: #1a0000; --db-brand-1: #280001; --db-brand-2: #310001; @@ -29,18 +42,19 @@ --db-brand-12: #ffe9e9; --db-brand-13: #fff0f0; --db-brand-14: #fff8f8; - --db-brand-on-pressed-light: #edeef0; - --db-brand-on-hover-light: #f3f4f5; - --db-brand-on-light: #fff; - --db-brand-origin-light: #ec0016; - --db-brand-hover-light: #c00010; - --db-brand-pressed-light: #930009; - --db-brand-on-pressed-dark: #edeef0; - --db-brand-on-hover-dark: #f3f4f5; - --db-brand-on-dark: #fff; - --db-brand-origin-dark: #ec0016; - --db-brand-hover-dark: #ff5357; - --db-brand-pressed-dark: #ff888a; + --db-brand-origin: #ec0016; + --db-brand-origin-light-default: #ec0016; + --db-brand-origin-light-hovered: #bd000f; + --db-brand-origin-light-pressed: #900009; + --db-brand-on-origin-light-default: #fff; + --db-brand-on-origin-light-hovered: #ffdada; + --db-brand-on-origin-light-pressed: #ffb3b4; + --db-brand-origin-dark-default: #ec0016; + --db-brand-origin-dark-hovered: #ff4f53; + --db-brand-origin-dark-pressed: #ff8587; + --db-brand-on-origin-dark-default: #fff; + --db-brand-on-origin-dark-hovered: #ffdada; + --db-brand-on-origin-dark-pressed: #ffb3b4; --db-informational-0: #01080f; --db-informational-1: #011018; --db-informational-2: #021520; @@ -56,6 +70,19 @@ --db-informational-12: #e0f0fe; --db-informational-13: #ebf5fe; --db-informational-14: #f5faff; + --db-informational-origin: #309fd1; + --db-informational-origin-light-default: #309fd1; + --db-informational-origin-light-hovered: #2684ae; + --db-informational-origin-light-pressed: #1d698c; + --db-informational-on-origin-light-default: #01080f; + --db-informational-on-origin-light-hovered: #072231; + --db-informational-on-origin-light-pressed: #0f384f; + --db-informational-origin-dark-default: #309fd1; + --db-informational-origin-dark-hovered: #3abbf5; + --db-informational-origin-dark-pressed: #96d2fb; + --db-informational-on-origin-dark-default: #01080f; + --db-informational-on-origin-dark-hovered: #072231; + --db-informational-on-origin-dark-pressed: #0f384f; --db-warning-0: #100500; --db-warning-1: #190b00; --db-warning-2: #210f00; @@ -71,6 +98,19 @@ --db-warning-12: #ffeadf; --db-warning-13: #fff1ea; --db-warning-14: #fff8f5; + --db-warning-origin: #f39200; + --db-warning-origin-light-default: #f39200; + --db-warning-origin-light-hovered: #ce7b00; + --db-warning-origin-light-pressed: #aa6500; + --db-warning-on-origin-light-default: #100500; + --db-warning-on-origin-light-hovered: #331900; + --db-warning-on-origin-light-pressed: #512b00; + --db-warning-origin-dark-default: #f39200; + --db-warning-origin-dark-hovered: #ffb47b; + --db-warning-origin-dark-pressed: #ffd9c3; + --db-warning-on-origin-dark-default: #100500; + --db-warning-on-origin-dark-hovered: #331900; + --db-warning-on-origin-dark-pressed: #512b00; --db-successful-0: #030900; --db-successful-1: #061100; --db-successful-2: #091701; @@ -86,6 +126,19 @@ --db-successful-12: #c3ff9d; --db-successful-13: #d9ffc4; --db-successful-14: #edffe4; + --db-successful-origin: #63a615; + --db-successful-origin-light-default: #63a615; + --db-successful-origin-light-hovered: #51890f; + --db-successful-origin-light-pressed: #406e0a; + --db-successful-on-origin-light-default: #030900; + --db-successful-on-origin-light-hovered: #122400; + --db-successful-on-origin-light-pressed: #213c00; + --db-successful-origin-dark-default: #63a615; + --db-successful-origin-dark-hovered: #75c31b; + --db-successful-origin-dark-pressed: #88e221; + --db-successful-on-origin-dark-default: #030900; + --db-successful-on-origin-dark-hovered: #122400; + --db-successful-on-origin-dark-pressed: #213c00; --db-critical-0: #1a0000; --db-critical-1: #280001; --db-critical-2: #310001; @@ -101,6 +154,19 @@ --db-critical-12: #ffe9e9; --db-critical-13: #fff0f0; --db-critical-14: #fff8f8; + --db-critical-origin: #ec0016; + --db-critical-origin-light-default: #ec0016; + --db-critical-origin-light-hovered: #bd000f; + --db-critical-origin-light-pressed: #900009; + --db-critical-on-origin-light-default: #fff; + --db-critical-on-origin-light-hovered: #ffdada; + --db-critical-on-origin-light-pressed: #ffb3b4; + --db-critical-origin-dark-default: #ec0016; + --db-critical-origin-dark-hovered: #ff4f53; + --db-critical-origin-dark-pressed: #ff8587; + --db-critical-on-origin-dark-default: #fff; + --db-critical-on-origin-dark-hovered: #ffdada; + --db-critical-on-origin-dark-pressed: #ffb3b4; } @mixin get-additional-color-palette { @@ -119,18 +185,19 @@ --db-yellow-12: #ffedbc; --db-yellow-13: #fff3d5; --db-yellow-14: #fff9eb; - --db-yellow-on-pressed-light: #221b00; - --db-yellow-on-hover-light: #191300; - --db-yellow-on-light: #000; - --db-yellow-origin-light: #aa8f00; - --db-yellow-hover-light: #8c7500; - --db-yellow-pressed-light: #6f5d00; - --db-yellow-on-pressed-dark: #221b00; - --db-yellow-on-hover-dark: #191300; - --db-yellow-on-dark: #000; - --db-yellow-origin-dark: #ffd800; - --db-yellow-hover-dark: #ffedbc; - --db-yellow-pressed-dark: #fff3d5; + --db-yellow-origin: #ffd800; + --db-yellow-origin-light-default: #ffd800; + --db-yellow-origin-light-hovered: #dfbc00; + --db-yellow-origin-light-pressed: #bfa200; + --db-yellow-on-origin-light-default: #0a0700; + --db-yellow-on-origin-light-hovered: #261f00; + --db-yellow-on-origin-light-pressed: #3f3400; + --db-yellow-origin-dark-default: #ffd800; + --db-yellow-origin-dark-hovered: #dfbc00; + --db-yellow-origin-dark-pressed: #bfa200; + --db-yellow-on-origin-dark-default: #0a0700; + --db-yellow-on-origin-dark-hovered: #261f00; + --db-yellow-on-origin-dark-pressed: #3f3400; --db-orange-0: #100500; --db-orange-1: #190b00; --db-orange-2: #210f00; @@ -146,18 +213,19 @@ --db-orange-12: #ffeadf; --db-orange-13: #fff1ea; --db-orange-14: #fff8f5; - --db-orange-on-pressed-light: #2c1600; - --db-orange-on-hover-light: #210f00; - --db-orange-on-light: #000; - --db-orange-origin-light: #d17d00; - --db-orange-hover-light: #ad6600; - --db-orange-pressed-light: #8a5100; - --db-orange-on-pressed-dark: #2c1600; - --db-orange-on-hover-dark: #210f00; - --db-orange-on-dark: #000; - --db-orange-origin-dark: #f39200; - --db-orange-hover-dark: #ffb782; - --db-orange-pressed-dark: #ffdbc8; + --db-orange-origin: #f39200; + --db-orange-origin-light-default: #f39200; + --db-orange-origin-light-hovered: #ce7b00; + --db-orange-origin-light-pressed: #aa6500; + --db-orange-on-origin-light-default: #100500; + --db-orange-on-origin-light-hovered: #331900; + --db-orange-on-origin-light-pressed: #512b00; + --db-orange-origin-dark-default: #f39200; + --db-orange-origin-dark-hovered: #ffb47b; + --db-orange-origin-dark-pressed: #ffd9c3; + --db-orange-on-origin-dark-default: #100500; + --db-orange-on-origin-dark-hovered: #331900; + --db-orange-on-origin-dark-pressed: #512b00; --db-red-0: #1a0000; --db-red-1: #280001; --db-red-2: #310001; @@ -173,18 +241,19 @@ --db-red-12: #ffe9e9; --db-red-13: #fff0f0; --db-red-14: #fff8f8; - --db-red-on-pressed-light: #ffe9e9; - --db-red-on-hover-light: #fff0f0; - --db-red-on-light: #fff; - --db-red-origin-light: #ec0016; - --db-red-hover-light: #c00010; - --db-red-pressed-light: #930009; - --db-red-on-pressed-dark: #ffe9e9; - --db-red-on-hover-dark: #fff0f0; - --db-red-on-dark: #fff; - --db-red-origin-dark: #ec0016; - --db-red-hover-dark: #ff5357; - --db-red-pressed-dark: #ff888a; + --db-red-origin: #ec0016; + --db-red-origin-light-default: #ec0016; + --db-red-origin-light-hovered: #bd000f; + --db-red-origin-light-pressed: #900009; + --db-red-on-origin-light-default: #fff; + --db-red-on-origin-light-hovered: #ffdada; + --db-red-on-origin-light-pressed: #ffb3b4; + --db-red-origin-dark-default: #ec0016; + --db-red-origin-dark-hovered: #ff4f53; + --db-red-origin-dark-pressed: #ff8587; + --db-red-on-origin-dark-default: #fff; + --db-red-on-origin-dark-hovered: #ffdada; + --db-red-on-origin-dark-pressed: #ffb3b4; --db-pink-0: #160209; --db-pink-1: #220310; --db-pink-2: #2b0516; @@ -200,18 +269,19 @@ --db-pink-12: #fce9ef; --db-pink-13: #fdf1f4; --db-pink-14: #fef8fa; - --db-pink-on-pressed-light: #39081f; - --db-pink-on-hover-light: #2b0516; - --db-pink-on-light: #000; - --db-pink-origin-light: #e93e8f; - --db-pink-hover-light: #aa2b67; - --db-pink-pressed-light: #821e4e; - --db-pink-on-pressed-dark: #39081f; - --db-pink-on-hover-dark: #2b0516; - --db-pink-on-dark: #000; - --db-pink-origin-dark: #e93e8f; - --db-pink-hover-dark: #ed5c9b; - --db-pink-pressed-dark: #f18cb2; + --db-pink-origin: #e93e8f; + --db-pink-origin-light-default: #e93e8f; + --db-pink-origin-light-hovered: #be3174; + --db-pink-origin-light-pressed: #95245a; + --db-pink-on-origin-light-default: #260413; + --db-pink-on-origin-light-hovered: #490e29; + --db-pink-on-origin-light-pressed: #6e1941; + --db-pink-origin-dark-default: #e93e8f; + --db-pink-origin-dark-hovered: #ef75a6; + --db-pink-origin-dark-pressed: #f3a0be; + --db-pink-on-origin-dark-default: #260413; + --db-pink-on-origin-dark-hovered: #490e29; + --db-pink-on-origin-dark-pressed: #6e1941; --db-violet-0: #0d0412; --db-violet-1: #17081c; --db-violet-2: #1d0c24; @@ -227,18 +297,19 @@ --db-violet-12: #f3ebf7; --db-violet-13: #f7f2fa; --db-violet-14: #fbf8fc; - --db-violet-on-pressed-light: #f3ebf7; - --db-violet-on-hover-light: #f7f2fa; - --db-violet-on-light: #fff; - --db-violet-origin-light: #814997; - --db-violet-hover-light: #603571; - --db-violet-pressed-light: #432350; - --db-violet-on-pressed-dark: #f3ebf7; - --db-violet-on-hover-dark: #f7f2fa; - --db-violet-on-dark: #fff; - --db-violet-origin-dark: #814997; - --db-violet-hover-dark: #9f5bba; - --db-violet-pressed-dark: #b47ace; + --db-violet-origin: #814997; + --db-violet-origin-light-default: #814997; + --db-violet-origin-light-hovered: #623673; + --db-violet-origin-light-pressed: #452452; + --db-violet-on-origin-light-default: #fbf8fc; + --db-violet-on-origin-light-hovered: #e9d7ee; + --db-violet-on-origin-light-pressed: #d7b5e1; + --db-violet-origin-dark-default: #814997; + --db-violet-origin-dark-hovered: #a15dbc; + --db-violet-origin-dark-pressed: #b67cce; + --db-violet-on-origin-dark-default: #fbf8fc; + --db-violet-on-origin-dark-hovered: #e9d7ee; + --db-violet-on-origin-dark-pressed: #d7b5e1; --db-blue-0: #00061b; --db-blue-1: #010d29; --db-blue-2: #011133; @@ -254,18 +325,19 @@ --db-blue-12: #eaedfe; --db-blue-13: #f1f3ff; --db-blue-14: #f8f9ff; - --db-blue-on-pressed-light: #eaedfe; - --db-blue-on-hover-light: #f1f3ff; - --db-blue-on-light: #fff; - --db-blue-origin-light: #1455c0; - --db-blue-hover-light: #0d4298; - --db-blue-pressed-light: #072d6c; - --db-blue-on-pressed-dark: #eaedfe; - --db-blue-on-hover-dark: #f1f3ff; - --db-blue-on-dark: #fff; - --db-blue-origin-dark: #1558c6; - --db-blue-hover-dark: #1d6ff7; - --db-blue-pressed-dark: #638bfa; + --db-blue-origin: #1455c0; + --db-blue-origin-light-default: #1455c0; + --db-blue-origin-light-hovered: #0c3f92; + --db-blue-origin-light-pressed: #062a67; + --db-blue-on-origin-light-default: #f8f9ff; + --db-blue-on-origin-light-hovered: #d5dbff; + --db-blue-on-origin-light-pressed: #b0beff; + --db-blue-origin-dark-default: #1455c0; + --db-blue-origin-dark-hovered: #1c6cf0; + --db-blue-origin-dark-pressed: #5c87fa; + --db-blue-on-origin-dark-default: #f8f9ff; + --db-blue-on-origin-dark-hovered: #d5dbff; + --db-blue-on-origin-dark-pressed: #b0beff; --db-cyan-0: #01080f; --db-cyan-1: #011018; --db-cyan-2: #021520; @@ -281,18 +353,19 @@ --db-cyan-12: #e0f0fe; --db-cyan-13: #ebf5fe; --db-cyan-14: #f5faff; - --db-cyan-on-pressed-light: #041e2b; - --db-cyan-on-hover-light: #021520; - --db-cyan-on-light: #000; - --db-cyan-origin-light: #2e9acb; - --db-cyan-hover-light: #247fa8; - --db-cyan-pressed-light: #1b6586; - --db-cyan-on-pressed-dark: #041e2b; - --db-cyan-on-hover-dark: #021520; - --db-cyan-on-dark: #000; - --db-cyan-origin-dark: #309fd1; - --db-cyan-hover-dark: #38b6ef; - --db-cyan-pressed-dark: #89cffa; + --db-cyan-origin: #309fd1; + --db-cyan-origin-light-default: #309fd1; + --db-cyan-origin-light-hovered: #2684ae; + --db-cyan-origin-light-pressed: #1d698c; + --db-cyan-on-origin-light-default: #01080f; + --db-cyan-on-origin-light-hovered: #072231; + --db-cyan-on-origin-light-pressed: #0f384f; + --db-cyan-origin-dark-default: #309fd1; + --db-cyan-origin-dark-hovered: #3abbf5; + --db-cyan-origin-dark-pressed: #96d2fb; + --db-cyan-on-origin-dark-default: #01080f; + --db-cyan-on-origin-dark-hovered: #072231; + --db-cyan-on-origin-dark-pressed: #0f384f; --db-turquoise-0: #000908; --db-turquoise-1: #001110; --db-turquoise-2: #001715; @@ -308,18 +381,19 @@ --db-turquoise-12: #9bfff8; --db-turquoise-13: #c3fffa; --db-turquoise-14: #e3fffd; - --db-turquoise-on-pressed-light: #00201e; - --db-turquoise-on-hover-light: #001715; - --db-turquoise-on-light: #000; - --db-turquoise-origin-light: #00a099; - --db-turquoise-hover-light: #00857f; - --db-turquoise-pressed-light: #006a65; - --db-turquoise-on-pressed-dark: #00201e; - --db-turquoise-on-hover-dark: #001715; - --db-turquoise-on-dark: #000; - --db-turquoise-origin-dark: #00a099; - --db-turquoise-hover-dark: #00bfb7; - --db-turquoise-pressed-dark: #00ddd4; + --db-turquoise-origin: #00a099; + --db-turquoise-origin-light-default: #00a099; + --db-turquoise-origin-light-hovered: #00847e; + --db-turquoise-origin-light-pressed: #006864; + --db-turquoise-on-origin-light-default: #000908; + --db-turquoise-on-origin-light-hovered: #002422; + --db-turquoise-on-origin-light-pressed: #003c38; + --db-turquoise-origin-dark-default: #00a099; + --db-turquoise-origin-dark-hovered: #00bdb5; + --db-turquoise-origin-dark-pressed: #00dcd2; + --db-turquoise-on-origin-dark-default: #000908; + --db-turquoise-on-origin-dark-hovered: #002422; + --db-turquoise-on-origin-dark-pressed: #003c38; --db-green-0: #030900; --db-green-1: #061100; --db-green-2: #091701; @@ -335,16 +409,17 @@ --db-green-12: #c3ff9d; --db-green-13: #d9ffc4; --db-green-14: #edffe4; - --db-green-on-pressed-light: #0f2001; - --db-green-on-hover-light: #091701; - --db-green-on-light: #000; - --db-green-origin-light: #63a615; - --db-green-hover-light: #4e850f; - --db-green-pressed-light: #3d6a09; - --db-green-on-pressed-dark: #0f2001; - --db-green-on-hover-dark: #091701; - --db-green-on-dark: #000; - --db-green-origin-dark: #63a615; - --db-green-hover-dark: #72bf1a; - --db-green-pressed-dark: #85dd20; + --db-green-origin: #63a615; + --db-green-origin-light-default: #63a615; + --db-green-origin-light-hovered: #51890f; + --db-green-origin-light-pressed: #406e0a; + --db-green-on-origin-light-default: #030900; + --db-green-on-origin-light-hovered: #122400; + --db-green-on-origin-light-pressed: #213c00; + --db-green-origin-dark-default: #63a615; + --db-green-origin-dark-hovered: #75c31b; + --db-green-origin-dark-pressed: #88e221; + --db-green-on-origin-dark-default: #030900; + --db-green-on-origin-dark-hovered: #122400; + --db-green-on-origin-dark-pressed: #213c00; } diff --git a/packages/foundations/scss/colors/_index.scss b/packages/foundations/scss/colors/_index.scss index 78ff3d3ab8c..f3f48049d32 100644 --- a/packages/foundations/scss/colors/_index.scss +++ b/packages/foundations/scss/colors/_index.scss @@ -1,7 +1,5 @@ @forward "variables"; @forward "variables.speaking-colors"; -@forward "variables.palette"; @forward "variables.additional"; @forward "variables.additional-speaking-colors"; -@forward "variables.additional-palette"; @forward "placeholder"; diff --git a/packages/foundations/scss/colors/_placeholder.scss b/packages/foundations/scss/colors/_placeholder.scss index e5185567d4f..da20b2e1fe1 100644 --- a/packages/foundations/scss/colors/_placeholder.scss +++ b/packages/foundations/scss/colors/_placeholder.scss @@ -3,148 +3,192 @@ @use "../helpers/functions"; @use "variables.additional" as additional-colors; -@mixin set-current-colors($bg, $on, $hover: false, $pressed: false) { - background-color: $bg; - color: $on; +@mixin set-current-colors($bg, $on, $hovered: false, $pressed: false) { + background-color: #{$bg}; + color: #{$on}; &::before, &::after { - --db-icon-color: $on; + --db-icon-color: #{$on}; } - @if ($hover) { + @if ($hovered) { @include functions.hover { - background-color: $hover; + background-color: #{$hovered}; } } @if ($pressed) { @include functions.active { - background-color: $pressed; + background-color: #{$pressed}; } } } -$backgrounds: "lvl-1", "lvl-2", "lvl-3", "transparent-full", "transparent-semi"; - @mixin generate-color-placeholder($variant) { - @each $contrast in [ "high", "low"] { - %db-#{$variant}-contrast-#{$contrast} { - --db-current-color-border: var( - --db-#{$variant}-contrast-#{$contrast}-enabled - ); - - @include set-current-colors( - var(--db-#{$variant}-contrast-#{$contrast}-enabled), - var(--db-#{$variant}-on-contrast-enabled) - ); - } - - %db-#{$variant}-contrast-#{$contrast}-interactive { - @extend %db-#{$variant}-contrast-#{$contrast}; - - /* stylelint-disable-next-line scss/percent-placeholder-pattern */ - &:is(:hover, :focus) { - background: var(--db-#{$variant}-contrast-#{$contrast}-hover); - } - - /* stylelint-disable-next-line scss/percent-placeholder-pattern */ - &:active { - background: var(--db-#{$variant}-contrast-#{$contrast}-pressed); - } - } - } - %db-#{$variant}-variables { - /* used for transparent backgrounds */ - --db-current-color-bg-transparent-full-enabled: var( - --db-#{$variant}-bg-transparent-full-enabled + // bg basic + --db-adaptive-bg-basic-level-1-default: var( + --db-#{$variant}-bg-basic-level-1-default ); - --db-current-color-bg-transparent-semi-enabled: var( - --db-#{$variant}-bg-transparent-semi-enabled + --db-adaptive-bg-basic-level-1-hovered: var( + --db-#{$variant}-bg-basic-level-1-hovered ); - --db-current-color-bg-transparent-hover: var( - --db-#{$variant}-bg-transparent-hover + --db-adaptive-bg-basic-level-1-pressed: var( + --db-#{$variant}-bg-basic-level-1-pressed ); - --db-current-color-bg-transparent-pressed: var( - --db-#{$variant}-bg-transparent-pressed + --db-adaptive-bg-basic-level-2-default: var( + --db-#{$variant}-bg-basic-level-2-default ); - - /* used for backgrounds */ - --db-current-color-bg-lvl-1-enabled: var( - --db-#{$variant}-bg-lvl-1-enabled + --db-adaptive-bg-basic-level-2-hovered: var( + --db-#{$variant}-bg-basic-level-2-hovered ); - --db-current-color-bg-lvl-2-enabled: var( - --db-#{$variant}-bg-lvl-2-enabled + --db-adaptive-bg-basic-level-2-pressed: var( + --db-#{$variant}-bg-basic-level-2-pressed ); - --db-current-color-bg-lvl-3-enabled: var( - --db-#{$variant}-bg-lvl-3-enabled + --db-adaptive-bg-basic-level-3-default: var( + --db-#{$variant}-bg-basic-level-3-default ); - - /* used for icons and borders */ - --db-current-color-contrast-low-enabled: var( - --db-#{$variant}-contrast-low-enabled + --db-adaptive-bg-basic-level-3-hovered: var( + --db-#{$variant}-bg-basic-level-3-hovered + ); + --db-adaptive-bg-basic-level-3-pressed: var( + --db-#{$variant}-bg-basic-level-3-pressed + ); + --db-adaptive-bg-basic-transparent-full-default: var( + --db-#{$variant}-bg-basic-transparent-full-default ); - --db-current-color-contrast-low-hover: var( - --db-#{$variant}-contrast-low-hover + --db-adaptive-bg-basic-transparent-semi-default: var( + --db-#{$variant}-bg-basic-transparent-semi-default ); - --db-current-color-contrast-low-pressed: var( - --db-#{$variant}-contrast-low-pressed + --db-adaptive-bg-basic-transparent-hovered: var( + --db-#{$variant}-bg-basic-transparent-hovered + ); + --db-adaptive-bg-basic-transparent-pressed: var( + --db-#{$variant}-bg-basic-transparent-pressed ); - --db-current-color-border: var(--db-#{$variant}-border); - /* used for adaptive tags (interactive) */ - --db-current-color-bg-lvl-1-hover: var(--db-#{$variant}-bg-lvl-1-hover); - --db-current-color-bg-lvl-1-pressed: var( - --db-#{$variant}-bg-lvl-1-pressed + // on-bg basic + --db-adaptive-on-bg-basic-emphasis-100-default: var( + --db-#{$variant}-on-bg-basic-emphasis-100-default + ); + --db-adaptive-on-bg-basic-emphasis-100-hovered: var( + --db-#{$variant}-on-bg-basic-emphasis-100-hovered + ); + --db-adaptive-on-bg-basic-emphasis-100-pressed: var( + --db-#{$variant}-on-bg-basic-emphasis-100-pressed + ); + --db-adaptive-on-bg-basic-emphasis-90-default: var( + --db-#{$variant}-on-bg-basic-emphasis-90-default + ); + --db-adaptive-on-bg-basic-emphasis-90-hovered: var( + --db-#{$variant}-on-bg-basic-emphasis-90-hovered ); - --db-current-color-bg-lvl-2-hover: var(--db-#{$variant}-bg-lvl-2-hover); - --db-current-color-bg-lvl-2-pressed: var( - --db-#{$variant}-bg-lvl-2-pressed + --db-adaptive-on-bg-basic-emphasis-90-pressed: var( + --db-#{$variant}-on-bg-basic-emphasis-90-pressed ); - --db-current-color-bg-lvl-3-hover: var(--db-#{$variant}-bg-lvl-3-hover); - --db-current-color-bg-lvl-3-pressed: var( - --db-#{$variant}-bg-lvl-3-pressed + --db-adaptive-on-bg-basic-emphasis-80-default: var( + --db-#{$variant}-on-bg-basic-emphasis-80-default + ); + --db-adaptive-on-bg-basic-emphasis-80-hovered: var( + --db-#{$variant}-on-bg-basic-emphasis-80-hovered + ); + --db-adaptive-on-bg-basic-emphasis-80-pressed: var( + --db-#{$variant}-on-bg-basic-emphasis-80-pressed + ); + --db-adaptive-on-bg-basic-emphasis-70-default: var( + --db-#{$variant}-on-bg-basic-emphasis-70-default + ); + --db-adaptive-on-bg-basic-emphasis-70-hovered: var( + --db-#{$variant}-on-bg-basic-emphasis-70-hovered + ); + --db-adaptive-on-bg-basic-emphasis-70-pressed: var( + --db-#{$variant}-on-bg-basic-emphasis-70-pressed + ); + --db-adaptive-on-bg-basic-emphasis-60-default: var( + --db-#{$variant}-on-bg-basic-emphasis-60-default + ); + --db-adaptive-on-bg-basic-emphasis-60-hovered: var( + --db-#{$variant}-on-bg-basic-emphasis-60-hovered + ); + --db-adaptive-on-bg-basic-emphasis-60-pressed: var( + --db-#{$variant}-on-bg-basic-emphasis-60-pressed + ); + --db-adaptive-on-bg-basic-emphasis-50-default: var( + --db-#{$variant}-on-bg-basic-emphasis-50-default + ); + --db-adaptive-on-bg-basic-emphasis-50-hovered: var( + --db-#{$variant}-on-bg-basic-emphasis-50-hovered + ); + --db-adaptive-on-bg-basic-emphasis-50-pressed: var( + --db-#{$variant}-on-bg-basic-emphasis-50-pressed ); - /* used for adaptive tags (strong & interactive) */ - --db-current-color-on-contrast-enabled: var( - --db-#{$variant}-on-contrast-enabled + // inverted + + --db-adaptive-bg-inverted-contrast-max-default: var( + --db-#{$variant}-bg-inverted-contrast-max-default + ); + --db-adaptive-bg-inverted-contrast-max-hovered: var( + --db-#{$variant}-bg-inverted-contrast-max-hovered + ); + --db-adaptive-bg-inverted-contrast-max-pressed: var( + --db-#{$variant}-bg-inverted-contrast-max-pressed + ); + --db-adaptive-bg-inverted-contrast-high-default: var( + --db-#{$variant}-bg-inverted-contrast-high-default + ); + --db-adaptive-bg-inverted-contrast-high-hovered: var( + --db-#{$variant}-bg-inverted-contrast-high-hovered ); - --db-current-color-contrast-high-enabled: var( - --db-#{$variant}-contrast-high-enabled + --db-adaptive-bg-inverted-contrast-high-pressed: var( + --db-#{$variant}-bg-inverted-contrast-high-pressed + ); + --db-adaptive-bg-inverted-contrast-low-default: var( + --db-#{$variant}-bg-inverted-contrast-low-default + ); + --db-adaptive-bg-inverted-contrast-low-hovered: var( + --db-#{$variant}-bg-inverted-contrast-low-hovered + ); + --db-adaptive-bg-inverted-contrast-low-pressed: var( + --db-#{$variant}-bg-inverted-contrast-low-pressed + ); + + // on-bg-inverted + --db-adaptive-on-bg-inverted-default: var( + --db-#{$variant}-on-bg-inverted-default ); - --db-current-color-contrast-high-hover: var( - --db-#{$variant}-contrast-high-hover + --db-adaptive-on-bg-inverted-hovered: var( + --db-#{$variant}-on-bg-inverted-hovered ); - --db-current-color-contrast-high-pressed: var( - --db-#{$variant}-contrast-high-pressed + --db-adaptive-on-bg-inverted-pressed: var( + --db-#{$variant}-on-bg-inverted-pressed ); - /* on-colors */ - --db-current-color-on-bg-enabled: var(--db-#{$variant}-on-bg-enabled); - --db-current-color-on-bg-hover: var(--db-#{$variant}-on-bg-hover); - --db-current-color-on-bg-pressed: var(--db-#{$variant}-on-bg-pressed); + // origin + --db-adaptive-origin-default: var(--db-#{$variant}-origin-default); + --db-adaptive-origin-hovered: var(--db-#{$variant}-origin-hovered); + --db-adaptive-origin-pressed: var(--db-#{$variant}-origin-pressed); - /* weak colors */ - --db-current-color-on-bg-weak-enabled: var( - --db-#{$variant}-on-bg-weak-enabled + // on-origin + --db-adaptive-on-origin-default: var( + --db-#{$variant}-on-origin-default ); - --db-current-color-on-bg-weak-hover: var( - --db-#{$variant}-on-bg-weak-hover + --db-adaptive-on-origin-hovered: var( + --db-#{$variant}-on-origin-hovered ); - --db-current-color-on-bg-weak-pressed: var( - --db-#{$variant}-on-bg-weak-pressed + --db-adaptive-on-origin-pressed: var( + --db-#{$variant}-on-origin-pressed ); } - @each $bg in $backgrounds { + @each $bg in variables.$background-colors { %db-#{$variant}-bg-#{$bg} { @extend %db-#{$variant}-variables; @include set-current-colors( - var(--db-#{$variant}-bg-#{$bg}-enabled), - var(--db-#{$variant}-on-bg-enabled) + var(--db-#{$variant}-bg-#{$bg}-default), + var(--db-#{$variant}-on-bg-basic-emphasis-100-default) ); } } diff --git a/packages/foundations/scss/colors/_variables.additional-palette.scss b/packages/foundations/scss/colors/_variables.additional-palette.scss index 927521984d1..d4db0dc64e6 100644 --- a/packages/foundations/scss/colors/_variables.additional-palette.scss +++ b/packages/foundations/scss/colors/_variables.additional-palette.scss @@ -16,18 +16,21 @@ $db-yellow-9: var(--db-yellow-9); $db-yellow-10: var(--db-yellow-10); $db-yellow-11: var(--db-yellow-11); $db-yellow-12: var(--db-yellow-12); -$db-yellow-on-pressed-light: var(--db-yellow-on-pressed-light); -$db-yellow-on-hover-light: var(--db-yellow-on-hover-light); -$db-yellow-on-light: var(--db-yellow-on-light); -$db-yellow-origin-light: var(--db-yellow-origin-light); -$db-yellow-hover-light: var(--db-yellow-hover-light); -$db-yellow-pressed-light: var(--db-yellow-pressed-light); -$db-yellow-on-pressed-dark: var(--db-yellow-on-pressed-dark); -$db-yellow-on-hover-dark: var(--db-yellow-on-hover-dark); -$db-yellow-on-dark: var(--db-yellow-on-dark); -$db-yellow-origin-dark: var(--db-yellow-origin-dark); -$db-yellow-hover-dark: var(--db-yellow-hover-dark); -$db-yellow-pressed-dark: var(--db-yellow-pressed-dark); +$db-yellow-13: var(--db-yellow-13); +$db-yellow-14: var(--db-yellow-14); +$db-yellow-origin: var(--db-yellow-origin); +$db-yellow-origin-light-default: var(--db-yellow-origin-light-default); +$db-yellow-origin-light-hovered: var(--db-yellow-origin-light-hovered); +$db-yellow-origin-light-pressed: var(--db-yellow-origin-light-pressed); +$db-yellow-on-origin-light-default: var(--db-yellow-on-origin-light-default); +$db-yellow-on-origin-light-hovered: var(--db-yellow-on-origin-light-hovered); +$db-yellow-on-origin-light-pressed: var(--db-yellow-on-origin-light-pressed); +$db-yellow-origin-dark-default: var(--db-yellow-origin-dark-default); +$db-yellow-origin-dark-hovered: var(--db-yellow-origin-dark-hovered); +$db-yellow-origin-dark-pressed: var(--db-yellow-origin-dark-pressed); +$db-yellow-on-origin-dark-default: var(--db-yellow-on-origin-dark-default); +$db-yellow-on-origin-dark-hovered: var(--db-yellow-on-origin-dark-hovered); +$db-yellow-on-origin-dark-pressed: var(--db-yellow-on-origin-dark-pressed); // orange $db-orange-0: var(--db-orange-0); @@ -43,18 +46,21 @@ $db-orange-9: var(--db-orange-9); $db-orange-10: var(--db-orange-10); $db-orange-11: var(--db-orange-11); $db-orange-12: var(--db-orange-12); -$db-orange-on-pressed-light: var(--db-orange-on-pressed-light); -$db-orange-on-hover-light: var(--db-orange-on-hover-light); -$db-orange-on-light: var(--db-orange-on-light); -$db-orange-origin-light: var(--db-orange-origin-light); -$db-orange-hover-light: var(--db-orange-hover-light); -$db-orange-pressed-light: var(--db-orange-pressed-light); -$db-orange-on-pressed-dark: var(--db-orange-on-pressed-dark); -$db-orange-on-hover-dark: var(--db-orange-on-hover-dark); -$db-orange-on-dark: var(--db-orange-on-dark); -$db-orange-origin-dark: var(--db-orange-origin-dark); -$db-orange-hover-dark: var(--db-orange-hover-dark); -$db-orange-pressed-dark: var(--db-orange-pressed-dark); +$db-orange-13: var(--db-orange-13); +$db-orange-14: var(--db-orange-14); +$db-orange-origin: var(--db-orange-origin); +$db-orange-origin-light-default: var(--db-orange-origin-light-default); +$db-orange-origin-light-hovered: var(--db-orange-origin-light-hovered); +$db-orange-origin-light-pressed: var(--db-orange-origin-light-pressed); +$db-orange-on-origin-light-default: var(--db-orange-on-origin-light-default); +$db-orange-on-origin-light-hovered: var(--db-orange-on-origin-light-hovered); +$db-orange-on-origin-light-pressed: var(--db-orange-on-origin-light-pressed); +$db-orange-origin-dark-default: var(--db-orange-origin-dark-default); +$db-orange-origin-dark-hovered: var(--db-orange-origin-dark-hovered); +$db-orange-origin-dark-pressed: var(--db-orange-origin-dark-pressed); +$db-orange-on-origin-dark-default: var(--db-orange-on-origin-dark-default); +$db-orange-on-origin-dark-hovered: var(--db-orange-on-origin-dark-hovered); +$db-orange-on-origin-dark-pressed: var(--db-orange-on-origin-dark-pressed); // red $db-red-0: var(--db-red-0); @@ -70,18 +76,21 @@ $db-red-9: var(--db-red-9); $db-red-10: var(--db-red-10); $db-red-11: var(--db-red-11); $db-red-12: var(--db-red-12); -$db-red-on-pressed-light: var(--db-red-on-pressed-light); -$db-red-on-hover-light: var(--db-red-on-hover-light); -$db-red-on-light: var(--db-red-on-light); -$db-red-origin-light: var(--db-red-origin-light); -$db-red-hover-light: var(--db-red-hover-light); -$db-red-pressed-light: var(--db-red-pressed-light); -$db-red-on-pressed-dark: var(--db-red-on-pressed-dark); -$db-red-on-hover-dark: var(--db-red-on-hover-dark); -$db-red-on-dark: var(--db-red-on-dark); -$db-red-origin-dark: var(--db-red-origin-dark); -$db-red-hover-dark: var(--db-red-hover-dark); -$db-red-pressed-dark: var(--db-red-pressed-dark); +$db-red-13: var(--db-red-13); +$db-red-14: var(--db-red-14); +$db-red-origin: var(--db-red-origin); +$db-red-origin-light-default: var(--db-red-origin-light-default); +$db-red-origin-light-hovered: var(--db-red-origin-light-hovered); +$db-red-origin-light-pressed: var(--db-red-origin-light-pressed); +$db-red-on-origin-light-default: var(--db-red-on-origin-light-default); +$db-red-on-origin-light-hovered: var(--db-red-on-origin-light-hovered); +$db-red-on-origin-light-pressed: var(--db-red-on-origin-light-pressed); +$db-red-origin-dark-default: var(--db-red-origin-dark-default); +$db-red-origin-dark-hovered: var(--db-red-origin-dark-hovered); +$db-red-origin-dark-pressed: var(--db-red-origin-dark-pressed); +$db-red-on-origin-dark-default: var(--db-red-on-origin-dark-default); +$db-red-on-origin-dark-hovered: var(--db-red-on-origin-dark-hovered); +$db-red-on-origin-dark-pressed: var(--db-red-on-origin-dark-pressed); // pink $db-pink-0: var(--db-pink-0); @@ -97,18 +106,21 @@ $db-pink-9: var(--db-pink-9); $db-pink-10: var(--db-pink-10); $db-pink-11: var(--db-pink-11); $db-pink-12: var(--db-pink-12); -$db-pink-on-pressed-light: var(--db-pink-on-pressed-light); -$db-pink-on-hover-light: var(--db-pink-on-hover-light); -$db-pink-on-light: var(--db-pink-on-light); -$db-pink-origin-light: var(--db-pink-origin-light); -$db-pink-hover-light: var(--db-pink-hover-light); -$db-pink-pressed-light: var(--db-pink-pressed-light); -$db-pink-on-pressed-dark: var(--db-pink-on-pressed-dark); -$db-pink-on-hover-dark: var(--db-pink-on-hover-dark); -$db-pink-on-dark: var(--db-pink-on-dark); -$db-pink-origin-dark: var(--db-pink-origin-dark); -$db-pink-hover-dark: var(--db-pink-hover-dark); -$db-pink-pressed-dark: var(--db-pink-pressed-dark); +$db-pink-13: var(--db-pink-13); +$db-pink-14: var(--db-pink-14); +$db-pink-origin: var(--db-pink-origin); +$db-pink-origin-light-default: var(--db-pink-origin-light-default); +$db-pink-origin-light-hovered: var(--db-pink-origin-light-hovered); +$db-pink-origin-light-pressed: var(--db-pink-origin-light-pressed); +$db-pink-on-origin-light-default: var(--db-pink-on-origin-light-default); +$db-pink-on-origin-light-hovered: var(--db-pink-on-origin-light-hovered); +$db-pink-on-origin-light-pressed: var(--db-pink-on-origin-light-pressed); +$db-pink-origin-dark-default: var(--db-pink-origin-dark-default); +$db-pink-origin-dark-hovered: var(--db-pink-origin-dark-hovered); +$db-pink-origin-dark-pressed: var(--db-pink-origin-dark-pressed); +$db-pink-on-origin-dark-default: var(--db-pink-on-origin-dark-default); +$db-pink-on-origin-dark-hovered: var(--db-pink-on-origin-dark-hovered); +$db-pink-on-origin-dark-pressed: var(--db-pink-on-origin-dark-pressed); // violet $db-violet-0: var(--db-violet-0); @@ -124,18 +136,21 @@ $db-violet-9: var(--db-violet-9); $db-violet-10: var(--db-violet-10); $db-violet-11: var(--db-violet-11); $db-violet-12: var(--db-violet-12); -$db-violet-on-pressed-light: var(--db-violet-on-pressed-light); -$db-violet-on-hover-light: var(--db-violet-on-hover-light); -$db-violet-on-light: var(--db-violet-on-light); -$db-violet-origin-light: var(--db-violet-origin-light); -$db-violet-hover-light: var(--db-violet-hover-light); -$db-violet-pressed-light: var(--db-violet-pressed-light); -$db-violet-on-pressed-dark: var(--db-violet-on-pressed-dark); -$db-violet-on-hover-dark: var(--db-violet-on-hover-dark); -$db-violet-on-dark: var(--db-violet-on-dark); -$db-violet-origin-dark: var(--db-violet-origin-dark); -$db-violet-hover-dark: var(--db-violet-hover-dark); -$db-violet-pressed-dark: var(--db-violet-pressed-dark); +$db-violet-13: var(--db-violet-13); +$db-violet-14: var(--db-violet-14); +$db-violet-origin: var(--db-violet-origin); +$db-violet-origin-light-default: var(--db-violet-origin-light-default); +$db-violet-origin-light-hovered: var(--db-violet-origin-light-hovered); +$db-violet-origin-light-pressed: var(--db-violet-origin-light-pressed); +$db-violet-on-origin-light-default: var(--db-violet-on-origin-light-default); +$db-violet-on-origin-light-hovered: var(--db-violet-on-origin-light-hovered); +$db-violet-on-origin-light-pressed: var(--db-violet-on-origin-light-pressed); +$db-violet-origin-dark-default: var(--db-violet-origin-dark-default); +$db-violet-origin-dark-hovered: var(--db-violet-origin-dark-hovered); +$db-violet-origin-dark-pressed: var(--db-violet-origin-dark-pressed); +$db-violet-on-origin-dark-default: var(--db-violet-on-origin-dark-default); +$db-violet-on-origin-dark-hovered: var(--db-violet-on-origin-dark-hovered); +$db-violet-on-origin-dark-pressed: var(--db-violet-on-origin-dark-pressed); // blue $db-blue-0: var(--db-blue-0); @@ -151,18 +166,21 @@ $db-blue-9: var(--db-blue-9); $db-blue-10: var(--db-blue-10); $db-blue-11: var(--db-blue-11); $db-blue-12: var(--db-blue-12); -$db-blue-on-pressed-light: var(--db-blue-on-pressed-light); -$db-blue-on-hover-light: var(--db-blue-on-hover-light); -$db-blue-on-light: var(--db-blue-on-light); -$db-blue-origin-light: var(--db-blue-origin-light); -$db-blue-hover-light: var(--db-blue-hover-light); -$db-blue-pressed-light: var(--db-blue-pressed-light); -$db-blue-on-pressed-dark: var(--db-blue-on-pressed-dark); -$db-blue-on-hover-dark: var(--db-blue-on-hover-dark); -$db-blue-on-dark: var(--db-blue-on-dark); -$db-blue-origin-dark: var(--db-blue-origin-dark); -$db-blue-hover-dark: var(--db-blue-hover-dark); -$db-blue-pressed-dark: var(--db-blue-pressed-dark); +$db-blue-13: var(--db-blue-13); +$db-blue-14: var(--db-blue-14); +$db-blue-origin: var(--db-blue-origin); +$db-blue-origin-light-default: var(--db-blue-origin-light-default); +$db-blue-origin-light-hovered: var(--db-blue-origin-light-hovered); +$db-blue-origin-light-pressed: var(--db-blue-origin-light-pressed); +$db-blue-on-origin-light-default: var(--db-blue-on-origin-light-default); +$db-blue-on-origin-light-hovered: var(--db-blue-on-origin-light-hovered); +$db-blue-on-origin-light-pressed: var(--db-blue-on-origin-light-pressed); +$db-blue-origin-dark-default: var(--db-blue-origin-dark-default); +$db-blue-origin-dark-hovered: var(--db-blue-origin-dark-hovered); +$db-blue-origin-dark-pressed: var(--db-blue-origin-dark-pressed); +$db-blue-on-origin-dark-default: var(--db-blue-on-origin-dark-default); +$db-blue-on-origin-dark-hovered: var(--db-blue-on-origin-dark-hovered); +$db-blue-on-origin-dark-pressed: var(--db-blue-on-origin-dark-pressed); // cyan $db-cyan-0: var(--db-cyan-0); @@ -178,18 +196,21 @@ $db-cyan-9: var(--db-cyan-9); $db-cyan-10: var(--db-cyan-10); $db-cyan-11: var(--db-cyan-11); $db-cyan-12: var(--db-cyan-12); -$db-cyan-on-pressed-light: var(--db-cyan-on-pressed-light); -$db-cyan-on-hover-light: var(--db-cyan-on-hover-light); -$db-cyan-on-light: var(--db-cyan-on-light); -$db-cyan-origin-light: var(--db-cyan-origin-light); -$db-cyan-hover-light: var(--db-cyan-hover-light); -$db-cyan-pressed-light: var(--db-cyan-pressed-light); -$db-cyan-on-pressed-dark: var(--db-cyan-on-pressed-dark); -$db-cyan-on-hover-dark: var(--db-cyan-on-hover-dark); -$db-cyan-on-dark: var(--db-cyan-on-dark); -$db-cyan-origin-dark: var(--db-cyan-origin-dark); -$db-cyan-hover-dark: var(--db-cyan-hover-dark); -$db-cyan-pressed-dark: var(--db-cyan-pressed-dark); +$db-cyan-13: var(--db-cyan-13); +$db-cyan-14: var(--db-cyan-14); +$db-cyan-origin: var(--db-cyan-origin); +$db-cyan-origin-light-default: var(--db-cyan-origin-light-default); +$db-cyan-origin-light-hovered: var(--db-cyan-origin-light-hovered); +$db-cyan-origin-light-pressed: var(--db-cyan-origin-light-pressed); +$db-cyan-on-origin-light-default: var(--db-cyan-on-origin-light-default); +$db-cyan-on-origin-light-hovered: var(--db-cyan-on-origin-light-hovered); +$db-cyan-on-origin-light-pressed: var(--db-cyan-on-origin-light-pressed); +$db-cyan-origin-dark-default: var(--db-cyan-origin-dark-default); +$db-cyan-origin-dark-hovered: var(--db-cyan-origin-dark-hovered); +$db-cyan-origin-dark-pressed: var(--db-cyan-origin-dark-pressed); +$db-cyan-on-origin-dark-default: var(--db-cyan-on-origin-dark-default); +$db-cyan-on-origin-dark-hovered: var(--db-cyan-on-origin-dark-hovered); +$db-cyan-on-origin-dark-pressed: var(--db-cyan-on-origin-dark-pressed); // turquoise $db-turquoise-0: var(--db-turquoise-0); @@ -205,18 +226,33 @@ $db-turquoise-9: var(--db-turquoise-9); $db-turquoise-10: var(--db-turquoise-10); $db-turquoise-11: var(--db-turquoise-11); $db-turquoise-12: var(--db-turquoise-12); -$db-turquoise-on-pressed-light: var(--db-turquoise-on-pressed-light); -$db-turquoise-on-hover-light: var(--db-turquoise-on-hover-light); -$db-turquoise-on-light: var(--db-turquoise-on-light); -$db-turquoise-origin-light: var(--db-turquoise-origin-light); -$db-turquoise-hover-light: var(--db-turquoise-hover-light); -$db-turquoise-pressed-light: var(--db-turquoise-pressed-light); -$db-turquoise-on-pressed-dark: var(--db-turquoise-on-pressed-dark); -$db-turquoise-on-hover-dark: var(--db-turquoise-on-hover-dark); -$db-turquoise-on-dark: var(--db-turquoise-on-dark); -$db-turquoise-origin-dark: var(--db-turquoise-origin-dark); -$db-turquoise-hover-dark: var(--db-turquoise-hover-dark); -$db-turquoise-pressed-dark: var(--db-turquoise-pressed-dark); +$db-turquoise-13: var(--db-turquoise-13); +$db-turquoise-14: var(--db-turquoise-14); +$db-turquoise-origin: var(--db-turquoise-origin); +$db-turquoise-origin-light-default: var(--db-turquoise-origin-light-default); +$db-turquoise-origin-light-hovered: var(--db-turquoise-origin-light-hovered); +$db-turquoise-origin-light-pressed: var(--db-turquoise-origin-light-pressed); +$db-turquoise-on-origin-light-default: var( + --db-turquoise-on-origin-light-default +); +$db-turquoise-on-origin-light-hovered: var( + --db-turquoise-on-origin-light-hovered +); +$db-turquoise-on-origin-light-pressed: var( + --db-turquoise-on-origin-light-pressed +); +$db-turquoise-origin-dark-default: var(--db-turquoise-origin-dark-default); +$db-turquoise-origin-dark-hovered: var(--db-turquoise-origin-dark-hovered); +$db-turquoise-origin-dark-pressed: var(--db-turquoise-origin-dark-pressed); +$db-turquoise-on-origin-dark-default: var( + --db-turquoise-on-origin-dark-default +); +$db-turquoise-on-origin-dark-hovered: var( + --db-turquoise-on-origin-dark-hovered +); +$db-turquoise-on-origin-dark-pressed: var( + --db-turquoise-on-origin-dark-pressed +); // green $db-green-0: var(--db-green-0); @@ -232,15 +268,18 @@ $db-green-9: var(--db-green-9); $db-green-10: var(--db-green-10); $db-green-11: var(--db-green-11); $db-green-12: var(--db-green-12); -$db-green-on-pressed-light: var(--db-green-on-pressed-light); -$db-green-on-hover-light: var(--db-green-on-hover-light); -$db-green-on-light: var(--db-green-on-light); -$db-green-origin-light: var(--db-green-origin-light); -$db-green-hover-light: var(--db-green-hover-light); -$db-green-pressed-light: var(--db-green-pressed-light); -$db-green-on-pressed-dark: var(--db-green-on-pressed-dark); -$db-green-on-hover-dark: var(--db-green-on-hover-dark); -$db-green-on-dark: var(--db-green-on-dark); -$db-green-origin-dark: var(--db-green-origin-dark); -$db-green-hover-dark: var(--db-green-hover-dark); -$db-green-pressed-dark: var(--db-green-pressed-dark); +$db-green-13: var(--db-green-13); +$db-green-14: var(--db-green-14); +$db-green-origin: var(--db-green-origin); +$db-green-origin-light-default: var(--db-green-origin-light-default); +$db-green-origin-light-hovered: var(--db-green-origin-light-hovered); +$db-green-origin-light-pressed: var(--db-green-origin-light-pressed); +$db-green-on-origin-light-default: var(--db-green-on-origin-light-default); +$db-green-on-origin-light-hovered: var(--db-green-on-origin-light-hovered); +$db-green-on-origin-light-pressed: var(--db-green-on-origin-light-pressed); +$db-green-origin-dark-default: var(--db-green-origin-dark-default); +$db-green-origin-dark-hovered: var(--db-green-origin-dark-hovered); +$db-green-origin-dark-pressed: var(--db-green-origin-dark-pressed); +$db-green-on-origin-dark-default: var(--db-green-on-origin-dark-default); +$db-green-on-origin-dark-hovered: var(--db-green-on-origin-dark-hovered); +$db-green-on-origin-dark-pressed: var(--db-green-on-origin-dark-pressed); diff --git a/packages/foundations/scss/colors/_variables.additional-speaking-colors.scss b/packages/foundations/scss/colors/_variables.additional-speaking-colors.scss index f49da808cb3..68c4a1ae155 100644 --- a/packages/foundations/scss/colors/_variables.additional-speaking-colors.scss +++ b/packages/foundations/scss/colors/_variables.additional-speaking-colors.scss @@ -1,348 +1,9 @@ -// yellow -$db-yellow-bg-lvl-1-enabled: var(--db-yellow-bg-lvl-1-enabled); -$db-yellow-bg-lvl-1-hover: var(--db-yellow-bg-lvl-1-hover); -$db-yellow-bg-lvl-1-pressed: var(--db-yellow-bg-lvl-1-pressed); -$db-yellow-bg-lvl-2-enabled: var(--db-yellow-bg-lvl-2-enabled); -$db-yellow-bg-lvl-2-hover: var(--db-yellow-bg-lvl-2-hover); -$db-yellow-bg-lvl-2-pressed: var(--db-yellow-bg-lvl-2-pressed); -$db-yellow-bg-lvl-3-enabled: var(--db-yellow-bg-lvl-3-enabled); -$db-yellow-bg-lvl-3-hover: var(--db-yellow-bg-lvl-3-hover); -$db-yellow-bg-lvl-3-pressed: var(--db-yellow-bg-lvl-3-pressed); -$db-yellow-bg-transparent-full-enabled: var( - --db-yellow-bg-transparent-full-enabled -); -$db-yellow-bg-transparent-semi-enabled: var( - --db-yellow-bg-transparent-semi-enabled -); -$db-yellow-bg-transparent-hover: var(--db-yellow-bg-transparent-hover); -$db-yellow-bg-transparent-pressed: var(--db-yellow-bg-transparent-pressed); -$db-yellow-on-bg-enabled: var(--db-yellow-on-bg-enabled); -$db-yellow-on-bg-hover: var(--db-yellow-on-bg-hover); -$db-yellow-on-bg-pressed: var(--db-yellow-on-bg-pressed); -$db-yellow-on-bg-weak-enabled: var(--db-yellow-on-bg-weak-enabled); -$db-yellow-on-bg-weak-hover: var(--db-yellow-on-bg-weak-hover); -$db-yellow-on-bg-weak-pressed: var(--db-yellow-on-bg-weak-pressed); -$db-yellow-on-contrast-enabled: var(--db-yellow-on-contrast-enabled); -$db-yellow-contrast-high-enabled: var(--db-yellow-contrast-high-enabled); -$db-yellow-contrast-high-hover: var(--db-yellow-contrast-high-hover); -$db-yellow-contrast-high-pressed: var(--db-yellow-contrast-high-pressed); -$db-yellow-contrast-low-enabled: var(--db-yellow-contrast-low-enabled); -$db-yellow-contrast-low-hover: var(--db-yellow-contrast-low-hover); -$db-yellow-contrast-low-pressed: var(--db-yellow-contrast-low-pressed); -$db-yellow-border: var(--db-yellow-border); -$db-yellow-on-enabled: var(--db-yellow-on-enabled); -$db-yellow-on-hover: var(--db-yellow-on-hover); -$db-yellow-on-pressed: var(--db-yellow-on-pressed); -$db-yellow-origin-enabled: var(--db-yellow-origin-enabled); -$db-yellow-origin-hover: var(--db-yellow-origin-hover); -$db-yellow-origin-pressed: var(--db-yellow-origin-pressed); - -// orange -$db-orange-bg-lvl-1-enabled: var(--db-orange-bg-lvl-1-enabled); -$db-orange-bg-lvl-1-hover: var(--db-orange-bg-lvl-1-hover); -$db-orange-bg-lvl-1-pressed: var(--db-orange-bg-lvl-1-pressed); -$db-orange-bg-lvl-2-enabled: var(--db-orange-bg-lvl-2-enabled); -$db-orange-bg-lvl-2-hover: var(--db-orange-bg-lvl-2-hover); -$db-orange-bg-lvl-2-pressed: var(--db-orange-bg-lvl-2-pressed); -$db-orange-bg-lvl-3-enabled: var(--db-orange-bg-lvl-3-enabled); -$db-orange-bg-lvl-3-hover: var(--db-orange-bg-lvl-3-hover); -$db-orange-bg-lvl-3-pressed: var(--db-orange-bg-lvl-3-pressed); -$db-orange-bg-transparent-full-enabled: var( - --db-orange-bg-transparent-full-enabled -); -$db-orange-bg-transparent-semi-enabled: var( - --db-orange-bg-transparent-semi-enabled -); -$db-orange-bg-transparent-hover: var(--db-orange-bg-transparent-hover); -$db-orange-bg-transparent-pressed: var(--db-orange-bg-transparent-pressed); -$db-orange-on-bg-enabled: var(--db-orange-on-bg-enabled); -$db-orange-on-bg-hover: var(--db-orange-on-bg-hover); -$db-orange-on-bg-pressed: var(--db-orange-on-bg-pressed); -$db-orange-on-bg-weak-enabled: var(--db-orange-on-bg-weak-enabled); -$db-orange-on-bg-weak-hover: var(--db-orange-on-bg-weak-hover); -$db-orange-on-bg-weak-pressed: var(--db-orange-on-bg-weak-pressed); -$db-orange-on-contrast-enabled: var(--db-orange-on-contrast-enabled); -$db-orange-contrast-high-enabled: var(--db-orange-contrast-high-enabled); -$db-orange-contrast-high-hover: var(--db-orange-contrast-high-hover); -$db-orange-contrast-high-pressed: var(--db-orange-contrast-high-pressed); -$db-orange-contrast-low-enabled: var(--db-orange-contrast-low-enabled); -$db-orange-contrast-low-hover: var(--db-orange-contrast-low-hover); -$db-orange-contrast-low-pressed: var(--db-orange-contrast-low-pressed); -$db-orange-border: var(--db-orange-border); -$db-orange-on-enabled: var(--db-orange-on-enabled); -$db-orange-on-hover: var(--db-orange-on-hover); -$db-orange-on-pressed: var(--db-orange-on-pressed); -$db-orange-origin-enabled: var(--db-orange-origin-enabled); -$db-orange-origin-hover: var(--db-orange-origin-hover); -$db-orange-origin-pressed: var(--db-orange-origin-pressed); - -// red -$db-red-bg-lvl-1-enabled: var(--db-red-bg-lvl-1-enabled); -$db-red-bg-lvl-1-hover: var(--db-red-bg-lvl-1-hover); -$db-red-bg-lvl-1-pressed: var(--db-red-bg-lvl-1-pressed); -$db-red-bg-lvl-2-enabled: var(--db-red-bg-lvl-2-enabled); -$db-red-bg-lvl-2-hover: var(--db-red-bg-lvl-2-hover); -$db-red-bg-lvl-2-pressed: var(--db-red-bg-lvl-2-pressed); -$db-red-bg-lvl-3-enabled: var(--db-red-bg-lvl-3-enabled); -$db-red-bg-lvl-3-hover: var(--db-red-bg-lvl-3-hover); -$db-red-bg-lvl-3-pressed: var(--db-red-bg-lvl-3-pressed); -$db-red-bg-transparent-full-enabled: var(--db-red-bg-transparent-full-enabled); -$db-red-bg-transparent-semi-enabled: var(--db-red-bg-transparent-semi-enabled); -$db-red-bg-transparent-hover: var(--db-red-bg-transparent-hover); -$db-red-bg-transparent-pressed: var(--db-red-bg-transparent-pressed); -$db-red-on-bg-enabled: var(--db-red-on-bg-enabled); -$db-red-on-bg-hover: var(--db-red-on-bg-hover); -$db-red-on-bg-pressed: var(--db-red-on-bg-pressed); -$db-red-on-bg-weak-enabled: var(--db-red-on-bg-weak-enabled); -$db-red-on-bg-weak-hover: var(--db-red-on-bg-weak-hover); -$db-red-on-bg-weak-pressed: var(--db-red-on-bg-weak-pressed); -$db-red-on-contrast-enabled: var(--db-red-on-contrast-enabled); -$db-red-contrast-high-enabled: var(--db-red-contrast-high-enabled); -$db-red-contrast-high-hover: var(--db-red-contrast-high-hover); -$db-red-contrast-high-pressed: var(--db-red-contrast-high-pressed); -$db-red-contrast-low-enabled: var(--db-red-contrast-low-enabled); -$db-red-contrast-low-hover: var(--db-red-contrast-low-hover); -$db-red-contrast-low-pressed: var(--db-red-contrast-low-pressed); -$db-red-border: var(--db-red-border); -$db-red-on-enabled: var(--db-red-on-enabled); -$db-red-on-hover: var(--db-red-on-hover); -$db-red-on-pressed: var(--db-red-on-pressed); -$db-red-origin-enabled: var(--db-red-origin-enabled); -$db-red-origin-hover: var(--db-red-origin-hover); -$db-red-origin-pressed: var(--db-red-origin-pressed); - -// pink -$db-pink-bg-lvl-1-enabled: var(--db-pink-bg-lvl-1-enabled); -$db-pink-bg-lvl-1-hover: var(--db-pink-bg-lvl-1-hover); -$db-pink-bg-lvl-1-pressed: var(--db-pink-bg-lvl-1-pressed); -$db-pink-bg-lvl-2-enabled: var(--db-pink-bg-lvl-2-enabled); -$db-pink-bg-lvl-2-hover: var(--db-pink-bg-lvl-2-hover); -$db-pink-bg-lvl-2-pressed: var(--db-pink-bg-lvl-2-pressed); -$db-pink-bg-lvl-3-enabled: var(--db-pink-bg-lvl-3-enabled); -$db-pink-bg-lvl-3-hover: var(--db-pink-bg-lvl-3-hover); -$db-pink-bg-lvl-3-pressed: var(--db-pink-bg-lvl-3-pressed); -$db-pink-bg-transparent-full-enabled: var( - --db-pink-bg-transparent-full-enabled -); -$db-pink-bg-transparent-semi-enabled: var( - --db-pink-bg-transparent-semi-enabled -); -$db-pink-bg-transparent-hover: var(--db-pink-bg-transparent-hover); -$db-pink-bg-transparent-pressed: var(--db-pink-bg-transparent-pressed); -$db-pink-on-bg-enabled: var(--db-pink-on-bg-enabled); -$db-pink-on-bg-hover: var(--db-pink-on-bg-hover); -$db-pink-on-bg-pressed: var(--db-pink-on-bg-pressed); -$db-pink-on-bg-weak-enabled: var(--db-pink-on-bg-weak-enabled); -$db-pink-on-bg-weak-hover: var(--db-pink-on-bg-weak-hover); -$db-pink-on-bg-weak-pressed: var(--db-pink-on-bg-weak-pressed); -$db-pink-on-contrast-enabled: var(--db-pink-on-contrast-enabled); -$db-pink-contrast-high-enabled: var(--db-pink-contrast-high-enabled); -$db-pink-contrast-high-hover: var(--db-pink-contrast-high-hover); -$db-pink-contrast-high-pressed: var(--db-pink-contrast-high-pressed); -$db-pink-contrast-low-enabled: var(--db-pink-contrast-low-enabled); -$db-pink-contrast-low-hover: var(--db-pink-contrast-low-hover); -$db-pink-contrast-low-pressed: var(--db-pink-contrast-low-pressed); -$db-pink-border: var(--db-pink-border); -$db-pink-on-enabled: var(--db-pink-on-enabled); -$db-pink-on-hover: var(--db-pink-on-hover); -$db-pink-on-pressed: var(--db-pink-on-pressed); -$db-pink-origin-enabled: var(--db-pink-origin-enabled); -$db-pink-origin-hover: var(--db-pink-origin-hover); -$db-pink-origin-pressed: var(--db-pink-origin-pressed); - -// violet -$db-violet-bg-lvl-1-enabled: var(--db-violet-bg-lvl-1-enabled); -$db-violet-bg-lvl-1-hover: var(--db-violet-bg-lvl-1-hover); -$db-violet-bg-lvl-1-pressed: var(--db-violet-bg-lvl-1-pressed); -$db-violet-bg-lvl-2-enabled: var(--db-violet-bg-lvl-2-enabled); -$db-violet-bg-lvl-2-hover: var(--db-violet-bg-lvl-2-hover); -$db-violet-bg-lvl-2-pressed: var(--db-violet-bg-lvl-2-pressed); -$db-violet-bg-lvl-3-enabled: var(--db-violet-bg-lvl-3-enabled); -$db-violet-bg-lvl-3-hover: var(--db-violet-bg-lvl-3-hover); -$db-violet-bg-lvl-3-pressed: var(--db-violet-bg-lvl-3-pressed); -$db-violet-bg-transparent-full-enabled: var( - --db-violet-bg-transparent-full-enabled -); -$db-violet-bg-transparent-semi-enabled: var( - --db-violet-bg-transparent-semi-enabled -); -$db-violet-bg-transparent-hover: var(--db-violet-bg-transparent-hover); -$db-violet-bg-transparent-pressed: var(--db-violet-bg-transparent-pressed); -$db-violet-on-bg-enabled: var(--db-violet-on-bg-enabled); -$db-violet-on-bg-hover: var(--db-violet-on-bg-hover); -$db-violet-on-bg-pressed: var(--db-violet-on-bg-pressed); -$db-violet-on-bg-weak-enabled: var(--db-violet-on-bg-weak-enabled); -$db-violet-on-bg-weak-hover: var(--db-violet-on-bg-weak-hover); -$db-violet-on-bg-weak-pressed: var(--db-violet-on-bg-weak-pressed); -$db-violet-on-contrast-enabled: var(--db-violet-on-contrast-enabled); -$db-violet-contrast-high-enabled: var(--db-violet-contrast-high-enabled); -$db-violet-contrast-high-hover: var(--db-violet-contrast-high-hover); -$db-violet-contrast-high-pressed: var(--db-violet-contrast-high-pressed); -$db-violet-contrast-low-enabled: var(--db-violet-contrast-low-enabled); -$db-violet-contrast-low-hover: var(--db-violet-contrast-low-hover); -$db-violet-contrast-low-pressed: var(--db-violet-contrast-low-pressed); -$db-violet-border: var(--db-violet-border); -$db-violet-on-enabled: var(--db-violet-on-enabled); -$db-violet-on-hover: var(--db-violet-on-hover); -$db-violet-on-pressed: var(--db-violet-on-pressed); -$db-violet-origin-enabled: var(--db-violet-origin-enabled); -$db-violet-origin-hover: var(--db-violet-origin-hover); -$db-violet-origin-pressed: var(--db-violet-origin-pressed); - -// blue -$db-blue-bg-lvl-1-enabled: var(--db-blue-bg-lvl-1-enabled); -$db-blue-bg-lvl-1-hover: var(--db-blue-bg-lvl-1-hover); -$db-blue-bg-lvl-1-pressed: var(--db-blue-bg-lvl-1-pressed); -$db-blue-bg-lvl-2-enabled: var(--db-blue-bg-lvl-2-enabled); -$db-blue-bg-lvl-2-hover: var(--db-blue-bg-lvl-2-hover); -$db-blue-bg-lvl-2-pressed: var(--db-blue-bg-lvl-2-pressed); -$db-blue-bg-lvl-3-enabled: var(--db-blue-bg-lvl-3-enabled); -$db-blue-bg-lvl-3-hover: var(--db-blue-bg-lvl-3-hover); -$db-blue-bg-lvl-3-pressed: var(--db-blue-bg-lvl-3-pressed); -$db-blue-bg-transparent-full-enabled: var( - --db-blue-bg-transparent-full-enabled -); -$db-blue-bg-transparent-semi-enabled: var( - --db-blue-bg-transparent-semi-enabled -); -$db-blue-bg-transparent-hover: var(--db-blue-bg-transparent-hover); -$db-blue-bg-transparent-pressed: var(--db-blue-bg-transparent-pressed); -$db-blue-on-bg-enabled: var(--db-blue-on-bg-enabled); -$db-blue-on-bg-hover: var(--db-blue-on-bg-hover); -$db-blue-on-bg-pressed: var(--db-blue-on-bg-pressed); -$db-blue-on-bg-weak-enabled: var(--db-blue-on-bg-weak-enabled); -$db-blue-on-bg-weak-hover: var(--db-blue-on-bg-weak-hover); -$db-blue-on-bg-weak-pressed: var(--db-blue-on-bg-weak-pressed); -$db-blue-on-contrast-enabled: var(--db-blue-on-contrast-enabled); -$db-blue-contrast-high-enabled: var(--db-blue-contrast-high-enabled); -$db-blue-contrast-high-hover: var(--db-blue-contrast-high-hover); -$db-blue-contrast-high-pressed: var(--db-blue-contrast-high-pressed); -$db-blue-contrast-low-enabled: var(--db-blue-contrast-low-enabled); -$db-blue-contrast-low-hover: var(--db-blue-contrast-low-hover); -$db-blue-contrast-low-pressed: var(--db-blue-contrast-low-pressed); -$db-blue-border: var(--db-blue-border); -$db-blue-on-enabled: var(--db-blue-on-enabled); -$db-blue-on-hover: var(--db-blue-on-hover); -$db-blue-on-pressed: var(--db-blue-on-pressed); -$db-blue-origin-enabled: var(--db-blue-origin-enabled); -$db-blue-origin-hover: var(--db-blue-origin-hover); -$db-blue-origin-pressed: var(--db-blue-origin-pressed); - -// cyan -$db-cyan-bg-lvl-1-enabled: var(--db-cyan-bg-lvl-1-enabled); -$db-cyan-bg-lvl-1-hover: var(--db-cyan-bg-lvl-1-hover); -$db-cyan-bg-lvl-1-pressed: var(--db-cyan-bg-lvl-1-pressed); -$db-cyan-bg-lvl-2-enabled: var(--db-cyan-bg-lvl-2-enabled); -$db-cyan-bg-lvl-2-hover: var(--db-cyan-bg-lvl-2-hover); -$db-cyan-bg-lvl-2-pressed: var(--db-cyan-bg-lvl-2-pressed); -$db-cyan-bg-lvl-3-enabled: var(--db-cyan-bg-lvl-3-enabled); -$db-cyan-bg-lvl-3-hover: var(--db-cyan-bg-lvl-3-hover); -$db-cyan-bg-lvl-3-pressed: var(--db-cyan-bg-lvl-3-pressed); -$db-cyan-bg-transparent-full-enabled: var( - --db-cyan-bg-transparent-full-enabled -); -$db-cyan-bg-transparent-semi-enabled: var( - --db-cyan-bg-transparent-semi-enabled -); -$db-cyan-bg-transparent-hover: var(--db-cyan-bg-transparent-hover); -$db-cyan-bg-transparent-pressed: var(--db-cyan-bg-transparent-pressed); -$db-cyan-on-bg-enabled: var(--db-cyan-on-bg-enabled); -$db-cyan-on-bg-hover: var(--db-cyan-on-bg-hover); -$db-cyan-on-bg-pressed: var(--db-cyan-on-bg-pressed); -$db-cyan-on-bg-weak-enabled: var(--db-cyan-on-bg-weak-enabled); -$db-cyan-on-bg-weak-hover: var(--db-cyan-on-bg-weak-hover); -$db-cyan-on-bg-weak-pressed: var(--db-cyan-on-bg-weak-pressed); -$db-cyan-on-contrast-enabled: var(--db-cyan-on-contrast-enabled); -$db-cyan-contrast-high-enabled: var(--db-cyan-contrast-high-enabled); -$db-cyan-contrast-high-hover: var(--db-cyan-contrast-high-hover); -$db-cyan-contrast-high-pressed: var(--db-cyan-contrast-high-pressed); -$db-cyan-contrast-low-enabled: var(--db-cyan-contrast-low-enabled); -$db-cyan-contrast-low-hover: var(--db-cyan-contrast-low-hover); -$db-cyan-contrast-low-pressed: var(--db-cyan-contrast-low-pressed); -$db-cyan-border: var(--db-cyan-border); -$db-cyan-on-enabled: var(--db-cyan-on-enabled); -$db-cyan-on-hover: var(--db-cyan-on-hover); -$db-cyan-on-pressed: var(--db-cyan-on-pressed); -$db-cyan-origin-enabled: var(--db-cyan-origin-enabled); -$db-cyan-origin-hover: var(--db-cyan-origin-hover); -$db-cyan-origin-pressed: var(--db-cyan-origin-pressed); - -// turquoise -$db-turquoise-bg-lvl-1-enabled: var(--db-turquoise-bg-lvl-1-enabled); -$db-turquoise-bg-lvl-1-hover: var(--db-turquoise-bg-lvl-1-hover); -$db-turquoise-bg-lvl-1-pressed: var(--db-turquoise-bg-lvl-1-pressed); -$db-turquoise-bg-lvl-2-enabled: var(--db-turquoise-bg-lvl-2-enabled); -$db-turquoise-bg-lvl-2-hover: var(--db-turquoise-bg-lvl-2-hover); -$db-turquoise-bg-lvl-2-pressed: var(--db-turquoise-bg-lvl-2-pressed); -$db-turquoise-bg-lvl-3-enabled: var(--db-turquoise-bg-lvl-3-enabled); -$db-turquoise-bg-lvl-3-hover: var(--db-turquoise-bg-lvl-3-hover); -$db-turquoise-bg-lvl-3-pressed: var(--db-turquoise-bg-lvl-3-pressed); -$db-turquoise-bg-transparent-full-enabled: var( - --db-turquoise-bg-transparent-full-enabled -); -$db-turquoise-bg-transparent-semi-enabled: var( - --db-turquoise-bg-transparent-semi-enabled -); -$db-turquoise-bg-transparent-hover: var(--db-turquoise-bg-transparent-hover); -$db-turquoise-bg-transparent-pressed: var( - --db-turquoise-bg-transparent-pressed -); -$db-turquoise-on-bg-enabled: var(--db-turquoise-on-bg-enabled); -$db-turquoise-on-bg-hover: var(--db-turquoise-on-bg-hover); -$db-turquoise-on-bg-pressed: var(--db-turquoise-on-bg-pressed); -$db-turquoise-on-bg-weak-enabled: var(--db-turquoise-on-bg-weak-enabled); -$db-turquoise-on-bg-weak-hover: var(--db-turquoise-on-bg-weak-hover); -$db-turquoise-on-bg-weak-pressed: var(--db-turquoise-on-bg-weak-pressed); -$db-turquoise-on-contrast-enabled: var(--db-turquoise-on-contrast-enabled); -$db-turquoise-contrast-high-enabled: var(--db-turquoise-contrast-high-enabled); -$db-turquoise-contrast-high-hover: var(--db-turquoise-contrast-high-hover); -$db-turquoise-contrast-high-pressed: var(--db-turquoise-contrast-high-pressed); -$db-turquoise-contrast-low-enabled: var(--db-turquoise-contrast-low-enabled); -$db-turquoise-contrast-low-hover: var(--db-turquoise-contrast-low-hover); -$db-turquoise-contrast-low-pressed: var(--db-turquoise-contrast-low-pressed); -$db-turquoise-border: var(--db-turquoise-border); -$db-turquoise-on-enabled: var(--db-turquoise-on-enabled); -$db-turquoise-on-hover: var(--db-turquoise-on-hover); -$db-turquoise-on-pressed: var(--db-turquoise-on-pressed); -$db-turquoise-origin-enabled: var(--db-turquoise-origin-enabled); -$db-turquoise-origin-hover: var(--db-turquoise-origin-hover); -$db-turquoise-origin-pressed: var(--db-turquoise-origin-pressed); - -// green -$db-green-bg-lvl-1-enabled: var(--db-green-bg-lvl-1-enabled); -$db-green-bg-lvl-1-hover: var(--db-green-bg-lvl-1-hover); -$db-green-bg-lvl-1-pressed: var(--db-green-bg-lvl-1-pressed); -$db-green-bg-lvl-2-enabled: var(--db-green-bg-lvl-2-enabled); -$db-green-bg-lvl-2-hover: var(--db-green-bg-lvl-2-hover); -$db-green-bg-lvl-2-pressed: var(--db-green-bg-lvl-2-pressed); -$db-green-bg-lvl-3-enabled: var(--db-green-bg-lvl-3-enabled); -$db-green-bg-lvl-3-hover: var(--db-green-bg-lvl-3-hover); -$db-green-bg-lvl-3-pressed: var(--db-green-bg-lvl-3-pressed); -$db-green-bg-transparent-full-enabled: var( - --db-green-bg-transparent-full-enabled -); -$db-green-bg-transparent-semi-enabled: var( - --db-green-bg-transparent-semi-enabled -); -$db-green-bg-transparent-hover: var(--db-green-bg-transparent-hover); -$db-green-bg-transparent-pressed: var(--db-green-bg-transparent-pressed); -$db-green-on-bg-enabled: var(--db-green-on-bg-enabled); -$db-green-on-bg-hover: var(--db-green-on-bg-hover); -$db-green-on-bg-pressed: var(--db-green-on-bg-pressed); -$db-green-on-bg-weak-enabled: var(--db-green-on-bg-weak-enabled); -$db-green-on-bg-weak-hover: var(--db-green-on-bg-weak-hover); -$db-green-on-bg-weak-pressed: var(--db-green-on-bg-weak-pressed); -$db-green-on-contrast-enabled: var(--db-green-on-contrast-enabled); -$db-green-contrast-high-enabled: var(--db-green-contrast-high-enabled); -$db-green-contrast-high-hover: var(--db-green-contrast-high-hover); -$db-green-contrast-high-pressed: var(--db-green-contrast-high-pressed); -$db-green-contrast-low-enabled: var(--db-green-contrast-low-enabled); -$db-green-contrast-low-hover: var(--db-green-contrast-low-hover); -$db-green-contrast-low-pressed: var(--db-green-contrast-low-pressed); -$db-green-border: var(--db-green-border); -$db-green-on-enabled: var(--db-green-on-enabled); -$db-green-on-hover: var(--db-green-on-hover); -$db-green-on-pressed: var(--db-green-on-pressed); -$db-green-origin-enabled: var(--db-green-origin-enabled); -$db-green-origin-hover: var(--db-green-origin-hover); -$db-green-origin-pressed: var(--db-green-origin-pressed); +@forward "speaking-colors/additional/blue.speaking-colors"; +@forward "speaking-colors/additional/cyan.speaking-colors"; +@forward "speaking-colors/additional/green.speaking-colors"; +@forward "speaking-colors/additional/orange.speaking-colors"; +@forward "speaking-colors/additional/pink.speaking-colors"; +@forward "speaking-colors/additional/red.speaking-colors"; +@forward "speaking-colors/additional/turquoise.speaking-colors"; +@forward "speaking-colors/additional/violet.speaking-colors"; +@forward "speaking-colors/additional/yellow.speaking-colors"; diff --git a/packages/foundations/scss/colors/_variables.palette.scss b/packages/foundations/scss/colors/_variables.palette.scss index 2758670f085..b21c92a0364 100644 --- a/packages/foundations/scss/colors/_variables.palette.scss +++ b/packages/foundations/scss/colors/_variables.palette.scss @@ -16,6 +16,21 @@ $db-brand-9: var(--db-brand-9); $db-brand-10: var(--db-brand-10); $db-brand-11: var(--db-brand-11); $db-brand-12: var(--db-brand-12); +$db-brand-13: var(--db-brand-13); +$db-brand-14: var(--db-brand-14); +$db-brand-origin: var(--db-brand-origin); +$db-brand-origin-light-default: var(--db-brand-origin-light-default); +$db-brand-origin-light-hovered: var(--db-brand-origin-light-hovered); +$db-brand-origin-light-pressed: var(--db-brand-origin-light-pressed); +$db-brand-on-origin-light-default: var(--db-brand-on-origin-light-default); +$db-brand-on-origin-light-hovered: var(--db-brand-on-origin-light-hovered); +$db-brand-on-origin-light-pressed: var(--db-brand-on-origin-light-pressed); +$db-brand-origin-dark-default: var(--db-brand-origin-dark-default); +$db-brand-origin-dark-hovered: var(--db-brand-origin-dark-hovered); +$db-brand-origin-dark-pressed: var(--db-brand-origin-dark-pressed); +$db-brand-on-origin-dark-default: var(--db-brand-on-origin-dark-default); +$db-brand-on-origin-dark-hovered: var(--db-brand-on-origin-dark-hovered); +$db-brand-on-origin-dark-pressed: var(--db-brand-on-origin-dark-pressed); // neutral $db-neutral-0: var(--db-neutral-0); @@ -31,6 +46,21 @@ $db-neutral-9: var(--db-neutral-9); $db-neutral-10: var(--db-neutral-10); $db-neutral-11: var(--db-neutral-11); $db-neutral-12: var(--db-neutral-12); +$db-neutral-13: var(--db-neutral-13); +$db-neutral-14: var(--db-neutral-14); +$db-neutral-origin: var(--db-neutral-origin); +$db-neutral-origin-light-default: var(--db-neutral-origin-light-default); +$db-neutral-origin-light-hovered: var(--db-neutral-origin-light-hovered); +$db-neutral-origin-light-pressed: var(--db-neutral-origin-light-pressed); +$db-neutral-on-origin-light-default: var(--db-neutral-on-origin-light-default); +$db-neutral-on-origin-light-hovered: var(--db-neutral-on-origin-light-hovered); +$db-neutral-on-origin-light-pressed: var(--db-neutral-on-origin-light-pressed); +$db-neutral-origin-dark-default: var(--db-neutral-origin-dark-default); +$db-neutral-origin-dark-hovered: var(--db-neutral-origin-dark-hovered); +$db-neutral-origin-dark-pressed: var(--db-neutral-origin-dark-pressed); +$db-neutral-on-origin-dark-default: var(--db-neutral-on-origin-dark-default); +$db-neutral-on-origin-dark-hovered: var(--db-neutral-on-origin-dark-hovered); +$db-neutral-on-origin-dark-pressed: var(--db-neutral-on-origin-dark-pressed); // informational $db-informational-0: var(--db-informational-0); @@ -46,6 +76,45 @@ $db-informational-9: var(--db-informational-9); $db-informational-10: var(--db-informational-10); $db-informational-11: var(--db-informational-11); $db-informational-12: var(--db-informational-12); +$db-informational-13: var(--db-informational-13); +$db-informational-14: var(--db-informational-14); +$db-informational-origin: var(--db-informational-origin); +$db-informational-origin-light-default: var( + --db-informational-origin-light-default +); +$db-informational-origin-light-hovered: var( + --db-informational-origin-light-hovered +); +$db-informational-origin-light-pressed: var( + --db-informational-origin-light-pressed +); +$db-informational-on-origin-light-default: var( + --db-informational-on-origin-light-default +); +$db-informational-on-origin-light-hovered: var( + --db-informational-on-origin-light-hovered +); +$db-informational-on-origin-light-pressed: var( + --db-informational-on-origin-light-pressed +); +$db-informational-origin-dark-default: var( + --db-informational-origin-dark-default +); +$db-informational-origin-dark-hovered: var( + --db-informational-origin-dark-hovered +); +$db-informational-origin-dark-pressed: var( + --db-informational-origin-dark-pressed +); +$db-informational-on-origin-dark-default: var( + --db-informational-on-origin-dark-default +); +$db-informational-on-origin-dark-hovered: var( + --db-informational-on-origin-dark-hovered +); +$db-informational-on-origin-dark-pressed: var( + --db-informational-on-origin-dark-pressed +); // warning $db-warning-0: var(--db-warning-0); @@ -61,6 +130,21 @@ $db-warning-9: var(--db-warning-9); $db-warning-10: var(--db-warning-10); $db-warning-11: var(--db-warning-11); $db-warning-12: var(--db-warning-12); +$db-warning-13: var(--db-warning-13); +$db-warning-14: var(--db-warning-14); +$db-warning-origin: var(--db-warning-origin); +$db-warning-origin-light-default: var(--db-warning-origin-light-default); +$db-warning-origin-light-hovered: var(--db-warning-origin-light-hovered); +$db-warning-origin-light-pressed: var(--db-warning-origin-light-pressed); +$db-warning-on-origin-light-default: var(--db-warning-on-origin-light-default); +$db-warning-on-origin-light-hovered: var(--db-warning-on-origin-light-hovered); +$db-warning-on-origin-light-pressed: var(--db-warning-on-origin-light-pressed); +$db-warning-origin-dark-default: var(--db-warning-origin-dark-default); +$db-warning-origin-dark-hovered: var(--db-warning-origin-dark-hovered); +$db-warning-origin-dark-pressed: var(--db-warning-origin-dark-pressed); +$db-warning-on-origin-dark-default: var(--db-warning-on-origin-dark-default); +$db-warning-on-origin-dark-hovered: var(--db-warning-on-origin-dark-hovered); +$db-warning-on-origin-dark-pressed: var(--db-warning-on-origin-dark-pressed); // successful $db-successful-0: var(--db-successful-0); @@ -76,6 +160,33 @@ $db-successful-9: var(--db-successful-9); $db-successful-10: var(--db-successful-10); $db-successful-11: var(--db-successful-11); $db-successful-12: var(--db-successful-12); +$db-successful-13: var(--db-successful-13); +$db-successful-14: var(--db-successful-14); +$db-successful-origin: var(--db-successful-origin); +$db-successful-origin-light-default: var(--db-successful-origin-light-default); +$db-successful-origin-light-hovered: var(--db-successful-origin-light-hovered); +$db-successful-origin-light-pressed: var(--db-successful-origin-light-pressed); +$db-successful-on-origin-light-default: var( + --db-successful-on-origin-light-default +); +$db-successful-on-origin-light-hovered: var( + --db-successful-on-origin-light-hovered +); +$db-successful-on-origin-light-pressed: var( + --db-successful-on-origin-light-pressed +); +$db-successful-origin-dark-default: var(--db-successful-origin-dark-default); +$db-successful-origin-dark-hovered: var(--db-successful-origin-dark-hovered); +$db-successful-origin-dark-pressed: var(--db-successful-origin-dark-pressed); +$db-successful-on-origin-dark-default: var( + --db-successful-on-origin-dark-default +); +$db-successful-on-origin-dark-hovered: var( + --db-successful-on-origin-dark-hovered +); +$db-successful-on-origin-dark-pressed: var( + --db-successful-on-origin-dark-pressed +); // critical $db-critical-0: var(--db-critical-0); @@ -91,3 +202,24 @@ $db-critical-9: var(--db-critical-9); $db-critical-10: var(--db-critical-10); $db-critical-11: var(--db-critical-11); $db-critical-12: var(--db-critical-12); +$db-critical-13: var(--db-critical-13); +$db-critical-14: var(--db-critical-14); +$db-critical-origin: var(--db-critical-origin); +$db-critical-origin-light-default: var(--db-critical-origin-light-default); +$db-critical-origin-light-hovered: var(--db-critical-origin-light-hovered); +$db-critical-origin-light-pressed: var(--db-critical-origin-light-pressed); +$db-critical-on-origin-light-default: var( + --db-critical-on-origin-light-default +); +$db-critical-on-origin-light-hovered: var( + --db-critical-on-origin-light-hovered +); +$db-critical-on-origin-light-pressed: var( + --db-critical-on-origin-light-pressed +); +$db-critical-origin-dark-default: var(--db-critical-origin-dark-default); +$db-critical-origin-dark-hovered: var(--db-critical-origin-dark-hovered); +$db-critical-origin-dark-pressed: var(--db-critical-origin-dark-pressed); +$db-critical-on-origin-dark-default: var(--db-critical-on-origin-dark-default); +$db-critical-on-origin-dark-hovered: var(--db-critical-on-origin-dark-hovered); +$db-critical-on-origin-dark-pressed: var(--db-critical-on-origin-dark-pressed); diff --git a/packages/foundations/scss/colors/_variables.scss b/packages/foundations/scss/colors/_variables.scss index 9815dcc385f..e1c9dbffef0 100644 --- a/packages/foundations/scss/colors/_variables.scss +++ b/packages/foundations/scss/colors/_variables.scss @@ -3,74 +3,154 @@ $variants: "neutral", "brand", "critical", "successful", "warning", $variant-colors: "neutral", "critical", "successful", "warning", "informational"; -$on-background-colors: "default", "weak", "contrast", "contrast-weak", "border"; +$on-background-colors: "emphasis-100", "emphasis-90", "emphasis-80", + "emphasis-70", "emphasis-60", "emphasis-50"; -$background-colors: "lvl-1", "lvl-2", "lvl-3", "transparent-full", - "transparent-semi"; +$background-colors: "basic-level-1", "basic-level-2", "basic-level-3", + "basic-transparent-semi", "basic-transparent-full"; +$inverted-colors: "contrast-max", "contrast-high", "contrast-low"; -// current - for adaptive colors -$db-current-color-on-bg-enabled: var(--db-current-color-on-bg-enabled); -$db-current-color-on-bg-hover: var(--db-current-color-on-bg-hover); -$db-current-color-on-bg-pressed: var(--db-current-color-on-bg-pressed); -$db-current-color-on-bg-weak-enabled: var( - --db-current-color-on-bg-weak-enabled +// adaptive colors + +// bg basic +$db-adaptive-bg-basic-level-1-default: var( + --db-adaptive-bg-basic-level-1-default +); +$db-adaptive-bg-basic-level-1-hovered: var( + --db-adaptive-bg-basic-level-1-hovered +); +$db-adaptive-bg-basic-level-1-pressed: var( + --db-adaptive-bg-basic-level-1-pressed +); +$db-adaptive-bg-basic-level-2-default: var( + --db-adaptive-bg-basic-level-2-default +); +$db-adaptive-bg-basic-level-2-hovered: var( + --db-adaptive-bg-basic-level-2-hovered +); +$db-adaptive-bg-basic-level-2-pressed: var( + --db-adaptive-bg-basic-level-2-pressed +); +$db-adaptive-bg-basic-level-3-default: var( + --db-adaptive-bg-basic-level-3-default +); +$db-adaptive-bg-basic-level-3-hovered: var( + --db-adaptive-bg-basic-level-3-hovered +); +$db-adaptive-bg-basic-level-3-pressed: var( + --db-adaptive-bg-basic-level-3-pressed +); + +$db-adaptive-bg-basic-transparent-full-default: var( + --db-adaptive-bg-basic-transparent-full-default +); +$db-adaptive-bg-basic-transparent-semi-default: var( + --db-adaptive-bg-basic-transparent-semi-default +); +$db-adaptive-bg-basic-transparent-hovered: var( + --db-adaptive-bg-basic-transparent-hovered +); +$db-adaptive-bg-basic-transparent-pressed: var( + --db-adaptive-bg-basic-transparent-pressed +); + +// on-bg basic +$db-adaptive-on-bg-basic-emphasis-100-default: var( + --db-adaptive-on-bg-basic-emphasis-100-default +); +$db-adaptive-on-bg-basic-emphasis-100-hovered: var( + --db-adaptive-on-bg-basic-emphasis-100-hovered ); -$db-current-color-on-bg-weak-hover: var(--db-current-color-on-bg-weak-hover); -$db-current-color-on-bg-weak-pressed: var( - --db-current-color-on-bg-weak-pressed +$db-adaptive-on-bg-basic-emphasis-100-pressed: var( + --db-adaptive-on-bg-basic-emphasis-100-pressed ); -$db-current-color-bg-lvl-1-enabled: var(--db-current-color-bg-lvl-1-enabled); -$db-current-color-bg-lvl-1-hover: var(--db-current-color-bg-lvl-1-hover); -$db-current-color-bg-lvl-1-pressed: var(--db-current-color-bg-lvl-1-pressed); -$db-current-color-bg-lvl-2-enabled: var(--db-current-color-bg-lvl-2-enabled); -$db-current-color-bg-lvl-2-hover: var(--db-current-color-bg-lvl-2-hover); -$db-current-color-bg-lvl-2-pressed: var(--db-current-color-bg-lvl-2-pressed); -$db-current-color-bg-lvl-3-enabled: var(--db-current-color-bg-lvl-3-enabled); -$db-current-color-bg-lvl-3-hover: var(--db-current-color-bg-lvl-3-hover); -$db-current-color-bg-lvl-3-pressed: var(--db-current-color-bg-lvl-3-pressed); -$db-current-color-on-contrast-enabled: var( - --db-current-color-on-contrast-enabled +$db-adaptive-on-bg-basic-emphasis-90-default: var( + --db-adaptive-on-bg-basic-emphasis-90-default ); -$db-current-color-on-contrast-hover: var(--db-current-color-on-contrast-hover); -$db-current-color-on-contrast-pressed: var( - --db-current-color-on-contrast-pressed +$db-adaptive-on-bg-basic-emphasis-90-hovered: var( + --db-adaptive-on-bg-basic-emphasis-90-hovered ); -$db-current-color-contrast-high-enabled: var( - --db-current-color-contrast-high-enabled +$db-adaptive-on-bg-basic-emphasis-90-pressed: var( + --db-adaptive-on-bg-basic-emphasis-90-pressed ); -$db-current-color-contrast-high-hover: var( - --db-current-color-contrast-high-hover +$db-adaptive-on-bg-basic-emphasis-80-default: var( + --db-adaptive-on-bg-basic-emphasis-80-default ); -$db-current-color-contrast-high-pressed: var( - --db-current-color-contrast-high-pressed +$db-adaptive-on-bg-basic-emphasis-80-hovered: var( + --db-adaptive-on-bg-basic-emphasis-80-hovered ); -$db-current-color-contrast-low-enabled: var( - --db-current-color-contrast-low-enabled +$db-adaptive-on-bg-basic-emphasis-80-pressed: var( + --db-adaptive-on-bg-basic-emphasis-80-pressed ); -$db-current-color-contrast-low-hover: var( - --db-current-color-contrast-low-hover +$db-adaptive-on-bg-basic-emphasis-70-default: var( + --db-adaptive-on-bg-basic-emphasis-70-default ); -$db-current-color-contrast-low-pressed: var( - --db-current-color-contrast-low-pressed +$db-adaptive-on-bg-basic-emphasis-70-hovered: var( + --db-adaptive-on-bg-basic-emphasis-70-hovered ); -$db-current-color-border: var(--db-current-color-border); -$db-current-color-bg-transparent-full-enabled: var( - --db-current-color-bg-transparent-full-enabled +$db-adaptive-on-bg-basic-emphasis-70-pressed: var( + --db-adaptive-on-bg-basic-emphasis-70-pressed ); -$db-current-color-bg-transparent-semi-enabled: var( - --db-current-color-bg-transparent-semi-enabled +$db-adaptive-on-bg-basic-emphasis-60-default: var( + --db-adaptive-on-bg-basic-emphasis-60-default ); -$db-current-color-bg-transparent-hover: var( - --db-current-color-bg-transparent-hover +$db-adaptive-on-bg-basic-emphasis-60-hovered: var( + --db-adaptive-on-bg-basic-emphasis-60-hovered ); -$db-current-color-bg-transparent-pressed: var( - --db-current-color-bg-transparent-pressed +$db-adaptive-on-bg-basic-emphasis-60-pressed: var( + --db-adaptive-on-bg-basic-emphasis-60-pressed ); +$db-adaptive-on-bg-basic-emphasis-50-default: var( + --db-adaptive-on-bg-basic-emphasis-50-default +); +$db-adaptive-on-bg-basic-emphasis-50-hovered: var( + --db-adaptive-on-bg-basic-emphasis-50-hovered +); +$db-adaptive-on-bg-basic-emphasis-50-pressed: var( + --db-adaptive-on-bg-basic-emphasis-50-pressed +); + +// inverted + +$db-adaptive-bg-inverted-contrast-max-default: var( + --db-adaptive-bg-inverted-contrast-max-default +); +$db-adaptive-bg-inverted-contrast-max-hovered: var( + --db-adaptive-bg-inverted-contrast-max-hovered +); +$db-adaptive-bg-inverted-contrast-max-pressed: var( + --db-adaptive-bg-inverted-contrast-max-pressed +); +$db-adaptive-bg-inverted-contrast-high-default: var( + --db-adaptive-bg-inverted-contrast-high-default +); +$db-adaptive-bg-inverted-contrast-high-hovered: var( + --db-adaptive-bg-inverted-contrast-high-hovered +); +$db-adaptive-bg-inverted-contrast-high-pressed: var( + --db-adaptive-bg-inverted-contrast-high-pressed +); +$db-adaptive-bg-inverted-contrast-low-default: var( + --db-adaptive-bg-inverted-contrast-low-default +); +$db-adaptive-bg-inverted-contrast-low-hovered: var( + --db-adaptive-bg-inverted-contrast-low-hovered +); +$db-adaptive-bg-inverted-contrast-low-pressed: var( + --db-adaptive-bg-inverted-contrast-low-pressed +); + +// on-bg-inverted +$db-adaptive-on-bg-inverted-default: var(--db-adaptive-on-bg-inverted-default); +$db-adaptive-on-bg-inverted-hovered: var(--db-adaptive-on-bg-inverted-hovered); +$db-adaptive-on-bg-inverted-pressed: var(--db-adaptive-on-bg-inverted-pressed); + +// origin +$db-adaptive-origin-default: var(--db-adaptive-origin-default); +$db-adaptive-origin-hovered: var(--db-adaptive-origin-hovered); +$db-adaptive-origin-pressed: var(--db-adaptive-origin-pressed); -// special tokens just for db-button -$db-brand-on-enabled: var(--db-brand-on-enabled); -$db-brand-on-hover: var(--db-brand-on-hover); -$db-brand-on-pressed: var(--db-brand-on-pressed); -$db-brand-origin-enabled: var(--db-brand-origin-enabled); -$db-brand-origin-hover: var(--db-brand-origin-hover); -$db-brand-origin-pressed: var(--db-brand-origin-pressed); +// on-origin +$db-adaptive-on-origin-default: var(--db-adaptive-on-origin-default); +$db-adaptive-on-origin-hovered: var(--db-adaptive-on-origin-hovered); +$db-adaptive-on-origin-pressed: var(--db-adaptive-on-origin-pressed); diff --git a/packages/foundations/scss/colors/_variables.speaking-colors.scss b/packages/foundations/scss/colors/_variables.speaking-colors.scss index e3a28ca610f..61ae55e3f09 100644 --- a/packages/foundations/scss/colors/_variables.speaking-colors.scss +++ b/packages/foundations/scss/colors/_variables.speaking-colors.scss @@ -1,221 +1,8 @@ /* Variants for adaptive components like input, select, notification, ... */ -$db-brand-bg-lvl-1-enabled: var(--db-brand-bg-lvl-1-enabled); -$db-brand-bg-lvl-1-hover: var(--db-brand-bg-lvl-1-hover); -$db-brand-bg-lvl-1-pressed: var(--db-brand-bg-lvl-1-pressed); -$db-brand-bg-lvl-2-enabled: var(--db-brand-bg-lvl-2-enabled); -$db-brand-bg-lvl-2-hover: var(--db-brand-bg-lvl-2-hover); -$db-brand-bg-lvl-2-pressed: var(--db-brand-bg-lvl-2-pressed); -$db-brand-bg-lvl-3-enabled: var(--db-brand-bg-lvl-3-enabled); -$db-brand-bg-lvl-3-hover: var(--db-brand-bg-lvl-3-hover); -$db-brand-bg-lvl-3-pressed: var(--db-brand-bg-lvl-3-pressed); -$db-brand-bg-transparent-full-enabled: var( - --db-brand-bg-transparent-full-enabled -); -$db-brand-bg-transparent-semi-enabled: var( - --db-brand-bg-transparent-semi-enabled -); -$db-brand-bg-transparent-hover: var(--db-brand-bg-transparent-hover); -$db-brand-bg-transparent-pressed: var(--db-brand-bg-transparent-pressed); -$db-brand-on-bg-enabled: var(--db-brand-on-bg-enabled); -$db-brand-on-bg-hover: var(--db-brand-on-bg-hover); -$db-brand-on-bg-pressed: var(--db-brand-on-bg-pressed); -$db-brand-on-bg-weak-enabled: var(--db-brand-on-bg-weak-enabled); -$db-brand-on-bg-weak-hover: var(--db-brand-on-bg-weak-hover); -$db-brand-on-bg-weak-pressed: var(--db-brand-on-bg-weak-pressed); -$db-brand-on-contrast-enabled: var(--db-brand-on-contrast-enabled); -$db-brand-contrast-high-enabled: var(--db-brand-contrast-high-enabled); -$db-brand-contrast-high-hover: var(--db-brand-contrast-high-hover); -$db-brand-contrast-high-pressed: var(--db-brand-contrast-high-pressed); -$db-brand-contrast-low-enabled: var(--db-brand-contrast-low-enabled); -$db-brand-contrast-low-hover: var(--db-brand-contrast-low-hover); -$db-brand-contrast-low-pressed: var(--db-brand-contrast-low-pressed); -$db-brand-border: var(--db-brand-border); - -$db-neutral-bg-lvl-1-enabled: var(--db-neutral-bg-lvl-1-enabled); -$db-neutral-bg-lvl-1-hover: var(--db-neutral-bg-lvl-1-hover); -$db-neutral-bg-lvl-1-pressed: var(--db-neutral-bg-lvl-1-pressed); -$db-neutral-bg-lvl-2-enabled: var(--db-neutral-bg-lvl-2-enabled); -$db-neutral-bg-lvl-2-hover: var(--db-neutral-bg-lvl-2-hover); -$db-neutral-bg-lvl-2-pressed: var(--db-neutral-bg-lvl-2-pressed); -$db-neutral-bg-lvl-3-enabled: var(--db-neutral-bg-lvl-3-enabled); -$db-neutral-bg-lvl-3-hover: var(--db-neutral-bg-lvl-3-hover); -$db-neutral-bg-lvl-3-pressed: var(--db-neutral-bg-lvl-3-pressed); -$db-neutral-bg-transparent-full-enabled: var( - --db-neutral-bg-transparent-full-enabled -); -$db-neutral-bg-transparent-semi-enabled: var( - --db-neutral-bg-transparent-semi-enabled -); -$db-neutral-bg-transparent-hover: var(--db-neutral-bg-transparent-hover); -$db-neutral-bg-transparent-pressed: var(--db-neutral-bg-transparent-pressed); -$db-neutral-on-bg-enabled: var(--db-neutral-on-bg-enabled); -$db-neutral-on-bg-hover: var(--db-neutral-on-bg-hover); -$db-neutral-on-bg-pressed: var(--db-neutral-on-bg-pressed); -$db-neutral-on-bg-weak-enabled: var(--db-neutral-on-bg-weak-enabled); -$db-neutral-on-bg-weak-hover: var(--db-neutral-on-bg-weak-hover); -$db-neutral-on-bg-weak-pressed: var(--db-neutral-on-bg-weak-pressed); -$db-neutral-on-contrast-enabled: var(--db-neutral-on-contrast-enabled); -$db-neutral-contrast-high-enabled: var(--db-neutral-contrast-high-enabled); -$db-neutral-contrast-high-hover: var(--db-neutral-contrast-high-hover); -$db-neutral-contrast-high-pressed: var(--db-neutral-contrast-high-pressed); -$db-neutral-contrast-low-enabled: var(--db-neutral-contrast-low-enabled); -$db-neutral-contrast-low-hover: var(--db-neutral-contrast-low-hover); -$db-neutral-contrast-low-pressed: var(--db-neutral-contrast-low-pressed); -$db-neutral-border: var(--db-neutral-border); - -$db-informational-bg-lvl-1-enabled: var(--db-informational-bg-lvl-1-enabled); -$db-informational-bg-lvl-1-hover: var(--db-informational-bg-lvl-1-hover); -$db-informational-bg-lvl-1-pressed: var(--db-informational-bg-lvl-1-pressed); -$db-informational-bg-lvl-2-enabled: var(--db-informational-bg-lvl-2-enabled); -$db-informational-bg-lvl-2-hover: var(--db-informational-bg-lvl-2-hover); -$db-informational-bg-lvl-2-pressed: var(--db-informational-bg-lvl-2-pressed); -$db-informational-bg-lvl-3-enabled: var(--db-informational-bg-lvl-3-enabled); -$db-informational-bg-lvl-3-hover: var(--db-informational-bg-lvl-3-hover); -$db-informational-bg-lvl-3-pressed: var(--db-informational-bg-lvl-3-pressed); -$db-informational-bg-transparent-full-enabled: var( - --db-informational-bg-transparent-full -); -$db-informational-bg-transparent-semi-enabled: var( - --db-informational-bg-transparent-semi -); -$db-informational-bg-transparent-hover: var( - --db-informational-bg-transparent-hover -); -$db-informational-bg-transparent-pressed: var( - --db-informational-bg-transparent-pressed -); -$db-informational-on-bg-enabled: var(--db-informational-on-bg-enabled); -$db-informational-on-bg-hover: var(--db-informational-on-bg-hover); -$db-informational-on-bg-pressed: var(--db-informational-on-bg-pressed); -$db-informational-on-bg-weak-enabled: var( - --db-informational-on-bg-weak-enabled -); -$db-informational-on-bg-weak-hover: var(--db-informational-on-bg-weak-hover); -$db-informational-on-bg-weak-pressed: var( - --db-informational-on-bg-weak-pressed -); -$db-informational-on-contrast-enabled: var( - --db-informational-on-contrast-enabled -); -$db-informational-contrast-high-enabled: var( - --db-informational-contrast-high-enabled -); -$db-informational-contrast-high-hover: var( - --db-informational-contrast-high-hover -); -$db-informational-contrast-high-pressed: var( - --db-informational-contrast-high-pressed -); -$db-informational-contrast-low-enabled: var( - --db-informational-contrast-low-enabled -); -$db-informational-contrast-low-hover: var( - --db-informational-contrast-low-hover -); -$db-informational-contrast-low-pressed: var( - --db-informational-contrast-low-pressed -); -$db-informational-border: var(--db-informational-border); - -$db-warning-bg-lvl-1-enabled: var(--db-warning-bg-lvl-1-enabled); -$db-warning-bg-lvl-1-hover: var(--db-warning-bg-lvl-1-hover); -$db-warning-bg-lvl-1-pressed: var(--db-warning-bg-lvl-1-pressed); -$db-warning-bg-lvl-2-enabled: var(--db-warning-bg-lvl-2-enabled); -$db-warning-bg-lvl-2-hover: var(--db-warning-bg-lvl-2-hover); -$db-warning-bg-lvl-2-pressed: var(--db-warning-bg-lvl-2-pressed); -$db-warning-bg-lvl-3-enabled: var(--db-warning-bg-lvl-3-enabled); -$db-warning-bg-lvl-3-hover: var(--db-warning-bg-lvl-3-hover); -$db-warning-bg-lvl-3-pressed: var(--db-warning-bg-lvl-3-pressed); -$db-warning-bg-transparent-full-enabled: var( - --db-warning-bg-transparent-full-enabled -); -$db-warning-bg-transparent-semi-enabled: var( - --db-warning-bg-transparent-semi-enabled -); -$db-warning-bg-transparent-hover: var(--db-warning-bg-transparent-hover); -$db-warning-bg-transparent-pressed: var(--db-warning-bg-transparent-pressed); -$db-warning-on-bg-enabled: var(--db-warning-on-bg-enabled); -$db-warning-on-bg-hover: var(--db-warning-on-bg-hover); -$db-warning-on-bg-pressed: var(--db-warning-on-bg-pressed); -$db-warning-on-bg-weak-enabled: var(--db-warning-on-bg-weak-enabled); -$db-warning-on-bg-weak-hover: var(--db-warning-on-bg-weak-hover); -$db-warning-on-bg-weak-pressed: var(--db-warning-on-bg-weak-pressed); -$db-warning-on-contrast-enabled: var(--db-warning-on-contrast-enabled); -$db-warning-contrast-high-enabled: var(--db-warning-contrast-high-enabled); -$db-warning-contrast-high-hover: var(--db-warning-contrast-high-hover); -$db-warning-contrast-high-pressed: var(--db-warning-contrast-high-pressed); -$db-warning-contrast-low-enabled: var(--db-warning-contrast-low-enabled); -$db-warning-contrast-low-hover: var(--db-warning-contrast-low-hover); -$db-warning-contrast-low-pressed: var(--db-warning-contrast-low-pressed); -$db-warning-border: var(--db-warning-border); - -$db-successful-bg-lvl-1-enabled: var(--db-successful-bg-lvl-1-enabled); -$db-successful-bg-lvl-1-hover: var(--db-successful-bg-lvl-1-hover); -$db-successful-bg-lvl-1-pressed: var(--db-successful-bg-lvl-1-pressed); -$db-successful-bg-lvl-2-enabled: var(--db-successful-bg-lvl-2-enabled); -$db-successful-bg-lvl-2-hover: var(--db-successful-bg-lvl-2-hover); -$db-successful-bg-lvl-2-pressed: var(--db-successful-bg-lvl-2-pressed); -$db-successful-bg-lvl-3-enabled: var(--db-successful-bg-lvl-3-enabled); -$db-successful-bg-lvl-3-hover: var(--db-successful-bg-lvl-3-hover); -$db-successful-bg-lvl-3-pressed: var(--db-successful-bg-lvl-3-pressed); -$db-successful-bg-transparent-full-enabled: var( - --db-successful-bg-transparent-full-enabled -); -$db-successful-bg-transparent-semi-enabled: var( - --db-successful-bg-transparent-semi-enabled -); -$db-successful-bg-transparent-hover: var(--db-successful-bg-transparent-hover); -$db-successful-bg-transparent-pressed: var( - --db-successful-bg-transparent-pressed -); -$db-successful-on-bg-enabled: var(--db-successful-on-bg-enabled); -$db-successful-on-bg-hover: var(--db-successful-on-bg-hover); -$db-successful-on-bg-pressed: var(--db-successful-on-bg-pressed); -$db-successful-on-bg-weak-enabled: var(--db-successful-on-bg-weak-enabled); -$db-successful-on-bg-weak-hover: var(--db-successful-on-bg-weak-hover); -$db-successful-on-bg-weak-pressed: var(--db-successful-on-bg-weak-pressed); -$db-successful-on-contrast-enabled: var(--db-successful-on-contrast-enabled); -$db-successful-contrast-high-enabled: var( - --db-successful-contrast-high-enabled -); -$db-successful-contrast-high-hover: var(--db-successful-contrast-high-hover); -$db-successful-contrast-high-pressed: var( - --db-successful-contrast-high-pressed -); -$db-successful-contrast-low-enabled: var(--db-successful-contrast-low-enabled); -$db-successful-contrast-low-hover: var(--db-successful-contrast-low-hover); -$db-successful-contrast-low-pressed: var(--db-successful-contrast-low-pressed); -$db-successful-border: var(--db-successful-border); - -$db-critical-bg-lvl-1-enabled: var(--db-critical-bg-lvl-1-enabled); -$db-critical-bg-lvl-1-hover: var(--db-critical-bg-lvl-1-hover); -$db-critical-bg-lvl-1-pressed: var(--db-critical-bg-lvl-1-pressed); -$db-critical-bg-lvl-2-enabled: var(--db-critical-bg-lvl-2-enabled); -$db-critical-bg-lvl-2-hover: var(--db-critical-bg-lvl-2-hover); -$db-critical-bg-lvl-2-pressed: var(--db-critical-bg-lvl-2-pressed); -$db-critical-bg-lvl-3-enabled: var(--db-critical-bg-lvl-3-enabled); -$db-critical-bg-lvl-3-hover: var(--db-critical-bg-lvl-3-hover); -$db-critical-bg-lvl-3-pressed: var(--db-critical-bg-lvl-3-pressed); -$db-critical-bg-transparent-full-enabled: var( - --db-critical-bg-transparent-full-enabled -); -$db-critical-bg-transparent-semi-enabled: var( - --db-critical-bg-transparent-semi-enabled -); -$db-critical-bg-transparent-hover: var(--db-critical-bg-transparent-hover); -$db-critical-bg-transparent-pressed: var(--db-critical-bg-transparent-pressed); -$db-critical-on-bg-enabled: var(--db-critical-on-bg-enabled); -$db-critical-on-bg-hover: var(--db-critical-on-bg-hover); -$db-critical-on-bg-pressed: var(--db-critical-on-bg-pressed); -$db-critical-on-bg-weak-enabled: var(--db-critical-on-bg-weak-enabled); -$db-critical-on-bg-weak-hover: var(--db-critical-on-bg-weak-hover); -$db-critical-on-bg-weak-pressed: var(--db-critical-on-bg-weak-pressed); -$db-critical-on-contrast-enabled: var(--db-critical-on-contrast-enabled); -$db-critical-contrast-high-enabled: var(--db-critical-contrast-high-enabled); -$db-critical-contrast-high-hover: var(--db-critical-contrast-high-hover); -$db-critical-contrast-high-pressed: var(--db-critical-contrast-high-pressed); -$db-critical-contrast-low-enabled: var(--db-critical-contrast-low-enabled); -$db-critical-contrast-low-hover: var(--db-critical-contrast-low-hover); -$db-critical-contrast-low-pressed: var(--db-critical-contrast-low-pressed); -$db-critical-border: var(--db-critical-border); +@forward "speaking-colors/semantic/brand.speaking-colors"; +@forward "speaking-colors/semantic/neutral.speaking-colors"; +@forward "speaking-colors/semantic/informational.speaking-colors"; +@forward "speaking-colors/semantic/successful.speaking-colors"; +@forward "speaking-colors/semantic/warning.speaking-colors"; +@forward "speaking-colors/semantic/critical.speaking-colors"; diff --git a/packages/foundations/scss/colors/classes/_get-class.scss b/packages/foundations/scss/colors/classes/_get-class.scss index 19359caca37..ad7662b3687 100644 --- a/packages/foundations/scss/colors/classes/_get-class.scss +++ b/packages/foundations/scss/colors/classes/_get-class.scss @@ -1,35 +1,15 @@ @mixin init($variant) { - [data-color="#{$variant}-bg-lvl-1"], - .db-#{$variant}-bg-lvl-1 { - @extend %db-#{$variant}-bg-lvl-1; + [data-color="#{$variant}-bg-basic-level-1"], + .db-#{$variant}-bg-basic-level-1 { + @extend %db-#{$variant}-bg-basic-level-1; } - [data-color="#{$variant}-bg-lvl-2"], - .db-#{$variant}-bg-lvl-2 { - @extend %db-#{$variant}-bg-lvl-2; + [data-color="#{$variant}-bg-basic-level-2"], + .db-#{$variant}-bg-basic-level-2 { + @extend %db-#{$variant}-bg-basic-level-2; } - [data-color="#{$variant}-bg-lvl-3"], - .db-#{$variant}-bg-lvl-3 { - @extend %db-#{$variant}-bg-lvl-3; - } - [data-color="#{$variant}-bg-transparent-full"], - .db-#{$variant}-bg-transparent-full { - @extend %db-#{$variant}-bg-transparent-full; - } - [data-color="#{$variant}-bg-transparent-semi"], - .db-#{$variant}-bg-transparent-semi { - @extend %db-#{$variant}-bg-transparent-semi; - } - - @each $contrast in [ "high", "low"] { - [data-color="#{$variant}-contrast-#{$contrast}"], - .db-#{$variant}-contrast-#{$contrast} { - @extend %db-#{$variant}-contrast-#{$contrast}; - } - - [data-color="#{$variant}-contrast-#{$contrast}-interactive"], - .db-#{$variant}-contrast-#{$contrast}-interactive { - @extend %db-#{$variant}-contrast-#{$contrast}-interactive; - } + [data-color="#{$variant}-bg-basic-level-3"], + .db-#{$variant}-bg-basic-level-3 { + @extend %db-#{$variant}-bg-basic-level-3; } } @@ -38,45 +18,21 @@ .db-container-color-#{$variant} { @extend %db-#{$variant}-variables; - color: var(--db-current-color-on-bg-enabled); - background-color: var(--db-current-color-bg-lvl-1-enabled); + color: var(--db-adaptive-on-bg-basic-emphasis-100-default); + background-color: var(--db-adaptive-bg-basic-level-1-default); } } @mixin init-on-background-colors($color) { [data-on-bg-color="#{$color}"], .db-on-bg-color-#{$color} { - @if $color == "default" { - color: var(--db-current-color-on-bg-enabled); - } - - @else if $color == "weak" { - color: var(--db-current-color-on-bg-weak-enabled); - } - - @else if $color == "contrast" { - color: var(--db-current-color-contrast-high-enabled); - } - - @else if $color == "contrast-weak" { - color: var(--db-current-color-contrast-low-enabled); - } - - @else if $color == "border" { - color: var(--db-current-color-border); - } - - @else { - @error "Unknown color #{$color}."; - } + color: var(-db-adaptive-on-bg-basic-#{$color}-default); } } @mixin init-background-colors($background-color) { [data-bg-color="#{$background-color}"], .db-bg-color-#{$background-color} { - background-color: var( - --db-current-color-bg-#{$background-color}-enabled - ); + background-color: var(--db-adaptive-bg-#{$background-color}-default); } } diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_blue.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_blue.speaking-colors.scss new file mode 100644 index 00000000000..fa1a12f29f4 --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/additional/_blue.speaking-colors.scss @@ -0,0 +1,112 @@ +$db-blue-bg-basic-level-1-default: var(--db-blue-bg-basic-level-1-default); +$db-blue-bg-basic-level-1-hovered: var(--db-blue-bg-basic-level-1-hovered); +$db-blue-bg-basic-level-1-pressed: var(--db-blue-bg-basic-level-1-pressed); +$db-blue-bg-basic-level-2-default: var(--db-blue-bg-basic-level-2-default); +$db-blue-bg-basic-level-2-hovered: var(--db-blue-bg-basic-level-2-hovered); +$db-blue-bg-basic-level-2-pressed: var(--db-blue-bg-basic-level-2-pressed); +$db-blue-bg-basic-level-3-default: var(--db-blue-bg-basic-level-3-default); +$db-blue-bg-basic-level-3-hovered: var(--db-blue-bg-basic-level-3-hovered); +$db-blue-bg-basic-level-3-pressed: var(--db-blue-bg-basic-level-3-pressed); + +$db-blue-bg-basic-transparent-full-default: var( + --db-blue-bg-basic-transparent-full-default +); +$db-blue-bg-basic-transparent-semi-default: var( + --db-blue-bg-basic-transparent-semi-default +); +$db-blue-bg-basic-transparent-hovered: var( + --db-blue-bg-basic-transparent-hovered +); +$db-blue-bg-basic-transparent-pressed: var( + --db-blue-bg-basic-transparent-pressed +); +$db-blue-on-bg-basic-emphasis-100-default: var( + --db-blue-on-bg-basic-emphasis-100-default +); +$db-blue-on-bg-basic-emphasis-100-hovered: var( + --db-blue-on-bg-basic-emphasis-100-hovered +); +$db-blue-on-bg-basic-emphasis-100-pressed: var( + --db-blue-on-bg-basic-emphasis-100-pressed +); +$db-blue-on-bg-basic-emphasis-90-default: var( + --db-blue-on-bg-basic-emphasis-90-default +); +$db-blue-on-bg-basic-emphasis-90-hovered: var( + --db-blue-on-bg-basic-emphasis-90-hovered +); +$db-blue-on-bg-basic-emphasis-90-pressed: var( + --db-blue-on-bg-basic-emphasis-90-pressed +); +$db-blue-on-bg-basic-emphasis-80-default: var( + --db-blue-on-bg-basic-emphasis-80-default +); +$db-blue-on-bg-basic-emphasis-80-hovered: var( + --db-blue-on-bg-basic-emphasis-80-hovered +); +$db-blue-on-bg-basic-emphasis-80-pressed: var( + --db-blue-on-bg-basic-emphasis-80-pressed +); +$db-blue-on-bg-basic-emphasis-70-default: var( + --db-blue-on-bg-basic-emphasis-70-default +); +$db-blue-on-bg-basic-emphasis-70-hovered: var( + --db-blue-on-bg-basic-emphasis-70-hovered +); +$db-blue-on-bg-basic-emphasis-70-pressed: var( + --db-blue-on-bg-basic-emphasis-70-pressed +); +$db-blue-on-bg-basic-emphasis-60-default: var( + --db-blue-on-bg-basic-emphasis-60-default +); +$db-blue-on-bg-basic-emphasis-60-hovered: var( + --db-blue-on-bg-basic-emphasis-60-hovered +); +$db-blue-on-bg-basic-emphasis-60-pressed: var( + --db-blue-on-bg-basic-emphasis-60-pressed +); +$db-blue-on-bg-basic-emphasis-50-default: var( + --db-blue-on-bg-basic-emphasis-50-default +); +$db-blue-on-bg-basic-emphasis-50-hovered: var( + --db-blue-on-bg-basic-emphasis-50-hovered +); +$db-blue-on-bg-basic-emphasis-50-pressed: var( + --db-blue-on-bg-basic-emphasis-50-pressed +); +$db-blue-bg-inverted-contrast-max-default: var( + --db-blue-bg-inverted-contrast-max-default +); +$db-blue-bg-inverted-contrast-max-hovered: var( + --db-blue-bg-inverted-contrast-max-hovered +); +$db-blue-bg-inverted-contrast-max-pressed: var( + --db-blue-bg-inverted-contrast-max-pressed +); +$db-blue-bg-inverted-contrast-high-default: var( + --db-blue-bg-inverted-contrast-high-default +); +$db-blue-bg-inverted-contrast-high-hovered: var( + --db-blue-bg-inverted-contrast-high-hovered +); +$db-blue-bg-inverted-contrast-high-pressed: var( + --db-blue-bg-inverted-contrast-high-pressed +); +$db-blue-bg-inverted-contrast-low-default: var( + --db-blue-bg-inverted-contrast-low-default +); +$db-blue-bg-inverted-contrast-low-hovered: var( + --db-blue-bg-inverted-contrast-low-hovered +); +$db-blue-bg-inverted-contrast-low-pressed: var( + --db-blue-bg-inverted-contrast-low-pressed +); +$db-blue-on-bg-inverted-default: var(--db-blue-on-bg-inverted-default); +$db-blue-on-bg-inverted-hovered: var(--db-blue-on-bg-inverted-hovered); +$db-blue-on-bg-inverted-pressed: var(--db-blue-on-bg-inverted-pressed); +$db-blue-origin-default: var(--db-blue-origin-default); +$db-blue-origin-hovered: var(--db-blue-origin-hovered); +$db-blue-origin-pressed: var(--db-blue-origin-pressed); +$db-blue-on-origin-default: var(--db-blue-on-origin-default); +$db-blue-on-origin-hovered: var(--db-blue-on-origin-hovered); +$db-blue-on-origin-pressed: var(--db-blue-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_cyan.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_cyan.speaking-colors.scss new file mode 100644 index 00000000000..495e6bc03f2 --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/additional/_cyan.speaking-colors.scss @@ -0,0 +1,112 @@ +$db-cyan-bg-basic-level-1-default: var(--db-cyan-bg-basic-level-1-default); +$db-cyan-bg-basic-level-1-hovered: var(--db-cyan-bg-basic-level-1-hovered); +$db-cyan-bg-basic-level-1-pressed: var(--db-cyan-bg-basic-level-1-pressed); +$db-cyan-bg-basic-level-2-default: var(--db-cyan-bg-basic-level-2-default); +$db-cyan-bg-basic-level-2-hovered: var(--db-cyan-bg-basic-level-2-hovered); +$db-cyan-bg-basic-level-2-pressed: var(--db-cyan-bg-basic-level-2-pressed); +$db-cyan-bg-basic-level-3-default: var(--db-cyan-bg-basic-level-3-default); +$db-cyan-bg-basic-level-3-hovered: var(--db-cyan-bg-basic-level-3-hovered); +$db-cyan-bg-basic-level-3-pressed: var(--db-cyan-bg-basic-level-3-pressed); + +$db-cyan-bg-basic-transparent-full-default: var( + --db-cyan-bg-basic-transparent-full-default +); +$db-cyan-bg-basic-transparent-semi-default: var( + --db-cyan-bg-basic-transparent-semi-default +); +$db-cyan-bg-basic-transparent-hovered: var( + --db-cyan-bg-basic-transparent-hovered +); +$db-cyan-bg-basic-transparent-pressed: var( + --db-cyan-bg-basic-transparent-pressed +); +$db-cyan-on-bg-basic-emphasis-100-default: var( + --db-cyan-on-bg-basic-emphasis-100-default +); +$db-cyan-on-bg-basic-emphasis-100-hovered: var( + --db-cyan-on-bg-basic-emphasis-100-hovered +); +$db-cyan-on-bg-basic-emphasis-100-pressed: var( + --db-cyan-on-bg-basic-emphasis-100-pressed +); +$db-cyan-on-bg-basic-emphasis-90-default: var( + --db-cyan-on-bg-basic-emphasis-90-default +); +$db-cyan-on-bg-basic-emphasis-90-hovered: var( + --db-cyan-on-bg-basic-emphasis-90-hovered +); +$db-cyan-on-bg-basic-emphasis-90-pressed: var( + --db-cyan-on-bg-basic-emphasis-90-pressed +); +$db-cyan-on-bg-basic-emphasis-80-default: var( + --db-cyan-on-bg-basic-emphasis-80-default +); +$db-cyan-on-bg-basic-emphasis-80-hovered: var( + --db-cyan-on-bg-basic-emphasis-80-hovered +); +$db-cyan-on-bg-basic-emphasis-80-pressed: var( + --db-cyan-on-bg-basic-emphasis-80-pressed +); +$db-cyan-on-bg-basic-emphasis-70-default: var( + --db-cyan-on-bg-basic-emphasis-70-default +); +$db-cyan-on-bg-basic-emphasis-70-hovered: var( + --db-cyan-on-bg-basic-emphasis-70-hovered +); +$db-cyan-on-bg-basic-emphasis-70-pressed: var( + --db-cyan-on-bg-basic-emphasis-70-pressed +); +$db-cyan-on-bg-basic-emphasis-60-default: var( + --db-cyan-on-bg-basic-emphasis-60-default +); +$db-cyan-on-bg-basic-emphasis-60-hovered: var( + --db-cyan-on-bg-basic-emphasis-60-hovered +); +$db-cyan-on-bg-basic-emphasis-60-pressed: var( + --db-cyan-on-bg-basic-emphasis-60-pressed +); +$db-cyan-on-bg-basic-emphasis-50-default: var( + --db-cyan-on-bg-basic-emphasis-50-default +); +$db-cyan-on-bg-basic-emphasis-50-hovered: var( + --db-cyan-on-bg-basic-emphasis-50-hovered +); +$db-cyan-on-bg-basic-emphasis-50-pressed: var( + --db-cyan-on-bg-basic-emphasis-50-pressed +); +$db-cyan-bg-inverted-contrast-max-default: var( + --db-cyan-bg-inverted-contrast-max-default +); +$db-cyan-bg-inverted-contrast-max-hovered: var( + --db-cyan-bg-inverted-contrast-max-hovered +); +$db-cyan-bg-inverted-contrast-max-pressed: var( + --db-cyan-bg-inverted-contrast-max-pressed +); +$db-cyan-bg-inverted-contrast-high-default: var( + --db-cyan-bg-inverted-contrast-high-default +); +$db-cyan-bg-inverted-contrast-high-hovered: var( + --db-cyan-bg-inverted-contrast-high-hovered +); +$db-cyan-bg-inverted-contrast-high-pressed: var( + --db-cyan-bg-inverted-contrast-high-pressed +); +$db-cyan-bg-inverted-contrast-low-default: var( + --db-cyan-bg-inverted-contrast-low-default +); +$db-cyan-bg-inverted-contrast-low-hovered: var( + --db-cyan-bg-inverted-contrast-low-hovered +); +$db-cyan-bg-inverted-contrast-low-pressed: var( + --db-cyan-bg-inverted-contrast-low-pressed +); +$db-cyan-on-bg-inverted-default: var(--db-cyan-on-bg-inverted-default); +$db-cyan-on-bg-inverted-hovered: var(--db-cyan-on-bg-inverted-hovered); +$db-cyan-on-bg-inverted-pressed: var(--db-cyan-on-bg-inverted-pressed); +$db-cyan-origin-default: var(--db-cyan-origin-default); +$db-cyan-origin-hovered: var(--db-cyan-origin-hovered); +$db-cyan-origin-pressed: var(--db-cyan-origin-pressed); +$db-cyan-on-origin-default: var(--db-cyan-on-origin-default); +$db-cyan-on-origin-hovered: var(--db-cyan-on-origin-hovered); +$db-cyan-on-origin-pressed: var(--db-cyan-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_green.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_green.speaking-colors.scss new file mode 100644 index 00000000000..23b415b2177 --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/additional/_green.speaking-colors.scss @@ -0,0 +1,112 @@ +$db-green-bg-basic-level-1-default: var(--db-green-bg-basic-level-1-default); +$db-green-bg-basic-level-1-hovered: var(--db-green-bg-basic-level-1-hovered); +$db-green-bg-basic-level-1-pressed: var(--db-green-bg-basic-level-1-pressed); +$db-green-bg-basic-level-2-default: var(--db-green-bg-basic-level-2-default); +$db-green-bg-basic-level-2-hovered: var(--db-green-bg-basic-level-2-hovered); +$db-green-bg-basic-level-2-pressed: var(--db-green-bg-basic-level-2-pressed); +$db-green-bg-basic-level-3-default: var(--db-green-bg-basic-level-3-default); +$db-green-bg-basic-level-3-hovered: var(--db-green-bg-basic-level-3-hovered); +$db-green-bg-basic-level-3-pressed: var(--db-green-bg-basic-level-3-pressed); + +$db-green-bg-basic-transparent-full-default: var( + --db-green-bg-basic-transparent-full-default +); +$db-green-bg-basic-transparent-semi-default: var( + --db-green-bg-basic-transparent-semi-default +); +$db-green-bg-basic-transparent-hovered: var( + --db-green-bg-basic-transparent-hovered +); +$db-green-bg-basic-transparent-pressed: var( + --db-green-bg-basic-transparent-pressed +); +$db-green-on-bg-basic-emphasis-100-default: var( + --db-green-on-bg-basic-emphasis-100-default +); +$db-green-on-bg-basic-emphasis-100-hovered: var( + --db-green-on-bg-basic-emphasis-100-hovered +); +$db-green-on-bg-basic-emphasis-100-pressed: var( + --db-green-on-bg-basic-emphasis-100-pressed +); +$db-green-on-bg-basic-emphasis-90-default: var( + --db-green-on-bg-basic-emphasis-90-default +); +$db-green-on-bg-basic-emphasis-90-hovered: var( + --db-green-on-bg-basic-emphasis-90-hovered +); +$db-green-on-bg-basic-emphasis-90-pressed: var( + --db-green-on-bg-basic-emphasis-90-pressed +); +$db-green-on-bg-basic-emphasis-80-default: var( + --db-green-on-bg-basic-emphasis-80-default +); +$db-green-on-bg-basic-emphasis-80-hovered: var( + --db-green-on-bg-basic-emphasis-80-hovered +); +$db-green-on-bg-basic-emphasis-80-pressed: var( + --db-green-on-bg-basic-emphasis-80-pressed +); +$db-green-on-bg-basic-emphasis-70-default: var( + --db-green-on-bg-basic-emphasis-70-default +); +$db-green-on-bg-basic-emphasis-70-hovered: var( + --db-green-on-bg-basic-emphasis-70-hovered +); +$db-green-on-bg-basic-emphasis-70-pressed: var( + --db-green-on-bg-basic-emphasis-70-pressed +); +$db-green-on-bg-basic-emphasis-60-default: var( + --db-green-on-bg-basic-emphasis-60-default +); +$db-green-on-bg-basic-emphasis-60-hovered: var( + --db-green-on-bg-basic-emphasis-60-hovered +); +$db-green-on-bg-basic-emphasis-60-pressed: var( + --db-green-on-bg-basic-emphasis-60-pressed +); +$db-green-on-bg-basic-emphasis-50-default: var( + --db-green-on-bg-basic-emphasis-50-default +); +$db-green-on-bg-basic-emphasis-50-hovered: var( + --db-green-on-bg-basic-emphasis-50-hovered +); +$db-green-on-bg-basic-emphasis-50-pressed: var( + --db-green-on-bg-basic-emphasis-50-pressed +); +$db-green-bg-inverted-contrast-max-default: var( + --db-green-bg-inverted-contrast-max-default +); +$db-green-bg-inverted-contrast-max-hovered: var( + --db-green-bg-inverted-contrast-max-hovered +); +$db-green-bg-inverted-contrast-max-pressed: var( + --db-green-bg-inverted-contrast-max-pressed +); +$db-green-bg-inverted-contrast-high-default: var( + --db-green-bg-inverted-contrast-high-default +); +$db-green-bg-inverted-contrast-high-hovered: var( + --db-green-bg-inverted-contrast-high-hovered +); +$db-green-bg-inverted-contrast-high-pressed: var( + --db-green-bg-inverted-contrast-high-pressed +); +$db-green-bg-inverted-contrast-low-default: var( + --db-green-bg-inverted-contrast-low-default +); +$db-green-bg-inverted-contrast-low-hovered: var( + --db-green-bg-inverted-contrast-low-hovered +); +$db-green-bg-inverted-contrast-low-pressed: var( + --db-green-bg-inverted-contrast-low-pressed +); +$db-green-on-bg-inverted-default: var(--db-green-on-bg-inverted-default); +$db-green-on-bg-inverted-hovered: var(--db-green-on-bg-inverted-hovered); +$db-green-on-bg-inverted-pressed: var(--db-green-on-bg-inverted-pressed); +$db-green-origin-default: var(--db-green-origin-default); +$db-green-origin-hovered: var(--db-green-origin-hovered); +$db-green-origin-pressed: var(--db-green-origin-pressed); +$db-green-on-origin-default: var(--db-green-on-origin-default); +$db-green-on-origin-hovered: var(--db-green-on-origin-hovered); +$db-green-on-origin-pressed: var(--db-green-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_orange.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_orange.speaking-colors.scss new file mode 100644 index 00000000000..b50130ec6d0 --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/additional/_orange.speaking-colors.scss @@ -0,0 +1,112 @@ +$db-orange-bg-basic-level-1-default: var(--db-orange-bg-basic-level-1-default); +$db-orange-bg-basic-level-1-hovered: var(--db-orange-bg-basic-level-1-hovered); +$db-orange-bg-basic-level-1-pressed: var(--db-orange-bg-basic-level-1-pressed); +$db-orange-bg-basic-level-2-default: var(--db-orange-bg-basic-level-2-default); +$db-orange-bg-basic-level-2-hovered: var(--db-orange-bg-basic-level-2-hovered); +$db-orange-bg-basic-level-2-pressed: var(--db-orange-bg-basic-level-2-pressed); +$db-orange-bg-basic-level-3-default: var(--db-orange-bg-basic-level-3-default); +$db-orange-bg-basic-level-3-hovered: var(--db-orange-bg-basic-level-3-hovered); +$db-orange-bg-basic-level-3-pressed: var(--db-orange-bg-basic-level-3-pressed); + +$db-orange-bg-basic-transparent-full-default: var( + --db-orange-bg-basic-transparent-full-default +); +$db-orange-bg-basic-transparent-semi-default: var( + --db-orange-bg-basic-transparent-semi-default +); +$db-orange-bg-basic-transparent-hovered: var( + --db-orange-bg-basic-transparent-hovered +); +$db-orange-bg-basic-transparent-pressed: var( + --db-orange-bg-basic-transparent-pressed +); +$db-orange-on-bg-basic-emphasis-100-default: var( + --db-orange-on-bg-basic-emphasis-100-default +); +$db-orange-on-bg-basic-emphasis-100-hovered: var( + --db-orange-on-bg-basic-emphasis-100-hovered +); +$db-orange-on-bg-basic-emphasis-100-pressed: var( + --db-orange-on-bg-basic-emphasis-100-pressed +); +$db-orange-on-bg-basic-emphasis-90-default: var( + --db-orange-on-bg-basic-emphasis-90-default +); +$db-orange-on-bg-basic-emphasis-90-hovered: var( + --db-orange-on-bg-basic-emphasis-90-hovered +); +$db-orange-on-bg-basic-emphasis-90-pressed: var( + --db-orange-on-bg-basic-emphasis-90-pressed +); +$db-orange-on-bg-basic-emphasis-80-default: var( + --db-orange-on-bg-basic-emphasis-80-default +); +$db-orange-on-bg-basic-emphasis-80-hovered: var( + --db-orange-on-bg-basic-emphasis-80-hovered +); +$db-orange-on-bg-basic-emphasis-80-pressed: var( + --db-orange-on-bg-basic-emphasis-80-pressed +); +$db-orange-on-bg-basic-emphasis-70-default: var( + --db-orange-on-bg-basic-emphasis-70-default +); +$db-orange-on-bg-basic-emphasis-70-hovered: var( + --db-orange-on-bg-basic-emphasis-70-hovered +); +$db-orange-on-bg-basic-emphasis-70-pressed: var( + --db-orange-on-bg-basic-emphasis-70-pressed +); +$db-orange-on-bg-basic-emphasis-60-default: var( + --db-orange-on-bg-basic-emphasis-60-default +); +$db-orange-on-bg-basic-emphasis-60-hovered: var( + --db-orange-on-bg-basic-emphasis-60-hovered +); +$db-orange-on-bg-basic-emphasis-60-pressed: var( + --db-orange-on-bg-basic-emphasis-60-pressed +); +$db-orange-on-bg-basic-emphasis-50-default: var( + --db-orange-on-bg-basic-emphasis-50-default +); +$db-orange-on-bg-basic-emphasis-50-hovered: var( + --db-orange-on-bg-basic-emphasis-50-hovered +); +$db-orange-on-bg-basic-emphasis-50-pressed: var( + --db-orange-on-bg-basic-emphasis-50-pressed +); +$db-orange-bg-inverted-contrast-max-default: var( + --db-orange-bg-inverted-contrast-max-default +); +$db-orange-bg-inverted-contrast-max-hovered: var( + --db-orange-bg-inverted-contrast-max-hovered +); +$db-orange-bg-inverted-contrast-max-pressed: var( + --db-orange-bg-inverted-contrast-max-pressed +); +$db-orange-bg-inverted-contrast-high-default: var( + --db-orange-bg-inverted-contrast-high-default +); +$db-orange-bg-inverted-contrast-high-hovered: var( + --db-orange-bg-inverted-contrast-high-hovered +); +$db-orange-bg-inverted-contrast-high-pressed: var( + --db-orange-bg-inverted-contrast-high-pressed +); +$db-orange-bg-inverted-contrast-low-default: var( + --db-orange-bg-inverted-contrast-low-default +); +$db-orange-bg-inverted-contrast-low-hovered: var( + --db-orange-bg-inverted-contrast-low-hovered +); +$db-orange-bg-inverted-contrast-low-pressed: var( + --db-orange-bg-inverted-contrast-low-pressed +); +$db-orange-on-bg-inverted-default: var(--db-orange-on-bg-inverted-default); +$db-orange-on-bg-inverted-hovered: var(--db-orange-on-bg-inverted-hovered); +$db-orange-on-bg-inverted-pressed: var(--db-orange-on-bg-inverted-pressed); +$db-orange-origin-default: var(--db-orange-origin-default); +$db-orange-origin-hovered: var(--db-orange-origin-hovered); +$db-orange-origin-pressed: var(--db-orange-origin-pressed); +$db-orange-on-origin-default: var(--db-orange-on-origin-default); +$db-orange-on-origin-hovered: var(--db-orange-on-origin-hovered); +$db-orange-on-origin-pressed: var(--db-orange-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_pink.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_pink.speaking-colors.scss new file mode 100644 index 00000000000..459b6f9ca67 --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/additional/_pink.speaking-colors.scss @@ -0,0 +1,112 @@ +$db-pink-bg-basic-level-1-default: var(--db-pink-bg-basic-level-1-default); +$db-pink-bg-basic-level-1-hovered: var(--db-pink-bg-basic-level-1-hovered); +$db-pink-bg-basic-level-1-pressed: var(--db-pink-bg-basic-level-1-pressed); +$db-pink-bg-basic-level-2-default: var(--db-pink-bg-basic-level-2-default); +$db-pink-bg-basic-level-2-hovered: var(--db-pink-bg-basic-level-2-hovered); +$db-pink-bg-basic-level-2-pressed: var(--db-pink-bg-basic-level-2-pressed); +$db-pink-bg-basic-level-3-default: var(--db-pink-bg-basic-level-3-default); +$db-pink-bg-basic-level-3-hovered: var(--db-pink-bg-basic-level-3-hovered); +$db-pink-bg-basic-level-3-pressed: var(--db-pink-bg-basic-level-3-pressed); + +$db-pink-bg-basic-transparent-full-default: var( + --db-pink-bg-basic-transparent-full-default +); +$db-pink-bg-basic-transparent-semi-default: var( + --db-pink-bg-basic-transparent-semi-default +); +$db-pink-bg-basic-transparent-hovered: var( + --db-pink-bg-basic-transparent-hovered +); +$db-pink-bg-basic-transparent-pressed: var( + --db-pink-bg-basic-transparent-pressed +); +$db-pink-on-bg-basic-emphasis-100-default: var( + --db-pink-on-bg-basic-emphasis-100-default +); +$db-pink-on-bg-basic-emphasis-100-hovered: var( + --db-pink-on-bg-basic-emphasis-100-hovered +); +$db-pink-on-bg-basic-emphasis-100-pressed: var( + --db-pink-on-bg-basic-emphasis-100-pressed +); +$db-pink-on-bg-basic-emphasis-90-default: var( + --db-pink-on-bg-basic-emphasis-90-default +); +$db-pink-on-bg-basic-emphasis-90-hovered: var( + --db-pink-on-bg-basic-emphasis-90-hovered +); +$db-pink-on-bg-basic-emphasis-90-pressed: var( + --db-pink-on-bg-basic-emphasis-90-pressed +); +$db-pink-on-bg-basic-emphasis-80-default: var( + --db-pink-on-bg-basic-emphasis-80-default +); +$db-pink-on-bg-basic-emphasis-80-hovered: var( + --db-pink-on-bg-basic-emphasis-80-hovered +); +$db-pink-on-bg-basic-emphasis-80-pressed: var( + --db-pink-on-bg-basic-emphasis-80-pressed +); +$db-pink-on-bg-basic-emphasis-70-default: var( + --db-pink-on-bg-basic-emphasis-70-default +); +$db-pink-on-bg-basic-emphasis-70-hovered: var( + --db-pink-on-bg-basic-emphasis-70-hovered +); +$db-pink-on-bg-basic-emphasis-70-pressed: var( + --db-pink-on-bg-basic-emphasis-70-pressed +); +$db-pink-on-bg-basic-emphasis-60-default: var( + --db-pink-on-bg-basic-emphasis-60-default +); +$db-pink-on-bg-basic-emphasis-60-hovered: var( + --db-pink-on-bg-basic-emphasis-60-hovered +); +$db-pink-on-bg-basic-emphasis-60-pressed: var( + --db-pink-on-bg-basic-emphasis-60-pressed +); +$db-pink-on-bg-basic-emphasis-50-default: var( + --db-pink-on-bg-basic-emphasis-50-default +); +$db-pink-on-bg-basic-emphasis-50-hovered: var( + --db-pink-on-bg-basic-emphasis-50-hovered +); +$db-pink-on-bg-basic-emphasis-50-pressed: var( + --db-pink-on-bg-basic-emphasis-50-pressed +); +$db-pink-bg-inverted-contrast-max-default: var( + --db-pink-bg-inverted-contrast-max-default +); +$db-pink-bg-inverted-contrast-max-hovered: var( + --db-pink-bg-inverted-contrast-max-hovered +); +$db-pink-bg-inverted-contrast-max-pressed: var( + --db-pink-bg-inverted-contrast-max-pressed +); +$db-pink-bg-inverted-contrast-high-default: var( + --db-pink-bg-inverted-contrast-high-default +); +$db-pink-bg-inverted-contrast-high-hovered: var( + --db-pink-bg-inverted-contrast-high-hovered +); +$db-pink-bg-inverted-contrast-high-pressed: var( + --db-pink-bg-inverted-contrast-high-pressed +); +$db-pink-bg-inverted-contrast-low-default: var( + --db-pink-bg-inverted-contrast-low-default +); +$db-pink-bg-inverted-contrast-low-hovered: var( + --db-pink-bg-inverted-contrast-low-hovered +); +$db-pink-bg-inverted-contrast-low-pressed: var( + --db-pink-bg-inverted-contrast-low-pressed +); +$db-pink-on-bg-inverted-default: var(--db-pink-on-bg-inverted-default); +$db-pink-on-bg-inverted-hovered: var(--db-pink-on-bg-inverted-hovered); +$db-pink-on-bg-inverted-pressed: var(--db-pink-on-bg-inverted-pressed); +$db-pink-origin-default: var(--db-pink-origin-default); +$db-pink-origin-hovered: var(--db-pink-origin-hovered); +$db-pink-origin-pressed: var(--db-pink-origin-pressed); +$db-pink-on-origin-default: var(--db-pink-on-origin-default); +$db-pink-on-origin-hovered: var(--db-pink-on-origin-hovered); +$db-pink-on-origin-pressed: var(--db-pink-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_red.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_red.speaking-colors.scss new file mode 100644 index 00000000000..bdbc5da7b3f --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/additional/_red.speaking-colors.scss @@ -0,0 +1,112 @@ +$db-red-bg-basic-level-1-default: var(--db-red-bg-basic-level-1-default); +$db-red-bg-basic-level-1-hovered: var(--db-red-bg-basic-level-1-hovered); +$db-red-bg-basic-level-1-pressed: var(--db-red-bg-basic-level-1-pressed); +$db-red-bg-basic-level-2-default: var(--db-red-bg-basic-level-2-default); +$db-red-bg-basic-level-2-hovered: var(--db-red-bg-basic-level-2-hovered); +$db-red-bg-basic-level-2-pressed: var(--db-red-bg-basic-level-2-pressed); +$db-red-bg-basic-level-3-default: var(--db-red-bg-basic-level-3-default); +$db-red-bg-basic-level-3-hovered: var(--db-red-bg-basic-level-3-hovered); +$db-red-bg-basic-level-3-pressed: var(--db-red-bg-basic-level-3-pressed); + +$db-red-bg-basic-transparent-full-default: var( + --db-red-bg-basic-transparent-full-default +); +$db-red-bg-basic-transparent-semi-default: var( + --db-red-bg-basic-transparent-semi-default +); +$db-red-bg-basic-transparent-hovered: var( + --db-red-bg-basic-transparent-hovered +); +$db-red-bg-basic-transparent-pressed: var( + --db-red-bg-basic-transparent-pressed +); +$db-red-on-bg-basic-emphasis-100-default: var( + --db-red-on-bg-basic-emphasis-100-default +); +$db-red-on-bg-basic-emphasis-100-hovered: var( + --db-red-on-bg-basic-emphasis-100-hovered +); +$db-red-on-bg-basic-emphasis-100-pressed: var( + --db-red-on-bg-basic-emphasis-100-pressed +); +$db-red-on-bg-basic-emphasis-90-default: var( + --db-red-on-bg-basic-emphasis-90-default +); +$db-red-on-bg-basic-emphasis-90-hovered: var( + --db-red-on-bg-basic-emphasis-90-hovered +); +$db-red-on-bg-basic-emphasis-90-pressed: var( + --db-red-on-bg-basic-emphasis-90-pressed +); +$db-red-on-bg-basic-emphasis-80-default: var( + --db-red-on-bg-basic-emphasis-80-default +); +$db-red-on-bg-basic-emphasis-80-hovered: var( + --db-red-on-bg-basic-emphasis-80-hovered +); +$db-red-on-bg-basic-emphasis-80-pressed: var( + --db-red-on-bg-basic-emphasis-80-pressed +); +$db-red-on-bg-basic-emphasis-70-default: var( + --db-red-on-bg-basic-emphasis-70-default +); +$db-red-on-bg-basic-emphasis-70-hovered: var( + --db-red-on-bg-basic-emphasis-70-hovered +); +$db-red-on-bg-basic-emphasis-70-pressed: var( + --db-red-on-bg-basic-emphasis-70-pressed +); +$db-red-on-bg-basic-emphasis-60-default: var( + --db-red-on-bg-basic-emphasis-60-default +); +$db-red-on-bg-basic-emphasis-60-hovered: var( + --db-red-on-bg-basic-emphasis-60-hovered +); +$db-red-on-bg-basic-emphasis-60-pressed: var( + --db-red-on-bg-basic-emphasis-60-pressed +); +$db-red-on-bg-basic-emphasis-50-default: var( + --db-red-on-bg-basic-emphasis-50-default +); +$db-red-on-bg-basic-emphasis-50-hovered: var( + --db-red-on-bg-basic-emphasis-50-hovered +); +$db-red-on-bg-basic-emphasis-50-pressed: var( + --db-red-on-bg-basic-emphasis-50-pressed +); +$db-red-bg-inverted-contrast-max-default: var( + --db-red-bg-inverted-contrast-max-default +); +$db-red-bg-inverted-contrast-max-hovered: var( + --db-red-bg-inverted-contrast-max-hovered +); +$db-red-bg-inverted-contrast-max-pressed: var( + --db-red-bg-inverted-contrast-max-pressed +); +$db-red-bg-inverted-contrast-high-default: var( + --db-red-bg-inverted-contrast-high-default +); +$db-red-bg-inverted-contrast-high-hovered: var( + --db-red-bg-inverted-contrast-high-hovered +); +$db-red-bg-inverted-contrast-high-pressed: var( + --db-red-bg-inverted-contrast-high-pressed +); +$db-red-bg-inverted-contrast-low-default: var( + --db-red-bg-inverted-contrast-low-default +); +$db-red-bg-inverted-contrast-low-hovered: var( + --db-red-bg-inverted-contrast-low-hovered +); +$db-red-bg-inverted-contrast-low-pressed: var( + --db-red-bg-inverted-contrast-low-pressed +); +$db-red-on-bg-inverted-default: var(--db-red-on-bg-inverted-default); +$db-red-on-bg-inverted-hovered: var(--db-red-on-bg-inverted-hovered); +$db-red-on-bg-inverted-pressed: var(--db-red-on-bg-inverted-pressed); +$db-red-origin-default: var(--db-red-origin-default); +$db-red-origin-hovered: var(--db-red-origin-hovered); +$db-red-origin-pressed: var(--db-red-origin-pressed); +$db-red-on-origin-default: var(--db-red-on-origin-default); +$db-red-on-origin-hovered: var(--db-red-on-origin-hovered); +$db-red-on-origin-pressed: var(--db-red-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_turquoise.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_turquoise.speaking-colors.scss new file mode 100644 index 00000000000..ec34e935f1e --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/additional/_turquoise.speaking-colors.scss @@ -0,0 +1,136 @@ +$db-turquoise-bg-basic-level-1-default: var( + --db-turquoise-bg-basic-level-1-default +); +$db-turquoise-bg-basic-level-1-hovered: var( + --db-turquoise-bg-basic-level-1-hovered +); +$db-turquoise-bg-basic-level-1-pressed: var( + --db-turquoise-bg-basic-level-1-pressed +); +$db-turquoise-bg-basic-level-2-default: var( + --db-turquoise-bg-basic-level-2-default +); +$db-turquoise-bg-basic-level-2-hovered: var( + --db-turquoise-bg-basic-level-2-hovered +); +$db-turquoise-bg-basic-level-2-pressed: var( + --db-turquoise-bg-basic-level-2-pressed +); +$db-turquoise-bg-basic-level-3-default: var( + --db-turquoise-bg-basic-level-3-default +); +$db-turquoise-bg-basic-level-3-hovered: var( + --db-turquoise-bg-basic-level-3-hovered +); +$db-turquoise-bg-basic-level-3-pressed: var( + --db-turquoise-bg-basic-level-3-pressed +); + +$db-turquoise-bg-basic-transparent-full-default: var( + --db-turquoise-bg-basic-transparent-full-default +); +$db-turquoise-bg-basic-transparent-semi-default: var( + --db-turquoise-bg-basic-transparent-semi-default +); +$db-turquoise-bg-basic-transparent-hovered: var( + --db-turquoise-bg-basic-transparent-hovered +); +$db-turquoise-bg-basic-transparent-pressed: var( + --db-turquoise-bg-basic-transparent-pressed +); +$db-turquoise-on-bg-basic-emphasis-100-default: var( + --db-turquoise-on-bg-basic-emphasis-100-default +); +$db-turquoise-on-bg-basic-emphasis-100-hovered: var( + --db-turquoise-on-bg-basic-emphasis-100-hovered +); +$db-turquoise-on-bg-basic-emphasis-100-pressed: var( + --db-turquoise-on-bg-basic-emphasis-100-pressed +); +$db-turquoise-on-bg-basic-emphasis-90-default: var( + --db-turquoise-on-bg-basic-emphasis-90-default +); +$db-turquoise-on-bg-basic-emphasis-90-hovered: var( + --db-turquoise-on-bg-basic-emphasis-90-hovered +); +$db-turquoise-on-bg-basic-emphasis-90-pressed: var( + --db-turquoise-on-bg-basic-emphasis-90-pressed +); +$db-turquoise-on-bg-basic-emphasis-80-default: var( + --db-turquoise-on-bg-basic-emphasis-80-default +); +$db-turquoise-on-bg-basic-emphasis-80-hovered: var( + --db-turquoise-on-bg-basic-emphasis-80-hovered +); +$db-turquoise-on-bg-basic-emphasis-80-pressed: var( + --db-turquoise-on-bg-basic-emphasis-80-pressed +); +$db-turquoise-on-bg-basic-emphasis-70-default: var( + --db-turquoise-on-bg-basic-emphasis-70-default +); +$db-turquoise-on-bg-basic-emphasis-70-hovered: var( + --db-turquoise-on-bg-basic-emphasis-70-hovered +); +$db-turquoise-on-bg-basic-emphasis-70-pressed: var( + --db-turquoise-on-bg-basic-emphasis-70-pressed +); +$db-turquoise-on-bg-basic-emphasis-60-default: var( + --db-turquoise-on-bg-basic-emphasis-60-default +); +$db-turquoise-on-bg-basic-emphasis-60-hovered: var( + --db-turquoise-on-bg-basic-emphasis-60-hovered +); +$db-turquoise-on-bg-basic-emphasis-60-pressed: var( + --db-turquoise-on-bg-basic-emphasis-60-pressed +); +$db-turquoise-on-bg-basic-emphasis-50-default: var( + --db-turquoise-on-bg-basic-emphasis-50-default +); +$db-turquoise-on-bg-basic-emphasis-50-hovered: var( + --db-turquoise-on-bg-basic-emphasis-50-hovered +); +$db-turquoise-on-bg-basic-emphasis-50-pressed: var( + --db-turquoise-on-bg-basic-emphasis-50-pressed +); +$db-turquoise-bg-inverted-contrast-max-default: var( + --db-turquoise-bg-inverted-contrast-max-default +); +$db-turquoise-bg-inverted-contrast-max-hovered: var( + --db-turquoise-bg-inverted-contrast-max-hovered +); +$db-turquoise-bg-inverted-contrast-max-pressed: var( + --db-turquoise-bg-inverted-contrast-max-pressed +); +$db-turquoise-bg-inverted-contrast-high-default: var( + --db-turquoise-bg-inverted-contrast-high-default +); +$db-turquoise-bg-inverted-contrast-high-hovered: var( + --db-turquoise-bg-inverted-contrast-high-hovered +); +$db-turquoise-bg-inverted-contrast-high-pressed: var( + --db-turquoise-bg-inverted-contrast-high-pressed +); +$db-turquoise-bg-inverted-contrast-low-default: var( + --db-turquoise-bg-inverted-contrast-low-default +); +$db-turquoise-bg-inverted-contrast-low-hovered: var( + --db-turquoise-bg-inverted-contrast-low-hovered +); +$db-turquoise-bg-inverted-contrast-low-pressed: var( + --db-turquoise-bg-inverted-contrast-low-pressed +); +$db-turquoise-on-bg-inverted-default: var( + --db-turquoise-on-bg-inverted-default +); +$db-turquoise-on-bg-inverted-hovered: var( + --db-turquoise-on-bg-inverted-hovered +); +$db-turquoise-on-bg-inverted-pressed: var( + --db-turquoise-on-bg-inverted-pressed +); +$db-turquoise-origin-default: var(--db-turquoise-origin-default); +$db-turquoise-origin-hovered: var(--db-turquoise-origin-hovered); +$db-turquoise-origin-pressed: var(--db-turquoise-origin-pressed); +$db-turquoise-on-origin-default: var(--db-turquoise-on-origin-default); +$db-turquoise-on-origin-hovered: var(--db-turquoise-on-origin-hovered); +$db-turquoise-on-origin-pressed: var(--db-turquoise-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_violet.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_violet.speaking-colors.scss new file mode 100644 index 00000000000..620f42d4303 --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/additional/_violet.speaking-colors.scss @@ -0,0 +1,112 @@ +$db-violet-bg-basic-level-1-default: var(--db-violet-bg-basic-level-1-default); +$db-violet-bg-basic-level-1-hovered: var(--db-violet-bg-basic-level-1-hovered); +$db-violet-bg-basic-level-1-pressed: var(--db-violet-bg-basic-level-1-pressed); +$db-violet-bg-basic-level-2-default: var(--db-violet-bg-basic-level-2-default); +$db-violet-bg-basic-level-2-hovered: var(--db-violet-bg-basic-level-2-hovered); +$db-violet-bg-basic-level-2-pressed: var(--db-violet-bg-basic-level-2-pressed); +$db-violet-bg-basic-level-3-default: var(--db-violet-bg-basic-level-3-default); +$db-violet-bg-basic-level-3-hovered: var(--db-violet-bg-basic-level-3-hovered); +$db-violet-bg-basic-level-3-pressed: var(--db-violet-bg-basic-level-3-pressed); + +$db-violet-bg-basic-transparent-full-default: var( + --db-violet-bg-basic-transparent-full-default +); +$db-violet-bg-basic-transparent-semi-default: var( + --db-violet-bg-basic-transparent-semi-default +); +$db-violet-bg-basic-transparent-hovered: var( + --db-violet-bg-basic-transparent-hovered +); +$db-violet-bg-basic-transparent-pressed: var( + --db-violet-bg-basic-transparent-pressed +); +$db-violet-on-bg-basic-emphasis-100-default: var( + --db-violet-on-bg-basic-emphasis-100-default +); +$db-violet-on-bg-basic-emphasis-100-hovered: var( + --db-violet-on-bg-basic-emphasis-100-hovered +); +$db-violet-on-bg-basic-emphasis-100-pressed: var( + --db-violet-on-bg-basic-emphasis-100-pressed +); +$db-violet-on-bg-basic-emphasis-90-default: var( + --db-violet-on-bg-basic-emphasis-90-default +); +$db-violet-on-bg-basic-emphasis-90-hovered: var( + --db-violet-on-bg-basic-emphasis-90-hovered +); +$db-violet-on-bg-basic-emphasis-90-pressed: var( + --db-violet-on-bg-basic-emphasis-90-pressed +); +$db-violet-on-bg-basic-emphasis-80-default: var( + --db-violet-on-bg-basic-emphasis-80-default +); +$db-violet-on-bg-basic-emphasis-80-hovered: var( + --db-violet-on-bg-basic-emphasis-80-hovered +); +$db-violet-on-bg-basic-emphasis-80-pressed: var( + --db-violet-on-bg-basic-emphasis-80-pressed +); +$db-violet-on-bg-basic-emphasis-70-default: var( + --db-violet-on-bg-basic-emphasis-70-default +); +$db-violet-on-bg-basic-emphasis-70-hovered: var( + --db-violet-on-bg-basic-emphasis-70-hovered +); +$db-violet-on-bg-basic-emphasis-70-pressed: var( + --db-violet-on-bg-basic-emphasis-70-pressed +); +$db-violet-on-bg-basic-emphasis-60-default: var( + --db-violet-on-bg-basic-emphasis-60-default +); +$db-violet-on-bg-basic-emphasis-60-hovered: var( + --db-violet-on-bg-basic-emphasis-60-hovered +); +$db-violet-on-bg-basic-emphasis-60-pressed: var( + --db-violet-on-bg-basic-emphasis-60-pressed +); +$db-violet-on-bg-basic-emphasis-50-default: var( + --db-violet-on-bg-basic-emphasis-50-default +); +$db-violet-on-bg-basic-emphasis-50-hovered: var( + --db-violet-on-bg-basic-emphasis-50-hovered +); +$db-violet-on-bg-basic-emphasis-50-pressed: var( + --db-violet-on-bg-basic-emphasis-50-pressed +); +$db-violet-bg-inverted-contrast-max-default: var( + --db-violet-bg-inverted-contrast-max-default +); +$db-violet-bg-inverted-contrast-max-hovered: var( + --db-violet-bg-inverted-contrast-max-hovered +); +$db-violet-bg-inverted-contrast-max-pressed: var( + --db-violet-bg-inverted-contrast-max-pressed +); +$db-violet-bg-inverted-contrast-high-default: var( + --db-violet-bg-inverted-contrast-high-default +); +$db-violet-bg-inverted-contrast-high-hovered: var( + --db-violet-bg-inverted-contrast-high-hovered +); +$db-violet-bg-inverted-contrast-high-pressed: var( + --db-violet-bg-inverted-contrast-high-pressed +); +$db-violet-bg-inverted-contrast-low-default: var( + --db-violet-bg-inverted-contrast-low-default +); +$db-violet-bg-inverted-contrast-low-hovered: var( + --db-violet-bg-inverted-contrast-low-hovered +); +$db-violet-bg-inverted-contrast-low-pressed: var( + --db-violet-bg-inverted-contrast-low-pressed +); +$db-violet-on-bg-inverted-default: var(--db-violet-on-bg-inverted-default); +$db-violet-on-bg-inverted-hovered: var(--db-violet-on-bg-inverted-hovered); +$db-violet-on-bg-inverted-pressed: var(--db-violet-on-bg-inverted-pressed); +$db-violet-origin-default: var(--db-violet-origin-default); +$db-violet-origin-hovered: var(--db-violet-origin-hovered); +$db-violet-origin-pressed: var(--db-violet-origin-pressed); +$db-violet-on-origin-default: var(--db-violet-on-origin-default); +$db-violet-on-origin-hovered: var(--db-violet-on-origin-hovered); +$db-violet-on-origin-pressed: var(--db-violet-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/additional/_yellow.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/additional/_yellow.speaking-colors.scss new file mode 100644 index 00000000000..d25c201fd71 --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/additional/_yellow.speaking-colors.scss @@ -0,0 +1,112 @@ +$db-yellow-bg-basic-level-1-default: var(--db-yellow-bg-basic-level-1-default); +$db-yellow-bg-basic-level-1-hovered: var(--db-yellow-bg-basic-level-1-hovered); +$db-yellow-bg-basic-level-1-pressed: var(--db-yellow-bg-basic-level-1-pressed); +$db-yellow-bg-basic-level-2-default: var(--db-yellow-bg-basic-level-2-default); +$db-yellow-bg-basic-level-2-hovered: var(--db-yellow-bg-basic-level-2-hovered); +$db-yellow-bg-basic-level-2-pressed: var(--db-yellow-bg-basic-level-2-pressed); +$db-yellow-bg-basic-level-3-default: var(--db-yellow-bg-basic-level-3-default); +$db-yellow-bg-basic-level-3-hovered: var(--db-yellow-bg-basic-level-3-hovered); +$db-yellow-bg-basic-level-3-pressed: var(--db-yellow-bg-basic-level-3-pressed); + +$db-yellow-bg-basic-transparent-full-default: var( + --db-yellow-bg-basic-transparent-full-default +); +$db-yellow-bg-basic-transparent-semi-default: var( + --db-yellow-bg-basic-transparent-semi-default +); +$db-yellow-bg-basic-transparent-hovered: var( + --db-yellow-bg-basic-transparent-hovered +); +$db-yellow-bg-basic-transparent-pressed: var( + --db-yellow-bg-basic-transparent-pressed +); +$db-yellow-on-bg-basic-emphasis-100-default: var( + --db-yellow-on-bg-basic-emphasis-100-default +); +$db-yellow-on-bg-basic-emphasis-100-hovered: var( + --db-yellow-on-bg-basic-emphasis-100-hovered +); +$db-yellow-on-bg-basic-emphasis-100-pressed: var( + --db-yellow-on-bg-basic-emphasis-100-pressed +); +$db-yellow-on-bg-basic-emphasis-90-default: var( + --db-yellow-on-bg-basic-emphasis-90-default +); +$db-yellow-on-bg-basic-emphasis-90-hovered: var( + --db-yellow-on-bg-basic-emphasis-90-hovered +); +$db-yellow-on-bg-basic-emphasis-90-pressed: var( + --db-yellow-on-bg-basic-emphasis-90-pressed +); +$db-yellow-on-bg-basic-emphasis-80-default: var( + --db-yellow-on-bg-basic-emphasis-80-default +); +$db-yellow-on-bg-basic-emphasis-80-hovered: var( + --db-yellow-on-bg-basic-emphasis-80-hovered +); +$db-yellow-on-bg-basic-emphasis-80-pressed: var( + --db-yellow-on-bg-basic-emphasis-80-pressed +); +$db-yellow-on-bg-basic-emphasis-70-default: var( + --db-yellow-on-bg-basic-emphasis-70-default +); +$db-yellow-on-bg-basic-emphasis-70-hovered: var( + --db-yellow-on-bg-basic-emphasis-70-hovered +); +$db-yellow-on-bg-basic-emphasis-70-pressed: var( + --db-yellow-on-bg-basic-emphasis-70-pressed +); +$db-yellow-on-bg-basic-emphasis-60-default: var( + --db-yellow-on-bg-basic-emphasis-60-default +); +$db-yellow-on-bg-basic-emphasis-60-hovered: var( + --db-yellow-on-bg-basic-emphasis-60-hovered +); +$db-yellow-on-bg-basic-emphasis-60-pressed: var( + --db-yellow-on-bg-basic-emphasis-60-pressed +); +$db-yellow-on-bg-basic-emphasis-50-default: var( + --db-yellow-on-bg-basic-emphasis-50-default +); +$db-yellow-on-bg-basic-emphasis-50-hovered: var( + --db-yellow-on-bg-basic-emphasis-50-hovered +); +$db-yellow-on-bg-basic-emphasis-50-pressed: var( + --db-yellow-on-bg-basic-emphasis-50-pressed +); +$db-yellow-bg-inverted-contrast-max-default: var( + --db-yellow-bg-inverted-contrast-max-default +); +$db-yellow-bg-inverted-contrast-max-hovered: var( + --db-yellow-bg-inverted-contrast-max-hovered +); +$db-yellow-bg-inverted-contrast-max-pressed: var( + --db-yellow-bg-inverted-contrast-max-pressed +); +$db-yellow-bg-inverted-contrast-high-default: var( + --db-yellow-bg-inverted-contrast-high-default +); +$db-yellow-bg-inverted-contrast-high-hovered: var( + --db-yellow-bg-inverted-contrast-high-hovered +); +$db-yellow-bg-inverted-contrast-high-pressed: var( + --db-yellow-bg-inverted-contrast-high-pressed +); +$db-yellow-bg-inverted-contrast-low-default: var( + --db-yellow-bg-inverted-contrast-low-default +); +$db-yellow-bg-inverted-contrast-low-hovered: var( + --db-yellow-bg-inverted-contrast-low-hovered +); +$db-yellow-bg-inverted-contrast-low-pressed: var( + --db-yellow-bg-inverted-contrast-low-pressed +); +$db-yellow-on-bg-inverted-default: var(--db-yellow-on-bg-inverted-default); +$db-yellow-on-bg-inverted-hovered: var(--db-yellow-on-bg-inverted-hovered); +$db-yellow-on-bg-inverted-pressed: var(--db-yellow-on-bg-inverted-pressed); +$db-yellow-origin-default: var(--db-yellow-origin-default); +$db-yellow-origin-hovered: var(--db-yellow-origin-hovered); +$db-yellow-origin-pressed: var(--db-yellow-origin-pressed); +$db-yellow-on-origin-default: var(--db-yellow-on-origin-default); +$db-yellow-on-origin-hovered: var(--db-yellow-on-origin-hovered); +$db-yellow-on-origin-pressed: var(--db-yellow-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/semantic/_brand.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/semantic/_brand.speaking-colors.scss new file mode 100644 index 00000000000..aba0b82da9a --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/semantic/_brand.speaking-colors.scss @@ -0,0 +1,112 @@ +$db-brand-bg-basic-level-1-default: var(--db-brand-bg-basic-level-1-default); +$db-brand-bg-basic-level-1-hovered: var(--db-brand-bg-basic-level-1-hovered); +$db-brand-bg-basic-level-1-pressed: var(--db-brand-bg-basic-level-1-pressed); +$db-brand-bg-basic-level-2-default: var(--db-brand-bg-basic-level-2-default); +$db-brand-bg-basic-level-2-hovered: var(--db-brand-bg-basic-level-2-hovered); +$db-brand-bg-basic-level-2-pressed: var(--db-brand-bg-basic-level-2-pressed); +$db-brand-bg-basic-level-3-default: var(--db-brand-bg-basic-level-3-default); +$db-brand-bg-basic-level-3-hovered: var(--db-brand-bg-basic-level-3-hovered); +$db-brand-bg-basic-level-3-pressed: var(--db-brand-bg-basic-level-3-pressed); + +$db-brand-bg-basic-transparent-full-default: var( + --db-brand-bg-basic-transparent-full-default +); +$db-brand-bg-basic-transparent-semi-default: var( + --db-brand-bg-basic-transparent-semi-default +); +$db-brand-bg-basic-transparent-hovered: var( + --db-brand-bg-basic-transparent-hovered +); +$db-brand-bg-basic-transparent-pressed: var( + --db-brand-bg-basic-transparent-pressed +); +$db-brand-on-bg-basic-emphasis-100-default: var( + --db-brand-on-bg-basic-emphasis-100-default +); +$db-brand-on-bg-basic-emphasis-100-hovered: var( + --db-brand-on-bg-basic-emphasis-100-hovered +); +$db-brand-on-bg-basic-emphasis-100-pressed: var( + --db-brand-on-bg-basic-emphasis-100-pressed +); +$db-brand-on-bg-basic-emphasis-90-default: var( + --db-brand-on-bg-basic-emphasis-90-default +); +$db-brand-on-bg-basic-emphasis-90-hovered: var( + --db-brand-on-bg-basic-emphasis-90-hovered +); +$db-brand-on-bg-basic-emphasis-90-pressed: var( + --db-brand-on-bg-basic-emphasis-90-pressed +); +$db-brand-on-bg-basic-emphasis-80-default: var( + --db-brand-on-bg-basic-emphasis-80-default +); +$db-brand-on-bg-basic-emphasis-80-hovered: var( + --db-brand-on-bg-basic-emphasis-80-hovered +); +$db-brand-on-bg-basic-emphasis-80-pressed: var( + --db-brand-on-bg-basic-emphasis-80-pressed +); +$db-brand-on-bg-basic-emphasis-70-default: var( + --db-brand-on-bg-basic-emphasis-70-default +); +$db-brand-on-bg-basic-emphasis-70-hovered: var( + --db-brand-on-bg-basic-emphasis-70-hovered +); +$db-brand-on-bg-basic-emphasis-70-pressed: var( + --db-brand-on-bg-basic-emphasis-70-pressed +); +$db-brand-on-bg-basic-emphasis-60-default: var( + --db-brand-on-bg-basic-emphasis-60-default +); +$db-brand-on-bg-basic-emphasis-60-hovered: var( + --db-brand-on-bg-basic-emphasis-60-hovered +); +$db-brand-on-bg-basic-emphasis-60-pressed: var( + --db-brand-on-bg-basic-emphasis-60-pressed +); +$db-brand-on-bg-basic-emphasis-50-default: var( + --db-brand-on-bg-basic-emphasis-50-default +); +$db-brand-on-bg-basic-emphasis-50-hovered: var( + --db-brand-on-bg-basic-emphasis-50-hovered +); +$db-brand-on-bg-basic-emphasis-50-pressed: var( + --db-brand-on-bg-basic-emphasis-50-pressed +); +$db-brand-bg-inverted-contrast-max-default: var( + --db-brand-bg-inverted-contrast-max-default +); +$db-brand-bg-inverted-contrast-max-hovered: var( + --db-brand-bg-inverted-contrast-max-hovered +); +$db-brand-bg-inverted-contrast-max-pressed: var( + --db-brand-bg-inverted-contrast-max-pressed +); +$db-brand-bg-inverted-contrast-high-default: var( + --db-brand-bg-inverted-contrast-high-default +); +$db-brand-bg-inverted-contrast-high-hovered: var( + --db-brand-bg-inverted-contrast-high-hovered +); +$db-brand-bg-inverted-contrast-high-pressed: var( + --db-brand-bg-inverted-contrast-high-pressed +); +$db-brand-bg-inverted-contrast-low-default: var( + --db-brand-bg-inverted-contrast-low-default +); +$db-brand-bg-inverted-contrast-low-hovered: var( + --db-brand-bg-inverted-contrast-low-hovered +); +$db-brand-bg-inverted-contrast-low-pressed: var( + --db-brand-bg-inverted-contrast-low-pressed +); +$db-brand-on-bg-inverted-default: var(--db-brand-on-bg-inverted-default); +$db-brand-on-bg-inverted-hovered: var(--db-brand-on-bg-inverted-hovered); +$db-brand-on-bg-inverted-pressed: var(--db-brand-on-bg-inverted-pressed); +$db-brand-origin-default: var(--db-brand-origin-default); +$db-brand-origin-hovered: var(--db-brand-origin-hovered); +$db-brand-origin-pressed: var(--db-brand-origin-pressed); +$db-brand-on-origin-default: var(--db-brand-on-origin-default); +$db-brand-on-origin-hovered: var(--db-brand-on-origin-hovered); +$db-brand-on-origin-pressed: var(--db-brand-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/semantic/_critical.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/semantic/_critical.speaking-colors.scss new file mode 100644 index 00000000000..c95cb9f65fe --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/semantic/_critical.speaking-colors.scss @@ -0,0 +1,130 @@ +$db-critical-bg-basic-level-1-default: var( + --db-critical-bg-basic-level-1-default +); +$db-critical-bg-basic-level-1-hovered: var( + --db-critical-bg-basic-level-1-hovered +); +$db-critical-bg-basic-level-1-pressed: var( + --db-critical-bg-basic-level-1-pressed +); +$db-critical-bg-basic-level-2-default: var( + --db-critical-bg-basic-level-2-default +); +$db-critical-bg-basic-level-2-hovered: var( + --db-critical-bg-basic-level-2-hovered +); +$db-critical-bg-basic-level-2-pressed: var( + --db-critical-bg-basic-level-2-pressed +); +$db-critical-bg-basic-level-3-default: var( + --db-critical-bg-basic-level-3-default +); +$db-critical-bg-basic-level-3-hovered: var( + --db-critical-bg-basic-level-3-hovered +); +$db-critical-bg-basic-level-3-pressed: var( + --db-critical-bg-basic-level-3-pressed +); + +$db-critical-bg-basic-transparent-full-default: var( + --db-critical-bg-basic-transparent-full-default +); +$db-critical-bg-basic-transparent-semi-default: var( + --db-critical-bg-basic-transparent-semi-default +); +$db-critical-bg-basic-transparent-hovered: var( + --db-critical-bg-basic-transparent-hovered +); +$db-critical-bg-basic-transparent-pressed: var( + --db-critical-bg-basic-transparent-pressed +); +$db-critical-on-bg-basic-emphasis-100-default: var( + --db-critical-on-bg-basic-emphasis-100-default +); +$db-critical-on-bg-basic-emphasis-100-hovered: var( + --db-critical-on-bg-basic-emphasis-100-hovered +); +$db-critical-on-bg-basic-emphasis-100-pressed: var( + --db-critical-on-bg-basic-emphasis-100-pressed +); +$db-critical-on-bg-basic-emphasis-90-default: var( + --db-critical-on-bg-basic-emphasis-90-default +); +$db-critical-on-bg-basic-emphasis-90-hovered: var( + --db-critical-on-bg-basic-emphasis-90-hovered +); +$db-critical-on-bg-basic-emphasis-90-pressed: var( + --db-critical-on-bg-basic-emphasis-90-pressed +); +$db-critical-on-bg-basic-emphasis-80-default: var( + --db-critical-on-bg-basic-emphasis-80-default +); +$db-critical-on-bg-basic-emphasis-80-hovered: var( + --db-critical-on-bg-basic-emphasis-80-hovered +); +$db-critical-on-bg-basic-emphasis-80-pressed: var( + --db-critical-on-bg-basic-emphasis-80-pressed +); +$db-critical-on-bg-basic-emphasis-70-default: var( + --db-critical-on-bg-basic-emphasis-70-default +); +$db-critical-on-bg-basic-emphasis-70-hovered: var( + --db-critical-on-bg-basic-emphasis-70-hovered +); +$db-critical-on-bg-basic-emphasis-70-pressed: var( + --db-critical-on-bg-basic-emphasis-70-pressed +); +$db-critical-on-bg-basic-emphasis-60-default: var( + --db-critical-on-bg-basic-emphasis-60-default +); +$db-critical-on-bg-basic-emphasis-60-hovered: var( + --db-critical-on-bg-basic-emphasis-60-hovered +); +$db-critical-on-bg-basic-emphasis-60-pressed: var( + --db-critical-on-bg-basic-emphasis-60-pressed +); +$db-critical-on-bg-basic-emphasis-50-default: var( + --db-critical-on-bg-basic-emphasis-50-default +); +$db-critical-on-bg-basic-emphasis-50-hovered: var( + --db-critical-on-bg-basic-emphasis-50-hovered +); +$db-critical-on-bg-basic-emphasis-50-pressed: var( + --db-critical-on-bg-basic-emphasis-50-pressed +); +$db-critical-bg-inverted-contrast-max-default: var( + --db-critical-bg-inverted-contrast-max-default +); +$db-critical-bg-inverted-contrast-max-hovered: var( + --db-critical-bg-inverted-contrast-max-hovered +); +$db-critical-bg-inverted-contrast-max-pressed: var( + --db-critical-bg-inverted-contrast-max-pressed +); +$db-critical-bg-inverted-contrast-high-default: var( + --db-critical-bg-inverted-contrast-high-default +); +$db-critical-bg-inverted-contrast-high-hovered: var( + --db-critical-bg-inverted-contrast-high-hovered +); +$db-critical-bg-inverted-contrast-high-pressed: var( + --db-critical-bg-inverted-contrast-high-pressed +); +$db-critical-bg-inverted-contrast-low-default: var( + --db-critical-bg-inverted-contrast-low-default +); +$db-critical-bg-inverted-contrast-low-hovered: var( + --db-critical-bg-inverted-contrast-low-hovered +); +$db-critical-bg-inverted-contrast-low-pressed: var( + --db-critical-bg-inverted-contrast-low-pressed +); +$db-critical-on-bg-inverted-default: var(--db-critical-on-bg-inverted-default); +$db-critical-on-bg-inverted-hovered: var(--db-critical-on-bg-inverted-hovered); +$db-critical-on-bg-inverted-pressed: var(--db-critical-on-bg-inverted-pressed); +$db-critical-origin-default: var(--db-critical-origin-default); +$db-critical-origin-hovered: var(--db-critical-origin-hovered); +$db-critical-origin-pressed: var(--db-critical-origin-pressed); +$db-critical-on-origin-default: var(--db-critical-on-origin-default); +$db-critical-on-origin-hovered: var(--db-critical-on-origin-hovered); +$db-critical-on-origin-pressed: var(--db-critical-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/semantic/_informational.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/semantic/_informational.speaking-colors.scss new file mode 100644 index 00000000000..20f6b3269df --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/semantic/_informational.speaking-colors.scss @@ -0,0 +1,136 @@ +$db-informational-bg-basic-level-1-default: var( + --db-informational-bg-basic-level-1-default +); +$db-informational-bg-basic-level-1-hovered: var( + --db-informational-bg-basic-level-1-hovered +); +$db-informational-bg-basic-level-1-pressed: var( + --db-informational-bg-basic-level-1-pressed +); +$db-informational-bg-basic-level-2-default: var( + --db-informational-bg-basic-level-2-default +); +$db-informational-bg-basic-level-2-hovered: var( + --db-informational-bg-basic-level-2-hovered +); +$db-informational-bg-basic-level-2-pressed: var( + --db-informational-bg-basic-level-2-pressed +); +$db-informational-bg-basic-level-3-default: var( + --db-informational-bg-basic-level-3-default +); +$db-informational-bg-basic-level-3-hovered: var( + --db-informational-bg-basic-level-3-hovered +); +$db-informational-bg-basic-level-3-pressed: var( + --db-informational-bg-basic-level-3-pressed +); + +$db-informational-bg-basic-transparent-full-default: var( + --db-informational-bg-basic-transparent-full-default +); +$db-informational-bg-basic-transparent-semi-default: var( + --db-informational-bg-basic-transparent-semi-default +); +$db-informational-bg-basic-transparent-hovered: var( + --db-informational-bg-basic-transparent-hovered +); +$db-informational-bg-basic-transparent-pressed: var( + --db-informational-bg-basic-transparent-pressed +); +$db-informational-on-bg-basic-emphasis-100-default: var( + --db-informational-on-bg-basic-emphasis-100-default +); +$db-informational-on-bg-basic-emphasis-100-hovered: var( + --db-informational-on-bg-basic-emphasis-100-hovered +); +$db-informational-on-bg-basic-emphasis-100-pressed: var( + --db-informational-on-bg-basic-emphasis-100-pressed +); +$db-informational-on-bg-basic-emphasis-90-default: var( + --db-informational-on-bg-basic-emphasis-90-default +); +$db-informational-on-bg-basic-emphasis-90-hovered: var( + --db-informational-on-bg-basic-emphasis-90-hovered +); +$db-informational-on-bg-basic-emphasis-90-pressed: var( + --db-informational-on-bg-basic-emphasis-90-pressed +); +$db-informational-on-bg-basic-emphasis-80-default: var( + --db-informational-on-bg-basic-emphasis-80-default +); +$db-informational-on-bg-basic-emphasis-80-hovered: var( + --db-informational-on-bg-basic-emphasis-80-hovered +); +$db-informational-on-bg-basic-emphasis-80-pressed: var( + --db-informational-on-bg-basic-emphasis-80-pressed +); +$db-informational-on-bg-basic-emphasis-70-default: var( + --db-informational-on-bg-basic-emphasis-70-default +); +$db-informational-on-bg-basic-emphasis-70-hovered: var( + --db-informational-on-bg-basic-emphasis-70-hovered +); +$db-informational-on-bg-basic-emphasis-70-pressed: var( + --db-informational-on-bg-basic-emphasis-70-pressed +); +$db-informational-on-bg-basic-emphasis-60-default: var( + --db-informational-on-bg-basic-emphasis-60-default +); +$db-informational-on-bg-basic-emphasis-60-hovered: var( + --db-informational-on-bg-basic-emphasis-60-hovered +); +$db-informational-on-bg-basic-emphasis-60-pressed: var( + --db-informational-on-bg-basic-emphasis-60-pressed +); +$db-informational-on-bg-basic-emphasis-50-default: var( + --db-informational-on-bg-basic-emphasis-50-default +); +$db-informational-on-bg-basic-emphasis-50-hovered: var( + --db-informational-on-bg-basic-emphasis-50-hovered +); +$db-informational-on-bg-basic-emphasis-50-pressed: var( + --db-informational-on-bg-basic-emphasis-50-pressed +); +$db-informational-bg-inverted-contrast-max-default: var( + --db-informational-bg-inverted-contrast-max-default +); +$db-informational-bg-inverted-contrast-max-hovered: var( + --db-informational-bg-inverted-contrast-max-hovered +); +$db-informational-bg-inverted-contrast-max-pressed: var( + --db-informational-bg-inverted-contrast-max-pressed +); +$db-informational-bg-inverted-contrast-high-default: var( + --db-informational-bg-inverted-contrast-high-default +); +$db-informational-bg-inverted-contrast-high-hovered: var( + --db-informational-bg-inverted-contrast-high-hovered +); +$db-informational-bg-inverted-contrast-high-pressed: var( + --db-informational-bg-inverted-contrast-high-pressed +); +$db-informational-bg-inverted-contrast-low-default: var( + --db-informational-bg-inverted-contrast-low-default +); +$db-informational-bg-inverted-contrast-low-hovered: var( + --db-informational-bg-inverted-contrast-low-hovered +); +$db-informational-bg-inverted-contrast-low-pressed: var( + --db-informational-bg-inverted-contrast-low-pressed +); +$db-informational-on-bg-inverted-default: var( + --db-informational-on-bg-inverted-default +); +$db-informational-on-bg-inverted-hovered: var( + --db-informational-on-bg-inverted-hovered +); +$db-informational-on-bg-inverted-pressed: var( + --db-informational-on-bg-inverted-pressed +); +$db-informational-origin-default: var(--db-informational-origin-default); +$db-informational-origin-hovered: var(--db-informational-origin-hovered); +$db-informational-origin-pressed: var(--db-informational-origin-pressed); +$db-informational-on-origin-default: var(--db-informational-on-origin-default); +$db-informational-on-origin-hovered: var(--db-informational-on-origin-hovered); +$db-informational-on-origin-pressed: var(--db-informational-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/semantic/_neutral.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/semantic/_neutral.speaking-colors.scss new file mode 100644 index 00000000000..f9795e57285 --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/semantic/_neutral.speaking-colors.scss @@ -0,0 +1,130 @@ +$db-neutral-bg-basic-level-1-default: var( + --db-neutral-bg-basic-level-1-default +); +$db-neutral-bg-basic-level-1-hovered: var( + --db-neutral-bg-basic-level-1-hovered +); +$db-neutral-bg-basic-level-1-pressed: var( + --db-neutral-bg-basic-level-1-pressed +); +$db-neutral-bg-basic-level-2-default: var( + --db-neutral-bg-basic-level-2-default +); +$db-neutral-bg-basic-level-2-hovered: var( + --db-neutral-bg-basic-level-2-hovered +); +$db-neutral-bg-basic-level-2-pressed: var( + --db-neutral-bg-basic-level-2-pressed +); +$db-neutral-bg-basic-level-3-default: var( + --db-neutral-bg-basic-level-3-default +); +$db-neutral-bg-basic-level-3-hovered: var( + --db-neutral-bg-basic-level-3-hovered +); +$db-neutral-bg-basic-level-3-pressed: var( + --db-neutral-bg-basic-level-3-pressed +); + +$db-neutral-bg-basic-transparent-full-default: var( + --db-neutral-bg-basic-transparent-full-default +); +$db-neutral-bg-basic-transparent-semi-default: var( + --db-neutral-bg-basic-transparent-semi-default +); +$db-neutral-bg-basic-transparent-hovered: var( + --db-neutral-bg-basic-transparent-hovered +); +$db-neutral-bg-basic-transparent-pressed: var( + --db-neutral-bg-basic-transparent-pressed +); +$db-neutral-on-bg-basic-emphasis-100-default: var( + --db-neutral-on-bg-basic-emphasis-100-default +); +$db-neutral-on-bg-basic-emphasis-100-hovered: var( + --db-neutral-on-bg-basic-emphasis-100-hovered +); +$db-neutral-on-bg-basic-emphasis-100-pressed: var( + --db-neutral-on-bg-basic-emphasis-100-pressed +); +$db-neutral-on-bg-basic-emphasis-90-default: var( + --db-neutral-on-bg-basic-emphasis-90-default +); +$db-neutral-on-bg-basic-emphasis-90-hovered: var( + --db-neutral-on-bg-basic-emphasis-90-hovered +); +$db-neutral-on-bg-basic-emphasis-90-pressed: var( + --db-neutral-on-bg-basic-emphasis-90-pressed +); +$db-neutral-on-bg-basic-emphasis-80-default: var( + --db-neutral-on-bg-basic-emphasis-80-default +); +$db-neutral-on-bg-basic-emphasis-80-hovered: var( + --db-neutral-on-bg-basic-emphasis-80-hovered +); +$db-neutral-on-bg-basic-emphasis-80-pressed: var( + --db-neutral-on-bg-basic-emphasis-80-pressed +); +$db-neutral-on-bg-basic-emphasis-70-default: var( + --db-neutral-on-bg-basic-emphasis-70-default +); +$db-neutral-on-bg-basic-emphasis-70-hovered: var( + --db-neutral-on-bg-basic-emphasis-70-hovered +); +$db-neutral-on-bg-basic-emphasis-70-pressed: var( + --db-neutral-on-bg-basic-emphasis-70-pressed +); +$db-neutral-on-bg-basic-emphasis-60-default: var( + --db-neutral-on-bg-basic-emphasis-60-default +); +$db-neutral-on-bg-basic-emphasis-60-hovered: var( + --db-neutral-on-bg-basic-emphasis-60-hovered +); +$db-neutral-on-bg-basic-emphasis-60-pressed: var( + --db-neutral-on-bg-basic-emphasis-60-pressed +); +$db-neutral-on-bg-basic-emphasis-50-default: var( + --db-neutral-on-bg-basic-emphasis-50-default +); +$db-neutral-on-bg-basic-emphasis-50-hovered: var( + --db-neutral-on-bg-basic-emphasis-50-hovered +); +$db-neutral-on-bg-basic-emphasis-50-pressed: var( + --db-neutral-on-bg-basic-emphasis-50-pressed +); +$db-neutral-bg-inverted-contrast-max-default: var( + --db-neutral-bg-inverted-contrast-max-default +); +$db-neutral-bg-inverted-contrast-max-hovered: var( + --db-neutral-bg-inverted-contrast-max-hovered +); +$db-neutral-bg-inverted-contrast-max-pressed: var( + --db-neutral-bg-inverted-contrast-max-pressed +); +$db-neutral-bg-inverted-contrast-high-default: var( + --db-neutral-bg-inverted-contrast-high-default +); +$db-neutral-bg-inverted-contrast-high-hovered: var( + --db-neutral-bg-inverted-contrast-high-hovered +); +$db-neutral-bg-inverted-contrast-high-pressed: var( + --db-neutral-bg-inverted-contrast-high-pressed +); +$db-neutral-bg-inverted-contrast-low-default: var( + --db-neutral-bg-inverted-contrast-low-default +); +$db-neutral-bg-inverted-contrast-low-hovered: var( + --db-neutral-bg-inverted-contrast-low-hovered +); +$db-neutral-bg-inverted-contrast-low-pressed: var( + --db-neutral-bg-inverted-contrast-low-pressed +); +$db-neutral-on-bg-inverted-default: var(--db-neutral-on-bg-inverted-default); +$db-neutral-on-bg-inverted-hovered: var(--db-neutral-on-bg-inverted-hovered); +$db-neutral-on-bg-inverted-pressed: var(--db-neutral-on-bg-inverted-pressed); +$db-neutral-origin-default: var(--db-neutral-origin-default); +$db-neutral-origin-hovered: var(--db-neutral-origin-hovered); +$db-neutral-origin-pressed: var(--db-neutral-origin-pressed); +$db-neutral-on-origin-default: var(--db-neutral-on-origin-default); +$db-neutral-on-origin-hovered: var(--db-neutral-on-origin-hovered); +$db-neutral-on-origin-pressed: var(--db-neutral-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/semantic/_successful.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/semantic/_successful.speaking-colors.scss new file mode 100644 index 00000000000..a02a1480125 --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/semantic/_successful.speaking-colors.scss @@ -0,0 +1,136 @@ +$db-successful-bg-basic-level-1-default: var( + --db-successful-bg-basic-level-1-default +); +$db-successful-bg-basic-level-1-hovered: var( + --db-successful-bg-basic-level-1-hovered +); +$db-successful-bg-basic-level-1-pressed: var( + --db-successful-bg-basic-level-1-pressed +); +$db-successful-bg-basic-level-2-default: var( + --db-successful-bg-basic-level-2-default +); +$db-successful-bg-basic-level-2-hovered: var( + --db-successful-bg-basic-level-2-hovered +); +$db-successful-bg-basic-level-2-pressed: var( + --db-successful-bg-basic-level-2-pressed +); +$db-successful-bg-basic-level-3-default: var( + --db-successful-bg-basic-level-3-default +); +$db-successful-bg-basic-level-3-hovered: var( + --db-successful-bg-basic-level-3-hovered +); +$db-successful-bg-basic-level-3-pressed: var( + --db-successful-bg-basic-level-3-pressed +); + +$db-successful-bg-basic-transparent-full-default: var( + --db-successful-bg-basic-transparent-full-default +); +$db-successful-bg-basic-transparent-semi-default: var( + --db-successful-bg-basic-transparent-semi-default +); +$db-successful-bg-basic-transparent-hovered: var( + --db-successful-bg-basic-transparent-hovered +); +$db-successful-bg-basic-transparent-pressed: var( + --db-successful-bg-basic-transparent-pressed +); +$db-successful-on-bg-basic-emphasis-100-default: var( + --db-successful-on-bg-basic-emphasis-100-default +); +$db-successful-on-bg-basic-emphasis-100-hovered: var( + --db-successful-on-bg-basic-emphasis-100-hovered +); +$db-successful-on-bg-basic-emphasis-100-pressed: var( + --db-successful-on-bg-basic-emphasis-100-pressed +); +$db-successful-on-bg-basic-emphasis-90-default: var( + --db-successful-on-bg-basic-emphasis-90-default +); +$db-successful-on-bg-basic-emphasis-90-hovered: var( + --db-successful-on-bg-basic-emphasis-90-hovered +); +$db-successful-on-bg-basic-emphasis-90-pressed: var( + --db-successful-on-bg-basic-emphasis-90-pressed +); +$db-successful-on-bg-basic-emphasis-80-default: var( + --db-successful-on-bg-basic-emphasis-80-default +); +$db-successful-on-bg-basic-emphasis-80-hovered: var( + --db-successful-on-bg-basic-emphasis-80-hovered +); +$db-successful-on-bg-basic-emphasis-80-pressed: var( + --db-successful-on-bg-basic-emphasis-80-pressed +); +$db-successful-on-bg-basic-emphasis-70-default: var( + --db-successful-on-bg-basic-emphasis-70-default +); +$db-successful-on-bg-basic-emphasis-70-hovered: var( + --db-successful-on-bg-basic-emphasis-70-hovered +); +$db-successful-on-bg-basic-emphasis-70-pressed: var( + --db-successful-on-bg-basic-emphasis-70-pressed +); +$db-successful-on-bg-basic-emphasis-60-default: var( + --db-successful-on-bg-basic-emphasis-60-default +); +$db-successful-on-bg-basic-emphasis-60-hovered: var( + --db-successful-on-bg-basic-emphasis-60-hovered +); +$db-successful-on-bg-basic-emphasis-60-pressed: var( + --db-successful-on-bg-basic-emphasis-60-pressed +); +$db-successful-on-bg-basic-emphasis-50-default: var( + --db-successful-on-bg-basic-emphasis-50-default +); +$db-successful-on-bg-basic-emphasis-50-hovered: var( + --db-successful-on-bg-basic-emphasis-50-hovered +); +$db-successful-on-bg-basic-emphasis-50-pressed: var( + --db-successful-on-bg-basic-emphasis-50-pressed +); +$db-successful-bg-inverted-contrast-max-default: var( + --db-successful-bg-inverted-contrast-max-default +); +$db-successful-bg-inverted-contrast-max-hovered: var( + --db-successful-bg-inverted-contrast-max-hovered +); +$db-successful-bg-inverted-contrast-max-pressed: var( + --db-successful-bg-inverted-contrast-max-pressed +); +$db-successful-bg-inverted-contrast-high-default: var( + --db-successful-bg-inverted-contrast-high-default +); +$db-successful-bg-inverted-contrast-high-hovered: var( + --db-successful-bg-inverted-contrast-high-hovered +); +$db-successful-bg-inverted-contrast-high-pressed: var( + --db-successful-bg-inverted-contrast-high-pressed +); +$db-successful-bg-inverted-contrast-low-default: var( + --db-successful-bg-inverted-contrast-low-default +); +$db-successful-bg-inverted-contrast-low-hovered: var( + --db-successful-bg-inverted-contrast-low-hovered +); +$db-successful-bg-inverted-contrast-low-pressed: var( + --db-successful-bg-inverted-contrast-low-pressed +); +$db-successful-on-bg-inverted-default: var( + --db-successful-on-bg-inverted-default +); +$db-successful-on-bg-inverted-hovered: var( + --db-successful-on-bg-inverted-hovered +); +$db-successful-on-bg-inverted-pressed: var( + --db-successful-on-bg-inverted-pressed +); +$db-successful-origin-default: var(--db-successful-origin-default); +$db-successful-origin-hovered: var(--db-successful-origin-hovered); +$db-successful-origin-pressed: var(--db-successful-origin-pressed); +$db-successful-on-origin-default: var(--db-successful-on-origin-default); +$db-successful-on-origin-hovered: var(--db-successful-on-origin-hovered); +$db-successful-on-origin-pressed: var(--db-successful-on-origin-pressed); diff --git a/packages/foundations/scss/colors/speaking-colors/semantic/_warning.speaking-colors.scss b/packages/foundations/scss/colors/speaking-colors/semantic/_warning.speaking-colors.scss new file mode 100644 index 00000000000..e6b9d0e0bae --- /dev/null +++ b/packages/foundations/scss/colors/speaking-colors/semantic/_warning.speaking-colors.scss @@ -0,0 +1,130 @@ +$db-warning-bg-basic-level-1-default: var( + --db-warning-bg-basic-level-1-default +); +$db-warning-bg-basic-level-1-hovered: var( + --db-warning-bg-basic-level-1-hovered +); +$db-warning-bg-basic-level-1-pressed: var( + --db-warning-bg-basic-level-1-pressed +); +$db-warning-bg-basic-level-2-default: var( + --db-warning-bg-basic-level-2-default +); +$db-warning-bg-basic-level-2-hovered: var( + --db-warning-bg-basic-level-2-hovered +); +$db-warning-bg-basic-level-2-pressed: var( + --db-warning-bg-basic-level-2-pressed +); +$db-warning-bg-basic-level-3-default: var( + --db-warning-bg-basic-level-3-default +); +$db-warning-bg-basic-level-3-hovered: var( + --db-warning-bg-basic-level-3-hovered +); +$db-warning-bg-basic-level-3-pressed: var( + --db-warning-bg-basic-level-3-pressed +); + +$db-warning-bg-basic-transparent-full-default: var( + --db-warning-bg-basic-transparent-full-default +); +$db-warning-bg-basic-transparent-semi-default: var( + --db-warning-bg-basic-transparent-semi-default +); +$db-warning-bg-basic-transparent-hovered: var( + --db-warning-bg-basic-transparent-hovered +); +$db-warning-bg-basic-transparent-pressed: var( + --db-warning-bg-basic-transparent-pressed +); +$db-warning-on-bg-basic-emphasis-100-default: var( + --db-warning-on-bg-basic-emphasis-100-default +); +$db-warning-on-bg-basic-emphasis-100-hovered: var( + --db-warning-on-bg-basic-emphasis-100-hovered +); +$db-warning-on-bg-basic-emphasis-100-pressed: var( + --db-warning-on-bg-basic-emphasis-100-pressed +); +$db-warning-on-bg-basic-emphasis-90-default: var( + --db-warning-on-bg-basic-emphasis-90-default +); +$db-warning-on-bg-basic-emphasis-90-hovered: var( + --db-warning-on-bg-basic-emphasis-90-hovered +); +$db-warning-on-bg-basic-emphasis-90-pressed: var( + --db-warning-on-bg-basic-emphasis-90-pressed +); +$db-warning-on-bg-basic-emphasis-80-default: var( + --db-warning-on-bg-basic-emphasis-80-default +); +$db-warning-on-bg-basic-emphasis-80-hovered: var( + --db-warning-on-bg-basic-emphasis-80-hovered +); +$db-warning-on-bg-basic-emphasis-80-pressed: var( + --db-warning-on-bg-basic-emphasis-80-pressed +); +$db-warning-on-bg-basic-emphasis-70-default: var( + --db-warning-on-bg-basic-emphasis-70-default +); +$db-warning-on-bg-basic-emphasis-70-hovered: var( + --db-warning-on-bg-basic-emphasis-70-hovered +); +$db-warning-on-bg-basic-emphasis-70-pressed: var( + --db-warning-on-bg-basic-emphasis-70-pressed +); +$db-warning-on-bg-basic-emphasis-60-default: var( + --db-warning-on-bg-basic-emphasis-60-default +); +$db-warning-on-bg-basic-emphasis-60-hovered: var( + --db-warning-on-bg-basic-emphasis-60-hovered +); +$db-warning-on-bg-basic-emphasis-60-pressed: var( + --db-warning-on-bg-basic-emphasis-60-pressed +); +$db-warning-on-bg-basic-emphasis-50-default: var( + --db-warning-on-bg-basic-emphasis-50-default +); +$db-warning-on-bg-basic-emphasis-50-hovered: var( + --db-warning-on-bg-basic-emphasis-50-hovered +); +$db-warning-on-bg-basic-emphasis-50-pressed: var( + --db-warning-on-bg-basic-emphasis-50-pressed +); +$db-warning-bg-inverted-contrast-max-default: var( + --db-warning-bg-inverted-contrast-max-default +); +$db-warning-bg-inverted-contrast-max-hovered: var( + --db-warning-bg-inverted-contrast-max-hovered +); +$db-warning-bg-inverted-contrast-max-pressed: var( + --db-warning-bg-inverted-contrast-max-pressed +); +$db-warning-bg-inverted-contrast-high-default: var( + --db-warning-bg-inverted-contrast-high-default +); +$db-warning-bg-inverted-contrast-high-hovered: var( + --db-warning-bg-inverted-contrast-high-hovered +); +$db-warning-bg-inverted-contrast-high-pressed: var( + --db-warning-bg-inverted-contrast-high-pressed +); +$db-warning-bg-inverted-contrast-low-default: var( + --db-warning-bg-inverted-contrast-low-default +); +$db-warning-bg-inverted-contrast-low-hovered: var( + --db-warning-bg-inverted-contrast-low-hovered +); +$db-warning-bg-inverted-contrast-low-pressed: var( + --db-warning-bg-inverted-contrast-low-pressed +); +$db-warning-on-bg-inverted-default: var(--db-warning-on-bg-inverted-default); +$db-warning-on-bg-inverted-hovered: var(--db-warning-on-bg-inverted-hovered); +$db-warning-on-bg-inverted-pressed: var(--db-warning-on-bg-inverted-pressed); +$db-warning-origin-default: var(--db-warning-origin-default); +$db-warning-origin-hovered: var(--db-warning-origin-hovered); +$db-warning-origin-pressed: var(--db-warning-origin-pressed); +$db-warning-on-origin-default: var(--db-warning-on-origin-default); +$db-warning-on-origin-hovered: var(--db-warning-on-origin-hovered); +$db-warning-on-origin-pressed: var(--db-warning-on-origin-pressed); diff --git a/packages/foundations/scss/default-theme.scss b/packages/foundations/scss/default-theme.scss index bb41345d33c..9c4523e102f 100644 --- a/packages/foundations/scss/default-theme.scss +++ b/packages/foundations/scss/default-theme.scss @@ -847,7 +847,7 @@ html:not(:has(> head > meta[name="color-scheme"])) { } [data-color-scheme] { - @extend %db-neutral-bg-lvl-1; + @extend %db-neutral-bg-basic-level-1; } [data-color-scheme="light"] { diff --git a/packages/foundations/scss/helpers/_divider.scss b/packages/foundations/scss/helpers/_divider.scss index 06f9c8085be..b0bf9603583 100644 --- a/packages/foundations/scss/helpers/_divider.scss +++ b/packages/foundations/scss/helpers/_divider.scss @@ -6,12 +6,12 @@ // https://bugs.chromium.org/p/chromium/issues/detail?id=1274133 // https://github.com/WebKit/WebKit/commit/1890bfb551da24735804cb1a3d5f14b210f7c7b8 @mixin divider($position: "top", $slot: "before") { - --db-divider-bg-color: #{colors.$db-current-color-border}; + --db-divider-bg-color: #{colors.$db-adaptive-on-bg-basic-emphasis-60-default}; position: relative; &[data-emphasis="strong"] { - --db-divider-bg-color: #{colors.$db-current-color-contrast-low-enabled}; + --db-divider-bg-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default}; } &::#{$slot} { diff --git a/packages/foundations/scss/helpers/_focus.scss b/packages/foundations/scss/helpers/_focus.scss index 4ce3fa5d683..6eb9d3cc715 100644 --- a/packages/foundations/scss/helpers/_focus.scss +++ b/packages/foundations/scss/helpers/_focus.scss @@ -2,7 +2,7 @@ @use "../colors"; %focus-placeholder { - outline: #{variables.$db-border-height-2xs} solid #{colors.$db-informational-contrast-high-enabled}; + outline: #{variables.$db-border-height-2xs} solid #{colors.$db-informational-on-bg-basic-emphasis-80-default}; outline-offset: variables.$db-border-height-xs; &:not([type="radio"], [role="switch"]) { diff --git a/packages/foundations/scss/init/default-code.scss b/packages/foundations/scss/init/default-code.scss index 89a1b66084d..2577451d506 100644 --- a/packages/foundations/scss/init/default-code.scss +++ b/packages/foundations/scss/init/default-code.scss @@ -2,22 +2,40 @@ @use "../colors"; @use "../variables"; +@use "../helpers"; pre:has(code) { - @extend %db-neutral-contrast-high; - + background-color: colors.$db-adaptive-bg-inverted-contrast-max-default; + color: colors.$db-adaptive-on-bg-inverted-default; padding: variables.$db-spacing-fixed-xs; } -code { - @extend %db-neutral-contrast-high; +a:has(code) { + background-color: colors.$db-adaptive-bg-inverted-contrast-max-default; + color: colors.$db-adaptive-on-bg-inverted-default; + + @include helpers.hover { + color: #{colors.$db-adaptive-on-bg-inverted-hovered}; + } + + @include helpers.active { + color: #{colors.$db-adaptive-on-bg-inverted-pressed}; + } + > code { + color: inherit; + } +} + +code { + background-color: colors.$db-adaptive-bg-inverted-contrast-max-default; + color: colors.$db-adaptive-on-bg-inverted-default; padding-block: variables.$db-spacing-fixed-3xs; padding-inline: variables.$db-spacing-fixed-2xs; } blockquote { - @extend %db-neutral-bg-transparent-semi; + @extend %db-neutral-bg-basic-transparent-semi; margin: 0; padding: variables.$db-spacing-fixed-sm variables.$db-spacing-fixed-md; diff --git a/packages/foundations/scss/init/default-root.scss b/packages/foundations/scss/init/default-root.scss index 4c93d2da914..c22796301bb 100644 --- a/packages/foundations/scss/init/default-root.scss +++ b/packages/foundations/scss/init/default-root.scss @@ -4,7 +4,7 @@ // Setup default styles for :root { - @extend %db-neutral-bg-lvl-1; + @extend %db-neutral-bg-basic-level-1; /* This is a MS power apps specific class name */ .app-canvas, diff --git a/packages/foundations/scss/init/required.scss b/packages/foundations/scss/init/required.scss index e0a2c889b4e..04a1ea15e1c 100644 --- a/packages/foundations/scss/init/required.scss +++ b/packages/foundations/scss/init/required.scss @@ -109,7 +109,7 @@ iframe { list-style-type: "\2022"+ " "; li::marker { - color: #{colors.$db-brand-origin-enabled}; + color: #{colors.$db-brand-origin-default}; } } diff --git a/packages/foundations/tailwind/tailwind-tokens.json b/packages/foundations/tailwind/tailwind-tokens.json index 5ec7a98a006..96bbea1418a 100644 --- a/packages/foundations/tailwind/tailwind-tokens.json +++ b/packages/foundations/tailwind/tailwind-tokens.json @@ -1,68 +1,98 @@ { "colors": { - "current": { - "border": "var(--db-current-color-border)", - "on": { - "enabled": "var(--db-current-color-enabled)", - "hover": "var(--db-current-color-hover)", - "pressed": "var(--db-current-color-pressed)", - "contrast": { - "enabled": "var(--db-current-color-on-contrast-enabled)", - "hover": "var(--db-current-color-on-contrast-hover)", - "pressed": "var(--db-current-color-on-contrast-pressed)" - } - }, + "adaptive": { "bg": { - "enabled": "var(--db-current-color-bg-enabled)", - "hover": "var(--db-current-color-bg-hover)", - "pressed": "var(--db-current-color-bg-pressed)", - "lvl-1": { - "enabled": "var(--db-current-color-bg-lvl-1-enabled)", - "hover": "var(--db-current-color-bg-lvl-1-hover)", - "pressed": "var(--db-current-color-bg-lvl-1-pressed)" - }, - "lvl-2": { - "enabled": "var(--db-current-color-bg-lvl-2-enabled)", - "hover": "var(--db-current-color-bg-lvl-2-hover)", - "pressed": "var(--db-current-color-bg-lvl-2-pressed)" - }, - "lvl-3": { - "enabled": "var(--db-current-color-bg-lvl-3-enabled)", - "hover": "var(--db-current-color-bg-lvl-3-hover)", - "pressed": "var(--db-current-color-bg-lvl-3-pressed)" + "basic": { + "level-1": { + "default": "var(--db-adaptive-bg-basic-level-1-default)", + "hovered": "var(--db-adaptive-bg-basic-level-1-hovered)", + "pressed": "var(--db-adaptive-bg-basic-level-1-pressed)" + }, + "level-2": { + "default": "var(--db-adaptive-bg-basic-level-2-default)", + "hovered": "var(--db-adaptive-bg-basic-level-2-hovered)", + "pressed": "var(--db-adaptive-bg-basic-level-2-pressed)" + }, + "level-3": { + "default": "var(--db-adaptive-bg-basic-level-3-default)", + "hovered": "var(--db-adaptive-bg-basic-level-3-hovered)", + "pressed": "var(--db-adaptive-bg-basic-level-3-pressed)" + }, + "transparent": { + "full-default": "var(--db-adaptive-bg-basic-transparent-full-default)", + "semi-default": "var(--db-adaptive-bg-basic-transparent-semi-default)", + "hovered": "var(--db-adaptive-bg-basic-transparent-hovered)", + "pressed": "var(--db-adaptive-bg-basic-transparent-pressed)" + } }, - - "transparent": { - "full-enabled": "var(--db-current-color-bg-transparent-full-enabled)", - "semi-enabled": "var(--db-current-color-bg-transparent-semi-enabled)", - "hover": "var(--db-current-color-bg-transparent-hover)", - "pressed": "var(--db-current-color-bg-transparent-pressed)" + "inverted": { + "contrast": { + "max": { + "default": "var(--db-adaptive-bg-inverted-contrast-max-default)", + "hovered": "var(--db-adaptive-bg-inverted-contrast-max-hovered)", + "pressed": "var(--db-adaptive-bg-inverted-contrast-max-pressed)" + }, + "high": { + "default": "var(--db-adaptive-bg-inverted-contrast-high-default)", + "hovered": "var(--db-adaptive-bg-inverted-contrast-high-hovered)", + "pressed": "var(--db-adaptive-bg-inverted-contrast-high-pressed)" + }, + "low": { + "default": "var(--db-adaptive-bg-inverted-contrast-low-default)", + "hovered": "var(--db-adaptive-bg-inverted-contrast-low-hovered)", + "pressed": "var(--db-adaptive-bg-inverted-contrast-low-pressed)" + } + } } }, - "contrast": { - "high": { - "enabled": "var(--db-current-color-contrast-high-enabled)", - "hover": "var(--db-current-color-contrast-high-hover)", - "pressed": "var(--db-current-color-contrast-high-pressed)" + "on": { + "basic": { + "emphasis-100": { + "default": "var(--db-adaptive-on-bg-basic-emphasis-100-default)", + "hovered": "var(--db-adaptive-on-bg-basic-emphasis-100-hovered)", + "pressed": "var(--db-adaptive-on-bg-basic-emphasis-100-pressed)" + }, + "emphasis-90": { + "default": "var(--db-adaptive-on-bg-basic-emphasis-90-default)", + "hovered": "var(--db-adaptive-on-bg-basic-emphasis-90-hovered)", + "pressed": "var(--db-adaptive-on-bg-basic-emphasis-90-pressed)" + }, + "emphasis-80": { + "default": "var(--db-adaptive-on-bg-basic-emphasis-80-default)", + "hovered": "var(--db-adaptive-on-bg-basic-emphasis-80-hovered)", + "pressed": "var(--db-adaptive-on-bg-basic-emphasis-80-pressed)" + }, + "emphasis-70": { + "default": "var(--db-adaptive-on-bg-basic-emphasis-70-default)", + "hovered": "var(--db-adaptive-on-bg-basic-emphasis-70-hovered)", + "pressed": "var(--db-adaptive-on-bg-basic-emphasis-70-pressed)" + }, + "emphasis-60": { + "default": "var(--db-adaptive-on-bg-basic-emphasis-60-default)", + "hovered": "var(--db-adaptive-on-bg-basic-emphasis-60-hovered)", + "pressed": "var(--db-adaptive-on-bg-basic-emphasis-60-pressed)" + }, + "emphasis-50": { + "default": "var(--db-adaptive-on-bg-basic-emphasis-50-default)", + "hovered": "var(--db-adaptive-on-bg-basic-emphasis-50-hovered)", + "pressed": "var(--db-adaptive-on-bg-basic-emphasis-50-pressed)" + } + }, + "inverted": { + "default": "var(--db-adaptive-on-bg-inverted-default)", + "hovered": "var(--db-adaptive-on-bg-inverted-hovered)", + "pressed": "var(--db-adaptive-on-bg-inverted-pressed)" }, - "low": { - "enabled": "var(--db-current-color-contrast-high-enabled)", - "hover": "var(--db-current-color-contrast-high-hover)", - "pressed": "var(--db-current-color-contrast-high-pressed)" + "origin": { + "default": "var(--db-adaptive-on-origin-default)", + "hovered": "var(--db-adaptive-on-origin-hovered)", + "pressed": "var(--db-adaptive-on-origin-pressed)" } - } - }, - - "brand": { - "on": { - "enabled": "var(--db-brand-on-enabled)", - "hover": "var(--db-brand-on-hover)", - "pressed": "var(--db-brand-on-pressed)" }, "origin": { - "enabled": "var(--db-brand-origin-enabled)", - "hover": "var(--db-brand-origin-hover)", - "pressed": "var(--db-brand-origin-pressed)" + "default": "var(--db-adaptive-origin-default)", + "hovered": "var(--db-adaptive-origin-hovered)", + "pressed": "var(--db-adaptive-origin-pressed)" } } }, diff --git a/showcases/angular-showcase/src/app/components/section/section.component.html b/showcases/angular-showcase/src/app/components/section/section.component.html index d631aa4b2a2..06eda1a3849 100644 --- a/showcases/angular-showcase/src/app/components/section/section.component.html +++ b/showcases/angular-showcase/src/app/components/section/section.component.html @@ -11,7 +11,7 @@ let-variantIndex="variantIndex" > diff --git a/showcases/e2e/default.ts b/showcases/e2e/default.ts index 19666503050..e33d11999b4 100644 --- a/showcases/e2e/default.ts +++ b/showcases/e2e/default.ts @@ -81,7 +81,7 @@ export const getDefaultScreenshotTest = ({ config.maxDiffPixels = 1; } - await gotoPage(page, path, 'neutral-bg-lvl-1', fixedHeight); + await gotoPage(page, path, 'neutral-bg-basic-level-1', fixedHeight); const header = await page.locator('header').first(); @@ -91,10 +91,7 @@ export const getDefaultScreenshotTest = ({ await preScreenShot(page); } - await expect(page).toHaveScreenshot( - [density, `neutral-bg-lvl-1.png`], - config - ); + await expect(page).toHaveScreenshot(config); }); for (const color of COLORS) { @@ -135,7 +132,7 @@ export const getDefaultScreenshotTest = ({ } test('test with accessibility checker', async ({ page }, { project }) => { - await gotoPage(page, path, 'neutral-bg-lvl-1', fixedHeight); + await gotoPage(page, path, 'neutral-bg-basic-level-1', fixedHeight); let failures: any[] = []; try { if (project.name === 'firefox') { diff --git a/showcases/e2e/fixtures/variants.ts b/showcases/e2e/fixtures/variants.ts index d389dfa9639..5f1be999ec1 100644 --- a/showcases/e2e/fixtures/variants.ts +++ b/showcases/e2e/fixtures/variants.ts @@ -1,5 +1,5 @@ export const COLORS = [ - 'neutral-bg-lvl-1', - 'neutral-bg-lvl-2', - 'neutral-bg-lvl-3' + 'neutral-bg-basic-level-1', + 'neutral-bg-basic-level-2', + 'neutral-bg-basic-level-3' ]; diff --git a/showcases/patternhub/pages/foundations/colors/color-schemes.tsx b/showcases/patternhub/pages/foundations/colors/color-schemes.tsx index 4a86038ee5f..6afb18a62d2 100644 --- a/showcases/patternhub/pages/foundations/colors/color-schemes.tsx +++ b/showcases/patternhub/pages/foundations/colors/color-schemes.tsx @@ -63,7 +63,9 @@ const ColorOverview = () => {
{colors.map((color) => ( -
+
{color} diff --git a/showcases/patternhub/pages/foundations/densities/examples.tsx b/showcases/patternhub/pages/foundations/densities/examples.tsx index b1cad824172..57ed5befe48 100644 --- a/showcases/patternhub/pages/foundations/densities/examples.tsx +++ b/showcases/patternhub/pages/foundations/densities/examples.tsx @@ -48,21 +48,29 @@ const Example = () => {
- + We are functional even that we have - + a color - + the user shouldn't - + focus us
diff --git a/showcases/patternhub/pages/foundations/font-sizes/overview.tsx b/showcases/patternhub/pages/foundations/font-sizes/overview.tsx index 9b57b5ef3cc..6a8784c388e 100644 --- a/showcases/patternhub/pages/foundations/font-sizes/overview.tsx +++ b/showcases/patternhub/pages/foundations/font-sizes/overview.tsx @@ -101,7 +101,7 @@ const ColorOverview = () => {

- + {['3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs', '3xs'].map( (size) => ( <> @@ -145,7 +145,7 @@ const ColorOverview = () => {

- + {( [ { Tag: 'h1', size: 'xl' }, @@ -195,7 +195,7 @@ const ColorOverview = () => {
- + {['3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs', '3xs'].map( (size) => ( <> @@ -237,7 +237,7 @@ const ColorOverview = () => { be selected with the same size (e.g. md).
- +

These custom properties must be used for overwrites:

diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss index fd5c9389ad2..faef0a099c8 100644 --- a/showcases/patternhub/styles/globals.scss +++ b/showcases/patternhub/styles/globals.scss @@ -95,17 +95,17 @@ table { table td, table th { - border: 1px solid colors.$db-current-color-border; + border: 1px solid colors.$db-adaptive-on-bg-basic-emphasis-60-default; padding: variables.$db-spacing-fixed-md; max-width: 33vw; } table tr:nth-child(even) { - @extend %db-neutral-bg-transparent-semi; + @extend %db-neutral-bg-basic-transparent-semi; } table th { - @extend %db-neutral-bg-transparent-semi; + @extend %db-neutral-bg-basic-transparent-semi; padding-inline: variables.$db-spacing-fixed-md; } @@ -118,7 +118,7 @@ div[class^="ch-"] { div, span { @extend %db-overwrite-font-size-sm; - color: colors.$db-current-color-on-bg-enabled; + color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; } } @@ -197,7 +197,7 @@ div[class^="ch-"] { display: flex; justify-content: center; align-items: center; - border: 1px solid colors.$db-current-color-border; + border: 1px solid colors.$db-adaptive-on-bg-basic-emphasis-60-default; padding: variables.$db-spacing-fixed-md; } @@ -254,7 +254,9 @@ div[class^="ch-"] { } %spacing { - @extend %db-successful-contrast-high; + background-color: colors.$db-successful-bg-inverted-contrast-high-default; + color: colors.$db-successful-on-bg-inverted-default; + border-color: colors.$db-successful-bg-inverted-contrast-high-default; height: 100%; display: flex; justify-content: center; @@ -274,7 +276,8 @@ div[class^="ch-"] { border: 1px solid black; > div { display: flex; - border: 1px solid colors.$db-informational-4; + border: 1px solid + colors.$db-adaptive-on-bg-basic-emphasis-60-default; position: relative; } } @@ -331,7 +334,9 @@ div[class^="ch-"] { .sizing { @extend %spacing; - @extend %db-warning-contrast-high; + background-color: colors.$db-warning-bg-inverted-contrast-high-default; + color: colors.$db-warning-on-bg-inverted-default; + border-color: colors.$db-warning-bg-inverted-contrast-high-default; position: unset; block-size: variables.$db-sizing-md; inline-size: variables.$db-sizing-md; @@ -342,7 +347,7 @@ div[class^="ch-"] { .color-schemes-container { padding: variables.$db-spacing-fixed-md; - border: 1px dashed colors.$db-current-color-on-bg-enabled; + border: 1px dashed colors.$db-adaptive-on-bg-basic-emphasis-100-default; display: grid; gap: variables.$db-spacing-fixed-md; grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -431,7 +436,7 @@ h6 { .backdrop { border-radius: variables.$db-border-radius-sm; - background-color: colors.$db-current-color-on-bg-enabled; + background-color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; opacity: 0.64; position: absolute; inset: 0; @@ -501,7 +506,7 @@ h6 { min-inline-size: variables.$db-sizing-3xl; small { - color: colors.$db-informational-contrast-high-enabled; + color: colors.$db-informational-bg-inverted-contrast-high-default; } } diff --git a/showcases/patternhub/styles/highlight.scss b/showcases/patternhub/styles/highlight.scss index 8d3f5bb4859..70c131cd20c 100644 --- a/showcases/patternhub/styles/highlight.scss +++ b/showcases/patternhub/styles/highlight.scss @@ -2,10 +2,10 @@ @use "@db-ui/foundations/build/scss/colors"; pre:has(.hljs):not(:has(.language-shell)) { - @extend %db-neutral-bg-transparent-full; + @extend %db-neutral-bg-basic-transparent-full; .hljs { - @extend %db-neutral-bg-transparent-full; + @extend %db-neutral-bg-basic-transparent-full; } } @@ -17,7 +17,7 @@ pre:has(.hljs):not(:has(.language-shell)) { .hljs-type, .hljs-variable.language_ { /* prettylights-syntax-keyword */ - color: colors.$db-successful-on-bg-weak-enabled; + color: colors.$db-successful-on-bg-basic-emphasis-90-default; } .hljs-title, @@ -25,7 +25,7 @@ pre:has(.hljs):not(:has(.language-shell)) { .hljs-title.class_.inherited__, .hljs-title.function_ { /* prettylights-syntax-entity */ - color: colors.$db-successful-on-bg-weak-enabled; + color: colors.$db-successful-on-bg-basic-emphasis-90-default; } .hljs-attribute, .hljs-literal, @@ -36,73 +36,73 @@ pre:has(.hljs):not(:has(.language-shell)) { .hljs-selector-class, .hljs-selector-id { /* prettylights-syntax-constant */ - color: colors.$db-successful-on-bg-weak-enabled; + color: colors.$db-successful-on-bg-basic-emphasis-90-default; } .hljs-regexp, .hljs-string, .hljs-meta .hljs-string { /* prettylights-syntax-string */ - color: colors.$db-successful-on-bg-weak-enabled; + color: colors.$db-successful-on-bg-basic-emphasis-90-default; } .hljs-built_in, .hljs-symbol { /* prettylights-syntax-variable */ - color: colors.$db-warning-on-bg-weak-enabled; + color: colors.$db-warning-on-bg-basic-emphasis-90-default; } .hljs-attr { - color: colors.$db-informational-on-bg-weak-enabled; + color: colors.$db-informational-on-bg-basic-emphasis-90-default; } .hljs-meta, .hljs-comment, .hljs-code, .hljs-formula { /* prettylights-syntax-comment */ - color: colors.$db-current-color-on-bg-enabled; + color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; } .hljs-tag, .hljs-name { - color: colors.$db-warning-on-bg-weak-enabled; + color: colors.$db-warning-on-bg-basic-emphasis-90-default; } .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo { /* prettylights-syntax-entity-tag */ - color: colors.$db-successful-on-bg-weak-enabled; + color: colors.$db-successful-on-bg-basic-emphasis-90-default; } .hljs-subst { /* prettylights-syntax-storage-modifier-import */ - color: colors.$db-neutral-bg-lvl-1-enabled; + color: colors.$db-neutral-bg-basic-level-1-default; } .hljs-section { /* prettylights-syntax-markup-heading */ - color: colors.$db-informational-on-bg-weak-enabled; + color: colors.$db-informational-on-bg-basic-emphasis-90-default; font-weight: bold; } .hljs-bullet { /* prettylights-syntax-markup-list */ - color: colors.$db-warning-on-bg-weak-enabled; + color: colors.$db-warning-on-bg-basic-emphasis-90-default; } .hljs-emphasis { /* prettylights-syntax-markup-italic */ - color: colors.$db-current-color-on-bg-enabled; + color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; font-style: italic; } .hljs-strong { /* prettylights-syntax-markup-bold */ - color: colors.$db-current-color-on-bg-enabled; + color: colors.$db-adaptive-on-bg-basic-emphasis-100-default; font-weight: bold; } .hljs-addition { /* prettylights-syntax-markup-inserted */ - color: colors.$db-successful-on-bg-weak-enabled; - background-color: colors.$db-neutral-on-bg-weak-enabled; + color: colors.$db-successful-on-bg-basic-emphasis-90-default; + background-color: colors.$db-neutral-on-bg-basic-emphasis-90-default; } .hljs-deletion { /* prettylights-syntax-markup-deleted */ - color: colors.$db-critical-on-bg-weak-enabled; - background-color: colors.$db-neutral-on-bg-weak-enabled; + color: colors.$db-critical-on-bg-basic-emphasis-90-default; + background-color: colors.$db-neutral-on-bg-basic-emphasis-90-default; } .hljs-char.escape_, .hljs-link, diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx index 4500fd0d8bb..984ecbd608d 100644 --- a/showcases/react-showcase/src/components/form/index.tsx +++ b/showcases/react-showcase/src/components/form/index.tsx @@ -150,6 +150,38 @@ const FormComponent = () => { ))} + {['A', 'B', 'C'].map((tag, index) => ( +
  • + + + +
    • + ))}

    Checkbox:

    ( {children} diff --git a/showcases/screen-reader/default.ts b/showcases/screen-reader/default.ts index f2d2fc911c8..5e4627cc193 100644 --- a/showcases/screen-reader/default.ts +++ b/showcases/screen-reader/default.ts @@ -128,7 +128,8 @@ export const testDefault = (defaultTestType: DefaultTestType) => { ...defaultTestType, postTestFn: postTestFn ?? fallbackPostFn, additionalParams: - additionalParams ?? '&color=neutral-bg-lvl-1&density=regular' + additionalParams ?? + '&color=neutral-bg-basic-level-1&density=regular' }; if (isWin()) { diff --git a/showcases/shared/card.json b/showcases/shared/card.json index ab18f1553a4..0f51390d7b3 100644 --- a/showcases/shared/card.json +++ b/showcases/shared/card.json @@ -13,10 +13,6 @@ { "name": "Expressive", "className": "db-density-expressive" - }, - { - "name": "functional", - "className": "db-density-functional" } ] }, diff --git a/showcases/showcase-styles.css b/showcases/showcase-styles.css index 0df491da4cd..0a8f811bdd9 100644 --- a/showcases/showcase-styles.css +++ b/showcases/showcase-styles.css @@ -53,8 +53,7 @@ db-card:is(.variants-card) > .db-card { .variants-list .db-select:has([placeholder="(Default) Basic"]), .variants-list .db-input:has([placeholder="(Default) Basic"]), .variants-list .db-textarea:has([placeholder="(Default) Basic"]) { - margin-block-start: 0; - margin-block-end: auto; + margin-block: 0 auto; } .html-code-container { @@ -117,7 +116,7 @@ db-card:is(.variants-card) > .db-card { display: flex; gap: var(--db-spacing-fixed-sm); padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-sm); - background-color: var(--db-base-bg-lvl-2); + background-color: var(--db-base-bg-basic-level-2); } .badge-inline-container .db-badge { diff --git a/showcases/vanilla-showcase/src/app-shell.js b/showcases/vanilla-showcase/src/app-shell.js index 8efdd9aa03c..ab3fc299c6c 100644 --- a/showcases/vanilla-showcase/src/app-shell.js +++ b/showcases/vanilla-showcase/src/app-shell.js @@ -33,7 +33,7 @@ onload = () => { const queryParameters = getQueryParams(); const density = queryParameters.density ?? 'regular'; - const color = queryParameters.color ?? 'neutral-bg-lvl-1'; + const color = queryParameters.color ?? 'neutral-bg-basic-level-1'; content.className = getClassName(density, color); for (const selectDensity of selectDensities) { diff --git a/showcases/vue-showcase/src/components/section/Section.vue b/showcases/vue-showcase/src/components/section/Section.vue index c712d7362a4..01ee403de34 100644 --- a/showcases/vue-showcase/src/components/section/Section.vue +++ b/showcases/vue-showcase/src/components/section/Section.vue @@ -10,7 +10,7 @@ import { DBSection } from "../../../../../output/vue/src"; #example="{ exampleIndex, variantIndex, exampleName, exampleProps }" >