From 2ad5403045e44487eed82a8ad1172c47a2bffb59 Mon Sep 17 00:00:00 2001 From: ludwiczakpawel Date: Mon, 4 May 2020 14:42:11 +0200 Subject: [PATCH] Boxes coloring fix (#7656) * boxes fix * fix --- app/assets/stylesheets/base/boxes.scss | 26 ---- .../stylesheets/components/banners.scss | 1 - .../stylesheets/components/dropdowns.scss | 9 +- app/assets/stylesheets/components/modals.scss | 9 +- .../stylesheets/components/notices.scss | 43 ++++-- .../stylesheets/components/snackbars.scss | 11 +- app/assets/stylesheets/config/_colors.scss | 5 + app/assets/stylesheets/config/_import.scss | 37 ++--- app/assets/stylesheets/crayons.scss | 1 - app/assets/stylesheets/themes/hacker.scss | 5 + app/assets/stylesheets/themes/minimal.scss | 5 + app/assets/stylesheets/themes/night.scss | 5 + app/assets/stylesheets/themes/pink.scss | 7 +- .../__stories__/box.description.stories.jsx | 49 ------- .../Box/__stories__/box.html.stories.jsx | 132 ------------------ app/views/users/_account.html.erb | 2 +- 16 files changed, 95 insertions(+), 252 deletions(-) delete mode 100644 app/assets/stylesheets/base/boxes.scss delete mode 100644 app/javascript/crayons/Box/__stories__/box.description.stories.jsx delete mode 100644 app/javascript/crayons/Box/__stories__/box.html.stories.jsx diff --git a/app/assets/stylesheets/base/boxes.scss b/app/assets/stylesheets/base/boxes.scss deleted file mode 100644 index cfa4cb361..000000000 --- a/app/assets/stylesheets/base/boxes.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import '../config/import'; - -.crayons-box { - $this: &; // Caching current element, source: https://css-tricks.com/snippets/sass/caching-current-selector-sass/ - border: 2px solid; - border-radius: $br-default; - background-color: var(--card-bg); - - @include box($this, var(--box), var(--box-darker)); - - &--danger { - @include box($this, var(--accent-danger), var(--accent-danger-darker)); - } - - &--success { - @include box($this, var(--accent-success), var(--accent-success-darker)); - } - - &--warning { - @include box($this, var(--accent-warning), var(--accent-warning-darker)); - } - - &--info { - @include box($this, var(--accent-brand), var(--accent-brand-darker)); - } -} diff --git a/app/assets/stylesheets/components/banners.scss b/app/assets/stylesheets/components/banners.scss index 2e1d10edb..cb4f0ccd8 100644 --- a/app/assets/stylesheets/components/banners.scss +++ b/app/assets/stylesheets/components/banners.scss @@ -1,5 +1,4 @@ @import '../config/import'; -@import '../base/boxes'; .crayons-banner { padding: $su-4; diff --git a/app/assets/stylesheets/components/dropdowns.scss b/app/assets/stylesheets/components/dropdowns.scss index 8712a79cb..762b3cc73 100644 --- a/app/assets/stylesheets/components/dropdowns.scss +++ b/app/assets/stylesheets/components/dropdowns.scss @@ -1,9 +1,12 @@ @import '../config/import'; -@import '../base/boxes'; .crayons-dropdown { - @extend .crayons-box; - @extend .crayons-box--level-2; + @include generate-box( + $level: 2, + $bg: var(--card-bg), + $border: var(--card-color), + $color: var(--card-color) + ); position: absolute; display: none; // initially hidden padding: $su-4; diff --git a/app/assets/stylesheets/components/modals.scss b/app/assets/stylesheets/components/modals.scss index 11cfaec3c..4df6c5b03 100644 --- a/app/assets/stylesheets/components/modals.scss +++ b/app/assets/stylesheets/components/modals.scss @@ -1,15 +1,18 @@ @import '../config/import'; -@import '../base/boxes'; %modal-style { - @extend .crayons-box; - @extend .crayons-box--level-3; display: inline-block; width: 100%; } .crayons-modal { @extend %modal-style; + @include generate-box( + $level: 3, + $bg: var(--card-bg), + $border: var(--card-color), + $color: var(--card-color) + ); padding: $su-7; max-width: 640px; diff --git a/app/assets/stylesheets/components/notices.scss b/app/assets/stylesheets/components/notices.scss index c6981ac8e..ee8325f33 100644 --- a/app/assets/stylesheets/components/notices.scss +++ b/app/assets/stylesheets/components/notices.scss @@ -1,28 +1,47 @@ @import '../config/import'; -@import '../base/boxes'; - -%notice-style { - @extend .crayons-box; - @extend .crayons-box--level-1; - padding: $su-4; -} .crayons-notice { - @extend %notice-style; + padding: $su-4; + @include generate-box( + $level: 1, + $bg: var(--card-bg), + $border: var(--card-color), + $color: var(--card-color) + ); &--danger { - @extend .crayons-box--danger; + @include generate-box( + $level: 1, + $bg: var(--card-bg), + $border: var(--accent-danger), + $color: var(--card-color) + ); } &--warning { - @extend .crayons-box--warning; + @include generate-box( + $level: 1, + $bg: var(--card-bg), + $border: var(--accent-warning), + $color: var(--card-color) + ); } &--success { - @extend .crayons-box--success; + @include generate-box( + $level: 1, + $bg: var(--card-bg), + $border: var(--accent-success), + $color: var(--card-color) + ); } &--info { - @extend .crayons-box--info; + @include generate-box( + $level: 1, + $bg: var(--card-bg), + $border: var(--accent-brand), + $color: var(--card-color) + ); } } diff --git a/app/assets/stylesheets/components/snackbars.scss b/app/assets/stylesheets/components/snackbars.scss index 6f417c415..5098702db 100644 --- a/app/assets/stylesheets/components/snackbars.scss +++ b/app/assets/stylesheets/components/snackbars.scss @@ -1,5 +1,4 @@ @import '../config/import'; -@import '../base/boxes'; .crayons-snackbar { position: fixed; @@ -20,10 +19,12 @@ } &__item { - @extend .crayons-box; - @extend .crayons-box--filled; - @extend .crayons-box--level-1; - color: var(--body-color-inverted); + @include generate-box( + $level: 1, + $bg: var(--snackbar-bg), + $border: var(--snackbar-border), + $color: var(--snackbar-color) + ); display: none; align-items: center; justify-content: space-between; diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss index 434d54ab1..f31261b61 100644 --- a/app/assets/stylesheets/config/_colors.scss +++ b/app/assets/stylesheets/config/_colors.scss @@ -160,6 +160,11 @@ --box: var(--base-90); --box-darker: var(--base-100); + // Snackbars + --snackbar-bg: var(--base-90); + --snackbar-border: var(--base-100); + --snackbar-color: var(--body-color-inverted); + // Indicators --indicator-accent-bg: var(--accent-brand); --indicator-accent-color: var(--body-color-inverted); diff --git a/app/assets/stylesheets/config/_import.scss b/app/assets/stylesheets/config/_import.scss index e74312002..a8f2aa07e 100644 --- a/app/assets/stylesheets/config/_import.scss +++ b/app/assets/stylesheets/config/_import.scss @@ -292,26 +292,27 @@ $lh-base: 1.5; // 24px for 16px font-size //////////////////////////////////////////////////////////////////////////////////// -// box() - generating classes for different style +// generate-box() - generating classes for different style // -// This mixin automates process of generating classes for different -// types of boxes: filled & outlined, each with variations -// for several levels of elevation (box-shadow). +// This mixin automates process of generating styles for different +// types of boxes used across Crayons. // -// @param {object} $this Caching current parent -// @param {color} $color-1 Background color for filled variation -// @param {color} $color-2 Accent color for border & shadow +// @param {integer} $level Visual elevation level: 0-4 +// @param {color} $bg Background color +// @param {color} $border Border and shadow colors +// @param {color} $color Contnet color -@mixin box($this: $this, $color-1: var(--box), $color-2: var(--box-darker)) { - border-color: $color-2; - - &#{$this}--filled { - background-color: $color-1; - } - - @for $i from 1 through 3 { - &#{$this + '--level-' + $i} { - box-shadow: #{pow(2, $i) + px} #{pow(2, $i) + px} 0 $color-2; - } +@mixin generate-box( + $level: 1, + $bg: var(--card-bg), + $border: var(--base-100), + $color: var(--card-color) +) { + background: $bg; + border: 2px solid $border; + @if $level > 0 { + box-shadow: #{pow(2, $level) + px} #{pow(2, $level) + px} 0 $border; } + color: $color; + border-radius: $br-default; } diff --git a/app/assets/stylesheets/crayons.scss b/app/assets/stylesheets/crayons.scss index e6d7be58d..9ebcb2300 100644 --- a/app/assets/stylesheets/crayons.scss +++ b/app/assets/stylesheets/crayons.scss @@ -2,7 +2,6 @@ @import 'config/generator'; @import 'base/reset'; -@import 'base/boxes'; @import 'base/icons'; @import 'base/layout'; diff --git a/app/assets/stylesheets/themes/hacker.scss b/app/assets/stylesheets/themes/hacker.scss index a5586833a..c6f2675e1 100644 --- a/app/assets/stylesheets/themes/hacker.scss +++ b/app/assets/stylesheets/themes/hacker.scss @@ -150,6 +150,11 @@ --box: var(--base-90); --box-darker: var(--base-100); + // Snackbars + --snackbar-bg: var(--base-10); + --snackbar-border: var(--accent-brand); + --snackbar-color: var(--accent-brand); + // Indicators --indicator-accent-bg: var(--accent-brand); --indicator-accent-color: var(--body-color-inverted); diff --git a/app/assets/stylesheets/themes/minimal.scss b/app/assets/stylesheets/themes/minimal.scss index d833de7dc..cf03ebc0a 100644 --- a/app/assets/stylesheets/themes/minimal.scss +++ b/app/assets/stylesheets/themes/minimal.scss @@ -148,6 +148,11 @@ --box: var(--base-90); --box-darker: var(--base-100); + // Snackbars + --snackbar-bg: var(--base-90); + --snackbar-border: var(--base-100); + --snackbar-color: var(--body-color-inverted); + // Indicators --indicator-accent-bg: var(--accent-brand); --indicator-accent-color: var(--body-color-inverted); diff --git a/app/assets/stylesheets/themes/night.scss b/app/assets/stylesheets/themes/night.scss index ceaf9b263..ece8b1f04 100644 --- a/app/assets/stylesheets/themes/night.scss +++ b/app/assets/stylesheets/themes/night.scss @@ -150,6 +150,11 @@ --box: var(--base-0); --box-darker: var(--base-inverted); + // Snackbars + --snackbar-bg: var(--base-10); + --snackbar-border: var(--base-20); + --snackbar-color: var(--card-color); + // Indicators --indicator-accent-bg: var(--accent-brand); --indicator-accent-color: var(--body-color); diff --git a/app/assets/stylesheets/themes/pink.scss b/app/assets/stylesheets/themes/pink.scss index 13aa0b9a6..f2845c4cc 100644 --- a/app/assets/stylesheets/themes/pink.scss +++ b/app/assets/stylesheets/themes/pink.scss @@ -58,7 +58,7 @@ --header-bg: var(--base-40); --header-bg-hover: var(--base-50); --header-bg-current: var(--base-50); - --header-shadow: rgba(0,0,0,0.1); + --header-shadow: rgba(0, 0, 0, 0.1); --header-icons-color: var(--base-10); --header-icons-color-hover: var(--base-0); @@ -148,6 +148,11 @@ --box: var(--card-bg); --box-darker: var(--base-100); + // Snackbars + --snackbar-bg: var(--base-90); + --snackbar-border: var(--base-100); + --snackbar-color: var(--body-color-inverted); + // Indicators --indicator-accent-bg: var(--link-brand-color); --indicator-accent-color: var(--body-color-inverted); diff --git a/app/javascript/crayons/Box/__stories__/box.description.stories.jsx b/app/javascript/crayons/Box/__stories__/box.description.stories.jsx deleted file mode 100644 index e6c630e06..000000000 --- a/app/javascript/crayons/Box/__stories__/box.description.stories.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import { h } from 'preact'; - -import '../../storybook-utiltiies/designSystem.scss'; - -export default { - title: 'Components/Boxes', -}; - -export const Description = () => ( -
-

Boxes

-

- “Box” will be a background element used for many other components, for - example banners, dropdowns, modals. This component does not have any - guidelines in terms of placement or spacing, since it’s supposed to be - used to build other components. -

-

There are:

- -

- By default use “outlined” type unless you really have to make something - stand out - then use “filled”. But double check if it makes sense since - “filled” style really steals attention. -

-

- Use style that makes the most sense for you current use case. It’s pretty - obvious when to use Danger, Warning and Success. But for Default and Info - - it’s more up to designer to make a good call :). -

-

Elevations should define what kind of element it is:

- -
-); - -Description.story = { - name: 'description', -}; diff --git a/app/javascript/crayons/Box/__stories__/box.html.stories.jsx b/app/javascript/crayons/Box/__stories__/box.html.stories.jsx deleted file mode 100644 index 6dc782591..000000000 --- a/app/javascript/crayons/Box/__stories__/box.html.stories.jsx +++ /dev/null @@ -1,132 +0,0 @@ -import { h } from 'preact'; - -import '../../storybook-utiltiies/designSystem.scss'; -import { defaultChildrenPropTypes } from '../../../src/components/common-prop-types'; - -const Grid = ({ children }) => ( -
- {children} -
-); - -Grid.propTypes = { - children: defaultChildrenPropTypes.isRequired, -}; - -export default { - title: 'Components/Boxes/HTML', -}; - -export const Level0 = () => ( - -
box, level 0
-
filled box, level 0
-
box, level 0
-
- filled box, level 0 -
-
box, level 0
-
- filled box, level 0 -
-
box, level 0
-
- filled box, level 0 -
-
box, level 0
-
- filled box, level 0 -
- -); - -Level0.story = { - name: 'level 0', -}; - -export const Level1 = () => ( - -
box, level 1
-
filled box, level 1
-
box, level 1
-
- filled box, level 1 -
-
box, level 1
-
- filled box, level 1 -
-
box, level 1
-
- filled box, level 1 -
-
box, level 1
-
- filled box, level 1 -
- -); - -Level1.story = { - name: 'level 1', -}; - -export const Level2 = () => ( - -
box, level 2
-
filled box, level 2
-
box, level 2
-
- filled box, level 2 -
-
box, level 2
-
- filled box, level 2 -
-
box, level 2
-
- filled box, level 2 -
-
box, level 2
-
- filled box, level 2 -
- -); - -Level2.story = { - name: 'level 2', -}; - -export const Level3 = () => ( - -
box, level 3
-
filled box, level 3
-
box, level 3
-
- filled box, level 3 -
-
box, level 3
-
- filled box, level 3 -
-
box, level 3
-
- filled box, level 3 -
-
box, level 3
-
- filled box, level 3 -
- -); - -Level3.story = { - name: 'level 3', -}; diff --git a/app/views/users/_account.html.erb b/app/views/users/_account.html.erb index 7b6c6c7c7..f4fd71d30 100644 --- a/app/views/users/_account.html.erb +++ b/app/views/users/_account.html.erb @@ -42,7 +42,7 @@ <% end %> -
+

Danger Zone

<% if @user.identities.size > 1 %>