From 860e97539f66afc56148c35c7e9e976217309621 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 30 Apr 2020 11:27:44 -0400 Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20color=20style=20g?= =?UTF-8?q?uide=20to=20storybook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../addon/styles/rose/components/_button.scss | 3 +- .../addon/styles/rose/variables/_opacity.scss | 2 + .../styles/rose/variables/color/_css.scss | 6 - .../styles/rose/variables/color/_sass.scss | 34 +++ addons/rose/stories/style-guide.stories.js | 269 ++++++++++++++++++ 5 files changed, 306 insertions(+), 8 deletions(-) create mode 100644 addons/rose/stories/style-guide.stories.js diff --git a/addons/rose/addon/styles/rose/components/_button.scss b/addons/rose/addon/styles/rose/components/_button.scss index c94a3ec03..472e02563 100644 --- a/addons/rose/addon/styles/rose/components/_button.scss +++ b/addons/rose/addon/styles/rose/components/_button.scss @@ -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); } - } diff --git a/addons/rose/addon/styles/rose/variables/_opacity.scss b/addons/rose/addon/styles/rose/variables/_opacity.scss index a52a096e2..b09027ff5 100644 --- a/addons/rose/addon/styles/rose/variables/_opacity.scss +++ b/addons/rose/addon/styles/rose/variables/_opacity.scss @@ -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; diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss index efd549ed6..765b71ac7 100644 --- a/addons/rose/addon/styles/rose/variables/color/_css.scss +++ b/addons/rose/addon/styles/rose/variables/color/_css.scss @@ -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); diff --git a/addons/rose/addon/styles/rose/variables/color/_sass.scss b/addons/rose/addon/styles/rose/variables/color/_sass.scss index 1b11456b1..7be70fcfc 100644 --- a/addons/rose/addon/styles/rose/variables/color/_sass.scss +++ b/addons/rose/addon/styles/rose/variables/color/_sass.scss @@ -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; diff --git a/addons/rose/stories/style-guide.stories.js b/addons/rose/stories/style-guide.stories.js new file mode 100644 index 000000000..bfab579a8 --- /dev/null +++ b/addons/rose/stories/style-guide.stories.js @@ -0,0 +1,269 @@ +import { hbs } from 'ember-cli-htmlbars'; + +export default { + title: 'Style Guide', +}; + +export const Colors = () => ({ + template: hbs` + + +
+

Colors

+

+ 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. +

+
+ +
+
+

Relative Poles

+

+ These colors depend on light or dark mode. Use these most often + when specifying primary foreground and backround colors. +

+
    +
  • +
    +
    + var(--subtle) +
    +
    • + +
  • +
    +
    + var(--stark) +
    +
    • +
+
+
+

Absolute Colors

+

+ Colors sometimes don't change in dark mode. Use these + values sparingly. +

+
    +
  • +
    +
    + var(--white) +
    +
    • + +
  • +
    +
    + var(--black) +
    +
    • +
+
+
+ +
+

Theme Colors

+

Info

+ +
+
+
+

Alert

+
    + {{#each colors.alert as |color|}} +
  • +
    +
    + var(--{{color}}) +
    +
    • + {{/each}} +
+
+
+

Warning

+
    + {{#each colors.warning as |color|}} +
  • +
    +
    + var(--{{color}}) +
    +
    • + {{/each}} +
+
+
+
+
+

Failure

+
    + {{#each colors.failure as |color|}} +
  • +
    +
    + var(--{{color}}) +
    +
    • + {{/each}} +
+
+
+

Success

+
    + {{#each colors.success as |color|}} +
  • +
    +
    + var(--{{color}}) +
    +
    • + {{/each}} +
+
+
+
+

UI Border

+ +

UI Gray

+ +
+ `, + 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', + ], + }, + }, +});