IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: update styleguide guidance for colors and font sizes (#12975)

Browse Source
This commit is contained in:
Penar Musaraj 2021-05-07 09:30:27 -04:00 committed by GitHub
parent 972347bc98
commit 116ae8ebc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 88 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/styleguide/assets/javascripts/discourse/templates/components/color-example.hbs
View File

@ -1,2 +1,2 @@
<div class="color-bg {{color}}"></div> <div class="color-bg {{color}}"></div>
<div class="color-name">${{color}}</div> <div class="color-name">var(--{{color}})</div>

34
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs
View File

@ -34,66 +34,66 @@
</p> </p>
<pre> <pre>
.parent { .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> <span>// Increases the relative font-size of this element and its children by 3 steps in the scale</span>
.child { .child {
<span>// If this is set to $font-down-3 in Discourse's default CSS, <span>// If this is set to var(--font-down-3) in Discourse's default CSS,
the parent font-size increase above would make this equivilant to $font-0 the parent font-size increase above would make this equivalent to var(--font-0)
($font-down-3 + $font-up-3 = $font-0)</span> (var(--font-down-3) + var(--font-up-3) = var(--font-0))</span>
} }
} }
</pre> </pre>
</p> </p>
</div> </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> <p class="font-up-6">{{i18n "styleguide.sections.typography.example"}}</p>
{{/styleguide-example}} {{/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> <p class="font-up-5">{{i18n "styleguide.sections.typography.example"}}</p>
{{/styleguide-example}} {{/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> <p class="font-up-4">{{i18n "styleguide.sections.typography.example"}}</p>
{{/styleguide-example}} {{/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> <p class="font-up-3">{{i18n "styleguide.sections.typography.example"}}</p>
{{/styleguide-example}} {{/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> <p class="font-up-2">{{i18n "styleguide.sections.typography.example"}}</p>
{{/styleguide-example}} {{/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> <p class="font-up-1">{{i18n "styleguide.sections.typography.example"}}</p>
{{/styleguide-example}} {{/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> <p class="font-0">{{i18n "styleguide.sections.typography.example"}}</p>
{{/styleguide-example}} {{/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> <p class="font-down-1">{{i18n "styleguide.sections.typography.example"}}</p>
{{/styleguide-example}} {{/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> <p class="font-down-2">{{i18n "styleguide.sections.typography.example"}}</p>
{{/styleguide-example}} {{/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> <p class="font-down-3">{{i18n "styleguide.sections.typography.example"}}</p>
{{/styleguide-example}} {{/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> <p class="font-down-4">{{i18n "styleguide.sections.typography.example"}}</p>
{{/styleguide-example}} {{/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> <p class="font-down-5">{{i18n "styleguide.sections.typography.example"}}</p>
{{/styleguide-example}} {{/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> <p class="font-down-6">{{i18n "styleguide.sections.typography.example"}}</p>
{{/styleguide-example}} {{/styleguide-example}}

18
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
View File

@ -1,4 +1,4 @@
{{#styleguide-example title="$primary"}} {{#styleguide-example title="primary"}}
<section class="color-row"> <section class="color-row">
{{color-example color="primary-very-low"}} {{color-example color="primary-very-low"}}
{{color-example color="primary-low"}} {{color-example color="primary-low"}}
@ -11,7 +11,7 @@
</section> </section>
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="$secondary"}} {{#styleguide-example title="secondary"}}
<section class="color-row"> <section class="color-row">
{{color-example color="secondary-low"}} {{color-example color="secondary-low"}}
{{color-example color="secondary-medium"}} {{color-example color="secondary-medium"}}
@ -20,7 +20,7 @@
</section> </section>
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="$tertiary"}} {{#styleguide-example title="tertiary"}}
<section class="color-row"> <section class="color-row">
{{color-example color="tertiary-low"}} {{color-example color="tertiary-low"}}
{{color-example color="tertiary-medium"}} {{color-example color="tertiary-medium"}}
@ -29,14 +29,14 @@
</section> </section>
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="$quaternary"}} {{#styleguide-example title="quaternary"}}
<section class="color-row"> <section class="color-row">
{{color-example color="quaternary-low"}} {{color-example color="quaternary-low"}}
{{color-example color="quaternary"}} {{color-example color="quaternary"}}
</section> </section>
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="$highlight"}} {{#styleguide-example title="highlight"}}
<section class="color-row"> <section class="color-row">
{{color-example color="highlight-low"}} {{color-example color="highlight-low"}}
{{color-example color="highlight-medium"}} {{color-example color="highlight-medium"}}
@ -45,7 +45,7 @@
</section> </section>
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="$danger"}} {{#styleguide-example title="danger"}}
<section class="color-row"> <section class="color-row">
{{color-example color="danger-low"}} {{color-example color="danger-low"}}
{{color-example color="danger-low-mid"}} {{color-example color="danger-low-mid"}}
@ -54,7 +54,7 @@
</section> </section>
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="$success"}} {{#styleguide-example title="success"}}
<section class="color-row"> <section class="color-row">
{{color-example color="success-low"}} {{color-example color="success-low"}}
{{color-example color="success-medium"}} {{color-example color="success-medium"}}
@ -62,14 +62,14 @@
</section> </section>
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="$love"}} {{#styleguide-example title="love"}}
<section class="color-row"> <section class="color-row">
{{color-example color="love-low"}} {{color-example color="love-low"}}
{{color-example color="love"}} {{color-example color="love"}}
</section> </section>
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="$header"}} {{#styleguide-example title="header"}}
<section class="color-row"> <section class="color-row">
{{color-example color="header_background"}} {{color-example color="header_background"}}
</section> </section>

75
plugins/styleguide/assets/stylesheets/colors.scss
View File

@ -1,120 +1,117 @@
.color-row { .color-row {
.primary-very-low { .primary-very-low {
background-color: var(--primary-very-low, $primary-very-low); background-color: var(--primary-very-low);
} }
.primary-low { .primary-low {
background-color: var(--primary-low, $primary-low); background-color: var(--primary-low);
} }
.primary-low-mid { .primary-low-mid {
background-color: var(--primary-low-mid, $primary-low-mid); background-color: var(--primary-low-mid);
} }
.primary-medium { .primary-medium {
background-color: var(--primary-medium, $primary-medium); background-color: var(--primary-medium);
} }
.primary-high { .primary-high {
background-color: var(--primary-high, $primary-high); background-color: var(--primary-high);
} }
.primary { .primary {
background-color: var(--primary, $primary); background-color: var(--primary);
} }
.secondary-low { .secondary-low {
background-color: var(--secondary-low, $secondary-low); background-color: var(--secondary-low);
} }
.secondary-medium { .secondary-medium {
background-color: var(--secondary-medium, $secondary-medium); background-color: var(--secondary-medium);
} }
.secondary-high { .secondary-high {
background-color: var(--secondary-high, $secondary-high); background-color: var(--secondary-high);
} }
.secondary { .secondary {
background-color: var(--secondary, $secondary); background-color: var(--secondary);
} }
.tertiary-low { .tertiary-low {
background-color: var(--tertiary-low, $tertiary-low); background-color: var(--tertiary-low);
} }
.tertiary-medium { .tertiary-medium {
background-color: var(--tertiary-medium, $tertiary-medium); background-color: var(--tertiary-medium);
} }
.tertiary-high { .tertiary-high {
background-color: var(--tertiary-high, $tertiary-high); background-color: var(--tertiary-high);
} }
.tertiary { .tertiary {
background-color: var(--tertiary, $tertiary); background-color: var(--tertiary);
} }
.quaternary-low { .quaternary-low {
background-color: var(--quaternary-low, $quaternary-low); background-color: var(--quaternary-low);
} }
.quaternary { .quaternary {
background-color: var(--quaternary, $quaternary); background-color: var(--quaternary);
} }
.highlight-low { .highlight-low {
background-color: var(--highlight-low, $highlight-low); background-color: var(--highlight-low);
} }
.highlight-medium { .highlight-medium {
background-color: var(--highlight-medium, $highlight-medium); background-color: var(--highlight-medium);
} }
.highlight-high { .highlight-high {
background-color: var(--highlight-high, $highlight-high); background-color: var(--highlight-high);
} }
.highlight { .highlight {
background-color: var(--highlight, $highlight); background-color: var(--highlight);
} }
.danger-low { .danger-low {
background-color: var(--danger-low, $danger-low); background-color: var(--danger-low);
} }
.danger-low-mid { .danger-low-mid {
background-color: var(--danger-low-mid, $danger-low-mid); background-color: var(--danger-low-mid);
} }
.danger-medium { .danger-medium {
background-color: var(--danger-medium, $danger-medium); background-color: var(--danger-medium);
} }
.danger { .danger {
background-color: var(--danger, $danger); background-color: var(--danger);
} }
.success-low { .success-low {
background-color: var(--success-low, $success-low); background-color: var(--success-low);
} }
.success-medium { .success-medium {
background-color: var(--success-medium, $success-medium); background-color: var(--success-medium);
} }
.success { .success {
background-color: var(--success, $success); background-color: var(--success);
} }
.love-low { .love-low {
background-color: var(--love-low, $love-low); background-color: var(--love-low);
} }
.love { .love {
background-color: var(--love, $love); background-color: var(--love);
} }
.header_primary { .header_primary {
background-color: var(--header_primary, $header_primary); background-color: var(--header_primary);
} }
.header_background { .header_background {
background-color: var(--header_background, $header_background); background-color: var(--header_background);
} }
.header_primary-low { .header_primary-low {
background-color: var(--header_primary-low, $header_primary-low); background-color: var(--header_primary-low);
} }
.header_primary-low-mid { .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 { .header_primary-medium {
background-color: var(--header_primary-medium, $header_primary-medium); background-color: var(--header_primary-medium);
} }
.header_primary-high { .header_primary-high {
background-color: var(--header_primary-high, $header_primary-high); background-color: var(--header_primary-high);
} }
.header_primary-very-high { .header_primary-very-high {
background-color: var( background-color: var(--header_primary-very-high);
--header_primary-very-high,
$header_primary-very-high
);
} }
} }

24
plugins/styleguide/assets/stylesheets/styleguide.scss
View File

@ -6,7 +6,7 @@
.styleguide-note { .styleguide-note {
padding: 1em; padding: 1em;
background-color: var(--tertiary, $tertiary); background-color: var(--tertiary);
margin-bottom: 1em; margin-bottom: 1em;
} }
@ -20,7 +20,7 @@
margin-left: 0; margin-left: 0;
li.styleguide-heading { li.styleguide-heading {
color: var(--primary-medium, $primary-medium); color: var(--primary-medium);
text-transform: uppercase; text-transform: uppercase;
font-size: 14px; font-size: 14px;
} }
@ -29,7 +29,7 @@
margin-bottom: 0.25em; margin-bottom: 0.25em;
a { a {
color: var(--primary, $primary); color: var(--primary);
font-size: 14px; font-size: 14px;
} }
@ -47,7 +47,7 @@
.styleguide-section { .styleguide-section {
.section-title { .section-title {
font-size: $font-up-5; font-size: var(--font-up-5);
font-weight: normal; font-weight: normal;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
@ -66,9 +66,9 @@
.styleguide-example { .styleguide-example {
.example-title { .example-title {
color: var(--primary-medium, $primary-medium); color: var(--primary-medium);
font-size: $font-0; font-size: var(--font-0);
border-bottom: 1px solid var(--primary-low, $primary-low); border-bottom: 1px solid var(--primary-low);
margin-bottom: 1em; margin-bottom: 1em;
} }
@ -105,7 +105,7 @@
} }
pre { pre {
background: var(--primary-very-low, $primary-very-low); background: var(--primary-very-low);
white-space: pre-wrap; white-space: pre-wrap;
&.pre-inline { &.pre-inline {
display: inline-block; display: inline-block;
@ -113,7 +113,7 @@
vertical-align: bottom; vertical-align: bottom;
} }
span { span {
color: var(--primary-medium, $primary-medium); color: var(--primary-medium);
&.hljs-attribute { &.hljs-attribute {
color: teal; color: teal;
} }
@ -122,7 +122,7 @@
p.reason { p.reason {
display: inline; display: inline;
color: var(--primary-medium, $primary-medium); color: var(--primary-medium);
margin: 0 0 0 10px; margin: 0 0 0 10px;
} }
} }
@ -152,7 +152,7 @@
grid-gap: 10px; grid-gap: 10px;
.styleguide-icon { .styleguide-icon {
background-color: var(--primary-low, $primary-low); background-color: var(--primary-low);
margin: 3px; margin: 3px;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
@ -163,7 +163,7 @@
margin: 5px auto; margin: 5px auto;
} }
span { span {
font-size: $font-down-1; font-size: var(--font-down-1);
} }
} }
} }

26
plugins/styleguide/assets/stylesheets/typography.scss
View File

@ -3,41 +3,41 @@ p[class*="font-"] {
} }
.font-up-6 { .font-up-6 {
font-size: $font-up-6; font-size: var(--font-up-6);
} }
.font-up-5 { .font-up-5 {
font-size: $font-up-5; font-size: var(--font-up-5);
} }
.font-up-4 { .font-up-4 {
font-size: $font-up-4; font-size: var(--font-up-4);
} }
.font-up-3 { .font-up-3 {
font-size: $font-up-3; font-size: var(--font-up-3);
} }
.font-up-2 { .font-up-2 {
font-size: $font-up-2; font-size: var(--font-up-2);
} }
.font-up-1 { .font-up-1 {
font-size: $font-up-1; font-size: var(--font-up-1);
} }
.font-0 { .font-0 {
font-size: $font-0; font-size: var(--font-0);
} }
.font-down-1 { .font-down-1 {
font-size: $font-down-1; font-size: var(--font-down-1);
} }
.font-down-2 { .font-down-2 {
font-size: $font-down-2; font-size: var(--font-down-2);
} }
.font-down-3 { .font-down-3 {
font-size: $font-down-3; font-size: var(--font-down-3);
} }
.font-down-4 { .font-down-4 {
font-size: $font-down-4; font-size: var(--font-down-4);
} }
.font-down-5 { .font-down-5 {
font-size: $font-down-5; font-size: var(--font-down-5);
} }
.font-down-6 { .font-down-6 {
font-size: $font-down-6; font-size: var(--font-down-6);
} }