ADOFAIEditorForum/ComponentTest
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Dark Mode Color Palette

Browse Source
This commit is contained in:
copecone committed 2026-04-23 09:53:00 +09:00
1 parent 0586005191
commit 96f62b0e7c
4 files changed
+26 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/components/dropdown/dropdown.scss
+3 -3
View File
@@ -40,7 +40,7 @@ $default_animation_duration: 0.2s;
max-width: 100%; max-width: 100%;
&:has(.dropdown-input.focus-mode:focus-visible) { &:has(.dropdown-input.focus-mode:focus-visible) {
outline: 2px solid list.nth(library.$brand_palette, 5); outline: 2px solid var(--selection-outline-color);
outline-offset: 2px; outline-offset: 2px;
} }
} }
@@ -195,7 +195,7 @@ $default_animation_duration: 0.2s;
light-dark($hover_bg, $hover_dark_bg) light-dark($hover_bg, $hover_dark_bg)
calc(var(--hover-state) * 100%) calc(var(--hover-state) * 100%)
), ),
light-dark(list.nth(library.$brand_palette, 1), list.nth(library.$brand_palette, 11)) light-dark(list.nth(library.$brand_palette, 1), list.nth(library.$brand_palette, 12))
calc(var(--selected-state) * 100%) calc(var(--selected-state) * 100%)
); );
@@ -209,7 +209,7 @@ $default_animation_duration: 0.2s;
&.selected { &.selected {
--selected-state: 1; --selected-state: 1;
color: list.nth(library.$brand_palette, 5); color: light-dark(list.nth(library.$brand_palette, 5), list.nth(library.$brand_palette, 6));
font-weight: 600; font-weight: 600;
} }
} }
src/app/components/switch/switch.scss
+2 -2
View File
@@ -30,14 +30,14 @@ $default_animation_duration: 0.2s;
background-color: color-mix( background-color: color-mix(
in oklch, in oklch,
light-dark($off_bg, $off_dark_bg), light-dark($off_bg, $off_dark_bg),
light-dark(list.nth(library.$brand_palette, 5), list.nth(library.$brand_palette, 8)) light-dark(list.nth(library.$brand_palette, 5), list.nth(library.$brand_palette, 6))
calc(var(--animation-state) * 100%) calc(var(--animation-state) * 100%)
); );
box-shadow: 0 0 0 1px color-mix( box-shadow: 0 0 0 1px color-mix(
in oklch, in oklch,
light-dark($border_color, $border_dark_color), light-dark($border_color, $border_dark_color),
light-dark($border_color, list.nth(library.$brand_palette, 10)) light-dark($border_color, list.nth(library.$brand_palette, 9))
calc(var(--animation-state) * 100%) calc(var(--animation-state) * 100%)
) inset; ) inset;
src/styles.scss
+5 -1
View File
@@ -118,7 +118,11 @@ section.feature-block {
margin: 0 auto; margin: 0 auto;
} }
* {
--selection-outline-color: light-dark(#{list.nth(library.$brand_palette, 5)}, #{list.nth(library.$brand_palette, 6)});
}
*:focus-visible { *:focus-visible {
outline: 2px solid list.nth(library.$brand_palette, 5); outline: 2px solid var(--selection-outline-color);
outline-offset: 2px; outline-offset: 2px;
} }
src/styles/_library.scss
+16
View File
@@ -12,5 +12,21 @@ $brand_palette: [
oklch(0.4509 0.1688 29.86), // #9E190E oklch(0.4509 0.1688 29.86), // #9E190E
oklch(0.3897 0.1391 29.75), // #7F180F oklch(0.3897 0.1391 29.75), // #7F180F
oklch(0.2547 0.0913 29.02), // #450805 oklch(0.2547 0.0913 29.02), // #450805
oklch(0.1752 0.0717 29.02), // #280000
]; ];
/*
$brand_palette: [
oklch(0.9999 0.2237 35.33),
oklch(0.9090 0.2237 35.33),
oklch(0.8181 0.2237 35.33),
oklch(0.7272 0.2237 35.33),
oklch(0.6363 0.2237 35.33),
oklch(0.5454 0.2237 35.33),
oklch(0.4545 0.2237 35.33),
oklch(0.3636 0.2237 35.33),
oklch(0.2727 0.2237 35.33),
oklch(0.1818 0.2237 35.33),
oklch(0.0909 0.2237 35.33),
];
*/