Theme Variables
-
+
| Dark Theme |
${themeInfo.isDarkTheme ? 'Yes' : 'No'} |
-
+
| Primary Color |
-
+
${themeInfo.primaryColor}
|
-
+
| Accent Color |
-
+
${themeInfo.accentColor}
|
-
+
| Warn Color |
-
+
${themeInfo.warnColor}
|
-
+
| Background |
-
+
${themeInfo.backgroundColor}
|
| Text Color |
-
+
${themeInfo.textColor}
|
-
+
Plugins automatically receive all CSS variables from the host application, allowing seamless theme integration.
diff --git a/packages/plugin-dev/procrastination-buster/src/App.css b/packages/plugin-dev/procrastination-buster/src/App.css
index 9c5fb26e5..6969af76c 100644
--- a/packages/plugin-dev/procrastination-buster/src/App.css
+++ b/packages/plugin-dev/procrastination-buster/src/App.css
@@ -1,4 +1,4 @@
-/*
+/*
* Procrastination Buster Plugin Styles
* Simplified structure following KISS principles
*/
@@ -11,7 +11,7 @@ body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: transparent;
- color: var(--theme-text-color);
+ color: var(--text-color);
}
.app {
@@ -23,12 +23,12 @@ body {
/* Common card styles */
.card {
- background: var(--theme-card-bg);
+ background: var(--card-bg);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 1rem;
text-align: left;
- border: 2px solid var(--theme-extra-border-color);
+ border: 2px solid var(--extra-border-color);
}
.card-clickable:hover {
@@ -41,7 +41,7 @@ body {
/* Common text styles */
.text-muted {
- color: var(--theme-text-color-muted);
+ color: var(--text-color-muted);
}
.text-primary {
@@ -195,8 +195,8 @@ body {
margin-top: 1rem;
padding: 0.5rem 1rem;
background: transparent;
- border: 1px solid var(--theme-extra-border-color);
- color: var(--theme-text-color-muted);
+ border: 1px solid var(--extra-border-color);
+ color: var(--text-color-muted);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
@@ -247,8 +247,8 @@ body {
.graph-item {
padding: 0.5rem 1rem;
- background: var(--theme-card-bg);
- border: 1px solid var(--theme-extra-border-color);
+ background: var(--card-bg);
+ border: 1px solid var(--extra-border-color);
border-radius: 4px;
text-align: center;
font-size: 0.9rem;
@@ -256,7 +256,7 @@ body {
.sync-icon {
font-size: 1.2rem;
- color: var(--theme-text-color-muted);
+ color: var(--text-color-muted);
}
/* Action buttons */
diff --git a/packages/plugin-dev/yesterday-tasks-plugin/index.html b/packages/plugin-dev/yesterday-tasks-plugin/index.html
index 206c9ad3a..b681a730e 100644
--- a/packages/plugin-dev/yesterday-tasks-plugin/index.html
+++ b/packages/plugin-dev/yesterday-tasks-plugin/index.html
@@ -17,8 +17,8 @@
/* Light mode (default) */
:root {
- --text-color: var(--theme-text-color);
- --border-color: var(--theme-separator-color);
+ --text-color: var(--text-color);
+ --border-color: var(--separator-color);
--primary-color: var(--c-primary);
}
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 383205b31..2f5ec312e 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -13,7 +13,7 @@
transition: var(--transition-enter);
border-bottom: 1px solid transparent;
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
&.isNotScrolled {
border-color: transparent !important;
@@ -95,7 +95,7 @@ mat-sidenav-container {
mat-sidenav ::ng-deep .mat-drawer-inner-container {
@include scrollYImportant();
- background: var(--theme-sidebar-bg);
+ background: var(--sidebar-bg);
}
mat-sidenav {
diff --git a/src/app/core-ui/global-progress-bar/global-progress-bar.component.scss b/src/app/core-ui/global-progress-bar/global-progress-bar.component.scss
index b07c94aef..44765163b 100644
--- a/src/app/core-ui/global-progress-bar/global-progress-bar.component.scss
+++ b/src/app/core-ui/global-progress-bar/global-progress-bar.component.scss
@@ -28,6 +28,6 @@
border-top-right-radius: var(--card-border-radius);
box-shadow: var(--whiteframe-shadow-1dp);
- background: var(--theme-bg-lighter);
- color: var(--theme-text-color-less-intense);
+ background: var(--bg-lighter);
+ color: var(--text-color-less-intense);
}
diff --git a/src/app/core-ui/main-header/desktop-panel-buttons/desktop-panel-buttons.component.ts b/src/app/core-ui/main-header/desktop-panel-buttons/desktop-panel-buttons.component.ts
index 5480c6f43..ef67293f5 100644
--- a/src/app/core-ui/main-header/desktop-panel-buttons/desktop-panel-buttons.component.ts
+++ b/src/app/core-ui/main-header/desktop-panel-buttons/desktop-panel-buttons.component.ts
@@ -76,8 +76,8 @@ import { KeyboardConfig } from '../../../features/config/keyboard-config.model';
&::after {
border-radius: 4px;
- box-shadow: 0px -2px 3px 0px var(--theme-separator-alpha);
- background: var(--theme-sidebar-bg);
+ box-shadow: 0px -2px 3px 0px var(--separator-alpha);
+ background: var(--sidebar-bg);
content: '';
width: 100%;
position: absolute;
diff --git a/src/app/core-ui/main-header/main-header.component.scss b/src/app/core-ui/main-header/main-header.component.scss
index d9af3a38f..bf4a23e35 100644
--- a/src/app/core-ui/main-header/main-header.component.scss
+++ b/src/app/core-ui/main-header/main-header.component.scss
@@ -194,8 +194,8 @@ button.isActive2 {
pointer-events: none;
bottom: calc(var(--s) * -0.25);
- background: var(--theme-bg-lighter);
- color: var(--theme-text-color-most-intense);
+ background: var(--bg-lighter);
+ color: var(--text-color-most-intense);
}
.pomodoro-controls {
@@ -264,7 +264,7 @@ button.isActive2 {
display: none;
}
- background: var(--theme-bg-lighter);
+ background: var(--bg-lighter);
.title {
max-width: 250px;
@@ -344,8 +344,8 @@ button.isActive2 {
&::after {
border-radius: 4px;
- box-shadow: 0px -2px 3px 0px var(--theme-separator-alpha);
- background: var(--theme-sidebar-bg);
+ box-shadow: 0px -2px 3px 0px var(--separator-alpha);
+ background: var(--sidebar-bg);
content: '';
width: 100%;
position: absolute;
@@ -441,8 +441,8 @@ button.isActive2 {
}
@include darkTheme() {
- background: var(--theme-bg-lighter);
- color: var(--theme-text-color);
+ background: var(--bg-lighter);
+ color: var(--text-color);
&:hover {
background: var(--dark8);
diff --git a/src/app/core-ui/main-header/mobile-side-panel-menu/mobile-side-panel-menu.component.scss b/src/app/core-ui/main-header/mobile-side-panel-menu/mobile-side-panel-menu.component.scss
index b95e00e92..15f396747 100644
--- a/src/app/core-ui/main-header/mobile-side-panel-menu/mobile-side-panel-menu.component.scss
+++ b/src/app/core-ui/main-header/mobile-side-panel-menu/mobile-side-panel-menu.component.scss
@@ -47,7 +47,7 @@
// Active button styles
button.active {
- background-color: var(--theme-sidebar-bg);
+ background-color: var(--sidebar-bg);
&.isCustomized {
background-color: var(--c-accent);
diff --git a/src/app/core-ui/main-header/play-button/play-button.component.ts b/src/app/core-ui/main-header/play-button/play-button.component.ts
index cb340ba8a..f1e7e225e 100644
--- a/src/app/core-ui/main-header/play-button/play-button.component.ts
+++ b/src/app/core-ui/main-header/play-button/play-button.component.ts
@@ -209,8 +209,8 @@ import { Subscription } from 'rxjs';
z-index: 4;
pointer-events: none;
bottom: calc(var(--s) * -0.25);
- background: var(--theme-bg-lighter);
- color: var(--theme-text-color-most-intense);
+ background: var(--bg-lighter);
+ color: var(--text-color-most-intense);
}
.pomodoro-controls {
@@ -273,7 +273,7 @@ import { Subscription } from 'rxjs';
pointer-events: none;
transition: var(--transition-standard);
display: flex;
- background: var(--theme-bg-lighter);
+ background: var(--bg-lighter);
@media (max-width: 599px) {
display: none;
diff --git a/src/app/core-ui/side-nav/side-nav-item/side-nav-item.component.scss b/src/app/core-ui/side-nav/side-nav-item/side-nav-item.component.scss
index bce130563..82b01d466 100644
--- a/src/app/core-ui/side-nav/side-nav-item/side-nav-item.component.scss
+++ b/src/app/core-ui/side-nav/side-nav-item/side-nav-item.component.scss
@@ -17,15 +17,15 @@
font-size: 10px;
min-width: 18px;
padding: 1px 4px 0;
- border: 1px solid var(--theme-extra-border-color);
+ border: 1px solid var(--extra-border-color);
border-radius: 12px;
margin-right: -49px;
// avoid affecting drag handle
pointer-events: none;
- border-color: var(--theme-extra-border-color);
- background: var(--theme-bg-lighter);
+ border-color: var(--extra-border-color);
+ background: var(--bg-lighter);
}
}
diff --git a/src/app/core-ui/side-nav/side-nav.component.scss b/src/app/core-ui/side-nav/side-nav.component.scss
index d673044fc..79402e111 100644
--- a/src/app/core-ui/side-nav/side-nav.component.scss
+++ b/src/app/core-ui/side-nav/side-nav.component.scss
@@ -101,7 +101,7 @@ section {
position: relative;
&:after {
- border-bottom: 1px solid var(--theme-divider-color);
+ border-bottom: 1px solid var(--divider-color);
content: '';
position: absolute;
left: var(--s2);
diff --git a/src/app/core/banner/banner/banner.component.scss b/src/app/core/banner/banner/banner.component.scss
index d5cc2b1d5..7e200282c 100644
--- a/src/app/core/banner/banner/banner.component.scss
+++ b/src/app/core/banner/banner/banner.component.scss
@@ -14,8 +14,8 @@
}
.content-wrapper {
- border: 1px 0 solid var(--theme-divider-color);
- background-color: var(--theme-banner-bg);
+ border: 1px 0 solid var(--divider-color);
+ background-color: var(--banner-bg);
}
.inner-content-wrapper {
diff --git a/src/app/features/boards/board-panel/board-panel.component.scss b/src/app/features/boards/board-panel/board-panel.component.scss
index 23f4ae987..b6cdafe89 100644
--- a/src/app/features/boards/board-panel/board-panel.component.scss
+++ b/src/app/features/boards/board-panel/board-panel.component.scss
@@ -2,7 +2,7 @@
:host {
//border: 1px solid var(--color-overlay-light-20);
- border: 1px solid var(--theme-extra-border-color);
+ border: 1px solid var(--extra-border-color);
border-radius: 8px;
min-height: 200px;
min-width: 280px;
@@ -18,7 +18,7 @@
min-height: 300px;
}
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
planner-task {
margin-bottom: 8px;
@@ -78,7 +78,7 @@ header {
border-radius: 8px;
min-height: 100px;
flex-grow: 1;
- //border-color: var(--theme-extra-border-color);
+ //border-color: var(--extra-border-color);
}
.empty {
@@ -117,15 +117,15 @@ header {
line-height: 1;
text-align: center;
padding: 1px 2px 0;
- border: 1px solid var(--theme-extra-border-color);
+ border: 1px solid var(--extra-border-color);
border-radius: var(--card-border-radius);
white-space: nowrap;
// avoid affecting drag handle
pointer-events: none;
- border-color: var(--theme-extra-border-color);
- background: var(--theme-bg-lighter);
+ border-color: var(--extra-border-color);
+ background: var(--bg-lighter);
::ng-deep span {
font-size: 10px;
diff --git a/src/app/features/config/repeat-section-type/repeat-section-type.component.scss b/src/app/features/config/repeat-section-type/repeat-section-type.component.scss
index d26767383..b739fb3dc 100644
--- a/src/app/features/config/repeat-section-type/repeat-section-type.component.scss
+++ b/src/app/features/config/repeat-section-type/repeat-section-type.component.scss
@@ -9,14 +9,14 @@
.row {
display: flex;
margin-bottom: var(--s3);
- border: 1px solid var(--theme-extra-border-color);
+ border: 1px solid var(--extra-border-color);
padding: 8px;
box-shadow: var(--whiteframe-shadow-2dp);
border-radius: 8px;
position: relative;
- background: var(--theme-bg-slightly-lighter);
- border-color: var(--theme-extra-border-color);
+ background: var(--bg-slightly-lighter);
+ border-color: var(--extra-border-color);
@include mq(component) {
margin-bottom: 0;
diff --git a/src/app/features/idle/dialog-idle/dialog-idle-split-mode/dialog-idle-split.component.scss b/src/app/features/idle/dialog-idle/dialog-idle-split-mode/dialog-idle-split.component.scss
index 129f559f5..aa16216da 100644
--- a/src/app/features/idle/dialog-idle/dialog-idle-split-mode/dialog-idle-split.component.scss
+++ b/src/app/features/idle/dialog-idle/dialog-idle-split-mode/dialog-idle-split.component.scss
@@ -32,7 +32,7 @@
flex-wrap: nowrap;
padding-top: var(--s2);
padding-bottom: var(--s);
- border-top: 1px solid var(--theme-extra-border-color);
+ border-top: 1px solid var(--extra-border-color);
&:first-of-type {
border-top: none !important;
diff --git a/src/app/features/idle/dialog-idle/dialog-idle.component.scss b/src/app/features/idle/dialog-idle/dialog-idle.component.scss
index 1c353c444..868d39573 100644
--- a/src/app/features/idle/dialog-idle/dialog-idle.component.scss
+++ b/src/app/features/idle/dialog-idle/dialog-idle.component.scss
@@ -23,7 +23,7 @@
padding-top: var(--s3);
margin: var(--s) calc(var(--s) * -3) var(--s);
font-size: 22px;
- border-top: 1px solid var(--theme-extra-border-color);
+ border-top: 1px solid var(--extra-border-color);
}
.simple-counter {
diff --git a/src/app/features/issue-panel/issue-panel.component.scss b/src/app/features/issue-panel/issue-panel.component.scss
index 02c5524fc..376b3e32d 100644
--- a/src/app/features/issue-panel/issue-panel.component.scss
+++ b/src/app/features/issue-panel/issue-panel.component.scss
@@ -79,7 +79,7 @@
margin-top: 1px;
font-size: 12px;
- color: var(--theme-text-color-most-intense);
+ color: var(--text-color-most-intense);
}
::ng-deep .issue-provider-drag-preview {
diff --git a/src/app/features/issue-panel/issue-preview-item/issue-preview-item.component.scss b/src/app/features/issue-panel/issue-preview-item/issue-preview-item.component.scss
index a54aa8e2d..2ff2dc025 100644
--- a/src/app/features/issue-panel/issue-preview-item/issue-preview-item.component.scss
+++ b/src/app/features/issue-panel/issue-preview-item/issue-preview-item.component.scss
@@ -10,8 +10,8 @@
background: var(--task-c-bg);
- color: var(--theme-text-color);
- border-color: var(--theme-extra-border-color);
+ color: var(--text-color);
+ border-color: var(--extra-border-color);
&.isDone {
opacity: 0.7;
diff --git a/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.scss b/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.scss
index 31b7292bb..1bf782d2c 100644
--- a/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.scss
+++ b/src/app/features/issue-panel/issue-provider-setup-overview/issue-provider-setup-overview.component.scss
@@ -41,7 +41,7 @@ h4 {
margin-top: 1px;
font-size: 12px;
- color: var(--theme-text-color-most-intense);
+ color: var(--text-color-most-intense);
}
.provider-items {
diff --git a/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.scss b/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.scss
index f4327285b..cf35fffe6 100644
--- a/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.scss
+++ b/src/app/features/issue/dialog-edit-issue-provider/dialog-edit-issue-provider.component.scss
@@ -48,7 +48,7 @@
.tpl hr {
margin-bottom: 32px;
- border-color: var(--theme-separator-color);
+ border-color: var(--separator-color);
}
.sub-section-heading {
diff --git a/src/app/features/issue/issue-content/issue-content.component.scss b/src/app/features/issue/issue-content/issue-content.component.scss
index e159b8591..f0c6cbe48 100644
--- a/src/app/features/issue/issue-content/issue-content.component.scss
+++ b/src/app/features/issue/issue-content/issue-content.component.scss
@@ -43,7 +43,7 @@
display: flex;
padding: 12px 0;
border-radius: 4px;
- border-bottom: 1px dashed var(--theme-extra-border-color);
+ border-bottom: 1px dashed var(--extra-border-color);
&:last-child {
border-bottom: none;
diff --git a/src/app/features/issue/providers/caldav/OLD-caldav-issue-content/caldav-issue-content.component.scss b/src/app/features/issue/providers/caldav/OLD-caldav-issue-content/caldav-issue-content.component.scss
index f572064ef..f88d72ebc 100644
--- a/src/app/features/issue/providers/caldav/OLD-caldav-issue-content/caldav-issue-content.component.scss
+++ b/src/app/features/issue/providers/caldav/OLD-caldav-issue-content/caldav-issue-content.component.scss
@@ -14,9 +14,9 @@
display: flex;
margin-bottom: var(--s);
padding-top: var(--s);
- border-top: 1px dashed var(--theme-extra-border-color);
+ border-top: 1px dashed var(--extra-border-color);
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
.author-avatar {
margin-right: var(--s);
@@ -41,7 +41,7 @@
pre {
overflow: auto;
- border: 1px dashed var(--theme-extra-border-color);
+ border: 1px dashed var(--extra-border-color);
padding: var(--s);
}
}
diff --git a/src/app/features/issue/providers/github/OLD-github-issue-content/github-issue-content.component.scss b/src/app/features/issue/providers/github/OLD-github-issue-content/github-issue-content.component.scss
index 20adf6fee..01d94dd01 100644
--- a/src/app/features/issue/providers/github/OLD-github-issue-content/github-issue-content.component.scss
+++ b/src/app/features/issue/providers/github/OLD-github-issue-content/github-issue-content.component.scss
@@ -23,9 +23,9 @@
display: flex;
margin-bottom: var(--s);
padding-top: var(--s);
- border-top: 1px dashed var(--theme-extra-border-color);
+ border-top: 1px dashed var(--extra-border-color);
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
&.isLastComment {
border-top: 0 !important;
@@ -54,7 +54,7 @@
pre {
overflow: auto;
- border: 1px dashed var(--theme-extra-border-color);
+ border: 1px dashed var(--extra-border-color);
padding: var(--s);
}
}
diff --git a/src/app/features/issue/providers/gitlab/OLD-gitlab-issue-content/gitlab-issue-content.component.scss b/src/app/features/issue/providers/gitlab/OLD-gitlab-issue-content/gitlab-issue-content.component.scss
index 967c218ba..2d6cccebc 100644
--- a/src/app/features/issue/providers/gitlab/OLD-gitlab-issue-content/gitlab-issue-content.component.scss
+++ b/src/app/features/issue/providers/gitlab/OLD-gitlab-issue-content/gitlab-issue-content.component.scss
@@ -16,9 +16,9 @@
display: flex;
margin-bottom: var(--s);
padding-top: var(--s);
- border-top: 1px dashed var(--theme-extra-border-color);
+ border-top: 1px dashed var(--extra-border-color);
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
.author-avatar {
margin-right: var(--s);
@@ -43,7 +43,7 @@
pre {
overflow: auto;
- border: 1px dashed var(--theme-extra-border-color);
+ border: 1px dashed var(--extra-border-color);
padding: var(--s);
}
}
diff --git a/src/app/features/issue/providers/open-project/OLD-open-project-issue-content/open-project-issue-content.component.scss b/src/app/features/issue/providers/open-project/OLD-open-project-issue-content/open-project-issue-content.component.scss
index 1d6834fba..440be030d 100644
--- a/src/app/features/issue/providers/open-project/OLD-open-project-issue-content/open-project-issue-content.component.scss
+++ b/src/app/features/issue/providers/open-project/OLD-open-project-issue-content/open-project-issue-content.component.scss
@@ -25,9 +25,9 @@
display: flex;
margin-bottom: var(--s);
padding-top: var(--s);
- border-top: 1px dashed var(--theme-extra-border-color);
+ border-top: 1px dashed var(--extra-border-color);
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
.author-avatar {
margin-right: var(--s);
@@ -52,7 +52,7 @@
pre {
overflow: auto;
- border: 1px dashed var(--theme-extra-border-color);
+ border: 1px dashed var(--extra-border-color);
padding: var(--s);
}
}
diff --git a/src/app/features/metric/evaluation-sheet/evaluation-sheet.component.scss b/src/app/features/metric/evaluation-sheet/evaluation-sheet.component.scss
index bf18dc2d3..f70398177 100644
--- a/src/app/features/metric/evaluation-sheet/evaluation-sheet.component.scss
+++ b/src/app/features/metric/evaluation-sheet/evaluation-sheet.component.scss
@@ -5,7 +5,7 @@
padding: var(--s2);
border-radius: var(--card-border-radius);
- background: var(--theme-bg-lighter);
+ background: var(--bg-lighter);
}
mat-form-field {
diff --git a/src/app/features/metric/improvement-banner/improvement-banner.component.scss b/src/app/features/metric/improvement-banner/improvement-banner.component.scss
index 4df5151d7..7ad5e339e 100644
--- a/src/app/features/metric/improvement-banner/improvement-banner.component.scss
+++ b/src/app/features/metric/improvement-banner/improvement-banner.component.scss
@@ -38,8 +38,8 @@
background: transparent;
border: 1px solid;
- color: var(--theme-improvement-text);
- border-color: var(--theme-improvement-border);
+ color: var(--improvement-text);
+ border-color: var(--improvement-border);
&:active {
box-shadow: var(--whiteframe-shadow-2dp);
@@ -62,7 +62,7 @@
z-index: 1;
transform-origin: center center;
- color: var(--theme-improvement-button-text);
+ color: var(--improvement-button-text);
&.dismiss {
transform: translateX(-11px);
diff --git a/src/app/features/note/note/note.component.scss b/src/app/features/note/note/note.component.scss
index 05c465ab4..60dce5ae9 100644
--- a/src/app/features/note/note/note.component.scss
+++ b/src/app/features/note/note/note.component.scss
@@ -85,7 +85,7 @@
background: var(--standard-note-bg);
color: var(--standard-note-fg);
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
}
.markdown-unparsed,
@@ -127,7 +127,7 @@
align-items: center;
transition: var(--transition-standard);
cursor: move;
- border-top: 1px dashed var(--theme-extra-border-color);
+ border-top: 1px dashed var(--extra-border-color);
opacity: 0;
position: relative;
diff --git a/src/app/features/planner/dialog-schedule-task/dialog-schedule-task.component.scss b/src/app/features/planner/dialog-schedule-task/dialog-schedule-task.component.scss
index c622299be..248ca35a0 100644
--- a/src/app/features/planner/dialog-schedule-task/dialog-schedule-task.component.scss
+++ b/src/app/features/planner/dialog-schedule-task/dialog-schedule-task.component.scss
@@ -61,7 +61,7 @@
.form-ctrl-wrapper {
margin: 0 16px;
margin-top: 16px;
- //border-top: 1px solid var(--theme-separator-color);
+ //border-top: 1px solid var(--separator-color);
}
.press-enter-msg {
@@ -77,7 +77,7 @@
white-space: nowrap;
transform: translateX(-50%);
- background: var(--theme-bg-lighter);
+ background: var(--bg-lighter);
}
:host ::ng-deep mat-month-view .mat-calendar-body-today {
@@ -89,14 +89,14 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- color: var(--theme-text-color);
+ color: var(--text-color);
}
}
.quick-access {
display: flex;
justify-content: space-evenly;
- border-bottom: 1px solid var(--theme-extra-border-color);
+ border-bottom: 1px solid var(--extra-border-color);
height: 48px;
> button {
@@ -110,6 +110,6 @@
}
button + button {
- border-left: 1px solid var(--theme-extra-border-color);
+ border-left: 1px solid var(--extra-border-color);
}
}
diff --git a/src/app/features/planner/planner-calendar-event/planner-calendar-event.component.scss b/src/app/features/planner/planner-calendar-event/planner-calendar-event.component.scss
index c17cb848b..c60053fc8 100644
--- a/src/app/features/planner/planner-calendar-event/planner-calendar-event.component.scss
+++ b/src/app/features/planner/planner-calendar-event/planner-calendar-event.component.scss
@@ -8,7 +8,7 @@
flex-direction: row;
padding-top: var(--s-quarter);
padding-bottom: var(--s-quarter);
- border: 1px solid var(--theme-separator-color);
+ border: 1px solid var(--separator-color);
border-radius: var(--task-border-radius);
opacity: 0.9;
min-height: var(--planner-item-height);
@@ -19,7 +19,7 @@
pointer-events: none !important;
}
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
&:hover {
border-color: var(--c-accent);
diff --git a/src/app/features/planner/planner-repeat-projection/planner-repeat-projection.component.scss b/src/app/features/planner/planner-repeat-projection/planner-repeat-projection.component.scss
index a3ebaca25..f67486f91 100644
--- a/src/app/features/planner/planner-repeat-projection/planner-repeat-projection.component.scss
+++ b/src/app/features/planner/planner-repeat-projection/planner-repeat-projection.component.scss
@@ -12,13 +12,13 @@
flex-direction: row;
padding-top: var(--s-quarter);
padding-bottom: var(--s-quarter);
- border: 1px solid var(--theme-separator-color);
+ border: 1px solid var(--separator-color);
border-radius: var(--task-border-radius);
opacity: 0.9;
cursor: pointer;
min-height: var(--planner-item-height);
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
&:hover {
border-color: var(--c-primary);
diff --git a/src/app/features/planner/planner-task/planner-task.component.scss b/src/app/features/planner/planner-task/planner-task.component.scss
index 35c2f9725..131c9c1c8 100644
--- a/src/app/features/planner/planner-task/planner-task.component.scss
+++ b/src/app/features/planner/planner-task/planner-task.component.scss
@@ -8,7 +8,7 @@
align-items: stretch;
@include grabCursor();
- color: var(--theme-text-color);
+ color: var(--text-color);
background: var(--task-c-bg);
&.isDone {
@@ -228,12 +228,12 @@
line-height: 1;
text-align: center;
padding: 1px 2px 0;
- border: 1px solid var(--theme-extra-border-color);
+ border: 1px solid var(--extra-border-color);
border-radius: var(--card-border-radius);
// avoid affecting drag handle
pointer-events: none;
- background: var(--theme-bg-lighter);
+ background: var(--bg-lighter);
}
.original-time-remaining {
diff --git a/src/app/features/planner/planner.component.scss b/src/app/features/planner/planner.component.scss
index 59a2ab372..868942541 100644
--- a/src/app/features/planner/planner.component.scss
+++ b/src/app/features/planner/planner.component.scss
@@ -11,8 +11,8 @@
//border-top: 1px solid;
//border-bottom: 1px solid;
- //border-color: var(--theme-extra-border-color);
- //background: var(--theme-bg-lighter);
+ //border-color: var(--extra-border-color);
+ //background: var(--bg-lighter);
}
.start-date {
diff --git a/src/app/features/quick-history/quick-history.component.scss b/src/app/features/quick-history/quick-history.component.scss
index cec12c245..a9f31a3ba 100644
--- a/src/app/features/quick-history/quick-history.component.scss
+++ b/src/app/features/quick-history/quick-history.component.scss
@@ -15,9 +15,9 @@
h2 {
margin: var(--s3) 0 var(--s);
- border-bottom: 1px solid var(--theme-extra-border-color);
+ border-bottom: 1px solid var(--extra-border-color);
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
}
}
diff --git a/src/app/features/schedule/create-task-placeholder/create-task-placeholder.component.scss b/src/app/features/schedule/create-task-placeholder/create-task-placeholder.component.scss
index 22f018429..1827a9ac8 100644
--- a/src/app/features/schedule/create-task-placeholder/create-task-placeholder.component.scss
+++ b/src/app/features/schedule/create-task-placeholder/create-task-placeholder.component.scss
@@ -13,8 +13,8 @@
// NOTE: to be consistent with scheduled event
margin-bottom: 6px;
- color: var(--theme-text-color);
- background: var(--theme-bg-lightest);
+ color: var(--text-color);
+ background: var(--bg-lightest);
&.isEditMode {
pointer-events: auto;
diff --git a/src/app/features/schedule/schedule-event/schedule-event.component.scss b/src/app/features/schedule/schedule-event/schedule-event.component.scss
index 4d89d8ced..47d27b054 100644
--- a/src/app/features/schedule/schedule-event/schedule-event.component.scss
+++ b/src/app/features/schedule/schedule-event/schedule-event.component.scss
@@ -17,13 +17,13 @@
display: flex;
align-items: flex-start;
margin-bottom: var(--margin-bottom);
- border: 1px solid var(--theme-separator-color);
+ border: 1px solid var(--separator-color);
//box-shadow: var(--whiteframe-shadow-1dp);
- background: var(--theme-card-bg);
- color: var(--theme-text-color);
+ background: var(--card-bg);
+ color: var(--text-color);
position: relative;
z-index: 2;
- border-left: 3px solid var(--project-color, var(--theme-separator-color));
+ border-left: 3px solid var(--project-color, var(--separator-color));
user-select: none;
// has to be for after elements
overflow: visible !important;
@@ -133,8 +133,8 @@
border-style: dashed;
border-left-style: solid;
- //border-color: var(--theme-separator-color);
- background: var(--theme-bg-lighter);
+ //border-color: var(--separator-color);
+ background: var(--bg-lighter);
> * {
opacity: 0.7;
@@ -145,7 +145,7 @@
:host.CalendarEvent {
border-left-width: 1px;
- border-left-color: var(--theme-extra-border-color);
+ border-left-color: var(--extra-border-color);
}
:host-context(.is-not-dragging) :host.CalendarEvent:hover {
@@ -209,7 +209,7 @@
}
.time-badge {
- color: var(--theme-text-color);
+ color: var(--text-color);
border-color: var(--c-primary);
//color: var(--c-primary);
}
@@ -231,7 +231,7 @@
height: 13px;
text-align: center;
padding: 1px;
- border: 1px solid var(--theme-extra-border-color);
+ border: 1px solid var(--extra-border-color);
border-radius: var(--card-border-radius);
@include mq(xs, max) {
@@ -239,9 +239,9 @@
height: 11px;
}
- color: var(--theme-text-color);
- border-color: var(--theme-extra-border-color);
- background: var(--theme-bg-lighter);
+ color: var(--text-color);
+ border-color: var(--extra-border-color);
+ background: var(--bg-lighter);
:host.very-short-event & {
//bottom: 4px
@@ -319,13 +319,13 @@
min-width: 14px;
width: auto;
font-weight: 900;
- border: 1px solid var(--theme-text-color-muted);
+ border: 1px solid var(--text-color-muted);
border-top-width: 3px;
border-radius: 2px;
position: relative;
- color: var(--theme-text-color-muted);
- border-color: var(--theme-text-color-muted);
+ color: var(--text-color-muted);
+ border-color: var(--text-color-muted);
@include mq(xs, max) {
border-radius: 1px;
@@ -396,7 +396,7 @@
:host.SplitTaskPlannedForDay,
:host.Task,
:host.SplitTask {
- background: var(--theme-bg-lightest);
+ background: var(--bg-lightest);
}
}
diff --git a/src/app/features/schedule/schedule-month/schedule-month.component.scss b/src/app/features/schedule/schedule-month/schedule-month.component.scss
index ae364c8a4..13e09b851 100644
--- a/src/app/features/schedule/schedule-month/schedule-month.component.scss
+++ b/src/app/features/schedule/schedule-month/schedule-month.component.scss
@@ -7,7 +7,7 @@
grid-template-rows: auto repeat(var(--nr-of-weeks), 1fr);
gap: 1px;
height: calc(100vh - 120px);
- background: var(--theme-grid-color);
+ background: var(--grid-color);
.cdk-drag-dragging {
z-index: 1000;
@@ -23,9 +23,9 @@
text-align: center;
font-weight: 600;
padding: 6px;
- background: var(--theme-bg);
- color: var(--theme-text-color);
- border: 1px solid var(--theme-grid-color);
+ background: var(--bg);
+ color: var(--text-color);
+ border: 1px solid var(--grid-color);
grid-row: 1;
@include mq(xs, max) {
@@ -57,8 +57,8 @@
}
.month-day-cell {
- background: var(--theme-bg);
- border: 1px solid var(--theme-grid-color);
+ background: var(--bg);
+ border: 1px solid var(--grid-color);
display: flex;
flex-direction: column;
min-height: 80px;
@@ -105,7 +105,7 @@
&.other-month {
opacity: 0.4;
- background: var(--theme-bg-lighter);
+ background: var(--bg-lighter);
}
&.today {
@@ -129,7 +129,7 @@
// Hover effect
&:hover {
- background: var(--theme-bg-lighter);
+ background: var(--bg-lighter);
}
// Drag over effect
@@ -144,7 +144,7 @@
display: flex;
justify-content: space-between;
align-items: center;
- border-bottom: 1px solid var(--theme-grid-color);
+ border-bottom: 1px solid var(--grid-color);
@include mq(xs, max) {
padding: 4px;
diff --git a/src/app/features/schedule/schedule-week/schedule-week.component.scss b/src/app/features/schedule/schedule-week/schedule-week.component.scss
index 5ec2d8c57..67f03b6dd 100644
--- a/src/app/features/schedule/schedule-week/schedule-week.component.scss
+++ b/src/app/features/schedule/schedule-week/schedule-week.component.scss
@@ -37,14 +37,14 @@
align-self: end;
font-size: 80%;
position: relative;
- color: var(--theme-text-color-muted);
+ color: var(--text-color-muted);
padding-right: 6px;
line-height: 1.2;
text-align: right;
}
.col {
- border-left: 1px solid var(--theme-grid-color);
+ border-left: 1px solid var(--grid-color);
grid-row: 1 / span var(--schedule-total-rows);
grid-column: span 1;
@@ -55,7 +55,7 @@
.row {
grid-column: 2 / -1;
- border-top: 1px solid var(--theme-grid-color);
+ border-top: 1px solid var(--grid-color);
pointer-events: none;
}
@@ -114,7 +114,7 @@
border: 2px solid var(--c-warn);
box-shadow: var(--whiteframe-shadow-6dp);
border-radius: 4px;
- background: var(--theme-bg);
+ background: var(--bg);
@media (min-height: 1000px) {
max-height: 200px;
@@ -149,15 +149,15 @@
.work-end,
.work-start {
scroll-margin-top: 80px;
- border-top: 2px dashed var(--theme-separator-color);
+ border-top: 2px dashed var(--separator-color);
min-width: 100px;
grid-column: 2 / -1;
position: relative;
- color: var(--theme-text-color);
+ color: var(--text-color);
&:hover {
z-index: 22;
- border-color: var(--theme-text-color-most-intense);
+ border-color: var(--text-color-most-intense);
}
> div {
@@ -169,7 +169,7 @@
line-height: 1;
padding: 2px 8px;
margin-bottom: -6px;
- background: var(--theme-bg);
+ background: var(--bg);
}
.is-dragging & {
diff --git a/src/app/features/schedule/schedule/schedule.component.scss b/src/app/features/schedule/schedule/schedule.component.scss
index d00e0aa71..0b4af668d 100644
--- a/src/app/features/schedule/schedule/schedule.component.scss
+++ b/src/app/features/schedule/schedule/schedule.component.scss
@@ -13,19 +13,19 @@ header {
top: 0;
left: 0;
right: 0;
- border-top: 1px solid var(--theme-extra-border-color);
- border-bottom: 1px solid var(--theme-extra-border-color);
+ border-top: 1px solid var(--extra-border-color);
+ border-bottom: 1px solid var(--extra-border-color);
box-shadow: var(--whiteframe-shadow-1dp);
z-index: 10;
- color: var(--theme-text-color);
- background: var(--theme-bg-lighter);
+ color: var(--text-color);
+ background: var(--bg-lighter);
}
.main-controls {
display: flex;
align-items: center;
justify-content: center;
- border-bottom: 1px solid var(--theme-extra-border-color);
+ border-bottom: 1px solid var(--extra-border-color);
}
.days {
@@ -42,7 +42,7 @@ header {
.day {
line-height: 32px;
font-size: 18px;
- border-left: 1px solid var(--theme-extra-border-color);
+ border-left: 1px solid var(--extra-border-color);
@include mq(xs, max) {
font-size: 14px;
diff --git a/src/app/features/simple-counter/simple-counter-button/simple-counter-button.component.scss b/src/app/features/simple-counter/simple-counter-button/simple-counter-button.component.scss
index d117c3f64..b1965d473 100644
--- a/src/app/features/simple-counter/simple-counter-button/simple-counter-button.component.scss
+++ b/src/app/features/simple-counter/simple-counter-button/simple-counter-button.component.scss
@@ -60,8 +60,8 @@
pointer-events: none;
bottom: calc(-1 * var(--s-quarter));
- background: var(--theme-bg-lighter);
- color: var(--theme-text-color-most-intense);
+ background: var(--bg-lighter);
+ color: var(--text-color-most-intense);
.wrapper:hover .stopwatch & {
opacity: 0;
diff --git a/src/app/features/tag/tag-edit/tag-edit.component.scss b/src/app/features/tag/tag-edit/tag-edit.component.scss
index c878c0f67..4352ec5b5 100644
--- a/src/app/features/tag/tag-edit/tag-edit.component.scss
+++ b/src/app/features/tag/tag-edit/tag-edit.component.scss
@@ -17,7 +17,7 @@
width: 100%;
box-shadow: none;
border: none;
- color: var(--theme-text-color);
+ color: var(--text-color);
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
height: 40px;
@@ -27,7 +27,7 @@
&:hover,
&:focus {
outline: none;
- border-bottom-color: var(--theme-extra-border-color);
+ border-bottom-color: var(--extra-border-color);
}
}
}
diff --git a/src/app/features/tag/tag/tag.component.scss b/src/app/features/tag/tag/tag.component.scss
index 530f1d8ce..4efa739c9 100644
--- a/src/app/features/tag/tag/tag.component.scss
+++ b/src/app/features/tag/tag/tag.component.scss
@@ -12,7 +12,7 @@
cursor: pointer;
vertical-align: middle;
- color: var(--theme-text-color-less-intense);
+ color: var(--text-color-less-intense);
}
.tag-title {
@@ -20,7 +20,7 @@
font-size: 12px;
line-height: 1;
- color: var(--theme-text-color-muted);
+ color: var(--text-color-muted);
//// hide inside add task bar for smaller screens
///* TODO(mdc-migration): The following rule targets internal classes of autocomplete that may no longer apply for the MDC version.*/
diff --git a/src/app/features/tasks/add-task-bar/add-task-bar.component.scss b/src/app/features/tasks/add-task-bar/add-task-bar.component.scss
index 96fd6dbbb..514c64720 100644
--- a/src/app/features/tasks/add-task-bar/add-task-bar.component.scss
+++ b/src/app/features/tasks/add-task-bar/add-task-bar.component.scss
@@ -40,22 +40,22 @@
width: 100%;
position: relative;
border-radius: var(--card-border-radius);
- background: var(--theme-bg);
+ background: var(--bg);
// 58 overlay 53 normal
- background-color: var(--theme-bg-lighter);
- color: var(--theme-text-color-most-intense);
+ background-color: var(--bg-lighter);
+ color: var(--text-color-most-intense);
&.isElevated {
- background-color: var(--theme-bg-lightest);
- color: var(--theme-text-color-most-intense);
+ background-color: var(--bg-lightest);
+ color: var(--text-color-most-intense);
}
.input-wrapper {
position: relative;
display: flex;
- color: var(--theme-text-color-most-intense);
+ color: var(--text-color-most-intense);
}
input {
@@ -106,13 +106,13 @@
padding: 0 var(--s2);
height: var(--short-syntax-bar-height);
line-height: var(--short-syntax-bar-height);
- border-top: 1px dashed var(--theme-extra-border-color);
+ border-top: 1px dashed var(--extra-border-color);
position: relative;
z-index: 1;
pointer-events: none;
- border-color: var(--theme-extra-border-color);
- color: var(--theme-text-color-muted);
+ border-color: var(--extra-border-color);
+ color: var(--text-color-muted);
}
.info-text {
@@ -124,7 +124,7 @@
&.add-existing {
font-weight: bold;
- color: var(--theme-text-color);
+ color: var(--text-color);
}
> mat-icon {
@@ -133,8 +133,8 @@
}
.separator-box {
- border-right: 1px dashed var(--theme-extra-border-color);
- border-left: 1px dashed var(--theme-extra-border-color);
+ border-right: 1px dashed var(--extra-border-color);
+ border-left: 1px dashed var(--extra-border-color);
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
}
diff --git a/src/app/features/tasks/dialog-task-detail-panel/dialog-task-detail-panel.component.scss b/src/app/features/tasks/dialog-task-detail-panel/dialog-task-detail-panel.component.scss
index e632ac9ce..0c9097753 100644
--- a/src/app/features/tasks/dialog-task-detail-panel/dialog-task-detail-panel.component.scss
+++ b/src/app/features/tasks/dialog-task-detail-panel/dialog-task-detail-panel.component.scss
@@ -8,8 +8,8 @@
max-height: 75vh;
min-width: 340px;
- background: var(--theme-bg-lightest) !important;
- border: 4px solid var(--theme-bg-lightest);
+ background: var(--bg-lightest) !important;
+ border: 4px solid var(--bg-lightest);
@include mq(xxxs) {
min-width: 380px;
diff --git a/src/app/features/tasks/dialog-view-task-reminders/dialog-view-task-reminders.component.scss b/src/app/features/tasks/dialog-view-task-reminders/dialog-view-task-reminders.component.scss
index 50b63aa42..f6cd8cf3b 100644
--- a/src/app/features/tasks/dialog-view-task-reminders/dialog-view-task-reminders.component.scss
+++ b/src/app/features/tasks/dialog-view-task-reminders/dialog-view-task-reminders.component.scss
@@ -11,7 +11,7 @@
.task {
display: flex;
align-items: center;
- border-bottom: 1px solid var(--theme-extra-border-color);
+ border-bottom: 1px solid var(--extra-border-color);
padding: var(--s);
padding-left: 0;
diff --git a/src/app/features/tasks/task-attachment/task-attachment-list/task-attachment-list.component.scss b/src/app/features/tasks/task-attachment/task-attachment-list/task-attachment-list.component.scss
index 6be589124..cc96ecfc5 100644
--- a/src/app/features/tasks/task-attachment/task-attachment-list/task-attachment-list.component.scss
+++ b/src/app/features/tasks/task-attachment/task-attachment-list/task-attachment-list.component.scss
@@ -28,9 +28,9 @@
position: relative;
overflow: hidden;
- color: var(--theme-text-color-less-intense);
- background-color: var(--theme-attachment-bg);
- border: 1px solid var(--theme-attachment-border);
+ color: var(--text-color-less-intense);
+ background-color: var(--attachment-bg);
+ border: 1px solid var(--attachment-border);
//.controls,
> a:focus + .controls,
@@ -125,10 +125,10 @@
opacity: 0;
border-width: 0;
- background: var(--theme-attachment-control-bg);
- border-color: var(--theme-attachment-control-border);
+ background: var(--attachment-control-bg);
+ border-color: var(--attachment-control-border);
&:hover {
- background: var(--theme-attachment-control-hover-bg);
+ background: var(--attachment-control-hover-bg);
}
}
}
@@ -210,7 +210,7 @@
background: var(--c-warn) !important;
mat-icon {
- color: var(--theme-card-bg) !important;
+ color: var(--card-bg) !important;
}
}
diff --git a/src/app/features/tasks/task-context-menu/task-context-menu-inner/task-context-menu-inner.component.scss b/src/app/features/tasks/task-context-menu/task-context-menu-inner/task-context-menu-inner.component.scss
index 7883473ec..e3a56f3e2 100644
--- a/src/app/features/tasks/task-context-menu/task-context-menu-inner/task-context-menu-inner.component.scss
+++ b/src/app/features/tasks/task-context-menu/task-context-menu-inner/task-context-menu-inner.component.scss
@@ -32,7 +32,7 @@
.quick-access {
display: flex;
justify-content: space-evenly;
- border-bottom: 1px solid var(--theme-extra-border-color);
+ border-bottom: 1px solid var(--extra-border-color);
height: 48px;
> button {
@@ -47,7 +47,7 @@
}
button + button {
- border-left: 1px solid var(--theme-extra-border-color) !important;
+ border-left: 1px solid var(--extra-border-color) !important;
}
}
diff --git a/src/app/features/tasks/task-detail-panel/task-additional-info-item/task-detail-item.component.scss b/src/app/features/tasks/task-detail-panel/task-additional-info-item/task-detail-item.component.scss
index c35931ad2..be372f0ca 100644
--- a/src/app/features/tasks/task-detail-panel/task-additional-info-item/task-detail-item.component.scss
+++ b/src/app/features/tasks/task-detail-panel/task-additional-info-item/task-detail-item.component.scss
@@ -36,7 +36,7 @@
.box {
@include lightTheme {
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
bottom: 0;
top: -1px;
}
@@ -83,8 +83,8 @@
//border-color: $dark-theme-separator-color;
}
@include lightTheme {
- background: var(--theme-card-bg);
- border-color: var(--theme-extra-border-color);
+ background: var(--card-bg);
+ border-color: var(--extra-border-color);
//border-color: $light-theme-separator-color;
}
}
@@ -94,11 +94,11 @@ mat-expansion-panel::ng-deep .mat-expansion-panel-header:not(.mat-expanded),
&:hover,
&:focus {
:host-context(.isNoTouchOnly.isLightTheme) & {
- background: var(--theme-bg-darker);
+ background: var(--bg-darker);
}
:host-context(.isNoTouchOnly.isDarkTheme) & {
- background: var(--theme-bg-lightest);
+ background: var(--bg-lightest);
}
}
}
@@ -143,7 +143,7 @@ mat-expansion-panel::ng-deep .mat-expansion-panel-header:not(.mat-expanded),
.panel-content-wrapper {
margin: 0 var(--s) var(--s);
display: block;
- color: var(--theme-text-color-less-intense);
+ color: var(--text-color-less-intense);
&::ng-deep inline-markdown {
&.isFocused {
border-color: transparent;
@@ -156,11 +156,11 @@ mat-expansion-panel::ng-deep .mat-expansion-panel-header:not(.mat-expanded),
transition: var(--transition-standard);
@include lightTheme {
- background: var(--theme-bg-lightest);
+ background: var(--bg-lightest);
//border: 1px solid $light-theme-extra-border-color;
}
@include darkTheme() {
- background: var(--theme-bg-lightest);
+ background: var(--bg-lightest);
box-shadow: var(--whiteframe-shadow-1dp);
}
}
@@ -209,11 +209,11 @@ mat-expansion-panel::ng-deep .mat-expansion-panel-header:not(.mat-expanded),
cursor: default;
}
- color: var(--theme-text-color);
+ color: var(--text-color);
&.--estimate {
progress-bar {
- background: var(--theme-extra-border-color);
+ background: var(--extra-border-color);
}
&:hover progress-bar {
@@ -277,7 +277,7 @@ mat-expansion-panel::ng-deep .mat-expansion-panel-header:not(.mat-expanded),
// width: 32px;
//}
- color: var(--theme-task-detail-value-color);
+ color: var(--task-detail-value-color);
> * {
flex-grow: 1;
diff --git a/src/app/features/tasks/task-detail-panel/task-detail-panel.component.scss b/src/app/features/tasks/task-detail-panel/task-detail-panel.component.scss
index 93c45e70b..c561bd4c2 100644
--- a/src/app/features/tasks/task-detail-panel/task-detail-panel.component.scss
+++ b/src/app/features/tasks/task-detail-panel/task-detail-panel.component.scss
@@ -41,7 +41,7 @@ progress-bar {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
- background: var(--theme-card-bg);
+ background: var(--card-bg);
//border-bottom: 1px solid var(--c-primary);
@include mq(xs) {
@@ -58,7 +58,7 @@ progress-bar {
padding-bottom: 4px;
margin-top: 0;
- color: var(--theme-text-color);
+ color: var(--text-color);
}
}
@@ -90,7 +90,7 @@ progress-bar {
padding: var(--s);
opacity: 0.5;
text-align: center;
- color: var(--theme-text-color-muted);
+ color: var(--text-color-muted);
}
.drag-over-msg {
diff --git a/src/app/features/tasks/task-list/task-list.component.scss b/src/app/features/tasks/task-list/task-list.component.scss
index 414c5ac03..be3ead44e 100644
--- a/src/app/features/tasks/task-list/task-list.component.scss
+++ b/src/app/features/tasks/task-list/task-list.component.scss
@@ -40,7 +40,7 @@
transform: translate(-50%, 0);
width: 90%;
- color: var(--theme-text-color-muted);
+ color: var(--text-color-muted);
}
.expand-tasks-btn {
diff --git a/src/app/features/tasks/task-summary-table/task-summary-table.component.scss b/src/app/features/tasks/task-summary-table/task-summary-table.component.scss
index c4374f8a3..98d02db53 100644
--- a/src/app/features/tasks/task-summary-table/task-summary-table.component.scss
+++ b/src/app/features/tasks/task-summary-table/task-summary-table.component.scss
@@ -5,7 +5,7 @@
.summary-table {
width: 100%;
- background: var(--theme-card-bg);
+ background: var(--card-bg);
tr {
height: 36px !important;
@@ -14,10 +14,10 @@
td {
text-align: center;
- color: var(--theme-text-color-muted);
+ color: var(--text-color-muted);
inline-input {
- color: var(--theme-text-color);
+ color: var(--text-color);
}
}
diff --git a/src/app/features/tasks/task-summary-tables/task-summary-tables.component.scss b/src/app/features/tasks/task-summary-tables/task-summary-tables.component.scss
index cae740cb1..7d930fbd3 100644
--- a/src/app/features/tasks/task-summary-tables/task-summary-tables.component.scss
+++ b/src/app/features/tasks/task-summary-tables/task-summary-tables.component.scss
@@ -10,7 +10,7 @@
flex-wrap: wrap;
border-bottom: 2px solid;
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
mat-icon {
margin: 0 var(--s-half);
diff --git a/src/app/features/tasks/task/task-hover-controls/task-hover-controls.component.scss b/src/app/features/tasks/task/task-hover-controls/task-hover-controls.component.scss
index 2f5b93233..1ae2ef183 100644
--- a/src/app/features/tasks/task/task-hover-controls/task-hover-controls.component.scss
+++ b/src/app/features/tasks/task/task-hover-controls/task-hover-controls.component.scss
@@ -13,13 +13,13 @@
&:before {
content: '';
- border-left: var(--theme-hover-controls-border);
+ border-left: var(--hover-controls-border);
width: 1px;
height: 90%;
position: absolute;
left: 0;
top: 5%;
- opacity: var(--theme-hover-controls-border-opacity);
+ opacity: var(--hover-controls-border-opacity);
:host-context([dir='rtl']) & {
right: 0;
diff --git a/src/app/features/tasks/task/task.component.scss b/src/app/features/tasks/task/task.component.scss
index 6a97850ec..dd696c6cd 100644
--- a/src/app/features/tasks/task/task.component.scss
+++ b/src/app/features/tasks/task/task.component.scss
@@ -6,12 +6,12 @@
// NOTE: needs to come first to be overwritten by :host.isCurrent
// NOTE: needs to be very light, because we're on a lighter background for the dark theme
:host-context(.isDarkTheme) {
- color: var(--theme-text-color);
+ color: var(--text-color);
}
:host-context(.isDarkTheme).isSelected,
:host-context(.isDarkTheme).isCurrent {
- color: var(--theme-text-color-most-intense);
+ color: var(--text-color-most-intense);
}
:host {
@@ -23,7 +23,7 @@
display: block;
position: relative;
- color: var(--theme-text-color);
+ color: var(--text-color);
&.isSelected {
z-index: var(--z-is-selected-host);
@@ -195,7 +195,7 @@
::ng-deep .box {
@include lightTheme {
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
bottom: 0;
top: -1px;
}
@@ -849,7 +849,7 @@ progress-bar {
line-height: 1;
text-align: center;
padding: 1px 2px 0;
- border: 1px solid var(--theme-extra-border-color);
+ border: 1px solid var(--extra-border-color);
border-radius: var(--card-border-radius);
white-space: nowrap;
background: #fff;
@@ -858,8 +858,8 @@ progress-bar {
pointer-events: none;
@include darkTheme() {
- border-color: var(--theme-extra-border-color);
- background: var(--theme-bg-lighter);
+ border-color: var(--extra-border-color);
+ background: var(--bg-lighter);
}
::ng-deep span {
diff --git a/src/app/features/work-view/work-view.component.scss b/src/app/features/work-view/work-view.component.scss
index baabb4cc7..cdcfcd8d6 100644
--- a/src/app/features/work-view/work-view.component.scss
+++ b/src/app/features/work-view/work-view.component.scss
@@ -74,7 +74,7 @@ h2 {
margin-top: var(--s2);
//text-align: left;
font-size: 16px;
- //border-bottom: 1px solid var(--theme-extra-border-color);
+ //border-bottom: 1px solid var(--extra-border-color);
display: flex;
align-items: center;
justify-content: center;
@@ -292,7 +292,7 @@ h2 {
color: #333;
@include darkTheme() {
- color: var(--theme-text-color-most-intense);
+ color: var(--text-color-most-intense);
font-weight: 500;
text-shadow:
0 0 2px black,
diff --git a/src/app/features/worklog/worklog-export/worklog-export.component.scss b/src/app/features/worklog/worklog-export/worklog-export.component.scss
index 8fd575275..3120b1df8 100644
--- a/src/app/features/worklog/worklog-export/worklog-export.component.scss
+++ b/src/app/features/worklog/worklog-export/worklog-export.component.scss
@@ -50,7 +50,7 @@
bottom: 0;
z-index: -1;
- background: var(--theme-select-hover-bg);
+ background: var(--select-hover-bg);
}
}
}
@@ -126,7 +126,7 @@
}
tr:first-of-type td {
- border: 1px solid var(--theme-extra-border-color);
+ border: 1px solid var(--extra-border-color);
}
th {
@@ -168,7 +168,7 @@
top: 0;
border: 1px solid;
- border-color: var(--theme-options-border-color);
+ border-color: var(--options-border-color);
}
}
diff --git a/src/app/features/worklog/worklog.component.scss b/src/app/features/worklog/worklog.component.scss
index 89e01c879..bd887b268 100644
--- a/src/app/features/worklog/worklog.component.scss
+++ b/src/app/features/worklog/worklog.component.scss
@@ -9,7 +9,7 @@
}
.year {
- border-top: 1px dashed var(--theme-separator-color);
+ border-top: 1px dashed var(--separator-color);
&-title {
margin-top: var(--s3);
@@ -25,7 +25,7 @@
.month {
margin-top: calc(3 * var(--s));
margin-bottom: 0;
- border-top: 1px dashed var(--theme-separator-color);
+ border-top: 1px dashed var(--separator-color);
padding-top: var(--s2);
&-title {
@@ -123,10 +123,10 @@
> td {
// bold without respacing
text-shadow: 0.01px 0 0.01px;
- background: var(--theme-card-bg);
+ background: var(--card-bg);
box-shadow: var(--whiteframe-shadow-2dp);
- background-color: var(--theme-bg-lighter);
+ background-color: var(--bg-lighter);
}
}
}
diff --git a/src/app/pages/config-page/config-page.component.scss b/src/app/pages/config-page/config-page.component.scss
index e601afae3..ca725468f 100644
--- a/src/app/pages/config-page/config-page.component.scss
+++ b/src/app/pages/config-page/config-page.component.scss
@@ -14,14 +14,14 @@
}
.config-section {
- border: 1px solid var(--theme-divider-color);
+ border: 1px solid var(--divider-color);
break-inside: avoid;
margin-bottom: 10px;
border-radius: var(--card-border-radius);
- background: var(--theme-card-bg);
+ background: var(--card-bg);
- background-color: var(--theme-card-bg);
- //background-color: var(--theme-bg-slightly-lighter);
+ background-color: var(--card-bg);
+ //background-color: var(--bg-slightly-lighter);
.md-title {
margin-top: 0;
@@ -34,7 +34,7 @@
::ng-deep .isExpanded .collapsible-header {
font-weight: bold;
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
}
}
diff --git a/src/app/pages/daily-summary/daily-summary.component.scss b/src/app/pages/daily-summary/daily-summary.component.scss
index 387ac70da..c20cbe614 100644
--- a/src/app/pages/daily-summary/daily-summary.component.scss
+++ b/src/app/pages/daily-summary/daily-summary.component.scss
@@ -9,15 +9,15 @@ $summary-point-inner-margin: var(--s);
::ng-deep {
.mat-mdc-tab .mdc-tab__text-label {
- //color: var(--theme-text-color);
+ //color: var(--text-color);
//font-weight: 300;
}
}
::ng-deep .mat-mdc-tab-list {
- border-bottom: 1px solid var(--theme-separator-color);
+ border-bottom: 1px solid var(--separator-color);
- border-color: var(--theme-separator-color);
+ border-color: var(--separator-color);
}
::ng-deep .mat-mdc-tab-labels {
@@ -138,7 +138,7 @@ $summary-point-inner-margin: var(--s);
height: $this-ico-size;
display: block;
font-size: $this-ico-size;
- color: var(--yellow);
+ color: var(--sun-yellow);
//transform-origin: center center;
animation: success-animation-sun #{$this-ani-style};
backface-visibility: hidden;
@@ -181,9 +181,9 @@ $summary-point-inner-margin: var(--s);
overflow: visible !important;
transition: var(--transition-standard);
- //background: var(--theme-bg);
+ //background: var(--bg);
//box-shadow: var(--whiteframe-shadow-1dp);
- border: 1px solid var(--theme-extra-border-color);
+ border: 1px solid var(--extra-border-color);
&,
> * {
diff --git a/src/app/pages/project-settings-page/project-settings-page.component.scss b/src/app/pages/project-settings-page/project-settings-page.component.scss
index 76c2efad3..09ecdcbc1 100644
--- a/src/app/pages/project-settings-page/project-settings-page.component.scss
+++ b/src/app/pages/project-settings-page/project-settings-page.component.scss
@@ -5,13 +5,13 @@
}
.config-section {
- border: 1px solid var(--theme-divider-color);
+ border: 1px solid var(--divider-color);
break-inside: avoid;
margin-bottom: 10px;
border-radius: var(--card-border-radius);
- background: var(--theme-card-bg);
+ background: var(--card-bg);
- background-color: var(--theme-card-bg);
+ background-color: var(--card-bg);
.md-title {
margin-top: 0;
@@ -24,7 +24,7 @@
::ng-deep .isExpanded .collapsible-header {
font-weight: bold;
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
}
}
diff --git a/src/app/pages/search-page/search-page.component.scss b/src/app/pages/search-page/search-page.component.scss
index 7413ab71c..3ba70f03a 100644
--- a/src/app/pages/search-page/search-page.component.scss
+++ b/src/app/pages/search-page/search-page.component.scss
@@ -61,7 +61,7 @@
}
.archive-icon {
- color: var(--theme-text-color-muted);
+ color: var(--text-color-muted);
}
}
}
diff --git a/src/app/pages/tag-settings-page/tag-settings-page.component.scss b/src/app/pages/tag-settings-page/tag-settings-page.component.scss
index 4044bc8d8..dd2aeb374 100644
--- a/src/app/pages/tag-settings-page/tag-settings-page.component.scss
+++ b/src/app/pages/tag-settings-page/tag-settings-page.component.scss
@@ -5,13 +5,13 @@
}
.config-section {
- border: 1px solid var(--theme-divider-color);
+ border: 1px solid var(--divider-color);
break-inside: avoid;
margin-bottom: 10px;
border-radius: var(--card-border-radius);
- background: var(--theme-card-bg);
+ background: var(--card-bg);
- background-color: var(--theme-card-bg);
+ background-color: var(--card-bg);
.md-title {
margin-top: 0;
@@ -24,7 +24,7 @@
::ng-deep .isExpanded .collapsible-header {
font-weight: bold;
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
}
}
diff --git a/src/app/plugins/ui/plugin-side-panel-btns.component.ts b/src/app/plugins/ui/plugin-side-panel-btns.component.ts
index b55e0fb4a..e893a45c3 100644
--- a/src/app/plugins/ui/plugin-side-panel-btns.component.ts
+++ b/src/app/plugins/ui/plugin-side-panel-btns.component.ts
@@ -72,8 +72,8 @@ import { BreakpointObserver } from '@angular/cdk/layout';
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
- box-shadow: 0px -2px 3px 0px var(--theme-separator-alpha);
- background: var(--theme-sidebar-bg);
+ box-shadow: 0px -2px 3px 0px var(--separator-alpha);
+ background: var(--sidebar-bg);
content: '';
width: 100%;
position: absolute;
diff --git a/src/app/plugins/util/plugin-iframe.util.spec.ts b/src/app/plugins/util/plugin-iframe.util.spec.ts
index 1e9ef2beb..4b49502b8 100644
--- a/src/app/plugins/util/plugin-iframe.util.spec.ts
+++ b/src/app/plugins/util/plugin-iframe.util.spec.ts
@@ -59,12 +59,12 @@
// spyOn(window, 'getComputedStyle').and.returnValue({
// getPropertyValue: (prop: string) => {
// const values: { [key: string]: string } = {
-// '--theme-bg': '#ffffff',
-// '--theme-text-color': '#000000',
-// '--theme-card-bg': '#f5f5f5',
-// '--theme-divider-color': '#e0e0e0',
-// '--theme-select-hover-bg': '#eeeeee',
-// '--theme-text-color-muted': '#666666',
+// '--bg': '#ffffff',
+// '--text-color': '#000000',
+// '--card-bg': '#f5f5f5',
+// '--divider-color': '#e0e0e0',
+// '--select-hover-bg': '#eeeeee',
+// '--text-color-muted': '#666666',
// '--c-primary': '#2196f3',
// '--c-accent': '#ff4081',
// '--c-warn': '#f44336',
@@ -72,13 +72,13 @@
// '--color-danger': '#f44336',
// '--color-warning': '#ff9800',
// '--is-rtl': '0',
-// '--theme-primary-bg': '#e3f2fd',
-// '--theme-primary-color': '#1976d2',
-// '--theme-link-color': '#2196f3',
-// '--theme-border-radius': '4px',
-// '--theme-transition': '0.3s ease',
+// '--primary-bg': '#e3f2fd',
+// '--primary-color': '#1976d2',
+// '--link-color': '#2196f3',
+// '--border-radius': '4px',
+// '--transition': '0.3s ease',
// '--font-family': 'Roboto, sans-serif',
-// '--theme-error-color': '#f44336',
+// '--error-color': '#f44336',
// };
// // eslint-enable @typescript-eslint/naming-convention
// return values[prop] || '';
@@ -91,12 +91,12 @@
//
// const css = createPluginCssInjection();
//
-// expect(css).toContain('--theme-bg: #ffffff');
-// expect(css).toContain('--theme-text-color: #000000');
+// expect(css).toContain('--bg: #ffffff');
+// expect(css).toContain('--text-color: #000000');
// expect(css).toContain('--is-dark-theme: 0');
// expect(css).toContain('background: transparent');
-// expect(css).toContain('--theme-primary-bg: #e3f2fd');
-// expect(css).toContain('--theme-link-color: #2196f3');
+// expect(css).toContain('--primary-bg: #e3f2fd');
+// expect(css).toContain('--link-color: #2196f3');
// expect(css).toContain('font-family: Roboto, sans-serif');
// });
//
@@ -115,12 +115,12 @@
//
// // Check for all CSS variables
// const expectedVars = [
-// '--theme-bg',
-// '--theme-text-color',
-// '--theme-card-bg',
-// '--theme-divider-color',
-// '--theme-select-hover-bg',
-// '--theme-text-color-muted',
+// '--bg',
+// '--text-color',
+// '--card-bg',
+// '--divider-color',
+// '--select-hover-bg',
+// '--text-color-muted',
// '--c-primary',
// '--c-accent',
// '--c-warn',
@@ -128,13 +128,13 @@
// '--color-danger',
// '--color-warning',
// '--is-rtl',
-// '--theme-primary-bg',
-// '--theme-primary-color',
-// '--theme-link-color',
-// '--theme-border-radius',
-// '--theme-transition',
+// '--primary-bg',
+// '--primary-color',
+// '--link-color',
+// '--border-radius',
+// '--transition',
// '--font-family',
-// '--theme-error-color',
+// '--error-color',
// '--is-dark-theme',
// ];
//
@@ -151,7 +151,7 @@
// expect(css).toContain('padding: 8px');
// expect(css).toContain('background: transparent');
// expect(css).toContain('font-family: Roboto, sans-serif');
-// expect(css).toContain('color: var(--theme-text-color)');
+// expect(css).toContain('color: var(--text-color)');
// });
// });
//
diff --git a/src/app/plugins/util/plugin-iframe.util.ts b/src/app/plugins/util/plugin-iframe.util.ts
index 70ac99016..3e4abc26d 100644
--- a/src/app/plugins/util/plugin-iframe.util.ts
+++ b/src/app/plugins/util/plugin-iframe.util.ts
@@ -34,16 +34,16 @@ export const createPluginCssInjection = (): string => {
return `
`;
diff --git a/src/app/ui/better-drawer/better-drawer-container/better-drawer-container.component.scss b/src/app/ui/better-drawer/better-drawer-container/better-drawer-container.component.scss
index 581a2fb2b..559c2c714 100644
--- a/src/app/ui/better-drawer/better-drawer-container/better-drawer-container.component.scss
+++ b/src/app/ui/better-drawer/better-drawer-container/better-drawer-container.component.scss
@@ -35,7 +35,7 @@ $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1);
//border: 1px solid;
//border-right: 0;
//border-bottom: 0;
- //box-shadow: 0px 8px 10px -5px var(--color-overlay-dark-20), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px var(--theme-divider-color) !important;
+ //box-shadow: 0px 8px 10px -5px var(--color-overlay-dark-20), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px var(--divider-color) !important;
@include mq(sm, max) {
// NOTE: prevents overlapping with nav when open
@@ -46,8 +46,8 @@ $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1);
max-width: 100%;
}
- background: var(--theme-selected-task-bg-color);
- //border-color: var(--theme-extra-border-color);
+ background: var(--selected-task-bg-color);
+ //border-color: var(--extra-border-color);
:host.isOver & {
position: fixed;
@@ -115,12 +115,12 @@ $z-this-backdrop: calc(var(--z-task-side-bar-over) - 1);
outline: none;
}
- color: var(--theme-text-color);
- background: var(--theme-bg-lightest);
- border-color: var(--theme-extra-border-color);
+ color: var(--text-color);
+ background: var(--bg-lightest);
+ border-color: var(--extra-border-color);
@include mq(xs) {
- background: var(--theme-bg-slightly-lighter);
+ background: var(--bg-slightly-lighter);
}
:host.isOver.isOpen & {
diff --git a/src/app/ui/better-simple-drawer/better-simple-drawer.component.scss b/src/app/ui/better-simple-drawer/better-simple-drawer.component.scss
index f80fb7ed3..2ef323e21 100644
--- a/src/app/ui/better-simple-drawer/better-simple-drawer.component.scss
+++ b/src/app/ui/better-simple-drawer/better-simple-drawer.component.scss
@@ -105,7 +105,7 @@ $z-this-side: calc(#{$z-this-content} + 2);
z-index: 2;
display: flex;
- background: var(--theme-bg-darker);
+ background: var(--bg-darker);
}
.close-btn {
@@ -138,10 +138,10 @@ $z-this-side: calc(#{$z-this-content} + 2);
outline: none;
}
- color: var(--theme-text-color);
- background: var(--theme-close-btn-bg);
- border-color: var(--theme-close-btn-border);
+ color: var(--text-color);
+ background: var(--close-btn-bg);
+ border-color: var(--close-btn-border);
@include mq(xs) {
- background: var(--theme-bg-slightly-lighter);
+ background: var(--bg-slightly-lighter);
}
}
diff --git a/src/app/ui/chip-list-input/chip-list-input.component.scss b/src/app/ui/chip-list-input/chip-list-input.component.scss
index f9b495625..34e7b5a37 100644
--- a/src/app/ui/chip-list-input/chip-list-input.component.scss
+++ b/src/app/ui/chip-list-input/chip-list-input.component.scss
@@ -17,7 +17,7 @@
margin-top: -2px;
height: 40px;
- color: var(--theme-text-color);
+ color: var(--text-color);
mat-icon {
font-size: 22px;
diff --git a/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.scss b/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.scss
index 4a91cbe3a..0bf2f6a6f 100644
--- a/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.scss
+++ b/src/app/ui/dialog-fullscreen-markdown/dialog-fullscreen-markdown.component.scss
@@ -17,8 +17,8 @@
.content {
flex-grow: 1;
position: relative;
- color: var(--theme-text-color-more-intense);
- background-color: var(--theme-bg-lightest);
+ color: var(--text-color-more-intense);
+ background-color: var(--bg-lightest);
textarea,
.markdown-preview {
position: absolute;
@@ -62,7 +62,7 @@
left: 50%;
border-left: 2px solid;
- border-color: var(--theme-extra-border-color);
+ border-color: var(--extra-border-color);
}
}
}
diff --git a/src/app/ui/duration/input-duration-slider/input-duration-slider.component.scss b/src/app/ui/duration/input-duration-slider/input-duration-slider.component.scss
index a0aa85430..f561db222 100644
--- a/src/app/ui/duration/input-duration-slider/input-duration-slider.component.scss
+++ b/src/app/ui/duration/input-duration-slider/input-duration-slider.component.scss
@@ -37,7 +37,7 @@ $this-dot-size: 14px;
-webkit-user-select: none; /* Safari */
width: $this-size + $this-margin * 2;
min-width: $this-size + $this-margin * 2;
- color: var(--theme-text-color);
+ color: var(--text-color);
&.is-dragging .circle {
cursor: grabbing;
}
@@ -84,7 +84,7 @@ $this-dot-size: 14px;
left: $this-circle-width;
bottom: $this-circle-width;
border-radius: 100%;
- background: var(--theme-bg-darker);
+ background: var(--bg-darker);
border-color: transparent;
}
@@ -101,7 +101,7 @@ $this-dot-size: 14px;
}
.dot {
- box-shadow: 1px 1px 1px var(--theme-separator-alpha);
+ box-shadow: 1px 1px 1px var(--separator-alpha);
height: 8px;
width: 8px;
border-radius: 100%;
@@ -148,7 +148,7 @@ $this-stroke-width: 4px;
// actual handle
&:after {
- box-shadow: 1px 1px 2px var(--theme-separator-alpha);
+ box-shadow: 1px 1px 2px var(--separator-alpha);
content: '';
top: -$this-handle-size * 0.5 + $this-circle-width * 0.5;
background: $this-handle-color;
@@ -195,8 +195,8 @@ $this-stroke-width: 4px;
border-bottom-right-radius: 20px;
background-color: transparent;
- caret-color: var(--theme-text-color-most-intense);
- color: var(--theme-text-color-most-intense);
+ caret-color: var(--text-color-most-intense);
+ color: var(--text-color-most-intense);
&:focus {
@include inlineEditElevation();
diff --git a/src/app/ui/inline-input/inline-input.component.scss b/src/app/ui/inline-input/inline-input.component.scss
index 45fe05bfe..77d4209e2 100644
--- a/src/app/ui/inline-input/inline-input.component.scss
+++ b/src/app/ui/inline-input/inline-input.component.scss
@@ -39,8 +39,8 @@ input {
transform: translate(-50%, -50%) scaleX(0);
opacity: 0;
//transition: var(--transition-fast);
- background: var(--theme-card-bg);
- color: var(--theme-text-color);
+ background: var(--card-bg);
+ color: var(--text-color);
padding: var(--s-half) var(--s-half);
text-align: center;
font-size: 14px;
diff --git a/src/app/ui/progress-circle/progress-circle.component.scss b/src/app/ui/progress-circle/progress-circle.component.scss
index e25c0d43f..17a2c8f28 100644
--- a/src/app/ui/progress-circle/progress-circle.component.scss
+++ b/src/app/ui/progress-circle/progress-circle.component.scss
@@ -9,7 +9,7 @@
.circle-bg {
fill: none;
- stroke: var(--theme-progress-bg);
+ stroke: var(--progress-bg);
stroke-width: 2.8;
}
diff --git a/src/app/ui/task-title/task-title.component.scss b/src/app/ui/task-title/task-title.component.scss
index f32574122..6a2fe1969 100644
--- a/src/app/ui/task-title/task-title.component.scss
+++ b/src/app/ui/task-title/task-title.component.scss
@@ -21,7 +21,7 @@
border: 1px solid transparent;
transition: var(--transition-leave);
- caret-color: var(--theme-text-color-most-intense);
+ caret-color: var(--text-color-most-intense);
&:focus {
outline: none !important;
@@ -63,7 +63,7 @@
outline: none;
// NOTE: needed to overwrite color for current task
- color: var(--theme-text-color-most-intense);
+ color: var(--text-color-most-intense);
}
}
diff --git a/src/assets/api-test-plugin/index.html b/src/assets/api-test-plugin/index.html
index aa5f31241..21cd820da 100644
--- a/src/assets/api-test-plugin/index.html
+++ b/src/assets/api-test-plugin/index.html
@@ -13,8 +13,8 @@
margin: 0;
padding: 20px;
/* Use injected CSS variables for theming */
- background: var(--theme-bg, transparent);
- color: var(--theme-text-color, #ccc);
+ background: var(--bg, transparent);
+ color: var(--text-color, #ccc);
}
h1 {
@@ -34,7 +34,7 @@
.test-section {
margin-bottom: 20px;
- border-left: 2px solid var(--theme-divider-color, #666);
+ border-left: 2px solid var(--divider-color, #666);
padding-left: 10px;
}
@@ -46,16 +46,16 @@
button {
padding: 6px 12px;
- border: 1px solid var(--theme-divider-color, #666);
- background: var(--theme-card-bg, transparent);
- color: var(--theme-text-color, #ccc);
+ border: 1px solid var(--divider-color, #666);
+ background: var(--card-bg, transparent);
+ color: var(--text-color, #ccc);
font-size: 12px;
font-family: monospace;
cursor: pointer;
}
button:hover {
- background: var(--theme-select-hover-bg, rgba(255, 255, 255, 0.1));
+ background: var(--select-hover-bg, rgba(255, 255, 255, 0.1));
border-color: var(--c-primary, #999);
}
@@ -72,14 +72,14 @@
}
.console {
- background: var(--theme-card-bg, rgba(0, 0, 0, 0.3));
- color: var(--theme-text-color, #ccc);
+ background: var(--card-bg, rgba(0, 0, 0, 0.3));
+ color: var(--text-color, #ccc);
padding: 10px;
font-size: 11px;
max-height: 200px;
overflow-y: auto;
margin-top: 20px;
- border: 1px solid var(--theme-divider-color, #333);
+ border: 1px solid var(--divider-color, #333);
}
.console-entry {
@@ -95,13 +95,13 @@
}
.console-entry.info {
- color: var(--theme-text-color-muted, #999);
+ color: var(--text-color-muted, #999);
}
.api-info {
margin-bottom: 20px;
padding-bottom: 10px;
- border-bottom: 1px solid var(--theme-divider-color, #333);
+ border-bottom: 1px solid var(--divider-color, #333);
}
.api-list {
@@ -113,9 +113,9 @@
.api-item {
padding: 4px 8px;
- border: 1px solid var(--theme-divider-color, #444);
+ border: 1px solid var(--divider-color, #444);
font-size: 11px;
- color: var(--theme-text-color-muted, #999);
+ color: var(--text-color-muted, #999);
}
@@ -526,47 +526,47 @@