vanilla-jui 1.5.33 → 1.5.34

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 (6) hide show
  1. package/dist/style.css +1 -1
  2. package/package.json +2 -2
  3. package/src/css/editor.css +6 -6
  4. package/src/css/form.css +157 -285
  5. package/src/css/themes/default/editor.css +4 -4
  6. package/src/css/tokens.css +37 -37
package/src/css/themes/default/editor.css CHANGED
@@ -10,13 +10,13 @@
10
10
 
11
11
  .j-editor {
12
12
  --editor-font-size: var(--font-size-lg);
13
- --editor-line-height: 1.75;
14
- --editor-letter-space: 0.01em;
13
+ --editor-line-height: 1.85;
15
14
  --editor-word-space: 0.02em;
15
+ --editor-letter-space: 0.01em;
16
16
  --editor-heading-space: 2rem;
17
17
  --editor-block-space: 1.5rem;
18
- --editor-paragraph-space: 1.25rem;
19
- --editor-list-space: 0.25rem;
18
+ --editor-list-space: 1.25rem;
19
+ --editor-space: 0.25rem;
20
20
  --editor-dot-space: 0.125rem;
21
21
 
22
22
  --editor-heading-fg: var(--tone-heading);
package/src/css/tokens.css CHANGED
@@ -380,8 +380,8 @@
380
380
  --tone-muted: rgba(129, 140, 248, 0.2);
381
381
  --tone-weak: #151b23;
382
382
  --tone-wash: rgba(129, 140, 248, 0.05);
383
- --tone-border: rgba(129, 140, 248, 0.25);
384
- --tone-border-strong: rgba(129, 140, 248, 0.4);
383
+ --tone-border: rgba(129, 140, 248, 0.2);
384
+ --tone-border-strong: rgba(129, 140, 248, 0.35);
385
385
  --tone-solid: #818cf8;
386
386
  --tone-tint: #c7d2fe;
387
387
  --tone-shade: #818cf8;
@@ -390,7 +390,7 @@
390
390
  --tone-text: #a5b4fc;
391
391
  --tone-text-hover: #c7d2fe;
392
392
  --tone-fg: #1e1b4b;
393
- --tone-ring: rgba(129, 140, 248, 0.5);
393
+ --tone-ring: rgba(129, 140, 248, 0.4);
394
394
  --tone-highlight: #fbbf24;
395
395
  --tone-highlight-fg: #78350f;
396
396
 
@@ -488,8 +488,8 @@
488
488
  --tone-soft: rgba(0, 0, 0, 0.06);
489
489
  --tone-muted: rgba(0, 0, 0, 0.1);
490
490
  --tone-wash: rgba(0, 0, 0, 0.02);
491
- --tone-border: rgba(0, 0, 0, 0.12);
492
- --tone-border-strong: rgba(0, 0, 0, 0.2);
491
+ --tone-border: rgba(0, 0, 0, 0.2);
492
+ --tone-border-strong: rgba(0, 0, 0, 0.35);
493
493
  --tone-solid: var(--ui-gray);
494
494
  --tone-tint: var(--ui-gray-tint);
495
495
  --tone-shade: var(--ui-gray-shade);
@@ -498,7 +498,7 @@
498
498
  --tone-text: #374151;
499
499
  --tone-text-hover: #4b5563;
500
500
  --tone-fg: #ffffff;
501
- --tone-ring: rgba(55, 65, 81, 0.3);
501
+ --tone-ring: rgba(55, 65, 81, 0.4);
502
502
  --tone-link: #374151;
503
503
  --tone-link-hover: #4b5563;
504
504
  --tone-link-visited: #6b7280;
@@ -542,7 +542,7 @@
542
542
  --tone-text: #dc2626;
543
543
  --tone-text-hover: #b91c1c;
544
544
  --tone-fg: #ffffff;
545
- --tone-ring: rgba(239, 68, 68, 0.4);
545
+ --tone-ring: rgba(239, 68, 68, 0.35);
546
546
  --tone-link: #dc2626;
547
547
  --tone-link-hover: #b91c1c;
548
548
  --tone-link-visited: #991b1b;
@@ -821,8 +821,8 @@
821
821
  --tone-soft: rgba(255, 255, 255, 0.1);
822
822
  --tone-muted: rgba(255, 255, 255, 0.15);
823
823
  --tone-wash: rgba(255, 255, 255, 0.03);
824
- --tone-border: rgba(255, 255, 255, 0.12);
825
- --tone-border-strong: rgba(255, 255, 255, 0.2);
824
+ --tone-border: rgba(255, 255, 255, 0.2);
825
+ --tone-border-strong: rgba(255, 255, 255, 0.35);
826
826
  /* --tone-solid: #e5e7eb; */
827
827
  --tone-solid-hover: #d1d5db;
828
828
  --tone-solid-active: #9ca3af;
@@ -840,8 +840,8 @@
840
840
  --tone-soft: rgba(180, 188, 162, 0.15);
841
841
  --tone-muted: rgba(180, 188, 162, 0.2);
842
842
  --tone-wash: rgba(180, 188, 162, 0.05);
843
- --tone-border: rgba(180, 188, 162, 0.25);
844
- --tone-border-strong: rgba(180, 188, 162, 0.4);
843
+ --tone-border: rgba(180, 188, 162, 0.2);
844
+ --tone-border-strong: rgba(180, 188, 162, 0.35);
845
845
  /* --tone-solid: #b4bc9e; */
846
846
  --tone-solid-hover: #c8cfb5;
847
847
  --tone-solid-active: #dce2cc;
@@ -859,8 +859,8 @@
859
859
  --tone-soft: rgba(248, 113, 113, 0.15);
860
860
  --tone-muted: rgba(248, 113, 113, 0.2);
861
861
  --tone-wash: rgba(248, 113, 113, 0.05);
862
- --tone-border: rgba(248, 113, 113, 0.25);
863
- --tone-border-strong: rgba(248, 113, 113, 0.4);
862
+ --tone-border: rgba(248, 113, 113, 0.2);
863
+ --tone-border-strong: rgba(248, 113, 113, 0.35);
864
864
  /* --tone-solid: #f87171; */
865
865
  --tone-solid-hover: #fca5a5;
866
866
  --tone-solid-active: #fecaca;
@@ -878,8 +878,8 @@
878
878
  --tone-soft: rgba(251, 113, 133, 0.15);
879
879
  --tone-muted: rgba(251, 113, 133, 0.2);
880
880
  --tone-wash: rgba(251, 113, 133, 0.05);
881
- --tone-border: rgba(251, 113, 133, 0.25);
882
- --tone-border-strong: rgba(251, 113, 133, 0.4);
881
+ --tone-border: rgba(251, 113, 133, 0.2);
882
+ --tone-border-strong: rgba(251, 113, 133, 0.35);
883
883
  /* --tone-solid: #fb7185; */
884
884
  --tone-solid-hover: #fda4af;
885
885
  --tone-solid-active: #fecdd3;
@@ -897,8 +897,8 @@
897
897
  --tone-soft: rgba(244, 114, 182, 0.15);
898
898
  --tone-muted: rgba(244, 114, 182, 0.2);
899
899
  --tone-wash: rgba(244, 114, 182, 0.05);
900
- --tone-border: rgba(244, 114, 182, 0.25);
901
- --tone-border-strong: rgba(244, 114, 182, 0.4);
900
+ --tone-border: rgba(244, 114, 182, 0.2);
901
+ --tone-border-strong: rgba(244, 114, 182, 0.35);
902
902
  /* --tone-solid: #f472b6; */
903
903
  --tone-solid-hover: #f9a8d4;
904
904
  --tone-solid-active: #fbcfe8;
@@ -916,8 +916,8 @@
916
916
  --tone-soft: rgba(167, 139, 250, 0.15);
917
917
  --tone-muted: rgba(167, 139, 250, 0.2);
918
918
  --tone-wash: rgba(167, 139, 250, 0.05);
919
- --tone-border: rgba(167, 139, 250, 0.25);
920
- --tone-border-strong: rgba(167, 139, 250, 0.4);
919
+ --tone-border: rgba(167, 139, 250, 0.2);
920
+ --tone-border-strong: rgba(167, 139, 250, 0.35);
921
921
  /* --tone-solid: #a78bfa; */
922
922
  --tone-solid-hover: #c4b5fd;
923
923
  --tone-solid-active: #ddd6fe;
@@ -935,8 +935,8 @@
935
935
  --tone-soft: rgba(129, 140, 248, 0.15);
936
936
  --tone-muted: rgba(129, 140, 248, 0.2);
937
937
  --tone-wash: rgba(129, 140, 248, 0.05);
938
- --tone-border: rgba(129, 140, 248, 0.25);
939
- --tone-border-strong: rgba(129, 140, 248, 0.4);
938
+ --tone-border: rgba(129, 140, 248, 0.2);
939
+ --tone-border-strong: rgba(129, 140, 248, 0.35);
940
940
  /* --tone-solid: #818cf8; */
941
941
  --tone-solid-hover: #a5b4fc;
942
942
  --tone-solid-active: #c7d2fe;
@@ -954,8 +954,8 @@
954
954
  --tone-soft: rgba(96, 165, 250, 0.15);
955
955
  --tone-muted: rgba(96, 165, 250, 0.2);
956
956
  --tone-wash: rgba(96, 165, 250, 0.05);
957
- --tone-border: rgba(96, 165, 250, 0.25);
958
- --tone-border-strong: rgba(96, 165, 250, 0.4);
957
+ --tone-border: rgba(96, 165, 250, 0.2);
958
+ --tone-border-strong: rgba(96, 165, 250, 0.35);
959
959
  /* --tone-solid: #60a5fa; */
960
960
  --tone-solid-hover: #93bbfd;
961
961
  --tone-solid-active: #bfdbfe;
@@ -973,8 +973,8 @@
973
973
  --tone-soft: rgba(45, 212, 191, 0.15);
974
974
  --tone-muted: rgba(45, 212, 191, 0.2);
975
975
  --tone-wash: rgba(45, 212, 191, 0.05);
976
- --tone-border: rgba(45, 212, 191, 0.25);
977
- --tone-border-strong: rgba(45, 212, 191, 0.4);
976
+ --tone-border: rgba(45, 212, 191, 0.2);
977
+ --tone-border-strong: rgba(45, 212, 191, 0.35);
978
978
  /* --tone-solid: #2dd4bf; */
979
979
  --tone-solid-hover: #5eead4;
980
980
  --tone-solid-active: #99f6e4;
@@ -992,8 +992,8 @@
992
992
  --tone-soft: rgba(74, 222, 128, 0.15);
993
993
  --tone-muted: rgba(74, 222, 128, 0.2);
994
994
  --tone-wash: rgba(74, 222, 128, 0.05);
995
- --tone-border: rgba(74, 222, 128, 0.25);
996
- --tone-border-strong: rgba(74, 222, 128, 0.4);
995
+ --tone-border: rgba(74, 222, 128, 0.2);
996
+ --tone-border-strong: rgba(74, 222, 128, 0.35);
997
997
  /* --tone-solid: #4ade80; */
998
998
  --tone-solid-hover: #86efac;
999
999
  --tone-solid-active: #bbf7d0;
@@ -1011,8 +1011,8 @@
1011
1011
  --tone-soft: rgba(34, 211, 238, 0.15);
1012
1012
  --tone-muted: rgba(34, 211, 238, 0.2);
1013
1013
  --tone-wash: rgba(34, 211, 238, 0.05);
1014
- --tone-border: rgba(34, 211, 238, 0.25);
1015
- --tone-border-strong: rgba(34, 211, 238, 0.4);
1014
+ --tone-border: rgba(34, 211, 238, 0.2);
1015
+ --tone-border-strong: rgba(34, 211, 238, 0.35);
1016
1016
  /* --tone-solid: #22d3ee; */
1017
1017
  --tone-solid-hover: #67e8f9;
1018
1018
  --tone-solid-active: #a5f3fc;
@@ -1030,8 +1030,8 @@
1030
1030
  --tone-soft: rgba(163, 230, 53, 0.15);
1031
1031
  --tone-muted: rgba(163, 230, 53, 0.2);
1032
1032
  --tone-wash: rgba(163, 230, 53, 0.05);
1033
- --tone-border: rgba(163, 230, 53, 0.25);
1034
- --tone-border-strong: rgba(163, 230, 53, 0.4);
1033
+ --tone-border: rgba(163, 230, 53, 0.2);
1034
+ --tone-border-strong: rgba(163, 230, 53, 0.35);
1035
1035
  /* --tone-solid: #a3e635; */
1036
1036
  --tone-solid-hover: #bef264;
1037
1037
  --tone-solid-active: #d9f99d;
@@ -1049,8 +1049,8 @@
1049
1049
  --tone-soft: rgba(250, 204, 21, 0.15);
1050
1050
  --tone-muted: rgba(250, 204, 21, 0.2);
1051
1051
  --tone-wash: rgba(250, 204, 21, 0.05);
1052
- --tone-border: rgba(250, 204, 21, 0.25);
1053
- --tone-border-strong: rgba(250, 204, 21, 0.4);
1052
+ --tone-border: rgba(250, 204, 21, 0.2);
1053
+ --tone-border-strong: rgba(250, 204, 21, 0.35);
1054
1054
  /* --tone-solid: #facc15; */
1055
1055
  --tone-solid-hover: #fde047;
1056
1056
  --tone-solid-active: #fef08a;
@@ -1068,8 +1068,8 @@
1068
1068
  --tone-soft: rgba(251, 146, 60, 0.15);
1069
1069
  --tone-muted: rgba(251, 146, 60, 0.2);
1070
1070
  --tone-wash: rgba(251, 146, 60, 0.05);
1071
- --tone-border: rgba(251, 146, 60, 0.25);
1072
- --tone-border-strong: rgba(251, 146, 60, 0.4);
1071
+ --tone-border: rgba(251, 146, 60, 0.2);
1072
+ --tone-border-strong: rgba(251, 146, 60, 0.35);
1073
1073
  /* --tone-solid: #fb923c; */
1074
1074
  --tone-solid-hover: #fdba74;
1075
1075
  --tone-solid-active: #fed7aa;
@@ -1087,8 +1087,8 @@
1087
1087
  --tone-soft: rgba(217, 119, 6, 0.15);
1088
1088
  --tone-muted: rgba(217, 119, 6, 0.2);
1089
1089
  --tone-wash: rgba(217, 119, 6, 0.05);
1090
- --tone-border: rgba(217, 119, 6, 0.25);
1091
- --tone-border-strong: rgba(217, 119, 6, 0.4);
1090
+ --tone-border: rgba(217, 119, 6, 0.2);
1091
+ --tone-border-strong: rgba(217, 119, 6, 0.35);
1092
1092
  /* --tone-solid: #d97706; */
1093
1093
  --tone-solid-hover: #f59e0b;
1094
1094
  --tone-solid-active: #fbbf24;