Skip to content

Commit 148cb4d

Browse files
BrianAABrianAA
authored
feat: Adding new spark color tokens and opinions theme (#665)
* feat:added spark color and opinion theme * formatting changes * bumped asset package and added postpulse to logo list * formatting * added the seven logos to logo list * added seven logo to logo list * updated name of the seven on logo list
1 parent d16ccd2 commit 148cb4d

File tree

8 files changed

+742
-501
lines changed

8 files changed

+742
-501
lines changed

‎build.washingtonpost.com/components/Markdown/Examples/ColorSamples.jsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@ import { useTheme } from "next-themes";
88
const xMapping = [0, 20, 40, 60, 80, 100, 200, 300, 400, 500, 600, 700];
99
const yMapping = [
1010
"red",
11-
"blue",
12-
"green",
11+
"spark",
1312
"orange",
14-
"teal",
15-
"gold",
1613
"mustard",
14+
"gold",
15+
"yellow",
16+
"green",
17+
"teal",
18+
"blue",
1719
"purple",
1820
"pink",
19-
"yellow",
2021
"gray",
2122
];
2223

‎build.washingtonpost.com/components/Markdown/Examples/LogoSamples.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ export const logoList = [
3838
"helpdesk-bw",
3939
"helpdesk-primary",
4040
"helpdesk-secondary",
41+
"postpulse",
42+
"the7-black",
43+
"the7-blue",
44+
"the7",
4145
];
4246

4347
export const darkLogos = [

‎build.washingtonpost.com/components/Markdown/Examples/ThemeTokens.jsx

+53-13
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const Label = styled("div", {
2222
export default function ThemeAndSemantic() {
2323
return (
2424
<Layout>
25-
<Box>
25+
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
2626
<Label css={{ color: theme.colors.onBackground }}>
2727
Primary (-hover)
2828
</Label>
@@ -48,8 +48,10 @@ export default function ThemeAndSemantic() {
4848
</Label>
4949
</Container>
5050
</Box>
51-
<Box>
52-
<Label css={{ color: theme.colors.onBackground }}>Secondary</Label>
51+
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
52+
<Label css={{ color: theme.colors.onBackground }}>
53+
Secondary (-hover)
54+
</Label>
5355
<Container
5456
css={{
5557
border: `1px solid ${theme.colors.outline}`,
@@ -73,7 +75,7 @@ export default function ThemeAndSemantic() {
7375
</Container>
7476
</Box>
7577
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
76-
<Label css={{ color: theme.colors.onBackground }}>Cta</Label>
78+
<Label css={{ color: theme.colors.onBackground }}>Cta (-hover)</Label>
7779
<Container
7880
css={{
7981
height: "100%",
@@ -91,7 +93,7 @@ export default function ThemeAndSemantic() {
9193
</Label>
9294
</Container>
9395
</Box>
94-
<Box>
96+
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
9597
<Label css={{ color: theme.colors.onBackground }}>ctaContainer</Label>
9698
<Container
9799
css={{
@@ -113,7 +115,45 @@ export default function ThemeAndSemantic() {
113115
</Label>
114116
</Container>
115117
</Box>
116-
<Box>
118+
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
119+
<Label css={{ color: theme.colors.onBackground }}>
120+
Opinions (-hover)
121+
</Label>
122+
<Container
123+
css={{
124+
border: `1px solid ${theme.colors.outline}`,
125+
background: theme.colors.opinions,
126+
transition: "background .15s",
127+
"&:hover": {
128+
background: theme.colors["opinions-hover"],
129+
},
130+
}}
131+
>
132+
<Label css={{ color: theme.colors.onOpinions }}>onOpinons</Label>
133+
<Label css={{ color: theme.colors["onOpinions-hover"] }}>
134+
onOpinons-hover
135+
</Label>
136+
</Container>
137+
</Box>
138+
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
139+
<Label css={{ color: theme.colors.onBackground }}>
140+
opinionsContainer
141+
</Label>
142+
<Container
143+
css={{
144+
border: `1px solid ${theme.colors.opinions}`,
145+
background: theme.colors.opinionsContainer,
146+
}}
147+
>
148+
<Label css={{ color: theme.colors.onOpinionsContainer }}>
149+
onOpinionsContainer
150+
</Label>
151+
<Label css={{ color: theme.colors["onOpinionsContainer-hover"] }}>
152+
onOpinons-hover
153+
</Label>
154+
</Container>
155+
</Box>
156+
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
117157
<Label css={{ color: theme.colors.onBackground }}>Background</Label>
118158
<Container
119159
css={{
@@ -133,7 +173,7 @@ export default function ThemeAndSemantic() {
133173
</Label>
134174
</Container>
135175
</Box>
136-
<Box>
176+
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
137177
<Label css={{ color: theme.colors.onBackground }}>
138178
Background-forSurfaces
139179
</Label>
@@ -155,7 +195,7 @@ export default function ThemeAndSemantic() {
155195
</Label>
156196
</Container>
157197
</Box>
158-
<Box>
198+
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
159199
<Label css={{ color: theme.colors.onBackground }}>Surface</Label>
160200
<Container
161201
css={{
@@ -171,7 +211,7 @@ export default function ThemeAndSemantic() {
171211
</Label>
172212
</Container>
173213
</Box>
174-
<Box>
214+
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
175215
<Label css={{ color: theme.colors.onBackground }}>
176216
Surface-highest
177217
</Label>
@@ -210,7 +250,7 @@ export default function ThemeAndSemantic() {
210250
</Label>
211251
</Container>
212252
</Box>
213-
<Box>
253+
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
214254
<Label css={{ color: theme.colors.onBackground }}>errorContainer</Label>
215255
<Container
216256
css={{
@@ -236,7 +276,7 @@ export default function ThemeAndSemantic() {
236276
</Label>
237277
</Container>
238278
</Box>
239-
<Box>
279+
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
240280
<Label css={{ color: theme.colors.onBackground }}>
241281
successContainer
242282
</Label>
@@ -264,7 +304,7 @@ export default function ThemeAndSemantic() {
264304
</Label>
265305
</Container>
266306
</Box>
267-
<Box>
307+
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
268308
<Label css={{ color: theme.colors.onBackground }}>
269309
warningContainer
270310
</Label>
@@ -292,7 +332,7 @@ export default function ThemeAndSemantic() {
292332
</Label>
293333
</Container>
294334
</Box>
295-
<Box>
335+
<Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
296336
<Label css={{ color: theme.colors.onBackground }}>
297337
signalContainer
298338
</Label>

‎build.washingtonpost.com/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"@washingtonpost/site-favicons": "0.3.4-alpha.1",
2727
"@washingtonpost/site-footer": "0.25.3-alpha.1",
2828
"@washingtonpost/tachyons-css": "^1.8.0",
29-
"@washingtonpost/wpds-assets": "^2.5.0",
29+
"@washingtonpost/wpds-assets": "^2.6.0",
3030
"@washingtonpost/wpds-kitchen-sink": "2.7.0",
3131
"@washingtonpost/wpds-tailwind-theme": "2.7.0",
3232
"@washingtonpost/wpds-tokens": "2.7.0",

‎package-lock.json

+28-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/kit/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
"@react-types/combobox": "^3.11.1",
5959
"@react-types/shared": "^3.23.1",
6060
"@stitches/react": "1.3.1-1",
61-
"@washingtonpost/wpds-assets": "^2.5.0",
61+
"@washingtonpost/wpds-assets": "^2.6.0",
6262
"match-sorter": "6.3.1",
6363
"nanoid": "^3.3.4",
6464
"popper-max-size-modifier": "^0.2.0",

0 commit comments

Comments
 (0)