diff --git a/components/lib/themes/primeone/base/editor/index.js b/components/lib/themes/primeone/base/editor/index.js new file mode 100644 index 000000000..ddf3ecacc --- /dev/null +++ b/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); +} +` +}; diff --git a/components/lib/themes/primeone/base/editor/package.json b/components/lib/themes/primeone/base/editor/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/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" +} diff --git a/components/lib/themes/primeone/base/index.js b/components/lib/themes/primeone/base/index.js index 73738e68d..e57432fc5 100644 --- a/components/lib/themes/primeone/base/index.js +++ b/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, diff --git a/components/lib/themes/primeone/presets/aura/editor/index.js b/components/lib/themes/primeone/presets/aura/editor/index.js new file mode 100644 index 000000000..c3f82cb27 --- /dev/null +++ b/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}' + } + } + } +}; diff --git a/components/lib/themes/primeone/presets/aura/editor/package.json b/components/lib/themes/primeone/presets/aura/editor/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/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" +} diff --git a/components/lib/themes/primeone/presets/aura/index.js b/components/lib/themes/primeone/presets/aura/index.js index 9ec17b0e1..6a9645fbb 100644 --- a/components/lib/themes/primeone/presets/aura/index.js +++ b/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,