545 form label rename tokens (#761)

* fix(tokens): moves and renames label tokens are renamed to component name and moved into component sets * feat: adds FormLabel to style-dictionary.config * fix: apply renamed tokens to forms.css * feat(tokens) moving label colors to CMP forms.label.[state] stays in SEM but will not be applied onto component anymore * fix: replaces Forms.Label with Forms.FormLabel Also fixes LabelNextToControl colors in multiple files. * fix(tokens): move nextToConrol from SEM to CMP also renames to InlineLabel * fix: fix occurances of labelNextToControl This typotoken moved to CMP and was renamed to ..LabelInline.Typography. * moved checkbox css changes to component css file and deleted global * removed comma * readded correct tokens to checkbox * fixed radio css file --------- Co-authored-by: larserbach <larserbach@users.noreply.github.com>
deven-org · Jan 10, 2024 · c51a1ea · c51a1ea
1 parent faa878a
commit c51a1ea
Show file tree

Hide file tree

Showing 10 changed files with 338 additions and 282 deletions.
diff --git a/packages/figma-design-tokens/config/style-dictionary.config.cjs b/packages/figma-design-tokens/config/style-dictionary.config.cjs
@@ -52,9 +52,7 @@ const semanticTypes = [
   'Input',
   'InputSlot',
   'InputField',
-  'LabelAppendix',
   'InputIcon',
-  'LabelNextToControl',
   'Focus',
   'FocusBorder',
   'Feedback',
@@ -88,6 +86,7 @@ const componentTypes = [
   'RadioGroup',
   'NumberInput',
   'CaptionGroup',
+  'FormLabel',
 ];
 
 StyleDictionaryPackage.registerFormat({

diff --git a/packages/figma-design-tokens/input/tokens/$themes.json b/packages/figma-design-tokens/input/tokens/$themes.json
@@ -407,25 +407,16 @@
       "UI.Paragraph.MD.Strong": "S:cdff36a527c51acde9b52e403b94643a518158ed,",
       "UI.Paragraph.LG.Regular": "S:57a4a02f314bb61628570a283653b72c652927f5,",
       "UI.Paragraph.LG.Strong": "S:91fd88531e27f6eefb2fd56287fc8a5a6bb93212,",
-      "Forms.SM.Label": "S:d1491d917c3fb00f2675edcf5f13f4ec57d84e4f,",
-      "Forms.SM.LabelAppendix": "S:5a135b52685cd8abf90367a9309fe35e3e0bb4a1,",
       "Forms.SM.Caption": "S:ad64671fb624f6be67b8b604eccacb865c1852f9,",
       "Forms.SM.UserInput": "S:af57cfdcc52793d0569223d8bf4bf8ac880e2015,",
-      "Forms.SM.LabelNextToControl": "S:9b981b84cd9a9bbf5336ea925f8f5643f89dae23,",
       "Forms.SM.Placeholder": "S:200500dd22b47a44bdbb9a063a5648645636100e,",
       "Forms.SM.Legend": "S:2a315291cc6b57966f2e6d771abab6b3f448bc46,",
-      "Forms.MD.Label": "S:d9f72d9686b0b5757ef6e1264fdf12d45058b3a2,",
-      "Forms.MD.LabelAppendix": "S:915778981c2f87b6745d010a702021ce5458f930,",
       "Forms.MD.Caption": "S:6a8b8b4db396259fe2a4d0c3db8e6ad250c3b235,",
       "Forms.MD.UserInput": "S:26a8789c26fbebc9c1c7307831dff2786a33f237,",
-      "Forms.MD.LabelNextToControl": "S:56e55ec39910955bce0158291c3e1cd00527f09f,",
       "Forms.MD.Placeholder": "S:3fa51f577928fe02fea3550c26690945a84b47d6,",
       "Forms.MD.Legend": "S:3a8f82a7837b05bb6f6393ad8bc8780df3b23340,",
-      "Forms.LG.Label": "S:0e79577d538ea1a8e2c7ad7a580d13597bf10980,",
-      "Forms.LG.LabelAppendix": "S:484b96fd639f11c71a3996cbb6f7e892aee6c28a,",
       "Forms.LG.Caption": "S:43158490c89c47463f23e620475dc1e69c04064f,",
       "Forms.LG.UserInput": "S:06bb3cc1a05e9bb2e0ddadb8c5469c70d8f6e197,",
-      "Forms.LG.LabelNextToControl": "S:64d3060405dff6b6ede6083c2a0f4b8767af2f4f,",
       "Forms.LG.Placeholder": "S:5bc4fa6aefa49257801349ff27a84dabbc1a93dc,",
       "Forms.LG.Legend": "S:c3a32433b95e0a6b72ae57496242f0fa005e160e,",
       "Forms.Slider.Legend.Typography": "S:7a0427887e207bf43eb875a884cc8e20b94637ff,",
@@ -902,15 +893,12 @@
       "Forms.SM.CaptionComponent.IconDimension": "f5cf91673f3a3e330390327210550e1a1705a426",
       "Forms.SM.CaptionComponent.IconWrapper.PaddingTop": "01d766852ea0e2b80da8eccc38e4e7ed770996e5",
       "Forms.SM.CaptionComponent.ItemSpacing": "12a6e7b57a26136306a2829cbad00623b8e27fae",
-      "Forms.SM.LabelComponent.ItemSpacing": "b95c4cb7273103216bb9f475b40482c69a906724",
       "Forms.MD.CaptionComponent.IconDimension": "4ff426a51a45e94183d5699530e25e162f1db9cb",
       "Forms.MD.CaptionComponent.IconWrapper.PaddingTop": "0a2bb68de09f8f79400ac71ad4fd5c45533aa556",
       "Forms.MD.CaptionComponent.ItemSpacing": "c316c369b75e52d1b41dca706b2c80723d97d475",
-      "Forms.MD.LabelComponent.ItemSpacing": "9f332681b5d6aeb5257e8b7c81927ebf838bf962",
       "Forms.LG.CaptionComponent.IconDimension": "0400899b2c7af67af03ea09e8012635e6f9b6c67",
       "Forms.LG.CaptionComponent.IconWrapper.PaddingTop": "775b16d13a004b18d9850eb2fc2bab205f69972d",
       "Forms.LG.CaptionComponent.ItemSpacing": "ef5c2ca2ccdbbe520a71c9afdfb2b39856393000",
-      "Forms.LG.LabelComponent.ItemSpacing": "f61dee5fef7e7f2a1e8801625057884241025971",
       "Forms.InputBorderRadius": "07a575beef9450c94f5d81603c0ba28107f0cf0d",
       "Actions.Container.BorderRadius.XS": "5e36961684d366416c29f0c3ceab97ef34d36700",
       "Actions.Container.BorderRadius.SM": "55b3976767f81cfcafe60433a2cfbd84990d9fca",
@@ -1851,25 +1839,16 @@
       "UI.Paragraph.MD.Strong": "S:6475946425bcec71339e41231fffeca957c3319b,",
       "UI.Paragraph.LG.Regular": "S:e9912860a15fbf017afa65603ae154f131984ca0,",
       "UI.Paragraph.LG.Strong": "S:9d5f065b8b3b0b0711eff216d8b4caebd17597e2,",
-      "Forms.SM.Label": "S:9ce37cc7fb3262673a70af4700bcea3c49369918,",
-      "Forms.SM.LabelAppendix": "S:144af41e74f1b62df1aae60ada7d14629dae5436,",
       "Forms.SM.Caption": "S:3abddbd314a38e5662c5889e7d43735ef39c4869,",
       "Forms.SM.UserInput": "S:df299f8567b892ddeb56aaf7802550d3841f1978,",
-      "Forms.SM.LabelNextToControl": "S:b978d4ea340b616342c8fdce4fb427453f4fc685,",
       "Forms.SM.Placeholder": "S:15b5d4d78af5a8a93d50655940c612f1ff66f11e,",
       "Forms.SM.Legend": "S:ba5613e8295dffa3c547f453c29ecee24073ebd3,",
-      "Forms.MD.Label": "S:e3f30dc9dd0350c21bb2a993a5d12851dd708d6d,",
-      "Forms.MD.LabelAppendix": "S:85fb5b874f3b2408db9606af618dbcc84b149c9e,",
       "Forms.MD.Caption": "S:aa08845e5b29546e14f0e83b6ddc7e64881adbfa,",
       "Forms.MD.UserInput": "S:9fa8b24db72382275c2f5f74a78c2af4617c508e,",
-      "Forms.MD.LabelNextToControl": "S:a4d2baabb12a97a5ad6ed4879d2573227d3770a0,",
       "Forms.MD.Placeholder": "S:86ea3f492ff102066dc8f9449440913cb50a3fba,",
       "Forms.MD.Legend": "S:fd0a59e518d4e3e420a3853033de5ed972d18e2f,",
-      "Forms.LG.Label": "S:f2aa1c95e54f7facb5b1799825ea7b941ab3d002,",
-      "Forms.LG.LabelAppendix": "S:ca5e35e2301a4a7b9eb8fdf2f1ca05413a3cc89d,",
       "Forms.LG.Caption": "S:114c883cdc1f8dba85eaf3c260b8b9b1f7ef8b80,",
       "Forms.LG.UserInput": "S:736422e401d2d9b4c3a0070ed3c673467822f16c,",
-      "Forms.LG.LabelNextToControl": "S:d53e8a76b99327aa364397e676c8b1dea67d6eb1,",
       "Forms.LG.Placeholder": "S:6e252933aba99af8ddb04a9fb3dbecd572021a0a,",
       "Forms.LG.Legend": "S:f3b0e14420e0b929cf7510646435d0ba22b88c1d,",
       "Forms.Slider.Legend.Typography": "S:f1cbfbfcdd35cd83a8188bd9a2ea6da15d981fe3,",
@@ -2429,15 +2408,12 @@
       "Forms.SM.CaptionComponent.IconDimension": "f5cf91673f3a3e330390327210550e1a1705a426",
       "Forms.SM.CaptionComponent.IconWrapper.PaddingTop": "01d766852ea0e2b80da8eccc38e4e7ed770996e5",
       "Forms.SM.CaptionComponent.ItemSpacing": "12a6e7b57a26136306a2829cbad00623b8e27fae",
-      "Forms.SM.LabelComponent.ItemSpacing": "b95c4cb7273103216bb9f475b40482c69a906724",
       "Forms.MD.CaptionComponent.IconDimension": "4ff426a51a45e94183d5699530e25e162f1db9cb",
       "Forms.MD.CaptionComponent.IconWrapper.PaddingTop": "0a2bb68de09f8f79400ac71ad4fd5c45533aa556",
       "Forms.MD.CaptionComponent.ItemSpacing": "c316c369b75e52d1b41dca706b2c80723d97d475",
-      "Forms.MD.LabelComponent.ItemSpacing": "9f332681b5d6aeb5257e8b7c81927ebf838bf962",
       "Forms.LG.CaptionComponent.IconDimension": "0400899b2c7af67af03ea09e8012635e6f9b6c67",
       "Forms.LG.CaptionComponent.IconWrapper.PaddingTop": "775b16d13a004b18d9850eb2fc2bab205f69972d",
       "Forms.LG.CaptionComponent.ItemSpacing": "ef5c2ca2ccdbbe520a71c9afdfb2b39856393000",
-      "Forms.LG.LabelComponent.ItemSpacing": "f61dee5fef7e7f2a1e8801625057884241025971",
       "Forms.InputBorderRadius": "07a575beef9450c94f5d81603c0ba28107f0cf0d",
       "Actions.Container.BorderRadius.XS": "5e36961684d366416c29f0c3ceab97ef34d36700",
       "Actions.Container.BorderRadius.SM": "55b3976767f81cfcafe60433a2cfbd84990d9fca",

diff --git a/packages/figma-design-tokens/input/tokens/color/CMP.json b/packages/figma-design-tokens/input/tokens/color/CMP.json
@@ -1045,6 +1045,104 @@
           }
         }
       }
+    },
+    "FormLabel": {
+      "Label": {
+        "TextColor": {
+          "Rest": {
+            "value": "{Forms.Label.Rest}",
+            "type": "color"
+          },
+          "Hover": {
+            "value": "{Forms.Label.Hover}",
+            "type": "color"
+          },
+          "Pressed": {
+            "value": "{Forms.Label.Pressed}",
+            "type": "color"
+          },
+          "Focus": {
+            "value": "{Forms.Label.Focus}",
+            "type": "color"
+          },
+          "Disabled": {
+            "value": "{Forms.Label.Disabled}",
+            "type": "color"
+          },
+          "ReadOnly": {
+            "value": "{Forms.Label.ReadOnly}",
+            "type": "color"
+          },
+          "Error": {
+            "value": "{Forms.Label.Error}",
+            "type": "color"
+          }
+        }
+      },
+      "LabelAppendix": {
+        "TextColor": {
+          "Rest": {
+            "value": "{Forms.Label.Rest}",
+            "type": "color"
+          },
+          "Hover": {
+            "value": "{Forms.Label.Hover}",
+            "type": "color"
+          },
+          "Pressed": {
+            "value": "{Forms.Label.Pressed}",
+            "type": "color"
+          },
+          "Focus": {
+            "value": "{Forms.Label.Focus}",
+            "type": "color"
+          },
+          "Disabled": {
+            "value": "{Forms.Label.Disabled}",
+            "type": "color"
+          },
+          "ReadOnly": {
+            "value": "{Forms.Label.ReadOnly}",
+            "type": "color"
+          },
+          "Error": {
+            "value": "{Forms.Label.Error}",
+            "type": "color"
+          }
+        }
+      },
+      "InlineLabel": {
+        "TextColor": {
+          "Rest": {
+            "value": "{Forms.Label.Rest}",
+            "type": "color"
+          },
+          "Hover": {
+            "value": "{Forms.Label.Hover}",
+            "type": "color"
+          },
+          "Pressed": {
+            "value": "{Forms.Label.Pressed}",
+            "type": "color"
+          },
+          "Focus": {
+            "value": "{Forms.Label.Focus}",
+            "type": "color"
+          },
+          "Disabled": {
+            "value": "{Forms.Label.Disabled}",
+            "type": "color"
+          },
+          "ReadOnly": {
+            "value": "{Forms.Label.ReadOnly}",
+            "type": "color"
+          },
+          "Error": {
+            "value": "{Forms.Label.Error}",
+            "type": "color"
+          }
+        }
+      }
     }
   },
   "UI": {

diff --git a/packages/figma-design-tokens/input/tokens/color/SEM.json b/packages/figma-design-tokens/input/tokens/color/SEM.json
@@ -874,36 +874,6 @@
         "type": "color"
       }
     },
-    "LabelAppendix": {
-      "Rest": {
-        "value": "{q.content.ondefault.alpha}",
-        "type": "color"
-      },
-      "Hover": {
-        "value": "{q.content.ondefault.alpha}",
-        "type": "color"
-      },
-      "Pressed": {
-        "value": "{q.content.ondefault.alpha}",
-        "type": "color"
-      },
-      "Focus": {
-        "value": "{q.content.ondefault.alpha}",
-        "type": "color"
-      },
-      "Disabled": {
-        "value": "{q.content.ondisabled.alpha}",
-        "type": "color"
-      },
-      "ReadOnly": {
-        "value": "{q.content.ondefault.alpha}",
-        "type": "color"
-      },
-      "Error": {
-        "value": "{q.content.ondefault.error}",
-        "type": "color"
-      }
-    },
     "Caption": {
       "Error": {
         "value": "{q.content.ondefault.error}",
@@ -1124,36 +1094,6 @@
         "type": "color"
       }
     },
-    "LabelNextToControl": {
-      "Rest": {
-        "value": "{q.content.ondefault.alpha}",
-        "type": "color"
-      },
-      "Hover": {
-        "value": "{q.content.ondefault.alpha}",
-        "type": "color"
-      },
-      "Pressed": {
-        "value": "{q.content.ondefault.alpha}",
-        "type": "color"
-      },
-      "Focus": {
-        "value": "{q.content.ondefault.alpha}",
-        "type": "color"
-      },
-      "Disabled": {
-        "value": "{q.content.ondisabled.alpha}",
-        "type": "color"
-      },
-      "ReadOnly": {
-        "value": "{q.content.ondefault.alpha}",
-        "type": "color"
-      },
-      "Error": {
-        "value": "{q.content.ondefault.error}",
-        "type": "color"
-      }
-    },
     "Legend": {
       "Default": {
         "value": "{q.content.ondefault.alpha}",