@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/Megamenu/styles/mixins.scss

@@ -1,311 +1,750 @@
-@use "./../../../styles/tokens/space";
-@use "./../../../styles/tokens/color";
-@use "./../../../styles/tokens/breakpoint";
-@use "./../../../styles/tools/convert";
-@use "sass:map";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/visibility" as visibility;
+@use "../../Container/styles/mixins" as container;
+@use "../../Accordion/styles/mixins" as accordion;
+@use "../../Forms/TextInput/styles/mixins" as input;
+@use "../../Forms/TextInput/styles/config" as inputConfig;
+@use "../../Tag/styles/mixins" as tag;
+@use "../../Tag/styles/config" as tagConfig;
+@use "../../../styles/typography/mixins" as typography;
+
 @use "./config";
 
-// =============================================================================
-// MEGAMENU BASE
-// =============================================================================
+@mixin globals {
+  .is-highlighted {
+    background-color: var(--color-surface-accent);
+  }
 
-@mixin megamenu() {
-  background-color: var(--color-background-primary);
+  .sr-only {
+    @include visibility.visually-hidden;
+  }
 
-  // Mobile/Tablet: Setup for sidebar functionality
-  @include breakpoint.get("lg", "down") {
-    position: relative;
+  .hide {
+    display: none !important;
+  }
+
+  ul {
+    @include typography.list-unstyled();
+    margin-bottom: convert.to-rem(30px);
+  }
+
+  h3 {
+    margin: 0 0 convert.to-rem(15px) 0;
+    font-size: convert.to-rem(16px);
+    line-height: 1.25;
+    font-weight: 400;
+    color: var(--color-text-default);
+  }
+
+  a {
+    color: var(--color-text-default);
+    font-weight: 700;
+    text-decoration: none;
+    font-size: inherit;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+      text-underline-offset: convert.to-rem(4px);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--color-border-accent);
+      outline-offset: 2px;
+    }
+  }
+
+  a[href],
+  area[href],
+  input,
+  select,
+  textarea,
+  button,
+  [type="button"],
+  iframe,
+  [tabindex]:not([tabindex="-1"]),
+  [contentEditable="true"] {
+    @include base.focusring;
+  }
+
+  * {
+    box-sizing: border-box;
+    letter-spacing: convert.to-rem(-0.1px);
+    line-height: convert.to-rem(18px);
+  }
+
+  ::selection {
+    background-color: base.$selection-background;
+    color: base.$text-color;
   }
 }
 
-@mixin megamenu-visible() {
-  display: inline-block;
+@mixin light-vars {
+  @each $name, $value in color.$colors-light {
+    --color-#{$name}: #{$value};
+  }
+}
 
-  @include breakpoint.get("lg", "down") {
-    display: none;
+@mixin dark-vars {
+  @each $name, $value in color.$colors-dark {
+    --color-#{$name}: #{$value};
   }
 }
 
-// =============================================================================
-// HEADER & NAVBAR
-// =============================================================================
+@mixin base {
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 11;
+  font-size: 1rem;
+  color: var(--color-text-default);
+  background-color: var(--color-surface-primary);
+  box-sizing: border-box;
+  font-family: #{base.$font-family};
+
+  // Scroll hide functionality
+  &.is-sticky {
+    position: fixed;
 
-@mixin megamenu-header() {
-  display: flex;
-  justify-content: space-between;
-  background-color: var(--color-background-primary);
+    #{config.$class-root}__main {
+      position: sticky;
+      top: 0;
+      z-index: 12;
+    }
 
-  @include breakpoint.get("lg", "down") {
-    position: relative;
-    align-items: center;
-    gap: convert.to-rem(20px);
-    padding: convert.to-rem(15px) convert.to-rem(20px);
-    border-bottom: 1px solid var(--color-border-subtle);
-    z-index: 998;
+    // Only apply scroll behavior on larger screens where top is visible
+    @include breakpoint.get("lg") {
+      #{config.$class-root}__top[data-hide-when-sticky="true"] {
+        transition:
+          transform 0.2s ease-in-out,
+          opacity 0.2s ease-in-out;
+
+        &.is-hidden {
+          transform: translateY(-100%);
+          opacity: 0;
+          pointer-events: none;
+        }
+      }
+
+      #{config.$class-root}__main {
+        transition: transform 0.2s ease-in-out;
+      }
+
+      // When top is hidden, main should move up
+      #{config.$class-root}__top[data-hide-when-sticky="true"].is-hidden
+        ~ #{config.$class-root}__main {
+        transform: translateY(-#{convert.to-rem(40px)});
+      }
+
+      // When top is hidden, reduce the overall container height by the top bar height
+      #{config.$class-root}__top[data-hide-when-sticky="true"].is-hidden {
+        height: #{convert.to-rem(40px)};
+        overflow: hidden;
+      }
+    }
+
+    // Adjust container height when top is hidden
+    &.top-hidden {
+      @include breakpoint.get("lg") {
+        height: #{convert.to-rem(80px)} !important;
+      }
+    }
   }
 }
 
-@mixin megamenu-divider() {
-  border-bottom: 1px solid var(--color-border-subtle);
+@mixin nav {
+  display: flex;
+  flex: 1;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-width: none;
+  align-items: center;
+  gap: convert.to-rem(30px);
+
+  @include breakpoint.get("md", "down") {
+    gap: convert.to-rem(20px);
+  }
+}
 
-  @include breakpoint.get("lg", "down") {
-    display: flex;
-    flex-direction: column;
-    border-bottom: none;
+@mixin nav-vertical {
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  padding: convert.to-rem(10px) 0;
+  gap: convert.to-rem(15px);
+
+  & > #{config.$class-root}__nav-item {
+    > * {
+      &.is-active,
+      &:hover,
+      &:focus,
+      &:active {
+        box-shadow: none !important;
+      }
+    }
   }
 }
 
-@mixin megamenu-logo() {
-  margin: 0 10px;
-  @include breakpoint.get("lg", "down") {
-    width: convert.to-rem(30px);
-    margin: 0;
+@mixin nav-space-small {
+  gap: convert.to-rem(15px);
+}
+
+@mixin nav-item {
+  display: flex;
+  height: 100%;
+}
+
+@mixin nav-dropdown {
+  position: absolute;
+  top: calc(100% + 1px);
+  left: 0;
+  width: 100%;
+  background-color: var(--color-surface-primary);
+  padding: convert.to-rem(20px) 0;
+  display: none;
+  opacity: 0;
+  z-index: 15;
+}
+
+@mixin nav-logo {
+  display: flex;
+  align-items: center;
+
+  > svg,
+  > img {
+    width: convert.to-rem(40px);
+    height: convert.to-rem(40px);
+
+    & + * {
+      margin-left: convert.to-rem(20px);
+    }
   }
 
-  &.show-xl {
-    display: none;
+  > * {
+    font-size: convert.to-rem(34px);
+    line-height: convert.to-rem(40px);
+  }
+
+  @include breakpoint.get("md", "down") {
+    > svg,
+    > img {
+      width: convert.to-rem(30px);
+      height: convert.to-rem(30px);
+
+      & + * {
+        margin-left: convert.to-rem(10px);
+      }
+    }
 
-    @include breakpoint.get("xl") {
-      display: inline-block !important;
+    > * {
+      font-size: convert.to-rem(20px);
+      line-height: convert.to-rem(30px);
     }
   }
 }
 
-// =============================================================================
-// CONTENT & SIDEBAR
-// =============================================================================
+@mixin nav-link {
+  display: flex;
+  font-weight: 700;
+  font-size: convert.to-rem(16px) !important;
+  align-items: center;
+  color: var(--color-text-default);
+  text-decoration: none;
 
-@mixin megamenu-content() {
+  &:hover,
+  &:focus,
+  &:active,
+  &.is-active {
+    box-shadow: config.$active-line;
+    text-decoration: none !important;
+  }
+}
+
+@mixin nav-cart-icon {
+  position: relative;
+
+  &:after {
+    content: attr(data-items-in-cart);
+    position: absolute;
+    right: -25%;
+    top: -25%;
+    width: convert.to-rem(18px);
+    height: convert.to-rem(18px);
+    background-color: var(--color-icon-information);
+    border-radius: 50%;
+    font-size: convert.to-rem(14px);
+    color: color.$white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@mixin nav-button {
+  position: relative;
   display: flex;
-  justify-content: space-between;
+  font-size: convert.to-rem(16px);
+  font-weight: 700;
+  align-items: center;
+  color: var(--color-text-default);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
 
-  @include breakpoint.get("lg", "down") {
-    flex-direction: column;
-    justify-content: start;
+  &:hover,
+  &:focus,
+  &:active,
+  &.is-active {
+    box-shadow: config.$active-line;
+  }
 
-    padding: convert.to-rem(20px);
-    gap: convert.to-rem(15px);
-    height: calc(100vh - 80px);
-    overflow-y: auto;
+  &:focus-visible {
+    outline: 2px solid var(--color-border-accent);
+    outline-offset: 2px;
   }
 }
 
-@mixin megamenu-sidebar() {
-  @include breakpoint.get("lg", "down") {
-    position: fixed;
-    top: 0;
-    right: -100%;
-    width: map.get(config.$megamenu, sidebar-width);
-    height: 100vh;
-    background-color: var(--color-background-primary);
-    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
-    z-index: map.get(config.$megamenu, z-index-sidebar);
-    overflow-y: auto;
-    transition: right map.get(config.$megamenu, transition-duration) ease-in-out;
-
-    &.is-open {
-      right: 0;
-    }
+@mixin nav-button-indicator {
+  padding: 0 convert.to-rem(20px) 0 0;
+
+  &:after {
+    content: "";
+    position: absolute;
+    right: 0;
+    bottom: convert.to-rem(36px);
+    width: 0;
+    height: 0;
+    margin-left: 0.5em;
+    border-color: currentcolor transparent transparent;
+    border-style: solid;
+    border-width: 7px 7px 0;
+    transition: transform 0.1s ease-out;
   }
 
-  @include breakpoint.get("xs", "down") {
-    width: map.get(config.$megamenu, sidebar-width-mobile);
+  &.is-active:after {
+    transform: rotate(180deg);
   }
 }
 
-@mixin megamenu-sidebar-header() {
-  display: none;
-  @include breakpoint.get("lg", "down") {
-    display: block;
-    background-color: var(--color-background-primary);
-    border-bottom: 1px solid var(--color-border-subtle);
+@mixin nav-icon {
+  display: flex;
+  margin-right: convert.to-rem(5px);
+}
 
-    .megamenu-header {
-      padding: 0 convert.to-rem(20px);
-    }
+@mixin nav-spacer {
+  display: flex;
+  flex: 1 0 1px;
+  visibility: hidden;
+}
+
+@mixin subnav {
+  margin: 0 0 convert.to-rem(30px) 0;
+
+  &:last-child {
+    margin-bottom: 0;
   }
 }
 
-// =============================================================================
-// OVERLAY
-// =============================================================================
+@mixin subnav-item {
+  margin-bottom: convert.to-rem(10px) !important;
 
-@mixin megamenu-overlay() {
-  @include breakpoint.get("lg", "down") {
-    position: fixed;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@mixin top {
+  display: flex;
+  border-bottom: 1px solid var(--color-border-subtle);
+  min-height: convert.to-rem(40px);
+}
+
+@mixin main {
+  display: flex;
+  border-bottom: 1px solid var(--color-border-subtle);
+  min-height: convert.to-rem(80px);
+
+  @include breakpoint.get("md", "down") {
+    min-height: convert.to-rem(60px);
+  }
+}
+
+@mixin submain {
+  display: flex;
+  border-bottom: 1px solid var(--color-border-subtle);
+  padding: convert.to-rem(20px) 0;
+}
+
+@mixin mobile {
+  position: fixed;
+  z-index: 100;
+  width: 0;
+  height: 0;
+  top: 0;
+  right: 0;
+  overflow: hidden;
+  visibility: hidden;
+  transition:
+    visibility 0s linear 0.2s,
+    width 0s linear 0.2s,
+    height 0s linear 0.2s;
+
+  &:after {
+    content: "";
+    position: absolute;
+    z-index: -1;
     top: 0;
     left: 0;
     width: 100%;
-    height: 100vh;
-    background-color: map.get(config.$megamenu, overlay-background);
-    z-index: map.get(config.$megamenu, z-index-overlay);
+    height: 100%;
+    background-color: color-mix(
+      in srgb,
+      var(--color-surface-contrast) 75%,
+      transparent
+    );
     opacity: 0;
-    visibility: hidden;
-    transition:
-      opacity map.get(config.$megamenu, transition-duration) ease-in-out,
-      visibility map.get(config.$megamenu, transition-duration) ease-in-out;
+    transition: opacity 0.2s ease-out;
+  }
+
+  &.is-active {
+    visibility: visible;
+    width: 100vw;
+    height: 100vh;
+    transition-delay: 0s;
+
+    &.is-active #{config.$class-root}__mobile-wrapper {
+      transform: translateX(0);
+    }
 
-    &.is-open {
+    &:after {
       opacity: 1;
-      visibility: visible;
     }
   }
+
+  #{config.$class-root}__container {
+    padding-left: convert.to-rem(20px);
+    padding-right: convert.to-rem(20px);
+  }
 }
 
-// =============================================================================
-// NAVIGATION LINKS
-// =============================================================================
+@mixin mobile-overlay {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: transparent;
+  border: none;
+  appearance: none;
+  -webkit-appearance: none;
+}
 
-@mixin megamenu-link() {
-  color: var(--color-text-default) !important;
-  padding: convert.to-rem(28px) 0;
-  display: inline-block;
-  margin: 0 10px !important;
+@mixin mobile-wrapper {
+  position: absolute;
+  width: convert.to-rem(380px);
+  max-width: 90vw;
+  height: 100%;
+  top: 0;
+  right: 0;
+  overflow-x: inherit;
+  overflow-y: auto;
+  transform: translateX(100%);
+  transition: transform 0.2s ease-out;
+  background-color: var(--color-surface-primary);
 
-  &:hover {
-    text-decoration: none !important;
-    color: var(--color-text-accent) !important;
+  @include breakpoint.get("xs", "down") {
+    width: 100%;
+    max-width: 100%;
   }
+}
 
-  @include breakpoint.get("lg", "down") {
-    text-align: left;
-    padding: convert.to-rem(15px) 0;
-    margin: 0 5px;
-    display: inline-block;
-    background-color: transparent;
+@mixin mobile-header {
+  display: flex;
+  min-height: convert.to-rem(60px);
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+@mixin mobile-body {
+  padding-top: convert.to-rem(15px);
+}
+
+@mixin container {
+  @include container.base;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+@mixin grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: convert.to-rem(20px);
+
+  @include breakpoint.get("md", "down") {
+    grid-auto-flow: row;
+    grid-auto-columns: 100%;
   }
 }
 
-@mixin megamenu-link-small() {
-  color: var(--color-text-default) !important;
-  padding: convert.to-rem(15px) 0;
+@mixin card {
+  border-radius: convert.to-rem(20px);
+  padding: convert.to-rem(30px);
+
+  @include breakpoint.get("md", "down") {
+    padding: convert.to-rem(15px);
+  }
+}
+
+@mixin text-large {
+  font-size: convert.to-rem(28px) !important;
+  font-weight: 700;
+  line-height: convert.to-rem(32px);
+
+  @include breakpoint.get("md", "down") {
+    font-size: convert.to-rem(24px) !important;
+    line-height: convert.to-rem(28px);
+  }
+}
+
+@mixin icon {
+  fill: currentColor;
   display: inline-block;
-  margin: 0 10px !important;
+  vertical-align: middle;
+
+  &__use {
+    display: inline;
+
+    // Light theme (default) - show only light version
+    &--light {
+      display: inline;
+    }
 
-  &:focus {
-    outline: none !important;
+    &--dark {
+      display: none;
+    }
   }
 
-  &:hover {
-    text-decoration: none !important;
-    color: var(--color-text-accent) !important;
+  // Dark theme context - show only dark version
+  .is-dark &,
+  [data-theme="dark"] &,
+  .dark & {
+    &__use {
+      &--light {
+        display: none;
+      }
+
+      &--dark {
+        display: inline;
+      }
+    }
+  }
+}
+
+@mixin overlay {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  height: 0;
+  background-color: color-mix(
+    in srgb,
+    var(--color-surface-contrast) 75%,
+    transparent
+  );
+  border: none;
+  appearance: none;
+  -webkit-appearance: none;
+  z-index: 10;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.15s ease-out,
+    visibility 0.15s ease-out;
+  outline: none;
+
+  &.is-active {
+    pointer-events: auto;
+    opacity: 1;
+    visibility: visible;
+    height: 100vh;
   }
 
   @include breakpoint.get("lg", "down") {
-    text-align: left;
-    padding: convert.to-rem(15px) 0;
-    margin: 0 5px;
-    display: inline-block;
-    background-color: transparent;
+    display: none;
+  }
+}
+
+@mixin spacer {
+  height: convert.to-rem(118px);
+
+  @include breakpoint.get("md", "down") {
+    height: convert.to-rem(58px);
   }
 }
 
-@mixin megamenu-link__active() {
-  border-radius: 0;
-  border-bottom: 3px solid var(--color-border-accent);
-  transition: border-bottom 0.2s ease;
+@mixin spacer-small {
+  height: convert.to-rem(78px);
+
+  @include breakpoint.get("md", "down") {
+    height: convert.to-rem(58px);
+  }
 }
 
-@mixin megamenu-icon() {
-  border-color: transparent !important;
-  margin: 0 !important;
-  display: none;
+@mixin accordion {
+  @include accordion.base;
+  margin-bottom: convert.to-rem(20px);
+}
 
-  &:focus,
-  &:hover {
-    background-color: transparent !important;
-    color: var(--color-background-contrast) !important;
+@mixin accordion-item {
+  @include accordion.item;
+  border-top: none;
+  border-bottom: 1px solid var(--color-border-subtle);
+
+  &:last-child {
+    border-bottom: none;
   }
+}
 
-  @include breakpoint.get("lg", "down") {
-    display: block;
-    margin: 0 5px;
+@mixin accordion-button {
+  @include accordion.button-base;
+  padding: convert.to-rem(15px) 0;
+  background: none;
+  border: none;
+  font-weight: 700;
+  font-size: convert.to-rem(18px);
+  color: var(--color-text-default);
+
+  &[aria-expanded="true"] {
+    border-bottom: 2px solid var(--color-border-accent);
   }
 }
 
-// =============================================================================
-// DROPDOWN FUNCTIONALITY
-// =============================================================================
+@mixin accordion-title {
+  @include accordion.title;
+  font-size: convert.to-rem(18px);
+  font-weight: 700;
+}
+
+@mixin accordion-icon {
+  @include accordion.icon;
+  transform: rotate(90deg);
 
-@mixin megamenu-dropdown() {
-  &__content {
-    @include megamenu-dropdown-content();
+  [aria-expanded="true"] > &,
+  &.is-active {
+    @include accordion.icon-active;
+    transform: rotate(270deg);
   }
-  &__button {
-    @include megamenu-dropdown-button();
+}
+
+@mixin accordion-body {
+  @include accordion.body;
+  display: none;
+  margin-bottom: 0;
+  padding: convert.to-rem(20px) 0 convert.to-rem(30px) 0;
+
+  &.is-visible {
+    display: block;
   }
-  &__highlight {
-    background-color: var(--color-background-accent);
-    padding: convert.to-rem(15px) convert.to-rem(30px);
-    border-radius: convert.to-rem(20px);
+
+  h3 {
+    margin-top: convert.to-rem(20px);
+
+    &:first-child {
+      margin-top: 0;
+    }
   }
 }
 
-@mixin megamenu-dropdown-button() {
-  border: none;
-  display: inline-block;
-  border-radius: 0;
-  padding: convert.to-rem(26px) 0 !important;
-  margin: 0 10px !important;
+@mixin input {
+  @include input.base();
+  @include input.states();
+  margin-bottom: convert.to-rem(30px);
 
-  &:hover {
-    background-color: transparent;
-    color: var(--color-text-accent) !important;
+  @include breakpoint.get("md", "down") {
+    margin-bottom: convert.to-rem(15px);
   }
 
-  @include breakpoint.get("lg", "down") {
-    width: 100% !important;
-    text-align: left;
-    padding: convert.to-rem(15px) 0 !important;
-    margin: 0 !important;
-    display: flex;
-    justify-content: space-between !important;
-    border-bottom: 1px solid var(--color-border-subtle);
-    background-color: transparent;
+  @each $size, $values in inputConfig.$sizes {
+    &#{generate.variant-name($size)} {
+      @include input.size($size);
+    }
+  }
+
+  @each $width, $value in inputConfig.$widths {
+    &#{generate.variant-name($width)} {
+      @include input.width($width);
+    }
+  }
+
+  &--search-icon-with-placeholder {
+    @include input.search-icon-with-placeholder();
   }
 }
 
-@mixin megamenu-dropdown-button-icon() {
-  border-color: transparent !important;
-  width: 100% !important;
-  text-align: left;
-  padding: convert.to-rem(15px) 0;
-  margin: 0 !important;
-  display: flex;
-  justify-content: start !important;
-  border-bottom: 1px solid var(--color-border-subtle);
-  background-color: transparent;
+@mixin tag {
+  @include tag.base;
 
-  @include breakpoint.get("lg", "down") {
-    padding: convert.to-rem(10px) 0;
+  @each $name, $props in tagConfig.$sizes {
+    &#{generate.variant-name($name)} {
+      @include tag.size($name);
+    }
+  }
+
+  @each $variant, $props in tagConfig.$colors {
+    &#{generate.variant-name($variant)} {
+      @include tag.color($variant);
+    }
   }
 }
 
-@mixin megamenu-dropdown-active() {
-  border-radius: 0 !important;
-  border-bottom: 3px solid var(--color-border-accent) !important;
+@mixin tag-transparent {
+  @include tag.color-transparent();
 
-  &.only-icon {
-    svg {
-      margin: 0 !important;
+  &:where(button) {
+    @include tag.button-transparent();
+    z-index: 2;
+  }
+
+  &:where(a) {
+    @include tag.button-transparent();
+    z-index: 2;
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.is-active {
+      text-decoration: none !important;
     }
   }
+
+  @include tag.button-transparent-disabled();
 }
 
-@mixin megamenu-dropdown-content() {
-  background-color: var(--color-background-primary);
-  color: var(--color-text-default) !important;
-  padding: convert.to-rem(20px) convert.to-rem(70px);
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 100%;
+@mixin list-gap-small {
+  display: flex;
+  flex-direction: column;
+  gap: convert.to-rem(10px);
+}
 
-  @include breakpoint.get("lg", "down") {
-    position: static;
-    background-color: transparent;
-    padding: convert.to-rem(10px) 0;
-    margin-top: convert.to-rem(10px);
-    line-height: 1.5;
+@mixin hide-md-down {
+  @include breakpoint.get("md", "down") {
+    display: none !important;
+  }
+}
+
+@mixin hide-lg-up {
+  @include breakpoint.get("lg") {
+    display: none !important;
   }
 }