EVOgeek/Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4594 styles: Add steps for bg and text

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2024-07-03 12:38:41 +02:00
parent caac024ae6
commit d590ac23e6
5 changed files with 237 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/components/combobox/combobox.scss
View File

@ -146,7 +146,7 @@
}
.select-icon {
color: var(--ion-color-step-500, gray);
color: var(--ion-text-color-step-500, gray);
}
}

4
src/theme/components/ion-toast.scss
View File

@ -1,9 +1,9 @@
@import "../globals.scss";
ion-toast {
--color: var(--ion-color-step-50);
--color: var(--ion-text-color-step-950);
--button-color: var(--primary);
--background: var(--ion-color-step-800);
--background: var(--ion-background-color-step-800);
@include media-breakpoint-down(sm) {
&::part(container) {

2
src/theme/components/swiper.scss
View File

@ -1,7 +1,7 @@
swiper-container {
--swiper-theme-color: var(--ion-color-primary, #3880ff);
--swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
--swiper-pagination-bullet-inactive-color: var(--ion-text-color-step-800, #cccccc);
--swiper-pagination-color: var(--swiper-theme-color);
--swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
--swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);

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

@ -5,30 +5,52 @@
* http://ionicframework.com/docs/theming/
*/
:root.dark {
@mixin dark-palette() {
& {
// Ionic shades, defined for ionic internal use.
--ion-color-step-0: var(--black);
--ion-color-step-50: var(--gray-900);
--ion-color-step-100: var(--gray-900);
--ion-color-step-150: var(--gray-800);
--ion-color-step-200: var(--gray-800);
--ion-color-step-250: var(--gray-700);
--ion-color-step-300: var(--gray-700);
--ion-color-step-350: var(--gray-600);
--ion-color-step-400: var(--gray-600);
--ion-color-step-450: var(--gray-500);
--ion-color-step-500: var(--gray-500);
--ion-color-step-550: var(--gray-400);
--ion-color-step-600: var(--gray-400);
--ion-color-step-650: var(--gray-300);
--ion-color-step-700: var(--gray-300);
--ion-color-step-750: var(--gray-200);
--ion-color-step-800: var(--gray-200);
--ion-color-step-850: var(--gray-100);
--ion-color-step-900: var(--gray-100);
--ion-color-step-950: var(--gray-100);
--ion-color-step-1000: var(--white);
--ion-background-color-step-0: var(--black);
--ion-background-color-step-50: var(--gray-900);
--ion-background-color-step-100: var(--gray-900);
--ion-background-color-step-150: var(--gray-800);
--ion-background-color-step-200: var(--gray-800);
--ion-background-color-step-250: var(--gray-700);
--ion-background-color-step-300: var(--gray-700);
--ion-background-color-step-350: var(--gray-600);
--ion-background-color-step-400: var(--gray-600);
--ion-background-color-step-450: var(--gray-500);
--ion-background-color-step-500: var(--gray-500);
--ion-background-color-step-550: var(--gray-400);
--ion-background-color-step-600: var(--gray-400);
--ion-background-color-step-650: var(--gray-300);
--ion-background-color-step-700: var(--gray-300);
--ion-background-color-step-750: var(--gray-200);
--ion-background-color-step-800: var(--gray-200);
--ion-background-color-step-850: var(--gray-100);
--ion-background-color-step-900: var(--gray-100);
--ion-background-color-step-950: var(--gray-100);
--ion-background-color-step-1000: var(--white);
--ion-text-color-step-0: var(--white);
--ion-text-color-step-50: var(--gray-100);
--ion-text-color-step-100: var(--gray-100);
--ion-text-color-step-150: var(--gray-200);
--ion-text-color-step-200: var(--gray-200);
--ion-text-color-step-250: var(--gray-300);
--ion-text-color-step-300: var(--gray-300);
--ion-text-color-step-350: var(--gray-400);
--ion-text-color-step-400: var(--gray-400);
--ion-text-color-step-450: var(--gray-500);
--ion-text-color-step-500: var(--gray-500);
--ion-text-color-step-550: var(--gray-600);
--ion-text-color-step-600: var(--gray-600);
--ion-text-color-step-650: var(--gray-700);
--ion-text-color-step-700: var(--gray-700);
--ion-text-color-step-750: var(--gray-800);
--ion-text-color-step-800: var(--gray-800);
--ion-text-color-step-850: var(--gray-900);
--ion-text-color-step-900: var(--gray-900);
--ion-text-color-step-950: var(--gray-900);
--ion-text-color-step-1000: var(--black);
@each $color-name, $unused in $colors {
@include generate-color($color-name, $colors, 'dark');
@ -173,3 +195,8 @@
--core-table-even-cell-hover: var(--gray-700);
}
}
:root.dark {
@include dark-palette();
}

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

@ -21,27 +21,49 @@
--white: #{$white};
// Ionic shades, defined for ionic internal use.
--ion-color-step-0: var(--white);
--ion-color-step-50: var(--gray-100);
--ion-color-step-100: var(--gray-100);
--ion-color-step-150: var(--gray-200);
--ion-color-step-200: var(--gray-200);
--ion-color-step-250: var(--gray-300);
--ion-color-step-300: var(--gray-300);
--ion-color-step-350: var(--gray-400);
--ion-color-step-400: var(--gray-400);
--ion-color-step-450: var(--gray-500);
--ion-color-step-500: var(--gray-500);
--ion-color-step-550: var(--gray-600);
--ion-color-step-600: var(--gray-600);
--ion-color-step-650: var(--gray-700);
--ion-color-step-700: var(--gray-700);
--ion-color-step-750: var(--gray-800);
--ion-color-step-800: var(--gray-800);
--ion-color-step-850: var(--gray-900);
--ion-color-step-900: var(--gray-900);
--ion-color-step-950: var(--gray-900);
--ion-color-step-1000: var(--black);
--ion-background-color-step-0: var(--white);
--ion-background-color-step-50: var(--gray-100);
--ion-background-color-step-100: var(--gray-100);
--ion-background-color-step-150: var(--gray-200);
--ion-background-color-step-200: var(--gray-200);
--ion-background-color-step-250: var(--gray-300);
--ion-background-color-step-300: var(--gray-300);
--ion-background-color-step-350: var(--gray-400);
--ion-background-color-step-400: var(--gray-400);
--ion-background-color-step-450: var(--gray-500);
--ion-background-color-step-500: var(--gray-500);
--ion-background-color-step-550: var(--gray-600);
--ion-background-color-step-600: var(--gray-600);
--ion-background-color-step-650: var(--gray-700);
--ion-background-color-step-700: var(--gray-700);
--ion-background-color-step-750: var(--gray-800);
--ion-background-color-step-800: var(--gray-800);
--ion-background-color-step-850: var(--gray-900);
--ion-background-color-step-900: var(--gray-900);
--ion-background-color-step-950: var(--gray-900);
--ion-background-color-step-1000: var(--black);
--ion-text-color-step-0: var(--black);
--ion-text-color-step-50: var(--gray-900);
--ion-text-color-step-100: var(--gray-900);
--ion-text-color-step-150: var(--gray-800);
--ion-text-color-step-200: var(--gray-800);
--ion-text-color-step-250: var(--gray-700);
--ion-text-color-step-300: var(--gray-700);
--ion-text-color-step-350: var(--gray-600);
--ion-text-color-step-400: var(--gray-600);
--ion-text-color-step-450: var(--gray-500);
--ion-text-color-step-500: var(--gray-500);
--ion-text-color-step-550: var(--gray-400);
--ion-text-color-step-600: var(--gray-400);
--ion-text-color-step-650: var(--gray-300);
--ion-text-color-step-700: var(--gray-300);
--ion-text-color-step-750: var(--gray-200);
--ion-text-color-step-800: var(--gray-200);
--ion-text-color-step-850: var(--gray-100);
--ion-text-color-step-900: var(--gray-100);
--ion-text-color-step-950: var(--gray-100);
--ion-text-color-step-1000: var(--white);
@each $color-name, $unused in $colors {
@include generate-color($color-name, $colors, 'light');