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

package/scss/variables/_color-palettes.scss

@@ -1,9 +1,9 @@
 :root {
   --white: #ffffff;
-  --black: #060a12;
+  --black: #00060f;
 
-  --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,70 @@
   --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-15: #{rgba(#002766, 15%)};
+  --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%)};
+  --cyan-500-20: #{rgba(#0091f7, 20%)};
 
   --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,34 @@
   --odx-c-focus: var(--cyan-500-15);
   --odx-c-focus-outline: var(--cyan-300);
 
-  --odx-c-selection: var(--cyan-500-15);
+  --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-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 +60,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,47 @@
+: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-500);
+  --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-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';

package/scss/variables/_typography.scss

@@ -0,0 +1,18 @@
+@use '../abstract/breakpoints';
+
+:root {
+  --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;
+  --odx-typography-font-weight-medium: 500;
+  --odx-typography-font-weight-medium-letter-spacing: -0.19px;
+  --odx-typography-font-weight-bold: bold;
+  --odx-typography-font-weight-bold-letter-spacing: 0;
+  --odx-typography-positive-font-scaling-factor: 1.125;
+  --odx-typography-negative-font-scaling-factor: 1.2;
+
+  @include breakpoints.up(tablet) {
+    --odx-typography-positive-font-scaling-factor: 1.25;
+  }
+}

package/scss/variables/_vertical-rythm.scss

@@ -0,0 +1,3 @@
+:root {
+  --odx-vertical-rythm-base-size: calc(var(--odx-typography-base-line-height) * var(--odx-typography-base-size));
+}

package/scss/variables/_visuals.scss

@@ -1,11 +1,18 @@
 :root {
-  --odx-v-border-radius: calc(var(--odx-t-base-size) * 0.375);
-  --odx-v-border-radius-controls: calc(var(--odx-t-base-size) * 0.19);
-  // --odx-v-shadow-layer-1: 0 2px 6px 0 rgba(var(--blue-500), 0.4);
-  // --odx-v-shadow-layer-2: 0 4px 12px 0 rgba(var(--blue-500), 0.3);
-  // --odx-v-shadow-layer-3: 0 6px 18px 0 rgba(var(--blue-500), 0.2);
-  // --odx-v-shadow-layer-4: 0 8px 24px 0 rgba(var(--blue-500), 0.1);
-  --odx-v-transition-duration: 200ms;
+  --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: 3px;
+
+  --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-focus-outline: 1px solid var(--odx-c-focus-outline);
+  --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);
+  --odx-v-scrollbar-thumb-color-hover: var(--gray-700);
 }

package/scss/_helpers.scss

@@ -1,15 +0,0 @@
-@use 'sass:math';
-@use 'base/mixins' as mx;
-@use 'modules/vertical-rythm' as vr;
-
-.visually-hidden {
-  @include mx.visually-hidden();
-}
-
-.seperator,
-hr {
-  @include vr.height(1, math.div(1, 24));
-
-  background-color: var(--odx-c-seperator);
-  border: 0;
-}

package/scss/base/_mixins.scss

@@ -1,3 +0,0 @@
-@forward 'mixins/container';
-@forward 'mixins/control';
-@forward 'mixins/transition';

package/scss/base/_utils.scss

@@ -1,19 +0,0 @@
-@use 'sass:math';
-
-@function css-pow($value, $exponent) {
-  $css-value: 1;
-
-  @if $exponent < 0 {
-    @for $i from 1 through math.abs($exponent) {
-      $css-value: $css-value + '*1/#{$value}';
-    }
-  }
-
-  @if $exponent > 0 {
-    @for $i from 1 through $exponent {
-      $css-value: $css-value + '*#{$value}';
-    }
-  }
-
-  @return calc(#{$css-value});
-}

package/scss/base/mixins/_container.scss

@@ -1,31 +0,0 @@
-/* stylelint-disable block-closing-brace-newline-after */
-@mixin center-content($inline: false) {
-  @if $inline {
-    display: inline-flex;
-  } @else {
-    display: flex;
-  }
-
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin vertical-center-content($inline: false) {
-  @if $inline {
-    display: inline-flex;
-  } @else {
-    display: flex;
-  }
-
-  align-items: center;
-}
-
-@mixin horizontal-center-content($inline: false) {
-  @if $inline {
-    display: inline-flex;
-  } @else {
-    display: flex;
-  }
-
-  justify-content: center;
-}

package/scss/base/mixins/_control.scss

@@ -1,50 +0,0 @@
-@mixin focus-state($with-background: true) {
-  outline-color: var(--odx-c-focus-outline);
-
-  @if $with-background {
-    background-color: var(--odx-c-focus);
-  }
-}
-
-@mixin interactive($with-background: true, $focus-within: false) {
-  cursor: pointer;
-  outline: var(--odx-v-focus-outline);
-  outline-color: transparent;
-  outline-offset: -1px;
-  user-select: none;
-
-  &:disabled,
-  &.is-disabled {
-    cursor: not-allowed;
-  }
-
-  @if $focus-within {
-    &.has-focus {
-      @include focus-state($with-background);
-    }
-
-    &:focus-within:has(:focus-visible) {
-      @include focus-state($with-background);
-    }
-  } @else {
-    &:focus-visible {
-      @include focus-state($with-background);
-    }
-  }
-}
-
-@mixin non-interactive() {
-  pointer-events: none;
-  user-select: none;
-}
-
-@mixin visually-hidden() {
-  appearance: none;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  outline: none !important;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}

package/scss/base/mixins/_transition.scss

@@ -1,10 +0,0 @@
-@mixin transition($properties, $delay: 0ms) {
-  $props: ();
-
-  @each $prop in $properties {
-    $props: append($props, $prop, comma);
-  }
-
-  transition: all var(--odx-v-transition-duration) $delay var(--odx-v-transition-easing-fn);
-  transition-property: $props;
-}

package/scss/components/button/button.component.scss

@@ -1,94 +0,0 @@
-@use 'sass:math';
-@use '../../modules/vertical-rythm' as vr;
-@use '../../modules/typography' as t;
-@use '../../base/mixins' as mx;
-@use '../avatar/avatar.component' as ac;
-
-.odx-button {
-  $variants: secondary, primary, highlight, success, danger, confirmation;
-
-  @extend .odx-button--secondary;
-  @include t.prevent-text-overflow();
-  @include mx.transition(background-color color outline);
-  @include mx.center-content(true);
-  @include mx.interactive($with-background: false);
-  @include vr.height(2, 1.5);
-  @include vr.padding-x(0.5);
-
-  border-radius: var(--odx-v-border-radius-controls);
-  font-weight: var(--odx-t-font-weight-medium);
-  min-width: vr.get-size(1.5);
-  outline-width: 2px;
-
-  &:not(:has(> .odx-icon, > .odx-avatar)) {
-    min-width: vr.get-size(3);
-  }
-
-  > .odx-icon {
-    @include vr.margin-x(-0.25);
-  }
-
-  > .odx-icon[alignLeft] {
-    @include vr.margin(0.25, right);
-  }
-
-  > .odx-icon[alignRight] {
-    @include vr.margin(0.25, left);
-  }
-
-  > .odx-avatar {
-    @include vr.margin-x(-0.5);
-    @include ac.avatar-size(2, math.div(32, 24), 0, 1);
-  }
-
-  &--highlight:focus-visible {
-    outline-color: var(--blue-400);
-  }
-
-  @each $variant in $variants {
-    &--#{$variant} {
-      background-color: var(--odx-c-#{$variant});
-      color: var(--odx-c-#{$variant}-text);
-
-      &:hover {
-        background-color: var(--odx-c-#{$variant}-hover);
-      }
-
-      &:active {
-        background-color: var(--odx-c-#{$variant}-active);
-      }
-
-      &:disabled,
-      &.is-disabled {
-        background-color: var(--odx-c-#{$variant}-disabled);
-        color: var(--odx-c-#{$variant}-text-disabled);
-      }
-    }
-  }
-
-  &--ghost {
-    background-color: transparent;
-    color: var(--odx-c-link);
-    outline-width: 1px;
-
-    &:hover {
-      background-color: var(--blue-700-5);
-      color: var(--odx-c-link-hover);
-    }
-
-    &:active {
-      color: var(--odx-c-link-active);
-    }
-
-    &:focus-visible,
-    &:active {
-      background-color: var(--odx-c-focus);
-    }
-
-    &:disabled,
-    &.is-disabled {
-      background-color: transparent;
-      color: var(--odx-c-link-disabled);
-    }
-  }
-}

package/scss/components/checkbox/checkbox.component.scss

@@ -1,130 +0,0 @@
-@use 'sass:math';
-@use '../../modules/vertical-rythm' as vr;
-@use '../../modules/typography' as t;
-@use '../../base/mixins' as mx;
-@use '../../helpers';
-
-:root {
-  --odx-checkbox-color: var(--odx-c-highlight-text);
-  --odx-checkbox-color-disabled: var(--odx-c-control-text-disabled);
-
-  --odx-checkbox-background-color: var(--odx-c-control);
-  --odx-checkbox-background-color-active: var(--odx-c-highlight);
-  --odx-checkbox-background-color-disabled: var(--odx-c-control-disabled);
-  --odx-checkbox-background-color-readonly: var(--white);
-
-  --odx-checkbox-border-color: var(--odx-c-control-disabled);
-  --odx-checkbox-border-color-active: var(--odx-c-highlight);
-  --odx-checkbox-border-color-hover: var(--odx-c-control-hover);
-  --odx-checkbox-border-color-readonly: var(--odx-c-control-disabled);
-
-  --odx-checkbox-label-color: var(--odx-c-text);
-  --odx-checkbox-label-color-disabled: var(--odx-c-text-disabled);
-}
-
-.odx-checkbox {
-  $root: &;
-
-  color: var(--odx-checkbox-label-color);
-  display: block;
-
-  &.is-disabled,
-  &.is-readonly {
-    @include mx.non-interactive();
-  }
-
-  &.is-disabled {
-    color: var(--odx-checkbox-label-color-disabled);
-  }
-
-  &__label {
-    @include mx.interactive($focus-within: true);
-    @include vr.line-height(1);
-    @include mx.transition(background-color color outline);
-    @include t.font-size(0);
-
-    border-radius: var(--odx-v-border-radius-controls);
-    color: inherit;
-    cursor: pointer;
-    display: inline-flex;
-    min-height: vr.get-size(1);
-    padding: 0 2px;
-    vertical-align: top;
-  }
-
-  &__input {
-    @extend .visually-hidden;
-  }
-
-  &__indicator {
-    @include vr.container(1, math.div(20, 24));
-    @include mx.transition(background-color border-color);
-
-    background-color: var(--odx-checkbox-background-color);
-    border: 1px solid var(--odx-checkbox-border-color);
-    border-radius: var(--odx-v-border-radius-controls);
-    box-sizing: border-box;
-    color: var(--odx-checkbox-color);
-    flex: 0 0 auto;
-
-    > .odx-icon {
-      $checkmark-size: math.div(18, 24);
-      @include vr.container($checkmark-size);
-
-      display: none;
-      font-size: vr.get-size($checkmark-size);
-    }
-
-    #{$root}:hover & {
-      border-color: var(--odx-checkbox-border-color-hover);
-    }
-
-    #{$root}.is-active &,
-    #{$root}__input:indeterminate ~ &,
-    #{$root}__input:checked ~ & {
-      background-color: var(--odx-checkbox-background-color-active);
-      border-color: var(--odx-checkbox-border-color-active);
-    }
-
-    #{$root}.has-error & {
-      background-color: var(--odx-c-error);
-      border-color: var(--odx-c-error-outline);
-      color: var(--odx-c-error-text);
-    }
-
-    #{$root}.has-error:hover & {
-      border-color: var(--odx-c-error-outline-hover);
-    }
-
-    #{$root}.is-disabled & {
-      background-color: var(--odx-checkbox-background-color-disabled);
-      border-color: transparent;
-      color: var(--odx-checkbox-color-disabled);
-    }
-
-    #{$root}.is-readonly & {
-      background-color: var(--odx-checkbox-background-color-readonly);
-      border-color: var(--odx-checkbox-border-color-readonly);
-      color: inherit;
-    }
-  }
-
-  &__content {
-    @include vr.margin(0.5, left);
-
-    padding-left: 2px;
-
-    &:empty {
-      margin: 0;
-      padding: 0;
-    }
-  }
-
-  &.is-active,
-  &__input:indeterminate,
-  &__input:checked {
-    ~ .odx-checkbox__indicator > .odx-icon {
-      display: block;
-    }
-  }
-}