@carbon/styles 0.12.0 → 0.14.0

package/scss/components/text-input/_text-input.scss

@@ -216,7 +216,7 @@
     @include focus-outline('reset');
 
     border-bottom: 1px solid transparent;
-    background-color: $field-disabled;
+    background-color: $field;
     color: $text-disabled;
     cursor: not-allowed;
     // Needed to fix disabled text in Safari #6673

package/scss/components/tile/_tile.scss

@@ -93,7 +93,7 @@
   .#{$prefix}--tile--clickable.#{$prefix}--link--disabled,
   .#{$prefix}--tile--clickable:hover.#{$prefix}--link--disabled {
     display: block;
-    background-color: $layer-disabled;
+    background-color: $layer;
     color: $text-disabled;
   }
 

package/scss/components/toggle/_toggle.scss

@@ -302,7 +302,7 @@
       + .#{$prefix}--toggle__label
       .#{$prefix}--toggle__appearance {
       &::before {
-        background-color: $layer-disabled;
+        background-color: $layer;
       }
 
       &::after {
@@ -581,7 +581,7 @@
     .#{$prefix}--toggle-input--small:disabled:checked
       + .#{$prefix}--toggle-input__label
       .#{$prefix}--toggle__check {
-      fill: $layer-disabled;
+      fill: $layer;
     }
 
     //----------------------------------------------

package/scss/components/toggletip/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'toggletip';
+@use 'toggletip';
+
+@include toggletip.toggletip;

package/scss/components/toggletip/_toggletip.scss

@@ -0,0 +1,81 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../../config' as *;
+@use '../../spacing';
+@use '../../theme';
+@use '../../type';
+@use '../../utilities/button-reset';
+@use '../../utilities/convert';
+@use '../../utilities/custom-property';
+@use '../../utilities/focus-outline';
+
+@mixin toggletip() {
+  .#{$prefix}--toggletip-label {
+    @include type.type-style('label-01');
+
+    margin-right: spacing.$spacing-03;
+
+    color: theme.$text-secondary;
+  }
+
+  .#{$prefix}--toggletip-button {
+    @include button-reset.reset();
+
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--toggletip-button svg {
+    fill: theme.$icon-secondary;
+  }
+
+  .#{$prefix}--toggletip-button:hover svg,
+  .#{$prefix}--toggletip--open .#{$prefix}--toggletip-button svg {
+    fill: theme.$icon-primary;
+  }
+
+  .#{$prefix}--toggletip-button:focus {
+    @include focus-outline.focus-outline;
+  }
+
+  .#{$prefix}--toggletip {
+    @include custom-property.declaration('popover-offset', convert.rem(13px));
+  }
+
+  .#{$prefix}--toggletip-content {
+    @include custom-property.declaration(
+      'button-focus-color',
+      theme.$focus-inverse
+    );
+    @include custom-property.declaration(
+      'link-text-color',
+      theme.$link-inverse
+    );
+    @include custom-property.declaration(
+      'link-hover-text-color',
+      theme.$link-inverse
+    );
+    @include custom-property.declaration(
+      'link-focus-text-color',
+      theme.$focus-inverse
+    );
+    @include type.type-style('body-short-01');
+
+    display: grid;
+    max-width: 18rem;
+    padding: spacing.$spacing-05;
+    row-gap: spacing.$spacing-05;
+  }
+
+  .#{$prefix}--toggletip-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: spacing.$spacing-05;
+  }
+}

package/scss/components/tooltip/_index.scss

@@ -10,3 +10,4 @@
 
 @include tooltip.tooltip;
 @include tooltip.icon-tooltip;
+@include tooltip.definition-tooltip;

package/scss/components/tooltip/_tooltip.scss

@@ -11,6 +11,8 @@
 @use '../../type';
 @use '../../utilities/custom-property';
 @use '../../utilities/convert';
+@use '../../utilities/button-reset';
+@use '../../utilities/focus-outline';
 
 $tooltip-padding-block: custom-property.get-var(
   'tooltip-padding-block',
@@ -37,6 +39,34 @@ $tooltip-padding-inline: custom-property.get-var(
   }
 }
 
+@mixin definition-tooltip {
+  .#{$prefix}--definition-term {
+    @include button-reset.reset;
+
+    border-bottom: 1px dotted theme.$border-strong;
+    border-radius: 0;
+
+    color: theme.$text-primary;
+  }
+
+  .#{$prefix}--definition-term:focus {
+    @include focus-outline.focus-outline;
+
+    border-bottom-color: theme.$border-interactive;
+  }
+
+  .#{$prefix}--definition-term:hover {
+    border-bottom-color: theme.$border-interactive;
+  }
+
+  .#{$prefix}--definition-tooltip {
+    @include type.type-style('body-long-01');
+
+    max-width: convert.rem(176px);
+    padding: convert.rem(8px) convert.rem(16px);
+  }
+}
+
 @mixin icon-tooltip {
   .#{$prefix}--icon-tooltip {
     @include custom-property.declaration(

package/scss/components/ui-shell/header/_header.scss

@@ -36,6 +36,7 @@
   .#{$prefix}--header__action {
     @include button-reset.reset();
 
+    display: inline-flex;
     width: mini-units(6);
     height: mini-units(6);
     border: rem(2px) solid transparent;
@@ -80,6 +81,7 @@
   }
 
   .#{$prefix}--header__action.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
+    align-items: center;
     justify-content: center;
   }