@vectoriox/iox-ui 5.40.0 → 5.41.1
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/composite-core/index.d.ts +212 -12
- package/design-core/index.d.ts +694 -17
- package/fesm2022/vectoriox-iox-ui-actions-core.mjs +4 -3
- package/fesm2022/vectoriox-iox-ui-actions-core.mjs.map +1 -1
- package/fesm2022/vectoriox-iox-ui-composite-core.mjs +540 -124
- package/fesm2022/vectoriox-iox-ui-composite-core.mjs.map +1 -1
- package/fesm2022/vectoriox-iox-ui-design-core.mjs +843 -45
- package/fesm2022/vectoriox-iox-ui-design-core.mjs.map +1 -1
- package/fesm2022/vectoriox-iox-ui-generation-core.mjs +846 -17
- package/fesm2022/vectoriox-iox-ui-generation-core.mjs.map +1 -1
- package/fesm2022/vectoriox-iox-ui.mjs +3945 -3914
- package/fesm2022/vectoriox-iox-ui.mjs.map +1 -1
- package/generation-core/index.d.ts +608 -4
- package/index.d.ts +22 -1
- package/package.json +1 -1
- package/src/actions-core/element-actions.ts +4 -3
- package/src/composite-core/accordion.ts +1 -0
- package/src/composite-core/card.ts +6 -4
- package/src/composite-core/composite-kinds.ts +42 -6
- package/src/composite-core/exclusive-runtime.ts +60 -10
- package/src/composite-core/exclusive.ts +64 -0
- package/src/composite-core/public-api.ts +5 -2
- package/src/composite-core/segmented.ts +351 -0
- package/src/composite-core/structure.ts +6 -1
- package/src/composite-core/tabs.ts +6 -3
- package/src/design-core/contrast-audit.ts +8 -3
- package/src/design-core/flavor-spec.generated.ts +832 -41
- package/src/generation-core/compose-site.ts +170 -12
- package/src/generation-core/node-baselines.generated.ts +49 -0
- package/src/generation-core/patterns.ts +21 -0
- package/src/generation-core/site-spec.generated.ts +639 -0
- package/styles/iox-design.css +19 -0
|
@@ -1052,6 +1052,81 @@ const SPEC_TIERS = {
|
|
|
1052
1052
|
"type": "size",
|
|
1053
1053
|
"default": "0px 0px 2px 0px"
|
|
1054
1054
|
},
|
|
1055
|
+
{
|
|
1056
|
+
"name": "segmented-track-bg",
|
|
1057
|
+
"type": "color",
|
|
1058
|
+
"default": "var(--iox-surface-2)"
|
|
1059
|
+
},
|
|
1060
|
+
{
|
|
1061
|
+
"name": "segmented-track-border",
|
|
1062
|
+
"type": "color",
|
|
1063
|
+
"default": "var(--iox-line)"
|
|
1064
|
+
},
|
|
1065
|
+
{
|
|
1066
|
+
"name": "segmented-track-border-width",
|
|
1067
|
+
"type": "size",
|
|
1068
|
+
"default": "var(--iox-border-width)"
|
|
1069
|
+
},
|
|
1070
|
+
{
|
|
1071
|
+
"name": "segmented-track-backdrop",
|
|
1072
|
+
"type": "effect",
|
|
1073
|
+
"default": "none"
|
|
1074
|
+
},
|
|
1075
|
+
{
|
|
1076
|
+
"name": "segmented-pad",
|
|
1077
|
+
"type": "spacing",
|
|
1078
|
+
"default": "4px"
|
|
1079
|
+
},
|
|
1080
|
+
{
|
|
1081
|
+
"name": "segmented-gap",
|
|
1082
|
+
"type": "spacing",
|
|
1083
|
+
"default": "4px"
|
|
1084
|
+
},
|
|
1085
|
+
{
|
|
1086
|
+
"name": "segmented-radius",
|
|
1087
|
+
"type": "radius",
|
|
1088
|
+
"default": "calc(var(--iox-button-radius) + var(--iox-segmented-pad))"
|
|
1089
|
+
},
|
|
1090
|
+
{
|
|
1091
|
+
"name": "segmented-option-ink",
|
|
1092
|
+
"type": "color",
|
|
1093
|
+
"default": "var(--iox-text-muted)"
|
|
1094
|
+
},
|
|
1095
|
+
{
|
|
1096
|
+
"name": "segmented-option-hover-ink",
|
|
1097
|
+
"type": "color",
|
|
1098
|
+
"default": "var(--iox-text)"
|
|
1099
|
+
},
|
|
1100
|
+
{
|
|
1101
|
+
"name": "segmented-option-pad",
|
|
1102
|
+
"type": "spacing",
|
|
1103
|
+
"default": "10px 20px"
|
|
1104
|
+
},
|
|
1105
|
+
{
|
|
1106
|
+
"name": "segmented-option-radius",
|
|
1107
|
+
"type": "radius",
|
|
1108
|
+
"default": "var(--iox-button-radius)"
|
|
1109
|
+
},
|
|
1110
|
+
{
|
|
1111
|
+
"name": "segmented-option-min-height",
|
|
1112
|
+
"type": "size",
|
|
1113
|
+
"default": "44px"
|
|
1114
|
+
},
|
|
1115
|
+
{
|
|
1116
|
+
"name": "segmented-on-bg",
|
|
1117
|
+
"type": "color",
|
|
1118
|
+
"default": "var(--iox-accent-text)"
|
|
1119
|
+
},
|
|
1120
|
+
{
|
|
1121
|
+
"name": "segmented-on-ink",
|
|
1122
|
+
"type": "color",
|
|
1123
|
+
"default": "var(--iox-bg)"
|
|
1124
|
+
},
|
|
1125
|
+
{
|
|
1126
|
+
"name": "segmented-on-shadow",
|
|
1127
|
+
"type": "shadow",
|
|
1128
|
+
"default": "var(--iox-shadow-sm)"
|
|
1129
|
+
},
|
|
1055
1130
|
{
|
|
1056
1131
|
"name": "heading-color",
|
|
1057
1132
|
"type": "color",
|
|
@@ -2016,6 +2091,75 @@ const SPEC_ELEMENT_STYLES = [
|
|
|
2016
2091
|
"boxShadow": "var(--iox-focus-ring)"
|
|
2017
2092
|
}
|
|
2018
2093
|
},
|
|
2094
|
+
{
|
|
2095
|
+
"id": "segmented",
|
|
2096
|
+
"label": "Segmented control",
|
|
2097
|
+
"group": "Layout",
|
|
2098
|
+
"appliesTo": [
|
|
2099
|
+
"Container"
|
|
2100
|
+
],
|
|
2101
|
+
"base": {
|
|
2102
|
+
"color": "inherit",
|
|
2103
|
+
"backgroundColor": "var(--iox-segmented-track-bg)",
|
|
2104
|
+
"borderStyle": "solid",
|
|
2105
|
+
"borderWidth": "var(--iox-segmented-track-border-width)",
|
|
2106
|
+
"borderColor": "var(--iox-segmented-track-border)",
|
|
2107
|
+
"borderRadius": "var(--iox-segmented-radius)",
|
|
2108
|
+
"padding": "var(--iox-segmented-pad)",
|
|
2109
|
+
"backdropFilter": "var(--iox-segmented-track-backdrop)"
|
|
2110
|
+
}
|
|
2111
|
+
},
|
|
2112
|
+
{
|
|
2113
|
+
"id": "segmented-option",
|
|
2114
|
+
"label": "Segmented option",
|
|
2115
|
+
"group": "Buttons",
|
|
2116
|
+
"appliesTo": [
|
|
2117
|
+
"ButtonBlock"
|
|
2118
|
+
],
|
|
2119
|
+
"base": {
|
|
2120
|
+
"color": "var(--iox-segmented-option-ink)",
|
|
2121
|
+
"backgroundColor": "transparent",
|
|
2122
|
+
"padding": "var(--iox-segmented-option-pad)",
|
|
2123
|
+
"borderRadius": "var(--iox-segmented-option-radius)",
|
|
2124
|
+
"minHeight": "var(--iox-segmented-option-min-height)",
|
|
2125
|
+
"fontFamily": "var(--iox-button-font)",
|
|
2126
|
+
"fontSize": "var(--iox-button-size)",
|
|
2127
|
+
"fontWeight": "var(--iox-button-weight)",
|
|
2128
|
+
"lineHeight": "var(--iox-button-leading)",
|
|
2129
|
+
"letterSpacing": "var(--iox-button-tracking)",
|
|
2130
|
+
"textTransform": "var(--iox-button-case)",
|
|
2131
|
+
"transitionDuration": "var(--iox-dur-fast)",
|
|
2132
|
+
"transitionTimingFunction": "var(--iox-ease-standard)"
|
|
2133
|
+
},
|
|
2134
|
+
"hover": {
|
|
2135
|
+
"color": "var(--iox-segmented-option-hover-ink)"
|
|
2136
|
+
},
|
|
2137
|
+
"on": {
|
|
2138
|
+
"backgroundColor": "var(--iox-segmented-on-bg)",
|
|
2139
|
+
"color": "var(--iox-segmented-on-ink)",
|
|
2140
|
+
"boxShadow": "var(--iox-segmented-on-shadow)"
|
|
2141
|
+
},
|
|
2142
|
+
"focus": {
|
|
2143
|
+
"boxShadow": "var(--iox-focus-ring)"
|
|
2144
|
+
}
|
|
2145
|
+
},
|
|
2146
|
+
{
|
|
2147
|
+
"id": "price",
|
|
2148
|
+
"label": "Price",
|
|
2149
|
+
"group": "Text",
|
|
2150
|
+
"appliesTo": [
|
|
2151
|
+
"Text"
|
|
2152
|
+
],
|
|
2153
|
+
"base": {
|
|
2154
|
+
"fontFamily": "var(--iox-font-display)",
|
|
2155
|
+
"fontSize": "var(--iox-size-h2)",
|
|
2156
|
+
"fontWeight": "var(--iox-weight-heading)",
|
|
2157
|
+
"lineHeight": "var(--iox-leading-heading)",
|
|
2158
|
+
"letterSpacing": "var(--iox-tracking-display)",
|
|
2159
|
+
"color": "var(--iox-heading-color)",
|
|
2160
|
+
"fontVariantNumeric": "tabular-nums"
|
|
2161
|
+
}
|
|
2162
|
+
},
|
|
2019
2163
|
{
|
|
2020
2164
|
"id": "media",
|
|
2021
2165
|
"label": "Image",
|
|
@@ -4289,6 +4433,111 @@ const SPEC_FLAVOR_PACKS = [
|
|
|
4289
4433
|
"group": "components",
|
|
4290
4434
|
"value": "0px 0px 2px 0px"
|
|
4291
4435
|
},
|
|
4436
|
+
{
|
|
4437
|
+
"name": "segmented-track-bg",
|
|
4438
|
+
"tier": "component",
|
|
4439
|
+
"type": "color",
|
|
4440
|
+
"group": "components",
|
|
4441
|
+
"value": "var(--iox-surface-2)"
|
|
4442
|
+
},
|
|
4443
|
+
{
|
|
4444
|
+
"name": "segmented-track-border",
|
|
4445
|
+
"tier": "component",
|
|
4446
|
+
"type": "color",
|
|
4447
|
+
"group": "components",
|
|
4448
|
+
"value": "var(--iox-line)"
|
|
4449
|
+
},
|
|
4450
|
+
{
|
|
4451
|
+
"name": "segmented-track-border-width",
|
|
4452
|
+
"tier": "component",
|
|
4453
|
+
"type": "size",
|
|
4454
|
+
"group": "components",
|
|
4455
|
+
"value": "var(--iox-border-width)"
|
|
4456
|
+
},
|
|
4457
|
+
{
|
|
4458
|
+
"name": "segmented-track-backdrop",
|
|
4459
|
+
"tier": "component",
|
|
4460
|
+
"type": "effect",
|
|
4461
|
+
"group": "components",
|
|
4462
|
+
"value": "none"
|
|
4463
|
+
},
|
|
4464
|
+
{
|
|
4465
|
+
"name": "segmented-pad",
|
|
4466
|
+
"tier": "component",
|
|
4467
|
+
"type": "spacing",
|
|
4468
|
+
"group": "components",
|
|
4469
|
+
"value": "4px"
|
|
4470
|
+
},
|
|
4471
|
+
{
|
|
4472
|
+
"name": "segmented-gap",
|
|
4473
|
+
"tier": "component",
|
|
4474
|
+
"type": "spacing",
|
|
4475
|
+
"group": "components",
|
|
4476
|
+
"value": "4px"
|
|
4477
|
+
},
|
|
4478
|
+
{
|
|
4479
|
+
"name": "segmented-radius",
|
|
4480
|
+
"tier": "component",
|
|
4481
|
+
"type": "radius",
|
|
4482
|
+
"group": "components",
|
|
4483
|
+
"value": "calc(var(--iox-button-radius) + var(--iox-segmented-pad))"
|
|
4484
|
+
},
|
|
4485
|
+
{
|
|
4486
|
+
"name": "segmented-option-ink",
|
|
4487
|
+
"tier": "component",
|
|
4488
|
+
"type": "color",
|
|
4489
|
+
"group": "components",
|
|
4490
|
+
"value": "var(--iox-text-muted)"
|
|
4491
|
+
},
|
|
4492
|
+
{
|
|
4493
|
+
"name": "segmented-option-hover-ink",
|
|
4494
|
+
"tier": "component",
|
|
4495
|
+
"type": "color",
|
|
4496
|
+
"group": "components",
|
|
4497
|
+
"value": "var(--iox-text)"
|
|
4498
|
+
},
|
|
4499
|
+
{
|
|
4500
|
+
"name": "segmented-option-pad",
|
|
4501
|
+
"tier": "component",
|
|
4502
|
+
"type": "spacing",
|
|
4503
|
+
"group": "components",
|
|
4504
|
+
"value": "10px 20px"
|
|
4505
|
+
},
|
|
4506
|
+
{
|
|
4507
|
+
"name": "segmented-option-radius",
|
|
4508
|
+
"tier": "component",
|
|
4509
|
+
"type": "radius",
|
|
4510
|
+
"group": "components",
|
|
4511
|
+
"value": "var(--iox-button-radius)"
|
|
4512
|
+
},
|
|
4513
|
+
{
|
|
4514
|
+
"name": "segmented-option-min-height",
|
|
4515
|
+
"tier": "component",
|
|
4516
|
+
"type": "size",
|
|
4517
|
+
"group": "components",
|
|
4518
|
+
"value": "44px"
|
|
4519
|
+
},
|
|
4520
|
+
{
|
|
4521
|
+
"name": "segmented-on-bg",
|
|
4522
|
+
"tier": "component",
|
|
4523
|
+
"type": "color",
|
|
4524
|
+
"group": "components",
|
|
4525
|
+
"value": "var(--iox-accent-text)"
|
|
4526
|
+
},
|
|
4527
|
+
{
|
|
4528
|
+
"name": "segmented-on-ink",
|
|
4529
|
+
"tier": "component",
|
|
4530
|
+
"type": "color",
|
|
4531
|
+
"group": "components",
|
|
4532
|
+
"value": "var(--iox-bg)"
|
|
4533
|
+
},
|
|
4534
|
+
{
|
|
4535
|
+
"name": "segmented-on-shadow",
|
|
4536
|
+
"tier": "component",
|
|
4537
|
+
"type": "shadow",
|
|
4538
|
+
"group": "components",
|
|
4539
|
+
"value": "var(--iox-shadow-sm)"
|
|
4540
|
+
},
|
|
4292
4541
|
{
|
|
4293
4542
|
"name": "heading-color",
|
|
4294
4543
|
"tier": "component",
|
|
@@ -5981,124 +6230,234 @@ const SPEC_FLAVOR_PACKS = [
|
|
|
5981
6230
|
"value": "0px 0px 2px 0px"
|
|
5982
6231
|
},
|
|
5983
6232
|
{
|
|
5984
|
-
"name": "
|
|
6233
|
+
"name": "segmented-track-bg",
|
|
5985
6234
|
"tier": "component",
|
|
5986
6235
|
"type": "color",
|
|
5987
6236
|
"group": "components",
|
|
5988
|
-
"value": "var(--iox-
|
|
6237
|
+
"value": "var(--iox-section-bg)",
|
|
6238
|
+
"overridden": true
|
|
5989
6239
|
},
|
|
5990
6240
|
{
|
|
5991
|
-
"name": "
|
|
6241
|
+
"name": "segmented-track-border",
|
|
5992
6242
|
"tier": "component",
|
|
5993
6243
|
"type": "color",
|
|
5994
6244
|
"group": "components",
|
|
5995
|
-
"value": "var(--iox-
|
|
6245
|
+
"value": "var(--iox-line-strong)",
|
|
5996
6246
|
"overridden": true
|
|
5997
6247
|
},
|
|
5998
6248
|
{
|
|
5999
|
-
"name": "
|
|
6249
|
+
"name": "segmented-track-border-width",
|
|
6000
6250
|
"tier": "component",
|
|
6001
|
-
"type": "
|
|
6251
|
+
"type": "size",
|
|
6002
6252
|
"group": "components",
|
|
6003
|
-
"value": "var(--iox-
|
|
6253
|
+
"value": "var(--iox-border-width)"
|
|
6004
6254
|
},
|
|
6005
6255
|
{
|
|
6006
|
-
"name": "
|
|
6256
|
+
"name": "segmented-track-backdrop",
|
|
6007
6257
|
"tier": "component",
|
|
6008
|
-
"type": "
|
|
6258
|
+
"type": "effect",
|
|
6009
6259
|
"group": "components",
|
|
6010
|
-
"value": "
|
|
6260
|
+
"value": "none"
|
|
6011
6261
|
},
|
|
6012
6262
|
{
|
|
6013
|
-
"name": "
|
|
6263
|
+
"name": "segmented-pad",
|
|
6014
6264
|
"tier": "component",
|
|
6015
|
-
"type": "
|
|
6265
|
+
"type": "spacing",
|
|
6016
6266
|
"group": "components",
|
|
6017
|
-
"value": "
|
|
6267
|
+
"value": "4px"
|
|
6018
6268
|
},
|
|
6019
6269
|
{
|
|
6020
|
-
"name": "
|
|
6270
|
+
"name": "segmented-gap",
|
|
6021
6271
|
"tier": "component",
|
|
6022
6272
|
"type": "spacing",
|
|
6023
6273
|
"group": "components",
|
|
6024
|
-
"value": "
|
|
6274
|
+
"value": "4px"
|
|
6025
6275
|
},
|
|
6026
6276
|
{
|
|
6027
|
-
"name": "
|
|
6277
|
+
"name": "segmented-radius",
|
|
6028
6278
|
"tier": "component",
|
|
6029
|
-
"type": "
|
|
6279
|
+
"type": "radius",
|
|
6030
6280
|
"group": "components",
|
|
6031
|
-
"value": "var(--iox-
|
|
6281
|
+
"value": "var(--iox-button-radius)",
|
|
6282
|
+
"overridden": true
|
|
6032
6283
|
},
|
|
6033
6284
|
{
|
|
6034
|
-
"name": "
|
|
6285
|
+
"name": "segmented-option-ink",
|
|
6035
6286
|
"tier": "component",
|
|
6036
6287
|
"type": "color",
|
|
6037
6288
|
"group": "components",
|
|
6038
|
-
"value": "var(--iox-
|
|
6289
|
+
"value": "var(--iox-text-muted)"
|
|
6039
6290
|
},
|
|
6040
6291
|
{
|
|
6041
|
-
"name": "
|
|
6292
|
+
"name": "segmented-option-hover-ink",
|
|
6042
6293
|
"tier": "component",
|
|
6043
6294
|
"type": "color",
|
|
6044
6295
|
"group": "components",
|
|
6045
6296
|
"value": "var(--iox-text)"
|
|
6046
6297
|
},
|
|
6047
6298
|
{
|
|
6048
|
-
"name": "
|
|
6299
|
+
"name": "segmented-option-pad",
|
|
6049
6300
|
"tier": "component",
|
|
6050
|
-
"type": "
|
|
6301
|
+
"type": "spacing",
|
|
6051
6302
|
"group": "components",
|
|
6052
|
-
"value": "
|
|
6303
|
+
"value": "10px 20px"
|
|
6053
6304
|
},
|
|
6054
6305
|
{
|
|
6055
|
-
"name": "
|
|
6306
|
+
"name": "segmented-option-radius",
|
|
6056
6307
|
"tier": "component",
|
|
6057
|
-
"type": "
|
|
6308
|
+
"type": "radius",
|
|
6058
6309
|
"group": "components",
|
|
6059
|
-
"value": "var(--iox-
|
|
6310
|
+
"value": "var(--iox-button-radius)"
|
|
6060
6311
|
},
|
|
6061
6312
|
{
|
|
6062
|
-
"name": "
|
|
6313
|
+
"name": "segmented-option-min-height",
|
|
6063
6314
|
"tier": "component",
|
|
6064
|
-
"type": "
|
|
6315
|
+
"type": "size",
|
|
6065
6316
|
"group": "components",
|
|
6066
|
-
"value": "
|
|
6317
|
+
"value": "44px"
|
|
6067
6318
|
},
|
|
6068
6319
|
{
|
|
6069
|
-
"name": "
|
|
6320
|
+
"name": "segmented-on-bg",
|
|
6070
6321
|
"tier": "component",
|
|
6071
6322
|
"type": "color",
|
|
6072
6323
|
"group": "components",
|
|
6073
|
-
"value": "var(--iox-
|
|
6324
|
+
"value": "var(--iox-text)",
|
|
6325
|
+
"overridden": true
|
|
6074
6326
|
},
|
|
6075
6327
|
{
|
|
6076
|
-
"name": "
|
|
6328
|
+
"name": "segmented-on-ink",
|
|
6077
6329
|
"tier": "component",
|
|
6078
6330
|
"type": "color",
|
|
6079
6331
|
"group": "components",
|
|
6080
|
-
"value": "var(--iox-
|
|
6332
|
+
"value": "var(--iox-bg)"
|
|
6081
6333
|
},
|
|
6082
6334
|
{
|
|
6083
|
-
"name": "
|
|
6335
|
+
"name": "segmented-on-shadow",
|
|
6084
6336
|
"tier": "component",
|
|
6085
|
-
"type": "
|
|
6337
|
+
"type": "shadow",
|
|
6086
6338
|
"group": "components",
|
|
6087
|
-
"value": "
|
|
6339
|
+
"value": "none",
|
|
6340
|
+
"overridden": true
|
|
6088
6341
|
},
|
|
6089
6342
|
{
|
|
6090
|
-
"name": "
|
|
6343
|
+
"name": "heading-color",
|
|
6091
6344
|
"tier": "component",
|
|
6092
6345
|
"type": "color",
|
|
6093
6346
|
"group": "components",
|
|
6094
|
-
"value": "var(--iox-
|
|
6347
|
+
"value": "var(--iox-text)"
|
|
6095
6348
|
},
|
|
6096
6349
|
{
|
|
6097
|
-
"name": "
|
|
6350
|
+
"name": "eyebrow-color",
|
|
6098
6351
|
"tier": "component",
|
|
6099
6352
|
"type": "color",
|
|
6100
6353
|
"group": "components",
|
|
6101
|
-
"value": "
|
|
6354
|
+
"value": "var(--iox-text-muted)",
|
|
6355
|
+
"overridden": true
|
|
6356
|
+
},
|
|
6357
|
+
{
|
|
6358
|
+
"name": "icon-color",
|
|
6359
|
+
"tier": "component",
|
|
6360
|
+
"type": "color",
|
|
6361
|
+
"group": "components",
|
|
6362
|
+
"value": "var(--iox-accent-text)"
|
|
6363
|
+
},
|
|
6364
|
+
{
|
|
6365
|
+
"name": "divider-color",
|
|
6366
|
+
"tier": "component",
|
|
6367
|
+
"type": "color",
|
|
6368
|
+
"group": "components",
|
|
6369
|
+
"value": "var(--iox-line)"
|
|
6370
|
+
},
|
|
6371
|
+
{
|
|
6372
|
+
"name": "badge-radius",
|
|
6373
|
+
"tier": "component",
|
|
6374
|
+
"type": "radius",
|
|
6375
|
+
"group": "components",
|
|
6376
|
+
"value": "var(--iox-radius-pill)"
|
|
6377
|
+
},
|
|
6378
|
+
{
|
|
6379
|
+
"name": "badge-pad",
|
|
6380
|
+
"tier": "component",
|
|
6381
|
+
"type": "spacing",
|
|
6382
|
+
"group": "components",
|
|
6383
|
+
"value": "3px 10px"
|
|
6384
|
+
},
|
|
6385
|
+
{
|
|
6386
|
+
"name": "badge-size",
|
|
6387
|
+
"tier": "component",
|
|
6388
|
+
"type": "size",
|
|
6389
|
+
"group": "components",
|
|
6390
|
+
"value": "var(--iox-size-label)"
|
|
6391
|
+
},
|
|
6392
|
+
{
|
|
6393
|
+
"name": "badge-neutral-bg",
|
|
6394
|
+
"tier": "component",
|
|
6395
|
+
"type": "color",
|
|
6396
|
+
"group": "components",
|
|
6397
|
+
"value": "var(--iox-surface-2)"
|
|
6398
|
+
},
|
|
6399
|
+
{
|
|
6400
|
+
"name": "badge-neutral-ink",
|
|
6401
|
+
"tier": "component",
|
|
6402
|
+
"type": "color",
|
|
6403
|
+
"group": "components",
|
|
6404
|
+
"value": "var(--iox-text)"
|
|
6405
|
+
},
|
|
6406
|
+
{
|
|
6407
|
+
"name": "badge-success-bg",
|
|
6408
|
+
"tier": "component",
|
|
6409
|
+
"type": "color",
|
|
6410
|
+
"group": "components",
|
|
6411
|
+
"value": "var(--iox-success-bg)"
|
|
6412
|
+
},
|
|
6413
|
+
{
|
|
6414
|
+
"name": "badge-success-ink",
|
|
6415
|
+
"tier": "component",
|
|
6416
|
+
"type": "color",
|
|
6417
|
+
"group": "components",
|
|
6418
|
+
"value": "var(--iox-success)"
|
|
6419
|
+
},
|
|
6420
|
+
{
|
|
6421
|
+
"name": "badge-warning-bg",
|
|
6422
|
+
"tier": "component",
|
|
6423
|
+
"type": "color",
|
|
6424
|
+
"group": "components",
|
|
6425
|
+
"value": "var(--iox-warning-bg)"
|
|
6426
|
+
},
|
|
6427
|
+
{
|
|
6428
|
+
"name": "badge-warning-ink",
|
|
6429
|
+
"tier": "component",
|
|
6430
|
+
"type": "color",
|
|
6431
|
+
"group": "components",
|
|
6432
|
+
"value": "var(--iox-warning)"
|
|
6433
|
+
},
|
|
6434
|
+
{
|
|
6435
|
+
"name": "badge-accent-bg",
|
|
6436
|
+
"tier": "component",
|
|
6437
|
+
"type": "color",
|
|
6438
|
+
"group": "components",
|
|
6439
|
+
"value": "var(--iox-accent)"
|
|
6440
|
+
},
|
|
6441
|
+
{
|
|
6442
|
+
"name": "badge-accent-ink",
|
|
6443
|
+
"tier": "component",
|
|
6444
|
+
"type": "color",
|
|
6445
|
+
"group": "components",
|
|
6446
|
+
"value": "var(--iox-accent-ink)"
|
|
6447
|
+
},
|
|
6448
|
+
{
|
|
6449
|
+
"name": "chip-border",
|
|
6450
|
+
"tier": "component",
|
|
6451
|
+
"type": "color",
|
|
6452
|
+
"group": "components",
|
|
6453
|
+
"value": "var(--iox-line-strong)"
|
|
6454
|
+
},
|
|
6455
|
+
{
|
|
6456
|
+
"name": "media-scrim",
|
|
6457
|
+
"tier": "component",
|
|
6458
|
+
"type": "color",
|
|
6459
|
+
"group": "components",
|
|
6460
|
+
"value": "rgba(0, 0, 0, 0.62)"
|
|
6102
6461
|
},
|
|
6103
6462
|
{
|
|
6104
6463
|
"name": "media-scrim-ink",
|
|
@@ -7665,6 +8024,112 @@ const SPEC_FLAVOR_PACKS = [
|
|
|
7665
8024
|
"group": "components",
|
|
7666
8025
|
"value": "0px 0px 2px 0px"
|
|
7667
8026
|
},
|
|
8027
|
+
{
|
|
8028
|
+
"name": "segmented-track-bg",
|
|
8029
|
+
"tier": "component",
|
|
8030
|
+
"type": "color",
|
|
8031
|
+
"group": "components",
|
|
8032
|
+
"value": "var(--iox-surface)",
|
|
8033
|
+
"overridden": true
|
|
8034
|
+
},
|
|
8035
|
+
{
|
|
8036
|
+
"name": "segmented-track-border",
|
|
8037
|
+
"tier": "component",
|
|
8038
|
+
"type": "color",
|
|
8039
|
+
"group": "components",
|
|
8040
|
+
"value": "var(--iox-line)"
|
|
8041
|
+
},
|
|
8042
|
+
{
|
|
8043
|
+
"name": "segmented-track-border-width",
|
|
8044
|
+
"tier": "component",
|
|
8045
|
+
"type": "size",
|
|
8046
|
+
"group": "components",
|
|
8047
|
+
"value": "var(--iox-border-width)"
|
|
8048
|
+
},
|
|
8049
|
+
{
|
|
8050
|
+
"name": "segmented-track-backdrop",
|
|
8051
|
+
"tier": "component",
|
|
8052
|
+
"type": "effect",
|
|
8053
|
+
"group": "components",
|
|
8054
|
+
"value": "none"
|
|
8055
|
+
},
|
|
8056
|
+
{
|
|
8057
|
+
"name": "segmented-pad",
|
|
8058
|
+
"tier": "component",
|
|
8059
|
+
"type": "spacing",
|
|
8060
|
+
"group": "components",
|
|
8061
|
+
"value": "4px"
|
|
8062
|
+
},
|
|
8063
|
+
{
|
|
8064
|
+
"name": "segmented-gap",
|
|
8065
|
+
"tier": "component",
|
|
8066
|
+
"type": "spacing",
|
|
8067
|
+
"group": "components",
|
|
8068
|
+
"value": "4px"
|
|
8069
|
+
},
|
|
8070
|
+
{
|
|
8071
|
+
"name": "segmented-radius",
|
|
8072
|
+
"tier": "component",
|
|
8073
|
+
"type": "radius",
|
|
8074
|
+
"group": "components",
|
|
8075
|
+
"value": "calc(var(--iox-button-radius) + var(--iox-segmented-pad))"
|
|
8076
|
+
},
|
|
8077
|
+
{
|
|
8078
|
+
"name": "segmented-option-ink",
|
|
8079
|
+
"tier": "component",
|
|
8080
|
+
"type": "color",
|
|
8081
|
+
"group": "components",
|
|
8082
|
+
"value": "var(--iox-text-muted)"
|
|
8083
|
+
},
|
|
8084
|
+
{
|
|
8085
|
+
"name": "segmented-option-hover-ink",
|
|
8086
|
+
"tier": "component",
|
|
8087
|
+
"type": "color",
|
|
8088
|
+
"group": "components",
|
|
8089
|
+
"value": "var(--iox-text)"
|
|
8090
|
+
},
|
|
8091
|
+
{
|
|
8092
|
+
"name": "segmented-option-pad",
|
|
8093
|
+
"tier": "component",
|
|
8094
|
+
"type": "spacing",
|
|
8095
|
+
"group": "components",
|
|
8096
|
+
"value": "10px 20px"
|
|
8097
|
+
},
|
|
8098
|
+
{
|
|
8099
|
+
"name": "segmented-option-radius",
|
|
8100
|
+
"tier": "component",
|
|
8101
|
+
"type": "radius",
|
|
8102
|
+
"group": "components",
|
|
8103
|
+
"value": "var(--iox-button-radius)"
|
|
8104
|
+
},
|
|
8105
|
+
{
|
|
8106
|
+
"name": "segmented-option-min-height",
|
|
8107
|
+
"tier": "component",
|
|
8108
|
+
"type": "size",
|
|
8109
|
+
"group": "components",
|
|
8110
|
+
"value": "44px"
|
|
8111
|
+
},
|
|
8112
|
+
{
|
|
8113
|
+
"name": "segmented-on-bg",
|
|
8114
|
+
"tier": "component",
|
|
8115
|
+
"type": "color",
|
|
8116
|
+
"group": "components",
|
|
8117
|
+
"value": "var(--iox-accent-text)"
|
|
8118
|
+
},
|
|
8119
|
+
{
|
|
8120
|
+
"name": "segmented-on-ink",
|
|
8121
|
+
"tier": "component",
|
|
8122
|
+
"type": "color",
|
|
8123
|
+
"group": "components",
|
|
8124
|
+
"value": "var(--iox-bg)"
|
|
8125
|
+
},
|
|
8126
|
+
{
|
|
8127
|
+
"name": "segmented-on-shadow",
|
|
8128
|
+
"tier": "component",
|
|
8129
|
+
"type": "shadow",
|
|
8130
|
+
"group": "components",
|
|
8131
|
+
"value": "var(--iox-shadow-sm)"
|
|
8132
|
+
},
|
|
7668
8133
|
{
|
|
7669
8134
|
"name": "heading-color",
|
|
7670
8135
|
"tier": "component",
|
|
@@ -9391,6 +9856,114 @@ const SPEC_FLAVOR_PACKS = [
|
|
|
9391
9856
|
"group": "components",
|
|
9392
9857
|
"value": "0px 0px 2px 0px"
|
|
9393
9858
|
},
|
|
9859
|
+
{
|
|
9860
|
+
"name": "segmented-track-bg",
|
|
9861
|
+
"tier": "component",
|
|
9862
|
+
"type": "color",
|
|
9863
|
+
"group": "components",
|
|
9864
|
+
"value": "var(--iox-surface-glass)",
|
|
9865
|
+
"overridden": true
|
|
9866
|
+
},
|
|
9867
|
+
{
|
|
9868
|
+
"name": "segmented-track-border",
|
|
9869
|
+
"tier": "component",
|
|
9870
|
+
"type": "color",
|
|
9871
|
+
"group": "components",
|
|
9872
|
+
"value": "var(--iox-glass-border)",
|
|
9873
|
+
"overridden": true
|
|
9874
|
+
},
|
|
9875
|
+
{
|
|
9876
|
+
"name": "segmented-track-border-width",
|
|
9877
|
+
"tier": "component",
|
|
9878
|
+
"type": "size",
|
|
9879
|
+
"group": "components",
|
|
9880
|
+
"value": "var(--iox-border-width)"
|
|
9881
|
+
},
|
|
9882
|
+
{
|
|
9883
|
+
"name": "segmented-track-backdrop",
|
|
9884
|
+
"tier": "component",
|
|
9885
|
+
"type": "effect",
|
|
9886
|
+
"group": "components",
|
|
9887
|
+
"value": "var(--iox-blur-surface)",
|
|
9888
|
+
"overridden": true
|
|
9889
|
+
},
|
|
9890
|
+
{
|
|
9891
|
+
"name": "segmented-pad",
|
|
9892
|
+
"tier": "component",
|
|
9893
|
+
"type": "spacing",
|
|
9894
|
+
"group": "components",
|
|
9895
|
+
"value": "4px"
|
|
9896
|
+
},
|
|
9897
|
+
{
|
|
9898
|
+
"name": "segmented-gap",
|
|
9899
|
+
"tier": "component",
|
|
9900
|
+
"type": "spacing",
|
|
9901
|
+
"group": "components",
|
|
9902
|
+
"value": "4px"
|
|
9903
|
+
},
|
|
9904
|
+
{
|
|
9905
|
+
"name": "segmented-radius",
|
|
9906
|
+
"tier": "component",
|
|
9907
|
+
"type": "radius",
|
|
9908
|
+
"group": "components",
|
|
9909
|
+
"value": "calc(var(--iox-button-radius) + var(--iox-segmented-pad))"
|
|
9910
|
+
},
|
|
9911
|
+
{
|
|
9912
|
+
"name": "segmented-option-ink",
|
|
9913
|
+
"tier": "component",
|
|
9914
|
+
"type": "color",
|
|
9915
|
+
"group": "components",
|
|
9916
|
+
"value": "var(--iox-text-muted)"
|
|
9917
|
+
},
|
|
9918
|
+
{
|
|
9919
|
+
"name": "segmented-option-hover-ink",
|
|
9920
|
+
"tier": "component",
|
|
9921
|
+
"type": "color",
|
|
9922
|
+
"group": "components",
|
|
9923
|
+
"value": "var(--iox-text)"
|
|
9924
|
+
},
|
|
9925
|
+
{
|
|
9926
|
+
"name": "segmented-option-pad",
|
|
9927
|
+
"tier": "component",
|
|
9928
|
+
"type": "spacing",
|
|
9929
|
+
"group": "components",
|
|
9930
|
+
"value": "10px 20px"
|
|
9931
|
+
},
|
|
9932
|
+
{
|
|
9933
|
+
"name": "segmented-option-radius",
|
|
9934
|
+
"tier": "component",
|
|
9935
|
+
"type": "radius",
|
|
9936
|
+
"group": "components",
|
|
9937
|
+
"value": "var(--iox-button-radius)"
|
|
9938
|
+
},
|
|
9939
|
+
{
|
|
9940
|
+
"name": "segmented-option-min-height",
|
|
9941
|
+
"tier": "component",
|
|
9942
|
+
"type": "size",
|
|
9943
|
+
"group": "components",
|
|
9944
|
+
"value": "44px"
|
|
9945
|
+
},
|
|
9946
|
+
{
|
|
9947
|
+
"name": "segmented-on-bg",
|
|
9948
|
+
"tier": "component",
|
|
9949
|
+
"type": "color",
|
|
9950
|
+
"group": "components",
|
|
9951
|
+
"value": "var(--iox-accent-text)"
|
|
9952
|
+
},
|
|
9953
|
+
{
|
|
9954
|
+
"name": "segmented-on-ink",
|
|
9955
|
+
"tier": "component",
|
|
9956
|
+
"type": "color",
|
|
9957
|
+
"group": "components",
|
|
9958
|
+
"value": "var(--iox-bg)"
|
|
9959
|
+
},
|
|
9960
|
+
{
|
|
9961
|
+
"name": "segmented-on-shadow",
|
|
9962
|
+
"tier": "component",
|
|
9963
|
+
"type": "shadow",
|
|
9964
|
+
"group": "components",
|
|
9965
|
+
"value": "var(--iox-shadow-sm)"
|
|
9966
|
+
},
|
|
9394
9967
|
{
|
|
9395
9968
|
"name": "heading-color",
|
|
9396
9969
|
"tier": "component",
|
|
@@ -11079,6 +11652,114 @@ const SPEC_FLAVOR_PACKS = [
|
|
|
11079
11652
|
"group": "components",
|
|
11080
11653
|
"value": "0px 0px 2px 0px"
|
|
11081
11654
|
},
|
|
11655
|
+
{
|
|
11656
|
+
"name": "segmented-track-bg",
|
|
11657
|
+
"tier": "component",
|
|
11658
|
+
"type": "color",
|
|
11659
|
+
"group": "components",
|
|
11660
|
+
"value": "var(--iox-section-bg)",
|
|
11661
|
+
"overridden": true
|
|
11662
|
+
},
|
|
11663
|
+
{
|
|
11664
|
+
"name": "segmented-track-border",
|
|
11665
|
+
"tier": "component",
|
|
11666
|
+
"type": "color",
|
|
11667
|
+
"group": "components",
|
|
11668
|
+
"value": "var(--iox-line-strong)",
|
|
11669
|
+
"overridden": true
|
|
11670
|
+
},
|
|
11671
|
+
{
|
|
11672
|
+
"name": "segmented-track-border-width",
|
|
11673
|
+
"tier": "component",
|
|
11674
|
+
"type": "size",
|
|
11675
|
+
"group": "components",
|
|
11676
|
+
"value": "var(--iox-border-width)"
|
|
11677
|
+
},
|
|
11678
|
+
{
|
|
11679
|
+
"name": "segmented-track-backdrop",
|
|
11680
|
+
"tier": "component",
|
|
11681
|
+
"type": "effect",
|
|
11682
|
+
"group": "components",
|
|
11683
|
+
"value": "none"
|
|
11684
|
+
},
|
|
11685
|
+
{
|
|
11686
|
+
"name": "segmented-pad",
|
|
11687
|
+
"tier": "component",
|
|
11688
|
+
"type": "spacing",
|
|
11689
|
+
"group": "components",
|
|
11690
|
+
"value": "4px"
|
|
11691
|
+
},
|
|
11692
|
+
{
|
|
11693
|
+
"name": "segmented-gap",
|
|
11694
|
+
"tier": "component",
|
|
11695
|
+
"type": "spacing",
|
|
11696
|
+
"group": "components",
|
|
11697
|
+
"value": "4px"
|
|
11698
|
+
},
|
|
11699
|
+
{
|
|
11700
|
+
"name": "segmented-radius",
|
|
11701
|
+
"tier": "component",
|
|
11702
|
+
"type": "radius",
|
|
11703
|
+
"group": "components",
|
|
11704
|
+
"value": "calc(var(--iox-button-radius) + var(--iox-segmented-pad))"
|
|
11705
|
+
},
|
|
11706
|
+
{
|
|
11707
|
+
"name": "segmented-option-ink",
|
|
11708
|
+
"tier": "component",
|
|
11709
|
+
"type": "color",
|
|
11710
|
+
"group": "components",
|
|
11711
|
+
"value": "var(--iox-text-muted)"
|
|
11712
|
+
},
|
|
11713
|
+
{
|
|
11714
|
+
"name": "segmented-option-hover-ink",
|
|
11715
|
+
"tier": "component",
|
|
11716
|
+
"type": "color",
|
|
11717
|
+
"group": "components",
|
|
11718
|
+
"value": "var(--iox-text)"
|
|
11719
|
+
},
|
|
11720
|
+
{
|
|
11721
|
+
"name": "segmented-option-pad",
|
|
11722
|
+
"tier": "component",
|
|
11723
|
+
"type": "spacing",
|
|
11724
|
+
"group": "components",
|
|
11725
|
+
"value": "10px 20px"
|
|
11726
|
+
},
|
|
11727
|
+
{
|
|
11728
|
+
"name": "segmented-option-radius",
|
|
11729
|
+
"tier": "component",
|
|
11730
|
+
"type": "radius",
|
|
11731
|
+
"group": "components",
|
|
11732
|
+
"value": "var(--iox-button-radius)"
|
|
11733
|
+
},
|
|
11734
|
+
{
|
|
11735
|
+
"name": "segmented-option-min-height",
|
|
11736
|
+
"tier": "component",
|
|
11737
|
+
"type": "size",
|
|
11738
|
+
"group": "components",
|
|
11739
|
+
"value": "44px"
|
|
11740
|
+
},
|
|
11741
|
+
{
|
|
11742
|
+
"name": "segmented-on-bg",
|
|
11743
|
+
"tier": "component",
|
|
11744
|
+
"type": "color",
|
|
11745
|
+
"group": "components",
|
|
11746
|
+
"value": "var(--iox-accent-text)"
|
|
11747
|
+
},
|
|
11748
|
+
{
|
|
11749
|
+
"name": "segmented-on-ink",
|
|
11750
|
+
"tier": "component",
|
|
11751
|
+
"type": "color",
|
|
11752
|
+
"group": "components",
|
|
11753
|
+
"value": "var(--iox-bg)"
|
|
11754
|
+
},
|
|
11755
|
+
{
|
|
11756
|
+
"name": "segmented-on-shadow",
|
|
11757
|
+
"tier": "component",
|
|
11758
|
+
"type": "shadow",
|
|
11759
|
+
"group": "components",
|
|
11760
|
+
"value": "none",
|
|
11761
|
+
"overridden": true
|
|
11762
|
+
},
|
|
11082
11763
|
{
|
|
11083
11764
|
"name": "heading-color",
|
|
11084
11765
|
"tier": "component",
|
|
@@ -12773,6 +13454,116 @@ const SPEC_FLAVOR_PACKS = [
|
|
|
12773
13454
|
"group": "components",
|
|
12774
13455
|
"value": "0px 0px 2px 0px"
|
|
12775
13456
|
},
|
|
13457
|
+
{
|
|
13458
|
+
"name": "segmented-track-bg",
|
|
13459
|
+
"tier": "component",
|
|
13460
|
+
"type": "color",
|
|
13461
|
+
"group": "components",
|
|
13462
|
+
"value": "var(--iox-surface)",
|
|
13463
|
+
"overridden": true
|
|
13464
|
+
},
|
|
13465
|
+
{
|
|
13466
|
+
"name": "segmented-track-border",
|
|
13467
|
+
"tier": "component",
|
|
13468
|
+
"type": "color",
|
|
13469
|
+
"group": "components",
|
|
13470
|
+
"value": "var(--iox-line-strong)",
|
|
13471
|
+
"overridden": true
|
|
13472
|
+
},
|
|
13473
|
+
{
|
|
13474
|
+
"name": "segmented-track-border-width",
|
|
13475
|
+
"tier": "component",
|
|
13476
|
+
"type": "size",
|
|
13477
|
+
"group": "components",
|
|
13478
|
+
"value": "var(--iox-border-width)"
|
|
13479
|
+
},
|
|
13480
|
+
{
|
|
13481
|
+
"name": "segmented-track-backdrop",
|
|
13482
|
+
"tier": "component",
|
|
13483
|
+
"type": "effect",
|
|
13484
|
+
"group": "components",
|
|
13485
|
+
"value": "none"
|
|
13486
|
+
},
|
|
13487
|
+
{
|
|
13488
|
+
"name": "segmented-pad",
|
|
13489
|
+
"tier": "component",
|
|
13490
|
+
"type": "spacing",
|
|
13491
|
+
"group": "components",
|
|
13492
|
+
"value": "4px"
|
|
13493
|
+
},
|
|
13494
|
+
{
|
|
13495
|
+
"name": "segmented-gap",
|
|
13496
|
+
"tier": "component",
|
|
13497
|
+
"type": "spacing",
|
|
13498
|
+
"group": "components",
|
|
13499
|
+
"value": "4px"
|
|
13500
|
+
},
|
|
13501
|
+
{
|
|
13502
|
+
"name": "segmented-radius",
|
|
13503
|
+
"tier": "component",
|
|
13504
|
+
"type": "radius",
|
|
13505
|
+
"group": "components",
|
|
13506
|
+
"value": "calc(var(--iox-button-radius) + var(--iox-segmented-pad))"
|
|
13507
|
+
},
|
|
13508
|
+
{
|
|
13509
|
+
"name": "segmented-option-ink",
|
|
13510
|
+
"tier": "component",
|
|
13511
|
+
"type": "color",
|
|
13512
|
+
"group": "components",
|
|
13513
|
+
"value": "var(--iox-text-muted)"
|
|
13514
|
+
},
|
|
13515
|
+
{
|
|
13516
|
+
"name": "segmented-option-hover-ink",
|
|
13517
|
+
"tier": "component",
|
|
13518
|
+
"type": "color",
|
|
13519
|
+
"group": "components",
|
|
13520
|
+
"value": "var(--iox-text)"
|
|
13521
|
+
},
|
|
13522
|
+
{
|
|
13523
|
+
"name": "segmented-option-pad",
|
|
13524
|
+
"tier": "component",
|
|
13525
|
+
"type": "spacing",
|
|
13526
|
+
"group": "components",
|
|
13527
|
+
"value": "10px 20px"
|
|
13528
|
+
},
|
|
13529
|
+
{
|
|
13530
|
+
"name": "segmented-option-radius",
|
|
13531
|
+
"tier": "component",
|
|
13532
|
+
"type": "radius",
|
|
13533
|
+
"group": "components",
|
|
13534
|
+
"value": "var(--iox-button-radius)"
|
|
13535
|
+
},
|
|
13536
|
+
{
|
|
13537
|
+
"name": "segmented-option-min-height",
|
|
13538
|
+
"tier": "component",
|
|
13539
|
+
"type": "size",
|
|
13540
|
+
"group": "components",
|
|
13541
|
+
"value": "44px"
|
|
13542
|
+
},
|
|
13543
|
+
{
|
|
13544
|
+
"name": "segmented-on-bg",
|
|
13545
|
+
"tier": "component",
|
|
13546
|
+
"type": "color",
|
|
13547
|
+
"group": "components",
|
|
13548
|
+
"value": "var(--iox-text)",
|
|
13549
|
+
"overridden": true
|
|
13550
|
+
},
|
|
13551
|
+
{
|
|
13552
|
+
"name": "segmented-on-ink",
|
|
13553
|
+
"tier": "component",
|
|
13554
|
+
"type": "color",
|
|
13555
|
+
"group": "components",
|
|
13556
|
+
"value": "var(--iox-surface)",
|
|
13557
|
+
"overridden": true
|
|
13558
|
+
},
|
|
13559
|
+
{
|
|
13560
|
+
"name": "segmented-on-shadow",
|
|
13561
|
+
"tier": "component",
|
|
13562
|
+
"type": "shadow",
|
|
13563
|
+
"group": "components",
|
|
13564
|
+
"value": "none",
|
|
13565
|
+
"overridden": true
|
|
13566
|
+
},
|
|
12776
13567
|
{
|
|
12777
13568
|
"name": "heading-color",
|
|
12778
13569
|
"tier": "component",
|
|
@@ -15041,16 +15832,23 @@ function auditDesignContrast(rows, mode) {
|
|
|
15041
15832
|
const ink = s['color'] ? parseCssColour(resolveIn(values, s['color']), boxInk) : boxInk;
|
|
15042
15833
|
check(e.id, state === 'base' ? (glyph ? 'glyph' : 'text') : `${state} text`, ink, under, glyph ? WCAG_AA_UI : WCAG_AA_TEXT);
|
|
15043
15834
|
// The active tab's mark is the selected state's indicator (WCAG 1.4.11) — the contract's audit, 1:1.
|
|
15044
|
-
const
|
|
15835
|
+
const on = state === 'on' ? e.on : undefined;
|
|
15836
|
+
const mark = on?.['borderColor'];
|
|
15045
15837
|
if (mark)
|
|
15046
15838
|
check(e.id, 'on mark', parseCssColour(resolveIn(values, mark), ink), bgs, WCAG_AA_UI);
|
|
15839
|
+
// CC4b: a Segmented option's mark IS its on fill (no border) — the fill against the ground it sits on.
|
|
15840
|
+
else if (on?.['backgroundColor'])
|
|
15841
|
+
for (const f of fill)
|
|
15842
|
+
check(e.id, 'on mark', f, bgs, WCAG_AA_UI);
|
|
15047
15843
|
// What a filled element HOLDS (inkScopes): a button's or a badge's icon reads its ink.
|
|
15048
15844
|
if (state === 'base' && INK_SCOPES.some(sc => sc.styles.includes(e.id))) {
|
|
15049
15845
|
check(e.id, 'icon', parseCssColour(resolveIn(inkScoped(values, e.id), iconColour), ink), under, WCAG_AA_UI);
|
|
15050
|
-
const focus = e.focus?.['boxShadow'];
|
|
15051
|
-
if (focus)
|
|
15052
|
-
check(e.id, 'focus ring', ringColour(resolveIn(values, focus), ink), bgs, WCAG_AA_UI);
|
|
15053
15846
|
}
|
|
15847
|
+
// Every focus ring an element style draws, on every ground the element sits on (CC4b: a Segmented
|
|
15848
|
+
// option on its track — not only the buttons).
|
|
15849
|
+
const focus = state === 'base' ? e.focus?.['boxShadow'] : undefined;
|
|
15850
|
+
if (focus)
|
|
15851
|
+
check(e.id, 'focus ring', ringColour(resolveIn(values, focus), ink), bgs, WCAG_AA_UI);
|
|
15054
15852
|
}
|
|
15055
15853
|
}
|
|
15056
15854
|
for (const part of FORM_PARTS) {
|