@ilo-org/styles 1.16.0 → 1.17.0

package/scss/components/_table.scss

@@ -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/_video.scss

@@ -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/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,