@carbon/styles 0.9.0 → 0.11.0

package/scss/components/tooltip/_index.scss

@@ -9,3 +9,4 @@
 @use 'tooltip';
 
 @include tooltip.tooltip;
+@include tooltip.icon-tooltip;

package/scss/components/tooltip/_tooltip.scss

@@ -12,6 +12,16 @@
 @use '../../utilities/custom-property';
 @use '../../utilities/convert';
 
+$tooltip-padding-block: custom-property.get-var(
+  'tooltip-padding-block',
+  spacing.$spacing-05
+);
+
+$tooltip-padding-inline: custom-property.get-var(
+  'tooltip-padding-inline',
+  spacing.$spacing-05
+);
+
 @mixin tooltip {
   .#{$prefix}--tooltip {
     @include custom-property.declaration('popover-offset', 12px);
@@ -21,7 +31,7 @@
     @include type.type-style('body-long-01');
 
     max-width: convert.rem(288px);
-    padding: spacing.$spacing-05;
+    padding: $tooltip-padding-block $tooltip-padding-inline;
 
     color: theme.$text-inverse;
   }
@@ -29,6 +39,22 @@
 
 @mixin icon-tooltip {
   .#{$prefix}--icon-tooltip {
-    padding: 3px spacing.$spacing-05;
+    @include custom-property.declaration(
+      'tooltip-padding-block',
+      convert.rem(2px)
+    );
+    @include custom-property.declaration(
+      'popover-caret-width',
+      convert.rem(8px)
+    );
+    @include custom-property.declaration(
+      'popover-caret-height',
+      convert.rem(4px)
+    );
+    @include custom-property.declaration('popover-offset', convert.rem(8px));
+  }
+
+  .#{$prefix}--icon-tooltip .#{$prefix}--tooltip-content {
+    @include type.type-style('body-short-01');
   }
 }

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();
+}