@zuilib/text-editor 0.7.2 → 0.9.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.
- package/CHANGELOG.md +23 -0
- package/dist/index.d.ts +425 -98
- package/dist/index.js +2052 -255
- package/dist/styles.css +89 -0
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -812,3 +812,92 @@
|
|
|
812
812
|
line-height: 1.6;
|
|
813
813
|
border: none;
|
|
814
814
|
}
|
|
815
|
+
|
|
816
|
+
/*
|
|
817
|
+
* Code block syntax highlighting. Each semantic token type (see
|
|
818
|
+
* src/code/types.ts) gets one class and one color custom property, so a host
|
|
819
|
+
* theme restyles the palette by overriding `--zui-code-<type>` on `.zui-code`
|
|
820
|
+
* (or any ancestor) — light and dark defaults follow the `.dark` convention.
|
|
821
|
+
* Operators and punctuation inherit the text color on purpose: fewer colors,
|
|
822
|
+
* calmer blocks.
|
|
823
|
+
*/
|
|
824
|
+
.zui-code {
|
|
825
|
+
--zui-code-comment: #6e7781;
|
|
826
|
+
--zui-code-string: #0a3069;
|
|
827
|
+
--zui-code-number: #0550ae;
|
|
828
|
+
--zui-code-keyword: #cf222e;
|
|
829
|
+
--zui-code-builtin: #6639ba;
|
|
830
|
+
--zui-code-type: #953800;
|
|
831
|
+
--zui-code-function: #8250df;
|
|
832
|
+
--zui-code-property: #0550ae;
|
|
833
|
+
--zui-code-variable: #953800;
|
|
834
|
+
--zui-code-constant: #0550ae;
|
|
835
|
+
--zui-code-operator: currentColor;
|
|
836
|
+
--zui-code-punctuation: currentColor;
|
|
837
|
+
--zui-code-tag: #116329;
|
|
838
|
+
--zui-code-attr: #0550ae;
|
|
839
|
+
--zui-code-regex: #0a3069;
|
|
840
|
+
--zui-code-meta: #6639ba;
|
|
841
|
+
--zui-code-inserted: #116329;
|
|
842
|
+
--zui-code-inserted-background: #dafbe1;
|
|
843
|
+
--zui-code-deleted: #82071e;
|
|
844
|
+
--zui-code-deleted-background: #ffebe9;
|
|
845
|
+
tab-size: 2;
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
.dark .zui-code {
|
|
849
|
+
--zui-code-comment: #8b949e;
|
|
850
|
+
--zui-code-string: #a5d6ff;
|
|
851
|
+
--zui-code-number: #79c0ff;
|
|
852
|
+
--zui-code-keyword: #ff7b72;
|
|
853
|
+
--zui-code-builtin: #d2a8ff;
|
|
854
|
+
--zui-code-type: #ffa657;
|
|
855
|
+
--zui-code-function: #d2a8ff;
|
|
856
|
+
--zui-code-property: #79c0ff;
|
|
857
|
+
--zui-code-variable: #ffa657;
|
|
858
|
+
--zui-code-constant: #79c0ff;
|
|
859
|
+
--zui-code-tag: #7ee787;
|
|
860
|
+
--zui-code-attr: #79c0ff;
|
|
861
|
+
--zui-code-regex: #a5d6ff;
|
|
862
|
+
--zui-code-meta: #d2a8ff;
|
|
863
|
+
--zui-code-inserted: #7ee787;
|
|
864
|
+
--zui-code-inserted-background: rgba(63, 185, 80, 0.15);
|
|
865
|
+
--zui-code-deleted: #ffa198;
|
|
866
|
+
--zui-code-deleted-background: rgba(248, 81, 73, 0.15);
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
.zui-token-comment { color: var(--zui-code-comment); font-style: italic; }
|
|
870
|
+
.zui-token-string { color: var(--zui-code-string); }
|
|
871
|
+
.zui-token-number { color: var(--zui-code-number); }
|
|
872
|
+
.zui-token-keyword { color: var(--zui-code-keyword); }
|
|
873
|
+
.zui-token-builtin { color: var(--zui-code-builtin); }
|
|
874
|
+
.zui-token-type { color: var(--zui-code-type); }
|
|
875
|
+
.zui-token-function { color: var(--zui-code-function); }
|
|
876
|
+
.zui-token-property { color: var(--zui-code-property); }
|
|
877
|
+
.zui-token-variable { color: var(--zui-code-variable); }
|
|
878
|
+
.zui-token-constant { color: var(--zui-code-constant); }
|
|
879
|
+
.zui-token-operator { color: var(--zui-code-operator); }
|
|
880
|
+
.zui-token-punctuation { color: var(--zui-code-punctuation); }
|
|
881
|
+
.zui-token-tag { color: var(--zui-code-tag); }
|
|
882
|
+
.zui-token-attr { color: var(--zui-code-attr); }
|
|
883
|
+
.zui-token-regex { color: var(--zui-code-regex); }
|
|
884
|
+
.zui-token-meta { color: var(--zui-code-meta); }
|
|
885
|
+
.zui-token-inserted { color: var(--zui-code-inserted); background: var(--zui-code-inserted-background); }
|
|
886
|
+
.zui-token-deleted { color: var(--zui-code-deleted); background: var(--zui-code-deleted-background); }
|
|
887
|
+
|
|
888
|
+
/*
|
|
889
|
+
* Ink drawing style (`drawingStyle="ink"`). Geometry is handled by the
|
|
890
|
+
* renderer (drawing/ink.ts); the stylesheet only switches the face: Recursive
|
|
891
|
+
* on its casual/cursive axes when the host loads it, the regular font
|
|
892
|
+
* otherwise. Load it with e.g.
|
|
893
|
+
* https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1
|
|
894
|
+
*/
|
|
895
|
+
.zui-drawing-canvas.is-ink {
|
|
896
|
+
--zui-drawing-font: 'Recursive', ui-sans-serif, system-ui, sans-serif;
|
|
897
|
+
--zui-drawing-grid: rgba(0, 0, 0, 0.06);
|
|
898
|
+
}
|
|
899
|
+
|
|
900
|
+
.zui-drawing-canvas.is-ink :is(.zui-drawing-surface text, .zui-drawing-text-input) {
|
|
901
|
+
font-variation-settings: 'CASL' 1, 'CRSV' 1, 'MONO' 0, 'wght' 440, 'slnt' -3;
|
|
902
|
+
letter-spacing: 0.01em;
|
|
903
|
+
}
|