@rijkshuisstijl-community/design-tokens 1.0.0-alpha.28 → 1.0.0-alpha.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.
- package/dist/_variables.scss +18 -1
- package/dist/index.css +18 -1
- package/dist/index.d.ts +18 -1
- package/dist/index.js +18 -1
- package/dist/index.json +17 -0
- package/dist/index.tokens.json +29 -0
- package/dist/root.css +18 -1
- package/dist/tokens.d.ts +30 -1
- package/dist/tokens.js +422 -1
- package/dist/variables.less +18 -1
- package/figma/figma.tokens.json +85 -0
- package/package.json +2 -2
- package/src/generated/figma.tokens.json +80 -0
package/dist/_variables.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on Wed, 16 Oct 2024
|
|
3
|
+
// Generated on Wed, 16 Oct 2024 13:36:15 GMT
|
|
4
4
|
|
|
5
5
|
$rhc-space-700: 3.5rem;
|
|
6
6
|
$rhc-space-600: 3rem;
|
|
@@ -298,6 +298,23 @@ $rhc-logo-img-color: #154273;
|
|
|
298
298
|
$rhc-logo-img-block-size: 96px;
|
|
299
299
|
$rhc-logo-img-inline-size: 48px;
|
|
300
300
|
$rhc-logo-img-background-color: #F1F5F9;
|
|
301
|
+
$rhc-message-list-item-heading-color: #154273;
|
|
302
|
+
$rhc-message-list-item-label-line-height: 150%;
|
|
303
|
+
$rhc-message-list-item-label-font-weight: 700;
|
|
304
|
+
$rhc-message-list-item-label-font-size: 1.25rem;
|
|
305
|
+
$rhc-message-list-item-label-font-family: Fira Sans, Arial, Verdana, sans-serif;
|
|
306
|
+
$rhc-message-list-item-content-row-gap: 0.5rem;
|
|
307
|
+
$rhc-message-list-item-content-column-gap: 0.5rem;
|
|
308
|
+
$rhc-message-list-item-padding-inline: 1rem;
|
|
309
|
+
$rhc-message-list-item-padding-block: 0.75rem;
|
|
310
|
+
$rhc-message-list-item-min-height: 48px;
|
|
311
|
+
$rhc-message-list-item-icon-color: #154273;
|
|
312
|
+
$rhc-message-list-item-icon-size: 24px;
|
|
313
|
+
$rhc-message-list-item-column-gap: 1rem;
|
|
314
|
+
$rhc-message-list-item-color: #334155;
|
|
315
|
+
$rhc-message-list-item-border-width: 1px;
|
|
316
|
+
$rhc-message-list-item-border-color: #CBD5E1;
|
|
317
|
+
$rhc-message-list-item-background-color: #fff;
|
|
301
318
|
$rhc-nav-bar-border-color: #64748B;
|
|
302
319
|
$rhc-nav-bar-color: #154273;
|
|
303
320
|
$rhc-nav-bar-background-color: #fff;
|
package/dist/index.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Wed, 16 Oct 2024
|
|
3
|
+
* Generated on Wed, 16 Oct 2024 13:36:15 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
.rhc-theme {
|
|
@@ -300,6 +300,23 @@
|
|
|
300
300
|
--rhc-logo-img-block-size: 96px;
|
|
301
301
|
--rhc-logo-img-inline-size: 48px;
|
|
302
302
|
--rhc-logo-img-background-color: #F1F5F9;
|
|
303
|
+
--rhc-message-list-item-heading-color: #154273;
|
|
304
|
+
--rhc-message-list-item-label-line-height: 150%;
|
|
305
|
+
--rhc-message-list-item-label-font-weight: 700;
|
|
306
|
+
--rhc-message-list-item-label-font-size: 1.25rem;
|
|
307
|
+
--rhc-message-list-item-label-font-family: Fira Sans, Arial, Verdana, sans-serif;
|
|
308
|
+
--rhc-message-list-item-content-row-gap: 0.5rem;
|
|
309
|
+
--rhc-message-list-item-content-column-gap: 0.5rem;
|
|
310
|
+
--rhc-message-list-item-padding-inline: 1rem;
|
|
311
|
+
--rhc-message-list-item-padding-block: 0.75rem;
|
|
312
|
+
--rhc-message-list-item-min-height: 48px;
|
|
313
|
+
--rhc-message-list-item-icon-color: #154273;
|
|
314
|
+
--rhc-message-list-item-icon-size: 24px;
|
|
315
|
+
--rhc-message-list-item-column-gap: 1rem;
|
|
316
|
+
--rhc-message-list-item-color: #334155;
|
|
317
|
+
--rhc-message-list-item-border-width: 1px;
|
|
318
|
+
--rhc-message-list-item-border-color: #CBD5E1;
|
|
319
|
+
--rhc-message-list-item-background-color: #fff;
|
|
303
320
|
--rhc-nav-bar-border-color: #64748B;
|
|
304
321
|
--rhc-nav-bar-color: #154273;
|
|
305
322
|
--rhc-nav-bar-background-color: #fff;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Wed, 16 Oct 2024
|
|
3
|
+
* Generated on Wed, 16 Oct 2024 13:36:15 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const utrechtActionActivateCursor : string;
|
|
@@ -770,6 +770,23 @@ export const rhcNavBarHeadingFontWeight : number;
|
|
|
770
770
|
export const rhcNavBarBackgroundColor : string;
|
|
771
771
|
export const rhcNavBarColor : string;
|
|
772
772
|
export const rhcNavBarBorderColor : string;
|
|
773
|
+
export const rhcMessageListItemBackgroundColor : string;
|
|
774
|
+
export const rhcMessageListItemBorderColor : string;
|
|
775
|
+
export const rhcMessageListItemBorderWidth : string;
|
|
776
|
+
export const rhcMessageListItemColor : string;
|
|
777
|
+
export const rhcMessageListItemColumnGap : string;
|
|
778
|
+
export const rhcMessageListItemIconSize : string;
|
|
779
|
+
export const rhcMessageListItemIconColor : string;
|
|
780
|
+
export const rhcMessageListItemMinHeight : string;
|
|
781
|
+
export const rhcMessageListItemPaddingBlock : string;
|
|
782
|
+
export const rhcMessageListItemPaddingInline : string;
|
|
783
|
+
export const rhcMessageListItemContentColumnGap : string;
|
|
784
|
+
export const rhcMessageListItemContentRowGap : string;
|
|
785
|
+
export const rhcMessageListItemLabelFontFamily : string;
|
|
786
|
+
export const rhcMessageListItemLabelFontSize : string;
|
|
787
|
+
export const rhcMessageListItemLabelFontWeight : number;
|
|
788
|
+
export const rhcMessageListItemLabelLineHeight : string;
|
|
789
|
+
export const rhcMessageListItemHeadingColor : string;
|
|
773
790
|
export const rhcLogoImgBackgroundColor : string;
|
|
774
791
|
export const rhcLogoImgInlineSize : string;
|
|
775
792
|
export const rhcLogoImgBlockSize : string;
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Wed, 16 Oct 2024
|
|
3
|
+
* Generated on Wed, 16 Oct 2024 13:36:15 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const utrechtActionActivateCursor = "pointer";
|
|
@@ -769,6 +769,23 @@ export const rhcNavBarHeadingFontWeight = 700;
|
|
|
769
769
|
export const rhcNavBarBackgroundColor = "#fff";
|
|
770
770
|
export const rhcNavBarColor = "#154273";
|
|
771
771
|
export const rhcNavBarBorderColor = "#64748B";
|
|
772
|
+
export const rhcMessageListItemBackgroundColor = "#fff";
|
|
773
|
+
export const rhcMessageListItemBorderColor = "#CBD5E1";
|
|
774
|
+
export const rhcMessageListItemBorderWidth = "1px";
|
|
775
|
+
export const rhcMessageListItemColor = "#334155";
|
|
776
|
+
export const rhcMessageListItemColumnGap = "1rem";
|
|
777
|
+
export const rhcMessageListItemIconSize = "24px";
|
|
778
|
+
export const rhcMessageListItemIconColor = "#154273";
|
|
779
|
+
export const rhcMessageListItemMinHeight = "48px";
|
|
780
|
+
export const rhcMessageListItemPaddingBlock = "0.75rem";
|
|
781
|
+
export const rhcMessageListItemPaddingInline = "1rem";
|
|
782
|
+
export const rhcMessageListItemContentColumnGap = "0.5rem";
|
|
783
|
+
export const rhcMessageListItemContentRowGap = "0.5rem";
|
|
784
|
+
export const rhcMessageListItemLabelFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
785
|
+
export const rhcMessageListItemLabelFontSize = "1.25rem";
|
|
786
|
+
export const rhcMessageListItemLabelFontWeight = 700;
|
|
787
|
+
export const rhcMessageListItemLabelLineHeight = "150%";
|
|
788
|
+
export const rhcMessageListItemHeadingColor = "#154273";
|
|
772
789
|
export const rhcLogoImgBackgroundColor = "#F1F5F9";
|
|
773
790
|
export const rhcLogoImgInlineSize = "48px";
|
|
774
791
|
export const rhcLogoImgBlockSize = "96px";
|
package/dist/index.json
CHANGED
|
@@ -765,6 +765,23 @@
|
|
|
765
765
|
"rhcNavBarBackgroundColor": "#fff",
|
|
766
766
|
"rhcNavBarColor": "#154273",
|
|
767
767
|
"rhcNavBarBorderColor": "#64748B",
|
|
768
|
+
"rhcMessageListItemBackgroundColor": "#fff",
|
|
769
|
+
"rhcMessageListItemBorderColor": "#CBD5E1",
|
|
770
|
+
"rhcMessageListItemBorderWidth": "1px",
|
|
771
|
+
"rhcMessageListItemColor": "#334155",
|
|
772
|
+
"rhcMessageListItemColumnGap": "1rem",
|
|
773
|
+
"rhcMessageListItemIconSize": "24px",
|
|
774
|
+
"rhcMessageListItemIconColor": "#154273",
|
|
775
|
+
"rhcMessageListItemMinHeight": "48px",
|
|
776
|
+
"rhcMessageListItemPaddingBlock": "0.75rem",
|
|
777
|
+
"rhcMessageListItemPaddingInline": "1rem",
|
|
778
|
+
"rhcMessageListItemContentColumnGap": "0.5rem",
|
|
779
|
+
"rhcMessageListItemContentRowGap": "0.5rem",
|
|
780
|
+
"rhcMessageListItemLabelFontFamily": "Fira Sans, Arial, Verdana, sans-serif",
|
|
781
|
+
"rhcMessageListItemLabelFontSize": "1.25rem",
|
|
782
|
+
"rhcMessageListItemLabelFontWeight": 700,
|
|
783
|
+
"rhcMessageListItemLabelLineHeight": "150%",
|
|
784
|
+
"rhcMessageListItemHeadingColor": "#154273",
|
|
768
785
|
"rhcLogoImgBackgroundColor": "#F1F5F9",
|
|
769
786
|
"rhcLogoImgInlineSize": "48px",
|
|
770
787
|
"rhcLogoImgBlockSize": "96px",
|
package/dist/index.tokens.json
CHANGED
|
@@ -1187,6 +1187,35 @@
|
|
|
1187
1187
|
"color": "#154273",
|
|
1188
1188
|
"border-color": "#64748B"
|
|
1189
1189
|
},
|
|
1190
|
+
"message-list": {
|
|
1191
|
+
"item": {
|
|
1192
|
+
"background-color": "#fff",
|
|
1193
|
+
"border-color": "#CBD5E1",
|
|
1194
|
+
"border-width": "1px",
|
|
1195
|
+
"color": "#334155",
|
|
1196
|
+
"column-gap": "1rem",
|
|
1197
|
+
"icon": {
|
|
1198
|
+
"size": "24px",
|
|
1199
|
+
"color": "#154273"
|
|
1200
|
+
},
|
|
1201
|
+
"min-height": "48px",
|
|
1202
|
+
"padding-block": "0.75rem",
|
|
1203
|
+
"padding-inline": "1rem",
|
|
1204
|
+
"content": {
|
|
1205
|
+
"column-gap": "0.5rem",
|
|
1206
|
+
"row-gap": "0.5rem"
|
|
1207
|
+
},
|
|
1208
|
+
"label": {
|
|
1209
|
+
"font-family": "Fira Sans, Arial, Verdana, sans-serif",
|
|
1210
|
+
"font-size": "1.25rem",
|
|
1211
|
+
"font-weight": 700,
|
|
1212
|
+
"line-height": "150%"
|
|
1213
|
+
},
|
|
1214
|
+
"heading": {
|
|
1215
|
+
"color": "#154273"
|
|
1216
|
+
}
|
|
1217
|
+
}
|
|
1218
|
+
},
|
|
1190
1219
|
"logo": {
|
|
1191
1220
|
"img": {
|
|
1192
1221
|
"background-color": "#F1F5F9",
|
package/dist/root.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Wed, 16 Oct 2024
|
|
3
|
+
* Generated on Wed, 16 Oct 2024 13:36:15 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -300,6 +300,23 @@
|
|
|
300
300
|
--rhc-logo-img-block-size: 96px;
|
|
301
301
|
--rhc-logo-img-inline-size: 48px;
|
|
302
302
|
--rhc-logo-img-background-color: #F1F5F9;
|
|
303
|
+
--rhc-message-list-item-heading-color: #154273;
|
|
304
|
+
--rhc-message-list-item-label-line-height: 150%;
|
|
305
|
+
--rhc-message-list-item-label-font-weight: 700;
|
|
306
|
+
--rhc-message-list-item-label-font-size: 1.25rem;
|
|
307
|
+
--rhc-message-list-item-label-font-family: Fira Sans, Arial, Verdana, sans-serif;
|
|
308
|
+
--rhc-message-list-item-content-row-gap: 0.5rem;
|
|
309
|
+
--rhc-message-list-item-content-column-gap: 0.5rem;
|
|
310
|
+
--rhc-message-list-item-padding-inline: 1rem;
|
|
311
|
+
--rhc-message-list-item-padding-block: 0.75rem;
|
|
312
|
+
--rhc-message-list-item-min-height: 48px;
|
|
313
|
+
--rhc-message-list-item-icon-color: #154273;
|
|
314
|
+
--rhc-message-list-item-icon-size: 24px;
|
|
315
|
+
--rhc-message-list-item-column-gap: 1rem;
|
|
316
|
+
--rhc-message-list-item-color: #334155;
|
|
317
|
+
--rhc-message-list-item-border-width: 1px;
|
|
318
|
+
--rhc-message-list-item-border-color: #CBD5E1;
|
|
319
|
+
--rhc-message-list-item-background-color: #fff;
|
|
303
320
|
--rhc-nav-bar-border-color: #64748B;
|
|
304
321
|
--rhc-nav-bar-color: #154273;
|
|
305
322
|
--rhc-nav-bar-background-color: #fff;
|
package/dist/tokens.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Wed, 16 Oct 2024
|
|
3
|
+
* Generated on Wed, 16 Oct 2024 13:36:15 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export default tokens;
|
|
@@ -1210,6 +1210,35 @@ declare const tokens: {
|
|
|
1210
1210
|
"color": DesignToken,
|
|
1211
1211
|
"border-color": DesignToken
|
|
1212
1212
|
},
|
|
1213
|
+
"message-list": {
|
|
1214
|
+
"item": {
|
|
1215
|
+
"background-color": DesignToken,
|
|
1216
|
+
"border-color": DesignToken,
|
|
1217
|
+
"border-width": DesignToken,
|
|
1218
|
+
"color": DesignToken,
|
|
1219
|
+
"column-gap": DesignToken,
|
|
1220
|
+
"icon": {
|
|
1221
|
+
"size": DesignToken,
|
|
1222
|
+
"color": DesignToken
|
|
1223
|
+
},
|
|
1224
|
+
"min-height": DesignToken,
|
|
1225
|
+
"padding-block": DesignToken,
|
|
1226
|
+
"padding-inline": DesignToken,
|
|
1227
|
+
"content": {
|
|
1228
|
+
"column-gap": DesignToken,
|
|
1229
|
+
"row-gap": DesignToken
|
|
1230
|
+
},
|
|
1231
|
+
"label": {
|
|
1232
|
+
"font-family": DesignToken,
|
|
1233
|
+
"font-size": DesignToken,
|
|
1234
|
+
"font-weight": DesignToken,
|
|
1235
|
+
"line-height": DesignToken
|
|
1236
|
+
},
|
|
1237
|
+
"heading": {
|
|
1238
|
+
"color": DesignToken
|
|
1239
|
+
}
|
|
1240
|
+
}
|
|
1241
|
+
},
|
|
1213
1242
|
"logo": {
|
|
1214
1243
|
"img": {
|
|
1215
1244
|
"background-color": DesignToken,
|
package/dist/tokens.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Wed, 16 Oct 2024
|
|
3
|
+
* Generated on Wed, 16 Oct 2024 13:36:15 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
module.exports = {
|
|
@@ -17909,6 +17909,427 @@ module.exports = {
|
|
|
17909
17909
|
]
|
|
17910
17910
|
}
|
|
17911
17911
|
},
|
|
17912
|
+
"message-list": {
|
|
17913
|
+
"item": {
|
|
17914
|
+
"background-color": {
|
|
17915
|
+
"value": "#fff",
|
|
17916
|
+
"type": "color",
|
|
17917
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
17918
|
+
"isSource": true,
|
|
17919
|
+
"original": {
|
|
17920
|
+
"value": "#fff",
|
|
17921
|
+
"type": "color"
|
|
17922
|
+
},
|
|
17923
|
+
"name": "rhcMessageListItemBackgroundColor",
|
|
17924
|
+
"attributes": {
|
|
17925
|
+
"category": "rhc",
|
|
17926
|
+
"type": "message-list",
|
|
17927
|
+
"item": "item",
|
|
17928
|
+
"subitem": "background-color"
|
|
17929
|
+
},
|
|
17930
|
+
"path": [
|
|
17931
|
+
"rhc",
|
|
17932
|
+
"message-list",
|
|
17933
|
+
"item",
|
|
17934
|
+
"background-color"
|
|
17935
|
+
]
|
|
17936
|
+
},
|
|
17937
|
+
"border-color": {
|
|
17938
|
+
"value": "#CBD5E1",
|
|
17939
|
+
"type": "color",
|
|
17940
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
17941
|
+
"isSource": true,
|
|
17942
|
+
"original": {
|
|
17943
|
+
"value": "#CBD5E1",
|
|
17944
|
+
"type": "color"
|
|
17945
|
+
},
|
|
17946
|
+
"name": "rhcMessageListItemBorderColor",
|
|
17947
|
+
"attributes": {
|
|
17948
|
+
"category": "rhc",
|
|
17949
|
+
"type": "message-list",
|
|
17950
|
+
"item": "item",
|
|
17951
|
+
"subitem": "border-color"
|
|
17952
|
+
},
|
|
17953
|
+
"path": [
|
|
17954
|
+
"rhc",
|
|
17955
|
+
"message-list",
|
|
17956
|
+
"item",
|
|
17957
|
+
"border-color"
|
|
17958
|
+
]
|
|
17959
|
+
},
|
|
17960
|
+
"border-width": {
|
|
17961
|
+
"value": "1px",
|
|
17962
|
+
"type": "borderWidth",
|
|
17963
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
17964
|
+
"isSource": true,
|
|
17965
|
+
"original": {
|
|
17966
|
+
"value": "1px",
|
|
17967
|
+
"type": "borderWidth"
|
|
17968
|
+
},
|
|
17969
|
+
"name": "rhcMessageListItemBorderWidth",
|
|
17970
|
+
"attributes": {
|
|
17971
|
+
"category": "rhc",
|
|
17972
|
+
"type": "message-list",
|
|
17973
|
+
"item": "item",
|
|
17974
|
+
"subitem": "border-width"
|
|
17975
|
+
},
|
|
17976
|
+
"path": [
|
|
17977
|
+
"rhc",
|
|
17978
|
+
"message-list",
|
|
17979
|
+
"item",
|
|
17980
|
+
"border-width"
|
|
17981
|
+
]
|
|
17982
|
+
},
|
|
17983
|
+
"color": {
|
|
17984
|
+
"value": "#334155",
|
|
17985
|
+
"type": "color",
|
|
17986
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
17987
|
+
"isSource": true,
|
|
17988
|
+
"original": {
|
|
17989
|
+
"value": "#334155",
|
|
17990
|
+
"type": "color"
|
|
17991
|
+
},
|
|
17992
|
+
"name": "rhcMessageListItemColor",
|
|
17993
|
+
"attributes": {
|
|
17994
|
+
"category": "rhc",
|
|
17995
|
+
"type": "message-list",
|
|
17996
|
+
"item": "item",
|
|
17997
|
+
"subitem": "color"
|
|
17998
|
+
},
|
|
17999
|
+
"path": [
|
|
18000
|
+
"rhc",
|
|
18001
|
+
"message-list",
|
|
18002
|
+
"item",
|
|
18003
|
+
"color"
|
|
18004
|
+
]
|
|
18005
|
+
},
|
|
18006
|
+
"column-gap": {
|
|
18007
|
+
"value": "1rem",
|
|
18008
|
+
"type": "spacing",
|
|
18009
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
18010
|
+
"isSource": true,
|
|
18011
|
+
"original": {
|
|
18012
|
+
"value": "1rem",
|
|
18013
|
+
"type": "spacing"
|
|
18014
|
+
},
|
|
18015
|
+
"name": "rhcMessageListItemColumnGap",
|
|
18016
|
+
"attributes": {
|
|
18017
|
+
"category": "rhc",
|
|
18018
|
+
"type": "message-list",
|
|
18019
|
+
"item": "item",
|
|
18020
|
+
"subitem": "column-gap"
|
|
18021
|
+
},
|
|
18022
|
+
"path": [
|
|
18023
|
+
"rhc",
|
|
18024
|
+
"message-list",
|
|
18025
|
+
"item",
|
|
18026
|
+
"column-gap"
|
|
18027
|
+
]
|
|
18028
|
+
},
|
|
18029
|
+
"icon": {
|
|
18030
|
+
"size": {
|
|
18031
|
+
"value": "24px",
|
|
18032
|
+
"type": "size",
|
|
18033
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
18034
|
+
"isSource": true,
|
|
18035
|
+
"original": {
|
|
18036
|
+
"value": "24px",
|
|
18037
|
+
"type": "size"
|
|
18038
|
+
},
|
|
18039
|
+
"name": "rhcMessageListItemIconSize",
|
|
18040
|
+
"attributes": {
|
|
18041
|
+
"category": "rhc",
|
|
18042
|
+
"type": "message-list",
|
|
18043
|
+
"item": "item",
|
|
18044
|
+
"subitem": "icon",
|
|
18045
|
+
"state": "size"
|
|
18046
|
+
},
|
|
18047
|
+
"path": [
|
|
18048
|
+
"rhc",
|
|
18049
|
+
"message-list",
|
|
18050
|
+
"item",
|
|
18051
|
+
"icon",
|
|
18052
|
+
"size"
|
|
18053
|
+
]
|
|
18054
|
+
},
|
|
18055
|
+
"color": {
|
|
18056
|
+
"value": "#154273",
|
|
18057
|
+
"type": "color",
|
|
18058
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
18059
|
+
"isSource": true,
|
|
18060
|
+
"original": {
|
|
18061
|
+
"value": "#154273",
|
|
18062
|
+
"type": "color"
|
|
18063
|
+
},
|
|
18064
|
+
"name": "rhcMessageListItemIconColor",
|
|
18065
|
+
"attributes": {
|
|
18066
|
+
"category": "rhc",
|
|
18067
|
+
"type": "message-list",
|
|
18068
|
+
"item": "item",
|
|
18069
|
+
"subitem": "icon",
|
|
18070
|
+
"state": "color"
|
|
18071
|
+
},
|
|
18072
|
+
"path": [
|
|
18073
|
+
"rhc",
|
|
18074
|
+
"message-list",
|
|
18075
|
+
"item",
|
|
18076
|
+
"icon",
|
|
18077
|
+
"color"
|
|
18078
|
+
]
|
|
18079
|
+
}
|
|
18080
|
+
},
|
|
18081
|
+
"min-height": {
|
|
18082
|
+
"value": "48px",
|
|
18083
|
+
"type": "size",
|
|
18084
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
18085
|
+
"isSource": true,
|
|
18086
|
+
"original": {
|
|
18087
|
+
"value": "48px",
|
|
18088
|
+
"type": "size"
|
|
18089
|
+
},
|
|
18090
|
+
"name": "rhcMessageListItemMinHeight",
|
|
18091
|
+
"attributes": {
|
|
18092
|
+
"category": "rhc",
|
|
18093
|
+
"type": "message-list",
|
|
18094
|
+
"item": "item",
|
|
18095
|
+
"subitem": "min-height"
|
|
18096
|
+
},
|
|
18097
|
+
"path": [
|
|
18098
|
+
"rhc",
|
|
18099
|
+
"message-list",
|
|
18100
|
+
"item",
|
|
18101
|
+
"min-height"
|
|
18102
|
+
]
|
|
18103
|
+
},
|
|
18104
|
+
"padding-block": {
|
|
18105
|
+
"value": "0.75rem",
|
|
18106
|
+
"type": "spacing",
|
|
18107
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
18108
|
+
"isSource": true,
|
|
18109
|
+
"original": {
|
|
18110
|
+
"value": "0.75rem",
|
|
18111
|
+
"type": "spacing"
|
|
18112
|
+
},
|
|
18113
|
+
"name": "rhcMessageListItemPaddingBlock",
|
|
18114
|
+
"attributes": {
|
|
18115
|
+
"category": "rhc",
|
|
18116
|
+
"type": "message-list",
|
|
18117
|
+
"item": "item",
|
|
18118
|
+
"subitem": "padding-block"
|
|
18119
|
+
},
|
|
18120
|
+
"path": [
|
|
18121
|
+
"rhc",
|
|
18122
|
+
"message-list",
|
|
18123
|
+
"item",
|
|
18124
|
+
"padding-block"
|
|
18125
|
+
]
|
|
18126
|
+
},
|
|
18127
|
+
"padding-inline": {
|
|
18128
|
+
"value": "1rem",
|
|
18129
|
+
"type": "spacing",
|
|
18130
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
18131
|
+
"isSource": true,
|
|
18132
|
+
"original": {
|
|
18133
|
+
"value": "1rem",
|
|
18134
|
+
"type": "spacing"
|
|
18135
|
+
},
|
|
18136
|
+
"name": "rhcMessageListItemPaddingInline",
|
|
18137
|
+
"attributes": {
|
|
18138
|
+
"category": "rhc",
|
|
18139
|
+
"type": "message-list",
|
|
18140
|
+
"item": "item",
|
|
18141
|
+
"subitem": "padding-inline"
|
|
18142
|
+
},
|
|
18143
|
+
"path": [
|
|
18144
|
+
"rhc",
|
|
18145
|
+
"message-list",
|
|
18146
|
+
"item",
|
|
18147
|
+
"padding-inline"
|
|
18148
|
+
]
|
|
18149
|
+
},
|
|
18150
|
+
"content": {
|
|
18151
|
+
"column-gap": {
|
|
18152
|
+
"value": "0.5rem",
|
|
18153
|
+
"type": "spacing",
|
|
18154
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
18155
|
+
"isSource": true,
|
|
18156
|
+
"original": {
|
|
18157
|
+
"value": "0.5rem",
|
|
18158
|
+
"type": "spacing"
|
|
18159
|
+
},
|
|
18160
|
+
"name": "rhcMessageListItemContentColumnGap",
|
|
18161
|
+
"attributes": {
|
|
18162
|
+
"category": "rhc",
|
|
18163
|
+
"type": "message-list",
|
|
18164
|
+
"item": "item",
|
|
18165
|
+
"subitem": "content",
|
|
18166
|
+
"state": "column-gap"
|
|
18167
|
+
},
|
|
18168
|
+
"path": [
|
|
18169
|
+
"rhc",
|
|
18170
|
+
"message-list",
|
|
18171
|
+
"item",
|
|
18172
|
+
"content",
|
|
18173
|
+
"column-gap"
|
|
18174
|
+
]
|
|
18175
|
+
},
|
|
18176
|
+
"row-gap": {
|
|
18177
|
+
"value": "0.5rem",
|
|
18178
|
+
"type": "spacing",
|
|
18179
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
18180
|
+
"isSource": true,
|
|
18181
|
+
"original": {
|
|
18182
|
+
"value": "0.5rem",
|
|
18183
|
+
"type": "spacing"
|
|
18184
|
+
},
|
|
18185
|
+
"name": "rhcMessageListItemContentRowGap",
|
|
18186
|
+
"attributes": {
|
|
18187
|
+
"category": "rhc",
|
|
18188
|
+
"type": "message-list",
|
|
18189
|
+
"item": "item",
|
|
18190
|
+
"subitem": "content",
|
|
18191
|
+
"state": "row-gap"
|
|
18192
|
+
},
|
|
18193
|
+
"path": [
|
|
18194
|
+
"rhc",
|
|
18195
|
+
"message-list",
|
|
18196
|
+
"item",
|
|
18197
|
+
"content",
|
|
18198
|
+
"row-gap"
|
|
18199
|
+
]
|
|
18200
|
+
}
|
|
18201
|
+
},
|
|
18202
|
+
"label": {
|
|
18203
|
+
"font-family": {
|
|
18204
|
+
"value": "Fira Sans, Arial, Verdana, sans-serif",
|
|
18205
|
+
"type": "font-family",
|
|
18206
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
18207
|
+
"isSource": true,
|
|
18208
|
+
"original": {
|
|
18209
|
+
"value": "Fira Sans, Arial, Verdana, sans-serif",
|
|
18210
|
+
"type": "font-family"
|
|
18211
|
+
},
|
|
18212
|
+
"name": "rhcMessageListItemLabelFontFamily",
|
|
18213
|
+
"attributes": {
|
|
18214
|
+
"category": "rhc",
|
|
18215
|
+
"type": "message-list",
|
|
18216
|
+
"item": "item",
|
|
18217
|
+
"subitem": "label",
|
|
18218
|
+
"state": "font-family"
|
|
18219
|
+
},
|
|
18220
|
+
"path": [
|
|
18221
|
+
"rhc",
|
|
18222
|
+
"message-list",
|
|
18223
|
+
"item",
|
|
18224
|
+
"label",
|
|
18225
|
+
"font-family"
|
|
18226
|
+
]
|
|
18227
|
+
},
|
|
18228
|
+
"font-size": {
|
|
18229
|
+
"value": "1.25rem",
|
|
18230
|
+
"type": "font-size",
|
|
18231
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
18232
|
+
"isSource": true,
|
|
18233
|
+
"original": {
|
|
18234
|
+
"value": "1.25rem",
|
|
18235
|
+
"type": "font-size"
|
|
18236
|
+
},
|
|
18237
|
+
"name": "rhcMessageListItemLabelFontSize",
|
|
18238
|
+
"attributes": {
|
|
18239
|
+
"category": "rhc",
|
|
18240
|
+
"type": "message-list",
|
|
18241
|
+
"item": "item",
|
|
18242
|
+
"subitem": "label",
|
|
18243
|
+
"state": "font-size"
|
|
18244
|
+
},
|
|
18245
|
+
"path": [
|
|
18246
|
+
"rhc",
|
|
18247
|
+
"message-list",
|
|
18248
|
+
"item",
|
|
18249
|
+
"label",
|
|
18250
|
+
"font-size"
|
|
18251
|
+
]
|
|
18252
|
+
},
|
|
18253
|
+
"font-weight": {
|
|
18254
|
+
"value": 700,
|
|
18255
|
+
"type": "font-weight",
|
|
18256
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
18257
|
+
"isSource": true,
|
|
18258
|
+
"original": {
|
|
18259
|
+
"value": 700,
|
|
18260
|
+
"type": "font-weight"
|
|
18261
|
+
},
|
|
18262
|
+
"name": "rhcMessageListItemLabelFontWeight",
|
|
18263
|
+
"attributes": {
|
|
18264
|
+
"category": "rhc",
|
|
18265
|
+
"type": "message-list",
|
|
18266
|
+
"item": "item",
|
|
18267
|
+
"subitem": "label",
|
|
18268
|
+
"state": "font-weight"
|
|
18269
|
+
},
|
|
18270
|
+
"path": [
|
|
18271
|
+
"rhc",
|
|
18272
|
+
"message-list",
|
|
18273
|
+
"item",
|
|
18274
|
+
"label",
|
|
18275
|
+
"font-weight"
|
|
18276
|
+
]
|
|
18277
|
+
},
|
|
18278
|
+
"line-height": {
|
|
18279
|
+
"value": "150%",
|
|
18280
|
+
"type": "line-height",
|
|
18281
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
18282
|
+
"isSource": true,
|
|
18283
|
+
"original": {
|
|
18284
|
+
"value": "150%",
|
|
18285
|
+
"type": "line-height"
|
|
18286
|
+
},
|
|
18287
|
+
"name": "rhcMessageListItemLabelLineHeight",
|
|
18288
|
+
"attributes": {
|
|
18289
|
+
"category": "rhc",
|
|
18290
|
+
"type": "message-list",
|
|
18291
|
+
"item": "item",
|
|
18292
|
+
"subitem": "label",
|
|
18293
|
+
"state": "line-height"
|
|
18294
|
+
},
|
|
18295
|
+
"path": [
|
|
18296
|
+
"rhc",
|
|
18297
|
+
"message-list",
|
|
18298
|
+
"item",
|
|
18299
|
+
"label",
|
|
18300
|
+
"line-height"
|
|
18301
|
+
]
|
|
18302
|
+
}
|
|
18303
|
+
},
|
|
18304
|
+
"heading": {
|
|
18305
|
+
"color": {
|
|
18306
|
+
"value": "#154273",
|
|
18307
|
+
"type": "color",
|
|
18308
|
+
"filePath": "src/generated/figma.tokens.json",
|
|
18309
|
+
"isSource": true,
|
|
18310
|
+
"original": {
|
|
18311
|
+
"value": "#154273",
|
|
18312
|
+
"type": "color"
|
|
18313
|
+
},
|
|
18314
|
+
"name": "rhcMessageListItemHeadingColor",
|
|
18315
|
+
"attributes": {
|
|
18316
|
+
"category": "rhc",
|
|
18317
|
+
"type": "message-list",
|
|
18318
|
+
"item": "item",
|
|
18319
|
+
"subitem": "heading",
|
|
18320
|
+
"state": "color"
|
|
18321
|
+
},
|
|
18322
|
+
"path": [
|
|
18323
|
+
"rhc",
|
|
18324
|
+
"message-list",
|
|
18325
|
+
"item",
|
|
18326
|
+
"heading",
|
|
18327
|
+
"color"
|
|
18328
|
+
]
|
|
18329
|
+
}
|
|
18330
|
+
}
|
|
18331
|
+
}
|
|
18332
|
+
},
|
|
17912
18333
|
"logo": {
|
|
17913
18334
|
"img": {
|
|
17914
18335
|
"background-color": {
|
package/dist/variables.less
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on Wed, 16 Oct 2024
|
|
3
|
+
// Generated on Wed, 16 Oct 2024 13:36:16 GMT
|
|
4
4
|
|
|
5
5
|
@rhc-space-700: 3.5rem;
|
|
6
6
|
@rhc-space-600: 3rem;
|
|
@@ -298,6 +298,23 @@
|
|
|
298
298
|
@rhc-logo-img-block-size: 96px;
|
|
299
299
|
@rhc-logo-img-inline-size: 48px;
|
|
300
300
|
@rhc-logo-img-background-color: #F1F5F9;
|
|
301
|
+
@rhc-message-list-item-heading-color: #154273;
|
|
302
|
+
@rhc-message-list-item-label-line-height: 150%;
|
|
303
|
+
@rhc-message-list-item-label-font-weight: 700;
|
|
304
|
+
@rhc-message-list-item-label-font-size: 1.25rem;
|
|
305
|
+
@rhc-message-list-item-label-font-family: Fira Sans, Arial, Verdana, sans-serif;
|
|
306
|
+
@rhc-message-list-item-content-row-gap: 0.5rem;
|
|
307
|
+
@rhc-message-list-item-content-column-gap: 0.5rem;
|
|
308
|
+
@rhc-message-list-item-padding-inline: 1rem;
|
|
309
|
+
@rhc-message-list-item-padding-block: 0.75rem;
|
|
310
|
+
@rhc-message-list-item-min-height: 48px;
|
|
311
|
+
@rhc-message-list-item-icon-color: #154273;
|
|
312
|
+
@rhc-message-list-item-icon-size: 24px;
|
|
313
|
+
@rhc-message-list-item-column-gap: 1rem;
|
|
314
|
+
@rhc-message-list-item-color: #334155;
|
|
315
|
+
@rhc-message-list-item-border-width: 1px;
|
|
316
|
+
@rhc-message-list-item-border-color: #CBD5E1;
|
|
317
|
+
@rhc-message-list-item-background-color: #fff;
|
|
301
318
|
@rhc-nav-bar-border-color: #64748B;
|
|
302
319
|
@rhc-nav-bar-color: #154273;
|
|
303
320
|
@rhc-nav-bar-background-color: #fff;
|
package/figma/figma.tokens.json
CHANGED
|
@@ -3971,6 +3971,90 @@
|
|
|
3971
3971
|
}
|
|
3972
3972
|
}
|
|
3973
3973
|
},
|
|
3974
|
+
"components/message-list": {
|
|
3975
|
+
"rhc": {
|
|
3976
|
+
"message-list": {
|
|
3977
|
+
"item": {
|
|
3978
|
+
"background-color": {
|
|
3979
|
+
"value": "{rhc.color.canvas}",
|
|
3980
|
+
"type": "color"
|
|
3981
|
+
},
|
|
3982
|
+
"border-color": {
|
|
3983
|
+
"value": "{rhc.color.grijs.300}",
|
|
3984
|
+
"type": "color"
|
|
3985
|
+
},
|
|
3986
|
+
"border-width": {
|
|
3987
|
+
"value": "{rhc.border-width.default}",
|
|
3988
|
+
"type": "borderWidth"
|
|
3989
|
+
},
|
|
3990
|
+
"color": {
|
|
3991
|
+
"value": "{rhc.color.foreground.subdued}",
|
|
3992
|
+
"type": "color"
|
|
3993
|
+
},
|
|
3994
|
+
"column-gap": {
|
|
3995
|
+
"value": "{rhc.space.200}",
|
|
3996
|
+
"type": "spacing"
|
|
3997
|
+
},
|
|
3998
|
+
"icon": {
|
|
3999
|
+
"size": {
|
|
4000
|
+
"value": "{rhc.size.icon.functional}",
|
|
4001
|
+
"type": "size"
|
|
4002
|
+
},
|
|
4003
|
+
"color": {
|
|
4004
|
+
"value": "{rhc.color.foreground.lint}",
|
|
4005
|
+
"type": "color"
|
|
4006
|
+
}
|
|
4007
|
+
},
|
|
4008
|
+
"min-height": {
|
|
4009
|
+
"value": "{rhc.size.target}",
|
|
4010
|
+
"type": "size"
|
|
4011
|
+
},
|
|
4012
|
+
"padding-block": {
|
|
4013
|
+
"value": "{rhc.space.150}",
|
|
4014
|
+
"type": "spacing"
|
|
4015
|
+
},
|
|
4016
|
+
"padding-inline": {
|
|
4017
|
+
"value": "{rhc.space.200}",
|
|
4018
|
+
"type": "spacing"
|
|
4019
|
+
},
|
|
4020
|
+
"content": {
|
|
4021
|
+
"column-gap": {
|
|
4022
|
+
"value": "{rhc.space.100}",
|
|
4023
|
+
"type": "spacing"
|
|
4024
|
+
},
|
|
4025
|
+
"row-gap": {
|
|
4026
|
+
"value": "{rhc.space.100}",
|
|
4027
|
+
"type": "spacing"
|
|
4028
|
+
}
|
|
4029
|
+
},
|
|
4030
|
+
"label": {
|
|
4031
|
+
"font-family": {
|
|
4032
|
+
"value": "{rhc.font-family.primary}",
|
|
4033
|
+
"type": "font-family"
|
|
4034
|
+
},
|
|
4035
|
+
"font-size": {
|
|
4036
|
+
"value": "{rhc.font-size.paragraph.default}",
|
|
4037
|
+
"type": "font-size"
|
|
4038
|
+
},
|
|
4039
|
+
"font-weight": {
|
|
4040
|
+
"value": "{rhc.font-weight.bold}",
|
|
4041
|
+
"type": "font-weight"
|
|
4042
|
+
},
|
|
4043
|
+
"line-height": {
|
|
4044
|
+
"value": "{rhc.line-height.md}",
|
|
4045
|
+
"type": "line-height"
|
|
4046
|
+
}
|
|
4047
|
+
},
|
|
4048
|
+
"heading": {
|
|
4049
|
+
"color": {
|
|
4050
|
+
"value": "{rhc.color.foreground.lint}",
|
|
4051
|
+
"type": "color"
|
|
4052
|
+
}
|
|
4053
|
+
}
|
|
4054
|
+
}
|
|
4055
|
+
}
|
|
4056
|
+
}
|
|
4057
|
+
},
|
|
3974
4058
|
"components/nav-bar": {
|
|
3975
4059
|
"rhc": {
|
|
3976
4060
|
"nav-bar": {
|
|
@@ -6324,6 +6408,7 @@
|
|
|
6324
6408
|
"components/link-list-card",
|
|
6325
6409
|
"components/logo",
|
|
6326
6410
|
"components/modal-dialog",
|
|
6411
|
+
"components/message-list",
|
|
6327
6412
|
"components/nav-bar",
|
|
6328
6413
|
"components/navigation-list",
|
|
6329
6414
|
"components/ordered-list",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rijkshuisstijl-community/design-tokens",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.29",
|
|
4
4
|
"author": "Community for NL Design System",
|
|
5
5
|
"description": "Example design tokens",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -33,5 +33,5 @@
|
|
|
33
33
|
"style-dictionary": "3.9.2",
|
|
34
34
|
"token-transformer": "0.0.33"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "cffc6c95c7d24761edddc121ef7c787d92fd35fd"
|
|
37
37
|
}
|
|
@@ -3503,6 +3503,86 @@
|
|
|
3503
3503
|
"type": "color"
|
|
3504
3504
|
}
|
|
3505
3505
|
},
|
|
3506
|
+
"message-list": {
|
|
3507
|
+
"item": {
|
|
3508
|
+
"background-color": {
|
|
3509
|
+
"value": "#fff",
|
|
3510
|
+
"type": "color"
|
|
3511
|
+
},
|
|
3512
|
+
"border-color": {
|
|
3513
|
+
"value": "#CBD5E1",
|
|
3514
|
+
"type": "color"
|
|
3515
|
+
},
|
|
3516
|
+
"border-width": {
|
|
3517
|
+
"value": "1px",
|
|
3518
|
+
"type": "borderWidth"
|
|
3519
|
+
},
|
|
3520
|
+
"color": {
|
|
3521
|
+
"value": "#334155",
|
|
3522
|
+
"type": "color"
|
|
3523
|
+
},
|
|
3524
|
+
"column-gap": {
|
|
3525
|
+
"value": "1rem",
|
|
3526
|
+
"type": "spacing"
|
|
3527
|
+
},
|
|
3528
|
+
"icon": {
|
|
3529
|
+
"size": {
|
|
3530
|
+
"value": "24px",
|
|
3531
|
+
"type": "size"
|
|
3532
|
+
},
|
|
3533
|
+
"color": {
|
|
3534
|
+
"value": "#154273",
|
|
3535
|
+
"type": "color"
|
|
3536
|
+
}
|
|
3537
|
+
},
|
|
3538
|
+
"min-height": {
|
|
3539
|
+
"value": "48px",
|
|
3540
|
+
"type": "size"
|
|
3541
|
+
},
|
|
3542
|
+
"padding-block": {
|
|
3543
|
+
"value": "0.75rem",
|
|
3544
|
+
"type": "spacing"
|
|
3545
|
+
},
|
|
3546
|
+
"padding-inline": {
|
|
3547
|
+
"value": "1rem",
|
|
3548
|
+
"type": "spacing"
|
|
3549
|
+
},
|
|
3550
|
+
"content": {
|
|
3551
|
+
"column-gap": {
|
|
3552
|
+
"value": "0.5rem",
|
|
3553
|
+
"type": "spacing"
|
|
3554
|
+
},
|
|
3555
|
+
"row-gap": {
|
|
3556
|
+
"value": "0.5rem",
|
|
3557
|
+
"type": "spacing"
|
|
3558
|
+
}
|
|
3559
|
+
},
|
|
3560
|
+
"label": {
|
|
3561
|
+
"font-family": {
|
|
3562
|
+
"value": "Fira Sans, Arial, Verdana, sans-serif",
|
|
3563
|
+
"type": "font-family"
|
|
3564
|
+
},
|
|
3565
|
+
"font-size": {
|
|
3566
|
+
"value": "1.25rem",
|
|
3567
|
+
"type": "font-size"
|
|
3568
|
+
},
|
|
3569
|
+
"font-weight": {
|
|
3570
|
+
"value": 700,
|
|
3571
|
+
"type": "font-weight"
|
|
3572
|
+
},
|
|
3573
|
+
"line-height": {
|
|
3574
|
+
"value": "150%",
|
|
3575
|
+
"type": "line-height"
|
|
3576
|
+
}
|
|
3577
|
+
},
|
|
3578
|
+
"heading": {
|
|
3579
|
+
"color": {
|
|
3580
|
+
"value": "#154273",
|
|
3581
|
+
"type": "color"
|
|
3582
|
+
}
|
|
3583
|
+
}
|
|
3584
|
+
}
|
|
3585
|
+
},
|
|
3506
3586
|
"logo": {
|
|
3507
3587
|
"img": {
|
|
3508
3588
|
"background-color": {
|