Migrated tag and terminal

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);
+    background: var(--p-badge-primary-background);
-    color: var(--p-primary-inverse-color);
+    color: var(--p-badge-primary-text-color);
     font-size: 0.75rem;
     font-weight: 700;
     min-width: 1.5rem;

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
     }
 };

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);
+}    
+`
+};

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"
+}

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;
+}   
+`
+};

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"
+}