@ostack.tech/ui 0.1.0

package/scss/components/Calendar/_Calendar.scss

@@ -0,0 +1,341 @@
+@use "Calendar-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/breakpoints" as *;
+@use "../../scss/utils/button-reset" as *;
+@use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/transition" as *;
+
+.#{$prefix}calendar {
+  margin: 0;
+  font-size: $calendar-font-size;
+  line-height: $calendar-line-height;
+  width: fit-content;
+
+  &__months {
+    margin: calc($calendar-month-margin-y * -1) 0 0
+      calc($calendar-month-margin-x * -1);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+
+    @include media-breakpoint-down(sm) {
+      flex-direction: column;
+    }
+  }
+
+  &__month {
+    flex-shrink: 0;
+    margin: $calendar-month-margin-y 0 0 $calendar-month-margin-x;
+    border: $calendar-month-border-width solid $calendar-month-border-color;
+    border-radius: $calendar-month-border-radius;
+    background-color: $calendar-month-background-color;
+    z-index: 0;
+  }
+
+  &__grid {
+    margin: $calendar-month-padding;
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  &__weeks,
+  &__footer {
+    border: 0;
+  }
+
+  &__caption {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    margin: calc($calendar-month-border-width * -1)
+      calc($calendar-month-border-width * -1) 0
+      calc($calendar-month-border-width * -1);
+    padding: $calendar-month-padding;
+    border-top-left-radius: $calendar-month-border-radius;
+    border-top-right-radius: $calendar-month-border-radius;
+
+    background-color: $calendar-caption-background-color;
+    color: $calendar-caption-color;
+  }
+
+  &__caption-label {
+    margin: 0;
+    padding: $calendar-caption-label-padding-y $calendar-caption-label-padding-x;
+  }
+
+  &__navigation {
+    min-width: $calendar-day-inner-size;
+
+    & > :not(:last-child) {
+      margin-right: $calendar-caption-gap-x;
+    }
+  }
+
+  &__selects {
+    display: flex;
+
+    & > :not(:last-child) {
+      margin-right: $calendar-caption-gap-x;
+    }
+  }
+
+  // Override button styles
+  & &__navigation-button {
+    color: inherit;
+    background-color: $calendar-caption-button-background-color;
+    outline-color: $calendar-caption-button-focus-outline-color;
+
+    &:is(:hover, :focus):not(:active):not(:disabled) {
+      background-color: $calendar-caption-button-hover-background-color !important;
+    }
+    &:active:not(:disabled) {
+      background-color: $calendar-caption-button-active-background-color !important;
+    }
+  }
+
+  // Override select styles
+  .#{$prefix}input__root {
+    width: auto;
+    font-size: inherit;
+    line-height: inherit;
+
+    @include declare-var(
+      --#{$prefix}control-padding-x,
+      $calendar-select-padding-x !important
+    );
+  }
+
+  .#{$prefix}input__container {
+    border: 0;
+    background-color: $calendar-caption-button-background-color !important;
+    background-image: none;
+    color: $calendar-caption-button-color;
+    box-shadow: none;
+
+    &[data-focused]:not([data-disabled]) {
+      box-shadow: 0 0 0 2px $calendar-caption-button-focus-outline-color;
+    }
+    &:is(:hover, [data-focused]):not([data-disabled]):not([data-state="open"]) {
+      background-color: $calendar-caption-button-hover-background-color !important;
+    }
+    &[data-state="open"] {
+      background-color: $calendar-caption-button-active-background-color !important;
+    }
+  }
+
+  .#{$prefix}input {
+    font-family: inherit;
+  }
+
+  .#{$prefix}select__arrow {
+    color: $calendar-select-arrow-color !important;
+  }
+
+  // Weekday
+  &__weekday {
+    width: $calendar-day-width;
+    height: $calendar-weekday-height;
+    font-size: $calendar-weekday-font-size;
+    line-height: $calendar-weekday-line-height;
+    font-weight: $calendar-weekday-font-weight;
+    text-transform: $calendar-weekday-text-transform;
+    text-align: $calendar-weekday-text-align;
+    color: $calendar-weekday-color;
+  }
+
+  // Day/week number styles
+  &__week-number {
+    color: $calendar-week-number-cell-color;
+    font-size: $calendar-week-number-cell-font-size;
+    line-height: $calendar-week-number-cell-line-height;
+    font-weight: $calendar-week-number-cell-font-weight;
+    background-color: $calendar-week-number-cell-background-color;
+  }
+
+  &__day {
+    width: $calendar-day-width;
+    height: $calendar-day-height;
+    padding: 0;
+    color: $calendar-day-color;
+    text-align: $calendar-day-text-align;
+  }
+
+  &__week-number,
+  &__day-inner {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0 auto !important;
+    border: 1px solid transparent;
+    width: $calendar-day-inner-size;
+    height: $calendar-day-inner-size;
+    border-radius: $calendar-day-inner-border-radius;
+  }
+
+  // Day inner styles
+  &__day {
+    &-inner {
+      border: $calendar-day-inner-border-width solid transparent;
+      background-color: transparent;
+      color: inherit;
+      font: inherit;
+      @include accessible-transition($property: box-shadow);
+
+      &:is(button) {
+        @include button-reset();
+      }
+    }
+
+    &:not(&--outside):not(&--selected:not(&--range-middle)):not(&--disabled)
+      &-inner:is(button):is(:hover, :focus) {
+      background-color: $calendar-day-inner-hover-background-color;
+    }
+
+    &:not(&--outside):not(&--selected:not(&--range-middle)):not(&--disabled)
+      &-inner:is(button):active {
+      background-color: $calendar-day-inner-active-background-color;
+    }
+
+    &-inner:focus-visible {
+      outline: $calendar-day-inner-focus-outline-width solid
+        $calendar-day-inner-focus-outline-color;
+      outline-offset: $calendar-day-inner-focus-outline-offset;
+    }
+
+    &--disabled:not(&--outside) &-content {
+      opacity: $calendar-day-inner-disabled-opacity;
+    }
+
+    &--selected:not(&--outside):not(&--range-middle) &-inner {
+      background-color: $calendar-day-inner-selected-background-color;
+      color: $calendar-day-inner-selected-color;
+
+      &:focus-visible {
+        outline-color: $calendar-day-inner-selected-focus-outline-color;
+        outline-offset: $calendar-day-inner-selected-focus-outline-offset;
+      }
+
+      &:active {
+        background-color: $calendar-day-inner-selected-active-background-color;
+      }
+    }
+
+    &--today:not(&--outside):not(&--selected:not(&--range-middle))
+      &-inner:not(:focus-visible) {
+      border: $calendar-day-inner-today-border-width solid
+        $calendar-day-inner-today-border-color;
+    }
+
+    &--outside &-inner {
+      color: $calendar-day-inner-outside-color;
+      background-color: $calendar-day-inner-outside-background-color;
+      transition: none;
+    }
+
+    // Style of the range indicator (colour changes from transparent when
+    // appropriate)
+    :is(
+        &--range-start,
+        &--range-middle,
+        &--range-end,
+        &--focused-range-start,
+        &--focused-range-middle,
+        &--focused-range-end
+      )
+      &-inner {
+      &::before,
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        z-index: -1;
+        inset: calc(
+            ($calendar-day-inner-size - $calendar-range-height) / 2 -
+              $calendar-month-border-width
+          )
+          calc(
+            ($calendar-day-width - $calendar-day-inner-size) / -2 -
+              $calendar-month-border-width - $calendar-month-padding
+          );
+        background-color: transparent;
+        border: $calendar-range-border-width solid transparent;
+      }
+    }
+
+    :is(
+        &--range-start:not(&--range-end),
+        &--range-middle,
+        &--range-end:not(&--range-start)
+      ):not(&--outside)
+      &-inner::before {
+      background-color: $calendar-range-background-color;
+    }
+
+    &--range-start:not(&--range-end):not(&--outside) &-inner::before {
+      left: calc($calendar-day-inner-size / 2);
+    }
+
+    &--range-end:not(&--range-start):not(&--outside) &-inner::before {
+      right: calc($calendar-day-inner-size / 2);
+    }
+
+    :is(
+        &--focused-range-start:not(&--focused-range-end),
+        &--focused-range-middle,
+        &--focused-range-end:not(&--focused-range-start)
+      ):not(&--outside)
+      &-inner::after {
+      background-color: $calendar-range-background-color;
+      border-image-width: $calendar-range-border-width 0;
+      border-top: $calendar-range-border-width solid;
+      border-bottom: $calendar-range-border-width solid;
+    }
+
+    :is(
+        &--focused-range-start:not(&--focused-range-end),
+        &--focused-range-middle,
+        &--focused-range-end:not(&--focused-range-start)
+      ):not(&--outside)
+      &-inner::after {
+      border-image-source: $calendar-range-focus-border-image-source;
+      border-image-slice: $calendar-range-focus-border-image-slice;
+    }
+
+    &--focused-range-start:not(&--focused-range-end):not(&--outside)
+      &-inner::after {
+      left: calc($calendar-day-inner-size / 2);
+    }
+
+    &--focused-range-end:not(&--focused-range-start):not(&--outside)
+      &-inner::after {
+      right: calc($calendar-day-inner-size / 2);
+    }
+
+    :is(
+        &--focused-range-start:not(&--range-start),
+        &--focused-range-end:not(&--range-end)
+      ):not(&--disabled):not(&--outside)
+      &-inner {
+      border: $calendar-range-border-width $calendar-range-focus-border-style
+        $calendar-range-focus-border-color;
+      background-color: $calendar-range-background-color;
+    }
+
+    &--focused-range-start:not(&--range-start):not(&--today):not(
+        &--disabled
+      ):not(&--outside)
+      &-inner {
+      border-right-color: transparent;
+    }
+
+    &--focused-range-end:not(&--range-end):not(&--today):not(&--disabled):not(
+        &--outside
+      )
+      &-inner {
+      border-left-color: transparent;
+    }
+  }
+}

package/scss/components/Card/_Card-variables.scss

@@ -0,0 +1,202 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$card-padding-y: spacing(2.5) !default;
+$card-padding-x: spacing(4) !default;
+
+$card-font-size: var(--#{$prefix}font-size-sm) !default;
+$card-line-height: var(--#{$prefix}line-height-sm) !default;
+$card-border-width: 1px !default;
+$card-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$card-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
+
+// Unmerged
+$card-unmerged-color: var(--#{$prefix}neutral-12) !default;
+$card-unmerged-separator-border-width: $card-border-width !default;
+
+// Merged
+$card-merged-section-padding-y: spacing(1) !default;
+
+// Solid variant
+$card-solid-border-color: var(--#{$prefix}neutral-a7) !default;
+$card-solid-background-color: var(--#{$prefix}accent-9) !default;
+$card-solid-color: var(--#{$prefix}accent-contrast) !default;
+$card-solid-box-shadow: null !default;
+
+// Solid variant - Unmerged
+$card-solid-unmerged-box-shadow:
+  -1px 0 0 0 var(--#{$prefix}accent-9),
+  0 -1px 0 0 var(--#{$prefix}accent-9),
+  1px 0 0 0 var(--#{$prefix}accent-9) !default;
+$card-solid-unmerged-separator-border-color: null !default;
+$card-solid-unmerged-header-separator-border-color: transparent !default;
+
+// Solid variant - Unmerged - Body
+$card-solid-unmerged-body-background-color: var(
+  --#{$prefix}background-color
+) !default;
+$card-solid-unmerged-body-color: null !default;
+
+// Solid variant - Unmerged - Footer
+$card-solid-unmerged-footer-background-color: null !default;
+$card-solid-unmerged-footer-color: null !default;
+
+// Subtle variant
+$card-subtle-border-color: var(--#{$prefix}accent-a6) !default;
+$card-subtle-background-color: var(--#{$prefix}accent-3) !default;
+$card-subtle-color: var(--#{$prefix}accent-a12) !default;
+$card-subtle-box-shadow: null !default;
+
+// Subtle variant - Unmerged
+$card-subtle-unmerged-box-shadow: null !default;
+$card-subtle-unmerged-separator-border-color: var(
+  --#{$prefix}accent-a4
+) !default;
+$card-subtle-unmerged-header-separator-border-color: transparent !default;
+
+// Subtle variant - Unmerged - Body
+$card-subtle-unmerged-body-background-color: var(
+  --#{$prefix}background-color
+) !default;
+$card-subtle-unmerged-body-color: null !default;
+
+// Subtle variant - Unmerged - Footer
+$card-subtle-unmerged-footer-background-color: null !default;
+$card-subtle-unmerged-footer-color: null !default;
+
+// Outlined variant
+$card-outlined-border-color: var(--#{$prefix}accent-a11) !default;
+$card-outlined-background-color: null !default;
+$card-outlined-color: var(--#{$prefix}accent-a11) !default;
+$card-outlined-box-shadow: null !default;
+
+// Outlined variant - Unmerged
+$card-outlined-unmerged-box-shadow: null !default;
+$card-outlined-unmerged-separator-border-color: $card-outlined-border-color !default;
+$card-outlined-unmerged-header-separator-border-color: null !default;
+
+// Outlined variant - Unmerged - Body
+$card-outlined-unmerged-body-background-color: null !default;
+$card-outlined-unmerged-body-color: null !default;
+
+// Outlined variant - Unmerged - Footer
+$card-outlined-unmerged-footer-background-color: null !default;
+$card-outlined-unmerged-footer-color: null !default;
+
+// Ghost variant
+$card-ghost-border-color: transparent !default;
+$card-ghost-background-color: null !default;
+$card-ghost-color: var(--#{$prefix}accent-a11) !default;
+$card-ghost-box-shadow: none !default;
+
+// Ghost variant - Unmerged
+$card-ghost-unmerged-box-shadow: null !default;
+$card-ghost-unmerged-separator-border-color: var(
+  --#{$prefix}accent-a4
+) !default;
+$card-ghost-unmerged-header-separator-border-color: null !default;
+
+// Ghost variant - Unmerged - Body
+$card-ghost-unmerged-body-background-color: null !default;
+$card-ghost-unmerged-body-color: null !default;
+
+// Ghost variant - Unmerged - Footer
+$card-ghost-unmerged-footer-background-color: null !default;
+$card-ghost-unmerged-footer-color: null !default;
+
+// Header
+$card-header-align-items: center !default;
+
+// Title
+$card-title-font-size: $font-size-md !default;
+$card-title-line-height: $line-height-md !default;
+$card-title-font-weight: $font-weight-bold !default;
+$card-title-text-transform: null !default;
+
+// Card footer
+$card-footer-align-items: center !default;
+$card-footer-justify-content: flex-end !default;
+$card-footer-button-margin-x: spacing(1.5) !default;
+
+// Collapsible trigger
+$card-collapsible-trigger-min-size: null !default;
+$card-collapsible-trigger-font-size: null !default;
+
+// Tab list
+$card-tabs-tab-list-margin-y-offset: 0px !default;
+
+// Variants
+$card-variants: solid, subtle, outlined, ghost !default;
+
+$card-border-color-by-variant: (
+  solid: $card-solid-border-color,
+  subtle: $card-subtle-border-color,
+  outlined: $card-outlined-border-color,
+  ghost: $card-ghost-border-color,
+) !default;
+$card-background-color-by-variant: (
+  solid: $card-solid-background-color,
+  subtle: $card-subtle-background-color,
+  outlined: $card-outlined-background-color,
+  ghost: $card-ghost-background-color,
+) !default;
+$card-color-by-variant: (
+  solid: $card-solid-color,
+  subtle: $card-subtle-color,
+  outlined: $card-outlined-color,
+  ghost: $card-ghost-color,
+) !default;
+$card-box-shadow-by-variant: (
+  solid: $card-solid-box-shadow,
+  subtle: $card-subtle-box-shadow,
+  outlined: $card-outlined-box-shadow,
+  ghost: $card-ghost-box-shadow,
+) !default;
+
+// Variants - Unmerged
+$card-unmerged-box-shadow-by-variant: (
+  solid: $card-solid-unmerged-box-shadow,
+  subtle: $card-subtle-unmerged-box-shadow,
+  outlined: $card-outlined-unmerged-box-shadow,
+  ghost: $card-ghost-unmerged-box-shadow,
+) !default;
+$card-unmerged-separator-border-color-by-variant: (
+  solid: $card-solid-unmerged-separator-border-color,
+  subtle: $card-subtle-unmerged-separator-border-color,
+  outlined: $card-outlined-unmerged-separator-border-color,
+  ghost: $card-ghost-unmerged-separator-border-color,
+) !default;
+$card-unmerged-header-separator-border-color-by-variant: (
+  solid: $card-solid-unmerged-header-separator-border-color,
+  subtle: $card-subtle-unmerged-header-separator-border-color,
+  outlined: $card-outlined-unmerged-header-separator-border-color,
+  ghost: $card-ghost-unmerged-header-separator-border-color,
+) !default;
+
+// Variants - Unmerged - Body
+$card-unmerged-body-background-color-by-variant: (
+  solid: $card-solid-unmerged-body-background-color,
+  subtle: $card-subtle-unmerged-body-background-color,
+  outlined: $card-outlined-unmerged-body-background-color,
+  ghost: $card-ghost-unmerged-body-background-color,
+) !default;
+$card-unmerged-body-color-by-variant: (
+  solid: $card-solid-unmerged-body-color,
+  subtle: $card-subtle-unmerged-body-color,
+  outlined: $card-outlined-unmerged-body-color,
+  ghost: $card-ghost-unmerged-body-color,
+) !default;
+
+// Variants - Unmerged - Footer
+$card-unmerged-footer-background-color-by-variant: (
+  solid: $card-solid-unmerged-footer-background-color,
+  subtle: $card-subtle-unmerged-footer-background-color,
+  outlined: $card-outlined-unmerged-footer-background-color,
+  ghost: $card-ghost-unmerged-footer-background-color,
+) !default;
+$card-unmerged-footer-color-by-variant: (
+  solid: $card-solid-unmerged-footer-color,
+  subtle: $card-subtle-unmerged-footer-color,
+  outlined: $card-outlined-unmerged-footer-color,
+  ghost: $card-ghost-unmerged-footer-color,
+) !default;