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";
.excalidraw {
--Range-track-background: var(--button-bg);
--Range-track-background-active: var(--color-primary);
--Range-thumb-background: var(--color-on-surface);
--Range-legend-color: var(--text-primary-color);
--slider-thumb-size: 16px;
.range-wrapper {
position: relative;
@ -16,7 +13,7 @@
width: 100%;
height: 4px;
-webkit-appearance: none;
background: var(--Range-track-background);
background: var(--color-slider-track);
border-radius: 2px;
outline: none;
}
@ -24,18 +21,18 @@
.range-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: var(--Range-thumb-background);
width: var(--slider-thumb-size);
height: var(--slider-thumb-size);
background: var(--color-slider-thumb);
border-radius: 50%;
cursor: pointer;
border: none;
}
.range-input::-moz-range-thumb {
width: 20px;
height: 20px;
background: var(--Range-thumb-background);
width: var(--slider-thumb-size);
height: var(--slider-thumb-size);
background: var(--color-slider-thumb);
border-radius: 50%;
cursor: pointer;
border: none;
@ -46,7 +43,7 @@
bottom: 0;
transform: translateX(-50%);
font-size: 12px;
color: var(--Range-legend-color);
color: var(--text-primary-color);
}
.zero-label {
@ -54,6 +51,6 @@
bottom: 0;
left: 4px;
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 =
(value / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
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]);

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

@ -53,6 +53,9 @@
--scrollbar-thumb: var(--button-gray-2);
--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),
0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
@ -207,6 +210,8 @@
--scrollbar-thumb: #{$oc-gray-8};
--scrollbar-thumb-hover: #{$oc-gray-7};
--color-slider-track: hsl(244, 23%, 39%);
// will be inverted to a lighter color.
--color-selection: #3530c4;