Pagination spacing update and status alt hover updates (#411)

fix(pagination): update pagination xg L value to be 24px and yg value to be 16px. fix(modes): adjust mid layer status mixers to apply a color over the top for hover states instead of black.
Sage · Jan 15, 2025 · ac7e50d · ac7e50d
1 parent d57e67d
commit ac7e50d
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 47 deletions.
diff --git a/data/tokens/$themes.json b/data/tokens/$themes.json
@@ -4646,8 +4646,8 @@
       "table.size.row.doubleheight.L": "5ebd337150cbd5bcbf8da9b6cd54bc2a0f30968e",
       "table.size.row.doubleheight.XL": "ba6fd327183431cf35205c62348d082635dc8b0f",
       "table.size.icon.M": "684d2c9437867a9c13d04fe77add732e0055ee8f",
-      "button.color.typical.tertiary.border-enabled": "ab5633eec3bbc23d3bd4d2de5e6d0afebef7a472",
-      "button.color.typical.tertiary.border-hover": "065b734a875ac4d56d102571557b6d78076ba847"
+      "button.color.typical.tertiary.border-enabled": "c983157fe1a147a85dad113d30ff35df9b6e288d",
+      "button.color.typical.tertiary.border-hover": "958f6c77c828f94d22e6ba3e5554b2cb7a9e0585"
     },
     "$figmaCollectionId": "VariableCollectionId:91874:43409",
     "$figmaModeId": "91874:2",

diff --git a/data/tokens/components/container.json b/data/tokens/components/container.json
@@ -1095,9 +1095,9 @@
             "description": "gap between elements in pagination"
           },
           "L": {
-            "value": "{global.space.macro.XS}",
+            "value": "{global.space.macro.M}",
             "type": "spacing",
-            "description": "gap between page nav buttons in pagination"
+            "description": "gap between button group and advanced left area"
           }
         },
         "y": {
@@ -1114,9 +1114,9 @@
         },
         "yg": {
           "M": {
-            "value": "{global.space.macro.XXS}",
+            "value": "{global.space.macro.XS}",
             "type": "spacing",
-            "description": "gap between left and right pagination elements when stacked vertically on small screens"
+            "description": "Vertical gap between elements on small screens"
           }
         },
         "x": {

diff --git a/data/tokens/modes/dark.json b/data/tokens/modes/dark.json
@@ -430,17 +430,8 @@
             }
           },
           "hoverAlt": {
-            "value": "{modes.color.interactive.danger.default}",
+            "value": "{modes.color.status.negative.hoverAlt}",
             "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "{modes.color.modifiers.button.hover} ",
-                  "space": "lch"
-                }
-              }
-            },
             "description": "button hover on dark"
           },
           "hoverAlt2": {
@@ -1055,9 +1046,9 @@
               "studio.tokens": {
                 "modify": {
                   "type": "mix",
-                  "value": "{modes.color.modifiers.button.hoverAlt}",
+                  "value": "{modes.color.modifiers.button.hover}",
                   "space": "lch",
-                  "color": "{modes.color.modifier.contrastMore}"
+                  "color": "{modes.color.status.caution.default}"
                 }
               }
             },
@@ -1192,9 +1183,9 @@
               "studio.tokens": {
                 "modify": {
                   "type": "mix",
-                  "value": "{modes.color.modifiers.button.hoverAlt} ",
+                  "value": "{modes.color.modifiers.button.hover}",
                   "space": "lch",
-                  "color": "{modes.color.modifier.contrastMore}"
+                  "color": "{modes.color.status.info.default}"
                 }
               }
             },
@@ -1255,9 +1246,9 @@
               "studio.tokens": {
                 "modify": {
                   "type": "mix",
-                  "value": "{modes.color.modifiers.button.hoverAlt} ",
+                  "value": "{modes.color.modifiers.button.hover}",
                   "space": "lch",
-                  "color": "{modes.color.modifier.contrastMore}"
+                  "color": "{modes.color.status.negative.default}"
                 }
               }
             },
@@ -1310,9 +1301,9 @@
               "studio.tokens": {
                 "modify": {
                   "type": "mix",
-                  "value": "{modes.color.modifiers.button.hoverAlt} ",
+                  "value": "{modes.color.modifiers.button.hover}",
                   "space": "lch",
-                  "color": "{modes.color.modifier.contrastMore}"
+                  "color": "{modes.color.status.neutral.default}"
                 }
               }
             },
@@ -1411,9 +1402,9 @@
               "studio.tokens": {
                 "modify": {
                   "type": "mix",
-                  "value": "{modes.color.modifiers.button.hoverAlt}",
+                  "value": "{modes.color.modifiers.button.hover}",
                   "space": "lch",
-                  "color": "{modes.color.modifier.contrastMore}"
+                  "color": "{modes.color.status.positive.default}"
                 }
               }
             },

diff --git a/data/tokens/modes/light.json b/data/tokens/modes/light.json
@@ -432,18 +432,9 @@
             "description": "used on solid-pill and primary-button hover states"
           },
           "hoverAlt": {
-            "value": "{modes.color.interactive.danger.default}",
+            "value": "{modes.color.status.negative.hoverAlt}",
             "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "{modes.color.modifiers.button.hover} ",
-                  "space": "lch"
-                }
-              }
-            },
-            "description": "used on outlined-pill and secondary-button hover states"
+            "description": "used on secondary-button hover states"
           },
           "hoverAlt2": {
             "value": "{modes.color.interactive.danger.defaultAlt}",
@@ -1128,9 +1119,9 @@
               "studio.tokens": {
                 "modify": {
                   "type": "mix",
-                  "value": "0.05",
+                  "value": "{modes.color.modifiers.button.hover}",
                   "space": "lch",
-                  "color": "{modes.color.modifier.contrastMore}"
+                  "color": "{modes.color.status.caution.default}"
                 }
               }
             },
@@ -1253,9 +1244,9 @@
               "studio.tokens": {
                 "modify": {
                   "type": "mix",
-                  "value": "0.05",
+                  "value": "{modes.color.modifiers.button.hover}",
                   "space": "lch",
-                  "color": "{modes.color.modifier.contrastMore}"
+                  "color": "{modes.color.status.info.default}"
                 }
               }
             },
@@ -1327,9 +1318,9 @@
               "studio.tokens": {
                 "modify": {
                   "type": "mix",
-                  "value": "0.05",
+                  "value": "{modes.color.modifiers.button.hover}",
                   "space": "lch",
-                  "color": "{modes.color.modifier.contrastMore}"
+                  "color": "{modes.color.status.negative.default} "
                 }
               }
             },
@@ -1382,9 +1373,9 @@
               "studio.tokens": {
                 "modify": {
                   "type": "mix",
-                  "value": "0.05",
+                  "value": "{modes.color.modifiers.button.hover}",
                   "space": "lch",
-                  "color": "{modes.color.modifier.contrastMore}"
+                  "color": "{modes.color.status.neutral.default}"
                 }
               }
             },
@@ -1484,9 +1475,9 @@
               "studio.tokens": {
                 "modify": {
                   "type": "mix",
-                  "value": "0.05",
+                  "value": "{modes.color.modifiers.button.hover}",
                   "space": "lch",
-                  "color": "{modes.color.modifier.contrastMore}"
+                  "color": "{modes.color.status.positive.default}"
                 }
               }
             },