@pernod-ricard/archipelago-core
v1.0.1
Published
Core library of Pernod Ricard's Archipelago Design System
Downloads
248
Keywords
Readme
Archipelago Core
Foundation
Colors
Semantical palette
Blue / Primary / Transparent
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | color | blue | 05 | | --pr-color-blue-05 | #F2F5FF | | pr | color | blue | 10 | | --pr-color-blue-10 | #D6DEFF | | pr | color | blue | 20 | | --pr-color-blue-20 | #96A8FA | | pr | color | blue | 30 | | --pr-color-blue-30 | #4765FF | | pr | color | blue | 40 | | --pr-color-blue-40 | #2F49F4 | | pr | color | blue | 50 | | --pr-color-blue-50 | #0B2BCB | | pr | color | blue | 60 | | --pr-color-blue-60 | #01129C | | pr | color | blue | 70 | | --pr-color-blue-70 | #0C1875 | | pr | color | blue | op15 | | --pr-color-blue-op15 | #4765FF26 | | pr | color | blue | op50 | | --pr-color-blue-op50 | #4765FF80 | | pr | color | blue | op70 | | --pr-color-blue-op70 | #4765FFB3 |
Green / Success / Transparent
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | color | green | 05 | | --pr-color-green-05 | #F2FFF9 | | pr | color | green | 10 | | --pr-color-green-10 | #CDF7E4 | | pr | color | green | 20 | | --pr-color-green-20 | #72E4B3 | | pr | color | green | 30 | | --pr-color-green-30 | #2BD68E | | pr | color | green | 40 | | --pr-color-green-40 | #13BF7A | | pr | color | green | 50 | | --pr-color-green-50 | #07A669 | | pr | color | green | 60 | | --pr-color-green-60 | #008756 | | pr | color | green | 70 | | --pr-color-green-70 | #0A6141 | | pr | color | green | op15 | | --pr-color-green-op15 | #2BD68E26 | | pr | color | green | op50 | | --pr-color-green-op50 | #2BD68E80 |
Orange / Warning / Transparent
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | color | orange | 05 | | --pr-color-orange-05 | #FFF6F2 | | pr | color | orange | 10 | | --pr-color-orange-10 | #FFEEE5 | | pr | color | orange | 20 | | --pr-color-orange-20 | #FFAE85 | | pr | color | orange | 30 | | --pr-color-orange-30 | #FA854B | | pr | color | orange | 40 | | --pr-color-orange-40 | #E56B2E | | pr | color | orange | 50 | | --pr-color-orange-50 | #CC5418 | | pr | color | orange | 60 | | --pr-color-orange-60 | #B23B00 | | pr | color | orange | 70 | | --pr-color-orange-70 | #8C380E | | pr | color | orange | op15 | | --pr-color-orange-op15 | #FA854B26 | | pr | color | orange | op50 | | --pr-color-orange-op50 | #FA854B80 |
Red / Danger / Transparent
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | color | red | 05 | | --pr-color-red-05 | #FFF2F3 | | pr | color | red | 10 | | --pr-color-red-10 | #FFE5E6 | | pr | color | red | 20 | | --pr-color-red-20 | #FF8585 | | pr | color | red | 30 | | --pr-color-red-30 | #FA4B4B | | pr | color | red | 40 | | --pr-color-red-40 | #E5312E | | pr | color | red | 50 | | --pr-color-red-50 | #CC1E18 | | pr | color | red | 60 | | --pr-color-red-60 | #B20000 | | pr | color | red | 70 | | --pr-color-red-70 | #8C0E0E | | pr | color | red | op15 | | --pr-color-red-op15 | #FA4B4B26 | | pr | color | red | op50 | | --pr-color-red-op50 | #FA4B4B80 |
Neutral palette
Grayscale
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | color | grayscale | 10 | | --pr-color-grayscale-10 | #FAFAFA | | pr | color | grayscale | 15 | | --pr-color-grayscale-15 | #F2F2F2 | | pr | color | grayscale | 20 | | --pr-color-grayscale-20 | #E6E6E8 | | pr | color | grayscale | 30 | | --pr-color-grayscale-30 | #CCCDD0 | | pr | color | grayscale | 40 | | --pr-color-grayscale-40 | #B3B4B9 | | pr | color | grayscale | 50 | | --pr-color-grayscale-50 | #999AA1 | | pr | color | grayscale | 60 | | --pr-color-grayscale-60 | #80828A | | pr | color | grayscale | 70 | | --pr-color-grayscale-70 | #666872 | | pr | color | grayscale | 80 | | --pr-color-grayscale-80 | #4D4F5B | | pr | color | grayscale | 90 | | --pr-color-grayscale-90 | #333643 | | pr | color | grayscale | 100 | | --pr-color-grayscale-100 | #1A1D2C | | pr | color | grayscale | white | | --pr-color-grayscale-white | #FFFFFF |
Backgrounds
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | color | | bright | | --pr-color-background-bright | #F5F7F9 | | pr | color | | dark | | --pr-color-background-dark | #272B3F |
Transparencies
Black
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | color | black | 05 | | --pr-color-black-05 | #0003140D | | pr | color | black | 10 | | --pr-color-black-10 | #0003141A | | pr | color | black | 20 | | --pr-color-black-20 | #00031433 | | pr | color | black | 80 | | --pr-color-black-80 | #000314CC | | pr | color | black | 90 | | --pr-color-black-90 | #000314E6 |
White
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | color | white | 05 | | --pr-color-white-05 | #FFFFFF0D | | pr | color | white | 10 | | --pr-color-white-10 | #FFFFFF1A | | pr | color | white | 20 | | --pr-color-white-20 | #FFFFFF33 | | pr | color | white | 40 | | --pr-color-white-40 | #FFFFFF66 | | pr | color | white | 80 | | --pr-color-white-80 | #FFFFFFCC | | pr | color | white | 90 | | --pr-color-white-90 | #FFFFFFE6 |
Additional palette
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | color | beet | 10 | | --pr-color-beet-10 | #F7DEFF | | pr | color | beet | 20 | | --pr-color-beet-20 | #E68AFF | | pr | color | beet | 30 | | --pr-color-beet-30 | #D754F7 | | pr | color | beet | 40 | | --pr-color-beet-40 | #CA38EB | | pr | color | beet | 50 | | --pr-color-beet-50 | #B31FD1 | | pr | color | beet | 60 | | --pr-color-beet-60 | #9C0EB5 | | pr | color | blueberry | 10 | | --pr-color-blueberry-10 | #E4DEFF | | pr | color | blueberry | 20 | | --pr-color-blueberry-20 | #B39EFF | | pr | color | blueberry | 30 | | --pr-color-blueberry-30 | #9072F2 | | pr | color | blueberry | 40 | | --pr-color-blueberry-40 | #7048E8 | | pr | color | blueberry | 50 | | --pr-color-blueberry-50 | #5224D1 | | pr | color | blueberry | 60 | | --pr-color-blueberry-60 | #4012B5 | | pr | color | curacao | 10 | | --pr-color-curacao-10 | #CAE3FC | | pr | color | curacao | 20 | | --pr-color-curacao-20 | #79B9FC | | pr | color | curacao | 30 | | --pr-color-curacao-30 | #65AAF7 | | pr | color | curacao | 40 | | --pr-color-curacao-40 | #468FE8 | | pr | color | curacao | 50 | | --pr-color-curacao-50 | #1F6ACC | | pr | color | curacao | 60 | | --pr-color-curacao-60 | #0048AD | | pr | color | ice | 10 | | --pr-color-ice-10 | #ACF3EA | | pr | color | ice | 20 | | --pr-color-ice-20 | #5CE5DC | | pr | color | ice | 30 | | --pr-color-ice-30 | #1DC3B5 | | pr | color | ice | 40 | | --pr-color-ice-40 | #10A399 | | pr | color | ice | 50 | | --pr-color-ice-50 | #0B827C | | pr | color | ice | 60 | | --pr-color-ice-60 | #03615E | | pr | color | rose | 10 | | --pr-color-rose-10 | #FFDEF1 | | pr | color | rose | 20 | | --pr-color-rose-20 | #F084BF | | pr | color | rose | 30 | | --pr-color-rose-30 | #F059A9 | | pr | color | rose | 40 | | --pr-color-rose-40 | #E5328F | | pr | color | rose | 50 | | --pr-color-rose-50 | #CC1470 | | pr | color | rose | 60 | | --pr-color-rose-60 | #B20056 | | pr | color | safran | 10 | | --pr-color-safran-10 | #FFE3D4 | | pr | color | safran | 20 | | --pr-color-safran-20 | #FCB890 | | pr | color | safran | 30 | | --pr-color-safran-30 | #F2813A | | pr | color | safran | 40 | | --pr-color-safran-40 | #E56C1C | | pr | color | safran | 50 | | --pr-color-safran-50 | #CC5B0A | | pr | color | safran | 60 | | --pr-color-safran-60 | #B24D00 |
Data visualizations
Categorical palette
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | color | data | 01 | on-dark | --pr-color-data-01-on-dark | #B39EFF | | pr | color | data | 01 | on-light | --pr-color-data-01-on-light | #7048E8 | | pr | color | data | 02 | on-dark | --pr-color-data-02-on-dark | #E56C1C | | pr | color | data | 02 | on-light | --pr-color-data-02-on-light | #B24D00 | | pr | color | data | 03 | on-dark | --pr-color-data-03-on-dark | #5CE5D8 | | pr | color | data | 03 | on-light | --pr-color-data-03-on-light | #10A399 | | pr | color | data | 04 | on-dark | --pr-color-data-04-on-dark | #CA38EB | | pr | color | data | 04 | on-light | --pr-color-data-04-on-light | #9C0EB5 | | pr | color | data | 05 | on-dark | --pr-color-data-05-on-dark | #F084BF | | pr | color | data | 05 | on-light | --pr-color-data-05-on-light | #E5328F | | pr | color | data | 06 | on-dark | --pr-color-data-06-on-dark | #7048E8 | | pr | color | data | 06 | on-light | --pr-color-data-06-on-light | #4012B5 | | pr | color | data | 07 | on-dark | --pr-color-data-07-on-dark | #F2813A | | pr | color | data | 07 | on-light | --pr-color-data-07-on-light | #E56C1C | | pr | color | data | 08 | on-dark | --pr-color-data-08-on-dark | #10A399 | | pr | color | data | 08 | on-light | --pr-color-data-08-on-light | #03615E | | pr | color | data | 09 | on-dark | --pr-color-data-09-on-dark | #E58AFF | | pr | color | data | 09 | on-light | --pr-color-data-09-on-light | #B20056 | | pr | color | data | 10 | on-dark | --pr-color-data-10-on-dark | #E5328F | | pr | color | data | 10 | on-light | --pr-color-data-10-on-light | #CA38EB | | pr | color | data | 11 | on-dark | --pr-color-data-11-on-dark | #FCB890 | | pr | color | data | 11 | on-light | --pr-color-data-11-on-light | #CC5B0A | | pr | color | data | 12 | on-dark | --pr-color-data-12-on-dark | #1DC3B5 | | pr | color | data | 12 | on-light | --pr-color-data-12-on-light | #0B827C | | pr | color | data | 13 | on-dark | --pr-color-data-13-on-dark | #D754F7 | | pr | color | data | 13 | on-light | --pr-color-data-13-on-light | #5224D1 | | pr | color | data | 14 | on-dark | --pr-color-data-14-on-dark | #9072F2 | | pr | color | data | 14 | on-light | --pr-color-data-14-on-light | #CC1470 | | pr | color | data | 15 | on-dark | --pr-color-data-15-on-dark | #F059A9 | | pr | color | data | 15 | on-light | --pr-color-data-15-on-light | #B31FD1 |
Typography
Font family
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | font | family | | | --pr-font-family | Manrope |
Font weight
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | font | weight | bold | | --pr-font-weight-bold | font-weight: 700 | | pr | font | weight | extrabold | | --pr-font-weight-extrabold | font-weight: 800 | | pr | font | weight | medium | | --pr-font-weight-medium | font-weight: 500 | | pr | font | weight | semibold | | --pr-font-weight-semibold | font-weight: 600 |
Font size
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | font | size | 2xl | | --pr-font-size-2xl | font-size: 40px / 2.5rem | | pr | font | size | 2xs | | --pr-font-size-2xs | font-size: 11px / 0.6875rem | | pr | font | size | base | | --pr-font-size-base | font-size: 16px / 1rem | | pr | font | size | lg | | --pr-font-size-lg | font-size: 20px / 1.25rem | | pr | font | size | sm | | --pr-font-size-sm | font-size: 14px / 0.875rem | | pr | font | size | xl | | --pr-font-size-xl | font-size: 28px / 1.75rem | | pr | font | size | xs | | --pr-font-size-xs | font-size: 12px / 0.75rem |
Line Height
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | line | height | 1 | | --pr-line-height-1 | line-height: 14px / 0.875rem | | pr | line | height | 2 | | --pr-line-height-2 | line-height: 16px / 1rem | | pr | line | height | 3 | | --pr-line-height-3 | line-height: 20px / 1.25rem | | pr | line | height | 4 | | --pr-line-height-4 | line-height: 24px / 1.5rem | | pr | line | height | 5 | | --pr-line-height-5 | line-height: 28px / 1.75rem | | pr | line | height | 6 | | --pr-line-height-6 | line-height: 36px / 2.25rem | | pr | line | height | 7 | | --pr-line-height-7 | line-height: 56px / 3.5rem |
Letter Spacing
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | letter | spacing | 0 | | --pr-letter-spacing-0 | letter-spacing: -0.04em | | pr | letter | spacing | 1 | | --pr-letter-spacing-1 | letter-spacing: 0 | | pr | letter | spacing | 2 | | --pr-letter-spacing-2 | letter-spacing: 1px | | pr | letter | spacing | 3 | | --pr-letter-spacing-3 | letter-spacing: 1.5px | | pr | letter | spacing | 4 | | --pr-letter-spacing-4 | letter-spacing: 2px |
Grid and spacing
Breakpoints
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | screen | | lg | | --pr-screen-lg | 1280px | | pr | screen | | md | | --pr-screen-md | 768px | | pr | screen | | sm | | --pr-screen-sm | 480px | | pr | screen | | xl | | --pr-screen-xl | 1600px | | pr | screen | | xs | | --pr-screen-xs | 0px |
Spacing
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | spacing | | 2xl | | --pr-spacing-2xl | 40px | | pr | spacing | | 2xs | | --pr-spacing-2xs | 2px | | pr | spacing | | 3xl | | --pr-spacing-3xl | 48px | | pr | spacing | | 4xl | | --pr-spacing-4xl | 64px | | pr | spacing | | 5xl | | --pr-spacing-5xl | 80px | | pr | spacing | | 6xl | | --pr-spacing-6xl | 96px | | pr | spacing | | 7xl | | --pr-spacing-7xl | 160px | | pr | spacing | | lg | | --pr-spacing-lg | 24px | | pr | spacing | | md | | --pr-spacing-md | 16px | | pr | spacing | | sm | | --pr-spacing-sm | 8px | | pr | spacing | | xl | | --pr-spacing-xl | 32px | | pr | spacing | | xs | | --pr-spacing-xs | 4px |
Radius
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | border | radius | lg | | --pr-border-radius-lg | border-radius: 8px | | pr | border | radius | md | | --pr-border-radius-md | border-radius: 4px | | pr | border | radius | sm | | --pr-border-radius-sm | border-radius: 2px | | pr | border | radius | xl | | --pr-border-radius-xl | border-radius: 12px |
Shadow & Blur
Shadow
| Prefix | Base | Variant | Scale | Mode | Token name | Value | | ------ | ------- | --------- | --------- | -------- | ---------------------------- | ----------------------------------------------- | | pr | shadow | | lg | on-light | --pr-shadow-lg-on-light | box-shadow: 0px 16px 60px rgba(0, 3, 20, 0.2); | | pr | shadow | | md | on-dark | --pr-shadow-md-on-dark | box-shadow: 0px 10px 16px rgba(0, 3, 20, 0.24); | | pr | shadow | | md | on-light | --pr-shadow-md-on-light | box-shadow: 0px 10px 16px rgba(0, 3, 20, 0.1); | | pr | shadow | | sm | on-dark | --pr-shadow-sm-on-dark | box-shadow: 0px 2px 10px rgba(0, 3, 20, 0.25); | | pr | shadow | | sm | on-light | --pr-shadow-sm-on-light | box-shadow: 0px 2px 10px rgba(0, 3, 20, 0.15); |
Development
Project Setup
npm install
Type-Check, Compile and Minify for Production
npm run build