@ostack.tech/ui 0.1.0

package/scss/scss/placeholders/notification/_notification-variables.scss

@@ -0,0 +1,76 @@
+@use "../../base-variables" as *;
+@use "../../utils/spacing" as *;
+
+$notification-padding-y: spacing(3) !default;
+$notification-padding-x: $notification-padding-y !default;
+$notification-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$notification-font-size: var(--#{$prefix}font-size-sm) !default;
+$notification-line-height: var(--#{$prefix}line-height-sm) !default;
+
+// Solid variant
+$notification-solid-background-color: var(--#{$prefix}accent-9) !default;
+$notification-solid-color: var(--#{$prefix}accent-contrast) !default;
+$notification-solid-box-shadow: null !default;
+
+// Solid variant - Icon
+$notification-solid-icon-color: null !default;
+
+// Subtle variant
+$notification-subtle-background-color: var(--#{$prefix}accent-3) !default;
+$notification-subtle-color: var(--#{$prefix}accent-a12) !default;
+$notification-subtle-box-shadow: inset 0 0 0 1px var(--#{$prefix}accent-a6) !default;
+
+// Subtle variant - Icon
+$notification-subtle-icon-color: var(--#{$prefix}accent-a11) !default;
+
+// Outlined variant
+$notification-outlined-background-color: null !default;
+$notification-outlined-color: var(--#{$prefix}accent-a11) !default;
+$notification-outlined-box-shadow: inset 0 0 0 1px var(--#{$prefix}accent-a11) !default;
+
+// Outlined variant - Icon
+$notification-outlined-icon-color: null !default;
+
+// Title
+$notification-title-margin-top: spacing(-1) !default;
+$notification-title-margin-bottom: spacing(0.5) !default;
+$notification-title-font-size: var(--#{$prefix}font-size-md) !default;
+$notification-title-line-height: var(--#{$prefix}line-height-md) !default;
+$notification-title-font-weight: $font-weight-medium !default;
+$notification-title-text-transform: null !default;
+
+// Icon
+$notification-icon-margin-x: spacing(3) !default;
+
+// Close button
+$notification-close-button-inset-x: 0.5em !default;
+
+// Action container
+$notification-action-container-margin-y: spacing(-1.5) !default;
+$notification-action-container-padding-x: spacing(3) !default;
+
+// Variants
+$notification-variants: solid, subtle, outlined !default;
+
+$notification-box-shadow-by-variant: (
+  solid: $notification-solid-box-shadow,
+  subtle: $notification-subtle-box-shadow,
+  outlined: $notification-outlined-box-shadow,
+) !default;
+$notification-background-color-by-variant: (
+  solid: $notification-solid-background-color,
+  subtle: $notification-subtle-background-color,
+  outlined: $notification-outlined-background-color,
+) !default;
+$notification-color-by-variant: (
+  solid: $notification-solid-color,
+  subtle: $notification-subtle-color,
+  outlined: $notification-outlined-color,
+);
+
+// Variants - Icon
+$notification-icon-color-by-variant: (
+  solid: $notification-solid-icon-color,
+  subtle: $notification-subtle-icon-color,
+  outlined: $notification-outlined-icon-color,
+);

package/scss/scss/placeholders/notification/_notification.scss

@@ -0,0 +1,83 @@
+@use "sass:map";
+
+@use "notification-variables" as *;
+@use "../../base-variables" as *;
+@use "../../utils/declare-var" as *;
+@use "../../utils/transition" as *;
+
+%#{$prefix}notification {
+  $notification: &;
+
+  display: flex;
+  align-items: center;
+  padding: $notification-padding-y $notification-padding-x;
+  border-radius: $notification-border-radius;
+
+  font-size: $notification-font-size;
+  line-height: $notification-line-height;
+
+  background-color: var(--#{$prefix}notification-background-color);
+  color: var(--#{$prefix}notification-color);
+  box-shadow: var(--#{$prefix}notification-box-shadow);
+
+  @include accessible-transition();
+
+  &__title {
+    margin: $notification-title-margin-top 0 $notification-title-margin-bottom 0;
+    font-size: $notification-title-font-size;
+    line-height: $notification-title-line-height;
+    font-weight: $notification-title-font-weight;
+    text-transform: $notification-title-text-transform;
+  }
+
+  &__icon {
+    margin-right: $notification-icon-margin-x;
+    color: var(--#{$prefix}notification-icon-color);
+  }
+
+  &__close-button {
+    align-self: start;
+    margin: 0 calc($notification-close-button-inset-x * -1) 0
+      calc($notification-close-button-inset-x * -1) !important;
+
+    &:not(:first-child) {
+      margin-left: calc(
+        $notification-action-container-padding-x -
+          $notification-close-button-inset-x
+      ) !important;
+    }
+  }
+
+  &__action-container {
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    margin: $notification-action-container-margin-y 0
+      $notification-action-container-margin-y auto;
+    padding-left: $notification-action-container-padding-x;
+  }
+
+  // Variants
+  @each $variant in $notification-variants {
+    &--#{$variant} {
+      @include declare-var(
+        --#{$prefix}notification-background-color,
+        map.get($notification-background-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}notification-color,
+        map.get($notification-color-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}notification-box-shadow,
+        map.get($notification-box-shadow-by-variant, $variant)
+      );
+
+      // Variants - Icon
+      @include declare-var(
+        --#{$prefix}notification-icon-color,
+        map.get($notification-icon-color-by-variant, $variant)
+      );
+    }
+  }
+}

package/scss/scss/placeholders/popover/_popover-variables.scss

@@ -0,0 +1,22 @@
+@use "../../base-variables" as *;
+
+$popover-border-width: 1px !default;
+$popover-border-color: var(--#{$prefix}neutral-a7) !default;
+$popover-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$popover-font-size: var(--#{$prefix}font-size-sm) !default;
+$popover-line-height: var(--#{$prefix}line-height-sm) !default;
+$popover-color: var(--#{$prefix}neutral-12) !default;
+$popover-background-color: var(--#{$prefix}background-color) !default;
+$popover-box-shadow: var(--#{$prefix}box-shadow-md) !default;
+$popover-scrollbar-width: thin !default;
+$popover-z-index: var(--#{$prefix}z-index-popover) !default;
+
+$popover-animation-duration: var(--#{$prefix}animation-fade-duration) !default;
+$popover-animation-timing-function: var(
+  --#{$prefix}animation-fade-timing-function
+) !default;
+
+// Arrow
+$popover-arrow-color: $popover-background-color !default;
+$popover-arrow-border-width: $popover-border-width !default;
+$popover-arrow-border-color: $popover-border-color !default;

package/scss/scss/placeholders/popover/_popover.scss

@@ -0,0 +1,70 @@
+@use "popover-variables" as *;
+@use "../../base-variables" as *;
+@use "../../utils/animation" as *;
+@use "../../utils/maybe-important" as *;
+@use "../../utils/spacing" as *;
+
+%#{$prefix}popover {
+  $popover: &;
+
+  border: $popover-border-width solid $popover-border-color;
+  border-radius: $popover-border-radius;
+  // These `!important`s are currently needed due to conflicts with the `Root`
+  // component (we're using `<Root asChild>` on top of popovers)
+  font-size: maybe-important($popover-font-size);
+  line-height: maybe-important($popover-line-height);
+  color: maybe-important($popover-color);
+  background-color: $popover-background-color;
+  box-shadow: $popover-box-shadow;
+  overflow: auto;
+  scrollbar-width: $popover-scrollbar-width;
+
+  z-index: $popover-z-index;
+
+  &[data-state="open"] {
+    @include accessible-animation(
+      $animation-fade-in $popover-animation-duration
+        $popover-animation-timing-function
+    );
+  }
+
+  &[data-state="closed"] {
+    @include accessible-animation(
+      $animation-fade-out $popover-animation-duration
+        $popover-animation-timing-function
+    );
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &__arrow {
+    fill: $popover-arrow-color;
+    filter: if(
+      $popover-arrow-border-width > 0,
+      drop-shadow(0 $popover-arrow-border-width 0 $popover-arrow-border-color),
+      null
+    );
+    margin-top: if(
+      $popover-arrow-border-width > 0,
+      calc($popover-arrow-border-width * -1),
+      null
+    );
+
+    // XXX: Firefox doesn't seem to properly rotate the shadow at 180º
+    // FIXME: Sass is outputting repeated selectors for this rule
+    @-moz-document url-prefix() {
+      #{$popover}[data-side="bottom"] & {
+        filter: if(
+          $popover-arrow-border-width > 0,
+          drop-shadow(
+            0 calc($popover-arrow-border-width * -1) 0
+              $popover-arrow-border-color
+          ),
+          null
+        );
+      }
+    }
+  }
+}

package/scss/scss/utils/_animation.scss

@@ -0,0 +1,125 @@
+@use "../base-variables" as *;
+
+// Mixin used to apply animations depending on the `prefers-reduced-motion`
+// user preference.
+@mixin accessible-animation($args...) {
+  @media (prefers-reduced-motion: no-preference) {
+    animation: $args;
+  }
+}
+
+$animation-fade-in: #{$prefix}fade-in !default;
+$animation-fade-out: #{$prefix}fade-out !default;
+
+// Fade in animation keyframes
+@keyframes #{$animation-fade-in} {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// Fade out animation keyframes
+@keyframes #{$animation-fade-out} {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+$animation-transform-in: #{$prefix}transform-in !default;
+$animation-transform-out: #{$prefix}transform-out !default;
+
+// Transform in animation keyframes
+@keyframes #{$animation-transform-in} {
+  from {
+    opacity: 0;
+    transform: var(--#{$prefix}animation-transform);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+// Transform out animation keyframes
+@keyframes #{$animation-transform-out} {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: var(--#{$prefix}animation-transform);
+  }
+}
+
+$animation-expand-vertical: #{$prefix}expand-vertical !default;
+$animation-collapse-vertical: #{$prefix}collapse-vertical !default;
+
+// Expand vertical animation keyframes
+@keyframes #{$animation-expand-vertical} {
+  from {
+    opacity: 0;
+    height: 0;
+  }
+  25% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+    height: var(--#{$prefix}animation-height);
+  }
+}
+
+// Collapse vertical animation keyframes
+@keyframes #{$animation-collapse-vertical} {
+  from {
+    opacity: 1;
+    height: var(--#{$prefix}animation-height);
+  }
+  75% {
+    opacity: 0;
+  }
+  to {
+    opacity: 0;
+    height: 0;
+  }
+}
+
+$animation-expand-horizontal: #{$prefix}expand-horizontal !default;
+$animation-collapse-horizontal: #{$prefix}collapse-horizontal !default;
+
+// Expand horizontal animation keyframes
+@keyframes #{$animation-expand-horizontal} {
+  from {
+    opacity: 0;
+    width: 0;
+  }
+  25% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+    width: var(--#{$prefix}animation-width);
+  }
+}
+
+// Collapse horizontal animation keyframes
+@keyframes #{$animation-collapse-horizontal} {
+  from {
+    opacity: 1;
+    width: var(--#{$prefix}animation-width);
+  }
+  75% {
+    opacity: 0;
+  }
+  to {
+    opacity: 0;
+    width: 0;
+  }
+}

package/scss/scss/utils/_breakpoints.scss

@@ -0,0 +1,64 @@
+// Adapted from Bootstrap:
+// https://github.com/twbs/bootstrap/blob/main/scss/mixins/_breakpoints.scss
+
+@use "sass:map";
+
+@use "../base-variables" as *;
+
+// Minimum breakpoint width.
+@function breakpoint-min($size, $breakpoint-by-size: $breakpoint-by-size) {
+  $min: map.get($breakpoint-by-size, $size);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width (-0.02 to work around limitations of `-min`/`-max`
+// prefixes and 0.02 instead of 0.01 to work around a Safari rounding bug).
+@function breakpoint-max($size, $breakpoint-by-size: $breakpoint-by-size) {
+  $max: map.get($breakpoint-by-size, $size);
+  @return if($max and $max > 0, $max - 0.02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name
+// with a dash in front.
+@function breakpoint-infix($size, $breakpoint-by-size: $breakpoint-by-size) {
+  @return if(
+    breakpoint-min($size, $breakpoint-by-size) == null,
+    "",
+    "-#{$size}"
+  );
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest
+// breakpoint. Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($size, $breakpoint-by-size: $breakpoint-by-size) {
+  $min: breakpoint-min($size, $breakpoint-by-size);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest
+// breakpoint. Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($size, $breakpoint-by-size: $breakpoint-by-size) {
+  $max: breakpoint-max($size, $breakpoint-by-size);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Applies styles for each breakpoint (using `min-width` media queries).
+@mixin each-breakpoint-up($breakpoint-by-size: $breakpoint-by-size) {
+  @each $name in map.keys($breakpoint-by-size) {
+    @include media-breakpoint-up($name, $breakpoint-by-size) {
+      @content ($name);
+    }
+  }
+}

package/scss/scss/utils/_button-reset.scss

@@ -0,0 +1,17 @@
+@use "../base-variables" as *;
+@use "../placeholders/button/button-variables" as *;
+
+// Resets the styles of a button
+@mixin button-reset {
+  -webkit-appearance: button;
+  -webkit-user-select: none;
+  user-select: none;
+
+  &:not(:disabled):not([data-disabled]) {
+    cursor: $button-cursor;
+  }
+
+  &:is(:disabled, [data-disabled]) {
+    cursor: $button-disabled-cursor;
+  }
+}

package/scss/scss/utils/_css-color-functions.scss

@@ -0,0 +1,15 @@
+@function css-transparentize($color, $opacity) {
+  @return if(
+    $color == null or $opacity == null,
+    null,
+    color-mix(in srgb, $color calc($opacity * 100%), transparent)
+  );
+}
+
+@function css-lighten($color, $percentage) {
+  @return if(
+    $color == null or $percentage == null,
+    null,
+    color-mix(in srgb, $color calc(100% - $percentage), #fff)
+  );
+}

package/scss/scss/utils/_declare-var.scss

@@ -0,0 +1,8 @@
+@use "sass:meta";
+
+// Declares a CSS variable when the values isn't `null`.
+@mixin declare-var($var, $value: null) {
+  @if ($value != null and $value != NULL) {
+    #{$var}: #{if($value == "", "", meta.inspect($value))};
+  }
+}

package/scss/scss/utils/_maybe-important.scss

@@ -0,0 +1,5 @@
+// Returns the value with `!important` appended if it isn't `null`, or `null`
+// otherwise
+@function maybe-important($v) {
+  @return if($v == null, null, #{$v} !important);
+}

package/scss/scss/utils/_responsive-values.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+
+@use "breakpoints" as *;
+@use "declare-var" as *;
+
+// Mixin that sets CSS variables for a component with the given name that
+// changes their value based on the current breakpoint. The currently "active"
+// CSS variable has name `#{$var-prefix}-#{$prop}`.
+//
+// This mixin assumes the existence of css variables with names
+// `#{$var-prefix}-#{$prop}-#{$breakpoint}` and data attributes of name
+// `data-has-#{$prop}-#{breakpoint}`.
+@mixin responsive-values($var-prefix, $props) {
+  @each $prop, $default-value in $props {
+    @include declare-var(#{$var-prefix}-#{$prop}, $default-value);
+  }
+
+  @include each-breakpoint-up using($size) {
+    @each $prop in map.keys($props) {
+      &[data-has-#{$prop}-#{$size}] {
+        @include declare-var(
+          #{$var-prefix}-#{$prop},
+          var(#{$var-prefix}-#{$prop}-#{$size})
+        );
+      }
+    }
+  }
+}

package/scss/scss/utils/_space-toggle.scss

@@ -0,0 +1,25 @@
+@use "declare-var" as *;
+@use "../base-variables" as *;
+
+// Helper SCSS variables to access the toggle variables.
+$toggler-true: var(--#{$prefix}toggler-true);
+$toggler-false: var(--#{$prefix}toggler-false);
+
+// Mixin that creates a CSS "space toggler" that conditionally sets the given
+// property with either the `$then` or `$else` values depending on the
+// `$toggler` variable. This variable should be set with values `$toggler-true`
+// or `$toggler-false`.
+//
+// See https://www.youtube.com/watch?v=ZuZizqDF4q8 for a presentation on this
+// technique.
+@mixin toggle($property, $toggler, $then, $else: null) {
+  @if $else != null {
+    @include declare-var(
+      --#{$prefix}#{$toggler}-#{$property}-toggler,
+      var(--#{$prefix}#{$toggler}) #{$else}
+    );
+    #{$property}: var(--#{$prefix}#{$toggler}-#{$property}-toggler, $then);
+  } @else {
+    #{$property}: var(--#{$prefix}#{$toggler}, $then);
+  }
+}

package/scss/scss/utils/_spacing.scss

@@ -0,0 +1,12 @@
+@use "../base-variables" as *;
+
+$space-var: var(--#{$prefix}space);
+
+// Function returning a multiple of the theme's space
+@function spacing($v) {
+  @return if(
+    $v == null,
+    null,
+    if($v == 0, 0, if($v == 1, $space-var, calc($space-var * $v)))
+  );
+}

package/scss/scss/utils/_spinner.scss

@@ -0,0 +1,31 @@
+@use "../base-variables" as *;
+@use "animation" as *;
+
+$spinner-size: 1em !default;
+$spinner-border-width: clamp(1px, 0.15em, 6px) !default;
+$spinner-animation-speed: 0.75s !default;
+$spinner-reduced-animation-speed: $spinner-animation-speed * 2 !default;
+
+// Adapted from the Bootstrap spinner
+@mixin spinner {
+  display: inline-flex;
+  flex: none;
+
+  width: $spinner-size;
+  height: $spinner-size;
+  border-radius: 50%;
+  border: $spinner-border-width solid currentColor;
+  border-right-color: transparent;
+  animation: $spinner-animation-speed linear infinite #{$prefix}spinner-rotate;
+
+  // Spin animation
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: $spinner-reduced-animation-speed;
+  }
+}
+
+@keyframes #{$prefix}spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/scss/scss/utils/_transition.scss

@@ -0,0 +1,15 @@
+@use "../base-variables" as *;
+
+// Mixin used to apply transitions depending on the `prefers-reduced-motion`
+// user preference.
+@mixin accessible-transition(
+  $property: var(--#{$prefix}transition-property),
+  $duration: var(--#{$prefix}transition-duration),
+  $timing-function: var(--#{$prefix}transition-timing-function)
+) {
+  @media (prefers-reduced-motion: no-preference) {
+    transition-property: $property;
+    transition-duration: $duration;
+    transition-timing-function: $timing-function;
+  }
+}