diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index 5dadf1ad9090f3d2e44406fa4653226e0a48e211..45b2f1c43b16cc5cad3c372eff134196db3665e7 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -599,11 +599,11 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
header .hd1-middle {
grid-area: hd1-middle;
- background-color: var(--dbp-text);
+ background-color: var(--dbp-content);
background: linear-gradient(
180deg,
- var(--dbp-text) 0%,
- var(--dbp-text) 85%,
+ var(--dbp-content) 0%,
+ var(--dbp-content) 85%,
rgba(0, 0, 0, 0) 90%
);
}
@@ -635,8 +635,8 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
}
header .hd2-left a:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
}
header .hd2-right {
@@ -648,7 +648,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
}
header a {
- color: var(--dbp-text);
+ color: var(--dbp-content);
display: inline;
}
@@ -678,9 +678,9 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
}
footer a:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
- border-color: var(--dbp-hover-text);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
+ border-color: var(--dbp-hover-color, var(--dbp-content));
}
/* We don't allow inline-svg */
@@ -699,15 +699,15 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
.menu a {
padding: 0.3em;
font-weight: 300;
- color: var(--dbp-text);
+ color: var(--dbp-content);
display: block;
padding-right: 13px;
word-break: break-word;
}
.menu a:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
}
.menu a.selected {
@@ -719,7 +719,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
aside .subtitle {
display: none;
- color: var(--dbp-text);
+ color: var(--dbp-content);
font-size: 1.25rem;
font-weight: 300;
line-height: 1.25;
@@ -767,7 +767,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
position: sticky;
top: 0;
width: 100%;
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
z-index: 10;
}
@@ -782,7 +782,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
border-top-width: 0;
width: 100%;
position: absolute;
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
z-index: 10;
}
diff --git a/packages/app-shell/src/auth-menu-button.js b/packages/app-shell/src/auth-menu-button.js
index a0eb8e566d9bd82f7384ad5e0770e76dbf36ee88..ab422b9377032a9437eff7387a0243ce2f52ff4a 100644
--- a/packages/app-shell/src/auth-menu-button.js
+++ b/packages/app-shell/src/auth-menu-button.js
@@ -94,8 +94,8 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
}
a {
- color: var(--dbp-text);
- fill: var(--dbp-text);
+ color: var(--dbp-content);
+ fill: var(--dbp-content);
cursor: pointer;
text-decoration: none;
display: block;
@@ -128,7 +128,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
border: var(--dbp-border);
border-radius: 0px;
overflow: hidden;
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
}
.dropdown-content {
@@ -139,14 +139,14 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
.menu a {
/*padding: 0.3em;*/
font-weight: 400;
- color: var(--dbp-text);
+ color: var(--dbp-content);
display: block;
text-decoration: none;
}
.menu a:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
}
.menu a.selected {
@@ -155,7 +155,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
}
.dropdown-item {
- color: var(--dbp-text-muted);
+ color: var(--dbp-muted);
display: block;
font-size: 0.875rem;
line-height: 1.5;
@@ -197,8 +197,8 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
}
.login-button:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
cursor: pointer;
transition: none;
}
@@ -209,7 +209,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
}
.login-box:hover svg path {
- fill: var(--dbp-hover-text);
+ fill: var(--dbp-hover-color);
}
.login-box .label {
diff --git a/packages/app-shell/src/dbp-app-shell-welcome.js b/packages/app-shell/src/dbp-app-shell-welcome.js
index 98d92e43e36e017a2264d0936a5658e7e5450fc2..93d65493321a29e718230054d202f812f821a8ba 100644
--- a/packages/app-shell/src/dbp-app-shell-welcome.js
+++ b/packages/app-shell/src/dbp-app-shell-welcome.js
@@ -53,8 +53,8 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
}
h2 a:hover {
- color: var(--dbp-hover-text, var(--dbp-text));
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
}
h2 a {
@@ -64,7 +64,7 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
h2 a::after {
content: '\\00a0\\00a0';
- background-color: var(--dbp-text);
+ background-color: var(--dbp-content);
-webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2014.8%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2014.8%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M383%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C383.4%2C380.4%2C383.2%2C380.5%2C383%2C380.5z%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2014.8%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2014.8%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M383%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C383.4%2C380.4%2C383.2%2C380.5%2C383%2C380.5z%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
-webkit-mask-repeat: no-repeat;
@@ -78,7 +78,7 @@ class AppShellWelcome extends ScopedElementsMixin(LitElement) {
}
h2 a:hover::after {
- background-color: var(--dbp-hover-text, var(--dbp-text));
+ background-color: var(--dbp-hover-color, var(--dbp-content));
}
`;
}
diff --git a/packages/app-shell/src/tugraz-logo.js b/packages/app-shell/src/tugraz-logo.js
index 2bad029b4cb9c95409892d7cdf041ae6cf33cce2..3dbf2a87cb1b2a72e9319b2cf409887bed325597 100644
--- a/packages/app-shell/src/tugraz-logo.js
+++ b/packages/app-shell/src/tugraz-logo.js
@@ -100,22 +100,22 @@ export class TUGrazLogo extends AdapterLitElement {
style="fill:#e4154b"
d="m352.68 207.46h207.44v207.46h-207.44v-207.46z"></path>
<path
- style="fill:var(--dbp-base-inverted)"
+ style="fill:var(--dbp-content-surface)"
d="m751.04 277.91h-66.426v33.195h171.19v-33.195h-66.407v-173.73h-38.359v173.73"></path>
<path
- style="fill:var(--dbp-base-inverted)"
+ style="fill:var(--dbp-content-surface)"
d="m1048.3 180.22c0-12.461-2.25-23.711-6.72-33.75-4.5-10.039-10.61-18.555-18.36-25.567-7.76-7.031-16.9-12.421-27.503-16.21-10.605-3.809-22.109-5.7036-34.551-5.7036-12.422 0-23.945 1.8946-34.551 5.7036-10.605 3.789-19.824 9.179-27.656 16.21-7.851 7.012-13.984 15.528-18.34 25.567-4.394 10.039-6.582 21.289-6.582 33.75v130.89h38.379v-129.59c0-5.039 0.801-10.351 2.442-15.898 1.64-5.547 4.336-10.664 8.125-15.332s8.789-8.516 15.039-11.523c6.211-3.008 13.926-4.512 23.144-4.512 9.199 0 16.914 1.504 23.145 4.512 6.23 3.007 11.25 6.855 15.039 11.523 3.77 4.668 6.48 9.785 8.12 15.332 1.63 5.547 2.45 10.859 2.45 15.898v129.59h38.38v-130.89"></path>
<path
- style="fill:var(--dbp-base-inverted)"
+ style="fill:var(--dbp-content-surface)"
d="m832.56 75.664c-7.597 3.2812-17.46 4.8632-25.332 4.8632-22.929 0-35.605-14.434-35.605-33.184 0-18.613 12.383-32.637 33.34-32.637 5.351 0 9.59 0.5274 12.969 1.3086v23.867h-20.84v14.414h39.687v-49.297c-10.41-2.6172-21.25-4.707-31.816-4.707-31.797 0-53.906 14.805-53.906 45.742 0 31.348 20.566 48.906 53.906 48.906 11.406 0 20.41-1.4453 28.867-3.8086l-1.27-15.469"></path>
<path
- style="fill:var(--dbp-base-inverted)"
+ style="fill:var(--dbp-content-surface)"
d="m856.2 69.375h16.758v-15.332h0.293c0.84 6.289 8.574 16.914 19.824 16.914 1.836 0 3.828 0 5.782-0.5273v-17.715c-1.68 0.918-5.059 1.4454-8.457 1.4454-15.333 0-15.333-17.832-15.333-27.52v-24.785h-18.867v67.52"></path>
<path
- style="fill:var(--dbp-base-inverted)"
+ style="fill:var(--dbp-content-surface)"
d="m913.75 65.84c7.324 3.1446 17.187 5.1172 25.215 5.1172 22.09 0 31.23-8.5351 31.23-28.457v-8.6523c0-6.8165 0.156-11.934 0.293-16.914 0.137-5.1172 0.41-9.8242 0.84-15.078h-16.602c-0.703 3.5352-0.703 8.0078-0.839 10.098h-0.293c-4.36-7.4618-13.81-11.661-22.38-11.661-12.793 0-25.332 7.207-25.332 20.059 0 10.078 5.195 15.976 12.383 19.258 7.187 3.2812 16.464 3.9453 24.355 3.9453h10.41c0 10.879-5.195 14.551-16.328 14.551-8.008 0-16.035-2.8907-22.363-7.3438l-0.586 15.078zm22.11-52.715c5.782 0 10.274 2.3633 13.223 6.0352 3.105 3.8086 3.945 8.6523 3.945 13.906h-8.164c-8.437 0-20.957-1.3086-20.957-11.68 0-5.7617 5.195-8.2617 11.953-8.2617"></path>
<path
- style="fill:var(--dbp-base-inverted)"
+ style="fill:var(--dbp-content-surface)"
d="m985.69 69.375h57.422v-14.414l-36.04-39.473h37.31v-13.633h-60.235v14.297l36.715 39.59h-35.172v13.633"></path>
<path
style="fill:#e4154b"
diff --git a/packages/auth/src/dbp-auth-demo.js b/packages/auth/src/dbp-auth-demo.js
index c3d4de877d7d14a1cf0ce413d8badd7539ebacdc..22a2f7ea7162c8582b24e82002f83ae34fdad59f 100644
--- a/packages/auth/src/dbp-auth-demo.js
+++ b/packages/auth/src/dbp-auth-demo.js
@@ -117,7 +117,7 @@ export class DbpAuthDemo extends ScopedElementsMixin(DBPLitElement) {
.content h4,
.content h5,
.content h6 {
- color: var(--dbp-text);
+ color: var(--dbp-content);
font-weight: 600;
line-height: 1.125;
}
diff --git a/packages/auth/src/login-button.js b/packages/auth/src/login-button.js
index 6cb968e27c1ba91785627ce3e3e688fb496bd43e..26210f4821a04b77bf8f68b50be7027abf3aabbd 100644
--- a/packages/auth/src/login-button.js
+++ b/packages/auth/src/login-button.js
@@ -110,8 +110,8 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
}
a {
- color: var(--dbp-text);
- fill: var(--dbp-text);
+ color: var(--dbp-content);
+ fill: var(--dbp-content);
cursor: pointer;
text-decoration: none;
}
@@ -135,12 +135,12 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
}
.login-box:hover svg path {
- fill: var(--dbp-hover-text);
+ fill: var(--dbp-hover-color);
}
.login-box:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
cursor: pointer;
transition: none;
}
diff --git a/packages/check-in-place-select/src/check-in-place-select.js b/packages/check-in-place-select/src/check-in-place-select.js
index 0b60dc86db8e1b7862ea96d8961c99a605e6e0e7..9e6e43213bcc43be15e561840a1a02ac6ca4fe7a 100644
--- a/packages/check-in-place-select/src/check-in-place-select.js
+++ b/packages/check-in-place-select/src/check-in-place-select.js
@@ -397,7 +397,7 @@ export class CheckInPlaceSelect extends ScopedElementsMixin(AdapterLitElement) {
align-items: center;
justify-content: center;
border: var(--dbp-border);
- border-color: var(--dbp-text-muted);
+ border-color: var(--dbp-muted);
-moz-border-radius-topright: var(--dbp-border-radius);
-moz-border-radius-bottomright: var(--dbp-border-radius);
line-height: 100%;
diff --git a/packages/common/dbp-common-demo.js b/packages/common/dbp-common-demo.js
index c644cc9ff0f29678920e997b088056d6bc37d262..0041152a22f0e9c9ea866724157cee05e75c327a 100644
--- a/packages/common/dbp-common-demo.js
+++ b/packages/common/dbp-common-demo.js
@@ -93,7 +93,7 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
.content h4,
.content h5,
.content h6 {
- color: var(--dbp-text);
+ color: var(--dbp-content);
font-weight: 600;
line-height: 1.125;
}
@@ -247,8 +247,8 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
<pre>
<style>
html {
- /* This will override --dbp-primary-base */
- --dbp-override-primary-dark: green;
+ /* This will override --dbp-primary-surface */
+ --dbp-override-primary-surface: green;
/* Same for all other variables, prefix with "override" */
}
</style></pre
diff --git a/packages/common/src/spinner.js b/packages/common/src/spinner.js
index 6e4e1a4e3c7059a139460345d033391db4cf5fca..3142dd04fdf5890381cf34943b142fae7b2d6bda 100644
--- a/packages/common/src/spinner.js
+++ b/packages/common/src/spinner.js
@@ -21,7 +21,7 @@ export class Spinner extends HTMLElement {
.all-spinner-tuglogo-box {
width:20%;
height:20%;
- background-color:var(--dbp-accent);
+ background-color:var(--dbp-accent-surface);
position:absolute;
top:50%;
left:50%;
diff --git a/packages/common/styles.js b/packages/common/styles.js
index 4cc45328cdc4a351fc655a1081d15b43aca30d64..2340690ae4d0a9f4951b100ca996278fcda924f5 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -10,200 +10,170 @@ export function getThemeCSS() {
// language=css
return css`
:host {
- /* old variables */
- --dbp-primary-bg-color: var(--dbp-override-primary-bg-color, #007bff);
- --dbp-primary-text-color: var(--dbp-override-primary-text-color, #fff);
- --dbp-primary-button-border: var(--dbp-override-primary-button-border, #007bff);
- --dbp-secondary-bg-color: var(--dbp-override-secondary-bg-color, #6c757d);
- --dbp-secondary-text-color: var(--dbp-override-secondary-text-color, #fff);
- --dbp-info-bg-color: var(--dbp-override-info-bg-color, #17a2b8);
- --dbp-info-text-color: var(--dbp-override-info-text-color, #fff);
- --dbp-success-bg-color: var(--dbp-override-success-bg-color, #28a745);
- --dbp-success-text-color: var(--dbp-override-success-text-color, #fff);
- --dbp-warning-bg-color: var(--dbp-override-warning-bg-color, #ffc107);
- --dbp-warning-text-color: var(--dbp-override-warning-text-color, #343a40);
- --dbp-warning-color: var(--dbp-override-warning-color, #d57a1c);
- --dbp-danger-bg-color: var(--dbp-override-danger-bg-color, #dc3545);
- --dbp-danger-text-color: var(--dbp-override-danger-text-color, #fff);
- --dbp-light: var(--dbp-override-light, #f8f9fa);
- --dbp-dark: var(--dbp-override-dark, #343a40);
- --dbp-muted-text: var(--dbp-override-muted-text, #6c757d);
- --dbp-border-width: var(--dbp-override-border-width, 1px);
- --dbp-border-color: var(--dbp-override-border-color, #000);
- --dbp-placeholder-color: #777;
- --dbp-downloaded-bg-color: var(--dbp-override-downloaded-bg-color, #c8dcc8);
-
- /* old new variables remove in future */
- --dbp-base-light: var(--dbp-override-base-light, var(--dbp-override-light, #ffffff));
- --dbp-base-dark: var(--dbp-override-base-dark, var(--dbp-override-dark, #000000));
- --dbp-text-light: var(--dbp-override-text-light, var(--dbp-override-light, #ffffff));
- --dbp-text-dark: var(--dbp-override-text-dark, var(--dbp-override-dark, #000000));
- --dbp-text-muted-light: var(
- --dbp-override-text-muted-light,
- var(--dbp-override-muted-text, #adadad)
+ /* new new variables */
+ --dbp-background:
+ var(--dbp-override-background, #ffffff
);
- --dbp-text-muted-dark: var(
- --dbp-override-text-muted-dark,
- var(--dbp-override-muted-text, #767676)
+ --dbp-content:
+ var(--dbp-override-content, #000000
);
- --dbp-accent-light: var(
- --dbp-override-accent-light,
- var(--dbp-override-primary-bg-color, #c24f68)
+ --dbp-content-surface:
+ var(--dbp-override-content-surface,
+ var(--dbp-content)
);
- --dbp-accent-dark: var(
- --dbp-override-accent-dark,
- var(--dbp-override-primary-bg-color, #c24f68)
+ --dbp-on-content-surface:
+ var(--dbp-override-on-content-surface,
+ var(--dbp-background)
);
- --dbp-primary-light: var(
- --dbp-override-primary-light,
- var(--dbp-override-primary-bg-color, #8ca4eb)
- ); /*remove second value if no app needs to be backported */
- --dbp-primary-dark: var(
- --dbp-override-primary-dark,
- var(--dbp-override-primary-bg-color, #2a4491)
+ --dbp-border:
+ var(--dbp-override-border, 1px solid #000000
);
- --dbp-secondary-light: var(
- --dbp-override-secondary-light,
- var(--dbp-override-light, #ffffff)
+ --dbp-border-radius:
+ var(--dbp-override-border-radius, 0px
);
- --dbp-secondary-dark: var(
- --dbp-override-secondary-dark,
- var(--dbp-override-dark, #000000)
+ --dbp-primary:
+ var(--dbp-override-primary, #2a4491
);
- --dbp-info-light: var(
- --dbp-override-info-light,
- var(--dbp-override-primary-bg-color, #8ca4eb)
+ --dbp-primary-surface:
+ var(--dbp-override-primary-surface,
+ var(--dbp-primary)
);
- --dbp-info-dark: var(
- --dbp-override-info-dark,
- var(--dbp-override-primary-bg-color, #2a4491)
+ --dbp-on-primary-surface:
+ var(--dbp-override-on-primary-surface,
+ var(--dbp-on-content-surface)
);
- --dbp-success-light: var(
- --dbp-override-success-light,
- var(--dbp-override-success-bg-color, #7acc79)
+ --dbp-primary-surface-border-color:
+ var(--dbp-override-primary-surface-border-color,
+ var(--dbp-primary-surface)
);
- --dbp-success-dark: var(
- --dbp-override-success-dark,
- var(--dbp-override-success-bg-color, #188018)
+ --dbp-secondary:
+ var(--dbp-override-secondary, #ffffff
);
- --dbp-warning-light: var(
- --dbp-override-warning-color,
- var(--dbp-override-warning-light, #f99a41)
+ --dbp-secondary-surface:
+ var(--dbp-override-secondary-surface,
+ var(--dbp-secondary)
);
- --dbp-warning-dark: var(
- --dbp-override-warning-color,
- var(--dbp-override-warning-dark, #c15500)
+ --dbp-on-secondary-surface:
+ var(--dbp-override-on-secondary-surface,
+ var(--dbp-on-content-surface)
);
- --dbp-danger-light: var(
- --dbp-override-danger-bg-color,
- var(--dbp-override-danger-light, #ff887a)
+ --dbp-secondary-surface-border-color:
+ var(--dbp-override-secondary-surface-border-color,
+ var(--dbp-secondary-surface)
);
- --dbp-danger-dark: var(
- --dbp-override-danger-bg-color,
- var(--dbp-override-danger-dark, #de3535)
+ --dbp-muted:
+ var(--dbp-override-muted, #767676
);
- --dbp-border-light: var(--dbp-override-border-light, 1px solid #ffffff);
- --dbp-border-dark: var(--dbp-override-border-dark, 1px solid #000000);
- /*--dbp-border-radius: var(--dbp-override-border-radius, 0px);
- --dbp-hover-base: var(--dbp-override-hover-base, var(--dbp-override-dark));
- --dbp-hover-text: var(--dbp-override-hover-text, var(--dbp-override-light));*/
-
- /* new new variables */
- --dbp-base: var(
- --dbp-override-base,
- var(--dbp-override-base-light, var(--dbp-override-light, #ffffff))
+ --dbp-muted-surface:
+ var(--dbp-override-muted-surface,
+ var(--dbp-muted)
);
- --dbp-base-inverted: var(
- --dbp-override-base-inverted,
- var(
- --dbp-override-base,
- var(--dbp-override-base-light, var(--dbp-override-light, #000000))
- )
+ --dbp-on-muted-surface:
+ var(--dbp-override-on-muted-surface,
+ var(--dbp-on-content-surface)
);
- --dbp-text: var(
- --dbp-override-text,
- var(--dbp-override-text-dark, var(--dbp-override-dark, #000000))
+ --dbp-muted-surface-border-color:
+ var(--dbp-override-muted-surface-border-color,
+ var(--dbp-muted-surface)
);
- --dbp-text-inverted: var(
- --dbp-override-text-inverted,
- var(--dbp-override-text-light, var(--dbp-override-light, #ffffff))
+ --dbp-accent:
+ var(--dbp-override-accent, #c24f68
);
- --dbp-text-muted: var(
- --dbp-override-text-muted,
- var(--dbp-override-text-muted-dark, var(--dbp-override-muted-text, #767676))
+ --dbp-accent-surface:
+ var(--dbp-override-accent-surface,
+ var(--dbp-accent)
);
- --dbp-accent: var(
- --dbp-override-accent,
- var(--dbp-override-accent-dark, var(--dbp-override-primary-bg-color, #c24f68))
+ --dbp-on-accent-surface:
+ var(--dbp-override-on-accent-surface,
+ var(--dbp-on-content-surface)
);
- --dbp-primary-base: var(
- --dbp-override-primary-base,
- var(--dbp-override-primary-dark, var(--dbp-override-primary-bg-color, #2a4491))
+ --dbp-accent-surface-border-color:
+ var(--dbp-override-accent-surface-border-color,
+ var(--dbp-accent-surface)
);
- --dbp-primary-text: var(
- --dbp-override-primary-text,
- var(--dbp-override-text-light, var(--dbp-override-light, #ffffff))
+ --dbp-info: var(
+ --dbp-override-info, #2a4491
);
- --dbp-primary-border: var(
- --dbp-override-primary-border,
- var(--dbp-override-border, var(--dbp-override-border-dark, 1px solid #000000))
+ --dbp-info-surface:
+ var(--dbp-override-info-surface,
+ var(--dbp-info)
);
- --dbp-secondary-base: var(
- --dbp-override-secondary-base,
- var(--dbp-override-secondary-light, var(--dbp-override-light, #ffffff))
+ --dbp-on-info-surface:
+ var(--dbp-override-on-info-surface,
+ var(--dbp-on-content-surface)
);
- --dbp-secondary-text: var(
- --dbp-override-secondary-text,
- var(--dbp-override-secondary-dark, var(--dbp-override-dark, #000000))
+ --dbp-info-surface-border-color:
+ var(--dbp-override-info-surface-border-color,
+ var(--dbp-info-surface)
);
- --dbp-secondary-border: var(
- --dbp-override-secondary-border,
- var(--dbp-override-border, var(--dbp-override-border-dark, 1px solid #000000))
+ --dbp-success:
+ var(--dbp-override-success, #188018
);
- --dbp-info: var(
- --dbp-override-info,
- var(--dbp-override-info-dark, var(--dbp-override-primary-bg-color, #2a4491))
+ --dbp-success-surface:
+ var(--dbp-override-success-surface,
+ var(--dbp-success)
+ );
+ --dbp-on-success-surface:
+ var(--dbp-override-on-success-surface,
+ var(--dbp-on-content-surface)
+ );
+ --dbp-success-surface-border-color:
+ var(--dbp-override-success-surface-border-color,
+ var(--dbp-success-surface)
+ );
+ --dbp-warning:
+ var(--dbp-override-warning, #c15500
+ );
+ --dbp-warning-surface:
+ var(--dbp-override-warning-surface,
+ var(--dbp-warning)
+ );
+ --dbp-on-warning-surface:
+ var(--dbp-override-on-warning-surface,
+ var(--dbp-on-content-surface)
+ );
+ --dbp-warning-surface-border-color:
+ var(--dbp-override-warning-surface-border-color,
+ var(--dbp-warning-surface)
);
- --dbp-success: var(
- --dbp-override-success,
- var(--dbp-override-success-dark, var(--dbp-override-success-bg-color, #188018))
+ --dbp-danger:
+ var(--dbp-override-danger, #de3535
);
- --dbp-warning-as-text: var(
- --dbp-override-warning-as-text,
- var(--dbp-override-warning-color, var(--dbp-override-warning-dark, #c15500))
+ --dbp-danger-surface:
+ var(--dbp-override-danger-surface,
+ var(--dbp-danger)
);
- --dbp-warning-text: var(--dbp-override-warning-text, #000000);
- --dbp-warning: var(
- --dbp-override-warning,
- var(--dbp-override-warning-color, var(--dbp-override-warning-light, #ffad4d))
+ --dbp-on-danger-surface:
+ var(--dbp-override-on-danger-surface,
+ var(--dbp-on-content-surface)
);
- --dbp-danger: var(
- --dbp-override-danger,
- var(--dbp-override-danger-bg-color, var(--dbp-override-danger-dark, #de3535))
+ --dbp-danger-surface-border-color:
+ var(--dbp-override-danger-surface-border-color,
+ var(--dbp-danger-surface)
);
- --dbp-border: var(
- --dbp-override-border,
- var(--dbp-override-border-dark, 1px solid #000000)
+ --dbp-hover-background-color:
+ var(--dbp-override-hover-background-color
+ );
+ --dbp-hover-color:
+ var(--dbp-override-hover-color
);
- --dbp-border-radius: var(--dbp-override-border-radius, 0px);
- --dbp-hover-base: var(--dbp-override-hover-base, var(--dbp-override-dark));
- --dbp-hover-text: var(--dbp-override-hover-text, var(--dbp-override-light));
}
#root {
- background-color: var(--dbp-base);
- color: var(--dbp-text);
+ background-color: var(--dbp-background);
+ color: var(--dbp-content);
}
::-moz-selection {
- color: var(--dbp-primary-text);
- background: var(--dbp-primary-base);
+ color: var(--dbp-on-primary-surface);
+ background: var(--dbp-primary-surface);
}
::selection {
- color: var(--dbp-primary-text);
- background: var(--dbp-primary-base);
+ color: var(--dbp-on-primary-surface);
+ background: var(--dbp-primary-surface);
}
+
`;
}
@@ -263,7 +233,7 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
}
.input, .textarea, .select select {
- border: solid 1px var(--dbp-text-muted);
+ border: solid 1px var(--dbp-muted);
border-radius: var(--dbp-border-radius);
padding-bottom: calc(.375em - 1px);
padding-left: calc(.625em - 1px);
@@ -272,7 +242,7 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
}
.input::placeholder, .textarea::placeholder, .select select::placeholder {
- color: var(--dbp-text-muted);
+ color: var(--dbp-muted);
}
input, ::placeholder, textarea, select, .select select {
@@ -308,7 +278,7 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
.hidden { display: none; }
a {
- color: var(--dbp-text);
+ color: var(--dbp-content);
cursor: pointer;
text-decoration: none;
}
@@ -319,25 +289,12 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
}
a.is-download:hover {
- color: var(--dbp-hover-text, var(--dbp-text));
- background-color: var(--dbp-hover-base);
- }
-
- /* Inline SVG don't work in our web-components */
- /*
- a.is-download:after, a.is-download:hover:after {
- content: "\\00a0\\00a0\\00a0\\00a0";
- background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%228.3021mm%22%20width%3D%228.2977mm%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%220%200%2029.401607%2029.41681%22%3E%3Cg%20style%3D%22stroke-width%3A2.1%22%20transform%3D%22translate(-271.68%20-367.92)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-width%3A2.1%3Bfill%3Anone%22%20d%3D%22m300.13%20390.41v2.3918c0%201.9813-1.6064%203.5877-3.5877%203.5877h-20.326c-1.9813%200-3.5877-1.6064-3.5877-3.5877v-2.3918%22%2F%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-width%3A2.1%3Bfill%3Anone%22%20d%3D%22m286.38%20390.27v-21.384%22%2F%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23000%3Bstroke-linecap%3Around%3Bstroke-width%3A2.1%3Bfill%3Anone%22%20d%3D%22m295.13%20381.52-8.7501%208.7462-8.7501-8.7462%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center center;
- margin: 0 0.25% 0 1.5%;
- font-size: 94%;
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
}
- */
.title {
- color: var(--dbp-text);
+ color: var(--dbp-content);
font-size: 2rem;
font-weight: 600;
line-height: 1.125;
@@ -355,10 +312,10 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
}
.input, .select select, .textarea {
- background-color: var(--dbp-base);
- border-color: var(--dbp-text-muted);
+ background-color: var(--dbp-background);
+ border-color: var(--dbp-muted);
border-radius: var(--dbp-border-radius);
- color: var(--dbp-text-muted);
+ color: var(--dbp-muted);
}
*, ::after, ::before {
@@ -374,18 +331,18 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
background-size: 25%;
border: var(--dbp-border);
border-radius: var(--dbp-border-radius);
- color: var(--dbp-text);
+ color: var(--dbp-content);
padding: 0.14rem 1.0rem 0.14rem 0.14rem;
}
::-moz-selection {
- color: var(--dbp-primary-text);
- background: var(--dbp-primary-base);
+ color: var(--dbp-on-primary-surface);
+ background: var(--dbp-primary-surface);
}
::selection {
- color: var(--dbp-primary-text);
- background: var(--dbp-primary-base);
+ color: var(--dbp-on-primary-surface);
+ background: var(--dbp-primary-surface);
}
`;
}
@@ -559,11 +516,12 @@ export function getNotificationCSS() {
// language=css
return css`
.notification {
- background-color: var(--dbp-base);
- color: var(--dbp-text);
+ background-color: var(--dbp-background);
+ color: var(--dbp-content);
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
position: relative;
border-radius: var(--dbp-border-radius);
+ border: var(--dbp-border);
}
.notification a:not(.button):not(.dropdown-item) {
@@ -577,8 +535,9 @@ export function getNotificationCSS() {
.notification code,
.notification pre {
- color: var(--dbp-text-inverted);
- background: var(--dbp-muted-text-dark);
+ color: var(--dbp-on-muted-surface);
+ background: var(--dbp-muted-surface);
+ border-color: var(--dbp-muted-surface-border-color);
}
.notification pre code {
@@ -603,28 +562,33 @@ export function getNotificationCSS() {
}
.notification.is-primary {
- background-color: var(--dbp-primary-base);
- color: var(--dbp-primary-text);
+ background-color: var(--dbp-primary-surface);
+ color: var(--dbp-on-primary-surface);
+ border-color: var(--dbp-primary-surface-border-color);
}
.notification.is-info {
- background-color: var(--dbp-info);
- color: var(--dbp-text-inverted);
+ background-color: var(--dbp-info-surface);
+ color: var(--dbp-on-info-surface);
+ border-color: var(--dbp-info-surface-border-color);
}
.notification.is-success {
- background-color: var(--dbp-success);
- color: var(--dbp-text-inverted);
+ background-color: var(--dbp-on-success-surface);
+ color: var(--dbp-on-success-surface);
+ border-color: var(--dbp-surccess-surface-border-color);
}
.notification.is-warning {
- background-color: var(--dbp-warning);
- color: var(--dbp-warning-text);
+ background-color: var(--dbp-warning-surface);
+ color: var(--dbp-on-warning-surface);
+ border-color: var(--dbp-warning-surface-border-color);
}
.notification.is-danger {
- background-color: var(--dbp-danger);
- color: var(--dbp-text-inverted);
+ background-color: var(--dbp-danger-surface);
+ color: var(--dbp-on-danger-surface);
+ border-color: var(--dbp-danger-surface-border-color);
}
`;
}
@@ -637,7 +601,7 @@ export function getButtonCSS() {
button.dt-button {
border: var(--dbp-border);
border-radius: var(--dbp-border-radius);
- color: var(--dbp-text);
+ color: var(--dbp-content);
cursor: pointer;
justify-content: center;
padding-bottom: calc(0.375em - 1px);
@@ -649,19 +613,19 @@ export function getButtonCSS() {
font-size: inherit;
font-weight: bolder;
font-family: inherit;
- transition: background-color 0.15s ease 0s, color 0.15s ease 0s;
- background: var(--dbp-secondary-base);
- color: var(--dbp-secondary-text);
- border: var(--dbp-secondary-border);
+ transition: all 0.15s ease 0s, color 0.15s ease 0s;
+ background: var(--dbp-secondary-surface);
+ color: var(--dbp-on-secondary-surface);
+ border-color: var(--dbp-secondary-surface-border-color);
}
button.button:hover:enabled,
.button:hover:enabled,
button.dt-button:hover:enabled,
button.dt-button:hover:not(.disabled) {
- color: var(--dbp-hover-text, var(--dbp-secondary-text));
- background-color: var(--dbp-hover-base, var(--dbp-secondary-base));
- border-color: var(--dbp-hover-base, var(--dbp-secondary-base));
+ color: var(--dbp-hover-color, var(--dbp-on-secondary-surface));
+ background-color: var(--dbp-hover-background-color, var(--dbp-secondary-surface));
+ border-color: var(--dbp-hover-background-color, var(--dbp-secondary-surface-border-color));
}
button.button.is-small,
@@ -672,67 +636,72 @@ export function getButtonCSS() {
button.button.is-primary,
.button.is-primary {
- background-color: var(--dbp-primary-base);
- border: var(--dbp-primary-border);
- color: var(--dbp-primary-text);
+ background-color: var(--dbp-primary-surface);
+ border-color: var(--dbp-primary-surface-border-color);
+ color: var(--dbp-on-primary-surface);
}
button.button.is-primary:hover:enabled,
.button.is-primary:hover:enabled {
- background-color: var(--dbp-hover-base, var(--dbp-primary-base));
- color: var(--dbp-hover-text, var(--dbp-primary-text));
+ background-color: var(--dbp-hover-background-color, var(--dbp-primary-surface));
+ color: var(--dbp-hover-color, var(--dbp-on-primary-surface));
+ border-color: var(--dbp-hover-background-color, var(--dbp-primary-surface-border-color));
}
button.button.is-info,
.button.is-info {
- background-color: var(--dbp-info);
- border: var(--dbp-border);
- color: var(--dbp-text-inverted);
+ background-color: var(--dbp-info-surface);
+ color: var(--dbp-on-info-surface);
+ border-color: var(--dbp-info-surface-border-color);
}
button.button.is-info:hover:enabled,
.button.is-info:hover:enabled {
- background-color: var(--dbp-hover-base, var(--dbp-info));
- color: var(--dbp-hover-text, var(--dbp-text-inverted));
+ background-color: var(--dbp-hover-background-color, var(--dbp-info-surface));
+ color: var(--dbp-hover-color, var(--dbp-on-info-surface));
+ border-color: var(--dbp-hover-background-color, var(--dbp-info-surface-border-color));
}
button.button.is-success,
.button.is-success {
- background-color: var(--dbp-success);
- border: var(--dbp-border);
- color: var(--dbp-text-inverted);
+ background-color: var(--dbp-success-surface);
+ border-color: var(--dbp-success-surface-border-color);
+ color: var(--dbp-on-success-surface);
}
button.button.is-success:hover:enabled,
.button.is-success:hover:enabled {
- background-color: var(--dbp-hover-base, var(--dbp-success));
- color: var(--dbp-hover-text, var(--dbp-text-inverted));
+ background-color: var(--dbp-hover-background-color, var(--dbp-success-surface));
+ color: var(--dbp-hover-color, var(--dbp-on-success-surface));
+ border-color: var(--dbp-hover-background-color,var(--dbp-success-surface-border-color));
}
button.button.is-warning,
.button.is-warning {
- background-color: var(--dbp-warning);
- border: var(--dbp-border);
- color: var(--dbp-text);
+ background-color: var(--dbp-warning-surface);
+ border-color: var(--dbp-warning-surface-border-color);
+ color: var(--dbp-on-warning-surface);
}
button.button.is-warning:hover:enabled,
.button.is-warning:hover:enabled {
- background-color: var(--dbp-hover-base, var(--dbp-warning));
- color: var(--dbp-hover-text, var(--dbp-text));
+ background-color: var(--dbp-hover-background-color, var(--dbp-warning-surface));
+ color: var(--dbp-hover-color, var(--dbp-on-warning-surface));
+ border-color: var(--dbp-hover-background-color, var(--dbp-warning-surface-border-color));
}
.button.button.is-danger,
.button.is-danger {
- background-color: var(--dbp-danger);
- border: var(--dbp-border);
- color: var(--dbp-text-inverted);
+ background-color: var(--dbp-danger-surface);
+ border-color: var(--dbp-danger-surface-border-color);
+ color: var(--dbp-on-danger-surface);
}
.button.button.is-danger:hover:enabled,
.button.is-danger:hover:enabled {
- background-color: var(--dbp-hover-base, var(--dbp-danger));
- color: var(--dbp-hover-text, var(--dbp-text-inverted));
+ background-color: var(--dbp-hover-background-color, var(--dbp-danger-surface));
+ color: var(--dbp-hover-color, var(--dbp-on-danger-surface));
+ border-color: var(--dbp-hover-background-color, var(--dbp-danger-surface-border-color));
}
button.button[disabled],
@@ -799,7 +768,7 @@ export function getRadioAndCheckboxCss() {
left: 0;
height: 21px;
width: 21px;
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
border-radius: 0px;
border: var(--dbp-border);
}
@@ -810,7 +779,7 @@ export function getRadioAndCheckboxCss() {
left: 0;
height: 20px;
width: 20px;
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
border: solid;
border-radius: 100%;
border: var(--dbp-border);
@@ -819,17 +788,17 @@ export function getRadioAndCheckboxCss() {
}
.button-container input[type='radio']:checked ~ .radiobutton:after {
- border-color: var(--dbp-base);
+ border-color: var(--dbp-background);
}
.button-container input[type='radio']:disabled ~ .radiobutton {
- border-color: var(--dbp-text-muted);
- background-color: var(--dbp-text-muted);
+ border-color: var(--dbp-muted);
+ background-color: var(--dbp-muted);
}
.button-container input[type='radio']:checked:disabled ~ .radiobutton:after {
- border-color: var(--dbp-text-muted);
- background-color: var(--dbp-text-muted);
+ border-color: var(--dbp-muted);
+ background-color: var(--dbp-muted);
}
.radiobutton:after {
@@ -847,10 +816,10 @@ export function getRadioAndCheckboxCss() {
top: 0px;
width: 100%;
height: 100%;
- background-color: var(--dbp-text);
+ background-color: var(--dbp-content);
border: none;
border-radius: 100%;
- border: 2px solid var(--dbp-base);
+ border: 2px solid var(--dbp-background);
box-sizing: border-box;
}
@@ -870,12 +839,12 @@ export function getRadioAndCheckboxCss() {
}
.button-container input[type='checkbox']:disabled ~ .checkmark {
- border-color: var(--dbp-text-muted);
- background-color: var(--dbp-text-muted);
+ border-color: var(--dbp-muted);
+ background-color: var(--dbp-muted);
}
.button-container input[type='checkbox']:checked:disabled ~ .checkmark:after {
- border-color: var(--dbp-text-muted);
+ border-color: var(--dbp-muted);
}
.checkmark:after {
@@ -974,9 +943,11 @@ export function getTagCSS() {
.tag:not(body) {
align-items: center;
- background-color: var(--dbp-text-muted);
+ background-color: var(--dbp-muted);
border-radius: var(--dbp-border-radius);
- color: var(--dbp-text-muted);
+ border: var(--dbp-border);
+ border-color: var(--dbp-muted-surface-border-color);
+ color: var(--dbp-muted);
display: inline-flex;
font-size: 0.75rem;
height: 2em;
@@ -993,13 +964,15 @@ export function getTagCSS() {
}
.tag:not(body).is-dark {
- background-color: var(--dbp-secondary-base);
- color: var(--dbp-secondary-text);
+ background-color: var(--dbp-secondary-surface);
+ color: var(--dbp-on-secondary-surface);
+ border-color: var(--dbp-secondary-surface-border-color);
}
.tag:not(body).is-light {
- background-color: var(--dbp-base);
- color: var(--dbp-text);
+ background-color: var(--dbp-background);
+ color: var(--dbp-content);
+ border: var(--dbp-border);
}
.tag:not(body).is-normal {
@@ -1062,11 +1035,11 @@ export function getTagCSS() {
.tag:not(body).is-delete:hover,
.tag:not(body).is-delete:focus {
- background-color: var(--dbp-text-inverted);
+ background-color: var(--dbp-background);
}
.tag:not(body).is-delete:active {
- background-color: var(--dbp-text-inverted);
+ background-color: var(--dbp-background);
}
.tag:not(body).is-rounded {
@@ -1098,8 +1071,8 @@ export function getDocumentationCSS() {
}
.documentation a:hover {
- color: var(--dbp-hover-text, var(--dbp-text));
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
}
.documentation ul,
@@ -1136,7 +1109,7 @@ export function getSelect2CSS() {
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
- color: var(--dbp-text-muted);
+ color: var(--dbp-muted);
}
/* Work around single selections not wrapping and breaking responsivness */
@@ -1176,12 +1149,12 @@ export function getModalDialogCSS() {
height: 100%;
position: absolute;
left: 0;
- background-color: var(--dbp-base-inverted);
+ background-color: var(--dbp-content-surface);
opacity: 0.6;
}
.modal-container {
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
max-width: 600px;
max-height: 100vh;
min-width: 60%;
@@ -1350,15 +1323,15 @@ export function getLinkCss() {
.int-link-internal,
.link,
.link-without-hover {
- border-bottom: 1px solid var(--dbp-text);
+ border-bottom: 1px solid var(--dbp-content);
}
.int-link-external:hover,
.int-link-internal:hover,
.link:hover {
- color: var(--dbp-hover-text, var(--dbp-text));
- border-color: var(--dbp-hover-text, var(--dbp-text));
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ border-color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
}
.int-link-external:after,
@@ -1366,7 +1339,7 @@ export function getLinkCss() {
.link:after,
.link-without-hover:after {
content: '\\00a0\\00a0\\00a0';
- background-color: var(--dbp-text);
+ background-color: var(--dbp-content);
-webkit-mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2022.7%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2022.7%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M386.9%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C387.3%2C380.4%2C387.1%2C380.5%2C386.9%2C380.5z%22%0A%09%09%09%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
mask-image: url('data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2022.7%2062.4%22%20style%3D%22enable-background%3Anew%200%200%2022.7%2062.4%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20transform%3D%22translate%28-382.21%20-336.98%29%22%3E%0A%09%3Cg%3E%0A%09%09%3Cpath%20d%3D%22M386.9%2C380.5c-0.2%2C0-0.4-0.1-0.6-0.3c-0.3-0.3-0.3-0.8%2C0.1-1.1l12.5-10.9l-12.5-10.9c-0.3-0.3-0.4-0.8-0.1-1.1%0A%09%09%09c0.3-0.3%2C0.8-0.4%2C1.1-0.1l13.1%2C11.5c0.2%2C0.2%2C0.3%2C0.4%2C0.3%2C0.6s-0.1%2C0.5-0.3%2C0.6l-13.1%2C11.5C387.3%2C380.4%2C387.1%2C380.5%2C386.9%2C380.5z%22%0A%09%09%09%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
-webkit-mask-repeat: no-repeat;
@@ -1382,7 +1355,7 @@ export function getLinkCss() {
.int-link-external:hover::after,
.int-link-internal:hover::after,
.link:hover::after {
- background-color: var(--dbp-hover-text, var(--dbp-text));
+ background-color: var(--dbp-hover-color, var(--dbp-content));
}
`;
}
diff --git a/packages/data-table-view/src/data-table-view.js b/packages/data-table-view/src/data-table-view.js
index a8a370fe5debd86a7bb541690c202bd898e5e3de..1ef4a75930931776e53f50ed390b1bf5e43510a0 100644
--- a/packages/data-table-view/src/data-table-view.js
+++ b/packages/data-table-view/src/data-table-view.js
@@ -266,8 +266,8 @@ export class DataTableView extends AdapterLitElement {
text-align: center;
text-indent: 0 !important;
line-height: 0.9em;
- color: var(--dbp-primary-text);
- background-color: var(--dbp-primary-base);
+ color: var(--dbp-on-primary-surface);
+ background-color: var(--dbp-primary-surface);
content: '+';
}
diff --git a/packages/data-table-view/src/dbp-data-table-view-demo.js b/packages/data-table-view/src/dbp-data-table-view-demo.js
index 6498102ce54c304b6018820c6263fd4db885feb7..6cea37cc00419473ce291162876ff90f6ab871ae 100644
--- a/packages/data-table-view/src/dbp-data-table-view-demo.js
+++ b/packages/data-table-view/src/dbp-data-table-view-demo.js
@@ -204,7 +204,7 @@ export class DataTableViewDemo extends ScopedElementsMixin(DBPLitElement) {
.content h4,
.content h5,
.content h6 {
- color: var(--dbp-text);
+ color: var(--dbp-content);
font-weight: 600;
line-height: 1.125;
}
@@ -218,7 +218,7 @@ export class DataTableViewDemo extends ScopedElementsMixin(DBPLitElement) {
}
.content table thead th {
border-width: 0 0 2px;
- color: var(--dbp-text);
+ color: var(--dbp-content);
}
.content table th {
border: 1px solid #dbdbdb;
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index e9dbb324757ccfc3df56e73cde1732c9d37fc306..a55110e2344e538e38216a4625049d11e868c426 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -836,8 +836,8 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
a:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
}
h2:first-child {
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index 3bd9042b4fd35d59a1285178d563b7c390b05d3e..d667ff685394ae09cb5075a44baa13a45fe02b8b 100644
--- a/packages/file-handling/src/file-source.js
+++ b/packages/file-handling/src/file-source.js
@@ -636,7 +636,7 @@ export class FileSource 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/file-handling/src/nextcloud-file-picker.js b/packages/file-handling/src/nextcloud-file-picker.js
index 13610f683efe021d91686fcd8226e80bc85a644f..d2342befc739b2c3dbce3393af5e1fc0bd0f4676 100644
--- a/packages/file-handling/src/nextcloud-file-picker.js
+++ b/packages/file-handling/src/nextcloud-file-picker.js
@@ -2471,7 +2471,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.breadcrumb-folder {
padding-right: 5px;
- color: var(--dbp-text-muted);
+ color: var(--dbp-muted);
font-size: 1.4em;
padding-top: 7px;
}
@@ -2487,12 +2487,12 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
.tabulator-placeholder {
- border-top: 1px solid var(--dbp-text-muted);
+ border-top: 1px solid var(--dbp-muted);
}
#new-folder-row.highlighted {
- background: var(--dbp-success);
- color: var(--dbp-text-inverted);
+ background: var(--dbp-success-surface);
+ color: var(--dbp-on-success-surface);
}
span.first {
@@ -2560,7 +2560,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
list-style: none;
border: var(--dbp-border);
position: absolute;
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
z-index: 1000;
/** display: grid; **/
}
@@ -2575,8 +2575,8 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
.tabulator-row.no-select.tabulator-selected {
- background-color: var(--dbp-base);
- color: var(--dbp-text-muted);
+ background-color: var(--dbp-background);
+ color: var(--dbp-muted);
}
input[type='text']#tf-new-folder:focus {
@@ -2639,7 +2639,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
.error {
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
color: var(--dbp-danger);
}
@@ -2677,15 +2677,15 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
list-style: none;
border: var(--dbp-border);
position: absolute;
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
z-index: 1000;
right: 0px;
border-radius: var(--dbp-border-radius);
}
.extended-menu a:hover {
- color: var(--dbp-hover-text, var(--dbp-text));
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
}
.nextcloud-header {
@@ -2763,7 +2763,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
.nextcloud-footer {
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
width: 100%;
padding-top: 10px;
}
@@ -2832,7 +2832,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
#replace-modal-box input[type='text']:disabled {
- color: var(--dbp-text-muted);
+ color: var(--dbp-muted);
}
#replace-modal-box .modal-content div {
@@ -2866,7 +2866,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
input:disabled + label {
- color: var(--dbp-text-muted);
+ color: var(--dbp-muted);
}
.inline-block {
@@ -2882,30 +2882,30 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.tabulator-row.no-select:hover,
.tabulator-row.tabulator-selectable.no-select:hover {
cursor: unset;
- color: var(--dbp-text);
- background-color: var(--dbp-base);
+ color: var(--dbp-content);
+ background-color: var(--dbp-background);
}
.inline-block {
position: absolute;
right: 0px;
z-index: 1;
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
bottom: -45px;
}
.addRowAnimation {
- color: var(--dbp-text);
+ color: var(--dbp-content);
animation: added 0.4s ease;
}
#abortButton {
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
color: var(--dbp-danger);
}
#abortButton:hover {
- color: var(--dbp-text-inverted);
+ color: var(--dbp-on-content-surface);
}
.menu-buttons {
@@ -2915,13 +2915,13 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
@keyframes added {
0% {
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
}
50% {
- background-color: var(--dbp-success);
+ background-color: var(--dbp-success-surface);
}
100% {
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
}
}
@@ -2936,7 +2936,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
.button.button,
.button,
button.dt-button {
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
}
#new-folder {
@@ -3061,7 +3061,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
position: absolute;
right: 52px;
z-index: 1;
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
bottom: 0px;
}
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index 57b503081a84e82f43794c10e9a69f50f7292a68..e274b32c343594e3dc0dcf23e1df40c4d8c507cd 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -18,7 +18,7 @@ export function getFileHandlingCss() {
.modal-nav {
cursor: pointer;
overflow: hidden;
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
border-right: var(--dbp-border);
grid-area: sidebar;
}
@@ -34,8 +34,8 @@ export function getFileHandlingCss() {
}
.modal-nav .active {
- background-color: var(--dbp-base-inverted);
- color: var(--dbp-text-inverted);
+ background-color: var(--dbp-content-surface);
+ color: var(--dbp-on-content-surface);
}
.modal-content {
@@ -156,18 +156,18 @@ export function getFileHandlingCss() {
.tabulator-row,
.tabulator-row.tabulator-row-even {
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
}
.tabulator-row.tabulator-selectable.tabulator-selectable:hover {
- background-color: var(--dbp-base);
- color: var(--dbp-text);
+ background-color: var(--dbp-background);
+ color: var(--dbp-content);
}
.tabulator-row.tabulator-selectable.tabulator-selected:hover,
.tabulator-row.tabulator-selected {
- background-color: var(--dbp-hover-base, var(--dbp-base-inverted));
- color: var(--dbp-hover-text, var(--dbp-text-inverted));
+ background-color: var(--dbp-hover-background-color, var(--dbp-content-surface));
+ color: var(--dbp-hover-color, var(--dbp-on-content-surface));
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
@@ -188,7 +188,7 @@ export function getFileHandlingCss() {
.tabulator-col-content
.tabulator-arrow {
border-top: none;
- border-bottom: 4px solid var(--dbp-text-muted);
+ border-bottom: 4px solid var(--dbp-muted);
}
.tabulator
@@ -197,7 +197,7 @@ export function getFileHandlingCss() {
.tabulator-col-content
.tabulator-arrow {
border-top: none;
- border-bottom: 4px solid var(--dbp-text-muted);
+ border-bottom: 4px solid var(--dbp-muted);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
@@ -215,7 +215,7 @@ export function getFileHandlingCss() {
.tabulator-col.tabulator-sortable[aria-sort='desc']
.tabulator-col-content
.tabulator-arrow {
- border-top: 4px solid var(--dbp-text-muted);
+ border-top: 4px solid var(--dbp-muted);
border-bottom: none;
}
@@ -224,11 +224,11 @@ export function getFileHandlingCss() {
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #eee;
- color: var(--dbp-text);
+ color: var(--dbp-content);
}
.tabulator-row.tabulator-row-even.tabulator-selected {
- color: var(--dbp-hover-text, var(--dbp-text-inverted));
+ color: var(--dbp-hover-color, var(--dbp-on-content-surface));
}
.tabulator
@@ -237,7 +237,7 @@ export function getFileHandlingCss() {
.tabulator-col-content
.tabulator-col-sorter
.tabulator-arrow {
- border-bottom-color: var(--dbp-text);
+ border-bottom-color: var(--dbp-content);
}
.tabulator
@@ -246,7 +246,7 @@ export function getFileHandlingCss() {
.tabulator-col-content
.tabulator-col-sorter
.tabulator-arrow {
- border-bottom-color: var(--dbp-text-muted);
+ border-bottom-color: var(--dbp-muted);
}
.tabulator-header {
@@ -283,7 +283,7 @@ export function getFileHandlingCss() {
height: 32px;
width: 32px;
background-color: unset;
- color: var(--dbp-text);
+ color: var(--dbp-content);
font-size: 1.3em;
margin-top: -8px;
}
@@ -337,7 +337,7 @@ export function getFileHandlingCss() {
.tabulator-selected .tabulator-responsive-collapse-toggle-open,
.tabulator-selected .tabulator-responsive-collapse-toggle-close {
- color: var(--dbp-text-inverted);
+ color: var(--dbp-on-content-surface);
}
.tabulator .tabulator-header .tabulator-col {
diff --git a/packages/language-select/src/language-select.js b/packages/language-select/src/language-select.js
index 0b5352e08362b10594c537fb1015d522d69a87c1..4eaa2acdb014d1a7691218013310475497a96cf2 100644
--- a/packages/language-select/src/language-select.js
+++ b/packages/language-select/src/language-select.js
@@ -85,8 +85,8 @@ export class LanguageSelect extends AdapterLitElement {
}
a:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
transition: none;
}
@@ -95,7 +95,7 @@ export class LanguageSelect extends AdapterLitElement {
display: inline-block;
text-decoration: none;
transition: background-color 0.15s, color 0.15s;
- color: var(--dbp-text);
+ color: var(--dbp-content);
}
input::-moz-focus-inner { border: 0; }
diff --git a/packages/notification/src/notification.js b/packages/notification/src/notification.js
index 98296b8323fdfcc22058ad42b1e4c11d5cb238d2..f1079be41b8ec2cd4e2a0e3948f4b9ac73a2f6e0 100644
--- a/packages/notification/src/notification.js
+++ b/packages/notification/src/notification.js
@@ -118,8 +118,8 @@ export class Notification extends DBPLitElement {
.modal-close::before,
.delete::after,
.modal-close::after {
- background-color: var(--dbp-base);
- color: var(--dbp-text);
+ background-color: var(--dbp-background);
+ color: var(--dbp-content);
content: '';
display: block;
left: 50%;
diff --git a/packages/person-select/src/person-select.js b/packages/person-select/src/person-select.js
index 533f8f13f1c4e37b4452b8d69aaf60ece005ee28..5ec65875380f22d7aabe411bb2ae5f0c666e373e 100644
--- a/packages/person-select/src/person-select.js
+++ b/packages/person-select/src/person-select.js
@@ -382,7 +382,7 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) {
align-items: center;
justify-content: center;
border: var(--dbp-border);
- border-color: var(--dbp-text-muted);
+ border-color: var(--dbp-muted);
-moz-border-radius-topright: var(--dbp-border-radius);
-moz-border-radius-bottomright: var(--dbp-border-radius);
line-height: 100%;
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index a3605846f9082ab5a5482fbb510c743e9988e872..31b82e2f4efb8998c0c92aec4f56efa1140bf21e 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -494,8 +494,10 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
.output {
margin-top: 20px;
- background: var(--dbp-text-muted);
- color: var(--dbp-text);
+ background: var(--dbp-muted-surface);
+ color: var(--dbp-on-muted-surface);
+ border: var(--dbp-border);
+ border-color: var(--dbp-muted-surface-border-color);
padding: 10px;
padding-bottom: 0;
}
@@ -522,7 +524,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
#videoSource:hover {
background: calc(100% - 0.2rem) center no-repeat
url('${unsafeCSS(getIconSVGURL('chevron-down'))}');
- color: var(--dbp-text);
+ color: var(--dbp-content);
background-position-x: calc(100% - 0.4rem);
background-size: auto 45%;
}
diff --git a/packages/theme-switcher/README.md b/packages/theme-switcher/README.md
index a7c136b0f81a81d12934260b51234035473b6b40..12067a8c0a1c8e4d47dba0ec49e72e5d46fff6d5 100644
--- a/packages/theme-switcher/README.md
+++ b/packages/theme-switcher/README.md
@@ -31,10 +31,10 @@ applied to the body of your html document. To add a style to the specific class
--dbp-override-accent: #c24f68;
--dbp-override-primary-base: #2a4491;
--dbp-override-primary-text: white;
- --dbp-override-primary-border: 1px solid #2a4491;
+ --dbp-override-primary-surface-border-color: #2a4491;
--dbp-override-secondary-base: white;
--dbp-override-secondary-text: black;
- --dbp-override-secondary-border: 1px solid black;
+ --dbp-override-secondary-surface-border-color: black;
--dbp-override-info: #2a4491;
--dbp-override-success: #188018;
--dbp-override-warning-as-text: #c15500;
@@ -56,10 +56,10 @@ applied to the body of your html document. To add a style to the specific class
--dbp-override-accent: #c24f68;
--dbp-override-primary-base: #8ca4eb;
--dbp-override-primary-text: #151515;
- --dbp-override-primary-border: 1px solid #8ca4eb;
+ --dbp-override-primary-surface-border-color: #8ca4eb;
--dbp-override-secondary-base: #151515;
--dbp-override-secondary-text: white;
- --dbp-override-secondary-border: 1px solid white;
+ --dbp-override-secondary-surface-border-color: white;
--dbp-override-info: #8ca4eb;
--dbp-override-success: #7acc79;
--dbp-override-warning-as-text: #f99a41;
diff --git a/packages/theme-switcher/src/demo.js b/packages/theme-switcher/src/demo.js
index 56e65522b8eb86e37e8ba0df12d23a2d56ef739f..d1dcba88dde242d9f3a7a23fb64cd74491f3c74a 100644
--- a/packages/theme-switcher/src/demo.js
+++ b/packages/theme-switcher/src/demo.js
@@ -55,10 +55,10 @@ export class ThemeSwitcherDemo extends ScopedElementsMixin(LitElement) {
--dbp-override-accent: #c24f68;
--dbp-override-primary-base: #2a4491;
--dbp-override-primary-text: white;
- --dbp-override-primary-border: 1px solid #2a4491;
+ --dbp-override-primary-surface-border-color: #2a4491;
--dbp-override-secondary-base: white;
--dbp-override-secondary-text: black;
- --dbp-override-secondary-border: 1px solid black;
+ --dbp-override-secondary-surface-border-color: black;
--dbp-override-info: #2a4491;
--dbp-override-success: #188018;
--dbp-override-warning-as-text: #c15500;
@@ -85,10 +85,10 @@ export class ThemeSwitcherDemo extends ScopedElementsMixin(LitElement) {
--dbp-override-accent: #c24f68;
--dbp-override-primary-base: #8ca4eb;
--dbp-override-primary-text: #151515;
- --dbp-override-primary-border: 1px solid #8ca4eb;
+ --dbp-override-primary-surface-border-color: #8ca4eb;
--dbp-override-secondary-base: #151515;
--dbp-override-secondary-text: white;
- --dbp-override-secondary-border: 1px solid white;
+ --dbp-override-secondary-surface-border-color: white;
--dbp-override-info: #8ca4eb;
--dbp-override-success: #7acc79;
--dbp-override-warning-as-text: #f99a41;
diff --git a/packages/theme-switcher/src/theme-switcher.js b/packages/theme-switcher/src/theme-switcher.js
index 0548c489028de08eabc43d99b8276782c2535b4e..cd13807736b7e6779a8ab283b2fa0bbbce48bafb 100644
--- a/packages/theme-switcher/src/theme-switcher.js
+++ b/packages/theme-switcher/src/theme-switcher.js
@@ -175,8 +175,8 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
a:hover:not(.active),
.extended-menu li a:hover:not(.active) {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
transition: none;
}
@@ -185,14 +185,14 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
display: inline-block;
text-decoration: none;
transition: background-color 0.15s, color 0.15s;
- color: var(--dbp-text);
+ color: var(--dbp-content);
}
.extended-menu {
list-style: none;
border: var(--dbp-border);
position: absolute;
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
z-index: 1000;
border-radius: var(--dbp-border-radius);
}
@@ -210,7 +210,7 @@ export class ThemeSwitcher extends ScopedElementsMixin(AdapterLitElement) {
w1idth: 100%;
box-sizing: border-box;
text-align: left;
- color: var(--dbp-text);
+ color: var(--dbp-content);
background: none;
display: block;
}
diff --git a/packages/tooltip/src/info-tooltip.js b/packages/tooltip/src/info-tooltip.js
index 82684a488aa72cc23591ba6d2b2c0b8f9c0bec8b..0a0e79646ac924f56f579d69881e5dc3279dddaf 100644
--- a/packages/tooltip/src/info-tooltip.js
+++ b/packages/tooltip/src/info-tooltip.js
@@ -74,12 +74,12 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
}
.tippy-box {
- background-color: var(--dbp-base-inverted);
- color: var(--dbp-text-inverted);
+ background-color: var(--dbp-content-surface);
+ color: var(--dbp-on-content-surface);
}
.tippy-arrow {
- color: var(--dbp-text);
+ color: var(--dbp-content);
}
`;
}
diff --git a/packages/tooltip/src/tooltip.js b/packages/tooltip/src/tooltip.js
index 6b34ba678a8226bc3fb614b7c4ee8d071f980696..bf9ff3f7a8b8447d47b70bfa345874c87f4ad9fd 100644
--- a/packages/tooltip/src/tooltip.js
+++ b/packages/tooltip/src/tooltip.js
@@ -57,7 +57,7 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
.tooltip-icon {
display: inline;
- color: var(--dbp-text);
+ color: var(--dbp-content);
}
`;
}
diff --git a/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs b/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
index 0e67c159bd49036bddefc68d67f3a3de64e12c61..86805581cb732d1d35f1e74394f0124878af4418 100644
--- a/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
+++ b/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
@@ -63,10 +63,10 @@
--dbp-override-accent: #c24f68;
--dbp-override-primary-base: #2a4491;
--dbp-override-primary-text: white;
- --dbp-override-primary-border: 1px solid #2a4491;
+ --dbp-override-primary-surface-border-color: #2a4491;
--dbp-override-secondary-base: white;
--dbp-override-secondary-text: black;
- --dbp-override-secondary-border: 1px solid black;
+ --dbp-override-secondary-surface-border-color: black;
--dbp-override-info: #2a4491;
--dbp-override-success: #188018;
--dbp-override-warning-as-text: #c15500;
@@ -88,10 +88,10 @@
--dbp-override-accent: #c24f68;
--dbp-override-primary-base: #8ca4eb;
--dbp-override-primary-text: #151515;
- --dbp-override-primary-border: 1px solid #8ca4eb;
+ --dbp-override-primary-surface-border-color: #8ca4eb;
--dbp-override-secondary-base: #151515;
--dbp-override-secondary-text: white;
- --dbp-override-secondary-border: 1px solid white;
+ --dbp-override-secondary-surface-border-color: white;
--dbp-override-info: #8ca4eb;
--dbp-override-success: #7acc79;
--dbp-override-warning-as-text: #f99a41;
diff --git a/toolkit-showcase/src/styles.js b/toolkit-showcase/src/styles.js
index 326d57e836ffbfdc9bb3056c0d6e98b6c07338f2..b606af979cdb460f5b0be3d587b9fb48c319908f 100644
--- a/toolkit-showcase/src/styles.js
+++ b/toolkit-showcase/src/styles.js
@@ -45,8 +45,8 @@ export function getDemoCSS() {
}
a:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-hover-color, var(--dbp-content));
+ background-color: var(--dbp-hover-background-color);
}
a:after {
@@ -90,16 +90,16 @@ export function getDemoCSS() {
}
pre {
- background-color: var(--dbp-base);
- color: var(--dbp-text);
+ background-color: var(--dbp-background);
+ color: var(--dbp-content);
padding: 0.4em;
overflow-x: auto;
border: 1px solid #ddd;
}
code {
- background-color: var(--dbp-base);
- color: var(--dbp-text);
+ background-color: var(--dbp-background);
+ color: var(--dbp-content);
line-height: 1.5em;
font-weight: normal;
padding: 0.25em 0.5em 0.25em;