change light mode chips

pluralsh · Jul 4, 2024 · b73ac71 · b73ac71
1 parent 5969d52
commit b73ac71
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 74 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(
   {