@depersgroep/lfvp-design-tokens 0.346.0 → 0.347.0-e32d258

package/package.json

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

package/tokens/$metadata.json

@@ -42,6 +42,7 @@
     "components/top-10",
     "components/top-banner",
     "components/top-of-screen",
+    "components/tv-hero",
     "components/upsell",
     "screen/large",
     "screen/medium",

package/tokens/$themes.json

@@ -43,7 +43,8 @@
       "components/genre-filter": "enabled",
       "components/upsell": "enabled",
       "components/selectable-button": "enabled",
-      "components/dropdown-list": "enabled"
+      "components/dropdown-list": "enabled",
+      "components/tv-hero": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:3:7330",
     "$figmaModeId": "3:0",
@@ -94,7 +95,8 @@
       "components/genre-filter": "enabled",
       "components/upsell": "enabled",
       "components/selectable-button": "enabled",
-      "components/dropdown-list": "enabled"
+      "components/dropdown-list": "enabled",
+      "components/tv-hero": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:3:7330",
     "$figmaModeId": "3:1",
@@ -145,7 +147,8 @@
       "components/genre-filter": "enabled",
       "components/upsell": "enabled",
       "components/selectable-button": "enabled",
-      "components/dropdown-list": "enabled"
+      "components/dropdown-list": "enabled",
+      "components/tv-hero": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:3:7330",
     "$figmaModeId": "3:2",
@@ -196,7 +199,8 @@
       "components/genre-filter": "enabled",
       "components/upsell": "enabled",
       "components/selectable-button": "enabled",
-      "components/dropdown-list": "enabled"
+      "components/dropdown-list": "enabled",
+      "components/tv-hero": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:3:7330",
     "$figmaModeId": "3:3",
@@ -208,7 +212,8 @@
     "name": "small",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "screen/small": "enabled"
+      "screen/small": "enabled",
+      "components/tv-hero": "disabled"
     },
     "$figmaVariableReferences": {},
     "$figmaCollectionId": "VariableCollectionId:3:8038",
@@ -220,7 +225,8 @@
     "name": "medium",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "screen/medium": "enabled"
+      "screen/medium": "enabled",
+      "components/tv-hero": "disabled"
     },
     "$figmaVariableReferences": {},
     "$figmaCollectionId": "VariableCollectionId:3:8038",
@@ -232,7 +238,8 @@
     "name": "large",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "screen/large": "enabled"
+      "screen/large": "enabled",
+      "components/tv-hero": "disabled"
     },
     "$figmaVariableReferences": {},
     "$figmaCollectionId": "VariableCollectionId:3:8038",
@@ -244,7 +251,8 @@
     "name": "tv",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "screen/tv": "enabled"
+      "screen/tv": "enabled",
+      "components/tv-hero": "disabled"
     },
     "$figmaVariableReferences": {},
     "$figmaCollectionId": "VariableCollectionId:3:8038",

package/tokens/brands/vtmgo.json

@@ -589,7 +589,7 @@
       "interaction": {
         "normal": {
           "$type": "color",
-          "$value": "{core.color.primary.50}"
+          "$value": "{base.color.primary.default}"
         },
         "onNormal": {
           "$type": "color",
@@ -597,15 +597,15 @@
         },
         "hover": {
           "$type": "color",
-          "$value": "{core.color.primary.40}"
+          "$value": "{base.color.primary.darker}"
         },
         "onHover": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.100}"
         },
         "active": {
           "$type": "color",
-          "$value": "{core.color.primary.30}"
+          "$value": "{base.color.primary.darker}"
         },
         "onActive": {
           "$type": "color",
@@ -613,7 +613,7 @@
         },
         "focus": {
           "$type": "color",
-          "$value": "{core.color.primary.40}"
+          "$value": "{base.color.primary.default}"
         },
         "onFocus": {
           "$type": "color",

package/tokens/components/button.json

@@ -108,7 +108,7 @@
       "normal": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.softAlpha.60}"
+          "$value": "{core.color.softAlpha.40}"
         },
         "textColor": {
           "$type": "color",
@@ -118,21 +118,21 @@
       "hover": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.softAlpha.70}"
+          "$value": "{core.color.neutrals.95}"
         },
         "textColor": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.5}"
         }
       },
       "active": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.softAlpha.80}"
+          "$value": "{core.color.neutrals.90}"
         },
         "textColor": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.5}"
         }
       },
       "disabled": {
@@ -156,11 +156,11 @@
       "focus": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.softAlpha.70}"
+          "$value": "{core.color.neutrals.100}"
         },
         "textColor": {
           "$type": "color",
-          "$value": "{base.color.text.default}"
+          "$value": "{core.color.neutrals.0}"
         }
       }
     },
@@ -168,7 +168,7 @@
       "normal": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.neutrals.15}"
+          "$value": "{core.color.softAlpha.40}"
         },
         "textColor": {
           "$type": "color",
@@ -178,7 +178,7 @@
       "hover": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.neutrals.20}"
+          "$value": "{core.color.softAlpha.50}"
         },
         "textColor": {
           "$type": "color",
@@ -188,7 +188,7 @@
       "active": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{core.color.neutrals.30}"
+          "$value": "{core.color.softAlpha.40}"
         },
         "textColor": {
           "$type": "color",
@@ -228,31 +228,31 @@
       "normal": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.normal}"
+          "$value": "{core.color.neutrals.100}"
         },
         "textColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.onNormal}"
+          "$value": "{core.color.neutrals.0}"
         }
       },
       "hover": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.hover}"
+          "$value": "{core.color.neutrals.95}"
         },
         "textColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.onHover}"
+          "$value": "{core.color.neutrals.5}"
         }
       },
       "active": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.active}"
+          "$value": "{core.color.neutrals.90}"
         },
         "textColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.onActive}"
+          "$value": "{core.color.neutrals.5}"
         }
       },
       "disabled": {
@@ -276,11 +276,11 @@
       "focus": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.focus}"
+          "$value": "{core.color.neutrals.100}"
         },
         "textColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.onFocus}"
+          "$value": "{core.color.neutrals.0}"
         }
       }
     },
@@ -470,6 +470,58 @@
         "$type": "fontSizes",
         "$value": "{core.fontSize.14}"
       }
+    },
+    "branded": {
+      "normal": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.normal}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
+        }
+      },
+      "hover": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.hover}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onHover}"
+        }
+      },
+      "active": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.active}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onActive}"
+        }
+      },
+      "disabled": {
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onDisabled}"
+        },
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.disabled}"
+        }
+      },
+      "focus": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.focus}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onFocus}"
+        }
+      }
     }
   },
   "iconButton": {

package/tokens/components/tv-hero.json

@@ -0,0 +1,13 @@
+{
+  "tvHero": {
+    "title": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{base.heroFont}",
+        "fontWeight": "{base.fontWeight.title}",
+        "lineHeight": "{core.lineHeight.120}",
+        "fontSize": "{core.fontSize.28}*{scale.title}"
+      }
+    }
+  }
+}

package/tokens/screen/tv.json

@@ -35,24 +35,40 @@
         "backgroundColor": {
           "$type": "color",
           "$value": "{core.color.softAlpha.60}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
         }
       },
       "hover": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.normal}"
+          "$value": "{core.color.neutrals.100}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.0}"
         }
       },
       "active": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.normal}"
+          "$value": "{core.color.neutrals.100}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.0}"
         }
       },
       "focus": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.normal}"
+          "$value": "{core.color.neutrals.100}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.0}"
         }
       }
     },
@@ -97,24 +113,40 @@
         "backgroundColor": {
           "$type": "color",
           "$value": "{core.color.softAlpha.60}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
         }
       },
       "hover": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.normal}"
+          "$value": "{core.color.neutrals.100}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.0}"
         }
       },
       "active": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.normal}"
+          "$value": "{core.color.neutrals.100}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.0}"
         }
       },
       "focus": {
         "backgroundColor": {
           "$type": "color",
-          "$value": "{base.colorSet.interaction.normal}"
+          "$value": "{core.color.neutrals.100}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.0}"
         }
       }
     },
@@ -123,24 +155,92 @@
         "backgroundColor": {
           "$type": "color",
           "$value": "{core.color.softAlpha.60}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        }
+      },
+      "hover": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.0}"
+        }
+      },
+      "active": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.0}"
+        }
+      },
+      "focus": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.100}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{core.color.neutrals.0}"
+        }
+      }
+    },
+    "branded": {
+      "normal": {
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{core.color.softAlpha.60}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onNormal}"
         }
       },
       "hover": {
         "backgroundColor": {
           "$type": "color",
           "$value": "{base.colorSet.interaction.normal}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onHover}"
         }
       },
       "active": {
         "backgroundColor": {
           "$type": "color",
           "$value": "{base.colorSet.interaction.normal}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onActive}"
+        }
+      },
+      "disabled": {
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onDisabled}"
+        },
+        "backgroundColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.disabled}"
         }
       },
       "focus": {
         "backgroundColor": {
           "$type": "color",
           "$value": "{base.colorSet.interaction.normal}"
+        },
+        "textColor": {
+          "$type": "color",
+          "$value": "{base.colorSet.interaction.onFocus}"
         }
       }
     }