feat: add additional colors (#2692)

* feat: changed the consumption how to import required styles * fix: wrong import * chore: add extra classes for foundation styling docs: improve documentation for foundations and components * fix: issue with wrong placeholder * fix: issue with wrong import * chore: update snapshots * chore: update snapshots * fix: missing dependency for helper class * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update packages/components/src/components/tooltip/tooltip.scss Co-authored-by: Maximilian Franzke <[email protected]> * fix: issues from PR * chore: update snapshots * feat: add additional colors * chore: update snapshots * Update showcases/patternhub/pages/foundations/colors/overview.tsx Co-authored-by: Maximilian Franzke <[email protected]> * Update showcases/patternhub/pages/foundations/colors/overview.tsx Co-authored-by: Maximilian Franzke <[email protected]> * Update packages/foundations/scss/colors/_placeholder.scss Co-authored-by: Maximilian Franzke <[email protected]> * Update packages/foundations/scss/colors/_placeholder.scss Co-authored-by: Maximilian Franzke <[email protected]> * Update packages/foundations/scss/colors/_index.scss Co-authored-by: Maximilian Franzke <[email protected]> * chore: rename wrong filename * fix: wrong property name --------- Co-authored-by: Maximilian Franzke <[email protected]>
db-ui · Jun 19, 2024 · 5ce6cd3 · 5ce6cd3
1 parent 6abe7ae
commit 5ce6cd3
Show file tree

Hide file tree

Showing 25 changed files with 2,201 additions and 320 deletions.
diff --git a/...showcase/chromium/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png b/...showcase/chromium/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png
diff --git a/...r/showcase/webkit/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png b/...r/showcase/webkit/regular/neutral-bg-lvl-1/DBHeader-should-match-screenshot.png
diff --git a/packages/foundations/docs/Colors.md b/packages/foundations/docs/Colors.md
@@ -18,7 +18,7 @@ Then you can use e.g. **informational** color by extending our SCSS placeholders
 
 We're providing an [overview for all possible colors](./overview).
 
-There are several variants: `base`, `brand`, `neutral`, `critical`, `informational`, `successful`, `warning`.
+There are several variants: `brand`, `neutral`, `critical`, `informational`, `successful`, `warning`.
 
 **We use `XXX` here you should replace it with a variant from above.**
 
@@ -30,6 +30,12 @@ There are several variants: `base`, `brand`, `neutral`, `critical`, `information
 | `XXX-transparent-semi` | `class="db-XXX-bg-transparent-semi"` | `@extend %db-XXX-bg-transparent-semi` | `class="db-XXX-bg-transparent-semi"` |
 | `XXX-transparent-full` | `class="db-XXX-bg-transparent-full"` | `@extend %db-XXX-bg-transparent-full` | `class="db-XXX-bg-transparent-full"` |
 
+#### Additional Colors
+
+Besides of the variants above we deliver additional colors which aren't required for the Design System, but you can use them the same way. The additional variants are:
+`yellow`, `orange`, `red`, `pink`, `violet`, `blue`,
+`cyan`, `turquoise`, `green`
+
 ### Dark- & Light-Mode
 
 We provide tokens for both dark- and light-mode. If you include the **db-ui-42** style you get a media query `@media (prefers-color-scheme: dark)` with the relevant tokens. You can [emulate](https://developer.chrome.com/docs/devtools/rendering/emulate-css/) the modes inside the devtools.