From 593ed5962019adb521d59f33c75dbaacd50a8749 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Thu, 21 Jul 2022 16:24:56 +1000 Subject: [PATCH] Clean up colors, box shadows and defaults --- packages/components/src/slider/slider/hook.ts | 18 +-- .../components/src/slider/stories/index.tsx | 1 + packages/components/src/slider/styles.ts | 108 ++++++++---------- packages/components/src/slider/types.ts | 12 ++ .../components/src/utils/config-values.js | 104 ++++++++--------- 5 files changed, 116 insertions(+), 127 deletions(-) diff --git a/packages/components/src/slider/slider/hook.ts b/packages/components/src/slider/slider/hook.ts index 633c9f0034f1e9..7ce1aafd70819e 100644 --- a/packages/components/src/slider/slider/hook.ts +++ b/packages/components/src/slider/slider/hook.ts @@ -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'; @@ -25,6 +26,7 @@ export function useSlider( className, defaultValue, error, + errorColor = CONFIG.controlDestructiveBorderColor, onBlur = noop, onChange: onChangeProp = noop, onFocus = noop, @@ -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' ); @@ -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, diff --git a/packages/components/src/slider/stories/index.tsx b/packages/components/src/slider/stories/index.tsx index 96431b27c51360..96103e9d883400 100644 --- a/packages/components/src/slider/stories/index.tsx +++ b/packages/components/src/slider/stories/index.tsx @@ -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', diff --git a/packages/components/src/slider/styles.ts b/packages/components/src/slider/styles.ts index 73d5376a7c6a2d..661163003c889c 100644 --- a/packages/components/src/slider/styles.ts +++ b/packages/components/src/slider/styles.ts @@ -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; @@ -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, @@ -74,7 +62,7 @@ const trackStyles = ( colors: SliderColors ) => { `; }; -export const slider = ( colors ) => { +export const slider = ( colors: SliderColors ) => { return css` appearance: none; background-color: transparent; @@ -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& { @@ -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 diff --git a/packages/components/src/slider/types.ts b/packages/components/src/slider/types.ts index cffbb920e7f602..cd1bc3da8bd923 100644 --- a/packages/components/src/slider/types.ts +++ b/packages/components/src/slider/types.ts @@ -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' ]; }; diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js index 7d4e9cd02b3053..9937fa69407802 100644 --- a/packages/components/src/utils/config-values.js +++ b/packages/components/src/utils/config-values.js @@ -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, @@ -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)', +} );