Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(Theme): update Theme docs with new guidance/usage #2998

Merged
merged 15 commits into from
Sep 26, 2022
Merged

docs(Theme): update Theme docs with new guidance/usage #2998

Changes from 2 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
aae04d8
docs(Theme): update Theme docs with new guidance/usage
dakahn Jun 16, 2022
24a787c
Merge branch 'main' into update-themes-docs
dakahn Jun 16, 2022
45fbcdd
Update src/pages/guidelines/themes/code.mdx
dakahn Jul 1, 2022
6734a5b
Update src/pages/guidelines/themes/code.mdx
dakahn Jul 1, 2022
dc12777
Merge branch 'main' into update-themes-docs
dakahn Jul 1, 2022
249dbce
docs(Themes): update docs with PR changes
dakahn Jul 1, 2022
fafeedd
Merge branch 'main' into update-themes-docs
dakahn Jul 14, 2022
bbc6519
chore(number-input): run prettier
dakahn Jul 15, 2022
7a5fca4
Merge branch 'main' into update-themes-docs
dakahn Sep 8, 2022
86da6c1
Merge branch 'main' into update-themes-docs
tay1orjones Sep 21, 2022
e290180
docs(theme): update theme docs for v11
tay1orjones Sep 21, 2022
4fce4f7
docs(themes): update overview page for v11
tay1orjones Sep 21, 2022
babc0db
docs(theme): update overview page, remove tokens
tay1orjones Sep 21, 2022
34dc05f
docs(theme): rephrase notification for elements packages
tay1orjones Sep 23, 2022
53869bf
Merge branch 'main' into update-themes-docs
kodiakhq[bot] Sep 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 26 additions & 11 deletions src/pages/guidelines/themes/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,7 @@ building.

<AnchorLinks>

<AnchorLink>Get started</AnchorLink>
<AnchorLink>Usage</AnchorLink>
<AnchorLink>Get started</AnchorLink> <AnchorLink>Usage</AnchorLink>
<AnchorLink>Resources</AnchorLink>

</AnchorLinks>
Expand All @@ -49,10 +48,18 @@ yarn add @carbon/themes

## Usage

You can use `@carbon/themes` in JavaScript or Sass by including this package in
your project. By default, `@carbon/themes` provides a set of color tokens that
are pre-defined for a specific theme. Currently, we offer the following color
themes: white, gray 10, gray 90, gray 100 .
There are three ways to utilize Carbon Themes. First, and maybe the simplest way
is to bring in our
[`<Theme>`](https://react.carbondesignsystem.com/?path=/story/components-theme--default)
component and pass your desired theme as a prop. Second, if you need more
dakahn marked this conversation as resolved.
Show resolved Hide resolved
granular control of what gets themed and when and you're using `@carbon/styles`
or `@carbon/react` you already have access to sass theming with no need for an
extra package. Thirdly, can use `@carbon/themes` in JavaScript or Sass by
dakahn marked this conversation as resolved.
Show resolved Hide resolved
including this package in your project.

By default, `@carbon/themes` provides a set of color tokens that are pre-defined
for a specific theme. Currently, we offer the following color themes: white,
gray 10, gray 90, gray 100 .

You can preview all of the token values for this on the
[Carbon Design System website](https://www.carbondesignsystem.com/guidelines/color/usage)
dakahn marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -64,14 +71,14 @@ 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 calling our mixin. For example:

```scss
@import '@carbon/themes/scss/themes';
@use '@carbon/themes/scss/themes';

// Use the gray 10 theme
@include theme($theme--g10);
Expand All @@ -87,7 +94,7 @@ Alternatively, you can set the global theme variable then call the mixin without
passing in a theme name.

```scss
@import '@carbon/themes/scss/themes';
@use '@carbon/themes/scss/themes';

$theme: $theme--g10;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This usage is outdated, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it? I thought that's how you accessed the theming tokens, but I'd bet i'm definitely wrong

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i thought that was how we still brought in themes for custom work? but I could just be doing it wrong


Expand All @@ -98,7 +105,7 @@ $theme: $theme--g10;
Inline theming can be done by using the mixin. For example:

```scss
@import '@carbon/themes/scss/themes';
@use '@carbon/themes/scss/themes';

// Use the default white theme here

Expand All @@ -115,6 +122,14 @@ Inline theming can be done by using the mixin. For example:
}
```

Themes can be configured by accessing the tokens in the import statement. For
example:

```scss
@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme' with ($theme: themes.$g100);
```

### JavaScript

If you're looking to use these themes in JavaScript, we export a variety of
Expand Down Expand Up @@ -143,7 +158,7 @@ import {
<Column colMd={4} colLg={4} noGutterSm>
<ResourceCard
subTitle="Carbon theme package"
href="https://github.com/carbon-design-system/carbon/blob/v10/packages/themes"
href="https://github.com/carbon-design-system/carbon/tree/main/packages/themes"
>

<MdxIcon name="bee" />
Expand Down