@ostack.tech/ui 0.1.0

package/scss/components/Field/_Field.scss

@@ -0,0 +1,51 @@
+@use "../ControlCode/ControlCode-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/spacing" as *;
+
+.#{$prefix}field {
+  width: 100%;
+
+  & > .#{$prefix}control-code,
+  & > .#{$prefix}label__container {
+    margin-bottom: spacing(1);
+  }
+
+  .#{$prefix}helper-text,
+  .#{$prefix}feedback-list:not(:empty),
+  .#{$prefix}feedback {
+    margin-top: spacing(1);
+
+    ~ .#{$prefix}helper-text,
+    ~ .#{$prefix}feedback-list:not(:empty),
+    ~ .#{$prefix}feedback {
+      margin-top: spacing(0.5);
+    }
+  }
+
+  &[data-variant="cell"] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 100%;
+  }
+
+  // Always add (code sized) margin to the helper text or feedback when the
+  // control has a code; however, only add this margin to the label when the
+  // label is a direct child since the margin is unneeded when being displayed
+  // inline
+  &[data-has-code] {
+    // Code width + small margin
+    & > .#{$prefix}label__container,
+    .#{$prefix}helper-text,
+    .#{$prefix}feedback {
+      margin-left: calc($control-code-width + spacing(0.5));
+    }
+
+    // Add a padding to to the feedback list instead of a margin so that we can
+    // use `margin-left: auto;` when right-aligning feedbacks
+    .#{$prefix}feedback-list {
+      padding-left: calc($control-code-width + spacing(0.5));
+    }
+  }
+}

package/scss/components/FieldGroup/_FieldGroup-variables.scss

@@ -0,0 +1,31 @@
+@use "sass:color";
+@use "../ControlCode/ControlCode-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+// Field group body
+$field-group-body-margin-top: spacing(3) !default;
+$field-group-body-padding-left: spacing(12) !default;
+$field-group-body-padding-left-sm: spacing(4) !default;
+
+// Field group code
+$field-group-code-width: $control-code-width !default;
+$field-group-code-padding-y: spacing(1) !default;
+$field-group-code-padding-x: spacing(0.5) !default;
+$field-group-code-margin-x: spacing(2) !default;
+$field-group-code-font-size: var(--#{$prefix}font-size-sm) !default;
+$field-group-code-line-height: var(--#{$prefix}line-height-sm) !default;
+$field-group-code-font-weight: $font-weight-semibold !default;
+$field-group-code-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$field-group-code-border-color: color.adjust(
+  $primary-6,
+  $lightness: 10%
+) !default;
+$field-group-code-background-color: var(--#{$prefix}background-color) !default;
+$field-group-code-color: $primary-9 !default;
+
+// Field group title
+$field-group-title-font-size: var(--#{$prefix}font-size-lg) !default;
+$field-group-title-line-height: var(--#{$prefix}line-height-lg) !default;
+$field-group-title-font-weight: $font-weight-semibold !default;
+$field-group-title-color: color.adjust($primary-11, $lightness: -5%) !default;

package/scss/components/FieldGroup/_FieldGroup.scss

@@ -0,0 +1,68 @@
+@use "sass:color";
+
+@use "FieldGroup-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/breakpoints" as *;
+@use "../../scss/utils/declare-var" as *;
+
+.#{$prefix}field-group {
+  $collapsible-trigger: ".#{$prefix}collapsible__trigger";
+
+  @include declare-var(
+    --#{$prefix}field-group-body-padding-left,
+    $field-group-body-padding-left
+  );
+
+  &__header {
+    display: flex;
+    align-items: baseline;
+
+    & > #{$collapsible-trigger}:last-child {
+      margin-left: auto;
+    }
+  }
+
+  &__code {
+    min-width: $field-group-code-width;
+    max-width: $field-group-code-width;
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: $field-group-code-padding-y $field-group-code-padding-x;
+    margin-right: $field-group-code-margin-x;
+
+    font-size: $field-group-code-font-size;
+    line-height: $field-group-code-line-height;
+    font-weight: $field-group-code-font-weight;
+
+    border: 1px solid $field-group-code-border-color;
+    border-radius: $field-group-code-border-radius;
+    background-color: $field-group-code-background-color;
+    color: $field-group-code-color;
+  }
+
+  &__title {
+    margin: 0;
+
+    font-size: $field-group-title-font-size;
+    line-height: $field-group-title-line-height;
+    font-weight: $field-group-title-font-weight;
+    color: $field-group-title-color;
+  }
+
+  &__header + &__body {
+    margin-top: $field-group-body-margin-top;
+  }
+
+  &__header[data-has-code] + &__body {
+    padding-left: var(--#{$prefix}field-group-body-padding-left);
+  }
+
+  @include media-breakpoint-down(sm) {
+    @include declare-var(
+      --#{$prefix}field-group-body-padding-left,
+      $field-group-body-padding-left-sm
+    );
+  }
+}

package/scss/components/Grid/_Grid.scss

@@ -0,0 +1,101 @@
+@use "sass:map";
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/breakpoints" as *;
+@use "../../scss/utils/responsive-values" as *;
+@use "../../scss/utils/space-toggle" as *;
+@use "../../scss/utils/spacing" as *;
+
+.#{$prefix}grid {
+  $grid: &;
+  $default-columns: 12;
+  $default-row-gap: spacing(5);
+  $default-column-gap: spacing(5);
+
+  min-width: 0;
+
+  // Grid container
+  &__container {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: calc(var(--#{$prefix}grid-row-gap) * -1);
+    margin-left: calc(var(--#{$prefix}grid-column-gap) / -2);
+    margin-right: calc(var(--#{$prefix}grid-column-gap) / -2);
+
+    @include responsive-values(
+      --#{$prefix}grid,
+      (
+        row-gap: $default-row-gap,
+        column-gap: $default-column-gap,
+      )
+    );
+  }
+
+  // Grid item
+  &__item {
+    max-width: 100%;
+    padding-top: var(--#{$prefix}grid-container-row-gap);
+    padding-left: calc(var(--#{$prefix}grid-container-column-gap) / 2);
+    padding-right: calc(var(--#{$prefix}grid-container-column-gap) / 2);
+
+    @include toggle(flex, grid-item-auto-size, 1 1 0, 0 0 auto);
+    @include toggle(
+      width,
+      grid-item-auto-size,
+      auto,
+      calc(
+        100% * var(--#{$prefix}grid-item-size) /
+          var(--#{$prefix}grid-container-columns)
+      )
+    );
+    @include toggle(
+      margin-left,
+      grid-item-auto-offset,
+      auto,
+      calc(
+        100% * var(--#{$prefix}grid-item-offset) /
+          var(--#{$prefix}grid-container-columns)
+      )
+    );
+
+    @include responsive-values(
+      --#{$prefix}grid,
+      (
+        container-columns: $default-columns,
+        container-row-gap: $default-row-gap,
+        container-column-gap: $default-column-gap,
+        item-size: auto,
+        item-auto-size: $toggler-false,
+        item-offset: 0,
+        item-auto-offset: $toggler-false,
+      )
+    );
+
+    &#{$grid}__container {
+      max-width: none;
+
+      // When we have nested containers, we need to increase the size of the
+      // item to offset the extra margin
+      @include toggle(
+        width,
+        grid-item-auto-size,
+        auto,
+        calc(
+          100% * var(--#{$prefix}grid-item-size) /
+            var(--#{$prefix}grid-container-columns) +
+            var(--#{$prefix}grid-column-gap)
+        )
+      );
+      // We must also add together the container's margin with the item offset
+      @include toggle(
+        margin-left,
+        grid-item-auto-offset,
+        auto,
+        calc(
+          var(--#{$prefix}grid-column-gap) / -2 + 100% *
+            var(--#{$prefix}grid-item-offset) /
+            var(--#{$prefix}grid-container-columns)
+        )
+      );
+    }
+  }
+}

package/scss/components/Heading/_Heading-variables.scss

@@ -0,0 +1,78 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$heading-margin-top: 0 !default;
+$heading-margin-bottom: spacing(2) !default;
+$heading-font-weight: $font-weight-bold !default;
+
+// Level 1
+$heading-1-font-size: var(--#{$prefix}font-size-4xl) !default;
+$heading-1-line-height: var(--#{$prefix}line-height-4xl) !default;
+$heading-1-text-transform: null !default;
+$heading-1-color: null !default;
+
+// Level 2
+$heading-2-font-size: var(--#{$prefix}font-size-2xl) !default;
+$heading-2-line-height: var(--#{$prefix}line-height-2xl) !default;
+$heading-2-text-transform: null !default;
+$heading-2-color: null !default;
+
+// Level 3
+$heading-3-font-size: var(--#{$prefix}font-size-lg) !default;
+$heading-3-line-height: var(--#{$prefix}line-height-lg) !default;
+$heading-3-text-transform: null !default;
+$heading-3-color: null !default;
+
+// Level 4
+$heading-4-font-size: var(--#{$prefix}font-size-md) !default;
+$heading-4-line-height: var(--#{$prefix}line-height-md) !default;
+$heading-4-text-transform: null !default;
+$heading-4-color: null !default;
+
+// Level 5
+$heading-5-font-size: var(--#{$prefix}font-size-sm) !default;
+$heading-5-line-height: var(--#{$prefix}line-height-sm) !default;
+$heading-5-text-transform: null !default;
+$heading-5-color: null !default;
+
+// Level 6
+$heading-6-font-size: var(--#{$prefix}font-size-xs) !default;
+$heading-6-line-height: var(--#{$prefix}line-height-xs) !default;
+$heading-6-text-transform: null !default;
+$heading-6-color: null !default;
+
+// Levels
+$heading-levels: 1, 2, 3, 4, 5, 6 !default;
+
+$heading-font-size-by-level: (
+  1: $heading-1-font-size,
+  2: $heading-2-font-size,
+  3: $heading-3-font-size,
+  4: $heading-4-font-size,
+  5: $heading-5-font-size,
+  6: $heading-6-font-size,
+) !default;
+$heading-line-height-by-level: (
+  1: $heading-1-line-height,
+  2: $heading-2-line-height,
+  3: $heading-3-line-height,
+  4: $heading-4-line-height,
+  5: $heading-5-line-height,
+  6: $heading-6-line-height,
+) !default;
+$heading-text-transform-by-level: (
+  1: $heading-1-text-transform,
+  2: $heading-2-text-transform,
+  3: $heading-3-text-transform,
+  4: $heading-4-text-transform,
+  5: $heading-5-text-transform,
+  6: $heading-6-text-transform,
+) !default;
+$heading-color-by-level: (
+  1: $heading-1-color,
+  2: $heading-2-color,
+  3: $heading-3-color,
+  4: $heading-4-color,
+  5: $heading-5-color,
+  6: $heading-6-color,
+) !default;

package/scss/components/Heading/_Heading.scss

@@ -0,0 +1,22 @@
+@use "sass:map";
+
+@use "Heading-variables" as *;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}heading {
+  $heading: &;
+
+  margin-top: $heading-margin-top;
+  margin-bottom: $heading-margin-bottom;
+  font-weight: $heading-font-weight;
+
+  // Levels
+  @each $level in $heading-levels {
+    &--#{$level} {
+      font-size: map.get($heading-font-size-by-level, $level);
+      line-height: map.get($heading-line-height-by-level, $level);
+      text-transform: map.get($heading-text-transform-by-level, $level);
+      color: map.get($heading-color-by-level, $level);
+    }
+  }
+}

package/scss/components/HelperText/_HelperText-variables.scss

@@ -0,0 +1,7 @@
+@use "../../scss/base-variables" as *;
+
+$helper-text-font-size: var(--#{$prefix}font-size-xs) !default;
+$helper-text-line-height: var(--#{$prefix}line-height-xs) !default;
+$helper-text-font-weight: null !default;
+$helper-text-text-align: null !default;
+$helper-text-color: var(--#{$prefix}neutral-10) !default;

package/scss/components/HelperText/_HelperText.scss

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

package/scss/components/Icon/_Icon-variables.scss

@@ -0,0 +1,3 @@
+@use "../../scss/base-variables" as *;
+
+$icon-accent-color: var(--#{$prefix}accent-a11) !default;

package/scss/components/Icon/_Icon.scss

@@ -0,0 +1,17 @@
+@use "Icon-variables" as *;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}icon {
+  flex: none;
+
+  &[data-accent] {
+    color: $icon-accent-color;
+  }
+
+  // Sizes
+  @each $size, $font-size in $font-size-by-size {
+    &--#{$size} {
+      font-size: $font-size;
+    }
+  }
+}

package/scss/components/IconButton/_IconButton-variables.scss

@@ -0,0 +1,34 @@
+@use "../Button/Button-variables" as *;
+@use "../../scss/base-variables" as *;
+
+// Small size
+$icon-button-sm-min-size: 24px !default;
+$icon-button-sm-font-size: var(--#{$prefix}font-size-xs) !default;
+
+// Medium size
+$icon-button-md-min-size: 32px !default;
+$icon-button-md-font-size: var(--#{$prefix}font-size-md) !default;
+
+// Large size
+$icon-button-lg-min-size: 40px !default;
+$icon-button-lg-font-size: var(--#{$prefix}font-size-2xl) !default;
+
+// Extra large size
+$icon-button-xl-min-size: 48px !default;
+$icon-button-xl-font-size: var(--#{$prefix}font-size-3xl) !default;
+
+// Sizes
+$icon-button-sizes: $button-sizes !default;
+
+$icon-button-min-size-by-size: (
+  sm: $icon-button-sm-min-size,
+  md: $icon-button-md-min-size,
+  lg: $icon-button-lg-min-size,
+  xl: $icon-button-xl-min-size,
+) !default;
+$icon-button-font-size-by-size: (
+  sm: $icon-button-sm-font-size,
+  md: $icon-button-md-font-size,
+  lg: $icon-button-lg-font-size,
+  xl: $icon-button-xl-font-size,
+) !default;

package/scss/components/IconButton/_IconButton.scss

@@ -0,0 +1,41 @@
+@use "sass:map";
+@use "IconButton-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/button/button" as *;
+@use "../../scss/placeholders/button/button-variables" as *;
+@use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/spacing" as *;
+
+.#{$prefix}icon-button {
+  @extend %#{$prefix}button;
+
+  min-height: var(--#{$prefix}icon-button-min-size);
+  min-width: var(--#{$prefix}icon-button-min-size);
+  padding: 0;
+  font-size: var(--#{$prefix}icon-button-font-size);
+
+  &--circle {
+    border-radius: 50%;
+  }
+
+  // Sizes
+  @each $size in $icon-button-sizes {
+    &--#{$size} {
+      @include declare-var(
+        --#{$prefix}icon-button-min-size,
+        map.get($icon-button-min-size-by-size, $size)
+      );
+      @include declare-var(
+        --#{$prefix}icon-button-font-size,
+        map.get($icon-button-font-size-by-size, $size)
+      );
+    }
+  }
+
+  // Variants
+  @each $variant in $button-variants {
+    &--#{$variant} {
+      @extend %#{$prefix}button--#{$variant};
+    }
+  }
+}

package/scss/components/Input/_Input-variables.scss

@@ -0,0 +1,6 @@
+// Color
+$input-color-swatch-max-width: 80px !default;
+
+// File
+$input-file-cursor: pointer !default;
+$input-file-button-font-family: inherit !default;