Last active 1 month ago

Rose Pine color palettes for Ellipsus

rose pine dawn.css Raw
1/* Ellipsus Theme | Schema: 1 */
2:root {
3 --color-surface-main: #faf4ed;
4 --color-surface-writing: #fffaf3;
5 --color-surface-primary: #f2e9e1;
6 --color-surface-neutral: #fffaf3;
7 --color-surface-light: #fffaf3;
8 --color-surface-dim: #f2e9e1;
9 --color-surface-alt: #f2e9e1;
10 --color-surface-inverted: #d7827e;
11 --color-content-primary: #464261;
12 --color-content-secondary: #d7827e;
13 --color-content-tertiary: #797593;
14 --color-content-disabled: #9893a5;
15 --color-content-light: #56949f;
16 --color-content-light-2: #b4637a;
17 --color-content-dark: #797593;
18 --color-content-inverted: #faf4ed;
19 --color-border-primary: #9893a5;
20 --color-border-secondary: #dfdad9;
21 --color-border-tertiary: #f4ede8;
22 --color-border-inverted: #464261;
23 --color-border-disabled: #f4ede8;
24 --button-primary-surface: #286983;
25 --button-primary-surface-hover: #3a98be;
26 --button-primary-surface-pressed: #1e5064;
27 --button-primary-surface-disabled: #789ead;
28 --button-primary-content: #faf4ed;
29 --button-primary-content-pressed: #fffaf3;
30 --button-primary-content-disabled: #cecacd;
31 --button-surface: transparent;
32 --button-surface-hover: #fffaf3;
33 --button-surface-pressed: #ffefda;
34 --button-surface-disabled: transparent;
35 --button-border: #797593;
36 --button-border-hover: #464261;
37 --button-border-pressed: #d7827e;
38 --button-border-disabled: #9893a5;
39 --button-content: #797593;
40 --button-content-hover: #464261;
41 --button-content-pressed: #d7827e;
42 --button-content-disabled: #9893a5;
43 --button-primary-alt-surface: #ea9d34;
44 --button-primary-alt-surface-hover: #ffffff;
45 --button-primary-alt-surface-pressed: #fdfaf5;
46 --button-primary-alt-surface-disabled: #e3cfbd;
47 --button-primary-alt-content: #464261;
48 --button-primary-alt-content-pressed: #262626;
49 --button-primary-alt-content-disabled: #757575;
50 --button-surface-alt: transparent;
51 --button-surface-hover-alt: #ffffff;
52 --button-surface-pressed-alt: #eadccf;
53 --button-surface-disabled-alt: transparent;
54 --button-border-alt: #555555;
55 --button-border-hover-alt: #888888;
56 --button-border-pressed-alt: #555555;
57 --button-border-disabled-alt: #9f9f9f;
58 --button-content-alt: #1e150d;
59 --button-content-hover-alt: #65472c;
60 --button-content-pressed-alt: #1e150d;
61 --button-content-disabled-alt: #808080;
62 --color-surface-error: #a11b24;
63 --color-content-error: #d7827e;
64 --color-border-error: #b81a14;
65 --color-surface-success: #074057;
66 --color-content-success: #286983;
67 --color-border-success: #057b40;
68 --color-surface-idle: #56949f;
69 --color-content-idle: #1f5963;
70 --color-surface-warning: #b56800;
71 --color-content-warning: #ea9d34;
72 --button-error-primary-surface: #e73d36;
73 --button-error-primary-surface-hover: #ef7f7a;
74 --button-error-primary-surface-pressed: #da221a;
75 --button-error-surface: transparent;
76 --button-error-surface-hover: #ffffff;
77 --button-error-surface-pressed: #fbf0ef;
78 --button-error-border: #e73d36;
79 --button-error-border-hover: #ef7f7a;
80 --button-error-border-pressed: #da221a;
81 --button-error-content: #e73d36;
82 --button-error-content-hover: #ef7f7a;
83 --button-error-content-pressed: #da221a;
84 --color-system-highlight-selection: #dfdad9;
85 --color-system-highlight-comment-idle: #facb8c;
86 --color-system-highlight-comment-active: #ea9d34;
87 --color-system-highlight-comment-resolved: #f4ede8;
88 --color-highlighter-purple: #d6cae3;
89 --color-highlighter-blue: #bad1e0;
90 --color-highlighter-cyan: #bad9de;
91 --color-highlighter-green: #D4EDDA;
92 --color-highlighter-yellow: #facc8e;
93 --color-highlighter-orange: #FFE0CC;
94 --color-highlighter-coral: #ebc5c3;
95 --color-highlighter-pink: #deb1be;
96 --color-highlighter-grey: #f4ede8;
97 --color-brand-purple: #c455eb;
98 --color-brand-purple-inverted: #dc78ff;
99 --color-brand-blue-alt: #6ab8ff;
100 --color-brand-blue: #2173be;
101 --color-brand-blue-inverted: #6ab8ff;
102 --color-brand-coral: #eb5b55;
103 --color-brand-coral-inverted: #fe6862;
104 --color-brand-orange: #f09236;
105 --color-brand-orange-inverted: #ffad5c;
106 --color-brand-green: #529a6a;
107 --color-brand-green-inverted: #56c87c;
108 --color-content-link: #d7827e;
109 --color-graphics-1: #e6fbff;
110 --color-graphics-2: #b3dce3;
111 --color-graphics-3: #85bdc7;
112 --color-graphics-4: #56949f;
113 --shadow-color: #464261;
114 --shadow-xs: 0px 0px 8px 0px rgb(70 66 97 / 8%);
115 --shadow-s: 0px 0px 12px 0px rgb(70 66 97 / 8%);
116 --shadow-m: 0px 2px 14px 0px rgb(70 66 97 / 5%), 0px 2px 8px 0px rgb(70 66 97 / 5%);
117 --shadow-l: 0px 0px 48px 0px rgb(70 66 97 / 5%), 0px 6px 16px 0px rgb(70 66 97 / 5%);
118 --shadow-xl: 0px -26px 30px 0px rgb(70 66 97 / 1%), 0px 26px 11px 0px rgb(70 66 97 / 1%), 0px -15px 40px 0px rgb(70 66 97 / 5%), 0px 15px 9px 0px rgb(70 66 97 / 5%), 0px -7px 24px 0px rgb(70 66 97 / 5%), 0px 7px 7px 0px rgb(70 66 97 / 9%), 0px -2px 4px 0px rgb(70 66 97 / 10%), 0px 2px 4px 0px rgb(70 66 97 / 10%);
119}
rose pine moon.css Raw
1/* Ellipsus Theme | Schema: 1 */
2:root {
3 --color-surface-main: #232136;
4 --color-surface-writing: #2a273f;
5 --color-surface-primary: #393552;
6 --color-surface-neutral: #2a273f;
7 --color-surface-light: #2a273f;
8 --color-surface-dim: #191726;
9 --color-surface-alt: #393552;
10 --color-surface-inverted: #b7b5c2;
11 --color-content-primary: #e0def4;
12 --color-content-secondary: #ea9a97;
13 --color-content-tertiary: #908caa;
14 --color-content-disabled: #6e6a86;
15 --color-content-light: #b1adca;
16 --color-content-light-2: #807aa9;
17 --color-content-dark: #232136;
18 --color-content-inverted: #000000;
19 --color-border-primary: #56526e;
20 --color-border-secondary: #44415a;
21 --color-border-tertiary: #2a283e;
22 --color-border-inverted: #e0def4;
23 --color-border-disabled: #393552;
24 --button-primary-surface: #3e8fb0;
25 --button-primary-surface-hover: #6eb1cc;
26 --button-primary-surface-pressed: #337692;
27 --button-primary-surface-disabled: #485b63;
28 --button-primary-content: #000000;
29 --button-primary-content-pressed: #e0def4;
30 --button-primary-content-disabled: #9594a1;
31 --button-surface: transparent;
32 --button-surface-hover: #e0def4;
33 --button-surface-pressed: #1f1d2f;
34 --button-surface-disabled: transparent;
35 --button-border: #908caa;
36 --button-border-hover: #e0def4;
37 --button-border-pressed: #e0def4;
38 --button-border-disabled: #6e6a86;
39 --button-content: #908caa;
40 --button-content-hover: #e0def4;
41 --button-content-pressed: #e0def4;
42 --button-content-disabled: #6e6a86;
43 --button-primary-alt-surface: #f6c177;
44 --button-primary-alt-surface-hover: #6eb1cc;
45 --button-primary-alt-surface-pressed: #6e7b80;
46 --button-primary-alt-surface-disabled: #232133;
47 --button-primary-alt-content: #232136;
48 --button-primary-alt-content-pressed: #262626;
49 --button-primary-alt-content-disabled: #222222;
50 --button-surface-alt: transparent;
51 --button-surface-hover-alt: #4f4971;
52 --button-surface-pressed-alt: #2e2b43;
53 --button-surface-disabled-alt: transparent;
54 --button-border-alt: #888888;
55 --button-border-hover-alt: #bbbbbb;
56 --button-border-pressed-alt: #888888;
57 --button-border-disabled-alt: #666666;
58 --button-content-alt: #cac7db;
59 --button-content-hover-alt: #ffffff;
60 --button-content-pressed-alt: #cac7db;
61 --button-content-disabled-alt: #8b8b8b;
62 --color-surface-error: #eb6f92;
63 --color-content-error: #f5b0c4;
64 --color-border-error: #fe625d;
65 --color-surface-success: #3e8fb0;
66 --color-content-success: #84bbd1;
67 --color-border-success: #057b40;
68 --color-surface-idle: #9ccfd8;
69 --color-content-idle: #dff4f7;
70 --color-surface-warning: #f6c177;
71 --color-content-warning: #ffe8c7;
72 --button-error-primary-surface: #e73d36;
73 --button-error-primary-surface-hover: #ef7f7a;
74 --button-error-primary-surface-pressed: #da221a;
75 --button-error-surface: transparent;
76 --button-error-surface-hover: #4a2221;
77 --button-error-surface-pressed: #622422;
78 --button-error-border: #e73d36;
79 --button-error-border-hover: #ef7f7a;
80 --button-error-border-pressed: #da221a;
81 --button-error-content: #e73d36;
82 --button-error-content-hover: #ef7f7a;
83 --button-error-content-pressed: #da221a;
84 --color-system-highlight-selection: #56526e;
85 --color-system-highlight-comment-idle: #ba9d73;
86 --color-system-highlight-comment-active: #f6c177;
87 --color-system-highlight-comment-resolved: #eb6f92;
88 --color-highlighter-purple: #c4a7e7;
89 --color-highlighter-blue: #3e8fb0;
90 --color-highlighter-cyan: #9ccfd8;
91 --color-highlighter-green: #2d6a5e;
92 --color-highlighter-yellow: #f6c177;
93 --color-highlighter-orange: #b02336;
94 --color-highlighter-coral: #ea9a97;
95 --color-highlighter-pink: #eb6f92;
96 --color-highlighter-grey: #56526e;
97 --color-brand-blue: #6ab8ff;
98 --color-brand-blue-inverted: #2173be;
99 --color-brand-blue-alt: #6ab8ff;
100 --color-brand-orange: #ffad5c;
101 --color-brand-orange-inverted: #f09236;
102 --color-brand-purple: #dc78ff;
103 --color-brand-purple-inverted: #c455eb;
104 --color-brand-coral: #fe6862;
105 --color-brand-coral-inverted: #eb5b55;
106 --color-brand-green: #56c87c;
107 --color-brand-green-inverted: #529a6a;
108 --color-content-link: #ea9a97;
109 --color-graphics-1: #3e8fb0;
110 --color-graphics-2: #5eb0d1;
111 --color-graphics-3: #7cc2de;
112 --color-graphics-4: #8dcfeb;
113 --shadow-color: #6e6a86;
114 --shadow-xs: 0px 0px 12px 0px rgb(110 106 134 / 40%);
115 --shadow-s: 0px 0px 16px 0px rgb(110 106 134 / 40%);
116 --shadow-m: 0px 0px 16px 0px rgb(110 106 134 / 40%);
117 --shadow-l: 0px 0px 24px 0px rgb(110 106 134 / 40%);
118 --shadow-xl: 0px 0px 32px 0px rgb(110 106 134 / 64%);
119}