-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Fixed onSurface to have the correct camel casing (#571)
* WIP * new color doc, fixed onSurface token to camel case * fix linting errors * revert concurrency for dev command * Fixed search input Lint calls out that I need to pass unnecessary dependencies to the useeffect breaking the input search from working. So removing them again. * fix title and reorganize * Fix to Update ThemeTokens.jsx Had a mispelling on the surface-highest * Update color.mdx Spacing adjustment * Fixed border token Shame on Brian for not using a token for the border color lol * Update ColorSamples.jsx to use tokens and theme * Update ThemeTokens.jsx * Improving Rendering performance per Art recs. * Update ColorSamples.jsx * Resolve conflicting Theme * Update color.mdx * Update color.mdx - adjusted spacing * format and update from main
- Loading branch information
Showing
57 changed files
with
1,028 additions
and
486 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
228 changes: 139 additions & 89 deletions
228
build.washingtonpost.com/components/Markdown/Examples/ColorSamples.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,106 +1,156 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import { Box, styled, AlertBanner, theme } from "@washingtonpost/wpds-ui-kit"; | ||
| import { toast } from "react-toastify"; | ||
| import { styled, theme } from "@washingtonpost/wpds-ui-kit"; | ||
| const uiKit = theme; | ||
| import Tokens from "@washingtonpost/wpds-theme/src/wpds.tokens.json"; | ||
| import { hex, score } from "wcag-contrast"; | ||
| import { useTheme } from "next-themes"; | ||
|
|
||
| import { Grid } from "../Components/Grid"; | ||
| const xMapping = [0, 20, 40, 60, 80, 100, 200, 300, 400, 500, 600, 700]; | ||
| const yMapping = [ | ||
| "red", | ||
| "blue", | ||
| "green", | ||
| "orange", | ||
| "teal", | ||
| "gold", | ||
| "mustard", | ||
| "purple", | ||
| "pink", | ||
| "yellow", | ||
| "gray", | ||
| ]; | ||
|
|
||
| const ColorSamples = ({ group }) => { | ||
| const [colorGroupArray, setColorGroupArray] = useState([]); | ||
| const [copyText, setCopyText] = useState(""); | ||
| const PaletteGrid = styled("div", { | ||
| display: "grid", | ||
| gridTemplateColumns: "30px repeat(12, 1fr)", | ||
| gridTemplateRows: "repeat(11, 1fr)", // Adjusted to match yMapping length | ||
| gap: "$025", | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| const colorArray = handleColor(group); | ||
| setColorGroupArray(colorArray); | ||
| }, [group]); | ||
| const Swatch = styled("div", { | ||
| minWidth: 20, | ||
| minHeight: 40, | ||
| width: "100%", | ||
| height: "100%", | ||
| borderRadius: uiKit.radii["012"], | ||
| borderColor: uiKit.colors.outline, | ||
| borderWidth: "1px", | ||
| borderStyle: "solid", | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| color: uiKit.colors["gray0"], // Default text color | ||
| "@sm": { | ||
| minWidth: "unset", | ||
| minHeight: "unset", | ||
| }, | ||
| "& div": { | ||
| "@sm": { | ||
| display: "none", | ||
| }, | ||
| }, | ||
| }); | ||
| const AxisLabel = styled("div", { | ||
| fontWeight: "bold", | ||
| display: "flex", | ||
| alignItems: "end", | ||
| justifyContent: "center", | ||
| }); | ||
|
|
||
| export default function ColorGrid() { | ||
| const { theme } = useTheme(); | ||
| const [context, setContext] = useState(Tokens.color.light); | ||
|
|
||
| useEffect(() => { | ||
| const SuccessToast = () => ( | ||
| <AlertBanner.Root variant="success"> | ||
| <AlertBanner.Content css={{ minWidth: 250, paddingRight: "$050" }}> | ||
| <b>Copied: </b> | ||
| <Box as="span" css={{ fontSize: theme.fontSizes[100] }}> | ||
| <Box as="i">{copyText}</Box> | ||
| </Box> | ||
| </AlertBanner.Content> | ||
| </AlertBanner.Root> | ||
| ); | ||
| setContext(theme === "dark" ? Tokens.color.dark : Tokens.color.light); | ||
| }, [theme]); | ||
|
|
||
| if (copyText) { | ||
| window.navigator.clipboard.writeText(copyText); | ||
| toast(<SuccessToast />, { | ||
| position: "top-center", | ||
| closeButton: false, | ||
| autoClose: 2000, | ||
| hideProgressBar: true, | ||
| draggable: false, | ||
| onClose: () => { | ||
| setCopyText(null); | ||
| }, | ||
| }); | ||
| } | ||
| }, [copyText]); | ||
| function lookUpValue(item) { | ||
| let value = item.value; | ||
|
|
||
| const handleColor = (group) => { | ||
| const colorNamesArray = Object.keys(Tokens.color[group]); | ||
| let lookUpKey = value?.substring(1, value.length - 1); | ||
|
|
||
| return colorNamesArray.filter((colorName) => | ||
| Object.prototype.hasOwnProperty.call( | ||
| Tokens.color[group][colorName], | ||
| "value" | ||
| ) | ||
| ); | ||
| }; | ||
| if (theme === "dark") { | ||
| value = item.valueDark; | ||
| lookUpKey = value?.substring(1, value.length - 1); | ||
| return Tokens.color.dark[lookUpKey]?.hex; | ||
| } else { | ||
| return Tokens.color.light[lookUpKey]?.hex; | ||
| } | ||
| } | ||
|
|
||
| const Swatch = styled("button", { | ||
| backgroundColor: "transparent", | ||
| border: "1px solid $subtle", | ||
| padding: 0, | ||
| "&:hover": { | ||
| opacity: 0.5, | ||
| }, | ||
| }); | ||
| const GetSwatchesWithLabels = () => { | ||
| let elements = []; | ||
| const background = lookUpValue(Tokens.color.theme.background); | ||
|
|
||
| // Y-axis labels | ||
| yMapping.forEach((label, index) => { | ||
| elements.push( | ||
| <AxisLabel | ||
| key={`y-label-${index}`} | ||
| css={{ | ||
| textTransform: "capitalize", | ||
| gridColumn: index + 2, | ||
| gridRow: 1, | ||
| "@sm": { | ||
| display: "none", | ||
| }, | ||
| }} | ||
| > | ||
| {label} | ||
| </AxisLabel> | ||
| ); | ||
| }); | ||
|
|
||
| const ColorExample = styled("div", { | ||
| minHeight: "$500", | ||
| width: "100%", | ||
| display: "flex", | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| }); | ||
| const ColorID = styled("p", { | ||
| fontSize: "$100", | ||
| marginBlock: 0, | ||
| padding: "$025", | ||
| fontFamily: "$meta", | ||
| color: "$primary", | ||
| }); | ||
| // X-axis labels | ||
| xMapping.forEach((label, index) => { | ||
| elements.push( | ||
| <AxisLabel | ||
| key={`x-label-${index}`} | ||
| style={{ | ||
| justifySelf: "end", | ||
| alignSelf: "center", | ||
| paddingRight: 4, | ||
| gridRow: index + 2, | ||
| gridColumn: 1, | ||
| }} | ||
| > | ||
| {label} | ||
| </AxisLabel> | ||
| ); | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <Grid maxSize={"120px"}> | ||
| {colorGroupArray.map((key, i) => ( | ||
| // Swatches | ||
| yMapping.forEach((color, yIndex) => { | ||
| xMapping.forEach((_, xIndex) => { | ||
| const key = `${color.toLowerCase()}${xMapping[xIndex]}`; | ||
| const hexColor = context[key]?.hex || "transparent"; // Use transparent for empty swatches | ||
| const contrast = | ||
| hexColor != undefined && | ||
| hexColor !== "transparent" && | ||
| hex(hexColor, background).toFixed(2); | ||
| const TokenScore = contrast && score(contrast); | ||
| elements.push( | ||
| <Swatch | ||
| key={i} | ||
| onClick={() => | ||
| setCopyText( | ||
| `$${key.toLowerCase()}${group == "static" ? "-static" : ""}` | ||
| ) | ||
| } | ||
| css={{ | ||
| backgroundColor: `$${key}`, | ||
| gridRow: xIndex + 2, // Offset by 1 due to labels | ||
| gridColumn: yIndex + 2, // Offset by 1 due to labels | ||
| color: | ||
| TokenScore && TokenScore !== "AA Large" && TokenScore !== "Fail" | ||
| ? uiKit.colors.gray700 | ||
| : uiKit.colors.gray0, | ||
| }} | ||
| key={key} | ||
| > | ||
| <ColorExample | ||
| css={{ | ||
| backgroundColor: `$${key}${group == "static" ? "-static" : ""}`, | ||
| }} | ||
| /> | ||
| <ColorID>{key}</ColorID> | ||
| <div>{contrast}</div> | ||
| </Swatch> | ||
| ))} | ||
| </Grid> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| ColorSamples.displayName = "Color Samples"; | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| export default ColorSamples; | ||
| return elements; | ||
| }; | ||
| return <PaletteGrid>{GetSwatchesWithLabels()}</PaletteGrid>; | ||
| } |
Oops, something went wrong.