further updates

nielslyngsoe · nielslyngsoe · commit 23d74d3c492c · 2025-12-17T17:12:24.000+01:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',

Original file line number	Diff line number	Diff line change
`@@ -32,12 +32,12 @@ export class UUIButtonGroupElement extends LitElement {`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`::slotted(*:first-child) {`
`35`		`- --uui-button-border-radius: var(--uui-border-radius) 0 0`
`36`		`- var(--uui-border-radius);`
	`35`	`+ --uui-button-border-radius: var(--uui-border-radius-3) 0 0`
	`36`	`+ var(--uui-border-radius-3);`
`37`	`37`	`}`
`38`	`38`	`::slotted(*:last-child) {`
`39`		`- --uui-button-border-radius: 0 var(--uui-border-radius)`
`40`		`- var(--uui-border-radius) 0;`
	`39`	`+ --uui-button-border-radius: 0 var(--uui-border-radius-3)`
	`40`	`+ var(--uui-border-radius-3) 0;`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`::slotted(*:hover) {`
Original file line number	Diff line number	Diff line change
`@@ -311,7 +311,7 @@ export class UUIColorAreaElement extends LitElement {`
`311`	`311`	`forced-color-adjust: none;`
`312`	`312`	`border-radius: var(`
`313`	`313`	`--uui-color-area-border-radius,`
`314`		`- var(--uui-border-radius)`
	`314`	`+ var(--uui-border-radius-2)`
`315`	`315`	`);`
`316`	`316`	`}`
`317`	`317`	`.color-area__handle {`