Merge branch 'main' into doc-user-education-guide

washingtonpost · Oct 1, 2024 · fc2bd2f · fc2bd2f
2 parents 11d8267 + 92e3096
commit fc2bd2f
Show file tree

Hide file tree

Showing 9 changed files with 761 additions and 502 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/docs/architecture/005-new-162-fontsize-token.md b/docs/architecture/005-new-162-fontsize-token.md
@@ -0,0 +1,15 @@
+# Introducing a 26px Font Size Token (162)
+
+## Background
+
+The current design system includes a sequence of font size tokens that range from 050 to 500, covering a variety of common font sizes. However, there is no token for a 26px font size, which falls between the existing 24px (likely token 150) and 28px (likely token 175).
+
+**To address this gap, we propose adding a new token:** 162, representing the 26px font size. While the naming of tokens generally follows a predictable sequence, we have previously included some exceptions where unique naming conventions better suited our design needs. The addition of token 162 aligns with this flexibility.
+
+### Rationale
+
+- **Visual consistency:** A 26px size provides a finer granularity of choice between 24px and 28px, allowing for more precise typography adjustments.
+
+- **Existing use cases:** The need for a 26px font size has emerged based on design reviews and accessibility considerations, particularly for headings and larger body text in certain layouts.
+
+- **Token flexibility:** The system already accommodates some non-sequential naming conventions. Introducing token 162 for 26px continues this flexible approach while maintaining overall consistency.
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",