@depersgroep/lfvp-design-tokens 0.371.0 → 0.372.0-8da8416

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
  1. package/package.json +1 -1
  2. package/tokens/$metadata.json +2 -0
  3. package/tokens/$themes.json +12 -4
  4. package/tokens/brands/vtmgo.json +1 -1
  5. package/tokens/components/badge.json +92 -0
  6. package/tokens/components/tv-button-list.json +50 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@depersgroep/lfvp-design-tokens",
3
- "version": "0.371.0",
3
+ "version": "0.372.0-8da8416",
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/brands/vtmgo.json CHANGED
@@ -703,7 +703,7 @@
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,92 @@
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
+ "verticalPadding": {
17
+ "$type": "spacing",
18
+ "$value": "{badge.small.fontSize}/6"
19
+ },
20
+ "borderRadius": {
21
+ "$type": "borderRadius",
22
+ "$value": "{badge.small.fontSize}/3"
23
+ },
24
+ "iconSize": {
25
+ "$type": "sizing",
26
+ "$value": "{badge.small.fontSize}*1.4"
27
+ },
28
+ "fontSize": {
29
+ "$type": "fontSizes",
30
+ "$value": "{core.fontSize.12}*{scale.text}"
31
+ },
32
+ "height": {
33
+ "$type": "sizing",
34
+ "$value": "{badge.small.fontSize}*1.8"
35
+ }
36
+ },
37
+ "medium": {
38
+ "label": {
39
+ "$type": "typography",
40
+ "$value": "{base.typography.text.bold.xSmall}"
41
+ },
42
+ "horizontalPadding": {
43
+ "$type": "spacing",
44
+ "$value": "{badge.medium.fontSize}/3"
45
+ },
46
+ "gap": {
47
+ "$type": "spacing",
48
+ "$value": "{badge.medium.fontSize}/3"
49
+ },
50
+ "verticalPadding": {
51
+ "$type": "spacing",
52
+ "$value": "{badge.medium.fontSize}/3"
53
+ },
54
+ "borderRadius": {
55
+ "$type": "borderRadius",
56
+ "$value": "{badge.medium.fontSize}/3"
57
+ },
58
+ "iconSize": {
59
+ "$type": "sizing",
60
+ "$value": "{badge.medium.fontSize}*1.4"
61
+ },
62
+ "height": {
63
+ "$type": "sizing",
64
+ "$value": "{badge.medium.fontSize}*2.1"
65
+ },
66
+ "fontSize": {
67
+ "$type": "fontSizes",
68
+ "$value": "{core.fontSize.13}* {scale.text}"
69
+ }
70
+ },
71
+ "default": {
72
+ "backgroundColor": {
73
+ "$type": "color",
74
+ "$value": "{base.color.ui.fade4}"
75
+ },
76
+ "iconColor": {
77
+ "$type": "color",
78
+ "$value": "{base.color.primary.default}"
79
+ }
80
+ },
81
+ "highlight": {
82
+ "backgroundColor": {
83
+ "$type": "color",
84
+ "$value": "{base.color.primary.darker}"
85
+ },
86
+ "iconColor": {
87
+ "$type": "color",
88
+ "$value": "{base.color.ui.white}"
89
+ }
90
+ }
91
+ }
92
+ }
package/tokens/components/tv-button-list.json ADDED
@@ -0,0 +1,50 @@
1
+ {
2
+ "tvButtonList": {
3
+ "inactive": {
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
+ "selected": {
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": "{core.color.softAlpha.50}"
35
+ },
36
+ "textColor": {
37
+ "$type": "color",
38
+ "$value": "{base.color.text.default}"
39
+ },
40
+ "iconColor": {
41
+ "$type": "color",
42
+ "$value": "{base.color.text.default}"
43
+ }
44
+ },
45
+ "gap": {
46
+ "$type": "spacing",
47
+ "$value": "{base.ui.spacing.fixed.sp4}"
48
+ }
49
+ }
50
+ }