Variable colorsConst

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: "color-mix";
                      value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
                  };
              };
              pressed: {
                  value: "{colors.bg.primary}";
                  modify: {
                      type: "color-mix";
                      value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
                  };
              };
          };
          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: "color-mix";
                      value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
                  };
              };
              pressed: {
                  value: "{colors.bg.secondary}";
                  modify: {
                      type: "color-mix";
                      value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
                  };
              };
          };
          border: { focus: { value: "{colors.line.primary}" } };
          text: {
              default: { value: "{colors.fg.onSecondary}" };
              hover: { value: "{colors.fg.onSecondary}" };
          };
      };
  }

• Readonlylink: {
      primary: {
          text: {
              default: { value: "{colors.fg.primary}" };
              hover: {
                  value: "{colors.fg.primary}";
                  modify: {
                      type: "color-mix";
                      value: readonly [readonly ["{colors.bg.contrast}", "15%"]];
                  };
              };
              pressed: {
                  value: "{colors.fg.primary}";
                  modify: {
                      type: "color-mix";
                      value: readonly [readonly ["{colors.bg.contrast}", "30%"]];
                  };
              };
          };
      };
      secondary: {
          text: {
              default: { value: "{colors.fg.default}" };
              hover: {
                  value: "{colors.fg.default}";
                  modify: {
                      type: "color-mix";
                      value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
                  };
              };
              pressed: {
                  value: "{colors.fg.default}";
                  modify: {
                      type: "color-mix";
                      value: readonly [readonly ["{colors.bg.contrast}", "20%"]];
                  };
              };
          };
      };
  }

• 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}" };
              hover: {
                  value: "{colors.bg.default}";
                  modify: {
                      type: "color-mix";
                      value: readonly [readonly ["{colors.bg.contrast}", "5%"]];
                  };
              };
              pressed: {
                  value: "{colors.bg.default}";
                  modify: {
                      type: "color-mix";
                      value: readonly [readonly ["{colors.bg.contrast}", "7%"]];
                  };
              };
          };
          border: {
              default: { value: "{colors.line.default}" };
              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.default}" };
              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.default}";
                      modify: {
                          type: "color-mix";
                          value: readonly [readonly ["{colors.bg.contrast}", "10%"]];
                      };
                  };
              };
              text: {
                  default: { value: "{colors.fg.default}" };
                  muted: { value: "{colors.fg.muted}" };
                  onHighlight: { value: "{colors.fg.default}" };
                  mutedOnHighlight: { value: "{colors.fg.muted}" };
              };
          };
      };
  }

• Readonlycode: {
      bg: { default: { value: "{colors.bg.alternate}" } };
      border: { default: { value: "{colors.line.heavy}" } };
      text: { default: { value: "{colors.fg.default}" } };
  }

• Readonlybg: {
      default: { value: "#ffffff" };
      alternate: { value: "#eef0f3" };
      contrast: { value: "{colors.fg.default}" };
      overlay: {
          value: "{colors.bg.alternate}";
          modify: { type: "color-alpha"; value: 0.33 };
      };
      skeleton: {
          value: "{colors.fg.default}";
          modify: { type: "color-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" };
      warning: { value: "#ed702f" };
  }

• Readonlyline: {
      default: { value: "#dcdfe4" };
      heavy: { value: "#9397a0" };
      primary: { value: "{colors.fg.primary}" };
      positive: { value: "{colors.fg.positive}" };
      negative: { value: "{colors.fg.negative}" };
  }