Skip to content

Commit

Permalink
chore: format
Browse files Browse the repository at this point in the history
  • Loading branch information
alisonjoseph committed Oct 9, 2023
1 parent 7281453 commit 08d0025
Show file tree
Hide file tree
Showing 9 changed files with 47 additions and 73 deletions.
4 changes: 1 addition & 3 deletions src/components/ColorPalette/ColorPalette.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,7 @@
}

.palette-switcher
:global(
.cds--content-switcher-btn:not(.cds--content-switcher--selected):hover
) {
:global(.cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) {
background-color: $hover-ui;
}

Expand Down
1 change: 0 additions & 1 deletion src/pages/components/menu-buttons/code.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@ description: add
tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---


TODO
14 changes: 7 additions & 7 deletions src/pages/components/menu/code.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Menu
description: add
tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---

TODO
---
title: Menu
description: add
tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---

TODO
4 changes: 1 addition & 3 deletions src/pages/guidelines/motion/code.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,7 @@ You can configure parts of the `@carbon/motion` package with Sass Modules. For
example, you can change the `$prefix` used by writing the following:

```scss
@use '@carbon/motion' with (
$prefix: 'custom-prefix'
);
@use '@carbon/motion' with ($prefix: 'custom-prefix');
```

For a full list of options that you can configure, check out the table below.
Expand Down
4 changes: 1 addition & 3 deletions src/pages/guidelines/spacing/code.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,7 @@ Sass Modules. For example, you can change the `$base-font-size` by writing the
following:

```scss
@use '@carbon/layout' with (
$base-font-size: 18px
);
@use '@carbon/layout' with ($base-font-size: 18px);
```

## Resources
Expand Down
17 changes: 8 additions & 9 deletions src/pages/guidelines/themes/code.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,7 @@ example:

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

Inline theming of theme switching can be done by using the mixin. For example:
Expand Down Expand Up @@ -93,12 +91,13 @@ Themes can also be extended with your own custom tokens:

```scss
@use '@carbon/themes/scss/themes';
@use '@carbon/themes' with (
$fallback: themes.$g100,
$theme: (
token-01: #000000,
)
);
@use '@carbon/themes' with
(
$fallback: themes.$g100,
$theme: (
token-01: #000000,
)
);
```

### JavaScript
Expand Down
19 changes: 9 additions & 10 deletions src/pages/guidelines/themes/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,7 @@ configure the sass module using `with`.

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

## Customizing a theme
Expand All @@ -68,13 +66,14 @@ using `with` which can replace the values of the default theme or add new custom
tokens as well.

```scss
@use '@carbon/react/scss/theme' with (
$theme: (
background: #e2e2e2,
text-primary: #ffffff,
custom-token-01: #000000,
)
);
@use '@carbon/react/scss/theme' with
(
$theme: (
background: #e2e2e2,
text-primary: #ffffff,
custom-token-01: #000000,
)
);
```

## Tokens
Expand Down
29 changes: 13 additions & 16 deletions src/pages/migrating/faq.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -170,20 +170,20 @@ like so:
@use '@carbon/react/scss/themes' as *;

//overriding theme tokens and adding a custom token
@use '@carbon/react/scss/theme' with (
$theme: (
// add a completely new token
custom-token: #bada44,
// redefine existing tokens to new values
text-error: rebeccapurple,
focus: pink,
)
);
@use '@carbon/react/scss/theme' with
(
$theme: (
// add a completely new token
custom-token: #bada44,
// redefine existing tokens to new values
text-error: rebeccapurple,
focus: pink,
)
);

// override a component token
@use '@carbon/react/scss/components/button/tokens' as button-tokens with (
$button-primary: #3f51b5
);
@use '@carbon/react/scss/components/button/tokens' as button-tokens with
($button-primary: #3f51b5);
@use '@carbon/react';

:root {
Expand Down Expand Up @@ -268,10 +268,7 @@ If you were providing any configuration options before you imported Carbon you
can now provide them using the `with` syntax:

```scss
@use '@carbon/react' with (
$css--default-type: true,
$css--reset: true
);
@use '@carbon/react' with ($css--default-type: true, $css--reset: true);
```

If you were using any feature flags in v10, you can safely remove them in v11.
Expand Down
28 changes: 7 additions & 21 deletions src/pages/migrating/guide/develop.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -199,10 +199,7 @@ If you were providing any configuration options before you imported Carbon you
can now provide them using the `with` syntax:

```scss
@use '@carbon/react' with (
$css--default-type: true,
$css--reset: true
);
@use '@carbon/react' with ($css--default-type: true, $css--reset: true);
```

If you were using any feature flags in v10, you can safely remove them in v11.
Expand All @@ -216,10 +213,8 @@ For cases where your projects does't need to include everything via
```scss
// Configure feature flags if needed, if not these
// lines can be removed
@use '@carbon/react/scss/config' with (
$font-path: '@ibm/plex',
$use-flexbox-grid: 'true'
);
@use '@carbon/react/scss/config' with
($font-path: '@ibm/plex', $use-flexbox-grid: 'true');

// Emit the css reset
@use '@carbon/react/scss/reset';
Expand Down Expand Up @@ -833,20 +828,15 @@ If you were providing any configuration options before you imported Carbon you
can now provide them using the `with` syntax:

```scss
@use '@carbon/styles' with (
$css--default-type: true,
$css--reset: true
);
@use '@carbon/styles' with ($css--default-type: true, $css--reset: true);
```

For cases where your projects does't need to include everything via
`@use '@carbon/styles'`; and just want to do individual component styles.

```scss
// configure feature flags if needed, if not this line can be removed
@use '@carbon/styles/scss/config' with (
$font-path: '@ibm/plex'
);
@use '@carbon/styles/scss/config' with ($font-path: '@ibm/plex');

// ensure the css reset is included
@use '@carbon/styles/scss/reset';
Expand Down Expand Up @@ -925,13 +915,9 @@ Carbon's configuration to use `bx` as the prefix by writing the following:

```scss
// Option A
@use '@carbon/styles' with (
$prefix: 'bx'
);
@use '@carbon/styles' with ($prefix: 'bx');
// Option B
@use '@carbon/styles/scss/config' with (
$prefix: 'bx'
);
@use '@carbon/styles/scss/config' with ($prefix: 'bx');
```

### Step 5: Enable flexbox grid
Expand Down

0 comments on commit 08d0025

Please sign in to comment.