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
washingtonpost · Sep 20, 2024 · 148cb4d · 148cb4d
1 parent d16ccd2
commit 148cb4d
Show file tree

Hide file tree

Showing 8 changed files with 742 additions and 501 deletions.
diff --git a/build.washingtonpost.com/components/Markdown/Examples/ColorSamples.jsx b/build.washingtonpost.com/components/Markdown/Examples/ColorSamples.jsx
@@ -8,15 +8,16 @@ import { useTheme } from "next-themes";
 const xMapping = [0, 20, 40, 60, 80, 100, 200, 300, 400, 500, 600, 700];
 const yMapping = [
   "red",
-  "blue",
-  "green",
+  "spark",
   "orange",
-  "teal",
-  "gold",
   "mustard",
+  "gold",
+  "yellow",
+  "green",
+  "teal",
+  "blue",
   "purple",
   "pink",
-  "yellow",
   "gray",
 ];
 

diff --git a/build.washingtonpost.com/components/Markdown/Examples/LogoSamples.jsx b/build.washingtonpost.com/components/Markdown/Examples/LogoSamples.jsx
@@ -38,6 +38,10 @@ export const logoList = [
   "helpdesk-bw",
   "helpdesk-primary",
   "helpdesk-secondary",
+  "postpulse",
+  "the7-black",
+  "the7-blue",
+  "the7",
 ];
 
 export const darkLogos = [

diff --git a/build.washingtonpost.com/components/Markdown/Examples/ThemeTokens.jsx b/build.washingtonpost.com/components/Markdown/Examples/ThemeTokens.jsx
@@ -22,7 +22,7 @@ const Label = styled("div", {
 export default function ThemeAndSemantic() {
   return (
     <Layout>
-      <Box>
+      <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
         <Label css={{ color: theme.colors.onBackground }}>
           Primary (-hover)
         </Label>
@@ -48,8 +48,10 @@ export default function ThemeAndSemantic() {
           </Label>
         </Container>
       </Box>
-      <Box>
-        <Label css={{ color: theme.colors.onBackground }}>Secondary</Label>
+      <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        <Label css={{ color: theme.colors.onBackground }}>
+          Secondary (-hover)
+        </Label>
         <Container
           css={{
             border: `1px solid ${theme.colors.outline}`,
@@ -73,7 +75,7 @@ export default function ThemeAndSemantic() {
         </Container>
       </Box>
       <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
-        <Label css={{ color: theme.colors.onBackground }}>Cta</Label>
+        <Label css={{ color: theme.colors.onBackground }}>Cta (-hover)</Label>
         <Container
           css={{
             height: "100%",
@@ -91,7 +93,7 @@ export default function ThemeAndSemantic() {
           </Label>
         </Container>
       </Box>
-      <Box>
+      <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
         <Label css={{ color: theme.colors.onBackground }}>ctaContainer</Label>
         <Container
           css={{
@@ -113,7 +115,45 @@ export default function ThemeAndSemantic() {
           </Label>
         </Container>
       </Box>
-      <Box>
+      <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        <Label css={{ color: theme.colors.onBackground }}>
+          Opinions (-hover)
+        </Label>
+        <Container
+          css={{
+            border: `1px solid ${theme.colors.outline}`,
+            background: theme.colors.opinions,
+            transition: "background .15s",
+            "&:hover": {
+              background: theme.colors["opinions-hover"],
+            },
+          }}
+        >
+          <Label css={{ color: theme.colors.onOpinions }}>onOpinons</Label>
+          <Label css={{ color: theme.colors["onOpinions-hover"] }}>
+            onOpinons-hover
+          </Label>
+        </Container>
+      </Box>
+      <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        <Label css={{ color: theme.colors.onBackground }}>
+          opinionsContainer
+        </Label>
+        <Container
+          css={{
+            border: `1px solid ${theme.colors.opinions}`,
+            background: theme.colors.opinionsContainer,
+          }}
+        >
+          <Label css={{ color: theme.colors.onOpinionsContainer }}>
+            onOpinionsContainer
+          </Label>
+          <Label css={{ color: theme.colors["onOpinionsContainer-hover"] }}>
+            onOpinons-hover
+          </Label>
+        </Container>
+      </Box>
+      <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
         <Label css={{ color: theme.colors.onBackground }}>Background</Label>
         <Container
           css={{
@@ -133,7 +173,7 @@ export default function ThemeAndSemantic() {
           </Label>
         </Container>
       </Box>
-      <Box>
+      <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
         <Label css={{ color: theme.colors.onBackground }}>
           Background-forSurfaces
         </Label>
@@ -155,7 +195,7 @@ export default function ThemeAndSemantic() {
           </Label>
         </Container>
       </Box>
-      <Box>
+      <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
         <Label css={{ color: theme.colors.onBackground }}>Surface</Label>
         <Container
           css={{
@@ -171,7 +211,7 @@ export default function ThemeAndSemantic() {
           </Label>
         </Container>
       </Box>
-      <Box>
+      <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
         <Label css={{ color: theme.colors.onBackground }}>
           Surface-highest
         </Label>
@@ -210,7 +250,7 @@ export default function ThemeAndSemantic() {
           </Label>
         </Container>
       </Box>
-      <Box>
+      <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
         <Label css={{ color: theme.colors.onBackground }}>errorContainer</Label>
         <Container
           css={{
@@ -236,7 +276,7 @@ export default function ThemeAndSemantic() {
           </Label>
         </Container>
       </Box>
-      <Box>
+      <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
         <Label css={{ color: theme.colors.onBackground }}>
           successContainer
         </Label>
@@ -264,7 +304,7 @@ export default function ThemeAndSemantic() {
           </Label>
         </Container>
       </Box>
-      <Box>
+      <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
         <Label css={{ color: theme.colors.onBackground }}>
           warningContainer
         </Label>
@@ -292,7 +332,7 @@ export default function ThemeAndSemantic() {
           </Label>
         </Container>
       </Box>
-      <Box>
+      <Box css={{ display: "flex", flexDirection: "column", height: "100%" }}>
         <Label css={{ color: theme.colors.onBackground }}>
           signalContainer
         </Label>

diff --git a/build.washingtonpost.com/package.json b/build.washingtonpost.com/package.json
@@ -26,7 +26,7 @@
     "@washingtonpost/site-favicons": "0.3.4-alpha.1",
     "@washingtonpost/site-footer": "0.25.3-alpha.1",
     "@washingtonpost/tachyons-css": "^1.8.0",
-    "@washingtonpost/wpds-assets": "^2.5.0",
+    "@washingtonpost/wpds-assets": "^2.6.0",
     "@washingtonpost/wpds-kitchen-sink": "2.7.0",
     "@washingtonpost/wpds-tailwind-theme": "2.7.0",
     "@washingtonpost/wpds-tokens": "2.7.0",

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/kit/package.json b/packages/kit/package.json
@@ -58,7 +58,7 @@
     "@react-types/combobox": "^3.11.1",
     "@react-types/shared": "^3.23.1",
     "@stitches/react": "1.3.1-1",
-    "@washingtonpost/wpds-assets": "^2.5.0",
+    "@washingtonpost/wpds-assets": "^2.6.0",
     "match-sorter": "6.3.1",
     "nanoid": "^3.3.4",
     "popper-max-size-modifier": "^0.2.0",