@carbon/styles 0.17.0 → 1.0.1

package/scss/fonts/_src.scss

@@ -21,50 +21,42 @@ $-filenames: (
   IBM-Plex-Serif: 'IBMPlexSerif',
 );
 
-$-google-filenames: (
+$-akamai-filenames: (
   IBM-Plex-Mono: (
-    name: 'ibmplexmono',
-    version: 'v7',
-    hash: '-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-otFQ',
+    name: 'IBM-Plex-Mono',
+    filename: 'IBMPlexMono',
   ),
   IBM-Plex-Sans-Arabic: (
-    name: 'ibmplexsansarabic',
-    version: 'v5',
-    hash: 'Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys43PW5fslBEg0',
+    name: 'IBM-Plex-Sans-Arabic',
+    filename: 'IBMPlexSansArabic',
   ),
   IBM-Plex-Sans-Devanagari: (
-    name: 'ibmplexsansdevanagari',
-    version: 'v5',
-    hash: 'XRXH3JCMvG4IDoS9SubXB6W-UX5iehIMBFR2-O_PX0j1Uc7wCWQq',
+    name: 'IBM-Plex-Sans-Devanagari',
+    filename: 'IBMPlexSansDevanagari',
   ),
   IBM-Plex-Sans-Hebrew: (
-    name: 'ibmplexsanshebrew',
-    version: 'v5',
-    hash: 'BCa2qYENg9Kw1mpLpO0bGM5lfHAAZHhDXE2v-lgVrjaNzC4',
+    name: 'IBM-Plex-Sans-Hebrew',
+    filename: 'IBMPlexSansHebrew',
   ),
   IBM-Plex-Sans-Thai-Looped: (
-    name: 'ibmplexsansthailooped',
-    version: 'v5',
-    hash: 'tss_AoJJRAhL3BTrK3r2xxbFhvKfyBB6l7hHT30L9BiKoXOrFCUb6Q',
+    name: 'IBM-Plex-Sans-Thai-Looped',
+    filename: 'IBMPlexSansThaiLooped',
   ),
   IBM-Plex-Sans-Thai: (
-    name: 'ibmplexsansthai',
-    version: 'v5',
-    hash: 'm8JPje1VVIzcq1HzJq2AEdo2Tj_qvLqMBNYgR8BKU4cX',
+    name: 'IBM-Plex-Sans-Thai',
+    filename: 'IBMPlexSansThai',
   ),
   IBM-Plex-Sans: (
-    name: 'ibmplexsans',
-    version: 'v9',
-    hash: 'zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw',
+    name: 'IBM-Plex-Sans',
+    filename: 'IBMPlexSans',
   ),
   IBM-Plex-Serif: (
-    name: 'ibmplexserif',
-    version: 'v10',
-    hash: 'jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo',
+    name: 'IBM-Plex-Serif',
+    filename: 'IBMPlexSerif',
   ),
 );
 
-@function -get-google-filename($map, $keys...) {
+@function -get-akamai-filename($map, $keys...) {
   @each $key in $keys {
     $map: map.get($map, $key);
   }
@@ -88,15 +80,34 @@ $-google-filenames: (
 /// @param {List} $formats
 /// @returns List
 @function -default-resolver($name, $weight, $style, $unicode-range, $formats) {
-  @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');
+  @if (config.$use-akamai-cdn) {
+    $name: -get-akamai-filename($-akamai-filenames, $name, 'name');
+    $filename: -get-akamai-filename($-akamai-filenames, $name, 'filename');
+
+    // 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: ();
 
     @each $format in $formats {
-      $url: 'https://fonts.gstatic.com/s/#{$filename}/#{$version}/#{$hash}';
+      $url: 'https://1.www.s81c.com/common/carbon/plex/fonts/#{$name}';
+      @if $unicode-range {
+        $url: 'https://1.www.s81c.com/common/carbon/plex/fonts/#{$name}/fonts/split/#{$format}/#{$filename}-#{$unicode-range}';
+      } @else {
+        $url: 'https://1.www.s81c.com/common/carbon/plex/fonts/#{$name}/fonts/complete/#{$format}/#{$filename}';
+      }
 
       // Add extension
       $url: '#{$url}.#{$format}';

package/scss/grid/_css-grid.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.
+//
+
+@use '../config';
+@use '@carbon/grid';
+
+@include grid.css-grid();

package/scss/grid/_flexbox.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'config';
+@use '../config';
 @use '@carbon/grid';
 
 @include grid.flex-grid();

package/scss/grid/_index.scss

@@ -5,9 +5,14 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'config';
-@use '@carbon/grid';
 @use '../config';
+@forward '@carbon/grid' show
+  $grid-gutter,
+  $grid-gutter-condensed,
+  $grid-breakpoints,
+  flex-grid,
+  css-grid;
+@use '@carbon/grid';
 
 @if config.$use-flexbox-grid == true {
   @include grid.flex-grid();

package/scss/grid/_mixins.scss

@@ -0,0 +1,9 @@
+//
+// 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';
+@forward '@carbon/grid' show css-grid, flex-grid;

package/scss/type/_reset.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward '@carbon/type/scss/modules/reset';
+@forward '@carbon/type/scss/reset';

package/scss/utilities/__tests__/custom-property-test.js

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+const css = require('css');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/utilities/custom-property', () => {
+  it('should support getting the property name from a value', async () => {
+    const { unwrap } = await render(`
+      @use '../../config' with (
+        $prefix: 'cds',
+      );
+      @use '../custom-property';
+
+      $_: get('name', custom-property.get-name('test'));
+    `);
+    expect(unwrap('name')).toBe('--cds-test');
+  });
+
+  it('should support emitting a declaration for a CSS Custom Property', async () => {
+    const { result } = await render(`
+      @use '../../config' with (
+        $prefix: 'cds',
+      );
+      @use '../custom-property';
+
+      .test {
+        @include custom-property.declaration(test, #000000);
+      }
+    `);
+    const { stylesheet } = css.parse(result.css.toString());
+    const selector = stylesheet.rules.find((rule) => {
+      return rule.selectors.includes('.test');
+    });
+    const [declaration] = selector.declarations;
+
+    expect(declaration.property).toBe('--cds-test');
+    expect(declaration.value).toBe('#000000');
+  });
+});

package/scss/utilities/_component-tokens.scss

@@ -7,7 +7,8 @@
 
 @use 'sass:map';
 @use 'sass:meta';
-@use "sass:list";
+@use 'sass:list';
+@use '../config';
 @use '../themes';
 @use '../theme';
 @use './custom-property';

package/scss/utilities/_convert.scss

@@ -20,8 +20,7 @@ $base-font-size: 16px !default;
 /// @group utilities
 @function rem($px) {
   @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
   @if meta.function-exists('div', 'math') {
@@ -38,8 +37,7 @@ $base-font-size: 16px !default;
 /// @group utilities
 @function em($px) {
   @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
   @if meta.function-exists('div', 'math') {

package/scss/utilities/_high-contrast-mode.scss

@@ -5,15 +5,13 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/// Windows HCM Mixin
+/// High Contrast Mode mixin for Windows and macOS
 /// @access public
 /// @example @include high-contrast-mode;
 /// @group utilities
 /// Set HCM styles at the end of each file to ensure they are not overwritten
 @mixin high-contrast-mode($type: '') {
-  @media screen and (-ms-high-contrast: active),
-    (forced-colors: active),
-    (prefers-contrast) {
+  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
     @if ($type == 'icon-fill') {
       fill: ButtonText;
     }