@ostack.tech/ui 0.1.0

package/scss/components/ControlAddon/_ControlAddon.scss

@@ -0,0 +1,331 @@
+@use "sass:color";
+@use "sass:map";
+
+@use "ControlAddon-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/control/control-variables" as *;
+@use "../../scss/utils/button-reset" as *;
+@use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/maybe-important" as *;
+@use "../../scss/utils/transition" as *;
+
+.#{$prefix}control-addon {
+  align-self: var(--#{$prefix}control-addon-align-self);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: inherit;
+
+  font-size: $control-addon-font-size;
+  line-height: $control-addon-line-height;
+
+  background-color: var(--#{$prefix}control-addon-background-color);
+  color: var(--#{$prefix}control-addon-color);
+  text-shadow: var(--#{$prefix}control-addon-text-shadow);
+
+  // Focus
+  &:focus {
+    z-index: $control-addon-focus-z-index;
+  }
+  &:focus-visible {
+    outline: $control-addon-focus-outline-width solid
+      var(--#{$prefix}control-addon-outline-color);
+    outline-offset: $control-addon-focus-outline-offset;
+  }
+
+  // Margin
+  margin: 0 calc(var(--#{$prefix}control-addon-inset-x) * -1) 0
+    calc(
+      var(--#{$prefix}control-addon-margin-x) - var(
+          --#{$prefix}control-addon-inset-x
+        )
+    );
+  &:last-child {
+    margin-right: calc(
+      var(--#{$prefix}control-addon-margin-x) - var(
+          --#{$prefix}control-addon-inset-x
+        )
+    );
+  }
+  :not(&) + & {
+    margin-left: calc(var(--#{$prefix}control-addon-inset-x) * -1);
+  }
+
+  // Padding
+  padding: var(--#{$prefix}control-addon-padding-y)
+    var(--#{$prefix}control-addon-padding-x);
+
+  // Border
+  border-radius: var(--#{$prefix}control-addon-border-radius);
+  border-width: 0 var(--#{$prefix}control-addon-separator-width, 0);
+  border-style: solid;
+  border-color: var(
+    --#{$prefix}control-addon-separator-color,
+    var(--#{$prefix}control-border-color)
+  );
+  &:first-child {
+    border-top-left-radius: var(
+      --#{$prefix}control-addon-edge-border-radius,
+      var(--#{$prefix}control-addon-border-radius)
+    );
+    border-bottom-left-radius: var(
+      --#{$prefix}control-addon-edge-border-radius,
+      var(--#{$prefix}control-addon-border-radius)
+    );
+  }
+  &:first-child,
+  & + & {
+    border-left-width: 0;
+  }
+  &:last-child {
+    border-right-width: 0;
+    border-top-right-radius: var(
+      --#{$prefix}control-addon-edge-border-radius,
+      var(--#{$prefix}control-addon-border-radius)
+    );
+    border-bottom-right-radius: var(
+      --#{$prefix}control-addon-edge-border-radius,
+      var(--#{$prefix}control-addon-border-radius)
+    );
+  }
+
+  @include accessible-transition();
+
+  // Support addons as buttons or links
+  &:is(:any-link, button) {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+
+    -webkit-appearance: button;
+    -webkit-user-select: none;
+    user-select: none;
+
+    &:not(:disabled, [data-disabled]) {
+      cursor: $control-addon-button-cursor;
+    }
+
+    &:is(:disabled, [data-disabled]) {
+      cursor: $control-addon-button-disabled-cursor;
+      opacity: $control-addon-button-disabled-opacity;
+    }
+  }
+
+  // Muted style
+  &[data-muted]:not(button):not(:any-link) {
+    opacity: $control-disabled-opacity;
+  }
+
+  // Inner icon, for the typical case of an icon immediately inside the addon
+  & > .#{$prefix}icon {
+    font-size: $control-addon-icon-font-size;
+    filter: if(
+      $control-addon-text-shadow != null,
+      drop-shadow($control-addon-text-shadow),
+      null
+    );
+  }
+
+  @each $variant in $control-addon-variants {
+    &[data-variant="#{$variant}"] {
+      @include declare-var(
+        --#{$prefix}control-addon-align-self,
+        map.get($control-addon-align-self-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}control-addon-margin-x,
+        map.get($control-addon-margin-x-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}control-addon-padding-y,
+        map.get($control-addon-padding-y-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}control-addon-padding-x,
+        map.get($control-addon-padding-x-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}control-addon-inset-x,
+        map.get($control-addon-inset-x-by-variant, $variant)
+      );
+
+      @include declare-var(
+        --#{$prefix}control-addon-separator-width,
+        map.get($control-addon-separator-width-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}control-addon-border-radius,
+        map.get($control-addon-border-radius-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}control-addon-edge-border-radius,
+        map.get($control-addon-edge-border-radius-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}control-addon-separator-color,
+        map.get($control-addon-separator-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}control-addon-background-color,
+        map.get($control-addon-background-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}control-addon-color,
+        map.get($control-addon-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}control-addon-text-shadow,
+        map.get($control-addon-text-shadow-by-variant, $variant)
+      );
+
+      // Focus
+      @include declare-var(
+        --#{$prefix}control-addon-outline-color,
+        map.get($control-addon-focus-outline-color-by-variant, $variant)
+      );
+
+      // Status
+      &[data-status] {
+        @include declare-var(
+          --#{$prefix}control-addon-separator-color,
+          map.get($control-addon-status-separator-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-addon-background-color,
+          map.get($control-addon-status-background-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-addon-color,
+          map.get($control-addon-status-color-by-variant, $variant)
+        );
+
+        // Status + Focus
+        @include declare-var(
+          --#{$prefix}control-addon-outline-color,
+          map.get(
+            $control-addon-focus-status-outline-color-by-variant,
+            $variant
+          )
+        );
+      }
+
+      &:is(:any-link, button) {
+        // Button - Hover
+        &:hover:not(:disabled):not([data-disabled]):not(:active):not(
+            [data-active]
+          ):not([data-state="open"]) {
+          @include declare-var(
+            --#{$prefix}control-addon-background-color,
+            map.get(
+              $control-addon-button-hover-background-color-by-variant,
+              $variant
+            )
+          );
+          @include declare-var(
+            --#{$prefix}control-addon-color,
+            map.get($control-addon-button-hover-color-by-variant, $variant)
+          );
+
+          // Button - Hover + Status
+          &[data-status] {
+            @include declare-var(
+              --#{$prefix}control-addon-background-color,
+              map.get(
+                $control-addon-button-hover-status-background-color-by-variant,
+                $variant
+              )
+            );
+            @include declare-var(
+              --#{$prefix}control-addon-color,
+              map.get(
+                $control-addon-button-hover-status-color-by-variant,
+                $variant
+              )
+            );
+          }
+        }
+
+        // Button - Active
+        &:is(:active, [data-active]):not(:disabled):not([data-disabled]),
+        &[data-state="open"] {
+          @include declare-var(
+            --#{$prefix}control-addon-background-color,
+            map.get(
+              $control-addon-button-active-background-color-by-variant,
+              $variant
+            )
+          );
+          @include declare-var(
+            --#{$prefix}control-addon-color,
+            map.get($control-addon-button-active-color-by-variant, $variant)
+          );
+
+          // Button - Active + Status
+          &[data-status] {
+            @include declare-var(
+              --#{$prefix}control-addon-background-color,
+              map.get(
+                $control-addon-button-active-status-background-color-by-variant,
+                $variant
+              )
+            );
+            @include declare-var(
+              --#{$prefix}control-addon-color,
+              map.get(
+                $control-addon-button-active-status-color-by-variant,
+                $variant
+              )
+            );
+          }
+        }
+      }
+
+      &[data-readonly] {
+        @include declare-var(
+          --#{$prefix}control-addon-align-self,
+          map.get($control-addon-readonly-align-self-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-addon-margin-x,
+          map.get($control-addon-readonly-margin-x-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-addon-padding-y,
+          map.get($control-addon-readonly-padding-y-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-addon-padding-x,
+          map.get($control-addon-readonly-padding-x-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-addon-inset-x,
+          map.get($control-addon-readonly-inset-x-by-variant, $variant)
+        );
+
+        @include declare-var(
+          --#{$prefix}control-addon-separator-width,
+          map.get($control-addon-readonly-separator-width-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-addon-background-color,
+          map.get($control-addon-readonly-background-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-addon-border-radius,
+          map.get($control-addon-readonly-border-radius-by-variant, $variant)
+        );
+
+        &[data-status] {
+          @include declare-var(
+            --#{$prefix}control-addon-background-color,
+            map.get(
+              $control-addon-readonly-status-background-color-by-variant,
+              $variant
+            )
+          );
+        }
+      }
+    }
+  }
+}

package/scss/components/ControlCode/_ControlCode-variables.scss

@@ -0,0 +1,61 @@
+@use "../ControlAddon/ControlAddon-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/control/control-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$control-code-width: 40px !default;
+$control-code-padding-y: $control-addon-padding-y !default;
+$control-code-padding-x: $control-addon-padding-x !default;
+
+$control-code-font-size: $control-addon-font-size or $control-font-size !default;
+$control-code-line-height: $control-line-height !default;
+
+// Default variant
+$control-code-border-radius: $control-border-radius !default;
+$control-code-background-color: var(--#{$prefix}neutral-3) !default;
+$control-code-color: var(--#{$prefix}neutral-11) !default;
+
+// Default variant - Status
+$control-code-status-background-color: var(--#{$prefix}accent-3) !default;
+$control-code-status-color: var(--#{$prefix}accent-11) !default;
+
+// Cell variant
+$control-code-cell-border-radius: 0 !default;
+$control-code-cell-background-color: $control-code-background-color !default;
+$control-code-cell-color: $control-code-color !default;
+
+// Cell variant - Status
+$control-code-cell-status-background-color: var(--#{$prefix}accent-4) !default;
+$control-code-cell-status-color: $control-code-status-color !default;
+
+// Icon
+$control-code-icon-font-size: $control-addon-icon-font-size !default;
+
+// Label
+$control-code-label-margin-x: spacing(1) !default;
+
+// Variants
+$control-code-variants: $control-addon-variants !default;
+
+$control-code-border-radius-by-variant: (
+  default: $control-code-border-radius,
+  cell: $control-code-cell-border-radius,
+) !default;
+$control-code-background-color-by-variant: (
+  default: $control-code-background-color,
+  cell: $control-code-cell-background-color,
+) !default;
+$control-code-color-by-variant: (
+  default: $control-code-color,
+  cell: $control-code-cell-color,
+) !default;
+
+// Variants - Status
+$control-code-status-background-color-by-variant: (
+  default: $control-code-status-background-color,
+  cell: $control-code-cell-status-background-color,
+) !default;
+$control-code-status-color-by-variant: (
+  default: $control-code-status-color,
+  cell: $control-code-cell-status-color,
+) !default;

package/scss/components/ControlCode/_ControlCode.scss

@@ -0,0 +1,68 @@
+@use "sass:map";
+
+@use "ControlCode-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/transition" as *;
+
+.#{$prefix}control-code {
+  $icon: ".#{$prefix}icon";
+  $label-container: ".#{$prefix}label__container";
+
+  min-width: $control-code-width;
+  max-width: $control-code-width;
+  position: relative;
+  align-self: stretch;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: $control-code-padding-y $control-code-padding-x;
+
+  font-size: $control-code-font-size;
+  line-height: $control-code-line-height;
+
+  border-radius: var(--#{$prefix}control-code-border-radius);
+  background-color: var(--#{$prefix}control-code-background-color);
+  color: var(--#{$prefix}control-code-color);
+
+  @include accessible-transition();
+
+  // Variants
+  @each $variant in $control-code-variants {
+    &[data-variant="#{$variant}"] {
+      @include declare-var(
+        --#{$prefix}control-code-border-radius,
+        map.get($control-code-border-radius-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}control-code-background-color,
+        map.get($control-code-background-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}control-code-color,
+        map.get($control-code-color-by-variant, $variant)
+      );
+
+      &[data-status] {
+        @include declare-var(
+          --#{$prefix}control-code-background-color,
+          map.get($control-code-status-background-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-code-color,
+          map.get($control-code-status-color-by-variant, $variant)
+        );
+      }
+    }
+  }
+
+  // Change font size of inner icons
+  & > #{$icon} {
+    font-size: $control-code-icon-font-size;
+  }
+
+  // Add spacing to a label that exists after the control code
+  & + #{$label-container} {
+    margin-left: $control-code-label-margin-x;
+  }
+}

package/scss/components/DataTable/_DataTable.scss

@@ -0,0 +1,134 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/breakpoints" as *;
+@use "../../scss/utils/spacing" as *;
+@use "../../scss/utils/transition" as *;
+
+.#{$prefix}data-table {
+  $data-table: &;
+
+  // Clearfix due to usage of floats for the default positioning
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  // Empty message
+  &__empty-message {
+    color: $neutral-10;
+  }
+
+  // When in scrolled mode, the virtualization component uses mock rows
+  &__row[data-last-row] {
+    & > #{$data-table}__cell {
+      border-bottom-width: 0 !important;
+    }
+  }
+
+  &__cell[data-loading] {
+    padding: spacing(2.5) spacing(3) !important;
+  }
+
+  // Spinner within a cell
+  &__cell-spinner {
+    vertical-align: middle;
+  }
+
+  // Filter
+  &__filter-root {
+    max-width: 250px;
+  }
+
+  // Rows per page, pagination
+  &__rows-per-page,
+  &__pagination {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__rows-per-page-label {
+    margin-right: spacing(1);
+  }
+
+  &__rows-per-page-select-root,
+  &__pagination-select-root {
+    width: auto !important;
+  }
+
+  &__pagination-label {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  &__pagination-arrows {
+    margin-left: spacing(2);
+    flex: 0 0 auto;
+
+    & > :first-child {
+      margin-right: spacing(1);
+    }
+  }
+
+  // Default positioning (when the components aren't wrapped within other
+  // elements)
+  & > &__content-container:not(:first-child) {
+    margin-top: spacing(2);
+  }
+
+  & > &__content-container:not(:last-child) {
+    margin-bottom: spacing(2);
+  }
+
+  // The filter and the pagination float to the right by default
+  & > &__filter-root,
+  & > &__pagination,
+  & > &__selection-trigger {
+    float: right;
+    margin-bottom: spacing(2);
+    margin-left: spacing(2);
+  }
+
+  & > &__filter-root + &__content-container,
+  & > &__pagination + &__content-container {
+    // Top table content margin unneeded when the filter/pagination are placed
+    // before it
+    margin-top: 0;
+  }
+
+  & > &__content-container ~ &__filter-root,
+  & > &__content-container ~ &__pagination {
+    // Bottom margin underneath the table content should be removed due to the
+    // clearfix
+    margin-bottom: 0;
+  }
+
+  @include media-breakpoint-down(sm) {
+    &__rows-per-page,
+    &__pagination {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    &__rows-per-page-select-root,
+    &__pagination-select-root {
+      width: auto !important;
+    }
+
+    & > &__content-container:not(:first-child),
+    & > &__content-container:not(:last-child) {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    & > &__filter-root,
+    & > &__content-container,
+    & > &__rows-per-page,
+    & > &__pagination {
+      &:not(:last-child) {
+        margin-bottom: spacing(2);
+      }
+    }
+  }
+}

package/scss/components/DateInput/_DateInput.scss

@@ -0,0 +1,11 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/calendar-popover" as *;
+
+.#{$prefix}date-input {
+  $popover: ".#{$prefix}popover";
+
+  // Add box shadow to each month instead of to popover
+  &__popover#{$popover} {
+    @extend %#{$prefix}calendar-popover;
+  }
+}

package/scss/components/DateRangeInput/_DateRangeInput-variables.scss

@@ -0,0 +1,37 @@
+@use "../ControlAddon/_ControlAddon-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/control/control-variables" as *;
+
+// Default variant
+$date-range-input-inset-x: calc(
+  $control-addon-margin-x - $control-addon-margin-x / 2
+);
+
+// Default variant - Read-only
+$date-range-input-readonly-inset-x: calc(
+  #{$control-addon-readonly-margin-x or $control-addon-margin-x} -
+    #{$control-addon-readonly-margin-x or $control-addon-margin-x} / 2
+);
+
+// Cell variant
+$date-range-input-cell-inset-x: calc(
+  $control-addon-cell-margin-x - $control-addon-cell-margin-x / 2
+);
+
+// Cell variant - Read-only
+$date-range-input-cell-readonly-inset-x: calc(
+  #{$control-addon-cell-readonly-margin-x or $control-addon-cell-margin-x} -
+    #{$control-addon-cell-readonly-margin-x or $control-addon-cell-margin-x} / 2
+);
+
+// Variants
+$date-range-input-inset-x-by-variant: (
+  default: $date-range-input-inset-x,
+  cell: $date-range-input-cell-inset-x,
+);
+
+// Variants - Read-only
+$date-range-input-readonly-inset-x-by-variant: (
+  default: $date-range-input-readonly-inset-x,
+  cell: $date-range-input-cell-readonly-inset-x,
+);