@orangesk/orange-design-system 2.0.0-beta.5 → 2.0.0-beta.6

package/src/components/Icon/styles/style.scss

@@ -29,6 +29,10 @@
         }
       }
     }
+
+    &--with-text-end {
+      margin-inline-end: convert.to-rem(5px);
+    }
   }
 
   use {

package/src/components/Link/styles/style.scss

@@ -16,7 +16,8 @@
     .osk-footer a,
     .mm-header a,
     .megamenu-header a,
-    .tag
+    .tag,
+    small a
   ),
   .link {
     @include mixins.base();

package/src/components/Section/styles/config.scss

@@ -1,38 +1,40 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
 
 $spacing: (
   default: (
     default: (
-      padding-top: space.get('large'),
-      padding-bottom: space.get('large'),
+      padding-top: space.get("large"),
+      padding-bottom: space.get("large"),
     ),
     md: (
-      padding-top: space.get('xlarge'),
-      padding-bottom: space.get('xlarge'),
-    )
+      padding-top: space.get("xlarge"),
+      padding-bottom: space.get("xlarge"),
+    ),
   ),
   small: (
     default: (
       padding-top: space.get(),
+      padding-bottom: space.get(),
     ),
     md: (
-      padding-top: space.get('large'),
-    )
+      padding-top: space.get("large"),
+      padding-bottom: space.get("large"),
+    ),
   ),
   xsmall: (
     default: (
-      padding-top: space.get('small'),
-      padding-bottom: space.get('small'),
+      padding-top: space.get("small"),
+      padding-bottom: space.get("small"),
     ),
     md: (
-      padding-top: space.get('small'),
-      padding-bottom: space.get('small'),
-    )
+      padding-top: space.get("small"),
+      padding-bottom: space.get("small"),
+    ),
   ),
 );
 
 $stuck-image-spacing: (
-  default: #{space.get('large') * -1},
-  md: #{space.get('xlarge') * -1},
+  default: #{space.get("large") * -1},
+  md: #{space.get("xlarge") * -1},
 );

package/src/styles/utilities/color.scss

@@ -117,6 +117,11 @@
     color: color.$black !important;
   }
 
+  .bg-accent {
+    background-color: var(--color-background-accent) !important;
+    color: var(--color-text-default) !important;
+  }
+
   .bg-accent1-blog {
     background-color: var(--color-background-accent1-blog) !important;
     color: var(--color-text-default) !important;

package/src/styles/utilities/layout.scss

@@ -151,6 +151,12 @@
       border: 0;
       aspect-ratio: 1 / 1;
     }
+
+    .aspect-ratio-3-2 {
+      max-width: 100%;
+      border: 0;
+      aspect-ratio: 3 / 2;
+    }
   }
 
   @include aspect-ratio-classes;
@@ -171,6 +177,9 @@
     .d-inline-flex {
       display: inline-flex;
     }
+    .flex-column {
+      flex-direction: column;
+    }
   }
 
   @include display-classes;