From 0ff84aa6cfe6547f8f14f7fe1fbd98f07d3ea9f9 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Thu, 15 Feb 2024 01:07:31 +0300 Subject: [PATCH] Initiated menu migration --- components/lib/theme/aura/breadcrumb/index.js | 96 ++++++ .../lib/theme/aura/breadcrumb/package.json | 6 + .../lib/theme/aura/contextmenu/index.js | 172 ++++++++++ .../lib/theme/aura/contextmenu/package.json | 6 + components/lib/theme/aura/dock/index.js | 179 +++++++++++ components/lib/theme/aura/dock/package.json | 6 + components/lib/theme/aura/global.js | 8 +- components/lib/theme/aura/index.js | 20 ++ components/lib/theme/aura/megamenu/index.js | 11 + .../lib/theme/aura/megamenu/package.json | 6 + components/lib/theme/aura/menu/index.js | 144 +++++++++ components/lib/theme/aura/menu/package.json | 6 + components/lib/theme/aura/menubar/index.js | 298 ++++++++++++++++++ .../lib/theme/aura/menubar/package.json | 6 + components/lib/theme/aura/panelmenu/index.js | 11 + .../lib/theme/aura/panelmenu/package.json | 6 + components/lib/theme/aura/steps/index.js | 11 + components/lib/theme/aura/steps/package.json | 6 + components/lib/theme/aura/tabmenu/index.js | 11 + .../lib/theme/aura/tabmenu/package.json | 6 + components/lib/theme/aura/tieredmenu/index.js | 175 ++++++++++ .../lib/theme/aura/tieredmenu/package.json | 6 + 22 files changed, 1192 insertions(+), 4 deletions(-) create mode 100644 components/lib/theme/aura/breadcrumb/index.js create mode 100644 components/lib/theme/aura/breadcrumb/package.json create mode 100644 components/lib/theme/aura/contextmenu/index.js create mode 100644 components/lib/theme/aura/contextmenu/package.json create mode 100644 components/lib/theme/aura/dock/index.js create mode 100644 components/lib/theme/aura/dock/package.json create mode 100644 components/lib/theme/aura/megamenu/index.js create mode 100644 components/lib/theme/aura/megamenu/package.json create mode 100644 components/lib/theme/aura/menu/index.js create mode 100644 components/lib/theme/aura/menu/package.json create mode 100644 components/lib/theme/aura/menubar/index.js create mode 100644 components/lib/theme/aura/menubar/package.json create mode 100644 components/lib/theme/aura/panelmenu/index.js create mode 100644 components/lib/theme/aura/panelmenu/package.json create mode 100644 components/lib/theme/aura/steps/index.js create mode 100644 components/lib/theme/aura/steps/package.json create mode 100644 components/lib/theme/aura/tabmenu/index.js create mode 100644 components/lib/theme/aura/tabmenu/package.json create mode 100644 components/lib/theme/aura/tieredmenu/index.js create mode 100644 components/lib/theme/aura/tieredmenu/package.json diff --git a/components/lib/theme/aura/breadcrumb/index.js b/components/lib/theme/aura/breadcrumb/index.js new file mode 100644 index 000000000..ce0c48482 --- /dev/null +++ b/components/lib/theme/aura/breadcrumb/index.js @@ -0,0 +1,96 @@ +export default { + variables: { + colorScheme: { + root: { + background: '{surface.0}' + }, + light: { + item: { + textColor: '{surface.500}', + textColorHover: '{surface.700}', + iconColor: '{surface.400}' + }, + separator: { + color: '{surface.400}' + } + }, + dark: { + root: { + background: '{surface.900}' + }, + item: { + textColor: '{surface.400}', + textColorHover: '{surface.0}', + iconColor: '{surface.500}' + }, + separator: { + color: '{surface.500}' + } + } + } + }, + css: ` +.p-breadcrumb { + background: var(-p-breadcrumb-background); + border: 0 none; + border-radius: 6px; + padding: 1rem; + overflow-x: auto; +} + +.p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; +} + +.p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; +} + +.p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; +} + +.p-breadcrumb::-webkit-scrollbar { + display: none; +} + +.p-breadcrumb .p-menuitem-link { + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration); + border-radius: var(--p-rounded-base); + outline-color: transparent; +} + +.p-breadcrumb .p-menuitem-link:focus-visible { + outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color); + outline-offset: var(--p-focus-ring-offset); +} + +.p-breadcrumb .p-menuitem-text { + color: var(--p-breadcrumb-item-text-color); + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration); + line-height: 1; +} + +.p-breadcrumb .p-menuitem-text:hover { + color: var(--p-breadcrumb-item-text-color-hover); + line-height: 1; +} + +.p-breadcrumb .p-menuitem-icon { + color: var(--p-breadcrumb-item-icon-color); +} + +.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator { + margin: 0 0.5rem 0 0.5rem; + color: var(--p-breadcrumb-separator-color); +} +` +}; diff --git a/components/lib/theme/aura/breadcrumb/package.json b/components/lib/theme/aura/breadcrumb/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/breadcrumb/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/theme/aura/contextmenu/index.js b/components/lib/theme/aura/contextmenu/index.js new file mode 100644 index 000000000..6228ff2f6 --- /dev/null +++ b/components/lib/theme/aura/contextmenu/index.js @@ -0,0 +1,172 @@ +export default { + variables: { + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + item: { + backgroundFocus: '{surface.100}', + text: { + color: '{surface.700}', + colorFocus: '{surface.800}' + }, + icon: { + color: '{surface.400}', + colorFocus: '{surface.500}' + } + }, + separator: { + borderColor: '{surface.200}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + item: { + backgroundFocus: '{surface.800}', + text: { + color: '{surface.0}', + colorFocus: '{surface.0}' + }, + icon: { + color: '{surface.500}', + colorFocus: '{surface.400}' + } + }, + separator: { + borderColor: '{surface.700}' + } + } + } + }, + css: ` +.p-contextmenu { + padding: 0.25rem 0.25rem; + background: var(--p-contextmenu-background); + color: var(--p-contextmenu-text-color); + border: 1px solid var(--p-contextmenu-border-color); + border-radius: var(--p-rounded-base); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; +} + +.p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; +} + +.p-contextmenu-root-list { + outline: 0 none; +} + +.p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + padding: 0.25rem 0.25rem; + background: var(--p-contextmenu-background); + color: var(--p-contextmenu-text-color); + border: 1px solid var(--p-contextmenu-border-color); + border-radius: var(--p-rounded-base); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + color: inherit; + padding: 0.5rem 0.75rem; + user-select: none; +} + +.p-contextmenu .p-menuitem-text { + line-height: 1; +} + +.p-contextmenu .p-menuitem { + position: relative; + margin: 2px 0; +} + +.p-contextmenu .p-menuitem:first-child { + margin-top: 0; +} +.p-contextmenu .p-menuitem:last-child { + margin-bottom: 0; +} + +.p-contextmenu .p-menuitem-content { + transition: background-color var(--p-transition-duration), color var(--p-transition-duration); + border-radius: var(--p-rounded-sm); + color: var(--p-contextmenu-item-text-color); +} + +.p-contextmenu .p-menuitem-icon { + color: var(--p-contextmenu-item-icon-color); + margin-right: 0.5rem; +} + +.p-contextmenu .p-submenu-icon { + color: var(--p-contextmenu-item-icon-color); + margin-left: auto; + font-size: 0.875rem; + width: 0.875rem; + height: 0.875rem; +} + +.p-contextmenu .p-menuitem.p-focus > .p-menuitem-content { + color: var(--p-contextmenu-item-text-color-focus); + background: var(--p-contextmenu-item-background-focus); +} + +.p-contextmenu .p-menuitem.p-focus > .p-menuitem-content .p-menuitem-icon, +.p-contextmenu .p-menuitem.p-focus > .p-menuitem-content .p-submenu-icon { + color: var(--p-contextmenu-item-icon-color-focus); +} + +.p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover { + color: var(--p-contextmenu-item-text-color-focus); + background: var(--p-contextmenu-item-background-focus); +} + +.p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon, +.p-contextmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon { + color: var(--p-contextmenu-item-icon-color-focus); +} + +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content { + color: var(--p-contextmenu-item-text-color-focus); + background: var(--p-contextmenu-item-background-focus); +} + +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-icon, +.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-submenu-icon { + color: var(--p-contextmenu-item-icon-color-focus); +} + +.p-contextmenu .p-menuitem-separator { + border-top: 1px solid var(--p-contextmenu-separator-border-color); + margin: 2px 0; +} + +.p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; +} + +.p-contextmenu-enter-active { + transition: opacity 250ms; +} +` +}; diff --git a/components/lib/theme/aura/contextmenu/package.json b/components/lib/theme/aura/contextmenu/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/contextmenu/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/theme/aura/dock/index.js b/components/lib/theme/aura/dock/index.js new file mode 100644 index 000000000..a498c196a --- /dev/null +++ b/components/lib/theme/aura/dock/index.js @@ -0,0 +1,179 @@ +export default { + variables: { + colorScheme: { + light: {}, + dark: {} + } + }, + css: ` +.p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; +} + +.p-dock-list-container { + display: flex; + pointer-events: auto; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 0.5rem 0.5rem; + border-radius: 0.5rem; +} + +.p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + outline: 0 none; +} + +.p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + padding: 0.5rem; + border-radius: 6px; +} + +p-dock-item.p-focus { + outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color); + outline-offset: var(--p-focus-ring-offset); +} + +.p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + width: 3rem; + height: 3rem; +} + +.p-dock-item-second-prev, +.p-dock-item-second-next { + transform: scale(1.2); +} + +.p-dock-item-prev, +.p-dock-item-next { + transform: scale(1.4); +} + +.p-dock-item-current { + transform: scale(1.6); + z-index: 1; +} + +.p-dock-top { + left: 0; + top: 0; + width: 100%; +} + +.p-dock-top .p-dock-item { + transform-origin: center top; +} + +.p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; +} + +.p-dock-bottom .p-dock-item { + transform-origin: center bottom; +} + +.p-dock-right { + right: 0; + top: 0; + height: 100%; +} + +.p-dock-right .p-dock-item { + transform-origin: center right; +} + +.p-dock-right .p-dock-list { + flex-direction: column; +} + +.p-dock-left { + left: 0; + top: 0; + height: 100%; +} + +.p-dock-left .p-dock-item { + transform-origin: center left; +} + +.p-dock-left .p-dock-list { + flex-direction: column; +} + +.p-dock-top .p-dock-item-second-prev, +.p-dock-top .p-dock-item-second-next, +.p-dock-bottom .p-dock-item-second-prev, +.p-dock-bottom .p-dock-item-second-next { + margin: 0 0.9rem; +} +.p-dock-top .p-dock-item-prev, +.p-dock-top .p-dock-item-next, +.p-dock-bottom .p-dock-item-prev, +.p-dock-bottom .p-dock-item-next { + margin: 0 1.3rem; +} +.p-dock-top .p-dock-item-current, +.p-dock-bottom .p-dock-item-current { + margin: 0 1.5rem; +} +.p-dock-left .p-dock-item-second-prev, +.p-dock-left .p-dock-item-second-next, +.p-dock-right .p-dock-item-second-prev, +.p-dock-right .p-dock-item-second-next { + margin: 0.9rem 0; +} +.p-dock-left .p-dock-item-prev, +.p-dock-left .p-dock-item-next, +.p-dock-right .p-dock-item-prev, +.p-dock-right .p-dock-item-next { + margin: 1.3rem 0; +} +.p-dock-left .p-dock-item-current, +.p-dock-right .p-dock-item-current { + margin: 1.5rem 0; +} +.p-dock-mobile.p-dock-top .p-dock-list-container, +.p-dock-mobile.p-dock-bottom .p-dock-list-container { + overflow-x: auto; + width: 100%; +} +.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, +.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list { + margin: 0 auto; +} +.p-dock-mobile.p-dock-left .p-dock-list-container, +.p-dock-mobile.p-dock-right .p-dock-list-container { + overflow-y: auto; + height: 100%; +} +.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, +.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list { + margin: auto 0; +} +.p-dock-mobile .p-dock-list .p-dock-item { + transform: none; + margin: 0; +} +` +}; diff --git a/components/lib/theme/aura/dock/package.json b/components/lib/theme/aura/dock/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/dock/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/theme/aura/global.js b/components/lib/theme/aura/global.js index be2c4c38a..f15721bad 100644 --- a/components/lib/theme/aura/global.js +++ b/components/lib/theme/aura/global.js @@ -129,8 +129,8 @@ export default { } .p-component { - font-family: var(--font-family); - font-feature-settings: var(--font-feature-settings, normal); + font-family: var(--p-font-family); + font-feature-settings: var(--p-font-feature-settings, normal); font-size: 1rem; font-weight: normal; } @@ -163,8 +163,8 @@ export default { } .p-link { - font-family: var(--font-family); - font-feature-settings: var(--font-feature-settings, normal); + font-family: var(--p-font-family); + font-feature-settings: var(--p-font-feature-settings, normal); font-size: 1rem; border-radius: 6px; outline-color: transparent; diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 4c017906b..60952b3df 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -2,23 +2,30 @@ import accordion from 'primevue/theme/aura/accordion'; import avatar from 'primevue/theme/aura/avatar'; import badge from 'primevue/theme/aura/badge'; import blockui from 'primevue/theme/aura/blockui'; +import breadcrumb from 'primevue/theme/aura/breadcrumb'; import card from 'primevue/theme/aura/card'; import carousel from 'primevue/theme/aura/carousel'; import chip from 'primevue/theme/aura/chip'; import confirmdialog from 'primevue/theme/aura/confirmdialog'; import confirmpopup from 'primevue/theme/aura/confirmpopup'; +import contextmenu from 'primevue/theme/aura/contextmenu'; import dialog from 'primevue/theme/aura/dialog'; import divider from 'primevue/theme/aura/divider'; +import dock from 'primevue/theme/aura/dock'; import fieldset from 'primevue/theme/aura/fieldset'; import galleria from 'primevue/theme/aura/galleria'; import global from 'primevue/theme/aura/global'; import image from 'primevue/theme/aura/image'; import inlinemessage from 'primevue/theme/aura/inlinemessage'; import inplace from 'primevue/theme/aura/inplace'; +import megamenu from 'primevue/theme/aura/megamenu'; +import menu from 'primevue/theme/aura/menu'; +import menubar from 'primevue/theme/aura/menubar'; import message from 'primevue/theme/aura/message'; import metergroup from 'primevue/theme/aura/metergroup'; import overlaypanel from 'primevue/theme/aura/overlaypanel'; import panel from 'primevue/theme/aura/panel'; +import panelmenu from 'primevue/theme/aura/panelmenu'; import progressbar from 'primevue/theme/aura/progressbar'; import progressspinner from 'primevue/theme/aura/progressspinner'; import scrollpanel from 'primevue/theme/aura/scrollpanel'; @@ -26,9 +33,12 @@ import scrolltop from 'primevue/theme/aura/scrolltop'; import sidebar from 'primevue/theme/aura/sidebar'; import skeleton from 'primevue/theme/aura/skeleton'; import splitter from 'primevue/theme/aura/splitter'; +import steps from 'primevue/theme/aura/steps'; +import tabmenu from 'primevue/theme/aura/tabmenu'; import tabview from 'primevue/theme/aura/tabview'; import tag from 'primevue/theme/aura/tag'; import terminal from 'primevue/theme/aura/terminal'; +import tieredmenu from 'primevue/theme/aura/tieredmenu'; import toast from 'primevue/theme/aura/toast'; import toolbar from 'primevue/theme/aura/toolbar'; import tooltip from 'primevue/theme/aura/tooltip'; @@ -147,15 +157,21 @@ export default { avatar, badge, blockui, + breadcrumb, card, carousel, chip, confirmdialog, confirmpopup, + contextmenu, dialog, divider, + dock, fieldset, galleria, + megamenu, + menu, + menubar, message, metergroup, image, @@ -163,6 +179,7 @@ export default { inplace, overlaypanel, panel, + panelmenu, progressbar, progressspinner, scrollpanel, @@ -170,7 +187,10 @@ export default { skeleton, sidebar, splitter, + steps, + tabmenu, tabview, + tieredmenu, tag, terminal, toast, diff --git a/components/lib/theme/aura/megamenu/index.js b/components/lib/theme/aura/megamenu/index.js new file mode 100644 index 000000000..024b6b227 --- /dev/null +++ b/components/lib/theme/aura/megamenu/index.js @@ -0,0 +1,11 @@ +export default { + variables: { + colorScheme: { + light: {}, + dark: {}, + }, + }, + css: ` + +`, +}; diff --git a/components/lib/theme/aura/megamenu/package.json b/components/lib/theme/aura/megamenu/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/megamenu/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/theme/aura/menu/index.js b/components/lib/theme/aura/menu/index.js new file mode 100644 index 000000000..956ce2c11 --- /dev/null +++ b/components/lib/theme/aura/menu/index.js @@ -0,0 +1,144 @@ +export default { + variables: { + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + item: { + backgroundFocus: '{surface.100}', + text: { + color: '{surface.700}', + colorFocus: '{surface.800}' + }, + icon: { + color: '{surface.400}', + colorFocus: '{surface.500}' + } + }, + submenuHeader: { + textColor: '{surface.400}' + }, + separator: { + borderColor: '{surface.200}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + item: { + backgroundFocus: '{surface.800}', + text: { + color: '{surface.0}', + colorFocus: '{surface.0}' + }, + icon: { + color: '{surface.500}', + colorFocus: '{surface.400}' + } + }, + submenuHeader: { + textColor: '{surface.500}' + }, + separator: { + borderColor: '{surface.700}' + } + } + } + }, + css: ` +.p-menu { + padding: 0.25rem 0.25rem; + background: var(--p-menu-background); + color: var(--p-menu-text-color); + border: 1px solid var(--p-menu-border-color); + border-radius: var(--p-rounded-base); + min-width: 12.5rem; +} + +.p-menu ul { + margin: 0; + padding: 0; + list-style: none; +} + +.p-menu .p-menuitem { + margin: 2px 0; +} + +.p-menu .p-menuitem:first-child { + margin-top: 0; +} + +.p-menu .p-menuitem:last-child { + margin-bottom: 0; +} + +.p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + color: inherit; + padding: 0.5rem 0.75rem; + user-select: none; +} + +.p-menu .p-menuitem-text { + line-height: 1; +} + +.p-menu .p-menuitem-content { + transition: background-color var(--p-transition-duration), color var(--p-transition-duration); + border-radius: var(--p-rounded-sm); + color: var(--p-menu-item-text-color); +} + +.p-menu .p-menuitem-icon { + color: var(--p-menu-item-icon-color); + margin-right: 0.5rem; +} + +.p-menu .p-menuitem.p-focus .p-menuitem-content { + color: var(--p-menu-item-text-color-focus); + background: var(--p-menu-item-background-focus); +} + +.p-menu .p-menuitem.p-focus .p-menuitem-icon { + color: var(--p-menu-item-icon-color-focus); +} + +.p-menu .p-menuitem:not(.p-disabled) .p-menuitem-content:hover { + color: var(--p-menu-item-text-color-focus); + background: var(--p-menu-item-background-focus); +} + +.p-menu .p-menuitem:not(.p-disabled) .p-menuitem-content:hover .p-menuitem-icon, +.p-menu .p-menuitem:not(.p-disabled) .p-menuitem-content:hover .p-submenu-icon { + color: var(--p-menu-item-icon-color-focus); +} + +.p-menu.p-menu-overlay { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-menu .p-submenu-header { + margin: 0; + padding: 0.5rem 0.75rem; + color: var(--p-menu-submenu-header-text-color); + font-weight: 600; +} + +.p-menu .p-menuitem-separator { + border-top: 1px solid var(--p-menu-separator-border-color); + margin: 2px 0; +} +` +}; diff --git a/components/lib/theme/aura/menu/package.json b/components/lib/theme/aura/menu/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/menu/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/theme/aura/menubar/index.js b/components/lib/theme/aura/menubar/index.js new file mode 100644 index 000000000..95cf92ba7 --- /dev/null +++ b/components/lib/theme/aura/menubar/index.js @@ -0,0 +1,298 @@ +export default { + variables: { + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + item: { + backgroundFocus: '{surface.100}', + text: { + color: '{surface.700}', + colorFocus: '{surface.800}' + }, + icon: { + color: '{surface.400}', + colorFocus: '{surface.500}' + } + }, + separator: { + borderColor: '{surface.200}' + }, + toggleIcon: { + color: '{surface.500}', + colorHover: '{surface.600}', + backgroundHover: '{surface.100}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + item: { + backgroundFocus: '{surface.800}', + text: { + color: '{surface.0}', + colorFocus: '{surface.0}' + }, + icon: { + color: '{surface.500}', + colorFocus: '{surface.400}' + } + }, + separator: { + borderColor: '{surface.700}' + }, + toggleIcon: { + color: '{surface.400}', + colorHover: '{surface.300}', + backgroundHover: '{surface.800}' + } + } + } + }, + css: ` +.p-menubar { + display: flex; + align-items: center; + padding: 0.5rem 0.5rem; + background: var(--p-menubar-background); + color: var(--p-menubar-text-color); + border: 1px solid var(--p-menubar-border-color); + border-radius: var(--p-rounded-base); +} + +.p-menubar ul { + margin: 0; + padding: 0; + list-style: none; +} + +.p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + color: inherit; + padding: 0.5rem 0.75rem; + user-select: none; +} + +.p-menubar .p-menuitem-text { + line-height: 1; +} + +.p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + outline: 0 none; +} + +.p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; +} + +.p-menubar .p-menuitem-content { + transition: background-color var(--p-transition-duration), color var(--p-transition-duration); + border-radius: var(--p-rounded-sm); + color: var(--p-menubar-item-text-color); +} + +.p-menubar .p-menuitem-icon { + color: var(--p-menubar-item-icon-color); + margin-right: 0.5rem; +} + +.p-menubar .p-menuitem.p-focus > .p-menuitem-content { + color: var(--p-menubar-item-text-color-focus); + background: var(--p-menubar-item-background-focus); +} + +.p-menubar .p-menuitem.p-focus > .p-menuitem-content .p-menuitem-icon, +.p-menubar .p-menuitem.p-focus > .p-menuitem-content .p-submenu-icon { + color: var(--p-menubar-item-icon-color-focus); +} + +.p-menubar .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover { + color: var(--p-menubar-item-text-color-focus); + background: var(--p-menubar-item-background-focus); +} + +.p-menubar .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon, +.p-menubar .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon { + color: var(--p-menubar-item-icon-color-focus); +} + +.p-menubar .p-menuitem-active > .p-menuitem-content { + color: var(--p-menubar-item-text-color-focus); + background: var(--p-menubar-item-background-focus); +} + +.p-menubar .p-menuitem-active > .p-menuitem-content .p-menuitem-icon, +.p-menubar .p-menuitem-active > .p-menuitem-content .p-submenu-icon { + color: var(--p-menubar-item-icon-color-focus); +} + +.p-menubar .p-submenu-icon { + color: var(--p-menubar-item-icon-color); + margin-left: auto; + font-size: 0.875rem; + width: 0.875rem; + height: 0.875rem; +} + +.p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-submenu-icon { + margin-left: 0.5rem; +} + +.p-menubar .p-submenu-list { + display: none; + position: absolute; + min-width: 12.5rem; + z-index: 1; + padding: 0.25rem 0.25rem; + background: var(--p-menubar-background); + color: var(--p-menubar-text-color); + border: 1px solid var(--p-menubar-border-color); + border-radius: var(--p-rounded-base); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-menubar .p-submenu-list .p-menuitem-separator { + border-top: 1px solid var(--p-menubar-separator-border-color); + margin: 2px 0; +} + +.p-menubar .p-submenu-list .p-menuitem { + position: relative; + margin: 2px 0; +} + +.p-menubar .p-submenu-list .p-menuitem:first-child { + margin-top: 0; +} + +.p-menubar .p-submenu-list .p-menuitem:last-child { + margin-bottom: 0; +} + +.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; +} + +.p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; +} + +.p-menubar-button { + display: none; + justify-content: center; + align-items: center; + cursor: pointer; + width: 1.75rem; + height: 1.75rem; + position: relative; + color: var(--p-menubar-toggle-icon-color); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration); + outline-color: transparent; +} + +.p-menubar-button:hover { + color: var(--p-menubar-toggle-icon-color-hover); + background: var(--p-menubar-toggle-icon-background-hover); +} + +.p-menubar-button:focus-visible { + outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color); + outline-offset: var(--p-focus-ring-offset); +} + +.p-menubar-mobile { + position: relative; +} + +.p-menubar-mobile .p-menubar-button { + display: flex; +} + +.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + padding: 0.25rem 0.25rem; + background: var(--p-menubar-background); + border: 1px solid var(--p-menubar-border-color); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; +} + +.p-menubar-mobile .p-menubar-root-list .p-menuitem { + width: 100%; + position: static; +} + +.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; +} + +.p-menubar-mobile .p-menubar-root-list > .p-menuitem { + position: relative; + margin: 2px 0; +} + +.p-menubar-mobile .p-menubar-root-list > .p-menuitem:first-child { + margin-top: 0; +} + +.p-menubar-mobile .p-menubar-root-list > .p-menuitem:last-child { + margin-bottom: 0; +} + +.p-menubar-mobile .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-submenu-icon { + margin-left: auto; + transition: transform 0.2s; +} + +.p-menubar-mobile .p-menubar-root-list > .p-menuitem-active > .p-menuitem-content .p-submenu-icon { + transform: rotate(-180deg); +} + +.p-menubar-mobile .p-submenu-list .p-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); +} + +.p-menubar-mobile .p-menuitem-active > .p-menuitem-content .p-submenu-icon { + transform: rotate(-90deg); +} + +.p-menubar-mobile .p-submenu-list { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + padding-left: 1rem; +} +` +}; diff --git a/components/lib/theme/aura/menubar/package.json b/components/lib/theme/aura/menubar/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/menubar/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/theme/aura/panelmenu/index.js b/components/lib/theme/aura/panelmenu/index.js new file mode 100644 index 000000000..024b6b227 --- /dev/null +++ b/components/lib/theme/aura/panelmenu/index.js @@ -0,0 +1,11 @@ +export default { + variables: { + colorScheme: { + light: {}, + dark: {}, + }, + }, + css: ` + +`, +}; diff --git a/components/lib/theme/aura/panelmenu/package.json b/components/lib/theme/aura/panelmenu/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/panelmenu/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/theme/aura/steps/index.js b/components/lib/theme/aura/steps/index.js new file mode 100644 index 000000000..024b6b227 --- /dev/null +++ b/components/lib/theme/aura/steps/index.js @@ -0,0 +1,11 @@ +export default { + variables: { + colorScheme: { + light: {}, + dark: {}, + }, + }, + css: ` + +`, +}; diff --git a/components/lib/theme/aura/steps/package.json b/components/lib/theme/aura/steps/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/steps/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/theme/aura/tabmenu/index.js b/components/lib/theme/aura/tabmenu/index.js new file mode 100644 index 000000000..024b6b227 --- /dev/null +++ b/components/lib/theme/aura/tabmenu/index.js @@ -0,0 +1,11 @@ +export default { + variables: { + colorScheme: { + light: {}, + dark: {}, + }, + }, + css: ` + +`, +}; diff --git a/components/lib/theme/aura/tabmenu/package.json b/components/lib/theme/aura/tabmenu/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/tabmenu/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/theme/aura/tieredmenu/index.js b/components/lib/theme/aura/tieredmenu/index.js new file mode 100644 index 000000000..459998e91 --- /dev/null +++ b/components/lib/theme/aura/tieredmenu/index.js @@ -0,0 +1,175 @@ +export default { + variables: { + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + item: { + backgroundFocus: '{surface.100}', + text: { + color: '{surface.700}', + colorFocus: '{surface.800}' + }, + icon: { + color: '{surface.400}', + colorFocus: '{surface.500}' + } + }, + separator: { + borderColor: '{surface.200}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + item: { + backgroundFocus: '{surface.800}', + text: { + color: '{surface.0}', + colorFocus: '{surface.0}' + }, + icon: { + color: '{surface.500}', + colorFocus: '{surface.400}' + } + }, + separator: { + borderColor: '{surface.700}' + } + } + } + }, + css: ` +.p-tieredmenu { + padding: 0.25rem 0.25rem; + background: var(--p-tieredmenu-background); + color: var(--p-tieredmenu-text-color); + border: 1px solid var(--p-tieredmenu-border-color); + border-radius: var(--p-rounded-base); + min-width: 12.5rem; +} + +.p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; +} + +.p-tieredmenu-root-list { + outline: 0 none; +} + +.p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + padding: 0.25rem 0.25rem; + background: var(--p-tieredmenu-background); + color: var(--p-tieredmenu-text-color); + border: 1px solid var(--p-tieredmenu-border-color); + border-radius: var(--p-rounded-base); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + color: inherit; + padding: 0.5rem 0.75rem; + user-select: none; +} + +.p-tieredmenu .p-menuitem-text { + line-height: 1; +} + +.p-tieredmenu .p-menuitem { + position: relative; + margin: 2px 0; +} + +.p-tieredmenu .p-menuitem:first-child { + margin-top: 0; +} +.p-tieredmenu .p-menuitem:last-child { + margin-bottom: 0; +} + +.p-tieredmenu .p-menuitem-content { + transition: background-color var(--p-transition-duration), color var(--p-transition-duration); + border-radius: var(--p-rounded-sm); + color: var(--p-tieredmenu-item-text-color); +} + +.p-tieredmenu .p-menuitem-icon { + color: var(--p-tieredmenu-item-icon-color); + margin-right: 0.5rem; +} + +.p-tieredmenu .p-submenu-icon { + color: var(--p-tieredmenu-item-icon-color); + margin-left: auto; + font-size: 0.875rem; + width: 0.875rem; + height: 0.875rem; +} + +.p-tieredmenu .p-menuitem.p-focus > .p-menuitem-content { + color: var(--p-tieredmenu-item-text-color-focus); + background: var(--p-tieredmenu-item-background-focus); +} + +.p-tieredmenu .p-menuitem.p-focus > .p-menuitem-content .p-menuitem-icon, +.p-tieredmenu .p-menuitem.p-focus > .p-menuitem-content .p-submenu-icon { + color: var(--p-tieredmenu-item-icon-color-focus); +} + +.p-tieredmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover { + color: var(--p-tieredmenu-item-text-color-focus); + background: var(--p-tieredmenu-item-background-focus); +} + +.p-tieredmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon, +.p-tieredmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon { + color: var(--p-tieredmenu-item-icon-color-focus); +} + +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content { + color: var(--p-tieredmenu-item-text-color-focus); + background: var(--p-tieredmenu-item-background-focus); +} + +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-icon, +.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-submenu-icon { + color: var(--p-tieredmenu-item-icon-color-focus); +} + +.p-tieredmenu .p-menuitem-separator { + border-top: 1px solid var(--p-tieredmenu-separator-border-color); + margin: 2px 0; +} + +.p-tieredmenu.p-tieredmenu-overlay { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; +} + +.p-tieredmenu-enter-active { + transition: opacity 250ms; +} +` +}; diff --git a/components/lib/theme/aura/tieredmenu/package.json b/components/lib/theme/aura/tieredmenu/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/tieredmenu/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +}