@carbon/elements 10.54.2 → 11.0.0-rc.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 (165) hide show
  1. package/package.json +12 -13
  2. package/src/__tests__/__snapshots__/PublicAPI-test.js.snap +44 -130
  3. package/scss/colors/colors.scss +0 -12
  4. package/scss/colors/index.scss +0 -12
  5. package/scss/colors/mixins.scss +0 -1456
  6. package/scss/elements.scss +0 -17
  7. package/scss/grid/12.scss +0 -41
  8. package/scss/grid/_inlined/12.scss +0 -41
  9. package/scss/grid/_inlined/_mixins.import.scss +0 -431
  10. package/scss/grid/_inlined/_mixins.scss +0 -415
  11. package/scss/grid/_inlined/_prefix.scss +0 -12
  12. package/scss/grid/_mixins.import.scss +0 -431
  13. package/scss/grid/_mixins.scss +0 -415
  14. package/scss/grid/_prefix.scss +0 -12
  15. package/scss/grid/grid.scss +0 -10
  16. package/scss/grid/index.scss +0 -10
  17. package/scss/grid/modules/_breakpoint.scss +0 -198
  18. package/scss/grid/modules/_config.scss +0 -94
  19. package/scss/grid/modules/_css-grid.scss +0 -470
  20. package/scss/grid/modules/_flex-grid.scss +0 -363
  21. package/scss/grid/modules/_mixins.scss +0 -336
  22. package/scss/grid/vendor/@carbon/import-once/import-once.scss +0 -27
  23. package/scss/grid/vendor/@carbon/import-once/index.scss +0 -8
  24. package/scss/grid/vendor/@carbon/layout/_breakpoint.scss +0 -246
  25. package/scss/grid/vendor/@carbon/layout/_convert.import.scss +0 -65
  26. package/scss/grid/vendor/@carbon/layout/_convert.scss +0 -54
  27. package/scss/grid/vendor/@carbon/layout/_key-height.import.scss +0 -117
  28. package/scss/grid/vendor/@carbon/layout/_key-height.scss +0 -111
  29. package/scss/grid/vendor/@carbon/layout/_mini-unit.scss +0 -23
  30. package/scss/grid/vendor/@carbon/layout/_spacing.scss +0 -12
  31. package/scss/grid/vendor/@carbon/layout/_utilities.scss +0 -41
  32. package/scss/grid/vendor/@carbon/layout/generated/_container.scss +0 -73
  33. package/scss/grid/vendor/@carbon/layout/generated/_fluid-spacing.scss +0 -61
  34. package/scss/grid/vendor/@carbon/layout/generated/_icon-size.scss +0 -34
  35. package/scss/grid/vendor/@carbon/layout/generated/_layout.scss +0 -97
  36. package/scss/grid/vendor/@carbon/layout/generated/_size.scss +0 -17
  37. package/scss/grid/vendor/@carbon/layout/generated/_spacing.scss +0 -169
  38. package/scss/grid/vendor/@carbon/layout/index.scss +0 -8
  39. package/scss/grid/vendor/@carbon/layout/layout.scss +0 -12
  40. package/scss/grid/vendor/@carbon/layout/modules/_convert.scss +0 -51
  41. package/scss/grid/vendor/@carbon/layout/modules/_spacing.scss +0 -9
  42. package/scss/grid/vendor/@carbon/layout/modules/_utilities.scss +0 -41
  43. package/scss/grid/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss +0 -37
  44. package/scss/grid/vendor/@carbon/layout/modules/generated/_spacing.scss +0 -91
  45. package/scss/icons/icons.scss +0 -10
  46. package/scss/icons/index.scss +0 -8
  47. package/scss/icons/mixins.scss +0 -18
  48. package/scss/import-once/import-once.scss +0 -27
  49. package/scss/import-once/index.scss +0 -8
  50. package/scss/index.scss +0 -15
  51. package/scss/layout/_breakpoint.scss +0 -246
  52. package/scss/layout/_convert.import.scss +0 -65
  53. package/scss/layout/_convert.scss +0 -54
  54. package/scss/layout/_key-height.import.scss +0 -117
  55. package/scss/layout/_key-height.scss +0 -111
  56. package/scss/layout/_mini-unit.scss +0 -23
  57. package/scss/layout/_spacing.scss +0 -12
  58. package/scss/layout/_utilities.scss +0 -41
  59. package/scss/layout/generated/_container.scss +0 -73
  60. package/scss/layout/generated/_fluid-spacing.scss +0 -61
  61. package/scss/layout/generated/_icon-size.scss +0 -34
  62. package/scss/layout/generated/_layout.scss +0 -97
  63. package/scss/layout/generated/_size.scss +0 -17
  64. package/scss/layout/generated/_spacing.scss +0 -169
  65. package/scss/layout/index.scss +0 -8
  66. package/scss/layout/layout.scss +0 -12
  67. package/scss/layout/modules/_convert.scss +0 -51
  68. package/scss/layout/modules/_spacing.scss +0 -9
  69. package/scss/layout/modules/_utilities.scss +0 -41
  70. package/scss/layout/modules/generated/_fluid-spacing.scss +0 -37
  71. package/scss/layout/modules/generated/_spacing.scss +0 -91
  72. package/scss/motion/index.scss +0 -8
  73. package/scss/motion/motion.scss +0 -78
  74. package/scss/themes/_mixins.scss +0 -39
  75. package/scss/themes/_theme-maps.scss +0 -9
  76. package/scss/themes/_tokens.scss +0 -8
  77. package/scss/themes/compat/_themes.scss +0 -8
  78. package/scss/themes/compat/_tokens.scss +0 -8
  79. package/scss/themes/compat/generated/_themes.scss +0 -271
  80. package/scss/themes/compat/generated/_tokens.scss +0 -206
  81. package/scss/themes/generated/_mixins.scss +0 -3622
  82. package/scss/themes/generated/_themes.scss +0 -2955
  83. package/scss/themes/generated/_tokens.scss +0 -3179
  84. package/scss/themes/index.scss +0 -8
  85. package/scss/themes/modules/_config.scss +0 -11
  86. package/scss/themes/modules/_theme.scss +0 -120
  87. package/scss/themes/modules/_themes.scss +0 -8
  88. package/scss/themes/modules/_tokens.scss +0 -8
  89. package/scss/themes/modules/_utilities.scss +0 -18
  90. package/scss/themes/modules/generated/_themes.scss +0 -432
  91. package/scss/themes/modules/generated/_tokens.scss +0 -308
  92. package/scss/themes/themes.scss +0 -10
  93. package/scss/type/_classes.scss +0 -41
  94. package/scss/type/_font-family.scss +0 -70
  95. package/scss/type/_inlined/_classes.scss +0 -41
  96. package/scss/type/_inlined/_font-family.scss +0 -70
  97. package/scss/type/_inlined/_prefix.scss +0 -11
  98. package/scss/type/_inlined/_reset.scss +0 -90
  99. package/scss/type/_inlined/_scale.scss +0 -59
  100. package/scss/type/_inlined/_styles.import.scss +0 -766
  101. package/scss/type/_inlined/_styles.scss +0 -924
  102. package/scss/type/_inlined/font-face/_mono.scss +0 -430
  103. package/scss/type/_inlined/font-face/_sans-condensed.scss +0 -302
  104. package/scss/type/_inlined/font-face/_sans.scss +0 -497
  105. package/scss/type/_inlined/font-face/_serif.scss +0 -430
  106. package/scss/type/_inlined/font-face/_settings.scss +0 -12
  107. package/scss/type/_prefix.scss +0 -11
  108. package/scss/type/_reset.scss +0 -90
  109. package/scss/type/_scale.scss +0 -59
  110. package/scss/type/_styles.import.scss +0 -766
  111. package/scss/type/_styles.scss +0 -924
  112. package/scss/type/font-face/_mono.scss +0 -430
  113. package/scss/type/font-face/_sans-condensed.scss +0 -302
  114. package/scss/type/font-face/_sans.scss +0 -497
  115. package/scss/type/font-face/_serif.scss +0 -430
  116. package/scss/type/font-face/_settings.scss +0 -12
  117. package/scss/type/index.scss +0 -8
  118. package/scss/type/modules/_classes.scss +0 -42
  119. package/scss/type/modules/_default-type.scss +0 -55
  120. package/scss/type/modules/_font-family.scss +0 -104
  121. package/scss/type/modules/_prefix.scss +0 -11
  122. package/scss/type/modules/_reset.scss +0 -44
  123. package/scss/type/modules/_scale.scss +0 -57
  124. package/scss/type/modules/_styles.scss +0 -876
  125. package/scss/type/type.scss +0 -8
  126. package/scss/type/vendor/@carbon/grid/12.scss +0 -41
  127. package/scss/type/vendor/@carbon/grid/_inlined/12.scss +0 -41
  128. package/scss/type/vendor/@carbon/grid/_inlined/_mixins.import.scss +0 -431
  129. package/scss/type/vendor/@carbon/grid/_inlined/_mixins.scss +0 -415
  130. package/scss/type/vendor/@carbon/grid/_inlined/_prefix.scss +0 -12
  131. package/scss/type/vendor/@carbon/grid/_mixins.import.scss +0 -431
  132. package/scss/type/vendor/@carbon/grid/_mixins.scss +0 -415
  133. package/scss/type/vendor/@carbon/grid/_prefix.scss +0 -12
  134. package/scss/type/vendor/@carbon/grid/grid.scss +0 -10
  135. package/scss/type/vendor/@carbon/grid/index.scss +0 -10
  136. package/scss/type/vendor/@carbon/grid/modules/_breakpoint.scss +0 -198
  137. package/scss/type/vendor/@carbon/grid/modules/_config.scss +0 -94
  138. package/scss/type/vendor/@carbon/grid/modules/_css-grid.scss +0 -470
  139. package/scss/type/vendor/@carbon/grid/modules/_flex-grid.scss +0 -363
  140. package/scss/type/vendor/@carbon/grid/modules/_mixins.scss +0 -336
  141. package/scss/type/vendor/@carbon/grid/vendor/@carbon/import-once/import-once.scss +0 -27
  142. package/scss/type/vendor/@carbon/grid/vendor/@carbon/import-once/index.scss +0 -8
  143. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_breakpoint.scss +0 -246
  144. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_convert.import.scss +0 -65
  145. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_convert.scss +0 -54
  146. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_key-height.import.scss +0 -117
  147. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_key-height.scss +0 -111
  148. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_mini-unit.scss +0 -23
  149. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_spacing.scss +0 -12
  150. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/_utilities.scss +0 -41
  151. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/generated/_container.scss +0 -73
  152. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/generated/_fluid-spacing.scss +0 -61
  153. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/generated/_icon-size.scss +0 -34
  154. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/generated/_layout.scss +0 -97
  155. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/generated/_size.scss +0 -17
  156. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/generated/_spacing.scss +0 -169
  157. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/index.scss +0 -8
  158. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/layout.scss +0 -12
  159. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/modules/_convert.scss +0 -51
  160. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/modules/_spacing.scss +0 -9
  161. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/modules/_utilities.scss +0 -41
  162. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss +0 -37
  163. package/scss/type/vendor/@carbon/grid/vendor/@carbon/layout/modules/generated/_spacing.scss +0 -91
  164. package/scss/type/vendor/@carbon/import-once/import-once.scss +0 -27
  165. package/scss/type/vendor/@carbon/import-once/index.scss +0 -8
@@ -1,27 +0,0 @@
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
- /// Used by `exports` mixin to track which modules have been imported
9
- /// @type Map
10
- /// @access public
11
- /// @group @carbon/import-once
12
- $imported-modules: () !default;
13
-
14
- /// Module export mixin that helps making sure a module is imported once and only once
15
- /// @access public
16
- /// @param {String} $name - Name of exported module
17
- /// @param {Bool} $warn [false] - Warn when a module has been already imported
18
- /// @content Declaration blocks to be imported
19
- /// @group @carbon/import-once
20
- @mixin exports($name, $warn: false) {
21
- @if not(index($imported-modules, $name)) {
22
- $imported-modules: append($imported-modules, $name) !global;
23
- @content;
24
- } @else if $warn == true {
25
- @warn 'Module `#{$name}` has already been imported.';
26
- }
27
- }
@@ -1,8 +0,0 @@
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
- @import 'import-once';
@@ -1,246 +0,0 @@
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
- // https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
9
- @import 'convert';
10
- @import 'utilities';
11
-
12
- /// Carbon gutter size in rem
13
- /// @type Number
14
- /// @access public
15
- /// @group @carbon/layout
16
- $carbon--grid-gutter: carbon--rem(32px);
17
-
18
- /// Carbon condensed gutter size in rem
19
- /// @type Number
20
- /// @access public
21
- /// @group @carbon/layout
22
- $carbon--grid-gutter--condensed: carbon--rem(1px);
23
-
24
- // Initial map of our breakpoints and their values
25
- /// @type Map
26
- /// @access public
27
- /// @group @carbon/layout
28
- $carbon--grid-breakpoints: (
29
- sm: (
30
- columns: 4,
31
- margin: 0,
32
- width: carbon--rem(320px),
33
- ),
34
- md: (
35
- columns: 8,
36
- margin: carbon--rem(16px),
37
- width: carbon--rem(672px),
38
- ),
39
- lg: (
40
- columns: 16,
41
- margin: carbon--rem(16px),
42
- width: carbon--rem(1056px),
43
- ),
44
- xlg: (
45
- columns: 16,
46
- margin: carbon--rem(16px),
47
- width: carbon--rem(1312px),
48
- ),
49
- max: (
50
- columns: 16,
51
- margin: carbon--rem(24px),
52
- width: carbon--rem(1584px),
53
- ),
54
- ) !default;
55
-
56
- /// Get the value of the next breakpoint, or null for the last breakpoint
57
- /// @param {String} $name - The name of the breakpoint
58
- /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
59
- /// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
60
- /// @return {String}
61
- /// @access public
62
- /// @group @carbon/layout
63
- @function carbon--breakpoint-next(
64
- $name,
65
- $breakpoints: $carbon--grid-breakpoints,
66
- $breakpoint-names: map-keys($breakpoints)
67
- ) {
68
- $n: index($breakpoint-names, $name);
69
- @if $n != null and $n < length($breakpoint-names) {
70
- @return nth($breakpoint-names, $n + 1);
71
- }
72
- @return null;
73
- }
74
-
75
- /// Get the value of the previous breakpoint, or null for the first breakpoint
76
- /// @param {String} $name - The name of the breakpoint
77
- /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
78
- /// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
79
- /// @return {String}
80
- /// @access public
81
- /// @group @carbon/layout
82
- @function carbon--breakpoint-prev(
83
- $name,
84
- $breakpoints: $carbon--grid-breakpoints,
85
- $breakpoint-names: map-keys($breakpoints)
86
- ) {
87
- $n: index($breakpoint-names, $name);
88
- @if $n != null and $n > 1 {
89
- @return nth($breakpoint-names, $n - 1);
90
- }
91
- @return null;
92
- }
93
-
94
- /// Check to see if the given breakpoint name
95
- /// @param {String} $name - The name of the breakpoint
96
- /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
97
- /// @return {Bool}
98
- /// @access public
99
- /// @group @carbon/layout
100
- @function carbon--is-smallest-breakpoint(
101
- $name,
102
- $breakpoints: $carbon--grid-breakpoints
103
- ) {
104
- @return index(map-keys($breakpoints), $name) == 1;
105
- }
106
-
107
- /// Returns the largest breakpoint name
108
- /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
109
- /// @return {String}
110
- /// @access public
111
- /// @group @carbon/layout
112
- @function carbon--largest-breakpoint-name(
113
- $breakpoints: $carbon--grid-breakpoints
114
- ) {
115
- $total-breakpoints: length($breakpoints);
116
- @return carbon--key-by-index($breakpoints, $total-breakpoints);
117
- }
118
-
119
- /// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`.
120
- /// @param {String} $name - The name of the breakpoint
121
- /// @return {String}
122
- /// @access public
123
- /// @group @carbon/layout
124
- @function carbon--breakpoint-infix($name) {
125
- @return '-#{$name}';
126
- }
127
-
128
- /// Generate a media query from the width of the given breakpoint to infinity
129
- /// @param {String | Number} $name
130
- /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
131
- /// @content
132
- /// @access public
133
- /// @group @carbon/layout
134
- @mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) {
135
- @if type-of($name) == 'number' {
136
- @media (min-width: $name) {
137
- @content;
138
- }
139
- } @else if map-has-key($breakpoints, $name) {
140
- $breakpoint: map-get($breakpoints, $name);
141
- $width: map-get($breakpoint, width);
142
- @if carbon--is-smallest-breakpoint($name, $breakpoints) {
143
- @content;
144
- } @else {
145
- @media (min-width: $width) {
146
- @content;
147
- }
148
- }
149
- } @else {
150
- @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
151
- }
152
- }
153
-
154
- /// Generate a media query for the maximum width of the given styles
155
- /// @param {String | Number} $name
156
- /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
157
- /// @content
158
- /// @access public
159
- /// @group @carbon/layout
160
- @mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) {
161
- @if type-of($name) == 'number' {
162
- @media (max-width: $name) {
163
- @content;
164
- }
165
- } @else if map-has-key($breakpoints, $name) {
166
- // We borrow this logic from bootstrap for specifying the value of the
167
- // max-width. The maximum width is calculated by finding the breakpoint and
168
- // subtracting .02 from its value. This value is used instead of .01 to
169
- // avoid rounding issues in Safari
170
- // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
171
- $breakpoint: map-get($breakpoints, $name);
172
- $width: map-get($breakpoint, width) - 0.02;
173
- @media (max-width: $width) {
174
- @content;
175
- }
176
- } @else {
177
- @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map-keys($breakpoints)})';
178
- }
179
- }
180
-
181
- /// Generate a media query for the range between the lower and upper breakpoints
182
- /// @param {String | Number} $lower
183
- /// @param {String | Number} $upper
184
- /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
185
- /// @content
186
- /// @access public
187
- /// @group @carbon/layout
188
- @mixin carbon--breakpoint-between(
189
- $lower,
190
- $upper,
191
- $breakpoints: $carbon--grid-breakpoints
192
- ) {
193
- $is-number-lower: type-of($lower) == 'number';
194
- $is-number-upper: type-of($upper) == 'number';
195
- $min: if($is-number-lower, $lower, map-get($breakpoints, $lower));
196
- $max: if($is-number-upper, $upper, map-get($breakpoints, $upper));
197
-
198
- @if $min and $max {
199
- $min-width: if(
200
- not $is-number-lower and $min,
201
- map-get($min, width) + 0.02,
202
- $min
203
- );
204
- $max-width: if(
205
- not $is-number-upper and $max,
206
- map-get($max, width) - 0.02,
207
- $max
208
- );
209
- @media (min-width: $min-width) and (max-width: $max-width) {
210
- @content;
211
- }
212
- } @else if $min != null and $max == null {
213
- @include carbon--breakpoint-up($lower) {
214
- @content;
215
- }
216
- } @else if $min == null and $max != null {
217
- @include carbon--breakpoint-down($upper) {
218
- @content;
219
- }
220
- } @else {
221
- @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).';
222
- }
223
- }
224
-
225
- /// Generate media query for the largest breakpoint
226
- /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
227
- /// @content
228
- /// @access public
229
- /// @group @carbon/layout
230
- @mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
231
- @include carbon--breakpoint(carbon--largest-breakpoint-name()) {
232
- @content;
233
- }
234
- }
235
-
236
- /// Generate a media query for a given breakpoint
237
- /// @param {String | Number} $name
238
- /// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
239
- /// @content
240
- /// @access public
241
- /// @group @carbon/layout
242
- @mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
243
- @include carbon--breakpoint-up($name, $breakpoints) {
244
- @content;
245
- }
246
- }
@@ -1,65 +0,0 @@
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
- // Compatibility notes (*.import.scss)
9
- // ------------------------------------------
10
- //
11
- // This file is intended to be consumed and processed with dart-sass.
12
- // It is incompatible with node-sass/libsass as it contains sass language features
13
- // or functions that are unavailable in node-sass/libsass, such as `math.div`.
14
- //
15
- // The non-`.import` suffixed version of this file eg. `_filename.scss`
16
- // is intended to be compatible with node-sass/libsass.
17
- //
18
- // Styles authored within this file must be duplicated to the corresponding
19
- // compatibility file to ensure we continue to support node-sass and dart-sass
20
- // in v10.
21
-
22
- @use 'sass:meta';
23
- @use 'sass:math';
24
-
25
- /// Default font size
26
- /// @type Number
27
- /// @access public
28
- /// @group @carbon/layout
29
- $carbon--base-font-size: 16px !default;
30
-
31
- /// Convert a given px unit to a rem unit
32
- /// @param {Number} $px - Number with px unit
33
- /// @return {Number} Number with rem unit
34
- /// @access public
35
- /// @group @carbon/layout
36
- @function carbon--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
- /// Convert a given px unit to a em unit
50
- /// @param {Number} $px - Number with px unit
51
- /// @return {Number} Number with em unit
52
- /// @access public
53
- /// @group @carbon/layout
54
- @function carbon--em($px) {
55
- @if unit($px) != 'px' {
56
- // TODO: update to @error in v11
57
- @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
58
- }
59
-
60
- @if meta.function-exists('div', 'math') {
61
- @return math.div($px, $carbon--base-font-size) * 1em;
62
- } @else {
63
- @return ($px / $carbon--base-font-size) * 1em;
64
- }
65
- }
@@ -1,54 +0,0 @@
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
- // Compatibility notes
9
- // ------------------------------------------
10
- //
11
- // This file is intended to be consumed and processed with node-sass/libsass.
12
- // Sass language features only available in dart-sass, such as `math.div`,
13
- // should not be used.
14
- //
15
- // The `.import` suffixed version of this file eg. `_filename.import.scss`
16
- // is intended to be compatible with dart-sass.
17
- //
18
- // Styles authored within this file must be duplicated to the corresponding
19
- // compatibility file to ensure we continue to support node-sass and dart-sass
20
- // in v10.
21
-
22
- /// Default font size
23
- /// @type Number
24
- /// @access public
25
- /// @group @carbon/layout
26
- $carbon--base-font-size: 16px !default;
27
-
28
- /// Convert a given px unit to a rem unit
29
- /// @param {Number} $px - Number with px unit
30
- /// @return {Number} Number with rem unit
31
- /// @access public
32
- /// @group @carbon/layout
33
- @function carbon--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
- /// Convert a given px unit to a em unit
43
- /// @param {Number} $px - Number with px unit
44
- /// @return {Number} Number with em unit
45
- /// @access public
46
- /// @group @carbon/layout
47
- @function carbon--em($px) {
48
- @if unit($px) != 'px' {
49
- // TODO: update to @error in v11
50
- @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
51
- }
52
-
53
- @return ($px / $carbon--base-font-size) * 1em;
54
- }
@@ -1,117 +0,0 @@
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
- // Compatibility notes (*.import.scss)
9
- // ------------------------------------------
10
- //
11
- // This file is intended to be consumed and processed with dart-sass.
12
- // It is incompatible with node-sass/libsass as it contains sass language features
13
- // or functions that are unavailable in node-sass/libsass, such as `math.div`.
14
- //
15
- // The non-`.import` suffixed version of this file eg. `_filename.scss`
16
- // is intended to be compatible with node-sass/libsass.
17
- //
18
- // Styles authored within this file must be duplicated to the corresponding
19
- // compatibility file to ensure we continue to support node-sass and dart-sass
20
- // in v10.
21
-
22
- @use 'sass:meta';
23
- @use "sass:math";
24
- @import 'breakpoint';
25
- @import 'utilities';
26
-
27
- /// Get the column width for a given breakpoint
28
- /// @param {String} $breakpoint
29
- /// @param {Map} $breakpoints [$carbon--grid-breakpoints]
30
- /// @return {Number} In rem
31
- /// @access public
32
- /// @group @carbon/layout
33
- @function carbon--get-column-width(
34
- $breakpoint,
35
- $breakpoints: $carbon--grid-breakpoints
36
- ) {
37
- @if map-has-key($breakpoints, $breakpoint) {
38
- $values: map-get($breakpoints, $breakpoint);
39
- $width: map-get($values, width);
40
- $margin: map-get($values, margin);
41
- $columns: map-get($values, columns);
42
-
43
- @if meta.function-exists('div', 'math') {
44
- @return math.div($width - (2 * $margin), $columns);
45
- } @else {
46
- @return (($width - (2 * $margin)) / $columns);
47
- }
48
- } @else {
49
- @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
50
- }
51
- }
52
-
53
- /// @type Map
54
- /// @access public
55
- /// @group @carbon/layout
56
- $carbon--key-height-scales: (
57
- sm: (
58
- carbon--get-column-width(sm),
59
- carbon--get-column-width(sm) * 2,
60
- carbon--get-column-width(sm) * 3,
61
- carbon--get-column-width(sm) * 4,
62
- carbon--get-column-width(sm) * 5,
63
- carbon--get-column-width(sm) * 6,
64
- ),
65
- md: (
66
- carbon--get-column-width(md),
67
- carbon--get-column-width(md) * 2,
68
- carbon--get-column-width(md) * 3,
69
- carbon--get-column-width(md) * 4,
70
- carbon--get-column-width(md) * 5,
71
- carbon--get-column-width(md) * 6,
72
- ),
73
- lg: (
74
- carbon--get-column-width(lg),
75
- carbon--get-column-width(lg) * 2,
76
- carbon--get-column-width(lg) * 3,
77
- carbon--get-column-width(lg) * 4,
78
- carbon--get-column-width(lg) * 5,
79
- carbon--get-column-width(lg) * 6,
80
- carbon--get-column-width(lg) * 7,
81
- carbon--get-column-width(lg) * 8,
82
- ),
83
- xlg: (
84
- carbon--get-column-width(xlg),
85
- carbon--get-column-width(xlg) * 2,
86
- carbon--get-column-width(xlg) * 3,
87
- carbon--get-column-width(xlg) * 4,
88
- carbon--get-column-width(xlg) * 5,
89
- carbon--get-column-width(xlg) * 6,
90
- carbon--get-column-width(xlg) * 7,
91
- carbon--get-column-width(xlg) * 8,
92
- ),
93
- max: (
94
- carbon--get-column-width(max),
95
- carbon--get-column-width(max) * 2,
96
- carbon--get-column-width(max) * 3,
97
- carbon--get-column-width(max) * 4,
98
- carbon--get-column-width(max) * 5,
99
- carbon--get-column-width(max) * 6,
100
- carbon--get-column-width(max) * 7,
101
- carbon--get-column-width(max) * 8,
102
- ),
103
- );
104
-
105
- /// Get the value of a key height step at a given breakpoint
106
- /// @param {String} $breakpoint
107
- /// @param {Number} $step
108
- /// @return {Number} In rem
109
- /// @access public
110
- /// @group @carbon/layout
111
- @function carbon--key-height($breakpoint, $step) {
112
- @if map-has-key($carbon--key-height-scales, $breakpoint) {
113
- @return nth(map-get($carbon--key-height-scales, $breakpoint), $step);
114
- } @else {
115
- @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
116
- }
117
- }
@@ -1,111 +0,0 @@
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
- // Compatibility notes
9
- // ------------------------------------------
10
- //
11
- // This file is intended to be consumed and processed with node-sass/libsass.
12
- // Sass language features only available in dart-sass, such as `math.div`,
13
- // should not be used.
14
- //
15
- // The `.import` suffixed version of this file eg. `_filename.import.scss`
16
- // is intended to be compatible with dart-sass.
17
- //
18
- // Styles authored within this file must be duplicated to the corresponding
19
- // compatibility file to ensure we continue to support node-sass and dart-sass
20
- // in v10.
21
-
22
- @import 'breakpoint';
23
- @import 'utilities';
24
-
25
- /// Get the column width for a given breakpoint
26
- /// @param {String} $breakpoint
27
- /// @param {Map} $breakpoints [$carbon--grid-breakpoints]
28
- /// @return {Number} In rem
29
- /// @access public
30
- /// @group @carbon/layout
31
- @function carbon--get-column-width(
32
- $breakpoint,
33
- $breakpoints: $carbon--grid-breakpoints
34
- ) {
35
- @if map-has-key($breakpoints, $breakpoint) {
36
- $values: map-get($breakpoints, $breakpoint);
37
- $width: map-get($values, width);
38
- $margin: map-get($values, margin);
39
- $columns: map-get($values, columns);
40
-
41
- @return ($width - (2 * $margin)) / $columns;
42
- } @else {
43
- @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
44
- }
45
- }
46
-
47
- /// @type Map
48
- /// @access public
49
- /// @group @carbon/layout
50
- $carbon--key-height-scales: (
51
- sm: (
52
- carbon--get-column-width(sm),
53
- carbon--get-column-width(sm) * 2,
54
- carbon--get-column-width(sm) * 3,
55
- carbon--get-column-width(sm) * 4,
56
- carbon--get-column-width(sm) * 5,
57
- carbon--get-column-width(sm) * 6,
58
- ),
59
- md: (
60
- carbon--get-column-width(md),
61
- carbon--get-column-width(md) * 2,
62
- carbon--get-column-width(md) * 3,
63
- carbon--get-column-width(md) * 4,
64
- carbon--get-column-width(md) * 5,
65
- carbon--get-column-width(md) * 6,
66
- ),
67
- lg: (
68
- carbon--get-column-width(lg),
69
- carbon--get-column-width(lg) * 2,
70
- carbon--get-column-width(lg) * 3,
71
- carbon--get-column-width(lg) * 4,
72
- carbon--get-column-width(lg) * 5,
73
- carbon--get-column-width(lg) * 6,
74
- carbon--get-column-width(lg) * 7,
75
- carbon--get-column-width(lg) * 8,
76
- ),
77
- xlg: (
78
- carbon--get-column-width(xlg),
79
- carbon--get-column-width(xlg) * 2,
80
- carbon--get-column-width(xlg) * 3,
81
- carbon--get-column-width(xlg) * 4,
82
- carbon--get-column-width(xlg) * 5,
83
- carbon--get-column-width(xlg) * 6,
84
- carbon--get-column-width(xlg) * 7,
85
- carbon--get-column-width(xlg) * 8,
86
- ),
87
- max: (
88
- carbon--get-column-width(max),
89
- carbon--get-column-width(max) * 2,
90
- carbon--get-column-width(max) * 3,
91
- carbon--get-column-width(max) * 4,
92
- carbon--get-column-width(max) * 5,
93
- carbon--get-column-width(max) * 6,
94
- carbon--get-column-width(max) * 7,
95
- carbon--get-column-width(max) * 8,
96
- ),
97
- );
98
-
99
- /// Get the value of a key height step at a given breakpoint
100
- /// @param {String} $breakpoint
101
- /// @param {Number} $step
102
- /// @return {Number} In rem
103
- /// @access public
104
- /// @group @carbon/layout
105
- @function carbon--key-height($breakpoint, $step) {
106
- @if map-has-key($carbon--key-height-scales, $breakpoint) {
107
- @return nth(map-get($carbon--key-height-scales, $breakpoint), $step);
108
- } @else {
109
- @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
110
- }
111
- }
@@ -1,23 +0,0 @@
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
- @import 'convert';
9
-
10
- /// Default mini-unit value
11
- /// @type Number
12
- /// @access public
13
- /// @group @carbon/layout
14
- $carbon--mini-unit-size: 8px !default;
15
-
16
- /// Get the value of the corresponding number of units
17
- /// @param {Number} $count - The number of units to get the value for
18
- /// @return {Number} In rem units
19
- /// @access public
20
- /// @group @carbon/layout
21
- @function carbon--mini-units($count) {
22
- @return carbon--rem($carbon--mini-unit-size * $count);
23
- }
@@ -1,12 +0,0 @@
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
- @import './generated/spacing';
9
- @import './generated/layout';
10
- @import './generated/fluid-spacing';
11
- @import './generated/container';
12
- @import './generated/icon-size';