From 4c888797e3cd28f4830760dc13c86a3047b55d89 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Tue, 27 Dec 2022 18:12:10 +0330 Subject: [PATCH 01/21] feat(ui-kit/card): base card element --- ui/ui-kit/src/card/card.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 ui/ui-kit/src/card/card.ts diff --git a/ui/ui-kit/src/card/card.ts b/ui/ui-kit/src/card/card.ts new file mode 100644 index 000000000..1515a5916 --- /dev/null +++ b/ui/ui-kit/src/card/card.ts @@ -0,0 +1,18 @@ +import {AlwatrDummyElement, css, html, TemplateResult} from '@alwatr/element'; + +export class AlwatrCard extends AlwatrDummyElement { + static override styles = [ + css` + :host { + display: flex; + flex-direction: column; + padding: 1rem; + border-radius: var(--md-sys-shape-corner-small-default-size); + } + `, + ]; + + override render(): TemplateResult { + return html` `; + } +} From 1e9746e7dcbfce6f7acfa828ad18418f1152ec24 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Tue, 27 Dec 2022 18:12:45 +0330 Subject: [PATCH 02/21] feat(ui-kit): elevated, filled, outlined card components --- ui/ui-kit/src/card/elevated-card.ts | 29 +++++++++++++++++++++++++++++ ui/ui-kit/src/card/filled-card.ts | 25 +++++++++++++++++++++++++ ui/ui-kit/src/card/outlined-card.ts | 26 ++++++++++++++++++++++++++ 3 files changed, 80 insertions(+) create mode 100644 ui/ui-kit/src/card/elevated-card.ts create mode 100644 ui/ui-kit/src/card/filled-card.ts create mode 100644 ui/ui-kit/src/card/outlined-card.ts diff --git a/ui/ui-kit/src/card/elevated-card.ts b/ui/ui-kit/src/card/elevated-card.ts new file mode 100644 index 000000000..207c1ef8c --- /dev/null +++ b/ui/ui-kit/src/card/elevated-card.ts @@ -0,0 +1,29 @@ +import {css, customElement} from '@alwatr/element'; + +import {hostElevation} from '../elavation/style.js'; +import {AlwatrCard} from './card.js'; + +declare global { + interface HTMLElementTagNameMap { + 'alwatr-elevated-card': AlwatrElevatedCard; + } +} + +/** + * Alwatr elevated card element. + */ +@customElement('alwatr-elevated-card') +export class AlwatrElevatedCard extends AlwatrCard { + static override styles = [ + hostElevation, + ...AlwatrCard.styles, + css` + :host { + color: var(--md-sys-color-on-surface); + background-color: var(--md-sys-color-surface); + + --_elevation-level: 1; + } + `, + ]; +} diff --git a/ui/ui-kit/src/card/filled-card.ts b/ui/ui-kit/src/card/filled-card.ts new file mode 100644 index 000000000..42a57dda4 --- /dev/null +++ b/ui/ui-kit/src/card/filled-card.ts @@ -0,0 +1,25 @@ +import {css, customElement} from '@alwatr/element'; + +import {AlwatrCard} from './card.js'; + +declare global { + interface HTMLElementTagNameMap { + 'alwatr-filled-card': AlwatrFilledCard; + } +} + +/** + * Alwatr filled card element. + */ +@customElement('alwatr-filled-card') +export class AlwatrFilledCard extends AlwatrCard { + static override styles = [ + ...AlwatrCard.styles, + css` + :host { + color: var(--md-sys-color-on-primary-container); + background-color: var(--md-sys-color-primary-container); + } + `, + ]; +} diff --git a/ui/ui-kit/src/card/outlined-card.ts b/ui/ui-kit/src/card/outlined-card.ts new file mode 100644 index 000000000..b921877dc --- /dev/null +++ b/ui/ui-kit/src/card/outlined-card.ts @@ -0,0 +1,26 @@ +import {css, customElement} from '@alwatr/element'; + +import {AlwatrCard} from './card.js'; + +declare global { + interface HTMLElementTagNameMap { + 'alwatr-outlined-card': AlwatrOutlinedCard; + } +} + +/** + * Alwatr outlined card element. + */ +@customElement('alwatr-outlined-card') +export class AlwatrOutlinedCard extends AlwatrCard { + static override styles = [ + ...AlwatrCard.styles, + css` + :host { + color: var(--md-sys-color-on-background); + background-color: var(--md-sys-color-background); + border: 1px solid var(--md-sys-color-outline); + } + `, + ]; +} From 00c4b643d70bf7c95d4e9dace5f19cf7710c8d0c Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Tue, 27 Dec 2022 18:33:35 +0330 Subject: [PATCH 03/21] feat(ui-kit/cards): imporve styles & rename --- ui/ui-kit/src/{card => cards}/card.ts | 3 +++ ui/ui-kit/src/{card => cards}/elevated-card.ts | 4 +--- ui/ui-kit/src/{card => cards}/filled-card.ts | 2 ++ ui/ui-kit/src/{card => cards}/outlined-card.ts | 2 ++ 4 files changed, 8 insertions(+), 3 deletions(-) rename ui/ui-kit/src/{card => cards}/card.ts (85%) rename ui/ui-kit/src/{card => cards}/elevated-card.ts (80%) rename ui/ui-kit/src/{card => cards}/filled-card.ts (94%) rename ui/ui-kit/src/{card => cards}/outlined-card.ts (94%) diff --git a/ui/ui-kit/src/card/card.ts b/ui/ui-kit/src/cards/card.ts similarity index 85% rename from ui/ui-kit/src/card/card.ts rename to ui/ui-kit/src/cards/card.ts index 1515a5916..1bc2dc537 100644 --- a/ui/ui-kit/src/card/card.ts +++ b/ui/ui-kit/src/cards/card.ts @@ -1,7 +1,10 @@ import {AlwatrDummyElement, css, html, TemplateResult} from '@alwatr/element'; +import {hostElevation} from '../elavation/style.js'; + export class AlwatrCard extends AlwatrDummyElement { static override styles = [ + hostElevation, css` :host { display: flex; diff --git a/ui/ui-kit/src/card/elevated-card.ts b/ui/ui-kit/src/cards/elevated-card.ts similarity index 80% rename from ui/ui-kit/src/card/elevated-card.ts rename to ui/ui-kit/src/cards/elevated-card.ts index 207c1ef8c..188505561 100644 --- a/ui/ui-kit/src/card/elevated-card.ts +++ b/ui/ui-kit/src/cards/elevated-card.ts @@ -1,6 +1,5 @@ import {css, customElement} from '@alwatr/element'; -import {hostElevation} from '../elavation/style.js'; import {AlwatrCard} from './card.js'; declare global { @@ -15,12 +14,11 @@ declare global { @customElement('alwatr-elevated-card') export class AlwatrElevatedCard extends AlwatrCard { static override styles = [ - hostElevation, ...AlwatrCard.styles, css` :host { color: var(--md-sys-color-on-surface); - background-color: var(--md-sys-color-surface); + background-color: var(--md-sys-color-surface-variant); --_elevation-level: 1; } diff --git a/ui/ui-kit/src/card/filled-card.ts b/ui/ui-kit/src/cards/filled-card.ts similarity index 94% rename from ui/ui-kit/src/card/filled-card.ts rename to ui/ui-kit/src/cards/filled-card.ts index 42a57dda4..fc191581c 100644 --- a/ui/ui-kit/src/card/filled-card.ts +++ b/ui/ui-kit/src/cards/filled-card.ts @@ -19,6 +19,8 @@ export class AlwatrFilledCard extends AlwatrCard { :host { color: var(--md-sys-color-on-primary-container); background-color: var(--md-sys-color-primary-container); + + --_elevation-level: 0; } `, ]; diff --git a/ui/ui-kit/src/card/outlined-card.ts b/ui/ui-kit/src/cards/outlined-card.ts similarity index 94% rename from ui/ui-kit/src/card/outlined-card.ts rename to ui/ui-kit/src/cards/outlined-card.ts index b921877dc..12d4d63bf 100644 --- a/ui/ui-kit/src/card/outlined-card.ts +++ b/ui/ui-kit/src/cards/outlined-card.ts @@ -20,6 +20,8 @@ export class AlwatrOutlinedCard extends AlwatrCard { color: var(--md-sys-color-on-background); background-color: var(--md-sys-color-background); border: 1px solid var(--md-sys-color-outline); + + --_elevation-level: 0; } `, ]; From 2ed156b73540d2b6de42a79522729a84b44613cf Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Tue, 27 Dec 2022 18:56:36 +0330 Subject: [PATCH 04/21] fix(ui-kit/cards): theming variables --- ui/ui-kit/src/cards/elevated-card.ts | 4 ++-- ui/ui-kit/src/cards/filled-card.ts | 4 ++-- ui/ui-kit/src/cards/outlined-card.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/ui/ui-kit/src/cards/elevated-card.ts b/ui/ui-kit/src/cards/elevated-card.ts index 188505561..fe3c50d1e 100644 --- a/ui/ui-kit/src/cards/elevated-card.ts +++ b/ui/ui-kit/src/cards/elevated-card.ts @@ -17,8 +17,8 @@ export class AlwatrElevatedCard extends AlwatrCard { ...AlwatrCard.styles, css` :host { - color: var(--md-sys-color-on-surface); - background-color: var(--md-sys-color-surface-variant); + color: var(--md-sys-color-surface-tint); + background-color: var(--md-sys-color-surface); --_elevation-level: 1; } diff --git a/ui/ui-kit/src/cards/filled-card.ts b/ui/ui-kit/src/cards/filled-card.ts index fc191581c..20dcbb72e 100644 --- a/ui/ui-kit/src/cards/filled-card.ts +++ b/ui/ui-kit/src/cards/filled-card.ts @@ -17,8 +17,8 @@ export class AlwatrFilledCard extends AlwatrCard { ...AlwatrCard.styles, css` :host { - color: var(--md-sys-color-on-primary-container); - background-color: var(--md-sys-color-primary-container); + color: var(--md-sys-color-surface-tint); + background-color: var(--md-sys-color-surface-variant); --_elevation-level: 0; } diff --git a/ui/ui-kit/src/cards/outlined-card.ts b/ui/ui-kit/src/cards/outlined-card.ts index 12d4d63bf..912caffbb 100644 --- a/ui/ui-kit/src/cards/outlined-card.ts +++ b/ui/ui-kit/src/cards/outlined-card.ts @@ -17,8 +17,8 @@ export class AlwatrOutlinedCard extends AlwatrCard { ...AlwatrCard.styles, css` :host { - color: var(--md-sys-color-on-background); - background-color: var(--md-sys-color-background); + color: var(--md-sys-color-surface-tint); + background-color: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline); --_elevation-level: 0; From 738da92a6ea6c99ab789a3af1f36beb15dbc2a04 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Sat, 31 Dec 2022 00:27:13 +0330 Subject: [PATCH 05/21] fix(ui-kit/card): styles --- ui/ui-kit/src/cards/card.ts | 4 ++-- ui/ui-kit/src/cards/elevated-card.ts | 3 +-- ui/ui-kit/src/cards/filled-card.ts | 3 +-- ui/ui-kit/src/cards/outlined-card.ts | 5 ++--- 4 files changed, 6 insertions(+), 9 deletions(-) diff --git a/ui/ui-kit/src/cards/card.ts b/ui/ui-kit/src/cards/card.ts index 1bc2dc537..1bbc5bf7b 100644 --- a/ui/ui-kit/src/cards/card.ts +++ b/ui/ui-kit/src/cards/card.ts @@ -9,8 +9,8 @@ export class AlwatrCard extends AlwatrDummyElement { :host { display: flex; flex-direction: column; - padding: 1rem; - border-radius: var(--md-sys-shape-corner-small-default-size); + border-radius: var(--alwatr-sys-shape-corner-medium-default-size); + color: var(--alwatr-sys-color-on-surface); } `, ]; diff --git a/ui/ui-kit/src/cards/elevated-card.ts b/ui/ui-kit/src/cards/elevated-card.ts index fe3c50d1e..22ed509df 100644 --- a/ui/ui-kit/src/cards/elevated-card.ts +++ b/ui/ui-kit/src/cards/elevated-card.ts @@ -17,8 +17,7 @@ export class AlwatrElevatedCard extends AlwatrCard { ...AlwatrCard.styles, css` :host { - color: var(--md-sys-color-surface-tint); - background-color: var(--md-sys-color-surface); + background-color: var(--alwatr-sys-color-surface); --_elevation-level: 1; } diff --git a/ui/ui-kit/src/cards/filled-card.ts b/ui/ui-kit/src/cards/filled-card.ts index 20dcbb72e..89845f72b 100644 --- a/ui/ui-kit/src/cards/filled-card.ts +++ b/ui/ui-kit/src/cards/filled-card.ts @@ -17,8 +17,7 @@ export class AlwatrFilledCard extends AlwatrCard { ...AlwatrCard.styles, css` :host { - color: var(--md-sys-color-surface-tint); - background-color: var(--md-sys-color-surface-variant); + background-color: var(--alwatr-sys-color-surface-variant); --_elevation-level: 0; } diff --git a/ui/ui-kit/src/cards/outlined-card.ts b/ui/ui-kit/src/cards/outlined-card.ts index 912caffbb..9012add82 100644 --- a/ui/ui-kit/src/cards/outlined-card.ts +++ b/ui/ui-kit/src/cards/outlined-card.ts @@ -17,9 +17,8 @@ export class AlwatrOutlinedCard extends AlwatrCard { ...AlwatrCard.styles, css` :host { - color: var(--md-sys-color-surface-tint); - background-color: var(--md-sys-color-surface); - border: 1px solid var(--md-sys-color-outline); + background-color: var(--alwatr-sys-color-surface); + border: 1px solid var(--alwatr-sys-color-outline); --_elevation-level: 0; } From ec2c0f20e96ce6860ffc4a0c9c9ad5735c3913ab Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Thu, 5 Jan 2023 18:48:44 +0330 Subject: [PATCH 06/21] feat(cards): update style variables --- ui/ui-kit/src/cards/card.ts | 4 ++-- ui/ui-kit/src/cards/elevated-card.ts | 2 +- ui/ui-kit/src/cards/filled-card.ts | 2 +- ui/ui-kit/src/cards/outlined-card.ts | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/ui/ui-kit/src/cards/card.ts b/ui/ui-kit/src/cards/card.ts index 1bbc5bf7b..86c26d2da 100644 --- a/ui/ui-kit/src/cards/card.ts +++ b/ui/ui-kit/src/cards/card.ts @@ -9,8 +9,8 @@ export class AlwatrCard extends AlwatrDummyElement { :host { display: flex; flex-direction: column; - border-radius: var(--alwatr-sys-shape-corner-medium-default-size); - color: var(--alwatr-sys-color-on-surface); + border-radius: var(--sys-shape-corner-medium-default-size); + color: var(--sys-color-on-surface); } `, ]; diff --git a/ui/ui-kit/src/cards/elevated-card.ts b/ui/ui-kit/src/cards/elevated-card.ts index 22ed509df..8861e3954 100644 --- a/ui/ui-kit/src/cards/elevated-card.ts +++ b/ui/ui-kit/src/cards/elevated-card.ts @@ -17,7 +17,7 @@ export class AlwatrElevatedCard extends AlwatrCard { ...AlwatrCard.styles, css` :host { - background-color: var(--alwatr-sys-color-surface); + background-color: var(--sys-color-surface); --_elevation-level: 1; } diff --git a/ui/ui-kit/src/cards/filled-card.ts b/ui/ui-kit/src/cards/filled-card.ts index 89845f72b..8a0b3dfe0 100644 --- a/ui/ui-kit/src/cards/filled-card.ts +++ b/ui/ui-kit/src/cards/filled-card.ts @@ -17,7 +17,7 @@ export class AlwatrFilledCard extends AlwatrCard { ...AlwatrCard.styles, css` :host { - background-color: var(--alwatr-sys-color-surface-variant); + background-color: var(--sys-color-surface-variant); --_elevation-level: 0; } diff --git a/ui/ui-kit/src/cards/outlined-card.ts b/ui/ui-kit/src/cards/outlined-card.ts index 9012add82..72e495afe 100644 --- a/ui/ui-kit/src/cards/outlined-card.ts +++ b/ui/ui-kit/src/cards/outlined-card.ts @@ -17,8 +17,8 @@ export class AlwatrOutlinedCard extends AlwatrCard { ...AlwatrCard.styles, css` :host { - background-color: var(--alwatr-sys-color-surface); - border: 1px solid var(--alwatr-sys-color-outline); + background-color: var(--sys-color-surface); + border: 1px solid var(--sys-color-outline); --_elevation-level: 0; } From 537293e02659fcfb09e16f699e747d60ef8d7f1f Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Sun, 8 Jan 2023 16:02:38 +0330 Subject: [PATCH 07/21] refactor(cards): elevation --- ui/ui-kit/src/cards/card.ts | 5 ++--- ui/ui-kit/src/cards/elevated-card.ts | 2 +- ui/ui-kit/src/cards/filled-card.ts | 2 -- ui/ui-kit/src/cards/outlined-card.ts | 2 -- 4 files changed, 3 insertions(+), 8 deletions(-) diff --git a/ui/ui-kit/src/cards/card.ts b/ui/ui-kit/src/cards/card.ts index 86c26d2da..0acad8117 100644 --- a/ui/ui-kit/src/cards/card.ts +++ b/ui/ui-kit/src/cards/card.ts @@ -1,16 +1,15 @@ import {AlwatrDummyElement, css, html, TemplateResult} from '@alwatr/element'; -import {hostElevation} from '../elavation/style.js'; - export class AlwatrCard extends AlwatrDummyElement { static override styles = [ - hostElevation, css` :host { display: flex; flex-direction: column; border-radius: var(--sys-shape-corner-medium-default-size); color: var(--sys-color-on-surface); + + --elevation-level: 0; } `, ]; diff --git a/ui/ui-kit/src/cards/elevated-card.ts b/ui/ui-kit/src/cards/elevated-card.ts index 8861e3954..98ee9319c 100644 --- a/ui/ui-kit/src/cards/elevated-card.ts +++ b/ui/ui-kit/src/cards/elevated-card.ts @@ -19,7 +19,7 @@ export class AlwatrElevatedCard extends AlwatrCard { :host { background-color: var(--sys-color-surface); - --_elevation-level: 1; + --elevation-level: 1; } `, ]; diff --git a/ui/ui-kit/src/cards/filled-card.ts b/ui/ui-kit/src/cards/filled-card.ts index 8a0b3dfe0..3b33ef35d 100644 --- a/ui/ui-kit/src/cards/filled-card.ts +++ b/ui/ui-kit/src/cards/filled-card.ts @@ -18,8 +18,6 @@ export class AlwatrFilledCard extends AlwatrCard { css` :host { background-color: var(--sys-color-surface-variant); - - --_elevation-level: 0; } `, ]; diff --git a/ui/ui-kit/src/cards/outlined-card.ts b/ui/ui-kit/src/cards/outlined-card.ts index 72e495afe..625078e41 100644 --- a/ui/ui-kit/src/cards/outlined-card.ts +++ b/ui/ui-kit/src/cards/outlined-card.ts @@ -19,8 +19,6 @@ export class AlwatrOutlinedCard extends AlwatrCard { :host { background-color: var(--sys-color-surface); border: 1px solid var(--sys-color-outline); - - --_elevation-level: 0; } `, ]; From 9d3c5f176ad5dd8a54c3caa74b22614a29e9e7e8 Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Tue, 10 Jan 2023 17:34:46 +0330 Subject: [PATCH 08/21] refactor(ui/card): rename card --- ui/ui-kit/src/{cards => card}/card.ts | 0 ui/ui-kit/src/{cards => card}/elevated-card.ts | 0 ui/ui-kit/src/{cards => card}/filled-card.ts | 0 ui/ui-kit/src/{cards => card}/outlined-card.ts | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename ui/ui-kit/src/{cards => card}/card.ts (100%) rename ui/ui-kit/src/{cards => card}/elevated-card.ts (100%) rename ui/ui-kit/src/{cards => card}/filled-card.ts (100%) rename ui/ui-kit/src/{cards => card}/outlined-card.ts (100%) diff --git a/ui/ui-kit/src/cards/card.ts b/ui/ui-kit/src/card/card.ts similarity index 100% rename from ui/ui-kit/src/cards/card.ts rename to ui/ui-kit/src/card/card.ts diff --git a/ui/ui-kit/src/cards/elevated-card.ts b/ui/ui-kit/src/card/elevated-card.ts similarity index 100% rename from ui/ui-kit/src/cards/elevated-card.ts rename to ui/ui-kit/src/card/elevated-card.ts diff --git a/ui/ui-kit/src/cards/filled-card.ts b/ui/ui-kit/src/card/filled-card.ts similarity index 100% rename from ui/ui-kit/src/cards/filled-card.ts rename to ui/ui-kit/src/card/filled-card.ts diff --git a/ui/ui-kit/src/cards/outlined-card.ts b/ui/ui-kit/src/card/outlined-card.ts similarity index 100% rename from ui/ui-kit/src/cards/outlined-card.ts rename to ui/ui-kit/src/card/outlined-card.ts From 481031c93b0e49f7a541087da1fd283c5bfada36 Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Tue, 10 Jan 2023 17:43:39 +0330 Subject: [PATCH 09/21] fix(card): review styles --- ui/ui-kit/src/card/card.ts | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/ui/ui-kit/src/card/card.ts b/ui/ui-kit/src/card/card.ts index 0acad8117..2009af45f 100644 --- a/ui/ui-kit/src/card/card.ts +++ b/ui/ui-kit/src/card/card.ts @@ -1,20 +1,22 @@ -import {AlwatrDummyElement, css, html, TemplateResult} from '@alwatr/element'; +import {AlwatrDummyElement, css, html} from '@alwatr/element'; -export class AlwatrCard extends AlwatrDummyElement { - static override styles = [ - css` - :host { - display: flex; - flex-direction: column; - border-radius: var(--sys-shape-corner-medium-default-size); - color: var(--sys-color-on-surface); +import type {CSSResultGroup} from '@alwatr/element'; - --elevation-level: 0; - } - `, - ]; +/** + * Alwatr Card Base Element + */ +export class AlwatrCard extends AlwatrDummyElement { + static override styles: CSSResultGroup = css` + :host { + --elevation-level: 0; + border-radius: var(--sys-shape-corner-medium-default-size); + color: var(--sys-color-on-surface); + background-color: var(--sys-color-surface); + } + `; - override render(): TemplateResult { - return html` `; + override render(): unknown { + super.render(); + return html``; } } From 81a26818e6c20ccc55da7c6676a5fa31a429df3d Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Tue, 10 Jan 2023 18:32:01 +0330 Subject: [PATCH 10/21] refactor(ui-kit/card): types --- ui/ui-kit/src/card/card.ts | 45 +++++++++++++++++++++++------ ui/ui-kit/src/card/elevated-card.ts | 26 ----------------- ui/ui-kit/src/card/filled-card.ts | 24 --------------- ui/ui-kit/src/card/outlined-card.ts | 25 ---------------- 4 files changed, 36 insertions(+), 84 deletions(-) delete mode 100644 ui/ui-kit/src/card/elevated-card.ts delete mode 100644 ui/ui-kit/src/card/filled-card.ts delete mode 100644 ui/ui-kit/src/card/outlined-card.ts diff --git a/ui/ui-kit/src/card/card.ts b/ui/ui-kit/src/card/card.ts index 2009af45f..41ee238b9 100644 --- a/ui/ui-kit/src/card/card.ts +++ b/ui/ui-kit/src/card/card.ts @@ -1,19 +1,46 @@ -import {AlwatrDummyElement, css, html} from '@alwatr/element'; +import {AlwatrDummyElement, css, customElement, html} from '@alwatr/element'; + +import {focusRingStyle} from '../style/helper/focus-ring.js'; import type {CSSResultGroup} from '@alwatr/element'; +export type CardType = 'elevated' | 'filled' | 'outlined'; + +declare global { + interface HTMLElementTagNameMap { + 'alwatr-card': AlwatrCard; + } +} + /** * Alwatr Card Base Element + * + * @attr {elevated|filled|outlined} type */ +@customElement('alwatr-card') export class AlwatrCard extends AlwatrDummyElement { - static override styles: CSSResultGroup = css` - :host { - --elevation-level: 0; - border-radius: var(--sys-shape-corner-medium-default-size); - color: var(--sys-color-on-surface); - background-color: var(--sys-color-surface); - } - `; + static override styles: CSSResultGroup = [ + focusRingStyle, + css` + :host, + :host([type="filled"]) { + --_color-hsl: var(--sys-color-on-surface-variant-hsl); + background-color: var(--sys-color-surface-variant); + border-radius: var(--sys-radius-medium); + } + + :host([type="elevated"]) { + --_color-hsl: var(--sys-color-on-surface-hsl); + background-color: var(--sys-color-surface); + } + + :host([type="outlined"]) { + --_color-hsl: var(--sys-color-on-surface-hsl); + background-color: var(--sys-color-surface); + border: 1px solid var(--sys-color-outline); + } + `, + ]; override render(): unknown { super.render(); diff --git a/ui/ui-kit/src/card/elevated-card.ts b/ui/ui-kit/src/card/elevated-card.ts deleted file mode 100644 index 98ee9319c..000000000 --- a/ui/ui-kit/src/card/elevated-card.ts +++ /dev/null @@ -1,26 +0,0 @@ -import {css, customElement} from '@alwatr/element'; - -import {AlwatrCard} from './card.js'; - -declare global { - interface HTMLElementTagNameMap { - 'alwatr-elevated-card': AlwatrElevatedCard; - } -} - -/** - * Alwatr elevated card element. - */ -@customElement('alwatr-elevated-card') -export class AlwatrElevatedCard extends AlwatrCard { - static override styles = [ - ...AlwatrCard.styles, - css` - :host { - background-color: var(--sys-color-surface); - - --elevation-level: 1; - } - `, - ]; -} diff --git a/ui/ui-kit/src/card/filled-card.ts b/ui/ui-kit/src/card/filled-card.ts deleted file mode 100644 index 3b33ef35d..000000000 --- a/ui/ui-kit/src/card/filled-card.ts +++ /dev/null @@ -1,24 +0,0 @@ -import {css, customElement} from '@alwatr/element'; - -import {AlwatrCard} from './card.js'; - -declare global { - interface HTMLElementTagNameMap { - 'alwatr-filled-card': AlwatrFilledCard; - } -} - -/** - * Alwatr filled card element. - */ -@customElement('alwatr-filled-card') -export class AlwatrFilledCard extends AlwatrCard { - static override styles = [ - ...AlwatrCard.styles, - css` - :host { - background-color: var(--sys-color-surface-variant); - } - `, - ]; -} diff --git a/ui/ui-kit/src/card/outlined-card.ts b/ui/ui-kit/src/card/outlined-card.ts deleted file mode 100644 index 625078e41..000000000 --- a/ui/ui-kit/src/card/outlined-card.ts +++ /dev/null @@ -1,25 +0,0 @@ -import {css, customElement} from '@alwatr/element'; - -import {AlwatrCard} from './card.js'; - -declare global { - interface HTMLElementTagNameMap { - 'alwatr-outlined-card': AlwatrOutlinedCard; - } -} - -/** - * Alwatr outlined card element. - */ -@customElement('alwatr-outlined-card') -export class AlwatrOutlinedCard extends AlwatrCard { - static override styles = [ - ...AlwatrCard.styles, - css` - :host { - background-color: var(--sys-color-surface); - border: 1px solid var(--sys-color-outline); - } - `, - ]; -} From bfc8f4f2be306321fcfe40b9e44d30c640eb085d Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Tue, 10 Jan 2023 18:32:05 +0330 Subject: [PATCH 11/21] feat(demo-pwa): add middleware for routing --- ui/demo-pwa/web-dev-server.config.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/ui/demo-pwa/web-dev-server.config.js b/ui/demo-pwa/web-dev-server.config.js index 037818a25..08a99e333 100644 --- a/ui/demo-pwa/web-dev-server.config.js +++ b/ui/demo-pwa/web-dev-server.config.js @@ -3,7 +3,7 @@ export default { port: 8080, open: true, watch: true, - // appIndex: 'index.html', + appIndex: 'index.html', nodeResolve: { exportConditions: ['development'] }, @@ -13,5 +13,15 @@ export default { // debug: false, preserveSymlinks: true, plugins: [], - middleware: [], + middleware: [(context, next) => { + // if file not found, return app index.html + if (!( + context.url === '/' || + context.url.startsWith('/__web-dev-server') || + fs.existsSync(config.rootDir + context.url) + )) { + context.url = config.appIndex; + } + return next(); + }], }; From 16c11f05464f05a0949207975a08009ca969943e Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Tue, 10 Jan 2023 18:40:26 +0330 Subject: [PATCH 12/21] feat(ui/demo-pwa): page card --- ui/demo-pwa/src/page-card.ts | 45 ++++++++++++++++++++++++++++++++++++ ui/demo-pwa/src/pwa-root.ts | 7 ++++-- 2 files changed, 50 insertions(+), 2 deletions(-) create mode 100644 ui/demo-pwa/src/page-card.ts diff --git a/ui/demo-pwa/src/page-card.ts b/ui/demo-pwa/src/page-card.ts new file mode 100644 index 000000000..8667ed373 --- /dev/null +++ b/ui/demo-pwa/src/page-card.ts @@ -0,0 +1,45 @@ +import {customElement, AlwatrSmartElement, css, html} from '@alwatr/element'; + +import '@alwatr/ui-kit/card/card.js'; + +declare global { + interface HTMLElementTagNameMap { + 'alwatr-page-card': AlwatrPageCard; + } +} + +/** + * Alwatr Demo Home Page + */ +@customElement('alwatr-page-card') +export class AlwatrPageCard extends AlwatrSmartElement { + static override styles = css` + :host { + display: flex; + flex-wrap: wrap; + padding: 0 var(--sys-spacing-side-padding); + box-sizing: border-box; + height: 100%; + gap: var(--sys-spacing-side-padding); + } + + alwatr-card { + width: 25%; + } + `; + + override render(): unknown { + super.render(); + return html` + elevated + elevated + elevated + filled + filled + filled + outlined + outlined + outlined + `; + } +} diff --git a/ui/demo-pwa/src/pwa-root.ts b/ui/demo-pwa/src/pwa-root.ts index 218bc89a3..10bfa48c9 100644 --- a/ui/demo-pwa/src/pwa-root.ts +++ b/ui/demo-pwa/src/pwa-root.ts @@ -1,7 +1,7 @@ -import {AlwatrRootElement, html} from '@alwatr/element'; -import {customElement} from 'lit/decorators.js'; +import {AlwatrRootElement, html, customElement} from '@alwatr/element'; import './page-chat.js'; +import './page-card.js'; import type {RoutesConfig} from '@alwatr/router'; @@ -22,6 +22,9 @@ export class AlwatrPwaRoot extends AlwatrRootElement { home: { render: () => html``, }, + card: { + render: () => html``, + }, }, }; } From ba1e2c137c34109dfe24c00ab30c9e69cd86d6b9 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Tue, 10 Jan 2023 19:28:26 +0330 Subject: [PATCH 13/21] refactor(ui-kit/tokens/elevation): colors with hsl --- ui/demo-pwa/style/tokens/elevation.css | 150 ++++++++++++------------- 1 file changed, 75 insertions(+), 75 deletions(-) diff --git a/ui/demo-pwa/style/tokens/elevation.css b/ui/demo-pwa/style/tokens/elevation.css index 39eea3796..2006641f8 100644 --- a/ui/demo-pwa/style/tokens/elevation.css +++ b/ui/demo-pwa/style/tokens/elevation.css @@ -1,127 +1,127 @@ :root { --elevation-0: - 0px 0px 0px 0px rgba(0, 0, 0, 0.2), - 0px 0px 0px 0px rgba(0, 0, 0, 0.14), - 0px 0px 0px 0px rgba(0, 0, 0, 0.12) + 0px 0px 0px 0px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 0px 0px 0px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 0px 0px 0px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-1: - 0px 2px 1px -1px rgba(0, 0, 0, 0.2), - 0px 1px 1px 0px rgba(0, 0, 0, 0.14), - 0px 1px 3px 0px rgba(0, 0, 0, 0.12) + 0px 2px 1px -1px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 1px 1px 0px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 1px 3px 0px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-2: - 0px 3px 1px -2px rgba(0, 0, 0, 0.2), - 0px 2px 2px 0px rgba(0, 0, 0, 0.14), - 0px 1px 5px 0px rgba(0, 0, 0, 0.12) + 0px 3px 1px -2px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 2px 2px 0px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 1px 5px 0px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-3: - 0px 3px 3px -2px rgba(0, 0, 0, 0.2), - 0px 3px 4px 0px rgba(0, 0, 0, 0.14), - 0px 1px 8px 0px rgba(0, 0, 0, 0.12) + 0px 3px 3px -2px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 3px 4px 0px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 1px 8px 0px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-4: - 0px 2px 4px -1px rgba(0, 0, 0, 0.2), - 0px 4px 5px 0px rgba(0, 0, 0, 0.14), - 0px 1px 10px 0px rgba(0, 0, 0, 0.12) + 0px 2px 4px -1px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 4px 5px 0px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 1px 10px 0px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-5: - 0px 3px 5px -1px rgba(0, 0, 0, 0.2), - 0px 5px 8px 0px rgba(0, 0, 0, 0.14), - 0px 1px 14px 0px rgba(0, 0, 0, 0.12) + 0px 3px 5px -1px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 5px 8px 0px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 1px 14px 0px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-6: - 0px 3px 5px -1px rgba(0, 0, 0, 0.2), - 0px 6px 10px 0px rgba(0, 0, 0, 0.14), - 0px 1px 18px 0px rgba(0, 0, 0, 0.12) + 0px 3px 5px -1px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 6px 10px 0px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 1px 18px 0px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-7: - 0px 4px 5px -2px rgba(0, 0, 0, 0.2), - 0px 7px 10px 1px rgba(0, 0, 0, 0.14), - 0px 2px 16px 1px rgba(0, 0, 0, 0.12) + 0px 4px 5px -2px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 7px 10px 1px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 2px 16px 1px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-8: - 0px 5px 5px -3px rgba(0, 0, 0, 0.2), - 0px 8px 10px 1px rgba(0, 0, 0, 0.14), - 0px 3px 14px 2px rgba(0, 0, 0, 0.12) + 0px 5px 5px -3px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 8px 10px 1px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 3px 14px 2px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-9: - 0px 5px 6px -3px rgba(0, 0, 0, 0.2), - 0px 9px 12px 1px rgba(0, 0, 0, 0.14), - 0px 3px 16px 2px rgba(0, 0, 0, 0.12) + 0px 5px 6px -3px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 9px 12px 1px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 3px 16px 2px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-10: - 0px 6px 6px -3px rgba(0, 0, 0, 0.2), - 0px 10px 14px 1px rgba(0, 0, 0, 0.14), - 0px 4px 18px 3px rgba(0, 0, 0, 0.12) + 0px 6px 6px -3px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 10px 14px 1px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 4px 18px 3px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-11: - 0px 6px 7px -4px rgba(0, 0, 0, 0.2), - 0px 11px 15px 1px rgba(0, 0, 0, 0.14), - 0px 4px 20px 3px rgba(0, 0, 0, 0.12) + 0px 6px 7px -4px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 11px 15px 1px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 4px 20px 3px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-12: - 0px 7px 8px -4px rgba(0, 0, 0, 0.2), - 0px 12px 17px 2px rgba(0, 0, 0, 0.14), - 0px 5px 22px 4px rgba(0, 0, 0, 0.12) + 0px 7px 8px -4px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 12px 17px 2px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 5px 22px 4px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-13: - 0px 7px 8px -4px rgba(0, 0, 0, 0.2), - 0px 13px 19px 2px rgba(0, 0, 0, 0.14), - 0px 5px 24px 4px rgba(0, 0, 0, 0.12) + 0px 7px 8px -4px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 13px 19px 2px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 5px 24px 4px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-14: - 0px 7px 9px -4px rgba(0, 0, 0, 0.2), - 0px 14px 21px 2px rgba(0, 0, 0, 0.14), - 0px 5px 26px 4px rgba(0, 0, 0, 0.12) + 0px 7px 9px -4px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 14px 21px 2px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 5px 26px 4px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-15: - 0px 8px 9px -5px rgba(0, 0, 0, 0.2), - 0px 15px 22px 2px rgba(0, 0, 0, 0.14), - 0px 6px 28px 5px rgba(0, 0, 0, 0.12) + 0px 8px 9px -5px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 15px 22px 2px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 6px 28px 5px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-16: - 0px 8px 10px -5px rgba(0, 0, 0, 0.2), - 0px 16px 24px 2px rgba(0, 0, 0, 0.14), - 0px 6px 30px 5px rgba(0, 0, 0, 0.12) + 0px 8px 10px -5px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 16px 24px 2px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 6px 30px 5px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-17: - 0px 8px 11px -5px rgba(0, 0, 0, 0.2), - 0px 17px 26px 2px rgba(0, 0, 0, 0.14), - 0px 6px 32px 5px rgba(0, 0, 0, 0.12) + 0px 8px 11px -5px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 17px 26px 2px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 6px 32px 5px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-18: - 0px 9px 11px -5px rgba(0, 0, 0, 0.2), - 0px 18px 28px 2px rgba(0, 0, 0, 0.14), - 0px 7px 34px 6px rgba(0, 0, 0, 0.12) + 0px 9px 11px -5px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 18px 28px 2px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 7px 34px 6px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-19: - 0px 9px 12px -6px rgba(0, 0, 0, 0.2), - 0px 19px 29px 2px rgba(0, 0, 0, 0.14), - 0px 7px 36px 6px rgba(0, 0, 0, 0.12) + 0px 9px 12px -6px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 19px 29px 2px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 7px 36px 6px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-20: - 0px 10px 13px -6px rgba(0, 0, 0, 0.2), - 0px 20px 31px 3px rgba(0, 0, 0, 0.14), - 0px 8px 38px 7px rgba(0, 0, 0, 0.12) + 0px 10px 13px -6px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 20px 31px 3px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 8px 38px 7px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-21: - 0px 10px 13px -6px rgba(0, 0, 0, 0.2), - 0px 21px 33px 3px rgba(0, 0, 0, 0.14), - 0px 8px 40px 7px rgba(0, 0, 0, 0.12) + 0px 10px 13px -6px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 21px 33px 3px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 8px 40px 7px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-22: - 0px 10px 14px -6px rgba(0, 0, 0, 0.2), - 0px 22px 35px 3px rgba(0, 0, 0, 0.14), - 0px 8px 42px 7px rgba(0, 0, 0, 0.12) + 0px 10px 14px -6px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 22px 35px 3px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 8px 42px 7px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-23: - 0px 11px 14px -7px rgba(0, 0, 0, 0.2), - 0px 23px 36px 3px rgba(0, 0, 0, 0.14), - 0px 9px 44px 8px rgba(0, 0, 0, 0.12) + 0px 11px 14px -7px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 23px 36px 3px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 9px 44px 8px hsla(var(--sys-color-shadow-hsl), 0.12) ; --elevation-24: - 0px 11px 15px -7px rgba(0, 0, 0, 0.2), - 0px 24px 38px 3px rgba(0, 0, 0, 0.14), - 0px 9px 46px 8px rgba(0, 0, 0, 0.12) + 0px 11px 15px -7px hsla(var(--sys-color-shadow-hsl), 0.2), + 0px 24px 38px 3px hsla(var(--sys-color-shadow-hsl), 0.14), + 0px 9px 46px 8px hsla(var(--sys-color-shadow-hsl), 0.12) ; } From a50bc57e76e9c7882ff04f37ddc61e1657ab5ca6 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Tue, 10 Jan 2023 19:29:19 +0330 Subject: [PATCH 14/21] feat(ui-kit/card): rewrite styles --- ui/ui-kit/src/card/card.ts | 42 +++++++++++++++++++++++++++++++++----- 1 file changed, 37 insertions(+), 5 deletions(-) diff --git a/ui/ui-kit/src/card/card.ts b/ui/ui-kit/src/card/card.ts index 41ee238b9..464a6a2d2 100644 --- a/ui/ui-kit/src/card/card.ts +++ b/ui/ui-kit/src/card/card.ts @@ -16,29 +16,61 @@ declare global { * Alwatr Card Base Element * * @attr {elevated|filled|outlined} type + * @attr {boolean} disabled */ @customElement('alwatr-card') export class AlwatrCard extends AlwatrDummyElement { static override styles: CSSResultGroup = [ focusRingStyle, css` - :host, - :host([type="filled"]) { + :host /* filled */ { --_color-hsl: var(--sys-color-on-surface-variant-hsl); - background-color: var(--sys-color-surface-variant); + display: block; + padding: calc(2 * var(--sys-spacing-track)); border-radius: var(--sys-radius-medium); + box-shadow: var(--elevation-0); + background-color: var(--sys-color-surface-variant); + transition: box-shadow var(--sys-motion-duration-small-out) var(--sys-motion-easing-linear); + } + + :host([disabled]) { + opacity: 0.38; + pointer-events: none; + box-shadow: var(--elevation-1); + } + + :host(:hover) { + box-shadow: var(--elevation-1); + } + + :host(:active) { + box-shadow: var(--elevation-0); } - :host([type="elevated"]) { + :host([type='elevated']) { --_color-hsl: var(--sys-color-on-surface-hsl); + box-shadow: var(--elevation-1); background-color: var(--sys-color-surface); } - :host([type="outlined"]) { + :host([type='elevated']:hover) { + box-shadow: var(--elevation-2); + } + + :host([type='elevated']:active) { + box-shadow: var(--elevation-1); + } + + :host([type='outlined']) { --_color-hsl: var(--sys-color-on-surface-hsl); background-color: var(--sys-color-surface); border: 1px solid var(--sys-color-outline); } + + :host([type='outlined'][disabled]) { + box-shadow: var(--elevation-0); + opacity: 0.12; + } `, ]; From 3d234bf7055fd1e7db58877f7e8e9556e25f0e63 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Tue, 10 Jan 2023 19:29:50 +0330 Subject: [PATCH 15/21] fix(ui-kit/focus-ring): focus-within --- ui/ui-kit/src/style/helper/focus-ring.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/ui-kit/src/style/helper/focus-ring.ts b/ui/ui-kit/src/style/helper/focus-ring.ts index 174e54cf0..af452abce 100644 --- a/ui/ui-kit/src/style/helper/focus-ring.ts +++ b/ui/ui-kit/src/style/helper/focus-ring.ts @@ -19,7 +19,8 @@ export const focusRingStyle = css` ); } - :host(:focus) { + :host(:focus), + :host(:focus-within) { background-image: linear-gradient( hsla(var(--_color-hsl), var(--sys-opacity-focus)), hsla(var(--_color-hsl), var(--sys-opacity-focus)) From cf3a86045d88bba39c6849b263e03af4bb5a247a Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Tue, 10 Jan 2023 19:35:30 +0330 Subject: [PATCH 16/21] fix(ui-kit/card): filled `box-shadow` --- ui/ui-kit/src/card/card.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/ui-kit/src/card/card.ts b/ui/ui-kit/src/card/card.ts index 464a6a2d2..17440f053 100644 --- a/ui/ui-kit/src/card/card.ts +++ b/ui/ui-kit/src/card/card.ts @@ -36,7 +36,6 @@ export class AlwatrCard extends AlwatrDummyElement { :host([disabled]) { opacity: 0.38; pointer-events: none; - box-shadow: var(--elevation-1); } :host(:hover) { From 3176cbeb290453519542424a942dd0c282ef63ed Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Tue, 10 Jan 2023 20:41:31 +0330 Subject: [PATCH 17/21] feat(ui/card/demo): improve card demo --- ui/demo-pwa/src/page-card.ts | 42 ++++++++++++++++++++++++++---------- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/ui/demo-pwa/src/page-card.ts b/ui/demo-pwa/src/page-card.ts index 8667ed373..8ee0e3212 100644 --- a/ui/demo-pwa/src/page-card.ts +++ b/ui/demo-pwa/src/page-card.ts @@ -17,29 +17,49 @@ export class AlwatrPageCard extends AlwatrSmartElement { :host { display: flex; flex-wrap: wrap; - padding: 0 var(--sys-spacing-side-padding); + padding: var(--sys-spacing-track); box-sizing: border-box; height: 100%; - gap: var(--sys-spacing-side-padding); + gap: var(--sys-spacing-track); } alwatr-card { + flex-grow: 1; + display: flex; + align-items: flex-end; width: 25%; + user-select: none; + } + + input { + padding: var(--sys-spacing-track); + color: inherit; + background-color: transparent; + border: 0; + border-bottom: 1px solid transparent; + } + + input:focus { + border-bottom-color: currentColor; + outline: 0; } `; override render(): unknown { super.render(); return html` - elevated - elevated - elevated - filled - filled - filled - outlined - outlined - outlined + + + + + + + + + + + + `; } } From 941bf8d63475c470c3d3635c8f24272947ef8bda Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Tue, 10 Jan 2023 20:42:09 +0330 Subject: [PATCH 18/21] fix(demo-pwa): dev-server config --- ui/demo-pwa/web-dev-server.config.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/ui/demo-pwa/web-dev-server.config.js b/ui/demo-pwa/web-dev-server.config.js index 08a99e333..e8bd8ec0c 100644 --- a/ui/demo-pwa/web-dev-server.config.js +++ b/ui/demo-pwa/web-dev-server.config.js @@ -1,5 +1,7 @@ +import {existsSync} from 'node:fs'; + // https://modern-web.dev/docs/dev-server/cli-and-configuration/#configuration-file -export default { +const config = { port: 8080, open: true, watch: true, @@ -17,11 +19,13 @@ export default { // if file not found, return app index.html if (!( context.url === '/' || - context.url.startsWith('/__web-dev-server') || - fs.existsSync(config.rootDir + context.url) + context.url.startsWith('/__w') || + existsSync(config.rootDir + context.url) )) { context.url = config.appIndex; } return next(); }], }; + +export default config; From 0669b3882fa161ba2984e1278d00f57cd003a9b1 Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Tue, 10 Jan 2023 20:42:33 +0330 Subject: [PATCH 19/21] feat(ui): new color --- ui/demo-pwa/style/tokens/palette.css | 49 ++++++++++++++-------------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/ui/demo-pwa/style/tokens/palette.css b/ui/demo-pwa/style/tokens/palette.css index 56914eb5d..e90812338 100644 --- a/ui/demo-pwa/style/tokens/palette.css +++ b/ui/demo-pwa/style/tokens/palette.css @@ -1,8 +1,9 @@ :root { - --ref-palette-primary-hue: 207; - --ref-palette-secondary-hue: calc(var(--ref-palette-primary-hue) + 12); - --ref-palette-tertiary-hue: calc(var(--ref-palette-primary-hue) + 70); - --ref-palette-neutral-hue: calc(var(--ref-palette-primary-hue) + 20); + --ref-palette-primary-hue: 256; + --ref-palette-secondary-hue: 260; /* calc(var(--ref-palette-primary-hue) + 12); */ + --ref-palette-tertiary-hue: 340; /* calc(var(--ref-palette-primary-hue) + 70); */ + --ref-palette-neutral-hue: 342; /* calc(var(--ref-palette-primary-hue) + 20); */ + --ref-palette-neutral-variant-hue: 270; /* calc(var(--ref-palette-primary-hue) + 20); */ --ref-palette-error-hue: 356; /* primary */ @@ -78,22 +79,22 @@ --ref-palette-neutral100: var(--ref-palette-neutral-hue), 100%, 100%; /* neutral-variant */ - --ref-palette-neutral-variant0: var(--ref-palette-neutral-hue), 0%, 0%; - --ref-palette-neutral-variant10: var(--ref-palette-neutral-hue), 17%, 11%; - --ref-palette-neutral-variant20: var(--ref-palette-neutral-hue), 11%, 20%; - --ref-palette-neutral-variant25: var(--ref-palette-neutral-hue), 9%, 24%; - --ref-palette-neutral-variant30: var(--ref-palette-neutral-hue), 8%, 28%; - --ref-palette-neutral-variant35: var(--ref-palette-neutral-hue), 7%, 33%; - --ref-palette-neutral-variant40: var(--ref-palette-neutral-hue), 6%, 38%; - --ref-palette-neutral-variant50: var(--ref-palette-neutral-hue), 5%, 48%; - --ref-palette-neutral-variant60: var(--ref-palette-neutral-hue), 5.6%, 58%; - --ref-palette-neutral-variant70: var(--ref-palette-neutral-hue), 7.4%, 68%; - --ref-palette-neutral-variant80: var(--ref-palette-neutral-hue), 11.1%, 79%; - --ref-palette-neutral-variant90: var(--ref-palette-neutral-hue), 23.1%, 90%; - --ref-palette-neutral-variant95: var(--ref-palette-neutral-hue), 54.5%, 95%; - --ref-palette-neutral-variant98: var(--ref-palette-neutral-hue), 100%, 98%; - --ref-palette-neutral-variant99: var(--ref-palette-neutral-hue), 100%, 99%; - --ref-palette-neutral-variant100: var(--ref-palette-neutral-hue), 100%, 100%; + --ref-palette-neutral-variant0: var(--ref-palette-neutral-variant-hue), 0%, 0%; + --ref-palette-neutral-variant10: var(--ref-palette-neutral-variant-hue), 17%, 11%; + --ref-palette-neutral-variant20: var(--ref-palette-neutral-variant-hue), 11%, 20%; + --ref-palette-neutral-variant25: var(--ref-palette-neutral-variant-hue), 9%, 24%; + --ref-palette-neutral-variant30: var(--ref-palette-neutral-variant-hue), 8%, 28%; + --ref-palette-neutral-variant35: var(--ref-palette-neutral-variant-hue), 7%, 33%; + --ref-palette-neutral-variant40: var(--ref-palette-neutral-variant-hue), 6%, 38%; + --ref-palette-neutral-variant50: var(--ref-palette-neutral-variant-hue), 5%, 48%; + --ref-palette-neutral-variant60: var(--ref-palette-neutral-variant-hue), 5.6%, 58%; + --ref-palette-neutral-variant70: var(--ref-palette-neutral-variant-hue), 7.4%, 68%; + --ref-palette-neutral-variant80: var(--ref-palette-neutral-variant-hue), 11.1%, 79%; + --ref-palette-neutral-variant90: var(--ref-palette-neutral-variant-hue), 23.1%, 90%; + --ref-palette-neutral-variant95: var(--ref-palette-neutral-variant-hue), 54.5%, 95%; + --ref-palette-neutral-variant98: var(--ref-palette-neutral-variant-hue), 100%, 98%; + --ref-palette-neutral-variant99: var(--ref-palette-neutral-variant-hue), 100%, 99%; + --ref-palette-neutral-variant100: var(--ref-palette-neutral-variant-hue), 100%, 100%; /* error */ --ref-palette-error0: var(--ref-palette-error-hue), 0%, 0%; @@ -131,8 +132,8 @@ --sys-color-tertiary-container-hsl: var(--ref-palette-tertiary90); --sys-color-on-tertiary-container-hsl: var(--ref-palette-tertiary10); - /* --sys-color-background-hsl: var(--ref-palette-neutral99); */ - --sys-color-background-hsl: var(--ref-palette-neutral95); + --sys-color-background-hsl: var(--ref-palette-neutral99); + /* --sys-color-background-hsl: var(--ref-palette-neutral95); */ --sys-color-on-background-hsl: var(--ref-palette-neutral10); --sys-color-surface-hsl: var(--ref-palette-neutral99); @@ -217,8 +218,8 @@ --sys-color-tertiary-container-hsl: var(--ref-palette-tertiary30); --sys-color-on-tertiary-container-hsl: var(--ref-palette-tertiary90); - /* --sys-color-background-hsl: var(--ref-palette-neutral10); */ - --sys-color-background-hsl: var(--ref-palette-neutral20); + --sys-color-background-hsl: var(--ref-palette-neutral10); + /* --sys-color-background-hsl: var(--ref-palette-neutral20); */ --sys-color-on-background-hsl: var(--ref-palette-neutral90); --sys-color-surface-hsl: var(--ref-palette-neutral10); From 50d3deb2cf2020a4b6ec72c0c581fffb167a1b1a Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Tue, 10 Jan 2023 20:43:07 +0330 Subject: [PATCH 20/21] fix(card,focus-ring): disable and active state --- ui/ui-kit/src/card/card.ts | 14 ++------------ ui/ui-kit/src/style/helper/focus-ring.ts | 7 +++++++ 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/ui/ui-kit/src/card/card.ts b/ui/ui-kit/src/card/card.ts index 17440f053..71025a33f 100644 --- a/ui/ui-kit/src/card/card.ts +++ b/ui/ui-kit/src/card/card.ts @@ -33,26 +33,17 @@ export class AlwatrCard extends AlwatrDummyElement { transition: box-shadow var(--sys-motion-duration-small-out) var(--sys-motion-easing-linear); } - :host([disabled]) { - opacity: 0.38; - pointer-events: none; - } - - :host(:hover) { + :host(:hover:not(:active)) { box-shadow: var(--elevation-1); } - :host(:active) { - box-shadow: var(--elevation-0); - } - :host([type='elevated']) { --_color-hsl: var(--sys-color-on-surface-hsl); box-shadow: var(--elevation-1); background-color: var(--sys-color-surface); } - :host([type='elevated']:hover) { + :host([type='elevated']:hover:not(:active)) { box-shadow: var(--elevation-2); } @@ -67,7 +58,6 @@ export class AlwatrCard extends AlwatrDummyElement { } :host([type='outlined'][disabled]) { - box-shadow: var(--elevation-0); opacity: 0.12; } `, diff --git a/ui/ui-kit/src/style/helper/focus-ring.ts b/ui/ui-kit/src/style/helper/focus-ring.ts index af452abce..25557ff19 100644 --- a/ui/ui-kit/src/style/helper/focus-ring.ts +++ b/ui/ui-kit/src/style/helper/focus-ring.ts @@ -3,6 +3,7 @@ import {css} from '@alwatr/element'; export const focusRingStyle = css` :host { color: hsl(var(--_color-hsl, 0, 100%, 50%)); + outline: 0; } :host(:hover) { @@ -26,4 +27,10 @@ export const focusRingStyle = css` hsla(var(--_color-hsl), var(--sys-opacity-focus)) ); } + + :host([disabled]) { + opacity: 0.38; + pointer-events: none; + box-shadow: var(--elevation-0) !important; + } `; From 4cf93f6a5b2ee925e1b4a66f3535b4e6e7dfc1f0 Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Tue, 10 Jan 2023 20:50:08 +0330 Subject: [PATCH 21/21] fix(chat): colors --- ui/demo-pwa/style/tokens/palette.css | 2 +- ui/ui-kit/src/chat/chat.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/demo-pwa/style/tokens/palette.css b/ui/demo-pwa/style/tokens/palette.css index e90812338..bebc7124c 100644 --- a/ui/demo-pwa/style/tokens/palette.css +++ b/ui/demo-pwa/style/tokens/palette.css @@ -132,7 +132,7 @@ --sys-color-tertiary-container-hsl: var(--ref-palette-tertiary90); --sys-color-on-tertiary-container-hsl: var(--ref-palette-tertiary10); - --sys-color-background-hsl: var(--ref-palette-neutral99); + --sys-color-background-hsl: var(--ref-palette-neutral98); /* --sys-color-background-hsl: var(--ref-palette-neutral95); */ --sys-color-on-background-hsl: var(--ref-palette-neutral10); diff --git a/ui/ui-kit/src/chat/chat.ts b/ui/ui-kit/src/chat/chat.ts index aab77a865..9014699dd 100644 --- a/ui/ui-kit/src/chat/chat.ts +++ b/ui/ui-kit/src/chat/chat.ts @@ -122,8 +122,8 @@ export class AlwatrChat extends AlwatrSmartElement { alwatr-chat-list { height: 100%; - color: var(--sys-color-on-secondary-container); - background-color: var(--sys-color-secondary-container); + color: var(--sys-color-on-surface-variant); + background-color: var(--sys-color-surface-variant); padding-bottom: calc(12 * var(--sys-spacing-track)); }