feat(data): Add and edit tokens for colors.components.menu. Add typog…

…raphy token L size for menu.label. (Menu redesign is underway in Figma.)
Sage · Mar 31, 2022 · aaaa04d · aaaa04d
1 parent 7b023ef
commit aaaa04d
Showing 1 changed file with 82 additions and 17 deletions.
diff --git a/data/tokens.json b/data/tokens.json
@@ -193,59 +193,111 @@
           },
           "summer": {
             "standard": {
+              "400": {
+                "value": "$colors.action.minor.200",
+                "type": "color",
+                "description": "menu button border"
+              },
               "500": {
                 "value": "$colors.components.menu.yang.100",
-                "type": "color"
+                "type": "color",
+                "description": "default menu button"
               },
               "600": {
                 "value": "$colors.action.major.500",
-                "type": "color"
+                "type": "color",
+                "description": "hover (with click action)"
               },
               "700": {
-                "value": "$colors.action.minor.050",
-                "type": "color"
+                "value": "$colors.action.minor.100",
+                "type": "color",
+                "description": "TO BE REMOVED"
+              },
+              "800": {
+                "value": "$colors.action.minor.100",
+                "type": "color",
+                "description": "selected menu button bg (use with 400 border)"
               }
             },
             "parent": {
               "500": {
                 "value": "$colors.components.menu.yang.100",
-                "type": "color"
+                "type": "color",
+                "description": "default menu button"
               },
               "600": {
                 "value": "$colors.action.major.500",
-                "type": "color"
+                "type": "color",
+                "description": "hover (with click action)"
               },
               "700": {
-                "value": "$colors.action.minor.050",
-                "type": "color"
+                "value": "$colors.action.minor.100",
+                "type": "color",
+                "description": "open menu item (or hover non-clickable)"
               }
             },
             "child": {
-              "400": {
+              "300": {
                 "value": "$colors.action.minor.250",
-                "type": "color"
+                "type": "color",
+                "description": "menu divider"
+              },
+              "400": {
+                "value": "$colors.action.minor.200",
+                "type": "color",
+                "description": "menu button border"
               },
               "500": {
                 "value": "$colors.action.minor.100",
-                "type": "color"
+                "type": "color",
+                "description": "default menu button"
               },
               "600": {
                 "value": "$colors.action.major.500",
-                "type": "color"
+                "type": "color",
+                "description": "hover (with click action)"
+              },
+              "700": {
+                "value": "$colors.action.minor.100",
+                "type": "color",
+                "description": "open menu item"
+              },
+              "800": {
+                "value": "$colors.action.minor.100",
+                "type": "color",
+                "description": "selected menu button bg (use with 400 border)"
               }
             },
             "childAlt": {
-              "400": {
+              "300": {
                 "value": "$colors.action.minor.250",
-                "type": "color"
+                "type": "color",
+                "description": "menu divider"
               },
-              "500": {
+              "400": {
                 "value": "$colors.action.minor.200",
-                "type": "color"
+                "type": "color",
+                "description": "menu button border"
+              },
+              "500": {
+                "value": "$colors.action.minor.150",
+                "type": "color",
+                "description": "default menu button"
               },
               "600": {
                 "value": "$colors.action.major.500",
-                "type": "color"
+                "type": "color",
+                "description": "hover (with click action)"
+              },
+              "700": {
+                "value": "$colors.action.minor.150",
+                "type": "color",
+                "description": "open menu item"
+              },
+              "800": {
+                "value": "$colors.action.minor.150",
+                "type": "color",
+                "description": "selected menu button bg (use with 400 border)"
               }
             }
           },
@@ -2133,6 +2185,19 @@
               "paragraphSpacing": "0px"
             },
             "type": "typography"
+          },
+          "l": {
+            "value": {
+              "fontFamily": "$fontFamilies.default",
+              "fontWeight": "$fontWeights.500",
+              "lineHeight": "$lineHeights.500",
+              "fontSize": "$fontSizes.200",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px",
+              "textDecoration": "none",
+              "textCase": "none"
+            },
+            "type": "typography"
           }
         },
         "segmentTitle": {