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

refactor(src/shared/styles): replace hardcoded CSS values with design token variables

Browse Source 
Introduce consistent design tokens for radii and colors, replacing alpha() and hardcoded values with theme variables for easier theming and maintenance.

- New Features:   - Add CSS variable usage for radii (var(--radius-*)) and color tokens (@border-subtle, @text-main, @accent)
- Enhancements:
  - Replace hardcoded border, radius, and color definitions with variable references
  - Align styling with the project's theme system
- Bug Fixes:
  - No bug fixes included
This commit is contained in:
sankalp committed 2026-05-14 15:31:01 +05:45
1 parent 60c63308db
commit 5502f85dd1
18 files changed
+340 -314
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/shared/styles/notification.css
+13 -13
View File
@@ -1,29 +1,29 @@
#notification {
padding: 10px;
background-color: alpha(#fff, 0.03);
border-radius: 8px;
background-color: alpha(@text-main, 0.03);
border-radius: var(--radius-sm);
margin-top: 10px;
margin-right: 10px;
/* margin: 5px; */
}
#notification-close-button {
background-color: alpha(#999, 0.3);
border-radius: 8px;
background-color: alpha(@text-dim, 0.3);
border-radius: var(--radius-sm);
}
#notification-close-button:hover {
background-color: alpha(#2369ff, 0.9);
background-color: alpha(@accent, 0.9);
}
#notification-action-buttons button {
background-color: alpha(#999, 0.3);
background-color: alpha(@text-dim, 0.3);
padding: 4px;
border-radius: 7px;
transition: background-color 0.1s ease;
border-radius: var(--radius-sm);
transition: background-color var(--transition-fast);
}
#notification-action-buttons button:hover {
background-color: alpha(#2369ff, 0.9);
background-color: alpha(@accent, 0.9);
}
#notification-action-buttons button:active {
@@ -35,11 +35,11 @@
}
#notification-icon {
border-radius: 16px;
border-radius: var(--radius-lg);
}
#notification-image {
border-radius: 16px;
border-radius: var(--radius-lg);
color: var(--on-surface);
}
@@ -64,9 +64,9 @@
#notif-close-button {
background-color: var(--surface);
border-radius: 16px;
border-radius: var(--radius-lg);
padding: 4px;
transition: background-color 0.1s ease;
transition: background-color var(--transition-fast);
}
#notif-close-button:hover,