fix: move box-sizing (#2530)

Fixes #2498, but skipping form elements as they will be rewritten anyway

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);

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);

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';
 

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;
 

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;

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%;
 }

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%;

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);

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;

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);

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 {

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,

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%;
 

packages/css/tabs.css

@@ -36,21 +36,18 @@
 }
 
 .ds-tabs__tab {
+  all: unset; /* Reset <button> */
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--dsc-tabs-tab-color);
+  cursor: pointer;
   display: flex;
   flex-direction: row;
-  box-sizing: border-box;
   gap: var(--ds-spacing-1);
   justify-content: center;
-  text-align: center;
-  align-items: center;
   padding: var(--dsc-tabs-tab-padding);
-  border: none;
-  border-radius: 0;
-  background-color: transparent;
-  cursor: pointer;
-  color: var(--dsc-tabs-tab-color);
   position: relative;
-  font-family: inherit;
+  text-align: center;
 
   &[aria-selected='true'] {
     --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);

packages/css/tooltip.css

@@ -2,9 +2,10 @@
   --dsc-tooltip-background: var(--ds-color-neutral-text-default);
 
   background: var(--dsc-tooltip-background);
-  padding: var(--ds-spacing-1) var(--ds-spacing-2);
-  color: var(--ds-color-neutral-background-default);
   border-radius: var(--ds-border-radius-md);
+  box-sizing: border-box;
+  color: var(--ds-color-neutral-background-default);
+  padding: var(--ds-spacing-1) var(--ds-spacing-2);
 
   @composes ds-body-text--short-xs from './utilities.css';
 }