@carbon/styles 0.10.0 → 0.11.0-rc.0

package/docs/sass.md

@@ -120,23 +120,6 @@ to `false`:
 );
 ```
 
-### Emitting additional typefaces
-
-When using the font-face declarations, only `IBM Plex Sans` and `IBM Plex Mono`
-are emitted. If you would like to emit additional typefaces, like
-`IBM Plex Sans Arabic`, you can set additional config tokens:
-
-```scss
-@use '@carbon/styles/scss/config' with (
-  $css--plex-arabic: true,
-);
-```
-
-| IBM Plex Language | Token               |
-| :---------------- | :------------------ |
-| Arabic            | `$css--plex-arabic` |
-| TODO              | `TODO`              |
-
 ## Grid
 
 | Import                             | Filepath          |

package/index.scss

@@ -7,7 +7,6 @@
 
 @forward 'scss/config';
 @forward 'scss/colors' hide $white;
-@forward 'scss/font-face';
 @forward 'scss/grid';
 @forward 'scss/motion';
 @forward 'scss/type';
@@ -15,4 +14,5 @@
 @forward 'scss/theme';
 
 @use 'scss/reset';
+@forward 'scss/fonts';
 @use 'scss/components';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.10.0",
+  "version": "0.11.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -25,13 +25,13 @@
     "@carbon/grid": "^10.39.0",
     "@carbon/layout": "^10.34.0",
     "@carbon/motion": "^10.26.0",
-    "@carbon/themes": "^10.47.0",
-    "@carbon/type": "^10.38.0",
+    "@carbon/themes": "^10.48.0-rc.0",
+    "@carbon/type": "^10.39.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
     "@carbon/test-utils": "^10.20.0",
     "css": "^3.0.0"
   },
-  "gitHead": "505af1963e6f78a204212e4f322c247f4eb4f217"
+  "gitHead": "f6e5dd2362aa2970add45c7fb7fc32841c252671"
 }

package/scss/_config.scss

@@ -5,14 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/// The value used to prefix selectors and CSS Custom Properties across the
-/// codebase
-/// @access public
-/// @type String
-/// @group config
-$prefix: 'cds' !default;
-
-/// If true, includes font face mixins in `_css--font-face.scss` depending on the `css--plex` feature flag
+/// If true, includes font face mixins from scss/fonts
 /// @access public
 /// @type Bool
 /// @group config
@@ -30,8 +23,22 @@ $css--reset: true !default;
 /// @group config
 $css--default-type: true !default;
 
-/// If true, include IBM Plex Arabic type
+/// Specify the default value for the `font-display` property used for fonts
+/// loaded with @font-face
 /// @access public
-/// @type Bool
+/// @type String
+/// @group config
+$font-display: 'swap' !default;
+
+/// Specify the base path for loading IBM Plex
+/// @access public
+/// @type String
+/// @group config
+$font-path: '~@ibm/plex' !default;
+
+/// The value used to prefix selectors and CSS Custom Properties across the
+/// codebase
+/// @access public
+/// @type String
 /// @group config
-$css--plex-arabic: false !default;
+$prefix: 'cds' !default;

package/scss/components/list-box/_list-box.scss

@@ -743,8 +743,8 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box__menu-item--active:hover,
   .#{$prefix}--list-box__menu-item--active.#{$prefix}--list-box__menu-item--highlighted {
-    border-bottom-color: $layer-selected;
-    background-color: $layer-selected;
+    border-bottom-color: $layer-selected-hover;
+    background-color: $layer-selected-hover;
   }
 
   .#{$prefix}--list-box__menu-item--active

package/scss/components/radio-button/_radio-button.scss

@@ -121,15 +121,15 @@ $radio-border-width: 1px !default;
     }
   }
 
-  .#{$prefix}--radio-button:button-disabled + .#{$prefix}--radio-button__label {
+  .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
     color: $button-disabled;
     cursor: not-allowed;
   }
 
-  .#{$prefix}--radio-button:button-disabled
+  .#{$prefix}--radio-button:disabled
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance,
-  .#{$prefix}--radio-button:button-disabled:checked
+  .#{$prefix}--radio-button:disabled:checked
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
     border-color: $border-disabled;

package/scss/fonts/README.md

@@ -0,0 +1,148 @@
+# `scss/fonts`
+
+The `scss/fonts` folder provides a way to incorporate IBM Plex into your
+project. Below is a table of what fonts are currently supported from IBM Plex in
+Carbon:
+
+| Font                      | Available | Entrypoint                    |
+| ------------------------- | --------- | ----------------------------- |
+| IBM Plex Mono             | ✅        | `scss/fonts/mono`             |
+| IBM Plex Sans Arabic      | ✅        | `scss/fonts/sans-arabic`      |
+| IBM Plex Sans Devanagari  | ✅        | `scss/fonts/sans-devanagari`  |
+| IBM Plex Sans Hebrew      | ✅        | `scss/fonts/sans-hebrew`      |
+| IBM Plex Sans KR          |           |                               |
+| IBM Plex Sans JP          |           |                               |
+| IBM Plex Sans Thai Looped | ✅        | `scss/fonts/sans-thai-looped` |
+| IBM Plex Sans Thai        | ✅        | `scss/fonts/sans-thai`        |
+| IBM Plex Sans             | ✅        | `scss/fonts/sans`             |
+| IBM Plex Serif            | ✅        | `scss/fonts/serif`            |
+
+By default, Carbon provides the default font weights for: IBM Plex Mono, IBM
+Plex Sans, and IBM Plex Serif. To bring in additional fonts, you can include the
+`@carbon/styles/scss/fonts` entrypoint and configure it:
+
+```scss
+@use '@carbon/styles/scss/fonts' with (
+  $fonts: (
+    IBM-Plex-Sans-Arabic: true,
+  ),
+);
+```
+
+You can also configure it to disable specific fonts:
+
+```scss
+@use '@carbon/styles/scss/fonts' with (
+  $fonts: (
+    IBM-Plex-Sans: false,
+  ),
+);
+```
+
+If you would like to disable all fonts, you can use the `$css--font-face` flag
+in:
+
+```scss
+@use '@carbon/styles/scss/config' with (
+  $css--font-face: false,
+);
+```
+
+## Features
+
+Each font is available as an entrypoint in the `fonts` folder. You can use these
+entrypoints to include specific font weights, styles, and more for IBM Plex. For
+example, if you only want to include the regular font weight for IBM Plex Sans
+then you could do the following:
+
+```scss
+@use '@carbon/styles/scss/fonts/sans';
+
+@include sans.regular($styles: normal);
+```
+
+Each font entrypoint supports the following weights:
+
+- `thin`
+- `extralight`
+- `light`
+- `regular`
+- `tex`
+- `medium`
+- `semibold`
+- `bold`
+
+All fonts support the `normal` font style, some fonts include support for the
+`italic` font style, as well.
+
+### Custom font src resolver
+
+By default, `@carbon/styles/scss/fonts` attempts to resolve fonts directly from
+the `@ibm/plex` package. You can configure the location of these font files in
+two ways:
+
+- Use the `$font-path` option to define a path "prefix"
+- Provide a custom resolver to point to where your font files are hosted
+
+The `$font-path` options is available in `scss/config`:
+
+```scss
+@use '@carbon/styles/scss/config' with (
+  $font-path: 'https://cdn.custom-font-path.com/fonts',
+);
+```
+
+And allows you to change the beginning part of each `src` URL that is generated.
+You can also completely override the default behavior and provide your own URL
+resolver through `scss/fonts/src`:
+
+```scss
+@use 'sass:meta';
+@use './my-custom-resolver' as resolver;
+@use '@carbon/styles/scss/fonts/src' with (
+  // Here, "resolve" is the name of the function in the "resolver" module
+  $resolver: meta.get-function('resolve', 'resolver')
+);
+```
+
+This can be particularly useful for self-hosted projects that are not using
+webpack. This custom resolver should follow the signature:
+
+```scss
+/// @param {String} $name
+/// @param {String} $weight
+/// @param {String} $style
+/// @param {String} $unicode-range
+/// @param {List} $formats
+/// @returns List
+@function resolver($name, $weight, $style, $unicode-range, $formats) {
+  // Here, you will need to return a list of url() format() that will be used in
+  // the src property
+}
+```
+
+## Contributing
+
+**How do I add support for a font?**
+
+You will need to do the following:
+
+- [ ] Create a file for the font under `scss/fonts/`, for example
+      `scss/fonts/_sans-arabic.scss`
+- [ ] Define all available weights as mixins in that file
+- [ ] Emit `@font-face` blocks in each font weight mixin
+- [ ] Add a `default` mixin for the default font weights to include for a font
+- [ ] Add an `all` mixin which emits all font weights
+- [ ] Export a `$name` variable for the name of the font to be used to detect if
+      a font should be auto-included
+- [ ] Add the base font name to the `$-filenames` map in `fonts/_src.scss`. This
+      will be used in the font src resolver to get the correct path from
+      `@ibm/plex`
+- [ ] In `fonts/_index.scss`
+  - [ ] Update the `$-fonts` map to include the `$name` for the font and specify
+        whether it should be included automatically
+  - [ ] Update the block at the end of the file to call the default mixin of the
+        file if the font is enabled
+- [ ] Update `packages/carbon-react/tasks/build-styles.js` to include the font
+      file as a re-export
+- [ ] Add a story for the font in `Plex.stories.js`

package/scss/fonts/_index.scss

@@ -0,0 +1,75 @@
+//
+// 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 'sass:meta';
+@use 'sass:map';
+@use '../config';
+@use './mono';
+@use './sans-arabic';
+@use './sans-devanagari';
+@use './sans-hebrew';
+@use './sans-thai-looped';
+@use './sans-thai';
+@use './sans';
+@use './serif';
+
+$-fonts: (
+  IBM-Plex-Mono: true,
+  IBM-Plex-Sans-Arabic: false,
+  IBM-Plex-Sans-Devanagari: false,
+  IBM-Plex-Sans-Hebrew: false,
+  IBM-Plex-Sans-Thai-Looped: false,
+  IBM-Plex-Sans-Thai: false,
+  IBM-Plex-Sans: true,
+  IBM-Plex-Serif: true,
+);
+$fonts: () !default;
+$fonts: map.merge($-fonts, $fonts);
+
+/// Determine if the given font has been enabled or not
+/// @param String $name
+/// @returns Boolean
+@function enabled($name) {
+  @if map.has-key($fonts, $name) {
+    @return map.get($fonts, $name);
+  }
+  @return false;
+}
+
+@if config.$css--font-face == true {
+  @if enabled(mono.$name) {
+    @include mono.default();
+  }
+
+  @if enabled(sans-arabic.$name) {
+    @include sans-arabic.default();
+  }
+
+  @if enabled(sans-devanagari.$name) {
+    @include sans-devanagari.default();
+  }
+
+  @if enabled(sans-hebrew.$name) {
+    @include sans-hebrew.default();
+  }
+
+  @if enabled(sans-thai-looped.$name) {
+    @include sans-thai-looped.default();
+  }
+
+  @if enabled(sans-thai.$name) {
+    @include sans-thai.default();
+  }
+
+  @if enabled(sans.$name) {
+    @include sans.default();
+  }
+
+  @if enabled(serif.$name) {
+    @include serif.default();
+  }
+}

package/scss/fonts/_mono.scss

@@ -0,0 +1,153 @@
+//
+// 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 './src';
+@use './unicode';
+
+$font-family: 'IBM Plex Mono';
+$name: 'IBM-Plex-Mono';
+$styles: (normal, italic);
+$unicode-ranges: (Cyrillic, Pi, Latin3, Latin2, Latin1);
+$formats: (woff2, woff);
+
+@mixin thin($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 100;
+        src: src.get($name, Thin, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin extralight($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 200;
+        src: src.get($name, ExtraLight, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin light($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 300;
+        src: src.get($name, Light, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin regular($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 400;
+        src: src.get($name, Regular, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin text($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 450;
+        src: src.get($name, Text, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin medium($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 500;
+        src: src.get($name, Medium, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin semibold($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 600;
+        src: src.get($name, SemiBold, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin bold($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @each $style in $styles {
+    @each $unicode-range in $unicode-ranges {
+      @font-face {
+        font-display: config.$font-display;
+        font-family: $font-family;
+        font-style: $style;
+        font-weight: 700;
+        src: src.get($name, Bold, $style, $unicode-range, $formats);
+        unicode-range: unicode.get-range($unicode-range);
+      }
+    }
+  }
+}
+
+@mixin all($styles: $styles, $unicode-ranges: $unicode-ranges) {
+  @include thin($styles, $unicode-ranges);
+  @include extralight($styles, $unicode-ranges);
+  @include light($styles, $unicode-ranges);
+  @include regular($styles, $unicode-ranges);
+  @include text($styles, $unicode-ranges);
+  @include medium($styles, $unicode-ranges);
+  @include semibold($styles, $unicode-ranges);
+  @include bold($styles, $unicode-ranges);
+}
+
+@mixin default() {
+  @include light();
+  @include regular();
+  @include semibold();
+}

package/scss/fonts/_sans-arabic.scss

@@ -0,0 +1,151 @@
+//
+// 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 './src';
+
+$font-family: 'IBM Plex Sans Arabic';
+$name: 'IBM-Plex-Sans-Arabic';
+$styles: (normal);
+$formats: (woff2, woff);
+
+@mixin thin() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 100;
+    src: src.get(
+      $name: $name,
+      $weight: Thin,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin extralight() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 200;
+    src: src.get(
+      $name: $name,
+      $weight: ExtraLight,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin light() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 300;
+    src: src.get(
+      $name: $name,
+      $weight: Light,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin regular() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 400;
+    src: src.get(
+      $name: $name,
+      $weight: Regular,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin text() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 450;
+    src: src.get(
+      $name: $name,
+      $weight: Text,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin medium() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 500;
+    src: src.get(
+      $name: $name,
+      $weight: Medium,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin semibold() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 500;
+    src: src.get(
+      $name: $name,
+      $weight: SemiBold,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin bold() {
+  @font-face {
+    font-display: config.$font-display;
+    font-family: $font-family;
+    font-style: normal;
+    font-weight: 500;
+    src: src.get(
+      $name: $name,
+      $weight: Bold,
+      $style: $styles,
+      $formats: $formats
+    );
+  }
+}
+
+@mixin all() {
+  @include thin();
+  @include extralight();
+  @include light();
+  @include regular();
+  @include text();
+  @include medium();
+  @include semibold();
+  @include bold();
+}
+
+@mixin default() {
+  @include light();
+  @include regular();
+  @include semibold();
+}