Tokens for Tag

components/lib/tag/style/TagStyle.js

@@ -7,21 +7,21 @@ const theme = ({ dt }) => `
     justify-content: center;
     background: ${dt('tag.primary.background')};
     color: ${dt('tag.primary.color')};
-    font-size: 0.875rem;
+    font-size: ${dt('tag.font.size')};
-    font-weight: 700;
+    font-weight: ${dt('tag.font.weight')};
-    padding: 0.25rem 0.4rem;
+    padding: ${dt('tag.padding')};
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('tag.border.radius')};
-    gap: 0.25rem;
+    gap: ${dt('tag.gap')};
 }
 
 .p-tag-icon {
-    font-size: 0.75rem;
+    font-size: ${dt('tag.icon.size')};
-    width: 0.75rem;
+    width: ${dt('tag.icon.size')};
-    height: 0.75rem;
+    height:${dt('tag.icon.size')};
 }
 
 .p-tag-rounded {
-    border-radius: 10rem;
+    border-radius: ${dt('tag.rounded.border.radius')};
 }
 
 .p-tag-success {

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

@@ -24,7 +24,7 @@ export default {
         light: {
             primary: {
                 background: '{primary.color}',
-                color: '{primary.contrast.color}'
+                color: '{primary.inverse.color}'
             },
             secondary: {
                 background: '{surface.100}',
@@ -54,7 +54,7 @@ export default {
         dark: {
             primary: {
                 background: '{primary.color}',
-                color: '{primary.contrast.color}'
+                color: '{primary.inverse.color}'
             },
             secondary: {
                 background: '{surface.800}',

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

@@ -1,4 +1,15 @@
 export default {
+    root: {
+        fontSize: '0.875rem',
+        fontWeight: '700',
+        padding: '0.25rem 0.5rem',
+        gap: '0.25rem',
+        borderRadius: '{content.border.radius}',
+        roundedBorderRadius: '{border.radius.xl}'
+    },
+    icon: {
+        size: '0.75rem'
+    },
     colorScheme: {
         light: {
             primary: {

components/lib/themes/lara/tag/index.js

@@ -1,29 +1,40 @@
 export default {
+    root: {
+        fontSize: '0.875rem',
+        fontWeight: '700',
+        padding: '0.25rem 0.5rem',
+        gap: '0.25rem',
+        borderRadius: '{content.border.radius}',
+        roundedBorderRadius: '{border.radius.xl}'
+    },
+    icon: {
+        size: '0.75rem'
+    },
     colorScheme: {
         light: {
             primary: {
-                background: '{primary.100}',
+                background: '{primary.color}',
-                color: '{primary.700}'
+                color: '{primary.inverse.color}'
             },
             secondary: {
                 background: '{surface.100}',
                 color: '{surface.600}'
             },
             success: {
-                background: '{green.100}',
+                background: '{green.500}',
-                color: '{green.700}'
+                color: '{surface.0}'
             },
             info: {
-                background: '{sky.100}',
+                background: '{sky.500}',
-                color: '{sky.700}'
+                color: '{surface.0}'
             },
             warn: {
-                background: '{orange.100}',
+                background: '{orange.500}',
-                color: '{orange.700}'
+                color: '{surface.0}'
             },
             danger: {
-                background: '{red.100}',
+                background: '{red.500}',
-                color: '{red.700}'
+                color: '{surface.0}'
             },
             contrast: {
                 background: '{surface.950}',
@@ -32,28 +43,28 @@ export default {
         },
         dark: {
             primary: {
-                background: 'color-mix(in srgb, {primary.500}, transparent 84%)',
+                background: '{primary.color}',
-                color: '{primary.300}'
+                color: '{primary.inverse.color}'
             },
             secondary: {
                 background: '{surface.800}',
                 color: '{surface.300}'
             },
             success: {
-                background: 'color-mix(in srgb, {green.500}, transparent 84%)',
+                background: '{green.400}',
-                color: '{green.300}'
+                color: '{green.950}'
             },
             info: {
-                background: 'color-mix(in srgb, {sky.500}, transparent 84%)',
+                background: '{sky.400}',
-                color: '{sky.300}'
+                color: '{sky.950}'
             },
             warn: {
-                background: 'color-mix(in srgb, {orange.500}, transparent 84%)',
+                background: '{orange.400}',
-                color: '{orange.300}'
+                color: '{orange.950}'
             },
             danger: {
-                background: 'color-mix(in srgb, {red.500}, transparent 84%)',
+                background: '{red.400}',
-                color: '{red.300}'
+                color: '{red.950}'
             },
             contrast: {
                 background: '{surface.0}',