#544 form caption rename tokens (#801)

* renames form caption tokens and moves them to CMP * Defines semantic caption tokens * adds CMP counter typo tokens * fix Referencing UI.Caption for typo now * Moves captionComponent css from form.css to captionComponent index.css Renames tokens * fix: tokens on counter component * fix: rename tokens in radio.css (We should check if caption tokens are really needed here) * minor adjustment --------- Co-authored-by: larserbach <larserbach@users.noreply.github.com>
deven-org · Jan 17, 2024 · f0a24d8 · f0a24d8
1 parent aa6c7fa
commit f0a24d8
Show file tree

Hide file tree

Showing 10 changed files with 476 additions and 221 deletions.
diff --git a/packages/figma-design-tokens/config/style-dictionary.config.cjs b/packages/figma-design-tokens/config/style-dictionary.config.cjs
@@ -85,6 +85,7 @@ const componentTypes = [
   'Tooltip',
   'RadioGroup',
   'NumberInput',
+  'CaptionComponent',
   'CaptionGroup',
   'FormLabel',
 ];

diff --git a/packages/figma-design-tokens/input/tokens/$themes.json b/packages/figma-design-tokens/input/tokens/$themes.json
diff --git a/packages/figma-design-tokens/input/tokens/color/CMP.json b/packages/figma-design-tokens/input/tokens/color/CMP.json
@@ -1155,6 +1155,32 @@
           }
         }
       }
+    },
+    "CaptionComponent": {
+      "Text": {
+        "TextColor": {
+          "Hint": {
+            "value": "{Forms.Caption.Hint}",
+            "type": "color"
+          },
+          "Error": {
+            "value": "{Forms.Caption.Error}",
+            "type": "color"
+          }
+        }
+      },
+      "Icon": {
+        "IconColor": {
+          "Hint": {
+            "value": "{Forms.Caption.Hint}",
+            "type": "color"
+          },
+          "Error": {
+            "value": "{Forms.Caption.Error}",
+            "type": "color"
+          }
+        }
+      }
     }
   },
   "UI": {

diff --git a/packages/figma-design-tokens/input/tokens/dimensions/CMP.json b/packages/figma-design-tokens/input/tokens/dimensions/CMP.json
@@ -939,6 +939,22 @@
             "type": "spacing"
           }
         }
+      },
+      "Text": {
+        "Typography": {
+          "SM": {
+            "value": "{UI.Caption.SM}",
+            "type": "typography"
+          },
+          "MD": {
+            "value": "{UI.Caption.MD}",
+            "type": "typography"
+          },
+          "LG": {
+            "value": "{UI.Caption.LG}",
+            "type": "typography"
+          }
+        }
       }
     },
     "Tooltip": {
@@ -1070,6 +1086,159 @@
     }
   },
   "Forms": {
+    "CaptionComponent": {
+      "Container": {
+        "ItemSpacing": {
+          "SM": {
+            "value": "{core.dimensionREM.2}",
+            "type": "spacing"
+          },
+          "MD": {
+            "value": "{core.dimensionREM.2}",
+            "type": "spacing"
+          },
+          "LG": {
+            "value": "{core.dimensionREM.2}",
+            "type": "spacing"
+          }
+        },
+        "PaddingLeftRight": {
+          "SM": {
+            "value": "{core.dimensionPX.0}",
+            "type": "spacing"
+          },
+          "MD": {
+            "value": "{core.dimensionPX.0}",
+            "type": "spacing"
+          },
+          "LG": {
+            "value": "{core.dimensionPX.0}",
+            "type": "spacing"
+          }
+        },
+        "PaddingTopBottom": {
+          "SM": {
+            "value": "{core.dimensionREM.0}",
+            "type": "spacing"
+          },
+          "MD": {
+            "value": "{core.dimensionREM.0}",
+            "type": "spacing"
+          },
+          "LG": {
+            "value": "{core.dimensionREM.0}",
+            "type": "spacing"
+          }
+        },
+        "Padding": {
+          "SM": {
+            "value": "{Forms.CaptionComponent.Container.PaddingTopBottom.SM} {Forms.CaptionComponent.Container.PaddingLeftRight.SM}",
+            "type": "spacing"
+          },
+          "MD": {
+            "value": "{Forms.CaptionComponent.Container.PaddingTopBottom.MD} {Forms.CaptionComponent.Container.PaddingLeftRight.MD}",
+            "type": "spacing"
+          },
+          "LG": {
+            "value": "{Forms.CaptionComponent.Container.PaddingTopBottom.LG} {Forms.CaptionComponent.Container.PaddingLeftRight.LG}",
+            "type": "spacing"
+          }
+        }
+      },
+      "IconWrapper": {
+        "PaddingTop": {
+          "SM": {
+            "value": "{core.dimensionREM.1}",
+            "type": "spacing"
+          },
+          "MD": {
+            "value": "{core.dimensionREM.0,5}",
+            "type": "spacing"
+          },
+          "LG": {
+            "value": "{core.dimensionREM.5}",
+            "type": "spacing"
+          }
+        }
+      },
+      "Icon": {
+        "IconSize": {
+          "SM": {
+            "value": "{core.dimensionREM.14}",
+            "type": "sizing",
+            "description": "Defines the physical size of the icon inside the captionComponent"
+          },
+          "MD": {
+            "value": "{core.dimensionREM.16}",
+            "type": "sizing"
+          },
+          "LG": {
+            "value": "{core.dimensionREM.16}",
+            "type": "sizing"
+          }
+        }
+      },
+      "TextWrapper": {
+        "PaddingLeftRight": {
+          "SM": {
+            "value": "{core.dimensionPX.0}",
+            "type": "spacing"
+          },
+          "MD": {
+            "value": "{core.dimensionPX.0}",
+            "type": "spacing"
+          },
+          "LG": {
+            "value": "{core.dimensionPX.0}",
+            "type": "spacing"
+          }
+        },
+        "PaddingTopBottom": {
+          "SM": {
+            "value": "{core.dimensionREM.0}",
+            "type": "spacing"
+          },
+          "MD": {
+            "value": "{core.dimensionREM.0}",
+            "type": "spacing"
+          },
+          "LG": {
+            "value": "{core.dimensionREM.0}",
+            "type": "spacing"
+          }
+        },
+        "Padding": {
+          "SM": {
+            "value": "{Forms.CaptionComponent.TextWrapper.PaddingTopBottom.SM} {Forms.CaptionComponent.TextWrapper.PaddingLeftRight.SM}",
+            "type": "spacing"
+          },
+          "MD": {
+            "value": "{Forms.CaptionComponent.TextWrapper.PaddingTopBottom.MD} {Forms.CaptionComponent.TextWrapper.PaddingLeftRight.MD}",
+            "type": "spacing"
+          },
+          "LG": {
+            "value": "{Forms.CaptionComponent.TextWrapper.PaddingTopBottom.LG} {Forms.CaptionComponent.TextWrapper.PaddingLeftRight.LG}",
+            "type": "spacing"
+          }
+        }
+      },
+      "Text": {
+        "Typography": {
+          "SM": {
+            "value": "{UI.Caption.SM}",
+            "type": "typography"
+          },
+          "MD": {
+            "value": "{UI.Caption.MD}",
+            "type": "typography"
+          },
+          "LG": {
+            "value": "{UI.Caption.LG}",
+            "type": "typography"
+          }
+        }
+      }
+    },
     "Checkbox": {
       "ContentCol": {
         "ItemSpacing": {

diff --git a/packages/figma-design-tokens/input/tokens/dimensions/SEM.json b/packages/figma-design-tokens/input/tokens/dimensions/SEM.json
@@ -421,36 +421,6 @@
   },
   "Forms": {
     "SM": {
-      "Caption": {
-        "value": "{core.typography.sourceSansPro.regular.75FixHeight}",
-        "type": "typography"
-      },
-      "CaptionComponent": {
-        "CaptionLabelWrapper": {
-          "Padding": {
-            "value": "{core.dimensionREM.0} {core.dimensionPX.0}",
-            "type": "spacing"
-          }
-        },
-        "IconDimension": {
-          "value": "{core.dimensionREM.14}",
-          "type": "sizing"
-        },
-        "IconWrapper": {
-          "PaddingTop": {
-            "value": "{core.dimensionREM.1}",
-            "type": "spacing"
-          }
-        },
-        "ItemSpacing": {
-          "value": "{core.dimensionREM.2}",
-          "type": "spacing"
-        },
-        "Padding": {
-          "value": "{core.dimensionREM.0} {core.dimensionPX.0}",
-          "type": "spacing"
-        }
-      },
       "CaptionSlot": {
         "Margin": {
           "value": "{core.dimensionREM.8} {core.dimensionPX.0} {core.dimensionREM.0} {core.dimensionPX.0}",
@@ -494,36 +464,6 @@
       }
     },
     "MD": {
-      "Caption": {
-        "value": "{core.typography.sourceSansPro.regular.87FixHeight}",
-        "type": "typography"
-      },
-      "CaptionComponent": {
-        "CaptionLabelWrapper": {
-          "Padding": {
-            "value": "{core.dimensionREM.0} {core.dimensionPX.0}",
-            "type": "spacing"
-          }
-        },
-        "IconDimension": {
-          "value": "{core.dimensionREM.16}",
-          "type": "sizing"
-        },
-        "IconWrapper": {
-          "PaddingTop": {
-            "value": "{core.dimensionREM.0,5}",
-            "type": "spacing"
-          }
-        },
-        "ItemSpacing": {
-          "value": "{core.dimensionREM.2}",
-          "type": "spacing"
-        },
-        "Padding": {
-          "value": "{core.dimensionREM.0} {core.dimensionPX.0}",
-          "type": "spacing"
-        }
-      },
       "CaptionSlot": {
         "Margin": {
           "value": "{core.dimensionREM.8} {core.dimensionPX.0} {core.dimensionREM.0} {core.dimensionPX.0}",
@@ -567,36 +507,6 @@
       }
     },
     "LG": {
-      "Caption": {
-        "value": "{core.typography.sourceSansPro.regular.100FixHeight}",
-        "type": "typography"
-      },
-      "CaptionComponent": {
-        "CaptionLabelWrapper": {
-          "Padding": {
-            "value": "{core.dimensionREM.0} {core.dimensionPX.0}",
-            "type": "spacing"
-          }
-        },
-        "IconDimension": {
-          "value": "{core.dimensionREM.16}",
-          "type": "sizing"
-        },
-        "IconWrapper": {
-          "PaddingTop": {
-            "value": "{core.dimensionREM.5}",
-            "type": "spacing"
-          }
-        },
-        "ItemSpacing": {
-          "value": "{core.dimensionREM.2}",
-          "type": "spacing"
-        },
-        "Padding": {
-          "value": "{core.dimensionREM.0} {core.dimensionPX.0}",
-          "type": "spacing"
-        }
-      },
       "CaptionSlot": {
         "Margin": {
           "value": "{core.dimensionREM.8} {core.dimensionPX.0} {core.dimensionREM.0} {core.dimensionPX.0}",

diff --git a/packages/ui-library/src/components/internal-components/counter/index.css.ts b/packages/ui-library/src/components/internal-components/counter/index.css.ts
@@ -1,9 +1,9 @@
 import { typeSafeNestedCss } from "../../../utils/nested-typesafe-css-literals";
 import { renderThemedCssStrings } from "../../../foundation/_tokens-generated/index.pseudo.generated";
 
-export const { tokenizedLight: counterLight, tokenizedDark: counterDark } = renderThemedCssStrings((componentTokens, semanticTokens) => {
+export const { tokenizedLight: counterLight, tokenizedDark: counterDark } = renderThemedCssStrings((componentTokens) => {
   const { Counter } = componentTokens.Feedback;
-  const { SM, MD, LG } = semanticTokens.Forms;
+  // const { SM, MD, LG } = semanticTokens.Forms;
 
   return typeSafeNestedCss`
     .blr-counter {
@@ -20,10 +20,10 @@ export const { tokenizedLight: counterLight, tokenizedDark: counterDark } = rend
         border-radius: ${Counter.Container.BorderRadius.SM};
         outline-width: ${Counter.Container.BorderWidth.SM};
 
-        font-family: ${SM.Caption.fontFamily}, sans-serif;
-        font-weight: ${SM.Caption.fontWeight};
-        font-size: ${SM.Caption.fontSize};
-        line-height: ${SM.Caption.lineHeight};
+        font-family: ${Counter.Text.Typography.SM.fontFamily}, sans-serif;
+        font-weight: ${Counter.Text.Typography.SM.fontWeight};
+        font-size: ${Counter.Text.Typography.SM.fontSize};
+        line-height: ${Counter.Text.Typography.SM.lineHeight};
       }
 
       &.md {
@@ -32,10 +32,10 @@ export const { tokenizedLight: counterLight, tokenizedDark: counterDark } = rend
         border-radius: ${Counter.Container.BorderRadius.MD};
         outline-width: ${Counter.Container.BorderWidth.MD};
 
-        font-family: ${MD.Caption.fontFamily}, sans-serif;
-        font-weight: ${MD.Caption.fontWeight};
-        font-size: ${MD.Caption.fontSize};
-        line-height: ${MD.Caption.lineHeight};
+        font-family: ${Counter.Text.Typography.MD.fontFamily}, sans-serif;
+        font-weight: ${Counter.Text.Typography.MD.fontWeight};
+        font-size: ${Counter.Text.Typography.MD.fontSize};
+        line-height: ${Counter.Text.Typography.MD.lineHeight};
       }
 
       &.lg {
@@ -44,10 +44,10 @@ export const { tokenizedLight: counterLight, tokenizedDark: counterDark } = rend
         border-radius: ${Counter.Container.BorderRadius.LG};
         outline-width: ${Counter.Container.BorderWidth.LG};
 
-        font-family: ${LG.Caption.fontFamily}, sans-serif;
-        font-weight: ${LG.Caption.fontWeight};
-        font-size: ${LG.Caption.fontSize};
-        line-height: ${LG.Caption.lineHeight};
+        font-family: ${Counter.Text.Typography.LG.fontFamily}, sans-serif;
+        font-weight: ${Counter.Text.Typography.LG.fontWeight};
+        font-size: ${Counter.Text.Typography.LG.fontSize};
+        line-height: ${Counter.Text.Typography.LG.lineHeight};
       }
 
       &.error {