DEV: update styleguide guidance for colors and font sizes (#12975)
This commit is contained in:
Penar Musaraj
GitHub
parent
972347bc98
commit
116ae8ebc1
|
|
@ -1,2 +1,2 @@
|
|||
<div class="color-bg {{color}}"></div>
|
||||
<div class="color-name">${{color}}</div>
|
||||
<div class="color-name">var(--{{color}})</div>
|
||||
|
|
|
|||
|
|
@ -34,66 +34,66 @@
|
|||
</p>
|
||||
<pre>
|
||||
.parent {
|
||||
<span class="hljs-attribute">font-size</span>: $font-up-3;
|
||||
<span class="hljs-attribute">font-size</span>: var(--font-up-3);
|
||||
<span>// Increases the relative font-size of this element and its children by 3 steps in the scale</span>
|
||||
.child {
|
||||
<span>// If this is set to $font-down-3 in Discourse's default CSS,
|
||||
the parent font-size increase above would make this equivilant to $font-0
|
||||
($font-down-3 + $font-up-3 = $font-0)</span>
|
||||
<span>// If this is set to var(--font-down-3) in Discourse's default CSS,
|
||||
the parent font-size increase above would make this equivalent to var(--font-0)
|
||||
(var(--font-down-3) + var(--font-up-3) = var(--font-0))</span>
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{#styleguide-example title="$font-up-6, 2.296em"}}
|
||||
{{#styleguide-example title="var(--font-up-6), 2.296em"}}
|
||||
<p class="font-up-6">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$font-up-5, 2em"}}
|
||||
{{#styleguide-example title="var(--font-up-5), 2em"}}
|
||||
<p class="font-up-5">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$font-up-4, 1.7511em"}}
|
||||
{{#styleguide-example title="var(--font-up-4), 1.7511em"}}
|
||||
<p class="font-up-4">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$font-up-3, 1.5157em"}}
|
||||
{{#styleguide-example title="var(--font-up-3), 1.5157em"}}
|
||||
<p class="font-up-3">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$font-up-2, 1.3195em"}}
|
||||
{{#styleguide-example title="var(--font-up-2), 1.3195em"}}
|
||||
<p class="font-up-2">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$font-up-1, 1.1487em"}}
|
||||
{{#styleguide-example title="var(--font-up-1), 1.1487em"}}
|
||||
<p class="font-up-1">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$font-0, 1em — base font"}}
|
||||
{{#styleguide-example title="var(--font-0), 1em — base font"}}
|
||||
<p class="font-0">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$font-down-1, 0.8706em"}}
|
||||
{{#styleguide-example title="var(--font-down-1), 0.8706em"}}
|
||||
<p class="font-down-1">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$font-down-2, 0.7579em"}}
|
||||
{{#styleguide-example title="var(--font-down-2), 0.7579em"}}
|
||||
<p class="font-down-2">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$font-down-3, 0.6599em"}}
|
||||
{{#styleguide-example title="var(--font-down-3), 0.6599em"}}
|
||||
<p class="font-down-3">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$font-down-4, 0.5745em"}}
|
||||
{{#styleguide-example title="var(--font-down-4), 0.5745em"}}
|
||||
<p class="font-down-4">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$font-down-5, 0.5em"}}
|
||||
{{#styleguide-example title="var(--font-down-5), 0.5em"}}
|
||||
<p class="font-down-5">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$font-down-6, 0.4355em"}}
|
||||
{{#styleguide-example title="var(--font-down-6), 0.4355em"}}
|
||||
<p class="font-down-6">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
{{/styleguide-example}}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{{#styleguide-example title="$primary"}}
|
||||
{{#styleguide-example title="primary"}}
|
||||
<section class="color-row">
|
||||
{{color-example color="primary-very-low"}}
|
||||
{{color-example color="primary-low"}}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</section>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$secondary"}}
|
||||
{{#styleguide-example title="secondary"}}
|
||||
<section class="color-row">
|
||||
{{color-example color="secondary-low"}}
|
||||
{{color-example color="secondary-medium"}}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
</section>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$tertiary"}}
|
||||
{{#styleguide-example title="tertiary"}}
|
||||
<section class="color-row">
|
||||
{{color-example color="tertiary-low"}}
|
||||
{{color-example color="tertiary-medium"}}
|
||||
|
|
@ -29,14 +29,14 @@
|
|||
</section>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$quaternary"}}
|
||||
{{#styleguide-example title="quaternary"}}
|
||||
<section class="color-row">
|
||||
{{color-example color="quaternary-low"}}
|
||||
{{color-example color="quaternary"}}
|
||||
</section>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$highlight"}}
|
||||
{{#styleguide-example title="highlight"}}
|
||||
<section class="color-row">
|
||||
{{color-example color="highlight-low"}}
|
||||
{{color-example color="highlight-medium"}}
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
</section>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$danger"}}
|
||||
{{#styleguide-example title="danger"}}
|
||||
<section class="color-row">
|
||||
{{color-example color="danger-low"}}
|
||||
{{color-example color="danger-low-mid"}}
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
</section>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$success"}}
|
||||
{{#styleguide-example title="success"}}
|
||||
<section class="color-row">
|
||||
{{color-example color="success-low"}}
|
||||
{{color-example color="success-medium"}}
|
||||
|
|
@ -62,14 +62,14 @@
|
|||
</section>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$love"}}
|
||||
{{#styleguide-example title="love"}}
|
||||
<section class="color-row">
|
||||
{{color-example color="love-low"}}
|
||||
{{color-example color="love"}}
|
||||
</section>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="$header"}}
|
||||
{{#styleguide-example title="header"}}
|
||||
<section class="color-row">
|
||||
{{color-example color="header_background"}}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,120 +1,117 @@
|
|||
.color-row {
|
||||
.primary-very-low {
|
||||
background-color: var(--primary-very-low, $primary-very-low);
|
||||
background-color: var(--primary-very-low);
|
||||
}
|
||||
.primary-low {
|
||||
background-color: var(--primary-low, $primary-low);
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
.primary-low-mid {
|
||||
background-color: var(--primary-low-mid, $primary-low-mid);
|
||||
background-color: var(--primary-low-mid);
|
||||
}
|
||||
.primary-medium {
|
||||
background-color: var(--primary-medium, $primary-medium);
|
||||
background-color: var(--primary-medium);
|
||||
}
|
||||
.primary-high {
|
||||
background-color: var(--primary-high, $primary-high);
|
||||
background-color: var(--primary-high);
|
||||
}
|
||||
.primary {
|
||||
background-color: var(--primary, $primary);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
.secondary-low {
|
||||
background-color: var(--secondary-low, $secondary-low);
|
||||
background-color: var(--secondary-low);
|
||||
}
|
||||
.secondary-medium {
|
||||
background-color: var(--secondary-medium, $secondary-medium);
|
||||
background-color: var(--secondary-medium);
|
||||
}
|
||||
.secondary-high {
|
||||
background-color: var(--secondary-high, $secondary-high);
|
||||
background-color: var(--secondary-high);
|
||||
}
|
||||
.secondary {
|
||||
background-color: var(--secondary, $secondary);
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
.tertiary-low {
|
||||
background-color: var(--tertiary-low, $tertiary-low);
|
||||
background-color: var(--tertiary-low);
|
||||
}
|
||||
.tertiary-medium {
|
||||
background-color: var(--tertiary-medium, $tertiary-medium);
|
||||
background-color: var(--tertiary-medium);
|
||||
}
|
||||
.tertiary-high {
|
||||
background-color: var(--tertiary-high, $tertiary-high);
|
||||
background-color: var(--tertiary-high);
|
||||
}
|
||||
.tertiary {
|
||||
background-color: var(--tertiary, $tertiary);
|
||||
background-color: var(--tertiary);
|
||||
}
|
||||
.quaternary-low {
|
||||
background-color: var(--quaternary-low, $quaternary-low);
|
||||
background-color: var(--quaternary-low);
|
||||
}
|
||||
.quaternary {
|
||||
background-color: var(--quaternary, $quaternary);
|
||||
background-color: var(--quaternary);
|
||||
}
|
||||
.highlight-low {
|
||||
background-color: var(--highlight-low, $highlight-low);
|
||||
background-color: var(--highlight-low);
|
||||
}
|
||||
.highlight-medium {
|
||||
background-color: var(--highlight-medium, $highlight-medium);
|
||||
background-color: var(--highlight-medium);
|
||||
}
|
||||
.highlight-high {
|
||||
background-color: var(--highlight-high, $highlight-high);
|
||||
background-color: var(--highlight-high);
|
||||
}
|
||||
.highlight {
|
||||
background-color: var(--highlight, $highlight);
|
||||
background-color: var(--highlight);
|
||||
}
|
||||
.danger-low {
|
||||
background-color: var(--danger-low, $danger-low);
|
||||
background-color: var(--danger-low);
|
||||
}
|
||||
.danger-low-mid {
|
||||
background-color: var(--danger-low-mid, $danger-low-mid);
|
||||
background-color: var(--danger-low-mid);
|
||||
}
|
||||
.danger-medium {
|
||||
background-color: var(--danger-medium, $danger-medium);
|
||||
background-color: var(--danger-medium);
|
||||
}
|
||||
.danger {
|
||||
background-color: var(--danger, $danger);
|
||||
background-color: var(--danger);
|
||||
}
|
||||
.success-low {
|
||||
background-color: var(--success-low, $success-low);
|
||||
background-color: var(--success-low);
|
||||
}
|
||||
.success-medium {
|
||||
background-color: var(--success-medium, $success-medium);
|
||||
background-color: var(--success-medium);
|
||||
}
|
||||
.success {
|
||||
background-color: var(--success, $success);
|
||||
background-color: var(--success);
|
||||
}
|
||||
.love-low {
|
||||
background-color: var(--love-low, $love-low);
|
||||
background-color: var(--love-low);
|
||||
}
|
||||
.love {
|
||||
background-color: var(--love, $love);
|
||||
background-color: var(--love);
|
||||
}
|
||||
|
||||
.header_primary {
|
||||
background-color: var(--header_primary, $header_primary);
|
||||
background-color: var(--header_primary);
|
||||
}
|
||||
|
||||
.header_background {
|
||||
background-color: var(--header_background, $header_background);
|
||||
background-color: var(--header_background);
|
||||
}
|
||||
|
||||
.header_primary-low {
|
||||
background-color: var(--header_primary-low, $header_primary-low);
|
||||
background-color: var(--header_primary-low);
|
||||
}
|
||||
|
||||
.header_primary-low-mid {
|
||||
background-color: var(--header_primary-low-mid, $header_primary-low-mid);
|
||||
background-color: var(--header_primary-low-mid);
|
||||
}
|
||||
|
||||
.header_primary-medium {
|
||||
background-color: var(--header_primary-medium, $header_primary-medium);
|
||||
background-color: var(--header_primary-medium);
|
||||
}
|
||||
|
||||
.header_primary-high {
|
||||
background-color: var(--header_primary-high, $header_primary-high);
|
||||
background-color: var(--header_primary-high);
|
||||
}
|
||||
|
||||
.header_primary-very-high {
|
||||
background-color: var(
|
||||
--header_primary-very-high,
|
||||
$header_primary-very-high
|
||||
);
|
||||
background-color: var(--header_primary-very-high);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
.styleguide-note {
|
||||
padding: 1em;
|
||||
background-color: var(--tertiary, $tertiary);
|
||||
background-color: var(--tertiary);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
margin-left: 0;
|
||||
|
||||
li.styleguide-heading {
|
||||
color: var(--primary-medium, $primary-medium);
|
||||
color: var(--primary-medium);
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
margin-bottom: 0.25em;
|
||||
|
||||
a {
|
||||
color: var(--primary, $primary);
|
||||
color: var(--primary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
.styleguide-section {
|
||||
.section-title {
|
||||
font-size: $font-up-5;
|
||||
font-size: var(--font-up-5);
|
||||
font-weight: normal;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
|
@ -66,9 +66,9 @@
|
|||
|
||||
.styleguide-example {
|
||||
.example-title {
|
||||
color: var(--primary-medium, $primary-medium);
|
||||
font-size: $font-0;
|
||||
border-bottom: 1px solid var(--primary-low, $primary-low);
|
||||
color: var(--primary-medium);
|
||||
font-size: var(--font-0);
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
}
|
||||
|
||||
pre {
|
||||
background: var(--primary-very-low, $primary-very-low);
|
||||
background: var(--primary-very-low);
|
||||
white-space: pre-wrap;
|
||||
&.pre-inline {
|
||||
display: inline-block;
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
vertical-align: bottom;
|
||||
}
|
||||
span {
|
||||
color: var(--primary-medium, $primary-medium);
|
||||
color: var(--primary-medium);
|
||||
&.hljs-attribute {
|
||||
color: teal;
|
||||
}
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
|
||||
p.reason {
|
||||
display: inline;
|
||||
color: var(--primary-medium, $primary-medium);
|
||||
color: var(--primary-medium);
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
grid-gap: 10px;
|
||||
|
||||
.styleguide-icon {
|
||||
background-color: var(--primary-low, $primary-low);
|
||||
background-color: var(--primary-low);
|
||||
margin: 3px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
margin: 5px auto;
|
||||
}
|
||||
span {
|
||||
font-size: $font-down-1;
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,41 +3,41 @@ p[class*="font-"] {
|
|||
}
|
||||
|
||||
.font-up-6 {
|
||||
font-size: $font-up-6;
|
||||
font-size: var(--font-up-6);
|
||||
}
|
||||
.font-up-5 {
|
||||
font-size: $font-up-5;
|
||||
font-size: var(--font-up-5);
|
||||
}
|
||||
.font-up-4 {
|
||||
font-size: $font-up-4;
|
||||
font-size: var(--font-up-4);
|
||||
}
|
||||
.font-up-3 {
|
||||
font-size: $font-up-3;
|
||||
font-size: var(--font-up-3);
|
||||
}
|
||||
.font-up-2 {
|
||||
font-size: $font-up-2;
|
||||
font-size: var(--font-up-2);
|
||||
}
|
||||
.font-up-1 {
|
||||
font-size: $font-up-1;
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
.font-0 {
|
||||
font-size: $font-0;
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
.font-down-1 {
|
||||
font-size: $font-down-1;
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
.font-down-2 {
|
||||
font-size: $font-down-2;
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
.font-down-3 {
|
||||
font-size: $font-down-3;
|
||||
font-size: var(--font-down-3);
|
||||
}
|
||||
.font-down-4 {
|
||||
font-size: $font-down-4;
|
||||
font-size: var(--font-down-4);
|
||||
}
|
||||
.font-down-5 {
|
||||
font-size: $font-down-5;
|
||||
font-size: var(--font-down-5);
|
||||
}
|
||||
.font-down-6 {
|
||||
font-size: $font-down-6;
|
||||
font-size: var(--font-down-6);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue