@webitel/styleguide 26.2.4 → 26.2.6

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

@@ -1,71 +1,71 @@
 const lightColors = {
-  root: {
-    borderColor: '{surface.50}'
-  },
-  activeImageContainer: {
-    background: '{white}'
-  },
-  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.50}'
-  },
-  thumbnailNavButton: {
-    hoverBackground: '{button.secondary.hoverBackground}',
-    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.200}',
-    hoverBackground: '{surface.300}',
-    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.100}',
-    color: '{text.color}',
-  },
-  footerIcon: {
-    color: '{surface.600}',
-    hoverColor: '{surface.750}',
-  }
+	root: {
+		borderColor: '{surface.50}',
+	},
+	activeImageContainer: {
+		background: '{white}',
+	},
+	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.50}',
+	},
+	thumbnailNavButton: {
+		hoverBackground: '{button.secondary.hoverBackground}',
+		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.200}',
+		hoverBackground: '{surface.300}',
+		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.100}',
+		color: '{text.color}',
+	},
+	footerIcon: {
+		color: '{surface.600}',
+		hoverColor: '{surface.750}',
+	},
 };
 
 export default lightColors;

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

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

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

@@ -1,91 +1,91 @@
 const sizes = {
-  root: {
-    borderWidth: '1px',
-    borderRadius: '{border.radius.lg}',
-    transitionDuration: '{transition.duration}'
-  },
-  mask: {
-    zIndex: '11'
-  },
-  activeImageContainer: {
-    width: '70vw',
-    height: 'calc(70vw / 16 * 9)',    // 16:9 aspect ratio
-  },
-  fullscreenImage: {
-    maxHeight: '85vh',
-    maxWidth: '100vw'
-  },
-  navButton: {
-    size: '2.5rem',
-    gutter: '1rem',
-    prev: {
-      borderRadius: '50%'
-    },
-    next: {
-      borderRadius: '50%'
-    },
-    focusRing: {
-      width: '{focus.ring.width}',
-      style: '{focus.ring.style}',
-      offset: '{focus.ring.offset}',
-    }
-  },
-  navIcon: {
-    size: '1.5rem'
-  },
-  thumbnailsContent: {
-    padding: '1rem 1rem'
-  },
-  thumbnailImage: {
-    width: '5rem',
-    height: '3.125rem',
-  },
-  thumbnailNavButton: {
-    size: '2.5rem',
-    borderRadius: '50%',
-    gutter: '0.5rem',
-    focusRing: {
-      width: '{focus.ring.width}',
-      style: '{focus.ring.style}',
-      offset: '{focus.ring.offset}',
-    }
-  },
-  thumbnailNavButtonIcon: {
-    size: '1rem'
-  },
-  caption: {
-    padding: '1rem'
-  },
-  indicatorList: {
-    gap: '0.5rem',
-    padding: '1rem'
-  },
-  indicatorButton: {
-    width: '1rem',
-    height: '1rem',
-    borderRadius: '50%',
-    focusRing: {
-      width: '{focus.ring.width}',
-      style: '{focus.ring.style}',
-      offset: '{focus.ring.offset}',
-    }
-  },
-  closeButton: {
-    size: '3rem',
-    gutter: '0.5rem',
-    borderRadius: '50%',
-    focusRing: {
-      width: '{focus.ring.width}',
-      style: '{focus.ring.style}',
-      offset: '{focus.ring.offset}',
-    }
-  },
-  closeButtonIcon: {
-    size: '1.5rem'
-  },
-  footer: {
-    padding: '0.5rem',
-  },
-}
+	root: {
+		borderWidth: '1px',
+		borderRadius: '{border.radius.lg}',
+		transitionDuration: '{transition.duration}',
+	},
+	mask: {
+		zIndex: '11',
+	},
+	activeImageContainer: {
+		width: '70vw',
+		height: 'calc(70vw / 16 * 9)', // 16:9 aspect ratio
+	},
+	fullscreenImage: {
+		maxHeight: '85vh',
+		maxWidth: '100vw',
+	},
+	navButton: {
+		size: '2.5rem',
+		gutter: '1rem',
+		prev: {
+			borderRadius: '50%',
+		},
+		next: {
+			borderRadius: '50%',
+		},
+		focusRing: {
+			width: '{focus.ring.width}',
+			style: '{focus.ring.style}',
+			offset: '{focus.ring.offset}',
+		},
+	},
+	navIcon: {
+		size: '1.5rem',
+	},
+	thumbnailsContent: {
+		padding: '1rem 1rem',
+	},
+	thumbnailImage: {
+		width: '5rem',
+		height: '3.125rem',
+	},
+	thumbnailNavButton: {
+		size: '2.5rem',
+		borderRadius: '50%',
+		gutter: '0.5rem',
+		focusRing: {
+			width: '{focus.ring.width}',
+			style: '{focus.ring.style}',
+			offset: '{focus.ring.offset}',
+		},
+	},
+	thumbnailNavButtonIcon: {
+		size: '1rem',
+	},
+	caption: {
+		padding: '1rem',
+	},
+	indicatorList: {
+		gap: '0.5rem',
+		padding: '1rem',
+	},
+	indicatorButton: {
+		width: '1rem',
+		height: '1rem',
+		borderRadius: '50%',
+		focusRing: {
+			width: '{focus.ring.width}',
+			style: '{focus.ring.style}',
+			offset: '{focus.ring.offset}',
+		},
+	},
+	closeButton: {
+		size: '3rem',
+		gutter: '0.5rem',
+		borderRadius: '50%',
+		focusRing: {
+			width: '{focus.ring.width}',
+			style: '{focus.ring.style}',
+			offset: '{focus.ring.offset}',
+		},
+	},
+	closeButtonIcon: {
+		size: '1.5rem',
+	},
+	footer: {
+		padding: '0.5rem',
+	},
+};
 
-export default sizes
+export default sizes;

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

@@ -1,47 +1,47 @@
-import AvatarScheme from "./avatar";
-import BadgeScheme from "./badge";
-import BreadcrumbScheme from "./breadcrumb";
+import AvatarScheme from './avatar';
+import BadgeScheme from './badge';
+import BreadcrumbScheme from './breadcrumb';
 import ButtonScheme from './button';
-import CheckboxScheme from "./checkbox";
-import ChipScheme from "./chip";
-import DividerScheme from "./divider";
-import GalleriaScheme from "./galleria";
+import CheckboxScheme from './checkbox';
+import ChipScheme from './chip';
+import DividerScheme from './divider';
+import GalleriaScheme from './galleria';
+import InputGroupScheme from './input-group';
+import InputNumberScheme from './input-number';
+import InputTextScheme from './input-text';
 import MenubarScheme from './menubar';
+import MessageScheme from './message';
+import PasswordScheme from './password';
 import PopoverScheme from './popover';
-import RadioScheme from "./radio";
-import SliderScheme from "./slider";
-import SwitcherScheme from "./switcher";
-import TableScheme from "./table";
-import TextareaScheme from "./textarea";
+import RadioScheme from './radio';
+import SliderScheme from './slider';
+import SwitcherScheme from './switcher';
+import TableScheme from './table';
+import TextareaScheme from './textarea';
 import ToolbarScheme from './toolbar';
 import TooltipScheme from './tooltip';
-import InputNumberScheme from "./input-number";
-import InputTextScheme from "./input-text";
-import PasswordScheme from "./password";
-import InputGroupScheme from "./input-group";
-import MessageScheme from "./message";
 
 export {
-  AvatarScheme,
-  ButtonScheme,
-  BadgeScheme,
-  PopoverScheme,
-  TooltipScheme,
-  MenubarScheme,
-  ToolbarScheme,
-  ChipScheme,
-  CheckboxScheme,
-  TableScheme,
-  TextareaScheme,
-  SwitcherScheme,
-  DividerScheme,
-  SliderScheme,
-  BreadcrumbScheme,
-  RadioScheme,
-  GalleriaScheme,
-  InputNumberScheme,
-  InputTextScheme,
-  PasswordScheme,
-  InputGroupScheme,
-  MessageScheme,
-}
+	AvatarScheme,
+	ButtonScheme,
+	BadgeScheme,
+	PopoverScheme,
+	TooltipScheme,
+	MenubarScheme,
+	ToolbarScheme,
+	ChipScheme,
+	CheckboxScheme,
+	TableScheme,
+	TextareaScheme,
+	SwitcherScheme,
+	DividerScheme,
+	SliderScheme,
+	BreadcrumbScheme,
+	RadioScheme,
+	GalleriaScheme,
+	InputNumberScheme,
+	InputTextScheme,
+	PasswordScheme,
+	InputGroupScheme,
+	MessageScheme,
+};

package/src/lib/primevue/components/input-group/colors/dark/index.ts

@@ -1,9 +1,9 @@
 const darkColors = {
-  addon: {
-    background: '{form.field.background}',
-    borderColor: '{form.field.border.color}',
-    color: '{form.field.icon.color}'
-  }
-}
+	addon: {
+		background: '{form.field.background}',
+		borderColor: '{form.field.border.color}',
+		color: '{form.field.icon.color}',
+	},
+};
 
-export default darkColors
+export default darkColors;

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

@@ -1,9 +1,9 @@
 const lightColors = {
-  addon: {
-    background: '{form.field.background}',
-    borderColor: '{form.field.border.color}',
-    color: '{form.field.icon.color}'
-  }
-}
+	addon: {
+		background: '{form.field.background}',
+		borderColor: '{form.field.border.color}',
+		color: '{form.field.icon.color}',
+	},
+};
 
-export default lightColors
+export default lightColors;

package/src/lib/primevue/components/input-group/index.ts

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

package/src/lib/primevue/components/input-group/sizes/index.ts

@@ -1,9 +1,9 @@
 const sizes = {
-  addon: {
-    borderRadius: '{form.field.border.radius}',
-    padding: '0.5rem',
-    minWidth: '2.5rem'
-  }
-}
+	addon: {
+		borderRadius: '{form.field.border.radius}',
+		padding: '0.5rem',
+		minWidth: '2.5rem',
+	},
+};
 
-export default sizes
+export default sizes;

package/src/lib/primevue/components/input-number/colors/dark/index.ts

@@ -1,15 +1,15 @@
 const darkColors = {
-  button: {
-    background: 'transparent',
-    hoverBackground: '{surface.700}',
-    activeBackground: '{surface.750}',
-    borderColor: '{form.field.border.color}',
-    hoverBorderColor: '{form.field.hover.border.color}',
-    activeBorderColor: '{form.field.border.color}',
-    color: '{surface.400}',
-    hoverColor: '{surface.300}',
-    activeColor: '{surface.200}'
-  }
-}
+	button: {
+		background: 'transparent',
+		hoverBackground: '{surface.700}',
+		activeBackground: '{surface.750}',
+		borderColor: '{form.field.border.color}',
+		hoverBorderColor: '{form.field.hover.border.color}',
+		activeBorderColor: '{form.field.border.color}',
+		color: '{surface.400}',
+		hoverColor: '{surface.300}',
+		activeColor: '{surface.200}',
+	},
+};
 
-export default darkColors
+export default darkColors;

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

@@ -1,15 +1,15 @@
 const lightColors = {
-  button: {
-    background: 'transparent',
-    hoverBackground: '{surface.50}',
-    activeBackground: '{surface.100}',
-    borderColor: '{form.field.border.color}',
-    hoverBorderColor: '{form.field.hover.border.color}',
-    activeBorderColor: '{form.field.border.color}',
-    color: '{surface.400}',
-    hoverColor: '{surface.500}',
-    activeColor: '{surface.600}'
-  }
-}
+	button: {
+		background: 'transparent',
+		hoverBackground: '{surface.50}',
+		activeBackground: '{surface.100}',
+		borderColor: '{form.field.border.color}',
+		hoverBorderColor: '{form.field.hover.border.color}',
+		activeBorderColor: '{form.field.border.color}',
+		color: '{surface.400}',
+		hoverColor: '{surface.500}',
+		activeColor: '{surface.600}',
+	},
+};
 
-export default lightColors
+export default lightColors;

package/src/lib/primevue/components/input-number/index.ts

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

package/src/lib/primevue/components/input-number/sizes/index.ts

@@ -1,12 +1,12 @@
 const sizes = {
-  root: {
-    transitionDuration: '{transition.duration}'
-  },
-  button: {
-    width: '2rem',
-    borderRadius: '{form.field.border.radius}',
-    verticalPadding: '{form.field.padding.y}'
-  }
-}
+	root: {
+		transitionDuration: '{transition.duration}',
+	},
+	button: {
+		width: '2rem',
+		borderRadius: '{form.field.border.radius}',
+		verticalPadding: '{form.field.padding.y}',
+	},
+};
 
-export default sizes
+export default sizes;