@planningcenter/tapestry 4.2.0-rc.5 → 4.2.0-rc.6

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.
@@ -1155,29 +1155,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1155
1155
  border-end-end-radius:var(--tds-btn-border-radius);
1156
1156
  }
1157
1157
 
1158
-
1159
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1160
- -webkit-appearance:none;
1161
- appearance:none;
1162
- }
1163
-
1164
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1165
- inline-size:1em;
1166
- block-size:2em;
1167
- }
1168
- @supports (field-sizing: content){
1169
- .tds-input--auto-width{
1170
- inline-size:-moz-fit-content;
1171
- inline-size:fit-content;
1172
- min-inline-size:min(100%, 122px);
1173
- }
1174
-
1175
- .tds-input--auto-width input{
1176
- field-sizing:content;
1177
- inline-size:auto;
1178
- }
1179
- }
1180
-
1181
1158
  .tds-modal-overlay{
1182
1159
  --tds-modal-min-margin-block:var(--t-spacing-3);
1183
1160
 
@@ -1341,6 +1318,89 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1341
1318
  }
1342
1319
  }
1343
1320
 
1321
+ .tds-radio-group{
1322
+ --tds-radio-group-font-size:var(--t-font-size-md);
1323
+ --tds-radio-group-line-height:1.4;
1324
+ --tds-radio-group-gap:var(--t-spacing-1);
1325
+
1326
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1327
+ --tds-radio-group-description-line-height:1.35;
1328
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1329
+ --tds-radio-group-description-invalid-icon-display:none;
1330
+ display:flex;
1331
+ flex-direction:column;
1332
+ gap:0;
1333
+ padding:0;
1334
+ margin:0;
1335
+
1336
+ font-size:var(--tds-radio-group-font-size);
1337
+ line-height:var(--tds-radio-group-line-height);
1338
+ border:0;
1339
+ }
1340
+
1341
+ .tds-radio-group legend{
1342
+ float:left;
1343
+ padding:0;
1344
+ margin:0;
1345
+ }
1346
+
1347
+ .tds-radio-group[aria-invalid="true"]{
1348
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1349
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1350
+ }
1351
+
1352
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1353
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1354
+ }
1355
+
1356
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1357
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1358
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1359
+ }
1360
+
1361
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1362
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
1363
+ }
1364
+
1365
+ .tds-radio-group:has(input:required) legend::after{
1366
+ margin-left:.25ch;
1367
+ color:var(--t-text-color-status-error);
1368
+ content:"*";
1369
+ }
1370
+
1371
+ .tds-radio-group-fields{
1372
+ display:flex;
1373
+ flex-direction:column;
1374
+ gap:var(--tds-radio-group-gap);
1375
+ align-items:flex-start;
1376
+ margin-top:var(--t-spacing-1);
1377
+ }
1378
+
1379
+ .tds-radio-group-description{
1380
+ display:flex;
1381
+ gap:var(--t-spacing-half);
1382
+ align-items:flex-start;
1383
+ margin:var(--t-spacing-fourth) 0 0;
1384
+ font-size:var(--tds-radio-group-description-font-size);
1385
+ line-height:var(--tds-radio-group-description-line-height);
1386
+ color:var(--tds-radio-group-description-color);
1387
+ cursor:text;
1388
+ }
1389
+
1390
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1391
+ display:var(--tds-radio-group-description-invalid-icon-display);
1392
+ flex-shrink:0;
1393
+ margin-top:calc(.5lh - .5em);
1394
+ line-height:var(--tds-radio-group-description-line-height);
1395
+ }
1396
+
1397
+ .tds-radio-group--sm{
1398
+ --tds-radio-group-line-height:1.35;
1399
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1400
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1401
+ --tds-radio-group-description-line-height:1.3;
1402
+ }
1403
+
1344
1404
  .tds-checkbox{
1345
1405
  --tds-checkbox-font-size:var(--t-font-size-md);
1346
1406
  --tds-checkbox-cursor:pointer;
@@ -1536,6 +1596,29 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1536
1596
  --tds-checkbox-description-line-height:1.3;
1537
1597
  }
1538
1598
 
1599
+
1600
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1601
+ -webkit-appearance:none;
1602
+ appearance:none;
1603
+ }
1604
+
1605
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1606
+ inline-size:1em;
1607
+ block-size:2em;
1608
+ }
1609
+ @supports (field-sizing: content){
1610
+ .tds-input--auto-width{
1611
+ inline-size:-moz-fit-content;
1612
+ inline-size:fit-content;
1613
+ min-inline-size:min(100%, 122px);
1614
+ }
1615
+
1616
+ .tds-input--auto-width input{
1617
+ field-sizing:content;
1618
+ inline-size:auto;
1619
+ }
1620
+ }
1621
+
1539
1622
  .tds-radio{
1540
1623
  --tds-radio-font-size:var(--t-font-size-md);
1541
1624
  --tds-radio-cursor:pointer;
@@ -1669,89 +1752,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1669
1752
  --tds-radio-description-line-height:1.3;
1670
1753
  }
1671
1754
 
1672
- .tds-radio-group{
1673
- --tds-radio-group-font-size:var(--t-font-size-md);
1674
- --tds-radio-group-line-height:1.4;
1675
- --tds-radio-group-gap:var(--t-spacing-1);
1676
-
1677
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1678
- --tds-radio-group-description-line-height:1.35;
1679
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1680
- --tds-radio-group-description-invalid-icon-display:none;
1681
- display:flex;
1682
- flex-direction:column;
1683
- gap:0;
1684
- padding:0;
1685
- margin:0;
1686
-
1687
- font-size:var(--tds-radio-group-font-size);
1688
- line-height:var(--tds-radio-group-line-height);
1689
- border:0;
1690
- }
1691
-
1692
- .tds-radio-group legend{
1693
- float:left;
1694
- padding:0;
1695
- margin:0;
1696
- }
1697
-
1698
- .tds-radio-group[aria-invalid="true"]{
1699
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1700
- --tds-radio-group-description-invalid-icon-display:inline-block;
1701
- }
1702
-
1703
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1704
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1705
- }
1706
-
1707
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1708
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1709
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1710
- }
1711
-
1712
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1713
- --tds-radio-input-background-color:var(--t-icon-color-inverted);
1714
- }
1715
-
1716
- .tds-radio-group:has(input:required) legend::after{
1717
- margin-left:.25ch;
1718
- color:var(--t-text-color-status-error);
1719
- content:"*";
1720
- }
1721
-
1722
- .tds-radio-group-fields{
1723
- display:flex;
1724
- flex-direction:column;
1725
- gap:var(--tds-radio-group-gap);
1726
- align-items:flex-start;
1727
- margin-top:var(--t-spacing-1);
1728
- }
1729
-
1730
- .tds-radio-group-description{
1731
- display:flex;
1732
- gap:var(--t-spacing-half);
1733
- align-items:flex-start;
1734
- margin:var(--t-spacing-fourth) 0 0;
1735
- font-size:var(--tds-radio-group-description-font-size);
1736
- line-height:var(--tds-radio-group-description-line-height);
1737
- color:var(--tds-radio-group-description-color);
1738
- cursor:text;
1739
- }
1740
-
1741
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1742
- display:var(--tds-radio-group-description-invalid-icon-display);
1743
- flex-shrink:0;
1744
- margin-top:calc(.5lh - .5em);
1745
- line-height:var(--tds-radio-group-description-line-height);
1746
- }
1747
-
1748
- .tds-radio-group--sm{
1749
- --tds-radio-group-line-height:1.35;
1750
- --tds-radio-group-font-size:var(--t-font-size-sm);
1751
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1752
- --tds-radio-group-description-line-height:1.3;
1753
- }
1754
-
1755
1755
  .tds-input:has(textarea){
1756
1756
  --tds-input-padding-block:6px;
1757
1757
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -1857,6 +1857,146 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1857
1857
  }
1858
1858
  }
1859
1859
 
1860
+ .tds-toggle-switch{
1861
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1862
+ --tds-toggle-switch-cursor:pointer;
1863
+ --tds-toggle-switch-display:inline-grid;
1864
+ --tds-toggle-switch-line-height:1.4;
1865
+
1866
+ --tds-toggle-switch-label-color:var(--t-form-color);
1867
+
1868
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1869
+ --tds-toggle-switch-track-outline:none;
1870
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1871
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1872
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1873
+
1874
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1875
+ --tds-toggle-switch-thumb-transform:translateX(0);
1876
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1877
+
1878
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1879
+ --tds-toggle-switch-description-line-height:1.35;
1880
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1881
+ position:relative;
1882
+
1883
+ display:var(--tds-toggle-switch-display);
1884
+ grid-template-columns:auto;
1885
+ grid-auto-columns:1fr;
1886
+ gap:var(--t-spacing-fourth) 0;
1887
+ -webkit-user-select:none;
1888
+ -moz-user-select:none;
1889
+ user-select:none;
1890
+ }
1891
+
1892
+ .tds-toggle-switch input[type="checkbox"]{
1893
+ position:absolute;
1894
+ width:var(--tds-toggle-switch-track-width);
1895
+ height:var(--tds-toggle-switch-track-height);
1896
+ margin:0;
1897
+ -webkit-appearance:none;
1898
+ -moz-appearance:none;
1899
+ appearance:none;
1900
+ cursor:var(--tds-toggle-switch-cursor);
1901
+ outline:var(--tds-toggle-switch-track-outline);
1902
+ outline-offset:var(--t-focus-ring-offset);
1903
+ background-color:transparent;
1904
+ border:0;
1905
+ border-radius:var(--t-border-radius-round);
1906
+ }
1907
+
1908
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1909
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1910
+ }
1911
+
1912
+ .tds-toggle-switch label{
1913
+ display:inline-flex;
1914
+ grid-area:1 / 2;
1915
+ padding-inline-start:var(--t-spacing-1);
1916
+ margin-top:-.09375em;
1917
+ font-size:var(--tds-toggle-switch-font-size);
1918
+ font-weight:var(--t-font-weight-normal);
1919
+ line-height:var(--tds-toggle-switch-line-height);
1920
+ color:var(--tds-toggle-switch-label-color);
1921
+ cursor:var(--tds-toggle-switch-cursor);
1922
+ }
1923
+
1924
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1925
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1926
+ }
1927
+
1928
+ .tds-toggle-switch:has(input:checked){
1929
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1930
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1931
+ }
1932
+
1933
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1934
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1935
+ }
1936
+
1937
+ .tds-toggle-switch:has(input:disabled){
1938
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1939
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1940
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1941
+ --tds-toggle-switch-cursor:not-allowed;
1942
+ }
1943
+
1944
+ .tds-toggle-switch-track{
1945
+ position:relative;
1946
+ flex-shrink:0;
1947
+ width:var(--tds-toggle-switch-track-width);
1948
+ height:var(--tds-toggle-switch-track-height);
1949
+ background-color:var(--tds-toggle-switch-track-background-color);
1950
+ border-radius:var(--t-border-radius-round);
1951
+ transition:var(--tds-toggle-switch-track-transition);
1952
+ }
1953
+
1954
+ .tds-toggle-switch-track::before{
1955
+ position:absolute;
1956
+ top:var(--t-spacing-fourth);
1957
+ left:var(--t-spacing-fourth);
1958
+ width:var(--tds-toggle-switch-thumb-size);
1959
+ height:var(--tds-toggle-switch-thumb-size);
1960
+ content:"";
1961
+ background-color:#fff;
1962
+ border-radius:var(--t-border-radius-round);
1963
+ transform:var(--tds-toggle-switch-thumb-transform);
1964
+ transition:var(--tds-toggle-switch-thumb-transition);
1965
+ }
1966
+
1967
+ @media (prefers-reduced-motion: reduce){
1968
+
1969
+ .tds-toggle-switch-track{
1970
+ --tds-toggle-switch-track-transition:none;
1971
+ --tds-toggle-switch-thumb-transition:none;
1972
+ }
1973
+ }
1974
+
1975
+ .tds-toggle-switch-description{
1976
+ display:flex;
1977
+ grid-area:2 / 2;
1978
+ align-items:flex-start;
1979
+ padding-inline-start:var(--t-spacing-1);
1980
+ margin:0;
1981
+ font-size:var(--tds-toggle-switch-description-font-size);
1982
+ line-height:var(--tds-toggle-switch-description-line-height);
1983
+ color:var(--tds-toggle-switch-description-color);
1984
+ cursor:text;
1985
+ }
1986
+
1987
+ .tds-toggle-switch--sm{
1988
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1989
+ --tds-toggle-switch-line-height:1.35;
1990
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1991
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1992
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1993
+ --tds-toggle-switch-description-line-height:1.3;
1994
+ }
1995
+
1996
+ .tds-toggle-switch--hide-label{
1997
+ --tds-toggle-switch-display:inline-flex;
1998
+ }
1999
+
1860
2000
  @layer t-critical{
1861
2001
  tds-page-header:not(.hydrated){
1862
2002
  display:none;
@@ -2134,146 +2274,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2134
2274
  }
2135
2275
  }
2136
2276
 
2137
- .tds-toggle-switch{
2138
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2139
- --tds-toggle-switch-cursor:pointer;
2140
- --tds-toggle-switch-display:inline-grid;
2141
- --tds-toggle-switch-line-height:1.4;
2142
-
2143
- --tds-toggle-switch-label-color:var(--t-form-color);
2144
-
2145
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2146
- --tds-toggle-switch-track-outline:none;
2147
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2148
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2149
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2150
-
2151
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2152
- --tds-toggle-switch-thumb-transform:translateX(0);
2153
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2154
-
2155
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2156
- --tds-toggle-switch-description-line-height:1.35;
2157
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2158
- position:relative;
2159
-
2160
- display:var(--tds-toggle-switch-display);
2161
- grid-template-columns:auto;
2162
- grid-auto-columns:1fr;
2163
- gap:var(--t-spacing-fourth) 0;
2164
- -webkit-user-select:none;
2165
- -moz-user-select:none;
2166
- user-select:none;
2167
- }
2168
-
2169
- .tds-toggle-switch input[type="checkbox"]{
2170
- position:absolute;
2171
- width:var(--tds-toggle-switch-track-width);
2172
- height:var(--tds-toggle-switch-track-height);
2173
- margin:0;
2174
- -webkit-appearance:none;
2175
- -moz-appearance:none;
2176
- appearance:none;
2177
- cursor:var(--tds-toggle-switch-cursor);
2178
- outline:var(--tds-toggle-switch-track-outline);
2179
- outline-offset:var(--t-focus-ring-offset);
2180
- background-color:transparent;
2181
- border:0;
2182
- border-radius:var(--t-border-radius-round);
2183
- }
2184
-
2185
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2186
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2187
- }
2188
-
2189
- .tds-toggle-switch label{
2190
- display:inline-flex;
2191
- grid-area:1 / 2;
2192
- padding-inline-start:var(--t-spacing-1);
2193
- margin-top:-.09375em;
2194
- font-size:var(--tds-toggle-switch-font-size);
2195
- font-weight:var(--t-font-weight-normal);
2196
- line-height:var(--tds-toggle-switch-line-height);
2197
- color:var(--tds-toggle-switch-label-color);
2198
- cursor:var(--tds-toggle-switch-cursor);
2199
- }
2200
-
2201
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2202
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2203
- }
2204
-
2205
- .tds-toggle-switch:has(input:checked){
2206
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2207
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2208
- }
2209
-
2210
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2211
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2212
- }
2213
-
2214
- .tds-toggle-switch:has(input:disabled){
2215
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2216
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2217
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2218
- --tds-toggle-switch-cursor:not-allowed;
2219
- }
2220
-
2221
- .tds-toggle-switch-track{
2222
- position:relative;
2223
- flex-shrink:0;
2224
- width:var(--tds-toggle-switch-track-width);
2225
- height:var(--tds-toggle-switch-track-height);
2226
- background-color:var(--tds-toggle-switch-track-background-color);
2227
- border-radius:var(--t-border-radius-round);
2228
- transition:var(--tds-toggle-switch-track-transition);
2229
- }
2230
-
2231
- .tds-toggle-switch-track::before{
2232
- position:absolute;
2233
- top:var(--t-spacing-fourth);
2234
- left:var(--t-spacing-fourth);
2235
- width:var(--tds-toggle-switch-thumb-size);
2236
- height:var(--tds-toggle-switch-thumb-size);
2237
- content:"";
2238
- background-color:#fff;
2239
- border-radius:var(--t-border-radius-round);
2240
- transform:var(--tds-toggle-switch-thumb-transform);
2241
- transition:var(--tds-toggle-switch-thumb-transition);
2242
- }
2243
-
2244
- @media (prefers-reduced-motion: reduce){
2245
-
2246
- .tds-toggle-switch-track{
2247
- --tds-toggle-switch-track-transition:none;
2248
- --tds-toggle-switch-thumb-transition:none;
2249
- }
2250
- }
2251
-
2252
- .tds-toggle-switch-description{
2253
- display:flex;
2254
- grid-area:2 / 2;
2255
- align-items:flex-start;
2256
- padding-inline-start:var(--t-spacing-1);
2257
- margin:0;
2258
- font-size:var(--tds-toggle-switch-description-font-size);
2259
- line-height:var(--tds-toggle-switch-description-line-height);
2260
- color:var(--tds-toggle-switch-description-color);
2261
- cursor:text;
2262
- }
2263
-
2264
- .tds-toggle-switch--sm{
2265
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2266
- --tds-toggle-switch-line-height:1.35;
2267
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2268
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2269
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2270
- --tds-toggle-switch-description-line-height:1.3;
2271
- }
2272
-
2273
- .tds-toggle-switch--hide-label{
2274
- --tds-toggle-switch-display:inline-flex;
2275
- }
2276
-
2277
2277
  .tds-input{
2278
2278
  --tds-input-border-color:var(--t-form-border-color);
2279
2279
  --tds-input-border-color-hover:var(--t-form-border-color-hover);