UI Library V2: POC

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]) {

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);
       }
 

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) {

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);

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;

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;

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);

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="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>`;
 
 /**
  *  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>
     `;
   }
@@ -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,15 +160,17 @@ 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);
       }
 
       :host(:not([disabled], [readonly]))
         label:active
         input:indeterminate
-        + #ticker::before {
+        + #ticker
+        #icon-check {
         /** Stretch when mouse down */
         transform: scale(0.9);
       }

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;

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);
       }

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);

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 {