Start adding ide colors, includes adding custom theme to openscad

Resolves #365

app/api/src/docker/openscad/Dockerfile

@@ -42,6 +42,8 @@ RUN npm install
 RUN echo "OPENSCADPATH=/var/task/openscad" >>/etc/profile && \
   wget -P /var/task/openscad/ https://github.com/Irev-Dev/Round-Anything/archive/refs/tags/1.0.4.zip && \
   unzip /var/task/openscad/1.0.4
+# Add our own theming (based on DeepOcean with a different "background" and "opencsg-face-back")
+COPY openscad/cadhubtheme.json /usr/share/openscad/color-schemes/render/
 
 COPY openscad/*.js /var/task/
 COPY common/*.js /var/common/

app/api/src/docker/openscad/cadhubtheme.json

@@ -0,0 +1,19 @@
+{
+  "name" : "CadHub",
+  "index" : 1600,
+  "show-in-gui" : true,
+
+  "colors" : {
+      "background" :         "#1A1A1D",
+      "axes-color" :         "#c1c1c1",
+      "opencsg-face-front" : "#eeeeee",
+      "opencsg-face-back" :  "#8732F2",
+      "cgal-face-front" :    "#eeeeee",
+      "cgal-face-back" :     "#0babc8",
+      "cgal-face-2d" :       "#9370db",
+      "cgal-edge-front" :    "#0000ff",
+      "cgal-edge-back" :     "#0000ff",
+      "cgal-edge-2d" :       "#ff00ff",
+      "crosshair" :          "#f0f0f0"
+  }
+}

app/api/src/docker/openscad/runScad.js

@@ -21,7 +21,7 @@ module.exports.runScad = async ({
   const { x: px, y: py, z: pz } = position
   const cameraArg = `--camera=${px},${py},${pz},${rx},${ry},${rz},${dist}`
   const fullPath = `/tmp/${tempFile}/output.png`
-  const command = `xvfb-run --auto-servernum --server-args "-screen 0 1024x768x24" openscad -o ${fullPath} ${cameraArg} --imgsize=${x},${y} --colorscheme DeepOcean /tmp/${tempFile}/main.scad`
+  const command = `xvfb-run --auto-servernum --server-args "-screen 0 1024x768x24" openscad -o ${fullPath} ${cameraArg} --imgsize=${x},${y} --colorscheme CadHub /tmp/${tempFile}/main.scad`
   console.log('command', command)
 
   try {

app/web/src/components/EditorMenu/EditorMenu.tsx

@@ -18,9 +18,9 @@ const EditorMenu = () => {
   const isOpenScad = state.ideType === 'openScad'
   const isCadQuery = state.ideType === 'cadQuery'
   return (
-    <div className="flex justify-between bg-gray-500 text-gray-100">
+    <div className="flex justify-between bg-ch-gray-760 text-gray-100">
       <div className="flex items-center h-9 w-full cursor-grab">
-        <div className=" text-gray-500 bg-gray-300 cursor-grab px-2 h-full flex items-center">
+        <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
           <Svg name="drag-grid" className="w-4 p-px" />
         </div>
         <div className="flex gap-6 px-5">
@@ -31,10 +31,12 @@ const EditorMenu = () => {
           <button className="cursor-not-allowed" disabled>
             Edit
           </button>
-          <ViewDropdown handleLayoutReset={() => thunkDispatch({type: 'resetLayout'})} />
+          <ViewDropdown
+            handleLayoutReset={() => thunkDispatch({ type: 'resetLayout' })}
+          />
         </div>
         <button
-          className="text-gray-300  h-full cursor-not-allowed"
+          className="text-ch-gray-300  h-full cursor-not-allowed"
           aria-label="editor settings"
           disabled
         >
@@ -112,12 +114,18 @@ function ViewDropdown({ handleLayoutReset }) {
   )
 }
 
-function Dropdown({ name, children }: {name: string, children: React.ReactNode}) {
+function Dropdown({
+  name,
+  children,
+}: {
+  name: string
+  children: React.ReactNode
+}) {
   return (
     <div className="relative">
       <Menu>
         <Menu.Button className="text-gray-100">{name}</Menu.Button>
-        <Menu.Items className="absolute flex flex-col mt-4 bg-gray-500 rounded shadow-md text-gray-100 overflow-hidden whitespace-nowrap">
+        <Menu.Items className="absolute flex flex-col mt-4 bg-ch-gray-760 rounded text-gray-100 overflow-hidden whitespace-nowrap border border-ch-gray-700">
           {children}
         </Menu.Items>
       </Menu>

app/web/src/components/IdeConsole/IdeConsole.js

@@ -1,6 +1,5 @@
 import { useEffect } from 'react'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
-import { matchEditorVsDarkTheme } from 'src/components/IdeEditor'
 
 const IdeConsole = () => {
   const { state } = useIdeContext()
@@ -12,21 +11,14 @@ const IdeConsole = () => {
   }, [state.consoleMessages])
 
   return (
-    <div
+    <div className="p-2 px-8 pt-4 min-h-full bg-ch-gray-800">
-      className="p-2 px-8 pt-14 min-h-full"
-      style={matchEditorVsDarkTheme.Bg}
-    >
       <div>
         {state.consoleMessages?.map(({ type, message, time }, index) => (
           <pre
-            className="font-mono text-sm"
+            className="font-mono text-sm text-gray-300"
-            style={matchEditorVsDarkTheme.Text}
             key={`${message} ${index}`}
           >
-            <div
+            <div className="text-xs font-bold pt-2 text-ch-blue-600">
-              className="text-xs font-bold pt-2"
-              style={matchEditorVsDarkTheme.TextBrown}
-            >
               {time?.toLocaleString()}
             </div>
             <div className={(type === 'error' ? 'text-red-400' : '') + ' pl-4'}>

app/web/src/components/IdeContainer/IdeContainer.js

@@ -1,17 +1,43 @@
-import { useRef, useEffect } from 'react'
+import { useRef, useEffect, Suspense, lazy } from 'react'
 import { Mosaic, MosaicWindow } from 'react-mosaic-component'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
-import IdeEditor from 'src/components/IdeEditor'
-import IdeViewer from 'src/components/IdeViewer'
 import IdeConsole from 'src/components/IdeConsole'
 import 'react-mosaic-component/react-mosaic-component.css'
 import EditorMenu from 'src/components/EditorMenu/EditorMenu'
 import PanelToolbar from 'src/components/PanelToolbar'
 
+const IdeEditor = lazy(() => import('src/components/IdeEditor/IdeEditor'))
+const IdeViewer = lazy(() => import('src/components/IdeViewer/IdeViewer'))
+
+const SmallLoadingPing = (
+  <div className="bg-ch-gray-800 text-gray-200 font-ropa-sans relative w-full h-full flex justify-center items-center">
+    <div className="relative">
+      <div className="absolute inset-0 flex justify-center items-center">
+        <div className="h-4 w-4 bg-purple-600 rounded-full animate-ping"></div>
+      </div>
+      <div className="relative">. . . loading</div>
+    </div>
+  </div>
+)
+
+const BigLoadingPing = () => (
+  <div className="inset-0 absolute flex items-center justify-center">
+    <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
+  </div>
+)
+
 const ELEMENT_MAP = {
-  Editor: <IdeEditor />,
+  Editor: (
-  Viewer: <IdeViewer />,
+    <Suspense fallback={SmallLoadingPing}>
+      <IdeEditor Loading={SmallLoadingPing} />
+    </Suspense>
+  ),
+  Viewer: (
+    <Suspense fallback={BigLoadingPing}>
+      <IdeViewer Loading={BigLoadingPing} />
+    </Suspense>
+  ),
   Console: <IdeConsole />,
 }
 
@@ -78,7 +104,10 @@ const IdeContainer = () => {
   }, [])
 
   return (
-    <div id="cadhub-ide" className="mosaic-toolbar-overrides flex-auto h-full">
+    <div
+      id="cadhub-ide"
+      className="mosaic-toolbar-overrides flex-auto h-full bg-red-500"
+    >
       <Mosaic
         renderTile={(id, path) => {
           return (

app/web/src/components/IdeEditor/IdeEditor.js

@@ -1,22 +1,43 @@
-import { Suspense, lazy } from 'react'
+import { useEffect, useState } from 'react'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { makeCodeStoreKey } from 'src/helpers/hooks/useIdeState'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
-const Editor = lazy(() => import('@monaco-editor/react'))
+import Editor, { useMonaco } from '@monaco-editor/react'
+import { theme } from 'src/../tailwind.config'
 
-export const matchEditorVsDarkTheme = {
+const colors = theme.extend.colors
-  // Some colors to roughly match the vs-dark editor theme
-  Bg: { backgroundColor: 'rgb(30,30,30)' },
-  Text: { color: 'rgb(212,212,212)' },
-  TextBrown: { color: 'rgb(206,144,120)' },
-}
 
-const IdeEditor = () => {
+const IdeEditor = ({ Loading }) => {
   const { state, thunkDispatch } = useIdeContext()
+  const [theme, setTheme] = useState('vs-dark')
   const ideTypeToLanguageMap = {
     cadQuery: 'python',
     openScad: 'cpp',
   }
+  const monaco = useMonaco()
+  useEffect(() => {
+    if (monaco) {
+      const themeName = 'cadhub'
+      monaco.editor.defineTheme(themeName, {
+        base: 'vs-dark',
+        inherit: true,
+        rules: [
+          { background: colors['ch-gray'][750] },
+          {
+            token: 'comment',
+            foreground: colors['ch-blue'][600],
+            fontStyle: 'italic',
+          },
+          { token: 'keyword', foreground: colors['ch-purple'][600] },
+          { token: 'string', foreground: colors['ch-pink'][300] },
+        ],
+        colors: {
+          'editor.background': colors['ch-gray'][800],
+        },
+      })
+      setTheme(themeName)
+    }
+  }, [monaco])
 
   function handleCodeChange(value, _event) {
     thunkDispatch({ type: 'updateCode', payload: value })
@@ -40,33 +61,22 @@ const IdeEditor = () => {
       localStorage.setItem(makeCodeStoreKey(state.ideType), state.code)
     }
   }
-  const loading = (
+
-    <div
-      className="text-gray-700 font-ropa-sans relative"
-      style={{ backgroundColor: 'red' }}
-    >
-      <div className="absolute inset-0 text-center flex items-center w-32">
-        . . . loading
-      </div>
-    </div>
-  )
   return (
     <div // eslint-disable-line jsx-a11y/no-static-element-interactions
       className="h-full"
       onKeyDown={handleSaveHotkey}
     >
-      <Suspense fallback={loading}>
+      <Editor
-        <Editor
+        defaultValue={state.code}
-          defaultValue={state.code}
+        value={state.code}
-          value={state.code}
+        theme={theme}
-          theme="vs-dark"
+        loading={Loading}
-          loading={loading}
+        // TODO #247 cpp seems better than js for the time being
-          // TODO #247 cpp seems better than js for the time being
+        defaultLanguage={ideTypeToLanguageMap[state.ideType] || 'cpp'}
-          defaultLanguage={ideTypeToLanguageMap[state.ideType] || 'cpp'}
+        language={ideTypeToLanguageMap[state.ideType] || 'cpp'}
-          language={ideTypeToLanguageMap[state.ideType] || 'cpp'}
+        onChange={handleCodeChange}
-          onChange={handleCodeChange}
+      />
-        />
-      </Suspense>
     </div>
   )
 }

app/web/src/components/IdeHeader/IdeHeader.tsx

@@ -2,38 +2,39 @@ import { Popover } from '@headlessui/react'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
 import FullScriptEncoding from 'src/components/EncodedUrl/FullScriptEncoding'
 import ExternalScript from 'src/components/EncodedUrl/ExternalScript'
+import Svg from 'src/components/Svg/Svg'
 
 const TopButton = ({
   onClick,
   children,
   className,
-  iconColor,
+  name,
 }: {
   onClick?: () => void
   children: React.ReactNode
   className?: string
-  iconColor: string
+  name: string
 }) => (
   <button
     onClick={onClick}
     className={`flex bg-gray-200 h-10 justify-center items-center px-4 rounded ${className}`}
   >
-    <div className={`rounded-full h-6 w-6 mr-4 ${iconColor}`} />
     {children}
+    {name}
   </button>
 )
 
 const IdeHeader = ({ handleRender }: { handleRender: () => void }) => {
   return (
-    <div className="h-16 w-full bg-gray-900 flex justify-between items-center">
+    <div className="h-16 w-full bg-ch-gray-900 flex justify-between items-center">
-      <div className="bg-gray-700 pr-48 h-full"></div>
+      <div className="bg-ch-gray-700 pr-48 h-full"></div>
       <div className="text-gray-200 flex gap-4 mr-4">
         <TopButton
-          className="bg-gray-600 text-gray-200"
+          className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
-          iconColor="bg-gray-300"
           onClick={handleRender}
+          name="Preview"
         >
-          Render
+          <Svg name="photograph" className="w-6 h-6 text-ch-pink-500 mr-2" />
         </TopButton>
 
         <Popover className="relative outline-none w-full h-full">
@@ -41,8 +42,14 @@ const IdeHeader = ({ handleRender }: { handleRender: () => void }) => {
             return (
               <>
                 <Popover.Button className="h-full w-full outline-none">
-                  <TopButton iconColor="bg-gray-600" className="text-gray-700">
+                  <TopButton
-                    Share
+                    name="Share"
+                    className=" bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
+                  >
+                    <Svg
+                      name="share"
+                      className="w-6 h-6 text-ch-purple-500 mr-2 mt-1"
+                    />
                   </TopButton>
                 </Popover.Button>
                 {open && (

app/web/src/components/IdeSideBar/IdeSideBar.tsx

@@ -4,7 +4,7 @@ import Svg from 'src/components/Svg/Svg'
 const IdeSideBar = () => {
   return (
     <div className="h-full flex flex-col justify-between">
-      <div className="w-16 h-16 flex items-center justify-center bg-gray-900">
+      <div className="w-16 h-16 flex items-center justify-center bg-ch-gray-900">
         <Link to={routes.home()}>
           <Svg className="w-12" name="favicon" />
         </Link>

app/web/src/components/IdeViewer/IdeViewer.js

@@ -136,7 +136,7 @@ function Sphere(props) {
     </mesh>
   )
 }
-const IdeViewer = () => {
+const IdeViewer = ({ Loading }) => {
   const { state, thunkDispatch } = useIdeContext()
   const [isDragging, setIsDragging] = useState(false)
   const [image, setImage] = useState()
@@ -146,21 +146,13 @@ const IdeViewer = () => {
     setIsDragging(false)
   }, [state.objectData?.type, state.objectData?.data])
 
-  const openSCADDeepOceanThemeBackground = '#323232'
   // the following are tailwind colors in hex, can't use these classes to color three.js meshes.
   const pink400 = '#F472B6'
   const indigo300 = '#A5B4FC'
   const indigo900 = '#312E81'
   return (
-    <div
+    <div className="relative h-full bg-ch-gray-800">
-      className="relative h-full"
+      {state.isLoading && <Loading />}
-      style={{ backgroundColor: openSCADDeepOceanThemeBackground }}
-    >
-      {state.isLoading && (
-        <div className="inset-0 absolute flex items-center justify-center">
-          <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
-        </div>
-      )}
       {image && (
         <div
           className={`absolute inset-0 transition-opacity duration-500 ${

app/web/src/components/IdeWrapper/IdeWrapper.tsx

@@ -15,7 +15,7 @@ const IdeToolbarNew = ({ cadPackage }) => {
 
   return (
     <div className="h-full flex">
-      <div className="w-16 bg-gray-700 flex-shrink-0">
+      <div className="w-16 bg-ch-gray-700 flex-shrink-0">
         <IdeSideBar />
       </div>
       <div className="h-full flex flex-grow flex-col">

app/web/src/components/PanelToolbar/PanelToolbar.tsx

@@ -7,14 +7,14 @@ const PanelToolbar = ({ panelName }: { panelName: string }) => {
   return (
     <div className="absolute top-0 right-0 flex items-center h-9">
       <button
-        className="bg-gray-500 text-gray-300 px-3 rounded-bl-lg h-full cursor-not-allowed"
+        className="bg-ch-gray-760 text-ch-gray-300 px-3 rounded-bl-lg h-full cursor-not-allowed"
         aria-label={`${panelName} settings`}
         disabled
       >
         <Svg name="gear" className="w-7 p-px" />
       </button>
       {mosaicWindowActions.connectDragSource(
-        <div className=" text-gray-500 bg-gray-300 cursor-grab px-2 h-full flex items-center">
+        <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
           <Svg name="drag-grid" className="w-4 p-px" />
         </div>
       )}

app/web/src/components/Svg/Svg.tsx

@@ -17,10 +17,12 @@ type SvgNames =
   | 'logout'
   | 'mac-cmd-key'
   | 'pencil'
+  | 'photograph'
   | 'plus'
   | 'plus-circle'
   | 'refresh'
   | 'save'
+  | 'share'
   | 'terminal'
   | 'trash'
   | 'x'
@@ -345,6 +347,22 @@ const Svg = ({
         />
       </svg>
     ),
+    photograph: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+        />
+      </svg>
+    ),
     plus: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -400,6 +418,14 @@ const Svg = ({
         />
       </svg>
     ),
+    share: (
+      <svg viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M14.4224 0.355957L21.9999 7.44407L14.4224 14.4997V10.1184C-0.365345 10.1184 0.407131 17.6436 0.407131 17.6436C0.407131 17.6436 -3.73829 4.71837 14.4224 4.71837L14.4224 0.355957Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
     terminal: (
       <svg
         xmlns="http://www.w3.org/2000/svg"

app/web/src/helpers/cadPackages/common.js

@@ -2,7 +2,7 @@ import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 
 export const lambdaBaseURL =
   process.env.CAD_LAMBDA_BASE_URL ||
-  'https://2inlbple1b.execute-api.us-east-1.amazonaws.com/prod2'
+  'https://oxt2p7ddgj.execute-api.us-east-1.amazonaws.com/prod'
 
 export const stlToGeometry = (url) =>
   new Promise((resolve, reject) => {

app/web/src/index.css

@@ -44,10 +44,20 @@
   @apply list-disc;
 }
 
+#cadhub-ide.mosaic-toolbar-overrides .mosaic-blueprint-theme {
+  background-color: #0D0D13;
+}
+#cadhub-ide.mosaic-toolbar-overrides .mosaic-root {
+  top: 0;
+}
 .mosaic-toolbar-overrides .mosaic-window .mosaic-window-toolbar {
   /* makes the height of the toolbar based off the content inside instead of hardcoded to 30px */
   height: unset;
 }
+/* used in IdeContainer component */
+#cadhub-ide .mosaic-window.console .mosaic-window-body {
+  overflow-y: auto;
+}
 
 
 /* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
@@ -102,7 +112,3 @@ input.error, textarea.error {
   border: 1px solid red;
 }
 
-/* used in IdeContainer component */
-#cadhub-ide .mosaic-window.console .mosaic-window-body {
-  overflow-y: auto;
-}

app/web/tailwind.config.js

@@ -3,16 +3,46 @@ module.exports = {
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
-      backgroundImage: () => ({
-        texture: `url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%236a49c3' fill-opacity='0.47' fill-rule='evenodd'/%3E%3C/svg%3E");`,
-      }),
       animation: {
         'bounce-sm-slow': 'bounce-sm 5s linear infinite',
         'twist-sm-slow': 'twist-sm 10s infinite',
       },
+      backgroundImage: () => ({
+        texture: `url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%236a49c3' fill-opacity='0.47' fill-rule='evenodd'/%3E%3C/svg%3E");`,
+      }),
+      borderRadius: {
+        half: '50%',
+      },
+      colors: {
+        'ch-gray': {
+          900: '#0D0D13',
+          800: '#1A1A1D',
+          750: '#222222',
+          760: '#232532',
+          700: '#2A3038',
+          300: '#CFCFD8',
+        },
+        'ch-purple': {
+          400: '#3B0480',
+          500: '#8732F2',
+          600: '#A663FA',
+        },
+        'ch-blue': {
+          600: '#79B2F8',
+        },
+        'ch-pink': {
+          800: '#93064F',
+          500: '#DF5CA0',
+          300: '#F98CC5',
+        },
+      },
       cursor: {
         grab: 'grab'
       },
+      fontFamily: {
+        'ropa-sans': ['Ropa Sans', 'Arial', 'sans-serif'],
+        roboto: ['Roboto', 'Arial', 'sans-serif'],
+      },
       keyframes: {
         'bounce-sm': {
           '0%, 100%': {
@@ -41,16 +71,9 @@ module.exports = {
       minHeight: {
         md: '28rem',
       },
-      fontFamily: {
-        'ropa-sans': ['Ropa Sans', 'Arial', 'sans-serif'],
-        roboto: ['Roboto', 'Arial', 'sans-serif'],
-      },
       skew: {
         '-20': '-20deg',
       },
-      borderRadius: {
-        half: '50%',
-      },
     },
   },
   variants: {},