@carbon/layout 10.37.1 → 10.37.2

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 (7) hide show
  1. package/docs/sass.md +24 -24
  2. package/package.json +3 -3
  3. package/scss/_breakpoint.scss +11 -11
  4. package/scss/_convert.import.scss +20 -1
  5. package/scss/_convert.scss +17 -1
  6. package/scss/_mini-unit.scss +1 -1
  7. package/scss/modules/_convert.scss +20 -0
package/docs/sass.md CHANGED
@@ -20,30 +20,30 @@ the following:
20
20
 
21
21
  ## API
22
22
 
23
- | Export | Description | !default |
24
- | :------------------ | :---------- | :------- |
25
- | `$spacing-01` | | ✅ |
26
- | `$spacing-02` | | ✅ |
27
- | `$spacing-03` | | ✅ |
28
- | `$spacing-04` | | ✅ |
29
- | `$spacing-05` | | ✅ |
30
- | `$spacing-06` | | ✅ |
31
- | `$spacing-07` | | ✅ |
32
- | `$spacing-08` | | ✅ |
33
- | `$spacing-09` | | ✅ |
34
- | `$spacing-10` | | ✅ |
35
- | `$spacing-11` | | ✅ |
36
- | `$spacing-12` | | ✅ |
37
- | `$spacing-13` | | ✅ |
38
- | `$spacing ` | | |
39
- | `$fluid-spacing-01` | | ✅ |
40
- | `$fluid-spacing-02` | | ✅ |
41
- | `$fluid-spacing-03` | | ✅ |
42
- | `$fluid-spacing-04` | | ✅ |
43
- | `$fluid-spacing ` | | |
44
- | `@function em` | | |
45
- | `@function rem` | | |
46
- | `$base-font-size` | | ✅ |
23
+ | Export | Description | !default |
24
+ | :---------------------- | :---------- | :------- |
25
+ | `$spacing-01` | | ✅ |
26
+ | `$spacing-02` | | ✅ |
27
+ | `$spacing-03` | | ✅ |
28
+ | `$spacing-04` | | ✅ |
29
+ | `$spacing-05` | | ✅ |
30
+ | `$spacing-06` | | ✅ |
31
+ | `$spacing-07` | | ✅ |
32
+ | `$spacing-08` | | ✅ |
33
+ | `$spacing-09` | | ✅ |
34
+ | `$spacing-10` | | ✅ |
35
+ | `$spacing-11` | | ✅ |
36
+ | `$spacing-12` | | ✅ |
37
+ | `$spacing-13` | | ✅ |
38
+ | `$spacing ` | | |
39
+ | `$fluid-spacing-01` | | ✅ |
40
+ | `$fluid-spacing-02` | | ✅ |
41
+ | `$fluid-spacing-03` | | ✅ |
42
+ | `$fluid-spacing-04` | | ✅ |
43
+ | `$fluid-spacing ` | | |
44
+ | `@function em` | | |
45
+ | `@function carbon--rem` | | |
46
+ | `$base-font-size` | | ✅ |
47
47
 
48
48
  ### Configuration
49
49
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/layout",
3
3
  "description": "Layout helpers for digital and software products using the Carbon Design System",
4
- "version": "10.37.1",
4
+ "version": "10.37.2",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -29,7 +29,7 @@
29
29
  "clean": "rimraf es lib umd scss/generated scss/modules/generated"
30
30
  },
31
31
  "devDependencies": {
32
- "@carbon/cli": "^10.34.0",
32
+ "@carbon/cli": "^10.34.2",
33
33
  "@carbon/cli-reporter": "^10.5.0",
34
34
  "@carbon/scss-generator": "^10.13.0",
35
35
  "@carbon/test-utils": "^10.21.1",
@@ -42,5 +42,5 @@
42
42
  "sassDir": "scss",
43
43
  "needs": "^1.3.0"
44
44
  },
45
- "gitHead": "9b11eecab91c41ae4ffda711c5e1f631f2fb33db"
45
+ "gitHead": "58041d7d41b49eb391ccd4ac4eaf635c923aab84"
46
46
  }
package/scss/_breakpoint.scss CHANGED
@@ -13,13 +13,13 @@
13
13
  /// @type Number
14
14
  /// @access public
15
15
  /// @group @carbon/layout
16
- $carbon--grid-gutter: carbon--rem(32px);
16
+ $carbon--grid-gutter: to-rem(32px);
17
17
 
18
18
  /// Carbon condensed gutter size in rem
19
19
  /// @type Number
20
20
  /// @access public
21
21
  /// @group @carbon/layout
22
- $carbon--grid-gutter--condensed: carbon--rem(1px);
22
+ $carbon--grid-gutter--condensed: to-rem(1px);
23
23
 
24
24
  // Initial map of our breakpoints and their values
25
25
  /// @type Map
@@ -29,27 +29,27 @@ $carbon--grid-breakpoints: (
29
29
  sm: (
30
30
  columns: 4,
31
31
  margin: 0,
32
- width: carbon--rem(320px),
32
+ width: to-rem(320px),
33
33
  ),
34
34
  md: (
35
35
  columns: 8,
36
- margin: carbon--rem(16px),
37
- width: carbon--rem(672px),
36
+ margin: to-rem(16px),
37
+ width: to-rem(672px),
38
38
  ),
39
39
  lg: (
40
40
  columns: 16,
41
- margin: carbon--rem(16px),
42
- width: carbon--rem(1056px),
41
+ margin: to-rem(16px),
42
+ width: to-rem(1056px),
43
43
  ),
44
44
  xlg: (
45
45
  columns: 16,
46
- margin: carbon--rem(16px),
47
- width: carbon--rem(1312px),
46
+ margin: to-rem(16px),
47
+ width: to-rem(1312px),
48
48
  ),
49
49
  max: (
50
50
  columns: 16,
51
- margin: carbon--rem(24px),
52
- width: carbon--rem(1584px),
51
+ margin: to-rem(24px),
52
+ width: to-rem(1584px),
53
53
  ),
54
54
  ) !default;
55
55
 
package/scss/_convert.import.scss CHANGED
@@ -33,7 +33,26 @@ $carbon--base-font-size: 16px !default;
33
33
  /// @return {Number} Number with rem unit
34
34
  /// @access public
35
35
  /// @group @carbon/layout
36
- @function carbon--rem($px) {
36
+ @function to-rem($px) {
37
+ @if unit($px) != 'px' {
38
+ // TODO: update to @error in v11
39
+ @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
40
+ }
41
+
42
+ @if meta.function-exists('div', 'math') {
43
+ @return math.div($px, $carbon--base-font-size) * 1rem;
44
+ } @else {
45
+ @return ($px / $carbon--base-font-size) * 1rem;
46
+ }
47
+ }
48
+
49
+ /// This function causes an error when using sass > 1.65.0
50
+ /// Replaced with `to-rem` function
51
+ /// @param {Number} $px - Number with px unit
52
+ /// @return {Number} Number with rem unit
53
+ /// @access public
54
+ /// @group @carbon/layout
55
+ @function rem($px) {
37
56
  @if unit($px) != 'px' {
38
57
  // TODO: update to @error in v11
39
58
  @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
package/scss/_convert.scss CHANGED
@@ -30,7 +30,23 @@ $carbon--base-font-size: 16px !default;
30
30
  /// @return {Number} Number with rem unit
31
31
  /// @access public
32
32
  /// @group @carbon/layout
33
- @function carbon--rem($px) {
33
+ @function to-rem($px) {
34
+ @if unit($px) != 'px' {
35
+ // TODO: update to @error in v11
36
+ @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
37
+ }
38
+
39
+ @return ($px / $carbon--base-font-size) * 1rem;
40
+ }
41
+
42
+ /// This function causes an error when using sass > 1.65.0
43
+ /// Replaced with `to-rem` function
44
+ /// @param {Number} $px - Number with px unit
45
+ /// @return {Number} Number with rem unit
46
+ /// @access public
47
+ /// @group @carbon/layout
48
+ /// @deprecated Use `to-rem()`
49
+ @function rem($px) {
34
50
  @if unit($px) != 'px' {
35
51
  // TODO: update to @error in v11
36
52
  @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
package/scss/_mini-unit.scss CHANGED
@@ -19,5 +19,5 @@ $carbon--mini-unit-size: 8px !default;
19
19
  /// @access public
20
20
  /// @group @carbon/layout
21
21
  @function carbon--mini-units($count) {
22
- @return carbon--rem($carbon--mini-unit-size * $count);
22
+ @return to-rem($carbon--mini-unit-size * $count);
23
23
  }
package/scss/modules/_convert.scss CHANGED
@@ -19,6 +19,26 @@ $base-font-size: 16px !default;
19
19
  /// @return {Number} Number with rem unit
20
20
  /// @access public
21
21
  /// @group @carbon/layout
22
+ @function to-rem($px) {
23
+ @if unit($px) != 'px' {
24
+ // TODO: update to @error in v11
25
+ @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
26
+ }
27
+
28
+ @if meta.function-exists('div', 'math') {
29
+ @return math.div($px, $base-font-size) * 1rem;
30
+ } @else {
31
+ @return ($px / $base-font-size) * 1rem;
32
+ }
33
+ }
34
+
35
+ /// This function causes an error when using sass > 1.65.0
36
+ /// Replaced with `to-rem` function
37
+ /// @param {Number} $px - Number with px unit
38
+ /// @return {Number} Number with rem unit
39
+ /// @access public
40
+ /// @group @carbon/layout
41
+ /// @deprecated Use `to-rem()`
22
42
  @function rem($px) {
23
43
  @if unit($px) != 'px' {
24
44
  // TODO: update to @error in v11