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

package/scss/core.scss

@@ -1,17 +1,4 @@
-@use 'base/reset';
-@use 'helpers';
-
-/*
-  Variables
-*/
-@use 'variables/color-palettes';
-@use 'variables/colors';
-@use 'variables/visuals';
-
-/*
-  Modules
-*/
-@use 'modules/breakpoints' with (
+@use 'abstract/breakpoints' with (
   $breakpoints: (
     'phone-s': 360px,
     'phone': 420px,
@@ -20,24 +7,73 @@
     'desktop': 1200px,
   )
 );
-@use 'modules/layout' as layout;
-@use 'modules/typography' as t;
-@use 'modules/vertical-rythm' as vr;
+@use 'variables';
+@use 'reset';
+
+/*
+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
 */
 
-@use 'components/action-group/action-group.component';
-@use 'components/area-header/area-header.component';
-@use 'components/avatar/avatar.component';
-@use 'components/badge/badge.component';
-@use 'components/button/button.component';
-@use 'components/checkbox/checkbox.component';
-@use 'components/content-box/content-box.component';
-@use 'components/icon/icon.component';
-@use 'components/link/link.component';
-@use 'components/logo/logo.component';
-@use 'components/main-menu/main-menu.component';
-@use 'components/header/header.component';
-@use 'components/radio-group/radio-group.component';
+@use 'components/accordion.component';
+@use 'components/accordion-item.component';
+@use 'components/action-group.component';
+@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/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';
+@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

@@ -0,0 +1,35 @@
+@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);
+}
+
+::-webkit-scrollbar {
+  appearance: none;
+  width: 12px;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb {
+  border: 3px solid transparent;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--odx-v-scrollbar-track-color);
+}
+
+::-webkit-scrollbar-thumb {
+  background-clip: content-box;
+  background-color: var(--odx-v-scrollbar-thumb-color);
+  border-radius: var(--odx-v-border-radius);
+
+  &:hover {
+    background-color: var(--odx-v-scrollbar-thumb-color-hover);
+  }
+}

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

@@ -0,0 +1,85 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@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);
+      }
+    }
+
+    .odx-margin-x-#{$size} {
+      @include dimensions.margin-x($factor);
+    }
+
+    .odx-margin-y-#{$size} {
+      @include dimensions.margin-y($factor);
+    }
+
+    .odx-margin-#{$size} {
+      @include dimensions.margin($factor);
+    }
+  }
+
+  @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);
+      }
+    }
+
+    .odx-padding-x-#{$size} {
+      @include dimensions.padding-x($factor);
+    }
+
+    .odx-padding-y-#{$size} {
+      @include dimensions.padding-y($factor);
+    }
+
+    .odx-padding-#{$size} {
+      @include dimensions.padding($factor);
+    }
+  }
+
+  .odx-visually-hidden {
+    @include utils.visually-hidden();
+  }
+
+  hr,
+  .odx-seperator {
+    @include dimensions.height(1, math.div(1, 24));
+
+    background-color: var(--odx-c-seperator);
+    border: 0;
+  }
+
+  .odx-fs-normal {
+    @include typography.font-weight(normal);
+  }
+
+  .odx-fs-medium {
+    @include typography.font-weight(medium);
+  }
+
+  b,
+  strong,
+  .odx-fs-bold {
+    @include typography.font-weight(bold);
+  }
+
+  em,
+  .odx-fs-italic {
+    font-style: italic;
+  }
+}

package/scss/{modules → layout}/_layout.scss

@@ -1,5 +1,6 @@
-@use './breakpoints';
-@use './vertical-rythm' as vr;
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
 
 $columns: 12 !default;
 
@@ -8,14 +9,101 @@ $columns: 12 !default;
 }
 
 :root {
-  --odx-grid-gutter: #{vr.get-size(1)};
+  --odx-grid-gutter: #{dimensions.get-size(1)};
+  --odx-grid-gutter-small: #{dimensions.get-size(math.div(8, 24))};
+}
+
+#{create-selector(grid)},
+#{create-selector(flex)} {
+  gap: var(--odx-grid-gutter);
+
+  &#{create-selector(gap-small)} {
+    gap: var(--odx-grid-gutter-small);
+  }
+
+  &#{create-selector(gap-none)} {
+    gap: 0;
+  }
+
+  &#{create-selector(gap-row-none)} {
+    row-gap: 0;
+  }
+
+  &#{create-selector(gap-column-none)} {
+    column-gap: 0;
+  }
+
+  &#{create-selector(vertical-center)} {
+    align-items: center;
+  }
+
+  &#{create-selector(vertical-start)} {
+    align-items: flex-start;
+  }
+
+  &#{create-selector(vertical-end)} {
+    align-items: flex-end;
+  }
+
+  &#{create-selector(horizontal-center)} {
+    justify-items: center;
+  }
+
+  &#{create-selector(horizontal-start)} {
+    justify-items: flex-start;
+  }
+
+  &#{create-selector(horizontal-end)} {
+    justify-items: flex-end;
+  }
+
+  #{create-selector(first)} {
+    order: -1;
+  }
+
+  #{create-selector(last)} {
+    order: $columns;
+  }
+
+  #{create-selector(seperator)} {
+    background-clip: content-box;
+    border-color: var(--odx-c-seperator);
+    border-style: solid;
+
+    @each $side in (right, left) {
+      &#{create-selector($side)} {
+        border-#{$side}-width: 1px;
+        margin-#{$side}: calc(-0.5 * var(--odx-grid-gutter));
+        padding-#{$side}: calc(0.5 * var(--odx-grid-gutter));
+      }
+    }
+  }
+}
+
+#{create-selector(flex)} {
+  display: flex;
+
+  &#{create-selector(inline)} {
+    display: inline-flex;
+  }
+
+  &#{create-selector(wrap)} {
+    flex-wrap: wrap;
+  }
+
+  #{create-selector(auto)} {
+    flex: 1 1 auto;
+  }
 }
 
 #{create-selector(grid)} {
   display: grid;
-  gap: var(--odx-grid-gutter);
   grid-template-columns: repeat(12, 1fr);
 
+  &#{create-selector(inline)} {
+    display: inline-grid;
+  }
+
   @each $breakpoint in breakpoints.get-breakpoint-names() {
     &#{create-selector(\@#{$breakpoint}, '*')} {
       grid-template-columns: 12fr;
@@ -62,47 +150,9 @@ $columns: 12 !default;
     }
   }
 
-  &#{create-selector(gap-none)} {
-    gap: 0;
-  }
-
-  &#{create-selector(gap-row-none)} {
-    row-gap: 0;
-  }
-
-  &#{create-selector(gap-column-none)} {
-    column-gap: 0;
-  }
-
-  &#{create-selector(vertical-center)} {
-    align-items: center;
-  }
-
-  &#{create-selector(vertical-start)} {
-    align-items: flex-start;
-  }
-
-  &#{create-selector(vertical-end)} {
-    align-items: flex-end;
-  }
-
-  &#{create-selector(horizontal-center)} {
-    justify-items: center;
-  }
-
-  &#{create-selector(horizontal-start)} {
-    justify-items: flex-start;
-  }
-
-  &#{create-selector(horizontal-end)} {
-    justify-items: flex-end;
-  }
-
-  #{create-selector(first)} {
-    order: -1;
-  }
-
-  #{create-selector(last)} {
-    order: $columns;
+  &#{create-selector(auto)} {
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    grid-template-columns: unset;
   }
 }

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

@@ -0,0 +1,114 @@
+@use 'sass:math';
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+
+@font-face {
+  font-family: Pangea;
+  font-style: normal;
+  font-weight: normal;
+  src: url('../assets/fonts/PangeaText-RegularWeb.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Pangea;
+  font-style: normal;
+  font-weight: 500;
+  src: url('../assets/fonts/PangeaText-MediumWeb.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: Pangea;
+  font-style: normal;
+  font-weight: bold;
+  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;
+}
+
+.odx-title,
+[class*='odx-title-'] {
+  @include typography.font-weight(bold);
+
+  color: var(--odx-c-headline);
+}
+
+.odx-subtitle,
+[class*='odx-subtitle-'] {
+  @extend .odx-title;
+  @include typography.font-weight(normal);
+}
+
+.odx-title-1,
+.odx-subtitle-1 {
+  @include dimensions.line-height(2, math.div(40, 24));
+  @include typography.font-size(5);
+
+  @include breakpoints.up(tablet) {
+    @include dimensions.line-height(3, math.div(64, 24));
+  }
+}
+
+.odx-title-2,
+.odx-subtitle-2 {
+  @include dimensions.line-height(2, 1.5);
+  @include typography.font-size(4);
+
+  @include breakpoints.up(tablet) {
+    @include dimensions.line-height(3, math.div(54, 24));
+  }
+}
+
+.odx-title-3,
+.odx-subtitle-3 {
+  @include dimensions.line-height(2, math.div(32, 24));
+  @include typography.font-size(3);
+
+  @include breakpoints.up(tablet) {
+    @include dimensions.line-height(2, math.div(42, 24));
+  }
+}
+
+.odx-title-4,
+.odx-subtitle-4 {
+  @include dimensions.line-height(2, math.div(30, 24));
+  @include typography.font-size(2);
+}
+
+.odx-title-5,
+.odx-subtitle-5 {
+  @include dimensions.line-height(1);
+  @include typography.font-size(1);
+}
+
+.odx-title-6,
+.odx-subtitle-6 {
+  @include dimensions.line-height(1);
+  @include typography.font-size(0);
+}
+
+.odx-text {
+  @include dimensions.line-height(1);
+  @include typography.font-weight(normal);
+
+  &--small {
+    @include dimensions.line-height(1, math.div(20, 24));
+    @include typography.font-size(-1);
+  }
+
+  &--xsmall {
+    @include dimensions.line-height(1, math.div(16, 24));
+    @include typography.font-size(-2);
+  }
+}

package/scss/{base/_reset.scss → reset.scss}

@@ -3,6 +3,14 @@
    License: none (public domain)
 */
 
+* {
+  box-sizing: border-box;
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
 html,
 body,
 div,
@@ -18,6 +26,9 @@ h5,
 h6,
 p,
 button,
+input,
+textarea,
+select,
 blockquote,
 pre,
 a,
@@ -108,11 +119,6 @@ section {
   display: block;
 }
 
-ol,
-ul {
-  list-style: none;
-}
-
 blockquote,
 q {
   quotes: none;
@@ -134,3 +140,22 @@ table {
 a {
   text-decoration: none;
 }
+
+button,
+select,
+input,
+textarea {
+  background-color: transparent;
+  line-height: inherit;
+  min-height: inherit;
+  outline: none;
+}
+
+select,
+button {
+  cursor: pointer;
+}
+
+::selection {
+  background-color: var(--odx-c-selection);
+}