@odx/ui 4.10.0 → 4.10.1

package/scss/inline-message.component.scss

@@ -0,0 +1,34 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+
+.odx-inline-message {
+  --odx-c-default: var(--blue-50);
+  --odx-c-warning: var(--yellow-50);
+  --odx-c-danger: var(--red-00);
+  --odx-c-success: var(--green-00);
+
+  $variants: default, warning, danger, success;
+
+  @include dimensions.padding-x(math.div(10, 24));
+  @include dimensions.padding-y(math.div(12, 24));
+
+  display: flex;
+  gap: dimensions.get-size(math.div(10, 24));
+
+  @each $variant in $variants {
+    &--#{$variant} {
+      background-color: var(--odx-c-#{$variant});
+    }
+  }
+
+  &--danger {
+    color: var(--red-700);
+  }
+
+  &__content {
+    @include typography.font-size(-1);
+
+    overflow: hidden;
+  }
+}

package/scss/launch-tile.component.scss

@@ -0,0 +1,119 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+@use './avatar.component' as avatar;
+
+.odx-launch-tile {
+  $root: &;
+  $main-padding: dimensions.get-size(math.div(12, 24));
+
+  @include motion.transition(box-shadow outline-color);
+  @include utils.interactive(false);
+  @include utils.with-outline-bold();
+
+  background-color: var(--odx-c-background-content);
+  behavior: button;
+  border-radius: var(--odx-v-border-radius);
+  display: block;
+  padding: $main-padding;
+  position: relative;
+
+  &:focus-visible,
+  &:hover,
+  &:focus-within:has(:focus-visible) {
+    box-shadow: var(--odx-v-box-shadow-layer-1);
+  }
+
+  &__container {
+    @include dimensions.padding-x(math.div(8, 24));
+    @include dimensions.padding-y(0.5);
+
+    display: flex;
+    gap: dimensions.get-size(math.div(16, 24));
+
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1, bottom);
+
+      flex-direction: column;
+      gap: dimensions.get-size(math.div(8, 24));
+    }
+  }
+
+  &__content {
+    flex: 1;
+    padding-right: dimensions.get-size(math.div(40, 24));
+
+    @include breakpoints.up(phone) {
+      padding-right: unset;
+      text-align: center;
+    }
+  }
+
+  &__title {
+    @include dimensions.margin-y(math.div(9, 24));
+    @include typography.font-weight(medium);
+
+    font-size: dimensions.get-size(math.div(20, 24));
+    line-height: dimensions.get-size(math.div(30, 24));
+  }
+
+  &__subtitle {
+    color: var(--gray-500);
+  }
+
+  &__title,
+  &__subtitle {
+    @include motion.transition(color);
+
+    display: block;
+
+    #{$root}.is-disabled & {
+      color: var(--odx-c-text-disabled);
+    }
+  }
+
+  &__footer {
+    display: flex;
+    gap: dimensions.get-size(math.div(12, 24));
+    justify-content: flex-end;
+
+    @include breakpoints.up(phone) {
+      justify-content: center;
+      padding-bottom: dimensions.get-size(math.div(12, 24));
+    }
+
+    .odx-button {
+      margin: 0;
+    }
+  }
+
+  .odx-launch-tile-menu {
+    margin: 0;
+    position: absolute;
+    right: $main-padding;
+    top: $main-padding;
+  }
+
+  .odx-avatar {
+    @include avatar.avatar-size(math.div(64, 24), math.div(64, 24), 2, math.div(48, 24));
+    @include dimensions.margin-y(math.div(4, 24));
+
+    flex: 0 0 auto;
+
+    @include breakpoints.up(phone) {
+      @include avatar.avatar-size(math.div(128, 24), math.div(128, 24), 4, math.div(76, 24));
+
+      margin: dimensions.get-size(math.div(4, 24)) auto 0;
+    }
+  }
+
+  &.is-disabled {
+    .odx-avatar {
+      color: var(--odx-c-text-disabled);
+      filter: saturate(0);
+    }
+  }
+}

package/scss/link.component.scss

@@ -0,0 +1,28 @@
+@use '../abstract/motion';
+@use '../abstract/utils';
+
+.odx-link {
+  @include motion.transition(color background-color outline);
+  @include utils.interactive();
+
+  border-radius: var(--odx-v-border-radius-controls);
+  color: var(--odx-c-link);
+  padding: 0 2px;
+  position: relative;
+  user-select: auto;
+
+  &:hover {
+    color: var(--odx-c-link-hover);
+    text-decoration: underline;
+  }
+
+  &:active {
+    color: var(--odx-c-link-active);
+  }
+
+  &.is-disabled {
+    color: var(--odx-c-link-disabled);
+    pointer-events: none;
+    text-decoration: none;
+  }
+}

package/scss/list-item.component.scss

@@ -0,0 +1,119 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/motion';
+@use '../abstract/typography';
+
+.odx-list-item {
+  $root: &;
+  $muted-selector: #{$root}--muted;
+  $variants: danger, warning;
+
+  --separator-color: var(--odx-c-separator);
+
+  @include dimensions.padding-x(math.div(8, 24));
+  @include dimensions.line-height(2, 1);
+  @include motion.transition(border-bottom-color background-color outline-color color);
+  @include utils.interactive(false);
+  @include utils.with-outline-bold();
+  @include utils.vertical-center-content();
+
+  background-color: transparent;
+  border-radius: var(--odx-v-border-radius-controls);
+  gap: dimensions.get-size(math.div(8, 24));
+  position: relative;
+
+  > [odxListSuffix],
+  > [odxListItemSuffix] {
+    margin-left: auto;
+  }
+
+  &#{$muted-selector} {
+    cursor: default;
+    user-select: text;
+  }
+
+  &::before {
+    @include motion.transition(border-color);
+
+    border-bottom: 1px solid var(--separator-color);
+    content: '';
+    display: block;
+    position: absolute;
+    right: dimensions.get-size(math.div(8, 24));
+    top: 0;
+    width: calc(100% - #{dimensions.get-size(math.div(16, 24))});
+  }
+
+  &:hover,
+  &:focus-visible {
+    &:not(#{$muted-selector}) {
+      --separator-color: transparent !important;
+    }
+  }
+
+  &:hover:not(#{$muted-selector}) {
+    background-color: var(--odx-c-ghost-hover);
+  }
+
+  &--danger + &,
+  &--warning + &,
+  &.is-selected + &,
+  &:hover:not(#{$muted-selector}) + & {
+    --separator-color: transparent !important;
+  }
+
+  &.is-disabled {
+    color: var(--odx-control-color-disabled);
+    pointer-events: none;
+  }
+
+  @each $variant in $variants {
+    &--#{$variant} {
+      --separator-color: transparent !important;
+
+      background-color: var(--odx-c-#{$variant}-active);
+      color: var(--odx-c-#{$variant}-text);
+
+      &:hover:not(#{$muted-selector}) {
+        background-color: var(--odx-c-#{$variant}-hover);
+      }
+
+      &:focus-visible {
+        background-color: var(--odx-c-#{$variant}-active);
+      }
+
+      &.is-disabled {
+        color: var(--odx-c-#{$variant}-text-disabled);
+      }
+    }
+  }
+
+  &.is-selected {
+    --separator-color: transparent !important;
+
+    background-color: var(--odx-c-selected);
+
+    &:hover:not(#{$muted-selector}) {
+      background-color: var(--odx-c-selected-hover);
+    }
+
+    @each $variant in $variants {
+      &#{$root}--#{$variant} {
+        background-color: var(--odx-c-#{$variant});
+
+        &:hover:not(#{$muted-selector}) {
+          background-color: var(--odx-c-#{$variant}-hover);
+        }
+
+        &.is-disabled {
+          color: var(--odx-c-#{$variant}-text);
+        }
+
+        &:focus-visible {
+          background-color: var(--odx-c-#{$variant});
+        }
+      }
+    }
+  }
+}

package/scss/list.component.scss

@@ -0,0 +1,27 @@
+@use 'sass:math';
+@use 'sass:selector';
+@use '../abstract/dimensions';
+
+.odx-list {
+  display: block;
+
+  $self: &;
+
+  @for $i from 1 through 10 {
+    #{$self} .odx-list-item {
+      @include dimensions.padding(math.div(8, 24) + ($i * math.div(32, 24)), left);
+
+      &:first-child {
+        --separator-color: var(--odx-c-separator);
+      }
+    }
+
+    $self: #{$self + ' ' + &};
+  }
+
+  > .odx-list-item {
+    &:first-child {
+      --separator-color: transparent;
+    }
+  }
+}

package/scss/loading-spinner.component.scss

@@ -0,0 +1,70 @@
+@use 'sass:math';
+@use '../abstract/motion';
+@use '../abstract/utils';
+
+:root {
+  --odx-loading-spinner-track-stroke-color: var(--blue-700-15);
+}
+
+@include utils.theme-selector(dark) {
+  --odx-loading-spinner-track-stroke-color: var(--gray-200);
+
+  .odx-button {
+    --odx-loading-spinner-track-stroke-color: var(--blue-700-15);
+  }
+}
+
+.odx-loading-spinner {
+  $root: &;
+
+  backdrop-filter: blur(var(--odx-v-backdrop-blur));
+
+  &,
+  &__backdrop {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    scroll-behavior: contain;
+    top: 0;
+    width: 100%;
+    z-index: var(--odx-v-layer-2);
+  }
+
+  &__backdrop {
+    @include motion.transition(background-color);
+
+    background-color: transparent;
+    opacity: 0.8;
+  }
+
+  .odx-circular-progress {
+    height: 66.67%;
+    left: 50%;
+    max-height: 40px;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: var(--odx-v-layer-3);
+
+    &__indicator {
+      stroke: var(--odx-c-primary);
+    }
+
+    &__track {
+      stroke: var(--odx-loading-spinner-track-stroke-color);
+    }
+  }
+
+  &--auto-color {
+    .odx-circular-progress {
+      &__indicator {
+        stroke: currentcolor;
+      }
+    }
+  }
+
+  &-parent {
+    overflow: hidden;
+    user-select: none;
+  }
+}

package/scss/logo.component.scss

@@ -0,0 +1,33 @@
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+
+:root {
+  --odx-logo-color: var(--odx-c-primary);
+  --odx-logo-color-inverse: var(--odx-c-text-inverse);
+}
+
+@include utils.theme-selector(dark) {
+  --odx-logo-color: var(--odx-c-text-inverse);
+}
+
+.odx-logo {
+  @include dimensions.height(1);
+
+  aspect-ratio: 2.5 / 1;
+  background-color: var(--odx-logo-color);
+  display: inline-block;
+  mask-image: url('../assets/images/logo.svg');
+  mask-repeat: no-repeat;
+
+  &--inverse {
+    background-color: var(--odx-logo-color-inverse);
+  }
+
+  &--medium {
+    @include dimensions.height(2, 1.5);
+  }
+
+  &--large {
+    @include dimensions.height(3, 2.5);
+  }
+}

package/scss/main-menu-button.component.scss

@@ -0,0 +1,11 @@
+@use 'button.component';
+
+.odx-main-menu-button {
+  @extend .odx-button--ghost;
+
+  color: inherit;
+
+  &:hover {
+    color: inherit;
+  }
+}

package/scss/main-menu-item.component.scss

@@ -0,0 +1,55 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/utils';
+@use '../abstract/typography';
+
+:root {
+  --odx-main-menu-item-background-color: transparent;
+  --odx-main-menu-item-background-color-hover: var(--white-5);
+  --odx-main-menu-item-background-color-active: var(--odx-c-focus);
+  --odx-main-menu-item-text-color: inherit;
+  --odx-main-menu-item-text-color-disabled: var(--odx-c-primary-text-disabled);
+}
+
+@include utils.theme-selector(dark) {
+  --odx-main-menu-item-background-color-active: var(--cyan-500-15);
+  --odx-main-menu-item-text-color-disabled: var(--blue-500);
+}
+
+.odx-main-menu-item {
+  @include dimensions.padding(math.div(2, 3));
+  @include motion.transition(color background-color outline);
+  @include utils.interactive(false);
+  @include typography.font-weight(medium);
+  @include typography.prevent-text-overflow();
+
+  background-color: transparent;
+  border-radius: var(--odx-v-border-radius);
+  color: var(--odx-main-menu-item-text-color);
+  line-height: 1;
+
+  &:hover {
+    background-color: var(--odx-main-menu-item-background-color-hover);
+  }
+
+  &.is-selected,
+  &:active {
+    background-color: var(--odx-main-menu-item-background-color-active);
+  }
+
+  &.is-disabled,
+  &:disabled {
+    background-color: transparent;
+    color: var(--odx-main-menu-item-text-color-disabled);
+  }
+
+  > .odx-icon {
+    @include dimensions.margin(math.div(1, 3), right);
+    @include dimensions.margin(math.div(-1, 3), left);
+  }
+
+  &:focus-visible {
+    background-color: var(--odx-main-menu-item-background-color-active);
+  }
+}

package/scss/main-menu.component.scss

@@ -0,0 +1,139 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use '../abstract/motion';
+@use 'button.component';
+@use 'main-menu-button.component';
+@use 'main-menu-item.component';
+
+:root {
+  --odx-main-menu-max-width: 100dvw;
+  --odx-main-menu-background-color: var(--odx-c-primary);
+  --odx-main-menu-text-color: var(--odx-c-primary-text);
+  --odx-main-menu-highlight-color: var(--odx-c-highlight);
+
+  @include breakpoints.up(phone) {
+    --odx-main-menu-max-width: min(100dvw, 384px);
+  }
+}
+
+@include utils.theme-selector(dark) {
+  --odx-main-menu-background-color: var(--blue-800);
+  --odx-main-menu-text-color: var(--black);
+  --odx-main-menu-highlight-color: var(--cyan-500);
+}
+
+.odx-main-menu {
+  --odx-area-header-title-color: var(--odx-main-menu-text-color);
+  --odx-area-header-subtitle-color: var(--odx-main-menu-text-color);
+
+  &__inner {
+    @include motion.transition(transform);
+
+    background-color: var(--odx-main-menu-background-color);
+    box-shadow: var(--odx-v-box-shadow-layer-1);
+    color: var(--odx-main-menu-text-color);
+    display: grid;
+    grid-template-rows: auto auto 1fr auto auto;
+    height: 100%;
+    max-height: 100dvh;
+    max-width: var(--odx-main-menu-max-width);
+    transform: translateX(-100%);
+    transition-behavior: allow-discrete;
+    width: 100%;
+    z-index: var(--odx-v-layer-6);
+
+    &::backdrop {
+      backdrop-filter: blur(var(--odx-v-backdrop-blur));
+      background-color: var(--odx-c-backdrop);
+    }
+
+    &:popover-open {
+      transform: translateX(0);
+    }
+  }
+
+  @starting-style {
+    &__inner:popover-open {
+      transform: translateX(-100%);
+    }
+  }
+
+  &__actions {
+    @include dimensions.height(2);
+    @include dimensions.margin-x(0.5);
+  }
+
+  &__header,
+  &__footer {
+    max-width: inherit;
+  }
+
+  &__close {
+    @extend .odx-button--ghost;
+
+    align-self: flex-start;
+    color: inherit;
+  }
+
+  &__content {
+    --odx-v-scrollbar-thumb-color: var(--blue-400);
+    --odx-v-scrollbar-thumb-color-hover: var(--blue-500);
+
+    @include dimensions.padding-x(0.5);
+    @include dimensions.margin(1, top);
+
+    display: flex;
+    flex-direction: column;
+    max-width: calc(var(--odx-main-menu-max-width) + dimensions.get-size(2));
+    min-height: dimensions.get-size(5);
+    overflow: auto;
+
+    > * {
+      flex: 0 0 auto;
+    }
+  }
+
+  &__info {
+    @extend .odx-text;
+    @include dimensions.padding-x(1);
+    @include dimensions.padding-y(0.5);
+
+    column-gap: dimensions.get-size(1);
+    display: flex;
+    flex-wrap: wrap;
+
+    @include breakpoints.up(tablet) {
+      @include dimensions.padding-y(1);
+    }
+  }
+
+  &__footer {
+    @include dimensions.line-height(1);
+    @include dimensions.padding-x(1);
+    @include dimensions.padding(math.div(16, 24), top);
+    @include dimensions.padding(math.div(32, 24), bottom);
+    @include utils.center-content();
+
+    display: grid;
+    gap: dimensions.get-size(0.5);
+    grid-template-columns: 1fr auto;
+    user-select: none;
+
+    > .odx-text {
+      @include dimensions.line-height(math.div(12, 24));
+
+      opacity: 0.3;
+      word-wrap: break-word;
+    }
+  }
+
+  .odx-link {
+    &:visited,
+    &:hover {
+      color: var(--odx-c-link);
+    }
+  }
+}