npm package: @pernod-ricard/archipelago-core
Description: Core library of Pernod Ricard's Archipelago Design System
Author: Pernod Ricard
Latest version: 1.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

```sh
npm install
```

### Type-Check, Compile and Minify for Production

```sh
npm run build
```