How to use @looker/design-tokens - 10 common examples

}) => {
  const clear = (
    
  )

  const separator = (
    
  )

  // @TODO - User should be able to "click through" the text (not the button tho)
  return (
    
      {summary && (

{(height: string) => }
    
  )
}

const Outer = styled.div`
  ${reset}
  ${layout}

  overflow: auto;
  flex: 8;

  &.overflow {
    box-shadow: inset 0 -16px 16px -16px ${palette.charcoal200},
      inset 0 16px 16px -16px ${palette.charcoal200};
  }
`

const Inner = styled.div`
  ${reset}
  ${space}
`

Inner.defaultProps = { px: 'xlarge', py: 'large' }

)

  const separator = (
    
  )

  return (

bg: palette.charcoal100,
  color: palette.charcoal900,
}

const current: MenuItemStateStyle = {
  ...hover,
  fontWeight: 'bold',
  iconColor: palette.charcoal900,
}

export const defaultMenuItemStyle: MenuItemStyle = {
  current,
  hover,
  initial,
  marker: {
    color: palette.charcoal900,
    size: 4,
  },
}

fontSize: 'small',
  fontWeight: 'normal',
  iconColor: palette.charcoal300,
  iconSize: 20,
}

const hover: MenuItemStateStyle = {
  ...initial,
  bg: palette.charcoal100,
  color: palette.charcoal900,
}

const current: MenuItemStateStyle = {
  ...hover,
  fontWeight: 'bold',
  iconColor: palette.charcoal900,
}

export const defaultMenuItemStyle: MenuItemStyle = {
  current,
  hover,
  initial,
  marker: {
    color: palette.charcoal900,
    size: 4,
  },
}

}
}

const initial: MenuItemStateStyle = {
  bg: palette.white,
  color: palette.charcoal600,
  fontSize: 'small',
  fontWeight: 'normal',
  iconColor: palette.charcoal300,
  iconSize: 20,
}

const hover: MenuItemStateStyle = {
  ...initial,
  bg: palette.charcoal100,
  color: palette.charcoal900,
}

const current: MenuItemStateStyle = {
  ...hover,
  fontWeight: 'bold',
  iconColor: palette.charcoal900,
}

export const defaultMenuItemStyle: MenuItemStyle = {
  current,
  hover,
  initial,
  marker: {
    color: palette.charcoal900,
    size: 4,
  },

iconColor: string
  iconSize: number
}

export interface MenuItemStyle {
  current: MenuItemStateStyle
  hover: MenuItemStateStyle
  initial: MenuItemStateStyle
  marker: {
    color: string
    size: number
  }
}

const initial: MenuItemStateStyle = {
  bg: palette.white,
  color: palette.charcoal600,
  fontSize: 'small',
  fontWeight: 'normal',
  iconColor: palette.charcoal300,
  iconSize: 20,
}

const hover: MenuItemStateStyle = {
  ...initial,
  bg: palette.charcoal100,
  color: palette.charcoal900,
}

const current: MenuItemStateStyle = {
  ...hover,
  fontWeight: 'bold',

space,
  SpaceProps,
} from '@looker/design-tokens'
import { InputProps } from '../InputProps'

export interface CustomizableToggleSwitchAttributes
  extends CustomizableAttributes {
  knobOnColor: string
  knobOffColor: string
  onColor: string
  offColor: string
}

export const CustomizableToggleSwitchAttributes: CustomizableToggleSwitchAttributes = {
  knobOffColor: palette.white,
  knobOnColor: palette.white,
  offColor: palette.charcoal300,
  onColor: palette.purple300,
}

export interface KnobProps {
  className?: string
  size: number
  disabled?: boolean
  on?: boolean
}

interface KnobContainerBaseProps extends KnobProps, PseudoProps {
  children: ReactNode
}

export interface ToggleSwitchProps

reset,
  space,
  SpaceProps,
} from '@looker/design-tokens'
import { InputProps } from '../InputProps'

export interface CustomizableToggleSwitchAttributes
  extends CustomizableAttributes {
  knobOnColor: string
  knobOffColor: string
  onColor: string
  offColor: string
}

export const CustomizableToggleSwitchAttributes: CustomizableToggleSwitchAttributes = {
  knobOffColor: palette.white,
  knobOnColor: palette.white,
  offColor: palette.charcoal300,
  onColor: palette.purple300,
}

export interface KnobProps {
  className?: string
  size: number
  disabled?: boolean
  on?: boolean
}

interface KnobContainerBaseProps extends KnobProps, PseudoProps {
  children: ReactNode
}

export interface MenuItemStyle {
  current: MenuItemStateStyle
  hover: MenuItemStateStyle
  initial: MenuItemStateStyle
  marker: {
    color: string
    size: number
  }
}

const initial: MenuItemStateStyle = {
  bg: palette.white,
  color: palette.charcoal600,
  fontSize: 'small',
  fontWeight: 'normal',
  iconColor: palette.charcoal300,
  iconSize: 20,
}

const hover: MenuItemStateStyle = {
  ...initial,
  bg: palette.charcoal100,
  color: palette.charcoal900,
}

const current: MenuItemStateStyle = {
  ...hover,
  fontWeight: 'bold',
  iconColor: palette.charcoal900,
}

export const defaultMenuItemStyle: MenuItemStyle = {