-
Notifications
You must be signed in to change notification settings - Fork 94
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2025 from spryker/docs/HRZ-2165-design-tokens
docs: Oryx design tokens
- Loading branch information
Showing
9 changed files
with
151 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 49 additions & 0 deletions
49
docs/scos/dev/front-end-development/202212.0/oryx/styling/oryx-design-tokens.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
--- | ||
title: "Oryx: Design tokens" | ||
description: Design tokens provide a centralized and consistent approach for styling components in Oryx applications. | ||
last_updated: July 24, 2023 | ||
template: concept-topic-template | ||
--- | ||
|
||
Design tokens provide a powerful system for achieving consistent and customizable styles throughout an Oryx application. They are extensively used inside the [color system](/docs/scos/dev/front-end-development/{{page.version}}/oryx/styling/oryx-color-system.html), typography, icons, and many more. Ensuring a clean separation between styles and components, design tokens make it easier to manage and maintain the application's design system. This document focuses on the structure and usage of design tokens in Oryx. | ||
|
||
## CSS variables | ||
|
||
Design tokens are provided as CSS variables in the application code. The variables follow a structured naming convention to ensure consistency. To avoid naming conflicts with third-party variables, they are prefixed with `oryx` and are written in kebab-case. | ||
|
||
The variables are written in the root element of the application, the `oryx-app` component by default. The variables are inherited by all descendants of the root component. This makes it convenient to access the variables throughout the entire application. At the same time, they can be overridden at any element in the application. | ||
|
||
If you like to reuse the variables outside the root element of the application, or if you are not using the `oryx-app` as the root, you can bootstrap the application using an alternative root: | ||
|
||
```ts | ||
import { appBuilder } from "@spryker-oryx/core"; | ||
|
||
appBuilder().withAppOptions({ components: { root: "body" } }); | ||
``` | ||
|
||
## Usage of design tokens | ||
|
||
Design tokens are used extensively throughout Oryx components to achieve a consistent and cohesive visual experience. Instead of hardcoding style values directly in component CSS, design tokens are used as CSS variables to define the styles. This way, you can easily change the visual appearance of the entire application by adjusting the corresponding design token values. | ||
|
||
The following example shows how to avoid hardcoded style values by using design tokens: | ||
|
||
```css | ||
.button { | ||
background-color: var(--oryx-color-primary-9); | ||
font-size: var(--oryx-typography-h1-size); | ||
} | ||
``` | ||
|
||
The CSS variables are inherited throughout all descendants, but you can override the value anywhere in the DOM tree. The following example shows how to override a design token anywhere in the DOM. | ||
|
||
```html | ||
<div style="--oryx-color-primary-9: red"> | ||
<button>Primary 9 color has become red</button> | ||
</div> | ||
``` | ||
|
||
## Themes | ||
|
||
Design tokens are organized in themes. The Oryx [preset package](/docs/scos/dev/front-end-development/{{page.version}}/oryx/oryx-presets.html) provides standard themes to get you started. You can use a standard theme, customize a standard theme, or create your own. | ||
|
||
<!-- TODO: add a note link to the theme docs once its ready --> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.