Skip to content
Snippets Groups Projects
Commit 357cfe16 authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Small color system fixes

parent 43708a15
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/app-shell/src/auth-menu-button.js
+ 2
− 2
View file @ 357cfe16
......@@ -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 {
......
packages/file-handling/src/clipboard.js
+ 1
− 1
View file @ 357cfe16
......@@ -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;
......
packages/file-handling/src/file-sink.js
+ 1
− 1
View file @ 357cfe16
......@@ -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%;
......
packages/theme-switcher/README.md
+ 47
− 48
View file @ 357cfe16
......@@ -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>
```
......
packages/theme-switcher/src/demo.js
+ 31
− 40
View file @ 357cfe16
......@@ -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>
......
toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
+ 30
− 31
View file @ 357cfe16
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment