From 50cabe94439e8708bc05eb7f47dc9eeb8397b15b Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Thu, 9 Dec 2021 12:22:26 +0100
Subject: [PATCH] Change new color system
---
packages/app-shell/src/app-shell.js | 10 ++---
packages/app-shell/src/auth-menu-button.js | 3 +-
packages/auth/src/login-button.js | 3 +-
packages/common/styles.js | 41 +++++++------------
packages/file-handling/src/clipboard.js | 4 +-
packages/file-handling/src/styles.js | 4 +-
.../language-select/src/language-select.js | 3 +-
packages/tooltip/src/info-tooltip.js | 4 +-
toolkit-showcase/src/styles.js | 4 +-
9 files changed, 29 insertions(+), 47 deletions(-)
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index dd180fc5..7a82d510 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -566,8 +566,7 @@ 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-accent-dark);
}
header .hd2-right {
@@ -607,8 +606,8 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
}
footer a:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
}
/* We don't allow inline-svg */
@@ -632,8 +631,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
}
.menu a:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-accent-dark);
}
.menu a.selected {
diff --git a/packages/app-shell/src/auth-menu-button.js b/packages/app-shell/src/auth-menu-button.js
index b03a909a..d3d905f3 100644
--- a/packages/app-shell/src/auth-menu-button.js
+++ b/packages/app-shell/src/auth-menu-button.js
@@ -177,8 +177,7 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
}
.login-button:hover {
- background-color: var(--dbp-hover-base);
- color: var(--dbp-hover-text);
+ color: var(--dbp-accent-dark);
cursor: pointer;
transition: none;
}
diff --git a/packages/auth/src/login-button.js b/packages/auth/src/login-button.js
index 5ab8b598..3574c3b0 100644
--- a/packages/auth/src/login-button.js
+++ b/packages/auth/src/login-button.js
@@ -137,8 +137,7 @@ export class LoginButton extends ScopedElementsMixin(AdapterLitElement) {
}
.login-box:hover {
- background-color: var(--dbp-hover-base);
- color: var(--dbp-hover-text);
+ color: var(--dbp-accent-dark);
cursor: pointer;
transition: none;
}
diff --git a/packages/common/styles.js b/packages/common/styles.js
index e0946f35..56c142c7 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -59,8 +59,8 @@ export function getThemeCSS() {
--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, #000000));
- --dbp-hover-text: var(--dbp-override-hover-text, var(--dbp-override-light, #ffffff));
+ --dbp-button-hover-base: var(--dbp-override-button-hover-base, var(--dbp-override-dark, #000000));
+ --dbp-button-hover-text: var(--dbp-override-button-hover-text, var(--dbp-override-light, #ffffff));
}
`;
@@ -142,8 +142,8 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
}
a.is-download:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
}
/* Inline SVG don't work in our web-components */
@@ -446,10 +446,10 @@ export function getButtonCSS() {
}
button.button:hover:enabled, .button:hover:enabled, button.dt-button:hover:enabled, button.dt-button:hover:not(.disabled) {
- color: var(--dbp-hover-text);
+ color: var(--dbp-button-hover-text);
background: none;
- border: var(--dbp-border-dark);
- background-color: var(--dbp-hover-base);
+ border-color: var(--dbp-button-hover-base);
+ background-color: var(--dbp-button-hover-base);
}
button.button.is-small, .button.is-small {
@@ -827,8 +827,8 @@ export function getDocumentationCSS() {
}
.documentation a:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
}
.documentation ul, .documentation ol, .documentation li {
@@ -1070,12 +1070,12 @@ export function getLinkCss() {
return css`
.int-link-external {
transition: background-color 0.15s, color 0.15s;
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+ border-bottom: var(--dbp-border-dark);
}
.int-link-external:hover {
- background-color: var(--dbp-hover-base);
- color: var(--dbp-hover-text);
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
}
.int-link-external:after {
@@ -1090,27 +1090,14 @@ export function getLinkCss() {
font-size: 103%;
}
- .int-link-external:hover::after {
- content: "\\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.6836mm%22%20width%3D%225.2043mm%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%2018.440707%2030.768605%22%3E%3Cg%20transform%3D%22translate(-382.21%20-336.98)%22%3E%3Cpath%20style%3D%22stroke-linejoin%3Around%3Bstroke%3A%23FFF%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2%3Bfill%3Anone%22%20d%3D%22m383.22%20366.74%2016.43-14.38-16.43-14.37%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
- background-size: 73%;
- background-repeat: no-repeat;
- background-position: center center;
- margin: 0 0 0 3px;
- padding: 0 0 0.25% 0;
- animation: 0s linkIconIn;
- font-size: 103%;
- }
-
.int-link-internal{
transition: background-color 0.15s, color 0.15s;
border-bottom: var(--dbp-border-dark);
}
.int-link-internal:hover{
- background-color: var(--dbp-hover-base);
- color: var(--dbp-hover-text);
- text-decoration: underline;
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
}
`;
}
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index 82aeebee..ca0da6e2 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -733,8 +733,8 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
a:hover {
- color: var(--dbp-hover-text);
- background-color: var(--dbp-hover-base);
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
}
h2:first-child {
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index da568589..5fcb1684 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -149,8 +149,8 @@ export function getFileHandlingCss() {
}
.tabulator-row.tabulator-selectable.tabulator-selected:hover, .tabulator-row.tabulator-selected{
- background-color: var(--dbp-hover-base);
- color: var(--dbp-hover-text);
+ background-color: var(--dbp-button-hover-base);
+ color: var(--dbp-button-hover-text);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content{
diff --git a/packages/language-select/src/language-select.js b/packages/language-select/src/language-select.js
index 59a2c36b..27ebf033 100644
--- a/packages/language-select/src/language-select.js
+++ b/packages/language-select/src/language-select.js
@@ -85,8 +85,7 @@ export class LanguageSelect extends AdapterLitElement {
}
a:hover {
- background-color: var(--dbp-hover-base);
- color: var(--dbp-hover-text);
+ color: var(--dbp-accent-dark);
transition: none;
}
diff --git a/packages/tooltip/src/info-tooltip.js b/packages/tooltip/src/info-tooltip.js
index 8c8e3192..ee2f3a26 100644
--- a/packages/tooltip/src/info-tooltip.js
+++ b/packages/tooltip/src/info-tooltip.js
@@ -75,12 +75,12 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
}
.tippy-box {
- background-color: var(--dbp-hover-base);
+ background-color: var(--dbp-base-dark);
color: var(--dbp-text-light);
}
.tippy-arrow{
- color: var(--dbp-hover-base);
+ color: var(--dbp-base-dark);
}
`;
}
diff --git a/toolkit-showcase/src/styles.js b/toolkit-showcase/src/styles.js
index 1d71fe28..c2c00a76 100644
--- a/toolkit-showcase/src/styles.js
+++ b/toolkit-showcase/src/styles.js
@@ -37,8 +37,8 @@ export function getDemoCSS() {
}
a:hover {
- background-color: var(--dbp-hover-base);
- color: var(--dbp-hover-text);
+ color: var(--dbp-accent-dark);
+ border-color: var(--dbp-accent-dark);
}
a:after {
--
GitLab