gent_styleguide 7.0.2 → 7.0.4

package/build/styleguide/sass/00-mixins/breakpoints/_breakpoints.scss

@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use "sass:meta";
 @use '../../00-settings/vars' as *;
 
 ////
@@ -6,22 +7,99 @@
 /// This file defines breakpoint related mixins / functions.
 ///
 /// @group breakpoints
-/// @author Sven Vandevenne
+/// @author Lennart Van Vaerenbergh
 ///
 
+/// Parse a single condition list like (min-width 768px) or (max-width 767px).
+/// Returns a map (op: min-width|max-width, val: <length>) or null.
+@function _bp-parse-cond($item) {
+  @if meta.type-of($item) == 'list' and list.length($item) == 2 {
+    $op: list.nth($item, 1);
+    $val: list.nth($item, 2);
+
+    @if $op == min-width {
+      @return ($val, null);
+    }
+    @else if $op == max-width {
+      @return (null, $val);
+    }
+  }
+
+  // Fallback ensures callers always receive a 2-item list.
+  @return (null, null);
+}
+
+/// Flexible breakpoint mixin.
+/// Supports:
+/// - @include breakpoint(768px) → min-width.
+/// - @include breakpoint(max-width 767px) or wrapped as ((max-width 767px)).
+/// - @include breakpoint((min-width 480px) (max-width 767px)) → range.
+/// Always end comment lines with a full stop.
 @mixin breakpoint($args...) {
-  @if list.length($args) == 1 {
-    @media screen and (min-width: list.nth($args, 1)) {
+  $argc: list.length($args);
+  $min: null;
+  $max: null;
+
+  // Case A: @include breakpoint(768px).
+  @if $argc == 1 and meta.type-of(list.nth($args, 1)) != 'list' {
+    $min: list.nth($args, 1);
+
+    // Case B: One list argument: either a single condition or a range of two conditions.
+  }
+  @else if $argc == 1 and meta.type-of(list.nth($args, 1)) == 'list' {
+    $a: list.nth($args, 1);
+
+    // Single condition like (max-width 767px).
+    $single-minmax: _bp-parse-cond($a);
+    @if list.nth($single-minmax, 1) != null or list.nth($single-minmax, 2) != null {
+      $min: list.nth($single-minmax, 1);
+      $max: list.nth($single-minmax, 2);
+
+    }
+    @else if list.length($a) == 2 {
+      // Range like ((min-width 480px) (max-width 767px)).
+      $c1: _bp-parse-cond(list.nth($a, 1));
+      $c2: _bp-parse-cond(list.nth($a, 2));
+      $min: if(list.nth($c1, 1) != null, list.nth($c1, 1), list.nth($c2, 1));
+      $max: if(list.nth($c1, 2) != null, list.nth($c1, 2), list.nth($c2, 2));
+
+      @if ($min == null and $max == null) or (meta.type-of($min) == 'string' and meta.type-of($max) == 'string') {
+        @error 'Invalid range for mixin breakpoint. Use ((min-width 480px) (max-width 1024px)).';
+      }
+
+    }
+    @else {
+      @error 'Invalid arguments for mixin breakpoint. Use (768px), (max-width 1024px), or ((min-width 480px) (max-width 1024px)).';
+    }
+
+    // Case C: Two positional args like: @include breakpoint(max-width 767px).
+  }
+  @else if $argc == 2 and list.nth($args, 1) == max-width {
+    $max: list.nth($args, 2);
+
+  }
+  @else {
+    @error 'Invalid arguments for mixin breakpoint. Use (768px), (max-width 1024px), or ((min-width 480px) (max-width 1024px)).';
+  }
+
+  // Emit exactly one @media block based on what we parsed.
+  @if $min != null and $max != null {
+    @media screen and (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  }
+  @else if $min != null {
+    @media screen and (min-width: $min) {
       @content;
     }
   }
-  @else if list.length($args) == 2 and list.nth($args, 1) == max-width {
-    @media screen and (max-width: list.nth($args, 2)) {
+  @else if $max != null {
+    @media screen and (max-width: $max) {
       @content;
     }
   }
   @else {
-    @error 'Invalid arguments for mixin breakpoints: use e.g. (768px) or (max-width 1024px)';
+    @error 'No valid breakpoint could be determined. Check your arguments.';
   }
 }
 

package/build/styleguide/sass/00-mixins/element-styles/_abstract-shadow.scss

@@ -36,12 +36,12 @@
     margin-#{$v-position}: $offset;
   }
   @else {
-    margin-#{$h-position}: 1rem;
-    margin-#{$v-position}: 1rem;
+    margin-#{$h-position}: 20px;
+    margin-#{$v-position}: 20px;
 
     @include tablet {
-      margin-#{$h-position}: 1.5rem;
-      margin-#{$v-position}: 1.5rem;
+      margin-#{$h-position}: 30px;
+      margin-#{$v-position}: 30px;
     }
   }
 
@@ -51,12 +51,12 @@
       #{$h-position}: -$offset;
     }
     @else {
-      #{$v-position}: -1rem;
-      #{$h-position}: -1rem;
+      #{$v-position}: -20px;
+      #{$h-position}: -20px;
 
       @include tablet {
-        #{$v-position}: -1.5rem;
-        #{$h-position}: -1.5rem;
+        #{$v-position}: -30px;
+        #{$h-position}: -30px;
       }
     }
 

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

@@ -12,6 +12,7 @@ $themes: (
   'blue': (
     // Required colors!
     'color-zero': coloring('gray'),
+    'color-zero-medium': coloring('gray-medium'),
     'color-zero-light': coloring('gray-light'),
     'color-zero-ultralight': coloring('gray-ultra-light'),
     'color-none': coloring('white'),

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

@@ -25,7 +25,7 @@ $field-icon-padding: 50px;
 /// @require svg-url
 ///
 @mixin field-base {
-  @include theme("border-color", "color-zero--lighten-2", "fields-border-color");
+  @include theme("border-color", "color-zero-medium", "fields-border-color");
   @include theme("background", "color-none", "fields-background");
   @include theme("color", "color-zero", "fields-color");
 
@@ -39,7 +39,7 @@ $field-icon-padding: 50px;
   &:disabled {
     padding-right: $field-icon-padding;
     border: 0;
-    background: coloring("gray", -5) $field-icon-position;
+    background: coloring("gray-light") $field-icon-position;
     background-image: svg-as-background(
       "lock-closed",
       coloring("gray", -2),
@@ -52,7 +52,7 @@ $field-icon-padding: 50px;
   &.success {
     padding-right: $field-icon-padding;
     border: 1px solid coloring("green");
-    background: coloring("green-pastel", -4) $field-icon-position;
+    background: coloring("green-light") $field-icon-position;
     background-image: svg-as-background(
       "checkmark-circle",
       coloring("green"),
@@ -62,7 +62,7 @@ $field-icon-padding: 50px;
 
     &:focus {
       border-color: coloring("green");
-      background: coloring("green-pastel", -4) $field-icon-position;
+      background: coloring("green-light") $field-icon-position;
       background-image: svg-as-background(
         "checkmark-circle",
         coloring("green"),
@@ -75,7 +75,7 @@ $field-icon-padding: 50px;
   &.error {
     padding-right: $field-icon-padding;
     border: 1px solid coloring("red");
-    background: coloring("red", -6) $field-icon-position;
+    background: coloring("red-light") $field-icon-position;
     background-image: svg-as-background(
       "exclamation-circle",
       coloring("red"),
@@ -85,7 +85,7 @@ $field-icon-padding: 50px;
 
     &:focus {
       border-color: coloring("red");
-      background: coloring("red", -6) $field-icon-position;
+      background: coloring("red-light") $field-icon-position;
       background-image: svg-as-background(
         "exclamation-circle",
         coloring("red"),
@@ -188,7 +188,7 @@ $field-icon-padding: 50px;
         );
         @include theme(
           "border-color",
-          "color-zero--lighten-2",
+          "color-zero-medium",
           "checkbox-border-color"
         );
       }
@@ -212,7 +212,7 @@ $field-icon-padding: 50px;
         );
         @include theme(
           "border-color",
-          "color-zero--lighten-2",
+          "color-zero-medium",
           "radio-border-color"
         );
 

package/build/styleguide/sass/21-atoms/button/css/_button-secondary-alert.scss

@@ -19,7 +19,7 @@
   };
 
   & {
-    border: 2px solid coloring('red', -2);
+    border: 2px solid coloring('red');
     background-color: coloring('white');
     color: coloring('red', 1);
   }

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

@@ -97,7 +97,7 @@
     }
 
     a {
-      @include link-background('color-zero', 'color-success-light--darken-1', 'success-message-link-border-color', 'success-message-link-background');
+      @include link-background('color-zero', 'color-success-light', 'success-message-link-border-color', 'success-message-link-background');
     }
   }
 
@@ -115,7 +115,7 @@
     }
 
     a {
-      @include link-background('color-zero', 'color-error-light--darken-1', 'error-message-link-border-color', 'error-message-link-background');
+      @include link-background('color-zero', 'color-error-light', 'error-message-link-border-color', 'error-message-link-background');
     }
   }
 }

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

@@ -1,4 +1,9 @@
+// Use this file to @use it in other files, not the heading-styling file.
+
+// General heading styling.
 @use 'heading-styling';
+
+// Override heading overrides.
 @use 'css/background-title';
 @use 'css/heading-1';
 @use 'css/heading-2';

package/build/styleguide/sass/31-molecules/status-message/_status-message.scss

@@ -55,7 +55,7 @@
     }
 
     a {
-      @include link-background('color-zero', 'color-success-light--darken-1');
+      @include link-background('color-zero', 'color-success-light');
     }
   }
 
@@ -69,7 +69,7 @@
     }
 
     a {
-      @include link-background('color-zero', 'color-error-light--darken-1');
+      @include link-background('color-zero', 'color-error-light');
     }
   }
 

package/build/styleguide/sass/41-organisms/footer/css/_social-list.scss

@@ -22,7 +22,7 @@
       &[download]:not(.button),
       &[href^="http://"]:not(.button):not([href*="gent.be"]),
       &[href^="https://"]:not(.button):not([href*="gent.be"]) {
-        @include theme('background-color', 'color-quaternary--lighten-2', 'button-secondary-background');
+        @include theme('background-color', 'color-tertiary-pastel', 'button-secondary-background');
         @include theme('color', 'color-zero', 'button-secondary-color');
 
         & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gent_styleguide",
-  "version": "7.0.2",
+  "version": "7.0.4",
   "description": "Styleguide Stad.Gent",
   "devDependencies": {
     "@babel/core": "^7.20.12",