feat(css): update components to new border-radius tokens

package.json

@@ -43,14 +43,14 @@
     "@types/node": "^22.1.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/expect": "^2.0.5",
     "chromatic": "^11.11.0",
     "copyfiles": "^2.4.1",
     "storybook-addon-pseudo-states": "^4.0.2",
     "typescript": "^5.5.4",
     "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^5.3.6",
-    "vitest": "^2.0.5",
-    "@vitest/expect": "^2.0.5"
+    "vitest": "^2.0.5"
   },
   "engines": {
     "node": ">=18.12.0"

packages/css/accordion.css

@@ -1,6 +1,6 @@
 .ds-accordion-group {
   --dsc-accordion-background: var(--ds-color-neutral-background-default);
-  --dsc-accordion-border-radius: min(1rem, var(--ds-border-radius-md));
+  --dsc-accordion-border-radius: var(--ds-border-radius-md);
   --dsc-accordion-border: 1px solid var(--ds-color-neutral-border-subtle);
   --dsc-accordion-chevron-gap: var(--ds-spacing-2);
   --dsc-accordion-chevron-size: var(--ds-spacing-6);

packages/css/alert.css

@@ -1,7 +1,7 @@
 .ds-alert {
   --dsc-alert-background: var(--ds-color-info-surface-default);
   --dsc-alert-border-color: var(--ds-color-info-border-strong);
-  --dsc-alert-border-radius: min(1rem, var(--ds-border-radius-md));
+  --dsc-alert-border-radius: var(--ds-border-radius-md);
   --dsc-alert-color: var(--ds-color-neutral-text-default);
   --dsc-alert-gap: var(--ds-spacing-2);
   --dsc-alert-icon-color: var(--ds-color-info-text-subtle);

packages/css/avatar.css

@@ -3,7 +3,7 @@
   --dsc-avatar-color: var(--ds-color-accent-contrast-default);
   --dsc-avatar-size: var(--ds-sizing-12);
   --dsc-avatar-padding: var(--ds-spacing-2);
-  --dsc-avatar-border-radius: 50%;
+  --dsc-avatar-border-radius: var(--ds-border-radius-full);
 
   align-items: center;
   aspect-ratio: 1 / 1;

packages/css/button.css

@@ -14,7 +14,7 @@
 
   align-items: center;
   background: var(--dsc-button-background);
-  border-radius: var(--ds-border-radius-md);
+  border-radius: var(--ds-border-radius-default);
   border: var(--ds-border-width-default) solid var(--dsc-button-border-color, transparent);
   box-sizing: border-box;
   color: var(--dsc-button-color);

packages/css/card.css

@@ -11,7 +11,7 @@
   all: unset; /* Reset if <button> */
   display: block;
   background: var(--dsc-card-background);
-  border-radius: min(1rem, var(--ds-border-radius-md));
+  border-radius: var(--ds-border-radius-lg);
   border: var(--dsc-card-border);
   box-sizing: border-box;
   color: var(--dsc-card-color);

packages/css/checkbox.css

@@ -28,7 +28,7 @@
   cursor: pointer;
   box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
   background: var(--dsc-checkbox-background);
-  border-radius: min(0.25rem, var(--ds-border-radius-md));
+  border-radius: var(--ds-border-radius-sm);
 }
 
 .ds-checkbox__input::before {
@@ -41,7 +41,7 @@
   top: 50%;
   left: 50%;
   cursor: pointer;
-  border-radius: var(--ds-border-radius-md);
+  border-radius: var(--ds-border-radius-sm);
 }
 
 .ds-checkbox__label {
@@ -131,7 +131,7 @@
   outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
   outline-offset: var(--dsc-focus-border-width);
   box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
-  border-radius: var(--ds-border-radius-md);
+  border-radius: var(--ds-border-radius-sm);
 }
 
 .ds-checkbox--readonly > .ds-checkbox__input:checked {

packages/css/chip.css

@@ -38,7 +38,7 @@
   }
 
   &:has(input[type='checkbox']) {
-    --dsc-chip-border-radius: var(--ds-border-radius-lg);
+    --dsc-chip-border-radius: var(--ds-border-radius-md);
     --dsc-chip-padding: 0 var(--ds-spacing-2) 0 var(--ds-spacing-3);
   }
 
@@ -75,7 +75,6 @@
 
     appearance: none;
     background: none;
-    border-radius: calc(var(--dsc-chip-border-radius) - (var(--gap) / 2)); /* Use same radius as  */
     border: 2px solid;
     box-sizing: border-box;
     color: var(--dsc-chip-input-color);
@@ -84,10 +83,18 @@
     outline: none;
     width: var(--dsc-chip-input-size);
 
+    &[type='radio'] {
+      border-radius: 50%;
+    }
+
     &[type='radio']:checked {
       border-width: calc(var(--dsc-chip-input-size) / 3.5); /* Matches Figma */
     }
 
+    &[type='checkbox'] {
+      border-radius: var(--ds-border-radius-sm);
+    }
+
     &[type='checkbox']:checked {
       background: currentcolor;
       mask: center / cover no-repeat

packages/css/combobox.css

@@ -15,7 +15,7 @@
   color: var(--ds-color-neutral-text-default);
   overflow-y: auto;
   z-index: 1600;
-  border-radius: min(1rem, var(--ds-border-radius-md));
+  border-radius: var(--ds-border-radius-default);
   box-shadow: var(--ds-shadow-md);
   border: 1px solid var(--ds-color-neutral-border-default);
 }
@@ -31,7 +31,7 @@
   gap: var(--ds-spacing-1);
   cursor: text;
   padding: var(--ds-spacing-2);
-  border-radius: min(1rem, var(--ds-border-radius-md));
+  border-radius: var(--ds-border-radius-default);
   width: 100%;
   height: auto;
   justify-content: space-between;
@@ -200,7 +200,7 @@
   padding-left: var(--ds-spacing-1);
   border: none;
   border-left: 5px solid transparent;
-  border-radius: min(1rem, var(--ds-border-radius-md));
+  border-radius: var(--ds-border-radius-sm);
   justify-content: start;
   background: none;
   text-align: left;
@@ -242,7 +242,7 @@
   width: var(--ds-spacing-6);
   aspect-ratio: 1 / 1;
   border: 2px solid var(--ds-color-neutral-border-default);
-  border-radius: min(0.25rem, var(--ds-border-radius-md));
+  border-radius: var(--ds-border-radius-sm);
   background-color: var(--ds-color-neutral-background-default);
   display: grid;
   place-items: center;

packages/css/dropdown.css

@@ -5,7 +5,7 @@
   --dsc-dropdown-header-padding: var(--ds-spacing-2) var(--ds-spacing-4);
 
   background-color: var(--ds-color-neutral-background-default);
-  border-radius: min(1rem, var(--ds-border-radius-md));
+  border-radius: var(--ds-border-radius-md);
   border: 1px solid var(--ds-color-neutral-border-subtle);
   box-shadow: var(--ds-shadow-md);
   box-sizing: border-box;

packages/css/error-summary.css

@@ -1,6 +1,6 @@
 .ds-error-summary {
   --dsc-errorsummary-background: var(--ds-color-danger-surface-default);
-  --dsc-errorsummary-border-radius: min(1rem, var(--ds-border-radius-lg));
+  --dsc-errorsummary-border-radius: var(--ds-border-radius-lg);
   --dsc-errorsummary-padding: var(--ds-spacing-6) var(--ds-spacing-8);
   --dsc-errorsummary-link-color: var(--ds-color-neutral-text-default);
   --dsc-errorsummary-heading-color: var(--ds-color-danger-text-default);

packages/css/modal.css

@@ -10,7 +10,7 @@
   --close-top-right: calc(var(--dsc-modal-padding) * -1 + var(--dsc-modal-close-margin));
 
   background: var(--dsc-modal-background);
-  border-radius: min(1rem, var(--ds-border-radius-lg));
+  border-radius: var(--ds-border-radius-lg);
   border: 0;
   box-shadow: var(--ds-shadow-xl);
   box-sizing: border-box;

packages/css/popover.css

@@ -1,7 +1,7 @@
 .ds-popover {
   --dsc-popover-arrow-size: var(--ds-spacing-2);
   --dsc-popover-background: var(--ds-color-neutral-background-default);
-  --dsc-popover-border-radius: min(1rem, var(--ds-border-radius-md));
+  --dsc-popover-border-radius: var(--ds-border-radius-md);
   --dsc-popover-border: 1px solid var(--ds-color-neutral-border-default);
   --dsc-popover-color: var(--ds-color-neutral-text-default);
   --dsc-popover-max-width: 300px;

packages/css/search.css

@@ -34,7 +34,7 @@
   display: flex;
   width: 100%;
   align-items: stretch;
-  border-radius: var(--ds-border-radius-md);
+  border-radius: var(--ds-border-radius-default);
   position: relative;
 }
 
@@ -56,7 +56,7 @@
   background: var(--dsc-search-input-background);
   color: var(--dsc-search-input-color);
   border: var(--dsc-search-input-border);
-  border-radius: var(--ds-border-radius-md);
+  border-radius: var(--ds-border-radius-default);
   font-family: inherit;
   position: relative;
   box-sizing: border-box;
@@ -111,7 +111,7 @@
   cursor: pointer;
   height: var(--dsc-search-clear-button-size);
   width: var(--dsc-search-clear-button-size);
-  border-radius: var(--ds-border-radius-md);
+  border-radius: var(--ds-border-radius-default);
   font-size: 1.25rem;
   padding: 0;
   z-index: 2;

packages/css/skeleton.css

@@ -4,7 +4,7 @@
   --dsc-skeleton-background: var(--ds-color-neutral-surface-default);
 
   animation: var(--dsc-skeleton-animation);
-  border-radius: min(1rem, var(--ds-border-radius-lg));
+  border-radius: var(--ds-border-radius-lg);
   box-sizing: border-box;
   display: block;
   height: 1.3em;

packages/css/table.css

@@ -129,7 +129,7 @@
    * Configurations
    */
   &[data-border] {
-    --dsc-table-border-radius: min(1rem, var(--ds-border-radius-md));
+    --dsc-table-border-radius: var(--ds-border-radius-md);
 
     border: var(--dsc-table-border);
 

packages/css/tag.css

@@ -6,7 +6,7 @@
 
   align-items: center;
   background: var(--dsc-tag-background);
-  border-radius: min(1rem, var(--ds-border-radius-sm));
+  border-radius: var(--ds-border-radius-sm);
   box-sizing: border-box;
   color: var(--dsc-tag-color);
   display: flex;

packages/css/textarea.css

@@ -35,7 +35,7 @@
   appearance: none;
   padding: var(--ds-spacing-3);
   border: solid 1px var(--ds-color-neutral-border-default);
-  border-radius: min(1rem, var(--ds-border-radius-md));
+  border-radius: var(--ds-border-radius-md);
   resize: vertical;
   background: var(--ds-color-neutral-background-default);
   color: var(--ds-color-neutral-text-default);

packages/css/tooltip.css

@@ -2,7 +2,7 @@
   --dsc-tooltip-background: var(--ds-color-neutral-text-default);
 
   background: var(--dsc-tooltip-background);
-  border-radius: var(--ds-border-radius-md);
+  border-radius: var(--ds-border-radius-default);
   box-sizing: border-box;
   color: var(--ds-color-neutral-background-default);
   padding: var(--ds-spacing-1) var(--ds-spacing-2);