npm - @depersgroep/lfvp-design-tokens - Versions diffs - 0.372.0-62e12e5 → 0.372.0-bab086c - Mend

@depersgroep/lfvp-design-tokens 0.372.0-62e12e5 → 0.372.0-bab086c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/package.json +1 -1
package/tokens/$metadata.json +3 -2
package/tokens/$themes.json +12 -12
package/tokens/components/badge.json +108 -0
package/tokens/components/input.json +0 -4
package/tokens/components/tv-button-list.json +180 -6

package/package.json CHANGED Viewed

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

package/tokens/$metadata.json CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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/input.json CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "tvButtonList": {
-    "inactive": {
+    "normal": {
       "backgroundColor": {
         "$type": "color",
         "$value": "transparent"
@@ -14,7 +14,7 @@
         "$value": "{core.color.lightAlpha.70}"
       }
     },
-    "selected": {
+    "hover": {
       "backgroundColor": {
         "$type": "color",
         "$value": "{base.colorSet.interaction.normal}"
@@ -31,20 +31,194 @@
     "active": {
       "backgroundColor": {
         "$type": "color",
-        "$value": "{core.color.softAlpha.50}"
+        "$value": "{base.colorSet.interaction.normal}"
       },
       "textColor": {
         "$type": "color",
-        "$value": "{base.color.text.default}"
+        "$value": "{base.colorSet.interaction.onNormal}"
       },
       "iconColor": {
         "$type": "color",
-        "$value": "{base.color.text.default}"
+        "$value": "{base.colorSet.interaction.onNormal}"
       }
     },
     "gap": {
       "$type": "spacing",
-      "$value": "{base.ui.spacing.fixed.sp2}"
+      "$value": "{base.ui.spacing.fixed.sp4}"
+    },
+    "focus": {
+      "backgroundColor": {
+        "$type": "color",
+        "$value": "{base.colorSet.interaction.normal}"
+      },
+      "textColor": {
+        "$type": "color",
+        "$value": "{base.colorSet.interaction.onNormal}"
+      },
+      "iconColor": {
+        "$type": "color",
+        "$value": "{base.colorSet.interaction.onNormal}"
+      }
+    },
+    "disabled": {
+      "backgroundColor": {
+        "$type": "color",
+        "$value": "transparent"
+      },
+      "textColor": {
+        "$type": "color",
+        "$value": "{core.color.lightAlpha.40}"
+      },
+      "iconColor": {
+        "$type": "color",
+        "$value": "{core.color.lightAlpha.40}"
+      }
+    }
+  },
+  "tvSelectableButtonList": {
+    "unselected": {
+      "normal": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "transparent"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.lightAlpha.70}"
+        },
+        "iconColor": {
+          "$type": "color",
+          "$value": "{core.color.lightAlpha.70}"
+        }
+      },
+      "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": "{base.colorSet.interaction.normal}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
+        },
+        "iconColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
+        }
+      },
+      "disabled": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "transparent"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.lightAlpha.40}"
+        },
+        "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}"
+        },
+        "iconColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
+        }
+      }
+    },
+    "selected": {
+      "normal": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{core.color.softAlpha.50}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.color.text.default}"
+        },
+        "iconColor": {
+          "$type": "color",
+          "$value": "{base.color.text.default}"
+        }
+      },
+      "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": "{base.colorSet.interaction.normal}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
+        },
+        "iconColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
+        }
+      },
+      "disabled": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "transparent"
+        },
+        "iconColor": {
+          "$type": "color",
+          "$value": "{core.color.lightAlpha.40}"
+        },
+        "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}"
+        },
+        "iconColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
+        }
+      }
     }
   }
 }