@ostack.tech/ui 0.1.0

package/scss/components/Input/_Input.scss

@@ -0,0 +1,235 @@
+@use "sass:map";
+
+@use "Input-variables" as *;
+@use "../ControlAddon/ControlAddon-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/control/control" as *;
+@use "../../scss/placeholders/control/control-variables" as *;
+@use "../../scss/utils/declare-var" as *;
+
+.#{$prefix}input {
+  $input: &;
+
+  @extend %#{$prefix}control;
+
+  // Root component styles
+  &__root {
+    @extend %#{$prefix}control__root;
+
+    @each $variant in $control-variants {
+      &[data-variant="#{$variant}"] {
+        @extend %#{$prefix}control__root--#{$variant};
+      }
+    }
+  }
+
+  // Container component styles
+  &__container {
+    @extend %#{$prefix}control__container;
+
+    @each $variant in $control-variants {
+      &[data-variant="#{$variant}"] {
+        @extend %#{$prefix}control__container--#{$variant};
+      }
+    }
+  }
+
+  // Code styles
+  &__code[data-variant="default"] {
+    @extend %#{$prefix}control__code--default;
+  }
+
+  // Clear button styles
+  &__clear-button {
+    @extend %#{$prefix}control__clear-button;
+  }
+
+  // Spinner styles
+  &__spinner {
+    @extend %#{$prefix}control__spinner;
+  }
+
+  // Textarea styles
+  &:is(textarea) {
+    resize: vertical;
+    min-height: calc(
+      var(--#{$prefix}control-min-height) - var(
+          --#{$prefix}control-border-width,
+          0px
+        ) *
+        2
+    );
+
+    &[data-variant="default"] {
+      height: auto;
+    }
+  }
+
+  // Colour input styles
+  &[type="color" i] {
+    height: auto;
+
+    @each $swatch in "&::-moz-color-swatch", "&::-webkit-color-swatch" {
+      #{$swatch} {
+        box-sizing: border-box;
+        height: calc(
+          var(--#{$prefix}control-min-height) - var(
+              --#{$prefix}control-border-width,
+              0px
+            ) *
+            2 - var(--#{$prefix}control-padding-y) *
+            2
+        );
+        max-width: $input-color-swatch-max-width;
+        margin: 0 auto;
+        border-radius: var(--#{$prefix}control-border-radius);
+      }
+    }
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+  }
+
+  // File input styles
+  &[type="file" i] {
+    // Text align breaks file inputs in Firefox and doesn't seem to have an
+    // effect in Chrome, so we just reset it
+    text-align: start;
+    line-height: calc(
+      var(--#{$prefix}control-min-height) - var(
+          --#{$prefix}control-border-width,
+          0px
+        ) *
+        2 - var(--#{$prefix}control-padding-y) * 2
+    );
+
+    &:not(:disabled):not([readonly]) {
+      cursor: $input-file-cursor;
+    }
+
+    &::file-selector-button {
+      -webkit-appearance: button;
+      pointer-events: none;
+
+      cursor: inherit;
+
+      font-family: $input-file-button-font-family;
+      font-size: $control-addon-font-size;
+      line-height: calc(
+        var(--#{$prefix}control-min-height) - var(
+            --#{$prefix}control-border-width,
+            0px
+          ) *
+          2 - var(--#{$prefix}input-file-button-padding-y) * 2
+      );
+
+      padding: calc(var(--#{$prefix}input-file-button-padding-y))
+        var(--#{$prefix}input-file-button-padding-x);
+      margin: calc(var(--#{$prefix}control-padding-y) * -1)
+        calc(
+          var(--#{$prefix}input-file-button-inset-x) * -1 +
+            var(--#{$prefix}control-padding-x)
+        )
+        calc(var(--#{$prefix}control-padding-y) * -1)
+        calc(
+          var(--#{$prefix}input-file-button-margin-x) - var(
+              --#{$prefix}input-file-button-inset-x
+            ) - var(--#{$prefix}control-padding-x)
+        );
+      background-color: var(--#{$prefix}input-file-button-background-color);
+      color: var(--#{$prefix}input-file-button-color);
+      text-shadow: var(--#{$prefix}input-file-button-text-shadow);
+
+      border-radius: var(--#{$prefix}input-file-button-border-radius);
+      border: 0;
+      border-right: var(--#{$prefix}input-file-button-separator-width, 0) solid
+        var(
+          --#{$prefix}input-file-button-separator-color,
+          var(--#{$prefix}control-border-color)
+        );
+    }
+
+    &[readonly]::file-selector-button {
+      display: none;
+    }
+
+    @each $variant in $control-variants {
+      &[data-variant="#{$variant}"] {
+        @include declare-var(
+          --#{$prefix}input-file-button-margin-x,
+          map.get($control-addon-margin-x-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}input-file-button-padding-y,
+          map.get($control-addon-padding-y-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}input-file-button-padding-x,
+          map.get($control-addon-padding-x-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}input-file-button-inset-x,
+          map.get($control-addon-inset-x-by-variant, $variant)
+        );
+
+        @include declare-var(
+          --#{$prefix}input-file-button-separator-width,
+          map.get($control-addon-separator-width-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}input-file-button-border-radius,
+          map.get($control-addon-border-radius-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}input-file-button-separator-color,
+          map.get($control-addon-separator-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}input-file-button-background-color,
+          map.get($control-addon-background-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}input-file-button-color,
+          map.get($control-addon-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}input-file-button-text-shadow,
+          map.get($control-addon-text-shadow-by-variant, $variant)
+        );
+
+        // Status
+        &[data-status] {
+          @include declare-var(
+            --#{$prefix}input-file-button-separator-color,
+            map.get($control-addon-status-separator-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}input-file-button-background-color,
+            map.get($control-addon-status-background-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}input-file-button-color,
+            map.get($control-addon-status-color-by-variant, $variant)
+          );
+        }
+      }
+    }
+  }
+
+  // Fix height of inputs with a type of datetime-local, date, month, week, or
+  // time
+  ::-webkit-datetime-edit-fields-wrapper,
+  ::-webkit-datetime-edit-text,
+  ::-webkit-datetime-edit-minute,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-year-field {
+    padding: 0;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+}

package/scss/components/Keyboard/_Keyboard.scss

@@ -0,0 +1,17 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+.#{$prefix}keyboard {
+  padding: 1px spacing(1) 0;
+  border-radius: var(--#{$prefix}border-radius-xs);
+
+  font-family: var(--#{$prefix}font-family-code);
+  font-weight: $font-weight-normal;
+  font-size: 0.875em;
+  word-wrap: break-word;
+
+  border: 1px solid $neutral-7;
+  border-bottom-width: 3px;
+  background-color: $neutral-3;
+  color: $neutral-11;
+}

package/scss/components/Label/_Label-variables.scss

@@ -0,0 +1,26 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$label-font-size: var(--#{$prefix}font-size-sm) !default;
+$label-line-height: var(--#{$prefix}line-height-sm) !default;
+$label-font-weight: $font-weight-medium !default;
+$label-color: null !default;
+
+// Required icon
+$label-required-icon-margin: spacing(1) !default;
+$label-required-icon-top: -0.75em !default;
+$label-required-icon-font-size: 0.5em !default;
+$label-required-icon-opacity: 0.75 !default;
+
+// Helper button
+$label-helper-button-margin: spacing(1.5) !default;
+$label-helper-button-inset: spacing(0.5) !default;
+$label-helper-button-padding: spacing(1) !default;
+$label-helper-button-font-size: null !default;
+$label-helper-button-color: null !default;
+
+// Helper popover
+$label-helper-popover-max-width: 500px !default;
+$label-helper-popover-max-height: 600px !default;
+$label-helper-popover-padding-y: spacing(1) !default;
+$label-helper-popover-padding-x: spacing(2) !default;

package/scss/components/Label/_Label.scss

@@ -0,0 +1,63 @@
+@use "Label-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/maybe-important" as *;
+@use "../../scss/utils/transition" as *;
+
+.#{$prefix}label {
+  display: inline-block;
+  margin-top: 0;
+  margin-bottom: 0;
+
+  cursor: default;
+  color: $label-color;
+
+  font-size: $label-font-size;
+  font-weight: $label-font-weight;
+  line-height: $label-line-height;
+
+  @include accessible-transition();
+
+  &__container {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__required-icon-container {
+    white-space: nowrap;
+  }
+
+  &__required-icon {
+    position: relative;
+    margin-left: $label-required-icon-margin;
+    top: $label-required-icon-top;
+
+    font-size: $label-required-icon-font-size;
+    opacity: $label-required-icon-opacity;
+  }
+
+  &__helper-button {
+    min-width: auto;
+    min-height: auto;
+
+    margin: calc($label-helper-button-inset * -1)
+      calc($label-helper-button-inset * -1)
+      calc($label-helper-button-inset * -1)
+      calc($label-helper-button-inset * -1 + $label-helper-button-margin);
+    padding: $label-helper-button-padding;
+
+    font-size: $label-helper-button-font-size;
+    color: maybe-important($label-helper-button-color);
+  }
+
+  &__helper-popover {
+    max-width: min(
+      $label-helper-popover-max-width,
+      var(--radix-popover-content-available-width)
+    );
+    max-height: min(
+      $label-helper-popover-max-height,
+      var(--radix-popover-content-available-height)
+    );
+    padding: $label-helper-popover-padding-y $label-helper-popover-padding-x;
+  }
+}

package/scss/components/Link/_Link-variables.scss

@@ -0,0 +1,46 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$link-cursor: pointer !default;
+$link-color: var(--#{$prefix}accent-a11) !default;
+$link-text-decoration-line: none !default;
+$link-text-decoration-style: null !default;
+$link-text-decoration-color: var(--#{$prefix}accent-a6) !default;
+$link-text-decoration-thickness: min(2px, max(1px, 0.05em)) !default;
+$link-text-underline-offset: calc(0.025em + 2px) !default;
+$link-font-weight: null !default;
+
+// Hover
+$link-hover-color: null !default;
+$link-hover-text-decoration-line: underline !default;
+$link-hover-text-decoration-color: null !default;
+
+// Alert variant
+$link-alert-color: inherit !default;
+$link-alert-text-decoration-line: underline !default;
+$link-alert-text-decoration-color: null !default;
+$link-alert-font-weight: $font-weight-bold !default;
+
+// Alert variant - Hover
+$link-alert-hover-color: inherit !default;
+$link-alert-hover-text-decoration-line: null !default;
+$link-alert-hover-text-decoration-color: inherit !default;
+
+// Button
+$link-button-color: null !default;
+$link-button-text-decoration-line: null !default;
+$link-button-text-decoration-color: null !default;
+$link-button-text-transform: null !default;
+
+// Button - Hover
+$link-button-hover-color: null !default;
+$link-button-hover-text-decoration-line: null !default;
+$link-button-hover-text-decoration-color: null !default;
+
+// Icon
+$link-icon-margin-x: 0.35em !default;
+$link-icon-font-size: null !default;
+$link-icon-color: null !default;
+
+// Icon - Hover
+$link-icon-hover-color: null !default;

package/scss/components/Link/_Link.scss

@@ -0,0 +1,63 @@
+@use "Link-variables" as *;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}link {
+  &:is(:any-link, button) {
+    all: unset;
+    box-sizing: border-box;
+    cursor: $link-cursor;
+
+    color: $link-color;
+    text-decoration-line: $link-text-decoration-line;
+    text-decoration-style: $link-text-decoration-style;
+    text-decoration-color: $link-text-decoration-color;
+    text-decoration-thickness: $link-text-decoration-thickness;
+    text-underline-offset: $link-text-underline-offset;
+    font-weight: $link-font-weight;
+
+    &:hover {
+      color: $link-hover-color;
+      text-decoration-line: $link-hover-text-decoration-line;
+      text-decoration-color: $link-hover-text-decoration-color;
+    }
+  }
+
+  // Alert variant
+  &--alert:is(:any-link, button) {
+    color: $link-alert-color;
+    text-decoration-line: $link-alert-text-decoration-line;
+    text-decoration-color: $link-alert-text-decoration-color;
+    font-weight: $link-alert-font-weight;
+
+    &:hover {
+      color: $link-alert-hover-color;
+      text-decoration-line: $link-alert-hover-text-decoration-line;
+      text-decoration-color: $link-alert-hover-text-decoration-color;
+    }
+  }
+
+  // Button
+  &:is(button):not(:any-link) {
+    text-transform: $link-button-text-transform;
+    color: $link-button-color;
+    text-decoration-line: $link-button-text-decoration-line;
+    text-decoration-color: $link-button-text-decoration-color;
+
+    &:hover {
+      color: $link-button-hover-color;
+      text-decoration-line: $link-button-hover-text-decoration-line;
+      text-decoration-color: $link-button-hover-text-decoration-color;
+    }
+  }
+
+  // External icon
+  &__icon {
+    margin-left: $link-icon-margin-x;
+    font-size: $link-icon-font-size;
+    color: $link-icon-color;
+  }
+
+  &:is(:any-link, button):hover &__icon {
+    color: $link-icon-hover-color;
+  }
+}

package/scss/components/Mark/_Mark-variables.scss

@@ -0,0 +1,8 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$mark-padding-y: 0.05em !default;
+$mark-padding-x: 0.1em !default;
+$mark-border-radius: var(--#{$prefix}border-radius-xs) !default;
+$mark-background-color: var(--#{$prefix}accent-a5) !default;
+$mark-color: inherit !default;

package/scss/components/Mark/_Mark.scss

@@ -0,0 +1,11 @@
+@use "Mark-variables" as *;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}mark {
+  padding: $mark-padding-y $mark-padding-x;
+  margin: 0 calc($mark-padding-x * -1);
+  border-radius: $mark-border-radius;
+
+  background-color: $mark-background-color;
+  color: $mark-color;
+}

package/scss/components/MenuList/_MenuList.scss

@@ -0,0 +1,86 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/menu/menu" as *;
+@use "../../scss/placeholders/menu/menu-variables" as *;
+@use "../../scss/utils/button-reset" as *;
+@use "../../scss/utils/spacing" as *;
+
+.#{$prefix}menu-list {
+  $menu-list: &;
+
+  @extend %#{$prefix}menu;
+
+  &__group-item {
+    @extend %#{$prefix}menu__group-item;
+  }
+
+  &__group-label {
+    @extend %#{$prefix}menu__group-label;
+  }
+
+  &__group {
+    @extend %#{$prefix}menu__group;
+  }
+
+  &__item {
+    @extend %#{$prefix}menu__item;
+
+    @each $variant in $menu-variants {
+      // Style checkbox/radio items with no controls as selected
+      &[data-state="checked"][data-hide-control]
+        #{$menu-list}__item-action--#{$variant} {
+        @extend %#{$prefix}menu__item-action--#{$variant}--selected;
+      }
+
+      // Highlight action on hover only if the item isn't styled as selected
+      &:not([data-state="checked"][data-hide-control]) {
+        &:is([data-highlighted], [data-state="open"], [data-selected="true"])
+          #{$menu-list}__item-action--#{$variant},
+        #{$menu-list}__item-action--#{$variant}:hover {
+          @extend %#{$prefix}menu__item-action--#{$variant}--highlighted;
+        }
+      }
+    }
+  }
+
+  &__item-action {
+    @extend %#{$prefix}menu__item-action;
+
+    @each $variant in $menu-variants {
+      &--#{$variant} {
+        @extend %#{$prefix}menu__item-action--#{$variant};
+
+        &:is([data-selected=""], [data-selected="true"]) {
+          @extend %#{$prefix}menu__item-action--#{$variant}--selected;
+        }
+      }
+    }
+  }
+
+  &__item-content {
+    @extend %#{$prefix}menu__item-content;
+  }
+
+  &__item-icon {
+    @extend %#{$prefix}menu__item-icon;
+  }
+
+  &__item-icon--start {
+    @extend %#{$prefix}menu__item-icon--start;
+  }
+
+  &__item-icon--end {
+    @extend %#{$prefix}menu__item-icon--end;
+  }
+
+  &__item-spinner {
+    @extend %#{$prefix}menu__item-spinner;
+  }
+
+  &__item-spinner--start {
+    @extend %#{$prefix}menu__item-spinner--start;
+  }
+
+  &__item-spinner--end {
+    @extend %#{$prefix}menu__item-spinner--end;
+  }
+}

package/scss/components/Output/_Output.scss

@@ -0,0 +1,5 @@
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}output {
+  align-self: center;
+}

package/scss/components/Overlay/_Overlay-variables.scss

@@ -0,0 +1,14 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$overlay-align-items: start !default;
+$overlay-justify-content: center !default;
+$overlay-padding-y: spacing(7) !default;
+$overlay-padding-x: 2.5dvw !default;
+
+$overlay-background-color: var(--#{$prefix}neutral-a8) !default;
+$overlay-animation-duration: var(--#{$prefix}animation-fade-duration) !default;
+$overlay-animation-timing-function: var(
+  --#{$prefix}animation-fade-timing-function
+) !default;
+$overlay-z-index: var(--#{$prefix}z-index-overlay) !default;

package/scss/components/Overlay/_Overlay.scss

@@ -0,0 +1,32 @@
+@use "Overlay-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/animation" as *;
+@use "../../scss/utils/spacing" as *;
+
+.#{$prefix}overlay {
+  position: fixed;
+  inset: 0;
+
+  display: flex;
+  align-items: $overlay-align-items;
+  justify-content: $overlay-justify-content;
+  padding: $overlay-padding-y $overlay-padding-x;
+
+  overflow-y: auto;
+  z-index: $overlay-z-index;
+  background-color: $overlay-background-color;
+
+  &[data-state="open"] {
+    @include accessible-animation(
+      $animation-fade-in $overlay-animation-duration
+        $overlay-animation-timing-function
+    );
+  }
+
+  &[data-state="closed"] {
+    @include accessible-animation(
+      $animation-fade-out $overlay-animation-duration
+        $overlay-animation-timing-function
+    );
+  }
+}

package/scss/components/Popover/_Popover.scss

@@ -0,0 +1,10 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/popover/popover" as *;
+
+.#{$prefix}popover {
+  @extend %#{$prefix}popover;
+
+  &__arrow {
+    @extend %#{$prefix}popover__arrow;
+  }
+}

package/scss/components/RadioGroup/_Radio-variables.scss

@@ -0,0 +1 @@
+$radio-indicator-size: 8px !default;

package/scss/components/RadioGroup/_Radio.scss

@@ -0,0 +1,49 @@
+@use "Radio-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/checkable/checkable" as *;
+
+.#{$prefix}radio {
+  $radio: &;
+
+  @extend %#{$prefix}checkable;
+
+  border-radius: 50%;
+
+  // Root component
+  &__root {
+    @extend %#{$prefix}checkable__root;
+  }
+
+  // Checkbox code
+  &__code {
+    @extend %#{$prefix}checkable__code;
+  }
+
+  // Checkbox label
+  &__label {
+    @extend %#{$prefix}checkable__label;
+
+    #{$radio}[data-state="checked"] ~ &-container > & {
+      @extend %#{$prefix}checkable__label--checked;
+    }
+
+    #{$radio}:disabled ~ &-container > & {
+      @extend %#{$prefix}checkable__label--disabled;
+    }
+  }
+
+  // Checkbox indicator
+  &__indicator {
+    @extend %#{$prefix}checkable__indicator;
+
+    height: $radio-indicator-size;
+    width: $radio-indicator-size;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+
+  // Spinner
+  &__spinner {
+    @extend %#{$prefix}checkable__spinner;
+  }
+}