Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: format
Browse files Browse the repository at this point in the history
emyarod committed May 21, 2021
1 parent 005e51b commit 877dbe1
Showing 8 changed files with 140 additions and 137 deletions.
160 changes: 80 additions & 80 deletions src/pages/components/button/style.mdx
Original file line number Diff line number Diff line change
@@ -10,18 +10,18 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Primary button

| Class | Property | Color token |
| ------------------- | ---------------- | ----------------- |
| `.bx--btn--primary` | text color | `$text-on-color` |
| `.bx--btn__icon` | svg | `$icon-on-color` |
| `.bx--btn--primary` | background-color | `$button-primary` |
| `:hover` | background-color | `$button-primary-hover` |
| `:active` | background-color | `$button-primary-active` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled`|
| `:disabled` | text color | `$text-on-color-disabled`|
| `:disabled` | svg | `$icon-on-color-disabled`|
| Class | Property | Color token |
| ------------------- | ---------------- | ------------------------- |
| `.bx--btn--primary` | text color | `$text-on-color` |
| `.bx--btn__icon` | svg | `$icon-on-color` |
| `.bx--btn--primary` | background-color | `$button-primary` |
| `:hover` | background-color | `$button-primary-hover` |
| `:active` | background-color | `$button-primary-active` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |

<Row>
<Column colLg={8}>
@@ -33,17 +33,17 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Secondary button

| Class | Property | Color token |
| --------------------- | ---------------- | ------------------- |
| `.bx--btn--secondary` | text color | `$text-on-color` |
| `.bx--btn__icon` | svg | `$icon-on-color` |
| `.bx--btn--secondary` | background-color | `$button-secondary` |
| `.bx--btn--secondary` | border | `$button-secondary` |
| Class | Property | Color token |
| --------------------- | ---------------- | -------------------------- |
| `.bx--btn--secondary` | text color | `$text-on-color` |
| `.bx--btn__icon` | svg | `$icon-on-color` |
| `.bx--btn--secondary` | background-color | `$button-secondary` |
| `.bx--btn--secondary` | border | `$button-secondary` |
| `:hover` | background-color | `$button-secondary-hover` |
| `:active` | background-color | `$button-secondary-active` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |

@@ -57,23 +57,23 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Tertiary button

| Class | Property | Color token |
| -------------------- | ---------------- | ------------------ |
| `.bx--btn--tertiary` | text color | `$button-tertiary` |
| `.bx--btn__icon` | svg | `$button-tertiary` |
| `.bx--btn--tertiary` | background-color | `transparent` |
| `.bx--btn--tertiary` | border | `$button-tertiary` |
| `:hover` | text color | `$text-on-color` |
| `:hover` | svg | `$icon-on-color` |
| Class | Property | Color token |
| -------------------- | ---------------- | ------------------------- |
| `.bx--btn--tertiary` | text color | `$button-tertiary` |
| `.bx--btn__icon` | svg | `$button-tertiary` |
| `.bx--btn--tertiary` | background-color | `transparent` |
| `.bx--btn--tertiary` | border | `$button-tertiary` |
| `:hover` | text color | `$text-on-color` |
| `:hover` | svg | `$icon-on-color` |
| `:hover` | background-color | `$button-tertiary-hover` |
| `:active` | background-color | `$button-tertiary-active` |
| `:focus` | background-color | `$button-tertiary-hover` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background | `transparent` |
| `:disabled` | border | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background | `transparent` |
| `:disabled` | border | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |

<Row>
<Column colLg={8}>
@@ -92,10 +92,10 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
| `.bx--btn--ghost` | background-color ||
| `:hover` | text color | `$link-primary-hover` |
| `:hover` | svg | `$link-primary-hover` |
| `:hover` | background-color | `$background-hover` |
| `:hover` | background-color | `$background-hover` |
| `:active` | background-color | `$background-active` |
| `:focus` | border | `$focus` |
| `:disabled` | text color | `$text-disabled` |
| `:disabled` | text color | `$text-disabled` |
| `:disabled` | svg | `$icon-disabled` |

<Row>
@@ -108,18 +108,18 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Primary danger button

| Class | Property | Color token |
| --------------------------- | ---------------- | ---------------- |
| `.bx--btn--danger--primary` | text color | `$text-on-color` |
| `.bx--btn__icon` | svg | `$icon-on-color` |
| `.bx--btn--danger--primary` | background-color | `$button-danger-primary` |
| `:hover` | background-color | `$button-danger-hover` |
| `:active` | background-color | `$button-danger-active` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |
| Class | Property | Color token |
| --------------------------- | ---------------- | ------------------------- |
| `.bx--btn--danger--primary` | text color | `$text-on-color` |
| `.bx--btn__icon` | svg | `$icon-on-color` |
| `.bx--btn--danger--primary` | background-color | `$button-danger-primary` |
| `:hover` | background-color | `$button-danger-hover` |
| `:active` | background-color | `$button-danger-active` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |

<Row>
<Column colLg={8}>
@@ -131,22 +131,22 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Tertiary danger button

| Class | Property | Color token |
| ---------------------------- | ---------------- | ---------------- |
| `.bx--btn--danger--tertiary` | text color | `$button-danger-secondary` |
| `.bx--btn__icon` | svg | `$button-danger-secondary` |
| `.bx--btn--danger--tertiary` | border | `$button-danger-secondary` |
| `:hover` | background-color | `$button-danger-hover` |
| `:hover` | text color | `$text-on-color` |
| `:hover` | svg | `$icon-on-color` |
| `:active` | background-color | `$button-danger-active` |
| `:active` | text color | `$text-on-color` |
| `:active` | svg | `$icon-on-color` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |
| Class | Property | Color token |
| ---------------------------- | ---------------- | -------------------------- |
| `.bx--btn--danger--tertiary` | text color | `$button-danger-secondary` |
| `.bx--btn__icon` | svg | `$button-danger-secondary` |
| `.bx--btn--danger--tertiary` | border | `$button-danger-secondary` |
| `:hover` | background-color | `$button-danger-hover` |
| `:hover` | text color | `$text-on-color` |
| `:hover` | svg | `$icon-on-color` |
| `:active` | background-color | `$button-danger-active` |
| `:active` | text color | `$text-on-color` |
| `:active` | svg | `$icon-on-color` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |

<Row>
<Column colLg={8}>
@@ -158,21 +158,21 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Ghost danger button

| Class | Property | Color token |
| ------------------------- | ---------------- | ---------------- |
| `.bx--btn--danger--ghost` | text color | `$button-danger-secondary` |
| `.bx--btn__icon` | svg | `$button-danger-secondary` |
| `:hover` | background-color | `$button-danger-hover` |
| `:hover` | text color | `$text-on-color` |
| `:hover` | svg | `$icon-on-color` |
| `:active` | background-color | `$button-danger-active` |
| `:active` | text color | `$text-on-color` |
| `:active` | svg | `$icon-on-color` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |
| Class | Property | Color token |
| ------------------------- | ---------------- | -------------------------- |
| `.bx--btn--danger--ghost` | text color | `$button-danger-secondary` |
| `.bx--btn__icon` | svg | `$button-danger-secondary` |
| `:hover` | background-color | `$button-danger-hover` |
| `:hover` | text color | `$text-on-color` |
| `:hover` | svg | `$icon-on-color` |
| `:active` | background-color | `$button-danger-active` |
| `:active` | text color | `$text-on-color` |
| `:active` | svg | `$icon-on-color` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |

<Row>
<Column colLg={8}>
49 changes: 23 additions & 26 deletions src/pages/components/code-snippet/style.mdx
Original file line number Diff line number Diff line change
@@ -10,15 +10,14 @@ 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` |

| 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` |

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

### Multi-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` <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` |

| Class | Property | Color token |
| ------------------------------------------------------ | ---------------- | --------------- |
| `.bx--snippet` | background | `$field` |
| `.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` |

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

### Inline snippet

| Class | Property | Color token |
| ------------------------------------------------ | ---------------- | ------------------ |
| `.bx--snippet--inline` | background-color | `$field` |
| `.bx--snippet--inline` | color | `$text-primary` |
| `.bx--snippet--inline:hover` | background-color | `$field-hover` |
| `.bx--snippet--inline:focus` | focus | `$focus` |
| `.bx--snippet--inline:active` | background-color | `$layer-active` |

| Class | Property | Color token |
| ----------------------------- | ---------------- | --------------- |
| `.bx--snippet--inline` | background-color | `$field` |
| `.bx--snippet--inline` | color | `$text-primary` |
| `.bx--snippet--inline:hover` | background-color | `$field-hover` |
| `.bx--snippet--inline:focus` | focus | `$focus` |
| `.bx--snippet--inline:active` | background-color | `$layer-active` |

<Row>
<Column colLg={8}>
16 changes: 9 additions & 7 deletions src/pages/components/data-table/style.mdx
Original file line number Diff line number Diff line change
@@ -116,7 +116,9 @@ columns. Tables require three or more columns.

### Rows

Row sizes are customizable. The column header row should always match the row size of the table. Tall row heights are only recommended if your data is expected to have 2 lines of content in a single row.
Row sizes are customizable. The column header row should always match the row
size of the table. Tall row heights are only recommended if your data is
expected to have 2 lines of content in a single row.

| Element | Property | Size | px / rem |
| ------- | -------- | ------- | -------- |
@@ -162,12 +164,12 @@ batch actions, overall table menu, and/or table filter.
The default 48px toolbar is paired with the tall and default row sizes. The
small toolbar is paired with the short and compact row sizes.

| Element | Property | px / rem | Spacing token |
| ---------------------------- | ------------------------- | -------- | ------------- |
| Toolbar: large | height, width | 48 / 3 ||
| | margin-top, margin-bottom | 16 / 1 | `$spacing-05` |
| Toolbar: small | height, width | 32 / 2 ||
| | margin-top, margin-bottom | 8 / 0.5 | `$spacing-03` |
| Element | Property | px / rem | Spacing token |
| -------------- | ------------------------- | -------- | ------------- |
| Toolbar: large | height, width | 48 / 3 ||
| | margin-top, margin-bottom | 16 / 1 | `$spacing-05` |
| Toolbar: small | height, width | 32 / 2 ||
| | margin-top, margin-bottom | 8 / 0.5 | `$spacing-03` |

<div className="image--fixed">

Loading

0 comments on commit 877dbe1

Please sign in to comment.