` element | `String` | `font-family('mono')` |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [font-weight [mixin]](#font-weight-mixin)
+
+### ✅carbon--default-type [mixin]
+
+Include default type styles
+
+
+Source code
+
+```scss
+@mixin carbon--default-type() {
+ h1 {
+ @include carbon--type-style('productive-heading-06');
+ }
+
+ h2 {
+ @include carbon--type-style('productive-heading-05');
+ }
+
+ h3 {
+ @include carbon--type-style('productive-heading-04');
+ }
+
+ h4 {
@include carbon--type-style('productive-heading-03');
}
@@ -12141,6 +12469,66 @@ Include default type styles
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
- [carbon--theme [variable]](#carbon--theme-variable)
+### ✅default-type [mixin]
+
+Include default type styles
+
+
+Source code
+
+```scss
+@mixin default-type() {
+ h1 {
+ @include type-style('productive-heading-06');
+ }
+
+ h2 {
+ @include type-style('productive-heading-05');
+ }
+
+ h3 {
+ @include type-style('productive-heading-04');
+ }
+
+ h4 {
+ @include type-style('productive-heading-03');
+ }
+
+ h5 {
+ @include type-style('productive-heading-02');
+ }
+
+ h6 {
+ @include type-style('productive-heading-01');
+ }
+
+ p {
+ @include type-style('body-long-02');
+ }
+
+ a {
+ @if meta.global-variable-exists('carbon--theme') and
+ map.has-key($carbon--theme, 'link-01')
+ {
+ color: map.get($carbon--theme, 'link-01');
+ } @else {
+ color: #0062fe;
+ }
+ }
+
+ em {
+ font-style: italic;
+ }
+}
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
+ - [carbon--theme [variable]](#carbon--theme-variable)
+
### ✅carbon--font-face-sans-condensed [mixin]
Sans `@font-face`'s
@@ -12997,6 +13385,34 @@ Compute the type size for the given type scale step
- **Group**: [@carbon/type](#carbontype)
- **Returns**: `Number` In px
+### ✅get-type-size [function]
+
+Compute the type size for the given type scale step
+
+
+Source code
+
+```scss
+@function get-type-size($step) {
+ @if $step == 1 {
+ @return 12px;
+ }
+ // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
+ @return get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$step` | — | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Returns**: `Number` In px
+
### ✅carbon--type-scale [variable]
Type scale follows a custom formula for determining each step size and supports
@@ -13018,6 +13434,56 @@ $carbon--type-scale: ();
- **Used by**:
- [carbon--type-scale [function]](#carbon--type-scale-function)
+### ✅type-scale [variable]
+
+Type scale follows a custom formula for determining each step size and supports
+sizes from 12px to 92px
+
+
+Source code
+
+```scss
+$type-scale: ();
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+- **Aliased**:
+ - `font-size`
+- **Used by**:
+ - [type-scale [function]](#type-scale-function)
+
+### ✅type-scale [function]
+
+Get the value of a specific step in the type scale
+
+
+Source code
+
+```scss
+@function type-scale($step) {
+ @return nth($type-scale, $step);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$step` | — | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Returns**: `Number` In rem
+- **Requires**:
+ - [type-scale [variable]](#type-scale-variable)
+- **Used by**:
+ - [type-scale [mixin]](#type-scale-mixin)
+ - [font-size [mixin]](#font-size-mixin)
+
### ✅carbon--type-scale [function]
Get the value of a specific step in the type scale
@@ -13047,6 +13513,31 @@ Get the value of a specific step in the type scale
- [carbon--type-scale [mixin]](#carbon--type-scale-mixin)
- [carbon--font-size [mixin]](#carbon--font-size-mixin)
+### ✅type-scale [mixin]
+
+Set the font-size value of a selector with the value at the given `$step`
+
+
+Source code
+
+```scss
+@mixin type-scale($step) {
+ font-size: type-scale($step);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$step` | — | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [type-scale [function]](#type-scale-function)
+
### ✅carbon--type-scale [mixin]
Set the font-size value of a selector with the value at the given `$step`
@@ -13072,6 +13563,32 @@ Set the font-size value of a selector with the value at the given `$step`
- **Requires**:
- [carbon--type-scale [function]](#carbon--type-scale-function)
+### ✅font-size [mixin]
+
+Alias of `type-scale` mixin.
+
+
+Source code
+
+```scss
+@mixin font-size($step) {
+ font-size: type-scale($step);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$step` | — | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Alias**: `type-scale`
+- **Requires**:
+ - [type-scale [function]](#type-scale-function)
+
### ✅carbon--font-size [mixin]
Alias of `type-scale` mixin.
@@ -13590,15 +14107,15 @@ $caption-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅label-01 [variable]
+### ✅caption-01 [variable]
Source code
```scss
-$label-01: (
- font-size: carbon--type-scale(1),
- font-weight: carbon--font-weight('regular'),
+$caption-01: (
+ font-size: scale.type-scale(1),
+ font-weight: font-family.font-weight('regular'),
line-height: 1.34,
letter-spacing: 0.32px,
);
@@ -13609,14 +14126,15 @@ $label-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅helper-text-01 [variable]
+### ✅label-01 [variable]
Source code
```scss
-$helper-text-01: (
+$label-01: (
font-size: carbon--type-scale(1),
+ font-weight: carbon--font-weight('regular'),
line-height: 1.34,
letter-spacing: 0.32px,
);
@@ -13627,17 +14145,17 @@ $helper-text-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅body-short-01 [variable]
+### ✅label-01 [variable]
Source code
```scss
-$body-short-01: (
- font-size: carbon--type-scale(2),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.29,
- letter-spacing: 0.16px,
+$label-01: (
+ font-size: scale.type-scale(1),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
);
```
@@ -13646,17 +14164,16 @@ $body-short-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅body-long-01 [variable]
+### ✅helper-text-01 [variable]
Source code
```scss
-$body-long-01: (
- font-size: carbon--type-scale(2),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.43,
- letter-spacing: 0.16px,
+$helper-text-01: (
+ font-size: carbon--type-scale(1),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
);
```
@@ -13665,17 +14182,16 @@ $body-long-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅body-short-02 [variable]
+### ✅helper-text-01 [variable]
Source code
```scss
-$body-short-02: (
- font-size: carbon--type-scale(3),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.375,
- letter-spacing: 0,
+$helper-text-01: (
+ font-size: scale.type-scale(1),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
);
```
@@ -13684,17 +14200,17 @@ $body-short-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅body-long-02 [variable]
+### ✅body-short-01 [variable]
Source code
```scss
-$body-long-02: (
- font-size: carbon--type-scale(3),
+$body-short-01: (
+ font-size: carbon--type-scale(2),
font-weight: carbon--font-weight('regular'),
- line-height: 1.5,
- letter-spacing: 0,
+ line-height: 1.29,
+ letter-spacing: 0.16px,
);
```
@@ -13703,18 +14219,17 @@ $body-long-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅code-01 [variable]
+### ✅body-short-01 [variable]
Source code
```scss
-$code-01: (
- font-family: carbon--font-family('mono'),
- font-size: carbon--type-scale(1),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.34,
- letter-spacing: 0.32px,
+$body-short-01: (
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0.16px,
);
```
@@ -13723,7 +14238,161 @@ $code-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅code-02 [variable]
+### ✅body-long-01 [variable]
+
+
+Source code
+
+```scss
+$body-long-01: (
+ font-size: carbon--type-scale(2),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.43,
+ letter-spacing: 0.16px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-long-01 [variable]
+
+
+Source code
+
+```scss
+$body-long-01: (
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.43,
+ letter-spacing: 0.16px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-short-02 [variable]
+
+
+Source code
+
+```scss
+$body-short-02: (
+ font-size: carbon--type-scale(3),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.375,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-short-02 [variable]
+
+
+Source code
+
+```scss
+$body-short-02: (
+ font-size: scale.type-scale(3),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.375,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-long-02 [variable]
+
+
+Source code
+
+```scss
+$body-long-02: (
+ font-size: carbon--type-scale(3),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.5,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-long-02 [variable]
+
+
+Source code
+
+```scss
+$body-long-02: (
+ font-size: scale.type-scale(3),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.5,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅code-01 [variable]
+
+
+Source code
+
+```scss
+$code-01: (
+ font-family: carbon--font-family('mono'),
+ font-size: carbon--type-scale(1),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅code-01 [variable]
+
+
+Source code
+
+```scss
+$code-01: (
+ font-family: font-family.font-family('mono'),
+ font-size: scale.type-scale(1),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅code-02 [variable]
Source code
@@ -13743,6 +14412,26 @@ $code-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
+### ✅code-02 [variable]
+
+
+Source code
+
+```scss
+$code-02: (
+ font-family: font-family.font-family('mono'),
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.43,
+ letter-spacing: 0.32px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
### ✅heading-01 [variable]
@@ -13762,6 +14451,39 @@ $heading-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
+### ✅heading-01 [variable]
+
+
+Source code
+
+```scss
+$heading-01: (
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.29,
+ letter-spacing: 0.16px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-01 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-01: $heading-01;
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
### ✅productive-heading-01 [variable]
@@ -13776,17 +14498,418 @@ $productive-heading-01: $heading-01;
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅heading-02 [variable]
+### ✅heading-02 [variable]
+
+
+Source code
+
+```scss
+$heading-02: (
+ font-size: carbon--type-scale(3),
+ font-weight: carbon--font-weight('semibold'),
+ line-height: 1.375,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅heading-02 [variable]
+
+
+Source code
+
+```scss
+$heading-02: (
+ font-size: scale.type-scale(3),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.375,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-02 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-02: $heading-02;
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-02 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-02: $heading-02;
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-03 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-03: (
+ font-size: carbon--type-scale(5),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.4,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-03 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-03: (
+ font-size: scale.type-scale(5),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.4,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-04 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-04: (
+ font-size: carbon--type-scale(7),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-04 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-04: (
+ font-size: scale.type-scale(7),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-05 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-05: (
+ font-size: carbon--type-scale(8),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.25,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-05 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-05: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.25,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-06 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-06: (
+ font-size: carbon--type-scale(8),
+ font-weight: carbon--font-weight('light'),
+ // Extra digit needed for precision in Chrome
+ line-height: 1.199,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-06 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-06: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('light'),
+ // Extra digit needed for precision in Chrome
+ line-height: 1.199,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-07 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-07: (
+ font-size: carbon--type-scale(10),
+ font-weight: carbon--font-weight('light'),
+ line-height: 1.19,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-07 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-07: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.19,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-01 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-01: map-merge(
+ $heading-01,
+ (
+ line-height: 1.25,
+ )
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-01 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-01: map.merge(
+ $heading-01,
+ (
+ line-height: 1.25,
+ )
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-02 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-02: map-merge(
+ $heading-02,
+ (
+ line-height: 1.5,
+ )
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-02 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-02: map.merge(
+ $heading-02,
+ (
+ line-height: 1.5,
+ )
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-03 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-03: (
+ font-size: carbon--type-scale(5),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.4,
+ letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: carbon--type-scale(5),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: carbon--type-scale(6),
+ line-height: 1.334,
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-03 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-03: (
+ font-size: scale.type-scale(5),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.4,
+ letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: scale.type-scale(5),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: scale.type-scale(6),
+ line-height: 1.334,
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-04 [variable]
Source code
```scss
-$heading-02: (
- font-size: carbon--type-scale(3),
- font-weight: carbon--font-weight('semibold'),
- line-height: 1.375,
+$expressive-heading-04: (
+ font-size: carbon--type-scale(7),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.29,
letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: carbon--type-scale(7),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: carbon--type-scale(8),
+ ),
+ ),
);
```
@@ -13795,13 +14918,27 @@ $heading-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-02 [variable]
+### ✅expressive-heading-04 [variable]
Source code
```scss
-$productive-heading-02: $heading-02;
+$expressive-heading-04: (
+ font-size: scale.type-scale(7),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: scale.type-scale(7),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: scale.type-scale(8),
+ ),
+ ),
+);
```
@@ -13809,17 +14946,35 @@ $productive-heading-02: $heading-02;
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-03 [variable]
+### ✅expressive-heading-05 [variable]
Source code
```scss
-$productive-heading-03: (
- font-size: carbon--type-scale(5),
+$expressive-heading-05: (
+ font-size: carbon--type-scale(8),
font-weight: carbon--font-weight('regular'),
- line-height: 1.4,
+ line-height: 1.25,
letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: carbon--type-scale(9),
+ font-weight: carbon--font-weight('light'),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: carbon--type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: carbon--type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: carbon--type-scale(13),
+ ),
+ ),
);
```
@@ -13828,17 +14983,35 @@ $productive-heading-03: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-04 [variable]
+### ✅expressive-heading-05 [variable]
Source code
```scss
-$productive-heading-04: (
- font-size: carbon--type-scale(7),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.29,
+$expressive-heading-05: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.25,
letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(9),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: scale.type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: scale.type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: scale.type-scale(13),
+ ),
+ ),
);
```
@@ -13847,17 +15020,34 @@ $productive-heading-04: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-05 [variable]
+### ✅expressive-heading-06 [variable]
Source code
```scss
-$productive-heading-05: (
+$expressive-heading-06: (
font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('regular'),
+ font-weight: carbon--font-weight('semibold'),
line-height: 1.25,
letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: carbon--type-scale(9),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: carbon--type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: carbon--type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: carbon--type-scale(13),
+ ),
+ ),
);
```
@@ -13866,18 +15056,34 @@ $productive-heading-05: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-06 [variable]
+### ✅expressive-heading-06 [variable]
Source code
```scss
-$productive-heading-06: (
- font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('light'),
- // Extra digit needed for precision in Chrome
- line-height: 1.199,
+$expressive-heading-06: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.25,
letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(9),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: scale.type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: scale.type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: scale.type-scale(13),
+ ),
+ ),
);
```
@@ -13886,17 +15092,27 @@ $productive-heading-06: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-07 [variable]
+### ✅expressive-paragraph-01 [variable]
Source code
```scss
-$productive-heading-07: (
- font-size: carbon--type-scale(10),
+$expressive-paragraph-01: (
+ font-size: carbon--type-scale(6),
font-weight: carbon--font-weight('light'),
- line-height: 1.19,
+ line-height: 1.334,
letter-spacing: 0,
+ breakpoints: (
+ lg: (
+ font-size: carbon--type-scale(7),
+ line-height: 1.29,
+ ),
+ max: (
+ font-size: carbon--type-scale(8),
+ line-height: 1.25,
+ ),
+ ),
);
```
@@ -13905,17 +15121,27 @@ $productive-heading-07: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-01 [variable]
+### ✅expressive-paragraph-01 [variable]
Source code
```scss
-$expressive-heading-01: map-merge(
- $heading-01,
- (
- line-height: 1.25,
- )
+$expressive-paragraph-01: (
+ font-size: scale.type-scale(6),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.334,
+ letter-spacing: 0,
+ breakpoints: (
+ lg: (
+ font-size: scale.type-scale(7),
+ line-height: 1.29,
+ ),
+ max: (
+ font-size: scale.type-scale(8),
+ line-height: 1.25,
+ ),
+ ),
);
```
@@ -13924,17 +15150,34 @@ $expressive-heading-01: map-merge(
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-02 [variable]
+### ✅quotation-01 [variable]
Source code
```scss
-$expressive-heading-02: map-merge(
- $heading-02,
- (
- line-height: 1.5,
- )
+$quotation-01: (
+ font-size: carbon--type-scale(5),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.3,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: carbon--type-scale(5),
+ ),
+ lg: (
+ font-size: carbon--type-scale(6),
+ line-height: 1.334,
+ ),
+ xlg: (
+ font-size: carbon--type-scale(7),
+ line-height: 1.29,
+ ),
+ max: (
+ font-size: carbon--type-scale(8),
+ line-height: 1.25,
+ ),
+ ),
);
```
@@ -13943,25 +15186,32 @@ $expressive-heading-02: map-merge(
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-03 [variable]
+### ✅quotation-01 [variable]
Source code
```scss
-$expressive-heading-03: (
- font-size: carbon--type-scale(5),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.4,
+$quotation-01: (
+ font-size: scale.type-scale(5),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.3,
letter-spacing: 0,
breakpoints: (
+ md: (
+ font-size: scale.type-scale(5),
+ ),
+ lg: (
+ font-size: scale.type-scale(6),
+ line-height: 1.334,
+ ),
xlg: (
- font-size: carbon--type-scale(5),
- line-height: 1.25,
+ font-size: scale.type-scale(7),
+ line-height: 1.29,
),
max: (
- font-size: carbon--type-scale(6),
- line-height: 1.334,
+ font-size: scale.type-scale(8),
+ line-height: 1.25,
),
),
);
@@ -13972,24 +15222,32 @@ $expressive-heading-03: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-04 [variable]
+### ✅quotation-02 [variable]
Source code
```scss
-$expressive-heading-04: (
- font-size: carbon--type-scale(7),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.29,
+$quotation-02: (
+ font-size: carbon--type-scale(8),
+ font-weight: carbon--font-weight('light'),
+ line-height: 1.25,
letter-spacing: 0,
breakpoints: (
+ md: (
+ font-size: carbon--type-scale(9),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: carbon--type-scale(10),
+ line-height: 1.19,
+ ),
xlg: (
- font-size: carbon--type-scale(7),
- line-height: 1.25,
+ font-size: carbon--type-scale(11),
+ line-height: 1.17,
),
max: (
- font-size: carbon--type-scale(8),
+ font-size: carbon--type-scale(13),
),
),
);
@@ -14000,33 +15258,32 @@ $expressive-heading-04: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-05 [variable]
+### ✅quotation-02 [variable]
Source code
```scss
-$expressive-heading-05: (
- font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('regular'),
+$quotation-02: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('light'),
line-height: 1.25,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(9),
- font-weight: carbon--font-weight('light'),
+ font-size: scale.type-scale(9),
line-height: 1.22,
),
lg: (
- font-size: carbon--type-scale(10),
+ font-size: scale.type-scale(10),
line-height: 1.19,
),
xlg: (
- font-size: carbon--type-scale(11),
+ font-size: scale.type-scale(11),
line-height: 1.17,
),
max: (
- font-size: carbon--type-scale(13),
+ font-size: scale.type-scale(13),
),
),
);
@@ -14037,32 +15294,31 @@ $expressive-heading-05: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-06 [variable]
+### ✅display-01 [variable]
Source code
```scss
-$expressive-heading-06: (
- font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('semibold'),
- line-height: 1.25,
+$display-01: (
+ font-size: carbon--type-scale(10),
+ font-weight: carbon--font-weight('light'),
+ line-height: 1.19,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(9),
- line-height: 1.22,
+ font-size: carbon--type-scale(10),
),
lg: (
- font-size: carbon--type-scale(10),
- line-height: 1.19,
+ font-size: carbon--type-scale(12),
),
xlg: (
- font-size: carbon--type-scale(11),
+ font-size: carbon--type-scale(13),
line-height: 1.17,
),
max: (
- font-size: carbon--type-scale(13),
+ font-size: carbon--type-scale(15),
+ line-height: 1.13,
),
),
);
@@ -14073,25 +15329,31 @@ $expressive-heading-06: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-paragraph-01 [variable]
+### ✅display-01 [variable]
Source code
```scss
-$expressive-paragraph-01: (
- font-size: carbon--type-scale(6),
- font-weight: carbon--font-weight('light'),
- line-height: 1.334,
+$display-01: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.19,
letter-spacing: 0,
breakpoints: (
+ md: (
+ font-size: scale.type-scale(10),
+ ),
lg: (
- font-size: carbon--type-scale(7),
- line-height: 1.29,
+ font-size: scale.type-scale(12),
+ ),
+ xlg: (
+ font-size: scale.type-scale(13),
+ line-height: 1.17,
),
max: (
- font-size: carbon--type-scale(8),
- line-height: 1.25,
+ font-size: scale.type-scale(15),
+ line-height: 1.13,
),
),
);
@@ -14102,32 +15364,31 @@ $expressive-paragraph-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅quotation-01 [variable]
+### ✅display-02 [variable]
Source code
```scss
-$quotation-01: (
- font-size: carbon--type-scale(5),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.3,
+$display-02: (
+ font-size: carbon--type-scale(10),
+ font-weight: carbon--font-weight('semibold'),
+ line-height: 1.19,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(5),
+ font-size: carbon--type-scale(10),
),
lg: (
- font-size: carbon--type-scale(6),
- line-height: 1.334,
+ font-size: carbon--type-scale(12),
),
xlg: (
- font-size: carbon--type-scale(7),
- line-height: 1.29,
+ font-size: carbon--type-scale(13),
+ line-height: 1.16,
),
max: (
- font-size: carbon--type-scale(8),
- line-height: 1.25,
+ font-size: carbon--type-scale(15),
+ line-height: 1.13,
),
),
);
@@ -14138,32 +15399,31 @@ $quotation-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅quotation-02 [variable]
+### ✅display-02 [variable]
Source code
```scss
-$quotation-02: (
- font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('light'),
- line-height: 1.25,
+$display-02: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.19,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(9),
- line-height: 1.22,
+ font-size: scale.type-scale(10),
),
lg: (
- font-size: carbon--type-scale(10),
- line-height: 1.19,
+ font-size: scale.type-scale(12),
),
xlg: (
- font-size: carbon--type-scale(11),
- line-height: 1.17,
+ font-size: scale.type-scale(13),
+ line-height: 1.16,
),
max: (
- font-size: carbon--type-scale(13),
+ font-size: scale.type-scale(15),
+ line-height: 1.13,
),
),
);
@@ -14174,31 +15434,36 @@ $quotation-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅display-01 [variable]
+### ✅display-03 [variable]
Source code
```scss
-$display-01: (
+$display-03: (
font-size: carbon--type-scale(10),
font-weight: carbon--font-weight('light'),
line-height: 1.19,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(10),
+ font-size: carbon--type-scale(14),
+ line-height: 1.15,
),
lg: (
- font-size: carbon--type-scale(12),
+ font-size: carbon--type-scale(17),
+ line-height: 1.11,
+ letter-spacing: -0.64px,
),
xlg: (
- font-size: carbon--type-scale(13),
- line-height: 1.17,
+ font-size: carbon--type-scale(20),
+ line-height: 1.07,
+ letter-spacing: -0.64px,
),
max: (
- font-size: carbon--type-scale(15),
- line-height: 1.13,
+ font-size: carbon--type-scale(23),
+ line-height: 1.05,
+ letter-spacing: -0.96px,
),
),
);
@@ -14209,31 +15474,36 @@ $display-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅display-02 [variable]
+### ✅display-03 [variable]
Source code
```scss
-$display-02: (
- font-size: carbon--type-scale(10),
- font-weight: carbon--font-weight('semibold'),
+$display-03: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('light'),
line-height: 1.19,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(10),
+ font-size: scale.type-scale(14),
+ line-height: 1.15,
),
lg: (
- font-size: carbon--type-scale(12),
+ font-size: scale.type-scale(17),
+ line-height: 1.11,
+ letter-spacing: -0.64px,
),
xlg: (
- font-size: carbon--type-scale(13),
- line-height: 1.16,
+ font-size: scale.type-scale(20),
+ line-height: 1.07,
+ letter-spacing: -0.64px,
),
max: (
- font-size: carbon--type-scale(15),
- line-height: 1.13,
+ font-size: scale.type-scale(23),
+ line-height: 1.05,
+ letter-spacing: -0.96px,
),
),
);
@@ -14244,15 +15514,15 @@ $display-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅display-03 [variable]
+### ✅display-04 [variable]
Source code
```scss
-$display-03: (
+$display-04: (
font-size: carbon--type-scale(10),
- font-weight: carbon--font-weight('light'),
+ font-weight: carbon--font-weight('semibold'),
line-height: 1.19,
letter-spacing: 0,
breakpoints: (
@@ -14291,27 +15561,27 @@ $display-03: (
```scss
$display-04: (
- font-size: carbon--type-scale(10),
- font-weight: carbon--font-weight('semibold'),
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('semibold'),
line-height: 1.19,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(14),
+ font-size: scale.type-scale(14),
line-height: 1.15,
),
lg: (
- font-size: carbon--type-scale(17),
+ font-size: scale.type-scale(17),
line-height: 1.11,
letter-spacing: -0.64px,
),
xlg: (
- font-size: carbon--type-scale(20),
+ font-size: scale.type-scale(20),
line-height: 1.07,
letter-spacing: -0.64px,
),
max: (
- font-size: carbon--type-scale(23),
+ font-size: scale.type-scale(23),
line-height: 1.05,
letter-spacing: -0.96px,
),
@@ -14371,7 +15641,55 @@ $tokens: (
- **Type**: `Map`
- **Used by**:
- [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
+ - [type-classes [mixin]](#type-classes-mixin)
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
+ - [type-style [mixin]](#type-style-mixin)
+
+### ✅tokens [variable]
+
+
+Source code
+
+```scss
+$tokens: (
+ caption-01: $caption-01,
+ label-01: $label-01,
+ helper-text-01: $helper-text-01,
+ body-short-01: $body-short-01,
+ body-short-02: $body-short-02,
+ body-long-01: $body-long-01,
+ body-long-02: $body-long-02,
+ code-01: $code-01,
+ code-02: $code-02,
+ heading-01: $heading-01,
+ heading-02: $heading-02,
+ productive-heading-01: $productive-heading-01,
+ productive-heading-02: $productive-heading-02,
+ productive-heading-03: $productive-heading-03,
+ productive-heading-04: $productive-heading-04,
+ productive-heading-05: $productive-heading-05,
+ productive-heading-06: $productive-heading-06,
+ productive-heading-07: $productive-heading-07,
+ expressive-paragraph-01: $expressive-paragraph-01,
+ expressive-heading-01: $expressive-heading-01,
+ expressive-heading-02: $expressive-heading-02,
+ expressive-heading-03: $expressive-heading-03,
+ expressive-heading-04: $expressive-heading-04,
+ expressive-heading-05: $expressive-heading-05,
+ expressive-heading-06: $expressive-heading-06,
+ quotation-01: $quotation-01,
+ quotation-02: $quotation-02,
+ display-01: $display-01,
+ display-02: $display-02,
+ display-03: $display-03,
+ display-04: $display-04,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
### ✅properties [mixin]
@@ -14398,6 +15716,30 @@ $tokens: (
- **Used by**:
- [fluid-type [mixin]](#fluid-type-mixin)
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
+ - [type-style [mixin]](#type-style-mixin)
+
+### ✅properties [mixin]
+
+
+Source code
+
+```scss
+@mixin properties($map) {
+ @each $name, $value in $map {
+ #{$name}: $value;
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------ | ----------- | ----- | ------------- |
+| `$map` | — | `Map` | — |
+
+- **Group**: [@carbon/type](#carbontype)
### ✅strip-unit [function]
@@ -14423,6 +15765,28 @@ $tokens: (
- **Used by**:
- [fluid-type-size [mixin]](#fluid-type-size-mixin)
+### ✅strip-unit [function]
+
+
+Source code
+
+```scss
+@function strip-unit($value) {
+ @return $value / ($value * 0 + 1);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| -------- | ----------------- | -------- | ------------- |
+| `$value` | Number with units | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Returns**: `Number` Without units
+
### ✅fluid-type [mixin]
This helper includes fluid type styles for the given token value. Fluid type
@@ -14477,6 +15841,59 @@ https://css-tricks.com/snippets/css/fluid-typography/
- [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
- **Used by**:
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
+ - [type-style [mixin]](#type-style-mixin)
+
+### ✅fluid-type [mixin]
+
+This helper includes fluid type styles for the given token value. Fluid type
+means that the `font-size` is computed using `calc()` in order to be determined
+by the screen size instead of a breakpoint. As a result, fluid styles should be
+used with caution in fixed width contexts.
+
+In addition, we make use of %-based line-heights so that the line-height of each
+type style is computed correctly due to the dynamic nature of the `font-size`.
+
+Most of the logic for this work comes from CSS Tricks:
+https://css-tricks.com/snippets/css/fluid-typography/
+
+
+Source code
+
+```scss
+@mixin fluid-type($type-styles, $breakpoints: $grid-breakpoints) {
+ // Include the initial styles for the given token by default without any
+ // media query guard. This includes `font-size` as a fallback in the case
+ // that a browser does not support `calc()`
+ @include properties(map.remove($type-styles, breakpoints));
+ // We also need to include the `sm` styles by default since they don't
+ // appear in the fluid styles for tokens
+ @include fluid-type-size($type-styles, sm, $breakpoints);
+
+ // Finally, we need to go through all the breakpoints defined in the type
+ // token and apply the properties and fluid type size for that given
+ // breakpoint
+ @each $name, $values in map.get($type-styles, breakpoints) {
+ @include layout.breakpoint($name) {
+ @include properties($values);
+ @include fluid-type-size($type-styles, $name, $breakpoints);
+ }
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| -------------- | ------------------------------- | ----- | ------------------- |
+| `$type-styles` | The value of a given type token | `Map` | — |
+| `$breakpoints` | Custom breakpoints to use | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [properties [mixin]](#properties-mixin)
+ - [fluid-type-size [mixin]](#fluid-type-size-mixin)
### ✅fluid-type-size [mixin]
@@ -14580,6 +15997,115 @@ Computes the fluid `font-size` for a given type style and breakpoint
- **Used by**:
- [fluid-type [mixin]](#fluid-type-mixin)
+### ✅fluid-type-size [mixin]
+
+Computes the fluid `font-size` for a given type style and breakpoint
+
+
+Source code
+
+```scss
+@mixin fluid-type-size($type-styles, $name, $breakpoints: $grid-breakpoints) {
+ // Get the information about the breakpoint we're currently working in. Useful
+ // for getting initial width information
+ $breakpoint: map.get($breakpoints, $name);
+
+ // Our fluid styles are captured under the 'breakpoints' property in our type
+ // styles map. These define what values to treat as `max-` variables below
+ $fluid-sizes: map.get($type-styles, breakpoints);
+ $fluid-breakpoint: ();
+ // Special case for `sm` because the styles for small are on the type style
+ // directly
+ @if $name == sm {
+ $fluid-breakpoint: map.remove($type-styles, breakpoints);
+ } @else {
+ $fluid-breakpoint: map.get($fluid-sizes, $name);
+ }
+
+ // Initialize our font-sizes to the default size for the type style
+ $max-font-size: map.get($type-styles, font-size);
+ $min-font-size: map.get($type-styles, font-size);
+ @if map.has-key($fluid-breakpoint, font-size) {
+ $min-font-size: map.get($fluid-breakpoint, font-size);
+ }
+
+ // Initialize our min and max width to the width of the current breakpoint
+ $max-vw: map.get($breakpoint, width);
+ $min-vw: map.get($breakpoint, width);
+
+ // We can use `breakpoint-next` to see if there is another breakpoint we can
+ // use to update `max-font-size` and `max-vw` with larger values
+ $next-breakpoint-available: layout.breakpoint-next($name, $breakpoints);
+ $next-fluid-breakpoint-name: null;
+
+ // We need to figure out what the next available fluid breakpoint is for our
+ // given $type-styles. In this loop we try and iterate through breakpoints
+ // until we either manually set $next-breakpoint-available to null or
+ // `breakpoint-next` returns null.
+ @while $next-breakpoint-available {
+ @if map.has-key($fluid-sizes, $next-breakpoint-available) {
+ $next-fluid-breakpoint-name: $next-breakpoint-available;
+ $next-breakpoint-available: null;
+ } @else {
+ $next-breakpoint-available: layout.breakpoint-next(
+ $next-breakpoint-available,
+ $breakpoints
+ );
+ }
+ }
+
+ // If we have found the next available fluid breakpoint name, then we know
+ // that we have values that we can use to set max-font-size and max-vw as both
+ // values derive from the next breakpoint
+ @if $next-fluid-breakpoint-name {
+ $next-fluid-breakpoint: map.get($breakpoints, $next-fluid-breakpoint-name);
+ $max-font-size: map.get(
+ map.get($fluid-sizes, $next-fluid-breakpoint-name),
+ font-size
+ );
+ $max-vw: map.get($next-fluid-breakpoint, width);
+
+ // prettier-ignore
+ font-size: calc(#{$min-font-size} +
+ #{strip-unit($max-font-size - $min-font-size)} *
+ ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
+ );
+ } @else {
+ // Otherwise, just default to setting the font size found from the type
+ // style or the given fluid breakpoint in the type style
+ font-size: $min-font-size;
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| -------------- | ------------------------------------------------------ | -------- | ------------------- |
+| `$type-styles` | The styles for a given token | `Map` | — |
+| `$name` | The name of the breakpoint to which we apply the fluid | `String` | — |
+| `$breakpoints` | The breakpoints for the grid system | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [breakpoint-next [function]](#breakpoint-next-function)
+ - [strip-unit [function]](#strip-unit-function)
+
+### ❌custom-property-prefix [variable]
+
+
+Source code
+
+```scss
+$custom-property-prefix: 'cds';
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+
### ❌custom-property-prefix [variable]
@@ -14616,6 +16142,29 @@ $custom-property-prefix: 'cds';
- [custom-property-prefix [variable]](#custom-property-prefix-variable)
- **Used by**:
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
+ - [type-style [mixin]](#type-style-mixin)
+
+### ❌custom-properties [mixin]
+
+
+Source code
+
+```scss
+@mixin custom-properties() {
+ @each $property, $value in $value {
+ #{$property}: var(
+ --#{$custom-property-prefix}-#{$name}-#{$property},
+ #{$value}
+ );
+ }
+}
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [custom-property-prefix [variable]](#custom-property-prefix-variable)
### ✅carbon--type-style [mixin]
@@ -14681,6 +16230,106 @@ fixed contexts.
- [tooltip [mixin]](#tooltip-mixin)
- [carbon-switcher [mixin]](#carbon-switcher-mixin)
+### ✅type-style [mixin]
+
+Helper mixin to include the styles for a given token in any selector in your
+project. Also includes an optional fluid option that will enable fluid styles
+for the token if they are defined. Fluid styles will cause the token's font-size
+to be computed based on the viewport size. As a result, use with caution in
+fixed contexts.
+
+
+Source code
+
+```scss
+@mixin type-style($name, $fluid: false, $breakpoints: $grid-breakpoints) {
+ @if not map.has-key($tokens, $name) {
+ @error 'Unable to find a token with the name: `#{$name}`';
+ }
+
+ $token: map.get($tokens, $name);
+
+ // If $fluid is set to true and the token has breakpoints defined for fluid
+ // styles, delegate to the fluid-type helper for the given token
+ @if $fluid == true and map.has-key($token, 'breakpoints') {
+ @include fluid-type($token, $breakpoints);
+ } @else {
+ @if global-variable-exists('feature-flags') and
+ map.get($feature-flags, 'enable-css-custom-properties')
+ {
+ @include custom-properties($name, $token);
+ } @else {
+ // Otherwise, we just include all the property declarations directly on the
+ // selector
+ @include properties(map.remove($token, 'breakpoints'));
+ }
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| -------------- | ----------------------------------------------- | --------- | ------------------- |
+| `$name` | The name of the token to get the styles for | `String` | — |
+| `$fluid` | Specify whether to include fluid styles for the | `Boolean` | `false` |
+| `$breakpoints` | Provide a custom breakpoint map to use | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [fluid-type [mixin]](#fluid-type-mixin)
+ - [custom-properties [mixin]](#custom-properties-mixin)
+ - [properties [mixin]](#properties-mixin)
+ - [tokens [variable]](#tokens-variable)
+- **Used by**:
+ - [type-classes [mixin]](#type-classes-mixin)
+ - [default-type [mixin]](#default-type-mixin)
+ - [accordion [mixin]](#accordion-mixin)
+ - [breadcrumb [mixin]](#breadcrumb-mixin)
+ - [button-base [mixin]](#button-base-mixin)
+ - [checkbox [mixin]](#checkbox-mixin)
+ - [snippet [mixin]](#snippet-mixin)
+ - [bx--snippet [mixin]](#bx--snippet-mixin)
+ - [content-switcher [mixin]](#content-switcher-mixin)
+ - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
+ - [data-table-core [mixin]](#data-table-core-mixin)
+ - [date-picker [mixin]](#date-picker-mixin)
+ - [dropdown [mixin]](#dropdown-mixin)
+ - [file-uploader [mixin]](#file-uploader-mixin)
+ - [form [mixin]](#form-mixin)
+ - [inline-loading [mixin]](#inline-loading-mixin)
+ - [link [mixin]](#link-mixin)
+ - [lists [mixin]](#lists-mixin)
+ - [listbox [mixin]](#listbox-mixin)
+ - [modal [mixin]](#modal-mixin)
+ - [inline-notifications [mixin]](#inline-notifications-mixin)
+ - [toast-notifications [mixin]](#toast-notifications-mixin)
+ - [number-input [mixin]](#number-input-mixin)
+ - [overflow-menu [mixin]](#overflow-menu-mixin)
+ - [pagination [mixin]](#pagination-mixin)
+ - [pagination-nav [mixin]](#pagination-nav-mixin)
+ - [progress-indicator [mixin]](#progress-indicator-mixin)
+ - [radio-button [mixin]](#radio-button-mixin)
+ - [search [mixin]](#search-mixin)
+ - [select [mixin]](#select-mixin)
+ - [slider [mixin]](#slider-mixin)
+ - [tabs [mixin]](#tabs-mixin)
+ - [tags [mixin]](#tags-mixin)
+ - [text-area [mixin]](#text-area-mixin)
+ - [text-input [mixin]](#text-input-mixin)
+ - [tile [mixin]](#tile-mixin)
+ - [time-picker [mixin]](#time-picker-mixin)
+ - [toggle [mixin]](#toggle-mixin)
+ - [toolbar [mixin]](#toolbar-mixin)
+ - [tooltip--icon [mixin]](#tooltip--icon-mixin)
+ - [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
+ - [tooltip [mixin]](#tooltip-mixin)
+ - [carbon-header [mixin]](#carbon-header-mixin)
+ - [product-switcher [mixin]](#product-switcher-mixin)
+ - [carbon-side-nav [mixin]](#carbon-side-nav-mixin)
+
## accordion
### ❌accordion [mixin]
@@ -14933,6 +16582,7 @@ Accordion styles
- **Group**: [accordion](#accordion)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [carbon--breakpoint-up [mixin]](#carbon--breakpoint-up-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
@@ -15032,6 +16682,7 @@ Breadcrumb styles
- **Group**: [breadcrumb](#breadcrumb)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
@@ -15577,6 +17228,7 @@ Button base styles
- **Group**: [button](#button)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [disabled-03 [variable]](#disabled-03-variable)
@@ -15832,6 +17484,7 @@ Checkbox styles
- **Group**: [checkbox](#checkbox)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [carbon--spacing-02 [variable]](#carbon--spacing-02-variable)
@@ -16432,6 +18085,7 @@ Code snippet styles
- **Group**: [code-snippet](#code-snippet)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [bx--snippet [mixin]](#bx--snippet-mixin)
- [carbon--font-family [mixin]](#carbon--font-family-mixin)
- [rem [function]](#rem-function)
@@ -16477,6 +18131,7 @@ Code snippet base styles
- **Group**: [code-snippet](#code-snippet)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [field-01 [variable]](#field-01-variable)
- **Used by**:
@@ -16493,6 +18148,14 @@ Combo box styles
```scss
@mixin combo-box() {
+ .#{$prefix}--combo-box:hover {
+ background-color: $field-01;
+ }
+
+ .#{$prefix}--combo-box.#{$prefix}--list-box--light:hover {
+ background-color: $field-02;
+ }
+
.#{$prefix}--combo-box .#{$prefix}--text-input::-ms-clear {
display: none;
}
@@ -16521,6 +18184,8 @@ Combo box styles
- **Group**: [combo-box](#combo-box)
- **Requires**:
- [prefix [variable]](#prefix-variable)
+ - [field-01 [variable]](#field-01-variable)
+ - [field-02 [variable]](#field-02-variable)
- [ui-03 [variable]](#ui-03-variable)
## content-switcher
@@ -16711,6 +18376,7 @@ Content switcher styles
- **Group**: [content-switcher](#content-switcher)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
@@ -16811,6 +18477,14 @@ Data table action styles
pointer-events: all;
}
+ .#{$prefix}--toolbar-search-container-expandable
+ .#{$prefix}--search--disabled
+ .#{$prefix}--search-magnifier {
+ background: $disabled-01;
+ cursor: not-allowed;
+ transition: background-color none;
+ }
+
.#{$prefix}--toolbar-search-container-expandable
.#{$prefix}--search
.#{$prefix}--search-magnifier:focus {
@@ -16823,6 +18497,18 @@ Data table action styles
background: $hover-field;
}
+ .#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-disabled {
+ cursor: not-allowed;
+ }
+
+ .#{$prefix}--toolbar-search-container-expandable
+ .#{$prefix}--search--disabled
+ .#{$prefix}--search-magnifier:hover {
+ background: $disabled-01;
+ cursor: not-allowed;
+ transition: background-color none;
+ }
+
.#{$prefix}--toolbar-search-container-expandable
.#{$prefix}--search
.#{$prefix}--label {
@@ -17306,6 +18992,10 @@ Data table action styles
}
}
+ .#{$prefix}--search--disabled .#{$prefix}--search-magnifier:hover {
+ background: transparent;
+ }
+
//-------------------------------------------------
// SMALL BATCH ACTIONS
//-------------------------------------------------
@@ -17346,11 +19036,13 @@ Data table action styles
- **Group**: [data-table](#data-table)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [layout-04 [variable]](#layout-04-variable)
- [ui-01 [variable]](#ui-01-variable)
- [spacing-05 [variable]](#spacing-05-variable)
+ - [disabled-01 [variable]](#disabled-01-variable)
- [hover-field [variable]](#hover-field-variable)
- [hover-ui [variable]](#hover-ui-variable)
- [focus [variable]](#focus-variable)
@@ -18107,6 +19799,7 @@ Data table core styles
- **Group**: [data-table](#data-table)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [text-overflow [mixin]](#text-overflow-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
@@ -18826,6 +20519,11 @@ Date picker styles
width: rem(288px);
}
+ .#{$prefix}--date-picker
+ .#{$prefix}--date-picker-input__wrapper--warn
+ ~ .#{$prefix}--form-requirement {
+ color: $text-01;
+ }
.#{$prefix}--date-picker__input {
@include reset;
@include type-style('code-02');
@@ -18955,11 +20653,12 @@ Date picker styles
- **Group**: [date-picker](#date-picker)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [field-02 [variable]](#field-02-variable)
- - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
- [text-01 [variable]](#text-01-variable)
+ - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
- [field-01 [variable]](#field-01-variable)
- [ui-04 [variable]](#ui-04-variable)
- [disabled-02 [variable]](#disabled-02-variable)
@@ -18982,7 +20681,7 @@ Dropdown styles
@mixin dropdown() {
.#{$prefix}--dropdown__wrapper--inline {
display: inline-grid;
- grid-gap: rem(4px);
+ grid-gap: rem(24px);
grid-template: auto auto / auto min-content;
align-items: center;
@@ -19099,6 +20798,10 @@ Dropdown styles
.#{$prefix}--dropdown--light {
background-color: $field-02;
+
+ &:hover {
+ background-color: $hover-light-ui;
+ }
}
.#{$prefix}--dropdown--up .#{$prefix}--dropdown-list {
@@ -19441,6 +21144,7 @@ Dropdown styles
- **Group**: [dropdown](#dropdown)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [text-01 [variable]](#text-01-variable)
@@ -19452,6 +21156,7 @@ Dropdown styles
- [spacing-08 [variable]](#spacing-08-variable)
- [support-01 [variable]](#support-01-variable)
- [field-02 [variable]](#field-02-variable)
+ - [hover-light-ui [variable]](#hover-light-ui-variable)
- [ui-05 [variable]](#ui-05-variable)
- [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
- [ui-01 [variable]](#ui-01-variable)
@@ -19797,6 +21502,7 @@ File uploader styles
- **Group**: [file-uploader](#file-uploader)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
@@ -19990,6 +21696,7 @@ Form styles
- **Group**: [form](#form)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [carbon--font-family [function]](#carbon--font-family-function)
- [prefix [variable]](#prefix-variable)
@@ -20103,6 +21810,7 @@ Inline loading styles
- **Group**: [inline-loading](#inline-loading)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [loading--small\_\_gap [variable]](#loading--small__gap-variable)
@@ -20203,6 +21911,7 @@ Link styles
- **Group**: [link](#link)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [prefix [variable]](#prefix-variable)
- [link-01 [variable]](#link-01-variable)
- [hover-primary-text [variable]](#hover-primary-text-variable)
@@ -20294,6 +22003,7 @@ List styles
- **Group**: [list](#list)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [text-01 [variable]](#text-01-variable)
@@ -20476,6 +22186,10 @@ List box styles
// Light variation for 'list-box'
.#{$prefix}--list-box--light {
background-color: $field-02;
+
+ &:hover {
+ background-color: $hover-light-ui;
+ }
}
.#{$prefix}--list-box--light .#{$prefix}--list-box__menu {
@@ -20769,7 +22483,7 @@ List box styles
}
.#{$prefix}--list-box__selection > svg {
- fill: $icon-02;
+ fill: $icon-01;
// Windows, Firefox HCM Fix
@media screen and (-ms-high-contrast: active),
@@ -20916,6 +22630,10 @@ List box styles
}
}
+ .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:hover {
+ background-color: $hover-light-ui;
+ }
+
.#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item {
height: rem(32px);
}
@@ -21151,6 +22869,7 @@ List box styles
- **Group**: [list-box](#list-box)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [tag-theme [mixin]](#tag-theme-mixin)
- [rem [function]](#rem-function)
- [carbon--mini-units [function]](#carbon--mini-units-function)
@@ -21165,6 +22884,7 @@ List box styles
- [carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
- [support-01 [variable]](#support-01-variable)
- [support-03 [variable]](#support-03-variable)
+ - [hover-light-ui [variable]](#hover-light-ui-variable)
- [decorative-01 [variable]](#decorative-01-variable)
- [disabled-02 [variable]](#disabled-02-variable)
- [carbon--spacing-09 [variable]](#carbon--spacing-09-variable)
@@ -21172,7 +22892,6 @@ List box styles
- [carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
- [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
- [icon-01 [variable]](#icon-01-variable)
- - [icon-02 [variable]](#icon-02-variable)
- [inverse-01 [variable]](#inverse-01-variable)
- [inverse-02 [variable]](#inverse-02-variable)
- [hover-secondary [variable]](#hover-secondary-variable)
@@ -21760,6 +23479,7 @@ Modal styles
- **Group**: [modal](#modal)
- **Requires**:
- [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [overlay-01 [variable]](#overlay-01-variable)
@@ -21788,6 +23508,15 @@ Multi select styles
```scss
@mixin multiselect() {
+ .#{$prefix}--multi-select .#{$prefix}--tag {
+ min-width: auto;
+ margin: 0 $carbon--spacing-03 0 0;
+ }
+
+ .#{$prefix}--multi-select--filterable .#{$prefix}--tag {
+ margin: 0 $carbon--spacing-03 0 $carbon--spacing-05;
+ }
+
.#{$prefix}--multi-select .#{$prefix}--list-box__menu {
min-width: auto;
}
@@ -21826,14 +23555,6 @@ Multi select styles
color: $text-01;
}
- .#{$prefix}--multi-select--filterable .#{$prefix}--text-input {
- padding-left: $spacing-03;
- }
-
- .#{$prefix}--multi-select--filterable:hover .#{$prefix}--text-input {
- background-color: $hover-ui;
- }
-
.#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover
.#{$prefix}--text-input {
background-color: $field-01;
@@ -21860,9 +23581,9 @@ Multi select styles
- **Requires**:
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
+ - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
+ - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
- [text-01 [variable]](#text-01-variable)
- - [spacing-03 [variable]](#spacing-03-variable)
- - [hover-ui [variable]](#hover-ui-variable)
- [field-01 [variable]](#field-01-variable)
- [spacing-05 [variable]](#spacing-05-variable)
@@ -22182,6 +23903,7 @@ Inline notification styles
- **Requires**:
- [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
- [notification--experimental [mixin]](#notification--experimental-mixin)
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
@@ -22486,6 +24208,7 @@ Toast notification styles
- **Requires**:
- [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
- [notification--experimental [mixin]](#notification--experimental-mixin)
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
@@ -22799,6 +24522,7 @@ Number input styles
- **Group**: [number-input](#number-input)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [carbon--font-family [function]](#carbon--font-family-function)
- [prefix [variable]](#prefix-variable)
@@ -23158,6 +24882,7 @@ Overflow menu styles
- **Group**: [overflow-menu](#overflow-menu)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [hover-ui [variable]](#hover-ui-variable)
@@ -23381,6 +25106,7 @@ Pagination styles
- **Group**: [pagination](#pagination)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
- [carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
- [rem [function]](#rem-function)
@@ -23795,6 +25521,7 @@ Pagination nav base styles
- **Group**: [pagination-nav](#pagination-nav)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [pseudo-underline [mixin]](#pseudo-underline-mixin)
- [prefix [variable]](#prefix-variable)
@@ -24110,6 +25837,7 @@ Progress indicator styles
- **Group**: [progress-indicator](#progress-indicator)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
@@ -24309,6 +26037,7 @@ Radio button styles
- **Group**: [radio-button](#radio-button)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [carbon--mini-units [function]](#carbon--mini-units-function)
- [prefix [variable]](#prefix-variable)
@@ -24591,6 +26320,7 @@ Search styles
- **Group**: [search](#search)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
@@ -24856,6 +26586,7 @@ Select styles
- **Group**: [select](#select)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [carbon--mini-units [function]](#carbon--mini-units-function)
- [prefix [variable]](#prefix-variable)
@@ -25107,6 +26838,7 @@ Slider styles
- **Group**: [slider](#slider)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
@@ -26049,6 +27781,7 @@ Tabs styles
- **Group**: [tabs](#tabs)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
@@ -26359,6 +28092,7 @@ Tag styles
- **Group**: [tag](#tag)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [tag-theme [mixin]](#tag-theme-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
@@ -26472,6 +28206,7 @@ Text area styles
- **Group**: [text-area](#text-area)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
@@ -26819,6 +28554,7 @@ Text input styles
- **Group**: [text-input](#text-input)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
@@ -27042,6 +28778,7 @@ Tile styles
- **Group**: [tile](#tile)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [prefix [variable]](#prefix-variable)
- [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
- [ui-01 [variable]](#ui-01-variable)
@@ -27140,6 +28877,7 @@ Time picker styles
- **Group**: [time-picker](#time-picker)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [carbon--spacing-01 [variable]](#carbon--spacing-01-variable)
@@ -27622,6 +29360,7 @@ Toggle styles
- **Group**: [toggle](#toggle)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [carbon--rem [function]](#carbon--rem-function)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
@@ -27768,6 +29507,7 @@ Toolbar styles
- **Group**: [toolbar](#toolbar)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [text-02 [variable]](#text-02-variable)
@@ -27851,6 +29591,7 @@ Toolbar styles
- **Group**: [tooltip](#tooltip)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [inverse-02 [variable]](#inverse-02-variable)
- [inverse-01 [variable]](#inverse-01-variable)
@@ -28045,6 +29786,7 @@ Toolbar styles
- **Group**: [tooltip](#tooltip)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
- [text-01 [variable]](#text-01-variable)
@@ -28539,6 +30281,7 @@ Tooltip styles
- **Group**: [tooltip](#tooltip)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
- [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
- [tooltip--icon--legacy [mixin]](#tooltip--icon--legacy-mixin)
@@ -29200,6 +30943,7 @@ UI shell header
- **Group**: [ui-shell](#ui-shell)
- **Requires**:
- [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
+ - [type-style [mixin]](#type-style-mixin)
- [mini-units [function]](#mini-units-function)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
@@ -29620,6 +31364,7 @@ UI shell product switcher
- **Group**: [ui-shell](#ui-shell)
- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
- [mini-units [function]](#mini-units-function)
- [prefix [variable]](#prefix-variable)
- [shell-panel-bg-01 [variable]](#shell-panel-bg-01-variable)
@@ -30340,6 +32085,7 @@ UI shell side nav
- [carbon--breakpoint-down [mixin]](#carbon--breakpoint-down-mixin)
- [expanded [mixin]](#expanded-mixin)
- [text-overflow [mixin]](#text-overflow-mixin)
+ - [type-style [mixin]](#type-style-mixin)
- [mini-units [function]](#mini-units-function)
- [rem [function]](#rem-function)
- [prefix [variable]](#prefix-variable)
diff --git a/packages/components/package.json b/packages/components/package.json
index 52be5fa07518..8c2252426889 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,7 +1,7 @@
{
"name": "carbon-components",
"description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
- "version": "10.27.0",
+ "version": "10.28.0-rc.0",
"license": "Apache-2.0",
"main": "umd/index.js",
"module": "es/index.js",
@@ -85,10 +85,10 @@
"@babel/preset-env": "^7.10.0",
"@babel/preset-react": "^7.10.0",
"@babel/runtime": "^7.10.0",
- "@carbon/cli": "^10.18.0",
- "@carbon/elements": "^10.26.0",
- "@carbon/icons-handlebars": "^10.24.0",
- "@carbon/icons-react": "^10.24.0",
+ "@carbon/cli": "^10.19.0-rc.0",
+ "@carbon/elements": "^10.27.0-rc.0",
+ "@carbon/icons-handlebars": "^10.25.0-rc.0",
+ "@carbon/icons-react": "^10.25.0-rc.0",
"@carbon/test-utils": "^10.14.0",
"@frctl/fractal": "^1.1.0",
"@rollup/plugin-babel": "^5.2.2",
diff --git a/packages/components/src/components/combo-box/_combo-box.scss b/packages/components/src/components/combo-box/_combo-box.scss
index a5659e2ed004..0b7de8c49506 100644
--- a/packages/components/src/components/combo-box/_combo-box.scss
+++ b/packages/components/src/components/combo-box/_combo-box.scss
@@ -18,6 +18,14 @@
/// @access private
/// @group combo-box
@mixin combo-box {
+ .#{$prefix}--combo-box:hover {
+ background-color: $field-01;
+ }
+
+ .#{$prefix}--combo-box.#{$prefix}--list-box--light:hover {
+ background-color: $field-02;
+ }
+
.#{$prefix}--combo-box .#{$prefix}--text-input::-ms-clear {
display: none;
}
diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
index e6ca1b01d5f2..2bc60927df1e 100644
--- a/packages/components/src/components/data-table/_data-table-action.scss
+++ b/packages/components/src/components/data-table/_data-table-action.scss
@@ -84,6 +84,14 @@
pointer-events: all;
}
+ .#{$prefix}--toolbar-search-container-expandable
+ .#{$prefix}--search--disabled
+ .#{$prefix}--search-magnifier {
+ background: $disabled-01;
+ cursor: not-allowed;
+ transition: background-color none;
+ }
+
.#{$prefix}--toolbar-search-container-expandable
.#{$prefix}--search
.#{$prefix}--search-magnifier:focus {
@@ -96,6 +104,18 @@
background: $hover-field;
}
+ .#{$prefix}--toolbar-action.#{$prefix}--toolbar-search-container-disabled {
+ cursor: not-allowed;
+ }
+
+ .#{$prefix}--toolbar-search-container-expandable
+ .#{$prefix}--search--disabled
+ .#{$prefix}--search-magnifier:hover {
+ background: $disabled-01;
+ cursor: not-allowed;
+ transition: background-color none;
+ }
+
.#{$prefix}--toolbar-search-container-expandable
.#{$prefix}--search
.#{$prefix}--label {
@@ -579,6 +599,10 @@
}
}
+ .#{$prefix}--search--disabled .#{$prefix}--search-magnifier:hover {
+ background: transparent;
+ }
+
//-------------------------------------------------
// SMALL BATCH ACTIONS
//-------------------------------------------------
diff --git a/packages/components/src/components/date-picker/_date-picker.scss b/packages/components/src/components/date-picker/_date-picker.scss
index 9840324ee274..e776a8e1210b 100644
--- a/packages/components/src/components/date-picker/_date-picker.scss
+++ b/packages/components/src/components/date-picker/_date-picker.scss
@@ -69,6 +69,11 @@
width: rem(288px);
}
+ .#{$prefix}--date-picker
+ .#{$prefix}--date-picker-input__wrapper--warn
+ ~ .#{$prefix}--form-requirement {
+ color: $text-01;
+ }
.#{$prefix}--date-picker__input {
@include reset;
@include type-style('code-02');
diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss
index 1c1e44383f7f..074c3f72897a 100644
--- a/packages/components/src/components/dropdown/_dropdown.scss
+++ b/packages/components/src/components/dropdown/_dropdown.scss
@@ -23,7 +23,7 @@
@mixin dropdown {
.#{$prefix}--dropdown__wrapper--inline {
display: inline-grid;
- grid-gap: rem(4px);
+ grid-gap: rem(24px);
grid-template: auto auto / auto min-content;
align-items: center;
@@ -140,6 +140,10 @@
.#{$prefix}--dropdown--light {
background-color: $field-02;
+
+ &:hover {
+ background-color: $hover-light-ui;
+ }
}
.#{$prefix}--dropdown--up .#{$prefix}--dropdown-list {
diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
index 56ae3cd629fe..5c7d63820b73 100644
--- a/packages/components/src/components/list-box/_list-box.scss
+++ b/packages/components/src/components/list-box/_list-box.scss
@@ -147,6 +147,10 @@ $list-box-menu-width: rem(300px);
// Light variation for 'list-box'
.#{$prefix}--list-box--light {
background-color: $field-02;
+
+ &:hover {
+ background-color: $hover-light-ui;
+ }
}
.#{$prefix}--list-box--light .#{$prefix}--list-box__menu {
@@ -440,7 +444,7 @@ $list-box-menu-width: rem(300px);
}
.#{$prefix}--list-box__selection > svg {
- fill: $icon-02;
+ fill: $icon-01;
// Windows, Firefox HCM Fix
@media screen and (-ms-high-contrast: active),
@@ -587,6 +591,10 @@ $list-box-menu-width: rem(300px);
}
}
+ .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:hover {
+ background-color: $hover-light-ui;
+ }
+
.#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item {
height: rem(32px);
}
diff --git a/packages/components/src/components/multi-select/_multi-select.scss b/packages/components/src/components/multi-select/_multi-select.scss
index a624625db62f..725e651726a7 100644
--- a/packages/components/src/components/multi-select/_multi-select.scss
+++ b/packages/components/src/components/multi-select/_multi-select.scss
@@ -18,6 +18,15 @@
/// @access private
/// @group multi-select
@mixin multiselect {
+ .#{$prefix}--multi-select .#{$prefix}--tag {
+ min-width: auto;
+ margin: 0 $carbon--spacing-03 0 0;
+ }
+
+ .#{$prefix}--multi-select--filterable .#{$prefix}--tag {
+ margin: 0 $carbon--spacing-03 0 $carbon--spacing-05;
+ }
+
.#{$prefix}--multi-select .#{$prefix}--list-box__menu {
min-width: auto;
}
@@ -56,14 +65,6 @@
color: $text-01;
}
- .#{$prefix}--multi-select--filterable .#{$prefix}--text-input {
- padding-left: $spacing-03;
- }
-
- .#{$prefix}--multi-select--filterable:hover .#{$prefix}--text-input {
- background-color: $hover-ui;
- }
-
.#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover
.#{$prefix}--text-input {
background-color: $field-01;
diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md
index 6bb421129ec2..d8370b8d8783 100644
--- a/packages/elements/docs/sass.md
+++ b/packages/elements/docs/sass.md
@@ -307,64 +307,118 @@
- [✅icon-size-02 [variable]](#icon-size-02-variable)
- [@carbon/type](#carbontype)
- [✅carbon--type-classes [mixin]](#carbon--type-classes-mixin)
+ - [✅type-classes [mixin]](#type-classes-mixin)
- [✅carbon--font-families [variable]](#carbon--font-families-variable)
+ - [✅font-families [variable]](#font-families-variable)
- [✅carbon--font-family [function]](#carbon--font-family-function)
+ - [✅font-family [function]](#font-family-function)
- [✅carbon--font-family [mixin]](#carbon--font-family-mixin)
+ - [✅font-family [mixin]](#font-family-mixin)
- [✅carbon--font-weights [variable]](#carbon--font-weights-variable)
+ - [✅font-weights [variable]](#font-weights-variable)
- [✅carbon--font-weight [function]](#carbon--font-weight-function)
+ - [✅font-weight [function]](#font-weight-function)
- [✅carbon--font-weight [mixin]](#carbon--font-weight-mixin)
+ - [✅font-weight [mixin]](#font-weight-mixin)
- [✅carbon--font-face-mono [mixin]](#carbon--font-face-mono-mixin)
- [✅prefix [variable]](#prefix-variable)
+ - [✅prefix [variable]](#prefix-variable)
- [✅carbon--type-reset [mixin]](#carbon--type-reset-mixin)
+ - [✅type-reset [mixin]](#type-reset-mixin)
- [✅carbon--default-type [mixin]](#carbon--default-type-mixin)
+ - [✅default-type [mixin]](#default-type-mixin)
- [✅carbon--font-face-sans-condensed [mixin]](#carbon--font-face-sans-condensed-mixin)
- [✅carbon--font-face-sans [mixin]](#carbon--font-face-sans-mixin)
- [✅carbon--get-type-size [function]](#carbon--get-type-size-function)
+ - [✅get-type-size [function]](#get-type-size-function)
- [✅carbon--type-scale [variable]](#carbon--type-scale-variable)
+ - [✅type-scale [variable]](#type-scale-variable)
+ - [✅type-scale [function]](#type-scale-function)
- [✅carbon--type-scale [function]](#carbon--type-scale-function)
+ - [✅type-scale [mixin]](#type-scale-mixin)
- [✅carbon--type-scale [mixin]](#carbon--type-scale-mixin)
+ - [✅font-size [mixin]](#font-size-mixin)
- [✅carbon--font-size [mixin]](#carbon--font-size-mixin)
- [✅carbon--font-face-serif [mixin]](#carbon--font-face-serif-mixin)
- [✅carbon--font-display [variable]](#carbon--font-display-variable)
- [✅caption-01 [variable]](#caption-01-variable)
+ - [✅caption-01 [variable]](#caption-01-variable)
- [✅label-01 [variable]](#label-01-variable)
+ - [✅label-01 [variable]](#label-01-variable)
+ - [✅helper-text-01 [variable]](#helper-text-01-variable)
- [✅helper-text-01 [variable]](#helper-text-01-variable)
- [✅body-short-01 [variable]](#body-short-01-variable)
+ - [✅body-short-01 [variable]](#body-short-01-variable)
+ - [✅body-long-01 [variable]](#body-long-01-variable)
- [✅body-long-01 [variable]](#body-long-01-variable)
- [✅body-short-02 [variable]](#body-short-02-variable)
+ - [✅body-short-02 [variable]](#body-short-02-variable)
+ - [✅body-long-02 [variable]](#body-long-02-variable)
- [✅body-long-02 [variable]](#body-long-02-variable)
- [✅code-01 [variable]](#code-01-variable)
+ - [✅code-01 [variable]](#code-01-variable)
+ - [✅code-02 [variable]](#code-02-variable)
- [✅code-02 [variable]](#code-02-variable)
- [✅heading-01 [variable]](#heading-01-variable)
+ - [✅heading-01 [variable]](#heading-01-variable)
+ - [✅productive-heading-01 [variable]](#productive-heading-01-variable)
- [✅productive-heading-01 [variable]](#productive-heading-01-variable)
- [✅heading-02 [variable]](#heading-02-variable)
+ - [✅heading-02 [variable]](#heading-02-variable)
+ - [✅productive-heading-02 [variable]](#productive-heading-02-variable)
- [✅productive-heading-02 [variable]](#productive-heading-02-variable)
- [✅productive-heading-03 [variable]](#productive-heading-03-variable)
+ - [✅productive-heading-03 [variable]](#productive-heading-03-variable)
+ - [✅productive-heading-04 [variable]](#productive-heading-04-variable)
- [✅productive-heading-04 [variable]](#productive-heading-04-variable)
- [✅productive-heading-05 [variable]](#productive-heading-05-variable)
+ - [✅productive-heading-05 [variable]](#productive-heading-05-variable)
+ - [✅productive-heading-06 [variable]](#productive-heading-06-variable)
- [✅productive-heading-06 [variable]](#productive-heading-06-variable)
- [✅productive-heading-07 [variable]](#productive-heading-07-variable)
+ - [✅productive-heading-07 [variable]](#productive-heading-07-variable)
+ - [✅expressive-heading-01 [variable]](#expressive-heading-01-variable)
- [✅expressive-heading-01 [variable]](#expressive-heading-01-variable)
- [✅expressive-heading-02 [variable]](#expressive-heading-02-variable)
+ - [✅expressive-heading-02 [variable]](#expressive-heading-02-variable)
+ - [✅expressive-heading-03 [variable]](#expressive-heading-03-variable)
- [✅expressive-heading-03 [variable]](#expressive-heading-03-variable)
- [✅expressive-heading-04 [variable]](#expressive-heading-04-variable)
+ - [✅expressive-heading-04 [variable]](#expressive-heading-04-variable)
+ - [✅expressive-heading-05 [variable]](#expressive-heading-05-variable)
- [✅expressive-heading-05 [variable]](#expressive-heading-05-variable)
- [✅expressive-heading-06 [variable]](#expressive-heading-06-variable)
+ - [✅expressive-heading-06 [variable]](#expressive-heading-06-variable)
+ - [✅expressive-paragraph-01 [variable]](#expressive-paragraph-01-variable)
- [✅expressive-paragraph-01 [variable]](#expressive-paragraph-01-variable)
- [✅quotation-01 [variable]](#quotation-01-variable)
+ - [✅quotation-01 [variable]](#quotation-01-variable)
+ - [✅quotation-02 [variable]](#quotation-02-variable)
- [✅quotation-02 [variable]](#quotation-02-variable)
- [✅display-01 [variable]](#display-01-variable)
+ - [✅display-01 [variable]](#display-01-variable)
+ - [✅display-02 [variable]](#display-02-variable)
- [✅display-02 [variable]](#display-02-variable)
- [✅display-03 [variable]](#display-03-variable)
+ - [✅display-03 [variable]](#display-03-variable)
+ - [✅display-04 [variable]](#display-04-variable)
- [✅display-04 [variable]](#display-04-variable)
- [✅tokens [variable]](#tokens-variable)
+ - [✅tokens [variable]](#tokens-variable)
+ - [✅properties [mixin]](#properties-mixin)
- [✅properties [mixin]](#properties-mixin)
- [✅strip-unit [function]](#strip-unit-function)
+ - [✅strip-unit [function]](#strip-unit-function)
+ - [✅fluid-type [mixin]](#fluid-type-mixin)
- [✅fluid-type [mixin]](#fluid-type-mixin)
- [✅fluid-type-size [mixin]](#fluid-type-size-mixin)
+ - [✅fluid-type-size [mixin]](#fluid-type-size-mixin)
+ - [❌custom-property-prefix [variable]](#custom-property-prefix-variable)
- [❌custom-property-prefix [variable]](#custom-property-prefix-variable)
- [❌custom-properties [mixin]](#custom-properties-mixin)
+ - [❌custom-properties [mixin]](#custom-properties-mixin)
- [✅carbon--type-style [mixin]](#carbon--type-style-mixin)
+ - [✅type-style [mixin]](#type-style-mixin)
@@ -1721,6 +1775,7 @@ $prefix: 'bx';
- [carbon--grid [mixin]](#carbon--grid-mixin)
- [custom-property [mixin]](#custom-property-mixin)
- [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
+ - [type-classes [mixin]](#type-classes-mixin)
## @carbon/icons
@@ -2019,6 +2074,8 @@ Get the value of the next breakpoint, or null for the last breakpoint
- **Group**: [@carbon/layout](#carbonlayout)
- **Returns**: `String`
+- **Used by**:
+ - [fluid-type-size [mixin]](#fluid-type-size-mixin)
### ✅carbon--breakpoint-prev [function]
@@ -7097,6 +7154,7 @@ $carbon--theme: (
- **Used by**:
- [carbon--theme [mixin]](#carbon--theme-mixin)
- [carbon--default-type [mixin]](#carbon--default-type-mixin)
+ - [default-type [mixin]](#default-type-mixin)
### ✅interactive-01 [variable]
@@ -10598,6 +10656,53 @@ Create type classes for font families, weights, styles
- [carbon--font-weights [variable]](#carbon--font-weights-variable)
- [tokens [variable]](#tokens-variable)
+### ✅type-classes [mixin]
+
+Create type classes for font families, weights, styles
+
+
+Source code
+
+```scss
+@mixin type-classes() {
+ // Font families
+ @each $name, $value in $font-families {
+ .#{$prefix}--type-#{$name} {
+ font-family: $value;
+ }
+ }
+
+ // Font weights
+ @each $name, $value in $font-weights {
+ .#{$prefix}--type-#{$name} {
+ font-weight: $value;
+ }
+ }
+
+ // Font styles
+ .#{$prefix}--type-italic {
+ font-style: italic;
+ }
+
+ // Type styles
+ @each $name, $value in $tokens {
+ .#{$prefix}--type-#{$name} {
+ @include type-style($name, map.has-key($value, breakpoints));
+ }
+ }
+}
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
+ - [font-families [variable]](#font-families-variable)
+ - [prefix [variable]](#prefix-variable)
+ - [font-weights [variable]](#font-weights-variable)
+ - [tokens [variable]](#tokens-variable)
+
### ✅carbon--font-families [variable]
Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
@@ -10624,6 +10729,32 @@ $carbon--font-families: (
- [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
- [carbon--font-family [function]](#carbon--font-family-function)
+### ✅font-families [variable]
+
+Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
+Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
+
+
+Source code
+
+```scss
+$font-families: (
+ 'mono': unquote("'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"),
+ 'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
+ 'sans-condensed': unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
+ 'sans-hebrew': unquote("'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"),
+ 'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+- **Used by**:
+ - [type-classes [mixin]](#type-classes-mixin)
+ - [font-family [function]](#font-family-function)
+
### ✅carbon--font-family [function]
Get the font-family for an IBM Plex font
@@ -10652,6 +10783,34 @@ Get the font-family for an IBM Plex font
- **Used by**:
- [carbon--font-family [mixin]](#carbon--font-family-mixin)
+### ✅font-family [function]
+
+Get the font-family for an IBM Plex font
+
+
+Source code
+
+```scss
+@function font-family($name) {
+ @return map-get($font-families, $name);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$name` | — | `String` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Returns**: `String`
+- **Requires**:
+ - [font-families [variable]](#font-families-variable)
+- **Used by**:
+ - [font-family [mixin]](#font-family-mixin)
+
### ✅carbon--font-family [mixin]
Include the `font-family` definition for the given name in your selector
@@ -10677,6 +10836,31 @@ Include the `font-family` definition for the given name in your selector
- **Requires**:
- [carbon--font-family [function]](#carbon--font-family-function)
+### ✅font-family [mixin]
+
+Include the `font-family` definition for the given name in your selector
+
+
+Source code
+
+```scss
+@mixin font-family($name) {
+ font-family: font-family($name);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$name` | — | `String` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [font-family [function]](#font-family-function)
+
### ✅carbon--font-weights [variable]
Suggested font weights to be used in product
@@ -10700,6 +10884,29 @@ $carbon--font-weights: (
- [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
- [carbon--font-weight [function]](#carbon--font-weight-function)
+### ✅font-weights [variable]
+
+Suggested font weights to be used in product
+
+
+Source code
+
+```scss
+$font-weights: (
+ 'light': 300,
+ 'regular': 400,
+ 'semibold': 600,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+- **Used by**:
+ - [type-classes [mixin]](#type-classes-mixin)
+ - [font-weight [function]](#font-weight-function)
+
### ✅carbon--font-weight [function]
Retrieve the font-weight value for a given name
@@ -10728,6 +10935,34 @@ Retrieve the font-weight value for a given name
- **Used by**:
- [carbon--font-weight [mixin]](#carbon--font-weight-mixin)
+### ✅font-weight [function]
+
+Retrieve the font-weight value for a given name
+
+
+Source code
+
+```scss
+@function font-weight($weight) {
+ @return map-get($font-weights, $weight);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| --------- | ----------- | -------- | ------------- |
+| `$weight` | — | `String` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Returns**: `Number`
+- **Requires**:
+ - [font-weights [variable]](#font-weights-variable)
+- **Used by**:
+ - [font-weight [mixin]](#font-weight-mixin)
+
### ✅carbon--font-weight [mixin]
Set the `font-weight` property with the value for a given name
@@ -10755,6 +10990,33 @@ Set the `font-weight` property with the value for a given name
- **Used by**:
- [carbon--type-reset [mixin]](#carbon--type-reset-mixin)
+### ✅font-weight [mixin]
+
+Set the `font-weight` property with the value for a given name
+
+
+Source code
+
+```scss
+@mixin font-weight($weight) {
+ font-weight: font-weight($weight);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| --------- | ----------- | -------- | ------------- |
+| `$weight` | — | `String` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [font-weight [function]](#font-weight-function)
+- **Used by**:
+ - [type-reset [mixin]](#type-reset-mixin)
+
### ✅carbon--font-face-mono [mixin]
Mono `@font-face`'s
@@ -11209,6 +11471,20 @@ $prefix: 'bx';
- **Group**: [@carbon/type](#carbontype)
- **Type**: `String`
+### ✅prefix [variable]
+
+
+Source code
+
+```scss
+$prefix: 'bx';
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `String`
+
### ✅carbon--type-reset [mixin]
Include a type reset for a given body and mono font family
@@ -11257,38 +11533,86 @@ Include a type reset for a given body and mono font family
- **Requires**:
- [carbon--font-weight [mixin]](#carbon--font-weight-mixin)
-### ✅carbon--default-type [mixin]
+### ✅type-reset [mixin]
-Include default type styles
+Include a type reset for a given body and mono font family
Source code
```scss
-@mixin carbon--default-type() {
- h1 {
- @include carbon--type-style('productive-heading-06');
+@mixin type-reset(
+ $body-font-family: font-family('sans'),
+ $mono-font-family: font-family('mono')
+) {
+ html {
+ font-size: 100%;
}
- h2 {
- @include carbon--type-style('productive-heading-05');
- }
+ body {
+ @include font-weight('regular');
- h3 {
- @include carbon--type-style('productive-heading-04');
+ font-family: $body-font-family;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
- h4 {
- @include carbon--type-style('productive-heading-03');
+ code {
+ font-family: $mono-font-family;
}
- h5 {
- @include carbon--type-style('productive-heading-02');
+ strong {
+ @include font-weight('semibold');
}
+}
+```
- h6 {
- @include carbon--type-style('productive-heading-01');
- }
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------------------- | ----------------------------------------------------------------------------------- | -------- | --------------------- |
+| `$body-font-family` | The font family used on the `` element | `String` | `font-family('sans')` |
+| `$mono-font-family` | The font family used on elements that require mono fonts, like the `` element | `String` | `font-family('mono')` |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [font-weight [mixin]](#font-weight-mixin)
+
+### ✅carbon--default-type [mixin]
+
+Include default type styles
+
+
+Source code
+
+```scss
+@mixin carbon--default-type() {
+ h1 {
+ @include carbon--type-style('productive-heading-06');
+ }
+
+ h2 {
+ @include carbon--type-style('productive-heading-05');
+ }
+
+ h3 {
+ @include carbon--type-style('productive-heading-04');
+ }
+
+ h4 {
+ @include carbon--type-style('productive-heading-03');
+ }
+
+ h5 {
+ @include carbon--type-style('productive-heading-02');
+ }
+
+ h6 {
+ @include carbon--type-style('productive-heading-01');
+ }
p {
@include carbon--type-style('body-long-02');
@@ -11317,6 +11641,66 @@ Include default type styles
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
- [carbon--theme [variable]](#carbon--theme-variable)
+### ✅default-type [mixin]
+
+Include default type styles
+
+
+Source code
+
+```scss
+@mixin default-type() {
+ h1 {
+ @include type-style('productive-heading-06');
+ }
+
+ h2 {
+ @include type-style('productive-heading-05');
+ }
+
+ h3 {
+ @include type-style('productive-heading-04');
+ }
+
+ h4 {
+ @include type-style('productive-heading-03');
+ }
+
+ h5 {
+ @include type-style('productive-heading-02');
+ }
+
+ h6 {
+ @include type-style('productive-heading-01');
+ }
+
+ p {
+ @include type-style('body-long-02');
+ }
+
+ a {
+ @if meta.global-variable-exists('carbon--theme') and
+ map.has-key($carbon--theme, 'link-01')
+ {
+ color: map.get($carbon--theme, 'link-01');
+ } @else {
+ color: #0062fe;
+ }
+ }
+
+ em {
+ font-style: italic;
+ }
+}
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
+ - [carbon--theme [variable]](#carbon--theme-variable)
+
### ✅carbon--font-face-sans-condensed [mixin]
Sans `@font-face`'s
@@ -12173,6 +12557,34 @@ Compute the type size for the given type scale step
- **Group**: [@carbon/type](#carbontype)
- **Returns**: `Number` In px
+### ✅get-type-size [function]
+
+Compute the type size for the given type scale step
+
+
+Source code
+
+```scss
+@function get-type-size($step) {
+ @if $step == 1 {
+ @return 12px;
+ }
+ // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
+ @return get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$step` | — | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Returns**: `Number` In px
+
### ✅carbon--type-scale [variable]
Type scale follows a custom formula for determining each step size and supports
@@ -12194,6 +12606,56 @@ $carbon--type-scale: ();
- **Used by**:
- [carbon--type-scale [function]](#carbon--type-scale-function)
+### ✅type-scale [variable]
+
+Type scale follows a custom formula for determining each step size and supports
+sizes from 12px to 92px
+
+
+Source code
+
+```scss
+$type-scale: ();
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+- **Aliased**:
+ - `font-size`
+- **Used by**:
+ - [type-scale [function]](#type-scale-function)
+
+### ✅type-scale [function]
+
+Get the value of a specific step in the type scale
+
+
+Source code
+
+```scss
+@function type-scale($step) {
+ @return nth($type-scale, $step);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$step` | — | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Returns**: `Number` In rem
+- **Requires**:
+ - [type-scale [variable]](#type-scale-variable)
+- **Used by**:
+ - [type-scale [mixin]](#type-scale-mixin)
+ - [font-size [mixin]](#font-size-mixin)
+
### ✅carbon--type-scale [function]
Get the value of a specific step in the type scale
@@ -12223,6 +12685,31 @@ Get the value of a specific step in the type scale
- [carbon--type-scale [mixin]](#carbon--type-scale-mixin)
- [carbon--font-size [mixin]](#carbon--font-size-mixin)
+### ✅type-scale [mixin]
+
+Set the font-size value of a selector with the value at the given `$step`
+
+
+Source code
+
+```scss
+@mixin type-scale($step) {
+ font-size: type-scale($step);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$step` | — | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [type-scale [function]](#type-scale-function)
+
### ✅carbon--type-scale [mixin]
Set the font-size value of a selector with the value at the given `$step`
@@ -12248,6 +12735,32 @@ Set the font-size value of a selector with the value at the given `$step`
- **Requires**:
- [carbon--type-scale [function]](#carbon--type-scale-function)
+### ✅font-size [mixin]
+
+Alias of `type-scale` mixin.
+
+
+Source code
+
+```scss
+@mixin font-size($step) {
+ font-size: type-scale($step);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$step` | — | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Alias**: `type-scale`
+- **Requires**:
+ - [type-scale [function]](#type-scale-function)
+
### ✅carbon--font-size [mixin]
Alias of `type-scale` mixin.
@@ -12766,15 +13279,15 @@ $caption-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅label-01 [variable]
+### ✅caption-01 [variable]
Source code
```scss
-$label-01: (
- font-size: carbon--type-scale(1),
- font-weight: carbon--font-weight('regular'),
+$caption-01: (
+ font-size: scale.type-scale(1),
+ font-weight: font-family.font-weight('regular'),
line-height: 1.34,
letter-spacing: 0.32px,
);
@@ -12785,14 +13298,15 @@ $label-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅helper-text-01 [variable]
+### ✅label-01 [variable]
Source code
```scss
-$helper-text-01: (
+$label-01: (
font-size: carbon--type-scale(1),
+ font-weight: carbon--font-weight('regular'),
line-height: 1.34,
letter-spacing: 0.32px,
);
@@ -12803,17 +13317,17 @@ $helper-text-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅body-short-01 [variable]
+### ✅label-01 [variable]
Source code
```scss
-$body-short-01: (
- font-size: carbon--type-scale(2),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.29,
- letter-spacing: 0.16px,
+$label-01: (
+ font-size: scale.type-scale(1),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
);
```
@@ -12822,17 +13336,16 @@ $body-short-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅body-long-01 [variable]
+### ✅helper-text-01 [variable]
Source code
```scss
-$body-long-01: (
- font-size: carbon--type-scale(2),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.43,
- letter-spacing: 0.16px,
+$helper-text-01: (
+ font-size: carbon--type-scale(1),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
);
```
@@ -12841,17 +13354,16 @@ $body-long-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅body-short-02 [variable]
+### ✅helper-text-01 [variable]
Source code
```scss
-$body-short-02: (
- font-size: carbon--type-scale(3),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.375,
- letter-spacing: 0,
+$helper-text-01: (
+ font-size: scale.type-scale(1),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
);
```
@@ -12860,17 +13372,17 @@ $body-short-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅body-long-02 [variable]
+### ✅body-short-01 [variable]
Source code
```scss
-$body-long-02: (
- font-size: carbon--type-scale(3),
+$body-short-01: (
+ font-size: carbon--type-scale(2),
font-weight: carbon--font-weight('regular'),
- line-height: 1.5,
- letter-spacing: 0,
+ line-height: 1.29,
+ letter-spacing: 0.16px,
);
```
@@ -12879,18 +13391,171 @@ $body-long-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅code-01 [variable]
+### ✅body-short-01 [variable]
Source code
```scss
-$code-01: (
- font-family: carbon--font-family('mono'),
- font-size: carbon--type-scale(1),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.34,
- letter-spacing: 0.32px,
+$body-short-01: (
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0.16px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-long-01 [variable]
+
+
+Source code
+
+```scss
+$body-long-01: (
+ font-size: carbon--type-scale(2),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.43,
+ letter-spacing: 0.16px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-long-01 [variable]
+
+
+Source code
+
+```scss
+$body-long-01: (
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.43,
+ letter-spacing: 0.16px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-short-02 [variable]
+
+
+Source code
+
+```scss
+$body-short-02: (
+ font-size: carbon--type-scale(3),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.375,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-short-02 [variable]
+
+
+Source code
+
+```scss
+$body-short-02: (
+ font-size: scale.type-scale(3),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.375,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-long-02 [variable]
+
+
+Source code
+
+```scss
+$body-long-02: (
+ font-size: carbon--type-scale(3),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.5,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-long-02 [variable]
+
+
+Source code
+
+```scss
+$body-long-02: (
+ font-size: scale.type-scale(3),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.5,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅code-01 [variable]
+
+
+Source code
+
+```scss
+$code-01: (
+ font-family: carbon--font-family('mono'),
+ font-size: carbon--type-scale(1),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅code-01 [variable]
+
+
+Source code
+
+```scss
+$code-01: (
+ font-family: font-family.font-family('mono'),
+ font-size: scale.type-scale(1),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
);
```
@@ -12919,6 +13584,26 @@ $code-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
+### ✅code-02 [variable]
+
+
+Source code
+
+```scss
+$code-02: (
+ font-family: font-family.font-family('mono'),
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.43,
+ letter-spacing: 0.32px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
### ✅heading-01 [variable]
@@ -12938,6 +13623,39 @@ $heading-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
+### ✅heading-01 [variable]
+
+
+Source code
+
+```scss
+$heading-01: (
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.29,
+ letter-spacing: 0.16px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-01 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-01: $heading-01;
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
### ✅productive-heading-01 [variable]
@@ -12971,6 +13689,25 @@ $heading-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
+### ✅heading-02 [variable]
+
+
+Source code
+
+```scss
+$heading-02: (
+ font-size: scale.type-scale(3),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.375,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
### ✅productive-heading-02 [variable]
@@ -12985,18 +13722,13 @@ $productive-heading-02: $heading-02;
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-03 [variable]
+### ✅productive-heading-02 [variable]
Source code
```scss
-$productive-heading-03: (
- font-size: carbon--type-scale(5),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.4,
- letter-spacing: 0,
-);
+$productive-heading-02: $heading-02;
```
@@ -13004,16 +13736,16 @@ $productive-heading-03: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-04 [variable]
+### ✅productive-heading-03 [variable]
Source code
```scss
-$productive-heading-04: (
- font-size: carbon--type-scale(7),
+$productive-heading-03: (
+ font-size: carbon--type-scale(5),
font-weight: carbon--font-weight('regular'),
- line-height: 1.29,
+ line-height: 1.4,
letter-spacing: 0,
);
```
@@ -13023,16 +13755,16 @@ $productive-heading-04: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-05 [variable]
+### ✅productive-heading-03 [variable]
Source code
```scss
-$productive-heading-05: (
- font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.25,
+$productive-heading-03: (
+ font-size: scale.type-scale(5),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.4,
letter-spacing: 0,
);
```
@@ -13042,17 +13774,16 @@ $productive-heading-05: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-06 [variable]
+### ✅productive-heading-04 [variable]
Source code
```scss
-$productive-heading-06: (
- font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('light'),
- // Extra digit needed for precision in Chrome
- line-height: 1.199,
+$productive-heading-04: (
+ font-size: carbon--type-scale(7),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.29,
letter-spacing: 0,
);
```
@@ -13062,16 +13793,16 @@ $productive-heading-06: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-07 [variable]
+### ✅productive-heading-04 [variable]
Source code
```scss
-$productive-heading-07: (
- font-size: carbon--type-scale(10),
- font-weight: carbon--font-weight('light'),
- line-height: 1.19,
+$productive-heading-04: (
+ font-size: scale.type-scale(7),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.29,
letter-spacing: 0,
);
```
@@ -13081,7 +13812,123 @@ $productive-heading-07: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-01 [variable]
+### ✅productive-heading-05 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-05: (
+ font-size: carbon--type-scale(8),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.25,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-05 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-05: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.25,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-06 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-06: (
+ font-size: carbon--type-scale(8),
+ font-weight: carbon--font-weight('light'),
+ // Extra digit needed for precision in Chrome
+ line-height: 1.199,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-06 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-06: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('light'),
+ // Extra digit needed for precision in Chrome
+ line-height: 1.199,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-07 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-07: (
+ font-size: carbon--type-scale(10),
+ font-weight: carbon--font-weight('light'),
+ line-height: 1.19,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-07 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-07: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.19,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-01 [variable]
Source code
@@ -13100,17 +13947,344 @@ $expressive-heading-01: map-merge(
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-02 [variable]
+### ✅expressive-heading-01 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-01: map.merge(
+ $heading-01,
+ (
+ line-height: 1.25,
+ )
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-02 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-02: map-merge(
+ $heading-02,
+ (
+ line-height: 1.5,
+ )
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-02 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-02: map.merge(
+ $heading-02,
+ (
+ line-height: 1.5,
+ )
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-03 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-03: (
+ font-size: carbon--type-scale(5),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.4,
+ letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: carbon--type-scale(5),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: carbon--type-scale(6),
+ line-height: 1.334,
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-03 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-03: (
+ font-size: scale.type-scale(5),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.4,
+ letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: scale.type-scale(5),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: scale.type-scale(6),
+ line-height: 1.334,
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-04 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-04: (
+ font-size: carbon--type-scale(7),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: carbon--type-scale(7),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: carbon--type-scale(8),
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-04 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-04: (
+ font-size: scale.type-scale(7),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: scale.type-scale(7),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: scale.type-scale(8),
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-05 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-05: (
+ font-size: carbon--type-scale(8),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.25,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: carbon--type-scale(9),
+ font-weight: carbon--font-weight('light'),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: carbon--type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: carbon--type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: carbon--type-scale(13),
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-05 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-05: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.25,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(9),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: scale.type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: scale.type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: scale.type-scale(13),
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-06 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-06: (
+ font-size: carbon--type-scale(8),
+ font-weight: carbon--font-weight('semibold'),
+ line-height: 1.25,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: carbon--type-scale(9),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: carbon--type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: carbon--type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: carbon--type-scale(13),
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-06 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-06: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.25,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(9),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: scale.type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: scale.type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: scale.type-scale(13),
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-paragraph-01 [variable]
Source code
```scss
-$expressive-heading-02: map-merge(
- $heading-02,
- (
- line-height: 1.5,
- )
+$expressive-paragraph-01: (
+ font-size: carbon--type-scale(6),
+ font-weight: carbon--font-weight('light'),
+ line-height: 1.334,
+ letter-spacing: 0,
+ breakpoints: (
+ lg: (
+ font-size: carbon--type-scale(7),
+ line-height: 1.29,
+ ),
+ max: (
+ font-size: carbon--type-scale(8),
+ line-height: 1.25,
+ ),
+ ),
);
```
@@ -13119,25 +14293,25 @@ $expressive-heading-02: map-merge(
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-03 [variable]
+### ✅expressive-paragraph-01 [variable]
Source code
```scss
-$expressive-heading-03: (
- font-size: carbon--type-scale(5),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.4,
+$expressive-paragraph-01: (
+ font-size: scale.type-scale(6),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.334,
letter-spacing: 0,
breakpoints: (
- xlg: (
- font-size: carbon--type-scale(5),
- line-height: 1.25,
+ lg: (
+ font-size: scale.type-scale(7),
+ line-height: 1.29,
),
max: (
- font-size: carbon--type-scale(6),
- line-height: 1.334,
+ font-size: scale.type-scale(8),
+ line-height: 1.25,
),
),
);
@@ -13148,24 +14322,32 @@ $expressive-heading-03: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-04 [variable]
+### ✅quotation-01 [variable]
Source code
```scss
-$expressive-heading-04: (
- font-size: carbon--type-scale(7),
+$quotation-01: (
+ font-size: carbon--type-scale(5),
font-weight: carbon--font-weight('regular'),
- line-height: 1.29,
+ line-height: 1.3,
letter-spacing: 0,
breakpoints: (
+ md: (
+ font-size: carbon--type-scale(5),
+ ),
+ lg: (
+ font-size: carbon--type-scale(6),
+ line-height: 1.334,
+ ),
xlg: (
font-size: carbon--type-scale(7),
- line-height: 1.25,
+ line-height: 1.29,
),
max: (
font-size: carbon--type-scale(8),
+ line-height: 1.25,
),
),
);
@@ -13176,33 +14358,32 @@ $expressive-heading-04: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-05 [variable]
+### ✅quotation-01 [variable]
Source code
```scss
-$expressive-heading-05: (
- font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.25,
+$quotation-01: (
+ font-size: scale.type-scale(5),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.3,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(9),
- font-weight: carbon--font-weight('light'),
- line-height: 1.22,
+ font-size: scale.type-scale(5),
),
lg: (
- font-size: carbon--type-scale(10),
- line-height: 1.19,
+ font-size: scale.type-scale(6),
+ line-height: 1.334,
),
xlg: (
- font-size: carbon--type-scale(11),
- line-height: 1.17,
+ font-size: scale.type-scale(7),
+ line-height: 1.29,
),
max: (
- font-size: carbon--type-scale(13),
+ font-size: scale.type-scale(8),
+ line-height: 1.25,
),
),
);
@@ -13213,15 +14394,15 @@ $expressive-heading-05: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-06 [variable]
+### ✅quotation-02 [variable]
Source code
```scss
-$expressive-heading-06: (
+$quotation-02: (
font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('semibold'),
+ font-weight: carbon--font-weight('light'),
line-height: 1.25,
letter-spacing: 0,
breakpoints: (
@@ -13249,25 +14430,32 @@ $expressive-heading-06: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-paragraph-01 [variable]
+### ✅quotation-02 [variable]
Source code
```scss
-$expressive-paragraph-01: (
- font-size: carbon--type-scale(6),
- font-weight: carbon--font-weight('light'),
- line-height: 1.334,
+$quotation-02: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.25,
letter-spacing: 0,
breakpoints: (
+ md: (
+ font-size: scale.type-scale(9),
+ line-height: 1.22,
+ ),
lg: (
- font-size: carbon--type-scale(7),
- line-height: 1.29,
+ font-size: scale.type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: scale.type-scale(11),
+ line-height: 1.17,
),
max: (
- font-size: carbon--type-scale(8),
- line-height: 1.25,
+ font-size: scale.type-scale(13),
),
),
);
@@ -13278,32 +14466,31 @@ $expressive-paragraph-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅quotation-01 [variable]
+### ✅display-01 [variable]
Source code
```scss
-$quotation-01: (
- font-size: carbon--type-scale(5),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.3,
+$display-01: (
+ font-size: carbon--type-scale(10),
+ font-weight: carbon--font-weight('light'),
+ line-height: 1.19,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(5),
+ font-size: carbon--type-scale(10),
),
lg: (
- font-size: carbon--type-scale(6),
- line-height: 1.334,
+ font-size: carbon--type-scale(12),
),
xlg: (
- font-size: carbon--type-scale(7),
- line-height: 1.29,
+ font-size: carbon--type-scale(13),
+ line-height: 1.17,
),
max: (
- font-size: carbon--type-scale(8),
- line-height: 1.25,
+ font-size: carbon--type-scale(15),
+ line-height: 1.13,
),
),
);
@@ -13314,32 +14501,31 @@ $quotation-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅quotation-02 [variable]
+### ✅display-01 [variable]
Source code
```scss
-$quotation-02: (
- font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('light'),
- line-height: 1.25,
+$display-01: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.19,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(9),
- line-height: 1.22,
+ font-size: scale.type-scale(10),
),
lg: (
- font-size: carbon--type-scale(10),
- line-height: 1.19,
+ font-size: scale.type-scale(12),
),
xlg: (
- font-size: carbon--type-scale(11),
+ font-size: scale.type-scale(13),
line-height: 1.17,
),
max: (
- font-size: carbon--type-scale(13),
+ font-size: scale.type-scale(15),
+ line-height: 1.13,
),
),
);
@@ -13350,15 +14536,15 @@ $quotation-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅display-01 [variable]
+### ✅display-02 [variable]
Source code
```scss
-$display-01: (
+$display-02: (
font-size: carbon--type-scale(10),
- font-weight: carbon--font-weight('light'),
+ font-weight: carbon--font-weight('semibold'),
line-height: 1.19,
letter-spacing: 0,
breakpoints: (
@@ -13370,7 +14556,7 @@ $display-01: (
),
xlg: (
font-size: carbon--type-scale(13),
- line-height: 1.17,
+ line-height: 1.16,
),
max: (
font-size: carbon--type-scale(15),
@@ -13392,23 +14578,23 @@ $display-01: (
```scss
$display-02: (
- font-size: carbon--type-scale(10),
- font-weight: carbon--font-weight('semibold'),
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('semibold'),
line-height: 1.19,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(10),
+ font-size: scale.type-scale(10),
),
lg: (
- font-size: carbon--type-scale(12),
+ font-size: scale.type-scale(12),
),
xlg: (
- font-size: carbon--type-scale(13),
+ font-size: scale.type-scale(13),
line-height: 1.16,
),
max: (
- font-size: carbon--type-scale(15),
+ font-size: scale.type-scale(15),
line-height: 1.13,
),
),
@@ -13460,6 +14646,46 @@ $display-03: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
+### ✅display-03 [variable]
+
+
+Source code
+
+```scss
+$display-03: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.19,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(14),
+ line-height: 1.15,
+ ),
+ lg: (
+ font-size: scale.type-scale(17),
+ line-height: 1.11,
+ letter-spacing: -0.64px,
+ ),
+ xlg: (
+ font-size: scale.type-scale(20),
+ line-height: 1.07,
+ letter-spacing: -0.64px,
+ ),
+ max: (
+ font-size: scale.type-scale(23),
+ line-height: 1.05,
+ letter-spacing: -0.96px,
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
### ✅display-04 [variable]
@@ -13500,6 +14726,97 @@ $display-04: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
+### ✅display-04 [variable]
+
+
+Source code
+
+```scss
+$display-04: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.19,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(14),
+ line-height: 1.15,
+ ),
+ lg: (
+ font-size: scale.type-scale(17),
+ line-height: 1.11,
+ letter-spacing: -0.64px,
+ ),
+ xlg: (
+ font-size: scale.type-scale(20),
+ line-height: 1.07,
+ letter-spacing: -0.64px,
+ ),
+ max: (
+ font-size: scale.type-scale(23),
+ line-height: 1.05,
+ letter-spacing: -0.96px,
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅tokens [variable]
+
+
+Source code
+
+```scss
+$tokens: (
+ caption-01: $caption-01,
+ label-01: $label-01,
+ helper-text-01: $helper-text-01,
+ body-short-01: $body-short-01,
+ body-short-02: $body-short-02,
+ body-long-01: $body-long-01,
+ body-long-02: $body-long-02,
+ code-01: $code-01,
+ code-02: $code-02,
+ heading-01: $heading-01,
+ heading-02: $heading-02,
+ productive-heading-01: $productive-heading-01,
+ productive-heading-02: $productive-heading-02,
+ productive-heading-03: $productive-heading-03,
+ productive-heading-04: $productive-heading-04,
+ productive-heading-05: $productive-heading-05,
+ productive-heading-06: $productive-heading-06,
+ productive-heading-07: $productive-heading-07,
+ expressive-paragraph-01: $expressive-paragraph-01,
+ expressive-heading-01: $expressive-heading-01,
+ expressive-heading-02: $expressive-heading-02,
+ expressive-heading-03: $expressive-heading-03,
+ expressive-heading-04: $expressive-heading-04,
+ expressive-heading-05: $expressive-heading-05,
+ expressive-heading-06: $expressive-heading-06,
+ quotation-01: $quotation-01,
+ quotation-02: $quotation-02,
+ display-01: $display-01,
+ display-02: $display-02,
+ display-03: $display-03,
+ display-04: $display-04,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+- **Used by**:
+ - [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
+ - [type-classes [mixin]](#type-classes-mixin)
+ - [carbon--type-style [mixin]](#carbon--type-style-mixin)
+ - [type-style [mixin]](#type-style-mixin)
+
### ✅tokens [variable]
@@ -13545,9 +14862,6 @@ $tokens: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-- **Used by**:
- - [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
- - [carbon--type-style [mixin]](#carbon--type-style-mixin)
### ✅properties [mixin]
@@ -13574,6 +14888,30 @@ $tokens: (
- **Used by**:
- [fluid-type [mixin]](#fluid-type-mixin)
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
+ - [type-style [mixin]](#type-style-mixin)
+
+### ✅properties [mixin]
+
+
+Source code
+
+```scss
+@mixin properties($map) {
+ @each $name, $value in $map {
+ #{$name}: $value;
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------ | ----------- | ----- | ------------- |
+| `$map` | — | `Map` | — |
+
+- **Group**: [@carbon/type](#carbontype)
### ✅strip-unit [function]
@@ -13599,6 +14937,28 @@ $tokens: (
- **Used by**:
- [fluid-type-size [mixin]](#fluid-type-size-mixin)
+### ✅strip-unit [function]
+
+
+Source code
+
+```scss
+@function strip-unit($value) {
+ @return $value / ($value * 0 + 1);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| -------- | ----------------- | -------- | ------------- |
+| `$value` | Number with units | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Returns**: `Number` Without units
+
### ✅fluid-type [mixin]
This helper includes fluid type styles for the given token value. Fluid type
@@ -13653,6 +15013,59 @@ https://css-tricks.com/snippets/css/fluid-typography/
- [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
- **Used by**:
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
+ - [type-style [mixin]](#type-style-mixin)
+
+### ✅fluid-type [mixin]
+
+This helper includes fluid type styles for the given token value. Fluid type
+means that the `font-size` is computed using `calc()` in order to be determined
+by the screen size instead of a breakpoint. As a result, fluid styles should be
+used with caution in fixed width contexts.
+
+In addition, we make use of %-based line-heights so that the line-height of each
+type style is computed correctly due to the dynamic nature of the `font-size`.
+
+Most of the logic for this work comes from CSS Tricks:
+https://css-tricks.com/snippets/css/fluid-typography/
+
+
+Source code
+
+```scss
+@mixin fluid-type($type-styles, $breakpoints: $grid-breakpoints) {
+ // Include the initial styles for the given token by default without any
+ // media query guard. This includes `font-size` as a fallback in the case
+ // that a browser does not support `calc()`
+ @include properties(map.remove($type-styles, breakpoints));
+ // We also need to include the `sm` styles by default since they don't
+ // appear in the fluid styles for tokens
+ @include fluid-type-size($type-styles, sm, $breakpoints);
+
+ // Finally, we need to go through all the breakpoints defined in the type
+ // token and apply the properties and fluid type size for that given
+ // breakpoint
+ @each $name, $values in map.get($type-styles, breakpoints) {
+ @include layout.breakpoint($name) {
+ @include properties($values);
+ @include fluid-type-size($type-styles, $name, $breakpoints);
+ }
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| -------------- | ------------------------------- | ----- | ------------------- |
+| `$type-styles` | The value of a given type token | `Map` | — |
+| `$breakpoints` | Custom breakpoints to use | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [properties [mixin]](#properties-mixin)
+ - [fluid-type-size [mixin]](#fluid-type-size-mixin)
### ✅fluid-type-size [mixin]
@@ -13756,6 +15169,115 @@ Computes the fluid `font-size` for a given type style and breakpoint
- **Used by**:
- [fluid-type [mixin]](#fluid-type-mixin)
+### ✅fluid-type-size [mixin]
+
+Computes the fluid `font-size` for a given type style and breakpoint
+
+
+Source code
+
+```scss
+@mixin fluid-type-size($type-styles, $name, $breakpoints: $grid-breakpoints) {
+ // Get the information about the breakpoint we're currently working in. Useful
+ // for getting initial width information
+ $breakpoint: map.get($breakpoints, $name);
+
+ // Our fluid styles are captured under the 'breakpoints' property in our type
+ // styles map. These define what values to treat as `max-` variables below
+ $fluid-sizes: map.get($type-styles, breakpoints);
+ $fluid-breakpoint: ();
+ // Special case for `sm` because the styles for small are on the type style
+ // directly
+ @if $name == sm {
+ $fluid-breakpoint: map.remove($type-styles, breakpoints);
+ } @else {
+ $fluid-breakpoint: map.get($fluid-sizes, $name);
+ }
+
+ // Initialize our font-sizes to the default size for the type style
+ $max-font-size: map.get($type-styles, font-size);
+ $min-font-size: map.get($type-styles, font-size);
+ @if map.has-key($fluid-breakpoint, font-size) {
+ $min-font-size: map.get($fluid-breakpoint, font-size);
+ }
+
+ // Initialize our min and max width to the width of the current breakpoint
+ $max-vw: map.get($breakpoint, width);
+ $min-vw: map.get($breakpoint, width);
+
+ // We can use `breakpoint-next` to see if there is another breakpoint we can
+ // use to update `max-font-size` and `max-vw` with larger values
+ $next-breakpoint-available: layout.breakpoint-next($name, $breakpoints);
+ $next-fluid-breakpoint-name: null;
+
+ // We need to figure out what the next available fluid breakpoint is for our
+ // given $type-styles. In this loop we try and iterate through breakpoints
+ // until we either manually set $next-breakpoint-available to null or
+ // `breakpoint-next` returns null.
+ @while $next-breakpoint-available {
+ @if map.has-key($fluid-sizes, $next-breakpoint-available) {
+ $next-fluid-breakpoint-name: $next-breakpoint-available;
+ $next-breakpoint-available: null;
+ } @else {
+ $next-breakpoint-available: layout.breakpoint-next(
+ $next-breakpoint-available,
+ $breakpoints
+ );
+ }
+ }
+
+ // If we have found the next available fluid breakpoint name, then we know
+ // that we have values that we can use to set max-font-size and max-vw as both
+ // values derive from the next breakpoint
+ @if $next-fluid-breakpoint-name {
+ $next-fluid-breakpoint: map.get($breakpoints, $next-fluid-breakpoint-name);
+ $max-font-size: map.get(
+ map.get($fluid-sizes, $next-fluid-breakpoint-name),
+ font-size
+ );
+ $max-vw: map.get($next-fluid-breakpoint, width);
+
+ // prettier-ignore
+ font-size: calc(#{$min-font-size} +
+ #{strip-unit($max-font-size - $min-font-size)} *
+ ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
+ );
+ } @else {
+ // Otherwise, just default to setting the font size found from the type
+ // style or the given fluid breakpoint in the type style
+ font-size: $min-font-size;
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| -------------- | ------------------------------------------------------ | -------- | ------------------- |
+| `$type-styles` | The styles for a given token | `Map` | — |
+| `$name` | The name of the breakpoint to which we apply the fluid | `String` | — |
+| `$breakpoints` | The breakpoints for the grid system | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [breakpoint-next [function]](#breakpoint-next-function)
+ - [strip-unit [function]](#strip-unit-function)
+
+### ❌custom-property-prefix [variable]
+
+
+Source code
+
+```scss
+$custom-property-prefix: 'cds';
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+
### ❌custom-property-prefix [variable]
@@ -13792,6 +15314,29 @@ $custom-property-prefix: 'cds';
- [custom-property-prefix [variable]](#custom-property-prefix-variable)
- **Used by**:
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
+ - [type-style [mixin]](#type-style-mixin)
+
+### ❌custom-properties [mixin]
+
+
+Source code
+
+```scss
+@mixin custom-properties() {
+ @each $property, $value in $value {
+ #{$property}: var(
+ --#{$custom-property-prefix}-#{$name}-#{$property},
+ #{$value}
+ );
+ }
+}
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [custom-property-prefix [variable]](#custom-property-prefix-variable)
### ✅carbon--type-style [mixin]
@@ -13853,3 +15398,60 @@ fixed contexts.
- **Used by**:
- [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
- [carbon--default-type [mixin]](#carbon--default-type-mixin)
+
+### ✅type-style [mixin]
+
+Helper mixin to include the styles for a given token in any selector in your
+project. Also includes an optional fluid option that will enable fluid styles
+for the token if they are defined. Fluid styles will cause the token's font-size
+to be computed based on the viewport size. As a result, use with caution in
+fixed contexts.
+
+
+Source code
+
+```scss
+@mixin type-style($name, $fluid: false, $breakpoints: $grid-breakpoints) {
+ @if not map.has-key($tokens, $name) {
+ @error 'Unable to find a token with the name: `#{$name}`';
+ }
+
+ $token: map.get($tokens, $name);
+
+ // If $fluid is set to true and the token has breakpoints defined for fluid
+ // styles, delegate to the fluid-type helper for the given token
+ @if $fluid == true and map.has-key($token, 'breakpoints') {
+ @include fluid-type($token, $breakpoints);
+ } @else {
+ @if global-variable-exists('feature-flags') and
+ map.get($feature-flags, 'enable-css-custom-properties')
+ {
+ @include custom-properties($name, $token);
+ } @else {
+ // Otherwise, we just include all the property declarations directly on the
+ // selector
+ @include properties(map.remove($token, 'breakpoints'));
+ }
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| -------------- | ----------------------------------------------- | --------- | ------------------- |
+| `$name` | The name of the token to get the styles for | `String` | — |
+| `$fluid` | Specify whether to include fluid styles for the | `Boolean` | `false` |
+| `$breakpoints` | Provide a custom breakpoint map to use | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [fluid-type [mixin]](#fluid-type-mixin)
+ - [custom-properties [mixin]](#custom-properties-mixin)
+ - [properties [mixin]](#properties-mixin)
+ - [tokens [variable]](#tokens-variable)
+- **Used by**:
+ - [type-classes [mixin]](#type-classes-mixin)
+ - [default-type [mixin]](#default-type-mixin)
diff --git a/packages/elements/package.json b/packages/elements/package.json
index aa86a5e5fbf5..d3c167fea6a3 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/elements",
"description": "A collection of design elements in code for the IBM Design Language",
- "version": "10.26.0",
+ "version": "10.27.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -35,17 +35,17 @@
"clean": "rimraf es lib umd && node tasks/clean.js"
},
"dependencies": {
- "@carbon/colors": "^10.19.0",
- "@carbon/grid": "^10.19.0",
- "@carbon/icons": "^10.24.0",
+ "@carbon/colors": "^10.20.0-rc.0",
+ "@carbon/grid": "^10.20.0-rc.0",
+ "@carbon/icons": "^10.25.0-rc.0",
"@carbon/import-once": "^10.5.0",
- "@carbon/layout": "^10.17.0",
- "@carbon/motion": "^10.12.0",
- "@carbon/themes": "^10.26.0",
- "@carbon/type": "^10.20.0"
+ "@carbon/layout": "^10.18.0-rc.0",
+ "@carbon/motion": "^10.13.0-rc.0",
+ "@carbon/themes": "^10.27.0-rc.0",
+ "@carbon/type": "^10.21.0-rc.0"
},
"devDependencies": {
- "@carbon/cli": "^10.18.0",
+ "@carbon/cli": "^10.19.0-rc.0",
"fs-extra": "^8.1.0",
"klaw-sync": "^6.0.0",
"replace-in-file": "^3.4.2",
diff --git a/packages/feature-flags/package.json b/packages/feature-flags/package.json
index 40bb10884a0f..01939dea0dd1 100644
--- a/packages/feature-flags/package.json
+++ b/packages/feature-flags/package.json
@@ -2,7 +2,7 @@
"name": "@carbon/feature-flags",
"private": true,
"description": "Build with feature flags in Carbon",
- "version": "0.4.0",
+ "version": "0.5.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
diff --git a/packages/grid/package.json b/packages/grid/package.json
index b42d578dd2f8..ad3ca698061f 100644
--- a/packages/grid/package.json
+++ b/packages/grid/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/grid",
"description": "Grid for digital and software products using the Carbon Design System",
- "version": "10.19.0",
+ "version": "10.20.0-rc.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
@@ -32,10 +32,10 @@
},
"dependencies": {
"@carbon/import-once": "^10.5.0",
- "@carbon/layout": "^10.17.0"
+ "@carbon/layout": "^10.18.0-rc.0"
},
"devDependencies": {
- "@carbon/cli": "^10.18.0",
+ "@carbon/cli": "^10.19.0-rc.0",
"rimraf": "^3.0.0"
},
"eyeglass": {
diff --git a/packages/icon-build-helpers/package.json b/packages/icon-build-helpers/package.json
index c8ad29e9052e..3c820dcf9739 100644
--- a/packages/icon-build-helpers/package.json
+++ b/packages/icon-build-helpers/package.json
@@ -2,7 +2,7 @@
"name": "@carbon/icon-build-helpers",
"private": true,
"description": "Build helpers for the Carbon Design System icon library",
- "version": "0.14.0",
+ "version": "0.15.0-rc.0",
"license": "Apache-2.0",
"main": "src/index.js",
"repository": {
@@ -25,7 +25,7 @@
"@babel/preset-env": "^7.10.0",
"@babel/preset-react": "^7.10.0",
"@carbon/cli-reporter": "^10.4.0",
- "@carbon/icon-helpers": "^10.12.0",
+ "@carbon/icon-helpers": "^10.13.0-rc.0",
"@rollup/plugin-babel": "^5.2.2",
"@rollup/plugin-replace": "^2.3.4",
"browserslist-config-carbon": "^10.6.0",
diff --git a/packages/icon-helpers/package.json b/packages/icon-helpers/package.json
index 3b22004e7040..a3de56ef31d9 100644
--- a/packages/icon-helpers/package.json
+++ b/packages/icon-helpers/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/icon-helpers",
"description": "Helpers used alongside icons for digital and software products using the Carbon Design System",
- "version": "10.12.0",
+ "version": "10.13.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -33,7 +33,7 @@
"clean": "rimraf es lib umd"
},
"devDependencies": {
- "@carbon/cli": "^10.18.0",
+ "@carbon/cli": "^10.19.0-rc.0",
"rimraf": "^3.0.0"
},
"sideEffects": false
diff --git a/packages/icons-handlebars/package.json b/packages/icons-handlebars/package.json
index 4d152ff60200..657ad7a88456 100644
--- a/packages/icons-handlebars/package.json
+++ b/packages/icons-handlebars/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/icons-handlebars",
"description": "Handlebars helpers for IBM Design Language icons in digital and software products using the Carbon Design System",
- "version": "10.24.0",
+ "version": "10.25.0-rc.0",
"license": "Apache-2.0",
"main": "index.js",
"repository": {
@@ -26,8 +26,8 @@
"handlebars": "^4.0.12"
},
"dependencies": {
- "@carbon/icon-helpers": "^10.12.0",
- "@carbon/icons": "^10.24.0"
+ "@carbon/icon-helpers": "^10.13.0-rc.0",
+ "@carbon/icons": "^10.25.0-rc.0"
},
"devDependencies": {
"handlebars": "^4.0.12"
diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json
index 2b069a7b5663..87d7e1ce2108 100644
--- a/packages/icons-react/package.json
+++ b/packages/icons-react/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/icons-react",
"description": "React components for icons in digital and software products using the Carbon Design System",
- "version": "10.24.0",
+ "version": "10.25.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -36,12 +36,12 @@
"react": ">=16"
},
"dependencies": {
- "@carbon/icon-helpers": "^10.12.0",
+ "@carbon/icon-helpers": "^10.13.0-rc.0",
"prop-types": "^15.7.2"
},
"devDependencies": {
- "@carbon/icon-build-helpers": "^0.14.0",
- "@carbon/icons": "^10.24.0"
+ "@carbon/icon-build-helpers": "^0.15.0-rc.0",
+ "@carbon/icons": "^10.25.0-rc.0"
},
"sideEffects": false
}
diff --git a/packages/icons-vue/package.json b/packages/icons-vue/package.json
index 6f289717af8f..cf9e96a95192 100644
--- a/packages/icons-vue/package.json
+++ b/packages/icons-vue/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/icons-vue",
"description": "Vue components for icons in digital and software products using the Carbon Design System",
- "version": "10.24.0",
+ "version": "10.25.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -28,11 +28,11 @@
"clean": "rimraf es lib"
},
"dependencies": {
- "@carbon/icon-helpers": "^10.12.0"
+ "@carbon/icon-helpers": "^10.13.0-rc.0"
},
"devDependencies": {
"@carbon/cli-reporter": "^10.4.0",
- "@carbon/icons": "^10.24.0",
+ "@carbon/icons": "^10.25.0-rc.0",
"fs-extra": "^8.1.0",
"prettier": "^2.2.1",
"rimraf": "^3.0.0",
diff --git a/packages/icons/package.json b/packages/icons/package.json
index b1b2d3579092..a5e11f7e4554 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/icons",
"description": "Icons for digital and software products using the Carbon Design System",
- "version": "10.24.0",
+ "version": "10.25.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -38,8 +38,8 @@
"prepublishOnly": "yarn build"
},
"devDependencies": {
- "@carbon/cli": "^10.18.0",
- "@carbon/icon-build-helpers": "^0.14.0",
+ "@carbon/cli": "^10.19.0-rc.0",
+ "@carbon/icon-build-helpers": "^0.15.0-rc.0",
"rimraf": "^3.0.2"
}
}
diff --git a/packages/layout/package.json b/packages/layout/package.json
index bc5fb93d1e32..b6952ef83d20 100644
--- a/packages/layout/package.json
+++ b/packages/layout/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/layout",
"description": "Layout helpers for digital and software products using the Carbon Design System",
- "version": "10.17.0",
+ "version": "10.18.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
diff --git a/packages/motion/package.json b/packages/motion/package.json
index aedebef3be46..770f9843320f 100644
--- a/packages/motion/package.json
+++ b/packages/motion/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/motion",
"description": "Motion helpers for digital and software products using the Carbon Design System",
- "version": "10.12.0",
+ "version": "10.13.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -29,7 +29,7 @@
"clean": "rimraf es lib umd"
},
"devDependencies": {
- "@carbon/cli": "^10.18.0",
+ "@carbon/cli": "^10.19.0-rc.0",
"rimraf": "^3.0.0"
},
"eyeglass": {
diff --git a/packages/pictograms-react/package.json b/packages/pictograms-react/package.json
index 7ebdf4b09556..f3a8ae59daab 100644
--- a/packages/pictograms-react/package.json
+++ b/packages/pictograms-react/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/pictograms-react",
"description": "React components for pictograms in digital and software products using the Carbon Design System",
- "version": "11.2.0",
+ "version": "11.3.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -37,13 +37,13 @@
"react": ">=16"
},
"dependencies": {
- "@carbon/icon-helpers": "^10.12.0",
+ "@carbon/icon-helpers": "^10.13.0-rc.0",
"@carbon/telemetry": "0.0.0-alpha.6",
"prop-types": "^15.7.2"
},
"devDependencies": {
- "@carbon/icon-build-helpers": "^0.14.0",
- "@carbon/pictograms": "^11.2.0"
+ "@carbon/icon-build-helpers": "^0.15.0-rc.0",
+ "@carbon/pictograms": "^11.3.0-rc.0"
},
"sideEffects": false
}
diff --git a/packages/pictograms/categories.yml b/packages/pictograms/categories.yml
index 92fe9d73c084..2b4250f7125e 100644
--- a/packages/pictograms/categories.yml
+++ b/packages/pictograms/categories.yml
@@ -6,6 +6,7 @@ categories:
- crop
- delete
- do-not
+ - do-not--02
- download--01
- download--02
- embed
@@ -39,13 +40,18 @@ categories:
- apartment
- building
- elevator
+ - emergency--exit
- escalator--down
- escalator--up
- fire--alarm
- fire--extinguisher
- id--badge
+ - no--smoking
- office
+ - stairs
+ - stairs--down
- stairs--plan--view
+ - stairs--up
- name: Cities
members:
- amsterdam--canal
@@ -280,18 +286,26 @@ categories:
members:
- app--developer
- application
+ - art--tools--01
- birthday--cake
+ - content--design
- cupcake
- design-and-development--01
- design-and-development--02
+ - design--leadership
+ - design--research
- feedback--01
- hills
- idea
- ideate
+ - organization
+ - overview
- path
- pattern
+ - user--experience-design
- user--insights
- user--interface
+ - visual--design
- web--developer
- wedding--cake
- windows
@@ -307,8 +321,11 @@ categories:
- mobile--chat
- mobile--devices
- mobile--phone
+ - rotate--device
- swipe--left
- swipe--right
+ - tablet--device
+ - tablet--device--check
- text--equivalent
- text--input
- text--layout
@@ -338,6 +355,7 @@ categories:
- desktop
- electric
- headphones
+ - microphone
- printer
- telephone
- television
@@ -392,6 +410,7 @@ categories:
- doctor
- doctor-patient
- dropper
+ - eyewash--station
- first--aid
- heart--health
- hospital
@@ -456,6 +475,7 @@ categories:
- satellite--dish
- solar--field
- solar--panel
+ - sprout
- stack-limitation
- steel
- telecom
@@ -542,11 +562,13 @@ categories:
- name: Networking
members:
- automation--decision
+ - bluepages
- distribution--ledger
- global--network
- integration
- inspect--data
- global--partner
+ - mail--verse
- network
- network--services
- networking--01
@@ -559,12 +581,15 @@ categories:
- private--network--02
- private--network--03
- private--network--04
+ - professional--marketplace
- reset--hybrid--cloud
- reset--settings
+ - sales--connect
- support--services
- transactional--blockchain
- transactional--trust
- transform--02
+ - workday
- name: People
members:
- advocate
diff --git a/packages/pictograms/package.json b/packages/pictograms/package.json
index 57ff2e72951a..6be21ca4a5ad 100644
--- a/packages/pictograms/package.json
+++ b/packages/pictograms/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/pictograms",
"description": "Pictograms for digital and software products using the Carbon Design System",
- "version": "11.2.0",
+ "version": "11.3.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -31,7 +31,7 @@
"prepublishOnly": "yarn build"
},
"devDependencies": {
- "@carbon/icon-build-helpers": "^0.14.0",
+ "@carbon/icon-build-helpers": "^0.15.0-rc.0",
"rimraf": "^3.0.0"
}
}
diff --git a/packages/pictograms/pictograms.yml b/packages/pictograms/pictograms.yml
index 7629fa6461d2..9a36cf08c8b9 100644
--- a/packages/pictograms/pictograms.yml
+++ b/packages/pictograms/pictograms.yml
@@ -217,6 +217,11 @@
- storage
- historical
- history
+- name: art--tools--01
+ friendly_name: Art tools 01
+ aliases:
+ - art tools
+ - art
- name: asia--australia
friendly_name: Asia Australia
aliases:
@@ -371,7 +376,7 @@
- travel
- transportation
- name: birthday--cake
- friendly_name: birthday--cake
+ friendly_name: Birthday cake
aliases:
- birthday cake
- cake
@@ -388,6 +393,10 @@
- block
- chain
- blockchain
+- name: bluepages
+ friendly_name: Bluepages
+ aliases:
+ - bluepages
- name: boston--zakim-bridge
friendly_name: Boston Zakim Bridge
aliases:
@@ -1206,6 +1215,10 @@
- container,
- containers
- kubernetes
+- name: content--design
+ friendly_name: Content design
+ aliases:
+ - content design
- name: continuous--security
friendly_name: Continuous Security
aliases:
@@ -1368,6 +1381,14 @@
- enterprise design thinking team
- people
- team
+- name: design--leadership
+ friendly_name: Design leadership
+ aliases:
+ - Design leadership
+- name: design--research
+ friendly_name: Design research
+ aliases:
+ - Design research
- name: desktop
friendly_name: Desktop
aliases:
@@ -1449,6 +1470,14 @@
- warning
- caution
- don't
+- name: do-not--02
+ friendly_name: Do not 02
+ aliases:
+ - do not
+ - do not 02
+ - warning
+ - caution
+ - don't
- name: docker
friendly_name: Docker
aliases:
@@ -1598,6 +1627,11 @@
friendly_name: Embed
aliases:
- embed
+- name: emergency--exit
+ friendly_name: Emergency exit
+ aliases:
+ - emergency exit
+ - emergency
- name: employee--insights
friendly_name: Employee insights
aliases:
@@ -1702,6 +1736,14 @@
- eye
- vision
- see
+- name: eyewash--station
+ friendly_name: Eyewash station
+ aliases:
+ - eyewash
+ - eye wash
+ - rinse
+ - emergency eye wash
+ - eyewash station
- name: face--dissatisfied
friendly_name: Face dissatisfied
aliases:
@@ -2363,7 +2405,7 @@
- IBM Z®
- IBM
- name: ibm--z-and-linuxone-multi-frame
- friendly_name: IBM Z and LinuxONE multi-frame
+ friendly_name: IBM Z® and LinuxONE multi-frame
aliases:
- LinuxONE
- Z
@@ -2373,7 +2415,7 @@
- multi-frame
- IBM Z
- name: ibm--z-and-linuxone-single-frame
- friendly_name: IBM Z and LinuxONE single frame
+ friendly_name: IBM Z® and LinuxONE single frame
aliases:
- LinuxONE
- Z
@@ -2739,6 +2781,11 @@
- enlarge
- study
- life science
+- name: mail--verse
+ friendly_name: Mail verse
+ aliases:
+ - mail
+ - verse
- name: managing--contractual--flow
friendly_name: Managing contractual flow
aliases:
@@ -2849,6 +2896,16 @@
- life science
- microbes
- germs
+- name: microphone
+ friendly_name: Microphone
+ aliases:
+ - microphone
+ - mic
+ - input
+ - audio
+ - stream
+ - record
+ - podcast
- name: microscope
friendly_name: Microscope
aliases:
@@ -3079,6 +3136,11 @@
- sky
- stars
- moon
+- name: no--smoking
+ friendly_name: No smoking
+ aliases:
+ - no smoking
+ - smoke-free area
- name: nyc--brooklyn
friendly_name: NYC Brooklyn
aliases:
@@ -3182,12 +3244,21 @@
- flow
- cash flow
- finance
+- name: organization
+ friendly_name: Organization
+ aliases:
+ - organization
+ - design organization
- name: overcast
friendly_name: Overcast
aliases:
- overcast
- weather
- sky
+- name: overview
+ friendly_name: Overview
+ aliases:
+ - overview
- name: paper--clip
friendly_name: Paper clip
aliases:
@@ -3526,6 +3597,10 @@
- process
- working
- cycle
+- name: professional--marketplace
+ friendly_name: Professional marketplace
+ aliases:
+ - professional marketplace
- name: progress
friendly_name: Progress
aliases:
@@ -3788,6 +3863,12 @@
- rome
- city
- cities
+- name: rotate--device
+ friendly_name: Rotate device
+ aliases:
+ - rotate device
+ - orientation
+ - portrait orientation
- name: saas--enablement
friendly_name: SaaS enablement
aliases:
@@ -3796,6 +3877,10 @@
- enablement
- cloud
- software as a service
+- name: sales--connect
+ friendly_name: Sales connect
+ aliases:
+ - sales connect
- name: sample--file
friendly_name: Sample file
aliases:
@@ -4117,11 +4202,27 @@
- active
- running
- runner
+- name: sprout
+ friendly_name: Sprout
+ aliases:
+ - sprout
+ - compost
- name: stack-limitation
friendly_name: Stack limitation
aliases:
- stack limitation
- packaging
+- name: stairs
+ friendly_name: Stairs
+ aliases:
+ - stairs
+ - stairwell
+- name: stairs--down
+ friendly_name: Stairs down
+ aliases:
+ - stairs
+ - stairs down
+ - stairwell
- name: stairs--plan--view
friendly_name: Stairs plan view
aliases:
@@ -4130,6 +4231,12 @@
- plan
- building structure
- structure
+- name: stairs--up
+ friendly_name: Stairs up
+ aliases:
+ - stairs
+ - stairs up
+ - stairwell
- name: stationary--bicycle
friendly_name: Stationary bicycle
aliases:
@@ -4358,6 +4465,17 @@
- clothes
- clothing
- retail
+- name: tablet--device
+ friendly_name: Tablet device
+ aliases:
+ - tablet device
+ - tablet
+- name: tablet--device--check
+ friendly_name: Tablet device check
+ aliases:
+ - tablet device
+ - tablet device check
+ - tablet
- name: tags
friendly_name: Tags
aliases:
@@ -4825,6 +4943,13 @@
- data
- analytics
- user
+- name: user--experience-design
+ friendly_name: User experience design
+ aliases:
+ - user experience design
+ - uxd
+ - ued
+ - xd
- name: user--insights
friendly_name: User insights
aliases:
@@ -4905,6 +5030,10 @@
- vision
- watson
- AI
+- name: visual--design
+ friendly_name: Visual design
+ aliases:
+ - visual design
- name: visual--insights
friendly_name: Visual insights
aliases:
@@ -5059,6 +5188,10 @@
- data analytics
- data
- analytics
+- name: workday
+ friendly_name: Workday
+ aliases:
+ - workday
- name: world--community--grid
friendly_name: World Community Grid
aliases:
diff --git a/packages/pictograms/src/svg/art--tools--01.svg b/packages/pictograms/src/svg/art--tools--01.svg
new file mode 100644
index 000000000000..b4d20322afe0
--- /dev/null
+++ b/packages/pictograms/src/svg/art--tools--01.svg
@@ -0,0 +1,20 @@
+
+
+
diff --git a/packages/pictograms/src/svg/bluepages.svg b/packages/pictograms/src/svg/bluepages.svg
new file mode 100644
index 000000000000..0ba3a78ae5f9
--- /dev/null
+++ b/packages/pictograms/src/svg/bluepages.svg
@@ -0,0 +1,24 @@
+
+
+
diff --git a/packages/pictograms/src/svg/chart--bar.svg b/packages/pictograms/src/svg/chart--bar.svg
index 655346ffa123..13b36df2629f 100644
--- a/packages/pictograms/src/svg/chart--bar.svg
+++ b/packages/pictograms/src/svg/chart--bar.svg
@@ -2,11 +2,11 @@
diff --git a/packages/pictograms/src/svg/content--design.svg b/packages/pictograms/src/svg/content--design.svg
new file mode 100644
index 000000000000..d90c74b7f1e7
--- /dev/null
+++ b/packages/pictograms/src/svg/content--design.svg
@@ -0,0 +1,31 @@
+
+
+
diff --git a/packages/pictograms/src/svg/design--leadership.svg b/packages/pictograms/src/svg/design--leadership.svg
new file mode 100644
index 000000000000..c5e406e55350
--- /dev/null
+++ b/packages/pictograms/src/svg/design--leadership.svg
@@ -0,0 +1,26 @@
+
+
+
diff --git a/packages/pictograms/src/svg/design--research.svg b/packages/pictograms/src/svg/design--research.svg
new file mode 100644
index 000000000000..cf7117fb629f
--- /dev/null
+++ b/packages/pictograms/src/svg/design--research.svg
@@ -0,0 +1,20 @@
+
+
+
diff --git a/packages/pictograms/src/svg/dialogue.svg b/packages/pictograms/src/svg/dialogue.svg
index c9c8d181a02c..cea9bbfb4c2f 100644
--- a/packages/pictograms/src/svg/dialogue.svg
+++ b/packages/pictograms/src/svg/dialogue.svg
@@ -1,11 +1,19 @@
-
+
diff --git a/packages/pictograms/src/svg/do-not--02.svg b/packages/pictograms/src/svg/do-not--02.svg
new file mode 100644
index 000000000000..e9305957c707
--- /dev/null
+++ b/packages/pictograms/src/svg/do-not--02.svg
@@ -0,0 +1,10 @@
+
+
+
diff --git a/packages/pictograms/src/svg/emergency--exit.svg b/packages/pictograms/src/svg/emergency--exit.svg
new file mode 100644
index 000000000000..df5761af3bdd
--- /dev/null
+++ b/packages/pictograms/src/svg/emergency--exit.svg
@@ -0,0 +1,15 @@
+
+
+
diff --git a/packages/pictograms/src/svg/eyewash--station.svg b/packages/pictograms/src/svg/eyewash--station.svg
new file mode 100644
index 000000000000..002775c037d5
--- /dev/null
+++ b/packages/pictograms/src/svg/eyewash--station.svg
@@ -0,0 +1,43 @@
+
+
+
diff --git a/packages/pictograms/src/svg/faucet.svg b/packages/pictograms/src/svg/faucet.svg
index c221dec43e0f..414c883452c4 100644
--- a/packages/pictograms/src/svg/faucet.svg
+++ b/packages/pictograms/src/svg/faucet.svg
@@ -1,21 +1,17 @@
-
+
diff --git a/packages/pictograms/src/svg/mail--verse.svg b/packages/pictograms/src/svg/mail--verse.svg
new file mode 100644
index 000000000000..55000028a155
--- /dev/null
+++ b/packages/pictograms/src/svg/mail--verse.svg
@@ -0,0 +1,17 @@
+
+
+
diff --git a/packages/pictograms/src/svg/microphone.svg b/packages/pictograms/src/svg/microphone.svg
new file mode 100644
index 000000000000..f39efa5caff5
--- /dev/null
+++ b/packages/pictograms/src/svg/microphone.svg
@@ -0,0 +1,11 @@
+
+
+
diff --git a/packages/pictograms/src/svg/no--smoking.svg b/packages/pictograms/src/svg/no--smoking.svg
new file mode 100644
index 000000000000..9c22d471c642
--- /dev/null
+++ b/packages/pictograms/src/svg/no--smoking.svg
@@ -0,0 +1,16 @@
+
+
+
diff --git a/packages/pictograms/src/svg/organization.svg b/packages/pictograms/src/svg/organization.svg
new file mode 100644
index 000000000000..cfc43f32e967
--- /dev/null
+++ b/packages/pictograms/src/svg/organization.svg
@@ -0,0 +1,36 @@
+
+
+
diff --git a/packages/pictograms/src/svg/overview.svg b/packages/pictograms/src/svg/overview.svg
new file mode 100644
index 000000000000..a7bbf41cffb4
--- /dev/null
+++ b/packages/pictograms/src/svg/overview.svg
@@ -0,0 +1,19 @@
+
+
+
diff --git a/packages/pictograms/src/svg/professional--marketplace.svg b/packages/pictograms/src/svg/professional--marketplace.svg
new file mode 100644
index 000000000000..001166c1de3d
--- /dev/null
+++ b/packages/pictograms/src/svg/professional--marketplace.svg
@@ -0,0 +1,24 @@
+
+
+
diff --git a/packages/pictograms/src/svg/rotate--device.svg b/packages/pictograms/src/svg/rotate--device.svg
new file mode 100644
index 000000000000..db4999398179
--- /dev/null
+++ b/packages/pictograms/src/svg/rotate--device.svg
@@ -0,0 +1,12 @@
+
+
+
diff --git a/packages/pictograms/src/svg/sales--connect.svg b/packages/pictograms/src/svg/sales--connect.svg
new file mode 100644
index 000000000000..3c9d69c01b26
--- /dev/null
+++ b/packages/pictograms/src/svg/sales--connect.svg
@@ -0,0 +1,19 @@
+
+
+
diff --git a/packages/pictograms/src/svg/shower.svg b/packages/pictograms/src/svg/shower.svg
index 97c4fbc212e4..d2908956e028 100644
--- a/packages/pictograms/src/svg/shower.svg
+++ b/packages/pictograms/src/svg/shower.svg
@@ -1,29 +1,26 @@
-
+
diff --git a/packages/pictograms/src/svg/sprout.svg b/packages/pictograms/src/svg/sprout.svg
new file mode 100644
index 000000000000..593d5cd6b5ce
--- /dev/null
+++ b/packages/pictograms/src/svg/sprout.svg
@@ -0,0 +1,12 @@
+
+
+
diff --git a/packages/pictograms/src/svg/stairs--down.svg b/packages/pictograms/src/svg/stairs--down.svg
new file mode 100644
index 000000000000..46fe0e1b56f7
--- /dev/null
+++ b/packages/pictograms/src/svg/stairs--down.svg
@@ -0,0 +1,10 @@
+
+
+
diff --git a/packages/pictograms/src/svg/stairs--up.svg b/packages/pictograms/src/svg/stairs--up.svg
new file mode 100644
index 000000000000..b53d7e7510c4
--- /dev/null
+++ b/packages/pictograms/src/svg/stairs--up.svg
@@ -0,0 +1,10 @@
+
+
+
diff --git a/packages/pictograms/src/svg/stairs.svg b/packages/pictograms/src/svg/stairs.svg
new file mode 100644
index 000000000000..c81cc06f5725
--- /dev/null
+++ b/packages/pictograms/src/svg/stairs.svg
@@ -0,0 +1,10 @@
+
+
+
diff --git a/packages/pictograms/src/svg/tablet--device--check.svg b/packages/pictograms/src/svg/tablet--device--check.svg
new file mode 100644
index 000000000000..d35f24894401
--- /dev/null
+++ b/packages/pictograms/src/svg/tablet--device--check.svg
@@ -0,0 +1,10 @@
+
+
+
diff --git a/packages/pictograms/src/svg/tablet--device.svg b/packages/pictograms/src/svg/tablet--device.svg
new file mode 100644
index 000000000000..4436ffbcf176
--- /dev/null
+++ b/packages/pictograms/src/svg/tablet--device.svg
@@ -0,0 +1,9 @@
+
+
+
diff --git a/packages/pictograms/src/svg/user--experience-design.svg b/packages/pictograms/src/svg/user--experience-design.svg
new file mode 100644
index 000000000000..522506f4ec54
--- /dev/null
+++ b/packages/pictograms/src/svg/user--experience-design.svg
@@ -0,0 +1,22 @@
+
+
+
diff --git a/packages/pictograms/src/svg/visual--design.svg b/packages/pictograms/src/svg/visual--design.svg
new file mode 100644
index 000000000000..67dfec1e029d
--- /dev/null
+++ b/packages/pictograms/src/svg/visual--design.svg
@@ -0,0 +1,19 @@
+
+
+
diff --git a/packages/pictograms/src/svg/workday.svg b/packages/pictograms/src/svg/workday.svg
new file mode 100644
index 000000000000..bdb5c4109d96
--- /dev/null
+++ b/packages/pictograms/src/svg/workday.svg
@@ -0,0 +1,10 @@
+
+
+
diff --git a/packages/react/.storybook/addon-carbon-theme/register.js b/packages/react/.storybook/addon-carbon-theme/register.js
deleted file mode 100644
index 17f66250ae2e..000000000000
--- a/packages/react/.storybook/addon-carbon-theme/register.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-import React from 'react';
-import { addons, types } from '@storybook/addons';
-import { CarbonTypePanel } from './components/Panel';
-import { CARBON_TYPE_ADDON_ID, CARBON_TYPE_PANEL_ID } from './shared';
-
-if (process.env.CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES === 'true') {
- addons.register(CARBON_TYPE_ADDON_ID, (api) => {
- addons.addPanel(CARBON_TYPE_PANEL_ID, {
- title: 'Carbon type',
- render: ({ active, key }) => (
- ({
id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
size: select('Field size (size)', sizes, undefined) || undefined,
@@ -67,6 +72,7 @@ const props = () => ({
'Form validation UI content (invalidText)',
'A valid value is required'
),
+ type: select('Type (type)', types, ''),
warn: boolean('Show warning state (warn)', false),
warnText: text(
'Warning state text (warnText)',
diff --git a/packages/react/src/components/ListBox/ListBoxSelection.js b/packages/react/src/components/ListBox/ListBoxSelection.js
index e61643b46972..b73c26cdae9e 100644
--- a/packages/react/src/components/ListBox/ListBoxSelection.js
+++ b/packages/react/src/components/ListBox/ListBoxSelection.js
@@ -55,14 +55,39 @@ const ListBoxSelection = ({
}
};
const description = selectionCount ? t('clear.all') : t('clear.selection');
- return (
+ const tagClasses = cx(
+ `${prefix}--tag`,
+ `${prefix}--tag--filter`,
+ `${prefix}--tag--high-contrast`,
+ {
+ [`${prefix}--tag--disabled`]: disabled,
+ }
+ );
+ return selectionCount ? (
+
+
+ {selectionCount}
+
+
+
-
-
`;
diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index 70517c2964aa..6d290f73fb5c 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -212,13 +212,15 @@ describe('MultiSelect', () => {
Simulate.click(itemNode);
expect(
- document.querySelector('[aria-label="Clear Selection"]')
+ document.querySelector('[aria-label="Clear all selected items"]')
).toBeTruthy();
- Simulate.click(document.querySelector('[aria-label="Clear Selection"]'));
+ Simulate.click(
+ document.querySelector('[aria-label="Clear all selected items"]')
+ );
expect(
- document.querySelector('[aria-label="Clear Selection"]')
+ document.querySelector('[aria-label="Clear all selected items"]')
).toBeFalsy();
});
@@ -250,7 +252,7 @@ describe('MultiSelect', () => {
);
expect(
- document.querySelector('[aria-label="Clear Selection"]')
+ document.querySelector('[aria-label="Clear all selected items"]')
).toBeTruthy();
const labelNode = getByText(container, label);
diff --git a/packages/sketch/package.json b/packages/sketch/package.json
index 3296f0cba9dd..8aa19a0a1cc2 100644
--- a/packages/sketch/package.json
+++ b/packages/sketch/package.json
@@ -2,7 +2,7 @@
"name": "@carbon/sketch",
"private": true,
"description": "Tooling for generating a sketch plugin to bring code to design",
- "version": "10.25.0",
+ "version": "10.26.0-rc.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
@@ -29,11 +29,11 @@
},
"dependencies": {
"@babel/polyfill": "^7.8.7",
- "@carbon/colors": "^10.19.0",
- "@carbon/icon-helpers": "^10.12.0",
- "@carbon/icons": "^10.24.0",
- "@carbon/themes": "^10.26.0",
- "@carbon/type": "^10.20.0",
+ "@carbon/colors": "^10.20.0-rc.0",
+ "@carbon/icon-helpers": "^10.13.0-rc.0",
+ "@carbon/icons": "^10.25.0-rc.0",
+ "@carbon/themes": "^10.27.0-rc.0",
+ "@carbon/type": "^10.21.0-rc.0",
"@skpm/builder": "^0.7.0",
"color-string": "^1.5.3",
"skpm": "^1.2.0"
diff --git a/packages/storybook-addon-carbon-theme/.babelrc b/packages/storybook-addon-carbon-theme/.babelrc
deleted file mode 100644
index 7dd5e9df2340..000000000000
--- a/packages/storybook-addon-carbon-theme/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "presets": ["@babel/preset-react"]
-}
diff --git a/packages/storybook-addon-carbon-theme/README.md b/packages/storybook-addon-carbon-theme/README.md
deleted file mode 100644
index 80ec85bb0728..000000000000
--- a/packages/storybook-addon-carbon-theme/README.md
+++ /dev/null
@@ -1,98 +0,0 @@
-# @carbon/storybook-addon-theme
-
-> Carbon theme switcher for Storybook
-
-## Getting started
-
-To install `@carbon/storybook-addon-theme` in your project, you will need to run
-the following command using [npm](https://www.npmjs.com/):
-
-```bash
-npm install -S @carbon/storybook-addon-theme
-```
-
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
-instead:
-
-```bash
-yarn add @carbon/storybook-addon-theme
-```
-
-## Usage
-
-`.storybook/main.js`:
-
-```js
-module.exports = {
- addons: ['@carbon/storyboook-addon-theme'],
-};
-```
-
-Use with a feature flag switch is possible if you construct the addons array.
-
-```js
-const addons = [
- /* other addons */
-];
-
-if (process.env.CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES === 'true') {
- addons.push('@carbon/storybook-addon-theme');
-}
-
-module.exports = {
- addons,
- stories: ['../src/**/*-story.js', '../src/**/*.stories.mdx'],
-};
-```
-
-### Global Decorator
-
-```js
-import { withCarbonTheme } from '@carbon/storybook-addon-theme'; // for React
-// import { withCarbonTheme } from '@carbon/storybook-addon-theme/vue'; // for Vue
-// for Angular
-// .
-// .
-// .
-addDecorator(withCarbonTheme);
-// .
-// .
-// .
-addParameters({
- // optional
- carbonTheme: {
- theme: 'g10', // optional default carbon theme
- themes: ['g10', 'g90'], // optional carbonTheme filter
- },
-});
-```
-
-within your stories:
-
-```js
-import { withCarbonTheme } from '@carbon/storybook-addon-theme'; // for React
-// import { withCarbonTheme } from '@carbon/storybook-addon-theme/vue'; // for Vue
-// for Angular
-// .
-// .
-// .
-storiesOf('Component', module)
- .addDecorator(withCarbonTheme)
- .add(() => story, {
- carbonTheme: {
- // optional
- theme: 'g10', // optional default carbon theme
- themes: ['g10', 'g90'], // optional carbonTheme filter (additive to global)
- },
- });
-```
-
-## 🙌 Contributing
-
-We're always looking for contributors to help us fix bugs, build new features,
-or help us improve the project documentation. If you're interested, definitely
-check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀
-
-## 📝 License
-
-Licensed under the [Apache 2.0 License](/LICENSE).
diff --git a/packages/storybook-addon-carbon-theme/package.json b/packages/storybook-addon-carbon-theme/package.json
deleted file mode 100644
index 45c2439d71dd..000000000000
--- a/packages/storybook-addon-carbon-theme/package.json
+++ /dev/null
@@ -1,57 +0,0 @@
-{
- "name": "@carbon/storybook-addon-theme",
- "description": "Carbon theme switcher for Storybook",
- "version": "0.1.0",
- "license": "Apache-2.0",
- "main": "dist/react.js",
- "repository": {
- "type": "git",
- "url": "https://github.com/carbon-design-system/carbon.git",
- "directory": "packages/storybook-addon-carbon-theme"
- },
- "bugs": "https://github.com/carbon-design-system/carbon/issues",
- "homepage": "https://github.com/storybookjs/storybook#readme",
- "files": [
- "dist/**/*",
- "README.md",
- "*.js"
- ],
- "keywords": [
- "addon",
- "carbon",
- "theme",
- "storybook",
- "ibm",
- "carbon-design-system",
- "components",
- "react"
- ],
- "publishConfig": {
- "access": "public"
- },
- "scripts": {
- "clean": "rimraf dist",
- "build": "npm run clean && babel src --out-dir dist -s",
- "prepare": "npm run build"
- },
- "peerDependencies": {
- "react": "*",
- "vue": "*"
- },
- "dependencies": {
- "@storybook/addons": "5.3.19",
- "@storybook/api": "5.3.19",
- "@storybook/client-api": "5.3.19",
- "@storybook/client-logger": "5.3.19",
- "@storybook/components": "5.3.19",
- "@storybook/core-events": "5.3.19",
- "@storybook/theming": "5.3.19",
- "core-js": "^3.0.1",
- "global": "^4.3.2"
- },
- "devDependencies": {
- "@babel/cli": "^7.10.0",
- "@babel/core": "^7.10.0",
- "@babel/preset-react": "^7.10.4"
- }
-}
diff --git a/packages/storybook-addon-carbon-theme/register.js b/packages/storybook-addon-carbon-theme/register.js
deleted file mode 100644
index 25f65b255088..000000000000
--- a/packages/storybook-addon-carbon-theme/register.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-require('./dist/register');
diff --git a/packages/storybook-addon-carbon-theme/src/components/Panel.js b/packages/storybook-addon-carbon-theme/src/components/Panel.js
deleted file mode 100644
index 8b8e1d5fb3bd..000000000000
--- a/packages/storybook-addon-carbon-theme/src/components/Panel.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/* eslint-disable react/prop-types */
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Form } from '@storybook/components';
-import { SET_STORIES, STORY_CHANGED } from '@storybook/core-events';
-
-import {
- CARBON_CURRENT_THEME,
- CARBON_THEMES,
- CARBON_THEME_DEFAULT,
- CARBON_THEME_PARAM,
- mergeParams,
-} from '../shared';
-
-/**
- * Storybook add-on panel for Carbon theme switcher.
- */
-export const CarbonThemesPanel = ({ api, active, channel }) => {
- const [theme, setTheme] = useState(CARBON_THEME_DEFAULT);
- const [themes, setThemes] = useState(CARBON_THEMES);
-
- useEffect(() => {
- // on mount sort out initial state
- const handleStoryChange = () => {
- const storyData = api.getCurrentStoryData();
-
- let params = storyData
- ? storyData.parameters
- ? storyData.parameters[CARBON_THEME_PARAM]
- : {}
- : {};
-
- params = mergeParams(params);
-
- setTheme(params.theme);
- setThemes(params.themes);
- };
-
- api.on(SET_STORIES, handleStoryChange);
- api.on(STORY_CHANGED, handleStoryChange);
-
- return () => {
- api.off(SET_STORIES, handleStoryChange);
- api.off(STORY_CHANGED, handleStoryChange);
- };
- }, [api]);
-
- useEffect(() => {
- channel.emit(CARBON_CURRENT_THEME, theme);
- }, [theme, channel]);
-
- if (!active) {
- return null;
- }
-
- return (
-
- );
-};
-
-CarbonThemesPanel.propTypes = {
- /**
- * `true` if this Storybook add-on panel is active.
- */
- active: PropTypes.bool.isRequired,
- /**
- * The Storybook API object.
- */
- api: PropTypes.any,
- /**
- * channel
- */
- channel: PropTypes.object,
-};
diff --git a/packages/storybook-addon-carbon-theme/src/react.js b/packages/storybook-addon-carbon-theme/src/react.js
deleted file mode 100644
index b6c5158e0a5f..000000000000
--- a/packages/storybook-addon-carbon-theme/src/react.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-import { useEffect, useState } from 'react';
-import addons, { makeDecorator } from '@storybook/addons';
-import {
- CARBON_CURRENT_THEME,
- CARBON_THEME_PARAM,
- WITH_CARBON_THEME,
-} from './shared';
-
-const Wrapper = (getStory, context, parameters) => {
- const channel = addons.getChannel();
- const [carbonTheme, setCarbonTheme] = useState(undefined);
-
- const handleCarbonCurrentTheme = (theme) => {
- document.documentElement.setAttribute('storybook-carbon-theme', theme);
- setCarbonTheme(theme);
- };
-
- useEffect(() => {
- channel.on(CARBON_CURRENT_THEME, handleCarbonCurrentTheme);
- setCarbonTheme(carbonTheme || parameters.value);
-
- return () => {
- channel.removeListener(CARBON_CURRENT_THEME, handleCarbonCurrentTheme);
- }; // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- return getStory(context);
-};
-
-export const withCarbonTheme = makeDecorator({
- name: WITH_CARBON_THEME,
- parameterName: CARBON_THEME_PARAM,
- wrapper: Wrapper,
-});
diff --git a/packages/storybook-addon-carbon-theme/src/register.js b/packages/storybook-addon-carbon-theme/src/register.js
deleted file mode 100644
index 34baf8728084..000000000000
--- a/packages/storybook-addon-carbon-theme/src/register.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable react/display-name */
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-import React from 'react';
-import { addons } from '@storybook/addons';
-import { CarbonThemesPanel /*, CarbonTypePanel */ } from './components/Panel';
-import { CARBON_THEMES_ADDON_ID, CARBON_THEME_PANEL_ID } from './shared';
-
-addons.register(CARBON_THEMES_ADDON_ID, (api) => {
- const channel = addons.getChannel();
- addons.addPanel(CARBON_THEME_PANEL_ID, {
- title: 'Carbon theme',
- render: ({ active, key }) => (
- Source code
+
+```scss
+@mixin type-classes() {
+ // Font families
+ @each $name, $value in $font-families {
+ .#{$prefix}--type-#{$name} {
+ font-family: $value;
+ }
+ }
+
+ // Font weights
+ @each $name, $value in $font-weights {
+ .#{$prefix}--type-#{$name} {
+ font-weight: $value;
+ }
+ }
+
+ // Font styles
+ .#{$prefix}--type-italic {
+ font-style: italic;
+ }
+
+ // Type styles
+ @each $name, $value in $tokens {
+ .#{$prefix}--type-#{$name} {
+ @include type-style($name, map.has-key($value, breakpoints));
+ }
+ }
+}
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
+ - [font-families [variable]](#font-families-variable)
+ - [prefix [variable]](#prefix-variable)
+ - [font-weights [variable]](#font-weights-variable)
+ - [tokens [variable]](#tokens-variable)
+
### ✅carbon--font-families [variable]
Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
@@ -146,6 +247,32 @@ $carbon--font-families: (
- [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
- [carbon--font-family [function]](#carbon--font-family-function)
+### ✅font-families [variable]
+
+Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
+Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
+
+
+Source code
+
+```scss
+$font-families: (
+ 'mono': unquote("'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"),
+ 'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
+ 'sans-condensed': unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
+ 'sans-hebrew': unquote("'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"),
+ 'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+- **Used by**:
+ - [type-classes [mixin]](#type-classes-mixin)
+ - [font-family [function]](#font-family-function)
+
### ✅carbon--font-family [function]
Get the font-family for an IBM Plex font
@@ -174,6 +301,34 @@ Get the font-family for an IBM Plex font
- **Used by**:
- [carbon--font-family [mixin]](#carbon--font-family-mixin)
+### ✅font-family [function]
+
+Get the font-family for an IBM Plex font
+
+
+Source code
+
+```scss
+@function font-family($name) {
+ @return map-get($font-families, $name);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$name` | — | `String` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Returns**: `String`
+- **Requires**:
+ - [font-families [variable]](#font-families-variable)
+- **Used by**:
+ - [font-family [mixin]](#font-family-mixin)
+
### ✅carbon--font-family [mixin]
Include the `font-family` definition for the given name in your selector
@@ -199,6 +354,31 @@ Include the `font-family` definition for the given name in your selector
- **Requires**:
- [carbon--font-family [function]](#carbon--font-family-function)
+### ✅font-family [mixin]
+
+Include the `font-family` definition for the given name in your selector
+
+
+Source code
+
+```scss
+@mixin font-family($name) {
+ font-family: font-family($name);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$name` | — | `String` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [font-family [function]](#font-family-function)
+
### ✅carbon--font-weights [variable]
Suggested font weights to be used in product
@@ -222,6 +402,29 @@ $carbon--font-weights: (
- [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
- [carbon--font-weight [function]](#carbon--font-weight-function)
+### ✅font-weights [variable]
+
+Suggested font weights to be used in product
+
+
+Source code
+
+```scss
+$font-weights: (
+ 'light': 300,
+ 'regular': 400,
+ 'semibold': 600,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+- **Used by**:
+ - [type-classes [mixin]](#type-classes-mixin)
+ - [font-weight [function]](#font-weight-function)
+
### ✅carbon--font-weight [function]
Retrieve the font-weight value for a given name
@@ -250,6 +453,34 @@ Retrieve the font-weight value for a given name
- **Used by**:
- [carbon--font-weight [mixin]](#carbon--font-weight-mixin)
+### ✅font-weight [function]
+
+Retrieve the font-weight value for a given name
+
+
+Source code
+
+```scss
+@function font-weight($weight) {
+ @return map-get($font-weights, $weight);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| --------- | ----------- | -------- | ------------- |
+| `$weight` | — | `String` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Returns**: `Number`
+- **Requires**:
+ - [font-weights [variable]](#font-weights-variable)
+- **Used by**:
+ - [font-weight [mixin]](#font-weight-mixin)
+
### ✅carbon--font-weight [mixin]
Set the `font-weight` property with the value for a given name
@@ -277,6 +508,33 @@ Set the `font-weight` property with the value for a given name
- **Used by**:
- [carbon--type-reset [mixin]](#carbon--type-reset-mixin)
+### ✅font-weight [mixin]
+
+Set the `font-weight` property with the value for a given name
+
+
+Source code
+
+```scss
+@mixin font-weight($weight) {
+ font-weight: font-weight($weight);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| --------- | ----------- | -------- | ------------- |
+| `$weight` | — | `String` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [font-weight [function]](#font-weight-function)
+- **Used by**:
+ - [type-reset [mixin]](#type-reset-mixin)
+
### ✅carbon--font-face-mono [mixin]
Mono `@font-face`'s
@@ -732,6 +990,21 @@ $prefix: 'bx';
- **Type**: `String`
- **Used by**:
- [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
+ - [type-classes [mixin]](#type-classes-mixin)
+
+### ✅prefix [variable]
+
+
+Source code
+
+```scss
+$prefix: 'bx';
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `String`
### ✅carbon--type-reset [mixin]
@@ -781,41 +1054,89 @@ Include a type reset for a given body and mono font family
- **Requires**:
- [carbon--font-weight [mixin]](#carbon--font-weight-mixin)
-### ✅carbon--default-type [mixin]
+### ✅type-reset [mixin]
-Include default type styles
+Include a type reset for a given body and mono font family
Source code
```scss
-@mixin carbon--default-type() {
- h1 {
- @include carbon--type-style('productive-heading-06');
+@mixin type-reset(
+ $body-font-family: font-family('sans'),
+ $mono-font-family: font-family('mono')
+) {
+ html {
+ font-size: 100%;
}
- h2 {
- @include carbon--type-style('productive-heading-05');
- }
+ body {
+ @include font-weight('regular');
- h3 {
- @include carbon--type-style('productive-heading-04');
+ font-family: $body-font-family;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
- h4 {
- @include carbon--type-style('productive-heading-03');
+ code {
+ font-family: $mono-font-family;
}
- h5 {
- @include carbon--type-style('productive-heading-02');
+ strong {
+ @include font-weight('semibold');
}
+}
+```
- h6 {
- @include carbon--type-style('productive-heading-01');
- }
+
- p {
- @include carbon--type-style('body-long-02');
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------------------- | ----------------------------------------------------------------------------------- | -------- | --------------------- |
+| `$body-font-family` | The font family used on the `` element | `String` | `font-family('sans')` |
+| `$mono-font-family` | The font family used on elements that require mono fonts, like the `` element | `String` | `font-family('mono')` |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [font-weight [mixin]](#font-weight-mixin)
+
+### ✅carbon--default-type [mixin]
+
+Include default type styles
+
+
+Source code
+
+```scss
+@mixin carbon--default-type() {
+ h1 {
+ @include carbon--type-style('productive-heading-06');
+ }
+
+ h2 {
+ @include carbon--type-style('productive-heading-05');
+ }
+
+ h3 {
+ @include carbon--type-style('productive-heading-04');
+ }
+
+ h4 {
+ @include carbon--type-style('productive-heading-03');
+ }
+
+ h5 {
+ @include carbon--type-style('productive-heading-02');
+ }
+
+ h6 {
+ @include carbon--type-style('productive-heading-01');
+ }
+
+ p {
+ @include carbon--type-style('body-long-02');
}
a {
@@ -840,6 +1161,65 @@ Include default type styles
- **Requires**:
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
+### ✅default-type [mixin]
+
+Include default type styles
+
+
+Source code
+
+```scss
+@mixin default-type() {
+ h1 {
+ @include type-style('productive-heading-06');
+ }
+
+ h2 {
+ @include type-style('productive-heading-05');
+ }
+
+ h3 {
+ @include type-style('productive-heading-04');
+ }
+
+ h4 {
+ @include type-style('productive-heading-03');
+ }
+
+ h5 {
+ @include type-style('productive-heading-02');
+ }
+
+ h6 {
+ @include type-style('productive-heading-01');
+ }
+
+ p {
+ @include type-style('body-long-02');
+ }
+
+ a {
+ @if meta.global-variable-exists('carbon--theme') and
+ map.has-key($carbon--theme, 'link-01')
+ {
+ color: map.get($carbon--theme, 'link-01');
+ } @else {
+ color: #0062fe;
+ }
+ }
+
+ em {
+ font-style: italic;
+ }
+}
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [type-style [mixin]](#type-style-mixin)
+
### ✅carbon--font-face-sans-condensed [mixin]
Sans `@font-face`'s
@@ -1696,6 +2076,34 @@ Compute the type size for the given type scale step
- **Group**: [@carbon/type](#carbontype)
- **Returns**: `Number` In px
+### ✅get-type-size [function]
+
+Compute the type size for the given type scale step
+
+
+Source code
+
+```scss
+@function get-type-size($step) {
+ @if $step == 1 {
+ @return 12px;
+ }
+ // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
+ @return get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$step` | — | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Returns**: `Number` In px
+
### ✅carbon--type-scale [variable]
Type scale follows a custom formula for determining each step size and supports
@@ -1717,6 +2125,56 @@ $carbon--type-scale: ();
- **Used by**:
- [carbon--type-scale [function]](#carbon--type-scale-function)
+### ✅type-scale [variable]
+
+Type scale follows a custom formula for determining each step size and supports
+sizes from 12px to 92px
+
+
+Source code
+
+```scss
+$type-scale: ();
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+- **Aliased**:
+ - `font-size`
+- **Used by**:
+ - [type-scale [function]](#type-scale-function)
+
+### ✅type-scale [function]
+
+Get the value of a specific step in the type scale
+
+
+Source code
+
+```scss
+@function type-scale($step) {
+ @return nth($type-scale, $step);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$step` | — | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Returns**: `Number` In rem
+- **Requires**:
+ - [type-scale [variable]](#type-scale-variable)
+- **Used by**:
+ - [type-scale [mixin]](#type-scale-mixin)
+ - [font-size [mixin]](#font-size-mixin)
+
### ✅carbon--type-scale [function]
Get the value of a specific step in the type scale
@@ -1746,6 +2204,31 @@ Get the value of a specific step in the type scale
- [carbon--type-scale [mixin]](#carbon--type-scale-mixin)
- [carbon--font-size [mixin]](#carbon--font-size-mixin)
+### ✅type-scale [mixin]
+
+Set the font-size value of a selector with the value at the given `$step`
+
+
+Source code
+
+```scss
+@mixin type-scale($step) {
+ font-size: type-scale($step);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$step` | — | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [type-scale [function]](#type-scale-function)
+
### ✅carbon--type-scale [mixin]
Set the font-size value of a selector with the value at the given `$step`
@@ -1771,6 +2254,32 @@ Set the font-size value of a selector with the value at the given `$step`
- **Requires**:
- [carbon--type-scale [function]](#carbon--type-scale-function)
+### ✅font-size [mixin]
+
+Alias of `type-scale` mixin.
+
+
+Source code
+
+```scss
+@mixin font-size($step) {
+ font-size: type-scale($step);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------- | ----------- | -------- | ------------- |
+| `$step` | — | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Alias**: `type-scale`
+- **Requires**:
+ - [type-scale [function]](#type-scale-function)
+
### ✅carbon--font-size [mixin]
Alias of `type-scale` mixin.
@@ -2289,15 +2798,15 @@ $caption-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅label-01 [variable]
+### ✅caption-01 [variable]
Source code
```scss
-$label-01: (
- font-size: carbon--type-scale(1),
- font-weight: carbon--font-weight('regular'),
+$caption-01: (
+ font-size: scale.type-scale(1),
+ font-weight: font-family.font-weight('regular'),
line-height: 1.34,
letter-spacing: 0.32px,
);
@@ -2308,14 +2817,15 @@ $label-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅helper-text-01 [variable]
+### ✅label-01 [variable]
Source code
```scss
-$helper-text-01: (
+$label-01: (
font-size: carbon--type-scale(1),
+ font-weight: carbon--font-weight('regular'),
line-height: 1.34,
letter-spacing: 0.32px,
);
@@ -2326,17 +2836,17 @@ $helper-text-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅body-short-01 [variable]
+### ✅label-01 [variable]
Source code
```scss
-$body-short-01: (
- font-size: carbon--type-scale(2),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.29,
- letter-spacing: 0.16px,
+$label-01: (
+ font-size: scale.type-scale(1),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
);
```
@@ -2345,17 +2855,16 @@ $body-short-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅body-long-01 [variable]
+### ✅helper-text-01 [variable]
Source code
```scss
-$body-long-01: (
- font-size: carbon--type-scale(2),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.43,
- letter-spacing: 0.16px,
+$helper-text-01: (
+ font-size: carbon--type-scale(1),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
);
```
@@ -2364,17 +2873,16 @@ $body-long-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅body-short-02 [variable]
+### ✅helper-text-01 [variable]
Source code
```scss
-$body-short-02: (
- font-size: carbon--type-scale(3),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.375,
- letter-spacing: 0,
+$helper-text-01: (
+ font-size: scale.type-scale(1),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
);
```
@@ -2383,17 +2891,17 @@ $body-short-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅body-long-02 [variable]
+### ✅body-short-01 [variable]
Source code
```scss
-$body-long-02: (
- font-size: carbon--type-scale(3),
+$body-short-01: (
+ font-size: carbon--type-scale(2),
font-weight: carbon--font-weight('regular'),
- line-height: 1.5,
- letter-spacing: 0,
+ line-height: 1.29,
+ letter-spacing: 0.16px,
);
```
@@ -2402,20 +2910,173 @@ $body-long-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅code-01 [variable]
+### ✅body-short-01 [variable]
Source code
```scss
-$code-01: (
- font-family: carbon--font-family('mono'),
- font-size: carbon--type-scale(1),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.34,
- letter-spacing: 0.32px,
-);
-```
+$body-short-01: (
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0.16px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-long-01 [variable]
+
+
+Source code
+
+```scss
+$body-long-01: (
+ font-size: carbon--type-scale(2),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.43,
+ letter-spacing: 0.16px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-long-01 [variable]
+
+
+Source code
+
+```scss
+$body-long-01: (
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.43,
+ letter-spacing: 0.16px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-short-02 [variable]
+
+
+Source code
+
+```scss
+$body-short-02: (
+ font-size: carbon--type-scale(3),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.375,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-short-02 [variable]
+
+
+Source code
+
+```scss
+$body-short-02: (
+ font-size: scale.type-scale(3),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.375,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-long-02 [variable]
+
+
+Source code
+
+```scss
+$body-long-02: (
+ font-size: carbon--type-scale(3),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.5,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅body-long-02 [variable]
+
+
+Source code
+
+```scss
+$body-long-02: (
+ font-size: scale.type-scale(3),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.5,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅code-01 [variable]
+
+
+Source code
+
+```scss
+$code-01: (
+ font-family: carbon--font-family('mono'),
+ font-size: carbon--type-scale(1),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅code-01 [variable]
+
+
+Source code
+
+```scss
+$code-01: (
+ font-family: font-family.font-family('mono'),
+ font-size: scale.type-scale(1),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
+);
+```
@@ -2442,6 +3103,26 @@ $code-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
+### ✅code-02 [variable]
+
+
+Source code
+
+```scss
+$code-02: (
+ font-family: font-family.font-family('mono'),
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.43,
+ letter-spacing: 0.32px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
### ✅heading-01 [variable]
@@ -2461,6 +3142,39 @@ $heading-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
+### ✅heading-01 [variable]
+
+
+Source code
+
+```scss
+$heading-01: (
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.29,
+ letter-spacing: 0.16px,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-01 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-01: $heading-01;
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
### ✅productive-heading-01 [variable]
@@ -2494,13 +3208,18 @@ $heading-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-02 [variable]
+### ✅heading-02 [variable]
Source code
```scss
-$productive-heading-02: $heading-02;
+$heading-02: (
+ font-size: scale.type-scale(3),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.375,
+ letter-spacing: 0,
+);
```
@@ -2508,18 +3227,13 @@ $productive-heading-02: $heading-02;
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-03 [variable]
+### ✅productive-heading-02 [variable]
Source code
```scss
-$productive-heading-03: (
- font-size: carbon--type-scale(5),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.4,
- letter-spacing: 0,
-);
+$productive-heading-02: $heading-02;
```
@@ -2527,18 +3241,13 @@ $productive-heading-03: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-04 [variable]
+### ✅productive-heading-02 [variable]
Source code
```scss
-$productive-heading-04: (
- font-size: carbon--type-scale(7),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.29,
- letter-spacing: 0,
-);
+$productive-heading-02: $heading-02;
```
@@ -2546,16 +3255,16 @@ $productive-heading-04: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-05 [variable]
+### ✅productive-heading-03 [variable]
Source code
```scss
-$productive-heading-05: (
- font-size: carbon--type-scale(8),
+$productive-heading-03: (
+ font-size: carbon--type-scale(5),
font-weight: carbon--font-weight('regular'),
- line-height: 1.25,
+ line-height: 1.4,
letter-spacing: 0,
);
```
@@ -2565,17 +3274,16 @@ $productive-heading-05: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-06 [variable]
+### ✅productive-heading-03 [variable]
Source code
```scss
-$productive-heading-06: (
- font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('light'),
- // Extra digit needed for precision in Chrome
- line-height: 1.199,
+$productive-heading-03: (
+ font-size: scale.type-scale(5),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.4,
letter-spacing: 0,
);
```
@@ -2585,16 +3293,16 @@ $productive-heading-06: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅productive-heading-07 [variable]
+### ✅productive-heading-04 [variable]
Source code
```scss
-$productive-heading-07: (
- font-size: carbon--type-scale(10),
- font-weight: carbon--font-weight('light'),
- line-height: 1.19,
+$productive-heading-04: (
+ font-size: carbon--type-scale(7),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.29,
letter-spacing: 0,
);
```
@@ -2604,16 +3312,208 @@ $productive-heading-07: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-01 [variable]
+### ✅productive-heading-04 [variable]
Source code
```scss
-$expressive-heading-01: map-merge(
- $heading-01,
- (
- line-height: 1.25,
+$productive-heading-04: (
+ font-size: scale.type-scale(7),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-05 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-05: (
+ font-size: carbon--type-scale(8),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.25,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-05 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-05: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.25,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-06 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-06: (
+ font-size: carbon--type-scale(8),
+ font-weight: carbon--font-weight('light'),
+ // Extra digit needed for precision in Chrome
+ line-height: 1.199,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-06 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-06: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('light'),
+ // Extra digit needed for precision in Chrome
+ line-height: 1.199,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-07 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-07: (
+ font-size: carbon--type-scale(10),
+ font-weight: carbon--font-weight('light'),
+ line-height: 1.19,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅productive-heading-07 [variable]
+
+
+Source code
+
+```scss
+$productive-heading-07: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.19,
+ letter-spacing: 0,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-01 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-01: map-merge(
+ $heading-01,
+ (
+ line-height: 1.25,
+ )
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-01 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-01: map.merge(
+ $heading-01,
+ (
+ line-height: 1.25,
+ )
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-02 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-02: map-merge(
+ $heading-02,
+ (
+ line-height: 1.5,
+ )
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-02 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-02: map.merge(
+ $heading-02,
+ (
+ line-height: 1.5,
)
);
```
@@ -2623,17 +3523,287 @@ $expressive-heading-01: map-merge(
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-02 [variable]
+### ✅expressive-heading-03 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-03: (
+ font-size: carbon--type-scale(5),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.4,
+ letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: carbon--type-scale(5),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: carbon--type-scale(6),
+ line-height: 1.334,
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-03 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-03: (
+ font-size: scale.type-scale(5),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.4,
+ letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: scale.type-scale(5),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: scale.type-scale(6),
+ line-height: 1.334,
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-04 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-04: (
+ font-size: carbon--type-scale(7),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: carbon--type-scale(7),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: carbon--type-scale(8),
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-04 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-04: (
+ font-size: scale.type-scale(7),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: scale.type-scale(7),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: scale.type-scale(8),
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-05 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-05: (
+ font-size: carbon--type-scale(8),
+ font-weight: carbon--font-weight('regular'),
+ line-height: 1.25,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: carbon--type-scale(9),
+ font-weight: carbon--font-weight('light'),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: carbon--type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: carbon--type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: carbon--type-scale(13),
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-05 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-05: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.25,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(9),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: scale.type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: scale.type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: scale.type-scale(13),
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-06 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-06: (
+ font-size: carbon--type-scale(8),
+ font-weight: carbon--font-weight('semibold'),
+ line-height: 1.25,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: carbon--type-scale(9),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: carbon--type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: carbon--type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: carbon--type-scale(13),
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-heading-06 [variable]
+
+
+Source code
+
+```scss
+$expressive-heading-06: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.25,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(9),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: scale.type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: scale.type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: scale.type-scale(13),
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅expressive-paragraph-01 [variable]
Source code
```scss
-$expressive-heading-02: map-merge(
- $heading-02,
- (
- line-height: 1.5,
- )
+$expressive-paragraph-01: (
+ font-size: carbon--type-scale(6),
+ font-weight: carbon--font-weight('light'),
+ line-height: 1.334,
+ letter-spacing: 0,
+ breakpoints: (
+ lg: (
+ font-size: carbon--type-scale(7),
+ line-height: 1.29,
+ ),
+ max: (
+ font-size: carbon--type-scale(8),
+ line-height: 1.25,
+ ),
+ ),
);
```
@@ -2642,25 +3812,25 @@ $expressive-heading-02: map-merge(
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-03 [variable]
+### ✅expressive-paragraph-01 [variable]
Source code
```scss
-$expressive-heading-03: (
- font-size: carbon--type-scale(5),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.4,
+$expressive-paragraph-01: (
+ font-size: scale.type-scale(6),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.334,
letter-spacing: 0,
breakpoints: (
- xlg: (
- font-size: carbon--type-scale(5),
- line-height: 1.25,
+ lg: (
+ font-size: scale.type-scale(7),
+ line-height: 1.29,
),
max: (
- font-size: carbon--type-scale(6),
- line-height: 1.334,
+ font-size: scale.type-scale(8),
+ line-height: 1.25,
),
),
);
@@ -2671,24 +3841,32 @@ $expressive-heading-03: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-04 [variable]
+### ✅quotation-01 [variable]
Source code
```scss
-$expressive-heading-04: (
- font-size: carbon--type-scale(7),
+$quotation-01: (
+ font-size: carbon--type-scale(5),
font-weight: carbon--font-weight('regular'),
- line-height: 1.29,
+ line-height: 1.3,
letter-spacing: 0,
breakpoints: (
+ md: (
+ font-size: carbon--type-scale(5),
+ ),
+ lg: (
+ font-size: carbon--type-scale(6),
+ line-height: 1.334,
+ ),
xlg: (
font-size: carbon--type-scale(7),
- line-height: 1.25,
+ line-height: 1.29,
),
max: (
font-size: carbon--type-scale(8),
+ line-height: 1.25,
),
),
);
@@ -2699,33 +3877,32 @@ $expressive-heading-04: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-05 [variable]
+### ✅quotation-01 [variable]
Source code
```scss
-$expressive-heading-05: (
- font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.25,
+$quotation-01: (
+ font-size: scale.type-scale(5),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.3,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(9),
- font-weight: carbon--font-weight('light'),
- line-height: 1.22,
+ font-size: scale.type-scale(5),
),
lg: (
- font-size: carbon--type-scale(10),
- line-height: 1.19,
+ font-size: scale.type-scale(6),
+ line-height: 1.334,
),
xlg: (
- font-size: carbon--type-scale(11),
- line-height: 1.17,
+ font-size: scale.type-scale(7),
+ line-height: 1.29,
),
max: (
- font-size: carbon--type-scale(13),
+ font-size: scale.type-scale(8),
+ line-height: 1.25,
),
),
);
@@ -2736,15 +3913,15 @@ $expressive-heading-05: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-heading-06 [variable]
+### ✅quotation-02 [variable]
Source code
```scss
-$expressive-heading-06: (
+$quotation-02: (
font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('semibold'),
+ font-weight: carbon--font-weight('light'),
line-height: 1.25,
letter-spacing: 0,
breakpoints: (
@@ -2772,25 +3949,32 @@ $expressive-heading-06: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅expressive-paragraph-01 [variable]
+### ✅quotation-02 [variable]
Source code
```scss
-$expressive-paragraph-01: (
- font-size: carbon--type-scale(6),
- font-weight: carbon--font-weight('light'),
- line-height: 1.334,
+$quotation-02: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.25,
letter-spacing: 0,
breakpoints: (
+ md: (
+ font-size: scale.type-scale(9),
+ line-height: 1.22,
+ ),
lg: (
- font-size: carbon--type-scale(7),
- line-height: 1.29,
+ font-size: scale.type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: scale.type-scale(11),
+ line-height: 1.17,
),
max: (
- font-size: carbon--type-scale(8),
- line-height: 1.25,
+ font-size: scale.type-scale(13),
),
),
);
@@ -2801,32 +3985,31 @@ $expressive-paragraph-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅quotation-01 [variable]
+### ✅display-01 [variable]
Source code
```scss
-$quotation-01: (
- font-size: carbon--type-scale(5),
- font-weight: carbon--font-weight('regular'),
- line-height: 1.3,
+$display-01: (
+ font-size: carbon--type-scale(10),
+ font-weight: carbon--font-weight('light'),
+ line-height: 1.19,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(5),
+ font-size: carbon--type-scale(10),
),
lg: (
- font-size: carbon--type-scale(6),
- line-height: 1.334,
+ font-size: carbon--type-scale(12),
),
xlg: (
- font-size: carbon--type-scale(7),
- line-height: 1.29,
+ font-size: carbon--type-scale(13),
+ line-height: 1.17,
),
max: (
- font-size: carbon--type-scale(8),
- line-height: 1.25,
+ font-size: carbon--type-scale(15),
+ line-height: 1.13,
),
),
);
@@ -2837,32 +4020,31 @@ $quotation-01: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅quotation-02 [variable]
+### ✅display-01 [variable]
Source code
```scss
-$quotation-02: (
- font-size: carbon--type-scale(8),
- font-weight: carbon--font-weight('light'),
- line-height: 1.25,
+$display-01: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.19,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(9),
- line-height: 1.22,
+ font-size: scale.type-scale(10),
),
lg: (
- font-size: carbon--type-scale(10),
- line-height: 1.19,
+ font-size: scale.type-scale(12),
),
xlg: (
- font-size: carbon--type-scale(11),
+ font-size: scale.type-scale(13),
line-height: 1.17,
),
max: (
- font-size: carbon--type-scale(13),
+ font-size: scale.type-scale(15),
+ line-height: 1.13,
),
),
);
@@ -2873,15 +4055,15 @@ $quotation-02: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-### ✅display-01 [variable]
+### ✅display-02 [variable]
Source code
```scss
-$display-01: (
+$display-02: (
font-size: carbon--type-scale(10),
- font-weight: carbon--font-weight('light'),
+ font-weight: carbon--font-weight('semibold'),
line-height: 1.19,
letter-spacing: 0,
breakpoints: (
@@ -2893,7 +4075,7 @@ $display-01: (
),
xlg: (
font-size: carbon--type-scale(13),
- line-height: 1.17,
+ line-height: 1.16,
),
max: (
font-size: carbon--type-scale(15),
@@ -2915,23 +4097,23 @@ $display-01: (
```scss
$display-02: (
- font-size: carbon--type-scale(10),
- font-weight: carbon--font-weight('semibold'),
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('semibold'),
line-height: 1.19,
letter-spacing: 0,
breakpoints: (
md: (
- font-size: carbon--type-scale(10),
+ font-size: scale.type-scale(10),
),
lg: (
- font-size: carbon--type-scale(12),
+ font-size: scale.type-scale(12),
),
xlg: (
- font-size: carbon--type-scale(13),
+ font-size: scale.type-scale(13),
line-height: 1.16,
),
max: (
- font-size: carbon--type-scale(15),
+ font-size: scale.type-scale(15),
line-height: 1.13,
),
),
@@ -2983,6 +4165,46 @@ $display-03: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
+### ✅display-03 [variable]
+
+
+Source code
+
+```scss
+$display-03: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.19,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(14),
+ line-height: 1.15,
+ ),
+ lg: (
+ font-size: scale.type-scale(17),
+ line-height: 1.11,
+ letter-spacing: -0.64px,
+ ),
+ xlg: (
+ font-size: scale.type-scale(20),
+ line-height: 1.07,
+ letter-spacing: -0.64px,
+ ),
+ max: (
+ font-size: scale.type-scale(23),
+ line-height: 1.05,
+ letter-spacing: -0.96px,
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
### ✅display-04 [variable]
@@ -3023,6 +4245,97 @@ $display-04: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
+### ✅display-04 [variable]
+
+
+Source code
+
+```scss
+$display-04: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.19,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(14),
+ line-height: 1.15,
+ ),
+ lg: (
+ font-size: scale.type-scale(17),
+ line-height: 1.11,
+ letter-spacing: -0.64px,
+ ),
+ xlg: (
+ font-size: scale.type-scale(20),
+ line-height: 1.07,
+ letter-spacing: -0.64px,
+ ),
+ max: (
+ font-size: scale.type-scale(23),
+ line-height: 1.05,
+ letter-spacing: -0.96px,
+ ),
+ ),
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+
+### ✅tokens [variable]
+
+
+Source code
+
+```scss
+$tokens: (
+ caption-01: $caption-01,
+ label-01: $label-01,
+ helper-text-01: $helper-text-01,
+ body-short-01: $body-short-01,
+ body-short-02: $body-short-02,
+ body-long-01: $body-long-01,
+ body-long-02: $body-long-02,
+ code-01: $code-01,
+ code-02: $code-02,
+ heading-01: $heading-01,
+ heading-02: $heading-02,
+ productive-heading-01: $productive-heading-01,
+ productive-heading-02: $productive-heading-02,
+ productive-heading-03: $productive-heading-03,
+ productive-heading-04: $productive-heading-04,
+ productive-heading-05: $productive-heading-05,
+ productive-heading-06: $productive-heading-06,
+ productive-heading-07: $productive-heading-07,
+ expressive-paragraph-01: $expressive-paragraph-01,
+ expressive-heading-01: $expressive-heading-01,
+ expressive-heading-02: $expressive-heading-02,
+ expressive-heading-03: $expressive-heading-03,
+ expressive-heading-04: $expressive-heading-04,
+ expressive-heading-05: $expressive-heading-05,
+ expressive-heading-06: $expressive-heading-06,
+ quotation-01: $quotation-01,
+ quotation-02: $quotation-02,
+ display-01: $display-01,
+ display-02: $display-02,
+ display-03: $display-03,
+ display-04: $display-04,
+);
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Type**: `Map`
+- **Used by**:
+ - [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
+ - [type-classes [mixin]](#type-classes-mixin)
+ - [carbon--type-style [mixin]](#carbon--type-style-mixin)
+ - [type-style [mixin]](#type-style-mixin)
+
### ✅tokens [variable]
@@ -3068,9 +4381,6 @@ $tokens: (
- **Group**: [@carbon/type](#carbontype)
- **Type**: `Map`
-- **Used by**:
- - [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
- - [carbon--type-style [mixin]](#carbon--type-style-mixin)
### ✅properties [mixin]
@@ -3097,6 +4407,30 @@ $tokens: (
- **Used by**:
- [fluid-type [mixin]](#fluid-type-mixin)
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
+ - [type-style [mixin]](#type-style-mixin)
+
+### ✅properties [mixin]
+
+
+Source code
+
+```scss
+@mixin properties($map) {
+ @each $name, $value in $map {
+ #{$name}: $value;
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| ------ | ----------- | ----- | ------------- |
+| `$map` | — | `Map` | — |
+
+- **Group**: [@carbon/type](#carbontype)
### ✅strip-unit [function]
@@ -3122,6 +4456,28 @@ $tokens: (
- **Used by**:
- [fluid-type-size [mixin]](#fluid-type-size-mixin)
+### ✅strip-unit [function]
+
+
+Source code
+
+```scss
+@function strip-unit($value) {
+ @return $value / ($value * 0 + 1);
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| -------- | ----------------- | -------- | ------------- |
+| `$value` | Number with units | `Number` | — |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Returns**: `Number` Without units
+
### ✅fluid-type [mixin]
This helper includes fluid type styles for the given token value. Fluid type
@@ -3175,6 +4531,59 @@ https://css-tricks.com/snippets/css/fluid-typography/
- [fluid-type-size [mixin]](#fluid-type-size-mixin)
- **Used by**:
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
+ - [type-style [mixin]](#type-style-mixin)
+
+### ✅fluid-type [mixin]
+
+This helper includes fluid type styles for the given token value. Fluid type
+means that the `font-size` is computed using `calc()` in order to be determined
+by the screen size instead of a breakpoint. As a result, fluid styles should be
+used with caution in fixed width contexts.
+
+In addition, we make use of %-based line-heights so that the line-height of each
+type style is computed correctly due to the dynamic nature of the `font-size`.
+
+Most of the logic for this work comes from CSS Tricks:
+https://css-tricks.com/snippets/css/fluid-typography/
+
+
+Source code
+
+```scss
+@mixin fluid-type($type-styles, $breakpoints: $grid-breakpoints) {
+ // Include the initial styles for the given token by default without any
+ // media query guard. This includes `font-size` as a fallback in the case
+ // that a browser does not support `calc()`
+ @include properties(map.remove($type-styles, breakpoints));
+ // We also need to include the `sm` styles by default since they don't
+ // appear in the fluid styles for tokens
+ @include fluid-type-size($type-styles, sm, $breakpoints);
+
+ // Finally, we need to go through all the breakpoints defined in the type
+ // token and apply the properties and fluid type size for that given
+ // breakpoint
+ @each $name, $values in map.get($type-styles, breakpoints) {
+ @include layout.breakpoint($name) {
+ @include properties($values);
+ @include fluid-type-size($type-styles, $name, $breakpoints);
+ }
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| -------------- | ------------------------------- | ----- | ------------------- |
+| `$type-styles` | The value of a given type token | `Map` | — |
+| `$breakpoints` | Custom breakpoints to use | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [properties [mixin]](#properties-mixin)
+ - [fluid-type-size [mixin]](#fluid-type-size-mixin)
### ✅fluid-type-size [mixin]
@@ -3277,6 +4686,101 @@ Computes the fluid `font-size` for a given type style and breakpoint
- **Used by**:
- [fluid-type [mixin]](#fluid-type-mixin)
+### ✅fluid-type-size [mixin]
+
+Computes the fluid `font-size` for a given type style and breakpoint
+
+
+Source code
+
+```scss
+@mixin fluid-type-size($type-styles, $name, $breakpoints: $grid-breakpoints) {
+ // Get the information about the breakpoint we're currently working in. Useful
+ // for getting initial width information
+ $breakpoint: map.get($breakpoints, $name);
+
+ // Our fluid styles are captured under the 'breakpoints' property in our type
+ // styles map. These define what values to treat as `max-` variables below
+ $fluid-sizes: map.get($type-styles, breakpoints);
+ $fluid-breakpoint: ();
+ // Special case for `sm` because the styles for small are on the type style
+ // directly
+ @if $name == sm {
+ $fluid-breakpoint: map.remove($type-styles, breakpoints);
+ } @else {
+ $fluid-breakpoint: map.get($fluid-sizes, $name);
+ }
+
+ // Initialize our font-sizes to the default size for the type style
+ $max-font-size: map.get($type-styles, font-size);
+ $min-font-size: map.get($type-styles, font-size);
+ @if map.has-key($fluid-breakpoint, font-size) {
+ $min-font-size: map.get($fluid-breakpoint, font-size);
+ }
+
+ // Initialize our min and max width to the width of the current breakpoint
+ $max-vw: map.get($breakpoint, width);
+ $min-vw: map.get($breakpoint, width);
+
+ // We can use `breakpoint-next` to see if there is another breakpoint we can
+ // use to update `max-font-size` and `max-vw` with larger values
+ $next-breakpoint-available: layout.breakpoint-next($name, $breakpoints);
+ $next-fluid-breakpoint-name: null;
+
+ // We need to figure out what the next available fluid breakpoint is for our
+ // given $type-styles. In this loop we try and iterate through breakpoints
+ // until we either manually set $next-breakpoint-available to null or
+ // `breakpoint-next` returns null.
+ @while $next-breakpoint-available {
+ @if map.has-key($fluid-sizes, $next-breakpoint-available) {
+ $next-fluid-breakpoint-name: $next-breakpoint-available;
+ $next-breakpoint-available: null;
+ } @else {
+ $next-breakpoint-available: layout.breakpoint-next(
+ $next-breakpoint-available,
+ $breakpoints
+ );
+ }
+ }
+
+ // If we have found the next available fluid breakpoint name, then we know
+ // that we have values that we can use to set max-font-size and max-vw as both
+ // values derive from the next breakpoint
+ @if $next-fluid-breakpoint-name {
+ $next-fluid-breakpoint: map.get($breakpoints, $next-fluid-breakpoint-name);
+ $max-font-size: map.get(
+ map.get($fluid-sizes, $next-fluid-breakpoint-name),
+ font-size
+ );
+ $max-vw: map.get($next-fluid-breakpoint, width);
+
+ // prettier-ignore
+ font-size: calc(#{$min-font-size} +
+ #{strip-unit($max-font-size - $min-font-size)} *
+ ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
+ );
+ } @else {
+ // Otherwise, just default to setting the font size found from the type
+ // style or the given fluid breakpoint in the type style
+ font-size: $min-font-size;
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| -------------- | ------------------------------------------------------ | -------- | ------------------- |
+| `$type-styles` | The styles for a given token | `Map` | — |
+| `$name` | The name of the breakpoint to which we apply the fluid | `String` | — |
+| `$breakpoints` | The breakpoints for the grid system | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [strip-unit [function]](#strip-unit-function)
+
### ❌custom-property-prefix [variable]
@@ -3292,6 +4796,19 @@ $custom-property-prefix: 'cds';
- **Used by**:
- [custom-properties [mixin]](#custom-properties-mixin)
+### ❌custom-property-prefix [variable]
+
+
+Source code
+
+```scss
+$custom-property-prefix: 'cds';
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+
### ❌custom-properties [mixin]
@@ -3315,6 +4832,29 @@ $custom-property-prefix: 'cds';
- [custom-property-prefix [variable]](#custom-property-prefix-variable)
- **Used by**:
- [carbon--type-style [mixin]](#carbon--type-style-mixin)
+ - [type-style [mixin]](#type-style-mixin)
+
+### ❌custom-properties [mixin]
+
+
+Source code
+
+```scss
+@mixin custom-properties() {
+ @each $property, $value in $value {
+ #{$property}: var(
+ --#{$custom-property-prefix}-#{$name}-#{$property},
+ #{$value}
+ );
+ }
+}
+```
+
+
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [custom-property-prefix [variable]](#custom-property-prefix-variable)
### ✅carbon--type-style [mixin]
@@ -3376,3 +4916,60 @@ fixed contexts.
- **Used by**:
- [carbon--type-classes [mixin]](#carbon--type-classes-mixin)
- [carbon--default-type [mixin]](#carbon--default-type-mixin)
+
+### ✅type-style [mixin]
+
+Helper mixin to include the styles for a given token in any selector in your
+project. Also includes an optional fluid option that will enable fluid styles
+for the token if they are defined. Fluid styles will cause the token's font-size
+to be computed based on the viewport size. As a result, use with caution in
+fixed contexts.
+
+
+Source code
+
+```scss
+@mixin type-style($name, $fluid: false, $breakpoints: $grid-breakpoints) {
+ @if not map.has-key($tokens, $name) {
+ @error 'Unable to find a token with the name: `#{$name}`';
+ }
+
+ $token: map.get($tokens, $name);
+
+ // If $fluid is set to true and the token has breakpoints defined for fluid
+ // styles, delegate to the fluid-type helper for the given token
+ @if $fluid == true and map.has-key($token, 'breakpoints') {
+ @include fluid-type($token, $breakpoints);
+ } @else {
+ @if global-variable-exists('feature-flags') and
+ map.get($feature-flags, 'enable-css-custom-properties')
+ {
+ @include custom-properties($name, $token);
+ } @else {
+ // Otherwise, we just include all the property declarations directly on the
+ // selector
+ @include properties(map.remove($token, 'breakpoints'));
+ }
+ }
+}
+```
+
+
+
+- **Parameters**:
+
+| Name | Description | Type | Default value |
+| -------------- | ----------------------------------------------- | --------- | ------------------- |
+| `$name` | The name of the token to get the styles for | `String` | — |
+| `$fluid` | Specify whether to include fluid styles for the | `Boolean` | `false` |
+| `$breakpoints` | Provide a custom breakpoint map to use | `Map` | `$grid-breakpoints` |
+
+- **Group**: [@carbon/type](#carbontype)
+- **Requires**:
+ - [fluid-type [mixin]](#fluid-type-mixin)
+ - [custom-properties [mixin]](#custom-properties-mixin)
+ - [properties [mixin]](#properties-mixin)
+ - [tokens [variable]](#tokens-variable)
+- **Used by**:
+ - [type-classes [mixin]](#type-classes-mixin)
+ - [default-type [mixin]](#default-type-mixin)
diff --git a/packages/type/index.scss b/packages/type/index.scss
new file mode 100644
index 000000000000..e92a0e3fe87d
--- /dev/null
+++ b/packages/type/index.scss
@@ -0,0 +1,13 @@
+//
+// 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.
+//
+
+@forward 'scss/modules/classes';
+@forward 'scss/modules/font-family';
+@forward 'scss/modules/prefix';
+@forward 'scss/modules/reset';
+@forward 'scss/modules/scale';
+@forward 'scss/modules/styles';
diff --git a/packages/type/package.json b/packages/type/package.json
index f94eb6d4e6d8..5be88585d22d 100644
--- a/packages/type/package.json
+++ b/packages/type/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/type",
"description": "Typography for digital and software products using the Carbon Design System",
- "version": "10.20.0",
+ "version": "10.21.0-rc.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -37,10 +37,10 @@
},
"dependencies": {
"@carbon/import-once": "^10.5.0",
- "@carbon/layout": "^10.17.0"
+ "@carbon/layout": "^10.18.0-rc.0"
},
"devDependencies": {
- "@carbon/cli": "^10.18.0",
+ "@carbon/cli": "^10.19.0-rc.0",
"@carbon/test-utils": "^10.14.0",
"change-case": "^4.1.1",
"rimraf": "^3.0.0"
diff --git a/packages/type/scss/modules/_classes.scss b/packages/type/scss/modules/_classes.scss
new file mode 100644
index 000000000000..56f15ba6de04
--- /dev/null
+++ b/packages/type/scss/modules/_classes.scss
@@ -0,0 +1,42 @@
+//
+// 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:map';
+@use 'font-family' as *;
+@use 'prefix' as *;
+@use 'styles' as *;
+
+/// Create type classes for font families, weights, styles
+/// @access public
+/// @group @carbon/type
+@mixin type-classes {
+ // Font families
+ @each $name, $value in $font-families {
+ .#{$prefix}--type-#{$name} {
+ font-family: $value;
+ }
+ }
+
+ // Font weights
+ @each $name, $value in $font-weights {
+ .#{$prefix}--type-#{$name} {
+ font-weight: $value;
+ }
+ }
+
+ // Font styles
+ .#{$prefix}--type-italic {
+ font-style: italic;
+ }
+
+ // Type styles
+ @each $name, $value in $tokens {
+ .#{$prefix}--type-#{$name} {
+ @include type-style($name, map.has-key($value, breakpoints));
+ }
+ }
+}
diff --git a/packages/type/scss/modules/_font-family.scss b/packages/type/scss/modules/_font-family.scss
new file mode 100644
index 000000000000..ac0184478061
--- /dev/null
+++ b/packages/type/scss/modules/_font-family.scss
@@ -0,0 +1,70 @@
+//
+// 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.
+//
+
+/// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
+/// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$font-families: (
+ 'mono':
+ unquote(
+ "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"
+ ),
+ 'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
+ 'sans-condensed':
+ unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
+ 'sans-hebrew':
+ unquote(
+ "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"
+ ),
+ 'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
+) !default;
+
+/// Get the font-family for an IBM Plex font
+/// @param {String} $name
+/// @return {String}
+/// @access public
+/// @group @carbon/type
+@function font-family($name) {
+ @return map-get($font-families, $name);
+}
+
+/// Include the `font-family` definition for the given name in your selector
+/// @param {String} $name
+/// @access public
+/// @group @carbon/type
+@mixin font-family($name) {
+ font-family: font-family($name);
+}
+
+/// Suggested font weights to be used in product
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$font-weights: (
+ 'light': 300,
+ 'regular': 400,
+ 'semibold': 600,
+) !default;
+
+/// Retrieve the font-weight value for a given name
+/// @param {String} $weight
+/// @return {Number}
+/// @access public
+/// @group @carbon/type
+@function font-weight($weight) {
+ @return map-get($font-weights, $weight);
+}
+
+/// Set the `font-weight` property with the value for a given name
+/// @param {String} $weight
+/// @access public
+/// @group @carbon/type
+@mixin font-weight($weight) {
+ font-weight: font-weight($weight);
+}
diff --git a/packages/type/scss/modules/_prefix.scss b/packages/type/scss/modules/_prefix.scss
new file mode 100644
index 000000000000..09c7214038b8
--- /dev/null
+++ b/packages/type/scss/modules/_prefix.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.
+//
+
+/// @type String
+/// @access public
+/// @group @carbon/type
+$prefix: 'bx' !default;
diff --git a/packages/type/scss/modules/_reset.scss b/packages/type/scss/modules/_reset.scss
new file mode 100644
index 000000000000..9840262cf7f6
--- /dev/null
+++ b/packages/type/scss/modules/_reset.scss
@@ -0,0 +1,92 @@
+//
+// 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:map';
+@use 'sass:meta';
+@use '@carbon/layout';
+@use 'font-family' as *;
+@use 'styles' as *;
+
+/// Include a type reset for a given body and mono font family
+/// @param {String} $body-font-family [font-family('sans')] - The font family used on the `` element
+/// @param {String} $mono-font-family [font-family('mono')] - The font family used on elements that require mono fonts, like the `` element
+/// @access public
+/// @group @carbon/type
+@mixin type-reset(
+ // TODO: remove in next major release. This has been replaced with 100%
+ $base-font-size: layout.$base-font-size,
+ $body-font-family: font-family('sans'),
+ $mono-font-family: font-family('mono')
+) {
+ html {
+ font-size: 100%;
+ }
+
+ body {
+ @include font-weight('regular');
+
+ font-family: $body-font-family;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ code {
+ font-family: $mono-font-family;
+ }
+
+ strong {
+ @include font-weight('semibold');
+ }
+}
+
+/// Include default type styles
+/// @access public
+/// @group @carbon/type
+@mixin default-type {
+ h1 {
+ @include type-style('productive-heading-06');
+ }
+
+ h2 {
+ @include type-style('productive-heading-05');
+ }
+
+ h3 {
+ @include type-style('productive-heading-04');
+ }
+
+ h4 {
+ @include type-style('productive-heading-03');
+ }
+
+ h5 {
+ @include type-style('productive-heading-02');
+ }
+
+ h6 {
+ @include type-style('productive-heading-01');
+ }
+
+ p {
+ @include type-style('body-long-02');
+ }
+
+ a {
+ @if meta.global-variable-exists('carbon--theme') and
+ map.has-key($carbon--theme, 'link-01')
+ {
+ color: map.get($carbon--theme, 'link-01');
+ } @else {
+ color: #0062fe;
+ }
+ }
+
+ em {
+ font-style: italic;
+ }
+}
diff --git a/packages/type/scss/modules/_scale.scss b/packages/type/scss/modules/_scale.scss
new file mode 100644
index 000000000000..ce53dd647ab6
--- /dev/null
+++ b/packages/type/scss/modules/_scale.scss
@@ -0,0 +1,56 @@
+//
+// 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 '@carbon/layout';
+
+/// Compute the type size for the given type scale step
+/// @param {Number} $step
+/// @return {Number} In px
+/// @access public
+/// @group @carbon/type
+@function get-type-size($step) {
+ @if $step == 1 {
+ @return 12px;
+ }
+ // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
+ @return get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
+}
+
+/// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$type-scale: ();
+@for $i from 1 through 23 {
+ $type-scale: append($type-scale, layout.rem(get-type-size($i)));
+}
+
+/// Get the value of a specific step in the type scale
+/// @param {Number} $step
+/// @return {Number} In rem
+/// @access public
+/// @group @carbon/type
+@function type-scale($step) {
+ @return nth($type-scale, $step);
+}
+
+/// Set the font-size value of a selector with the value at the given `$step`
+/// @param {Number} $step
+/// @access public
+/// @group @carbon/type
+@mixin type-scale($step) {
+ font-size: type-scale($step);
+}
+
+/// Alias of `type-scale` mixin.
+/// @param {Number} $step
+/// @alias type-scale
+/// @access public
+/// @group @carbon/type
+@mixin font-size($step) {
+ font-size: type-scale($step);
+}
diff --git a/packages/type/scss/modules/_styles.scss b/packages/type/scss/modules/_styles.scss
new file mode 100644
index 000000000000..3fb4cbca2a78
--- /dev/null
+++ b/packages/type/scss/modules/_styles.scss
@@ -0,0 +1,713 @@
+//
+// 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:map';
+@use '@carbon/layout';
+@use 'font-family';
+@use 'scale';
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$caption-01: (
+ font-size: scale.type-scale(1),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$label-01: (
+ font-size: scale.type-scale(1),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$helper-text-01: (
+ font-size: scale.type-scale(1),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$body-short-01: (
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0.16px,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$body-long-01: (
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.43,
+ letter-spacing: 0.16px,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$body-short-02: (
+ font-size: scale.type-scale(3),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.375,
+ letter-spacing: 0,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$body-long-02: (
+ font-size: scale.type-scale(3),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.5,
+ letter-spacing: 0,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$code-01: (
+ font-family: font-family.font-family('mono'),
+ font-size: scale.type-scale(1),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.34,
+ letter-spacing: 0.32px,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$code-02: (
+ font-family: font-family.font-family('mono'),
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.43,
+ letter-spacing: 0.32px,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$heading-01: (
+ font-size: scale.type-scale(2),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.29,
+ letter-spacing: 0.16px,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$productive-heading-01: $heading-01 !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$heading-02: (
+ font-size: scale.type-scale(3),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.375,
+ letter-spacing: 0,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$productive-heading-02: $heading-02 !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$productive-heading-03: (
+ font-size: scale.type-scale(5),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.4,
+ letter-spacing: 0,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$productive-heading-04: (
+ font-size: scale.type-scale(7),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$productive-heading-05: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.25,
+ letter-spacing: 0,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$productive-heading-06: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('light'),
+ // Extra digit needed for precision in Chrome
+ line-height: 1.199,
+ letter-spacing: 0,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$productive-heading-07: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.19,
+ letter-spacing: 0,
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$expressive-heading-01: map.merge(
+ $heading-01,
+ (
+ line-height: 1.25,
+ )
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$expressive-heading-02: map.merge(
+ $heading-02,
+ (
+ line-height: 1.5,
+ )
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$expressive-heading-03: (
+ font-size: scale.type-scale(5),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.4,
+ letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: scale.type-scale(5),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: scale.type-scale(6),
+ line-height: 1.334,
+ ),
+ ),
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$expressive-heading-04: (
+ font-size: scale.type-scale(7),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.29,
+ letter-spacing: 0,
+ breakpoints: (
+ xlg: (
+ font-size: scale.type-scale(7),
+ line-height: 1.25,
+ ),
+ max: (
+ font-size: scale.type-scale(8),
+ ),
+ ),
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$expressive-heading-05: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.25,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(9),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: scale.type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: scale.type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: scale.type-scale(13),
+ ),
+ ),
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$expressive-heading-06: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.25,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(9),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: scale.type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: scale.type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: scale.type-scale(13),
+ ),
+ ),
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$expressive-paragraph-01: (
+ font-size: scale.type-scale(6),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.334,
+ letter-spacing: 0,
+ breakpoints: (
+ lg: (
+ font-size: scale.type-scale(7),
+ line-height: 1.29,
+ ),
+ max: (
+ font-size: scale.type-scale(8),
+ line-height: 1.25,
+ ),
+ ),
+);
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$quotation-01: (
+ font-size: scale.type-scale(5),
+ font-weight: font-family.font-weight('regular'),
+ line-height: 1.3,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(5),
+ ),
+ lg: (
+ font-size: scale.type-scale(6),
+ line-height: 1.334,
+ ),
+ xlg: (
+ font-size: scale.type-scale(7),
+ line-height: 1.29,
+ ),
+ max: (
+ font-size: scale.type-scale(8),
+ line-height: 1.25,
+ ),
+ ),
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$quotation-02: (
+ font-size: scale.type-scale(8),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.25,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(9),
+ line-height: 1.22,
+ ),
+ lg: (
+ font-size: scale.type-scale(10),
+ line-height: 1.19,
+ ),
+ xlg: (
+ font-size: scale.type-scale(11),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: scale.type-scale(13),
+ ),
+ ),
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$display-01: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.19,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(10),
+ ),
+ lg: (
+ font-size: scale.type-scale(12),
+ ),
+ xlg: (
+ font-size: scale.type-scale(13),
+ line-height: 1.17,
+ ),
+ max: (
+ font-size: scale.type-scale(15),
+ line-height: 1.13,
+ ),
+ ),
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$display-02: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.19,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(10),
+ ),
+ lg: (
+ font-size: scale.type-scale(12),
+ ),
+ xlg: (
+ font-size: scale.type-scale(13),
+ line-height: 1.16,
+ ),
+ max: (
+ font-size: scale.type-scale(15),
+ line-height: 1.13,
+ ),
+ ),
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$display-03: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('light'),
+ line-height: 1.19,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(14),
+ line-height: 1.15,
+ ),
+ lg: (
+ font-size: scale.type-scale(17),
+ line-height: 1.11,
+ letter-spacing: -0.64px,
+ ),
+ xlg: (
+ font-size: scale.type-scale(20),
+ line-height: 1.07,
+ letter-spacing: -0.64px,
+ ),
+ max: (
+ font-size: scale.type-scale(23),
+ line-height: 1.05,
+ letter-spacing: -0.96px,
+ ),
+ ),
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$display-04: (
+ font-size: scale.type-scale(10),
+ font-weight: font-family.font-weight('semibold'),
+ line-height: 1.19,
+ letter-spacing: 0,
+ breakpoints: (
+ md: (
+ font-size: scale.type-scale(14),
+ line-height: 1.15,
+ ),
+ lg: (
+ font-size: scale.type-scale(17),
+ line-height: 1.11,
+ letter-spacing: -0.64px,
+ ),
+ xlg: (
+ font-size: scale.type-scale(20),
+ line-height: 1.07,
+ letter-spacing: -0.64px,
+ ),
+ max: (
+ font-size: scale.type-scale(23),
+ line-height: 1.05,
+ letter-spacing: -0.96px,
+ ),
+ ),
+) !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$tokens: (
+ caption-01: $caption-01,
+ label-01: $label-01,
+ helper-text-01: $helper-text-01,
+ body-short-01: $body-short-01,
+ body-short-02: $body-short-02,
+ body-long-01: $body-long-01,
+ body-long-02: $body-long-02,
+ code-01: $code-01,
+ code-02: $code-02,
+ heading-01: $heading-01,
+ heading-02: $heading-02,
+ productive-heading-01: $productive-heading-01,
+ productive-heading-02: $productive-heading-02,
+ productive-heading-03: $productive-heading-03,
+ productive-heading-04: $productive-heading-04,
+ productive-heading-05: $productive-heading-05,
+ productive-heading-06: $productive-heading-06,
+ productive-heading-07: $productive-heading-07,
+ expressive-paragraph-01: $expressive-paragraph-01,
+ expressive-heading-01: $expressive-heading-01,
+ expressive-heading-02: $expressive-heading-02,
+ expressive-heading-03: $expressive-heading-03,
+ expressive-heading-04: $expressive-heading-04,
+ expressive-heading-05: $expressive-heading-05,
+ expressive-heading-06: $expressive-heading-06,
+ quotation-01: $quotation-01,
+ quotation-02: $quotation-02,
+ display-01: $display-01,
+ display-02: $display-02,
+ display-03: $display-03,
+ display-04: $display-04,
+);
+
+/// @param {Map} $map
+/// @access public
+/// @group @carbon/type
+@mixin properties($map) {
+ @each $name, $value in $map {
+ #{$name}: $value;
+ }
+}
+
+/// @param {Number} $value - Number with units
+/// @return {Number} Without units
+/// @access public
+/// @group @carbon/type
+@function strip-unit($value) {
+ @return $value / ($value * 0 + 1);
+}
+
+/// This helper includes fluid type styles for the given token value. Fluid type
+/// means that the `font-size` is computed using `calc()` in order to be
+/// determined by the screen size instead of a breakpoint. As a result, fluid
+/// styles should be used with caution in fixed width contexts.
+///
+/// In addition, we make use of %-based line-heights so that the line-height of
+/// each type style is computed correctly due to the dynamic nature of the
+/// `font-size`.
+///
+/// Most of the logic for this work comes from CSS Tricks:
+/// https://css-tricks.com/snippets/css/fluid-typography/
+///
+/// @param {Map} $type-styles - The value of a given type token
+/// @param {Map} $breakpoints [$grid-breakpoints] - Custom breakpoints to use
+/// @access public
+/// @group @carbon/type
+@mixin fluid-type($type-styles, $breakpoints: layout.$grid-breakpoints) {
+ // Include the initial styles for the given token by default without any
+ // media query guard. This includes `font-size` as a fallback in the case
+ // that a browser does not support `calc()`
+ @include properties(map.remove($type-styles, breakpoints));
+ // We also need to include the `sm` styles by default since they don't
+ // appear in the fluid styles for tokens
+ @include fluid-type-size($type-styles, sm, $breakpoints);
+
+ // Finally, we need to go through all the breakpoints defined in the type
+ // token and apply the properties and fluid type size for that given
+ // breakpoint
+ @each $name, $values in map.get($type-styles, breakpoints) {
+ @include layout.breakpoint($name) {
+ @include properties($values);
+ @include fluid-type-size($type-styles, $name, $breakpoints);
+ }
+ }
+}
+
+/// Computes the fluid `font-size` for a given type style and breakpoint
+/// @param {Map} $type-styles - The styles for a given token
+/// @param {String} $name - The name of the breakpoint to which we apply the fluid
+/// @param {Map} $breakpoints [$grid-breakpoints] - The breakpoints for the grid system
+/// @access public
+/// @group @carbon/type
+@mixin fluid-type-size(
+ $type-styles,
+ $name,
+ $breakpoints: layout.$grid-breakpoints
+) {
+ // Get the information about the breakpoint we're currently working in. Useful
+ // for getting initial width information
+ $breakpoint: map.get($breakpoints, $name);
+
+ // Our fluid styles are captured under the 'breakpoints' property in our type
+ // styles map. These define what values to treat as `max-` variables below
+ $fluid-sizes: map.get($type-styles, breakpoints);
+ $fluid-breakpoint: ();
+ // Special case for `sm` because the styles for small are on the type style
+ // directly
+ @if $name == sm {
+ $fluid-breakpoint: map.remove($type-styles, breakpoints);
+ } @else {
+ $fluid-breakpoint: map.get($fluid-sizes, $name);
+ }
+
+ // Initialize our font-sizes to the default size for the type style
+ $max-font-size: map.get($type-styles, font-size);
+ $min-font-size: map.get($type-styles, font-size);
+ @if map.has-key($fluid-breakpoint, font-size) {
+ $min-font-size: map.get($fluid-breakpoint, font-size);
+ }
+
+ // Initialize our min and max width to the width of the current breakpoint
+ $max-vw: map.get($breakpoint, width);
+ $min-vw: map.get($breakpoint, width);
+
+ // We can use `breakpoint-next` to see if there is another breakpoint we can
+ // use to update `max-font-size` and `max-vw` with larger values
+ $next-breakpoint-available: layout.breakpoint-next($name, $breakpoints);
+ $next-fluid-breakpoint-name: null;
+
+ // We need to figure out what the next available fluid breakpoint is for our
+ // given $type-styles. In this loop we try and iterate through breakpoints
+ // until we either manually set $next-breakpoint-available to null or
+ // `breakpoint-next` returns null.
+ @while $next-breakpoint-available {
+ @if map.has-key($fluid-sizes, $next-breakpoint-available) {
+ $next-fluid-breakpoint-name: $next-breakpoint-available;
+ $next-breakpoint-available: null;
+ } @else {
+ $next-breakpoint-available: layout.breakpoint-next(
+ $next-breakpoint-available,
+ $breakpoints
+ );
+ }
+ }
+
+ // If we have found the next available fluid breakpoint name, then we know
+ // that we have values that we can use to set max-font-size and max-vw as both
+ // values derive from the next breakpoint
+ @if $next-fluid-breakpoint-name {
+ $next-fluid-breakpoint: map.get($breakpoints, $next-fluid-breakpoint-name);
+ $max-font-size: map.get(
+ map.get($fluid-sizes, $next-fluid-breakpoint-name),
+ font-size
+ );
+ $max-vw: map.get($next-fluid-breakpoint, width);
+
+ // prettier-ignore
+ font-size: calc(#{$min-font-size} +
+ #{strip-unit($max-font-size - $min-font-size)} *
+ ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
+ );
+ } @else {
+ // Otherwise, just default to setting the font size found from the type
+ // style or the given fluid breakpoint in the type style
+ font-size: $min-font-size;
+ }
+}
+
+// TODO move following variable and `custom-property` mixin into shared file for
+// both `@carbon/type` and `@carbon/themes`
+
+/// @access private
+/// @group @carbon/type
+$custom-property-prefix: 'cds' !default;
+
+/// @access private
+/// @group @carbon/type
+@mixin custom-properties($name, $value) {
+ @each $property, $value in $value {
+ #{$property}: var(
+ --#{$custom-property-prefix}-#{$name}-#{$property},
+ #{$value}
+ );
+ }
+}
+
+/// Helper mixin to include the styles for a given token in any selector in your
+/// project. Also includes an optional fluid option that will enable fluid
+/// styles for the token if they are defined. Fluid styles will cause the
+/// token's font-size to be computed based on the viewport size. As a result, use
+/// with caution in fixed contexts.
+/// @param {String} $name - The name of the token to get the styles for
+/// @param {Boolean} $fluid [false] - Specify whether to include fluid styles for the
+/// @param {Map} $breakpoints [$grid-breakpoints] - Provide a custom breakpoint map to use
+/// @access public
+/// @group @carbon/type
+@mixin type-style(
+ $name,
+ $fluid: false,
+ $breakpoints: layout.$grid-breakpoints
+) {
+ @if not map.has-key($tokens, $name) {
+ @error 'Unable to find a token with the name: `#{$name}`';
+ }
+
+ $token: map.get($tokens, $name);
+
+ // If $fluid is set to true and the token has breakpoints defined for fluid
+ // styles, delegate to the fluid-type helper for the given token
+ @if $fluid == true and map.has-key($token, 'breakpoints') {
+ @include fluid-type($token, $breakpoints);
+ } @else {
+ @if global-variable-exists('feature-flags') and
+ map.get($feature-flags, 'enable-css-custom-properties')
+ {
+ @include custom-properties($name, $token);
+ } @else {
+ // Otherwise, we just include all the property declarations directly on the
+ // selector
+ @include properties(map.remove($token, 'breakpoints'));
+ }
+ }
+}
diff --git a/packages/upgrade/package.json b/packages/upgrade/package.json
index ead494c75912..6de228aadfff 100644
--- a/packages/upgrade/package.json
+++ b/packages/upgrade/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/upgrade",
"description": "A tool for upgrading Carbon versions",
- "version": "10.9.0",
+ "version": "10.10.0-rc.0",
"license": "Apache-2.0",
"bin": {
"carbon-upgrade": "./bin/carbon-upgrade.js"
@@ -40,7 +40,7 @@
"jscodeshift": "^0.6.4",
"lodash.clonedeep": "^4.5.0",
"npm-which": "^3.0.1",
- "semver": "^5.6.0",
+ "semver": "^7.3.4",
"yargs": "^15.1.0"
}
}
diff --git a/yarn.lock b/yarn.lock
index 84c8d92b948e..c1e53d44acef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -39,28 +39,31 @@ __metadata:
languageName: node
linkType: hard
-"@babel/cli@npm:^7.10.0":
- version: 7.10.0
- resolution: "@babel/cli@npm:7.10.0"
+"@babel/cli@npm:^7.10.0, @babel/cli@npm:^7.12.10":
+ version: 7.12.10
+ resolution: "@babel/cli@npm:7.12.10"
dependencies:
- chokidar: ^2.1.8
+ "@nicolo-ribaudo/chokidar-2": 2.1.8-no-fsevents
+ chokidar: ^3.4.0
commander: ^4.0.1
convert-source-map: ^1.1.0
fs-readdir-recursive: ^1.1.0
glob: ^7.0.0
- lodash: ^4.17.13
+ lodash: ^4.17.19
make-dir: ^2.1.0
slash: ^2.0.0
source-map: ^0.5.0
peerDependencies:
"@babel/core": ^7.0.0-0
dependenciesMeta:
+ "@nicolo-ribaudo/chokidar-2":
+ optional: true
chokidar:
optional: true
bin:
babel: ./bin/babel.js
babel-external-helpers: ./bin/babel-external-helpers.js
- checksum: ba2bda684d4211a2f9a327f7d124e2d11b40a75853189c06c259e739719983a2696240114108f9facd4c978a05d03d0a8f933542f0d06b0db23e5bcc0300b1f5
+ checksum: 8ebcd111c5fa363bfc05089a5a41a263e6b381576456162f9ef0e30b083001a18eb6aaf5202ee9b865133337e02aaf51c4b007a1e8eeaf2a4b2769138b40cd89
languageName: node
linkType: hard
@@ -73,12 +76,12 @@ __metadata:
languageName: node
linkType: hard
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4":
- version: 7.10.4
- resolution: "@babel/code-frame@npm:7.10.4"
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.11":
+ version: 7.12.11
+ resolution: "@babel/code-frame@npm:7.12.11"
dependencies:
"@babel/highlight": ^7.10.4
- checksum: 05245d3b22a3ae849439195c4ee9ce9903dfd8c3fcb5124e77923c45e9f1ceac971cce4c61505974f411a9db432949531abe10ddee92937a0a9c306dc380a5b2
+ checksum: 033d3fb3bf911929c0d904282ee69d1197c8d8ae9c6492aaab09e530bca8c463b11c190185dfda79866556facb5bb4c8dc0b4b32b553d021987fcc28c8dd9c6c
languageName: node
linkType: hard
@@ -93,7 +96,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/core@npm:7.10.5, @babel/core@npm:>=7.2.2, @babel/core@npm:>=7.9.0, @babel/core@npm:^7.1.0, @babel/core@npm:^7.1.6, @babel/core@npm:^7.10.0, @babel/core@npm:^7.4.3, @babel/core@npm:^7.4.5, @babel/core@npm:^7.7.5":
+"@babel/core@npm:7.10.5":
version: 7.10.5
resolution: "@babel/core@npm:7.10.5"
dependencies:
@@ -117,23 +120,46 @@ __metadata:
languageName: node
linkType: hard
-"@babel/generator@npm:^7.10.2, @babel/generator@npm:^7.10.5, @babel/generator@npm:^7.12.5, @babel/generator@npm:^7.4.0":
- version: 7.12.5
- resolution: "@babel/generator@npm:7.12.5"
+"@babel/core@npm:>=7.2.2, @babel/core@npm:>=7.9.0, @babel/core@npm:^7.1.0, @babel/core@npm:^7.1.6, @babel/core@npm:^7.10.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.4.3, @babel/core@npm:^7.4.5, @babel/core@npm:^7.7.5":
+ version: 7.12.10
+ resolution: "@babel/core@npm:7.12.10"
dependencies:
- "@babel/types": ^7.12.5
+ "@babel/code-frame": ^7.10.4
+ "@babel/generator": ^7.12.10
+ "@babel/helper-module-transforms": ^7.12.1
+ "@babel/helpers": ^7.12.5
+ "@babel/parser": ^7.12.10
+ "@babel/template": ^7.12.7
+ "@babel/traverse": ^7.12.10
+ "@babel/types": ^7.12.10
+ convert-source-map: ^1.7.0
+ debug: ^4.1.0
+ gensync: ^1.0.0-beta.1
+ json5: ^2.1.2
+ lodash: ^4.17.19
+ semver: ^5.4.1
+ source-map: ^0.5.0
+ checksum: 4d7b892764009b80ac36b193ee37dd27a04244113dfa7510a937e81999e4b0f8ad3237f809792975abab5e07b44a7f7c36bb21e6f9957cdf54cd91cbf149c411
+ languageName: node
+ linkType: hard
+
+"@babel/generator@npm:^7.10.2, @babel/generator@npm:^7.10.5, @babel/generator@npm:^7.12.10, @babel/generator@npm:^7.12.11, @babel/generator@npm:^7.4.0":
+ version: 7.12.11
+ resolution: "@babel/generator@npm:7.12.11"
+ dependencies:
+ "@babel/types": ^7.12.11
jsesc: ^2.5.1
source-map: ^0.5.0
- checksum: 7706cb3d29060e6dfcdbc982ded9a02f0bda36329cc35aabc6b3f9f30ef7b3b3bcaba51c24714663f3ea9529994cd3461ab8a664b26398208b9b9a96476bf43c
+ checksum: eb76477ff89b609393fc002975fe7f9aafe91e915218e56a5f3cc6c5b54690762a06ff654b3d322ab454823b271c14e40bc8c92e97fa0a91a29f7f2047973b54
languageName: node
linkType: hard
-"@babel/helper-annotate-as-pure@npm:^7.10.4, @babel/helper-annotate-as-pure@npm:^7.12.10, @babel/helper-annotate-as-pure@npm:^7.8.3":
- version: 7.12.10
- resolution: "@babel/helper-annotate-as-pure@npm:7.12.10"
+"@babel/helper-annotate-as-pure@npm:^7.10.4, @babel/helper-annotate-as-pure@npm:^7.8.3":
+ version: 7.10.4
+ resolution: "@babel/helper-annotate-as-pure@npm:7.10.4"
dependencies:
- "@babel/types": ^7.12.10
- checksum: d237f38b6a57704dc2a4b98d41cd1744ca12a3ee66b085c348c1ce0d93320f004510c69ab600f9ed1bd7b3737e21d39196cd7c5eb51bc07806699e98319bcbbf
+ "@babel/types": ^7.10.4
+ checksum: 535cdf631e1e6c0bfd6820d2509c69373e2f48148505ddc2325ce8fe85302dc5681d6f6fd41261cacc458a0431edeff7c6115056144b80b02c10e111d2941c36
languageName: node
linkType: hard
@@ -147,6 +173,27 @@ __metadata:
languageName: node
linkType: hard
+"@babel/helper-builder-react-jsx-experimental@npm:^7.10.4, @babel/helper-builder-react-jsx-experimental@npm:^7.9.0":
+ version: 7.10.5
+ resolution: "@babel/helper-builder-react-jsx-experimental@npm:7.10.5"
+ dependencies:
+ "@babel/helper-annotate-as-pure": ^7.10.4
+ "@babel/helper-module-imports": ^7.10.4
+ "@babel/types": ^7.10.5
+ checksum: 9505bc9d365e1c66cde44b196b3a5884fe35aae526cdef8696d7236cce01a58ce660f6ea727c6cba964f8f0a7b75e57634e8ccfbbeb1f5694a7277a55417eaaf
+ languageName: node
+ linkType: hard
+
+"@babel/helper-builder-react-jsx@npm:^7.10.4":
+ version: 7.10.4
+ resolution: "@babel/helper-builder-react-jsx@npm:7.10.4"
+ dependencies:
+ "@babel/helper-annotate-as-pure": ^7.10.4
+ "@babel/types": ^7.10.4
+ checksum: f14f786b5e5d4728ecfae8679d26da6460056dee4c8c2ae7432cd0e64332a289cf44e43b0e2b349f8ce1d281595fafb6824988d9674fa29389b1e5ab2055b3be
+ languageName: node
+ linkType: hard
+
"@babel/helper-compilation-targets@npm:^7.10.0":
version: 7.10.0
resolution: "@babel/helper-compilation-targets@npm:7.10.0"
@@ -212,23 +259,23 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-function-name@npm:^7.10.4, @babel/helper-function-name@npm:^7.8.3, @babel/helper-function-name@npm:^7.9.5":
- version: 7.10.4
- resolution: "@babel/helper-function-name@npm:7.10.4"
+"@babel/helper-function-name@npm:^7.12.11, @babel/helper-function-name@npm:^7.8.3, @babel/helper-function-name@npm:^7.9.5":
+ version: 7.12.11
+ resolution: "@babel/helper-function-name@npm:7.12.11"
dependencies:
- "@babel/helper-get-function-arity": ^7.10.4
- "@babel/template": ^7.10.4
- "@babel/types": ^7.10.4
- checksum: 41ab8f48bbb7d4a65a90a4cf50c79c386d3c30e0dac10bc3ce311fda2ca971d82289a07570a785ebac92686854237ea1e511e74f2577a38c7ec2d67f2a250a9e
+ "@babel/helper-get-function-arity": ^7.12.10
+ "@babel/template": ^7.12.7
+ "@babel/types": ^7.12.11
+ checksum: f41ccc145ce8f04a0e73158a19a509de4923a96c4cd9458da248c71d601725ed16884a740401b55b104d91b0946bcf718f2085d6e3c4adc68df8aed9bc1797ca
languageName: node
linkType: hard
-"@babel/helper-get-function-arity@npm:^7.10.4":
- version: 7.10.4
- resolution: "@babel/helper-get-function-arity@npm:7.10.4"
+"@babel/helper-get-function-arity@npm:^7.10.4, @babel/helper-get-function-arity@npm:^7.12.10":
+ version: 7.12.10
+ resolution: "@babel/helper-get-function-arity@npm:7.12.10"
dependencies:
- "@babel/types": ^7.10.4
- checksum: 4f0ddd43405e5a43c0638ddeb9fd6fc562ce8f338983ae603d4824ce4b586c2ca2fbc0ca93864357ba3a28f699029653749c6b49ec8576cb512ab0f404500999
+ "@babel/types": ^7.12.10
+ checksum: 5c645ed43c320e207bdc46006f5ffc05a090e6ef639a84be324e6acba311b4e2d5213305137142bd1fb17d957d8b528e0b34362da6d9e2504a6496af17954090
languageName: node
linkType: hard
@@ -241,16 +288,16 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-member-expression-to-functions@npm:^7.10.0, @babel/helper-member-expression-to-functions@npm:^7.10.4":
- version: 7.10.4
- resolution: "@babel/helper-member-expression-to-functions@npm:7.10.4"
+"@babel/helper-member-expression-to-functions@npm:^7.10.0, @babel/helper-member-expression-to-functions@npm:^7.12.7":
+ version: 7.12.7
+ resolution: "@babel/helper-member-expression-to-functions@npm:7.12.7"
dependencies:
- "@babel/types": ^7.10.4
- checksum: 512a2008f61ab676f08f6fc6a88a0a1060c3e77bdfa71a2d8e6aba6a1afcb53cff1da74eb7836a2fa1ca66d5019bff9394acbfada0b4fb299eea15e09f57d44e
+ "@babel/types": ^7.12.7
+ checksum: 313e78a21713886062826cc146422a3e5f5576a233b1ee5b6360735171638bacdec8809b625e49d0448ef7c16232b753a8af374ecf6347496182960e9ecdd0e2
languageName: node
linkType: hard
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.12.5, @babel/helper-module-imports@npm:^7.8.3":
+"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.12.1, @babel/helper-module-imports@npm:^7.8.3":
version: 7.12.5
resolution: "@babel/helper-module-imports@npm:7.12.5"
dependencies:
@@ -259,27 +306,29 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-module-transforms@npm:^7.10.4, @babel/helper-module-transforms@npm:^7.10.5, @babel/helper-module-transforms@npm:^7.9.0":
- version: 7.10.5
- resolution: "@babel/helper-module-transforms@npm:7.10.5"
+"@babel/helper-module-transforms@npm:^7.10.4, @babel/helper-module-transforms@npm:^7.10.5, @babel/helper-module-transforms@npm:^7.12.1, @babel/helper-module-transforms@npm:^7.9.0":
+ version: 7.12.1
+ resolution: "@babel/helper-module-transforms@npm:7.12.1"
dependencies:
- "@babel/helper-module-imports": ^7.10.4
- "@babel/helper-replace-supers": ^7.10.4
- "@babel/helper-simple-access": ^7.10.4
- "@babel/helper-split-export-declaration": ^7.10.4
+ "@babel/helper-module-imports": ^7.12.1
+ "@babel/helper-replace-supers": ^7.12.1
+ "@babel/helper-simple-access": ^7.12.1
+ "@babel/helper-split-export-declaration": ^7.11.0
+ "@babel/helper-validator-identifier": ^7.10.4
"@babel/template": ^7.10.4
- "@babel/types": ^7.10.5
+ "@babel/traverse": ^7.12.1
+ "@babel/types": ^7.12.1
lodash: ^4.17.19
- checksum: 02a2b607058da060cc704583025a9c6585503ed40ba346f0630c017c0042c1cc5ab6887fa5f549f4a0b3d728ac89b9388dc224ba1e4601ae75b2286e16f8336f
+ checksum: 902ed2b8e9ff45d33d20379f84b2269741a3a6108eb6c5e9e139186fd72e5bb405fac84bdcb7fae135c0cf4a5464d30bfb78ad00fc163b329aa9caa3630e7dd2
languageName: node
linkType: hard
-"@babel/helper-optimise-call-expression@npm:^7.10.0, @babel/helper-optimise-call-expression@npm:^7.10.4, @babel/helper-optimise-call-expression@npm:^7.8.3":
- version: 7.10.4
- resolution: "@babel/helper-optimise-call-expression@npm:7.10.4"
+"@babel/helper-optimise-call-expression@npm:^7.10.0, @babel/helper-optimise-call-expression@npm:^7.12.10, @babel/helper-optimise-call-expression@npm:^7.8.3":
+ version: 7.12.10
+ resolution: "@babel/helper-optimise-call-expression@npm:7.12.10"
dependencies:
- "@babel/types": ^7.10.4
- checksum: 70dd5a6daf6dc9f176dbfcac4afc1390d872821abe4ffaedf3ff0b1dbda8fb4b49efdeb612ae86c08f0773340583ce6e393a7a059727991aaa51b18de1fc0960
+ "@babel/types": ^7.12.10
+ checksum: e96f37e943016688993f31736c92010a78db7c46dd8cf5aa67e50f8244e91172589555670bcebc3c0e715d6738cac3d70e9dff25f03982488a142e2f60e0c44b
languageName: node
linkType: hard
@@ -312,25 +361,24 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-replace-supers@npm:^7.10.0, @babel/helper-replace-supers@npm:^7.10.4, @babel/helper-replace-supers@npm:^7.8.3, @babel/helper-replace-supers@npm:^7.8.6":
- version: 7.10.4
- resolution: "@babel/helper-replace-supers@npm:7.10.4"
+"@babel/helper-replace-supers@npm:^7.10.0, @babel/helper-replace-supers@npm:^7.12.1, @babel/helper-replace-supers@npm:^7.8.3, @babel/helper-replace-supers@npm:^7.8.6":
+ version: 7.12.11
+ resolution: "@babel/helper-replace-supers@npm:7.12.11"
dependencies:
- "@babel/helper-member-expression-to-functions": ^7.10.4
- "@babel/helper-optimise-call-expression": ^7.10.4
- "@babel/traverse": ^7.10.4
- "@babel/types": ^7.10.4
- checksum: 2d7e0627cda8d6f360e52d9c962746fb5818cb6599072d4473fc1e7a2eacfb1a2605a1727d95ae9af66e06e1b84c0a67d40ae16446f838d367de11ae198ee0f8
+ "@babel/helper-member-expression-to-functions": ^7.12.7
+ "@babel/helper-optimise-call-expression": ^7.12.10
+ "@babel/traverse": ^7.12.10
+ "@babel/types": ^7.12.11
+ checksum: 0696dcff97b1069a01169df99c4ee39b6b966065e8587ad96d38247087967fccac00f52358730a4238d8907993acf98e6c2eef129399a8aa409751cf558c9e7d
languageName: node
linkType: hard
-"@babel/helper-simple-access@npm:^7.10.4":
- version: 7.10.4
- resolution: "@babel/helper-simple-access@npm:7.10.4"
+"@babel/helper-simple-access@npm:^7.10.4, @babel/helper-simple-access@npm:^7.12.1":
+ version: 7.12.1
+ resolution: "@babel/helper-simple-access@npm:7.12.1"
dependencies:
- "@babel/template": ^7.10.4
- "@babel/types": ^7.10.4
- checksum: a7ce52a2295b9290b70cfbdd5667ec42de1a170de2f9d6e8321b3864e631bca729fbb537fbcc85396b7ce921abc2c844a452e70996fcd582dd31433c33ef0f9d
+ "@babel/types": ^7.12.1
+ checksum: ca44e3f694957d4026e2837905cd4f4ec60d73f49f8d65d8592afa6d797cb000f261ce7db1ed3e14b51200467f4c04917cb84ebe395f3d153462ccce1b980322
languageName: node
linkType: hard
@@ -343,12 +391,12 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-split-export-declaration@npm:^7.10.4, @babel/helper-split-export-declaration@npm:^7.11.0, @babel/helper-split-export-declaration@npm:^7.8.3":
- version: 7.11.0
- resolution: "@babel/helper-split-export-declaration@npm:7.11.0"
+"@babel/helper-split-export-declaration@npm:^7.11.0, @babel/helper-split-export-declaration@npm:^7.12.11, @babel/helper-split-export-declaration@npm:^7.8.3":
+ version: 7.12.11
+ resolution: "@babel/helper-split-export-declaration@npm:7.12.11"
dependencies:
- "@babel/types": ^7.11.0
- checksum: ddfc44d0cf75ee3a73e71b18e8b9b67d256f6e8496e550ab0b1342ef8cd62dd232c13ac77569e319869b1515a9733863e69a143e76f52e9fc1b51ee374b8869b
+ "@babel/types": ^7.12.11
+ checksum: c2c8525116c2963effd7b1e57ebcd955f7c5f00c9ca90772c20e3f80548f8e1f71d5b82e3e99e80e5e0b3923124a60a2adfdfe21002fa7426ef67a8316dd7686
languageName: node
linkType: hard
@@ -371,14 +419,14 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helpers@npm:^7.10.4":
- version: 7.10.4
- resolution: "@babel/helpers@npm:7.10.4"
+"@babel/helpers@npm:^7.10.4, @babel/helpers@npm:^7.12.5":
+ version: 7.12.5
+ resolution: "@babel/helpers@npm:7.12.5"
dependencies:
"@babel/template": ^7.10.4
- "@babel/traverse": ^7.10.4
- "@babel/types": ^7.10.4
- checksum: 96859c490ac07fe30fe2b6ad8e474325d2504ffcc8b720b0f22a01e8334d79b4fb3051720c2146390579f7781cbc5923cb32d4e23e51b811c83aaa644fe17f2a
+ "@babel/traverse": ^7.12.5
+ "@babel/types": ^7.12.5
+ checksum: 5cc171461d6d38c3d46494e3b35c390ea051fc3a3406cdf378960c57a1656a8e1f799e7b00080a82552ebb1ee7054a1e648421eaf73f31ad12c12a03b0b42bc0
languageName: node
linkType: hard
@@ -393,12 +441,12 @@ __metadata:
languageName: node
linkType: hard
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.1.6, @babel/parser@npm:^7.10.4, @babel/parser@npm:^7.10.5, @babel/parser@npm:^7.12.5, @babel/parser@npm:^7.12.7, @babel/parser@npm:^7.4.2, @babel/parser@npm:^7.4.3, @babel/parser@npm:^7.4.4, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.7.5":
- version: 7.12.7
- resolution: "@babel/parser@npm:7.12.7"
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.1.6, @babel/parser@npm:^7.10.5, @babel/parser@npm:^7.12.10, @babel/parser@npm:^7.12.11, @babel/parser@npm:^7.12.5, @babel/parser@npm:^7.12.7, @babel/parser@npm:^7.4.2, @babel/parser@npm:^7.4.3, @babel/parser@npm:^7.4.4, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.7.5":
+ version: 7.12.11
+ resolution: "@babel/parser@npm:7.12.11"
bin:
parser: ./bin/babel-parser.js
- checksum: 12daf20ffe364116f94a50411d02e42144439b66f9948f2e84950ac943e75cfb1f61dbc14f01c9c037f112e3deefd2f9779b6a213fb9c9b6a506066c6527a665
+ checksum: 2f650e8e57342bdd1b624ba89d6df2332ee8e6ec0287316aa47d49a7bee8a6d9bab4581e753a4b72a2ddd8f272a2f9947f6c7f1ca191a0006a297789226f4b55
languageName: node
linkType: hard
@@ -671,7 +719,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/plugin-syntax-jsx@npm:7.10.4":
+"@babel/plugin-syntax-jsx@npm:7.10.4, @babel/plugin-syntax-jsx@npm:^7.10.4, @babel/plugin-syntax-jsx@npm:^7.8.3":
version: 7.10.4
resolution: "@babel/plugin-syntax-jsx@npm:7.10.4"
dependencies:
@@ -682,17 +730,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/plugin-syntax-jsx@npm:^7.12.1":
- version: 7.12.1
- resolution: "@babel/plugin-syntax-jsx@npm:7.12.1"
- dependencies:
- "@babel/helper-plugin-utils": ^7.10.4
- peerDependencies:
- "@babel/core": ^7.0.0-0
- checksum: 2f0314608b171d0146dcb8283abfb0d48824da19b311b3aa875cb9977db23cb5e64e895390780f1839dd9679e6761b61e109d40741f174d73f200b6eceacfcbf
- languageName: node
- linkType: hard
-
"@babel/plugin-syntax-logical-assignment-operators@npm:^7.8.3":
version: 7.8.3
resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.8.3"
@@ -1093,52 +1130,77 @@ __metadata:
languageName: node
linkType: hard
-"@babel/plugin-transform-react-display-name@npm:^7.12.1":
- version: 7.12.1
- resolution: "@babel/plugin-transform-react-display-name@npm:7.12.1"
+"@babel/plugin-transform-react-display-name@npm:^7.8.3":
+ version: 7.8.3
+ resolution: "@babel/plugin-transform-react-display-name@npm:7.8.3"
dependencies:
- "@babel/helper-plugin-utils": ^7.10.4
+ "@babel/helper-plugin-utils": ^7.8.3
peerDependencies:
"@babel/core": ^7.0.0-0
- checksum: 88d6819169bd3d84ccf47614a363b46f7269fa6d086f1a05e0b306fffd72c73c9a07cc9865e8bee2889b37754816b8ab8f668bc18cc0aa8691fde12e3338db11
+ checksum: 9e25364d9509a5f5bca8748fbb4337b1c9fc5d4c9bc698f6abffb14cfb0928782d55ec91d13e6e239f8a4c4532aa2267c9a3ad0a99a6c6f4ad0e1e24f5ee710a
languageName: node
linkType: hard
-"@babel/plugin-transform-react-jsx-development@npm:^7.12.7":
- version: 7.12.12
- resolution: "@babel/plugin-transform-react-jsx-development@npm:7.12.12"
+"@babel/plugin-transform-react-jsx-development@npm:^7.9.0":
+ version: 7.9.0
+ resolution: "@babel/plugin-transform-react-jsx-development@npm:7.9.0"
dependencies:
- "@babel/plugin-transform-react-jsx": ^7.12.12
+ "@babel/helper-builder-react-jsx-experimental": ^7.9.0
+ "@babel/helper-plugin-utils": ^7.8.3
+ "@babel/plugin-syntax-jsx": ^7.8.3
peerDependencies:
"@babel/core": ^7.0.0-0
- checksum: c9d320ba135288faedc46786aacf06a8de7f194f59446fb67d81768ef216677e911edd6ee0dcebdd7c6272059124216be4cf8b03ae9277807540621d663ecedd
+ checksum: 33cc1dd4df808ce4396d2db91560f34de4cbefe1806ab4dba268f4da1ca8b937020db449bc6134df832f99bfc38b59d589a2281bfcd9de060b0291ffa41e6eb2
languageName: node
linkType: hard
-"@babel/plugin-transform-react-jsx@npm:^7.12.10, @babel/plugin-transform-react-jsx@npm:^7.12.12, @babel/plugin-transform-react-jsx@npm:^7.3.0":
- version: 7.12.12
- resolution: "@babel/plugin-transform-react-jsx@npm:7.12.12"
+"@babel/plugin-transform-react-jsx-self@npm:^7.9.0":
+ version: 7.9.0
+ resolution: "@babel/plugin-transform-react-jsx-self@npm:7.9.0"
dependencies:
- "@babel/helper-annotate-as-pure": ^7.12.10
- "@babel/helper-module-imports": ^7.12.5
- "@babel/helper-plugin-utils": ^7.10.4
- "@babel/plugin-syntax-jsx": ^7.12.1
- "@babel/types": ^7.12.12
+ "@babel/helper-plugin-utils": ^7.8.3
+ "@babel/plugin-syntax-jsx": ^7.8.3
peerDependencies:
"@babel/core": ^7.0.0-0
- checksum: e276a667c2e28d49747433b2677663b070b5cac7e23a64685fe76c07a94f81ba113aa195cf3ccb3ad5be512e99300209613763ae7f4062709854a9db6803e7f3
+ checksum: 74db297c3181c6f3712f6109b844feeb18ab9d7298e132b31dbf04f1055fd32843098d108d53867eb44de1ae289b39dd127c57fc82b8fb930e7a50ce0f81c309
languageName: node
linkType: hard
-"@babel/plugin-transform-react-pure-annotations@npm:^7.12.1":
- version: 7.12.1
- resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.12.1"
+"@babel/plugin-transform-react-jsx-source@npm:^7.10.0":
+ version: 7.10.0
+ resolution: "@babel/plugin-transform-react-jsx-source@npm:7.10.0"
dependencies:
- "@babel/helper-annotate-as-pure": ^7.10.4
+ "@babel/helper-plugin-utils": ^7.8.3
+ "@babel/plugin-syntax-jsx": ^7.8.3
+ peerDependencies:
+ "@babel/core": ^7.0.0-0
+ checksum: 8ae706eee075563a9121f3142e512ca9978c86a648cfc47e2de9d1e955ad462a611a675d16951bbea610a3d5fd9b2a9d71260384c842e8cb5e073327dbd767de
+ languageName: node
+ linkType: hard
+
+"@babel/plugin-transform-react-jsx@npm:^7.3.0, @babel/plugin-transform-react-jsx@npm:^7.9.4":
+ version: 7.10.4
+ resolution: "@babel/plugin-transform-react-jsx@npm:7.10.4"
+ dependencies:
+ "@babel/helper-builder-react-jsx": ^7.10.4
+ "@babel/helper-builder-react-jsx-experimental": ^7.10.4
"@babel/helper-plugin-utils": ^7.10.4
+ "@babel/plugin-syntax-jsx": ^7.10.4
peerDependencies:
"@babel/core": ^7.0.0-0
- checksum: b1984954daac2a02e5a105e616df273cc13b76e8ead061913ee80089d8f77722235cd1103ca8dc4c2bbda62a53736d15037dcffe6dd9a06acfa83600299a790a
+ checksum: 0fb7d136c89f723214c48785e280429ad30f99d6c0cf07e056a769904741f733afbe46cfa7c53751be7d8fea25163b158c02aefc5df6e14eb3fe87757b383c30
+ languageName: node
+ linkType: hard
+
+"@babel/plugin-transform-react-pure-annotations@npm:^7.10.0":
+ version: 7.10.0
+ resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.10.0"
+ dependencies:
+ "@babel/helper-annotate-as-pure": ^7.8.3
+ "@babel/helper-plugin-utils": ^7.8.3
+ peerDependencies:
+ "@babel/core": ^7.0.0-0
+ checksum: 538278ac3f12e217a5a39dc4e2c98a0dd6471f88c0a6b8b732bd6703063ba600555210cc7cc2d557e97710022fdda1e86cd78b39a65456d64c5f7cb861c82ea6
languageName: node
linkType: hard
@@ -1382,18 +1444,20 @@ __metadata:
languageName: node
linkType: hard
-"@babel/preset-react@npm:^7.0.0, @babel/preset-react@npm:^7.10.0, @babel/preset-react@npm:^7.10.4":
- version: 7.12.10
- resolution: "@babel/preset-react@npm:7.12.10"
+"@babel/preset-react@npm:^7.0.0, @babel/preset-react@npm:^7.10.0":
+ version: 7.10.0
+ resolution: "@babel/preset-react@npm:7.10.0"
dependencies:
- "@babel/helper-plugin-utils": ^7.10.4
- "@babel/plugin-transform-react-display-name": ^7.12.1
- "@babel/plugin-transform-react-jsx": ^7.12.10
- "@babel/plugin-transform-react-jsx-development": ^7.12.7
- "@babel/plugin-transform-react-pure-annotations": ^7.12.1
+ "@babel/helper-plugin-utils": ^7.8.3
+ "@babel/plugin-transform-react-display-name": ^7.8.3
+ "@babel/plugin-transform-react-jsx": ^7.9.4
+ "@babel/plugin-transform-react-jsx-development": ^7.9.0
+ "@babel/plugin-transform-react-jsx-self": ^7.9.0
+ "@babel/plugin-transform-react-jsx-source": ^7.10.0
+ "@babel/plugin-transform-react-pure-annotations": ^7.10.0
peerDependencies:
"@babel/core": ^7.0.0-0
- checksum: 3afd3d01911d330d120cab571c04cf78a083407639c506515a7e7c142881822e3e20d934b43d538bf73d38c44f4fba1f92f6a83728b42d491363d2a8896acffc
+ checksum: 3f9a18b24ec8f5b42bfff53ad03fae5aa43ba2752d46af4a6a9d92f370d4a46019f15bfb1ebeaf43048486fb7e4bffa406d7c6dde4b72d6c18a25a7effb4a14a
languageName: node
linkType: hard
@@ -1443,35 +1507,35 @@ __metadata:
languageName: node
linkType: hard
-"@babel/template@npm:^7.10.4, @babel/template@npm:^7.3.3, @babel/template@npm:^7.4.0, @babel/template@npm:^7.7.4, @babel/template@npm:^7.8.3":
- version: 7.10.4
- resolution: "@babel/template@npm:7.10.4"
+"@babel/template@npm:^7.10.4, @babel/template@npm:^7.12.7, @babel/template@npm:^7.3.3, @babel/template@npm:^7.4.0, @babel/template@npm:^7.7.4, @babel/template@npm:^7.8.3":
+ version: 7.12.7
+ resolution: "@babel/template@npm:7.12.7"
dependencies:
"@babel/code-frame": ^7.10.4
- "@babel/parser": ^7.10.4
- "@babel/types": ^7.10.4
- checksum: 23a5c4f7ab77d3f0cfeca3f8462f3b8a85d605d7c56bd917b46e9061aca2c8e84558d1209b8e365eb0e038d92fc387d42382c3072e3ad75087f9a04649e7bea6
+ "@babel/parser": ^7.12.7
+ "@babel/types": ^7.12.7
+ checksum: 6e0a050be7d07ca6755305d74892dfa1e119d1193929275f8019339fbbf45257eea41385cf99325301001a2b2912d186e447393229fe169f50a8bfbcbf8a850a
languageName: node
linkType: hard
-"@babel/traverse@npm:^7.1.0, @babel/traverse@npm:^7.10.4, @babel/traverse@npm:^7.10.5, @babel/traverse@npm:^7.12.5, @babel/traverse@npm:^7.4.3, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.4, @babel/traverse@npm:^7.8.3":
- version: 7.12.9
- resolution: "@babel/traverse@npm:7.12.9"
+"@babel/traverse@npm:^7.1.0, @babel/traverse@npm:^7.10.5, @babel/traverse@npm:^7.12.1, @babel/traverse@npm:^7.12.10, @babel/traverse@npm:^7.12.5, @babel/traverse@npm:^7.4.3, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.4, @babel/traverse@npm:^7.8.3":
+ version: 7.12.12
+ resolution: "@babel/traverse@npm:7.12.12"
dependencies:
- "@babel/code-frame": ^7.10.4
- "@babel/generator": ^7.12.5
- "@babel/helper-function-name": ^7.10.4
- "@babel/helper-split-export-declaration": ^7.11.0
- "@babel/parser": ^7.12.7
- "@babel/types": ^7.12.7
+ "@babel/code-frame": ^7.12.11
+ "@babel/generator": ^7.12.11
+ "@babel/helper-function-name": ^7.12.11
+ "@babel/helper-split-export-declaration": ^7.12.11
+ "@babel/parser": ^7.12.11
+ "@babel/types": ^7.12.12
debug: ^4.1.0
globals: ^11.1.0
lodash: ^4.17.19
- checksum: 6797d3f42d3d27ba596c864c76b81a234a6df3c3079bf03207bdef56bff866e001135a271b114d9869ab78984f4408cb7252940ca0986ca40f2281b1626a5391
+ checksum: d3af59ec9d2fdff2b7b9cb9835ba8f8ddaaa8ea7c8b638fa885f17a2867968736c7de8f7327cb4334f6cc940e0bfff5a48ac97917f807908c2137fd70a3d9636
languageName: node
linkType: hard
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.10.0, @babel/types@npm:^7.10.2, @babel/types@npm:^7.10.4, @babel/types@npm:^7.10.5, @babel/types@npm:^7.11.0, @babel/types@npm:^7.12.10, @babel/types@npm:^7.12.12, @babel/types@npm:^7.12.5, @babel/types@npm:^7.12.7, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.0, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3":
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.10.0, @babel/types@npm:^7.10.2, @babel/types@npm:^7.10.4, @babel/types@npm:^7.10.5, @babel/types@npm:^7.11.0, @babel/types@npm:^7.12.1, @babel/types@npm:^7.12.10, @babel/types@npm:^7.12.11, @babel/types@npm:^7.12.12, @babel/types@npm:^7.12.5, @babel/types@npm:^7.12.7, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.0, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3":
version: 7.12.12
resolution: "@babel/types@npm:7.12.12"
dependencies:
@@ -1522,7 +1586,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/cli@^10.18.0, @carbon/cli@workspace:packages/cli":
+"@carbon/cli@^10.19.0-rc.0, @carbon/cli@workspace:packages/cli":
version: 0.0.0-use.local
resolution: "@carbon/cli@workspace:packages/cli"
dependencies:
@@ -1566,11 +1630,11 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/colors@^10.19.0, @carbon/colors@workspace:packages/colors":
+"@carbon/colors@^10.20.0-rc.0, @carbon/colors@workspace:packages/colors":
version: 0.0.0-use.local
resolution: "@carbon/colors@workspace:packages/colors"
dependencies:
- "@carbon/cli": ^10.18.0
+ "@carbon/cli": ^10.19.0-rc.0
"@carbon/cli-reporter": ^10.4.0
"@carbon/scss-generator": ^10.12.0
"@carbon/test-utils": ^10.14.0
@@ -1582,19 +1646,19 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/elements@^10.26.0, @carbon/elements@workspace:packages/elements":
+"@carbon/elements@^10.27.0-rc.0, @carbon/elements@workspace:packages/elements":
version: 0.0.0-use.local
resolution: "@carbon/elements@workspace:packages/elements"
dependencies:
- "@carbon/cli": ^10.18.0
- "@carbon/colors": ^10.19.0
- "@carbon/grid": ^10.19.0
- "@carbon/icons": ^10.24.0
+ "@carbon/cli": ^10.19.0-rc.0
+ "@carbon/colors": ^10.20.0-rc.0
+ "@carbon/grid": ^10.20.0-rc.0
+ "@carbon/icons": ^10.25.0-rc.0
"@carbon/import-once": ^10.5.0
- "@carbon/layout": ^10.17.0
- "@carbon/motion": ^10.12.0
- "@carbon/themes": ^10.26.0
- "@carbon/type": ^10.20.0
+ "@carbon/layout": ^10.18.0-rc.0
+ "@carbon/motion": ^10.13.0-rc.0
+ "@carbon/themes": ^10.27.0-rc.0
+ "@carbon/type": ^10.21.0-rc.0
fs-extra: ^8.1.0
klaw-sync: ^6.0.0
replace-in-file: ^3.4.2
@@ -1617,25 +1681,25 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/grid@^10.19.0, @carbon/grid@workspace:packages/grid":
+"@carbon/grid@^10.20.0-rc.0, @carbon/grid@workspace:packages/grid":
version: 0.0.0-use.local
resolution: "@carbon/grid@workspace:packages/grid"
dependencies:
- "@carbon/cli": ^10.18.0
+ "@carbon/cli": ^10.19.0-rc.0
"@carbon/import-once": ^10.5.0
- "@carbon/layout": ^10.17.0
+ "@carbon/layout": ^10.18.0-rc.0
rimraf: ^3.0.0
languageName: unknown
linkType: soft
-"@carbon/icon-build-helpers@^0.14.0, @carbon/icon-build-helpers@workspace:packages/icon-build-helpers":
+"@carbon/icon-build-helpers@^0.15.0-rc.0, @carbon/icon-build-helpers@workspace:packages/icon-build-helpers":
version: 0.0.0-use.local
resolution: "@carbon/icon-build-helpers@workspace:packages/icon-build-helpers"
dependencies:
"@babel/preset-env": ^7.10.0
"@babel/preset-react": ^7.10.0
"@carbon/cli-reporter": ^10.4.0
- "@carbon/icon-helpers": ^10.12.0
+ "@carbon/icon-helpers": ^10.13.0-rc.0
"@rollup/plugin-babel": ^5.2.2
"@rollup/plugin-replace": ^2.3.4
browserslist-config-carbon: ^10.6.0
@@ -1657,11 +1721,11 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/icon-helpers@^10.12.0, @carbon/icon-helpers@workspace:packages/icon-helpers":
+"@carbon/icon-helpers@^10.13.0-rc.0, @carbon/icon-helpers@workspace:packages/icon-helpers":
version: 0.0.0-use.local
resolution: "@carbon/icon-helpers@workspace:packages/icon-helpers"
dependencies:
- "@carbon/cli": ^10.18.0
+ "@carbon/cli": ^10.19.0-rc.0
rimraf: ^3.0.0
languageName: unknown
linkType: soft
@@ -1673,25 +1737,25 @@ __metadata:
languageName: node
linkType: hard
-"@carbon/icons-handlebars@^10.24.0, @carbon/icons-handlebars@workspace:packages/icons-handlebars":
+"@carbon/icons-handlebars@^10.25.0-rc.0, @carbon/icons-handlebars@workspace:packages/icons-handlebars":
version: 0.0.0-use.local
resolution: "@carbon/icons-handlebars@workspace:packages/icons-handlebars"
dependencies:
- "@carbon/icon-helpers": ^10.12.0
- "@carbon/icons": ^10.24.0
+ "@carbon/icon-helpers": ^10.13.0-rc.0
+ "@carbon/icons": ^10.25.0-rc.0
handlebars: ^4.0.12
peerDependencies:
handlebars: ^4.0.12
languageName: unknown
linkType: soft
-"@carbon/icons-react@^10.24.0, @carbon/icons-react@workspace:packages/icons-react":
+"@carbon/icons-react@^10.25.0-rc.0, @carbon/icons-react@workspace:packages/icons-react":
version: 0.0.0-use.local
resolution: "@carbon/icons-react@workspace:packages/icons-react"
dependencies:
- "@carbon/icon-build-helpers": ^0.14.0
- "@carbon/icon-helpers": ^10.12.0
- "@carbon/icons": ^10.24.0
+ "@carbon/icon-build-helpers": ^0.15.0-rc.0
+ "@carbon/icon-helpers": ^10.13.0-rc.0
+ "@carbon/icons": ^10.25.0-rc.0
prop-types: ^15.7.2
peerDependencies:
react: ">=16"
@@ -1713,8 +1777,8 @@ __metadata:
resolution: "@carbon/icons-vue@workspace:packages/icons-vue"
dependencies:
"@carbon/cli-reporter": ^10.4.0
- "@carbon/icon-helpers": ^10.12.0
- "@carbon/icons": ^10.24.0
+ "@carbon/icon-helpers": ^10.13.0-rc.0
+ "@carbon/icons": ^10.25.0-rc.0
fs-extra: ^8.1.0
prettier: ^2.2.1
rimraf: ^3.0.0
@@ -1723,12 +1787,12 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/icons@^10.24.0, @carbon/icons@workspace:packages/icons":
+"@carbon/icons@^10.25.0-rc.0, @carbon/icons@workspace:packages/icons":
version: 0.0.0-use.local
resolution: "@carbon/icons@workspace:packages/icons"
dependencies:
- "@carbon/cli": ^10.18.0
- "@carbon/icon-build-helpers": ^0.14.0
+ "@carbon/cli": ^10.19.0-rc.0
+ "@carbon/icon-build-helpers": ^0.15.0-rc.0
rimraf: ^3.0.2
languageName: unknown
linkType: soft
@@ -1739,7 +1803,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/layout@^10.17.0, @carbon/layout@workspace:packages/layout":
+"@carbon/layout@^10.18.0-rc.0, @carbon/layout@workspace:packages/layout":
version: 0.0.0-use.local
resolution: "@carbon/layout@workspace:packages/layout"
dependencies:
@@ -1751,11 +1815,11 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/motion@^10.12.0, @carbon/motion@workspace:packages/motion":
+"@carbon/motion@^10.13.0-rc.0, @carbon/motion@workspace:packages/motion":
version: 0.0.0-use.local
resolution: "@carbon/motion@workspace:packages/motion"
dependencies:
- "@carbon/cli": ^10.18.0
+ "@carbon/cli": ^10.19.0-rc.0
rimraf: ^3.0.0
languageName: unknown
linkType: soft
@@ -1764,9 +1828,9 @@ __metadata:
version: 0.0.0-use.local
resolution: "@carbon/pictograms-react@workspace:packages/pictograms-react"
dependencies:
- "@carbon/icon-build-helpers": ^0.14.0
- "@carbon/icon-helpers": ^10.12.0
- "@carbon/pictograms": ^11.2.0
+ "@carbon/icon-build-helpers": ^0.15.0-rc.0
+ "@carbon/icon-helpers": ^10.13.0-rc.0
+ "@carbon/pictograms": ^11.3.0-rc.0
"@carbon/telemetry": 0.0.0-alpha.6
prop-types: ^15.7.2
peerDependencies:
@@ -1774,11 +1838,11 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/pictograms@^11.2.0, @carbon/pictograms@workspace:packages/pictograms":
+"@carbon/pictograms@^11.3.0-rc.0, @carbon/pictograms@workspace:packages/pictograms":
version: 0.0.0-use.local
resolution: "@carbon/pictograms@workspace:packages/pictograms"
dependencies:
- "@carbon/icon-build-helpers": ^0.14.0
+ "@carbon/icon-build-helpers": ^0.15.0-rc.0
rimraf: ^3.0.0
languageName: unknown
linkType: soft
@@ -1796,11 +1860,11 @@ __metadata:
resolution: "@carbon/sketch@workspace:packages/sketch"
dependencies:
"@babel/polyfill": ^7.8.7
- "@carbon/colors": ^10.19.0
- "@carbon/icon-helpers": ^10.12.0
- "@carbon/icons": ^10.24.0
- "@carbon/themes": ^10.26.0
- "@carbon/type": ^10.20.0
+ "@carbon/colors": ^10.20.0-rc.0
+ "@carbon/icon-helpers": ^10.13.0-rc.0
+ "@carbon/icons": ^10.25.0-rc.0
+ "@carbon/themes": ^10.27.0-rc.0
+ "@carbon/type": ^10.21.0-rc.0
"@skpm/builder": ^0.7.0
color-string: ^1.5.3
cross-env: ^5.2.0
@@ -1809,28 +1873,6 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/storybook-addon-theme@0.1.0, @carbon/storybook-addon-theme@workspace:packages/storybook-addon-carbon-theme":
- version: 0.0.0-use.local
- resolution: "@carbon/storybook-addon-theme@workspace:packages/storybook-addon-carbon-theme"
- dependencies:
- "@babel/cli": ^7.10.0
- "@babel/core": ^7.10.0
- "@babel/preset-react": ^7.10.4
- "@storybook/addons": 5.3.19
- "@storybook/api": 5.3.19
- "@storybook/client-api": 5.3.19
- "@storybook/client-logger": 5.3.19
- "@storybook/components": 5.3.19
- "@storybook/core-events": 5.3.19
- "@storybook/theming": 5.3.19
- core-js: ^3.0.1
- global: ^4.3.2
- peerDependencies:
- react: "*"
- vue: "*"
- languageName: unknown
- linkType: soft
-
"@carbon/telemetry@npm:0.0.0-alpha.6":
version: 0.0.0-alpha.6
resolution: "@carbon/telemetry@npm:0.0.0-alpha.6"
@@ -1867,17 +1909,17 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/themes@^10.26.0, @carbon/themes@workspace:packages/themes":
+"@carbon/themes@^10.27.0-rc.0, @carbon/themes@workspace:packages/themes":
version: 0.0.0-use.local
resolution: "@carbon/themes@workspace:packages/themes"
dependencies:
- "@carbon/cli": ^10.18.0
+ "@carbon/cli": ^10.19.0-rc.0
"@carbon/cli-reporter": ^10.4.0
- "@carbon/colors": ^10.19.0
- "@carbon/layout": ^10.17.0
+ "@carbon/colors": ^10.20.0-rc.0
+ "@carbon/layout": ^10.18.0-rc.0
"@carbon/scss-generator": ^10.12.0
"@carbon/test-utils": ^10.14.0
- "@carbon/type": ^10.20.0
+ "@carbon/type": ^10.21.0-rc.0
change-case: ^4.1.1
color: ^3.1.2
core-js: ^3.6.5
@@ -1888,13 +1930,13 @@ __metadata:
languageName: unknown
linkType: soft
-"@carbon/type@^10.20.0, @carbon/type@workspace:packages/type":
+"@carbon/type@^10.21.0-rc.0, @carbon/type@workspace:packages/type":
version: 0.0.0-use.local
resolution: "@carbon/type@workspace:packages/type"
dependencies:
- "@carbon/cli": ^10.18.0
+ "@carbon/cli": ^10.19.0-rc.0
"@carbon/import-once": ^10.5.0
- "@carbon/layout": ^10.17.0
+ "@carbon/layout": ^10.18.0-rc.0
"@carbon/test-utils": ^10.14.0
change-case: ^4.1.1
rimraf: ^3.0.0
@@ -1915,7 +1957,7 @@ __metadata:
jscodeshift: ^0.6.4
lodash.clonedeep: ^4.5.0
npm-which: ^3.0.1
- semver: ^5.6.0
+ semver: ^7.3.4
yargs: ^15.1.0
bin:
carbon-upgrade: ./bin/carbon-upgrade.js
@@ -3629,6 +3671,25 @@ __metadata:
languageName: node
linkType: hard
+"@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents":
+ version: 2.1.8-no-fsevents
+ resolution: "@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents"
+ dependencies:
+ anymatch: ^2.0.0
+ async-each: ^1.0.1
+ braces: ^2.3.2
+ glob-parent: ^3.1.0
+ inherits: ^2.0.3
+ is-binary-path: ^1.0.0
+ is-glob: ^4.0.0
+ normalize-path: ^3.0.0
+ path-is-absolute: ^1.0.0
+ readdirp: ^2.2.1
+ upath: ^1.1.1
+ checksum: 0efeea3b7d9e3c07dc3ded371ba65351a7c30314763f6e2d34849bf58809655f0f9bd71fcd505ab72624cd17e80e738a0bd41aac0d7d8606664817f3fe85cfba
+ languageName: node
+ linkType: hard
+
"@nodelib/fs.scandir@npm:2.1.3":
version: 2.1.3
resolution: "@nodelib/fs.scandir@npm:2.1.3"
@@ -7529,19 +7590,18 @@ __metadata:
languageName: node
linkType: hard
-"babel-loader@npm:^8.0.5, babel-loader@npm:^8.1.0":
- version: 8.1.0
- resolution: "babel-loader@npm:8.1.0"
+"babel-loader@npm:^8.0.5, babel-loader@npm:^8.1.0, babel-loader@npm:^8.2.2":
+ version: 8.2.2
+ resolution: "babel-loader@npm:8.2.2"
dependencies:
- find-cache-dir: ^2.1.0
+ find-cache-dir: ^3.3.1
loader-utils: ^1.4.0
- mkdirp: ^0.5.3
- pify: ^4.0.1
+ make-dir: ^3.1.0
schema-utils: ^2.6.5
peerDependencies:
"@babel/core": ^7.0.0
webpack: ">=2"
- checksum: f7b236a5f7b3f2c8a49ec41ed0a2905075ed4bb6d6ba85552b50be7c56b8fdb46e92270576ef29e6598f23919f7a00a515091c2410ced25c08992a4bd799124b
+ checksum: 362bb715736abec0162bdf8dc2a523a09c46c7b14aef13d9c6548ff609b8cb3879129822a5096401cd955230d836bde19037d9cbebeced940d5348c64959bec3
languageName: node
linkType: hard
@@ -9082,8 +9142,7 @@ __metadata:
"@babel/plugin-transform-object-assign": ^7.7.4
"@babel/preset-env": ^7.10.0
"@babel/preset-react": ^7.10.0
- "@carbon/icons-react": ^10.24.0
- "@carbon/storybook-addon-theme": 0.1.0
+ "@carbon/icons-react": ^10.25.0-rc.0
"@carbon/telemetry": 0.0.0-alpha.6
"@carbon/test-utils": ^10.14.0
"@percy/storybook": ^3.3.1
@@ -9102,7 +9161,7 @@ __metadata:
babel-plugin-react-docgen: ^4.0.0
babel-plugin-transform-inline-environment-variables: ^0.4.0
browserslist-config-carbon: ^10.6.0
- carbon-components: ^10.27.0
+ carbon-components: ^10.28.0-rc.0
carbon-icons: ^7.0.5
chalk: ^2.3.0
classnames: 2.2.6
@@ -9141,7 +9200,7 @@ __metadata:
rollup-plugin-terser: ^7.0.2
rtlcss: ^2.4.0
sass-loader: ^8.0.2
- storybook-preset-carbon: ^0.1.0
+ storybook-preset-carbon: ^0.2.0-rc.0
string-replace-loader: ^2.1.0
terser-webpack-plugin: ^2.3.2
use-resize-observer: ^6.0.0
@@ -9157,7 +9216,7 @@ __metadata:
languageName: unknown
linkType: soft
-"carbon-components@^10.27.0, carbon-components@workspace:packages/components":
+"carbon-components@^10.28.0-rc.0, carbon-components@workspace:packages/components":
version: 0.0.0-use.local
resolution: "carbon-components@workspace:packages/components"
dependencies:
@@ -9169,10 +9228,10 @@ __metadata:
"@babel/preset-env": ^7.10.0
"@babel/preset-react": ^7.10.0
"@babel/runtime": ^7.10.0
- "@carbon/cli": ^10.18.0
- "@carbon/elements": ^10.26.0
- "@carbon/icons-handlebars": ^10.24.0
- "@carbon/icons-react": ^10.24.0
+ "@carbon/cli": ^10.19.0-rc.0
+ "@carbon/elements": ^10.27.0-rc.0
+ "@carbon/icons-handlebars": ^10.25.0-rc.0
+ "@carbon/icons-react": ^10.25.0-rc.0
"@carbon/telemetry": 0.0.0-alpha.6
"@carbon/test-utils": ^10.14.0
"@frctl/fractal": ^1.1.0
@@ -9529,22 +9588,22 @@ __metadata:
languageName: node
linkType: hard
-"chokidar@npm:>=2.0.0 <4.0.0, chokidar@npm:^3.0.0":
- version: 3.3.1
- resolution: "chokidar@npm:3.3.1"
+"chokidar@npm:>=2.0.0 <4.0.0, chokidar@npm:^3.0.0, chokidar@npm:^3.4.0":
+ version: 3.5.1
+ resolution: "chokidar@npm:3.5.1"
dependencies:
anymatch: ~3.1.1
braces: ~3.0.2
- fsevents: ~2.1.2
+ fsevents: ~2.3.1
glob-parent: ~5.1.0
is-binary-path: ~2.1.0
is-glob: ~4.0.1
normalize-path: ~3.0.0
- readdirp: ~3.3.0
+ readdirp: ~3.5.0
dependenciesMeta:
fsevents:
optional: true
- checksum: b4925ff399ad141b651a0fc5b76395c56dde983ff98acbbc04fe20f10daea568bddde67b47e7e5cd5fafec3fd0bf3b53dd09a5447f9084672b8edc00b0ff003e
+ checksum: 61b3f710f9e7dc69d76f638d8b0d37bad586497444165125ca8062f7192695f35403b5f622cbd7dfdd06805201ceaba40ff90e53ea2974df9a8087861192a99b
languageName: node
linkType: hard
@@ -14460,14 +14519,14 @@ __metadata:
languageName: node
linkType: hard
-"find-cache-dir@npm:^3.0.0, find-cache-dir@npm:^3.2.0":
- version: 3.2.0
- resolution: "find-cache-dir@npm:3.2.0"
+"find-cache-dir@npm:^3.0.0, find-cache-dir@npm:^3.2.0, find-cache-dir@npm:^3.3.1":
+ version: 3.3.1
+ resolution: "find-cache-dir@npm:3.3.1"
dependencies:
commondir: ^1.0.1
- make-dir: ^3.0.0
+ make-dir: ^3.0.2
pkg-dir: ^4.1.0
- checksum: 8c45c3b15db71d54027ef8ab3f96ba52e1238cb8bc5125b2da1ed69e71e931448818278523324855316bed23ec61810e8cbf48e54b2d6209a649ec57268dde9d
+ checksum: b1e23226ee89fba89646aa5f72d084c6d04bb64f6d523c9cb2d57a1b5280fcac39e92fd5be572e2fae8a83aa70bc5b797ce33a826b9a4b92373cc38e66d4aa64
languageName: node
linkType: hard
@@ -15031,12 +15090,12 @@ __metadata:
languageName: node
linkType: hard
-"fsevents@^2.1.2, fsevents@~2.1.2":
- version: 2.1.2
- resolution: "fsevents@npm:2.1.2"
+"fsevents@^2.1.2, fsevents@~2.3.1":
+ version: 2.3.1
+ resolution: "fsevents@npm:2.3.1"
dependencies:
node-gyp: latest
- checksum: 8f61ef784058aa410def121afcf20014fbb845c678c04e43fe1fd1edec6c469c5452343b4a49960d89e8a207955c8e9b37a229af7a8fc5b28658c9e0faabe086
+ checksum: 32619a121e7f9ac8a5ce4954f5fdf06be68b7b1c16e4ac8fa6e5e13cbf97d83c86cdcdf872ab7b188ebb07b34d2271b7818aebfc305b4a7d5b35f4bc2117f8be
languageName: node
linkType: hard
@@ -15052,7 +15111,16 @@ __metadata:
languageName: node
linkType: hard
-"fsevents@patch:fsevents@^2.1.2#builtin, fsevents@patch:fsevents@~2.1.2#builtin":
+"fsevents@patch:fsevents@^2.1.2#builtin, fsevents@patch:fsevents@~2.3.1#builtin":
+ version: 2.3.1
+ resolution: "fsevents@patch:fsevents@npm%3A2.3.1#builtin::version=2.3.1&hash=11e9ea"
+ dependencies:
+ node-gyp: latest
+ checksum: 66b24358e15cdd0f705b456346e58b4613f2bf54206b47874decda4152614fb0632d2d662c92b0ea54810109f646e5233e4cdd64dbb2a1949070ee5dc14dab87
+ languageName: node
+ linkType: hard
+
+"fsevents@patch:fsevents@~2.1.2#builtin":
version: 2.1.2
resolution: "fsevents@patch:fsevents@npm%3A2.1.2#builtin::version=2.1.2&hash=11e9ea"
dependencies:
@@ -15061,6 +15129,15 @@ __metadata:
languageName: node
linkType: hard
+fsevents@~2.1.2:
+ version: 2.1.2
+ resolution: "fsevents@npm:2.1.2"
+ dependencies:
+ node-gyp: latest
+ checksum: 8f61ef784058aa410def121afcf20014fbb845c678c04e43fe1fd1edec6c469c5452343b4a49960d89e8a207955c8e9b37a229af7a8fc5b28658c9e0faabe086
+ languageName: node
+ linkType: hard
+
"fstream@npm:^1.0.0, fstream@npm:^1.0.12":
version: 1.0.12
resolution: "fstream@npm:1.0.12"
@@ -21436,12 +21513,12 @@ __metadata:
languageName: node
linkType: hard
-"make-dir@npm:^3.0.0":
- version: 3.0.0
- resolution: "make-dir@npm:3.0.0"
+"make-dir@npm:^3.0.0, make-dir@npm:^3.0.2, make-dir@npm:^3.1.0":
+ version: 3.1.0
+ resolution: "make-dir@npm:3.1.0"
dependencies:
semver: ^6.0.0
- checksum: 3a069c362d72df30f05066cf2899c280d4aee9fdd9e7a303fbb323c57ce7ee76cddf11c71b69a712da8d21db995fc60ef15c6e2d765053187370059ee22db8f6
+ checksum: 54b6f186c209c1b133d0d1710e6b04c41ebfcb0dac699e5a369ea1223f22c0574ef820b91db37cae6c245f5bda8aff9bfec94f6c23e7d75970446b34a58a79b0
languageName: node
linkType: hard
@@ -22468,7 +22545,7 @@ __metadata:
languageName: node
linkType: hard
-"mkdirp@npm:0.5.x, mkdirp@npm:>=0.5 0, mkdirp@npm:^0.5.0, mkdirp@npm:^0.5.1, mkdirp@npm:^0.5.3, mkdirp@npm:^0.5.5, mkdirp@npm:~0.5.0, mkdirp@npm:~0.5.1":
+"mkdirp@npm:0.5.x, mkdirp@npm:>=0.5 0, mkdirp@npm:^0.5.0, mkdirp@npm:^0.5.1, mkdirp@npm:^0.5.5, mkdirp@npm:~0.5.0, mkdirp@npm:~0.5.1":
version: 0.5.5
resolution: "mkdirp@npm:0.5.5"
dependencies:
@@ -24649,7 +24726,7 @@ __metadata:
languageName: node
linkType: hard
-"picomatch@npm:^2.0.4, picomatch@npm:^2.0.5, picomatch@npm:^2.0.7, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.0.5, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2":
version: 2.2.2
resolution: "picomatch@npm:2.2.2"
checksum: 20fa75e0a58b39d83425b3db68744d5f6f361fd4fd66ec7745d884036d502abba0d553a637703af79939b844164b13e60eea339ccb043d7fbd74c3da2592b864
@@ -26686,12 +26763,12 @@ __metadata:
languageName: node
linkType: hard
-"readdirp@npm:~3.3.0":
- version: 3.3.0
- resolution: "readdirp@npm:3.3.0"
+"readdirp@npm:~3.5.0":
+ version: 3.5.0
+ resolution: "readdirp@npm:3.5.0"
dependencies:
- picomatch: ^2.0.7
- checksum: 97ad7dd846ab1a81850a7e934d0b20168d6737c7db2e28c682ab300fcbfd9549c6962788fde20cae11445756f1d8e63f4496a96d7be8e35c7c5c82cb192f0ce3
+ picomatch: ^2.2.1
+ checksum: a64fe5606937d9655252230003362d95da05dbfd3baecedb4bb8c1bc0df497d051a192f9b75345c944e58a0b362c68349be602d6dbf05d03770e510b35a9f80f
languageName: node
linkType: hard
@@ -28388,7 +28465,7 @@ resolve@1.1.x:
languageName: node
linkType: hard
-"semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.2":
+"semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.2, semver@npm:^7.3.4":
version: 7.3.4
resolution: "semver@npm:7.3.4"
dependencies:
@@ -29791,10 +29868,12 @@ resolve@1.1.x:
languageName: node
linkType: hard
-"storybook-preset-carbon@^0.1.0, storybook-preset-carbon@workspace:config/storybook-preset-carbon":
+"storybook-preset-carbon@^0.2.0-rc.0, storybook-preset-carbon@workspace:config/storybook-preset-carbon":
version: 0.0.0-use.local
resolution: "storybook-preset-carbon@workspace:config/storybook-preset-carbon"
dependencies:
+ "@babel/cli": ^7.12.10
+ "@babel/core": ^7.12.10
"@storybook/addon-actions": ^5.3.19
"@storybook/addon-docs": ^5.3.19
"@storybook/addon-knobs": ^5.3.19
@@ -29804,9 +29883,16 @@ resolve@1.1.x:
"@storybook/addons": ^5.3.19
"@storybook/react": ^5.3.19
"@storybook/source-loader": ^5.3.19
+ babel-loader: ^8.2.2
+ react: ^16.8.6
+ react-dom: ^16.8.6
+ react-is: ^16.8.6
storybook-readme: ^5.0.8
+ webpack: ^4.41.5
peerDependencies:
"@storybook/react": ^5.3.19
+ react: ^16.8.6 || ^17.0.1
+ react-dom: ^16.8.6 || ^17.0.1
languageName: unknown
linkType: soft