Component chip specs update

guidelines/components/chip/README.md

@@ -2,50 +2,69 @@
 
 Chips are elements that represent status, complementary information, or association between elements.
 
-## Appereance
+## Usage
 
-A rounded component defined by a label or a graphic element to indicate the information to be communicated to the user. Can be clickable on the icons, to perform an action in form of triggering a dialog or a modification in other element of the user interface. Also, they can be static or use it to categorize a different kinds of data.
+* Do not use chips instead of buttons they have a total different aim in the UI
+* Make clear and simple the content of the label
+* Use chips to make tasks easier for the user
 
-![Chip appereance](images/chip_app.png)
+## States
 
-### States
+The only interactive element on the chip component is the prefix/suffix and its states are: **enabled** and **focus**:
 
-The only state that the design system specifies for the chip component is the hover interaction, which is very basic, changing the cursor from default to pointer in the case that the element is clickable. With the static version, the hover action doesn't need to be contemplated.
+![Chip prefix and suffix states](images/chip_states.png)
 
-![Chip states](images/chip_states.png)
+_Chip prefix and suffix states_
 
-## Design tokens
+## Design Specifications
 
-| Tokens                  | Default value |
-| ----------------------- | ------------: |
-| backgroundColor         |     `#EEEEEE` |
-| outlinedColor           |           `-` |
-| fontColor               |     `#000000` |
-| disabledBackgroundColor |     `#F9F9F9` |
-| disabledFontColor       |     `#B1B1B1` |
+![Component chip design specifications](images/chip_specs.png)
+
+_Component chip design specifications_
+
+### Color
+
+| Component token           | Element                   | Token             | Value     |
+| ------------------------- | ------------------------- | ----------------- | --------- |
+| `backgroundColor`         | Chip container            | `Hal-Grey-S-90`   | #e6e6e6   |
+| `disabledBackgroundColor` | Chip container:disabled   | `Hal-Grey-S-95`   | #f2f2f2   |
+| `fontcolor`               | Label                     | `Hal-Black`       | #000000	  |
+| `fontcolor`               | Label:disabled            | `Hal-Grey-L-60`   | #999999	  |
+| `focusColor`              | Focus outline             | `Hal-Blue-s-35`   | #0067b3	  |
+
+
+### Size
+
+| Property		    | Element			                  | Value		      |
+| --------------- | ----------------------------- | -------------	|
+| `height`		    | Chip container		            | 40px		      |
+| `height`		    | Prefix/Suffix		              | 24px		      |
+| `width`		      | Prefix/Suffix				          | 24px		      |
+
+### Spacing
+
+| Property		          | Element		            | Value	|
+| ---------------------	| --------------------- | ----- |
+| `padding-left/right`	| Chip container		    | 16px	|
+| `margin`	            | Prefix/Suffix			    | 8px	  |
+
+
+### Border
+
+| Property		    | Element			                  | Value		      |
+| --------------- | ----------------------------- | -------------	|
+| `border`		    | Focus outline			            | 2px solid	    |
+| `border-radius`	| Chip container		            | 80px		      |
+
+
+### Typography
+
+| Property  	  | Element	  | Value	|
+| ------------- | --------- | ----- |
+| `font-size`	  | Label 	  | 16px	|
+| `font-weight`	| Label		  | 400	  |
 
-## Design Specifications
 
-| Property                    |     Value      |
-| --------------------------- | :------------: |
-| Padding                     |  `20px 10px`   |
-| Width                       | `fit-content`  |
-| Background Color            |   `#EEEEEE`    |
-| Color                       |    `black`     |
-| Disabled                    | `0.34 opacity` |
-| Border Radius               |     `50%`      |
-| Border Width                |     `1px`      |
-| Space between text and icon |     `10px`     |
-| Icon                        |  `24px 24px`   |
-
-![Chip states](images/chip_specs.png)
-
-### User Interface Design Considerations
-
-- Use the color with some meaning, not for purely decoration
-- Do not use chips instead of buttons they have a total different aim in the UI
-- Make clear and simple the content of the label
-- Use chips to make tasks easier for the user
 
 ## Links and references