@webitel/styleguide 24.12.42 → 24.12.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/styleguide",
-  "version": "24.12.42",
+  "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}',
 };
 

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

@@ -36,10 +36,10 @@ const darkColor = {
   },
 
   info: {
-    color: '{light_blue.500}',
-    hover: '{light_blue.450}',
-    active: '{light_blue.400}',
-    foreground: '{light_blue.950}'
+    color: '{light-blue.500}',
+    hover: '{light-blue.450}',
+    active: '{light-blue.400}',
+    foreground: '{light-blue.950}'
   },
 
   task: {

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

@@ -36,10 +36,10 @@ const lightColor = {
   },
 
   info: {
-    color: '{light_blue.500}',
-    hover: '{light_blue.450}',
-    active: '{light_blue.400}',
-    foreground: '{light_blue.50}'
+    color: '{light-blue.500}',
+    hover: '{light-blue.450}',
+    active: '{light-blue.400}',
+    foreground: '{light-blue.50}'
   },
 
   task: {

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

@@ -42,7 +42,7 @@ const palette = {
     '900': 'hsla(0, 75%, 10%, 1)',
     '950': 'hsla(0, 75%, 6%, 1)'
   },
-  deep_orange: {
+  'deep-orange': {
     '50': 'hsla(11, 75%, 95%, 1)',
     '100': 'hsla(11, 75%, 90%, 1)',
     '150': 'hsla(11, 75%, 85%, 1)',
@@ -147,7 +147,7 @@ const palette = {
     '900': 'hsla(66, 65%, 10%, 1)',
     '950': 'hsla(66, 65%, 6%, 1)'
   },
-  light_green: {
+  'light-green': {
     '50': 'hsla(88, 65%, 95%, 1)',
     '100': 'hsla(88, 65%, 90%, 1)',
     '150': 'hsla(88, 65%, 85%, 1)',
@@ -231,7 +231,7 @@ const palette = {
     '900': 'hsla(188, 75%, 10%, 1)',
     '950': 'hsla(188, 75%, 6%, 1)'
   },
-  light_blue: {
+  'light-blue': {
     '50': 'hsla(200, 85%, 95%, 1)',
     '100': 'hsla(200, 85%, 90%, 1)',
     '150': 'hsla(200, 85%, 85%, 1)',
@@ -294,7 +294,7 @@ const palette = {
     '900': 'hsla(235, 80%, 10%, 1)',
     '950': 'hsla(235, 80%, 6%, 1)'
   },
-  deep_purple: {
+  'deep-purple': {
     '50': 'hsla(271, 65%, 95%, 1)',
     '100': 'hsla(271, 65%, 90%, 1)',
     '150': 'hsla(271, 65%, 85%, 1)',