Skip to content

Commit 7fc0369

Browse files
nielslyngsoenielslyngsoe
committed
Border radius updates
1 parent 0d855e6 commit 7fc0369

File tree

22 files changed

+82
-98
lines changed

22 files changed

+82
-98
lines changed

‎packages/uui-avatar/lib/uui-avatar.element.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,6 @@ export class UUIAvatarElement extends LitElement {
120120
user-select: none;
121121
/* box-sizing: border-box; */
122122
aspect-ratio: 1;
123-
background-color: var(--uui-palette-spanish-pink);
124-
color: var(--uui-palette-space-cadet);
125123
}
126124
127125
:host([overflow]) {

‎packages/uui-button/lib/uui-button.element.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,7 @@ export class UUIButtonElement extends UUIFormControlMixin(
355355
border-style: solid;
356356
border-radius: var(
357357
--uui-button-border-radius,
358-
var(--uui-border-radius)
358+
var(--uui-border-radius-2)
359359
);
360360
cursor: pointer;
361361

‎packages/uui-color-area/lib/uui-color-area.element.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { UUIColorAreaEvent } from './UUIColorAreaEvent';
1414
/**
1515
* @element uui-color-area
1616
* @cssprop --uui-color-area-grid-handle-size - The size of the handle in the grid
17+
* @cssprop --uui-color-area-border-radius - The border radius of the color area
1718
*/
1819
@defineElement('uui-color-area')
1920
export class UUIColorAreaElement extends LitElement {
@@ -308,6 +309,10 @@ export class UUIColorAreaElement extends LitElement {
308309
box-sizing: border-box;
309310
cursor: crosshair;
310311
forced-color-adjust: none;
312+
border-radius: var(
313+
--uui-color-area-border-radius,
314+
var(--uui-border-radius)
315+
);
311316
}
312317
.color-area__handle {
313318
position: absolute;

‎packages/uui-color-picker/lib/uui-color-picker.element.ts‎

Lines changed: 31 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -500,30 +500,30 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
500500
?readonly=${this.readonly}
501501
@keydown=${this.handleInputKeyDown}
502502
@change=${this.handleInputChange}>
503+
<uui-button-group slot="append">
504+
${!this.noFormatToggle
505+
? html`<uui-button
506+
label="Toggle color format"
507+
@click=${this.handleFormatToggle}
508+
class="color-picker__toggle-format"
509+
?disabled=${this.disabled}
510+
compact>
511+
<span>${this.format}</span>
512+
</uui-button>`
513+
: ''}
514+
${hasEyeDropper
515+
? html`<uui-button
516+
label="Select a color"
517+
?disabled=${this.disabled || this.readonly}
518+
@click=${this.handleEyeDropper}
519+
compact>
520+
<uui-icon-registry-essential>
521+
<uui-icon name="colorpicker"></uui-icon>
522+
</uui-icon-registry-essential>
523+
</uui-button>`
524+
: ''}
525+
</uui-button-group>
503526
</uui-input>
504-
<uui-button-group>
505-
${!this.noFormatToggle
506-
? html`<uui-button
507-
label="Toggle color format"
508-
@click=${this.handleFormatToggle}
509-
class="color-picker__toggle-format"
510-
?disabled=${this.disabled}
511-
compact>
512-
<span>${this.format}</span>
513-
</uui-button>`
514-
: ''}
515-
${hasEyeDropper
516-
? html`<uui-button
517-
label="Select a color"
518-
?disabled=${this.disabled || this.readonly}
519-
@click=${this.handleEyeDropper}
520-
compact>
521-
<uui-icon-registry-essential>
522-
<uui-icon name="colorpicker"></uui-icon>
523-
</uui-icon-registry-essential>
524-
</uui-button>`
525-
: ''}
526-
</uui-button-group>
527527
</div>
528528
${this._renderSwatches()}
529529
</div>
@@ -584,6 +584,8 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
584584
:host {
585585
--uui-look-outline-border: #ddd;
586586
--uui-look-outline-border-hover: #aaa;
587+
--uui-color-area-border-radius: var(--uui-border-radius-2)
588+
var(--uui-border-radius-2) 0 0;
587589
font-size: 0.8rem;
588590
color: var(--uui-color-text);
589591
display: block;
@@ -600,15 +602,15 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
600602
background-color: var(--uui-color-surface);
601603
user-select: none;
602604
border: solid 1px var(--uui-color-border);
605+
border-radius: var(--uui-border-radius-2);
603606
}
604607
.color-picker__user-input {
605608
display: flex;
606609
padding: 0 0.75rem 0.75rem 0.75rem;
607610
}
608611
.color-picker__user-input uui-button {
609-
border: var(--uui-input-border-width, 1px) solid
612+
border-left: var(--uui-input-border-width, 1px) solid
610613
var(--uui-input-border-color, var(--uui-color-border));
611-
border-left: none;
612614
}
613615
.color-picker__preview,
614616
.color-picker__trigger {
@@ -720,6 +722,10 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
720722
flex: 1;
721723
}
722724
725+
uui-button-group {
726+
height: 100%;
727+
}
728+
723729
button.color-picker__trigger:focus-visible {
724730
outline: 2px solid var(--uui-color-focus);
725731
}

‎packages/uui-color-slider/lib/uui-color-slider.element.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
357357
background-image: var(--uui-slider-background-image);
358358
background-size: var(--uui-slider-background-size);
359359
background-position: var(--uui-slider-background-position);
360-
border-radius: 3px;
360+
border-radius: var(--uui-border-radius);
361361
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
362362
width: 100%;
363363
height: var(--uui-slider-height);

‎packages/uui-color-swatch/lib/uui-color-swatch.element.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ export class UUIColorSwatchElement extends LabelMixin(
201201
padding: 0;
202202
margin: 0;
203203
text-align: left;
204-
border-radius: 3px;
204+
border-radius: var(--uui-size-4);
205205
}
206206
207207
:host(:not([selectable])) #swatch:focus {
@@ -238,7 +238,7 @@ export class UUIColorSwatchElement extends LabelMixin(
238238
position: relative;
239239
width: var(--uui-swatch-size, 25px);
240240
height: var(--uui-swatch-size, 25px);
241-
border-radius: 3px;
241+
border-radius: inherit;
242242
display: flex;
243243
flex-direction: column;
244244
justify-content: center;
@@ -284,6 +284,7 @@ export class UUIColorSwatchElement extends LabelMixin(
284284
filter: invert(1) grayscale(1) contrast(9);
285285
pointer-events: none;
286286
opacity: 0;
287+
border-radius: inherit;
287288
}
288289
289290
:host([selected]) .color-swatch__check {

‎packages/uui-combobox/lib/uui-combobox.element.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -417,7 +417,7 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
417417
418418
#combobox-input {
419419
width: 100%;
420-
border-radius: var(--uui-size-1);
420+
border-radius: var(--uui-border-radius);
421421
}
422422
423423
#combobox-popover {

‎packages/uui-css/lib/custom-properties/sizes.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,10 @@
5050
--uui-size-layout-6: 138px; /*--uui-size-46*/
5151

5252
/** Other size props: */
53-
--uui-border-radius: var(--uui-size-1);
53+
--uui-border-radius: var(--uui-size-2);
54+
--uui-border-radius-1: var(--uui-size-2);
55+
--uui-border-radius-2: var(--uui-size-4);
56+
--uui-border-radius-3: var(--uui-size-6);
5457

5558
/** Typography */
5659
--uui-type-default-size: 14px;

‎packages/uui-dialog/lib/uui-dialog.element.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export class UUIDialogElement extends LitElement {
2828
box-shadow: var(--uui-shadow-depth-5);
2929
border-radius: var(
3030
--uui-dialog-border-radius,
31-
calc(var(--uui-border-radius) * 2)
31+
var(--uui-border-radius-3)
3232
);
3333
}
3434
`,

‎packages/uui-input-lock/lib/uui-input-lock.story.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import readme from '../README.md?raw';
33
import { html } from 'lit';
44
import type { Meta, StoryObj } from '@storybook/web-components-vite';
55
import { renderSlots, spread } from '../../../storyhelpers';
6+
import '@umbraco-ui/uui-button/lib/';
67

78
/**
89
* uui-input-lock extends uui-input. See [uui-input](/docs/uui-input--docs) for more details.

0 commit comments

Comments
 (0)