Skip to content

Commit

Permalink
Update Colors section of styleguide with color info and better legibi…
Browse files Browse the repository at this point in the history 
…lity
  • Loading branch information
@mrotondo
mrotondo committed Dec 13, 2019
1 parent 8dd7fc9 commit 2aa7c23
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 102 deletions.
113 changes: 36 additions & 77 deletions app/assets/stylesheets/templates/_styleguide.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,21 +62,25 @@

.pattern__html {
@include clearfix();

&.is-open {
.pattern__button:before {
content: 'Hide HTML code';
}

pre {
display: block;
font-size: $font-size-15;
border: 1px solid $color-grey-light;
background: #fff;
}
}

pre {
display: none;
background-color: transparent;
overflow-y: hidden;

code {
background-color: transparent;
}
Expand Down Expand Up @@ -116,133 +120,88 @@

.color {
display: inline-block;
margin-right: 1em;
margin-bottom: 1em;
margin-right: .25em;
margin-bottom: .5em;
padding-left: $s10;
padding-top: $s10;
font-size: $font-size-25-small;
color: $color-grey-dark;
text-align: center;
width: $s155;
height: $s95;

&:before {
display: block;
content: '';
width: 4.5em;
height: 4.5em;
border: 2px solid $color-grey;
background-color: $color-grey;
p {
margin-bottom: 0;
}

&--green {
&:before {
background-color: $color-green;
}
background-color: $color-green;
color: white;
}

&--green-light {
&:before {
background-color: $color-green-light;
}
background-color: $color-green-light;
}

&--grey {
&:before {
background-color: $color-grey;
}
background-color: $color-grey;
}

&--grey-light {
&:before {
background-color: $color-grey-light;
}
background-color: $color-grey-light;
}

&--grey-dark {
&:before {
background-color: $color-grey-dark;
}
background-color: $color-grey-dark;
color: white;
}

&--grey-darkest {
&:before {
background-color: $color-grey-darkest;
}
background-color: $color-grey-darkest;
color: white;
}

&--magenta {
&:before {
background-color: $color-magenta;
}
background-color: $color-magenta;
color: white;
}

&--magenta-light {
&:before {
background-color: $color-magenta-light;
}
background-color: $color-magenta-light;
}

&--magenta-dark {
&:before {
background-color: $color-magenta-dark;
}
background-color: $color-magenta-dark;
color: white;
}

&--red {
&:before {
background-color: $color-red;
}
background-color: $color-red;
color: white;
}

&--red-light {
&:before {
background-color: $color-red-light;
}
background-color: $color-red-light;
}

&--teal {
&:before {
background-color: $color-teal;
}
background-color: $color-teal;
color: white;
}

&--teal-light {
&:before {
background-color: $color-teal-light;
}
background-color: $color-teal-light;
}

&--teal-dark {
&:before {
background-color: $color-teal-dark;
}
background-color: $color-teal-dark;
color: white;
}

&--yellow {
&:before {
background-color: $color-yellow;
}
background-color: $color-yellow;
}

&--yellow-light {
&:before {
background-color: $color-yellow-light;
}
}

&--background {
&:before {
background-color: $color-background;
}
}

&--tan {
&:before {
background-color: $color-grey;
}
}

&--orange {
&:before {
background-color: $color-orange;
}
background-color: $color-yellow-light;
}
}
}
92 changes: 67 additions & 25 deletions app/views/examples/atoms/_colors.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,69 @@
<p>Brand Colors</p>
<p>
<div class="color color--teal"></div>
<div class="color color--teal-light"></div>
<div class="color color--teal-dark"></div>
<div class="color color--magenta"></div>
<div class="color color--magenta-light"></div>
<div class="color color--magenta-dark"></div>
</p>
<h4>Brand Colors</h4>
<div class="color color--teal">
<p>#008060</p>
<p>teal</p>
</div>
<div class="color color--teal-light">
<p>#EBFFFA</p>
<p>teal-light</p>
</div>
<div class="color color--teal-dark">
<p>#034E46</p>
<p>teal-dark</p>
</div>
<div class="color color--magenta">
<p>#A6005E</p>
<p>magenta</p>
</div>
<div class="color color--magenta-light">
<p>#FFEAF6</p>
<p>magenta-light</p>
</div>
<div class="color color--magenta-dark">
<p>#66013A</p>
<p>magenta-dark</p>
</div>

<p>Greys</p>
<p>
<div class="color color--grey-light"></div>
<div class="color color--grey"></div>
<div class="color color--grey-dark"></div>
<div class="color color--grey-darkest"></div>
</p>
<h4>Greys</h4>
<div class="color color--grey-light">
<p>#F7F5F4</p>
<p>grey-light</p>
</div>
<div class="color color--grey">
<p>#CFC5BF</p>
<p>grey</p>
</div>
<div class="color color--grey-dark">
<p>#5F5854</p>
<p>grey-dark</p>
</div>
<div class="color color--grey-darkest">
<p>#121111</p>
<p>grey-darkest</p>
</div>

<p>System Colors</p>
<p>
<div class="color color--green-light"></div>
<div class="color color--green"></div>
<div class="color color--red-light"></div>
<div class="color color--red"></div>
<div class="color color--yellow-light"></div>
<div class="color color--yellow"></div>
</p>
<h4>System Colors</h4>
<div class="color color--green-light">
<p>#EBFFEF</p>
<p>green-light</p>
</div>
<div class="color color--green">
<p>#00891B</p>
<p>green</p>
</div>
<div class="color color--red-light">
<p>#FCE3D9</p>
<p>red-light</p>
</div>
<div class="color color--red">
<p>#D13F00</p>
<p>red</p>
</div>
<div class="color color--yellow-light">
<p>#FFF2D1</p>
<p>yellow-light</p>
</div>
<div class="color color--yellow">
<p>#FFAE00</p>
<p>yellow</p>
</div>

0 comments on commit 2aa7c23

Please sign in to comment.