smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: tweak slider colors to be more muted (#9076)

Browse source
This commit is contained in:
David Luzar 2025-01-31 16:52:50 +01:00 • committed by GitHub
parent 9b6edc767a
commit 511433988c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 16 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

23
packages/excalidraw/components/Range.scss
View file

@ -1,10 +1,7 @@
@import "../css/variables.module.scss"; @import "../css/variables.module.scss";
.excalidraw { .excalidraw {
--Range-track-background: var(--button-bg); --slider-thumb-size: 16px;
--Range-track-background-active: var(--color-primary);
--Range-thumb-background: var(--color-on-surface);
--Range-legend-color: var(--text-primary-color);
.range-wrapper { .range-wrapper {
position: relative; position: relative;
@ -16,7 +13,7 @@
width: 100%; width: 100%;
height: 4px; height: 4px;
-webkit-appearance: none; -webkit-appearance: none;
background: var(--Range-track-background); background: var(--color-slider-track);
border-radius: 2px; border-radius: 2px;
outline: none; outline: none;
} }
@ -24,18 +21,18 @@
.range-input::-webkit-slider-thumb { .range-input::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 20px; width: var(--slider-thumb-size);
height: 20px; height: var(--slider-thumb-size);
background: var(--Range-thumb-background); background: var(--color-slider-thumb);
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
border: none; border: none;
} }
.range-input::-moz-range-thumb { .range-input::-moz-range-thumb {
width: 20px; width: var(--slider-thumb-size);
height: 20px; height: var(--slider-thumb-size);
background: var(--Range-thumb-background); background: var(--color-slider-thumb);
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
border: none; border: none;
@ -46,7 +43,7 @@
bottom: 0; bottom: 0;
transform: translateX(-50%); transform: translateX(-50%);
font-size: 12px; font-size: 12px;
color: var(--Range-legend-color); color: var(--text-primary-color);
} }
.zero-label { .zero-label {
@ -54,6 +51,6 @@
bottom: 0; bottom: 0;
left: 4px; left: 4px;
font-size: 12px; font-size: 12px;
color: var(--Range-legend-color); color: var(--text-primary-color);
} }
} }

2
packages/excalidraw/components/Range.tsx
View file

@ -34,7 +34,7 @@ export const Range = ({
const position = const position =
(value / 100) * (inputWidth - thumbWidth) + thumbWidth / 2; (value / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
valueElement.style.left = `${position}px`; valueElement.style.left = `${position}px`;
rangeElement.style.background = `linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) ${value}%, var(--button-bg) ${value}%, var(--button-bg) 100%)`; rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${value}%, var(--button-bg) ${value}%, var(--button-bg) 100%)`;
} }
}, [value]); }, [value]);

5
packages/excalidraw/css/theme.scss
View file

@ -53,6 +53,9 @@
--scrollbar-thumb: var(--button-gray-2); --scrollbar-thumb: var(--button-gray-2);
--scrollbar-thumb-hover: var(--button-gray-3); --scrollbar-thumb-hover: var(--button-gray-3);
--color-slider-track: hsl(240, 100%, 90%);
--color-slider-thumb: var(--color-gray-80);
--modal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07), --modal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07),
0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
@ -207,6 +210,8 @@
--scrollbar-thumb: #{$oc-gray-8}; --scrollbar-thumb: #{$oc-gray-8};
--scrollbar-thumb-hover: #{$oc-gray-7}; --scrollbar-thumb-hover: #{$oc-gray-7};
--color-slider-track: hsl(244, 23%, 39%);
// will be inverted to a lighter color. // will be inverted to a lighter color.
--color-selection: #3530c4; --color-selection: #3530c4;