@ilo-org/styles 1.16.0 → 1.17.1

package/scss/components/_table.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--table {
   padding: spacing(20);
@@ -60,12 +60,8 @@
         pointer-events: auto;
         position: relative;
 
+        &:before,
         &:after {
-          background-color: var(--ilo-color-light-container-bg-disabled);
-          background-image: url("#{colortodataurlicon('chevron_down', rgba(35, 0, 80, 1))}");
-          background-position: center center;
-          background-repeat: no-repeat;
-          background-size: 75%;
           content: "";
           display: block;
           height: px-to-rem(24px);
@@ -76,6 +72,19 @@
           transform: translateY(-50%);
         }
 
+        &:before {
+          background-color: var(--ilo-color-light-container-bg-disabled);
+        }
+
+        &:after {
+          @include icon(
+            "chevron_down",
+            var(--ilo-color-light-icon-brand),
+            75%,
+            center center
+          );
+        }
+
         &:hover {
           background-color: var(--ilo-color-light-container-bg-subtle);
           border-bottom: px-to-rem(2px) solid
@@ -83,9 +92,17 @@
           color: var(--ilo-color-light-action-hover);
           cursor: pointer;
 
-          &:after {
+          &:before {
             background-color: var(--ilo-color-light-container-bg-subtle);
-            background-image: url("#{colortodataurlicon('chevron_down', rgba(190, 220, 250, 1))}");
+          }
+
+          &:after {
+            @include icon(
+              "chevron_down",
+              var(--ilo-color-dark-icon-brand),
+              75%,
+              center center
+            );
           }
         }
 

package/scss/components/_tableofcontents.scss

@@ -1,6 +1,6 @@
 @use "../animations" as *;
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--table-of-contents {
   background-color: var(--ilo-color-light-container-bg-disabled);

package/scss/components/_tabs.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--tabs {
   &__theme__light {

package/scss/components/_tag.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--tags {
   display: flex;

package/scss/components/_textarea.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--textarea {
   appearance: none;

package/scss/components/_textcard.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--card {
   $self: &;

package/scss/components/_toggle.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../animations";
+@use "../animations" as *;
 
 .ilo--input--toggle {
   $c: &;

package/scss/components/_tooltip.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--tooltip {
   $c: &;

package/scss/components/_video.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "./image";
-@import "../mixins";
+@use "./image" as *;
+@use "../mixins" as *;
 
 // ======================================
 // Video Button
@@ -15,23 +15,35 @@
   }
 
   $width: $height;
-  $icon-color-default: rgba(237, 240, 242, 1);
-  $icon-color-hover: rgba(30, 45, 190, 1);
 
   cursor: pointer;
   border: none;
   background-color: var(--ilo-color-light-container-bg-inverse);
   width: $box;
   height: $box;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: $width $height;
-  @include dataurlicon($name, $icon-color-default);
+  position: relative;
+
+  &::after {
+    @include icon(
+      $name,
+      var(--ilo-color-light-icon-disabled),
+      $width $height,
+      center center
+    );
+    content: "";
+    display: block;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
 
   &:hover,
   &:focus {
     background-color: var(--ilo-color-light-feedback-info-light);
-    @include dataurlicon($name, $icon-color-hover);
+
+    &::after {
+      background-color: var(--ilo-color-light-action-hover);
+    }
   }
 }
 
@@ -125,8 +137,8 @@
             color: var(--ilo-color-light-action-hover);
           }
 
-          .vjs-play-control {
-            @include dataurlicon("triangle_right", rgba(30, 45, 190, 1));
+          .vjs-play-control::after {
+            background-color: var(--ilo-color-light-action-hover);
           }
         }
 
@@ -239,7 +251,10 @@
       &:hover > .vjs-menu-button,
       &:focus-within > .vjs-menu-button {
         background-color: var(--ilo-color-light-feedback-info-light);
-        @include dataurlicon("closed_captions", rgba(30, 45, 190, 1));
+
+        &::after {
+          background-color: var(--ilo-color-light-action-hover);
+        }
       }
 
       .vjs-menu {
@@ -430,10 +445,12 @@
             @include typography("body-xsmall");
 
             &:after {
-              background-position: top left;
-              background-repeat: no-repeat;
-              background-size: contain;
-              @include dataurlicon("caret_down", rgba(45, 45, 45, 1));
+              @include icon(
+                "caret_down",
+                var(--ilo-color-light-icon-default),
+                contain,
+                top left
+              );
               content: "";
               height: px-to-rem(12px);
               position: absolute;

package/scss/components/navigation/_nav-compact.scss

@@ -1,7 +1,7 @@
 @use "../../icons" as *;
 @use "../../functions" as *;
-@import "../../mixins";
-@import "../../config";
+@use "../../mixins" as *;
+@use "../../config" as *;
 
 .ilo--subsite-nav-compact {
   position: relative;

package/scss/components/navigation/_nav-complex.scss

@@ -1,8 +1,8 @@
 @use "../../icons" as *;
 @use "../../functions" as *;
 @use "./internal/nav-shared" as *;
-@import "../../mixins";
-@import "../../config";
+@use "../../mixins" as *;
+@use "../../config" as *;
 
 .ilo--subsite-nav-complex {
   @include nav-base;

package/scss/components/navigation/_nav-main.scss

@@ -1,8 +1,8 @@
 @use "../../icons" as *;
 @use "../../functions" as *;
 @use "./internal/nav-shared" as *;
-@import "../../mixins";
-@import "../../config";
+@use "../../mixins" as *;
+@use "../../config" as *;
 
 .ilo--main-nav {
   @include nav-base;

package/scss/components/navigation/internal/_nav-dropdown.scss

@@ -1,7 +1,7 @@
 @use "../../../icons" as *;
 @use "../../../functions" as *;
-@import "../../../mixins";
-@import "../../../config";
+@use "../../../mixins" as *;
+@use "../../../config" as *;
 
 .ilo--nav-dropdown {
   position: absolute;

package/scss/components/navigation/internal/_nav-grid.scss

@@ -1,7 +1,7 @@
 @use "../../../icons" as *;
 @use "../../../functions" as *;
-@import "../../../mixins";
-@import "../../../config";
+@use "../../../mixins" as *;
+@use "../../../config" as *;
 
 .ilo--nav-menu-grid {
   display: flex;

package/scss/components/navigation/internal/_nav-menu.scss

@@ -1,8 +1,8 @@
 @use "../../../icons" as *;
 @use "../../../functions" as *;
-@import "../../../mixins";
-@import "../../../config";
-@import "../../../animations";
+@use "../../../mixins" as *;
+@use "../../../config" as *;
+@use "../../../animations" as *;
 
 .ilo--nav-menu {
   display: flex;

package/scss/components/navigation/internal/_nav-shared.scss

@@ -1,7 +1,7 @@
 @use "../../../icons" as *;
 @use "../../../functions" as *;
-@import "../../../mixins";
-@import "../../../config";
+@use "../../../mixins" as *;
+@use "../../../config" as *;
 
 // Base navigation container
 @mixin nav-base {

package/scss/components/navigation/internal/mobile/_nav-mobile-drawer.scss

@@ -1,7 +1,7 @@
 @use "../../../../icons" as *;
 @use "../../../../functions" as *;
-@import "../../../../mixins";
-@import "../../../../config";
+@use "../../../../mixins" as *;
+@use "../../../../config" as *;
 
 .ilo--nav-mobile-drawer {
   position: fixed;

package/scss/components/navigation/internal/mobile/_nav-mobile-menu.scss

@@ -1,7 +1,7 @@
 @use "../../../../icons" as *;
 @use "../../../../functions" as *;
-@import "../../../../mixins";
-@import "../../../../config";
+@use "../../../../mixins" as *;
+@use "../../../../config" as *;
 
 .ilo--nav-mobile-menu {
   display: flex;

package/scss/components/navigation/internal/mobile/_nav-mobile.scss

@@ -1,7 +1,7 @@
 @use "../../../../icons" as *;
 @use "../../../../functions" as *;
-@import "../../../../mixins";
-@import "../../../../config";
+@use "../../../../mixins" as *;
+@use "../../../../config" as *;
 
 .ilo--nav-mobile {
   &__branding {

package/scss/components/photogallery/_expandable-caption.scss

@@ -1,7 +1,7 @@
 @use "../../icons" as *;
 @use "../../functions" as *;
-@import "../../mixins";
-@import "../../config";
+@use "../../mixins" as *;
+@use "../../config" as *;
 
 .ilo--photo-gallery-expandable-caption {
   position: relative;

package/scss/components/photogallery/_lightbox.scss

@@ -1,7 +1,7 @@
 @use "../../icons" as *;
 @use "../../functions" as *;
-@import "../../mixins";
-@import "../../config";
+@use "../../mixins" as *;
+@use "../../config" as *;
 
 .ilo--lightbox {
   position: fixed;

package/scss/components/photogallery/_lightboxgallery.scss

@@ -1,7 +1,7 @@
 @use "../../icons" as *;
 @use "../../functions" as *;
-@import "../../mixins";
-@import "../../config";
+@use "../../mixins" as *;
+@use "../../config" as *;
 
 .ilo--lightbox-gallery {
   display: flex;

package/scss/components/photogallery/_photogallery-controls.scss

@@ -1,7 +1,7 @@
 @use "../../icons" as *;
 @use "../../functions" as *;
-@import "../../mixins";
-@import "../../config";
+@use "../../mixins" as *;
+@use "../../config" as *;
 
 .ilo--photo-gallery-controls {
   display: flex;

package/scss/components/photogallery/_photogallery-thumbnails.scss

@@ -1,7 +1,7 @@
 @use "../../icons" as *;
 @use "../../functions" as *;
-@import "../../mixins";
-@import "../../config";
+@use "../../mixins" as *;
+@use "../../config" as *;
 
 .ilo--photo-gallery-thumbnails {
   --ilo-photo_gallery-thumbnails-width: 90px;

package/scss/components/photogallery/_photogallery.scss

@@ -1,7 +1,7 @@
 @use "../../icons" as *;
 @use "../../functions" as *;
-@import "../../mixins";
-@import "../../config";
+@use "../../mixins" as *;
+@use "../../config" as *;
 
 .ilo--photo-gallery {
   --ilo-photo_gallery-target-height: 210px;

package/scss/theme/_breakpoints.scss

@@ -1,6 +1,7 @@
-/**
-  * Breakpoints are defined in scss because they can't be referenced as a css variables
-  */
+// Breakpoints are defined in scss because they can't be referenced as css
+// variables. This file is part of the helpers closure, which must not emit css
+// into consumer stylesheets.
+
 $breakpoints-foundation: (
   xs: 320px,
   sm: 414px,

package/scss/theme/_foundation.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../functions" as *;
 @use "./breakpoints" as *;
 @use "./typography" as *;
@@ -278,12 +279,12 @@
   /**
     * Sizing
     */
-  --ilo-breakpoint-xs: #{map-get($breakpoints-foundation, "xs")};
-  --ilo-breakpoint-sm: #{map-get($breakpoints-foundation, "sm")};
-  --ilo-breakpoint-md: #{map-get($breakpoints-foundation, "md")};
-  --ilo-breakpoint-lg: #{map-get($breakpoints-foundation, "lg")};
-  --ilo-breakpoint-xl: #{map-get($breakpoints-foundation, "xl")};
-  --ilo-breakpoint-xxl: #{map-get($breakpoints-foundation, "xxl")};
+  --ilo-breakpoint-xs: #{map.get($breakpoints-foundation, "xs")};
+  --ilo-breakpoint-sm: #{map.get($breakpoints-foundation, "sm")};
+  --ilo-breakpoint-md: #{map.get($breakpoints-foundation, "md")};
+  --ilo-breakpoint-lg: #{map.get($breakpoints-foundation, "lg")};
+  --ilo-breakpoint-xl: #{map.get($breakpoints-foundation, "xl")};
+  --ilo-breakpoint-xxl: #{map.get($breakpoints-foundation, "xxl")};
   --ilo-border-radius: calc(#{px-to-rem(2)} * var(--ilo-scale));
 
   /**