@odx/ui 1.0.0-rc.2 → 1.0.0-rc.20

package/scss/core.scss

@@ -1,12 +1,3 @@
-@use 'abstract/breakpoints' with (
-  $breakpoints: (
-    'phone-s': 360px,
-    'phone': 420px,
-    'tablet': 768px,
-    'desktop-s': 960px,
-    'desktop': 1200px,
-  )
-);
 @use 'variables';
 @use 'reset';
 
@@ -15,9 +6,18 @@ Layout
 */
 
 @use 'layout/base';
+@use 'layout/description-list';
 @use 'layout/layout';
 @use 'layout/helpers';
 @use 'layout/typography';
+@use 'layout/text-list';
+@use 'layout/content';
+
+/*
+  CDK
+*/
+@use 'cdk/active-indicator';
+@use 'cdk/connected-overlay';
 
 /*
   Components
@@ -29,19 +29,41 @@ 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';
+@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';
 @use 'components/logo.component';
 @use 'components/main-menu.component';
+@use 'components/menu.component';
 @use 'components/modal.component';
+@use 'components/progress.component';
 @use 'components/radio-button.component';
 @use 'components/radio-group.component';
-@use 'components/switch.component.scss';
+@use 'components/rail-navigation.component';
+@use 'components/rail-navigation-item.component';
+@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/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/_base.scss

@@ -1,5 +1,11 @@
 @use '../abstract/utils';
 
+html,
+body,
+.odx-root {
+  background-color: var(--odx-c-background);
+}
+
 * {
   scrollbar-color: var(--odx-v-scrollbar-thumb-color) var(--odx-v-scrollbar-track-color);
 }

package/scss/layout/_content.scss

@@ -0,0 +1,25 @@
+@use './typography' as *;
+@use './text-list' as *;
+@use './description-list' as *;
+
+.odx-content {
+  @for $i from 1 through 6 {
+    h#{$i} {
+      @extend .odx-title;
+      @extend .odx-title-#{$i};
+    }
+  }
+
+  p {
+    @extend .odx-text;
+  }
+
+  ol,
+  ul {
+    @extend .odx-text-list;
+  }
+
+  dl {
+    @extend .odx-description-list;
+  }
+}

package/scss/layout/_description-list.scss

@@ -0,0 +1,30 @@
+@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 {
+    @include typography.font-weight(medium);
+  }
+}

package/scss/layout/_helpers.scss

@@ -4,8 +4,13 @@
 @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) {
       .odx-margin-#{$direction}-#{$size} {
         @include dimensions.margin($factor, $direction);
@@ -27,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);
@@ -58,22 +64,6 @@ html body {
     border: 0;
   }
 
-  ul,
-  ol,
-  .odx-text-list {
-    @include dimensions.margin-y(0.5);
-    @include dimensions.padding(1, left);
-
-    ul,
-    ol {
-      @include dimensions.margin(0);
-    }
-
-    li {
-      @include dimensions.margin(math.div(-1, 24), left);
-    }
-  }
-
   .odx-fs-normal {
     @include typography.font-weight(normal);
   }

package/scss/layout/_layout.scss

@@ -11,6 +11,10 @@ $columns: 12 !default;
 :root {
   --odx-grid-gutter: #{dimensions.get-size(1)};
   --odx-grid-gutter-small: #{dimensions.get-size(math.div(8, 24))};
+
+  @include breakpoints.down(phone) {
+    --odx-grid-gutter: var(--odx-grid-gutter-small);
+  }
 }
 
 #{create-selector(grid)},

package/scss/layout/_text-list.scss

@@ -0,0 +1,18 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+
+.odx-text-list,
+.odx-text-list ol,
+.odx-text-list ul {
+  @include dimensions.margin-y(0.5);
+  @include dimensions.padding(1, left);
+
+  ul,
+  ol {
+    @include dimensions.margin(0);
+  }
+
+  li {
+    @include dimensions.margin(math.div(-1, 24), left);
+  }
+}

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,34 +24,34 @@
   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);
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 .odx-title,
-.odx-subtitle {
+[class*='odx-title-'] {
   @include typography.font-weight(bold);
 
   color: var(--odx-c-headline);
 }
 
-.odx-subtitle {
-  font-weight: var(--odx-typography-font-weight-normal);
+.odx-subtitle,
+[class*='odx-subtitle-'] {
+  @extend .odx-title;
+  @include typography.font-weight(normal);
 }
 
-h1,
-.odx-title--1 {
+.odx-title-1,
+.odx-subtitle-1 {
   @include dimensions.line-height(2, math.div(40, 24));
   @include typography.font-size(5);
 
@@ -61,8 +60,8 @@ h1,
   }
 }
 
-h2,
-.odx-title--2 {
+.odx-title-2,
+.odx-subtitle-2 {
   @include dimensions.line-height(2, 1.5);
   @include typography.font-size(4);
 
@@ -71,8 +70,8 @@ h2,
   }
 }
 
-h3,
-.odx-title--3 {
+.odx-title-3,
+.odx-subtitle-3 {
   @include dimensions.line-height(2, math.div(32, 24));
   @include typography.font-size(3);
 
@@ -81,29 +80,27 @@ h3,
   }
 }
 
-h4,
-.odx-title--4 {
+.odx-title-4,
+.odx-subtitle-4 {
   @include dimensions.line-height(2, math.div(30, 24));
   @include typography.font-size(2);
 }
 
-h5,
-.odx-title--5 {
+.odx-title-5,
+.odx-subtitle-5 {
   @include dimensions.line-height(1);
   @include typography.font-size(1);
 }
 
-h6,
-.odx-title--6 {
+.odx-title-6,
+.odx-subtitle-6 {
   @include dimensions.line-height(1);
   @include typography.font-size(0);
 }
 
-p,
 .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/reset.scss

@@ -5,6 +5,10 @@
 
 * {
   box-sizing: border-box;
+
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 html,
@@ -137,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%)};
@@ -29,7 +29,7 @@
 
   --blue-700-5: #{rgba(#002766, 5%)};
   --blue-700-10: #{rgba(#002766, 10%)};
-  --blue-700-25: #{rgba(#002766, 25%)};
+  --blue-700-15: #{rgba(#002766, 15%)};
   --blue-800-30: #{rgba(#001433, 30%)};
 
   --cyan-50: #cbe9ff;
@@ -44,6 +44,7 @@
   --cyan-900: #003c66;
 
   --cyan-500-15: #{rgba(#0091f7, 15%)};
+  --cyan-500-20: #{rgba(#0091f7, 20%)};
 
   --red-00: #ffe0e3;
   --red-50: #ffb4b4;

package/scss/variables/_colors.scss

@@ -16,15 +16,23 @@
   --odx-c-error-outline-hover: var(--red-100);
   --odx-c-error-text: var(--red-600);
 
+  --odx-c-error-warning: var(--orange-100);
+  --odx-c-error-warning-outline: var(--orange-200);
+  --odx-c-error-warning-outline-hover: var(--orange-300);
+  --odx-c-error-warning-text: var(--orange-500);
+
   --odx-c-focus: var(--cyan-500-15);
   --odx-c-focus-outline: var(--cyan-300);
 
+  --odx-c-selected: var(--cyan-500-15);
+  --odx-c-selected-hover: var(--cyan-500-20);
+
   --odx-c-selection: var(--cyan-300);
 
   --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/_controls.scss

@@ -11,7 +11,7 @@
   --odx-control-background-color-selected: var(--odx-c-highlight);
   --odx-control-outline-color-selected: var(--odx-c-highlight);
 
-  --odx-control-color-disabled: var(--gray-600);
+  --odx-control-color-disabled: var(--gray-500);
   --odx-control-background-color-disabled: var(--gray-100);
   --odx-control-outline-color-disabled: transparent;
 
@@ -24,10 +24,14 @@
   --odx-control-outline-color-error: var(--odx-c-error-outline);
   --odx-control-outline-color-error-hover: var(--odx-c-error-outline-hover);
 
+  --odx-control-color-warning: var(--odx-c-error-warning-text);
+  --odx-control-background-color-warning: var(--odx-c-error-warning);
+  --odx-control-outline-color-warning: var(--odx-c-error-warning-outline);
+  --odx-control-outline-color-warning-hover: var(--odx-c-error-warning-outline-hover);
+
   --odx-input-control-color: var(--odx-c-text);
   --odx-input-control-background-color: var(--gray-100);
   --odx-input-control-outline-color: var(--gray-200);
-  --odx-input-control-placeholder-color: var(--blue-700-25);
 
   --odx-input-control-color-hover: var(--odx-c-text);
   --odx-input-control-background-color-hover: var(--gray-200);
@@ -45,4 +49,9 @@
   --odx-input-control-background-color-error: var(--odx-c-error);
   --odx-input-control-outline-color-error: var(--odx-c-error-outline);
   --odx-input-control-outline-color-error-hover: var(--odx-c-error-outline-hover);
+
+  --odx-input-control-color-warning: var(--odx-c-error-warning-text);
+  --odx-input-control-background-color-warning: var(--odx-c-error-warning);
+  --odx-input-control-outline-color-warning: var(--odx-c-error-warning-outline);
+  --odx-input-control-outline-color-warning-hover: var(--odx-c-error-warning-outline-hover);
 }

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;
@@ -12,7 +12,7 @@
   --odx-typography-positive-font-scaling-factor: 1.125;
   --odx-typography-negative-font-scaling-factor: 1.2;
 
-  @include breakpoints.up(tablet) {
+  @include breakpoints.up(phone) {
     --odx-typography-positive-font-scaling-factor: 1.25;
   }
 }

package/scss/variables/_visuals.scss

@@ -2,13 +2,15 @@
   --odx-v-border-radius: calc(var(--odx-typography-base-size) * 0.375);
   --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);
 
-  --odx-v-backdrop-blur: 5px;
-  --odx-v-backdrop-box-shadow-layer-2: 0 4px 12px 0 var(--odx-c-backdrop-box-shadow);
+  --odx-v-backdrop-blur: 3px;
 
-  --odx-v-transition-duration: 200ms;
+  --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;
-  --odx-v-outline: 1px solid transparent;
-  --odx-v-outline-offset: -1px;
+  --odx-v-outline-width: 1px;
+  --odx-v-outline-width-bold: 2px;
 
   --odx-v-scrollbar-track-color: transparent;
   --odx-v-scrollbar-thumb-color: var(--gray-600);