added a note about transparent colors

NYPL · Sep 28, 2023 · cfb1fbd · cfb1fbd
1 parent 092650f
commit cfb1fbd
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/src/components/StyleGuide/ColorCard.tsx b/src/components/StyleGuide/ColorCard.tsx
@@ -361,6 +361,9 @@ export const cssVars = {
       dataBgDefaultColor: checkContrast(10.1),
       textColor: "ui.white",
     },
+    // Colors that use transparency are tough to talk about when it comes to
+    // color combinations and color contrast. For now, we will just use question
+    // marks for the contrast values and WCAG status.
     {
       name: "ui.link.primary-05",
       dataBlackColor: ["?", "?", "?"],
@@ -369,6 +372,9 @@ export const cssVars = {
       dataBgDefaultColor: ["?", "?", "?"],
       textColor: "ui.black",
     },
+    // Colors that use transparency are tough to talk about when it comes to
+    // color combinations and color contrast. For now, we will just use question
+    // marks for the contrast values and WCAG status.
     {
       name: "ui.link.primary-10",
       dataBlackColor: ["?", "?", "?"],
@@ -695,6 +701,9 @@ export const cssVars = {
       dataDarkBgDefaultColor: checkContrast("5.33"),
       textColor: "ui.black",
     },
+    // Colors that use transparency are tough to talk about when it comes to
+    // color combinations and color contrast. For now, we will just use question
+    // marks for the contrast values and WCAG status.
     {
       name: "dark.ui.link.primary-05",
       dataBlackColor: ["?", "?", "?"],
@@ -703,6 +712,9 @@ export const cssVars = {
       dataDarkBgDefaultColor: ["?", "?", "?"],
       textColor: "ui.white",
     },
+    // Colors that use transparency are tough to talk about when it comes to
+    // color combinations and color contrast. For now, we will just use question
+    // marks for the contrast values and WCAG status.
     {
       name: "dark.ui.link.primary-10",
       dataBlackColor: ["?", "?", "?"],

diff --git a/src/components/StyleGuide/Colors.mdx b/src/components/StyleGuide/Colors.mdx
@@ -41,6 +41,11 @@ Resources:
 
 - [W3C WCAG 2.1 Contrast Minimum](https://www.w3.org/TR/WCAG21/#contrast-minimum)
 
+NOTE: There are a handful of colors that are semi-transpararent. Colors that use
+transparency are tough to talk about when it comes to color combinations and
+color contrast. That being the case, we have used question marks for the
+contrast values and WCAG status.
+
 ## Brand Colors
 
 These colors are connected to the NYPL brand and are not intended to be generic.
@@ -108,9 +113,7 @@ used to add visual context for a user's location on an NYPL website.
   p="s"
 >
   <Heading>Connect</Heading>
-  <p>
-    Connect is used for the Connect and Get Help section fronts.
-  </p>
+  <p>Connect is used for the Connect and Get Help section fronts.</p>
   <SimpleGrid columns={1} gap="s">
     {getColorCards("connect")}
   </SimpleGrid>