Tokens for message

components/lib/message/style/MessageStyle.js

@@ -1,15 +1,16 @@
 import BaseStyle from 'primevue/base/style';
 
 const theme = ({ dt }) => `
+.p-message {
+    margin: ${dt('message.margin')};
+    border-radius: ${dt('message.border.radius')};
+}
+
 .p-message-content {
     display: flex;
     align-items: center;
-    padding: 0.5rem 0.75rem;
+    padding: ${dt('message.content.padding')};
-}
+    gap: ${dt('message.content.gap')};
-
-.p-message {
-    margin: 1rem 0;
-    border-radius: 6px;
 }
 
 .p-message-icon {
@@ -24,11 +25,11 @@ const theme = ({ dt }) => `
     margin: 0 0 0 auto;
     overflow: hidden;
     position: relative;
-    width: 1.75rem;
+    width: ${dt('message.close.button.width')};
-    height: 1.75rem;
+    height: ${dt('message.close.button.height')};
-    border-radius: 50%;
+    border-radius: ${dt('message.close.button.border.radius')};
     background: transparent;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     outline-color: transparent;
     color: inherit;
     padding: 0;
@@ -37,10 +38,16 @@ const theme = ({ dt }) => `
     user-select: none;
 }
 
+.p-message-close-icon {
+    font-size: ${dt('message.close.icon.size')};
+    width: ${dt('message.close.icon.size')};
+    height: ${dt('message.close.icon.size')};
+}
+
 .p-message-close-button:focus-visible {
-    outline-width: ${dt('focus.ring.width')};
+    outline-width: ${dt('message.close.button.focus.ring.width')};
-    outline-style: ${dt('focus.ring.style')};
+    outline-style: ${dt('message.close.button.focus.ring.style')};
-    outline-offset: ${dt('focus.ring.offset')};
+    outline-offset: ${dt('message.close.button.focus.ring.offset')};
 }
 
 .p-message-info {
@@ -51,7 +58,8 @@ const theme = ({ dt }) => `
 }
 
 .p-message-info .p-message-close-button:focus-visible {
-    outline-color: ${dt('message.info.color')};
+    outline-color: ${dt('message.info.close.button.focus.ring.color')};
+    box-shadow: ${dt('message.info.close.button.focus.ring.shadow')};
 }
 
 .p-message-info .p-message-close-button:hover {
@@ -66,7 +74,8 @@ const theme = ({ dt }) => `
 }
 
 .p-message-success .p-message-close-button:focus-visible {
-    outline-color: ${dt('message.success.color')};
+    outline-color: ${dt('message.success.close.button.focus.ring.color')};
+    box-shadow: ${dt('message.success.close.button.focus.ring.shadow')};
 }
 
 .p-message-success .p-message-close-button:hover {
@@ -81,7 +90,8 @@ const theme = ({ dt }) => `
 }
 
 .p-message-warn .p-message-close-button:focus-visible {
-    outline-color: ${dt('message.warn.color')};
+    outline-color: ${dt('message.warn.close.button.focus.ring.color')};
+    box-shadow: ${dt('message.warn.close.button.focus.ring.shadow')};
 }
 
 .p-message-warn .p-message-close-button:hover {
@@ -96,7 +106,8 @@ const theme = ({ dt }) => `
 }
 
 .p-message-error .p-message-close-button:focus-visible {
-    outline-color: ${dt('message.error.color')};
+    outline-color: ${dt('message.error.close.button.focus.ring.color')};
+    box-shadow: ${dt('message.error.close.button.focus.ring.shadow')};
 }
 
 .p-message-error .p-message-close-button:hover {
@@ -111,7 +122,8 @@ const theme = ({ dt }) => `
 }
 
 .p-message-secondary .p-message-close-button:focus-visible {
-    outline-color: ${dt('message.secondary.color')};
+    outline-color: ${dt('message.secondary.close.button.focus.ring.color')};
+    box-shadow: ${dt('message.secondary.close.button.focus.ring.shadow')};
 }
 
 .p-message-secondary .p-message-close-button:hover {
@@ -126,7 +138,8 @@ const theme = ({ dt }) => `
 }
 
 .p-message-contrast .p-message-close-button:focus-visible {
-    outline-color: ${dt('message.contrast.color')};
+    outline-color: ${dt('message.contrast.close.button.focus.ring.color')};
+    box-shadow: ${dt('message.contrast.close.button.focus.ring.shadow')};
 }
 
 .p-message-contrast .p-message-close-button:hover {
@@ -134,18 +147,14 @@ const theme = ({ dt }) => `
 }
 
 .p-message-text {
-    font-size: 1rem;
+    font-size: ${dt('message.text.font.size')};
-    font-weight: 500;
+    font-weight: ${dt('message.text.font.weight')};
 }
 
 .p-message-icon {
-    font-size: 1rem;
+    font-size: ${dt('message.icon.size')};
-    margin-right: 0.5rem;
+    width: ${dt('message.icon.size')};
-}
+    height: ${dt('message.icon.size')};
-
-.p-message .p-icon:not(.p-message-close-button-icon) {
-    width: 1rem;
-    height: 1rem;
 }
 
 .p-message-enter-from {

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

@@ -1,4 +1,32 @@
 export default {
+    root: {
+        margin: '1rem 0',
+        borderRadius: '{content.border.radius}'
+    },
+    content: {
+        padding: '0.5rem 0.75rem',
+        gap: '0.5rem'
+    },
+    text: {
+        fontSize: '1rem',
+        fontWeight: '500'
+    },
+    icon: {
+        size: '1rem'
+    },
+    closeButton: {
+        width: '1.75rem',
+        height: '1.75rem',
+        borderRadius: '50%',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            offset: '{focus.ring.offset}'
+        }
+    },
+    closeIcon: {
+        size: '1rem'
+    },
     colorScheme: {
         light: {
             info: {
@@ -7,7 +35,11 @@ export default {
                 color: '{blue.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{blue.100}'
+                    hoverBackground: '{blue.100}',
+                    focusRing: {
+                        color: '{blue.600}',
+                        shadow: 'none'
+                    }
                 }
             },
             success: {
@@ -16,7 +48,11 @@ export default {
                 color: '{green.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{green.100}'
+                    hoverBackground: '{green.100}',
+                    focusRing: {
+                        color: '{green.600}',
+                        shadow: 'none'
+                    }
                 }
             },
             warn: {
@@ -25,7 +61,11 @@ export default {
                 color: '{yellow.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{yellow.100}'
+                    hoverBackground: '{yellow.100}',
+                    focusRing: {
+                        color: '{yellow.600}',
+                        shadow: 'none'
+                    }
                 }
             },
             error: {
@@ -34,7 +74,11 @@ export default {
                 color: '{red.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{red.100}'
+                    hoverBackground: '{red.100}',
+                    focusRing: {
+                        color: '{red.600}',
+                        shadow: 'none'
+                    }
                 }
             },
             secondary: {
@@ -43,7 +87,11 @@ export default {
                 color: '{surface.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.200}'
+                    hoverBackground: '{surface.200}',
+                    focusRing: {
+                        color: '{surface.600}',
+                        shadow: 'none'
+                    }
                 }
             },
             contrast: {
@@ -52,7 +100,11 @@ export default {
                 color: '{surface.50}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.800}'
+                    hoverBackground: '{surface.800}',
+                    focusRing: {
+                        color: '{surface.50}',
+                        shadow: 'none'
+                    }
                 }
             }
         },
@@ -63,7 +115,11 @@ export default {
                 color: '{blue.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{blue.500}',
+                        shadow: 'none'
+                    }
                 }
             },
             success: {
@@ -72,7 +128,11 @@ export default {
                 color: '{green.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{green.500}',
+                        shadow: 'none'
+                    }
                 }
             },
             warn: {
@@ -81,7 +141,11 @@ export default {
                 color: '{yellow.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{yellow.500}',
+                        shadow: 'none'
+                    }
                 }
             },
             error: {
@@ -90,7 +154,11 @@ export default {
                 color: '{red.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{red.500}',
+                        shadow: 'none'
+                    }
                 }
             },
             secondary: {
@@ -99,7 +167,11 @@ export default {
                 color: '{surface.300}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.700}'
+                    hoverBackground: '{surface.700}',
+                    focusRing: {
+                        color: '{surface.300}',
+                        shadow: 'none'
+                    }
                 }
             },
             contrast: {
@@ -108,7 +180,11 @@ export default {
                 color: '{surface.950}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.100}'
+                    hoverBackground: '{surface.100}',
+                    focusRing: {
+                        color: '{blue.950}',
+                        shadow: 'none'
+                    }
                 }
             }
         }

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

@@ -1,4 +1,32 @@
 export default {
+    root: {
+        margin: '1.125rem 0',
+        borderRadius: '{content.border.radius}'
+    },
+    content: {
+        padding: '0.75rem 1rem',
+        gap: '0.5rem'
+    },
+    text: {
+        fontSize: '1rem',
+        fontWeight: '500'
+    },
+    icon: {
+        size: '1.25rem'
+    },
+    closeButton: {
+        width: '2rem',
+        height: '2rem',
+        borderRadius: '50%',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            offset: '{focus.ring.offset}'
+        }
+    },
+    closeIcon: {
+        size: '1rem'
+    },
     colorScheme: {
         light: {
             info: {
@@ -7,7 +35,11 @@ export default {
                 color: '{blue.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{blue.100}'
+                    hoverBackground: '{blue.100}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem {blue.200}'
+                    }
                 }
             },
             success: {
@@ -16,7 +48,11 @@ export default {
                 color: '{green.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{green.100}'
+                    hoverBackground: '{green.100}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem {green.200}'
+                    }
                 }
             },
             warn: {
@@ -25,7 +61,11 @@ export default {
                 color: '{yellow.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{yellow.100}'
+                    hoverBackground: '{yellow.100}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem {yellow.200}'
+                    }
                 }
             },
             error: {
@@ -34,7 +74,11 @@ export default {
                 color: '{red.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{red.100}'
+                    hoverBackground: '{red.100}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem {red.200}'
+                    }
                 }
             },
             secondary: {
@@ -43,7 +87,11 @@ export default {
                 color: '{surface.600}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.200}'
+                    hoverBackground: '{surface.200}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem {surface.200}'
+                    }
                 }
             },
             contrast: {
@@ -52,7 +100,11 @@ export default {
                 color: '{surface.50}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.800}'
+                    hoverBackground: '{surface.800}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem {surface.400}'
+                    }
                 }
             }
         },
@@ -63,7 +115,11 @@ export default {
                 color: '{blue.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {blue.500}, transparent 80%)'
+                    }
                 }
             },
             success: {
@@ -72,7 +128,11 @@ export default {
                 color: '{green.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {green.500}, transparent 80%)'
+                    }
                 }
             },
             warn: {
@@ -81,7 +141,11 @@ export default {
                 color: '{yellow.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {yellow.500}, transparent 80%)'
+                    }
                 }
             },
             error: {
@@ -90,7 +154,11 @@ export default {
                 color: '{red.500}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: 'rgba(255, 255, 255, 0.05)'
+                    hoverBackground: 'rgba(255, 255, 255, 0.05)',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {red.500}, transparent 80%)'
+                    }
                 }
             },
             secondary: {
@@ -99,7 +167,11 @@ export default {
                 color: '{surface.300}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.700}'
+                    hoverBackground: '{surface.700}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.300}, transparent 80%)'
+                    }
                 }
             },
             contrast: {
@@ -108,7 +180,11 @@ export default {
                 color: '{surface.950}',
                 boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
                 closeButton: {
-                    hoverBackground: '{surface.100}'
+                    hoverBackground: '{surface.100}',
+                    focusRing: {
+                        color: '{focus.ring.color}',
+                        shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.950}, transparent 80%)'
+                    }
                 }
             }
         }