Skip to content

Commit

Permalink
Merge branch 'feat/material-you'
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dartegnian
Dartegnian committed Dec 8, 2023
2 parents 73aa58a + 51db165 commit d81a068
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 236 deletions.
250 changes: 40 additions & 210 deletions src/www/css/material/material-you--primary.css
View file
Original file line number Diff line number Diff line change
@@ -1,224 +1,54 @@

.headline1, .display-small {
font-family: var(--md-sys-typescale-headline1-font);
font-weight: var(--md-sys-typescale-headline1-weight);
font-size: var(--md-sys-typescale-headline1-size);
line-height: var(--md-sys-typescale-headline1-line-height);
letter-spacing: var(--md-sys-typescale-headline1-tracking);
}
.display3, .display-medium {
font-family: var(--md-sys-typescale-display3-font);
font-weight: var(--md-sys-typescale-display3-weight);
font-size: var(--md-sys-typescale-display3-size);
line-height: var(--md-sys-typescale-display3-line-height);
letter-spacing: var(--md-sys-typescale-display3-tracking);
}
.display2, .display-large {
font-family: var(--md-sys-typescale-display2-font);
font-weight: var(--md-sys-typescale-display2-weight);
font-size: var(--md-sys-typescale-display2-size);
line-height: var(--md-sys-typescale-display2-line-height);
letter-spacing: var(--md-sys-typescale-display2-tracking);
}
.headline4, .headline-small {
font-family: var(--md-sys-typescale-headline4-font);
font-weight: var(--md-sys-typescale-headline4-weight);
font-size: var(--md-sys-typescale-headline4-size);
line-height: var(--md-sys-typescale-headline4-line-height);
letter-spacing: var(--md-sys-typescale-headline4-tracking);
}
.headline3, .headline-medium {
font-family: var(--md-sys-typescale-headline3-font);
font-weight: var(--md-sys-typescale-headline3-weight);
font-size: var(--md-sys-typescale-headline3-size);
line-height: var(--md-sys-typescale-headline3-line-height);
letter-spacing: var(--md-sys-typescale-headline3-tracking);
}
.headline2, .headline-large {
font-family: var(--md-sys-typescale-headline2-font);
font-weight: var(--md-sys-typescale-headline2-weight);
font-size: var(--md-sys-typescale-headline2-size);
line-height: var(--md-sys-typescale-headline2-line-height);
letter-spacing: var(--md-sys-typescale-headline2-tracking);
}
.overline, .label-medium {
font-family: var(--md-sys-typescale-overline-font);
font-weight: var(--md-sys-typescale-overline-weight);
font-size: var(--md-sys-typescale-overline-size);
line-height: var(--md-sys-typescale-overline-line-height);
letter-spacing: var(--md-sys-typescale-overline-tracking);
}
.button, .label-large {
font-family: var(--md-sys-typescale-button-font);
font-weight: var(--md-sys-typescale-button-weight);
font-size: var(--md-sys-typescale-button-size);
line-height: var(--md-sys-typescale-button-line-height);
letter-spacing: var(--md-sys-typescale-button-tracking);
}
.subhead2, .title-small {
font-family: var(--md-sys-typescale-subhead2-font);
font-weight: var(--md-sys-typescale-subhead2-weight);
font-size: var(--md-sys-typescale-subhead2-size);
line-height: var(--md-sys-typescale-subhead2-line-height);
letter-spacing: var(--md-sys-typescale-subhead2-tracking);
}
.subhead1, .title-medium {
font-family: var(--md-sys-typescale-subhead1-font);
font-weight: var(--md-sys-typescale-subhead1-weight);
font-size: var(--md-sys-typescale-subhead1-size);
line-height: var(--md-sys-typescale-subhead1-line-height);
letter-spacing: var(--md-sys-typescale-subhead1-tracking);
}
.headline5, .title-large {
font-family: var(--md-sys-typescale-headline5-font);
font-weight: var(--md-sys-typescale-headline5-weight);
font-size: var(--md-sys-typescale-headline5-size);
line-height: var(--md-sys-typescale-headline5-line-height);
letter-spacing: var(--md-sys-typescale-headline5-tracking);
}
.caption, .body-small {
font-family: var(--md-sys-typescale-caption-font);
font-weight: var(--md-sys-typescale-caption-weight);
font-size: var(--md-sys-typescale-caption-size);
line-height: var(--md-sys-typescale-caption-line-height);
letter-spacing: var(--md-sys-typescale-caption-tracking);
}
.body2, .body-medium {
font-family: var(--md-sys-typescale-body2-font);
font-weight: var(--md-sys-typescale-body2-weight);
font-size: var(--md-sys-typescale-body2-size);
line-height: var(--md-sys-typescale-body2-line-height);
letter-spacing: var(--md-sys-typescale-body2-tracking);
}
.body1, .body-large {
font-family: var(--md-sys-typescale-body1-font);
font-weight: var(--md-sys-typescale-body1-weight);
font-size: var(--md-sys-typescale-body1-size);
line-height: var(--md-sys-typescale-body1-line-height);
letter-spacing: var(--md-sys-typescale-body1-tracking);
}

.material-theme {
--md-sys-typescale-headline1-font: Roboto;
--md-sys-typescale-headline1-weight: Regular;
--md-sys-typescale-headline1-size: 36px;
--md-sys-typescale-headline1-line-height: 44px;
--md-sys-typescale-headline1-tracking: 0px;
--md-sys-typescale-display3-font: Roboto;
--md-sys-typescale-display3-weight: Regular;
--md-sys-typescale-display3-size: 45px;
--md-sys-typescale-display3-line-height: 52px;
--md-sys-typescale-display3-tracking: 0px;
--md-sys-typescale-display2-font: Roboto;
--md-sys-typescale-display2-weight: Regular;
--md-sys-typescale-display2-size: 57px;
--md-sys-typescale-display2-line-height: 64px;
--md-sys-typescale-display2-tracking: -0.25px;
--md-sys-typescale-headline4-font: Roboto;
--md-sys-typescale-headline4-weight: Regular;
--md-sys-typescale-headline4-size: 24px;
--md-sys-typescale-headline4-line-height: 32px;
--md-sys-typescale-headline4-tracking: 0px;
--md-sys-typescale-headline3-font: Roboto;
--md-sys-typescale-headline3-weight: Regular;
--md-sys-typescale-headline3-size: 28px;
--md-sys-typescale-headline3-line-height: 36px;
--md-sys-typescale-headline3-tracking: 0px;
--md-sys-typescale-headline2-font: Roboto;
--md-sys-typescale-headline2-weight: Regular;
--md-sys-typescale-headline2-size: 32px;
--md-sys-typescale-headline2-line-height: 40px;
--md-sys-typescale-headline2-tracking: 0px;
--md-sys-typescale-overline-font: Roboto;
--md-sys-typescale-overline-weight: Medium;
--md-sys-typescale-overline-size: 12px;
--md-sys-typescale-overline-line-height: 16px;
--md-sys-typescale-overline-tracking: 0.5px;
--md-sys-typescale-button-font: Roboto;
--md-sys-typescale-button-weight: Medium;
--md-sys-typescale-button-size: 14px;
--md-sys-typescale-button-line-height: 20px;
--md-sys-typescale-button-tracking: 0.10000000149011612px;
--md-sys-typescale-subhead2-font: Roboto;
--md-sys-typescale-subhead2-weight: Medium;
--md-sys-typescale-subhead2-size: 14px;
--md-sys-typescale-subhead2-line-height: 20px;
--md-sys-typescale-subhead2-tracking: 0.10000000149011612px;
--md-sys-typescale-subhead1-font: Roboto;
--md-sys-typescale-subhead1-weight: Medium;
--md-sys-typescale-subhead1-size: 16px;
--md-sys-typescale-subhead1-line-height: 24px;
--md-sys-typescale-subhead1-tracking: 0.15000000596046448px;
--md-sys-typescale-headline5-font: Roboto;
--md-sys-typescale-headline5-weight: Regular;
--md-sys-typescale-headline5-size: 22px;
--md-sys-typescale-headline5-line-height: 28px;
--md-sys-typescale-headline5-tracking: 0px;
--md-sys-typescale-caption-font: Roboto;
--md-sys-typescale-caption-weight: Regular;
--md-sys-typescale-caption-size: 12px;
--md-sys-typescale-caption-line-height: 16px;
--md-sys-typescale-caption-tracking: 0.4000000059604645px;
--md-sys-typescale-body2-font: Roboto;
--md-sys-typescale-body2-weight: Regular;
--md-sys-typescale-body2-size: 14px;
--md-sys-typescale-body2-line-height: 20px;
--md-sys-typescale-body2-tracking: 0.25px;
--md-sys-typescale-body1-font: Roboto;
--md-sys-typescale-body1-weight: Regular;
--md-sys-typescale-body1-size: 16px;
--md-sys-typescale-body1-line-height: 24px;
--md-sys-typescale-body1-tracking: 0.5px;
--md-sys-color-primary-light: #006398;
--md-sys-color-primary-light: #3c5ba9;
--md-sys-color-on-primary-light: #ffffff;
--md-sys-color-primary-container-light: #cde5ff;
--md-sys-color-on-primary-container-light: #001d32;
--md-sys-color-secondary-light: #51606f;
--md-sys-color-primary-container-light: #dae1ff;
--md-sys-color-on-primary-container-light: #001849;
--md-sys-color-secondary-light: #585e71;
--md-sys-color-on-secondary-light: #ffffff;
--md-sys-color-secondary-container-light: #d4e4f6;
--md-sys-color-on-secondary-container-light: #0d1d2a;
--md-sys-color-tertiary-light: #006877;
--md-sys-color-secondary-container-light: #dde2f9;
--md-sys-color-on-secondary-container-light: #151b2c;
--md-sys-color-tertiary-light: #735471;
--md-sys-color-on-tertiary-light: #ffffff;
--md-sys-color-tertiary-container-light: #a2eeff;
--md-sys-color-on-tertiary-container-light: #001f25;
--md-sys-color-tertiary-container-light: #ffd6f9;
--md-sys-color-on-tertiary-container-light: #2b122b;
--md-sys-color-error-light: #ba1a1a;
--md-sys-color-on-error-light: #ffffff;
--md-sys-color-error-container-light: #ffdad6;
--md-sys-color-on-error-container-light: #410002;
--md-sys-color-outline-light: #72787e;
--md-sys-color-background-light: #fdfbff;
--md-sys-color-on-background-light: #001b3c;
--md-sys-color-surface-light: #fdfbff;
--md-sys-color-on-surface-light: #001b3c;
--md-sys-color-surface-variant-light: #dee3eb;
--md-sys-color-on-surface-variant-light: #42474e;
--md-sys-color-inverse-surface-light: #003061;
--md-sys-color-inverse-on-surface-light: #ecf1ff;
--md-sys-color-primary-dark: #93ccff;
--md-sys-color-on-primary-dark: #003351;
--md-sys-color-primary-container-dark: #004b74;
--md-sys-color-on-primary-container-dark: #cde5ff;
--md-sys-color-secondary-dark: #b8c8da;
--md-sys-color-on-secondary-dark: #23323f;
--md-sys-color-secondary-container-dark: #394857;
--md-sys-color-on-secondary-container-dark: #d4e4f6;
--md-sys-color-tertiary-dark: #52d7ef;
--md-sys-color-on-tertiary-dark: #00363e;
--md-sys-color-tertiary-container-dark: #004e5a;
--md-sys-color-on-tertiary-container-dark: #a2eeff;
--md-sys-color-outline-light: #757680;
--md-sys-color-background-light: #fefbff;
--md-sys-color-on-background-light: #1b1b1f;
--md-sys-color-surface-light: #fefbff;
--md-sys-color-on-surface-light: #1b1b1f;
--md-sys-color-surface-variant-light: #e2e2ec;
--md-sys-color-on-surface-variant-light: #45464f;
--md-sys-color-inverse-surface-light: #303034;
--md-sys-color-inverse-on-surface-light: #f2f0f4;
--md-sys-color-primary-dark: #b3c5ff;
--md-sys-color-on-primary-dark: #002b75;
--md-sys-color-primary-container-dark: #21428f;
--md-sys-color-on-primary-container-dark: #dae1ff;
--md-sys-color-secondary-dark: #c1c6dd;
--md-sys-color-on-secondary-dark: #2a3042;
--md-sys-color-secondary-container-dark: #414659;
--md-sys-color-on-secondary-container-dark: #dde2f9;
--md-sys-color-tertiary-dark: #e1bbdc;
--md-sys-color-on-tertiary-dark: #422741;
--md-sys-color-tertiary-container-dark: #5a3d58;
--md-sys-color-on-tertiary-container-dark: #ffd6f9;
--md-sys-color-error-dark: #ffb4ab;
--md-sys-color-on-error-dark: #690005;
--md-sys-color-error-container-dark: #93000a;
--md-sys-color-on-error-container-dark: #ffdad6;
--md-sys-color-outline-dark: #8c9198;
--md-sys-color-background-dark: #001b3c;
--md-sys-color-on-background-dark: #d5e3ff;
--md-sys-color-surface-dark: #001b3c;
--md-sys-color-on-surface-dark: #d5e3ff;
--md-sys-color-surface-variant-dark: #42474e;
--md-sys-color-on-surface-variant-dark: #c2c7ce;
--md-sys-color-inverse-surface-dark: #d5e3ff;
--md-sys-color-inverse-on-surface-dark: #001b3c;
--md-sys-color-on-error-container-dark: #ffb4ab;
--md-sys-color-outline-dark: #8f909a;
--md-sys-color-background-dark: #1b1b1f;
--md-sys-color-on-background-dark: #e4e2e6;
--md-sys-color-surface-dark: #1b1b1f;
--md-sys-color-on-surface-dark: #e4e2e6;
--md-sys-color-surface-variant-dark: #45464f;
--md-sys-color-on-surface-variant-dark: #c5c6d0;
--md-sys-color-inverse-surface-dark: #e4e2e6;
--md-sys-color-inverse-on-surface-dark: #303034;
}
@media (prefers-color-scheme: light) {
.material-theme {
Expand Down
38 changes: 28 additions & 10 deletions src/www/css/material/material-you.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,20 +49,39 @@ body {
padding: 1.5rem 1.3rem;
}
.material-container--primary {
color: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary-container);
background-color: var(--md-sys-color-primary-container);
}
.material-container--secondary {
.material-inverted--primary {
color: var(--md-sys-color-primary-container);
background-color: var(--md-sys-color-on-primary-container);
}

.material-colored--secondary {
color: var(--md-sys-color-on-secondary);
background-color: var(--md-sys-color-secondary);
}
.material-container--color-on-secondary {
.material-basic--secondary {
color: var(--md-sys-color-secondary);
background-color: var(--md-sys-color-on-secondary);
}
.material-container--secondary {
color: var(--md-sys-color-on-secondary-container);
background-color: var(--md-sys-color-secondary-container);
}
.material-inverted--secondary {
color: var(--md-sys-color-secondary-container);
background-color: var(--md-sys-color-on-secondary-container);
}

.material-container--tertiary {
color: var(--md-sys-color-on-tertiary);
background-color: var(--md-sys-color-tertiary);
color: var(--md-sys-color-on-tertiary-container);
background-color: var(--md-sys-color-tertiary-container);
}

.material-outline {
--tw-border-opacity: 1;
border-color: var(--md-sys-color-outline);
}

.material-text--on-background {
Expand All @@ -82,16 +101,15 @@ body {
padding: 0rem 1.5rem;
border-radius: 100px;
text-decoration: none;
line-height: 3rem;
height: 3rem;
border: transparent solid 2px;
}
.material-button:hover {
border: var(--md-sys-color-outline) solid 2px;
}
.material-button--primary {
color: var(--md-sys-color-on-primary-container);
background-color: var(--md-sys-color-primary-container);
.material-button--filled-primary {
color: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-primary);
}
.material-button--tertiary {
color: var(--md-sys-color-on-tertiary-container);
Expand Down
Loading

0 comments on commit d81a068

Please sign in to comment.