Skip to content

Commit

Permalink
feat(ui-kit): alwatr-card element (elevated, filled, outlined cards) (#…
Browse files Browse the repository at this point in the history 
…579)
  • Loading branch information
@alimd
alimd authored Jan 11, 2023
2 parents 46c43f7 + 4cf93f6 commit 6411942
Show file tree
Hide file tree
Showing 8 changed files with 268 additions and 107 deletions.
65 changes: 65 additions & 0 deletions ui/demo-pwa/src/page-card.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
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: var(--sys-spacing-track);
box-sizing: border-box;
height: 100%;
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`
<alwatr-card type="elevated"><input type="text" value="elevated"/></alwatr-card>
<alwatr-card type="elevated"><input type="text" value="elevated"/></alwatr-card>
<alwatr-card type="elevated" disabled><input type="text" value="elevated" disabled/></alwatr-card>
<alwatr-card type="filled"><input type="text" value="filled"/></alwatr-card>
<alwatr-card type="filled"><input type="text" value="filled"/></alwatr-card>
<alwatr-card type="filled" disabled><input type="text" value="filled" disabled/></alwatr-card>
<alwatr-card type="outlined"><input type="text" value="outlined"/></alwatr-card>
<alwatr-card type="outlined"><input type="text" value="outlined"/></alwatr-card>
<alwatr-card type="outlined" disabled><input type="text" value="outlined" disabled/></alwatr-card>
<alwatr-card type="outlined"><input type="text" value="outlined"/></alwatr-card>
<alwatr-card type="elevated"><input type="text" value="elevated"/></alwatr-card>
<alwatr-card type="filled"><input type="text" value="filled"/></alwatr-card>
`;
}
}
7 changes: 5 additions & 2 deletions ui/demo-pwa/src/pwa-root.ts
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -22,6 +22,9 @@ export class AlwatrPwaRoot extends AlwatrRootElement {
home: {
render: () => html`<alwatr-page-chat></alwatr-page-chat>`,
},
card: {
render: () => html`<alwatr-page-card></alwatr-page-card>`,
},
},
};
}
150 changes: 75 additions & 75 deletions ui/demo-pwa/style/tokens/elevation.css
View file
Original file line number Diff line number Diff line change
@@ -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)
;
}
49 changes: 25 additions & 24 deletions ui/demo-pwa/style/tokens/palette.css
View file
Original file line number Diff line number Diff line change
@@ -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 */
Expand Down Expand Up @@ -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%;
Expand Down Expand Up @@ -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-neutral98);
/* --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);
Expand Down Expand Up @@ -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);
Expand Down
20 changes: 17 additions & 3 deletions ui/demo-pwa/web-dev-server.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
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,
// appIndex: 'index.html',
appIndex: 'index.html',
nodeResolve: {
exportConditions: ['development']
},
Expand All @@ -13,5 +15,17 @@ 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('/__w') ||
existsSync(config.rootDir + context.url)
)) {
context.url = config.appIndex;
}
return next();
}],
};

export default config;
Loading

0 comments on commit 6411942

Please sign in to comment.