Skip to content

Commit

Permalink
docs: fix broken links on migration and color pages (#4389)
Browse files Browse the repository at this point in the history 
* update migration guide design.mdx

* update color overview.mdx

* update color usage.mdx

* update

* update
  • Loading branch information
@laurenmrice
laurenmrice authored Dec 11, 2024
1 parent 8134039 commit 6e14eb1
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 25 deletions.
9 changes: 4 additions & 5 deletions src/pages/elements/color/overview.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ dark components to light backgrounds. This technique is useful to focus
attention or create visual tension. Some high contrast moments are baked into
the themes by using the `inverse` tokens, like the tooltip component. Other
times high contrast moments can be achieved through applying
[inline theming](/guidelines/color/usage#inline-theming) for instances like a
[inline theming](/elements/color/usage/#inline-theming) for instances like a
dark UI Shell Header with a light theme page.

<DoDontRow>
Expand Down Expand Up @@ -320,8 +320,7 @@ the assigned value will change with the theme. For example, under the hood
the `$text-secondary` token can dynamically map to `Gray 70` or `Gray 30`
depending on the theme.

See the [tokens](/guidelines/color/tokens) tab for the full list of color
tokens.
See the [Tokens](/elements/color/tokens/) tab for the full list of color tokens.

### Token names

Expand Down Expand Up @@ -360,7 +359,7 @@ and `$interactive`.

Some core tokens are part of an additional token group called _layering tokens_.
These tokens are used to implement the layering model onto components. For more
information, see the [usage tab](/guidelines/color/usage#layering-tokens).
information, see the [Usage](/elements/color/usage/) tab.

| Token group | Applied to |
| ----------- | ----------------------------------------------------------------------------------- |
Expand All @@ -383,7 +382,7 @@ Some components have their own specific color tokens, known as _component
tokens_. They represent the properties associated with a particular component.
They are not global tokens like the core tokens and should never be used for
anything other than their own component. For a full list for component tokens
see the [tokens](/guidelines/color/tokens)tab.
see the [Tokens](/elements/color/tokens/) tab.

To see how the tokens are applied in the components themselves, visit the
component’s style page.
Expand Down
15 changes: 8 additions & 7 deletions src/pages/elements/color/usage.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ needs.
## Implementing layering

There are two ways to implement the
[layering model](/guidelines/color/overview#layering-model) in a theme, either
by using explicit tokens or contextual tokens. These techniques can be used
[layering model](/elements/color/usage/#layering-tokens) in a theme, either by
using explicit tokens or contextual tokens. These techniques can be used
independently in a product or can be used together. Both methods produce the
same visual result, the difference lays in how you develop with them. Designers
only need to be concerned with the layering tokens.
Expand Down Expand Up @@ -83,7 +83,7 @@ color (excluding interaction colors) is another layer and will require the use
of a different set of layering tokens.

For more information about how color token migration works, see the
[migration guide](/migrating/guide/design#color-tokens).
[migration guide](/migrating/guide/design/).

#### Layer sets

Expand All @@ -104,7 +104,7 @@ pair with its same number, for example `$field-03` pairs with

Not all color tokens are part of a layer set. Some tokens groups, like `text`
and `icon`, work across layers. For a list of the layering tokens, see the color
[usage tab](/guidelines/color/usage).
[Tokens](/elements/color/tokens/#layer) tab.

<Row>
<Column colLg={8}>
Expand Down Expand Up @@ -570,7 +570,7 @@ Mixing themes inline is still allowed with light or dark mode. Mixing inline
theme contrast between elements in different modes is also allowed. It is very
common for products to have side panels or UI shell elements be high contrast in
light mode but low contrast in dark mode. These relationships can be mapped in
code using the the
code using the
[theme component](https://react.carbondesignsystem.com/?path=/docs/components-theme--default).
Note that smaller components built with an inverse tokens (like tooltip) should
remain high contrast when switching modes.
Expand Down Expand Up @@ -600,8 +600,9 @@ images for modes is to use transparent backgrounds.
<InlineNotification>

**Additional guidance:** Checkout some helpful PAL guidance around how to
properly treat illustrations, images, and pictograms in light or dark mode on
[IBM Cloud PAL](https://pages.github.ibm.com/ibmcloud/pal/dark-mode-guidelines/designers/#illustrations-in-dark-mode),
properly treat some components, iconography, and illustrations in light or dark
mode on
[Carbon for Cloud](https://pages.github.ibm.com/ibmcloud/design-operations/carbon-for-cloud/developing/dark-mode-guidelines/theming),
_for IBMers only_.

</InlineNotification>
Expand Down
25 changes: 12 additions & 13 deletions src/pages/migrating/guide/design.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ accessibility, collaboration, and efficiency for users.

| Design tool | v11 | Migration strategy |
| -------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Figma](/designing/kits/figma) | Update available | The v11 Figma update is available as a new library with all themes in one file. See the [Design Kit Figma tab](https://carbondesignsystem.com/designing/kits/figma/) for more information. Teams need to swap out assets from v10 to v11 assets to migrate. The v10 Figma files will not receive continuous updates and will remain permanently on v10. |
| [Figma](/designing/kits/figma) | Update available | The v11 Figma update is available as a new library with all themes in one file. See the [Design Kit Figma](https://carbondesignsystem.com/designing/kits/figma/) tab for more information. Teams need to swap out assets from v10 to v11 assets to migrate. The v10 Figma files will not receive continuous updates and will remain permanently on v10. |
| [Sketch](/designing/kits/sketch) | Update available | The same Sketch Cloud libraries that were used in v10 have been updated to include the v11 changes. Do not accept the library update until you are ready to work in v11. There are new [v10](https://v10.carbondesignsystem.com/designing/kits/sketch#get-the-kit) libraries available for teams that still need them. Note that Sketch kits will not be prioritized or maintained in the future. |
| [Adobe XD](https://github.com/IBM/design-kit/tree/master/Adobe%20XD) | Partial update available | Some of the v11 changes have been made in the XD files, available in GitHub. Note that Adobe XD kits will no longer be prioritized or maintained. |

Expand Down Expand Up @@ -77,8 +77,8 @@ buttons. Actionable notifications can be styled like an inline or toast
notification.

See Carbon's
[actionable notification](/components/notification/usage/#actionable-notifications)
usage guidance for more information.
[actionable notification](/components/notification/usage/#actionable) usage
guidance for more information.

<Row>

Expand Down Expand Up @@ -146,7 +146,8 @@ modifiers—tabs with icons, icon-only tabs, and secondary labels. Additionally,
there is a new third alignment option for tab that allows for auto-widths where
each tab size is determined by the label length.

See Carbon's [tab](/components/tabs/usage/) usage guidance for more information.
See Carbon's [tabs](/components/tabs/usage/) usage guidance for more
information.

<Row>
<Column colLg={8}>
Expand Down Expand Up @@ -191,8 +192,8 @@ work as a unified collection in v11. As a result of this convergence, type token
names have been renamed to better define their relationship to one another and
reflect its styling.

See Carbon's [typography](/guidelines/typography/styling-strategies) guidance
for more information.
See Carbon's [typography](/elements/typography/style-strategies/) guidance for
more information.

### Compact styles

Expand Down Expand Up @@ -257,7 +258,7 @@ adjective descriptor in place of the number ending to help users better
understand how a token should be used. The new naming convention is as follows:
`[element] - [role] - [order] - [state]`

See Carbon's [color overview](/guidelines/color/overview/) guidance for more
See Carbon's [color overview](/elements/color/overview/) guidance for more
information.

<Row>
Expand All @@ -281,8 +282,7 @@ developer concern. **In Sketch, and other design tools, designer will only use
the layering tokens to design.** The layering tokens replace what were the `ui`
color tokens in v10 and are used in a similar way.

See Carbon's [color implementation](/guidelines/color/implementation) guidance
for more information.
See Carbon's [color usage](/elements/color/usage) guidance for more information.

<Row>
<Column colLg={12}>
Expand Down Expand Up @@ -319,8 +319,8 @@ allows themes to be nested within each other without needing custom styles or
overrides. In product, a common use-case for inline theming is applying a
contrasting theme to a UI shell and side panels.

See Carbon's [inline theming](/guidelines/color/implementation#inline-theming)
guidance for more information.
See Carbon's [inline theming](/elements/color/usage/#inline-theming) guidance
for more information.

<Row>
<Column colLg={8}>
Expand All @@ -337,8 +337,7 @@ the end user to choose a UI that is either predominately light or dark in color.
The UI will automatically switch from using light color backgrounds with dark
color text to using dark color backgrounds with light color text.

See Carbon's
[light or dark mode](/guidelines/color/implementation#light-or-dark-mode)
See Carbon's [light or dark mode](/elements/color/usage/#light-or-dark-mode)
guidance for more information.

<Row>
Expand Down

0 comments on commit 6e14eb1

Please sign in to comment.