@webitel/styleguide 26.2.4 → 26.2.6

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

@@ -1,114 +1,112 @@
 const lightColor = {
-
-  primary: {
-    color: '{amber.500}',
-    hoverColor: '{amber.450}',
-    activeColor: '{amber.400}',
-    foreground: '{amber.900}',
-    foregroundHover: '{amber.850}',
-    highlightColor: '{amber.100}'
-  },
-
-  secondary: {
-    color: '{gray.150}',
-    hoverColor: '{gray.100}',
-    activeColor: '{gray.50}',
-    foreground: '{gray.750}',
-    foregroundHover: '{gray.700}',
-    highlightColor: '{gray.50}'
-  },
-
-  success: {
-    color: '{green.600}',
-    hoverColor: '{green.550}',
-    activeColor: '{green.500}',
-    foreground: '{green.50}',
-    foregroundHover: '{green.100}',
-    highlightColor: '{green.100}'
-  },
-
-  warn: {
-    color: '{orange.450}',
-    hoverColor: '{orange.400}',
-    activeColor: '{orange.350}',
-    foreground: '{orange.50}',
-    foregroundHover: '{orange.100}',
-    highlightColor: '{orange.100}'
-  },
-
-  error: {
-    color: '{red.400}',
-    hoverColor: '{red.350}',
-    activeColor: '{red.300}',
-    foreground: '{red.50}',
-    foregroundHover: '{red.100}',
-    highlightColor: '{red.100}'
-  },
-
-  info: {
-    color: '{light-blue.500}',
-    hoverColor: '{light-blue.450}',
-    activeColor: '{light-blue.400}',
-    foreground: '{light-blue.50}',
-    foregroundHover: '{light-blue.100}',
-    highlightColor: '{light-blue.100}'
-
-  },
-
-  task: {
-    color: '{blue.500}',
-    hoverColor: '{blue.450}',
-    activeColor: '{blue.400}',
-    foreground: '{blue.50}',
-    foregroundHover: '{blue.100}',
-    highlightColor: '{blue.100}'
-  },
-
-  transfer: {
-    color: '{indigo.350}',
-    hoverColor: '{indigo.300}',
-    activeColor: '{indigo.250}',
-    foreground: '{indigo.50}',
-    foregroundHover: '{indigo.100}',
-    highlightColor: '{indigo.100}'
-  },
-
-  chat: {
-    color: '{cyan.600}',
-    hoverColor: '{cyan.550}',
-    activeColor: '{cyan.500}',
-    foreground: '{cyan.50}',
-    foregroundHover: '{cyan.100}',
-    highlightColor: '{cyan.100}'
-  },
-
-  email: {
-    color: '{blue.600}',
-    hoverColor: '{blue.550}',
-    activeColor: '{blue.500}',
-    foreground: '{blue.50}',
-    foregroundHover: '{blue.100}',
-    highlightColor: '{blue.100}'
-  },
-
-  highlight: {
-    background: '{primary.50}',
-    focusBackground: '{primary.100}',
-    color: '{primary.700}',
-    focusColor: '{primary.800}'
-  },
-
-  mask: {
-    background: 'rgba(0,0,0,0.4)',
-    color: '{surface.200}'
-  },
-
-  focus: {
-    color: '{black}'
-  },
-
-  // content wrapper
-  'content-wrapper-color': '{dp-surface-color-20}',
+	primary: {
+		color: '{amber.500}',
+		hoverColor: '{amber.450}',
+		activeColor: '{amber.400}',
+		foreground: '{amber.900}',
+		foregroundHover: '{amber.850}',
+		highlightColor: '{amber.100}',
+	},
+
+	secondary: {
+		color: '{gray.150}',
+		hoverColor: '{gray.100}',
+		activeColor: '{gray.50}',
+		foreground: '{gray.750}',
+		foregroundHover: '{gray.700}',
+		highlightColor: '{gray.50}',
+	},
+
+	success: {
+		color: '{green.600}',
+		hoverColor: '{green.550}',
+		activeColor: '{green.500}',
+		foreground: '{green.50}',
+		foregroundHover: '{green.100}',
+		highlightColor: '{green.100}',
+	},
+
+	warn: {
+		color: '{orange.450}',
+		hoverColor: '{orange.400}',
+		activeColor: '{orange.350}',
+		foreground: '{orange.50}',
+		foregroundHover: '{orange.100}',
+		highlightColor: '{orange.100}',
+	},
+
+	error: {
+		color: '{red.400}',
+		hoverColor: '{red.350}',
+		activeColor: '{red.300}',
+		foreground: '{red.50}',
+		foregroundHover: '{red.100}',
+		highlightColor: '{red.100}',
+	},
+
+	info: {
+		color: '{light-blue.500}',
+		hoverColor: '{light-blue.450}',
+		activeColor: '{light-blue.400}',
+		foreground: '{light-blue.50}',
+		foregroundHover: '{light-blue.100}',
+		highlightColor: '{light-blue.100}',
+	},
+
+	task: {
+		color: '{blue.500}',
+		hoverColor: '{blue.450}',
+		activeColor: '{blue.400}',
+		foreground: '{blue.50}',
+		foregroundHover: '{blue.100}',
+		highlightColor: '{blue.100}',
+	},
+
+	transfer: {
+		color: '{indigo.350}',
+		hoverColor: '{indigo.300}',
+		activeColor: '{indigo.250}',
+		foreground: '{indigo.50}',
+		foregroundHover: '{indigo.100}',
+		highlightColor: '{indigo.100}',
+	},
+
+	chat: {
+		color: '{cyan.600}',
+		hoverColor: '{cyan.550}',
+		activeColor: '{cyan.500}',
+		foreground: '{cyan.50}',
+		foregroundHover: '{cyan.100}',
+		highlightColor: '{cyan.100}',
+	},
+
+	email: {
+		color: '{blue.600}',
+		hoverColor: '{blue.550}',
+		activeColor: '{blue.500}',
+		foreground: '{blue.50}',
+		foregroundHover: '{blue.100}',
+		highlightColor: '{blue.100}',
+	},
+
+	highlight: {
+		background: '{primary.50}',
+		focusBackground: '{primary.100}',
+		color: '{primary.700}',
+		focusColor: '{primary.800}',
+	},
+
+	mask: {
+		background: 'rgba(0,0,0,0.4)',
+		color: '{surface.200}',
+	},
+
+	focus: {
+		color: '{black}',
+	},
+
+	// content wrapper
+	'content-wrapper-color': '{dp-surface-color-20}',
 };
 
 export default lightColor;

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

@@ -1,21 +1,21 @@
 export default {
-  list: {
-    option: {
-      focusBackground: '{surface.800}',
-      selectedBackground: '{highlight.background}',
-      selectedFocusBackground: '{highlight.focus.background}',
-      color: '{text.color}',
-      focusColor: '{text.hover.color}',
-      selectedColor: '{highlight.color}',
-      selectedFocusColor: '{highlight.focus.color}',
-      icon: {
-        color: '{surface.500}',
-        focusColor: '{surface.400}'
-      }
-    },
-    optionGroup: {
-      background: 'transparent',
-      color: '{text.muted.color}'
-    }
-  }
-}
+	list: {
+		option: {
+			focusBackground: '{surface.800}',
+			selectedBackground: '{highlight.background}',
+			selectedFocusBackground: '{highlight.focus.background}',
+			color: '{text.color}',
+			focusColor: '{text.hover.color}',
+			selectedColor: '{highlight.color}',
+			selectedFocusColor: '{highlight.focus.color}',
+			icon: {
+				color: '{surface.500}',
+				focusColor: '{surface.400}',
+			},
+		},
+		optionGroup: {
+			background: 'transparent',
+			color: '{text.muted.color}',
+		},
+	},
+};

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

@@ -1,21 +1,21 @@
 export default {
-  list: {
-    option: {
-      focusBackground: '{surface.100}',
-      selectedBackground: '{highlight.background}',
-      selectedFocusBackground: '{highlight.focus.background}',
-      color: '{text.color}',
-      focusColor: '{text.hover.color}',
-      selectedColor: '{highlight.color}',
-      selectedFocusColor: '{highlight.focus.color}',
-      icon: {
-        color: '{surface.400}',
-        focusColor: '{surface.500}'
-      }
-    },
-    optionGroup: {
-      background: 'transparent',
-      color: '{text.muted.color}'
-    }
-  }
-}
+	list: {
+		option: {
+			focusBackground: '{surface.100}',
+			selectedBackground: '{highlight.background}',
+			selectedFocusBackground: '{highlight.focus.background}',
+			color: '{text.color}',
+			focusColor: '{text.hover.color}',
+			selectedColor: '{highlight.color}',
+			selectedFocusColor: '{highlight.focus.color}',
+			icon: {
+				color: '{surface.400}',
+				focusColor: '{surface.500}',
+			},
+		},
+		optionGroup: {
+			background: 'transparent',
+			color: '{text.muted.color}',
+		},
+	},
+};

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

@@ -1,25 +1,25 @@
 export default {
-  navigation: {
-    item: {
-      focusBackground: '{surface.800}',
-      activeBackground: '{surface.800}',
-      color: '{text.color}',
-      focusColor: '{text.hover.color}',
-      activeColor: '{text.hover.color}',
-      icon: {
-        color: '{surface.500}',
-        focusColor: '{surface.400}',
-        activeColor: '{surface.400}'
-      }
-    },
-    submenuLabel: {
-      background: 'transparent',
-      color: '{text.muted.color}'
-    },
-    submenuIcon: {
-      color: '{surface.500}',
-      focusColor: '{surface.400}',
-      activeColor: '{surface.400}'
-    }
-  }
-}
+	navigation: {
+		item: {
+			focusBackground: '{surface.800}',
+			activeBackground: '{surface.800}',
+			color: '{text.color}',
+			focusColor: '{text.hover.color}',
+			activeColor: '{text.hover.color}',
+			icon: {
+				color: '{surface.500}',
+				focusColor: '{surface.400}',
+				activeColor: '{surface.400}',
+			},
+		},
+		submenuLabel: {
+			background: 'transparent',
+			color: '{text.muted.color}',
+		},
+		submenuIcon: {
+			color: '{surface.500}',
+			focusColor: '{surface.400}',
+			activeColor: '{surface.400}',
+		},
+	},
+};

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

@@ -1,25 +1,25 @@
 export default {
-  navigation: {
-    item: {
-      focusBackground: '{surface.100}',
-      activeBackground: '{surface.100}',
-      color: '{text.color}',
-      focusColor: '{text.hover.color}',
-      activeColor: '{text.hover.color}',
-      icon: {
-        color: '{surface.400}',
-        focusColor: '{surface.500}',
-        activeColor: '{surface.500}'
-      }
-    },
-    submenuLabel: {
-      background: 'transparent',
-      color: '{text.muted.color}'
-    },
-    submenuIcon: {
-      color: '{surface.400}',
-      focusColor: '{surface.500}',
-      activeColor: '{surface.500}'
-    }
-  }
-}
+	navigation: {
+		item: {
+			focusBackground: '{surface.100}',
+			activeBackground: '{surface.100}',
+			color: '{text.color}',
+			focusColor: '{text.hover.color}',
+			activeColor: '{text.hover.color}',
+			icon: {
+				color: '{surface.400}',
+				focusColor: '{surface.500}',
+				activeColor: '{surface.500}',
+			},
+		},
+		submenuLabel: {
+			background: 'transparent',
+			color: '{text.muted.color}',
+		},
+		submenuIcon: {
+			color: '{surface.400}',
+			focusColor: '{surface.500}',
+			activeColor: '{surface.500}',
+		},
+	},
+};

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

@@ -1,24 +1,24 @@
 export default {
-  overlay: {
-    select: {
-      background: '{surface.900}',
-      borderColor: '{surface.700}',
-      color: '{text.color}'
-    },
-    popover: {
-      background: '{gray.750}',
-      borderColor: '{gray.750}',
-      color: '{gray.200}',
-    },
-    tooltip: {
-      background: '{gray.750}',
-      borderColor: '{gray.750}',
-      color: '{gray.200}',
-    },
-    modal: {
-      background: '{gray.750}',
-      borderColor: '{gray.750}',
-      color: '{gray.200}'
-    }
-  }
-}
+	overlay: {
+		select: {
+			background: '{surface.900}',
+			borderColor: '{surface.700}',
+			color: '{text.color}',
+		},
+		popover: {
+			background: '{gray.750}',
+			borderColor: '{gray.750}',
+			color: '{gray.200}',
+		},
+		tooltip: {
+			background: '{gray.750}',
+			borderColor: '{gray.750}',
+			color: '{gray.200}',
+		},
+		modal: {
+			background: '{gray.750}',
+			borderColor: '{gray.750}',
+			color: '{gray.200}',
+		},
+	},
+};

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

@@ -1,24 +1,24 @@
 export default {
-  overlay: {
-    select: {
-      background: '{surface.0}',
-      borderColor: '{surface.200}',
-      color: '{text.color}'
-    },
-    popover: {
-      background: '{gray.0}',
-      borderColor: '{gray.0}',
-      color: '{gray.850}',
-    },
-    tooltip: {
-      background: '{gray.0}',
-      borderColor: '{gray.0}',
-      color: '{gray.850}',
-    },
-    modal: {
-      background: '{gray.0}',
-      borderColor: '{gray.0}',
-      color: '{gray.850}'
-    }
-  }
-}
+	overlay: {
+		select: {
+			background: '{surface.0}',
+			borderColor: '{surface.200}',
+			color: '{text.color}',
+		},
+		popover: {
+			background: '{gray.0}',
+			borderColor: '{gray.0}',
+			color: '{gray.850}',
+		},
+		tooltip: {
+			background: '{gray.0}',
+			borderColor: '{gray.0}',
+			color: '{gray.850}',
+		},
+		modal: {
+			background: '{gray.0}',
+			borderColor: '{gray.0}',
+			color: '{gray.850}',
+		},
+	},
+};