apphouse/dist/components/common/SliderToggle/SliderToggle.styles.ts

Component library for React that uses observable state management and theme-able components.

import { CSSProperties } from 'glamor';
import { UseStyles } from '../../../styles/defaults/styles.interface';
import { ApphouseTheme } from '../../../styles/defaults/themes.interface';
import { mergeStyles } from '../../../styles/mergeStyles';

export interface ButtonOptionToggleStyle {
  text?: CSSProperties;
  label?: CSSProperties;
  input?: CSSProperties;
  selected?: CSSProperties;
}

export interface SliderToggleStyles {
  container?: CSSProperties;
  colorSchemeToggle?: CSSProperties;
  buttonOptionToggle?: ButtonOptionToggleStyle;
}

function getSliderStyles(theme: ApphouseTheme): SliderToggleStyles {
  const { colors } = theme;

  const SliderToggleStyles: SliderToggleStyles = {
    container: {
      boxSizing: 'content-box',
      color: colors.brand,
      borderBottomColor: colors.brand,
      borderBottomStyle: 'solid',
      borderBottomWidth: '1px',
      borderImageOutset: '0',
      borderImageRepeat: 'stretch',
      borderImageSlice: '100%',
      borderImageSource: 'none',
      borderImageWidth: '1',
      borderLeftColor: colors.brand,
      borderLeftStyle: 'solid',
      borderLeftWidth: '1px',
      borderRightColor: colors.brand,
      borderRightStyle: 'solid',
      borderRightWidth: '1px',
      borderTopColor: colors.brand,
      borderTopStyle: 'solid',
      borderTopWidth: '1px',
      borderRadius: '16px'
    },
    colorSchemeToggle: {
      fontSize: '12px',
      lineHeight: '1.33337',
      fontWeight: '400',
      letterSpacing: '-.01em'
    },
    buttonOptionToggle: {}
  };

  return SliderToggleStyles;
}

function getButtonToggleStyles(theme: ApphouseTheme): ButtonOptionToggleStyle {
  const { colors } = theme;

  return {
    input: {
      position: 'absolute',
      clip: 'rect(1px, 1px, 1px, 1px)',
      clipPath: 'inset(0px 0px 99.9% 99.9%)',
      overflow: 'hidden',
      height: '1px',
      width: '1px',
      padding: '0',
      border: '0',
      appearance: 'none'
    },
    text: {
      backgroundColor: 'transparent',
      color: colors.brand,
      boxSizing: 'border-box',
      display: 'inline-block',
      padding: '1px 6px',
      minWidth: '42px',
      border: '1px solid transparent',
      borderRadius: '17px',
      textAlign: 'center'
    },
    selected: {
      backgroundColor: colors.brand,
      color: colors.onBrand,
      boxSizing: 'border-box',
      display: 'inline-block',
      padding: '1px 6px',
      minWidth: '42px',
      border: '1px solid transparent',
      borderRadius: '17px',
      textAlign: 'center'
    }
  };
}

export function useSliderToggleStyles(styles: UseStyles<SliderToggleStyles>) {
  const componentStyles = getSliderStyles(styles.theme);
  return mergeStyles(componentStyles, styles?.overwrites);
}

export function useButtonToggleStyles(
  styles: UseStyles<ButtonOptionToggleStyle>
) {
  const componentStyles = getButtonToggleStyles(styles.theme);
  return mergeStyles(componentStyles, styles?.overwrites);
}