@webitel/styleguide 26.2.4 → 26.2.6

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

@@ -1,112 +1,111 @@
 const darkColor = {
+	primary: {
+		color: '{amber.500}',
+		hoverColor: '{amber.450}',
+		activeColor: '{amber.400}',
+		foreground: '{amber.950}',
+		foregroundHover: '{amber.900}',
+		highlightColor: '{amber.850}',
+	},
 
-  primary: {
-    color: '{amber.500}',
-    hoverColor: '{amber.450}',
-    activeColor: '{amber.400}',
-    foreground: '{amber.950}',
-    foregroundHover: '{amber.900}',
-    highlightColor: '{amber.850}'
-  },
+	secondary: {
+		color: '{gray.900}',
+		hoverColor: '{gray.850}',
+		activeColor: '{gray.750}',
+		foreground: '{gray.350}',
+		foregroundHover: '{gray.300}',
+		highlightColor: '{gray.850}',
+	},
 
-  secondary: {
-    color: '{gray.900}',
-    hoverColor: '{gray.850}',
-    activeColor: '{gray.750}',
-    foreground: '{gray.350}',
-    foregroundHover: '{gray.300}',
-    highlightColor: '{gray.850}'
-  },
+	success: {
+		color: '{green.600}',
+		hoverColor: '{green.550}',
+		activeColor: '{green.500}',
+		foreground: '{green.950}',
+		foregroundHover: '{green.900}',
+		highlightColor: '{green.850}',
+	},
 
-  success: {
-    color: '{green.600}',
-    hoverColor: '{green.550}',
-    activeColor: '{green.500}',
-    foreground: '{green.950}',
-    foregroundHover: '{green.900}',
-    highlightColor: '{green.850}'
-  },
+	warn: {
+		color: '{orange.450}',
+		hoverColor: '{orange.400}',
+		activeColor: '{orange.350}',
+		foreground: '{orange.950}',
+		foregroundHover: '{orange.900}',
+		highlightColor: '{orange.850}',
+	},
 
-  warn: {
-    color: '{orange.450}',
-    hoverColor: '{orange.400}',
-    activeColor: '{orange.350}',
-    foreground: '{orange.950}',
-    foregroundHover: '{orange.900}',
-    highlightColor: '{orange.850}'
-  },
+	error: {
+		color: '{red.400}',
+		hoverColor: '{red.350}',
+		activeColor: '{red.300}',
+		foreground: '{red.950}',
+		foregroundHover: '{red.900}',
+		highlightColor: '{red.850}',
+	},
 
-  error: {
-    color: '{red.400}',
-    hoverColor: '{red.350}',
-    activeColor: '{red.300}',
-    foreground: '{red.950}',
-    foregroundHover: '{red.900}',
-    highlightColor: '{red.850}'
-  },
+	info: {
+		color: '{light-blue.500}',
+		hoverColor: '{light-blue.450}',
+		activeColor: '{light-blue.400}',
+		foreground: '{light-blue.950}',
+		foregroundHover: '{light-blue.900}',
+		highlightColor: '{light-blue.850}',
+	},
 
-  info: {
-    color: '{light-blue.500}',
-    hoverColor: '{light-blue.450}',
-    activeColor: '{light-blue.400}',
-    foreground: '{light-blue.950}',
-    foregroundHover: '{light-blue.900}',
-    highlightColor: '{light-blue.850}'
-  },
+	task: {
+		color: '{blue.500}',
+		hoverColor: '{blue.450}',
+		activeColor: '{blue.400}',
+		foreground: '{blue.950}',
+		foregroundHover: '{blue.900}',
+		highlightColor: '{blue.850}',
+	},
 
-  task: {
-    color: '{blue.500}',
-    hoverColor: '{blue.450}',
-    activeColor: '{blue.400}',
-    foreground: '{blue.950}',
-    foregroundHover: '{blue.900}',
-    highlightColor: '{blue.850}'
-  },
+	transfer: {
+		color: '{indigo.350}',
+		hoverColor: '{indigo.300}',
+		activeColor: '{indigo.250}',
+		foreground: '{indigo.950}',
+		foregroundHover: '{indigo.900}',
+		highlightColor: '{indigo.850}',
+	},
 
-  transfer: {
-    color: '{indigo.350}',
-    hoverColor: '{indigo.300}',
-    activeColor: '{indigo.250}',
-    foreground: '{indigo.950}',
-    foregroundHover: '{indigo.900}',
-    highlightColor: '{indigo.850}'
-  },
+	chat: {
+		color: '{cyan.600}',
+		hoverColor: '{cyan.550}',
+		activeColor: '{cyan.500}',
+		foreground: '{cyan.950}',
+		foregroundHover: '{cyan.900}',
+		highlightColor: '{cyan.850}',
+	},
 
-  chat: {
-    color: '{cyan.600}',
-    hoverColor: '{cyan.550}',
-    activeColor: '{cyan.500}',
-    foreground: '{cyan.950}',
-    foregroundHover: '{cyan.900}',
-    highlightColor: '{cyan.850}'
-  },
+	email: {
+		color: '{blue.600}',
+		hoverColor: '{blue.550}',
+		activeColor: '{blue.500}',
+		foreground: '{blue.950}',
+		foregroundHover: '{blue.900}',
+		highlightColor: '{blue.850}',
+	},
 
-  email: {
-    color: '{blue.600}',
-    hoverColor: '{blue.550}',
-    activeColor: '{blue.500}',
-    foreground: '{blue.950}',
-    foregroundHover: '{blue.900}',
-    highlightColor: '{blue.850}'
-  },
+	highlight: {
+		background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+		focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+		color: 'rgba(255,255,255,.87)',
+		focusColor: 'rgba(255,255,255,.87)',
+	},
+	mask: {
+		background: 'rgba(0,0,0,0.6)',
+		color: '{surface.200}',
+	},
 
-  highlight: {
-    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
-    color: 'rgba(255,255,255,.87)',
-    focusColor: 'rgba(255,255,255,.87)'
-  },
-  mask: {
-    background: 'rgba(0,0,0,0.6)',
-    color: '{surface.200}'
-  },
+	focus: {
+		color: '{white}',
+	},
 
-  focus: {
-    color: '{white}'
-  },
-
-  // content wrapper
-  'content-wrapper-color': '{dp-surface-color-20}',
+	// content wrapper
+	'content-wrapper-color': '{dp-surface-color-20}',
 };
 
 export default darkColor;

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

@@ -1,5 +1,5 @@
 export default {
-  focusRing: {
-    color: '{primary.color}',
-  }
-}
+	focusRing: {
+		color: '{primary.color}',
+	},
+};

package/src/lib/primevue/semantic/color-scheme/focus-ring/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/focus-ring/light/index.ts

@@ -1,5 +1,5 @@
 export default {
-  focusRing: {
-    color: '{primary.color}',
-  }
-}
+	focusRing: {
+		color: '{primary.color}',
+	},
+};

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

@@ -1,23 +1,24 @@
 export default {
-  formField: {
-    background: '{transparent}',
-    disabledBackground: '{surface.750}',
-    filledBackground: '{surface.800}',
-    filledHoverBackground: '{surface.800}',
-    filledFocusBackground: '{surface.800}',
-    borderColor: '{surface.450}',
-    hoverBorderColor: '{surface.250}',
-    focusBorderColor: '{primary.color}',
-    invalidBorderColor: '{error.color}',
-    color: '{surface.0}',
-    disabledColor: '{surface.400}',
-    placeholderColor: '{surface.400}',
-    invalidPlaceholderColor: '{red.400}',
-    floatLabelColor: '{surface.400}',
-    floatLabelFocusColor: '{primary.color}',
-    floatLabelActiveColor: '{surface.400}',
-    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
-    iconColor: '{surface.400}',
-    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
-  }
-}
+	formField: {
+		background: '{transparent}',
+		disabledBackground: '{surface.750}',
+		filledBackground: '{surface.800}',
+		filledHoverBackground: '{surface.800}',
+		filledFocusBackground: '{surface.800}',
+		borderColor: '{surface.450}',
+		hoverBorderColor: '{surface.250}',
+		focusBorderColor: '{primary.color}',
+		invalidBorderColor: '{error.color}',
+		invalidHoverBorderColor: '{error.hover.color}',
+		color: '{surface.0}',
+		disabledColor: '{surface.400}',
+		placeholderColor: '{surface.400}',
+		invalidPlaceholderColor: '{error.color}',
+		floatLabelColor: '{surface.400}',
+		floatLabelFocusColor: '{primary.color}',
+		floatLabelActiveColor: '{surface.400}',
+		floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
+		iconColor: '{surface.400}',
+		shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)',
+	},
+};

package/src/lib/primevue/semantic/color-scheme/form-field/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/form-field/light/index.ts

@@ -1,23 +1,24 @@
 export default {
-  formField: {
-    background: '{transparent}',
-    disabledBackground: '{surface.100}',
-    filledBackground: '{surface.50}',
-    filledHoverBackground: '{surface.50}',
-    filledFocusBackground: '{surface.50}',
-    borderColor: '{surface.550}',
-    hoverBorderColor: '{surface.750}',
-    focusBorderColor: '{primary.color}',
-    invalidBorderColor: '{error.color}',
-    color: '{surface.700}',
-    disabledColor: '{surface.500}',
-    placeholderColor: '{surface.500}',
-    invalidPlaceholderColor: '{red.600}',
-    floatLabelColor: '{surface.500}',
-    floatLabelFocusColor: '{primary.600}',
-    floatLabelActiveColor: '{surface.500}',
-    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
-    iconColor: '{surface.400}',
-    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
-  }
-}
+	formField: {
+		background: '{transparent}',
+		disabledBackground: '{surface.100}',
+		filledBackground: '{surface.50}',
+		filledHoverBackground: '{surface.50}',
+		filledFocusBackground: '{surface.50}',
+		borderColor: '{surface.550}',
+		hoverBorderColor: '{surface.750}',
+		focusBorderColor: '{primary.color}',
+		invalidBorderColor: '{error.color}',
+		invalidHoverBorderColor: '{error.hover.color}',
+		color: '{surface.700}',
+		disabledColor: '{surface.500}',
+		placeholderColor: '{surface.500}',
+		invalidPlaceholderColor: '{error.color}',
+		floatLabelColor: '{surface.500}',
+		floatLabelFocusColor: '{primary.600}',
+		floatLabelActiveColor: '{surface.500}',
+		floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
+		iconColor: '{surface.400}',
+		shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)',
+	},
+};

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

@@ -1,49 +1,49 @@
+import base from './base';
+import content from './content';
 import darkColor from './dark-color';
-import lightColor from './light-color';
-import palette from './palette';
-import base from './base'
-import overlay from './overlay'
-import focusRing from './focus-ring'
-import text from './text'
+import focusRing from './focus-ring';
 import formField from './form-field';
-import surface from './surface';
-import content from './content';
+import lightColor from './light-color';
 import list from './list';
 import navigation from './navigation';
-import table from './table';
+import overlay from './overlay';
+import palette from './palette';
 import player from './player';
+import surface from './surface';
+import table from './table';
+import text from './text';
 
 const colorScheme = {
-  light: {
-    ...palette,
-    ...lightColor,
-    ...base.light,
-    ...focusRing.colorScheme.light,
-    ...overlay.colorScheme.light,
-    ...text.colorScheme.light,
-    ...formField.colorScheme.light,
-    ...surface.colorScheme.light,
-    ...content.colorScheme.light,
-    ...list.colorScheme.light,
-    ...navigation.colorScheme.light,
-    ...table.colorScheme.light,
-    ...player.colorScheme.light,
-  },
-  dark: {
-    ...palette,
-    ...darkColor,
-    ...base.dark,
-    ...focusRing.colorScheme.dark,
-    ...overlay.colorScheme.dark,
-    ...text.colorScheme.dark,
-    ...formField.colorScheme.dark,
-    ...surface.colorScheme.dark,
-    ...content.colorScheme.dark,
-    ...list.colorScheme.dark,
-    ...navigation.colorScheme.dark,
-    ...table.colorScheme.dark,
-    ...player.colorScheme.dark,
-  },
+	light: {
+		...palette,
+		...lightColor,
+		...base.light,
+		...focusRing.colorScheme.light,
+		...overlay.colorScheme.light,
+		...text.colorScheme.light,
+		...formField.colorScheme.light,
+		...surface.colorScheme.light,
+		...content.colorScheme.light,
+		...list.colorScheme.light,
+		...navigation.colorScheme.light,
+		...table.colorScheme.light,
+		...player.colorScheme.light,
+	},
+	dark: {
+		...palette,
+		...darkColor,
+		...base.dark,
+		...focusRing.colorScheme.dark,
+		...overlay.colorScheme.dark,
+		...text.colorScheme.dark,
+		...formField.colorScheme.dark,
+		...surface.colorScheme.dark,
+		...content.colorScheme.dark,
+		...list.colorScheme.dark,
+		...navigation.colorScheme.dark,
+		...table.colorScheme.dark,
+		...player.colorScheme.dark,
+	},
 };
 
 export default colorScheme;