@odx/ui 4.10.0 → 4.10.2

package/scss/_helpers.scss

@@ -0,0 +1,85 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+html body {
+  .odx-no-margin {
+    margin: 0;
+  }
+
+  @each $size in (4, 8, 12, 16, 24, 36, 48) {
+    $factor: math.div($size, 24);
+
+    @each $direction in (top, right, bottom, left) {
+      .odx-margin-#{$direction}-#{$size} {
+        @include dimensions.margin($factor, $direction);
+      }
+    }
+
+    .odx-margin-x-#{$size} {
+      @include dimensions.margin-x($factor);
+    }
+
+    .odx-margin-y-#{$size} {
+      @include dimensions.margin-y($factor);
+    }
+
+    .odx-margin-#{$size} {
+      @include dimensions.margin($factor);
+    }
+  }
+
+  @each $size in (4, 8, 12, 16, 24, 36, 48) {
+    $factor: math.div($size, 24);
+
+    @each $direction in (top, right, bottom, left) {
+      .odx-padding-#{$direction}-#{$size} {
+        @include dimensions.padding($factor, $direction);
+      }
+    }
+
+    .odx-padding-x-#{$size} {
+      @include dimensions.padding-x($factor);
+    }
+
+    .odx-padding-y-#{$size} {
+      @include dimensions.padding-y($factor);
+    }
+
+    .odx-padding-#{$size} {
+      @include dimensions.padding($factor);
+    }
+  }
+
+  .odx-visually-hidden {
+    @include utils.visually-hidden();
+  }
+
+  hr,
+  .odx-separator {
+    @include dimensions.height(1, math.div(1, 24));
+
+    background-color: var(--odx-c-separator);
+    border: 0;
+  }
+
+  .odx-fs-normal {
+    @include typography.font-weight(normal);
+  }
+
+  .odx-fs-medium {
+    @include typography.font-weight(medium);
+  }
+
+  b,
+  strong,
+  .odx-fs-bold {
+    @include typography.font-weight(semibold);
+  }
+
+  em,
+  .odx-fs-italic {
+    font-style: italic;
+  }
+}

package/scss/_index.scss

@@ -0,0 +1,8 @@
+@forward 'color-palettes';
+@forward 'color-palettes-dark';
+@forward 'colors';
+@forward 'colors-dark';
+@forward 'controls';
+@forward 'typography';
+@forward 'vertical-rythm';
+@forward 'visuals';

package/scss/_layout.scss

@@ -0,0 +1,162 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+
+$columns: 12 !default;
+
+@function create-selector($value, $match: '~') {
+  @return "[odxLayout#{$match}='#{$value}']";
+}
+
+:root {
+  --odx-grid-gutter: #{dimensions.get-size(1)};
+  --odx-grid-gutter-small: #{dimensions.get-size(math.div(8, 24))};
+
+  @include breakpoints.down(phone) {
+    --odx-grid-gutter: var(--odx-grid-gutter-small);
+  }
+}
+
+#{create-selector(grid)},
+#{create-selector(flex)} {
+  gap: var(--odx-grid-gutter);
+
+  &#{create-selector(gap-small)} {
+    gap: var(--odx-grid-gutter-small);
+  }
+
+  &#{create-selector(gap-none)} {
+    gap: 0;
+  }
+
+  &#{create-selector(gap-row-none)} {
+    row-gap: 0;
+  }
+
+  &#{create-selector(gap-column-none)} {
+    column-gap: 0;
+  }
+
+  &#{create-selector(vertical-center)} {
+    align-items: center;
+  }
+
+  &#{create-selector(vertical-start)} {
+    align-items: flex-start;
+  }
+
+  &#{create-selector(vertical-end)} {
+    align-items: flex-end;
+  }
+
+  &#{create-selector(horizontal-center)} {
+    justify-items: center;
+  }
+
+  &#{create-selector(horizontal-start)} {
+    justify-items: flex-start;
+  }
+
+  &#{create-selector(horizontal-end)} {
+    justify-items: flex-end;
+  }
+
+  #{create-selector(first)} {
+    order: -1;
+  }
+
+  #{create-selector(last)} {
+    order: $columns;
+  }
+
+  #{create-selector(separator)} {
+    background-clip: content-box;
+    border-color: var(--odx-c-separator);
+    border-style: solid;
+
+    @each $side in (right, left) {
+      &#{create-selector($side)} {
+        border-#{$side}-width: 1px;
+        margin-#{$side}: calc(-0.5 * var(--odx-grid-gutter));
+        padding-#{$side}: calc(0.5 * var(--odx-grid-gutter));
+      }
+    }
+  }
+}
+
+#{create-selector(flex)} {
+  display: flex;
+
+  &#{create-selector(inline)} {
+    display: inline-flex;
+  }
+
+  &#{create-selector(wrap)} {
+    flex-wrap: wrap;
+  }
+
+  #{create-selector(auto)} {
+    flex: 1 1 auto;
+  }
+}
+
+#{create-selector(grid)} {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+
+  &#{create-selector(inline)} {
+    display: inline-grid;
+  }
+
+  @each $breakpoint in breakpoints.get-breakpoint-names() {
+    &#{create-selector(\@#{$breakpoint}, '*')} {
+      grid-template-columns: 12fr;
+    }
+  }
+
+  @for $index from 1 through $columns {
+    &#{create-selector($index)} {
+      grid-template-columns: repeat(calc($columns / $index), 1fr);
+    }
+
+    #{create-selector($index)} {
+      grid-column: span $index / span $index;
+    }
+
+    #{create-selector(offset-#{$index})} {
+      grid-column-start: $index !important;
+    }
+  }
+
+  @each $breakpoint in breakpoints.get-breakpoint-names() {
+    @include breakpoints.up($breakpoint) {
+      @for $index from 1 through $columns {
+        &#{create-selector(#{$index}\@#{$breakpoint})} {
+          grid-template-columns: repeat(calc($columns / $index), 1fr);
+        }
+
+        #{create-selector(#{$index}\@#{$breakpoint})} {
+          grid-column: span $index / span $index;
+        }
+
+        #{create-selector(offset-#{$index}\@#{$breakpoint})} {
+          grid-column-start: $index !important;
+        }
+      }
+
+      #{create-selector(first\@#{$breakpoint})} {
+        order: -1;
+      }
+
+      #{create-selector(last\@#{$breakpoint})} {
+        order: $columns;
+      }
+    }
+  }
+
+  &#{create-selector(auto)} {
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    grid-template-columns: unset;
+  }
+}

package/scss/_motion.scss

@@ -0,0 +1,14 @@
+@use 'sass:list';
+
+@mixin transition($properties, $duration: var(--odx-v-transition-duration), $delay: 0ms, $timing-function: var(--odx-v-transition-easing-fn)) {
+  $props: ();
+
+  @each $prop in $properties {
+    $props: list.append($props, $prop, comma);
+  }
+
+  transition-delay: $delay;
+  transition-duration: $duration;
+  transition-property: $props;
+  transition-timing-function: $timing-function;
+}

package/scss/_skeleton.scss

@@ -0,0 +1,49 @@
+@keyframes skeleton-animation {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0.5;
+  }
+}
+
+.odx-skeleton {
+  background-color: transparent;
+  color: transparent;
+  pointer-events: none;
+  position: relative;
+  user-select: none;
+
+  &::after {
+    animation: skeleton-animation ease-in-out 1s infinite alternate;
+    background-color: var(--gray-200);
+    border-radius: var(--odx-v-border-radius);
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &--text::before {
+    content: '\a0';
+  }
+
+  &--short::after {
+    width: 40%;
+  }
+
+  &--center::after {
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%, 0);
+    width: 40%;
+  }
+
+  * {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/scss/_text-list.scss

@@ -0,0 +1,18 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+
+.odx-text-list,
+.odx-text-list ol,
+.odx-text-list ul {
+  @include dimensions.margin-y(0.5);
+  @include dimensions.padding(1, left);
+
+  ul,
+  ol {
+    @include dimensions.margin(0);
+  }
+
+  li {
+    @include dimensions.margin(math.div(-1, 24), left);
+  }
+}

package/scss/_typography.scss

@@ -0,0 +1,21 @@
+@use '../abstract/breakpoints';
+
+:root {
+  --odx-typography-font-family: 'PangeaText', 'Arial', sans-serif;
+  --odx-typography-base-size: 1.6rem; // clamp(1.4rem, 0.667vw + 1rem, 1.6rem);
+  --odx-typography-base-line-height: 1.5;
+  --odx-typography-font-weight-normal: 400;
+  --odx-typography-font-weight-normal-letter-spacing: 0;
+  --odx-typography-font-weight-medium: 500;
+  --odx-typography-font-weight-medium-letter-spacing: -0.19px;
+  --odx-typography-font-weight-semibold: 600;
+  --odx-typography-font-weight-semibold-letter-spacing: 0;
+  --odx-typography-font-weight-bold: var(--odx-typography-font-weight-semibold);
+  --odx-typography-font-weight-bold-letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);
+  --odx-typography-positive-font-scaling-factor: 1.125;
+  --odx-typography-negative-font-scaling-factor: 1.2;
+
+  @include breakpoints.up(phone) {
+    --odx-typography-positive-font-scaling-factor: 1.25;
+  }
+}

package/scss/_utils.scss

@@ -0,0 +1,131 @@
+@use 'sass:math';
+
+@function css-pow($value, $exponent) {
+  $css-value: 1;
+
+  @if $exponent < 0 {
+    @for $i from 1 through math.abs($exponent) {
+      $css-value: $css-value + '*1/#{$value}';
+    }
+  }
+
+  @if $exponent > 0 {
+    @for $i from 1 through $exponent {
+      $css-value: $css-value + '*#{$value}';
+    }
+  }
+
+  @return calc(#{$css-value});
+}
+
+@mixin center-content($inline: false) {
+  @if $inline {
+    display: inline-flex;
+  } @else {
+    display: flex;
+  }
+
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin vertical-center-content($inline: false) {
+  @if $inline {
+    display: inline-flex;
+  } @else {
+    display: flex;
+  }
+
+  align-items: center;
+}
+
+@mixin horizontal-center-content($inline: false) {
+  @if $inline {
+    display: inline-flex;
+  } @else {
+    display: flex;
+  }
+
+  justify-content: center;
+}
+
+@mixin visually-hidden() {
+  appearance: none;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  left: 0;
+  margin: -1px;
+  outline: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+@mixin _focus-styles($with-background) {
+  outline-color: var(--odx-c-focus-outline);
+
+  @if $with-background {
+    &,
+    &:hover {
+      background-color: var(--odx-c-focus);
+    }
+  }
+}
+
+@mixin focus-state($with-background: true, $focus-within: false, $focus-within-selector: null) {
+  @if $focus-within {
+    @if $focus-within-selector {
+      $focus-within-selector: '#{$focus-within-selector}:focus-visible';
+    } @else {
+      $focus-within-selector: ':focus-visible';
+    }
+
+    &:focus-within:has(#{$focus-within-selector}) {
+      @include _focus-styles($with-background);
+      @content;
+    }
+  } @else {
+    &:focus-visible {
+      @include _focus-styles($with-background);
+      @content;
+    }
+  }
+}
+
+@mixin with-outline {
+  outline: var(--odx-v-outline-width) solid transparent;
+  outline-offset: calc(-1 * var(--odx-v-outline-width));
+}
+
+@mixin with-outline-bold {
+  outline-offset: calc(-1 * var(--odx-v-outline-width-bold));
+  outline-width: var(--odx-v-outline-width-bold);
+}
+
+@mixin interactive($with-background: true, $focus-within: false) {
+  @include with-outline();
+  @include focus-state($with-background, $focus-within);
+
+  cursor: pointer;
+  user-select: none;
+
+  &:disabled,
+  &.is-disabled {
+    @include non-interactive();
+  }
+}
+
+@mixin non-interactive() {
+  outline-color: transparent;
+  pointer-events: none;
+}
+
+@mixin theme-selector($theme: dark) {
+  :root:has([odxTheme='#{$theme}']),
+  :root:has(.odx-theme-#{$theme}) {
+    @content;
+  }
+}

package/scss/_vertical-rythm.scss

@@ -0,0 +1,3 @@
+:root {
+  --odx-vertical-rythm-base-size: calc(var(--odx-typography-base-line-height) * var(--odx-typography-base-size));
+}

package/scss/_visuals.scss

@@ -0,0 +1,27 @@
+:root {
+  --odx-v-max-page-width: 1440px;
+  --odx-v-border-radius: calc(var(--odx-typography-base-size) * 0.375);
+  --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);
+
+  --odx-v-backdrop-blur: 3px;
+
+  --odx-v-box-shadow-layer-1: 0 2px 6px 0 var(--odx-c-box-shadow);
+  --odx-v-box-shadow-layer-2: 0 4px 12px 0 var(--odx-c-box-shadow);
+
+  --odx-v-layer-1: 0;
+  --odx-v-layer-2: 10;
+  --odx-v-layer-3: 20;
+  --odx-v-layer-4: 9000;
+  --odx-v-layer-5: 9500;
+  --odx-v-layer-6: 9900;
+
+  --odx-v-transition-duration: 250ms;
+  --odx-v-transition-easing-fn: ease;
+  --odx-v-outline-width: 1px;
+  --odx-v-outline-width-bold: 2px;
+
+  --odx-v-scrollbar-track-color: transparent;
+  --odx-v-scrollbar-thumb-color: var(--gray-600);
+  --odx-v-scrollbar-thumb-color-hover: var(--gray-700);
+  --odx-v-scrollbar-width: 12px;
+}

package/scss/accordion-item.component.scss

@@ -0,0 +1,56 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-accordion-item {
+  $root: &;
+
+  @include motion.transition(color);
+  @include dimensions.padding(math.div(6, 24), top);
+  @include dimensions.padding(math.div(5, 24), bottom);
+
+  border-bottom: 1px solid var(--odx-input-control-outline-color);
+  display: block;
+
+  &__panel {
+    @include dimensions.padding-x(math.div(8, 24));
+    @include dimensions.line-height(1.5, 1);
+    @include motion.transition(background-color outline-color);
+    @include utils.interactive(true);
+
+    border-radius: var(--odx-v-border-radius-controls);
+    display: grid;
+    grid-template-columns: 1fr auto;
+
+    &:hover {
+      background-color: var(--blue-700-5);
+    }
+
+    #{$root}--expanded > & {
+      @include typography.font-weight(medium);
+
+      #{$root}__icon {
+        transform: rotateX(180deg);
+      }
+    }
+  }
+
+  &__icon {
+    @include motion.transition(transform);
+
+    transform: rotate(0deg);
+  }
+
+  &__slot {
+    @include dimensions.padding(math.div(8, 24));
+
+    overflow: hidden;
+  }
+
+  &.is-disabled {
+    color: var(--odx-c-text-disabled);
+    pointer-events: none;
+  }
+}

package/scss/accordion.component.scss

@@ -0,0 +1,3 @@
+.odx-accordion {
+  display: block;
+}

package/scss/action-group.component.scss

@@ -0,0 +1,29 @@
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use 'button.component';
+
+.odx-action-group {
+  @include dimensions.height(2, 1.5);
+  @include utils.vertical-center-content(true);
+
+  gap: dimensions.get-size(0.25);
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+
+  > .odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+    @extend .odx-button--ghost;
+
+    color: var(--odx-c-text);
+
+    &:hover {
+      color: var(--odx-c-text);
+    }
+
+    &:focus-visible {
+      outline-color: var(--odx-c-focus-outline);
+    }
+  }
+}

package/scss/active-indicator.scss

@@ -0,0 +1,25 @@
+@use '../abstract/motion';
+
+.odx-cdk-active-indicator {
+  @include motion.transition(all);
+
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transform-origin: 0 0;
+  z-index: var(--odx-v-layer-1);
+
+  &--horizontal {
+    left: 0;
+    width: 0;
+  }
+
+  &--vertical {
+    height: 0;
+    top: 0;
+  }
+
+  &--is-active {
+    opacity: 1;
+  }
+}