Skip to content

Commit 02fb021

Browse files
mdomdo
committed
New border-radius tokens, --radius-*; update nav-overflow to work in more situations; fix disabled chip inputs; fix sizing of OTP and chip by removing it lol; fix vertical pills with new radius tokens
1 parent b193830 commit 02fb021

47 files changed

Lines changed: 194 additions & 270 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎js/src/nav-overflow.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -242,20 +242,25 @@ class NavOverflow extends BaseComponent {
242242

243243
const overflowWidth = overflowItem?.offsetWidth || 0
244244

245+
// Keep items are always visible; subtract their widths so the threshold
246+
// reflects actual available space for non-keep items.
247+
const keepWidth = this._items
248+
.filter(item => item.classList.contains(CLASS_NAME_KEEP))
249+
.reduce((sum, item) => sum + item.offsetWidth, 0)
250+
245251
let usedWidth = 0
246252
const itemsToOverflow = []
247-
const overflowThreshold = navWidth - overflowWidth - 10 // 10px buffer
253+
const overflowThreshold = navWidth - overflowWidth - keepWidth - 10 // 10px buffer
248254

249255
// Calculate which items need to overflow (skip items with keep class)
250256
for (const item of this._items) {
251-
const itemWidth = item.offsetWidth
252-
usedWidth += itemWidth
253-
254257
// Never overflow items with the keep class
255258
if (item.classList.contains(CLASS_NAME_KEEP)) {
256259
continue
257260
}
258261

262+
usedWidth += item.offsetWidth
263+
259264
if (usedWidth > overflowThreshold) {
260265
itemsToOverflow.push(item)
261266
}

‎scss/_accordion.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ $accordion-tokens: defaults(
1919
--accordion-transition: var(--accordion-transition-property) var(--accordion-timing),
2020
--accordion-border-color: var(--border-color),
2121
--accordion-border-width: var(--border-width),
22-
--accordion-border-radius: var(--accordion-radius, var(--border-radius-lg)),
22+
--accordion-border-radius: var(--accordion-radius, var(--radius-3)),
2323
--accordion-btn-color: var(--fg-2),
2424
--accordion-btn-bg: var(--bg-body),
2525
--accordion-btn-icon-width: 1rem,

‎scss/_alert.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ $alert-tokens: defaults(
1616
--alert-color: var(--theme-fg, inherit),
1717
--alert-border-color: var(--theme-border, var(--border-color)),
1818
--alert-border: var(--border-width) solid var(--alert-border-color),
19-
--alert-border-radius: var(--border-radius),
19+
--alert-border-radius: var(--radius-2),
2020
--alert-link-color: inherit,
2121
--hr-border-color: var(--theme-border, var(--border-color)),
2222
),

‎scss/_badge.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ $badge-tokens: defaults(
1616
--badge-bg: var(--bg-2),
1717
--badge-border-width: var(--border-width),
1818
--badge-border-color: transparent,
19-
--badge-border-radius: var(--border-radius-lg),
19+
--badge-border-radius: var(--radius-3),
2020
),
2121
$badge-tokens
2222
);

‎scss/_breadcrumb.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ $breadcrumb-tokens: defaults(
1212
--breadcrumb-margin-bottom: 1rem,
1313
--breadcrumb-font-size: inherit,
1414
--breadcrumb-bg: transparent,
15-
--breadcrumb-border-radius: var(--border-radius),
15+
--breadcrumb-border-radius: var(--radius-2),
1616
--breadcrumb-divider-color: var(--fg-4),
1717
--breadcrumb-link-padding-x: .75rem,
1818
--breadcrumb-link-padding-y: .25rem,
1919
--breadcrumb-link-color: var(--fg-3),
2020
--breadcrumb-link-hover-color: var(--fg-2),
2121
--breadcrumb-link-hover-bg: var(--bg-1),
2222
--breadcrumb-link-active-color: var(--fg-1),
23-
--breadcrumb-link-border-radius: var(--border-radius-lg),
23+
--breadcrumb-link-border-radius: var(--radius-3),
2424
),
2525
$breadcrumb-tokens
2626
);

‎scss/_card.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ $card-tokens: defaults(
1616
--card-subtitle-color: inherit,
1717
--card-border-width: var(--border-width),
1818
--card-border-color: var(--border-color-translucent),
19-
--card-border-radius: var(--border-radius-lg),
19+
--card-border-radius: var(--radius-3),
2020
--card-box-shadow: none,
21-
--card-inner-border-radius: calc(var(--border-radius-lg) - var(--border-width)),
21+
--card-inner-border-radius: calc(var(--radius-3) - var(--border-width)),
2222
--card-cap-padding-y: var(--spacer-3),
2323
--card-cap-padding-x: var(--spacer),
2424
--card-cap-bg: var(--bg-1),

‎scss/_chip.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ $chip-tokens: defaults(
1313
--chip-height: 1.75rem,
1414
--chip-padding-x: .625rem,
1515
--chip-gap: .3125rem,
16-
--chip-border-radius: var(--border-radius-pill),
16+
--chip-border-radius: var(--radius-pill),
1717
--chip-img-size: 1.25rem,
1818
--chip-icon-size: 1rem,
1919
--chip-dismiss-size: 1rem,

‎scss/_datepicker.scss‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ $datepicker-tokens: defaults(
1717
--datepicker-color: var(--fg-body),
1818
--datepicker-border-color: var(--border-color-translucent),
1919
--datepicker-border-width: var(--border-width),
20-
--datepicker-border-radius: var(--border-radius-lg),
20+
--datepicker-border-radius: var(--radius-3),
2121
--datepicker-box-shadow: var(--box-shadow),
2222
--datepicker-font-size: var(--font-size-sm),
2323
--datepicker-min-width: 280px,
@@ -107,7 +107,7 @@ $datepicker-tokens: defaults(
107107
cursor: pointer;
108108
background-color: transparent;
109109
border: 0;
110-
@include border-radius(var(--border-radius));
110+
@include border-radius(var(--radius-2));
111111

112112
&::before {
113113
position: absolute;
@@ -191,7 +191,7 @@ $datepicker-tokens: defaults(
191191
// cursor: pointer;
192192
background-color: transparent;
193193
border: 0;
194-
@include border-radius(var(--border-radius));
194+
@include border-radius(var(--radius-2));
195195

196196
&:disabled {
197197
color: var(--datepicker-day-disabled-color);
@@ -240,7 +240,7 @@ $datepicker-tokens: defaults(
240240
cursor: pointer;
241241
background-color: transparent;
242242
border: 0;
243-
@include border-radius(var(--border-radius));
243+
@include border-radius(var(--radius-2));
244244

245245
&:disabled {
246246
color: var(--datepicker-day-disabled-color);
@@ -338,7 +338,7 @@ $datepicker-tokens: defaults(
338338
cursor: pointer;
339339
background-color: transparent;
340340
border: 0;
341-
border-radius: var(--border-radius);
341+
border-radius: var(--radius-2);
342342

343343
&:hover {
344344
background-color: var(--datepicker-day-hover-bg);
@@ -370,17 +370,17 @@ $datepicker-tokens: defaults(
370370
}
371371

372372
[data-vc-date-hover="first"] [data-vc-date-btn] {
373-
border-start-start-radius: var(--border-radius);
374-
border-end-start-radius: var(--border-radius);
373+
border-start-start-radius: var(--radius-2);
374+
border-end-start-radius: var(--radius-2);
375375
}
376376

377377
[data-vc-date-hover="last"] [data-vc-date-btn] {
378-
border-start-end-radius: var(--border-radius);
379-
border-end-end-radius: var(--border-radius);
378+
border-start-end-radius: var(--radius-2);
379+
border-end-end-radius: var(--radius-2);
380380
}
381381

382382
[data-vc-date-hover="first-and-last"] [data-vc-date-btn] {
383-
border-radius: var(--border-radius);
383+
border-radius: var(--radius-2);
384384
}
385385

386386
[data-vc-date-selected="middle"] [data-vc-date-btn] {
@@ -396,20 +396,20 @@ $datepicker-tokens: defaults(
396396
}
397397

398398
[data-vc-date-selected="first"] [data-vc-date-btn] {
399-
border-top-left-radius: var(--border-radius);
399+
border-top-left-radius: var(--radius-2);
400400
border-top-right-radius: 0;
401401
border-bottom-right-radius: 0;
402-
border-bottom-left-radius: var(--border-radius);
402+
border-bottom-left-radius: var(--radius-2);
403403
}
404404

405405
[data-vc-date-selected="last"] [data-vc-date-btn] {
406406
border-top-left-radius: 0;
407-
border-top-right-radius: var(--border-radius);
408-
border-bottom-right-radius: var(--border-radius);
407+
border-top-right-radius: var(--radius-2);
408+
border-bottom-right-radius: var(--radius-2);
409409
border-bottom-left-radius: 0;
410410
}
411411

412412
[data-vc-date-selected="first-and-last"] [data-vc-date-btn] {
413-
border-radius: var(--border-radius);
413+
border-radius: var(--radius-2);
414414
}
415415
}

‎scss/_dialog.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ $dialog-tokens: defaults(
2626
--dialog-bg: var(--bg-body),
2727
--dialog-border-color: var(--border-color-translucent),
2828
--dialog-border-width: var(--border-width),
29-
--dialog-border-radius: var(--border-radius-lg),
29+
--dialog-border-radius: var(--radius-3),
3030
--dialog-box-shadow: var(--box-shadow-lg),
3131
--dialog-transition-duration: .3s,
3232
--dialog-transition-timing: cubic-bezier(.22, 1, .36, 1),

‎scss/_drawer.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ $drawer-tokens: defaults(
2424
--drawer-bg: var(--bg-body),
2525
--drawer-border-width: var(--border-width),
2626
--drawer-border-color: var(--border-color-translucent),
27-
--drawer-border-radius: var(--border-radius-lg),
27+
--drawer-border-radius: var(--radius-3),
2828
--drawer-box-shadow: var(--box-shadow-lg),
2929
--drawer-transition-duration: .3s,
3030
--drawer-transition-timing: cubic-bezier(.22, 1, .36, 1),

0 commit comments

Comments
 (0)