@holidayextras/brand-parken-und-fliegen/src/css/design-tokens.css

Parken-und-Fliegen

:root {
  --color-black: #232323;
  --color-white: #FFFFFF;
  --color-link: #2A77B6;
  --surface-color-1: #FAFAFA;
  --surface-color-2: #FFFFFF;
  --text-color: #232323;
  --text-color-inverted: #FFFFFF;
  --text-color-brand: var(--color-secondary-1);
  --text-color-grey: #737373;
  --border-color: #737373;

  --color-primary-brand: #FFA830;
  --color-primary-brand-contrast: #020304;
  --color-primary-1: #FFA830;
  --color-primary-1-contrast: #020304;
  --color-primary-2: #FFCD84;
  --color-primary-2-contrast: #020304;
  --color-primary-3: #FFE5C1;
  --color-primary-3-contrast: #020304;
  --color-primary-4: #FFF3E1;
  --color-primary-4-contrast: #020304;
  --color-primary-5: #D98F29;
  --color-primary-5-contrast: #020304;

  --color-secondary-brand: #165CC5;
  --color-secondary-brand-contrast: #FFFFFF;
  --color-secondary-1: #165CC5;
  --color-secondary-1-contrast: #FFFFFF;
  --color-secondary-2: #A2BEE8;
  --color-secondary-2-contrast: #0C2462;
  --color-secondary-3: #B9CEEE;
  --color-secondary-3-contrast: #0C2462;
  --color-secondary-4: #DCE7F6;
  --color-secondary-4-contrast: #0C2462;
  --color-secondary-5: #134EA7;
  --color-secondary-5-contrast: #FFFFFF;

  --color-blue-1: #2A77B6;
  --color-blue-1-contrast: #FFFFFF;
  --color-blue-2: #80B5E1;
  --color-blue-2-contrast: #00437A;
  --color-blue-3: #BFD6E9;
  --color-blue-3-contrast: #00437A;
  --color-blue-4: #E5F0F9;
  --color-blue-4-contrast: #00437A;
  --color-blue-5: #24659B;
  --color-blue-5-contrast: #FFFFFF;

  --color-green-1: #347E7A;
  --color-green-1-contrast: #FFFFFF;
  --color-green-2: #80B7B6;
  --color-green-2-contrast: #004744;
  --color-green-3: #C2D8D7;
  --color-green-3-contrast: #004744;
  --color-green-4: #E5F1F0;
  --color-green-4-contrast: #004744;
  --color-green-5: #2C6B68;
  --color-green-5-contrast: #FFFFFF;

  --color-red-1: #D9313A;
  --color-red-1-contrast: #FFFFFF;
  --color-red-2: #E88084;
  --color-red-2-contrast: #700006;
  --color-red-3: #F4C1C4;
  --color-red-3-contrast: #700006;
  --color-red-4: #FAE5E6;
  --color-red-4-contrast: #700006;
  --color-red-5: #B82A31;
  --color-red-5-contrast: #FFFFFF;

  --color-orange-1: #BC5415;
  --color-orange-1-contrast: #FFFFFF;
  --color-orange-2: #D6824D;
  --color-orange-2-contrast: #4E1E00;
  --color-orange-3: #EBCCB9;
  --color-orange-3-contrast: #4E1E00;
  --color-orange-4: #F3DBCC;
  --color-orange-4-contrast: #4E1E00;
  --color-orange-5: #A04712;
  --color-orange-5-contrast: #FFFFFF;

  --color-yellow-1: #FDDF44;
  --color-yellow-1-contrast: #232323;
  --color-yellow-2: #FEEA82;
  --color-yellow-2-contrast: #232323;
  --color-yellow-3: #FEF5C7;
  --color-yellow-3-contrast: #232323;
  --color-yellow-4: #FFFBE6;
  --color-yellow-4-contrast: #232323;
  --color-yellow-5: #D7BE3A;
  --color-yellow-5-contrast: #232323;

  --color-grey-1: #C2C2C5;
  --color-grey-1-contrast: #232323;
  --color-grey-2: #D7D7D9;
  --color-grey-2-contrast: #232323;
  --color-grey-3: #EDEDEE;
  --color-grey-3-contrast: #232323;
  --color-grey-4: #F7F7F7;
  --color-grey-4-contrast: #232323;
  --color-grey-5: #A5A5A7;
  --color-grey-5-contrast: #232323;

  --btn-primary-background: var(--color-secondary-brand);
  --btn-primary-text: var(--color-secondary-brand-contrast);
  --btn-primary-border: var(--color-secondary-brand);
  --btn-primary-hover-background: var(--color-secondary-5);
  --btn-primary-hover-border: var(--color-secondary-5);

  --btn-secondary-background: var(--color-primary-1);
  --btn-secondary-text: var(--color-primary-1-contrast);
  --btn-secondary-border: var(--color-primary-1);
  --btn-secondary-hover-background: var(--color-primary-5);
  --btn-secondary-hover-border: var(--color-primary-5);

  --btn-blue-background: var(--color-blue-1);
  --btn-blue-text: var(--color-blue-1-contrast);
  --btn-blue-border: var(--color-blue-1);
  --btn-blue-hover-background: var(--color-blue-5);
  --btn-blue-hover-border: var(--color-blue-5);

  --btn-green-background: var(--color-green-1);
  --btn-green-text: var(--color-green-1-contrast);
  --btn-green-border: var(--color-green-1);
  --btn-green-hover-background: var(--color-green-5);
  --btn-green-hover-border: var(--color-green-5);

  --btn-red-background: var(--color-red-1);
  --btn-red-text: var(--color-red-1-contrast);
  --btn-red-border: var(--color-red-1);
  --btn-red-hover-background: var(--color-red-5);
  --btn-red-hover-border: var(--color-red-5);

  --btn-orange-background: var(--color-orange-1);
  --btn-orange-text: var(--color-orange-1-contrast);
  --btn-orange-border: var(--color-orange-1);
  --btn-orange-hover-background: var(--color-orange-5);
  --btn-orange-hover-border: var(--color-orange-5);

  --btn-yellow-background: var(--color-yellow-1);
  --btn-yellow-text: var(--color-yellow-1-contrast);
  --btn-yellow-border: var(--color-yellow-1);
  --btn-yellow-hover-background: var(--color-yellow-5);
  --btn-yellow-hover-border: var(--color-yellow-5);

  --btn-disabled-background: #F5F5F5;
  --btn-disabled-text: #B8B8B8;
  --btn-disabled-border: #D9D9D9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-link: #80B5E1;
    --surface-color-1: #1D1D1F;
    --surface-color-2: #2C2C2E;
    --text-color: #FFFFFF;
    --text-color-inverted: #232323;
    --text-color-grey: #959393;
    --border-color: #959393;

    --color-primary-1: #FFE4B9;
    --color-primary-1-contrast: #020304;
    --color-primary-2: #FEC87C;
    --color-primary-2-contrast: #020304;
    --color-primary-3: #FFB65B;
    --color-primary-3-contrast: #020304;
    --color-primary-4: #D98F29;
    --color-primary-4-contrast: #020304;
    --color-primary-5: #FFE5C1;
    --color-primary-5-contrast: #020304;

    --color-secondary-1: #A6C1E9;
    --color-secondary-1-contrast: #041C44;
    --color-secondary-2: #2371E7;
    --color-secondary-2-contrast: #FFFFFF;
    --color-secondary-3: #1865D8;
    --color-secondary-3-contrast: #FFFFFF;
    --color-secondary-4: #134EA7;
    --color-secondary-4-contrast: #FFFFFF;
    --color-secondary-5: #B9CEEE;
    --color-secondary-5-contrast: #041C44;

    --color-blue-1: #B7CCE5;
    --color-blue-1-contrast: #00437A;
    --color-blue-2: #4A799E;
    --color-blue-2-contrast: #FFFFFF;
    --color-blue-3: #3D7099;
    --color-blue-3-contrast: #FFFFFF;
    --color-blue-4: #24659B;
    --color-blue-4-contrast: #FFFFFF;
    --color-blue-5: #BFD6E9;
    --color-blue-5-contrast: #00437A;

    --color-green-1: #A8C6C4;
    --color-green-1-contrast: #004744;
    --color-green-2: #547D7B;
    --color-green-2-contrast: #FFFFFF;
    --color-green-3: #386865;
    --color-green-3-contrast: #FFFFFF;
    --color-green-4: #2C6B68;
    --color-green-4-contrast: #FFFFFF;
    --color-green-5: #C2D8D7;
    --color-green-5-contrast: #004744;

    --color-red-1: #F6968C;
    --color-red-1-contrast: #700006;
    --color-red-2: #B75958;
    --color-red-2-contrast: #FFFFFF;
    --color-red-3: #AA3C3B;
    --color-red-3-contrast: #FFFFFF;
    --color-red-4: #B82A31;
    --color-red-4-contrast: #FFFFFF;
    --color-red-5: #F4C1C4;
    --color-red-5-contrast: #700006;

    --color-orange-1: #EAA57E;
    --color-orange-1-contrast: #4E1E00;
    --color-orange-2: #BE5818;
    --color-orange-2-contrast: #FFFFFF;
    --color-orange-3: #B84700;
    --color-orange-3-contrast: #FFFFFF;
    --color-orange-4: #A04712;
    --color-orange-4-contrast: #FFFFFF;
    --color-orange-5: #EBCCB9;
    --color-orange-5-contrast: #4E1E00;

    --color-yellow-1: #FFEEAF;
    --color-yellow-1-contrast: #232323;
    --color-yellow-2: #FFE174;
    --color-yellow-2-contrast: #232323;
    --color-yellow-3: #F2D156;
    --color-yellow-3-contrast: #232323;
    --color-yellow-4: #D7BE3A;
    --color-yellow-4-contrast: #232323;
    --color-yellow-5: #FEF5C7;
    --color-yellow-5-contrast: #232323;

    --color-grey-1: #C4C4C7;
    --color-grey-1-contrast: #232323;
    --color-grey-2: #B9B9BB;
    --color-grey-2-contrast: #232323;
    --color-grey-3: #A7A7A7;
    --color-grey-3-contrast: #232323;
    --color-grey-4: #A5A5A7;
    --color-grey-4-contrast: #232323;
    --color-grey-5: #EDEDEE;
    --color-grey-5-contrast: #232323;

    --btn-primary-hover-background: var(--color-secondary-4);
    --btn-primary-hover-border: var(--color-secondary-4);
  }
}