@ostack.tech/ui 0.1.0

package/scss/components/Tabs/_Tabs.scss

@@ -0,0 +1,443 @@
+@use "sass:map";
+
+@use "Tabs-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/animation" as *;
+@use "../../scss/utils/button-reset" as *;
+@use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/transition" as *;
+
+.#{$prefix}tabs {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+
+  @each $variant in $tabs-variants {
+    &--#{$variant} {
+      // Tab list
+      @include declare-var(
+        --#{$prefix}tabs-tab-list-gap-x,
+        map.get($tabs-tab-list-gap-x-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}tabs-tab-list-margin-bottom,
+        map.get($tabs-tab-list-margin-bottom-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}tabs-tab-list-box-shadow,
+        map.get($tabs-tab-list-box-shadow-by-variant, $variant)
+      );
+    }
+  }
+
+  // Tab list
+  &__tab-list-root {
+    display: flex;
+    margin-bottom: var(--#{$prefix}tabs-tab-list-margin-bottom);
+    box-shadow: var(--#{$prefix}tabs-tab-list-box-shadow);
+  }
+
+  // Scrollable container
+  &__tab-list-container {
+    position: relative;
+    display: inline-block;
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: auto hidden;
+
+    // Hide scrollbar and enable momentum scroll for touch devices
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__tab-list {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  // Tab
+  &__tab {
+    all: unset;
+    box-sizing: border-box;
+    flex-shrink: 0;
+
+    padding: var(--#{$prefix}tabs-tab-padding-y)
+      var(--#{$prefix}tabs-tab-padding-x);
+
+    font-family: $tabs-tab-font-family;
+    font-size: $tabs-tab-font-size;
+    line-height: $tabs-tab-line-height;
+    font-weight: var(--#{$prefix}tabs-tab-font-weight);
+
+    box-shadow: var(--#{$prefix}tabs-tab-box-shadow);
+
+    @include button-reset();
+
+    &:disabled,
+    &[data-disabled] {
+      opacity: $tabs-tab-disabled-opacity;
+    }
+
+    &:focus {
+      z-index: $tabs-tab-focus-z-index;
+    }
+
+    &:not(:last-child) {
+      margin-right: var(--#{$prefix}tabs-tab-list-gap-x);
+    }
+
+    &:focus-visible &-inner {
+      outline: var(--#{$prefix}tabs-tab-inner-focus-outline-width) solid
+        var(--#{$prefix}tabs-tab-inner-focus-outline-color);
+      outline-offset: var(--#{$prefix}tabs-tab-inner-focus-outline-offset);
+    }
+
+    &[data-state="active"],
+    &-inner--hidden {
+      font-size: var(--#{$prefix}tabs-tab-open-font-size, $tabs-tab-font-size);
+      line-height: var(
+        --#{$prefix}tabs-tab-open-line-height,
+        $tabs-tab-line-height
+      );
+      font-weight: var(
+        --#{$prefix}tabs-tab-open-font-weight,
+        var(--#{$prefix}tabs-tab-font-weight)
+      );
+    }
+
+    @each $variant in $tabs-variants {
+      &--#{$variant} {
+        // Tab
+        @include declare-var(
+          --#{$prefix}tabs-tab-padding-y,
+          map.get($tabs-tab-padding-y-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-padding-x,
+          map.get($tabs-tab-padding-x-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-font-weight,
+          map.get($tabs-tab-font-weight-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-box-shadow,
+          map.get($tabs-tab-box-shadow-by-variant, $variant)
+        );
+
+        // Tab inner
+        @include declare-var(
+          --#{$prefix}tabs-tab-inner-min-width,
+          map.get($tabs-tab-inner-min-width-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-inner-min-height,
+          map.get($tabs-tab-inner-min-height-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-inner-padding-y,
+          map.get($tabs-tab-inner-padding-y-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-inner-padding-x,
+          map.get($tabs-tab-inner-padding-x-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-inner-border-radius,
+          map.get($tabs-tab-inner-border-radius-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-inner-background-color,
+          map.get($tabs-tab-inner-background-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-inner-color,
+          map.get($tabs-tab-inner-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-inner-box-shadow,
+          map.get($tabs-tab-inner-box-shadow-by-variant, $variant)
+        );
+
+        // Tab inner - Focus
+        @include declare-var(
+          --#{$prefix}tabs-tab-inner-focus-outline-width,
+          map.get($tabs-tab-inner-focus-outline-width-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-inner-focus-outline-color,
+          map.get($tabs-tab-inner-focus-outline-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-inner-focus-outline-offset,
+          map.get($tabs-tab-inner-focus-outline-offset-by-variant, $variant)
+        );
+
+        // Tab - Status
+        &[data-status] {
+          @include declare-var(
+            --#{$prefix}tabs-tab-box-shadow,
+            map.get($tabs-tab-status-box-shadow-by-variant, $variant)
+          );
+
+          // Tab inner - Status
+          @include declare-var(
+            --#{$prefix}tabs-tab-inner-background-color,
+            map.get(
+              $tabs-tab-inner-status-background-color-by-variant,
+              $variant
+            )
+          );
+          @include declare-var(
+            --#{$prefix}tabs-tab-inner-color,
+            map.get($tabs-tab-inner-status-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}tabs-tab-inner-box-shadow,
+            map.get($tabs-tab-inner-status-box-shadow-by-variant, $variant)
+          );
+
+          // Tab inner - Status + Focus
+          @include declare-var(
+            --#{$prefix}tabs-tab-inner-focus-outline-color,
+            map.get(
+              $tabs-tab-inner-focus-status-outline-color-by-variant,
+              $variant
+            )
+          );
+        }
+
+        // Tab inner - Hover
+        &:hover:not(:disabled):not(:active):not([data-state="active"]) {
+          @include declare-var(
+            --#{$prefix}tabs-tab-inner-background-color,
+            map.get($tabs-tab-inner-hover-background-color-by-variant, $variant)
+          );
+
+          // Tab inner - Hover + Status
+          &[data-status] {
+            @include declare-var(
+              --#{$prefix}tabs-tab-inner-background-color,
+              map.get(
+                $tabs-tab-inner-hover-status-background-color-by-variant,
+                $variant
+              )
+            );
+          }
+        }
+
+        // Tab - Open
+        @include declare-var(
+          --#{$prefix}tabs-tab-open-font-size,
+          map.get($tabs-tab-open-font-size-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-open-line-height,
+          map.get($tabs-tab-open-line-height-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}tabs-tab-open-font-weight,
+          map.get($tabs-tab-open-font-weight-by-variant, $variant)
+        );
+
+        &[data-state="active"] {
+          @include declare-var(
+            --#{$prefix}tabs-tab-box-shadow,
+            map.get($tabs-tab-open-box-shadow-by-variant, $variant)
+          );
+
+          // Tab inner - Open
+          @include declare-var(
+            --#{$prefix}tabs-tab-inner-background-color,
+            map.get($tabs-tab-inner-open-background-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}tabs-tab-inner-color,
+            map.get($tabs-tab-inner-open-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}tabs-tab-inner-box-shadow,
+            map.get($tabs-tab-inner-open-box-shadow-by-variant, $variant)
+          );
+
+          // Tab - Open + Status
+          &[data-status] {
+            @include declare-var(
+              --#{$prefix}tabs-tab-box-shadow,
+              map.get($tabs-tab-open-status-box-shadow-by-variant, $variant)
+            );
+
+            // Tab inner - Open + Status
+            @include declare-var(
+              --#{$prefix}tabs-tab-inner-background-color,
+              map.get(
+                $tabs-tab-inner-open-status-background-color-by-variant,
+                $variant
+              )
+            );
+            @include declare-var(
+              --#{$prefix}tabs-tab-inner-color,
+              map.get($tabs-tab-inner-open-status-color-by-variant, $variant)
+            );
+            @include declare-var(
+              --#{$prefix}tabs-tab-inner-box-shadow,
+              map.get(
+                $tabs-tab-inner-open-status-box-shadow-by-variant,
+                $variant
+              )
+            );
+          }
+
+          // Tab inner - Open + Hover
+          &:hover:not(:disabled):not(:active) {
+            @include declare-var(
+              --#{$prefix}tabs-tab-inner-background-color,
+              map.get(
+                $tabs-tab-inner-open-hover-background-color-by-variant,
+                $variant
+              )
+            );
+
+            // Tab inner - Open + Hover + Status
+            &[data-status] {
+              @include declare-var(
+                --#{$prefix}tabs-tab-inner-background-color,
+                map.get(
+                  $tabs-tab-inner-open-hover-status-background-color-by-variant,
+                  $variant
+                )
+              );
+            }
+          }
+        }
+
+        // Tab inner - Active
+        &:active:not(:disabled) {
+          @include declare-var(
+            --#{$prefix}tabs-tab-inner-background-color,
+            map.get(
+              $tabs-tab-inner-active-background-color-by-variant,
+              $variant
+            )
+          );
+
+          // Tab inner - Active + Status
+          &[data-status] {
+            @include declare-var(
+              --#{$prefix}tabs-tab-inner-background-color,
+              map.get(
+                $tabs-tab-inner-active-status-background-color-by-variant,
+                $variant
+              )
+            );
+          }
+        }
+      }
+    }
+  }
+
+  // Tab inner
+  &__tab-inner {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    max-width: $tabs-tab-inner-max-width;
+    min-width: var(--#{$prefix}tabs-tab-inner-min-width);
+    min-height: var(--#{$prefix}tabs-tab-inner-min-height);
+    padding: var(--#{$prefix}tabs-tab-inner-padding-y)
+      var(--#{$prefix}tabs-tab-inner-padding-x);
+    border-radius: var(--#{$prefix}tabs-tab-inner-border-radius);
+
+    background-color: var(--#{$prefix}tabs-tab-inner-background-color);
+    color: var(--#{$prefix}tabs-tab-inner-color);
+    box-shadow: var(--#{$prefix}tabs-tab-inner-box-shadow);
+
+    &:not(&--hidden) {
+      position: absolute;
+    }
+
+    &--hidden {
+      visibility: hidden;
+    }
+  }
+
+  // Tab + inner common styles
+  &__tab,
+  &__tab-inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    // Work around for issue with rendering artifacts caused by box-shadows,
+    // see: https://stackoverflow.com/questions/69658462
+    transform: translate3d(0, 0, 0);
+
+    @include accessible-transition();
+  }
+
+  // Scroll button
+  &__scroll-button {
+    position: relative;
+    min-width: auto;
+    min-height: auto;
+    padding: 0 $tabs-scroll-button-padding-x;
+    font-size: $tabs-scroll-button-font-size !important;
+    color: $tabs-scroll-button-color !important;
+
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &--left {
+      border-top-right-radius: 0;
+    }
+
+    &--right {
+      border-top-left-radius: 0;
+    }
+
+    // Overflow indicator
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: $tabs-scroll-button-overflow-indicator-width;
+      height: calc(100% + $tabs-scroll-button-overflow-indicator-extra-height);
+      top: calc($tabs-scroll-button-overflow-indicator-extra-height / -2);
+      z-index: $tabs-scroll-button-overflow-indicator-z-index;
+    }
+
+    &--left:not(:disabled) {
+      &::after {
+        right: calc($tabs-scroll-button-overflow-indicator-width * -1);
+        background-image: radial-gradient(
+          farthest-side at 0 50%,
+          $tabs-scroll-button-overflow-indicator-color,
+          transparent
+        );
+      }
+    }
+
+    &--right:not(:disabled) {
+      &::after {
+        left: calc($tabs-scroll-button-overflow-indicator-width * -1);
+        background-image: radial-gradient(
+          farthest-side at 100% 50%,
+          $tabs-scroll-button-overflow-indicator-color,
+          transparent
+        );
+      }
+    }
+  }
+
+  // Tab content
+  &__tab-content:focus-visible {
+    outline: $tabs-tab-content-focus-outline-width solid
+      $tabs-tab-content-focus-outline-color;
+  }
+}

package/scss/components/Tag/_Tag-variables.scss

@@ -0,0 +1,37 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$tag-padding-y: min(0.375em, spacing(2)) !default;
+$tag-padding-x: min(0.75em, spacing(4)) !default;
+$tag-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$tag-font-size: 0.75em !default;
+$tag-line-height: 1.25 !default;
+$tag-font-weight: $font-weight-medium !default;
+$tag-text-transform: null !default;
+$tag-animation-duration: 0.15s !default;
+$tag-animation-timing-function: ease !default;
+
+// Solid variant
+$tag-solid-background-color: var(--#{$prefix}accent-9) !default;
+$tag-solid-color: var(--#{$prefix}accent-contrast) !default;
+$tag-solid-box-shadow: null !default;
+
+// Subtle variant
+$tag-subtle-background-color: var(--#{$prefix}accent-a3) !default;
+$tag-subtle-color: var(--#{$prefix}accent-a12) !default;
+$tag-subtle-box-shadow: null !default;
+
+// Outlined variant
+$tag-outlined-background-color: null !default;
+$tag-outlined-color: var(--#{$prefix}accent-a11) !default;
+$tag-outlined-box-shadow: inset 0 0 0 2px var(--#{$prefix}accent-a11) !default;
+
+// Icon
+$tag-icon-margin-x: calc($tag-padding-x / 2) !default;
+
+// Close button
+$tag-close-button-size: 1.5em !default;
+$tag-close-button-margin-y: calc($tag-padding-y * -2) !default;
+$tag-close-button-margin-left: calc($tag-padding-x * 0.5) !default;
+$tag-close-button-margin-right: calc($tag-padding-x * -0.5) !default;
+$tag-close-button-font-size: min(1em, var(--#{$prefix}font-size-md)) !default;

package/scss/components/Tag/_Tag.scss

@@ -0,0 +1,86 @@
+@use "sass:math";
+
+@use "Tag-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/animation" as *;
+@use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/spacing" as *;
+@use "../../scss/utils/transition" as *;
+
+.#{$prefix}tag {
+  display: flex;
+  align-items: center;
+
+  padding: $tag-padding-y $tag-padding-x;
+  border-radius: $tag-border-radius;
+
+  font-size: $tag-font-size;
+  line-height: $tag-line-height;
+  font-weight: $tag-font-weight;
+  text-transform: $tag-text-transform;
+
+  background-color: var(--#{$prefix}tag-background-color);
+  color: var(--#{$prefix}tag-color);
+  box-shadow: var(--#{$prefix}tag-box-shadow);
+
+  @include accessible-transition();
+
+  &__container:not([hidden]) {
+    display: inline-flex;
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  // Pill variant
+  &--pill {
+    border-radius: 50rem;
+  }
+
+  // Variants
+  &--solid {
+    @include declare-var(
+      --#{$prefix}tag-background-color,
+      $tag-solid-background-color
+    );
+    @include declare-var(--#{$prefix}tag-color, $tag-solid-color);
+    @include declare-var(--#{$prefix}tag-box-shadow, $tag-solid-box-shadow);
+  }
+
+  &--subtle {
+    @include declare-var(
+      --#{$prefix}tag-background-color,
+      $tag-subtle-background-color
+    );
+    @include declare-var(--#{$prefix}tag-color, $tag-subtle-color);
+    @include declare-var(--#{$prefix}tag-box-shadow, $tag-subtle-box-shadow);
+  }
+
+  &--outlined {
+    @include declare-var(
+      --#{$prefix}tag-background-color,
+      $tag-outlined-background-color
+    );
+    @include declare-var(--#{$prefix}tag-color, $tag-outlined-color);
+    @include declare-var(--#{$prefix}tag-box-shadow, $tag-outlined-box-shadow);
+  }
+
+  // Icon
+  &__icon--start {
+    margin-right: $tag-icon-margin-x;
+  }
+
+  &__icon--end {
+    margin-left: $tag-icon-margin-x;
+  }
+
+  // Close button
+  &__close-button {
+    min-width: $tag-close-button-size !important;
+    min-height: $tag-close-button-size !important;
+    margin: $tag-close-button-margin-y $tag-close-button-margin-right
+      $tag-close-button-margin-y $tag-close-button-margin-left;
+    font-size: $tag-close-button-font-size;
+  }
+}