@ostack.tech/ui 0.1.0

package/scss/components/Toast/_Toast.scss

@@ -0,0 +1,181 @@
+@use "sass:math";
+
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/notification/notification" as *;
+@use "../../scss/placeholders/notification/notification-variables" as *;
+@use "../../scss/utils/animation" as *;
+@use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/spacing" as *;
+
+.#{$prefix}toast {
+  $toast: &;
+
+  @extend %#{$prefix}notification;
+
+  $collapse-animation-duration: 0.1s;
+  $toast-animation-duration: 0.15s;
+  $total-animation-duration: $collapse-animation-duration +
+    $toast-animation-duration;
+
+  // Root element (which slides)
+  &__root {
+    border-radius: var(--#{$prefix}border-radius-sm);
+    box-shadow: $box-shadow-sm;
+
+    &:focus-visible {
+      outline: 0;
+      box-shadow:
+        $box-shadow-sm,
+        0 0 0 2px $neutral-12;
+    }
+
+    &[data-state="open"] {
+      @keyframes #{$prefix}toast-open {
+        from {
+          transform: translateX(
+            calc(100% + var(--#{$prefix}toast-viewport-padding))
+          );
+        }
+        #{math.div($toast-animation-duration * 100%, $total-animation-duration)} {
+          transform: translateX(
+            calc(100% + var(--#{$prefix}toast-viewport-padding))
+          );
+        }
+        to {
+          transform: translateX(0);
+        }
+      }
+      @include accessible-animation(
+        #{$prefix}toast-open $total-animation-duration ease-out
+      );
+    }
+
+    &[data-state="closed"] {
+      @keyframes #{$prefix}toast-close {
+        from {
+          opacity: 1;
+        }
+        #{math.div($toast-animation-duration * 100%, $total-animation-duration)} {
+          opacity: 0;
+        }
+        to {
+          opacity: 0;
+        }
+      }
+      @include accessible-animation(
+        $total-animation-duration linear #{$prefix}toast-close
+      );
+    }
+
+    &[data-swipe="move"] {
+      transform: translateX(var(--radix-toast-swipe-move-x));
+    }
+
+    &[data-swipe="cancel"] {
+      transform: translateX(0);
+      transition: transform $toast-animation-duration ease-out;
+    }
+
+    &[data-swipe="end"] {
+      animation: #{$prefix}toast-swipe-close $total-animation-duration ease-out;
+      @keyframes #{$prefix}toast-swipe-close {
+        from {
+          transform: translateX(var(--radix-toast-swipe-end-x));
+        }
+        #{math.div($toast-animation-duration * 100%, $total-animation-duration)} {
+          transform: translateX(
+            calc(100% + var(--#{$prefix}toast-viewport-padding))
+          );
+        }
+        to {
+          transform: translateX(
+            calc(100% + var(--#{$prefix}toast-viewport-padding))
+          );
+        }
+      }
+    }
+
+    & + & {
+      margin-top: spacing(1);
+    }
+  }
+
+  // Collapsible container
+  &__container {
+    overflow: hidden;
+
+    &[data-state="open"] {
+      @keyframes #{$prefix}toast-collapsible-open {
+        from {
+          height: 0;
+        }
+        #{math.div($collapse-animation-duration * 100%, $total-animation-duration)} {
+          height: var(--radix-collapsible-content-height);
+        }
+        to {
+          height: var(--radix-collapsible-content-height);
+        }
+      }
+      @include accessible-animation(
+        #{$prefix}toast-collapsible-open $total-animation-duration ease
+      );
+    }
+
+    &[data-state="closed"] {
+      @keyframes #{$prefix}toast-collapsible-close {
+        from {
+          height: var(--radix-collapsible-content-height);
+        }
+        #{math.div($toast-animation-duration * 100%, $total-animation-duration)} {
+          height: var(--radix-collapsible-content-height);
+        }
+        to {
+          height: 0;
+        }
+      }
+      @include accessible-animation(
+        #{$prefix}toast-collapsible-close $total-animation-duration ease
+      );
+    }
+  }
+
+  &__viewport {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+
+    display: flex;
+    flex-direction: column;
+    width: 420px;
+    max-width: 100vw;
+    margin: 0;
+    @include declare-var(--#{$prefix}toast-viewport-padding, spacing(2));
+    padding: var(--#{$prefix}toast-viewport-padding);
+    outline: none;
+
+    list-style: none;
+    z-index: $z-index-toast;
+  }
+
+  &__icon {
+    @extend %#{$prefix}notification__icon;
+  }
+
+  &__title {
+    @extend %#{$prefix}notification__title;
+  }
+
+  &__action-container {
+    @extend %#{$prefix}notification__action-container;
+  }
+
+  &__close-button {
+    @extend %#{$prefix}notification__close-button;
+  }
+
+  @each $variant in $notification-variants {
+    &--#{$variant} {
+      @extend %#{$prefix}notification--#{$variant};
+    }
+  }
+}

package/scss/components/Tooltip/_Tooltip-variables.scss

@@ -0,0 +1,21 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$tooltip-max-width: 200px !default;
+$tooltip-max-height: 600px !default;
+$tooltip-padding-y: spacing(1) !default;
+$tooltip-padding-x: spacing(2) !default;
+$tooltip-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$tooltip-font-size: var(--#{$prefix}font-size-xs) !default;
+$tooltip-line-height: var(--#{$prefix}line-height-xs) !default;
+$tooltip-background-color: var(--#{$prefix}neutral-12) !default;
+$tooltip-color: var(--#{$prefix}neutral-1) !default;
+$tooltip-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
+$tooltip-z-index: var(--#{$prefix}z-index-tooltip) !default;
+$tooltip-animation-duration: var(--#{$prefix}animation-fade-duration) !default;
+$tooltip-animation-timing-function: var(
+  --#{$prefix}animation-fade-timing-function
+) !default;
+
+// Arrow
+$tooltip-arrow-color: $tooltip-background-color !default;

package/scss/components/Tooltip/_Tooltip.scss

@@ -0,0 +1,44 @@
+@use "Tooltip-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/animation" as *;
+
+.#{$prefix}tooltip {
+  max-width: min(
+    $tooltip-max-width,
+    var(--radix-tooltip-content-available-width)
+  );
+  max-height: min(
+    $tooltip-max-height,
+    var(--radix-tooltip-content-available-height)
+  );
+  padding: $tooltip-padding-y $tooltip-padding-x;
+  border-radius: $tooltip-border-radius;
+
+  font-size: $tooltip-font-size;
+  line-height: $tooltip-line-height;
+
+  background-color: $tooltip-background-color;
+  color: $tooltip-color;
+  box-shadow: $tooltip-box-shadow;
+
+  z-index: $tooltip-z-index;
+
+  &[data-state="delayed-open"] {
+    @include accessible-animation(
+      $animation-fade-in $tooltip-animation-duration
+        $tooltip-animation-timing-function
+    );
+  }
+
+  &[data-state="closed"] {
+    @include accessible-animation(
+      $animation-fade-out $tooltip-animation-duration
+        $tooltip-animation-timing-function
+    );
+  }
+
+  // Arrow styles
+  &__arrow {
+    fill: $tooltip-arrow-color;
+  }
+}

package/scss/index.scss

@@ -0,0 +1,57 @@
+@forward "utils";
+
+// Helpers
+@forward "scss/helpers/visually-hidden";
+
+// Components
+@forward "components/Alert/Alert";
+@forward "components/Button/Button";
+@forward "components/ButtonGroup/ButtonGroup";
+@forward "components/Calendar/Calendar";
+@forward "components/Card/Card";
+@forward "components/Checkbox/Checkbox";
+@forward "components/CheckboxGroup/CheckboxGroup";
+@forward "components/CloseButton/CloseButton";
+@forward "components/Code/Code";
+@forward "components/Collapsible/Collapsible";
+@forward "components/CommandMenu/CommandMenu";
+@forward "components/Container/Container";
+@forward "components/ControlAddon/ControlAddon";
+@forward "components/ControlCode/ControlCode";
+@forward "components/DataTable/DataTable";
+@forward "components/DateInput/DateInput";
+@forward "components/DateRangeInput/DateRangeInput";
+@forward "components/Dialog/Dialog";
+@forward "components/DropdownMenu/DropdownMenu";
+@forward "components/Feedback/Feedback";
+@forward "components/FeedbackList/FeedbackList";
+@forward "components/FeedbackPopover/FeedbackPopover";
+@forward "components/Field/Field";
+@forward "components/FieldGroup/FieldGroup";
+@forward "components/Grid/Grid";
+@forward "components/Heading/Heading";
+@forward "components/HelperText/HelperText";
+@forward "components/Icon/Icon";
+@forward "components/IconButton/IconButton";
+@forward "components/Input/Input";
+@forward "components/Keyboard/Keyboard";
+@forward "components/Label/Label";
+@forward "components/Link/Link";
+@forward "components/Mark/Mark";
+@forward "components/MenuList/MenuList";
+@forward "components/Output/Output";
+@forward "components/Overlay/Overlay";
+@forward "components/Popover/Popover";
+@forward "components/RadioGroup/Radio";
+@forward "components/RadioGroup/RadioGroup";
+@forward "components/Root/Root";
+@forward "components/Select/Select";
+@forward "components/Separator/Separator";
+@forward "components/Spinner/Spinner";
+@forward "components/Stack/Stack";
+@forward "components/Stepper/Stepper";
+@forward "components/Table/Table";
+@forward "components/Tabs/Tabs";
+@forward "components/Tag/Tag";
+@forward "components/Toast/Toast";
+@forward "components/Tooltip/Tooltip";