@odx/ui 1.0.0-rc.4 → 1.0.0-rc.6

package/scss/components/toggle-button.component.scss

@@ -5,51 +5,65 @@
 @use '../abstract/utils';
 
 .odx-toggle-button {
-  @include dimensions.height(1);
-  @include motion.transition(background-color color outline);
+  $root: &;
+
+  @include dimensions.line-height(1.5, 1);
+  @include motion.transition(color);
   @include typography.font-size(0);
-  @include utils.interactive($focus-within: true);
+  @include typography.font-weight(medium);
+  @include utils.vertical-center-content();
 
-  border-radius: 1px;
-  color: var(--odx-control-color);
-  display: block;
-  display: inline-flex;
+  color: currentcolor;
   overflow: hidden;
-  vertical-align: top;
-
-  &.is-active,
-  &.is-active:focus-within {
-    --odx-c-focus-outline: var(--cyan-700);
+  user-select: none;
 
-    background-color: var(--odx-control-background-color-selected);
-    color: var(--odx-control-color-selected);
+  &.is-active {
+    color: var(--odx-c-highlight-text);
   }
 
-  &.is-disabled {
-    background-color: transparent;
-    color: var(--odx-input-control-color-disabled);
+  &.is-readonly {
+    color: inherit;
   }
 
-  &.is-readonly {
-    background-color: var(--odx-control-background-color-readonly);
-    color: var(--odx-control-color-readonly);
-    cursor: default;
+  &.is-disabled {
+    color: var(--odx-control-color-disabled);
   }
 
   &.is-active.is-disabled {
-    background-color: var(--odx-control-background-color-disabled);
-    color: var(--odx-control-color-disabled);
+    color: var(--odx-c-secondary-text-disabled);
   }
 
-  &.is-active.is-readonly {
-    background-color: var(--odx-control-background-color-readonly);
-    color: var(--odx-control-color-readonly);
-    outline-color: var(--odx-control-outline-color-readonly);
+  &.is-disabled,
+  &.is-readonly {
+    pointer-events: none;
   }
 
   &__label {
+    @include motion.transition(background-color outline-color);
     @include dimensions.padding-x(math.div(1, 3));
 
-    cursor: inherit;
+    border-radius: var(--odx-toggle-button-border-radius);
+    cursor: pointer;
+
+    #{$root}-group:not(.is-active) & {
+      @include utils.interactive($focus-within: true);
+
+      background-color: var(--blue-700-5);
+
+      &:hover {
+        background-color: var(--blue-700-10);
+      }
+    }
+
+    #{$root}-group.is-active &:hover {
+      background-color: var(--blue-700-5);
+    }
+
+    #{$root}.is-readonly &,
+    #{$root}.is-disabled &,
+    #{$root}-group.is-active &,
+    #{$root}-group.has-error & {
+      background-color: transparent;
+    }
   }
 }

package/scss/core.scss

@@ -18,6 +18,13 @@ Layout
 @use 'layout/layout';
 @use 'layout/helpers';
 @use 'layout/typography';
+@use 'layout/text-list';
+@use 'layout/content';
+
+/*
+  CDK
+*/
+@use 'cdk/active-indicator';
 
 /*
   Components
@@ -39,6 +46,8 @@ Layout
 @use 'components/header.component';
 @use 'components/icon.component';
 @use 'components/link.component';
+@use 'components/list.component';
+@use 'components/list-item.component';
 @use 'components/loading-spinner.component.scss';
 @use 'components/logo.component';
 @use 'components/main-menu.component';
@@ -46,6 +55,9 @@ Layout
 @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/slider.component.scss';
 @use 'components/switch.component.scss';
 @use 'components/toggle-button.component';
 @use 'components/toggle-button-group.component';

package/scss/layout/_content.scss

@@ -0,0 +1,20 @@
+@use './typography' as *;
+@use './text-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;
+  }
+}

package/scss/layout/_helpers.scss

@@ -58,22 +58,6 @@ html body {
     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);
   }

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

@@ -34,25 +34,21 @@ html body {
   font-weight: var(--odx-typography-font-weight-normal);
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 .odx-title,
-.odx-subtitle {
+[class*='odx-title-'] {
   @include typography.font-weight(bold);
 
   color: var(--odx-c-headline);
 }
 
-.odx-subtitle {
-  font-weight: var(--odx-typography-font-weight-normal);
+.odx-subtitle,
+[class*='odx-subtitle-'] {
+  @extend .odx-title;
+  @include typography.font-weight(normal);
 }
 
-h1,
-.odx-title--1 {
+.odx-title-1,
+.odx-subtitle-1 {
   @include dimensions.line-height(2, math.div(40, 24));
   @include typography.font-size(5);
 
@@ -61,8 +57,8 @@ h1,
   }
 }
 
-h2,
-.odx-title--2 {
+.odx-title-2,
+.odx-subtitle-2 {
   @include dimensions.line-height(2, 1.5);
   @include typography.font-size(4);
 
@@ -71,8 +67,8 @@ h2,
   }
 }
 
-h3,
-.odx-title--3 {
+.odx-title-3,
+.odx-subtitle-3 {
   @include dimensions.line-height(2, math.div(32, 24));
   @include typography.font-size(3);
 
@@ -81,25 +77,24 @@ h3,
   }
 }
 
-h4,
-.odx-title--4 {
+.odx-title-4,
+.odx-subtitle-4 {
   @include dimensions.line-height(2, math.div(30, 24));
   @include typography.font-size(2);
 }
 
-h5,
-.odx-title--5 {
+.odx-title-5,
+.odx-subtitle-5 {
   @include dimensions.line-height(1);
   @include typography.font-size(1);
 }
 
-h6,
-.odx-title--6 {
+.odx-title-6,
+.odx-subtitle-6 {
   @include dimensions.line-height(1);
   @include typography.font-size(0);
 }
 
-p,
 .odx-text {
   @include dimensions.line-height(1);
 

package/scss/reset.scss

@@ -5,6 +5,10 @@
 
 * {
   box-sizing: border-box;
+
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 html,

package/scss/variables/_color-palettes.scss

@@ -30,7 +30,6 @@
   --blue-700-5: #{rgba(#002766, 5%)};
   --blue-700-10: #{rgba(#002766, 10%)};
   --blue-700-15: #{rgba(#002766, 15%)};
-  --blue-700-25: #{rgba(#002766, 25%)};
   --blue-800-30: #{rgba(#001433, 30%)};
 
   --cyan-50: #cbe9ff;

package/scss/variables/_colors.scss

@@ -19,6 +19,9 @@
   --odx-c-focus: var(--cyan-500-15);
   --odx-c-focus-outline: var(--cyan-300);
 
+  --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);

package/scss/variables/_controls.scss

@@ -11,7 +11,7 @@
   --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-color-disabled: var(--gray-500);
   --odx-control-background-color-disabled: var(--gray-100);
   --odx-control-outline-color-disabled: transparent;
 
@@ -27,7 +27,6 @@
   --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);

package/scss/variables/_visuals.scss

@@ -5,10 +5,10 @@
   --odx-v-backdrop-blur: 3px;
   --odx-v-backdrop-box-shadow-layer-2: 0 4px 12px 0 var(--odx-c-backdrop-box-shadow);
 
-  --odx-v-transition-duration: 200ms;
+  --odx-v-transition-duration: 250ms;
   --odx-v-transition-easing-fn: ease;
-  --odx-v-outline: 1px solid transparent;
-  --odx-v-outline-offset: -1px;
+  --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);