From e7d62b7d00764140f83ffa395a8bee505d3277dd Mon Sep 17 00:00:00 2001 From: Klink <85062+dogmar@users.noreply.github.com> Date: Thu, 11 Jan 2024 07:53:11 -0800 Subject: [PATCH] fix: Light mode colors, Sidecar text style (#560) --- src/components/Checkbox.tsx | 2 +- src/components/ChecklistItem.tsx | 31 +++++----- src/components/Sidecar.tsx | 89 ++++++++++++++--------------- src/components/Switch.tsx | 10 ++-- src/theme/borders.ts | 3 +- src/theme/colors-base.ts | 1 + src/theme/colors-cloudshell-dark.ts | 4 +- src/theme/colors-semantic-dark.ts | 12 ++++ src/theme/colors-semantic-light.ts | 24 ++++++-- 9 files changed, 99 insertions(+), 77 deletions(-) diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index a65cbcd5..0196f50d 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -116,7 +116,7 @@ const HonorableLabelStyled = styled(Label)<{ ? { ':hover': { color: theme.colors.text, - '> span': { + '.box': { backgroundColor: theme.colors['action-input-hover'], }, }, diff --git a/src/components/ChecklistItem.tsx b/src/components/ChecklistItem.tsx index 6c4aaf3e..4f2439f7 100644 --- a/src/components/ChecklistItem.tsx +++ b/src/components/ChecklistItem.tsx @@ -13,6 +13,7 @@ import CaretDownIcon from './icons/CaretDownIcon' import SuccessIcon from './icons/SuccessIcon' const heightAnimationDuration = 333 // 333ms +const CIRCLE_WIDTH = 32 const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)( ({ theme, completed, selected }) => ({ @@ -24,15 +25,11 @@ const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)( display: 'flex', gap: 12, alignItems: 'center', - color: selected - ? theme.colors['action-link-active'] - : theme.colors['action-link-inactive'], + color: selected ? theme.colors.text : theme.colors['text-light'], cursor: 'pointer', - ':hover': { background: theme.colors['fill-two-hover'], }, - ':focus': { outline: `${theme.colors['border-outline-focused']} solid 1px`, }, @@ -42,8 +39,8 @@ const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)( display: 'flex', alignItems: 'center', justifyContent: 'center', - width: 32, - height: 32, + width: CIRCLE_WIDTH, + height: CIRCLE_WIDTH, borderRadius: '100%', background: theme.colors['fill-three'], ...theme.partials.text.body2, @@ -76,9 +73,9 @@ const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)( border: '1px solid transparent', ...(selected && { - borderTopColor: theme.colors['action-link-active'], - borderRightColor: theme.colors['action-link-active'], - borderBottomColor: theme.colors['action-link-active'], + borderTopColor: theme.colors['border-selected'], + borderRightColor: theme.colors['border-selected'], + borderBottomColor: theme.colors['border-selected'], transition: ` border-top-color 0.1s linear, @@ -91,7 +88,7 @@ const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)( border: '0 solid transparent', ...(selected && { - borderTop: `1px solid ${theme.colors['action-link-active']}`, + borderTop: `1px solid ${theme.colors['border-selected']}`, borderLeftWidth: '1px', borderRightWidth: '1px', transform: 'rotate(270deg)', @@ -110,15 +107,15 @@ const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)( '.itemContainer': { padding: `0 ${theme.spacing.large}px`, display: 'flex', - gap: 28, + gap: theme.spacing.small, color: theme.colors['text-light'], - '.itemLine': { - width: 1, - background: theme.colors['action-link-active'], - marginLeft: 16, + position: 'relative', + flexShrink: 0, + width: CIRCLE_WIDTH, + transform: 'translate(50%)', + borderLeft: theme.borders.selected, }, - '.itemContent': { padding: `${theme.spacing.xsmall}px 0`, }, diff --git a/src/components/Sidecar.tsx b/src/components/Sidecar.tsx index 2d38e88c..2cdeaea7 100644 --- a/src/components/Sidecar.tsx +++ b/src/components/Sidecar.tsx @@ -2,73 +2,70 @@ import { Button, type ButtonProps, Div, - type DivProps, type FlexProps, - H1, - type H1Props, - H2, Section, + type SectionProps, } from 'honorable' -import { type ReactNode, forwardRef } from 'react' +import { type ComponentProps, type ReactNode, forwardRef } from 'react' +import styled from 'styled-components' export type SidecarProps = { heading?: ReactNode - headingProps?: H1Props - contentProps?: DivProps -} & FlexProps + headingProps?: ComponentProps + contentProps?: ComponentProps +} -const Sidecar = forwardRef( +const SidecarSC = styled(Section)(({ theme }) => ({ + border: theme.borders.default, + borderRadius: theme.borderRadiuses.medium, + padding: theme.spacing.medium, +})) +const SidecarHeadingSC = styled.h1(({ theme }) => ({ + ...theme.partials.text.overline, + color: theme.colors['text-xlight'], + marginBottom: theme.spacing.medium, +})) + +const Sidecar = forwardRef( ({ heading, headingProps, children, ...props }, ref) => ( -
{heading && ( -

- {heading} -

+ {heading} )} {children} -
+ ) ) -const SidecarItem = forwardRef( +const ItemSC = styled(Div)(({ theme }) => ({ + marginBottom: theme.spacing.large, + '&:last-of-type': { + marginBottom: 0, + }, +})) +const ItemHeadingSC = styled.h2(({ theme }) => ({ + ...theme.partials.text.caption, + color: theme.colors['text-xlight'], + marginBottom: theme.spacing.xxsmall, +})) +const ItemContentSC = styled.div(({ theme }) => ({ + ...theme.partials.text.body2, + color: theme.colors.text, + overflowWrap: 'anywhere', +})) + +const SidecarItem = forwardRef( ({ heading, headingProps, contentProps, children, ...props }, ref) => ( -
- {heading && ( -

- {heading} -

- )} - {children && ( -
- {children} -
- )} -
+ {heading && {heading}} + {children && {children}} + ) ) diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx index f8d1aed3..1ba603de 100644 --- a/src/components/Switch.tsx +++ b/src/components/Switch.tsx @@ -48,8 +48,8 @@ const SwitchSC = styled.label( }, [SwitchHandleSC]: { backgroundColor: $checked - ? theme.colors['action-always-white'] - : theme.colors['action-link-active'], + ? theme.colors['action-link-active-hover'] + : theme.colors['action-link-inactive-hover'], }, }, }), @@ -87,9 +87,11 @@ const SwitchToggleSC = styled.div( const SwitchHandleSC = styled.div( ({ $checked, $disabled, theme }) => ({ backgroundColor: $disabled - ? theme.colors['border-disabled'] + ? $checked + ? theme.colors['action-link-active-disabled'] + : theme.colors['action-link-inactive-disabled'] : $checked - ? theme.colors['action-always-white'] + ? theme.colors['action-link-active'] : theme.colors['action-link-inactive'], position: 'absolute', width: 16, diff --git a/src/theme/borders.ts b/src/theme/borders.ts index 3b9f6f79..a76d7f73 100644 --- a/src/theme/borders.ts +++ b/src/theme/borders.ts @@ -15,9 +15,10 @@ export const borders = { default: `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars.border}`, 'fill-one': `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars.border}`, 'fill-two': `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars['border-fill-two']}`, - 'fill-three': `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars['border-input']}`, + 'fill-three': `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars['border-fill-three']}`, input: `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars['border-input']}`, 'outline-focused': `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars['border-outline-focused']}`, + selected: `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars['border-selected']}`, } as const satisfies Record export const borderRadiuses = { diff --git a/src/theme/colors-base.ts b/src/theme/colors-base.ts index 1f7c494d..40791f9c 100644 --- a/src/theme/colors-base.ts +++ b/src/theme/colors-base.ts @@ -16,6 +16,7 @@ export const grey = { 600: '#5D626F', 500: '#747B8B', 400: '#A1A5B0', + 350: '#A9AFBC', 300: '#B2B7C3', 200: '#C5C9D3', 100: '#DFE2E7', diff --git a/src/theme/colors-cloudshell-dark.ts b/src/theme/colors-cloudshell-dark.ts index af330838..a12a756a 100644 --- a/src/theme/colors-cloudshell-dark.ts +++ b/src/theme/colors-cloudshell-dark.ts @@ -9,14 +9,14 @@ export const colorsCloudShellDark = prefixKeys( [`dark-red`]: '#F2788D', [`light-red`]: '#F599A8', [`green`]: '#3CECAF', - [`dark-yellow`]: '#3CECAF', + [`dark-yellow`]: '#FFF48F', [`light-yellow`]: '#FFF9C2', [`blue`]: '#8FD6FF', [`dark-lilac`]: '#BE5EEB', [`light-lilac`]: '#D596F4', [`dark-purple`]: '#7075F5', [`light-purple`]: '#969AF8', - [`light-grey`]: '#969AF8', + [`light-grey`]: '#EBEFF0', } as const satisfies Record, 'cloud-shell-' ) diff --git a/src/theme/colors-semantic-dark.ts b/src/theme/colors-semantic-dark.ts index 947fabbe..cfe7d182 100644 --- a/src/theme/colors-semantic-dark.ts +++ b/src/theme/colors-semantic-dark.ts @@ -35,7 +35,11 @@ export const semanticColorsDark = { 'action-primary-disabled': grey[825], // link 'action-link-inactive': grey[200], + 'action-link-inactive-hover': grey[100], + 'action-link-inactive-disabled': grey[700], 'action-link-active': grey[50], + 'action-link-active-hover': grey[50], + 'action-link-active-disabled': grey[675], // link-inline 'action-link-inline': blue[200], 'action-link-inline-hover': blue[100], @@ -95,6 +99,14 @@ export const semanticColorsDark = { 'icon-danger-critical': red[400], 'icon-always-white': grey[100], + // Graph + // + 'graph-blue': blue[200], + 'graph-lilac': '#D596F4', + 'graph-green': green[200], + 'graph-purple': purple[200], + 'graph-red': red[200], + // Marketing // 'marketing-white': '#FFFFFF', diff --git a/src/theme/colors-semantic-light.ts b/src/theme/colors-semantic-light.ts index 701b780b..2cab0cf9 100644 --- a/src/theme/colors-semantic-light.ts +++ b/src/theme/colors-semantic-light.ts @@ -10,7 +10,7 @@ export const semanticColorsLight = { // Fill // // fill-zero - 'fill-zero': '#F3F5F7', + 'fill-zero': '#F3F5F6', 'fill-zero-hover': '#F5F5F5', 'fill-zero-selected': '#E5E6E7', // fill-one @@ -36,15 +36,19 @@ export const semanticColorsLight = { 'action-primary-hover': purple[350], 'action-primary-disabled': grey[100], // link - 'action-link-inactive': '#A9AFBC', - 'action-link-active': '#CDD1D2', + 'action-link-inactive': grey[300], + 'action-link-inactive-hover': grey[350], + 'action-link-inactive-disabled': grey[100], + 'action-link-active': grey[50], + 'action-link-active-hover': grey[50], + 'action-link-active-disabled': grey[200], // link-inline 'action-link-inline': '#539AC3', 'action-link-inline-hover': blue[600], 'action-link-inline-visited': purple[300], 'action-link-inline-visited-hover': purple[200], // input - 'action-input-hover': `${chroma('#C3C3C4').alpha(0.04)}`, // text color w/ alpha + 'action-input-hover': `${chroma('#C3C3C4').alpha(0.1)}`, // text color w/ alpha // always white 'action-always-white': semanticColorsDark['action-always-white'], @@ -55,7 +59,7 @@ export const semanticColorsLight = { 'border-fill-three': grey[400], 'border-selected': grey[600], 'border-input': '#C6CBD7', - 'border-disabled': grey[200], + 'border-disabled': grey[100], 'border-primary': purple[400], 'border-secondary': blue[400], 'border-info': blue[300], @@ -77,7 +81,7 @@ export const semanticColorsLight = { 'text-primary-disabled': grey[400], 'text-success': green[700], 'text-success-light': green[600], - 'text-warning': '#FADA5E', + 'text-warning': '#FF9900', 'text-warning-light': '#DCBC40', 'text-danger': '#E54064', 'text-danger-light': red[300], @@ -124,6 +128,14 @@ export const semanticColorsLight = { semanticRedLight: '#F599A8', semanticRedDark: '#E95374', + // Graph + // + 'graph-blue': blue[500], + 'graph-lilac': '#BE5EEB', + 'graph-green': green[500], + 'graph-purple': purple[350], + 'graph-red': red[400], + // Deprecated (Remove after all 'error' colors converted to 'danger' in app) // 'border-error': red[300],