@instructure/ui-color-picker 8.25.1-snapshot-20

package/src/ColorMixer/Slider/props.ts

@@ -0,0 +1,94 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+  OtherHTMLAttributes,
+  PropValidators,
+  ColorMixerSliderTheme
+} from '@instructure/shared-types'
+
+type SliderOwnProps = {
+  isColorSlider?: boolean
+  onChange: (position: number) => void
+  width: number
+  value: number
+  minValue: number
+  maxValue: number
+  indicatorRadius: number
+  height: number
+  elementRef?: (element: Element | null) => void
+  navigationExplanationScreenReaderLabel: string
+}
+
+type PropKeys = keyof SliderOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type SliderProps = SliderOwnProps &
+  WithStyleProps<ColorMixerSliderTheme, SliderStyle> &
+  OtherHTMLAttributes<SliderOwnProps>
+
+type SliderStyleProps = {
+  sliderPositionFromValue: number
+}
+
+type SliderStyle = ComponentStyle<
+  | 'colorSlider'
+  | 'indicator'
+  | 'slider'
+  | 'sliderBackground'
+  | 'disabledOverlay'
+>
+
+const propTypes: PropValidators<PropKeys> = {
+  isColorSlider: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  width: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+  minValue: PropTypes.number.isRequired,
+  maxValue: PropTypes.number.isRequired,
+  indicatorRadius: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  elementRef: PropTypes.func,
+  navigationExplanationScreenReaderLabel: PropTypes.string.isRequired
+}
+
+const allowedProps: AllowedPropKeys = [
+  'isColorSlider',
+  'onChange',
+  'width',
+  'value',
+  'minValue',
+  'maxValue',
+  'indicatorRadius',
+  'height',
+  'elementRef',
+  'navigationExplanationScreenReaderLabel'
+]
+
+export type { SliderProps, SliderStyle, SliderStyleProps }
+export { propTypes, allowedProps }

package/src/ColorMixer/Slider/styles.ts

@@ -0,0 +1,114 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { ColorMixerSliderTheme } from '@instructure/shared-types'
+import type { SliderStyle, SliderProps, SliderStyleProps } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: ColorMixerSliderTheme,
+  props: SliderProps,
+  state: SliderStyleProps
+): SliderStyle => {
+  const sliderBackground = props.isColorSlider
+    ? {
+        background:
+          'linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)'
+      }
+    : {
+        background: componentTheme.checkerboardBackgroundImage,
+        backgroundSize: componentTheme.checkerboardBackgroundSize,
+        backgroundPosition: componentTheme.checkerboardBackgroundPosition
+      }
+
+  return {
+    colorSlider: {
+      label: 'colorMixerSlider'
+    },
+    indicator: {
+      label: 'colorMixerSlider__indicator',
+      width: `${props.indicatorRadius / 8}rem`,
+      height: `${props.indicatorRadius / 8}rem`,
+      borderRadius: `${props.indicatorRadius / 8}rem`,
+      background: 'white',
+      position: 'absolute',
+      borderStyle: 'solid',
+      borderWidth: componentTheme.indicatorBorderWidth,
+      borderColor: componentTheme.indicatorBorderColor,
+      top: `-0.1875rem`,
+      left: `${
+        (state?.sliderPositionFromValue - props.indicatorRadius) / 16
+      }rem`,
+      zIndex: componentTheme.indicatorZIndex
+    },
+
+    sliderBackground: {
+      label: 'colorMixerSlider__sliderBackground',
+      borderRadius: `${props.height / 16}rem`,
+      width: `${props.width / 16}rem`,
+      height: `${props.height / 16}rem`,
+      boxSizing: 'border-box',
+      ...sliderBackground
+    },
+    slider: {
+      label: 'colorMixerSlider__slider',
+      width: `${props.width / 16}rem`,
+      height: `${props.height / 16}rem`,
+      background: props.isColorSlider
+        ? 'transparent'
+        : `linear-gradient(to right, rgba(255,0,0,0), ${props.color?.slice(
+            0,
+            -2
+          )})`,
+      borderRadius: `${props.height / 16}rem`,
+
+      boxSizing: 'border-box',
+
+      borderStyle: 'solid',
+      borderColor: componentTheme.colorIndicatorBorderColor,
+      borderWidth: componentTheme.sliderBorderWidth
+    },
+    disabledOverlay: {
+      label: 'colorMixerSlider__disabledOverlay',
+      background: 'rgba(255,255,255,.5)',
+      zIndex: componentTheme.disabledOverlayZIndex,
+      width: `${props.width / 16 + 1}rem`,
+      height: `${props.height / 16 + 1}rem`,
+      position: 'absolute',
+      top: '-.5rem',
+      left: '-.5rem'
+    }
+  }
+}
+
+export default generateStyle

package/src/ColorMixer/Slider/theme.ts

@@ -0,0 +1,59 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Theme } from '@instructure/ui-themes'
+import type { ColorMixerSliderTheme } from '@instructure/shared-types'
+import { colorIndicatorBorderColor } from '../../ColorIndicator/theme'
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = (theme: Theme): ColorMixerSliderTheme => {
+  const { colors, borders, stacking } = theme
+
+  const componentVariables = {
+    indicatorBorderColor: colors.licorice,
+
+    checkerboardBackgroundImage: `linear-gradient(45deg, ${colors.tiara} 25%, transparent 25%),
+    linear-gradient(-45deg, ${colors.tiara} 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, ${colors.tiara} 75%),
+    linear-gradient(-45deg, transparent 75%, ${colors.tiara} 75%)`,
+    checkerboardBackgroundSize: '.5rem .5rem',
+    checkerboardBackgroundPosition:
+      '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
+    colorIndicatorBorderColor,
+    indicatorBorderWidth: borders.widthSmall,
+    sliderBorderWidth: borders.widthSmall,
+    indicatorZIndex: stacking.above,
+    disabledOverlayZIndex: stacking.topmost
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme

package/src/ColorMixer/index.tsx

@@ -0,0 +1,221 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/** @jsx jsx */
+import { Component } from 'react'
+
+import { withStyle, jsx } from '@instructure/emotion'
+import { passthroughProps } from '@instructure/ui-react-utils'
+import { testable } from '@instructure/ui-testable'
+import {
+  colorToHex8,
+  colorToHsva,
+  colorToRGB
+} from '@instructure/ui-color-utils'
+
+import ColorPalette from './ColorPalette'
+import Slider from './Slider'
+import RGBAInput from './RGBAInput'
+
+import type { ColorMixerProps, ColorMixerState, HSVType } from './props'
+import { propTypes, allowedProps } from './props'
+import generateStyle from './styles'
+
+/**
+---
+category: components
+---
+@tsProps
+**/
+@withStyle(generateStyle, null)
+@testable()
+class ColorMixer extends Component<ColorMixerProps, ColorMixerState> {
+  static propTypes = propTypes
+  static allowedProps = allowedProps
+  static readonly componentId = 'ColorMixer'
+
+  static defaultProps = {
+    withAlpha: false,
+    disabled: false
+  }
+
+  constructor(props: ColorMixerProps) {
+    super(props)
+    this.state = {
+      h: 0,
+      s: 0,
+      v: 0,
+      a: 1
+    }
+  }
+
+  ref: HTMLDivElement | null = null
+
+  private _width = 272
+  private _paletteHeight = 160
+  private _sliderHeight = 8
+  private _sliderIndicatorRadius = 6
+  private _paletteIndicatorRadius = 6
+
+  handleRef = (el: HTMLDivElement | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+    if (this.props.value) {
+      this.setState({
+        ...colorToHsva(this.props.value)
+      })
+    }
+  }
+
+  componentDidUpdate(prevProps: ColorMixerProps, prevState: ColorMixerState) {
+    this.props.makeStyles?.()
+    const { h, s, v, a } = this.state
+    if (
+      prevState.h !== h ||
+      prevState.s !== s ||
+      prevState.v !== v ||
+      prevState.a !== a
+    ) {
+      this.props.onChange(colorToHex8({ h, s, v, a }))
+    }
+    if (
+      prevProps.value !== this.props.value &&
+      colorToHex8({ h, s, v, a }) !== this.props.value
+    ) {
+      this.setState({
+        ...colorToHsva(this.props.value)
+      })
+    }
+  }
+
+  render() {
+    const {
+      disabled,
+      onChange,
+      value,
+      elementRef,
+      styles,
+      withAlpha,
+      rgbRedInputScreenReaderLabel,
+      rgbGreenInputScreenReaderLabel,
+      rgbBlueInputScreenReaderLabel,
+      rgbAlphaInputScreenReaderLabel,
+      colorSliderNavigationExplanationScreenReaderLabel,
+      alphaSliderNavigationExplanationScreenReaderLabel,
+      colorPaletteNavigationExplanationScreenReaderLabel,
+      ...props
+    } = this.props
+    const { h, s, v, a } = this.state
+    return (
+      <div
+        {...passthroughProps(props)}
+        aria-disabled={disabled}
+        ref={this.handleRef}
+        css={styles?.colorMixer}
+      >
+        <span
+          css={styles?.sliderAndPaletteContainer}
+          aria-label={`${colorToHex8({ h, s, v, a })}`}
+          aria-live="polite"
+        >
+          <ColorPalette
+            disabled={disabled}
+            width={this._width}
+            height={this._paletteHeight}
+            indicatorRadius={this._paletteIndicatorRadius}
+            hue={h}
+            color={{
+              h,
+              s,
+              v
+            }}
+            onChange={(color: HSVType) => {
+              this.setState({ s: color.s, v: color.v })
+            }}
+            navigationExplanationScreenReaderLabel={
+              colorPaletteNavigationExplanationScreenReaderLabel
+            }
+          />
+          <Slider
+            disabled={disabled}
+            isColorSlider
+            width={this._width}
+            height={this._sliderHeight}
+            indicatorRadius={this._sliderIndicatorRadius}
+            value={h}
+            minValue={0}
+            maxValue={359}
+            color={colorToHex8({ h, s, v, a })}
+            onChange={(hue: number) => {
+              this.setState({ h: hue })
+            }}
+            navigationExplanationScreenReaderLabel={
+              colorSliderNavigationExplanationScreenReaderLabel
+            }
+          />
+          {withAlpha && (
+            <Slider
+              disabled={disabled}
+              width={this._width}
+              height={this._sliderHeight}
+              indicatorRadius={this._sliderIndicatorRadius}
+              color={colorToHex8({ h, s, v })}
+              value={a}
+              minValue={0}
+              maxValue={1}
+              onChange={(opacity) => this.setState({ a: opacity / 100 })}
+              navigationExplanationScreenReaderLabel={
+                alphaSliderNavigationExplanationScreenReaderLabel
+              }
+            />
+          )}
+        </span>
+        <RGBAInput
+          disabled={disabled}
+          label={withAlpha ? 'RGBA' : 'RGB'}
+          width={this._width}
+          value={colorToRGB({ h, s, v, a })}
+          onChange={(color) => this.setState({ ...colorToHsva(color) })}
+          withAlpha={withAlpha}
+          rgbRedInputScreenReaderLabel={rgbRedInputScreenReaderLabel}
+          rgbGreenInputScreenReaderLabel={rgbGreenInputScreenReaderLabel}
+          rgbBlueInputScreenReaderLabel={rgbBlueInputScreenReaderLabel}
+          rgbAlphaInputScreenReaderLabel={rgbAlphaInputScreenReaderLabel}
+        />
+      </div>
+    )
+  }
+}
+
+export { ColorMixer }
+export default ColorMixer

package/src/ColorMixer/props.ts

@@ -0,0 +1,169 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import PropTypes from 'prop-types'
+
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+  OtherHTMLAttributes,
+  PropValidators
+} from '@instructure/shared-types'
+
+type RGBType = {
+  r: number
+  g: number
+  b: number
+}
+type HSVType = {
+  h: number
+  s: number
+  v: number
+}
+type HSLType = {
+  h: number
+  s: number
+  l: number
+}
+type RGBAType = {
+  r: number
+  g: number
+  b: number
+  a: number
+}
+type ColorMixerOwnProps = {
+  /**
+   * Makes the component uninteractable
+   */
+  disabled?: boolean
+  /**
+   * Provides a reference to the component's underlying html element.
+   */
+  elementRef?: (element: Element | null) => void
+  /**
+   * Gets called each time the color changes
+   */
+  onChange: (hex: string) => void
+  /**
+   * Sets the value of the component. If changes, the color changes inside the component as well
+   */
+  value: string
+  /**
+   * Toggles alpha. If true, alpha slider will appear
+   */
+  withAlpha: boolean
+  /**
+   * screenReaderLabel for the RGBA input's red input field
+   */
+  rgbRedInputScreenReaderLabel: string
+  /**
+   * screenReaderLabel for the RGBA input's green input field
+   */
+  rgbGreenInputScreenReaderLabel: string
+  /**
+   * screenReaderLabel for the RGBA input's blue input field
+   */
+  rgbBlueInputScreenReaderLabel: string
+  /**
+   * screenReaderLabel for the RGBA input's alpha input field
+   */
+  rgbAlphaInputScreenReaderLabel: string
+  /**
+   * screenReaderLabel for the color slider. It should explain how to navigate the slider
+   * with the keyboard ('A' for left, 'D' for right)
+   */
+  colorSliderNavigationExplanationScreenReaderLabel: string
+  /**
+   * screenReaderLabel for the alpha slider. It should explain how to navigate the slider
+   * with the keyboard ('A' for left, 'D' for right)
+   */
+  alphaSliderNavigationExplanationScreenReaderLabel: string
+  /**
+   * screenReaderLabel for the color palette. It should explain how to navigate the palette
+   * with the keyboard ('W' for up, 'A' for left, 'S' for down and 'D' for right)
+   */
+  colorPaletteNavigationExplanationScreenReaderLabel: string
+}
+
+type ColorMixerState = {
+  h: number
+  s: number
+  v: number
+  a: number
+}
+
+type PropKeys = keyof ColorMixerOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ColorMixerProps = ColorMixerOwnProps &
+  WithStyleProps<null, ColorMixerStyle> &
+  OtherHTMLAttributes<ColorMixerOwnProps>
+
+type ColorMixerStyle = ComponentStyle<
+  'colorMixer' | 'sliderAndPaletteContainer'
+>
+
+const propTypes: PropValidators<PropKeys> = {
+  disabled: PropTypes.bool,
+  elementRef: PropTypes.func,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  withAlpha: PropTypes.bool,
+  rgbRedInputScreenReaderLabel: PropTypes.string.isRequired,
+  rgbGreenInputScreenReaderLabel: PropTypes.string.isRequired,
+  rgbBlueInputScreenReaderLabel: PropTypes.string.isRequired,
+  rgbAlphaInputScreenReaderLabel: PropTypes.string.isRequired,
+  colorSliderNavigationExplanationScreenReaderLabel:
+    PropTypes.string.isRequired,
+  alphaSliderNavigationExplanationScreenReaderLabel:
+    PropTypes.string.isRequired,
+  colorPaletteNavigationExplanationScreenReaderLabel:
+    PropTypes.string.isRequired
+}
+
+const allowedProps: AllowedPropKeys = [
+  'disabled',
+  'elementRef',
+  'value',
+  'onChange',
+  'withAlpha',
+  'rgbRedInputScreenReaderLabel',
+  'rgbGreenInputScreenReaderLabel',
+  'rgbBlueInputScreenReaderLabel',
+  'rgbAlphaInputScreenReaderLabel',
+  'colorSliderNavigationExplanationScreenReaderLabel',
+  'alphaSliderNavigationExplanationScreenReaderLabel',
+  'colorPaletteNavigationExplanationScreenReaderLabel'
+]
+
+export type {
+  ColorMixerProps,
+  ColorMixerStyle,
+  ColorMixerState,
+  RGBType,
+  RGBAType,
+  HSVType,
+  HSLType
+}
+export { propTypes, allowedProps }