@depersgroep/lfvp-design-tokens 0.372.0-62e12e5 → 0.372.0-989d172

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@depersgroep/lfvp-design-tokens",
-	"version": "0.372.0-62e12e5",
+	"version": "0.372.0-989d172",
 	"description": "Figma design tokens for LFVP",
 	"keywords": [
 		"design",

package/tokens/$metadata.json

@@ -10,12 +10,12 @@
     "brands/vtmgo",
     "brands/whitelabel",
     "components/avatar",
+    "components/badge",
     "components/billboard",
     "components/box",
     "components/boxcover",
-    "components/button",
     "components/button-group",
-    "components/tv-button-list",
+    "components/button",
     "components/detail-header",
     "components/dropdown-list",
     "components/form",
@@ -43,6 +43,7 @@
     "components/top-10",
     "components/top-banner",
     "components/top-of-screen",
+    "components/tv-button-list",
     "components/tv-hero",
     "components/upsell",
     "screen/large",

package/tokens/$themes.json

@@ -45,7 +45,8 @@
       "components/selectable-button": "enabled",
       "components/dropdown-list": "enabled",
       "components/tv-hero": "enabled",
-      "components/tv-button-list": "enabled"
+      "components/tv-button-list": "enabled",
+      "components/badge": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:3:7330",
     "$figmaModeId": "3:0",
@@ -98,7 +99,8 @@
       "components/selectable-button": "enabled",
       "components/dropdown-list": "enabled",
       "components/tv-hero": "enabled",
-      "components/tv-button-list": "enabled"
+      "components/tv-button-list": "enabled",
+      "components/badge": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:3:7330",
     "$figmaModeId": "3:1",
@@ -151,7 +153,8 @@
       "components/selectable-button": "enabled",
       "components/dropdown-list": "enabled",
       "components/tv-hero": "enabled",
-      "components/tv-button-list": "enabled"
+      "components/tv-button-list": "enabled",
+      "components/badge": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:3:7330",
     "$figmaModeId": "3:2",
@@ -204,7 +207,8 @@
       "components/selectable-button": "enabled",
       "components/dropdown-list": "enabled",
       "components/tv-hero": "enabled",
-      "components/tv-button-list": "enabled"
+      "components/tv-button-list": "enabled",
+      "components/badge": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:3:7330",
     "$figmaModeId": "3:3",
@@ -216,8 +220,7 @@
     "name": "small",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "screen/small": "enabled",
-      "components/tv-button-list": "disabled"
+      "screen/small": "enabled"
     },
     "$figmaVariableReferences": {},
     "$figmaCollectionId": "VariableCollectionId:3:8038",
@@ -229,8 +232,7 @@
     "name": "medium",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "screen/medium": "enabled",
-      "components/tv-button-list": "disabled"
+      "screen/medium": "enabled"
     },
     "$figmaVariableReferences": {},
     "$figmaCollectionId": "VariableCollectionId:3:8038",
@@ -242,8 +244,7 @@
     "name": "large",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "screen/large": "enabled",
-      "components/tv-button-list": "disabled"
+      "screen/large": "enabled"
     },
     "$figmaVariableReferences": {},
     "$figmaCollectionId": "VariableCollectionId:3:8038",
@@ -255,8 +256,7 @@
     "name": "tv",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "screen/tv": "enabled",
-      "components/tv-button-list": "disabled"
+      "screen/tv": "enabled"
     },
     "$figmaVariableReferences": {},
     "$figmaCollectionId": "VariableCollectionId:3:8038",

package/tokens/components/badge.json

@@ -0,0 +1,108 @@
+{
+  "badge": {
+    "small": {
+      "label": {
+        "$type": "typography",
+        "$value": "{base.typography.meta.bold}"
+      },
+      "horizontalPadding": {
+        "$type": "spacing",
+        "$value": "{badge.small.fontSize}/3"
+      },
+      "gap": {
+        "$type": "spacing",
+        "$value": "{badge.small.fontSize}/3"
+      },
+      "margin": {
+        "$type": "spacing",
+        "$value": "{badge.small.fontSize}/3"
+      },
+      "verticalPadding": {
+        "$type": "spacing",
+        "$value": "{badge.small.fontSize}/6"
+      },
+      "borderRadius": {
+        "$type": "borderRadius",
+        "$value": "{badge.small.fontSize}/3"
+      },
+      "iconSize": {
+        "$type": "sizing",
+        "$value": "{badge.small.fontSize}*1.4"
+      },
+      "fontSize": {
+        "$type": "fontSizes",
+        "$value": "{core.fontSize.12}*{scale.text}"
+      },
+      "height": {
+        "$type": "sizing",
+        "$value": "{badge.small.fontSize}*1.8"
+      }
+    },
+    "medium": {
+      "label": {
+        "$type": "typography",
+        "$value": "{base.typography.text.bold.xSmall}"
+      },
+      "horizontalPadding": {
+        "$type": "spacing",
+        "$value": "{badge.medium.fontSize}/3"
+      },
+      "gap": {
+        "$type": "spacing",
+        "$value": "{badge.medium.fontSize}/3"
+      },
+      "margin": {
+        "$type": "spacing",
+        "$value": "{badge.medium.fontSize}/3"
+      },
+      "verticalPadding": {
+        "$type": "spacing",
+        "$value": "{badge.medium.fontSize}/3"
+      },
+      "borderRadius": {
+        "$type": "borderRadius",
+        "$value": "{badge.medium.fontSize}/3"
+      },
+      "iconSize": {
+        "$type": "sizing",
+        "$value": "{badge.medium.fontSize}*1.4"
+      },
+      "height": {
+        "$type": "sizing",
+        "$value": "{badge.medium.fontSize}*2.1"
+      },
+      "fontSize": {
+        "$type": "fontSizes",
+        "$value": "{core.fontSize.13}* {scale.text}"
+      }
+    },
+    "default": {
+      "backgroundColor": {
+        "$type": "color",
+        "$value": "{base.color.ui.fade4}"
+      },
+      "iconColor": {
+        "$type": "color",
+        "$value": "{base.color.primary.default}"
+      },
+      "textColor": {
+        "$type": "color",
+        "$value": "{base.color.text.default}"
+      }
+    },
+    "highlight": {
+      "backgroundColor": {
+        "$type": "color",
+        "$value": "{base.color.primary.darker}"
+      },
+      "iconColor": {
+        "$type": "color",
+        "$value": "{base.color.ui.white}"
+      },
+      "textColor": {
+        "$type": "color",
+        "$value": "{base.color.ui.white}"
+      }
+    }
+  }
+}

package/tokens/components/detail-header.json

@@ -1,12 +1,25 @@
 {
   "detailHeader": {
-    "title": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "{base.heroFont}",
-        "fontWeight": "{base.fontWeight.title}",
-        "lineHeight": "{core.lineHeight.120}",
-        "fontSize": "{core.fontSize.24}*{scale.title}"
+    "level1": {
+      "title": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "{base.heroFont}",
+          "fontWeight": "{base.fontWeight.title}",
+          "lineHeight": "{core.lineHeight.120}",
+          "fontSize": "{core.fontSize.24}*{scale.title}"
+        }
+      }
+    },
+    "level2": {
+      "title": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "{base.heroFont}",
+          "fontWeight": "{base.fontWeight.title}",
+          "lineHeight": "{core.lineHeight.120}",
+          "fontSize": "{core.fontSize.20} *{scale.title}"
+        }
       }
     }
   }

package/tokens/components/input.json

@@ -100,10 +100,6 @@
       "borderWidth": {
         "$type": "borderWidth",
         "$value": "{base.ui.borderWidth.fixed.bw3}"
-      },
-      "borderWidth-copy": {
-        "$type": "borderWidth",
-        "$value": "{base.ui.borderWidth.fixed.bw3}"
       }
     },
     "padding": {

package/tokens/components/tv-button-list.json

@@ -1,50 +1,114 @@
 {
   "tvButtonList": {
-    "inactive": {
-      "backgroundColor": {
-        "$type": "color",
-        "$value": "transparent"
-      },
-      "textColor": {
-        "$type": "color",
-        "$value": "{core.color.lightAlpha.70}"
-      },
-      "iconColor": {
-        "$type": "color",
-        "$value": "{core.color.lightAlpha.70}"
+    "gap": {
+      "$type": "spacing",
+      "$value": "{base.ui.spacing.fixed.sp4}"
+    }
+  },
+  "tvSelectableButtonList": {
+    "unselected": {
+      "normal": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "transparent"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.lightAlpha.70}"
+        }
+      },
+      "hover": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.normal}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
+        }
+      },
+      "active": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.normal}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
+        }
+      },
+      "disabled": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "transparent"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.lightAlpha.40}"
+        }
+      },
+      "focus": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.normal}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
+        }
       }
     },
     "selected": {
-      "backgroundColor": {
-        "$type": "color",
-        "$value": "{base.colorSet.interaction.normal}"
+      "normal": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{core.color.softAlpha.50}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.color.text.default}"
+        }
       },
-      "textColor": {
-        "$type": "color",
-        "$value": "{base.colorSet.interaction.onNormal}"
+      "hover": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.normal}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
+        }
       },
-      "iconColor": {
-        "$type": "color",
-        "$value": "{base.colorSet.interaction.onNormal}"
-      }
-    },
-    "active": {
-      "backgroundColor": {
-        "$type": "color",
-        "$value": "{core.color.softAlpha.50}"
-      },
-      "textColor": {
-        "$type": "color",
-        "$value": "{base.color.text.default}"
-      },
-      "iconColor": {
-        "$type": "color",
-        "$value": "{base.color.text.default}"
+      "active": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.normal}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
+        }
+      },
+      "disabled": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "transparent"
+        },
+        "iconColor": {
+          "$type": "color",
+          "$value": "{core.color.lightAlpha.40}"
+        }
+      },
+      "focus": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.normal}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
+        }
       }
-    },
-    "gap": {
-      "$type": "spacing",
-      "$value": "{base.ui.spacing.fixed.sp2}"
     }
   }
 }