Skip to content

Commit e7d62b7

Browse files
dogmardogmar
authored
fix: Light mode colors, Sidecar text style (#560)
1 parent cdf1717 commit e7d62b7

9 files changed

+99
-77
lines changed

‎src/components/Checkbox.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ const HonorableLabelStyled = styled(Label)<{
116116
? {
117117
':hover': {
118118
color: theme.colors.text,
119-
'> span': {
119+
'.box': {
120120
backgroundColor: theme.colors['action-input-hover'],
121121
},
122122
},

‎src/components/ChecklistItem.tsx

+14-17
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import CaretDownIcon from './icons/CaretDownIcon'
1313
import SuccessIcon from './icons/SuccessIcon'
1414

1515
const heightAnimationDuration = 333 // 333ms
16+
const CIRCLE_WIDTH = 32
1617

1718
const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)(
1819
({ theme, completed, selected }) => ({
@@ -24,15 +25,11 @@ const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)(
2425
display: 'flex',
2526
gap: 12,
2627
alignItems: 'center',
27-
color: selected
28-
? theme.colors['action-link-active']
29-
: theme.colors['action-link-inactive'],
28+
color: selected ? theme.colors.text : theme.colors['text-light'],
3029
cursor: 'pointer',
31-
3230
':hover': {
3331
background: theme.colors['fill-two-hover'],
3432
},
35-
3633
':focus': {
3734
outline: `${theme.colors['border-outline-focused']} solid 1px`,
3835
},
@@ -42,8 +39,8 @@ const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)(
4239
display: 'flex',
4340
alignItems: 'center',
4441
justifyContent: 'center',
45-
width: 32,
46-
height: 32,
42+
width: CIRCLE_WIDTH,
43+
height: CIRCLE_WIDTH,
4744
borderRadius: '100%',
4845
background: theme.colors['fill-three'],
4946
...theme.partials.text.body2,
@@ -76,9 +73,9 @@ const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)(
7673
border: '1px solid transparent',
7774

7875
...(selected && {
79-
borderTopColor: theme.colors['action-link-active'],
80-
borderRightColor: theme.colors['action-link-active'],
81-
borderBottomColor: theme.colors['action-link-active'],
76+
borderTopColor: theme.colors['border-selected'],
77+
borderRightColor: theme.colors['border-selected'],
78+
borderBottomColor: theme.colors['border-selected'],
8279

8380
transition: `
8481
border-top-color 0.1s linear,
@@ -91,7 +88,7 @@ const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)(
9188
border: '0 solid transparent',
9289

9390
...(selected && {
94-
borderTop: `1px solid ${theme.colors['action-link-active']}`,
91+
borderTop: `1px solid ${theme.colors['border-selected']}`,
9592
borderLeftWidth: '1px',
9693
borderRightWidth: '1px',
9794
transform: 'rotate(270deg)',
@@ -110,15 +107,15 @@ const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)(
110107
'.itemContainer': {
111108
padding: `0 ${theme.spacing.large}px`,
112109
display: 'flex',
113-
gap: 28,
110+
gap: theme.spacing.small,
114111
color: theme.colors['text-light'],
115-
116112
'.itemLine': {
117-
width: 1,
118-
background: theme.colors['action-link-active'],
119-
marginLeft: 16,
113+
position: 'relative',
114+
flexShrink: 0,
115+
width: CIRCLE_WIDTH,
116+
transform: 'translate(50%)',
117+
borderLeft: theme.borders.selected,
120118
},
121-
122119
'.itemContent': {
123120
padding: `${theme.spacing.xsmall}px 0`,
124121
},

‎src/components/Sidecar.tsx

+43-46
Original file line numberDiff line numberDiff line change
@@ -2,73 +2,70 @@ import {
22
Button,
33
type ButtonProps,
44
Div,
5-
type DivProps,
65
type FlexProps,
7-
H1,
8-
type H1Props,
9-
H2,
106
Section,
7+
type SectionProps,
118
} from 'honorable'
12-
import { type ReactNode, forwardRef } from 'react'
9+
import { type ComponentProps, type ReactNode, forwardRef } from 'react'
10+
import styled from 'styled-components'
1311

1412
export type SidecarProps = {
1513
heading?: ReactNode
16-
headingProps?: H1Props
17-
contentProps?: DivProps
18-
} & FlexProps
14+
headingProps?: ComponentProps<typeof ItemHeadingSC>
15+
contentProps?: ComponentProps<typeof ItemContentSC>
16+
}
1917

20-
const Sidecar = forwardRef<HTMLElement, SidecarProps>(
18+
const SidecarSC = styled(Section)(({ theme }) => ({
19+
border: theme.borders.default,
20+
borderRadius: theme.borderRadiuses.medium,
21+
padding: theme.spacing.medium,
22+
}))
23+
const SidecarHeadingSC = styled.h1(({ theme }) => ({
24+
...theme.partials.text.overline,
25+
color: theme.colors['text-xlight'],
26+
marginBottom: theme.spacing.medium,
27+
}))
28+
29+
const Sidecar = forwardRef<HTMLElement, SidecarProps & SectionProps>(
2130
({ heading, headingProps, children, ...props }, ref) => (
22-
<Section
31+
<SidecarSC
2332
ref={ref}
24-
border="1px solid border"
25-
borderRadius="medium"
26-
padding="medium"
2733
{...props}
2834
>
2935
{heading && (
30-
<H1
31-
overline
32-
color="text-xlight"
33-
marginBottom="medium"
34-
{...headingProps}
35-
>
36-
{heading}
37-
</H1>
36+
<SidecarHeadingSC {...headingProps}>{heading}</SidecarHeadingSC>
3837
)}
3938
{children}
40-
</Section>
39+
</SidecarSC>
4140
)
4241
)
4342

44-
const SidecarItem = forwardRef<HTMLDivElement, SidecarProps>(
43+
const ItemSC = styled(Div)(({ theme }) => ({
44+
marginBottom: theme.spacing.large,
45+
'&:last-of-type': {
46+
marginBottom: 0,
47+
},
48+
}))
49+
const ItemHeadingSC = styled.h2(({ theme }) => ({
50+
...theme.partials.text.caption,
51+
color: theme.colors['text-xlight'],
52+
marginBottom: theme.spacing.xxsmall,
53+
}))
54+
const ItemContentSC = styled.div(({ theme }) => ({
55+
...theme.partials.text.body2,
56+
color: theme.colors.text,
57+
overflowWrap: 'anywhere',
58+
}))
59+
60+
const SidecarItem = forwardRef<HTMLDivElement, SidecarProps & FlexProps>(
4561
({ heading, headingProps, contentProps, children, ...props }, ref) => (
46-
<Div
62+
<ItemSC
4763
ref={ref}
48-
marginBottom="large"
49-
_last={{ marginBottom: 0 }}
5064
{...props}
5165
>
52-
{heading && (
53-
<H2
54-
caption
55-
color="text-xlight"
56-
marginBottom="xxsmall"
57-
{...headingProps}
58-
>
59-
{heading}
60-
</H2>
61-
)}
62-
{children && (
63-
<Div
64-
body
65-
overflowWrap="anywhere"
66-
{...contentProps}
67-
>
68-
{children}
69-
</Div>
70-
)}
71-
</Div>
66+
{heading && <ItemHeadingSC {...headingProps}>{heading}</ItemHeadingSC>}
67+
{children && <ItemContentSC {...contentProps}>{children}</ItemContentSC>}
68+
</ItemSC>
7269
)
7370
)
7471

‎src/components/Switch.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ const SwitchSC = styled.label<SwitchStyleProps>(
4848
},
4949
[SwitchHandleSC]: {
5050
backgroundColor: $checked
51-
? theme.colors['action-always-white']
52-
: theme.colors['action-link-active'],
51+
? theme.colors['action-link-active-hover']
52+
: theme.colors['action-link-inactive-hover'],
5353
},
5454
},
5555
}),
@@ -87,9 +87,11 @@ const SwitchToggleSC = styled.div<SwitchStyleProps>(
8787
const SwitchHandleSC = styled.div<SwitchStyleProps>(
8888
({ $checked, $disabled, theme }) => ({
8989
backgroundColor: $disabled
90-
? theme.colors['border-disabled']
90+
? $checked
91+
? theme.colors['action-link-active-disabled']
92+
: theme.colors['action-link-inactive-disabled']
9193
: $checked
92-
? theme.colors['action-always-white']
94+
? theme.colors['action-link-active']
9395
: theme.colors['action-link-inactive'],
9496
position: 'absolute',
9597
width: 16,

‎src/theme/borders.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@ export const borders = {
1515
default: `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars.border}`,
1616
'fill-one': `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars.border}`,
1717
'fill-two': `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars['border-fill-two']}`,
18-
'fill-three': `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars['border-input']}`,
18+
'fill-three': `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars['border-fill-three']}`,
1919
input: `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars['border-input']}`,
2020
'outline-focused': `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars['border-outline-focused']}`,
21+
selected: `${borderWidths.default}px ${borderStyles.default} ${semanticColorCssVars['border-selected']}`,
2122
} as const satisfies Record<string, CSSProperties['border']>
2223

2324
export const borderRadiuses = {

‎src/theme/colors-base.ts

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const grey = {
1616
600: '#5D626F',
1717
500: '#747B8B',
1818
400: '#A1A5B0',
19+
350: '#A9AFBC',
1920
300: '#B2B7C3',
2021
200: '#C5C9D3',
2122
100: '#DFE2E7',

‎src/theme/colors-cloudshell-dark.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ export const colorsCloudShellDark = prefixKeys(
99
[`dark-red`]: '#F2788D',
1010
[`light-red`]: '#F599A8',
1111
[`green`]: '#3CECAF',
12-
[`dark-yellow`]: '#3CECAF',
12+
[`dark-yellow`]: '#FFF48F',
1313
[`light-yellow`]: '#FFF9C2',
1414
[`blue`]: '#8FD6FF',
1515
[`dark-lilac`]: '#BE5EEB',
1616
[`light-lilac`]: '#D596F4',
1717
[`dark-purple`]: '#7075F5',
1818
[`light-purple`]: '#969AF8',
19-
[`light-grey`]: '#969AF8',
19+
[`light-grey`]: '#EBEFF0',
2020
} as const satisfies Record<string, CSSProperties['color']>,
2121
'cloud-shell-'
2222
)

‎src/theme/colors-semantic-dark.ts

+12
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,11 @@ export const semanticColorsDark = {
3535
'action-primary-disabled': grey[825],
3636
// link
3737
'action-link-inactive': grey[200],
38+
'action-link-inactive-hover': grey[100],
39+
'action-link-inactive-disabled': grey[700],
3840
'action-link-active': grey[50],
41+
'action-link-active-hover': grey[50],
42+
'action-link-active-disabled': grey[675],
3943
// link-inline
4044
'action-link-inline': blue[200],
4145
'action-link-inline-hover': blue[100],
@@ -95,6 +99,14 @@ export const semanticColorsDark = {
9599
'icon-danger-critical': red[400],
96100
'icon-always-white': grey[100],
97101

102+
// Graph
103+
//
104+
'graph-blue': blue[200],
105+
'graph-lilac': '#D596F4',
106+
'graph-green': green[200],
107+
'graph-purple': purple[200],
108+
'graph-red': red[200],
109+
98110
// Marketing
99111
//
100112
'marketing-white': '#FFFFFF',

‎src/theme/colors-semantic-light.ts

+18-6
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const semanticColorsLight = {
1010
// Fill
1111
//
1212
// fill-zero
13-
'fill-zero': '#F3F5F7',
13+
'fill-zero': '#F3F5F6',
1414
'fill-zero-hover': '#F5F5F5',
1515
'fill-zero-selected': '#E5E6E7',
1616
// fill-one
@@ -36,15 +36,19 @@ export const semanticColorsLight = {
3636
'action-primary-hover': purple[350],
3737
'action-primary-disabled': grey[100],
3838
// link
39-
'action-link-inactive': '#A9AFBC',
40-
'action-link-active': '#CDD1D2',
39+
'action-link-inactive': grey[300],
40+
'action-link-inactive-hover': grey[350],
41+
'action-link-inactive-disabled': grey[100],
42+
'action-link-active': grey[50],
43+
'action-link-active-hover': grey[50],
44+
'action-link-active-disabled': grey[200],
4145
// link-inline
4246
'action-link-inline': '#539AC3',
4347
'action-link-inline-hover': blue[600],
4448
'action-link-inline-visited': purple[300],
4549
'action-link-inline-visited-hover': purple[200],
4650
// input
47-
'action-input-hover': `${chroma('#C3C3C4').alpha(0.04)}`, // text color w/ alpha
51+
'action-input-hover': `${chroma('#C3C3C4').alpha(0.1)}`, // text color w/ alpha
4852
// always white
4953
'action-always-white': semanticColorsDark['action-always-white'],
5054

@@ -55,7 +59,7 @@ export const semanticColorsLight = {
5559
'border-fill-three': grey[400],
5660
'border-selected': grey[600],
5761
'border-input': '#C6CBD7',
58-
'border-disabled': grey[200],
62+
'border-disabled': grey[100],
5963
'border-primary': purple[400],
6064
'border-secondary': blue[400],
6165
'border-info': blue[300],
@@ -77,7 +81,7 @@ export const semanticColorsLight = {
7781
'text-primary-disabled': grey[400],
7882
'text-success': green[700],
7983
'text-success-light': green[600],
80-
'text-warning': '#FADA5E',
84+
'text-warning': '#FF9900',
8185
'text-warning-light': '#DCBC40',
8286
'text-danger': '#E54064',
8387
'text-danger-light': red[300],
@@ -124,6 +128,14 @@ export const semanticColorsLight = {
124128
semanticRedLight: '#F599A8',
125129
semanticRedDark: '#E95374',
126130

131+
// Graph
132+
//
133+
'graph-blue': blue[500],
134+
'graph-lilac': '#BE5EEB',
135+
'graph-green': green[500],
136+
'graph-purple': purple[350],
137+
'graph-red': red[400],
138+
127139
// Deprecated (Remove after all 'error' colors converted to 'danger' in app)
128140
//
129141
'border-error': red[300],

0 commit comments

Comments
 (0)