@odx/ui 1.0.0-rc.1 → 1.0.0-rc.3

package/scss/{modules/_vertical-rythm.scss → abstract/_dimensions.scss}

@@ -1,9 +1,26 @@
 @use 'sass:math';
 
+@function _get-line-height-factor($factor, $line-height-factor) {
+  @if $line-height-factor == null {
+    @return $factor;
+  }
+  @return $line-height-factor;
+}
+
+@mixin _vertical-rythm-dimension($factor, $line-height-factor, $properties) {
+  $line-height-factor: _get-line-height-factor($factor, $line-height-factor);
+
+  @include margin-y(calc(($factor - $line-height-factor) / 2));
+
+  @each $property in $properties {
+    #{$property}: get-size($line-height-factor);
+  }
+}
+
 @function get-size($factor) {
   $factor: math.div(math.ceil($factor * 1e4), 1e4);
 
-  @return calc(var(--odx-vr-base-size) * $factor);
+  @return calc(var(--odx-vertical-rythm-base-size) * $factor);
 }
 
 @mixin margin($factor, $directions: ('top', 'right', 'bottom', 'left')) {
@@ -13,13 +30,13 @@
 }
 
 @mixin margin-x($factor: 1) {
-  $spacing: calc(var(--odx-vr-base-size) * $factor);
+  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
 
   @include margin($factor, ('right', 'left'));
 }
 
 @mixin margin-y($factor: 1) {
-  $spacing: calc(var(--odx-vr-base-size) * $factor);
+  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
 
   @include margin($factor, ('top', 'bottom'));
 }
@@ -31,48 +48,33 @@
 }
 
 @mixin padding-x($factor: 1) {
-  $spacing: calc(var(--odx-vr-base-size) * $factor);
+  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
 
   @include padding($factor, ('right', 'left'));
 }
 
 @mixin padding-y($factor: 1) {
-  $spacing: calc(var(--odx-vr-base-size) * $factor);
+  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
 
   @include padding($factor, ('top', 'bottom'));
 }
 
 @mixin container($factor: 1, $line-height-factor: null) {
-  @if $line-height-factor == null {
-    $line-height-factor: $factor;
-  }
-
-  @include margin-y(calc(($factor - $line-height-factor) / 2));
+  @include _vertical-rythm-dimension($factor, $line-height-factor, (height, width));
+}
 
-  aspect-ratio: 1;
-  width: get-size($line-height-factor);
+@mixin min-height($factor: 1, $line-height-factor: null) {
+  @include _vertical-rythm-dimension($factor, $line-height-factor, min-height);
 }
 
 @mixin height($factor: 1, $line-height-factor: null) {
-  @if $line-height-factor == null {
-    $line-height-factor: $factor;
-  }
-
-  @include margin-y(calc(($factor - $line-height-factor) / 2));
-
-  height: get-size($line-height-factor);
+  @include _vertical-rythm-dimension($factor, $line-height-factor, height);
 }
 
 @mixin line-height($factor: 1, $line-height-factor: null) {
-  @if $line-height-factor == null {
-    $line-height-factor: $factor;
-  }
+  $line-height-factor: _get-line-height-factor($factor, $line-height-factor);
 
   @include padding-y(calc(($factor - $line-height-factor) / 2));
 
   line-height: get-size($line-height-factor);
 }
-
-:root {
-  --odx-vr-base-size: calc(var(--odx-t-base-line-height) * var(--odx-t-base-size));
-}

package/scss/abstract/_index.scss

@@ -0,0 +1,5 @@
+@forward 'breakpoints';
+@forward 'dimensions';
+@forward 'motion';
+@forward 'typography';
+@forward 'utils';

package/scss/abstract/_motion.scss

@@ -0,0 +1,10 @@
+@mixin transition($properties, $duration: var(--odx-v-transition-duration), $delay: 0ms) {
+  $props: ();
+
+  @each $prop in $properties {
+    $props: append($props, $prop, comma);
+  }
+
+  transition: all $duration $delay var(--odx-v-transition-easing-fn);
+  transition-property: $props;
+}

package/scss/abstract/_typography.scss

@@ -0,0 +1,25 @@
+@use 'sass:math';
+@use 'utils';
+
+@mixin font-size($size: 1) {
+  @if math.round($size) != $size {
+    @error '$size must me an integer';
+  }
+
+  @if $size < 0 {
+    font-size: calc(var(--odx-typography-base-size) * utils.css-pow(var(--odx-typography-negative-font-scaling-factor), $size));
+  } @else {
+    font-size: calc(var(--odx-typography-base-size) * utils.css-pow(var(--odx-typography-positive-font-scaling-factor), $size));
+  }
+}
+
+@mixin font-weight($value: normal) {
+  font-weight: var(--odx-typography-font-weight-#{$value});
+  letter-spacing: var(--odx-typography-font-weight-#{$value}-letter-spacing);
+}
+
+@mixin prevent-text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/scss/abstract/_utils.scss

@@ -0,0 +1,114 @@
+@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;
+  height: 0;
+  margin: 0;
+  opacity: 0;
+  outline: none !important;
+  padding: 0;
+  position: absolute;
+  width: 0;
+}
+
+@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);
+  outline-offset: var(--odx-v-outline-offset);
+}
+
+@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() {
+  pointer-events: none;
+  user-select: none;
+}

package/scss/components/accordion-item.component.scss

@@ -0,0 +1,59 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-accordion-item {
+  $root: &;
+
+  @include dimensions.padding(math.div(1, 6), 'bottom');
+
+  border-bottom: 1px solid var(--odx-input-control-outline-color);
+  display: block;
+
+  &:not(:last-child) {
+    @include dimensions.margin(1, 'bottom');
+  }
+
+  &__panel {
+    @include dimensions.padding-x(math.div(4, 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);
+    }
+  }
+
+  &__icon {
+    @include motion.transition(transform);
+
+    transform: rotate(0deg);
+
+    #{$root}--expanded & {
+      transform: rotateX(180deg);
+    }
+  }
+
+  &__slot {
+    @include dimensions.padding-x(math.div(4, 24));
+    @include dimensions.padding-y(math.div(8, 24));
+
+    overflow: hidden;
+  }
+
+  &.is-disabled {
+    color: var(--odx-c-text-disabled);
+    pointer-events: none;
+  }
+}

package/scss/components/accordion.component.scss

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

package/scss/components/{action-group/action-group.component.scss → action-group.component.scss}

@@ -1,12 +1,12 @@
-@use '../../modules/vertical-rythm' as vr;
-@use '../../base/mixins' as mx;
-@use '../button/button.component';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use 'button.component';
 
 .odx-action-group {
-  @include vr.height(2, 1.5);
-  @include mx.vertical-center-content(true);
+  @include dimensions.height(2, 1.5);
+  @include utils.vertical-center-content(true);
 
-  gap: vr.get-size(0.25);
+  gap: dimensions.get-size(0.25);
 
   &--reverse {
     flex-direction: row-reverse;
@@ -18,6 +18,10 @@
 
     color: var(--odx-c-control-text);
 
+    &:hover {
+      color: var(--odx-c-control-text);
+    }
+
     &:focus-visible {
       outline-color: var(--odx-c-focus-outline);
     }

package/scss/components/{area-header/area-header.component.scss → area-header.component.scss}

@@ -1,9 +1,10 @@
 @use 'sass:math';
-@use '../../modules/breakpoints' as br;
-@use '../../modules/vertical-rythm' as vr;
-@use '../../modules/typography' as t;
-@use '../avatar/avatar.component';
-@use '../../base/mixins' as mx;
+@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-headline);
@@ -11,11 +12,11 @@
 }
 
 .odx-area-header {
-  @include vr.padding-x(1);
+  @include dimensions.padding-x(1);
 
   &,
   &__container {
-    column-gap: vr.get-size(math.div(20, 24));
+    column-gap: dimensions.get-size(math.div(20, 24));
     display: flex;
   }
 
@@ -27,7 +28,7 @@
   &__inner,
   &__title,
   &__subtitle {
-    @include t.prevent-text-overflow();
+    @include typography.prevent-text-overflow();
   }
 
   &__title,
@@ -65,10 +66,10 @@
   }
 
   &__content {
-    @include mx.vertical-center-content();
+    @include utils.vertical-center-content();
 
     flex-wrap: wrap;
-    min-height: vr.get-size(2);
+    min-height: dimensions.get-size(2);
   }
 
   &--small,
@@ -84,7 +85,7 @@
 
   &--large,
   &--xlarge {
-    @include br.down(tablet) {
+    @include breakpoints.down(tablet) {
       flex-wrap: wrap;
 
       .odx-area-header__content {
@@ -95,8 +96,8 @@
   }
 
   &--medium {
-    @include br.up(tablet) {
-      @include vr.padding-y(0.5);
+    @include breakpoints.up(tablet) {
+      @include dimensions.padding-y(0.5);
     }
 
     .odx-area-header__title {
@@ -105,17 +106,17 @@
   }
 
   &--large {
-    @include vr.padding-y(0.25);
+    @include dimensions.padding-y(0.25);
 
-    @include br.up(tablet) {
-      @include vr.padding-y(0.5);
+    @include breakpoints.up(tablet) {
+      @include dimensions.padding-y(0.5);
     }
 
     .odx-area-header__title {
       @extend .odx-title--4;
 
-      @include br.down(tablet) {
-        @include vr.line-height(1);
+      @include breakpoints.down(tablet) {
+        @include dimensions.line-height(1);
       }
     }
 
@@ -125,15 +126,15 @@
   }
 
   &--xlarge {
-    @include vr.padding-y(0.5);
+    @include dimensions.padding-y(0.5);
 
-    @include br.up(tablet) {
-      @include vr.padding-y(1);
+    @include breakpoints.up(tablet) {
+      @include dimensions.padding-y(1);
 
-      gap: vr.get-size(1);
+      gap: dimensions.get-size(1);
 
       .odx-area-header__container {
-        @include vr.padding(1, top);
+        @include dimensions.padding(1, top);
       }
     }
 
@@ -148,16 +149,16 @@
     .odx-avatar {
       @extend .odx-avatar--large;
 
-      @include br.up(tablet) {
-        @include vr.margin(-0.5, top);
+      @include breakpoints.up(tablet) {
+        @include dimensions.margin(-0.5, top);
       }
     }
 
     .odx-area-header__content {
       align-self: flex-end;
 
-      @include br.up(tablet) {
-        @include vr.margin(-0.5, bottom);
+      @include breakpoints.up(tablet) {
+        @include dimensions.margin(-0.5, bottom);
       }
     }
   }

package/scss/components/{avatar/avatar.component.scss → avatar.component.scss}

@@ -1,29 +1,29 @@
 @use 'sass:math';
-@use '../../modules/breakpoints' as br;
-@use '../../modules/vertical-rythm' as vr;
-@use '../../modules/typography' as t;
-@use '../../base/mixins' as mx;
+@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 vr.container($size-factor, $line-height-factor);
-  @include t.font-size($font-size);
+  @include dimensions.container($size-factor, $line-height-factor);
+  @include typography.font-size($font-size);
 
   > .odx-icon,
   > .odx-icon[class*='odx-icon--'] {
-    @include vr.container($icon-factor);
+    @include dimensions.container($icon-factor);
 
-    font-size: vr.get-size($icon-factor);
+    font-size: dimensions.get-size($icon-factor);
   }
 }
 
 .odx-avatar {
-  @include mx.center-content(true);
-  @include t.prevent-text-overflow();
+  @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);
-  font-weight: var(--odx-t-font-weight-medium);
   position: relative;
   vertical-align: middle;
 
@@ -34,7 +34,7 @@
   &--medium {
     @include avatar-size(2, 1.5, 0, 1);
 
-    @include br.up(tablet) {
+    @include breakpoints.up(tablet) {
       @include avatar-size(3, math.div(64, 24), 2, 1.5);
     }
   }
@@ -42,7 +42,7 @@
   &--large {
     @include avatar-size(3, math.div(64, 24), 2, 1.5);
 
-    @include br.up(tablet) {
+    @include breakpoints.up(tablet) {
       @include avatar-size(4, 4, 4, 2.25);
     }
   }

package/scss/components/{badge/badge.component.scss → badge.component.scss}

@@ -1,28 +1,28 @@
 @use 'sass:math';
-@use '../../base/mixins' as mx;
-@use '../../modules/typography' as t;
-@use '../../modules/vertical-rythm' as vr;
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
 
 :root {
   --odx-badge-contrast-color: var(--odx-c-background-content);
 }
 
 .odx-badge {
-  $badge-size: vr.get-size(math.div(2, 3));
+  $badge-size: dimensions.get-size(math.div(2, 3));
 
-  @include mx.center-content(true);
-  @include mx.non-interactive();
-  @include t.font-size(-2);
-  @include vr.padding-x(math.div(1, 8));
+  @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;
-  box-sizing: border-box;
-  font-weight: var(--odx-t-font-weight-medium);
   height: $badge-size;
   left: 0;
   min-width: $badge-size;
   outline: 1px solid transparent;
   top: 0;
+  vertical-align: middle;
   z-index: 9999;
 
   &::before {

package/scss/components/button-group.component.scss

@@ -0,0 +1,98 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+
+@mixin buttons-radius($vertical: false, $reversed: false) {
+  $start: 'first';
+  $end: 'last';
+  @if $reversed {
+    $start: 'last';
+    $end: 'first';
+  }
+
+  @if $vertical {
+    margin: 0;
+
+    &:#{$start}-child {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:#{$end}-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  } @else {
+    &:#{$start}-child {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &:#{$end}-child {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
+
+  &:not(:first-child, :last-child) {
+    border-radius: 0;
+  }
+}
+
+.odx-button-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: dimensions.get-size(math.div(2, 24));
+
+  &--reverse {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+
+  &--reverse#{&}--vertical#{&}--block {
+    flex-direction: column-reverse;
+    justify-content: flex-end;
+  }
+
+  &--block {
+    display: flex;
+    width: 100%;
+  }
+
+  &:not(#{&}--vertical)#{&}--align-right {
+    justify-content: flex-end;
+  }
+
+  &:not(#{&}--vertical)#{&}--align-right#{&}--reverse {
+    justify-content: flex-start;
+  }
+
+  &:not(#{&}--vertical, #{&}--reverse) .odx-button {
+    @include buttons-radius();
+  }
+
+  &:not(#{&}--vertical)#{&}--reverse .odx-button {
+    @include buttons-radius(false, true);
+  }
+
+  &--vertical {
+    @include dimensions.margin-y(math.div(10, 24));
+
+    flex-direction: column;
+
+    .odx-button {
+      @include dimensions.height(math.div(35, 24));
+    }
+  }
+
+  &:not(#{&}--reverse)#{&}--vertical {
+    .odx-button {
+      @include buttons-radius(true);
+    }
+  }
+
+  &#{&}--reverse#{&}--vertical {
+    .odx-button {
+      @include buttons-radius(true, true);
+    }
+  }
+}