sankalp/Modus
1
0 Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style: replace raw colors.css refs with glass tokens from constant.css

Browse Source 
Replace @foreground, @primary, @error, @outline, @shadow, @secondary
and their var() equivalents with semantic glass-* tokens across 22 files.
Colors without glass equivalents (@on-primary, @cyan, etc.) left as-is.
This commit is contained in:
sankalp committed 2026-07-17 22:28:10 +05:45
1 parent aeccbe3089
commit 5e542eed4f
22 files changed
+90 -90
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/styles/controlpanel/dialogs.css
+9 -9
View File
@@ -17,18 +17,18 @@
}
#wifi-dialog-icon {
color: @primary;
color: @glass-accent;
margin-right: 4px;
}
#wifi-dialog-title {
color: @foreground;
color: @glass-text;
font-size: apply(font-base);
font-weight: 500;
}
#wifi-dialog-error {
color: @error;
color: @glass-error;
font-size: apply(font-sm);
font-weight: 500;
/* margin-bottom: 8px; */
@@ -39,7 +39,7 @@
}
#wifi-dialog-password-label {
color: @foreground;
color: @glass-text;
font-size: apply(font-md);
font-weight: 500;
margin-bottom: 4px;
@@ -50,7 +50,7 @@
border: 1px solid @glass-border;
border-radius: apply(radius-xs);
padding: 8px 12px;
color: @foreground;
color: @glass-text;
font-size: apply(font-md);
}
@@ -78,11 +78,11 @@
}
#wifi-dialog-show-password-button image {
color: @foreground;
color: @glass-text;
}
#wifi-dialog-show-password-label {
color: @foreground;
color: @glass-text;
font-size: apply(font-sm);
}
@@ -102,7 +102,7 @@
#wifi-dialog-cancel-button {
background-color: @glass-hover;
border: 1px solid @glass-border;
color: @foreground;
color: @glass-text;
}
#wifi-dialog-cancel-button:hover {
@@ -112,7 +112,7 @@
#wifi-dialog-join-button {
background-color: @glass-accent;
border: 1px solid @glass-accent;
color: @foreground;
color: @glass-text;
}
#wifi-dialog-join-button:hover {
src/styles/controlpanel/expanded-player.css
+8 -8
View File
@@ -14,7 +14,7 @@
#macos-player-title {
font-weight: 600;
font-size: apply(font-lg);
color: @foreground;
color: @glass-text;
margin-bottom: 2px;
}
@@ -50,13 +50,13 @@
}
#macos-seek-bar highlight {
background: @foreground;
background: @glass-text;
border-radius: apply(radius-2xs);
border: none;
}
#macos-seek-bar slider {
background: @foreground;
background: @glass-text;
border: none;
border-radius: 20%;
min-width: 1px;
@@ -93,7 +93,7 @@
opacity: 0.7;
min-height: 28px;
padding: 5px;
color: @foreground;
color: @glass-text;
transition: all apply(transition-fast) ease;
}
@@ -109,7 +109,7 @@
opacity: 0.7;
min-height: 36px;
padding: 7px;
color: @foreground;
color: @glass-text;
transition: all apply(transition-fast) ease;
}
@@ -135,7 +135,7 @@
}
.macos-switcher-dot.active {
background: @foreground;
background: @glass-text;
box-shadow: 0 0 0 1px @glass-border;
}
@@ -155,13 +155,13 @@
}
#expanded-seek-bar highlight {
background: @foreground;
background: @glass-text;
border-radius: apply(radius-2xs);
border: none;
}
#expanded-seek-bar slider {
background: @foreground;
background: @glass-text;
border: none;
border-radius: 20%;
min-width: 1px;
src/styles/controlpanel/networks.css
+2 -2
View File
@@ -38,11 +38,11 @@
#wifi-connections #device-icon.connected {
background-color: @glass-accent;
color: @foreground;
color: @glass-text;
}
#wifi-network-name {
color: @foreground;
color: @glass-text;
font-size: apply(font-base);
font-weight: 500;
}
src/styles/controlpanel/per_app_volume.css
+2 -2
View File
@@ -22,7 +22,7 @@
.app-name {
font-size: apply(font-md);
font-weight: 500;
color: @foreground;
color: @glass-text;
margin-bottom: 5px;
}
@@ -73,5 +73,5 @@
padding-left: 5px;
margin-top: -2px;
font-weight: bold;
color: @foreground;
color: @glass-text;
}
src/styles/controlpanel/player.css
+1 -1
View File
@@ -16,7 +16,7 @@
#player-stack-button.active {
border-radius: apply(radius-xs);
background-color: @foreground;
background-color: @glass-text;
}
#outer-player-box {
src/styles/controlpanel/quicksettings.css
+2 -2
View File
@@ -7,7 +7,7 @@
}
.icon {
background-color: @primary;
background-color: @glass-accent;
font-size: 15px;
padding: 20px 20px;
}
@@ -44,7 +44,7 @@
}
#toggle-button slider {
background-color: @foreground;
background-color: @glass-text;
border-radius: apply(radius-full);
min-width: 16px;
min-height: 16px;
src/styles/notification/center_expanded.css
+2 -2
View File
@@ -8,7 +8,7 @@
}
#notification-group-title {
color: @foreground;
color: @glass-text;
font-weight: bold;
font-size: apply(font-base);
}
@@ -40,7 +40,7 @@
#notification-close-all:hover {
background-color: @glass-error;
color: @foreground;
color: @glass-text;
border-color: @glass-error;
}
src/styles/notification/notification_buttons.css
+4 -4
View File
@@ -34,11 +34,11 @@
}
#notification-action-buttons button:active {
background-color: var(--primary);
background-color: @glass-accent;
}
#notification-action-buttons button:active #button-label {
color: var(--shadow);
color: @glass-overlay-dark;
}
.mac-options-button {
@@ -77,8 +77,8 @@ menu.mac-context-menu {
}
.mac-context-menu menuitem:hover {
background-color: var(--primary);
color: var(--shadow);
background-color: @glass-accent;
color: @glass-overlay-dark;
}
.mac-header-pill {
src/styles/notification/notification_close.css
+1 -1
View File
@@ -20,5 +20,5 @@
}
#notif-close-button:active #notif-close-label {
color: var(--shadow);
color: @glass-overlay-dark;
}
src/styles/notification/notification_content.css
+1 -1
View File
@@ -18,7 +18,7 @@
}
#notification-app-name {
color: var(--outline);
color: @glass-border;
font-weight: bold;
}
src/styles/widgets/about.css
+1 -1
View File
@@ -31,5 +31,5 @@
font-size: apply(font-sm);
margin: 0px;
font-weight: 400;
color: @foreground;
color: @glass-text;
}
src/styles/widgets/desktop-widgets.css
+14 -14
View File
@@ -45,15 +45,15 @@
/* Weather Condition Gradients */
.weather-clear {
background: linear-gradient(135deg, @primary 0%, @cyan 100%);
background: linear-gradient(135deg, @glass-accent 0%, @cyan 100%);
}
.weather-mostly-clear {
background: linear-gradient(135deg, @primary 0%, @primary 100%);
background: linear-gradient(135deg, @glass-accent 0%, @glass-accent 100%);
}
.weather-partly-cloudy {
background: linear-gradient(135deg, @outline 0%, #bac8e0 100%);
background: linear-gradient(135deg, @glass-border 0%, #bac8e0 100%);
}
.weather-overcast {
@@ -61,7 +61,7 @@
}
.weather-fog {
background: linear-gradient(135deg, @outline 0%, @foreground 100%);
background: linear-gradient(135deg, @glass-border 0%, @glass-text 100%);
}
.weather-light-rain {
@@ -78,11 +78,11 @@
.weather-snow,
.weather-heavy-snow {
background: linear-gradient(135deg, @secondary 0%, @cyan 100%);
background: linear-gradient(135deg, @glass-success 0%, @cyan 100%);
}
.weather-storm {
background: linear-gradient(135deg, @background 0%, @surface-bright 50%, @outline 100%);
background: linear-gradient(135deg, @background 0%, @surface-bright 50%, @glass-border 100%);
}
/* Calendar Widget */
@@ -102,7 +102,7 @@
#calendar-month {
font-size: apply(font-lg);
font-weight: 600;
color: @primary;
color: @glass-accent;
margin-bottom: 6px;
}
@@ -113,7 +113,7 @@
#calendar-day-header {
font-size: apply(font-sm);
font-weight: 600;
color: @foreground;
color: @glass-text;
min-width: 18px;
min-height: 10px;
}
@@ -130,7 +130,7 @@
font-size: apply(font-sm);
margin: 1.4px 0px 1.4px 0px;
font-weight: 500;
color: @foreground;
color: @glass-text;
min-width: 18px;
min-height: 10px;
}
@@ -147,7 +147,7 @@
font-size: apply(font-sm);
font-weight: 700;
color: @on-primary;
background-color: @primary;
background-color: @glass-accent;
border-radius: apply(radius-full);
min-width: 18px;
min-height: 16px;
@@ -170,7 +170,7 @@
#day label,
#month label {
color: var(--foreground);
color: @glass-text;
padding: 5px;
margin-top: 10px;
font-size: 30px;
@@ -187,7 +187,7 @@
}
#day label {
color: alpha(@primary, 0.9);
color: alpha(@glass-accent, 0.9);
}
#date-container {
@@ -216,7 +216,7 @@
#progress {
background-color: transparent;
border: solid 8px @primary;
border: solid 8px @glass-accent;
}
@@ -231,7 +231,7 @@
#info-value {
font-size: apply(font-sm);
font-weight: 600;
color: @foreground;
color: @glass-text;
}
#info-container {
src/styles/widgets/dropdown.css
+1 -1
View File
@@ -33,7 +33,7 @@
#dropdown-option-label {
font-size: apply(font-md);
margin: 0px;
color: @foreground;
color: @glass-text;
font-weight: 400;
}
src/styles/widgets/pomodoro.css
+9 -9
View File
@@ -15,7 +15,7 @@
#pomodoro-time {
font-size: 38px;
font-weight: 800;
color: @foreground;
color: @glass-text;
font-family: "SF Pro Rounded";
}
@@ -29,15 +29,15 @@
#pomodoro-title {
font-size: 14px;
font-weight: 700;
color: @foreground;
color: @glass-text;
font-family: "SF Pro Rounded";
}
/* Base progress bar color */
#pomodoro-progress {
background-color: transparent;
color: alpha(@primary, 0.3);
border-color: @primary;
color: alpha(@glass-accent, 0.3);
border-color: @glass-accent;
}
/* Short break color */
@@ -50,8 +50,8 @@
/* Long break color */
#pomodoro-progress-long {
background-color: transparent;
color: alpha(@error, 0.3);
border-color: @error;
color: alpha(@glass-error, 0.3);
border-color: @glass-error;
}
#pomodoro-phase-btn {
@@ -69,12 +69,12 @@
}
#pomodoro-phase-btn.active {
background-color: @primary;
background-color: @glass-accent;
color: white;
}
#pomodoro-start-btn {
background-color: @primary;
background-color: @glass-accent;
color: white;
border-radius: apply(radius-sm);
padding: 6px 20px;
@@ -83,7 +83,7 @@
}
#pomodoro-start-btn:hover {
background-color: alpha(@primary, 0.8);
background-color: alpha(@glass-accent, 0.8);
}
#pomodoro-reset-btn, #pomodoro-secondary-btn {
src/styles/widgets/todo.css
+13 -13
View File
@@ -21,7 +21,7 @@
#todo-title {
font-size: 16px;
font-weight: 700;
color: @foreground;
color: @glass-text;
font-family: "SF Pro Rounded";
}
@@ -41,7 +41,7 @@
#new-todo-entry {
background: transparent;
border: none;
color: @foreground;
color: @glass-text;
font-size: 13px;
font-family: "SF Pro Rounded";
min-height: 24px;
@@ -88,8 +88,8 @@
/* === Progress Ring === */
#todo-progress-ring {
background-color: transparent;
color: alpha(@foreground, 0.15);
border-color: @foreground;
color: alpha(@glass-text, 0.15);
border-color: @glass-text;
}
/* === Checkbox === */
@@ -111,7 +111,7 @@
#todo-text {
font-size: 14px;
font-weight: 500;
color: @foreground;
color: @glass-text;
font-family: "SF Pro Rounded";
}
@@ -134,7 +134,7 @@
}
#todo-options-btn:hover {
color: @foreground;
color: @glass-text;
background-color: @glass-hover;
border-radius: apply(radius-sm);
}
@@ -149,7 +149,7 @@
}
#clear-completed-button:hover {
color: @foreground;
color: @glass-text;
}
#todo-footer {
@@ -176,7 +176,7 @@
#todo-opt-title {
font-size: 14px;
font-weight: 700;
color: @foreground;
color: @glass-text;
font-family: "SF Pro Rounded";
}
@@ -202,8 +202,8 @@
}
#todo-color-swatch.selected {
border-color: @foreground;
box-shadow: 0 0 0 2px alpha(@foreground, 0.2);
border-color: @glass-text;
box-shadow: 0 0 0 2px alpha(@glass-text, 0.2);
}
/* === Deadline Pill === */
@@ -215,7 +215,7 @@
#todo-deadline-value {
font-size: 12px;
color: @foreground;
color: @glass-text;
font-family: "SF Pro Rounded";
min-width: 70px;
}
@@ -244,7 +244,7 @@
#todo-spin-value {
font-size: 12px;
color: @foreground;
color: @glass-text;
font-family: "SF Pro Rounded";
}
@@ -254,7 +254,7 @@
border-radius: apply(radius-full);
padding: 6px 12px;
font-size: 11px;
color: @foreground;
color: @glass-text;
font-family: "SF Pro Rounded";
}
src/styles/window/battery.css
+1 -1
View File
@@ -89,7 +89,7 @@
}
.battery-settings-button label {
font-weight: 500;
color: @foreground;
color: @glass-text;
}
#energy-mode-button:first-child {
margin-top: 0;
src/styles/window/lock.css
+2 -2
View File
@@ -7,14 +7,14 @@
}
#lock-notch-stack {
background-color: @shadow;
background-color: @glass-overlay-dark;
border-radius: 0 0 apply(radius-lg) apply(radius-lg);
min-width: 200px;
min-height: 34px;
}
#lock-notch-corner {
background-color: @shadow;
background-color: @glass-overlay-dark;
border-radius: 0;
min-width: 20px;
min-height: 20px;
src/styles/window/panel.css
+4 -4
View File
@@ -48,7 +48,7 @@
padding: 0 16px;
border-radius: apply(radius-sm);
min-width: 12px;
border: 1px solid @outline;
border: 1px solid @glass-border;
}
#workspaces>button.active {
@@ -56,7 +56,7 @@
}
#workspaces>button.active label {
color: @foreground;
color: @glass-text;
}
#workspaces>button.active:hover {
@@ -92,7 +92,7 @@
}
#panel-notch-stack {
background-color: @shadow;
background-color: @glass-overlay-dark;
border-radius: 0 0 apply(radius-lg) apply(radius-lg);
min-width: 200px;
min-height: 34px;
@@ -100,7 +100,7 @@
#panel-notch-corner {
background-color: @shadow;
background-color: @glass-overlay-dark;
border-radius: 0;
min-width: 20px;
min-height: 20px;
src/styles/window/screencapture.css
+1 -1
View File
@@ -72,7 +72,7 @@
#sc-options-label {
font-size: apply(font-sm);
font-weight: 500;
color: @foreground;
color: @glass-text;
}
#sc-options-arrow {
src/styles/window/settings.css
+3 -3
View File
@@ -54,7 +54,7 @@
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
color: @foreground;
color: @glass-text;
}
#settings-row {
@@ -98,7 +98,7 @@
border-radius: apply(radius-xs);
border: 1px solid @glass-border;
min-width: 200px;
color: @foreground;
color: @glass-text;
}
#settings-entry:focus {
@@ -111,7 +111,7 @@
border-radius: apply(radius-xs);
border: 1px solid @glass-border;
min-width: 150px;
color: @foreground;
color: @glass-text;
}
#settings-combo:hover {
src/styles/window/spotlight.css
+8 -8
View File
@@ -11,7 +11,7 @@
}
.app-search-entry {
color: @foreground;
color: @glass-text;
}
.app-search-header {
@@ -43,7 +43,7 @@
}
.app-title {
color: @foreground;
color: @glass-text;
font-size: apply(font-base);
font-weight: 600;
}
@@ -59,13 +59,13 @@
}
.calc-result-text {
color: @foreground;
color: @glass-text;
font-size: apply(font-lg);
font-weight: bold;
}
.power-menu-name {
color: @foreground;
color: @glass-text;
font-size: apply(font-lg);
font-weight: 600;
}
@@ -96,7 +96,7 @@
}
.emoji-name {
color: var(--foreground);
color: @glass-text;
font-size: 14px;
font-weight: normal;
}
@@ -106,7 +106,7 @@
}
.emoji-no-results-text {
color: darker(var(--foreground));
color: @glass-text-secondary;
font-size: 14px;
font-style: italic;
}
@@ -116,7 +116,7 @@
}
.clipboard-no-results-text {
color: darker(var(--foreground));
color: @glass-text-secondary;
font-size: 14px;
font-style: italic;
}
@@ -142,7 +142,7 @@
}
.clipboard-content {
color: var(--foreground);
color: @glass-text;
font-size: 14px;
font-weight: normal;
margin-left: 1rem;
src/styles/window/switcher.css
+1 -1
View File
@@ -30,7 +30,7 @@
}
#app-switcher-item-label {
color: @foreground;
color: @glass-text;
font-size: 15px;
font-weight: 600;
margin-top: -2px;