diff --git a/styles/themes/material/colors.module.css b/styles/themes/material/colors.module.css new file mode 100644 index 0000000..fa072a6 --- /dev/null +++ b/styles/themes/material/colors.module.css @@ -0,0 +1,180 @@ +.primary { + background-color: var(--md-sys-color-primary); +} +.primary-text { + color: var(--md-sys-color-primary); +} +.on-primary { + background-color: var(--md-sys-color-on-primary); +} +.on-primary-text { + color: var(--md-sys-color-on-primary); +} +.primary-container { + background-color: var(--md-sys-color-primary-container); +} +.primary-container-text { + color: var(--md-sys-color-primary-container); +} +.on-primary-container { + background-color: var(--md-sys-color-on-primary-container); +} +.on-primary-container-text { + color: var(--md-sys-color-on-primary-container); +} +.secondary { + background-color: var(--md-sys-color-secondary); +} +.secondary-text { + color: var(--md-sys-color-secondary); +} +.on-secondary { + background-color: var(--md-sys-color-on-secondary); +} +.on-secondary-text { + color: var(--md-sys-color-on-secondary); +} +.secondary-container { + background-color: var(--md-sys-color-secondary-container); +} +.secondary-container-text { + color: var(--md-sys-color-secondary-container); +} +.on-secondary-container { + background-color: var(--md-sys-color-on-secondary-container); +} +.on-secondary-container-text { + color: var(--md-sys-color-on-secondary-container); +} +.tertiary { + background-color: var(--md-sys-color-tertiary); +} +.tertiary-text { + color: var(--md-sys-color-tertiary); +} +.on-tertiary { + background-color: var(--md-sys-color-on-tertiary); +} +.on-tertiary-text { + color: var(--md-sys-color-on-tertiary); +} +.tertiary-container { + background-color: var(--md-sys-color-tertiary-container); +} +.tertiary-container-text { + color: var(--md-sys-color-tertiary-container); +} +.on-tertiary-container { + background-color: var(--md-sys-color-on-tertiary-container); +} +.on-tertiary-container-text { + color: var(--md-sys-color-on-tertiary-container); +} +.error { + background-color: var(--md-sys-color-error); +} +.error-text { + color: var(--md-sys-color-error); +} +.error-container { + background-color: var(--md-sys-color-error-container); +} +.error-container-text { + color: var(--md-sys-color-error-container); +} +.on-error { + background-color: var(--md-sys-color-on-error); +} +.on-error-text { + color: var(--md-sys-color-on-error); +} +.on-error-container { + background-color: var(--md-sys-color-on-error-container); +} +.on-error-container-text { + color: var(--md-sys-color-on-error-container); +} +.background { + background-color: var(--md-sys-color-background); +} +.background-text { + color: var(--md-sys-color-background); +} +.on-background { + background-color: var(--md-sys-color-on-background); +} +.on-background-text { + color: var(--md-sys-color-on-background); +} +.surface { + background-color: var(--md-sys-color-surface); +} +.surface-text { + color: var(--md-sys-color-surface); +} +.on-surface { + background-color: var(--md-sys-color-on-surface); +} +.on-surface-text { + color: var(--md-sys-color-on-surface); +} +.surface-variant { + background-color: var(--md-sys-color-surface-variant); +} +.surface-variant-text { + color: var(--md-sys-color-surface-variant); +} +.on-surface-variant { + background-color: var(--md-sys-color-on-surface-variant); +} +.on-surface-variant-text { + color: var(--md-sys-color-on-surface-variant); +} +.outline { + background-color: var(--md-sys-color-outline); +} +.outline-text { + color: var(--md-sys-color-outline); +} +.inverse-on-surface { + background-color: var(--md-sys-color-inverse-on-surface); +} +.inverse-on-surface-text { + color: var(--md-sys-color-inverse-on-surface); +} +.inverse-surface { + background-color: var(--md-sys-color-inverse-surface); +} +.inverse-surface-text { + color: var(--md-sys-color-inverse-surface); +} +.inverse-primary { + background-color: var(--md-sys-color-inverse-primary); +} +.inverse-primary-text { + color: var(--md-sys-color-inverse-primary); +} +.shadow { + background-color: var(--md-sys-color-shadow); +} +.shadow-text { + color: var(--md-sys-color-shadow); +} +.surface-tint { + background-color: var(--md-sys-color-surface-tint); +} +.surface-tint-text { + color: var(--md-sys-color-surface-tint); +} +.outline-variant { + background-color: var(--md-sys-color-outline-variant); +} +.outline-variant-text { + color: var(--md-sys-color-outline-variant); +} +.scrim { + background-color: var(--md-sys-color-scrim); +} +.scrim-text { + color: var(--md-sys-color-scrim); +} diff --git a/styles/themes/material/theme.css b/styles/themes/material/theme.css new file mode 100644 index 0000000..60fc4e2 --- /dev/null +++ b/styles/themes/material/theme.css @@ -0,0 +1,5 @@ +@import url(tokens.css); +@import url(colors.module.css); +@import url(typography.module.css); +@import url(theme.light.css) (prefers-color-scheme: light); +@import url(theme.dark.css) (prefers-color-scheme: dark); diff --git a/styles/themes/material/theme.dark.css b/styles/themes/material/theme.dark.css new file mode 100644 index 0000000..2cdd786 --- /dev/null +++ b/styles/themes/material/theme.dark.css @@ -0,0 +1,32 @@ +:root { + --md-sys-color-primary: var(--md-sys-color-primary-dark); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); + --md-sys-color-secondary: var(--md-sys-color-secondary-dark); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); + --md-sys-color-error: var(--md-sys-color-error-dark); + --md-sys-color-error-container: var(--md-sys-color-error-container-dark); + --md-sys-color-on-error: var(--md-sys-color-on-error-dark); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); + --md-sys-color-background: var(--md-sys-color-background-dark); + --md-sys-color-on-background: var(--md-sys-color-on-background-dark); + --md-sys-color-surface: var(--md-sys-color-surface-dark); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); + --md-sys-color-outline: var(--md-sys-color-outline-dark); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); + --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark); + --md-sys-color-shadow: var(--md-sys-color-shadow-dark); + --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark); + --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark); + --md-sys-color-scrim: var(--md-sys-color-scrim-dark); +} diff --git a/styles/themes/material/theme.light.css b/styles/themes/material/theme.light.css new file mode 100644 index 0000000..6186269 --- /dev/null +++ b/styles/themes/material/theme.light.css @@ -0,0 +1,32 @@ +:root { + --md-sys-color-primary: var(--md-sys-color-primary-light); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); + --md-sys-color-secondary: var(--md-sys-color-secondary-light); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); + --md-sys-color-error: var(--md-sys-color-error-light); + --md-sys-color-error-container: var(--md-sys-color-error-container-light); + --md-sys-color-on-error: var(--md-sys-color-on-error-light); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); + --md-sys-color-background: var(--md-sys-color-background-light); + --md-sys-color-on-background: var(--md-sys-color-on-background-light); + --md-sys-color-surface: var(--md-sys-color-surface-light); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); + --md-sys-color-outline: var(--md-sys-color-outline-light); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); + --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light); + --md-sys-color-shadow: var(--md-sys-color-shadow-light); + --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light); + --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light); + --md-sys-color-scrim: var(--md-sys-color-scrim-light); +} diff --git a/styles/themes/material/tokens.css b/styles/themes/material/tokens.css new file mode 100644 index 0000000..d270159 --- /dev/null +++ b/styles/themes/material/tokens.css @@ -0,0 +1,272 @@ +:root { + --md-source: #006a6d; + /* primary */ + --md-ref-palette-primary0: #000000; + --md-ref-palette-primary10: #002021; + --md-ref-palette-primary20: #003738; + --md-ref-palette-primary25: #004345; + --md-ref-palette-primary30: #004f52; + --md-ref-palette-primary35: #005c5f; + --md-ref-palette-primary40: #00696c; + --md-ref-palette-primary50: #008488; + --md-ref-palette-primary60: #00a1a5; + --md-ref-palette-primary70: #1dbdc2; + --md-ref-palette-primary80: #4cd9de; + --md-ref-palette-primary90: #6ff6fb; + --md-ref-palette-primary95: #b9fdff; + --md-ref-palette-primary98: #e4ffff; + --md-ref-palette-primary99: #f1ffff; + --md-ref-palette-primary100: #ffffff; + /* secondary */ + --md-ref-palette-secondary0: #000000; + --md-ref-palette-secondary10: #041f20; + --md-ref-palette-secondary20: #1b3435; + --md-ref-palette-secondary25: #274040; + --md-ref-palette-secondary30: #324b4c; + --md-ref-palette-secondary35: #3e5758; + --md-ref-palette-secondary40: #4a6364; + --md-ref-palette-secondary50: #627c7d; + --md-ref-palette-secondary60: #7b9696; + --md-ref-palette-secondary70: #96b0b1; + --md-ref-palette-secondary80: #b0cccc; + --md-ref-palette-secondary90: #cce8e8; + --md-ref-palette-secondary95: #daf6f7; + --md-ref-palette-secondary98: #e4ffff; + --md-ref-palette-secondary99: #f1ffff; + --md-ref-palette-secondary100: #ffffff; + /* tertiary */ + --md-ref-palette-tertiary0: #000000; + --md-ref-palette-tertiary10: #071c36; + --md-ref-palette-tertiary20: #1e314c; + --md-ref-palette-tertiary25: #2a3c57; + --md-ref-palette-tertiary30: #354763; + --md-ref-palette-tertiary35: #415370; + --md-ref-palette-tertiary40: #4d5f7c; + --md-ref-palette-tertiary50: #667896; + --md-ref-palette-tertiary60: #7f92b1; + --md-ref-palette-tertiary70: #99accd; + --md-ref-palette-tertiary80: #b5c7e9; + --md-ref-palette-tertiary90: #d5e3ff; + --md-ref-palette-tertiary95: #ebf1ff; + --md-ref-palette-tertiary98: #f9f9ff; + --md-ref-palette-tertiary99: #fdfbff; + --md-ref-palette-tertiary100: #ffffff; + /* neutral */ + --md-ref-palette-neutral0: #000000; + --md-ref-palette-neutral10: #191c1c; + --md-ref-palette-neutral20: #2d3131; + --md-ref-palette-neutral25: #383c3c; + --md-ref-palette-neutral30: #444747; + --md-ref-palette-neutral35: #505353; + --md-ref-palette-neutral40: #5c5f5f; + --md-ref-palette-neutral50: #747877; + --md-ref-palette-neutral60: #8e9191; + --md-ref-palette-neutral70: #a9acab; + --md-ref-palette-neutral80: #c4c7c7; + --md-ref-palette-neutral90: #e0e3e2; + --md-ref-palette-neutral95: #eff1f1; + --md-ref-palette-neutral98: #f7faf9; + --md-ref-palette-neutral99: #fafdfc; + --md-ref-palette-neutral100: #ffffff; + /* neutral-variant */ + --md-ref-palette-neutral-variant0: #000000; + --md-ref-palette-neutral-variant10: #141d1e; + --md-ref-palette-neutral-variant20: #293232; + --md-ref-palette-neutral-variant25: #343d3d; + --md-ref-palette-neutral-variant30: #3f4949; + --md-ref-palette-neutral-variant35: #4a5454; + --md-ref-palette-neutral-variant40: #566060; + --md-ref-palette-neutral-variant50: #6f7979; + --md-ref-palette-neutral-variant60: #899393; + --md-ref-palette-neutral-variant70: #a3adad; + --md-ref-palette-neutral-variant80: #bec8c8; + --md-ref-palette-neutral-variant90: #dae4e4; + --md-ref-palette-neutral-variant95: #e9f3f3; + --md-ref-palette-neutral-variant98: #f1fbfb; + --md-ref-palette-neutral-variant99: #f4fefe; + --md-ref-palette-neutral-variant100: #ffffff; + /* error */ + --md-ref-palette-error0: #000000; + --md-ref-palette-error10: #410002; + --md-ref-palette-error20: #690005; + --md-ref-palette-error25: #7e0007; + --md-ref-palette-error30: #93000a; + --md-ref-palette-error35: #a80710; + --md-ref-palette-error40: #ba1a1a; + --md-ref-palette-error50: #de3730; + --md-ref-palette-error60: #ff5449; + --md-ref-palette-error70: #ff897d; + --md-ref-palette-error80: #ffb4ab; + --md-ref-palette-error90: #ffdad6; + --md-ref-palette-error95: #ffedea; + --md-ref-palette-error98: #fff8f7; + --md-ref-palette-error99: #fffbff; + --md-ref-palette-error100: #ffffff; + /* light */ + --md-sys-color-primary-light: #00696c; + --md-sys-color-on-primary-light: #ffffff; + --md-sys-color-primary-container-light: #6ff6fb; + --md-sys-color-on-primary-container-light: #002021; + --md-sys-color-secondary-light: #4a6364; + --md-sys-color-on-secondary-light: #ffffff; + --md-sys-color-secondary-container-light: #cce8e8; + --md-sys-color-on-secondary-container-light: #041f20; + --md-sys-color-tertiary-light: #4d5f7c; + --md-sys-color-on-tertiary-light: #ffffff; + --md-sys-color-tertiary-container-light: #d5e3ff; + --md-sys-color-on-tertiary-container-light: #071c36; + --md-sys-color-error-light: #ba1a1a; + --md-sys-color-error-container-light: #ffdad6; + --md-sys-color-on-error-light: #ffffff; + --md-sys-color-on-error-container-light: #410002; + --md-sys-color-background-light: #fafdfc; + --md-sys-color-on-background-light: #191c1c; + --md-sys-color-surface-light: #fafdfc; + --md-sys-color-on-surface-light: #191c1c; + --md-sys-color-surface-variant-light: #dae4e4; + --md-sys-color-on-surface-variant-light: #3f4949; + --md-sys-color-outline-light: #6f7979; + --md-sys-color-inverse-on-surface-light: #eff1f1; + --md-sys-color-inverse-surface-light: #2d3131; + --md-sys-color-inverse-primary-light: #4cd9de; + --md-sys-color-shadow-light: #000000; + --md-sys-color-surface-tint-light: #00696c; + --md-sys-color-outline-variant-light: #bec8c8; + --md-sys-color-scrim-light: #000000; + /* dark */ + --md-sys-color-primary-dark: #4cd9de; + --md-sys-color-on-primary-dark: #003738; + --md-sys-color-primary-container-dark: #004f52; + --md-sys-color-on-primary-container-dark: #6ff6fb; + --md-sys-color-secondary-dark: #b0cccc; + --md-sys-color-on-secondary-dark: #1b3435; + --md-sys-color-secondary-container-dark: #324b4c; + --md-sys-color-on-secondary-container-dark: #cce8e8; + --md-sys-color-tertiary-dark: #b5c7e9; + --md-sys-color-on-tertiary-dark: #1e314c; + --md-sys-color-tertiary-container-dark: #354763; + --md-sys-color-on-tertiary-container-dark: #d5e3ff; + --md-sys-color-error-dark: #ffb4ab; + --md-sys-color-error-container-dark: #93000a; + --md-sys-color-on-error-dark: #690005; + --md-sys-color-on-error-container-dark: #ffdad6; + --md-sys-color-background-dark: #191c1c; + --md-sys-color-on-background-dark: #e0e3e2; + --md-sys-color-surface-dark: #191c1c; + --md-sys-color-on-surface-dark: #e0e3e2; + --md-sys-color-surface-variant-dark: #3f4949; + --md-sys-color-on-surface-variant-dark: #bec8c8; + --md-sys-color-outline-dark: #899393; + --md-sys-color-inverse-on-surface-dark: #191c1c; + --md-sys-color-inverse-surface-dark: #e0e3e2; + --md-sys-color-inverse-primary-dark: #00696c; + --md-sys-color-shadow-dark: #000000; + --md-sys-color-surface-tint-dark: #4cd9de; + --md-sys-color-outline-variant-dark: #3f4949; + --md-sys-color-scrim-dark: #000000; + /* display - large */ + --md-sys-typescale-display-large-font-family-name: Roboto; + --md-sys-typescale-display-large-font-family-style: Regular; + --md-sys-typescale-display-large-font-weight: 400px; + --md-sys-typescale-display-large-font-size: 57px; + --md-sys-typescale-display-large-line-height: 64px; + --md-sys-typescale-display-large-letter-spacing: -0.25px; + /* display - medium */ + --md-sys-typescale-display-medium-font-family-name: Roboto; + --md-sys-typescale-display-medium-font-family-style: Regular; + --md-sys-typescale-display-medium-font-weight: 400px; + --md-sys-typescale-display-medium-font-size: 45px; + --md-sys-typescale-display-medium-line-height: 52px; + --md-sys-typescale-display-medium-letter-spacing: 0px; + /* display - small */ + --md-sys-typescale-display-small-font-family-name: Roboto; + --md-sys-typescale-display-small-font-family-style: Regular; + --md-sys-typescale-display-small-font-weight: 400px; + --md-sys-typescale-display-small-font-size: 36px; + --md-sys-typescale-display-small-line-height: 44px; + --md-sys-typescale-display-small-letter-spacing: 0px; + /* headline - large */ + --md-sys-typescale-headline-large-font-family-name: Roboto; + --md-sys-typescale-headline-large-font-family-style: Regular; + --md-sys-typescale-headline-large-font-weight: 400px; + --md-sys-typescale-headline-large-font-size: 32px; + --md-sys-typescale-headline-large-line-height: 40px; + --md-sys-typescale-headline-large-letter-spacing: 0px; + /* headline - medium */ + --md-sys-typescale-headline-medium-font-family-name: Roboto; + --md-sys-typescale-headline-medium-font-family-style: Regular; + --md-sys-typescale-headline-medium-font-weight: 400px; + --md-sys-typescale-headline-medium-font-size: 28px; + --md-sys-typescale-headline-medium-line-height: 36px; + --md-sys-typescale-headline-medium-letter-spacing: 0px; + /* headline - small */ + --md-sys-typescale-headline-small-font-family-name: Roboto; + --md-sys-typescale-headline-small-font-family-style: Regular; + --md-sys-typescale-headline-small-font-weight: 400px; + --md-sys-typescale-headline-small-font-size: 24px; + --md-sys-typescale-headline-small-line-height: 32px; + --md-sys-typescale-headline-small-letter-spacing: 0px; + /* body - large */ + --md-sys-typescale-body-large-font-family-name: Roboto; + --md-sys-typescale-body-large-font-family-style: Regular; + --md-sys-typescale-body-large-font-weight: 400px; + --md-sys-typescale-body-large-font-size: 16px; + --md-sys-typescale-body-large-line-height: 24px; + --md-sys-typescale-body-large-letter-spacing: 0.50px; + /* body - medium */ + --md-sys-typescale-body-medium-font-family-name: Roboto; + --md-sys-typescale-body-medium-font-family-style: Regular; + --md-sys-typescale-body-medium-font-weight: 400px; + --md-sys-typescale-body-medium-font-size: 14px; + --md-sys-typescale-body-medium-line-height: 20px; + --md-sys-typescale-body-medium-letter-spacing: 0.25px; + /* body - small */ + --md-sys-typescale-body-small-font-family-name: Roboto; + --md-sys-typescale-body-small-font-family-style: Regular; + --md-sys-typescale-body-small-font-weight: 400px; + --md-sys-typescale-body-small-font-size: 12px; + --md-sys-typescale-body-small-line-height: 16px; + --md-sys-typescale-body-small-letter-spacing: 0.40px; + /* label - large */ + --md-sys-typescale-label-large-font-family-name: Roboto; + --md-sys-typescale-label-large-font-family-style: Medium; + --md-sys-typescale-label-large-font-weight: 500px; + --md-sys-typescale-label-large-font-size: 14px; + --md-sys-typescale-label-large-line-height: 20px; + --md-sys-typescale-label-large-letter-spacing: 0.10px; + /* label - medium */ + --md-sys-typescale-label-medium-font-family-name: Roboto; + --md-sys-typescale-label-medium-font-family-style: Medium; + --md-sys-typescale-label-medium-font-weight: 500px; + --md-sys-typescale-label-medium-font-size: 12px; + --md-sys-typescale-label-medium-line-height: 16px; + --md-sys-typescale-label-medium-letter-spacing: 0.50px; + /* label - small */ + --md-sys-typescale-label-small-font-family-name: Roboto; + --md-sys-typescale-label-small-font-family-style: Medium; + --md-sys-typescale-label-small-font-weight: 500px; + --md-sys-typescale-label-small-font-size: 11px; + --md-sys-typescale-label-small-line-height: 16px; + --md-sys-typescale-label-small-letter-spacing: 0.50px; + /* title - large */ + --md-sys-typescale-title-large-font-family-name: Roboto; + --md-sys-typescale-title-large-font-family-style: Regular; + --md-sys-typescale-title-large-font-weight: 400px; + --md-sys-typescale-title-large-font-size: 22px; + --md-sys-typescale-title-large-line-height: 28px; + --md-sys-typescale-title-large-letter-spacing: 0px; + /* title - medium */ + --md-sys-typescale-title-medium-font-family-name: Roboto; + --md-sys-typescale-title-medium-font-family-style: Medium; + --md-sys-typescale-title-medium-font-weight: 500px; + --md-sys-typescale-title-medium-font-size: 16px; + --md-sys-typescale-title-medium-line-height: 24px; + --md-sys-typescale-title-medium-letter-spacing: 0.15px; + /* title - small */ + --md-sys-typescale-title-small-font-family-name: Roboto; + --md-sys-typescale-title-small-font-family-style: Medium; + --md-sys-typescale-title-small-font-weight: 500px; + --md-sys-typescale-title-small-font-size: 14px; + --md-sys-typescale-title-small-line-height: 20px; + --md-sys-typescale-title-small-letter-spacing: 0.10px; +} diff --git a/styles/themes/material/typography.module.css b/styles/themes/material/typography.module.css new file mode 100644 index 0000000..5e2c82f --- /dev/null +++ b/styles/themes/material/typography.module.css @@ -0,0 +1,150 @@ +.display-large{ + font-family: var(--md-sys-typescale-display-large-font-family-name); + font-style: var(--md-sys-typescale-display-large-font-family-style); + font-weight: var(--md-sys-typescale-display-large-font-weight); + font-size: var(--md-sys-typescale-display-large-font-size); + letter-spacing: var(--md-sys-typescale-display-large-tracking); + line-height: var(--md-sys-typescale-display-large-height); + text-transform: var(--md-sys-typescale-display-large-text-transform); + text-decoration: var(--md-sys-typescale-display-large-text-decoration); +} +.display-medium{ + font-family: var(--md-sys-typescale-display-medium-font-family-name); + font-style: var(--md-sys-typescale-display-medium-font-family-style); + font-weight: var(--md-sys-typescale-display-medium-font-weight); + font-size: var(--md-sys-typescale-display-medium-font-size); + letter-spacing: var(--md-sys-typescale-display-medium-tracking); + line-height: var(--md-sys-typescale-display-medium-height); + text-transform: var(--md-sys-typescale-display-medium-text-transform); + text-decoration: var(--md-sys-typescale-display-medium-text-decoration); +} +.display-small{ + font-family: var(--md-sys-typescale-display-small-font-family-name); + font-style: var(--md-sys-typescale-display-small-font-family-style); + font-weight: var(--md-sys-typescale-display-small-font-weight); + font-size: var(--md-sys-typescale-display-small-font-size); + letter-spacing: var(--md-sys-typescale-display-small-tracking); + line-height: var(--md-sys-typescale-display-small-height); + text-transform: var(--md-sys-typescale-display-small-text-transform); + text-decoration: var(--md-sys-typescale-display-small-text-decoration); +} +.headline-large{ + font-family: var(--md-sys-typescale-headline-large-font-family-name); + font-style: var(--md-sys-typescale-headline-large-font-family-style); + font-weight: var(--md-sys-typescale-headline-large-font-weight); + font-size: var(--md-sys-typescale-headline-large-font-size); + letter-spacing: var(--md-sys-typescale-headline-large-tracking); + line-height: var(--md-sys-typescale-headline-large-height); + text-transform: var(--md-sys-typescale-headline-large-text-transform); + text-decoration: var(--md-sys-typescale-headline-large-text-decoration); +} +.headline-medium{ + font-family: var(--md-sys-typescale-headline-medium-font-family-name); + font-style: var(--md-sys-typescale-headline-medium-font-family-style); + font-weight: var(--md-sys-typescale-headline-medium-font-weight); + font-size: var(--md-sys-typescale-headline-medium-font-size); + letter-spacing: var(--md-sys-typescale-headline-medium-tracking); + line-height: var(--md-sys-typescale-headline-medium-height); + text-transform: var(--md-sys-typescale-headline-medium-text-transform); + text-decoration: var(--md-sys-typescale-headline-medium-text-decoration); +} +.headline-small{ + font-family: var(--md-sys-typescale-headline-small-font-family-name); + font-style: var(--md-sys-typescale-headline-small-font-family-style); + font-weight: var(--md-sys-typescale-headline-small-font-weight); + font-size: var(--md-sys-typescale-headline-small-font-size); + letter-spacing: var(--md-sys-typescale-headline-small-tracking); + line-height: var(--md-sys-typescale-headline-small-height); + text-transform: var(--md-sys-typescale-headline-small-text-transform); + text-decoration: var(--md-sys-typescale-headline-small-text-decoration); +} +.body-large{ + font-family: var(--md-sys-typescale-body-large-font-family-name); + font-style: var(--md-sys-typescale-body-large-font-family-style); + font-weight: var(--md-sys-typescale-body-large-font-weight); + font-size: var(--md-sys-typescale-body-large-font-size); + letter-spacing: var(--md-sys-typescale-body-large-tracking); + line-height: var(--md-sys-typescale-body-large-height); + text-transform: var(--md-sys-typescale-body-large-text-transform); + text-decoration: var(--md-sys-typescale-body-large-text-decoration); +} +.body-medium{ + font-family: var(--md-sys-typescale-body-medium-font-family-name); + font-style: var(--md-sys-typescale-body-medium-font-family-style); + font-weight: var(--md-sys-typescale-body-medium-font-weight); + font-size: var(--md-sys-typescale-body-medium-font-size); + letter-spacing: var(--md-sys-typescale-body-medium-tracking); + line-height: var(--md-sys-typescale-body-medium-height); + text-transform: var(--md-sys-typescale-body-medium-text-transform); + text-decoration: var(--md-sys-typescale-body-medium-text-decoration); +} +.body-small{ + font-family: var(--md-sys-typescale-body-small-font-family-name); + font-style: var(--md-sys-typescale-body-small-font-family-style); + font-weight: var(--md-sys-typescale-body-small-font-weight); + font-size: var(--md-sys-typescale-body-small-font-size); + letter-spacing: var(--md-sys-typescale-body-small-tracking); + line-height: var(--md-sys-typescale-body-small-height); + text-transform: var(--md-sys-typescale-body-small-text-transform); + text-decoration: var(--md-sys-typescale-body-small-text-decoration); +} +.label-large{ + font-family: var(--md-sys-typescale-label-large-font-family-name); + font-style: var(--md-sys-typescale-label-large-font-family-style); + font-weight: var(--md-sys-typescale-label-large-font-weight); + font-size: var(--md-sys-typescale-label-large-font-size); + letter-spacing: var(--md-sys-typescale-label-large-tracking); + line-height: var(--md-sys-typescale-label-large-height); + text-transform: var(--md-sys-typescale-label-large-text-transform); + text-decoration: var(--md-sys-typescale-label-large-text-decoration); +} +.label-medium{ + font-family: var(--md-sys-typescale-label-medium-font-family-name); + font-style: var(--md-sys-typescale-label-medium-font-family-style); + font-weight: var(--md-sys-typescale-label-medium-font-weight); + font-size: var(--md-sys-typescale-label-medium-font-size); + letter-spacing: var(--md-sys-typescale-label-medium-tracking); + line-height: var(--md-sys-typescale-label-medium-height); + text-transform: var(--md-sys-typescale-label-medium-text-transform); + text-decoration: var(--md-sys-typescale-label-medium-text-decoration); +} +.label-small{ + font-family: var(--md-sys-typescale-label-small-font-family-name); + font-style: var(--md-sys-typescale-label-small-font-family-style); + font-weight: var(--md-sys-typescale-label-small-font-weight); + font-size: var(--md-sys-typescale-label-small-font-size); + letter-spacing: var(--md-sys-typescale-label-small-tracking); + line-height: var(--md-sys-typescale-label-small-height); + text-transform: var(--md-sys-typescale-label-small-text-transform); + text-decoration: var(--md-sys-typescale-label-small-text-decoration); +} +.title-large{ + font-family: var(--md-sys-typescale-title-large-font-family-name); + font-style: var(--md-sys-typescale-title-large-font-family-style); + font-weight: var(--md-sys-typescale-title-large-font-weight); + font-size: var(--md-sys-typescale-title-large-font-size); + letter-spacing: var(--md-sys-typescale-title-large-tracking); + line-height: var(--md-sys-typescale-title-large-height); + text-transform: var(--md-sys-typescale-title-large-text-transform); + text-decoration: var(--md-sys-typescale-title-large-text-decoration); +} +.title-medium{ + font-family: var(--md-sys-typescale-title-medium-font-family-name); + font-style: var(--md-sys-typescale-title-medium-font-family-style); + font-weight: var(--md-sys-typescale-title-medium-font-weight); + font-size: var(--md-sys-typescale-title-medium-font-size); + letter-spacing: var(--md-sys-typescale-title-medium-tracking); + line-height: var(--md-sys-typescale-title-medium-height); + text-transform: var(--md-sys-typescale-title-medium-text-transform); + text-decoration: var(--md-sys-typescale-title-medium-text-decoration); +} +.title-small{ + font-family: var(--md-sys-typescale-title-small-font-family-name); + font-style: var(--md-sys-typescale-title-small-font-family-style); + font-weight: var(--md-sys-typescale-title-small-font-weight); + font-size: var(--md-sys-typescale-title-small-font-size); + letter-spacing: var(--md-sys-typescale-title-small-tracking); + line-height: var(--md-sys-typescale-title-small-height); + text-transform: var(--md-sys-typescale-title-small-text-transform); + text-decoration: var(--md-sys-typescale-title-small-text-decoration); +}