diff --git a/packages/app-shell/src/auth-menu-button.js b/packages/app-shell/src/auth-menu-button.js
index b4dcaea1afbe0c61ec1df936435dc0ce0170c719..d580e457588a987addf052fba311e839adc4d185 100644
--- a/packages/app-shell/src/auth-menu-button.js
+++ b/packages/app-shell/src/auth-menu-button.js
@@ -150,8 +150,8 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
}
.menu a.selected {
- color: var(--dbp-secondary-text);
- background-color: var(--dbp-secondary-base);
+ color: var(--dbp-on-secondary-surface);
+ background-color: var(--dbp-secondary-surface);
}
.dropdown-item {
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index 82cd179c422f10404887df50b7298552539a2fc3..dfc508194555dd3701fbe816e302f5477cf24c1b 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -931,7 +931,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
.clipboard-footer {
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
width: 100%;
padding-top: 10px;
display: flex;
diff --git a/packages/file-handling/src/file-sink.js b/packages/file-handling/src/file-sink.js
index 888835404541acd531cade39acfaa83ff0c17fda..296a4cb5f89a344f2abdbc4359abcbb1d0479c44 100644
--- a/packages/file-handling/src/file-sink.js
+++ b/packages/file-handling/src/file-sink.js
@@ -383,7 +383,7 @@ export class FileSink extends ScopedElementsMixin(DbpFileHandlingLitElement) {
}
.paddle::before {
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
opacity: 0.8;
content: '';
width: 100%;
diff --git a/packages/theme-switcher/README.md b/packages/theme-switcher/README.md
index 12067a8c0a1c8e4d47dba0ec49e72e5d46fff6d5..388b16f5220db51f74850b85042769c806c16923 100644
--- a/packages/theme-switcher/README.md
+++ b/packages/theme-switcher/README.md
@@ -23,54 +23,53 @@ applied to the body of your html document. To add a style to the specific class
<style>
.light-theme{
- --dbp-override-base: white;
- --dbp-override-base-inverted: black;
- --dbp-override-text: black;
- --dbp-override-text-inverted: white;
- --dbp-override-text-muted: #767676;
- --dbp-override-accent: #c24f68;
- --dbp-override-primary-base: #2a4491;
- --dbp-override-primary-text: white;
- --dbp-override-primary-surface-border-color: #2a4491;
- --dbp-override-secondary-base: white;
- --dbp-override-secondary-text: black;
- --dbp-override-secondary-surface-border-color: black;
- --dbp-override-info: #2a4491;
- --dbp-override-success: #188018;
- --dbp-override-warning-as-text: #c15500;
- --dbp-override-warning: #f99a41;
- --dbp-override-danger: #de3535;
- --dbp-override-border: 1px solid black;
- --dbp-override-border-radius: 0px;
- --dbp-override-hover-base: black;
- --dbp-override-hover-text: white;
-
- }
-
- .dark-theme{
- --dbp-override-base: #151515;
- --dbp-override-base-inverted: white;
- --dbp-override-text: white;
- --dbp-override-text-inverted: #151515;
- --dbp-override-text-muted: #666666;
- --dbp-override-accent: #c24f68;
- --dbp-override-primary-base: #8ca4eb;
- --dbp-override-primary-text: #151515;
- --dbp-override-primary-surface-border-color: #8ca4eb;
- --dbp-override-secondary-base: #151515;
- --dbp-override-secondary-text: white;
- --dbp-override-secondary-surface-border-color: white;
- --dbp-override-info: #8ca4eb;
- --dbp-override-success: #7acc79;
- --dbp-override-warning-as-text: #f99a41;
- --dbp-override-warning: #f99a41;
- --dbp-override-danger: #de3535;
- --dbp-override-border: 1px solid white;
- --dbp-override-border-radius: 0px;
- --dbp-override-hover-base: white;
- --dbp-override-hover-text: #151515;
-
- }
+ --dbp-override-background: white;
+ --dbp-override-content: black;
+
+ --dbp-override-primary: #2a4491;
+ --dbp-override-secondary: black;
+ --dbp-override-secondary-surface: white;
+ --dbp-override-on-secondary-surface: black;
+ --dbp-override-secondary-surface-border-color: black;
+
+ --dbp-override-muted: #767676;
+ --dbp-override-accent: #c24f68;
+ --dbp-override-info: #2a4491;
+ --dbp-override-success: #188018;
+ --dbp-override-warning: #c15500;
+ --dbp-override-warning-surface: #ffad4d;
+ --dbp-override-on-warning-surface: black;
+ --dbp-override-danger: #de3535;
+
+ --dbp-override-border: 1px solid black;
+
+ --dbp-override-hover-background-color: black;
+ --dbp-override-hover-color: white;
+ }
+
+ .dark-theme{
+ --dbp-override-background: #151515;
+ --dbp-override-content: white;
+
+ --dbp-override-primary: #8ca4eb;
+ --dbp-override-secondary: white;
+ --dbp-override-secondary-surface: #151515;
+ --dbp-override-on-secondary-surface: white;
+ --dbp-override-secondary-surface-border-color: #151515;
+
+ --dbp-override-muted: #666666;
+ --dbp-override-accent: #c24f68;
+ --dbp-override-info: #8ca4eb;
+ --dbp-override-success: #7acc79;
+ --dbp-override-warning: #f99a41;
+ --dbp-override-on-warning-surface: black;
+ --dbp-override-danger: #de3535;
+
+ --dbp-override-border: 1px solid white;
+
+ --dbp-override-hover-background-color: white;
+ --dbp-override-hover-color: #151515;
+ }
</style>
<script type="module" src="node_modules/@dbp-toolkit/theme-switcher/dist/dbp-theme-switcher.js"></script>
```
diff --git a/packages/theme-switcher/src/demo.js b/packages/theme-switcher/src/demo.js
index d1dcba88dde242d9f3a7a23fb64cd74491f3c74a..7f8725ea8baa5eb18dd3b1edf272124b88b5ef9c 100644
--- a/packages/theme-switcher/src/demo.js
+++ b/packages/theme-switcher/src/demo.js
@@ -45,62 +45,53 @@ export class ThemeSwitcherDemo extends ScopedElementsMixin(LitElement) {
return html`
<style>
- .light-theme {
- /* You must not fill out all vars, if they are not filled in, it would take an appropriate default value */
- --dbp-override-base: white;
- --dbp-override-base-inverted: black;
- --dbp-override-text: black;
- --dbp-override-text-inverted: white;
- --dbp-override-text-muted: #767676;
- --dbp-override-accent: #c24f68;
- --dbp-override-primary-base: #2a4491;
- --dbp-override-primary-text: white;
- --dbp-override-primary-surface-border-color: #2a4491;
- --dbp-override-secondary-base: white;
- --dbp-override-secondary-text: black;
+ .light-theme{
+ --dbp-override-background: white;
+ --dbp-override-content: black;
+
+ --dbp-override-primary: #2a4491;
+ --dbp-override-secondary: black;
+ --dbp-override-secondary-surface: white;
+ --dbp-override-on-secondary-surface: black;
--dbp-override-secondary-surface-border-color: black;
+
+ --dbp-override-muted: #767676;
+ --dbp-override-accent: #c24f68;
--dbp-override-info: #2a4491;
--dbp-override-success: #188018;
- --dbp-override-warning-as-text: #c15500;
- --dbp-override-warning: #f99a41;
+ --dbp-override-warning: #c15500;
+ --dbp-override-warning-surface: #ffad4d;
+ --dbp-override-on-warning-surface: black;
--dbp-override-danger: #de3535;
- --dbp-override-border: 1px solid black;
- --dbp-override-border-radius: 0px;
- /* Remove hover vars if you don't want a hover effect */
+ --dbp-override-border: 1px solid black;
- --dbp-override-hover-base: black;
- --dbp-override-hover-text: white;
+ --dbp-override-hover-background-color: black;
+ --dbp-override-hover-color: white;
}
- .dark-theme {
- /* If you don't want to use an additional theme, then delete the "themes" attribute */
- /* You have to fill out all vars, if you want to use the dark theme, the default values would be the light theme. */
+ .dark-theme{
+ --dbp-override-background: #151515;
+ --dbp-override-content: white;
+
+ --dbp-override-primary: #8ca4eb;
+ --dbp-override-secondary: white;
+ --dbp-override-secondary-surface: #151515;
+ --dbp-override-on-secondary-surface: white;
+ --dbp-override-secondary-surface-border-color: #151515;
- --dbp-override-base: #151515;
- --dbp-override-base-inverted: white;
- --dbp-override-text: white;
- --dbp-override-text-inverted: #151515;
- --dbp-override-text-muted: #666666;
+ --dbp-override-muted: #666666;
--dbp-override-accent: #c24f68;
- --dbp-override-primary-base: #8ca4eb;
- --dbp-override-primary-text: #151515;
- --dbp-override-primary-surface-border-color: #8ca4eb;
- --dbp-override-secondary-base: #151515;
- --dbp-override-secondary-text: white;
- --dbp-override-secondary-surface-border-color: white;
--dbp-override-info: #8ca4eb;
--dbp-override-success: #7acc79;
- --dbp-override-warning-as-text: #f99a41;
--dbp-override-warning: #f99a41;
+ --dbp-override-on-warning-surface: black;
--dbp-override-danger: #de3535;
- --dbp-override-border: 1px solid white;
- --dbp-override-border-radius: 0px;
- /* Remove hover vars if you don't want a hover effect */
+ --dbp-override-border: 1px solid white;
- --dbp-override-hover-base: white;
- --dbp-override-hover-text: #151515;
+ --dbp-override-hover-background-color: white;
+ --dbp-override-hover-color: #151515;
}
</style>
diff --git a/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs b/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
index 86805581cb732d1d35f1e74394f0124878af4418..ef38009f126c9bdba6e6f9009e443eb59867f93d 100644
--- a/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
+++ b/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
@@ -55,53 +55,52 @@
}
.light-theme{
- --dbp-override-base: white;
- --dbp-override-base-inverted: black;
- --dbp-override-text: black;
- --dbp-override-text-inverted: white;
- --dbp-override-text-muted: #767676;
- --dbp-override-accent: #c24f68;
- --dbp-override-primary-base: #2a4491;
- --dbp-override-primary-text: white;
- --dbp-override-primary-surface-border-color: #2a4491;
- --dbp-override-secondary-base: white;
- --dbp-override-secondary-text: black;
+ --dbp-override-background: white;
+ --dbp-override-content: black;
+
+ --dbp-override-primary: #2a4491;
+ --dbp-override-secondary: black;
+ --dbp-override-secondary-surface: white;
+ --dbp-override-on-secondary-surface: black;
--dbp-override-secondary-surface-border-color: black;
+
+ --dbp-override-muted: #767676;
+ --dbp-override-accent: #c24f68;
--dbp-override-info: #2a4491;
--dbp-override-success: #188018;
- --dbp-override-warning-as-text: #c15500;
- --dbp-override-warning: #f99a41;
+ --dbp-override-warning: #c15500;
+ --dbp-override-warning-surface: #ffad4d;
+ --dbp-override-on-warning-surface: black;
--dbp-override-danger: #de3535;
+
--dbp-override-border: 1px solid black;
- --dbp-override-border-radius: 0px;
- --dbp-override-hover-base: black;
- --dbp-override-hover-text: white;
+ --dbp-override-hover-background-color: black;
+ --dbp-override-hover-color: white;
}
.dark-theme{
- --dbp-override-base: #151515;
- --dbp-override-base-inverted: white;
- --dbp-override-text: white;
- --dbp-override-text-inverted: #151515;
- --dbp-override-text-muted: #666666;
+ --dbp-override-background: #151515;
+ --dbp-override-content: white;
+
+ --dbp-override-primary: #8ca4eb;
+ --dbp-override-secondary: white;
+ --dbp-override-secondary-surface: #151515;
+ --dbp-override-on-secondary-surface: white;
+ --dbp-override-secondary-surface-border-color: #151515;
+
+ --dbp-override-muted: #666666;
--dbp-override-accent: #c24f68;
- --dbp-override-primary-base: #8ca4eb;
- --dbp-override-primary-text: #151515;
- --dbp-override-primary-surface-border-color: #8ca4eb;
- --dbp-override-secondary-base: #151515;
- --dbp-override-secondary-text: white;
- --dbp-override-secondary-surface-border-color: white;
--dbp-override-info: #8ca4eb;
--dbp-override-success: #7acc79;
- --dbp-override-warning-as-text: #f99a41;
--dbp-override-warning: #f99a41;
+ --dbp-override-on-warning-surface: black;
--dbp-override-danger: #de3535;
+
--dbp-override-border: 1px solid white;
- --dbp-override-border-radius: 0px;
- --dbp-override-hover-base: white;
- --dbp-override-hover-text: #151515;
+ --dbp-override-hover-background-color: white;
+ --dbp-override-hover-color: #151515;
}
</style>