Skip to content

Commit 139c44d

Browse files
joshblackkodiakhq[bot]
joshblack
and
kodiakhq[bot]
authored
feat(type): add experimental support for sass modules (#7702)
* fix(cli): ignore module directories when inlining * feat(type): add experimental support for sass modules Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 0bdea69 commit 139c44d

File tree

9 files changed

+1025
-0
lines changed

9 files changed

+1025
-0
lines changed

‎docs/migration/11.x-type.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# @carbon/type
2+
3+
**Note: everything in this file is a work-in-progress and will be changed.**
4+
5+
## Changes
6+
7+
| Filename | v10 | v11 |
8+
| ------------------------ | --------------------------------- | --------------------------------- |
9+
| `scss/_scale.scss` | `@function carbon--get-type-size` | Removed, use `type-scale` instead |
10+
| | `$carbon--type-scale` | `$type-scale` |
11+
| | `@function carbon--type-scale` | `@function type-scale` |
12+
| | `@mixin carbon--type-scale` | `@mixin type-scale` |
13+
| | `@mixin carbon--font-size` | `@mixin font-size` |
14+
| `scss/_font-family.scss` | `$carbon--font-families` | `$font-families` |
15+
| | `@function carbon--font-family` | `font-family` |
16+
| | `@mixin carbon--font-family` | `font-family` |
17+
| | `$carbon--font-weights` | `$font-weights` |
18+
| | `@function carbon--font-weight` | `font-weight` |
19+
| | `@mixin carbon--font-weight` | `font-weight` |
20+
| `scss/_prefix.scss` | | No Changes |
21+
| `scss/_styles.scss` | `@mixin carbon--type-style` | `@mixin type-style` |
22+
| `scss/_reset.scss` | `@mixin carbon--default-type` | `@mixin default-type` |
23+
| | `@mixin carbon--type-reset` | `@mixin type-reset` |
24+
| `scss/_classes.scss` | `@mixin carbon--type-classes` | `@mixin type-classes` |

‎packages/cli/src/commands/inline.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,10 @@ async function inlineSassDependencies(
9696
return false;
9797
}
9898

99+
if (path.relative(sourceFolder, src).includes('modules')) {
100+
return false;
101+
}
102+
99103
return path.basename(src) !== 'index.scss';
100104
},
101105
});

‎packages/type/index.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
//
2+
// Copyright IBM Corp. 2018, 2018
3+
//
4+
// This source code is licensed under the Apache-2.0 license found in the
5+
// LICENSE file in the root directory of this source tree.
6+
//
7+
8+
@forward 'scss/modules/classes';
9+
@forward 'scss/modules/font-family';
10+
@forward 'scss/modules/prefix';
11+
@forward 'scss/modules/reset';
12+
@forward 'scss/modules/scale';
13+
@forward 'scss/modules/styles';

‎packages/type/scss/modules/_classes.scss‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
//
2+
// Copyright IBM Corp. 2018, 2018
3+
//
4+
// This source code is licensed under the Apache-2.0 license found in the
5+
// LICENSE file in the root directory of this source tree.
6+
//
7+
8+
@use 'sass:map';
9+
@use 'font-family' as *;
10+
@use 'prefix' as *;
11+
@use 'styles' as *;
12+
13+
/// Create type classes for font families, weights, styles
14+
/// @access public
15+
/// @group @carbon/type
16+
@mixin type-classes {
17+
// Font families
18+
@each $name, $value in $font-families {
19+
.#{$prefix}--type-#{$name} {
20+
font-family: $value;
21+
}
22+
}
23+
24+
// Font weights
25+
@each $name, $value in $font-weights {
26+
.#{$prefix}--type-#{$name} {
27+
font-weight: $value;
28+
}
29+
}
30+
31+
// Font styles
32+
.#{$prefix}--type-italic {
33+
font-style: italic;
34+
}
35+
36+
// Type styles
37+
@each $name, $value in $tokens {
38+
.#{$prefix}--type-#{$name} {
39+
@include type-style($name, map.has-key($value, breakpoints));
40+
}
41+
}
42+
}

‎packages/type/scss/modules/_font-family.scss‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
//
2+
// Copyright IBM Corp. 2018, 2018
3+
//
4+
// This source code is licensed under the Apache-2.0 license found in the
5+
// LICENSE file in the root directory of this source tree.
6+
//
7+
8+
/// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
9+
/// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
10+
/// @type Map
11+
/// @access public
12+
/// @group @carbon/type
13+
$font-families: (
14+
'mono':
15+
unquote(
16+
"'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"
17+
),
18+
'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
19+
'sans-condensed':
20+
unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
21+
'sans-hebrew':
22+
unquote(
23+
"'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"
24+
),
25+
'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
26+
) !default;
27+
28+
/// Get the font-family for an IBM Plex font
29+
/// @param {String} $name
30+
/// @return {String}
31+
/// @access public
32+
/// @group @carbon/type
33+
@function font-family($name) {
34+
@return map-get($font-families, $name);
35+
}
36+
37+
/// Include the `font-family` definition for the given name in your selector
38+
/// @param {String} $name
39+
/// @access public
40+
/// @group @carbon/type
41+
@mixin font-family($name) {
42+
font-family: font-family($name);
43+
}
44+
45+
/// Suggested font weights to be used in product
46+
/// @type Map
47+
/// @access public
48+
/// @group @carbon/type
49+
$font-weights: (
50+
'light': 300,
51+
'regular': 400,
52+
'semibold': 600,
53+
) !default;
54+
55+
/// Retrieve the font-weight value for a given name
56+
/// @param {String} $weight
57+
/// @return {Number}
58+
/// @access public
59+
/// @group @carbon/type
60+
@function font-weight($weight) {
61+
@return map-get($font-weights, $weight);
62+
}
63+
64+
/// Set the `font-weight` property with the value for a given name
65+
/// @param {String} $weight
66+
/// @access public
67+
/// @group @carbon/type
68+
@mixin font-weight($weight) {
69+
font-weight: font-weight($weight);
70+
}

‎packages/type/scss/modules/_prefix.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
//
2+
// Copyright IBM Corp. 2018, 2018
3+
//
4+
// This source code is licensed under the Apache-2.0 license found in the
5+
// LICENSE file in the root directory of this source tree.
6+
//
7+
8+
/// @type String
9+
/// @access public
10+
/// @group @carbon/type
11+
$prefix: 'bx' !default;

‎packages/type/scss/modules/_reset.scss‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
//
2+
// Copyright IBM Corp. 2018, 2018
3+
//
4+
// This source code is licensed under the Apache-2.0 license found in the
5+
// LICENSE file in the root directory of this source tree.
6+
//
7+
8+
@use 'sass:map';
9+
@use 'sass:meta';
10+
@use '@carbon/layout';
11+
@use 'font-family' as *;
12+
@use 'styles' as *;
13+
14+
/// Include a type reset for a given body and mono font family
15+
/// @param {String} $body-font-family [font-family('sans')] - The font family used on the `<body>` element
16+
/// @param {String} $mono-font-family [font-family('mono')] - The font family used on elements that require mono fonts, like the `<code>` element
17+
/// @access public
18+
/// @group @carbon/type
19+
@mixin type-reset(
20+
// TODO: remove in next major release. This has been replaced with 100%
21+
$base-font-size: layout.$base-font-size,
22+
$body-font-family: font-family('sans'),
23+
$mono-font-family: font-family('mono')
24+
) {
25+
html {
26+
font-size: 100%;
27+
}
28+
29+
body {
30+
@include font-weight('regular');
31+
32+
font-family: $body-font-family;
33+
text-rendering: optimizeLegibility;
34+
-webkit-font-smoothing: antialiased;
35+
-moz-osx-font-smoothing: grayscale;
36+
}
37+
38+
code {
39+
font-family: $mono-font-family;
40+
}
41+
42+
strong {
43+
@include font-weight('semibold');
44+
}
45+
}
46+
47+
/// Include default type styles
48+
/// @access public
49+
/// @group @carbon/type
50+
@mixin default-type {
51+
h1 {
52+
@include type-style('productive-heading-06');
53+
}
54+
55+
h2 {
56+
@include type-style('productive-heading-05');
57+
}
58+
59+
h3 {
60+
@include type-style('productive-heading-04');
61+
}
62+
63+
h4 {
64+
@include type-style('productive-heading-03');
65+
}
66+
67+
h5 {
68+
@include type-style('productive-heading-02');
69+
}
70+
71+
h6 {
72+
@include type-style('productive-heading-01');
73+
}
74+
75+
p {
76+
@include type-style('body-long-02');
77+
}
78+
79+
a {
80+
@if meta.global-variable-exists('carbon--theme') and
81+
map.has-key($carbon--theme, 'link-01')
82+
{
83+
color: map.get($carbon--theme, 'link-01');
84+
} @else {
85+
color: #0062fe;
86+
}
87+
}
88+
89+
em {
90+
font-style: italic;
91+
}
92+
}

‎packages/type/scss/modules/_scale.scss‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
//
2+
// Copyright IBM Corp. 2018, 2018
3+
//
4+
// This source code is licensed under the Apache-2.0 license found in the
5+
// LICENSE file in the root directory of this source tree.
6+
//
7+
8+
@use '@carbon/layout';
9+
10+
/// Compute the type size for the given type scale step
11+
/// @param {Number} $step
12+
/// @return {Number} In px
13+
/// @access public
14+
/// @group @carbon/type
15+
@function get-type-size($step) {
16+
@if $step == 1 {
17+
@return 12px;
18+
}
19+
// Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
20+
@return get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
21+
}
22+
23+
/// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px
24+
/// @type Map
25+
/// @access public
26+
/// @group @carbon/type
27+
$type-scale: ();
28+
@for $i from 1 through 23 {
29+
$type-scale: append($type-scale, layout.rem(get-type-size($i)));
30+
}
31+
32+
/// Get the value of a specific step in the type scale
33+
/// @param {Number} $step
34+
/// @return {Number} In rem
35+
/// @access public
36+
/// @group @carbon/type
37+
@function type-scale($step) {
38+
@return nth($type-scale, $step);
39+
}
40+
41+
/// Set the font-size value of a selector with the value at the given `$step`
42+
/// @param {Number} $step
43+
/// @access public
44+
/// @group @carbon/type
45+
@mixin type-scale($step) {
46+
font-size: type-scale($step);
47+
}
48+
49+
/// Alias of `type-scale` mixin.
50+
/// @param {Number} $step
51+
/// @alias type-scale
52+
/// @access public
53+
/// @group @carbon/type
54+
@mixin font-size($step) {
55+
font-size: type-scale($step);
56+
}

0 commit comments

Comments
 (0)