gent_styleguide 6.0.16 → 7.0.0

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

@@ -1,7 +1,9 @@
+@use 'colors' as *;
+
 ///
 /// Themify settings. This determines the colors for all main and sub themes.
 ///
-/// @since 3.0.0
+/// @since 3.0.0`
 /// @group themes
 /// @access public
 /// @type map
@@ -9,65 +11,67 @@
 $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'),
+    'color-zero': coloring('gray'),
+    'color-zero-light': coloring('gray-light'),
+    'color-zero-ultralight': coloring('gray-ultra-light'),
+    'color-none': coloring('white'),
+    'color-primary': coloring('blue'),
+    'color-primary-light': coloring('blue-light'),
+    'color-secondary': coloring('yellow'),
+    'color-secondary-pastel': coloring('yellow-pastel'),
+    'color-secondary-light': coloring('yellow-light'),
+    'color-tertiary': coloring('cyan'),
+    'color-tertiary-pastel': coloring('cyan-pastel'),
+    'color-tertiary-light': coloring('cyan-light'),
+    'color-quaternary': coloring('cyan-hover'),
+    'color-info': coloring('cyan'),
+    'color-info-pastel': coloring('cyan-pastel'),
+    'color-info-light': coloring('cyan-light'),
+    'color-success': coloring('green'),
+    'color-success-pastel': coloring('green-pastel'),
+    'color-success-light': coloring('green-light'),
+    'color-warning': coloring('orange'),
+    'color-warning-pastel': coloring('orange-pastel'),
+    'color-warning-light': coloring('orange-light'),
+    'color-error': coloring('red'),
+    'color-error-pastel': coloring('red-pastel'),
+    'color-error-light': coloring('red-light'),
 
-    'default-text-color': color('gray'),
+    'default-text-color': coloring('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'),
+    'heading-inverse-primary-background-color': coloring('blue'),
+    'heading-2-color': coloring('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'),
+    'link-color': coloring('blue'),
+    'link-underline-color': coloring('blue'),
+    'link-hover-background': coloring('blue-light'),
+    'link-hover-color': coloring('blue'),
+    'link-underlined-hover-color': coloring('blue'),
 
-    'focus-outline': color('gray'),
+    'focus-outline': coloring('gray'),
 
-    'modal-overlay-background-color': color('cyan-light'),
+    'modal-overlay-background-color': coloring('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-primary-background': coloring('gray'),
+    'button-primary-color': coloring('white'),
+    'button-primary-hover-background': coloring('gray-medium'),
+    'button-primary-hover-color': coloring('white'),
+    'button-primary-active-background': coloring('gray-medium'),
+    'button-primary-active-color': coloring('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'),
+    'button-secondary-background': coloring('cyan-pastel'),
+    'button-secondary-color': coloring('gray'),
+    'button-secondary-hover-background': coloring('cyan-hover'),
+    'button-secondary-hover-color': coloring('gray'),
+    'button-secondary-active-background': coloring('cyan-hover'),
+    'button-secondary-active-color': coloring('gray'),
 
-    'tag-close-button-background-hover': color('gray-light'),
+    'tag-close-button-background-hover': coloring('gray-light'),
 
-    'help-text-color': color('gray-medium'),
+    'help-text-color': coloring('gray-medium'),
 
-    'bullet-inactive-color': color('gray-light'),
+    'bullet-inactive-color': coloring('gray-light'),
   )
 ) !default;

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

@@ -1,3 +1,5 @@
+@use "sass:string";
+
 ////
 ///
 /// This file defines all general style guide settings.
@@ -28,7 +30,7 @@ $styleguide-dir: '../styleguide' !default;
 /// @type map
 /// @author Gert-Jan Meire
 ///
-$uuid: unique-id();
+$uuid: string.unique-id();
 
 ///
 /// Defines the border radius values components can use.
@@ -179,16 +181,6 @@ $bp-container: 1680px !default;
 ///
 $six-of-bp-container: 32rem !default;
 
-///
-/// Defines the grid system.
-///
-/// @since 2.0.3
-/// @group settings
-/// @access public
-/// @author Sven Vandevenne
-///
-@import '../11-base/grid/grid';
-
 ///
 /// Defines the number of grid columns for a given grid container.
 ///

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

@@ -0,0 +1,9 @@
+@use 'base/base';
+@use 'base/helper-classes';
+@use 'base/invisible';
+@use 'containers/containers';
+@use 'fonts/fonts';
+@use 'fonts/icons';
+@use 'forms/forms';
+@use 'grid/grid';
+@use 'section/section';

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

@@ -1,3 +1,6 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 ////
 /// Default markup for the most common HTML elements, based on the settings file.
 ////
@@ -10,9 +13,10 @@
 
 :root,
 html {
+  @include theme('background', 'color-none');
+
   display: grid;
   height: 100%;
-  background: color('white');
   font: $default-font-weight $default-font-size $default-font-family;
   line-height: $default-line-height;
   box-sizing: border-box;
@@ -44,7 +48,7 @@ th > * {
 hr {
   margin: 0 auto 1.4rem;
   clear: both;
-  border: solid color('gray-light');
+  border: solid coloring('gray-light');
   border-width: 1px 0 0;
 }
 

package/build/styleguide/sass/11-base/base/_helper-classes.scss

@@ -1,3 +1,7 @@
+@use "sass:string";
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 ////
 /// This file defines helper classes.
 ////
@@ -46,7 +50,7 @@
 $directions: top, right, bottom, left;
 @for $i from 0 through 40 {
   @each $d in $directions {
-    $ds: str-slice($d, 0, 1); // Get first letter of direction
+    $ds: string.slice($d, 0, 1); // Get first letter of direction
 
     .m#{$ds}-#{$i} {
       margin-#{$d}: $i * .1rem;

package/build/styleguide/sass/11-base/fonts/_fonts.scss

@@ -1,3 +1,5 @@
+@use '../../00-settings/settings' as *;
+
 ////
 /// This file defines fonts.
 /// Loading only Latin and Latin Extended

package/build/styleguide/sass/11-base/fonts/_icons.scss

@@ -1,3 +1,6 @@
+@use '../../00-settings/settings' as *;
+@use "sass:math";
+
 ////
 /// This is an generated file! Do not change this file. Use the template file
 /// _icons_template.template instead to apply changes.
@@ -7,16 +10,16 @@
 ///
 ////
 
-$id: random(1000);
+$id: math.random(1000);
 
 @font-face {
-  font-family: "gent-icons-v6";
-  src: url('#{$styleguide-dir}/fonts/gent-icons-v6.woff2?v=#{$id}') format('woff2');
+  font-family: "gent-icons-v7";
+  src: url('#{$styleguide-dir}/fonts/gent-icons-v7.woff2?v=#{$id}') format('woff2');
   font-display: swap;
 }
 
 @mixin icon-styles {
-  font-family: "gent-icons-v6";
+  font-family: "gent-icons-v7";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-style: normal;

package/build/styleguide/sass/11-base/forms/_forms.scss

@@ -1,3 +1,7 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../11-base/fonts/icons' as *;
+
 ////
 /// This file defines general form input fields styling.
 ///
@@ -35,10 +39,10 @@ $field-icon-padding: 50px;
   &:disabled {
     padding-right: $field-icon-padding;
     border: 0;
-    background: color("gray", -5) $field-icon-position;
+    background: coloring("gray", -5) $field-icon-position;
     background-image: svg-as-background(
       "lock-closed",
-      color("gray", -2),
+      coloring("gray", -2),
       24,
       24
     );
@@ -47,21 +51,21 @@ $field-icon-padding: 50px;
 
   &.success {
     padding-right: $field-icon-padding;
-    border: 1px solid color("green");
-    background: color("green-pastel", -4) $field-icon-position;
+    border: 1px solid coloring("green");
+    background: coloring("green-pastel", -4) $field-icon-position;
     background-image: svg-as-background(
       "checkmark-circle",
-      color("green"),
+      coloring("green"),
       26,
       26
     );
 
     &:focus {
-      border-color: color("green");
-      background: color("green-pastel", -4) $field-icon-position;
+      border-color: coloring("green");
+      background: coloring("green-pastel", -4) $field-icon-position;
       background-image: svg-as-background(
         "checkmark-circle",
-        color("green"),
+        coloring("green"),
         26,
         26
       );
@@ -70,21 +74,21 @@ $field-icon-padding: 50px;
 
   &.error {
     padding-right: $field-icon-padding;
-    border: 1px solid color("red");
-    background: color("red", -6) $field-icon-position;
+    border: 1px solid coloring("red");
+    background: coloring("red", -6) $field-icon-position;
     background-image: svg-as-background(
       "exclamation-circle",
-      color("red"),
+      coloring("red"),
       26,
       26
     );
 
     &:focus {
-      border-color: color("red");
-      background: color("red", -6) $field-icon-position;
+      border-color: coloring("red");
+      background: coloring("red", -6) $field-icon-position;
       background-image: svg-as-background(
         "exclamation-circle",
-        color("red"),
+        coloring("red"),
         26,
         26
       );
@@ -250,11 +254,11 @@ $field-icon-padding: 50px;
     //
     [class*="cs--"] & {
       &.success + label::before {
-        border-color: color("green");
+        border-color: coloring("green");
       }
 
       &.error + label::before {
-        border-color: color("red");
+        border-color: coloring("red");
       }
     }
 
@@ -263,23 +267,23 @@ $field-icon-padding: 50px;
     //
     &:disabled {
       + label {
-        color: color('gray', -3);
+        color: coloring('gray', -3);
         font-weight: normal !important; // sass-lint:disable-line no-important
         cursor: not-allowed;
 
         &::before {
-          border-color: color(
+          border-color: coloring(
             "gray",
             -5
           ) !important; // sass-lint:disable-line no-important
-          background: color(
+          background: coloring(
             "gray",
             -5
           ) !important; // sass-lint:disable-line no-important
         }
 
         &::after {
-          color: color(
+          color: coloring(
             "gray",
             -2
           ) !important; // sass-lint:disable-line no-important
@@ -351,7 +355,7 @@ $field-icon-padding: 50px;
         &:disabled {
           + label {
             &::after {
-              background-color: color(
+              background-color: coloring(
                 "gray",
                 -2
               ) !important; // sass-lint:disable-line no-important
@@ -366,6 +370,12 @@ $field-icon-padding: 50px;
 .form-disclaimer {
   @include theme('color', 'color-tertiary--lighten-1', 'form-disclaimer-color');
 
+  .highlight__inner &,
+  .feature-block &,
+  .feature-block.secondary & {
+    @include theme('color', 'color-zero');
+  }
+
   margin: 24px 0;
   font-size: .6rem;
 }

package/build/styleguide/sass/11-base/grid/_grid.scss

@@ -1,8 +1,10 @@
 // Importing grid mixins and variables.
-@import "flexbox-grid/variables/grid-variables";
-@import "flexbox-grid/mixins/visibility-mixins";
-@import "flexbox-grid/mixins/grid-mixins";
-
+@use "sass:list";
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use "flexbox-grid/variables/grid-variables" as *;
+@use "flexbox-grid/mixins/visibility-mixins" as *;
+@use "flexbox-grid/mixins/grid-mixins" as *;
 
 // Grid classes.
 .row {
@@ -119,8 +121,8 @@
 
 // Mixin to run inside of for loop - creates col/breakpoint classes.
 
-@for $i from 1 through length($breakpoint-up-prefixes) {
-  $this-prefix: nth($breakpoint-up-prefixes, $i);
+@for $i from 1 through list.length($breakpoint-up-prefixes) {
+  $this-prefix: list.nth($breakpoint-up-prefixes, $i);
 
   @if $this-prefix == "xs" {
     @include col-factory($this-prefix);

package/build/styleguide/sass/11-base/grid/flexbox-grid/mixins/_grid-mixins.scss

@@ -1,3 +1,7 @@
+@use "sass:meta";
+@use '../../../../00-settings/settings' as *;
+@use "../variables/grid-variables" as *;
+
 ///
 /// The grid system based on flexbox-grid https://github.com/kristoferjoseph/flexboxgrid
 /// but with a gap instead of padding, so the cols are calculated differently
@@ -17,7 +21,7 @@
   margin: 0 auto;
   gap: $gap;
 
-  @if type-of($content-well-max-width) == number and $content-well-max-width != 0 and $full-width == "false" {
+  @if meta.type-of($content-well-max-width) == 'number' and $content-well-max-width != 0 and $full-width == "false" {
     max-width: $content-well-max-width;
   }
 }
@@ -40,7 +44,7 @@
 
 // Condition to run inside of the col mixin * not for developer use *
 @mixin col-condition($col-number, $gap) {
-  @if type-of($col-number) == number {
+  @if meta.type-of($col-number) == number {
     @if $col-number > $grid-columns or $col-number == 0 {
       @warn "Column number must be greater than 0 and less than or equal to total number of columns in the grid (#{$grid-columns})";
     }
@@ -64,7 +68,7 @@
 
 @mixin col($breakpoint: "xs", $col-number: "auto", $gap: $grid-gutter-width) {
   // If no breakpoint is passed and a col number is just use the first arg as the col number and act like xs
-  @if type-of($breakpoint) == number {
+  @if meta.type-of($breakpoint) == number {
     $col-number: $breakpoint;
     @include col-condition($col-number, $gap);
   }
@@ -98,7 +102,7 @@
 
 // Condition to run inside of the col-offset mixin * not for developer use *
 @mixin col-offset-condition($offset-number) {
-  @if type-of($offset-number) != number {
+  @if meta.type-of($offset-number) != number {
     @warn "Column offset number must be a number (only arg or second arg in the col mixin)";
   }
   @else if $offset-number == 0 {
@@ -114,7 +118,7 @@
 
 @mixin col-offset($breakpoint: "xs", $offset-number: 0) {
   // If no breakpoint is passed and a col number is just use the first arg as the col number and act like xs
-  @if type-of($breakpoint) == number {
+  @if meta.type-of($breakpoint) == number {
     $offset-number: $breakpoint;
     @include col-offset-condition($offset-number);
   }

package/build/styleguide/sass/11-base/grid/flexbox-grid/mixins/_visibility-mixins.scss

@@ -1,3 +1,5 @@
+@use "../variables/grid-variables";
+
 @mixin show($breakpoint, $row) {
   @if $breakpoint == "xs" {
     @if $row == "true" or $row == "row" {

package/build/styleguide/sass/11-base/grid/flexbox-grid/variables/_grid-variables.scss

@@ -1,3 +1,5 @@
+@use "../../../../00-settings/settings" as *;
+
 // Grid
 $grid-columns: 12 !default; // Set number of columns in the grid
 

package/build/styleguide/sass/11-base/section/_section.scss

@@ -1,10 +1,14 @@
+@use "sass:map";
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 // Generate the section specific theming for components.
 @each $theme, $colors in $themes {
   %cs--#{$theme},
   .cs--#{$theme} {
     @include clearfix;
 
-    background: map-get($colors, 'section-background');
-    color: map-get($colors, 'section-text-color');
+    background: map.get($colors, 'section-background');
+    color: map.get($colors, 'section-text-color');
   }
 }

package/build/styleguide/sass/21-atoms/_atoms.scss

@@ -0,0 +1,25 @@
+@use 'accolade/accolade';
+@use 'button/button';
+@use 'field-message/field-message';
+@use 'fieldset/fieldset';
+@use 'figcaption/figcaption';
+@use 'file/file';
+@use 'form-label/form-label';
+@use 'heading/heading';
+@use 'image/image';
+@use 'input/input';
+@use 'input-submit/input-submit';
+@use 'input-textarea/input-textarea';
+@use 'label/label';
+@use 'link/link';
+@use 'list/list';
+@use 'logo/logo';
+@use 'open-today/open-today';
+@use 'paragraph/paragraph';
+@use 'pubdate/pubdate';
+@use 'select/input-select';
+@use 'skiplink/skiplink';
+@use 'spinner/spinner';
+@use 'status/status';
+@use 'table/table';
+@use 'tag/tag';

package/build/styleguide/sass/21-atoms/accolade/_accolade.scss

@@ -1,8 +1,11 @@
 @use "sass:math";
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
 
-$span: percentage(math.div(6, 12));
-$span-end: percentage(math.div(3, 12));
+$span: math.percentage(math.div(6, 12));
+$span-end: math.percentage(math.div(3, 12));
 
+%accolade,
 .accolade {
   position: absolute;
   right: 0;
@@ -16,6 +19,8 @@ $span-end: percentage(math.div(3, 12));
 
   &::before,
   &::after {
+    @include theme('background', 'color-none');
+
     position: absolute;
     top: 0;
     width: 100%;
@@ -23,7 +28,6 @@ $span-end: percentage(math.div(3, 12));
     margin-top: 0;
     border-top: 2px solid;
     border-color: transparent;
-    background: color('white');
     content: '';
   }
 
@@ -100,7 +104,7 @@ $span-end: percentage(math.div(3, 12));
       margin-top: 0;
       border-left: 2px solid;
       border-color: transparent;
-      background: color('white');
+      background: coloring('white');
       content: '';
     }
 
@@ -156,7 +160,7 @@ $span-end: percentage(math.div(3, 12));
 }
 
 
-$span-inverse: percentage(math.div(2, 12));
+$span-inverse: math.percentage(math.div(2, 12));
 $accolade-width: 2rem;
 $accolade-height: 1rem;
 
@@ -164,7 +168,7 @@ $accolade-height: 1rem;
   position: absolute;
   width: $accolade-width;
   height: $accolade-height;
-  background: transparent svg-as-background('accolade', color('white'), $accolade-width, $accolade-height);
+  background: transparent svg-as-background('accolade', coloring('white'), $accolade-width, $accolade-height);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100%;