Skip to content

Commit

Permalink
fix: Light mode colors, Sidecar text style (#560)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dogmar
dogmar authored Jan 11, 2024
1 parent cdf1717 commit e7d62b7
Show file tree
Hide file tree
Showing 9 changed files with 99 additions and 77 deletions.
2 changes: 1 addition & 1 deletion src/components/Checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ const HonorableLabelStyled = styled(Label)<{
? {
':hover': {
color: theme.colors.text,
'> span': {
'.box': {
backgroundColor: theme.colors['action-input-hover'],
},
},
Expand Down
31 changes: 14 additions & 17 deletions src/components/ChecklistItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => ({
Expand All @@ -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`,
},
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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)',
Expand All @@ -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`,
},
Expand Down
89 changes: 43 additions & 46 deletions src/components/Sidecar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<typeof ItemHeadingSC>
contentProps?: ComponentProps<typeof ItemContentSC>
}

const Sidecar = forwardRef<HTMLElement, SidecarProps>(
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<HTMLElement, SidecarProps & SectionProps>(
({ heading, headingProps, children, ...props }, ref) => (
<Section
<SidecarSC
ref={ref}
border="1px solid border"
borderRadius="medium"
padding="medium"
{...props}
>
{heading && (
<H1
overline
color="text-xlight"
marginBottom="medium"
{...headingProps}
>
{heading}
</H1>
<SidecarHeadingSC {...headingProps}>{heading}</SidecarHeadingSC>
)}
{children}
</Section>
</SidecarSC>
)
)

const SidecarItem = forwardRef<HTMLDivElement, SidecarProps>(
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<HTMLDivElement, SidecarProps & FlexProps>(
({ heading, headingProps, contentProps, children, ...props }, ref) => (
<Div
<ItemSC
ref={ref}
marginBottom="large"
_last={{ marginBottom: 0 }}
{...props}
>
{heading && (
<H2
caption
color="text-xlight"
marginBottom="xxsmall"
{...headingProps}
>
{heading}
</H2>
)}
{children && (
<Div
body
overflowWrap="anywhere"
{...contentProps}
>
{children}
</Div>
)}
</Div>
{heading && <ItemHeadingSC {...headingProps}>{heading}</ItemHeadingSC>}
{children && <ItemContentSC {...contentProps}>{children}</ItemContentSC>}
</ItemSC>
)
)

Expand Down
10 changes: 6 additions & 4 deletions src/components/Switch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ const SwitchSC = styled.label<SwitchStyleProps>(
},
[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'],
},
},
}),
Expand Down Expand Up @@ -87,9 +87,11 @@ const SwitchToggleSC = styled.div<SwitchStyleProps>(
const SwitchHandleSC = styled.div<SwitchStyleProps>(
({ $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,
Expand Down
3 changes: 2 additions & 1 deletion src/theme/borders.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, CSSProperties['border']>

export const borderRadiuses = {
Expand Down
1 change: 1 addition & 0 deletions src/theme/colors-base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const grey = {
600: '#5D626F',
500: '#747B8B',
400: '#A1A5B0',
350: '#A9AFBC',
300: '#B2B7C3',
200: '#C5C9D3',
100: '#DFE2E7',
Expand Down
4 changes: 2 additions & 2 deletions src/theme/colors-cloudshell-dark.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, CSSProperties['color']>,
'cloud-shell-'
)
12 changes: 12 additions & 0 deletions src/theme/colors-semantic-dark.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down Expand Up @@ -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',
Expand Down
24 changes: 18 additions & 6 deletions src/theme/colors-semantic-light.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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'],

Expand All @@ -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],
Expand All @@ -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],
Expand Down Expand Up @@ -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],
Expand Down

0 comments on commit e7d62b7

Please sign in to comment.