theme.css

:root {
  --knock-border-style-solid: solid;
  --knock-border-style-dashed: dashed;
  --knock-transparent: transparent;
  --knock-white: #fff;
  --knock-black: #000;
  --knock-alpha-white-1: #ffffff0d;
  --knock-alpha-white-2: #ffffff1a;
  --knock-alpha-white-3: #ffffff26;
  --knock-alpha-white-4: #fff3;
  --knock-alpha-white-5: #ffffff4d;
  --knock-alpha-white-6: #fff6;
  --knock-alpha-white-7: #ffffff80;
  --knock-alpha-white-8: #fff9;
  --knock-alpha-white-9: #ffffffb3;
  --knock-alpha-white-10: #fffc;
  --knock-alpha-white-11: #ffffffe6;
  --knock-alpha-white-12: #fffffff2;
  --knock-alpha-black-1: #0000000d;
  --knock-alpha-black-2: #0000001a;
  --knock-alpha-black-3: #00000026;
  --knock-alpha-black-4: #0003;
  --knock-alpha-black-5: #0000004d;
  --knock-alpha-black-6: #0006;
  --knock-alpha-black-7: #00000080;
  --knock-alpha-black-8: #0009;
  --knock-alpha-black-9: #000000b3;
  --knock-alpha-black-10: #000c;
  --knock-alpha-black-11: #000000e6;
  --knock-alpha-black-12: #000000f2;
  --knock-rounded-0: 0px;
  --knock-rounded-1: 0.125rem;
  --knock-rounded-2: 0.25rem;
  --knock-rounded-3: 0.375rem;
  --knock-rounded-4: 0.5rem;
  --knock-rounded-5: 0.75rem;
  --knock-rounded-6: 1rem;
  --knock-rounded-full: 9999px;
  --knock-shadow-0: 0px 0px 0px 0px #0000;
  --knock-shadow-1: 0px 5px 2px 0px #1c202403, 0px 3px 2px 0px #1c202408,
    0px 1px 1px 0px #1c20240d, 0px 0px 1px 0px #1c20240f;
  --knock-shadow-2: 0px 16px 7px 0px #1c202403, 0px 9px 6px 0px #1c202408,
    0px 4px 4px 0px #1c20240d, 0px 1px 2px 0px #1c20240f;
  --knock-shadow-3: 0px 29px 12px 0px #1c202403, 0px 16px 10px 0px #1c202408,
    0px 7px 7px 0px #1c20240d, 0px 2px 4px 0px #1c20240f;
  --knock-shadow-inner: 0px 5px 2px 0px #1c202403 inset,
    0px 3px 2px 0px #1c202408 inset, 0px 1px 1px 0px #1c20240d inset,
    0px 0px 1px 0px #1c20240f inset;
  --knock-spacing-0: 0px;
  --knock-spacing-1: 0.25rem;
  --knock-spacing-2: 0.5rem;
  --knock-spacing-3: 0.75rem;
  --knock-spacing-4: 1rem;
  --knock-spacing-5: 1.25rem;
  --knock-spacing-6: 1.5rem;
  --knock-spacing-7: 1.75rem;
  --knock-spacing-8: 2rem;
  --knock-spacing-9: 2.25rem;
  --knock-spacing-10: 2.5rem;
  --knock-spacing-11: 2.75rem;
  --knock-spacing-12: 3rem;
  --knock-spacing-14: 3.5rem;
  --knock-spacing-16: 4rem;
  --knock-spacing-20: 5rem;
  --knock-spacing-24: 6rem;
  --knock-spacing-28: 7rem;
  --knock-spacing-32: 8rem;
  --knock-spacing-36: 9rem;
  --knock-spacing-40: 10rem;
  --knock-spacing-44: 11rem;
  --knock-spacing-48: 12rem;
  --knock-spacing-52: 13rem;
  --knock-spacing-56: 14rem;
  --knock-spacing-60: 15rem;
  --knock-spacing-64: 16rem;
  --knock-spacing-72: 18rem;
  --knock-spacing-80: 20rem;
  --knock-spacing-96: 24rem;
  --knock-spacing-140: 35rem;
  --knock-spacing-160: 40rem;
  --knock-spacing-px: 1px;
  --knock-spacing-full: 100%;
  --knock-spacing-auto: auto;
  --knock-family-sans: Inter, -apple-system, BlinkMacSystemFont, avenir next,
    avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto,
    arial, sans-serif;
  --knock-family-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
    monospace;
  --knock-leading-0: 1rem;
  --knock-leading-1: 1rem;
  --knock-leading-2: 1.25rem;
  --knock-leading-3: 1.5rem;
  --knock-leading-4: 1.75rem;
  --knock-leading-5: 1.75rem;
  --knock-leading-6: 2rem;
  --knock-leading-7: 2.25rem;
  --knock-leading-8: 2.5rem;
  --knock-leading-9: 3.5rem;
  --knock-leading-code-0: 1rem;
  --knock-leading-code-1: 1rem;
  --knock-leading-code-2: 1.25rem;
  --knock-leading-code-3: 1.5rem;
  --knock-leading-code-4: 1.75rem;
  --knock-leading-code-5: 1.75rem;
  --knock-leading-code-6: 2rem;
  --knock-leading-code-7: 2.25rem;
  --knock-leading-code-8: 2.5rem;
  --knock-leading-code-9: 3rem;
  --knock-tracking-0: 0.25%;
  --knock-tracking-1: 0.25%;
  --knock-tracking-2: 0;
  --knock-tracking-3: 0;
  --knock-tracking-4: -0.25%;
  --knock-tracking-5: -0.5%;
  --knock-tracking-6: -0.625%;
  --knock-tracking-7: -0.75%;
  --knock-tracking-8: -1%;
  --knock-tracking-9: -2.5%;
  --knock-text-0: 0.6875rem;
  --knock-text-1: 0.75rem;
  --knock-text-2: 0.875rem;
  --knock-text-3: 1rem;
  --knock-text-4: 1.125rem;
  --knock-text-5: 1.25rem;
  --knock-text-6: 1.5rem;
  --knock-text-7: 1.875rem;
  --knock-text-8: 2.25rem;
  --knock-text-9: 3rem;
  --knock-text-code-0: 0.625rem;
  --knock-text-code-1: 0.688rem;
  --knock-text-code-2: 0.812rem;
  --knock-text-code-4: 1.062rem;
  --knock-text-code-5: 1.188rem;
  --knock-text-code-6: 1.438rem;
  --knock-text-code-7: 1.75rem;
  --knock-text-code-8: 2.125rem;
  --knock-text-code-9: 2.875rem;
  --knock-weight-regular: 400;
  --knock-weight-medium: 500;
  --knock-weight-semi-bold: 600;
  --knock-breakpoint-sm: 640px;
  --knock-breakpoint-md: 768px;
  --knock-breakpoint-lg: 1024px;
  --knock-breakpoint-xl: 1280px;
  --knock-breakpoint-2xl: 1536px;
  --knock-zIndex-hidden: -1;
  --knock-zIndex-base: 0;
  --knock-zIndex-auto: auto;
  --knock-zIndex-dropdown: 1000;
  --knock-zIndex-sticky: 1100;
  --knock-zIndex-banner: 1200;
  --knock-zIndex-overlay: 1300;
  --knock-zIndex-modal: 1400;
  --knock-zIndex-popover: 1500;
  --knock-zIndex-skipLink: 1600;
  --knock-zIndex-toast: 1700;
  --knock-zIndex-tooltip: 1800;
}

[data-knock-color-mode="light"] {
  --knock-surface-1: #fff;
  --knock-surface-2: #f9f9f8;
  --knock-gray-1: #fcfcfd;
  --knock-gray-2: #f9f9fb;
  --knock-gray-3: #f0f0f3;
  --knock-gray-4: #e8e8ec;
  --knock-gray-5: #e0e1e6;
  --knock-gray-6: #d9d9e0;
  --knock-gray-7: #cdced6;
  --knock-gray-8: #b9bbc6;
  --knock-gray-9: #8b8d98;
  --knock-gray-10: #80838d;
  --knock-gray-11: #60646c;
  --knock-gray-12: #1c2024;
  --knock-beige-1: #fdfdfc;
  --knock-beige-2: #f9f9f8;
  --knock-beige-3: #f1f0ef;
  --knock-beige-4: #e9e8e6;
  --knock-beige-5: #e2e1de;
  --knock-beige-6: #dad9d6;
  --knock-beige-7: #cfceca;
  --knock-beige-8: #bcbbb5;
  --knock-beige-9: #8d8d86;
  --knock-beige-10: #82827c;
  --knock-beige-11: #63635e;
  --knock-beige-12: #21201c;
  --knock-orange-1: #fffcfc;
  --knock-orange-2: #fff8f7;
  --knock-orange-3: #feebe7;
  --knock-orange-4: #ffdcd3;
  --knock-orange-5: #ffcdc2;
  --knock-orange-6: #fdbdaf;
  --knock-orange-7: #f5a898;
  --knock-orange-8: #ec8e7b;
  --knock-orange-9: #e54d2e;
  --knock-orange-10: #dd4425;
  --knock-orange-11: #d13415;
  --knock-orange-12: #5c271f;
  --knock-green-1: #fbfefd;
  --knock-green-2: #f4fbf7;
  --knock-green-3: #e6f7ed;
  --knock-green-4: #d6f1e3;
  --knock-green-5: #c3e9d7;
  --knock-green-6: #acdec8;
  --knock-green-7: #8bceb6;
  --knock-green-8: #56ba9f;
  --knock-green-9: #29a383;
  --knock-green-10: #26997b;
  --knock-green-11: #208368;
  --knock-green-12: #1d3b31;
  --knock-yellow-1: #fefdfb;
  --knock-yellow-2: #fefbe9;
  --knock-yellow-3: #fff7c2;
  --knock-yellow-4: #ffee9c;
  --knock-yellow-5: #fbe577;
  --knock-yellow-6: #f3d673;
  --knock-yellow-7: #e9c162;
  --knock-yellow-8: #f3d673;
  --knock-yellow-9: #ffc53d;
  --knock-yellow-10: #ffba18;
  --knock-yellow-11: #ab6400;
  --knock-yellow-12: #4f3422;
  --knock-blue-1: #fdfdfe;
  --knock-blue-2: #f7f9ff;
  --knock-blue-3: #edf2fe;
  --knock-blue-4: #e1e9ff;
  --knock-blue-5: #d2deff;
  --knock-blue-6: #c1d0ff;
  --knock-blue-7: #abbdf9;
  --knock-blue-8: #8da4ef;
  --knock-blue-9: #3e63dd;
  --knock-blue-10: #3358d4;
  --knock-blue-11: #3a5bc7;
  --knock-blue-12: #1f2d5c;
  --knock-red-1: #fffcfd;
  --knock-red-2: #fff7f8;
  --knock-red-3: #feeaed;
  --knock-red-4: #ffdce1;
  --knock-red-5: #ffced6;
  --knock-red-6: #f8bfc8;
  --knock-red-7: #efacb8;
  --knock-red-8: #e592a3;
  --knock-red-9: #e54666;
  --knock-red-10: #dc3b5d;
  --knock-red-11: #ca244d;
  --knock-red-12: #64172b;
  --knock-purple-1: #fdfcfe;
  --knock-purple-2: #faf8ff;
  --knock-purple-3: #f4f0fe;
  --knock-purple-4: #ebe4ff;
  --knock-purple-5: #e1d9ff;
  --knock-purple-6: #d4cafe;
  --knock-purple-7: #c2b5f5;
  --knock-purple-8: #aa99ec;
  --knock-purple-9: #654dc4;
  --knock-purple-10: #654dc4;
  --knock-purple-11: #6550b9;
  --knock-purple-12: #2f265f;
}

[data-knock-color-mode="dark"] {
  --knock-surface-1: #18191b;
  --knock-surface-2: #111110;
  --knock-gray-1: #111113;
  --knock-gray-2: #18191b;
  --knock-gray-3: #212225;
  --knock-gray-4: #272a2d;
  --knock-gray-5: #2e3135;
  --knock-gray-6: #363a3f;
  --knock-gray-7: #43484e;
  --knock-gray-8: #5a6169;
  --knock-gray-9: #696e77;
  --knock-gray-10: #777b84;
  --knock-gray-11: #b0b4ba;
  --knock-gray-12: #edeef0;
  --knock-beige-1: #111110;
  --knock-beige-2: #191918;
  --knock-beige-3: #222221;
  --knock-beige-4: #2a2a28;
  --knock-beige-5: #31312e;
  --knock-beige-6: #3b3a37;
  --knock-beige-7: #494844;
  --knock-beige-8: #62605b;
  --knock-beige-9: #6f6d66;
  --knock-beige-10: #7c7b74;
  --knock-beige-11: #b5b3ad;
  --knock-beige-12: #eeeeec;
  --knock-orange-1: #181111;
  --knock-orange-2: #1f1513;
  --knock-orange-3: #391714;
  --knock-orange-4: #4e1511;
  --knock-orange-5: #5e1c16;
  --knock-orange-6: #6e2920;
  --knock-orange-7: #853a2d;
  --knock-orange-8: #ac4d39;
  --knock-orange-9: #e54d2e;
  --knock-orange-10: #ec6142;
  --knock-orange-11: #ff977d;
  --knock-orange-12: #fbd3cb;
  --knock-green-1: #0d1512;
  --knock-green-2: #121c18;
  --knock-green-3: #0f2e22;
  --knock-green-4: #0b3b2c;
  --knock-green-5: #114837;
  --knock-green-6: #1b5745;
  --knock-green-7: #246854;
  --knock-green-8: #2a7e68;
  --knock-green-9: #29a383;
  --knock-green-10: #27b08b;
  --knock-green-11: #1fd8a4;
  --knock-green-12: #adf0d4;
  --knock-yellow-1: #16120c;
  --knock-yellow-2: #1d180f;
  --knock-yellow-3: #302008;
  --knock-yellow-4: #3f2700;
  --knock-yellow-5: #4d3000;
  --knock-yellow-6: #5c3d05;
  --knock-yellow-7: #714f19;
  --knock-yellow-8: #8f6424;
  --knock-yellow-9: #ffc53d;
  --knock-yellow-10: #ffd60a;
  --knock-yellow-11: #ffca16;
  --knock-yellow-12: #ffe7b3;
  --knock-blue-1: #11131f;
  --knock-blue-2: #141726;
  --knock-blue-3: #182449;
  --knock-blue-4: #1d2e62;
  --knock-blue-5: #253974;
  --knock-blue-6: #304384;
  --knock-blue-7: #3a4f97;
  --knock-blue-8: #435db1;
  --knock-blue-9: #3e63dd;
  --knock-blue-10: #5472e4;
  --knock-blue-11: #9eb1ff;
  --knock-blue-12: #d6e1ff;
  --knock-red-1: #191113;
  --knock-red-2: #1e1517;
  --knock-red-3: #3a141e;
  --knock-red-4: #4e1325;
  --knock-red-5: #5e1a2e;
  --knock-red-6: #6f2539;
  --knock-red-7: #883447;
  --knock-red-8: #b3445a;
  --knock-red-9: #e54666;
  --knock-red-10: #ec5a72;
  --knock-red-11: #ff949d;
  --knock-red-12: #fed2e1;
  --knock-purple-1: #14121f;
  --knock-purple-2: #1b1525;
  --knock-purple-3: #291f43;
  --knock-purple-4: #33255b;
  --knock-purple-5: #3c2e69;
  --knock-purple-6: #473876;
  --knock-purple-7: #56468b;
  --knock-purple-8: #6958ad;
  --knock-purple-9: #6e56cf;
  --knock-purple-10: #7d66d9;
  --knock-purple-11: #baa7ff;
  --knock-purple-12: #e2ddfe;
}

/* In-App Message theme */
[data-knock-color-mode="light"] {
  --knock-guide-surface: var(--knock-white);
  --knock-guide-surface-2: var(--knock-gray-2);
  --knock-guide-accent: var(--knock-gray-12);
  --knock-guide-accent-light: var(--knock-gray-4);
  --knock-guide-accent-dark: var(--knock-gray-12);
  --knock-guide-secondary: var(--knock-gray-9);
  --knock-guide-secondary-light: var(--knock-gray-3);
  --knock-guide-secondary-dark: var(--knock-gray-11);
  --knock-guide-content: var(--knock-gray-12);
  --knock-guide-content-light: var(--knock-gray-11);
  --knock-guide-content-disabled: var(--knock-gray-9);
  --knock-guide-content-contrast: var(--knock-white);
  --knock-guide-border: var(--knock-gray-5);
  --knock-guide-border-light: var(--knock-gray-4);
  --knock-guide-border-dark: var(--knock-gray-7);
  --knock-guide-surface: var(--knock-white);
  --knock-guide-surface-2: var(--knock-gray-2);
}

[data-knock-color-mode="dark"] {
  --knock-guide-surface: var(--knock-white);
  --knock-guide-surface-2: var(--knock-gray-2);
  --knock-guide-accent: var(--knock-white);
  --knock-guide-accent-light: var(--knock-gray-4);
  --knock-guide-accent-dark: var(--knock-gray-12);
  --knock-guide-secondary: var(--knock-gray-9);
  --knock-guide-secondary-light: var(--knock-gray-3);
  --knock-guide-secondary-dark: var(--knock-gray-11);
  --knock-guide-content: var(--knock-gray-12);
  --knock-guide-content-light: var(--knock-gray-11);
  --knock-guide-content-disabled: var(--knock-gray-9);
  --knock-guide-content-contrast: var(--knock-gray-1);
  --knock-guide-border: var(--knock-gray-5);
  --knock-guide-border-light: var(--knock-gray-4);
  --knock-guide-border-dark: var(--knock-gray-7);
  --knock-guide-surface: var(--knock-gray-2);
  --knock-guide-surface-2: var(--knock-gray-1);
}

/* Notification feed theme */
:root {
  /* Font sizes */
  --rnf-font-size-xs: 0.75rem;
  --rnf-font-size-sm: 0.875rem;
  --rnf-font-size-md: 1rem;
  --rnf-font-size-lg: 1.125rem;
  --rnf-font-size-xl: 1.266rem;
  --rnf-font-size-2xl: 1.5rem;
  --rnf-font-size-3xl: 1.75rem;

  /* Spacing */
  --rnf-spacing-0: 0;
  --rnf-spacing-1: 4px;
  --rnf-spacing-2: 8px;
  --rnf-spacing-3: 12px;
  --rnf-spacing-4: 16px;
  --rnf-spacing-5: 20px;
  --rnf-spacing-6: 24px;
  --rnf-spacing-7: 32px;
  --rnf-spacing-8: 42px;

  /* Font weights */
  --rnf-font-weight-normal: 400;
  --rnf-font-weight-medium: 500;
  --rnf-font-weight-semibold: 600;
  --rnf-font-weight-bold: 700;

  /* Font family */
  --rnf-font-family-sanserif: Inter, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;

  /* Border radius */
  --rnf-border-radius-sm: 2px;
  --rnf-border-radius-md: 4px;
  --rnf-border-radius-lg: 8px;

  /* Shadows */
  --rnf-shadow-sm: 0px 5px 10px rgba(0, 0, 0, 0.12);
  --rnf-shadow-md: 0px 8px 30px rgba(0, 0, 0, 0.24);

  /* Colors */
  --rnf-color-white: #fff;
  --rnf-color-white-a-75: rgba(255, 255, 255, 0.75);
  --rnf-color-black: #000;
  --rnf-color-gray-900: #1a1f36;
  --rnf-color-gray-800: #3c4257;
  --rnf-color-gray-700: #3c4257;
  --rnf-color-gray-600: #515669;
  --rnf-color-gray-500: #697386;
  --rnf-color-gray-400: #9ea0aa;
  --rnf-color-gray-300: #a5acb8;
  --rnf-color-gray-200: #dddee1;
  --rnf-color-gray-100: #e4e8ee;
  --rnf-color-brand-500: #e95744;
  --rnf-color-brand-700: #e4321b;
  --rnf-color-brand-900: #891e10;

  /* Component specific colors */
  --rnf-unread-badge-bg-color: #dd514c;
  --rnf-avatar-bg-color: #ef8476;
  --rnf-message-cell-unread-dot-bg-color: #f4ada4;
  --rnf-message-cell-hover-bg-color: #f1f6fc;
}