@carbon/styles 0.10.0-rc.0 → 0.12.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/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();
+  }
+}