1.0.1 • Published 11 months ago
@pernod-ricard/archipelago-core v1.0.1
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 installType-Check, Compile and Minify for Production
npm run build1.0.1
11 months ago
1.0.0
11 months ago
1.0.0-beta.22
2 years ago
1.0.0-beta.21
2 years ago
1.0.0-beta.20
2 years ago
1.0.0-beta.19
2 years ago
1.0.0-beta.17
2 years ago
1.0.0-beta.18
2 years ago
1.0.0-beta.16
2 years ago
1.0.0-beta.15
2 years ago
1.0.0-beta.14
2 years ago
1.0.0-beta.13
2 years ago
1.0.0-beta.12
2 years ago
1.0.0-beta.11
2 years ago
1.0.0-beta.10
2 years ago
1.0.0-beta.9
2 years ago
1.0.0-beta.8
2 years ago
1.0.0-beta.7
2 years ago
1.0.0-beta.6
2 years ago
1.0.0-beta.5
2 years ago
1.0.0-beta.4
2 years ago
1.0.0-beta.3
2 years ago
1.0.0-beta.2
2 years ago
1.0.0-beta.1
2 years ago