Token refactor

apps/showcase/doc/breadcrumb/BasicDoc.vue

@@ -15,7 +15,7 @@ export default {
             home: {
                 icon: 'pi pi-home'
             },
-            items: [{ label: 'Electronics' }, { label: 'Computer' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
+            items: [{ label: 'Electronics' }, { label: 'Computer', icon: 'pi pi-desktop' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
             code: {
                 basic: `
 <Breadcrumb :home="home" :model="items" />

packages/primevue/src/badge/style/BadgeStyle.js

@@ -5,6 +5,7 @@ const theme = ({ dt }) => `
 .p-badge {
     display: inline-flex;
     border-radius: ${dt('badge.border.radius')};
+    align-items: center;
     justify-content: center;
     padding: ${dt('badge.padding')};
     background: ${dt('badge.primary.background')};
@@ -13,7 +14,6 @@ const theme = ({ dt }) => `
     font-weight: ${dt('badge.font.weight')};
     min-width: ${dt('badge.min.width')};
     height: ${dt('badge.height')};
-    line-height: ${dt('badge.height')};
 }
 
 .p-badge-dot {
@@ -63,21 +63,18 @@ const theme = ({ dt }) => `
     font-size: ${dt('badge.sm.font.size')};
     min-width: ${dt('badge.sm.min.width')};
     height: ${dt('badge.sm.height')};
-    line-height: ${dt('badge.sm.height')};
 }
 
 .p-badge-lg {
     font-size: ${dt('badge.lg.font.size')};
     min-width: ${dt('badge.lg.min.width')};
     height: ${dt('badge.lg.height')};
-    line-height: ${dt('badge.lg.height')};
 }
 
 .p-badge-xl {
     font-size: ${dt('badge.xl.font.size')};
     min-width: ${dt('badge.xl.min.width')};
     height: ${dt('badge.xl.height')};
-    line-height: ${dt('badge.xl.height')};
 }
 `;
 

packages/primevue/src/breadcrumb/style/BreadcrumbStyle.js

@@ -31,6 +31,7 @@ const theme = ({ dt }) => `
     text-decoration: none;
     display: flex;
     align-items: center;
+    gap: ${dt('breadcrumb.item.gap')};
     transition: background ${dt('breadcrumb.transition.duration')}, color ${dt('breadcrumb.transition.duration')}, outline-color ${dt('breadcrumb.transition.duration')}, box-shadow ${dt('breadcrumb.transition.duration')};
     border-radius: ${dt('breadcrumb.item.border.radius')};
     outline-color: transparent;
@@ -43,13 +44,21 @@ const theme = ({ dt }) => `
     outline-offset: ${dt('breadcrumb.item.focus.ring.offset')};
 }
 
-.p-breadcrumb-item-label:hover {
+.p-breadcrumb-item-link:hover .p-breadcrumb-item-label {
     color: ${dt('breadcrumb.item.hover.color')};
-    line-height: 1;
+}
+
+.p-breadcrumb-item-label {
+    transition: inherit;
 }
 
 .p-breadcrumb-item-icon {
     color: ${dt('breadcrumb.item.icon.color')};
+    transition: inherit;
+}
+
+.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon {
+    color: ${dt('breadcrumb.item.icon.hover.color')};
 }
 `;
 

packages/primevue/src/chip/style/ChipStyle.js

@@ -36,7 +36,7 @@ const theme = ({ dt }) => `
 
 .p-chip-remove-icon {
     cursor: pointer;
-    font-size: ${dt('chip.remove.icon.font.size')};
+    font-size: ${dt('chip.remove.icon.size')};
     width: ${dt('chip.remove.icon.size')};
     height: ${dt('chip.remove.icon.size')};
     color: ${dt('chip.remove.icon.color')};

packages/primevue/src/datepicker/style/DatePickerStyle.js

@@ -131,25 +131,25 @@ const theme = ({ dt }) => `
 }
 
 .p-datepicker-select-month {
-    padding: ${dt('datepicker.view.month.padding')};
+    padding: ${dt('datepicker.select.month.padding')};
-    color: ${dt('datepicker.view.month.color')};
+    color: ${dt('datepicker.select.month.color')};
-    border-radius: ${dt('datepicker.view.month.border.radius')};
+    border-radius: ${dt('datepicker.select.month.border.radius')};
 }
 
 .p-datepicker-select-year {
-    padding: ${dt('datepicker.view.year.padding')};
+    padding: ${dt('datepicker.select.year.padding')};
-    color: ${dt('datepicker.view.year.color')};
+    color: ${dt('datepicker.select.year.color')};
-    border-radius: ${dt('datepicker.view.year.border.radius')};
+    border-radius: ${dt('datepicker.select.year.border.radius')};
 }
 
 .p-datepicker-select-month:enabled:hover {
-    background: ${dt('datepicker.view.month.hover.background')};
+    background: ${dt('datepicker.select.month.hover.background')};
-    color: ${dt('datepicker.view.month.hover.color')};
+    color: ${dt('datepicker.select.month.hover.color')};
 }
 
 .p-datepicker-select-year:enabled:hover {
-    background: ${dt('datepicker.view.year.hover.background')};
+    background: ${dt('datepicker.select.year.hover.background')};
-    color: ${dt('datepicker.view.year.hover.color')};
+    color: ${dt('datepicker.select.year.hover.color')};
 }
 
 .p-datepicker-calendar-container {

packages/themes/src/presets/aura/breadcrumb/index.js

@@ -8,8 +8,12 @@ export default {
     item: {
         color: '{text.muted.color}',
         hoverColor: '{text.color}',
-        iconColor: '{navigation.item.icon.color}',
         borderRadius: '{content.border.radius}',
+        gap: '{navigation.item.gap}',
+        icon: {
+            color: '{navigation.item.icon.color}',
+            hoverColor: '{navigation.item.icon.focus.color}'
+        },
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',

packages/themes/src/presets/aura/chip/index.js

@@ -14,6 +14,7 @@ export default {
         size: '1rem'
     },
     removeIcon: {
+        size: '1rem',
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',

packages/themes/src/presets/lara/breadcrumb/index.js

@@ -8,8 +8,12 @@ export default {
     item: {
         color: '{text.muted.color}',
         hoverColor: '{text.color}',
-        iconColor: '{navigation.item.icon.color}',
         borderRadius: '{content.border.radius}',
+        gap: '{navigation.item.gap}',
+        icon: {
+            color: '{navigation.item.icon.color}',
+            hoverColor: '{navigation.item.icon.focus.color}'
+        },
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',

packages/themes/src/presets/lara/chip/index.js

@@ -14,6 +14,7 @@ export default {
         size: '1rem'
     },
     removeIcon: {
+        size: '1rem',
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',

packages/themes/src/presets/nora/breadcrumb/index.js

@@ -8,8 +8,12 @@ export default {
     item: {
         color: '{text.muted.color}',
         hoverColor: '{text.color}',
-        iconColor: '{navigation.item.icon.color}',
         borderRadius: '{content.border.radius}',
+        gap: '{navigation.item.gap}',
+        icon: {
+            color: '{text.muted.color}',
+            hoverColor: '{text.color}'
+        },
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',

packages/themes/src/presets/nora/chip/index.js

@@ -14,6 +14,7 @@ export default {
         size: '1rem'
     },
     removeIcon: {
+        size: '1rem',
         focusRing: {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',

packages/themes/types/breadcrumb/index.d.ts

@@ -62,6 +62,18 @@ export interface BreadcrumbDesignTokens extends ColorSchemeDesignToken<Breadcrum
          * @designToken breadcrumb.item.icon.color
          */
         iconColor?: string;
+        /**
+         * Hover color of item icon
+         *
+         * @designToken breadcrumb.item.icon.hover.color
+         */
+        iconHoverColor?: string;
+        /**
+         * Gap of item
+         *
+         * @designToken breadcrumb.item.gap
+         */
+        gap?: string;
         /**
          * Border radius of item
          *

packages/themes/types/chip/index.d.ts

@@ -96,6 +96,12 @@ export interface ChipDesignTokens extends ColorSchemeDesignToken<ChipDesignToken
      * Used to pass tokens of the remove icon section
      */
     removeIcon?: {
+        /**
+         * Size of remove icon
+         *
+         * @designToken chip.remove.icon.size
+         */
+        size?: string;
         /**
          * Focus ring of remove icon
          */