@webitel/styleguide 1.0.0

package/src/lib/styleguide/typography/_typography.scss

@@ -0,0 +1,124 @@
+/*
+NOTE:   text-transform: none; is set explicitly cause t-t is inherited from parent
+ */
+
+%typo-heading-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 32px;
+    weight: 600;
+  }
+  line-height: 48px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-heading-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 24px;
+    weight: 600;
+  }
+  line-height: 40px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-heading-3 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 20px;
+    weight: 600;
+  }
+  line-height: 32px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-heading-4 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 16px;
+    weight: 600;
+  }
+  line-height: 24px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-subtitle-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 14px;
+    weight: 500;
+  }
+  line-height: 24px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-subtitle-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 500;
+  }
+  line-height: 20px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-body-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 14px;
+    weight: 400;
+  }
+  line-height: 24px;
+  text-transform: none;
+  //letter-spacing: 0.56px; // 0.04em
+}
+
+%typo-body-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 400;
+  }
+  line-height: 16px;
+  text-transform: none;
+  //letter-spacing: 0.16px; // 0.01em
+}
+
+%typo-button {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 600;
+  }
+  line-height: 24px;
+  text-transform: uppercase;
+  //letter-spacing: 0.96px; // 0.06em
+}
+
+%typo-caption {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 10px;
+    weight: 400;
+  }
+  line-height: 16px;
+  text-transform: none;
+  //letter-spacing: 0.48px; // 0.03em
+}
+
+%typo-overline {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 500;
+  }
+  line-height: 20px;
+  text-transform: uppercase;
+  //letter-spacing: 2.56px; // 0.16em
+}

package/src/lib/styleguide/viewport-breakpoints/_viewport-breakpoints.scss

@@ -0,0 +1,25 @@
+/*
+xl: @media only screen and (min-width: $viewport-xl) {}
+lg: @media only screen and (max-width: $viewport-xl) {}
+md: @media only screen and (max-width: $viewport-lg) {}
+sm: @media only screen and (max-width: $viewport-md) {}
+xs: @media only screen and (max-width: $viewport-sm) {}
+ */
+
+// OLD, REMOVE ME
+//$viewport-xl: 1440px;
+//$viewport-lg: 1280px;
+//$viewport-md: 992px;
+//$viewport-sm: 600px;
+
+$viewport-lg: 1904px; // and lower
+$viewport-md: 1264px; // and lower
+$viewport-sm: 960px; // and lower
+$viewport-xs: 600px; // and lower
+
+$media: #{'only screen'};
+$media-width-lg: #{'min-width: '} $viewport-lg;
+$media-width-md: #{'max-width: '} $viewport-md;
+$media-width-sm: #{'max-width: '} $viewport-sm;
+$media-width-xs: #{'max-width: '} $viewport-xs;
+

package/src/supervisor/main.scss

@@ -0,0 +1 @@
+@import 'styleguide/styleguide';

package/src/supervisor/styleguide/_styleguide.scss

@@ -0,0 +1,5 @@
+@import 'border-radius/border-radius';
+@import 'colors/colors';
+@import 'elevations/elevations';
+@import 'spacings/spacings';
+@import 'shadows/shadows';

package/src/workspaces/main.scss

@@ -0,0 +1 @@
+@import 'styleguide/styleguide';

package/src/workspaces/styleguide/_styleguide.scss

@@ -0,0 +1,5 @@
+@import 'border-radius/border-radius';
+@import 'colors/colors';
+@import 'elevations/elevations';
+@import 'spacings/spacings';
+@import 'shadows/shadows';

package/src/workspaces/styleguide/colors/_colors.scss

@@ -0,0 +1,3 @@
+#workspaces {
+  --ws-preview-background-hover-color: var(--dp-24-surface-color);
+}

package/src/wt-flow-diagram/main.scss

@@ -0,0 +1 @@
+@import 'styleguide/styleguide';

package/src/wt-flow-diagram/styleguide/_styleguide.scss

@@ -0,0 +1,5 @@
+@import 'colors/colors';
+@import 'shadows/shadows';
+@import 'spacings/spacing';
+@import 'border-radius/border-radius';
+@import 'elevations/elevations';

package/src/wt-flow-diagram/styleguide/colors/_colors.scss

@@ -0,0 +1,234 @@
+#wt-flow-diagram {
+  --flow-light-level-12: 90%;
+
+  //  TEXT colors
+  --flow-on-dark-text-color: var(--grey-lighten-5);
+  --flow-on-light-text-color: var(--grey-darken-3);
+
+  //  SOCKET colors
+  --flow-conection-point-color: var(--dp-22-surface-color);
+  --flow-conection-point-border-color: var(--dp-16-surface-color);
+
+  // GENERAL APPS
+  // Calendar
+  --flow-calendar-header-bg-color: var(--cyan-lighten-3);
+
+  // Execute
+  --flow-execute-header-bg-color: var(--orange-lighten-2);
+
+  // Function
+  --flow-function-header-bg-color: var(--orange-lighten-2);
+
+  // Goto
+  --flow-goto-header-bg-color: var(--red-darken-1);
+
+  //  If
+  --flow-if-header-bg-color: var(--pink-lighten-2);
+
+  //  IFrame
+  --flow-i-frame-header-bg-color: var(--blue-lighten-1);
+
+  //  Script
+  --flow-js-header-bg-color: var(--amber-accent-3);
+
+  // Math
+  --flow-math-header-bg-color: var(--deep-orange-accent-2);
+
+  // String
+  --flow-string-header-bg-color: var(--light-green-darken-3);
+
+  // MarkIVR
+  --flow-mark-ivr-header-bg-color: var(--pink-accent-2);
+
+  // softSleep
+  --flow-soft-sleep-header-bg-color: var(--light-blue-lighten-1);
+
+  // setGrantee
+  --flow-set-grantee-header-bg-color: var(--yellow-darken-2);
+
+  // schema
+  --flow-schema-header-bg-color: var(--deep-orange-lighten-3);
+
+  // log
+  --flow-log-header-bg-color: var(--amber-lighten-1);
+
+  // Start
+  --flow-start-header-bg-color: var(--green-darken-3);
+
+  // Switch
+  --flow-switch-header-bg-color: var(--purple-lighten-1);
+
+  // Trigger
+  --flow-trigger-header-bg-color: var(--red-lighten-1);
+
+  // HttpRequest
+  --flow-http-header-bg-color: var(--pink-lighten-2);
+
+  //  Custom code
+  --flow-custom-code-header-bg-color: var(--grey-lighten-4);
+
+  //  Export variables code
+  --flow-export-var-header-bg-color: var(--indigo-lighten-3);
+
+  //  Set variables code
+  --flow-set-var-header-bg-color: var(--amber-lighten-1);
+
+  //  Un set variables code
+  --flow-un-set-var-header-bg-color: var(--orange-lighten-3);
+
+  //  List code
+  --flow-list-header-bg-color: var(--light-blue-darken-3);
+
+  //  List Add code
+  --flow-list-add-header-bg-color: var(--light-blue-darken-1);
+
+  // Get Email
+  --flow-get-email-header-bg-color: var(--cyan-darken-4);
+
+  // CALL APPS
+  // playback
+  --flow-playback-header-bg-color: var(--orange-lighten-1);
+
+  //  Ring ready
+  --flow-ring-ready-header-bg-color: var(--green-darken-3);
+
+  //  Pre answer
+  --flow-pre-answer-header-bg-color: var(--green-darken-3);
+
+  //  Answer
+  --flow-answer-header-bg-color: var(--green-darken-3);
+
+  //  Hangup
+  --flow-hangup-header-bg-color: var(--deep-orange-darken-2);
+
+  //  Sip redirect
+  --flow-sip-redirect-header-bg-color: var(--amber-lighten-3);
+
+  //  Ringback
+  --flow-ringback-header-bg-color: var(--green-darken-3);
+
+  //  Bridge
+  --flow-bridge-header-bg-color: var(--orange-lighten-2);
+
+  //  Conference
+  --flow-conference-header-bg-color: var(--cyan-lighten-3);
+
+  //  Generate link
+  --flow-generate-link-header-bg-color: var(--indigo-accent-2);
+
+  //  In Band DTMF
+  --flow-in-band-dtmf-header-bg-color: var(--yellow-lighten-2);
+
+  // Flush DTMF
+  --flow-flush-dtmf-header-bg-color: var(--pink-lighten-2);
+
+  //  Update Cid
+  --flow-update-cid-header-bg-color: var(--orange-lighten-2);
+
+  //  Park
+  --flow-park-header-bg-color: var(--cyan-lighten-3);
+
+  //  Join Queue
+  --flow-join-queue-header-bg-color: var(--deep-orange-lighten-1);
+
+  //  Record File
+  --flow-record-file-header-bg-color: var(--green-lighten-3);
+
+  //  Record Session
+  --flow-record-session-header-bg-color: var(--green-lighten-2);
+
+  // TTS
+  --flow-tts-header-bg-color: var(--purple-darken-1);
+
+  // CHAT APPS
+  // Recv Message
+  --flow-recv-message-header-bg-color: var(--blue-accent-4);
+
+  //  Send Text
+  --flow-send-text-header-bg-color: var(--orange-accent-3);
+
+  //  Send TTS
+  --flow-send-tts-header-bg-color: var(--purple-darken-1);
+
+  //  Send File
+  --flow-send-file-header-bg-color: var(--purple-accent-3);
+
+  //  STT
+  --flow-stt-header-bg-color: var(--orange-lighten-1);
+
+  //  Send Email
+  --flow-send-email-header-bg-color: var(--deep-orange-accent-2);
+
+  //  Send Message
+  --flow-send-message-header-bg-color: var(--blue-darken-1);
+
+  //  Broadcast Chat Message
+  --flow-broadcast-chat-message-header-bg-color: var(--blue-darken-2);
+
+  //  Classifier
+  --flow-classifier-header-bg-color: var(--deep-purple-lighten-2);
+
+  //  Menu
+  --flow-menu-header-bg-color: var(--amber-lighten-3);
+
+  // Plata by mono
+  --flow-plata-by-mono-header-bg-color: var(--deep-purple-darken-1);
+
+  //  User Info
+  --flow-user-info-header-bg-color: var(--green-accent-2);
+
+  // Member info
+  --flow-member-info-header-bg-color: var(--purple-lighten-1);
+
+  // Get queue agents
+  --flow-get-queue-agents-header-bg-color: var(--indigo-lighten-2);
+
+  // Join Agent
+  --flow-join-agent-header-bg-color: var(--deep-purple-lighten-2);
+
+  // Callback queue
+  --flow-callback-queue-header-bg-color: var(--lime-darken-2);
+
+  // Patch members
+  --flow-patch-members-header-bg-color: var(--purple-lighten-1);
+
+  // PROCESSING
+  // Form textfield
+  --flow-form-textfield-header-bg-color: var(--light-blue-accent-4);
+
+  // Form text
+  --flow-form-text-header-bg-color: var(--light-blue-lighten-3);
+
+  // Form select
+  --flow-form-select-header-bg-color: var(--light-blue-lighten-1);
+
+  // Form datetime picker
+  --flow-form-datetime-picker-header-bg-color: var(--blue-lighten-2);
+
+  // Form rich text editor
+  --flow-form-rich-text-editor-header-bg-color: var(--light-blue-darken-4);
+
+  // Generate form
+  --flow-generate-form-header-bg-color: var(--blue-accent-4);
+
+  // Attempt result
+  --flow-attempt-result-header-bg-color: var(--red-lighten-2);
+
+  // Form file
+  --flow-form-file-header-bg-color: var(--blue-lighten-2);
+
+  // Chat history
+  --flow-chat-history-header-bg-color: var(--amber-accent-2);
+
+  // Chat history
+  --flow-while-header-bg-color: var(--deep-purple-darken-4);
+
+  // ChatAI
+  --flow-chat-ai-header-bg-color: var(--lime-darken-3);
+
+  // Notification
+  --flow-notification-header-bg-color: var(--pink-lighten-1);
+
+  // Custom module
+  --flow-custom-module-header-bg-color: var(--deep-purple-darken-3);
+}

package/src/wt-flow-diagram/styleguide/shadows/_shadows.scss

@@ -0,0 +1,12 @@
+#wt-flow-diagram {
+  --elevation-1:  0px 1px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-2:  0px 2px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-3:  0px 3px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-4:  0px 4px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-5:  0px 5px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-6:  0px 6px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-7:  0px 7px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-8:  0px 8px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-9:  0px 9px 10px hsla(0, 0%, 0%, 0.15);
+  --elevation-10:  0px 10px 10px hsla(0, 0%, 0%, 0.15);
+}

package/src/wt-flow-diagram/styleguide/spacings/_spacing.scss

@@ -0,0 +1,31 @@
+#wt-flow-diagram {
+  /* В компоненті `key-value-pair` присутні компоненти з бібліотеки `webitel.ui`,
+  наприклад, `<wt-input>`, margin яких = 10px, тому у даному випадку я використав
+  змінну `--body-block-margin` , яка також = 10px.
+ Можна працювати по нових спейсінгах, але треба переписати компоненти, які є в бібліотеці*/
+  --body-block-margin: 10px;
+
+  // Workspace specific spacings
+  --workspace-content-offset-top: var(--spacing-xs);
+  --workspace-content-offset-bottom: var(--spacing-xs);
+  --workspace-content-offset-side: var(--spacing-xs);
+  --nodes-panel-width: 260px;
+  --config-panel-width: -16px; // invisible config panel width is -16 to compensate minimap offset from side + from config panel itself
+  --min-flow-toolbar-width: 491px;
+  --flow-toolbar-height: 56px;
+  --flow-pages-height: 56px;
+  --zoom-panel-width: 227px;
+  --zoom-panel-height: calc(
+    2 * var(--spacing-sm)
+    + var(--icon-md-size)
+  ); // should directly set height to setup minimap bottom offset
+
+  @media only screen and (max-width: $viewport-sm) {
+    --flow-toolbar-height: 88px;
+  }
+
+  @media only screen and (max-width: $viewport-xs) {
+    --flow-toolbar-height: 136px;
+  }
+}
+