fix: refine textColor roles in component

Author: Afriq Yasin Ramadhan

src/components/dropzone/index.md

@@ -19,8 +19,8 @@ description: Headless component for Drag'n'Drop Files Upload.
 <style scoped lang="postcss">
   .preview {
     a {
-      --p-color-info-hover: darken(theme(textColor.info), 5%);
-      --p-color-dark-info-hover: darken(theme(textColor.dark.info), 5%);
+      --p-color-info-hover: darken(theme(textColor.info.DEFAULT), 5%);
+      --p-color-dark-info-hover: darken(theme(textColor.dark.info.DEFAULT), 5%);
       @apply underline text-info dark:text-dark-info hover:text-[color:var(--p-color-info-hover)] hover:dark:text-[color:var(--p-color-dark-info-hover)];
     }
   }

src/components/label/Label.vue

@@ -136,7 +136,7 @@ function close (event: MouseEvent): void {
       &--default {
         --p-label-bg-variant-default: theme(backgroundColor.inverse);
         --p-label-bg-dark-variant-default: theme(backgroundColor.dark.inverse);
-        --p-label-text-variant-default: theme(textColor.state-emphasis);
+        --p-label-text-variant-default: theme(textColor.on-emphasis);
         --p-label-text-dark-variant-default: theme(textColor.dark.on-emphasis);
 
         &:not([class^='bg-'], [class*='bg-']) {

src/components/label/index.md

@@ -195,7 +195,7 @@ Use this variable for level color (like badge) customization.
 ```sass
 --p-label-bg-variant-default: theme(backgroundColor.inverse);
 --p-label-bg-dark-variant-default: theme(backgroundColor.dark.inverse);
---p-label-text-variant-default: theme(textColor.state-emphasis);
+--p-label-text-variant-default: theme(textColor.on-emphasis);
 --p-label-text-dark-variant-default: theme(textColor.dark.on-emphasis);
 ```
 

src/components/popup/Popup.vue

@@ -177,8 +177,8 @@ async function onActionClick (action: PopupActionOption) {
 
 <style lang="postcss">
 .popup {
-  --p-popup-icon-color-primary: theme(textColor.brand.accent);
-  --p-popup-icon-color-primary-dark: theme(textColor.dark.brand.accent);
+  --p-popup-icon-color-primary: theme(textColor.brand.accent.DEFAULT);
+  --p-popup-icon-color-primary-dark: theme(textColor.dark.brand.accent.DEFAULT);
 
   /**
   * global style

src/components/toast/Toast.vue

@@ -181,8 +181,8 @@ async function onActionClick (action: ToastActionOption) {
 
 <style lang="postcss">
 .toast {
-  --p-toast-icon-color-primary: theme(textColor.brand.accent);
-  --p-toast-icon-color-primary-dark: theme(textColor.dark.brand.accent);
+  --p-toast-icon-color-primary: theme(textColor.brand.accent.DEFAULT);
+  --p-toast-icon-color-primary-dark: theme(textColor.dark.brand.accent.DEFAULT);
 
   /**
   * global style