shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX: More accessible colors (#105)

Browse Source
This commit is contained in:
Jordan Vidrine
2025-04-01 20:01:29 -05:00
committed by GitHub
parent f4c6876923
commit 1c85ae4626
4 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
about.json
+4 -4
View File
@@ -40,8 +40,8 @@
"Royal": {
"primary": "1A1A1A",
"secondary": "ffffff",
"tertiary": "4169e1",
"tertiary-med-or-tertiary": "4169e1",
"tertiary": "288EDC",
"tertiary-med-or-tertiary": "288EDC",
"selected": "c7e3ff",
"header_background": "ffffff",
"header_primary": "1A1A1A",
@@ -50,8 +50,8 @@
"Royal Dark": {
"primary": "ffffff",
"secondary": "1A1A1A",
"tertiary": "4169e1",
"tertiary-med-or-tertiary": "4169e1",
"tertiary": "288EDC",
"tertiary-med-or-tertiary": "288EDC",
"selected": "3a455f",
"header_background": "1A1A1A",
"header_primary": "ffffff",
common/color_definitions.scss
+14 -9
View File
@@ -1,9 +1,9 @@
html {
--accent-color: #{$tertiary} !important;
--accent-text-color: light-dark(#ffffff, #212121) !important;
--accent-text-color: #ffffff;
// Background Colors
--background-color: light-dark(
oklch(from #{$tertiary} 98% calc(c * 0.25) h),
oklch(from #{$tertiary} 96% calc(c * 0.125) h),
oklch(from #{$tertiary} 10% 0.025 h)
) !important;
--d-content-background: light-dark(
@@ -22,13 +22,14 @@ html {
// Sidebar Colors
--d-sidebar-border-color: light-dark(
oklch(from #{$tertiary} 90% c h),
oklch(from #{$tertiary} 88% calc(c * 0.25) h),
oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
) !important;
--d-sidebar-link-color: light-dark(
oklch(from #{$tertiary} calc(l * 0.8) calc(c * 0.25) h),
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.25) h)
) !important;
--d-sidebar-active-color: #{$primary} !important;
--d-sidebar-suffix-color: light-dark(
oklch(from #{$tertiary} l calc(c * 0.9) h),
oklch(from #{$tertiary} l calc(c * 0.9) h)
@@ -40,25 +41,29 @@ html {
oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
) !important;
--d-nav-color--active: #{$tertiary} !important;
--d-nav-color--active: light-dark(
oklch(from #{$tertiary} l c h),
oklch(from #{$tertiary} calc(l * 1.2) c h)
) !important;
--link-color: light-dark(
#{$tertiary},
oklch(from #{$tertiary} l c h),
oklch(from #{$tertiary} calc(l * 0.95) c h)
) !important;
--link-color-hover: light-dark(
#{$tertiary},
oklch(from #{$tertiary} l c h),
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 2.25) h)
) !important;
--tertiary-hover: #{$tertiary} !important;
// Search Colors
--search-color: light-dark(
oklch(from #{$tertiary} calc(l * 0.65) calc(c * 0.65) h),
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 2) h)
oklch(from #{$tertiary} l c h),
oklch(from #{$tertiary} calc(l * 1.5) c h)
) !important;
--search-banner-text-color: light-dark(
oklch(from #{$tertiary} calc(l * 0.65) calc(c * 0.65) h),
oklch(from #{$tertiary} calc(l * 1.85) calc(c * 2) h)
oklch(from #{$tertiary} calc(l * 1.5) c h)
) !important;
// Topic Card Colors
scss/buttons.scss
+12 -3
View File
@@ -66,7 +66,10 @@
}
&:hover {
.discourse-no-touch & {
background: oklch(from var(--accent-color) 40% c h) !important;
background: light-dark(
oklch(from var(--accent-color) 40% c h),
oklch(from var(--accent-color) 50% c h)
);
box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
color: var(--accent-text-color);
.d-icon {
@@ -76,12 +79,18 @@
}
&:focus-visible {
.discourse-no-touch & {
background: oklch(from var(--accent-color) 40% c h) !important;
background: light-dark(
oklch(from var(--accent-color) 40% c h),
oklch(from var(--accent-color) 50% c h)
);
box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
color: var(--accent-text-color);
}
}
&:active {
background: oklch(from var(--accent-color) 30% c h) !important;
background: light-dark(
oklch(from var(--accent-color) 40% c h),
oklch(from var(--accent-color) 50% c h)
);
}
}
scss/color-exploration.scss
+1
View File
@@ -22,4 +22,5 @@
--d-sidebar-section-link-icon-size: 1em;
--d-hover: oklch(from var(--d-selected) l c h / 0.75);
--d-input-bg-color: var(--d-content-background);
--d-sidebar-active-color: var(--primary) !important;
}