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}" };
};
} = ...
Type declaration
Readonly
page: {
bg: { default: { value: "{colors.bg.default}" } };
border: { default: { value: "{colors.line.default}" } };
text: {
default: { value: "{colors.fg.default}" };
muted: { value: "{colors.fg.muted}" };
};
}
Readonly
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}" };
};
};
}
Readonly
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" };
};
};
};
}
Readonly
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}" };
};
};
};
}
Readonly
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" };
}
Readonly
fg: {
default: { value: "#0a0b0d" };
muted: { value: "#5b616e" };
primary: { value: "#0052ff" };
onPrimary: { value: "#ffffff" };
onSecondary: { value: "#0a0b0d" };
positive: { value: "#098551" };
negative: { value: "#cf202f" };
}
Readonly
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.