@ostack.tech/ui 0.1.0

package/scss/scss/placeholders/button/_button-variables.scss

@@ -0,0 +1,254 @@
+@use "sass:color";
+@use "sass:map";
+
+@use "../../base-variables" as *;
+
+$button-cursor: pointer !default;
+$button-border-width: 1px !default;
+$button-border-radius: var(--#{$prefix}border-radius-sm) !default;
+
+// Focus
+$button-focus-z-index: var(--#{$prefix}z-index-focused) !default;
+$button-focus-outline-color: var(--#{$prefix}accent-8) !default;
+$button-focus-outline-width: 2px !default;
+$button-focus-outline-offset: 2px !default;
+
+// Open
+$button-open-box-shadow: null !default;
+
+// Disabled
+$button-disabled-opacity: 0.65 !default;
+$button-disabled-cursor: not-allowed !default;
+$button-disabled-box-shadow: none !default;
+
+// Solid variant
+$button-solid-background-color: var(--#{$prefix}accent-a9) !default;
+$button-solid-background-image: null !default;
+$button-solid-color: var(--#{$prefix}accent-contrast) !default;
+$button-solid-border-color: null !default;
+$button-solid-box-shadow: null !default;
+
+// Solid variant - Focus
+$button-solid-focus-outline-offset: 2px !default;
+
+// Solid variant - Hover
+$button-solid-hover-background-color: var(--#{$prefix}accent-a10) !default;
+$button-solid-hover-background-image: null !default;
+$button-solid-hover-color: null !default;
+$button-solid-hover-border-color: null !default;
+$button-solid-hover-box-shadow: null !default;
+
+// Solid variant - Active
+$button-solid-active-background-color: var(--#{$prefix}accent-a10) !default;
+$button-solid-active-background-image: null !default;
+$button-solid-active-color: null !default;
+$button-solid-active-border-color: null !default;
+$button-solid-active-box-shadow: null !default;
+$button-solid-active-filter: brightness(0.92) saturate(1.1) !default;
+
+// Solid variant - Open
+$button-solid-open-box-shadow: null !default;
+
+// Subtle variant
+$button-subtle-background-color: var(--#{$prefix}accent-a3) !default;
+$button-subtle-background-image: null !default;
+$button-subtle-color: var(--#{$prefix}accent-a12) !default;
+$button-subtle-border-color: null !default;
+$button-subtle-box-shadow: null !default;
+
+// Subtle variant - Focus
+$button-subtle-focus-outline-offset: -1px !default;
+
+// Subtle variant - Hover
+$button-subtle-hover-background-color: var(--#{$prefix}accent-a4) !default;
+$button-subtle-hover-background-image: null !default;
+$button-subtle-hover-color: null !default;
+$button-subtle-hover-border-color: null !default;
+$button-subtle-hover-box-shadow: null !default;
+
+// Subtle variant - Active
+$button-subtle-active-background-color: var(--#{$prefix}accent-a5) !default;
+$button-subtle-active-background-image: null !default;
+$button-subtle-active-color: null !default;
+$button-subtle-active-border-color: null !default;
+$button-subtle-active-box-shadow: null !default;
+$button-subtle-active-filter: null !default;
+
+// Subtle variant - Open
+$button-subtle-open-box-shadow: null !default;
+
+// Outlined variant
+$button-outlined-background-color: null !default;
+$button-outlined-background-image: null !default;
+$button-outlined-color: var(--#{$prefix}accent-a12) !default;
+$button-outlined-border-color: var(--#{$prefix}accent-11) !default;
+$button-outlined-box-shadow: null !default;
+
+// Outlined variant - Focus
+$button-outlined-focus-outline-offset: 2px !default;
+
+// Outlined variant - Hover
+$button-outlined-hover-background-color: var(--#{$prefix}accent-a2) !default;
+$button-outlined-hover-background-image: null !default;
+$button-outlined-hover-color: null !default;
+$button-outlined-hover-border-color: null !default;
+$button-outlined-hover-box-shadow: null !default;
+
+// Outlined variant - Active
+$button-outlined-active-background-color: var(--#{$prefix}accent-a3) !default;
+$button-outlined-active-background-image: null !default;
+$button-outlined-active-color: null !default;
+$button-outlined-active-border-color: null !default;
+$button-outlined-active-box-shadow: null !default;
+$button-outlined-active-filter: brightness(0.9) saturate(1.1) !default;
+
+// Outlined variant - Open
+$button-outlined-open-box-shadow: null !default;
+
+// Ghost variant
+$button-ghost-background-color: null !default;
+$button-ghost-background-image: null !default;
+$button-ghost-color: var(--#{$prefix}accent-a11) !default;
+$button-ghost-border-color: null !default;
+$button-ghost-box-shadow: null !default;
+
+// Ghost variant - Focus
+$button-ghost-focus-outline-offset: -1px !default;
+
+// Ghost variant - Hover
+$button-ghost-hover-background-color: var(--#{$prefix}accent-a3) !default;
+$button-ghost-hover-background-image: null !default;
+$button-ghost-hover-color: null !default;
+$button-ghost-hover-border-color: null !default;
+$button-ghost-hover-box-shadow: null !default;
+
+// Ghost variant - Active
+$button-ghost-active-background-color: var(--#{$prefix}accent-a4) !default;
+$button-ghost-active-background-image: null !default;
+$button-ghost-active-color: null !default;
+$button-ghost-active-border-color: null !default;
+$button-ghost-active-box-shadow: null !default;
+$button-ghost-active-filter: null !default;
+
+// Ghost variant - Open
+$button-ghost-open-box-shadow: null !default;
+
+// Variants
+$button-variants: solid, subtle, outlined, ghost !default;
+
+$button-background-color-by-variant: (
+  solid: $button-solid-background-color,
+  subtle: $button-subtle-background-color,
+  outlined: $button-outlined-background-color,
+  ghost: $button-ghost-background-color,
+) !default;
+$button-background-image-by-variant: (
+  solid: $button-solid-background-image,
+  subtle: $button-subtle-background-image,
+  outlined: $button-outlined-background-image,
+  ghost: $button-ghost-background-image,
+) !default;
+$button-color-by-variant: (
+  solid: $button-solid-color,
+  subtle: $button-subtle-color,
+  outlined: $button-outlined-color,
+  ghost: $button-ghost-color,
+) !default;
+$button-border-color-by-variant: (
+  solid: $button-solid-border-color,
+  subtle: $button-subtle-border-color,
+  outlined: $button-outlined-border-color,
+  ghost: $button-ghost-border-color,
+) !default;
+$button-box-shadow-by-variant: (
+  solid: $button-solid-box-shadow,
+  subtle: $button-subtle-box-shadow,
+  outlined: $button-outlined-box-shadow,
+  ghost: $button-ghost-box-shadow,
+) !default;
+
+// Variants - Focus
+$button-focus-outline-offset-by-variant: (
+  solid: $button-solid-focus-outline-offset,
+  subtle: $button-subtle-focus-outline-offset,
+  outlined: $button-outlined-focus-outline-offset,
+  ghost: $button-ghost-focus-outline-offset,
+) !default;
+
+// Variants - Hover
+$button-hover-background-color-by-variant: (
+  solid: $button-solid-hover-background-color,
+  subtle: $button-subtle-hover-background-color,
+  outlined: $button-outlined-hover-background-color,
+  ghost: $button-ghost-hover-background-color,
+) !default;
+$button-hover-background-image-by-variant: (
+  solid: $button-solid-hover-background-image,
+  subtle: $button-subtle-hover-background-image,
+  outlined: $button-outlined-hover-background-image,
+  ghost: $button-ghost-hover-background-image,
+) !default;
+$button-hover-color-by-variant: (
+  solid: $button-solid-hover-color,
+  subtle: $button-subtle-hover-color,
+  outlined: $button-outlined-hover-color,
+  ghost: $button-ghost-hover-color,
+) !default;
+$button-hover-border-color-by-variant: (
+  solid: $button-solid-hover-border-color,
+  subtle: $button-subtle-hover-border-color,
+  outlined: $button-outlined-hover-border-color,
+  ghost: $button-ghost-hover-border-color,
+) !default;
+$button-hover-box-shadow-by-variant: (
+  solid: $button-solid-hover-box-shadow,
+  subtle: $button-subtle-hover-box-shadow,
+  outlined: $button-outlined-hover-box-shadow,
+  ghost: $button-ghost-hover-box-shadow,
+) !default;
+
+// Variants - Active
+$button-active-background-color-by-variant: (
+  solid: $button-solid-active-background-color,
+  subtle: $button-subtle-active-background-color,
+  outlined: $button-outlined-active-background-color,
+  ghost: $button-ghost-active-background-color,
+) !default;
+$button-active-background-image-by-variant: (
+  solid: $button-solid-active-background-image,
+  subtle: $button-subtle-active-background-image,
+  outlined: $button-outlined-active-background-image,
+  ghost: $button-ghost-active-background-image,
+) !default;
+$button-active-color-by-variant: (
+  solid: $button-solid-active-color,
+  subtle: $button-subtle-active-color,
+  outlined: $button-outlined-active-color,
+  ghost: $button-ghost-active-color,
+) !default;
+$button-active-border-color-by-variant: (
+  solid: $button-solid-active-border-color,
+  subtle: $button-subtle-active-border-color,
+  outlined: $button-outlined-active-border-color,
+  ghost: $button-ghost-active-border-color,
+) !default;
+$button-active-box-shadow-by-variant: (
+  solid: $button-solid-active-box-shadow,
+  subtle: $button-subtle-active-box-shadow,
+  outlined: $button-outlined-active-box-shadow,
+  ghost: $button-ghost-active-box-shadow,
+) !default;
+$button-active-filter-by-variant: (
+  solid: $button-solid-active-filter,
+  subtle: $button-subtle-active-filter,
+  outlined: $button-outlined-active-filter,
+  ghost: $button-ghost-active-filter,
+) !default;
+
+// Variants - Open
+$button-open-box-shadow-by-variant: (
+  solid: $button-solid-open-box-shadow,
+  subtle: $button-subtle-open-box-shadow,
+  outlined: $button-outlined-open-box-shadow,
+  ghost: $button-ghost-open-box-shadow,
+) !default;

package/scss/scss/placeholders/button/_button.scss

@@ -0,0 +1,153 @@
+@use "sass:color";
+@use "sass:map";
+
+@use "button-variables" as *;
+@use "../../base-variables" as *;
+@use "../../utils/button-reset" as *;
+@use "../../utils/declare-var" as *;
+@use "../../utils/transition" as *;
+
+// Base button styles
+%#{$prefix}button {
+  $button: &;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  border: $button-border-width solid;
+  border-color: var(--#{$prefix}button-border-color, transparent);
+  border-radius: $button-border-radius;
+
+  background-color: var(--#{$prefix}button-background-color, transparent);
+  background-image: var(--#{$prefix}button-background-image);
+  color: var(--#{$prefix}button-color);
+  box-shadow: var(--#{$prefix}button-box-shadow);
+  filter: var(--#{$prefix}button-filter);
+
+  -webkit-appearance: button;
+  -webkit-user-select: none;
+  user-select: none;
+
+  @include accessible-transition();
+
+  &:not(:disabled, [data-disabled]) {
+    cursor: $button-cursor;
+  }
+
+  &:is(:disabled, [data-disabled]) {
+    cursor: $button-disabled-cursor;
+    opacity: $button-disabled-opacity;
+    box-shadow: $button-disabled-box-shadow;
+  }
+
+  &:focus {
+    z-index: $button-focus-z-index;
+  }
+
+  &:focus-visible {
+    outline: $button-focus-outline-width solid $button-focus-outline-color;
+    outline-offset: var(--#{$prefix}button-focus-outline-offset);
+  }
+
+  &[aria-haspopup][aria-expanded="true"] {
+    box-shadow: var(
+      --#{$prefix}button-open-box-shadow,
+      $button-open-box-shadow
+    );
+  }
+
+  // Variants/colours
+  @each $variant in $button-variants {
+    &--#{$variant} {
+      // Default styles
+      @include declare-var(
+        --#{$prefix}button-background-color,
+        map.get($button-background-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}button-background-image,
+        map.get($button-background-image-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}button-color,
+        map.get($button-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}button-border-color,
+        map.get($button-border-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}button-box-shadow,
+        map.get($button-box-shadow-by-variant, $variant)
+      );
+
+      // Focus styles
+      @include declare-var(
+        --#{$prefix}button-focus-outline-offset,
+        map.get($button-focus-outline-offset-by-variant, $variant)
+      );
+
+      // Hover styles
+      &:hover:not(:active):not([data-active]):not(
+          [aria-haspopup][aria-expanded="true"]
+        ):not(:disabled):not([data-disabled]) {
+        @include declare-var(
+          --#{$prefix}button-background-color,
+          map.get($button-hover-background-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}button-background-image,
+          map.get($button-hover-background-image-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}button-color,
+          map.get($button-hover-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}button-border-color,
+          map.get($button-hover-border-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}button-box-shadow,
+          map.get($button-hover-box-shadow-by-variant, $variant)
+        );
+      }
+
+      // Active styles
+      &:is(:active, [data-active]):not(:disabled):not([data-disabled]),
+      &[aria-haspopup][aria-expanded="true"] {
+        @include declare-var(
+          --#{$prefix}button-background-color,
+          map.get($button-active-background-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}button-background-image,
+          map.get($button-active-background-image-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}button-color,
+          map.get($button-active-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}button-border-color,
+          map.get($button-active-border-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}button-box-shadow,
+          map.get($button-active-box-shadow-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}button-filter,
+          map.get($button-active-filter-by-variant, $variant)
+        );
+      }
+
+      // Open styles
+      @include declare-var(
+        --#{$prefix}button-open-box-shadow,
+        map.get($button-open-box-shadow-by-variant, $variant)
+      );
+    }
+  }
+}

package/scss/scss/placeholders/checkable/_checkable-variables.scss

@@ -0,0 +1,78 @@
+@use "../control/control-variables" as *;
+@use "../../base-variables" as *;
+@use "../../utils/spacing" as *;
+@use "../../../components/Label/Label-variables" as *;
+
+$checkable-size: 18px !default;
+$checkable-box-shadow: $control-box-shadow !default;
+$checkable-border-width: $control-border-width !default;
+$checkable-border-color: $control-border-color !default;
+$checkable-background-color: $control-background-color !default;
+$checkable-color: $control-color !default;
+
+// Disabled
+$checkable-disabled-cursor: not-allowed !default;
+$checkable-disabled-opacity: 0.5 !default;
+
+// Status
+$checkable-status-border-color: $control-status-border-color !default;
+$checkable-status-background-color: var(--#{$prefix}accent-a2) !default;
+$checkable-status-color: var(--#{$prefix}accent-a11) !default;
+
+// Focus
+$checkable-focus-border-color: $control-focus-border-color !default;
+$checkable-focus-background-color: $control-focus-background-color !default;
+$checkable-focus-box-shadow: $control-focus-box-shadow !default;
+
+// Focus + status
+$checkable-focus-status-border-color: $control-focus-status-border-color !default;
+$checkable-focus-status-background-color: $control-focus-status-background-color !default;
+$checkable-focus-status-box-shadow: $control-focus-status-box-shadow !default;
+
+// Active
+$checkable-active-background-color: var(--#{$prefix}primary-a2) !default;
+$checkable-active-box-shadow: null !default;
+
+// Active + status
+$checkable-active-status-background-color: var(--#{$prefix}accent-a3) !default;
+$checkable-active-status-box-shadow: null !default;
+
+// Read-only
+$checkable-readonly-border-color: $control-readonly-border-color !default;
+$checkable-readonly-background-color: $control-readonly-background-color !default;
+
+// Read-only + status
+$checkable-readonly-status-border-color: $control-readonly-status-border-color !default;
+$checkable-readonly-status-background-color: $control-readonly-status-background-color !default;
+
+// Read-only + focus
+$checkable-readonly-focus-border-color: $control-readonly-focus-border-color !default;
+$checkable-readonly-focus-box-shadow: $control-readonly-focus-box-shadow !default;
+
+// Read-only + focus + status
+$checkable-readonly-focus-status-border-color: $control-readonly-focus-status-border-color !default;
+$checkable-readonly-focus-status-box-shadow: $control-readonly-focus-status-box-shadow !default;
+
+// Label
+$checkable-label-margin-x: spacing(2) !default;
+$checkable-label-padding-y: spacing(1) !default;
+$checkable-label-font-size: $label-font-size !default;
+$checkable-label-line-height: $label-line-height !default;
+$checkable-label-font-weight: $font-weight-normal !default;
+$checkable-label-color: $label-color !default;
+
+// Label - status
+$checkable-label-status-color: null !default;
+
+// Label - checked
+$checkable-label-checked-font-weight: $checkable-label-font-weight !default;
+$checkable-label-checked-color: $neutral-12 !default;
+
+// Label - checked + status
+$checkable-label-checked-status-color: $checkable-label-status-color !default;
+
+// Code
+$checkable-code-margin-x: spacing(2) !default;
+
+// Spinner
+$checkable-spinner-margin-x: spacing(2) !default;