Skip to content

Commit

Permalink
v11[style]: add layer annotation (#2662)
Browse files Browse the repository at this point in the history 
* v11[style]: add layer annotation

* Update style.mdx

* Update style.mdx

* remaining components updated

* Update style.mdx
  • Loading branch information
@aagonzales
aagonzales authored Dec 8, 2021
1 parent 2ba0a00 commit 1a13ebd
Show file tree
Hide file tree
Showing 19 changed files with 309 additions and 216 deletions.
102 changes: 57 additions & 45 deletions src/pages/components/code-snippet/style.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,17 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Single line

| Class | Property | Color token |
| ---------------------- | ---------------- | --------------- |
| `.bx--snippet` | background | `$field` |
| `.bx--snippet` | text color | `$text-primary` |
| `.bx--snippet__icon` | svg | `$icon-primary` |
| `.bx--copy-btn:hover` | background-color | `$layer-hover` |
| `.bx--copy-btn:focus` | border | `$focus` |
| `.bx--copy-btn:active` | background-color | `$layer-active` |
| Element | Property | Color token |
| --------------- | --------------------------------------------------------------------- | --------------- |
| Container | background | `$field` \* |
| Code | text color | `$text-primary` |
| Copy button | See [ghost button - icon only](/components/button/style#ghost-button) | |
| Container:focus | border | `$focus` |

<Caption>
* Denotes a contextual color token that will change values based on the layer
it is placed on.
</Caption>

<Row>
<Column colLg={8}>
Expand All @@ -31,14 +34,18 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Multi-line

| Class | Property | Color token |
| ------------------------------------------------------ | ---------------- | --------------- |
| `.bx--snippet` | background | `$layer` |
| `.bx--snippet` | text color | `$text-primary` |
| `.bx--snippet__icon` | svg | `$icon-primary` |
| `.bx--copy-btn:hover` <br/> `.bx--snippet-btn:hover` | background-color | `$layer-hover` |
| `.bx--copy-btn:focus` <br/> `.bx--snippet-btn:focus` | border | `$focus` |
| `.bx--copy-btn:active` <br/> `.bx--snippet-btn:active` | background-color | `$layer-active` |
| Element | Property | Color token |
| -------------------------------- | --------------------------------------------------------------------- | --------------- |
| Container | background | `$layer` \* |
| Code | text color | `$text-primary` |
| Icon | svg | `$icon-primary` |
| Copy button <br/> Snippet button | See [ghost button - icon only](/components/button/style#ghost-button) | |
| Container:focus | border | `$focus` |

<Caption>
* Denotes a contextual color token that will change values based on the layer
it is placed on.
</Caption>

<Row>
<Column colLg={8}>
Expand All @@ -64,13 +71,18 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Inline snippet

| Class | Property | Color token |
| ----------------------------- | ---------------- | --------------- |
| `.bx--snippet--inline` | background-color | `$layer` |
| `.bx--snippet--inline` | color | `$text-primary` |
| `.bx--snippet--inline:hover` | background-color | `$layer-hover` |
| `.bx--snippet--inline:focus` | focus | `$focus` |
| `.bx--snippet--inline:active` | background-color | `$layer-active` |
| Element | Property | Color token |
| ---------------- | ---------------- | ------------------ |
| Container | background-color | `$layer` \* |
| Code | text color | `$text-primary` |
| Container:hover | background-color | `$layer-hover` \* |
| Container:focus | focus | `$focus` |
| Container:active | background-color | `$layer-active` \* |

<Caption>
* Denotes a contextual color token that will change values based on the layer
it is placed on.
</Caption>

<Row>
<Column colLg={8}>
Expand All @@ -97,12 +109,12 @@ Carbon has defined a set of accessible syntax colors. View an incontext

### Single line

| Class | Property | px / rem | Spacing token |
| ---------------------- | ------------- | -------- | ------------- |
| `.bx--snippet--single` | height | 40 / 3 | – |
| `.bx--snippet--single` | max-width | 768 / 48 | – |
| `.bx--snippet--single` | padding-right | 48 / 3 | `$spacing-09` |
| `.bx--snippet--single` | padding-left | 16 / 1 | `$spacing-05` |
| Element | Property | px / rem | Spacing token |
| --------- | ------------- | -------- | ------------- |
| Container | height | 40 / 3 | – |
| | max-width | 768 / 48 | – |
| | padding-right | 48 / 3 | `$spacing-09` |
| | padding-left | 16 / 1 | `$spacing-05` |

<div className="image--fixed">

Expand All @@ -116,16 +128,16 @@ Carbon has defined a set of accessible syntax colors. View an incontext

### Multi-line code snippet

| Class | Property | px / rem | Spacing token |
| ------------------------ | ------------- | ----------------------- | ------------- |
| `.bx--snippet--multi` | min-height | 288 / 18 | – |
| `.bx--snippet--multi` | max-height | Varies based on content | – |
| `.bx--snippet--multi` | max-width | 768 / 48 | – |
| `.bx--snippet` | padding | 16 / 1 | `$spacing-05` |
| `.bx--snippet-container` | padding-right | 40 / 2.5 | `$spacing-08` |
| `.bx--snippet__icon` | height, width | 16px | – |
| `.bx--snippet-button` | height, width | 40 / 2.5 | – |
| `.bx--copy-button` | height, width | 32 / 2 | – |
| Element | Property | px / rem | Spacing token |
| -------------- | ------------- | ----------------------- | ------------- |
| Container | min-height | 288 / 18 | – |
| | max-height | Varies based on content | – |
| | max-width | 768 / 48 | – |
| | padding | 16 / 1 | `$spacing-05` |
| | padding-right | 40 / 2.5 | `$spacing-08` |
| Icon | height, width | 16px | – |
| Snippet button | height, width | 40 / 2.5 | – |
| Copy button | height, width | 32 / 2 | – |

<div className="image--fixed">

Expand All @@ -139,12 +151,12 @@ Carbon has defined a set of accessible syntax colors. View an incontext

### Inline code snippet

| Class | Property | px / rem | Spacing token |
| --------------------------- | --------------------------- | ----------------------- | ------------- |
| `.bx--snippet--inline` | height | 16 / 1 | – |
| `.bx--snippet--inline` | width | Varies based on content | – |
| `.bx--snippet--inline` | border-radius | 2 | - |
| `.bx--snippet--inline code` | padding-right, padding-left | 8 / 0.5 | \$spacing-03 |
| Element | Property | px / rem | Spacing token |
| --------- | --------------------------- | ----------------------- | ------------- |
| Container | height | 16 / 1 | – |
| | width | Varies based on content | – |
| | border-radius | 2 | - |
| Code | padding-right, padding-left | 8 / 0.5 | `$spacing-03` |

<div className="image--fixed">

Expand Down
76 changes: 48 additions & 28 deletions src/pages/components/data-table/style.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,15 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

| Element | Property | Color token |
| ------------ | ---------------- | ----------------- |
| Table header | background-color | `$layer` |
| Table header | background-color | `$layer` \* |
| Title | text-color | `$text-primary` |
| Description | text-color | `$text-secondary` |

<Caption>
* Denotes a contextual color token that will change values based on the layer
it is placed on.
</Caption>

<Row>
<Column colLg={8}>

Expand All @@ -26,15 +31,20 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Column header

| State | Property | Color token |
| ------- | ---------------- | ---------------------- |
| Enabled | background-color | `$layer-accent` |
| | text-color | `$text-primary` |
| | svg | `$icon-primary` |
| Hover | background-color | `$layer-accent-hover` |
| | text-color | `$text-primary` |
| Focus | border | `$focus` |
| Active | background-color | `$layer-accent-active` |
| State | Property | Color token |
| ------- | ---------------- | ------------------------- |
| Enabled | background-color | `$layer-accent` \* |
| | text-color | `$text-primary` |
| | svg | `$icon-primary` |
| Hover | background-color | `$layer-accent-hover` \* |
| | text-color | `$text-primary` |
| Focus | border | `$focus` |
| Active | background-color | `$layer-accent-active` \* |

<Caption>
* Denotes a contextual color token that will change values based on the layer
it is placed on.
</Caption>

<Row>
<Column colLg={8}>
Expand All @@ -46,23 +56,28 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Row

| State | Property | Color token |
| ---------------- | ---------------- | ------------------------- |
| Enabled | background-color | `$layer` |
| | text-color | `$text-secondary` |
| | border-bottom | `$border-subtle` |
| | svg | `$icon-secondary` |
| Hover | background-color | `$layer-hover` |
| | text-color | `$text-primary` |
| Focus | border | `$focus` |
| Selected | background-color | `$layer-selected` |
| | text-color | `$text-primary` |
| | border-bottom | `$border-subtle-selected` |
| | svg | `$icon-primary` |
| Selected + hover | background-color | `$layer-selected-hover` |
| Expanded | background-color | `$layer` |
| | svg | `$icon-primary` |
| Zebra | background-color | `$layer-accent` |
| State | Property | Color token |
| ---------------- | ---------------- | --------------------------- |
| Enabled | background-color | `$layer` \* |
| | text-color | `$text-secondary` |
| | border-bottom | `$border-subtle` \* |
| | svg | `$icon-secondary` |
| Hover | background-color | `$layer-hover` \* |
| | text-color | `$text-primary` |
| Focus | border | `$focus` |
| Selected | background-color | `$layer-selected` \* |
| | text-color | `$text-primary` |
| | border-bottom | `$border-subtle-selected`\* |
| | svg | `$icon-primary` |
| Selected + hover | background-color | `$layer-selected-hover` \* |
| Expanded | background-color | `$layer` \* |
| | svg | `$icon-primary` |
| Zebra | background-color | `$layer-accent` \* |

<Caption>
* Denotes a contextual color token that will change values based on the layer
it is placed on.
</Caption>

<Row>
<Column colLg={8}>
Expand All @@ -76,10 +91,15 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

| Element | Property | Color token |
| ----------- | ------------------------------------------------------------------------------------------- | ----------- |
| Toolbar | background-color | `$layer` |
| Toolbar | background-color | `$layer` \* |
| Icon button | See [ghost button](https://carbondesignsystem.com/components/button/style#ghost-button) | |
| Button | See [primary button](https://carbondesignsystem.com/components/button/style#primary-button) | |

<Caption>
* Denotes a contextual color token that will change values based on the layer
it is placed on.
</Caption>

<Row>
<Column colLg={8}>

Expand Down
39 changes: 20 additions & 19 deletions src/pages/components/date-picker/style.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,19 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Date input

| Element | Property | Color token |
| ------------------ | ---------------- | ----------------- |
| Label | text-color | `$text-secondary` |
| Field | background-color | `$field` |
| | border-bottom | `$border-strong` |
| Field text | text-color | `$text-primary` |
| Field text: prompt | text-color | `$text-helper` |
| Calendar icon | svg | `$icon-primary` |
| Element | Property | Color token |
| ------------------ | ---------------- | ------------------- |
| Label | text-color | `$text-secondary` |
| Field | background-color | `$field` \* |
| | border-bottom | `$border-strong` \* |
| Field text | text-color | `$text-primary` |
| Field text: prompt | text-color | `$text-helper` |
| Calendar icon | svg | `$icon-primary` |

<Caption>
* Denotes a contextual color token that will change values based on the layer
it is placed on.
</Caption>

<br />

Expand Down Expand Up @@ -49,24 +54,15 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

<Caption>Examples of date picker input states</Caption>

**Active:** Placeholder text should remain when the user clicks into the text
input and gets a cursor. Once the user starts typing the hint text is replaced
with the user input text.

**Error:** Error messages appear below the input field and are always present
while invalid.

**Disabled:** Disabled state should have a `.not-allowed` cursor on hover.

### Calendar menu

| Element | Property | Color token |
| ------------------- | ---------------- | -------------------------------- |
| Calendar | background-color | `$layer` |
| Calendar | background-color | `$layer` \* |
| Calendar menu | box-shadow | `0 2px 6px 0 rgba(0, 0, 0, 0.2)` |
| Today | text-color | `$link-01` |
| Day | text-color | `$text-primary` |
| Day: hover | background-color | `$layer-hover` |
| Day: hover | background-color | `$layer-hover` \* |
| Day: focus | border | `$focus` |
| Day: selected | text-color | `$text-on-color` |
| | background-color | `$background-brand` |
Expand All @@ -77,6 +73,11 @@ while invalid.
| | border | `$focus` |
| Day: next month day | text-color | `$text-secondary` |

<Caption>
* Denotes a contextual color token that will change values based on the layer
it is placed on.
</Caption>

<Row>
<Column colLg={12}>

Expand Down
Loading

0 comments on commit 1a13ebd

Please sign in to comment.