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

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

@@ -7,11 +7,12 @@
   --odx-toggle-button-border-radius: 2px;
 
   $root: &;
+
   @include dimensions.height(2, 1.5);
   @include dimensions.padding-x(math.div(6, 24));
   @include motion.transition(background-color outline-color);
   @include utils.center-content(true);
-  @include utils.with-outline;
+  @include utils.with-outline();
 
   border-radius: var(--odx-v-border-radius-controls);
   column-gap: dimensions.get-size(math.div(6, 24));
@@ -19,7 +20,7 @@
 
   &__indicator {
     @include dimensions.height(2, 1);
-    @include utils.with-outline;
+    @include utils.with-outline();
 
     background-color: var(--odx-c-highlight);
     border-radius: var(--odx-toggle-button-border-radius);

package/scss/core.scss

@@ -38,6 +38,8 @@ Layout
 @use 'components/area-header.component';
 @use 'components/avatar.component';
 @use 'components/badge.component';
+@use 'components/bar.component';
+@use 'components/breadcrumbs.component';
 @use 'components/button-group.component';
 @use 'components/button.component';
 @use 'components/checkbox.component';
@@ -56,11 +58,12 @@ Layout
 @use 'components/loading-spinner.component';
 @use 'components/logo.component';
 @use 'components/main-menu.component';
+@use 'components/menu.component';
+@use 'components/menu-item.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/select.component';
@@ -69,6 +72,8 @@ Layout
 @use 'components/switch.component';
 @use 'components/tab-bar-item.component';
 @use 'components/tab-bar.component';
+@use 'components/toast.component';
+@use 'components/toast-item.component';
 @use 'components/toggle-button.component';
 @use 'components/toggle-button-group.component';
 @use 'components/tooltip.component';

package/scss/layout/_description-list.scss

@@ -4,6 +4,7 @@
 
 .odx-description-list {
   $gap: dimensions.get-size(math.div(8, 24));
+
   @include dimensions.margin-y(0.5);
 
   column-gap: $gap;
@@ -24,6 +25,6 @@
   }
 
   dd {
-    font-weight: var(--odx-typography-font-weight-medium);
+    @include typography.font-weight(medium);
   }
 }

package/scss/layout/_helpers.scss

@@ -10,6 +10,7 @@ html body {
 
   @each $size in (4, 8, 12, 16, 24, 36, 48) {
     $factor: math.div($size, 24);
+
     @each $direction in (top, right, bottom, left) {
       .odx-margin-#{$direction}-#{$size} {
         @include dimensions.margin($factor, $direction);
@@ -31,6 +32,7 @@ html body {
 
   @each $size in (4, 8, 12, 16, 24, 36, 48) {
     $factor: math.div($size, 24);
+
     @each $direction in (top, right, bottom, left) {
       .odx-padding-#{$direction}-#{$size} {
         @include dimensions.padding($factor, $direction);

package/scss/layout/_typography.scss

@@ -1,4 +1,3 @@
-/* stylelint-disable block-closing-brace-newline-after */
 @use 'sass:math';
 @use '../abstract/breakpoints';
 @use '../abstract/dimensions';
@@ -25,13 +24,17 @@
   src: url('../assets/fonts/PangeaText-SemiBoldWeb.woff2') format('woff2');
 }
 
+html {
+  font-size: 62.5%;
+}
+
 html body {
   @include dimensions.line-height(1);
   @include typography.font-size(0);
+  @include typography.font-weight(normal);
 
   color: var(--odx-c-text);
   font-family: Pangea, sans-serif;
-  font-weight: var(--odx-typography-font-weight-normal);
 }
 
 .odx-title,
@@ -97,8 +100,7 @@ html body {
 
 .odx-text {
   @include dimensions.line-height(1);
-
-  font-weight: var(--odx-typography-font-weight-normal);
+  @include typography.font-weight(normal);
 
   &--small {
     @include dimensions.line-height(1, math.div(20, 24));

package/scss/variables/_colors.scss

@@ -27,7 +27,7 @@
   --odx-c-backdrop: var(--white-60);
   --odx-c-backdrop-dark: var(--blue-800-30);
 
-  --odx-c-backdrop-box-shadow: var(--blue-800-30);
+  --odx-c-box-shadow: var(--blue-800-30);
 
   --odx-c-seperator: var(--gray-200);
 

package/scss/variables/_typography.scss

@@ -1,7 +1,7 @@
 @use '../abstract/breakpoints';
 
 :root {
-  --odx-typography-base-size: 16px;
+  --odx-typography-base-size: 1.6rem; // clamp(1.4rem, 0.667vw + 1rem, 1.6rem);
   --odx-typography-base-line-height: 1.5;
   --odx-typography-font-weight-normal: normal;
   --odx-typography-font-weight-normal-letter-spacing: 0;

package/scss/variables/_visuals.scss

@@ -3,8 +3,9 @@
   --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-box-shadow-layer-1: 0 2px 6px 0 var(--odx-c-box-shadow);
+  --odx-v-box-shadow-layer-2: 0 4px 12px 0 var(--odx-c-box-shadow);
 
   --odx-v-transition-duration: 250ms;
   --odx-v-transition-easing-fn: ease;