From 7fc03695295f12ee38ea1be69797dc1d32f829b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Thu, 4 Dec 2025 14:40:14 +0100
Subject: [PATCH 1/9] Border radius updates

---
 packages/uui-avatar/lib/uui-avatar.element.ts |  2 -
 packages/uui-button/lib/uui-button.element.ts |  2 +-
 .../lib/uui-color-area.element.ts             |  5 ++
 .../lib/uui-color-picker.element.ts           | 56 ++++++++++---------
 .../lib/uui-color-slider.element.ts           |  2 +-
 .../lib/uui-color-swatch.element.ts           |  5 +-
 .../uui-combobox/lib/uui-combobox.element.ts  |  2 +-
 .../uui-css/lib/custom-properties/sizes.css   |  5 +-
 packages/uui-dialog/lib/uui-dialog.element.ts |  2 +-
 .../lib/uui-input-lock.story.ts               |  1 +
 packages/uui-input/lib/uui-input.element.ts   |  4 +-
 .../lib/uui-key.element.ts                    |  2 +-
 .../lib/uui-loader-bar.element.ts             |  3 +-
 .../lib/uui-menu-item.element.ts              |  5 +-
 .../uui-modal/lib/uui-modal-dialog.element.ts |  2 +-
 ...pover-container-shadowdomtester.element.ts |  2 +-
 .../lib/uui-popover-container.story.ts        | 38 ++++---------
 packages/uui-popover/lib/uui-popover.story.ts | 35 +++---------
 .../lib/uui-table-advanced-example.ts         |  2 +-
 .../uui-tabs/lib/uui-tab-group.element.ts     |  2 +-
 packages/uui-tag/lib/uui-tag.element.ts       |  1 -
 .../lib/uui-toast-notification.element.ts     |  2 +-
 22 files changed, 82 insertions(+), 98 deletions(-)

diff --git a/packages/uui-avatar/lib/uui-avatar.element.ts b/packages/uui-avatar/lib/uui-avatar.element.ts
index 12c6052b4..845a225f9 100644
--- a/packages/uui-avatar/lib/uui-avatar.element.ts
+++ b/packages/uui-avatar/lib/uui-avatar.element.ts
@@ -120,8 +120,6 @@ export class UUIAvatarElement extends LitElement {
         user-select: none;
         /* box-sizing: border-box; */
         aspect-ratio: 1;
-        background-color: var(--uui-palette-spanish-pink);
-        color: var(--uui-palette-space-cadet);
       }
 
       :host([overflow]) {
diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts
index bbe81c6bd..32d11d5f8 100644
--- a/packages/uui-button/lib/uui-button.element.ts
+++ b/packages/uui-button/lib/uui-button.element.ts
@@ -355,7 +355,7 @@ export class UUIButtonElement extends UUIFormControlMixin(
         border-style: solid;
         border-radius: var(
           --uui-button-border-radius,
-          var(--uui-border-radius)
+          var(--uui-border-radius-2)
         );
         cursor: pointer;
 
diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts
index 5aca65a0c..078d3bb58 100644
--- a/packages/uui-color-area/lib/uui-color-area.element.ts
+++ b/packages/uui-color-area/lib/uui-color-area.element.ts
@@ -14,6 +14,7 @@ import { UUIColorAreaEvent } from './UUIColorAreaEvent';
 /**
  * @element uui-color-area
  * @cssprop --uui-color-area-grid-handle-size - The size of the handle in the grid
+ * @cssprop --uui-color-area-border-radius - The border radius of the color area
  */
 @defineElement('uui-color-area')
 export class UUIColorAreaElement extends LitElement {
@@ -308,6 +309,10 @@ export class UUIColorAreaElement extends LitElement {
         box-sizing: border-box;
         cursor: crosshair;
         forced-color-adjust: none;
+        border-radius: var(
+          --uui-color-area-border-radius,
+          var(--uui-border-radius)
+        );
       }
       .color-area__handle {
         position: absolute;
diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts
index 4ad0962c7..0d568694a 100644
--- a/packages/uui-color-picker/lib/uui-color-picker.element.ts
+++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts
@@ -500,30 +500,30 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
             ?readonly=${this.readonly}
             @keydown=${this.handleInputKeyDown}
             @change=${this.handleInputChange}>
+            <uui-button-group slot="append">
+              ${!this.noFormatToggle
+                ? html`<uui-button
+                    label="Toggle color format"
+                    @click=${this.handleFormatToggle}
+                    class="color-picker__toggle-format"
+                    ?disabled=${this.disabled}
+                    compact>
+                    <span>${this.format}</span>
+                  </uui-button>`
+                : ''}
+              ${hasEyeDropper
+                ? html`<uui-button
+                    label="Select a color"
+                    ?disabled=${this.disabled || this.readonly}
+                    @click=${this.handleEyeDropper}
+                    compact>
+                    <uui-icon-registry-essential>
+                      <uui-icon name="colorpicker"></uui-icon>
+                    </uui-icon-registry-essential>
+                  </uui-button>`
+                : ''}
+            </uui-button-group>
           </uui-input>
-          <uui-button-group>
-            ${!this.noFormatToggle
-              ? html`<uui-button
-                  label="Toggle color format"
-                  @click=${this.handleFormatToggle}
-                  class="color-picker__toggle-format"
-                  ?disabled=${this.disabled}
-                  compact>
-                  <span>${this.format}</span>
-                </uui-button>`
-              : ''}
-            ${hasEyeDropper
-              ? html`<uui-button
-                  label="Select a color"
-                  ?disabled=${this.disabled || this.readonly}
-                  @click=${this.handleEyeDropper}
-                  compact>
-                  <uui-icon-registry-essential>
-                    <uui-icon name="colorpicker"></uui-icon>
-                  </uui-icon-registry-essential>
-                </uui-button>`
-              : ''}
-          </uui-button-group>
         </div>
         ${this._renderSwatches()}
       </div>
@@ -584,6 +584,8 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
       :host {
         --uui-look-outline-border: #ddd;
         --uui-look-outline-border-hover: #aaa;
+        --uui-color-area-border-radius: var(--uui-border-radius-2)
+          var(--uui-border-radius-2) 0 0;
         font-size: 0.8rem;
         color: var(--uui-color-text);
         display: block;
@@ -600,15 +602,15 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
         background-color: var(--uui-color-surface);
         user-select: none;
         border: solid 1px var(--uui-color-border);
+        border-radius: var(--uui-border-radius-2);
       }
       .color-picker__user-input {
         display: flex;
         padding: 0 0.75rem 0.75rem 0.75rem;
       }
       .color-picker__user-input uui-button {
-        border: var(--uui-input-border-width, 1px) solid
+        border-left: var(--uui-input-border-width, 1px) solid
           var(--uui-input-border-color, var(--uui-color-border));
-        border-left: none;
       }
       .color-picker__preview,
       .color-picker__trigger {
@@ -720,6 +722,10 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
         flex: 1;
       }
 
+      uui-button-group {
+        height: 100%;
+      }
+
       button.color-picker__trigger:focus-visible {
         outline: 2px solid var(--uui-color-focus);
       }
diff --git a/packages/uui-color-slider/lib/uui-color-slider.element.ts b/packages/uui-color-slider/lib/uui-color-slider.element.ts
index e2bba8657..e11895f62 100644
--- a/packages/uui-color-slider/lib/uui-color-slider.element.ts
+++ b/packages/uui-color-slider/lib/uui-color-slider.element.ts
@@ -357,7 +357,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
         background-image: var(--uui-slider-background-image);
         background-size: var(--uui-slider-background-size);
         background-position: var(--uui-slider-background-position);
-        border-radius: 3px;
+        border-radius: var(--uui-border-radius);
         box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
         width: 100%;
         height: var(--uui-slider-height);
diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
index f14668652..6e6c76bb4 100644
--- a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
+++ b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
@@ -201,7 +201,7 @@ export class UUIColorSwatchElement extends LabelMixin(
         padding: 0;
         margin: 0;
         text-align: left;
-        border-radius: 3px;
+        border-radius: var(--uui-size-4);
       }
 
       :host(:not([selectable])) #swatch:focus {
@@ -238,7 +238,7 @@ export class UUIColorSwatchElement extends LabelMixin(
         position: relative;
         width: var(--uui-swatch-size, 25px);
         height: var(--uui-swatch-size, 25px);
-        border-radius: 3px;
+        border-radius: inherit;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -284,6 +284,7 @@ export class UUIColorSwatchElement extends LabelMixin(
         filter: invert(1) grayscale(1) contrast(9);
         pointer-events: none;
         opacity: 0;
+        border-radius: inherit;
       }
 
       :host([selected]) .color-swatch__check {
diff --git a/packages/uui-combobox/lib/uui-combobox.element.ts b/packages/uui-combobox/lib/uui-combobox.element.ts
index d923d5388..bfa1863dd 100644
--- a/packages/uui-combobox/lib/uui-combobox.element.ts
+++ b/packages/uui-combobox/lib/uui-combobox.element.ts
@@ -417,7 +417,7 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
 
       #combobox-input {
         width: 100%;
-        border-radius: var(--uui-size-1);
+        border-radius: var(--uui-border-radius);
       }
 
       #combobox-popover {
diff --git a/packages/uui-css/lib/custom-properties/sizes.css b/packages/uui-css/lib/custom-properties/sizes.css
index 7ced79b44..ed7ca1f99 100644
--- a/packages/uui-css/lib/custom-properties/sizes.css
+++ b/packages/uui-css/lib/custom-properties/sizes.css
@@ -50,7 +50,10 @@
   --uui-size-layout-6: 138px; /*--uui-size-46*/
 
   /** Other size props: */
-  --uui-border-radius: var(--uui-size-1);
+  --uui-border-radius: var(--uui-size-2);
+  --uui-border-radius-1: var(--uui-size-2);
+  --uui-border-radius-2: var(--uui-size-4);
+  --uui-border-radius-3: var(--uui-size-6);
 
   /** Typography */
   --uui-type-default-size: 14px;
diff --git a/packages/uui-dialog/lib/uui-dialog.element.ts b/packages/uui-dialog/lib/uui-dialog.element.ts
index 9fe273502..4b14f6583 100644
--- a/packages/uui-dialog/lib/uui-dialog.element.ts
+++ b/packages/uui-dialog/lib/uui-dialog.element.ts
@@ -28,7 +28,7 @@ export class UUIDialogElement extends LitElement {
         box-shadow: var(--uui-shadow-depth-5);
         border-radius: var(
           --uui-dialog-border-radius,
-          calc(var(--uui-border-radius) * 2)
+          var(--uui-border-radius-3)
         );
       }
     `,
diff --git a/packages/uui-input-lock/lib/uui-input-lock.story.ts b/packages/uui-input-lock/lib/uui-input-lock.story.ts
index 02ec1cf8b..6dce5ec6f 100644
--- a/packages/uui-input-lock/lib/uui-input-lock.story.ts
+++ b/packages/uui-input-lock/lib/uui-input-lock.story.ts
@@ -3,6 +3,7 @@ import readme from '../README.md?raw';
 import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
+import '@umbraco-ui/uui-button/lib/';
 
 /**
  * uui-input-lock extends uui-input. See [uui-input](/docs/uui-input--docs) for more details.
diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts
index c0e9ad7a4..9beb5e895 100644
--- a/packages/uui-input/lib/uui-input.element.ts
+++ b/packages/uui-input/lib/uui-input.element.ts
@@ -53,6 +53,7 @@ export type InputMode =
  * @cssprop --uui-input-background-color-disabled - Background color when disabled
  * @cssprop --uui-input-background-color-readonly - Background color when readonly
  * @cssprop --uui-input-border-width - Border width
+ * @cssprop --uui-input-border-radius - Border radius
  * @cssprop --uui-input-border-color - Border color
  * @cssprop --uui-input-border-color-hover - Border color on hover
  * @cssprop --uui-input-border-color-focus - Border color on focus
@@ -389,9 +390,10 @@ export class UUIInputElement extends UUIFormControlMixin(
         );
         border: var(--uui-input-border-width, 1px) solid
           var(--uui-input-border-color, var(--uui-color-border));
-        border-radius: var(--uui-border-radius);
+        border-radius: var(--uui-input-border-radius, var(--uui-border-radius));
 
         --uui-button-height: 100%;
+        --uui-button-border-radius: var(--uui-border-radius);
         --auto-width-text-margin-right: 0;
         --auto-width-text-margin-left: 0;
       }
diff --git a/packages/uui-keyboard-shortcut/lib/uui-key.element.ts b/packages/uui-keyboard-shortcut/lib/uui-key.element.ts
index deaab3384..2b315cda7 100644
--- a/packages/uui-keyboard-shortcut/lib/uui-key.element.ts
+++ b/packages/uui-keyboard-shortcut/lib/uui-key.element.ts
@@ -20,7 +20,7 @@ export class UUIKeyElement extends LitElement {
         font-family: inherit;
         font-size: var(--uui-type-small-size);
         color: var(--uui-color-text);
-        border-radius: 5px;
+        border-radius: var(--uui-border-radius);
         margin: 0px 5px;
         padding: 5px 7px;
         box-sizing: border-box;
diff --git a/packages/uui-loader-bar/lib/uui-loader-bar.element.ts b/packages/uui-loader-bar/lib/uui-loader-bar.element.ts
index 09e1bfa10..de1de3ceb 100644
--- a/packages/uui-loader-bar/lib/uui-loader-bar.element.ts
+++ b/packages/uui-loader-bar/lib/uui-loader-bar.element.ts
@@ -67,7 +67,8 @@ export class UUILoaderBarElement extends LitElement {
         position: relative;
         display: block;
         width: 100%;
-        height: 4px;
+        height: 2px;
+        border-radius: 1px;
         overflow: hidden;
         color: var(--uui-color-default);
       }
diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts
index 9babed37f..68ee9fff1 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.element.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts
@@ -537,7 +537,10 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         left: 0;
         right: 0;
         bottom: 0;
-        border-radius: var(--uui-menu-item-border-radius, 0px);
+        border-radius: var(
+          --uui-menu-item-border-radius,
+          var(--uui-border-radius)
+        );
       }
 
       #actions-container {
diff --git a/packages/uui-modal/lib/uui-modal-dialog.element.ts b/packages/uui-modal/lib/uui-modal-dialog.element.ts
index 4b85c0431..204f127b9 100644
--- a/packages/uui-modal/lib/uui-modal-dialog.element.ts
+++ b/packages/uui-modal/lib/uui-modal-dialog.element.ts
@@ -25,7 +25,7 @@ export class UUIModalDialogElement extends UUIModalElement {
         max-height: 100%;
         border-radius: var(
           --uui-modal-dialog-border-radius,
-          calc(var(--uui-border-radius) * 4)
+          var(--uui-border-radius-3)
         );
         background: var(
           --uui-modal-dialog-background,
diff --git a/packages/uui-popover-container/lib/uui-popover-container-shadowdomtester.element.ts b/packages/uui-popover-container/lib/uui-popover-container-shadowdomtester.element.ts
index 5284c88c5..53989e591 100644
--- a/packages/uui-popover-container/lib/uui-popover-container-shadowdomtester.element.ts
+++ b/packages/uui-popover-container/lib/uui-popover-container-shadowdomtester.element.ts
@@ -27,7 +27,7 @@ export class UUIPopoverContainerShadowDomTesterElement extends LitElement {
       </div>
       <uui-popover-container id="popover-container" popover>
         <div
-          style="width: 100%; background-color: var(--uui-color-surface); max-width: 200px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-4); border-radius: var(--uui-border-radius); font-size: 0.9rem;">
+          style="width: 100%; background-color: var(--uui-color-surface); max-width: 200px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-4); border-radius: var(--uui-border-radius-3); font-size: 0.9rem;">
           <h3>Scroll!</h3>
           Scrolling in any of the 2 boxes that are in a shadow-dom inside 2
           boxes should trigger an update
diff --git a/packages/uui-popover-container/lib/uui-popover-container.story.ts b/packages/uui-popover-container/lib/uui-popover-container.story.ts
index 6f85210bc..464215b3f 100644
--- a/packages/uui-popover-container/lib/uui-popover-container.story.ts
+++ b/packages/uui-popover-container/lib/uui-popover-container.story.ts
@@ -10,9 +10,7 @@ const meta: Meta<UUIPopoverContainerElement> = {
   component: 'uui-popover-container',
   title: 'Displays/Popover Container',
   argTypes: {
-    open: {
-      control: false,
-    },
+    open: { control: false },
     placement: {
       options: [
         'auto',
@@ -31,11 +29,7 @@ const meta: Meta<UUIPopoverContainerElement> = {
       ],
     },
   },
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -50,10 +44,7 @@ export const Overview: Story = {
       inline: 'center',
     });
   },
-  args: {
-    placement: 'bottom-start',
-    margin: 0,
-  },
+  args: { placement: 'bottom-start', margin: 0 },
   render: args => html`
     <uui-button
       id="popover-button"
@@ -69,7 +60,7 @@ export const Overview: Story = {
       placement=${args.placement}
       margin=${args.margin}>
       <div
-        style="background-color: var(--uui-color-surface); max-width: 400px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-6); border-radius: var(--uui-border-radius);">
+        style="background-color: var(--uui-color-surface); max-width: 400px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-6); border-radius: var(--uui-border-radius-3);">
         <h3>This is my popover</h3>
         <p>
           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatem,
@@ -90,7 +81,7 @@ export const Overview: Story = {
           placement=${args.placement}
           margin=${args.margin}>
           <div
-            style="background-color: var(--uui-color-surface); max-width: 400px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-6); border-radius: var(--uui-border-radius);">
+            style="background-color: var(--uui-color-surface); max-width: 400px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-6); border-radius: var(--uui-border-radius-3);">
             <h3>This is my second popover</h3>
             <p style="margin-bottom: 0;">
               Lorem ipsum dolor, sit amet consectetur adipisicing elit.
@@ -115,10 +106,7 @@ export const Tooltip: Story = {
     tooltipElement?.addEventListener('mouseenter', () => popover.showPopover());
     tooltipElement?.addEventListener('mouseleave', () => popover.hidePopover());
   },
-  args: {
-    placement: 'bottom-start',
-    margin: 0,
-  },
+  args: { placement: 'bottom-start', margin: 0 },
   render: args => html`
     Sometimes words such as
     <b id="tooltip-toggle" popovertarget="tooltip-popover">petrichor</b> needs
@@ -129,7 +117,7 @@ export const Tooltip: Story = {
       placement=${args.placement}
       margin=${args.margin}>
       <div
-        style="background-color: var(--uui-color-surface); max-width: 150px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-4); border-radius: var(--uui-border-radius); font-size: 0.9rem;">
+        style="background-color: var(--uui-color-surface); max-width: 150px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-4); border-radius: var(--uui-border-radius-3); font-size: 0.9rem;">
         A pleasant smell that frequently accompanies the first rain after a long
         period of warm, dry weather.
       </div>
@@ -138,10 +126,7 @@ export const Tooltip: Story = {
 };
 
 export const InsideScrollContainer: Story = {
-  args: {
-    placement: 'bottom-start',
-    margin: 0,
-  },
+  args: { placement: 'bottom-start', margin: 0 },
   render: args => html`
     <div style="height: 500px; overflow: auto; outline: 1px solid black">
       <div
@@ -165,7 +150,7 @@ export const InsideScrollContainer: Story = {
       placement=${args.placement}
       margin=${args.margin}>
       <div
-        style="width: 100%; background-color: var(--uui-color-surface); max-width: 200px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-4); border-radius: var(--uui-border-radius); font-size: 0.9rem;">
+        style="width: 100%; background-color: var(--uui-color-surface); max-width: 200px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-4); border-radius: var(--uui-border-radius-3); font-size: 0.9rem;">
         <h3>Scroll!</h3>
         Scrolling in any of the 2 boxes should trigger an update
       </div>
@@ -174,10 +159,7 @@ export const InsideScrollContainer: Story = {
 };
 
 export const InsideShadowDOMScrollContainer: Story = {
-  args: {
-    placement: 'bottom-start',
-    margin: 0,
-  },
+  args: { placement: 'bottom-start', margin: 0 },
   render: () => html`
     <div style="height: 500px; overflow: auto; outline: 1px solid black">
       <div
diff --git a/packages/uui-popover/lib/uui-popover.story.ts b/packages/uui-popover/lib/uui-popover.story.ts
index 18f0d61b0..62f326255 100644
--- a/packages/uui-popover/lib/uui-popover.story.ts
+++ b/packages/uui-popover/lib/uui-popover.story.ts
@@ -30,10 +30,7 @@ export default {
       control: { type: 'select' },
     },
   },
-  args: {
-    placement: 'bottom',
-    margin: 8,
-  },
+  args: { placement: 'bottom', margin: 8 },
   parameters: {
     readme: { markdown: readme },
     docs: {
@@ -110,7 +107,7 @@ export const AAAOverview: StoryFn = props => {
           </uui-button>
           <div
             slot="popover"
-            style="display: flex; flex-direction: column; padding: 1rem; border-radius: 3px; width: 200px; background: white; box-shadow: var(--uui-shadow-depth-3)">
+            style="display: flex; flex-direction: column; padding: 1rem; border-radius: var(--uui-border-radius-3); width: 200px; background: white; box-shadow: var(--uui-shadow-depth-3)">
             <h3
               style="text-align: center; line-height: normal; margin-bottom: 0;">
               Popover
@@ -250,14 +247,8 @@ export const Nested: StoryFn = props => {
 };
 
 Nested.parameters = {
-  controls: {
-    include: ['placement', 'margin'],
-  },
-  docs: {
-    source: {
-      code: `See story code as example`,
-    },
-  },
+  controls: { include: ['placement', 'margin'] },
+  docs: { source: { code: `See story code as example` } },
 };
 
 export const Tooltip: StoryFn = props => {
@@ -296,7 +287,7 @@ export const Tooltip: StoryFn = props => {
               </b>
               <div
                 slot="popover"
-                style="position: relative; z-index: 1; padding: 1rem; border: 1px solid; border-radius: 4px; background: white; box-shadow: var(--uui-shadow-depth-3); white-space: nowrap">
+                style="position: relative; z-index: 1; padding: 1rem; border: 1px solid; border-radius: var(--uui-border-radius-3); background: white; box-shadow: var(--uui-shadow-depth-3); white-space: nowrap">
                 I am a tooltip!
               </div>
             </uui-popover>
@@ -318,7 +309,7 @@ export const Tooltip: StoryFn = props => {
               </b>
               <div
                 slot="popover"
-                style="z-index: 1; padding: 1rem; border: 1px solid; border-radius: 4px; background: white; box-shadow: var(--uui-shadow-depth-3); width: 200px">
+                style="z-index: 1; padding: 1rem; border: 1px solid; border-radius: var(--uui-border-radius-3); background: white; box-shadow: var(--uui-shadow-depth-3); width: 200px">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo
                 nulla repellat reprehenderit? Explicabo autem dicta neque
                 voluptatem velit? Labore dicta perferendis laudantium ad unde
@@ -334,19 +325,11 @@ export const Tooltip: StoryFn = props => {
   `;
 };
 
-Tooltip.args = {
-  placement: 'auto',
-};
+Tooltip.args = { placement: 'auto' };
 
 Tooltip.parameters = {
-  controls: {
-    include: ['placement', 'margin'],
-  },
-  docs: {
-    source: {
-      code: `See story code as example`,
-    },
-  },
+  controls: { include: ['placement', 'margin'] },
+  docs: { source: { code: `See story code as example` } },
 };
 
 Tooltip.play = () => {
diff --git a/packages/uui-table/lib/uui-table-advanced-example.ts b/packages/uui-table/lib/uui-table-advanced-example.ts
index 085078a9b..44bfe2394 100644
--- a/packages/uui-table/lib/uui-table-advanced-example.ts
+++ b/packages/uui-table/lib/uui-table-advanced-example.ts
@@ -209,7 +209,7 @@ export class UUITableWithSelectionExampleElement extends LitElement {
         <div style="display: flex; align-items: center;">
           <uui-avatar name="${item.name}" style="margin-right: 10px;">
           </uui-avatar>
-          <a style="font-weight: bold;" href="http://">${item.name}</a>
+          <a href="http://">${item.name}</a>
         </div>
       </uui-table-cell>
       <uui-table-cell>
diff --git a/packages/uui-tabs/lib/uui-tab-group.element.ts b/packages/uui-tabs/lib/uui-tab-group.element.ts
index b66462f99..a673a9f39 100644
--- a/packages/uui-tabs/lib/uui-tab-group.element.ts
+++ b/packages/uui-tabs/lib/uui-tab-group.element.ts
@@ -369,7 +369,7 @@ export class UUITabGroupElement extends LitElement {
         width: 100%;
         background-color: var(--uui-color-current);
         height: 0px;
-        border-radius: 3px 3px 0 0;
+        border-radius: var(--uui-border-radius) var(--uui-border-radius) 0 0;
         opacity: 0;
         transition:
           opacity ease-in 120ms,
diff --git a/packages/uui-tag/lib/uui-tag.element.ts b/packages/uui-tag/lib/uui-tag.element.ts
index 19e25e8bc..7a5eb880e 100644
--- a/packages/uui-tag/lib/uui-tag.element.ts
+++ b/packages/uui-tag/lib/uui-tag.element.ts
@@ -52,7 +52,6 @@ export class UUITagElement extends LitElement {
           --uui-tag-padding,
           var(--uui-size-space-1) calc(var(--uui-size-space-1) + 0.5em)
         );
-        border-radius: 100px;
         user-select: none;
         border-radius: var(--uui-tag-border-radius, var(--uui-size-4));
         border: 1px solid var(--uui-tag-border-color, transparent);
diff --git a/packages/uui-toast-notification/lib/uui-toast-notification.element.ts b/packages/uui-toast-notification/lib/uui-toast-notification.element.ts
index 88aa2228f..b84cd3dea 100644
--- a/packages/uui-toast-notification/lib/uui-toast-notification.element.ts
+++ b/packages/uui-toast-notification/lib/uui-toast-notification.element.ts
@@ -304,7 +304,7 @@ export class UUIToastNotificationElement extends LitElement {
         padding: var(--uui-size-layout-1);
         padding-right: var(--uui-size-layout-1);
         padding-left: var(--uui-size-layout-3);
-        border-radius: calc(var(--uui-border-radius) * 2);
+        border-radius: var(--uui-border-radius-3);
 
         opacity: 0;
         transition: opacity

From d56b208340cbd5102eec24746e977ab21989b78c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 5 Dec 2025 08:03:37 +0100
Subject: [PATCH 2/9] custom checkbox version of SVGs

---
 packages/uui-checkbox/lib/uui-checkbox.element.ts | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/uui-checkbox/lib/uui-checkbox.element.ts b/packages/uui-checkbox/lib/uui-checkbox.element.ts
index 7ec4eafc6..3b2b9553e 100644
--- a/packages/uui-checkbox/lib/uui-checkbox.element.ts
+++ b/packages/uui-checkbox/lib/uui-checkbox.element.ts
@@ -4,11 +4,11 @@ import {
 } from '@umbraco-ui/uui-base/lib/animations';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUIBooleanInputElement } from '@umbraco-ui/uui-boolean-input/lib';
-import {
-  iconCheck,
-  iconSubtract,
-} from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
-import { css, html } from 'lit';
+import { css, html, svg } from 'lit';
+
+// Custom SVG for the checkbox, as this is smaller in size than the icon registry version: [NL]
+const check = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 6 11 17 5 12" /></svg>`;
+const subtract = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12.25h14" /></svg>`;
 
 /**
  *  Umbraco checkbox, toggles between checked and uncheck
@@ -28,9 +28,7 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
   renderCheckbox() {
     return html`
       <div id="ticker">
-        <div id="icon-check">
-          ${this.indeterminate ? iconSubtract : iconCheck}
-        </div>
+        <div id="icon-check">${this.indeterminate ? subtract : check}</div>
       </div>
     `;
   }

From 547e64ff16bb1c83efad066a806b510d1585b722 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 5 Dec 2025 08:09:18 +0100
Subject: [PATCH 3/9] avatar update

---
 packages/uui-avatar/lib/uui-avatar.element.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/uui-avatar/lib/uui-avatar.element.ts b/packages/uui-avatar/lib/uui-avatar.element.ts
index 845a225f9..b48edebfc 100644
--- a/packages/uui-avatar/lib/uui-avatar.element.ts
+++ b/packages/uui-avatar/lib/uui-avatar.element.ts
@@ -120,6 +120,7 @@ export class UUIAvatarElement extends LitElement {
         user-select: none;
         /* box-sizing: border-box; */
         aspect-ratio: 1;
+        box-shadow: 0 0 0 1.5px var(--uui-color-border);
       }
 
       :host([overflow]) {

From 2007561d4cfdaeb6f7e597f00150d81f21708426 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 5 Dec 2025 08:14:59 +0100
Subject: [PATCH 4/9] check adjustment

---
 packages/uui-checkbox/lib/uui-checkbox.element.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/uui-checkbox/lib/uui-checkbox.element.ts b/packages/uui-checkbox/lib/uui-checkbox.element.ts
index 3b2b9553e..1e3393d27 100644
--- a/packages/uui-checkbox/lib/uui-checkbox.element.ts
+++ b/packages/uui-checkbox/lib/uui-checkbox.element.ts
@@ -7,7 +7,7 @@ import { UUIBooleanInputElement } from '@umbraco-ui/uui-boolean-input/lib';
 import { css, html, svg } from 'lit';
 
 // Custom SVG for the checkbox, as this is smaller in size than the icon registry version: [NL]
-const check = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 6 11 17 5 12" /></svg>`;
+const check = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 10 17 4 12" /></svg>`;
 const subtract = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12.25h14" /></svg>`;
 
 /**
@@ -108,6 +108,7 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
         height: 1em;
         line-height: 0;
         transition:
+          transform 80ms ease-in-out,
           fill 120ms,
           opacity 120ms;
         color: var(--uui-color-selected-contrast);
@@ -126,9 +127,9 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
         );
         background-color: var(--uui-color-selected);
         transition:
-          transform 120ms ease,
-          opacity 120ms,
-          background-color 120ms;
+          transform 80ms ease-in-out,
+          opacity 80ms,
+          background-color 80ms;
         transform: scale(0);
         opacity: 0;
       }
@@ -159,7 +160,8 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
       :host(:not([disabled], [readonly]))
         label:active
         input:checked
-        + #ticker::before {
+        + #ticker
+        #icon-check {
         /** Stretch when mouse down */
         transform: scale(0.9);
       }
@@ -167,7 +169,8 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
       :host(:not([disabled], [readonly]))
         label:active
         input:indeterminate
-        + #ticker::before {
+        + #ticker
+        #icon-check {
         /** Stretch when mouse down */
         transform: scale(0.9);
       }

From 60485081160be0aa8fd500e2aeb3c438de34dde6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 5 Dec 2025 08:22:33 +0100
Subject: [PATCH 5/9] thinner loader circle

---
 packages/uui-loader-circle/lib/uui-loader-circle.element.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/uui-loader-circle/lib/uui-loader-circle.element.ts b/packages/uui-loader-circle/lib/uui-loader-circle.element.ts
index 278d9362c..469ffd0e1 100644
--- a/packages/uui-loader-circle/lib/uui-loader-circle.element.ts
+++ b/packages/uui-loader-circle/lib/uui-loader-circle.element.ts
@@ -138,7 +138,7 @@ export class UUILoaderCircleElement extends LitElement {
       svg circle {
         fill: transparent;
         stroke: currentColor;
-        stroke-width: 6px;
+        stroke-width: 4px;
       }
 
       #bg {

From dca29c397284cfe3bb04fbfe8a514fd3b94862ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 5 Dec 2025 08:31:11 +0100
Subject: [PATCH 6/9] thinner loader

---
 packages/uui-loader/lib/uui-loader.element.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/uui-loader/lib/uui-loader.element.ts b/packages/uui-loader/lib/uui-loader.element.ts
index e6d20661f..2014827c6 100644
--- a/packages/uui-loader/lib/uui-loader.element.ts
+++ b/packages/uui-loader/lib/uui-loader.element.ts
@@ -25,9 +25,10 @@ export class UUILoaderElement extends LitElement {
         display: inline-block;
         width: var(--uui-size-2);
         height: var(--uui-size-2);
-        border: 2px solid currentColor;
+        border: 1px solid currentColor;
         border-radius: 100%;
-        animation: loaderAnimation 1.4s infinite;
+        animation: loaderAnimation 1.2s infinite;
+        transition: all 60ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
       }
 
       div:nth-child(1n) {
@@ -44,7 +45,7 @@ export class UUILoaderElement extends LitElement {
 
       @keyframes loaderAnimation {
         0% {
-          transform: scale(0.5);
+          transform: scale(0.33);
           background-color: currentColor;
         }
         50% {
@@ -52,7 +53,7 @@ export class UUILoaderElement extends LitElement {
           background-color: transparent;
         }
         100% {
-          transform: scale(0.5);
+          transform: scale(0.33);
           background-color: currentColor;
         }
       }

From abcb2373aff37b6064fc38cf64d9699311159a25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Fri, 5 Dec 2025 08:47:52 +0100
Subject: [PATCH 7/9] no box shadow, lighter sand color

---
 packages/uui-box/lib/uui-box.element.ts            | 4 +---
 packages/uui-css/lib/custom-properties/palette.css | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/uui-box/lib/uui-box.element.ts b/packages/uui-box/lib/uui-box.element.ts
index 4041ec1a5..09e3fc771 100644
--- a/packages/uui-box/lib/uui-box.element.ts
+++ b/packages/uui-box/lib/uui-box.element.ts
@@ -20,7 +20,6 @@ function slotHasContent(target: EventTarget | null): boolean {
  *  @slot - area for the content of the box
  *  @cssprop --uui-box-header-padding - overwrite the header padding
  *  @cssprop --uui-box-default-padding - overwrite the box padding
- *  @cssprop --uui-box-border-width - overwrite the box border, default is 0
  *  @cssprop --uui-box-box-shadow - overwrite the box shadow, default is var(--uui-shadow-depth-1)
  *  @cssprop --uui-box-border-radius - overwrite the box border-radius, default is var(--uui-border-radius)
  *  @cssprop --uui-box-border-color - overwrites the box border colorm default is var(--uui-color-divider-standalone)
@@ -122,9 +121,8 @@ export class UUIBoxElement extends LitElement {
     css`
       :host {
         display: block;
-        border: var(--uui-box-border-width, 0) solid
+        border: 1px solid
           var(--uui-box-border-color, var(--uui-color-divider-standalone));
-        box-shadow: var(--uui-box-box-shadow, var(--uui-shadow-depth-1));
         border-radius: var(--uui-box-border-radius, var(--uui-border-radius));
         background-color: var(--uui-color-surface);
       }
diff --git a/packages/uui-css/lib/custom-properties/palette.css b/packages/uui-css/lib/custom-properties/palette.css
index 1963e70fe..bc55c7a32 100644
--- a/packages/uui-css/lib/custom-properties/palette.css
+++ b/packages/uui-css/lib/custom-properties/palette.css
@@ -321,7 +321,7 @@
     204
   ); /* color($gravel saturation(- 82%) blackness(+ 6%)); */
 
-  $sand: #f3f3f5;
+  $sand: #f6f6f7;
   --uui-palette-sand: $sand;
   --uui-palette-sand-light: rgb(
     255,

From 23d74d3c492c8a186b796e49ee8875245932f784 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 17 Dec 2025 17:12:24 +0100
Subject: [PATCH 8/9] further updates

---
 packages/uui-box/lib/uui-box.element.ts       |  4 +--
 .../lib/uui-button-group.element.ts           |  8 ++---
 packages/uui-button/lib/uui-button.element.ts | 10 +++---
 .../lib/uui-card-block-type.element.ts        |  5 +--
 .../lib/uui-card-media.element.ts             |  5 +--
 packages/uui-card/lib/uui-card.element.ts     |  9 +++---
 .../lib/uui-color-area.element.ts             |  2 +-
 .../uui-combobox/lib/uui-combobox.element.ts  |  4 +--
 .../uui-css/lib/custom-properties/sizes.css   |  2 +-
 packages/uui-css/lib/typography/lato.css      | 32 ++++++++++++++-----
 packages/uui-css/lib/uui-text.css             | 10 +++---
 .../lib/uui-pagination.element.ts             | 10 +++++-
 .../lib/uui-pagination.story.ts               |  3 ++
 13 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/packages/uui-box/lib/uui-box.element.ts b/packages/uui-box/lib/uui-box.element.ts
index 09e3fc771..931ee11fe 100644
--- a/packages/uui-box/lib/uui-box.element.ts
+++ b/packages/uui-box/lib/uui-box.element.ts
@@ -21,7 +21,7 @@ function slotHasContent(target: EventTarget | null): boolean {
  *  @cssprop --uui-box-header-padding - overwrite the header padding
  *  @cssprop --uui-box-default-padding - overwrite the box padding
  *  @cssprop --uui-box-box-shadow - overwrite the box shadow, default is var(--uui-shadow-depth-1)
- *  @cssprop --uui-box-border-radius - overwrite the box border-radius, default is var(--uui-border-radius)
+ *  @cssprop --uui-box-border-radius - overwrite the box border-radius, default is var(--uui-border-radius-3)
  *  @cssprop --uui-box-border-color - overwrites the box border colorm default is var(--uui-color-divider-standalone)
  */
 @defineElement('uui-box')
@@ -123,7 +123,7 @@ export class UUIBoxElement extends LitElement {
         display: block;
         border: 1px solid
           var(--uui-box-border-color, var(--uui-color-divider-standalone));
-        border-radius: var(--uui-box-border-radius, var(--uui-border-radius));
+        border-radius: var(--uui-box-border-radius, var(--uui-border-radius-3));
         background-color: var(--uui-color-surface);
       }
 
diff --git a/packages/uui-button-group/lib/uui-button-group.element.ts b/packages/uui-button-group/lib/uui-button-group.element.ts
index deb284d95..19a39dfa0 100644
--- a/packages/uui-button-group/lib/uui-button-group.element.ts
+++ b/packages/uui-button-group/lib/uui-button-group.element.ts
@@ -32,12 +32,12 @@ export class UUIButtonGroupElement extends LitElement {
       }
 
       ::slotted(*:first-child) {
-        --uui-button-border-radius: var(--uui-border-radius) 0 0
-          var(--uui-border-radius);
+        --uui-button-border-radius: var(--uui-border-radius-3) 0 0
+          var(--uui-border-radius-3);
       }
       ::slotted(*:last-child) {
-        --uui-button-border-radius: 0 var(--uui-border-radius)
-          var(--uui-border-radius) 0;
+        --uui-button-border-radius: 0 var(--uui-border-radius-3)
+          var(--uui-border-radius-3) 0;
       }
 
       ::slotted(*:hover) {
diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts
index 32d11d5f8..057319baa 100644
--- a/packages/uui-button/lib/uui-button.element.ts
+++ b/packages/uui-button/lib/uui-button.element.ts
@@ -290,7 +290,7 @@ export class UUIButtonElement extends UUIFormControlMixin(
 
         text-align: center;
         font-size: var(--uui-button-font-size, inherit);
-        font-weight: var(--uui-button-font-weight, 500);
+        font-weight: var(--uui-button-font-weight, 400);
         transition:
           background-color 80ms,
           border-color 80ms,
@@ -355,7 +355,7 @@ export class UUIButtonElement extends UUIFormControlMixin(
         border-style: solid;
         border-radius: var(
           --uui-button-border-radius,
-          var(--uui-border-radius-2)
+          var(--uui-border-radius-3)
         );
         cursor: pointer;
 
@@ -498,7 +498,7 @@ export class UUIButtonElement extends UUIFormControlMixin(
         border-color: var(--uui-button-border-color, transparent);
 
         /* special for primary: */
-        font-weight: var(--uui-button-font-weight, 700);
+        font-weight: var(--uui-button-font-weight, 400);
       }
 
       :host([look='primary']:hover) #button {
@@ -533,7 +533,7 @@ export class UUIButtonElement extends UUIFormControlMixin(
         border-color: var(--uui-button-border-color, transparent);
 
         /* special for secondary: */
-        font-weight: var(--uui-button-font-weight, 700);
+        font-weight: var(--uui-button-font-weight, 400);
       }
       :host([look='secondary']:hover) #button {
         background-color: var(
@@ -562,7 +562,7 @@ export class UUIButtonElement extends UUIFormControlMixin(
         );
 
         /* special for outline: */
-        font-weight: var(--uui-button-font-weight, 700);
+        font-weight: var(--uui-button-font-weight, 400);
       }
       :host([look='outline']:not([disabled]):hover) #button {
         background-color: var(--uui-button-background-color-hover, transparent);
diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
index 84d010782..ea2118f21 100644
--- a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
+++ b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
@@ -143,7 +143,7 @@ export class UUICardBlockTypeElement extends UUICardElement {
 
       slot:not([name])::slotted(*) {
         align-self: center;
-        border-radius: var(--uui-border-radius);
+        border-radius: var(--uui-border-radius-2);
         object-fit: cover;
         max-width: 100%;
         max-height: 100%;
@@ -154,6 +154,7 @@ export class UUICardBlockTypeElement extends UUICardElement {
         position: absolute;
         z-index: 1;
         inset: 0;
+        margin-bottom: 0;
         color: var(--uui-color-interactive);
         border: none;
         cursor: pointer;
@@ -208,7 +209,7 @@ export class UUICardBlockTypeElement extends UUICardElement {
         inset: 0;
         z-index: -1;
         border-top: 1px solid var(--uui-color-divider);
-        border-radius: 0 0 var(--uui-border-radius) var(--uui-border-radius);
+        border-radius: 0 0 var(--uui-border-radius-2) var(--uui-border-radius-2);
         background-color: var(--uui-color-surface);
         pointer-events: none;
         opacity: 0.96;
diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
index 8d796c363..2048b8f00 100644
--- a/packages/uui-card-media/lib/uui-card-media.element.ts
+++ b/packages/uui-card-media/lib/uui-card-media.element.ts
@@ -158,7 +158,7 @@ export class UUICardMediaElement extends UUICardElement {
 
       slot:not([name])::slotted(*) {
         align-self: center;
-        border-radius: var(--uui-border-radius);
+        border-radius: var(--uui-border-radius-2);
         object-fit: cover;
         width: 100%;
         height: 100%;
@@ -169,6 +169,7 @@ export class UUICardMediaElement extends UUICardElement {
         position: absolute;
         z-index: 1;
         inset: 0;
+        margin-bottom: 0;
         color: var(--uui-color-interactive);
         border: none;
         cursor: pointer;
@@ -220,7 +221,7 @@ export class UUICardMediaElement extends UUICardElement {
         inset: 0;
         z-index: -1;
         border-top: 1px solid var(--uui-color-divider);
-        border-radius: 0 0 var(--uui-border-radius) var(--uui-border-radius);
+        border-radius: 0 0 var(--uui-border-radius-2) var(--uui-border-radius-2);
         background-color: var(--uui-color-surface);
         pointer-events: none;
         opacity: 0.96;
diff --git a/packages/uui-card/lib/uui-card.element.ts b/packages/uui-card/lib/uui-card.element.ts
index e0797c482..3792d32c9 100644
--- a/packages/uui-card/lib/uui-card.element.ts
+++ b/packages/uui-card/lib/uui-card.element.ts
@@ -113,8 +113,7 @@ export class UUICardElement extends SelectOnlyMixin(
         width: 100%;
         justify-content: center;
         box-sizing: border-box;
-        box-shadow: var(--uui-shadow-depth-1);
-        border-radius: var(--uui-border-radius);
+        border-radius: var(--uui-border-radius-2);
         min-height: var(--uui-layout-medium);
         background-color: var(--uui-color-surface);
         --uui-card-border-width: 3px;
@@ -143,7 +142,7 @@ export class UUICardElement extends SelectOnlyMixin(
         z-index: 1;
         box-sizing: border-box;
         border: var(--uui-card-border-width) solid var(--uui-color-invalid);
-        border-radius: var(--uui-border-radius);
+        border-radius: var(--uui-border-radius-2);
       }
 
       button {
@@ -169,7 +168,7 @@ export class UUICardElement extends SelectOnlyMixin(
         outline-width: var(--uui-card-border-width);
         outline-style: solid;
         outline-offset: var(--uui-card-border-width);
-        border-radius: var(--uui-border-radius);
+        border-radius: var(--uui-border-radius-2);
       }
 
       :host([selectable]) {
@@ -193,7 +192,7 @@ export class UUICardElement extends SelectOnlyMixin(
         height: 100%;
         box-sizing: border-box;
         border: 2px solid var(--uui-color-selected);
-        border-radius: calc(var(--uui-border-radius) + 2px);
+        border-radius: calc(var(--uui-border-radius-2) + 2px);
         box-shadow:
           0 0 4px 0 var(--uui-color-selected),
           inset 0 0 2px 0 var(--uui-color-selected);
diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts
index 078d3bb58..f0781019c 100644
--- a/packages/uui-color-area/lib/uui-color-area.element.ts
+++ b/packages/uui-color-area/lib/uui-color-area.element.ts
@@ -311,7 +311,7 @@ export class UUIColorAreaElement extends LitElement {
         forced-color-adjust: none;
         border-radius: var(
           --uui-color-area-border-radius,
-          var(--uui-border-radius)
+          var(--uui-border-radius-2)
         );
       }
       .color-area__handle {
diff --git a/packages/uui-combobox/lib/uui-combobox.element.ts b/packages/uui-combobox/lib/uui-combobox.element.ts
index bfa1863dd..66ad291c8 100644
--- a/packages/uui-combobox/lib/uui-combobox.element.ts
+++ b/packages/uui-combobox/lib/uui-combobox.element.ts
@@ -417,7 +417,7 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
 
       #combobox-input {
         width: 100%;
-        border-radius: var(--uui-border-radius);
+        border-radius: var(--uui-border-radius-3);
       }
 
       #combobox-popover {
@@ -455,7 +455,7 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
           var(--uui-color-surface)
         );
         border: 1px solid var(--uui-color-border);
-        border-radius: var(--uui-border-radius);
+        border-radius: var(--uui-border-radius-3);
         width: 100%;
         box-sizing: border-box;
         box-shadow: var(--uui-shadow-depth-3);
diff --git a/packages/uui-css/lib/custom-properties/sizes.css b/packages/uui-css/lib/custom-properties/sizes.css
index ed7ca1f99..76855f419 100644
--- a/packages/uui-css/lib/custom-properties/sizes.css
+++ b/packages/uui-css/lib/custom-properties/sizes.css
@@ -53,7 +53,7 @@
   --uui-border-radius: var(--uui-size-2);
   --uui-border-radius-1: var(--uui-size-2);
   --uui-border-radius-2: var(--uui-size-4);
-  --uui-border-radius-3: var(--uui-size-6);
+  --uui-border-radius-3: var(--uui-size-5);
 
   /** Typography */
   --uui-type-default-size: 14px;
diff --git a/packages/uui-css/lib/typography/lato.css b/packages/uui-css/lib/typography/lato.css
index 2bc6f8ba5..5c559f432 100644
--- a/packages/uui-css/lib/typography/lato.css
+++ b/packages/uui-css/lib/typography/lato.css
@@ -11,7 +11,9 @@
 /* Webfont: LatoLatin-Black */
 @font-face {
   font-family: 'Lato';
-  src: local('LatoLatin Black'), local('LatoLatin-Black'),
+  src:
+    local('LatoLatin Black'),
+    local('LatoLatin-Black'),
     url('../../assets/fonts/lato/LatoLatin-Black.woff2') format('woff2');
   font-style: normal;
   font-display: swap;
@@ -22,7 +24,9 @@
 /* Webfont: LatoLatin-BlackItalic */
 @font-face {
   font-family: 'Lato';
-  src: local('LatoLatin BlackItalic'), local('LatoLatin-BlackItalic'),
+  src:
+    local('LatoLatin BlackItalic'),
+    local('LatoLatin-BlackItalic'),
     url('../../assets/fonts/lato/LatoLatin-BlackItalic.woff2') format('woff2');
   font-style: italic;
   font-weight: 900;
@@ -33,7 +37,9 @@
 /* Webfont: LatoLatin-Bold */
 @font-face {
   font-family: 'Lato';
-  src: local('LatoLatin Bold'), local('LatoLatin-Bold'),
+  src:
+    local('LatoLatin Bold'),
+    local('LatoLatin-Bold'),
     url('../../assets/fonts/lato/LatoLatin-Bold.woff2') format('woff2');
   font-style: normal;
   font-weight: 700;
@@ -44,7 +50,9 @@
 /* Webfont: LatoLatin-BoldItalic */
 @font-face {
   font-family: 'Lato';
-  src: local('LatoLatin BoldItalic'), local('LatoLatin-BoldItalic'),
+  src:
+    local('LatoLatin BoldItalic'),
+    local('LatoLatin-BoldItalic'),
     url('../../assets/fonts/lato/LatoLatin-BoldItalic.woff2') format('woff2');
   font-style: italic;
   font-weight: 700;
@@ -55,7 +63,9 @@
 /* Webfont: LatoLatin-Italic */
 @font-face {
   font-family: 'Lato';
-  src: local('LatoLatin Italic'), local('LatoLatin-Italic'),
+  src:
+    local('LatoLatin Italic'),
+    local('LatoLatin-Italic'),
     url('../../assets/fonts/lato/LatoLatin-Italic.woff2') format('woff2');
   font-style: italic;
   font-weight: 400;
@@ -66,7 +76,9 @@
 /* Webfont: LatoLatin-Regular */
 @font-face {
   font-family: 'Lato';
-  src: local('LatoLatin Regular'), local('LatoLatin-Regular'),
+  src:
+    local('LatoLatin Regular'),
+    local('LatoLatin-Regular'),
     url('../../assets/fonts/lato/LatoLatin-Regular.woff2') format('woff2');
   font-style: normal;
   font-weight: 400;
@@ -77,7 +89,9 @@
 /* Webfont: LatoLatin-Light */
 @font-face {
   font-family: 'Lato';
-  src: local('LatoLatin Light'), local('LatoLatin-Light'),
+  src:
+    local('LatoLatin Light'),
+    local('LatoLatin-Light'),
     url('../../assets/fonts/lato/LatoLatin-Light.woff2') format('woff2');
   font-style: normal;
   font-weight: 300;
@@ -88,7 +102,9 @@
 /* Webfont: LatoLatin-LightItalic */
 @font-face {
   font-family: 'Lato';
-  src: local('LatoLatin LightItalic'), local('LatoLatin-LightItalic'),
+  src:
+    local('LatoLatin LightItalic'),
+    local('LatoLatin-LightItalic'),
     url('../../assets/fonts/lato/LatoLatin-LightItalic.woff2') format('woff2');
   font-style: italic;
   font-weight: 300;
diff --git a/packages/uui-css/lib/uui-text.css b/packages/uui-css/lib/uui-text.css
index 46cfc4640..f21f5d67b 100644
--- a/packages/uui-css/lib/uui-text.css
+++ b/packages/uui-css/lib/uui-text.css
@@ -21,7 +21,7 @@
 .uui-h1.uui-h1 {
   font-size: var(--uui-type-h1-size);
   line-height: var(--uui-size-layout-4);
-  font-weight: 300;
+  font-weight: 400;
   margin-left: -5px;
   margin-top: var(--uui-size-layout-1);
   margin-bottom: var(--uui-size-layout-1);
@@ -41,7 +41,7 @@
 .uui-h2.uui-h2 {
   font-size: var(--uui-type-h2-size);
   line-height: var(--uui-size-layout-3);
-  font-weight: 300;
+  font-weight: 400;
   margin-left: -3px;
   margin-top: var(--uui-size-layout-1);
   margin-bottom: var(--uui-size-layout-1);
@@ -61,7 +61,7 @@
 .uui-h3.uui-h3 {
   font-size: var(--uui-type-h3-size);
   line-height: var(--uui-size-large);
-  font-weight: 300;
+  font-weight: 400;
   margin-left: -2px;
   margin-top: var(--uui-size-layout-1);
   margin-bottom: var(--uui-size-layout-1);
@@ -93,7 +93,7 @@
 .uui-h5.uui-h5 {
   font-size: var(--uui-type-h5-size);
   line-height: inherit;
-  font-weight: 700;
+  font-weight: 400;
   margin-left: 0;
   margin-top: var(--uui-size-layout-1);
   margin-bottom: 0;
@@ -144,7 +144,7 @@
   float: right;
   font-size: 14px;
   line-height: inherit;
-  font-weight: 700;
+  font-weight: 400;
   font-style: italic;
   margin-top: 0;
   margin-bottom: var(--uui-size-layout-1);
diff --git a/packages/uui-pagination/lib/uui-pagination.element.ts b/packages/uui-pagination/lib/uui-pagination.element.ts
index c4cdff0b5..48bb6cac3 100644
--- a/packages/uui-pagination/lib/uui-pagination.element.ts
+++ b/packages/uui-pagination/lib/uui-pagination.element.ts
@@ -351,12 +351,16 @@ export class UUIPaginationElement extends LitElement {
         --uui-button-border-color-disabled: var(--uui-color-border-standalone);
       }
 
+      uui-button:hover {
+        z-index: 1;
+      }
+
       .page {
         min-width: 36px;
         max-width: 72px;
       }
       .page.active {
-        --uui-button-background-color: var(--uui-color-current);
+        z-index: 1;
       }
 
       .nav {
@@ -369,6 +373,10 @@ export class UUIPaginationElement extends LitElement {
 
       .active {
         pointer-events: none;
+        --uui-button-font-weight: 700;
+        --uui-button-contrast: var(--uui-color-selected);
+        --uui-button-border-color: var(--uui-color-selected);
+        --uui-button-border-width: 2px;
       }
     `,
   ];
diff --git a/packages/uui-pagination/lib/uui-pagination.story.ts b/packages/uui-pagination/lib/uui-pagination.story.ts
index 765bd149e..59755701d 100644
--- a/packages/uui-pagination/lib/uui-pagination.story.ts
+++ b/packages/uui-pagination/lib/uui-pagination.story.ts
@@ -4,6 +4,9 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { spread } from '../../../storyhelpers';
 
+import '@umbraco-ui/uui-button/lib/';
+import '@umbraco-ui/uui-button-group/lib/';
+
 const meta: Meta = {
   id: 'uui-pagination',
   component: 'uui-pagination',

From f0ea2d9476d49274724150cd740835acf491ad08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 17 Dec 2025 17:18:55 +0100
Subject: [PATCH 9/9] use bright blue for buttons

---
 .../uui-css/lib/custom-properties/colors.css  |  6 +++---
 .../uui-css/lib/custom-properties/palette.css | 20 ++++---------------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/packages/uui-css/lib/custom-properties/colors.css b/packages/uui-css/lib/custom-properties/colors.css
index 9bcc5a226..579e87559 100644
--- a/packages/uui-css/lib/custom-properties/colors.css
+++ b/packages/uui-css/lib/custom-properties/colors.css
@@ -45,9 +45,9 @@
   --uui-color-divider-emphasis: #bdbdbd;
 
   /* ----- COLORS -----  */
-  --uui-color-default: var(--uui-palette-space-cadet);
-  --uui-color-default-emphasis: var(--uui-palette-violet-blue);
-  --uui-color-default-standalone: var(--uui-palette-space-cadet-dark);
+  --uui-color-default: var(--uui-palette-violet-blue);
+  --uui-color-default-emphasis: var(--uui-palette-violet-blue-light);
+  --uui-color-default-standalone: var(--uui-palette-violet-blue-dark);
   --uui-color-default-contrast: #fff;
 
   --uui-color-warning: #fbd142;
diff --git a/packages/uui-css/lib/custom-properties/palette.css b/packages/uui-css/lib/custom-properties/palette.css
index bc55c7a32..57ba16bcc 100644
--- a/packages/uui-css/lib/custom-properties/palette.css
+++ b/packages/uui-css/lib/custom-properties/palette.css
@@ -103,23 +103,11 @@
     $space-cadet saturation(- 30%) lightness(+ 30%)
   ); */
 
-  $violet-blue: #3544b1;
+  $violet-blue: #283a97;
   --uui-palette-violet-blue: $violet-blue;
-  --uui-palette-violet-blue-light: rgb(
-    70,
-    86,
-    200
-  ); /* color($violet-blue lightness(+ 8%)); */
-  --uui-palette-violet-blue-dark: rgb(
-    54,
-    65,
-    156
-  ); /* color($violet-blue blackness(+ 8%)); */
-  --uui-palette-violet-blue-dimmed: rgb(
-    87,
-    87,
-    87
-  ); /* color(
+  --uui-palette-violet-blue-light: #2d42ab; /* color($violet-blue lightness(+ 8%)); */
+  --uui-palette-violet-blue-dark: #25358b; /* color($violet-blue blackness(+ 8%)); */
+  --uui-palette-violet-blue-dimmed: #2c3669; /* color(
     $violet-blue saturation(- 30%) blackness(+ 22%)
   ); */