diff --git a/packages/uui-avatar/lib/uui-avatar.element.ts b/packages/uui-avatar/lib/uui-avatar.element.ts
index 12c6052b4..b48edebfc 100644
--- a/packages/uui-avatar/lib/uui-avatar.element.ts
+++ b/packages/uui-avatar/lib/uui-avatar.element.ts
@@ -120,8 +120,7 @@ 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);
+ box-shadow: 0 0 0 1.5px var(--uui-color-border);
}
:host([overflow]) {
diff --git a/packages/uui-box/lib/uui-box.element.ts b/packages/uui-box/lib/uui-box.element.ts
index 4041ec1a5..931ee11fe 100644
--- a/packages/uui-box/lib/uui-box.element.ts
+++ b/packages/uui-box/lib/uui-box.element.ts
@@ -20,9 +20,8 @@ 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-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')
@@ -122,10 +121,9 @@ 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));
+ 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 bbe81c6bd..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)
+ 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-checkbox/lib/uui-checkbox.element.ts b/packages/uui-checkbox/lib/uui-checkbox.element.ts
index 7ec4eafc6..1e3393d27 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` `;
+const subtract = svg` `;
/**
* Umbraco checkbox, toggles between checked and uncheck
@@ -28,9 +28,7 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
renderCheckbox() {
return html`
-
- ${this.indeterminate ? iconSubtract : iconCheck}
-
+
${this.indeterminate ? subtract : check}
`;
}
@@ -110,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);
@@ -128,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;
}
@@ -161,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);
}
@@ -169,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);
}
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..f0781019c 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-2)
+ );
}
.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}>
+
+ ${!this.noFormatToggle
+ ? html`
+ ${this.format}
+ `
+ : ''}
+ ${hasEyeDropper
+ ? html`
+
+
+
+ `
+ : ''}
+
-
- ${!this.noFormatToggle
- ? html`
- ${this.format}
- `
- : ''}
- ${hasEyeDropper
- ? html`
-
-
-
- `
- : ''}
-
${this._renderSwatches()}
@@ -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..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-size-1);
+ 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/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 1963e70fe..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%)
); */
@@ -321,7 +309,7 @@
204
); /* color($gravel saturation(- 82%) blackness(+ 6%)); */
- $sand: #f3f3f5;
+ $sand: #f6f6f7;
--uui-palette-sand: $sand;
--uui-palette-sand-light: rgb(
255,
diff --git a/packages/uui-css/lib/custom-properties/sizes.css b/packages/uui-css/lib/custom-properties/sizes.css
index 7ced79b44..76855f419 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-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-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-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 {
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;
}
}
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-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',
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 {
+ 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;">
Scroll!
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
= {
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 = {
],
},
},
- 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`
+ 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);">
This is my popover
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatem,
@@ -90,7 +81,7 @@ export const Overview: Story = {
placement=${args.placement}
margin=${args.margin}>
+ 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);">
This is my second popover
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
petrichor needs
@@ -129,7 +117,7 @@ export const Tooltip: Story = {
placement=${args.placement}
margin=${args.margin}>
+ 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.
@@ -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`
+ 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;">
Scroll!
Scrolling in any of the 2 boxes should trigger an update
@@ -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`
{
+ 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)">
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 => {
+ 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!
@@ -318,7 +309,7 @@ export const Tooltip: StoryFn = props => {
+ 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 {
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