Feature/hop 71 (#88)

Co-authored-by: Francis Thibault <[email protected]>
gsoft-inc · Nov 8, 2023 · 70c40a8 · 70c40a8
1 parent c610b68
commit 70c40a8
Show file tree

Hide file tree

Showing 8 changed files with 209 additions and 50 deletions.
diff --git a/.changeset/fresh-geckos-rule.md b/.changeset/fresh-geckos-rule.md
@@ -0,0 +1,6 @@
+---
+"@hopper-ui/tokens": minor
+"docs": minor
+---
+
+Update to color tokens and new color tokens
diff --git a/apps/docs/content/tokens/semantic/color.mdx b/apps/docs/content/tokens/semantic/color.mdx
@@ -138,62 +138,62 @@ We do not want to do this for the dark mode, otherwise, we see double the header
 
 ## Data Visualization
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-unavailable", "hop-text"]
+      ["hop-dataviz-unavailable", "hop-dataviz-text"]
     } />
 
     ### Monochromatic - Primary
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-monochromatic-primary"]
+      ["hop-dataviz-monochromatic-primary"]
     } />
 
     ### Monochromatic - Positive
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-monochromatic-positive"]
+      ["hop-dataviz-monochromatic-positive"]
     } />
 
     ### Monochromatic - Negative
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-monochromatic-negative"]
+      ["hop-dataviz-monochromatic-negative"]
     } />
 
     ### Diverging Sequence 1
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-diverging-sequence-1"]
+      ["hop-dataviz-diverging-sequence-1"]
     } />
 
     ### Diverging Sequence 2
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-diverging-sequence-2"]
+      ["hop-dataviz-diverging-sequence-2"]
     } />
 
     ### Categorical - Sequences
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-categorical-sequence"]
+      ["hop-dataviz-categorical-sequence"]
     } />
 
     ### Categorical - 2 Color Groups
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-categorical-2"]
+      ["hop-dataviz-categorical-2"]
     } />
 
     ### Categorical - 3 Color Groups
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-categorical-3"]
+      ["hop-dataviz-categorical-3"]
     } />
 
     ### Categorical - 4 Color Groups
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-categorical-4"]
+      ["hop-dataviz-categorical-4"]
     } />
 
     ### Categorical - 5 Color Groups
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-categorical-5"]
+      ["hop-dataviz-categorical-5"]
     } />
 
     ### Categorical - 6 Color Groups
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-categorical-6"]
+      ["hop-dataviz-categorical-6"]
     } />
   </div>
   <div>
@@ -317,7 +317,7 @@ We do not want to do this for the dark mode, otherwise, we see double the header
 
     ## Data Visualization
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
-      ["hop-unavailable", "hop-text"]
+      ["hop-dataviz-unavailable", "hop-dataviz-text"]
     } />
   </div>
-</Tabs>
+</Tabs>
diff --git a/apps/docs/datas/tokens-dark.json b/apps/docs/datas/tokens-dark.json
@@ -1021,11 +1021,15 @@
       },
       {
         "name": "hop-decorative-option9-surface-weakest",
-        "value": "#f8f6f3"
+        "value": "#b3b3b1"
       },
       {
         "name": "hop-decorative-option9-surface-weak",
-        "value": "#ecebe8"
+        "value": "#959593"
+      },
+      {
+        "name": "hop-decorative-option9-surface-weak-hover",
+        "value": "#777775"
       },
       {
         "name": "hop-decorative-option9-surface-strong",
@@ -1063,6 +1067,10 @@
         "name": "hop-decorative-option8-surface-weak",
         "value": "#fde6e5"
       },
+      {
+        "name": "hop-decorative-option8-surface-weak-hover",
+        "value": "#ffd6d3"
+      },
       {
         "name": "hop-decorative-option8-surface-strong",
         "value": "#ffbcb7"
@@ -1100,12 +1108,16 @@
         "value": "#f0eae3"
       },
       {
-        "name": "hop-decorative-option7-surface-strong",
+        "name": "hop-decorative-option7-surface-weak-hover",
         "value": "#e5ded6"
       },
+      {
+        "name": "hop-decorative-option7-surface-strong",
+        "value": "#d4cbc0"
+      },
       {
         "name": "hop-decorative-option7-surface-hover",
-        "value": "#e5ded6"
+        "value": "#d4cbc0"
       },
       {
         "name": "hop-decorative-option7-surface",
@@ -1135,6 +1147,10 @@
         "name": "hop-decorative-option5-surface-weak",
         "value": "#d9efff"
       },
+      {
+        "name": "hop-decorative-option5-surface-weak-hover",
+        "value": "#bae6ff"
+      },
       {
         "name": "hop-decorative-option5-surface-strong",
         "value": "#9fd2f7"
@@ -1163,6 +1179,10 @@
         "name": "hop-decorative-option6-surface-weak",
         "value": "#fff2b8"
       },
+      {
+        "name": "hop-decorative-option6-surface-weak-hover",
+        "value": "#f7e694"
+      },
       {
         "name": "hop-decorative-option6-surface-strong",
         "value": "#eac96d"
@@ -1199,6 +1219,10 @@
         "name": "hop-decorative-option4-surface-weak",
         "value": "#e3f3b9"
       },
+      {
+        "name": "hop-decorative-option4-surface-weak-hover",
+        "value": "#cde8ac"
+      },
       {
         "name": "hop-decorative-option4-surface-strong",
         "value": "#aad89d"
@@ -1239,6 +1263,10 @@
         "name": "hop-decorative-option3-surface-weak",
         "value": "#ffe8d3"
       },
+      {
+        "name": "hop-decorative-option3-surface-weak-hover",
+        "value": "#ffd8be"
+      },
       {
         "name": "hop-decorative-option3-surface-hover",
         "value": "#ff9b3f"
@@ -1271,6 +1299,10 @@
         "name": "hop-decorative-option2-surface-weak",
         "value": "#cff4ef"
       },
+      {
+        "name": "hop-decorative-option2-surface-weak-hover",
+        "value": "#bde8e1"
+      },
       {
         "name": "hop-decorative-option2-surface-strong",
         "value": "#a3d6cb"
@@ -1311,6 +1343,10 @@
         "name": "hop-decorative-option1-surface-weak",
         "value": "#e6ebff"
       },
+      {
+        "name": "hop-decorative-option1-surface-weak-hover",
+        "value": "#d6e0ff"
+      },
       {
         "name": "hop-decorative-option1-surface-hover",
         "value": "#95b1ff"

diff --git a/apps/docs/datas/tokens.json b/apps/docs/datas/tokens.json
@@ -1033,11 +1033,15 @@
       },
       {
         "name": "hop-decorative-option9-surface-weak",
-        "value": "#ecebe8"
+        "value": "#959593"
+      },
+      {
+        "name": "hop-decorative-option9-surface-weak-hover",
+        "value": "#777775"
       },
       {
         "name": "hop-decorative-option9-surface-weakest",
-        "value": "#f8f6f3"
+        "value": "#b3b3b1"
       },
       {
         "name": "hop-decorative-option9-text",
@@ -1063,9 +1067,13 @@
         "name": "hop-decorative-option8-surface-weak",
         "value": "#fde6e5"
       },
+      {
+        "name": "hop-decorative-option8-surface-weak-hover",
+        "value": "#ffd6d3"
+      },
       {
         "name": "hop-decorative-option8-surface-hover",
-        "value": "#ff8e8e"
+        "value": "#ffbcb7"
       },
       {
         "name": "hop-decorative-option8-surface-strong",
@@ -1100,12 +1108,16 @@
         "value": "#f0eae3"
       },
       {
-        "name": "hop-decorative-option7-surface-strong",
+        "name": "hop-decorative-option7-surface-weak-hover",
         "value": "#e5ded6"
       },
+      {
+        "name": "hop-decorative-option7-surface-strong",
+        "value": "#d4cbc0"
+      },
       {
         "name": "hop-decorative-option7-surface-hover",
-        "value": "#e5ded6"
+        "value": "#d4cbc0"
       },
       {
         "name": "hop-decorative-option7-surface",
@@ -1167,6 +1179,10 @@
         "name": "hop-decorative-option6-surface-weak",
         "value": "#fff2b8"
       },
+      {
+        "name": "hop-decorative-option6-surface-weak-hover",
+        "value": "#f7e694"
+      },
       {
         "name": "hop-decorative-option6-surface-hover",
         "value": "#eac96d"
@@ -1203,6 +1219,10 @@
         "name": "hop-decorative-option4-surface-weak",
         "value": "#e3f3b9"
       },
+      {
+        "name": "hop-decorative-option4-surface-weak-hover",
+        "value": "#cde8ac"
+      },
       {
         "name": "hop-decorative-option4-surface-strong",
         "value": "#aad89d"
@@ -1233,7 +1253,11 @@
       },
       {
         "name": "hop-decorative-option3-surface-weak",
-        "value": "#ffbf92"
+        "value": "#ffe8d3"
+      },
+      {
+        "name": "hop-decorative-option3-surface-weak-hover",
+        "value": "#ffd8be"
       },
       {
         "name": "hop-decorative-option3-surface-weakest",
@@ -1249,7 +1273,7 @@
       },
       {
         "name": "hop-decorative-option3-surface",
-        "value": "#ff9b3f"
+        "value": "#ffbf92"
       },
       {
         "name": "hop-decorative-option3-icon",
@@ -1275,6 +1299,10 @@
         "name": "hop-decorative-option2-surface-weak",
         "value": "#cff4ef"
       },
+      {
+        "name": "hop-decorative-option2-surface-weak-hover",
+        "value": "#bde8e1"
+      },
       {
         "name": "hop-decorative-option2-surface-strong",
         "value": "#a3d6cb"
@@ -1307,6 +1335,10 @@
         "name": "hop-decorative-option1-surface-weak",
         "value": "#e6ebff"
       },
+      {
+        "name": "hop-decorative-option1-surface-weak-hover",
+        "value": "#d6e0ff"
+      },
       {
         "name": "hop-decorative-option1-surface-weakest",
         "value": "#f5f6ff"
@@ -1461,7 +1493,7 @@
       },
       {
         "name": "hop-neutral-surface-weak-hover",
-        "value": "#ecebe8"
+        "value": "#e0dfdd"
       },
       {
         "name": "hop-neutral-border-weakest",