Skip to content

Commit

Permalink
Introduce color collections for generative styling of components
Browse files Browse the repository at this point in the history
  • Loading branch information
adamkudrna committed Aug 31, 2024
1 parent 02a83f7 commit 8c4c9ce
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 17 deletions.
1 change: 1 addition & 0 deletions mkdocs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ nav:
- 'Browsers & Devices': 'docs/getting-started/browsers-and-devices.md'
- Foundation:
- 'Design Tokens': 'docs/foundation/design-tokens.md'
- 'Collections': 'docs/foundation/collections.md'
- 'Colors': 'docs/foundation/colors.md'
- 'Typography': 'docs/foundation/typography.md'
- 'Spacing': 'docs/foundation/spacing.md'
Expand Down
24 changes: 24 additions & 0 deletions src/docs/foundation/collections.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Collections

Collections are lists of available values that can be used to customize the
appearance of components, such as colors, sizes, and placement. Collections are
used to ensure consistency across the design system.

## General Guidelines

- If an option from a collection is used in a component, all other options from
the same collection must be available for use in that component too.
- Components can support one or more collections from a collection category.
Refer to the documentation for each component to see which collections are
available.

## Colors

The following color names are designed for use in components that support the
`color` prop:

| Collection | Available values |
|------------|--------------------------------------------------------|
| Action | `primary`, `secondary`, `selected` |
| Feedback | `success`, `warning`, `danger`, `info`, `help`, `note` |
| Neutral | `light`, `dark` |
20 changes: 8 additions & 12 deletions src/docs/foundation/colors.md
Original file line number Diff line number Diff line change
Expand Up @@ -227,23 +227,17 @@ primary border.

## Applying Colors

Components can apply colors above using one or more following color groups.
Components can apply colors above using one or more following approaches.

### Component Colors
### Color Collections

Some components ([Alert](/components/Alert), [Badge](/components/Badge),
[Button](/components/Button), and more) come in more color variants to help you
better reflect their place in content hierarchy or the meaning of their content.
Following colors are available in such cases:

- **action colors (actionable components only):** `primary`, `secondary`, and
`selected`,
- **feedback colors:** `success`, `warning`, `danger`, `help`, `info`, and
`note`,
- **neutral colors:** `light` and `dark`.

There is always a reasonable default for the component in question that can be
changed to any of supported values above through the `color` prop.
In such cases, one or more [Color Collections][collection-colors] are always
used. There is always a reasonable default color for the component in question
that can be changed to any of supported collection values through the `color`
prop.

### Validation States

Expand All @@ -258,3 +252,5 @@ apply selected [feedback colors](#feedback-colors) for individual states:

Validation state is always optional. Default styling is applied for the given
component when its `validationState` prop is not specified.

[collection-colors]: /docs/foundation/collections#colors
8 changes: 3 additions & 5 deletions src/docs/foundation/design-tokens.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@ organizations.
design system needs. React UI uses CSS custom properties as a primary storage
format for design tokens.

## Design Token Types

### Global Tokens
## Global Tokens

Global tokens represent the basic, context-agnostic values in your design
language. They define color palettes, typography scales, or spacing values,
Expand All @@ -24,7 +22,7 @@ without binding them to any semantic meaning.
}
```

### Semantic Tokens
## Semantic Tokens

Semantic tokens define roles and decisions that give the design system its
character. They communicate the intended purpose of a global token and are often
Expand All @@ -36,7 +34,7 @@ reused by component tokens.
}
```

### Component Tokens
## Component Tokens

Component tokens represent the values associated with a component. They often
inherit from semantic tokens, but are named in a way that narrows down their
Expand Down
9 changes: 9 additions & 0 deletions src/styles/settings/_collections.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
$action-colors: primary, secondary, selected;
$feedback-colors: success, warning, danger, info, help, note;
$neutral-colors: light, dark;

$colors: (
action: $action-colors,
feedback: $feedback-colors,
neutral: $neutral-colors,
);

0 comments on commit 8c4c9ce

Please sign in to comment.