aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1/* KidLisp Editor - CSS Variables & Themes */
2
3:root {
4 /* Light mode (default) */
5 --bg-primary: #f7f7f7;
6 --bg-secondary: #e8e8e8;
7 --bg-tertiary: white;
8 --text-primary: #111;
9 --text-secondary: #333;
10 --text-tertiary: #666;
11 --border-color: #ddd;
12 --border-subtle: #e0e0e0;
13 --code-bg: #e8e8e8;
14 --code-text: #a31515;
15 --editor-bg: #fafafa;
16 --editor-text: #111;
17 --editor-border: #ddd;
18
19 /* Font stacks */
20 --font-mono: 'Noto Sans Mono', 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
21 --font-display: 'YWFTProcessing-Regular', monospace;
22 --font-fun: 'Comic Relief', 'Comic Sans MS', cursive;
23
24 /* Brand colors */
25 --ac-purple: rgb(205, 92, 155);
26 --ac-purple-light: rgb(240, 235, 250);
27 --ac-purple-dark: rgb(48, 43, 58);
28
29 /* Editor colors */
30 --editor-yellow: #fffacd;
31 --editor-brown: #2a2520;
32 --editor-brown-light: #3a3530;
33
34 /* Console colors */
35 --console-bg: #4a3020;
36 --console-text: #ff9f43;
37 --console-header-bg: #3d2817;
38
39 /* Tab colors */
40 --tab-examples-bg: rgba(59, 130, 246, 0.2);
41 --tab-examples-active: rgba(59, 130, 246, 0.4);
42 --tab-keeps-bg: rgba(205, 92, 155, 0.2);
43 --tab-keeps-active: rgba(205, 92, 155, 0.4);
44 --tab-reference-bg: rgba(34, 197, 94, 0.2);
45 --tab-reference-active: rgba(34, 197, 94, 0.4);
46
47 /* Button colors */
48 --btn-play: rgb(76, 175, 80);
49 --btn-play-hover: rgb(102, 187, 106);
50 --btn-pause: rgb(255, 193, 7);
51 --btn-stop: rgb(244, 67, 54);
52
53 /* Spacing */
54 --header-height: 44px;
55 --mobile-header-height: 40px;
56 --gutter-size: 4px;
57}
58
59/* Dark mode via media query */
60@media (prefers-color-scheme: dark) {
61 :root {
62 --bg-primary: #1e1e1e;
63 --bg-secondary: #252526;
64 --bg-tertiary: #2d2d30;
65 --text-primary: #d4d4d4;
66 --text-secondary: #d4d4d4;
67 --text-tertiary: #858585;
68 --border-color: #3e3e42;
69 --border-subtle: #3e3e42;
70 --code-bg: #252526;
71 --code-text: #ce9178;
72 --editor-bg: #1e1e1e;
73 --editor-text: #d4d4d4;
74 --editor-border: #333;
75
76 --btn-play: rgb(102, 187, 106);
77 --btn-stop: rgb(239, 83, 80);
78 }
79}
80
81/* Manual theme overrides via data-theme attribute */
82[data-theme="light"] {
83 --bg-primary: #f7f7f7;
84 --bg-secondary: #e8e8e8;
85 --bg-tertiary: white;
86 --text-primary: #111;
87 --text-secondary: #333;
88 --text-tertiary: #666;
89 --border-color: #ddd;
90 --border-subtle: #e0e0e0;
91 --code-bg: #e8e8e8;
92 --code-text: #a31515;
93 --editor-bg: #fafafa;
94 --editor-text: #111;
95 --editor-border: #ddd;
96}
97
98[data-theme="dark"] {
99 --bg-primary: #1e1e1e;
100 --bg-secondary: #252526;
101 --bg-tertiary: #2d2d30;
102 --text-primary: #d4d4d4;
103 --text-secondary: #d4d4d4;
104 --text-tertiary: #858585;
105 --border-color: #3e3e42;
106 --border-subtle: #3e3e42;
107 --code-bg: #252526;
108 --code-text: #ce9178;
109 --editor-bg: #1e1e1e;
110 --editor-text: #d4d4d4;
111 --editor-border: #333;
112}