@webitel/styleguide 24.12.30 → 24.12.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/styleguide",
-  "version": "24.12.30",
+  "version": "24.12.34",
   "main": "",
   "exports": {
     ".": "./src/lib/main.scss",
@@ -15,13 +15,23 @@
     "./workspaces": "./src/workspaces/main.scss",
     "./wt-flow-diagram": "./src/wt-flow-diagram/main.scss",
     "./fonts": "./src/lib/styleguide/fonts/_fonts.scss",
-    "./component-schemes": "./src/lib/primevue/components/index.js",
-    "./semantic": "./src/lib/primevue/semantic/index.js"
+    "./component-schemes": {
+      "import": "./src/lib/primevue/components/index.js",
+      "types": "./dist/types/lib/primevue/components/index.d.ts"
+    },
+    "./semantic": {
+      "import": "./src/lib/primevue/semantic/index.js",
+      "types": "./dist/types/lib/primevue/semantic/index.d.ts"
+    }
   },
   "files": [
     "src/"
   ],
   "scripts": {
-    "publish-styleguide": "npm publish --access public"
+    "publish-styleguide": "npm run build && npm publish --access public",
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "typescript": "^5.8.3"
   }
 }

package/src/lib/primevue/components/popover/colors/dark/index.js

@@ -2,10 +2,7 @@ const darkColors = {
   background: '{overlay.popover.background}',
   borderColor: '{overlay.popover.border.color}',
   color: '{overlay.popover.color}',
-  borderRadius: '{overlay.popover.border.radius}',
   shadow: '{overlay.popover.shadow}',
-  gutter: '10px',
-  arrowOffset: '1.25rem'
 }
 
 export default darkColors

package/src/lib/primevue/components/popover/colors/light/index.js

@@ -2,10 +2,7 @@ const lightColors = {
   background: '{overlay.popover.background}',
   borderColor: '{overlay.popover.border.color}',
   color: '{overlay.popover.color}',
-  borderRadius: '{overlay.popover.border.radius}',
-  shadow: '{overlay.popover.shadow}',
-  gutter: '10px',
-  arrowOffset: '1.25rem'
+  shadow: '{overlay.popover.shadow}'
 }
 
 export default lightColors

package/src/lib/primevue/components/popover/sizes/index.js

@@ -1,5 +1,8 @@
 const sizes = {
-  padding: '{overlay.popover.padding}'
+  padding: '{overlay.popover.padding}',
+  gutter: '10px',
+  arrowOffset: '1.25rem',
+  borderRadius: '{overlay.popover.border.radius}',
 };
 
 export default sizes

package/src/lib/primevue/components/tooltip/colors/dark/index.js

@@ -1,7 +1,9 @@
 const darkColors = {
-  background: '{tooltip-background}',
-  color: '{surface.0}',
-  shadow: '{overlay.popover.shadow}',
+  root: {
+    background: '{wrapper-back}',
+    color: '{surface.0}',
+    shadow: '{overlay.popover.shadow}',
+  }
 };
 
 export default darkColors

package/src/lib/primevue/components/tooltip/colors/light/index.js

@@ -1,7 +1,9 @@
 const lightColors = {
-  background: '{tooltip-background}',
-  color: '{surface.0}',
-  shadow: '{overlay.popover.shadow}',
+  root: {
+    background: '{blue-lighten-2}',
+    color: '{surface.0}',
+    shadow: '{overlay.popover.shadow}',
+  }
 };
 
 export default lightColors

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

@@ -0,0 +1,3 @@
+export default {
+  color: '{primary.color}',
+}

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

@@ -0,0 +1,15 @@
+import light from './light'
+import dark from './dark'
+
+export default {
+  sizes: {
+    width: '1px',
+    style: 'solid',
+    offset: '2px',
+    shadow: 'none'
+  },
+  colorScheme: {
+    light,
+    dark,
+  }
+}

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

@@ -0,0 +1,3 @@
+export default {
+  color: '{primary.color}',
+}

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

@@ -0,0 +1,25 @@
+import darkColor from './dark-color';
+import lightColor from './light-color';
+import palette from './palette';
+import base from './base'
+import overlay from './overlay'
+import focusRing from './focus-ring'
+
+const colorScheme = {
+  light: {
+    ...palette,
+    ...lightColor,
+    ...base.light,
+    ...focusRing.colorScheme.light,
+    ...overlay.colorScheme.light,
+  },
+  dark: {
+    ...palette,
+    ...darkColor,
+    ...base.dark,
+    ...focusRing.colorScheme.dark,
+    ...overlay.colorScheme.dark,
+  },
+};
+
+export default colorScheme;

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

@@ -0,0 +1,17 @@
+export default {
+  select: {
+    background: '{surface.900}',
+    borderColor: '{surface.700}',
+    color: '{text.color}'
+  },
+  popover: {
+    background: '{surface.900}',
+    borderColor: '{surface.700}',
+    color: '{text.color}'
+  },
+  modal: {
+    background: '{surface.900}',
+    borderColor: '{surface.700}',
+    color: '{text.color}'
+  }
+}

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

@@ -0,0 +1,29 @@
+import light from './light'
+import dark from './dark'
+
+export default {
+  sizes: {
+    select: {
+      borderRadius: '{border.radius.md}',
+      shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
+    },
+    popover: {
+      borderRadius: '{border.radius.md}',
+      padding: '0.75rem',
+      shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
+    },
+    modal: {
+      borderRadius: '{border.radius.xl}',
+      padding: '1.25rem',
+      shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
+    },
+    navigation: {
+      shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
+    },
+  },
+
+  colorScheme: {
+    light,
+    dark,
+  },
+}

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

@@ -0,0 +1,17 @@
+export default {
+  select: {
+    background: '{surface.0}',
+    borderColor: '{surface.200}',
+    color: '{text.color}'
+  },
+  popover: {
+    background: '{surface.0}',
+    borderColor: '{surface.200}',
+    color: '{text.color}'
+  },
+  modal: {
+    background: '{surface.0}',
+    borderColor: '{surface.200}',
+    color: '{text.color}'
+  }
+}

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

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

package/src/lib/primevue/semantic/sizes/form-field/index.ts

@@ -0,0 +1,23 @@
+export default {
+  paddingX: '0.75rem',
+  paddingY: '0.5rem',
+  sm: {
+    fontSize: '0.875rem',
+    paddingX: '0.625rem',
+    paddingY: '0.375rem'
+  },
+  lg: {
+    fontSize: '1.125rem',
+    paddingX: '0.875rem',
+    paddingY: '0.625rem'
+  },
+  borderRadius: '{border.radius.md}',
+  focusRing: {
+    width: '0',
+    style: 'none',
+    color: 'transparent',
+    offset: '0',
+    shadow: 'none'
+  },
+  transitionDuration: '{transition.duration}'
+}

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

@@ -0,0 +1,23 @@
+import formField from './form-field'
+import list from './list'
+import navigation from './navigation'
+import overlay from '../color-scheme/overlay'
+import focusRing from '../color-scheme/focus-ring'
+
+export default {
+  transitionDuration: '0.2s',
+  disabledOpacity: '0.6',
+  iconSize: '1rem',
+  anchorGutter: '2px',
+  content: {
+    borderRadius: '{border.radius.md}'
+  },
+  mask: {
+    transitionDuration: '0.15s'
+  },
+  formField,
+  list,
+  navigation,
+  overlay: overlay.sizes,
+  focusRing: focusRing.sizes,
+}

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

@@ -0,0 +1,15 @@
+export default {
+  padding: '0.25rem 0.25rem',
+  gap: '2px',
+  header: {
+    padding: '0.5rem 1rem 0.25rem 1rem'
+  },
+  option: {
+    padding: '0.5rem 0.75rem',
+    borderRadius: '{border.radius.sm}'
+  },
+  optionGroup: {
+    padding: '0.5rem 0.75rem',
+    fontWeight: '600'
+  }
+}

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

@@ -0,0 +1,18 @@
+export default {
+  list: {
+    padding: '0.25rem 0.25rem',
+    gap: '2px'
+  },
+  item: {
+    padding: '0.5rem 0.75rem',
+    borderRadius: '{border.radius.sm}',
+    gap: '0.5rem'
+  },
+  submenuLabel: {
+    padding: '0.5rem 0.75rem',
+    fontWeight: '600'
+  },
+  submenuIcon: {
+    size: '0.875rem'
+  }
+}

package/src/lib/primevue/semantic/color-scheme/components/index.js

@@ -1,15 +0,0 @@
-import popover from './popover';
-import tooltip from './tooltip';
-
-const colorScheme = {
-  light: {
-    ...popover.light,
-    ...tooltip.light,
-  },
-  dark: {
-    ...popover.dark,
-    ...tooltip.dark,
-  },
-}
-
-export default colorScheme

package/src/lib/primevue/semantic/color-scheme/components/popover/dark-color.js

@@ -1,7 +0,0 @@
-export default {
-  overlay: {
-    popover: {
-      background: '{grey-lighten-3}'
-    }
-  }
-}

package/src/lib/primevue/semantic/color-scheme/components/popover/index.js

@@ -1,7 +0,0 @@
-import light from './light-color'
-import dark from './dark-color'
-
-export default {
-  light,
-  dark
-}

package/src/lib/primevue/semantic/color-scheme/components/popover/light-color.js

@@ -1,7 +0,0 @@
-export default {
-  overlay: {
-    popover: {
-      background: '{grey-lighten-3}'
-    }
-  }
-}

package/src/lib/primevue/semantic/color-scheme/components/tooltip/dark-color.js

@@ -1,3 +0,0 @@
-export default {
-  'tooltip-background': '{red-lighten-2}'
-}

package/src/lib/primevue/semantic/color-scheme/components/tooltip/index.js

@@ -1,7 +0,0 @@
-import light from './light-color'
-import dark from './dark-color'
-
-export default {
-  light,
-  dark
-}

package/src/lib/primevue/semantic/color-scheme/components/tooltip/light-color.js

@@ -1,3 +0,0 @@
-export default {
-  'tooltip-background': '{blue-lighten-2}'
-}

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

@@ -1,22 +0,0 @@
-import darkColor from './dark-color.js';
-import lightColor from './light-color.js';
-import palette from './palette.js';
-import base from './base'
-import components from './components'
-
-const colorScheme = {
-  light: {
-    ...palette,
-    ...lightColor,
-    ...base.light,
-    ...components.light,
-  },
-  dark: {
-    ...palette,
-    ...darkColor,
-    ...base.dark,
-    ...components.dark,
-  },
-};
-
-export default colorScheme;

package/src/lib/primevue/semantic/index.js

@@ -1,7 +0,0 @@
-import colorScheme from './color-scheme/index.js';
-
-const semantic = {
-  colorScheme,
-};
-
-export default semantic;