Discourse/discourse
Discourse/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-09-06 10:50:21 +08:00
Code Packages Activity Actions 9

DEV: Add header colors to styleguide (#11421)

Browse source
This commit is contained in:
Penar Musaraj 2020-12-07 14:50:45 -05:00 • committed by GitHub
parent dd9ec827e5
commit 28feb7c2ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
View file

@ -68,3 +68,19 @@
{{color-example color="love"}} {{color-example color="love"}}
</section> </section>
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="$header"}}
<section class="color-row">
{{color-example color="header_background"}}
</section>
<section class="color-row">
{{color-example color="header_primary"}}
{{color-example color="header_primary-very-high"}}
{{color-example color="header_primary-high"}}
</section>
<section class="color-row">
{{color-example color="header_primary-medium"}}
{{color-example color="header_primary-low-mid"}}
{{color-example color="header_primary-low"}}
</section>
{{/styleguide-example}}

31
plugins/styleguide/assets/stylesheets/colors.scss
View file

@ -86,4 +86,35 @@
.love { .love {
background-color: var(--love, $love); background-color: var(--love, $love);
} }
.header_primary {
background-color: var(--header_primary, $header_primary);
}
.header_background {
background-color: var(--header_background, $header_background);
}
.header_primary-low {
background-color: var(--header_primary-low, $header_primary-low);
}
.header_primary-low-mid {
background-color: var(--header_primary-low-mid, $header_primary-low-mid);
}
.header_primary-medium {
background-color: var(--header_primary-medium, $header_primary-medium);
}
.header_primary-high {
background-color: var(--header_primary-high, $header_primary-high);
}
.header_primary-very-high {
background-color: var(
--header_primary-very-high,
$header_primary-very-high
);
}
} }