@ostack.tech/ui 0.1.0

package/scss/components/DateRangeInput/_DateRangeInput.scss

@@ -0,0 +1,130 @@
+@use "sass:map";
+
+@use "DateRangeInput-variables" as *;
+@use "../ControlAddon/ControlAddon-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/calendar-popover" as *;
+@use "../../scss/placeholders/control/control" as *;
+@use "../../scss/placeholders/control/control-variables" as *;
+@use "../../scss/utils/declare-var" as *;
+
+.#{$prefix}date-range-input {
+  $control-addon: ".#{$prefix}control-addon";
+
+  @extend %#{$prefix}control;
+
+  &__root {
+    @extend %#{$prefix}control__root;
+
+    @each $variant in $control-variants {
+      &[data-variant="#{$variant}"] {
+        @extend %#{$prefix}control__root--#{$variant};
+
+        @include declare-var(
+          --#{$prefix}date-range-input-inset-x,
+          map.get($date-range-input-inset-x-by-variant, $variant)
+        );
+
+        &[data-readonly] {
+          @include declare-var(
+            --#{$prefix}date-range-input-inset-x,
+            map.get($date-range-input-readonly-inset-x-by-variant, $variant)
+          );
+        }
+      }
+    }
+  }
+
+  &__container {
+    @extend %#{$prefix}control__container;
+
+    @each $variant in $control-variants {
+      &[data-variant="#{$variant}"] {
+        @if $variant == "cell" {
+          height: 100%;
+        }
+
+        @extend %#{$prefix}control__container--#{$variant};
+      }
+    }
+  }
+
+  &__popover-anchor > &__container {
+    margin: calc(var(--#{$prefix}control-border-width) * -1);
+    background: none;
+    &:not([data-focused]) {
+      border-color: transparent;
+    }
+
+    // When necessary, tweak spacing around containers so that the focus ring
+    // ins't too close to other elements.
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      margin-left: calc(
+        var(--#{$prefix}date-range-input-inset-x) - var(
+            --#{$prefix}control-border-width,
+            0px
+          )
+      );
+
+      > .#{$prefix}date-range-input {
+        padding-left: calc(
+          var(--#{$prefix}control-padding-x) - var(
+              --#{$prefix}date-range-input-inset-x
+            )
+        );
+      }
+    }
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      margin-right: calc(
+        var(--#{$prefix}date-range-input-inset-x) - var(
+            --#{$prefix}control-border-width,
+            0px
+          )
+      );
+
+      > .#{$prefix}date-range-input:last-child {
+        padding-right: calc(
+          var(--#{$prefix}control-padding-x) - var(
+              --#{$prefix}date-range-input-inset-x
+            )
+        );
+      }
+      > .#{$prefix}date-range-input__clear-button:last-child {
+        margin-right: calc(
+          var(--#{$prefix}control-padding-x) -
+            $control-clear-button-inset-x - var(
+              --#{$prefix}date-range-input-inset-x
+            )
+        );
+      }
+      > .#{$prefix}date-range-input__spinner:last-child {
+        margin-right: calc(
+          var(--#{$prefix}control-padding-x) - var(
+              --#{$prefix}date-range-input-inset-x
+            )
+        );
+      }
+    }
+  }
+
+  &__code[data-variant="default"] {
+    @extend %#{$prefix}control__code--default;
+  }
+
+  &__clear-button {
+    @extend %#{$prefix}control__clear-button;
+  }
+
+  &__spinner {
+    @extend %#{$prefix}control__spinner;
+  }
+
+  // Add box shadow to each month instead of to popover
+  &__popover.#{$prefix}popover {
+    @extend %#{$prefix}calendar-popover;
+  }
+}

package/scss/components/Dialog/_Dialog-variables.scss

@@ -0,0 +1,195 @@
+@use "../Card/Card-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$dialog-padding-y: null !default;
+$dialog-padding-x: null !default;
+
+$dialog-box-shadow: var(--#{$prefix}box-shadow-lg) !default;
+$dialog-animation-transform: translateY(-5px) scale(0.97) !default;
+$dialog-animation-duration: 0.15s !default;
+$dialog-animation-timing-function: ease-out !default;
+$dialog-z-index: var(--#{$prefix}z-index-dialog) !default;
+
+$dialog-sm-width: 300px !default;
+$dialog-md-width: 500px !default;
+$dialog-lg-width: 800px !default;
+$dialog-xl-width: 1140px !default;
+
+// Merged
+$dialog-merged-section-padding-y: null !default;
+
+// Solid variant
+$dialog-solid-border-color: null !default;
+$dialog-solid-background-color: null !default;
+$dialog-solid-color: null !default;
+$dialog-solid-box-shadow: null !default;
+
+// Solid variant - Unmerged
+$dialog-solid-unmerged-box-shadow: null !default;
+$dialog-solid-unmerged-separator-border-color: null !default;
+$dialog-solid-unmerged-header-separator-border-color: null !default;
+
+// Solid variant - Unmerged - Body
+$dialog-solid-unmerged-body-background-color: null !default;
+$dialog-solid-unmerged-body-color: null !default;
+
+// Solid variant - Unmerged - Footer
+$dialog-solid-unmerged-footer-background-color: null !default;
+$dialog-solid-unmerged-footer-color: null !default;
+
+// Subtle variant
+$dialog-subtle-border-color: null !default;
+$dialog-subtle-background-color: null !default;
+$dialog-subtle-color: null !default;
+$dialog-subtle-box-shadow: null !default;
+
+// Subtle variant - Unmerged
+$dialog-subtle-unmerged-box-shadow: null !default;
+$dialog-subtle-unmerged-separator-border-color: null !default;
+$dialog-subtle-unmerged-header-separator-border-color: null !default;
+
+// Subtle variant - Unmerged - Body
+$dialog-subtle-unmerged-body-background-color: null !default;
+$dialog-subtle-unmerged-body-color: null !default;
+
+// Subtle variant - Unmerged - Footer
+$dialog-subtle-unmerged-footer-background-color: null !default;
+$dialog-subtle-unmerged-footer-color: null !default;
+
+// Outlined variant
+$dialog-outlined-border-color: null !default;
+$dialog-outlined-background-color: var(--#{$prefix}background-color) !default;
+$dialog-outlined-color: null !default;
+$dialog-outlined-box-shadow: null !default;
+
+// Outlined variant - Unmerged
+$dialog-outlined-unmerged-box-shadow: null !default;
+$dialog-outlined-unmerged-separator-border-color: null !default;
+$dialog-outlined-unmerged-header-separator-border-color: null !default;
+
+// Outlined variant - Unmerged - Body
+$dialog-outlined-unmerged-body-background-color: $dialog-outlined-background-color !default;
+$dialog-outlined-unmerged-body-color: null !default;
+
+// Outlined variant - Unmerged - Footer
+$dialog-outlined-unmerged-footer-background-color: null !default;
+$dialog-outlined-unmerged-footer-color: null !default;
+
+// Ghost variant
+$dialog-ghost-border-color: null !default;
+$dialog-ghost-background-color: var(--#{$prefix}background-color) !default;
+$dialog-ghost-color: null !default;
+$dialog-ghost-box-shadow: null !default;
+
+// Ghost variant - Unmerged
+$dialog-ghost-unmerged-box-shadow: null !default;
+$dialog-ghost-unmerged-separator-border-color: null !default;
+$dialog-ghost-unmerged-header-separator-border-color: null !default;
+
+// Ghost variant - Unmerged - Body
+$dialog-ghost-unmerged-body-background-color: $dialog-outlined-background-color !default;
+$dialog-ghost-unmerged-body-color: null !default;
+
+// Ghost variant - Unmerged - Footer
+$dialog-ghost-unmerged-footer-background-color: null !default;
+$dialog-ghost-unmerged-footer-color: null !default;
+
+// Dialog title
+$dialog-title-font-size: null !default;
+$dialog-title-line-height: null !default;
+$dialog-title-font-weight: null !default;
+$dialog-title-text-transform: null !default;
+
+// Overlay
+$dialog-overlay-align-items: null !default;
+
+// Close button
+$dialog-close-button-align-self: start !default;
+$dialog-close-button-margin-inset-x: 0.5em !default;
+
+// Sizes
+$dialog-sizes: sm, md, lg, xl !default;
+
+$dialog-widths-by-size: (
+  sm: $dialog-sm-width,
+  md: $dialog-md-width,
+  lg: $dialog-lg-width,
+  xl: $dialog-xl-width,
+) !default;
+
+// Variants
+$dialog-variants: $card-variants;
+
+$dialog-border-color-by-variant: (
+  solid: $dialog-solid-border-color,
+  subtle: $dialog-subtle-border-color,
+  outlined: $dialog-outlined-border-color,
+  ghost: $dialog-ghost-border-color,
+) !default;
+$dialog-background-color-by-variant: (
+  solid: $dialog-solid-background-color,
+  subtle: $dialog-subtle-background-color,
+  outlined: $dialog-outlined-background-color,
+  ghost: $dialog-ghost-background-color,
+) !default;
+$dialog-color-by-variant: (
+  solid: $dialog-solid-color,
+  subtle: $dialog-subtle-color,
+  outlined: $dialog-outlined-color,
+  ghost: $dialog-ghost-color,
+) !default;
+$dialog-box-shadow-by-variant: (
+  solid: $dialog-solid-box-shadow,
+  subtle: $dialog-subtle-box-shadow,
+  outlined: $dialog-outlined-box-shadow,
+  ghost: $dialog-ghost-box-shadow,
+) !default;
+
+// Variants - Unmerged
+$dialog-unmerged-box-shadow-by-variant: (
+  solid: $dialog-solid-unmerged-box-shadow,
+  subtle: $dialog-subtle-unmerged-box-shadow,
+  outlined: $dialog-outlined-unmerged-box-shadow,
+  ghost: $dialog-ghost-unmerged-box-shadow,
+) !default;
+$dialog-unmerged-separator-border-color-by-variant: (
+  solid: $dialog-solid-unmerged-separator-border-color,
+  subtle: $dialog-subtle-unmerged-separator-border-color,
+  outlined: $dialog-outlined-unmerged-separator-border-color,
+  ghost: $dialog-ghost-unmerged-separator-border-color,
+) !default;
+$dialog-unmerged-header-separator-border-color-by-variant: (
+  solid: $dialog-solid-unmerged-header-separator-border-color,
+  subtle: $dialog-subtle-unmerged-header-separator-border-color,
+  outlined: $dialog-outlined-unmerged-header-separator-border-color,
+  ghost: $dialog-ghost-unmerged-header-separator-border-color,
+) !default;
+
+// Variants - Unmerged - Body
+$dialog-unmerged-body-background-color-by-variant: (
+  solid: $dialog-solid-unmerged-body-background-color,
+  subtle: $dialog-subtle-unmerged-body-background-color,
+  outlined: $dialog-outlined-unmerged-body-background-color,
+  ghost: $dialog-ghost-unmerged-body-background-color,
+) !default;
+$dialog-unmerged-body-color-by-variant: (
+  solid: $dialog-solid-unmerged-body-color,
+  subtle: $dialog-subtle-unmerged-body-color,
+  outlined: $dialog-outlined-unmerged-body-color,
+  ghost: $dialog-ghost-unmerged-body-color,
+) !default;
+
+// Variants - Unmerged - Footer
+$dialog-unmerged-footer-background-color-by-variant: (
+  solid: $dialog-solid-unmerged-footer-background-color,
+  subtle: $dialog-subtle-unmerged-footer-background-color,
+  outlined: $dialog-outlined-unmerged-footer-background-color,
+  ghost: $dialog-ghost-unmerged-footer-background-color,
+) !default;
+$dialog-unmerged-footer-color-by-variant: (
+  solid: $dialog-solid-unmerged-footer-color,
+  subtle: $dialog-subtle-unmerged-footer-color,
+  outlined: $dialog-outlined-unmerged-footer-color,
+  ghost: $dialog-ghost-unmerged-footer-color,
+) !default;

package/scss/components/Dialog/_Dialog.scss

@@ -0,0 +1,142 @@
+@use "sass:map";
+
+@use "Dialog-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/animation" as *;
+@use "../../scss/utils/declare-var" as *;
+
+.#{$prefix}dialog {
+  $card: ".#{$prefix}card";
+  $overlay: ".#{$prefix}overlay";
+
+  box-shadow: $dialog-box-shadow;
+  z-index: $dialog-z-index;
+
+  @include declare-var(
+    --#{$prefix}animation-transform,
+    $dialog-animation-transform
+  );
+
+  &#{$card} {
+    @include declare-var(--#{$prefix}card-padding-y, $dialog-padding-y);
+    @include declare-var(--#{$prefix}card-padding-x, $dialog-padding-x);
+    @include declare-var(
+      --#{$prefix}card-merged-section-padding-y,
+      $dialog-merged-section-padding-y
+    );
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &[data-state="open"] {
+    @include accessible-animation(
+      $animation-transform-in $dialog-animation-duration
+        $dialog-animation-timing-function
+    );
+  }
+
+  &[data-state="closed"] {
+    @include accessible-animation(
+      $animation-transform-out $dialog-animation-duration
+        $dialog-animation-timing-function
+    );
+  }
+
+  &__title {
+    font-size: $dialog-title-font-size;
+    line-height: $dialog-title-line-height;
+    font-weight: $dialog-title-font-weight;
+    text-transform: $dialog-title-text-transform;
+  }
+
+  // Dialog sizes
+  @each $size in $dialog-sizes {
+    &--#{$size} {
+      width: map.get($dialog-widths-by-size, $size);
+    }
+  }
+
+  // Variants
+  @each $variant in $dialog-variants {
+    &#{$card}--#{$variant} {
+      @include declare-var(
+        --#{$prefix}card-border-color,
+        map.get($dialog-border-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-background-color,
+        map.get($dialog-background-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-color,
+        map.get($dialog-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-box-shadow,
+        map.get($dialog-box-shadow-by-variant, $variant)
+      );
+
+      // Variants - Unmerged
+      @include declare-var(
+        --#{$prefix}card-unmerged-box-shadow,
+        map.get($dialog-unmerged-box-shadow-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-unmerged-separator-border-color,
+        map.get($dialog-unmerged-separator-border-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-unmerged-header-separator-border-color,
+        map.get(
+          $dialog-unmerged-header-separator-border-color-by-variant,
+          $variant
+        )
+      );
+
+      // Variants - Unmerged - Body
+      @include declare-var(
+        --#{$prefix}card-unmerged-body-background-color,
+        map.get($dialog-unmerged-body-background-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-unmerged-body-color,
+        map.get($dialog-unmerged-body-color-by-variant, $variant)
+      );
+
+      // Variants - Unmerged - Footer
+      @include declare-var(
+        --#{$prefix}card-unmerged-footer-background-color,
+        map.get($dialog-unmerged-footer-background-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-unmerged-footer-color,
+        map.get($dialog-unmerged-footer-color-by-variant, $variant)
+      );
+    }
+  }
+
+  // Overlay (increase specificity so that this rule has priority over the
+  // overlay one)
+  &__overlay#{$overlay} {
+    align-items: $dialog-overlay-align-items;
+  }
+
+  &__close-button {
+    align-self: $dialog-close-button-align-self;
+    margin: 0 calc($dialog-close-button-margin-inset-x * -1) 0
+      calc(
+        var(--#{$prefix}card-padding-x) - $dialog-close-button-margin-inset-x
+      );
+  }
+
+  &__description {
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/scss/components/DropdownMenu/_DropdownMenu-variables.scss

@@ -0,0 +1,3 @@
+@use "../../scss/base-variables" as *;
+
+$dropdown-menu-z-index: var(--#{$prefix}z-index-dropdown) !default;

package/scss/components/DropdownMenu/_DropdownMenu.scss

@@ -0,0 +1,50 @@
+@use "DropdownMenu-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/menu/menu" as *;
+@use "../../scss/placeholders/menu/menu-variables" as *;
+@use "../../scss/placeholders/popover/popover" as *;
+@use "../../scss/utils/animation" as *;
+
+.#{$prefix}dropdown-menu {
+  $menu-list-item-action: ".#{$prefix}menu-list__item-action";
+
+  @extend %#{$prefix}popover;
+
+  max-width: var(--radix-dropdown-menu-content-available-width);
+  max-height: var(--radix-dropdown-menu-content-available-height);
+  z-index: $dropdown-menu-z-index;
+
+  &__arrow {
+    @extend %#{$prefix}popover__arrow;
+  }
+
+  :is(&__item, &__checkbox-item, &__radio-item)
+    #{$menu-list-item-action}:not(a):not(:disabled):not([data-disabled=""]):not(
+      [data-disabled="true"]
+    ) {
+    cursor: $menu-item-button-cursor;
+  }
+
+  &__sub-trigger-icon {
+    @extend %#{$prefix}menu__sub-trigger-icon;
+  }
+
+  &__checkbox,
+  &__radio {
+    @extend %#{$prefix}menu__checkable;
+  }
+
+  &__checkbox-item:is([data-state="checked"], [data-state="indeterminate"])
+    &__checkbox,
+  &__radio-item[data-state="checked"] &__radio {
+    @extend %#{$prefix}menu__checkable--checked;
+  }
+
+  &__radio {
+    @extend %#{$prefix}menu__radio;
+  }
+
+  &__radio-indicator {
+    @extend %#{$prefix}menu__radio-indicator;
+  }
+}

package/scss/components/Feedback/_Feedback-variables.scss

@@ -0,0 +1,8 @@
+@use "../../scss/base-variables" as *;
+@use "../HelperText/HelperText-variables" as *;
+
+$feedback-font-size: $helper-text-font-size !default;
+$feedback-line-height: $helper-text-line-height !default;
+$feedback-font-weight: $helper-text-font-weight !default;
+$feedback-color: var(--#{$prefix}accent-11) !default;
+$feedback-text-align: $helper-text-text-align !default;

package/scss/components/Feedback/_Feedback.scss

@@ -0,0 +1,21 @@
+@use "Feedback-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/transition" as *;
+
+.#{$prefix}feedback {
+  font-size: $feedback-font-size;
+  line-height: $feedback-line-height;
+  font-weight: $feedback-font-weight;
+  color: $feedback-color;
+
+  @if $feedback-text-align == right {
+    :not(.#{$prefix}checkbox__root):not(.#{$prefix}checkbox-group):not(
+        .#{$prefix}radio-group
+      )
+      + & {
+      text-align: $feedback-text-align;
+    }
+  }
+
+  @include accessible-transition();
+}

package/scss/components/FeedbackList/_FeedbackList-variables.scss

@@ -0,0 +1,6 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+// Feedback
+$feedback-list-feedback-margin-x: spacing(3.5) !default;
+$feedback-list-feedback-margin-y: spacing(0.5) !default;

package/scss/components/FeedbackList/_FeedbackList.scss

@@ -0,0 +1,31 @@
+@use "FeedbackList-variables" as *;
+@use "../Feedback/Feedback-variables" as *;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}feedback-list {
+  width: fit-content;
+  margin: 0;
+  padding: 0;
+
+  @if $feedback-text-align == right {
+    :not(.#{$prefix}checkbox__root):not(.#{$prefix}checkbox-group):not(
+        .#{$prefix}radio-group
+      )
+      + & {
+      margin-left: auto !important;
+    }
+  }
+
+  & > .#{$prefix}feedback {
+    margin-left: $feedback-list-feedback-margin-x !important;
+
+    & ~ .#{$prefix}feedback {
+      margin-top: $feedback-list-feedback-margin-y;
+    }
+
+    &:only-of-type {
+      list-style: none;
+      margin-left: 0 !important;
+    }
+  }
+}

package/scss/components/FeedbackPopover/_FeedbackPopover-variables.scss

@@ -0,0 +1,26 @@
+@use "../ControlAddon/ControlAddon-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+@use "../../scss/placeholders/control/control-variables" as *;
+
+$feedback-popover-max-width: 500px !default;
+$feedback-popover-max-height: 600px !default;
+$feedback-popover-padding-y: spacing(1) !default;
+$feedback-popover-padding-x: spacing(2) !default;
+
+// Button - Within control
+$feedback-popover-button-control-inset-x: calc(
+  (
+      var(--#{$prefix}icon-button-min-size) - var(
+          --#{$prefix}icon-button-font-size
+        )
+    ) /
+    2
+);
+
+// Feedback
+$feedback-popover-feedback-margin-y: spacing(0.5) !default;
+$feedback-popover-feedback-font-size: var(--#{$prefix}font-size-xs) !default;
+$feedback-popover-feedback-line-height: var(
+  --#{$prefix}line-height-xs
+) !default;

package/scss/components/FeedbackPopover/_FeedbackPopover.scss

@@ -0,0 +1,66 @@
+@use "sass:color";
+
+@use "FeedbackPopover-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/control/control-variables" as *;
+
+.#{$prefix}feedback-popover {
+  padding: $feedback-popover-padding-y $feedback-popover-padding-x;
+  max-width: min(
+    $feedback-popover-max-width,
+    var(--radix-popover-content-available-width)
+  );
+  max-height: min(
+    $feedback-popover-max-height,
+    var(--radix-popover-content-available-height)
+  );
+
+  &__button-container {
+    display: flex;
+    align-items: center;
+  }
+
+  // Cell variant
+  &__button-container[data-variant="cell"] {
+    height: 100%;
+    background-color: $control-cell-status-background-color;
+    background-image: $control-cell-status-background-image;
+
+    .#{$prefix}feedback-popover__button {
+      margin-right: calc(
+        $control-cell-padding-x - $feedback-popover-button-control-inset-x
+      );
+    }
+  }
+
+  // Within control
+  :is(.#{$prefix}input, .#{$prefix}date-range-input__container)
+    ~ &__button-container
+    &__button {
+    margin: 0
+      calc(
+        var(--#{$prefix}control-padding-x) -
+          $feedback-popover-button-control-inset-x
+      )
+      0 calc($feedback-popover-button-control-inset-x * -1);
+  }
+
+  .#{$prefix}date-range-input__container[data-variant="default"]
+    ~ &__button-container {
+    margin: 0
+      calc(
+        var(--#{$prefix}control-padding-x) -
+          $feedback-popover-button-control-inset-x
+      );
+  }
+
+  // Inner feedback
+  .#{$prefix}feedback {
+    font-size: $feedback-popover-feedback-font-size;
+    line-height: $feedback-popover-feedback-line-height;
+
+    ~ .#{$prefix}feedback {
+      margin-top: $feedback-popover-feedback-margin-y;
+    }
+  }
+}