@webitel/styleguide 26.2.4 → 26.2.6

package/src/lib/primevue/semantic/color-scheme/player/dark/index.ts

@@ -1,27 +1,27 @@
 export default {
-  player: {
-    counter: {
-      background: '{content.background}',
-      color: '{content.color}',
-    },
-    wrapper: {
-      background: '{surface.900}',
-      overlayColor: 'hsla(0, 0%, 0%, 0.8)',
-      mutedColor: 'hsl(224.706, 20%, 50%)',
-      color: '{white}',
-      borderColor: '{surface.750}',
-    },
-    headLine: {
-      background: '{transparent}',
-      hoverBackground: 'hsla(0, 0%, 0%, 0.5)',
-      iconColor: '{white}',
-      color: '{white}',
-      blur: '10px'
-    },
-    controlBar: {
-      background: '{content.background}',
-      iconColor: '{content.color}',
-      color: '{content.color}',
-    },
-  }
-}
+	player: {
+		counter: {
+			background: '{content.background}',
+			color: '{content.color}',
+		},
+		wrapper: {
+			background: '{surface.900}',
+			overlayColor: 'hsla(0, 0%, 0%, 0.8)',
+			mutedColor: 'hsl(224.706, 20%, 50%)',
+			color: '{white}',
+			borderColor: '{surface.750}',
+		},
+		headLine: {
+			background: '{transparent}',
+			hoverBackground: 'hsla(0, 0%, 0%, 0.5)',
+			iconColor: '{white}',
+			color: '{white}',
+			blur: '10px',
+		},
+		controlBar: {
+			background: '{content.background}',
+			iconColor: '{content.color}',
+			color: '{content.color}',
+		},
+	},
+};

package/src/lib/primevue/semantic/color-scheme/player/index.ts

@@ -1,9 +1,9 @@
-import light from "./light";
-import dark from "./dark";
+import dark from './dark';
+import light from './light';
 
 export default {
-  colorScheme: {
-    light,
-    dark,
-  },
-};
+	colorScheme: {
+		light,
+		dark,
+	},
+};

package/src/lib/primevue/semantic/color-scheme/player/light/index.ts

@@ -1,27 +1,27 @@
 export default {
-  player: {
-    counter: {
-      background: '{content.background}',
-      color: '{content.color}',
-    },
-    wrapper: {
-      background: '{surface.900}',
-      overlayColor: 'hsla(0, 0%, 0%, 0.8)',
-      mutedColor: 'hsl(224.706, 20%, 50%)',
-      color: '{white}',
-      borderColor: '{surface.750}',
-    },
-    headLine: {
-      background: '{transparent}',
-      hoverBackground: 'hsla(0, 0%, 0%, 0.5)',
-      iconColor: '{white}',
-      color: '{white}',
-      blur: '10px'
-    },
-    controlBar: {
-      background: '{content.background}',
-      iconColor: '{content.color}',
-      color: '{content.color}',
-    },
-  }
-}
+	player: {
+		counter: {
+			background: '{content.background}',
+			color: '{content.color}',
+		},
+		wrapper: {
+			background: '{surface.900}',
+			overlayColor: 'hsla(0, 0%, 0%, 0.8)',
+			mutedColor: 'hsl(224.706, 20%, 50%)',
+			color: '{white}',
+			borderColor: '{surface.750}',
+		},
+		headLine: {
+			background: '{transparent}',
+			hoverBackground: 'hsla(0, 0%, 0%, 0.5)',
+			iconColor: '{white}',
+			color: '{white}',
+			blur: '10px',
+		},
+		controlBar: {
+			background: '{content.background}',
+			iconColor: '{content.color}',
+			color: '{content.color}',
+		},
+	},
+};

package/src/lib/primevue/semantic/color-scheme/surface/dark/index.ts

@@ -1,24 +1,24 @@
 export default {
-  surface: {
-    0: '{gray.0}',
-    50: '{gray.50}',
-    100: '{gray.100}',
-    150: '{gray.150}',
-    200: '{gray.200}',
-    250: '{gray.250}',
-    300: '{gray.300}',
-    350: '{gray.350}',
-    400: '{gray.400}',
-    450: '{gray.450}',
-    500: '{gray.500}',
-    550: '{gray.550}',
-    600: '{gray.600}',
-    650: '{gray.650}',
-    700: '{gray.700}',
-    750: '{gray.750}',
-    800: '{gray.800}',
-    850: '{gray.850}',
-    900: '{gray.900}',
-    950: '{gray.950}'
-  }
-}
+	surface: {
+		0: '{gray.0}',
+		50: '{gray.50}',
+		100: '{gray.100}',
+		150: '{gray.150}',
+		200: '{gray.200}',
+		250: '{gray.250}',
+		300: '{gray.300}',
+		350: '{gray.350}',
+		400: '{gray.400}',
+		450: '{gray.450}',
+		500: '{gray.500}',
+		550: '{gray.550}',
+		600: '{gray.600}',
+		650: '{gray.650}',
+		700: '{gray.700}',
+		750: '{gray.750}',
+		800: '{gray.800}',
+		850: '{gray.850}',
+		900: '{gray.900}',
+		950: '{gray.950}',
+	},
+};

package/src/lib/primevue/semantic/color-scheme/surface/index.ts

@@ -1,9 +1,9 @@
-import light from "./light";
-import dark from "./dark";
+import dark from './dark';
+import light from './light';
 
 export default {
-  colorScheme: {
-    light,
-    dark,
-  },
-};
+	colorScheme: {
+		light,
+		dark,
+	},
+};

package/src/lib/primevue/semantic/color-scheme/surface/light/index.ts

@@ -1,24 +1,24 @@
 export default {
-  surface: {
-    0: '{gray.0}',
-    50: '{gray.50}',
-    100: '{gray.100}',
-    150: '{gray.150}',
-    200: '{gray.200}',
-    250: '{gray.250}',
-    300: '{gray.300}',
-    350: '{gray.350}',
-    400: '{gray.400}',
-    450: '{gray.450}',
-    500: '{gray.500}',
-    550: '{gray.550}',
-    600: '{gray.600}',
-    650: '{gray.650}',
-    700: '{gray.700}',
-    750: '{gray.750}',
-    800: '{gray.800}',
-    850: '{gray.850}',
-    900: '{gray.900}',
-    950: '{gray.950}'
-  }
-}
+	surface: {
+		0: '{gray.0}',
+		50: '{gray.50}',
+		100: '{gray.100}',
+		150: '{gray.150}',
+		200: '{gray.200}',
+		250: '{gray.250}',
+		300: '{gray.300}',
+		350: '{gray.350}',
+		400: '{gray.400}',
+		450: '{gray.450}',
+		500: '{gray.500}',
+		550: '{gray.550}',
+		600: '{gray.600}',
+		650: '{gray.650}',
+		700: '{gray.700}',
+		750: '{gray.750}',
+		800: '{gray.800}',
+		850: '{gray.850}',
+		900: '{gray.900}',
+		950: '{gray.950}',
+	},
+};

package/src/lib/primevue/semantic/color-scheme/table/dark/index.ts

@@ -1,8 +1,8 @@
 export default {
-  datatable: {
-    border: {
-      borderColor: '{surface.700}',
-      color: '{surface.700}'
-    }
-  }
-}
+	datatable: {
+		border: {
+			borderColor: '{surface.700}',
+			color: '{surface.700}',
+		},
+	},
+};

package/src/lib/primevue/semantic/color-scheme/table/index.ts

@@ -1,9 +1,9 @@
-import light from "./light";
-import dark from "./dark";
+import dark from './dark';
+import light from './light';
 
 export default {
-  colorScheme: {
-    light,
-    dark,
-  },
-};
+	colorScheme: {
+		light,
+		dark,
+	},
+};

package/src/lib/primevue/semantic/color-scheme/table/light/index.ts

@@ -1,8 +1,8 @@
 export default {
-  datatable: {
-    border: {
-      borderColor: '{surface.100}',
-      color: '{surface.100}'
-    }
-  }
-}
+	datatable: {
+		border: {
+			borderColor: '{surface.100}',
+			color: '{surface.100}',
+		},
+	},
+};

package/src/lib/primevue/semantic/color-scheme/text/dark/index.ts

@@ -1,9 +1,9 @@
 export default {
-  text: {
-    color: '{surface.100}',
-    hoverColor: '{surface.50}',
-    mutedColor: '{surface.400}',
-    hoverMutedColor: '{surface.300}',
-    avatarColor: '{gray.850}'
-  }
-}
+	text: {
+		color: '{surface.100}',
+		hoverColor: '{surface.50}',
+		mutedColor: '{surface.400}',
+		hoverMutedColor: '{surface.300}',
+		avatarColor: '{gray.850}',
+	},
+};

package/src/lib/primevue/semantic/color-scheme/text/index.ts

@@ -1,9 +1,9 @@
-import light from "./light";
-import dark from "./dark";
+import dark from './dark';
+import light from './light';
 
 export default {
-  colorScheme: {
-    light,
-    dark,
-  },
-}
+	colorScheme: {
+		light,
+		dark,
+	},
+};

package/src/lib/primevue/semantic/color-scheme/text/light/index.ts

@@ -1,9 +1,9 @@
 export default {
-  text: {
-    color: '{surface.750}',
-    hoverColor: '{surface.800}',
-    mutedColor: '{surface.500}',
-    hoverMutedColor: '{surface.600}',
-    avatarColor: '{gray.0}'
-  }
-}
+	text: {
+		color: '{surface.750}',
+		hoverColor: '{surface.800}',
+		mutedColor: '{surface.500}',
+		hoverMutedColor: '{surface.600}',
+		avatarColor: '{gray.0}',
+	},
+};

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

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

package/src/lib/primevue/semantic/sizes/focus-ring/index.ts

@@ -1,6 +1,6 @@
 export default {
-  width: '1px',
-  style: 'solid',
-  offset: '2px',
-  shadow: 'none'
-}
+	width: '1px',
+	style: 'solid',
+	offset: '2px',
+	shadow: 'none',
+};

package/src/lib/primevue/semantic/sizes/form-field/index.ts

@@ -1,23 +1,23 @@
 export default {
-  paddingX: '0.75rem',
-  paddingY: '0.5rem',
-  sm: {
-    fontSize: '0.625rem',
-    paddingX: '0.5rem',
-    paddingY: '0.25rem'
-  },
-  lg: {
-    fontSize: '1.125rem',
-    paddingX: '0.875rem',
-    paddingY: '0.625rem'
-  },
-  borderRadius: '{border.radius.lg}',
-  focusRing: {
-    width: '0',
-    style: 'none',
-    color: 'transparent',
-    offset: '0',
-    shadow: 'none'
-  },
-  transitionDuration: '{transition.duration}'
-}
+	paddingX: '0.75rem',
+	paddingY: '0.5rem',
+	sm: {
+		fontSize: '0.625rem',
+		paddingX: '0.5rem',
+		paddingY: '0.25rem',
+	},
+	lg: {
+		fontSize: '1.125rem',
+		paddingX: '0.875rem',
+		paddingY: '0.625rem',
+	},
+	borderRadius: '{border.radius.lg}',
+	focusRing: {
+		width: '0',
+		style: 'none',
+		color: 'transparent',
+		offset: '0',
+		shadow: 'none',
+	},
+	transitionDuration: '{transition.duration}',
+};

package/src/lib/primevue/semantic/sizes/index.ts

@@ -1,25 +1,27 @@
-import formField from './form-field'
-import list from './list'
-import navigation from './navigation'
-import overlay from './overlay'
-import focusRing from './focus-ring'
-import player from './player'
+import focusRing from './focus-ring';
+import formField from './form-field';
+import list from './list';
+import navigation from './navigation';
+import overlay from './overlay';
+import player from './player';
+import typography from './typography';
 
 export default {
-  transitionDuration: '0.2s',
-  disabledOpacity: '0.6',
-  iconSize: '1rem',
-  anchorGutter: '2px',
-  content: {
-    borderRadius: '{border.radius.md}',
-  },
-  mask: {
-    transitionDuration: '0.15s'
-  },
-  formField,
-  list,
-  navigation,
-  overlay,
-  focusRing,
-  player,
-}
+	transitionDuration: '0.2s',
+	disabledOpacity: '0.6',
+	iconSize: '1rem',
+	anchorGutter: '2px',
+	content: {
+		borderRadius: '{border.radius.md}',
+	},
+	mask: {
+		transitionDuration: '0.15s',
+	},
+	formField,
+	list,
+	navigation,
+	overlay,
+	focusRing,
+	player,
+	typography,
+};

package/src/lib/primevue/semantic/sizes/list/index.ts

@@ -1,15 +1,15 @@
 export default {
-  padding: '0.25rem 0.25rem',
-  gap: '2px',
-  header: {
-    padding: '0.5rem 1rem 0.25rem 1rem'
-  },
-  option: {
-    padding: '0.5rem 0.75rem',
-    borderRadius: '{border.radius.sm}'
-  },
-  optionGroup: {
-    padding: '0.5rem 0.75rem',
-    fontWeight: '600'
-  }
-}
+	padding: '0.25rem 0.25rem',
+	gap: '2px',
+	header: {
+		padding: '0.5rem 1rem 0.25rem 1rem',
+	},
+	option: {
+		padding: '0.5rem 0.75rem',
+		borderRadius: '{border.radius.sm}',
+	},
+	optionGroup: {
+		padding: '0.5rem 0.75rem',
+		fontWeight: '600',
+	},
+};

package/src/lib/primevue/semantic/sizes/navigation/index.ts

@@ -1,18 +1,18 @@
 export default {
-  list: {
-    padding: '0.25rem 0.25rem',
-    gap: '2px'
-  },
-  item: {
-    padding: '0.5rem 0.75rem',
-    borderRadius: '{border.radius.sm}',
-    gap: '0.5rem'
-  },
-  submenuLabel: {
-    padding: '0.5rem 0.75rem',
-    fontWeight: '600'
-  },
-  submenuIcon: {
-    size: '0.875rem'
-  }
-}
+	list: {
+		padding: '0.25rem 0.25rem',
+		gap: '2px',
+	},
+	item: {
+		padding: '0.5rem 0.75rem',
+		borderRadius: '{border.radius.sm}',
+		gap: '0.5rem',
+	},
+	submenuLabel: {
+		padding: '0.5rem 0.75rem',
+		fontWeight: '600',
+	},
+	submenuIcon: {
+		size: '0.875rem',
+	},
+};

package/src/lib/primevue/semantic/sizes/overlay/index.ts

@@ -1,18 +1,21 @@
 export default {
-  select: {
-    borderRadius: '{border.radius.md}',
-    shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-  },
-  popover: {
-    borderRadius: '0.5rem',
-    padding: '0.5rem',
-  },
-  modal: {
-    borderRadius: '{border.radius.xl}',
-    padding: '1.25rem',
-    shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
-  },
-  navigation: {
-    shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-  }
-}
+	select: {
+		borderRadius: '{border.radius.md}',
+		shadow:
+			'0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+	},
+	popover: {
+		borderRadius: '0.5rem',
+		padding: '0.5rem',
+	},
+	modal: {
+		borderRadius: '{border.radius.xl}',
+		padding: '1.25rem',
+		shadow:
+			'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+	},
+	navigation: {
+		shadow:
+			'0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+	},
+};