Change all colors in sample data to Oklch (#24)

noodlestan · Jan 21, 2025 · b016834 · b016834
1 parent 5cf4f2b
commit b016834
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 37 deletions.
diff --git a/docs/designer-decisions/data/decisions/color.json b/docs/designer-decisions/data/decisions/color.json
@@ -98,31 +98,31 @@
     "name": "Brand Pink",
     "description": "Brand Pink color",
     "params": {
-      "value": "#d35084"
+      "value": "oklch(61.92% 0.1717 358.75)"
     }
   },
   {
     "model": "color-value/explicit",
     "name": "Brand Blue",
     "description": "Brand Blue color",
     "params": {
-      "value": "#06b4e0"
+      "value": "oklch(71.53% 0.1332 223.66)"
     }
   },
   {
     "model": "color-value/explicit",
     "name": "Brand Black",
     "description": "Brand Black color",
     "params": {
-      "value": "#181818"
+      "value": "oklch(20.9% 0 0)"
     }
   },
   {
     "model": "color-value/explicit",
     "name": "Brand White",
     "description": "Brand White color",
     "params": {
-      "value": "#f7f7f7"
+      "value": "oklch(97.61% 0 0)"
     }
   },
   {
@@ -134,7 +134,12 @@
       "notFor": ["Typography", "Foregrounds", "Backgrounds"]
     },
     "params": {
-      "values": ["#d35084", "#06b4e0", "#181818", "#f7f7f7"]
+      "values": [
+        "oklch(61.92% 0.1717 358.75)",
+        "oklch(71.53% 0.1332 223.66)",
+        "oklch(20.9% 0 0)",
+        "oklch(97.61% 0 0)"
+      ]
     }
   },
   {
@@ -152,7 +157,7 @@
       "notFor": ["Non-interactive elements"]
     },
     "params": {
-      "value": "#9B2C5A"
+      "value": "oklch(47.63% 0.1513 359.37)"
     }
   },
   {
@@ -164,7 +169,7 @@
       "notFor": ["Non-interactive elements"]
     },
     "params": {
-      "value": "#FDFBFC"
+      "value": "oklch(98.99% 0.0025 345.21)"
     }
   },
   {
@@ -176,7 +181,7 @@
       "notFor": ["Typography"]
     },
     "params": {
-      "anchor": "#d35084",
+      "anchor": "oklch(61.92% 0.1717 358.75)",
       "after": {
         "steps": 4,
         "modifier": {
@@ -204,8 +209,8 @@
       "notFor": ["Typography", "Icons", "Backgrounds", "Foregrounds"]
     },
     "params": {
-      "from": "#DD3F3F",
-      "to": "#3049e0",
+      "from": "oklch(60.12% 0.1951 25.26)",
+      "to": "oklch(49.35% 0.2284 268.48)",
       "steps": 5
     }
   }

diff --git a/docs/designer-decisions/src/content/docs/api/designer-shows/Types/ColorVizName.mdx b/docs/designer-decisions/src/content/docs/api/designer-shows/Types/ColorVizName.mdx
@@ -48,20 +48,20 @@ Render the decision value as the foreground content color.
 ```mdx
 <ShowDecision
     store={store}
-    d="Action Contrast Color"
+    d="Brand Pink"
     size="m"
     viz="fg"
-    options={{ contrast: '#9B2C5A' }}
+    options={{ contrast: 'oklch(24.78% 0.0873 257.3)' }}
 />
 ```
 
 <CardGrid>
     <ShowDecision
         store={store}
-        d="Action Contrast Color"
+        d="Brand Pink"
         size="m"
         viz="fg"
-        options={{ contrast: '#9B2C5A' }}
+        options={{ contrast: 'oklch(24.78% 0.0873 257.3)' }}
     />
 </CardGrid>
 
@@ -77,7 +77,7 @@ Render the decision value as the background with custom element(s) on top.
     d="Action Color"
     size="m"
     viz="bg"
-    options={{ mode: 'text', contrast: '#FDFBFC' }}
+    options={{ mode: 'text', contrast: 'oklch(98.99% 0.0025 345.21)' }}
 />
 ```
 
@@ -87,7 +87,7 @@ Render the decision value as the background with custom element(s) on top.
         d="Action Color"
         size="m"
         viz="bg"
-        options={{ mode: 'text', contrast: '#FDFBFC' }}
+        options={{ mode: 'text', contrast: 'oklch(98.99% 0.0025 345.21)' }}
     />
 </CardGrid>
 

diff --git a/...esigner-decisions/src/content/docs/api/designer-shows/Types/ShowContentMode.mdx b/...esigner-decisions/src/content/docs/api/designer-shows/Types/ShowContentMode.mdx
@@ -32,36 +32,30 @@ Available only when [viz](/api/designer-shows/Types/ColorVizName) is set to eith
 
 ### `typeface` (default)
 
-Renders a few characters showcasing features of a typeface.
+Renders a few characters.
+
+You can override the content via
+[options.content](/api/designer-shows/Types/ColorVizOptions#-content).
 
 ```mdx
-<ShowDecision store={store} d="Brand Pink" size="m" viz="fg" />
+<ShowDecision store={store} d="Brand Pink" size="m" viz="fg" options={{ mode: 'typeface' }} />
 ```
 
 <FlexStack vpad>
-    <ShowDecision store={store} d="Brand Pink" size="m" viz="fg" />
+    <ShowDecision store={store} d="Brand Pink" size="m" viz="fg" options={{ mode: 'typeface' }} />
 </FlexStack>
 
 ### `text`
 
 Renders a long text.
 
+You can override the content via
+[options.content](/api/designer-shows/Types/ColorVizOptions#-content).
+
 ```mdx
-<ShowDecision
-    store={store}
-    d="Action Contrast Color"
-    size="m"
-    viz="fg"
-    options={{ mode: 'text', contrast: '#9B2C5A' }}
-/>
+<ShowDecision store={store} d="Brand Pink" size="xl" viz="fg" options={{ mode: 'text' }} />
 ```
 
 <CardGrid>
-    <ShowDecision
-        store={store}
-        d="Action Contrast Color"
-        size="m"
-        viz="fg"
-        options={{ mode: 'text', contrast: '#9B2C5A' }}
-    />
+    <ShowDecision store={store} d="Brand Pink" size="xl" viz="fg" options={{ mode: 'text' }} />
 </CardGrid>
diff --git a/docs/designer-decisions/src/content/docs/guides/40-documenting-decisions.mdx b/docs/designer-decisions/src/content/docs/guides/40-documenting-decisions.mdx
@@ -229,7 +229,7 @@ custom `content` for the first one, and switch to `text` mode on the second.
 
 ```mdx
 <ShowDecision ... viz="fg" options={{ contrast: '#000000', content: 'Hello' }} />
-<ShowDecision ... viz="bg" options={{ contrast: '#FDFBFC', mode: 'text' }} />
+<ShowDecision ... viz="bg" options={{ contrast: '#FFFFFF', mode: 'text' }} />
 ```
 
 <CardGrid>
@@ -245,7 +245,7 @@ custom `content` for the first one, and switch to `text` mode on the second.
         d="Action Color"
         value={false}
         viz="bg"
-        options={{ contrast: '#FDFBFC', mode: 'text' }}
+        options={{ contrast: '#FFFFFF', mode: 'text' }}
     />
 </CardGrid>
 

diff --git a/packages/libs/designer-decisions/sample-data/color/color-set-explicit.json b/packages/libs/designer-decisions/sample-data/color/color-set-explicit.json
@@ -3,7 +3,12 @@
     "model": "color-set/explicit",
     "name": "Color Set Explicit Sample",
     "params": {
-      "values": ["#d35084", "#06b4e0", "#181818", "#f7f7f7"]
+      "values": [
+        "oklch(61.92% 0.1717 358.75)",
+        "oklch(71.53% 0.1332 223.66)",
+        "oklch(20.9% 0 0)",
+        "oklch(97.61% 0 0)"
+      ]
     }
   }
 ]
diff --git a/packages/libs/designer-decisions/sample-data/color/color-value-explicit.json b/packages/libs/designer-decisions/sample-data/color/color-value-explicit.json
@@ -3,7 +3,7 @@
     "model": "color-value/explicit",
     "name": "Color Value Explicit Sample",
     "params": {
-      "value": "#9B2C5A"
+      "value": "oklch(47.63% 0.1513 359.37)"
     }
   }
 ]