othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

ui(colors): Adds neutral color variable and updates scrollbars (#4933)

Browse Source
This commit is contained in:
Dan Rukas 2025-04-08 09:43:30 -04:00 committed by GitHub
parent cfa202e89a
commit 49c08298fc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
platform/docs/src/css/custom.css
View File

@ -9,6 +9,7 @@
@layer base { @layer base {
:root { :root {
--highlight: 191 74% 63%; --highlight: 191 74% 63%;
--neutral: 213 22% 59%;
--background: 236 62% 5%; --background: 236 62% 5%;
--foreground: 0 0% 98%; --foreground: 0 0% 98%;
--card: 236 62% 5%; --card: 236 62% 5%;

1
platform/docs/tailwind.config.js
View File

@ -43,6 +43,7 @@ module.exports = {
extend: { extend: {
colors: { colors: {
highlight: 'hsl(var(--highlight))', highlight: 'hsl(var(--highlight))',
neutral: 'hsl(var(--neutral))',
border: 'hsl(var(--border))', border: 'hsl(var(--border))',
input: 'hsl(var(--input))', input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))', ring: 'hsl(var(--ring))',

2
platform/ui-next/src/components/ScrollArea/ScrollArea.tsx
View File

@ -114,7 +114,7 @@ const ScrollBar = React.forwardRef<
)} )}
{...props} {...props}
> >
<ScrollAreaPrimitive.ScrollAreaThumb className="bg-input relative flex-1 rounded-full" /> <ScrollAreaPrimitive.ScrollAreaThumb className="bg-neutral/50 relative flex-1 rounded-full" />
</ScrollAreaPrimitive.ScrollAreaScrollbar> </ScrollAreaPrimitive.ScrollAreaScrollbar>
)); ));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName; ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

8
platform/ui-next/src/components/Viewport/ImageScrollbar.module.css
View File

@ -32,7 +32,8 @@
/* Thumb styles for WebKit browsers - more specific selector */ /* Thumb styles for WebKit browsers - more specific selector */
input[type='range'].scrollbarInput::-webkit-slider-thumb { input[type='range'].scrollbarInput::-webkit-slider-thumb {
-webkit-appearance: none !important; -webkit-appearance: none !important;
background-color: hsl(var(--input)); background-color: hsl(var(--neutral));
opacity: 50%;
border: none; border: none;
border-radius: 57px; border-radius: 57px;
cursor: -webkit-grab; cursor: -webkit-grab;
@ -44,12 +45,14 @@ input[type='range'].scrollbarInput::-webkit-slider-thumb {
input[type='range'].scrollbarInput::-webkit-slider-thumb:active, input[type='range'].scrollbarInput::-webkit-slider-thumb:active,
input[type='range'].scrollbarInput::-webkit-slider-thumb:hover { input[type='range'].scrollbarInput::-webkit-slider-thumb:hover {
background-color: hsl(var(--primary)); background-color: hsl(var(--primary));
opacity: 60%;
cursor: -webkit-grabbing; cursor: -webkit-grabbing;
} }
/* Thumb styles for Firefox - more specific selector */ /* Thumb styles for Firefox - more specific selector */
input[type='range'].scrollbarInput::-moz-range-thumb { input[type='range'].scrollbarInput::-moz-range-thumb {
background-color: hsl(var(--input)); background-color: hsl(var(--neutral));
opacity: 50%;
border: none; border: none;
border-radius: 57px; border-radius: 57px;
cursor: -moz-grab; cursor: -moz-grab;
@ -60,6 +63,7 @@ input[type='range'].scrollbarInput::-moz-range-thumb {
input[type='range'].scrollbarInput::-moz-range-thumb:active, input[type='range'].scrollbarInput::-moz-range-thumb:active,
input[type='range'].scrollbarInput::-moz-range-thumb:hover { input[type='range'].scrollbarInput::-moz-range-thumb:hover {
background-color: hsl(var(--primary)); background-color: hsl(var(--primary));
opacity: 50%;
cursor: -moz-grabbing; cursor: -moz-grabbing;
} }

3
platform/ui-next/src/tailwind.css
View File

@ -9,6 +9,7 @@
@layer base { @layer base {
:root { :root {
--highlight: 191 74% 63%; --highlight: 191 74% 63%;
--neutral: 213 22% 59%;
--background: 236 62% 5%; --background: 236 62% 5%;
--foreground: 0 0% 98%; --foreground: 0 0% 98%;
--card: 234 64% 10%; --card: 234 64% 10%;
@ -252,4 +253,4 @@ input[type='number']::-webkit-outer-spin-button {
input[type='number'] { input[type='number'] {
-moz-appearance: textfield; /* For Firefox */ -moz-appearance: textfield; /* For Firefox */
} }

1
platform/ui-next/tailwind.config.js
View File

@ -44,6 +44,7 @@ module.exports = {
extend: { extend: {
colors: { colors: {
highlight: 'hsl(var(--highlight))', highlight: 'hsl(var(--highlight))',
neutral: 'hsl(var(--neutral))',
border: 'hsl(var(--border))', border: 'hsl(var(--border))',
input: 'hsl(var(--input))', input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))', ring: 'hsl(var(--ring))',

5
platform/ui/src/tailwind.css
View File

@ -11,8 +11,6 @@
} }
} }
/* Truncate 2 lines utility */ /* Truncate 2 lines utility */
.truncate-2-lines { .truncate-2-lines {
overflow: hidden; overflow: hidden;
@ -34,6 +32,7 @@
@layer base { @layer base {
:root { :root {
--highlight: 191 74% 63%; --highlight: 191 74% 63%;
--neutral: 213 22% 59%;
--background: 236 62% 5%; --background: 236 62% 5%;
--foreground: 0 0% 98%; --foreground: 0 0% 98%;
--card: 236 62% 5%; --card: 236 62% 5%;
@ -102,4 +101,4 @@
--chart-4: 280 65% 60%; --chart-4: 280 65% 60%;
--chart-5: 340 75% 55%; --chart-5: 340 75% 55%;
} }
} }