From c6a3ae28a040d4637115c30822f1970a9ef459a0 Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" Date: Thu, 16 Jun 2022 18:09:37 -0500 Subject: [PATCH 1/5] docs(Theme): update @carbon/Theme README --- packages/themes/README.md | 31 ++++++++++--------------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/packages/themes/README.md b/packages/themes/README.md index dc5fe148ad0c..2bd13413a889 100644 --- a/packages/themes/README.md +++ b/packages/themes/README.md @@ -35,39 +35,28 @@ 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 the default white theme here +@use @carbon/themes'; .my-dark-theme { - @include carbon--theme($carbon--theme--g90) { - // Use the dark theme here - } -} - -.my-darker-theme { - @include carbon--theme($carbon--theme--g100) { - // Use the darker theme here - } + @include themes.theme(); + // Use the theme here } ``` From fd282a06f082216badea7af679250c8db1be30d5 Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" Date: Thu, 16 Jun 2022 18:14:43 -0500 Subject: [PATCH 2/5] docs(Theme): update inline theming --- packages/themes/README.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/themes/README.md b/packages/themes/README.md index 2bd13413a889..8a70dfa4d7d6 100644 --- a/packages/themes/README.md +++ b/packages/themes/README.md @@ -52,11 +52,20 @@ For example: Inline theming can be done by using the mixin. For example: ```scss -@use @carbon/themes'; +@use '@carbon/themes/scss/themes'; + +// Use the default white theme here .my-dark-theme { - @include themes.theme(); - // Use the theme here + @include theme($theme--g90) { + // Use the dark theme here + } +} + +.my-darker-theme { + @include theme($theme--g100) { + // Use the darker theme here + } } ``` From 64e95f78f1cf0c0075e742f3f31b127eeb7d9328 Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" <40970507+dakahn@users.noreply.github.com> Date: Thu, 30 Jun 2022 19:15:43 -0500 Subject: [PATCH 3/5] Update packages/themes/README.md Co-authored-by: Josh Black --- packages/themes/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/themes/README.md b/packages/themes/README.md index 8a70dfa4d7d6..cc8bc47d18d5 100644 --- a/packages/themes/README.md +++ b/packages/themes/README.md @@ -53,6 +53,7 @@ Inline theming can be done by using the mixin. For example: ```scss @use '@carbon/themes/scss/themes'; +@use '@carbon/themes/scss/theme'; // Use the default white theme here From 2838436e32853b444b3ad152127b2f4eef2bd569 Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" <40970507+dakahn@users.noreply.github.com> Date: Thu, 30 Jun 2022 19:15:48 -0500 Subject: [PATCH 4/5] Update packages/themes/README.md Co-authored-by: Josh Black --- packages/themes/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/themes/README.md b/packages/themes/README.md index cc8bc47d18d5..b2535c440d35 100644 --- a/packages/themes/README.md +++ b/packages/themes/README.md @@ -58,7 +58,7 @@ Inline theming can be done by using the mixin. For example: // Use the default white theme here .my-dark-theme { - @include theme($theme--g90) { + @include theme.theme(themes.$g90) { // Use the dark theme here } } From c0e92145b0df98d9cb131b6eb8ee1a3ad0aae881 Mon Sep 17 00:00:00 2001 From: "D.A. Kahn" <40970507+dakahn@users.noreply.github.com> Date: Thu, 30 Jun 2022 19:15:53 -0500 Subject: [PATCH 5/5] Update packages/themes/README.md Co-authored-by: Josh Black --- packages/themes/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/themes/README.md b/packages/themes/README.md index b2535c440d35..cc3a375c4575 100644 --- a/packages/themes/README.md +++ b/packages/themes/README.md @@ -64,7 +64,7 @@ Inline theming can be done by using the mixin. For example: } .my-darker-theme { - @include theme($theme--g100) { + @include theme.theme(themes.$g100) { // Use the darker theme here } }