maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Boxes coloring fix (#7656)

Browse source 
* boxes fix

* fix
This commit is contained in:
ludwiczakpawel 2020-05-04 14:42:11 +02:00 • committed by GitHub
parent b63bd98c2b
commit 2ad5403045
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 95 additions and 252 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/assets/stylesheets/base/boxes.scss
View file

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

1
app/assets/stylesheets/components/banners.scss
View file

@ -1,5 +1,4 @@
@import '../config/import';
@import '../base/boxes';
.crayons-banner {
padding: $su-4;

9
app/assets/stylesheets/components/dropdowns.scss
View file

@ -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;

9
app/assets/stylesheets/components/modals.scss
View file

@ -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;

43
app/assets/stylesheets/components/notices.scss
View file

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

11
app/assets/stylesheets/components/snackbars.scss
View file

@ -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;

5
app/assets/stylesheets/config/_colors.scss
View file

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

37
app/assets/stylesheets/config/_import.scss vendored
View file

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

1
app/assets/stylesheets/crayons.scss
View file

@ -2,7 +2,6 @@
@import 'config/generator';
@import 'base/reset';
@import 'base/boxes';
@import 'base/icons';
@import 'base/layout';

5
app/assets/stylesheets/themes/hacker.scss
View file

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

5
app/assets/stylesheets/themes/minimal.scss
View file

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

5
app/assets/stylesheets/themes/night.scss
View file

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

7
app/assets/stylesheets/themes/pink.scss
View file

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

49
app/javascript/crayons/Box/__stories__/box.description.stories.jsx
View file

@ -1,49 +0,0 @@
import { h } from 'preact';
import '../../storybook-utiltiies/designSystem.scss';
export default {
title: 'Components/Boxes',
};
export const Description = () => (
<div className="container">
<h2>Boxes</h2>
<p>
“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.
</p>
<p>There are:</p>
<ul>
<li>2 types: outlined & filled,</li>
<li>5 styles: default, danger, warning, info, success,</li>
<li>4 eleveations: 0, 1, 2, 3.</li>
</ul>
<p>
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.
</p>
<p>
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 :).
</p>
<p>Elevations should define what kind of element it is:</p>
<ul>
<li>0: something inside content.</li>
<li>
1: that can also be used in content but for elements that need more
attention, like notices...
</li>
<li>2: dropdowns</li>
<li>3: modals</li>
</ul>
</div>
);
Description.story = {
name: 'description',
};

132
app/javascript/crayons/Box/__stories__/box.html.stories.jsx
View file

@ -1,132 +0,0 @@
import { h } from 'preact';
import '../../storybook-utiltiies/designSystem.scss';
import { defaultChildrenPropTypes } from '../../../src/components/common-prop-types';
const Grid = ({ children }) => (
<div
style={{
display: 'grid',
'grid-template-columns': '1fr',
'grid-gap': '16px',
}}
>
{children}
</div>
);
Grid.propTypes = {
children: defaultChildrenPropTypes.isRequired,
};
export default {
title: 'Components/Boxes/HTML',
};
export const Level0 = () => (
<Grid>
<div className="crayons-box">box, level 0</div>
<div className="crayons-box crayons-box--filled ">filled box, level 0</div>
<div className="crayons-box crayons-box--danger">box, level 0</div>
<div className="crayons-box crayons-box--danger crayons-box--filled ">
filled box, level 0
</div>
<div className="crayons-box crayons-box--warning">box, level 0</div>
<div className="crayons-box crayons-box--warning crayons-box--filled ">
filled box, level 0
</div>
<div className="crayons-box crayons-box--success">box, level 0</div>
<div className="crayons-box crayons-box--success crayons-box--filled ">
filled box, level 0
</div>
<div className="crayons-box crayons-box--info">box, level 0</div>
<div className="crayons-box crayons-box--info crayons-box--filled ">
filled box, level 0
</div>
</Grid>
);
Level0.story = {
name: 'level 0',
};
export const Level1 = () => (
<Grid>
<div className="crayons-box crayons-box--level-1">box, level 1</div>
<div className="crayons-box crayons-box--filled">filled box, level 1</div>
<div className="crayons-box crayons-box--danger">box, level 1</div>
<div className="crayons-box crayons-box--danger crayons-box--filled crayons-box--level-1">
filled box, level 1
</div>
<div className="crayons-box crayons-box--warning">box, level 1</div>
<div className="crayons-box crayons-box--warning crayons-box--filled crayons-box--level-1">
filled box, level 1
</div>
<div className="crayons-box crayons-box--success">box, level 1</div>
<div className="crayons-box crayons-box--success crayons-box--filled crayons-box--level-1">
filled box, level 1
</div>
<div className="crayons-box crayons-box--info">box, level 1</div>
<div className="crayons-box crayons-box--info crayons-box--filled crayons-box--level-1">
filled box, level 1
</div>
</Grid>
);
Level1.story = {
name: 'level 1',
};
export const Level2 = () => (
<Grid>
<div className="crayons-box crayons-box--level-2">box, level 2</div>
<div className="crayons-box crayons-box--filled">filled box, level 2</div>
<div className="crayons-box crayons-box--danger">box, level 2</div>
<div className="crayons-box crayons-box--danger crayons-box--filled crayons-box--level-2">
filled box, level 2
</div>
<div className="crayons-box crayons-box--warning">box, level 2</div>
<div className="crayons-box crayons-box--warning crayons-box--filled crayons-box--level-2">
filled box, level 2
</div>
<div className="crayons-box crayons-box--success">box, level 2</div>
<div className="crayons-box crayons-box--success crayons-box--filled crayons-box--level-2">
filled box, level 2
</div>
<div className="crayons-box crayons-box--info">box, level 2</div>
<div className="crayons-box crayons-box--info crayons-box--filled crayons-box--level-2">
filled box, level 2
</div>
</Grid>
);
Level2.story = {
name: 'level 2',
};
export const Level3 = () => (
<Grid>
<div className="crayons-box crayons-box--level-3">box, level 3</div>
<div className="crayons-box crayons-box--filled">filled box, level 3</div>
<div className="crayons-box crayons-box--danger">box, level 3</div>
<div className="crayons-box crayons-box--danger crayons-box--filled crayons-box--level-3">
filled box, level 3
</div>
<div className="crayons-box crayons-box--warning">box, level 3</div>
<div className="crayons-box crayons-box--warning crayons-box--filled crayons-box--level-3">
filled box, level 3
</div>
<div className="crayons-box crayons-box--success">box, level 3</div>
<div className="crayons-box crayons-box--success crayons-box--filled crayons-box--level-3">
filled box, level 3
</div>
<div className="crayons-box crayons-box--info">box, level 3</div>
<div className="crayons-box crayons-box--info crayons-box--filled crayons-box--level-3">
filled box, level 3
</div>
</Grid>
);
Level3.story = {
name: 'level 3',
};

2
app/views/users/_account.html.erb
View file

@ -42,7 +42,7 @@
<% end %>
</div>
<div class="crayons-box crayons-box--danger p-6 grid gap-6">
<div class="crayons-card p-6 grid gap-6">
<h2 class="color-accent-danger">Danger Zone</h2>
<% if @user.identities.size > 1 %>