CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-4458 design: Add shadows to design system

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2024-02-21 13:26:55 +01:00
parent ebbfe039c0
commit 2e85f1264e
3 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/theme/theme.dark.scss
View File

@ -47,9 +47,8 @@ html.dark {
--loader-shine: 90, 90, 90; --loader-shine: 90, 90, 90;
--drop-shadow-color: 0, 0, 0, 1; --drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 1);
--drop-shadow-top: 0px 2px 5px rgba(var(--drop-shadow-color)); --drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 1);
--drop-shadow-bottom: 0px -2px 5px rgba(var(--drop-shadow-color));
--ion-card-color: var(--text-color); --ion-card-color: var(--text-color);
--ion-card-background: var(--ion-item-background); --ion-card-background: var(--ion-item-background);

15
src/theme/theme.design-system.scss
View File

@ -24,9 +24,20 @@ html {
--big-radius: var(--radius-lg); --big-radius: var(--radius-lg);
--huge-radius: var(--radius-xl); --huge-radius: var(--radius-xl);
// Shadows / Elevation
--drop-shadow-color: 40 40 40; //#282828;
--drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 0.20);
--drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 0.15), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 0.02);
--drop-shadow-01dp: 0px 1px 3px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 2px 1px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 1px 1px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-02dp: 0px 1px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 1px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 2px 2px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-03dp: 0px 1px 8px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 3px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 3px 4px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-04dp: 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 1px 10px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 4px 5px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-06dp: 0px 3px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 1px 18px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 6px 10px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-08dp: 0px 5px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 14px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 8px 10px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-12dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 0.20),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 0.12),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-16dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 0.20),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 0.12),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 0.14);
--drop-shadow-24dp: 0px 11px 15px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 9px 46px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 24px 38px 0px rgb(var(--drop-shadow-color) / 0.14);
// A11y // A11y
--a11y-min-target-size: 44px; --a11y-min-target-size: 44px;
} }

9
src/theme/theme.light.scss
View File

@ -83,11 +83,10 @@ html {
--loader-radius: var(--radius-xs); --loader-radius: var(--radius-xs);
--loader-display: block; --loader-display: block;
--drop-shadow-color: 0, 0, 0, 0.5; --drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 0.5);
--drop-shadow-top: 0px 2px 5px rgba(var(--drop-shadow-color)); --drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 0.5);
--drop-shadow-bottom: 0px -2px 5px rgba(var(--drop-shadow-color)); --drop-shadow-end: -2px 0px 5px rgb(var(--drop-shadow-color) / 0.5);
--drop-shadow-end: -2px 0px 5px rgba(var(--drop-shadow-color)); --drop-shadow-start: 2px 0px 5px rgb(var(--drop-shadow-color) / 0.5);
--drop-shadow-start: 2px 0px 5px rgba(var(--drop-shadow-color));
--ion-text-color: var(--text-color); --ion-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-rgb}; --ion-text-color-rgb: #{$text-color-rgb};