@webitel/styleguide 24.12.47 → 24.12.48

package/package.json

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

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

@@ -0,0 +1,9 @@
+export default {
+  content: {
+    background: '{surface.900}',
+    hoverBackground: '{surface.800}',
+    borderColor: '{surface.700}',
+    color: '{text.color}',
+    hoverColor: '{text.hover.color}'
+  }
+}

package/src/lib/primevue/semantic/color-scheme/content/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/content/light/index.ts

@@ -0,0 +1,9 @@
+export default {
+  content: {
+    background: '{surface.0}',
+    hoverBackground: '{surface.100}',
+    borderColor: '{surface.200}',
+    color: '{text.color}',
+    hoverColor: '{text.hover.color}'
+  }
+}

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

@@ -70,6 +70,17 @@ const darkColor = {
     foreground: '{blue.950}'
   },
 
+  highlight: {
+    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+    color: 'rgba(255,255,255,.87)',
+    focusColor: 'rgba(255,255,255,.87)'
+  },
+  mask: {
+    background: 'rgba(0,0,0,0.6)',
+    color: '{surface.200}'
+  },
+
   // Focus colors
   'focus-color': '{black}',
 

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

@@ -2,12 +2,6 @@ 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/form-field/dark/index.ts

@@ -0,0 +1,23 @@
+export default {
+  formField: {
+    background: '{surface.950}',
+    disabledBackground: '{surface.700}',
+    filledBackground: '{surface.800}',
+    filledHoverBackground: '{surface.800}',
+    filledFocusBackground: '{surface.800}',
+    borderColor: '{surface.600}',
+    hoverBorderColor: '{surface.500}',
+    focusBorderColor: '{primary.color}',
+    invalidBorderColor: '{red.300}',
+    color: '{surface.0}',
+    disabledColor: '{surface.400}',
+    placeholderColor: '{surface.400}',
+    invalidPlaceholderColor: '{red.400}',
+    floatLabelColor: '{surface.400}',
+    floatLabelFocusColor: '{primary.color}',
+    floatLabelActiveColor: '{surface.400}',
+    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
+    iconColor: '{surface.400}',
+    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
+  }
+}

package/src/lib/primevue/semantic/color-scheme/form-field/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/form-field/light/index.ts

@@ -0,0 +1,23 @@
+export default {
+  formField: {
+    background: '{surface.0}',
+    disabledBackground: '{surface.200}',
+    filledBackground: '{surface.50}',
+    filledHoverBackground: '{surface.50}',
+    filledFocusBackground: '{surface.50}',
+    borderColor: '{surface.300}',
+    hoverBorderColor: '{surface.400}',
+    focusBorderColor: '{primary.color}',
+    invalidBorderColor: '{red.400}',
+    color: '{surface.700}',
+    disabledColor: '{surface.500}',
+    placeholderColor: '{surface.500}',
+    invalidPlaceholderColor: '{red.600}',
+    floatLabelColor: '{surface.500}',
+    floatLabelFocusColor: '{primary.600}',
+    floatLabelActiveColor: '{surface.500}',
+    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
+    iconColor: '{surface.400}',
+    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
+  }
+}

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

@@ -4,6 +4,12 @@ import palette from './palette';
 import base from './base'
 import overlay from './overlay'
 import focusRing from './focus-ring'
+import text from './text'
+import formField from './form-field';
+import surface from './surface';
+import content from './content';
+import list from './list';
+import navigation from './navigation';
 
 const colorScheme = {
   light: {
@@ -12,6 +18,12 @@ const colorScheme = {
     ...base.light,
     ...focusRing.colorScheme.light,
     ...overlay.colorScheme.light,
+    ...text.colorScheme.light,
+    ...formField.colorScheme.light,
+    ...surface.colorScheme.light,
+    ...content.colorScheme.light,
+    ...list.colorScheme.light,
+    ...navigation.colorScheme.light,
   },
   dark: {
     ...palette,
@@ -19,6 +31,12 @@ const colorScheme = {
     ...base.dark,
     ...focusRing.colorScheme.dark,
     ...overlay.colorScheme.dark,
+    ...text.colorScheme.dark,
+    ...formField.colorScheme.dark,
+    ...surface.colorScheme.dark,
+    ...content.colorScheme.dark,
+    ...list.colorScheme.dark,
+    ...navigation.colorScheme.dark,
   },
 };
 

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

@@ -70,6 +70,18 @@ const lightColor = {
     foreground: '{blue.50}'
   },
 
+  highlight: {
+    background: '{primary.50}',
+    focusBackground: '{primary.100}',
+    color: '{primary.700}',
+    focusColor: '{primary.800}'
+  },
+
+  mask: {
+    background: 'rgba(0,0,0,0.4)',
+    color: '{surface.200}'
+  },
+
   // Focus colors
   'focus-color': '{black}',
 

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

@@ -0,0 +1,21 @@
+export default {
+  list: {
+    option: {
+      focusBackground: '{surface.800}',
+      selectedBackground: '{highlight.background}',
+      selectedFocusBackground: '{highlight.focus.background}',
+      color: '{text.color}',
+      focusColor: '{text.hover.color}',
+      selectedColor: '{highlight.color}',
+      selectedFocusColor: '{highlight.focus.color}',
+      icon: {
+        color: '{surface.500}',
+        focusColor: '{surface.400}'
+      }
+    },
+    optionGroup: {
+      background: 'transparent',
+      color: '{text.muted.color}'
+    }
+  }
+}

package/src/lib/primevue/semantic/color-scheme/list/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/list/light/index.ts

@@ -0,0 +1,21 @@
+export default {
+  list: {
+    option: {
+      focusBackground: '{surface.100}',
+      selectedBackground: '{highlight.background}',
+      selectedFocusBackground: '{highlight.focus.background}',
+      color: '{text.color}',
+      focusColor: '{text.hover.color}',
+      selectedColor: '{highlight.color}',
+      selectedFocusColor: '{highlight.focus.color}',
+      icon: {
+        color: '{surface.400}',
+        focusColor: '{surface.500}'
+      }
+    },
+    optionGroup: {
+      background: 'transparent',
+      color: '{text.muted.color}'
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+export default {
+  navigation: {
+    item: {
+      focusBackground: '{surface.800}',
+      activeBackground: '{surface.800}',
+      color: '{text.color}',
+      focusColor: '{text.hover.color}',
+      activeColor: '{text.hover.color}',
+      icon: {
+        color: '{surface.500}',
+        focusColor: '{surface.400}',
+        activeColor: '{surface.400}'
+      }
+    },
+    submenuLabel: {
+      background: 'transparent',
+      color: '{text.muted.color}'
+    },
+    submenuIcon: {
+      color: '{surface.500}',
+      focusColor: '{surface.400}',
+      activeColor: '{surface.400}'
+    }
+  }
+}

package/src/lib/primevue/semantic/color-scheme/navigation/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/navigation/light/index.ts

@@ -0,0 +1,25 @@
+export default {
+  navigation: {
+    item: {
+      focusBackground: '{surface.100}',
+      activeBackground: '{surface.100}',
+      color: '{text.color}',
+      focusColor: '{text.hover.color}',
+      activeColor: '{text.hover.color}',
+      icon: {
+        color: '{surface.400}',
+        focusColor: '{surface.500}',
+        activeColor: '{surface.500}'
+      }
+    },
+    submenuLabel: {
+      background: 'transparent',
+      color: '{text.muted.color}'
+    },
+    submenuIcon: {
+      color: '{surface.400}',
+      focusColor: '{surface.500}',
+      activeColor: '{surface.500}'
+    }
+  }
+}

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

@@ -2,25 +2,6 @@ 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: '1rem',
-      padding: '0.75rem',
-    },
-    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/surface/dark/index.ts

@@ -0,0 +1,16 @@
+export default {
+  surface: {
+    0: '#ffffff',
+    50: '{zinc.50}',
+    100: '{zinc.100}',
+    200: '{zinc.200}',
+    300: '{zinc.300}',
+    400: '{zinc.400}',
+    500: '{zinc.500}',
+    600: '{zinc.600}',
+    700: '{zinc.700}',
+    800: '{zinc.800}',
+    900: '{zinc.900}',
+    950: '{zinc.950}'
+  }
+}

package/src/lib/primevue/semantic/color-scheme/surface/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/surface/light/index.ts

@@ -0,0 +1,16 @@
+export default {
+  surface: {
+    0: '#ffffff',
+    50: '{slate.50}',
+    100: '{slate.100}',
+    200: '{slate.200}',
+    300: '{slate.300}',
+    400: '{slate.400}',
+    500: '{slate.500}',
+    600: '{slate.600}',
+    700: '{slate.700}',
+    800: '{slate.800}',
+    900: '{slate.900}',
+    950: '{slate.950}'
+  }
+}

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

@@ -0,0 +1,8 @@
+export default {
+  text: {
+    color: '{surface.0}',
+    hoverColor: '{surface.0}',
+    mutedColor: '{surface.400}',
+    hoverMutedColor: '{surface.300}'
+  }
+}

package/src/lib/primevue/semantic/color-scheme/text/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/text/light/index.ts

@@ -0,0 +1,8 @@
+export default {
+  text: {
+    color: '{surface.700}',
+    hoverColor: '{surface.800}',
+    mutedColor: '{surface.500}',
+    hoverMutedColor: '{surface.600}'
+  }
+}

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

@@ -0,0 +1,6 @@
+export default {
+  width: '1px',
+  style: 'solid',
+  offset: '2px',
+  shadow: 'none'
+}

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

@@ -1,8 +1,8 @@
 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'
+import overlay from './overlay'
+import focusRing from './focus-ring'
 
 export default {
   transitionDuration: '0.2s',
@@ -18,6 +18,6 @@ export default {
   formField,
   list,
   navigation,
-  overlay: overlay.sizes,
-  focusRing: focusRing.sizes,
+  overlay,
+  focusRing,
 }

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

@@ -0,0 +1,18 @@
+export default {
+  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: '1rem',
+    padding: '0.75rem',
+  },
+  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)'
+  },
+}