gent_styleguide 6.0.16 → 7.0.0

package/build/styleguide/sass/21-atoms/field-message/_field-message.scss

@@ -1,3 +1,7 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../11-base/fonts/icons' as *;
+
 .field-message {
   @include theme('color', 'color-zero', 'message-text-color');
   @include theme('background-color', 'color-info-light', 'info-message-background');
@@ -51,6 +55,27 @@
       right: -1px;
       width: 31px;
     }
+
+    .feature-block.secondary & {
+      &::before,
+      &::after {
+        @include theme('background-color', 'color-secondary', 'feature-block-secondary-background-color');
+      }
+    }
+
+    .feature-block & {
+      &::before,
+      &::after {
+        @include theme('background-color', 'color-primary', 'feature-block-primary-background-color');
+      }
+    }
+
+    .highlight__inner & {
+      &::before,
+      &::after {
+        @include theme('background-color', 'color-tertiary-light', 'highlight-background');
+      }
+    }
   }
 
   a {
@@ -63,7 +88,9 @@
     @include theme('background-color', 'color-success-light', 'success-message-background');
     @include theme('border-color', 'color-success', 'success-message-icon-color');
 
-    padding-left: 58px;
+    & {
+      padding-left: 58px;
+    }
 
     &::before {
       @include theme('color', 'color-success', 'success-message-icon-color');
@@ -79,7 +106,9 @@
     @include theme('background-color', 'color-error-light', 'error-message-background');
     @include theme('border-color', 'color-error', 'error-message-icon-color');
 
-    padding-left: 58px;
+    & {
+      padding-left: 58px;
+    }
 
     &::before {
       @include theme('color', 'color-error', 'error-message-icon-color');

package/build/styleguide/sass/21-atoms/fieldset/_fieldset.scss

@@ -1,9 +1,14 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 .fieldset-wrapper fieldset,
 fieldset {
   @include theme('border-color', 'color-primary', 'fieldset-border-color');
 
-  max-width: 820px;
-  margin-bottom: 24px;
+  & {
+    max-width: 820px;
+    margin-bottom: 24px;
+  }
 
   .form-item {
     margin-bottom: 16px;
@@ -37,8 +42,10 @@ fieldset {
     .label-optional {
       @include optional-label();
 
-      position: relative;
-      z-index: 2;
+      & {
+        position: relative;
+        z-index: 2;
+      }
     }
 
     + .field-message,
@@ -61,16 +68,20 @@ fieldset {
       &::before {
         @include theme('background-color', 'color-zero', 'fieldset-legend-background-color');
 
-        height: 2px;
+        & {
+          height: 2px;
+        }
       }
 
       .legend-title {
-        @include semi-bold-text;
-        @include medium-text;
         @include theme('color', 'color-none', 'fieldset-legend-color');
         @include theme('background-color', 'color-primary', 'fieldset-legend-background-color');
 
-        padding: 1px 10px;
+        & {
+          @include semi-bold-text;
+          @include medium-text;
+          padding: 1px 10px;
+        }
       }
     }
   }
@@ -80,8 +91,10 @@ fieldset {
     fieldset:not(.webform-type-radios):not(.webform-type-checkboxes):not(.webform-type-webform-radios-other):not(.webform-type-webform-checkboxes-other) {
       @include theme('border-color', 'color-zero', 'inner-fieldset-border-color');
 
-      padding: 20px 20px 12px;
-      border: 1px dashed;
+      & {
+        padding: 20px 20px 12px;
+        border: 1px dashed;
+      }
 
       legend {
         display: flex;
@@ -92,15 +105,19 @@ fieldset {
           @include theme('background-color', 'color-none', 'inner-fieldset-legend-background-color');
           @include theme('border-color', 'color-zero', 'inner-fieldset-border-color');
 
-          height: 1px;
-          border-bottom: 1px dashed;
+          & {
+            height: 1px;
+            border-bottom: 1px dashed;
+          }
         }
 
         .legend-title {
           @include theme('color', 'color-zero', 'inner-fieldset-legend-color');
           @include theme('background-color', 'color-none', 'inner-fieldset-legend-background-color');
 
-          padding: 1px 10px;
+          & {
+            padding: 1px 10px;
+          }
         }
       }
     }
@@ -113,7 +130,9 @@ fieldset {
     legend {
       @include label;
 
-      max-width: 410px;
+      & {
+        max-width: 410px;
+      }
 
       &::before {
         display: none;
@@ -123,7 +142,9 @@ fieldset {
         @include theme('background-color', 'color-none');
         @include theme('color', 'color-primary');
 
-        padding-left: 0;
+        & {
+          padding-left: 0;
+        }
       }
     }
   }

package/build/styleguide/sass/21-atoms/figcaption/_figcaption.scss

@@ -1,3 +1,6 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 figcaption {
   @include accolade();
   @include medium-text;
@@ -8,6 +11,8 @@ figcaption {
   line-height: 175%;
 
   .full-image & {
+    margin: 0;
+
     &::before {
       display: none;
     }

package/build/styleguide/sass/21-atoms/file/_file.scss

@@ -1,3 +1,8 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../21-atoms/button/button-styling' as *;
+@use '../../21-atoms/button/css/button-secondary';
+
 .file {
   display: inline-flex;
   position: relative;

package/build/styleguide/sass/21-atoms/form-label/_form-label.scss

@@ -1,9 +1,14 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 label {
   @include label();
 
   .label-optional {
     @include optional-label();
 
-    margin: 0 0 3px 5px;
+    & {
+      margin: 0 0 3px 5px;
+    }
   }
 }

package/build/styleguide/sass/21-atoms/heading/_heading-styling.scss

@@ -0,0 +1,108 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
+h1,
+.h1,
+%h1,
+h2,
+.h2,
+%h2,
+h3,
+.h3,
+%h3,
+h4,
+.h4,
+%h4,
+h5,
+.h5,
+%h5 {
+  @include bold-text;
+
+  margin-top: 40px;
+  font-style: normal;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  // If the heading is preceded by any empty first-child element, strip its top
+  // margin.
+  *:first-child:empty + & {
+    margin-top: 0;
+  }
+
+  button {
+    display: flex;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-size: inherit;
+    font-style: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    cursor: pointer;
+
+    i {
+      font-size: inherit;
+    }
+  }
+}
+
+h1,
+.h1,
+%h1 {
+  margin-bottom: 20px;
+
+  & + h2,
+  & + .h2 {
+    margin-top: 0;
+  }
+}
+
+h2,
+.h2,
+%h2 {
+  margin-bottom: 15px;
+
+  @include mobile {
+    margin-bottom: 20px;
+  }
+
+  & + h3,
+  & + .h3 {
+    margin-top: 0;
+  }
+}
+
+h3,
+.h3,
+%h3 {
+  margin-bottom: 15px;
+
+  & + h4,
+  & + .h4 {
+    margin-top: 0;
+  }
+}
+
+h4,
+.h4,
+%h4 {
+  margin-bottom: 15px;
+
+  & + h5,
+  & + .h5 {
+    margin-top: 0;
+  }
+}
+
+h5,
+.h5,
+%h5 {
+  margin-bottom: 15px;
+
+  & + h6,
+  & + .h6 {
+    margin-top: 0;
+  }
+}

package/build/styleguide/sass/21-atoms/heading/_heading.scss

@@ -1,105 +1,7 @@
-h1,
-.h1,
-%h1,
-h2,
-.h2,
-%h2,
-h3,
-.h3,
-%h3,
-h4,
-.h4,
-%h4,
-h5,
-.h5,
-%h5 {
-  @include bold-text;
-
-  margin-top: 40px;
-  font-style: normal;
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  // If the heading is preceded by any empty first-child element, strip its top
-  // margin.
-  *:first-child:empty + & {
-    margin-top: 0;
-  }
-
-  button {
-    display: flex;
-    padding: 0;
-    border: 0;
-    background: none;
-    font-size: inherit;
-    font-style: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    cursor: pointer;
-
-    i {
-      font-size: inherit;
-    }
-  }
-}
-
-h1,
-.h1,
-%h1 {
-  margin-bottom: 20px;
-
-  & + h2,
-  & + .h2 {
-    margin-top: 0;
-  }
-}
-
-h2,
-.h2,
-%h2 {
-  margin-bottom: 15px;
-
-  @include mobile {
-    margin-bottom: 20px;
-  }
-
-  & + h3,
-  & + .h3 {
-    margin-top: 0;
-  }
-}
-
-h3,
-.h3,
-%h3 {
-  margin-bottom: 15px;
-
-  & + h4,
-  & + .h4 {
-    margin-top: 0;
-  }
-}
-
-h4,
-.h4,
-%h4 {
-  margin-bottom: 15px;
-
-  & + h5,
-  & + .h5 {
-    margin-top: 0;
-  }
-}
-
-h5,
-.h5,
-%h5 {
-  margin-bottom: 15px;
-
-  & + h6,
-  & + .h6 {
-    margin-top: 0;
-  }
-}
+@use 'css/background-title';
+@use 'css/heading-1';
+@use 'css/heading-2';
+@use 'css/heading-3';
+@use 'css/heading-4';
+@use 'css/overview-title';
+@use 'heading-styling';

package/build/styleguide/sass/21-atoms/heading/css/_background-title.scss

@@ -1,3 +1,6 @@
+@use '../../../00-settings/settings' as *;
+@use '../../../00-mixins/mixins' as *;
+
 h1,
 h2,
 h3,

package/build/styleguide/sass/21-atoms/heading/css/_heading-1.scss

@@ -1,3 +1,6 @@
+@use '../../../00-settings/settings' as *;
+@use '../../../00-mixins/mixins' as *;
+
 h1,
 .h1,
 %h1 {

package/build/styleguide/sass/21-atoms/heading/css/_heading-2.scss

@@ -1,11 +1,16 @@
+@use '../../../00-settings/settings' as *;
+@use '../../../00-mixins/mixins' as *;
+
 h2,
 .h2,
 %h2 {
-  @include theme('color', 'color-primary', 'heading-2-color');
   @include bold-text();
+  @include theme('color', 'color-primary', 'heading-2-color');
 
-  font-size: 1.6rem;
-  line-height: 2.1rem;
+  & {
+    font-size: 1.6rem;
+    line-height: 2.1rem;
+  }
 
   @include tablet {
     font-size: 1.9rem;

package/build/styleguide/sass/21-atoms/heading/css/_heading-3.scss

@@ -1,10 +1,15 @@
+@use '../../../00-settings/settings' as *;
+@use '../../../00-mixins/mixins' as *;
+
 h3,
 .h3,
 %h3 {
   @include theme('color', 'color-zero', 'heading-3-color');
 
-  font-size: 1.2rem;
-  line-height: 1.55rem;
+  & {
+    font-size: 1.2rem;
+    line-height: 1.55rem;
+  }
 
   @include tablet {
     font-size: 1.5rem;

package/build/styleguide/sass/21-atoms/heading/css/_heading-4.scss

@@ -1,11 +1,16 @@
+@use '../../../00-settings/settings' as *;
+@use '../../../00-mixins/mixins' as *;
+
 h4,
 .h4,
 %h4 {
-  @include theme('color', 'color-zero', 'heading-4-color');
   @include semi-bold-text;
+  @include theme('color', 'color-zero', 'heading-4-color');
 
-  font-size: .9rem;
-  line-height: 1.15rem;
+  & {
+    font-size: .9rem;
+    line-height: 1.15rem;
+  }
 
   @include tablet {
     font-size: 1rem;

package/build/styleguide/sass/21-atoms/heading/css/_overview-title.scss

@@ -1,3 +1,5 @@
+@use '../heading-styling';
+
 h1,
 h2,
 h3,

package/build/styleguide/sass/21-atoms/image/_image.scss

@@ -1,3 +1,6 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 img {
   max-width: 100%;
   height: auto;
@@ -11,7 +14,7 @@ figure {
 }
 
 .image-wrapper {
-  @include theme('background-color', 'color-tertiary--lighten-5', 'image-placeholder-background-color');
+  @include theme('background-color', 'color-tertiary-light', 'image-placeholder-background-color');
 
   position: relative;
   padding-bottom: calc(100% / 8 * 5); // Default ratio 8:5
@@ -20,7 +23,7 @@ figure {
   &:empty {
     &::before {
       @include theme('color', 'color-primary', 'image-spot-shadow');
-      $image-icon-svg: svg-icon('image', color('cyan'), 70, 70);
+      $image-icon-svg: svg-icon('image', coloring('cyan'), 70, 70);
 
       position: absolute;
       top: 0;
@@ -56,7 +59,7 @@ figure {
     min-height: 100%;
 
     &::before {
-      @include theme('background-color', 'color-zero--lighten-5', 'broken-image-background-color');
+      @include theme('background-color', 'color-zero-light', 'broken-image-background-color');
 
       display: block;
       position: absolute;
@@ -78,7 +81,7 @@ figure {
       transform: translate(-50%, -50%);
       background: url('#{$styleguide-dir}/img/iconfont/broken-link.svg') no-repeat top center;
       background-size: 1.2rem auto;
-      color: color('gray', -1);
+      color: coloring('gray', -1);
       font-size: .6rem;
       line-height: 1rem;
       text-align: center;

package/build/styleguide/sass/21-atoms/input/_input.scss

@@ -1,3 +1,7 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../11-base/forms/forms' as *;
+
 input[type="text"],
 input[type="number"],
 input[type="password"],
@@ -22,12 +26,12 @@ input[type="password"] {
     &,
     &:focus {
       padding-right: $field-icon-padding;
-      background-image: svg-as-background('lock-closed', color('gray'), 24, 24);
+      background-image: svg-as-background('lock-closed', coloring('gray'), 24, 24);
       background-repeat: no-repeat;
       background-position: right .75rem center;
 
       &:disabled {
-        background-image: svg-as-background('lock-closed', color('gray', -2), 24, 24);
+        background-image: svg-as-background('lock-closed', coloring('gray', -2), 24, 24);
       }
     }
   }
@@ -40,14 +44,20 @@ input[type=date] {
 
   &::-webkit-calendar-picker-indicator { // sass-lint:disable-line no-vendor-prefixes
     @include theme('background-color', 'button-secondary-background');
-    width: 1.2rem;
-    height: 1.2rem;
-    padding: .5rem;
-    background-image: svg-as-background('calendar', color('gray'), 30, 30);
+
+    & {
+      width: 1.2rem;
+      height: 1.2rem;
+      padding: .5rem;
+      background-image: svg-as-background('calendar', coloring('gray'), 30, 30);
+    }
 
     &:hover {
       @include theme('background-color', 'button-secondary-hover-background');
-      cursor: pointer;
+
+      & {
+        cursor: pointer;
+      }
     }
   }
 
@@ -63,13 +73,13 @@ input[type=date] {
   &:hover {
     // Unchecked and hovered.
     label::before {
-      @include theme('background-color', 'color-zero--lighten-5', 'radio-background-color-hover');
-      @include theme('border-color', 'color-zero--lighten-2', 'radio-border-color-hover');
+      @include theme('background-color', 'color-zero-ultralight', 'radio-background-color-hover');
+      @include theme('border-color', 'color-zero', 'radio-border-color-hover');
     }
 
     // Checked and hovered.
     input[type="radio"]:checked + label::before {
-      @include theme('background-color', 'color-zero--lighten-5', 'radio-background-color-hover-and-checked');
+      @include theme('background-color', 'color-zero-ultralight', 'radio-background-color-hover-and-checked');
       @include theme('border-color', 'color-primary', 'radio-border-color-hover-and-checked');
       @include theme('color', 'color-primary', 'radio-color-hover-and-checked');
     }
@@ -87,12 +97,12 @@ input[type=date] {
   &:hover {
     // Unchecked and hovered.
     label::before {
-      @include theme('background-color', 'color-zero--lighten-5', 'checkbox-background-color-hover');
+      @include theme('background-color', 'color-zero-ultralight', 'checkbox-background-color-hover');
     }
 
     // Checked and hovered.
     input[type="checkbox"]:checked + label::before {
-      @include theme('background-color', 'color-zero--lighten-5', 'checkbox-background-color-hover-and-checked');
+      @include theme('background-color', 'color-zero-ultralight', 'checkbox-background-color-hover-and-checked');
       @include theme('border-color', 'color-primary', 'checkbox-border-color-hover-and-checked');
       @include theme('color', 'color-zero', 'checkbox-color-hover-and-checked');
     }

package/build/styleguide/sass/21-atoms/input-submit/_input-submit.scss

@@ -1,5 +1,10 @@
+@use '../../21-atoms/button/css/button-primary';
+@use '../../21-atoms/button/css/button-secondary';
+
 input[type="submit"],
 button[type="submit"] {
+  @extend %button-secondary;
+
   &:not(.button-secondary):not(.button-success):not(.button-alert) {
     @extend %button-primary;
   }

package/build/styleguide/sass/21-atoms/input-textarea/_input-textarea.scss

@@ -1,3 +1,7 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../11-base/forms/forms' as *;
+
 textarea {
   @include field-base;
 

package/build/styleguide/sass/21-atoms/label/_label.scss

@@ -1,3 +1,6 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 .label {
   @include theme('background-color', 'color-none', 'label-background-color');
   @include small-text();
@@ -7,7 +10,7 @@
   justify-content: space-between;
   height: 30px;
   padding: 0 10px;
-  border: 1px solid color('gray');
+  border: 1px solid coloring('gray');
   text-decoration: none;
 
   &.success {