Skip to content

Commit

Permalink
PR fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@ValentinaKozlova
ValentinaKozlova committed Jan 20, 2025
1 parent 857497f commit 8975b05
Showing 1 changed file with 66 additions and 53 deletions.
119 changes: 66 additions & 53 deletions ...ges/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,19 @@ export const sliderCSSVars = {
sliderThumbPositionVar: `--fui-Slider__thumb--position`,
};

const {
sliderDirectionVar,
sliderInnerThumbRadiusVar,
sliderProgressVar,
sliderProgressColorVar,
sliderRailSizeVar,
sliderRailColorVar,
sliderStepsPercentVar,
sliderThumbColorVar,
sliderThumbSizeVar,
sliderThumbPositionVar,
} = sliderCSSVars;

/**
* Styles for the root slot
*/
Expand All @@ -37,62 +50,62 @@ const useRootStyles = makeStyles({
},

small: {
[sliderCSSVars.sliderThumbSizeVar]: '16px',
[sliderCSSVars.sliderInnerThumbRadiusVar]: '5px',
[sliderCSSVars.sliderRailSizeVar]: '2px',
[sliderThumbSizeVar]: '16px',
[sliderInnerThumbRadiusVar]: '5px',
[sliderRailSizeVar]: '2px',
minHeight: '24px',
},

medium: {
[sliderCSSVars.sliderThumbSizeVar]: '20px',
[sliderCSSVars.sliderInnerThumbRadiusVar]: '6px',
[sliderCSSVars.sliderRailSizeVar]: '4px',
[sliderThumbSizeVar]: '20px',
[sliderInnerThumbRadiusVar]: '6px',
[sliderRailSizeVar]: '4px',
minHeight: '32px',
},

horizontal: {
minWidth: '120px',
// 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
gridTemplateRows: `1fr var(${sliderCSSVars.sliderThumbSizeVar}) 1fr`,
gridTemplateColumns: `1fr calc(100% - var(${sliderCSSVars.sliderThumbSizeVar})) 1fr`,
gridTemplateRows: `1fr var(${sliderThumbSizeVar}) 1fr`,
gridTemplateColumns: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,
},

vertical: {
minHeight: '120px',
// 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
gridTemplateRows: `1fr calc(100% - var(${sliderCSSVars.sliderThumbSizeVar})) 1fr`,
gridTemplateColumns: `1fr var(${sliderCSSVars.sliderThumbSizeVar}) 1fr`,
gridTemplateRows: `1fr calc(100% - var(${sliderThumbSizeVar})) 1fr`,
gridTemplateColumns: `1fr var(${sliderThumbSizeVar}) 1fr`,
},

enabled: {
[sliderCSSVars.sliderRailColorVar]: tokens.colorNeutralStrokeAccessible,
[sliderCSSVars.sliderProgressColorVar]: tokens.colorCompoundBrandBackground,
[sliderCSSVars.sliderThumbColorVar]: tokens.colorCompoundBrandBackground,
[sliderRailColorVar]: tokens.colorNeutralStrokeAccessible,
[sliderProgressColorVar]: tokens.colorCompoundBrandBackground,
[sliderThumbColorVar]: tokens.colorCompoundBrandBackground,
':hover': {
[sliderCSSVars.sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,
[sliderCSSVars.sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover,
[sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundHover,
[sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundHover,
},
':active': {
[sliderCSSVars.sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,
[sliderCSSVars.sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed,
[sliderThumbColorVar]: tokens.colorCompoundBrandBackgroundPressed,
[sliderProgressColorVar]: tokens.colorCompoundBrandBackgroundPressed,
},
'@media (forced-colors: active)': {
[sliderCSSVars.sliderRailColorVar]: 'CanvasText',
[sliderCSSVars.sliderThumbColorVar]: 'Highlight',
[sliderCSSVars.sliderProgressColorVar]: 'Highlight',
[sliderRailColorVar]: 'CanvasText',
[sliderThumbColorVar]: 'Highlight',
[sliderProgressColorVar]: 'Highlight',
':hover': {
[sliderCSSVars.sliderThumbColorVar]: 'Highlight',
[sliderCSSVars.sliderProgressColorVar]: 'Highlight',
[sliderThumbColorVar]: 'Highlight',
[sliderProgressColorVar]: 'Highlight',
},
},
},

disabled: {
[sliderCSSVars.sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,
[sliderCSSVars.sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,
[sliderCSSVars.sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,
[sliderThumbColorVar]: tokens.colorNeutralForegroundDisabled,
[sliderRailColorVar]: tokens.colorNeutralBackgroundDisabled,
[sliderProgressColorVar]: tokens.colorNeutralForegroundDisabled,
'@media (forced-colors: active)': {
[sliderCSSVars.sliderRailColorVar]: 'GrayText',
[sliderRailColorVar]: 'GrayText',
[sliderCSSVars.sliderThumbColorVar]: 'GrayText',
[sliderCSSVars.sliderProgressColorVar]: 'GrayText',
},
Expand Down Expand Up @@ -124,10 +137,10 @@ const useRailStyles = makeStyles({
forcedColorAdjust: 'none',
// Background gradient represents the progress of the slider
backgroundImage: `linear-gradient(
var(${sliderCSSVars.sliderDirectionVar}),
var(${sliderCSSVars.sliderProgressColorVar}) 0%,
var(${sliderCSSVars.sliderProgressColorVar}) var(${sliderCSSVars.sliderProgressVar}),
var(${sliderCSSVars.sliderRailColorVar}) var(${sliderCSSVars.sliderProgressVar})
var(${sliderDirectionVar}),
var(${sliderProgressColorVar}) 0%,
var(${sliderProgressColorVar}) var(${sliderProgressVar}),
var(${sliderRailColorVar}) var(${sliderProgressVar})
)`,
outlineWidth: '1px',
outlineStyle: 'solid',
Expand All @@ -137,40 +150,40 @@ const useRailStyles = makeStyles({
position: 'absolute',
// Repeating gradient represents the steps if provided
backgroundImage: `repeating-linear-gradient(
var(${sliderCSSVars.sliderDirectionVar}),
var(${sliderDirectionVar}),
#0000 0%,
#0000 calc(var(${sliderCSSVars.sliderStepsPercentVar}) - 1px),
${tokens.colorNeutralBackground1} calc(var(${sliderCSSVars.sliderStepsPercentVar}) - 1px),
${tokens.colorNeutralBackground1} var(${sliderCSSVars.sliderStepsPercentVar})
#0000 calc(var(${sliderStepsPercentVar}) - 1px),
${tokens.colorNeutralBackground1} calc(var(${sliderStepsPercentVar}) - 1px),
${tokens.colorNeutralBackground1} var(${sliderStepsPercentVar})
)`,
// force steps to use HighlightText for high contrast mode
'@media (forced-colors: active)': {
backgroundImage: `repeating-linear-gradient(
var(${sliderCSSVars.sliderDirectionVar}),
var(${sliderDirectionVar}),
#0000 0%,
#0000 calc(var(${sliderCSSVars.sliderStepsPercentVar}) - 1px),
HighlightText calc(var(${sliderCSSVars.sliderStepsPercentVar}) - 1px),
HighlightText var(${sliderCSSVars.sliderStepsPercentVar})
#0000 calc(var(${sliderStepsPercentVar}) - 1px),
HighlightText calc(var(${sliderStepsPercentVar}) - 1px),
HighlightText var(${sliderStepsPercentVar})
)`,
},
},
},

horizontal: {
width: '100%',
height: `var(${sliderCSSVars.sliderRailSizeVar})`,
height: `var(${sliderRailSizeVar})`,
'::before': {
left: '-1px',
right: '-1px',
height: `var(${sliderCSSVars.sliderRailSizeVar})`,
height: `var(${sliderRailSizeVar})`,
},
},

vertical: {
width: `var(${sliderCSSVars.sliderRailSizeVar})`,
width: `var(${sliderRailSizeVar})`,
height: '100%',
'::before': {
width: `var(${sliderCSSVars.sliderRailSizeVar})`,
width: `var(${sliderRailSizeVar})`,
top: '-1px',
bottom: '-1px',
},
Expand All @@ -185,20 +198,20 @@ const useThumbStyles = makeStyles({
// Ensure the thumb stays within the track boundaries.
// When the value is at 0% or 100%, the distance from the track edge
// to the thumb center equals the inner thumb radius.
[`${sliderCSSVars.sliderThumbPositionVar}`]: `clamp(var(${sliderCSSVars.sliderInnerThumbRadiusVar}), var(${sliderCSSVars.sliderProgressVar}), calc(100% - var(${sliderCSSVars.sliderInnerThumbRadiusVar})))`,
[`${sliderThumbPositionVar}`]: `clamp(var(${sliderInnerThumbRadiusVar}), var(${sliderProgressVar}), calc(100% - var(${sliderInnerThumbRadiusVar})))`,
gridRowStart: '2',
gridRowEnd: '2',
gridColumnStart: '2',
gridColumnEnd: '2',
position: 'absolute',
width: `var(${sliderCSSVars.sliderThumbSizeVar})`,
height: `var(${sliderCSSVars.sliderThumbSizeVar})`,
width: `var(${sliderThumbSizeVar})`,
height: `var(${sliderThumbSizeVar})`,
pointerEvents: 'none',
outlineStyle: 'none',
forcedColorAdjust: 'none',
borderRadius: tokens.borderRadiusCircular,
boxShadow: `0 0 0 calc(var(${sliderCSSVars.sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,
backgroundColor: `var(${sliderCSSVars.sliderThumbColorVar})`,
boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,
backgroundColor: `var(${sliderThumbColorVar})`,
'::before': {
position: 'absolute',
top: '0px',
Expand All @@ -208,21 +221,21 @@ const useThumbStyles = makeStyles({
borderRadius: tokens.borderRadiusCircular,
boxSizing: 'border-box',
content: "''",
border: `calc(var(${sliderCSSVars.sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`,
border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralStroke1}`,
},
},
disabled: {
'::before': {
border: `calc(var(${sliderCSSVars.sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`,
border: `calc(var(${sliderThumbSizeVar}) * .05) solid ${tokens.colorNeutralForegroundDisabled}`,
},
},
horizontal: {
transform: 'translateX(-50%)',
left: `var(${sliderCSSVars.sliderThumbPositionVar})`,
left: `var(${sliderThumbPositionVar})`,
},
vertical: {
transform: 'translateY(50%)',
bottom: `var(${sliderCSSVars.sliderThumbPositionVar})`,
bottom: `var(${sliderThumbPositionVar})`,
},
});

Expand All @@ -244,12 +257,12 @@ const useInputStyles = makeStyles({
cursor: 'default',
},
horizontal: {
height: `var(${sliderCSSVars.sliderThumbSizeVar})`,
height: `var(${sliderThumbSizeVar})`,
width: '100%',
},
vertical: {
height: '100%',
width: `var(${sliderCSSVars.sliderThumbSizeVar})`,
width: `var(${sliderThumbSizeVar})`,
'-webkit-appearance': 'slider-vertical',
},
});
Expand Down

0 comments on commit 8975b05

Please sign in to comment.