Support standard css variables, dynamically set spacing-unit

This commit is contained in:
Chi Vinh Le
2018-07-12 03:19:14 -03:00
parent 1a08aba969
commit ff41fabb37
14 changed files with 499 additions and 113 deletions
+25 -21
View File
@@ -1,59 +1,63 @@
.heading1 {
font-size: calc(24rem / $rem-base);
font-weight: $font-weight-medium;
font-size: calc(24rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: "Manuale";
line-height: calc(32em / 24);
letter-spacing: calc(0.2em / 16);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.heading2 {
font-size: calc(20rem / $rem-base);
font-weight: $font-weight-medium;
font-size: calc(20rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: "Manuale";
line-height: calc(24em / 20);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.heading3 {
font-size: calc(18rem / $rem-base);
font-weight: $font-weight-medium;
font-size: calc(18rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: "Manuale";
line-height: calc(20em / 18);
letter-spacing: calc(0.2em / 16);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.heading4 {
font-size: calc(16rem / $rem-base);
font-weight: $font-weight-medium;
font-size: calc(16rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: "Manuale";
line-height: calc(18em / 16);
letter-spacing: calc(0.2em / 16);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.subtitle1 {}
.subtitle1 {
}
.subtitle2 {}
.subtitle2 {
}
.body2 {}
.body2 {
}
.body1 {
font-size: calc(16rem / $rem-base);
font-weight: $font-weight-regular;
font-size: calc(16rem / var(--rem-base));
font-weight: var(--font-weight-regular);
font-family: "Source Sans Pro";
line-height: calc(18em / 16);
letter-spacing: calc(0.2em / 16);
color: $palette-text-primary;
color: var(--palette-text-primary);
}
.button {
color: $palette-text-secondary;
color: var(--palette-text-secondary);
font-family: "Source Sans Pro";
font-weight: $font-weight-medium;
font-weight: var(--font-weight-medium);
font-size: 16px;
letter-spacing: calc(0.57em / 16);
}
.overline {}
.overline {
}