mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-01 13:47:06 +01:00
488f212d28
* Changes to set-approval-for-all-warnings * Suggested changes * Updating deprecated components, improving semantic html and fixing text css strong tag styles --------- Co-authored-by: georgewrmarshall <george.marshall@consensys.net> Co-authored-by: Garrett Bear <gwhisten@gmail.com>
111 lines
2.4 KiB
SCSS
111 lines
2.4 KiB
SCSS
@use "design-system";
|
|
@use "sass:map";
|
|
|
|
$text-variants: (
|
|
display: ("md"),
|
|
heading: ( "sm", "md", "lg"),
|
|
body: ("xs", "sm", "sm-bold", "md", "md-bold", "lg-medium"),
|
|
);
|
|
|
|
// Variable output mixin
|
|
// screen size, type, size
|
|
|
|
@mixin textVariables($type, $size) {
|
|
font-family: var(--typography-s-#{$type}-#{$size}-font-family);
|
|
font-weight: var(--typography-s-#{$type}-#{$size}-font-weight);
|
|
font-size: var(--typography-s-#{$type}-#{$size}-font-size);
|
|
line-height: var(--typography-s-#{$type}-#{$size}-line-height);
|
|
letter-spacing: var(--typography-s-#{$type}-#{$size}-letter-spacing);
|
|
|
|
@include screen-md-min {
|
|
font-family: var(--typography-l-#{$type}-#{$size}-font-family);
|
|
font-weight: var(--typography-l-#{$type}-#{$size}-font-weight);
|
|
font-size: var(--typography-l-#{$type}-#{$size}-font-size);
|
|
line-height: var(--typography-l-#{$type}-#{$size}-line-height);
|
|
letter-spacing: var(--typography-l-#{$type}-#{$size}-letter-spacing);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.mm-text {
|
|
// Set default styles
|
|
color: var(--color-text-default);
|
|
font-family: var(--font-family-sans);
|
|
|
|
strong {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
@each $type, $size-options in $text-variants {
|
|
&--#{$type} {
|
|
// Sets a default
|
|
@include textVariables($type, "md");
|
|
// Generates all the size options
|
|
@each $size in $size-options {
|
|
&-#{$size} {
|
|
@include textVariables($type, $size);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $weight in $font-weight {
|
|
&--font-weight-#{$weight} {
|
|
@if $weight == "medium" {
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
@else {
|
|
font-weight: $weight;
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $style in $font-style {
|
|
&--font-style-#{$style} {
|
|
font-style: $style;
|
|
}
|
|
}
|
|
|
|
@each $alignment in $text-align {
|
|
&--text-align-#{$alignment} {
|
|
text-align: $alignment;
|
|
}
|
|
}
|
|
|
|
@each $overflow in $overflow-wrap {
|
|
&--overflow-wrap-#{$overflow} {
|
|
overflow-wrap: $overflow;
|
|
}
|
|
}
|
|
|
|
&--inherit {
|
|
font-family: inherit;
|
|
font-weight: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
letter-spacing: inherit;
|
|
}
|
|
|
|
&--ellipsis {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&--text-transform-uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
&--text-transform-lowercase {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
&--text-transform-capitalize {
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
|