UX: Color exploration & base (#33)

This commit is contained in:
Jordan Vidrine
2025-03-11 11:24:20 -05:00
committed by GitHub
parent eca05948c3
commit a90b691505
9 changed files with 185 additions and 55 deletions
+7 -7
View File
@@ -41,7 +41,7 @@
border: 1px solid var(--accent-color);
//id like to use rgba of the accent colour but how to derive that?
// box-shadow: 0px 0px 8px 2px oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
background: var(--secondary);
background: var(--d-content-background);
.d-icon {
color: var(--accent-color);
@@ -51,7 +51,7 @@
.discourse-no-touch & {
border: 1px solid transparent;
box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
background: var(--secondary);
background: var(--d-content-background);
color: var(--accent-color);
.d-icon {
color: var(--accent-color);
@@ -60,9 +60,9 @@
}
&:focus-visible {
.discourse-no-touch & {
background: var(--secondary);
background: var(--d-content-background);
color: var(--accent-color);
box-shadow: 0px 0px 0px 2px var(--secondary),
box-shadow: 0px 0px 0px 2px var(--d-content-background),
0px 0px 0px 4px var(--button-box-shadow);
.d-icon {
color: var(--accent-color);
@@ -73,10 +73,10 @@
//not shared with select-kit
.btn-default {
&:active {
color: var(--secondary);
color: var(--d-content-background);
background: oklch(from var(--accent-color) 30% c h) !important;
.d-icon {
color: var(--secondary);
color: var(--d-content-background);
}
}
}
@@ -106,7 +106,7 @@
rgba(255, 255, 255, 0) 100%
),
var(--accent-color);
box-shadow: 0px 0px 0px 2px var(--secondary),
box-shadow: 0px 0px 0px 2px var(--d-content-background),
0px 0px 0px 4px var(--button-box-shadow);
}
}