@webitel/styleguide 24.12.74 → 24.12.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/styleguide",
-  "version": "24.12.74",
+  "version": "24.12.75",
   "main": "",
   "exports": {
     ".": "./src/lib/main.scss",
@@ -21,6 +21,9 @@
     "./semantic": {
       "import": "./src/lib/primevue/semantic/index.js"
     },
+    "./extend": {
+      "import": "./src/lib/primevue/extend/extend.js"
+    },
     "./primitive": {
       "import": "./src/lib/primevue/primitive/index.js"
     }

package/src/lib/primevue/extend/extend.ts

@@ -0,0 +1,7 @@
+import { spacingsExtend } from './spacings/spacings.js';
+
+const extend = {
+  spacing: spacingsExtend,
+};
+
+export default extend;

package/src/lib/primevue/extend/spacings/spacings.ts

@@ -0,0 +1,15 @@
+const spacingsExtend = {
+  multiplicator: '8px',
+
+  '3xs': 'calc({spacings.multiplicator} / 4)',
+  '2xs': 'calc({spacings.multiplicator} / 2)',
+  xs: 'calc({spacings.multiplicator} * 1)',
+  sm: 'calc({spacings.multiplicator} * 2)',
+  md: 'calc({spacings.multiplicator} * 3)',
+  lg: 'calc({spacings.multiplicator} * 4)',
+  xl: 'calc({spacings.multiplicator} * 5)',
+  '2xl': 'calc({spacings.multiplicator} * 6)',
+  '3xl': 'calc({spacings.multiplicator} * 7)',
+};
+
+export { spacingsExtend };

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

@@ -11,6 +11,7 @@ import content from './content';
 import list from './list';
 import navigation from './navigation';
 import table from './table';
+import player from './player';
 
 const colorScheme = {
   light: {
@@ -26,6 +27,7 @@ const colorScheme = {
     ...list.colorScheme.light,
     ...navigation.colorScheme.light,
     ...table.colorScheme.light,
+    ...player.colorScheme.light,
   },
   dark: {
     ...palette,
@@ -40,6 +42,7 @@ const colorScheme = {
     ...list.colorScheme.dark,
     ...navigation.colorScheme.dark,
     ...table.colorScheme.dark,
+    ...player.colorScheme.dark,
   },
 };
 

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

@@ -0,0 +1,23 @@
+export default {
+  counter: {
+    background: '{content.background}',
+    color: '{content.color}',
+  },
+  wrapper: {
+    background: '{surface.900}',
+    overlayColor: 'rgba(0,0,0,0.8)',
+    color: '{white}',
+  },
+  headLine: {
+    background: '{transparent}',
+    hoverBackground: 'rgba(0,0,0,0.5)',
+    iconColor: '{white}',
+    color: '{white}',
+    blur: '10px'
+  },
+  controlBar: {
+    background: '{content.background}',
+    iconColor: '{content.color}',
+    color: '{content.color}',
+  },
+}

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

@@ -0,0 +1,9 @@
+import light from "./light";
+import dark from "./dark";
+
+export default {
+  colorScheme: {
+    light,
+    dark,
+  },
+};

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

@@ -0,0 +1,23 @@
+export default {
+  counter: {
+    background: '{content.background}',
+    color: '{content.color}',
+  },
+  wrapper: {
+    background: '{surface.900}',
+    overlayColor: 'rgba(0,0,0,0.8)',
+    color: '{white}',
+  },
+  headLine: {
+    background: '{transparent}',
+    hoverBackground: 'rgba(0,0,0,0.5)',
+    iconColor: '{white}',
+    color: '{white}',
+    blur: '10px'
+  },
+  controlBar: {
+    background: '{content.background}',
+    iconColor: '{content.color}',
+    color: '{content.color}',
+  },
+}

package/src/lib/primevue/semantic/sizes/index.ts

@@ -3,6 +3,7 @@ import list from './list'
 import navigation from './navigation'
 import overlay from './overlay'
 import focusRing from './focus-ring'
+import player from './player'
 
 export default {
   transitionDuration: '0.2s',
@@ -20,4 +21,5 @@ export default {
   navigation,
   overlay,
   focusRing,
+  player,
 }

package/src/lib/primevue/semantic/sizes/overlay/index.ts

@@ -14,5 +14,5 @@ export default {
   },
   navigation: {
     shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-  },
-}
+  }
+}

package/src/lib/primevue/semantic/sizes/player/index.ts

@@ -0,0 +1,75 @@
+export default {
+  counter: {
+    padding: '0.25rem',
+    gap: '0.25rem',
+    borderRadius: '{border-radius.xl}',
+  },
+  camPreview: {
+    sm: {
+      borderRadius: '{border-radius.sm}',
+      width: '56px',
+      height: '37px',
+    },
+    md: {
+      borderRadius: '{border-radius.xl}',
+      width: '108px',
+      height: '72px',
+    },
+    lg: {
+      borderRadius: '{border-radius.xl}',
+      width: '128px',
+      height: '85px',
+    },
+  },
+  wrapper: {
+    sm: {
+      borderRadius: '{border-radius.lg}',
+      width: '256px',
+      height: '201px',
+    },
+    md: {
+      borderRadius: '{border-radius.xl}',
+      width: '740px',
+      height: '494px',
+    },
+    lg: {
+      borderRadius: '{border-radius.none}',
+      width: '100%',
+      height: '100%',
+    },
+  },
+  headline: {
+    sm: {
+      borderRadius: '{border-radius.lg}',
+      padding: '0.5rem',
+      gap: '0.5rem',
+    },
+    md: {
+      borderRadius: '{border-radius.xl}',
+      padding: '1rem',
+      gap: '1rem',
+    },
+    lg: {
+      borderRadius: '{border-radius.none}',
+      padding: '1rem',
+      gap: '1rem',
+    },
+  },
+  controlBar: {
+    sm: {
+      borderRadius: '{border-radius.lg}',
+      padding: '0.5rem',
+      gap: '0.5rem',
+    },
+    md: {
+      borderRadius: '{border-radius.xl}',
+      padding: '1rem',
+      gap: '1rem',
+    },
+    lg: {
+      borderRadius: '{border-radius.xl}',
+      padding: '1rem',
+      gap: '1rem',
+    },
+  },
+}