Style doc update

carbon-design-system · Jan 28, 2025 · 33bcb26 · 33bcb26
1 parent f193125
commit 33bcb26
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 42 deletions.
diff --git a/src/pages/components/toggle/images/toggle-style-color.png b/src/pages/components/toggle/images/toggle-style-color.png
diff --git a/src/pages/components/toggle/images/toggle-style-default-spec.png b/src/pages/components/toggle/images/toggle-style-default-spec.png
diff --git a/src/pages/components/toggle/style.mdx b/src/pages/components/toggle/style.mdx
@@ -25,10 +25,13 @@ structure, and size.
 
 ## Color
 
+Both the default and small toggle variants share the same color and interactive
+state properties.
+
 | Element          | Property         | Color token        |
 | ---------------- | ---------------- | ------------------ |
-| Label text       | text color       | `$text-secondary`  |
-| Action text      | text color       | `$text-primary`    |
+| Label text       | text-color       | `$text-secondary`  |
+| State text       | text-color       | `$text-primary`    |
 | Background (off) | background-color | `$toggle-off`      |
 | Handle (off)     | background-color | `$icon-on-color`   |
 | Background (on)  | background-color | `$support-success` |
@@ -38,68 +41,68 @@ structure, and size.
 <Row>
 <Column colLg={8}>
 
-![On and off toggle states](images/toggle-style-color.png)
+![On and off states of default and small toggle](images/toggle-style-color.png)
 
 </Column>
 </Row>
 
-<Caption>On and off toggle states</Caption>
+<Caption>On and off states of default and small toggle</Caption>
 
 ### Interactive states
 
 The default and small toggle can be switched on and off across focus, disabled,
 and read-only states.
 
-| State     | Element     | Property         | Color token               |
-| --------- | ----------- | ---------------- | ------------------------- |
-| Focus     | Toggle      | border           | `$focus`                  |
-| Disabled  | Label text  | text color       | `$text-disabled`          |
-|           | Action text | text color       | `$text-disabled`          |
-|           | Background  | background-color | `$button-disabled`        |
-|           | Handle      | background-color | `$icon-on-color-disabled` |
-|           | Checkmark   | inner fill       | `button-disabled`         |
-| Read-only | Label text  | text color       | `$text-secondary`         |
-|           | Action text | text color       | `$text-primary`           |
-|           | Background  | background-color | transparent               |
-|           | Border      | border           | `border-subtle` \*        |
-|           | Handle      | background-color | `$icon-primary`           |
-
-<Caption>
-  * Denotes a contextual color token that will change values based on the layer
+| State     | Element    | Property         | Color token               |
+| --------- | ---------- | ---------------- | ------------------------- |
+| Focus     | Toggle     | border           | `$focus`                  |
+| Disabled  | Label text | text-color       | `$text-disabled`          |
+|           | State text | text-color       | `$text-disabled`          |
+|           | Background | background-color | `$button-disabled`        |
+|           | Handle     | background-color | `$icon-on-color-disabled` |
+|           | Checkmark  | inner fill       | `$button-disabled`        |
+| Read-only | Label text | text-color       | `$text-secondary`         |
+|           | State text | text-color       | `$text-primary`           |
+|           | Background | background-color | transparent               |
+|           | Border     | border           | `$border-subtle` \*       |
+|           | Handle     | background-color | `$icon-primary`           |
+
+<Caption fullWidth>
+  \* Denotes a contextual color token that will change values based on the layer
   it is placed on.
 </Caption>
 
 <Row>
 <Column colLg={8}>
 
-![Interactive toggle states](images/toggle-style-states.png)
+![Example of default and small toggle interactive state color](images/toggle-style-states.png)
 
 </Column>
 </Row>
 
-<Caption>Interactive toggle states.</Caption>
+<Caption>Example of default and small toggle interactive state color</Caption>
 
 ## 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 text  | 12 / 0.75          | Regular / 400 | `$label-01`        |
-| Action text | 14 / 0.875         | Regular / 400 | `$body-compact-01` |
+| Element    | Font-size (px/rem) | Font-weight   | Type token         |
+| ---------- | ------------------ | ------------- | ------------------ |
+| Label text | 12 / 0.75          | Regular / 400 | `$label-01`        |
+| State text | 14 / 0.875         | Regular / 400 | `$body-compact-01` |
 
 ## Structure
 
-### Default toggle
+### Default toggle structure
 
-| Element     | Property                  | px / rem  | Spacing token |
-| ----------- | ------------------------- | --------- | ------------- |
-| Toggle      | width                     | 48 / 3    | –             |
-|             | height                    | 24 / 1.5  | –             |
-| Handle      | height, width             | 18 / 1.25 | –             |
-| Label text  | margin-top, margin-bottom | 16 / 1    | `$spacing-05` |
-| Action 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 text | margin-top, margin-bottom | 16 / 1    | `$spacing-05` |
+| State text | margin-left               | 8 / 0.5   | `$spacing-03` |
 
 <div className="image--fixed">
 
@@ -111,14 +114,15 @@ phrase and any proper nouns capitalized, and no more than three words.
   Structure and spacing measurements for default toggle | px / rem
 </Caption>
 
-### Small toggle
+### Small toggle structure
 
-| Element     | Property      | px / rem   | Spacing token |
-| ----------- | ------------- | ---------- | ------------- |
-| Toggle      | width         | 32 / 2     | –             |
-|             | height        | 16 / 1     | –             |
-| Handle      | height, width | 10 / 0.625 | `$spacing-03` |
-| Action text | margin left   | 8 / 0.5    | `$spacing-03` |
+| Element    | Property                  | px / rem   | Spacing token |
+| ---------- | ------------------------- | ---------- | ------------- |
+| Toggle     | width                     | 32 / 2     | –             |
+|            | height                    | 16 / 1     | –             |
+| Handle     | height, width             | 10 / 0.625 | `$spacing-03` |
+| Label text | margin-top, margin-bottom | 16 / 1     | `$spacing-05` |
+| State text | margin left               | 8 / 0.5    | `$spacing-03` |
 
 <div className="image--fixed">
 
@@ -143,7 +147,7 @@ phrase and any proper nouns capitalized, and no more than three words.
 
 </div>
 
-<Caption>Toggle sizes | px / rem</Caption>
+<Caption>Default, and small sizes of toggle | px / rem</Caption>
 
 ## Feedback