@cfx-dev/ui-components 5.0.1 → 5.0.3

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.
@@ -15,6 +15,7 @@ body {
15
15
  @include tokens.flyout-tokens;
16
16
  @include tokens.color-tokens;
17
17
  @include tokens.offset-tokens;
18
+ @include tokens.spacing-tokens;
18
19
  @include tokens.border-radius-tokens;
19
20
  @include tokens.switch-tokens;
20
21
  @include tokens.input-dropzone-tokens;
@@ -83,7 +83,7 @@
83
83
 
84
84
  @mixin text-responsive-tokens() {
85
85
  // Mobile sizes
86
- @include ui.define-font-size('xxxsmall', ui.gs(110), 1.3, ui.gs(100));
86
+ @include ui.define-font-size('xxxsmall', ui.gs(140), 1.3, ui.gs(100));
87
87
  @include ui.define-font-size('xxsmall', ui.gs(120), 1.5, ui.gs(110));
88
88
  @include ui.define-font-size('xsmall', ui.gs(140), 1.5, ui.gs(110));
89
89
  @include ui.define-font-size('small', ui.gs(160), 1.5, ui.gs(150));
@@ -96,7 +96,7 @@
96
96
 
97
97
  // Tablet sizes
98
98
  @include ui.media-min('medium') {
99
- @include ui.define-font-size('xxxsmall', ui.gs(110), 1.3, ui.gs(100));
99
+ @include ui.define-font-size('xxxsmall', ui.gs(140), 1.3, ui.gs(100));
100
100
  @include ui.define-font-size('xxsmall', ui.gs(120), 1.5, ui.gs(110));
101
101
  @include ui.define-font-size('xsmall', ui.gs(140), 1.5, ui.gs(110));
102
102
  @include ui.define-font-size('small', ui.gs(160), 1.5, ui.gs(150));
@@ -110,8 +110,8 @@
110
110
 
111
111
  // Desktop sizes
112
112
  @include ui.media-min('large') {
113
- @include ui.define-font-size('xxxsmall', ui.gs(110), 1.3, ui.gs(100));
114
- @include ui.define-font-size('xxsmall', ui.gs(120), 1.5, ui.gs(110));
113
+ @include ui.define-font-size('xxxsmall', ui.gs(140), 1.3, ui.gs(100));
114
+ @include ui.define-font-size('xxsmall', ui.gs(140), 1.5, ui.gs(110));
115
115
  @include ui.define-font-size('xsmall', ui.gs(160), 1.5, ui.gs(120));
116
116
  @include ui.define-font-size('small', ui.gs(180), 1.5, ui.gs(160));
117
117
  @include ui.define-font-size('medium', ui.gs(240), 1.3, ui.gs(110));
@@ -124,8 +124,8 @@
124
124
 
125
125
  // Large Desktop sizes - same as desktop
126
126
  @include ui.media-min('xlarge') {
127
- @include ui.define-font-size('xxxsmall', ui.gs(110), 1.3, ui.gs(100));
128
- @include ui.define-font-size('xxsmall', ui.gs(120), 1.5, ui.gs(110));
127
+ @include ui.define-font-size('xxxsmall', ui.gs(140), 1.3, ui.gs(100));
128
+ @include ui.define-font-size('xxsmall', ui.gs(140), 1.5, ui.gs(110));
129
129
  @include ui.define-font-size('xsmall', ui.gs(160), 1.5, ui.gs(120));
130
130
  @include ui.define-font-size('small', ui.gs(180), 1.5, ui.gs(160));
131
131
  @include ui.define-font-size('medium', ui.gs(240), 1.3, ui.gs(110));
@@ -143,6 +143,12 @@
143
143
  }
144
144
  }
145
145
 
146
+ @mixin spacing-tokens() {
147
+ @each $name, $value in ui.$spacingMap {
148
+ @include ui.def('spacing-#{$name}', $value);
149
+ }
150
+ }
151
+
146
152
  @mixin spacer-tokens() {
147
153
  // Mobile sizes
148
154
  @include ui.def('spacer-xxsmall', ui.gs(100));
@@ -36,7 +36,7 @@ var h;
36
36
  }
37
37
  r.spacer = c;
38
38
  function m(e) {
39
- return `var(--spacing-${e})`;
39
+ return `var(--spacing-${e.slice(2)})`;
40
40
  }
41
41
  r.spacing = m;
42
42
  function A(e, t, i = 1) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cfx-dev/ui-components",
3
3
  "private": false,
4
- "version": "5.0.1",
4
+ "version": "5.0.3",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "main": "dist/main.js",