bg.ts•1.92 kB
export const bg = {
// Main surfaces
default: {
value: {
_osLight: "{colors.neutral.light.2}",
_osDark: "{colors.slate.dark.2}",
},
},
subtle: {
value: {
_osLight: "{colors.neutral.light.3}",
_osDark: "{colors.slate.dark.3}",
},
},
muted: {
value: {
_osLight: "{colors.neutral.light.4}",
_osDark: "{colors.slate.dark.4}",
},
},
// Contextual colours for states etc.
selected: {
value: {
_osLight: "{colors.accent.light.1}",
_osDark: "{colors.accent.dark.2}",
},
},
emphasized: {
value: {
_osLight: "{colors.accent.light.2}",
_osDark: "{colors.accent.dark.4}",
},
},
disabled: {
value: {
_osLight: "{colors.neutral.light.2}",
_osDark: "{colors.neutral.dark.3}",
},
},
// Contextual colours for alerts, badges, etc.
destructive: {
value: {
_osLight: "{colors.tomato.light.3}",
_osDark: "{colors.tomato.dark.3}",
},
},
success: {
value: {
_osLight: "{colors.green.light.3}",
_osDark: "{colors.green.dark.3}",
},
},
warning: {
value: {
_osLight: "{colors.orange.light.4}",
_osDark: "{colors.amber.dark.7}",
},
},
error: {
value: {
_osLight: "{colors.tomato.light.3}",
_osDark: "{colors.tomato.dark.3}",
},
},
info: {
value: {
_osLight: "{colors.blue.light.3}",
_osDark: "{colors.blue.dark.3}",
},
},
accent: {
value: {
_osLight: "{colors.accent.light.6}",
_osDark: "{colors.accent.dark.6}",
},
},
// Used for the site's global background colour.
site: {
value: {
_osLight: "{colors.neutral.light.1}",
_osDark: "{colors.slate.dark.1}",
},
},
// Used for frosted glass panels.
opaque: {
value: {
_osLight: "{colors.white.a11}",
_osDark: "{colors.slate.dark.a11}",
},
},
};