@depersgroep/lfvp-design-tokens 0.370.0 → 0.372.0-1483f2f

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 (8) 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/base/color.json +1 -1
  5. package/tokens/brands/vtmgo.json +2 -2
  6. package/tokens/components/badge.json +108 -0
  7. package/tokens/components/input.json +0 -4
  8. package/tokens/components/tv-button-list.json +224 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@depersgroep/lfvp-design-tokens",
3
- "version": "0.370.0",
3
+ "version": "0.372.0-1483f2f",
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/base/color.json CHANGED
@@ -58,7 +58,7 @@
58
58
  },
59
59
  "fade1": {
60
60
  "$type": "color",
61
- "$value": "{core.color.darkAlpha.95}"
61
+ "$value": "{core.color.darkAlpha.90}"
62
62
  },
63
63
  "fade2": {
64
64
  "$type": "color",
package/tokens/brands/vtmgo.json CHANGED
@@ -699,11 +699,11 @@
699
699
  },
700
700
  "active": {
701
701
  "$type": "color",
702
- "$value": "{core.color.primary.30}"
702
+ "$value": "linear-gradient(60deg, {core.color.various.1} 0%, {core.color.primary.30} 100%)"
703
703
  },
704
704
  "onActive": {
705
705
  "$type": "color",
706
- "$value": "{core.color.neutrals.100}"
706
+ "$value": "{core.color.primary.95}"
707
707
  },
708
708
  "focus": {
709
709
  "$type": "color",
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/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,224 @@
1
+ {
2
+ "tvButtonList": {
3
+ "normal": {
4
+ "backgroundColor": {
5
+ "$type": "color",
6
+ "$value": "transparent"
7
+ },
8
+ "textColor": {
9
+ "$type": "color",
10
+ "$value": "{core.color.lightAlpha.70}"
11
+ },
12
+ "iconColor": {
13
+ "$type": "color",
14
+ "$value": "{core.color.lightAlpha.70}"
15
+ }
16
+ },
17
+ "hover": {
18
+ "backgroundColor": {
19
+ "$type": "color",
20
+ "$value": "{base.colorSet.interaction.normal}"
21
+ },
22
+ "textColor": {
23
+ "$type": "color",
24
+ "$value": "{base.colorSet.interaction.onNormal}"
25
+ },
26
+ "iconColor": {
27
+ "$type": "color",
28
+ "$value": "{base.colorSet.interaction.onNormal}"
29
+ }
30
+ },
31
+ "active": {
32
+ "backgroundColor": {
33
+ "$type": "color",
34
+ "$value": "{base.colorSet.interaction.normal}"
35
+ },
36
+ "textColor": {
37
+ "$type": "color",
38
+ "$value": "{base.colorSet.interaction.onNormal}"
39
+ },
40
+ "iconColor": {
41
+ "$type": "color",
42
+ "$value": "{base.colorSet.interaction.onNormal}"
43
+ }
44
+ },
45
+ "gap": {
46
+ "$type": "spacing",
47
+ "$value": "{base.ui.spacing.fixed.sp4}"
48
+ },
49
+ "focus": {
50
+ "backgroundColor": {
51
+ "$type": "color",
52
+ "$value": "{base.colorSet.interaction.normal}"
53
+ },
54
+ "textColor": {
55
+ "$type": "color",
56
+ "$value": "{base.colorSet.interaction.onNormal}"
57
+ },
58
+ "iconColor": {
59
+ "$type": "color",
60
+ "$value": "{base.colorSet.interaction.onNormal}"
61
+ }
62
+ },
63
+ "disabled": {
64
+ "backgroundColor": {
65
+ "$type": "color",
66
+ "$value": "transparent"
67
+ },
68
+ "textColor": {
69
+ "$type": "color",
70
+ "$value": "{core.color.lightAlpha.40}"
71
+ },
72
+ "iconColor": {
73
+ "$type": "color",
74
+ "$value": "{core.color.lightAlpha.40}"
75
+ }
76
+ }
77
+ },
78
+ "tvSelectableButtonList": {
79
+ "unselected": {
80
+ "normal": {
81
+ "backgroundColor": {
82
+ "$type": "color",
83
+ "$value": "transparent"
84
+ },
85
+ "textColor": {
86
+ "$type": "color",
87
+ "$value": "{core.color.lightAlpha.70}"
88
+ },
89
+ "iconColor": {
90
+ "$type": "color",
91
+ "$value": "{core.color.lightAlpha.70}"
92
+ }
93
+ },
94
+ "hover": {
95
+ "backgroundColor": {
96
+ "$type": "color",
97
+ "$value": "{base.colorSet.interaction.normal}"
98
+ },
99
+ "textColor": {
100
+ "$type": "color",
101
+ "$value": "{base.colorSet.interaction.onNormal}"
102
+ },
103
+ "iconColor": {
104
+ "$type": "color",
105
+ "$value": "{base.colorSet.interaction.onNormal}"
106
+ }
107
+ },
108
+ "active": {
109
+ "backgroundColor": {
110
+ "$type": "color",
111
+ "$value": "{base.colorSet.interaction.normal}"
112
+ },
113
+ "textColor": {
114
+ "$type": "color",
115
+ "$value": "{base.colorSet.interaction.onNormal}"
116
+ },
117
+ "iconColor": {
118
+ "$type": "color",
119
+ "$value": "{base.colorSet.interaction.onNormal}"
120
+ }
121
+ },
122
+ "disabled": {
123
+ "backgroundColor": {
124
+ "$type": "color",
125
+ "$value": "transparent"
126
+ },
127
+ "textColor": {
128
+ "$type": "color",
129
+ "$value": "{core.color.lightAlpha.40}"
130
+ },
131
+ "iconColor": {
132
+ "$type": "color",
133
+ "$value": "{core.color.lightAlpha.40}"
134
+ }
135
+ },
136
+ "focus": {
137
+ "backgroundColor": {
138
+ "$type": "color",
139
+ "$value": "{base.colorSet.interaction.normal}"
140
+ },
141
+ "textColor": {
142
+ "$type": "color",
143
+ "$value": "{base.colorSet.interaction.onNormal}"
144
+ },
145
+ "iconColor": {
146
+ "$type": "color",
147
+ "$value": "{base.colorSet.interaction.onNormal}"
148
+ }
149
+ }
150
+ },
151
+ "selected": {
152
+ "normal": {
153
+ "backgroundColor": {
154
+ "$type": "color",
155
+ "$value": "{core.color.softAlpha.50}"
156
+ },
157
+ "textColor": {
158
+ "$type": "color",
159
+ "$value": "{base.color.text.default}"
160
+ },
161
+ "iconColor": {
162
+ "$type": "color",
163
+ "$value": "{base.color.text.default}"
164
+ }
165
+ },
166
+ "hover": {
167
+ "backgroundColor": {
168
+ "$type": "color",
169
+ "$value": "{base.colorSet.interaction.normal}"
170
+ },
171
+ "textColor": {
172
+ "$type": "color",
173
+ "$value": "{base.colorSet.interaction.onNormal}"
174
+ },
175
+ "iconColor": {
176
+ "$type": "color",
177
+ "$value": "{base.colorSet.interaction.onNormal}"
178
+ }
179
+ },
180
+ "active": {
181
+ "backgroundColor": {
182
+ "$type": "color",
183
+ "$value": "{base.colorSet.interaction.normal}"
184
+ },
185
+ "textColor": {
186
+ "$type": "color",
187
+ "$value": "{base.colorSet.interaction.onNormal}"
188
+ },
189
+ "iconColor": {
190
+ "$type": "color",
191
+ "$value": "{base.colorSet.interaction.onNormal}"
192
+ }
193
+ },
194
+ "disabled": {
195
+ "backgroundColor": {
196
+ "$type": "color",
197
+ "$value": "transparent"
198
+ },
199
+ "iconColor": {
200
+ "$type": "color",
201
+ "$value": "{core.color.lightAlpha.40}"
202
+ },
203
+ "textColor": {
204
+ "$type": "color",
205
+ "$value": "{core.color.lightAlpha.40}"
206
+ }
207
+ },
208
+ "focus": {
209
+ "backgroundColor": {
210
+ "$type": "color",
211
+ "$value": "{base.colorSet.interaction.normal}"
212
+ },
213
+ "textColor": {
214
+ "$type": "color",
215
+ "$value": "{base.colorSet.interaction.onNormal}"
216
+ },
217
+ "iconColor": {
218
+ "$type": "color",
219
+ "$value": "{base.colorSet.interaction.onNormal}"
220
+ }
221
+ }
222
+ }
223
+ }
224
+ }