Skip to content

Commit

Permalink
Clean up colors, box shadows and defaults
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Jul 21, 2022
1 parent 47ec300 commit 9acaa77
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 127 deletions.
18 changes: 10 additions & 8 deletions packages/components/src/slider/slider/hook.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useCallback, useMemo, useState } from '@wordpress/element';
* Internal dependencies
*/
import * as styles from '../styles';
import { COLORS, CONFIG } from '../../utils';
import { useContextSystem, WordPressComponentProps } from '../../ui/context';
import { useFormGroupContextId } from '../../ui/form-group';
import { useControlledValue, useCx } from '../../utils/hooks';
Expand All @@ -25,6 +26,7 @@ export function useSlider(
className,
defaultValue,
error,
errorColor = CONFIG.controlDestructiveBorderColor,
onBlur = noop,
onChange: onChangeProp = noop,
onFocus = noop,
Expand All @@ -34,9 +36,9 @@ export function useSlider(
min = 0,
size = 'default',
style,
thumbColor,
trackColor,
trackBackgroundColor,
thumbColor = COLORS.admin.theme,
trackColor = COLORS.admin.theme,
trackBackgroundColor = CONFIG.controlBackgroundDimColor,
value: valueProp,
...otherProps
} = useContextSystem( props, 'Slider' );
Expand Down Expand Up @@ -104,19 +106,19 @@ export function useSlider(
// Generate dynamic class names.
const cx = useCx();
const classes = useMemo( () => {
const colors = { thumbColor, trackColor, trackBackgroundColor };
return cx(
styles.slider( colors ),
error && styles.error,
styles.slider( { thumbColor, trackColor, trackBackgroundColor } ),
error && styles.error( { errorColor, trackBackgroundColor } ),
styles[ size ],
isFocused && styles.focused( colors ),
error && isFocused && styles.focusedError,
isFocused && styles.focused( thumbColor ),
error && isFocused && styles.focusedError( errorColor ),
className
);
}, [
className,
cx,
error,
errorColor,
isFocused,
size,
thumbColor,
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/slider/stories/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const meta: ComponentMeta< typeof Slider > = {
title: 'Components (Experimental)/Slider',
component: Slider,
argTypes: {
errorColor: { control: { type: 'color' } },
onChange: { action: 'onChange' },
size: {
control: 'select',
Expand Down
108 changes: 47 additions & 61 deletions packages/components/src/slider/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,38 +10,32 @@ import type { CSSProperties } from 'react';
import { COLORS, CONFIG } from '../utils';
import { SliderColors } from './types';

const getBoxShadowStyle = (
color: CSSProperties[ 'color' ] = COLORS.admin.theme
) => {
const getBoxShadowStyle = ( color: CSSProperties[ 'color' ] ) => {
return `
0 0 0 ${ CONFIG.controlPseudoBoxShadowFocusWidth } ${ CONFIG.surfaceBackgroundColor },
0 0 0 calc(${ CONFIG.controlPseudoBoxShadowFocusWidth } + 1px) ${ color }
`;
};

const getFocusBoxShadow = ( color: CSSProperties[ 'boxShadow' ] ) => {
const getFocusBoxShadow = ( color: CSSProperties[ 'color' ] ) => {
const boxShadow = getBoxShadowStyle( color );
return css`
&::-webkit-slider-thumb {
box-shadow: ${ color };
box-shadow: ${ boxShadow };
}
&::-moz-range-thumb {
box-shadow: ${ color };
box-shadow: ${ boxShadow };
}
`;
};

export const focusedError = css`
${ getFocusBoxShadow( getBoxShadowStyle( COLORS.alert.red ) ) };
`;

const thumbStyles = ( colors: SliderColors ) => {
const { thumbColor = CONFIG.sliderThumbBackgroundColor } = colors;
const thumbStyles = ( thumbColor: CSSProperties[ 'color' ] ) => {
return css`
appearance: none;
background-color: ${ thumbColor };
border: 1px solid ${ CONFIG.sliderThumbBorderColor };
border: 1px solid transparent;
border-radius: 50%;
box-shadow: ${ CONFIG.sliderThumbBoxShadow };
box-shadow: none;
cursor: pointer;
height: 12px;
margin-top: -5px;
Expand All @@ -56,13 +50,7 @@ const disabledThumbStyles = css`
border-color: ${ COLORS.ui.textDisabled };
`;

const trackStyles = ( colors: SliderColors ) => {
const {
thumbColor = COLORS.admin.theme,
trackColor = COLORS.admin.theme,
trackBackgroundColor = CONFIG.controlBackgroundDimColor,
} = colors;

const trackStyles = ( { trackColor, trackBackgroundColor }: SliderColors ) => {
return css`
background: linear-gradient(
to right,
Expand All @@ -74,7 +62,7 @@ const trackStyles = ( colors: SliderColors ) => {
`;
};

export const slider = ( colors ) => {
export const slider = ( colors: SliderColors ) => {
return css`
appearance: none;
background-color: transparent;
Expand Down Expand Up @@ -115,14 +103,14 @@ export const slider = ( colors ) => {
/* Vendor prefixes don't work correctly when comma separated. */
&::-webkit-slider-thumb {
${ thumbStyles( colors ) }
${ thumbStyles( colors.thumbColor ) }
*:disabled& {
${ disabledThumbStyles }
}
}
&::-moz-range-thumb {
${ thumbStyles( colors ) }
${ thumbStyles( colors.thumbColor ) }
will-change: transform;
*:disabled& {
Expand All @@ -131,51 +119,49 @@ export const slider = ( colors ) => {
}
&:focus {
${ getFocusBoxShadow( getBoxShadowStyle( colors?.thumbColor ) ) }
${ getFocusBoxShadow( colors.thumbColor ) }
}
`;
};

export const focused = ( colors: SliderColors ) => {
export const focused = ( thumbColor: CSSProperties[ 'color' ] ) =>
getFocusBoxShadow( thumbColor );

export const focusedError = ( errorColor: CSSProperties[ 'color' ] ) =>
getFocusBoxShadow( errorColor );

export const error = ( { errorColor, trackBackgroundColor }: SliderColors ) => {
return css`
${ getFocusBoxShadow( getBoxShadowStyle( colors?.thumbColor ) ) }
&::-webkit-slider-runnable-track {
background: linear-gradient(
to right,
${ errorColor } calc( var( --slider--progress ) ),
${ trackBackgroundColor } calc( var( --slider--progress ) )
);
}
&::-moz-range-track {
background: linear-gradient(
to right,
${ errorColor } calc( var( --slider--progress ) ),
${ trackBackgroundColor } calc( var( --slider--progress ) )
);
}
&::-webkit-slider-thumb {
background-color: ${ errorColor };
border: 1px solid ${ errorColor };
}
&::-moz-range-thumb {
background-color: ${ errorColor };
border: 1px solid ${ errorColor };
}
&:focus {
${ getFocusBoxShadow( errorColor ) };
}
`;
};

export const error = css`
&::-webkit-slider-runnable-track {
background: linear-gradient(
to right,
${ CONFIG.controlDestructiveBorderColor }
calc( var( --slider--progress ) ),
${ CONFIG.controlBackgroundDimColor }
calc( var( --slider--progress ) )
);
}
&::-moz-range-track {
background: linear-gradient(
to right,
${ CONFIG.controlDestructiveBorderColor }
calc( var( --slider--progress ) ),
${ CONFIG.controlBackgroundDimColor }
calc( var( --slider--progress ) )
);
}
&::-webkit-slider-thumb {
background-color: ${ CONFIG.controlDestructiveBorderColor };
border: 1px solid ${ CONFIG.controlDestructiveBorderColor };
}
&::-moz-range-thumb {
background-color: ${ CONFIG.controlDestructiveBorderColor };
border: 1px solid ${ CONFIG.controlDestructiveBorderColor };
}
&:focus {
${ getFocusBoxShadow( getBoxShadowStyle( COLORS.alert.red ) ) };
}
`;

export const large = css`
/*
* Uses hardcoded 40px height to match design goal instead of
Expand Down
12 changes: 12 additions & 0 deletions packages/components/src/slider/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,30 @@
import type { CSSProperties } from 'react';

export type SliderColors = {
/**
* CSS color string to customize the Slider's error state.
*
* @default CONFIG.controlDestructiveBorderColor
*/
errorColor?: CSSProperties[ 'color' ];
/**
* Allows customization of the thumb's color.
*
* @default COLORS.admin.theme
*/
thumbColor?: CSSProperties[ 'color' ];
/**
* CSS color string to customize the track elements foreground color. This
* is the portion of the Slider's track representing progress or the actual
* value selected.
*
* @default COLORS.admin.theme
*/
trackColor?: CSSProperties[ 'color' ];
/**
* CSS color string to customize the background for the track element.
*
* @default CONFIG.controlBackgroundDimColor
*/
trackBackgroundColor?: CSSProperties[ 'color' ];
};
Expand Down
104 changes: 46 additions & 58 deletions packages/components/src/utils/config-values.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,6 @@ const CONTROL_PROPS = {
controlHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,
};

const SLIDER_PROPS = {
sliderThumbBorderColor: 'transparent',
sliderThumbBoxShadow: 'none',
sliderThumbBackgroundColor: COLORS.admin.theme,
};

const TOGGLE_GROUP_CONTROL_PROPS = {
toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
toggleGroupControlBorderColor: COLORS.ui.border,
Expand All @@ -48,55 +42,49 @@ const TOGGLE_GROUP_CONTROL_PROPS = {

// Using Object.assign to avoid creating circular references when emitting
// TypeScript type declarations.
export default Object.assign(
{},
CONTROL_PROPS,
SLIDER_PROPS,
TOGGLE_GROUP_CONTROL_PROPS,
{
colorDivider: 'rgba(0, 0, 0, 0.1)',
colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',
elevationIntensity: 1,
radiusBlockUi: '2px',
borderWidth: '1px',
borderWidthFocus: '1.5px',
borderWidthTab: '4px',
spinnerSize: 16,
fontSize: '13px',
fontSizeH1: 'calc(2.44 * 13px)',
fontSizeH2: 'calc(1.95 * 13px)',
fontSizeH3: 'calc(1.56 * 13px)',
fontSizeH4: 'calc(1.25 * 13px)',
fontSizeH5: '13px',
fontSizeH6: 'calc(0.8 * 13px)',
fontSizeInputMobile: '16px',
fontSizeMobile: '15px',
fontSizeSmall: 'calc(0.92 * 13px)',
fontSizeXSmall: 'calc(0.75 * 13px)',
fontLineHeightBase: '1.2',
fontWeight: 'normal',
fontWeightHeading: '600',
gridBase: '4px',
cardBorderRadius: '2px',
cardPaddingXSmall: `${ space( 2 ) }`,
cardPaddingSmall: `${ space( 4 ) }`,
cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
surfaceBackgroundColor: COLORS.white,
surfaceBackgroundSubtleColor: '#F3F3F3',
surfaceBackgroundTintColor: '#F5F5F5',
surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',
surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',
surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',
surfaceBackgroundTertiaryColor: COLORS.white,
surfaceColor: COLORS.white,
transitionDuration: '200ms',
transitionDurationFast: '160ms',
transitionDurationFaster: '120ms',
transitionDurationFastest: '100ms',
transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',
transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)',
}
);
export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
colorDivider: 'rgba(0, 0, 0, 0.1)',
colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',
elevationIntensity: 1,
radiusBlockUi: '2px',
borderWidth: '1px',
borderWidthFocus: '1.5px',
borderWidthTab: '4px',
spinnerSize: 16,
fontSize: '13px',
fontSizeH1: 'calc(2.44 * 13px)',
fontSizeH2: 'calc(1.95 * 13px)',
fontSizeH3: 'calc(1.56 * 13px)',
fontSizeH4: 'calc(1.25 * 13px)',
fontSizeH5: '13px',
fontSizeH6: 'calc(0.8 * 13px)',
fontSizeInputMobile: '16px',
fontSizeMobile: '15px',
fontSizeSmall: 'calc(0.92 * 13px)',
fontSizeXSmall: 'calc(0.75 * 13px)',
fontLineHeightBase: '1.2',
fontWeight: 'normal',
fontWeightHeading: '600',
gridBase: '4px',
cardBorderRadius: '2px',
cardPaddingXSmall: `${ space( 2 ) }`,
cardPaddingSmall: `${ space( 4 ) }`,
cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
surfaceBackgroundColor: COLORS.white,
surfaceBackgroundSubtleColor: '#F3F3F3',
surfaceBackgroundTintColor: '#F5F5F5',
surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',
surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',
surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',
surfaceBackgroundTertiaryColor: COLORS.white,
surfaceColor: COLORS.white,
transitionDuration: '200ms',
transitionDurationFast: '160ms',
transitionDurationFaster: '120ms',
transitionDurationFastest: '100ms',
transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',
transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)',
} );

0 comments on commit 9acaa77

Please sign in to comment.