CDP Frontend SDK
    Preparing search index...

    Variable colorsConst

    colors: {
        page: {
            bg: { default: { value: "{colors.bg.default}" } };
            border: { default: { value: "{colors.line.default}" } };
            text: {
                default: { value: "{colors.fg.default}" };
                muted: { value: "{colors.fg.muted}" };
            };
        };
        cta: {
            primary: {
                bg: {
                    default: { value: "{colors.bg.primary}" };
                    hover: {
                        value: "{colors.bg.primary}";
                        modify: { type: "alpha"; value: "0.9" };
                    };
                };
                border: { focus: { value: "{colors.line.primary}" } };
                text: {
                    default: { value: "{colors.fg.onPrimary}" };
                    hover: { value: "{colors.fg.onPrimary}" };
                };
            };
            secondary: {
                bg: {
                    default: { value: "{colors.bg.secondary}" };
                    hover: {
                        value: "{colors.bg.secondary}";
                        modify: { type: "alpha"; value: "0.9" };
                    };
                };
                border: { focus: { value: "{colors.line.primary}" } };
                text: {
                    default: { value: "{colors.fg.onSecondary}" };
                    hover: { value: "{colors.fg.onSecondary}" };
                };
            };
        };
        link: {
            primary: {
                text: {
                    default: { value: "{colors.fg.primary}" };
                    hover: {
                        value: "{colors.fg.primary}";
                        modify: { type: "alpha"; value: "0.9" };
                    };
                };
            };
            secondary: {
                text: {
                    default: { value: "{colors.fg.default}" };
                    hover: {
                        value: "{colors.fg.default}";
                        modify: { type: "alpha"; value: "0.9" };
                    };
                };
            };
        };
        input: {
            bg: { default: { value: "{colors.bg.default}" } };
            border: {
                default: { value: "{colors.line.heavy}" };
                focus: { value: "{colors.line.primary}" };
                error: { value: "{colors.line.negative}" };
                success: { value: "{colors.line.positive}" };
            };
            label: { default: { value: "{colors.fg.default}" } };
            placeholder: { default: { value: "{colors.fg.muted}" } };
            text: { default: { value: "{colors.fg.default}" } };
            errorText: { default: { value: "{colors.fg.negative}" } };
            successText: { default: { value: "{colors.fg.positive}" } };
        };
        select: {
            label: { default: { value: "{colors.fg.default}" } };
            trigger: {
                bg: { default: { value: "{colors.bg.default}" } };
                border: {
                    default: { value: "{colors.line.heavy}" };
                    focus: { value: "{colors.line.primary}" };
                    error: { value: "{colors.line.negative}" };
                    success: { value: "{colors.line.positive}" };
                };
                placeholder: { default: { value: "{colors.fg.muted}" } };
                text: { default: { value: "{colors.fg.default}" } };
                errorText: { default: { value: "{colors.fg.negative}" } };
                successText: { default: { value: "{colors.fg.positive}" } };
            };
            list: {
                bg: { default: { value: "{colors.bg.default}" } };
                border: {
                    default: { value: "{colors.line.heavy}" };
                    focus: { value: "{colors.line.primary}" };
                    error: { value: "{colors.line.negative}" };
                    success: { value: "{colors.line.positive}" };
                };
                item: {
                    bg: {
                        default: { value: "{colors.bg.default}" };
                        highlight: { value: "{colors.bg.secondary}" };
                    };
                    text: {
                        default: { value: "{colors.fg.default}" };
                        muted: { value: "{colors.fg.muted}" };
                        onHighlight: { value: "{colors.fg.default}" };
                        mutedOnHighlight: { value: "{colors.fg.muted}" };
                    };
                };
            };
        };
        bg: {
            default: { value: "#ffffff" };
            alternate: { value: "#eef0f3" };
            overlay: {
                value: "{colors.bg.alternate}";
                modify: { type: "alpha"; value: 0.33 };
            };
            skeleton: {
                value: "{colors.fg.default}";
                modify: { type: "alpha"; value: 0.1 };
            };
            primary: { value: "#0052ff" };
            secondary: { value: "#eef0f3" };
        };
        fg: {
            default: { value: "#0a0b0d" };
            muted: { value: "#5b616e" };
            primary: { value: "#0052ff" };
            onPrimary: { value: "#ffffff" };
            onSecondary: { value: "#0a0b0d" };
            positive: { value: "#098551" };
            negative: { value: "#cf202f" };
        };
        line: {
            default: { value: "#dcdfe4" };
            heavy: { value: "#9397a0" };
            primary: { value: "{colors.fg.primary}" };
            positive: { value: "{colors.fg.positive}" };
            negative: { value: "{colors.fg.negative}" };
        };
    } = ...

    All the color tokens.

    Type declaration

    • Readonlypage: {
          bg: { default: { value: "{colors.bg.default}" } };
          border: { default: { value: "{colors.line.default}" } };
          text: {
              default: { value: "{colors.fg.default}" };
              muted: { value: "{colors.fg.muted}" };
          };
      }
    • Readonlycta: {
          primary: {
              bg: {
                  default: { value: "{colors.bg.primary}" };
                  hover: {
                      value: "{colors.bg.primary}";
                      modify: { type: "alpha"; value: "0.9" };
                  };
              };
              border: { focus: { value: "{colors.line.primary}" } };
              text: {
                  default: { value: "{colors.fg.onPrimary}" };
                  hover: { value: "{colors.fg.onPrimary}" };
              };
          };
          secondary: {
              bg: {
                  default: { value: "{colors.bg.secondary}" };
                  hover: {
                      value: "{colors.bg.secondary}";
                      modify: { type: "alpha"; value: "0.9" };
                  };
              };
              border: { focus: { value: "{colors.line.primary}" } };
              text: {
                  default: { value: "{colors.fg.onSecondary}" };
                  hover: { value: "{colors.fg.onSecondary}" };
              };
          };
      }
    • Readonlyinput: {
          bg: { default: { value: "{colors.bg.default}" } };
          border: {
              default: { value: "{colors.line.heavy}" };
              focus: { value: "{colors.line.primary}" };
              error: { value: "{colors.line.negative}" };
              success: { value: "{colors.line.positive}" };
          };
          label: { default: { value: "{colors.fg.default}" } };
          placeholder: { default: { value: "{colors.fg.muted}" } };
          text: { default: { value: "{colors.fg.default}" } };
          errorText: { default: { value: "{colors.fg.negative}" } };
          successText: { default: { value: "{colors.fg.positive}" } };
      }
    • Readonlyselect: {
          label: { default: { value: "{colors.fg.default}" } };
          trigger: {
              bg: { default: { value: "{colors.bg.default}" } };
              border: {
                  default: { value: "{colors.line.heavy}" };
                  focus: { value: "{colors.line.primary}" };
                  error: { value: "{colors.line.negative}" };
                  success: { value: "{colors.line.positive}" };
              };
              placeholder: { default: { value: "{colors.fg.muted}" } };
              text: { default: { value: "{colors.fg.default}" } };
              errorText: { default: { value: "{colors.fg.negative}" } };
              successText: { default: { value: "{colors.fg.positive}" } };
          };
          list: {
              bg: { default: { value: "{colors.bg.default}" } };
              border: {
                  default: { value: "{colors.line.heavy}" };
                  focus: { value: "{colors.line.primary}" };
                  error: { value: "{colors.line.negative}" };
                  success: { value: "{colors.line.positive}" };
              };
              item: {
                  bg: {
                      default: { value: "{colors.bg.default}" };
                      highlight: { value: "{colors.bg.secondary}" };
                  };
                  text: {
                      default: { value: "{colors.fg.default}" };
                      muted: { value: "{colors.fg.muted}" };
                      onHighlight: { value: "{colors.fg.default}" };
                      mutedOnHighlight: { value: "{colors.fg.muted}" };
                  };
              };
          };
      }
    • Readonlybg: {
          default: { value: "#ffffff" };
          alternate: { value: "#eef0f3" };
          overlay: {
              value: "{colors.bg.alternate}";
              modify: { type: "alpha"; value: 0.33 };
          };
          skeleton: {
              value: "{colors.fg.default}";
              modify: { type: "alpha"; value: 0.1 };
          };
          primary: { value: "#0052ff" };
          secondary: { value: "#eef0f3" };
      }
    • Readonlyfg: {
          default: { value: "#0a0b0d" };
          muted: { value: "#5b616e" };
          primary: { value: "#0052ff" };
          onPrimary: { value: "#ffffff" };
          onSecondary: { value: "#0a0b0d" };
          positive: { value: "#098551" };
          negative: { value: "#cf202f" };
      }
    • Readonlyline: {
          default: { value: "#dcdfe4" };
          heavy: { value: "#9397a0" };
          primary: { value: "{colors.fg.primary}" };
          positive: { value: "{colors.fg.positive}" };
          negative: { value: "{colors.fg.negative}" };
      }