@vtex/faststore-plugin-buyer-portal 1.3.28 → 1.3.29

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/CHANGELOG.md +9 -1
  2. package/package.json +1 -1
  3. package/src/features/shared/utils/constants.ts +1 -1
  4. package/src/themes/colors.scss +10 -0
  5. package/src/themes/layouts.scss +4 -0
  6. package/src/themes/tokens.scss +169 -0
  7. package/src/themes/typography.scss +76 -0
package/CHANGELOG.md CHANGED
@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [1.3.29] - 2025-11-25
11
+
12
+ ### Added
13
+
14
+ - Create tokens file with variables according with design system definition
15
+ - Create typography mixins
16
+
10
17
  ## [1.3.28] - 2025-11-25
11
18
 
12
19
  ### Added
@@ -274,7 +281,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
274
281
  - Add CHANGELOG file
275
282
  - Add README file
276
283
 
277
- [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.28...HEAD
284
+ [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.29...HEAD
278
285
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
279
286
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
280
287
  [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -289,6 +296,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
289
296
 
290
297
  # <<<<<<< HEAD
291
298
 
299
+ [1.3.29]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.28...v1.3.29
292
300
  [1.3.28]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.27...v1.3.28
293
301
  [1.3.27]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.26...v1.3.27
294
302
  [1.3.26]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.25...v1.3.26
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtex/faststore-plugin-buyer-portal",
3
- "version": "1.3.28",
3
+ "version": "1.3.29",
4
4
  "description": "A plugin for faststore with buyer portal",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/features/shared/utils/constants.ts CHANGED
@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
13
13
  export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
14
14
  "bp_hide_edit_recipient_confirm";
15
15
 
16
- export const CURRENT_VERSION = "1.3.28";
16
+ export const CURRENT_VERSION = "1.3.29";
package/src/themes/colors.scss ADDED
@@ -0,0 +1,10 @@
1
+ // Mixin para aplicar cor de texto
2
+ @mixin bp-text-color($color-name: 'neutral-8') {
3
+ color: var(--fs-bp-color-#{$color-name});
4
+ }
5
+
6
+ // Mixin para aplicar cor de fundo
7
+ @mixin bp-bg-color($color-name: 'neutral-0') {
8
+ background-color: var(--fs-bp-color-#{$color-name});
9
+ }
10
+
package/src/themes/layouts.scss CHANGED
@@ -1,3 +1,7 @@
1
+ // Tokens
2
+ @import "./tokens.scss";
3
+ @import "./typography.scss";
4
+
1
5
  // Global
2
6
  @import "../features/shared/layouts/GlobalLayout/global-layout.scss";
3
7
 
package/src/themes/tokens.scss ADDED
@@ -0,0 +1,169 @@
1
+ :root {
2
+ // Font size
3
+ --fs-bp-text-size-0: .75rem;
4
+ --fs-bp-text-size-1: .875rem;
5
+ --fs-bp-text-size-2: 1rem;
6
+ --fs-bp-text-size-3: 1.25rem;
7
+ --fs-bp-text-size-4: 1.5rem;
8
+ --fs-bp-text-size-5: 1.75rem;
9
+ --fs-bp-text-size-6: 1.875rem;
10
+ --fs-bp-text-size-7: 2rem;
11
+ --fs-bp-text-size-8: 2.125rem;
12
+ --fs-bp-text-size-9: 2.25rem;
13
+ --fs-bp-text-size-10: 2.5rem;
14
+
15
+ // Font size - semantic
16
+ --fs-bp-text-size-base: var(--fs-bp-text-size-2);
17
+ --fs-bp-text-caption: var(--fs-bp-text-size-0);
18
+ --fs-bp-text-body: var(--fs-bp-text-size-1);
19
+ --fs-bp-text-body-big: var(--fs-bp-text-size-2);
20
+ --fs-bp-text-display-1: var(--fs-bp-text-size-8);
21
+ --fs-bp-text-display-2: var(--fs-bp-text-size-7);
22
+ --fs-bp-text-display-3: var(--fs-bp-text-size-6);
23
+ --fs-bp-text-display-4: var(--fs-bp-text-size-5);
24
+ --fs-bp-text-display-5: var(--fs-bp-text-size-4);
25
+ --fs-bp-text-display-6: var(--fs-bp-text-size-3);
26
+
27
+ @media (min-width: 768px) {
28
+ --fs-bp-text-size-6: 2rem;
29
+ --fs-bp-text-size-7: 2.5rem;
30
+ --fs-bp-text-size-8: 3rem;
31
+ --fs-bp-text-size-9: 3.5rem;
32
+ --fs-bp-text-size-10: 5.25rem;
33
+ }
34
+
35
+ // Weight
36
+ --fs-bp-weight-regular: 400;
37
+ --fs-bp-weight-medium: 500;
38
+ --fs-bp-weight-semibold: 600;
39
+ --fs-bp-weight-bold: 700;
40
+
41
+ // Letter spacing
42
+ --fs-bp-letter-spacing-0: 0;
43
+ --fs-bp-letter-spacing-1: -0.01em;
44
+ --fs-bp-letter-spacing-2: -0.02em;
45
+ --fs-bp-letter-spacing-3: -0.04em;
46
+
47
+ // Line height
48
+ --fs-bp-line-height-base: 1.2;
49
+
50
+ // Colors - neutral
51
+ --fs-bp-color-neutral-0: #FFFFFF;
52
+ --fs-bp-color-neutral-1: #F5F5F5;
53
+ --fs-bp-color-neutral-2: #EBEBEB;
54
+ --fs-bp-color-neutral-3: #E0E0E0;
55
+ --fs-bp-color-neutral-4: #D6D6D6;
56
+ --fs-bp-color-neutral-5: #ADADAD;
57
+ --fs-bp-color-neutral-6: #858585;
58
+ --fs-bp-color-neutral-7: #5C5C5C;
59
+ --fs-bp-color-neutral-8: #1F1F1F;
60
+ --fs-bp-color-neutral-9: #000000;
61
+
62
+ // Colors - accent
63
+ --fs-bp-color-accent-0: #F1F8FD;
64
+ --fs-bp-color-accent-1: #CBE9FF;
65
+ --fs-bp-color-accent-2: #0366DD;
66
+
67
+ // Colors - success
68
+ --fs-bp-color-success-0: #E9FCE3;
69
+ --fs-bp-color-success-1: #AFF79E;
70
+ --fs-bp-color-success-2: #08A822;
71
+
72
+ // Colors - critical
73
+ --fs-bp-color-critical-0: #FDF6F5;
74
+ --fs-bp-color-critical-1: #FFDFD9;
75
+ --fs-bp-color-critical-2: #D31A15;
76
+
77
+ // Colors - warning
78
+ --fs-bp-color-warning-0: #FDF5E9;
79
+ --fs-bp-color-warning-1: #FFE0AE;
80
+ --fs-bp-color-warning-2: #F78612;
81
+
82
+ --fs-bp-color-brand: var(--fs-bp-color-accent-2);
83
+ --fs-bp-color-white: var(--fs-bp-color-neutral-0);
84
+ --fs-bp-color-black: var(--fs-bp-color-neutral-9);
85
+
86
+ // Border radius
87
+ --fs-bp-border-radius-0: 0;
88
+ --fs-bp-border-radius-1: .25rem;
89
+ --fs-bp-border-radius-2: .5rem;
90
+ --fs-bp-border-radius-3: .75rem;
91
+ --fs-bp-border-radius-4: 1.25rem;
92
+ --fs-bp-border-radius-full: 100000rem;
93
+
94
+ // Spacing
95
+ --fs-bp-spacing-0: 0;
96
+ --fs-bp-spacing-1: .25rem;
97
+ --fs-bp-spacing-2: .5rem;
98
+ --fs-bp-spacing-3: .75rem;
99
+ --fs-bp-spacing-4: 1rem;
100
+ --fs-bp-spacing-5: 1.25rem;
101
+ --fs-bp-spacing-6: 1.5rem;
102
+ --fs-bp-spacing-7: 1.75rem;
103
+ --fs-bp-spacing-8: 2rem;
104
+ --fs-bp-spacing-9: 2.5rem;
105
+ --fs-bp-spacing-10: 3rem;
106
+ --fs-bp-spacing-11: 3.5rem;
107
+ --fs-bp-spacing-12: 3.75rem;
108
+ --fs-bp-spacing-13: 4.5rem;
109
+ --fs-bp-spacing-14: 5rem;
110
+ --fs-bp-spacing-15: 5.5rem;
111
+ --fs-bp-spacing-16: 6rem;
112
+
113
+ // Margins
114
+ --fs-bp-margin-0: var(--fs-bp-spacing-0);
115
+ --fs-bp-margin-1: var(--fs-bp-spacing-1);
116
+ --fs-bp-margin-2: var(--fs-bp-spacing-2);
117
+ --fs-bp-margin-3: var(--fs-bp-spacing-3);
118
+ --fs-bp-margin-4: var(--fs-bp-spacing-4);
119
+ --fs-bp-margin-5: var(--fs-bp-spacing-5);
120
+ --fs-bp-margin-6: var(--fs-bp-spacing-6);
121
+ --fs-bp-margin-7: var(--fs-bp-spacing-7);
122
+ --fs-bp-margin-8: var(--fs-bp-spacing-8);
123
+ --fs-bp-margin-9: var(--fs-bp-spacing-9);
124
+ --fs-bp-margin-10: var(--fs-bp-spacing-10);
125
+ --fs-bp-margin-11: var(--fs-bp-spacing-11);
126
+ --fs-bp-margin-12: var(--fs-bp-spacing-12);
127
+ --fs-bp-margin-13: var(--fs-bp-spacing-13);
128
+ --fs-bp-margin-14: var(--fs-bp-spacing-14);
129
+ --fs-bp-margin-15: var(--fs-bp-spacing-15);
130
+ --fs-bp-margin-16: var(--fs-bp-spacing-16);
131
+
132
+ // Paddings
133
+ --fs-bp-padding-0: var(--fs-bp-spacing-0);
134
+ --fs-bp-padding-1: var(--fs-bp-spacing-1);
135
+ --fs-bp-padding-2: var(--fs-bp-spacing-2);
136
+ --fs-bp-padding-3: var(--fs-bp-spacing-3);
137
+ --fs-bp-padding-4: var(--fs-bp-spacing-4);
138
+ --fs-bp-padding-5: var(--fs-bp-spacing-5);
139
+ --fs-bp-padding-6: var(--fs-bp-spacing-6);
140
+ --fs-bp-padding-7: var(--fs-bp-spacing-7);
141
+ --fs-bp-padding-8: var(--fs-bp-spacing-8);
142
+ --fs-bp-padding-9: var(--fs-bp-spacing-9);
143
+ --fs-bp-padding-10: var(--fs-bp-spacing-10);
144
+ --fs-bp-padding-11: var(--fs-bp-spacing-11);
145
+ --fs-bp-padding-12: var(--fs-bp-spacing-12);
146
+ --fs-bp-padding-13: var(--fs-bp-spacing-13);
147
+ --fs-bp-padding-14: var(--fs-bp-spacing-14);
148
+ --fs-bp-padding-15: var(--fs-bp-spacing-15);
149
+ --fs-bp-padding-16: var(--fs-bp-spacing-16);
150
+
151
+ // Gap
152
+ --fs-bp-gap-0: var(--fs-bp-spacing-0);
153
+ --fs-bp-gap-1: var(--fs-bp-spacing-1);
154
+ --fs-bp-gap-2: var(--fs-bp-spacing-2);
155
+ --fs-bp-gap-3: var(--fs-bp-spacing-3);
156
+ --fs-bp-gap-4: var(--fs-bp-spacing-4);
157
+ --fs-bp-gap-5: var(--fs-bp-spacing-5);
158
+ --fs-bp-gap-6: var(--fs-bp-spacing-6);
159
+ --fs-bp-gap-7: var(--fs-bp-spacing-7);
160
+ --fs-bp-gap-8: var(--fs-bp-spacing-8);
161
+ --fs-bp-gap-9: var(--fs-bp-spacing-9);
162
+ --fs-bp-gap-10: var(--fs-bp-spacing-10);
163
+ --fs-bp-gap-11: var(--fs-bp-spacing-11);
164
+ --fs-bp-gap-12: var(--fs-bp-spacing-12);
165
+ --fs-bp-gap-13: var(--fs-bp-spacing-13);
166
+ --fs-bp-gap-14: var(--fs-bp-spacing-14);
167
+ --fs-bp-gap-15: var(--fs-bp-spacing-15);
168
+ --fs-bp-gap-16: var(--fs-bp-spacing-16);
169
+ }
package/src/themes/typography.scss ADDED
@@ -0,0 +1,76 @@
1
+ $typography: (
2
+ 'caption': (
3
+ size: var(--fs-bp-text-caption),
4
+ weight: var(--fs-bp-weight-regular),
5
+ spacing: var(--fs-bp-letter-spacing-0),
6
+ line-height: var(--fs-bp-line-height-base),
7
+ ),
8
+ 'body': (
9
+ size: var(--fs-bp-text-body),
10
+ weight: var(--fs-bp-weight-regular),
11
+ spacing: var(--fs-bp-letter-spacing-1),
12
+ line-height: var(--fs-bp-line-height-base),
13
+ ),
14
+ 'emphasis': (
15
+ size: var(--fs-bp-text-body),
16
+ weight: var(--fs-bp-weight-medium),
17
+ spacing: var(--fs-bp-letter-spacing-1),
18
+ line-height: var(--fs-bp-line-height-base),
19
+ ),
20
+ 'action': (
21
+ size: var(--fs-bp-text-body),
22
+ weight: var(--fs-bp-weight-semibold),
23
+ spacing: var(--fs-bp-letter-spacing-1),
24
+ line-height: var(--fs-bp-line-height-base),
25
+ ),
26
+ 'body-big': (
27
+ size: var(--fs-bp-text-body-big),
28
+ weight: var(--fs-bp-weight-regular),
29
+ spacing: var(--fs-bp-letter-spacing-2),
30
+ line-height: var(--fs-bp-line-height-base),
31
+ ),
32
+ 'display-1': (
33
+ size: var(--fs-bp-text-display-1),
34
+ weight: var(--fs-bp-weight-semibold),
35
+ spacing: var(--fs-bp-letter-spacing-2),
36
+ line-height: var(--fs-bp-line-height-base),
37
+ ),
38
+ 'display-2': (
39
+ size: var(--fs-bp-text-display-2),
40
+ weight: var(--fs-bp-weight-semibold),
41
+ spacing: var(--fs-bp-letter-spacing-2),
42
+ line-height: var(--fs-bp-line-height-base),
43
+ ),
44
+ 'display-3': (
45
+ size: var(--fs-bp-text-display-3),
46
+ weight: var(--fs-bp-weight-semibold),
47
+ spacing: var(--fs-bp-letter-spacing-2),
48
+ line-height: var(--fs-bp-line-height-base),
49
+ ),
50
+ 'display-4': (
51
+ size: var(--fs-bp-text-display-4),
52
+ weight: var(--fs-bp-weight-semibold),
53
+ spacing: var(--fs-bp-letter-spacing-2),
54
+ line-height: var(--fs-bp-line-height-base),
55
+ ),
56
+ 'display-5': (
57
+ size: var(--fs-bp-text-display-5),
58
+ weight: var(--fs-bp-weight-semibold),
59
+ spacing: var(--fs-bp-letter-spacing-2),
60
+ line-height: var(--fs-bp-line-height-base),
61
+ ),
62
+ 'display-6': (
63
+ size: var(--fs-bp-text-display-6),
64
+ weight: var(--fs-bp-weight-semibold),
65
+ spacing: var(--fs-bp-letter-spacing-2),
66
+ line-height: var(--fs-bp-line-height-base),
67
+ ),
68
+ );
69
+
70
+ @mixin text-style($type) {
71
+ $style: map-get($typography, $type);
72
+ font-size: map-get($style, size);
73
+ font-weight: map-get($style, weight);
74
+ line-height: map-get($style, line-height);
75
+ letter-spacing: map-get($style, spacing);
76
+ }