Skip to content

Commit

Permalink
Update examples and visual tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@antidecaf
antidecaf committed Mar 16, 2017
1 parent 111055d commit a56b720
Show file tree
Hide file tree
Showing 9 changed files with 86 additions and 83 deletions.
9 changes: 6 additions & 3 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@

## v.9.0.0

BREAKING:
BREAKING:

Refactored color variables.
To upgrade to this release, the following variables must be replaced by their new names in your LESS code:
Removed `@ffe-sand-25`, renamed other color variables.

To upgrade to this release, all references to the following variables must be replaced by their new names in your LESS code:

* `@ffe-blue-flat` --> `@ffe-blue-cobalt`
* `@ffe-blue-royal-light-wcag` --> `@ffe-blue-azure`
Expand All @@ -24,6 +25,8 @@ To upgrade to this release, the following variables must be replaced by their ne
* `@ffe-grey-light` --> `@ffe-grey-silver`
* `@ffe-grey-dark` --> `@ffe-grey-charcoal`

Instances of `@ffe-sand-25` can be replaced by `@ffe-sand`, which is the same color.

## v.8.2.4

Adjusted colors to reflect design guidelines
Expand Down
64 changes: 32 additions & 32 deletions examples/colors.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,68 +25,68 @@ <h2 class="ffe-h2">Primær Fargepalett</h2>
<div class="color-patch__patch-descr">Blue-royal<br>#002776</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-blue-flat"></div>
<div class="color-patch__patch-descr">Blue-flat<br>#005AA4</div>
<div class="color-patch__color-box color-patch__color-box--ffe-blue-cobalt"></div>
<div class="color-patch__patch-descr">Blue-cobalt<br>#005AA4</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-blue-royal-light"></div>
<div class="color-patch__patch-descr">Blue-royal-light<br>#008ED2</div>
<div class="color-patch__color-box color-patch__color-box--ffe-blue-deep-sky"></div>
<div class="color-patch__patch-descr">Blue-deep-sky<br>#008ED2</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-blue-royal-light-wcag"></div>
<div class="color-patch__patch-descr">Blue-royal-light-WCAG<br>#0071CD</div>
<div class="color-patch__color-box color-patch__color-box--ffe-blue-azure"></div>
<div class="color-patch__patch-descr">Blue-azure<br>#0071CD</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-blue-royal-light-50"></div>
<div class="color-patch__patch-descr">Blue-royal-light-50%<br>#7FC6E8</div>
<div class="color-patch__color-box color-patch__color-box--ffe-blue-sky"></div>
<div class="color-patch__patch-descr">Blue-sky<br>#7FC6E8</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-blue-royal-light-20"></div>
<div class="color-patch__patch-descr">Blue-royal-light-20%<br>#DFF1F9</div>
<div class="color-patch__color-box color-patch__color-box--ffe-blue-pale"></div>
<div class="color-patch__patch-descr">Blue-pale<br>#DFF1F9</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-blue-royal-light-10"></div>
<div class="color-patch__patch-descr">Blue-royal-light-10%<br>#EFF8FC</div>
<div class="color-patch__color-box color-patch__color-box--ffe-blue-ice"></div>
<div class="color-patch__patch-descr">Blue-ice<br>#EFF8FC</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-blue-focus"></div>
<div class="color-patch__patch-descr">Blue-focus<br>fade(#44C0FF, 50%)</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-green-wcag"></div>
<div class="color-patch__patch-descr">Green-WCAG<br>#008A00</div>
<div class="color-patch__color-box color-patch__color-box--ffe-green-shamrock"></div>
<div class="color-patch__patch-descr">Green-shamrock<br>#008A00</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-green-wcag-20"></div>
<div class="color-patch__patch-descr">Green-WCAG-20%<br>#E1F4E3</div>
<div class="color-patch__color-box color-patch__color-box--ffe-green-mint"></div>
<div class="color-patch__patch-descr">Green-mint<br>#E1F4E3</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-sand"></div>
<div class="color-patch__patch-descr">Sand<br>#F8F5EB</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-sand-50"></div>
<div class="color-patch__patch-descr">Sand-50%<br>#FBFAF5</div>
<div class="color-patch__color-box color-patch__color-box--ffe-sand-ivory"></div>
<div class="color-patch__patch-descr">Sand-ivory<br>#FBFAF5</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-black"></div>
<div class="color-patch__patch-descr">Black<br>#262626</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-grey-dark"></div>
<div class="color-patch__patch-descr">Grey-dark<br>#676767</div>
<div class="color-patch__color-box color-patch__color-box--ffe-grey-charcoal"></div>
<div class="color-patch__patch-descr">Grey-charcoal<br>#676767</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-grey"></div>
<div class="color-patch__patch-descr">Grey<br>#ADADAD</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-grey-light"></div>
<div class="color-patch__patch-descr">Grey-light<br>#CCCCCC</div>
<div class="color-patch__color-box color-patch__color-box--ffe-grey-silver"></div>
<div class="color-patch__patch-descr">Grey-silver<br>#CCCCCC</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-grey-light-bg"></div>
<div class="color-patch__patch-descr">Grey-light-bg<br>#F4F4F4</div>
<div class="color-patch__color-box color-patch__color-box--ffe-grey-cloud"></div>
<div class="color-patch__patch-descr">Grey-cloud<br>#F4F4F4</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-white"></div>
Expand All @@ -109,28 +109,28 @@ <h2 class="ffe-h2">Sekundær Fargepalett</h2>
<div class="color-patch__patch-descr">Green<br>#37B441</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-green-dark-10"></div>
<div class="color-patch__patch-descr">Green-dark-10<br>#007B00</div>
<div class="color-patch__color-box color-patch__color-box--ffe-green-emerald"></div>
<div class="color-patch__patch-descr">Green-emerald<br>#007B00</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-purple"></div>
<div class="color-patch__patch-descr">Purple<br>#C94096</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-purple-wcag"></div>
<div class="color-patch__patch-descr">Purple-WCAG<br>#A20076</div>
<div class="color-patch__color-box color-patch__color-box--ffe-purple-magenta"></div>
<div class="color-patch__patch-descr">Purple-magenta<br>#A20076</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-orange"></div>
<div class="color-patch__patch-descr">Orange<br>#FF9100</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-orange-wcag"></div>
<div class="color-patch__patch-descr">Orange-WCAG<br>#DA3D00</div>
<div class="color-patch__color-box color-patch__color-box--ffe-orange-fire"></div>
<div class="color-patch__patch-descr">Orange-fire<br>#DA3D00</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-orange-wcag-20"></div>
<div class="color-patch__patch-descr">Orange-WCAG-20%<br>#F3BBAA</div>
<div class="color-patch__color-box color-patch__color-box--ffe-orange-salmon"></div>
<div class="color-patch__patch-descr">Orange-salmon<br>#F3BBAA</div>
</li>
<li class="color-patch">
<div class="color-patch__color-box color-patch__color-box--ffe-red"></div>
Expand Down
64 changes: 32 additions & 32 deletions examples/examples.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,77 +22,77 @@
&--ffe-blue-royal {
background-color: @ffe-blue-royal;
}
&--ffe-blue-flat {
background-color: @ffe-blue-flat;
&--ffe-blue-cobalt {
background-color: @ffe-blue-cobalt;
}
&--ffe-blue-royal-light {
background-color: @ffe-blue-royal-light;
&--ffe-blue-deep-sky {
background-color: @ffe-blue-deep-sky;
}
&--ffe-blue-royal-light-wcag {
background-color: @ffe-blue-royal-light-wcag;
&--ffe-blue-azure {
background-color: @ffe-blue-azure;
}
&--ffe-blue-royal-light-50 {
background-color: @ffe-blue-royal-light-50;
&--ffe-blue-sky {
background-color: @ffe-blue-sky;
}
&--ffe-blue-royal-light-20 {
background-color: @ffe-blue-royal-light-20;
&--ffe-blue-pale {
background-color: @ffe-blue-pale;
}
&--ffe-blue-royal-light-10 {
background-color: @ffe-blue-royal-light-10;
&--ffe-blue-ice {
background-color: @ffe-blue-ice;
}
&--ffe-blue-focus {
background-color: @ffe-blue-focus;
}
&--ffe-green {
background-color: @ffe-green;
}
&--ffe-green-dark-10 {
background-color: @ffe-green-dark-10;
&--ffe-green-emerald {
background-color: @ffe-green-emerald;
}
&--ffe-green-wcag {
background-color: @ffe-green-wcag;
&--ffe-green-shamrock {
background-color: @ffe-green-shamrock;
}
&--ffe-green-wcag-20 {
background-color: @ffe-green-wcag-20;
&--ffe-green-mint {
background-color: @ffe-green-mint;
}
&--ffe-sand {
background-color: @ffe-sand;
}
&--ffe-sand-50 {
background-color: @ffe-sand-50;
&--ffe-sand-ivory {
background-color: @ffe-sand-ivory;
}
&--ffe-black {
background-color: @ffe-black;
}
&--ffe-grey-dark {
background-color: @ffe-grey-dark;
&--ffe-grey-charcoal {
background-color: @ffe-grey-charcoal;
}
&--ffe-grey {
background-color: @ffe-grey;
}
&--ffe-grey-light {
background-color: @ffe-grey-light;
&--ffe-grey-silver {
background-color: @ffe-grey-silver;
}
&--ffe-grey-light-bg {
background-color: @ffe-grey-light-bg;
&--ffe-grey-cloud {
background-color: @ffe-grey-cloud;
}
&--ffe-white {
background-color: @ffe-white;
}
&--ffe-purple {
background-color: @ffe-purple;
}
&--ffe-purple-wcag {
background-color: @ffe-purple-wcag;
&--ffe-purple-magenta {
background-color: @ffe-purple-magenta;
}
&--ffe-orange {
background-color: @ffe-orange;
}
&--ffe-orange-wcag {
background-color: @ffe-orange-wcag;
&--ffe-orange-fire {
background-color: @ffe-orange-fire;
}
&--ffe-orange-wcag-20 {
background-color: @ffe-orange-wcag-20;
&--ffe-orange-salmon {
background-color: @ffe-orange-salmon;
}
&--ffe-red {
background-color: @ffe-red;
Expand Down
8 changes: 4 additions & 4 deletions less/colors.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@
@ffe-blue-azure: #0071CD; // Secondary buttons
@ffe-blue-deep-sky: #008ED2; // Anchor, text on ffe-white buttons, active radio buttons
@ffe-blue-sky: #7FC6E8;
@ffe-blue-pale: #DFF1F9; // 20% opacity of ffe-blue-royal-light. (Info-boxes, etc.)
@ffe-blue-ice: #EFF8FC; // 10% opacity of ffe-blue-royal-light. (Expandable table rows)
@ffe-blue-pale: #DFF1F9; // ~20% opacity of ffe-blue-deep-sky. (Info-boxes, etc.)
@ffe-blue-ice: #EFF8FC; // ~10% opacity of ffe-blue-deep-sky. (Expandable table rows)
@ffe-blue-focus: fade(#44C0FF, 50%); // Focus on buttons and controls

// Green
@ffe-green: #37B441; // E.g. slider tool
@ffe-green-shamrock: #008A00; // Action buttons, slider tool, (should indicate affordance)
@ffe-green-emerald: #007B00;
@ffe-green-mint: #E1F4E3; // 20% opacity of ffe-green-WCAG. (Info-boxes, etc.)
@ffe-green-mint: #E1F4E3; // ~20% opacity of ffe-green-shamrock. (Info-boxes, etc.)

// Orange
@ffe-orange: #FF9100; // Campaigns
@ffe-orange-fire: #DA3D00; // Form validation, Error messages
@ffe-orange-salmon: #F3BBAA; // 20% opacity of ffe-orange-WCAG. (Info-boxes, etc.)
@ffe-orange-salmon: #F3BBAA; // ~20% opacity of ffe-orange-fire. (Info-boxes, etc.)

// Red
@ffe-red: #E60000;
Expand Down
8 changes: 4 additions & 4 deletions less/layout.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,16 @@
}

&--bg-grey {
background-color: @ffe-grey-light-bg;
background-color: @ffe-grey-cloud;
max-width: none;
}

&--bg-blue {
background-color: @ffe-blue-royal-light-20;
background-color: @ffe-blue-pale;
}

&--bg-blue-flat {
background-color: @ffe-blue-flat;
background-color: @ffe-blue-cobalt;
}

&--bg-blue-flat {
Expand Down Expand Up @@ -82,7 +82,7 @@
}

&--bg-grey {
background-color: @ffe-grey-light-bg;
background-color: @ffe-grey-cloud;
padding: @app-margin 0 @app-margin 0;
}

Expand Down
16 changes: 8 additions & 8 deletions less/typography.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,15 @@
}

.ffe-small-text {
color: @ffe-grey-dark;
color: @ffe-grey-charcoal;
font-family: "MuseoSans-500", arial, sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 22px;
}

.ffe-micro-text {
color: @ffe-grey-dark;
color: @ffe-grey-charcoal;
font-family: "MuseoSans-500", arial, sans-serif;
font-size: 12px;
font-weight: normal;
Expand All @@ -73,15 +73,15 @@
margin-top: 0;

&--error {
color: @ffe-orange-wcag;
color: @ffe-orange-fire;
}

&--no-margin {
margin: 0;
}

&--with-border {
border-bottom: 1px solid @ffe-grey-light;
border-bottom: 1px solid @ffe-grey-silver;
padding-bottom: 10px;
}
}
Expand Down Expand Up @@ -125,19 +125,19 @@
}

.ffe-link-text {
color: @ffe-blue-royal-light-wcag;
color: @ffe-blue-azure;
text-decoration: none;
word-wrap: break-word;

&:hover {
color: @ffe-blue-flat;
color: @ffe-blue-cobalt;
text-decoration: none;
}
}

.ffe-divider-line {
border: none;
border-bottom: solid 1px @ffe-grey-light;
border-bottom: solid 1px @ffe-grey-silver;
width: 100%;
}

Expand All @@ -151,7 +151,7 @@
}

.ffe-pre-text {
background-color: @ffe-sand-50;
background-color: @ffe-sand-ivory;
font-family: consolas, menlo, monaco, monospace;
margin: 0;
text-align: left;
Expand Down
Binary file modified visual-tests/baseline-screenshots/colors/plain/firefox-large.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified visual-tests/baseline-screenshots/colors/plain/firefox-medium.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified visual-tests/baseline-screenshots/colors/plain/firefox-small.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a56b720

Please sign in to comment.