@webitel/styleguide 26.2.4 → 26.2.5

package/package.json

@@ -1,52 +1,54 @@
 {
   "name": "@webitel/styleguide",
-  "version": "26.2.4",
+  "version": "26.2.5",
   "main": "",
+  "files": [
+    "src/"
+  ],
+  "scripts": {
+    "publish-styleguide": "npm run build && npm publish --access public",
+    "build": "tsc -p ./tsconfig.build.json"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.x"
+  },
   "exports": {
-    ".": "./src/lib/main.scss",
-    "./typography": "./src/lib/styleguide/typography/_typography.scss",
-    "./_typography": "./src/lib/styleguide/typography/_typography.scss",
-    "./scroll": "./src/lib/styleguide/scroll.scss",
-    "./_scroll": "./src/lib/styleguide/scroll.scss",
+    ".": {
+      "style": "./src/lib/main.css"
+    },
+    "./src/lib/main.css": {
+    "style": "./src/lib/main.css"
+    },
+    "./typography": "./src/lib/styleguide/typography/typography.css",
+    "./scroll": "./src/lib/styleguide/scroll.css",
     "./viewport-breakpoints": "./src/lib/styleguide/viewport-breakpoints/_viewport-breakpoints.scss",
-    "./_viewport-breakpoints": "./src/lib/styleguide/viewport-breakpoints/_viewport-breakpoints.scss",
-    "./auditor": "./src/auditor/main.scss",
-    "./_auditor": "./src/auditor/main.scss",
-    "./client": "./src/client/main.scss",
-    "./_client": "./src/client/main.scss",
-    "./crm": "./src/crm/main.scss",
-    "./_crm": "./src/crm/main.scss",
-    "./history": "./src/history/main.scss",
-    "./_history": "./src/history/main.scss",
-    "./supervisor": "./src/supervisor/main.scss",
-    "./_supervisor": "./src/supervisor/main.scss",
-    "./workspaces": "./src/workspaces/main.scss",
-    "./_workspaces": "./src/workspaces/main.scss",
-    "./wt-flow-diagram": "./src/wt-flow-diagram/main.scss",
-    "./_wt-flow-diagram": "./src/wt-flow-diagram/main.scss",
-    "./fonts": "./src/lib/styleguide/fonts/_fonts.scss",
-    "./_fonts": "./src/lib/styleguide/fonts/_fonts.scss",
+    "./fonts": "./src/lib/styleguide/fonts/fonts.css",
+    "./applications/auditor": "./src/applications/auditor/main.scss",
+    "./applications/client": "./src/applications/client/main.scss",
+    "./applications/crm": "./src/applications/crm/main.scss",
+    "./applications/history": "./src/applications/history/main.scss",
+    "./applications/supervisor": "./src/applications/supervisor/main.scss",
+    "./applications/workspaces": "./src/applications/workspaces/main.scss",
+    "./applications/wt-flow-diagram": "./src/applications/wt-flow-diagram/main.scss",
     "./component-schemes": {
-      "import": "./src/lib/primevue/components/index.js"
+      "types": "./types/lib/primevue/components/index.d.ts",
+      "import": "./src/lib/primevue/components/index.ts"
     },
     "./semantic": {
-      "import": "./src/lib/primevue/semantic/index.js"
+      "types": "./types/lib/primevue/semantic/index.d.ts",
+      "import": "./src/lib/primevue/semantic/index.ts"
     },
     "./extend": {
-      "import": "./src/lib/primevue/extend/extend.js"
+      "types": "./types/lib/primevue/extend/extend.d.ts",
+      "import": "./src/lib/primevue/extend/extend.ts"
     },
     "./primitive": {
-      "import": "./src/lib/primevue/primitive/index.js"
+      "types": "./types/lib/primevue/primitive/index.d.ts",
+      "import": "./src/lib/primevue/primitive/index.ts"
+    },
+    "./enums": {
+      "types": "./types/enums/index.d.ts",
+      "import": "./src/enums/index.ts"
     }
-  },
-  "files": [
-    "src/"
-  ],
-  "scripts": {
-    "publish-styleguide": "npm run build && npm publish --access public",
-    "build": "tsc"
-  },
-  "devDependencies": {
-    "typescript": "^5.8.3"
   }
-}
+}

package/src/enums/WtTypography/WtTypography.enum.ts

@@ -0,0 +1,15 @@
+export const WtTypography = {
+    Button: 'typo-button',
+    Body1: 'typo-body-1',
+    Body2: 'typo-body-2',
+    Subtitle1: 'typo-subtitle-1',
+    Subtitle2: 'typo-subtitle-2',
+    Heading1: 'typo-heading-1',
+    Heading2: 'typo-heading-2',
+    Heading3: 'typo-heading-3',
+    Heading4: 'typo-heading-4',
+    Caption: 'typo-caption',
+    Overline: 'typo-overline',
+} as const;
+
+export type WtTypography = (typeof WtTypography)[keyof typeof WtTypography];

package/src/enums/index.ts

@@ -0,0 +1 @@
+export * from './WtTypography/WtTypography.enum';

package/src/lib/main.css

@@ -0,0 +1,2 @@
+@import './styleguide/styleguide.css';
+

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

@@ -4,6 +4,7 @@ import navigation from './navigation'
 import overlay from './overlay'
 import focusRing from './focus-ring'
 import player from './player'
+import typography from './typography'
 
 export default {
   transitionDuration: '0.2s',
@@ -22,4 +23,5 @@ export default {
   overlay,
   focusRing,
   player,
+  typography,
 }

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

@@ -0,0 +1,95 @@
+import { WtTypography } from '@webitel/styleguide/enums';
+
+/**
+ * refers to the typography.css file
+ */
+export default {
+    [WtTypography.Heading1]: {
+        font: {
+            size: '32px',
+            weight: '600',
+        },
+        lineHeight: '48px',
+        textTransform: 'none',
+    },
+    [WtTypography.Heading2]: {
+        font: {
+            size: '24px',
+            weight: '600',
+        },
+        lineHeight: '40px',
+        textTransform: 'none',
+    },
+    [WtTypography.Heading3]: {
+        font: {
+            size: '20px',
+            weight: '600',
+        },
+        lineHeight: '32px',
+        textTransform: 'none',
+    },
+    [WtTypography.Heading4]: {
+        font: {
+            size: '16px',
+            weight: '600',
+        },
+        lineHeight: '24px',
+        textTransform: 'none',
+    },
+    [WtTypography.Subtitle1]: {
+        font: {
+            size: '14px',
+            weight: '500',
+        },
+        lineHeight: '24px',
+        textTransform: 'none',
+    },
+    [WtTypography.Subtitle2]: {
+        font: {
+            size: '12px',
+            weight: '500',
+        },
+        lineHeight: '20px',
+        textTransform: 'none',
+    },
+    [WtTypography.Body1]: {
+        font: {
+            size: '14px',
+            weight: '400',
+        },
+        lineHeight: '24px',
+        textTransform: 'none',
+    },
+    [WtTypography.Body2]: {
+        font: {
+            size: '12px',
+            weight: '400',
+        },
+        lineHeight: '16px',
+        textTransform: 'none',
+    },
+    [WtTypography.Button]: {
+        font: {
+            size: '12px',
+            weight: '500',
+        },
+        lineHeight: '24px',
+        textTransform: 'uppercase',
+    },
+    [WtTypography.Caption]: {
+        font: {
+            size: '10px',
+            weight: '400',
+        },
+        lineHeight: '16px',
+        textTransform: 'none',
+    },
+    [WtTypography.Overline]: {
+        font: {
+            size: '12px',
+            weight: '500',
+        },
+        lineHeight: '20px',
+        textTransform: 'uppercase',
+    },
+};

package/src/lib/styleguide/border-radius/border-radius.css

@@ -0,0 +1,4 @@
+:root {
+    --border-radius: var(--spacing-2xs);
+    --border-radius--pill: 50px;
+}

package/src/lib/styleguide/colors/colors.css

@@ -0,0 +1,206 @@
+@import './palette.css';
+@import './deprecated.css';
+@import './reusable/text-field.css';
+
+:root {
+    /* dp colors */
+    --dp-24-surface-color: hsl(0, 0%, 100%);
+    --dp-23-surface-color: hsl(225, 20%, 99%);
+    --dp-22-surface-color: hsl(225, 20%, 98%);
+    --dp-21-surface-color: hsl(225, 20%, 97%);
+    --dp-20-surface-color: hsl(225, 20%, 96%);
+    --dp-19-surface-color: hsl(225, 20%, 95%);
+    --dp-18-surface-color: hsl(225, 20%, 94%);
+    --dp-17-surface-color: hsl(225, 20%, 93%);
+    --dp-16-surface-color: hsl(225, 20%, 92%);
+    --dp-15-surface-color: hsl(225, 20%, 91%);
+    --dp-14-surface-color: hsl(225, 20%, 90%);
+    --dp-13-surface-color: hsl(225, 20%, 89%);
+    --dp-12-surface-color: hsl(225, 20%, 88%);
+    --dp-11-surface-color: hsl(225, 20%, 87%);
+    --dp-10-surface-color: hsl(225, 20%, 86%);
+    --dp-9-surface-color: hsl(225, 20%, 85%);
+    --dp-8-surface-color: hsl(225, 20%, 84%);
+    --dp-7-surface-color: hsl(225, 20%, 83%);
+    --dp-6-surface-color: hsl(225, 20%, 82%);
+    --dp-5-surface-color: hsl(225, 20%, 81%);
+    --dp-4-surface-color: hsl(225, 20%, 80%);
+    --dp-3-surface-color: hsl(225, 20%, 79%);
+    --dp-2-surface-color: hsl(225, 20%, 78%);
+    --dp-1-surface-color: hsl(225, 20%, 77%);
+
+    /* content wrapper */
+    --content-wrapper-color: var(--p-content-background);
+    --content-wrapper-hover-color: var(--p-content-hover-background);
+
+    /* success colors */
+    --success-color: var(--green-darken-4);
+    --success-hover-color: var(--green-darken-3);
+    --success-light-color: var(--green-lighten-4);
+    --success-on-color: var(--white);
+
+    /* warning colors */
+    --warning-color: var(--orange-accent-2);
+    --warning-hover-color: var(--orange-accent-1);
+    --warning-light-color: var(--orange-lighten-4);
+    --warning-on-color: var(--black);
+
+    /* error colors */
+    --error-color: var(--red-accent-2);
+    --error-hover-color: var(--red-lighten-2);
+    --error-light-color: var(--red-lighten-4);
+    --error-on-color: var(--white);
+
+    /* info colors */
+    --info-color: var(--blue-darken-1);
+    --info-hover-color: var(--blue-lighten-1);
+    --info-light-color: var(--blue-lighten-4);
+    --info-on-color: var(--black);
+
+    /* job colors */
+    --job-color: var(--blue-darken-1);
+    --job-hover-color: var(--blue-lighten-1);
+    --job-light-color: var(--blue-lighten-4);
+    --job-on-color: var(--black);
+
+    /* chat colors */
+    --chat-color: var(--indigo-accent-2);
+    --chat-hover-color: var(--indigo-accent-1);
+    --chat-light-color: var(--indigo-lighten-4);
+    --chat-on-color: var(--black);
+
+    /* transfer colors */
+    --transfer-color: var(--indigo-lighten-1);
+    --transfer-hover-color: var(--indigo-lighten-2);
+    --transfer-light-color: var(--indigo-lighten-4);
+    --transfer-on-color: var(--white);
+
+    /* primary colors */
+    --primary-color: var(--amber-accent-3);
+    --primary-hover-color: var(--amber-accent-2);
+    --primary-light-color: var(--amber-lighten-3);
+    --primary-on-color: var(--black);
+
+    /* secondary colors */
+    --secondary-color: var(--dp-10-surface-color);
+    --secondary-hover-color: var(--dp-14-surface-color);
+    --secondary-light-color: var(--dp-16-surface-color);
+    --secondary-on-color: var(--grey-darken-4);
+
+    /* email colors */
+    --email-color: var(--blue-darken-3);
+    --email-hover-color: var(--blue-darken-2);
+    --email-light-color: var(--blue-lighten-2);
+    --email-on-color: var(--black);
+
+    /* accent colors */
+    --accent-color: var(--purple-lighten-1);
+    --sub-accent-color: var(--indigo-darken-3);
+
+    /* typography colors */
+    --text-main-color: var(--grey-darken-3);
+    --text-disabled-color: var(--grey-lighten-1);
+    --text-error-color: var(--error-color);
+    --text-success-color: var(--success-color);
+    --text-link-color: var(--info-color);
+    /* typography on colors */
+    --text-on-brand-color: var(--white);
+}
+
+:root.theme--dark {
+    /* dp colors */
+    --dp-24-surface-color: hsl(225, 20%, 25%);
+    --dp-23-surface-color: hsl(225, 20%, 24%);
+    --dp-22-surface-color: hsl(225, 20%, 23%);
+    --dp-21-surface-color: hsl(225, 20%, 22%);
+    --dp-20-surface-color: hsl(225, 20%, 21%);
+    --dp-19-surface-color: hsl(225, 20%, 20%);
+    --dp-18-surface-color: hsl(225, 20%, 19%);
+    --dp-17-surface-color: hsl(225, 20%, 18%);
+    --dp-16-surface-color: hsl(225, 20%, 17%);
+    --dp-15-surface-color: hsl(225, 20%, 16%);
+    --dp-14-surface-color: hsl(225, 20%, 15%);
+    --dp-13-surface-color: hsl(225, 20%, 14%);
+    --dp-12-surface-color: hsl(225, 20%, 13%);
+    --dp-11-surface-color: hsl(225, 20%, 12%);
+    --dp-10-surface-color: hsl(225, 20%, 11%);
+    --dp-9-surface-color: hsl(225, 20%, 10%);
+    --dp-8-surface-color: hsl(225, 20%, 9%);
+    --dp-7-surface-color: hsl(225, 20%, 8%);
+    --dp-6-surface-color: hsl(225, 20%, 7%);
+    --dp-5-surface-color: hsl(225, 20%, 6%);
+    --dp-4-surface-color: hsl(225, 20%, 5%);
+    --dp-3-surface-color: hsl(225, 20%, 4%);
+    --dp-2-surface-color: hsl(225, 20%, 3%);
+    --dp-1-surface-color: hsl(225, 20%, 2%);
+
+    /* success colors */
+    --success-color: var(--green-darken-4);
+    --success-hover-color: var(--green-darken-3);
+    --success-light-color: var(--green-lighten-3);
+    --success-on-color: var(--black);
+
+    /* warning colors */
+    --warning-color: var(--orange-accent-2);
+    --warning-hover-color: var(--orange-accent-1);
+    --warning-light-color: var(--orange-lighten-3);
+    --warning-on-color: var(--black);
+
+    /* error colors */
+    --error-color: var(--red-accent-2);
+    --error-hover-color: var(--red-lighten-2);
+    --error-light-color: var(--red-lighten-3);
+    --error-on-color: var(--black);
+
+    /* info colors */
+    --info-color: var(--blue-darken-1);
+    --info-hover-color: var(--blue-lighten-1);
+    --info-light-color: var(--blue-lighten-3);
+    --info-on-color: var(--white);
+
+    /* job colors */
+    --job-color: var(--blue-darken-1);
+    --job-hover-color: var(--blue-lighten-1);
+    --job-light-color: var(--blue-lighten-3);
+    --job-on-color: var(--white);
+
+    /* chat colors */
+    --chat-color: var(--indigo-accent-2);
+    --chat-hover-color: var(--indigo-accent-1);
+    --chat-light-color: var(--indigo-lighten-3);
+    --chat-on-color: var(--white);
+
+    /* transfer colors */
+    --transfer-color: var(--indigo-darken-1);
+    --transfer-hover-color: var(--indigo-lighten-1);
+    --transfer-light-color: var(--indigo-lighten-4);
+    --transfer-on-color: var(--white);
+
+    /* primary colors */
+    --primary-color: var(--amber-darken-2);
+    --primary-hover-color: var(--amber-darken-1);
+    --primary-light-color: var(--amber-darken-4);
+    --primary-on-color: var(--black);
+
+    /* secondary colors */
+    --secondary-on-color: var(--grey-lighten-4);
+
+    /* email colors */
+    --email-color: var(--blue-darken-3);
+    --email-hover-color: var(--blue-darken-2);
+    --email-light-color: var(--blue-lighten-1);
+    --email-on-color: var(--white);
+
+    /* accent colors */
+    --accent-color: var(--purple-lighten-1);
+    --sub-accent-color: var(--indigo-darken-3);
+
+    /* typography colors */
+    --text-main-color: var(--grey-lighten-3);
+    --text-disabled-color: var(--grey-darken-1);
+    --text-error-color: var(--error-color);
+    --text-success-color: var(--success-color);
+    --text-link-color: var(--info-color);
+    /* typography on colors */
+    --text-on-brand-color: var(--white);
+}

package/src/lib/styleguide/colors/deprecated.css

@@ -0,0 +1,150 @@
+:root {
+    /* HSL COLORS HUE VALUE */
+    --_accent-color-hue: 42;
+    --_secondary-color-hue: 202;
+    --_page-bg-color-hue: 209;
+    --_icon-color-hue: 202;
+    --_positive-color-hue: 119;
+    --_negative-color-hue: 11;
+
+    --_hold-color-hue: 54;
+    --_transfer-color-hue: 227;
+    --_job-color-hue: 209;
+
+    /* DEFAULT STATES OPACITY */
+    --_opacity--default: 0.8;
+    --_opacity--hover: 1;
+    --_opacity--active: 1;
+    --_opacity--focus: 0.8;
+    --_opacity--disabled: 0.4;
+
+    /* BASIC HSL COLORS VALUES */
+    --_accent-color: var(--_accent-color-hue), 100%, 50%;
+    --_main-color: var(--_accent-color-hue), 20%, 99%;
+    --_contrast-color: var(--_accent-color-hue), 20%, 1%;
+    --_secondary-color: var(--_secondary-color-hue), 20%, 90%;
+    --_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
+    --_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
+    --_header-color: var(--_page-bg-color-hue), 20%, 90%;
+    --_positive-color: var(--_positive-color-hue), 60%, 40%;
+    --_negative-color: var(--_negative-color-hue), 80%, 50%;
+    --_icon-color: var(--_icon-color-hue), 100%, 15%;
+
+    --_hold-color: var(--_hold-color-hue), 80%, 50%;
+    --_transfer-color: var(--_transfer-color-hue), 80%, 50%;
+    --_job-color: var(--_job-color-hue), 96%, 57%;
+
+    /* MAIN COLORS */
+    --accent-color: hsla(var(--_accent-color), 1);
+
+    --main-color: hsla(var(--_main-color), 1);
+
+    --contrast-color: hsla(var(--_contrast-color), 1);
+
+    --secondary-color: hsla(var(--_secondary-color), 1);
+    --secondary-color-50: hsla(var(--_secondary-color-50), 1);
+
+    /* ICON COLORS */
+    --icon-color-secondary: hsla(var(--_icon-color), 0.25);
+
+    --icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));
+
+    --icon-color-accent: var(--accent-color);
+    --icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
+    --icon-color-active: var(--icon-color--hover);
+    --icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
+    --icon-color-success: var(--true-color);
+    --icon-color-danger: var(--false-color);
+    --icon-color-transfer: var(--transfer-color);
+    --icon-color-hold: var(--hold-color);
+    --icon-color-secondary-50: var(--secondary-color-50);
+
+
+    --page-bg-color: hsla(var(--_page-bg-color), 1);
+    --header-color: hsla(var(--_header-color), 1);
+
+    --accent-secondary-color: hsla(var(--_accent-color), 0.3);
+
+    /* SEMANTIC COLORS */
+    --disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));
+
+    --true-color: hsla(var(--_positive-color), var(--_opacity--default));
+    --true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));
+
+    --false-color: hsla(var(--_negative-color), var(--_opacity--default));
+    --false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));
+
+    --hold-color: hsla(var(--_hold-color), var(--_opacity--default));
+    --hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));
+
+    --transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
+    --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));
+
+    --job-color: hsla(var(--_job-color), var(--_opacity--default));
+    --job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));
+
+    --link-color: hsla(205, 90%, 45%, 1);
+    --link--hover-color: hsla(205, 90%, 60%, 1);
+
+    /* SUBORDINATE COLORS */
+    --tag-bg-color: var(--accent-secondary-color);
+
+    /* FORM STATES OPACITY */
+    --form-opacity--default: var(--_opacity--default);
+    --form-opacity--hover: var(--_opacity--hover);
+    --form-opacity--active: var(--_opacity--active);
+    --form-opacity--focus: var(--_opacity--focus);
+    --form-opacity--disabled: var(--_opacity--disabled);
+
+    --form-placeholder-opacity: 0.6;
+    --form-placeholder-opacity--focus: 0.4;
+    --form-border-opacity--disabled: 0.05;
+
+    --form-opacity--ouline--default: 0.4;
+    --form-opacity--ouline--hover: 0.7;
+
+    /* FORM COLORS */
+    --form-input-color: var(--contrast-color);
+    /* user input color */
+
+    --form-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
+    --form-label--hover-color: hsla(var(--_contrast-color), var(--form-opacity--hover));
+    --form-label--active-color: hsla(var(--_contrast-color), var(--form-opacity--active));
+    --form-label--disabled-color: hsla(var(--_contrast-color), var(--form-opacity--disabled));
+
+    --form-border-color: hsla(var(--_contrast-color), var(--form-opacity--default));
+    --form-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--hover));
+    --form-border--disabled-color: hsla(var(--_contrast-color), var(--form-border-opacity--disabled));
+
+    --form-placeholder-color: hsla(var(--_contrast-color), var(--form-placeholder-opacity));
+    --form-placeholder-color--focus: hsla(var(--_contrast-color), var(--form-placeholder-opacity--focus));
+    --form-placeholder-color--disabled: hsla(var(--_contrast-color), var(--form-opacity--disabled));
+
+    /* outline */
+    --form-outline-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
+
+    --form-outline-border-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--default));
+    --form-outline-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--hover));
+
+    /* TEXT OPACITY */
+    --text-opacity--default: var(--_opacity--default);
+    --text-opacity----outline--default: 0.7;
+    --text-opacity--disabled: 0.5;
+
+    /* TEXT COLORS */
+    --text-primary-color: hsla(var(--_contrast-color), var(--text-opacity--default));
+    --text-outline-color: hsla(var(--_contrast-color), var(--text-opacity----outline--default));
+    --text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
+    --text--disabled-color: hsla(var(--_contrast-color), var(--text-opacity--disabled));
+
+    /* CHAT COLORS */
+    --_chat-client-color: var(--_accent-color);
+    --_chat-client-opacity: 0.2;
+    --_chat-agent-color: var(--_secondary-color-50);
+    --_chat-agent-opacity: 1;
+
+    --chat-client-message-bg-color: hsla(var(--_chat-client-color), var(--_chat-client-opacity));
+    --chat-agent-message-bg-color: hsla(var(--_chat-agent-color), var(--_chat-agent-opacity));
+    --chat-client-attachment-bg-color: hsla(var(--_chat-client-color), var(--_chat-client-opacity));
+    --chat-agent-attachment-bg-color: hsla(var(--_chat-agent-color), var(--_chat-agent-opacity));
+}