@depersgroep/lfvp-design-tokens 0.384.0 → 0.386.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@depersgroep/lfvp-design-tokens",
-	"version": "0.384.0",
+	"version": "0.386.0",
 	"description": "Figma design tokens for LFVP",
 	"keywords": [
 		"design",

package/tokens/$metadata.json

@@ -1,52 +1,55 @@
 {
   "tokenSetOrder": [
     "core",
-    "brands/whitelabel",
-    "brands/vtmgo",
-    "brands/streamz",
-    "brands/rtlplay",
     "base/color",
+    "base/stroke",
     "base/typography",
     "base/ui",
-    "base/stroke",
+    "brands/rtlplay",
+    "brands/streamz",
+    "brands/vtmgo",
+    "brands/whitelabel",
     "components/avatar",
-    "components/box",
+    "components/badge",
     "components/billboard",
+    "components/box",
     "components/boxcover",
-    "components/button",
-    "components/selectable-button",
     "components/button-group",
+    "components/button",
+    "components/detail-header",
     "components/dropdown-list",
-    "components/selectable-box",
     "components/form",
-    "components/selectable",
+    "components/genre-filter",
     "components/input",
     "components/landingpage",
-    "components/toggle",
-    "components/top-10",
-    "components/navigation",
-    "components/modal",
+    "components/login",
+    "components/message",
     "components/mid-banner",
-    "components/thumbnail",
-    "components/top-banner",
-    "components/top-of-screen",
+    "components/modal",
+    "components/navigation",
     "components/pill",
     "components/player",
     "components/pricing-table",
     "components/product-card",
-    "components/message",
+    "components/selectable-box",
+    "components/selectable-button",
+    "components/selectable",
+    "components/springboard",
     "components/swimlane",
     "components/tab-bar",
+    "components/thumbnail",
     "components/tile",
-    "components/springboard",
-    "components/login",
-    "components/detail-header",
-    "components/genre-filter",
+    "components/toggle",
+    "components/top-10",
+    "components/top-banner",
+    "components/top-of-screen",
+    "components/tv-button-list",
+    "components/tv-hero",
     "components/chapter-swimlane",
     "components/upsell",
-    "screen/small",
-    "screen/medium",
     "screen/large",
+    "screen/medium",
+    "screen/small",
     "screen/tv"
   ]
 }

package/tokens/$themes.json

@@ -44,6 +44,9 @@
       "components/upsell": "enabled",
       "components/selectable-button": "enabled",
       "components/dropdown-list": "enabled",
+      "components/tv-hero": "enabled",
+      "components/tv-button-list": "enabled",
+      "components/badge": "enabled",
       "components/chapter-swimlane": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:3:7330",
@@ -96,6 +99,9 @@
       "components/upsell": "enabled",
       "components/selectable-button": "enabled",
       "components/dropdown-list": "enabled",
+      "components/tv-hero": "enabled",
+      "components/tv-button-list": "enabled",
+      "components/badge": "enabled",
       "components/chapter-swimlane": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:3:7330",
@@ -148,6 +154,9 @@
       "components/upsell": "enabled",
       "components/selectable-button": "enabled",
       "components/dropdown-list": "enabled",
+      "components/tv-hero": "enabled",
+      "components/tv-button-list": "enabled",
+      "components/badge": "enabled",
       "components/chapter-swimlane": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:3:7330",
@@ -200,6 +209,9 @@
       "components/upsell": "enabled",
       "components/selectable-button": "enabled",
       "components/dropdown-list": "enabled",
+      "components/tv-hero": "enabled",
+      "components/tv-button-list": "enabled",
+      "components/badge": "enabled",
       "components/chapter-swimlane": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:3:7330",

package/tokens/base/color.json

@@ -21,6 +21,10 @@
         "darkest": {
           "$type": "color",
           "$value": "{core.color.primary.30}"
+        },
+        "dusk": {
+          "$type": "color",
+          "$value": "{core.color.primary.20}"
         }
       },
       "ui": {
@@ -32,14 +36,14 @@
           "$type": "color",
           "$value": "{base.colorSet.neutrals.dark2}"
         },
-        "dark4": {
-          "$type": "color",
-          "$value": "{base.colorSet.neutrals.dark4}"
-        },
         "dark3": {
           "$type": "color",
           "$value": "{base.colorSet.neutrals.dark3}"
         },
+        "dark4": {
+          "$type": "color",
+          "$value": "{base.colorSet.neutrals.dark4}"
+        },
         "accent1": {
           "$type": "color",
           "$value": "{base.colorSet.neutrals.accent1}"
@@ -71,6 +75,10 @@
         "fade5": {
           "$type": "color",
           "$value": "{core.color.darkAlpha.15}"
+        },
+        "fade6": {
+          "$type": "color",
+          "$value": "{core.color.darkAlpha.0}"
         }
       },
       "gradient": {
@@ -97,6 +105,10 @@
         "6": {
           "$type": "color",
           "$value": "linear-gradient(-90deg, {core.color.darkAlpha.10} 0%, {core.color.darkAlpha.90} 50%, {base.color.ui.dark1} 100%)"
+        },
+        "7": {
+          "$type": "color",
+          "$value": "linear-gradient(-90deg, {core.color.darkAlpha.0} 0%, {base.color.ui.dark1} 100%)"
         }
       },
       "functional": {

package/tokens/brands/rtlplay.json

@@ -24,20 +24,24 @@
         },
         "30": {
           "$type": "color",
-          "$value": "#99001D"
+          "$value": "#831633"
         },
         "40": {
           "$type": "color",
-          "$value": "#CB0138"
+          "$value": "#AF1D45"
+        },
+        "45": {
+          "$type": "color",
+          "$value": "#C5214D"
         },
         "50": {
           "$type": "color",
-          "$value": "#FE0146",
+          "$value": "#D92455",
           "$description": "Primary"
         },
         "60": {
           "$type": "color",
-          "$value": "#FE2963"
+          "$value": "#E25078"
         },
         "70": {
           "$type": "color",
@@ -275,6 +279,12 @@
           "$type": "color",
           "$value": "rgba(18, 23, 38, 0.95)"
         }
+      },
+      "various": {
+        "1": {
+          "$type": "color",
+          "$value": "#ffffff"
+        }
       }
     }
   },
@@ -290,23 +300,23 @@
     "fontWeight": {
       "title": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.black}"
+        "$value": "{core.fontWeight.900}"
       },
       "default": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.regular}"
+        "$value": "{core.fontWeight.400}"
       },
       "emphasized": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.bold}"
+        "$value": "{core.fontWeight.800}"
       },
       "bold": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.black}"
+        "$value": "{core.fontWeight.900}"
       },
       "button": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.bold}"
+        "$value": "{core.fontWeight.800}"
       }
     },
     "typography": {
@@ -382,6 +392,10 @@
         "$type": "borderRadius",
         "$value": "{core.borderRadius.full}"
       },
+      "badge": {
+        "$type": "borderRadius",
+        "$value": "{core.borderRadius.full}"
+      },
       "pill": {
         "$type": "borderRadius",
         "$value": "{core.borderRadius.full}"
@@ -539,6 +553,16 @@
           "$type": "color",
           "$value": "{base.colorSet.neutrals.dark3}"
         }
+      },
+      "badge": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{core.color.primary.50}"
+        },
+        "iconColor": {
+          "$type": "color",
+          "$value": "{core.color.primary.50}"
+        }
       }
     },
     "sizing": {
@@ -589,35 +613,35 @@
       "interaction": {
         "normal": {
           "$type": "color",
-          "$value": "{core.color.primary.60}"
+          "$value": "{core.color.neutrals.100}"
         },
         "onNormal": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.5}"
         },
         "hover": {
           "$type": "color",
-          "$value": "{core.color.primary.50}"
+          "$value": "{core.color.neutrals.90}"
         },
         "onHover": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.5}"
         },
         "active": {
           "$type": "color",
-          "$value": "{core.color.primary.40}"
+          "$value": "{core.color.neutrals.80}"
         },
         "onActive": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.5}"
         },
         "focus": {
           "$type": "color",
-          "$value": "{core.color.primary.50}"
+          "$value": "{core.color.neutrals.100}"
         },
         "onFocus": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.5}"
         },
         "disabled": {
           "$type": "color",
@@ -669,6 +693,48 @@
           "$type": "color",
           "$value": "{core.color.neutrals.30}"
         }
+      },
+      "branded": {
+        "normal": {
+          "$type": "color",
+          "$value": "{core.color.primary.45}"
+        },
+        "onNormal": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "{core.color.primary.40}"
+        },
+        "onHover": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "active": {
+          "$type": "color",
+          "$value": "{core.color.primary.30}"
+        },
+        "onActive": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "focus": {
+          "$type": "color",
+          "$value": "{core.color.primary.45}"
+        },
+        "onFocus": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{core.color.softAlpha.20}"
+        },
+        "onDisabled": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.60}"
+        }
       }
     },
     "plan": {

package/tokens/brands/streamz.json

@@ -30,6 +30,10 @@
           "$type": "color",
           "$value": "#cc0043"
         },
+        "45": {
+          "$type": "color",
+          "$value": "#E8024B"
+        },
         "50": {
           "$type": "color",
           "$value": "#ff0a5a",
@@ -275,6 +279,12 @@
           "$type": "color",
           "$value": "rgba(2,0,18,0.95)"
         }
+      },
+      "various": {
+        "1": {
+          "$type": "color",
+          "$value": "#4B0B70"
+        }
       }
     }
   },
@@ -290,23 +300,23 @@
     "fontWeight": {
       "title": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.extraBold}"
+        "$value": "{core.fontWeight.800}"
       },
       "default": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.semiBold}"
+        "$value": "{core.fontWeight.600}"
       },
       "emphasized": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.semiBold}"
+        "$value": "{core.fontWeight.600}"
       },
       "bold": {
         "$type": "fontWeights",
-        "$value": "{core.fontWeight.extraBold}"
+        "$value": "{core.fontWeight.800}"
       },
       "button": {
         "$type": "fontWeights",
-        "$value": "{base.fontWeight.emphasized}"
+        "$value": "{core.fontWeight.600}"
       }
     },
     "typography": {
@@ -382,6 +392,10 @@
         "$type": "borderRadius",
         "$value": "{base.ui.borderRadius.flex.br3}"
       },
+      "badge": {
+        "$type": "borderRadius",
+        "$value": "{badge.small.fontSize}/3"
+      },
       "pill": {
         "$type": "borderRadius",
         "$value": "{base.ui.borderRadius.flex.br2}"
@@ -539,6 +553,16 @@
           "$type": "color",
           "$value": "{base.colorSet.neutrals.dark2}"
         }
+      },
+      "badge": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{core.color.primary.40}"
+        },
+        "iconColor": {
+          "$type": "color",
+          "$value": "{core.color.primary.50}"
+        }
       }
     },
     "sizing": {
@@ -589,11 +613,11 @@
       "interaction": {
         "normal": {
           "$type": "color",
-          "$value": "{core.color.primary.50}"
+          "$value": "{core.color.primary.45}"
         },
         "onNormal": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.100}"
         },
         "hover": {
           "$type": "color",
@@ -601,7 +625,7 @@
         },
         "onHover": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.100}"
         },
         "active": {
           "$type": "color",
@@ -609,7 +633,7 @@
         },
         "onActive": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.100}"
         },
         "focus": {
           "$type": "color",
@@ -617,7 +641,7 @@
         },
         "onFocus": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.100}"
         },
         "disabled": {
           "$type": "color",
@@ -669,6 +693,48 @@
           "$type": "color",
           "$value": "{core.color.neutrals.20}"
         }
+      },
+      "branded": {
+        "normal": {
+          "$type": "color",
+          "$value": "{core.color.primary.45}"
+        },
+        "onNormal": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "{core.color.primary.40}"
+        },
+        "onHover": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "active": {
+          "$type": "color",
+          "$value": "{core.color.primary.30}"
+        },
+        "onActive": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "focus": {
+          "$type": "color",
+          "$value": "{core.color.primary.40}"
+        },
+        "onFocus": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{core.color.softAlpha.20}"
+        },
+        "onDisabled": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.60}"
+        }
       }
     },
     "plan": {