@eui/styles 23.0.0-alpha.5 → 23.0.0-alpha.6

package/dist/assets/ecl/icons/svg/question.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" ><path d="M23.9697 3C35.5797 3 44.9697 12.39 44.9697 24C44.9697 35.61 35.5797 45 23.9697 45C12.3598 44.9999 2.96973 35.5799 2.96973 24C2.96973 12.4201 12.3598 3.00013 23.9697 3ZM23.9697 6C14.0398 6.00013 5.96973 14.0701 5.96973 24C5.96973 33.9299 14.0398 41.9999 23.9697 42C33.8997 42 41.9697 33.93 41.9697 24C41.9697 14.07 33.8997 6 23.9697 6ZM23.9697 32.04C24.5997 32.04 25.2307 32.3098 25.6807 32.7598C26.1305 33.2097 26.4003 33.8399 26.4004 34.4697C26.4004 34.9497 26.2505 35.4003 25.9805 35.8203C25.7105 36.2402 25.3502 36.5397 24.9004 36.7197C24.4504 36.9297 23.9702 36.9601 23.4902 36.8701C23.0402 36.7801 22.5898 36.54 22.2598 36.21C21.93 35.8801 21.6906 35.4602 21.6006 34.9805C21.5106 34.5005 21.5701 34.0203 21.75 33.5703C21.93 33.1203 22.2604 32.7602 22.6504 32.4902C23.0403 32.2203 23.5201 32.0704 24 32.0703L23.9697 32.04ZM24.0303 12.7197C28.4701 12.7198 32.1003 15.9597 32.1006 19.9795C32.1006 23.4894 29.3403 26.3998 25.6504 27.0898V27.2402C25.6503 27.6601 25.4699 28.08 25.1699 28.3799C24.87 28.6798 24.4502 28.8603 24.0303 28.8604C23.6104 28.8604 23.1906 28.6798 22.8906 28.3799C22.5907 28.08 22.4102 27.6601 22.4102 27.2402V25.6201C22.4102 25.2001 22.5906 24.7795 22.8906 24.4795C23.1906 24.1798 23.6105 24 24.0303 24C26.7301 24 28.8905 22.1701 28.8906 19.9502C28.8906 17.7302 26.7302 15.9004 24.0303 15.9004C21.3303 15.9004 19.1699 17.7302 19.1699 19.9502V20.7598C19.1699 21.1798 18.9904 21.6004 18.6904 21.9004C18.3904 22.2003 17.9698 22.3799 17.5498 22.3799C17.13 22.3798 16.7101 22.2002 16.4102 21.9004C16.1102 21.6004 15.9307 21.1798 15.9307 20.7598V19.9502C15.9307 15.9602 19.5601 12.6905 24 12.6904L24.0303 12.7197Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M23.9697 3C35.5797 3 44.9697 12.39 44.9697 24C44.9697 35.61 35.5797 45 23.9697 45C12.3598 44.9999 2.96973 35.5799 2.96973 24C2.96973 12.4201 12.3598 3.00013 23.9697 3ZM23.9697 6C14.0398 6.00013 5.96973 14.0701 5.96973 24C5.96973 33.9299 14.0398 41.9999 23.9697 42C33.8997 42 41.9697 33.93 41.9697 24C41.9697 14.07 33.8997 6 23.9697 6ZM23.9697 32.04C24.5997 32.04 25.2307 32.3098 25.6807 32.7598C26.1305 33.2097 26.4003 33.8399 26.4004 34.4697C26.4004 34.9497 26.2505 35.4003 25.9805 35.8203C25.7105 36.2402 25.3502 36.5397 24.9004 36.7197C24.4504 36.9297 23.9702 36.9601 23.4902 36.8701C23.0402 36.7801 22.5898 36.54 22.2598 36.21C21.93 35.8801 21.6906 35.4602 21.6006 34.9805C21.5106 34.5005 21.5701 34.0203 21.75 33.5703C21.93 33.1203 22.2604 32.7602 22.6504 32.4902C23.0403 32.2203 23.5201 32.0704 24 32.0703L23.9697 32.04ZM24.0303 12.7197C28.4701 12.7198 32.1003 15.9597 32.1006 19.9795C32.1006 23.4894 29.3403 26.3998 25.6504 27.0898V27.2402C25.6503 27.6601 25.4699 28.08 25.1699 28.3799C24.87 28.6798 24.4502 28.8603 24.0303 28.8604C23.6104 28.8604 23.1906 28.6798 22.8906 28.3799C22.5907 28.08 22.4102 27.6601 22.4102 27.2402V25.6201C22.4102 25.2001 22.5906 24.7795 22.8906 24.4795C23.1906 24.1798 23.6105 24 24.0303 24C26.7301 24 28.8905 22.1701 28.8906 19.9502C28.8906 17.7302 26.7302 15.9004 24.0303 15.9004C21.3303 15.9004 19.1699 17.7302 19.1699 19.9502V20.7598C19.1699 21.1798 18.9904 21.6004 18.6904 21.9004C18.3904 22.2003 17.9698 22.3799 17.5498 22.3799C17.13 22.3798 16.7101 22.2002 16.4102 21.9004C16.1102 21.6004 15.9307 21.1798 15.9307 20.7598V19.9502C15.9307 15.9602 19.5601 12.6905 24 12.6904L24.0303 12.7197Z"/></svg>

package/dist/assets/ecl/networks/sprite.svg

@@ -34,6 +34,7 @@
   <symbol id="vimeo" viewBox="0 0 48 48"><path fill="currentColor" d="M37.9441 3C40.0161 3.448 41.8361 4.344 43.1801 5.968C44.1881 7.172 44.6081 8.46 45.0001 9.944V38C44.6921 38.924 44.5241 39.848 44.0481 40.716C42.8161 43.012 40.5481 44.412 38.0281 44.944H9.86008C9.24408 44.664 8.54408 44.58 7.92808 44.328C6.30408 43.656 4.62408 42.088 3.86808 40.52C3.47608 39.736 3.33608 38.896 3.02808 38.084V9.86C3.47608 8.432 3.92408 7.088 4.90408 5.912C6.22008 4.316 7.92808 3.476 9.97208 3H37.9441ZM20.4441 14.844C18.7081 13.192 16.6641 14.816 15.2361 15.964C13.9761 16.972 12.8841 18.204 11.5961 19.184L11.5121 19.38C11.9041 19.632 12.3241 20.808 12.8001 20.612C13.7241 20.248 14.2281 18.932 15.2641 20.164C16.7201 21.872 17.6441 27.836 18.4841 30.272C19.6601 33.716 21.5081 35.228 24.9241 33.044C28.3401 30.86 34.2201 22.992 34.6681 19.072C34.9201 16.72 34.3881 14.144 31.6161 13.892C27.9481 13.584 25.6521 16.02 24.8121 19.352C27.9761 18.26 28.7321 19.996 27.5281 22.712C27.1361 23.58 25.4281 26.464 24.5881 26.744C23.9441 26.968 23.6641 26.464 23.4121 25.96C22.0401 23.244 22.1801 16.496 20.4441 14.844Z" /><path fill="#fff" d="M20.4441 14.844C22.1801 16.496 22.0401 23.244 23.4121 25.96C23.6641 26.464 23.9441 26.968 24.5881 26.744C25.4281 26.464 27.1361 23.58 27.5281 22.712C28.7601 19.996 28.0041 18.232 24.8121 19.352C25.6521 16.02 27.9761 13.584 31.6161 13.892C34.3881 14.144 34.9201 16.72 34.6681 19.072C34.2201 22.992 28.2281 30.916 24.9241 33.044C21.6201 35.172 19.6601 33.744 18.4841 30.272C17.6721 27.836 16.7201 21.872 15.2641 20.164C14.2281 18.932 13.7241 20.248 12.8001 20.612C12.3241 20.808 11.8761 19.632 11.5121 19.38L11.5961 19.184C12.8841 18.204 13.9761 16.972 15.2361 15.964C16.6641 14.816 18.7361 13.192 20.4441 14.844Z" /></symbol>
   <symbol id="weibo" viewBox="0 0 48 48"><g><path fill="#fff" d="M5.236 30.444c0 5.11 6.672 9.252 14.898 9.252 8.226 0 14.898-4.142 14.898-9.252s-6.672-9.252-14.898-9.252c-8.226 0-14.898 4.142-14.898 9.252Z"/><path fill="currentColor" d="M20.486 38.944c-7.286.72-13.575-2.568-14.048-7.332-.473-4.771 5.052-9.216 12.33-9.936 7.285-.72 13.574 2.567 14.041 7.332.48 4.77-5.045 9.222-12.323 9.936ZM35.05 23.11c-.62-.188-1.045-.309-.723-1.12.704-1.763.778-3.283.013-4.372-1.427-2.034-5.336-1.925-9.817-.055 0 0-1.409.612-1.044-.497.686-2.21.582-4.056-.486-5.128-2.428-2.427-8.894.092-14.437 5.62C4.41 21.693 2 26.083 2 29.88c0 7.253 9.33 11.667 18.456 11.667 11.965 0 19.924-6.933 19.924-12.437.007-3.329-2.805-5.219-5.33-6"/><path fill="currentColor" d="M42.998 9.834c-2.89-3.197-7.152-4.414-11.085-3.578a1.68 1.68 0 1 0 .703 3.282 8.288 8.288 0 0 1 7.88 2.543 8.235 8.235 0 0 1 1.731 8.076c-.285.884.2 1.828 1.088 2.113.886.285 1.833-.2 2.118-1.078v-.006A11.564 11.564 0 0 0 43 9.834"/><path fill="currentColor" d="M38.56 13.83a5.663 5.663 0 0 0-5.398-1.737 1.452 1.452 0 0 0-1.117 1.72c.17.78.94 1.277 1.718 1.107.936-.2 1.955.092 2.642.848a2.76 2.76 0 0 1 .577 2.707 1.45 1.45 0 0 0 2.762.889 5.644 5.644 0 0 0-1.183-5.534"/><path fill="currentColor" d="M20.887 30.31c-.256.436-.82.642-1.258.46-.437-.176-.57-.666-.322-1.09.256-.424.796-.63 1.226-.46.437.158.595.648.352 1.09m-2.325 2.968c-.704 1.12-2.217 1.61-3.351 1.095-1.117-.508-1.452-1.81-.746-2.906.698-1.09 2.155-1.574 3.284-1.102 1.14.491 1.505 1.78.814 2.913m2.647-7.932c-3.466-.902-7.382.823-8.888 3.87-1.537 3.105-.049 6.556 3.449 7.682 3.63 1.17 7.904-.623 9.391-3.971 1.47-3.282-.364-6.654-3.952-7.58Z"/></g></symbol>
   <symbol id="whatsapp" viewBox="0 0 58 58"><g><path fill="currentColor" d="M0,58l4.988-14.963C2.457,38.78,1,33.812,1,28.5C1,12.76,13.76,0,29.5,0S58,12.76,58,28.5 S45.24,57,29.5,57c-4.789,0-9.299-1.187-13.26-3.273L0,58z"/><path fill="#ffffff" d="M47.683,37.985c-1.316-2.487-6.169-5.331-6.169-5.331c-1.098-0.626-2.423-0.696-3.049,0.42 c0,0-1.577,1.891-1.978,2.163c-1.832,1.241-3.529,1.193-5.242-0.52l-3.981-3.981l-3.981-3.981c-1.713-1.713-1.761-3.41-0.52-5.242 c0.272-0.401,2.163-1.978,2.163-1.978c1.116-0.627,1.046-1.951,0.42-3.049c0,0-2.844-4.853-5.331-6.169 c-1.058-0.56-2.357-0.364-3.203,0.482l-1.758,1.758c-5.577,5.577-2.831,11.873,2.746,17.45l5.097,5.097l5.097,5.097 c5.577,5.577,11.873,8.323,17.45,2.746l1.758-1.758C48.048,40.341,48.243,39.042,47.683,37.985z"/></g></symbol>
+  <symbol id="wsocial" viewBox="0 0 55.24 49.87"><polygon points="12.3 6.85 0 6.85 18.3 49.75 24.92 38.51 12.3 6.85"/><path d="M46.51,0h-3.99l-7.54,26.05-.93-3.04c-.45-1.48-1.76-2.27-3.09-2.27-1.03,0-2.06.48-2.71,1.5l-3.02,4.78,9.74,22.86L55.24,0h-8.73Z"/><path d="M34.98,49.87c.4,0,.76,0,1.09-.01-.32.02-.68.01-1.09.01Z"/><path d="M25.08,11.79l-3.78,5.98,3.46,8.12,2.65-4.19c.78-1.23,2.1-1.97,3.55-1.97.84,0,1.62.25,2.29.68l-2.41-7.85c-.8-2.62-4.31-3.09-5.77-.77Z"/></symbol>
   <symbol id="x" viewBox="0 0 24 24"><g><path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></symbol>
   <symbol id="yahoomail" viewBox="0 0 1600 1200"><path transform="matrix(1.75,0,0,1.75,-105,-262.5)" d="M937.3 231H824.7c-15.5 0-27.7 12.6-27.1 28.1l13.1 366h84.4l65.4-366.4c2.7-15.2-7.8-27.7-23.2-27.7zm-77.4 450.4h-14.1c-27.1 0-49.2 22.2-49.2 49.3v14.1c0 27.1 22.2 49.3 49.2 49.3h14.1c27.1 0 49.2-22.2 49.2-49.3v-14.1c0-27.1-22.2-49.3-49.2-49.3zM402.6 231C216.2 231 65 357 65 512.5S216.2 794 402.6 794s337.6-126 337.6-281.5S589.1 231 402.6 231zm225.2 225.2h-65.3L458.9 559.8v65.3h84.4v56.3H318.2v-56.3h84.4v-65.3L242.9 399.9h-37v-56.3h168.5v56.3h-37l93.4 93.5 28.1-28.1V400h168.8v56.2z" fill="currentColor"/></symbol>
   <symbol id="yammer" viewBox="0 0 48 48"><path fill="currentColor" fill-rule="evenodd" d="M5.38 6.5c-.29 0-.58.04-.87.15-1.18.43-1.78 1.68-1.39 2.83l9.56 22.68c-1.34 3.69-2.58 5.42-5.44 5.42-.28 0-1.24-.06-1.3-.06-.92-.05-1.78.54-2.03 1.44-.28 1.02.33 2.08 1.38 2.37.76.13 1.53.18 2.23.18 5.26 0 7-2.95 8.74-7.25L26.53 9.34c.37-1.13-.28-2.34-1.43-2.7-1.13-.35-2.33.23-2.74 1.3l-7.21 18.55h-.11L7.44 7.8c-.38-.79-1.19-1.28-2.06-1.3m33.16 5.25c-.23 0-.46.02-.69.09-.08.04-.16.08-.25.13-1.43.8-11.11 7.64-10.02 8.41s7.7-2.24 12.23-4.74c.86-.69 1.07-1.94.47-2.88-.4-.63-1.06-.98-1.75-1Zm4.47 10.51c-1.64 0-13.46 1.32-12.86 2.55.59 1.22 7.86 1.81 13.05 1.81 1.09-.19 1.87-1.19 1.8-2.34a2.21 2.21 0 0 0-1.7-2.02h-.28Zm-14.77 6.99c-.29-.01-.52.02-.65.12-1.09.77 8.59 7.61 10.02 8.41.09.05.17.09.25.13.9.26 1.9-.08 2.43-.92.6-.95.38-2.19-.47-2.88-3.96-2.19-9.52-4.76-11.57-4.86Z"/></symbol>

package/dist/assets/ecl/networks/svg/wsocial.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.24 49.87">
+  <polygon points="12.3 6.85 0 6.85 18.3 49.75 24.92 38.51 12.3 6.85"/>
+  <path d="M46.51,0h-3.99l-7.54,26.05-.93-3.04c-.45-1.48-1.76-2.27-3.09-2.27-1.03,0-2.06.48-2.71,1.5l-3.02,4.78,9.74,22.86L55.24,0h-8.73Z"/>
+  <path d="M34.98,49.87c.4,0,.76,0,1.09-.01-.32.02-.68.01-1.09.01Z"/>
+  <path d="M25.08,11.79l-3.78,5.98,3.46,8.12,2.65-4.19c.78-1.23,2.1-1.97,3.55-1.97.84,0,1.62.25,2.29.68l-2.41-7.85c-.8-2.62-4.31-3.09-5.77-.77Z"/>
+</svg>

package/dist/assets/ecl/networks-color/svg/wsocial.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 73" width="100%" height="100%">
+  <rect width="73" height="73" rx="15" fill="#28004e"/>
+  <polygon points="21.6 17.2 9.3 17.2 27.6 60.1 34.2 48.9" fill="#fff"/>
+  <g fill="#61a38b">
+    <polygon points="36.8 37.9 46.5 37 54 11.6 66.7 11.6 46.5 60.3 36.8 37.9"/>
+    <path d="M39.1 37.7l6.2-.6c.7-.1 1.3-.5 1.5-1.2l7.3-24.3c.2-.7.9-1.2 1.6-1.2h8.9c1.2 0 2 1.2 1.6 2.4L46.9 59.2c-.5 1.2-1.4 1.1-2.7 1.1l-6.6-20.2c-.4-1 .3-2.3 1.5-2.4z"/>
+  </g>
+  <path d="M30.6 28.2l3.8-6c1.5-2.3 5-1.8 5.8.8l4.1 13.5 5.6-19.2h11.9L44.4 60.3 30.6 28.2z" fill="#fff"/>
+  <path d="M34.6 37.3l3-4.7c1.5-2.3 5-1.8 5.8.8l.9 3 7.5-26h12.7L44.3 60.3l-9.7-22.9z" fill="#1df2ba"/>
+</svg>

package/dist/base/01-base-eds/functions.scss

@@ -0,0 +1,12 @@
+@use 'sass:list';
+
+@function new-breakpoint($query: $feature $value) {
+    $default-feature-min: "min-width";
+
+    @if list.length($query) == 1 {
+        $query: $default-feature-min nth($query, 1);
+    } @else if is-even(list.length($query)) {
+        $query: list.append($query, 12);
+    }
+    @return $query;
+}

package/dist/base/01-base-eds/index.scss

@@ -0,0 +1,6 @@
+// ASSETS PATHS - overridden by dev-only for relative imports if any
+$eui-assets-base-path: '@eui/styles/dist/assets' !default;
+
+@forward 'functions';
+@forward 'mixins';
+@forward 'variables';

package/dist/base/01-base-eds/mixins.scss

@@ -0,0 +1,71 @@
+@use 'sass:map';
+@use 'sass:list';
+
+$default-feature: "min-width";
+@mixin media($query: $feature $value $columns) {
+    @if list.length($query) == 1 {
+        @media screen and ($default-feature: list.nth($query, 1)) {
+            @content;
+        }
+    }
+    @else {
+        $loop-to: list.length($query);
+        $media-query: "screen and ";
+        @if is-not(is-even(list.length($query))) {
+            $loop-to: $loop-to - 1;
+        }
+        $i: 1;
+        @while $i <=$loop-to {
+            $media-query: $media-query + "(" + list.nth($query, $i) + ": " + list.nth($query, $i + 1) + ") ";
+            @if ($i + 1) != $loop-to {
+                $media-query: $media-query + "and ";
+            }
+            $i: $i+2;
+        }
+        @media #{$media-query} {
+            @content;
+        }
+    }
+}
+
+@mixin eds-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@mixin eds-focus-visible($offset: -2px, $size: 2px) {
+    &:focus-visible:not([readonly]) {
+        outline: $size solid var(--eds-c-border-primary) !important;
+        outline-offset: $offset !important;
+        transition: none;
+    }
+}
+@mixin eds-focus-ring($offset: 1px) {
+    &:focus:not([readonly]) {
+        outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+        outline-offset: $offset !important;
+        border-radius: var(--eds-br-xs) !important;
+    }
+}
+@mixin eds-focus-ring-rounded($offset: 1px) {
+    &:focus:not([readonly]) {
+        outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+        outline-offset: $offset !important;
+        border-radius: var(--eds-br-full) !important;
+    }
+}
+@mixin eds-focus-visible-ring($offset: 1px) {
+    &:focus-visible:not([readonly]) {
+        outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+        outline-offset: $offset !important;
+        border-radius: var(--eds-br-xs) !important;
+    }
+}
+@mixin eds-focus-visible-ring-rounded($offset: 1px) {
+    &:focus-visible:not([readonly]) {
+        outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;
+        outline-offset: $offset !important;
+        border-radius: var(--eds-br-full) !important;
+    }
+}

package/dist/base/01-base-eds/variables.scss

@@ -0,0 +1,2 @@
+// ASSETS PATHS - overridden by dev-only for relative imports if any
+$eds-assets-base-path: '@eui/styles/dist/assets' !default;

package/dist/base/{02-tokens/eds-colors-primitive.scss → 02-tokens-eds/colors-primitive.scss}

@@ -119,7 +119,61 @@ $color-map: (
   'green-700': #049e62,
   'green-800': #037e4e,
   'green-900': #025f3b,
-  'green-950': #02472c,  
+  'green-950': #02472c,
+  
+  'alpha-silver-fog-0-0': rgba(255,255,255,0.0),
+  'alpha-silver-fog-0-8': rgba(255,255,255,0.08),
+  'alpha-silver-fog-0-10': rgba(255,255,255,0.1),
+  'alpha-silver-fog-0-12': rgba(255,255,255,0.12),
+  'alpha-silver-fog-0-14': rgba(255,255,255,0.14),
+  'alpha-silver-fog-0-20': rgba(255,255,255,0.2),
+  'alpha-silver-fog-0-30': rgba(255,255,255,0.3),
+  'alpha-silver-fog-0-40': rgba(255,255,255,0.4),
+  'alpha-silver-fog-0-50': rgba(255,255,255,0.5),
+  'alpha-silver-fog-0-60': rgba(255,255,255,0.6),
+  'alpha-silver-fog-0-70': rgba(255,255,255,0.7),
+  'alpha-silver-fog-0-80': rgba(255,255,255,0.8),
+  'alpha-silver-fog-0-90': rgba(255,255,255,0.9),
+  'alpha-silver-fog-950-0': rgba(0,0,46,0.0),
+  'alpha-silver-fog-950-8': rgba(0,0,46,0.08),
+  'alpha-silver-fog-950-10': rgba(0,0,46,0.1),
+  'alpha-silver-fog-950-12': rgba(0,0,46,0.12),
+  'alpha-silver-fog-950-14': rgba(0,0,46,0.14),
+  'alpha-silver-fog-950-20': rgba(0,0,46,0.2),
+  'alpha-silver-fog-950-30': rgba(0,0,46,0.3),
+  'alpha-silver-fog-950-40': rgba(0,0,46,0.4),
+  'alpha-silver-fog-950-50': rgba(0,0,46,0.5),
+  'alpha-silver-fog-950-60': rgba(0,0,46,0.6),
+  'alpha-silver-fog-950-70': rgba(0,0,46,0.7),
+  'alpha-silver-fog-950-80': rgba(0,0,46,0.8),
+  'alpha-silver-fog-950-90': rgba(0,0,46,0.9),
+
+  'alpha-graphite-0-0': rgba(255,255,255,0.0),
+  'alpha-graphite-0-8': rgba(255,255,255,0.08),
+  'alpha-graphite-0-10': rgba(255,255,255,0.1),
+  'alpha-graphite-0-12': rgba(255,255,255,0.12),
+  'alpha-graphite-0-14': rgba(255,255,255,0.14),
+  'alpha-graphite-0-20': rgba(255,255,255,0.2),
+  'alpha-graphite-0-30': rgba(255,255,255,0.3),
+  'alpha-graphite-0-40': rgba(255,255,255,0.4),
+  'alpha-graphite-0-50': rgba(255,255,255,0.5),
+  'alpha-graphite-0-60': rgba(255,255,255,0.6),
+  'alpha-graphite-0-70': rgba(255,255,255,0.7),
+  'alpha-graphite-0-80': rgba(255,255,255,0.8),
+  'alpha-graphite-0-90': rgba(255,255,255,0.9),
+  'alpha-graphite-950-0': rgba(13,13,18,0.0),
+  'alpha-graphite-950-8': rgba(13,13,18,0.08),
+  'alpha-graphite-950-10': rgba(13,13,18,0.1),
+  'alpha-graphite-950-12': rgba(13,13,18,0.12),
+  'alpha-graphite-950-14': rgba(13,13,18,0.14),
+  'alpha-graphite-950-20': rgba(13,13,18,0.2),
+  'alpha-graphite-950-30': rgba(13,13,18,0.3),
+  'alpha-graphite-950-40': rgba(13,13,18,0.4),
+  'alpha-graphite-950-50': rgba(13,13,18,0.5),
+  'alpha-graphite-950-60': rgba(13,13,18,0.6),
+  'alpha-graphite-950-70': rgba(13,13,18,0.7),
+  'alpha-graphite-950-80': rgba(13,13,18,0.8),
+  'alpha-graphite-950-90': rgba(13,13,18,0.9),
 );
 
 
@@ -246,4 +300,65 @@ $color-map-alt: (
         50: map.get($color-map, 'red-50'),
         25: map.get($color-map, 'red-25'),
     ),
+    alpha-silver-fog-0: (
+        0: map.get($color-map, 'alpha-silver-fog-0-0'),
+        8: map.get($color-map, 'alpha-silver-fog-0-8'),
+        10: map.get($color-map, 'alpha-silver-fog-0-10'),
+        12: map.get($color-map, 'alpha-silver-fog-0-12'),
+        14: map.get($color-map, 'alpha-silver-fog-0-14'),
+        20: map.get($color-map, 'alpha-silver-fog-0-20'),
+        30: map.get($color-map, 'alpha-silver-fog-0-30'),
+        40: map.get($color-map, 'alpha-silver-fog-0-40'),
+        50: map.get($color-map, 'alpha-silver-fog-0-50'),
+        60: map.get($color-map, 'alpha-silver-fog-0-60'),
+        70: map.get($color-map, 'alpha-silver-fog-0-70'),
+        80: map.get($color-map, 'alpha-silver-fog-0-80'),
+        90: map.get($color-map, 'alpha-silver-fog-0-90'),
+    ),
+    alpha-silver-fog-950: (
+        0: map.get($color-map, 'alpha-silver-fog-950-0'),
+        8: map.get($color-map, 'alpha-silver-fog-950-8'),
+        10: map.get($color-map, 'alpha-silver-fog-950-10'),
+        12: map.get($color-map, 'alpha-silver-fog-950-12'),
+        14: map.get($color-map, 'alpha-silver-fog-950-14'),
+        20: map.get($color-map, 'alpha-silver-fog-950-20'),
+        30: map.get($color-map, 'alpha-silver-fog-950-30'),
+        40: map.get($color-map, 'alpha-silver-fog-950-40'),
+        50: map.get($color-map, 'alpha-silver-fog-950-50'),
+        60: map.get($color-map, 'alpha-silver-fog-950-60'),
+        70: map.get($color-map, 'alpha-silver-fog-950-70'),
+        80: map.get($color-map, 'alpha-silver-fog-950-80'),
+        90: map.get($color-map, 'alpha-silver-fog-950-90'),
+    ),   
+    alpha-graphite-0: (
+        0: map.get($color-map, 'alpha-graphite-0-0'),
+        8: map.get($color-map, 'alpha-graphite-0-8'),
+        10: map.get($color-map, 'alpha-graphite-0-10'),
+        12: map.get($color-map, 'alpha-graphite-0-12'),
+        14: map.get($color-map, 'alpha-graphite-0-14'),
+        20: map.get($color-map, 'alpha-graphite-0-20'),
+        30: map.get($color-map, 'alpha-graphite-0-30'),
+        40: map.get($color-map, 'alpha-graphite-0-40'),
+        50: map.get($color-map, 'alpha-graphite-0-50'),
+        60: map.get($color-map, 'alpha-graphite-0-60'),
+        70: map.get($color-map, 'alpha-graphite-0-70'),
+        80: map.get($color-map, 'alpha-graphite-0-80'),
+        90: map.get($color-map, 'alpha-graphite-0-90'),
+    ),
+    alpha-graphite-950: (
+        0: map.get($color-map, 'alpha-graphite-950-0'),
+        8: map.get($color-map, 'alpha-graphite-950-8'),
+        10: map.get($color-map, 'alpha-graphite-950-10'),
+        12: map.get($color-map, 'alpha-graphite-950-12'),
+        14: map.get($color-map, 'alpha-graphite-950-14'),
+        20: map.get($color-map, 'alpha-graphite-950-20'),
+        30: map.get($color-map, 'alpha-graphite-950-30'),
+        40: map.get($color-map, 'alpha-graphite-950-40'),
+        50: map.get($color-map, 'alpha-graphite-950-50'),
+        60: map.get($color-map, 'alpha-graphite-950-60'),
+        70: map.get($color-map, 'alpha-graphite-950-70'),
+        80: map.get($color-map, 'alpha-graphite-950-80'),
+        90: map.get($color-map, 'alpha-graphite-950-90'),
+    ),    
+  
 );

package/dist/base/{02-tokens/eds-colors-semantic-dark-theme.scss → 02-tokens-eds/colors-semantic-dark-theme.scss}

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'sass:color';
 @use '../01-base/' as base;
-@use './eds-colors-primitive' as primitive;
+@use './colors-primitive' as primitive;
 
 $color-semantic-map: (
     surface-accent: map.get(primitive.$color-map, 'graphite-900'),
@@ -54,7 +54,11 @@ $color-semantic-map: (
     surface-neutral--pressed: map.get(primitive.$color-map, 'graphite-500'),
     on-surface-neutral--pressed: map.get(primitive.$color-map, 'graphite-0'),
     surface-neutral-subtle: map.get(primitive.$color-map, 'graphite-800'),
-    on-surface-neutral-subtle: map.get(primitive.$color-map, 'graphite-0'),    
+    on-surface-neutral-subtle: map.get(primitive.$color-map, 'graphite-0'), 
+    surface-neutral-subtle--hover: map.get(primitive.$color-map, 'graphite-900'),
+    on-surface-neutral-subtle--hover: map.get(primitive.$color-map, 'graphite-0'),       
+    surface-neutral-subtler: map.get(primitive.$color-map, 'graphite-700'),
+    on-surface-neutral-subtler: map.get(primitive.$color-map, 'graphite-0'),          
 
     surface-critical: map.get(primitive.$color-map, 'red-600'),
     on-surface-critical: map.get(primitive.$color-map, 'graphite-0'),
@@ -153,4 +157,10 @@ $color-semantic-map: (
     focus: map.get(primitive.$color-map, 'european-blue-600'),
     focus-inverted: map.get(primitive.$color-map, 'european-blue-800'),
     focus-critical: map.get(primitive.$color-map, 'red-600'),
+
+    alpha-backdrop-strong: map.get(primitive.$color-map, 'alpha-graphite-0-14'),
+    alpha-backdrop: map.get(primitive.$color-map, 'alpha-graphite-0-14'),
+    alpha-backdrop-subtle: map.get(primitive.$color-map, 'alpha-graphite-0-10'),
+    alpha-backdrop-inverted: map.get(primitive.$color-map, 'alpha-graphite-950-30'),
+    alpha-backdrop-inverted-subtle: map.get(primitive.$color-map, 'alpha-graphite-950-10'),    
 );

package/dist/base/{02-tokens/eds-colors-semantic.scss → 02-tokens-eds/colors-semantic.scss}

@@ -1,14 +1,14 @@
 @use 'sass:map';
 @use 'sass:color';
 @use '../01-base/' as base;
-@use './eds-colors-primitive' as primitive;
+@use './colors-primitive' as primitive;
 
 $color-semantic-map: (
     surface-accent: map.get(primitive.$color-map, 'european-blue-50'),
     surface-selected: map.get(primitive.$color-map, 'european-blue-100'),
     surface-skeleton: map.get(primitive.$color-map, 'silver-fog-100'),
     surface-brand: map.get(primitive.$color-map, 'silver-fog-950'),
-    // surface-invisible: map.get(primitive.$color-map, 'alpha-silver-fog-0-0'), // TODO add alpha palettes
+    surface-invisible: map.get(primitive.$color-map, 'alpha-silver-fog-0-0'),
 
     surface-elevation-sunken: map.get(primitive.$color-map, 'silver-fog-50'),
     surface-elevation-inset: map.get(primitive.$color-map, 'silver-fog-25'),
@@ -55,6 +55,10 @@ $color-semantic-map: (
     on-surface-neutral--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
     surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-100'),
     on-surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-900'),    
+    surface-neutral-subtle--hover: map.get(primitive.$color-map, 'silver-fog-200'),
+    on-surface-neutral-subtle--hover: map.get(primitive.$color-map, 'silver-fog-900'),    
+    surface-neutral-subtler: map.get(primitive.$color-map, 'silver-fog-75'),
+    on-surface-neutral-subtler: map.get(primitive.$color-map, 'silver-fog-900'),       
 
     surface-critical: map.get(primitive.$color-map, 'red-600'),
     on-surface-critical: map.get(primitive.$color-map, 'silver-fog-0'),
@@ -66,20 +70,26 @@ $color-semantic-map: (
     on-surface-critical-subtle: map.get(primitive.$color-map, 'red-900'), 
     surface-critical-subtler: map.get(primitive.$color-map, 'red-50'),
     on-surface-critical-subtler: map.get(primitive.$color-map, 'red-700'), 
-
+    surface-critical-subtler--hover: map.get(primitive.$color-map, 'red-100'),
+    on-surface-critical-subtler--hover: map.get(primitive.$color-map, 'red-900'),    
+    
     surface-info: map.get(primitive.$color-map, 'blue-600'),
     on-surface-info: map.get(primitive.$color-map, 'silver-fog-0'),    
     surface-info-subtle: map.get(primitive.$color-map, 'blue-200'),
     on-surface-info-subtle: map.get(primitive.$color-map, 'blue-900'),    
-    surface-info-subtler: map.get(primitive.$color-map, 'blue-50'),
-    on-surface-info-subtler: map.get(primitive.$color-map, 'blue-800'),    
+    surface-info-subtler: map.get(primitive.$color-map, 'blue-75'),
+    on-surface-info-subtler: map.get(primitive.$color-map, 'blue-800'), 
+    surface-info-subtler--hover: map.get(primitive.$color-map, 'blue-100'),
+    on-surface-info-subtler--hover: map.get(primitive.$color-map, 'blue-900'),       
 
     surface-success: map.get(primitive.$color-map, 'green-800'),
-    on-surface-success: map.get(primitive.$color-map, 'silver-fog-0'),    
+    on-surface-success: map.get(primitive.$color-map, 'silver-fog-0'),  
     surface-success-subtle: map.get(primitive.$color-map, 'green-200'),
     on-surface-success-subtle: map.get(primitive.$color-map, 'green-900'),    
     surface-success-subtler: map.get(primitive.$color-map, 'green-50'),
     on-surface-success-subtler: map.get(primitive.$color-map, 'green-800'),  
+    surface-success-subtler--hover: map.get(primitive.$color-map, 'green-200'),
+    on-surface-success-subtler--hover: map.get(primitive.$color-map, 'green-900'),
 
     surface-warning: map.get(primitive.$color-map, 'orange-500'),
     on-surface-warning: map.get(primitive.$color-map, 'orange-950'),    
@@ -87,6 +97,8 @@ $color-semantic-map: (
     on-surface-warning-subtle: map.get(primitive.$color-map, 'orange-900'),    
     surface-warning-subtler: map.get(primitive.$color-map, 'orange-50'),
     on-surface-warning-subtler: map.get(primitive.$color-map, 'orange-800'),
+    surface-warning-subtler--hover: map.get(primitive.$color-map, 'orange-100'),
+    on-surface-warning-subtler--hover: map.get(primitive.$color-map, 'orange-900'),    
     
     foreground: map.get(primitive.$color-map, 'silver-fog-950'),
     foreground-subtle: map.get(primitive.$color-map, 'silver-fog-800'),
@@ -131,6 +143,8 @@ $color-semantic-map: (
 
     border-neutral: map.get(primitive.$color-map, 'silver-fog-500'),
     border-neutral--hover: map.get(primitive.$color-map, 'silver-fog-600'),
+    border-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-300'),
+    border-neutral-subtle--hover: map.get(primitive.$color-map, 'silver-fog-400'),
 
     link: map.get(primitive.$color-map, 'european-blue-600'),
     link--focused: map.get(primitive.$color-map, 'european-blue-600'),
@@ -153,4 +167,10 @@ $color-semantic-map: (
     focus: map.get(primitive.$color-map, 'european-blue-600'),
     focus-inverted: map.get(primitive.$color-map, 'european-blue-300'),
     focus-critical: map.get(primitive.$color-map, 'red-400'),
+
+    alpha-backdrop-strong: map.get(primitive.$color-map, 'alpha-silver-fog-950-60'),
+    alpha-backdrop: map.get(primitive.$color-map, 'alpha-silver-fog-950-30'),
+    alpha-backdrop-subtle: map.get(primitive.$color-map, 'alpha-silver-fog-950-10'),
+    alpha-backdrop-inverted: map.get(primitive.$color-map, 'alpha-silver-fog-0-14'),
+    alpha-backdrop-inverted-subtle: map.get(primitive.$color-map, 'alpha-silver-fog-0-10'),
 );

package/dist/base/02-tokens-eds/maps.scss

@@ -0,0 +1,108 @@
+@use 'sass:map';
+@use '../01-base-eds/' as base;
+@use './colors-primitive' as colors-primitive;
+
+// BORDER RADIUS
+
+$border-radius-map: (
+    none: 0,
+    xs: 2px,
+    s: 4px,
+    m: 8px,
+    l: 12px,
+    full: 999px
+);
+
+
+// BORDER WIDTH
+
+$border-width-map: (
+    none: 0,
+    xs: 1px,
+    s: 2px,
+    m: 4px
+);
+
+// OPACITY
+
+$opacity-map: (
+    none: 0,
+    10: 0.1,
+    20: 0.2,
+    30: 0.3,
+    40: 0.4,
+    50: 0.5,
+    60: 0.6,
+    70: 0.7,
+    80: 0.8, 
+    90: 0.9,
+    100: 1
+);
+
+// SHADOWS
+
+$shadow-map: (
+    1: (
+        offset-x: 0px,
+        offset-y: 6px,
+        blur: 12px,
+        spread: 0px,
+        color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-8'),
+    ),
+    2: (
+        offset-x: 0px,
+        offset-y: 10px,
+        blur: 22px,
+        spread: 0px,
+        color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-10'),
+    ),
+    3: (
+        offset-x: 0px,
+        offset-y: 12px,
+        blur: 32px,
+        spread: 0px,
+        color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-12'),
+    ),
+    4: (
+        offset-x: 0px,
+        offset-y: 14px,
+        blur: 42px,
+        spread: 0px,
+        color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-14'),
+    )
+);
+
+// BREAKPOINTS
+
+$breakpoint-size-map: (
+    xs: 480px,
+    s: 768px,
+    m: 996px,
+    l: 1140px,
+    xl: 1440px,
+    2xl: 1600px,
+);
+
+$breakpoint-map: (
+    mobile-s: base.new-breakpoint(max-width map.get($breakpoint-size-map, 'xs') - 1),
+    mobile-m: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'xs') max-width map.get($breakpoint-size-map, 's') - 1),
+    mobile: base.new-breakpoint(max-width map.get($breakpoint-size-map, 's') - 1),
+    tablet-s: base.new-breakpoint(min-width map.get($breakpoint-size-map, 's') max-width map.get($breakpoint-size-map, 'm') - 1),
+    tablet-m: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'm') max-width map.get($breakpoint-size-map, 'l') - 1),
+    tablet: base.new-breakpoint(min-width map.get($breakpoint-size-map, 's') max-width map.get($breakpoint-size-map, 'l') - 1),
+    desktop-s: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'l') max-width map.get($breakpoint-size-map, 'xl') - 1),
+    desktop-m: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'xl') max-width map.get($breakpoint-size-map, '2xl') - 1),
+    desktop-l: base.new-breakpoint(min-width map.get($breakpoint-size-map, '2xl')),
+    desktop: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'l')),
+);
+
+$eds-bkp-mobile-s: map.get($breakpoint-map, 'mobile-s') !default;
+$eds-bkp-mobile-m: map.get($breakpoint-map, 'mobile-m') !default;
+$eds-bkp-mobile: map.get($breakpoint-map, 'mobile') !default;
+$eds-bkp-tablet-s: map.get($breakpoint-map, 'tablet-s') !default;
+$eds-bkp-tablet-m: map.get($breakpoint-map, 'tablet-m') !default;
+$eds-bkp-tablet: map.get($breakpoint-map, 'tablet') !default;
+$eds-bkp-desktop-s: map.get($breakpoint-map, 'desktop-s') !default;
+$eds-bkp-desktop-m: map.get($breakpoint-map, 'desktop-m') !default;
+$eds-bkp-desktop-l: map.get($breakpoint-map, 'desktop-l') !default;
+$eds-bkp-desktop: map.get($breakpoint-map, 'desktop') !default;

package/dist/base/{02-tokens/eds-typography-primitive.scss → 02-tokens-eds/typography-primitive.scss}

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use './dimensions-primitive' as dimensions-primitive;
+@use '../02-tokens/dimensions-primitive' as dimensions-primitive;
 
 $font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl');
 

package/dist/base/{03-vars/eds-vars-colors-dark-theme.scss → 03-vars-eds/vars-colors-dark-theme.scss}

@@ -1,4 +1,4 @@
-@use '../02-tokens/eds-colors-semantic-dark-theme' as semantic;
+@use '../02-tokens-eds/colors-semantic-dark-theme' as semantic;
 
 html.eui-t-dark {
     @each $color, $value in semantic.$color-semantic-map {

package/dist/base/{03-vars/eds-vars-colors.scss → 03-vars-eds/vars-colors.scss}

@@ -1,4 +1,4 @@
-@use '../02-tokens/eds-colors-semantic' as semantic;
+@use '../02-tokens-eds/colors-semantic' as semantic;
 
 :root {
     @each $color, $value in semantic.$color-semantic-map {

package/dist/base/{03-vars/eds-vars-typography.scss → 03-vars-eds/vars-typography.scss}

@@ -1,9 +1,25 @@
 @use 'sass:map';
-@use '../01-base' as base;
-@use '../02-tokens/maps' as maps;
+@use '../01-base-eds' as base;
 @use '../02-tokens/dimensions-semantic' as dimensions-semantic;
-@use '../02-tokens/eds-typography-primitive' as typography-primitive;
-@use '../02-tokens/eds-typography-semantic' as typography-semantic;
+@use '../02-tokens-eds/maps' as maps;
+@use '../02-tokens-eds/typography-primitive' as typography-primitive;
+@use '../02-tokens-eds/typography-semantic' as typography-semantic;
+
+@font-face {
+  font-family: 'Inter';
+  src: url('#{base.$eds-assets-base-path}/fonts/inter/InterVariable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('#{base.$eds-assets-base-path}/fonts/inter//InterVariable-Italic.woff2') format('woff2');
+  font-weight: 100 900;
+  font-display: block;
+  font-style: italic;
+}
 
 :root {
     // TYPOGRAPHY
@@ -37,7 +53,7 @@
         }
     }
 
-    @include base.media(maps.$eui-bkp-tablet) {
+    @include base.media(maps.$eds-bkp-tablet) {
         @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'tablet') {
             @each $size, $sizeDef in $typeDef {
                 --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eui-f-eds-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
@@ -45,7 +61,7 @@
         }        
     }
 
-    @include base.media(maps.$eui-bkp-mobile) {
+    @include base.media(maps.$eds-bkp-mobile) {
         @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'mobile') {
             @each $size, $sizeDef in $typeDef {
                 --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eui-f-eds-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);