Tokens for inline message

components/lib/inlinemessage/InlineMessage.vue

@@ -3,9 +3,9 @@
         <slot name="icon">
             <component :is="icon ? 'span' : iconComponent" :class="cx('icon')" v-bind="ptm('icon')"></component>
         </slot>
-        <span :class="cx('text')" v-bind="ptm('text')">
-            <slot>&nbsp;</slot>
-        </span>
+        <div v-if="$slots.default" :class="cx('text')" v-bind="ptm('text')">
+            <slot></slot>
+        </div>
     </div>
 </template>
 

components/lib/inlinemessage/style/InlineMessageStyle.js

@@ -5,18 +5,20 @@ const theme = ({ dt }) => `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 0.5rem 0.75rem;
-    margin: 0;
-    border-radius: ${dt('border.radius.md')};
+    padding: ${dt('inlinemessage.padding')};
+    border-radius: ${dt('inlinemessage.border.radius')};
+    gap: ${dt('inlinemessage.gap')};
 }
 
 .p-inline-message-text {
-    font-weight: 500;
+    font-weight: ${dt('inlinemessage.text.font.weight')};
 }
 
 .p-inline-message-icon {
     flex-shrink: 0;
-    margin-right: 0.5rem;
+    font-size: ${dt('inlinemessage.icon.size')};
+    width: ${dt('inlinemessage.icon.size')};
+    height: ${dt('inlinemessage.icon.size')};
 }
 
 .p-inline-message-icon-only .p-inline-message-text {
@@ -45,6 +47,7 @@ const theme = ({ dt }) => `
     color: ${dt('inlinemessage.success.color')};
     box-shadow: ${dt('inlinemessage.success.shadow')};
 }
+
 .p-inline-message-success .p-inline-message-icon {
     color: ${dt('inlinemessage.success.color')};
 }
@@ -55,6 +58,7 @@ const theme = ({ dt }) => `
     color: ${dt('inlinemessage.warn.color')};
     box-shadow: ${dt('inlinemessage.warn.shadow')};
 }
+
 .p-inline-message-warn .p-inline-message-icon {
     color: ${dt('inlinemessage.warn.color')};
 }
@@ -65,6 +69,7 @@ const theme = ({ dt }) => `
     color: ${dt('inlinemessage.error.color')};
     box-shadow: ${dt('inlinemessage.error.shadow')};
 }
+
 .p-inline-message-error .p-inline-message-icon {
     color: ${dt('inlinemessage.error.color')};
 }
@@ -75,6 +80,7 @@ const theme = ({ dt }) => `
     color: ${dt('inlinemessage.secondary.color')};
     box-shadow: ${dt('inlinemessage.secondary.shadow')};
 }
+
 .p-inline-message-secondary .p-inline-message-icon {
     color: ${dt('inlinemessage.secondary.color')};
 }
@@ -85,13 +91,10 @@ const theme = ({ dt }) => `
     color: ${dt('inlinemessage.contrast.color')};
     box-shadow: ${dt('inlinemessage.contrast.shadow')};
 }
+
 .p-inline-message-contrast .p-inline-message-icon {
     color: ${dt('inlinemessage.contrast.color')};
 }
-
-.p-inline-message-icon-only .p-inline-message-icon {
-    margin-right: 0;
-}
 `;
 
 const classes = {

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

@@ -1,4 +1,15 @@
 export default {
+    root: {
+        padding: '{form.field.padding.y} {form.field.padding.x}',
+        borderRadius: '{content.border.radius}',
+        gap: '0.5rem'
+    },
+    text: {
+        fontWeight: '500'
+    },
+    icon: {
+        size: '1rem'
+    },
     colorScheme: {
         light: {
             info: {

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

@@ -1,41 +1,52 @@
 export default {
+    root: {
+        padding: '{form.field.padding.y} {form.field.padding.x}',
+        borderRadius: '{content.border.radius}',
+        gap: '0.5rem'
+    },
+    text: {
+        fontWeight: '500'
+    },
+    icon: {
+        size: '1.125rem'
+    },
     colorScheme: {
         light: {
             info: {
                 background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
                 borderColor: '{blue.200}',
                 color: '{blue.600}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)'
+                shadow: 'none'
             },
             success: {
                 background: 'color-mix(in srgb, {green.50}, transparent 5%)',
                 borderColor: '{green.200}',
                 color: '{green.600}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)'
+                shadow: 'none'
             },
             warn: {
                 background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
                 borderColor: '{yellow.200}',
                 color: '{yellow.600}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)'
+                shadow: 'none'
             },
             error: {
                 background: 'color-mix(in srgb, {red.50}, transparent 5%)',
                 borderColor: '{red.200}',
                 color: '{red.600}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)'
+                shadow: 'none'
             },
             secondary: {
                 background: '{surface.100}',
                 borderColor: '{surface.200}',
                 color: '{surface.600}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)'
+                shadow: 'none'
             },
             contrast: {
                 background: '{surface.900}',
                 borderColor: '{surface.950}',
                 color: '{surface.50}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)'
+                shadow: 'none'
             }
         },
         dark: {
@@ -43,37 +54,37 @@ export default {
                 background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
                 color: '{blue.500}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)'
+                shadow: 'none'
             },
             success: {
                 background: 'color-mix(in srgb, {green.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
                 color: '{green.500}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)'
+                shadow: 'none'
             },
             warn: {
                 background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
                 color: '{yellow.500}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)'
+                shadow: 'none'
             },
             error: {
                 background: 'color-mix(in srgb, {red.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
                 color: '{red.500}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)'
+                shadow: 'none'
             },
             secondary: {
                 background: '{surface.800}',
                 borderColor: '{surface.700}',
                 color: '{surface.300}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)'
+                shadow: 'none'
             },
             contrast: {
                 background: '{surface.0}',
                 borderColor: '{surface.100}',
                 color: '{surface.950}',
-                boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)'
+                shadow: 'none'
             }
         }
     }

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

@@ -33,7 +33,7 @@ export default {
                 background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
                 borderColor: '{blue.200}',
                 color: '{blue.600}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
+                shadow: 'none',
                 closeButton: {
                     hoverBackground: '{blue.100}',
                     focusRing: {
@@ -46,7 +46,7 @@ export default {
                 background: 'color-mix(in srgb, {green.50}, transparent 5%)',
                 borderColor: '{green.200}',
                 color: '{green.600}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
+                shadow: 'none',
                 closeButton: {
                     hoverBackground: '{green.100}',
                     focusRing: {
@@ -59,7 +59,7 @@ export default {
                 background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
                 borderColor: '{yellow.200}',
                 color: '{yellow.600}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
+                shadow: 'none',
                 closeButton: {
                     hoverBackground: '{yellow.100}',
                     focusRing: {
@@ -72,7 +72,7 @@ export default {
                 background: 'color-mix(in srgb, {red.50}, transparent 5%)',
                 borderColor: '{red.200}',
                 color: '{red.600}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
+                shadow: 'none',
                 closeButton: {
                     hoverBackground: '{red.100}',
                     focusRing: {
@@ -85,7 +85,7 @@ export default {
                 background: '{surface.100}',
                 borderColor: '{surface.200}',
                 color: '{surface.600}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
+                shadow: 'none',
                 closeButton: {
                     hoverBackground: '{surface.200}',
                     focusRing: {
@@ -98,7 +98,7 @@ export default {
                 background: '{surface.900}',
                 borderColor: '{surface.950}',
                 color: '{surface.50}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+                shadow: 'none',
                 closeButton: {
                     hoverBackground: '{surface.800}',
                     focusRing: {
@@ -113,7 +113,7 @@ export default {
                 background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
                 color: '{blue.500}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
+                shadow: 'none',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -126,7 +126,7 @@ export default {
                 background: 'color-mix(in srgb, {green.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
                 color: '{green.500}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
+                shadow: 'none',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -139,7 +139,7 @@ export default {
                 background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
                 color: '{yellow.500}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
+                shadow: 'none',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -152,7 +152,7 @@ export default {
                 background: 'color-mix(in srgb, {red.500}, transparent 84%)',
                 borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
                 color: '{red.500}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
+                shadow: 'none',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -165,7 +165,7 @@ export default {
                 background: '{surface.800}',
                 borderColor: '{surface.700}',
                 color: '{surface.300}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
+                shadow: 'none',
                 closeButton: {
                     hoverBackground: '{surface.700}',
                     focusRing: {
@@ -178,7 +178,7 @@ export default {
                 background: '{surface.0}',
                 borderColor: '{surface.100}',
                 color: '{surface.950}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+                shadow: 'none',
                 closeButton: {
                     hoverBackground: '{surface.100}',
                     focusRing: {

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

@@ -42,7 +42,7 @@ export default {
                 borderColor: '{blue.200}',
                 color: '{blue.600}',
                 detailColor: '{surface.700}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
+                shadow: '{overlay.popover.shadow}',
                 closeButton: {
                     hoverBackground: '{blue.100}',
                     focusRing: {
@@ -56,7 +56,7 @@ export default {
                 borderColor: '{green.200}',
                 color: '{green.600}',
                 detailColor: '{surface.700}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
+                shadow: '{overlay.popover.shadow}',
                 closeButton: {
                     hoverBackground: '{green.100}',
                     focusRing: {
@@ -70,7 +70,7 @@ export default {
                 borderColor: '{yellow.200}',
                 color: '{yellow.600}',
                 detailColor: '{surface.700}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
+                shadow: '{overlay.popover.shadow}',
                 closeButton: {
                     hoverBackground: '{yellow.100}',
                     focusRing: {
@@ -84,7 +84,7 @@ export default {
                 borderColor: '{red.200}',
                 color: '{red.600}',
                 detailColor: '{surface.700}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
+                shadow: '{overlay.popover.shadow}',
                 closeButton: {
                     hoverBackground: '{red.100}',
                     focusRing: {
@@ -98,7 +98,7 @@ export default {
                 borderColor: '{surface.200}',
                 color: '{surface.600}',
                 detailColor: '{surface.700}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
+                shadow: '{overlay.popover.shadow}',
                 closeButton: {
                     hoverBackground: '{surface.200}',
                     focusRing: {
@@ -112,7 +112,7 @@ export default {
                 borderColor: '{surface.950}',
                 color: '{surface.50}',
                 detailColor: '{surface.0}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+                shadow: '{overlay.popover.shadow}',
                 closeButton: {
                     hoverBackground: '{surface.800}',
                     focusRing: {
@@ -129,7 +129,7 @@ export default {
                 borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
                 color: '{blue.500}',
                 detailColor: '{surface.0}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
+                shadow: '{overlay.popover.shadow}',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -143,7 +143,7 @@ export default {
                 borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
                 color: '{green.500}',
                 detailColor: '{surface.0}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
+                shadow: '{overlay.popover.shadow}',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -157,7 +157,7 @@ export default {
                 borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
                 color: '{yellow.500}',
                 detailColor: '{surface.0}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
+                shadow: '{overlay.popover.shadow}',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -171,7 +171,7 @@ export default {
                 borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
                 color: '{red.500}',
                 detailColor: '{surface.0}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
+                shadow: '{overlay.popover.shadow}',
                 closeButton: {
                     hoverBackground: 'rgba(255, 255, 255, 0.05)',
                     focusRing: {
@@ -185,7 +185,7 @@ export default {
                 borderColor: '{surface.700}',
                 color: '{surface.300}',
                 detailColor: '{surface.0}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
+                shadow: '{overlay.popover.shadow}',
                 closeButton: {
                     hoverBackground: '{surface.700}',
                     focusRing: {
@@ -199,7 +199,7 @@ export default {
                 borderColor: '{surface.100}',
                 color: '{surface.950}',
                 detailColor: '{surface.950}',
-                shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+                shadow: '{overlay.popover.shadow}',
                 closeButton: {
                     hoverBackground: '{surface.100}',
                     focusRing: {