@carbon/type 10.44.0-rc.0 → 11.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/README.md +2 -6
  2. package/index.scss +7 -7
  3. package/package.json +6 -6
  4. package/scss/_classes.scss +8 -7
  5. package/scss/{modules/_default-type.scss → _default-type.scss} +2 -8
  6. package/scss/_font-family.scss +51 -17
  7. package/scss/_inlined/_classes.scss +8 -7
  8. package/scss/_inlined/_default-type.scss +49 -0
  9. package/scss/_inlined/_font-family.scss +51 -17
  10. package/scss/_inlined/_reset.scss +11 -59
  11. package/scss/_inlined/_scale.scss +13 -15
  12. package/scss/_inlined/_styles.scss +146 -214
  13. package/scss/_reset.scss +11 -59
  14. package/scss/_scale.scss +13 -15
  15. package/scss/_styles.scss +146 -214
  16. package/scss/vendor/@carbon/grid/{modules/_breakpoint.scss → _breakpoint.scss} +1 -1
  17. package/scss/vendor/@carbon/grid/{modules/_config.scss → _config.scss} +1 -1
  18. package/scss/vendor/@carbon/grid/{modules/_css-grid.scss → _css-grid.scss} +0 -0
  19. package/scss/vendor/@carbon/grid/{modules/_flex-grid.scss → _flex-grid.scss} +0 -20
  20. package/scss/vendor/@carbon/grid/_inlined/_breakpoint.scss +198 -0
  21. package/scss/vendor/@carbon/grid/_inlined/_config.scss +94 -0
  22. package/scss/vendor/@carbon/grid/_inlined/_css-grid.scss +470 -0
  23. package/scss/vendor/@carbon/grid/{modules/_mixins.scss → _inlined/_flex-grid.scss} +45 -38
  24. package/scss/vendor/@carbon/grid/_inlined/_mixins.scss +89 -188
  25. package/scss/vendor/@carbon/grid/_mixins.scss +89 -188
  26. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/_convert.import.scss +2 -4
  27. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/_convert.scss +18 -23
  28. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/_spacing.scss +2 -5
  29. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/_utilities.scss +4 -4
  30. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/generated/_container.scss +13 -43
  31. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/generated/_fluid-spacing.scss +11 -35
  32. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/generated/_icon-size.scss +8 -17
  33. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/generated/_size.scss +1 -1
  34. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/generated/_spacing.scss +29 -107
  35. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/modules/_convert.scss +2 -4
  36. package/scss/_inlined/_styles.import.scss +0 -766
  37. package/scss/_inlined/font-face/_mono.scss +0 -1166
  38. package/scss/_inlined/font-face/_sans-condensed.scss +0 -1009
  39. package/scss/_inlined/font-face/_sans.scss +0 -1326
  40. package/scss/_inlined/font-face/_serif.scss +0 -1166
  41. package/scss/_inlined/font-face/_settings.scss +0 -12
  42. package/scss/_styles.import.scss +0 -766
  43. package/scss/font-face/_mono.scss +0 -1166
  44. package/scss/font-face/_sans-condensed.scss +0 -1009
  45. package/scss/font-face/_sans.scss +0 -1326
  46. package/scss/font-face/_serif.scss +0 -1166
  47. package/scss/font-face/_settings.scss +0 -12
  48. package/scss/index.scss +0 -8
  49. package/scss/modules/_classes.scss +0 -42
  50. package/scss/modules/_font-family.scss +0 -104
  51. package/scss/modules/_prefix.scss +0 -11
  52. package/scss/modules/_reset.scss +0 -44
  53. package/scss/modules/_scale.scss +0 -57
  54. package/scss/modules/_styles.scss +0 -876
  55. package/scss/type.scss +0 -8
  56. package/scss/vendor/@carbon/grid/12.scss +0 -41
  57. package/scss/vendor/@carbon/grid/_inlined/12.scss +0 -41
  58. package/scss/vendor/@carbon/grid/_inlined/_mixins.import.scss +0 -431
  59. package/scss/vendor/@carbon/grid/_inlined/_prefix.scss +0 -12
  60. package/scss/vendor/@carbon/grid/_mixins.import.scss +0 -431
  61. package/scss/vendor/@carbon/grid/_prefix.scss +0 -12
  62. package/scss/vendor/@carbon/grid/grid.scss +0 -10
  63. package/scss/vendor/@carbon/grid/index.scss +0 -10
  64. package/scss/vendor/@carbon/grid/vendor/@carbon/import-once/import-once.scss +0 -27
  65. package/scss/vendor/@carbon/grid/vendor/@carbon/import-once/index.scss +0 -8
  66. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/_breakpoint.scss +0 -246
  67. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/_key-height.import.scss +0 -117
  68. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/_key-height.scss +0 -111
  69. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/_mini-unit.scss +0 -23
  70. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/generated/_layout.scss +0 -97
  71. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/index.scss +0 -8
  72. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/layout.scss +0 -12
  73. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/modules/_spacing.scss +0 -9
  74. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/modules/_utilities.scss +0 -41
  75. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss +0 -37
  76. package/scss/vendor/@carbon/grid/vendor/@carbon/layout/modules/generated/_spacing.scss +0 -91
  77. package/scss/vendor/@carbon/import-once/import-once.scss +0 -27
  78. package/scss/vendor/@carbon/import-once/index.scss +0 -8
package/scss/_reset.scss CHANGED
@@ -5,27 +5,26 @@
5
5
  // LICENSE file in the root directory of this source tree.
6
6
  //
7
7
 
8
- @import '@carbon/layout/scss/convert';
9
- @import 'font-family';
10
- @import 'styles';
8
+ @use 'sass:map';
9
+ @use 'sass:meta';
10
+ @use '@carbon/layout';
11
+ @use 'font-family' as *;
11
12
 
12
13
  /// Include a type reset for a given body and mono font family
13
- /// @param {String} $body-font-family [carbon--font-family('sans')] - The font family used on the `<body>` element
14
- /// @param {String} $mono-font-family [carbon--font-family('mono')] - The font family used on elements that require mono fonts, like the `<code>` element
14
+ /// @param {String} $body-font-family [font-family('sans')] - The font family used on the `<body>` element
15
+ /// @param {String} $mono-font-family [font-family('mono')] - The font family used on elements that require mono fonts, like the `<code>` element
15
16
  /// @access public
16
17
  /// @group @carbon/type
17
- @mixin carbon--type-reset(
18
- // TODO: remove in next major release. This has been replaced with 100%
19
- $base-font-size: $carbon--base-font-size,
20
- $body-font-family: carbon--font-family('sans'),
21
- $mono-font-family: carbon--font-family('mono')
18
+ @mixin reset(
19
+ $body-font-family: font-family('sans'),
20
+ $mono-font-family: font-family('mono')
22
21
  ) {
23
22
  html {
24
23
  font-size: 100%;
25
24
  }
26
25
 
27
26
  body {
28
- @include carbon--font-weight('regular');
27
+ @include font-weight('regular');
29
28
 
30
29
  font-family: $body-font-family;
31
30
  -moz-osx-font-smoothing: grayscale;
@@ -38,53 +37,6 @@
38
37
  }
39
38
 
40
39
  strong {
41
- @include carbon--font-weight('semibold');
42
- }
43
- }
44
-
45
- /// Include default type styles
46
- /// @access public
47
- /// @group @carbon/type
48
- @mixin carbon--default-type {
49
- h1 {
50
- @include carbon--type-style('productive-heading-06');
51
- }
52
-
53
- h2 {
54
- @include carbon--type-style('productive-heading-05');
55
- }
56
-
57
- h3 {
58
- @include carbon--type-style('productive-heading-04');
59
- }
60
-
61
- h4 {
62
- @include carbon--type-style('productive-heading-03');
63
- }
64
-
65
- h5 {
66
- @include carbon--type-style('productive-heading-02');
67
- }
68
-
69
- h6 {
70
- @include carbon--type-style('productive-heading-01');
71
- }
72
-
73
- p {
74
- @include carbon--type-style('body-long-02');
75
- }
76
-
77
- a {
78
- @if global-variable-exists('carbon--theme') and
79
- map-has-key($carbon--theme, 'link-01')
80
- {
81
- color: map-get($carbon--theme, 'link-01');
82
- } @else {
83
- color: #0062fe;
84
- }
85
- }
86
-
87
- em {
88
- font-style: italic;
40
+ @include font-weight('semibold');
89
41
  }
90
42
  }
package/scss/_scale.scss CHANGED
@@ -5,31 +5,29 @@
5
5
  // LICENSE file in the root directory of this source tree.
6
6
  //
7
7
 
8
- @import '@carbon/layout/scss/convert';
8
+ @use '@carbon/layout';
9
+ @use 'sass:list';
9
10
 
10
11
  /// Compute the type size for the given type scale step
11
12
  /// @param {Number} $step
12
13
  /// @return {Number} In px
13
14
  /// @access public
14
15
  /// @group @carbon/type
15
- @function carbon--get-type-size($step) {
16
+ @function get-type-size($step) {
16
17
  @if $step == 1 {
17
18
  @return 12px;
18
19
  }
19
20
  // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
20
- @return carbon--get-type-size($step - 1) + (floor(($step - 2) * 0.25) + 1) * 2;
21
+ @return get-type-size($step - 1) + (floor(($step - 2) * 0.25) + 1) * 2;
21
22
  }
22
23
 
23
24
  /// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px
24
25
  /// @type Map
25
26
  /// @access public
26
27
  /// @group @carbon/type
27
- $carbon--type-scale: ();
28
+ $type-scale: ();
28
29
  @for $i from 1 through 23 {
29
- $carbon--type-scale: append(
30
- $carbon--type-scale,
31
- carbon--rem(carbon--get-type-size($i))
32
- );
30
+ $type-scale: list.append($type-scale, layout.rem(get-type-size($i)));
33
31
  }
34
32
 
35
33
  /// Get the value of a specific step in the type scale
@@ -37,23 +35,23 @@ $carbon--type-scale: ();
37
35
  /// @return {Number} In rem
38
36
  /// @access public
39
37
  /// @group @carbon/type
40
- @function carbon--type-scale($step) {
41
- @return nth($carbon--type-scale, $step);
38
+ @function type-scale($step) {
39
+ @return nth($type-scale, $step);
42
40
  }
43
41
 
44
42
  /// Set the font-size value of a selector with the value at the given `$step`
45
43
  /// @param {Number} $step
46
44
  /// @access public
47
45
  /// @group @carbon/type
48
- @mixin carbon--type-scale($step) {
49
- font-size: carbon--type-scale($step);
46
+ @mixin type-scale($step) {
47
+ font-size: type-scale($step);
50
48
  }
51
49
 
52
50
  /// Alias of `type-scale` mixin.
53
51
  /// @param {Number} $step
54
- /// @alias carbon--type-scale
52
+ /// @alias type-scale
55
53
  /// @access public
56
54
  /// @group @carbon/type
57
- @mixin carbon--font-size($step) {
58
- font-size: carbon--type-scale($step);
55
+ @mixin font-size($step) {
56
+ font-size: type-scale($step);
59
57
  }