@webitel/styleguide 26.2.4 → 26.2.6

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

@@ -1,31 +1,31 @@
 const lightColors = {
-  root: {
-    background: '{transparent}',
-    checkedBackground: '{surface.700}',
-    checkedHoverBackground: '{surface.600}',
-    disabledBackground: '{surface.200}',
-    filledBackground: '{form.field.filled.background}',
-    borderColor: '{surface.700}',
-    hoverBorderColor: '{surface.600}',
-    focusBorderColor: '{focus-color}',
-    checkedBorderColor: '{surface.700}',
-    checkedHoverBorderColor: '{surface.600}',
-    checkedFocusBorderColor: '{focus-color}',
-    checkedDisabledBorderColor: '{surface.200}',
-    invalidBorderColor: '{form.field.invalid.border.color}',
-    shadow: '{form.field.shadow}',
-    focusRing: {
-      color: '{focus-color}',
-      shadow: '{focus.ring.shadow}'
-    },
-    transitionDuration: '{form.field.transition.duration}',
-  },
-  icon: {
-    color: '{form.field.color}',
-    checkedColor: '{surface.0}',
-    checkedHoverColor: '{surface.0}',
-    disabledColor: '{surface.400}',
-  }
-}
+	root: {
+		background: '{transparent}',
+		checkedBackground: '{surface.700}',
+		checkedHoverBackground: '{surface.600}',
+		disabledBackground: '{surface.200}',
+		filledBackground: '{form.field.filled.background}',
+		borderColor: '{surface.700}',
+		hoverBorderColor: '{surface.600}',
+		focusBorderColor: '{focus-color}',
+		checkedBorderColor: '{surface.700}',
+		checkedHoverBorderColor: '{surface.600}',
+		checkedFocusBorderColor: '{focus-color}',
+		checkedDisabledBorderColor: '{surface.200}',
+		invalidBorderColor: '{form.field.invalid.border.color}',
+		shadow: '{form.field.shadow}',
+		focusRing: {
+			color: '{focus-color}',
+			shadow: '{focus.ring.shadow}',
+		},
+		transitionDuration: '{form.field.transition.duration}',
+	},
+	icon: {
+		color: '{form.field.color}',
+		checkedColor: '{surface.0}',
+		checkedHoverColor: '{surface.0}',
+		disabledColor: '{surface.400}',
+	},
+};
 
-export default lightColors
+export default lightColors;

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

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

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

@@ -1,33 +1,33 @@
 const sizes = {
-  root: {
-    borderRadius: '{border.radius.sm}',
-    width: '1.125rem',
-    height: '1.125rem',
-    wrapperWidth: '1.5rem',
-    wrapperHeight: '1.5rem',
-    sm: {
-      width: '1rem',
-      height: '1rem'
-    },
-    lg: {
-      width: '1.10rem',
-      height: '1.10rem'
-    },
-    focusRing: {
-      width: '{focus.ring.width}',
-      style: '{focus.ring.style}',
-      offset: '{focus.ring.offset}',
-    }
-  },
-  icon: {
-    size: '0.75rem',
-    sm: {
-      size: '0.75rem'
-    },
-    lg: {
-      size: '1rem'
-    }
-  }
-}
+	root: {
+		borderRadius: '{border.radius.sm}',
+		width: '1.125rem',
+		height: '1.125rem',
+		wrapperWidth: '1.5rem',
+		wrapperHeight: '1.5rem',
+		sm: {
+			width: '1rem',
+			height: '1rem',
+		},
+		lg: {
+			width: '1.10rem',
+			height: '1.10rem',
+		},
+		focusRing: {
+			width: '{focus.ring.width}',
+			style: '{focus.ring.style}',
+			offset: '{focus.ring.offset}',
+		},
+	},
+	icon: {
+		size: '0.75rem',
+		sm: {
+			size: '0.75rem',
+		},
+		lg: {
+			size: '1rem',
+		},
+	},
+};
 
-export default sizes
+export default sizes;

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

@@ -1,53 +1,53 @@
 const darkColors = {
-  background: '{surface.100}',
-  color: '{surface.800}',
-  main: {
-    background: '{amber.650}',
-    color: '{amber.950}',
-    iconColor: '{amber.900}',
-    iconHoverColor: '{amber.950}'
-  },
-  primary: {
-    background: '{primary.color}',
-    color: '{primary.foreground}',
-    iconColor: '{primary.foreground}',
-    iconHoverColor: '{primary.foregroundHover}'
-  },
-  secondary: {
-    background: '{secondary.color}',
-    color: '{secondary.foreground}',
-    iconColor: '{secondary.foreground}',
-    iconHoverColor: '{secondary.foregroundHover}'
-  },
-  success: {
-    background: '{success.color}',
-    color: '{success.foreground}',
-    iconColor: '{success.foreground}',
-    iconHoverColor: '{success.foregroundHover}'
-  },
-  warning: {
-    background: '{warn.color}',
-    color: '{warn.foreground}',
-    iconColor: '{warn.foreground}',
-    iconHoverColor: '{warn.foregroundHover}'
-  },
-  error: {
-    background: '{error.color}',
-    color: '{error.foreground}',
-    iconColor: '{error.foreground}',
-    iconHoverColor: '{error.foregroundHover}'
-  },
-  transfer: {
-    background: '{transfer.color}',
-    color: '{transfer.foreground}',
-    iconColor: '{transfer.foreground}',
-    iconHoverColor: '{transfer.foregroundHover}'
-  },
-  removeIcon: {
-    focusRing: {
-      shadow: '{form.field.focus.ring.shadow}'
-    },
-  }
-}
+	background: '{surface.100}',
+	color: '{surface.800}',
+	main: {
+		background: '{amber.650}',
+		color: '{amber.950}',
+		iconColor: '{amber.900}',
+		iconHoverColor: '{amber.950}',
+	},
+	primary: {
+		background: '{primary.color}',
+		color: '{primary.foreground}',
+		iconColor: '{primary.foreground}',
+		iconHoverColor: '{primary.foregroundHover}',
+	},
+	secondary: {
+		background: '{secondary.color}',
+		color: '{secondary.foreground}',
+		iconColor: '{secondary.foreground}',
+		iconHoverColor: '{secondary.foregroundHover}',
+	},
+	success: {
+		background: '{success.color}',
+		color: '{success.foreground}',
+		iconColor: '{success.foreground}',
+		iconHoverColor: '{success.foregroundHover}',
+	},
+	warning: {
+		background: '{warn.color}',
+		color: '{warn.foreground}',
+		iconColor: '{warn.foreground}',
+		iconHoverColor: '{warn.foregroundHover}',
+	},
+	error: {
+		background: '{error.color}',
+		color: '{error.foreground}',
+		iconColor: '{error.foreground}',
+		iconHoverColor: '{error.foregroundHover}',
+	},
+	transfer: {
+		background: '{transfer.color}',
+		color: '{transfer.foreground}',
+		iconColor: '{transfer.foreground}',
+		iconHoverColor: '{transfer.foregroundHover}',
+	},
+	removeIcon: {
+		focusRing: {
+			shadow: '{form.field.focus.ring.shadow}',
+		},
+	},
+};
 
-export default darkColors
+export default darkColors;

package/src/lib/primevue/components/chip/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/chip/colors/light/index.ts

@@ -1,53 +1,53 @@
 const lightColors = {
-  background: '{surface.200}',
-  color: '{surface.800}',
-  main: {
-    background: '{amber.200}',
-    color: '{amber.950}',
-    iconColor: '{amber.800}',
-    iconHoverColor: '{amber.850}'
-  },
-  primary: {
-    background: '{primary.color}',
-    color: '{primary.foreground}',
-    iconColor: '{primary.foreground}',
-    iconHoverColor: '{primary.foregroundHover}'
-  },
-  secondary: {
-    background: '{secondary.color}',
-    color: '{secondary.foreground}',
-    iconColor: '{secondary.foreground}',
-    iconHoverColor: '{secondary.foregroundHover}'
-  },
-  success: {
-    background: '{success.color}',
-    color: '{success.foreground}',
-    iconColor: '{success.foreground}',
-    iconHoverColor: '{success.foregroundHover}'
-  },
-  warning: {
-    background: '{warn.color}',
-    color: '{warn.foreground}',
-    iconColor: '{warn.foreground}',
-    iconHoverColor: '{warn.foregroundHover}'
-  },
-  error: {
-    background: '{error.color}',
-    color: '{error.foreground}',
-    iconColor: '{error.foreground}',
-    iconHoverColor: '{error.foregroundHover}'
-  },
-  transfer: {
-    background: '{transfer.color}',
-    color: '{transfer.foreground}',
-    iconColor: '{transfer.foreground}',
-    iconHoverColor: '{transfer.foregroundHover}'
-  },
-  removeIcon: {
-    focusRing: {
-      shadow: '{form.field.focus.ring.shadow}'
-    },
-  }
-}
+	background: '{surface.200}',
+	color: '{surface.800}',
+	main: {
+		background: '{amber.200}',
+		color: '{amber.950}',
+		iconColor: '{amber.800}',
+		iconHoverColor: '{amber.850}',
+	},
+	primary: {
+		background: '{primary.color}',
+		color: '{primary.foreground}',
+		iconColor: '{primary.foreground}',
+		iconHoverColor: '{primary.foregroundHover}',
+	},
+	secondary: {
+		background: '{secondary.color}',
+		color: '{secondary.foreground}',
+		iconColor: '{secondary.foreground}',
+		iconHoverColor: '{secondary.foregroundHover}',
+	},
+	success: {
+		background: '{success.color}',
+		color: '{success.foreground}',
+		iconColor: '{success.foreground}',
+		iconHoverColor: '{success.foregroundHover}',
+	},
+	warning: {
+		background: '{warn.color}',
+		color: '{warn.foreground}',
+		iconColor: '{warn.foreground}',
+		iconHoverColor: '{warn.foregroundHover}',
+	},
+	error: {
+		background: '{error.color}',
+		color: '{error.foreground}',
+		iconColor: '{error.foreground}',
+		iconHoverColor: '{error.foregroundHover}',
+	},
+	transfer: {
+		background: '{transfer.color}',
+		color: '{transfer.foreground}',
+		iconColor: '{transfer.foreground}',
+		iconHoverColor: '{transfer.foregroundHover}',
+	},
+	removeIcon: {
+		focusRing: {
+			shadow: '{form.field.focus.ring.shadow}',
+		},
+	},
+};
 
-export default lightColors
+export default lightColors;

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

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

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

@@ -1,17 +1,17 @@
 const sizes = {
-  borderRadius: '16px',
-  paddingX: '0.5rem',
-  paddingY: '0.25rem',
-  gap: '0.5rem',
-  transitionDuration: '{transition.duration}',
-  removeIcon: {
-    size: '1rem',
-    focusRing: {
-      width: '{focus.ring.width}',
-      style: '{focus.ring.style}',
-      offset: '{focus.ring.offset}',
-    }
-  }
-}
+	borderRadius: '16px',
+	paddingX: '0.5rem',
+	paddingY: '0.25rem',
+	gap: '0.5rem',
+	transitionDuration: '{transition.duration}',
+	removeIcon: {
+		size: '1rem',
+		focusRing: {
+			width: '{focus.ring.width}',
+			style: '{focus.ring.style}',
+			offset: '{focus.ring.offset}',
+		},
+	},
+};
 
-export default sizes
+export default sizes;

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

@@ -1,11 +1,11 @@
 const darkColors = {
-  root: {
-    borderColor: '{content.border.color}'
-  },
-  content: {
-    background: '{content.background}',
-    color: '{text.color}'
-  }
-}
+	root: {
+		borderColor: '{content.border.color}',
+	},
+	content: {
+		background: '{content.background}',
+		color: '{text.color}',
+	},
+};
 
-export default darkColors
+export default darkColors;

package/src/lib/primevue/components/divider/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;
+export default colorScheme;

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

@@ -1,11 +1,11 @@
 const lightColors = {
-  root: {
-    borderColor: '{content.border.color}'
-  },
-  content: {
-    background: '{content.background}',
-    color: '{text.color}'
-  }
-}
+	root: {
+		borderColor: '{content.border.color}',
+	},
+	content: {
+		background: '{content.background}',
+		color: '{text.color}',
+	},
+};
 
-export default lightColors
+export default lightColors;

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

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

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

@@ -1,18 +1,18 @@
 const sizes = {
-  horizontal: {
-    margin: '0',
-    padding: '0',
-    content: {
-        padding: '0 0.5rem'
-    }
-  },
-  vertical: {
-    margin: '0',
-    padding: '0',
-    content: {
-        padding: '0.5rem 0'
-    }
-  }
-}
+	horizontal: {
+		margin: '0',
+		padding: '0',
+		content: {
+			padding: '0 0.5rem',
+		},
+	},
+	vertical: {
+		margin: '0',
+		padding: '0',
+		content: {
+			padding: '0.5rem 0',
+		},
+	},
+};
 
-export default sizes
+export default sizes;

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

@@ -1,71 +1,71 @@
 const darkColors = {
-  root: {
-    borderColor: '{surface.850}'
-  },
-  activeImageContainer: {
-    background: '{black}'
-  },
-  navButton: {
-    background: '{button.secondary.background}',
-    hoverBackground: '{button.secondary.hoverBackground}',
-    color: '{button.secondary.color}',
-    hoverColor: '{button.secondary.hoverColor}',
-    focusRing: {
-      color: '{focus.ring.color}',
-      shadow: '{focus.ring.shadow}'
-    }
-  },
-  thumbnailsContent: {
-    background: '{surface.850}'
-  },
-  thumbnailNavButton: {
-    hoverBackground: '{surface.800}',
-    color: '{button.secondary.color}',
-    hoverColor: '{button.secondary.hoverColor}',
-    focusRing: {
-      color: '{focus.ring.color}',
-      shadow: '{focus.ring.shadow}'
-    }
-  },
-  caption: {
-    background: 'rgba(0, 0, 0, 0.5)',
-    color: '{surface.100}'
-  },
-  indicatorButton: {
-    background: '{surface.700}',
-    hoverBackground: '{surface.600}',
-    activeBackground: '{primary.color}',
-    focusRing: {
-      color: '{focus.ring.color}',
-      shadow: '{focus.ring.shadow}'
-    }
-  },
-  insetIndicatorList: {
-    background: 'rgba(0, 0, 0, 0.5)'
-  },
-  insetIndicatorButton: {
-    background: 'rgba(255, 255, 255, 0.4)',
-    hoverBackground: 'rgba(255, 255, 255, 0.6)',
-    activeBackground: 'rgba(255, 255, 255, 0.9)'
-  },
-  closeButton: {
-    background: 'rgba(255, 255, 255, 0.1)',
-    hoverBackground: 'rgba(255, 255, 255, 0.2)',
-    color: '{surface.50}',
-    hoverColor: '{surface.0}',
-    focusRing: {
-      color: '{focus.ring.color}',
-      shadow: '{focus.ring.shadow}'
-    }
-  },
-  footer: {
-    background: '{surface.900}',
-    color: '{text.color}',
-  },
-  footerIcon: {
-    color: '{surface.600}',
-    hoverColor: '{surface.450}',
-  }
+	root: {
+		borderColor: '{surface.850}',
+	},
+	activeImageContainer: {
+		background: '{black}',
+	},
+	navButton: {
+		background: '{button.secondary.background}',
+		hoverBackground: '{button.secondary.hoverBackground}',
+		color: '{button.secondary.color}',
+		hoverColor: '{button.secondary.hoverColor}',
+		focusRing: {
+			color: '{focus.ring.color}',
+			shadow: '{focus.ring.shadow}',
+		},
+	},
+	thumbnailsContent: {
+		background: '{surface.850}',
+	},
+	thumbnailNavButton: {
+		hoverBackground: '{surface.800}',
+		color: '{button.secondary.color}',
+		hoverColor: '{button.secondary.hoverColor}',
+		focusRing: {
+			color: '{focus.ring.color}',
+			shadow: '{focus.ring.shadow}',
+		},
+	},
+	caption: {
+		background: 'rgba(0, 0, 0, 0.5)',
+		color: '{surface.100}',
+	},
+	indicatorButton: {
+		background: '{surface.700}',
+		hoverBackground: '{surface.600}',
+		activeBackground: '{primary.color}',
+		focusRing: {
+			color: '{focus.ring.color}',
+			shadow: '{focus.ring.shadow}',
+		},
+	},
+	insetIndicatorList: {
+		background: 'rgba(0, 0, 0, 0.5)',
+	},
+	insetIndicatorButton: {
+		background: 'rgba(255, 255, 255, 0.4)',
+		hoverBackground: 'rgba(255, 255, 255, 0.6)',
+		activeBackground: 'rgba(255, 255, 255, 0.9)',
+	},
+	closeButton: {
+		background: 'rgba(255, 255, 255, 0.1)',
+		hoverBackground: 'rgba(255, 255, 255, 0.2)',
+		color: '{surface.50}',
+		hoverColor: '{surface.0}',
+		focusRing: {
+			color: '{focus.ring.color}',
+			shadow: '{focus.ring.shadow}',
+		},
+	},
+	footer: {
+		background: '{surface.900}',
+		color: '{text.color}',
+	},
+	footerIcon: {
+		color: '{surface.600}',
+		hoverColor: '{surface.450}',
+	},
 };
 
 export default darkColors;