gent_styleguide 6.0.0-alpha2 → 6.0.0-alpha21

package/build/styleguide/sass/00-settings/_colors.scss

@@ -18,22 +18,28 @@
 $colors: (
   // 6.x colors
   'gray': #001823,
+  'gray-medium': #687278,
+  'gray-light': #e6e8ea,
+  'gray-ultra-light': #f0f1f2,
   'blue': #005ba9,
+  'blue-light': #ccdeee,
   'yellow': #ffdb5a,
+  'yellow-pastel': #ffec93,
+  'yellow-light': #fff8d4,
   'cyan': #009de0,
+  'cyan-pastel': #7ed9ff,
+  'cyan-light': #e6f8ff,
   'cyan-hover': #1abcff,
   'red': #ea0d33,
+  'red-pastel': #ff8a9d,
+  'red-light': #ffe8ec,
+  'orange': #e06c00,
+  'orange-pastel': #ffb673,
+  'orange-light': #fff2e5,
   'green': #2c8726,
+  'green-pastel': #8ee088,
+  'green-light': #e1fde1,
   'white': #fff,
-
-  // 5.x colors legacy
-  'cyan-wcag': #007db3,
-  'dark-gray': #23333a,
-  'teal': #29cfc9,
-  'lemon': #f5d605,
-  'orange': #f95706,
-  'pink': #f09,
-  'purple': #5a0ec4,
 ) !default;
 
 
@@ -59,18 +65,6 @@ $tints: (
   -7: .02,
 ) !default;
 
-///
-/// Themify adds the color for box shadows, this just defines the box shadow
-/// without a specific color so it can be reused.
-///
-/// @since 3.0.0
-/// @group colors
-/// @access public
-/// @type string
-///
-$box-shadow-primary: 0 2px 8px 0;
-$box-shadow-secondary: 0 2px 12px 0;
-
 ///
 /// A function to convert a rgba color to a rgb color.
 ///
@@ -187,100 +181,3 @@ $box-shadow-secondary: 0 2px 12px 0;
 
   @return mix($color-black, map-get($colors, $base-color), map-get($tints, $tint));
 };
-
-///
-/// Themify settings. This determines the colors for all main and subthemes.
-///
-/// @since 3.0.0
-/// @group colors
-/// @access public
-/// @type map
-///
-$themes: (
-  'blue': (
-    // Required colors!
-    'color-zero': color('gray'),
-    'color-none': color('white'),
-    'color-primary': color('blue'),
-    'color-secondary': color('yellow'),
-    'color-tertiary': color('cyan'),
-    'color-info': color('cyan'),
-    'color-success': color('green'),
-    'color-warning': color('orange'), // Deprecated color.
-    'color-error': color('red'),
-    'color-box-shadow': $box-shadow-primary color('gray', -4), // @todo Remove shadow.
-    'color-box-shadow-hover': $box-shadow-primary color('gray', -3), // @todo Remove shadow.
-    'color-box-shadow-dark': $box-shadow-primary color('gray', -4), // @todo Remove shadow.
-    'color-box-shadow-dark-hover': $box-shadow-primary color('gray', -3), // @todo Remove shadow.
-    'color-box-shadow-secondary-dark': $box-shadow-secondary color('gray', -4), // @todo Remove shadow.
-
-    'default-text-color': color('gray'),
-
-    'accolade-stroke-light': svg-as-background('accolade-stroke', color('cyan', -5), 1280, 21),
-    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('cyan', 1), 1280, 21),
-
-    // Exceptions to colors go here...
-    // These should be as limited as possible though!
-    'heading-inverse-primary-background-color': color('blue'),
-
-    'link-color': color('cyan-wcag', 1),
-    'link-hover-background': color('cyan', -5),
-    'link-hover-color': color('cyan', 2),
-    'link-underlined-hover-color': color('cyan', 2),
-
-    'focus-outline': color('cyan'),
-
-    'breadcrumb-expandable-color': color('cyan'),
-    'breadcrumb-expandable-background-color-hover': color('cyan', -5),
-
-    'button-primary-background': color('gray'),
-    'button-primary-color': color('white'),
-    'button-primary-border-color': color('gray'), // @todo Remove border.
-    'button-primary-hover-background': color('gray', -2),
-    'button-primary-hover-color': color('white'),
-    'button-primary-hover-border-color': color('gray', -2), // @todo Remove border.
-    'button-primary-active-background': color('white'),
-    'button-primary-active-color': color('gray'),
-    'button-primary-active-border-color': color('gray'), // @todo Remove border.
-
-    'button-secondary-background': color('cyan', -3),
-    'button-secondary-border-color': color('cyan', -3), // @todo Remove border.
-    'button-secondary-color': color('gray'),
-    'button-secondary-hover-background': color('cyan-hover'),
-    'button-secondary-hover-color': color('gray'),
-    'button-secondary-hover-border-color': color('cyan-hover'), // @todo Remove border.
-    'button-secondary-active-color': color('gray'),
-    'button-secondary-active-background': color('white'),
-    'button-secondary-active-border-color': color('cyan-hover'), // @todo Remove border.
-
-    'image-gallery-show-more-background-color': color('cyan', 3),
-
-    'radio-background-color-checked': color('cyan', -6),
-    'radio-border-color-checked': color('cyan'),
-    'radio-checkmark-color': color('cyan'),
-
-    'radio-background-color-hover-and-checked': color('cyan', -4),
-    'radio-border-color-hover-and-checked': color('cyan', 3),
-    'radio-color-hover-and-checked': color('cyan', 3),
-
-    'checkbox-background-color-checked': color('cyan', -6),
-    'checkbox-border-color-checked': color('cyan'),
-    'checkbox-checkmark-color': color('cyan'),
-
-    'checkbox-background-color-hover-and-checked': color('cyan', -4),
-    'checkbox-border-color-hover-and-checked': color('cyan', 3),
-    'checkbox-color-hover-and-checked': color('cyan', 3),
-
-    'readspeaker-icon-color': color('cyan'),
-    'readspeaker-icon-border-color': color('cyan', -3),
-
-    'tag-border-color-hover': color('cyan', -3),
-    'tag-close-button-background-hover': color('cyan', -5),
-    'teaser-label-icon-color': color('cyan'),
-
-    'gentinfo-content-shadow': color('cyan', -6),
-
-    'tag-border-color': color('cyan', -3),
-    'tag-span-border-color': color('cyan', -4),
-  )
-) !default;

package/build/styleguide/sass/00-settings/_themes.scss

@@ -0,0 +1,71 @@
+///
+/// Themify settings. This determines the colors for all main and sub themes.
+///
+/// @since 3.0.0
+/// @group themes
+/// @access public
+/// @type map
+///
+$themes: (
+  'blue': (
+    // Required colors!
+    'color-zero': color('gray'),
+    'color-none': color('white'),
+    'color-primary': color('blue'),
+    'color-primary-light': color('blue-light'),
+    'color-secondary': color('yellow'),
+    'color-secondary-pastel': color('yellow-pastel'),
+    'color-secondary-light': color('yellow-light'),
+    'color-tertiary': color('cyan'),
+    'color-tertiary-pastel': color('cyan-pastel'),
+    'color-tertiary-light': color('cyan-light'),
+    'color-quaternary': color('cyan-hover'),
+    'color-info': color('cyan'),
+    'color-info-pastel': color('cyan-pastel'),
+    'color-info-light': color('cyan-light'),
+    'color-success': color('green'),
+    'color-success-pastel': color('green-pastel'),
+    'color-success-light': color('green-light'),
+    'color-warning': color('orange'),
+    'color-warning-pastel': color('orange-pastel'),
+    'color-warning-light': color('orange-light'),
+    'color-error': color('red'),
+    'color-error-pastel': color('red-pastel'),
+    'color-error-light': color('red-light'),
+
+    'default-text-color': color('gray'),
+
+    // Exceptions to colors go here...
+    // These should be as limited as possible though!
+    'heading-inverse-primary-background-color': color('blue'),
+    'heading-2-color': color('blue'),
+
+    'link-color': color('blue'),
+    'link-underline-color': color('blue'),
+    'link-hover-background': color('blue-light'),
+    'link-hover-color': color('blue'),
+    'link-underlined-hover-color': color('blue'),
+
+    'focus-outline': color('gray'),
+
+    'modal-overlay-background-color': color('cyan-light'),
+
+    'button-primary-background': color('gray'),
+    'button-primary-color': color('white'),
+    'button-primary-hover-background': color('gray-medium'),
+    'button-primary-hover-color': color('white'),
+    'button-primary-active-background': color('gray-medium'),
+    'button-primary-active-color': color('white'),
+
+    'button-secondary-background': color('cyan-pastel'),
+    'button-secondary-color': color('gray'),
+    'button-secondary-hover-background': color('cyan-hover'),
+    'button-secondary-hover-color': color('gray'),
+    'button-secondary-active-background': color('cyan-hover'),
+    'button-secondary-active-color': color('gray'),
+
+    'tag-close-button-background-hover': color('gray-light'),
+
+    'help-text-color': color('gray-medium'),
+  )
+) !default;

package/build/styleguide/sass/00-settings/_vars.scss

@@ -87,8 +87,8 @@ $z-layers: (
     'overlay': -1
   ),
   'teaser': (
-    'overlay-link': 1,
-    'content-link': 2,
+    'overlay-link': 3,
+    'content-link': 4,
     'label': 1
   ),
   'modal': (
@@ -158,7 +158,7 @@ $bp-desktop-xl: 1680px !default;
 /// @access public
 /// @author Gert-Jan Meire
 ///
-$bp-max-content: 1280px !default;
+$bp-max-content: 1170px !default;
 
 ///
 /// Defines the max width of a grid container.
@@ -172,7 +172,7 @@ $bp-container: 1680px !default;
 
 ///
 /// Defines the width of six columns on container max-width.
-/// Used to limit with of block content.
+/// Used to limit width of block content.
 ///
 /// @since 3.0.0
 /// @group settings
@@ -199,7 +199,7 @@ $grid-columns: 12 !default;
 /// @access public
 /// @author Gert-Jan Meire
 ///
-$gutter-width: 1.2rem !default;
+$gutter-width: 30px !default;
 
 ///
 /// Defines the default paragraph bottom margin.
@@ -254,7 +254,7 @@ $default-font-size: 20px !default; //px
 /// @access public
 /// @author Gert-Jan Meire
 ///
-$default-line-height: 1.75 !default;
+$default-line-height: 1.78 !default;
 
 ///
 /// This map describes the susy grid system settings.

package/build/styleguide/sass/11-base/base/_base.scss

@@ -16,15 +16,15 @@ html {
 }
 
 body {
+  @include large-text();
   // Since the `cs--` class is set on the body element, the styles should be applied directly to the element.
   @each $theme, $colors in $themes {
     &.cs--#{$theme} {
-      color: set-themified-property($colors, 'color-tertiary', 'default-text-color');
+      color: set-themified-property($colors, 'color-zero', 'default-text-color');
     }
   }
 
   position: relative;
-  font-size: .8rem;
 }
 
 ::selection {
@@ -39,7 +39,7 @@ th > * {
 hr {
   margin: 0 auto 1.4rem;
   clear: both;
-  border: solid color('dark-gray', -2);
+  border: solid color('gray-light');
   border-width: 1px 0 0;
 }