@depersgroep/lfvp-design-tokens 0.372.0 → 0.374.0

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 (7) hide show
  1. package/package.json +1 -1
  2. package/tokens/$metadata.json +2 -0
  3. package/tokens/$themes.json +12 -4
  4. package/tokens/components/badge.json +108 -0
  5. package/tokens/components/detail-header.json +20 -7
  6. package/tokens/components/input.json +0 -4
  7. package/tokens/components/tv-button-list.json +114 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@depersgroep/lfvp-design-tokens",
3
- "version": "0.372.0",
3
+ "version": "0.374.0",
4
4
  "description": "Figma design tokens for LFVP",
5
5
  "keywords": [
6
6
  "design",
package/tokens/$metadata.json CHANGED
@@ -10,6 +10,7 @@
10
10
  "brands/vtmgo",
11
11
  "brands/whitelabel",
12
12
  "components/avatar",
13
+ "components/badge",
13
14
  "components/billboard",
14
15
  "components/box",
15
16
  "components/boxcover",
@@ -42,6 +43,7 @@
42
43
  "components/top-10",
43
44
  "components/top-banner",
44
45
  "components/top-of-screen",
46
+ "components/tv-button-list",
45
47
  "components/tv-hero",
46
48
  "components/upsell",
47
49
  "screen/large",
package/tokens/$themes.json CHANGED
@@ -44,7 +44,9 @@
44
44
  "components/upsell": "enabled",
45
45
  "components/selectable-button": "enabled",
46
46
  "components/dropdown-list": "enabled",
47
- "components/tv-hero": "enabled"
47
+ "components/tv-hero": "enabled",
48
+ "components/tv-button-list": "enabled",
49
+ "components/badge": "enabled"
48
50
  },
49
51
  "$figmaCollectionId": "VariableCollectionId:3:7330",
50
52
  "$figmaModeId": "3:0",
@@ -96,7 +98,9 @@
96
98
  "components/upsell": "enabled",
97
99
  "components/selectable-button": "enabled",
98
100
  "components/dropdown-list": "enabled",
99
- "components/tv-hero": "enabled"
101
+ "components/tv-hero": "enabled",
102
+ "components/tv-button-list": "enabled",
103
+ "components/badge": "enabled"
100
104
  },
101
105
  "$figmaCollectionId": "VariableCollectionId:3:7330",
102
106
  "$figmaModeId": "3:1",
@@ -148,7 +152,9 @@
148
152
  "components/upsell": "enabled",
149
153
  "components/selectable-button": "enabled",
150
154
  "components/dropdown-list": "enabled",
151
- "components/tv-hero": "enabled"
155
+ "components/tv-hero": "enabled",
156
+ "components/tv-button-list": "enabled",
157
+ "components/badge": "enabled"
152
158
  },
153
159
  "$figmaCollectionId": "VariableCollectionId:3:7330",
154
160
  "$figmaModeId": "3:2",
@@ -200,7 +206,9 @@
200
206
  "components/upsell": "enabled",
201
207
  "components/selectable-button": "enabled",
202
208
  "components/dropdown-list": "enabled",
203
- "components/tv-hero": "enabled"
209
+ "components/tv-hero": "enabled",
210
+ "components/tv-button-list": "enabled",
211
+ "components/badge": "enabled"
204
212
  },
205
213
  "$figmaCollectionId": "VariableCollectionId:3:7330",
206
214
  "$figmaModeId": "3:3",
package/tokens/components/badge.json ADDED
@@ -0,0 +1,108 @@
1
+ {
2
+ "badge": {
3
+ "small": {
4
+ "label": {
5
+ "$type": "typography",
6
+ "$value": "{base.typography.meta.bold}"
7
+ },
8
+ "horizontalPadding": {
9
+ "$type": "spacing",
10
+ "$value": "{badge.small.fontSize}/3"
11
+ },
12
+ "gap": {
13
+ "$type": "spacing",
14
+ "$value": "{badge.small.fontSize}/3"
15
+ },
16
+ "margin": {
17
+ "$type": "spacing",
18
+ "$value": "{badge.small.fontSize}/3"
19
+ },
20
+ "verticalPadding": {
21
+ "$type": "spacing",
22
+ "$value": "{badge.small.fontSize}/6"
23
+ },
24
+ "borderRadius": {
25
+ "$type": "borderRadius",
26
+ "$value": "{badge.small.fontSize}/3"
27
+ },
28
+ "iconSize": {
29
+ "$type": "sizing",
30
+ "$value": "{badge.small.fontSize}*1.4"
31
+ },
32
+ "fontSize": {
33
+ "$type": "fontSizes",
34
+ "$value": "{core.fontSize.12}*{scale.text}"
35
+ },
36
+ "height": {
37
+ "$type": "sizing",
38
+ "$value": "{badge.small.fontSize}*1.8"
39
+ }
40
+ },
41
+ "medium": {
42
+ "label": {
43
+ "$type": "typography",
44
+ "$value": "{base.typography.text.bold.xSmall}"
45
+ },
46
+ "horizontalPadding": {
47
+ "$type": "spacing",
48
+ "$value": "{badge.medium.fontSize}/3"
49
+ },
50
+ "gap": {
51
+ "$type": "spacing",
52
+ "$value": "{badge.medium.fontSize}/3"
53
+ },
54
+ "margin": {
55
+ "$type": "spacing",
56
+ "$value": "{badge.medium.fontSize}/3"
57
+ },
58
+ "verticalPadding": {
59
+ "$type": "spacing",
60
+ "$value": "{badge.medium.fontSize}/3"
61
+ },
62
+ "borderRadius": {
63
+ "$type": "borderRadius",
64
+ "$value": "{badge.medium.fontSize}/3"
65
+ },
66
+ "iconSize": {
67
+ "$type": "sizing",
68
+ "$value": "{badge.medium.fontSize}*1.4"
69
+ },
70
+ "height": {
71
+ "$type": "sizing",
72
+ "$value": "{badge.medium.fontSize}*2.1"
73
+ },
74
+ "fontSize": {
75
+ "$type": "fontSizes",
76
+ "$value": "{core.fontSize.13}* {scale.text}"
77
+ }
78
+ },
79
+ "default": {
80
+ "backgroundColor": {
81
+ "$type": "color",
82
+ "$value": "{base.color.ui.fade4}"
83
+ },
84
+ "iconColor": {
85
+ "$type": "color",
86
+ "$value": "{base.color.primary.default}"
87
+ },
88
+ "textColor": {
89
+ "$type": "color",
90
+ "$value": "{base.color.text.default}"
91
+ }
92
+ },
93
+ "highlight": {
94
+ "backgroundColor": {
95
+ "$type": "color",
96
+ "$value": "{base.color.primary.darker}"
97
+ },
98
+ "iconColor": {
99
+ "$type": "color",
100
+ "$value": "{base.color.ui.white}"
101
+ },
102
+ "textColor": {
103
+ "$type": "color",
104
+ "$value": "{base.color.ui.white}"
105
+ }
106
+ }
107
+ }
108
+ }
package/tokens/components/detail-header.json CHANGED
@@ -1,12 +1,25 @@
1
1
  {
2
2
  "detailHeader": {
3
- "title": {
4
- "$type": "typography",
5
- "$value": {
6
- "fontFamily": "{base.heroFont}",
7
- "fontWeight": "{base.fontWeight.title}",
8
- "lineHeight": "{core.lineHeight.120}",
9
- "fontSize": "{core.fontSize.24}*{scale.title}"
3
+ "level1": {
4
+ "title": {
5
+ "$type": "typography",
6
+ "$value": {
7
+ "fontFamily": "{base.heroFont}",
8
+ "fontWeight": "{base.fontWeight.title}",
9
+ "lineHeight": "{core.lineHeight.120}",
10
+ "fontSize": "{core.fontSize.24}*{scale.title}"
11
+ }
12
+ }
13
+ },
14
+ "level2": {
15
+ "title": {
16
+ "$type": "typography",
17
+ "$value": {
18
+ "fontFamily": "{base.heroFont}",
19
+ "fontWeight": "{base.fontWeight.title}",
20
+ "lineHeight": "{core.lineHeight.120}",
21
+ "fontSize": "{core.fontSize.20} *{scale.title}"
22
+ }
10
23
  }
11
24
  }
12
25
  }
package/tokens/components/input.json CHANGED
@@ -100,10 +100,6 @@
100
100
  "borderWidth": {
101
101
  "$type": "borderWidth",
102
102
  "$value": "{base.ui.borderWidth.fixed.bw3}"
103
- },
104
- "borderWidth-copy": {
105
- "$type": "borderWidth",
106
- "$value": "{base.ui.borderWidth.fixed.bw3}"
107
103
  }
108
104
  },
109
105
  "padding": {
package/tokens/components/tv-button-list.json ADDED
@@ -0,0 +1,114 @@
1
+ {
2
+ "tvButtonList": {
3
+ "gap": {
4
+ "$type": "spacing",
5
+ "$value": "{base.ui.spacing.fixed.sp4}"
6
+ }
7
+ },
8
+ "tvSelectableButtonList": {
9
+ "unselected": {
10
+ "normal": {
11
+ "backgroundColor": {
12
+ "$type": "color",
13
+ "$value": "transparent"
14
+ },
15
+ "textColor": {
16
+ "$type": "color",
17
+ "$value": "{core.color.lightAlpha.70}"
18
+ }
19
+ },
20
+ "hover": {
21
+ "backgroundColor": {
22
+ "$type": "color",
23
+ "$value": "{base.colorSet.interaction.normal}"
24
+ },
25
+ "textColor": {
26
+ "$type": "color",
27
+ "$value": "{base.colorSet.interaction.onNormal}"
28
+ }
29
+ },
30
+ "active": {
31
+ "backgroundColor": {
32
+ "$type": "color",
33
+ "$value": "{base.colorSet.interaction.normal}"
34
+ },
35
+ "textColor": {
36
+ "$type": "color",
37
+ "$value": "{base.colorSet.interaction.onNormal}"
38
+ }
39
+ },
40
+ "disabled": {
41
+ "backgroundColor": {
42
+ "$type": "color",
43
+ "$value": "transparent"
44
+ },
45
+ "textColor": {
46
+ "$type": "color",
47
+ "$value": "{core.color.lightAlpha.40}"
48
+ }
49
+ },
50
+ "focus": {
51
+ "backgroundColor": {
52
+ "$type": "color",
53
+ "$value": "{base.colorSet.interaction.normal}"
54
+ },
55
+ "textColor": {
56
+ "$type": "color",
57
+ "$value": "{base.colorSet.interaction.onNormal}"
58
+ }
59
+ }
60
+ },
61
+ "selected": {
62
+ "normal": {
63
+ "backgroundColor": {
64
+ "$type": "color",
65
+ "$value": "{core.color.softAlpha.50}"
66
+ },
67
+ "textColor": {
68
+ "$type": "color",
69
+ "$value": "{base.color.text.default}"
70
+ }
71
+ },
72
+ "hover": {
73
+ "backgroundColor": {
74
+ "$type": "color",
75
+ "$value": "{base.colorSet.interaction.normal}"
76
+ },
77
+ "textColor": {
78
+ "$type": "color",
79
+ "$value": "{base.colorSet.interaction.onNormal}"
80
+ }
81
+ },
82
+ "active": {
83
+ "backgroundColor": {
84
+ "$type": "color",
85
+ "$value": "{base.colorSet.interaction.normal}"
86
+ },
87
+ "textColor": {
88
+ "$type": "color",
89
+ "$value": "{base.colorSet.interaction.onNormal}"
90
+ }
91
+ },
92
+ "disabled": {
93
+ "backgroundColor": {
94
+ "$type": "color",
95
+ "$value": "transparent"
96
+ },
97
+ "iconColor": {
98
+ "$type": "color",
99
+ "$value": "{core.color.lightAlpha.40}"
100
+ }
101
+ },
102
+ "focus": {
103
+ "backgroundColor": {
104
+ "$type": "color",
105
+ "$value": "{base.colorSet.interaction.normal}"
106
+ },
107
+ "textColor": {
108
+ "$type": "color",
109
+ "$value": "{base.colorSet.interaction.onNormal}"
110
+ }
111
+ }
112
+ }
113
+ }
114
+ }