Skip to content

Commit

Permalink
fix(storybook): incorrect use of theme mixin (#12145)
Browse files Browse the repository at this point in the history
### Related Ticket(s)

No ticket. Just quick clean up that I couldn't unsee.

### Description

The use of the `theme.theme` mixin from the `@carbon/styles` package (which is forwarded from `@carbon/themes`) was incorrect. The [second argument is meant to be a map of component tokens](https://github.com/carbon-design-system/carbon/blob/main/packages/themes/scss/_theme.scss#L28). We [already add the set of component tokens we want as includes](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/.storybook/container.scss#L20-L22), and therefore don't need the second argument at all. As it was it produced a `--cds-true:;` CSS variable that was useless in the compiled CSS:

![image](https://github.com/user-attachments/assets/72f0342c-b10a-42f5-a183-019d6964a059)


### Changelog

**Changed**

- Fixed incorrect use of `theme.theme` mixin from `@carbon/styles` package

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
  • Loading branch information
m4olivei authored Dec 4, 2024
1 parent cffa91a commit 96d66e5
Showing 1 changed file with 8 additions and 9 deletions.
17 changes: 8 additions & 9 deletions packages/web-components/.storybook/container.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
//
// @license
//
// Copyright IBM Corp. 2020, 2021
// Copyright IBM Corp. 2020, 2024
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
Expand All @@ -25,28 +25,28 @@
@include grid.flex-grid();

:root {
@include theme($white, true);
@include theme($white);

height: 100%;
block-size: 100%;
}

:root[storybook-carbon-theme='g10'] {
@include theme($g10, true);
@include theme($g10);
}

:root[storybook-carbon-theme='g90'] {
@include theme($g90, true);
@include theme($g90);
}

:root[storybook-carbon-theme='g100'] {
@include theme($g100, true);
@include theme($g100);
}

body {
// `@include css-body` has `font-family: inherit` via `@include type-style('body-short-01')`,
// which kills `font-family` from `@include carbon--type-reset`
color: $text-primary;
background-color: $background;
color: $text-primary;
line-height: 1;
}

Expand All @@ -71,6 +71,5 @@ html {
}

.c4d-story-padding {
padding-top: $spacing-05;
padding-bottom: $spacing-05;
padding-block: $spacing-05;
}

0 comments on commit 96d66e5

Please sign in to comment.