Skip to content

Commit

Permalink
feat: new ui design system
Browse files Browse the repository at this point in the history
  • Loading branch information
@alimd
alimd committed Dec 29, 2022
1 parent 933cc39 commit 8c9c8ba
Show file tree
Hide file tree
Showing 31 changed files with 866 additions and 1,134 deletions.
1 change: 1 addition & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"Superfast",
"tnum",
"tsbuildinfo",
"typescale",
"vazirmatn",
"zindex"
]
Expand Down
198 changes: 132 additions & 66 deletions ui/demo-pwa/style/helper/colors.css
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,180 @@
.primary {
color: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary);
background-color: var(--alwatr-sys-color-primary);
}
.primary-text {
color: var(--alwatr-sys-color-primary);
}
.on-primary {
color: var(--md-sys-color-primary);
background-color: var(--md-sys-color-on-primary);
background-color: var(--alwatr-sys-color-on-primary);
}
.on-primary-text {
color: var(--alwatr-sys-color-on-primary);
}
.primary-container {
color: var(--md-sys-color-on-primary-container);
background-color: var(--md-sys-color-primary-container);
background-color: var(--alwatr-sys-color-primary-container);
}
.primary-container-text {
color: var(--alwatr-sys-color-primary-container);
}
.on-primary-container {
color: var(--md-sys-color-primary-container);
background-color: var(--md-sys-color-on-primary-container);
background-color: var(--alwatr-sys-color-on-primary-container);
}
.on-primary-container-text {
color: var(--alwatr-sys-color-on-primary-container);
}
.secondary {
color: var(--md-sys-color-on-secondary);
background-color: var(--md-sys-color-secondary);
background-color: var(--alwatr-sys-color-secondary);
}
.secondary-text {
color: var(--alwatr-sys-color-secondary);
}
.on-secondary {
color: var(--md-sys-color-secondary);
background-color: var(--md-sys-color-on-secondary);
background-color: var(--alwatr-sys-color-on-secondary);
}
.on-secondary-text {
color: var(--alwatr-sys-color-on-secondary);
}
.secondary-container {
color: var(--md-sys-color-on-secondary-container);
background-color: var(--md-sys-color-secondary-container);
background-color: var(--alwatr-sys-color-secondary-container);
}
.secondary-container-text {
color: var(--alwatr-sys-color-secondary-container);
}
.on-secondary-container {
color: var(--md-sys-color-secondary-container);
background-color: var(--md-sys-color-on-secondary-container);
background-color: var(--alwatr-sys-color-on-secondary-container);
}
.on-secondary-container-text {
color: var(--alwatr-sys-color-on-secondary-container);
}
.tertiary {
color: var(--md-sys-color-on-tertiary);
background-color: var(--md-sys-color-tertiary);
background-color: var(--alwatr-sys-color-tertiary);
}
.tertiary-text {
color: var(--alwatr-sys-color-tertiary);
}
.on-tertiary {
color: var(--md-sys-color-tertiary);
background-color: var(--md-sys-color-on-tertiary);
background-color: var(--alwatr-sys-color-on-tertiary);
}
.on-tertiary-text {
color: var(--alwatr-sys-color-on-tertiary);
}
.tertiary-container {
color: var(--md-sys-color-on-tertiary-container);
background-color: var(--md-sys-color-tertiary-container);
background-color: var(--alwatr-sys-color-tertiary-container);
}
.tertiary-container-text {
color: var(--alwatr-sys-color-tertiary-container);
}
.on-tertiary-container {
color: var(--md-sys-color-tertiary-container);
background-color: var(--md-sys-color-on-tertiary-container);
background-color: var(--alwatr-sys-color-on-tertiary-container);
}
.on-tertiary-container-text {
color: var(--alwatr-sys-color-on-tertiary-container);
}
.error {
background-color: var(--alwatr-sys-color-error);
}
.error-text {
color: var(--alwatr-sys-color-error);
}
.error-container {
background-color: var(--alwatr-sys-color-error-container);
}
.error-container-text {
color: var(--alwatr-sys-color-error-container);
}
.on-error {
background-color: var(--alwatr-sys-color-on-error);
}
.on-error-text {
color: var(--alwatr-sys-color-on-error);
}
.on-error-container {
background-color: var(--alwatr-sys-color-on-error-container);
}
.on-error-container-text {
color: var(--alwatr-sys-color-on-error-container);
}
.background {
color: var(--md-sys-color-on-background);
background-color: var(--md-sys-color-background);
background-color: var(--alwatr-sys-color-background);
}
.background-text {
color: var(--alwatr-sys-color-background);
}
.on-background {
background-color: var(--alwatr-sys-color-on-background);
}
.on-background-text {
color: var(--alwatr-sys-color-on-background);
}
.surface {
color: var(--md-sys-color-on-surface);
background-color: var(--md-sys-color-surface);
background-color: var(--alwatr-sys-color-surface);
}
.surface-text {
color: var(--alwatr-sys-color-surface);
}
.on-surface {
background-color: var(--alwatr-sys-color-on-surface);
}
.on-surface-text {
color: var(--alwatr-sys-color-on-surface);
}
.surface-variant {
color: var(--md-sys-color-on-surface-variant);
background-color: var(--md-sys-color-surface-variant);
background-color: var(--alwatr-sys-color-surface-variant);
}
.surface-variant-text {
color: var(--alwatr-sys-color-surface-variant);
}
.on-surface-variant {
color: var(--md-sys-color-surface-variant);
background-color: var(--md-sys-color-on-surface-variant);
background-color: var(--alwatr-sys-color-on-surface-variant);
}
.on-surface-variant-text {
color: var(--alwatr-sys-color-on-surface-variant);
}
.outline {
border: 1px solid var(--md-sys-color-outline);
background-color: var(--alwatr-sys-color-outline);
}
.outline-text {
color: var(--alwatr-sys-color-outline);
}
.inverse-on-surface {
background-color: var(--alwatr-sys-color-inverse-on-surface);
}
.inverse-on-surface-text {
color: var(--alwatr-sys-color-inverse-on-surface);
}
.inverse-surface {
color: var(--md-sys-color-on-inverse-surface);
background-color: var(--md-sys-color-inverse-surface);
background-color: var(--alwatr-sys-color-inverse-surface);
}
.on-inverse-surface {
color: var(--md-sys-color-inverse-surface);
background-color: var(--md-sys-color-on-inverse-surface);
.inverse-surface-text {
color: var(--alwatr-sys-color-inverse-surface);
}
.inverse-primary {
color: var(--md-sys-color-on-inverse-primary);
background-color: var(--md-sys-color-inverse-primary);
background-color: var(--alwatr-sys-color-inverse-primary);
}
.on-inverse-primary {
color: var(--md-sys-color-inverse-primary);
background-color: var(--md-sys-color-on-inverse-primary);
}
.surface-tint {
background-color: var(--md-sys-color-on-surface-tint);
.inverse-primary-text {
color: var(--alwatr-sys-color-inverse-primary);
}
.error {
color: var(--md-sys-color-on-error);
background-color: var(--md-sys-color-error);
.shadow {
background-color: var(--alwatr-sys-color-shadow);
}
.on-error {
color: var(--md-sys-color-error);
background-color: var(--md-sys-color-on-error);
.shadow-text {
color: var(--alwatr-sys-color-shadow);
}
.error-container {
color: var(--md-sys-color-on-error-container);
background-color: var(--md-sys-color-error-container);
.surface-tint {
background-color: var(--alwatr-sys-color-surface-tint);
}
.on-error-container {
color: var(--md-sys-color-error-container);
background-color: var(--md-sys-color-on-error-container);
.surface-tint-text {
color: var(--alwatr-sys-color-surface-tint);
}
.black {
background-color: var(--md-ref-palette-black);
.outline-variant {
background-color: var(--alwatr-sys-color-outline-variant);
}
.black-text {
color: var(--md-ref-palette-black);
.outline-variant-text {
color: var(--alwatr-sys-color-outline-variant);
}
.white {
background-color: var(--md-ref-palette-white);
.scrim {
background-color: var(--alwatr-sys-color-scrim);
}
.white-text {
color: var(--md-ref-palette-white);
.scrim-text {
color: var(--alwatr-sys-color-scrim);
}
12 changes: 6 additions & 6 deletions ui/demo-pwa/style/helper/elevation.css
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
.elevation-0 {
box-shadow: var(--md-sys-elevation-level0);
box-shadow: var(--alwatr-sys-elevation-level0);
}
.elevation-1 {
box-shadow: var(--md-sys-elevation-level1);
box-shadow: var(--alwatr-sys-elevation-level1);
}
.elevation-2 {
box-shadow: var(--md-sys-elevation-level2);
box-shadow: var(--alwatr-sys-elevation-level2);
}
.elevation-3 {
box-shadow: var(--md-sys-elevation-level3);
box-shadow: var(--alwatr-sys-elevation-level3);
}
.elevation-4 {
box-shadow: var(--md-sys-elevation-level4);
box-shadow: var(--alwatr-sys-elevation-level4);
}
.elevation-5 {
box-shadow: var(--md-sys-elevation-level5);
box-shadow: var(--alwatr-sys-elevation-level5);
}
Loading

0 comments on commit 8c9c8ba

Please sign in to comment.