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

chore(src/styles): migrate to glass surface color tokens

Browse Source 
Remove legacy color definition blocks and replace with new glass-surface, glass-panel, and interactive state tokens. Update all component styles to reference new variables.
This commit is contained in:
sankalp committed 2026-07-14 21:42:46 +05:45
1 parent 50640d33aa
commit 21e8a3e7da
10 files changed
+158 -144
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/styles/constant.css
+74 -53
View File
@@ -17,57 +17,78 @@
@define font-base 14px;
@define font-lg 16px;
@define-color bg-hover alpha(@foreground, 0.1);
@define-color bg-active alpha(@foreground, 0.2);
@define-color border-subtle alpha(@outline, 0.3);
@define-color border-strong alpha(@outline, 0.4);
@define-color shadow-main alpha(@shadow, 0.3);
@define-color text-dim alpha(@foreground, 0.6);
@define-color text-muted alpha(@foreground, 0.4);
@define-color bg-a07 alpha(@background, 0.07);
@define-color bg-a50 alpha(@background, 0.5);
@define-color bg-a08 alpha(@background, 0.08);
@define-color bg-a70 alpha(@background, 0.7);
@define-color bg-a75 alpha(@background, 0.75);
@define-color bg-a80 alpha(@background, 0.8);
@define-color bg-a85 alpha(@background, 0.85);
@define-color bg-a90 alpha(@background, 0.9);
@define-color bg-a95 alpha(@background, 0.95);
@define-color error-a20 alpha(@error, 0.2);
@define-color error-a40 alpha(@error, 0.4);
@define-color error-a70 alpha(@error, 0.7);
@define-color fg-a03 alpha(@foreground, 0.03);
@define-color fg-a05 alpha(@foreground, 0.05);
@define-color fg-a06 alpha(@foreground, 0.06);
@define-color fg-a08 alpha(@foreground, 0.08);
@define-color fg-a09 alpha(@foreground, 0.09);
@define-color fg-a12 alpha(@foreground, 0.12);
@define-color fg-a15 alpha(@foreground, 0.15);
@define-color fg-a18 alpha(@foreground, 0.18);
@define-color fg-a25 alpha(@foreground, 0.25);
@define-color fg-a30 alpha(@foreground, 0.3);
@define-color fg-a50 alpha(@foreground, 0.5);
@define-color fg-a70 alpha(@foreground, 0.7);
@define-color fg-a80 alpha(@foreground, 0.8);
@define-color fg-a85 alpha(@foreground, 0.85);
@define-color fg-a90 alpha(@foreground, 0.9);
@define-color fg-a95 alpha(@foreground, 0.95);
@define-color outline-a40 alpha(@outline, 0.4);
@define-color outline-a70 alpha(@outline, 0.7);
@define-color primary-a20 alpha(@primary, 0.2);
@define-color primary-a30 alpha(@primary, 0.3);
@define-color primary-a40 alpha(@primary, 0.4);
@define-color primary-a50 alpha(@primary, 0.5);
@define-color primary-a60 alpha(@primary, 0.6);
@define-color primary-a80 alpha(@primary, 0.8);
@define-color primary-a90 alpha(@primary, 0.9);
@define-color shadow-a02 alpha(@shadow, 0.02);
@define-color shadow-a05 alpha(@shadow, 0.05);
@define-color shadow-a10 alpha(@shadow, 0.1);
@define-color shadow-a20 alpha(@shadow, 0.2);
@define-color shadow-a25 alpha(@shadow, 0.25);
@define-color shadow-a40 alpha(@shadow, 0.4);
@define-color surface-a05 alpha(@surface, 0.05);
@define-color surface-a90 alpha(@surface, 0.9);
@define-color surface-bright-a90 alpha(@surface-bright, 0.9);
/* Glass Surface Tiers */
@define-color glass-surface-1 alpha(@background, 0.30);
@define-color glass-surface-2 alpha(@background, 0.45);
@define-color glass-surface-3 alpha(@background, 0.60);
@define-color glass-surface-4 alpha(@background, 0.75);
/* Glass Panels */
@define-color glass-panel alpha(@background, 0.50);
@define-color glass-dock alpha(@background, 0.35);
@define-color glass-popup alpha(@background, 0.60);
@define-color glass-card alpha(@background, 0.50);
@define-color glass-widget alpha(@background, 0.55);
@define-color glass-dialog alpha(@background, 0.65);
@define-color glass-tooltip alpha(@background, 0.80);
@define-color glass-menu alpha(@background, 0.65);
/* Interactive States */
@define-color glass-hover alpha(@foreground, 0.08);
@define-color glass-active alpha(@foreground, 0.14);
@define-color glass-selected alpha(@primary, 0.18);
@define-color glass-focus alpha(@primary, 0.25);
/* Borders */
@define-color glass-border alpha(@outline, 0.18);
@define-color glass-border-soft alpha(@outline, 0.10);
@define-color glass-border-strong alpha(@outline, 0.30);
/* Highlights */
@define-color glass-highlight alpha(@foreground, 0.08);
@define-color glass-highlight-soft alpha(@foreground, 0.04);
@define-color glass-highlight-strong alpha(@foreground, 0.14);
/* Accent */
@define-color glass-accent @primary;
@define-color glass-accent-soft alpha(@primary, 0.15);
@define-color glass-accent-container alpha(@primary, 0.10);
/* Text */
@define-color glass-text @foreground;
@define-color glass-text-secondary alpha(@foreground, 0.60);
@define-color glass-text-disabled alpha(@foreground, 0.30);
/* Semantic Status Colors */
@define-color glass-success @secondary;
@define-color glass-warning @tertiary;
@define-color glass-error @error;
@define-color glass-info @primary;
/* Overlay Layers */
@define-color glass-overlay alpha(@shadow, 0.35);
@define-color glass-overlay-dark alpha(@shadow, 0.60);
@define-color glass-overlay-light alpha(@shadow, 0.15);
/* Desktop / Wallpaper Integration */
@define-color desktop-selection alpha(@primary, 0.20);
@define-color desktop-grid alpha(@foreground, 0.06);
@define-color desktop-shadow alpha(@shadow, 0.30);
/* Utility Components */
@define-color glass-ring alpha(@primary, 0.50);
@define-color glass-divider alpha(@outline, 0.12);
@define-color glass-icon alpha(@foreground, 0.70);
@define-color glass-scrollbar alpha(@foreground, 0.15);
src/styles/controlpanel/dialogs.css
+21 -21
View File
@@ -5,9 +5,9 @@
/* WiFi Password Dialog */
#wifi-dialog-background {
background-color: @bg-a50;
background-color: @glass-dialog;
border-radius: apply(radius-md);
border: 1px solid @fg-a10;
border: 1px solid @glass-border;
padding: 20px;
min-width: 450px;
}
@@ -46,8 +46,8 @@
}
#wifi-dialog-password-entry {
background-color: @fg-a10;
border: 1px solid @fg-a20;
background-color: @glass-surface-1;
border: 1px solid @glass-border;
border-radius: apply(radius-xs);
padding: 8px 12px;
color: @foreground;
@@ -55,9 +55,9 @@
}
#wifi-dialog-password-entry:focus {
border-color: @primary;
box-shadow: 0 0 0 2px @primary-a30;
background-color: @fg-a15;
border-color: @glass-ring;
box-shadow: 0 0 0 2px @glass-focus;
background-color: @glass-hover;
}
#wifi-dialog-show-password-box {
@@ -74,7 +74,7 @@
}
#wifi-dialog-show-password-button:hover {
background-color: @fg-a10;
background-color: @glass-hover;
}
#wifi-dialog-show-password-button image {
@@ -100,35 +100,35 @@
}
#wifi-dialog-cancel-button {
background-color: @fg-a10;
border: 1px solid @fg-a20;
background-color: @glass-hover;
border: 1px solid @glass-border;
color: @foreground;
}
#wifi-dialog-cancel-button:hover {
background-color: @fg-a15;
background-color: @glass-active;
}
#wifi-dialog-join-button {
background-color: @primary;
border: 1px solid @primary;
background-color: @glass-accent;
border: 1px solid @glass-accent;
color: @foreground;
}
#wifi-dialog-join-button:hover {
background-color: @secondary;
border-color: @secondary;
background-color: @glass-accent;
border-color: @glass-accent;
}
#wifi-dialog-join-button.disabled {
opacity: 0.5;
background-color: @bg-a90;
border-color: @bg-a90;
color: @fg-a80;
background-color: @glass-surface-1;
border-color: @glass-surface-1;
color: @glass-text-secondary;
}
#wifi-dialog-join-button.disabled:hover {
background-color: @bg-a90;
border-color: @bg-a90;
color: @fg-a80;
background-color: @glass-surface-1;
border-color: @glass-surface-1;
color: @glass-text-secondary;
}
src/styles/controlpanel/expanded-player.css
+12 -12
View File
@@ -22,14 +22,14 @@
font-weight: 400;
margin-top: -2px;
font-size: apply(font-md);
color: alpha(@fg-a40, 0.8);
color: @glass-text-secondary;
}
#macos-player-album {
font-weight: 400;
margin-top: -4px;
font-size: apply(font-md);
color: alpha(@fg-a40, 0.8);
color: @glass-text-secondary;
margin-bottom: 8px;
}
@@ -45,7 +45,7 @@
min-height: 2px;
border-radius: apply(radius-2xs);
background-color: @fg-a25;
background-color: @glass-border;
border: none;
}
@@ -62,7 +62,7 @@
min-width: 1px;
min-height: 8px;
margin: -3px;
box-shadow: 0 1px 3px @shadow-a30;
box-shadow: 0 1px 3px @glass-overlay-light;
transition: all apply(transition-xfast) ease;
}
@@ -70,13 +70,13 @@
min-width: 4px;
min-height: 14px;
margin: -5px;
box-shadow: 0 2px 6px @shadow-a40;
box-shadow: 0 2px 6px @glass-overlay;
}
#macos-position-label,
#macos-length-label {
font-size: apply(font-xs);
color: alpha(@fg-a40, 0.9);
color: @glass-text-secondary;
font-weight: 400;
}
@@ -123,7 +123,7 @@
}
.macos-switcher-dot {
background: @fg-a30;
background: @glass-border;
border-radius: apply(radius-full);
min-width: 12px;
min-height: 12px;
@@ -131,12 +131,12 @@
}
.macos-switcher-dot:hover {
background: @fg-a50;
background: @glass-active;
}
.macos-switcher-dot.active {
background: @foreground;
box-shadow: 0 0 0 1px @fg-a30;
box-shadow: 0 0 0 1px @glass-border;
}
#expanded-seek-bar {
@@ -150,7 +150,7 @@
min-height: 2px;
border-radius: apply(radius-2xs);
background-color: @fg-a25;
background-color: @glass-border;
border: none;
}
@@ -167,7 +167,7 @@
min-width: 1px;
min-height: 10px;
margin: -3px;
box-shadow: 0 1px 3px @shadow-a30;
box-shadow: 0 1px 3px @glass-overlay-light;
transition: all apply(transition-xfast) ease;
}
@@ -175,5 +175,5 @@
min-width: 4px;
min-height: 14px;
margin: -5px;
box-shadow: 0 2px 6px @shadow-a40;
box-shadow: 0 2px 6px @glass-overlay;
}
src/styles/controlpanel/general.css
+4 -6
View File
@@ -8,23 +8,21 @@
#separator {
min-height: 0.09rem;
margin: 3px 0;
background-color: @fg-a20;
background-color: @glass-divider;
border-radius: apply(radius-sm);
}
#control-center-menu {
background-color: @bg-a50;
background-color: @glass-popup;
border-radius: apply(radius-md);
box-shadow: none;
margin: 0;
}
#control-center-widgets {
background-color: @bg-a50;
box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
border: 1px solid @border-strong;
background-color: @glass-card;
border: 1px solid @glass-border;
border-radius: apply(radius-md);
padding: 0.5rem;
}
src/styles/controlpanel/networks.css
+8 -9
View File
@@ -7,9 +7,8 @@
/* macOS-style WiFi interface */
#wifi-connections,
#bluetooth-connections {
background-color: @bg-a50;
box-shadow: inset 0 0 0 1px alpha(@fg-a40, 0.4);
border: 1px solid @outline-a40;
background-color: @glass-surface-1;
border: 1px solid @glass-border;
border-radius: apply(radius-sm);
padding: 10px;
}
@@ -23,22 +22,22 @@
#wifi-network-slot button:hover,
#wifi-network-button:hover {
background-color: @fg-a18;
background-color: @glass-hover;
border-radius: apply(radius-sm);
}
#wifi-network-slot button:hover .wifi-icon-box,
#wifi-network-button:hover .wifi-icon-box {
background-color: @fg-a90;
background-color: @glass-text-secondary;
}
/* WiFi-specific device icon styles */
#wifi-connections #device-icon {
background-color: @fg-a10;
background-color: @glass-hover;
}
#wifi-connections #device-icon.connected {
background-color: @primary;
background-color: @glass-accent;
color: @foreground;
}
@@ -49,7 +48,7 @@
}
#wifi-lock-icon {
color: @fg-a60;
color: @glass-text-secondary;
margin-left: 8px;
}
@@ -64,7 +63,7 @@
}
#wifi-other-button:hover {
background-color: @fg-a18;
background-color: @glass-hover;
}
#wifi-other-button:last-child {
src/styles/controlpanel/per_app_volume.css
+9 -11
View File
@@ -14,9 +14,9 @@
.app-volume-item {
margin: 8px 0;
padding: 8px;
background-color: @fg-a05;
background-color: @glass-hover;
border-radius: apply(radius-xs);
border: 1px solid @fg-a10;
border: 1px solid @glass-border-soft;
}
.app-name {
@@ -27,25 +27,23 @@
}
#per-app-volume-button {
background-color: @fg-a15;
border: 1px solid alpha(@fg-a40, 0.6);
background-color: @glass-hover;
border: 1px solid @glass-border;
border-radius: apply(radius-full);
}
#per-app-volume-button:hover {
background-color: @fg-a25;
box-shadow: 0 4px 12px @shadow-a20;
background-color: @glass-active;
}
#per-app-volume-button:active {
background-color: @fg-a20;
box-shadow: 0 1px 3px @shadow-a30;
background-color: @glass-selected;
}
#per-app-volume-icon {
background-color: @fg-a15;
background-color: @glass-hover;
border: 2px solid alpha(@fg-a40, 0.6);
border: 2px solid @glass-border;
border-radius: apply(radius-full);
@@ -57,7 +55,7 @@
.compact-app-volume-item {
padding-bottom: 5px;
padding-right: 14px;
border-bottom: 1px solid @fg-a10;
border-bottom: 1px solid @glass-divider;
}
#app-icon {
src/styles/controlpanel/player.css
+11 -12
View File
@@ -10,8 +10,8 @@
}
#player-stack-button:hover {
background-color: @bg-a80;
box-shadow: inset @fg-a50 0 0 10px;
background-color: @glass-hover;
box-shadow: inset @glass-highlight 0 0 10px;
}
#player-stack-button.active {
@@ -24,8 +24,8 @@
min-width: 320px;
border-radius: apply(radius-sm);
margin: 0 6px;
background-color: alpha(@background, 0.3);
box-shadow: inset 0 0 0 1px alpha(@fg-a40, 0.4);
background-color: @glass-surface-1;
border: 1px solid @glass-border-soft;
}
#outer-player-box-c {
@@ -35,17 +35,16 @@
}
#outer-no-player-box-c {
background-color: alpha(@background, 0.3);
border: 1px solid @outline-a40;
background-color: @glass-surface-1;
border: 1px solid @glass-border;
min-height: 55px;
min-width: 345px;
border-radius: apply(radius-sm);
}
#box-c {
background-color: alpha(@background, 0.3);
box-shadow: inset 0 0 0 0.5px alpha(@fg-a40, 0.4);
border: 1px solid @outline-a40;
background-color: @glass-surface-1;
border: 1px solid @glass-border;
border-radius: apply(radius-md);
margin-top: 0.5rem;
margin-left: 4px;
@@ -57,7 +56,7 @@
#player-box:disabled highlight,
#player-box:disabled progress {
background-color: @primary-a60;
background-color: @glass-ring;
background-image: none;
}
@@ -88,7 +87,7 @@
#player-artist-c {
margin-top: -5px;
color: @fg-a40;
color: @glass-text-secondary;
font-size: apply(font-sm);
}
#player-artist,
@@ -107,7 +106,7 @@
}
#player-box #player-controls #button-box .player-button:disabled {
color: @fg-a85;
color: @glass-text-disabled;
}
#player-button {
src/styles/controlpanel/quicksettings.css
+16 -17
View File
@@ -18,7 +18,7 @@
font-size: apply(font-sm);
margin-left: 5px;
font-weight: 500;
color: @fg-a40;
color: @glass-text-secondary;
}
#device-icon {
@@ -27,17 +27,17 @@
margin-bottom: 2.5px;
margin-top: 2.5px;
margin-right: 10px;
background-color: @bg-a50;
background-color: @glass-hover;
}
#device-icon.connected {
background-color: @primary;
background-color: @glass-accent;
}
#toggle-button {
min-width: 40px;
min-height: 22px;
background-color: @fg-a30;
background-color: @glass-border;
border-radius: apply(radius-full);
padding: 3px;
transition: background-color apply(transition-slow) ease;
@@ -53,14 +53,13 @@
}
#toggle-button:checked {
background-color: @primary;
background-color: @glass-accent;
}
.menu {
background-color: alpha(@background, 0.3);
box-shadow: inset 0 0 0 0.5px alpha(@fg-a40, 0.4);
border: 1px solid @outline-a40;
background-color: @glass-surface-1;
border: 1px solid @glass-border;
border-radius: apply(radius-md);
margin: 5px;
padding: 1rem;
@@ -86,13 +85,13 @@
#control-center-menu mark indicator {
background: none;
background-image: none;
color: @fg-a20;
color: @glass-text-secondary;
}
#control-center-menu mark label {
background: none;
background-image: none;
color: @fg-a20;
color: @glass-text-secondary;
}
#device-button {
@@ -101,21 +100,21 @@
}
#device-button button:hover {
background-color: @fg-a18;
background-color: @glass-hover;
border-radius: apply(radius-sm);
}
#device-button button:hover #device-icon {
background-color: @fg-a25;
background-color: @glass-active;
}
.button-hovered {
background-color: @fg-a10;
background-color: @glass-hover;
}
#device-button #battery-label {
font-size: apply(font-xs);
color: @fg-a60;
color: @glass-text-secondary;
margin-right: 4px;
}
@@ -124,13 +123,13 @@
font-weight: bold;
}
.wifi-icon-box {
background-color: @fg-a80;
background-color: @glass-text-secondary;
border-radius: apply(radius-full);
padding: 2px;
}
.wifi-icon-box-connected {
background-color: @primary;
background-color: @glass-accent;
border-radius: apply(radius-full);
padding: 2px;
}
@@ -146,7 +145,7 @@
.status-label {
font-size: apply(font-xs);
font-weight: 500;
color: @fg-a80;
color: @glass-text-secondary;
font-family: "SF Pro Rounded";
}
src/styles/controlpanel/sliders.css
+2 -2
View File
@@ -10,10 +10,10 @@
#volume-widget-icon {
margin-left: 10px;
color: @shadow-a40;
color: @glass-text-secondary;
}
#brightness-widget-icon {
margin-left: 10px;
color: @shadow-a40;
color: @glass-text-secondary;
}
src/styles/main.css
+1 -1
View File
@@ -8,7 +8,7 @@
* {
all: unset;
color: @foreground;
color: @glass-text;
font-size: unset;
font-family: "SF Pro Rounded";
}