Skip to content

Commit c5aa6bc

Browse files
makoto-ogatamakoto-ogata
committed
Delete color gray5
1 parent c63c362 commit c5aa6bc

File tree

4 files changed

+122
-123
lines changed

4 files changed

+122
-123
lines changed

‎src/client/components/SidebarArticles.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ const articleSummaryStyle = css({
110110

111111
...pointerFine({
112112
"&:hover": {
113-
backgroundColor: Colors.gray5,
113+
backgroundColor: Colors.gray10,
114114
cursor: "pointer",
115115
textDecoration: "none",
116116
},
@@ -145,7 +145,7 @@ const articlesListItemStyle = css({
145145

146146
...pointerFine({
147147
"&:hover": {
148-
backgroundColor: Colors.gray5,
148+
backgroundColor: Colors.gray10,
149149
textDecoration: "none",
150150
},
151151
}),

‎src/client/components/SidebarContents.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -654,7 +654,7 @@ const articlesListItemStyle = css({
654654

655655
...pointerFine({
656656
"&:hover": {
657-
backgroundColor: Colors.gray5,
657+
backgroundColor: Colors.gray10,
658658
textDecoration: "none",
659659
},
660660
}),

‎src/client/lib/variables.ts‎

Lines changed: 118 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,134 @@
11
const spaceBaseSize = 8;
22

33
export const getSpace = (size: number) => {
4-
return spaceBaseSize * size;
4+
return spaceBaseSize * size;
55
};
66

77
export const Colors = {
8-
// question format
9-
formatDiscussion: "#4097DB", //blue60
10-
formatNotSet: "#bcbdbd", //gray40
11-
formatQuestion: "#f7a535", //yellow60
12-
formatDiscussionText: "#fff", //gray10
13-
formatNotSetText: "rgba(0, 0, 0, 0.87)", //highEmphasis
14-
formatQuestionText: "rgba(0, 0, 0, 0.87)", //highEmphasis
15-
16-
// subscribe action
17-
subscribeQuestion: "#5D707C",
18-
19-
// Gray
20-
gray0: "var(--color-gray0)",
21-
gray5: "var(--color-gray5)",
22-
gray10: "var(--color-gray10)",
23-
gray20: "var(--color-gray20)",
24-
gray30: "var(--color-gray30)",
25-
gray40: "var(--color-gray40)",
26-
gray50: "var(--color-gray50)",
27-
gray60: "var(--color-gray60)",
28-
gray70: "var(--color-gray70)",
29-
gray80: "var(--color-gray80)",
30-
gray90: "var(--color-gray90)",
31-
gray100: "var(--color-gray100)",
32-
gray110: "var(--color-gray110)",
33-
34-
// Green
35-
green10: "var(--color-green10)",
36-
green20: "var(--color-green20)",
37-
green30: "var(--color-green30)",
38-
green40: "var(--color-green40)",
39-
green50: "var(--color-green50)",
40-
green60: "var(--color-green60)",
41-
green70: "var(--color-green70)",
42-
green80: "var(--color-green80)",
43-
green90: "var(--color-green90)",
44-
green100: "var(--color-green100)",
45-
green110: "var(--color-green110)",
46-
47-
// Yellow
48-
yellow10: "var(--color-yellow10)",
49-
yellow20: "var(--color-yellow20)",
50-
yellow30: "var(--color-yellow30)",
51-
yellow40: "var(--color-yellow40)",
52-
yellow50: "var(--color-yellow50)",
53-
yellow60: "var(--color-yellow60)",
54-
yellow70: "var(--color-yellow70)",
55-
yellow80: "var(--color-yellow80)",
56-
yellow90: "var(--color-yellow90)",
57-
yellow100: "var(--color-yellow100)",
58-
yellow110: "var(--color-yellow110)",
59-
60-
// Red
61-
red10: "var(--color-red10)",
62-
red20: "var(--color-red20)",
63-
red30: "var(--color-red30)",
64-
red40: "var(--color-red40)",
65-
red50: "var(--color-red50)",
66-
red60: "var(--color-red60)",
67-
red70: "var(--color-red70)",
68-
red80: "var(--color-red80)",
69-
red90: "var(--color-red90)",
70-
red100: "var(--color-red100)",
71-
red110: "var(--color-red110)",
72-
73-
// Blue
74-
blue10: "var(--color-blue10)",
75-
blue20: "var(--color-blue20)",
76-
blue30: "var(--color-blue30)",
77-
blue40: "var(--color-blue40)",
78-
blue50: "var(--color-blue50)",
79-
blue60: "var(--color-blue60)",
80-
blue70: "var(--color-blue70)",
81-
blue80: "var(--color-blue80)",
82-
blue90: "var(--color-blue90)",
83-
blue100: "var(--color-blue100)",
84-
blue110: "var(--color-blue110)",
85-
86-
// Base color
87-
background: "var(--color-background)",
88-
surface: "var(--color-surface)",
89-
surfaceVariant: "var(--color-surface-variant)",
90-
91-
// Divider
92-
divider: "var(--color-divider)",
93-
/** @deprecated use divider instead */
94-
onBackground: "rgba(255, 255, 255, 0.2)",
95-
/** @deprecated use divider instead */
96-
onSurface: "rgba(0, 0, 0, 0.12)",
97-
98-
// Text
99-
disabled: "var(--color-text-disabled)",
100-
mediumEmphasis: "var(--color-text-medium-emphasis)",
101-
highEmphasis: "var(--color-text-high-emphasis)",
102-
103-
// Scrim
104-
scrim: "var(--color-scrim)",
105-
/** @deprecated use scrim instead */
106-
scrimOnSurface: "rgba(0, 0, 0, 0.32)",
107-
108-
// Brand
109-
twitter: "#1d9Bf0",
110-
facebook: "#1877f2",
8+
// question format
9+
formatDiscussion: "#4097DB", //blue60
10+
formatNotSet: "#bcbdbd", //gray40
11+
formatQuestion: "#f7a535", //yellow60
12+
formatDiscussionText: "#fff", //gray10
13+
formatNotSetText: "rgba(0, 0, 0, 0.87)", //highEmphasis
14+
formatQuestionText: "rgba(0, 0, 0, 0.87)", //highEmphasis
15+
16+
// subscribe action
17+
subscribeQuestion: "#5D707C",
18+
19+
// Gray
20+
gray0: "var(--color-gray0)",
21+
gray10: "var(--color-gray10)",
22+
gray20: "var(--color-gray20)",
23+
gray30: "var(--color-gray30)",
24+
gray40: "var(--color-gray40)",
25+
gray50: "var(--color-gray50)",
26+
gray60: "var(--color-gray60)",
27+
gray70: "var(--color-gray70)",
28+
gray80: "var(--color-gray80)",
29+
gray90: "var(--color-gray90)",
30+
gray100: "var(--color-gray100)",
31+
gray110: "var(--color-gray110)",
32+
33+
// Green
34+
green10: "var(--color-green10)",
35+
green20: "var(--color-green20)",
36+
green30: "var(--color-green30)",
37+
green40: "var(--color-green40)",
38+
green50: "var(--color-green50)",
39+
green60: "var(--color-green60)",
40+
green70: "var(--color-green70)",
41+
green80: "var(--color-green80)",
42+
green90: "var(--color-green90)",
43+
green100: "var(--color-green100)",
44+
green110: "var(--color-green110)",
45+
46+
// Yellow
47+
yellow10: "var(--color-yellow10)",
48+
yellow20: "var(--color-yellow20)",
49+
yellow30: "var(--color-yellow30)",
50+
yellow40: "var(--color-yellow40)",
51+
yellow50: "var(--color-yellow50)",
52+
yellow60: "var(--color-yellow60)",
53+
yellow70: "var(--color-yellow70)",
54+
yellow80: "var(--color-yellow80)",
55+
yellow90: "var(--color-yellow90)",
56+
yellow100: "var(--color-yellow100)",
57+
yellow110: "var(--color-yellow110)",
58+
59+
// Red
60+
red10: "var(--color-red10)",
61+
red20: "var(--color-red20)",
62+
red30: "var(--color-red30)",
63+
red40: "var(--color-red40)",
64+
red50: "var(--color-red50)",
65+
red60: "var(--color-red60)",
66+
red70: "var(--color-red70)",
67+
red80: "var(--color-red80)",
68+
red90: "var(--color-red90)",
69+
red100: "var(--color-red100)",
70+
red110: "var(--color-red110)",
71+
72+
// Blue
73+
blue10: "var(--color-blue10)",
74+
blue20: "var(--color-blue20)",
75+
blue30: "var(--color-blue30)",
76+
blue40: "var(--color-blue40)",
77+
blue50: "var(--color-blue50)",
78+
blue60: "var(--color-blue60)",
79+
blue70: "var(--color-blue70)",
80+
blue80: "var(--color-blue80)",
81+
blue90: "var(--color-blue90)",
82+
blue100: "var(--color-blue100)",
83+
blue110: "var(--color-blue110)",
84+
85+
// Base color
86+
background: "var(--color-background)",
87+
surface: "var(--color-surface)",
88+
surfaceVariant: "var(--color-surface-variant)",
89+
90+
// Divider
91+
divider: "var(--color-divider)",
92+
/** @deprecated use divider instead */
93+
onBackground: "rgba(255, 255, 255, 0.2)",
94+
/** @deprecated use divider instead */
95+
onSurface: "rgba(0, 0, 0, 0.12)",
96+
97+
// Text
98+
disabled: "var(--color-text-disabled)",
99+
mediumEmphasis: "var(--color-text-medium-emphasis)",
100+
highEmphasis: "var(--color-text-high-emphasis)",
101+
102+
// Scrim
103+
scrim: "var(--color-scrim)",
104+
/** @deprecated use scrim instead */
105+
scrimOnSurface: "rgba(0, 0, 0, 0.32)",
106+
107+
// Brand
108+
twitter: "#1d9Bf0",
109+
facebook: "#1877f2",
111110
} as const;
112111

113112
export const Typography = {
114-
headline1: "var(--font-size-headline-1)",
115-
headline2: "var(--font-size-headline-2)",
116-
subhead1: "var(--font-size-subhead-1)",
117-
subhead2: "var(--font-size-subhead-2)",
118-
body1: "var(--font-size-body-1)",
119-
body2: "var(--font-size-body-2)",
120-
body3: "var(--font-size-body-3)",
121-
overline: 10,
113+
headline1: "var(--font-size-headline-1)",
114+
headline2: "var(--font-size-headline-2)",
115+
subhead1: "var(--font-size-subhead-1)",
116+
subhead2: "var(--font-size-subhead-2)",
117+
body1: "var(--font-size-body-1)",
118+
body2: "var(--font-size-body-2)",
119+
body3: "var(--font-size-body-3)",
120+
overline: 10,
122121
} as const;
123122

124123
export const LineHeight = {
125-
headline: "var(--line-height-headline)",
126-
subhead: "var(--line-height-subhead)",
127-
subheadDense: "var(--line-height-subhead-dense)",
128-
body: "var(--line-height-body)",
129-
bodyDense: "var(--line-height-body-dense)",
124+
headline: "var(--line-height-headline)",
125+
subhead: "var(--line-height-subhead)",
126+
subheadDense: "var(--line-height-subhead-dense)",
127+
body: "var(--line-height-body)",
128+
bodyDense: "var(--line-height-body-dense)",
130129
} as const;
131130

132131
export const Weight = {
133-
normal: 400,
134-
bold: 600,
132+
normal: 400,
133+
bold: 600,
135134
} as const;

‎src/client/templates/Main.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const Main = ({ children }: Props) => {
1212
};
1313

1414
const mainStyle = css({
15-
backgroundColor: Colors.gray5,
15+
backgroundColor: Colors.gray10,
1616
display: "grid",
1717
gridTemplateAreas: `
1818
"sidebar contents"

0 commit comments

Comments
 (0)