@redocly/theme/src/core/styles/palette.dark.ts

Shared UI components lib

import { css, type FlattenSimpleInterpolation } from 'styled-components';

function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolation {
  switch (palette) {
    case 'slate':
      return css`
        --color-brand-1: #2a2b33;
        --color-brand-2: #3b3c45;
        --color-brand-3: #555761;
        --color-brand-4: #6e6f7a;
        --color-brand-5: #9b9ca8;
        --color-brand-6: #fbfbfc;
        --color-brand-7: #ededf2;
        --color-brand-8: #dcdde5;
        --color-brand-9: #c4c6d1;
        --color-brand-10: #9b9ca8;
        --color-brand-11: #6e6f7a;
        --color-brand-subtle-1: #2a2b3366;
        --color-brand-subtle-2: #3b3c4566;
        --color-brand-subtle-3: #55576166;
        --color-brand-subtle-4: #6e6f7a66;
        --text-color-on-color: #000000;

        --search-ai-gradient-start-color: var(--color-brand-3); 
        --search-ai-gradient-end-color: var(--color-brand-7);
      `;
    case 'pink':
      return css`
        --color-brand-1: #4f2841;
        --color-brand-2: #6a3055;
        --color-brand-3: #853668;
        --color-brand-4: #a03a7b;
        --color-brand-5: #bb3d8d;
        --color-brand-6: #d6409f;
        --color-brand-7: #de59ad;
        --color-brand-8: #e677bd;
        --color-brand-9: #ef99cf;
        --color-brand-10: #f7bfe2;
        --color-brand-11: #ffe8f7;
        --color-brand-subtle-1: #4f284166;
        --color-brand-subtle-2: #6a305566;
        --color-brand-subtle-3: #85366866;
        --color-brand-subtle-4: #a03a7b66;
        --text-color-on-color: #ffffff;

        --search-ai-gradient-start-color: var(--color-brand-5); // @presenter Color
        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
      `;
    case 'coral':
      return css`
        --color-brand-1: #4f282b;
        --color-brand-2: #6d3338;
        --color-brand-3: #8b3c42;
        --color-brand-4: #a9434c;
        --color-brand-5: #c74b55;
        --color-brand-6: #e5535f;
        --color-brand-7: #ea6a75;
        --color-brand-8: #ef858d;
        --color-brand-9: #f5a3aa;
        --color-brand-10: #fac5c9;
        --color-brand-11: #ffe8ea;
        --color-brand-subtle-1: #4f282b66;
        --color-brand-subtle-2: #6d333866;
        --color-brand-subtle-3: #8b3c4266;
        --color-brand-subtle-4: #a9434c66;
        --text-color-on-color: #ffffff;

        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
      `;
    case 'amber':
      return css`
        --color-brand-1: #4f3c28;
        --color-brand-2: #71512e;
        --color-brand-3: #93632f;
        --color-brand-4: #b6732a;
        --color-brand-5: #d88121;
        --color-brand-6: #fa8d15;
        --color-brand-7: #fb9f3a;
        --color-brand-8: #fcb261;
        --color-brand-9: #fdc78c;
        --color-brand-10: #feddba;
        --color-brand-11: #fff4e8;
        --color-brand-subtle-1: #4f3c2866;
        --color-brand-subtle-2: #71512e66;
        --color-brand-subtle-3: #93632f66;
        --color-brand-subtle-4: #b6732a66;
        --text-color-on-color: #ffffff;

        --search-ai-gradient-start-color: var(--color-brand-5); // @presenter Color
        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
      `;
    case 'jade':
      return css`
        --color-brand-1: #284f45;
        --color-brand-2: #2a6052;
        --color-brand-3: #2b715e;
        --color-brand-4: #2b816b;
        --color-brand-5: #2a9277;
        --color-brand-6: #29a383;
        --color-brand-7: #42b597;
        --color-brand-8: #61c8ad;
        --color-brand-9: #88dac4;
        --color-brand-10: #b5edde;
        --color-brand-11: #e8fff9;
        --color-brand-subtle-1: #284f4566;
        --color-brand-subtle-2: #2a605266;
        --color-brand-subtle-3: #2b715e66;
        --color-brand-subtle-4: #2b816b66;
        --text-color-on-color: #ffffff;

        --search-ai-gradient-start-color: var(--color-brand-4);
        --search-ai-gradient-end-color: var(--color-brand-7);
      `;
    case 'cyan':
      return css`
        --color-brand-1: #28484f;
        --color-brand-2: #285c67;
        --color-brand-3: #246e7f;
        --color-brand-4: #1b8097;
        --color-brand-5: #0f91af;
        --color-brand-6: #00a2c7;
        --color-brand-7: #22b2d2;
        --color-brand-8: #4ac2dd;
        --color-brand-9: #79d4e9;
        --color-brand-10: #aee7f4;
        --color-brand-11: #e8fbff;
        --color-brand-subtle-1: #28484f66;
        --color-brand-subtle-2: #285c6766;
        --color-brand-subtle-3: #246e7f66;
        --color-brand-subtle-4: #1b809766;
        --text-color-on-color: #ffffff;

        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
      `;
    case 'ocean':
      return css`
        --color-brand-1: #283e4f;
        --color-brand-2: #2d5472;
        --color-brand-3: #2a6795;
        --color-brand-4: #2277b9;
        --color-brand-5: #1384dc;
        --color-brand-6: #0090ff;
        --color-brand-7: #29a2ff;
        --color-brand-8: #56b5ff;
        --color-brand-9: #85caff;
        --color-brand-10: #b6dfff;
        --color-brand-11: #e8f5ff;
        --color-brand-subtle-1: #283e4f66;
        --color-brand-subtle-2: #2d547266;
        --color-brand-subtle-3: #2a679566;
        --color-brand-subtle-4: #2277b966;
        --text-color-on-color: #ffffff;

        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
      `;
    case 'indigo':
      return css`
        --color-brand-1: #28314f;
        --color-brand-2: #303e6b;
        --color-brand-3: #364988;
        --color-brand-4: #3952a4;
        --color-brand-5: #3c5bc1;
        --color-brand-6: #3e63dd;
        --color-brand-7: #5879e4;
        --color-brand-8: #7691eb;
        --color-brand-9: #99aef1;
        --color-brand-10: #bfcdf8;
        --color-brand-11: #e8edff;
        --color-brand-subtle-1: #28314f66;
        --color-brand-subtle-2: #303e6b66;
        --color-brand-subtle-3: #36498866;
        --color-brand-subtle-4: #3952a466;
        --text-color-on-color: #ffffff;

        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
      `;
    case 'iris':
      return css`
        --color-brand-1: #2e2e4f;
        --color-brand-2: #3a3a6a;
        --color-brand-3: #434385;
        --color-brand-4: #4c4ca0;
        --color-brand-5: #5353bb;
        --color-brand-6: #5b5bd6;
        --color-brand-7: #7070de;
        --color-brand-8: #8a8ae6;
        --color-brand-9: #a7a7ef;
        --color-brand-10: #c8c8f7;
        --color-brand-11: #ebebff;
        --color-brand-subtle-1: #2e2e4f80;
        --color-brand-subtle-2: #3a3a6a80;
        --color-brand-subtle-3: #43438580;
        --color-brand-subtle-4: #4c4ca080;
        --text-color-on-color: #ffffff;

        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
      `;
    default:
      return css`
        --button-bg-color-primary-hover-legacy: var(--color-blue-5);
        --button-bg-color-primary-pressed-legacy: var(--color-blue-4);

        --toc-item-text-color-active-legacy: var(--text-color-primary); 
        --toc-item-border-color-active-legacy: var(--border-color-invers);

        --checkbox-border-color-legacy: var(--border-color-primary);
        
        --switch-bg-color-selected-legacy: var(--color-warm-grey-7);
        --switch-border-color-selected-legacy: var(--color-warm-grey-7);

        --md-tabs-active-tab-bg-color-legacy: var(--bg-color-active);

        --admonition-default-bg-color-legacy: var(--color-warm-grey-3);
        --admonition-default-border-color-legacy: var(--color-warm-grey-5);

        --code-block-highlighted-bg-color-legacy: color-mix(in srgb, var(--color-warm-grey-4) 40%, transparent); 
        
        --link-color-primary-legacy: var(--color-blue-7);
        --link-color-primary-hover-legacy: var(--color-blue-8);
        --link-color-visited-legacy: var(--color-purple-8);
      `;
  }
}

export const activeBrandPaletteDark = css<{ palette?: string }>`
  ${({ palette }) => brandPaletteDark(palette)}
`;