Upgrade to Prose v1.5
Here's a matrix of prop changes from Prose v1 to Prose v1.5. It's arguable easier to just use the CSS from this site with your components so you guarantee the correct values for all properties.
Global
| prop | old | new | token |
|---|---|---|---|
| color: | #00758E | #0600B4 | --prs-c-primary |
| font: | Source Sans Pro | Figtree | --prs-ff-sans |
Components
Accordion
Default
| prop | old | new | token |
|---|---|---|---|
| border: | #DDD | #CBCACC | --prs-c-gray-300 |
| color: | #080808 | #1D1B26 | --prs-c-gray-900 |
Alert
Default
| prop | old | new | token |
|---|---|---|---|
| border: | #00758E | #0600B4 | --prs-c-primary |
| background: | #CFF3F9 | #EADFF7 | --prs-c-primary-100 |
| color: | #080808 | #1D1B26 | --prs-c-gray-900 |
Success
| prop | old | new | token |
|---|---|---|---|
| border: | #3B822E | #00986A | --prs-c-success-800 |
| background: | #DAF4D4 | #E4FCF0 | --prs-c-success-100 |
Warning
| prop | old | new | token |
|---|---|---|---|
| border: | #B79E25 | #657200 | --prs-c-warning-900 |
| background: | #FFFBD7 | #F9FFE4 | --prs-c-warning-100 |
Danger/Error
| prop | old | new | token |
|---|---|---|---|
| border: | #DA1B2C | #E0205D | --prs-c-danger |
| background: | #FFE7E5 | #F9E5E8 | --prs-c-danger-100 |
Badge
Default
| prop | old | new | token |
|---|---|---|---|
| border: | #C8C8C8 | #CBCACC | --prs-c-gray-300 |
| background: | #F3F3F3 | #F1F0F1 | --prs-c-gray-100 |
| color: | #383838 | #494751 | --prs-c-gray-700 |
Breadcrumb
Default
| prop | old | new | token |
|---|---|---|---|
| color: | #00758E | #0600B4 | --prs-c-primary |
| color/hover: | #205460 | #0500A3 | --prs-c-primary-600 |
| caret/current: | #080808 | #1D1B26 | --prs-c-gray-900 |
Button
Primary / Standard
| prop | old | new | token |
|---|---|---|---|
| background: | #00758E | #0600B4 | --prs-c-primary |
| hover_background: | #205460 | #010052 | --prs-c-primary-900 |
Primary / Warning
| prop | old | new | token |
|---|---|---|---|
| background: | #DA1B2C | #E0205D | --prs-c-danger |
| hover_background: | #A51426 | #8E143B | --prs-c-danger-800 |
Primary / Confirmation
| prop | old | new | token |
|---|---|---|---|
| background: | #3B822E | #00F0A8 | --prs-c-success |
| hover_background: | #2C5E20 | #00986A | --prs-c-success-800 |
| color: | #FFF | #003626 | --prs-c-success-950 |
Secondary / Standard
| prop | old | new | token |
|---|---|---|---|
| color/border: | #00758E | #0600B4 | --prs-c-primary |
| hover_background: | #CFF3F9 | #EADFF7 | --prs-c-primary-100 |
| hover_color/border: | #242424 | #0600B4 | --prs-c-primary |
Secondary / Warning
| prop | old | new | token |
|---|---|---|---|
| color/border: | #DA1B2C | #C81D53 | --prs-c-danger-600 |
| hover_background: | #FFE7E5 | #F9E5E8 | --prs-c-danger-100 |
| hover_color/border: | #242424 | #8E143B | --prs-c-danger-800 |
Secondary / Confirmation
| prop | old | new | token |
|---|---|---|---|
| color/border: | #3B822E | #006B4B | --prs-c-success-900 |
| hover_background: | #DAF4D4 | #C6F9E0 | --prs-c-success-200 |
| hover_color/border: | #242424 | #003626 | --prs-c-success-950 |
Tertiary / Standard
| prop | old | new | token |
|---|---|---|---|
| color/border: | #00758E | #0600B4 | --prs-c-primary |
Tertiary / Warning
| prop | old | new | token |
|---|---|---|---|
| color/border: | #DA1B2C | #C81D53 | --prs-c-danger-600 |
Tertiary / Confirmation
| prop | old | new | token |
|---|---|---|---|
| color/border: | #3B822E | #006B4B | --prs-c-success-900 |
Focus / Standard
| prop | old | new | token |
|---|---|---|---|
| outline: | #00758E | #0600B4 | --prs-c-primary |
Focus / Warning
| prop | old | new | token |
|---|---|---|---|
| outline: | #DA1B2C | #C81D53 | --prs-c-danger-600 |
Focus / Confirmation
| prop | old | new | token |
|---|---|---|---|
| outline: | #3B822E | #006B4B | --prs-c-success-900 |
Disabled / Primary
| prop | old | new | token |
|---|---|---|---|
| outline: | #C8C8C8 | #A5A4A7 | --prs-c-gray-400 |
Disabled / Secondary + Tertiary
| prop | old | new | token |
|---|---|---|---|
| outline: | #989898 | #807F82 | --prs-c-gray |
Card
Default
| prop | old | new | token |
|---|---|---|---|
| border: | #DDD | #CBCACC | --prs-c-gray-300 |
| color: | #080808 | #1D1B26 | --prs-c-gray-900 |
Checkbox
Unchecked
| prop | old | new | token |
|---|---|---|---|
| border: | #686868 | #69686F | --prs-c-gray |
| label: | #080808 | #1D1B26 | --prs-c-gray-900 |
Checked
| prop | old | new | token |
|---|---|---|---|
| background: | #00758E | #0600B4 | --prs-c-primary |
Focus
| prop | old | new | token |
|---|---|---|---|
| outline: | #00758E | #0600B4 | --prs-c-primary |
Disabled
| prop | old | new | token |
|---|---|---|---|
| border/glyph/label: | #C8C8C8 | #CBCACC | --prs-c-gray-300 |
| background: | #F3F3F3 | #F1F0F1 | --prs-c-gray-100 |
Chip
Default
| prop | old | new | token |
|---|---|---|---|
| background: | #DDD | #E0DFE0 | --prs-c-gray-200 |
| color: | #080808 | #1D1B26 | --prs-c-gray-900 |
| hover_background: | #C8C8C8 | #CBCACC | --prs-c-gray-300 |
| focus_outline: | #00758E | #0600B4 | --prs-c-primary |
Active
| prop | old | new | token |
|---|---|---|---|
| background: | #CFF3F9 | #EADFF7 | --prs-c-primary-100 |
| color: | #205460 | #04006E | --prs-c-primary-800 |
| hover_background: | #A2D6DD | #CAB2ED | --prs-c-primary-200 |
| hover_color: | #080808 | #1D1B26 | --prs-c-gray-900 |
Dialog
Default
| prop | old | new | token |
|---|---|---|---|
| border: | #DDD | #CBCACC | --prs-c-gray-300 |
Input
Default
| prop | old | new | token |
|---|---|---|---|
| border: | #686868 | #807F82 | --prs-c-gray |
| color: | #080808 | #1D1B26 | --prs-c-gray-900 |
| placeholder: | #686868 | #807F82 | --prs-c-gray |
| focus_outline: | #00758E | #0600B4 | --prs-c-primary |
Disabled
| prop | old | new | token |
|---|---|---|---|
| border: | #686868 | #807F82 | --prs-c-gray |
| background: | #F3F3F3 | #F1F0F1 | --prs-c-gray-100 |
| color: | #686868 | #807F82 | --prs-c-gray |
Menu
Default
| prop | old | new | token |
|---|---|---|---|
| border: | #DDD | #CBCACC | --prs-c-gray-300 |
| color: | #00758E | #0600B4 | --prs-c-primary |
| hover_background: | #00758E | #0600B4 | --prs-c-primary |
Pagination
Default
| prop | old | new | token |
|---|---|---|---|
| active: | #00758E | #0600B4 | --prs-c-primary |
| disabled: | #C8C8C8 | #A5A4A7 | --prs-c-gray-400 |
| hover_background: | #F3F3F3 | #E0DFE0 | --prs-c-gray-200 |
| hover_color: | #080808 | #1D1B26 | --prs-c-gray-900 |
Progress
Indicator
| prop | old | new | token |
|---|---|---|---|
| border: | #DDD | #CBCACC | --prs-c-gray-300 |
| fill: | #DA1B2C | #0600B4 | --prs-c-primary |
Radio
Unchecked
| prop | old | new | token |
|---|---|---|---|
| border: | #686868 | #69686F | --prs-c-gray-600 |
Checked
| prop | old | new | token |
|---|---|---|---|
| border: | #00758E | #0600B4 | --prs-c-primary |
| fill: | #00758E | #0600B4 | --prs-c-primary |
Focus
| prop | old | new | token |
|---|---|---|---|
| outline: | #00758E | #0600B4 | --prs-c-primary |
Disabled
| prop | old | new | token |
|---|---|---|---|
| border/dot/label: | #C8C8C8 | #CBCACC | --prs-c-gray-300 |
| background: | #F3F3F3 | #F1F0F1 | --prs-c-gray-100 |
Tab
Inactive
| prop | old | new | token |
|---|---|---|---|
| color: | #686868 | #69686F | --prs-c-gray-600 |
| hover_border: | #FFAFAF | #EDA3B1 | --prs-c-danger-300 |
Active
| prop | old | new | token |
|---|---|---|---|
| color: | #080808 | #1D1B26 | --prs-c-gray-900 |
| border: | #DA1B2C | #E0205D | --prs-c-danger |
Badge
| prop | old | new | token |
|---|---|---|---|
| background: | #00758E | #0600B4 | --prs-c-primary |
Table
Default
| prop | old | new | token |
|---|---|---|---|
| border: | #DDD | #CBCACC | --prs-c-gray-300 |
| th|td-sublabel: | #686868 | #69686F | --prs-c-gray-600 |
| td|th-sublabel: | #242424 | #1D1B26 | --prs-c-gray-900 |
| striped: | #F8F8F8 | #F1F0F1 | --prs-c-gray-100 |
Toggle
Unchecked
| prop | old | new | token |
|---|---|---|---|
| background: | #686868 | #A5A4A7 | --prs-c-gray |
Checked
| prop | old | new | token |
|---|---|---|---|
| background: | #00758E | #0600B4 | --prs-c-primary |
Focus
| prop | old | new | token |
|---|---|---|---|
| outline: | #00758E | #0600B4 | --prs-c-primary |
Tooltip
Default
| prop | old | new | token |
|---|---|---|---|
| background: | #142A35 | #1D1B26 | --prs-c-gray-900 |