@webitel/styleguide 24.12.43 → 24.12.44

package/package.json

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

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

@@ -0,0 +1,21 @@
+export default {
+  root: {
+    background: '{content.border.color}',
+    color: '{content.color}',
+  },
+  letters: {
+    'p1-color': '{red.300}',
+    'p2-color': '{red.300}',
+    'p3-color': '{red.300}',
+    'p4-color': '{red.300}',
+    'p5-color': '{red.300}',
+    'p6-color': '{red.300}',
+    'p7-color': '{red.300}',
+    'p8-color': '{red.300}',
+    'p9-color': '{red.300}',
+    'p10-color': '{red.300}',
+    'p11-color': '{red.300}',
+    'p12-color': '{red.300}',
+    'p13-color': '{red.300}',
+  }
+}

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

@@ -0,0 +1,21 @@
+export default {
+  root: {
+    background: '{content.border.color}',
+    color: '{content.color}',
+  },
+  letters: {
+    'p1-color': '{blue.300}',
+    'p2-color': '{blue.300}',
+    'p3-color': '{blue.300}',
+    'p4-color': '{blue.300}',
+    'p5-color': '{blue.300}',
+    'p6-color': '{blue.300}',
+    'p7-color': '{blue.300}',
+    'p8-color': '{blue.300}',
+    'p9-color': '{blue.300}',
+    'p10-color': '{blue.300}',
+    'p11-color': '{blue.300}',
+    'p12-color': '{blue.300}',
+    'p13-color': '{blue.300}',
+  }
+}

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

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

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

@@ -0,0 +1,44 @@
+const sizes = {
+  width: '2rem',
+  height: '2rem',
+  fontSize: '1rem',
+  borderRadius: '{content.border.radius}',
+
+  xs: {
+    width: '1rem',
+    height: '1rem',
+    fontSize: '0.5rem',
+  },
+  sm: {
+    width: '1.5rem',
+    height: '1.5rem',
+    fontSize: '0.75rem',
+  },
+  md: {
+    width: '2rem',
+    height: '2rem',
+    fontSize: '1rem',
+  },
+  lg: {
+    width: '3rem',
+    height: '3rem',
+    fontSize: '1.5rem',
+  },
+  xl: {
+    width: '4rem',
+    height: '4rem',
+    fontSize: '2rem',
+  },
+  '2xl': {
+    width: '5rem',
+    height: '5rem',
+    fontSize: '2.5rem',
+  },
+  '3xl': {
+    width: '6rem',
+    height: '6rem',
+    fontSize: '3rem',
+  },
+};
+
+export default sizes

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

@@ -1,9 +1,15 @@
+import AvatarScheme from "./avatar";
 import ButtonScheme from './button';
 import PopoverScheme from './popover';
 import TooltipScheme from './tooltip';
+import MenubarScheme from './menubar';
+import ToolbarScheme from './toolbar';
 
 export {
+  AvatarScheme,
   ButtonScheme,
   PopoverScheme,
   TooltipScheme,
+  MenubarScheme,
+  ToolbarScheme,
 }

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

@@ -0,0 +1,6 @@
+export default {
+  background: '{content.background}',
+  borderColor: '{content.border.color}',
+  color: '{content.color}',
+  transitionDuration: '{transition.duration}'
+}

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

@@ -0,0 +1,6 @@
+export default {
+  background: '{content.background}',
+  borderColor: '{content.border.color}',
+  color: '{content.color}',
+  transitionDuration: '{transition.duration}'
+}

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

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

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

@@ -0,0 +1,7 @@
+const sizes = {
+  gap: '0.5rem',
+  padding: '0.5rem 0.75rem',
+  borderRadius: '{content.border.radius}',
+};
+
+export default sizes

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

@@ -0,0 +1,6 @@
+export default {
+  background: '{content.background}',
+  borderColor: '{content.border.color}',
+  color: '{content.color}',
+  transitionDuration: '{transition.duration}'
+}

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

@@ -0,0 +1,6 @@
+export default {
+  background: '{content.background}',
+  borderColor: '{content.border.color}',
+  color: '{content.color}',
+  transitionDuration: '{transition.duration}'
+}

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

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

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

@@ -0,0 +1,7 @@
+const sizes = {
+  gap: '0.5rem',
+  padding: '0.75rem',
+  borderRadius: '{content.border.radius}',
+};
+
+export default sizes

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

@@ -1,8 +1,8 @@
 const sizes = {
   maxWidth: '12.5rem',
-  gutter: '0.5rem',
+  gutter: '0.25rem',
   padding: '0.5rem 0.75rem',
-  borderRadius: '0.5rem',
+  borderRadius: '{overlay.popover.border.radius}',
   shadow: '{shadow.xs}',
 };