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

DEV: Experimenting with using built in core color palettes for the color picking component (#71)

Browse Source 
This PR is the beginning of converting the color picker to use built in
core color palettes.
The `color_schemes` defined in `about.json` are created in core when the
theme is imported,
and we then show all user-selectable color palettes in this sidebar
footer menu.

An important caveat here is that all of the Horizon themes must be
changed to `user_selectable`
otherwise they will not show up in the color palette selector in the
sidebar.

When choosing a color palette that also has a corresponding dark color
palette,
*both* light mode and dark mode are correctly saved with the color
palette(s) chosen,
using the color palette cookie we already have in core.

Anon users can also set a palette, which will be saved in a cookie.

---------

Co-authored-by: Sérgio Saquetim <saquetim@discourse.org>
Co-authored-by: Martin Brennan <martin@discourse.org>
Co-authored-by: Osama Sayegh <asooomaasoooma90@gmail.com>
This commit is contained in:
Jordan Vidrine
2025-03-30 22:28:28 -05:00
committed by GitHub
parent 0473f90cd9
commit b4e451e64b
14 changed files with 506 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/color-choice.scss
+1 -25
View File
@@ -1,4 +1,4 @@
.color-palette-menu {
.user-color-palette-menu {
&__item .btn-icon-text.btn-flat {
background-color: var(--d-content-background);
width: 100%;
@@ -23,27 +23,3 @@
.user-color-palette-content .fk-d-menu__inner-content {
border: none;
}
html.custom-color-horizon {
--accent-base-color: #595bca;
}
html.custom-color-marigold {
--accent-base-color: #d3881f;
}
html.custom-color-violet {
--accent-base-color: #9b15de;
}
html.custom-color-lily {
--accent-base-color: #cc338c;
}
html.custom-color-clover {
--accent-base-color: #45a06e;
}
html.custom-color-royal {
--accent-base-color: #4169e1;
}
scss/color-exploration.scss
+3 -99
View File
@@ -1,108 +1,12 @@
:root {
--accent-base-color: #595bca;
--accent-color: light-dark(
var(--accent-base-color),
oklch(from var(--accent-base-color) calc(l * 0.95) c h)
);
// --background-color: light-dark(#f5f8ff, #101112);
--background-color: light-dark(
oklch(from var(--accent-color) 98% calc(c * 0.25) h),
oklch(from var(--accent-color) 10% 0.025 h)
);
--header_primary-low-mid: light-dark(
oklch(from var(--background-color) calc(l * 0.75) calc(c * 2) h),
oklch(from var(--accent-color) calc(l * 1) calc(c * 0.25) h)
);
--header_primary-medium: light-dark(
oklch(from var(--background-color) calc(l * 0.55) calc(c * 2) h),
oklch(from var(--accent-color) calc(l * 1.35) calc(c * 0.25) h)
);
--d-content-background: light-dark(
oklch(from var(--accent-color) calc(l * 2) 0 h),
oklch(from var(--accent-color) calc(l * 0.375) 0 h)
);
--primary-100: light-dark(#f2f2f2, #333333);
--primary-300: light-dark(#d1d1d1, #838383);
--primary-low: light-dark(#e9e9e9, #313131);
--primary-high: light-dark(#646464, #a6a6a6);
--primary-very-high: light-dark(#434343, #c7c7c7);
--d-hover: oklch(from var(--d-selected) l c h / 0.75);
--tertiary: var(--accent-color);
--tertiary-medium: light-dark(
oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h),
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.25) h)
);
--tertiary-very-low: light-dark(
oklch(from var(--accent-color) calc(l * 1.75) calc(c * 0.25) h),
oklch(from var(--accent-color) calc(l * 0.5) calc(c * 0.25) h)
);
--tertiary-med-or-tertiary: var(--accent-color);
--tertiary-low: light-dark(
oklch(from var(--accent-color) calc(l * 1.6) calc(c * 0.25) h),
oklch(from var(--accent-color) calc(l * 0.6) calc(c * 0.25) h)
);
--tertiary-300: light-dark(
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h),
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h)
);
--tertiary-high: light-dark(
oklch(from var(--accent-color) calc(l * 1) c h),
oklch(from var(--accent-color) calc(l * 1) c h)
);
--d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color);
--search-color: light-dark(
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h)
);
--search-banner-text-color: light-dark(
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
oklch(from var(--accent-color) calc(l * 1.85) calc(c * 2) h)
);
--topic-card-shadow: light-dark(
oklch(from var(--accent-color) calc(l * 1.85) calc(c * 0.5) h),
oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
);
--button-box-shadow: light-dark(
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.35) h),
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
);
--d-selected: light-dark(
oklch(from var(--background-color) calc(l * 0.9375) calc(c * 2) h),
oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
);
--d-sidebar-highlight-hover-background: var(--d-selected);
--d-sidebar-border-color: light-dark(
oklch(from var(--background-color) calc(l * 0.9) calc(c * 1) h),
oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
);
--d-chat-border: light-dark(
oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h),
oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
);
--accent-text-color: light-dark(#ffffff, #212121);
--d-nav-color--active: var(--accent-color);
--d-sidebar-background: var(--background-color);
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
--d-sidebar-link-color: light-dark(
oklch(from var(--accent-color) calc(l * 0.8) calc(c * 0.25) h),
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h)
);
--d-sidebar-link-icon-color: var(--d-sidebar-link-color);
--d-sidebar-header-color: var(--d-sidebar-link-color);
--d-sidebar-header-icon-color: var(--d-sidebar-link-color);
--d-sidebar-suffix-color: light-dark(
oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h),
oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h)
);
--d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color);
--link-color: light-dark(
var(--accent-base-color),
oklch(from var(--accent-base-color) calc(l * 0.95) c h)
);
--link-color-hover: light-dark(
var(--accent-base-color),
oklch(from var(--accent-base-color) calc(l * 1.5) calc(c * 2.25) h)
);
--d-sidebar-background: var(--background-color);
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
--d-sidebar-prefix-background: var(--d-selected);
--d-sidebar-active-prefix-background: light-dark(
oklch(from var(--d-selected) calc(l * 0.85) c h),
@@ -116,6 +20,6 @@
--d-sidebar-highlight-color: var(--primary);
--d-sidebar-highlight-background: var(--d-selected);
--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);
--tertiary-hover: var(--accent-color);
}