@ostack.tech/ui 0.1.0

package/scss/scss/placeholders/control/_control-variables.scss

@@ -0,0 +1,300 @@
+@use "../../base-variables" as *;
+@use "../../utils/spacing" as *;
+
+$control-font-family: inherit !default;
+$control-font-size: var(--#{$prefix}font-size-sm) !default;
+$control-line-height: var(--#{$prefix}line-height-sm) !default;
+$control-font-weight: null !default;
+$control-cursor: text !default;
+
+// Disabled
+$control-disabled-cursor: not-allowed !default;
+$control-disabled-opacity: 0.5 !default;
+
+// Focus
+$control-focus-z-index: var(--#{$prefix}z-index-focused) !default;
+
+// Default variant
+$control-min-height: 32px !default;
+$control-padding-y: spacing(1) !default;
+$control-padding-x: spacing(2.5) !default;
+$control-border-radius: var(--#{$prefix}border-radius-sm) !default;
+
+$control-border-width: 1px !default;
+$control-border-color: var(--#{$prefix}neutral-7) !default;
+$control-background-color: var(--#{$prefix}background-color) !default;
+$control-background-image: null !default;
+$control-color: null !default;
+$control-box-shadow: null !default;
+
+// Default variant - Status
+$control-status-border-color: var(--#{$prefix}accent-7) !default;
+$control-status-background-color: null !default;
+$control-status-background-image: null !default;
+$control-status-color: null !default;
+$control-status-box-shadow: null !default;
+
+// Default variant - Focus
+$control-focus-border-color: var(--#{$prefix}primary-8) !default;
+$control-focus-background-color: null !default;
+$control-focus-background-image: null !default;
+$control-focus-box-shadow: 0 0 0 1px
+  ($control-focus-border-color or $control-border-color) !default;
+
+// Default variant - Focus + Status
+$control-focus-status-border-color: var(--#{$prefix}accent-8) !default;
+$control-focus-status-background-color: null !default;
+$control-focus-status-background-image: null !default;
+$control-focus-status-box-shadow: 0 0 0 1px
+  ($control-focus-status-border-color or $control-status-border-color) !default;
+
+// Default variant - Read-only
+$control-readonly-border-color: var(--#{$prefix}neutral-7) !default;
+$control-readonly-background-color: var(--#{$prefix}neutral-2) !default;
+$control-readonly-background-image: null !default;
+$control-readonly-box-shadow: null !default;
+
+// Default variant - Read-only + Status
+$control-readonly-status-border-color: var(--#{$prefix}accent-6) !default;
+$control-readonly-status-background-color: color-mix(
+  in srgb-linear,
+  var(--#{$prefix}accent-3) 25%,
+  $control-readonly-background-color
+) !default;
+$control-readonly-status-background-image: null !default;
+
+// Default variant - Read-only + Focus
+$control-readonly-focus-border-color: null !default;
+$control-readonly-focus-box-shadow: 0 0 0 1px
+  ($control-readonly-focus-border-color or $control-readonly-border-color) !default;
+
+// Default variant - Read-only + Focus + Status
+$control-readonly-focus-status-border-color: null !default;
+$control-readonly-focus-status-box-shadow: 0 0 0 1px
+  (
+    $control-readonly-focus-status-border-color or
+      $control-readonly-status-border-color
+  ) !default;
+
+// Cell variant
+$control-cell-min-height: 40px !default;
+$control-cell-padding-y: spacing(1.5) !default;
+$control-cell-padding-x: spacing(3) !default;
+
+$control-cell-background-color: $control-background-color !default;
+$control-cell-background-image: $control-background-image !default;
+$control-cell-color: $control-color !default;
+$control-cell-box-shadow: null !default;
+
+// Cell variant - Status
+$control-cell-status-background-color: var(--#{$prefix}accent-a3) !default;
+$control-cell-status-background-image: $control-status-background-image !default;
+$control-cell-status-color: var(--#{$prefix}accent-a12) !default;
+$control-cell-status-box-shadow: null !default;
+
+// Cell variant - Focus
+$control-cell-focus-background-color: $control-focus-background-color !default;
+$control-cell-focus-background-image: $control-focus-background-image !default;
+$control-cell-focus-box-shadow: inset 0 0 0 2px
+  ($control-focus-border-color or $control-border-color) !default;
+
+// Cell variant - Focus + Status
+$control-cell-focus-status-background-color: $control-focus-status-background-color !default;
+$control-cell-focus-status-background-image: $control-focus-status-background-image !default;
+$control-cell-focus-status-box-shadow: inset 0 0 0 2px
+  ($control-focus-status-border-color or $control-status-border-color) !default;
+
+// Cell variant - Read-only
+$control-cell-readonly-background-color: $control-readonly-background-color !default;
+$control-cell-readonly-background-image: $control-readonly-background-image !default;
+$control-cell-readonly-box-shadow: $control-readonly-box-shadow !default;
+
+// Cell variant - Read-only + Focus
+$control-cell-readonly-focus-box-shadow: inset 0 0 0 2px
+  ($control-readonly-focus-border-color or $control-readonly-border-color) !default;
+
+// Cell variant - Read-only + Status
+$control-cell-readonly-status-background-color: color-mix(
+  in srgb-linear,
+  $control-cell-status-background-color 25%,
+  $control-cell-readonly-background-color
+) !default;
+$control-cell-readonly-status-background-image: $control-readonly-status-background-image !default;
+
+// Cell variant - Read-only + Focus + Status
+$control-cell-readonly-focus-status-box-shadow: inset 0 0 0 2px
+  (
+    $control-readonly-focus-status-border-color or
+      $control-readonly-status-border-color
+  ) !default;
+
+// Placeholder
+$control-placeholder-opacity: 0.5 !default;
+
+// Clear button
+$control-clear-button-size: null !default;
+$control-clear-button-inset-x: 0.5em !default;
+$control-clear-button-font-size: null !default;
+$control-clear-button-color: null !default;
+$control-clear-button-z-index: calc(
+  var(--#{$prefix}z-index-focused) + 1
+) !default;
+
+// Spinner
+$control-spinner-font-size: null !default;
+$control-spinner-z-index: calc(var(--#{$prefix}z-index-focused) + 1) !default;
+
+// Variants
+$control-variants: default, cell !default;
+
+$control-min-height-by-variant: (
+  default: $control-min-height,
+  cell: $control-cell-min-height,
+) !default;
+$control-padding-y-by-variant: (
+  default: $control-padding-y,
+  cell: $control-cell-padding-y,
+) !default;
+$control-padding-x-by-variant: (
+  default: $control-padding-x,
+  cell: $control-cell-padding-x,
+) !default;
+
+$control-border-width-by-variant: (
+  default: $control-border-width,
+  cell: null,
+) !default;
+$control-border-color-by-variant: (
+  default: $control-border-color,
+  cell: null,
+) !default;
+$control-border-radius-by-variant: (
+  default: $control-border-radius,
+  cell: null,
+) !default;
+$control-background-color-by-variant: (
+  default: $control-background-color,
+  cell: $control-cell-background-color,
+) !default;
+$control-background-image-by-variant: (
+  default: $control-background-image,
+  cell: $control-cell-background-image,
+) !default;
+$control-color-by-variant: (
+  default: $control-color,
+  cell: $control-cell-color,
+) !default;
+$control-box-shadow-by-variant: (
+  default: $control-box-shadow,
+  cell: $control-cell-box-shadow,
+) !default;
+
+// Variants - Status
+$control-status-border-color-by-variant: (
+  default: $control-status-border-color,
+  cell: null,
+) !default;
+$control-status-background-color-by-variant: (
+  default: $control-status-background-color,
+  cell: $control-cell-status-background-color,
+) !default;
+$control-status-background-image-by-variant: (
+  default: $control-status-background-image,
+  cell: $control-cell-status-background-image,
+) !default;
+$control-status-color-by-variant: (
+  default: $control-status-color,
+  cell: $control-cell-status-color,
+) !default;
+$control-status-box-shadow-by-variant: (
+  default: $control-status-box-shadow,
+  cell: $control-cell-status-box-shadow,
+) !default;
+
+// Variants - Focus
+$control-focus-border-color-by-variant: (
+  default: $control-focus-border-color,
+  cell: null,
+) !default;
+$control-focus-background-color-by-variant: (
+  default: $control-focus-background-color,
+  cell: $control-cell-focus-background-color,
+) !default;
+$control-focus-background-image-by-variant: (
+  default: $control-focus-background-image,
+  cell: $control-cell-focus-background-image,
+) !default;
+$control-focus-box-shadow-by-variant: (
+  default: $control-focus-box-shadow,
+  cell: $control-cell-focus-box-shadow,
+) !default;
+
+// Variants - Focus + Status
+$control-focus-status-border-color-by-variant: (
+  default: $control-focus-status-border-color,
+  cell: null,
+) !default;
+$control-focus-status-background-color-by-variant: (
+  default: $control-focus-status-background-color,
+  cell: $control-cell-focus-status-background-color,
+) !default;
+$control-focus-status-background-image-by-variant: (
+  default: $control-focus-status-background-image,
+  cell: $control-cell-focus-status-background-image,
+) !default;
+$control-focus-status-box-shadow-by-variant: (
+  default: $control-focus-status-box-shadow,
+  cell: $control-cell-focus-status-box-shadow,
+) !default;
+
+// Variants - Read-only
+$control-readonly-border-color-by-variant: (
+  default: $control-readonly-border-color,
+  cell: null,
+) !default;
+$control-readonly-background-color-by-variant: (
+  default: $control-readonly-background-color,
+  cell: $control-cell-readonly-background-color,
+) !default;
+$control-readonly-background-image-by-variant: (
+  default: $control-readonly-background-image,
+  cell: $control-cell-readonly-background-image,
+) !default;
+$control-readonly-box-shadow-by-variant: (
+  default: $control-readonly-box-shadow,
+  cell: $control-cell-readonly-box-shadow,
+) !default;
+
+// Variants - Read-only + Status
+$control-readonly-status-border-color-by-variant: (
+  default: $control-readonly-status-border-color,
+  cell: null,
+) !default;
+$control-readonly-status-background-color-by-variant: (
+  default: $control-readonly-status-background-color,
+  cell: $control-cell-readonly-status-background-color,
+) !default;
+$control-readonly-status-background-image-by-variant: (
+  default: $control-readonly-status-background-image,
+  cell: $control-cell-readonly-status-background-image,
+) !default;
+
+// Variants - Read-only + Focus
+$control-readonly-focus-border-color-by-variant: (
+  default: $control-readonly-focus-border-color,
+  cell: null,
+) !default;
+$control-readonly-focus-box-shadow-by-variant: (
+  default: $control-readonly-focus-box-shadow,
+  cell: $control-cell-readonly-focus-box-shadow,
+) !default;
+
+// Variants - Read-only + Focus + Status
+$control-readonly-focus-status-border-color-by-variant: (
+  default: $control-readonly-focus-status-border-color,
+  cell: null,
+) !default;
+$control-readonly-focus-status-box-shadow-by-variant: (
+  default: $control-readonly-focus-status-box-shadow,
+  cell: $control-cell-readonly-focus-status-box-shadow,
+) !default;

package/scss/scss/placeholders/control/_control.scss

@@ -0,0 +1,372 @@
+@use "sass:color";
+@use "sass:map";
+
+@use "control-variables" as *;
+@use "../../base-variables" as *;
+@use "../../utils/animation" as *;
+@use "../../utils/css-color-functions" as *;
+@use "../../utils/declare-var" as *;
+@use "../../utils/maybe-important" as *;
+@use "../../utils/responsive-values" as *;
+@use "../../utils/transition" as *;
+
+// Styles for form controls (input, select, textarea).
+%#{$prefix}control {
+  position: relative;
+  min-width: 0;
+
+  flex: 1;
+  align-self: stretch;
+  padding: var(--#{$prefix}control-padding-y) var(--#{$prefix}control-padding-x);
+  border: 0;
+
+  font-family: $control-font-family;
+  font-size: inherit;
+  line-height: inherit;
+  text-align: var(--#{$prefix}control-align);
+  font-weight: $control-font-weight;
+
+  color: inherit;
+  background-color: transparent;
+
+  // Handle responsive values
+  @include responsive-values(
+    --#{$prefix}control,
+    (
+      align: inherit,
+    )
+  );
+
+  // Border radius
+  &:first-child {
+    border-top-left-radius: var(--#{$prefix}control-border-radius);
+    border-bottom-left-radius: var(--#{$prefix}control-border-radius);
+  }
+  &:last-child {
+    border-top-right-radius: var(--#{$prefix}control-border-radius);
+    border-bottom-right-radius: var(--#{$prefix}control-border-radius);
+  }
+
+  &::placeholder,
+  &__placeholder {
+    color: inherit;
+    opacity: $control-placeholder-opacity;
+  }
+
+  // Focus styles are set on the container element (to wrap the adornments)
+  &:focus {
+    outline: 0;
+  }
+
+  &:disabled {
+    opacity: $control-disabled-opacity;
+    cursor: $control-disabled-cursor;
+  }
+
+  &--cell {
+    height: 100%;
+  }
+
+  // Root component styles
+  &__root {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+
+    font-size: $control-font-size;
+    line-height: $control-line-height;
+
+    @each $variant in $control-variants {
+      &--#{$variant} {
+        @if $variant == "cell" {
+          height: 100%;
+        }
+
+        @include declare-var(
+          --#{$prefix}control-min-height,
+          map.get($control-min-height-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-padding-y,
+          map.get($control-padding-y-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-padding-x,
+          map.get($control-padding-x-by-variant, $variant)
+        );
+
+        @include declare-var(
+          --#{$prefix}control-border-width,
+          map.get($control-border-width-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-border-color,
+          map.get($control-border-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-background-color,
+          map.get($control-background-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-background-image,
+          map.get($control-background-image-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-color,
+          map.get($control-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-box-shadow,
+          map.get($control-box-shadow-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}control-border-radius,
+          map.get($control-border-radius-by-variant, $variant)
+        );
+
+        // Status
+        &[data-status] {
+          @include declare-var(
+            --#{$prefix}control-border-color,
+            map.get($control-status-border-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}control-background-color,
+            map.get($control-status-background-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}control-background-image,
+            map.get($control-status-background-image-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}control-color,
+            map.get($control-status-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}control-box-shadow,
+            map.get($control-status-box-shadow-by-variant, $variant)
+          );
+        }
+
+        // Read-only
+        &[data-readonly] {
+          @include declare-var(
+            --#{$prefix}control-border-color,
+            map.get($control-readonly-border-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}control-background-color,
+            map.get($control-readonly-background-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}control-background-image,
+            map.get($control-readonly-background-image-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}control-box-shadow,
+            map.get($control-readonly-box-shadow-by-variant, $variant)
+          );
+
+          // Read-only + Status
+          &[data-status] {
+            @include declare-var(
+              --#{$prefix}control-border-color,
+              map.get(
+                $control-readonly-status-border-color-by-variant,
+                $variant
+              )
+            );
+            @include declare-var(
+              --#{$prefix}control-background-color,
+              map.get(
+                $control-readonly-status-background-color-by-variant,
+                $variant
+              )
+            );
+            @include declare-var(
+              --#{$prefix}control-background-image,
+              map.get(
+                $control-readonly-status-background-image-by-variant,
+                $variant
+              )
+            );
+          }
+        }
+      }
+    }
+  }
+
+  // Container component styles
+  &__container {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-height: var(--#{$prefix}control-min-height);
+    min-width: 0;
+
+    border-radius: var(--#{$prefix}control-border-radius);
+    border-width: var(--#{$prefix}control-border-width, 0);
+    border-style: solid;
+    border-color: var(--#{$prefix}control-border-color);
+    background-color: var(
+      --#{$prefix}control-background-color,
+      var(--#{$prefix}background-color)
+    );
+    background-image: var(--#{$prefix}control-background-image);
+    color: var(--#{$prefix}control-color, inherit);
+    box-shadow: var(--#{$prefix}control-box-shadow);
+    cursor: $control-cursor;
+
+    &:is([data-focused], [data-state="open"]) {
+      z-index: $control-focus-z-index;
+    }
+
+    &[data-disabled] {
+      border-color: css-transparentize(
+        var(--#{$prefix}control-border-color),
+        $control-disabled-opacity
+      );
+      background-color: css-transparentize(
+        var(
+          --#{$prefix}control-background-color,
+          var(--#{$prefix}background-color)
+        ),
+        $control-disabled-opacity
+      );
+      cursor: $control-disabled-cursor;
+    }
+
+    @include accessible-transition();
+
+    @each $variant in $control-variants {
+      &--#{$variant} {
+        // Focus
+        &:is([data-focused], [data-state="open"]):not([data-readonly]) {
+          @include declare-var(
+            --#{$prefix}control-border-color,
+            map.get($control-focus-border-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}control-background-color,
+            map.get($control-focus-background-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}control-background-image,
+            map.get($control-focus-background-image-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}control-box-shadow,
+            map.get($control-focus-box-shadow-by-variant, $variant)
+          );
+
+          // Focus + status
+          &[data-status] {
+            @include declare-var(
+              --#{$prefix}control-border-color,
+              map.get($control-focus-status-border-color-by-variant, $variant)
+            );
+            @include declare-var(
+              --#{$prefix}control-background-color,
+              map.get(
+                $control-focus-status-background-color-by-variant,
+                $variant
+              )
+            );
+            @include declare-var(
+              --#{$prefix}control-background-image,
+              map.get(
+                $control-focus-status-background-image-by-variant,
+                $variant
+              )
+            );
+            @include declare-var(
+              --#{$prefix}control-box-shadow,
+              map.get($control-focus-status-box-shadow-by-variant, $variant)
+            );
+          }
+        }
+
+        // Read-only + Focus
+        &[data-readonly]:is([data-focused], [data-state="open"]) {
+          @include declare-var(
+            --#{$prefix}control-border-color,
+            map.get($control-readonly-focus-border-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}control-box-shadow,
+            map.get($control-readonly-focus-box-shadow-by-variant, $variant)
+          );
+
+          // Read-only + Focus + Status
+          &[data-status] {
+            @include declare-var(
+              --#{$prefix}control-border-color,
+              map.get(
+                $control-readonly-focus-status-border-color-by-variant,
+                $variant
+              )
+            );
+            @include declare-var(
+              --#{$prefix}control-box-shadow,
+              map.get(
+                $control-readonly-focus-status-box-shadow-by-variant,
+                $variant
+              )
+            );
+          }
+        }
+      }
+    }
+  }
+
+  // Add inverted radius style to the code
+  &__code--default {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      left: 100%;
+      height: $control-border-radius;
+      width: 100%;
+      background-color: transparent;
+      box-shadow: calc($control-border-radius * -1) 0 0 0
+        var(--#{$prefix}control-code-background-color);
+    }
+
+    &::before {
+      top: 0;
+      border-top-left-radius: $control-border-radius;
+    }
+
+    &::after {
+      bottom: 0;
+      border-bottom-left-radius: $control-border-radius;
+    }
+  }
+
+  &__clear-button {
+    min-width: maybe-important($control-clear-button-size);
+    min-height: maybe-important($control-clear-button-size);
+    margin: 0
+      calc(var(--#{$prefix}control-padding-x) - $control-clear-button-inset-x) 0
+      calc($control-clear-button-inset-x * -1);
+    font-size: maybe-important($control-clear-button-font-size);
+    color: $control-clear-button-color;
+    z-index: $control-clear-button-z-index;
+  }
+
+  // Styles for the spinner
+  &__spinner {
+    margin-right: var(--#{$prefix}control-padding-x);
+    pointer-events: none;
+    font-size: $control-spinner-font-size;
+    z-index: $control-spinner-z-index;
+
+    &[data-disabled] {
+      opacity: $control-disabled-opacity;
+    }
+  }
+}