new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

IBM Carbon · all subjects

themes

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Theme definition and purpose

Themes are used to customize component styles to fit the specific aesthetic of a brand or product. A theme is a collection of visual attributes assigned to tokens in order to create a specific aesthetic.

Token definition and role

A token is a role-based identifier that assigns a value to a theme. Tokens are universal and never change across themes. A role is the systematic usage of a token, and roles cannot be changed between themes. A value is the actual style, such as a hex code, assigned to a token.

Default theme in Carbon

Carbon provides four themes: White, Gray 10, Gray 90, and Gray 100. When @carbon/react is downloaded and installed, the components are preset to use the White theme as the default.

Configure non-White default theme

To use Gray 10, Gray 90, or Gray 100 as the default theme instead of White, configure the sass module using 'with'. Example: @use '@carbon/react/scss/themes'; @use '@carbon/react/scss/theme' with ($theme: themes.$g100;);

Custom theme configuration

The default theme acts as a starting point. Developers can define custom themes by altering one, some, or all default token values. Custom values are configured by using the sass 'with' configuration, which can replace default theme values or add new custom tokens. Example: @use '@carbon/react/scss/theme' with ($theme: (background: #e2e2e2, text-primary: #ffffff, custom-token-01: #000000,););

Token prefix notation

Tokens are denoted by the prefix $ (for example, $layer-01). Tokens can be nested within other tokens. For example, $interactive calls the IBM Design Language color palette token $blue-60 for its value in the default theme.

Token categories

There are several token categories: Color, Spacing, Typography, and Global. Color tokens assign universal color variables determined by common roles and usage. Spacing tokens are used when building individual components and include small increments for spatial relationships. Typography tokens have four categories of type styles (universal, productive, editorial, and additional) that can be customized through tokens. Global tokens are component-specific variables that control general styling of components, such as layer usage or border width.

Token system-wide application

With tokens, code only needs to be changed in one place to see the effect system-wide. All tokens come pre-baked into the Carbon component source code. Tokens are used across all components and help keep global patterns and styles consistent.

Theme example tokens and values

The following tokens show the relationship between themes. Each theme shares the same variables and roles, with only the value changing: $text-secondary (Label color: Gray 70 in White theme, Gray 30 in Gray 100 theme); $text-primary (Primary text color: Gray 100 in White theme, Gray 10 in Gray 100 theme); $border-strong (Border bottom color: Gray 50 in White theme, Gray 60 in Gray 100 theme); $icon-primary (Primary icon color: Gray 100 in White theme, Gray 10 in Gray 100 theme); $field-01 (Field color: Gray 10 in White theme, Gray 90 in Gray 100 theme); $background (Page background: White in White theme, Gray 100 in Gray 100 theme).

Give your agent this brain