Migrated Misc category

components/lib/themes/primeone/base/avatar/index.js

@@ -7,7 +7,7 @@ export default {
     width: 2rem;
     height: 2rem;
     font-size: 1rem;
-    background: var(--p-avatar-background);
+    background: ${dt('avatar.background')};
     border-radius: ${dt('rounded.base')};
 }
 
@@ -62,7 +62,7 @@ export default {
 }
 
 .p-avatar-group .p-avatar {
-    border: 2px solid var(--p-avatar-border-color);
+    border: 2px solid ${dt('avatar.grouped.border.color')};
 }
     `
 };

components/lib/themes/primeone/base/badge/index.js

@@ -5,8 +5,8 @@ export default {
     border-radius: 10px;
     justify-content: center;
     padding: 0 0.5rem;
-    background: var(--p-badge-primary-background);
+    background: ${dt('badge.primary.background')};
-    color: var(--p-badge-primary-text-color);
+    color: ${dt('badge.primary.color')};
     font-size: 0.75rem;
     font-weight: 700;
     min-width: 1.5rem;
@@ -41,33 +41,33 @@ export default {
 }
 
 .p-badge-secondary {
-    background-color: var(--p-badge-secondary-background);
+    background: ${dt('badge.secondary.background')};
-    color: var(--p-badge-secondary-text-color);
+    color: ${dt('badge.secondary.color')};
 }
 
 .p-badge-success {
-    background-color: var(--p-badge-success-background);
+    background: ${dt('badge.success.background')};
-    color: var(--p-badge-success-text-color);
+    color: ${dt('badge.success.color')};
 }
 
 .p-badge-info {
-    background-color: var(--p-badge-info-background);
+    background: ${dt('badge.info.background')};
-    color: var(--p-badge-info-text-color);
+    color: ${dt('badge.info.color')};
 }
 
 .p-badge-warning {
-    background-color: var(--p-badge-warn-background);
+    background: ${dt('badge.warn.background')};
-    color: var(--p-badge-warn-text-color);
+    color: ${dt('badge.warn.color')};
 }
 
 .p-badge-danger {
-    background-color: var(--p-badge-danger-background);
+    background: ${dt('badge.danger.background')};
-    color: var(--p-badge-danger-text-color);
+    color: ${dt('badge.danger.color')};
 }
 
 .p-badge-contrast {
-    background-color: var(--p-badge-contrast-background);
+    background: ${dt('badge.contrast.background')};
-    color: var(--p-badge-contrast-text-color);
+    color: ${dt('badge.contrast.color')};
 }
 
 .p-badge-lg {

components/lib/themes/primeone/base/chip/index.js

@@ -3,8 +3,8 @@ export default {
 .p-chip {
     display: inline-flex;
     align-items: center;
-    background-color: var(--p-chip-background);
+    background: ${dt('chip.background')};
-    color: var(--p-chip-text-color);
+    color: ${dt('chip.color')};
     border-radius: 16px;
     padding: 0.25rem 0.75rem;
 }

components/lib/themes/primeone/base/inplace/index.js

@@ -26,8 +26,8 @@ export default {
 }
 
 .p-inplace-display:not(.p-disabled):hover {
-    background: var(--p-inplace-display-background-hover);
+    background: ${dt('inplace.hover.background')};
-    color: var(--p-inplace-display-text-color-hover);
+    color: ${dt('inplace.hover.color')};
 }
 
 .p-inplace-display:focus-visible {

components/lib/themes/primeone/base/metergroup/index.js

@@ -7,13 +7,12 @@ export default {
 
 .p-metergroup-meters {
     display: flex;
-    background: var(--p-metergroup-meters-background);
+    background: ${dt('metergroup.meters.background.color')};
     border-radius: ${dt('rounded.base')};
 }
 
 .p-metergroup-meter {
     border: 0 none;
-    background: var(--p-primary-color);
 }
 
 .p-metergroup-labels {
@@ -32,7 +31,6 @@ export default {
 
 .p-metergroup-label-marker {
     display: inline-flex;
-    background: var(--p-primary-color);
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 100%;

components/lib/themes/primeone/base/progressbar/index.js

@@ -5,18 +5,18 @@ export default {
     overflow: hidden;
     border: 0 none;
     height: 1.25rem;
-    background: var(--p-progressbar-background);
+    background: ${dt('progressbar.background')};
     border-radius: ${dt('rounded.base')};
 }
 
 .p-progressbar-value {
     border: 0 none;
     margin: 0;
-    background: var(--p-primary-color);
+    background: ${dt('progressbar.value.background')};
 }
 
 .p-progressbar-label {
-    color: var(--p-primary-inverse-color);
+    color: ${dt('progressbar.label.color')};
     line-height: 1.25rem;
     font-size: .75rem;
     font-weight: 600;

components/lib/themes/primeone/base/progressspinner/index.js

@@ -30,7 +30,7 @@ export default {
 .p-progress-spinner-circle {
     stroke-dasharray: 89, 200;
     stroke-dashoffset: 0;
-    stroke: var(--p-progressspinner-color-1);
+    stroke: ${dt('progressspinner.color-1')};
     animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
     stroke-linecap: round;
 }
@@ -57,17 +57,17 @@ export default {
 @keyframes p-progress-spinner-color {
     100%,
     0% {
-        stroke: var(--p-progressspinner-color-1);
+        stroke: ${dt('progressspinner.color-1')};
     }
     40% {
-        stroke: var(--p-progressspinner-color-2);
+        stroke: ${dt('progressspinner.color-2')};
     }
     66% {
-        stroke: var(--p-progressspinner-color-3);
+        stroke: ${dt('progressspinner.color-3')};
     }
     80%,
     90% {
-        stroke: var(--p-progressspinner-color-4);
+        stroke: ${dt('progressspinner.color-4')};
     }
 }
 `

components/lib/themes/primeone/base/scrolltop/index.js

@@ -7,13 +7,13 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--p-scrolltop-background);
+    background: ${dt('scrolltop.background')};
-    color: var(--p-scrolltop-text-color);
+    color: ${dt('scrolltop.color')};
 }
 
 .p-scrolltop:hover {
-    background: var(--p-scrolltop-background-hover);
+    background: ${dt('scrolltop.hover.background')};
-    color: var(--p-scrolltop-text-color-hover);
+    color: ${dt('scrolltop.hover.text')};
 }
 
 .p-scrolltop-icon {

components/lib/themes/primeone/base/skeleton/index.js

@@ -2,7 +2,7 @@ export default {
     css: ({ dt }) => `
 .p-skeleton {
     overflow: hidden;
-    background-color: var(--p-skeleton-background);
+    background-color: ${dt('skeleton.background')};
     border-radius: ${dt('rounded.base')};
 }
 
@@ -16,7 +16,7 @@ export default {
     top: 0;
     transform: translateX(-100%);
     z-index: 1;
-    background: linear-gradient( 90deg, rgba(255, 255, 255, 0), var(--p-skeleton-animation-background), rgba(255, 255, 255, 0) );
+    background: linear-gradient( 90deg, rgba(255, 255, 255, 0), ${dt('skeleton.animation.background')}, rgba(255, 255, 255, 0) );
 }
 
 .p-skeleton-circle {

components/lib/themes/primeone/base/tag/index.js

@@ -4,8 +4,8 @@ export default {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    background: var(--p-tag-primary-background);
+    background: ${dt('tag.primary.background')};
-    color: var(--p-tag-primary-text-color);
+    color: ${dt('tag.primary.color')};
     font-size: 0.75rem;
     font-weight: 700;
     padding: 0.25rem 0.4rem;
@@ -24,33 +24,33 @@ export default {
 }
 
 .p-tag-success {
-    background-color: var(--p-tag-success-background);
+    background: ${dt('tag.success.background')};
-    color: var(--p-tag-success-text-color);
+    color: ${dt('tag.success.color')};
 }
 
 .p-tag-info {
-    background-color: var(--p-tag-info-background);
+    background: ${dt('tag.info.background')};
-    color: var(--p-tag-info-text-color);
+    color: ${dt('tag.info.color')};
 }
 
 .p-tag-warning {
-    background-color: var(--p-tag-warn-background);
+    background: ${dt('tag.warn.background')};
-    color: var(--p-tag-warn-text-color);
+    color: ${dt('tag.warn.color')};
 }
 
 .p-tag-danger {
-    background-color: var(--p-tag-danger-background);
+    background: ${dt('tag.danger.background')};
-    color: var(--p-tag-danger-text-color);
+    color: ${dt('tag.danger.color')};
 }
 
 .p-tag-secondary {
-    background-color: var(--p-tag-secondary-background);
+    background: ${dt('tag.secondary.background')};
-    color: var(--p-tag-secondary-text-color);
+    color: ${dt('tag.secondary.color')};
 }
 
 .p-tag-contrast {
-    background-color: var(--p-tag-contrast-background);
+    background: ${dt('tag.contrast.background')};
-    color: var(--p-tag-contrast-text-color);
+    color: ${dt('tag.contrast.color')};
 }
 `
 };

components/lib/themes/primeone/base/terminal/index.js

@@ -3,9 +3,9 @@ export default {
 .p-terminal {
     height: 18rem;
     overflow: auto;
-    background: var(--p-terminal-background);
+    background: ${dt('terminal.background')};
-    color: var(--p-terminal-text-color);
+    color: ${dt('terminal.color')};
-    border: 1px solid var(--p-terminal-border-color);
+    border: 1px solid ${dt('terminal.border.color')};
     padding: 0.5rem 0.75rem;
     border-radius: ${dt('rounded.base')};
 }

components/lib/themes/primeone/presets/aura/avatar/index.js

@@ -3,12 +3,16 @@ export default {
         light: {
             root: {
                 background: '{surface.200}',
+            },
+            grouped: {
                 borderColor: '{surface.0}'
             }
         },
         dark: {
             root: {
                 background: '{surface.700}',
+            },
+            grouped: {
                 borderColor: '{surface.900}'
             }
         }

components/lib/themes/primeone/presets/aura/badge/index.js

@@ -3,61 +3,61 @@ export default {
         light: {
             primary: {
                 background: '{primary.color}',
-                textColor: '{primary.inverseColor}'
+                color: '{primary.inverseColor}'
             },
             secondary: {
                 background: '{surface.100}',
-                textColor: '{surface.600}'
+                color: '{surface.600}'
             },
             success: {
                 background: '{green.500}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             info: {
                 background: '{sky.500}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             warn: {
                 background: '{orange.500}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             danger: {
                 background: '{red.500}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             },
             contrast: {
                 background: '{surface.950}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             }
         },
         dark: {
             primary: {
                 background: '{primary.color}',
-                textColor: '{primary.inverseColor}'
+                color: '{primary.inverseColor}'
             },
             secondary: {
                 background: '{surface.800}',
-                textColor: '{surface.300}'
+                color: '{surface.300}'
             },
             success: {
                 background: '{green.400}',
-                textColor: '{green.950}'
+                color: '{green.950}'
             },
             info: {
                 background: '{sky.400}',
-                textColor: '{sky.950}'
+                color: '{sky.950}'
             },
             warn: {
                 background: '{orange.400}',
-                textColor: '{orange.950}'
+                color: '{orange.950}'
             },
             danger: {
                 background: '{red.400}',
-                textColor: '{red.950}'
+                color: '{red.950}'
             },
             contrast: {
                 background: '{surface.0}',
-                textColor: '{surface.950}'
+                color: '{surface.950}'
             }
         }
     }

components/lib/themes/primeone/presets/aura/chip/index.js

@@ -3,13 +3,13 @@ export default {
         light: {
             root: {
                 background: '{surface.100}',
-                textColor: '{surface.800}'
+                color: '{surface.800}'
             }
         },
         dark: {
             root: {
                 background: '{surface.700}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             }
         }
     }

components/lib/themes/primeone/presets/aura/inplace/index.js

@@ -2,14 +2,14 @@ export default {
     colorScheme: {
         light: {
             display: {
-                backgroundHover: '{surface.100}',
+                hoverBackground: '{surface.100}',
-                textColorHover: '{surface.800}'
+                hoverColor: '{surface.800}'
             }
         },
         dark: {
             display: {
-                backgroundHover: '{surface.800}',
+                hoverBackground: '{surface.800}',
-                textColorHover: '{surface.0}'
+                hoverColor: '{surface.0}'
             }
         }
     }

components/lib/themes/primeone/presets/aura/progressbar/index.js

@@ -3,11 +3,23 @@ export default {
         light: {
             root: {
                 background: '{surface.200}'
+            },
+            value: {
+                background: '{primary.color}'
+            },
+            label: {
+                color: '{primary.inverse.color}'
             }
         },
         dark: {
             root: {
                 background: '{surface.700}'
+            },
+            value: {
+                background: '{primary.color}'
+            },
+            label: {
+                color: '{primary.inverse.color}'
             }
         }
     }

components/lib/themes/primeone/presets/aura/scrolltop/index.js

@@ -3,17 +3,17 @@ export default {
         light: {
             root: {
                 background: '{surface.800}',
-                backgroundHover: '{surface.700}',
+                hoverBackground: '{surface.700}',
-                textColor: '{surface.100}',
+                color: '{surface.100}',
-                textColorHover: '{surface.0}'
+                hoverColor: '{surface.0}'
             }
         },
         dark: {
             root: {
                 background: '{surface.800}',
-                backgroundHover: '{surface.700}',
+                hoverBackground: '{surface.700}',
-                textColor: '{surface.300}',
+                color: '{surface.300}',
-                textColorHover: '{surface.200}'
+                hoverColor: '{surface.200}'
             }
         }
     }

components/lib/themes/primeone/presets/aura/tag/index.js

@@ -3,61 +3,61 @@ export default {
         light: {
             primary: {
                 background: '{primary.100}',
-                textColor: '{primary.700}'
+                color: '{primary.700}'
             },
             secondary: {
                 background: '{surface.100}',
-                textColor: '{surface.600}'
+                color: '{surface.600}'
             },
             success: {
                 background: '{green.100}',
-                textColor: '{green.700}'
+                color: '{green.700}'
             },
             info: {
                 background: '{sky.100}',
-                textColor: '{sky.700}'
+                color: '{sky.700}'
             },
             warn: {
                 background: '{orange.100}',
-                textColor: '{orange.700}'
+                color: '{orange.700}'
             },
             danger: {
                 background: '{red.100}',
-                textColor: '{red.700}'
+                color: '{red.700}'
             },
             contrast: {
                 background: '{surface.950}',
-                textColor: '{surface.0}'
+                color: '{surface.0}'
             }
         },
         dark: {
             primary: {
                 background: 'color-mix(in srgb, var(--p-primary-500), transparent 84%)',
-                textColor: '{primary.300}'
+                color: '{primary.300}'
             },
             secondary: {
                 background: '{surface.800}',
-                textColor: '{surface.300}'
+                color: '{surface.300}'
             },
             success: {
                 background: 'color-mix(in srgb, var(--p-green-500), transparent 84%)',
-                textColor: '{green.300}'
+                color: '{green.300}'
             },
             info: {
                 background: 'color-mix(in srgb, var(--p-sky-500), transparent 84%)',
-                textColor: '{sky.300}'
+                color: '{sky.300}'
             },
             warn: {
                 background: 'color-mix(in srgb, var(--p-orange-500), transparent 84%)',
-                textColor: '{orange.300}'
+                color: '{orange.300}'
             },
             danger: {
                 background: 'color-mix(in srgb, var(--p-red-500), transparent 84%)',
-                textColor: '{red.300}'
+                color: '{red.300}'
             },
             contrast: {
                 background: '{surface.0}',
-                textColor: '{surface.950}'
+                color: '{surface.950}'
             }
         }
     }

components/lib/themes/primeone/presets/aura/terminal/index.js

@@ -3,12 +3,12 @@ export default {
         light: {
             background: '{surface.0}',
             borderColor: '{surface.300}',
-            textColor: '{surface.700}'
+            color: '{surface.700}'
         },
         dark: {
             background: '{surface.950}',
             borderColor: '{surface.700}',
-            textColor: '{surface.0}'
+            color: '{surface.0}'
         }
     }
 };