github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-28 01:56:58 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Styleguide changes & color variable additions (#15984)

Browse Source
This commit is contained in:
Jordan Vidrine
2022-02-17 14:39:29 -06:00
committed by GitHub
parent 45c404a6c7
commit c92e62a271
8 changed files with 195 additions and 28 deletions
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-name">var(--{{color}})</div>
<div class="color-name">{{color}}</div>

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

@ -1,3 +1,8 @@
<div class="example-title">{{title}}</div>
<div class="example-title">
<h3 class="example-title-text">{{title}}</h3>
<span class="example-title-use-case">
Example:
</span>
<span class="example-title-use-case">var(--{{title}})</span>
</div>
<section class="rendered">{{yield this.value}}</section>
<div class="clearfix"></div>

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

@ -11,6 +11,24 @@
</section>
{{/styleguide-example}}
{{#styleguide-example title="primary-100"}}
<section class="color-row">
{{color-example color="primary-50"}}
{{color-example color="primary-100"}}
{{color-example color="primary-200"}}
{{color-example color="primary-300"}}
{{color-example color="primary-400"}}
{{color-example color="primary-500"}}
</section>
<section class="color-row">
{{color-example color="primary-600"}}
{{color-example color="primary-700"}}
{{color-example color="primary-800"}}
{{color-example color="primary-900"}}
{{color-example color="primary"}}
</section>
{{/styleguide-example}}
{{#styleguide-example title="secondary"}}
<section class="color-row">
{{color-example color="secondary-low"}}
@ -29,6 +47,24 @@
</section>
{{/styleguide-example}}
{{#styleguide-example title="tertiary-100"}}
<section class="color-row">
{{color-example color="tertiary-50"}}
{{color-example color="tertiary-100"}}
{{color-example color="tertiary-200"}}
{{color-example color="tertiary-300"}}
{{color-example color="tertiary-400"}}
{{color-example color="tertiary-500"}}
</section>
<section class="color-row">
{{color-example color="tertiary-600"}}
{{color-example color="tertiary-700"}}
{{color-example color="tertiary-800"}}
{{color-example color="tertiary-900"}}
{{color-example color="tertiary"}}
</section>
{{/styleguide-example}}
{{#styleguide-example title="quaternary"}}
<section class="color-row">
{{color-example color="quaternary-low"}}
@ -69,7 +105,7 @@
</section>
{{/styleguide-example}}
{{#styleguide-example title="header"}}
{{#styleguide-example title="header_primary"}}
<section class="color-row">
{{color-example color="header_background"}}
</section>

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

@ -1,4 +1,34 @@
.color-row {
.primary-50 {
background-color: var(--primary-50);
}
.primary-100 {
background-color: var(--primary-100);
}
.primary-200 {
background-color: var(--primary-200);
}
.primary-300 {
background-color: var(--primary-300);
}
.primary-400 {
background-color: var(--primary-400);
}
.primary-500 {
background-color: var(--primary-500);
}
.primary-600 {
background-color: var(--primary-600);
}
.primary-700 {
background-color: var(--primary-700);
}
.primary-800 {
background-color: var(--primary-800);
}
.primary-900 {
background-color: var(--primary-900);
}
.primary-very-low {
background-color: var(--primary-very-low);
}
@ -41,6 +71,36 @@
.tertiary {
background-color: var(--tertiary);
}
.tertiary-50 {
background-color: var(--tertiary-50);
}
.tertiary-100 {
background-color: var(--tertiary-100);
}
.tertiary-200 {
background-color: var(--tertiary-200);
}
.tertiary-300 {
background-color: var(--tertiary-300);
}
.tertiary-400 {
background-color: var(--tertiary-400);
}
.tertiary-500 {
background-color: var(--tertiary-500);
}
.tertiary-600 {
background-color: var(--tertiary-600);
}
.tertiary-700 {
background-color: var(--tertiary-700);
}
.tertiary-800 {
background-color: var(--tertiary-800);
}
.tertiary-900 {
background-color: var(--tertiary-900);
}
.quaternary-low {
background-color: var(--quaternary-low);
}

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

@ -77,28 +77,48 @@
margin-bottom: 2em;
}
}
.color-row {
display: flex;
.color-example {
flex: 1;
display: flex;
flex-direction: column;
height: 120px;
margin: 0.5em 0.5em 0.5em 0;
.color-bg {
flex: 4;
}
.color-name {
flex: 1;
&.colors-examples {
.styleguide-example {
display: flex;
align-items: center;
padding: 0.25em 0.5em;
background-color: black;
color: white;
.example-title {
min-width: 15%;
margin-right: 1em;
border-bottom: none;
&-text {
color: var(--primary);
text-transform: capitalize;
}
&-use-case {
font-size: var(--font-down-1);
display: block;
}
}
.color-row {
display: flex;
.color-example {
flex: 1;
display: flex;
flex-direction: column;
height: 120px;
margin: 0.5em 0.5em 0.5em 0;
border: 1px solid var(--primary-300);
.color-bg {
flex: 4;
border-bottom: 1px solid var(--primary-300);
}
.color-name {
flex: 1;
display: flex;
align-items: center;
padding: 0.25em 0.5em;
font-weight: 700;
font-size: var(--font-down-1);
}
}
}
}
}
}