@chosengeneration/light-code 0.12.1 → 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,91 +1,139 @@
1
- /*
2
- * The theme contract packages/ui styles against.
3
- *
4
- * Inside the extension VS Code supplies every --vscode-* variable. A browser has no such
5
- * host, so the same names are defined here. Redefining them is what lets packages/ui stay
6
- * byte-identical across both hosts instead of branching on which one it is running in.
7
- *
8
- * Follows the OS light/dark preference, since there is no editor theme to follow.
9
- */
10
- :root {
11
- color-scheme: light dark;
12
-
13
- --vscode-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
14
- --vscode-editor-font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
15
-
16
- --vscode-editor-background: #ffffff;
17
- --vscode-sideBar-background: #f6f6f6;
18
- --vscode-foreground: #1f1f1f;
19
- --vscode-descriptionForeground: #616161;
20
- --vscode-widget-border: #d4d4d4;
21
- --vscode-panel-border: #d4d4d4;
22
- --vscode-input-background: #ffffff;
23
- --vscode-input-foreground: #1f1f1f;
24
- --vscode-input-border: #cecece;
25
- --vscode-button-background: #005fb8;
26
- --vscode-button-foreground: #ffffff;
27
- --vscode-button-hoverBackground: #0258a8;
28
- --vscode-button-secondaryBackground: #e5e5e5;
29
- --vscode-button-secondaryForeground: #3b3b3b;
30
- --vscode-button-secondaryHoverBackground: #cccccc;
31
- --vscode-toolbar-hoverBackground: #e8e8e8;
32
- --vscode-errorForeground: #e51400;
33
- --vscode-editorWarning-foreground: #bf8803;
34
- --vscode-focusBorder: #005fb8;
35
- --vscode-editor-inactiveSelectionBackground: #f0f0f0;
36
- --vscode-inputValidation-errorBackground: #fdf3f2;
37
- --vscode-inputValidation-errorBorder: #e51400;
38
- --vscode-inputValidation-errorForeground: #1f1f1f;
39
- --vscode-testing-iconPassed: #3d8f3d;
40
- }
41
-
42
- @media (prefers-color-scheme: dark) {
43
- :root {
44
- --vscode-editor-background: #1f1f1f;
45
- --vscode-sideBar-background: #181818;
46
- --vscode-foreground: #cccccc;
47
- --vscode-descriptionForeground: #9d9d9d;
48
- --vscode-widget-border: #313131;
49
- --vscode-panel-border: #2b2b2b;
50
- --vscode-input-background: #313131;
51
- --vscode-input-foreground: #cccccc;
52
- --vscode-input-border: #3c3c3c;
53
- --vscode-button-background: #0078d4;
54
- --vscode-button-foreground: #ffffff;
55
- --vscode-button-hoverBackground: #026ec1;
56
- --vscode-button-secondaryBackground: #313131;
57
- --vscode-button-secondaryForeground: #cccccc;
58
- --vscode-button-secondaryHoverBackground: #3c3c3c;
59
- --vscode-toolbar-hoverBackground: #2a2a2a;
60
- --vscode-errorForeground: #f85149;
61
- --vscode-editorWarning-foreground: #cca700;
62
- --vscode-focusBorder: #0078d4;
63
- --vscode-editor-inactiveSelectionBackground: #2a2a2a;
64
- --vscode-inputValidation-errorBackground: #3c1618;
65
- --vscode-inputValidation-errorBorder: #be1100;
66
- --vscode-inputValidation-errorForeground: #cccccc;
67
- --vscode-testing-iconPassed: #3fb950;
68
- }
69
- }
70
-
71
- html,
72
- body {
73
- height: 100%;
74
- margin: 0;
75
- background: var(--vscode-sideBar-background);
76
- color: var(--vscode-foreground);
77
- font-family: var(--vscode-font-family);
78
- }
79
-
80
- #root {
81
- height: 100%;
82
- }
83
-
84
- #status {
85
- display: none;
86
- padding: 6px 12px;
87
- font-size: 12px;
88
- background: var(--vscode-inputValidation-errorBackground);
89
- border-bottom: 1px solid var(--vscode-inputValidation-errorBorder);
90
- color: var(--vscode-inputValidation-errorForeground);
91
- }
1
+ /*
2
+ * The theme contract packages/ui styles against.
3
+ *
4
+ * Inside the extension VS Code supplies every --vscode-* variable. A browser has no such
5
+ * host, so the same names are defined here. Redefining them is what lets packages/ui stay
6
+ * byte-identical across both hosts instead of branching on which one it is running in.
7
+ *
8
+ * Follows the OS light/dark preference, since there is no editor theme to follow.
9
+ */
10
+ :root {
11
+ color-scheme: light dark;
12
+
13
+ --vscode-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
14
+ --vscode-editor-font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
15
+
16
+ --vscode-editor-background: #ffffff;
17
+ --vscode-sideBar-background: #f6f6f6;
18
+ --vscode-foreground: #1f1f1f;
19
+ --vscode-descriptionForeground: #616161;
20
+ --vscode-widget-border: #d4d4d4;
21
+ --vscode-panel-border: #d4d4d4;
22
+ --vscode-input-background: #ffffff;
23
+ --vscode-input-foreground: #1f1f1f;
24
+ --vscode-input-border: #cecece;
25
+ --vscode-button-background: #005fb8;
26
+ --vscode-button-foreground: #ffffff;
27
+ --vscode-button-hoverBackground: #0258a8;
28
+ --vscode-button-secondaryBackground: #e5e5e5;
29
+ --vscode-button-secondaryForeground: #3b3b3b;
30
+ --vscode-button-secondaryHoverBackground: #cccccc;
31
+ --vscode-toolbar-hoverBackground: #e8e8e8;
32
+ --vscode-errorForeground: #e51400;
33
+ --vscode-editorWarning-foreground: #bf8803;
34
+ --vscode-focusBorder: #005fb8;
35
+ --vscode-editor-inactiveSelectionBackground: #f0f0f0;
36
+ --vscode-inputValidation-errorBackground: #fdf3f2;
37
+ --vscode-inputValidation-errorBorder: #e51400;
38
+ --vscode-inputValidation-errorForeground: #1f1f1f;
39
+ --vscode-testing-iconPassed: #3d8f3d;
40
+ }
41
+
42
+ /*
43
+ * Dark applies in two ways, and both are needed.
44
+ *
45
+ * `prefers-color-scheme` follows the **browser's** appearance setting, not the operating
46
+ * system's — a corporate Edge pinned to light shows a light UI on a dark Windows, and the user
47
+ * has no way to change it and no clue why. So the media query is guarded: it applies unless the
48
+ * user has explicitly asked for light, and an explicit `data-theme="dark"` wins regardless.
49
+ *
50
+ * Written as two rules over one shared block rather than duplicated, because a colour defined in
51
+ * only one of them is a bug nobody sees until they toggle.
52
+ */
53
+ :root:not([data-theme='light']) {
54
+ color-scheme: light dark;
55
+ }
56
+
57
+ @media (prefers-color-scheme: dark) {
58
+ :root:not([data-theme='light']) {
59
+ --vscode-editor-background: #1f1f1f;
60
+ --vscode-sideBar-background: #181818;
61
+ --vscode-foreground: #cccccc;
62
+ --vscode-descriptionForeground: #9d9d9d;
63
+ --vscode-widget-border: #313131;
64
+ --vscode-panel-border: #2b2b2b;
65
+ --vscode-input-background: #313131;
66
+ --vscode-input-foreground: #cccccc;
67
+ --vscode-input-border: #3c3c3c;
68
+ --vscode-button-background: #0078d4;
69
+ --vscode-button-foreground: #ffffff;
70
+ --vscode-button-hoverBackground: #026ec1;
71
+ --vscode-button-secondaryBackground: #313131;
72
+ --vscode-button-secondaryForeground: #cccccc;
73
+ --vscode-button-secondaryHoverBackground: #3c3c3c;
74
+ --vscode-toolbar-hoverBackground: #2a2a2a;
75
+ --vscode-errorForeground: #f85149;
76
+ --vscode-editorWarning-foreground: #cca700;
77
+ --vscode-focusBorder: #0078d4;
78
+ --vscode-editor-inactiveSelectionBackground: #2a2a2a;
79
+ --vscode-inputValidation-errorBackground: #3c1618;
80
+ --vscode-inputValidation-errorBorder: #be1100;
81
+ --vscode-inputValidation-errorForeground: #cccccc;
82
+ --vscode-testing-iconPassed: #3fb950;
83
+ }
84
+ }
85
+
86
+ :root[data-theme='dark'] {
87
+ color-scheme: dark;
88
+
89
+ --vscode-editor-background: #1f1f1f;
90
+ --vscode-sideBar-background: #181818;
91
+ --vscode-foreground: #cccccc;
92
+ --vscode-descriptionForeground: #9d9d9d;
93
+ --vscode-widget-border: #313131;
94
+ --vscode-panel-border: #2b2b2b;
95
+ --vscode-input-background: #313131;
96
+ --vscode-input-foreground: #cccccc;
97
+ --vscode-input-border: #3c3c3c;
98
+ --vscode-button-background: #0078d4;
99
+ --vscode-button-foreground: #ffffff;
100
+ --vscode-button-hoverBackground: #026ec1;
101
+ --vscode-button-secondaryBackground: #313131;
102
+ --vscode-button-secondaryForeground: #cccccc;
103
+ --vscode-button-secondaryHoverBackground: #3c3c3c;
104
+ --vscode-toolbar-hoverBackground: #2a2a2a;
105
+ --vscode-errorForeground: #f85149;
106
+ --vscode-editorWarning-foreground: #cca700;
107
+ --vscode-focusBorder: #0078d4;
108
+ --vscode-editor-inactiveSelectionBackground: #2a2a2a;
109
+ --vscode-inputValidation-errorBackground: #3c1618;
110
+ --vscode-inputValidation-errorBorder: #be1100;
111
+ --vscode-inputValidation-errorForeground: #cccccc;
112
+ --vscode-testing-iconPassed: #3fb950;
113
+ }
114
+
115
+ :root[data-theme='light'] {
116
+ color-scheme: light;
117
+ }
118
+
119
+ html,
120
+ body {
121
+ height: 100%;
122
+ margin: 0;
123
+ background: var(--vscode-sideBar-background);
124
+ color: var(--vscode-foreground);
125
+ font-family: var(--vscode-font-family);
126
+ }
127
+
128
+ #root {
129
+ height: 100%;
130
+ }
131
+
132
+ #status {
133
+ display: none;
134
+ padding: 6px 12px;
135
+ font-size: 12px;
136
+ background: var(--vscode-inputValidation-errorBackground);
137
+ border-bottom: 1px solid var(--vscode-inputValidation-errorBorder);
138
+ color: var(--vscode-inputValidation-errorForeground);
139
+ }