feat: light mode updates (#619)

pluralsh · Jul 5, 2024 · b5198a8 · b5198a8
1 parent 6074958
commit b5198a8
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 181 deletions.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -133,34 +133,6 @@ export const getFillToLightBgC = memoize(
   })
 )
 
-const getLightModeBorderMapper = memoize(
-  (theme: DefaultTheme): Record<Exclude<CardSeverity, 'neutral'>, string> => ({
-    info: theme.colors['border-info'],
-    success: theme.colors['border-success'],
-    warning: theme.colors['border-warning'],
-    danger: theme.colors['border-danger-light'],
-    critical: theme.colors['border-danger'],
-  })
-)
-
-const getBorderColor = ({
-  theme,
-  fillLevel,
-  severity = 'neutral',
-}: {
-  theme: DefaultTheme
-  fillLevel: CardFillLevel
-  severity?: CardSeverity
-}) => {
-  const fillLevelToLightBorderColor = getLightModeBorderMapper(theme)
-
-  if (theme.mode === 'dark' || severity === 'neutral') {
-    return theme.colors[fillToNeutralBorderC[fillLevel]]
-  }
-
-  return fillLevelToLightBorderColor[severity]
-}
-
 const getBgColor = ({
   theme,
   fillLevel,
@@ -197,15 +169,11 @@ const CardSC = styled(Div)<{
     disabled,
   }) => ({
     ...theme.partials.reset.button,
-    border: `1px solid ${getBorderColor({
-      theme,
-      fillLevel,
-      severity,
-    })}`,
+    border: `1px solid ${theme.colors[fillToNeutralBorderC[fillLevel]]}`,
     borderRadius: theme.borderRadiuses[cornerSize],
     backgroundColor: selected
       ? theme.colors[fillToNeutralSelectedBgC[fillLevel]]
-      : getBgColor({ theme, fillLevel, severity }),
+      : getBgColor({ theme, fillLevel }),
     '&:focus, &:focus-visible': {
       outline: 'none',
     },

diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
@@ -11,15 +11,12 @@ import styled, {
   useTheme,
 } from 'styled-components'
 
-import chroma from 'chroma-js'
-
 import { type SEVERITIES } from '../types'
 
 import { Spinner } from './Spinner'
 import Card, {
   type BaseCardProps,
   type CardFillLevel,
-  getFillToLightBgC,
   useDecideFillLevel,
 } from './Card'
 import CloseIcon from './icons/CloseIcon'
@@ -84,9 +81,7 @@ const ChipCardSC = styled(Card)<{
   $condensed?: boolean
 }>(({ $size, $severity, $truncateWidth, $truncateEdge, $condensed, theme }) => {
   const textColor =
-    theme.mode === 'light'
-      ? theme.colors['text-light']
-      : theme.colors[severityToColor[$severity]] || theme.colors.text
+    theme.colors[severityToColor[$severity]] || theme.colors.text
 
   return {
     '&&': {
@@ -136,43 +131,35 @@ const ChipCardSC = styled(Card)<{
 })
 
 const CloseButtonSC = styled.button<{
-  $severity: ChipSeverity
   $fillLevel: CardFillLevel
-}>(({ theme, $fillLevel, $severity }) => {
-  const lightBg = chroma(getFillToLightBgC(theme)[$severity][$fillLevel])
-  const lightBgHover = `${lightBg.alpha(lightBg.alpha() + 0.15)}`
-
-  return {
-    ...theme.partials.reset.button,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: theme.borderRadiuses.medium,
-    padding: theme.spacing.xsmall - theme.spacing.xxsmall,
-    margin: -(theme.spacing.xsmall - theme.spacing.xxsmall),
-    '.closeIcon': {
-      color: theme.colors['text-light'],
-    },
-    '&:focus-visible': {
-      ...theme.partials.focus.outline,
-    },
-    '&:not(:disabled)': {
-      '&:focus-visible, &:hover, [data-clickable=true]:hover > &': {
-        backgroundColor:
-          theme.mode === 'light' && $severity !== 'neutral'
-            ? lightBgHover
-            : theme.colors[
-                `fill-${
-                  $fillLevel === 3 ? 'three' : $fillLevel === 2 ? 'two' : 'one'
-                }-hover`
-              ],
-        '.closeIcon': {
-          color: theme.colors.text,
-        },
+}>(({ theme, $fillLevel }) => ({
+  ...theme.partials.reset.button,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: theme.borderRadiuses.medium,
+  padding: theme.spacing.xsmall - theme.spacing.xxsmall,
+  margin: -(theme.spacing.xsmall - theme.spacing.xxsmall),
+  '.closeIcon': {
+    color: theme.colors['text-light'],
+  },
+  '&:focus-visible': {
+    ...theme.partials.focus.outline,
+  },
+  '&:not(:disabled)': {
+    '&:focus-visible, &:hover, [data-clickable=true]:hover > &': {
+      backgroundColor:
+        theme.colors[
+          `fill-${
+            $fillLevel === 3 ? 'three' : $fillLevel === 2 ? 'two' : 'one'
+          }-hover`
+        ],
+      '.closeIcon': {
+        color: theme.colors.text,
       },
     },
-  }
-})
+  },
+}))
 
 function ChipRef(
   {

diff --git a/src/components/SubTab.tsx b/src/components/SubTab.tsx
@@ -48,6 +48,8 @@ const SubTabBase = styled.div<{
     ? theme.colors[parentFillLevelToActiveBG[parentFillLevel]]
     : 'transparent',
   borderRadius: theme.borderRadiuses.medium,
+  outline: active ? theme.borders.default : undefined,
+  outlineOffset: '-1px', // inset outline instead of border so layout isn't affected
   focusVisible: {
     zIndex: theme.zIndexes.base + 1,
     ...theme.partials.focus.default,
@@ -62,8 +64,7 @@ const SubTabBase = styled.div<{
         ? theme.colors[parentFillLevelToHoverBG[parentFillLevel]]
         : undefined,
   },
-  transition:
-    'background-color 150ms ease, border-color 150ms ease, color 150ms ease',
+  transition: 'background-color 150ms ease, color 150ms ease',
   '.codeTabInner': {},
 }))
 

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -158,20 +158,20 @@ const Tr = styled.tr<{
   }) => ({
     display: 'contents',
     backgroundColor: selected
-      ? theme.colors['fill-one-selected']
+      ? theme.colors['fill-zero-hover']
       : raised || (selectable && !selected)
-      ? theme.colors['fill-one-hover']
-      : theme.colors['fill-one'],
+      ? theme.colors['fill-zero-selected']
+      : theme.colors['fill-zero'],
 
     ...(clickable && {
       cursor: 'pointer',
 
       '&:hover': {
         backgroundColor: selectable
           ? selected
-            ? theme.colors['fill-one-selected']
-            : theme.colors['fill-one-hover']
-          : theme.colors['fill-one-selected'],
+            ? theme.colors['fill-zero-hover']
+            : theme.colors['fill-zero-selected']
+          : theme.colors['fill-zero-hover'],
       },
     }),
   })
@@ -196,9 +196,9 @@ const Th = styled.th<{
       alignItems: 'center',
       display: hideHeader ? 'none' : 'flex',
       position: 'relative',
-      backgroundColor: theme.colors['fill-two'],
+      backgroundColor: theme.colors['fill-one'],
       zIndex: 4,
-      borderBottom: theme.borders['fill-three'],
+      borderBottom: theme.borders.default,
       color: theme.colors.text,
       height: 48,
       minHeight: 48,
@@ -222,7 +222,7 @@ const Th = styled.th<{
         bottom: 0,
         width: 10000,
         backgroundColor: theme.colors['fill-two'],
-        borderBottom: hideHeader ? 'none' : theme.borders['fill-three'],
+        borderBottom: hideHeader ? 'none' : theme.borders.default,
       },
     },
     '&:first-child': {

diff --git a/src/theme/boxShadows.ts b/src/theme/boxShadows.ts
@@ -1,9 +1,6 @@
 import chroma from 'chroma-js'
 import { type CSSProperties } from 'react'
 
-import { borderWidths } from './borders'
-
-import { semanticColorCssVars } from './colors'
 import { semanticColorsDark } from './colors-semantic-dark'
 import { semanticColorsLight } from './colors-semantic-light'
 
@@ -48,6 +45,4 @@ export const getBoxShadows = ({ mode }: { mode: 'dark' | 'light' }) =>
           ].join(','),
           modalPurple: `0px 10px 40px 0px ${shadowLPurple.alpha(0.25)}`,
         }),
-    // Deprecated in favor of focus outlines
-    focused: `0px 0px 0px ${borderWidths.focus}px ${semanticColorCssVars['border-outline-focused']}`,
   }) as const satisfies Record<string, CSSProperties['boxShadow']>
diff --git a/src/theme/colors-base.ts b/src/theme/colors-base.ts
@@ -16,11 +16,15 @@ export const grey = {
   600: '#5D626F',
   500: '#747B8B',
   400: '#A1A5B0',
-  350: '#A9AFBC',
-  300: '#B2B7C3',
-  200: '#C5C9D3',
-  100: '#DFE2E7',
-  50: '#EBEFF0',
+  350: '#A8AEBC',
+  300: '#AEB3C0',
+  200: '#C5C9D2',
+  175: '#CCCFD6',
+  150: '#D4D6DC',
+  125: '#DDDFE3',
+  100: '#E3E4E7',
+  75: '#EBEDEE',
+  50: '#EEF0F1',
   25: '#F9FAFA',
 } as const satisfies Record<number, CSSProperties['color']>
 
@@ -75,11 +79,11 @@ export const yellow = {
   950: '#242000',
   900: '#3D2F00',
   850: '#574500',
-  800: '#756200',
-  700: '#A88C00',
-  600: '#D6BA00',
-  500: '#FFE500',
-  400: '#FFEB33',
+  800: '#855800',
+  700: '#A86D00',
+  600: '#E09600',
+  500: '#F5AF00',
+  400: '#FFCF33',
   300: '#FFF170',
   200: '#FFF59E',
   100: '#FFF9C2',

diff --git a/src/theme/colors-semantic-dark.ts b/src/theme/colors-semantic-dark.ts
@@ -1,4 +1,3 @@
-import chroma from 'chroma-js'
 import { type CSSProperties } from 'styled-components'
 
 import { blue, green, grey, purple, red, yellow } from './colors-base'
@@ -10,20 +9,21 @@ export const semanticColorsDark = {
   //
   // fill-zero
   'fill-zero': grey[900],
-  'fill-zero-hover': grey[875],
-  'fill-zero-selected': grey[825],
+  'fill-zero-hover': grey[850],
+  'fill-zero-selected': grey[875],
   // fill-one
   'fill-one': grey[850],
-  'fill-one-hover': grey[825],
-  'fill-one-selected': grey[775],
+  'fill-one-hover': grey[800],
+  'fill-one-selected': grey[825],
   // fill-two
   'fill-two': grey[800],
-  'fill-two-hover': grey[775],
-  'fill-two-selected': grey[725],
+  'fill-two-hover': grey[750],
+  'fill-two-selected': grey[775],
   // fill-three
   'fill-three': grey[750],
-  'fill-three-hover': grey[725],
-  'fill-three-selected': grey[675],
+  'fill-three-hover': grey[700],
+  'fill-three-selected': grey[725],
+  // primary
   'fill-primary': purple[400],
   'fill-primary-hover': purple[350],
 
@@ -45,9 +45,11 @@ export const semanticColorsDark = {
   'action-link-inline-hover': blue[100],
   'action-link-inline-visited': purple[300],
   'action-link-inline-visited-hover': purple[200],
-  'action-input-hover': `${chroma('#E9ECF0').alpha(0.04)}`,
+  // input
+  'action-input-hover': '#E9ECF00A',
   // always-white
   'action-always-white': grey[50],
+  'action-on-filled-bg': grey[25],
 
   // Border
   //
@@ -63,7 +65,7 @@ export const semanticColorsDark = {
   'border-success': green[300],
   'border-warning': yellow[200],
   'border-danger': red[300],
-  'border-danger-light': red[300],
+  'border-danger-light': red[200],
   'border-outline-focused': blue[300],
 
   // Text
@@ -83,6 +85,7 @@ export const semanticColorsDark = {
   'text-danger': red[400],
   'text-danger-light': red[200],
   'text-always-white': grey[50],
+  'text-on-filled-bg': grey[50],
 
   // Icon
   //
@@ -133,11 +136,4 @@ export const semanticColorsDark = {
   semanticYellow: '#FFF9C2',
   semanticRedLight: '#F599A8',
   semanticRedDark: '#E95374',
-
-  // Deprecated (Remove after all 'error' colors converted to 'danger' in app)
-  //
-  'border-error': red[300],
-  'text-error': red[400],
-  'text-error-light': red[200],
-  'icon-error': red[200],
 } as const satisfies Record<string, CSSProperties['color']>