@commercetools-frontend/ui-kit/materials/custom-properties_recolouring.css

A preset of all the UI-Kit components.

/*
  THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.

  This file is created by the 'scripts/generate-design-tokens.js' script.
  The variables should be updated in 'materials/internals/definition.yaml'.
*/

:root {
  --color-primary: hsl(240, 64%, 58%);
  --color-primary-10: hsl(240, 66%, 19%);
  --color-primary-20: hsl(240, 45%, 33%);
  --color-primary-25: hsl(240, 46%, 48%);
  --color-primary-30: hsl(240, 46%, 53%);
  --color-primary-40: hsl(240, 100%, 67%);
  --color-primary-85: hsl(244, 100%, 84%);
  --color-primary-90: hsl(243, 100%, 93%);
  --color-primary-95: hsl(244, 100%, 97%);
  --color-primary-98: hsl(244, 100%, 99%);
  --color-accent: #213c45;
  --color-accent-10: hsl(195, 100%, 10%);
  --color-accent-20: hsl(195, 80%, 20%);
  --color-accent-30: hsl(195, 70%, 30%);
  --color-accent-40: hsl(195, 70%, 40%);
  --color-accent-50: hsl(195, 70%, 50%);
  --color-accent-60: hsl(195, 70%, 60%);
  --color-accent-85: hsl(195, 85%, 85%);
  --color-accent-90: hsl(195, 90%, 90%);
  --color-accent-95: hsl(195, 95%, 95%);
  --color-accent-98: hsl(195, 100%, 98%);
  --color-brown-10: hsl(41, 100%, 10%);
  --color-brown-20: hsl(41, 100%, 20%);
  --color-brown-35: hsl(41, 96%, 35%);
  --color-brown-50: hsl(41, 95%, 44%);
  --color-brown-70: hsl(47, 95%, 70%);
  --color-brown-85: hsl(47, 100%, 85%);
  --color-brown-90: hsl(47, 100%, 90%);
  --color-brown-95: hsl(47, 100%, 95%);
  --color-brown-98: hsl(48, 100%, 97%);
  --color-purple-10: hsl(248, 88%, 10%);
  --color-purple-20: hsl(248, 50%, 20%);
  --color-purple-35: hsl(248, 25%, 35%);
  --color-purple-50: hsl(248, 64%, 58%);
  --color-purple-70: hsl(248, 80%, 70%);
  --color-purple-85: hsl(249, 100%, 85%);
  --color-purple-90: hsl(248, 100%, 90%);
  --color-purple-95: hsl(248, 100%, 95%);
  --color-purple-98: hsl(246, 100%, 98%);
  --color-turquoise-10: hsl(180, 88%, 10%);
  --color-turquoise-20: hsl(180, 90%, 20%);
  --color-turquoise-35: hsl(178, 88%, 35%);
  --color-turquoise-50: hsl(178, 67%, 50%);
  --color-turquoise-70: hsl(180, 75%, 70%);
  --color-turquoise-85: hsl(180, 90%, 85%);
  --color-turquoise-90: hsl(180, 88%, 90%);
  --color-turquoise-95: hsl(180, 88%, 95%);
  --color-turquoise-98: hsl(180, 100%, 98%);
  --color-neutral: hsl(232, 18%, 80%);
  --color-neutral-05: hsl(0deg 0% 80% / 5%);
  --color-neutral-10: hsl(0deg 0% 80% / 10%);
  --color-neutral-40: hsl(232, 18%, 40%);
  --color-neutral-60: hsl(232, 18%, 60%);
  --color-neutral-85: hsl(232, 18%, 85%);
  --color-neutral-90: hsl(232, 18%, 90%);
  --color-neutral-95: hsl(232, 18%, 95%);
  --color-neutral-98: hsl(232, 18%, 98%);
  --color-info: #078cdf;
  --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
  --color-info-60: hsl(203.05555555555554, 93.9130434783%, 60%);
  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
  --color-info-90: #ceebfd;
  --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
  --color-warning: hsl(35, 90%, 45%);
  --color-warning-25: hsl(33, 83%, 25%);
  --color-warning-40: hsl(33, 80%, 34%);
  --color-warning-60: hsl(35, 90%, 55%);
  --color-warning-85: hsl(33, 90%, 80%);
  --color-warning-95: hsl(45, 100%, 92%);
  --color-error: hsl(3, 65%, 58%);
  --color-error-25: hsl(4, 69%, 37%);
  --color-error-40: hsl(3, 60%, 46%);
  --color-error-85: hsl(1, 55%, 74%);
  --color-error-95: hsl(349, 66%, 92%);
  --color-solid: #1a1a1a;
  --color-solid-02: hsl(0deg 0% 10% / 2%);
  --color-solid-05: hsl(0deg 0% 10% / 5%);
  --color-solid-10: hsl(0deg 0% 10% / 10%);
  --color-surface: #fff;
  --color-transparent: transparent;
  --color-success: hsl(152, 77%, 39%);
  --color-success-25: hsl(155, 84%, 20%);
  --color-success-40: hsl(155, 90%, 24%);
  --color-success-85: hsl(144, 69%, 80%);
  --color-success-95: hsl(141, 76%, 92%);
  --border-radius-1: 1px;
  --border-radius-2: 2px;
  --border-radius-4: 4px;
  --border-radius-6: 6px;
  --border-radius-8: 8px;
  --border-radius-20: 20px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --font-family: 'Inter', system-ui;
  --font-size-10: 0.75rem;
  --font-size-12: 0.8rem;
  --font-size-20: 0.875rem;
  --font-size-30: 1rem;
  --font-size-40: 1.125rem;
  --font-size-50: 1.25rem;
  --font-size-60: 1.5rem;
  --font-size-70: 2rem;
  --font-size-80: 2.5rem;
  --font-size-90: 3rem;
  --font-size-15: 0.9231rem;
  --font-size-35: 1.0769rem;
  --font-size-45: 1.2308rem;
  --font-size-63: 1.5385rem;
  --font-size-66: 1.8462rem;
  --font-size-69: 2.4615rem;
  --font-size-78: 3rem;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --line-height-05: 1.125rem;
  --line-height-10: 1.25rem;
  --line-height-18: 1.3rem;
  --line-height-20: 1.375rem;
  --line-height-30: 1.5rem;
  --line-height-40: 1.625rem;
  --line-height-50: 1.75rem;
  --line-height-60: 2.125rem;
  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  --shadow-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  --shadow-5: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  --shadow-6: 0 -1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-7: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
    0 1px 1px 0 rgba(0, 0, 0, 0.24);
  --shadow-8: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
  --shadow-9: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1),
    inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25);
  --shadow-10: 0 0 0 1px rgba(224, 230, 237, 0.5);
  --shadow-11: 0 1px 0.5px rgba(0, 0, 0, 0.24),
    0 -1px 0.75px rgba(0, 0, 0, 0.12);
  --shadow-12: 0 0 1px rgba(0, 0, 0, 0.25);
  --shadow-13: 0 0 1px rgba(0, 0, 0, 0.25);
  --shadow-14: 0 0 0.5px rgba(0, 0, 0, 0.1);
  --shadow-15: 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12);
  --shadow-16: 0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25),
    -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25);
  --shadow-17: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
  --constraint-scale: 100%;
  --constraint-1: 42px;
  --constraint-2: 84px;
  --constraint-3: 142px;
  --constraint-4: 184px;
  --constraint-5: 242px;
  --constraint-6: 284px;
  --constraint-7: 342px;
  --constraint-8: 384px;
  --constraint-9: 442px;
  --constraint-10: 484px;
  --constraint-11: 542px;
  --constraint-12: 584px;
  --constraint-13: 642px;
  --constraint-14: 684px;
  --constraint-15: 742px;
  --constraint-16: 784px;
  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-05: 2px;
  --spacing-10: 4px;
  --spacing-20: 8px;
  --spacing-25: 12px;
  --spacing-30: 16px;
  --spacing-40: 24px;
  --spacing-50: 32px;
  --spacing-55: 40px;
  --spacing-60: 48px;
  --spacing-70: 64px;
  --transition-linear-80ms: 80ms linear;
  --transition-easeinout-150ms: 150ms ease-in-out;
  --transition-standard: 200ms ease;
  --break-point-mobile: 768px;
  --break-point-desktop: 1024px;
  --break-point-biggerdesktop: 1280px;
  --break-point-giantdesktop: 1680px;
  --break-point-jumbodesktop: 1920px;
  --background-color-for-input: #fff;
  --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
  --background-color-for-input-when-readonly: hsl(232, 18%, 95%);
  --background-color-for-input-when-hovered: hsl(244, 100%, 99%);
  --background-color-for-localized-input-label: #fff;
  --background-color-for-localized-input-label-when-readonly: hsl(
    232,
    18%,
    95%
  );
  --background-color-for-localized-input-label-when-disabled: hsl(
    232,
    18%,
    95%
  );
  --background-color-for-button-when-active: hsl(243, 100%, 93%);
  --background-color-for-button-when-hovered: hsl(244, 100%, 97%);
  --background-color-for-button-when-disabled: hsl(232, 18%, 95%);
  --border-color-for-input: hsl(232, 18%, 80%);
  --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
  --border-color-for-input-when-readonly: #fff;
  --border-color-for-input-when-error: hsl(3, 65%, 58%);
  --border-color-for-input-when-warning: hsl(35, 90%, 45%);
  --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
  --border-color-for-input-when-focused: hsl(240, 100%, 67%);
  --border-color-for-button-as-secondary: hsl(244, 100%, 84%);
  --border-radius-for-input: 4px;
  --font-color-for-input: #1a1a1a;
  --font-color-for-input-when-disabled: hsl(232, 18%, 60%);
  --font-color-for-input-when-error: hsl(3, 60%, 46%);
  --font-color-for-input-when-readonly: hsl(232, 18%, 40%);
  --font-color-for-input-when-warning: hsl(35, 90%, 45%);
  --font-color-for-button-as-secondary: hsl(240, 64%, 58%);
  --height-for-button-as-big: 40px;
  --height-for-button-as-small: 16px;
  --height-for-button-as-medium: 32px;
  --height-for-input: 40px;
  --height-for-input-as-small: 32px;
  --shadow-for-input: none;
  --shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary);
  --shadow-for-input-when-error: inset 0 0 0 1px var(--color-error);
  --shadow-for-input-when-warning: inset 0 0 0 1px var(--color-warning);
}