lightmetal 0.3.0 → 0.4.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.
Files changed (21) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +32 -0
  3. package/dist/skins/bootstrap.css +68 -0
  4. package/dist/skins/bootstrap.min.css +1 -0
  5. package/dist/skins/frost.css +76 -0
  6. package/dist/skins/frost.min.css +1 -0
  7. package/dist/skins/material-classic.css +74 -0
  8. package/dist/skins/material-classic.min.css +1 -0
  9. package/dist/skins/material-outline.css +73 -0
  10. package/dist/skins/material-outline.min.css +1 -0
  11. package/dist/skins/patina.css +67 -0
  12. package/dist/skins/patina.min.css +1 -0
  13. package/dist/skins/sterling.css +74 -0
  14. package/dist/skins/sterling.min.css +1 -0
  15. package/package.json +1 -1
  16. package/src/skins/bootstrap.css +68 -0
  17. package/src/skins/frost.css +76 -0
  18. package/src/skins/material-classic.css +74 -0
  19. package/src/skins/material-outline.css +73 -0
  20. package/src/skins/patina.css +67 -0
  21. package/src/skins/sterling.css +74 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.4.0
4
+
5
+ - Added six optional CSS skins: Bootstrap, Material Classic, Material Outline,
6
+ Frost, Patina, and Sterling. Each supports system, light, and dark modes.
7
+ - Build plain and minified skins alongside the unchanged default stylesheet.
8
+ - Added a local skin gallery and browser/package checks for skin appearance,
9
+ keyboard focus, Source mode, tables, contrast, and narrow layouts.
10
+
3
11
  ## 0.3.0
4
12
 
5
13
  - Added configurable formatting toolbar and custom actions.
package/README.md CHANGED
@@ -306,6 +306,38 @@ Styles are scoped under `.lightmetal`. Override CSS variables and editor size:
306
306
 
307
307
  Toolbar icons use `currentColor` to follow the theme.
308
308
 
309
+ ### Optional skins
310
+
311
+ Preview all six skins alongside the default by opening `examples/skins.html`
312
+ from the checkout; it also works over `file://`. With the demo server running,
313
+ visit `http://localhost:5000/skins.html`.
314
+
315
+ | Skin | Host class | Appearance |
316
+ | --- | --- | --- |
317
+ | Bootstrap | `lightmetal-bootstrap` | Familiar form controls and blue accents. |
318
+ | Material Classic | `lightmetal-material-classic` | Filled toolbar, round buttons, and an accented baseline. |
319
+ | Material Outline | `lightmetal-material-outline` | Outlined frame and active controls. |
320
+ | Frost | `lightmetal-frost` | Spacious layout, cool colors, and lighter icon strokes. |
321
+ | Patina | `lightmetal-patina` | Crisp toolbar chrome with blue accents. |
322
+ | Sterling | `lightmetal-sterling` | Compact, neutral toolbar chrome. |
323
+
324
+ Load the default CSS first, then the skin. Add one skin class to the host:
325
+
326
+ ```html
327
+ <link rel="stylesheet" href="dist/lightmetal.css">
328
+ <link rel="stylesheet" href="dist/skins/frost.min.css">
329
+ <div id="editor" class="lightmetal lightmetal-frost"></div>
330
+ ```
331
+
332
+ Initialize the editor as usual. Both plain and minified skin files are built
333
+ from `src/skins/` into `dist/skins/`. Each skin supports the same system,
334
+ `lightmetal-light`, and `lightmetal-dark` modes as the default. Different skins
335
+ can coexist on one page. Skins add no JavaScript, frameworks, fonts, or external
336
+ requests; they use the editor's existing icons.
337
+
338
+ All skins are original ligHTMetaL CSS. Bootstrap and Material describe the
339
+ design inspiration, not dependencies or affiliations. The default appearance stays unchanged if you load no skin.
340
+
309
341
  ## HTML and safety
310
342
 
311
343
  **Validate and sanitize HTML in your application before rendering or publishing
package/dist/skins/bootstrap.css ADDED
@@ -0,0 +1,68 @@
1
+ /* Bootstrap-inspired form styling. Original ligHTMetaL CSS, not a Bootstrap dependency.
2
+ * Load after lightmetal.css. Add lightmetal-bootstrap to the editor host.
3
+ */
4
+ .lightmetal.lightmetal-bootstrap {
5
+ --lightmetal-bg: #ffffff;
6
+ --lightmetal-bg-toolbar: #f8f9fa;
7
+ --lightmetal-border: #ced4da;
8
+ --lightmetal-color: #212529;
9
+ --lightmetal-color-dim: #495057;
10
+ --lightmetal-hover: #e9ecef;
11
+ --lightmetal-accent: #0759c7;
12
+ --lightmetal-accent-soft: #e7f0ff;
13
+ --lightmetal-error-fg: #b42318;
14
+ --lightmetal-error-bg: #fdecea;
15
+ color-scheme: light;
16
+ font-family: system-ui, sans-serif;
17
+ border-radius: 6px;
18
+ }
19
+
20
+ .lightmetal.lightmetal-bootstrap.lightmetal-dark {
21
+ --lightmetal-bg: #212529;
22
+ --lightmetal-bg-toolbar: #2b3035;
23
+ --lightmetal-border: #59636d;
24
+ --lightmetal-color: #f1f3f5;
25
+ --lightmetal-color-dim: #c2c9d0;
26
+ --lightmetal-hover: #3c454e;
27
+ --lightmetal-accent: #a6c8ff;
28
+ --lightmetal-accent-soft: #354860;
29
+ --lightmetal-error-fg: #ffb4ad;
30
+ --lightmetal-error-bg: #532924;
31
+ color-scheme: dark;
32
+ }
33
+
34
+ @media (prefers-color-scheme: dark) {
35
+ .lightmetal.lightmetal-bootstrap:not(.lightmetal-light) {
36
+ --lightmetal-bg: #212529;
37
+ --lightmetal-bg-toolbar: #2b3035;
38
+ --lightmetal-border: #59636d;
39
+ --lightmetal-color: #f1f3f5;
40
+ --lightmetal-color-dim: #c2c9d0;
41
+ --lightmetal-hover: #3c454e;
42
+ --lightmetal-accent: #a6c8ff;
43
+ --lightmetal-accent-soft: #354860;
44
+ --lightmetal-error-fg: #ffb4ad;
45
+ --lightmetal-error-bg: #532924;
46
+ color-scheme: dark;
47
+ }
48
+ }
49
+
50
+ .lightmetal.lightmetal-bootstrap:focus-within {
51
+ border-color: var(--lightmetal-accent);
52
+ box-shadow: 0 0 0 3px var(--lightmetal-accent-soft);
53
+ }
54
+
55
+ .lightmetal-bootstrap .lightmetal-actionbar {
56
+ gap: 3px;
57
+ }
58
+
59
+ .lightmetal-bootstrap .lightmetal-button {
60
+ width: 36px;
61
+ height: 32px;
62
+ border-radius: 4px;
63
+ }
64
+
65
+ .lightmetal-bootstrap .lightmetal-table-button,
66
+ .lightmetal-bootstrap .lightmetal-table-dropdown {
67
+ border-radius: 4px;
68
+ }
package/dist/skins/bootstrap.min.css ADDED
@@ -0,0 +1 @@
1
+ .lightmetal.lightmetal-bootstrap{--lightmetal-bg: #ffffff;--lightmetal-bg-toolbar: #f8f9fa;--lightmetal-border: #ced4da;--lightmetal-color: #212529;--lightmetal-color-dim: #495057;--lightmetal-hover: #e9ecef;--lightmetal-accent: #0759c7;--lightmetal-accent-soft: #e7f0ff;--lightmetal-error-fg: #b42318;--lightmetal-error-bg: #fdecea;color-scheme:light;font-family:system-ui,sans-serif;border-radius:6px}.lightmetal.lightmetal-bootstrap.lightmetal-dark{--lightmetal-bg: #212529;--lightmetal-bg-toolbar: #2b3035;--lightmetal-border: #59636d;--lightmetal-color: #f1f3f5;--lightmetal-color-dim: #c2c9d0;--lightmetal-hover: #3c454e;--lightmetal-accent: #a6c8ff;--lightmetal-accent-soft: #354860;--lightmetal-error-fg: #ffb4ad;--lightmetal-error-bg: #532924;color-scheme:dark}@media(prefers-color-scheme:dark){.lightmetal.lightmetal-bootstrap:not(.lightmetal-light){--lightmetal-bg: #212529;--lightmetal-bg-toolbar: #2b3035;--lightmetal-border: #59636d;--lightmetal-color: #f1f3f5;--lightmetal-color-dim: #c2c9d0;--lightmetal-hover: #3c454e;--lightmetal-accent: #a6c8ff;--lightmetal-accent-soft: #354860;--lightmetal-error-fg: #ffb4ad;--lightmetal-error-bg: #532924;color-scheme:dark}}.lightmetal.lightmetal-bootstrap:focus-within{border-color:var(--lightmetal-accent);box-shadow:0 0 0 3px var(--lightmetal-accent-soft)}.lightmetal-bootstrap .lightmetal-actionbar{gap:3px}.lightmetal-bootstrap .lightmetal-button{width:36px;height:32px;border-radius:4px}.lightmetal-bootstrap .lightmetal-table-button,.lightmetal-bootstrap .lightmetal-table-dropdown{border-radius:4px}
package/dist/skins/frost.css ADDED
@@ -0,0 +1,76 @@
1
+ /* A spacious, lightweight surface. Original ligHTMetaL CSS.
2
+ * Load after lightmetal.css. Add lightmetal-frost to the editor host.
3
+ */
4
+ .lightmetal.lightmetal-frost {
5
+ --lightmetal-bg: #ffffff;
6
+ --lightmetal-bg-toolbar: #ffffff;
7
+ --lightmetal-border: #d7e2e8;
8
+ --lightmetal-color: #263e4a;
9
+ --lightmetal-color-dim: #526a77;
10
+ --lightmetal-hover: #eff7fa;
11
+ --lightmetal-accent: #086785;
12
+ --lightmetal-accent-soft: #e1f3fa;
13
+ --lightmetal-error-fg: #b42318;
14
+ --lightmetal-error-bg: #fdecea;
15
+ color-scheme: light;
16
+ font-family: system-ui, sans-serif;
17
+ border-radius: 14px;
18
+ }
19
+
20
+ .lightmetal.lightmetal-frost.lightmetal-dark {
21
+ --lightmetal-bg: #14242d;
22
+ --lightmetal-bg-toolbar: #172b35;
23
+ --lightmetal-border: #47606d;
24
+ --lightmetal-color: #e9f3f8;
25
+ --lightmetal-color-dim: #b0c6d2;
26
+ --lightmetal-hover: #243f4d;
27
+ --lightmetal-accent: #89d8ef;
28
+ --lightmetal-accent-soft: #264d5a;
29
+ --lightmetal-error-fg: #ffb4ad;
30
+ --lightmetal-error-bg: #532924;
31
+ color-scheme: dark;
32
+ }
33
+
34
+ @media (prefers-color-scheme: dark) {
35
+ .lightmetal.lightmetal-frost:not(.lightmetal-light) {
36
+ --lightmetal-bg: #14242d;
37
+ --lightmetal-bg-toolbar: #172b35;
38
+ --lightmetal-border: #47606d;
39
+ --lightmetal-color: #e9f3f8;
40
+ --lightmetal-color-dim: #b0c6d2;
41
+ --lightmetal-hover: #243f4d;
42
+ --lightmetal-accent: #89d8ef;
43
+ --lightmetal-accent-soft: #264d5a;
44
+ --lightmetal-error-fg: #ffb4ad;
45
+ --lightmetal-error-bg: #532924;
46
+ color-scheme: dark;
47
+ }
48
+ }
49
+
50
+ .lightmetal-frost .lightmetal-actionbar {
51
+ gap: 4px;
52
+ padding: 10px;
53
+ }
54
+
55
+ .lightmetal-frost .lightmetal-button {
56
+ height: 32px;
57
+ border-radius: 8px;
58
+ }
59
+
60
+ .lightmetal-frost .lightmetal-button svg {
61
+ stroke-width: 1.6;
62
+ }
63
+
64
+ .lightmetal-frost .lightmetal-content,
65
+ .lightmetal-frost .lightmetal-sources {
66
+ padding: 24px;
67
+ line-height: 1.7;
68
+ }
69
+
70
+ .lightmetal-frost .lightmetal-table-button {
71
+ border-radius: 8px;
72
+ }
73
+
74
+ .lightmetal-frost .lightmetal-table-dropdown {
75
+ border-radius: 12px;
76
+ }
package/dist/skins/frost.min.css ADDED
@@ -0,0 +1 @@
1
+ .lightmetal.lightmetal-frost{--lightmetal-bg: #ffffff;--lightmetal-bg-toolbar: #ffffff;--lightmetal-border: #d7e2e8;--lightmetal-color: #263e4a;--lightmetal-color-dim: #526a77;--lightmetal-hover: #eff7fa;--lightmetal-accent: #086785;--lightmetal-accent-soft: #e1f3fa;--lightmetal-error-fg: #b42318;--lightmetal-error-bg: #fdecea;color-scheme:light;font-family:system-ui,sans-serif;border-radius:14px}.lightmetal.lightmetal-frost.lightmetal-dark{--lightmetal-bg: #14242d;--lightmetal-bg-toolbar: #172b35;--lightmetal-border: #47606d;--lightmetal-color: #e9f3f8;--lightmetal-color-dim: #b0c6d2;--lightmetal-hover: #243f4d;--lightmetal-accent: #89d8ef;--lightmetal-accent-soft: #264d5a;--lightmetal-error-fg: #ffb4ad;--lightmetal-error-bg: #532924;color-scheme:dark}@media(prefers-color-scheme:dark){.lightmetal.lightmetal-frost:not(.lightmetal-light){--lightmetal-bg: #14242d;--lightmetal-bg-toolbar: #172b35;--lightmetal-border: #47606d;--lightmetal-color: #e9f3f8;--lightmetal-color-dim: #b0c6d2;--lightmetal-hover: #243f4d;--lightmetal-accent: #89d8ef;--lightmetal-accent-soft: #264d5a;--lightmetal-error-fg: #ffb4ad;--lightmetal-error-bg: #532924;color-scheme:dark}}.lightmetal-frost .lightmetal-actionbar{gap:4px;padding:10px}.lightmetal-frost .lightmetal-button{height:32px;border-radius:8px}.lightmetal-frost .lightmetal-button svg{stroke-width:1.6}.lightmetal-frost .lightmetal-content,.lightmetal-frost .lightmetal-sources{padding:24px;line-height:1.7}.lightmetal-frost .lightmetal-table-button{border-radius:8px}.lightmetal-frost .lightmetal-table-dropdown{border-radius:12px}
package/dist/skins/material-classic.css ADDED
@@ -0,0 +1,74 @@
1
+ /* Filled Material Design-inspired surfaces. Original ligHTMetaL CSS.
2
+ * Load after lightmetal.css. Add lightmetal-material-classic to the host.
3
+ */
4
+ .lightmetal.lightmetal-material-classic {
5
+ --lightmetal-bg: #ffffff;
6
+ --lightmetal-bg-toolbar: #f3f1f8;
7
+ --lightmetal-border: #b7b0c4;
8
+ --lightmetal-color: #292332;
9
+ --lightmetal-color-dim: #60566b;
10
+ --lightmetal-hover: #e8e2f0;
11
+ --lightmetal-accent: #653a91;
12
+ --lightmetal-accent-soft: #eee3fa;
13
+ --lightmetal-error-fg: #b42318;
14
+ --lightmetal-error-bg: #fdecea;
15
+ color-scheme: light;
16
+ font-family: system-ui, sans-serif;
17
+ border-width: 0 0 2px;
18
+ border-radius: 12px 12px 0 0;
19
+ box-shadow: 0 2px 8px var(--lightmetal-accent-soft);
20
+ }
21
+
22
+ .lightmetal.lightmetal-material-classic.lightmetal-dark {
23
+ --lightmetal-bg: #211d26;
24
+ --lightmetal-bg-toolbar: #2d2736;
25
+ --lightmetal-border: #6f647d;
26
+ --lightmetal-color: #f2ecf8;
27
+ --lightmetal-color-dim: #c9bed5;
28
+ --lightmetal-hover: #40354d;
29
+ --lightmetal-accent: #d4b1ff;
30
+ --lightmetal-accent-soft: #483257;
31
+ --lightmetal-error-fg: #ffb4ad;
32
+ --lightmetal-error-bg: #532924;
33
+ color-scheme: dark;
34
+ }
35
+
36
+ @media (prefers-color-scheme: dark) {
37
+ .lightmetal.lightmetal-material-classic:not(.lightmetal-light) {
38
+ --lightmetal-bg: #211d26;
39
+ --lightmetal-bg-toolbar: #2d2736;
40
+ --lightmetal-border: #6f647d;
41
+ --lightmetal-color: #f2ecf8;
42
+ --lightmetal-color-dim: #c9bed5;
43
+ --lightmetal-hover: #40354d;
44
+ --lightmetal-accent: #d4b1ff;
45
+ --lightmetal-accent-soft: #483257;
46
+ --lightmetal-error-fg: #ffb4ad;
47
+ --lightmetal-error-bg: #532924;
48
+ color-scheme: dark;
49
+ }
50
+ }
51
+
52
+ .lightmetal.lightmetal-material-classic:focus-within {
53
+ border-color: var(--lightmetal-accent);
54
+ }
55
+
56
+ .lightmetal-material-classic .lightmetal-actionbar {
57
+ gap: 4px;
58
+ padding: 8px;
59
+ border-bottom: none;
60
+ }
61
+
62
+ .lightmetal-material-classic .lightmetal-button {
63
+ width: 36px;
64
+ height: 36px;
65
+ border-radius: 50%;
66
+ }
67
+
68
+ .lightmetal-material-classic .lightmetal-table-button {
69
+ border-radius: 18px;
70
+ }
71
+
72
+ .lightmetal-material-classic .lightmetal-table-dropdown {
73
+ border-radius: 12px;
74
+ }
package/dist/skins/material-classic.min.css ADDED
@@ -0,0 +1 @@
1
+ .lightmetal.lightmetal-material-classic{--lightmetal-bg: #ffffff;--lightmetal-bg-toolbar: #f3f1f8;--lightmetal-border: #b7b0c4;--lightmetal-color: #292332;--lightmetal-color-dim: #60566b;--lightmetal-hover: #e8e2f0;--lightmetal-accent: #653a91;--lightmetal-accent-soft: #eee3fa;--lightmetal-error-fg: #b42318;--lightmetal-error-bg: #fdecea;color-scheme:light;font-family:system-ui,sans-serif;border-width:0 0 2px;border-radius:12px 12px 0 0;box-shadow:0 2px 8px var(--lightmetal-accent-soft)}.lightmetal.lightmetal-material-classic.lightmetal-dark{--lightmetal-bg: #211d26;--lightmetal-bg-toolbar: #2d2736;--lightmetal-border: #6f647d;--lightmetal-color: #f2ecf8;--lightmetal-color-dim: #c9bed5;--lightmetal-hover: #40354d;--lightmetal-accent: #d4b1ff;--lightmetal-accent-soft: #483257;--lightmetal-error-fg: #ffb4ad;--lightmetal-error-bg: #532924;color-scheme:dark}@media(prefers-color-scheme:dark){.lightmetal.lightmetal-material-classic:not(.lightmetal-light){--lightmetal-bg: #211d26;--lightmetal-bg-toolbar: #2d2736;--lightmetal-border: #6f647d;--lightmetal-color: #f2ecf8;--lightmetal-color-dim: #c9bed5;--lightmetal-hover: #40354d;--lightmetal-accent: #d4b1ff;--lightmetal-accent-soft: #483257;--lightmetal-error-fg: #ffb4ad;--lightmetal-error-bg: #532924;color-scheme:dark}}.lightmetal.lightmetal-material-classic:focus-within{border-color:var(--lightmetal-accent)}.lightmetal-material-classic .lightmetal-actionbar{gap:4px;padding:8px;border-bottom:none}.lightmetal-material-classic .lightmetal-button{width:36px;height:36px;border-radius:50%}.lightmetal-material-classic .lightmetal-table-button{border-radius:18px}.lightmetal-material-classic .lightmetal-table-dropdown{border-radius:12px}
package/dist/skins/material-outline.css ADDED
@@ -0,0 +1,73 @@
1
+ /* Outlined Material Design-inspired controls. Original ligHTMetaL CSS.
2
+ * Load after lightmetal.css. Add lightmetal-material-outline to the host.
3
+ */
4
+ .lightmetal.lightmetal-material-outline {
5
+ --lightmetal-bg: #ffffff;
6
+ --lightmetal-bg-toolbar: #ffffff;
7
+ --lightmetal-border: #8a8193;
8
+ --lightmetal-color: #2e2635;
9
+ --lightmetal-color-dim: #63586d;
10
+ --lightmetal-hover: #f2edf7;
11
+ --lightmetal-accent: #70449a;
12
+ --lightmetal-accent-soft: #f1e5ff;
13
+ --lightmetal-error-fg: #b42318;
14
+ --lightmetal-error-bg: #fdecea;
15
+ color-scheme: light;
16
+ font-family: system-ui, sans-serif;
17
+ border-radius: 8px;
18
+ }
19
+
20
+ .lightmetal.lightmetal-material-outline.lightmetal-dark {
21
+ --lightmetal-bg: #201d24;
22
+ --lightmetal-bg-toolbar: #201d24;
23
+ --lightmetal-border: #8e819d;
24
+ --lightmetal-color: #f4ecfb;
25
+ --lightmetal-color-dim: #c9bed3;
26
+ --lightmetal-hover: #352c3d;
27
+ --lightmetal-accent: #dcbbff;
28
+ --lightmetal-accent-soft: #493356;
29
+ --lightmetal-error-fg: #ffb4ad;
30
+ --lightmetal-error-bg: #532924;
31
+ color-scheme: dark;
32
+ }
33
+
34
+ @media (prefers-color-scheme: dark) {
35
+ .lightmetal.lightmetal-material-outline:not(.lightmetal-light) {
36
+ --lightmetal-bg: #201d24;
37
+ --lightmetal-bg-toolbar: #201d24;
38
+ --lightmetal-border: #8e819d;
39
+ --lightmetal-color: #f4ecfb;
40
+ --lightmetal-color-dim: #c9bed3;
41
+ --lightmetal-hover: #352c3d;
42
+ --lightmetal-accent: #dcbbff;
43
+ --lightmetal-accent-soft: #493356;
44
+ --lightmetal-error-fg: #ffb4ad;
45
+ --lightmetal-error-bg: #532924;
46
+ color-scheme: dark;
47
+ }
48
+ }
49
+
50
+ .lightmetal.lightmetal-material-outline:focus-within {
51
+ border-color: var(--lightmetal-accent);
52
+ box-shadow: 0 0 0 1px var(--lightmetal-accent);
53
+ }
54
+
55
+ .lightmetal-material-outline .lightmetal-actionbar {
56
+ gap: 4px;
57
+ padding: 8px;
58
+ }
59
+
60
+ .lightmetal-material-outline .lightmetal-button {
61
+ width: 36px;
62
+ height: 34px;
63
+ border-radius: 8px;
64
+ }
65
+
66
+ .lightmetal-material-outline .lightmetal-button-selected {
67
+ box-shadow: inset 0 0 0 1px var(--lightmetal-accent);
68
+ }
69
+
70
+ .lightmetal-material-outline .lightmetal-table-button,
71
+ .lightmetal-material-outline .lightmetal-table-dropdown {
72
+ border-radius: 8px;
73
+ }
package/dist/skins/material-outline.min.css ADDED
@@ -0,0 +1 @@
1
+ .lightmetal.lightmetal-material-outline{--lightmetal-bg: #ffffff;--lightmetal-bg-toolbar: #ffffff;--lightmetal-border: #8a8193;--lightmetal-color: #2e2635;--lightmetal-color-dim: #63586d;--lightmetal-hover: #f2edf7;--lightmetal-accent: #70449a;--lightmetal-accent-soft: #f1e5ff;--lightmetal-error-fg: #b42318;--lightmetal-error-bg: #fdecea;color-scheme:light;font-family:system-ui,sans-serif;border-radius:8px}.lightmetal.lightmetal-material-outline.lightmetal-dark{--lightmetal-bg: #201d24;--lightmetal-bg-toolbar: #201d24;--lightmetal-border: #8e819d;--lightmetal-color: #f4ecfb;--lightmetal-color-dim: #c9bed3;--lightmetal-hover: #352c3d;--lightmetal-accent: #dcbbff;--lightmetal-accent-soft: #493356;--lightmetal-error-fg: #ffb4ad;--lightmetal-error-bg: #532924;color-scheme:dark}@media(prefers-color-scheme:dark){.lightmetal.lightmetal-material-outline:not(.lightmetal-light){--lightmetal-bg: #201d24;--lightmetal-bg-toolbar: #201d24;--lightmetal-border: #8e819d;--lightmetal-color: #f4ecfb;--lightmetal-color-dim: #c9bed3;--lightmetal-hover: #352c3d;--lightmetal-accent: #dcbbff;--lightmetal-accent-soft: #493356;--lightmetal-error-fg: #ffb4ad;--lightmetal-error-bg: #532924;color-scheme:dark}}.lightmetal.lightmetal-material-outline:focus-within{border-color:var(--lightmetal-accent);box-shadow:0 0 0 1px var(--lightmetal-accent)}.lightmetal-material-outline .lightmetal-actionbar{gap:4px;padding:8px}.lightmetal-material-outline .lightmetal-button{width:36px;height:34px;border-radius:8px}.lightmetal-material-outline .lightmetal-button-selected{box-shadow:inset 0 0 0 1px var(--lightmetal-accent)}.lightmetal-material-outline .lightmetal-table-button,.lightmetal-material-outline .lightmetal-table-dropdown{border-radius:8px}
package/dist/skins/patina.css ADDED
@@ -0,0 +1,67 @@
1
+ /* Crisp, blue-accented toolbar chrome. Original ligHTMetaL CSS.
2
+ * Load after lightmetal.css. Add lightmetal-patina to the editor host.
3
+ */
4
+ .lightmetal.lightmetal-patina {
5
+ --lightmetal-bg: #ffffff;
6
+ --lightmetal-bg-toolbar: #f6f7f9;
7
+ --lightmetal-border: #c7cdd4;
8
+ --lightmetal-color: #243447;
9
+ --lightmetal-color-dim: #536172;
10
+ --lightmetal-hover: #e4ebf2;
11
+ --lightmetal-accent: #1465b8;
12
+ --lightmetal-accent-soft: #e2effc;
13
+ --lightmetal-error-fg: #b42318;
14
+ --lightmetal-error-bg: #fdecea;
15
+ color-scheme: light;
16
+ font-family: system-ui, sans-serif;
17
+ border-radius: 5px;
18
+ }
19
+
20
+ .lightmetal.lightmetal-patina.lightmetal-dark {
21
+ --lightmetal-bg: #202d3a;
22
+ --lightmetal-bg-toolbar: #273746;
23
+ --lightmetal-border: #5d6c7b;
24
+ --lightmetal-color: #f0f4f8;
25
+ --lightmetal-color-dim: #c0cad4;
26
+ --lightmetal-hover: #374a5d;
27
+ --lightmetal-accent: #a3cfff;
28
+ --lightmetal-accent-soft: #334f6c;
29
+ --lightmetal-error-fg: #ffb4ad;
30
+ --lightmetal-error-bg: #532924;
31
+ color-scheme: dark;
32
+ }
33
+
34
+ @media (prefers-color-scheme: dark) {
35
+ .lightmetal.lightmetal-patina:not(.lightmetal-light) {
36
+ --lightmetal-bg: #202d3a;
37
+ --lightmetal-bg-toolbar: #273746;
38
+ --lightmetal-border: #5d6c7b;
39
+ --lightmetal-color: #f0f4f8;
40
+ --lightmetal-color-dim: #c0cad4;
41
+ --lightmetal-hover: #374a5d;
42
+ --lightmetal-accent: #a3cfff;
43
+ --lightmetal-accent-soft: #334f6c;
44
+ --lightmetal-error-fg: #ffb4ad;
45
+ --lightmetal-error-bg: #532924;
46
+ color-scheme: dark;
47
+ }
48
+ }
49
+
50
+ .lightmetal-patina .lightmetal-actionbar {
51
+ gap: 2px;
52
+ padding: 4px;
53
+ }
54
+
55
+ .lightmetal-patina .lightmetal-button {
56
+ border-radius: 3px;
57
+ }
58
+
59
+ .lightmetal-patina .lightmetal-table-button,
60
+ .lightmetal-patina .lightmetal-table-dropdown {
61
+ border-radius: 4px;
62
+ }
63
+
64
+ .lightmetal-patina .lightmetal-content,
65
+ .lightmetal-patina .lightmetal-sources {
66
+ padding: 16px;
67
+ }
package/dist/skins/patina.min.css ADDED
@@ -0,0 +1 @@
1
+ .lightmetal.lightmetal-patina{--lightmetal-bg: #ffffff;--lightmetal-bg-toolbar: #f6f7f9;--lightmetal-border: #c7cdd4;--lightmetal-color: #243447;--lightmetal-color-dim: #536172;--lightmetal-hover: #e4ebf2;--lightmetal-accent: #1465b8;--lightmetal-accent-soft: #e2effc;--lightmetal-error-fg: #b42318;--lightmetal-error-bg: #fdecea;color-scheme:light;font-family:system-ui,sans-serif;border-radius:5px}.lightmetal.lightmetal-patina.lightmetal-dark{--lightmetal-bg: #202d3a;--lightmetal-bg-toolbar: #273746;--lightmetal-border: #5d6c7b;--lightmetal-color: #f0f4f8;--lightmetal-color-dim: #c0cad4;--lightmetal-hover: #374a5d;--lightmetal-accent: #a3cfff;--lightmetal-accent-soft: #334f6c;--lightmetal-error-fg: #ffb4ad;--lightmetal-error-bg: #532924;color-scheme:dark}@media(prefers-color-scheme:dark){.lightmetal.lightmetal-patina:not(.lightmetal-light){--lightmetal-bg: #202d3a;--lightmetal-bg-toolbar: #273746;--lightmetal-border: #5d6c7b;--lightmetal-color: #f0f4f8;--lightmetal-color-dim: #c0cad4;--lightmetal-hover: #374a5d;--lightmetal-accent: #a3cfff;--lightmetal-accent-soft: #334f6c;--lightmetal-error-fg: #ffb4ad;--lightmetal-error-bg: #532924;color-scheme:dark}}.lightmetal-patina .lightmetal-actionbar{gap:2px;padding:4px}.lightmetal-patina .lightmetal-button{border-radius:3px}.lightmetal-patina .lightmetal-table-button,.lightmetal-patina .lightmetal-table-dropdown{border-radius:4px}.lightmetal-patina .lightmetal-content,.lightmetal-patina .lightmetal-sources{padding:16px}
package/dist/skins/sterling.css ADDED
@@ -0,0 +1,74 @@
1
+ /* Compact, neutral toolbar chrome. Original ligHTMetaL CSS.
2
+ * Load after lightmetal.css. Add lightmetal-sterling to the editor host.
3
+ */
4
+ .lightmetal.lightmetal-sterling {
5
+ --lightmetal-bg: #ffffff;
6
+ --lightmetal-bg-toolbar: #eaecef;
7
+ --lightmetal-border: #abb2bc;
8
+ --lightmetal-color: #303844;
9
+ --lightmetal-color-dim: #4b5562;
10
+ --lightmetal-hover: #dce0e6;
11
+ --lightmetal-accent: #315c9b;
12
+ --lightmetal-accent-soft: #dce8f8;
13
+ --lightmetal-error-fg: #b42318;
14
+ --lightmetal-error-bg: #fdecea;
15
+ color-scheme: light;
16
+ font-family: system-ui, sans-serif;
17
+ border-radius: 3px;
18
+ }
19
+
20
+ .lightmetal.lightmetal-sterling.lightmetal-dark {
21
+ --lightmetal-bg: #202329;
22
+ --lightmetal-bg-toolbar: #30353e;
23
+ --lightmetal-border: #697380;
24
+ --lightmetal-color: #f2f3f5;
25
+ --lightmetal-color-dim: #c3cad4;
26
+ --lightmetal-hover: #444c58;
27
+ --lightmetal-accent: #adcaff;
28
+ --lightmetal-accent-soft: #3b4f6e;
29
+ --lightmetal-error-fg: #ffb4ad;
30
+ --lightmetal-error-bg: #532924;
31
+ color-scheme: dark;
32
+ }
33
+
34
+ @media (prefers-color-scheme: dark) {
35
+ .lightmetal.lightmetal-sterling:not(.lightmetal-light) {
36
+ --lightmetal-bg: #202329;
37
+ --lightmetal-bg-toolbar: #30353e;
38
+ --lightmetal-border: #697380;
39
+ --lightmetal-color: #f2f3f5;
40
+ --lightmetal-color-dim: #c3cad4;
41
+ --lightmetal-hover: #444c58;
42
+ --lightmetal-accent: #adcaff;
43
+ --lightmetal-accent-soft: #3b4f6e;
44
+ --lightmetal-error-fg: #ffb4ad;
45
+ --lightmetal-error-bg: #532924;
46
+ color-scheme: dark;
47
+ }
48
+ }
49
+
50
+ .lightmetal-sterling .lightmetal-actionbar {
51
+ gap: 2px;
52
+ padding: 4px;
53
+ background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), transparent);
54
+ }
55
+
56
+ .lightmetal-sterling .lightmetal-button {
57
+ width: 32px;
58
+ height: 28px;
59
+ border-radius: 2px;
60
+ }
61
+
62
+ .lightmetal-sterling .lightmetal-button-selected {
63
+ box-shadow: inset 0 0 0 1px var(--lightmetal-accent);
64
+ }
65
+
66
+ .lightmetal-sterling .lightmetal-table-button,
67
+ .lightmetal-sterling .lightmetal-table-dropdown {
68
+ border-radius: 2px;
69
+ }
70
+
71
+ .lightmetal-sterling .lightmetal-content,
72
+ .lightmetal-sterling .lightmetal-sources {
73
+ padding: 14px;
74
+ }
package/dist/skins/sterling.min.css ADDED
@@ -0,0 +1 @@
1
+ .lightmetal.lightmetal-sterling{--lightmetal-bg: #ffffff;--lightmetal-bg-toolbar: #eaecef;--lightmetal-border: #abb2bc;--lightmetal-color: #303844;--lightmetal-color-dim: #4b5562;--lightmetal-hover: #dce0e6;--lightmetal-accent: #315c9b;--lightmetal-accent-soft: #dce8f8;--lightmetal-error-fg: #b42318;--lightmetal-error-bg: #fdecea;color-scheme:light;font-family:system-ui,sans-serif;border-radius:3px}.lightmetal.lightmetal-sterling.lightmetal-dark{--lightmetal-bg: #202329;--lightmetal-bg-toolbar: #30353e;--lightmetal-border: #697380;--lightmetal-color: #f2f3f5;--lightmetal-color-dim: #c3cad4;--lightmetal-hover: #444c58;--lightmetal-accent: #adcaff;--lightmetal-accent-soft: #3b4f6e;--lightmetal-error-fg: #ffb4ad;--lightmetal-error-bg: #532924;color-scheme:dark}@media(prefers-color-scheme:dark){.lightmetal.lightmetal-sterling:not(.lightmetal-light){--lightmetal-bg: #202329;--lightmetal-bg-toolbar: #30353e;--lightmetal-border: #697380;--lightmetal-color: #f2f3f5;--lightmetal-color-dim: #c3cad4;--lightmetal-hover: #444c58;--lightmetal-accent: #adcaff;--lightmetal-accent-soft: #3b4f6e;--lightmetal-error-fg: #ffb4ad;--lightmetal-error-bg: #532924;color-scheme:dark}}.lightmetal-sterling .lightmetal-actionbar{gap:2px;padding:4px;background-image:linear-gradient(to bottom,rgba(255,255,255,.12),transparent)}.lightmetal-sterling .lightmetal-button{width:32px;height:28px;border-radius:2px}.lightmetal-sterling .lightmetal-button-selected{box-shadow:inset 0 0 0 1px var(--lightmetal-accent)}.lightmetal-sterling .lightmetal-table-button,.lightmetal-sterling .lightmetal-table-dropdown{border-radius:2px}.lightmetal-sterling .lightmetal-content,.lightmetal-sterling .lightmetal-sources{padding:14px}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lightmetal",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "ligHTMetaL: a minimal, local-first HTML editor with zero runtime dependencies.",
5
5
  "main": "dist/lightmetal.js",
6
6
  "module": "dist/lightmetal.esm.js",
package/src/skins/bootstrap.css ADDED
@@ -0,0 +1,68 @@
1
+ /* Bootstrap-inspired form styling. Original ligHTMetaL CSS, not a Bootstrap dependency.
2
+ * Load after lightmetal.css. Add lightmetal-bootstrap to the editor host.
3
+ */
4
+ .lightmetal.lightmetal-bootstrap {
5
+ --lightmetal-bg: #ffffff;
6
+ --lightmetal-bg-toolbar: #f8f9fa;
7
+ --lightmetal-border: #ced4da;
8
+ --lightmetal-color: #212529;
9
+ --lightmetal-color-dim: #495057;
10
+ --lightmetal-hover: #e9ecef;
11
+ --lightmetal-accent: #0759c7;
12
+ --lightmetal-accent-soft: #e7f0ff;
13
+ --lightmetal-error-fg: #b42318;
14
+ --lightmetal-error-bg: #fdecea;
15
+ color-scheme: light;
16
+ font-family: system-ui, sans-serif;
17
+ border-radius: 6px;
18
+ }
19
+
20
+ .lightmetal.lightmetal-bootstrap.lightmetal-dark {
21
+ --lightmetal-bg: #212529;
22
+ --lightmetal-bg-toolbar: #2b3035;
23
+ --lightmetal-border: #59636d;
24
+ --lightmetal-color: #f1f3f5;
25
+ --lightmetal-color-dim: #c2c9d0;
26
+ --lightmetal-hover: #3c454e;
27
+ --lightmetal-accent: #a6c8ff;
28
+ --lightmetal-accent-soft: #354860;
29
+ --lightmetal-error-fg: #ffb4ad;
30
+ --lightmetal-error-bg: #532924;
31
+ color-scheme: dark;
32
+ }
33
+
34
+ @media (prefers-color-scheme: dark) {
35
+ .lightmetal.lightmetal-bootstrap:not(.lightmetal-light) {
36
+ --lightmetal-bg: #212529;
37
+ --lightmetal-bg-toolbar: #2b3035;
38
+ --lightmetal-border: #59636d;
39
+ --lightmetal-color: #f1f3f5;
40
+ --lightmetal-color-dim: #c2c9d0;
41
+ --lightmetal-hover: #3c454e;
42
+ --lightmetal-accent: #a6c8ff;
43
+ --lightmetal-accent-soft: #354860;
44
+ --lightmetal-error-fg: #ffb4ad;
45
+ --lightmetal-error-bg: #532924;
46
+ color-scheme: dark;
47
+ }
48
+ }
49
+
50
+ .lightmetal.lightmetal-bootstrap:focus-within {
51
+ border-color: var(--lightmetal-accent);
52
+ box-shadow: 0 0 0 3px var(--lightmetal-accent-soft);
53
+ }
54
+
55
+ .lightmetal-bootstrap .lightmetal-actionbar {
56
+ gap: 3px;
57
+ }
58
+
59
+ .lightmetal-bootstrap .lightmetal-button {
60
+ width: 36px;
61
+ height: 32px;
62
+ border-radius: 4px;
63
+ }
64
+
65
+ .lightmetal-bootstrap .lightmetal-table-button,
66
+ .lightmetal-bootstrap .lightmetal-table-dropdown {
67
+ border-radius: 4px;
68
+ }
package/src/skins/frost.css ADDED
@@ -0,0 +1,76 @@
1
+ /* A spacious, lightweight surface. Original ligHTMetaL CSS.
2
+ * Load after lightmetal.css. Add lightmetal-frost to the editor host.
3
+ */
4
+ .lightmetal.lightmetal-frost {
5
+ --lightmetal-bg: #ffffff;
6
+ --lightmetal-bg-toolbar: #ffffff;
7
+ --lightmetal-border: #d7e2e8;
8
+ --lightmetal-color: #263e4a;
9
+ --lightmetal-color-dim: #526a77;
10
+ --lightmetal-hover: #eff7fa;
11
+ --lightmetal-accent: #086785;
12
+ --lightmetal-accent-soft: #e1f3fa;
13
+ --lightmetal-error-fg: #b42318;
14
+ --lightmetal-error-bg: #fdecea;
15
+ color-scheme: light;
16
+ font-family: system-ui, sans-serif;
17
+ border-radius: 14px;
18
+ }
19
+
20
+ .lightmetal.lightmetal-frost.lightmetal-dark {
21
+ --lightmetal-bg: #14242d;
22
+ --lightmetal-bg-toolbar: #172b35;
23
+ --lightmetal-border: #47606d;
24
+ --lightmetal-color: #e9f3f8;
25
+ --lightmetal-color-dim: #b0c6d2;
26
+ --lightmetal-hover: #243f4d;
27
+ --lightmetal-accent: #89d8ef;
28
+ --lightmetal-accent-soft: #264d5a;
29
+ --lightmetal-error-fg: #ffb4ad;
30
+ --lightmetal-error-bg: #532924;
31
+ color-scheme: dark;
32
+ }
33
+
34
+ @media (prefers-color-scheme: dark) {
35
+ .lightmetal.lightmetal-frost:not(.lightmetal-light) {
36
+ --lightmetal-bg: #14242d;
37
+ --lightmetal-bg-toolbar: #172b35;
38
+ --lightmetal-border: #47606d;
39
+ --lightmetal-color: #e9f3f8;
40
+ --lightmetal-color-dim: #b0c6d2;
41
+ --lightmetal-hover: #243f4d;
42
+ --lightmetal-accent: #89d8ef;
43
+ --lightmetal-accent-soft: #264d5a;
44
+ --lightmetal-error-fg: #ffb4ad;
45
+ --lightmetal-error-bg: #532924;
46
+ color-scheme: dark;
47
+ }
48
+ }
49
+
50
+ .lightmetal-frost .lightmetal-actionbar {
51
+ gap: 4px;
52
+ padding: 10px;
53
+ }
54
+
55
+ .lightmetal-frost .lightmetal-button {
56
+ height: 32px;
57
+ border-radius: 8px;
58
+ }
59
+
60
+ .lightmetal-frost .lightmetal-button svg {
61
+ stroke-width: 1.6;
62
+ }
63
+
64
+ .lightmetal-frost .lightmetal-content,
65
+ .lightmetal-frost .lightmetal-sources {
66
+ padding: 24px;
67
+ line-height: 1.7;
68
+ }
69
+
70
+ .lightmetal-frost .lightmetal-table-button {
71
+ border-radius: 8px;
72
+ }
73
+
74
+ .lightmetal-frost .lightmetal-table-dropdown {
75
+ border-radius: 12px;
76
+ }
package/src/skins/material-classic.css ADDED
@@ -0,0 +1,74 @@
1
+ /* Filled Material Design-inspired surfaces. Original ligHTMetaL CSS.
2
+ * Load after lightmetal.css. Add lightmetal-material-classic to the host.
3
+ */
4
+ .lightmetal.lightmetal-material-classic {
5
+ --lightmetal-bg: #ffffff;
6
+ --lightmetal-bg-toolbar: #f3f1f8;
7
+ --lightmetal-border: #b7b0c4;
8
+ --lightmetal-color: #292332;
9
+ --lightmetal-color-dim: #60566b;
10
+ --lightmetal-hover: #e8e2f0;
11
+ --lightmetal-accent: #653a91;
12
+ --lightmetal-accent-soft: #eee3fa;
13
+ --lightmetal-error-fg: #b42318;
14
+ --lightmetal-error-bg: #fdecea;
15
+ color-scheme: light;
16
+ font-family: system-ui, sans-serif;
17
+ border-width: 0 0 2px;
18
+ border-radius: 12px 12px 0 0;
19
+ box-shadow: 0 2px 8px var(--lightmetal-accent-soft);
20
+ }
21
+
22
+ .lightmetal.lightmetal-material-classic.lightmetal-dark {
23
+ --lightmetal-bg: #211d26;
24
+ --lightmetal-bg-toolbar: #2d2736;
25
+ --lightmetal-border: #6f647d;
26
+ --lightmetal-color: #f2ecf8;
27
+ --lightmetal-color-dim: #c9bed5;
28
+ --lightmetal-hover: #40354d;
29
+ --lightmetal-accent: #d4b1ff;
30
+ --lightmetal-accent-soft: #483257;
31
+ --lightmetal-error-fg: #ffb4ad;
32
+ --lightmetal-error-bg: #532924;
33
+ color-scheme: dark;
34
+ }
35
+
36
+ @media (prefers-color-scheme: dark) {
37
+ .lightmetal.lightmetal-material-classic:not(.lightmetal-light) {
38
+ --lightmetal-bg: #211d26;
39
+ --lightmetal-bg-toolbar: #2d2736;
40
+ --lightmetal-border: #6f647d;
41
+ --lightmetal-color: #f2ecf8;
42
+ --lightmetal-color-dim: #c9bed5;
43
+ --lightmetal-hover: #40354d;
44
+ --lightmetal-accent: #d4b1ff;
45
+ --lightmetal-accent-soft: #483257;
46
+ --lightmetal-error-fg: #ffb4ad;
47
+ --lightmetal-error-bg: #532924;
48
+ color-scheme: dark;
49
+ }
50
+ }
51
+
52
+ .lightmetal.lightmetal-material-classic:focus-within {
53
+ border-color: var(--lightmetal-accent);
54
+ }
55
+
56
+ .lightmetal-material-classic .lightmetal-actionbar {
57
+ gap: 4px;
58
+ padding: 8px;
59
+ border-bottom: none;
60
+ }
61
+
62
+ .lightmetal-material-classic .lightmetal-button {
63
+ width: 36px;
64
+ height: 36px;
65
+ border-radius: 50%;
66
+ }
67
+
68
+ .lightmetal-material-classic .lightmetal-table-button {
69
+ border-radius: 18px;
70
+ }
71
+
72
+ .lightmetal-material-classic .lightmetal-table-dropdown {
73
+ border-radius: 12px;
74
+ }
package/src/skins/material-outline.css ADDED
@@ -0,0 +1,73 @@
1
+ /* Outlined Material Design-inspired controls. Original ligHTMetaL CSS.
2
+ * Load after lightmetal.css. Add lightmetal-material-outline to the host.
3
+ */
4
+ .lightmetal.lightmetal-material-outline {
5
+ --lightmetal-bg: #ffffff;
6
+ --lightmetal-bg-toolbar: #ffffff;
7
+ --lightmetal-border: #8a8193;
8
+ --lightmetal-color: #2e2635;
9
+ --lightmetal-color-dim: #63586d;
10
+ --lightmetal-hover: #f2edf7;
11
+ --lightmetal-accent: #70449a;
12
+ --lightmetal-accent-soft: #f1e5ff;
13
+ --lightmetal-error-fg: #b42318;
14
+ --lightmetal-error-bg: #fdecea;
15
+ color-scheme: light;
16
+ font-family: system-ui, sans-serif;
17
+ border-radius: 8px;
18
+ }
19
+
20
+ .lightmetal.lightmetal-material-outline.lightmetal-dark {
21
+ --lightmetal-bg: #201d24;
22
+ --lightmetal-bg-toolbar: #201d24;
23
+ --lightmetal-border: #8e819d;
24
+ --lightmetal-color: #f4ecfb;
25
+ --lightmetal-color-dim: #c9bed3;
26
+ --lightmetal-hover: #352c3d;
27
+ --lightmetal-accent: #dcbbff;
28
+ --lightmetal-accent-soft: #493356;
29
+ --lightmetal-error-fg: #ffb4ad;
30
+ --lightmetal-error-bg: #532924;
31
+ color-scheme: dark;
32
+ }
33
+
34
+ @media (prefers-color-scheme: dark) {
35
+ .lightmetal.lightmetal-material-outline:not(.lightmetal-light) {
36
+ --lightmetal-bg: #201d24;
37
+ --lightmetal-bg-toolbar: #201d24;
38
+ --lightmetal-border: #8e819d;
39
+ --lightmetal-color: #f4ecfb;
40
+ --lightmetal-color-dim: #c9bed3;
41
+ --lightmetal-hover: #352c3d;
42
+ --lightmetal-accent: #dcbbff;
43
+ --lightmetal-accent-soft: #493356;
44
+ --lightmetal-error-fg: #ffb4ad;
45
+ --lightmetal-error-bg: #532924;
46
+ color-scheme: dark;
47
+ }
48
+ }
49
+
50
+ .lightmetal.lightmetal-material-outline:focus-within {
51
+ border-color: var(--lightmetal-accent);
52
+ box-shadow: 0 0 0 1px var(--lightmetal-accent);
53
+ }
54
+
55
+ .lightmetal-material-outline .lightmetal-actionbar {
56
+ gap: 4px;
57
+ padding: 8px;
58
+ }
59
+
60
+ .lightmetal-material-outline .lightmetal-button {
61
+ width: 36px;
62
+ height: 34px;
63
+ border-radius: 8px;
64
+ }
65
+
66
+ .lightmetal-material-outline .lightmetal-button-selected {
67
+ box-shadow: inset 0 0 0 1px var(--lightmetal-accent);
68
+ }
69
+
70
+ .lightmetal-material-outline .lightmetal-table-button,
71
+ .lightmetal-material-outline .lightmetal-table-dropdown {
72
+ border-radius: 8px;
73
+ }
package/src/skins/patina.css ADDED
@@ -0,0 +1,67 @@
1
+ /* Crisp, blue-accented toolbar chrome. Original ligHTMetaL CSS.
2
+ * Load after lightmetal.css. Add lightmetal-patina to the editor host.
3
+ */
4
+ .lightmetal.lightmetal-patina {
5
+ --lightmetal-bg: #ffffff;
6
+ --lightmetal-bg-toolbar: #f6f7f9;
7
+ --lightmetal-border: #c7cdd4;
8
+ --lightmetal-color: #243447;
9
+ --lightmetal-color-dim: #536172;
10
+ --lightmetal-hover: #e4ebf2;
11
+ --lightmetal-accent: #1465b8;
12
+ --lightmetal-accent-soft: #e2effc;
13
+ --lightmetal-error-fg: #b42318;
14
+ --lightmetal-error-bg: #fdecea;
15
+ color-scheme: light;
16
+ font-family: system-ui, sans-serif;
17
+ border-radius: 5px;
18
+ }
19
+
20
+ .lightmetal.lightmetal-patina.lightmetal-dark {
21
+ --lightmetal-bg: #202d3a;
22
+ --lightmetal-bg-toolbar: #273746;
23
+ --lightmetal-border: #5d6c7b;
24
+ --lightmetal-color: #f0f4f8;
25
+ --lightmetal-color-dim: #c0cad4;
26
+ --lightmetal-hover: #374a5d;
27
+ --lightmetal-accent: #a3cfff;
28
+ --lightmetal-accent-soft: #334f6c;
29
+ --lightmetal-error-fg: #ffb4ad;
30
+ --lightmetal-error-bg: #532924;
31
+ color-scheme: dark;
32
+ }
33
+
34
+ @media (prefers-color-scheme: dark) {
35
+ .lightmetal.lightmetal-patina:not(.lightmetal-light) {
36
+ --lightmetal-bg: #202d3a;
37
+ --lightmetal-bg-toolbar: #273746;
38
+ --lightmetal-border: #5d6c7b;
39
+ --lightmetal-color: #f0f4f8;
40
+ --lightmetal-color-dim: #c0cad4;
41
+ --lightmetal-hover: #374a5d;
42
+ --lightmetal-accent: #a3cfff;
43
+ --lightmetal-accent-soft: #334f6c;
44
+ --lightmetal-error-fg: #ffb4ad;
45
+ --lightmetal-error-bg: #532924;
46
+ color-scheme: dark;
47
+ }
48
+ }
49
+
50
+ .lightmetal-patina .lightmetal-actionbar {
51
+ gap: 2px;
52
+ padding: 4px;
53
+ }
54
+
55
+ .lightmetal-patina .lightmetal-button {
56
+ border-radius: 3px;
57
+ }
58
+
59
+ .lightmetal-patina .lightmetal-table-button,
60
+ .lightmetal-patina .lightmetal-table-dropdown {
61
+ border-radius: 4px;
62
+ }
63
+
64
+ .lightmetal-patina .lightmetal-content,
65
+ .lightmetal-patina .lightmetal-sources {
66
+ padding: 16px;
67
+ }
package/src/skins/sterling.css ADDED
@@ -0,0 +1,74 @@
1
+ /* Compact, neutral toolbar chrome. Original ligHTMetaL CSS.
2
+ * Load after lightmetal.css. Add lightmetal-sterling to the editor host.
3
+ */
4
+ .lightmetal.lightmetal-sterling {
5
+ --lightmetal-bg: #ffffff;
6
+ --lightmetal-bg-toolbar: #eaecef;
7
+ --lightmetal-border: #abb2bc;
8
+ --lightmetal-color: #303844;
9
+ --lightmetal-color-dim: #4b5562;
10
+ --lightmetal-hover: #dce0e6;
11
+ --lightmetal-accent: #315c9b;
12
+ --lightmetal-accent-soft: #dce8f8;
13
+ --lightmetal-error-fg: #b42318;
14
+ --lightmetal-error-bg: #fdecea;
15
+ color-scheme: light;
16
+ font-family: system-ui, sans-serif;
17
+ border-radius: 3px;
18
+ }
19
+
20
+ .lightmetal.lightmetal-sterling.lightmetal-dark {
21
+ --lightmetal-bg: #202329;
22
+ --lightmetal-bg-toolbar: #30353e;
23
+ --lightmetal-border: #697380;
24
+ --lightmetal-color: #f2f3f5;
25
+ --lightmetal-color-dim: #c3cad4;
26
+ --lightmetal-hover: #444c58;
27
+ --lightmetal-accent: #adcaff;
28
+ --lightmetal-accent-soft: #3b4f6e;
29
+ --lightmetal-error-fg: #ffb4ad;
30
+ --lightmetal-error-bg: #532924;
31
+ color-scheme: dark;
32
+ }
33
+
34
+ @media (prefers-color-scheme: dark) {
35
+ .lightmetal.lightmetal-sterling:not(.lightmetal-light) {
36
+ --lightmetal-bg: #202329;
37
+ --lightmetal-bg-toolbar: #30353e;
38
+ --lightmetal-border: #697380;
39
+ --lightmetal-color: #f2f3f5;
40
+ --lightmetal-color-dim: #c3cad4;
41
+ --lightmetal-hover: #444c58;
42
+ --lightmetal-accent: #adcaff;
43
+ --lightmetal-accent-soft: #3b4f6e;
44
+ --lightmetal-error-fg: #ffb4ad;
45
+ --lightmetal-error-bg: #532924;
46
+ color-scheme: dark;
47
+ }
48
+ }
49
+
50
+ .lightmetal-sterling .lightmetal-actionbar {
51
+ gap: 2px;
52
+ padding: 4px;
53
+ background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), transparent);
54
+ }
55
+
56
+ .lightmetal-sterling .lightmetal-button {
57
+ width: 32px;
58
+ height: 28px;
59
+ border-radius: 2px;
60
+ }
61
+
62
+ .lightmetal-sterling .lightmetal-button-selected {
63
+ box-shadow: inset 0 0 0 1px var(--lightmetal-accent);
64
+ }
65
+
66
+ .lightmetal-sterling .lightmetal-table-button,
67
+ .lightmetal-sterling .lightmetal-table-dropdown {
68
+ border-radius: 2px;
69
+ }
70
+
71
+ .lightmetal-sterling .lightmetal-content,
72
+ .lightmetal-sterling .lightmetal-sources {
73
+ padding: 14px;
74
+ }