FFE-69 Suggestion for new naming convention for colors

CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## v.9.0.0
+
+BREAKING: 
+
+Refactored color variables.
+To upgrade to this release, 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`
+* `@ffe-blue-royal-light` --> `@ffe-blue-deep-sky`
+* `@ffe-blue-royal-light-50` --> `@ffe-blue-sky`
+* `@ffe-blue-royal-light-20` --> `@ffe-blue-pale`
+* `@ffe-blue-royal-light-10` --> `@ffe-blue-ice`
+* `@ffe-green-wcag` --> `@ffe-green-shamrock`
+* `@ffe-green-dark-10` --> `@ffe-green-emerald`
+* `@ffe-green-wcag-20` --> `@ffe-green-mint`
+* `@ffe-orange-wcag` --> `@ffe-orange-fire`
+* `@ffe-orange-wcag-20` --> `@ffe-orange-salmon`
+* `@ffe-purple-wcag` --> `@ffe-purple-magenta`
+* `@ffe-sand-50` --> `@ffe-sand-ivory`
+* `@ffe-grey-light-bg` --> `@ffe-grey-cloud`
+* `@ffe-grey-light` --> `@ffe-grey-silver`
+* `@ffe-grey-dark` --> `@ffe-grey-charcoal`
+
 ## v.8.2.4
 
 Adjusted colors to reflect design guidelines

less/colors.less

@@ -1,35 +1,43 @@
+// Blue
 @ffe-blue-royal: #002776; // Titles, lead, overlays
-@ffe-blue-flat: #005AA4; // Primary buttons, emphasis on blue areas and product cards
-@ffe-blue-royal-light-wcag: #0071CD; // Secondary buttons
-@ffe-blue-royal-light: #008ED2; // Anchor, text on ffe-white buttons, active radio buttons
-@ffe-blue-royal-light-50: #7FC6E8;
-@ffe-blue-royal-light-20: #DFF1F9; // 20% opacity of ffe-blue-royal-light. (Info-boxes, etc.)
-@ffe-blue-royal-light-10: #EFF8FC; // 10% opacity of ffe-blue-royal-light. (Expandable table rows)
+@ffe-blue-cobalt: #005AA4; // Primary buttons, emphasis on blue areas and product cards
+@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-focus: fade(#44C0FF, 50%); // Focus on buttons and controls
 
-@ffe-green-wcag: #008A00; // Action buttons, slider tool, (should indicate affordance)
-@ffe-green-dark-10: #007B00;
+// Green
 @ffe-green: #37B441; // E.g. slider tool
-@ffe-green-wcag-20: #E1F4E3; // 20% opacity of ffe-green-WCAG. (Info-boxes, etc.)
+@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.)
 
+// Orange
 @ffe-orange: #FF9100; // Campaigns
-@ffe-orange-wcag: #DA3D00; // Form validation, Error messages
-@ffe-orange-wcag-20: #F3BBAA; // 20% opacity of ffe-orange-WCAG. (Info-boxes, etc.)
+@ffe-orange-fire: #DA3D00; // Form validation, Error messages
+@ffe-orange-salmon: #F3BBAA; // 20% opacity of ffe-orange-WCAG. (Info-boxes, etc.)
 
+// Red
 @ffe-red: #E60000;
 
-@ffe-purple-wcag: #A20076;
+// Purple
 @ffe-purple: #C94096;
+@ffe-purple-magenta: #A20076;
 
-@ffe-sand: #F8F5EB;
-@ffe-sand-50: #FBFAF5;
-@ffe-sand-25: @ffe-sand;
+// Beige
+@ffe-sand: #F8F5EB; // @ffe-sand + @ffe-sand-25
+@ffe-sand-ivory: #FBFAF5;
 
+// White
 @ffe-white: #FFF;
 
-@ffe-grey-light-bg: #F4F4F4; // Background panels
-@ffe-grey-light: #CCC; // Lines, borders, inactive tool elements (slider, etc.)
+// Grey
 @ffe-grey: #ADADAD;
-@ffe-grey-dark: #676767;
+@ffe-grey-cloud: #F4F4F4; // Background panels
+@ffe-grey-silver: #CCC; // Lines, borders, inactive tool elements (slider, etc.)
+@ffe-grey-charcoal: #676767;
 
+// Black
 @ffe-black: #262626; // Body text, and some other texts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffe-core",
-  "version": "8.2.4",
+  "version": "9.0.0",
   "description": "Rammeverk for Felles Front End",
   "less": "ffe.less",
   "main": "index.js",