From 18e43e1be843e3f5f6b9d3a62e7d28c6c37578f5 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 13 Feb 2024 23:35:56 +0300 Subject: [PATCH] Migrated inline message --- components/lib/theme/aura/index.js | 6 + .../lib/theme/aura/inlinemessage/index.js | 174 ++++++++++++++++++ .../lib/theme/aura/inlinemessage/package.json | 6 + components/lib/theme/aura/message/index.js | 11 ++ .../lib/theme/aura/message/package.json | 6 + components/lib/theme/aura/toast/index.js | 11 ++ components/lib/theme/aura/toast/package.json | 6 + 7 files changed, 220 insertions(+) create mode 100644 components/lib/theme/aura/inlinemessage/index.js create mode 100644 components/lib/theme/aura/inlinemessage/package.json create mode 100644 components/lib/theme/aura/message/index.js create mode 100644 components/lib/theme/aura/message/package.json create mode 100644 components/lib/theme/aura/toast/index.js create mode 100644 components/lib/theme/aura/toast/package.json diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index c6ce0e0cf..86277784e 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -10,7 +10,9 @@ import dialog from 'primevue/theme/aura/dialog'; import divider from 'primevue/theme/aura/divider'; import fieldset from 'primevue/theme/aura/fieldset'; import global from 'primevue/theme/aura/global'; +import inlinemessage from 'primevue/theme/aura/inlinemessage'; import inplace from 'primevue/theme/aura/inplace'; +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'; @@ -24,6 +26,7 @@ import splitter from 'primevue/theme/aura/splitter'; import tabview from 'primevue/theme/aura/tabview'; import tag from 'primevue/theme/aura/tag'; import terminal from 'primevue/theme/aura/terminal'; +import toast from 'primevue/theme/aura/toast'; import toolbar from 'primevue/theme/aura/toolbar'; import tooltip from 'primevue/theme/aura/tooltip'; @@ -148,7 +151,9 @@ export default { dialog, divider, fieldset, + message, metergroup, + inlinemessage, inplace, overlaypanel, panel, @@ -162,6 +167,7 @@ export default { tabview, tag, terminal, + toast, toolbar }, directives: { diff --git a/components/lib/theme/aura/inlinemessage/index.js b/components/lib/theme/aura/inlinemessage/index.js new file mode 100644 index 000000000..7a8a2d6cd --- /dev/null +++ b/components/lib/theme/aura/inlinemessage/index.js @@ -0,0 +1,174 @@ +export default { + variables: { + colorScheme: { + light: { + info: { + background: 'color-mix(in srgb, {blue.50}, transparent 5%)', + borderColor: '{blue.200}', + textColor: '{blue.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)' + }, + success: { + background: 'color-mix(in srgb, {green.50}, transparent 5%)', + borderColor: '{green.200}', + textColor: '{green.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)' + }, + warn: { + background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', + borderColor: '{yellow.200}', + textColor: '{yellow.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)' + }, + error: { + background: 'color-mix(in srgb, {red.50}, transparent 5%)', + borderColor: '{red.200}', + textColor: '{red.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)' + }, + secondary: { + background: 'color-mix(in srgb, {surface.100}, transparent 5%)', + borderColor: '{surface.200}', + textColor: '{surface.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)' + }, + contrast: { + background: 'color-mix(in srgb, {surface.900}, transparent 5%)', + borderColor: '{surface.950}', + textColor: '{surface.50}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)' + } + }, + dark: { + info: { + background: 'color-mix(in srgb, {blue.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', + textColor: '{blue.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)' + }, + success: { + background: 'color-mix(in srgb, {green.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', + textColor: '{green.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)' + }, + warn: { + background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', + textColor: '{yellow.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)' + }, + error: { + background: 'color-mix(in srgb, {red.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', + textColor: '{red.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)' + }, + secondary: { + background: 'color-mix(in srgb, {surface.800}, transparent 5%)', + borderColor: '{surface.700}', + textColor: '{surface.300}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)' + }, + contrast: { + background: 'color-mix(in srgb, {surface.0}, transparent 5%)', + borderColor: '{surface.100}', + textColor: '{surface.950}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)' + } + } + } + }, + css: ` +.p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: var(--p-rounded-base); +} + +.p-inline-message-text { + font-weight: 500; +} + +.p-inline-message-icon { + flex-shrink: 0; + margin-right: 0.5rem; +} + +.p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; +} + +.p-fluid .p-inline-message { + display: flex; +} + +.p-inline-message-info { + background: var(--p-inlinemessage-info-background); + border: 1px solid var(--p-inlinemessage-info-border-color); + color: var(--p-inlinemessage-info-text-color); + box-shadow: var(--p-inlinemessage-info-box-shadow); +} +.p-inline-message-info .p-inline-message-icon { + color: var(--p-inlinemessage-info-text-color); +} + +.p-inline-message-success { + background: var(--p-inlinemessage-success-background); + border: 1px solid var(--p-inlinemessage-success-border-color); + color: var(--p-inlinemessage-success-text-color); + box-shadow: var(--p-inlinemessage-success-box-shadow); +} +.p-inline-message-success .p-inline-message-icon { + color: var(--p-inlinemessage-success-text-color); +} + +.p-inline-message-warn { + background: var(--p-inlinemessage-warn-background); + border: 1px solid var(--p-inlinemessage-warn-border-color); + color: var(--p-inlinemessage-warn-text-color); + box-shadow: var(--p-inlinemessage-warn-box-shadow); +} +.p-inline-message-warn .p-inline-message-icon { + color: var(--p-inlinemessage-warn-text-color); +} + +.p-inline-message-error { + background: var(--p-inlinemessage-error-background); + border: 1px solid var(--p-inlinemessage-error-border-color); + color: var(--p-inlinemessage-error-text-color); + box-shadow: var(--p-inlinemessage-error-box-shadow); +} +.p-inline-message-error .p-inline-message-icon { + color: var(--p-inlinemessage-error-text-color); +} + +.p-inline-message-secondary { + background: var(--p-inlinemessage-secondary-background); + border: 1px solid var(--p-inlinemessage-secondary-border-color); + color: var(--p-inlinemessage-secondary-text-color); + box-shadow: var(--p-inlinemessage-secondary-box-shadow); +} +.p-inline-message-secondary .p-inline-message-icon { + color: var(--p-inlinemessage-secondary-text-color); +} + +.p-inline-message-contrast { + background: var(--p-inlinemessage-contrast-background); + border: 1px solid var(--p-inlinemessage-contrast-border-color); + color: var(--p-inlinemessage-contrast-text-color); + box-shadow: var(--p-inlinemessage-contrast-box-shadow); +} +.p-inline-message-contrast .p-inline-message-icon { + color: var(--p-inlinemessage-contrast-text-color); +} + +.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; +} +` +}; diff --git a/components/lib/theme/aura/inlinemessage/package.json b/components/lib/theme/aura/inlinemessage/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/inlinemessage/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/message/index.js b/components/lib/theme/aura/message/index.js new file mode 100644 index 000000000..024b6b227 --- /dev/null +++ b/components/lib/theme/aura/message/index.js @@ -0,0 +1,11 @@ +export default { + variables: { + colorScheme: { + light: {}, + dark: {}, + }, + }, + css: ` + +`, +}; diff --git a/components/lib/theme/aura/message/package.json b/components/lib/theme/aura/message/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/message/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/toast/index.js b/components/lib/theme/aura/toast/index.js new file mode 100644 index 000000000..024b6b227 --- /dev/null +++ b/components/lib/theme/aura/toast/index.js @@ -0,0 +1,11 @@ +export default { + variables: { + colorScheme: { + light: {}, + dark: {}, + }, + }, + css: ` + +`, +}; diff --git a/components/lib/theme/aura/toast/package.json b/components/lib/theme/aura/toast/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/toast/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +}