From ed194deb0be81aef5760ba31ca160f4897b29c5c Mon Sep 17 00:00:00 2001 From: emyarod Date: Wed, 26 May 2021 09:36:26 -0500 Subject: [PATCH] chore: sync `v11` branch with `main` (#2344) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(support-02): update support-02 value (#2288) * add button variants to live modal preivew (#2299) * docs(Modal): update modal live preview * docs(Modal): add solo button example to code docs * docs(Modal): update action handler Co-authored-by: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com> Co-authored-by: TJ Egan Co-authored-by: Andrea N. Cardona * chore(gatsby): remove v3.0 FAST_REFRESH flag (#2336) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * comms: All about Carbon additions, edits, deletions (#2338) * comms: all about carbon additions * update to the team page * copyediting pass * Update src/pages/all-about-carbon/who-uses-carbon.mdx Co-authored-by: emyarod * Update src/pages/all-about-carbon/who-uses-carbon.mdx Co-authored-by: emyarod * Update src/pages/all-about-carbon/who-uses-carbon.mdx Co-authored-by: emyarod * Update src/pages/all-about-carbon/who-uses-carbon.mdx Co-authored-by: emyarod * Update src/pages/all-about-carbon/who-uses-carbon.mdx Co-authored-by: emyarod * Delete why-use-carbon copy.mdx Co-authored-by: emyarod * copy edits to who uses carbon (#2347) * fix: update Carbon for IBM.com community index links (#2343) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Removed space between paragraphs (#2351) Removed space between paragraphs in “Overview” and “Carbon is open source” so the copy reads continuously without paragraph breaks. Not needed and disrupting the one thought. Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore: format Co-authored-by: TJ Egan Co-authored-by: DAK <40970507+dakahn@users.noreply.github.com> Co-authored-by: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com> Co-authored-by: Andrea N. Cardona Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Jan Child <44503588+janchild@users.noreply.github.com> Co-authored-by: Mike Abbink <32881239+mjabbink@users.noreply.github.com> --- src/pages/all-about-carbon/what-is-carbon.mdx | 12 +- src/pages/components/accordion/style.mdx | 20 +-- src/pages/components/button/style.mdx | 160 +++++++++--------- src/pages/components/checkbox/style.mdx | 22 +-- src/pages/components/code-snippet/style.mdx | 49 +++--- src/pages/components/data-table/style.mdx | 16 +- src/pages/components/dropdown/style.mdx | 35 ++-- src/pages/components/modal/usage.mdx | 6 +- src/pages/components/notification/style.mdx | 115 +++++++------ src/pages/components/number-input/style.mdx | 4 +- src/pages/components/radio-button/style.mdx | 16 +- src/pages/components/search/style.mdx | 2 +- src/pages/components/select/style.mdx | 30 ++-- src/pages/components/slider/style.mdx | 30 ++-- .../components/structured-list/style.mdx | 2 +- src/pages/components/tag/style.mdx | 70 ++++---- src/pages/components/text-input/style.mdx | 86 +++++----- src/pages/components/tile/style.mdx | 28 +-- src/pages/components/toggle/style.mdx | 66 ++++---- .../developing/angular-tutorial/step-3.mdx | 4 +- .../developing/angular-tutorial/step-5.mdx | 8 +- 21 files changed, 391 insertions(+), 390 deletions(-) diff --git a/src/pages/all-about-carbon/what-is-carbon.mdx b/src/pages/all-about-carbon/what-is-carbon.mdx index e93210d25b0..029ad2044b4 100755 --- a/src/pages/all-about-carbon/what-is-carbon.mdx +++ b/src/pages/all-about-carbon/what-is-carbon.mdx @@ -28,17 +28,17 @@ community of contributors. A design system is a collection of pre-built, reusable assets—components, patterns, guidance, and code—that allows its users to build consistent digital -experiences faster. By using the pre-built and universal assets of Carbon, the time teams spend -designing and building is minimized. Instead of building and re-building basic -elements, they can spend that time customizing their products to address -specific client use cases. +experiences faster. By using the pre-built and universal assets of Carbon, the +time teams spend designing and building is minimized. Instead of building and +re-building basic elements, they can spend that time customizing their products +to address specific client use cases. ### Carbon is open source Carbon is funded and built by IBM, which means we build for the company’s business needs, but we’ve made it open source for anyone to use and contribute -back to. While being primarily open source, Carbon also serves various parts of the IBM -business that follow an inner source model. +back to. While being primarily open source, Carbon also serves various parts of +the IBM business that follow an inner source model. ## How Carbon works diff --git a/src/pages/components/accordion/style.mdx b/src/pages/components/accordion/style.mdx index 41d719b9904..f4b5d6650fc 100755 --- a/src/pages/components/accordion/style.mdx +++ b/src/pages/components/accordion/style.mdx @@ -9,22 +9,22 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ## Color -| Class | Property | Color token | -| ------------------------- | ---------- | ----------- | +| Class | Property | Color token | +| ------------------------- | ---------- | ---------------- | | `.bx--accordion__title` | color | `$text-primary` | | `.bx--accordion__content` | color | `$text-primary` | | `.bx--accordion__arrow` | fill | `$icon-primary` | -| `.bx--accordion__item` | border-top | `$border-subtle` | +| `.bx--accordion__item` | border-top | `$border-subtle` | ### Interactive states -| Class | Property | Color token | -| -------------------------------- | ---------- | -------------- | -| `.bx--accordion__heading:hover` | background | `$background-hover` | -| `.bx--accordion__title:focus` | border | `$focus` | -| `.bx--accordion__title:disabled` | background | `$text-disabled` | -| `.bx--accordion__arrow:disabled` | fill | `$icon-disabled` | -| `.bx--accordion__item--disabled` | border-top | `$border-disabled` | +| Class | Property | Color token | +| -------------------------------- | ---------- | ------------------- | +| `.bx--accordion__heading:hover` | background | `$background-hover` | +| `.bx--accordion__title:focus` | border | `$focus` | +| `.bx--accordion__title:disabled` | background | `$text-disabled` | +| `.bx--accordion__arrow:disabled` | fill | `$icon-disabled` | +| `.bx--accordion__item--disabled` | border-top | `$border-disabled` | diff --git a/src/pages/components/button/style.mdx b/src/pages/components/button/style.mdx index 4b920376554..73017bcf65e 100755 --- a/src/pages/components/button/style.mdx +++ b/src/pages/components/button/style.mdx @@ -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` | @@ -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` | @@ -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` | @@ -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` | @@ -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` | @@ -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` | diff --git a/src/pages/components/checkbox/style.mdx b/src/pages/components/checkbox/style.mdx index e2113787a41..31f174e6f87 100755 --- a/src/pages/components/checkbox/style.mdx +++ b/src/pages/components/checkbox/style.mdx @@ -8,14 +8,14 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ## Color -| Class | Property | Color token | -| ------------------------- | ---------------- | ------------- | -| `.bx--label` | text color | `$text-secondary` | -| `.bx--checkbox-label` | text color | `$text-primary` | -| `.bx--checkbox` | border | `$icon-primary` | -| `.bx--checkbox:unchecked` | background-color | transparent | -| `.bx--checkbox:checked` | background-color | `$icon-primary` | -| `.bx--checkbox:checked` | checkmark | `$text-inverse` | +| Class | Property | Color token | +| ------------------------- | ---------------- | ----------------- | +| `.bx--label` | text color | `$text-secondary` | +| `.bx--checkbox-label` | text color | `$text-primary` | +| `.bx--checkbox` | border | `$icon-primary` | +| `.bx--checkbox:unchecked` | background-color | transparent | +| `.bx--checkbox:checked` | background-color | `$icon-primary` | +| `.bx--checkbox:checked` | checkmark | `$text-inverse` | @@ -27,9 +27,9 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ### Interactive states -| State | Property | Color token | -| ----------- | ---------- | -------------- | -| `:focus` | border | `$focus` | +| State | Property | Color token | +| ----------- | ---------- | ---------------- | +| `:focus` | border | `$focus` | | `:disabled` | text color | `$text-disabled` | | `:disabled` | border | `$icon-disabled` | diff --git a/src/pages/components/code-snippet/style.mdx b/src/pages/components/code-snippet/style.mdx index 831c6b62c8c..5913782a5d3 100755 --- a/src/pages/components/code-snippet/style.mdx +++ b/src/pages/components/code-snippet/style.mdx @@ -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` | @@ -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`
`.bx--snippet-btn:hover` | background-color | `$layer-hover` | -| `.bx--copy-btn:focus`
`.bx--snippet-btn:focus` | border | `$focus` | -| `.bx--copy-btn:active`
`.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`
`.bx--snippet-btn:hover` | background-color | `$layer-hover` | +| `.bx--copy-btn:focus`
`.bx--snippet-btn:focus` | border | `$focus` | +| `.bx--copy-btn:active`
`.bx--snippet-btn:active` | background-color | `$layer-active` | @@ -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` | diff --git a/src/pages/components/data-table/style.mdx b/src/pages/components/data-table/style.mdx index a25a0bdc47f..33640fc7319 100755 --- a/src/pages/components/data-table/style.mdx +++ b/src/pages/components/data-table/style.mdx @@ -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` |
diff --git a/src/pages/components/dropdown/style.mdx b/src/pages/components/dropdown/style.mdx index d1be6c91084..450bbfaabbc 100644 --- a/src/pages/components/dropdown/style.mdx +++ b/src/pages/components/dropdown/style.mdx @@ -82,23 +82,22 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ### Inline dropdown -| State | Element | Property | Color token | -| -------- | ------------- | ---------------- | ---------------------- | -| Enabled | Field | background-color | transparent | -| | Field text | text-color | `$text-primary` | -| | Chevron icon | svg | `$icon-primary` | -| | Menu option | text-color | `$text-secondary` | -| | Menu option | background-color | `$layer` | -| Hover | Field | background-color | `$field-hover` | -| | Menu option | background-color | `$layer-hover` | -| | Menu option | text-color | `$text-primary` | -| Active | Menu option | background-color | `$layer-active` | -| Selected | Menu option | background-color | `$layer-selected` | -| | Menu option | checkmark | `$icon-primary` | -| Invalid | Field | border | `$support-error` | -| | Error message | text-color | `$text-error` | -| | Error icon | svg | `$support-error` | - +| State | Element | Property | Color token | +| -------- | ------------- | ---------------- | ----------------- | +| Enabled | Field | background-color | transparent | +| | Field text | text-color | `$text-primary` | +| | Chevron icon | svg | `$icon-primary` | +| | Menu option | text-color | `$text-secondary` | +| | Menu option | background-color | `$layer` | +| Hover | Field | background-color | `$field-hover` | +| | Menu option | background-color | `$layer-hover` | +| | Menu option | text-color | `$text-primary` | +| Active | Menu option | background-color | `$layer-active` | +| Selected | Menu option | background-color | `$layer-selected` | +| | Menu option | checkmark | `$icon-primary` | +| Invalid | Field | border | `$support-error` | +| | Error message | text-color | `$text-error` | +| | Error icon | svg | `$support-error` | @@ -117,7 +116,7 @@ phrase and any proper nouns capitalized. Dropdown options should not exceed three words. | Element | Font-size | Font-weight | Type token | -| ---------------- | ---------- | ------------- | ------------------| +| ---------------- | ---------- | ------------- | ----------------- | | Label | 12 / 0.75 | Regular / 400 | `$label-01` | | Field text | 14 / 0.875 | Regular / 400 | `$body-short-01` | | Menu option text | 14 / 0.875 | Regular / 400 | `$body-short-01` | diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx index 32cf2d00127..301771e31d6 100755 --- a/src/pages/components/modal/usage.mdx +++ b/src/pages/components/modal/usage.mdx @@ -103,7 +103,8 @@ destructive or irreversible then use a transactional danger modal. Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvmodal--default', Vanilla: 'https://the-carbon-components.netlify.com/?nav=modal', - }}>{` + }}> + {`

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor.

-`} +`} + Low contrast notifications in the White theme -| Element | Property | Color token | -| ---------------- | ----------------------- | ----------- | -| Title | text color | `$text-primary` | -| Subtitle | text color | `$text-primary` | -| Close button | fill | `$icon-primary` | -| Action button | text color | `$link-primary` | -| Error | background-color | `$notification-error-background-color` | -| | border-left | `$support-error` | -| | svg | `$support-error` | -| Success | background-color. | `$notification-success-background-color` | -| | border-left | `$support-success` | -| | svg | `$support-success` | -| Warning | background-color | `$notification-warning-background-color` | -| | border-left | `$support-warning` | -| | svg | `$support-warning` | -| Information | background-color | `$notification-info-background-color` | -| | border-left | `$support-info` | -| | svg | `$support-info` | - +| Element | Property | Color token | +| ------------- | ----------------- | ---------------------------------------- | +| Title | text color | `$text-primary` | +| Subtitle | text color | `$text-primary` | +| Close button | fill | `$icon-primary` | +| Action button | text color | `$link-primary` | +| Error | background-color | `$notification-error-background-color` | +| | border-left | `$support-error` | +| | svg | `$support-error` | +| Success | background-color. | `$notification-success-background-color` | +| | border-left | `$support-success` | +| | svg | `$support-success` | +| Warning | background-color | `$notification-warning-background-color` | +| | border-left | `$support-warning` | +| | svg | `$support-warning` | +| Information | background-color | `$notification-info-background-color` | +| | border-left | `$support-info` | +| | svg | `$support-info` | ### High contrast @@ -42,47 +41,47 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
-| Element | Property | Color token | -| --------------------- | ---------- | ----------- | -| Title | text color | `$text-inverse` | -| Subtitle | text color | `$text-inverse` | -| Close button | fill | `$icon-inverse` | -| Action button | text color | `$link-inverse` | -| Background | background-color | `$background-inverse` | -| Error | border-left | `$support-error-inverse` | -| | svg | `$support-error-inverse` | -| Success | border-left | `$support-success-inverse` | -| | svg | `$support-success-inverse` | -| Warning | border-left | `$support-warning-inverse` | -| | svg | `$support-warning-inverse` | -| Information | border-left | `$support-info-inverse` | -| | svg | `$support-info-inverse` | +| Element | Property | Color token | +| ------------- | ---------------- | -------------------------- | +| Title | text color | `$text-inverse` | +| Subtitle | text color | `$text-inverse` | +| Close button | fill | `$icon-inverse` | +| Action button | text color | `$link-inverse` | +| Background | background-color | `$background-inverse` | +| Error | border-left | `$support-error-inverse` | +| | svg | `$support-error-inverse` | +| Success | border-left | `$support-success-inverse` | +| | svg | `$support-success-inverse` | +| Warning | border-left | `$support-warning-inverse` | +| | svg | `$support-warning-inverse` | +| Information | border-left | `$support-info-inverse` | +| | svg | `$support-info-inverse` | ## Typography Notification text should be set in sentence case with only the first word capitalized. Notification titles should be concise and to the point. -| Element | Font-size (px/rem) | Font-weight | Type token | -| ------------------------------------------------------------------------------ | ------------------ | -------------- | ---------------- | -| Title | 14 / 0.875 | SemiBold / 600 | `$heading-01` | -| Subtitle | 14 / 0.875 | Regular / 400 | `$body-short-01` | +| Element | Font-size (px/rem) | Font-weight | Type token | +| -------- | ------------------ | -------------- | ---------------- | +| Title | 14 / 0.875 | SemiBold / 600 | `$heading-01` | +| Subtitle | 14 / 0.875 | Regular / 400 | `$body-short-01` | ## Structure ### Toast notification -| Element | Property | px / rem | Spacing token | -| ---------------------------------------- | ------------------------ | -------- | ------------- | -| Notification | width | 288 / 18 | – | -| | border-left | 3px | – | -| | padding-right | 16 / 1 | `$spacing-05` | -| Title | margin-top | 16 / 1 | `$spacing-05` | -| Subtitle | margin-bottom | 24 / 1.5 | `$spacing-06` | -| Details | padding-right | 16 / 1 | `$spacing-05` | -| Caption | margin-bottom | 16 / 1 | `$spacing-05` | -| Close button | height, width | 48 / 3 | – | -| Close icon | margin-top, margin-right | 16 / 1 | `$spacing-05` | +| Element | Property | px / rem | Spacing token | +| ------------ | ------------------------ | -------- | ------------- | +| Notification | width | 288 / 18 | – | +| | border-left | 3px | – | +| | padding-right | 16 / 1 | `$spacing-05` | +| Title | margin-top | 16 / 1 | `$spacing-05` | +| Subtitle | margin-bottom | 24 / 1.5 | `$spacing-06` | +| Details | padding-right | 16 / 1 | `$spacing-05` | +| Caption | margin-bottom | 16 / 1 | `$spacing-05` | +| Close button | height, width | 48 / 3 | – | +| Close icon | margin-top, margin-right | 16 / 1 | `$spacing-05` |
@@ -98,15 +97,15 @@ capitalized. Notification titles should be concise and to the point. The width of an _inline notification_ will vary based on content or layout. -| Element | Property | px / rem | Spacing token | -| ---------------------------------------- | --------------------------- | --------- | ------------- | -| Inline notification | min-height | 48 / 3 | `$spacing-09` | -| | border-left | 3px | – | -| Details | margin-left, margin-right | 16 / 1 | `$spacing-05` | -| Text-wrapper | padding-top, padding-bottom | 12 / 0.75 | `$spacing-04` | -| Icon | margin-right | 16 / 1 | `$spacing-05` | -| Close button | height, width | 48 / 3 | – | -| Close icon | icon size | 16 x 16 | – | +| Element | Property | px / rem | Spacing token | +| ------------------- | --------------------------- | --------- | ------------- | +| Inline notification | min-height | 48 / 3 | `$spacing-09` | +| | border-left | 3px | – | +| Details | margin-left, margin-right | 16 / 1 | `$spacing-05` | +| Text-wrapper | padding-top, padding-bottom | 12 / 0.75 | `$spacing-04` | +| Icon | margin-right | 16 / 1 | `$spacing-05` | +| Close button | height, width | 48 / 3 | – | +| Close icon | icon size | 16 x 16 | – |
diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx index 60dca283b01..cc6acd30a57 100755 --- a/src/pages/components/number-input/style.mdx +++ b/src/pages/components/number-input/style.mdx @@ -8,8 +8,8 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ## Color -Inputs come in two different colors. The default input color is `$field` and -is used on `$background` and `$overlay` page backgrounds. +Inputs come in two different colors. The default input color is `$field` and is +used on `$background` and `$overlay` page backgrounds. | Class | Property | Color token | | ---------------------------------- | ---------------- | ----------------- | diff --git a/src/pages/components/radio-button/style.mdx b/src/pages/components/radio-button/style.mdx index 043a9e4e9ea..7ab9b0cb59c 100755 --- a/src/pages/components/radio-button/style.mdx +++ b/src/pages/components/radio-button/style.mdx @@ -8,14 +8,14 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ## Color -| Class | Property | Color token | -| --------------------------------------- | ---------------- | ------------------ | -| `.bx--label` | text color | `$text-secondary` | -| `.bx--radio-button__label` | text color | `$text-primary` | -| `.bx--radio-button__appearance` | border | `$icon-primary` | -| `.bx--radio-button__appearance` | background-color | `$background` | -| `.bx--radio-button__appearance:checked` | border | `$icon-primary` | -| `.bx--radio-button__appearance::before` | dot | `$icon-primary` | +| Class | Property | Color token | +| --------------------------------------- | ---------------- | ----------------- | +| `.bx--label` | text color | `$text-secondary` | +| `.bx--radio-button__label` | text color | `$text-primary` | +| `.bx--radio-button__appearance` | border | `$icon-primary` | +| `.bx--radio-button__appearance` | background-color | `$background` | +| `.bx--radio-button__appearance:checked` | border | `$icon-primary` | +| `.bx--radio-button__appearance::before` | dot | `$icon-primary` | ### Interactive colors diff --git a/src/pages/components/search/style.mdx b/src/pages/components/search/style.mdx index ed4cd1012d8..13700bfc2e1 100755 --- a/src/pages/components/search/style.mdx +++ b/src/pages/components/search/style.mdx @@ -13,7 +13,7 @@ is used on `$ui-background` and `$ui-02` page backgrounds. The `--light` version input color is `$field-02` and is used on `$ui-01` page backgrounds. | Class | Property | Color token | -| -------------------------------- | ---------------- | --------------------| +| -------------------------------- | ---------------- | ------------------- | | `.bx--search-input` | background-color | `$field` | | `.bx--search-input` | border-bottom | `$border-strong` | | `.bx--search-input` | text color | `$text-primary` | diff --git a/src/pages/components/select/style.mdx b/src/pages/components/select/style.mdx index 8a2adadfe71..a9afb1adbad 100755 --- a/src/pages/components/select/style.mdx +++ b/src/pages/components/select/style.mdx @@ -12,14 +12,14 @@ Inputs come in two different colors. The default input color is `$field-01` and is used on `$ui-background` and `$ui-02` page backgrounds. The `--light` version input color is `$field-02` and is used on `$ui-01` page backgrounds. -| Class | Property | Color token | -| --------------------- | ---------- | --------------------------- | -| `.bx--select-input` | background | `$field` | -| `.bx--select--inline` | background | transparent | -| `.bx--label` | text color | `$text-primary` | -| `.bx--select-input` | text color | `$text-primary` | -| `.bx--select--inline` | text color | `$icon-primary` | -| `.bx--select__arrow` | fill | `$icon-primary` | +| Class | Property | Color token | +| --------------------- | ---------- | --------------- | +| `.bx--select-input` | background | `$field` | +| `.bx--select--inline` | background | transparent | +| `.bx--label` | text color | `$text-primary` | +| `.bx--select-input` | text color | `$text-primary` | +| `.bx--select--inline` | text color | `$icon-primary` | +| `.bx--select__arrow` | fill | `$icon-primary` |
@@ -31,13 +31,13 @@ input color is `$field-02` and is used on `$ui-01` page backgrounds. ### Interaction states -| Class | Property | Color token | -| --------------------------------- | ---------- | ---------------------- | -| `.bx--select-input:focus` | border | `$focus` | -| `.bx--select-input[data-invalid]` | border | `$support-error` | -| `.bx--form-requirement` | text color | `$support-error` | -| `.bx--select-input:disabled` | background | `$field-disabled` | -| `.bx--select-input:disabled` | text color | `$text-disabled` | +| Class | Property | Color token | +| --------------------------------- | ---------- | ----------------- | +| `.bx--select-input:focus` | border | `$focus` | +| `.bx--select-input[data-invalid]` | border | `$support-error` | +| `.bx--form-requirement` | text color | `$support-error` | +| `.bx--select-input:disabled` | background | `$field-disabled` | +| `.bx--select-input:disabled` | text color | `$text-disabled` | **Open:** Style determined by browser diff --git a/src/pages/components/slider/style.mdx b/src/pages/components/slider/style.mdx index a0511b47036..2b1bb0fe49a 100755 --- a/src/pages/components/slider/style.mdx +++ b/src/pages/components/slider/style.mdx @@ -8,24 +8,24 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ## Color -| Class | Property | Color token | -| --------------------------- | ---------------- | ----------- | -| `.bx--slider__thumb` | fill | `$icon-primary` | -| `.bx--slider__filled-track` | background-color | `$border-inverse` | -| `.bx--slider__track` | background-color | `$border-subtle` | -| `.bx--label` | text color | `$text-secondary` | -| `.bx--slider__range-label` | text color | `$text-primary` | +| Class | Property | Color token | +| --------------------------- | ---------------- | ----------------- | +| `.bx--slider__thumb` | fill | `$icon-primary` | +| `.bx--slider__filled-track` | background-color | `$border-inverse` | +| `.bx--slider__track` | background-color | `$border-subtle` | +| `.bx--label` | text color | `$text-secondary` | +| `.bx--slider__range-label` | text color | `$text-primary` | ### Interactive states -| Class | Property | Color token | -| ---------------------------------- | ---------------- | ----------------- | -| `.bx--slider__thumb:focus` | border | `$focus` | -| `.bx--slider__thumb:active` | fill | `$interactive` | -| `.bx--slider__filled-track:active` | background-color | `$interactive` | -| `.bx--label:disabled` | text color | `$text-disabled` | -| `.bx--slider__thumb:disabled` | fill | `$icon-disabled` | -| `.bx--slider__track:disabled` | background-color | `$border-disabled` | +| Class | Property | Color token | +| ---------------------------------- | ---------------- | ------------------ | +| `.bx--slider__thumb:focus` | border | `$focus` | +| `.bx--slider__thumb:active` | fill | `$interactive` | +| `.bx--slider__filled-track:active` | background-color | `$interactive` | +| `.bx--label:disabled` | text color | `$text-disabled` | +| `.bx--slider__thumb:disabled` | fill | `$icon-disabled` | +| `.bx--slider__track:disabled` | background-color | `$border-disabled` | ## Typography diff --git a/src/pages/components/structured-list/style.mdx b/src/pages/components/structured-list/style.mdx index a4568092d32..0207e05d5ad 100644 --- a/src/pages/components/structured-list/style.mdx +++ b/src/pages/components/structured-list/style.mdx @@ -13,7 +13,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] | `.bx--structured-list-th` | text color | `$text-primary` | | `.bx--structured-list-td` | text color | `$text-secondary` | | `.bx--structured-list-row--header-row` | border-bottom | `$border-subtle` | -| `.bx--structured-list-row` | border-bottom | `$border-subtle` | +| `.bx--structured-list-row` | border-bottom | `$border-subtle` | ### Interactive states diff --git a/src/pages/components/tag/style.mdx b/src/pages/components/tag/style.mdx index 64ad7acf6f9..c88ae4e0cf8 100755 --- a/src/pages/components/tag/style.mdx +++ b/src/pages/components/tag/style.mdx @@ -12,32 +12,32 @@ Using the IBM Design Language [color palette](https://www.ibm.com/design/language/elements/color), the tag text color should be 5 steps away from the tag background color -| Tag color | Color token | -| ---------- | -------------------- | -| Default | `$tag-background-gray` | -| | `$tag-color-gray` | -| Red | `$tag-background-red` | -| | `$tag-color-red` | -| Magenta | `$tag-background-magenta` | -| | `$tag-color-magenta` | -| Purple | `$tag-background-purple` | -| | `$tag-color-purple` | -| Blue | `$tag-background-blue` | -| | `$tag-color-blue` | -| Cyan | `$tag-background-cyan` | -| | `$tag-color-cyan` | -| Teal | `$tag-background-teal` | -| | `$tag-color-teal` | -| Green | `$tag-background-green` | -| | `$tag-color-green` | -| Gray | `$tag-background-gray` | -| | `$tag-color-gray` | -| Cool gray | `$tag-background-cool-gray` | -| | `$tag-color-cool-gray` | -| Warm gray | `$tag-background-warm-gray` | -| | `$tag-color-warm-gray` | -| High contrast | `$background-inverse` | -| | `$text-inverse` | +| Tag color | Color token | +| ------------- | --------------------------- | +| Default | `$tag-background-gray` | +| | `$tag-color-gray` | +| Red | `$tag-background-red` | +| | `$tag-color-red` | +| Magenta | `$tag-background-magenta` | +| | `$tag-color-magenta` | +| Purple | `$tag-background-purple` | +| | `$tag-color-purple` | +| Blue | `$tag-background-blue` | +| | `$tag-color-blue` | +| Cyan | `$tag-background-cyan` | +| | `$tag-color-cyan` | +| Teal | `$tag-background-teal` | +| | `$tag-color-teal` | +| Green | `$tag-background-green` | +| | `$tag-color-green` | +| Gray | `$tag-background-gray` | +| | `$tag-color-gray` | +| Cool gray | `$tag-background-cool-gray` | +| | `$tag-color-cool-gray` | +| Warm gray | `$tag-background-warm-gray` | +| | `$tag-color-warm-gray` | +| High contrast | `$background-inverse` | +| | `$text-inverse` | ## Typography @@ -45,21 +45,21 @@ Tag text should be set in sentence case, and should only have one word. However, if more than one is necessary, then connect the words using a hyphen with no spaces. -| Element | Font-size (px/rem) | Font-weight | Type token | -| ---------- | ------------------ | ------------- | ----------- | -| Label | 12 / 0.75 | Regular / 400 | `$label-01` | +| Element | Font-size (px/rem) | Font-weight | Type token | +| ------- | ------------------ | ------------- | ----------- | +| Label | 12 / 0.75 | Regular / 400 | `$label-01` | ## Structure All tags have the same height. However, the width of tags varies based on the amount of content. All four corners of a tag are rounded with a 24px radius. -| Element | Property | px / rem | Spacing token | -| ---------- | --------------------------- | -------- | ------------- | -| Tag | height | 24 / 1.5 | – | -| | radius | 24px | – | -| | margin | 8 / 0.5 | `$spacing-03` | -| | padding-left, padding-right | 8 / 0.5 | `$spacing-03` | +| Element | Property | px / rem | Spacing token | +| ------- | --------------------------- | -------- | ------------- | +| Tag | height | 24 / 1.5 | – | +| | radius | 24px | – | +| | margin | 8 / 0.5 | `$spacing-03` | +| | padding-left, padding-right | 8 / 0.5 | `$spacing-03` |
diff --git a/src/pages/components/text-input/style.mdx b/src/pages/components/text-input/style.mdx index 6df7dadc7ce..26502a1f758 100755 --- a/src/pages/components/text-input/style.mdx +++ b/src/pages/components/text-input/style.mdx @@ -8,14 +8,14 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ## Color -| Element | Property | Color token | -| ------------------------------ | ---------------- | ----------- | -| Label | text color | `$text-secondary` | -| Field text | text color | `$text-primary` | -| Placeholder text | text color | `$text-placeholder` | -| Helper text | text color | `$text-helper` | -| Field | background-color | `$field` | -| | border-bottom | `$border-strong` | +| Element | Property | Color token | +| ---------------- | ---------------- | ------------------- | +| Label | text color | `$text-secondary` | +| Field text | text color | `$text-primary` | +| Placeholder text | text color | `$text-placeholder` | +| Helper text | text color | `$text-helper` | +| Field | background-color | `$field` | +| | border-bottom | `$border-strong` | @@ -27,14 +27,14 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ### Interactive states -| State | Element | Property | Color token | -| ------------ | -------------------------- | ---------- | -------------- | -| Focus | Field | outline | `$focus` | -| Invalid | Field | outline | `$support-error` | -| | Error message | text color | `$text-error` | -| | Warning icon | svg | `$support-error` | -| Disabled | Field | background | `$field-disabled` | -| | Field text | text color | `$disabled-02` | +| State | Element | Property | Color token | +| -------- | ------------- | ---------- | ----------------- | +| Focus | Field | outline | `$focus` | +| Invalid | Field | outline | `$support-error` | +| | Error message | text color | `$text-error` | +| | Warning icon | svg | `$support-error` | +| Disabled | Field | background | `$field-disabled` | +| | Field text | text color | `$disabled-02` | @@ -50,34 +50,34 @@ Text input labels and placeholder text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. Text input labels should be three words or less. -| Element | Font-size (px/rem) | Font-weight | Type token | -| ------------------------ | ------------------ | ------------- | --------------- | -| Label | 12 / 0.75 | Regular / 400 | `$label-01` | -| Field text | 14 / 0.875 | Regular / 400 | `$body-long-01` | -| Helper text | 12 / 0.75 | Regular / 400 | `$label-01` | -| Error message | 12 / 0.75 | Regular / 400 | `$label-01` | +| Element | Font-size (px/rem) | Font-weight | Type token | +| ------------- | ------------------ | ------------- | --------------- | +| Label | 12 / 0.75 | Regular / 400 | `$label-01` | +| Field text | 14 / 0.875 | Regular / 400 | `$body-long-01` | +| Helper text | 12 / 0.75 | Regular / 400 | `$label-01` | +| Error message | 12 / 0.75 | Regular / 400 | `$label-01` | ## Structure ### Text input -| Element | Property | px / rem | Spacing token | -| -------------------------- | --------------------------- | -------- | ------------- | -| Label | margin-bottom | 8 / 0.5 | `$spacing-03` | -| Helper text | margin-top | 4 / 0.25 | `$spacing-02` | -| Field text | padding-left, padding-right | 16 / 1 | `$spacing-05` | -| Field | border-bottom | 1px | – | -| Field: focus | border | 2px | – | +| Element | Property | px / rem | Spacing token | +| ------------ | --------------------------- | -------- | ------------- | +| Label | margin-bottom | 8 / 0.5 | `$spacing-03` | +| Helper text | margin-top | 4 / 0.25 | `$spacing-02` | +| Field text | padding-left, padding-right | 16 / 1 | `$spacing-05` | +| Field | border-bottom | 1px | – | +| Field: focus | border | 2px | – |
Sizes -| Size | Element | Property | px / rem | -| -------------------------- | ------- | ----------------- | -------- | -| Small | Field | height | 32 / 2 | -| Default | Field | height | 40 / 2.5 | -| XL | Field | height | 48 / 3 | +| Size | Element | Property | px / rem | +| ------- | ------- | -------- | -------- | +| Small | Field | height | 32 / 2 | +| Default | Field | height | 40 / 2.5 | +| XL | Field | height | 48 / 3 |
@@ -89,15 +89,15 @@ should be three words or less. ### Text area -| Element | Property | px / rem | Spacing token | -| ------------------------- | --------------------------- | ----------- | ------------- | -| Label | margin-bottom | 8 / 0.5 | `$spacing-03` | -| Field | height | varies | – | -| | padding-left, padding-right | 16 / 1 | `$spacing-05` | -| | padding-top, padding-bottom | 11 / 0.6875 | – | -| | border-bottom | 1px | – | -| Field: focus | border | 2px | – | -| Helper text | margin-top | 4 / 0.25 | `$spacing-02` | +| Element | Property | px / rem | Spacing token | +| ------------ | --------------------------- | ----------- | ------------- | +| Label | margin-bottom | 8 / 0.5 | `$spacing-03` | +| Field | height | varies | – | +| | padding-left, padding-right | 16 / 1 | `$spacing-05` | +| | padding-top, padding-bottom | 11 / 0.6875 | – | +| | border-bottom | 1px | – | +| Field: focus | border | 2px | – | +| Helper text | margin-top | 4 / 0.25 | `$spacing-02` |
diff --git a/src/pages/components/tile/style.mdx b/src/pages/components/tile/style.mdx index 71d070afed0..2662e6a87f1 100644 --- a/src/pages/components/tile/style.mdx +++ b/src/pages/components/tile/style.mdx @@ -8,23 +8,23 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ## Color -| Class | Property | Color token | -| ---------------------------- | ---------------- | ----------- | -| Tile | background-color | `$layer` | -| Tile: focus | border | `$focus` | -| Tile: hover | background-color | `$layer-hover` | -| Tile: selected | border | `$border-inverse` | -| Chevron icon | svg | `$icon-primary` | -| Checkmark icon | svg | `$icon-primary` | -| Checkmark: hover | svg | `$icon-secondary` | +| Class | Property | Color token | +| ---------------- | ---------------- | ----------------- | +| Tile | background-color | `$layer` | +| Tile: focus | border | `$focus` | +| Tile: hover | background-color | `$layer-hover` | +| Tile: selected | border | `$border-inverse` | +| Chevron icon | svg | `$icon-primary` | +| Checkmark icon | svg | `$icon-primary` | +| Checkmark: hover | svg | `$icon-secondary` | ## Structure -| Class | Property | px / rem | Spacing token | -| ----------- | ----------------- | -------- | ------------- | -| Tile | min-height | 64 / 4 | – | -| | min-width | 128 / 8 | – | -| | padding (minimum) | 16 / 1 | `$spacing-05` | +| Class | Property | px / rem | Spacing token | +| ----- | ----------------- | -------- | ------------- | +| Tile | min-height | 64 / 4 | – | +| | min-width | 128 / 8 | – | +| | padding (minimum) | 16 / 1 | `$spacing-05` |
diff --git a/src/pages/components/toggle/style.mdx b/src/pages/components/toggle/style.mdx index 72480cdcfd4..830d3aa8216 100755 --- a/src/pages/components/toggle/style.mdx +++ b/src/pages/components/toggle/style.mdx @@ -8,15 +8,15 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ## Color -| Element | Property | Color token | -| -------------------------------------------------------------- | ---------------- | ------------- | -| Label | text color | `$text-secondary` | -| Toggle text | text color | `$text-primary` | -| Off background | background-color | `$toggle-off` | -| Off handle | background-color | `$icon-on-color` | -| On background | background-color | `$support-success` | -| On handle | background-color | `$icon-on-color` | -| Checkmark | fill | `$support-success` | +| Element | Property | Color token | +| -------------- | ---------------- | ------------------ | +| Label | text color | `$text-secondary` | +| Toggle text | text color | `$text-primary` | +| Off background | background-color | `$toggle-off` | +| Off handle | background-color | `$icon-on-color` | +| On background | background-color | `$support-success` | +| On handle | background-color | `$icon-on-color` | +| Checkmark | fill | `$support-success` |
@@ -30,35 +30,35 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] ### Interactive states -| State | Element | Property | Color token | -| --------------------------------------------------------------- | ---------------- | -------------- | -| Focus | Toggle | border | `$focus` | -| Disabled | Label | text color | `$text-disabled` | -| | Toggle text | text color | `$text-disabled` | -| | Toggle background | background-color | `$button-disabled` | -| | Toggle handle | background-color | `$icon-on-color-disabled` | +| State | Element | Property | Color token | +| -------- | ----------------- | ---------------- | ------------------------- | +| Focus | Toggle | border | `$focus` | +| Disabled | Label | text color | `$text-disabled` | +| | Toggle text | text color | `$text-disabled` | +| | Toggle background | background-color | `$button-disabled` | +| | Toggle handle | background-color | `$icon-on-color-disabled` | ## Typography Toggle labels should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized, and no more than three words. -| Element | Font-size (px/rem) | Font-weight | Type token | -| ------------------------- | ------------------ | ------------- | --------------- | -| Label | 12 / 0.75 | Regular / 400 | `$label-01` | -| Toggle text | 14 / 0.875 | Regular / 400 | `$body-long-01` | +| Element | Font-size (px/rem) | Font-weight | Type token | +| ----------- | ------------------ | ------------- | --------------- | +| Label | 12 / 0.75 | Regular / 400 | `$label-01` | +| Toggle text | 14 / 0.875 | Regular / 400 | `$body-long-01` | ## Structure ### Toggle -| Element | Property | px / rem | Spacing token | -| ------------------------------- | ------------------------- | --------- | ------------- | -| Toggle | width | 48 / 3 | – | -| | height | 24 / 1.5 | – | -| Handle | height, width | 18 / 1.25 | – | -| Label | margin-top, margin-bottom | 16 / 1 | `$spacing-05` | -| Toggle text | margin-left | 8 / 0.5 | `$spacing-03` | +| Element | Property | px / rem | Spacing token | +| ----------- | ------------------------- | --------- | ------------- | +| Toggle | width | 48 / 3 | – | +| | height | 24 / 1.5 | – | +| Handle | height, width | 18 / 1.25 | – | +| Label | margin-top, margin-bottom | 16 / 1 | `$spacing-05` | +| Toggle text | margin-left | 8 / 0.5 | `$spacing-03` |
@@ -70,12 +70,12 @@ phrase and any proper nouns capitalized, and no more than three words. ### Small toggle -| Element | Property | px / rem | Spacing token | -| ------------------------------------------------------------ | ------------------------- | ---------- | ------------- | -| Toggle small | height | 16 / 1 | – | -| | width | 32 / 2 | – | -| Handle | height, width | 10 / 0.625 | – | -| Label | margin-top, margin-bottom | 16 / 1 | `$spacing-05` | +| Element | Property | px / rem | Spacing token | +| ------------ | ------------------------- | ---------- | ------------- | +| Toggle small | height | 16 / 1 | – | +| | width | 32 / 2 | – | +| Handle | height, width | 10 / 0.625 | – | +| Label | margin-top, margin-bottom | 16 / 1 | `$spacing-05` |
diff --git a/src/pages/developing/angular-tutorial/step-3.mdx b/src/pages/developing/angular-tutorial/step-3.mdx index f12c1964862..c6f9095296b 100644 --- a/src/pages/developing/angular-tutorial/step-3.mdx +++ b/src/pages/developing/angular-tutorial/step-3.mdx @@ -401,7 +401,9 @@ the data table rows. ```javascript path=src/app/repositories/repo-table/repo-table.component.ts // If we're here, we've got our data! -this.model.data = this.prepareData(response.data.organization.repositories.nodes); +this.model.data = this.prepareData( + response.data.organization.repositories.nodes +); ``` Then, in `ngOnInit()` delete the static rows since we no longer need them. diff --git a/src/pages/developing/angular-tutorial/step-5.mdx b/src/pages/developing/angular-tutorial/step-5.mdx index 994629e83ec..6a027b6c1c7 100644 --- a/src/pages/developing/angular-tutorial/step-5.mdx +++ b/src/pages/developing/angular-tutorial/step-5.mdx @@ -152,10 +152,10 @@ first. npm run build ``` -Looking at `package.json`, you'll find `ng build`. This -builds the app for production to the `dist` folder. It bundles Angular in -production mode and optimizes the build for the best performance. It even goes -so far to minify files and include hashes in filenames for caching. +Looking at `package.json`, you'll find `ng build`. This builds the app for +production to the `dist` folder. It bundles Angular in production mode and +optimizes the build for the best performance. It even goes so far to minify +files and include hashes in filenames for caching. As a lot of this may seem like magic since the build configuration came from Create React App, go ahead and check out their