Kill color base (#4206)

* base colors oklch, killed jsYellow; * deleted base file and spread its contents * removed base from utopia-theme * base colors in oklch * fixing errors, also adding a type enforcer! * merge conflict resolution * resurrected componentPurple05solid --------- Co-authored-by: Balazs Bajorics <[email protected]>
concrete-utopia · Sep 21, 2023 · ec6fd82 · ec6fd82
1 parent 3437edf
commit ec6fd82
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 141 deletions.
diff --git a/editor/src/components/code-editor/vscode-editor-loading-screen.tsx b/editor/src/components/code-editor/vscode-editor-loading-screen.tsx
@@ -161,9 +161,7 @@ export const VSCodeLoadingScreen = React.memo((): React.ReactElement | null => {
             width: 140,
           }}
         >
-          <div style={{ color: colorTheme.jsYellow.value, display: 'flex' }}>
-            <JSIcon />
-          </div>
+          <JSIcon />
           <span style={{}}>storyboard.js</span>
         </div>
       </div>
@@ -229,9 +227,7 @@ export const VSCodeLoadingScreen = React.memo((): React.ReactElement | null => {
               justifyContent: 'center',
             }}
           >
-            <div style={{ color: colorTheme.jsYellow.value, display: 'flex', paddingRight: 4 }}>
-              <JSIcon />
-            </div>
+            <JSIcon />
             <div className='monaco-icon-label-container' title='~/utopia/storyboard.js'>
               <span className='monaco-icon-name-container'>
                 <a style={{ color: colorTheme.codeEditorTabRowFg.value }} className='label-name'>

diff --git a/editor/src/uuiui/button.tsx b/editor/src/uuiui/button.tsx
@@ -115,7 +115,7 @@ export const FormButton = styled.button<ButtonProps>((props: ButtonProps) => ({
   backgroundColor: props.primary
     ? props.danger
       ? colorTheme.errorForeground.value
-      : colorTheme.primarySubdued.value
+      : colorTheme.primary.value
     : colorTheme.emphasizedBackgroundPop.value,
 
   color: props.primary ? 'white' : props.danger ? colorTheme.errorForeground.value : 'inherit',
@@ -153,7 +153,7 @@ export const FormButton = styled.button<ButtonProps>((props: ButtonProps) => ({
     backgroundColor: props.primary
       ? props.danger
         ? colorTheme.errorForegroundEmphasized.value
-        : colorTheme.primaryEmphasized.value
+        : colorTheme.primary.value
       : colorTheme.emphasizedBackgroundReduced.value,
   },
 }))
diff --git a/editor/src/uuiui/styles/theme/base.ts b/editor/src/uuiui/styles/theme/base.ts
diff --git a/editor/src/uuiui/styles/theme/dark.ts b/editor/src/uuiui/styles/theme/dark.ts
@@ -1,27 +1,27 @@
-import { createUtopiColor } from '../utopi-color-helpers'
-import { base } from './base'
+import { createUtopiColor, enforceUtopiColorTheme } from '../utopi-color-helpers'
 import type { light } from './light'
 
 const darkBase = {
-  primary: base.blue,
-  primarySubdued: createUtopiColor('rgba(0,118,247,1)'),
-  primaryEmphasized: createUtopiColor('rgba(26,135,255,1)'),
-  component: base.purple,
-  componentChild: base.orange,
-  css: base.neongreen,
-  white: base.white,
-  black: base.black,
-  brandPurple: base.purple,
+  primary: createUtopiColor('oklch(59% 0.25 254)'),
+  primary10: createUtopiColor('oklch(59% 0.25 254 / 10%)'),
+  primary30: createUtopiColor('oklch(59% 0.25 254 / 30%)'),
+  component: createUtopiColor('oklch(53% 0.31 290)'),
+  componentChild: createUtopiColor('oklch(83.6% 0.198 81.5)'),
+  componentChild20: createUtopiColor('oklch(83.6% 0.198 81.5 / 20%)'),
+  css: createUtopiColor('oklch(86.6% 0.27 158.6)'),
+  white: createUtopiColor('oklch(100% 0 0)'),
+  black: createUtopiColor('oklch(0% 0 0)'),
+  brandPurple: createUtopiColor('oklch(53% 0.31 290)'),
+  brandPurple70: createUtopiColor('oklch(53% 0.31 290 / 70%)'),
   brandNeonPink: createUtopiColor('oklch(78.64% 0.237 327.81)'),
   brandNeonPink10: createUtopiColor('oklch(78.64% 0.237 327.81 / 10%)'),
-  brandNeonGreen: base.neongreen,
+  brandNeonGreen: createUtopiColor('oklch(86.6% 0.27 158.6)'),
   pinkSubdued: createUtopiColor('oklch(33% 0.07 327)'),
-  jsYellow: base.jsYellow,
-  secondaryBlue: createUtopiColor('#679AD1'),
-  secondaryOrange: createUtopiColor('#E89A74'),
-  denimBlue: createUtopiColor('#133763'),
-  lightDenimBlue: createUtopiColor('#072140'),
-  transparent: base.transparent,
+  secondaryBlue: createUtopiColor('oklch(75.44% 0.138 251.22)'),
+  secondaryOrange: createUtopiColor('oklch(81.8% 0.141 47)'),
+  denimBlue: createUtopiColor('oklch(33.65% 0.09 255)'),
+  lightDenimBlue: createUtopiColor('oklch(25% 0.07 255)'),
+  transparent: createUtopiColor('oklch(0% 0 0 / 0%)'),
   error: createUtopiColor('oklch(67.99% 0.261 22.81)'),
   componentOrange: createUtopiColor('oklch(80.6% 0.15 50)'),
   componentPurple: createUtopiColor('oklch(76% 0.155 300)'),
@@ -85,7 +85,7 @@ const darkErrorStates = {
   errorForeground: darkBase.error,
   // TODO vv only used by button, refactor button and remove
   errorForegroundEmphasized: createUtopiColor('rgba(245,0,57,1)'),
-  warningForeground: base.orange,
+  warningForeground: darkBase.componentChild,
   // TODO vv only used by image-thumbnail-control, consider removing
   warningBgTranslucent: createUtopiColor('rgba(250, 94, 0, 0.2)'),
   warningBgSolid: createUtopiColor('rgba(252,142,77,1)'),
@@ -101,22 +101,19 @@ const colorsWithOpacity = {
   neutralInvertedBackground20: createUtopiColor('rgba(217, 220, 227, 0.2)'),
   neutralInvertedBackground30: createUtopiColor('rgba(217, 220, 227, 0.3)'),
   listNewItemFlashBackground0: createUtopiColor('rgba(211, 254, 162, 0)'),
-  brandPurple70: base.purple70,
+
   // TODO vv only used by button, refactor & remove
   errorForeground20: createUtopiColor('rgba(253, 0, 59, 0.2)'),
-  primary10: base.blue10,
-  primary30: base.blue30,
   subduedBorder80: createUtopiColor('rgba(24, 28, 32, 0.8)'),
 }
 
-export const dark: typeof light = {
+const darkTheme: typeof light = {
   ...colorsWithOpacity,
   ...darkBase,
   ...darkPrimitives,
   ...darkErrorStates,
 
-  textColor: base.white,
-
+  textColor: darkBase.white,
   panelShadowColor: createUtopiColor('rgba(0,0,0, .3)'),
   seperator: createUtopiColor('#282B35'),
 
@@ -141,7 +138,7 @@ export const dark: typeof light = {
   canvasControlsSizeBoxBorder: createUtopiColor('hsl(0,0%,15%)'),
   canvasControlReorderSliderBoxShadowPrimary: createUtopiColor('rgba(52,52,52,0.35)'),
   canvasControlReorderSliderBoxShadowSecondary: createUtopiColor('rgba(166,166,166,0.82)'),
-  canvasControlsCoordinateSystemMarks: base.neonpink,
+  canvasControlsCoordinateSystemMarks: darkBase.brandNeonPink,
   canvasControlsImmediateParentMarks: createUtopiColor('rgba(0,0,0,0.25)'),
   // TODO vv refactor - only used by self-layout-subsection indirection
   canvasControlsInlineIndicatorInactive: createUtopiColor('rgba(179,215,255,1)'),
@@ -155,21 +152,21 @@ export const dark: typeof light = {
   canvasControlsDimensionableControlShadow: createUtopiColor('rgba(140,140,140,.9)'),
 
   canvasSelectionPrimaryOutline: darkBase.primary,
-  canvasSelectionInstanceOutline: base.purple,
-  canvasSelectionSceneOutline: base.purple,
-  canvasSelectionRandomDOMElementInstanceOutline: base.darkgray,
+  canvasSelectionInstanceOutline: darkBase.brandPurple,
+  canvasSelectionSceneOutline: darkBase.brandPurple,
+  canvasSelectionRandomDOMElementInstanceOutline: createUtopiColor('oklch(59.82% 0 0)'),
   canvasSelectionSecondaryOutline: createUtopiColor('rgba(217, 220, 227, 0.5)'), // fg1
-  canvasSelectionNotFocusable: base.darkgray,
+  canvasSelectionNotFocusable: createUtopiColor('oklch(59.82% 0 0)'),
 
-  canvasSelectionFocusable: base.purple,
-  canvasSelectionIsolatedComponent: base.purple,
+  canvasSelectionFocusable: darkBase.brandPurple,
+  canvasSelectionIsolatedComponent: darkBase.brandPurple,
   //Children of isolated component
-  canvasSelectionNotFocusableChild: base.darkorange,
-  canvasSelectionFocusableChild: base.purple,
+  canvasSelectionNotFocusableChild: createUtopiColor('oklch(63% 0.22 41)'),
+  canvasSelectionFocusableChild: darkBase.brandPurple,
 
-  canvasLayoutStroke: base.neonpink,
+  canvasLayoutStroke: darkBase.brandNeonPink,
 
-  paddingForeground: base.neongreen,
+  paddingForeground: darkBase.brandNeonGreen,
   paddingFillTranslucent: createUtopiColor('rgba(230,248,230,0.9)'),
 
   canvasElementBackground: createUtopiColor('rgba(230,242,255,1)'),
@@ -191,8 +188,8 @@ export const dark: typeof light = {
   // application utilities:
   navigatorResizeHintBorder: darkBase.primary,
   navigatorComponentName: darkBase.primary,
-  navigatorComponentSelected: base.orange20,
-  navigatorComponentIconBorder: base.orange,
+  navigatorComponentSelected: darkBase.componentChild20,
+  navigatorComponentIconBorder: darkBase.componentChild,
 
   contextMenuBackground: darkPrimitives.secondaryBackground,
   contextMenuForeground: darkPrimitives.neutralForeground,
@@ -203,7 +200,7 @@ export const dark: typeof light = {
   inspectorHoverColor: darkBase.fg8,
   inspectorFocusedColor: darkBase.dynamicBlue,
   inspectorSetBorderColor: darkPrimitives.neutralBorder,
-  flasherHookColor: base.neonpink,
+  flasherHookColor: darkBase.brandNeonPink,
 
   // Github pane
   githubBoxesBorder: createUtopiColor('#282a2d'),
@@ -228,5 +225,7 @@ export const dark: typeof light = {
   codeEditorGrid: createUtopiColor('#6d705b'),
 
   // Gap controls
-  gapControls: base.neongreen,
+  gapControls: darkBase.brandNeonGreen,
 }
+
+export const dark = enforceUtopiColorTheme(darkTheme)
diff --git a/editor/src/uuiui/styles/theme/light.ts b/editor/src/uuiui/styles/theme/light.ts
@@ -1,33 +1,34 @@
-import { rgb } from 'chroma-js'
-import { createUtopiColor } from '../utopi-color-helpers'
-import { base } from './base'
+import { MapLike } from 'typescript'
+import { UtopiColor, createUtopiColor, enforceUtopiColorTheme } from '../utopi-color-helpers'
+import type { dark } from './dark'
 
 const lightBase = {
-  primary: base.blue,
-  primarySubdued: createUtopiColor('rgba(0,118,247,1)'),
-  primaryEmphasized: createUtopiColor('rgba(26,135,255,1)'),
-  component: base.purple,
-  componentChild: base.orange,
+  primary: createUtopiColor('oklch(59% 0.25 254)'),
+  primary10: createUtopiColor('oklch(59% 0.25 254 / 10%)'),
+  primary30: createUtopiColor('oklch(59% 0.25 254 / 30%)'),
+  component: createUtopiColor('oklch(53% 0.31 290)'),
+  componentChild: createUtopiColor('oklch(83.6% 0.198 81.5)'),
+  componentChild20: createUtopiColor('oklch(83.6% 0.198 81.5 / 20%)'),
   css: createUtopiColor('oklch(69% 0.18 166.76)'),
-  white: base.white,
-  black: base.black,
-  brandPurple: base.purple,
-  brandNeonPink: base.neonpink,
+  white: createUtopiColor('oklch(100% 0 0)'),
+  black: createUtopiColor('oklch(0% 0 0)'),
+  brandPurple: createUtopiColor('oklch(53% 0.31 290)'),
+  brandPurple70: createUtopiColor('oklch(53% 0.31 290 / 70%)'),
+  brandNeonPink: createUtopiColor('oklch(72.2% 0.36 331.7)'),
   brandNeonPink10: createUtopiColor('oklch(72.53% 0.353 331.69 / 10%)'),
-  brandNeonGreen: base.neongreen,
+  brandNeonGreen: createUtopiColor('oklch(86.6% 0.27 158.6)'),
   pinkSubdued: createUtopiColor('oklch(92% 0.076 326)'),
-  jsYellow: base.jsYellow,
-  secondaryBlue: createUtopiColor('#49B6FF'),
-  secondaryOrange: createUtopiColor('#EEA544'),
-  denimBlue: createUtopiColor('#CEE5FF'),
-  lightDenimBlue: createUtopiColor('#EDF5FF'),
-  transparent: base.transparent,
-  error: base.red,
-  componentOrange: createUtopiColor('lch(61% 89 50)'),
-  componentPurple: base.purple,
-  componentPurple05: base.purple05,
+  secondaryBlue: createUtopiColor('oklch(74.5% 0.14 241.9)'),
+  secondaryOrange: createUtopiColor('oklch(78.97% 0.192 70)'),
+  denimBlue: createUtopiColor('oklch(91.3% 0.04 252)'),
+  lightDenimBlue: createUtopiColor('oklch(97% 0.02 254)'),
+  transparent: createUtopiColor('oklch(0% 0 0 / 0%)'),
+  error: createUtopiColor('oklch(66% 0.3 11.65)'),
+  componentOrange: createUtopiColor('oklch(68% 0.2 42)'),
+  componentPurple: createUtopiColor('oklch(53% 0.31 290)'),
+  componentPurple05: createUtopiColor('oklch(53.19% 0.307 289.7 / 5%)'),
   componentPurple05solid: createUtopiColor('oklch(0.96 0.02 286)'),
-  dynamicBlue: base.blue,
+  dynamicBlue: createUtopiColor('oklch(59% 0.25 254)'),
   dynamicBlue10: createUtopiColor('oklch(58.98% 0.246 254.39 / 10%)'),
   unavailable: createUtopiColor('oklch(54.52% 0 0 / 5%)'),
   unavailableGrey: createUtopiColor('oklch(0% 0 0 / 22%)'),
@@ -61,7 +62,7 @@ const lightPrimitives = {
   // backgrounds
   emphasizedBackground: lightBase.bg0,
   emphasizedBackgroundPop: lightBase.bg1,
-  emphasizedBackgroundReduced: base.white,
+  emphasizedBackgroundReduced: lightBase.white,
   neutralBackground: lightBase.bg1,
   secondaryBackground: lightBase.bg2,
   subtleBackground: lightBase.bg3,
@@ -77,15 +78,15 @@ const lightPrimitives = {
   secondaryBorder: lightBase.border2,
   subduedBorder: lightBase.border1,
 
-  checkerboardLight: base.white,
+  checkerboardLight: createUtopiColor('oklch(100% 0 0)'),
   checkerboardDark: createUtopiColor('rgb(247 247 247)'),
 }
 
 const lightErrorStates = {
-  errorForeground: base.red,
+  errorForeground: createUtopiColor('oklch(66% 0.3 11.65)'),
   errorForegroundEmphasized: createUtopiColor('rgba(245,0,57,1)'),
   // TODO vv only used by button, refactor button and remove
-  warningForeground: base.orange,
+  warningForeground: createUtopiColor('oklch(83.6% 0.198 81.5)'),
   // TODO vv only used by image-thumbnail-control, consider removing
   warningBgTranslucent: createUtopiColor('rgba(250, 94, 0, 0.2)'),
   warningBgSolid: createUtopiColor('rgba(252,142,77,1)'),
@@ -102,21 +103,18 @@ const colorsWithOpacity = {
   neutralInvertedBackground30: createUtopiColor('hsla(0,0%,0%,0.3)'),
   // the following is used with an animation to zero opacity but same colour value
   listNewItemFlashBackground0: createUtopiColor('rgba(211, 254, 162, 0)'),
-  brandPurple70: base.purple70,
   // TODO vv only used by button, refactor & remove
   errorForeground20: createUtopiColor('rgba(253, 0, 59, 0.2)'),
-  primary10: base.blue10,
-  primary30: base.blue30,
   subduedBorder80: createUtopiColor('hsla(0, 0%, 91%, 0.8)'),
 }
 
-export const light = {
+const lightTheme = {
   ...colorsWithOpacity,
   ...lightBase,
   ...lightPrimitives,
   ...lightErrorStates,
 
-  textColor: base.almostBlack,
+  textColor: createUtopiColor('oklch(21.56% 0 0)'),
 
   panelShadowColor: createUtopiColor('rgba(0,0,0, .3)'),
   seperator: createUtopiColor('hsl(0,0%,92%)'),
@@ -142,7 +140,7 @@ export const light = {
   canvasControlsSizeBoxBorder: createUtopiColor('hsl(0,0%,15%)'),
   canvasControlReorderSliderBoxShadowPrimary: createUtopiColor('rgba(52,52,52,0.35)'),
   canvasControlReorderSliderBoxShadowSecondary: createUtopiColor('hsl(0,0%,0%,0.5)'),
-  canvasControlsCoordinateSystemMarks: base.neonpink,
+  canvasControlsCoordinateSystemMarks: lightBase.brandNeonPink,
   canvasControlsImmediateParentMarks: createUtopiColor('rgba(0, 0, 0, 0.25)'),
   canvasControlsInlineIndicatorInactive: createUtopiColor('rgba(179,215,255,1)'),
   canvasControlsInlineToggleUnsetText: createUtopiColor('rgba(179,215,255,1)'),
@@ -154,21 +152,21 @@ export const light = {
   canvasControlsDimensionableControlShadow: createUtopiColor('rgba(140,140,140,.9)'),
 
   canvasSelectionPrimaryOutline: lightBase.primary,
-  canvasSelectionInstanceOutline: base.purple,
-  canvasSelectionSceneOutline: base.purple,
-  canvasSelectionRandomDOMElementInstanceOutline: base.darkgray,
+  canvasSelectionInstanceOutline: lightBase.brandPurple,
+  canvasSelectionSceneOutline: lightBase.brandPurple,
+  canvasSelectionRandomDOMElementInstanceOutline: createUtopiColor('oklch(59.82% 0 0)'),
   canvasSelectionSecondaryOutline: createUtopiColor('hsla(0,0%,10%,0.5)'),
-  canvasSelectionNotFocusable: base.darkgray,
+  canvasSelectionNotFocusable: createUtopiColor('oklch(59.82% 0 0)'),
 
-  canvasSelectionFocusable: base.purple,
-  canvasSelectionIsolatedComponent: base.purple,
+  canvasSelectionFocusable: lightBase.brandPurple,
+  canvasSelectionIsolatedComponent: lightBase.brandPurple,
   //Children of isolated component
-  canvasSelectionNotFocusableChild: base.darkorange,
-  canvasSelectionFocusableChild: base.purple,
+  canvasSelectionNotFocusableChild: createUtopiColor('oklch(63% 0.22 41)'),
+  canvasSelectionFocusableChild: lightBase.brandPurple,
 
-  canvasLayoutStroke: base.neonpink,
+  canvasLayoutStroke: lightBase.brandNeonPink,
 
-  paddingForeground: base.neongreen,
+  paddingForeground: lightBase.brandNeonGreen,
   paddingFillTranslucent: createUtopiColor('rgba(230,248,230,0.7)'),
 
   canvasElementBackground: createUtopiColor('rgba(230,242,255,1)'),
@@ -190,19 +188,19 @@ export const light = {
   // application utilities:
   navigatorResizeHintBorder: lightBase.primary,
   navigatorComponentName: lightBase.primary,
-  navigatorComponentSelected: base.orange20,
-  navigatorComponentIconBorder: base.orange,
+  navigatorComponentSelected: lightBase.componentChild20,
+  navigatorComponentIconBorder: lightBase.componentChild,
 
   contextMenuBackground: lightPrimitives.secondaryBackground,
   contextMenuForeground: lightPrimitives.neutralForeground,
-  contextMenuHighlightForeground: base.white,
+  contextMenuHighlightForeground: lightBase.white,
   contextMenuHighlightBackground: lightBase.primary,
   contextMenuSeparator: createUtopiColor('rgba(0,0,0,0.1)'),
 
   inspectorHoverColor: lightBase.fg8,
   inspectorFocusedColor: lightBase.primary,
   inspectorSetBorderColor: lightPrimitives.neutralBorder,
-  flasherHookColor: base.neonpink,
+  flasherHookColor: lightBase.brandNeonPink,
 
   // Github pane
   githubBoxesBorder: createUtopiColor('#2D2E33'),
@@ -229,3 +227,6 @@ export const light = {
   // Gap controls
   gapControls: createUtopiColor('#FFA500'),
 }
+
+// all values in light must be of the type UtopiColor! This will break if you made a mistake.
+export const light = enforceUtopiColorTheme(lightTheme)