@ostack.tech/ui 0.1.0

package/scss/components/Card/_Card.scss

@@ -0,0 +1,253 @@
+@use "sass:map";
+
+@use "Card-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/transition" as *;
+
+.#{$prefix}card {
+  $card: &;
+  $button: ".#{$prefix}button";
+  $icon-button: ".#{$prefix}icon-button";
+  $collapsible-content: ".#{$prefix}collapsible__content";
+  $collapsible-trigger: ".#{$prefix}collapsible__trigger";
+  $tabs-tab-list-root: ".#{$prefix}tabs__tab-list-root";
+
+  width: 100%;
+
+  border-radius: $card-border-radius;
+  border: $card-border-width solid var(--#{$prefix}card-border-color);
+  box-shadow: var(--#{$prefix}card-box-shadow, $card-box-shadow);
+
+  font-size: $card-font-size;
+  line-height: $card-line-height;
+
+  @include declare-var(--#{$prefix}card-padding-y, $card-padding-y);
+  @include declare-var(--#{$prefix}card-padding-x, $card-padding-x);
+  @include declare-var(
+    --#{$prefix}card-merged-section-padding-y,
+    $card-merged-section-padding-y
+  );
+
+  // Card parts
+  & > :is(&__header, &__body, &__footer),
+  & > #{$collapsible-content},
+  & > #{$collapsible-content}:first-child > :is(&__header, &__body, &__footer) {
+    &:first-child {
+      border-top-left-radius: $card-border-radius;
+      border-top-right-radius: $card-border-radius;
+    }
+  }
+
+  & > :is(&__header, &__body, &__footer),
+  & > #{$collapsible-content},
+  & > #{$collapsible-content}:last-child > :is(&__header, &__body, &__footer) {
+    &:last-child {
+      border-bottom-left-radius: $card-border-radius;
+      border-bottom-right-radius: $card-border-radius;
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: $card-header-align-items;
+
+    > #{$collapsible-trigger} {
+      margin-top: calc(var(--#{$prefix}card-padding-y) * -1);
+      margin-bottom: calc(var(--#{$prefix}card-padding-y) * -1);
+      min-height: $card-collapsible-trigger-min-size;
+      min-width: $card-collapsible-trigger-min-size;
+      font-size: $card-collapsible-trigger-font-size;
+    }
+
+    > #{$tabs-tab-list-root} {
+      flex-grow: 1;
+      z-index: var(--#{$prefix}z-index-docked);
+      margin-left: calc(var(--#{$prefix}card-padding-x) * -1);
+      margin-right: calc(var(--#{$prefix}card-padding-x) * -1);
+      margin-bottom: calc(
+        var(--#{$prefix}card-padding-y) * -1 +
+          $card-tabs-tab-list-margin-y-offset
+      );
+      padding-left: max(
+        var(--#{$prefix}card-padding-x) - var(--#{$prefix}tabs-tab-padding-x),
+        var(--#{$prefix}tabs-tab-margin-x, 0)
+      );
+      padding-right: max(
+        var(--#{$prefix}card-padding-x) - var(--#{$prefix}tabs-tab-padding-x),
+        var(--#{$prefix}tabs-tab-margin-x, 0)
+      );
+    }
+  }
+
+  &__title {
+    flex: 1;
+    margin: 0;
+    font-size: $card-title-font-size;
+    line-height: $card-title-line-height;
+    font-weight: $card-title-font-weight;
+    text-transform: $card-title-text-transform;
+  }
+
+  :is(&__body, &__footer) > &__title {
+    margin-bottom: calc(var(--#{$prefix}card-merged-section-padding-y) * 2);
+  }
+
+  &__footer {
+    display: flex;
+    align-items: $card-footer-align-items;
+    justify-content: $card-footer-justify-content;
+
+    & > :is(#{$button}, #{$icon-button}):not(:first-child) {
+      margin-left: $card-footer-button-margin-x;
+    }
+  }
+
+  // Unmerged
+  &:not(&--merged) {
+    color: $card-unmerged-color;
+
+    // Add appropriate padding to each section
+    :is(#{$card}__header, #{$card}__body, #{$card}__footer) {
+      padding: var(--#{$prefix}card-padding-y) var(--#{$prefix}card-padding-x);
+    }
+
+    // Separator between sections
+    > :is(#{$card}__header, #{$card}__body, #{$card}__footer):not(:first-child),
+    > #{$collapsible-content}:not(:first-child)
+      > :is(#{$card}__header, #{$card}__body, #{$card}__footer) {
+      border-top: $card-unmerged-separator-border-width solid
+        var(
+          --#{$prefix}card-unmerged-separator-border-color,
+          var(--#{$prefix}card-border-color)
+        );
+    }
+
+    // Width of header separator
+    &:is(#{$card}--solid, #{$card}--subtle)
+      > #{$card}__header
+      + :is(#{$card}__body, #{$card}__footer),
+    &:is(#{$card}--solid, #{$card}--subtle)
+      > #{$card}__header
+      + #{$collapsible-content}
+      > :is(#{$card}__body, #{$card}__footer):first-child {
+      border-top-color: var(
+        --#{$prefix}card-unmerged-header-separator-border-color,
+        var(
+          --#{$prefix}card-unmerged-separator-border-color,
+          var(--#{$prefix}card-border-color)
+        )
+      );
+    }
+
+    #{$card}__header {
+      background-color: var(--#{$prefix}card-background-color);
+      color: var(--#{$prefix}card-color, $card-unmerged-color);
+      box-shadow: var(--#{$prefix}card-unmerged-box-shadow);
+    }
+
+    #{$card}__body {
+      background-color: var(--#{$prefix}card-unmerged-body-background-color);
+      color: var(--#{$prefix}card-unmerged-body-color, $card-unmerged-color);
+    }
+
+    #{$card}__footer {
+      background-color: var(
+        --#{$prefix}card-unmerged-footer-background-color,
+        var(--#{$prefix}card-unmerged-body-background-color)
+      );
+      color: var(
+        --#{$prefix}card-unmerged-footer-color,
+        var(--#{$prefix}card-unmerged-body-color, $card-unmerged-color)
+      );
+    }
+  }
+
+  // Merged
+  &--merged {
+    background-color: var(--#{$prefix}card-background-color);
+    color: var(--#{$prefix}card-color);
+
+    @include accessible-transition();
+
+    :is(#{$card}__header, #{$card}__body, #{$card}__footer) {
+      padding: var(--#{$prefix}card-merged-section-padding-y)
+        var(--#{$prefix}card-padding-x);
+    }
+
+    > :is(#{$card}__header, #{$card}__body, #{$card}__footer),
+    > #{$collapsible-content}:first-child
+      > :is(#{$card}__header, #{$card}__body, #{$card}__footer) {
+      &:first-child {
+        padding-top: var(--#{$prefix}card-padding-y);
+      }
+    }
+
+    > :is(#{$card}__header, #{$card}__body, #{$card}__footer),
+    > #{$collapsible-content}:last-child
+      > :is(#{$card}__header, #{$card}__body, #{$card}__footer) {
+      &:last-child {
+        padding-bottom: var(--#{$prefix}card-padding-y);
+      }
+    }
+  }
+
+  // Variants
+  @each $variant in $card-variants {
+    &--#{$variant} {
+      @include declare-var(
+        --#{$prefix}card-border-color,
+        map.get($card-border-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-background-color,
+        map.get($card-background-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-color,
+        map.get($card-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-box-shadow,
+        map.get($card-box-shadow-by-variant, $variant)
+      );
+
+      // Variants - Unmerged
+      @include declare-var(
+        --#{$prefix}card-unmerged-box-shadow,
+        map.get($card-unmerged-box-shadow-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-unmerged-separator-border-color,
+        map.get($card-unmerged-separator-border-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-unmerged-header-separator-border-color,
+        map.get(
+          $card-unmerged-header-separator-border-color-by-variant,
+          $variant
+        )
+      );
+
+      // Variants - Unmerged - Body
+      @include declare-var(
+        --#{$prefix}card-unmerged-body-background-color,
+        map.get($card-unmerged-body-background-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-unmerged-body-color,
+        map.get($card-unmerged-body-color-by-variant, $variant)
+      );
+
+      // Variants - Unmerged - Footer
+      @include declare-var(
+        --#{$prefix}card-unmerged-footer-background-color,
+        map.get($card-unmerged-footer-background-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}card-unmerged-footer-color,
+        map.get($card-unmerged-footer-color-by-variant, $variant)
+      );
+    }
+  }
+}

package/scss/components/Checkbox/_Checkbox-variables.scss

@@ -0,0 +1,25 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/control/control-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$checkbox-border-radius: var(--#{$prefix}border-radius-sm) !default;
+
+// Container
+$checkbox-container-cell-padding-x: spacing(3) !default;
+$checkbox-container-cell-background-color: $control-cell-background-color !default;
+$checkbox-container-cell-background-image: $control-cell-background-image !default;
+
+// Status
+$checkbox-container-cell-status-background-color: $control-cell-status-background-color !default;
+$checkbox-container-cell-status-background-image: $control-cell-status-background-image !default;
+
+// Read-only
+$checkbox-container-cell-readonly-background-color: $control-cell-readonly-background-color !default;
+$checkbox-container-cell-readonly-background-image: $control-cell-readonly-background-image !default;
+
+// Read-only + status
+$checkbox-container-cell-readonly-status-background-color: $control-cell-readonly-status-background-color !default;
+$checkbox-container-cell-readonly-status-background-image: $control-cell-readonly-status-background-image !default;
+
+// Indicator
+$checkbox-indicator-font-size: var(--#{$prefix}font-size-sm) !default;

package/scss/components/Checkbox/_Checkbox.scss

@@ -0,0 +1,106 @@
+@use "sass:color";
+@use "sass:map";
+
+@use "Checkbox-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/checkable/checkable" as *;
+@use "../../scss/placeholders/checkable/checkable-variables" as *;
+@use "../../scss/utils/css-color-functions" as *;
+
+.#{$prefix}checkbox {
+  $checkbox: &;
+
+  @extend %#{$prefix}checkable;
+
+  border-radius: $checkbox-border-radius;
+
+  // Root component
+  &__root {
+    @extend %#{$prefix}checkable__root;
+
+    &[data-variant="cell"] {
+      @extend %#{$prefix}checkable__root--cell;
+    }
+  }
+
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &[data-variant="cell"] {
+      width: 100%;
+      height: 100%;
+      padding: 0 $checkbox-container-cell-padding-x;
+      background-color: $checkbox-container-cell-background-color;
+      background-image: $checkbox-container-cell-background-image;
+
+      &[data-disabled][data-status] {
+        background-color: css-transparentize(
+          $checkable-status-background-color,
+          $checkable-disabled-opacity
+        );
+      }
+
+      &[data-status] {
+        background-color: $checkbox-container-cell-status-background-color;
+        background-image: $checkbox-container-cell-status-background-image;
+      }
+
+      &[data-readonly] {
+        background-color: $checkbox-container-cell-readonly-background-color;
+        background-image: $checkbox-container-cell-readonly-background-image;
+
+        &[data-status] {
+          background-color: $checkbox-container-cell-readonly-status-background-color;
+          background-image: $checkbox-container-cell-readonly-status-background-image;
+        }
+
+        &[data-disabled] {
+          background-color: css-transparentize(
+            $checkable-readonly-background-color,
+            $checkable-disabled-opacity
+          );
+
+          &[data-status] {
+            background-color: css-transparentize(
+              $checkable-readonly-status-background-color,
+              $checkable-disabled-opacity
+            );
+          }
+        }
+      }
+    }
+  }
+
+  // Checkbox code
+  &__code {
+    @extend %#{$prefix}checkable__code;
+  }
+
+  // Checkbox label
+  &__label {
+    @extend %#{$prefix}checkable__label;
+
+    #{$checkbox}[data-state="checked"] ~ &-container > &,
+    #{$checkbox}[data-state="indeterminate"] ~ &-container > & {
+      @extend %#{$prefix}checkable__label--checked;
+    }
+
+    #{$checkbox}:disabled ~ &-container > & {
+      @extend %#{$prefix}checkable__label--disabled;
+    }
+  }
+
+  // Checkbox indicator
+  &__indicator {
+    @extend %#{$prefix}checkable__indicator;
+
+    font-size: $checkbox-indicator-font-size;
+  }
+
+  // Spinner
+  &__spinner {
+    @extend %#{$prefix}checkable__spinner;
+  }
+}

package/scss/components/CheckboxGroup/_CheckboxGroup.scss

@@ -0,0 +1,68 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/checkable-group/checkable-group" as *;
+
+.#{$prefix}checkbox-group {
+  $checkbox-group-block: "#{&}:not(#{&}--inline)";
+  $checkbox-group-inline: #{&}--inline;
+  $checkbox-root: ".#{$prefix}checkbox__root";
+  $checkbox-code: ".#{$prefix}checkbox__code";
+
+  @extend %#{$prefix}checkable-group;
+
+  &[data-variant="cell"] {
+    @extend %#{$prefix}checkable-group--cell;
+  }
+
+  // Container styles
+  &__container {
+    @extend %#{$prefix}checkable-group__container;
+
+    &[data-variant="cell"] {
+      @extend %#{$prefix}checkable-group__container--cell;
+    }
+
+    #{$checkbox-group-inline} > & {
+      @extend %#{$prefix}checkable-group__container--inline;
+    }
+  }
+
+  // Add margin between checkboxs
+  &__container > #{$checkbox-root}:not(:first-child) {
+    #{$checkbox-group-block} > & {
+      @extend %#{$prefix}checkable-group__checkable--not-first--block;
+    }
+
+    #{$checkbox-group-inline} > & {
+      @extend %#{$prefix}checkable-group__checkable--not-first--inline;
+    }
+  }
+
+  // Set spacing between the checkbox group code and the checkboxs
+  &__code + &__container[data-variant="default"] {
+    #{$checkbox-group-block} > & > #{$checkbox-root},
+    #{$checkbox-group-inline} > & > #{$checkbox-root}:first-child {
+      // When the checkbox doesn't have a code
+      & > :first-child {
+        @extend %#{$prefix}checkable-group--default-coded__checkable__first-child;
+      }
+
+      // When the checkbox has a code
+      & > #{$checkbox-code}:first-child {
+        @extend %#{$prefix}checkable-group--default-coded__checkable--coded__first-child;
+      }
+    }
+  }
+
+  // End container
+  &__end-container {
+    @extend %#{$prefix}checkable-group__end-container;
+
+    &[data-variant="cell"] {
+      @extend %#{$prefix}checkable-group__end-container--cell;
+    }
+  }
+
+  &__spinner {
+    @extend %#{$prefix}checkable-group__spinner;
+  }
+}

package/scss/components/CloseButton/_CloseButton-variables.scss

@@ -0,0 +1,2 @@
+$close-button-size: 1.75em !default;
+$close-button-opacity: 0.8 !default;

package/scss/components/CloseButton/_CloseButton.scss

@@ -0,0 +1,14 @@
+@use "CloseButton-variables" as *;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}close-button {
+  min-height: $close-button-size !important;
+  min-width: $close-button-size !important;
+
+  color: inherit !important;
+  opacity: $close-button-opacity;
+
+  &:hover:not(:disabled, [data-disabled]) {
+    opacity: 1;
+  }
+}

package/scss/components/Code/_Code-variables.scss

@@ -0,0 +1,16 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$code-padding-y: spacing(0.4) !default;
+$code-padding-x: spacing(1) !default;
+$code-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$code-font-family: var(--#{$prefix}font-family-code) !default;
+$code-font-weight: $font-weight-normal !default;
+$code-font-size: 0.975em !default;
+$code-line-height: 1.25 !default;
+$code-background-color: var(--#{$prefix}accent-a3) !default;
+$code-color: var(--#{$prefix}accent-a11) !default;
+
+// Block
+$code-block-padding-y: spacing(2.5) !default;
+$code-block-padding-x: spacing(4) !default;

package/scss/components/Code/_Code.scss

@@ -0,0 +1,30 @@
+@use "Code-variables" as *;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}code {
+  padding: $code-padding-y $code-padding-x;
+  border-radius: $code-border-radius;
+
+  font-family: $code-font-family;
+  font-weight: $code-font-weight;
+  font-size: $code-font-size;
+  line-height: $code-line-height;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+
+  background-color: $code-background-color;
+  color: $code-color;
+
+  // Display as a code block
+  pre > & {
+    display: block;
+    padding: $code-block-padding-y $code-block-padding-x;
+    white-space: inherit;
+    overflow: auto;
+  }
+
+  // Inherit link colour
+  a > & {
+    color: inherit;
+  }
+}

package/scss/components/Collapsible/_Collapsible-variables.scss

@@ -0,0 +1,5 @@
+@use "../../scss/utils/spacing" as *;
+
+$collapsible-padding: spacing(1) !default;
+$collapsible-animation-duration: 0.35s !default;
+$collapsible-animation-timing-function: ease !default;

package/scss/components/Collapsible/_Collapsible.scss

@@ -0,0 +1,56 @@
+@use "Collapsible-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/animation" as *;
+@use "../../scss/utils/declare-var" as *;
+
+.#{$prefix}collapsible {
+  &__trigger {
+    color: inherit !important;
+  }
+
+  &__content {
+    overflow: hidden;
+
+    &[data-direction="vertical"] {
+      @include declare-var(
+        --#{$prefix}animation-height,
+        var(--radix-collapsible-content-height)
+      );
+
+      &[data-state="open"] {
+        @include accessible-animation(
+          $animation-expand-vertical $collapsible-animation-duration
+            $collapsible-animation-timing-function
+        );
+      }
+
+      &[data-state="closed"] {
+        @include accessible-animation(
+          $animation-collapse-vertical $collapsible-animation-duration
+            $collapsible-animation-timing-function
+        );
+      }
+    }
+
+    &[data-direction="horizontal"] {
+      @include declare-var(
+        --#{$prefix}animation-width,
+        var(--radix-collapsible-content-width)
+      );
+
+      &[data-state="open"] {
+        @include accessible-animation(
+          $animation-expand-horizontal $collapsible-animation-duration
+            $collapsible-animation-timing-function
+        );
+      }
+
+      &[data-state="closed"] {
+        @include accessible-animation(
+          $animation-collapse-horizontal $collapsible-animation-duration
+            $collapsible-animation-timing-function
+        );
+      }
+    }
+  }
+}

package/scss/components/CommandMenu/_CommandMenu-variables.scss

@@ -0,0 +1,66 @@
+@use "../Dialog/Dialog-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/menu/menu-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$command-menu-border-width: 1px !default;
+$command-menu-border-color: var(--#{$prefix}neutral-a7) !default;
+$command-menu-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$command-menu-background-color: var(--#{$prefix}background-color) !default;
+$command-menu-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
+
+// Overlay
+$command-menu-overlay-align-items: null !default;
+
+// Dialog
+$command-menu-dialog-box-shadow: $dialog-box-shadow !default;
+$command-menu-dialog-animation-transform: $dialog-animation-transform !default;
+$command-menu-dialog-animation-duration: $dialog-animation-duration !default;
+$command-menu-dialog-animation-timing-function: $dialog-animation-timing-function !default;
+$command-menu-dialog-z-index: $dialog-z-index !default;
+
+$command-menu-dialog-sm-width: $dialog-sm-width !default;
+$command-menu-dialog-md-width: $dialog-md-width !default;
+$command-menu-dialog-lg-width: $dialog-lg-width !default;
+$command-menu-dialog-xl-width: $dialog-xl-width !default;
+
+// Search
+$command-menu-search-separator-width: $command-menu-border-width !default;
+$command-menu-search-separator-color: var(--#{$prefix}neutral-7) !default;
+$command-menu-search-padding-y: calc(
+  $menu-item-margin-y + $menu-item-padding-y
+) !default;
+
+// List
+$command-menu-list-max-height: 490px !default;
+$command-menu-list-transition-duration: 0.05s !default;
+$command-menu-list-transition-timing-function: ease !default;
+
+// Item
+$command-menu-item-button-cursor: $menu-item-button-cursor !default;
+
+// Loading
+$command-menu-loading-padding-y: $menu-item-padding-y !default;
+$command-menu-loading-padding-x: $menu-item-padding-x !default;
+$command-menu-loading-text-align: center !default;
+
+// Spinner
+$command-menu-spinner-font-size: var(--#{$prefix}font-size-lg) !default;
+
+// Empty message
+$command-menu-empty-message-padding-y: $menu-item-padding-y !default;
+$command-menu-empty-message-padding-x: calc(
+  $menu-item-margin-x + $menu-item-padding-x
+) !default;
+$command-menu-empty-message-color: var(--#{$prefix}neutral-a10) !default;
+$command-menu-empty-message-text-align: null !default;
+
+// Dialog sizes
+$command-menu-dialog-sizes: sm, md, lg, xl !default;
+
+$command-menu-dialog-widths-by-size: (
+  sm: $command-menu-dialog-sm-width,
+  md: $command-menu-dialog-md-width,
+  lg: $command-menu-dialog-lg-width,
+  xl: $command-menu-dialog-xl-width,
+) !default;