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

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 (11) hide show
  1. package/CHANGELOG.md +16 -1
  2. package/package.json +1 -1
  3. package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss +98 -77
  4. package/src/features/shared/components/BasicCard/BasicCard.tsx +2 -2
  5. package/src/features/shared/components/Card/card.scss +5 -7
  6. package/src/features/shared/components/HeaderInside/header-inside.scss +16 -6
  7. package/src/features/shared/components/VerticalNav/vertical-nav.scss +23 -17
  8. package/src/features/shared/utils/constants.ts +1 -1
  9. package/src/themes/layouts.scss +4 -0
  10. package/src/themes/tokens.scss +170 -0
  11. package/src/themes/typography.scss +76 -0
package/CHANGELOG.md CHANGED
@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [1.3.30] - 2025-11-25
11
+
12
+ ### Changed
13
+
14
+ - Replace faststore tokens in Org Unit Details page with our tokens and mixins
15
+
16
+ ## [1.3.29] - 2025-11-25
17
+
18
+ ### Added
19
+
20
+ - Create tokens file with variables according with design system definition
21
+ - Create typography mixins
22
+
10
23
  ## [1.3.28] - 2025-11-25
11
24
 
12
25
  ### Added
@@ -274,7 +287,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
274
287
  - Add CHANGELOG file
275
288
  - Add README file
276
289
 
277
- [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.28...HEAD
290
+ [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.30...HEAD
278
291
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
279
292
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
280
293
  [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -289,6 +302,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
289
302
 
290
303
  # <<<<<<< HEAD
291
304
 
305
+ [1.3.30]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.29...v1.3.30
306
+ [1.3.29]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.28...v1.3.29
292
307
  [1.3.28]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.27...v1.3.28
293
308
  [1.3.27]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.26...v1.3.27
294
309
  [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.30",
4
4
  "description": "A plugin for faststore with buyer portal",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss CHANGED
@@ -12,114 +12,135 @@
12
12
  @import "../../../shared/components/LetterHighlight/letter-highlight.scss";
13
13
  @import "../../../shared/components/HeaderInside/header-inside.scss";
14
14
 
15
- $fs-spacing-3-0: calc(
16
- var(--fs-spacing-3) + var(--fs-spacing-0)
17
- ); // 1.25rem, 20px
18
- $fs-spacing-3-2: calc(
19
- var(--fs-spacing-3) + var(--fs-spacing-2)
20
- ); // 1.75rem, 28px
21
- $fs-spacing-7-2: calc(
22
- var(--fs-spacing-7) + var(--fs-spacing-2)
23
- ); // 3.75rem, 52px
24
- $fs-spacing-9-0: calc(
25
- var(--fs-spacing-9) + var(--fs-spacing-0)
26
- ); // 4.25rem, 68px
27
- $fs-spacing-13-4: calc(
28
- var(--fs-spacing-13) + var(--fs-spacing-4)
29
- ); // 7.5rem, 120px
30
-
31
- padding: 0 $fs-spacing-7-2 $fs-spacing-13-4 $fs-spacing-7-2;
32
-
33
- @include media("<notebook") {
34
- padding: 0 var(--fs-spacing-7) $fs-spacing-13-4;
35
- }
15
+ width: 100%;
16
+ max-width: 90rem; // 1440px;
17
+
18
+ margin: var(--fs-bp-margin-0) var(--fs-bp-margin-auto);
19
+ padding: var(--fs-bp-margin-0) var(--fs-bp-padding-5);
20
+ padding-bottom: var(--fs-bp-padding-12);
36
21
 
37
- @include media("<tablet") {
38
- padding: 0 $fs-spacing-3-0 $fs-spacing-7-2;
22
+ @include media('>=tablet') {
23
+ padding-left: var(--fs-bp-padding-10);
24
+ padding-right: var(--fs-bp-padding-10);
39
25
  }
40
26
 
41
- min-height: calc(100vh - $fs-spacing-9-0);
42
- display: flex;
43
- flex-direction: column;
27
+ @include media('>=notebook') {
28
+ padding-left: var(--fs-bp-padding-12);
29
+ padding-right: var(--fs-bp-padding-12);
30
+ }
44
31
 
45
32
  [data-fs-bp-header-inside] {
46
- margin: 0;
33
+ margin: var(--fs-bp-margin-4) var(--fs-bp-margin-0)'';
47
34
  height: 4.5rem;
48
35
 
49
- @include media("<tablet") {
50
- margin: var(--fs-spacing-3) 0;
51
- }
52
-
53
- [data-fs-header-inside-button] {
54
- @include media("<tablet") {
55
- display: none;
56
- }
36
+ @include media(">=tablet") {
37
+ margin: var(--fs-bp-margin-0);
57
38
  }
58
39
  }
59
40
 
60
41
  [data-fs-org-units-details-grid] {
61
42
  display: grid;
62
43
  flex: 1;
63
- gap: var(--fs-spacing-3);
64
- grid-template-columns: repeat(2, 1fr);
65
- grid-auto-rows: 1fr;
44
+ grid-template-columns: 1fr;
45
+ grid-auto-rows: auto;
46
+ gap: var(--fs-bp-gap-5);
47
+
48
+ @include media(">=tablet") {
49
+ grid-template-columns: repeat(2, 1fr);
50
+ grid-auto-rows: 1fr;
51
+ }
52
+ }
53
+
54
+ [data-fs-bp-contracts-settings-card],
55
+ [data-fs-bp-contracts-list-card] {
56
+ grid-row: 1 / span 2;
57
+ }
66
58
 
67
- @include media("<notebook") {
68
- grid-template-columns: 1fr;
69
- grid-auto-rows: auto;
59
+ [data-fs-bp-contracts-list-card] {
60
+ [data-fs-card-body] {
61
+ max-height: 60vh;
62
+ overflow-y: auto;
70
63
  }
71
64
  }
72
65
 
73
- [data-fs-bp-basic-card] {
74
- [data-fs-bp-letter-highlight] {
75
- margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
66
+ [data-fs-card] {
67
+ border-radius: var(fs-bp-border-radius-3);
68
+
69
+ [data-fs-card-body] {
70
+ padding: var(--fs-bp-margin-4) var(--fs-bp-margin-0) var(--fs-bp-margin-5);
76
71
 
77
- @include media("<tablet") {
78
- width: var(--fs-spacing-6);
79
- height: var(--fs-spacing-6);
80
- margin-left: 0;
72
+ @include media('>=tablet') {
73
+ padding: var(--fs-bp-margin-7) var(--fs-bp-margin-3) var(--fs-bp-margin-8);
81
74
  }
82
75
  }
83
- [data-fs-vertical-nav-menu] {
84
- [data-fs-vertical-nav-menu-org-wrapper] {
85
- [data-fs-vertical-nav-menu-org-name] {
86
- @include media("<tablet") {
87
- margin-left: 0;
88
- margin-top: var(--fs-spacing-1);
89
- }
76
+
77
+ [data-fs-card-footer] {
78
+ padding: var(--fs-bp-padding-5);
79
+
80
+ @include media('>=tablet') {
81
+ padding-left: var(--fs-bp-padding-8);
82
+ padding-right: var(--fs-bp-padding-8);
83
+ }
84
+
85
+ [data-fs-card-footer-link] {
86
+ color: var(--fs-bp-color-brand);
87
+ @include text-style('action');
88
+
89
+ @include media('>=tablet') {
90
+ @include text-style('emphasis');
90
91
  }
91
92
  }
93
+ }
92
94
 
93
- [data-fs-vertical-nav-menu-list] {
94
- @include media("<tablet") {
95
- margin-top: var(--fs-spacing-1);
95
+ &[data-fs-bp-contracts-settings-card] {
96
+ [data-fs-bp-letter-highlight] {
97
+ @include text-style('body');
98
+ margin-left: var(--fs-bp-margin-5);
99
+ margin-right: var(--fs-bp-margin-2);
100
+ width: var(--fs-bp-spacing-9);
101
+ height: var(--fs-bp-spacing-9);
102
+
103
+ @include media('>=tablet') {
104
+ @include text-style('display-6');
105
+ margin-bottom: var(--fs-bp-margin-3);
106
+ width: var(--fs-bp-spacing-12);
107
+ height: var(--fs-bp-spacing-12);
96
108
  }
109
+ }
110
+
111
+ [data-fs-card-body] {
112
+ padding-top: var(--fs-bp-padding-5);
97
113
 
98
- @include media("<tablet") {
99
- [data-fs-vertical-nav-menu-link] {
100
- position: relative;
101
- padding: 0;
102
- height: auto;
103
- line-height: var(--fs-spacing-6);
104
-
105
- &:hover {
106
- border-radius: 0;
107
- }
108
- }
114
+ @include media ('>=tablet') {
115
+ padding-top: var(--fs-bp-padding-7);
109
116
  }
110
117
  }
111
118
  }
112
119
  }
113
120
 
114
- [data-fs-bp-contracts-settings-card],
115
- [data-fs-bp-contracts-list-card] {
116
- grid-row: 1 / span 2;
117
- }
121
+ [data-fs-vertical-nav-menu] {
122
+ [data-fs-vertical-nav-menu-list] {
123
+ @include media('>=tablet') {
124
+ margin-top: var(--fs-bp-margin-7);
125
+ }
118
126
 
119
- [data-fs-bp-contracts-list-card] {
120
- [data-fs-card-body] {
121
- max-height: 60vh;
122
- overflow-y: auto;
127
+ [data-fs-vertical-nav-menu-link] {
128
+ border-radius: var(--fs-bp-border-radius-0);
129
+
130
+ @include media('>=tablet') {
131
+ border-radius: var(--fs-bp-border-radius-full);
132
+ }
133
+ }
134
+ }
135
+
136
+ [data-fs-vertical-nav-menu-org-wrapper] {
137
+ [data-fs-vertical-nav-menu-org-name] {
138
+ margin-top: var(--fs-bp-margin-0);
139
+ }
123
140
  }
124
141
  }
142
+
143
+ [data-fs-bp-org-unit-details-dropdown] {
144
+ position: fixed;
145
+ }
125
146
  }
package/src/features/shared/components/BasicCard/BasicCard.tsx CHANGED
@@ -69,8 +69,8 @@ export const BasicCard = ({
69
69
  <Icon
70
70
  name="CaretRight"
71
71
  data-fs-card-footer-icon
72
- height={12}
73
- width={12}
72
+ height={24}
73
+ width={24}
74
74
  />
75
75
  }
76
76
  aria-label={footerMessage}
package/src/features/shared/components/Card/card.scss CHANGED
@@ -218,16 +218,14 @@
218
218
  color: #0366dd;
219
219
  text-decoration: none;
220
220
  }
221
- [data-fs-button-wrapper] {
222
- height: var(--fs-spacing-6) !important;
223
- width: var(--fs-spacing-6) !important;
224
- }
225
221
  [data-fs-icon-button] {
226
222
  display: inline-flex;
227
- height: var(--fs-spacing-6) !important;
228
- min-height: var(--fs-spacing-6) !important;
229
- width: var(--fs-spacing-6) !important;
230
223
  overflow: hidden;
224
+ padding: var(--fs-bp-padding-0);
225
+
226
+ [data-fs-button-icon] {
227
+ display: inline-flex;
228
+ }
231
229
  }
232
230
 
233
231
  [data-fs-card-footer-icon] {
package/src/features/shared/components/HeaderInside/header-inside.scss CHANGED
@@ -22,16 +22,26 @@
22
22
  }
23
23
 
24
24
  [data-fs-header-inside-button] {
25
- display: flex;
25
+ display: inline-flex;
26
26
  align-items: center;
27
27
  justify-content: center;
28
- width: var(--fs-spacing-6);
29
- height: var(--fs-spacing-6);
30
- border-radius: var(--fs-border-radius-pill);
31
- background-color: #0366dd;
28
+ width: var(--fs-bp-spacing-10);
29
+ height: var(--fs-bp-spacing-10);
30
+ border-radius: var(--fs-bp-border-radius-full);
32
31
  color: #ffffff;
33
- margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
34
32
  cursor: pointer;
33
+ position: fixed;
34
+ bottom: var(--fs-bp-spacing-5);
35
+ right: var(--fs-bp-spacing-5);
36
+ background-color: var(--fs-bp-color-brand);
37
+ color: var(--fs-bp-color-white);
38
+
39
+ @include media ('>=tablet') {
40
+ position: static;
41
+ margin-left: var(--fs-bp-spacing-5);
42
+ width: var(--fs-bp-spacing-9);
43
+ height: var(--fs-bp-spacing-9);
44
+ }
35
45
 
36
46
  &:disabled {
37
47
  background-color: #f5f5f5;
package/src/features/shared/components/VerticalNav/vertical-nav.scss CHANGED
@@ -9,17 +9,19 @@
9
9
  justify-content: space-between;
10
10
 
11
11
  [data-fs-vertical-nav-menu-org-name] {
12
- font-weight: var(--fs-text-weight-semibold);
13
- font-size: var(--fs-text-size-3);
14
- line-height: var(--fs-text-size-5);
15
- color: #000000;
16
- margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
17
- margin-top: var(--fs-spacing-1);
12
+ margin-left: var(--fs-bp-margin-5);
13
+ @include text-style('body-big');
14
+ color: var(--fs-bp-color-neutral-9);
15
+ font-weight: var(--fs-bp-weight-semibold);
16
+
17
+ @include media('>=tablet') {
18
+ @include text-style('display-6');
19
+ }
18
20
  }
19
21
  }
20
22
 
21
23
  [data-fs-vertical-nav-menu-list] {
22
- margin-top: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
24
+ margin-top: var(--fs-bp-margin-3);
23
25
  display: flex;
24
26
  flex-direction: column;
25
27
 
@@ -28,27 +30,31 @@
28
30
  }
29
31
 
30
32
  [data-fs-vertical-nav-menu-link] {
33
+ padding: var(--fs-bp-padding-2) var(--fs-bp-padding-5);
34
+ color: var(--fs-bp-color-neutral-9);
35
+ border-radius: var(--fs-bp-border-radius-full);
36
+ @include text-style('emphasis');
31
37
  display: flex;
32
- text-decoration: none;
33
- color: #000000;
34
- padding: var(--fs-spacing-2)
35
- calc(var(--fs-spacing-3) + var(--fs-spacing-0));
36
- width: 21.25rem;
37
- height: var(--fs-spacing-6);
38
- border-radius: 6.25rem;
38
+ align-items: center;
39
+ min-height: var(--fs-bp-spacing-9);
39
40
  width: 100%;
41
+ text-decoration: none;
40
42
 
41
43
  &:hover {
42
- background-color: #f5f5f5;
44
+ background-color: var(--fs-bp-color-neutral-1);
45
+ }
46
+
47
+ @include media('>=tablet') {
48
+ color: var(--fs-bp-color-neutral-8);
43
49
  }
44
50
  }
45
51
 
46
52
  [data-fs-vertical-nav-menu-link-is-active="true"] {
47
- background-color: #f5f5f5;
53
+ background-color: var(--fs-bp-color-neutral-1);
48
54
  }
49
55
 
50
56
  &:first-child {
51
- margin-top: 0;
57
+ margin-top: var(--fs-bp-margin-0);
52
58
  }
53
59
  }
54
60
  }
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.30";
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,170 @@
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
+ --fs-bp-margin-auto: auto;
132
+
133
+ // Paddings
134
+ --fs-bp-padding-0: var(--fs-bp-spacing-0);
135
+ --fs-bp-padding-1: var(--fs-bp-spacing-1);
136
+ --fs-bp-padding-2: var(--fs-bp-spacing-2);
137
+ --fs-bp-padding-3: var(--fs-bp-spacing-3);
138
+ --fs-bp-padding-4: var(--fs-bp-spacing-4);
139
+ --fs-bp-padding-5: var(--fs-bp-spacing-5);
140
+ --fs-bp-padding-6: var(--fs-bp-spacing-6);
141
+ --fs-bp-padding-7: var(--fs-bp-spacing-7);
142
+ --fs-bp-padding-8: var(--fs-bp-spacing-8);
143
+ --fs-bp-padding-9: var(--fs-bp-spacing-9);
144
+ --fs-bp-padding-10: var(--fs-bp-spacing-10);
145
+ --fs-bp-padding-11: var(--fs-bp-spacing-11);
146
+ --fs-bp-padding-12: var(--fs-bp-spacing-12);
147
+ --fs-bp-padding-13: var(--fs-bp-spacing-13);
148
+ --fs-bp-padding-14: var(--fs-bp-spacing-14);
149
+ --fs-bp-padding-15: var(--fs-bp-spacing-15);
150
+ --fs-bp-padding-16: var(--fs-bp-spacing-16);
151
+
152
+ // Gap
153
+ --fs-bp-gap-0: var(--fs-bp-spacing-0);
154
+ --fs-bp-gap-1: var(--fs-bp-spacing-1);
155
+ --fs-bp-gap-2: var(--fs-bp-spacing-2);
156
+ --fs-bp-gap-3: var(--fs-bp-spacing-3);
157
+ --fs-bp-gap-4: var(--fs-bp-spacing-4);
158
+ --fs-bp-gap-5: var(--fs-bp-spacing-5);
159
+ --fs-bp-gap-6: var(--fs-bp-spacing-6);
160
+ --fs-bp-gap-7: var(--fs-bp-spacing-7);
161
+ --fs-bp-gap-8: var(--fs-bp-spacing-8);
162
+ --fs-bp-gap-9: var(--fs-bp-spacing-9);
163
+ --fs-bp-gap-10: var(--fs-bp-spacing-10);
164
+ --fs-bp-gap-11: var(--fs-bp-spacing-11);
165
+ --fs-bp-gap-12: var(--fs-bp-spacing-12);
166
+ --fs-bp-gap-13: var(--fs-bp-spacing-13);
167
+ --fs-bp-gap-14: var(--fs-bp-spacing-14);
168
+ --fs-bp-gap-15: var(--fs-bp-spacing-15);
169
+ --fs-bp-gap-16: var(--fs-bp-spacing-16);
170
+ }
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
+ }