@carbon/styles 0.12.0-rc.0 → 0.14.0-rc.0

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;
   }
 

package/scss/fonts/_src.scss

@@ -21,6 +21,57 @@ $-filenames: (
   IBM-Plex-Serif: 'IBMPlexSerif',
 );
 
+$-google-filenames: (
+  IBM-Plex-Mono: (
+    name: 'ibmplexmono',
+    version: 'v7',
+    hash: '-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-otFQ',
+  ),
+  IBM-Plex-Sans-Arabic: (
+    name: 'ibmplexsansarabic',
+    version: 'v5',
+    hash: 'Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys43PW5fslBEg0',
+  ),
+  IBM-Plex-Sans-Devanagari: (
+    name: 'ibmplexsansdevanagari',
+    version: 'v5',
+    hash: 'XRXH3JCMvG4IDoS9SubXB6W-UX5iehIMBFR2-O_PX0j1Uc7wCWQq',
+  ),
+  IBM-Plex-Sans-Hebrew: (
+    name: 'ibmplexsanshebrew',
+    version: 'v5',
+    hash: 'BCa2qYENg9Kw1mpLpO0bGM5lfHAAZHhDXE2v-lgVrjaNzC4',
+  ),
+  IBM-Plex-Sans-Thai-Looped: (
+    name: 'ibmplexsansthailooped',
+    version: 'v5',
+    hash: 'tss_AoJJRAhL3BTrK3r2xxbFhvKfyBB6l7hHT30L9BiKoXOrFCUb6Q',
+  ),
+  IBM-Plex-Sans-Thai: (
+    name: 'ibmplexsansthai',
+    version: 'v5',
+    hash: 'm8JPje1VVIzcq1HzJq2AEdo2Tj_qvLqMBNYgR8BKU4cX',
+  ),
+  IBM-Plex-Sans: (
+    name: 'ibmplexsans',
+    version: 'v9',
+    hash: 'zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw',
+  ),
+  IBM-Plex-Serif: (
+    name: 'ibmplexserif',
+    version: 'v10',
+    hash: 'jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo',
+  ),
+);
+
+@function -get-google-filename($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+
+  @return $map;
+}
+
 @function -get-base-filename($name) {
   @return map.get($-filenames, $name);
 }
@@ -37,44 +88,65 @@ $-filenames: (
 /// @param {List} $formats
 /// @returns List
 @function -default-resolver($name, $weight, $style, $unicode-range, $formats) {
-  $filename: -get-base-filename($name);
+  @if (config.$use-google-fonts) {
+    $filename: -get-google-filename($-google-filenames, $name, 'name');
+    $version: -get-google-filename($-google-filenames, $name, 'version');
+    $hash: -get-google-filename($-google-filenames, $name, 'hash');
 
-  // Special case for weight = Regular (400)
-  @if $weight == Regular {
-    @if $style == italic {
-      $filename: '#{$filename}-Italic';
-    } @else {
-      $filename: '#{$filename}-Regular';
+    $filenames: ();
+
+    @each $format in $formats {
+      $url: 'https://fonts.gstatic.com/s/#{$filename}/#{$version}/#{$hash}';
+
+      // Add extension
+      $url: '#{$url}.#{$format}';
+      $filenames: list.append(
+        $filenames,
+        url('#{$url}') format('#{$format}'),
+        $separator: comma
+      );
     }
+
+    @return $filenames;
   } @else {
-    // Otherwise add weight + optional style (italic)
-    $filename: '#{$filename}-#{$weight}';
-    @if $style == italic {
-      $filename: '#{$filename}Italic';
+    $filename: -get-base-filename($name);
+
+    // Special case for weight = Regular (400)
+    @if $weight == Regular {
+      @if $style == italic {
+        $filename: '#{$filename}-Italic';
+      } @else {
+        $filename: '#{$filename}-Regular';
+      }
+    } @else {
+      // Otherwise add weight + optional style (italic)
+      $filename: '#{$filename}-#{$weight}';
+      @if $style == italic {
+        $filename: '#{$filename}Italic';
+      }
     }
-  }
 
-  $filenames: ();
+    $filenames: ();
 
-  @each $format in $formats {
-    $url: $filename;
+    @each $format in $formats {
+      $url: $filename;
+      @if $unicode-range {
+        $url: '#{config.$font-path}/#{$name}/fonts/split/#{$format}/#{$filename}-#{$unicode-range}';
+      } @else {
+        $url: '#{config.$font-path}/#{$name}/fonts/complete/#{$format}/#{$filename}';
+      }
 
-    @if $unicode-range {
-      $url: '#{config.$font-path}/#{$name}/fonts/split/#{$format}/#{$filename}-#{$unicode-range}';
-    } @else {
-      $url: '#{config.$font-path}/#{$name}/fonts/complete/#{$format}/#{$filename}';
+      // Add extension
+      $url: '#{$url}.#{$format}';
+      $filenames: list.append(
+        $filenames,
+        url('#{$url}') format('#{$format}'),
+        $separator: comma
+      );
     }
 
-    // Add extension
-    $url: '#{$url}.#{$format}';
-    $filenames: list.append(
-      $filenames,
-      url('#{$url}') format('#{$format}'),
-      $separator: comma
-    );
+    @return $filenames;
   }
-
-  @return $filenames;
 }
 
 /// The resolver used for locating the filepaths in `url() format()` values in