@commercetools-frontend/ui-kit 16.7.5 → 16.8.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 +167 -127
  5. package/materials/custom-properties.json +146 -110
  6. package/materials/internals/definition.yaml +72 -34
  7. package/package.json +35 -35
package/materials/internals/definition.yaml CHANGED
@@ -36,31 +36,61 @@ choiceGroupsByTheme:
36
36
  prefix: color
37
37
  description: All colors in the system
38
38
  choices:
39
- color-primary: '#00b39e'
40
- color-primary-20: 'hsl(172.9608938547486, 100%, 20%)'
41
- color-primary-25: 'hsl(172.9608938547486, 100%, 25%)'
42
- color-primary-30: 'hsl(172.9608938547486, 100%, 30%)'
43
- color-primary-40: 'hsl(172.9608938547486, 100%, 40%)'
44
- color-primary-85: 'hsl(172.9608938547486, 100%, 85%)'
45
- color-primary-95: 'hsl(172.9608938547486, 100%, 95%)'
39
+ color-primary: 'hsl(175, 55%, 45%)'
40
+ color-primary-20: 'hsl(175, 55%, 20%)'
41
+ color-primary-25: 'hsl(175, 55%, 25%)'
42
+ color-primary-30: 'hsl(175, 55%, 30%)'
43
+ color-primary-40: 'hsl(175, 55%, 40%)'
44
+ color-primary-85: 'hsl(175, 70%, 85%)'
45
+ color-primary-90: 'hsl(175, 70%, 90%)'
46
+ color-primary-95: 'hsl(175, 90%, 95%)'
46
47
  color-accent: '#213c45'
47
48
  color-accent-10: 'hsl(195, 35.2941176471%, 10%)'
48
49
  color-accent-20: 'hsl(195, 35.2941176471%, 20%)'
49
50
  color-accent-30: 'hsl(195, 35.2941176471%, 30%)'
50
51
  color-accent-40: 'hsl(195, 35.2941176471%, 40%)'
52
+ color-accent-50: 'hsl(195, 35%, 50%)'
51
53
  color-accent-60: 'hsl(195, 35.2941176471%, 60%)'
54
+ color-accent-85: 'hsl(195, 35%, 85%)'
52
55
  color-accent-90: 'hsl(195, 35.2941176471%, 90%)'
53
56
  color-accent-95: 'hsl(195, 35.2941176471%, 95%)'
54
57
  color-accent-98: 'hsl(195, 35.2941176471%, 98%)'
55
- color-neutral: '#ccc'
58
+ color-brown-10: 'hsl(35, 90%, 10%)'
59
+ color-brown-20: 'hsl(35, 50%, 20%)'
60
+ color-brown-35: 'hsl(35, 25%, 35%)'
61
+ color-brown-50: 'hsl(35, 30%, 50%)'
62
+ color-brown-70: 'hsl(35, 40%, 70%)'
63
+ color-brown-85: 'hsl(35, 60%, 85%)'
64
+ color-brown-90: 'hsl(35, 90%, 90%)'
65
+ color-brown-95: 'hsl(35, 80%, 95%)'
66
+ color-brown-98: 'hsl(35, 90%, 98%)'
67
+ color-purple-10: 'hsl(248, 90%, 10%)'
68
+ color-purple-20: 'hsl(248, 50%, 20%)'
69
+ color-purple-35: 'hsl(248, 25%, 35%)'
70
+ color-purple-50: 'hsl(248, 30%,50%)'
71
+ color-purple-70: 'hsl(248, 40%, 70%)'
72
+ color-purple-85: 'hsl(248, 60%, 85%)'
73
+ color-purple-90: 'hsl(248, 50%, 90%)'
74
+ color-purple-95: 'hsl(248, 80%, 95%)'
75
+ color-purple-98: 'hsl(248, 90%, 98%)'
76
+ color-turquoise-10: 'hsl(180, 90%, 10%)'
77
+ color-turquoise-20: 'hsl(180, 50%, 20%)'
78
+ color-turquoise-35: 'hsl(180, 25%, 35%)'
79
+ color-turquoise-50: 'hsl(180, 30%, 45%)'
80
+ color-turquoise-70: 'hsl(180, 40%, 70%)'
81
+ color-turquoise-85: 'hsl(180, 60%, 85%)'
82
+ color-turquoise-90: 'hsl(180, 40%, 90%)'
83
+ color-turquoise-95: 'hsl(180, 80%, 95%)'
84
+ color-turquoise-98: 'hsl(180, 90%, 98%)'
85
+ color-neutral: 'hsl(232, 18%, 80%)'
56
86
  color-neutral-05: 'hsl(0deg 0% 80% / 5%)'
57
87
  color-neutral-10: 'hsl(0deg 0% 80% / 10%)'
58
- color-neutral-40: 'hsl(0, 0%, 40%)'
59
- color-neutral-60: 'hsl(0, 0%, 60%)'
60
- color-neutral-85: 'hsl(0, 0%, 85%)'
61
- color-neutral-90: 'hsl(0, 0%, 90%)'
62
- color-neutral-95: 'hsl(0, 0%, 95%)'
63
- color-neutral-98: 'hsl(0, 0%, 98%)'
88
+ color-neutral-40: 'hsl(232, 18%, 40%)'
89
+ color-neutral-60: 'hsl(232, 18%, 60%)'
90
+ color-neutral-85: 'hsl(232, 18%, 85%)'
91
+ color-neutral-90: 'hsl(232, 18%, 90%)'
92
+ color-neutral-95: 'hsl(232, 18%, 95%)'
93
+ color-neutral-98: 'hsl(232, 18%, 98%)'
64
94
  color-info: '#078cdf'
65
95
  color-info-40: 'hsl(203.05555555555554, 93.9130434783%, 40%)'
66
96
  color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)'
@@ -109,6 +139,7 @@ choiceGroupsByTheme:
109
139
  prefix: font-size
110
140
  choices:
111
141
  font-size-10: '0.75rem'
142
+ font-size-12: '0.8rem'
112
143
  font-size-20: '0.875rem'
113
144
  font-size-30: '1rem'
114
145
  font-size-40: '1.125rem'
@@ -116,6 +147,7 @@ choiceGroupsByTheme:
116
147
  font-size-60: '1.5rem'
117
148
  font-size-70: '2rem'
118
149
  font-size-80: '2.5rem'
150
+ font-size-90: '3rem'
119
151
  # These font sizes are in rems based on a root font-size of 13px and they will be removed when we replace the default theme.
120
152
  font-size-15: '0.9231rem'
121
153
  font-size-35: '1.0769rem'
@@ -139,7 +171,9 @@ choiceGroupsByTheme:
139
171
  label: Line heights
140
172
  prefix: line-height
141
173
  choices:
174
+ line-height-05: '1.125rem'
142
175
  line-height-10: '1.25rem'
176
+ line-height-18: '1.3rem'
143
177
  line-height-20: '1.375rem'
144
178
  line-height-30: '1.5rem'
145
179
  line-height-40: '1.625rem'
@@ -167,6 +201,7 @@ choiceGroupsByTheme:
167
201
  shadow-14: '0 0 0.5px rgba(0, 0, 0, 0.1)'
168
202
  shadow-15: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)'
169
203
  shadow-16: '0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)'
204
+ shadow-17: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
170
205
  constraints:
171
206
  label: Constraints
172
207
  prefix: constraint
@@ -200,6 +235,7 @@ choiceGroupsByTheme:
200
235
  spacing-l: 24px
201
236
  spacing-xl: 32px
202
237
  # New tokens
238
+ spacing-05: 2px
203
239
  spacing-10: 4px
204
240
  spacing-20: 8px
205
241
  spacing-25: 12px
@@ -275,6 +311,8 @@ variants:
275
311
  description: 'H5 text element'
276
312
  body:
277
313
  description: 'Body text element'
314
+ caption:
315
+ description: 'Caption text element'
278
316
  detail:
279
317
  description: 'Detail text element'
280
318
  icon:
@@ -514,7 +552,7 @@ decisionGroupsByTheme:
514
552
  background-color-for-table-cell-when-hovered:
515
553
  choice: color-neutral-98
516
554
  background-color-for-table-header:
517
- choice: color-neutral-95
555
+ choice: color-neutral-98
518
556
  background-color-for-tag:
519
557
  choice: color-neutral-95
520
558
  background-color-for-tag-warning:
@@ -525,12 +563,10 @@ decisionGroupsByTheme:
525
563
  choice: color-surface
526
564
  background-color-for-select-input-option-when-hovered:
527
565
  choice: color-neutral-98
528
- background-color-for-avatar:
529
- choice: color-accent
530
- background-color-for-avatar-when-highlighted:
531
- choice: color-accent-30
532
566
  background-color-for-stamp-as-positive:
533
- choice: color-primary-95
567
+ choice: color-primary-90
568
+ background-color-for-stamp-as-primary:
569
+ choice: color-primary-90
534
570
  background-color-for-localized-input-label:
535
571
  choice: color-surface
536
572
  background-color-for-localized-input-label-when-readonly:
@@ -660,7 +696,7 @@ decisionGroupsByTheme:
660
696
  border-color-for-table-header:
661
697
  choice: color-surface
662
698
  border-color-for-table-header-as-bottom:
663
- choice: color-neutral-90
699
+ choice: color-neutral-95
664
700
  border-color-for-table-manager-droppable-list:
665
701
  choice: color-neutral
666
702
  border-color-for-collapsible-panel-header:
@@ -745,7 +781,9 @@ decisionGroupsByTheme:
745
781
  border-radius-for-table-manager-droppable-list:
746
782
  choice: border-radius-4
747
783
  border-radius-for-stamp:
748
- choice: border-radius-20
784
+ choice: border-radius-4
785
+ border-radius-for-stamp-as-condensed:
786
+ choice: border-radius-2
749
787
  border-radius-for-view-switcher:
750
788
  choice: border-radius-4
751
789
  border-radius-for-content-notification:
@@ -794,6 +832,8 @@ decisionGroupsByTheme:
794
832
  choice: 'inset 0 0 0 1px'
795
833
  box-shadow-for-calendar-menu-when-focused:
796
834
  choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
835
+ box-shadow-for-table:
836
+ choice: shadow-17
797
837
 
798
838
  fontColors:
799
839
  label: Font Colors
@@ -836,7 +876,7 @@ decisionGroupsByTheme:
836
876
  font-color-for-link-as-secondary-when-active:
837
877
  choice: color-primary
838
878
  font-color-for-table-header:
839
- choice: color-solid
879
+ choice: color-neutral-40
840
880
  font-color-for-localized-input-label:
841
881
  choice: color-neutral-60
842
882
  font-color-for-view-switcher:
@@ -983,24 +1023,18 @@ decisionGroupsByTheme:
983
1023
  choice: font-size-30
984
1024
  font-size-for-text-as-body:
985
1025
  choice: font-size-30
1026
+ font-size-for-text-as-caption:
1027
+ choice: font-size-10
986
1028
  font-size-for-text-as-detail:
987
1029
  choice: font-size-20
988
1030
  font-size-for-body:
989
1031
  choice: '16px'
990
1032
  font-size-for-link:
991
1033
  choice: font-size-30
992
- font-size-for-stamp:
993
- choice: font-size-20
994
1034
  font-size-for-view-switcher:
995
1035
  choice: font-size-20
996
1036
  font-size-for-table:
997
1037
  choice: font-size-20
998
- font-size-for-avatar-as-small:
999
- choice: font-size-20
1000
- font-size-for-avatar-as-medium:
1001
- choice: font-size-30
1002
- font-size-for-avatar-as-big:
1003
- choice: font-size-80
1004
1038
  font-size-for-localized-input-label:
1005
1039
  choice: font-size-30
1006
1040
  font-size-for-content-notification:
@@ -1033,6 +1067,8 @@ decisionGroupsByTheme:
1033
1067
  choice: line-height-20
1034
1068
  line-height-for-text-as-body:
1035
1069
  choice: line-height-40
1070
+ line-height-for-text-as-caption:
1071
+ choice: line-height-05
1036
1072
  line-height-for-text-as-detail:
1037
1073
  choice: line-height-20
1038
1074
  line-height-for-select-input-options:
@@ -1056,12 +1092,14 @@ decisionGroupsByTheme:
1056
1092
  choice: font-weight-500
1057
1093
  font-weight-for-text-as-body:
1058
1094
  choice: font-weight-400
1095
+ font-weight-for-text-as-caption:
1096
+ choice: font-weight-400
1059
1097
  font-weight-for-text-as-detail:
1060
1098
  choice: font-weight-400
1061
1099
  font-weight-for-button:
1062
1100
  choice: font-weight-500
1063
1101
  font-weight-for-table-header:
1064
- choice: font-weight-600
1102
+ choice: font-weight-500
1065
1103
  font-weight-for-text-as-bold:
1066
1104
  choice: font-weight-600
1067
1105
 
@@ -1109,7 +1147,7 @@ decisionGroupsByTheme:
1109
1147
  padding-for-stamp:
1110
1148
  choice: '4px 12px'
1111
1149
  padding-for-stamp-as-condensed:
1112
- choice: '0 var(--spacing-20)'
1150
+ choice: 'var(--spacing-05) var(--spacing-10)'
1113
1151
  padding-for-tag:
1114
1152
  choice: '2px 12px'
1115
1153
  padding-for-table-header:
@@ -1218,7 +1256,7 @@ decisionGroupsByTheme:
1218
1256
  shadow-for-button-when-disabled:
1219
1257
  choice: shadow-0
1220
1258
  shadow-for-card-when-raised:
1221
- choice: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
1259
+ choice: shadow-17
1222
1260
  shadow-for-input:
1223
1261
  choice: shadow-0
1224
1262
  shadow-for-input-when-focused:
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": "16.7.5",
4
+ "version": "16.8.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -24,40 +24,40 @@
24
24
  "dependencies": {
25
25
  "@babel/runtime": "^7.20.13",
26
26
  "@babel/runtime-corejs3": "^7.20.13",
27
- "@commercetools-uikit/accessible-hidden": "16.7.5",
28
- "@commercetools-uikit/avatar": "16.7.5",
29
- "@commercetools-uikit/buttons": "16.7.5",
30
- "@commercetools-uikit/card": "16.7.5",
31
- "@commercetools-uikit/collapsible": "16.7.5",
32
- "@commercetools-uikit/collapsible-motion": "16.7.5",
33
- "@commercetools-uikit/collapsible-panel": "16.7.5",
34
- "@commercetools-uikit/constraints": "16.7.5",
35
- "@commercetools-uikit/data-table": "16.7.5",
36
- "@commercetools-uikit/data-table-manager": "16.7.5",
37
- "@commercetools-uikit/design-system": "16.7.5",
38
- "@commercetools-uikit/field-errors": "16.7.5",
39
- "@commercetools-uikit/field-label": "16.7.5",
40
- "@commercetools-uikit/fields": "16.7.5",
41
- "@commercetools-uikit/grid": "16.7.5",
42
- "@commercetools-uikit/hooks": "16.7.5",
43
- "@commercetools-uikit/i18n": "16.7.5",
44
- "@commercetools-uikit/icons": "16.7.5",
45
- "@commercetools-uikit/inputs": "16.7.5",
46
- "@commercetools-uikit/label": "16.7.5",
47
- "@commercetools-uikit/link": "16.7.5",
48
- "@commercetools-uikit/loading-spinner": "16.7.5",
49
- "@commercetools-uikit/messages": "16.7.5",
50
- "@commercetools-uikit/notifications": "16.7.5",
51
- "@commercetools-uikit/pagination": "16.7.5",
52
- "@commercetools-uikit/primary-action-dropdown": "16.7.5",
53
- "@commercetools-uikit/selectable-search-input": "16.7.5",
54
- "@commercetools-uikit/spacings": "16.7.5",
55
- "@commercetools-uikit/stamp": "16.7.5",
56
- "@commercetools-uikit/tag": "16.7.5",
57
- "@commercetools-uikit/text": "16.7.5",
58
- "@commercetools-uikit/tooltip": "16.7.5",
59
- "@commercetools-uikit/utils": "16.7.5",
60
- "@commercetools-uikit/view-switcher": "16.7.5"
27
+ "@commercetools-uikit/accessible-hidden": "16.8.0",
28
+ "@commercetools-uikit/avatar": "16.8.0",
29
+ "@commercetools-uikit/buttons": "16.8.0",
30
+ "@commercetools-uikit/card": "16.8.0",
31
+ "@commercetools-uikit/collapsible": "16.8.0",
32
+ "@commercetools-uikit/collapsible-motion": "16.8.0",
33
+ "@commercetools-uikit/collapsible-panel": "16.8.0",
34
+ "@commercetools-uikit/constraints": "16.8.0",
35
+ "@commercetools-uikit/data-table": "16.8.0",
36
+ "@commercetools-uikit/data-table-manager": "16.8.0",
37
+ "@commercetools-uikit/design-system": "16.8.0",
38
+ "@commercetools-uikit/field-errors": "16.8.0",
39
+ "@commercetools-uikit/field-label": "16.8.0",
40
+ "@commercetools-uikit/fields": "16.8.0",
41
+ "@commercetools-uikit/grid": "16.8.0",
42
+ "@commercetools-uikit/hooks": "16.8.0",
43
+ "@commercetools-uikit/i18n": "16.8.0",
44
+ "@commercetools-uikit/icons": "16.8.0",
45
+ "@commercetools-uikit/inputs": "16.8.0",
46
+ "@commercetools-uikit/label": "16.8.0",
47
+ "@commercetools-uikit/link": "16.8.0",
48
+ "@commercetools-uikit/loading-spinner": "16.8.0",
49
+ "@commercetools-uikit/messages": "16.8.0",
50
+ "@commercetools-uikit/notifications": "16.8.0",
51
+ "@commercetools-uikit/pagination": "16.8.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "16.8.0",
53
+ "@commercetools-uikit/selectable-search-input": "16.8.0",
54
+ "@commercetools-uikit/spacings": "16.8.0",
55
+ "@commercetools-uikit/stamp": "16.8.0",
56
+ "@commercetools-uikit/tag": "16.8.0",
57
+ "@commercetools-uikit/text": "16.8.0",
58
+ "@commercetools-uikit/tooltip": "16.8.0",
59
+ "@commercetools-uikit/utils": "16.8.0",
60
+ "@commercetools-uikit/view-switcher": "16.8.0"
61
61
  },
62
62
  "devDependencies": {
63
63
  "moment": "2.29.4",