@webitel/styleguide 26.2.4 → 26.2.6

package/src/lib/primevue/components/message/colors/light/index.ts

@@ -1,142 +1,146 @@
 const lightColors = {
-  info: {
-    background: '{info.highlightColor}',
-    borderColor: '{info.color}',
-    color: '{info.color}',
-    shadow: '0px 4px 8px 0px color-mix(in srgb, {info.color}, transparent 96%)',
-    closeButton: {
-      hoverBackground: '{info.foreground}',
-      focusRing: {
-        color: '{info.color}',
-        shadow: 'none'
-      }
-    },
-    outlined: {
-      color: '{info.color}',
-      borderColor: '{info.color}',
-      closeButton: {
-        hoverBackground: '{info.foreground}',
-      }
-    },
-    simple: {
-      color: '{info.color}'
-    }
-  },
-  success: {
-    background: '{success.highlightColor}',
-    borderColor: '{success.color}',
-    color: '{success.color}',
-    shadow: '0px 4px 8px 0px color-mix(in srgb, {success.color}, transparent 96%)',
-    closeButton: {
-      hoverBackground: '{success.foreground}',
-      focusRing: {
-        color: '{success.color}',
-        shadow: 'none'
-      }
-    },
-    outlined: {
-      color: '{success.color}',
-      borderColor: '{success.color}',
-      closeButton: {
-        hoverBackground: '{success.foreground}',
-      }
-    },
-    simple: {
-      color: '{success.color}'
-    }
-  },
-  warn: {
-    background: '{warn.highlightColor}',
-    borderColor: '{warn.color}',
-    color: '{warn.color}',
-    shadow: '0px 4px 8px 0px color-mix(in srgb, {warn.color}, transparent 96%)',
-    closeButton: {
-      hoverBackground: '{warn.foreground}',
-      focusRing: {
-        color: '{warn.color}',
-        shadow: 'none'
-      }
-    },
-    outlined: {
-      color: '{warn.color}',
-      borderColor: '{warn.color}',
-      closeButton: {
-        hoverBackground: '{warn.foreground}',
-      }
-    },
-    simple: {
-      color: '{warn.color}'
-    }
-  },
-  error: {
-    background: '{error.highlightColor}',
-    borderColor: '{error.color}',
-    color: '{error.color}',
-    shadow: '0px 4px 8px 0px color-mix(in srgb, {error.color}, transparent 96%)',
-    closeButton: {
-      hoverBackground: '{error.foreground}',
-      focusRing: {
-        color: '{error.color}',
-        shadow: 'none'
-      }
-    },
-    outlined: {
-      color: '{error.color}',
-      borderColor: '{error.color}',
-      closeButton: {
-        hoverBackground: '{error.foreground}',
-      }
-    },
-    simple: {
-      color: '{error.color}'
-    }
-  },
-  secondary: {
-    background: '{secondary.highlightColor}',
-    borderColor: '{secondary.color}',
-    color: '{secondary.foreground}',
-    shadow: '0px 4px 8px 0px color-mix(in srgb, {secondary.color}, transparent 96%)',
-    closeButton: {
-      hoverBackground: '{secondary.color}',
-      focusRing: {
-        color: '{secondary.color}',
-        shadow: 'none'
-      }
-    },
-    outlined: {
-      color: '{secondary.foreground}',
-      borderColor: '{secondary.color}',
-      closeButton: {
-        hoverBackground: '{secondary.highlightColor}',
-      }
-    },
-    simple: {
-      color: '{secondary.foreground}'
-    }
-  },
-  contrast: {
-    background: '{surface.850}',
-    borderColor: '{surface.950}',
-    color: '{surface.50}',
-    shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
-    closeButton: {
-      hoverBackground: '{surface.800}',
-      focusRing: {
-        color: '{surface.50}',
-        shadow: 'none'
-      }
-    },
-    outlined: {
-      color: '{surface.950}',
-      borderColor: '{surface.950}',
-      closeButton: {
-        hoverBackground: '{surface.50}',
-      }
-    },
-    simple: {
-      color: '{surface.950}'
-    }
-  }
+	info: {
+		background: '{info.highlightColor}',
+		borderColor: '{info.color}',
+		color: '{info.color}',
+		shadow: '0px 4px 8px 0px color-mix(in srgb, {info.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{info.foreground}',
+			focusRing: {
+				color: '{info.color}',
+				shadow: 'none',
+			},
+		},
+		outlined: {
+			color: '{info.color}',
+			borderColor: '{info.color}',
+			closeButton: {
+				hoverBackground: '{info.foreground}',
+			},
+		},
+		simple: {
+			color: '{info.color}',
+		},
+	},
+	success: {
+		background: '{success.highlightColor}',
+		borderColor: '{success.color}',
+		color: '{success.color}',
+		shadow:
+			'0px 4px 8px 0px color-mix(in srgb, {success.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{success.foreground}',
+			focusRing: {
+				color: '{success.color}',
+				shadow: 'none',
+			},
+		},
+		outlined: {
+			color: '{success.color}',
+			borderColor: '{success.color}',
+			closeButton: {
+				hoverBackground: '{success.foreground}',
+			},
+		},
+		simple: {
+			color: '{success.color}',
+		},
+	},
+	warn: {
+		background: '{warn.highlightColor}',
+		borderColor: '{warn.color}',
+		color: '{warn.color}',
+		shadow: '0px 4px 8px 0px color-mix(in srgb, {warn.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{warn.foreground}',
+			focusRing: {
+				color: '{warn.color}',
+				shadow: 'none',
+			},
+		},
+		outlined: {
+			color: '{warn.color}',
+			borderColor: '{warn.color}',
+			closeButton: {
+				hoverBackground: '{warn.foreground}',
+			},
+		},
+		simple: {
+			color: '{warn.color}',
+		},
+	},
+	error: {
+		background: '{error.highlightColor}',
+		borderColor: '{error.color}',
+		color: '{error.color}',
+		shadow:
+			'0px 4px 8px 0px color-mix(in srgb, {error.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{error.foreground}',
+			focusRing: {
+				color: '{error.color}',
+				shadow: 'none',
+			},
+		},
+		outlined: {
+			color: '{error.color}',
+			borderColor: '{error.color}',
+			closeButton: {
+				hoverBackground: '{error.foreground}',
+			},
+		},
+		simple: {
+			color: '{error.color}',
+		},
+	},
+	secondary: {
+		background: '{secondary.highlightColor}',
+		borderColor: '{secondary.color}',
+		color: '{secondary.foreground}',
+		shadow:
+			'0px 4px 8px 0px color-mix(in srgb, {secondary.color}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{secondary.color}',
+			focusRing: {
+				color: '{secondary.color}',
+				shadow: 'none',
+			},
+		},
+		outlined: {
+			color: '{secondary.foreground}',
+			borderColor: '{secondary.color}',
+			closeButton: {
+				hoverBackground: '{secondary.highlightColor}',
+			},
+		},
+		simple: {
+			color: '{secondary.foreground}',
+		},
+	},
+	contrast: {
+		background: '{surface.850}',
+		borderColor: '{surface.950}',
+		color: '{surface.50}',
+		shadow:
+			'0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
+		closeButton: {
+			hoverBackground: '{surface.800}',
+			focusRing: {
+				color: '{surface.50}',
+				shadow: 'none',
+			},
+		},
+		outlined: {
+			color: '{surface.950}',
+			borderColor: '{surface.950}',
+			closeButton: {
+				hoverBackground: '{surface.50}',
+			},
+		},
+		simple: {
+			color: '{surface.950}',
+		},
+	},
 };
 
 export default lightColors;

package/src/lib/primevue/components/message/index.ts

@@ -2,8 +2,8 @@ import colorScheme from './colors';
 import sizes from './sizes';
 
 const MessageScheme = {
-  colorScheme,
-  sizes,
+	colorScheme,
+	sizes,
 };
 
 export default MessageScheme;

package/src/lib/primevue/components/message/sizes/index.ts

@@ -1,67 +1,67 @@
 const sizes = {
-  root: {
-    borderRadius: '{content.border.radius}',
-    borderWidth: '1px',
-    transitionDuration: '{transition.duration}'
-  },
-  content: {
-    padding: '0.5rem 0.75rem',
-    gap: '0.5rem',
-    sm: {
-      padding: '0.375rem 0.625rem'
-    },
-    lg: {
-      padding: '0.625rem 0.875rem'
-    }
-  },
-  text: {
-    fontSize: '1rem',
-    fontWeight: '500',
-    sm: {
-      fontSize: '0.75rem'
-    },
-    lg: {
-      fontSize: '1.125rem'
-    }
-  },
-  icon: {
-    size: '1.5rem',
-    sm: {
-      size: '1rem'
-    },
-    lg: {
-      size: '2rem'
-    }
-  },
-  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',
-    sm: {
-      size: '0.875rem'
-    },
-    lg: {
-      size: '1.125rem'
-    }
-  },
-  outlined: {
-    root: {
-      borderWidth: '1px'
-    }
-  },
-  simple: {
-    content: {
-      padding: '0.25rem 0.5rem',
-    }
-  }
+	root: {
+		borderRadius: '{content.border.radius}',
+		borderWidth: '1px',
+		transitionDuration: '{transition.duration}',
+	},
+	content: {
+		padding: '0.5rem 0.75rem',
+		gap: '0.5rem',
+		sm: {
+			padding: '0.375rem 0.625rem',
+		},
+		lg: {
+			padding: '0.625rem 0.875rem',
+		},
+	},
+	text: {
+		fontSize: '1rem',
+		fontWeight: '400',
+		sm: {
+			fontSize: '0.75rem',
+		},
+		lg: {
+			fontSize: '1.125rem',
+		},
+	},
+	icon: {
+		size: '1.5rem',
+		sm: {
+			size: '1rem',
+		},
+		lg: {
+			size: '2rem',
+		},
+	},
+	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',
+		sm: {
+			size: '0.875rem',
+		},
+		lg: {
+			size: '1.125rem',
+		},
+	},
+	outlined: {
+		root: {
+			borderWidth: '1px',
+		},
+	},
+	simple: {
+		content: {
+			padding: '0.25rem 0.5rem',
+		},
+	},
 };
 
 export default sizes;

package/src/lib/primevue/components/password/colors/dark/index.ts

@@ -1,21 +1,21 @@
 const darkColors = {
-  meter: {
-    background: '{content.border.color}'
-  },
-  icon: {
-    color: '{form.field.icon.color}'
-  },
-  overlay: {
-    background: '{overlay.popover.background}',
-    borderColor: '{overlay.popover.border.color}',
-    color: '{overlay.popover.color}',
-    shadow: '{overlay.popover.shadow}'
-  },
-  strength: {
-    weakBackground: '{error.color}',
-    mediumBackground: '{warn.color}',
-    strongBackground: '{success.color}'
-  }
-}
+	meter: {
+		background: '{content.border.color}',
+	},
+	icon: {
+		color: '{form.field.icon.color}',
+	},
+	overlay: {
+		background: '{overlay.popover.background}',
+		borderColor: '{overlay.popover.border.color}',
+		color: '{overlay.popover.color}',
+		shadow: '{overlay.popover.shadow}',
+	},
+	strength: {
+		weakBackground: '{error.color}',
+		mediumBackground: '{warn.color}',
+		strongBackground: '{success.color}',
+	},
+};
 
-export default darkColors
+export default darkColors;

package/src/lib/primevue/components/password/colors/index.ts

@@ -2,8 +2,8 @@ import darkColors from './dark';
 import lightColors from './light';
 
 const colorScheme = {
-  light: lightColors,
-  dark: darkColors
-}
+	light: lightColors,
+	dark: darkColors,
+};
 
 export default colorScheme;

package/src/lib/primevue/components/password/colors/light/index.ts

@@ -1,21 +1,21 @@
 const lightColors = {
-  meter: {
-    background: '{content.border.color}'
-  },
-  icon: {
-    color: '{form.field.icon.color}'
-  },
-  overlay: {
-    background: '{overlay.popover.background}',
-    borderColor: '{overlay.popover.border.color}',
-    color: '{overlay.popover.color}',
-    shadow: '{overlay.popover.shadow}'
-  },
-  strength: {
-    weakBackground: '{error.color}',
-    mediumBackground: '{warn.color}',
-    strongBackground: '{success.color}'
-  }
-}
+	meter: {
+		background: '{content.border.color}',
+	},
+	icon: {
+		color: '{form.field.icon.color}',
+	},
+	overlay: {
+		background: '{overlay.popover.background}',
+		borderColor: '{overlay.popover.border.color}',
+		color: '{overlay.popover.color}',
+		shadow: '{overlay.popover.shadow}',
+	},
+	strength: {
+		weakBackground: '{error.color}',
+		mediumBackground: '{warn.color}',
+		strongBackground: '{success.color}',
+	},
+};
 
-export default lightColors
+export default lightColors;

package/src/lib/primevue/components/password/index.ts

@@ -2,8 +2,8 @@ import colorScheme from './colors';
 import sizes from './sizes';
 
 const PasswordScheme = {
-  colorScheme,
-  sizes,
-}
+	colorScheme,
+	sizes,
+};
 
-export default PasswordScheme
+export default PasswordScheme;

package/src/lib/primevue/components/password/sizes/index.ts

@@ -1,15 +1,15 @@
 const sizes = {
-  meter: {
-    borderRadius: '{content.border.radius}',
-    height: '0.75rem'
-  },
-  overlay: {
-    borderRadius: '{overlay.popover.border.radius}',
-    padding: '{overlay.popover.padding}'
-  },
-  content: {
-    gap: '0.5rem'
-  }
-}
+	meter: {
+		borderRadius: '{content.border.radius}',
+		height: '0.75rem',
+	},
+	overlay: {
+		borderRadius: '{overlay.popover.border.radius}',
+		padding: '{overlay.popover.padding}',
+	},
+	content: {
+		gap: '0.5rem',
+	},
+};
 
-export default sizes
+export default sizes;

package/src/lib/primevue/components/popover/colors/dark/index.ts

@@ -1,7 +1,7 @@
 const darkColors = {
-  background: '{overlay.popover.background}',
-  borderColor: '{overlay.popover.borderColor}',
-  color: '{overlay.popover.color}',
-}
+	background: '{overlay.popover.background}',
+	borderColor: '{overlay.popover.borderColor}',
+	color: '{overlay.popover.color}',
+};
 
-export default darkColors
+export default darkColors;

package/src/lib/primevue/components/popover/colors/index.ts

@@ -2,8 +2,8 @@ import darkColors from './dark';
 import lightColors from './light';
 
 const colorScheme = {
-  light: lightColors,
-  dark: darkColors
-}
+	light: lightColors,
+	dark: darkColors,
+};
 
 export default colorScheme;

package/src/lib/primevue/components/popover/colors/light/index.ts

@@ -1,7 +1,7 @@
 const lightColors = {
-  background: '{overlay.popover.background}',
-  borderColor: '{overlay.popover.borderColor}',
-  color: '{overlay.popover.color}',
-}
+	background: '{overlay.popover.background}',
+	borderColor: '{overlay.popover.borderColor}',
+	color: '{overlay.popover.color}',
+};
 
-export default lightColors
+export default lightColors;

package/src/lib/primevue/components/popover/index.ts

@@ -2,9 +2,8 @@ import colorScheme from './colors';
 import sizes from './sizes';
 
 const PopoverScheme = {
-  colorScheme,
-  sizes,
-}
-
-export default PopoverScheme
+	colorScheme,
+	sizes,
+};
 
+export default PopoverScheme;

package/src/lib/primevue/components/popover/sizes/index.ts

@@ -1,9 +1,9 @@
 const sizes = {
-  padding: '{overlay.popover.padding}',
-  gutter: '0.5rem',
-  arrowOffset: '1rem',
-  borderRadius: '{overlay.popover.borderRadius}',
-  shadow: '{shadow.xs}',
+	padding: '{overlay.popover.padding}',
+	gutter: '0.5rem',
+	arrowOffset: '1rem',
+	borderRadius: '{overlay.popover.borderRadius}',
+	shadow: '{shadow.xs}',
 };
 
-export default sizes
+export default sizes;