@ostack.tech/ui 0.1.0

package/scss/components/RadioGroup/_RadioGroup.scss

@@ -0,0 +1,74 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/checkable-group/checkable-group" as *;
+
+.#{$prefix}radio-group {
+  $radio-group-block: "#{&}:not(#{&}--inline)";
+  $radio-group-inline: #{&}--inline;
+  $radio-root: ".#{$prefix}radio__root";
+  $radio-code: ".#{$prefix}radio__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;
+    }
+
+    #{$radio-group-inline} > & {
+      @extend %#{$prefix}checkable-group__container--inline;
+    }
+  }
+
+  // Add margin between radios
+  &__container > #{$radio-root}:not(:first-child) {
+    #{$radio-group-block} > & {
+      @extend %#{$prefix}checkable-group__checkable--not-first--block;
+    }
+
+    #{$radio-group-inline} > & {
+      @extend %#{$prefix}checkable-group__checkable--not-first--inline;
+    }
+  }
+
+  // Set spacing between the radio group code and the radios
+  &__code + &__container[data-variant="default"] {
+    #{$radio-group-block} > & > #{$radio-root},
+    #{$radio-group-inline} > & > #{$radio-root}:first-child {
+      // When the radio doesn't have a code
+      & > :first-child {
+        @extend %#{$prefix}checkable-group--default-coded__checkable__first-child;
+      }
+
+      // When the radio has a code
+      & > #{$radio-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;
+    }
+  }
+
+  // Clear button
+  &__clear-button {
+    @extend %#{$prefix}checkable-group__clear-button;
+  }
+
+  // Spinner
+  &__spinner {
+    @extend %#{$prefix}checkable-group__spinner;
+  }
+}

package/scss/components/Root/_Root-variables.scss

@@ -0,0 +1,10 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$root-font-family: var(--#{$prefix}font-family-base) !default;
+$root-font-size: var(--#{$prefix}font-size-md) !default;
+$root-line-height: var(--#{$prefix}line-height-md) !default;
+$root-color: var(--#{$prefix}neutral-12) !default;
+
+$root-prose-element-margin-y: 0.5em !default;
+$root-list-item-margin-y: 0.25em !default;

package/scss/components/Root/_Root.scss

@@ -0,0 +1,107 @@
+@use "sass:map";
+@use "Root-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/spacing" as *;
+
+// Root CSS variables
+:root {
+  // CSS variables used for the "space toggle"
+  @include declare-var(--#{$prefix}toggler-true, initial);
+  @include declare-var(--#{$prefix}toggler-false, "");
+
+  // Colours
+  @include declare-var(--#{$prefix}background-color, $background-color);
+
+  @each $color in $colors {
+    @each $shade, $value in map.get($color-shades-by-color, $color) {
+      @include declare-var(--#{$prefix}#{$color}-#{$shade}, $value);
+    }
+  }
+
+  // Spacing
+  @include declare-var(--#{$prefix}space, $space);
+
+  // Border radius
+  @each $size, $value in $border-radius-by-size {
+    @include declare-var(--#{$prefix}border-radius-#{$size}, $value);
+  }
+
+  // Box shadow
+  @each $size, $value in $box-shadow-by-size {
+    @include declare-var(--#{$prefix}box-shadow-#{$size}, $value);
+  }
+
+  // Typography
+  @each $type, $value in $font-family-by-type {
+    @include declare-var(--#{$prefix}font-family-#{$type}, $value);
+  }
+  @each $size, $value in $font-size-by-size {
+    @include declare-var(--#{$prefix}font-size-#{$size}, $value);
+  }
+  @each $size, $value in $line-height-by-size {
+    @include declare-var(--#{$prefix}line-height-#{$size}, $value);
+  }
+
+  // Transitions
+  @include declare-var(--#{$prefix}transition-property, $transition-property);
+  @include declare-var(--#{$prefix}transition-duration, $transition-duration);
+  @include declare-var(
+    --#{$prefix}transition-timing-function,
+    $transition-timing-function
+  );
+
+  // Animations
+  @include declare-var(
+    --#{$prefix}animation-fade-duration,
+    $animation-fade-duration
+  );
+  @include declare-var(
+    --#{$prefix}animation-fade-timing-function,
+    $animation-fade-timing-function
+  );
+
+  // Z-indices
+  @each $type, $value in $z-index-by-type {
+    @include declare-var(--#{$prefix}z-index-#{$type}, $value);
+  }
+}
+
+.#{$prefix}root {
+  font-family: $root-font-family;
+  font-size: $root-font-size;
+  line-height: $root-line-height;
+  color: $root-color;
+
+  // Global styles
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  // Apply these styles only to classless elements (typically used in text),
+  // since we don't want to ruin other styles
+  :is(p, ul, ol):not([class]) {
+    margin: 0;
+
+    &:not(:first-child) {
+      margin-top: $root-prose-element-margin-y;
+    }
+  }
+
+  li:not([class]):not(:first-child) {
+    margin-top: $root-list-item-margin-y;
+  }
+}
+
+@each $color in $colors {
+  [data-accent="#{$color}"] {
+    @each $shade in map.keys(map.get($color-shades-by-color, $color)) {
+      @include declare-var(
+        --#{$prefix}accent-#{$shade},
+        var(--#{$prefix}#{$color}-#{$shade})
+      );
+    }
+  }
+}

package/scss/components/Select/_Select-variables.scss

@@ -0,0 +1,101 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/control/control-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$select-cursor: pointer !default;
+
+// Read-only
+$select-readonly-cursor: default !default;
+
+// Default variant
+$select-border-color: null !default;
+$select-background-image: null !default;
+$select-box-shadow: null !default;
+
+// Default variant - Hover
+$select-hover-background-image: null !default;
+
+// Default variant - Focus
+$select-focus-background-image: null !default;
+
+// Cell variant
+$select-cell-background-image: null !default;
+$select-cell-box-shadow: null !default;
+
+// Cell variant - Hover
+$select-cell-hover-background-image: null !default;
+
+// Cell variant - Focus
+$select-cell-focus-background-image: null !default;
+
+// Multiple
+$select-multiple-padding-y: calc($control-padding-y - spacing(0.25)) !default;
+$select-multiple-padding-x: calc(
+  $control-padding-x - $control-padding-x * 0.5
+) !default;
+
+$select-multiple-cell-padding-y: calc(
+  $control-cell-padding-y - spacing(0.5)
+) !default;
+$select-multiple-cell-padding-x: calc(
+  $control-cell-padding-x - spacing(0.5)
+) !default;
+
+// Multiple - Value tag
+$select-multiple-value-tag-margin-y: spacing(0.25) !default;
+$select-multiple-value-tag-margin-x: calc($control-padding-x * 0.5) !default;
+$select-multiple-value-tag-padding-y: spacing(0.75) !default;
+$select-multiple-value-tag-padding-x: calc($control-padding-x * 0.5) !default;
+$select-multiple-value-tag-font-size: var(--#{$prefix}font-size-xs) !default;
+$select-multiple-value-tag-line-height: var(
+  --#{$prefix}line-height-xs
+) !default;
+$select-multiple-value-tag-text-transform: null !default;
+
+// Arrow
+$select-arrow-font-size: var(--#{$prefix}font-size-2xs) !default;
+$select-arrow-color: var(--#{$prefix}neutral-11) !default;
+
+// Status
+$select-arrow-status-color: var(--#{$prefix}accent-11) !default;
+
+// Option
+$select-option-min-height: null !default;
+$select-option-padding-y: null !default;
+$select-option-font-family: null !default;
+$select-option-font-weight: null !default;
+$select-option-text-transform: null !default;
+
+// Option indicator
+$select-option-indicator-font-size: var(--#{$prefix}font-size-sm) !default;
+
+// Popover
+$select-popover-min-width: 142px !default;
+
+// Variants
+$select-variants: $control-variants !default;
+
+$select-border-color-by-variant: (
+  default: $select-border-color,
+  cell: null,
+) !default;
+$select-background-image-by-variant: (
+  default: $select-background-image,
+  cell: $select-cell-background-image,
+) !default;
+$select-box-shadow-by-variant: (
+  default: $select-box-shadow,
+  cell: $select-cell-box-shadow,
+) !default;
+
+// Variants - Hover
+$select-hover-background-image-by-variant: (
+  default: $select-hover-background-image,
+  cell: $select-cell-hover-background-image,
+) !default;
+
+// Variants - Focus
+$select-focus-background-image-by-variant: (
+  default: $select-focus-background-image,
+  cell: $select-cell-focus-background-image,
+) !default;

package/scss/components/Select/_Select.scss

@@ -0,0 +1,167 @@
+@use "sass:map";
+
+@use "Select-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/control/control" as *;
+@use "../../scss/placeholders/control/control-variables" as *;
+@use "../../scss/placeholders/menu/menu" as *;
+@use "../../scss/utils/animation" as *;
+@use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/maybe-important" as *;
+@use "../../scss/utils/transition" as *;
+
+.#{$prefix}select {
+  $select: &;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: inherit;
+
+  &[data-multiple] {
+    &[data-variant="default"] {
+      height: auto;
+
+      &:not([data-placeholder]) {
+        padding: $select-multiple-padding-y $select-multiple-padding-x;
+      }
+    }
+
+    &[data-variant="cell"] {
+      &:not([data-placeholder]) {
+        padding: $select-multiple-cell-padding-y $select-multiple-cell-padding-x;
+      }
+    }
+  }
+
+  // Placeholder
+  &[data-placeholder] &__value {
+    @extend %#{$prefix}control__placeholder;
+  }
+
+  // Container overrides
+  &__container {
+    &:not([data-disabled], [data-readonly]) {
+      cursor: $select-cursor;
+    }
+
+    &[data-readonly] {
+      cursor: $select-readonly-cursor;
+    }
+
+    @each $variant in $select-variants {
+      &[data-variant="#{$variant}"] {
+        @include declare-var(
+          --#{$prefix}control-border-color,
+          map.get($select-border-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-background-image,
+          map.get($select-background-image-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-box-shadow,
+          map.get($select-box-shadow-by-variant, $variant)
+        );
+
+        // Hover
+        &:hover:not([data-disabled]) {
+          @include declare-var(
+            --#{$prefix}control-background-image,
+            map.get($select-hover-background-image-by-variant, $variant)
+          );
+        }
+
+        // Focus
+        &:is([data-focused], [data-state="open"]) {
+          @include declare-var(
+            --#{$prefix}control-background-image,
+            map.get($select-focus-background-image-by-variant, $variant)
+          );
+        }
+      }
+    }
+  }
+
+  // Value
+  &__value {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  &:is(:not([data-multiple]), [data-placeholder]) &__value {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: clip;
+  }
+
+  &[data-multiple] &__value {
+    align-content: center;
+    flex-wrap: wrap;
+    overflow: hidden;
+  }
+
+  // Value tags
+  &__value-tag-container:not(:last-child) {
+    margin-right: $select-multiple-value-tag-margin-x;
+  }
+
+  &__value-tag {
+    margin-top: $select-multiple-value-tag-margin-y;
+    margin-bottom: $select-multiple-value-tag-margin-y;
+    padding: $select-multiple-value-tag-padding-y
+      $select-multiple-value-tag-padding-x !important;
+    font-size: maybe-important($select-multiple-value-tag-font-size);
+    line-height: maybe-important($select-multiple-value-tag-line-height);
+    text-transform: maybe-important($select-multiple-value-tag-text-transform);
+  }
+
+  &[data-limit-value-tags-width] &__value-tag-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: var(--#{$prefix}select-value-tag-max-width);
+  }
+
+  // Arrow
+  &__arrow {
+    margin-right: var(--#{$prefix}control-padding-x);
+    font-size: $select-arrow-font-size !important;
+    color: $select-arrow-color;
+
+    &[data-status] {
+      color: $select-arrow-status-color;
+    }
+
+    &[data-disabled] {
+      opacity: $control-disabled-opacity;
+    }
+  }
+
+  // Popover
+  &__popover {
+    width: min-content;
+    min-width: max(
+      $select-popover-min-width,
+      calc(var(--radix-popover-trigger-width) - $control-border-width * 2)
+    );
+    max-height: var(--radix-popover-content-available-height);
+    max-width: var(--radix-popover-content-available-width);
+  }
+
+  // Option
+  &__option-action {
+    min-height: $select-option-min-height;
+    padding-top: $select-option-padding-y;
+    padding-bottom: $select-option-padding-y;
+    font-family: $select-option-font-family;
+    font-weight: $select-option-font-weight;
+    text-transform: $select-option-text-transform;
+  }
+
+  // Option indicator
+  &__option-indicator {
+    font-size: $select-option-indicator-font-size;
+  }
+}

package/scss/components/Separator/_Separator.scss

@@ -0,0 +1,16 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/animation" as *;
+
+.#{$prefix}separator {
+  flex-shrink: 0;
+  background-color: $neutral-7;
+
+  &[data-orientation="horizontal"] {
+    height: 1px;
+    width: 100%;
+  }
+
+  &[data-orientation="vertical"] {
+    width: 1px;
+  }
+}

package/scss/components/Spinner/_Spinner-variables.scss

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

package/scss/components/Spinner/_Spinner.scss

@@ -0,0 +1,18 @@
+@use "Spinner-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spinner" as *;
+
+.#{$prefix}spinner {
+  @include spinner;
+
+  &[data-accent] {
+    color: $spinner-accent-color;
+  }
+
+  // Sizes
+  @each $size, $font-size in $font-size-by-size {
+    &--#{$size} {
+      font-size: $font-size;
+    }
+  }
+}

package/scss/components/Stack/_Stack-variables.scss

@@ -0,0 +1,4 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$stack-default-gap: spacing(5) !default;

package/scss/components/Stack/_Stack.scss

@@ -0,0 +1,47 @@
+@use "Stack-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/breakpoints" as *;
+@use "../../scss/utils/responsive-values" as *;
+
+.#{$prefix}stack {
+  $stack: &;
+
+  display: flex;
+  flex-direction: var(--#{$prefix}stack-direction);
+  justify-content: var(--#{$prefix}stack-justify-content);
+  align-items: var(--#{$prefix}stack-align-items);
+  align-content: var(--#{$prefix}stack-align-content);
+  flex-wrap: var(--#{$prefix}stack-wrap);
+
+  // Handle responsive values
+  @include responsive-values(
+    --#{$prefix}stack,
+    (
+      direction: column,
+      gap: $stack-default-gap,
+      child-margin: var(--#{$prefix}stack-gap) 0 0 0,
+      justify-content: null,
+      align-items: null,
+      align-content: null,
+      wrap: null,
+    )
+  );
+
+  // Handle margins of non-stack children
+  & > :not(style) + :not(style):not(#{$stack}) {
+    margin: var(--#{$prefix}stack-child-margin);
+  }
+
+  // Handle margins of stack children
+  & > :not(style) + #{$stack} {
+    margin: var(--#{$prefix}stack-ancestor-child-margin);
+
+    @include responsive-values(
+      --#{$prefix}stack,
+      (
+        ancestor-gap: $stack-default-gap,
+        ancestor-child-margin: var(--#{$prefix}stack-ancestor-gap) 0 0 0,
+      )
+    );
+  }
+}

package/scss/components/Stepper/_Stepper-variables.scss

@@ -0,0 +1,38 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+// Step list
+$stepper-step-list-margin-y: spacing(2) !default;
+
+// Step
+$stepper-step-size: 30px !default;
+$stepper-step-border-radius: 50% !default;
+$stepper-step-animation-duration: var(
+  --#{$prefix}animation-fade-duration
+) !default;
+$stepper-step-animation-timing-function: var(
+  --#{$prefix}animation-fade-timing-function
+) !default;
+
+// Step label
+$stepper-step-label-margin-y: spacing(2) !default;
+
+// Step label - Unvisited
+$stepper-step-label-unvisited-color: var(--#{$prefix}neutral-a9) !default;
+
+// Step line
+$stepper-step-line-height: 2px !default;
+$stepper-step-line-background-color: var(--#{$prefix}neutral-a3) !default;
+
+// Step line - Status
+$stepper-step-line-status-background-color: var(--#{$prefix}accent-a3) !default;
+
+// Step line - Visited
+$stepper-step-line-visited-background-color: var(
+  --#{$prefix}primary-a9
+) !default;
+
+// Step line - Visited + status
+$stepper-step-line-visited-status-background-color: var(
+  --#{$prefix}accent-a9
+) !default;

package/scss/components/Stepper/_Stepper.scss

@@ -0,0 +1,86 @@
+@use "Stepper-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/animation" as *;
+@use "../../scss/utils/transition" as *;
+
+.#{$prefix}stepper {
+  $stepper: &;
+
+  &__step-list {
+    display: flex;
+    justify-content: center;
+
+    &:not(:last-child) {
+      margin-bottom: $stepper-step-list-margin-y;
+    }
+  }
+
+  &__step-container {
+    position: relative;
+    flex: 1 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+
+    // Line before the step number
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      bottom: calc($stepper-step-size / 2 - $stepper-step-line-height / 2);
+      right: calc(50% + $stepper-step-size / 2);
+      height: $stepper-step-line-height;
+      width: calc(100% - $stepper-step-size);
+      background-color: $stepper-step-line-background-color;
+
+      @include accessible-transition($duration: 0.3s);
+    }
+
+    &:first-child::before {
+      display: none;
+    }
+
+    &[data-status]::before {
+      background-color: $stepper-step-line-status-background-color;
+    }
+
+    &[data-visited] {
+      &::before {
+        background-color: $stepper-step-line-visited-background-color;
+      }
+
+      &[data-status]::before {
+        background-color: $stepper-step-line-visited-status-background-color;
+      }
+    }
+  }
+
+  &__step {
+    min-width: $stepper-step-size;
+    min-height: $stepper-step-size;
+    border-radius: $stepper-step-border-radius;
+    padding: 0;
+  }
+
+  &__step-label {
+    margin-bottom: $stepper-step-label-margin-y;
+    text-align: center;
+
+    &:not([data-visited]) {
+      color: $stepper-step-label-unvisited-color;
+    }
+  }
+
+  // TODO: Improve animations
+  &__step-content[data-state="active"] {
+    @include accessible-animation(
+      $animation-fade-in $stepper-step-animation-duration
+        $stepper-step-animation-timing-function
+    );
+  }
+
+  //&__step-content[data-state="inactive"] {
+  //  @include accessible-animation-close();
+  //}
+}