@ostack.tech/ui 0.1.0

package/scss/components/CommandMenu/_CommandMenu.scss

@@ -0,0 +1,162 @@
+@use "sass:map";
+
+@use "CommandMenu-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/control/control-variables" as *;
+@use "../../scss/placeholders/menu/menu" as *;
+@use "../../scss/placeholders/menu/menu-variables" as *;
+@use "../../scss/utils/animation" as *;
+@use "../../scss/utils/declare-var" as *;
+
+.#{$prefix}command-menu {
+  $command-menu: &;
+  $overlay: ".#{$prefix}overlay";
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: $command-menu-border-width solid $command-menu-border-color;
+  border-radius: $command-menu-border-radius;
+  background-color: $command-menu-background-color;
+  box-shadow: $command-menu-box-shadow;
+
+  &__overlay#{$overlay} {
+    align-items: $command-menu-overlay-align-items;
+  }
+
+  &__dialog {
+    z-index: $command-menu-dialog-z-index;
+
+    #{$command-menu} {
+      box-shadow: $command-menu-dialog-box-shadow;
+    }
+
+    @include declare-var(
+      --#{$prefix}animation-transform,
+      $command-menu-dialog-animation-transform
+    );
+
+    &[data-state="open"] {
+      @include accessible-animation(
+        $animation-transform-in $command-menu-dialog-animation-duration
+          $command-menu-dialog-animation-timing-function
+      );
+    }
+
+    &[data-state="closed"] {
+      @include accessible-animation(
+        $animation-transform-out $command-menu-dialog-animation-duration
+          $command-menu-dialog-animation-timing-function
+      );
+    }
+
+    // Sizes
+    @each $size in $command-menu-dialog-sizes {
+      &--#{$size} {
+        width: map.get($command-menu-dialog-widths-by-size, $size);
+      }
+    }
+  }
+
+  &__search-root {
+    width: auto !important;
+    height: auto !important;
+    border-bottom: $command-menu-search-separator-width solid
+      $command-menu-search-separator-color;
+  }
+
+  &__search-root {
+  }
+
+  &__search-root,
+  &__search-container {
+    border-radius: $command-menu-border-radius $command-menu-border-radius 0 0 !important;
+  }
+
+  &__search-container {
+    box-shadow: none !important;
+    min-height: auto !important;
+  }
+
+  // Match search height with item height
+  &__search {
+    width: 0;
+    padding-top: $command-menu-search-padding-y !important;
+    padding-bottom: $command-menu-search-padding-y !important;
+
+    &:first-child {
+      padding-left: calc(
+        $menu-padding-x + $menu-item-margin-x + $menu-item-padding-x
+      );
+    }
+  }
+
+  // Align search adornment icon with item icons
+  &__search-adornment {
+    padding: 0 !important;
+
+    &:first-child {
+      margin: 0 calc($menu-item-icon-margin-x - $menu-item-padding-x) 0
+        calc($menu-padding-x + $menu-item-margin-x + $menu-item-padding-x) !important;
+    }
+
+    &:last-child {
+      margin: 0
+        calc($menu-padding-x + $menu-item-margin-x + $menu-item-padding-x) 0
+        calc($menu-item-icon-margin-x - $menu-item-padding-x) !important;
+    }
+  }
+
+  &__search-icon {
+    font-size: $menu-item-icon-font-size !important;
+    width: $menu-item-icon-width !important;
+  }
+
+  [cmdk-group] {
+    @extend %#{$prefix}menu__group-item;
+  }
+
+  [cmdk-group-heading] {
+    @extend %#{$prefix}menu__group-label;
+  }
+
+  [cmdk-group-items] {
+    @extend %#{$prefix}menu__group;
+  }
+
+  &__list {
+    max-height: $command-menu-list-max-height;
+    height: calc(var(--cmdk-list-height) + $menu-padding-y * 2);
+    transition: height $command-menu-list-transition-duration
+      $command-menu-list-transition-timing-function;
+  }
+
+  &__item
+    &__item-action:not(
+      a,
+      :disabled,
+      [data-disabled=""],
+      [data-disabled="true"]
+    ) {
+    cursor: $command-menu-item-button-cursor;
+  }
+
+  &__loading {
+    padding: $command-menu-loading-padding-y $command-menu-loading-padding-x;
+    text-align: $command-menu-loading-text-align;
+  }
+
+  &__spinner {
+    vertical-align: middle;
+    font-size: $command-menu-spinner-font-size;
+  }
+
+  &__empty-message {
+    padding: $command-menu-empty-message-padding-y
+      $command-menu-empty-message-padding-x;
+    color: $command-menu-empty-message-color;
+    text-align: $command-menu-empty-message-text-align;
+    font-size: $menu-item-font-size;
+    line-height: $menu-item-line-height;
+  }
+}

package/scss/components/Container/_Container-variables.scss

@@ -0,0 +1,21 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$container-default-gutter: spacing(2.5) !default;
+
+$container-sm-max-width: 540px !default;
+$container-md-max-width: 720px !default;
+$container-lg-max-width: 960px !default;
+$container-xl-max-width: 1140px !default;
+$container-xxl-max-width: 1320px !default;
+
+// Sizes
+$container-sizes: sm, md, lg, xl, xxl !default;
+
+$container-max-width-by-size: (
+  sm: $container-sm-max-width,
+  md: $container-md-max-width,
+  lg: $container-lg-max-width,
+  xl: $container-xl-max-width,
+  xxl: $container-xxl-max-width,
+) !default;

package/scss/components/Container/_Container.scss

@@ -0,0 +1,46 @@
+@use "Container-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/breakpoints" as *;
+@use "../../scss/utils/responsive-values" as *;
+
+$container: ".#{$prefix}container";
+#{$container} {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--#{$prefix}container-left-gutter);
+  padding-right: var(--#{$prefix}container-right-gutter);
+
+  @include responsive-values(
+    --#{$prefix}container,
+    (
+      left-gutter: $container-default-gutter,
+      right-gutter: $container-default-gutter,
+    )
+  );
+}
+
+@each $container-size, $container-max-width in $container-max-width-by-size {
+  @include media-breakpoint-up($container-size) {
+    %#{$prefix}container--#{$container-size} {
+      max-width: $container-max-width;
+    }
+
+    // Extend each breakpoint which is smaller or equal to the current
+    // breakpoint
+    $extend-breakpoint: true;
+
+    @each $breakpoint-size, $breakpoint in $breakpoint-by-size {
+      @if $extend-breakpoint and $breakpoint > 0 {
+        #{$container}--#{$breakpoint-size} {
+          @extend %#{$prefix}container--#{$container-size};
+        }
+
+        // Once the current breakpoint is reached, stop extending
+        @if ($container-size == $breakpoint-size) {
+          $extend-breakpoint: false;
+        }
+      }
+    }
+  }
+}

package/scss/components/ControlAddon/_ControlAddon-variables.scss

@@ -0,0 +1,303 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/button/button-variables" as *;
+@use "../../scss/placeholders/control/control-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$control-addon-font-size: null !default;
+$control-addon-line-height: 1 !default;
+
+// Focus
+$control-addon-focus-outline-width: $button-focus-outline-width !default;
+$control-addon-focus-outline-offset: -1px !default;
+$control-addon-focus-z-index: $button-focus-z-index !default;
+
+// Button
+$control-addon-button-cursor: $button-cursor !default;
+
+// Button - Disabled
+$control-addon-button-disabled-cursor: $button-disabled-cursor !default;
+$control-addon-button-disabled-opacity: $control-disabled-opacity !default;
+
+// Default variant
+$control-addon-align-self: null !default;
+$control-addon-margin-x: $control-padding-x !default;
+$control-addon-padding-y: spacing(1) !default;
+$control-addon-padding-x: spacing(1) !default;
+$control-addon-inset-x: $control-addon-padding-x !default;
+
+$control-addon-separator-width: null !default;
+$control-addon-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$control-addon-edge-border-radius: null !default;
+$control-addon-separator-color: null !default;
+$control-addon-background-color: null !default;
+$control-addon-color: var(--#{$prefix}neutral-a11) !default;
+$control-addon-text-shadow: null !default;
+
+// Default variant - Status
+$control-addon-status-separator-color: null !default;
+$control-addon-status-background-color: null !default;
+$control-addon-status-color: var(--#{$prefix}accent-a11) !default;
+
+// Default variant - Focus
+$control-addon-focus-outline-color: var(--#{$prefix}neutral-8) !default;
+
+// Default variant - Focus + Status
+$control-addon-focus-status-outline-color: var(--#{$prefix}accent-8) !default;
+
+// Default variant - Button - Hover
+$control-addon-button-hover-background-color: var(
+  --#{$prefix}neutral-a3
+) !default;
+$control-addon-button-hover-color: null !default;
+
+// Default variant - Button - Hover + Status
+$control-addon-button-hover-status-background-color: var(
+  --#{$prefix}accent-a3
+) !default;
+$control-addon-button-hover-status-color: null !default;
+
+// Default variant - Button - Active
+$control-addon-button-active-background-color: var(
+  --#{$prefix}neutral-a4
+) !default;
+$control-addon-button-active-color: null !default;
+
+// Default variant - Button - Active + Status
+$control-addon-button-active-status-background-color: var(
+  --#{$prefix}accent-a4
+) !default;
+$control-addon-button-active-status-color: null !default;
+
+// Default variant - Read-only
+$control-addon-readonly-align-self: null !default;
+$control-addon-readonly-margin-x: null !default;
+$control-addon-readonly-padding-y: null !default;
+$control-addon-readonly-padding-x: null !default;
+$control-addon-readonly-inset-x: null !default;
+
+$control-addon-readonly-separator-width: null !default;
+$control-addon-readonly-background-color: null !default;
+$control-addon-readonly-border-radius: null !default;
+
+// Default variant - Read-only + Status
+$control-addon-readonly-status-background-color: null !default;
+
+// Cell variant
+$control-addon-cell-align-self: $control-addon-align-self !default;
+$control-addon-cell-margin-x: $control-cell-padding-x !default;
+$control-addon-cell-padding-y: spacing(1.5) !default;
+$control-addon-cell-padding-x: spacing(1.5) !default;
+$control-addon-cell-inset-x: $control-addon-cell-padding-x !default;
+
+$control-addon-cell-separator-width: $control-addon-separator-width !default;
+$control-addon-cell-edge-border-radius: $control-addon-edge-border-radius !default;
+$control-addon-cell-border-radius: $control-addon-border-radius !default;
+$control-addon-cell-separator-color: $control-addon-separator-color !default;
+$control-addon-cell-background-color: $control-addon-background-color !default;
+$control-addon-cell-color: $control-addon-color !default;
+$control-addon-cell-text-shadow: $control-addon-text-shadow !default;
+
+// Cell variant - Status
+$control-addon-cell-status-separator-color: $control-addon-status-separator-color !default;
+$control-addon-cell-status-background-color: $control-addon-status-background-color !default;
+$control-addon-cell-status-color: $control-addon-status-color !default;
+
+// Cell variant - Focus
+$control-addon-cell-focus-outline-color: $control-addon-focus-outline-color !default;
+
+// Cell variant - Focus + Status
+$control-addon-cell-focus-status-outline-color: $control-addon-focus-status-outline-color !default;
+
+// Cell variant - Button - Hover
+$control-addon-cell-button-hover-background-color: $control-addon-button-hover-background-color !default;
+$control-addon-cell-button-hover-color: $control-addon-button-hover-color !default;
+
+// Cell variant - Button - Hover + Status
+$control-addon-cell-button-hover-status-background-color: $control-addon-button-hover-status-background-color !default;
+$control-addon-cell-button-hover-status-color: $control-addon-button-hover-status-color !default;
+
+// Cell variant - Button - Active
+$control-addon-cell-button-active-background-color: $control-addon-button-active-background-color !default;
+$control-addon-cell-button-active-color: $control-addon-button-active-color !default;
+
+// Cell variant - Button - Active + Status
+$control-addon-cell-button-active-status-background-color: $control-addon-button-active-status-background-color !default;
+$control-addon-cell-button-active-status-color: $control-addon-button-active-status-color !default;
+
+// Cell variant - Read-only
+$control-addon-cell-readonly-align-self: $control-addon-readonly-align-self !default;
+$control-addon-cell-readonly-margin-x: $control-addon-readonly-margin-x !default;
+$control-addon-cell-readonly-padding-y: $control-addon-readonly-padding-y !default;
+$control-addon-cell-readonly-padding-x: $control-addon-readonly-padding-x !default;
+$control-addon-cell-readonly-inset-x: $control-addon-readonly-inset-x !default;
+
+$control-addon-cell-readonly-separator-width: $control-addon-readonly-separator-width !default;
+$control-addon-cell-readonly-background-color: $control-addon-readonly-background-color !default;
+$control-addon-cell-readonly-border-radius: $control-addon-readonly-border-radius !default;
+
+// Cell variant - Read-only + Status
+$control-addon-cell-readonly-status-background-color: $control-addon-readonly-status-background-color !default;
+
+// Icon
+$control-addon-icon-font-size: var(--#{$prefix}font-size-md) !default;
+$control-addon-icon-inset-x: spacing(1) !default;
+
+// Variants
+$control-addon-variants: $control-variants !default;
+
+$control-addon-align-self-by-variant: (
+  default: $control-addon-align-self,
+  cell: $control-addon-cell-align-self,
+) !default;
+$control-addon-margin-x-by-variant: (
+  default: $control-addon-margin-x,
+  cell: $control-addon-cell-margin-x,
+) !default;
+$control-addon-padding-y-by-variant: (
+  default: $control-addon-padding-y,
+  cell: $control-addon-cell-padding-y,
+) !default;
+$control-addon-padding-x-by-variant: (
+  default: $control-addon-padding-x,
+  cell: $control-addon-cell-padding-x,
+) !default;
+$control-addon-inset-x-by-variant: (
+  default: $control-addon-inset-x,
+  cell: $control-addon-cell-inset-x,
+) !default;
+
+$control-addon-separator-width-by-variant: (
+  default: $control-addon-separator-width,
+  cell: $control-addon-cell-separator-width,
+) !default;
+$control-addon-border-radius-by-variant: (
+  default: $control-addon-border-radius,
+  cell: $control-addon-cell-border-radius,
+) !default;
+$control-addon-edge-border-radius-by-variant: (
+  default: $control-addon-edge-border-radius,
+  cell: $control-addon-cell-edge-border-radius,
+) !default;
+$control-addon-separator-color-by-variant: (
+  default: $control-addon-separator-color,
+  cell: $control-addon-cell-separator-color,
+) !default;
+$control-addon-background-color-by-variant: (
+  default: $control-addon-background-color,
+  cell: $control-addon-cell-background-color,
+) !default;
+$control-addon-color-by-variant: (
+  default: $control-addon-color,
+  cell: $control-addon-cell-color,
+) !default;
+$control-addon-text-shadow-by-variant: (
+  default: $control-addon-text-shadow,
+  cell: $control-addon-cell-text-shadow,
+) !default;
+
+// Variants - Status
+$control-addon-status-separator-color-by-variant: (
+  default: $control-addon-status-separator-color,
+  cell: $control-addon-cell-status-separator-color,
+) !default;
+$control-addon-status-background-color-by-variant: (
+  default: $control-addon-status-background-color,
+  cell: $control-addon-cell-status-background-color,
+) !default;
+$control-addon-status-color-by-variant: (
+  default: $control-addon-status-color,
+  cell: $control-addon-cell-status-color,
+) !default;
+
+// Variants - Focus
+$control-addon-focus-outline-color-by-variant: (
+  default: $control-addon-focus-outline-color,
+  cell: $control-addon-cell-focus-outline-color,
+) !default;
+
+// Variants - Focus + Status
+$control-addon-focus-status-outline-color-by-variant: (
+  default: $control-addon-focus-status-outline-color,
+  cell: $control-addon-cell-focus-status-outline-color,
+) !default;
+
+// Variants - Button - Hover
+$control-addon-button-hover-background-color-by-variant: (
+  default: $control-addon-button-hover-background-color,
+  cell: $control-addon-cell-button-hover-background-color,
+) !default;
+$control-addon-button-hover-color-by-variant: (
+  default: $control-addon-button-hover-color,
+  cell: $control-addon-cell-button-hover-color,
+) !default;
+
+// Variants - Button - Hover + Status
+$control-addon-button-hover-status-background-color-by-variant: (
+  default: $control-addon-button-hover-status-background-color,
+  cell: $control-addon-cell-button-hover-status-background-color,
+) !default;
+$control-addon-button-hover-status-color-by-variant: (
+  default: $control-addon-button-hover-status-color,
+  cell: $control-addon-cell-button-hover-status-color,
+) !default;
+
+// Variants - Button - Active
+$control-addon-button-active-background-color-by-variant: (
+  default: $control-addon-button-active-background-color,
+  cell: $control-addon-cell-button-active-background-color,
+) !default;
+$control-addon-button-active-color-by-variant: (
+  default: $control-addon-button-active-color,
+  cell: $control-addon-cell-button-active-color,
+) !default;
+
+// Variants - Button - Active + Status
+$control-addon-button-active-status-background-color-by-variant: (
+  default: $control-addon-button-active-status-background-color,
+  cell: $control-addon-cell-button-active-status-background-color,
+) !default;
+$control-addon-button-active-status-color-by-variant: (
+  default: $control-addon-button-active-status-color,
+  cell: $control-addon-cell-button-active-status-color,
+) !default;
+
+// Variants - Read-only
+$control-addon-readonly-align-self-by-variant: (
+  default: $control-addon-readonly-align-self,
+  cell: $control-addon-cell-readonly-align-self,
+) !default;
+$control-addon-readonly-margin-x-by-variant: (
+  default: $control-addon-readonly-margin-x,
+  cell: $control-addon-cell-readonly-margin-x,
+) !default;
+$control-addon-readonly-padding-y-by-variant: (
+  default: $control-addon-readonly-padding-y,
+  cell: $control-addon-cell-readonly-padding-y,
+) !default;
+$control-addon-readonly-padding-x-by-variant: (
+  default: $control-addon-readonly-padding-x,
+  cell: $control-addon-cell-readonly-padding-x,
+) !default;
+$control-addon-readonly-inset-x-by-variant: (
+  default: $control-addon-readonly-inset-x,
+  cell: $control-addon-cell-readonly-inset-x,
+) !default;
+
+$control-addon-readonly-separator-width-by-variant: (
+  default: $control-addon-readonly-separator-width,
+  cell: $control-addon-cell-readonly-separator-width,
+) !default;
+$control-addon-readonly-background-color-by-variant: (
+  default: $control-addon-readonly-background-color,
+  cell: $control-addon-cell-readonly-background-color,
+) !default;
+$control-addon-readonly-border-radius-by-variant: (
+  default: $control-addon-readonly-border-radius,
+  cell: $control-addon-cell-readonly-border-radius,
+) !default;
+
+// Variants - Read-only + Status
+$control-addon-readonly-status-background-color-by-variant: (
+  default: $control-addon-readonly-status-background-color,
+  cell: $control-addon-cell-readonly-status-background-color,
+) !default;