@webitel/styleguide 24.12.81 → 24.12.83

package/package.json

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

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

@@ -7,6 +7,7 @@ import ToolbarScheme from './toolbar';
 import ChipScheme from "./chip";
 import CheckboxScheme from "./checkbox";
 import TableScheme from "./table";
+import TextareaScheme from "./textarea";
 import SwitcherScheme from "./switcher";
 import DividerScheme from "./divider";
 import SliderScheme from "./slider";
@@ -24,6 +25,7 @@ export {
   ChipScheme,
   CheckboxScheme,
   TableScheme,
+  TextareaScheme,
   SwitcherScheme,
   DividerScheme,
   SliderScheme,

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

@@ -11,6 +11,7 @@ const darkColors = {
     background: '{surface.850}',
     hoverBackground: '{surface.900}',
     selectedBackground: '{surface.950}',
+    dragBackground: '{surface.750}',
     borderColor: '{datatable.border.color}',
     color: '{content.color}',
     hoverColor: '{content.hoverColor}',
@@ -56,6 +57,9 @@ const darkColors = {
   resizeIndicator: {
     color: '{primary.color}'
   },
+  reorderIndicator: {
+    color: '{surface.750}'
+  },
   filter: {
     overlaySelect: {
         background: '{overlay.select.background}',

package/src/lib/primevue/components/table/colors/light/index.ts

@@ -11,6 +11,7 @@ const lightColors = {
     background: '{surface.100}',
     hoverBackground: '{surface.150}',
     selectedBackground: '{surface.200}',
+    dragBackground: '{surface.250}',
     borderColor: '{datatable.border.color}',
     color: '{content.color}',
     hoverColor: '{content.hoverColor}',
@@ -56,6 +57,9 @@ const lightColors = {
   resizeIndicator: {
     color: '{primary.color}'
   },
+  reorderIndicator: {
+    color: '{surface.250}'
+  },
   filter: {
     overlaySelect: {
         background: '{overlay.select.background}',

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

@@ -0,0 +1,24 @@
+const darkColors = {
+  root: {
+    background: '{form.field.background}',
+    disabledBackground: '{form.field.disabled.background}',
+    filledBackground: '{form.field.filled.background}',
+    filledHoverBackground: '{form.field.filled.hover.background}',
+    filledFocusBackground: '{form.field.filled.focus.background}',
+    borderColor: '{form.field.border.color}',
+    hoverBorderColor: '{form.field.hover.border.color}',
+    focusBorderColor: '{form.field.focus.border.color}',
+    invalidBorderColor: '{form.field.invalid.border.color}',
+    color: '{form.field.color}',
+    disabledColor: '{form.field.disabled.color}',
+    placeholderColor: '{form.field.placeholder.color}',
+    invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
+    shadow: '{form.field.shadow}',
+    focusRing: {
+      color: '{form.field.focus.ring.color}',
+      shadow: '{form.field.focus.ring.shadow}'
+    },
+  }
+}
+
+export default darkColors

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

@@ -0,0 +1,24 @@
+const lightColors = {
+  root: {
+    background: '{form.field.background}',
+    disabledBackground: '{form.field.disabled.background}',
+    filledBackground: '{form.field.filled.background}',
+    filledHoverBackground: '{form.field.filled.hover.background}',
+    filledFocusBackground: '{form.field.filled.focus.background}',
+    borderColor: '{form.field.border.color}',
+    hoverBorderColor: '{form.field.hover.border.color}',
+    focusBorderColor: '{form.field.focus.border.color}',
+    invalidBorderColor: '{form.field.invalid.border.color}',
+    color: '{form.field.color}',
+    disabledColor: '{form.field.disabled.color}',
+    placeholderColor: '{form.field.placeholder.color}',
+    invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
+    shadow: '{form.field.shadow}',
+    focusRing: {
+      color: '{form.field.focus.ring.color}',
+      shadow: '{form.field.focus.ring.shadow}'
+    },
+  }
+}
+
+export default lightColors

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

@@ -0,0 +1,9 @@
+import colorScheme from "./colors";
+import sizes from "./sizes";
+
+const TextareaScheme = {
+  colorScheme,
+  sizes,
+};
+
+export default TextareaScheme

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

@@ -0,0 +1,26 @@
+const sizes = {
+  root: {
+    paddingX: '{form.field.padding.x}',
+    paddingY: '{form.field.padding.y}',
+    borderRadius: '{form.field.border.radius}',
+    minHeight: '6.25rem',
+    focusRing: {
+      width: '{form.field.focus.ring.width}',
+      style: '{form.field.focus.ring.style}',
+      offset: '{form.field.focus.ring.offset}',
+    },
+    transitionDuration: '{form.field.transition.duration}',
+    sm: {
+        fontSize: '{form.field.sm.font.size}',
+        paddingX: '{form.field.sm.padding.x}',
+        paddingY: '{form.field.sm.padding.y}'
+    },
+    lg: {
+        fontSize: '{form.field.lg.font.size}',
+        paddingX: '{form.field.lg.padding.x}',
+        paddingY: '{form.field.lg.padding.y}'
+    }
+  }
+}
+
+export default sizes

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

@@ -101,8 +101,9 @@ const darkColor = {
     color: '{surface.200}'
   },
 
-  // Focus colors
-  'focus-color': '{black}',
+  focus: {
+    color: '{white}'
+  },
 
   // content wrapper
   'content-wrapper-color': '{dp-surface-color-20}',

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

@@ -1,7 +1,7 @@
 export default {
   formField: {
-    background: '{surface.950}',
-    disabledBackground: '{surface.700}',
+    background: '{content.background}',
+    disabledBackground: '{surface.750}',
     filledBackground: '{surface.800}',
     filledHoverBackground: '{surface.800}',
     filledFocusBackground: '{surface.800}',
@@ -12,12 +12,12 @@ export default {
     color: '{surface.0}',
     disabledColor: '{surface.400}',
     placeholderColor: '{surface.400}',
-    invalidPlaceholderColor: '{red.400}',
+    invalidPlaceholderColor: '{error.color}',
     floatLabelColor: '{surface.400}',
     floatLabelFocusColor: '{primary.color}',
     floatLabelActiveColor: '{surface.400}',
     floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
-    iconColor: '{surface.400}',
+    iconColor: '{text.color}',
     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/light/index.ts

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

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

@@ -103,8 +103,9 @@ const lightColor = {
     color: '{surface.200}'
   },
 
-  // Focus colors
-  'focus-color': '{black}',
+  focus: {
+    color: '{black}'
+  },
 
   // content wrapper
   'content-wrapper-color': '{dp-surface-color-20}',

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

@@ -11,7 +11,7 @@ export default {
     paddingX: '0.875rem',
     paddingY: '0.625rem'
   },
-  borderRadius: '{border.radius.md}',
+  borderRadius: '{border.radius.lg}',
   focusRing: {
     width: '0',
     style: 'none',