From ecd97f841077bbdce2538db20f9808edb45efae2 Mon Sep 17 00:00:00 2001
From: Banshee-92 <138103229+Banshee-92@users.noreply.github.com>
Date: Thu, 5 Oct 2023 09:06:57 +0200
Subject: [PATCH] New buttons

---
 tokens.json | 488 +++++++++++++++-------------------------------------
 1 file changed, 140 insertions(+), 348 deletions(-)

diff --git a/tokens.json b/tokens.json
index 093044be8..3f0223a11 100644
--- a/tokens.json
+++ b/tokens.json
@@ -54,7 +54,7 @@
         },
         "primary": {
           "100": {
-            "value": "hsla({core.color.customPrimary.hue},{core.color.customPrimary.saturation}%,{util.color.primary.lightness.up.4}%,1)",
+            "value": "#F1FFBD",
             "type": "color"
           },
           "200": {
@@ -759,7 +759,7 @@
             "y": "0",
             "blur": "0",
             "spread": "2",
-            "color": "{core.color.primary.300}",
+            "color": "{core.color.primary.400}",
             "type": "dropShadow"
           },
           "type": "boxShadow"
@@ -830,7 +830,7 @@
             }
           },
           "secondary": {
-            "muted": {
+            "default": {
               "value": "{core.color.secondary.100}",
               "type": "color"
             }
@@ -896,6 +896,12 @@
               "value": "{core.color.attention.100}",
               "type": "color"
             }
+          },
+          "tertiary": {
+            "default": {
+              "value": "{core.color.tertiary.100}",
+              "type": "color"
+            }
           }
         },
         "typo": {
@@ -1050,7 +1056,7 @@
               "value": {
                 "fontFamily": "{core.font.family.main}",
                 "fontWeight": "{core.font.weight.regular}",
-                "lineHeight": "{core.font.lineHeight.200}px",
+                "lineHeight": "{core.font.lineHeight.300}px",
                 "fontSize": "{core.font.size.75}px"
               },
               "type": "typography"
@@ -1059,7 +1065,7 @@
               "value": {
                 "fontFamily": "{core.font.family.main}",
                 "fontWeight": "{core.font.weight.medium}",
-                "lineHeight": "{core.font.lineHeight.200}px",
+                "lineHeight": "{core.font.lineHeight.300}px",
                 "fontSize": "{core.font.size.75}px"
               },
               "type": "typography"
@@ -1068,7 +1074,7 @@
               "value": {
                 "fontFamily": "{core.font.family.main}",
                 "fontWeight": "{core.font.weight.semiBold}",
-                "lineHeight": "{core.font.lineHeight.200}px",
+                "lineHeight": "{core.font.lineHeight.300}px",
                 "fontSize": "{core.font.size.75}px"
               },
               "type": "typography"
@@ -1463,23 +1469,15 @@
             "emphasis": {
               "value": "{core.color.primary.400}",
               "type": "color"
+            },
+            "strong": {
+              "value": "{core.color.primary.500}",
+              "type": "color"
             }
           },
           "secondary": {
             "default": {
-              "value": "{core.color.neutral.700}",
-              "type": "color"
-            },
-            "emphasis": {
-              "value": "{core.color.neutral.800}",
-              "type": "color"
-            },
-            "muted": {
-              "value": "{core.color.neutral.500}",
-              "type": "color"
-            },
-            "subtle": {
-              "value": "{core.color.neutral.50}",
+              "value": "{core.color.secondary.100}",
               "type": "color"
             }
           },
@@ -1736,6 +1734,19 @@
             "type": "sizing"
           }
         }
+      },
+      "hover": {
+        "default": {
+          "value": {
+            "x": "0",
+            "y": "0",
+            "blur": "4",
+            "spread": "0",
+            "color": "rgba({core.color.primary.400}, 0.80)",
+            "type": "dropShadow"
+          },
+          "type": "boxShadow"
+        }
       }
     }
   },
@@ -1745,19 +1756,7 @@
         "color": {
           "primary": {
             "default": {
-              "value": "{global.content.color.primary.default}",
-              "type": "color"
-            },
-            "hover": {
-              "value": "{global.content.color.primary.emphasis}",
-              "type": "color"
-            },
-            "down": {
-              "value": "{global.content.color.primary.default}",
-              "type": "color"
-            },
-            "default--reverse": {
-              "value": "{global.content.color.text.default--reverse}",
+              "value": "{global.content.color.secondary.default}",
               "type": "color"
             }
           },
@@ -1765,18 +1764,6 @@
             "default": {
               "value": "{global.content.color.secondary.default}",
               "type": "color"
-            },
-            "hover": {
-              "value": "{global.content.color.secondary.emphasis}",
-              "type": "color"
-            },
-            "down": {
-              "value": "{global.content.color.secondary.default}",
-              "type": "color"
-            },
-            "default--reverse": {
-              "value": "{global.content.color.text.default--reverse}",
-              "type": "color"
             }
           },
           "terciary": {
@@ -1812,13 +1799,12 @@
             }
           }
         },
-        "typo": {
-          "value": {
-            "fontFamily": "{core.font.family.main}",
-            "fontWeight": "{core.font.weight.medium}",
-            "lineHeight": "{core.font.lineHeight.200}px",
-            "fontSize": "{core.font.size.75}px"
-          },
+        "default": {
+          "value": "{global.content.typo.body.sm}",
+          "type": "typography"
+        },
+        "hover": {
+          "value": "{global.content.typo.body.sm--medium}",
           "type": "typography"
         }
       },
@@ -1830,25 +1816,33 @@
               "type": "color"
             },
             "hover": {
+              "value": "{global.background.color.primary.default}",
+              "type": "color"
+            },
+            "pressed": {
               "value": "{global.background.color.primary.emphasis}",
               "type": "color"
             },
-            "down": {
+            "focus": {
               "value": "{global.background.color.primary.default}",
               "type": "color"
             }
           },
           "secondary": {
             "default": {
-              "value": "{global.background.color.secondary.default}",
+              "value": "{global.background.color.transparent}",
               "type": "color"
             },
             "hover": {
-              "value": "{global.background.color.secondary.emphasis}",
+              "value": "{global.background.color.transparent}",
               "type": "color"
             },
-            "down": {
-              "value": "{global.background.color.secondary.default}",
+            "press": {
+              "value": "{global.background.color.surface.default}",
+              "type": "color"
+            },
+            "focus": {
+              "value": "{global.background.color.surface.default}",
               "type": "color"
             }
           },
@@ -1904,11 +1898,15 @@
               "type": "color"
             },
             "hover": {
-              "value": "{global.border.color.secondary.emphasis}",
+              "value": "{global.border.color.secondary.default}",
               "type": "color"
             },
-            "down": {
-              "value": "{global.border.color.secondary.emphasis}",
+            "pressed": {
+              "value": "{global.border.color.primary.strong}",
+              "type": "color"
+            },
+            "focus": {
+              "value": "{global.border.color.secondary.default}",
               "type": "color"
             }
           },
@@ -1991,6 +1989,30 @@
           "value": "{global.spacing.gap.md}",
           "type": "spacing"
         }
+      },
+      "shadow": {
+        "hover": {
+          "value": {
+            "x": "0",
+            "y": "0",
+            "blur": "4",
+            "spread": "0",
+            "color": "rgba({button.background.color.primary.hover}, 0.80)",
+            "type": "dropShadow"
+          },
+          "type": "boxShadow"
+        },
+        "pressed": {
+          "value": {
+            "x": "0",
+            "y": "0",
+            "blur": "4",
+            "spread": "0",
+            "color": "{button.border.color.secondary.pressed}",
+            "type": "innerShadow"
+          },
+          "type": "boxShadow"
+        }
       }
     },
     "buttonText": {
@@ -2231,73 +2253,13 @@
         "color": {
           "primary": {
             "default": {
-              "value": "{global.content.color.primary.default}",
-              "type": "color"
-            },
-            "hover": {
-              "value": "{global.content.color.primary.emphasis}",
-              "type": "color"
-            },
-            "down": {
-              "value": "{global.content.color.primary.default}",
-              "type": "color"
-            },
-            "default--reverse": {
-              "value": "{global.content.color.text.default--reverse}",
-              "type": "color"
-            }
-          },
-          "secondary": {
-            "default": {
-              "value": "{global.content.color.secondary.default}",
-              "type": "color"
-            },
-            "hover": {
-              "value": "{global.content.color.secondary.emphasis}",
-              "type": "color"
-            },
-            "down": {
               "value": "{global.content.color.secondary.default}",
               "type": "color"
-            },
-            "default--reverse": {
-              "value": "{global.content.color.text.default--reverse}",
-              "type": "color"
             }
           },
-          "terciary": {
-            "default": {
-              "value": "{global.content.color.primary.subtle}",
-              "type": "color"
-            },
-            "hover": {
-              "value": "{global.content.color.primary.emphasis}",
-              "type": "color"
-            },
-            "down": {
-              "value": "{global.content.color.primary.subtle}",
-              "type": "color"
-            },
-            "default--reverse": {
-              "value": "{global.content.color.text.muted}",
-              "type": "color"
-            }
-          },
-          "phatic": {
+          "ghost": {
             "default": {
-              "value": "{global.content.color.negative.default}",
-              "type": "color"
-            },
-            "hover": {
-              "value": "{global.content.color.text.default--reverse}",
-              "type": "color"
-            },
-            "down": {
-              "value": "{global.content.color.negative.default}",
-              "type": "color"
-            },
-            "hover--reverse": {
-              "value": "{global.content.color.negative.emphasis}",
+              "value": "{global.content.color.secondary.default}",
               "type": "color"
             }
           }
@@ -2311,101 +2273,41 @@
               "type": "color"
             },
             "hover": {
-              "value": "{global.background.color.primary.emphasis}",
-              "type": "color"
-            },
-            "down": {
               "value": "{global.background.color.primary.default}",
               "type": "color"
             },
-            "default--reverse": {
-              "value": "{global.background.color.transparent}",
+            "pressed": {
+              "value": "{global.background.color.primary.emphasis}",
               "type": "color"
             },
-            "hover--reverse": {
-              "value": "{global.background.color.primary.subtle}",
+            "selected": {
+              "value": "{global.background.color.primary.muted}",
               "type": "color"
             },
-            "down--reverse": {
-              "value": "{global.background.color.transparent}",
+            "focus": {
+              "value": "{global.background.color.primary.default}",
               "type": "color"
             }
           },
-          "secondary": {
+          "ghost": {
             "default": {
-              "value": "{global.background.color.secondary.default}",
-              "type": "color"
-            },
-            "hover": {
-              "value": "{global.background.color.secondary.emphasis}",
-              "type": "color"
-            },
-            "down": {
-              "value": "{global.background.color.secondary.default}",
-              "type": "color"
-            },
-            "default--reverse": {
-              "value": "{global.background.color.transparent}",
-              "type": "color"
-            },
-            "hover--reverse": {
-              "value": "{global.background.color.secondary.subtle}",
-              "type": "color"
-            },
-            "down--reverse": {
               "value": "{global.background.color.transparent}",
               "type": "color"
-            }
-          },
-          "terciary": {
-            "default": {
-              "value": "{global.background.color.surface.subtle}",
-              "type": "color"
             },
             "hover": {
-              "value": "{global.background.color.surface.muted}",
-              "type": "color"
-            },
-            "down": {
-              "value": "{global.background.color.surface.subtle}",
-              "type": "color"
-            },
-            "default-reverse": {
-              "value": "{global.background.color.transparent}",
-              "type": "color"
-            },
-            "hover-reverse": {
               "value": "{global.background.color.primary.subtle}",
               "type": "color"
             },
-            "down-reverse": {
-              "value": "{global.background.color.transparent}",
-              "type": "color"
-            }
-          },
-          "phatic": {
-            "default": {
-              "value": "{global.background.color.negative.subtle}",
-              "type": "color"
-            },
-            "hover": {
-              "value": "{global.background.color.negative.default}",
-              "type": "color"
-            },
-            "down": {
-              "value": "{global.background.color.negative.subtle}",
-              "type": "color"
-            },
-            "default--reverse": {
-              "value": "{global.background.color.transparent}",
+            "pressed": {
+              "value": "{global.background.color.primary.emphasis}",
               "type": "color"
             },
-            "hover--reverse": {
-              "value": "{global.background.color.negative.muted}",
+            "selected": {
+              "value": "{global.background.color.primary.muted}",
               "type": "color"
             },
-            "down--reverse": {
-              "value": "{global.background.color.transparent}",
+            "focus": {
+              "value": "{global.background.color.primary.subtle}",
               "type": "color"
             }
           }
@@ -2416,127 +2318,17 @@
           "md": {
             "value": "{global.border.radius.md}",
             "type": "borderRadius"
-          },
-          "rounded": {
-            "value": "{global.border.radius.rounded}",
-            "type": "borderRadius"
           }
         },
         "width": {
           "value": "{global.border.width.md}",
           "type": "borderWidth"
-        },
-        "color": {
-          "primary": {
-            "default": {
-              "value": "{global.border.color.primary.default}",
-              "type": "color"
-            },
-            "hover": {
-              "value": "{global.border.color.primary.emphasis}",
-              "type": "color"
-            },
-            "down": {
-              "value": "{global.border.color.primary.emphasis}",
-              "type": "color"
-            },
-            "default--reverse": {
-              "value": "{global.border.color.transparent}",
-              "type": "color"
-            },
-            "hover--reverse": {
-              "value": "{global.border.color.primary.subtle}",
-              "type": "color"
-            },
-            "down--reverse": {
-              "value": "{global.border.color.primary.subtle}",
-              "type": "color"
-            }
-          },
-          "secondary": {
-            "default": {
-              "value": "{global.border.color.secondary.default}",
-              "type": "color"
-            },
-            "hover": {
-              "value": "{global.border.color.secondary.emphasis}",
-              "type": "color"
-            },
-            "down": {
-              "value": "{global.border.color.secondary.emphasis}",
-              "type": "color"
-            },
-            "default-reverse": {
-              "value": "{global.border.color.transparent}",
-              "type": "color"
-            },
-            "hover-reverse": {
-              "value": "{global.border.color.secondary.subtle}",
-              "type": "color"
-            },
-            "down-reverse": {
-              "value": "{global.border.color.secondary.subtle}",
-              "type": "color"
-            }
-          },
-          "terciary": {
-            "default": {
-              "value": "{global.border.color.line.subtle}",
-              "type": "color"
-            },
-            "hover": {
-              "value": "{global.border.color.line.muted}",
-              "type": "color"
-            },
-            "down": {
-              "value": "{global.border.color.line.muted}",
-              "type": "color"
-            },
-            "default-reverse": {
-              "value": "{global.border.color.transparent}",
-              "type": "color"
-            },
-            "hover--reverse": {
-              "value": "{global.border.color.primary.subtle}",
-              "type": "color"
-            },
-            "down--reverse": {
-              "value": "{global.border.color.primary.subtle}",
-              "type": "color"
-            }
-          },
-          "phatic": {
-            "default": {
-              "value": "{global.border.color.negative.subtle}",
-              "type": "color"
-            },
-            "hover": {
-              "value": "{global.border.color.negative.default}",
-              "type": "color"
-            },
-            "down": {
-              "value": "{global.border.color.negative.default}",
-              "type": "color"
-            },
-            "default--reverse": {
-              "value": "{global.border.color.transparent}",
-              "type": "color"
-            },
-            "hover--reverse": {
-              "value": "{global.border.color.negative.muted}",
-              "type": "color"
-            },
-            "down--reverse": {
-              "value": "{global.border.color.negative.subtle}",
-              "type": "color"
-            }
-          }
         }
       },
       "spacing": {
         "padding": {
           "md": {
-            "value": "{global.spacing.padding.xsm}",
+            "value": "{global.spacing.padding.1xsm}",
             "type": "spacing"
           },
           "sm": {
@@ -2544,6 +2336,19 @@
             "type": "spacing"
           }
         }
+      },
+      "shadow": {
+        "hover": {
+          "value": {
+            "x": "0",
+            "y": "0",
+            "blur": "4",
+            "spread": "0",
+            "color": "rgba({buttonIcon.background.color.primary.hover}, 0.80)",
+            "type": "dropShadow"
+          },
+          "type": "boxShadow"
+        }
       }
     },
     "buttonAction": {
@@ -2551,33 +2356,17 @@
         "color": {
           "primary": {
             "default": {
-              "value": "{global.content.color.secondary.muted}",
+              "value": "{global.content.color.tertiary.default}",
               "type": "color"
             },
             "hover": {
-              "value": "{global.content.color.primary.default}",
-              "type": "color"
-            },
-            "down": {
-              "value": "{global.content.color.primary.default}",
-              "type": "color"
-            },
-            "default--reverse": {
-              "value": "{global.content.color.text.subtle}",
-              "type": "color"
-            },
-            "hover--reverse": {
-              "value": "{global.content.color.text.default--reverse}",
-              "type": "color"
-            },
-            "down--reverse": {
-              "value": "{global.content.color.text.default--reverse}",
+              "value": "{global.content.color.secondary.default}",
               "type": "color"
             }
           },
           "phatic": {
             "default": {
-              "value": "{global.content.color.secondary.muted}",
+              "value": "{global.content.color.secondary.default}",
               "type": "color"
             },
             "hover": {
@@ -2609,19 +2398,10 @@
             },
             "hover": {
               "value": "{global.background.color.primary.subtle}",
-              "type": "color",
-              "$extensions": {
-                "studio.tokens": {
-                  "modify": {
-                    "type": "alpha",
-                    "value": "0.15",
-                    "space": "lch"
-                  }
-                }
-              }
+              "type": "color"
             },
-            "down": {
-              "value": "{global.background.color.primary.subtle}",
+            "pressed": {
+              "value": "{global.background.color.primary.emphasis}",
               "type": "color"
             },
             "hover--reverse": {
@@ -2916,10 +2696,29 @@
             "value": "{global.content.color.text.default}",
             "type": "color"
           },
-          "phatic": {
+          "phatic--negative": {
             "value": "{global.content.color.negative.default}",
             "type": "color"
+          },
+          "phatic--attention": {
+            "value": "{global.content.color.attention.default}",
+            "type": "color"
           }
+        },
+        "typo-": {
+          "value": {
+            "fontFamily": "{core.font.family.main}",
+            "fontWeight": "{core.font.weight.regular}",
+            "lineHeight": "{core.font.lineHeight.200}px",
+            "fontSize": "{core.font.size.50}px"
+          },
+          "type": "typography"
+        }
+      },
+      "spacing": {
+        "gap": {
+          "value": "{global.spacing.gap.sm}",
+          "type": "spacing"
         }
       }
     },
@@ -4615,7 +4414,7 @@
         },
         "color": {
           "default": {
-            "value": "{global.content.color.secondary.muted}",
+            "value": "{global.content.color.secondary.default}",
             "type": "color"
           },
           "hover": {
@@ -5152,15 +4951,8 @@
           }
         },
         "typo": {
-          "md": {
-            "value": {
-              "fontFamily": "{core.font.family.main}",
-              "fontWeight": "{core.font.weight.medium}",
-              "fontSize": "{core.font.size.75}px",
-              "lineHeight": "{core.font.lineHeight.100}"
-            },
-            "type": "typography"
-          }
+          "value": "{global.content.typo.body.sm}",
+          "type": "typography"
         }
       },
       "background": {
@@ -5292,7 +5084,7 @@
             "type": "color"
           },
           "pending-text": {
-            "value": "{global.content.color.secondary.muted}",
+            "value": "{global.content.color.secondary.default}",
             "type": "color"
           },
           "active": {