@ostack.tech/ui 0.1.0

package/scss/components/Button/_Button-variables.scss

@@ -0,0 +1,164 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/button/button-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$button-font-family: inherit !default;
+$button-font-weight: $font-weight-medium !default;
+$button-text-decoration: none !default;
+$button-text-transform: none !default;
+
+// Small size
+$button-sm-padding-y: spacing(0.75) !default;
+$button-sm-padding-x: spacing(2) !default;
+$button-sm-font-size: var(--#{$prefix}font-size-xs) !default;
+$button-sm-line-height: var(--#{$prefix}line-height-xs) !default;
+
+// Small size - Icon
+$button-sm-icon-font-size: var(--#{$prefix}font-size-sm) !default;
+$button-sm-icon-margin-x: spacing(1.5) !default;
+
+// Medium size
+$button-md-padding-y: spacing(1.25) !default;
+$button-md-padding-x: spacing(3) !default;
+$button-md-font-size: var(--#{$prefix}font-size-sm) !default;
+$button-md-line-height: var(--#{$prefix}line-height-sm) !default;
+
+// Medium size - Icon
+$button-md-icon-font-size: var(--#{$prefix}font-size-md) !default;
+$button-md-icon-margin-x: spacing(2) !default;
+
+// Large size
+$button-lg-padding-y: spacing(1.75) !default;
+$button-lg-padding-x: spacing(4) !default;
+$button-lg-font-size: var(--#{$prefix}font-size-md) !default;
+$button-lg-line-height: var(--#{$prefix}line-height-md) !default;
+
+// Large size - Icon
+$button-lg-icon-font-size: var(--#{$prefix}font-size-lg) !default;
+$button-lg-icon-margin-x: spacing(2.25) !default;
+
+// Extra large size
+$button-xl-padding-y: spacing(2.25) !default;
+$button-xl-padding-x: spacing(5) !default;
+$button-xl-font-size: var(--#{$prefix}font-size-lg) !default;
+$button-xl-line-height: var(--#{$prefix}line-height-lg) !default;
+
+// Extra large size - Icon
+$button-xl-icon-font-size: var(--#{$prefix}font-size-xl) !default;
+$button-xl-icon-margin-x: spacing(2.5) !default;
+
+// Vertical
+$button-vertical-font-weight: $button-font-weight !default;
+$button-vertical-line-height: 1 !default;
+
+// Vertical - Small size
+$button-vertical-sm-min-size: 32px !default;
+$button-vertical-sm-padding: spacing(0.25) !default;
+$button-vertical-sm-font-size: var(--#{$prefix}font-size-2xs) !default;
+
+// Vertical - Small size - Icon
+$button-vertical-sm-icon-font-size: var(--#{$prefix}font-size-sm) !default;
+$button-vertical-sm-icon-margin-y: spacing(0.75) !default;
+
+// Vertical - Medium size
+$button-vertical-md-min-size: 40px !default;
+$button-vertical-md-padding: spacing(0.5) !default;
+$button-vertical-md-font-size: var(--#{$prefix}font-size-2xs) !default;
+
+// Vertical - Medium size - Icon
+$button-vertical-md-icon-font-size: var(--#{$prefix}font-size-md) !default;
+$button-vertical-md-icon-margin-y: spacing(1) !default;
+
+// Vertical - Large size
+$button-vertical-lg-min-size: 48px !default;
+$button-vertical-lg-padding: spacing(0.75) !default;
+$button-vertical-lg-font-size: var(--#{$prefix}font-size-xs) !default;
+
+// Vertical - Large size - Icon
+$button-vertical-lg-icon-font-size: var(--#{$prefix}font-size-lg) !default;
+$button-vertical-lg-icon-margin-y: spacing(1.25) !default;
+
+// Vertical - Extra large size
+$button-vertical-xl-min-size: 56px !default;
+$button-vertical-xl-padding: spacing(1) !default;
+$button-vertical-xl-font-size: var(--#{$prefix}font-size-sm) !default;
+
+// Vertical - Extra large size - Icon
+$button-vertical-xl-icon-font-size: var(--#{$prefix}font-size-xl) !default;
+$button-vertical-xl-icon-margin-y: spacing(1.5) !default;
+
+// Sizes
+$button-sizes: sm, md, lg, xl !default;
+
+$button-padding-y-by-size: (
+  sm: $button-sm-padding-y,
+  md: $button-md-padding-y,
+  lg: $button-lg-padding-y,
+  xl: $button-xl-padding-y,
+) !default;
+$button-padding-x-by-size: (
+  sm: $button-sm-padding-x,
+  md: $button-md-padding-x,
+  lg: $button-lg-padding-x,
+  xl: $button-xl-padding-x,
+) !default;
+$button-font-size-by-size: (
+  sm: $button-sm-font-size,
+  md: $button-md-font-size,
+  lg: $button-lg-font-size,
+  xl: $button-xl-font-size,
+) !default;
+$button-line-height-by-size: (
+  sm: $button-sm-line-height,
+  md: $button-md-line-height,
+  lg: $button-lg-line-height,
+  xl: $button-xl-line-height,
+) !default;
+
+// Sizes - Icon
+$button-icon-font-size-by-size: (
+  sm: $button-sm-icon-font-size,
+  md: $button-md-icon-font-size,
+  lg: $button-lg-icon-font-size,
+  xl: $button-xl-icon-font-size,
+) !default;
+$button-icon-margin-x-by-size: (
+  sm: $button-sm-icon-margin-x,
+  md: $button-md-icon-margin-x,
+  lg: $button-lg-icon-margin-x,
+  xl: $button-xl-icon-margin-x,
+) !default;
+
+// Vertical - Sizes
+$button-vertical-min-size-by-size: (
+  sm: $button-vertical-sm-min-size,
+  md: $button-vertical-md-min-size,
+  lg: $button-vertical-lg-min-size,
+  xl: $button-vertical-xl-min-size,
+) !default;
+$button-vertical-padding-by-size: (
+  sm: $button-vertical-sm-padding,
+  md: $button-vertical-md-padding,
+  lg: $button-vertical-lg-padding,
+  xl: $button-vertical-xl-padding,
+) !default;
+$button-vertical-font-size-by-size: (
+  sm: $button-vertical-sm-font-size,
+  md: $button-vertical-md-font-size,
+  lg: $button-vertical-lg-font-size,
+  xl: $button-vertical-xl-font-size,
+) !default;
+
+// Vertical - Sizes - Icon
+$button-vertical-icon-font-size-by-size: (
+  sm: $button-vertical-sm-icon-font-size,
+  md: $button-vertical-md-icon-font-size,
+  lg: $button-vertical-lg-icon-font-size,
+  xl: $button-vertical-xl-icon-font-size,
+) !default;
+$button-vertical-icon-margin-y-by-size: (
+  sm: $button-vertical-sm-icon-margin-y,
+  md: $button-vertical-md-icon-margin-y,
+  lg: $button-vertical-lg-icon-margin-y,
+  xl: $button-vertical-xl-icon-margin-y,
+) !default;

package/scss/components/Button/_Button.scss

@@ -0,0 +1,136 @@
+@use "sass:map";
+
+@use "Button-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/transition" as *;
+
+.#{$prefix}button {
+  $button: &;
+
+  @extend %#{$prefix}button;
+
+  padding: var(--#{$prefix}button-padding-y) var(--#{$prefix}button-padding-x);
+
+  font-family: $button-font-family;
+  font-weight: $button-font-weight;
+  text-decoration: $button-text-decoration;
+  text-transform: $button-text-transform;
+  font-size: var(--#{$prefix}button-font-size);
+  line-height: var(--#{$prefix}button-line-height);
+
+  // Vertical styling
+  &--vertical {
+    min-height: var(--#{$prefix}button-vertical-min-size);
+    min-width: var(--#{$prefix}button-vertical-min-size);
+    flex-direction: column;
+    padding: var(--#{$prefix}button-vertical-padding);
+
+    font-size: var(--#{$prefix}button-vertical-font-size);
+    line-height: $button-vertical-line-height;
+    font-weight: $button-vertical-font-weight;
+  }
+
+  // Button icon/spinner
+  &__icon,
+  &__spinner {
+    font-size: var(--#{$prefix}button-icon-font-size);
+    margin: calc(
+        (
+            var(--#{$prefix}button-icon-font-size) - var(
+                --#{$prefix}button-font-size
+              )
+          ) *
+          -0.5
+      )
+      0;
+
+    #{$button}--vertical > & {
+      @include declare-var(
+        --#{$prefix}button-icon-font-size,
+        var(--#{$prefix}button-vertical-icon-font-size)
+      );
+    }
+
+    &--start {
+      margin-right: var(--#{$prefix}button-icon-margin-x);
+
+      #{$button}--vertical > & {
+        margin: 0 0 calc(var(--#{$prefix}button-vertical-icon-margin-y) - 1px);
+      }
+    }
+
+    &--end {
+      margin-left: var(--#{$prefix}button-icon-margin-x);
+
+      #{$button}--vertical > & {
+        margin: calc(var(--#{$prefix}button-vertical-icon-margin-y) - 1px) 0 0;
+      }
+    }
+  }
+
+  // Size
+  @each $size in $button-sizes {
+    &--#{$size} {
+      @include declare-var(
+        --#{$prefix}button-padding-y,
+        map.get($button-padding-y-by-size, $size)
+      );
+      @include declare-var(
+        --#{$prefix}button-padding-x,
+        map.get($button-padding-x-by-size, $size)
+      );
+      @include declare-var(
+        --#{$prefix}button-font-size,
+        map.get($button-font-size-by-size, $size)
+      );
+      @include declare-var(
+        --#{$prefix}button-line-height,
+        map.get($button-line-height-by-size, $size)
+      );
+
+      // Icon
+      @include declare-var(
+        --#{$prefix}button-icon-font-size,
+        map.get($button-icon-font-size-by-size, $size)
+      );
+      @include declare-var(
+        --#{$prefix}button-icon-margin-x,
+        map.get($button-icon-margin-x-by-size, $size)
+      );
+
+      // Vertical
+      @include declare-var(
+        --#{$prefix}button-vertical-min-size,
+        map.get($button-vertical-min-size-by-size, $size)
+      );
+      @include declare-var(
+        --#{$prefix}button-vertical-padding,
+        map.get($button-vertical-padding-by-size, $size)
+      );
+      @include declare-var(
+        --#{$prefix}button-vertical-font-size,
+        map.get($button-vertical-font-size-by-size, $size)
+      );
+
+      // Vertical - Icon
+      @include declare-var(
+        --#{$prefix}button-vertical-icon-font-size,
+        map.get($button-vertical-icon-font-size-by-size, $size)
+      );
+      @include declare-var(
+        --#{$prefix}button-vertical-icon-margin-y,
+        map.get($button-vertical-icon-margin-y-by-size, $size)
+      );
+    }
+  }
+
+  // Variants
+  @each $variant in $button-variants {
+    &--#{$variant} {
+      @extend %#{$prefix}button--#{$variant};
+    }
+  }
+}

package/scss/components/ButtonGroup/_ButtonGroup-variables.scss

@@ -0,0 +1,41 @@
+@use "../../scss/base-variables" as *;
+
+// Solid variant
+$button-group-solid-margin-x: null !default;
+$button-group-solid-separator-width: 1px !default;
+$button-group-solid-separator-color: var(--#{$prefix}accent-8) !default;
+
+// Subtle variant
+$button-group-subtle-margin-x: null !default;
+$button-group-subtle-separator-width: 1px !default;
+$button-group-subtle-separator-color: var(--#{$prefix}accent-5) !default;
+
+// Outlined variant
+$button-group-outlined-margin-x: -1px !default;
+$button-group-outlined-separator-width: null !default;
+$button-group-outlined-separator-color: null !default;
+
+// Ghost variant
+$button-group-ghost-margin-x: null !default;
+$button-group-ghost-separator-width: 1px !default;
+$button-group-ghost-separator-color: var(--#{$prefix}accent-4) !default;
+
+// Variants
+$button-group-margin-x-by-variant: (
+  solid: $button-group-solid-margin-x,
+  subtle: $button-group-subtle-margin-x,
+  outlined: $button-group-outlined-margin-x,
+  ghost: $button-group-ghost-margin-x,
+) !default;
+$button-group-separator-width-by-variant: (
+  solid: $button-group-solid-separator-width,
+  subtle: $button-group-subtle-separator-width,
+  outlined: $button-group-outlined-separator-width,
+  ghost: $button-group-ghost-separator-width,
+) !default;
+$button-group-separator-color-by-variant: (
+  solid: $button-group-solid-separator-color,
+  subtle: $button-group-subtle-separator-color,
+  outlined: $button-group-outlined-separator-color,
+  ghost: $button-group-ghost-separator-color,
+) !default;

package/scss/components/ButtonGroup/_ButtonGroup.scss

@@ -0,0 +1,48 @@
+@use "sass:map";
+
+@use "ButtonGroup-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/placeholders/button/button-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+.#{$prefix}button-group {
+  $button: ".#{$prefix}button";
+  $icon-button: ".#{$prefix}icon-button";
+
+  position: relative;
+  display: inline-flex;
+
+  > #{$button},
+  > #{$icon-button} {
+    position: relative;
+    flex: 1 1 auto;
+
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    @each $variant in $button-variants {
+      &--#{$variant} {
+        &:not(:first-child) {
+          margin-left: map.get($button-group-margin-x-by-variant, $variant);
+
+          $separator-width: map.get(
+            $button-group-separator-width-by-variant,
+            $variant
+          );
+          @if $separator-width != null and $separator-width != NULL {
+            border-left: $separator-width
+              solid
+              map.get($button-group-separator-color-by-variant, $variant);
+          }
+        }
+      }
+    }
+  }
+}

package/scss/components/Calendar/_Calendar-variables.scss

@@ -0,0 +1,127 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$calendar-font-size: var(--#{$prefix}font-size-sm) !default;
+$calendar-line-height: var(--#{$prefix}line-height-sm) !default;
+
+// Month
+$calendar-month-margin-y: spacing(1) !default;
+$calendar-month-margin-x: $calendar-month-margin-y !default;
+$calendar-month-padding: spacing(2.5) !default;
+$calendar-month-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$calendar-month-border-width: 1px !default;
+$calendar-month-border-color: var(--#{$prefix}neutral-a7) !default;
+$calendar-month-background-color: var(--#{$prefix}background-color) !default;
+
+// Caption
+$calendar-caption-gap-x: spacing(0.5) !default;
+$calendar-caption-background-color: var(--#{$prefix}primary-9) !default;
+$calendar-caption-color: var(--#{$prefix}primary-contrast) !default;
+
+// Caption label
+$calendar-caption-label-padding-y: spacing(1) !default;
+$calendar-caption-label-padding-x: spacing(2) !default;
+
+// Caption button
+$calendar-caption-button-background-color: transparent !default;
+$calendar-caption-button-color: inherit !default;
+
+// Caption button - Focus
+$calendar-caption-button-focus-outline-color: rgba(255, 255, 255, 0.3) !default;
+
+// Caption button - Hover
+$calendar-caption-button-hover-background-color: rgba(0, 0, 0, 0.1) !default;
+
+// Caption button - Active
+$calendar-caption-button-active-background-color: rgba(0, 0, 0, 0.2) !default;
+
+// Select
+$calendar-select-padding-x: spacing(2.5) !default;
+
+// Select arrow
+$calendar-select-arrow-color: rgba(255, 255, 255, 0.8) !default;
+
+// Day
+$calendar-day-width: 36px !default;
+$calendar-day-height: 34px !default;
+$calendar-day-color: var(--#{$prefix}neutral-a12) !default;
+$calendar-day-text-align: center !default;
+
+// Weekday
+$calendar-weekday-height: 24px !default;
+$calendar-weekday-font-size: var(--#{$prefix}font-size-xs) !default;
+$calendar-weekday-line-height: var(--#{$prefix}line-height-xs) !default;
+$calendar-weekday-font-weight: $font-weight-normal !default;
+$calendar-weekday-text-transform: null !default;
+$calendar-weekday-text-align: $calendar-day-text-align !default;
+$calendar-weekday-color: var(--#{$prefix}neutral-9) !default;
+
+// Week number cell
+$calendar-week-number-cell-font-size: $calendar-weekday-font-size !default;
+$calendar-week-number-cell-line-height: $calendar-weekday-line-height !default;
+$calendar-week-number-cell-font-weight: $font-weight-normal !default;
+$calendar-week-number-cell-color: $calendar-weekday-color !default;
+$calendar-week-number-cell-background-color: $calendar-month-background-color !default;
+
+// Day inner
+$calendar-day-inner-size: 32px !default;
+$calendar-day-inner-border-radius: 50% !default;
+$calendar-day-inner-border-width: 1px !default;
+
+// Day inner - Focus
+$calendar-day-inner-focus-outline-width: 2px !default;
+$calendar-day-inner-focus-outline-color: var(--#{$prefix}neutral-8) !default;
+$calendar-day-inner-focus-outline-offset: -1px !default;
+
+// Day inner - Hover
+$calendar-day-inner-hover-background-color: var(--#{$prefix}neutral-3) !default;
+
+// Day inner - Active
+$calendar-day-inner-active-background-color: var(
+  --#{$prefix}neutral-4
+) !default;
+
+// Day inner - Disabled
+$calendar-day-inner-disabled-opacity: 0.5 !default;
+
+// Day inner - Selected
+$calendar-day-inner-selected-background-color: var(
+  --#{$prefix}primary-9
+) !default;
+$calendar-day-inner-selected-color: var(--#{$prefix}primary-contrast) !default;
+
+// Day inner - Selected + Focus
+$calendar-day-inner-selected-focus-outline-color: var(
+  --#{$prefix}primary-8
+) !default;
+$calendar-day-inner-selected-focus-outline-offset: 2px !default;
+
+// Day inner - Selected + Active
+$calendar-day-inner-selected-active-background-color: var(
+  --#{$prefix}primary-10
+) !default;
+
+// Day inner - Today
+$calendar-day-inner-today-border-width: 1px !default;
+$calendar-day-inner-today-border-color: var(--#{$prefix}neutral-10) !default;
+
+// Day inner - Outside
+$calendar-day-inner-outside-color: var(--#{$prefix}neutral-a7) !default;
+$calendar-day-inner-outside-background-color: $calendar-month-background-color !default;
+
+// Range
+$calendar-range-height: 20px !default;
+$calendar-range-border-width: 1px !default;
+$calendar-range-background-color: var(--#{$prefix}neutral-3) !default;
+
+// Range - Focus
+$calendar-range-focus-border-style: dashed !default;
+$calendar-range-focus-border-color: var(--#{$prefix}neutral-7) !default;
+$calendar-range-focus-border-image-source: repeating-linear-gradient(
+  to right,
+  $calendar-range-focus-border-color 0,
+  $calendar-range-focus-border-color 3px,
+  $calendar-month-background-color 3px,
+  $calendar-month-background-color 6px
+) !default;
+$calendar-range-focus-border-image-slice: 1 1% !default;