frontend client for gemstone. decentralised workplace app

refactor: provide catppuccin palette for intended style

makes it easier while we haven't settled on a project design system yet

serenity 70e7bd34 92a82f2c

Changed files
+60 -30
src
lib
facet
+60 -30
src/lib/facet/src/variants.ts
···
// }
//
const DEFAULT_DARK_PALETTE: FacetPaletteFundemantals = {
-
crust: "#060116",
-
mantle: "#0A031F",
-
base: "#0E0726",
-
surface0: "#110B24",
-
surface1: "#241E39",
-
surface2: "#322D44",
-
overlay0: "#635F71",
-
overlay1: "#9D96A8",
-
overlay2: "#BDB4CB",
-
subtext0: "#D5CCE3",
-
subtext1: "#D9CEE8",
-
text: "#DED5F2",
-
iolite: "#57E2E5",
-
lapis: "#125E8A",
-
sapphire: "#00ABE7",
-
aquamarine: "#28C2FF",
-
apatite: "#8EE3EF",
-
emerald: "#84E296",
-
citrine: "#E8DB7D",
-
sunstone: "#E88D67",
-
garnet: "#B3001B",
-
ruby: "#D64045",
-
amethyst: "#BD66D4",
-
morganite: "#EFBDB1",
-
coral: "#FFCDB2",
-
moonstone: "#FFEAD0",
};
const DEFAULT_DARK_MODE: FacetPalette = {
···
secondary: DEFAULT_DARK_PALETTE.aquamarine,
background: DEFAULT_DARK_PALETTE.base,
surface: DEFAULT_DARK_PALETTE.surface0,
-
surfaceVariant: DEFAULT_DARK_PALETTE.surface1,
border: DEFAULT_DARK_PALETTE.overlay1,
borderVariant: DEFAULT_DARK_PALETTE.overlay0,
text: DEFAULT_DARK_PALETTE.text,
-
textSecondary: DEFAULT_DARK_PALETTE.subtext0,
-
textTertiary: DEFAULT_DARK_PALETTE.overlay0,
textInverse: DEFAULT_DARK_PALETTE.crust,
positive: DEFAULT_DARK_PALETTE.emerald,
negative: DEFAULT_DARK_PALETTE.ruby,
success: DEFAULT_DARK_PALETTE.emerald,
error: DEFAULT_DARK_PALETTE.ruby,
warning: DEFAULT_DARK_PALETTE.sunstone,
-
info: DEFAULT_DARK_PALETTE.iolite,
},
};
···
// }
//
+
// const DEFAULT_DARK_PALETTE: FacetPaletteFundemantals = {
+
// crust: "#08011D",
+
// mantle: "#0A031F",
+
// base: "#0E0921",
+
// surface0: "#191428",
+
// surface1: "#241E39",
+
// surface2: "#322D44",
+
// overlay0: "#635F71",
+
// overlay1: "#9D96A8",
+
// overlay2: "#BDB4CB",
+
// subtext0: "#D5CCE3",
+
// subtext1: "#D9CEE8",
+
// text: "#DED5F2",
+
// iolite: "#57E2E5",
+
// lapis: "#125E8A",
+
// sapphire: "#00ABE7",
+
// aquamarine: "#28C2FF",
+
// apatite: "#8EE3EF",
+
// emerald: "#84E296",
+
// citrine: "#E8DB7D",
+
// sunstone: "#E88D67",
+
// garnet: "#B3001B",
+
// ruby: "#D64045",
+
// amethyst: "#BD66D4",
+
// morganite: "#EFBDB1",
+
// coral: "#FFCDB2",
+
// moonstone: "#FFEAD0",
+
// };
+
+
// Catppuccin
const DEFAULT_DARK_PALETTE: FacetPaletteFundemantals = {
+
crust: "#11111b",
+
mantle: "#181825",
+
base: "#1e1e2e",
+
surface0: "#313244",
+
surface1: "#45475a",
+
surface2: "#585b70",
+
overlay0: "#6c7086",
+
overlay1: "#7f849c",
+
overlay2: "#9399b2",
+
subtext0: "#a6adc8",
+
subtext1: "#bac2de",
+
text: "#cdd6f4",
+
iolite: "#b4befe",
+
lapis: "#89b4fa",
+
sapphire: "#74c7ec",
+
aquamarine: "#89dceb",
+
apatite: "#94e2d5",
+
emerald: "#a6e3a1",
+
citrine: "#f9e2af",
+
sunstone: "#fab387",
+
garnet: "#eba0ac",
+
ruby: "#f38ba8",
+
amethyst: "#cba6f7",
+
morganite: "#f5c2e7",
+
coral: "#f2cdcd",
+
moonstone: "#f5e0dc",
};
const DEFAULT_DARK_MODE: FacetPalette = {
···
secondary: DEFAULT_DARK_PALETTE.aquamarine,
background: DEFAULT_DARK_PALETTE.base,
surface: DEFAULT_DARK_PALETTE.surface0,
+
surfaceVariant: DEFAULT_DARK_PALETTE.mantle,
border: DEFAULT_DARK_PALETTE.overlay1,
borderVariant: DEFAULT_DARK_PALETTE.overlay0,
text: DEFAULT_DARK_PALETTE.text,
+
textSecondary: DEFAULT_DARK_PALETTE.subtext1,
+
textTertiary: DEFAULT_DARK_PALETTE.subtext0,
textInverse: DEFAULT_DARK_PALETTE.crust,
positive: DEFAULT_DARK_PALETTE.emerald,
negative: DEFAULT_DARK_PALETTE.ruby,
success: DEFAULT_DARK_PALETTE.emerald,
error: DEFAULT_DARK_PALETTE.ruby,
warning: DEFAULT_DARK_PALETTE.sunstone,
+
info: DEFAULT_DARK_PALETTE.aquamarine,
},
};