@uniai-fe/uds-primitives 0.12.6 → 0.12.8

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.
Files changed (12) hide show
  1. package/dist/styles.css +251 -838
  2. package/package.json +9 -9
  3. package/src/components/button/markup/Base.tsx +3 -2
  4. package/src/components/button/styles/button.scss +99 -326
  5. package/src/components/button/styles/round-button.scss +12 -39
  6. package/src/components/button/styles/text-button.scss +16 -52
  7. package/src/components/button/styles/variables.scss +33 -55
  8. package/src/components/button/types/options.ts +7 -4
  9. package/src/components/button/types/props.ts +11 -14
  10. package/src/components/button/utils/index.ts +14 -3
  11. package/src/components/input/styles/date.scss +1 -1
  12. package/src/components/input/styles/text.scss +1 -1
package/dist/styles.css CHANGED
@@ -87,77 +87,66 @@
87
87
  --button-default-padding-block-table: 0px;
88
88
  /* default button sizing */
89
89
  --button-default-width-min-base: var(--theme-size-small-2);
90
- --button-default-height-small: var(--theme-size-small-3, 32px);
91
- --button-default-height-medium: var(--theme-size-medium-1, 40px);
92
- --button-default-height-large: var(--theme-size-medium-2, 48px);
93
- --button-default-height-xlarge: var(--theme-size-medium-3, 56px);
94
- --button-default-height-table: var(--theme-size-small-2, 24px);
90
+ --button-default-height-small: var(--theme-size-small-3);
91
+ --button-default-height-medium: var(--theme-size-medium-1);
92
+ --button-default-height-large: var(--theme-size-medium-2);
93
+ --button-default-height-xlarge: var(--theme-size-medium-3);
94
+ --button-default-height-table: var(--theme-size-small-2);
95
95
  --button-default-radius-small: var(--theme-radius-medium-3);
96
96
  --button-default-radius-medium: var(--theme-radius-medium-3);
97
97
  --button-default-radius-large: var(--theme-radius-large-1);
98
98
  --button-default-radius-xlarge: var(--theme-radius-large-2);
99
99
  --button-default-radius-table: var(--theme-radius-medium-2);
100
100
  /* text buttons */
101
- --button-text-padding-block-base: var(--spacing-padding-4, 8px);
102
- --button-text-padding-inline-small: var(--spacing-padding-4, 8px);
103
- --button-text-padding-inline-medium: var(--spacing-padding-5, 12px);
104
- --button-text-padding-inline-large: var(--spacing-padding-5, 12px);
105
- --button-text-height-small: var(--theme-size-small-1, 20px);
106
- --button-text-height-medium: var(--theme-size-small-2, 24px);
107
- --button-text-height-large: var(--theme-size-small-3, 32px);
108
- --button-text-radius-base: var(--theme-radius-small, 4px);
101
+ --button-text-padding-block-base: var(--spacing-padding-4);
102
+ --button-text-padding-inline-small: var(--spacing-padding-4);
103
+ --button-text-padding-inline-medium: var(--spacing-padding-5);
104
+ --button-text-padding-inline-large: var(--spacing-padding-5);
105
+ --button-text-height-small: var(--theme-size-small-1);
106
+ --button-text-height-medium: var(--theme-size-small-2);
107
+ --button-text-height-large: var(--theme-size-small-3);
108
+ --button-text-radius-base: var(--theme-radius-small);
109
109
  /* round buttons */
110
- --button-round-padding-inline-small: var(--spacing-padding-5, 12px);
111
- --button-round-padding-inline-medium: var(--spacing-padding-6, 16px);
112
- --button-round-padding-inline-large: var(--spacing-padding-7, 20px);
113
- --button-round-padding-block-base: var(--spacing-padding-2, 4px);
114
- --button-round-height-small: var(--theme-size-small-2, 24px);
115
- --button-round-height-medium: var(--theme-size-small-3, 32px);
116
- --button-round-height-large: var(--theme-size-medium-1, 40px);
117
- --button-round-radius-small: var(--theme-radius-xlarge-2, 16px);
118
- --button-round-radius-medium: var(--theme-radius-xlarge-2, 16px);
110
+ --button-round-padding-inline-small: var(--spacing-padding-5);
111
+ --button-round-padding-inline-medium: var(--spacing-padding-6);
112
+ --button-round-padding-inline-large: var(--spacing-padding-7);
113
+ --button-round-padding-block-base: var(--spacing-padding-2);
114
+ --button-round-height-small: var(--theme-size-small-2);
115
+ --button-round-height-medium: var(--theme-size-small-3);
116
+ --button-round-height-large: var(--theme-size-medium-1);
117
+ --button-round-radius-small: var(--theme-radius-xlarge);
118
+ --button-round-radius-medium: var(--theme-radius-xlarge);
119
119
  --button-round-radius-large: 30px;
120
120
  /* typography */
121
121
  --button-default-font-weight: 400;
122
- --button-default-font-body-medium-family: var(--font-body-medium-family);
123
122
  --button-default-font-body-medium-size: var(--font-body-medium-size);
124
123
  --button-default-font-body-medium-weight: var(--button-default-font-weight);
125
- --button-default-font-body-medium-line-height: var(
126
- --font-body-medium-line-height
127
- );
124
+ --button-default-font-body-medium-line-height: 1em;
128
125
  --button-default-font-body-medium-letter-spacing: var(
129
126
  --font-body-medium-letter-spacing
130
127
  );
131
128
  --button-default-font-label-medium-size: var(--font-body-xxsmall-size);
132
129
  --button-default-font-label-medium-weight: var(--button-default-font-weight);
133
- --button-default-font-label-medium-line-height: var(
134
- --font-body-xxsmall-line-height
135
- );
130
+ --button-default-font-label-medium-line-height: 1em;
136
131
  --button-default-font-label-medium-letter-spacing: var(
137
132
  --font-body-xxsmall-letter-spacing
138
133
  );
139
134
  --button-default-font-label-large-size: var(--font-body-xsmall-size);
140
135
  --button-default-font-label-large-weight: var(--button-default-font-weight);
141
- --button-default-font-label-large-line-height: var(
142
- --font-body-xsmall-line-height
143
- );
136
+ --button-default-font-label-large-line-height: 1em;
144
137
  --button-default-font-label-large-letter-spacing: var(
145
138
  --font-body-xsmall-letter-spacing
146
139
  );
147
140
  --button-default-font-body-large-size: var(--font-body-large-size);
148
141
  --button-default-font-body-large-weight: var(--button-default-font-weight);
149
- --button-default-font-body-large-line-height: var(
150
- --font-body-large-line-height
151
- );
142
+ --button-default-font-body-large-line-height: 1em;
152
143
  --button-default-font-body-large-letter-spacing: var(
153
144
  --font-body-large-letter-spacing
154
145
  );
155
146
  /* 변경: table 버튼은 caption-large 스케일(12px)을 사용한다. */
156
147
  --button-default-font-caption-large-size: var(--font-caption-large-size);
157
148
  --button-default-font-caption-large-weight: var(--button-default-font-weight);
158
- --button-default-font-caption-large-line-height: var(
159
- --font-caption-large-line-height
160
- );
149
+ --button-default-font-caption-large-line-height: 1em;
161
150
  --button-default-font-caption-large-letter-spacing: var(
162
151
  --font-caption-large-letter-spacing
163
152
  );
@@ -165,6 +154,7 @@
165
154
  --button-default-neutral-foreground: var(--color-neutral-20);
166
155
  --button-default-neutral-disabled-bg: var(--color-surface-standard);
167
156
  --button-default-neutral-disabled-foreground: var(--color-label-disabled);
157
+ --button-default-outline-bg: var(--color-surface-static-white);
168
158
  --button-default-primary-solid-bg: var(--color-primary-default);
169
159
  --button-default-primary-solid-hover-bg: var(--color-blue-50);
170
160
  --button-default-primary-solid-active-bg: var(--color-blue-45);
@@ -174,7 +164,7 @@
174
164
  --button-default-primary-outline-hover-bg: var(--color-primary-default);
175
165
  --button-default-primary-outline-hover-foreground: var(--color-common-100);
176
166
  --button-default-primary-overlay-outlined-bg: var(--color-blue-90);
177
- --button-default-secondary-solid-bg: var(--color-blue-95, #e5eeff);
167
+ --button-default-secondary-solid-bg: var(--color-blue-95);
178
168
  --button-default-secondary-solid-hover-bg: #dbe9ff;
179
169
  --button-default-secondary-solid-active-bg: #ccdeff;
180
170
  --button-default-secondary-solid-foreground: var(--color-primary-default);
@@ -262,23 +252,11 @@
262
252
  --button-default-light-gray-outline-active-bg: var(--color-cool-gray-95);
263
253
  /* text button colors */
264
254
  --button-text-secondary-foreground: var(--color-primary-default);
265
- --button-text-secondary-hover-bg: var(
266
- --color-bg-alternative-cool-gray,
267
- var(--color-cool-gray-95)
268
- );
269
- --button-text-secondary-pressed-bg: var(
270
- --color-secondary-strong,
271
- var(--color-blue-90)
272
- );
255
+ --button-text-secondary-hover-bg: var(--color-bg-alternative-cool-gray);
256
+ --button-text-secondary-pressed-bg: var(--color-secondary-strong);
273
257
  --button-text-tertiary-foreground: var(--color-cool-gray-10);
274
- --button-text-tertiary-hover-bg: var(
275
- --color-bg-alternative-cool-gray,
276
- var(--color-cool-gray-95)
277
- );
278
- --button-text-tertiary-pressed-bg: var(
279
- --color-surface-strong,
280
- var(--color-cool-gray-20)
281
- );
258
+ --button-text-tertiary-hover-bg: var(--color-bg-alternative-cool-gray);
259
+ --button-text-tertiary-pressed-bg: var(--color-surface-strong);
282
260
  --carousel-gap: var(--spacing-gap-5);
283
261
  --carousel-inside-button-offset: var(--spacing-padding-2);
284
262
  --carousel-control-button-size: var(--theme-size-medium-2);
@@ -1447,63 +1425,24 @@
1447
1425
  display: flex;
1448
1426
  align-items: center;
1449
1427
  justify-content: center;
1450
- gap: var(--button-default-gap-medium, var(--spacing-gap-2, 8px));
1428
+ gap: var(--button-default-gap-medium);
1451
1429
  width: var(--button-width);
1452
1430
  flex: var(--button-flex);
1453
- min-width: var(
1454
- --button-default-width-min-base,
1455
- var(--theme-size-small-2, 24px)
1456
- );
1457
- min-height: var(--button-min-height, auto);
1458
- padding-inline: var(
1459
- --button-padding-inline,
1460
- var(--button-default-padding-inline-base, var(--spacing-padding-4, 16px))
1461
- );
1431
+ min-width: var(--button-default-width-min-base);
1462
1432
  padding-block: 0;
1463
- border-radius: var(
1464
- --button-border-radius,
1465
- var(--button-default-radius-medium, var(--theme-radius-medium-1, 8px))
1466
- );
1467
1433
  border: 1px solid transparent;
1468
1434
  background-color: transparent;
1469
- color: var(--button-default-neutral-foreground, var(--color-neutral-20));
1435
+ color: var(--button-default-neutral-foreground);
1470
1436
  box-shadow: none;
1471
1437
  filter: none;
1472
1438
  cursor: pointer;
1473
1439
  }
1474
1440
  .button span {
1475
- font-family: var(
1476
- --font-caption-medium-family,
1477
- var(
1478
- --button-default-font-body-medium-family,
1479
- var(--font-body-medium-family, "Pretendard")
1480
- )
1481
- );
1482
- font-size: var(
1483
- --font-caption-medium-size,
1484
- var(
1485
- --button-default-font-body-medium-size,
1486
- var(--font-body-medium-size, 16px)
1487
- )
1488
- );
1489
- font-weight: var(
1490
- --font-caption-medium-weight,
1491
- var(--button-default-font-weight, 400)
1492
- );
1493
- line-height: var(
1494
- --font-caption-medium-line-height,
1495
- var(
1496
- --button-default-font-body-medium-line-height,
1497
- var(--font-body-medium-line-height, 24px)
1498
- )
1499
- );
1500
- letter-spacing: var(
1501
- --font-caption-medium-letter-spacing,
1502
- var(
1503
- --button-default-font-body-medium-letter-spacing,
1504
- var(--font-body-medium-letter-spacing, 0px)
1505
- )
1506
- );
1441
+ font-family: var(--font-family-sans);
1442
+ font-size: var(--font-caption-medium-size);
1443
+ font-weight: var(--font-caption-medium-weight);
1444
+ line-height: 1em;
1445
+ letter-spacing: var(--font-caption-medium-letter-spacing);
1507
1446
  }
1508
1447
  .button .button-icon,
1509
1448
  .button .button-label,
@@ -1513,6 +1452,11 @@
1513
1452
  align-items: center;
1514
1453
  justify-content: center;
1515
1454
  }
1455
+ .button[data-width="full"],
1456
+ .button.button-block {
1457
+ --button-width: 100%;
1458
+ --button-flex: 0 0 100%;
1459
+ }
1516
1460
  .button[data-width="auto"] {
1517
1461
  --button-width: auto;
1518
1462
  --button-flex: 0 1 auto;
@@ -1521,11 +1465,6 @@
1521
1465
  --button-width: auto;
1522
1466
  --button-flex: 1 1 0%;
1523
1467
  }
1524
- .button[data-width="full"],
1525
- .button.button-block {
1526
- --button-width: 100%;
1527
- --button-flex: 0 0 100%;
1528
- }
1529
1468
  .button[data-width="fit"] {
1530
1469
  --button-width: fit-content;
1531
1470
  --button-flex: 0 0 auto;
@@ -1535,14 +1474,8 @@
1535
1474
  }
1536
1475
  .button:not(.button-fill-solid):not(.button-fill-outlined) {
1537
1476
  background-color: transparent;
1538
- border-color: var(
1539
- --button-default-tertiary-outline-border,
1540
- var(--color-cool-gray-90)
1541
- );
1542
- color: var(
1543
- --button-default-tertiary-outline-foreground,
1544
- var(--color-cool-gray-10)
1545
- );
1477
+ border-color: var(--button-default-tertiary-outline-border);
1478
+ color: var(--button-default-tertiary-outline-foreground);
1546
1479
  }
1547
1480
  .button:not(.button-fill-solid):not(.button-fill-outlined):hover:not(
1548
1481
  :disabled
@@ -1550,14 +1483,8 @@
1550
1483
  .button:not(.button-fill-solid):not(
1551
1484
  .button-fill-outlined
1552
1485
  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
1553
- background-color: var(
1554
- --button-default-tertiary-outline-hover-bg,
1555
- var(--color-cool-gray-95)
1556
- );
1557
- border-color: var(
1558
- --button-default-tertiary-outline-border,
1559
- var(--color-cool-gray-90)
1560
- );
1486
+ background-color: var(--button-default-tertiary-outline-hover-bg);
1487
+ border-color: var(--button-default-tertiary-outline-border);
1561
1488
  }
1562
1489
  .button:not(.button-fill-solid):not(.button-fill-outlined):active:not(
1563
1490
  :disabled
@@ -1565,49 +1492,25 @@
1565
1492
  .button:not(.button-fill-solid):not(
1566
1493
  .button-fill-outlined
1567
1494
  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
1568
- background-color: var(
1569
- --button-default-tertiary-solid-bg,
1570
- var(--color-surface-neutral)
1571
- );
1572
- border-color: var(
1573
- --button-default-tertiary-outline-border,
1574
- var(--color-cool-gray-90)
1575
- );
1495
+ background-color: var(--button-default-tertiary-solid-bg);
1496
+ border-color: var(--button-default-tertiary-outline-border);
1576
1497
  }
1577
1498
  .button:where([aria-busy="true"]) {
1578
1499
  pointer-events: none;
1579
1500
  cursor: progress;
1580
1501
  }
1581
1502
  .button:where(.button-fill-solid.button-priority-primary) {
1582
- background-color: var(
1583
- --button-default-primary-solid-bg,
1584
- var(--color-primary-default)
1585
- );
1586
- border-color: var(
1587
- --button-default-primary-solid-bg,
1588
- var(--color-primary-default)
1589
- );
1590
- color: var(
1591
- --button-default-primary-solid-foreground,
1592
- var(--color-common-100)
1593
- );
1503
+ background-color: var(--button-default-primary-solid-bg);
1504
+ border-color: var(--button-default-primary-solid-bg);
1505
+ color: var(--button-default-primary-solid-foreground);
1594
1506
  }
1595
1507
  .button:where(.button-fill-solid.button-priority-primary):disabled,
1596
1508
  .button:where(
1597
1509
  .button-fill-solid.button-priority-primary
1598
1510
  )[aria-disabled="true"] {
1599
- background-color: var(
1600
- --button-default-neutral-disabled-bg,
1601
- var(--color-surface-standard)
1602
- );
1603
- border-color: var(
1604
- --button-default-neutral-disabled-bg,
1605
- var(--color-surface-standard)
1606
- );
1607
- color: var(
1608
- --button-default-neutral-disabled-foreground,
1609
- var(--color-label-disabled)
1610
- );
1511
+ background-color: var(--button-default-neutral-disabled-bg);
1512
+ border-color: var(--button-default-neutral-disabled-bg);
1513
+ color: var(--button-default-neutral-disabled-foreground);
1611
1514
  }
1612
1515
  .button:where(.button-fill-solid.button-priority-primary):hover:not(
1613
1516
  :disabled
@@ -1615,14 +1518,8 @@
1615
1518
  .button:where(
1616
1519
  .button-fill-solid.button-priority-primary
1617
1520
  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
1618
- background-color: var(
1619
- --button-default-primary-solid-hover-bg,
1620
- var(--color-blue-50)
1621
- );
1622
- border-color: var(
1623
- --button-default-primary-solid-hover-bg,
1624
- var(--color-blue-50)
1625
- );
1521
+ background-color: var(--button-default-primary-solid-hover-bg);
1522
+ border-color: var(--button-default-primary-solid-hover-bg);
1626
1523
  }
1627
1524
  .button:where(.button-fill-solid.button-priority-primary):active:not(
1628
1525
  :disabled
@@ -1630,42 +1527,20 @@
1630
1527
  .button:where(
1631
1528
  .button-fill-solid.button-priority-primary
1632
1529
  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
1633
- background-color: var(
1634
- --button-default-primary-solid-active-bg,
1635
- var(--color-blue-45)
1636
- );
1637
- border-color: var(
1638
- --button-default-primary-solid-active-bg,
1639
- var(--color-blue-45)
1640
- );
1530
+ background-color: var(--button-default-primary-solid-active-bg);
1531
+ border-color: var(--button-default-primary-solid-active-bg);
1641
1532
  }
1642
1533
  .button:where(.button-fill-outlined.button-priority-primary) {
1643
- background-color: transparent;
1644
- color: var(
1645
- --button-default-primary-outline-foreground,
1646
- var(--color-primary-default)
1647
- );
1648
- border-color: var(
1649
- --button-default-primary-outline-border,
1650
- var(--color-primary-default)
1651
- );
1534
+ color: var(--button-default-primary-outline-foreground);
1535
+ border-color: var(--button-default-primary-outline-border);
1652
1536
  }
1653
1537
  .button:where(.button-fill-outlined.button-priority-primary):disabled,
1654
1538
  .button:where(
1655
1539
  .button-fill-outlined.button-priority-primary
1656
1540
  )[aria-disabled="true"] {
1657
- background-color: var(
1658
- --button-default-neutral-disabled-bg,
1659
- var(--color-surface-standard)
1660
- );
1661
- border-color: var(
1662
- --button-default-neutral-disabled-bg,
1663
- var(--color-surface-standard)
1664
- );
1665
- color: var(
1666
- --button-default-neutral-disabled-foreground,
1667
- var(--color-label-disabled)
1668
- );
1541
+ background-color: var(--button-default-neutral-disabled-bg);
1542
+ border-color: var(--button-default-neutral-disabled-bg);
1543
+ color: var(--button-default-neutral-disabled-foreground);
1669
1544
  }
1670
1545
  .button:where(.button-fill-outlined.button-priority-primary):hover:not(
1671
1546
  :disabled
@@ -1673,14 +1548,8 @@
1673
1548
  .button:where(
1674
1549
  .button-fill-outlined.button-priority-primary
1675
1550
  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
1676
- background-color: var(
1677
- --button-default-primary-outline-hover-bg,
1678
- var(--color-primary-default)
1679
- );
1680
- border-color: var(
1681
- --button-default-primary-outline-border,
1682
- var(--color-primary-default)
1683
- );
1551
+ background-color: var(--button-default-primary-outline-hover-bg);
1552
+ border-color: var(--button-default-primary-outline-border);
1684
1553
  }
1685
1554
  .button:where(.button-fill-outlined.button-priority-primary):active:not(
1686
1555
  :disabled
@@ -1689,41 +1558,20 @@
1689
1558
  .button-fill-outlined.button-priority-primary
1690
1559
  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
1691
1560
  background-color: var(--button-default-primary-solid-bg);
1692
- border-color: var(
1693
- --button-default-primary-outline-border,
1694
- var(--color-primary-default)
1695
- );
1561
+ border-color: var(--button-default-primary-outline-border);
1696
1562
  }
1697
1563
  .button:where(.button-fill-solid.button-priority-secondary) {
1698
- background-color: var(
1699
- --button-default-secondary-solid-bg,
1700
- var(--color-blue-95, #e5eeff)
1701
- );
1702
- border-color: var(
1703
- --button-default-secondary-solid-bg,
1704
- var(--color-blue-95, #e5eeff)
1705
- );
1706
- color: var(
1707
- --button-default-secondary-solid-foreground,
1708
- var(--color-primary-default)
1709
- );
1564
+ background-color: var(--button-default-secondary-solid-bg);
1565
+ border-color: var(--button-default-secondary-solid-bg);
1566
+ color: var(--button-default-secondary-solid-foreground);
1710
1567
  }
1711
1568
  .button:where(.button-fill-solid.button-priority-secondary):disabled,
1712
1569
  .button:where(
1713
1570
  .button-fill-solid.button-priority-secondary
1714
1571
  )[aria-disabled="true"] {
1715
- background-color: var(
1716
- --button-default-neutral-disabled-bg,
1717
- var(--color-surface-standard)
1718
- );
1719
- border-color: var(
1720
- --button-default-neutral-disabled-bg,
1721
- var(--color-surface-standard)
1722
- );
1723
- color: var(
1724
- --button-default-neutral-disabled-foreground,
1725
- var(--color-label-disabled)
1726
- );
1572
+ background-color: var(--button-default-neutral-disabled-bg);
1573
+ border-color: var(--button-default-neutral-disabled-bg);
1574
+ color: var(--button-default-neutral-disabled-foreground);
1727
1575
  }
1728
1576
  .button:where(.button-fill-solid.button-priority-secondary):hover:not(
1729
1577
  :disabled
@@ -1731,8 +1579,8 @@
1731
1579
  .button:where(
1732
1580
  .button-fill-solid.button-priority-secondary
1733
1581
  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
1734
- background-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
1735
- border-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
1582
+ background-color: var(--button-default-secondary-solid-hover-bg);
1583
+ border-color: var(--button-default-secondary-solid-hover-bg);
1736
1584
  }
1737
1585
  .button:where(.button-fill-solid.button-priority-secondary):active:not(
1738
1586
  :disabled
@@ -1740,36 +1588,20 @@
1740
1588
  .button:where(
1741
1589
  .button-fill-solid.button-priority-secondary
1742
1590
  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
1743
- background-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
1744
- border-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
1591
+ background-color: var(--button-default-secondary-solid-active-bg);
1592
+ border-color: var(--button-default-secondary-solid-active-bg);
1745
1593
  }
1746
1594
  .button:where(.button-fill-outlined.button-priority-secondary) {
1747
- background-color: transparent;
1748
- color: var(
1749
- --button-default-secondary-outline-foreground,
1750
- var(--color-primary-default)
1751
- );
1752
- border-color: var(
1753
- --button-default-secondary-outline-border,
1754
- var(--color-cool-gray-90)
1755
- );
1595
+ color: var(--button-default-secondary-outline-foreground);
1596
+ border-color: var(--button-default-secondary-outline-border);
1756
1597
  }
1757
1598
  .button:where(.button-fill-outlined.button-priority-secondary):disabled,
1758
1599
  .button:where(
1759
1600
  .button-fill-outlined.button-priority-secondary
1760
1601
  )[aria-disabled="true"] {
1761
- background-color: var(
1762
- --button-default-neutral-disabled-bg,
1763
- var(--color-surface-standard)
1764
- );
1765
- border-color: var(
1766
- --button-default-neutral-disabled-bg,
1767
- var(--color-surface-standard)
1768
- );
1769
- color: var(
1770
- --button-default-neutral-disabled-foreground,
1771
- var(--color-label-disabled)
1772
- );
1602
+ background-color: var(--button-default-neutral-disabled-bg);
1603
+ border-color: var(--button-default-neutral-disabled-bg);
1604
+ color: var(--button-default-neutral-disabled-foreground);
1773
1605
  }
1774
1606
  .button:where(.button-fill-outlined.button-priority-secondary):hover:not(
1775
1607
  :disabled
@@ -1777,14 +1609,8 @@
1777
1609
  .button:where(
1778
1610
  .button-fill-outlined.button-priority-secondary
1779
1611
  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
1780
- background-color: var(
1781
- --button-default-secondary-outline-hover-bg,
1782
- var(--color-blue-90)
1783
- );
1784
- border-color: var(
1785
- --button-default-secondary-outline-border,
1786
- var(--color-cool-gray-90)
1787
- );
1612
+ background-color: var(--button-default-secondary-outline-hover-bg);
1613
+ border-color: var(--button-default-secondary-outline-border);
1788
1614
  }
1789
1615
  .button:where(.button-fill-outlined.button-priority-secondary):active:not(
1790
1616
  :disabled
@@ -1793,41 +1619,20 @@
1793
1619
  .button-fill-outlined.button-priority-secondary
1794
1620
  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
1795
1621
  background-color: var(--button-default-secondary-solid-bg);
1796
- border-color: var(
1797
- --button-default-secondary-outline-border,
1798
- var(--color-cool-gray-90)
1799
- );
1622
+ border-color: var(--button-default-secondary-outline-border);
1800
1623
  }
1801
1624
  .button:where(.button-fill-solid.button-priority-tertiary) {
1802
- background-color: var(
1803
- --button-default-tertiary-solid-bg,
1804
- var(--color-surface-neutral)
1805
- );
1806
- border-color: var(
1807
- --button-default-tertiary-solid-bg,
1808
- var(--color-surface-neutral)
1809
- );
1810
- color: var(
1811
- --button-default-tertiary-solid-foreground,
1812
- var(--color-label-neutral)
1813
- );
1625
+ background-color: var(--button-default-tertiary-solid-bg);
1626
+ border-color: var(--button-default-tertiary-solid-bg);
1627
+ color: var(--button-default-tertiary-solid-foreground);
1814
1628
  }
1815
1629
  .button:where(.button-fill-solid.button-priority-tertiary):disabled,
1816
1630
  .button:where(
1817
1631
  .button-fill-solid.button-priority-tertiary
1818
1632
  )[aria-disabled="true"] {
1819
- background-color: var(
1820
- --button-default-neutral-disabled-bg,
1821
- var(--color-surface-standard)
1822
- );
1823
- border-color: var(
1824
- --button-default-neutral-disabled-bg,
1825
- var(--color-surface-standard)
1826
- );
1827
- color: var(
1828
- --button-default-neutral-disabled-foreground,
1829
- var(--color-label-disabled)
1830
- );
1633
+ background-color: var(--button-default-neutral-disabled-bg);
1634
+ border-color: var(--button-default-neutral-disabled-bg);
1635
+ color: var(--button-default-neutral-disabled-foreground);
1831
1636
  }
1832
1637
  .button:where(.button-fill-solid.button-priority-tertiary):hover:not(
1833
1638
  :disabled
@@ -1835,14 +1640,8 @@
1835
1640
  .button:where(
1836
1641
  .button-fill-solid.button-priority-tertiary
1837
1642
  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
1838
- background-color: var(
1839
- --button-default-tertiary-solid-hover-bg,
1840
- var(--color-surface-static-cool-gray)
1841
- );
1842
- border-color: var(
1843
- --button-default-tertiary-solid-hover-bg,
1844
- var(--color-surface-static-cool-gray)
1845
- );
1643
+ background-color: var(--button-default-tertiary-solid-hover-bg);
1644
+ border-color: var(--button-default-tertiary-solid-hover-bg);
1846
1645
  }
1847
1646
  .button:where(.button-fill-solid.button-priority-tertiary):active:not(
1848
1647
  :disabled
@@ -1850,42 +1649,20 @@
1850
1649
  .button:where(
1851
1650
  .button-fill-solid.button-priority-tertiary
1852
1651
  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
1853
- background-color: var(
1854
- --button-default-tertiary-solid-active-bg,
1855
- var(--color-surface-strong)
1856
- );
1857
- border-color: var(
1858
- --button-default-tertiary-solid-active-bg,
1859
- var(--color-surface-strong)
1860
- );
1652
+ background-color: var(--button-default-tertiary-solid-active-bg);
1653
+ border-color: var(--button-default-tertiary-solid-active-bg);
1861
1654
  }
1862
1655
  .button:where(.button-fill-outlined.button-priority-tertiary) {
1863
- background-color: transparent;
1864
- color: var(
1865
- --button-default-tertiary-outline-foreground,
1866
- var(--color-cool-gray-10)
1867
- );
1868
- border-color: var(
1869
- --button-default-tertiary-outline-border,
1870
- var(--color-cool-gray-90)
1871
- );
1656
+ color: var(--button-default-tertiary-outline-foreground);
1657
+ border-color: var(--button-default-tertiary-outline-border);
1872
1658
  }
1873
1659
  .button:where(.button-fill-outlined.button-priority-tertiary):disabled,
1874
1660
  .button:where(
1875
1661
  .button-fill-outlined.button-priority-tertiary
1876
1662
  )[aria-disabled="true"] {
1877
- background-color: var(
1878
- --button-default-neutral-disabled-bg,
1879
- var(--color-surface-standard)
1880
- );
1881
- border-color: var(
1882
- --button-default-neutral-disabled-bg,
1883
- var(--color-surface-standard)
1884
- );
1885
- color: var(
1886
- --button-default-neutral-disabled-foreground,
1887
- var(--color-label-disabled)
1888
- );
1663
+ background-color: var(--button-default-neutral-disabled-bg);
1664
+ border-color: var(--button-default-neutral-disabled-bg);
1665
+ color: var(--button-default-neutral-disabled-foreground);
1889
1666
  }
1890
1667
  .button:where(.button-fill-outlined.button-priority-tertiary):hover:not(
1891
1668
  :disabled
@@ -1893,14 +1670,8 @@
1893
1670
  .button:where(
1894
1671
  .button-fill-outlined.button-priority-tertiary
1895
1672
  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
1896
- background-color: var(
1897
- --button-default-tertiary-outline-hover-bg,
1898
- var(--color-cool-gray-95)
1899
- );
1900
- border-color: var(
1901
- --button-default-tertiary-outline-border,
1902
- var(--color-cool-gray-90)
1903
- );
1673
+ background-color: var(--button-default-tertiary-outline-hover-bg);
1674
+ border-color: var(--button-default-tertiary-outline-border);
1904
1675
  }
1905
1676
  .button:where(.button-fill-outlined.button-priority-tertiary):active:not(
1906
1677
  :disabled
@@ -1909,10 +1680,7 @@
1909
1680
  .button-fill-outlined.button-priority-tertiary
1910
1681
  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
1911
1682
  background-color: var(--button-default-tertiary-solid-bg);
1912
- border-color: var(
1913
- --button-default-tertiary-outline-border,
1914
- var(--color-cool-gray-90)
1915
- );
1683
+ border-color: var(--button-default-tertiary-outline-border);
1916
1684
  }
1917
1685
  .button:where(.button-fill-solid.button-priority-green) {
1918
1686
  background-color: var(--button-default-green-solid-bg);
@@ -1921,18 +1689,9 @@
1921
1689
  }
1922
1690
  .button:where(.button-fill-solid.button-priority-green):disabled,
1923
1691
  .button:where(.button-fill-solid.button-priority-green)[aria-disabled="true"] {
1924
- background-color: var(
1925
- --button-default-neutral-disabled-bg,
1926
- var(--color-surface-standard)
1927
- );
1928
- border-color: var(
1929
- --button-default-neutral-disabled-bg,
1930
- var(--color-surface-standard)
1931
- );
1932
- color: var(
1933
- --button-default-neutral-disabled-foreground,
1934
- var(--color-label-disabled)
1935
- );
1692
+ background-color: var(--button-default-neutral-disabled-bg);
1693
+ border-color: var(--button-default-neutral-disabled-bg);
1694
+ color: var(--button-default-neutral-disabled-foreground);
1936
1695
  }
1937
1696
  .button:where(.button-fill-solid.button-priority-green):hover:not(
1938
1697
  :disabled
@@ -1953,7 +1712,6 @@
1953
1712
  border-color: var(--button-default-green-solid-active-bg);
1954
1713
  }
1955
1714
  .button:where(.button-fill-outlined.button-priority-green) {
1956
- background-color: transparent;
1957
1715
  color: var(--button-default-green-outline-foreground);
1958
1716
  border-color: var(--button-default-green-outline-border);
1959
1717
  }
@@ -1961,18 +1719,9 @@
1961
1719
  .button:where(
1962
1720
  .button-fill-outlined.button-priority-green
1963
1721
  )[aria-disabled="true"] {
1964
- background-color: var(
1965
- --button-default-neutral-disabled-bg,
1966
- var(--color-surface-standard)
1967
- );
1968
- border-color: var(
1969
- --button-default-neutral-disabled-bg,
1970
- var(--color-surface-standard)
1971
- );
1972
- color: var(
1973
- --button-default-neutral-disabled-foreground,
1974
- var(--color-label-disabled)
1975
- );
1722
+ background-color: var(--button-default-neutral-disabled-bg);
1723
+ border-color: var(--button-default-neutral-disabled-bg);
1724
+ color: var(--button-default-neutral-disabled-foreground);
1976
1725
  }
1977
1726
  .button:where(.button-fill-outlined.button-priority-green):hover:not(
1978
1727
  :disabled
@@ -1999,18 +1748,9 @@
1999
1748
  }
2000
1749
  .button:where(.button-fill-solid.button-priority-yellow):disabled,
2001
1750
  .button:where(.button-fill-solid.button-priority-yellow)[aria-disabled="true"] {
2002
- background-color: var(
2003
- --button-default-neutral-disabled-bg,
2004
- var(--color-surface-standard)
2005
- );
2006
- border-color: var(
2007
- --button-default-neutral-disabled-bg,
2008
- var(--color-surface-standard)
2009
- );
2010
- color: var(
2011
- --button-default-neutral-disabled-foreground,
2012
- var(--color-label-disabled)
2013
- );
1751
+ background-color: var(--button-default-neutral-disabled-bg);
1752
+ border-color: var(--button-default-neutral-disabled-bg);
1753
+ color: var(--button-default-neutral-disabled-foreground);
2014
1754
  }
2015
1755
  .button:where(.button-fill-solid.button-priority-yellow):hover:not(
2016
1756
  :disabled
@@ -2031,7 +1771,6 @@
2031
1771
  border-color: var(--button-default-yellow-solid-active-bg);
2032
1772
  }
2033
1773
  .button:where(.button-fill-outlined.button-priority-yellow) {
2034
- background-color: transparent;
2035
1774
  color: var(--button-default-yellow-outline-foreground);
2036
1775
  border-color: var(--button-default-yellow-outline-border);
2037
1776
  }
@@ -2039,18 +1778,9 @@
2039
1778
  .button:where(
2040
1779
  .button-fill-outlined.button-priority-yellow
2041
1780
  )[aria-disabled="true"] {
2042
- background-color: var(
2043
- --button-default-neutral-disabled-bg,
2044
- var(--color-surface-standard)
2045
- );
2046
- border-color: var(
2047
- --button-default-neutral-disabled-bg,
2048
- var(--color-surface-standard)
2049
- );
2050
- color: var(
2051
- --button-default-neutral-disabled-foreground,
2052
- var(--color-label-disabled)
2053
- );
1781
+ background-color: var(--button-default-neutral-disabled-bg);
1782
+ border-color: var(--button-default-neutral-disabled-bg);
1783
+ color: var(--button-default-neutral-disabled-foreground);
2054
1784
  }
2055
1785
  .button:where(.button-fill-outlined.button-priority-yellow):hover:not(
2056
1786
  :disabled
@@ -2077,18 +1807,9 @@
2077
1807
  }
2078
1808
  .button:where(.button-fill-solid.button-priority-orange):disabled,
2079
1809
  .button:where(.button-fill-solid.button-priority-orange)[aria-disabled="true"] {
2080
- background-color: var(
2081
- --button-default-neutral-disabled-bg,
2082
- var(--color-surface-standard)
2083
- );
2084
- border-color: var(
2085
- --button-default-neutral-disabled-bg,
2086
- var(--color-surface-standard)
2087
- );
2088
- color: var(
2089
- --button-default-neutral-disabled-foreground,
2090
- var(--color-label-disabled)
2091
- );
1810
+ background-color: var(--button-default-neutral-disabled-bg);
1811
+ border-color: var(--button-default-neutral-disabled-bg);
1812
+ color: var(--button-default-neutral-disabled-foreground);
2092
1813
  }
2093
1814
  .button:where(.button-fill-solid.button-priority-orange):hover:not(
2094
1815
  :disabled
@@ -2109,7 +1830,6 @@
2109
1830
  border-color: var(--button-default-orange-solid-active-bg);
2110
1831
  }
2111
1832
  .button:where(.button-fill-outlined.button-priority-orange) {
2112
- background-color: transparent;
2113
1833
  color: var(--button-default-orange-outline-foreground);
2114
1834
  border-color: var(--button-default-orange-outline-border);
2115
1835
  }
@@ -2117,18 +1837,9 @@
2117
1837
  .button:where(
2118
1838
  .button-fill-outlined.button-priority-orange
2119
1839
  )[aria-disabled="true"] {
2120
- background-color: var(
2121
- --button-default-neutral-disabled-bg,
2122
- var(--color-surface-standard)
2123
- );
2124
- border-color: var(
2125
- --button-default-neutral-disabled-bg,
2126
- var(--color-surface-standard)
2127
- );
2128
- color: var(
2129
- --button-default-neutral-disabled-foreground,
2130
- var(--color-label-disabled)
2131
- );
1840
+ background-color: var(--button-default-neutral-disabled-bg);
1841
+ border-color: var(--button-default-neutral-disabled-bg);
1842
+ color: var(--button-default-neutral-disabled-foreground);
2132
1843
  }
2133
1844
  .button:where(.button-fill-outlined.button-priority-orange):hover:not(
2134
1845
  :disabled
@@ -2155,18 +1866,9 @@
2155
1866
  }
2156
1867
  .button:where(.button-fill-solid.button-priority-teal):disabled,
2157
1868
  .button:where(.button-fill-solid.button-priority-teal)[aria-disabled="true"] {
2158
- background-color: var(
2159
- --button-default-neutral-disabled-bg,
2160
- var(--color-surface-standard)
2161
- );
2162
- border-color: var(
2163
- --button-default-neutral-disabled-bg,
2164
- var(--color-surface-standard)
2165
- );
2166
- color: var(
2167
- --button-default-neutral-disabled-foreground,
2168
- var(--color-label-disabled)
2169
- );
1869
+ background-color: var(--button-default-neutral-disabled-bg);
1870
+ border-color: var(--button-default-neutral-disabled-bg);
1871
+ color: var(--button-default-neutral-disabled-foreground);
2170
1872
  }
2171
1873
  .button:where(.button-fill-solid.button-priority-teal):hover:not(:disabled):not(
2172
1874
  [aria-disabled="true"]
@@ -2187,7 +1889,6 @@
2187
1889
  border-color: var(--button-default-teal-solid-active-bg);
2188
1890
  }
2189
1891
  .button:where(.button-fill-outlined.button-priority-teal) {
2190
- background-color: transparent;
2191
1892
  color: var(--button-default-teal-outline-foreground);
2192
1893
  border-color: var(--button-default-teal-outline-border);
2193
1894
  }
@@ -2195,18 +1896,9 @@
2195
1896
  .button:where(
2196
1897
  .button-fill-outlined.button-priority-teal
2197
1898
  )[aria-disabled="true"] {
2198
- background-color: var(
2199
- --button-default-neutral-disabled-bg,
2200
- var(--color-surface-standard)
2201
- );
2202
- border-color: var(
2203
- --button-default-neutral-disabled-bg,
2204
- var(--color-surface-standard)
2205
- );
2206
- color: var(
2207
- --button-default-neutral-disabled-foreground,
2208
- var(--color-label-disabled)
2209
- );
1899
+ background-color: var(--button-default-neutral-disabled-bg);
1900
+ border-color: var(--button-default-neutral-disabled-bg);
1901
+ color: var(--button-default-neutral-disabled-foreground);
2210
1902
  }
2211
1903
  .button:where(.button-fill-outlined.button-priority-teal):hover:not(
2212
1904
  :disabled
@@ -2233,18 +1925,9 @@
2233
1925
  }
2234
1926
  .button:where(.button-fill-solid.button-priority-pink):disabled,
2235
1927
  .button:where(.button-fill-solid.button-priority-pink)[aria-disabled="true"] {
2236
- background-color: var(
2237
- --button-default-neutral-disabled-bg,
2238
- var(--color-surface-standard)
2239
- );
2240
- border-color: var(
2241
- --button-default-neutral-disabled-bg,
2242
- var(--color-surface-standard)
2243
- );
2244
- color: var(
2245
- --button-default-neutral-disabled-foreground,
2246
- var(--color-label-disabled)
2247
- );
1928
+ background-color: var(--button-default-neutral-disabled-bg);
1929
+ border-color: var(--button-default-neutral-disabled-bg);
1930
+ color: var(--button-default-neutral-disabled-foreground);
2248
1931
  }
2249
1932
  .button:where(.button-fill-solid.button-priority-pink):hover:not(:disabled):not(
2250
1933
  [aria-disabled="true"]
@@ -2265,7 +1948,6 @@
2265
1948
  border-color: var(--button-default-pink-solid-active-bg);
2266
1949
  }
2267
1950
  .button:where(.button-fill-outlined.button-priority-pink) {
2268
- background-color: transparent;
2269
1951
  color: var(--button-default-pink-outline-foreground);
2270
1952
  border-color: var(--button-default-pink-outline-border);
2271
1953
  }
@@ -2273,18 +1955,9 @@
2273
1955
  .button:where(
2274
1956
  .button-fill-outlined.button-priority-pink
2275
1957
  )[aria-disabled="true"] {
2276
- background-color: var(
2277
- --button-default-neutral-disabled-bg,
2278
- var(--color-surface-standard)
2279
- );
2280
- border-color: var(
2281
- --button-default-neutral-disabled-bg,
2282
- var(--color-surface-standard)
2283
- );
2284
- color: var(
2285
- --button-default-neutral-disabled-foreground,
2286
- var(--color-label-disabled)
2287
- );
1958
+ background-color: var(--button-default-neutral-disabled-bg);
1959
+ border-color: var(--button-default-neutral-disabled-bg);
1960
+ color: var(--button-default-neutral-disabled-foreground);
2288
1961
  }
2289
1962
  .button:where(.button-fill-outlined.button-priority-pink):hover:not(
2290
1963
  :disabled
@@ -2311,18 +1984,9 @@
2311
1984
  }
2312
1985
  .button:where(.button-fill-solid.button-priority-red):disabled,
2313
1986
  .button:where(.button-fill-solid.button-priority-red)[aria-disabled="true"] {
2314
- background-color: var(
2315
- --button-default-neutral-disabled-bg,
2316
- var(--color-surface-standard)
2317
- );
2318
- border-color: var(
2319
- --button-default-neutral-disabled-bg,
2320
- var(--color-surface-standard)
2321
- );
2322
- color: var(
2323
- --button-default-neutral-disabled-foreground,
2324
- var(--color-label-disabled)
2325
- );
1987
+ background-color: var(--button-default-neutral-disabled-bg);
1988
+ border-color: var(--button-default-neutral-disabled-bg);
1989
+ color: var(--button-default-neutral-disabled-foreground);
2326
1990
  }
2327
1991
  .button:where(.button-fill-solid.button-priority-red):hover:not(:disabled):not(
2328
1992
  [aria-disabled="true"]
@@ -2343,24 +2007,14 @@
2343
2007
  border-color: var(--button-default-red-solid-active-bg);
2344
2008
  }
2345
2009
  .button:where(.button-fill-outlined.button-priority-red) {
2346
- background-color: transparent;
2347
2010
  color: var(--button-default-red-outline-foreground);
2348
2011
  border-color: var(--button-default-red-outline-border);
2349
2012
  }
2350
2013
  .button:where(.button-fill-outlined.button-priority-red):disabled,
2351
2014
  .button:where(.button-fill-outlined.button-priority-red)[aria-disabled="true"] {
2352
- background-color: var(
2353
- --button-default-neutral-disabled-bg,
2354
- var(--color-surface-standard)
2355
- );
2356
- border-color: var(
2357
- --button-default-neutral-disabled-bg,
2358
- var(--color-surface-standard)
2359
- );
2360
- color: var(
2361
- --button-default-neutral-disabled-foreground,
2362
- var(--color-label-disabled)
2363
- );
2015
+ background-color: var(--button-default-neutral-disabled-bg);
2016
+ border-color: var(--button-default-neutral-disabled-bg);
2017
+ color: var(--button-default-neutral-disabled-foreground);
2364
2018
  }
2365
2019
  .button:where(.button-fill-outlined.button-priority-red):hover:not(
2366
2020
  :disabled
@@ -2389,18 +2043,9 @@
2389
2043
  .button:where(
2390
2044
  .button-fill-solid.button-priority-darkGray
2391
2045
  )[aria-disabled="true"] {
2392
- background-color: var(
2393
- --button-default-neutral-disabled-bg,
2394
- var(--color-surface-standard)
2395
- );
2396
- border-color: var(
2397
- --button-default-neutral-disabled-bg,
2398
- var(--color-surface-standard)
2399
- );
2400
- color: var(
2401
- --button-default-neutral-disabled-foreground,
2402
- var(--color-label-disabled)
2403
- );
2046
+ background-color: var(--button-default-neutral-disabled-bg);
2047
+ border-color: var(--button-default-neutral-disabled-bg);
2048
+ color: var(--button-default-neutral-disabled-foreground);
2404
2049
  }
2405
2050
  .button:where(.button-fill-solid.button-priority-darkGray):hover:not(
2406
2051
  :disabled
@@ -2421,7 +2066,6 @@
2421
2066
  border-color: var(--button-default-dark-gray-solid-active-bg);
2422
2067
  }
2423
2068
  .button:where(.button-fill-outlined.button-priority-darkGray) {
2424
- background-color: transparent;
2425
2069
  color: var(--button-default-dark-gray-outline-foreground);
2426
2070
  border-color: var(--button-default-dark-gray-outline-border);
2427
2071
  }
@@ -2429,18 +2073,9 @@
2429
2073
  .button:where(
2430
2074
  .button-fill-outlined.button-priority-darkGray
2431
2075
  )[aria-disabled="true"] {
2432
- background-color: var(
2433
- --button-default-neutral-disabled-bg,
2434
- var(--color-surface-standard)
2435
- );
2436
- border-color: var(
2437
- --button-default-neutral-disabled-bg,
2438
- var(--color-surface-standard)
2439
- );
2440
- color: var(
2441
- --button-default-neutral-disabled-foreground,
2442
- var(--color-label-disabled)
2443
- );
2076
+ background-color: var(--button-default-neutral-disabled-bg);
2077
+ border-color: var(--button-default-neutral-disabled-bg);
2078
+ color: var(--button-default-neutral-disabled-foreground);
2444
2079
  }
2445
2080
  .button:where(.button-fill-outlined.button-priority-darkGray):hover:not(
2446
2081
  :disabled
@@ -2469,18 +2104,9 @@
2469
2104
  .button:where(
2470
2105
  .button-fill-solid.button-priority-lightGray
2471
2106
  )[aria-disabled="true"] {
2472
- background-color: var(
2473
- --button-default-neutral-disabled-bg,
2474
- var(--color-surface-standard)
2475
- );
2476
- border-color: var(
2477
- --button-default-neutral-disabled-bg,
2478
- var(--color-surface-standard)
2479
- );
2480
- color: var(
2481
- --button-default-neutral-disabled-foreground,
2482
- var(--color-label-disabled)
2483
- );
2107
+ background-color: var(--button-default-neutral-disabled-bg);
2108
+ border-color: var(--button-default-neutral-disabled-bg);
2109
+ color: var(--button-default-neutral-disabled-foreground);
2484
2110
  }
2485
2111
  .button:where(.button-fill-solid.button-priority-lightGray):hover:not(
2486
2112
  :disabled
@@ -2501,7 +2127,6 @@
2501
2127
  border-color: var(--button-default-light-gray-solid-active-bg);
2502
2128
  }
2503
2129
  .button:where(.button-fill-outlined.button-priority-lightGray) {
2504
- background-color: transparent;
2505
2130
  color: var(--button-default-light-gray-outline-foreground);
2506
2131
  border-color: var(--button-default-light-gray-outline-border);
2507
2132
  }
@@ -2509,18 +2134,9 @@
2509
2134
  .button:where(
2510
2135
  .button-fill-outlined.button-priority-lightGray
2511
2136
  )[aria-disabled="true"] {
2512
- background-color: var(
2513
- --button-default-neutral-disabled-bg,
2514
- var(--color-surface-standard)
2515
- );
2516
- border-color: var(
2517
- --button-default-neutral-disabled-bg,
2518
- var(--color-surface-standard)
2519
- );
2520
- color: var(
2521
- --button-default-neutral-disabled-foreground,
2522
- var(--color-label-disabled)
2523
- );
2137
+ background-color: var(--button-default-neutral-disabled-bg);
2138
+ border-color: var(--button-default-neutral-disabled-bg);
2139
+ color: var(--button-default-neutral-disabled-foreground);
2524
2140
  }
2525
2141
  .button:where(.button-fill-outlined.button-priority-lightGray):hover:not(
2526
2142
  :disabled
@@ -2541,164 +2157,72 @@
2541
2157
  border-color: var(--button-default-light-gray-outline-border);
2542
2158
  }
2543
2159
  .button:where(.button-size-small) {
2544
- padding-inline: var(
2545
- --button-default-padding-inline-small,
2546
- var(--spacing-padding-6, 24px)
2547
- );
2548
- gap: var(--button-default-gap-medium, var(--spacing-gap-2, 8px));
2160
+ padding-inline: var(--button-default-padding-inline-small);
2161
+ gap: var(--button-default-gap-medium);
2549
2162
  padding-block: 0;
2550
- min-height: var(
2551
- --button-default-height-small,
2552
- var(--theme-size-small-3, 32px)
2553
- );
2554
- border-radius: var(
2555
- --button-default-radius-small,
2556
- var(--theme-radius-medium-3, 8px)
2557
- );
2163
+ min-height: var(--button-default-height-small);
2164
+ border-radius: var(--button-default-radius-small);
2558
2165
  }
2559
2166
  .button:where(.button-size-small) span {
2560
- font-size: var(
2561
- --button-default-font-label-medium-size,
2562
- var(--font-label-medium-size, 14px)
2563
- );
2564
- font-weight: var(--button-default-font-weight, 400);
2565
- line-height: var(
2566
- --button-default-font-label-medium-line-height,
2567
- var(--font-label-medium-line-height, 1.5em)
2568
- );
2569
- letter-spacing: var(
2570
- --button-default-font-label-medium-letter-spacing,
2571
- var(--font-label-medium-letter-spacing, 0px)
2572
- );
2167
+ font-size: var(--button-default-font-label-medium-size);
2168
+ font-weight: var(--button-default-font-weight);
2169
+ line-height: var(--button-default-font-label-medium-line-height);
2170
+ letter-spacing: var(--button-default-font-label-medium-letter-spacing);
2573
2171
  }
2574
2172
  .button:where(.button-size-medium) {
2575
- padding-inline: var(
2576
- --button-default-padding-inline-medium,
2577
- var(--spacing-padding-7, 20px)
2578
- );
2579
- gap: var(--button-default-gap-medium, var(--spacing-gap-2, 8px));
2173
+ padding-inline: var(--button-default-padding-inline-medium);
2174
+ gap: var(--button-default-gap-medium);
2580
2175
  padding-block: 0;
2581
- min-height: var(
2582
- --button-default-height-medium,
2583
- var(--theme-size-medium-1, 40px)
2584
- );
2585
- border-radius: var(
2586
- --button-default-radius-small,
2587
- var(--theme-radius-medium-3, 8px)
2588
- );
2176
+ min-height: var(--button-default-height-medium);
2177
+ border-radius: var(--button-default-radius-small);
2589
2178
  }
2590
2179
  .button:where(.button-size-medium) span {
2591
- font-size: var(
2592
- --button-default-font-label-large-size,
2593
- var(--font-label-large-size, 16px)
2594
- );
2595
- font-weight: var(--button-default-font-weight, 400);
2596
- line-height: var(
2597
- --button-default-font-label-large-line-height,
2598
- var(--font-label-large-line-height, 1.5em)
2599
- );
2600
- letter-spacing: var(
2601
- --button-default-font-label-large-letter-spacing,
2602
- var(--font-label-large-letter-spacing, 0px)
2603
- );
2180
+ font-size: var(--button-default-font-label-large-size);
2181
+ font-weight: var(--button-default-font-weight);
2182
+ line-height: var(--button-default-font-label-large-line-height);
2183
+ letter-spacing: var(--button-default-font-label-large-letter-spacing);
2604
2184
  }
2605
2185
  .button:where(.button-size-large) {
2606
- padding-inline: var(
2607
- --button-default-padding-inline-large,
2608
- var(--spacing-padding-9, 28px)
2609
- );
2610
- gap: var(--button-default-gap-large, var(--spacing-gap-3, 12px));
2186
+ padding-inline: var(--button-default-padding-inline-large);
2187
+ gap: var(--button-default-gap-large);
2611
2188
  padding-block: 0;
2612
- min-height: var(
2613
- --button-default-height-large,
2614
- var(--theme-size-medium-2, 48px)
2615
- );
2616
- border-radius: var(
2617
- --button-default-radius-large,
2618
- var(--theme-radius-large-1, 12px)
2619
- );
2189
+ min-height: var(--button-default-height-large);
2190
+ border-radius: var(--button-default-radius-large);
2620
2191
  }
2621
2192
  .button:where(.button-size-large) span {
2622
- font-size: var(
2623
- --button-default-font-body-medium-size,
2624
- var(--font-body-medium-size, 17px)
2625
- );
2626
- font-weight: var(--button-default-font-weight, 400);
2627
- line-height: var(
2628
- --button-default-font-body-medium-line-height,
2629
- var(--font-body-medium-line-height, 1.5em)
2630
- );
2631
- letter-spacing: var(
2632
- --button-default-font-body-medium-letter-spacing,
2633
- var(--font-body-medium-letter-spacing, 0px)
2634
- );
2193
+ font-size: var(--button-default-font-body-medium-size);
2194
+ font-weight: var(--button-default-font-weight);
2195
+ line-height: var(--button-default-font-body-medium-line-height);
2196
+ letter-spacing: var(--button-default-font-body-medium-letter-spacing);
2635
2197
  }
2636
2198
  .button:where(.button-size-xlarge) {
2637
- padding-inline: var(
2638
- --button-default-padding-inline-large,
2639
- var(--spacing-padding-9, 28px)
2640
- );
2641
- gap: var(--button-default-gap-large, var(--spacing-gap-3, 12px));
2199
+ padding-inline: var(--button-default-padding-inline-large);
2200
+ gap: var(--button-default-gap-large);
2642
2201
  padding-block: 0;
2643
- min-height: var(
2644
- --button-default-height-xlarge,
2645
- var(--theme-size-medium-3, 56px)
2646
- );
2647
- border-radius: var(
2648
- --button-default-radius-xlarge,
2649
- var(--theme-radius-large-2, 16px)
2650
- );
2202
+ min-height: var(--button-default-height-xlarge);
2203
+ border-radius: var(--button-default-radius-xlarge);
2651
2204
  }
2652
2205
  .button:where(.button-size-xlarge) span {
2653
- font-size: var(
2654
- --button-default-font-body-large-size,
2655
- var(--font-body-large-size, 19px)
2656
- );
2657
- font-weight: var(--button-default-font-weight, 400);
2658
- line-height: var(
2659
- --button-default-font-body-large-line-height,
2660
- var(--font-body-large-line-height, 1.5em)
2661
- );
2662
- letter-spacing: var(
2663
- --button-default-font-body-large-letter-spacing,
2664
- var(--font-body-large-letter-spacing, 0px)
2665
- );
2206
+ font-size: var(--button-default-font-body-large-size);
2207
+ font-weight: var(--button-default-font-weight);
2208
+ line-height: var(--button-default-font-body-large-line-height);
2209
+ letter-spacing: var(--button-default-font-body-large-letter-spacing);
2666
2210
  }
2667
2211
  .button:where(.button-size-table) {
2668
- padding-inline: var(
2669
- --button-default-padding-inline-table,
2670
- var(--spacing-padding-5, 12px)
2671
- );
2672
- gap: var(--button-default-gap-table, var(--spacing-gap-1, 4px));
2673
- padding-block: var(--button-default-padding-block-table, 0px);
2674
- min-height: var(
2675
- --button-default-height-table,
2676
- var(--theme-size-small-2, 24px)
2677
- );
2678
- border-radius: var(
2679
- --button-default-radius-table,
2680
- var(--theme-radius-medium-2, 6px)
2681
- );
2212
+ padding-inline: var(--button-default-padding-inline-table);
2213
+ gap: var(--button-default-gap-table);
2214
+ padding-block: var(--button-default-padding-block-table);
2215
+ min-height: var(--button-default-height-table);
2216
+ border-radius: var(--button-default-radius-table);
2682
2217
  }
2683
2218
  .button:where(.button-size-table) span {
2684
- font-size: var(
2685
- --button-default-font-caption-large-size,
2686
- var(--font-caption-large-size, 12px)
2687
- );
2688
- font-weight: var(
2689
- --button-default-font-caption-large-weight,
2690
- var(--button-default-font-weight, 400)
2691
- );
2692
- line-height: var(
2693
- --button-default-font-caption-large-line-height,
2694
- var(--font-caption-large-line-height, 1.5em)
2695
- );
2696
- letter-spacing: var(
2697
- --button-default-font-caption-large-letter-spacing,
2698
- var(--font-caption-large-letter-spacing, 0px)
2699
- );
2219
+ font-size: var(--button-default-font-caption-large-size);
2220
+ font-weight: var(--button-default-font-caption-large-weight);
2221
+ line-height: var(--button-default-font-caption-large-line-height);
2222
+ letter-spacing: var(--button-default-font-caption-large-letter-spacing);
2700
2223
  }
2701
2224
  .button:where(.button-fill-outlined) {
2225
+ background-color: var(--button-default-outline-bg);
2702
2226
  box-shadow: none;
2703
2227
  }
2704
2228
  .button
@@ -2709,8 +2233,8 @@
2709
2233
  :where(
2710
2234
  .button-fill-solid.button-priority-secondary
2711
2235
  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
2712
- background-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
2713
- border-color: var(--button-default-secondary-solid-hover-bg, #dbe9ff);
2236
+ background-color: var(--button-default-secondary-solid-hover-bg);
2237
+ border-color: var(--button-default-secondary-solid-hover-bg);
2714
2238
  box-shadow: none;
2715
2239
  }
2716
2240
  .button
@@ -2721,8 +2245,8 @@
2721
2245
  :where(
2722
2246
  .button-fill-solid.button-priority-secondary
2723
2247
  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
2724
- background-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
2725
- border-color: var(--button-default-secondary-solid-active-bg, #ccdeff);
2248
+ background-color: var(--button-default-secondary-solid-active-bg);
2249
+ border-color: var(--button-default-secondary-solid-active-bg);
2726
2250
  box-shadow: none;
2727
2251
  }
2728
2252
  .button:where(.button-fill-solid.button-priority-tertiary):hover:not(
@@ -2731,14 +2255,8 @@
2731
2255
  .button:where(
2732
2256
  .button-fill-solid.button-priority-tertiary
2733
2257
  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
2734
- background-color: var(
2735
- --button-default-tertiary-overlay-solid-bg,
2736
- var(--color-surface-strong)
2737
- );
2738
- border-color: var(
2739
- --button-default-tertiary-solid-bg,
2740
- var(--color-surface-neutral)
2741
- );
2258
+ background-color: var(--button-default-tertiary-overlay-solid-bg);
2259
+ border-color: var(--button-default-tertiary-solid-bg);
2742
2260
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
2743
2261
  }
2744
2262
  .button:where(.button-fill-solid.button-priority-tertiary):active:not(
@@ -2747,14 +2265,8 @@
2747
2265
  .button:where(
2748
2266
  .button-fill-solid.button-priority-tertiary
2749
2267
  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
2750
- background-color: var(
2751
- --button-default-tertiary-overlay-solid-bg,
2752
- var(--color-surface-strong)
2753
- );
2754
- border-color: var(
2755
- --button-default-tertiary-solid-bg,
2756
- var(--color-surface-neutral)
2757
- );
2268
+ background-color: var(--button-default-tertiary-overlay-solid-bg);
2269
+ border-color: var(--button-default-tertiary-solid-bg);
2758
2270
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.48);
2759
2271
  }
2760
2272
  .button:where(.button-fill-outlined.button-priority-primary):hover:not(
@@ -2763,14 +2275,8 @@
2763
2275
  .button:where(
2764
2276
  .button-fill-outlined.button-priority-primary
2765
2277
  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
2766
- background-color: var(
2767
- --button-default-primary-overlay-outlined-bg,
2768
- var(--color-blue-90)
2769
- );
2770
- border-color: var(
2771
- --button-default-primary-outline-border,
2772
- var(--color-primary-default)
2773
- );
2278
+ background-color: var(--button-default-primary-overlay-outlined-bg);
2279
+ border-color: var(--button-default-primary-outline-border);
2774
2280
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
2775
2281
  }
2776
2282
  .button:where(.button-fill-outlined.button-priority-primary):active:not(
@@ -2779,14 +2285,8 @@
2779
2285
  .button:where(
2780
2286
  .button-fill-outlined.button-priority-primary
2781
2287
  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
2782
- background-color: var(
2783
- --button-default-primary-overlay-outlined-bg,
2784
- var(--color-blue-90)
2785
- );
2786
- border-color: var(
2787
- --button-default-primary-outline-border,
2788
- var(--color-primary-default)
2789
- );
2288
+ background-color: var(--button-default-primary-overlay-outlined-bg);
2289
+ border-color: var(--button-default-primary-outline-border);
2790
2290
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
2791
2291
  }
2792
2292
  .button:where(.button-fill-outlined.button-priority-secondary):hover:not(
@@ -2795,14 +2295,8 @@
2795
2295
  .button:where(
2796
2296
  .button-fill-outlined.button-priority-secondary
2797
2297
  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
2798
- background-color: var(
2799
- --button-default-secondary-overlay-outlined-bg,
2800
- var(--color-cool-gray-95)
2801
- );
2802
- border-color: var(
2803
- --button-default-secondary-outline-border,
2804
- var(--color-cool-gray-90)
2805
- );
2298
+ background-color: var(--button-default-secondary-overlay-outlined-bg);
2299
+ border-color: var(--button-default-secondary-outline-border);
2806
2300
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
2807
2301
  }
2808
2302
  .button:where(.button-fill-outlined.button-priority-secondary):active:not(
@@ -2811,14 +2305,8 @@
2811
2305
  .button:where(
2812
2306
  .button-fill-outlined.button-priority-secondary
2813
2307
  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
2814
- background-color: var(
2815
- --button-default-secondary-overlay-outlined-bg,
2816
- var(--color-cool-gray-95)
2817
- );
2818
- border-color: var(
2819
- --button-default-secondary-outline-border,
2820
- var(--color-cool-gray-90)
2821
- );
2308
+ background-color: var(--button-default-secondary-overlay-outlined-bg);
2309
+ border-color: var(--button-default-secondary-outline-border);
2822
2310
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
2823
2311
  }
2824
2312
  .button:where(.button-fill-outlined.button-priority-tertiary):hover:not(
@@ -2827,14 +2315,8 @@
2827
2315
  .button:where(
2828
2316
  .button-fill-outlined.button-priority-tertiary
2829
2317
  )[data-user-action="hover"]:not(:disabled):not([aria-disabled="true"]) {
2830
- background-color: var(
2831
- --button-default-tertiary-overlay-outlined-bg,
2832
- var(--color-cool-gray-95)
2833
- );
2834
- border-color: var(
2835
- --button-default-tertiary-outline-border,
2836
- var(--color-cool-gray-90)
2837
- );
2318
+ background-color: var(--button-default-tertiary-overlay-outlined-bg);
2319
+ border-color: var(--button-default-tertiary-outline-border);
2838
2320
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
2839
2321
  }
2840
2322
  .button:where(.button-fill-outlined.button-priority-tertiary):active:not(
@@ -2843,82 +2325,52 @@
2843
2325
  .button:where(
2844
2326
  .button-fill-outlined.button-priority-tertiary
2845
2327
  )[data-user-action="pressed"]:not(:disabled):not([aria-disabled="true"]) {
2846
- background-color: var(
2847
- --button-default-tertiary-overlay-outlined-bg,
2848
- var(--color-cool-gray-95)
2849
- );
2850
- border-color: var(
2851
- --button-default-tertiary-outline-border,
2852
- var(--color-cool-gray-90)
2853
- );
2328
+ background-color: var(--button-default-tertiary-overlay-outlined-bg);
2329
+ border-color: var(--button-default-tertiary-outline-border);
2854
2330
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
2855
2331
  }
2856
2332
  .button:where(:disabled),
2857
2333
  .button:where([aria-disabled="true"]) {
2858
- background-color: var(
2859
- --button-default-neutral-disabled-bg,
2860
- var(--color-surface-standard)
2861
- );
2862
- border-color: var(
2863
- --button-default-neutral-disabled-bg,
2864
- var(--color-surface-standard)
2865
- );
2866
- color: var(
2867
- --button-default-neutral-disabled-foreground,
2868
- var(--color-label-disabled)
2869
- );
2334
+ background-color: var(--button-default-neutral-disabled-bg);
2335
+ border-color: var(--button-default-neutral-disabled-bg);
2336
+ color: var(--button-default-neutral-disabled-foreground);
2870
2337
  cursor: not-allowed;
2871
2338
  }
2872
2339
  .button:where(.button-icon-left) .button-label {
2873
- margin-left: var(--button-default-gap-small, var(--spacing-gap-1, 4px));
2340
+ margin-left: var(--button-default-gap-small);
2874
2341
  }
2875
2342
  .button:where(.button-icon-right) .button-label {
2876
- margin-right: var(--button-default-gap-small, var(--spacing-gap-1, 4px));
2343
+ margin-right: var(--button-default-gap-small);
2877
2344
  }
2878
2345
 
2879
2346
  .button:where(.button-template-text) {
2880
2347
  min-width: auto;
2881
2348
  border-color: transparent;
2882
2349
  background-color: transparent;
2883
- padding-block: var(
2884
- --button-text-padding-block-base,
2885
- var(--spacing-padding-4, 8px)
2886
- );
2887
- padding-inline: var(
2888
- --button-text-padding-inline-small,
2889
- var(--spacing-padding-4, 8px)
2890
- );
2350
+ padding-block: var(--button-text-padding-block-base);
2351
+ padding-inline: var(--button-text-padding-inline-small);
2891
2352
  border-width: 0;
2892
- gap: var(--spacing-gap-1, 4px);
2893
- border-radius: var(--button-text-radius-base, var(--theme-radius-small, 4px));
2353
+ gap: var(--spacing-gap-1);
2354
+ border-radius: var(--button-text-radius-base);
2894
2355
  }
2895
2356
  .button:where(.button-template-text-size-small) {
2896
- min-height: var(--button-text-height-small, var(--theme-size-small-1, 20px));
2897
- padding-inline: var(
2898
- --button-text-padding-inline-small,
2899
- var(--spacing-padding-4, 8px)
2900
- );
2357
+ min-height: var(--button-text-height-small);
2358
+ padding-inline: var(--button-text-padding-inline-small);
2901
2359
  }
2902
2360
  .button:where(.button-template-text-size-medium) {
2903
- min-height: var(--button-text-height-medium, var(--theme-size-small-2, 24px));
2904
- padding-inline: var(
2905
- --button-text-padding-inline-medium,
2906
- var(--spacing-padding-5, 12px)
2907
- );
2361
+ min-height: var(--button-text-height-medium);
2362
+ padding-inline: var(--button-text-padding-inline-medium);
2908
2363
  }
2909
2364
  .button:where(.button-template-text-size-large) {
2910
- min-height: var(--button-text-height-large, var(--theme-size-small-3, 32px));
2911
- padding-inline: var(
2912
- --button-text-padding-inline-large,
2913
- var(--spacing-padding-5, 12px)
2914
- );
2365
+ min-height: var(--button-text-height-large);
2366
+ padding-inline: var(--button-text-padding-inline-large);
2915
2367
  }
2916
2368
  .button:where(.button-template-text:disabled) {
2917
2369
  background-color: transparent;
2918
2370
  border-color: transparent;
2919
2371
  }
2920
2372
  .button:where(.button-template-text.button-priority-secondary) {
2921
- color: var(--button-text-secondary-foreground, var(--color-primary-default));
2373
+ color: var(--button-text-secondary-foreground);
2922
2374
  }
2923
2375
  .button:where(.button-template-text.button-priority-secondary):hover:not(
2924
2376
  :disabled
@@ -2926,10 +2378,7 @@
2926
2378
  .button:where(
2927
2379
  .button-template-text.button-priority-secondary
2928
2380
  )[data-user-action="hover"]:not(:disabled) {
2929
- background-color: var(
2930
- --button-text-secondary-hover-bg,
2931
- var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95))
2932
- );
2381
+ background-color: var(--button-text-secondary-hover-bg);
2933
2382
  }
2934
2383
  .button:where(.button-template-text.button-priority-secondary):active:not(
2935
2384
  :disabled
@@ -2937,13 +2386,10 @@
2937
2386
  .button:where(
2938
2387
  .button-template-text.button-priority-secondary
2939
2388
  )[data-user-action="pressed"]:not(:disabled) {
2940
- background-color: var(
2941
- --button-text-secondary-pressed-bg,
2942
- var(--color-secondary-strong, var(--color-blue-90))
2943
- );
2389
+ background-color: var(--button-text-secondary-pressed-bg);
2944
2390
  }
2945
2391
  .button:where(.button-template-text.button-priority-tertiary) {
2946
- color: var(--button-text-tertiary-foreground, var(--color-cool-gray-10));
2392
+ color: var(--button-text-tertiary-foreground);
2947
2393
  }
2948
2394
  .button:where(.button-template-text.button-priority-tertiary):hover:not(
2949
2395
  :disabled
@@ -2951,10 +2397,7 @@
2951
2397
  .button:where(
2952
2398
  .button-template-text.button-priority-tertiary
2953
2399
  )[data-user-action="hover"]:not(:disabled) {
2954
- background-color: var(
2955
- --button-text-tertiary-hover-bg,
2956
- var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95))
2957
- );
2400
+ background-color: var(--button-text-tertiary-hover-bg);
2958
2401
  }
2959
2402
  .button:where(.button-template-text.button-priority-tertiary):active:not(
2960
2403
  :disabled
@@ -2962,59 +2405,29 @@
2962
2405
  .button:where(
2963
2406
  .button-template-text.button-priority-tertiary
2964
2407
  )[data-user-action="pressed"]:not(:disabled) {
2965
- background-color: var(
2966
- --button-text-tertiary-pressed-bg,
2967
- var(--color-surface-strong, var(--color-cool-gray-20))
2968
- );
2408
+ background-color: var(--button-text-tertiary-pressed-bg);
2969
2409
  }
2970
2410
 
2971
2411
  .button:where(.button-template-round) {
2972
2412
  min-width: auto;
2973
- padding-block: var(
2974
- --button-round-padding-block-base,
2975
- var(--spacing-padding-2, 4px)
2976
- );
2977
- padding-inline: var(
2978
- --button-round-padding-inline-medium,
2979
- var(--spacing-padding-6, 16px)
2980
- );
2981
- gap: var(--spacing-gap-2, 8px);
2413
+ padding-block: var(--button-round-padding-block-base);
2414
+ padding-inline: var(--button-round-padding-inline-medium);
2415
+ gap: var(--spacing-gap-2);
2982
2416
  }
2983
2417
  .button:where(.button-template-round-size-small) {
2984
- min-height: var(--button-round-height-small, var(--theme-size-small-2, 24px));
2985
- padding-inline: var(
2986
- --button-round-padding-inline-small,
2987
- var(--spacing-padding-5, 12px)
2988
- );
2989
- border-radius: var(
2990
- --button-round-radius-small,
2991
- var(--theme-radius-xlarge-2, 16px)
2992
- );
2418
+ min-height: var(--button-round-height-small);
2419
+ padding-inline: var(--button-round-padding-inline-small);
2420
+ border-radius: var(--button-round-radius-small);
2993
2421
  }
2994
2422
  .button:where(.button-template-round-size-medium) {
2995
- min-height: var(
2996
- --button-round-height-medium,
2997
- var(--theme-size-small-3, 32px)
2998
- );
2999
- padding-inline: var(
3000
- --button-round-padding-inline-medium,
3001
- var(--spacing-padding-6, 16px)
3002
- );
3003
- border-radius: var(
3004
- --button-round-radius-medium,
3005
- var(--theme-radius-xlarge-2, 16px)
3006
- );
2423
+ min-height: var(--button-round-height-medium);
2424
+ padding-inline: var(--button-round-padding-inline-medium);
2425
+ border-radius: var(--button-round-radius-medium);
3007
2426
  }
3008
2427
  .button:where(.button-template-round-size-large) {
3009
- min-height: var(
3010
- --button-round-height-large,
3011
- var(--theme-size-medium-1, 40px)
3012
- );
3013
- padding-inline: var(
3014
- --button-round-padding-inline-large,
3015
- var(--spacing-padding-7, 20px)
3016
- );
3017
- border-radius: var(--button-round-radius-large, 30px);
2428
+ min-height: var(--button-round-height-large);
2429
+ padding-inline: var(--button-round-padding-inline-large);
2430
+ border-radius: var(--button-round-radius-large);
3018
2431
  }
3019
2432
 
3020
2433
  .calendar-root {
@@ -5023,7 +4436,7 @@ figure.chip {
5023
4436
  }
5024
4437
  .button.input-utility-button .button-label {
5025
4438
  font-size: var(--font-body-xxsmall-size);
5026
- line-height: var(--font-body-xxsmall-line-height);
4439
+ line-height: 1em;
5027
4440
  letter-spacing: var(--font-body-xxsmall-letter-spacing);
5028
4441
  font-weight: var(--font-body-xxsmall-weight);
5029
4442
  }
@@ -5123,7 +4536,7 @@ figure.chip {
5123
4536
  }
5124
4537
  .input-date-range-clear-button .button-label {
5125
4538
  font-size: var(--font-body-xxsmall-size);
5126
- line-height: 1.4;
4539
+ line-height: 1em;
5127
4540
  font-weight: var(--font-body-medium-weight);
5128
4541
  letter-spacing: 0;
5129
4542
  }