@odx/ui 1.0.0-rc.1

package/scss/modules/_vertical-rythm.scss

@@ -0,0 +1,78 @@
+@use 'sass:math';
+
+@function get-size($factor) {
+  $factor: math.div(math.ceil($factor * 1e4), 1e4);
+
+  @return calc(var(--odx-vr-base-size) * $factor);
+}
+
+@mixin margin($factor, $directions: ('top', 'right', 'bottom', 'left')) {
+  @each $side in $directions {
+    margin-#{$side}: get-size($factor);
+  }
+}
+
+@mixin margin-x($factor: 1) {
+  $spacing: calc(var(--odx-vr-base-size) * $factor);
+
+  @include margin($factor, ('right', 'left'));
+}
+
+@mixin margin-y($factor: 1) {
+  $spacing: calc(var(--odx-vr-base-size) * $factor);
+
+  @include margin($factor, ('top', 'bottom'));
+}
+
+@mixin padding($factor, $directions: ('top', 'right', 'bottom', 'left')) {
+  @each $side in $directions {
+    padding-#{$side}: get-size($factor);
+  }
+}
+
+@mixin padding-x($factor: 1) {
+  $spacing: calc(var(--odx-vr-base-size) * $factor);
+
+  @include padding($factor, ('right', 'left'));
+}
+
+@mixin padding-y($factor: 1) {
+  $spacing: calc(var(--odx-vr-base-size) * $factor);
+
+  @include padding($factor, ('top', 'bottom'));
+}
+
+@mixin container($factor: 1, $line-height-factor: null) {
+  @if $line-height-factor == null {
+    $line-height-factor: $factor;
+  }
+
+  @include margin-y(calc(($factor - $line-height-factor) / 2));
+
+  aspect-ratio: 1;
+  width: get-size($line-height-factor);
+}
+
+@mixin height($factor: 1, $line-height-factor: null) {
+  @if $line-height-factor == null {
+    $line-height-factor: $factor;
+  }
+
+  @include margin-y(calc(($factor - $line-height-factor) / 2));
+
+  height: get-size($line-height-factor);
+}
+
+@mixin line-height($factor: 1, $line-height-factor: null) {
+  @if $line-height-factor == null {
+    $line-height-factor: $factor;
+  }
+
+  @include padding-y(calc(($factor - $line-height-factor) / 2));
+
+  line-height: get-size($line-height-factor);
+}
+
+:root {
+  --odx-vr-base-size: calc(var(--odx-t-base-line-height) * var(--odx-t-base-size));
+}

package/scss/variables/_color-palettes.scss

@@ -0,0 +1,90 @@
+:root {
+  --white: #ffffff;
+  --black: #060a12;
+
+  --white-5: rgba(255 255 255 / 5%);
+  --white-60: rgba(255 255 255 / 60%);
+
+  --gray-50: #f5f7fa;
+  --gray-100: #e9eef4;
+  --gray-200: #dde5ee;
+  --gray-300: #c7d3e0;
+  --gray-400: #b2c1d2;
+  --gray-500: #9eb0c2;
+  --gray-600: #8b9fb1;
+  --gray-700: #798ea0;
+  --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-900: #000205;
+
+  --blue-700-5: rgba(0 45 116 / 5%);
+  --blue-700-10: rgba(0 45 116 / 10%);
+
+  --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-500-15: rgb(34 170 255 / 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;
+
+  --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;
+
+  --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;
+
+  --orange-50: #fff6ed;
+  --orange-100: #ffebd6;
+  --orange-200: #ffd4a8;
+  --orange-300: #ffd4a8;
+  --orange-400: #ffa64d;
+  --orange-500: #ff8f1f;
+  --orange-600: #f57a00;
+  --orange-700: #cc6600;
+  --orange-800: #a35200;
+  --orange-900: #7a3d00;
+}

package/scss/variables/_colors.scss

@@ -0,0 +1,85 @@
+:root {
+  --odx-c-headline: var(--blue-700);
+
+  --odx-c-text: var(--blue-700);
+  --odx-c-text-inverse: var(--white);
+  --odx-c-text-disabled: var(--gray-500);
+
+  --odx-c-link: var(--odx-c-highlight);
+  --odx-c-link-hover: var(--odx-c-highlight-hover);
+  --odx-c-link-active: var(--odx-c-highlight-active);
+  --odx-c-link-disabled: var(--odx-c-text-disabled);
+  --odx-c-link-visited: var(--blue-600);
+
+  --odx-c-error: var(--red-00);
+  --odx-c-error-outline: var(--red-50);
+  --odx-c-error-outline-hover: var(--red-100);
+  --odx-c-error-text: var(--red-600);
+
+  --odx-c-focus: var(--cyan-500-15);
+  --odx-c-focus-outline: var(--cyan-300);
+
+  --odx-c-selection: var(--cyan-500-15);
+
+  --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-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-secondary: var(--gray-300);
+  --odx-c-secondary-hover: var(--gray-400);
+  --odx-c-secondary-active: var(--gray-500);
+  --odx-c-secondary-disabled: var(--gray-300);
+  --odx-c-secondary-text: var(--odx-c-text);
+  --odx-c-secondary-text-disabled: var(--gray-700);
+
+  --odx-c-success: var(--green-500);
+  --odx-c-success-hover: var(--green-600);
+  --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-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-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-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);
+}

package/scss/variables/_visuals.scss

@@ -0,0 +1,11 @@
+: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-transition-easing-fn: ease;
+  --odx-v-focus-outline: 1px solid var(--odx-c-focus-outline);
+}