feat(themes): colour families with light/dark, follow system, corners, frames, accent
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m30s
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m30s
- Fjord (new), Polarized Hell and Suri Hell complete the families Klassik, Fjord, Terrakotta, Polarized, Suri - settings: family table, follow-system, corners, button frames and an own accent colour (per device); compact quick picker in the user menus - code colours in index.css are fallbacks only chore(release): v0.14.0 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
2c9b4762fc
commit
3f0e596356
16 files changed
+949
-58
No files matched your search
+38
-4
@@ -15,6 +15,10 @@
|
||||
@import './themes/theme-terracotta-night.css';
|
||||
@import './themes/theme-polarized.css';
|
||||
@import './themes/theme-suri.css';
|
||||
@import './themes/theme-fjord.css';
|
||||
@import './themes/theme-fjord-night.css';
|
||||
@import './themes/theme-polarized-light.css';
|
||||
@import './themes/theme-suri-light.css';
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@@ -413,8 +417,9 @@ body {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* Prism Syntax Highlighting Tokens (VS Code Dark+ / Light+ via Theme Variables) */
|
||||
:root {
|
||||
/* Prism Syntax Highlighting Tokens (VS Code Dark+ / Light+ via Theme Variables).
|
||||
Fallbacks only (:where has no specificity): a theme's own --code-* values always win. */
|
||||
:where(:root) {
|
||||
--code-keyword: #569cd6;
|
||||
--code-string: #ce9178;
|
||||
--code-number: #b5cea8;
|
||||
@@ -426,8 +431,7 @@ body {
|
||||
--code-variable: #9cdcfe;
|
||||
}
|
||||
|
||||
:root:not(.dark):not([data-theme="terracotta"]),
|
||||
:root[data-theme="light"] {
|
||||
:where(:root:not(.dark)) {
|
||||
--code-keyword: #0000ff;
|
||||
--code-string: #a31515;
|
||||
--code-number: #098658;
|
||||
@@ -603,3 +607,33 @@ fieldset:disabled :is(button, input, select, textarea) {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Corner switch (Darstellung): overrides the theme's radii on every theme */
|
||||
:root[data-corners='square'] {
|
||||
--radius-card: 0px !important;
|
||||
--radius-btn: 2px !important;
|
||||
--radius-input: 2px !important;
|
||||
--radius-checkbox: 0px !important;
|
||||
}
|
||||
:root[data-corners='round'] {
|
||||
--radius-card: 12px !important;
|
||||
--radius-btn: 8px !important;
|
||||
--radius-input: 8px !important;
|
||||
--radius-checkbox: 4px !important;
|
||||
}
|
||||
|
||||
/* Button frames switch (Darstellung): without frames, regular buttons are a soft tint instead */
|
||||
:root[data-button-borders='off'] :is(.btn-action, .btn-icon, .btn-secondary, .tab-btn, .chip-btn) {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
:root[data-button-borders='off'] :is(.btn-action, .btn-icon, .btn-secondary, .chip-btn):not(:disabled) {
|
||||
background-color: color-mix(in srgb, var(--text-main) 6%, transparent);
|
||||
}
|
||||
:root[data-button-borders='off'] :is(.btn-action, .btn-icon, .btn-secondary, .chip-btn):not(:disabled):hover {
|
||||
background-color: color-mix(in srgb, var(--text-main) 11%, transparent);
|
||||
}
|
||||
/* … the selected tab keeps a visible accent tint */
|
||||
:root[data-button-borders='off'] .chip-btn.border-accent {
|
||||
background-color: var(--accent-dim) !important;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
Reference in new issue
Block a user