Variable colorsSemanticConst
colorsSemantic: {
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
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}" };
}
These are the default values for the semantic color tokens.
Semantic colors are the base colors for the theme. They are typically not used directly in the components, but are used to define the base colors for the components.