@utrecht/design-tokens 3.2.0 → 3.3.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.
- package/CHANGELOG.md +6 -0
- package/dist/_mixin-theme.scss +9 -0
- package/dist/_mixin.scss +9 -0
- package/dist/_variables.scss +9 -0
- package/dist/dark/_mixin-theme.scss +9 -0
- package/dist/dark/_mixin.scss +9 -0
- package/dist/dark/_variables.scss +9 -0
- package/dist/dark/index.cjs +9 -0
- package/dist/dark/index.css +9 -0
- package/dist/dark/index.d.ts +9 -0
- package/dist/dark/index.flat.json +9 -0
- package/dist/dark/index.json +315 -0
- package/dist/dark/index.mjs +9 -0
- package/dist/dark/index.tokens.json +86 -0
- package/dist/dark/list.json +315 -0
- package/dist/dark/list.mjs +315 -0
- package/dist/dark/property.css +8 -0
- package/dist/dark/root.css +9 -0
- package/dist/dark/theme-prince-xml.css +9 -0
- package/dist/dark/theme.css +9 -0
- package/dist/dark/tokens.cjs +392 -0
- package/dist/dark/tokens.d.ts +50 -0
- package/dist/dark/tokens.json +392 -0
- package/dist/dark/variables.cjs +9 -0
- package/dist/dark/variables.css +9 -0
- package/dist/dark/variables.d.ts +9 -0
- package/dist/dark/variables.json +9 -0
- package/dist/dark/variables.less +9 -0
- package/dist/dark/variables.mjs +9 -0
- package/dist/index.cjs +9 -0
- package/dist/index.css +18 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.flat.json +9 -0
- package/dist/index.json +315 -0
- package/dist/index.mjs +9 -0
- package/dist/index.tokens.json +86 -0
- package/dist/list.json +315 -0
- package/dist/list.mjs +315 -0
- package/dist/property.css +8 -0
- package/dist/root.css +9 -0
- package/dist/theme-prince-xml.css +9 -0
- package/dist/theme.css +9 -0
- package/dist/tokens.cjs +392 -0
- package/dist/tokens.d.ts +50 -0
- package/dist/tokens.json +392 -0
- package/dist/variables.cjs +9 -0
- package/dist/variables.css +9 -0
- package/dist/variables.d.ts +9 -0
- package/dist/variables.json +9 -0
- package/dist/variables.less +9 -0
- package/dist/variables.mjs +9 -0
- package/package.json +1 -1
- package/src/component/utrecht/tooltip.tokens.json +15 -0
package/dist/index.json
CHANGED
|
@@ -32848,6 +32848,321 @@
|
|
|
32848
32848
|
"border-bottom-width"
|
|
32849
32849
|
]
|
|
32850
32850
|
},
|
|
32851
|
+
{
|
|
32852
|
+
"$extensions": {
|
|
32853
|
+
"nl.nldesignsystem.css.property": {
|
|
32854
|
+
"syntax": "<color>",
|
|
32855
|
+
"inherits": true
|
|
32856
|
+
},
|
|
32857
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
32858
|
+
},
|
|
32859
|
+
"type": "color",
|
|
32860
|
+
"value": "hsl(0 0% 100%)",
|
|
32861
|
+
"filePath": "src/component/utrecht/tooltip.tokens.json",
|
|
32862
|
+
"isSource": true,
|
|
32863
|
+
"original": {
|
|
32864
|
+
"$extensions": {
|
|
32865
|
+
"nl.nldesignsystem.css.property": {
|
|
32866
|
+
"syntax": "<color>",
|
|
32867
|
+
"inherits": true
|
|
32868
|
+
},
|
|
32869
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
32870
|
+
},
|
|
32871
|
+
"type": "color",
|
|
32872
|
+
"value": "{utrecht.color.white}"
|
|
32873
|
+
},
|
|
32874
|
+
"name": "utrechtTooltipBackgroundColor",
|
|
32875
|
+
"attributes": {},
|
|
32876
|
+
"path": [
|
|
32877
|
+
"utrecht",
|
|
32878
|
+
"tooltip",
|
|
32879
|
+
"background-color"
|
|
32880
|
+
]
|
|
32881
|
+
},
|
|
32882
|
+
{
|
|
32883
|
+
"$extensions": {
|
|
32884
|
+
"nl.nldesignsystem.css.property": {
|
|
32885
|
+
"syntax": "<color>",
|
|
32886
|
+
"inherits": true
|
|
32887
|
+
},
|
|
32888
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
32889
|
+
},
|
|
32890
|
+
"type": "color",
|
|
32891
|
+
"value": "hsl(0 0% 40%)",
|
|
32892
|
+
"filePath": "src/component/utrecht/tooltip.tokens.json",
|
|
32893
|
+
"isSource": true,
|
|
32894
|
+
"original": {
|
|
32895
|
+
"$extensions": {
|
|
32896
|
+
"nl.nldesignsystem.css.property": {
|
|
32897
|
+
"syntax": "<color>",
|
|
32898
|
+
"inherits": true
|
|
32899
|
+
},
|
|
32900
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
32901
|
+
},
|
|
32902
|
+
"type": "color",
|
|
32903
|
+
"value": "{utrecht.color.grey.40}"
|
|
32904
|
+
},
|
|
32905
|
+
"name": "utrechtTooltipBorderColor",
|
|
32906
|
+
"attributes": {},
|
|
32907
|
+
"path": [
|
|
32908
|
+
"utrecht",
|
|
32909
|
+
"tooltip",
|
|
32910
|
+
"border-color"
|
|
32911
|
+
]
|
|
32912
|
+
},
|
|
32913
|
+
{
|
|
32914
|
+
"$extensions": {
|
|
32915
|
+
"nl.nldesignsystem.css.property": {
|
|
32916
|
+
"syntax": "<length-percentage>",
|
|
32917
|
+
"inherits": true
|
|
32918
|
+
},
|
|
32919
|
+
"nl.nldesignsystem.figma.supports-token": false,
|
|
32920
|
+
"studio.tokens": {
|
|
32921
|
+
"originalType": "borderRadius"
|
|
32922
|
+
}
|
|
32923
|
+
},
|
|
32924
|
+
"type": "dimension",
|
|
32925
|
+
"value": "0",
|
|
32926
|
+
"filePath": "src/component/utrecht/tooltip.tokens.json",
|
|
32927
|
+
"isSource": true,
|
|
32928
|
+
"original": {
|
|
32929
|
+
"$extensions": {
|
|
32930
|
+
"nl.nldesignsystem.css.property": {
|
|
32931
|
+
"syntax": "<length-percentage>",
|
|
32932
|
+
"inherits": true
|
|
32933
|
+
},
|
|
32934
|
+
"nl.nldesignsystem.figma.supports-token": false,
|
|
32935
|
+
"studio.tokens": {
|
|
32936
|
+
"originalType": "borderRadius"
|
|
32937
|
+
}
|
|
32938
|
+
},
|
|
32939
|
+
"type": "dimension",
|
|
32940
|
+
"value": "0"
|
|
32941
|
+
},
|
|
32942
|
+
"name": "utrechtTooltipBorderRadius",
|
|
32943
|
+
"attributes": {},
|
|
32944
|
+
"path": [
|
|
32945
|
+
"utrecht",
|
|
32946
|
+
"tooltip",
|
|
32947
|
+
"border-radius"
|
|
32948
|
+
]
|
|
32949
|
+
},
|
|
32950
|
+
{
|
|
32951
|
+
"$extensions": {
|
|
32952
|
+
"nl.nldesignsystem.css.property": {
|
|
32953
|
+
"syntax": "<length>",
|
|
32954
|
+
"inherits": true
|
|
32955
|
+
},
|
|
32956
|
+
"nl.nldesignsystem.figma.supports-token": false,
|
|
32957
|
+
"studio.tokens": {
|
|
32958
|
+
"originalType": "borderWidth"
|
|
32959
|
+
}
|
|
32960
|
+
},
|
|
32961
|
+
"type": "dimension",
|
|
32962
|
+
"value": "1px",
|
|
32963
|
+
"filePath": "src/component/utrecht/tooltip.tokens.json",
|
|
32964
|
+
"isSource": true,
|
|
32965
|
+
"original": {
|
|
32966
|
+
"$extensions": {
|
|
32967
|
+
"nl.nldesignsystem.css.property": {
|
|
32968
|
+
"syntax": "<length>",
|
|
32969
|
+
"inherits": true
|
|
32970
|
+
},
|
|
32971
|
+
"nl.nldesignsystem.figma.supports-token": false,
|
|
32972
|
+
"studio.tokens": {
|
|
32973
|
+
"originalType": "borderWidth"
|
|
32974
|
+
}
|
|
32975
|
+
},
|
|
32976
|
+
"type": "dimension",
|
|
32977
|
+
"value": "1px"
|
|
32978
|
+
},
|
|
32979
|
+
"name": "utrechtTooltipBorderWidth",
|
|
32980
|
+
"attributes": {},
|
|
32981
|
+
"path": [
|
|
32982
|
+
"utrecht",
|
|
32983
|
+
"tooltip",
|
|
32984
|
+
"border-width"
|
|
32985
|
+
]
|
|
32986
|
+
},
|
|
32987
|
+
{
|
|
32988
|
+
"$extensions": {
|
|
32989
|
+
"nl.nldesignsystem.css.property": {
|
|
32990
|
+
"syntax": "<color>",
|
|
32991
|
+
"inherits": true
|
|
32992
|
+
},
|
|
32993
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
32994
|
+
},
|
|
32995
|
+
"type": "color",
|
|
32996
|
+
"value": "hsl(0 0% 40%)",
|
|
32997
|
+
"filePath": "src/component/utrecht/tooltip.tokens.json",
|
|
32998
|
+
"isSource": true,
|
|
32999
|
+
"original": {
|
|
33000
|
+
"$extensions": {
|
|
33001
|
+
"nl.nldesignsystem.css.property": {
|
|
33002
|
+
"syntax": "<color>",
|
|
33003
|
+
"inherits": true
|
|
33004
|
+
},
|
|
33005
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
33006
|
+
},
|
|
33007
|
+
"type": "color",
|
|
33008
|
+
"value": "{utrecht.color.grey.40}"
|
|
33009
|
+
},
|
|
33010
|
+
"name": "utrechtTooltipColor",
|
|
33011
|
+
"attributes": {},
|
|
33012
|
+
"path": [
|
|
33013
|
+
"utrecht",
|
|
33014
|
+
"tooltip",
|
|
33015
|
+
"color"
|
|
33016
|
+
]
|
|
33017
|
+
},
|
|
33018
|
+
{
|
|
33019
|
+
"$extensions": {
|
|
33020
|
+
"nl.nldesignsystem.css.property": {
|
|
33021
|
+
"syntax": "*",
|
|
33022
|
+
"inherits": true
|
|
33023
|
+
},
|
|
33024
|
+
"nl.nldesignsystem.figma.supports-token": false,
|
|
33025
|
+
"studio.tokens": {
|
|
33026
|
+
"originalType": "fontFamilies"
|
|
33027
|
+
}
|
|
33028
|
+
},
|
|
33029
|
+
"type": "fontFamily",
|
|
33030
|
+
"value": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
|
|
33031
|
+
"filePath": "src/component/utrecht/tooltip.tokens.json",
|
|
33032
|
+
"isSource": true,
|
|
33033
|
+
"original": {
|
|
33034
|
+
"$extensions": {
|
|
33035
|
+
"nl.nldesignsystem.css.property": {
|
|
33036
|
+
"syntax": "*",
|
|
33037
|
+
"inherits": true
|
|
33038
|
+
},
|
|
33039
|
+
"nl.nldesignsystem.figma.supports-token": false,
|
|
33040
|
+
"studio.tokens": {
|
|
33041
|
+
"originalType": "fontFamilies"
|
|
33042
|
+
}
|
|
33043
|
+
},
|
|
33044
|
+
"type": "fontFamily",
|
|
33045
|
+
"value": "{utrecht.typography.sans-serif.font-family}"
|
|
33046
|
+
},
|
|
33047
|
+
"name": "utrechtTooltipFontFamily",
|
|
33048
|
+
"attributes": {},
|
|
33049
|
+
"path": [
|
|
33050
|
+
"utrecht",
|
|
33051
|
+
"tooltip",
|
|
33052
|
+
"font-family"
|
|
33053
|
+
]
|
|
33054
|
+
},
|
|
33055
|
+
{
|
|
33056
|
+
"$extensions": {
|
|
33057
|
+
"nl.nldesignsystem.css.property": {
|
|
33058
|
+
"syntax": "<length>",
|
|
33059
|
+
"inherits": true
|
|
33060
|
+
},
|
|
33061
|
+
"nl.nldesignsystem.figma.supports-token": false,
|
|
33062
|
+
"studio.tokens": {
|
|
33063
|
+
"originalType": "fontSizes"
|
|
33064
|
+
}
|
|
33065
|
+
},
|
|
33066
|
+
"type": "fontSize",
|
|
33067
|
+
"value": "1rem",
|
|
33068
|
+
"filePath": "src/component/utrecht/tooltip.tokens.json",
|
|
33069
|
+
"isSource": true,
|
|
33070
|
+
"original": {
|
|
33071
|
+
"$extensions": {
|
|
33072
|
+
"nl.nldesignsystem.css.property": {
|
|
33073
|
+
"syntax": "<length>",
|
|
33074
|
+
"inherits": true
|
|
33075
|
+
},
|
|
33076
|
+
"nl.nldesignsystem.figma.supports-token": false,
|
|
33077
|
+
"studio.tokens": {
|
|
33078
|
+
"originalType": "fontSizes"
|
|
33079
|
+
}
|
|
33080
|
+
},
|
|
33081
|
+
"type": "fontSize",
|
|
33082
|
+
"value": "{utrecht.typography.scale.md.font-size}"
|
|
33083
|
+
},
|
|
33084
|
+
"name": "utrechtTooltipFontSize",
|
|
33085
|
+
"attributes": {},
|
|
33086
|
+
"path": [
|
|
33087
|
+
"utrecht",
|
|
33088
|
+
"tooltip",
|
|
33089
|
+
"font-size"
|
|
33090
|
+
]
|
|
33091
|
+
},
|
|
33092
|
+
{
|
|
33093
|
+
"$extensions": {
|
|
33094
|
+
"nl.nldesignsystem.css.property": {
|
|
33095
|
+
"syntax": "<length>",
|
|
33096
|
+
"inherits": true
|
|
33097
|
+
},
|
|
33098
|
+
"nl.nldesignsystem.figma.supports-token": false,
|
|
33099
|
+
"studio.tokens": {
|
|
33100
|
+
"originalType": "spacing"
|
|
33101
|
+
}
|
|
33102
|
+
},
|
|
33103
|
+
"type": "dimension",
|
|
33104
|
+
"value": "8px",
|
|
33105
|
+
"filePath": "src/component/utrecht/tooltip.tokens.json",
|
|
33106
|
+
"isSource": true,
|
|
33107
|
+
"original": {
|
|
33108
|
+
"$extensions": {
|
|
33109
|
+
"nl.nldesignsystem.css.property": {
|
|
33110
|
+
"syntax": "<length>",
|
|
33111
|
+
"inherits": true
|
|
33112
|
+
},
|
|
33113
|
+
"nl.nldesignsystem.figma.supports-token": false,
|
|
33114
|
+
"studio.tokens": {
|
|
33115
|
+
"originalType": "spacing"
|
|
33116
|
+
}
|
|
33117
|
+
},
|
|
33118
|
+
"type": "dimension",
|
|
33119
|
+
"value": "{utrecht.space.block.xs}"
|
|
33120
|
+
},
|
|
33121
|
+
"name": "utrechtTooltipPaddingBlock",
|
|
33122
|
+
"attributes": {},
|
|
33123
|
+
"path": [
|
|
33124
|
+
"utrecht",
|
|
33125
|
+
"tooltip",
|
|
33126
|
+
"padding-block"
|
|
33127
|
+
]
|
|
33128
|
+
},
|
|
33129
|
+
{
|
|
33130
|
+
"$extensions": {
|
|
33131
|
+
"nl.nldesignsystem.css.property": {
|
|
33132
|
+
"syntax": "<length>",
|
|
33133
|
+
"inherits": true
|
|
33134
|
+
},
|
|
33135
|
+
"nl.nldesignsystem.figma.supports-token": false,
|
|
33136
|
+
"studio.tokens": {
|
|
33137
|
+
"originalType": "spacing"
|
|
33138
|
+
}
|
|
33139
|
+
},
|
|
33140
|
+
"type": "dimension",
|
|
33141
|
+
"value": "16px",
|
|
33142
|
+
"filePath": "src/component/utrecht/tooltip.tokens.json",
|
|
33143
|
+
"isSource": true,
|
|
33144
|
+
"original": {
|
|
33145
|
+
"$extensions": {
|
|
33146
|
+
"nl.nldesignsystem.css.property": {
|
|
33147
|
+
"syntax": "<length>",
|
|
33148
|
+
"inherits": true
|
|
33149
|
+
},
|
|
33150
|
+
"nl.nldesignsystem.figma.supports-token": false,
|
|
33151
|
+
"studio.tokens": {
|
|
33152
|
+
"originalType": "spacing"
|
|
33153
|
+
}
|
|
33154
|
+
},
|
|
33155
|
+
"type": "dimension",
|
|
33156
|
+
"value": "{utrecht.space.inline.md}"
|
|
33157
|
+
},
|
|
33158
|
+
"name": "utrechtTooltipPaddingInline",
|
|
33159
|
+
"attributes": {},
|
|
33160
|
+
"path": [
|
|
33161
|
+
"utrecht",
|
|
33162
|
+
"tooltip",
|
|
33163
|
+
"padding-inline"
|
|
33164
|
+
]
|
|
33165
|
+
},
|
|
32851
33166
|
{
|
|
32852
33167
|
"value": "hsl(211 60% 40%)",
|
|
32853
33168
|
"filePath": "src/component/utrecht/topnav.tokens.json",
|
package/dist/index.mjs
CHANGED
|
@@ -894,6 +894,15 @@ export const utrechtTextareaBorderBlockEndWidth = "3px";
|
|
|
894
894
|
export const utrechtTextareaBorderBottomWidth = "3px";
|
|
895
895
|
export const utrechtTextareaLineHeight = "1.5";
|
|
896
896
|
export const utrechtTextboxBorderBottomWidth = "3px";
|
|
897
|
+
export const utrechtTooltipBackgroundColor = "hsl(0 0% 100%)";
|
|
898
|
+
export const utrechtTooltipBorderColor = "hsl(0 0% 40%)";
|
|
899
|
+
export const utrechtTooltipBorderRadius = "0";
|
|
900
|
+
export const utrechtTooltipBorderWidth = "1px";
|
|
901
|
+
export const utrechtTooltipColor = "hsl(0 0% 40%)";
|
|
902
|
+
export const utrechtTooltipFontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
|
|
903
|
+
export const utrechtTooltipFontSize = "1rem";
|
|
904
|
+
export const utrechtTooltipPaddingBlock = "8px";
|
|
905
|
+
export const utrechtTooltipPaddingInline = "16px";
|
|
897
906
|
export const utrechtToptaskLinkBackgroundColor = "hsl(211 60% 35%)";
|
|
898
907
|
export const utrechtToptaskLinkColor = "hsl(0 0% 100%)";
|
|
899
908
|
export const utrechtToptaskLinkFontSize = "1rem";
|
package/dist/index.tokens.json
CHANGED
|
@@ -7815,6 +7815,92 @@
|
|
|
7815
7815
|
}
|
|
7816
7816
|
}
|
|
7817
7817
|
},
|
|
7818
|
+
"tooltip": {
|
|
7819
|
+
"background-color": "hsl(0 0% 100%)",
|
|
7820
|
+
"border-color": "hsl(0 0% 40%)",
|
|
7821
|
+
"border-radius": "0",
|
|
7822
|
+
"border-width": "1px",
|
|
7823
|
+
"color": "hsl(0 0% 40%)",
|
|
7824
|
+
"font-family": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
|
|
7825
|
+
"font-size": "1rem",
|
|
7826
|
+
"font-weight": {
|
|
7827
|
+
"$extensions": {
|
|
7828
|
+
"nl.nldesignsystem.css.property": {
|
|
7829
|
+
"syntax": "<number>",
|
|
7830
|
+
"inherits": false
|
|
7831
|
+
},
|
|
7832
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
7833
|
+
},
|
|
7834
|
+
"type": "fontWeights"
|
|
7835
|
+
},
|
|
7836
|
+
"line-height": {
|
|
7837
|
+
"$extensions": {
|
|
7838
|
+
"nl.nldesignsystem.css.property": {
|
|
7839
|
+
"syntax": [
|
|
7840
|
+
"<length>",
|
|
7841
|
+
"<number>"
|
|
7842
|
+
],
|
|
7843
|
+
"inherits": true
|
|
7844
|
+
},
|
|
7845
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
7846
|
+
},
|
|
7847
|
+
"type": "lineHeights"
|
|
7848
|
+
},
|
|
7849
|
+
"max-inline-size": {
|
|
7850
|
+
"$extensions": {
|
|
7851
|
+
"nl.nldesignsystem.css.property": {
|
|
7852
|
+
"syntax": "<length>",
|
|
7853
|
+
"inherits": true
|
|
7854
|
+
},
|
|
7855
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
7856
|
+
},
|
|
7857
|
+
"type": "sizing"
|
|
7858
|
+
},
|
|
7859
|
+
"padding-block": "8px",
|
|
7860
|
+
"padding-inline": "16px",
|
|
7861
|
+
"transition-duration": {
|
|
7862
|
+
"$extensions": {
|
|
7863
|
+
"nl.nldesignsystem.css.property": {
|
|
7864
|
+
"syntax": "<time>",
|
|
7865
|
+
"inherits": true
|
|
7866
|
+
},
|
|
7867
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
7868
|
+
},
|
|
7869
|
+
"type": "other"
|
|
7870
|
+
},
|
|
7871
|
+
"transition-timing-function": {
|
|
7872
|
+
"$extensions": {
|
|
7873
|
+
"nl.nldesignsystem.css.property": {
|
|
7874
|
+
"syntax": "<time>",
|
|
7875
|
+
"inherits": true
|
|
7876
|
+
},
|
|
7877
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
7878
|
+
},
|
|
7879
|
+
"type": "other"
|
|
7880
|
+
},
|
|
7881
|
+
"z-index": {
|
|
7882
|
+
"$extensions": {
|
|
7883
|
+
"nl.nldesignsystem.css.property": {
|
|
7884
|
+
"syntax": "<number>",
|
|
7885
|
+
"inherits": true
|
|
7886
|
+
},
|
|
7887
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
7888
|
+
},
|
|
7889
|
+
"type": "other"
|
|
7890
|
+
},
|
|
7891
|
+
"arrow": {
|
|
7892
|
+
"size": {
|
|
7893
|
+
"$extensions": {
|
|
7894
|
+
"nl.nldesignsystem.css.property": {
|
|
7895
|
+
"syntax": "<length-percentage>",
|
|
7896
|
+
"inherits": true
|
|
7897
|
+
},
|
|
7898
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
7899
|
+
},
|
|
7900
|
+
"type": "sizing"
|
|
7901
|
+
}
|
|
7902
|
+
}
|
|
7903
|
+
},
|
|
7818
7904
|
"toptask-link": {
|
|
7819
7905
|
"background-color": "hsl(211 60% 35%)",
|
|
7820
7906
|
"color": "hsl(0 0% 100%)",
|