Skip to content

Commit 009bb31

Browse files
janhasselkodiakhq[bot]
janhassel
and
kodiakhq[bot]
authored
fix(contextual-layout-tokens): support individual component style imports (#13984)
* fix(contextual-layout-tokens): emit layout tokens if utilities are used * fix: add contained-list styles to build files * fix(contained-list): improve isolated rendering * fix(button): add fallback to type token used in layout calc * chore: update build files snapshot --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent dab66af commit 009bb31

12 files changed

Lines changed: 119 additions & 30 deletions

File tree

‎packages/carbon-components-react/scss/components/contained-list/_contained-list.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by carbon-components-react. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2023
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/contained-list/contained-list';

‎packages/carbon-components-react/scss/components/contained-list/_index.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by carbon-components-react. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2023
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/contained-list';

‎packages/carbon-components/scss/components/contained-list/_contained-list.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by carbon-components. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2023
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/contained-list/contained-list';

‎packages/carbon-components/scss/components/contained-list/_index.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by carbon-components. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2023
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/contained-list';

‎packages/react/scss/components/contained-list/_contained-list.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by @carbon/react. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2023
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/contained-list/contained-list';

‎packages/react/scss/components/contained-list/_index.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Code generated by @carbon/react. DO NOT EDIT.
2+
//
3+
// Copyright IBM Corp. 2018, 2023
4+
//
5+
// This source code is licensed under the Apache-2.0 license found in the
6+
// LICENSE file in the root directory of this source tree.
7+
//
8+
9+
@forward '@carbon/styles/scss/components/contained-list';

‎packages/styles/__tests__/__snapshots__/styles-test.js.snap‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,16 @@ Array [
157157
"importPath": "@carbon/styles/scss/components/combo-box",
158158
"relativePath": "scss/components/combo-box",
159159
},
160+
Object {
161+
"filepath": "scss/components/contained-list/_contained-list.scss",
162+
"importPath": "@carbon/styles/scss/components/contained-list/contained-list",
163+
"relativePath": "scss/components/contained-list/contained-list",
164+
},
165+
Object {
166+
"filepath": "scss/components/contained-list/_index.scss",
167+
"importPath": "@carbon/styles/scss/components/contained-list",
168+
"relativePath": "scss/components/contained-list",
169+
},
160170
Object {
161171
"filepath": "scss/components/content-switcher/_content-switcher.scss",
162172
"importPath": "@carbon/styles/scss/components/content-switcher/content-switcher",

‎packages/styles/files.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ const files = [
5050
'scss/components/code-snippet/_index.scss',
5151
'scss/components/combo-box/_combo-box.scss',
5252
'scss/components/combo-box/_index.scss',
53+
'scss/components/contained-list/_contained-list.scss',
54+
'scss/components/contained-list/_index.scss',
5355
'scss/components/content-switcher/_content-switcher.scss',
5456
'scss/components/content-switcher/_index.scss',
5557
'scss/components/copy-button/_copy-button.scss',

‎packages/styles/scss/_layout.scss‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,29 @@
1111
@use './config' as *;
1212
@use './utilities/custom-property';
1313
@use './utilities/convert' as *;
14-
@use './utilities/layout' as *;
14+
@use './spacing' as *;
15+
16+
$layout-tokens: (
17+
size: (
18+
height: (
19+
xs: rem(24px),
20+
sm: rem(32px),
21+
md: rem(40px),
22+
lg: rem(48px),
23+
xl: rem(64px),
24+
2xl: rem(80px),
25+
),
26+
),
27+
density: (
28+
padding-inline: (
29+
condensed: $spacing-03,
30+
normal: $spacing-05,
31+
),
32+
),
33+
);
1534

1635
:root {
17-
@each $group, $properties in $tokens {
36+
@each $group, $properties in $layout-tokens {
1837
@each $property, $steps in $properties {
1938
@each $step, $value in $steps {
2039
@include custom-property.declaration(
@@ -39,7 +58,7 @@
3958
}
4059
}
4160

42-
@each $group, $properties in $tokens {
61+
@each $group, $properties in $layout-tokens {
4362
@each $property, $steps in $properties {
4463
@each $step, $value in $steps {
4564
.#{$prefix}--layout--#{$group}-#{$step} {

‎packages/styles/scss/components/button/_mixins.scss‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
// LICENSE file in the root directory of this source tree.
66
//
77

8+
@use 'sass:map';
9+
810
@use 'vars' as *;
911
@use '../../config' as *;
1012
@use '../../motion' as *;
@@ -21,10 +23,16 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
2123

2224
@mixin button-base {
2325
// https://caniuse.com/mdn-css_types_length_lh
24-
--temp-1lh: (var(--#{$prefix}-body-compact-01-line-height) * 1em);
26+
--temp-1lh: (
27+
#{custom-property.get-var(
28+
'body-compact-01-line-height',
29+
map.get($body-compact-01, line-height)
30+
)} * 1em
31+
);
2532
// -1px to compensate for border width
2633
--temp-padding-block-max: calc(
27-
(var(--#{$prefix}-layout-size-height-lg) - var(--temp-1lh)) / 2 - #{rem(1px)}
34+
(#{custom-property.get-var('layout-size-height-lg')} - var(--temp-1lh)) / 2 -
35+
#{rem(1px)}
2836
);
2937

3038
@include component-reset.reset;

0 commit comments

Comments
 (0)