Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Jordan Vidrine 2022-02-17 14:39:29 -06:00 committed by GitHub
parent 45c404a6c7
commit c92e62a271
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 195 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/stylesheets/color_definitions.scss
View File

@ -29,6 +29,17 @@
--primary-high: #{$primary-high};
--primary-very-high: #{$primary-very-high};
--primary-50: #{$primary-50};
--primary-100: #{$primary-100};
--primary-200: #{$primary-200};
--primary-300: #{$primary-300};
--primary-400: #{$primary-400};
--primary-500: #{$primary-500};
--primary-600: #{$primary-600};
--primary-700: #{$primary-700};
--primary-800: #{$primary-800};
--primary-900: #{$primary-900};
--header_primary-low: #{$header_primary-low};
--header_primary-low-mid: #{$header_primary-low-mid};
@ -47,6 +58,17 @@
--tertiary-high: #{$tertiary-high};
--tertiary-hover: #{$tertiary-hover};
--tertiary-50: #{$tertiary-50};
--tertiary-100: #{$tertiary-100};
--tertiary-200: #{$tertiary-200};
--tertiary-300: #{$tertiary-300};
--tertiary-400: #{$tertiary-400};
--tertiary-500: #{$tertiary-500};
--tertiary-600: #{$tertiary-600};
--tertiary-700: #{$tertiary-700};
--tertiary-800: #{$tertiary-800};
--tertiary-900: #{$tertiary-900};
--quaternary-low: #{$quaternary-low};
--highlight-low: #{$highlight-low};

26
app/assets/stylesheets/common/foundation/color_transformations.scss
View File

@ -10,6 +10,18 @@ $primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;
//primary-numbers
$primary-50: blend-two-colors($primary, $secondary, 5%) !default;
$primary-100: blend-two-colors($primary, $secondary, 10%) !default;
$primary-200: blend-two-colors($primary, $secondary, 20%) !default;
$primary-300: blend-two-colors($primary, $secondary, 30%) !default;
$primary-400: blend-two-colors($primary, $secondary, 40%) !default;
$primary-500: blend-two-colors($primary, $secondary, 50%) !default;
$primary-600: blend-two-colors($primary, $secondary, 60%) !default;
$primary-700: blend-two-colors($primary, $secondary, 70%) !default;
$primary-800: blend-two-colors($primary, $secondary, 80%) !default;
$primary-900: blend-two-colors($primary, $secondary, 90%) !default;
$header_primary-low: blend-header-primary-background(10%) !default;
$header_primary-low-mid: blend-header-primary-background(35%) !default;
$header_primary-medium: blend-header-primary-background(55%) !default;
@ -32,6 +44,18 @@ $tertiary-hover: dark-light-choose(
dark-light-diff($tertiary, $primary, 20%, 70%)
) !default;
//tertiary-numbers
$tertiary-50: dark-light-diff($tertiary, $secondary, 95%, -80%) !default;
$tertiary-100: dark-light-diff($tertiary, $secondary, 90%, -75%) !default;
$tertiary-200: dark-light-diff($tertiary, $secondary, 80%, -65%) !default;
$tertiary-300: dark-light-diff($tertiary, $secondary, 70%, -55%) !default;
$tertiary-400: dark-light-diff($tertiary, $secondary, 60%, -45%) !default;
$tertiary-500: dark-light-diff($tertiary, $secondary, 50%, -35%) !default;
$tertiary-600: dark-light-diff($tertiary, $secondary, 40%, -25%) !default;
$tertiary-700: dark-light-diff($tertiary, $secondary, 30%, -15%) !default;
$tertiary-800: dark-light-diff($tertiary, $secondary, 20%, -5%) !default;
$tertiary-900: dark-light-diff($tertiary, $secondary, 10%, 0%) !default;
//quaternary
$quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%) !default;
@ -63,7 +87,7 @@ $love-low: dark-light-diff($love, $secondary, 85%, -60%) !default;
$wiki: green !default;
//blended variants
$blend-primary-secondary-5: blend-primary-secondary(5%) !default;
$blend-primary-secondary-5: blend-two-colors($primary, $secondary, 5%) !default;
$primary-med-or-secondary-med: dark-light-choose(
$primary-medium,

6
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -177,9 +177,9 @@ $box-shadow: (
@return rgb($r_r, $r_g, $r_b);
}
// Replaces dark-light-diff($primary, $secondary, 50%, -50%)
@function blend-primary-secondary($percent) {
@return srgb-scale($primary, $secondary, $percent);
// Replaces dark-light-diff($primary,50%)
@function blend-two-colors($color1, $color2, $percent) {
@return srgb-scale($color1, $color2, $percent);
}
@function blend-header-primary-background($percent) {

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);
}
}
}
}
}
}