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

Shared UI components lib

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

function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolation {
  switch (palette) {
    case 'slate':
      return css`
        --color-brand-1: #ededf2; // @presenter Color
        --color-brand-2: #dcdde5; // @presenter Color
        --color-brand-3: #c4c6d1; // @presenter Color
        --color-brand-4: #9b9ca8; // @presenter Color
        --color-brand-5: #6e6f7a; // @presenter Color
        --color-brand-6: #1a1c21; // @presenter Color
        --color-brand-7: #22242b; // @presenter Color
        --color-brand-8: #2a2b33; // @presenter Color
        --color-brand-9: #3b3c45; // @presenter Color
        --color-brand-10: #555761; // @presenter Color
        --color-brand-11: #6e6f7a; // @presenter Color
        --text-color-on-color: #ffffff; // @presenter Color

        --link-color-primary-palette: var(--text-color-primary); // @presenter Color

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

        --link-color-primary-palette: var(--text-color-primary); // @presenter Color

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

        --link-color-primary-palette: var(--text-color-primary); // @presenter Color

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

        --link-color-primary-palette: var(--text-color-primary); // @presenter Color

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

        --link-color-primary-palette: var(--text-color-primary); // @presenter Color

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

        --link-color-primary-palette: var(--text-color-primary); // @presenter Color

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

        --link-color-primary-palette: var(--text-color-primary); // @presenter Color

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

        --link-color-primary-palette: var(--text-color-primary); // @presenter Color

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

        --link-color-primary-palette: var(--text-color-primary); // @presenter Color

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

        --toc-item-text-color-active-legacy: var(--text-color-primary); // @presenter Color
        --toc-item-border-color-active-legacy: var(--border-color-invers); // @presenter Color

        --checkbox-border-color-legacy: var(--border-color-primary); // @presenter Color
        --checkbox-box-color-active-legacy: var(--color-warm-grey-10); // @presenter Color

        --switch-bg-color-selected-legacy: var(--color-warm-grey-9); // @presenter Color

        --md-tabs-active-tab-bg-color-legacy: var(--bg-color-active); // @presenter Color
        --md-tabs-active-tab-text-color-legacy: var(--text-color-primary); // @presenter Color
        --md-tabs-active-tab-border-color-legacy: var(--text-color-primary); // @presenter Color

        --admonition-default-bg-color-legacy: var(--color-warm-grey-2); // @presenter Color
        --admonition-default-icon-color-legacy: var(--color-warm-grey-11); // @presenter Color
        --admonition-default-border-color-legacy: var(--color-warm-grey-4); // @presenter Color

        --menu-item-bg-color-active-legacy: var(--tree-bg-color-active); // @presenter Color
        --menu-item-color-active-legacy: var(--tree-content-color-default); // @presenter Color
        --menu-item-color-active-hover-legacy: var(--tree-content-color-hover); // @presenter Color
        --menu-item-bg-color-active-hover-legacy: var(--color-hover-base); // @presenter Color

        --code-block-highlighted-bg-color-legacy: var(--layer-color-hover); // @presenter Color
        --code-block-tokens-string-color-legacy: var(--color-blue-7); // @presenter Color

        --security-header-color-legacy: var(--link-color-primary); // @presenter Color

        --schema-name-color-legacy: var(--text-color-primary); // @presenter Color

        --search-ai-conversation-input-border-color-focus-legacy: var(--color-blue-6); // @presenter Color
        --search-ai-user-bg-color-legacy: var(--color-blue-6); // @presenter Color

        --button-content-color-link-legacy: var(--link-color-primary); // @presenter Color
        --button-content-color-link-hover-legacy: var(--link-color-primary-hover); // @presenter Color
        --button-content-color-link-pressed-legacy: var(--link-color-primary-pressed); // @presenter Color

        --link-color-primary-legacy: var(--color-blue-6); // @presenter Color
        --link-color-primary-hover-legacy: var(--color-blue-7); // @presenter Color
        --link-color-primary-pressed-legacy: var(--color-blue-8); // @presenter Color
        --link-color-visited-legacy: var(--color-purple-7); // @presenter Color

        --search-ai-gradient-start-color-legacy: #715efe; // @presenter Color
        --search-ai-gradient-end-color-legacy: #ff5cdc; // @presenter Color
      `;
  }
}

/**
 * @tokens Palette
 */
export const activeBrandPaletteLight = css<{ palette?: string }>`
  ${({ palette }) => brandPaletteLight(palette)}
`;