From 5a399300e5306fbb93a353bbdfdaabbd67aa28f5 Mon Sep 17 00:00:00 2001 From: Johannes Millan Date: Thu, 3 Jul 2025 11:51:58 +0200 Subject: [PATCH] refactor: simplify css variables --- .../plugin-dev/api-test-plugin/index.html | 50 ++--- .../procrastination-buster/src/App.css | 20 +- .../yesterday-tasks-plugin/index.html | 4 +- src/app/app.component.scss | 4 +- .../global-progress-bar.component.scss | 4 +- .../desktop-panel-buttons.component.ts | 4 +- .../main-header/main-header.component.scss | 14 +- .../mobile-side-panel-menu.component.scss | 2 +- .../play-button/play-button.component.ts | 6 +- .../side-nav-item.component.scss | 6 +- .../core-ui/side-nav/side-nav.component.scss | 2 +- .../core/banner/banner/banner.component.scss | 4 +- .../board-panel/board-panel.component.scss | 12 +- .../repeat-section-type.component.scss | 6 +- .../dialog-idle-split.component.scss | 2 +- .../dialog-idle/dialog-idle.component.scss | 2 +- .../issue-panel/issue-panel.component.scss | 2 +- .../issue-preview-item.component.scss | 4 +- ...sue-provider-setup-overview.component.scss | 2 +- .../dialog-edit-issue-provider.component.scss | 2 +- .../issue-content.component.scss | 2 +- .../caldav-issue-content.component.scss | 6 +- .../github-issue-content.component.scss | 6 +- .../gitlab-issue-content.component.scss | 6 +- .../open-project-issue-content.component.scss | 6 +- .../evaluation-sheet.component.scss | 2 +- .../improvement-banner.component.scss | 6 +- .../features/note/note/note.component.scss | 4 +- .../dialog-schedule-task.component.scss | 10 +- .../planner-calendar-event.component.scss | 4 +- .../planner-repeat-projection.component.scss | 4 +- .../planner-task/planner-task.component.scss | 6 +- .../features/planner/planner.component.scss | 4 +- .../quick-history.component.scss | 4 +- .../create-task-placeholder.component.scss | 4 +- .../schedule-event.component.scss | 32 +-- .../schedule-month.component.scss | 18 +- .../schedule-week.component.scss | 16 +- .../schedule/schedule/schedule.component.scss | 12 +- .../simple-counter-button.component.scss | 4 +- .../tag/tag-edit/tag-edit.component.scss | 4 +- src/app/features/tag/tag/tag.component.scss | 4 +- .../add-task-bar/add-task-bar.component.scss | 26 +-- .../dialog-task-detail-panel.component.scss | 4 +- .../dialog-view-task-reminders.component.scss | 2 +- .../task-attachment-list.component.scss | 14 +- .../task-context-menu-inner.component.scss | 4 +- .../task-detail-item.component.scss | 22 +- .../task-detail-panel.component.scss | 6 +- .../tasks/task-list/task-list.component.scss | 2 +- .../task-summary-table.component.scss | 6 +- .../task-summary-tables.component.scss | 2 +- .../task-hover-controls.component.scss | 4 +- .../features/tasks/task/task.component.scss | 14 +- .../work-view/work-view.component.scss | 4 +- .../worklog-export.component.scss | 6 +- .../features/worklog/worklog.component.scss | 8 +- .../config-page/config-page.component.scss | 10 +- .../daily-summary.component.scss | 12 +- .../project-settings-page.component.scss | 8 +- .../search-page/search-page.component.scss | 2 +- .../tag-settings-page.component.scss | 8 +- .../ui/plugin-side-panel-btns.component.ts | 4 +- .../plugins/util/plugin-iframe.util.spec.ts | 58 +++--- src/app/plugins/util/plugin-iframe.util.ts | 46 ++--- .../better-drawer-container.component.scss | 14 +- .../better-simple-drawer.component.scss | 10 +- .../chip-list-input.component.scss | 2 +- .../dialog-fullscreen-markdown.component.scss | 6 +- .../input-duration-slider.component.scss | 12 +- .../inline-input/inline-input.component.scss | 4 +- .../progress-circle.component.scss | 2 +- .../ui/task-title/task-title.component.scss | 4 +- src/assets/api-test-plugin/index.html | 50 ++--- src/assets/procrastination-buster/index.css | 18 +- src/assets/procrastination-buster/index.html | 18 +- src/assets/yesterday-tasks-plugin/index.html | 4 +- src/styles/_css-variables.scss | 192 ++++++++---------- .../components/_overwrite-material.scss | 6 +- src/styles/components/global-error-alert.scss | 2 +- src/styles/components/issue-table.scss | 2 +- src/styles/components/mentions.scss | 6 +- src/styles/components/planner-shared.scss | 2 +- src/styles/components/scrollbars.scss | 8 +- src/styles/components/shepherd.scss | 16 +- src/styles/components/table.scss | 10 +- src/styles/mixins/_inline-edit-elevation.scss | 8 +- src/styles/mixins/_note-style.scss | 2 +- src/styles/mixins/_theming.scss | 20 +- src/styles/page.scss | 22 +- src/styles/themes.scss | 4 +- .../utilities/_css-migration-helpers.scss | 6 +- 92 files changed, 510 insertions(+), 528 deletions(-) diff --git a/packages/plugin-dev/api-test-plugin/index.html b/packages/plugin-dev/api-test-plugin/index.html index aa5f31241..21cd820da 100644 --- a/packages/plugin-dev/api-test-plugin/index.html +++ b/packages/plugin-dev/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 @@

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 @@

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/src/assets/procrastination-buster/index.css b/src/assets/procrastination-buster/index.css index f014be189..c5208f5b1 100644 --- a/src/assets/procrastination-buster/index.css +++ b/src/assets/procrastination-buster/index.css @@ -10,7 +10,7 @@ body { Roboto, sans-serif; background: transparent; - color: var(--theme-text-color); + color: var(--text-color); } .app { min-height: 100vh; @@ -19,12 +19,12 @@ body { padding: 1rem; } .card { - background: var(--theme-card-bg); + background: var(--card-bg); border-radius: 8px; box-shadow: 0 2px 4px #0000001a; padding: 1rem; text-align: left; - border: 2px solid var(--theme-extra-border-color); + border: 2px solid var(--extra-border-color); } .card-clickable:hover { transition: transform 0.2s; @@ -34,7 +34,7 @@ body { cursor: pointer; } .text-muted { - color: var(--theme-text-color-muted); + color: var(--text-color-muted); } .text-primary { color: var(--c-primary); @@ -155,8 +155,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; @@ -197,15 +197,15 @@ 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; } .sync-icon { font-size: 1.2rem; - color: var(--theme-text-color-muted); + color: var(--text-color-muted); } .action-buttons { display: flex; diff --git a/src/assets/procrastination-buster/index.html b/src/assets/procrastination-buster/index.html index 0cc98af4d..bd6caf3bb 100644 --- a/src/assets/procrastination-buster/index.html +++ b/src/assets/procrastination-buster/index.html @@ -918,7 +918,7 @@ Roboto, sans-serif; background: transparent; - color: var(--theme-text-color); + color: var(--text-color); } .app { min-height: 100vh; @@ -927,12 +927,12 @@ padding: 1rem; } .card { - background: var(--theme-card-bg); + background: var(--card-bg); border-radius: 8px; box-shadow: 0 2px 4px #0000001a; padding: 1rem; text-align: left; - border: 2px solid var(--theme-extra-border-color); + border: 2px solid var(--extra-border-color); } .card-clickable:hover { transition: transform 0.2s; @@ -942,7 +942,7 @@ cursor: pointer; } .text-muted { - color: var(--theme-text-color-muted); + color: var(--text-color-muted); } .text-primary { color: var(--c-primary); @@ -1063,8 +1063,8 @@ 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; @@ -1105,15 +1105,15 @@ } .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; } .sync-icon { font-size: 1.2rem; - color: var(--theme-text-color-muted); + color: var(--text-color-muted); } .action-buttons { display: flex; diff --git a/src/assets/yesterday-tasks-plugin/index.html b/src/assets/yesterday-tasks-plugin/index.html index 206c9ad3a..b681a730e 100644 --- a/src/assets/yesterday-tasks-plugin/index.html +++ b/src/assets/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/styles/_css-variables.scss b/src/styles/_css-variables.scss index 75ddf87a0..e871b1874 100644 --- a/src/styles/_css-variables.scss +++ b/src/styles/_css-variables.scss @@ -70,7 +70,7 @@ --color-warning: #ff9800; --color-danger: #f44336; --success-green: #4fa758; - --yellow: #fff400; + --sun-yellow: #fff400; // ----------------------------- // Dark Theme Elevation Colors @@ -303,11 +303,11 @@ // ----------------------------- // Common Alpha Values // ----------------------------- - --theme-border-alpha: 0.12; - --theme-overlay-alpha: 0.1; - --theme-separator-alpha: 0.3; - --theme-muted-alpha: 0.6; - --theme-intense-alpha: 0.9; + --border-alpha: 0.12; + --overlay-alpha: 0.1; + --separator-alpha: 0.3; + --muted-alpha: 0.6; + --intense-alpha: 0.9; } // =============================== @@ -319,42 +319,42 @@ // ----------------------------- body { // Background colors - --theme-bg: #f8f8f7; - --theme-bg-darker: rgb(235, 235, 235); - --theme-bg-drag-col: rgb(242, 242, 242); - --theme-bg-slightly-lighter: var(--theme-bg); - --theme-bg-lighter: var(--theme-bg); - --theme-bg-lightest: var(--theme-bg); - --theme-bg-super-light: var(--theme-bg); - --theme-card-bg: #ffffff; - --theme-sidebar-bg: var(--theme-bg); + --bg: #f8f8f7; + --bg-darker: rgb(235, 235, 235); + --bg-drag-col: rgb(242, 242, 242); + --bg-slightly-lighter: var(--bg); + --bg-lighter: var(--bg); + --bg-lightest: var(--bg); + --bg-super-light: var(--bg); + --card-bg: #ffffff; + --sidebar-bg: var(--bg); // Text colors - --theme-text-color: rgb(44, 44, 44); - --theme-text-color-less-intense: rgba(44, 44, 44, 0.9); - --theme-text-color-muted: rgba(44, 44, 44, 0.6); - --theme-text-color-more-intense: var(--theme-text-color); - --theme-text-color-most-intense: rgb(0, 0, 0); + --text-color: rgb(44, 44, 44); + --text-color-less-intense: rgba(44, 44, 44, 0.9); + --text-color-muted: rgba(44, 44, 44, 0.6); + --text-color-more-intense: var(--text-color); + --text-color-most-intense: rgb(0, 0, 0); // Selected task - --theme-selected-task-bg-color: #fff; + --selected-task-bg-color: #fff; // Borders and separators - --theme-extra-border-color: #dddddd; - --theme-separator-color: #d0d0d0; - --theme-divider-color: rgba(0, 0, 0, 0.12); + --extra-border-color: #dddddd; + --separator-color: #d0d0d0; + --divider-color: rgba(0, 0, 0, 0.12); // Backdrop --c-backdrop: var(--color-overlay-dark-60); // Note colors --standard-note-bg: #ffffff; - --standard-note-fg: var(--theme-text-color); + --standard-note-fg: var(--text-color); --standard-note-bg-hovered: var(--standard-note-bg); // Task colors --task-c-bg: #fff; - --task-c-selected-bg: var(--theme-selected-task-bg-color); + --task-c-selected-bg: var(--selected-task-bg-color); --sub-task-c-bg: var(--task-c-bg); --sub-task-c-bg-done: var(--task-c-bg); --task-c-bg-done: var(--task-c-bg); @@ -367,63 +367,54 @@ body { --task-selected-shadow: var(--whiteframe-shadow-3dp); // Scrollbar colors - --theme-scrollbar-thumb: #888; - --theme-scrollbar-thumb-hover: #555; - --theme-scrollbar-track: #f1f1f1; + --scrollbar-thumb: #888; + --scrollbar-thumb-hover: #555; + --scrollbar-track: #f1f1f1; // Chip colors - --theme-chip-outline-color: rgba(125, 125, 125, 0.4); + --chip-outline-color: rgba(125, 125, 125, 0.4); // Progress circle - --theme-progress-bg: rgba(127, 127, 127, 0.2); + --progress-bg: rgba(127, 127, 127, 0.2); // Close button - --theme-close-btn-bg: var(--theme-bg-darker); - --theme-close-btn-border: var(--theme-divider-color); + --close-btn-bg: var(--bg-darker); + --close-btn-border: var(--divider-color); // Banner - --theme-banner-bg: var(--theme-card-bg); + --banner-bg: var(--card-bg); // Improvement banner - --theme-improvement-text: rgba(44, 44, 44, 1); - --theme-improvement-border: var(--color-overlay-light-33); - --theme-improvement-button-text: rgba(44, 44, 44, 1); + --improvement-text: rgba(44, 44, 44, 1); + --improvement-border: var(--color-overlay-light-33); + --improvement-button-text: rgba(44, 44, 44, 1); // Select/Options - --theme-select-hover-bg: var(--color-overlay-dark-10); - --theme-options-border-color: var(--color-overlay-dark-10); + --select-hover-bg: var(--color-overlay-dark-10); + --options-border-color: var(--color-overlay-dark-10); // Attachments - --theme-attachment-bg: var(--theme-card-bg); - --theme-attachment-border: var(--theme-extra-border-color); - --theme-attachment-control-bg: var(--color-overlay-light-40); - --theme-attachment-control-border: var(--color-overlay-light-50); - --theme-attachment-control-hover-bg: var(--color-overlay-light-90); + --attachment-bg: var(--card-bg); + --attachment-border: var(--extra-border-color); + --attachment-control-bg: var(--color-overlay-light-40); + --attachment-control-border: var(--color-overlay-light-50); + --attachment-control-hover-bg: var(--color-overlay-light-90); // Hover controls - --theme-hover-controls-border: 1px solid; - --theme-hover-controls-border-opacity: 0.5; + --hover-controls-border: 1px solid; + --hover-controls-border-opacity: 0.5; // Task detail item - --theme-task-detail-value-color: rgba( + --task-detail-value-color: rgba( var(--palette-foreground-secondary-text), var(--palette-foreground-secondary-text-alpha, 1) ); // Grid colors - --theme-grid-color: #dadce0; - - // Date-time picker colors - --owl-text-color-strong: var(--color-overlay-dark-90); - --owl-text-color: rgba(0, 0, 0, 0.75); - --owl-text-color-less-intense: var(--color-overlay-dark-50); - --owl-text-color-muted: rgba(0, 0, 0, 0.15); - --owl-light-selected-bg: rgb(238, 238, 238); - --owl-divider-color: rgba(0, 0, 0, 0.12); - --owl-inp-bg-color: rgba(0, 0, 0, 0.04); + --grid-color: #dadce0; // Special colors overrides for light theme - --yellow: #ffc107; + --sun-yellow: #ffc107; // Transition duration overrides for light theme --transition-duration-s: 180ms; @@ -436,29 +427,29 @@ body { // ----------------------------- body.isDarkTheme { // Background colors - --theme-bg: var(--dark0); - --theme-bg-darker: var(--dark0); - --theme-bg-slightly-lighter: var(--dark4); - --theme-bg-lighter: var(--dark12); - --theme-bg-lightest: var(--dark24); - --theme-bg-super-light: #616161; - --theme-card-bg: var(--dark2); - --theme-sidebar-bg: var(--dark8); + --bg: var(--dark0); + --bg-darker: var(--dark0); + --bg-slightly-lighter: var(--dark4); + --bg-lighter: var(--dark12); + --bg-lightest: var(--dark24); + --bg-super-light: #616161; + --card-bg: var(--dark2); + --sidebar-bg: var(--dark8); // Text colors - --theme-text-color: rgb(235, 235, 235); - --theme-text-color-less-intense: rgba(235, 235, 235, 0.9); - --theme-text-color-muted: rgba(235, 235, 235, 0.6); - --theme-text-color-more-intense: rgb(245, 245, 245); - --theme-text-color-most-intense: rgb(255, 255, 255); + --text-color: rgb(235, 235, 235); + --text-color-less-intense: rgba(235, 235, 235, 0.9); + --text-color-muted: rgba(235, 235, 235, 0.6); + --text-color-more-intense: rgb(245, 245, 245); + --text-color-most-intense: rgb(255, 255, 255); // Selected task - --theme-selected-task-bg-color: var(--dark6); + --selected-task-bg-color: var(--dark6); // Borders and separators - --theme-extra-border-color: rgba(255, 255, 255, 0.12); - --theme-separator-color: rgba(255, 255, 255, 0.1); - --theme-divider-color: rgba(255, 255, 255, 0.12); + --extra-border-color: rgba(255, 255, 255, 0.12); + --separator-color: rgba(255, 255, 255, 0.1); + --divider-color: rgba(255, 255, 255, 0.12); // Backdrop --c-backdrop: var(--color-overlay-dark-60); @@ -483,52 +474,43 @@ body.isDarkTheme { --task-selected-shadow: var(--whiteframe-shadow-4dp); // Scrollbar colors - --theme-scrollbar-thumb: #333; - --theme-scrollbar-thumb-hover: #444; - --theme-scrollbar-track: #222; + --scrollbar-thumb: #333; + --scrollbar-thumb-hover: #444; + --scrollbar-track: #222; // Grid colors - --theme-grid-color: var(--color-overlay-light-10); - - // Date-time picker colors - --owl-text-color-strong: var(--color-overlay-light-90); - --owl-text-color: rgba(255, 255, 255, 0.75); - --owl-text-color-less-intense: var(--color-overlay-light-50); - --owl-text-color-muted: rgba(255, 255, 255, 0.15); - --owl-light-selected-bg: rgba(49, 49, 49, 1); - --owl-divider-color: rgba(255, 255, 255, 0.12); - --owl-inp-bg-color: rgba(255, 255, 255, 0.08); + --grid-color: var(--color-overlay-light-10); // Chip colors - --theme-chip-outline-color: rgba(125, 125, 125, 0.4); + --chip-outline-color: rgba(125, 125, 125, 0.4); // Close button - --theme-close-btn-bg: var(--theme-bg-lightest); - --theme-close-btn-border: var(--theme-extra-border-color); + --close-btn-bg: var(--bg-lightest); + --close-btn-border: var(--extra-border-color); // Banner - --theme-banner-bg: var(--theme-bg-lightest); + --banner-bg: var(--bg-lightest); // Improvement banner - --theme-improvement-text: var(--theme-text-color-most-intense); - --theme-improvement-border: var(--color-overlay-light-33); - --theme-improvement-button-text: white; + --improvement-text: var(--text-color-most-intense); + --improvement-border: var(--color-overlay-light-33); + --improvement-button-text: white; // Select/Options - --theme-select-hover-bg: var(--color-overlay-light-10); - --theme-options-border-color: var(--color-overlay-light-10); + --select-hover-bg: var(--color-overlay-light-10); + --options-border-color: var(--color-overlay-light-10); // Attachments - --theme-attachment-bg: var(--theme-bg-lighter); - --theme-attachment-border: transparent; - --theme-attachment-control-bg: var(--color-overlay-dark-40); - --theme-attachment-control-border: var(--color-overlay-dark-50); - --theme-attachment-control-hover-bg: var(--color-overlay-dark-90); + --attachment-bg: var(--bg-lighter); + --attachment-border: transparent; + --attachment-control-bg: var(--color-overlay-dark-40); + --attachment-control-border: var(--color-overlay-dark-50); + --attachment-control-hover-bg: var(--color-overlay-dark-90); // Hover controls - --theme-hover-controls-border: none; - --theme-hover-controls-border-opacity: 0; + --hover-controls-border: none; + --hover-controls-border-opacity: 0; // Task detail item - --theme-task-detail-value-color: rgba(255, 255, 255, 0.7); + --task-detail-value-color: rgba(255, 255, 255, 0.7); } diff --git a/src/styles/components/_overwrite-material.scss b/src/styles/components/_overwrite-material.scss index d05b53a5b..0bed83289 100644 --- a/src/styles/components/_overwrite-material.scss +++ b/src/styles/components/_overwrite-material.scss @@ -9,7 +9,7 @@ --mdc-chip-container-shape-radius: 4px !important; --mdc-chip-elevated-container-color: transparent !important; //--mdc-chip-outline-color: var(--mdc-chip-outline-color, var(--mat-sys-outline)) !important; - --mdc-chip-outline-color: var(--theme-chip-outline-color) !important; + --mdc-chip-outline-color: var(--chip-outline-color) !important; --mdc-chip-outline-width: 1px !important; } @@ -182,7 +182,7 @@ mat-icon.mat-icon[svgicon] { cursor: grabbing !important; } - background: var(--theme-bg-lightest) !important; + background: var(--bg-lightest) !important; } .cdk-drag-placeholder { @@ -218,7 +218,7 @@ mat-icon.mat-icon[svgicon] { } task.cdk-drag-preview .box { - background: var(--theme-bg-lightest) !important; + background: var(--bg-lightest) !important; } // MAT TOOLTIP diff --git a/src/styles/components/global-error-alert.scss b/src/styles/components/global-error-alert.scss index fa6619e59..a36c1a916 100644 --- a/src/styles/components/global-error-alert.scss +++ b/src/styles/components/global-error-alert.scss @@ -8,7 +8,7 @@ z-index: 9999999999999; text-align: center; padding: 20px; - background: var(--theme-card-bg); + background: var(--card-bg); max-width: 90%; overflow: auto; user-select: auto; diff --git a/src/styles/components/issue-table.scss b/src/styles/components/issue-table.scss index df39c3e14..a2a40effa 100644 --- a/src/styles/components/issue-table.scss +++ b/src/styles/components/issue-table.scss @@ -5,7 +5,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/styles/components/mentions.scss b/src/styles/components/mentions.scss index 61d5c0543..539d02f84 100644 --- a/src/styles/components/mentions.scss +++ b/src/styles/components/mentions.scss @@ -1,14 +1,14 @@ .mention-menu { box-shadow: var(--whiteframe-shadow-4dp); - background: var(--theme-bg-lightest) !important; + background: var(--bg-lightest) !important; } .mention-item { - color: var(--theme-text-color) !important; + color: var(--text-color) !important; } .mention-active > a { background: var(--c-primary) !important; - color: var(--theme-text-color-most-intense) !important; + color: var(--text-color-most-intense) !important; } diff --git a/src/styles/components/planner-shared.scss b/src/styles/components/planner-shared.scss index 42b704512..103412fa2 100644 --- a/src/styles/components/planner-shared.scss +++ b/src/styles/components/planner-shared.scss @@ -15,7 +15,7 @@ @include mq(xs) { font-size: var(--planner-font-size); } - color: var(--theme-text-color-muted); + color: var(--text-color-muted); mat-icon { vertical-align: middle; diff --git a/src/styles/components/scrollbars.scss b/src/styles/components/scrollbars.scss index cf0dfefe2..3fc12bcc8 100644 --- a/src/styles/components/scrollbars.scss +++ b/src/styles/components/scrollbars.scss @@ -1,7 +1,7 @@ @import '../mixins/media-queries'; @mixin _scrollBarStyles() { - scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track); + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); scrollbar-width: 4px; ::-webkit-scrollbar { @@ -11,19 +11,19 @@ /* Track */ ::-webkit-scrollbar-track { - background: var(--theme-scrollbar-track); + background: var(--scrollbar-track); border-radius: 4px; } /* Handle */ ::-webkit-scrollbar-thumb { - background: var(--theme-scrollbar-thumb); + background: var(--scrollbar-thumb); border-radius: 16px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { - background: var(--theme-scrollbar-thumb-hover); + background: var(--scrollbar-thumb-hover); } } diff --git a/src/styles/components/shepherd.scss b/src/styles/components/shepherd.scss index ce1cb4266..4203dcb8e 100644 --- a/src/styles/components/shepherd.scss +++ b/src/styles/components/shepherd.scss @@ -13,13 +13,13 @@ } .shepherd-text kbd { - background-color: var(--theme-bg-lightest); + background-color: var(--bg-lightest); border-radius: 3px; - border: 1px solid var(--theme-extra-border-color); + border: 1px solid var(--extra-border-color); box-shadow: 0 1px 1px var(--color-overlay-dark-20), 0 2px 0 0 var(--color-overlay-light-70) inset; - color: var(--theme-text-color); + color: var(--text-color); display: inline-block; font-size: 0.85em; font-weight: 700; @@ -73,7 +73,7 @@ font-size: 16px; line-height: 1.5; - color: var(--theme-text-color); + color: var(--text-color); } .shepherd-element { @@ -89,7 +89,7 @@ visibility: hidden; width: 100%; - background: var(--theme-bg-lightest) !important; + background: var(--bg-lightest) !important; .material-icons { vertical-align: middle; @@ -100,7 +100,7 @@ content: ''; transform: rotate(45deg); - background: var(--theme-bg-lightest) !important; + background: var(--bg-lightest) !important; } .shepherd-footer button + button { @@ -128,7 +128,7 @@ } .shepherd-has-title .shepherd-content .shepherd-header { - background: var(--theme-bg-lighter); + background: var(--bg-lighter); padding: 1em; } @@ -186,7 +186,7 @@ .shepherd-element.shepherd-has-title[data-popper-placement^='bottom'] > .shepherd-arrow:before { - background-color: var(--theme-bg-lighter); + background-color: var(--bg-lighter); } .shepherd-target-click-disabled.shepherd-enabled.shepherd-target, diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss index 18ca8bf73..efac39f35 100644 --- a/src/styles/components/table.scss +++ b/src/styles/components/table.scss @@ -45,7 +45,7 @@ div.material-table { box-shadow: $this-table-shadow; font-size: 13px; white-space: nowrap; - background-color: var(--theme-card-bg); + background-color: var(--card-bg); &, * { @@ -64,9 +64,9 @@ div.material-table { } .isDarkTheme & { - background: var(--theme-card-bg); + background: var(--card-bg); // NOTE: because we're on a lighter background - color: var(--theme-text-color); + color: var(--text-color); } .isDarkTheme &._no-elevation { @@ -103,11 +103,11 @@ div.material-table { text-align: left; .isLightTheme & { - border-color: var(--theme-extra-border-color); + border-color: var(--extra-border-color); } .isDarkTheme & { - border-color: var(--theme-extra-border-color); + border-color: var(--extra-border-color); } &:first-of-type { diff --git a/src/styles/mixins/_inline-edit-elevation.scss b/src/styles/mixins/_inline-edit-elevation.scss index 35ce8ea12..7b325e457 100644 --- a/src/styles/mixins/_inline-edit-elevation.scss +++ b/src/styles/mixins/_inline-edit-elevation.scss @@ -1,15 +1,15 @@ //$shadow-edit-on-click-light: 0 0 4px 0 var(--color-overlay-dark-80), var(--whiteframe-shadow-14dp); -//$shadow-edit-on-click-dark: 0 0 4px 0 var(--theme-bg)-lightest, var(--whiteframe-shadow-14dp); +//$shadow-edit-on-click-dark: 0 0 4px 0 var(--bg)-lightest, var(--whiteframe-shadow-14dp); $shadow-edit-on-click-dark: var(--whiteframe-shadow-15dp); $shadow-edit-on-click-light: var(--whiteframe-shadow-7dp); @mixin inlineEditElevation { border-radius: var(--card-border-radius); - background: var(--theme-card-bg); + background: var(--card-bg); box-shadow: var(--whiteframe-shadow-7dp); - color: var(--theme-text-color-most-intense); + color: var(--text-color-most-intense); border: 1px solid var(--c-accent); - //border: 1px solid var(--theme-extra-border-color); + //border: 1px solid var(--extra-border-color); @include darkTheme() { background: var(--dark24); diff --git a/src/styles/mixins/_note-style.scss b/src/styles/mixins/_note-style.scss index b01dfa6cb..982e63f0d 100644 --- a/src/styles/mixins/_note-style.scss +++ b/src/styles/mixins/_note-style.scss @@ -5,7 +5,7 @@ box-shadow: var(--shadow-card-shadow); transition: var(--transition-fast); transition-property: transform, box-shadow; - //border: 1px solid var(--theme-grid-color); + //border: 1px solid var(--grid-color); background: var(--standard-note-bg); color: var(--standard-note-fg); diff --git a/src/styles/mixins/_theming.scss b/src/styles/mixins/_theming.scss index 795d9849f..5f9aa33f9 100644 --- a/src/styles/mixins/_theming.scss +++ b/src/styles/mixins/_theming.scss @@ -41,42 +41,42 @@ } @mixin standardThemeTextColor { - color: var(--theme-text-color); + color: var(--text-color); } @mixin standardThemeTextColorLessIntense { - color: var(--theme-text-color-less-intense); + color: var(--text-color-less-intense); } @mixin standardThemeTextColorMostIntense { - color: var(--theme-text-color-most-intense); + color: var(--text-color-most-intense); } @mixin extraBorder($sideSuffix: '') { - #{'border'+$sideSuffix}: 1px solid var(--theme-extra-border-color); + #{'border'+$sideSuffix}: 1px solid var(--extra-border-color); } // e.g. cards and tasks @mixin layerTextAndBgHigher { - color: var(--theme-text-color-less-intense); - background-color: var(--theme-bg-lighter); + color: var(--text-color-less-intense); + background-color: var(--bg-lighter); } // e.g. nested cards / tabs etc @mixin layerTextAndBgHighest { // NOTE: needs to be more intense than light color, because we have a lighter background - color: var(--theme-text-color-more-intense); - background-color: var(--theme-bg-lightest); + color: var(--text-color-more-intense); + background-color: var(--bg-lightest); } @mixin dividerBorderColor($border-width: 0 0 1px 0, $is-global: false) { border-style: solid; border-width: $border-width; - border-color: var(--theme-divider-color); + border-color: var(--divider-color); } @mixin flatBox($is-global: false) { border: 1px, - $is-global solid var(--theme-divider-color); + $is-global solid var(--divider-color); } diff --git a/src/styles/page.scss b/src/styles/page.scss index 6d9cc33b8..8a0104a37 100644 --- a/src/styles/page.scss +++ b/src/styles/page.scss @@ -57,11 +57,11 @@ body { } &.isLightTheme { - color: var(--theme-text-color); - background: var(--theme-bg); + color: var(--text-color); + background: var(--bg); &.isDisableBackgroundGradient { - background: var(--theme-bg); + background: var(--bg); //&:before { // display: block; // opacity: .3; @@ -75,17 +75,17 @@ body { 180deg, mat-css-vars.mat-css-color(100, 1) 0%, mat-css-vars.mat-css-color(50, 1) 140px, - var(--theme-bg) 100% + var(--bg) 100% ); } } &.isDarkTheme { - color: var(--theme-text-color); - background: var(--theme-bg); + color: var(--text-color); + background: var(--bg); &.isDisableBackgroundGradient { - background: var(--theme-bg); + background: var(--bg); } &:before { @@ -176,12 +176,12 @@ img { * { --scrollbar-width: thin; --scrollbar-width-legacy: 4px; - --scrollbar-color-thumb: var(--theme-scrollbar-thumb); - --scrollbar-color-track: var(--theme-scrollbar-track); + --scrollbar-color-thumb: var(--scrollbar-thumb); + --scrollbar-color-track: var(--scrollbar-track); .isDarkTheme & { - --scrollbar-color-thumb: var(--theme-scrollbar-thumb); - --scrollbar-color-track: var(--theme-scrollbar-track); + --scrollbar-color-thumb: var(--scrollbar-thumb); + --scrollbar-color-track: var(--scrollbar-track); } /* Modern browsers with `scrollbar-*` support */ diff --git a/src/styles/themes.scss b/src/styles/themes.scss index 0d8ae5381..e91fa4d9f 100644 --- a/src/styles/themes.scss +++ b/src/styles/themes.scss @@ -8,10 +8,10 @@ @include mat-css-vars.init-material-css-vars(); .bg-card { - background: var(--theme-card-bg); + background: var(--card-bg); .isDarkTheme & { - background: var(--theme-card-bg); + background: var(--card-bg); } } diff --git a/src/styles/utilities/_css-migration-helpers.scss b/src/styles/utilities/_css-migration-helpers.scss index d5cc1aceb..fcbc48ffa 100644 --- a/src/styles/utilities/_css-migration-helpers.scss +++ b/src/styles/utilities/_css-migration-helpers.scss @@ -27,7 +27,7 @@ } // Helper to create CSS variable with fallback -// Usage: @include css-var(color, --theme-text-color, var(--theme-text-color-most-intense)); +// Usage: @include css-var(color, --text-color, var(--text-color-most-intense)); @mixin css-var($property, $var, $fallback: null) { @if $fallback { #{$property}: var(#{$var}, #{$fallback}); @@ -37,7 +37,7 @@ } // Helper to define CSS variables with light/dark theme support -// Usage: @include theme-var(--my-color, var(--theme-text-color-most-intense), var(--theme-card-bg)); +// Usage: @include theme-var(--my-color, var(--text-color-most-intense), var(--card-bg)); @mixin theme-var($var-name, $light-value, $dark-value) { body { #{$var-name}: #{$light-value}; @@ -49,7 +49,7 @@ } // Helper to convert RGBA with opacity to CSS variables -// Usage: @include rgba-var(border-color, --theme-text-color-rgb, 0.5); +// Usage: @include rgba-var(border-color, --text-color-rgb, 0.5); @mixin rgba-var($property, $rgb-var, $opacity) { #{$property}: rgba(var(#{$rgb-var}), #{$opacity}); }