diff --git a/components/lib/theme/aura/chip/index.js b/components/lib/theme/aura/chip/index.js new file mode 100644 index 000000000..dee1911c2 --- /dev/null +++ b/components/lib/theme/aura/chip/index.js @@ -0,0 +1,63 @@ +export default { + variables: { + colorScheme: { + light: { + root: { + background: '{surface.100}', + textColor: '{surface.800}' + } + }, + dark: { + root: { + background: '{surface.700}', + textColor: '{surface.0}' + } + } + } + }, + css: ` +.p-chip { + display: inline-flex; + align-items: center; + background-color: var(--p-chip-background); + color: var(--p-chip-text-color); + border-radius: 16px; + padding: 0.25rem 0.75rem; +} + +.p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; + } + +.p-chip-text { + line-height: 1.5; +} + +.p-chip-icon { + line-height: 1.5; + margin-right: 0.5rem; +} + +.p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + margin-left: 0.375rem; + border-radius: 6px; + transition: outline-color var(--p-transition-duration); + outline-color: transparent; +} + +.p-chip img { + border-radius: 50%; + width: 2rem; + height: 2rem; + margin-left: -0.5rem; + margin-right: 0.5rem; +} + +.p-chip-remove-icon: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); +} + ` +}; diff --git a/components/lib/theme/aura/chip/package.json b/components/lib/theme/aura/chip/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/chip/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/index.js b/components/lib/theme/aura/index.js index d0fb5f506..e218cc20e 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -3,6 +3,7 @@ import avatar from 'primevue/theme/aura/avatar'; import badge from 'primevue/theme/aura/badge'; import blockui from 'primevue/theme/aura/blockui'; import card from 'primevue/theme/aura/card'; +import chip from 'primevue/theme/aura/chip'; import divider from 'primevue/theme/aura/divider'; import fieldset from 'primevue/theme/aura/fieldset'; import global from 'primevue/theme/aura/global'; @@ -126,6 +127,7 @@ export default { badge, blockui, card, + chip, divider, fieldset, panel,