@ostack.tech/ui 0.1.0

package/scss/scss/placeholders/menu/_menu-variables.scss

@@ -0,0 +1,325 @@
+@use "../../base-variables" as *;
+@use "../../utils/spacing" as *;
+
+$menu-padding-y: spacing(2) !default;
+$menu-padding-x: spacing(5) !default;
+$menu-scrollbar-width: thin !default;
+
+// Group
+$menu-group-margin-y: $menu-padding-y !default;
+$menu-group-separator-width: 1px !default;
+$menu-group-separator-color: var(--#{$prefix}neutral-a7) !default;
+
+// Group label
+$menu-group-label-padding-y: spacing(1.5) !default;
+$menu-group-label-padding-x: spacing(-2) !default;
+$menu-group-label-font-size: var(--#{$prefix}font-size-xs) !default;
+$menu-group-label-line-height: var(--#{$prefix}line-height-xs) !default;
+$menu-group-label-font-weight: null !default;
+$menu-group-label-text-transform: null !default;
+$menu-group-label-color: var(--#{$prefix}neutral-a10) !default;
+
+// Item
+$menu-item-min-height: 32px !default;
+$menu-item-margin-y: spacing(0.5) !default;
+$menu-item-margin-x: spacing(-3) !default;
+$menu-item-padding-y: spacing(1.5) !default;
+$menu-item-padding-x: spacing(3) !default;
+$menu-item-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$menu-item-font-size: var(--#{$prefix}font-size-sm) !default;
+$menu-item-line-height: var(--#{$prefix}line-height-sm) !default;
+$menu-item-font-weight: null !default;
+$menu-item-text-transform: null !default;
+$menu-item-color: null !default;
+
+$menu-item-button-cursor: pointer !default;
+$menu-item-link-cursor: pointer !default;
+$menu-item-text-cursor: null !default;
+
+// Item - Disabled
+$menu-item-disabled-cursor: not-allowed !default;
+$menu-item-disabled-opacity: 0.5 !default;
+
+// Item - Focus
+$menu-item-focus-outline-width: 2px !default;
+$menu-item-focus-outline-color: var(--#{$prefix}primary-8) !default;
+$menu-item-focus-outline-offset: -1px !default;
+
+// Item - Focus + Accent
+$menu-item-focus-accent-outline-color: var(--#{$prefix}accent-8) !default;
+
+// Item - Solid variant - Accent
+$menu-item-solid-accent-color: var(--#{$prefix}accent-a11) !default;
+
+// Item - Solid variant - Highlighted
+$menu-item-solid-highlighted-background-color: var(
+  --#{$prefix}primary-a4
+) !default;
+$menu-item-solid-highlighted-color: null !default;
+
+// Item - Solid variant - Highlighted + Accent
+$menu-item-solid-highlighted-accent-background-color: var(
+  --#{$prefix}accent-a4
+) !default;
+$menu-item-solid-highlighted-accent-color: null !default;
+
+// Item - Solid variant - Selected
+$menu-item-solid-selected-background-color: var(
+  --#{$prefix}primary-a9
+) !default;
+$menu-item-solid-selected-color: var(--#{$prefix}primary-contrast) !default;
+
+// Item - Solid variant - Selected + Focus
+$menu-item-solid-selected-focus-outline-offset: 2px !default;
+
+// Item - Solid variant - Selected + Accent
+$menu-item-solid-selected-accent-background-color: var(
+  --#{$prefix}accent-a9
+) !default;
+$menu-item-solid-selected-accent-color: var(
+  --#{$prefix}accent-contrast
+) !default;
+
+// Item - Solid variant - Highlighted + Selected
+$menu-item-solid-highlighted-selected-background-color: $menu-item-solid-selected-background-color !default;
+
+// Item - Solid variant - Highlighted + Selected + Accent
+$menu-item-solid-highlighted-selected-accent-background-color: $menu-item-solid-selected-accent-background-color !default;
+
+// Item - Subtle variant - Accent
+$menu-item-subtle-accent-color: var(--#{$prefix}accent-a11) !default;
+
+// Item - Subtle variant - Highlighted
+$menu-item-subtle-highlighted-background-color: var(
+  --#{$prefix}primary-a4
+) !default;
+$menu-item-subtle-highlighted-color: null !default;
+
+// Item - Subtle variant - Highlighted + Accent
+$menu-item-subtle-highlighted-accent-background-color: var(
+  --#{$prefix}accent-a4
+) !default;
+$menu-item-subtle-highlighted-accent-color: null !default;
+
+// Item - Subtle variant - Selected
+$menu-item-subtle-selected-background-color: var(
+  --#{$prefix}primary-a5
+) !default;
+$menu-item-subtle-selected-color: null !default;
+
+// Item - Subtle variant - Selected + Focus
+$menu-item-subtle-selected-focus-outline-offset: null !default;
+
+// Item - Subtle variant - Selected + Accent
+$menu-item-subtle-selected-accent-background-color: var(
+  --#{$prefix}accent-a5
+) !default;
+$menu-item-subtle-selected-accent-color: null !default;
+
+// Item - Subtle variant - Highlighted + Selected
+$menu-item-subtle-highlighted-selected-background-color: $menu-item-subtle-selected-background-color !default;
+
+// Item - Subtle variant - Highlighted + Selected + Accent
+$menu-item-subtle-highlighted-selected-accent-background-color: $menu-item-subtle-selected-accent-background-color !default;
+
+// Item icon
+$menu-item-icon-width: 1.25em !default;
+$menu-item-icon-margin-x: $menu-item-padding-x !default;
+$menu-item-icon-font-size: var(--#{$prefix}font-size-md) !default;
+$menu-item-icon-color: var(--#{$prefix}neutral-a10) !default;
+
+// Item icon - Solid variant - Accent
+$menu-item-icon-solid-accent-color: var(--#{$prefix}accent-a10) !default;
+
+// Item icon - Solid variant - Highlighted
+$menu-item-icon-solid-highlighted-color: $menu-item-solid-highlighted-color !default;
+
+// Item icon - Solid variant - Highlighted + Accent
+$menu-item-icon-solid-highlighted-accent-color: $menu-item-solid-highlighted-accent-color !default;
+
+// Item icon - Solid variant - Selected
+$menu-item-icon-solid-selected-color: var(
+  --#{$prefix}primary-contrast
+) !default;
+
+// Item icon - Solid variant - Selected + Accent
+$menu-item-icon-solid-selected-accent-color: var(
+  --#{$prefix}accent-contrast
+) !default;
+
+// Item icon - Solid variant - Highlighted + Selected
+$menu-item-icon-solid-highlighted-selected-color: null !default;
+
+// Item icon - Solid variant - Highlighted + Selected + Accent
+$menu-item-icon-solid-highlighted-selected-accent-color: null !default;
+
+// Item icon - Subtle variant - Accent
+$menu-item-icon-subtle-accent-color: var(--#{$prefix}accent-a10) !default;
+
+// Item icon - Subtle variant - Highlighted
+$menu-item-icon-subtle-highlighted-color: null !default;
+
+// Item icon - Subtle variant - Highlighted + Accent
+$menu-item-icon-subtle-highlighted-accent-color: null !default;
+
+// Item icon - Subtle variant - Selected
+$menu-item-icon-subtle-selected-color: var(--#{$prefix}neutral-a11) !default;
+
+// Item icon - Subtle variant - Selected + Accent
+$menu-item-icon-subtle-selected-accent-color: var(
+  --#{$prefix}accent-a11
+) !default;
+
+// Item icon - Subtle variant - Highlighted + Selected
+$menu-item-icon-subtle-highlighted-selected-color: null !default;
+
+// Item icon - Subtle variant - Highlighted + Selected + Accent
+$menu-item-icon-subtle-highlighted-selected-accent-color: null !default;
+
+// Sub trigger icon
+$menu-sub-trigger-icon-font-size: var(--#{$prefix}font-size-2xs) !default;
+
+// Checkable
+$menu-checkable-size: 16px !default;
+$menu-checkable-margin-x: spacing(3) !default;
+$menu-checkable-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$menu-checkable-border-width: 1px !default;
+$menu-checkable-font-size: var(--#{$prefix}font-size-xs) !default;
+
+// Radio indicator
+$menu-radio-indicator-size: 6px !default;
+
+// Checkable indicator - Solid variant - Highlighted
+$menu-checkable-indicator-solid-highlighted-color: null !default;
+
+// Checkable indicator - Solid variant - Highlighted + Accent
+$menu-checkable-indicator-solid-highlighted-accent-color: null !default;
+
+// Checkable indicator - Subtle variant - Highlighted
+$menu-checkable-indicator-subtle-highlighted-color: null !default;
+
+// Checkable indicator - Subtle variant - Highlighted + Accent
+$menu-checkable-indicator-subtle-highlighted-accent-color: null !default;
+
+// Variants
+$menu-variants: solid, subtle !default;
+
+// Item - Accent
+$menu-item-accent-color-by-variant: (
+  solid: $menu-item-solid-accent-color,
+  subtle: $menu-item-subtle-accent-color,
+) !default;
+
+// Item - Highlighted
+$menu-item-highlighted-background-color-by-variant: (
+  solid: $menu-item-solid-highlighted-background-color,
+  subtle: $menu-item-subtle-highlighted-background-color,
+) !default;
+$menu-item-highlighted-color-by-variant: (
+  solid: $menu-item-solid-highlighted-color,
+  subtle: $menu-item-subtle-highlighted-color,
+) !default;
+
+// Item - Highlighted + Accent
+$menu-item-highlighted-accent-background-color-by-variant: (
+  solid: $menu-item-solid-highlighted-accent-background-color,
+  subtle: $menu-item-subtle-highlighted-accent-background-color,
+) !default;
+$menu-item-highlighted-accent-color-by-variant: (
+  solid: $menu-item-solid-highlighted-accent-color,
+  subtle: $menu-item-subtle-highlighted-accent-color,
+) !default;
+
+// Item - Selected
+$menu-item-selected-background-color-by-variant: (
+  solid: $menu-item-solid-selected-background-color,
+  subtle: $menu-item-subtle-selected-background-color,
+) !default;
+
+$menu-item-selected-accent-background-color-by-variant: (
+  solid: $menu-item-solid-selected-accent-background-color,
+  subtle: $menu-item-subtle-selected-accent-background-color,
+) !default;
+
+// Item - Selected + Focus
+$menu-item-selected-focus-outline-offset-by-variant: (
+  solid: $menu-item-solid-selected-focus-outline-offset,
+  subtle: $menu-item-subtle-selected-focus-outline-offset,
+) !default;
+
+// Item - Selected + Accent
+$menu-item-selected-color-by-variant: (
+  solid: $menu-item-solid-selected-color,
+  subtle: $menu-item-subtle-selected-color,
+) !default;
+
+$menu-item-selected-accent-color-by-variant: (
+  solid: $menu-item-solid-selected-accent-color,
+  subtle: $menu-item-subtle-selected-accent-color,
+) !default;
+
+// Item - Highlighted + Selected
+$menu-item-highlighted-selected-background-color-by-variant: (
+  solid: $menu-item-solid-highlighted-selected-background-color,
+  subtle: $menu-item-subtle-highlighted-selected-background-color,
+) !default;
+
+// Item - Highlighted + Selected + Accent
+$menu-item-highlighted-selected-accent-background-color-by-variant: (
+  solid: $menu-item-solid-highlighted-selected-accent-background-color,
+  subtle: $menu-item-subtle-highlighted-selected-accent-background-color,
+) !default;
+
+// Item icon - Accent
+$menu-item-icon-accent-color-by-variant: (
+  solid: $menu-item-icon-solid-accent-color,
+  subtle: $menu-item-icon-subtle-accent-color,
+) !default;
+
+// Item icon - Highlighted
+$menu-item-icon-highlighted-color-by-variant: (
+  solid: $menu-item-icon-solid-highlighted-color,
+  subtle: $menu-item-icon-subtle-highlighted-color,
+) !default;
+
+// Item icon - Highlighted + Accent
+$menu-item-icon-highlighted-accent-color-by-variant: (
+  solid: $menu-item-icon-solid-highlighted-accent-color,
+  subtle: $menu-item-icon-subtle-highlighted-accent-color,
+) !default;
+
+// Item icon - Selected
+$menu-item-icon-selected-color-by-variant: (
+  solid: $menu-item-icon-solid-selected-color,
+  subtle: $menu-item-icon-subtle-selected-color,
+) !default;
+
+// Item icon - Selected + Accent
+$menu-item-icon-selected-accent-color-by-variant: (
+  solid: $menu-item-icon-solid-selected-accent-color,
+  subtle: $menu-item-icon-subtle-selected-accent-color,
+) !default;
+
+// Item icon - Highlighted + Selected
+$menu-item-icon-highlighted-selected-color-by-variant: (
+  solid: $menu-item-icon-solid-highlighted-selected-color,
+  subtle: $menu-item-icon-subtle-highlighted-selected-color,
+) !default;
+
+// Item icon - Highlighted + Selected + Accent
+$menu-item-icon-highlighted-selected-accent-color-by-variant: (
+  solid: $menu-item-icon-solid-highlighted-selected-accent-color,
+  subtle: $menu-item-icon-subtle-highlighted-selected-accent-color,
+) !default;
+
+// Checkable indicator - Highlighted
+$menu-checkable-indicator-highlighted-color-by-variant: (
+  solid: $menu-checkable-indicator-solid-highlighted-color,
+  subtle: $menu-checkable-indicator-subtle-highlighted-color,
+) !default;
+
+// Checkable indicator - Highlighted + Accent
+$menu-checkable-indicator-highlighted-accent-color-by-variant: (
+  solid: $menu-checkable-indicator-solid-highlighted-accent-color,
+  subtle: $menu-checkable-indicator-subtle-highlighted-accent-color,
+) !default;

package/scss/scss/placeholders/menu/_menu.scss

@@ -0,0 +1,364 @@
+@use "sass:map";
+
+@use "menu-variables" as *;
+@use "../../base-variables" as *;
+@use "../../utils/declare-var" as *;
+@use "../../utils/spinner" as *;
+@use "../../utils/transition" as *;
+
+%#{$prefix}menu {
+  width: 100%;
+  margin: 0;
+  padding: $menu-padding-y $menu-padding-x;
+  overflow: auto;
+  scrollbar-width: $menu-scrollbar-width;
+
+  &__group {
+    padding: 0;
+  }
+
+  &__group-label {
+    padding: $menu-group-label-padding-y $menu-group-label-padding-x;
+    font-size: $menu-group-label-font-size;
+    line-height: $menu-group-label-line-height;
+    font-weight: $menu-group-label-font-weight;
+    text-transform: $menu-group-label-text-transform;
+    color: $menu-group-label-color;
+  }
+
+  &__group-item:not([hidden]) + :is(&__group-item, &__item) {
+    margin-top: $menu-group-margin-y;
+    padding-top: $menu-group-margin-y;
+    border-top: $menu-group-separator-width solid $menu-group-separator-color;
+  }
+
+  &__group-item,
+  &__item {
+    list-style-type: none;
+  }
+
+  &__item {
+    outline: 0;
+    margin: 0 $menu-item-margin-x;
+
+    &:not(:first-child) {
+      margin-top: $menu-item-margin-y;
+    }
+  }
+
+  &__item-action {
+    all: unset;
+    box-sizing: border-box;
+    -webkit-user-select: none;
+    user-select: none;
+
+    width: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    min-height: $menu-item-min-height;
+    padding: $menu-item-padding-y $menu-item-padding-x;
+
+    font-size: $menu-item-font-size;
+    line-height: $menu-item-line-height;
+    font-weight: $menu-item-font-weight;
+    text-decoration: none;
+    text-transform: $menu-item-text-transform;
+    border-radius: $menu-item-border-radius;
+    color: var(--#{$prefix}menu-item-color, $menu-item-color);
+    background-color: var(--#{$prefix}menu-item-background-color);
+    cursor: $menu-item-text-cursor;
+
+    @include accessible-transition();
+
+    &:is(button):not(:disabled):not([data-disabled=""]):not(
+        [data-disabled="true"]
+      ) {
+      cursor: $menu-item-button-cursor;
+    }
+
+    &:any-link:not(:disabled):not([data-disabled=""]):not(
+        [data-disabled="true"]
+      ) {
+      cursor: $menu-item-link-cursor;
+    }
+
+    &:is(:disabled, [data-disabled=""], [data-disabled="true"]) {
+      cursor: $menu-item-disabled-cursor;
+      opacity: $menu-item-disabled-opacity;
+    }
+
+    &:focus-visible {
+      outline: $menu-item-focus-outline-width solid
+        $menu-item-focus-outline-color;
+      outline-offset: var(
+        --#{$prefix}menu-item-focus-outline-offset,
+        $menu-item-focus-outline-offset
+      );
+
+      &[data-accent] {
+        outline-color: $menu-item-focus-accent-outline-color;
+      }
+    }
+
+    @each $variant in $menu-variants {
+      &--#{$variant} {
+        // Item - Accent
+        &[data-accent] {
+          @include declare-var(
+            --#{$prefix}menu-item-color,
+            map.get($menu-item-accent-color-by-variant, $variant)
+          );
+
+          // Item icon - Accent
+          @include declare-var(
+            --#{$prefix}menu-item-icon-color,
+            map.get($menu-item-icon-accent-color-by-variant, $variant)
+          );
+        }
+
+        // Item - Highlighted
+        &--highlighted:not(:disabled):not([data-disabled=""]):not(
+            [data-disabled="true"]
+          ) {
+          @include declare-var(
+            --#{$prefix}menu-item-background-color,
+            map.get(
+              $menu-item-highlighted-background-color-by-variant,
+              $variant
+            )
+          );
+          @include declare-var(
+            --#{$prefix}menu-item-color,
+            map.get($menu-item-highlighted-color-by-variant, $variant)
+          );
+
+          // Item icon - Highlighted
+          @include declare-var(
+            --#{$prefix}menu-item-icon-color,
+            map.get($menu-item-icon-highlighted-color-by-variant, $variant)
+          );
+
+          // Checkable indicator - Highlighted
+          @include declare-var(
+            --#{$prefix}menu-checkable-indicator-color,
+            map.get(
+              $menu-checkable-indicator-highlighted-color-by-variant,
+              $variant
+            )
+          );
+
+          // Item - Highlighted + Accent
+          &[data-accent] {
+            @include declare-var(
+              --#{$prefix}menu-item-background-color,
+              map.get(
+                $menu-item-highlighted-accent-background-color-by-variant,
+                $variant
+              )
+            );
+            @include declare-var(
+              --#{$prefix}menu-item-color,
+              map.get($menu-item-highlighted-accent-color-by-variant, $variant)
+            );
+
+            // Item icon - Highlighted + Accent
+            @include declare-var(
+              --#{$prefix}menu-item-icon-color,
+              map.get(
+                $menu-item-icon-highlighted-accent-color-by-variant,
+                $variant
+              )
+            );
+
+            // Checkable indicator - Highlighted + Accent
+            @include declare-var(
+              --#{$prefix}menu-checkable-indicator-color,
+              map.get(
+                $menu-checkable-indicator-highlighted-accent-color-by-variant,
+                $variant
+              )
+            );
+          }
+        }
+
+        // Item - Selected
+        &--selected {
+          @include declare-var(
+            --#{$prefix}menu-item-background-color,
+            map.get($menu-item-selected-background-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}menu-item-color,
+            map.get($menu-item-selected-color-by-variant, $variant)
+          );
+
+          // Item - Selected + Focus
+          @include declare-var(
+            --#{$prefix}menu-item-focus-outline-offset,
+            map.get(
+              $menu-item-selected-focus-outline-offset-by-variant,
+              $variant
+            )
+          );
+
+          // Item icon - Selected
+          @include declare-var(
+            --#{$prefix}menu-item-icon-color,
+            map.get($menu-item-icon-selected-color-by-variant, $variant)
+          );
+
+          // Item - Selected + Accent
+          &[data-accent] {
+            @include declare-var(
+              --#{$prefix}menu-item-background-color,
+              map.get(
+                $menu-item-selected-accent-background-color-by-variant,
+                $variant
+              )
+            );
+            @include declare-var(
+              --#{$prefix}menu-item-color,
+              map.get($menu-item-selected-accent-color-by-variant, $variant)
+            );
+
+            // Item icon - Selected + Accent
+            @include declare-var(
+              --#{$prefix}menu-item-icon-color,
+              map.get(
+                $menu-item-icon-selected-accent-color-by-variant,
+                $variant
+              )
+            );
+          }
+        }
+
+        // Item - Highlighted + Selected
+        &--highlighted:not(:disabled):not([data-disabled=""]):not(
+            [data-disabled="true"]
+          ):is(&--selected) {
+          @include declare-var(
+            --#{$prefix}menu-item-background-color,
+            map.get(
+              $menu-item-highlighted-selected-background-color-by-variant,
+              $variant
+            )
+          );
+
+          // Item icon - Highlighted + Selected
+          @include declare-var(
+            --#{$prefix}menu-item-icon-color,
+            map.get(
+              $menu-item-icon-highlighted-selected-color-by-variant,
+              $variant
+            )
+          );
+
+          // Item - Highlighted + Selected + Accent
+          &[data-accent] {
+            @include declare-var(
+              --#{$prefix}menu-item-background-color,
+              map.get(
+                $menu-item-highlighted-selected-accent-background-color-by-variant,
+                $variant
+              )
+            );
+
+            // Item icon - Highlighted + Selected + Accent
+            @include declare-var(
+              --#{$prefix}menu-item-icon-color,
+              map.get(
+                $menu-item-icon-highlighted-selected-accent-color-by-variant,
+                $variant
+              )
+            );
+          }
+        }
+      }
+    }
+  }
+
+  &__item-content {
+    flex-grow: 1;
+  }
+
+  &__item-icon,
+  &__item-spinner {
+    flex-grow: 0;
+    font-size: $menu-item-icon-font-size;
+    color: var(--#{$prefix}menu-item-icon-color, $menu-item-icon-color);
+  }
+
+  &__item-icon {
+    width: $menu-item-icon-width;
+
+    &--start {
+      margin-right: $menu-item-icon-margin-x;
+    }
+
+    &--end {
+      margin-left: $menu-item-icon-margin-x;
+    }
+  }
+
+  &__item-spinner {
+    &--start {
+      margin-left: calc(($menu-item-icon-width - $spinner-size) / 2);
+      margin-right: calc(
+        $menu-item-icon-margin-x + ($menu-item-icon-width - $spinner-size) / 2
+      );
+    }
+
+    &--end {
+      margin-left: calc(
+        $menu-item-icon-margin-x + ($menu-item-icon-width - $spinner-size) / 2
+      );
+      margin-right: calc(($menu-item-icon-width - $spinner-size) / 2);
+    }
+  }
+
+  &__sub-trigger-icon {
+    font-size: $menu-sub-trigger-icon-font-size;
+  }
+
+  &__checkable {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: $menu-checkable-size;
+    height: $menu-checkable-size;
+
+    margin-left: $menu-checkable-margin-x;
+    border-radius: $menu-checkable-border-radius;
+    border: $menu-checkable-border-width solid
+      var(--#{$prefix}menu-item-icon-color, $menu-item-icon-color);
+    font-size: $menu-checkable-font-size;
+
+    &--checked {
+      border: 0;
+      background-color: var(
+        --#{$prefix}menu-item-icon-color,
+        $menu-item-icon-color
+      );
+      color: var(
+        --#{$prefix}menu-checkable-indicator-color,
+        var(--#{$prefix}background-color)
+      );
+    }
+  }
+
+  &__radio {
+    border-radius: 50%;
+  }
+
+  &__radio-indicator {
+    width: $menu-radio-indicator-size;
+    height: $menu-radio-indicator-size;
+
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+}