add full, and min func to a lot of components on radius

apps/theme/components/Previews/Components/Components.tsx

@@ -131,7 +131,7 @@ export const Components = () => {
             label='Label'
             placeholder='Søk etter bruker...'
             size='sm'
-            variant='simple'
+            variant='primary'
             className={classes.tableSearch}
           />
         </div>

apps/theme/components/ThemeToolbar/ThemeToolbar.tsx

@@ -26,7 +26,14 @@ type ThemeToolbarProps = {
   contrastMode: ContrastMode;
 };
 
-export const borderRadii = ['0', '0.25rem', '0.5rem', '0.75rem', '1rem'];
+export const borderRadii = {
+  '0 rem': '0',
+  '0.25 rem': '0.25rem',
+  '0.5 rem': '0.5rem',
+  '0.75 rem': '0.75rem',
+  '1 rem': '1rem',
+  full: '99999px',
+};
 
 export const ThemeToolbar = ({
   accentError,
@@ -110,13 +117,19 @@ export const ThemeToolbar = ({
             className={classes.borderRadiiSelect}
             value={borderRadius}
             onChange={(e) => onBorderRadiusChanged(e.target.value)}
+            style={{
+              textTransform: 'capitalize',
+            }}
           >
-            {borderRadii.map((radius) => (
+            {Object.entries(borderRadii).map(([key, value]) => (
               <option
-                key={radius}
-                value={radius}
+                key={key}
+                value={value}
+                style={{
+                  textTransform: 'capitalize',
+                }}
               >
-                {radius}
+                {key}
               </option>
             ))}
           </NativeSelect>

packages/css/accordion.css

@@ -1,6 +1,6 @@
 @layer ds.accordion {
   .ds-accordion {
-    --dsc-accordion-border-radius: var(--ds-border-radius-md);
+    --dsc-accordion-border-radius: min(1rem, var(--ds-border-radius-md));
     --dsc-accordion-border-color: var(--ds-color-neutral-border-subtle);
     --dsc-accordion-background: var(--ds-color-neutral-background-default);
     --dsc-accordion-button-background: var(--ds-color-neutral-background-default);

packages/css/card.css

@@ -11,7 +11,7 @@
     position: relative;
     overflow: hidden;
     color: var(--dsc-card-color);
-    border-radius: var(--ds-border-radius-md);
+    border-radius: min(1rem, var(--ds-border-radius-md));
     border: 1px solid var(--dsc-card-border-color);
     background: var(--dsc-card-backround);
   }

packages/css/combobox.css

@@ -16,6 +16,7 @@
     color: var(--ds-color-neutral-text-default);
     overflow-y: auto;
     z-index: 1600;
+    border-radius: min(1rem, var(--ds-border-radius-md));
   }
 
   .ds-combobox--readonly .ds-combobox__input {
@@ -111,7 +112,7 @@
     color: var(--ds-color-neutral-text-default);
     border: none;
     padding: 0;
-    border-radius: var(--ds-spacing-1);
+    border-radius: var(--ds-border-radius-sm);
     height: 29px;
     width: 29px;
     aspect-ratio: 1;
@@ -196,7 +197,7 @@
     padding-left: var(--ds-spacing-1);
     border: none;
     border-left: 5px solid transparent;
-    border-radius: var(--ds-border-radius-md);
+    border-radius: min(1rem, var(--ds-border-radius-md));
     justify-content: start;
     background: none;
     text-align: left;
@@ -237,7 +238,7 @@
     width: var(--ds-spacing-6);
     aspect-ratio: 1 / 1;
     border: 2px solid var(--ds-color-neutral-border-default);
-    border-radius: var(--ds-border-radius-md);
+    border-radius: min(0.25rem, var(--ds-border-radius-md));
     background-color: var(--ds-color-neutral-background-default);
     display: grid;
     place-items: center;

packages/css/link.css

@@ -54,7 +54,7 @@
   .ds-link:active {
     color: var(--dsc-link-color-active);
     background: var(--dsc-link-color-active-background);
-    border-radius: var(--ds-border-radius-md);
+    border-radius: min(0.25rem, var(--ds-border-radius-md));
     outline: none;
   }
 }

packages/css/table.css

@@ -1,7 +1,7 @@
 @layer ds.table {
   .ds-table {
     --dsc-table-padding: 0;
-    --dsc-table-border-radius: var(--ds-border-radius-md);
+    --dsc-table-border-radius: min(1rem, var(--ds-border-radius-md));
 
     position: relative;
     border-collapse: separate;

packages/css/tag.css

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

packages/css/textarea.css

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

packages/css/togglegroup.css

@@ -1,18 +1,22 @@
 @layer ds.togglegroup {
   .ds-togglegroup {
-    background-color: var(--ds-color-neutral-background-default);
-    border: var(--ds-color-neutral-border-default) solid var(--ds-border-width-default);
-    border-radius: var(--ds-border-radius-lg);
+    --dsc-togglegroup-padding: var(--ds-spacing-1);
+    --dsc-togglegroup-background: var(--ds-color-neutral-background-default);
+    --dsc-togglegroup-border-color: var(--ds-color-neutral-border-default);
+
+    background-color: var(--dsc-togglegroup-background);
+    border: var(--dsc-togglegroup-border-color) solid var(--ds-border-width-default);
+    border-radius: calc(var(--ds-border-radius-md) + var(--dsc-togglegroup-padding));
     width: fit-content;
     height: fit-content;
   }
 
   .ds-togglegroup__content {
     display: inline-grid;
-    gap: var(--ds-spacing-1);
+    gap: var(--dsc-togglegroup-padding);
     grid-auto-columns: 1fr;
     grid-auto-flow: column;
-    padding: var(--ds-spacing-1);
+    padding: var(--dsc-togglegroup-padding);
   }
 
   .ds-togglegroup__input {