@commercetools-frontend/ui-kit 15.5.0 → 15.6.0

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/dist/commercetools-frontend-ui-kit.cjs.dev.js +1 -1
  2. package/dist/commercetools-frontend-ui-kit.cjs.prod.js +1 -1
  3. package/dist/commercetools-frontend-ui-kit.esm.js +1 -1
  4. package/materials/custom-properties.css +25 -0
  5. package/materials/custom-properties.json +25 -0
  6. package/materials/internals/definition.yaml +121 -9
  7. package/package.json +34 -34
package/dist/commercetools-frontend-ui-kit.cjs.dev.js CHANGED
@@ -80,7 +80,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
80
80
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
81
81
 
82
82
  // NOTE: This string will be replaced on build time with the package version.
83
- var version = "15.5.0";
83
+ var version = "15.6.0";
84
84
 
85
85
  exports.i18n = i18n__namespace;
86
86
  Object.defineProperty(exports, 'AccessibleHidden', {
package/dist/commercetools-frontend-ui-kit.cjs.prod.js CHANGED
@@ -80,7 +80,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
80
80
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
81
81
 
82
82
  // NOTE: This string will be replaced on build time with the package version.
83
- var version = "15.5.0";
83
+ var version = "15.6.0";
84
84
 
85
85
  exports.i18n = i18n__namespace;
86
86
  Object.defineProperty(exports, 'AccessibleHidden', {
package/dist/commercetools-frontend-ui-kit.esm.js CHANGED
@@ -33,6 +33,6 @@ export { useDataTableSortingState, usePaginationState, useRowSelection, useSorti
33
33
  export { customProperties, designTokens } from '@commercetools-uikit/design-system';
34
34
 
35
35
  // NOTE: This string will be replaced on build time with the package version.
36
- var version = "15.5.0";
36
+ var version = "15.6.0";
37
37
 
38
38
  export { version };
package/materials/custom-properties.css CHANGED
@@ -108,6 +108,13 @@
108
108
  --spacing-m: 16px;
109
109
  --spacing-l: 24px;
110
110
  --spacing-xl: 32px;
111
+ --spacing-10: 4px;
112
+ --spacing-20: 8px;
113
+ --spacing-30: 16px;
114
+ --spacing-40: 24px;
115
+ --spacing-50: 32px;
116
+ --spacing-60: 48px;
117
+ --spacing-70: 64px;
111
118
  --transition-linear-80ms: 80ms linear;
112
119
  --transition-easeinout-150ms: 150ms ease-in-out;
113
120
  --transition-standard: 200ms ease;
@@ -139,6 +146,8 @@
139
146
  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
140
147
  --background-color-for-input-when-disabled: hsl(195, 35.2941176471%, 98%);
141
148
  --background-color-for-input-when-hovered: hsl(0, 0%, 90%);
149
+ --background-color-for-table-cell-when-hovered: hsl(0, 0%, 90%);
150
+ --background-color-for-table-header: #213c45;
142
151
  --background-color-for-tag: hsl(0, 0%, 95%);
143
152
  --background-color-for-tag-warning: hsl(
144
153
  25.110132158590307,
@@ -162,6 +171,9 @@
162
171
  --border-color-for-button-as-icon-as-info: #078cdf;
163
172
  --border-color-for-button-as-icon-as-primary: #00b39e;
164
173
  --border-color-for-button-as-icon-when-disabled: #ccc;
174
+ --border-color-for-table-header: #ccc;
175
+ --border-color-for-table-header-when-hovered: #ccc;
176
+ --border-color-for-table-header-as-bottom: #213c45;
165
177
  --border-radius-for-button-as-big: 6px;
166
178
  --border-radius-for-button-as-small: 4px;
167
179
  --border-radius-for-button-as-icon-as-big: 6px;
@@ -179,6 +191,7 @@
179
191
  --font-color-for-tag: #1a1a1a;
180
192
  --font-color-for-tag-when-disabled: hsl(0, 0%, 60%);
181
193
  --font-color-for-text-when-inverted: #fff;
194
+ --font-color-for-table-header: #fff;
182
195
  --height-for-button-as-big: 32px;
183
196
  --height-for-button-as-small: 24px;
184
197
  --height-for-button-as-icon-as-big: 32px;
@@ -196,6 +209,8 @@
196
209
  --font-size-for-text-as-detail: 0.9231rem;
197
210
  --font-size-for-body: 13px;
198
211
  --font-size-for-link: 1rem;
212
+ --font-size-for-stamp: 1rem;
213
+ --font-size-for-table: 1rem;
199
214
  --line-height-for-text-as-h1: inherit;
200
215
  --line-height-for-text-as-h2: inherit;
201
216
  --line-height-for-text-as-h3: inherit;
@@ -211,6 +226,16 @@
211
226
  --font-weight-for-text-as-body: 400;
212
227
  --font-weight-for-text-as-detail: 400;
213
228
  --font-weight-for-button: 400;
229
+ --font-weight-for-table-header: 400;
230
+ --margin-for-table-header: 8px;
231
+ --margin-for-table-as-condensed: 8px;
232
+ --padding-for-stamp: var(--spacing-10) var(--spacing-20);
233
+ --padding-for-stamp-as-condensed: 1px var(--spacing-10);
234
+ --padding-for-tag: 5px var(--spacing-20);
235
+ --padding-for-table-header: 16px;
236
+ --padding-for-table-header-as-condensed: 8px;
237
+ --padding-for-table-cell: 16px;
238
+ --padding-for-table-cell-as-condensed: 8px;
214
239
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
215
240
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
216
241
  --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
package/materials/custom-properties.json CHANGED
@@ -96,6 +96,13 @@
96
96
  "--spacing-m": "16px",
97
97
  "--spacing-l": "24px",
98
98
  "--spacing-xl": "32px",
99
+ "--spacing-10": "4px",
100
+ "--spacing-20": "8px",
101
+ "--spacing-30": "16px",
102
+ "--spacing-40": "24px",
103
+ "--spacing-50": "32px",
104
+ "--spacing-60": "48px",
105
+ "--spacing-70": "64px",
99
106
  "--transition-linear-80ms": "80ms linear",
100
107
  "--transition-easeinout-150ms": "150ms ease-in-out",
101
108
  "--transition-standard": "200ms ease",
@@ -119,6 +126,8 @@
119
126
  "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)",
120
127
  "--background-color-for-input-when-disabled": "hsl(195, 35.2941176471%, 98%)",
121
128
  "--background-color-for-input-when-hovered": "hsl(0, 0%, 90%)",
129
+ "--background-color-for-table-cell-when-hovered": "hsl(0, 0%, 90%)",
130
+ "--background-color-for-table-header": "#213c45",
122
131
  "--background-color-for-tag": "hsl(0, 0%, 95%)",
123
132
  "--background-color-for-tag-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
124
133
  "--border-for-button-as-secondary": "none",
@@ -138,6 +147,9 @@
138
147
  "--border-color-for-button-as-icon-as-info": "#078cdf",
139
148
  "--border-color-for-button-as-icon-as-primary": "#00b39e",
140
149
  "--border-color-for-button-as-icon-when-disabled": "#ccc",
150
+ "--border-color-for-table-header": "#ccc",
151
+ "--border-color-for-table-header-when-hovered": "#ccc",
152
+ "--border-color-for-table-header-as-bottom": "#213c45",
141
153
  "--border-radius-for-button-as-big": "6px",
142
154
  "--border-radius-for-button-as-small": "4px",
143
155
  "--border-radius-for-button-as-icon-as-big": "6px",
@@ -155,6 +167,7 @@
155
167
  "--font-color-for-tag": "#1a1a1a",
156
168
  "--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)",
157
169
  "--font-color-for-text-when-inverted": "#fff",
170
+ "--font-color-for-table-header": "#fff",
158
171
  "--height-for-button-as-big": "32px",
159
172
  "--height-for-button-as-small": "24px",
160
173
  "--height-for-button-as-icon-as-big": "32px",
@@ -172,6 +185,8 @@
172
185
  "--font-size-for-text-as-detail": "0.9231rem",
173
186
  "--font-size-for-body": "13px",
174
187
  "--font-size-for-link": "1rem",
188
+ "--font-size-for-stamp": "1rem",
189
+ "--font-size-for-table": "1rem",
175
190
  "--line-height-for-text-as-h1": "inherit",
176
191
  "--line-height-for-text-as-h2": "inherit",
177
192
  "--line-height-for-text-as-h3": "inherit",
@@ -187,6 +202,16 @@
187
202
  "--font-weight-for-text-as-body": "400",
188
203
  "--font-weight-for-text-as-detail": "400",
189
204
  "--font-weight-for-button": "400",
205
+ "--font-weight-for-table-header": "400",
206
+ "--margin-for-table-header": "8px",
207
+ "--margin-for-table-as-condensed": "8px",
208
+ "--padding-for-stamp": "var(--spacing-10) var(--spacing-20)",
209
+ "--padding-for-stamp-as-condensed": "1px var(--spacing-10)",
210
+ "--padding-for-tag": "5px var(--spacing-20)",
211
+ "--padding-for-table-header": "16px",
212
+ "--padding-for-table-header-as-condensed": "8px",
213
+ "--padding-for-table-cell": "16px",
214
+ "--padding-for-table-cell-as-condensed": "8px",
190
215
  "--shadow-for-button": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
191
216
  "--shadow-for-button-when-focused": "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)",
192
217
  "--shadow-for-button-when-hovered": "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)",
package/materials/internals/definition.yaml CHANGED
@@ -165,11 +165,20 @@ choiceGroupsByTheme:
165
165
  label: Spacings
166
166
  prefix: spacing
167
167
  choices:
168
+ # Legacy deprecated tokens
168
169
  spacing-xs: 4px
169
170
  spacing-s: 8px
170
171
  spacing-m: 16px
171
172
  spacing-l: 24px
172
173
  spacing-xl: 32px
174
+ # New tokens
175
+ spacing-10: 4px
176
+ spacing-20: 8px
177
+ spacing-30: 16px
178
+ spacing-40: 24px
179
+ spacing-50: 32px
180
+ spacing-60: 48px
181
+ spacing-70: 64px
173
182
  transitions:
174
183
  label: Transitions
175
184
  prefix: transition
@@ -252,6 +261,10 @@ variants:
252
261
  description: 'To differentiate component urgent type'
253
262
  info:
254
263
  description: 'To differentiate component info type'
264
+ condensed:
265
+ description: 'Elements with a compact style'
266
+ bottom:
267
+ description: 'To differentiate component bottom style'
255
268
 
256
269
  componentGroups:
257
270
  button:
@@ -270,6 +283,14 @@ componentGroups:
270
283
  description: 'Card element'
271
284
  link:
272
285
  description: 'Link elements'
286
+ stamp:
287
+ description: 'Stamp elements'
288
+ table:
289
+ description: 'Table elements'
290
+ table-header:
291
+ description: 'Table header elements'
292
+ table-cell:
293
+ description: 'Table cell elements'
273
294
 
274
295
  decisionGroupsByTheme:
275
296
  default:
@@ -311,6 +332,10 @@ decisionGroupsByTheme:
311
332
  background-color-for-input-when-hovered:
312
333
  description: ''
313
334
  choice: color-neutral-90
335
+ background-color-for-table-cell-when-hovered:
336
+ choice: color-neutral-90
337
+ background-color-for-table-header:
338
+ choice: color-accent
314
339
  background-color-for-tag:
315
340
  description: ''
316
341
  choice: color-neutral-95
@@ -370,6 +395,12 @@ decisionGroupsByTheme:
370
395
  choice: color-primary
371
396
  border-color-for-button-as-icon-when-disabled:
372
397
  choice: color-neutral
398
+ border-color-for-table-header:
399
+ choice: color-neutral
400
+ border-color-for-table-header-when-hovered:
401
+ choice: color-neutral
402
+ border-color-for-table-header-as-bottom:
403
+ choice: color-accent
373
404
 
374
405
  borderRadiuses:
375
406
  label: Border Radius
@@ -427,6 +458,8 @@ decisionGroupsByTheme:
427
458
  font-color-for-text-when-inverted:
428
459
  description: ''
429
460
  choice: color-surface
461
+ font-color-for-table-header:
462
+ choice: color-surface
430
463
 
431
464
  heights:
432
465
  label: Height
@@ -488,6 +521,10 @@ decisionGroupsByTheme:
488
521
  font-size-for-link:
489
522
  description: ''
490
523
  choice: font-size-30
524
+ font-size-for-stamp:
525
+ choice: font-size-30
526
+ font-size-for-table:
527
+ choice: font-size-30
491
528
 
492
529
  lineHeights:
493
530
  label: Line Heights
@@ -542,6 +579,36 @@ decisionGroupsByTheme:
542
579
  choice: font-weight-400
543
580
  font-weight-for-button:
544
581
  choice: font-weight-400
582
+ font-weight-for-table-header:
583
+ choice: font-weight-400
584
+
585
+ margins:
586
+ label: Margins
587
+ prefix: margin
588
+ decisions:
589
+ margin-for-table-header:
590
+ choice: spacing-20
591
+ margin-for-table-as-condensed:
592
+ choice: spacing-20
593
+
594
+ paddings:
595
+ label: Paddings
596
+ prefix: padding
597
+ decisions:
598
+ padding-for-stamp:
599
+ choice: 'var(--spacing-10) var(--spacing-20)'
600
+ padding-for-stamp-as-condensed:
601
+ choice: '1px var(--spacing-10)'
602
+ padding-for-tag:
603
+ choice: '5px var(--spacing-20)'
604
+ padding-for-table-header:
605
+ choice: spacing-30
606
+ padding-for-table-header-as-condensed:
607
+ choice: spacing-20
608
+ padding-for-table-cell:
609
+ choice: spacing-30
610
+ padding-for-table-cell-as-condensed:
611
+ choice: spacing-20
545
612
 
546
613
  shadows:
547
614
  label: Shadows
@@ -591,12 +658,10 @@ decisionGroupsByTheme:
591
658
  choice: '#E7680D' # color-warning with 5% black opacity
592
659
  background-color-for-button-when-disabled:
593
660
  choice: color-neutral-95
594
- background-color-for-tag:
595
- description: ''
596
- choice: color-warning-95
597
- background-color-for-tag-warning:
598
- description: ''
661
+ background-color-for-table-cell-when-hovered:
599
662
  choice: color-neutral-95
663
+ background-color-for-table-header:
664
+ choice: color-surface
600
665
 
601
666
  borders:
602
667
  label: Borders
@@ -625,6 +690,12 @@ decisionGroupsByTheme:
625
690
  choice: color-surface
626
691
  border-color-for-card-when-raised:
627
692
  choice: color-neutral-90
693
+ border-color-for-table-header:
694
+ choice: color-surface
695
+ border-color-for-table-header-when-hovered:
696
+ choice: color-neutral-90
697
+ border-color-for-table-header-as-bottom:
698
+ choice: color-neutral-90
628
699
 
629
700
  borderRadiuses:
630
701
  label: Border radiuses
@@ -643,6 +714,13 @@ decisionGroupsByTheme:
643
714
  border-radius-for-card:
644
715
  choice: border-radius-4
645
716
 
717
+ fontColors:
718
+ label: Font Colors
719
+ prefix: font-color
720
+ decisions:
721
+ font-color-for-table-header:
722
+ choice: color-neutral-40
723
+
646
724
  fontSizes:
647
725
  label: Font Sizes
648
726
  prefix: font-size
@@ -680,6 +758,10 @@ decisionGroupsByTheme:
680
758
  font-size-for-link:
681
759
  description: ''
682
760
  choice: 'inherit'
761
+ font-size-for-stamp:
762
+ choice: font-size-20
763
+ font-size-for-table:
764
+ choice: font-size-20
683
765
 
684
766
  lineHeights:
685
767
  label: Line Heights
@@ -687,10 +769,10 @@ decisionGroupsByTheme:
687
769
  decisions:
688
770
  line-height-for-text-as-h1:
689
771
  description: ''
690
- choice: line-height-50
772
+ choice: line-height-60
691
773
  line-height-for-text-as-h2:
692
774
  description: ''
693
- choice: line-height-50
775
+ choice: line-height-60
694
776
  line-height-for-text-as-h3:
695
777
  description: ''
696
778
  choice: line-height-30
@@ -713,10 +795,10 @@ decisionGroupsByTheme:
713
795
  decisions:
714
796
  font-weight-for-text-as-h1:
715
797
  description: ''
716
- choice: font-weight-500
798
+ choice: font-weight-600
717
799
  font-weight-for-text-as-h2:
718
800
  description: ''
719
- choice: font-weight-500
801
+ choice: font-weight-600
720
802
  font-weight-for-text-as-h3:
721
803
  description: ''
722
804
  choice: font-weight-500
@@ -734,6 +816,8 @@ decisionGroupsByTheme:
734
816
  choice: font-weight-400
735
817
  font-weight-for-button:
736
818
  choice: font-weight-500
819
+ font-weight-for-table-header:
820
+ choice: font-weight-600
737
821
 
738
822
  heights:
739
823
  label: Heights
@@ -750,6 +834,34 @@ decisionGroupsByTheme:
750
834
  height-for-button-as-icon-as-small:
751
835
  choice: '16px'
752
836
 
837
+ margins:
838
+ label: Margins
839
+ prefix: margin
840
+ decisions:
841
+ margin-for-table-header:
842
+ choice: spacing-30
843
+ margin-for-table-cell-as-condensed:
844
+ choice: spacing-20
845
+
846
+ paddings:
847
+ label: Paddings
848
+ prefix: padding
849
+ decisions:
850
+ padding-for-stamp:
851
+ choice: '4px 12px'
852
+ padding-for-stamp-as-condensed:
853
+ choice: '0 var(--spacing-20)'
854
+ padding-for-tag:
855
+ choice: '2px 12px'
856
+ padding-for-table-header:
857
+ choice: spacing-40
858
+ padding-for-table-header-as-condensed:
859
+ choice: spacing-40
860
+ padding-for-table-cell:
861
+ choice: 'var(--spacing-30) var(--spacing-40)'
862
+ padding-for-table-cell-as-condensed:
863
+ choice: 'var(--spacing-20) var(--spacing-40)'
864
+
753
865
  shadows:
754
866
  label: Shadows
755
867
  prefix: shadow
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-frontend/ui-kit",
3
3
  "description": "A preset of all the UI-Kit components.",
4
- "version": "15.5.0",
4
+ "version": "15.6.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -24,39 +24,39 @@
24
24
  "dependencies": {
25
25
  "@babel/runtime": "^7.19.0",
26
26
  "@babel/runtime-corejs3": "^7.19.1",
27
- "@commercetools-uikit/accessible-hidden": "15.5.0",
28
- "@commercetools-uikit/avatar": "15.5.0",
29
- "@commercetools-uikit/buttons": "15.5.0",
30
- "@commercetools-uikit/card": "15.5.0",
31
- "@commercetools-uikit/collapsible": "15.5.0",
32
- "@commercetools-uikit/collapsible-motion": "15.5.0",
33
- "@commercetools-uikit/collapsible-panel": "15.5.0",
34
- "@commercetools-uikit/constraints": "15.5.0",
35
- "@commercetools-uikit/data-table": "15.5.0",
36
- "@commercetools-uikit/data-table-manager": "15.5.0",
37
- "@commercetools-uikit/design-system": "15.5.0",
38
- "@commercetools-uikit/field-errors": "15.5.0",
39
- "@commercetools-uikit/field-label": "15.5.0",
40
- "@commercetools-uikit/fields": "15.5.0",
41
- "@commercetools-uikit/grid": "15.5.0",
42
- "@commercetools-uikit/hooks": "15.5.0",
43
- "@commercetools-uikit/i18n": "15.5.0",
44
- "@commercetools-uikit/icons": "15.5.0",
45
- "@commercetools-uikit/inputs": "15.5.0",
46
- "@commercetools-uikit/label": "15.5.0",
47
- "@commercetools-uikit/link": "15.5.0",
48
- "@commercetools-uikit/loading-spinner": "15.5.0",
49
- "@commercetools-uikit/messages": "15.5.0",
50
- "@commercetools-uikit/notifications": "15.5.0",
51
- "@commercetools-uikit/pagination": "15.5.0",
52
- "@commercetools-uikit/primary-action-dropdown": "15.5.0",
53
- "@commercetools-uikit/spacings": "15.5.0",
54
- "@commercetools-uikit/stamp": "15.5.0",
55
- "@commercetools-uikit/tag": "15.5.0",
56
- "@commercetools-uikit/text": "15.5.0",
57
- "@commercetools-uikit/tooltip": "15.5.0",
58
- "@commercetools-uikit/utils": "15.5.0",
59
- "@commercetools-uikit/view-switcher": "15.5.0"
27
+ "@commercetools-uikit/accessible-hidden": "15.6.0",
28
+ "@commercetools-uikit/avatar": "15.6.0",
29
+ "@commercetools-uikit/buttons": "15.6.0",
30
+ "@commercetools-uikit/card": "15.6.0",
31
+ "@commercetools-uikit/collapsible": "15.6.0",
32
+ "@commercetools-uikit/collapsible-motion": "15.6.0",
33
+ "@commercetools-uikit/collapsible-panel": "15.6.0",
34
+ "@commercetools-uikit/constraints": "15.6.0",
35
+ "@commercetools-uikit/data-table": "15.6.0",
36
+ "@commercetools-uikit/data-table-manager": "15.6.0",
37
+ "@commercetools-uikit/design-system": "15.6.0",
38
+ "@commercetools-uikit/field-errors": "15.6.0",
39
+ "@commercetools-uikit/field-label": "15.6.0",
40
+ "@commercetools-uikit/fields": "15.6.0",
41
+ "@commercetools-uikit/grid": "15.6.0",
42
+ "@commercetools-uikit/hooks": "15.6.0",
43
+ "@commercetools-uikit/i18n": "15.6.0",
44
+ "@commercetools-uikit/icons": "15.6.0",
45
+ "@commercetools-uikit/inputs": "15.6.0",
46
+ "@commercetools-uikit/label": "15.6.0",
47
+ "@commercetools-uikit/link": "15.6.0",
48
+ "@commercetools-uikit/loading-spinner": "15.6.0",
49
+ "@commercetools-uikit/messages": "15.6.0",
50
+ "@commercetools-uikit/notifications": "15.6.0",
51
+ "@commercetools-uikit/pagination": "15.6.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "15.6.0",
53
+ "@commercetools-uikit/spacings": "15.6.0",
54
+ "@commercetools-uikit/stamp": "15.6.0",
55
+ "@commercetools-uikit/tag": "15.6.0",
56
+ "@commercetools-uikit/text": "15.6.0",
57
+ "@commercetools-uikit/tooltip": "15.6.0",
58
+ "@commercetools-uikit/utils": "15.6.0",
59
+ "@commercetools-uikit/view-switcher": "15.6.0"
60
60
  },
61
61
  "devDependencies": {
62
62
  "moment": "2.29.4",