@prokodo/ui 0.1.15 → 1.0.1

package/dist/components/RTE/RTE.css

@@ -134,32 +134,71 @@
   width: calc(100% - 4px);
   padding: 0;
   overflow: hidden;
-  background-color: var(--color-primary-40);
+  background-color: var(--pk-rte-bg);
 }
 .prokodo-RTE__surface::after {
   content: none;
 }
-.prokodo-RTE__toolbar {
+.prokodo-RTE__surface .ql-toolbar,
+.prokodo-RTE__surface .ql-container {
   border: none !important;
-  background-color: var(--color-primary-50);
+}
+.prokodo-RTE__surface .ql-toolbar.ql-snow button:hover .ql-stroke,
+.prokodo-RTE__surface .ql-toolbar.ql-snow button.ql-active .ql-stroke {
+  stroke: var(--pk-rte-accent) !important;
+}
+.prokodo-RTE__surface .ql-toolbar.ql-snow button:hover .ql-fill,
+.prokodo-RTE__surface .ql-toolbar.ql-snow button.ql-active .ql-fill {
+  fill: var(--pk-rte-accent) !important;
+}
+.prokodo-RTE__surface .ql-toolbar.ql-snow .ql-picker-label:hover,
+.prokodo-RTE__surface .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: var(--pk-rte-accent) !important;
+}
+.prokodo-RTE__surface .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
+.prokodo-RTE__surface .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: var(--pk-rte-accent) !important;
+}
+.prokodo-RTE__surface .ql-toolbar .ql-picker-options {
+  background: var(--pk-rte-picker-bg) !important;
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-rte-accent) 20%, var(--pk-color-border)) !important;
+  border-radius: var(--pk-rte-radius-lg) !important;
+  box-shadow: var(--pk-rte-picker-shadow) !important;
+  padding: var(--pk-space-xs) !important;
+  margin-top: var(--pk-space-xs) !important;
+  min-width: 200px !important;
+}
+.prokodo-RTE__toolbar {
+  border: none;
+  background-color: var(--pk-rte-toolbar-bg);
 }
 .prokodo-RTE__toolbar__icon__part__stroke, .prokodo-RTE__toolbar__icon__part__stroke__miter {
-  stroke: var(--color-grey-900) !important;
-  opacity: 0.7;
+  stroke: var(--pk-rte-icon-color);
+  opacity: var(--pk-rte-icon-opacity);
+  transition: stroke var(--pk-timing-fast) ease, opacity var(--pk-timing-fast) ease;
 }
 .prokodo-RTE__toolbar__icon__part__fill {
-  fill: var(--color-grey-900) !important;
-  opacity: 0.7;
+  fill: var(--pk-rte-icon-color);
+  opacity: var(--pk-rte-icon-opacity);
+  transition: fill var(--pk-timing-fast) ease, opacity var(--pk-timing-fast) ease;
+}
+.prokodo-RTE__toolbar__button:hover .prokodo-RTE__toolbar__icon__part__stroke, .prokodo-RTE__toolbar__button:hover .prokodo-RTE__toolbar__icon__part__stroke__miter, .prokodo-RTE__toolbar__button.ql-active .prokodo-RTE__toolbar__icon__part__stroke, .prokodo-RTE__toolbar__button.ql-active .prokodo-RTE__toolbar__icon__part__stroke__miter {
+  stroke: var(--pk-rte-accent);
+  opacity: 1;
+}
+.prokodo-RTE__toolbar__button:hover .prokodo-RTE__toolbar__icon__part__fill, .prokodo-RTE__toolbar__button.ql-active .prokodo-RTE__toolbar__icon__part__fill {
+  fill: var(--pk-rte-accent);
+  opacity: 1;
 }
 .prokodo-RTE__toolbar__picker__label {
   position: relative;
-  padding-right: calc(0.5rem + 18px);
+  padding-right: calc(var(--pk-space-sm) + 18px);
 }
 .prokodo-RTE__toolbar__picker__label::before {
   content: "Normal";
-  color: var(--color-grey-900);
+  color: var(--pk-rte-icon-color);
   opacity: 0.85;
-  margin-right: 0.25rem;
+  margin-right: var(--pk-space-xs);
   white-space: nowrap;
   font-weight: 400;
   font-size: 1rem;
@@ -183,6 +222,9 @@
     line-height: 1.4;
   }
 }
+.prokodo-RTE__toolbar__picker__label[data-value="1"]::before {
+  content: "H1";
+}
 .prokodo-RTE__toolbar__picker__label[data-value="2"]::before {
   content: "H2";
 }
@@ -190,77 +232,99 @@
   content: "H3";
 }
 .prokodo-RTE__toolbar__picker__options {
-  margin-top: 0.25rem;
-  padding: 0.25rem;
-  border-radius: 14px;
-  background: var(--color-white) !important;
-  border-color: var(--color-grey-500) !important;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+  margin-top: var(--pk-space-xs);
+  padding: var(--pk-space-xs);
+  border-radius: var(--pk-rte-radius-lg);
+  background: var(--pk-rte-picker-bg);
+  border: var(--pk-border-width) solid color-mix(in srgb, var(--pk-rte-accent) 20%, var(--pk-color-border)) !important;
+  box-shadow: var(--pk-rte-picker-shadow);
   overflow: hidden;
-  min-width: 180px;
-  z-index: 20;
+  min-width: 200px;
+  z-index: var(--pk-z-dropdown);
 }
 .prokodo-RTE__toolbar__picker__item {
-  border-radius: 12px;
-  padding: 0.25rem 0.5rem;
+  border-radius: var(--pk-rte-radius);
+  padding: var(--pk-space-sm) var(--pk-space-md);
   display: flex;
   align-items: center;
+  gap: var(--pk-space-sm);
   cursor: pointer;
+  transition: background var(--pk-timing-fast) ease, transform var(--pk-timing-fast) ease;
+  position: relative;
+}
+.prokodo-RTE__toolbar__picker__item::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 20%;
+  bottom: 20%;
+  width: 3px;
+  border-radius: 3px;
+  background: linear-gradient(to bottom, var(--pk-rte-accent), color-mix(in srgb, var(--pk-rte-accent) 60%, var(--pk-color-accent)));
+  opacity: 0;
+  transition: opacity var(--pk-timing-fast) ease;
 }
 .prokodo-RTE__toolbar__picker__item::before {
   content: "Normal";
-  color: var(--color-grey-900);
-  opacity: 0.85;
+  color: var(--pk-rte-icon-color);
   font-weight: 400;
-  font-size: 1rem;
-  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.45;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
+  font-size: 0.875rem;
+  line-height: 1.2;
 }
-@media screen and (min-width: 480px) {
-  .prokodo-RTE__toolbar__picker__item::before {
-    font-size: 0.875rem;
-    line-height: 1.4;
-  }
+.prokodo-RTE__toolbar__picker__item:not([data-value])::before, .prokodo-RTE__toolbar__picker__item[data-value=""]::before {
+  content: "Normal";
+  font-size: 0.875rem;
+  font-weight: 400;
+  opacity: 0.75;
 }
-@media screen and (min-width: 960px) {
-  .prokodo-RTE__toolbar__picker__item::before {
-    font-size: 0.875rem;
-    line-height: 1.4;
-  }
+.prokodo-RTE__toolbar__picker__item[data-value="1"]::before {
+  content: "Heading 1";
+  font-size: 1.375rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
 }
 .prokodo-RTE__toolbar__picker__item[data-value="2"]::before {
-  content: "H2";
+  content: "Heading 2";
+  font-size: 1.125rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
 }
 .prokodo-RTE__toolbar__picker__item[data-value="3"]::before {
-  content: "H3";
+  content: "Heading 3";
+  font-size: 1rem;
+  font-weight: 600;
 }
 .prokodo-RTE__toolbar__picker__item:hover {
-  background: var(--color-primary-50) !important;
+  background: var(--pk-rte-picker-hover-bg);
+  transform: translateX(2px);
 }
 .prokodo-RTE__toolbar__picker__item[data-selected=true] {
-  background: var(--color-primary-100) !important;
+  background: var(--pk-rte-picker-active-bg);
+  padding-left: calc(var(--pk-space-md) + 6px);
+}
+.prokodo-RTE__toolbar__picker__item[data-selected=true]::after {
+  opacity: 1;
+}
+.prokodo-RTE__toolbar__picker__item[data-selected=true]::before {
+  color: var(--pk-rte-accent);
+  opacity: 1;
 }
 .prokodo-RTE__toolbar__picker__item:focus-visible {
-  outline: 2px solid var(--color-primary-100);
-  outline-offset: 2px;
+  outline: var(--pk-focus-ring-width) solid var(--pk-focus-ring-color);
+  outline-offset: var(--pk-focus-ring-offset);
 }
 .prokodo-RTE__resize {
   position: absolute;
-  right: 0.5rem;
-  bottom: 0.5rem;
+  right: var(--pk-space-sm);
+  bottom: var(--pk-space-sm);
   width: 18px;
   height: 18px;
   padding: 0;
   border: none;
   background: transparent;
-  color: var(--color-grey-900);
+  color: var(--pk-rte-resize-color);
   cursor: ns-resize;
-  opacity: 0.55;
+  opacity: var(--pk-rte-resize-opacity);
 }
 .prokodo-RTE__mount {
   position: relative;
@@ -268,21 +332,20 @@
   border: none;
   background: transparent;
   width: 100%;
-  border: none !important;
 }
 .prokodo-RTE__mount--disabled {
   cursor: not-allowed;
   opacity: 0.85;
 }
 .prokodo-RTE__tooltip {
-  max-width: calc(100% - 0.75rem - 0.75rem);
+  max-width: calc(100% - var(--pk-space-md) * 2);
   box-sizing: border-box;
-  border-radius: 14px;
+  border-radius: var(--pk-rte-radius-lg);
   overflow: hidden;
 }
 .prokodo-RTE__editor {
   height: 100%;
-  padding: 0.75rem;
+  padding: var(--pk-space-md);
   outline: none;
   overflow-y: auto;
   font-weight: 400;
@@ -306,34 +369,34 @@
   }
 }
 .prokodo-RTE__editor p {
-  margin: 0.75rem 0 !important;
+  margin: var(--pk-space-md) 0;
 }
 .prokodo-RTE__editor p:last-child {
-  margin-bottom: 0 !important;
+  margin-bottom: 0;
 }
 .prokodo-RTE__editor ul,
 .prokodo-RTE__editor ol {
-  margin: 0 0 0.5rem 1.25rem !important;
-  padding: 0 !important;
+  margin: 0 0 var(--pk-space-sm) 1.25rem;
+  padding: 0;
 }
 .prokodo-RTE__editor pre {
-  margin: 0.5rem 0 !important;
-  padding: 0.5rem;
-  border-radius: 14px;
+  margin: var(--pk-space-sm) 0;
+  padding: var(--pk-space-sm);
+  border-radius: var(--pk-rte-radius-lg);
   overflow: auto;
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--pk-rte-code-bg);
 }
 .prokodo-RTE__editor code {
-  background: rgba(0, 0, 0, 0.06);
-  padding: 0 6px !important;
+  background: var(--pk-rte-code-bg);
+  padding: 0 6px;
   border-radius: 8px;
 }
 .prokodo-RTE__editor img {
   max-width: 100%;
   height: auto;
-  border-radius: 14px;
+  border-radius: var(--pk-rte-radius-lg);
   display: block;
-  margin: 0.5rem 0;
+  margin: var(--pk-space-sm) 0;
 }
 .prokodo-RTE__editor h1,
 .prokodo-RTE__editor h2,
@@ -341,7 +404,7 @@
 .prokodo-RTE__editor h4,
 .prokodo-RTE__editor h5,
 .prokodo-RTE__editor h6 {
-  margin: 1rem 0 0.5rem 0 !important;
+  margin: var(--pk-space-lg) 0 var(--pk-space-sm) 0;
 }
 .prokodo-RTE__editor > h1:first-child,
 .prokodo-RTE__editor > h2:first-child,
@@ -349,7 +412,7 @@
 .prokodo-RTE__editor > h4:first-child,
 .prokodo-RTE__editor > h5:first-child,
 .prokodo-RTE__editor > h6:first-child {
-  margin-top: 0 !important;
+  margin-top: 0;
 }
 .prokodo-RTE__editor h1 {
   font-weight: 900;
@@ -457,6 +520,55 @@
   text-align: left;
   text-decoration: none;
 }
+[data-theme="dark"] .prokodo-RTE, .pk-theme-dark .prokodo-RTE {
+  --pk-rte-toolbar-bg: color-mix(in srgb, var(--pk-color-brand) 14%, var(--pk-palette-slate-950));
+  --pk-rte-icon-color: var(--pk-palette-white);
+  --pk-rte-picker-bg: var(--pk-palette-slate-950);
+  --pk-rte-picker-shadow: 0 10px 40px rgba(0, 0, 0, 0.7),
+                             0 2px 12px rgba(0, 0, 0, 0.4);
+}
+[data-theme="dark"] .prokodo-RTE .ql-snow .ql-stroke, .pk-theme-dark .prokodo-RTE .ql-snow .ql-stroke {
+  stroke: var(--pk-palette-white) !important;
+}
+[data-theme="dark"] .prokodo-RTE .ql-snow .ql-fill,
+[data-theme="dark"] .prokodo-RTE .ql-snow .ql-stroke.ql-fill, .pk-theme-dark .prokodo-RTE .ql-snow .ql-fill,
+.pk-theme-dark .prokodo-RTE .ql-snow .ql-stroke.ql-fill {
+  fill: var(--pk-palette-white) !important;
+}
+[data-theme="dark"] .prokodo-RTE .ql-snow .ql-picker, .pk-theme-dark .prokodo-RTE .ql-snow .ql-picker {
+  color: var(--pk-palette-white) !important;
+}
+[data-theme="dark"] .prokodo-RTE .ql-snow .ql-picker-label::before, .pk-theme-dark .prokodo-RTE .ql-snow .ql-picker-label::before {
+  color: var(--pk-palette-white) !important;
+}
+[data-theme="dark"] .prokodo-RTE .ql-toolbar .ql-picker-options, .pk-theme-dark .prokodo-RTE .ql-toolbar .ql-picker-options {
+  background: var(--pk-palette-slate-950) !important;
+  border-color: color-mix(in srgb, var(--pk-color-brand) 30%, transparent) !important;
+}
+[data-theme="dark"] .prokodo-RTE .ql-toolbar .ql-picker-item, .pk-theme-dark .prokodo-RTE .ql-toolbar .ql-picker-item {
+  color: var(--pk-palette-white) !important;
+}
+.prokodo-RTE--primary {
+  --pk-rte-accent: var(--pk-color-brand);
+}
+.prokodo-RTE--secondary {
+  --pk-rte-accent: var(--pk-color-accent);
+}
+.prokodo-RTE--success {
+  --pk-rte-accent: var(--pk-color-success);
+}
+.prokodo-RTE--warning {
+  --pk-rte-accent: var(--pk-color-warning);
+}
+.prokodo-RTE--error {
+  --pk-rte-accent: var(--pk-color-error);
+}
+.prokodo-RTE--info, .prokodo-RTE--inherit, .prokodo-RTE--white {
+  --pk-rte-accent: var(--pk-color-muted);
+}
+[data-theme="dark"] .prokodo-RTE--info, [data-theme="dark"] .prokodo-RTE--inherit, [data-theme="dark"] .prokodo-RTE--white, .pk-theme-dark .prokodo-RTE--info, .pk-theme-dark .prokodo-RTE--inherit, .pk-theme-dark .prokodo-RTE--white {
+  --pk-rte-accent: var(--pk-palette-grey-200);
+}
 .prokodo-RTE--disabled {
   opacity: 0.9;
 }