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

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "@odx/ui",
-  "publishConfig": {
-    "access": "public"
-  },
-  "description": "TODO: add description",
-  "version": "1.0.0-rc.1",
-  "bugs": "TODO: add url",
+  "version": "1.0.0-rc.10",
   "author": "Drägerwerk AG & Co.KGaA",
+  "license": "SEE LICENSE IN LICENSE",
   "files": [
-    "README.md",
     "*.css",
     "*.woff2",
+    "*.svg",
     "scss"
-  ]
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/scss/{modules → abstract}/_breakpoints.scss

@@ -8,7 +8,7 @@ $breakpoints: () !default;
   @return map.keys($breakpoints);
 }
 
-@function get-value($breakpoint) {
+@function _get-value($breakpoint) {
   @if $breakpoint and not map.has-key($breakpoints, $breakpoint) {
     @error "Invalid breakpoint, `#{$breakpoint}` doesn't exist. Choose one of #{map.keys(breakpoints.$values)}.";
   }
@@ -16,7 +16,7 @@ $breakpoints: () !default;
   @return map.get($breakpoints, $breakpoint);
 }
 
-@function get-next-value($breakpoint) {
+@function _get-next-value($breakpoint) {
   @if $breakpoint and not map.has-key($breakpoints, $breakpoint) {
     @error "Invalid breakpoint, `#{$breakpoint}` doesn't exist. Choose one of #{map.keys(breakpoints.$values)}.";
   }
@@ -27,20 +27,20 @@ $breakpoints: () !default;
   @return if($index < length($keys), list.nth($keys, $index + 1), null);
 }
 
-@function get-min-value($breakpoint) {
-  $value: get-value($breakpoint);
+@function _get-min-value($breakpoint) {
+  $value: _get-value($breakpoint);
 
   @return if($value != 0, $value, null);
 }
 
-@function get-max-value($breakpoint) {
-  $value: get-value($breakpoint);
+@function _get-max-value($breakpoint) {
+  $value: _get-value($breakpoint);
 
   @return if($value > 0, $value - 1, null);
 }
 
 @mixin up($breakpoint) {
-  $min: get-min-value($breakpoint);
+  $min: _get-min-value($breakpoint);
 
   @if $min {
     @media (min-width: $min) {
@@ -52,7 +52,7 @@ $breakpoints: () !default;
 }
 
 @mixin down($breakpoint) {
-  $max: get-max-value($breakpoint);
+  $max: _get-max-value($breakpoint);
 
   @if $max {
     @media (max-width: $max) {
@@ -64,9 +64,9 @@ $breakpoints: () !default;
 }
 
 @mixin only($breakpoint) {
-  $min: get-min-value($breakpoint);
-  $next: get-next-value($breakpoint);
-  $max: get-max-value($breakpoint);
+  $min: _get-min-value($breakpoint);
+  $next: _get-next-value($breakpoint);
+  $max: _get-max-value($breakpoint);
 
   @if $min != null and $max != null {
     @media (min-width: $min) and (max-width: $max) {

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

@@ -1,9 +1,27 @@
 @use 'sass:math';
 
+@function _get-line-height-factor($factor, $line-height-factor) {
+  @if not $line-height-factor {
+    @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 +31,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 +49,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,12 @@
+@use 'sass:list';
+
+@mixin transition($properties, $duration: var(--odx-v-transition-duration), $delay: 0ms) {
+  $props: ();
+
+  @each $prop in $properties {
+    $props: list.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,124 @@
+@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() {
+  pointer-events: none;
+  user-select: none;
+}

package/scss/cdk/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: 0;
+
+  &--horizontal {
+    left: 0;
+    width: 0;
+  }
+
+  &--vertical {
+    height: 0;
+    top: 0;
+  }
+
+  &--is-active {
+    opacity: 1;
+  }
+}

package/scss/cdk/connected-overlay.scss

@@ -0,0 +1,36 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/motion';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+.odx-cdk-connected-overlay {
+  @include motion.transition(opacity visibility);
+
+  display: block;
+  position: fixed;
+  z-index: 1337;
+
+  &.is-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &__content {
+    left: 0 !important;
+    position: relative !important;
+    top: 0 !important;
+
+    > * {
+      max-height: inherit;
+    }
+  }
+}
+
+.odx-cdk-connected-overlay-arrow {
+  height: dimensions.get-size(0.5);
+  position: fixed;
+  transform: rotate(45deg);
+  width: dimensions.get-size(0.5);
+  z-index: 0;
+}

package/scss/components/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);
+    }
+  }
+
+  &__icon {
+    @include motion.transition(transform);
+
+    transform: rotate(0deg);
+
+    #{$root}--expanded & {
+      transform: rotateX(180deg);
+    }
+  }
+
+  &__slot {
+    @include dimensions.padding(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;
@@ -16,7 +16,11 @@
     /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
     @extend .odx-button--ghost;
 
-    color: var(--odx-c-control-text);
+    color: var(--odx-c-text);
+
+    &:hover {
+      color: var(--odx-c-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;
   }
 
@@ -23,13 +24,6 @@
     flex: 0 0 auto;
   }
 
-  &__container,
-  &__inner,
-  &__title,
-  &__subtitle {
-    @include t.prevent-text-overflow();
-  }
-
   &__title,
   &__subtitle {
     display: block;
@@ -47,14 +41,14 @@
 
   &__title {
     @extend .odx-title;
-    @extend .odx-title--6;
+    @extend .odx-title-6;
 
     color: var(--odx-area-header-title-color);
   }
 
   &__subtitle {
     @extend .odx-subtitle;
-    @extend .odx-title--6;
+    @extend .odx-subtitle-6;
 
     color: var(--odx-area-header-subtitle-color);
   }
@@ -65,10 +59,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 +78,7 @@
 
   &--large,
   &--xlarge {
-    @include br.down(tablet) {
+    @include breakpoints.down(tablet) {
       flex-wrap: wrap;
 
       .odx-area-header__content {
@@ -95,27 +89,27 @@
   }
 
   &--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 {
-      @extend .odx-title--5;
+      @extend .odx-title-5;
     }
   }
 
   &--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;
+      @extend .odx-title-4;
 
-      @include br.down(tablet) {
-        @include vr.line-height(1);
+      @include breakpoints.down(tablet) {
+        @include dimensions.line-height(1);
       }
     }
 
@@ -125,39 +119,39 @@
   }
 
   &--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);
       }
     }
 
     .odx-area-header__title {
-      @extend .odx-title--2;
+      @extend .odx-title-2;
     }
 
     .odx-area-header__subtitle {
-      @extend .odx-title--5;
+      @extend .odx-subtitle-5;
     }
 
     .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);
       }
     }
   }