Adds quick style selects, rewrites styling

components/canvas/canvas.tsx

         <g ref={rGroup}>
           <BoundsBg />
           <Page />
-          <Selected />
+          {/* <Selected /> */}
           <Bounds />
           <Handles />
           <Brush />

components/canvas/defs.tsx

 import { getShapeUtils } from 'lib/shape-utils'
+import { memo } from 'react'
 import { useSelector } from 'state'
 import { deepCompareArrays, getPage } from 'utils/utils'
 
 export default function Defs() {
+  const zoom = useSelector((s) => s.data.camera.zoom)
+
   const currentPageShapeIds = useSelector(({ data }) => {
     return Object.values(getPage(data).shapes)
       .sort((a, b) => a.childIndex - b.childIndex)
       {currentPageShapeIds.map((id) => (
         <Def key={id} id={id} />
       ))}
+      <filter id="expand">
+        <feMorphology operator="dilate" radius={2 / zoom} />
+      </filter>
     </defs>
   )
 }
 
-export function Def({ id }: { id: string }) {
+const Def = memo(({ id }: { id: string }) => {
   const shape = useSelector(({ data }) => getPage(data).shapes[id])
   if (!shape) return null
   return getShapeUtils(shape).render(shape)
-}
+})

components/canvas/selected.tsx

 import { deepCompareArrays, getPage } from 'utils/utils'
 import { getShapeUtils } from 'lib/shape-utils'
 import useShapeEvents from 'hooks/useShapeEvents'
-import { useRef } from 'react'
+import { memo, useRef } from 'react'
 
 export default function Selected() {
+  const selectedIds = useSelector((s) => s.data.selectedIds)
+
   const currentPageShapeIds = useSelector(({ data }) => {
     return Array.from(data.selectedIds.values())
   }, deepCompareArrays)
   return (
     <g>
       {currentPageShapeIds.map((id) => (
-        <ShapeOutline key={id} id={id} />
+        <ShapeOutline key={id} id={id} isSelected={selectedIds.has(id)} />
       ))}
     </g>
   )
 }
 
-export function ShapeOutline({ id }: { id: string }) {
-  const rIndicator = useRef<SVGUseElement>(null)
+export const ShapeOutline = memo(
+  ({ id, isSelected }: { id: string; isSelected: boolean }) => {
+    const rIndicator = useRef<SVGUseElement>(null)
 
-  const shape = useSelector(({ data }) => getPage(data).shapes[id])
+    const shape = useSelector(({ data }) => getPage(data).shapes[id])
 
-  const events = useShapeEvents(id, rIndicator)
+    const events = useShapeEvents(id, rIndicator)
 
-  if (!shape) return null
+    if (!shape) return null
 
-  const transform = `
+    const transform = `
     rotate(${shape.rotation * (180 / Math.PI)},
     ${getShapeUtils(shape).getCenter(shape)})
     translate(${shape.point})
   `
 
-  return (
-    <SelectIndicator
-      ref={rIndicator}
-      as="use"
-      href={'#' + id}
-      transform={transform}
-      isLocked={shape.isLocked}
-      {...events}
-    />
-  )
-}
+    return (
+      <SelectIndicator
+        ref={rIndicator}
+        as="use"
+        href={'#' + id}
+        transform={transform}
+        isLocked={shape.isLocked}
+        {...events}
+      />
+    )
+  }
+)
 
 const SelectIndicator = styled('path', {
   zStrokeWidth: 3,

components/canvas/shape.tsx

 import { getPage } from 'utils/utils'
 import { DashStyle, ShapeStyles } from 'types'
 import useShapeEvents from 'hooks/useShapeEvents'
-import { shades, strokes } from 'lib/colors'
+import { getShapeStyle } from 'lib/shape-styles'
 
 function Shape({ id, isSelecting }: { id: string; isSelecting: boolean }) {
-  const isHovered = useSelector((state) => state.data.hoveredId === id)
-
-  const isSelected = useSelector((state) => state.values.selectedIds.has(id))
+  const isSelected = useSelector((s) => s.values.selectedIds.has(id))
 
   const shape = useSelector(({ data }) => getPage(data).shapes[id])
 
   if (!shape) return null
 
   const center = getShapeUtils(shape).getCenter(shape)
+
   const transform = `
   rotate(${shape.rotation * (180 / Math.PI)}, ${center})
   translate(${shape.point})
   `
 
+  const style = getShapeStyle(shape.style)
+
   return (
-    <StyledGroup
-      ref={rGroup}
-      isHovered={isHovered}
-      isSelected={isSelected}
-      transform={transform}
-      stroke={'red'}
-      strokeWidth={10}
-    >
+    <StyledGroup ref={rGroup} isSelected={isSelected} transform={transform}>
       {isSelecting && (
         <HoverIndicator
           as="use"
           href={'#' + id}
-          strokeWidth={+shape.style.strokeWidth + 8}
-          variant={shape.style.fill === 'none' ? 'hollow' : 'filled'}
+          strokeWidth={+style.strokeWidth + 4}
+          variant={getShapeUtils(shape).canStyleFill ? 'filled' : 'hollow'}
           {...events}
         />
       )}
-      {!shape.isHidden && (
-        <RealShape id={id} style={sanitizeStyle(shape.style)} />
-      )}
+      {!shape.isHidden && <RealShape id={id} style={style} />}
     </StyledGroup>
   )
 }
 
-const RealShape = memo(({ id, style }: { id: string; style: ShapeStyles }) => {
-  return (
-    <StyledShape
-      as="use"
-      href={'#' + id}
-      {...style}
-      strokeDasharray={getDash(style.dash, +style.strokeWidth)}
-    />
-  )
-})
+const RealShape = memo(
+  ({ id, style }: { id: string; style: ReturnType<typeof getShapeStyle> }) => {
+    return <StyledShape as="use" href={'#' + id} {...style} />
+  }
+)
 
 const StyledShape = styled('path', {
   strokeLinecap: 'round',
   strokeLinejoin: 'round',
+  pointerEvents: 'none',
 })
 
 const HoverIndicator = styled('path', {
-  fill: 'transparent',
-  stroke: 'transparent',
+  stroke: '$selected',
   strokeLinecap: 'round',
   strokeLinejoin: 'round',
   transform: 'all .2s',
+  fill: 'transparent',
+  filter: 'url(#expand)',
   variants: {
     variant: {
       hollow: {
 })
 
 const StyledGroup = styled('g', {
-  pointerEvents: 'none',
   [`& ${HoverIndicator}`]: {
     opacity: '0',
   },
   variants: {
     isSelected: {
-      true: {},
-      false: {},
-    },
-    isHovered: {
-      true: {},
-      false: {},
-    },
-  },
-  compoundVariants: [
-    {
-      isSelected: true,
-      isHovered: true,
-      css: {
+      true: {
         [`& ${HoverIndicator}`]: {
-          opacity: '.4',
-          stroke: '$selected',
+          opacity: '0.2',
         },
-      },
-    },
-    {
-      isSelected: true,
-      isHovered: false,
-      css: {
-        [`& ${HoverIndicator}`]: {
-          opacity: '.2',
-          stroke: '$selected',
+        [`&:hover ${HoverIndicator}`]: {
+          opacity: '0.3',
+        },
+        [`&:active ${HoverIndicator}`]: {
+          opacity: '0.3',
         },
       },
-    },
-    {
-      isSelected: false,
-      isHovered: true,
-      css: {
+      false: {
         [`& ${HoverIndicator}`]: {
-          opacity: '.2',
-          stroke: '$selected',
+          opacity: '0',
+        },
+        [`&:hover ${HoverIndicator}`]: {
+          opacity: '0.16',
         },
       },
     },
-  ],
+  },
 })
 
 function Label({ text }: { text: string }) {
   )
 }
 
-function getDash(dash: DashStyle, s: number) {
-  switch (dash) {
-    case DashStyle.Solid: {
-      return 'none'
-    }
-    case DashStyle.Dashed: {
-      return `${s} ${s * 2}`
-    }
-    case DashStyle.Dotted: {
-      return `0 ${s * 1.5}`
-    }
-  }
-}
-
-function sanitizeStyle(style: ShapeStyles) {
-  const next = { ...style }
-  return next
-}
-
 export { HoverIndicator }
 
 export default memo(Shape)

components/code-panel/code-panel.tsx

       {isOpen ? (
         <Panel.Layout>
           <Panel.Header side="left">
-            <IconButton onClick={() => state.send('TOGGLED_CODE_PANEL_OPEN')}>
+            <IconButton
+              size="small"
+              onClick={() => state.send('TOGGLED_CODE_PANEL_OPEN')}
+            >
               <X />
             </IconButton>
             <h3>Code</h3>
             <ButtonsGroup>
               <FontSizeButtons>
                 <IconButton
+                  size="small"
                   disabled={!local.isIn('editingCode')}
                   onClick={() => state.send('INCREASED_CODE_FONT_SIZE')}
                 >
                   <ChevronUp />
                 </IconButton>
                 <IconButton
+                  size="small"
                   disabled={!local.isIn('editingCode')}
                   onClick={() => state.send('DECREASED_CODE_FONT_SIZE')}
                 >
                   <ChevronDown />
                 </IconButton>
               </FontSizeButtons>
-              <IconButton onClick={() => local.send('TOGGLED_DOCS')}>
+              <IconButton
+                size="small"
+                onClick={() => local.send('TOGGLED_DOCS')}
+              >
                 <Info />
               </IconButton>
               <IconButton
+                size="small"
                 disabled={!local.isIn('editingCode')}
                 onClick={() => local.send('SAVED_CODE')}
               >
           </Panel.Footer>
         </Panel.Layout>
       ) : (
-        <IconButton onClick={() => state.send('TOGGLED_CODE_PANEL_OPEN')}>
+        <IconButton
+          size="small"
+          onClick={() => state.send('TOGGLED_CODE_PANEL_OPEN')}
+        >
           <Code />
         </IconButton>
       )}

components/controls-panel/controls-panel.tsx

 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import styled from "styles"
-import React, { useEffect, useRef } from "react"
-import state, { useSelector } from "state"
-import { X, Code, PlayCircle } from "react-feather"
-import { IconButton } from "components/shared"
-import * as Panel from "../panel"
-import Control from "./control"
-import { deepCompareArrays } from "utils/utils"
+import styled from 'styles'
+import React, { useEffect, useRef } from 'react'
+import state, { useSelector } from 'state'
+import { X, Code, PlayCircle } from 'react-feather'
+import { IconButton } from 'components/shared'
+import * as Panel from '../panel'
+import Control from './control'
+import { deepCompareArrays } from 'utils/utils'
 
 export default function ControlPanel() {
   const rContainer = useRef<HTMLDivElement>(null)
       {isOpen ? (
         <Panel.Layout>
           <Panel.Header>
-            <IconButton onClick={() => state.send("CLOSED_CODE_PANEL")}>
+            <IconButton
+              size="small"
+              onClick={() => state.send('CLOSED_CODE_PANEL')}
+            >
               <X />
             </IconButton>
             <h3>Controls</h3>
           </ControlsList>
         </Panel.Layout>
       ) : (
-        <IconButton onClick={() => state.send("OPENED_CODE_PANEL")}>
+        <IconButton
+          size="small"
+          onClick={() => state.send('OPENED_CODE_PANEL')}
+        >
           <Code />
         </IconButton>
       )}
 
 const ControlsList = styled(Panel.Content, {
   padding: 12,
-  display: "grid",
-  gridTemplateColumns: "1fr 4fr",
-  gridAutoRows: "24px",
-  alignItems: "center",
-  gridColumnGap: "8px",
-  gridRowGap: "8px",
+  display: 'grid',
+  gridTemplateColumns: '1fr 4fr',
+  gridAutoRows: '24px',
+  alignItems: 'center',
+  gridColumnGap: '8px',
+  gridRowGap: '8px',
 
-  "& input": {
-    font: "$ui",
-    fontSize: "$1",
-    border: "1px solid $inputBorder",
-    backgroundColor: "$input",
-    color: "$text",
-    height: "100%",
-    padding: "0px 6px",
+  '& input': {
+    font: '$ui',
+    fontSize: '$1',
+    border: '1px solid $inputBorder',
+    backgroundColor: '$input',
+    color: '$text',
+    height: '100%',
+    padding: '0px 6px',
   },
 })

components/panel.tsx

   userSelect: 'none',
   zIndex: 200,
   border: '1px solid $panel',
-  boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
+  boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
 
   variants: {
     isOpen: {

components/shared.tsx

   borderRadius: '4px',
   padding: '0',
   margin: '0',
-  display: 'flex',
+  display: 'grid',
   alignItems: 'center',
   justifyContent: 'center',
   outline: 'none',
   pointerEvents: 'all',
   cursor: 'pointer',
 
+  '& > *': {
+    gridRow: 1,
+    gridColumn: 1,
+  },
+
   '&:hover:not(:disabled)': {
     backgroundColor: '$hover',
   },
     opacity: '0.5',
   },
 
-  '& > svg': {
-    height: '16px',
-    width: '16px',
-  },
-
   variants: {
     size: {
-      small: {},
+      small: {
+        '& > svg': {
+          height: '16px',
+          width: '16px',
+        },
+      },
       medium: {
         height: 44,
         width: 44,
-        '& svg': {
-          height: 16,
-          width: 16,
-          strokeWidth: 0,
+        '& > svg': {
+          height: '16px',
+          width: '16px',
         },
       },
       large: {
         height: 44,
         width: 44,
-        '& svg': {
-          height: 24,
-          width: 24,
-          strokeWidth: 0,
+        '& > svg': {
+          height: '24px',
+          width: '24px',
         },
       },
     },

components/style-panel/align-distribute.tsx

 }) {
   return (
     <Container>
-      <IconButton disabled={!hasTwoOrMore} onClick={alignLeft}>
+      <IconButton size="small" disabled={!hasTwoOrMore} onClick={alignLeft}>
         <AlignLeftIcon />
       </IconButton>
-      <IconButton disabled={!hasTwoOrMore} onClick={alignCenterHorizontal}>
+      <IconButton
+        size="small"
+        disabled={!hasTwoOrMore}
+        onClick={alignCenterHorizontal}
+      >
         <AlignCenterHorizontallyIcon />
       </IconButton>
-      <IconButton disabled={!hasTwoOrMore} onClick={alignRight}>
+      <IconButton size="small" disabled={!hasTwoOrMore} onClick={alignRight}>
         <AlignRightIcon />
       </IconButton>
-      <IconButton disabled={!hasTwoOrMore} onClick={stretchHorizontally}>
+      <IconButton
+        size="small"
+        disabled={!hasTwoOrMore}
+        onClick={stretchHorizontally}
+      >
         <StretchHorizontallyIcon />
       </IconButton>
-      <IconButton disabled={!hasThreeOrMore} onClick={distributeHorizontally}>
+      <IconButton
+        size="small"
+        disabled={!hasThreeOrMore}
+        onClick={distributeHorizontally}
+      >
         <SpaceEvenlyHorizontallyIcon />
       </IconButton>
-      <IconButton disabled={!hasTwoOrMore} onClick={alignTop}>
+      <IconButton size="small" disabled={!hasTwoOrMore} onClick={alignTop}>
         <AlignTopIcon />
       </IconButton>
-      <IconButton disabled={!hasTwoOrMore} onClick={alignCenterVertical}>
+      <IconButton
+        size="small"
+        disabled={!hasTwoOrMore}
+        onClick={alignCenterVertical}
+      >
         <AlignCenterVerticallyIcon />
       </IconButton>
-      <IconButton disabled={!hasTwoOrMore} onClick={alignBottom}>
+      <IconButton size="small" disabled={!hasTwoOrMore} onClick={alignBottom}>
         <AlignBottomIcon />
       </IconButton>
-      <IconButton disabled={!hasTwoOrMore} onClick={stretchVertically}>
+      <IconButton
+        size="small"
+        disabled={!hasTwoOrMore}
+        onClick={stretchVertically}
+      >
         <StretchVerticallyIcon />
       </IconButton>
-      <IconButton disabled={!hasThreeOrMore} onClick={distributeVertically}>
+      <IconButton
+        size="small"
+        disabled={!hasThreeOrMore}
+        onClick={distributeVertically}
+      >
         <SpaceEvenlyVerticallyIcon />
       </IconButton>
     </Container>

components/style-panel/color-content.tsx

+import { IconButton } from 'components/shared'
+import { strokes } from 'lib/shape-styles'
+import { ColorStyle } from 'types'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { Square } from 'react-feather'
+import styled from 'styles'
+import { DropdownContent } from './shared'
+
+export default function ColorContent({
+  onChange,
+}: {
+  onChange: (color: ColorStyle) => void
+}) {
+  return (
+    <DropdownContent sideOffset={0} side="bottom">
+      {Object.keys(strokes).map((color: ColorStyle) => (
+        <DropdownMenu.DropdownMenuItem
+          as={IconButton}
+          key={color}
+          title={color}
+          onSelect={() => onChange(color)}
+        >
+          <Square fill={strokes[color]} stroke="none" size="22" />
+        </DropdownMenu.DropdownMenuItem>
+      ))}
+    </DropdownContent>
+  )
+}

components/style-panel/color-picker.tsx

 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { strokes } from 'lib/shape-styles'
+import { ColorStyle } from 'types'
+import { IconWrapper, RowButton } from './shared'
 import { Square } from 'react-feather'
-import styled from 'styles'
+import ColorContent from './color-content'
 
 interface Props {
-  colors: Record<string, string>
-  onChange: (color: string) => void
-  children: React.ReactNode
+  color: ColorStyle
+  onChange: (color: ColorStyle) => void
 }
 
-export default function ColorPicker({ colors, onChange, children }: Props) {
+export default function ColorPicker({ color, onChange }: Props) {
   return (
     <DropdownMenu.Root>
-      {children}
-      <Colors sideOffset={4}>
-        {Object.entries(colors).map(([name, color]) => (
-          <ColorButton key={name} title={name} onSelect={() => onChange(name)}>
-            <ColorIcon color={color} />
-          </ColorButton>
-        ))}
-      </Colors>
+      <DropdownMenu.Trigger as={RowButton}>
+        <label htmlFor="color">Color</label>
+        <IconWrapper>
+          <Square fill={strokes[color]} />
+        </IconWrapper>
+      </DropdownMenu.Trigger>
+      <ColorContent onChange={onChange} />
     </DropdownMenu.Root>
   )
 }
-
-export function ColorIcon({ color }: { color: string }) {
-  return (
-    <Square fill={color} strokeDasharray={color === 'none' ? '2, 3' : 'none'} />
-  )
-}
-
-export const Colors = styled(DropdownMenu.Content, {
-  display: 'grid',
-  padding: 4,
-  gridTemplateColumns: 'repeat(6, 1fr)',
-  border: '1px solid $border',
-  backgroundColor: '$panel',
-  borderRadius: 4,
-  boxShadow: '0px 5px 15px -5px hsla(206,22%,7%,.15)',
-})
-
-export const ColorButton = styled(DropdownMenu.Item, {
-  position: 'relative',
-  cursor: 'pointer',
-  height: 32,
-  width: 32,
-  border: 'none',
-  padding: 'none',
-  background: 'none',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-
-  '&::before': {
-    content: "''",
-    position: 'absolute',
-    top: 4,
-    left: 4,
-    right: 4,
-    bottom: 4,
-    pointerEvents: 'none',
-    zIndex: 0,
-  },
-
-  '&:hover::before': {
-    backgroundColor: '$hover',
-    borderRadius: 4,
-  },
-
-  '& svg': {
-    position: 'relative',
-    stroke: 'rgba(0,0,0,.2)',
-    strokeWidth: 1,
-    zIndex: 1,
-  },
-})
-
-export const CurrentColor = styled(DropdownMenu.Trigger, {
-  position: 'relative',
-  display: 'flex',
-  width: '100%',
-  background: 'none',
-  border: 'none',
-  cursor: 'pointer',
-  outline: 'none',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '4px 6px 4px 12px',
-
-  '&::before': {
-    content: "''",
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    pointerEvents: 'none',
-    zIndex: -1,
-  },
-
-  '&:hover::before': {
-    backgroundColor: '$hover',
-    borderRadius: 4,
-  },
-
-  '& label': {
-    fontFamily: '$ui',
-    fontSize: '$2',
-    fontWeight: '$1',
-    margin: 0,
-    padding: 0,
-  },
-
-  '& svg': {
-    position: 'relative',
-    stroke: 'rgba(0,0,0,.2)',
-    strokeWidth: 1,
-    zIndex: 1,
-  },
-
-  variants: {
-    size: {
-      icon: {
-        padding: '4px ',
-        width: 'auto',
-      },
-    },
-  },
-})

components/style-panel/dash-picker.tsx

-import { Group, RadioItem } from './shared'
+import {
+  Group,
+  Item,
+  DashDashedIcon,
+  DashDottedIcon,
+  DashSolidIcon,
+} from './shared'
+import * as RadioGroup from '@radix-ui/react-radio-group'
 import { DashStyle } from 'types'
 import state from 'state'
 import { ChangeEvent } from 'react'
 export default function DashPicker({ dash }: Props) {
   return (
     <Group name="Dash" onValueChange={handleChange}>
-      <RadioItem value={DashStyle.Solid} isActive={dash === DashStyle.Solid}>
+      <Item
+        as={RadioGroup.RadioGroupItem}
+        value={DashStyle.Solid}
+        isActive={dash === DashStyle.Solid}
+      >
         <DashSolidIcon />
-      </RadioItem>
-      <RadioItem value={DashStyle.Dashed} isActive={dash === DashStyle.Dashed}>
+      </Item>
+      <Item
+        as={RadioGroup.RadioGroupItem}
+        value={DashStyle.Dashed}
+        isActive={dash === DashStyle.Dashed}
+      >
         <DashDashedIcon />
-      </RadioItem>
-      <RadioItem value={DashStyle.Dotted} isActive={dash === DashStyle.Dotted}>
+      </Item>
+      <Item
+        as={RadioGroup.RadioGroupItem}
+        value={DashStyle.Dotted}
+        isActive={dash === DashStyle.Dotted}
+      >
         <DashDottedIcon />
-      </RadioItem>
+      </Item>
     </Group>
   )
 }
-
-function DashSolidIcon() {
-  return (
-    <svg width="16" height="16">
-      <path d="M 3,8 L 13,8" strokeWidth={3} strokeLinecap="round" />
-    </svg>
-  )
-}
-
-function DashDashedIcon() {
-  return (
-    <svg width="16" height="16">
-      <path
-        d="M 2,8 L 14,8"
-        strokeWidth={3}
-        strokeLinecap="round"
-        strokeDasharray="4 4"
-      />
-    </svg>
-  )
-}
-
-function DashDottedIcon() {
-  return (
-    <svg width="16" height="16">
-      <path
-        d="M 3,8 L 14,8"
-        strokeWidth={3}
-        strokeLinecap="round"
-        strokeDasharray="1 4"
-      />
-    </svg>
-  )
-}

components/style-panel/is-filled-picker.tsx

+import * as Checkbox from '@radix-ui/react-checkbox'
+import { CheckIcon } from '@radix-ui/react-icons'
+import { strokes } from 'lib/shape-styles'
+import { Square } from 'react-feather'
+import { IconWrapper, RowButton } from './shared'
+
+interface Props {
+  isFilled: boolean
+  onChange: (isFilled: boolean) => void
+}
+
+export default function IsFilledPicker({ isFilled, onChange }: Props) {
+  return (
+    <Checkbox.Root
+      as={RowButton}
+      checked={isFilled}
+      onCheckedChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+        onChange(e.currentTarget.checked)
+      }
+    >
+      <label htmlFor="fill">Fill</label>
+      <IconWrapper>
+        {isFilled || <Square stroke={strokes.Black} />}
+        <Checkbox.Indicator as={CheckIcon} />
+      </IconWrapper>
+    </Checkbox.Root>
+  )
+}

components/style-panel/quick-color-select.tsx

+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { IconButton } from 'components/shared'
+import { strokes } from 'lib/shape-styles'
+import { Square } from 'react-feather'
+import state, { useSelector } from 'state'
+import ColorContent from './color-content'
+
+export default function QuickColorSelect() {
+  const color = useSelector((s) => s.values.selectedStyle.color)
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger as={IconButton} title="color">
+        <Square fill={strokes[color]} stroke={strokes[color]} />
+      </DropdownMenu.Trigger>
+      <ColorContent
+        onChange={(color) => state.send('CHANGED_STYLE', { color })}
+      />
+    </DropdownMenu.Root>
+  )
+}

components/style-panel/quick-dash-select.tsx

+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { IconButton } from 'components/shared'
+import state, { useSelector } from 'state'
+import { DashStyle } from 'types'
+import {
+  DropdownContent,
+  Item,
+  DashDottedIcon,
+  DashSolidIcon,
+  DashDashedIcon,
+} from './shared'
+
+const dashes = {
+  [DashStyle.Solid]: <DashSolidIcon />,
+  [DashStyle.Dashed]: <DashDashedIcon />,
+  [DashStyle.Dotted]: <DashDottedIcon />,
+}
+
+export default function QuickdashSelect() {
+  const dash = useSelector((s) => s.values.selectedStyle.dash)
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger as={IconButton} title="dash">
+        {dashes[dash]}
+      </DropdownMenu.Trigger>
+      <DropdownContent direction="vertical">
+        <DashItem isActive={dash === DashStyle.Solid} dash={DashStyle.Solid} />
+        <DashItem
+          isActive={dash === DashStyle.Dashed}
+          dash={DashStyle.Dashed}
+        />
+        <DashItem
+          isActive={dash === DashStyle.Dotted}
+          dash={DashStyle.Dotted}
+        />
+      </DropdownContent>
+    </DropdownMenu.Root>
+  )
+}
+
+function DashItem({ dash, isActive }: { isActive: boolean; dash: DashStyle }) {
+  return (
+    <Item
+      as={DropdownMenu.DropdownMenuItem}
+      isActive={isActive}
+      onSelect={() => state.send('CHANGED_STYLE', { dash })}
+    >
+      {dashes[dash]}
+    </Item>
+  )
+}

components/style-panel/quick-size-select.tsx

+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { IconButton } from 'components/shared'
+import { Circle } from 'react-feather'
+import state, { useSelector } from 'state'
+import { SizeStyle } from 'types'
+import { DropdownContent, Item } from './shared'
+
+const sizes = {
+  [SizeStyle.Small]: 6,
+  [SizeStyle.Medium]: 12,
+  [SizeStyle.Large]: 22,
+}
+
+export default function QuickSizeSelect() {
+  const size = useSelector((s) => s.values.selectedStyle.size)
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger as={IconButton} title="size">
+        <Circle size={sizes[size]} stroke="none" fill="currentColor" />
+      </DropdownMenu.Trigger>
+      <DropdownContent direction="vertical">
+        <SizeItem isActive={size === SizeStyle.Small} size={SizeStyle.Small} />
+        <SizeItem
+          isActive={size === SizeStyle.Medium}
+          size={SizeStyle.Medium}
+        />
+        <SizeItem isActive={size === SizeStyle.Large} size={SizeStyle.Large} />
+      </DropdownContent>
+    </DropdownMenu.Root>
+  )
+}
+
+function SizeItem({ size, isActive }: { isActive: boolean; size: SizeStyle }) {
+  return (
+    <Item
+      as={DropdownMenu.DropdownMenuItem}
+      isActive={isActive}
+      onSelect={() => state.send('CHANGED_STYLE', { size })}
+    >
+      <Circle size={sizes[size]} />
+    </Item>
+  )
+}

components/style-panel/shared.tsx

+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import * as RadioGroup from '@radix-ui/react-radio-group'
 import * as Panel from '../panel'
 import styled from 'styles'
   display: 'flex',
 })
 
-export const RadioItem = styled(RadioGroup.Item, {
+export const Item = styled('button', {
   height: '32px',
   width: '32px',
   backgroundColor: '$panel',
         '& svg': {
           fill: '$text',
           stroke: '$text',
-          strokeWidth: '0',
         },
       },
       false: {
         '& svg': {
           fill: '$inactive',
           stroke: '$inactive',
-          strokeWidth: '0',
         },
       },
     },
   },
 })
+
+export const RowButton = styled('button', {
+  position: 'relative',
+  display: 'flex',
+  width: '100%',
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  outline: 'none',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '4px 6px 4px 12px',
+
+  '&::before': {
+    content: "''",
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+    zIndex: -1,
+  },
+
+  '&:hover::before': {
+    backgroundColor: '$hover',
+    borderRadius: 4,
+  },
+
+  '& label': {
+    fontFamily: '$ui',
+    fontSize: '$2',
+    fontWeight: '$1',
+    margin: 0,
+    padding: 0,
+  },
+
+  '& svg': {
+    position: 'relative',
+    stroke: 'rgba(0,0,0,.2)',
+    strokeWidth: 1,
+    zIndex: 1,
+  },
+
+  variants: {
+    size: {
+      icon: {
+        padding: '4px ',
+        width: 'auto',
+      },
+    },
+  },
+})
+
+export const IconWrapper = styled('div', {
+  height: '100%',
+  borderRadius: '4px',
+  marginRight: '1px',
+  display: 'grid',
+  alignItems: 'center',
+  justifyContent: 'center',
+  outline: 'none',
+  border: 'none',
+  pointerEvents: 'all',
+  cursor: 'pointer',
+
+  '& svg': {
+    height: 22,
+    width: 22,
+    strokeWidth: 1,
+  },
+
+  '& > *': {
+    gridRow: 1,
+    gridColumn: 1,
+  },
+})
+
+export const DropdownContent = styled(DropdownMenu.Content, {
+  display: 'grid',
+  padding: 4,
+  gridTemplateColumns: 'repeat(4, 1fr)',
+  backgroundColor: '$panel',
+  borderRadius: 4,
+  border: '1px solid $panel',
+  boxShadow: '0px 2px 4px rgba(0,0,0,.28)',
+
+  variants: {
+    direction: {
+      vertical: {
+        gridTemplateColumns: '1fr',
+      },
+    },
+  },
+})
+
+export function DashSolidIcon() {
+  return (
+    <svg width="24" height="24" stroke="currentColor">
+      <circle
+        cx={12}
+        cy={12}
+        r={8}
+        fill="none"
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
+export function DashDashedIcon() {
+  return (
+    <svg width="24" height="24" stroke="currentColor">
+      <circle
+        cx={12}
+        cy={12}
+        r={8}
+        fill="none"
+        strokeWidth={2.5}
+        strokeLinecap="round"
+        strokeDasharray={50.26548 * 0.1}
+      />
+    </svg>
+  )
+}
+
+const dottedDasharray = `${50.26548 * 0.025} ${50.26548 * 0.1}`
+
+export function DashDottedIcon() {
+  return (
+    <svg width="24" height="24" stroke="currentColor">
+      <circle
+        cx={12}
+        cy={12}
+        r={8}
+        fill="none"
+        strokeWidth={2.5}
+        strokeLinecap="round"
+        strokeDasharray={dottedDasharray}
+      />
+    </svg>
+  )
+}

components/style-panel/size-picker.tsx

+import { Group, Item } from './shared'
+import * as RadioGroup from '@radix-ui/react-radio-group'
+import { ChangeEvent } from 'react'
+import { Circle } from 'react-feather'
+import state from 'state'
+import { SizeStyle } from 'types'
+
+function handleChange(e: ChangeEvent<HTMLInputElement>) {
+  state.send('CHANGED_STYLE', {
+    size: e.currentTarget.value as SizeStyle,
+  })
+}
+
+export default function SizePicker({ size }: { size: SizeStyle }) {
+  return (
+    <Group name="width" onValueChange={handleChange}>
+      <Item
+        as={RadioGroup.Item}
+        value={SizeStyle.Small}
+        isActive={size === SizeStyle.Small}
+      >
+        <Circle size={6} />
+      </Item>
+      <Item
+        as={RadioGroup.Item}
+        value={SizeStyle.Medium}
+        isActive={size === SizeStyle.Medium}
+      >
+        <Circle size={12} />
+      </Item>
+      <Item
+        as={RadioGroup.Item}
+        value={SizeStyle.Large}
+        isActive={size === SizeStyle.Large}
+      >
+        <Circle size={22} />
+      </Item>
+    </Group>
+  )
+}

components/style-panel/style-panel.tsx

 import { useRef } from 'react'
 import { IconButton } from 'components/shared'
 import * as Checkbox from '@radix-ui/react-checkbox'
-import { Trash2, X } from 'react-feather'
+import { ChevronDown, Square, Trash2, X } from 'react-feather'
 import { deepCompare, deepCompareArrays, getPage } from 'utils/utils'
-import { shades, fills, strokes } from 'lib/colors'
-import ColorPicker, { ColorIcon, CurrentColor } from './color-picker'
+import { strokes } from 'lib/shape-styles'
 import AlignDistribute from './align-distribute'
-import { MoveType, ShapeStyles } from 'types'
-import WidthPicker from './width-picker'
+import { MoveType } from 'types'
+import SizePicker from './size-picker'
 import {
   ArrowDownIcon,
   ArrowUpIcon,
   RotateCounterClockwiseIcon,
 } from '@radix-ui/react-icons'
 import DashPicker from './dash-picker'
-
-const fillColors = { ...shades, ...fills }
-const strokeColors = { ...shades, ...strokes }
-const getFillColor = (color: string) => {
-  if (shades[color]) {
-    return '#fff'
-  }
-  return fillColors[color]
-}
+import QuickColorSelect from './quick-color-select'
+import ColorContent from './color-content'
+import { RowButton, IconWrapper } from './shared'
+import ColorPicker from './color-picker'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import IsFilledPicker from './is-filled-picker'
+import QuickSizeSelect from './quick-size-select'
+import QuickdashSelect from './quick-dash-select'
 
 export default function StylePanel() {
   const rContainer = useRef<HTMLDivElement>(null)
         <SelectedShapeStyles />
       ) : (
         <>
-          <QuickColorSelect prop="stroke" colors={strokeColors} />
+          <QuickColorSelect />
+          <QuickSizeSelect />
+          <QuickdashSelect />
           <IconButton
             title="Style"
+            size="small"
             onClick={() => state.send('TOGGLED_STYLE_PANEL_OPEN')}
           >
-            <DotsVerticalIcon />
+            <ChevronDown />
           </IconButton>
         </>
       )}
   )
 }
 
-function QuickColorSelect({
-  prop,
-  colors,
-}: {
-  prop: ShapeStyles['fill'] | ShapeStyles['stroke']
-  colors: Record<string, string>
-}) {
-  const value = useSelector((s) => s.values.selectedStyle[prop])
-
-  return (
-    <ColorPicker
-      colors={colors}
-      onChange={(color) => state.send('CHANGED_STYLE', { [prop]: color })}
-    >
-      <CurrentColor size="icon" title={prop}>
-        <ColorIcon color={value} />
-      </CurrentColor>
-    </ColorPicker>
-  )
-}
-
 // This panel is going to be hard to keep cool, as we're selecting computed
 // information, based on the user's current selection. We might have to keep
 // track of this data manually within our state.
 
-function SelectedShapeStyles({}: {}) {
+function SelectedShapeStyles() {
   const selectedIds = useSelector(
     (s) => Array.from(s.data.selectedIds.values()),
     deepCompareArrays
     <Panel.Layout>
       <Panel.Header side="right">
         <h3>Style</h3>
-        <IconButton onClick={() => state.send('TOGGLED_STYLE_PANEL_OPEN')}>
+        <IconButton
+          size="small"
+          onClick={() => state.send('TOGGLED_STYLE_PANEL_OPEN')}
+        >
           <X />
         </IconButton>
       </Panel.Header>
       <Content>
         <ColorPicker
-          colors={strokeColors}
-          onChange={(color) =>
-            state.send('CHANGED_STYLE', {
-              stroke: strokeColors[color],
-              fill: getFillColor(color),
-            })
-          }
-        >
-          <CurrentColor>
-            <label>Color</label>
-            <ColorIcon color={commonStyle.stroke} />
-          </CurrentColor>
-        </ColorPicker>
-        {/* <Row>
-          <label htmlFor="filled">Filled</label>
-          <StyledCheckbox
-            checked={commonStyle.isFilled}
-            onCheckedChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              console.log(e.target.value)
-              state.send('CHANGED_STYLE', {
-                isFilled: e.target.value === 'on',
-              })
-            }}
-          >
-            <Checkbox.Indicator as={CheckIcon} />
-          </StyledCheckbox> 
-        </Row>*/}
+          color={commonStyle.color}
+          onChange={(color) => state.send('CHANGED_STYLE', { color })}
+        />
+        <IsFilledPicker
+          isFilled={commonStyle.isFilled}
+          onChange={(isFilled) => state.send('CHANGED_STYLE', { isFilled })}
+        />
         <Row>
-          <label htmlFor="width">Width</label>
-          <WidthPicker strokeWidth={Number(commonStyle.strokeWidth)} />
+          <label htmlFor="size">Size</label>
+          <SizePicker size={commonStyle.size} />
         </Row>
         <Row>
           <label htmlFor="dash">Dash</label>
         <ButtonsRow>
           <IconButton
             disabled={!hasSelection}
+            size="small"
             onClick={() => state.send('DUPLICATED')}
           >
             <CopyIcon />
           </IconButton>
           <IconButton
             disabled={!hasSelection}
+            size="small"
             onClick={() => state.send('ROTATED_CCW')}
           >
             <RotateCounterClockwiseIcon />
           </IconButton>
           <IconButton
             disabled={!hasSelection}
+            size="small"
             onClick={() => state.send('TOGGLED_SHAPE_HIDE')}
           >
             {isAllHidden ? <EyeClosedIcon /> : <EyeOpenIcon />}
           </IconButton>
           <IconButton
             disabled={!hasSelection}
+            size="small"
             onClick={() => state.send('TOGGLED_SHAPE_LOCK')}
           >
             {isAllLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
           </IconButton>
           <IconButton
             disabled={!hasSelection}
+            size="small"
             onClick={() => state.send('TOGGLED_SHAPE_ASPECT_LOCK')}
           >
             {isAllAspectLocked ? <AspectRatioIcon /> : <BoxIcon />}
         <ButtonsRow>
           <IconButton
             disabled={!hasSelection}
+            size="small"
             onClick={() => state.send('MOVED', { type: MoveType.ToBack })}
           >
             <PinBottomIcon />
           </IconButton>
           <IconButton
             disabled={!hasSelection}
+            size="small"
             onClick={() => state.send('MOVED', { type: MoveType.Backward })}
           >
             <ArrowDownIcon />
           </IconButton>
           <IconButton
             disabled={!hasSelection}
+            size="small"
             onClick={() => state.send('MOVED', { type: MoveType.Forward })}
           >
             <ArrowUpIcon />
           </IconButton>
           <IconButton
             disabled={!hasSelection}
+            size="small"
             onClick={() => state.send('MOVED', { type: MoveType.ToFront })}
           >
             <PinTopIcon />
           </IconButton>
           <IconButton
             disabled={!hasSelection}
+            size="small"
             onClick={() => state.send('DELETED')}
           >
             <Trash2 />
   overflow: 'hidden',
   position: 'relative',
   border: '1px solid $panel',
-  boxShadow: '0px 2px 4px rgba(0,0,0,.12)',
+  boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
   display: 'flex',
   alignItems: 'center',
   pointerEvents: 'all',
   width: '100%',
   background: 'none',
   border: 'none',
-  cursor: 'pointer',
   outline: 'none',
   alignItems: 'center',
   justifyContent: 'space-between',
   justifyContent: 'flex-start',
   padding: 4,
 })
-
-const StyledCheckbox = styled(Checkbox.Root, {
-  appearance: 'none',
-  backgroundColor: 'transparent',
-  border: 'none',
-  padding: 0,
-  boxShadow: 'inset 0 0 0 1px gainsboro',
-  width: 15,
-  height: 15,
-  borderRadius: 2,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-
-  '&:focus': {
-    outline: 'none',
-    boxShadow: 'inset 0 0 0 1px dodgerblue, 0 0 0 1px dodgerblue',
-  },
-})

components/style-panel/width-picker.tsx

-import { Group, RadioItem } from './shared'
-import { ChangeEvent } from 'react'
-import { Circle } from 'react-feather'
-import state from 'state'
-
-function handleChange(e: ChangeEvent<HTMLInputElement>) {
-  state.send('CHANGED_STYLE', {
-    strokeWidth: Number(e.currentTarget.value),
-  })
-}
-
-export default function WidthPicker({
-  strokeWidth = 2,
-}: {
-  strokeWidth?: number
-}) {
-  return (
-    <Group name="width" onValueChange={handleChange}>
-      <RadioItem value="2" isActive={strokeWidth === 2}>
-        <Circle size={6} />
-      </RadioItem>
-      <RadioItem value="4" isActive={strokeWidth === 4}>
-        <Circle size={12} />
-      </RadioItem>
-      <RadioItem value="8" isActive={strokeWidth === 8}>
-        <Circle size={22} />
-      </RadioItem>
-    </Group>
-  )
-}

components/tools-panel/tools-panel.tsx

           >
             <CircleIcon />
           </IconButton> */}
-          <IconButton
+          {/* <IconButton
             name={ShapeType.Line}
             size={{ '@sm': 'small', '@md': 'large' }}
             onClick={selectLineTool}
             isActive={activeTool === ShapeType.Dot}
           >
             <DotIcon />
-          </IconButton>
+          </IconButton> */}
         </Container>
         <Container>
           <IconButton

lib/code/circle.ts

 import { v4 as uuid } from 'uuid'
 import { CircleShape, ShapeType } from 'types'
 import { vectorToPoint } from 'utils/utils'
+import { defaultStyle } from 'lib/shape-styles'
 
 export default class Circle extends CodeShape<CircleShape> {
   constructor(props = {} as Partial<CircleShape>) {
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
-      style: {
-        fill: '#c6cacb',
-        stroke: '#000',
-        strokeWidth: 1,
-      },
+      style: defaultStyle,
       ...props,
     })
   }

lib/code/dot.ts

 import { v4 as uuid } from 'uuid'
 import { DotShape, ShapeType } from 'types'
 import { vectorToPoint } from 'utils/utils'
+import { defaultStyle } from 'lib/shape-styles'
 
 export default class Dot extends CodeShape<DotShape> {
   constructor(props = {} as Partial<DotShape>) {
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
+      ...props,
       style: {
-        fill: '#c6cacb',
-        stroke: '#000',
-        strokeWidth: 1,
+        ...defaultStyle,
+        ...props.style,
+        isFilled: false,
       },
-      ...props,
     })
   }
 

lib/code/ellipse.ts

 import { v4 as uuid } from 'uuid'
 import { EllipseShape, ShapeType } from 'types'
 import { vectorToPoint } from 'utils/utils'
+import { defaultStyle } from 'lib/shape-styles'
 
 export default class Ellipse extends CodeShape<EllipseShape> {
   constructor(props = {} as Partial<EllipseShape>) {
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
-      style: {
-        fill: '#c6cacb',
-        stroke: '#000',
-        strokeWidth: 1,
-      },
+      style: defaultStyle,
       ...props,
     })
   }

lib/code/line.ts

 import { v4 as uuid } from 'uuid'
 import { LineShape, ShapeType } from 'types'
 import { vectorToPoint } from 'utils/utils'
+import { defaultStyle } from 'lib/shape-styles'
 
 export default class Line extends CodeShape<LineShape> {
   constructor(props = {} as Partial<LineShape>) {
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
+      ...props,
       style: {
-        fill: '#c6cacb',
-        stroke: '#000',
-        strokeWidth: 1,
+        ...defaultStyle,
+        ...props.style,
+        isFilled: false,
       },
-      ...props,
     })
   }
 

lib/code/polyline.ts

 import { v4 as uuid } from 'uuid'
 import { PolylineShape, ShapeType } from 'types'
 import { vectorToPoint } from 'utils/utils'
+import { defaultStyle } from 'lib/shape-styles'
 
 export default class Polyline extends CodeShape<PolylineShape> {
   constructor(props = {} as Partial<PolylineShape>) {
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
-      style: {
-        fill: 'none',
-        stroke: '#000',
-        strokeWidth: 1,
-      },
+      style: defaultStyle,
       ...props,
     })
   }

lib/code/ray.ts

 import { v4 as uuid } from 'uuid'
 import { RayShape, ShapeType } from 'types'
 import { vectorToPoint } from 'utils/utils'
+import { defaultStyle } from 'lib/shape-styles'
 
 export default class Ray extends CodeShape<RayShape> {
   constructor(props = {} as Partial<RayShape>) {
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
+      ...props,
       style: {
-        fill: '#c6cacb',
-        stroke: '#000',
-        strokeWidth: 1,
+        ...defaultStyle,
+        ...props.style,
+        isFilled: false,
       },
-      ...props,
     })
   }
 

lib/code/rectangle.ts

 import { v4 as uuid } from 'uuid'
 import { RectangleShape, ShapeType } from 'types'
 import { vectorToPoint } from 'utils/utils'
+import { defaultStyle } from 'lib/shape-styles'
 
 export default class Rectangle extends CodeShape<RectangleShape> {
   constructor(props = {} as Partial<RectangleShape>) {
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
-      style: {
-        fill: '#c6cacb',
-        stroke: '#000',
-        strokeWidth: 1,
-      },
+      style: defaultStyle,
       ...props,
     })
   }

lib/colors.ts

-export const shades = {
-  none: 'none',
-  white: 'rgba(248, 249, 250, 1.000)',
-  lightGray: 'rgba(224, 226, 230, 1.000)',
-  gray: 'rgba(172, 181, 189, 1.000)',
-  darkGray: 'rgba(52, 58, 64, 1.000)',
-  black: 'rgba(0,0,0, 1.000)',
-}
-
-export const strokes = {
-  lime: 'rgba(115, 184, 23, 1.000)',
-  green: 'rgba(54, 178, 77, 1.000)',
-  teal: 'rgba(9, 167, 120, 1.000)',
-  cyan: 'rgba(14, 152, 173, 1.000)',
-  blue: 'rgba(28, 126, 214, 1.000)',
-  indigo: 'rgba(66, 99, 235, 1.000)',
-  violet: 'rgba(112, 72, 232, 1.000)',
-  grape: 'rgba(174, 62, 200, 1.000)',
-  pink: 'rgba(214, 51, 108, 1.000)',
-  red: 'rgba(240, 63, 63, 1.000)',
-  orange: 'rgba(247, 103, 6, 1.000)',
-  yellow: 'rgba(245, 159, 0, 1.000)',
-}
-
-export const fills = {
-  lime: 'rgba(243, 252, 227, 1.000)',
-  green: 'rgba(235, 251, 238, 1.000)',
-  teal: 'rgba(230, 252, 245, 1.000)',
-  cyan: 'rgba(227, 250, 251, 1.000)',
-  blue: 'rgba(231, 245, 255, 1.000)',
-  indigo: 'rgba(237, 242, 255, 1.000)',
-  violet: 'rgba(242, 240, 255, 1.000)',
-  grape: 'rgba(249, 240, 252, 1.000)',
-  pink: 'rgba(254, 241, 246, 1.000)',
-  red: 'rgba(255, 245, 245, 1.000)',
-  orange: 'rgba(255, 244, 229, 1.000)',
-  yellow: 'rgba(255, 249, 219, 1.000)',
-}

lib/shape-styles.ts

+import { SVGProps } from 'react'
+import { ColorStyle, DashStyle, Shape, ShapeStyles, SizeStyle } from 'types'
+
+export const strokes: Record<ColorStyle, string> = {
+  [ColorStyle.White]: 'rgba(248, 249, 250, 1.000)',
+  [ColorStyle.LightGray]: 'rgba(224, 226, 230, 1.000)',
+  [ColorStyle.Gray]: 'rgba(172, 181, 189, 1.000)',
+  [ColorStyle.Black]: 'rgba(0,0,0, 1.000)',
+  [ColorStyle.Lime]: 'rgba(115, 184, 23, 1.000)',
+  [ColorStyle.Green]: 'rgba(54, 178, 77, 1.000)',
+  [ColorStyle.Teal]: 'rgba(9, 167, 120, 1.000)',
+  [ColorStyle.Cyan]: 'rgba(14, 152, 173, 1.000)',
+  [ColorStyle.Blue]: 'rgba(28, 126, 214, 1.000)',
+  [ColorStyle.Indigo]: 'rgba(66, 99, 235, 1.000)',
+  [ColorStyle.Violet]: 'rgba(112, 72, 232, 1.000)',
+  [ColorStyle.Grape]: 'rgba(174, 62, 200, 1.000)',
+  [ColorStyle.Pink]: 'rgba(214, 51, 108, 1.000)',
+  [ColorStyle.Red]: 'rgba(240, 63, 63, 1.000)',
+  [ColorStyle.Orange]: 'rgba(247, 103, 6, 1.000)',
+  [ColorStyle.Yellow]: 'rgba(245, 159, 0, 1.000)',
+}
+
+export const fills = {
+  [ColorStyle.White]: 'rgba(224, 226, 230, 1.000)',
+  [ColorStyle.LightGray]: 'rgba(255, 255, 255, 1.000)',
+  [ColorStyle.Gray]: 'rgba(224, 226, 230, 1.000)',
+  [ColorStyle.Black]: 'rgba(224, 226, 230, 1.000)',
+  [ColorStyle.Lime]: 'rgba(243, 252, 227, 1.000)',
+  [ColorStyle.Green]: 'rgba(235, 251, 238, 1.000)',
+  [ColorStyle.Teal]: 'rgba(230, 252, 245, 1.000)',
+  [ColorStyle.Cyan]: 'rgba(227, 250, 251, 1.000)',
+  [ColorStyle.Blue]: 'rgba(231, 245, 255, 1.000)',
+  [ColorStyle.Indigo]: 'rgba(237, 242, 255, 1.000)',
+  [ColorStyle.Violet]: 'rgba(242, 240, 255, 1.000)',
+  [ColorStyle.Grape]: 'rgba(249, 240, 252, 1.000)',
+  [ColorStyle.Pink]: 'rgba(254, 241, 246, 1.000)',
+  [ColorStyle.Red]: 'rgba(255, 245, 245, 1.000)',
+  [ColorStyle.Orange]: 'rgba(255, 244, 229, 1.000)',
+  [ColorStyle.Yellow]: 'rgba(255, 249, 219, 1.000)',
+}
+
+const strokeWidths = {
+  [SizeStyle.Small]: 2,
+  [SizeStyle.Medium]: 4,
+  [SizeStyle.Large]: 8,
+}
+
+const dashArrays = {
+  [DashStyle.Solid]: () => 'none',
+  [DashStyle.Dashed]: (sw: number) => `${sw} ${sw * 2}`,
+  [DashStyle.Dotted]: (sw: number) => `0 ${sw * 1.5}`,
+}
+
+function getStrokeWidth(size: SizeStyle) {
+  return strokeWidths[size]
+}
+
+function getStrokeDashArray(dash: DashStyle, strokeWidth: number) {
+  return dashArrays[dash](strokeWidth)
+}
+
+export function getShapeStyle(
+  style: ShapeStyles
+): Partial<SVGProps<SVGUseElement>> {
+  const { color, size, dash, isFilled } = style
+
+  const strokeWidth = getStrokeWidth(size)
+  const strokeDasharray = getStrokeDashArray(dash, strokeWidth)
+
+  return {
+    stroke: strokes[color],
+    fill: isFilled ? fills[color] : 'none',
+    strokeWidth,
+    strokeDasharray,
+  }
+}
+
+export const defaultStyle = {
+  color: ColorStyle.Black,
+  size: SizeStyle.Medium,
+  isFilled: false,
+  dash: DashStyle.Solid,
+}

lib/shape-utils/arrow.tsx

 import { v4 as uuid } from 'uuid'
 import * as vec from 'utils/vec'
 import * as svg from 'utils/svg'
-import { ArrowShape, ShapeHandle, ShapeType } from 'types'
+import {
+  ArrowShape,
+  ColorStyle,
+  DashStyle,
+  ShapeHandle,
+  ShapeType,
+  SizeStyle,
+} from 'types'
 import { registerShapeUtils } from './index'
 import { circleFromThreePoints, clamp, isAngleBetween } from 'utils/utils'
 import { pointInBounds } from 'utils/bounds'
 } from 'utils/intersections'
 import { getBoundsFromPoints, translateBounds } from 'utils/utils'
 import { pointInCircle } from 'utils/hitTests'
+import { defaultStyle, getShapeStyle } from 'lib/shape-styles'
 
 const ctpCache = new WeakMap<ArrowShape['handles'], number[]>()
 
       },
       ...props,
       style: {
-        strokeWidth: 2,
+        ...defaultStyle,
         ...props.style,
-        fill: 'none',
+        isFilled: false,
       },
     }
   },
 
   render(shape) {
-    const { id, bend, points, handles, style } = shape
+    const { id, bend, points, handles } = shape
     const { start, end, bend: _bend } = handles
 
     const arrowDist = vec.dist(start.point, end.point)
     const bendDist = arrowDist * bend
     const showCircle = Math.abs(bendDist) > 20
 
+    const style = getShapeStyle(shape.style)
+
     // Arrowhead
     const length = Math.min(arrowDist / 2, 16 + +style.strokeWidth * 2)
     const angle = showCircle ? bend * (Math.PI * 0.48) : 0
 
   applyStyles(shape, style) {
     Object.assign(shape.style, style)
-    shape.style.fill = 'none'
+    shape.style.isFilled = false
     return this
   },
 

lib/shape-utils/circle.tsx

 import { v4 as uuid } from 'uuid'
 import * as vec from 'utils/vec'
-import { CircleShape, ShapeType } from 'types'
+import { CircleShape, ColorStyle, DashStyle, ShapeType, SizeStyle } from 'types'
 import { registerShapeUtils } from './index'
 import { boundsContained } from 'utils/bounds'
 import { intersectCircleBounds } from 'utils/intersections'
 import { pointInCircle } from 'utils/hitTests'
 import { translateBounds } from 'utils/utils'
+import { defaultStyle, getShapeStyle } from 'lib/shape-styles'
 
 const circle = registerShapeUtils<CircleShape>({
   boundsCache: new WeakMap([]),
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
-      style: {
-        fill: '#c6cacb',
-        stroke: '#000',
-      },
+      style: defaultStyle,
       ...props,
     }
   },
 
   render({ id, radius, style }) {
+    const styles = getShapeStyle(style)
+
     return (
       <circle
         id={id}
         cx={radius}
         cy={radius}
-        r={Math.max(0, radius - Number(style.strokeWidth) / 2)}
+        r={Math.max(0, radius - Number(styles.strokeWidth) / 2)}
       />
     )
   },

lib/shape-utils/dot.tsx

 import { intersectCircleBounds } from 'utils/intersections'
 import { DotCircle } from 'components/canvas/misc'
 import { translateBounds } from 'utils/utils'
+import { defaultStyle } from 'lib/shape-styles'
 
 const dot = registerShapeUtils<DotShape>({
   boundsCache: new WeakMap([]),
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
+      ...props,
       style: {
-        fill: '#c6cacb',
-        strokeWidth: '0',
+        ...defaultStyle,
+        ...props.style,
+        isFilled: false,
       },
-      ...props,
     }
   },
 

lib/shape-utils/draw.tsx

 import { v4 as uuid } from 'uuid'
 import * as vec from 'utils/vec'
-import { DrawShape, ShapeType } from 'types'
+import { DashStyle, DrawShape, ShapeType } from 'types'
 import { registerShapeUtils } from './index'
 import { intersectPolylineBounds } from 'utils/intersections'
 import { boundsContainPolygon } from 'utils/bounds'
   translateBounds,
 } from 'utils/utils'
 import styled from 'styles'
+import { defaultStyle, getShapeStyle } from 'lib/shape-styles'
 
 const pathCache = new WeakMap<DrawShape['points'], string>([])
 
       isHidden: false,
       ...props,
       style: {
-        strokeWidth: 2,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
+        ...defaultStyle,
         ...props.style,
-        fill: props.style.stroke,
+        isFilled: false,
       },
     }
   },
   render(shape) {
     const { id, points, style } = shape
 
+    const styles = getShapeStyle(style)
+
     if (!pathCache.has(points)) {
       pathCache.set(
         points,
         getSvgPathFromStroke(
           getStroke(points, {
-            size: +style.strokeWidth * 2,
+            size: +styles.strokeWidth * 2,
             thinning: 0.9,
             end: { taper: 100 },
             start: { taper: 40 },
     }
 
     if (points.length < 2) {
-      return <circle id={id} r={+style.strokeWidth * 0.618} />
+      return (
+        <circle id={id} r={+styles.strokeWidth * 0.618} fill={styles.stroke} />
+      )
     }
 
-    return <path id={id} d={pathCache.get(points)} />
+    return <path id={id} d={pathCache.get(points)} fill={styles.stroke} />
   },
 
   applyStyles(shape, style) {
     Object.assign(shape.style, style)
-    shape.style.fill = shape.style.stroke
+    shape.style.isFilled = false
+    shape.style.dash = DashStyle.Solid
     return this
   },
 
 
   hitTest(shape, point) {
     let pt = vec.sub(point, shape.point)
-    let prev = shape.points[0]
-
-    for (let i = 1; i < shape.points.length; i++) {
-      let curr = shape.points[i]
-      if (
-        vec.distanceToLineSegment(prev, curr, pt) < +shape.style.strokeWidth
-      ) {
-        return true
-      }
-      prev = curr
-    }
-
-    return false
+    const min = +getShapeStyle(shape.style).strokeWidth
+    return shape.points.some(
+      (curr, i) =>
+        i > 0 && vec.distanceToLineSegment(shape.points[i - 1], curr, pt) < min
+    )
   },
 
   hitTestBounds(this, shape, brushBounds) {

lib/shape-utils/ellipse.tsx

   rotateBounds,
   translateBounds,
 } from 'utils/utils'
+import { defaultStyle, getShapeStyle } from 'lib/shape-styles'
 
 const ellipse = registerShapeUtils<EllipseShape>({
   boundsCache: new WeakMap([]),
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
-      style: {
-        fill: '#c6cacb',
-        stroke: '#000',
-      },
+      style: defaultStyle,
       ...props,
     }
   },
 
   render({ id, radiusX, radiusY, style }) {
+    const styles = getShapeStyle(style)
     return (
       <ellipse
         id={id}
         cx={radiusX}
         cy={radiusY}
-        rx={Math.max(0, radiusX - Number(style.strokeWidth) / 2)}
-        ry={Math.max(0, radiusY - Number(style.strokeWidth) / 2)}
+        rx={Math.max(0, radiusX - Number(styles.strokeWidth) / 2)}
+        ry={Math.max(0, radiusY - Number(styles.strokeWidth) / 2)}
       />
     )
   },

lib/shape-utils/index.tsx

   applyStyles(
     this: ShapeUtility<K>,
     shape: K,
-    style: ShapeStyles
+    style: Partial<ShapeStyles>
   ): ShapeUtility<K>
 
   // Set the shape's point.

lib/shape-utils/line.tsx

 import { DotCircle, ThinLine } from 'components/canvas/misc'
 import { translateBounds } from 'utils/utils'
 import styled from 'styles'
+import { defaultStyle } from 'lib/shape-styles'
 
 const line = registerShapeUtils<LineShape>({
   boundsCache: new WeakMap([]),
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
+      ...props,
       style: {
-        fill: '#c6cacb',
-        stroke: '#000',
+        ...defaultStyle,
+        ...props.style,
+        isFilled: false,
       },
-      ...props,
     }
   },
 

lib/shape-utils/polyline.tsx

 import { intersectPolylineBounds } from 'utils/intersections'
 import { boundsContainPolygon } from 'utils/bounds'
 import { getBoundsFromPoints, translateBounds } from 'utils/utils'
+import { defaultStyle } from 'lib/shape-styles'
 
 const polyline = registerShapeUtils<PolylineShape>({
   boundsCache: new WeakMap([]),
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
-      style: {
-        strokeWidth: 2,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-      },
+      style: defaultStyle,
       ...props,
     }
   },

lib/shape-utils/ray.tsx

 import { intersectCircleBounds } from 'utils/intersections'
 import { DotCircle, ThinLine } from 'components/canvas/misc'
 import { translateBounds } from 'utils/utils'
+import { defaultStyle } from 'lib/shape-styles'
 
 const ray = registerShapeUtils<RayShape>({
   boundsCache: new WeakMap([]),
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
+      ...props,
       style: {
-        fill: '#c6cacb',
-        stroke: '#000',
-        strokeWidth: 1,
+        ...defaultStyle,
+        ...props.style,
+        isFilled: false,
       },
-      ...props,
     }
   },
 

lib/shape-utils/rectangle.tsx

   getRotatedCorners,
   translateBounds,
 } from 'utils/utils'
+import { defaultStyle, getShapeStyle } from 'lib/shape-styles'
 
 const rectangle = registerShapeUtils<RectangleShape>({
   boundsCache: new WeakMap([]),
       isAspectRatioLocked: false,
       isLocked: false,
       isHidden: false,
-      style: {
-        fill: '#c6cacb',
-        stroke: '#000',
-      },
+      style: defaultStyle,
       ...props,
     }
   },
 
   render({ id, size, radius, style }) {
+    const styles = getShapeStyle(style)
     return (
       <g id={id}>
         <rect
           id={id}
           rx={radius}
           ry={radius}
-          width={Math.max(0, size[0] - Number(style.strokeWidth) / 2)}
-          height={Math.max(0, size[1] - Number(style.strokeWidth) / 2)}
+          width={Math.max(0, size[0] - Number(styles.strokeWidth) / 2)}
+          height={Math.max(0, size[1] - Number(styles.strokeWidth) / 2)}
         />
       </g>
     )

state/commands/style.ts

-import Command from "./command"
-import history from "../history"
-import { Data, ShapeStyles } from "types"
-import { getPage, getSelectedShapes } from "utils/utils"
-import { getShapeUtils } from "lib/shape-utils"
-import { current } from "immer"
+import Command from './command'
+import history from '../history'
+import { Data, ShapeStyles } from 'types'
+import { getPage, getSelectedShapes } from 'utils/utils'
+import { getShapeUtils } from 'lib/shape-utils'
+import { current } from 'immer'
 
-export default function styleCommand(data: Data, styles: ShapeStyles) {
+export default function styleCommand(data: Data, styles: Partial<ShapeStyles>) {
   const { currentPageId } = data
   const initialShapes = getSelectedShapes(current(data))
 
   history.execute(
     data,
     new Command({
-      name: "changed_style",
-      category: "canvas",
+      name: 'changed_style',
+      category: 'canvas',
       manualSelection: true,
       do(data) {
         const { shapes } = getPage(data, currentPageId)

state/data.ts

 import { Data, ShapeType } from 'types'
 import shapeUtils from 'lib/shape-utils'
-import { shades } from 'lib/colors'
 
 export const defaultDocument: Data['document'] = {
   pages: {
       name: 'Page 0',
       childIndex: 0,
       shapes: {
-        arrowShape0: shapeUtils[ShapeType.Arrow].create({
-          id: 'arrowShape0',
-          point: [200, 200],
-          points: [
-            [0, 0],
-            [200, 200],
-          ],
-        }),
-        arrowShape1: shapeUtils[ShapeType.Arrow].create({
-          id: 'arrowShape1',
-          point: [100, 100],
-          points: [
-            [0, 0],
-            [300, 0],
-          ],
-        }),
-
+        // arrowShape0: shapeUtils[ShapeType.Arrow].create({
+        //   id: 'arrowShape0',
+        //   point: [200, 200],
+        //   points: [
+        //     [0, 0],
+        //     [200, 200],
+        //   ],
+        // }),
+        // arrowShape1: shapeUtils[ShapeType.Arrow].create({
+        //   id: 'arrowShape1',
+        //   point: [100, 100],
+        //   points: [
+        //     [0, 0],
+        //     [300, 0],
+        //   ],
+        // }),
         // shape3: shapeUtils[ShapeType.Dot].create({
         //   id: 'shape3',
         //   name: 'Shape 3',

state/sessions/draw-session.ts

 
 export function getDrawSnapshot(data: Data, shapeId: string) {
   const page = getPage(current(data))
-  const { points, style } = page.shapes[shapeId] as DrawShape
+  const { points } = page.shapes[shapeId] as DrawShape
+
   return {
     id: shapeId,
     points,
-    strokeWidth: style.strokeWidth,
   }
 }
 

state/state.ts

 import * as vec from 'utils/vec'
 import inputs from './inputs'
 import { defaultDocument } from './data'
-import { shades } from 'lib/colors'
 import { createShape, getShapeUtils } from 'lib/shape-utils'
 import history from 'state/history'
 import * as Sessions from './sessions'
   getCurrent,
   getPage,
   getSelectedBounds,
-  getSelectedShapes,
   getShape,
   screenToWorld,
   setZoomCSS,
   AlignType,
   StretchType,
   DashStyle,
+  SizeStyle,
+  ColorStyle,
 } from 'types'
 
 const initialData: Data = {
     nudgeDistanceSmall: 1,
   },
   currentStyle: {
-    fill: shades.lightGray,
-    stroke: shades.darkGray,
-    strokeWidth: 2,
+    size: SizeStyle.Medium,
+    color: ColorStyle.Black,
     dash: DashStyle.Solid,
+    isFilled: false,
   },
   camera: {
     point: [0, 0],
         SELECTED_RECTANGLE_TOOL: { unless: 'isReadOnly', to: 'rectangle' },
         TOGGLED_CODE_PANEL_OPEN: 'toggleCodePanel',
         TOGGLED_STYLE_PANEL_OPEN: 'toggleStylePanel',
-        TOUCHED_CANVAS: 'closeStylePanel',
+        POINTED_CANVAS: 'closeStylePanel',
         CHANGED_STYLE: ['updateStyles', 'applyStylesToSelection'],
         SELECTED_ALL: { to: 'selecting', do: 'selectAll' },
         NUDGED: { do: 'nudgeSelection' },
     },
 
     restoreSavedData(data) {
-      history.load(data)
+      // history.load(data)
     },
 
     clearBoundsRotation(data) {
       const page = getPage(data)
       const shapeStyles = selectedIds.map((id) => page.shapes[id].style)
 
-      const commonStyle: Partial<ShapeStyles> = {}
+      const commonStyle: ShapeStyles = {} as ShapeStyles
 
       const overrides = new Set<string>([])
 

types.ts

 // Cubic = "cubic",
 // Conic = "conic",
 
-export type ShapeStyles = Partial<
-  React.SVGProps<SVGUseElement> & {
-    dash: DashStyle
-  }
->
+export enum ColorStyle {
+  White = 'White',
+  LightGray = 'LightGray',
+  Gray = 'Gray',
+  Black = 'Black',
+  Lime = 'Lime',
+  Green = 'Green',
+  Teal = 'Teal',
+  Cyan = 'Cyan',
+  Blue = 'Blue',
+  Indigo = 'Indigo',
+  Violet = 'Violet',
+  Grape = 'Grape',
+  Pink = 'Pink',
+  Red = 'Red',
+  Orange = 'Orange',
+  Yellow = 'Yellow',
+}
+
+export enum SizeStyle {
+  Small = 'Small',
+  Medium = 'Medium',
+  Large = 'Large',
+}
+
+export enum DashStyle {
+  Solid = 'Solid',
+  Dashed = 'Dashed',
+  Dotted = 'Dotted',
+}
+
+export type ShapeStyles = {
+  color: ColorStyle
+  size: SizeStyle
+  dash: DashStyle
+  isFilled: boolean
+}
+
+// export type ShapeStyles = Partial<
+//   React.SVGProps<SVGUseElement> & {
+//     dash: DashStyle
+//   }
+// >
 
 export interface BaseShape {
   id: string
   Arrow = 'Arrow',
 }
 
-export enum DashStyle {
-  Solid = 'Solid',
-  Dashed = 'Dashed',
-  Dotted = 'Dotted',
-}
-
 export interface ShapeBinding {
   id: string
   index: number