Skip to content

Commit 1990da5

Browse files
siddharthkpsiddharthkp
authored
Design language: Fix order of colors (codesandbox#3253)
* move grays800 to grays900 * add gray 800 * swap gray500 with gray600 - part 1 * swap gray500 with gray600 - part 2 * swap gray500 with gray600 - part 3/3
1 parent 72dbe96 commit 1990da5

File tree

5 files changed

+76
-74
lines changed

5 files changed

+76
-74
lines changed

‎packages/app/src/app/pages/Pro/elements.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { LinkButton as AppLinkButton } from 'app/components/LinkButton';
55

66
export const Page = styled.div(
77
css({
8-
backgroundColor: 'grays.800',
8+
backgroundColor: 'grays.900',
99
color: 'white',
1010

1111
// the following evil exists because we are inserting
@@ -91,11 +91,11 @@ export const Input = styled.input(
9191

9292
':hover': {
9393
backgroundColor: 'grays.700',
94-
borderColor: 'grays.600',
94+
borderColor: 'grays.500',
9595
},
9696
':focus': {
9797
outline: 'none',
98-
backgroundColor: 'grays.800',
98+
backgroundColor: 'grays.900',
9999
borderColor: 'grays.300',
100100
},
101101
})
@@ -175,11 +175,11 @@ export const CardContainer = styled.div(
175175

176176
':hover': {
177177
backgroundColor: 'grays.700',
178-
borderColor: 'grays.600',
178+
borderColor: 'grays.500',
179179
},
180180

181181
'&.StripeElement--focus': {
182-
backgroundColor: 'grays.800',
182+
backgroundColor: 'grays.900',
183183
borderColor: 'grays.300',
184184
},
185185
},
@@ -262,7 +262,7 @@ const badgeBackground = {
262262
export const Badge = styled.span<{ type: string }>(props =>
263263
css({
264264
backgroundColor: badgeBackground[props.type],
265-
color: props.type === 'pro' ? 'white' : 'grays.800',
265+
color: props.type === 'pro' ? 'white' : 'grays.900',
266266
paddingY: 1,
267267
paddingX: 2,
268268
fontWeight: 'bold',

‎packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ export const Container = styled(Element)(
2020
css({
2121
'.tippy-content': {
2222
width: '200px',
23-
backgroundColor: 'grays.500',
23+
backgroundColor: 'grays.600',
2424
border: '1px solid',
25-
borderColor: 'grays.600',
25+
borderColor: 'grays.500',
2626
padding: 4,
2727
borderRadius: 'medium',
2828
whiteSpace: 'normal',
@@ -59,10 +59,10 @@ export const Select = styled(Element).attrs({ as: 'select' })(({ theme }) =>
5959
backgroundRepeat: 'no-repeat',
6060
backgroundPosition: '96% 50%',
6161
width: '100%',
62-
backgroundColor: 'grays.800',
62+
backgroundColor: 'grays.900',
6363
color: 'white',
6464
border: '1px solid',
65-
borderColor: 'grays.600',
65+
borderColor: 'grays.500',
6666
borderRadius: 'medium',
6767
paddingX: 2,
6868
height: 24,
@@ -77,7 +77,7 @@ export const Select = styled(Element).attrs({ as: 'select' })(({ theme }) =>
7777
opacity: 0.5,
7878
cursor: 'not-allowed',
7979
':hover': {
80-
backgroundColor: 'grays.800',
80+
backgroundColor: 'grays.900',
8181
},
8282
},
8383
})

‎packages/app/src/embed/components/Actions/elements.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,15 @@ export const Button = styled.button(
3737
fontSize: 3,
3838
fontWeight: 'medium',
3939
border: '1px solid',
40-
borderColor: 'grays.500',
40+
borderColor: 'grays.600',
4141
color: 'white',
4242
backgroundColor: 'grays.700',
4343
borderRadius: 4,
4444
textDecoration: 'none',
4545
cursor: 'pointer',
4646

4747
':hover': {
48-
backgroundColor: 'grays.500',
48+
backgroundColor: 'grays.600',
4949
},
5050
})
5151
);

‎packages/common/src/design-language/colors.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ export const colors = {
55
200: '#e6e6e6',
66
300: '#999999',
77
400: '#757575',
8-
500: '#242424',
9-
600: '#343434',
8+
500: '#343434',
9+
600: '#242424',
1010
700: '#151515',
11-
800: '#040404',
11+
800: '#111111',
12+
900: '#040404',
1213
},
1314
blues: {
1415
300: '#6CC7F6', // Teal

‎packages/common/src/themes/codesandbox-black.js‎

Lines changed: 59 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ import { colors as tokens } from '../design-language/colors';
1010
*/
1111

1212
const colors = {
13-
contrastBorder: tokens.grays[500],
13+
contrastBorder: tokens.grays[600],
1414
contrastActiveBorder: null,
15-
errorForeground: tokens.reds[300],
16-
focusBorder: tokens.grays[500],
17-
foreground: tokens.grays[200],
15+
errorForeground: tokens.reds[500],
16+
focusBorder: tokens.grays[600],
17+
foreground: tokens.grays[300],
1818
activityBar: {
1919
background: tokens.grays[700],
20-
border: tokens.grays[500],
20+
border: tokens.grays[600],
2121
},
2222
activityBarBadge: {
2323
background: tokens.reds[500],
@@ -30,46 +30,46 @@ const colors = {
3030
},
3131
dropdown: {
3232
background: tokens.grays[700],
33-
border: tokens.grays[500],
33+
border: tokens.grays[600],
3434
foreground: tokens.white,
3535
},
3636
editor: {
3737
background: tokens.grays[700],
3838
foreground: tokens.grays[300],
39-
hoverHighlightBackground: tokens.grays[600],
40-
inactiveSelectionBackground: tokens.grays[600],
41-
lineHighlightBackground: tokens.grays[500],
42-
lineHighlightBorder: tokens.grays[500],
43-
rangeHighlightBackground: tokens.grays[500],
44-
selectionBackground: tokens.grays[500],
45-
selectionHighlightBackground: tokens.grays[500],
46-
wordHighlightStrongBackground: tokens.grays[500],
47-
wordHighlightBackground: tokens.grays[500],
39+
hoverHighlightBackground: tokens.grays[500],
40+
inactiveSelectionBackground: tokens.grays[500],
41+
lineHighlightBackground: tokens.grays[600],
42+
lineHighlightBorder: tokens.grays[600],
43+
rangeHighlightBackground: tokens.grays[600],
44+
selectionBackground: tokens.grays[600],
45+
selectionHighlightBackground: tokens.grays[600],
46+
wordHighlightStrongBackground: tokens.grays[600],
47+
wordHighlightBackground: tokens.grays[600],
4848
},
4949
editorBracketMatch: {
50-
background: tokens.grays[500],
51-
border: tokens.grays[500],
50+
background: tokens.grays[600],
51+
border: tokens.grays[600],
5252
},
5353
editorCodeLens: {
54-
foreground: tokens.grays[500],
54+
foreground: tokens.grays[600],
5555
},
5656
editorCursor: {
5757
background: tokens.grays[700],
5858
foreground: tokens.white,
5959
},
6060
editorError: {
61-
border: tokens.grays[500],
61+
border: tokens.grays[600],
6262
foreground: tokens.reds[500],
6363
},
6464
editorGroup: {
6565
background: tokens.grays[700],
66-
border: tokens.grays[500],
66+
border: tokens.grays[600],
6767
dropBackground: tokens.grays[700],
6868
},
6969
editorGroupHeader: {
7070
noTabsBackground: null,
7171
tabsBackground: tokens.grays[700],
72-
tabsBorder: tokens.grays[500],
72+
tabsBorder: tokens.grays[600],
7373
},
7474
editorGutter: {
7575
background: tokens.grays[700],
@@ -78,7 +78,7 @@ const colors = {
7878
},
7979
editorHoverWidget: {
8080
background: tokens.grays[700],
81-
border: tokens.grays[500],
81+
border: tokens.grays[600],
8282
},
8383
editorIndentGuide: {
8484
background: tokens.grays[700],
@@ -87,7 +87,7 @@ const colors = {
8787
activeForeground: tokens.grays[300],
8888
},
8989
editorLineNumber: {
90-
foreground: tokens.grays[500],
90+
foreground: tokens.grays[600],
9191
activeForeground: tokens.grays[400],
9292
},
9393
editorRuler: {
@@ -97,44 +97,44 @@ const colors = {
9797
background: tokens.grays[700],
9898
},
9999
editorMarkerNavigationWarning: {
100-
background: tokens.grays[500],
100+
background: tokens.grays[600],
101101
},
102102
editorMarkerNavigationError: {
103103
background: tokens.grays[700],
104104
},
105105
editorOverviewRuler: {
106-
border: tokens.grays[500],
107-
commonContentForeground: tokens.grays[500],
106+
border: tokens.grays[600],
107+
commonContentForeground: tokens.grays[600],
108108
currentContentForeground: tokens.reds[500],
109109
incomingContentForeground: tokens.green,
110110
},
111111
editorSuggestWidget: {
112112
background: tokens.grays[700],
113-
border: tokens.grays[500],
113+
border: tokens.grays[600],
114114
foreground: tokens.grays[300],
115-
selectedBackground: tokens.grays[500],
115+
selectedBackground: tokens.grays[600],
116116
},
117117
editorWarning: {
118-
border: tokens.grays[500],
118+
border: tokens.grays[600],
119119
foreground: tokens.reds[300],
120120
},
121121
editorWhitespace: {
122-
foreground: tokens.grays[600],
122+
foreground: tokens.grays[500],
123123
},
124124
editorWidget: {
125125
background: tokens.grays[700],
126-
border: tokens.grays[500],
126+
border: tokens.grays[600],
127127
},
128128
extensionButton: {
129-
prominentBackground: tokens.grays[500],
129+
prominentBackground: tokens.grays[600],
130130
prominentForeground: tokens.white,
131-
prominentHoverBackground: tokens.grays[500],
131+
prominentHoverBackground: tokens.grays[600],
132132
},
133133
input: {
134-
background: tokens.grays[500],
134+
background: tokens.grays[600],
135135
foreground: tokens.white,
136-
border: tokens.grays[800],
137-
placeholderForeground: tokens.grays[400],
136+
border: tokens.grays[900],
137+
placeholderForeground: tokens.grays[300],
138138
},
139139
inputOption: {
140140
activeBorder: tokens.blues[300],
@@ -153,11 +153,11 @@ const colors = {
153153
list: {
154154
dropBackground: tokens.grays[700],
155155
highlightForeground: tokens.blues[300],
156-
hoverBackground: tokens.grays[500],
157-
focusBackground: tokens.grays[500],
158-
activeSelectionBackground: tokens.grays[500],
156+
hoverBackground: tokens.grays[600],
157+
focusBackground: tokens.grays[600],
158+
activeSelectionBackground: tokens.grays[600],
159159
activeSelectionForeground: tokens.white,
160-
inactiveSelectionBackground: tokens.grays[500],
160+
inactiveSelectionBackground: tokens.grays[600],
161161
inactiveSelectionForeground: tokens.white,
162162
warningForeground: tokens.yellow,
163163
errorForeground: tokens.reds[500],
@@ -166,28 +166,28 @@ const colors = {
166166
},
167167
menu: {
168168
background: tokens.grays[700],
169-
selectionBackground: tokens.grays[500],
169+
selectionBackground: tokens.grays[600],
170170
},
171171
peekView: {
172-
border: tokens.grays[600],
172+
border: tokens.grays[500],
173173
},
174174
peekViewEditor: {
175-
background: tokens.grays[500],
175+
background: tokens.grays[600],
176176
matchHighlightBackground: tokens.blues[300],
177177
},
178178
peekViewEditorGutter: {
179179
background: null,
180180
},
181181
peekViewResult: {
182-
background: tokens.grays[500],
182+
background: tokens.grays[600],
183183
fileForeground: tokens.white,
184184
lineForeground: tokens.white,
185185
matchHighlightBackground: tokens.blues[300],
186-
selectionBackground: tokens.grays[500],
186+
selectionBackground: tokens.grays[600],
187187
selectionForeground: tokens.white,
188188
},
189189
peekViewTitle: {
190-
background: tokens.grays[500],
190+
background: tokens.grays[600],
191191
},
192192
peekViewTitleDescription: {
193193
foreground: tokens.blues[700],
@@ -197,7 +197,7 @@ const colors = {
197197
},
198198
scrollbarSlider: {
199199
activeBackground: tokens.white,
200-
border: tokens.grays[500],
200+
border: tokens.grays[600],
201201
background: null,
202202
hoverBackground: null,
203203
},
@@ -210,25 +210,26 @@ const colors = {
210210
},
211211
sideBar: {
212212
background: tokens.grays[700],
213-
border: tokens.grays[500],
214-
foreground: tokens.grays[200],
213+
hoverBackground: tokens.green,
214+
border: tokens.grays[600],
215+
foreground: tokens.grays[300],
215216
},
216217
sideBarSectionHeader: {
217218
background: tokens.grays[700],
218219
foreground: tokens.white,
219-
border: tokens.grays[500],
220+
border: tokens.grays[600],
220221
},
221222
sideBarTitle: {
222223
foreground: tokens.white,
223224
},
224225
statusBar: {
225-
background: tokens.grays[500],
226+
background: tokens.grays[600],
226227
foreground: tokens.white,
227228
debuggingBackground: tokens.reds[500],
228-
debuggingForeground: tokens.grays[500],
229-
noFolderBackground: tokens.grays[500],
229+
debuggingForeground: tokens.grays[600],
230+
noFolderBackground: tokens.grays[600],
230231
noFolderForeground: tokens.white,
231-
border: tokens.grays[500],
232+
border: tokens.grays[600],
232233
},
233234
statusBarItem: {
234235
activeBackground: null,
@@ -241,7 +242,7 @@ const colors = {
241242
tab: {
242243
activeBackground: tokens.grays[700],
243244
activeForeground: tokens.white,
244-
border: tokens.grays[500],
245+
border: tokens.grays[600],
245246
activeBorder: tokens.blues[300],
246247
unfocusedActiveBorder: null,
247248
inactiveBackground: tokens.grays[700],
@@ -250,13 +251,13 @@ const colors = {
250251
unfocusedInactiveForeground: tokens.grays[400],
251252
},
252253
terminal: {
253-
background: tokens.grays[800],
254+
background: tokens.grays[900],
254255
foreground: tokens.white,
255256
ansiBrightBlack: tokens.blues[700],
256257
ansiBrightRed: tokens.reds[500],
257258
ansiBrightGreen: tokens.green,
258259
ansiBrightYellow: tokens.yellow,
259-
ansiBlack: tokens.grays[500],
260+
ansiBlack: tokens.grays[600],
260261
ansiRed: tokens.reds[500],
261262
ansiGreen: tokens.green,
262263
ansiYellow: tokens.yellow,
@@ -269,7 +270,7 @@ const colors = {
269270
background: tokens.grays[700],
270271
activeBackground: tokens.grays[700],
271272
activeForeground: tokens.white,
272-
border: tokens.grays[500],
273+
border: tokens.grays[600],
273274
inactiveBackground: tokens.grays[700],
274275
inactiveForeground: tokens.grays[300],
275276
},

0 commit comments

Comments
 (0)