@odx/ui 4.10.0 → 4.10.1

package/scss/ag-grid/theme.scss

@@ -0,0 +1,303 @@
+@use '@odx/icons/core/core-utils' as icons;
+@use '../../abstract/dimensions';
+@use '../../abstract/typography';
+@use '../../abstract/motion';
+@use '../../abstract/utils';
+@use 'sass:math';
+
+.ag-theme-odx {
+  --ag-border-color: var(--odx-c-separator);
+  --ag-foreground-color: var(--odx-c-text);
+  --ag-secondary-foreground-color: var(--odx-c-text);
+  --ag-disabled-foreground-color: var(--odx-c-text-disabled);
+  --ag-row-hover-color: var(--odx-c-ghost-hover);
+  --ag-selected-row-background-color: var(--odx-c-selected);
+
+  --ag-background-color: var(--odx-c-background-content);
+
+  --ag-checkbox-indeterminate-color: var(--odx-control-color-selected);
+  --ag-checkbox-checked-color: var(--odx-control-color-selected);
+
+  --ag-font-family: var(--odx-typography-font-family);
+  --ag-font-size: var(--odx-typography-base-size);
+
+  --ag-icon-size: #{typography.get-font-size(1)};
+  --ag-icon-font-family: #{icons.get-font-family()};
+  --ag-icon-font-code-aggregation: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-arrows: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-asc: '#{icons.get-icon-glyph(ascending)}';
+  --ag-icon-font-code-cancel: '#{icons.get-icon-glyph(close)}';
+  --ag-icon-font-code-chart: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-checkbox-checked: '#{icons.get-icon-glyph(check)}';
+  --ag-icon-font-code-checkbox-indeterminate: '#{icons.get-icon-glyph(minus)}';
+  --ag-icon-font-code-checkbox-unchecked: '';
+  --ag-icon-font-code-color-picker: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-columns: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-contracted: '#{icons.get-icon-glyph(chevron-right)}';
+  --ag-icon-font-code-copy: '#{icons.get-icon-glyph(copy-content)}';
+  --ag-icon-font-code-cut: '#{icons.get-icon-glyph(cut)}';
+  --ag-icon-font-code-cross: '#{icons.get-icon-glyph(close)}';
+  --ag-icon-font-code-csv: '#{icons.get-icon-glyph(file)}';
+  --ag-icon-font-code-desc: '#{icons.get-icon-glyph(descending)}';
+  --ag-icon-font-code-excel: '#{icons.get-icon-glyph(file-excel)}';
+  --ag-icon-font-code-expanded: '#{icons.get-icon-glyph(chevron-left)}';
+  --ag-icon-font-code-eye-slash: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-eye: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-filter: '#{icons.get-icon-glyph(filter)}';
+  --ag-icon-font-code-first: '#{icons.get-icon-glyph(chevron-left-end)}';
+  --ag-icon-font-code-grip: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-group: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-last: '#{icons.get-icon-glyph(chevron-right-end)}';
+  --ag-icon-font-code-left: '#{icons.get-icon-glyph(arrow-left)}';
+  --ag-icon-font-code-linked: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-loading: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-maximize: '#{icons.get-icon-glyph(maximize)}';
+  --ag-icon-font-code-menu: '#{icons.get-icon-glyph(menu)}';
+  --ag-icon-font-code-minimize: '#{icons.get-icon-glyph(minimize)}';
+  --ag-icon-font-code-next: '#{icons.get-icon-glyph(chevron-right)}';
+  --ag-icon-font-code-none: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-not-allowed: '#{icons.get-icon-glyph(blocked)}';
+  --ag-icon-font-code-paste: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-pin: '#{icons.get-icon-glyph(pin)}';
+  --ag-icon-font-code-pivot: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-previous: '#{icons.get-icon-glyph(chevron-left)}';
+  --ag-icon-font-code-radio-button-off: '';
+  --ag-icon-font-code-radio-button-on: '';
+  --ag-icon-font-code-right: '#{icons.get-icon-glyph(arrow-right)}';
+  --ag-icon-font-code-save: '#{icons.get-icon-glyph(save)}';
+  --ag-icon-font-code-small-down: '#{icons.get-icon-glyph(chevron-down)}';
+  --ag-icon-font-code-small-left: '#{icons.get-icon-glyph(chevron-left)}';
+  --ag-icon-font-code-small-right: '#{icons.get-icon-glyph(chevron-right)}';
+  --ag-icon-font-code-small-up: '#{icons.get-icon-glyph(chevron-up)}';
+  --ag-icon-font-code-tick: '#{icons.get-icon-glyph(check)}';
+  --ag-icon-font-code-tree-closed: '#{icons.get-icon-glyph(chevron-right)}';
+  --ag-icon-font-code-tree-indeterminate: '#{icons.get-icon-glyph(minus)}';
+  --ag-icon-font-code-tree-open: '#{icons.get-icon-glyph(chevron-down)}';
+  --ag-icon-font-code-unlinked: '#{icons.get-icon-glyph(placeholder)}';
+
+  --ag-grid-size: #{dimensions.get-size(0.25)};
+  --ag-widget-vertical-spacing: #{dimensions.get-size(0.5)};
+
+  --ag-header-height: #{dimensions.get-size(2)};
+  --ag-row-height: #{dimensions.get-size(2)};
+  --ag-table-line-height: #{dimensions.get-size(1.5)};
+  --ag-list-item-height: #{dimensions.get-size(1.5)};
+
+  input[class^='ag-'][type='text'] {
+    background: var(--gray-100);
+    border: var(--ag-borders-critical) var(--gray100);
+    border-radius: var(--odx-v-border-radius-controls);
+    font-weight: var(--odx-typography-font-weight-normal);
+    letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+    line-height: var(--ag-table-line-height);
+    padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+    padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+    vertical-align: middle;
+
+    @include motion.transition(background-color outline-color);
+    @include utils.with-outline();
+
+    &::placeholder {
+      color: var(--odx-c-text);
+      opacity: 0.65;
+    }
+
+    &:focus {
+      background-color: var(--odx-c-focus);
+      outline-color: var(--odx-c-focus-outline);
+    }
+
+    &:not(:focus):hover {
+      background-color: var(--odx-input-control-background-color-hover);
+      outline-color: var(--odx-input-control-outline-color-hover);
+    }
+  }
+
+  .ag-standard-button {
+    background-color: var(--odx-c-primary);
+    border-radius: var(--odx-v-border-radius-controls);
+    color: var(--odx-c-primary-text);
+    height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+    min-width: calc(var(--odx-vertical-rythm-base-size) * 3);
+    outline-offset: calc(-1 * var(--odx-v-outline-width-bold));
+    outline-width: var(--odx-v-outline-width-bold);
+    transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+    transition-property: background-color, color, outline;
+  }
+
+  .ag-header {
+    border-bottom: var(--ag-borders-critical) var(--gray-700);
+
+    &-row:not(:first-child) {
+      .ag-header-cell,
+      .ag-header-group-cell.ag-header-group-cell-with-group {
+        border: none;
+      }
+    }
+
+    .ag-cell-label-container {
+      width: fit-content;
+    }
+
+    .ag-floating-filter {
+      .ag-filter-select {
+        .ag-picker-field-wrapper {
+          height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+        }
+      }
+
+      input[type='text']:disabled {
+        color: var(--odx-c-text);
+        font-weight: var(--odx-typography-font-weight-medium);
+        padding: 0;
+      }
+    }
+
+    .ag-header-cell-text {
+      font-weight: var(--odx-typography-font-weight-medium);
+    }
+
+    .ag-header-cell-label {
+      padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+    }
+
+    .ag-header-icon {
+      &.ag-header-cell-menu-button {
+        height: calc(var(--odx-vertical-rythm-base-size) * 0.667);
+        width: calc(var(--odx-vertical-rythm-base-size) * 0.667);
+      }
+    }
+  }
+
+  &.ag-popup {
+    [type='text']:focus {
+      border-color: var(--ag-input-border-color);
+      border-radius: var(--odx-v-border-radius);
+      box-shadow: unset;
+    }
+  }
+
+  .ag-radio-button-input-wrapper {
+    align-items: center;
+    background-color: var(--odx-control-background-color);
+    border-radius: 50%;
+    display: flex;
+    flex: 0 0 auto;
+    height: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
+    justify-content: center;
+    margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
+    margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
+    outline: var(--odx-v-outline-width) solid transparent;
+    outline-color: var(--odx-control-outline-color);
+    outline-offset: calc(-1 * var(--odx-v-outline-width));
+    padding: 1px;
+    transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+    transition-property: background-color, color, outline-color;
+    width: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
+
+    &:hover {
+      background-color: var(--odx-control-background-color-hover);
+      outline-color: var(--odx-control-outline-color-hover);
+    }
+
+    &.ag-checked {
+      background-color: var(--odx-control-background-color-selected);
+      color: var(--odx-control-color-selected);
+      opacity: 1;
+      outline-color: var(--odx-control-outline-color-selected);
+
+      &::after {
+        background-color: var(--odx-control-color-selected);
+        border-radius: 50%;
+        height: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+        left: unset;
+        margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
+        margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
+        top: unset;
+        transform: scale(1);
+        width: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+      }
+    }
+  }
+
+  .ag-root-wrapper {
+    border: none;
+  }
+
+  .ag-select {
+    .ag-picker-field-display {
+      color: var(--odx-c-text);
+    }
+
+    .ag-picker-field-icon {
+      padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    }
+  }
+
+  .ag-select-list {
+    color: var(--odx-c-text);
+  }
+
+  .ag-paging-panel {
+    .ag-paging-row-summary-panel-number,
+    .ag-paging-number {
+      font-weight: var(--odx-typography-font-weight-semibold);
+    }
+  }
+
+  .ag-checkbox-input {
+    $input: '.ag-checkbox-input';
+
+    background-color: var(--odx-control-background-color);
+    border-radius: var(--odx-v-border-radius-controls);
+    color: var(--odx-control-color-selected);
+    flex: 0 0 auto;
+    height: dimensions.get-size(math.div(20, 24));
+    opacity: 1;
+    outline-color: var(--odx-control-outline-color);
+    padding: 1px;
+    width: dimensions.get-size(math.div(20, 24));
+
+    @include motion.transition(background-color color outline-color);
+    @include utils.with-outline();
+
+    &:hover {
+      background-color: var(--odx-control-background-color-hover);
+      cursor: pointer;
+      outline-color: var(--odx-control-outline-color-hover);
+    }
+
+    &-wrapper {
+      &::after {
+        $checkmark-size: math.div(18, 24);
+
+        font-size: dimensions.get-size($checkmark-size);
+        height: dimensions.get-size($checkmark-size);
+        left: 50%;
+        opacity: 0;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: dimensions.get-size($checkmark-size);
+
+        @include motion.transition(opacity);
+      }
+
+      &:has(#{$input}:checked, #{$input}:indeterminate) {
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
+
+    &:checked,
+    &:indeterminate {
+      background-color: var(--odx-control-background-color-selected);
+      color: var(--odx-control-color-selected);
+      outline-color: var(--odx-control-outline-color-selected);
+    }
+
+    &:disabled {
+      color: var(--odx-control-color-disabled);
+    }
+  }
+}

package/scss/area-header.component.scss

@@ -0,0 +1,163 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use 'avatar.component';
+@use '../layout/typography' as *;
+
+:root {
+  --odx-area-header-title-color: var(--odx-c-display);
+  --odx-area-header-subtitle-color: var(--odx-c-display);
+}
+
+.odx-area-header {
+  @include dimensions.padding-x(0.5);
+
+  @include breakpoints.up(phone) {
+    @include dimensions.padding-x(1);
+  }
+
+  &,
+  &__container {
+    column-gap: dimensions.get-size(math.div(20, 24));
+    display: flex;
+
+    .odx-navigation-back {
+      @include dimensions.margin(-0.75, right);
+      @include dimensions.margin(math.div(5, 24), top);
+    }
+  }
+
+  * {
+    flex: 0 0 auto;
+  }
+
+  &__title,
+  &__subtitle {
+    display: block;
+  }
+
+  &__container {
+    display: flex;
+    flex: 1 1 auto;
+    overflow: hidden;
+  }
+
+  &__inner {
+    align-self: center;
+    flex: 1 1 auto;
+    overflow: hidden;
+  }
+
+  &__title {
+    @extend .odx-heading;
+    @extend .odx-heading-6;
+
+    color: var(--odx-area-header-title-color);
+    font-weight: 600;
+  }
+
+  &__subtitle {
+    @include typography.prevent-text-overflow();
+    @extend .odx-text;
+
+    color: var(--odx-area-header-subtitle-color);
+  }
+
+  .odx-avatar,
+  [odxNavigationBack],
+  &__content {
+    align-self: center;
+  }
+
+  &__content {
+    @include utils.vertical-center-content();
+
+    flex-wrap: wrap;
+    min-height: dimensions.get-size(2);
+  }
+
+  &--small,
+  &--medium {
+    .odx-avatar {
+      @extend .odx-avatar--small;
+    }
+  }
+
+  &--large,
+  &--xlarge {
+    @include breakpoints.down(tablet) {
+      flex-wrap: wrap;
+
+      .odx-area-header__content {
+        flex-basis: 100%;
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  &--medium {
+    @include breakpoints.up(tablet) {
+      @include dimensions.padding-y(0.5);
+    }
+
+    .odx-area-header__title {
+      @extend .odx-heading-5;
+    }
+  }
+
+  &--large {
+    @include dimensions.padding-y(0.5);
+
+    .odx-area-header__title {
+      @extend .odx-heading-4;
+
+      @include breakpoints.down(tablet) {
+        @include dimensions.line-height(1);
+      }
+    }
+
+    .odx-avatar {
+      @extend .odx-avatar--medium;
+    }
+  }
+
+  &--xlarge {
+    @include dimensions.padding-y(0.5);
+
+    @include breakpoints.up(tablet) {
+      @include dimensions.padding-y(1);
+
+      gap: dimensions.get-size(1);
+
+      .odx-area-header__container {
+        @include dimensions.padding(1, top);
+      }
+    }
+
+    .odx-area-header__title {
+      @extend .odx-heading-2;
+    }
+
+    .odx-area-header__subtitle {
+      @extend .odx-heading-5;
+    }
+
+    .odx-avatar {
+      @extend .odx-avatar--large;
+
+      @include breakpoints.up(tablet) {
+        @include dimensions.margin(-0.5, top);
+      }
+    }
+
+    .odx-area-header__content {
+      align-self: flex-end;
+
+      @include breakpoints.up(tablet) {
+        @include dimensions.margin(-0.5, bottom);
+      }
+    }
+  }
+}

package/scss/autocomplete.component.scss

@@ -0,0 +1,14 @@
+@use '../abstract/dimensions';
+
+.odx-autocomplete {
+  &__trigger {
+    height: 100%;
+  }
+
+  &__control {
+    height: 100%;
+    width: 100%;
+
+    @include dimensions.min-height(1.5);
+  }
+}

package/scss/avatar.component.scss

@@ -0,0 +1,68 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+
+@mixin avatar-size($size-factor, $line-height-factor, $font-size, $icon-factor) {
+  @include dimensions.container($size-factor, $line-height-factor);
+  @include typography.font-size($font-size);
+
+  > .odx-icon,
+  > .odx-icon[class*='odx-icon--'] {
+    @include dimensions.container($icon-factor);
+
+    font-size: dimensions.get-size($icon-factor);
+  }
+}
+
+.odx-avatar {
+  @include utils.center-content(true);
+  @include typography.font-weight(medium);
+  @include typography.prevent-text-overflow();
+
+  background-color: var(--blue-700-10);
+  border-radius: 50%;
+  color: var(--odx-c-text);
+  position: relative;
+  user-select: none;
+  vertical-align: middle;
+
+  &--small {
+    @include avatar-size(2, 1.5, 0, 1);
+  }
+
+  &--medium {
+    @include avatar-size(2, 1.5, 0, 1);
+
+    @include breakpoints.up(tablet) {
+      @include avatar-size(3, math.div(64, 24), 2, 1.5);
+    }
+  }
+
+  &--large {
+    @include avatar-size(3, math.div(64, 24), 2, 1.5);
+
+    @include breakpoints.up(tablet) {
+      @include avatar-size(4, 4, 4, 2.25);
+    }
+  }
+
+  &--rectangle {
+    border-radius: var(--odx-v-border-radius-controls);
+  }
+
+  &:has(img) {
+    background-color: transparent;
+  }
+
+  img {
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: var(--odx-v-layer-1);
+  }
+}

package/scss/badge.component.scss

@@ -0,0 +1,49 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+
+:root {
+  --odx-badge-contrast-color: var(--odx-c-background-content);
+}
+
+.odx-badge {
+  $badge-size: dimensions.get-size(math.div(2, 3));
+
+  @include dimensions.padding-x(math.div(1, 8));
+  @include utils.center-content(true);
+  @include utils.non-interactive();
+  @include typography.font-size(-2);
+  @include typography.font-weight(medium);
+
+  border-radius: $badge-size;
+  height: $badge-size;
+  min-width: $badge-size;
+  outline: 1px solid transparent;
+  vertical-align: middle;
+
+  &,
+  &--highlight {
+    background-color: var(--odx-c-highlight);
+    color: var(--odx-c-highlight-text);
+  }
+
+  &--danger {
+    background-color: var(--odx-c-danger);
+    color: var(--odx-c-danger-text);
+  }
+
+  &--confirmation {
+    background-color: var(--odx-c-confirmation);
+    color: var(--odx-c-confirmation-text);
+  }
+
+  &--contrast {
+    outline-color: var(--odx-badge-contrast-color);
+  }
+
+  .odx-badge-overlay > & {
+    display: flex;
+    margin: calc(#{$badge-size} / -2);
+  }
+}

package/scss/bar.component.scss

@@ -0,0 +1,93 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use '../abstract/motion';
+@use './dropdown.component' as dropdown;
+
+:root {
+  --odx-bar-background-color: var(--cyan-500);
+  --odx-bar-background-color-hover: var(--cyan-600);
+  --odx-bar-background-color-active: var(--cyan-700);
+  --odx-bar-text-color: var(--white);
+  --odx-bar-text-color-disabled: var(--cyan-700);
+}
+
+@include utils.theme-selector(dark) {
+  --odx-bar-background-color-hover: var(--cyan-400);
+  --odx-bar-background-color-active: var(--cyan-300);
+  --odx-bar-text-color: var(--black);
+  --odx-bar-text-color-disabled: var(--cyan-200);
+}
+
+.odx-bar {
+  @include dimensions.padding-x(math.div(12, 24));
+  @include dimensions.padding-y(math.div(6, 24));
+
+  align-items: center;
+  background-color: var(--odx-bar-background-color);
+  border-radius: dimensions.get-size(math.div(6, 24));
+  box-shadow: var(--odx-v-box-shadow-layer-1);
+  color: var(--odx-bar-text-color);
+  display: inline-flex;
+  gap: dimensions.get-size(math.div(12, 24));
+  width: max-content;
+
+  &-button {
+    $button: &;
+
+    @include motion.transition(background-color color outline);
+    @include utils.with-outline-bold();
+
+    align-items: center;
+    background-color: var(--odx-bar-background-color);
+    border-radius: var(--odx-v-border-radius-controls);
+    display: inline-flex;
+    font-size: dimensions.get-size(math.div(4, 3));
+    height: dimensions.get-size(math.div(36, 24));
+    outline-color: transparent;
+    outline-style: solid;
+
+    &:hover {
+      background-color: var(--odx-bar-background-color-hover);
+    }
+
+    &#{dropdown.$dropdown-open-selector},
+    &:active {
+      background-color: var(--odx-bar-background-color-active);
+    }
+
+    &:focus-visible {
+      outline-color: var(--odx-bar-background-color-active);
+    }
+
+    &--default {
+      @include dimensions.padding-x(math.div(28, 24));
+    }
+
+    &--small {
+      @include dimensions.padding-x(math.div(2, 24));
+    }
+
+    &.is-disabled {
+      @include utils.non-interactive();
+
+      color: var(--odx-bar-text-color-disabled);
+    }
+  }
+
+  &-label {
+    display: inline;
+  }
+
+  .odx-bar-parent & {
+    bottom: dimensions.get-size(math.div(16, 24));
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+  }
+}
+
+.odx-bar-parent {
+  position: relative;
+}

package/scss/brand-logo.component.scss

@@ -0,0 +1,17 @@
+@use '../abstract/typography';
+
+.odx-brand-logo {
+  color: inherit;
+  display: inline-block;
+
+  @include typography.font-weight(semibold);
+
+  &::before {
+    color: var(--odx-c-highlight);
+    content: 'O';
+  }
+
+  &::after {
+    content: 'DX';
+  }
+}