@webitel/styleguide 24.12.54 → 24.12.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/styleguide",
-  "version": "24.12.54",
+  "version": "24.12.56",
   "main": "",
   "exports": {
     ".": "./src/lib/main.scss",

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

@@ -0,0 +1,23 @@
+const darkColors = {
+  root: {
+    background: '{transparent}',
+  },
+  item: {
+    color: '{text.color}',
+    hoverColor: '{text.hoverColor}',
+    icon: {
+      color: '{navigation.item.icon.color}',
+      hoverColor: '{navigation.item.icon.focus.color}'
+    },
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  separator: {
+    color: '{form.field.color}',
+    lastItemColor: '{primary.color}'
+  }
+}
+
+export default darkColors

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

@@ -0,0 +1,9 @@
+import darkColors from './dark';
+import lightColors from './light';
+
+const colorScheme = {
+  light: lightColors,
+  dark: darkColors
+}
+
+export default colorScheme;

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

@@ -0,0 +1,23 @@
+const lightColors = {
+  root: {
+    background: '{transparent}',
+  },
+  item: {
+    color: '{text.color}',
+    hoverColor: '{text.hoverColor}',
+    icon: {
+      color: '{navigation.item.icon.color}',
+      hoverColor: '{navigation.item.icon.focus.color}'
+    },
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+  separator: {
+    color: '{form.field.color}',
+    lastItemColor: '{primary.color}'
+  }
+}
+
+export default lightColors

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

@@ -0,0 +1,9 @@
+import colorScheme from './colors';
+import sizes from './sizes';
+
+const BreadcrumbScheme = {
+  colorScheme,
+  sizes,
+}
+
+export default BreadcrumbScheme

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

@@ -0,0 +1,21 @@
+const sizes = {
+  root: {
+    padding: '0rem',
+    gap: '0.5rem',
+    transitionDuration: '{transition.duration}'
+  },
+  item: {
+    borderRadius: '{content.border.radius}',
+    gap: '{navigation.item.gap}',
+    focusRing: {
+      width: '{focus.ring.width}',
+      style: '{focus.ring.style}',
+      offset: '{focus.ring.offset}',
+    }
+  },
+  separator: {
+    size: '1rem'
+  }
+}
+
+export default sizes

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

@@ -7,6 +7,8 @@ import ToolbarScheme from './toolbar';
 import ChipScheme from "./chip";
 import CheckboxScheme from "./checkbox";
 import TableScheme from "./table";
+import SliderScheme from "./slider";
+import BreadcrumbScheme from "./breadcrumb";
 import RadioScheme from "./radio";
 
 export {
@@ -19,5 +21,7 @@ export {
   ChipScheme,
   CheckboxScheme,
   TableScheme,
+  SliderScheme,
+  BreadcrumbScheme,
   RadioScheme,
 }

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

@@ -0,0 +1,23 @@
+const darkColors = {
+  track: {
+    background: '{content.border.color}',
+  },
+  range: {
+    background: '{primary.color}'
+  },
+  handle: {
+    background: '{content.border.color}',
+    hoverBackground: '{content.border.color}',
+    content: {
+      background: '{content.background}',
+      hoverBackground: '{content.hoverBackground}',
+      shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)'
+    },
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+}
+
+export default darkColors

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

@@ -0,0 +1,9 @@
+import darkColors from './dark';
+import lightColors from './light';
+
+const colorScheme = {
+  light: lightColors,
+  dark: darkColors
+}
+
+export default colorScheme;

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

@@ -0,0 +1,23 @@
+const lightColors = {
+  track: {
+    background: '{content.border.color}',
+  },
+  range: {
+    background: '{primary.color}'
+  },
+  handle: {
+    background: '{content.border.color}',
+    hoverBackground: '{content.border.color}',
+    content: {
+      background: '{content.background}',
+      hoverBackground: '{content.hoverBackground}',
+      shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)'
+    },
+    focusRing: {
+      color: '{focus.ring.color}',
+      shadow: '{focus.ring.shadow}'
+    }
+  },
+}
+
+export default lightColors

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

@@ -0,0 +1,9 @@
+import colorScheme from './colors';
+import sizes from './sizes';
+
+const SliderScheme = {
+  colorScheme,
+  sizes,
+}
+
+export default SliderScheme

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

@@ -0,0 +1,26 @@
+const sizes = {
+  root: {
+    transitionDuration: '{transition.duration}'
+  },
+  track: {
+    borderRadius: '{content.border.radius}',
+    size: '4px'
+  },
+  handle: {
+    width: '16px',
+    height: '16px',
+    borderRadius: '50%',
+    content: {
+      borderRadius: '50%',
+      width: '12px',
+      height: '12px',
+    },
+    focusRing: {
+      width: '{focus.ring.width}',
+      style: '{focus.ring.style}',
+      offset: '{focus.ring.offset}',
+    }
+  }
+}
+
+export default sizes

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

@@ -4,6 +4,7 @@ export default {
     hoverBackground: '{surface.800}',
     borderColor: '{surface.700}',
     color: '{text.color}',
-    hoverColor: '{text.hover.color}'
+    hoverColor: '{text.hoverColor}',
+    hoverMutedColor: '{text.hoverMutedColor}'
   }
 }

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

@@ -4,6 +4,7 @@ export default {
     hoverBackground: '{surface.100}',
     borderColor: '{surface.200}',
     color: '{text.color}',
-    hoverColor: '{text.hover.color}'
+    hoverColor: '{text.hoverColor}',
+    hoverMutedColor: '{text.hoverMutedColor}'
   }
 }