Migrated editor

components/lib/themes/primeone/base/editor/index.js

@@ -0,0 +1,126 @@
+export default {
+    css: `
+.p-editor-container .p-editor-toolbar {
+    background: var(--p-editor-toolbar-background);
+    border-top-right-radius: var(--p-rounded-base);
+    border-top-left-radius: var(--p-rounded-base);
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow {
+    border: 1px solid var(--p-editor-toolbar-border-color);
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+    stroke: var(--p-editor-toolbar-item-text-color);
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+    fill: var(--p-editor-toolbar-item-text-color);
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+    border: 0 none;
+    color: var(--p-editor-toolbar-item-text-color);
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+    color: var(--p-editor-toolbar-item-text-color-hover);
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+    stroke: var(--p-editor-toolbar-item-text-color-hover);
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+    fill: var(--p-editor-toolbar-item-text-color-hover);
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+    color: var(--p-editor-toolbar-item-text-color-active);
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+    stroke: var(--p-editor-toolbar-item-text-color-active);
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+    fill: var(--p-editor-toolbar-item-text-color-active);
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+    background: var(--p-editor-overlay-background);
+    border: 1px solid var(--p-editor-overlay-border-color);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    border-radius: var(--p-rounded-base);
+    padding: 0.25rem 0.25rem;
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+    color: var(--p-editor-overlay-item-text-color);
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+    color: var(--p-editor-overlay-item-text-color-hover);
+    background: var(--p-editor-overlay-item-background-hover);
+}
+
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+    padding: 0.5rem 0.75rem;
+}
+
+.p-editor-container .p-editor-content {
+    border-bottom-right-radius: var(--p-rounded-base);
+    border-bottom-left-radius: var(--p-rounded-base);
+}
+
+.p-editor-container .p-editor-content.ql-snow {
+    border: 1px solid var(--p-editor-content-border-color);
+}
+
+.p-editor-container .p-editor-content .ql-editor {
+    background: var(--p-editor-content-background);
+    color: var(--p-editor-content-text-color);
+    border-bottom-right-radius: var(--p-rounded-base);
+    border-bottom-left-radius: var(--p-rounded-base);
+}
+
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+    color: var(--p-editor-toolbar-item-text-color-hover);
+}
+
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+    stroke: var(--p-editor-toolbar-item-text-color-hover);
+}
+
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+    fill: var(--p-editor-toolbar-item-text-color-hover);
+}
+
+.p-editor-container .ql-snow.ql-toolbar button.ql-active,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
+    color: var(--p-editor-toolbar-item-text-color-active);
+}
+
+.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
+    stroke: var(--p-editor-toolbar-item-text-color-active);
+}
+
+.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
+    fill: var(--p-editor-toolbar-item-text-color-active);
+}
+
+.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label {
+    color: var(--p-editor-toolbar-item-text-color-active);
+}
+`
+};

components/lib/themes/primeone/base/editor/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/themes/primeone/base/index.js

@@ -22,6 +22,7 @@ import dialog from 'primevue/themes/primeone/base/dialog';
 import divider from 'primevue/themes/primeone/base/divider';
 import dock from 'primevue/themes/primeone/base/dock';
 import dropdown from 'primevue/themes/primeone/base/dropdown';
+import editor from 'primevue/themes/primeone/base/editor';
 import fieldset from 'primevue/themes/primeone/base/fieldset';
 import galleria from 'primevue/themes/primeone/base/galleria';
 import global from 'primevue/themes/primeone/base/global';
@@ -104,6 +105,7 @@ export default {
         divider,
         dropdown,
         dock,
+        editor,
         fieldset,
         galleria,
         iconfield,

components/lib/themes/primeone/presets/aura/editor/index.js

@@ -0,0 +1,56 @@
+export default {
+    colorScheme: {
+        light: {
+            toolbar: {
+                background: '{surface.0}',
+                borderColor: '{surface.200}'
+            },
+            toolbarItem: {
+                textColor: '{surface.500}',
+                textColorHover: '{surface.700}',
+                textColorActive: '{primary.color}'
+            },
+            overlay: {
+                background: '{surface.0}',
+                borderColor: '{surface.200}',
+                textColor: '{surface.700}'
+            },
+            overlayItem: {
+                backgroundHover: '{surface.100}',
+                textColor: '{surface.700}',
+                textColorHover: '{surface.800}'
+            },
+            content: {
+                background: '{surface.0}',
+                borderColor: '{surface.200}',
+                textColor: '{surface.700}'
+            }
+        },
+        dark: {
+            toolbar: {
+                background: '{surface.900}',
+                borderColor: '{surface.700}'
+            },
+            toolbarItem: {
+                textColor: '{surface.400}',
+                textColorHover: '{surface.0}',
+                textColorActive: '{primary.color}'
+            },
+            overlay: {
+                background: '{surface.900}',
+                borderColor: '{surface.700}',
+                textColor: '{surface.0}'
+            },
+            overlayItem: {
+                backgroundHover: '{surface.800}',
+                textColor: '{surface.400}',
+                textColorHover: '{surface.0}'
+            },
+            content: {
+                background: '{surface.900}',
+                borderColor: '{surface.700}',
+                textColor: '{surface.0}'
+            }
+        }
+    }
+};

components/lib/themes/primeone/presets/aura/editor/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/themes/primeone/presets/aura/index.js

@@ -22,6 +22,7 @@ import dialog from 'primevue/themes/primeone/presets/aura/dialog';
 import divider from 'primevue/themes/primeone/presets/aura/divider';
 import dock from 'primevue/themes/primeone/presets/aura/dock';
 import dropdown from 'primevue/themes/primeone/presets/aura/dropdown';
+import editor from 'primevue/themes/primeone/presets/aura/editor';
 import fieldset from 'primevue/themes/primeone/presets/aura/fieldset';
 import galleria from 'primevue/themes/primeone/presets/aura/galleria';
 import iconfield from 'primevue/themes/primeone/presets/aura/iconfield';
@@ -245,6 +246,7 @@ export default {
         divider,
         dock,
         dropdown,
+        editor,
         fieldset,
         galleria,
         iconfield,