Variable tokensConst

Type declaration

• 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}" };
      };
  }

• font: {
      family: {
          sans: {
              value: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
          };
      };
      size: { base: { value: 16 } };
  }