CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 🤖 add color style guide to storybook

Browse Source
This commit is contained in:
Randall Morey committed 2020-04-30 11:27:44 -04:00
1 parent a3a3ccb34d
commit 860e97539f
5 files changed
+306 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/styles/rose/components/_button.scss
+1 -2
View File
@@ -95,7 +95,7 @@
(
color: var(--info),
border-color: transparent,
background-color: var(--subtle)
background-color: var(--subtle),
),
(
background-color: var(--ui-gray-subtler-5),
@@ -132,5 +132,4 @@
cursor: not-allowed;
opacity: var(--opacity-1);
}
}
addons/rose/addon/styles/rose/variables/_opacity.scss
+2
View File
@@ -5,6 +5,7 @@
// Light Mode
:root {
--opacity-5: 0.025;
--opacity-4: 0.05;
--opacity-3: 0.1;
--opacity-2: 0.25;
@@ -16,6 +17,7 @@
// light mode.
@media (prefers-color-scheme: dark) {
:root {
--opacity-5: 0.025;
--opacity-4: 0.025;
--opacity-3: 0.05;
--opacity-2: 0.125;
addons/rose/addon/styles/rose/variables/color/_css.scss
-6
View File
@@ -79,12 +79,6 @@
// Dark Mode
@media (prefers-color-scheme: dark) {
:root {
// opacities
--opacity-4: 0.025;
--opacity-3: 0.05;
--opacity-2: 0.15;
--opacity-1: 0.35;
// poles
--subtle: #{color(ui-cool-gray, 800)};
--stark: var(--white);
addons/rose/addon/styles/rose/variables/color/_sass.scss
+34
View File
@@ -43,30 +43,60 @@ $color-values: (
900: #1f2124,
),
ui-cool-gray: (
010: #fdfdfe,
050: #f7fafc,
100: #ebeef5,
200: #d3dbe5,
300: #b4bdcc,
400: #949fb0,
500: map.get($colors, ui-cool-gray),
600: #5a6370,
700: #3c434d,
800: #1d2126,
900: #060708,
),
green: (
010: #fafdfa,
050: #ecf7ed,
100: #c6e9c9,
200: #a0dba5,
300: #7acc81,
400: #54be5d,
500: map.get($colors, green),
600: #26912f,
700: #1e7125,
800: #15501a,
900: #0d3010,
),
yellow: (
010: #fffdf6,
050: #fffbed,
100: #fdeeba,
200: #fce48c,
300: #fbd95e,
400: #face30,
500: map.get($colors, yellow),
600: #cda102,
700: #a07d02,
800: #725a01,
900: #453601,
),
orange: (
010: #fffcfa,
050: #fef4ec,
100: #fde0c8,
200: #fccca4,
300: #fbb77f,
400: #faa35b,
500: map.get($colors, orange),
600: #cd762e,
700: #a05c23,
800: #724119,
900: #45270f,
),
blue: (
010: #fbfcff,
050: #f0f5ff,
100: #bfd4ff,
200: #8ab1ff,
300: #5b92ff,
@@ -79,12 +109,16 @@ $color-values: (
),
red: (
010: #fdfafb,
050: #f9ecee,
100: #efc7cc,
200: #e5a2aa,
300: #db7d88,
400: #d15866,
500: map.get($colors, red),
600: #a32b39,
700: #7f222c,
800: #5b1820,
900: #370f13,
),
) !default;
addons/rose/stories/style-guide.stories.js
+269
View File
@@ -0,0 +1,269 @@
import { hbs } from 'ember-cli-htmlbars';
export default {
title: 'Style Guide',
};
export const Colors = () => ({
template: hbs`
<style type="text/css">
body {
padding: 2rem;
font-family: sans-serif;
line-height: 1.5rem;
color: var(--stark);
background-color: var(--subtle);
}
h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
h2 {
font-size: 1.5rem;
margin: 1rem 0;
}
h3 {
font-size: 0.85rem;
margin: 0.5rem 0;
}
p {
max-width: 725px;
margin-bottom: 2rem;
}
code {
display: block;
font-size: 0.55rem;
font-family: "Andale Mono", monospace;
max-width: 100%;
overflow-x: scroll;
color: var(--ui-gray);
}
.side-by-side {
display: flex;
}
section {
padding-right: 2rem;
}
.swatches {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.swatch {
width: 6rem;
//border: 1px solid var(--ui-gray-subtler-4);
border-radius: 4px;
margin: 0 0.5rem 0.5rem 0;
box-shadow: 0px 3px 6px rgba(var(--stark-components), var(--opacity-3));
}
.swatch-chip {
height: 5rem;
border: 0.5rem solid var(--subtle);
border-radius: 4px;
}
.swatch-detail {
border-top: 1px solid var(--ui-gray-subtler-4);
padding: 0.5rem;
}
</style>
<section>
<h1>Colors</h1>
<p>
Find the color you need and copy the CSS custom property variable into
your stylesheet.
Use only these variables when specifying colors. This ensures
consistency and dark mode compatibility.
</p>
</section>
<div class="side-by-side">
<section>
<h2>Relative Poles</h2>
<p>
These colors depend on light or dark mode. Use these most often
when specifying primary foreground and backround colors.
</p>
<ul class="swatches">
<li class="swatch">
<div class="swatch-chip" style="background-color: var(--subtle);"></div>
<div class="swatch-detail">
<code>var(--subtle)</code>
</div>
</li>
<li class="swatch">
<div class="swatch-chip" style="background-color: var(--stark);"></div>
<div class="swatch-detail">
<code>var(--stark)</code>
</div>
</li>
</ul>
</section>
<section>
<h2>Absolute Colors</h2>
<p>
Colors sometimes <strong>don't change in dark mode</strong>. Use these
values sparingly.
</p>
<ul class="swatches">
<li class="swatch">
<div class="swatch-chip" style="background-color: var(--white);"></div>
<div class="swatch-detail">
<code>var(--white)</code>
</div>
</li>
<li class="swatch">
<div class="swatch-chip" style="background-color: var(--black);"></div>
<div class="swatch-detail">
<code>var(--black)</code>
</div>
</li>
</ul>
</section>
</div>
<section>
<h2>Theme Colors</h2>
<h3>Info</h3>
<ul class="swatches">
{{#each colors.info as |color|}}
<li class="swatch">
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
<div class="swatch-detail">
<code>var(--{{color}})</code>
</div>
</li>
{{/each}}
</ul>
</section>
<div class="side-by-side">
<section>
<h3>Alert</h3>
<ul class="swatches">
{{#each colors.alert as |color|}}
<li class="swatch">
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
<div class="swatch-detail">
<code>var(--{{color}})</code>
</div>
</li>
{{/each}}
</ul>
</section>
<section>
<h3>Warning</h3>
<ul class="swatches">
{{#each colors.warning as |color|}}
<li class="swatch">
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
<div class="swatch-detail">
<code>var(--{{color}})</code>
</div>
</li>
{{/each}}
</ul>
</section>
</div>
<div class="side-by-side">
<section>
<h3>Failure</h3>
<ul class="swatches">
{{#each colors.failure as |color|}}
<li class="swatch">
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
<div class="swatch-detail">
<code>var(--{{color}})</code>
</div>
</li>
{{/each}}
</ul>
</section>
<section>
<h3>Success</h3>
<ul class="swatches">
{{#each colors.success as |color|}}
<li class="swatch">
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
<div class="swatch-detail">
<code>var(--{{color}})</code>
</div>
</li>
{{/each}}
</ul>
</section>
</div>
<section>
<h3>UI Border</h3>
<ul class="swatches">
{{#each colors.ui-border as |color|}}
<li class="swatch">
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
<div class="swatch-detail">
<code>var(--{{color}})</code>
</div>
</li>
{{/each}}
</ul>
<h3>UI Gray</h3>
<ul class="swatches">
{{#each colors.ui-gray as |color|}}
<li class="swatch">
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
<div class="swatch-detail">
<code>var(--{{color}})</code>
</div>
</li>
{{/each}}
</ul>
</section>
`,
context: {
colors: {
relative: ['subtle', 'stark'],
absolute: ['white', 'black'],
info: [
'info-subtler-3',
'info-subtler-2',
'info-subtler-1',
'info',
'info-starker-1',
'info-starker-2',
],
alert: ['alert-subtler-2', 'alert-subtler-1', 'alert', 'alert-starker-1'],
warning: [
'warning-subtler-2',
'warning-subtler-1',
'warning',
'warning-starker-1',
],
failure: [
'failure-subtler-2',
'failure-subtler-1',
'failure',
'failure-starker-1',
],
success: [
'success-subtler-2',
'success-subtler-1',
'success',
'success-starker-1',
],
'ui-border': ['ui-border-subtler-1', 'ui-border'],
'ui-gray': [
'ui-gray-subtler-6',
'ui-gray-subtler-5',
'ui-gray-subtler-4',
'ui-gray-subtler-3',
'ui-gray-subtler-2',
'ui-gray-subtler-1',
'ui-gray',
'ui-gray-starker-1',
'ui-gray-starker-2',
'ui-gray-starker-3',
'ui-gray-starker-4',
],
},
},
});