@odx/ui 1.0.0-rc.1

package/scss/components/main-menu/main-menu.component.scss

@@ -0,0 +1,117 @@
+@use 'sass:math';
+@use '../../modules/breakpoints' as br;
+@use '../../modules/vertical-rythm' as vr;
+@use '../../modules/typography' as t;
+@use '../../base/mixins' as mx;
+@use '../button/button.component';
+@use 'components/main-menu-button.component';
+@use 'components/main-menu-item.component';
+
+:root {
+  --odx-main-menu-max-width: 100vw;
+  --odx-main-menu-background-color: var(--odx-c-primary);
+  --odx-main-menu-text-color: var(--odx-c-primary-text);
+  --odx-main-menu-highlight-color: var(--odx-c-highlight);
+
+  @include br.up(phone) {
+    --odx-main-menu-max-width: min(100vw, 384px);
+  }
+}
+
+.odx-main-menu {
+  --odx-area-header-title-color: var(--odx-main-menu-highlight-color);
+  --odx-area-header-subtitle-color: var(--odx-c-text-inverse);
+
+  &__inner {
+    background-color: var(--odx-main-menu-background-color);
+    color: var(--odx-main-menu-text-color);
+    display: grid;
+    grid-template-rows: auto auto 1fr auto auto;
+    height: 100%;
+    left: 0;
+    max-height: 100vh;
+    max-width: var(--odx-main-menu-max-width);
+    position: fixed;
+    top: 0;
+    z-index: 9000;
+  }
+
+  &__overlay {
+    background-color: var(--odx-c-overlay);
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 8999;
+  }
+
+  &__actions {
+    @include vr.height(2);
+    @include vr.margin-x(0.5);
+  }
+
+  &__header,
+  &__footer {
+    max-width: inherit;
+  }
+
+  &__close {
+    @extend .odx-button--ghost;
+
+    align-self: flex-start;
+    color: inherit;
+  }
+
+  &__content {
+    @include vr.padding-x(0.5);
+
+    display: flex;
+    flex-direction: column;
+    max-width: calc(var(--odx-main-menu-max-width) + vr.get-size(2));
+    min-height: vr.get-size(5);
+    overflow: auto;
+
+    > * {
+      flex: 0 0 auto;
+    }
+  }
+
+  &__info {
+    @extend .odx-text;
+    @include vr.padding-x(1);
+    @include vr.padding-y(0.5);
+
+    column-gap: vr.get-size(1);
+    display: flex;
+    flex-wrap: wrap;
+
+    @include br.up(tablet) {
+      @include vr.padding-y(1);
+    }
+  }
+
+  &__footer {
+    @include mx.center-content();
+    @include vr.height(1);
+    @include vr.padding-x(1);
+    @include vr.padding(math.div(16, 24), top);
+    @include vr.padding(math.div(32, 24), bottom);
+
+    display: grid;
+    gap: vr.get-size(0.5);
+    grid-template-columns: 1fr auto;
+    user-select: none;
+
+    > .odx-text {
+      @include vr.line-height(math.div(12, 24));
+
+      opacity: 0.3;
+      word-wrap: break-word;
+    }
+  }
+
+  .odx-link:visited {
+    color: var(--odx-c-link);
+  }
+}

package/scss/components/radio-group/_radio-group.component.scss

@@ -0,0 +1,145 @@
+@use 'sass:math';
+@use '../../modules/vertical-rythm' as vr;
+@use '../../modules/typography' as t;
+@use '../../base/mixins' as mx;
+
+:root {
+  --odx-radio-button-color: var(--odx-c-highlight-text);
+  --odx-radio-button-color-disabled: var(--odx-c-control-text-disabled);
+
+  --odx-radio-button-background-color: var(--odx-c-control);
+  --odx-radio-button-background-color-active: var(--odx-c-highlight);
+  --odx-radio-button-background-color-disabled: var(--odx-c-control-disabled);
+  --odx-radio-button-background-color-readonly: var(--white);
+
+  --odx-radio-button-border-color: var(--odx-c-control-disabled);
+  --odx-radio-button-border-color-active: var(--odx-c-highlight);
+  --odx-radio-button-border-color-hover: var(--odx-c-control-hover);
+  --odx-radio-button-border-color-readonly: var(--odx-c-control-disabled);
+
+  --odx-radio-button-label-color: var(--odx-c-text);
+  --odx-radio-button-label-color-disabled: var(--odx-c-text-disabled);
+}
+
+.odx-radio-group {
+  @include vr.padding-y(0.5);
+
+  display: block;
+
+  &--horizontal {
+    column-gap: vr.get-size(0.5);
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.odx-radio-button {
+  $root: &;
+
+  color: var(--odx-radio-button-label-color);
+  display: block;
+
+  &.is-disabled,
+  &.is-readonly {
+    @include mx.non-interactive();
+  }
+
+  &.is-disabled {
+    color: var(--odx-radio-button-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);
+    border-radius: vr.get-size(0.5);
+    border-bottom-right-radius: var(--odx-v-border-radius-controls);
+    border-top-right-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 {
+    @include mx.visually-hidden();
+  }
+
+  &__indicator {
+    @include vr.container(1, math.div(20, 24));
+    @include mx.transition(background-color border-color);
+    @include mx.center-content();
+
+    background-color: var(--odx-radio-button-background-color);
+    border: 1px solid var(--odx-radio-button-border-color);
+    border-radius: 50%;
+    box-sizing: border-box;
+    color: var(--odx-radio-button-color);
+    flex: 0 0 auto;
+
+    &::before {
+      @include mx.transition(transform);
+      @include vr.container(math.div(4, 24));
+
+      background-color: currentcolor;
+      border-radius: 50%;
+      content: '';
+      transform: scale(0);
+    }
+
+    #{$root}:hover & {
+      border-color: var(--odx-radio-button-border-color-hover);
+    }
+
+    #{$root}__input:checked ~ & {
+      background-color: var(--odx-radio-button-background-color-active);
+      border-color: var(--odx-radio-button-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-radio-button-background-color-disabled);
+      border-color: transparent;
+      color: var(--odx-radio-button-color-disabled);
+    }
+
+    #{$root}.is-readonly & {
+      background-color: var(--odx-radio-button-background-color-readonly);
+      border-color: var(--odx-radio-button-border-color-readonly);
+      color: inherit;
+    }
+  }
+
+  &__content {
+    @include vr.margin(0.5, left);
+
+    padding-left: 2px;
+
+    &:empty {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &__input:checked ~ .odx-radio-button__indicator::before {
+    transform: scale(1);
+  }
+
+  &--no-label .odx-radio-button__label {
+    border-radius: vr.get-size(0.5);
+  }
+}

package/scss/core.scss

@@ -0,0 +1,43 @@
+@use 'base/reset';
+@use 'helpers';
+
+/*
+  Variables
+*/
+@use 'variables/color-palettes';
+@use 'variables/colors';
+@use 'variables/visuals';
+
+/*
+  Modules
+*/
+@use 'modules/breakpoints' with (
+  $breakpoints: (
+    'phone-s': 360px,
+    'phone': 420px,
+    'tablet': 768px,
+    'desktop-s': 960px,
+    'desktop': 1200px,
+  )
+);
+@use 'modules/layout' as layout;
+@use 'modules/typography' as t;
+@use 'modules/vertical-rythm' as vr;
+
+/*
+  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';

package/scss/modules/_breakpoints.scss

@@ -0,0 +1,80 @@
+/* stylelint-disable block-closing-brace-newline-after */
+@use 'sass:list';
+@use 'sass:map';
+
+$breakpoints: () !default;
+
+@function get-breakpoint-names() {
+  @return map.keys($breakpoints);
+}
+
+@function get-value($breakpoint) {
+  @if $breakpoint and not map.has-key($breakpoints, $breakpoint) {
+    @error "Invalid breakpoint, `#{$breakpoint}` doesn't exist. Choose one of #{map.keys(breakpoints.$values)}.";
+  }
+
+  @return map.get($breakpoints, $breakpoint);
+}
+
+@function get-next-value($breakpoint) {
+  @if $breakpoint and not map.has-key($breakpoints, $breakpoint) {
+    @error "Invalid breakpoint, `#{$breakpoint}` doesn't exist. Choose one of #{map.keys(breakpoints.$values)}.";
+  }
+
+  $keys: get-breakpoint-names();
+  $index: list.index($keys, $breakpoint);
+
+  @return if($index < length($keys), list.nth($keys, $index + 1), null);
+}
+
+@function get-min-value($breakpoint) {
+  $value: get-value($breakpoint);
+
+  @return if($value != 0, $value, null);
+}
+
+@function get-max-value($breakpoint) {
+  $value: get-value($breakpoint);
+
+  @return if($value > 0, $value - 1, null);
+}
+
+@mixin up($breakpoint) {
+  $min: get-min-value($breakpoint);
+
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin down($breakpoint) {
+  $max: get-max-value($breakpoint);
+
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin only($breakpoint) {
+  $min: get-min-value($breakpoint);
+  $next: get-next-value($breakpoint);
+  $max: get-max-value($breakpoint);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include up($token) {
+      @content;
+    }
+  }
+}

package/scss/modules/_layout.scss

@@ -0,0 +1,108 @@
+@use './breakpoints';
+@use './vertical-rythm' as vr;
+
+$columns: 12 !default;
+
+@function create-selector($value, $match: '~') {
+  @return "[odxLayout#{$match}='#{$value}']";
+}
+
+:root {
+  --odx-grid-gutter: #{vr.get-size(1)};
+}
+
+#{create-selector(grid)} {
+  display: grid;
+  gap: var(--odx-grid-gutter);
+  grid-template-columns: repeat(12, 1fr);
+
+  @each $breakpoint in breakpoints.get-breakpoint-names() {
+    &#{create-selector(\@#{$breakpoint}, '*')} {
+      grid-template-columns: 12fr;
+    }
+  }
+
+  @for $index from 1 through $columns {
+    &#{create-selector($index)} {
+      grid-template-columns: repeat(calc($columns / $index), 1fr);
+    }
+
+    #{create-selector($index)} {
+      grid-column: span $index / span $index;
+    }
+
+    #{create-selector(offset-#{$index})} {
+      grid-column-start: $index !important;
+    }
+  }
+
+  @each $breakpoint in breakpoints.get-breakpoint-names() {
+    @include breakpoints.up($breakpoint) {
+      @for $index from 1 through $columns {
+        &#{create-selector(#{$index}\@#{$breakpoint})} {
+          grid-template-columns: repeat(calc($columns / $index), 1fr);
+        }
+
+        #{create-selector(#{$index}\@#{$breakpoint})} {
+          grid-column: span $index / span $index;
+        }
+
+        #{create-selector(offset-#{$index}\@#{$breakpoint})} {
+          grid-column-start: $index !important;
+        }
+      }
+
+      #{create-selector(first\@#{$breakpoint})} {
+        order: -1;
+      }
+
+      #{create-selector(last\@#{$breakpoint})} {
+        order: $columns;
+      }
+    }
+  }
+
+  &#{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;
+  }
+}

package/scss/modules/_typography.scss

@@ -0,0 +1,161 @@
+/* stylelint-disable block-closing-brace-newline-after */
+@use 'sass:math';
+@use 'breakpoints' as br;
+@use 'vertical-rythm' as vr;
+@use '../base/utils' as utils;
+
+$base-size: 16px;
+$base-line-height: 1.5;
+
+@mixin font-size($size: 1) {
+  @if math.round($size) != $size {
+    @error '$size must me an integer';
+  }
+
+  @if $size < 0 {
+    font-size: calc(var(--odx-t-base-size) * utils.css-pow(var(--odx-t-negative-font-scaling-factor), $size));
+  } @else {
+    font-size: calc(var(--odx-t-base-size) * utils.css-pow(var(--odx-t-positive-font-scaling-factor), $size));
+  }
+}
+
+@mixin prevent-text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:root {
+  --odx-t-base-size: #{$base-size};
+  --odx-t-base-line-height: #{$base-line-height};
+  --odx-t-font-weight-normal: normal;
+  --odx-t-font-weight-medium: 500;
+  --odx-t-font-weight-bold: bold;
+  --odx-t-positive-font-scaling-factor: 1.125;
+  --odx-t-negative-font-scaling-factor: 1.2;
+
+  @include br.up(tablet) {
+    --odx-t-positive-font-scaling-factor: 1.25;
+  }
+}
+
+@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 font-size(0);
+  @include vr.line-height(1);
+
+  color: var(--odx-c-text);
+  font-family: Pangea, sans-serif;
+  font-weight: var(--odx-t-font-weight-normal);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.odx-title,
+.odx-subtitle {
+  color: var(--odx-c-headline);
+  font-weight: var(--odx-t-font-weight-bold);
+}
+
+.odx-subtitle {
+  font-weight: var(--odx-t-font-weight-normal);
+}
+
+h1,
+.odx-title--1 {
+  @include font-size(5);
+  @include vr.line-height(2, math.div(40, 24));
+
+  @include br.up(tablet) {
+    @include vr.line-height(3, math.div(64, 24));
+  }
+}
+
+h2,
+.odx-title--2 {
+  @include font-size(4);
+  @include vr.line-height(2, 1.5);
+
+  @include br.up(tablet) {
+    @include vr.line-height(3, math.div(54, 24));
+  }
+}
+
+h3,
+.odx-title--3 {
+  @include font-size(3);
+  @include vr.line-height(2, math.div(32, 24));
+
+  @include br.up(tablet) {
+    @include vr.line-height(2, math.div(42, 24));
+  }
+}
+
+h4,
+.odx-title--4 {
+  @include font-size(2);
+  @include vr.line-height(2, math.div(30, 24));
+}
+
+h5,
+.odx-title--5 {
+  @include font-size(1);
+  @include vr.line-height(1);
+}
+
+h6,
+.odx-title--6 {
+  @include font-size(0);
+  @include vr.line-height(1);
+}
+
+p,
+.odx-text {
+  @include vr.line-height(1);
+
+  font-weight: var(--odx-t-font-weight-normal);
+
+  &--small {
+    @include font-size(-1);
+    @include vr.line-height(1, math.div(20, 24));
+  }
+
+  &--xsmall {
+    @include font-size(-2);
+    @include vr.line-height(1, math.div(16, 24));
+  }
+}
+
+.odx-fs-normal {
+  font-weight: var(--odx-t-font-weight-normal);
+}
+
+b,
+strong,
+.odx-fs-bold {
+  font-weight: var(--odx-t-font-weight-bold);
+}