@webitel/ui-sdk 23.12.7 → 23.12.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/ui-sdk.common.js +18 -18
  2. package/dist/ui-sdk.common.js.map +1 -1
  3. package/dist/ui-sdk.css +1 -1
  4. package/dist/ui-sdk.umd.js +20 -20
  5. package/dist/ui-sdk.umd.js.map +1 -1
  6. package/dist/ui-sdk.umd.min.js +1 -1
  7. package/dist/ui-sdk.umd.min.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/wt-icon/Readme.md +1 -1
  10. package/src/components/wt-icon/_variables.scss +2 -0
  11. package/src/components/wt-icon/wt-icon.vue +4 -1
  12. package/src/components/wt-rounded-action/wt-rounded-action.vue +17 -19
  13. package/src/css/styleguide/colors/_colors.scss +8 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webitel/ui-sdk",
3
- "version": "23.12.7",
3
+ "version": "23.12.9",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",
package/src/components/wt-icon/Readme.md CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  Different color icons:
7
7
  ```vue
8
- const colors = ['default', 'disabled', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'];
8
+ const colors = ['default', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'];
9
9
 
10
10
  <div
11
11
  style="display: flex; align-items: center; gap: 5px;"
package/src/components/wt-icon/_variables.scss CHANGED
@@ -9,6 +9,7 @@
9
9
  --icon-xs-size: 8px;
10
10
 
11
11
  --icon-color: var(--grey-darken-2);
12
+ --icon-primary-color: var(--primary-color);
12
13
  --icon-error-color: var(--error-color);
13
14
  --icon-success-color: var(--success-color);
14
15
  --icon-warning-color: var(--warning-color);
@@ -24,6 +25,7 @@
24
25
 
25
26
  :root.theme--dark {
26
27
  --icon-color: var(--grey-lighten-2);
28
+ --icon-primary-color: var(--primary-color);
27
29
  --icon-disabled-color: var(--grey-darken-2);
28
30
  --icon-error-color: var(--error-color);
29
31
  --icon-success-color: var(--success-color);
package/src/components/wt-icon/wt-icon.vue CHANGED
@@ -35,7 +35,7 @@ const props = defineProps({
35
35
  default: 'md',
36
36
  },
37
37
  /**
38
- * @values 'default', 'disabled', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'
38
+ * @values 'default', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'
39
39
  */
40
40
  color: {
41
41
  type: String,
@@ -88,6 +88,9 @@ svg {
88
88
  &-default .wt-icon__icon {
89
89
  fill: var(--icon-color);
90
90
  }
91
+ &-primary .wt-icon__icon {
92
+ fill: var(--icon-primary-color);
93
+ }
91
94
  &-error .wt-icon__icon {
92
95
  fill: var(--icon-error-color);
93
96
  }
package/src/components/wt-rounded-action/wt-rounded-action.vue CHANGED
@@ -76,13 +76,11 @@ const props = defineProps({
76
76
  const emit = defineEmits(['click']);
77
77
 
78
78
  const iColor = computed(() => {
79
- const onDark = ['success', 'error', 'transfer'];
80
- const onLight = ['primary'];
81
79
  if (props.disabled) return 'disabled';
82
- if (onDark.includes(props.color)) return 'on-dark';
83
- if (onLight.includes(props.color)) return 'on-light';
84
- if (props.active) return 'default';
85
- return 'default';
80
+ switch (props.color) {
81
+ case 'secondary': return 'default';
82
+ default: return props.color;
83
+ }
86
84
  });
87
85
  const loaderColor = computed(() => {
88
86
  if (['success', 'transfer', 'error'].includes(props.color)) return 'main';
@@ -101,7 +99,7 @@ const loaderColor = computed(() => {
101
99
  line-height: 0;
102
100
  padding: var(--rounded-action-padding);
103
101
  border: var(--rounded-action-border-size) solid;
104
- background: var(--rounded-action-secondary-color);
102
+ //background: var(--rounded-action-secondary-color);
105
103
  border-color: var(--rounded-action-secondary-color);
106
104
  border-radius: var(--border-radius);
107
105
  transition: var(--transition);
@@ -116,63 +114,63 @@ const loaderColor = computed(() => {
116
114
 
117
115
  &--color {
118
116
  &-primary {
119
- background: var(--rounded-action-primary-color);
117
+ //background: var(--rounded-action-primary-color);
120
118
  border-color: var(--rounded-action-primary-color);
121
119
 
122
120
  &:hover {
123
- background: var(--rounded-action-primary-hover-color);
121
+ //background: var(--rounded-action-primary-hover-color);
124
122
  border-color: var(--rounded-action-primary-hover-color);
125
123
  }
126
124
  }
127
125
 
128
126
  &-secondary {
129
- background: var(--rounded-action-secondary-color);
127
+ //background: var(--rounded-action-secondary-color);
130
128
  border-color: var(--rounded-action-secondary-color);
131
129
 
132
130
  &:hover {
133
- background: var(--rounded-action-secondary-hover-color);
131
+ //background: var(--rounded-action-secondary-hover-color);
134
132
  border-color: var(--rounded-action-secondary-hover-color);
135
133
  }
136
134
 
137
135
  &.wt-rounded-action--active {
138
- background: transparent;
136
+ //background: transparent;
139
137
  border-color: var(--rounded-action-secondary-active-color);
140
138
  }
141
139
  }
142
140
 
143
141
  &-success {
144
- background: var(--rounded-action-success-color);
142
+ //background: var(--rounded-action-success-color);
145
143
  border-color: var(--rounded-action-success-color);
146
144
 
147
145
  &:hover {
148
- background: var(--rounded-action-success-hover-color);
146
+ //background: var(--rounded-action-success-hover-color);
149
147
  border-color: var(--rounded-action-success-hover-color);
150
148
  }
151
149
  }
152
150
 
153
151
  &-error {
154
- background: var(--rounded-action-error-color);
152
+ //background: var(--rounded-action-error-color);
155
153
  border-color: var(--rounded-action-error-color);
156
154
 
157
155
  &:hover {
158
- background: var(--rounded-action-error-hover-color);
156
+ //background: var(--rounded-action-error-hover-color);
159
157
  border-color: var(--rounded-action-error-hover-color);
160
158
  }
161
159
  }
162
160
 
163
161
  &-transfer {
164
- background: var(--rounded-action-transfer-color);
162
+ //background: var(--rounded-action-transfer-color);
165
163
  border-color: var(--rounded-action-transfer-color);
166
164
 
167
165
  &:hover {
168
- background: var(--rounded-action-transfer-hover-color);
166
+ //background: var(--rounded-action-transfer-hover-color);
169
167
  border-color: var(--rounded-action-transfer-hover-color);
170
168
  }
171
169
  }
172
170
  }
173
171
 
174
172
  &.wt-rounded-action--disabled {
175
- background: var(--rounded-action-disabled-color);
173
+ //background: var(--rounded-action-disabled-color);
176
174
  border-color: var(--rounded-action-disabled-color);
177
175
  pointer-events: none;
178
176
  }
package/src/css/styleguide/colors/_colors.scss CHANGED
@@ -28,6 +28,9 @@
28
28
  --dp-2-surface-color: hsl(225, 20%, 78%);
29
29
  --dp-1-surface-color: hsl(225, 20%, 77%);
30
30
 
31
+ // content wrapper
32
+ --content-wrapper-color: var(--dp-20-surface-color);
33
+
31
34
  // success colors
32
35
  --success-color: var(--green-darken-4);
33
36
  --success-hover-color: var(--green-darken-3);
@@ -65,8 +68,8 @@
65
68
  --on-chat-color: var(--black);
66
69
 
67
70
  // transfer colors
68
- --transfer-color: var(--indigo-darken-1);
69
- --transfer-hover-color: var(--indigo-lighten-1);
71
+ --transfer-color: var(--indigo-lighten-1);
72
+ --transfer-hover-color: var(--indigo-lighten-2);
70
73
  --transfer-light-color: var(--indigo-lighten-4);
71
74
  --on-transfer-color: var(--white);
72
75
 
@@ -114,6 +117,9 @@
114
117
  --dp-2-surface-color: hsl(225, 20%, 3%);
115
118
  --dp-1-surface-color: hsl(225, 20%, 2%);
116
119
 
120
+ // content wrapper
121
+ --content-wrapper-color: var(--dp-20-surface-color);
122
+
117
123
  // success colors
118
124
  --success-color: var(--green-darken-4);
119
125
  --success-hover-color: var(--green-darken-3);