clause agent mode "make it look like papermod"
This commit is contained in:
parent
1c59bd66ea
commit
582e4491c0
91 changed files with 2139 additions and 202 deletions
74
sass/abstracts/variables/_custom-properties.scss
Normal file
74
sass/abstracts/variables/_custom-properties.scss
Normal file
|
@ -0,0 +1,74 @@
|
|||
// CSS Custom Properties for theme switching
|
||||
// This allows dynamic switching between light and dark themes
|
||||
|
||||
:root {
|
||||
// Light theme (default)
|
||||
--color-bg-primary: #{$color__background-body};
|
||||
--color-bg-secondary: #{$color__background-screen};
|
||||
--color-bg-card: #{$color__background-card};
|
||||
--color-bg-header: #{$color__background-header};
|
||||
|
||||
--color-text-primary: #{$color__text-main};
|
||||
--color-text-secondary: #{$color__text-muted};
|
||||
--color-text-tertiary: #{$color__text-light};
|
||||
|
||||
--color-link: #{$color__link};
|
||||
--color-link-visited: #{$color__link-visited};
|
||||
--color-link-hover: #{$color__link-hover};
|
||||
|
||||
--color-border-primary: #{$color__border-main};
|
||||
--color-border-secondary: #{$color__border-input};
|
||||
|
||||
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
||||
|
||||
// Transitions
|
||||
--transition-default: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
--transition-fast: all 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
// Dark theme
|
||||
[data-theme="dark"] {
|
||||
--color-bg-primary: #{$color__dark-background-body};
|
||||
--color-bg-secondary: #{$color__dark-background-screen};
|
||||
--color-bg-card: #{$color__dark-background-card};
|
||||
--color-bg-header: #{$color__dark-background-header};
|
||||
|
||||
--color-text-primary: #{$color__dark-text-main};
|
||||
--color-text-secondary: #{$color__dark-text-muted};
|
||||
--color-text-tertiary: #{$color__dark-text-light};
|
||||
|
||||
--color-link: #{$color__dark-link};
|
||||
--color-link-visited: #{$color__dark-link-visited};
|
||||
--color-link-hover: #{$color__dark-link-hover};
|
||||
|
||||
--color-border-primary: #{$color__dark-border-main};
|
||||
--color-border-secondary: #{$color__dark-border-input};
|
||||
|
||||
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
// Prefers dark color scheme
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--color-bg-primary: #{$color__dark-background-body};
|
||||
--color-bg-secondary: #{$color__dark-background-screen};
|
||||
--color-bg-card: #{$color__dark-background-card};
|
||||
--color-bg-header: #{$color__dark-background-header};
|
||||
|
||||
--color-text-primary: #{$color__dark-text-main};
|
||||
--color-text-secondary: #{$color__dark-text-muted};
|
||||
--color-text-tertiary: #{$color__dark-text-light};
|
||||
|
||||
--color-link: #{$color__dark-link};
|
||||
--color-link-visited: #{$color__dark-link-visited};
|
||||
--color-link-hover: #{$color__dark-link-hover};
|
||||
|
||||
--color-border-primary: #{$color__dark-border-main};
|
||||
--color-border-secondary: #{$color__dark-border-input};
|
||||
|
||||
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||
--shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue