diff --git a/components/lib/theme/aura/badge/index.js b/components/lib/theme/aura/badge/index.js index 9a65bbbbd..85249d8a9 100644 --- a/components/lib/theme/aura/badge/index.js +++ b/components/lib/theme/aura/badge/index.js @@ -2,6 +2,10 @@ export default { variables: { colorScheme: { light: { + primary: { + background: '{primary.color}', + textColor: '{primary.inverseColor}' + }, secondary: { background: '{surface.100}', textColor: '{surface.600}' @@ -28,6 +32,10 @@ export default { } }, dark: { + primary: { + background: '{primary.color}', + textColor: '{primary.inverseColor}' + }, secondary: { background: '{surface.800}', textColor: '{surface.300}' @@ -61,8 +69,8 @@ export default { border-radius: 10px; justify-content: center; padding: 0 0.5rem; - background: var(--p-primary-color); - color: var(--p-primary-inverse-color); + background: var(--p-badge-primary-background); + color: var(--p-badge-primary-text-color); font-size: 0.75rem; font-weight: 700; min-width: 1.5rem; diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 937ab2f88..589885846 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -17,6 +17,8 @@ import scrolltop from 'primevue/theme/aura/scrolltop'; import skeleton from 'primevue/theme/aura/skeleton'; 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 toolbar from 'primevue/theme/aura/toolbar'; export default { @@ -146,6 +148,8 @@ export default { skeleton, splitter, tabview, + tag, + terminal, toolbar } }; diff --git a/components/lib/theme/aura/tag/index.js b/components/lib/theme/aura/tag/index.js new file mode 100644 index 000000000..71f508650 --- /dev/null +++ b/components/lib/theme/aura/tag/index.js @@ -0,0 +1,120 @@ +export default { + variables: { + colorScheme: { + light: { + primary: { + background: '{primary.100}', + textColor: '{primary.700}' + }, + secondary: { + background: '{surface.100}', + textColor: '{surface.600}' + }, + success: { + background: '{green.100}', + textColor: '{green.700}' + }, + info: { + background: '{sky.100}', + textColor: '{sky.700}' + }, + warn: { + background: '{orange.100}', + textColor: '{orange.700}' + }, + danger: { + background: '{red.100}', + textColor: '{red.700}' + }, + contrast: { + background: '{surface.950}', + textColor: '{surface.0}' + } + }, + dark: { + primary: { + background: 'color-mix(in srgb, var(--p-primary-500), transparent 84%)', + textColor: '{primary.300}' + }, + secondary: { + background: '{surface.800}', + textColor: '{surface.300}' + }, + success: { + background: 'color-mix(in srgb, var(--p-green-500), transparent 84%)', + textColor: '{green.500}' + }, + info: { + background: 'color-mix(in srgb, var(--p-blue-500), transparent 84%)', + textColor: '{blue.500}' + }, + warn: { + background: 'color-mix(in srgb, var(--p-yellow-500), transparent 84%)', + textColor: '{yellow.500}' + }, + danger: { + background: 'color-mix(in srgb, var(--p-red-500), transparent 84%)', + textColor: '{red.500}' + }, + contrast: { + background: '{surface.0}', + textColor: '{surface.950}' + } + } + } + }, + css: ` +.p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--p-tag-primary-background); + color: var(--p-tag-primary-text-color); + font-size: 0.75rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: 6px; + gap: 0.25rem; +} + +.p-tag-icon { + font-size: 0.75rem; + width: 0.75rem; + height: 0.75rem; +} + +.p-tag-rounded { + border-radius: 10rem; +} + +.p-tag-success { + background-color: var(--p-tag-success-background); + color: var(--p-tag-success-text-color); +} + +.p-tag-info { + background-color: var(--p-tag-info-background); + color: var(--p-tag-info-text-color); +} + +.p-tag-warning { + background-color: var(--p-tag-warn-background); + color: var(--p-tag-warn-text-color); +} + +.p-tag-danger { + background-color: var(--p-tag-danger-background); + color: var(--p-tag-danger-text-color); +} + +.p-tag-secondary { + background-color: var(--p-tag-secondary-background); + color: var(--p-tag-secondary-text-color); +} + +.p-tag-contrast { + background-color: var(--p-tag-contrast-background); + color: var(--p-tag-contrast-text-color); +} +` +}; diff --git a/components/lib/theme/aura/tag/package.json b/components/lib/theme/aura/tag/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/tag/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/terminal/index.js b/components/lib/theme/aura/terminal/index.js new file mode 100644 index 000000000..27e12735a --- /dev/null +++ b/components/lib/theme/aura/terminal/index.js @@ -0,0 +1,56 @@ +export default { + variables: { + colorScheme: { + light: { + background: '{surface.0}', + borderColor: '{surface.300}', + textColor: '{surface.700}' + }, + dark: { + background: '{surface.950}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + } + } + }, + css: ` +.p-terminal { + height: 18rem; + overflow: auto; + background: var(--p-terminal-background); + color: var(--p-terminal-text-color); + border: 1px solid var(--p-terminal-border-color); + padding: 0.5rem 0.75rem; + border-radius: var(--p-rounded-base); +} + +.p-terminal-prompt-container { + display: flex; + align-items: center; +} + +.p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + font-family: inherit; + font-feature-settings: inherit; + font-size: 1rem; +} + +.p-terminal-prompt { + margin-right: 0.25rem; +} + +.p-terminal-input::-ms-clear { + display: none; +} + +.p-terminal-response { + margin: 2px 0; +} +` +}; diff --git a/components/lib/theme/aura/terminal/package.json b/components/lib/theme/aura/terminal/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/terminal/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +}