Merge pull request #514 from dxc-technology/component-chip

Component chip documentation update

Author: aweell

contributing/assets/components/chip_images.xd

@@ -10,12 +10,27 @@ Chips are elements that represent status, complementary information, or associat
 
 ## States
 
-The only interactive element on the chip component is the prefix/suffix and its states are: **enabled** and **focus**:
+The chip component container states are: **enabled** and **disabled**:
 
-![Chip prefix and suffix states](images/chip_states.png)
+![Chip container states](images/chip_states_container.png)
+
+_Chip container states_
+
+The chip action item has the following states: **enabled**, **hover**, **focus**, **active**, and **disabled**:
+
+![Chip prefix and suffix states](images/chip_states_action.png)
 
 _Chip prefix and suffix states_
 
+## Anatomy
+
+![Ccomponent anatomy](images/chip_anatomy.png)
+
+1. Container
+2. Prefix _(Optional)_
+3. Label
+4. Suffix _(Optional)_
+
 ## Design Specifications
 
 ![Component chip design specifications](images/chip_specs.png)
@@ -24,31 +39,49 @@ _Component chip design specifications_
 
 ### Color
 
+#### On-light
+
 | Component token           | Element                   | Token                   | Value     |
 | :------------------------ | :------------------------ | :---------------------- | :-------- |
 | `backgroundColor`         | Chip container            | `color-grey-200`        | #e6e6e6   |
 | `disabledBackgroundColor` | Chip container:disabled   | `color-grey-100`        | #f2f2f2   |
 | `fontcolor`               | Label                     | `color-black`           | #000000	  |
-| `fontcolor`               | Label:disabled            | `color-grey-500`        | #999999	  |
-| `focusColor`              | Focus outline             | `color-blue-800`        | #0067b3	  |
+| `disabledFontcolor`       | Label:disabled            | `color-grey-500`        | #999999	  |
+| `focusColor`              | Focus outline             | `color-blue-600`        | #0095ff	  |
 | `iconColor`               | Icon                      | `color-black`           | #000000	  |
-| `iconColor`               | Icon:disabled             | `color-grey-500`        | #999999	  |
+| `disabledIconColor`       | Icon:disabled             | `color-grey-500`        | #999999	  |
 
+#### On-dark
 
-### Size
+| Component token                 | Element                   | Token                   | Value     |
+| :------------------------------ | :------------------------ | :---------------------- | :-------- |
+| `backgroundColorOnDark`         | Chip container            | `color-grey-700`        | #666666   |
+| `disabledBackgroundColorOnDark` | Chip container:disabled   | `color-grey-800`        | #4d4d4d   |
+| `fontcolorOnDark`               | Label                     | `color-white`           | #ffffff   |
+| `disabledfontcolorOnDark`       | Label:disabled            | `color-grey-500`        | #999999	|
+| `focusColorOnDark`              | Focus outline             | `color-blue-600`        | #0095ff	|
+| `iconColorOnDark`               | Icon                      | `color-white`           | #ffffff	|
+| `iconColorOnDark`               | Icon:disabled             | `color-grey-500`        | #999999	|
 
-| Property		    | Element			                  | Value		      |
-| --------------- | ----------------------------- | -------------	|
-| `min-height`		| Chip container		            | 40px		      |
-| `height`		    | Prefix/Suffix		              | 24px		      |
-| `width`		      | Prefix/Suffix				          | 24px		      |
+
+### Typography
+
+| Component token          | Element          | Core token                 | Value                      |
+| :----------------------- | :--------------- | :------------------------- | :------------------------- |
+| `fontFamily`             | Label            | `font-family-sans`         | 'Open Sans', sans-serif    |
+| `fontSize`               | Label            | `font-scale-03`            | 1rem / 16px                |
+| `fontStyle`              | Label            | `font-style-normal`        | normal                     |
+| `fontWeight`             | Label            | `font-weight-regular`      | 400                        |
 
 ### Spacing
 
-| Property		          | Element		            | Value	|
-| ---------------------	| --------------------- | ----- |
-| `padding-left/right`	| Chip container		    | 16px	|
-| `margin`	            | Prefix/Suffix			    | 8px	  |
+| Component token		    | Element		        | Core token      | Value	          |
+| :-----------------------	| :-------------------- | :-------------- | :---------------- |
+| `labelMarginLeft`	        | Label		            | `spacing-03`    | 0.5rem / 8px	  |
+| `labelMarginRight`	    | Label		            | `spacing-03`    | 0.5rem / 8px	  |
+| `containerPaddingLeft`	| Container		        | `spacing-03`    | 0.5rem / 8px	  |
+| `containerPaddingRight`	| Container		        | `spacing-03`    | 0.5rem / 8px	  |
+
 
 
 ### Border
@@ -63,13 +96,11 @@ _Component chip design specifications_
 | `border-radius`          | Focus border     | `border-radius-medium`     | 0.25rem / 4px    |
 
 
-### Typography
-
-| Property  	  | Element	  | Value	|
-| ------------- | --------- | ----- |
-| `font-size`	  | Label 	  | 16px	|
-| `font-weight`	| Label		  | 400	  |
+### Size
 
+| Component token		    | Element		        | Core token          | Value	        |
+| :-----------------------	| :-------------------- | :------------------ | :-------------- |
+| `iconSize`  		        | Prefix/Suffix		    | `size-icon-large`	  | 24x24px         |
 
 
 ## Links and references