From 663d736474239aef9b7fe142812598d507c35e99 Mon Sep 17 00:00:00 2001 From: Eirik Backer Date: Mon, 30 Sep 2024 10:08:59 +0200 Subject: [PATCH] fix: move box-sizing (#2530) Fixes #2498, but skipping form elements as they will be rewritten anyway --- packages/css/accordion.css | 1 + packages/css/alert.css | 1 + packages/css/avatar.css | 15 ++++++++------- packages/css/badge.css | 1 + packages/css/baseline/ds-reset.css | 8 +------- packages/css/divider.css | 3 ++- packages/css/dropdown.css | 10 ++++++---- packages/css/error-summary.css | 5 +++-- packages/css/helptext.css | 1 + packages/css/modal.css | 1 + packages/css/skiplink.css | 1 + packages/css/spinner.css | 11 +++++------ packages/css/table.css | 1 + packages/css/tabs.css | 15 ++++++--------- packages/css/tooltip.css | 5 +++-- 15 files changed, 41 insertions(+), 38 deletions(-) diff --git a/packages/css/accordion.css b/packages/css/accordion.css index fe97c74108..6e841dd46d 100644 --- a/packages/css/accordion.css +++ b/packages/css/accordion.css @@ -62,6 +62,7 @@ .ds-accordion__item { background: var(--dsc-accordion-background); border-block: var(--dsc-accordion-border); + box-sizing: border-box; & > :is(summary, u-summary) { background: var(--dsc-accordion-heading-background); diff --git a/packages/css/alert.css b/packages/css/alert.css index cff3deb6f5..095c0f2749 100644 --- a/packages/css/alert.css +++ b/packages/css/alert.css @@ -12,6 +12,7 @@ background: var(--dsc-alert-background); border-radius: var(--dsc-alert-border-radius); border: 1px solid var(--dsc-alert-border-color); + box-sizing: border-box; color: var(--dsc-alert-color); padding-block: var(--dsc-alert-padding); padding-inline: calc(var(--dsc-alert-padding) + var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) var(--dsc-alert-padding); diff --git a/packages/css/avatar.css b/packages/css/avatar.css index ccb94aca57..90e5ce779a 100644 --- a/packages/css/avatar.css +++ b/packages/css/avatar.css @@ -5,18 +5,19 @@ --dsc-avatar-padding: var(--ds-spacing-2); --dsc-avatar-border-radius: 50%; - background: var(--dsc-avatar-background); - height: var(--dsc-avatar-size); + align-items: center; aspect-ratio: 1 / 1; - color: var(--dsc-avatar-color); + background: var(--dsc-avatar-background); border-radius: var(--dsc-avatar-border-radius); - overflow: hidden; + box-sizing: border-box; + color: var(--dsc-avatar-color); display: inline-flex; + height: var(--dsc-avatar-size); justify-content: center; - align-items: center; - user-select: none; - text-transform: uppercase; + overflow: hidden; text-decoration: none; + text-transform: uppercase; + user-select: none; @composes ds-body-text--xs from './utilities.css'; diff --git a/packages/css/badge.css b/packages/css/badge.css index 8fdd24d9d0..3ad5c182ae 100644 --- a/packages/css/badge.css +++ b/packages/css/badge.css @@ -4,6 +4,7 @@ --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2)); --dsc-badge-size: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2)); + box-sizing: border-box; display: inline-flex; position: relative; diff --git a/packages/css/baseline/ds-reset.css b/packages/css/baseline/ds-reset.css index d37db7fc3e..38a93051ff 100644 --- a/packages/css/baseline/ds-reset.css +++ b/packages/css/baseline/ds-reset.css @@ -2,17 +2,11 @@ /* https://wiki.csswg.org/ideas/mistakes */ -[class^='ds-'], -[class^='ds-']::before, -[class^='ds-']::after { - box-sizing: border-box; -} - /* Inherit fonts for inputs and buttons */ input[class^='ds-'], -button[class^='ds-'], textarea[class^='ds-'], select[class^='ds-'] { + box-sizing: border-box; font-family: inherit; font-size: inherit; line-height: inherit; diff --git a/packages/css/divider.css b/packages/css/divider.css index 9cb926dd86..5f88642869 100644 --- a/packages/css/divider.css +++ b/packages/css/divider.css @@ -3,6 +3,7 @@ border-top: 1px solid var(--dsc-divider-color); border-width: 1px 0 0; - margin-block: .5em; + box-sizing: border-box; + margin-block: 0.5em; width: 100%; } diff --git a/packages/css/dropdown.css b/packages/css/dropdown.css index 8d0e895899..919c316471 100644 --- a/packages/css/dropdown.css +++ b/packages/css/dropdown.css @@ -4,13 +4,14 @@ --dsc-dropdown-item-padding: 0 var(--ds-spacing-4); --dsc-dropdown-header-padding: var(--ds-spacing-2) var(--ds-spacing-4); - padding: var(--dsc-dropdown-padding); - list-style: none; - border-radius: min(1rem, var(--ds-border-radius-md)); - box-shadow: var(--ds-shadow-md); background-color: var(--ds-color-neutral-background-default); + border-radius: min(1rem, var(--ds-border-radius-md)); border: 1px solid var(--ds-color-neutral-border-subtle); + box-shadow: var(--ds-shadow-md); + box-sizing: border-box; + list-style: none; min-width: var(--dsc-dropdown-min-width); + padding: var(--dsc-dropdown-padding); /* Remove popover arrow */ &::before { @@ -42,6 +43,7 @@ } & :is(a, button, [role='button']) { + box-sizing: border-box; justify-content: start; padding: var(--dsc-dropdown-item-padding); width: 100%; diff --git a/packages/css/error-summary.css b/packages/css/error-summary.css index 06a36b8ee9..6a417c89df 100644 --- a/packages/css/error-summary.css +++ b/packages/css/error-summary.css @@ -5,9 +5,10 @@ --dsc-errorsummary-link-color: var(--ds-color-neutral-text-default); --dsc-errorsummary-heading-color: var(--ds-color-danger-text-default); - padding: var(--dsc-errorsummary-padding); - border-radius: var(--dsc-errorsummary-border-radius); background-color: var(--dsc-errorsummary-background); + border-radius: var(--dsc-errorsummary-border-radius); + box-sizing: border-box; + padding: var(--dsc-errorsummary-padding); & :is(h1, h2, h3, h4, h5, h6) { color: var(--dsc-errorsummary-heading-color); diff --git a/packages/css/helptext.css b/packages/css/helptext.css index 604a3fe138..9fccccfe9b 100644 --- a/packages/css/helptext.css +++ b/packages/css/helptext.css @@ -7,6 +7,7 @@ border-radius: var(--ds-border-radius-full); border: 2px solid; + box-sizing: border-box; height: var(--dsc-helptext-size); min-height: 0; min-width: 0; diff --git a/packages/css/modal.css b/packages/css/modal.css index 34d1cd54ce..83c4773665 100644 --- a/packages/css/modal.css +++ b/packages/css/modal.css @@ -13,6 +13,7 @@ border-radius: min(1rem, var(--ds-border-radius-lg)); border: 0; box-shadow: var(--ds-shadow-xl); + box-sizing: border-box; color: var(--dsc-modal-color); max-height: var(--dsc-modal-max-height); max-width: var(--dsc-modal-max-width); diff --git a/packages/css/skiplink.css b/packages/css/skiplink.css index 3ba2955d41..85a3b1c6e5 100644 --- a/packages/css/skiplink.css +++ b/packages/css/skiplink.css @@ -14,6 +14,7 @@ padding: var(--ds-spacing-4); color: var(--ds-color-neutral-text-default); background: var(--ds-color-accent-surface-hover); + box-sizing: border-box; } .ds-skiplink__content { diff --git a/packages/css/spinner.css b/packages/css/spinner.css index 16712296fd..e7caad77af 100644 --- a/packages/css/spinner.css +++ b/packages/css/spinner.css @@ -4,10 +4,10 @@ --dsc-spinner-size: var(--ds-sizing-11); --dsc-spinner-animation-duration: 2s; - width: var(--dsc-spinner-size); + animation: ds-spinner-rotate-animation linear infinite var(--dsc-spinner-animation-duration); + box-sizing: border-box; height: var(--dsc-spinner-size); - animation: ds-spinner-rotate-animation linear infinite; - animation-duration: var(--dsc-spinner-animation-duration); + width: var(--dsc-spinner-size); &[data-color='accent'] { --dsc-spinner-stroke: var(--ds-color-accent-base-default); @@ -39,11 +39,10 @@ } .ds-spinner__circle { - stroke: var(--dsc-spinner-stroke); + animation: ds-spinner-stroke-animation ease-in-out infinite var(--dsc-spinner-animation-duration); stroke-dasharray: 1px, 200px; + stroke: var(--dsc-spinner-stroke); transform-origin: center; - animation: ds-spinner-stroke-animation ease-in-out infinite; - animation-duration: var(--dsc-spinner-animation-duration); } /* Prefers reduced motion needs longer animation, diff --git a/packages/css/table.css b/packages/css/table.css index 0da6b55ed8..ea1cbecf7d 100644 --- a/packages/css/table.css +++ b/packages/css/table.css @@ -15,6 +15,7 @@ border-collapse: separate; /* Using separate mode to enable border-radius */ border-radius: var(--dsc-table-border-radius); border-spacing: 0; + box-sizing: border-box; color: var(--dsc-table-color); width: 100%; diff --git a/packages/css/tabs.css b/packages/css/tabs.css index 5a2b9c24e3..3053b11e8f 100644 --- a/packages/css/tabs.css +++ b/packages/css/tabs.css @@ -36,21 +36,18 @@ } .ds-tabs__tab { + all: unset; /* Reset