@odx/ui 1.0.0-rc.5 → 1.0.0-rc.7

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

@@ -5,36 +5,65 @@
 @use '../abstract/utils';
 
 .odx-toggle-button {
+  $root: &;
+
   @include dimensions.line-height(1.5, 1);
-  @include motion.transition(background-color color);
+  @include motion.transition(color);
   @include typography.font-size(0);
+  @include typography.font-weight(medium);
   @include utils.vertical-center-content();
 
   color: currentcolor;
-  cursor: pointer;
   overflow: hidden;
   user-select: none;
 
   &.is-active {
-    color: var(--odx-control-color-selected);
+    color: var(--odx-c-highlight-text);
   }
 
   &.is-readonly {
-    color: var(--odx-control-color-readonly);
+    color: inherit;
   }
 
   &.is-disabled {
     color: var(--odx-control-color-disabled);
   }
 
+  &.is-active.is-disabled {
+    color: var(--odx-c-secondary-text-disabled);
+  }
+
   &.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/components/tooltip.component.scss

@@ -0,0 +1,34 @@
+@use '../abstract/dimensions';
+
+:root {
+  --odx-tooltip-background-color: var(--blue-800);
+  --odx-tooltip-color: var(--odx-c-text-inverse);
+  --odx-tooltip-size-small: #{dimensions.get-size(5)};
+  --odx-tooltip-size-medium: #{dimensions.get-size(10)};
+  --odx-tooltip-size-large: #{dimensions.get-size(15)};
+}
+
+.odx-tooltip {
+  $sizes: small, medium, large;
+
+  @include dimensions.padding(0.5);
+
+  background-color: var(--odx-tooltip-background-color);
+  border-radius: var(--odx-v-border-radius);
+  color: var(--odx-tooltip-color);
+  display: block;
+  overflow: hidden;
+
+  @each $size in $sizes {
+    &--#{$size} {
+      max-width: var(--odx-tooltip-size-#{$size});
+    }
+  }
+
+  &-overlay {
+    .odx-cdk-connected-overlay-arrow {
+      background-color: var(--odx-tooltip-background-color);
+      z-index: -1;
+    }
+  }
+}

package/scss/core.scss

@@ -15,6 +15,7 @@ Layout
 */
 
 @use 'layout/base';
+@use 'layout/description-list';
 @use 'layout/layout';
 @use 'layout/helpers';
 @use 'layout/typography';
@@ -25,6 +26,7 @@ Layout
   CDK
 */
 @use 'cdk/active-indicator';
+@use 'cdk/connected-overlay';
 
 /*
   Components
@@ -42,9 +44,11 @@ Layout
 @use 'components/chip.component';
 @use 'components/circular-progress.component';
 @use 'components/content-box.component';
+@use 'components/dropdown.component';
 @use 'components/form-field.component';
 @use 'components/header.component';
 @use 'components/icon.component';
+@use 'components/inline-message.component';
 @use 'components/link.component';
 @use 'components/list.component';
 @use 'components/list-item.component';
@@ -57,6 +61,10 @@ Layout
 @use 'components/radio-group.component';
 @use 'components/rail-navigation.component';
 @use 'components/rail-navigation-item.component';
+@use 'components/select.component.scss';
+@use 'components/slider.component.scss';
+@use 'components/spinbox.component.scss';
 @use 'components/switch.component.scss';
 @use 'components/toggle-button.component';
 @use 'components/toggle-button-group.component';
+@use 'components/tooltip.component';

package/scss/layout/_content.scss

@@ -1,5 +1,6 @@
 @use './typography' as *;
 @use './text-list' as *;
+@use './description-list' as *;
 
 .odx-content {
   @for $i from 1 through 6 {
@@ -17,4 +18,8 @@
   ul {
     @extend .odx-text-list;
   }
+
+  dl {
+    @extend .odx-description-list;
+  }
 }

package/scss/layout/_description-list.scss

@@ -0,0 +1,29 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+
+.odx-description-list {
+  $gap: dimensions.get-size(math.div(8, 24));
+  @include dimensions.margin-y(0.5);
+
+  column-gap: $gap;
+  display: flex;
+  flex: 0 0 100%;
+  flex-wrap: wrap;
+  row-gap: calc(#{$gap} / 2);
+
+  dt,
+  dd {
+    align-items: flex-end;
+    display: inline-flex;
+    flex: 0 0 calc(50% - #{$gap} / 2);
+  }
+
+  dt {
+    @include typography.font-size(-1);
+  }
+
+  dd {
+    font-weight: var(--odx-typography-font-weight-medium);
+  }
+}

package/scss/variables/_color-palettes.scss

@@ -1,6 +1,6 @@
 :root {
   --white: #ffffff;
-  --black: #060a12;
+  --black: #00060f;
 
   --white-5: #{rgba(#ffffff, 5%)};
   --white-60: #{rgba(#ffffff, 60%)};
@@ -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/_controls.scss

@@ -10,9 +10,8 @@
   --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-outline-color-selected-focus: var(--odx-c-highlight-active);
 
-  --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;