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

package/scss/layout/_helpers.scss

@@ -0,0 +1,95 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+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);
+      }
+    }
+
+    .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;
+  }
+
+  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);
+  }
+
+  .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/_typography.scss

@@ -0,0 +1,117 @@
+/* stylelint-disable block-closing-brace-newline-after */
+@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 body {
+  @include dimensions.line-height(1);
+  @include typography.font-size(0);
+
+  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 {
+  @include typography.font-weight(bold);
+
+  color: var(--odx-c-headline);
+}
+
+.odx-subtitle {
+  font-weight: var(--odx-typography-font-weight-normal);
+}
+
+h1,
+.odx-title--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));
+  }
+}
+
+h2,
+.odx-title--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));
+  }
+}
+
+h3,
+.odx-title--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));
+  }
+}
+
+h4,
+.odx-title--4 {
+  @include dimensions.line-height(2, math.div(30, 24));
+  @include typography.font-size(2);
+}
+
+h5,
+.odx-title--5 {
+  @include dimensions.line-height(1);
+  @include typography.font-size(1);
+}
+
+h6,
+.odx-title--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);
+
+  &--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,10 @@
    License: none (public domain)
 */
 
+* {
+  box-sizing: border-box;
+}
+
 html,
 body,
 div,
@@ -18,6 +22,9 @@ h5,
 h6,
 p,
 button,
+input,
+textarea,
+select,
 blockquote,
 pre,
 a,
@@ -108,11 +115,6 @@ section {
   display: block;
 }
 
-ol,
-ul {
-  list-style: none;
-}
-
 blockquote,
 q {
   quotes: none;
@@ -134,3 +136,21 @@ table {
 a {
   text-decoration: none;
 }
+
+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);
+}

package/scss/variables/_color-palettes.scss

@@ -2,8 +2,8 @@
   --white: #ffffff;
   --black: #060a12;
 
-  --white-5: rgba(255 255 255 / 5%);
-  --white-60: rgba(255 255 255 / 60%);
+  --white-5: #{rgba(#ffffff, 5%)};
+  --white-60: #{rgba(#ffffff, 60%)};
 
   --gray-50: #f5f7fa;
   --gray-100: #e9eef4;
@@ -16,66 +16,69 @@
   --gray-800: #697c8c;
   --gray-900: #5d6a74;
 
-  --blue-50: #d3e2f3;
-  --blue-100: #a2c4eb;
-  --blue-200: #6ea5e7;
-  --blue-300: #3683e7;
-  --blue-400: #1062d5;
-  --blue-500: #0647a7;
-  --blue-600: #03398f;
-  --blue-700: #002d74;
-  --blue-800: #02193b;
+  --blue-50: #d5e2f6;
+  --blue-100: #a8c4f0;
+  --blue-200: #79a5ec;
+  --blue-300: #4786eb;
+  --blue-400: #1f65d7;
+  --blue-500: #0a51c2;
+  --blue-600: #043c95;
+  --blue-700: #002766;
+  --blue-800: #001433;
   --blue-900: #000205;
 
-  --blue-700-5: rgba(0 45 116 / 5%);
-  --blue-700-10: rgba(0 45 116 / 10%);
+  --blue-700-5: #{rgba(#002766, 5%)};
+  --blue-700-10: #{rgba(#002766, 10%)};
+  --blue-700-25: #{rgba(#002766, 25%)};
+  --blue-800-30: #{rgba(#001433, 30%)};
 
-  --cyan-50: #dbf2ff;
-  --cyan-100: #c7eaff;
-  --cyan-200: #9edbff;
-  --cyan-300: #75cdfe;
-  --cyan-400: #4dbefe;
-  --cyan-500: #22aaff;
-  --cyan-600: #009efa;
-  --cyan-700: #0084d1;
-  --cyan-800: #006ba8;
-  --cyan-900: #005180;
+  --cyan-50: #cbe9ff;
+  --cyan-100: #9dd7ff;
+  --cyan-200: #70c4ff;
+  --cyan-300: #47b3ff;
+  --cyan-400: #1fa2ff;
+  --cyan-500: #0091f7;
+  --cyan-600: #007ad1;
+  --cyan-700: #0065ad;
+  --cyan-800: #00508a;
+  --cyan-900: #003c66;
 
-  --cyan-500-15: rgb(34 170 255 / 15%);
+  --cyan-500-15: #{rgba(#0091f7, 15%)};
 
   --red-00: #ffe0e3;
-  --red-50: #ffa3ac;
-  --red-100: #ff8f9c;
-  --red-200: #ff667d;
-  --red-300: #ff3d61;
-  --red-400: #ff1447;
-  --red-500: #eb003b;
-  --red-600: #c20030;
-  --red-700: #990026;
-  --red-800: #70001c;
-  --red-900: #470012;
+  --red-50: #ffb4b4;
+  --red-100: #ff9898;
+  --red-200: #ff7b7b;
+  --red-300: #ff5c5c;
+  --red-400: #ff2020;
+  --red-500: #f30303;
+  --red-600: #d70202;
+  --red-700: #bc0000;
+  --red-800: #970000;
+  --red-900: #700000;
 
-  --yellow-50: #fbffd1;
-  --yellow-100: #f9ffbd;
-  --yellow-200: #f6ff94;
-  --yellow-300: #f3ff6b;
-  --yellow-400: #efff42;
-  --yellow-500: #ecff1a;
-  --yellow-600: #dcf000;
-  --yellow-700: #b6c700;
-  --yellow-800: #919e00;
-  --yellow-900: #6c7500;
+  --yellow-50: #fffad7;
+  --yellow-100: #fff7b8;
+  --yellow-200: #fff18a;
+  --yellow-300: #ffed72;
+  --yellow-400: #ffea46;
+  --yellow-500: #ffe300;
+  --yellow-600: #e7cc00;
+  --yellow-700: #bea800;
+  --yellow-800: #988600;
+  --yellow-900: #7c6d00;
 
-  --green-50: #adffc5;
-  --green-100: #99ffb6;
-  --green-200: #70ff99;
-  --green-300: #47ff7b;
-  --green-400: #1fff5e;
-  --green-500: #00f545;
-  --green-600: #00cc3a;
-  --green-700: #00a32e;
-  --green-800: #007a23;
-  --green-900: #005217;
+  --green-00: #d1ffdf;
+  --green-50: #b7ffc6;
+  --green-100: #93ffaa;
+  --green-200: #6aff8b;
+  --green-300: #36ff62;
+  --green-400: #0bf23e;
+  --green-500: #00dd31;
+  --green-600: #00c92c;
+  --green-700: #00aa25;
+  --green-800: #00851d;
+  --green-900: #006616;
 
   --orange-50: #fff6ed;
   --orange-100: #ffebd6;

package/scss/variables/_colors.scss

@@ -19,34 +19,31 @@
   --odx-c-focus: var(--cyan-500-15);
   --odx-c-focus-outline: var(--cyan-300);
 
-  --odx-c-selection: var(--cyan-500-15);
+  --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-overlay: var(--white-60);
   --odx-c-seperator: var(--gray-200);
 
   --odx-c-background: var(--gray-50);
   --odx-c-background-content: var(--white);
 
-  --odx-c-control: var(--gray-100);
-  --odx-c-control-hover: var(--gray-400);
-  --odx-c-control-active: var(--gray-500);
-  --odx-c-control-disabled: var(--gray-300);
-  --odx-c-control-text: var(--odx-c-text);
-  --odx-c-control-text-disabled: var(--gray-600);
-
   --odx-c-highlight: var(--cyan-500);
   --odx-c-highlight-hover: var(--cyan-600);
   --odx-c-highlight-active: var(--cyan-700);
   --odx-c-highlight-disabled: var(--odx-c-highlight);
   --odx-c-highlight-text: var(--odx-c-text-inverse);
-  --odx-c-highlight-text-disabled: var(--cyan-700);
+  --odx-c-highlight-text-disabled: var(--cyan-800);
 
   --odx-c-primary: var(--blue-700);
   --odx-c-primary-hover: var(--blue-800);
   --odx-c-primary-active: var(--blue-900);
   --odx-c-primary-disabled: var(--odx-c-primary);
   --odx-c-primary-text: var(--odx-c-text-inverse);
-  --odx-c-primary-text-disabled: var(--blue-500);
+  --odx-c-primary-text-disabled: var(--blue-400);
 
   --odx-c-secondary: var(--gray-300);
   --odx-c-secondary-hover: var(--gray-400);
@@ -60,26 +57,26 @@
   --odx-c-success-active: var(--green-700);
   --odx-c-success-disabled: var(--green-500);
   --odx-c-success-text: var(--odx-c-text);
-  --odx-c-success-text-disabled: var(--green-600);
+  --odx-c-success-text-disabled: var(--green-800);
 
   --odx-c-warning: var(--yellow-500);
   --odx-c-warning-hover: var(--yellow-600);
   --odx-c-warning-active: var(--yellow-700);
   --odx-c-warning-disabled: var(--yellow-500);
   --odx-c-warning-text: var(--odx-c-text);
-  --odx-c-warning-text-disabled: var(--yellow-700);
+  --odx-c-warning-text-disabled: var(--yellow-800);
 
   --odx-c-danger: var(--red-500);
   --odx-c-danger-hover: var(--red-600);
   --odx-c-danger-active: var(--red-700);
   --odx-c-danger-disabled: var(--red-500);
   --odx-c-danger-text: var(--odx-c-text-inverse);
-  --odx-c-danger-text-disabled: var(--red-600);
+  --odx-c-danger-text-disabled: var(--red-800);
 
   --odx-c-confirmation: var(--orange-500);
   --odx-c-confirmation-hover: var(--orange-600);
   --odx-c-confirmation-active: var(--orange-700);
   --odx-c-confirmation-disabled: var(--orange-500);
   --odx-c-confirmation-text: var(--odx-c-text);
-  --odx-c-confirmation-text-disabled: var(--orange-700);
+  --odx-c-confirmation-text-disabled: var(--orange-800);
 }

package/scss/variables/_controls.scss

@@ -0,0 +1,48 @@
+:root {
+  --odx-control-color: var(--odx-c-text);
+  --odx-control-background-color: var(--gray-200);
+  --odx-control-outline-color: var(--gray-300);
+
+  --odx-control-color-hover: var(--odx-c-text);
+  --odx-control-background-color-hover: var(--gray-300);
+  --odx-control-outline-color-hover: var(--gray-400);
+
+  --odx-control-color-selected: var(--odx-c-highlight-text);
+  --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-background-color-disabled: var(--gray-100);
+  --odx-control-outline-color-disabled: transparent;
+
+  --odx-control-color-readonly: var(--odx-control-color);
+  --odx-control-background-color-readonly: transparent;
+  --odx-control-outline-color-readonly: var(--odx-control-color);
+
+  --odx-control-color-error: var(--odx-c-error-text);
+  --odx-control-background-color-error: var(--odx-c-error);
+  --odx-control-outline-color-error: var(--odx-c-error-outline);
+  --odx-control-outline-color-error-hover: var(--odx-c-error-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);
+  --odx-input-control-outline-color-hover: var(--gray-300);
+
+  --odx-input-control-color-disabled: var(--gray-500);
+  --odx-input-control-background-color-disabled: var(--gray-50);
+  --odx-input-control-outline-color-disabled: transparent;
+
+  --odx-input-control-color-readonly: var(--odx-control-color);
+  --odx-input-control-background-color-readonly: transparent;
+  --odx-input-control-outline-color-readonly: var(--odx-control-outline-color);
+
+  --odx-input-control-color-error: var(--odx-c-error-text);
+  --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);
+}

package/scss/variables/_index.scss

@@ -0,0 +1,6 @@
+@forward 'color-palettes';
+@forward 'colors';
+@forward 'controls';
+@forward 'typography';
+@forward 'vertical-rythm';
+@forward 'visuals';