@carbon/styles 0.12.0-rc.0 → 0.12.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.12.0-rc.0",
+  "version": "0.12.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,18 +20,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@carbon/colors": "^10.35.0-rc.0",
-    "@carbon/feature-flags": "^0.7.0-rc.0",
-    "@carbon/grid": "^10.40.0-rc.0",
-    "@carbon/layout": "^10.35.0-rc.0",
-    "@carbon/motion": "^10.27.0-rc.0",
-    "@carbon/themes": "^10.49.0-rc.0",
-    "@carbon/type": "^10.40.0-rc.0",
+    "@carbon/colors": "^10.35.0",
+    "@carbon/feature-flags": "^0.7.0",
+    "@carbon/grid": "^10.40.0",
+    "@carbon/layout": "^10.35.0",
+    "@carbon/motion": "^10.27.0",
+    "@carbon/themes": "^10.49.0",
+    "@carbon/type": "^10.40.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.21.0-rc.0",
+    "@carbon/test-utils": "^10.21.0",
     "css": "^3.0.0"
   },
-  "gitHead": "a8bade7e1200220296e8ed13621c7a1a88206f0e"
+  "gitHead": "ac4b4bf03cf93cb8463916231619fbfdc72f0be5"
 }

package/scss/_config.scss

@@ -36,6 +36,12 @@ $font-display: 'swap' !default;
 /// @group config
 $font-path: '~@ibm/plex' !default;
 
+/// Specify if IBM Plex should be provided by Google Fonts
+/// @access public
+/// @type String
+/// @group config
+$use-google-fonts: false !default;
+
 /// The value used to prefix selectors and CSS Custom Properties across the
 /// codebase
 /// @access public

package/scss/components/tabs/_tabs.scss

@@ -23,12 +23,15 @@
 @use '../../utilities/rotate' as *;
 @use '../../utilities/box-shadow' as *;
 @use '../../utilities/component-tokens' as *;
+@use '../../utilities/custom-property';
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
 
+$icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
+
 /// Tabs styles
 /// @access public
 /// @group tabs
@@ -244,6 +247,24 @@
       text-align: left;
     }
 
+    //-----------------------------
+    // Icon Item
+    //-----------------------------
+
+    .#{$prefix}--tabs__nav-item--icon,
+    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon {
+      display: flex;
+      width: $icon-tab-size;
+      height: $icon-tab-size;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+    }
+
+    &.#{$prefix}--tabs__icon--lg {
+      @include custom-property.declaration('icon-tab-size', rem(48px));
+    }
+
     //-----------------------------
     // Item Hover
     //-----------------------------

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