@carbon/styles 0.11.0-rc.0 → 0.13.0-rc.0

package/scss/components/tag/_tokens.scss

@@ -25,11 +25,11 @@ $tag-background-red: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$red-80,
+      value: colors.$red-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$red-80,
+      value: colors.$red-70,
     ),
   ),
 ) !default;
@@ -47,11 +47,11 @@ $tag-color-red: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$red-30,
+      value: colors.$red-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$red-30,
+      value: colors.$red-20,
     ),
   ),
 ) !default;
@@ -69,11 +69,11 @@ $tag-hover-red: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$red-70,
+      value: colors.$red-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$red-70,
+      value: colors.$red-70-hover,
     ),
   ),
 ) !default;
@@ -92,11 +92,11 @@ $tag-background-magenta: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$magenta-80,
+      value: colors.$magenta-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$magenta-80,
+      value: colors.$magenta-70,
     ),
   ),
 ) !default;
@@ -114,11 +114,11 @@ $tag-color-magenta: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$magenta-30,
+      value: colors.$magenta-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$magenta-30,
+      value: colors.$magenta-20,
     ),
   ),
 ) !default;
@@ -136,11 +136,11 @@ $tag-hover-magenta: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$magenta-70,
+      value: colors.$magenta-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$magenta-70,
+      value: colors.$magenta-70-hover,
     ),
   ),
 ) !default;
@@ -159,11 +159,11 @@ $tag-background-purple: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$purple-80,
+      value: colors.$purple-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$purple-80,
+      value: colors.$purple-70,
     ),
   ),
 ) !default;
@@ -181,11 +181,11 @@ $tag-color-purple: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$purple-30,
+      value: colors.$purple-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$purple-30,
+      value: colors.$purple-20,
     ),
   ),
 ) !default;
@@ -203,11 +203,11 @@ $tag-hover-purple: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$purple-70,
+      value: colors.$purple-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$purple-70,
+      value: colors.$purple-70-hover,
     ),
   ),
 ) !default;
@@ -226,11 +226,11 @@ $tag-background-blue: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$blue-80,
+      value: colors.$blue-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$blue-80,
+      value: colors.$blue-70,
     ),
   ),
 ) !default;
@@ -248,11 +248,11 @@ $tag-color-blue: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$blue-30,
+      value: colors.$blue-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$blue-30,
+      value: colors.$blue-20,
     ),
   ),
 ) !default;
@@ -270,11 +270,11 @@ $tag-hover-blue: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$blue-70,
+      value: colors.$blue-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$blue-70,
+      value: colors.$blue-70-hover,
     ),
   ),
 ) !default;
@@ -293,11 +293,11 @@ $tag-background-cyan: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$cyan-80,
+      value: colors.$cyan-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$cyan-80,
+      value: colors.$cyan-70,
     ),
   ),
 ) !default;
@@ -315,11 +315,11 @@ $tag-color-cyan: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$cyan-30,
+      value: colors.$cyan-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$cyan-30,
+      value: colors.$cyan-20,
     ),
   ),
 ) !default;
@@ -337,11 +337,11 @@ $tag-hover-cyan: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$cyan-70,
+      value: colors.$cyan-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$cyan-70,
+      value: colors.$cyan-70-hover,
     ),
   ),
 ) !default;
@@ -360,11 +360,11 @@ $tag-background-teal: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$teal-80,
+      value: colors.$teal-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$teal-80,
+      value: colors.$teal-70,
     ),
   ),
 ) !default;
@@ -382,11 +382,11 @@ $tag-color-teal: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$teal-30,
+      value: colors.$teal-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$teal-30,
+      value: colors.$teal-20,
     ),
   ),
 ) !default;
@@ -404,11 +404,11 @@ $tag-hover-teal: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$teal-70,
+      value: colors.$teal-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$teal-70,
+      value: colors.$teal-70-hover,
     ),
   ),
 ) !default;
@@ -427,11 +427,11 @@ $tag-background-green: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$green-80,
+      value: colors.$green-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$green-80,
+      value: colors.$green-70,
     ),
   ),
 ) !default;
@@ -449,11 +449,11 @@ $tag-color-green: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$green-30,
+      value: colors.$green-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$green-30,
+      value: colors.$green-20,
     ),
   ),
 ) !default;
@@ -471,11 +471,11 @@ $tag-hover-green: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$green-70,
+      value: colors.$green-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$green-70,
+      value: colors.$green-70-hover,
     ),
   ),
 ) !default;
@@ -494,11 +494,11 @@ $tag-background-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-80,
+      value: colors.$gray-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-80,
+      value: colors.$gray-70,
     ),
   ),
 ) !default;
@@ -516,11 +516,11 @@ $tag-color-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-30,
+      value: colors.$gray-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-30,
+      value: colors.$gray-20,
     ),
   ),
 ) !default;
@@ -538,11 +538,11 @@ $tag-hover-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$gray-70,
+      value: colors.$gray-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$gray-70,
+      value: colors.$gray-70-hover,
     ),
   ),
 ) !default;
@@ -561,11 +561,11 @@ $tag-background-cool-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$cool-gray-80,
+      value: colors.$cool-gray-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$cool-gray-80,
+      value: colors.$cool-gray-70,
     ),
   ),
 ) !default;
@@ -583,11 +583,11 @@ $tag-color-cool-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$cool-gray-30,
+      value: colors.$cool-gray-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$cool-gray-30,
+      value: colors.$cool-gray-20,
     ),
   ),
 ) !default;
@@ -605,11 +605,11 @@ $tag-hover-cool-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$cool-gray-70,
+      value: colors.$cool-gray-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$cool-gray-70,
+      value: colors.$cool-gray-70-hover,
     ),
   ),
 ) !default;
@@ -628,11 +628,11 @@ $tag-background-warm-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$warm-gray-80,
+      value: colors.$warm-gray-70,
     ),
     (
       theme: themes.$g100,
-      value: colors.$warm-gray-80,
+      value: colors.$warm-gray-70,
     ),
   ),
 ) !default;
@@ -650,11 +650,11 @@ $tag-color-warm-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$warm-gray-30,
+      value: colors.$warm-gray-20,
     ),
     (
       theme: themes.$g100,
-      value: colors.$warm-gray-30,
+      value: colors.$warm-gray-20,
     ),
   ),
 ) !default;
@@ -672,11 +672,11 @@ $tag-hover-warm-gray: (
     ),
     (
       theme: themes.$g90,
-      value: colors.$warm-gray-70,
+      value: colors.$warm-gray-70-hover,
     ),
     (
       theme: themes.$g100,
-      value: colors.$warm-gray-70,
+      value: colors.$warm-gray-70-hover,
     ),
   ),
 ) !default;

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/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

package/scss/utilities/_layer-set.scss

@@ -1,38 +0,0 @@
-//
-// Copyright IBM Corp. 2021
-//
-// 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 'sass:list';
-@use 'sass:meta';
-@use '../config' as *;
-@use './custom-property';
-
-/// Define a map of layer sets, each set should have values for each layer in
-/// the application. The key of this map is used for the CSS Custom Property
-/// name whose value is updated as more layers are added.
-/// @type {Map}
-$layer-sets: () !default;
-
-/// Emit the layer tokens defined in $layer-sets for the given $level
-/// @param {Number} $level
-@mixin -emit-layer-tokens($level) {
-  @each $key, $layer-set in $layer-sets {
-    $value: list.nth($layer-set, $level);
-    @include custom-property.declaration($key, $value);
-  }
-}
-
-:root {
-  @include -emit-layer-tokens(1);
-}
-
-.#{$prefix}--layer {
-  @include -emit-layer-tokens(2);
-
-  .#{$prefix}--layer {
-    @include -emit-layer-tokens(3);
-  }
-}