diff --git a/components/lib/editor/style/EditorStyle.js b/components/lib/editor/style/EditorStyle.js index d79db9b7e..8393dffdb 100644 --- a/components/lib/editor/style/EditorStyle.js +++ b/components/lib/editor/style/EditorStyle.js @@ -949,8 +949,8 @@ const theme = ({ dt }) => ` .p-editor .p-editor-toolbar { background: ${dt('editor.toolbar.background')}; - border-top-right-radius: ${dt('border.radius.md')}; - border-top-left-radius: ${dt('border.radius.md')}; + border-top-right-radius: ${dt('editor.toolbar.border.radius')}; + border-top-left-radius: ${dt('editor.toolbar.border.radius')}; } .p-editor .p-editor-toolbar.ql-snow { @@ -997,27 +997,28 @@ const theme = ({ dt }) => ` .p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { background: ${dt('editor.overlay.background')}; border: 1px solid ${dt('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: ${dt('border.radius.md')}; - padding: 0.25rem 0.25rem; + box-shadow: ${dt('editor.overlay.shadow')}; + border-radius: ${dt('editor.overlay.border.radius')}; + padding: ${dt('editor.overlay.padding')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: ${dt('editor.overlay.item.color')}; + color: ${dt('editor.overlay.option.color')}; + border-radius: ${dt('editor.overlay.option.border.radius')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - background: ${dt('editor.overlay.item.hover.background')}; - color: ${dt('editor.overlay.item.hover.color')}; + background: ${dt('editor.overlay.option.focus.background')}; + color: ${dt('editor.overlay.option.focus.color')}; } .p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 0.75rem; + padding: ${dt('editor.overlay.option.padding')}; } .p-editor .p-editor-content { - border-bottom-right-radius: ${dt('border.radius.md')}; - border-bottom-left-radius: ${dt('border.radius.md')}; + border-bottom-right-radius: ${dt('editor.content.border.radius')}; + border-bottom-left-radius: ${dt('editor.content.border.radius')}; } .p-editor .p-editor-content.ql-snow { @@ -1027,8 +1028,8 @@ const theme = ({ dt }) => ` .p-editor .p-editor-content .ql-editor { background: ${dt('editor.content.background')}; color: ${dt('editor.content.color')}; - border-bottom-right-radius: ${dt('border.radius.md')}; - border-bottom-left-radius: ${dt('border.radius.md')}; + border-bottom-right-radius: ${dt('editor.content.border.radius')}; + border-bottom-left-radius: ${dt('editor.content.border.radius')}; } .p-editor .ql-snow.ql-toolbar button:hover, diff --git a/components/lib/themes/aura/editor/index.js b/components/lib/themes/aura/editor/index.js index 0c490b406..fed8a0c1a 100644 --- a/components/lib/themes/aura/editor/index.js +++ b/components/lib/themes/aura/editor/index.js @@ -1,7 +1,8 @@ export default { toolbar: { background: '{content.background}', - borderColor: '{content.border.color}' + borderColor: '{content.border.color}', + borderRadius: '{border.radius.md}' }, toolbarItem: { color: '{text.muted.color}', @@ -9,18 +10,24 @@ export default { activeColor: '{primary.color}' }, overlay: { - background: '{content.background}', - borderColor: '{content.border.color}', - color: '{content.color}' + background: '{overlay.select.background}', + borderColor: '{overlay.select.border.color}', + borderRadius: '{overlay.select.border.radius}', + color: '{overlay.select.color}', + shadow: '{overlay.select.shadow}', + padding: '{list.padding}' }, - overlayItem: { - hoverBackground: '{content.hover.background}', - color: '{content.color}', - hoverColor: '{content.hover.color}' + overlayOption: { + focusBackground: '{list.option.focus.background}', + color: '{list.option.color}', + focusColor: '{list.option.focus.color}', + padding: '{list.option.padding}', + borderRadius: '{list.option.border.radius}' }, content: { background: '{content.background}', borderColor: '{content.border.color}', - color: '{content.color}' + color: '{content.color}', + borderRadius: '{border.radius.md}' } }; diff --git a/components/lib/themes/lara/editor/index.js b/components/lib/themes/lara/editor/index.js index 0c490b406..0f8bded60 100644 --- a/components/lib/themes/lara/editor/index.js +++ b/components/lib/themes/lara/editor/index.js @@ -1,7 +1,7 @@ export default { toolbar: { - background: '{content.background}', - borderColor: '{content.border.color}' + borderColor: '{content.border.color}', + borderRadius: '{border.radius.sm}' }, toolbarItem: { color: '{text.muted.color}', @@ -9,18 +9,36 @@ export default { activeColor: '{primary.color}' }, overlay: { - background: '{content.background}', - borderColor: '{content.border.color}', - color: '{content.color}' + background: '{overlay.select.background}', + borderColor: '{overlay.select.border.color}', + borderRadius: '{overlay.select.border.radius}', + color: '{overlay.select.color}', + shadow: '{overlay.select.shadow}', + padding: '{list.padding}' }, - overlayItem: { - hoverBackground: '{content.hover.background}', - color: '{content.color}', - hoverColor: '{content.hover.color}' + overlayOption: { + focusBackground: '{list.option.focus.background}', + color: '{list.option.color}', + focusColor: '{list.option.focus.color}', + padding: '{list.option.padding}', + borderRadius: '{list.option.border.radius}' }, content: { background: '{content.background}', borderColor: '{content.border.color}', - color: '{content.color}' + color: '{content.color}', + borderRadius: '{border.radius.sm}' + }, + colorScheme: { + light: { + toolbar: { + background: '{surface.100}' + } + }, + dark: { + toolbar: { + background: '{surface.800}' + } + } } };