From 32f168b28c4bb7b7c83717fd1bef1932130de8ba Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" <40970507+dakahn@users.noreply.github.com> Date: Tue, 5 Jul 2022 14:20:31 -0500 Subject: [PATCH] docs(Theme): update @carbon/Theme README (#11635) * docs(Theme): update @carbon/Theme README * docs(Theme): update inline theming * Update packages/themes/README.md Co-authored-by: Josh Black * Update packages/themes/README.md Co-authored-by: Josh Black * Update packages/themes/README.md Co-authored-by: Josh Black Co-authored-by: Alessandra Davila Co-authored-by: Josh Black Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- packages/themes/README.md | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/themes/README.md b/packages/themes/README.md index dc5fe148ad0c..cc3a375c4575 100644 --- a/packages/themes/README.md +++ b/packages/themes/README.md @@ -35,37 +35,36 @@ If your project is using Sass, you can include this package and the corresponding default theme by writing the following in your Sass file: ```scss -@import '@carbon/themes/scss/themes'; +@use '@carbon/themes/scss/themes'; ``` By default, the white theme will be initialized. If you would like to include -another theme, you can do so by setting the global theme variable and then -calling our mixin. For example: +another theme, you can do so by setting the global theme variable in the import. +For example: ```scss -@import '@carbon/themes/scss/themes'; - -$carbon--theme: $carbon--theme--g10; - -// Use the gray 10 theme -@include carbon--theme(); +@use '@carbon/themes/scss/themes' as *; +@use '@carbon/themes' with ( + $theme: $g100 +); ``` Inline theming can be done by using the mixin. For example: ```scss -@import '@carbon/themes/scss/themes'; +@use '@carbon/themes/scss/themes'; +@use '@carbon/themes/scss/theme'; // Use the default white theme here .my-dark-theme { - @include carbon--theme($carbon--theme--g90) { + @include theme.theme(themes.$g90) { // Use the dark theme here } } .my-darker-theme { - @include carbon--theme($carbon--theme--g100) { + @include theme.theme(themes.$g100) { // Use the darker theme here } }