ui feedback updates
This commit is contained in:
parent
2db8d71231
commit
534f693a50
@ -4,10 +4,10 @@ html {
|
||||
color-scheme: light;
|
||||
|
||||
/* Primary palette variables */
|
||||
--mat-sys-primary: light-dark(#486363, #afcccc);
|
||||
--mat-sys-primary: light-dark(#607c7c, #afcccc);
|
||||
--mat-sys-on-primary: light-dark(#ffffff, #193535);
|
||||
--mat-sys-primary-container: light-dark(#cae8e8, #304b4c);
|
||||
--mat-sys-on-primary-container: light-dark(#022020, #cae8e8);
|
||||
--mat-sys-primary-container: light-dark(#ffffff, #304b4c);
|
||||
--mat-sys-on-primary-container: light-dark(#607c7c, #cae8e8);
|
||||
--mat-sys-inverse-primary: light-dark(#afcccc, #486363);
|
||||
--mat-sys-primary-fixed: light-dark(#cae8e8, #cae8e8);
|
||||
--mat-sys-primary-fixed-dim: light-dark(#afcccc, #afcccc);
|
||||
@ -15,10 +15,10 @@ html {
|
||||
--mat-sys-on-primary-fixed-variant: light-dark(#304b4c, #304b4c);
|
||||
|
||||
/* Secondary palette variables */
|
||||
--mat-sys-secondary: light-dark(#4c6266, #b3cbcf);
|
||||
--mat-sys-secondary: light-dark(#607c7c, #b3cbcf);
|
||||
--mat-sys-on-secondary: light-dark(#ffffff, #1d3437);
|
||||
--mat-sys-secondary-container: light-dark(#cee7eb, #344a4e);
|
||||
--mat-sys-on-secondary-container: light-dark(#071f22, #cee7eb);
|
||||
--mat-sys-secondary-container: light-dark(#607c7c, #344a4e);
|
||||
--mat-sys-on-secondary-container: light-dark(#ffffff, #cee7eb);
|
||||
--mat-sys-secondary-fixed: light-dark(#cee7eb, #cee7eb);
|
||||
--mat-sys-secondary-fixed-dim: light-dark(#b3cbcf, #b3cbcf);
|
||||
--mat-sys-on-secondary-fixed: light-dark(#071f22, #071f22);
|
||||
@ -53,7 +53,8 @@ html {
|
||||
--mat-sys-inverse-on-surface: light-dark(#f1f0f0, #2f3130);
|
||||
--mat-sys-outline: light-dark(#727878, #8b9292);
|
||||
--mat-sys-outline-variant: light-dark(#c1c8c7, #414848);
|
||||
--mat-sys-neutral10: light-dark(#1a1c1c, #1a1c1c); /* Variable used for the form field native select option text color */
|
||||
--mat-sys-neutral10: light-dark(#1a1c1c, #1a1c1c);
|
||||
/* Variable used for the form field native select option text color */
|
||||
|
||||
/* Error palette variables */
|
||||
--mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
|
||||
@ -64,16 +65,22 @@ html {
|
||||
/* Neutral variant palette variables */
|
||||
--mat-sys-surface-variant: light-dark(#dde4e3, #414848);
|
||||
--mat-sys-on-surface-variant: light-dark(#414848, #c1c8c7);
|
||||
--mat-sys-neutral-variant20: light-dark(#2b3232, #2b3232); /* Variable used for the sidenav scrim (container background shadow when opened) */
|
||||
--mat-sys-neutral-variant20: light-dark(#2b3232, #2b3232);
|
||||
/* Variable used for the sidenav scrim (container background shadow when opened) */
|
||||
|
||||
/* TYPOGRAPHY SYSTEM VARIABLES */
|
||||
|
||||
/* Typography variables. Only used in the different typescale system variables. */
|
||||
--mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */
|
||||
--mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */
|
||||
--mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
|
||||
--mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
|
||||
--mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
|
||||
--mat-sys-brand-font-family: Roboto;
|
||||
/* The font-family to use for brand text. */
|
||||
--mat-sys-plain-font-family: Roboto;
|
||||
/* The font-family to use for plain text. */
|
||||
--mat-sys-bold-font-weight: 700;
|
||||
/* The font-weight to use for bold text. */
|
||||
--mat-sys-medium-font-weight: 500;
|
||||
/* The font-weight to use for medium text. */
|
||||
--mat-sys-regular-font-weight: 400;
|
||||
/* The font-weight to use for regular text. */
|
||||
|
||||
/* Typescale variables. */
|
||||
/* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
|
||||
@ -233,4 +240,13 @@ html {
|
||||
--mat-sys-focus-state-layer-opacity: 0.12;
|
||||
--mat-sys-hover-state-layer-opacity: 0.08;
|
||||
--mat-sys-pressed-state-layer-opacity: 0.12;
|
||||
}
|
||||
|
||||
/* CUSTOM BUTTON COLORS */
|
||||
--custom-button-color: #ffffff;
|
||||
--custom-button-background-color: #627f9a;
|
||||
--custom-hover-color: #384857;
|
||||
|
||||
/* CUSTOM NAV COLORS */
|
||||
--custom-nav-color: #ffffff;
|
||||
--custom-nav-background-color: #607c7c;
|
||||
}
|
||||
@ -1,13 +1,13 @@
|
||||
/* Note: Color palettes are generated from primary: #103454, secondary: #18749c */
|
||||
/* Note: Color palettes are generated from primary: #003057, secondary: #18749c */
|
||||
html {
|
||||
/* COLOR SYSTEM VARIABLES */
|
||||
color-scheme: light;
|
||||
|
||||
/* Primary palette variables */
|
||||
--mat-sys-primary: light-dark(#416183, #aac9f1);
|
||||
--mat-sys-primary: light-dark(#003057, #aac9f1);
|
||||
--mat-sys-on-primary: light-dark(#ffffff, #0d3252);
|
||||
--mat-sys-primary-container: light-dark(#d1e4ff, #29496a);
|
||||
--mat-sys-on-primary-container: light-dark(#001d35, #d1e4ff);
|
||||
--mat-sys-primary-container: light-dark(#ffffff, #29496a);
|
||||
--mat-sys-on-primary-container: light-dark(#003057, #d1e4ff);
|
||||
--mat-sys-inverse-primary: light-dark(#aac9f1, #416183);
|
||||
--mat-sys-primary-fixed: light-dark(#d1e4ff, #d1e4ff);
|
||||
--mat-sys-primary-fixed-dim: light-dark(#aac9f1, #aac9f1);
|
||||
@ -15,10 +15,10 @@ html {
|
||||
--mat-sys-on-primary-fixed-variant: light-dark(#29496a, #29496a);
|
||||
|
||||
/* Secondary palette variables */
|
||||
--mat-sys-secondary: light-dark(#00658b, #84cffc);
|
||||
--mat-sys-secondary: light-dark(#003057, #84cffc);
|
||||
--mat-sys-on-secondary: light-dark(#ffffff, #00344a);
|
||||
--mat-sys-secondary-container: light-dark(#c5e7ff, #004c6a);
|
||||
--mat-sys-on-secondary-container: light-dark(#001e2d, #c5e7ff);
|
||||
--mat-sys-secondary-container: light-dark(#003057, #004c6a);
|
||||
--mat-sys-on-secondary-container: light-dark(#ffffff, #c5e7ff);
|
||||
--mat-sys-secondary-fixed: light-dark(#c5e7ff, #c5e7ff);
|
||||
--mat-sys-secondary-fixed-dim: light-dark(#84cffc, #84cffc);
|
||||
--mat-sys-on-secondary-fixed: light-dark(#001e2d, #001e2d);
|
||||
@ -53,7 +53,8 @@ html {
|
||||
--mat-sys-inverse-on-surface: light-dark(#f1f0f3, #2f3033);
|
||||
--mat-sys-outline: light-dark(#73777e, #8d9198);
|
||||
--mat-sys-outline-variant: light-dark(#c3c7ce, #43474e);
|
||||
--mat-sys-neutral10: light-dark(#1a1c1e, #1a1c1e); /* Variable used for the form field native select option text color */
|
||||
--mat-sys-neutral10: light-dark(#1a1c1e, #1a1c1e);
|
||||
/* Variable used for the form field native select option text color */
|
||||
|
||||
/* Error palette variables */
|
||||
--mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
|
||||
@ -64,16 +65,22 @@ html {
|
||||
/* Neutral variant palette variables */
|
||||
--mat-sys-surface-variant: light-dark(#dfe2eb, #43474e);
|
||||
--mat-sys-on-surface-variant: light-dark(#43474e, #c3c7ce);
|
||||
--mat-sys-neutral-variant20: light-dark(#2c3137, #2c3137); /* Variable used for the sidenav scrim (container background shadow when opened) */
|
||||
--mat-sys-neutral-variant20: light-dark(#2c3137, #2c3137);
|
||||
/* Variable used for the sidenav scrim (container background shadow when opened) */
|
||||
|
||||
/* TYPOGRAPHY SYSTEM VARIABLES */
|
||||
|
||||
/* Typography variables. Only used in the different typescale system variables. */
|
||||
--mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */
|
||||
--mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */
|
||||
--mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */
|
||||
--mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */
|
||||
--mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */
|
||||
--mat-sys-brand-font-family: Roboto;
|
||||
/* The font-family to use for brand text. */
|
||||
--mat-sys-plain-font-family: Roboto;
|
||||
/* The font-family to use for plain text. */
|
||||
--mat-sys-bold-font-weight: 700;
|
||||
/* The font-weight to use for bold text. */
|
||||
--mat-sys-medium-font-weight: 500;
|
||||
/* The font-weight to use for medium text. */
|
||||
--mat-sys-regular-font-weight: 400;
|
||||
/* The font-weight to use for regular text. */
|
||||
|
||||
/* Typescale variables. */
|
||||
/* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since
|
||||
@ -233,4 +240,13 @@ html {
|
||||
--mat-sys-focus-state-layer-opacity: 0.12;
|
||||
--mat-sys-hover-state-layer-opacity: 0.08;
|
||||
--mat-sys-pressed-state-layer-opacity: 0.12;
|
||||
}
|
||||
|
||||
/* CUSTOM BUTTON COLORS */
|
||||
--custom-button-color: #fff;
|
||||
--custom-button-background-color: #FF6A00;
|
||||
--custom-hover-color: #FFAC70;
|
||||
|
||||
/* CUSTOM NAV COLORS */
|
||||
--custom-nav-color: #003057;
|
||||
--custom-nav-background-color: #ffffff;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user