@telus-uds/theme-koodo 3.18.0 → 3.19.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/theme.json CHANGED
@@ -288,6 +288,30 @@
288
288
  "gradient": "{system.gradient.none}"
289
289
  }
290
290
  },
291
+ "Breadcrumbs": {
292
+ "appearances": {
293
+ "inverse": {
294
+ "type": "variant",
295
+ "values": [true]
296
+ }
297
+ },
298
+ "rules": [
299
+ {
300
+ "if": {
301
+ "inverse": true
302
+ },
303
+ "tokens": {
304
+ "iconColor": "{system.color.none}"
305
+ }
306
+ }
307
+ ],
308
+ "tokens": {
309
+ "icon": "{palette.icon.ChevronRight}",
310
+ "iconColor": "{system.color.none}",
311
+ "iconPadding": "{palette.size.size8}",
312
+ "listItemPadding": "{palette.size.size0}"
313
+ }
314
+ },
291
315
  "Button": {
292
316
  "appearances": {
293
317
  "danger": {
@@ -1129,6 +1153,35 @@
1129
1153
  "width": "{system.size.none}"
1130
1154
  }
1131
1155
  },
1156
+ "Callout": {
1157
+ "appearances": {
1158
+ "size": {
1159
+ "type": "variant",
1160
+ "values": ["small"]
1161
+ }
1162
+ },
1163
+ "rules": [
1164
+ {
1165
+ "if": {
1166
+ "size": "small"
1167
+ },
1168
+ "tokens": {
1169
+ "paddingBottom": "{palette.size.size4}",
1170
+ "paddingTop": "{palette.size.size4}"
1171
+ }
1172
+ }
1173
+ ],
1174
+ "tokens": {
1175
+ "background": "{palette.color.gallery}",
1176
+ "borderRadius": "{palette.size.size4}",
1177
+ "color": "{palette.color.black}",
1178
+ "gap": "{palette.size.size16}",
1179
+ "paddingBottom": "{palette.size.size8}",
1180
+ "paddingLeft": "{palette.size.size16}",
1181
+ "paddingRight": "{palette.size.size16}",
1182
+ "paddingTop": "{palette.size.size8}"
1183
+ }
1184
+ },
1132
1185
  "Card": {
1133
1186
  "appearances": {
1134
1187
  "background": {
@@ -1581,6 +1634,65 @@
1581
1634
  "textLine": "{system.textLine.none}"
1582
1635
  }
1583
1636
  },
1637
+ "DatePicker": {
1638
+ "appearances": {},
1639
+ "rules": [],
1640
+ "tokens": {
1641
+ "calendarDayBlockedCalendarHoverBackground": "{system.color.none}",
1642
+ "calendarDayBlockedCalendarHoverColor": "{system.color.none}",
1643
+ "calendarDayDefaultBeforeHeight": "{palette.size.size14}",
1644
+ "calendarDayDefaultBeforeWidth": "{palette.size.size14}",
1645
+ "calendarDayDefaultBorder": "{palette.border.border1}",
1646
+ "calendarDayDefaultBorderColor": "{system.color.none}",
1647
+ "calendarDayDefaultCalendarDaySelectedHoverBackground": "{system.color.none}",
1648
+ "calendarDayDefaultCalendarDaySelectedHoverColor": "{system.color.none}",
1649
+ "calendarDayDefaultColor": "{system.color.none}",
1650
+ "calendarDayDefaultFontName": "{palette.fontName.StagSans}",
1651
+ "calendarDayDefaultFontSize": "{palette.fontSize.size12}",
1652
+ "calendarDayDefaultFontWeight": "{palette.fontWeight.weight300}",
1653
+ "calendarDaySelectedHoverBeforeBackground": "{system.color.none}",
1654
+ "calendarDaySelectedHoverBorderColor": "{system.color.none}",
1655
+ "calendarDaySelectedHoverColor": "{system.color.none}",
1656
+ "calendarMonthCaptionColor": "{system.color.none}",
1657
+ "calendarMonthCaptionFontName": "{palette.fontName.StagSans}",
1658
+ "calendarMonthCaptionFontSize": "{palette.fontSize.size20}",
1659
+ "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight400}",
1660
+ "calendarMonthCaptionLineHeight": "{palette.lineHeight.ratio7to5}",
1661
+ "calendarMonthCaptionPaddingBottom": "{palette.size.size48}",
1662
+ "dateInputBorderColor": "{palette.color.transparent}",
1663
+ "dateInputBorderRadius": "{palette.radius.radius4}",
1664
+ "dateInputFocusBorderColor": "{system.color.none}",
1665
+ "dateInputHoverBorderColor": "{system.color.none}",
1666
+ "dateInputInsideBorderColor": "{system.color.none}",
1667
+ "dateInputInsideColor": "{system.color.none}",
1668
+ "dateInputStrokeColor": "{system.color.none}",
1669
+ "dayPickerNavigationButtonBackgroundColor": "{system.color.none}",
1670
+ "dayPickerNavigationButtonBorderColor": "{system.color.none}",
1671
+ "dayPickerNavigationButtonChildLeft": "{palette.size.size8}",
1672
+ "dayPickerNavigationButtonChildRight": "{palette.size.size8}",
1673
+ "dayPickerNavigationButtonChildSvgFill": "{system.color.none}",
1674
+ "dayPickerNavigationButtonDefaultHoverBorderColor": "{system.color.none}",
1675
+ "dayPickerNavigationButtonMaxHeight": "{palette.size.size32}",
1676
+ "dayPickerNavigationButtonMaxWidth": "{palette.size.size32}",
1677
+ "dayPickerNavigationButtonPadding": "{palette.size.size8}",
1678
+ "dayPickerNavigationSVGHorizontalFill": "{system.color.none}",
1679
+ "dayPickerWeekHeaderColor": "{system.color.none}",
1680
+ "dayPickerWeekHeaderFontName": "{palette.fontName.StagSans}",
1681
+ "dayPickerWeekHeaderFontWeight": "{palette.fontWeight.weight500}",
1682
+ "dayPickerWeekHeaderLineHeight": "{palette.lineHeight.ratio10to7}",
1683
+ "dayPickerWeekHeaderSmall": "{palette.fontSize.size14}",
1684
+ "hiddenInputFieldContainerHeight": "{palette.size.size0}",
1685
+ "hiddenInputFieldContainerWidth": "{palette.size.size0}",
1686
+ "invalidInputMixin": "{system.color.none}",
1687
+ "nextIcon": "{palette.icon.ArrowRight}",
1688
+ "previousIcon": "{palette.icon.ArrowLeft}",
1689
+ "singleDatePickerBorderColor": "{system.color.none}",
1690
+ "singleDatePickerLeftRight": "{palette.size.size16}",
1691
+ "singleDatePickerPaddingTopBottom": "{palette.size.size8}",
1692
+ "singleDatePickerRadius": "{palette.radius.radius4}",
1693
+ "validInputMixin": "{system.color.none}"
1694
+ }
1695
+ },
1584
1696
  "Divider": {
1585
1697
  "appearances": {
1586
1698
  "decorative": {
@@ -1689,6 +1801,32 @@
1689
1801
  "verticalAlign": "{system.verticalAlign.middle}"
1690
1802
  }
1691
1803
  },
1804
+ "ExpandCollapseMini": {
1805
+ "appearances": {},
1806
+ "rules": [],
1807
+ "tokens": {
1808
+ "borderWidth": "{palette.border.none}"
1809
+ }
1810
+ },
1811
+ "ExpandCollapseMiniControl": {
1812
+ "appearances": {
1813
+ "expanded": "{appearances.ExpandCollapseControl.expanded}"
1814
+ },
1815
+ "rules": [
1816
+ {
1817
+ "if": {
1818
+ "expanded": true
1819
+ },
1820
+ "tokens": {
1821
+ "icon": "{palette.icon.ChevronUp}"
1822
+ }
1823
+ }
1824
+ ],
1825
+ "tokens": {
1826
+ "icon": "{palette.icon.ChevronDown}",
1827
+ "size": "{palette.size.size4}"
1828
+ }
1829
+ },
1692
1830
  "ExpandCollapsePanel": {
1693
1831
  "appearances": {},
1694
1832
  "rules": [],
@@ -1761,6 +1899,46 @@
1761
1899
  "titleFontSize": "{palette.fontSize.size16}"
1762
1900
  }
1763
1901
  },
1902
+ "Footnote": {
1903
+ "appearances": {},
1904
+ "rules": [],
1905
+ "tokens": {
1906
+ "closeButtonBorderColor": "{palette.color.black}",
1907
+ "closeButtonBorderSize": "{palette.border.border1}",
1908
+ "closeButtonHeight": "{palette.size.size24}",
1909
+ "closeButtonIconSize": "{palette.size.size16}",
1910
+ "closeButtonMarginBottom": "{palette.size.size4}",
1911
+ "closeButtonMarginLeft": "{palette.size.size4}",
1912
+ "closeButtonMarginRight": "{palette.size.size12}",
1913
+ "closeButtonMarginTop": "{palette.size.size12}",
1914
+ "closeButtonWidth": "{palette.size.size24}",
1915
+ "footnoteBackground": "{palette.color.greyLight}",
1916
+ "footnoteBodyBackground": "{palette.color.greyLight}",
1917
+ "footnoteBodyPaddingBottom": "{palette.size.size32}",
1918
+ "footnoteBodyPaddingLeft": "{palette.size.size16}",
1919
+ "footnoteBodyPaddingRight": "{palette.size.size16}",
1920
+ "footnoteBodyPaddingTop": "{palette.size.size0}",
1921
+ "footnoteBorderColorMd": "{palette.color.silver}",
1922
+ "footnoteBorderTopSizeMd": "{palette.border.border1}",
1923
+ "headerMargin": "{palette.size.size16}",
1924
+ "listItemColor": "{palette.color.black}",
1925
+ "listItemFontSize": "{palette.size.size14}",
1926
+ "listItemLineHeight": "{palette.lineHeight.ratio10to7}",
1927
+ "listItemMarkerFontSize": "{palette.size.size16}",
1928
+ "listItemMarkerLineHeight": "{palette.lineHeight.ratio10to7}",
1929
+ "listItemPaddingLeft": "{palette.size.size8}",
1930
+ "listPaddingLeft": "{palette.size.size32}"
1931
+ }
1932
+ },
1933
+ "FootnoteLink": {
1934
+ "appearances": {},
1935
+ "rules": [],
1936
+ "tokens": {
1937
+ "lineHeight": "{palette.lineHeight.ratio1to1}",
1938
+ "paddingLeft": "{palette.size.size2}",
1939
+ "paddingRight": "{palette.size.size2}"
1940
+ }
1941
+ },
1764
1942
  "HorizontalScrollButton": {
1765
1943
  "appearances": {
1766
1944
  "focus": "{appearances.HorizontalScrollButton.focus}",
@@ -1943,23 +2121,37 @@
1943
2121
  "type": "variant",
1944
2122
  "values": [true]
1945
2123
  },
1946
- "focus": "{appearances.Button.focus}",
1947
- "hover": "{appearances.Button.hover}",
2124
+ "focus": "{appearances.IconButton.focus}",
2125
+ "hover": "{appearances.IconButton.hover}",
1948
2126
  "inactive": "{appearances.Button.inactive}",
2127
+ "inverse": {
2128
+ "description": "For use on dark backgrounds",
2129
+ "type": "variant",
2130
+ "values": [true]
2131
+ },
1949
2132
  "password": {
1950
2133
  "description": "Password masked or not",
1951
2134
  "type": "variant",
1952
2135
  "values": [true]
1953
2136
  },
1954
- "pressed": "{appearances.Button.pressed}"
2137
+ "pressed": "{appearances.IconButton.pressed}",
2138
+ "raised": {
2139
+ "description": "Uses shadow and background colour to appear raised above the page",
2140
+ "type": "variant",
2141
+ "values": [true]
2142
+ },
2143
+ "size": {
2144
+ "type": "variant",
2145
+ "values": ["small", "large"]
2146
+ }
1955
2147
  },
1956
2148
  "rules": [
1957
2149
  {
1958
2150
  "if": {
1959
- "compact": true
2151
+ "inverse": true
1960
2152
  },
1961
2153
  "tokens": {
1962
- "outerBorderGap": "{system.size.zero}"
2154
+ "iconColor": "{palette.color.white}"
1963
2155
  }
1964
2156
  },
1965
2157
  {
@@ -1968,6 +2160,18 @@
1968
2160
  },
1969
2161
  "tokens": {
1970
2162
  "backgroundColor": "{palette.color.mosque}",
2163
+ "iconColor": "{palette.color.white}",
2164
+ "iconScale": "{system.iconScale.scale1_10}"
2165
+ }
2166
+ },
2167
+ {
2168
+ "if": {
2169
+ "hover": true,
2170
+ "password": true
2171
+ },
2172
+ "tokens": {
2173
+ "backgroundColor": "{palette.color.mosque}",
2174
+ "borderColor": "{palette.color.mosque}",
1971
2175
  "iconColor": "{palette.color.white}"
1972
2176
  }
1973
2177
  },
@@ -1976,7 +2180,71 @@
1976
2180
  "password": true
1977
2181
  },
1978
2182
  "tokens": {
1979
- "borderColor": "{palette.color.transparent}"
2183
+ "borderColor": "{system.color.transparent}"
2184
+ }
2185
+ },
2186
+ {
2187
+ "if": {
2188
+ "focus": true,
2189
+ "password": true
2190
+ },
2191
+ "tokens": {
2192
+ "borderColor": "{palette.color.mosque}"
2193
+ }
2194
+ },
2195
+ {
2196
+ "if": {
2197
+ "hover": true,
2198
+ "inverse": true
2199
+ },
2200
+ "tokens": {
2201
+ "backgroundColor": "{palette.color.icicleDark}",
2202
+ "iconColor": "{palette.color.black}"
2203
+ }
2204
+ },
2205
+ {
2206
+ "if": {
2207
+ "focus": true
2208
+ },
2209
+ "tokens": {
2210
+ "backgroundColor": "{system.color.transparent}",
2211
+ "iconColor": "{palette.color.black}",
2212
+ "outerBorderColor": "{palette.color.mosque}",
2213
+ "outerBorderWidth": "{palette.border.border1}"
2214
+ }
2215
+ },
2216
+ {
2217
+ "if": {
2218
+ "focus": true,
2219
+ "password": true
2220
+ },
2221
+ "tokens": {
2222
+ "outerBorderColor": "{palette.color.mosque}",
2223
+ "outerBorderGap": "{palette.size.size4}",
2224
+ "outerBorderWidth": "{palette.border.border2}"
2225
+ }
2226
+ },
2227
+ {
2228
+ "if": {
2229
+ "focus": true,
2230
+ "inverse": true
2231
+ },
2232
+ "tokens": {
2233
+ "backgroundColor": "{system.color.transparent}",
2234
+ "borderColor": "{palette.color.icicle}",
2235
+ "iconColor": "{palette.color.icicle}",
2236
+ "outerBorderColor": "{palette.color.icicle}",
2237
+ "outerBorderWidth": "{palette.border.border1}"
2238
+ }
2239
+ },
2240
+ {
2241
+ "if": {
2242
+ "pressed": true
2243
+ },
2244
+ "tokens": {
2245
+ "backgroundColor": "{palette.color.darkMosque}",
2246
+ "iconColor": "{palette.color.white}",
2247
+ "outerBorderWidth": "{system.border.zero}"
1980
2248
  }
1981
2249
  },
1982
2250
  {
@@ -1985,38 +2253,107 @@
1985
2253
  "pressed": true
1986
2254
  },
1987
2255
  "tokens": {
1988
- "backgroundColor": "{palette.color.mosqueDark}",
1989
- "borderColor": "{palette.color.mosqueDark}",
1990
- "iconColor": "{palette.color.white}"
2256
+ "backgroundColor": "{palette.color.darkMosque}",
2257
+ "borderColor": "{palette.color.darkMosque}",
2258
+ "iconColor": "{palette.color.white}",
2259
+ "outerBorderGap": "{palette.size.size4}"
1991
2260
  }
1992
2261
  },
1993
2262
  {
1994
2263
  "if": {
2264
+ "inverse": true,
1995
2265
  "pressed": true
1996
2266
  },
1997
2267
  "tokens": {
1998
- "backgroundColor": "{palette.color.mosqueDark}",
1999
- "borderColor": "{palette.color.mosqueDark}",
2268
+ "backgroundColor": "{palette.color.silver}",
2269
+ "borderColor": "{palette.color.silver}",
2270
+ "iconColor": "{palette.color.black}",
2271
+ "outerBorderWidth": "{system.border.zero}"
2272
+ }
2273
+ },
2274
+ {
2275
+ "if": {
2276
+ "size": "large"
2277
+ },
2278
+ "tokens": {
2279
+ "iconSize": "{palette.size.size24}",
2280
+ "padding": "{palette.size.size12}"
2281
+ }
2282
+ },
2283
+ {
2284
+ "if": {
2285
+ "size": "small"
2286
+ },
2287
+ "tokens": {
2288
+ "iconSize": "{palette.size.size16}",
2289
+ "padding": "{palette.size.size4}"
2290
+ }
2291
+ },
2292
+ {
2293
+ "description": "Raised IconButtons follow different design patterns to other variants",
2294
+ "if": {
2295
+ "raised": true
2296
+ },
2297
+ "tokens": {
2298
+ "backgroundColor": "{palette.color.white}",
2299
+ "borderColor": "{palette.color.mosque}",
2300
+ "borderWidth": "{palette.border.border1}",
2301
+ "iconSize": "{palette.size.size16}",
2302
+ "outerBorderColor": "{system.color.transparent}",
2303
+ "outerBorderGap": "{system.size.zero}",
2304
+ "outerBorderWidth": "{system.border.zero}",
2305
+ "padding": "{palette.size.size8}",
2306
+ "shadow": "{palette.shadow.surfaceRaised}"
2307
+ }
2308
+ },
2309
+ {
2310
+ "if": {
2311
+ "hover": true,
2312
+ "raised": true
2313
+ },
2314
+ "tokens": {
2315
+ "backgroundColor": "{palette.color.mosque}",
2000
2316
  "iconColor": "{palette.color.white}"
2001
2317
  }
2002
2318
  },
2319
+ {
2320
+ "if": {
2321
+ "raised": true,
2322
+ "size": "large"
2323
+ },
2324
+ "tokens": {
2325
+ "iconSize": "{palette.size.size24}",
2326
+ "padding": "{palette.size.size12}"
2327
+ }
2328
+ },
2329
+ {
2330
+ "if": {
2331
+ "raised": true,
2332
+ "size": "small"
2333
+ },
2334
+ "tokens": {
2335
+ "padding": "{palette.size.size8}"
2336
+ }
2337
+ },
2003
2338
  {
2004
2339
  "if": {
2005
2340
  "focus": true,
2006
- "password": true
2341
+ "raised": true
2007
2342
  },
2008
2343
  "tokens": {
2344
+ "backgroundColor": "{palette.color.white}",
2009
2345
  "borderColor": "{palette.color.mosque}",
2010
2346
  "borderWidth": "{palette.border.border3}",
2011
- "iconColor": "{palette.color.mosque}"
2347
+ "iconColor": "{palette.color.black}"
2012
2348
  }
2013
2349
  },
2014
2350
  {
2015
2351
  "if": {
2016
- "inactive": true
2352
+ "pressed": true,
2353
+ "raised": true
2017
2354
  },
2018
2355
  "tokens": {
2019
- "backgroundColor": "{palette.color.transparent}",
2356
+ "backgroundColor": "{palette.color.darkMosque}",
2020
2357
  "borderWidth": "{system.border.zero}",
2021
2358
  "iconColor": "{palette.color.white}"
2022
2359
  }
@@ -2027,18 +2364,41 @@
2027
2364
  "password": true
2028
2365
  },
2029
2366
  "tokens": {
2030
- "iconColor": "{palette.color.silver}"
2367
+ "backgroundColor": "{palette.color.transparent}",
2368
+ "borderWidth": "{system.border.zero}",
2369
+ "iconColor": "{palette.color.darkMosque}",
2370
+ "outerBorderColor": "{palette.color.transparent}"
2371
+ }
2372
+ },
2373
+ {
2374
+ "if": {
2375
+ "focus": true,
2376
+ "pressed": true,
2377
+ "raised": true
2378
+ },
2379
+ "tokens": {
2380
+ "backgroundColor": "{palette.color.darkMosque}",
2381
+ "borderWidth": "{system.border.zero}",
2382
+ "iconColor": "{palette.color.white}"
2383
+ }
2384
+ },
2385
+ {
2386
+ "if": {
2387
+ "compact": true
2388
+ },
2389
+ "tokens": {
2390
+ "outerBorderGap": "{system.size.zero}"
2031
2391
  }
2032
2392
  }
2033
2393
  ],
2034
2394
  "tokens": {
2035
2395
  "backgroundColor": "{system.color.transparent}",
2036
- "borderColor": "{palette.color.mosque}",
2396
+ "borderColor": "{system.color.transparent}",
2037
2397
  "borderRadius": "{system.radius.round}",
2038
- "borderWidth": "{palette.border.border3}",
2039
- "iconColor": "{palette.color.mosque}",
2398
+ "borderWidth": "{palette.border.border1}",
2399
+ "iconColor": "{palette.color.black}",
2040
2400
  "iconScale": "{system.iconScale.scale1}",
2041
- "iconSize": "{palette.size.size24}",
2401
+ "iconSize": "{palette.size.size16}",
2042
2402
  "iconTranslateX": "{system.size.zero}",
2043
2403
  "iconTranslateY": "{system.size.zero}",
2044
2404
  "outerBorderColor": "{system.color.transparent}",
@@ -2790,6 +3150,45 @@
2790
3150
  "width": "{system.size.none}"
2791
3151
  }
2792
3152
  },
3153
+ "PreviewCard": {
3154
+ "appearances": {
3155
+ "focus": "{appearances.Button.focus}",
3156
+ "hover": "{appearances.PreviewCard.hover}",
3157
+ "pressed": "{appearances.PreviewCard.focus}"
3158
+ },
3159
+ "rules": [],
3160
+ "tokens": {
3161
+ "backgroundColor": "{palette.color.white}",
3162
+ "borderColor": "{palette.color.white}",
3163
+ "borderRadius": "{palette.radius.none}",
3164
+ "borderWidth": "{palette.border.border1}",
3165
+ "flex": "{system.integer.1}",
3166
+ "outerBorderColor": "{palette.color.white}",
3167
+ "outerBorderGap": "{palette.size.size0}",
3168
+ "outerBorderWidth": "{palette.size.size0}",
3169
+ "paddingBottom": "{palette.size.size0}",
3170
+ "paddingLeft": "{palette.size.size0}",
3171
+ "paddingRight": "{palette.size.size0}",
3172
+ "paddingTop": "{palette.size.size0}",
3173
+ "separatorColor": "{palette.color.black}"
3174
+ }
3175
+ },
3176
+ "PriceLockup": {
3177
+ "appearances": {},
3178
+ "rules": [],
3179
+ "tokens": {
3180
+ "bottomLinksMarginLeft": "{palette.size.size4}",
3181
+ "bottomTextMarginTop": "{palette.size.size4}",
3182
+ "dividerColor": "{palette.color.dove}",
3183
+ "fontColor": "{palette.color.black}",
3184
+ "footnoteGap": "{palette.size.size4}",
3185
+ "footnoteMarginTop": "{palette.size.size4}",
3186
+ "priceMarginBottom": "{palette.size.size8}",
3187
+ "strikeThroughBackground": "{palette.color.gallery}",
3188
+ "strikeThroughHeight": "{palette.size.size2}",
3189
+ "topTextMarginBottom": "{palette.size.size4}"
3190
+ }
3191
+ },
2793
3192
  "Progress": {
2794
3193
  "appearances": {
2795
3194
  "size": {
@@ -3112,20 +3511,6 @@
3112
3511
  "outerBorderWidth": "{palette.border.border1}"
3113
3512
  }
3114
3513
  },
3115
- {
3116
- "if": {
3117
- "checked": true,
3118
- "focus": true
3119
- },
3120
- "tokens": {
3121
- "inputBackgroundColor": "{palette.color.mosque}",
3122
- "inputBorderColor": "{palette.color.white}",
3123
- "inputOutlineColor": "{palette.color.mosque}",
3124
- "outerBorderColor": "{palette.color.chathamsBlue}",
3125
- "outerBorderGap": "{palette.size.size5}",
3126
- "outerBorderWidth": "{palette.border.border1}"
3127
- }
3128
- },
3129
3514
  {
3130
3515
  "if": {
3131
3516
  "hover": true
@@ -3136,29 +3521,6 @@
3136
3521
  "outerBorderWidth": "{palette.border.border1}"
3137
3522
  }
3138
3523
  },
3139
- {
3140
- "if": {
3141
- "checked": true,
3142
- "hover": true
3143
- },
3144
- "tokens": {
3145
- "inputBackgroundColor": "{palette.color.mosque}",
3146
- "inputBorderColor": "{palette.color.white}",
3147
- "inputOutlineColor": "{palette.color.mosque}",
3148
- "outerBorderColor": "{palette.color.chathamsBlue}",
3149
- "outerBorderGap": "{palette.size.size5}",
3150
- "outerBorderWidth": "{palette.border.border1}"
3151
- }
3152
- },
3153
- {
3154
- "if": {
3155
- "checked": true
3156
- },
3157
- "tokens": {
3158
- "inputBackgroundColor": "{palette.color.mosque}",
3159
- "inputOutlineColor": "{palette.color.mosque}"
3160
- }
3161
- },
3162
3524
  {
3163
3525
  "if": {
3164
3526
  "inactive": true
@@ -3177,12 +3539,15 @@
3177
3539
  },
3178
3540
  "tokens": {
3179
3541
  "checkedBackgroundColor": "{palette.color.silver}",
3180
- "inputBackgroundColor": "{palette.color.silver}",
3542
+ "inputBackgroundColor": "{palette.color.white}",
3181
3543
  "inputBorderColor": "{palette.color.white}",
3182
3544
  "inputBorderWidth": "{palette.border.border3}",
3183
- "inputOutlineColor": "{palette.color.silver}",
3545
+ "inputOutlineColor": "{palette.color.white}",
3184
3546
  "inputOutlineWidth": "{palette.border.border1}",
3185
- "labelColor": "{palette.color.dove}"
3547
+ "labelColor": "{palette.color.dove}",
3548
+ "outerBorderColor": "{palette.color.silver}",
3549
+ "outerBorderGap": "{palette.size.size1}",
3550
+ "outerBorderWidth": "{palette.border.border1}"
3186
3551
  }
3187
3552
  }
3188
3553
  ],
@@ -3542,8 +3907,7 @@
3542
3907
  "rules": [
3543
3908
  {
3544
3909
  "if": {
3545
- "hover": true,
3546
- "inactive": null
3910
+ "hover": true
3547
3911
  },
3548
3912
  "tokens": {
3549
3913
  "outerBackgroundColor": "{palette.color.gallery}",
@@ -3552,32 +3916,31 @@
3552
3916
  },
3553
3917
  {
3554
3918
  "if": {
3555
- "validation": "success"
3919
+ "focus": true
3556
3920
  },
3557
3921
  "tokens": {
3558
- "borderColor": "{palette.color.bilbao}",
3559
- "validationIcon": "{palette.icon.CheckCircledFilled}",
3560
- "validationIconColor": "{palette.color.bilbao}"
3922
+ "borderColor": "{palette.color.mosque}",
3923
+ "borderWidth": "{palette.border.border3}"
3561
3924
  }
3562
3925
  },
3563
3926
  {
3564
3927
  "if": {
3565
- "validation": "error"
3928
+ "validation": "success"
3566
3929
  },
3567
3930
  "tokens": {
3568
- "borderColor": "{palette.color.trinidad}",
3569
- "validationIcon": "{palette.icon.Times}",
3570
- "validationIconColor": "{palette.color.trinidad}"
3931
+ "borderColor": "{palette.color.mosque}",
3932
+ "validationIcon": "{palette.icon.CheckCircledFilled}",
3933
+ "validationIconColor": "{palette.color.mosque}"
3571
3934
  }
3572
3935
  },
3573
3936
  {
3574
3937
  "if": {
3575
- "focus": true
3938
+ "validation": "error"
3576
3939
  },
3577
3940
  "tokens": {
3578
- "borderColor": "{palette.color.mosque}",
3579
- "borderWidth": "{palette.border.border2}",
3580
- "icon": "{system.icon.none}"
3941
+ "borderColor": "{palette.color.amaranth}",
3942
+ "validationIcon": "{palette.icon.ExclamationOctagon}",
3943
+ "validationIconColor": "{palette.color.amaranth}"
3581
3944
  }
3582
3945
  },
3583
3946
  {
@@ -3586,7 +3949,8 @@
3586
3949
  },
3587
3950
  "tokens": {
3588
3951
  "backgroundColor": "{palette.color.gallery}",
3589
- "borderColor": "{palette.color.gallery}"
3952
+ "borderColor": "{palette.color.gallery}",
3953
+ "icon": "{system.icon.none}"
3590
3954
  }
3591
3955
  }
3592
3956
  ],
@@ -3595,7 +3959,7 @@
3595
3959
  "borderColor": "{palette.color.black}",
3596
3960
  "borderRadius": "{palette.radius.radius4}",
3597
3961
  "borderWidth": "{palette.border.border1}",
3598
- "color": "{palette.color.black}",
3962
+ "color": "{palette.color.dove}",
3599
3963
  "fontName": "{palette.fontName.StagSans}",
3600
3964
  "fontSize": "{palette.fontSize.size16}",
3601
3965
  "fontWeight": "{palette.fontWeight.weight400}",
@@ -3606,10 +3970,10 @@
3606
3970
  "outerBackgroundColor": "{palette.color.transparent}",
3607
3971
  "outerBorderColor": "{palette.color.transparent}",
3608
3972
  "outerBorderWidth": "{palette.border.border2}",
3609
- "paddingBottom": "{palette.size.size10}",
3973
+ "paddingBottom": "{palette.size.size12}",
3610
3974
  "paddingLeft": "{palette.size.size16}",
3611
3975
  "paddingRight": "{palette.size.size16}",
3612
- "paddingTop": "{palette.size.size10}",
3976
+ "paddingTop": "{palette.size.size12}",
3613
3977
  "validationIcon": "{system.icon.none}",
3614
3978
  "validationIconColor": "{palette.color.transparent}",
3615
3979
  "validationIconSize": "{palette.size.size24}"
@@ -4121,9 +4485,9 @@
4121
4485
  "validation": "success"
4122
4486
  },
4123
4487
  "tokens": {
4124
- "borderColor": "{palette.color.bilbao}",
4488
+ "borderColor": "{palette.color.mosque}",
4125
4489
  "icon": "{palette.icon.CheckCircledFilled}",
4126
- "iconColor": "{palette.color.bilbao}"
4490
+ "iconColor": "{palette.color.mosque}"
4127
4491
  }
4128
4492
  },
4129
4493
  {
@@ -4131,9 +4495,9 @@
4131
4495
  "validation": "error"
4132
4496
  },
4133
4497
  "tokens": {
4134
- "borderColor": "{palette.color.trinidad}",
4135
- "icon": "{palette.icon.Times}",
4136
- "iconColor": "{palette.color.trinidad}"
4498
+ "borderColor": "{palette.color.amaranth}",
4499
+ "icon": "{palette.icon.ExclamationOctagon}",
4500
+ "iconColor": "{palette.color.amaranth}"
4137
4501
  }
4138
4502
  },
4139
4503
  {
@@ -4143,7 +4507,7 @@
4143
4507
  },
4144
4508
  "tokens": {
4145
4509
  "borderColor": "{palette.color.mosque}",
4146
- "borderWidth": "{palette.border.border2}",
4510
+ "borderWidth": "{palette.border.border3}",
4147
4511
  "icon": "{system.icon.none}"
4148
4512
  }
4149
4513
  },