gent_styleguide 5.0.2 → 5.0.6

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

@@ -0,0 +1,448 @@
+////
+///
+/// This file defines all color settings, mixins and fucntions necessary
+/// to provide the themify engine the style guide is based on.
+///
+/// @group colors
+/// @author Gert-Jan Meire
+///
+////
+
+///
+/// The colors map defines all basic and secondary colors.
+///
+/// @since 3.0.0
+/// @group colors
+/// @access public
+/// @type map
+/// @author Gert-Jan Meire
+///
+$colors: (
+  'cyan': #009de0,
+  'cyan-wcag': #007db3,
+  'dark-gray': #23333a,
+  'white': #fff,
+  'blue': #0340c7,
+  'teal': #29cfc9,
+  'green': #38ab30,
+  'lemon': #f5d605,
+  'yellow': #fab600,
+  'orange': #f95706,
+  'red': #f20f36,
+  'pink': #f09,
+  'purple': #5a0ec4,
+) !default;
+
+
+///
+/// This map describes different tints. These are used to calculate all
+/// color swatches based on the base colors in $colors.
+///
+/// @since 3.0.0
+/// @group colors
+/// @access public
+/// @type map
+/// @author Gert-Jan Meire
+///
+$tints: (
+  1: 10%,
+  2: 25%,
+  3: 50%,
+  -1: .75,
+  -2: .5,
+  -3: .25,
+  -4: .1,
+  -5: .06,
+  -6: .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
+/// @author Gert-Jan Meire
+///
+$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.
+///
+/// @since 3.0.0
+/// @group colors
+/// @access public
+/// @author Jeroen Goossens
+/// @require $colors
+///
+/// @param {color} $base-color
+///   The key of the color in the $colors map.
+///
+/// @param {color} $background [#fff]
+///   The color to mix with.
+///
+@function rgba-to-rgb($base-color, $background: #fff) {
+  @return mix(rgb(red($base-color), green($base-color), blue($base-color)), $background, alpha($base-color) * 100%);
+};
+
+///
+/// A function to get a color from the $colors map.
+///
+/// @since 3.0.0
+/// @group colors
+/// @access public
+/// @author Gert-Jan Meire
+/// @require $colors
+///
+/// @param {color} $base-color
+///   The key of the color in the $colors map.
+///
+/// @param {int} $tint [0]
+///   The tint to be applied to the base color.
+///
+/// @param {boolean} $transparent [false]
+///   True when you need a RGBA color, otherwise HEX value will return.
+///
+/// @param {map} colors$ [$colors]
+///   The colors array to use to calculate the correct color tint.
+///
+@function color($base-color, $tint: 0, $transparent: false, $colors: $colors) {
+  @if not map-has-key($colors, $base-color) {
+    @warn "`#{inspect($base-color)}` doesn't seem to be a valid base color.";
+  }
+
+  $color: null;
+  @if $tint != 0 {
+    @if $tint > 0 {
+      $color: shade($base-color, $tint, $colors);
+    }
+    @if $tint < 0 {
+      $color: tint($base-color, $tint, $colors);
+    }
+
+    @if $transparent {
+      @return $color;
+    }
+    @else {
+      @return rgba-to-rgb($color);
+    }
+  }
+  @if $tint == 0 {
+    @return map-get($colors, $base-color);
+  }
+};
+
+///
+/// A function to adjust the opacity of a base color.
+///
+/// @since 3.0.0
+/// @group colors
+/// @access public
+/// @author Gert-Jan Meire
+/// @require $tints
+/// @require $colors
+///
+/// @param {color} $base-color
+///   The base color to be modified.
+///
+/// @param {int} $tint
+///   The tint value to modify the base color with.
+///
+/// @param {map} colors$ [$colors]
+///   The colors array to use to calculate the correct color tint.
+///
+@function tint($base-color, $tint, $colors: $colors) {
+  @if not map-has-key($tints, $tint) {
+    @warn "`#{inspect($tint)}` doesn't seem to be a valid tint value.";
+  }
+
+  @return rgba(map-get($colors, $base-color), map-get($tints, $tint));
+};
+
+///
+/// A function to darken a base color.
+///
+/// @since 3.0.0
+/// @group colors
+/// @access public
+/// @author Gert-Jan Meire
+/// @require $tints
+/// @require $colors
+///
+/// @param {color} $base-color
+///   The base color to be modified.
+///
+/// @param {int} $tint
+///   The value to shade the base color with.
+///
+/// @param {map} colors$ [$colors]
+///   The colors array to use to calculate the correct color tint.
+///
+@function shade($base-color, $tint, $colors: $colors) {
+  $color-black: #000;
+
+  @if not map-has-key($tints, $tint) {
+    @warn "`#{inspect($tint)}` doesn't seem to be a valid tint value.";
+  }
+
+  @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
+/// @author Gert-Jan Meire
+///
+$themes: (
+  'cyan': (
+    // Required colors!
+    'color-primary': color('cyan'),
+    'color-secondary': color('white'),
+    'color-tertiary': color('dark-gray'),
+    'color-info': color('cyan'),
+    'color-success': color('green'),
+    'color-warning': color('orange'),
+    'color-error': color('red'),
+    'color-box-shadow': $box-shadow-primary color('cyan-wcag', -3),
+    'color-box-shadow-hover': $box-shadow-primary color('cyan-wcag', -2),
+    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
+    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
+    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
+    'accolade-stroke-light': svg-as-background('accolade-stroke', color('cyan-wcag', -4), 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!
+    'link-color': color('cyan-wcag', 1),
+    'link-hover-background': color('cyan-wcag', -4),
+    'link-hover-color': color('cyan-wcag', 2),
+    'link-underlined-hover-color': color('cyan-wcag', 2),
+
+    'focus-outline': color('cyan-wcag'),
+
+    'breadcrumb-expandable-color': color('cyan'),
+    'breadcrumb-expandable-background-color-hover': color('cyan', -4),
+
+    'button-primary-background': color('cyan-wcag'),
+    'button-primary-border-color': color('cyan-wcag'),
+    'button-primary-hover-background': color('cyan-wcag', 1),
+    'button-primary-hover-border-color': color('cyan-wcag', 1),
+    'button-primary-focus-background': color('cyan-wcag', 3),
+    'button-primary-focus-border-color': color('cyan-wcag', 3),
+
+    'button-secondary-border-color': color('cyan-wcag', -2),
+    'button-secondary-color': color('cyan-wcag'),
+    'button-secondary-hover-color': color('cyan-wcag', 1),
+    'button-secondary-hover-border-color': color('cyan', -1),
+    'button-secondary-focus-color': color('cyan-wcag', 3),
+    'button-secondary-focus-background': color('cyan-wcag', -4),
+    'button-secondary-focus-border-color': color('cyan-wcag', -1),
+
+    'image-gallery-show-more-background-color': color('cyan-wcag', 3),
+
+    'radio-background-color-checked': color('cyan', -5),
+    'radio-border-color-checked': color('cyan'),
+    'radio-checkmark-color': color('cyan'),
+
+    'radio-background-color-hover-and-checked': color('cyan', -3),
+    'radio-border-color-hover-and-checked': color('cyan', 3),
+    'radio-color-hover-and-checked': color('cyan', 3),
+
+    'checkbox-background-color-checked': color('cyan', -5),
+    'checkbox-border-color-checked': color('cyan'),
+    'checkbox-checkmark-color': color('cyan'),
+
+    'checkbox-background-color-hover-and-checked': color('cyan', -3),
+    'checkbox-border-color-hover-and-checked': color('cyan', 3),
+    'checkbox-color-hover-and-checked': color('cyan', 3),
+
+    'readspeaker-icon-color': color('cyan-wcag'),
+    'readspeaker-icon-border-color': color('cyan-wcag', -2),
+
+    'tag-border-color-hover': color('cyan-wcag', -2),
+    'tag-close-button-background-hover': color('cyan-wcag', -4),
+    'teaser-label-icon-color': color('cyan-wcag'),
+
+    'gentinfo-content-shadow': color('cyan-wcag', -5),
+
+    'tag-border-color': color('cyan-wcag', -2),
+    'tag-span-border-color': color('cyan-wcag', -3),
+  ),
+  'orange': (
+    // Required colors!
+    'color-primary': color('orange'),
+    'color-secondary': color('white'),
+    'color-tertiary': color('dark-gray'),
+    'color-info': color('cyan'),
+    'color-success': color('green'),
+    'color-warning': color('orange'),
+    'color-error': color('red'),
+    'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
+    'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
+    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
+    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
+    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
+    'accolade-stroke-light': svg-as-background('accolade-stroke', color('orange', -4), 1280, 21),
+    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('orange', 1), 1280, 21),
+
+    // Exceptions to colors go here...
+    // These should be as limited as possible though!
+    'link-color': color('dark-gray'),
+    'link-hover-color': color('dark-gray', 2),
+    'link-underline-color': color('dark-gray', 2),
+
+    'button-primary-background': color('dark-gray'),
+    'button-primary-border-color': color('dark-gray'),
+    'button-primary-hover-background': color('dark-gray', 1),
+    'button-primary-hover-border-color': color('dark-gray', 1),
+    'button-primary-focus-background': color('dark-gray', 3),
+    'button-primary-focus-border-color': color('dark-gray', 3),
+
+    'button-secondary-border-color': color('dark-gray', -2),
+    'button-secondary-color': color('dark-gray'),
+    'button-secondary-hover-color': color('dark-gray', 1),
+    'button-secondary-hover-background': color('dark-gray', -4),
+    'button-secondary-hover-border-color': color('dark-gray', -1),
+    'button-secondary-focus-color': color('dark-gray', 3),
+    'button-secondary-focus-background': color('dark-gray', -4),
+    'button-secondary-focus-border-color': color('dark-gray', -1),
+  ),
+  'blue': (
+    // Required colors!
+    'color-primary': color('blue', 3),
+    'color-secondary': color('white'),
+    'color-tertiary': color('dark-gray'),
+    'color-info': color('cyan'),
+    'color-success': color('green'),
+    'color-warning': color('orange'),
+    'color-error': color('red'),
+    'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
+    'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
+    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
+    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
+    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
+    'accolade-stroke-light': svg-as-background('accolade-stroke', color('blue', -4), 1280, 21),
+    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('blue', 1), 1280, 21),
+
+    // Exceptions to colors go here...
+    // These should be as limited as possible though!
+    'link-color': color('dark-gray'),
+    'link-hover-color': color('dark-gray', 2),
+    'link-underline-color': color('dark-gray', 2),
+
+    'button-primary-background': color('dark-gray'),
+    'button-primary-border-color': color('dark-gray'),
+    'button-primary-hover-background': color('dark-gray', 1),
+    'button-primary-hover-border-color': color('dark-gray', 1),
+    'button-primary-focus-background': color('dark-gray', 3),
+    'button-primary-focus-border-color': color('dark-gray', 3),
+
+    'button-secondary-border-color': color('dark-gray', -2),
+    'button-secondary-color': color('dark-gray'),
+    'button-secondary-hover-color': color('dark-gray', 1),
+    'button-secondary-hover-background': color('dark-gray', -4),
+    'button-secondary-hover-border-color': color('dark-gray', -1),
+    'button-secondary-focus-color': color('dark-gray', 3),
+    'button-secondary-focus-background': color('dark-gray', -4),
+    'button-secondary-focus-border-color': color('dark-gray', -1),
+  ),
+  'teal': (
+    // Required colors!
+    'color-primary': color('teal'),
+    'color-secondary': color('white'),
+    'color-tertiary': color('dark-gray'),
+    'color-info': color('cyan'),
+    'color-success': color('green'),
+    'color-warning': color('orange'),
+    'color-error': color('red'),
+    'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
+    'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
+    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
+    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
+    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
+    'accolade-stroke-light': svg-as-background('accolade-stroke', color('teal', -4), 1280, 21),
+    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('teal', 1), 1280, 21),
+
+    // Exceptions to colors go here...
+    // These should be as limited as possible though!
+    'link-color': color('dark-gray'),
+    'link-hover-color': color('dark-gray', 2),
+    'link-underline-color': color('dark-gray', 2),
+
+    'button-primary-background': color('dark-gray'),
+    'button-primary-border-color': color('dark-gray'),
+    'button-primary-hover-background': color('dark-gray', 1),
+    'button-primary-hover-border-color': color('dark-gray', 1),
+    'button-primary-focus-background': color('dark-gray', 3),
+    'button-primary-focus-border-color': color('dark-gray', 3),
+
+    'button-secondary-border-color': color('dark-gray', -2),
+    'button-secondary-color': color('dark-gray'),
+    'button-secondary-hover-color': color('dark-gray', 1),
+    'button-secondary-hover-background': color('dark-gray', -4),
+    'button-secondary-hover-border-color': color('dark-gray', -1),
+    'button-secondary-focus-color': color('dark-gray', 3),
+    'button-secondary-focus-background': color('dark-gray', -4),
+    'button-secondary-focus-border-color': color('dark-gray', -1),
+
+    'heading-1-color': color('dark-gray'),
+    'hero-background-color': color('teal', 2),
+
+    'label-optional-color': color('teal', 3)
+  ),
+  'green': (
+    // Required colors!
+    'color-primary': color('green'),
+    'color-secondary': color('white'),
+    'color-tertiary': color('dark-gray'),
+    'color-info': color('cyan'),
+    'color-success': color('green'),
+    'color-warning': color('orange'),
+    'color-error': color('red'),
+    'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
+    'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
+    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
+    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
+    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
+    'accolade-stroke-light': svg-as-background('accolade-stroke', color('green', -4), 1280, 21),
+    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('green', 1), 1280, 21),
+
+    // Exceptions to colors go here...
+    // These should be as limited as possible though!
+    'link-color': color('dark-gray'),
+    'link-hover-color': color('dark-gray', 2),
+    'link-underline-color': color('dark-gray', 2),
+
+    'button-primary-background': color('dark-gray'),
+    'button-primary-border-color': color('dark-gray'),
+    'button-primary-hover-background': color('dark-gray', 1),
+    'button-primary-hover-border-color': color('dark-gray', 1),
+    'button-primary-focus-background': color('dark-gray', 3),
+    'button-primary-focus-border-color': color('dark-gray', 3),
+
+    'button-secondary-border-color': color('dark-gray', -2),
+    'button-secondary-color': color('dark-gray'),
+    'button-secondary-hover-color': color('dark-gray', 1),
+    'button-secondary-hover-background': color('dark-gray', -4),
+    'button-secondary-hover-border-color': color('dark-gray', -1),
+    'button-secondary-focus-color': color('dark-gray', 3),
+    'button-secondary-focus-background': color('dark-gray', -4),
+    'button-secondary-focus-border-color': color('dark-gray', -1),
+
+    'paragraph-type-background-color': color('green', -5),
+    'paragraph-type-color': color('green'),
+    'paragraph-course-background-color': color('green'),
+    'paragraph-course-color': color('white'),
+
+    'heading-1-color': color('dark-gray'),
+    'tag-span-border-color': color('dark-gray', -2),
+    'tag-border-color': color('dark-gray', -2),
+  )
+) !default;

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

@@ -0,0 +1,94 @@
+////
+///
+/// This file defines the reset CSS.
+///
+/// @group settings
+/// @author Gert-Jan Meire
+///
+////
+
+html,
+body,
+body div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+main {
+  display: block;
+}