@odx/ui 1.0.0-rc.6 → 1.0.0-rc.8

package/scss/core.scss

@@ -15,6 +15,7 @@ Layout
 */
 
 @use 'layout/base';
+@use 'layout/description-list';
 @use 'layout/layout';
 @use 'layout/helpers';
 @use 'layout/typography';
@@ -25,6 +26,7 @@ Layout
   CDK
 */
 @use 'cdk/active-indicator';
+@use 'cdk/connected-overlay';
 
 /*
   Components
@@ -42,22 +44,31 @@ Layout
 @use 'components/chip.component';
 @use 'components/circular-progress.component';
 @use 'components/content-box.component';
+@use 'components/dropdown.component';
 @use 'components/form-field.component';
 @use 'components/header.component';
 @use 'components/icon.component';
+@use 'components/inline-message.component';
+@use 'components/launch-tile.component';
 @use 'components/link.component';
 @use 'components/list.component';
 @use 'components/list-item.component';
-@use 'components/loading-spinner.component.scss';
+@use 'components/loading-spinner.component';
 @use 'components/logo.component';
 @use 'components/main-menu.component';
 @use 'components/modal.component';
 @use 'components/progress.component';
 @use 'components/radio-button.component';
 @use 'components/radio-group.component';
+
 @use 'components/rail-navigation.component';
 @use 'components/rail-navigation-item.component';
-@use 'components/slider.component.scss';
-@use 'components/switch.component.scss';
+@use 'components/select.component';
+@use 'components/slider.component';
+@use 'components/spinbox.component';
+@use 'components/switch.component';
+@use 'components/tab-bar-item.component';
+@use 'components/tab-bar.component';
 @use 'components/toggle-button.component';
 @use 'components/toggle-button-group.component';
+@use 'components/tooltip.component';

package/scss/layout/_content.scss

@@ -1,5 +1,6 @@
 @use './typography' as *;
 @use './text-list' as *;
+@use './description-list' as *;
 
 .odx-content {
   @for $i from 1 through 6 {
@@ -17,4 +18,8 @@
   ul {
     @extend .odx-text-list;
   }
+
+  dl {
+    @extend .odx-description-list;
+  }
 }

package/scss/layout/_description-list.scss

@@ -0,0 +1,29 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+
+.odx-description-list {
+  $gap: dimensions.get-size(math.div(8, 24));
+  @include dimensions.margin-y(0.5);
+
+  column-gap: $gap;
+  display: flex;
+  flex: 0 0 100%;
+  flex-wrap: wrap;
+  row-gap: calc(#{$gap} / 2);
+
+  dt,
+  dd {
+    align-items: flex-end;
+    display: inline-flex;
+    flex: 0 0 calc(50% - #{$gap} / 2);
+  }
+
+  dt {
+    @include typography.font-size(-1);
+  }
+
+  dd {
+    font-weight: var(--odx-typography-font-weight-medium);
+  }
+}

package/scss/layout/_helpers.scss

@@ -4,6 +4,10 @@
 @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) {

package/scss/reset.scss

@@ -141,6 +141,7 @@ a {
   text-decoration: none;
 }
 
+button,
 select,
 input,
 textarea {

package/scss/variables/_color-palettes.scss

@@ -1,6 +1,6 @@
 :root {
   --white: #ffffff;
-  --black: #060a12;
+  --black: #00060f;
 
   --white-5: #{rgba(#ffffff, 5%)};
   --white-60: #{rgba(#ffffff, 60%)};

package/scss/variables/_visuals.scss

@@ -3,6 +3,7 @@
   --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);
 
   --odx-v-backdrop-blur: 3px;
+  --odx-v-backdrop-box-shadow-layer-1: 0 2px 6px 0 var(--odx-c-backdrop-box-shadow);
   --odx-v-backdrop-box-shadow-layer-2: 0 4px 12px 0 var(--odx-c-backdrop-box-shadow);
 
   --odx-v-transition-duration: 250ms;