From e75dde6a62850bf1311047d34a94a585f52242ce Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Thu, 4 Apr 2024 10:35:38 +0200 Subject: [PATCH 1/4] build(deps-dev): downgrade postcss-advanced-variables to 3.0.1 because it didn't work --- package-lock.json | 46 ++++++++++++++++++++++++++++++++++++++-------- package.json | 2 +- 2 files changed, 39 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index f467cf2be..06d0a6f3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -59,7 +59,7 @@ "npm-check-updates": "16.10.16", "plop": "3.1.2", "postcss": "8.4.36", - "postcss-advanced-variables": "4.0.0", + "postcss-advanced-variables": "3.0.1", "postcss-cli": "11.0.0", "postcss-color-function": "4.1.0", "postcss-custom-properties": "13.3.4", @@ -26553,18 +26553,48 @@ } }, "node_modules/postcss-advanced-variables": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-advanced-variables/-/postcss-advanced-variables-4.0.0.tgz", - "integrity": "sha512-ooRwPl53XDEfZtc52BimJFwTKFPqeJGmSUuX90ZsN+ZTP9ViTsyLbRcD0gwtEw7su0o6P71ps7gpnOa4eGkx4g==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/postcss-advanced-variables/-/postcss-advanced-variables-3.0.1.tgz", + "integrity": "sha512-JqVjfkmqPoazMobVeQYzbt7djcDGJfMlpwBd9abTqmzWR40tvIUMXpTU5w3riqz7h+wYPY7V6GF8BIXL/ybEfg==", "dev": true, "dependencies": { - "@csstools/sass-import-resolve": "^1.0.0" + "@csstools/sass-import-resolve": "^1.0.0", + "postcss": "^7.0.6" }, "engines": { - "node": "^10 || ^12 || >=14" + "node": ">=6.0.0" + } + }, + "node_modules/postcss-advanced-variables/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "node_modules/postcss-advanced-variables/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" }, - "peerDependencies": { - "postcss": "^8.4" + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, + "node_modules/postcss-advanced-variables/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" } }, "node_modules/postcss-calc": { diff --git a/package.json b/package.json index ee9aca6f9..837441689 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "npm-check-updates": "16.10.16", "plop": "3.1.2", "postcss": "8.4.36", - "postcss-advanced-variables": "4.0.0", + "postcss-advanced-variables": "3.0.1", "postcss-cli": "11.0.0", "postcss-color-function": "4.1.0", "postcss-custom-properties": "13.3.4", From 229b8da5cc8ae616e1442e2e11531461864bbe26 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 5 Apr 2024 15:31:53 +0200 Subject: [PATCH 2/4] feat: :lipstick: add custom properties for menu item (#773) Allow to change colors of different styles in menu item --- .../lib/uui-menu-item.element.ts | 95 +++++++++++++++---- 1 file changed, 77 insertions(+), 18 deletions(-) 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 2eff180c7..52d6ad6dc 100644 --- a/packages/uui-menu-item/lib/uui-menu-item.element.ts +++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts @@ -17,6 +17,15 @@ import { UUIMenuItemEvent } from './UUIMenuItemEvent'; * @element uui-menu-item * @cssprop --uui-menu-item-indent - set indentation of the menu items * @cssprop --uui-menu-item-flat-structure - set to 1 to remove the indentation of the chevron. Use this when you have a flat menu structure + * @cssprop --uui-menu-item-background-color-hover - background color when hovering + * @cssprop --uui-menu-item-color-hover - text color when hovering + * @cssprop --uui-menu-item-background-color-active - background color when active + * @cssprop --uui-menu-item-color-active - text color when active + * @cssprop --uui-menu-item-background-color-disabled - background color when disabled + * @cssprop --uui-menu-item-color-disabled - text color when disabled + * @cssprop --uui-menu-item-background-color-selected - background color when selected + * @cssprop --uui-menu-item-color-selected - text color when selected + * @cssprop --uui-menu-item-color-background-selected-hover - text color when selected * @fires {UUIMenuItemEvent} show-children - fires when the expand icon is clicked to show nested menu items * @fires {UUIMenuItemEvent} hide-children - fires when the expend icon is clicked to hide nested menu items * @fires {UUIMenuItemEvent} click-label - fires when the label is clicked @@ -225,32 +234,53 @@ export class UUIMenuItemElement extends SelectOnlyMixin( :host(:not([active], [selected], [disabled])) #menu-item #caret-button:hover { - background-color: var(--uui-color-surface-emphasis); + background-color: var( + --uui-menu-item-background-color-hover, + var(--uui-color-surface-emphasis) + ); } :host(:not([active], [selected], [disabled])) #menu-item #label-button:hover, :host(:not([active], [selected])) #menu-item #caret-button:hover { - color: var(--uui-color-interactive-emphasis); + color: var( + --uui-menu-item-color-hover, + var(--uui-color-interactive-emphasis) + ); } /** Active */ :host([active]) #label-button, :host([active]) #caret-button { - color: var(--uui-color-current-contrast); + color: var( + --uui-menu-item-color-active, + var(--uui-color-current-contrast) + ); } :host([active]) #label-button-background { - background-color: var(--uui-color-current); + background-color: var( + --uui-menu-item-background-color-active, + var(--uui-color-current) + ); } :host([active]) #label-button:hover ~ #label-button-background, :host([active]) #caret-button:hover { - background-color: var(--uui-color-current-emphasis); + background-color: var( + --uui-menu-item-background-color-active-hover, + var(--uui-color-current-emphasis) + ); } /** Disabled */ :host([disabled]) #menu-item { - color: var(--uui-color-disabled-contrast); - background-color: var(--uui-color-disabled); + color: var( + --uui-menu-item-color-disabled, + var(--uui-color-disabled-contrast) + ); + background-color: var( + --uui-menu-item-background-color-disabled, + var(--uui-color-disabled) + ); } /** Selected */ @@ -258,11 +288,17 @@ export class UUIMenuItemElement extends SelectOnlyMixin( #label-button, :host([selected]:not([select-mode='highlight'], [disabled])) #caret-button { - color: var(--uui-color-selected-contrast); + color: var( + --uui-menu-item-color-selected, + var(--uui-color-selected-contrast) + ); } :host([selected]:not([select-mode='highlight'], [disabled])) #label-button-background { - background-color: var(--uui-color-selected); + background-color: var( + --uui-menu-item-background-color-selected, + var(--uui-color-selected) + ); } /** Selected, not highlight mode */ :host([selected]:not([select-mode='highlight'], [disabled])) @@ -270,7 +306,10 @@ export class UUIMenuItemElement extends SelectOnlyMixin( ~ #label-button-background, :host([selected]:not([select-mode='highlight'], [disabled])) #caret-button:hover { - background-color: var(--uui-color-selected-emphasis); + background-color: var( + --uui-menu-item-background-color-selected-hover, + var(--uui-color-selected-emphasis) + ); } /** highlight mode, default */ @@ -279,7 +318,10 @@ export class UUIMenuItemElement extends SelectOnlyMixin( #label-button:hover ~ #label-button-background { border-radius: var(--uui-border-radius); - background-color: var(--uui-color-surface-emphasis); + background-color: var( + --uui-menu-item-background-color-highlight, + var(--uui-color-surface-emphasis) + ); } /** highlight mode, active */ @@ -295,7 +337,10 @@ export class UUIMenuItemElement extends SelectOnlyMixin( #label-button:hover ~ #label-button-background { border-radius: var(--uui-border-radius); - background-color: var(--uui-color-current-emphasis); + background-color: var( + --uui-menu-item-background-color-highlight-active-selected, + var(--uui-color-current-emphasis) + ); } /** highlight mode, selected */ @@ -305,12 +350,18 @@ export class UUIMenuItemElement extends SelectOnlyMixin( :host([select-mode='highlight'][selected]:not([disabled])) #menu-item #caret-button { - color: var(--uui-color-interactive); + color: var( + --uui-menu-item-color-highlight-selected, + var(--uui-color-interactive) + ); } :host([select-mode='highlight'][selectable][selected]:not([disabled])) #menu-item #label-button:hover { - color: var(--uui-color-interactive-emphasis); + color: var( + --uui-menu-item-background-color-highlight-selectable-selected, + var(--uui-color-interactive-emphasis) + ); } /** highlight mode, selected, selectable caret hover */ @@ -318,8 +369,14 @@ export class UUIMenuItemElement extends SelectOnlyMixin( #menu-item #caret-button:hover { border-radius: var(--uui-border-radius); - background-color: var(--uui-color-surface-emphasis); - color: var(--uui-color-interactive-emphasis); + background-color: var( + --uui-menu-item-background-color-highlight-selectable-selected, + var(--uui-color-surface-emphasis) + ); + color: var( + --uui-menu-item-color-highlight-selectable-selected, + var(--uui-color-interactive-emphasis) + ); } /** Highlight borders */ @@ -331,7 +388,8 @@ export class UUIMenuItemElement extends SelectOnlyMixin( position: absolute; content: ''; inset: 1px; - border: 2px solid var(--uui-color-selected); + border: 2px solid + var(--uui-menu-item-border-color-highlight, var(--uui-color-selected)); opacity: 0; } @@ -343,7 +401,8 @@ export class UUIMenuItemElement extends SelectOnlyMixin( position: absolute; content: ''; inset: 1px 0 1px 1px; - border: 2px solid var(--uui-color-selected); + border: 2px solid + var(--uui-menu-item-border-color-highlight, var(--uui-color-selected)); border-right: none; } From def02631de128e0a45ef678b74f0bb4715d72ea9 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 5 Apr 2024 15:32:16 +0200 Subject: [PATCH 3/4] feat: :lipstick: add more custom properties to uui-box (#772) add --uui-box-border-width, add --uui-box-box-shadow, add --uui-box-border-radius --- packages/uui-box/lib/uui-box.element.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/uui-box/lib/uui-box.element.ts b/packages/uui-box/lib/uui-box.element.ts index 146ba8aa5..76f81d382 100644 --- a/packages/uui-box/lib/uui-box.element.ts +++ b/packages/uui-box/lib/uui-box.element.ts @@ -20,6 +20,9 @@ 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) * */ @defineElement('uui-box') @@ -119,8 +122,11 @@ export class UUIBoxElement extends LitElement { css` :host { display: block; - box-shadow: var(--uui-shadow-depth-1); - border-radius: var(--uui-border-radius); + border: var(--uui-box-border-width, 0) solid + 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); } From da9151af7381ddfd84f233789b364b6f66019885 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 5 Apr 2024 15:33:14 +0200 Subject: [PATCH 4/4] feat(uui-button): add transition property (#771) * cleanup * add transition and focus visible styles * feat: :sparkles: add transition custom property to uui-button --- packages/uui-button/lib/uui-button.element.ts | 34 ++++++++----------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts index 4ff7e924b..adc331be5 100644 --- a/packages/uui-button/lib/uui-button.element.ts +++ b/packages/uui-button/lib/uui-button.element.ts @@ -47,6 +47,7 @@ export type UUIButtonType = 'submit' | 'button' | 'reset'; * @cssprop --uui-button-contrast-hover - overwrite the text color for hover state * @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state * @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'. + * @cssprop --uui-button-transition - Add transition to the button. Default is none. */ @defineElement('uui-button') export class UUIButtonElement extends UUIFormControlMixin( @@ -335,7 +336,14 @@ export class UUIButtonElement extends UUIFormControlMixin( calc(var(--uui-size-2) * var(--uui-button-padding-left-factor)); box-shadow: none; + + transition: var(--uui-button-transition, none); + } + + #button:focus-visible { + outline: 2px solid var(--color-emphasis); } + button[disabled]:active, a:not([href]):active { animation: ${UUIHorizontalShakeAnimationValue}; @@ -354,25 +362,6 @@ export class UUIButtonElement extends UUIFormControlMixin( color: inherit; } - /* ANIMATIONS */ - @keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } - - @keyframes fadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } - } - /* edge case for default color */ :host(:not([color]):not([look='primary'])), :host([color='']:not([look='primary'])), @@ -452,6 +441,7 @@ export class UUIButtonElement extends UUIFormControlMixin( /* special for primary: */ font-weight: var(--uui-button-font-weight, 700); } + :host([look='primary']:hover) #button { background-color: var( --uui-button-background-color-hover, @@ -460,6 +450,12 @@ export class UUIButtonElement extends UUIFormControlMixin( color: var(--uui-button-contrast-hover, var(--color-contrast)); border-color: var(--uui-button-border-color-hover, transparent); } + + /* special outline offset tof primary style so you can see the outline */ + :host([look='primary']) #button:focus-visible { + outline-offset: 2px; + } + :host([look='primary'][disabled]) #button { background-color: var( --uui-button-background-color-disabled,