@commercetools-frontend/ui-kit/materials/custom-properties.json

A preset of all the UI-Kit components.

{
  "--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%, 30%)",
  "--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%, 25%)",
  "--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-50": "hsl(233, 18%, 50%)",
  "--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, 94%, 35%)",
  "--color-info-50": "hsl(203.05555555555554, 93.9130434783%, 50%)",
  "--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)",
  "--shadow-18": "0 5px 30px 0px rgba(0, 0, 0, 0.1)",
  "--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-button-as-40": "40px",
  "--height-for-button-as-30": "32px",
  "--height-for-button-as-20": "24px",
  "--height-for-button-as-10": "16px",
  "--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)"
}