theme.ts

export const defaultTheme = {
  container: 'colorpickr round inline-block w240 txt-xs flex flex--column',
  gradientContainer: 'flex-child-no-shrink mb6 h240 w-full overflow-hidden',
  sliderContainer: 'flex-child-no-shrink mb6',
  controlsContainer:
    'flex flex--space-between-main flex-child-no-shrink border-b border--gray-light',
  modesContainer: '',
  eyeDropperIcon: 'h18 w18 icon events-none',
  eyeDropper: 'link link--gray pb6 px3 mb-neg1',
  modeToggle: 'link link--gray pb6 px3 mb-neg1',
  modeToggleActive: 'is-active border-b border-gray',
  valuesModeContainer: 'mt12',
  valuesModeGroup: 'border-b border--gray-lighter mb12 pb12',
  valuesMode: 'mb3 flex flex--center-cross',
  valuesModeLabel:
    'flex-child-no-shrink color-gray align-l w12 mr6 txt-capitalize',
  valuesModeSlider: 'w-full mr12',
  valuesModeInput: 'flex-child-no-shrink w60',
  tileBackground: 'bg-tile',
  colorSpaceSelectContainer: 'w-7/12',
  colorSpaceSelect: 'txt-s color-gray',
  gradient: 'absolute top right bottom left',
  gradientHue: 'gradient-hue',
  xyControlContainer: 'relative w-full h-full cursor-pointer',
  xyControl:
    'absolute z1 round-full border border--2 border--white cursor-move',
  xyControlDark: 'border--black',
  xyControlDisabled: 'opacity50',
  numberInput: 'w-full input input--s',
  swatch:
    'block w-full txt-bold align-center color-transparent color-white-on-hover transition h24',
  modeInputContainer: 'flex mb6',
  colorSpaceContainer: 'w-1/2 h24 flex flex--center-cross',
  colorInputContainer: 'w-1/2',
  swatchCompareContainer: 'flex round overflow-hidden',
  currentSwatchContainer: 'w-1/2 h24 border-r border--gray-faint',
  newSwatchContainer: 'w-1/2 h24'
};