genesys-react-components 0.2.4-no-jira-peer-deps.194 → 0.3.0

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 (33) hide show
  1. package/README.md +24 -1
  2. package/build/index.js +105 -13
  3. package/build/index.js.map +1 -1
  4. package/package.json +53 -52
  5. package/src/alertblock/AlertBlock.scss +1 -1
  6. package/src/copybutton/CopyButton.scss +1 -1
  7. package/src/dxaccordion/DxAccordion.scss +6 -3
  8. package/src/dxbutton/DxButton.scss +26 -23
  9. package/src/dxitemgroup/DxCheckbox.scss +22 -17
  10. package/src/dxitemgroup/dropdown.scss +11 -9
  11. package/src/dxitemgroup/multiselect.scss +12 -9
  12. package/src/dxlabel/DxLabel.scss +5 -3
  13. package/src/dxtabbedcontent/DxTabbedContent.scss +6 -4
  14. package/src/dxtextbox/DxTextbox.scss +15 -12
  15. package/src/dxtoggle/DxToggle.scss +15 -11
  16. package/src/loadingplaceholder/LoadingPlaceholder.scss +3 -2
  17. package/src/loadingplaceholder/LoadingPlaceholder.tsx +94 -1
  18. package/src/theme/fonts/roboto-v29-latin-300.woff +0 -0
  19. package/src/theme/fonts/roboto-v29-latin-300.woff2 +0 -0
  20. package/src/theme/fonts/roboto-v29-latin-300italic.woff +0 -0
  21. package/src/theme/fonts/roboto-v29-latin-300italic.woff2 +0 -0
  22. package/src/theme/fonts/roboto-v29-latin-700.woff +0 -0
  23. package/src/theme/fonts/roboto-v29-latin-700.woff2 +0 -0
  24. package/src/theme/fonts/roboto-v29-latin-700italic.woff +0 -0
  25. package/src/theme/fonts/roboto-v29-latin-700italic.woff2 +0 -0
  26. package/src/theme/fonts/roboto-v29-latin-italic.woff +0 -0
  27. package/src/theme/fonts/roboto-v29-latin-italic.woff2 +0 -0
  28. package/src/theme/fonts/roboto-v29-latin-regular.woff +0 -0
  29. package/src/theme/fonts/roboto-v29-latin-regular.woff2 +0 -0
  30. package/src/theme/roboto.scss +65 -0
  31. package/src/theme/scrollbars.scss +49 -0
  32. package/src/theme/typography.scss +184 -0
  33. package/src/theme/variables.scss +413 -0
package/package.json CHANGED
@@ -1,53 +1,54 @@
1
1
  {
2
- "name": "genesys-react-components",
3
- "version": "0.2.4-no-jira-peer-deps.194",
4
- "description": "A React component library containing standardized form elements.",
5
- "type": "module",
6
- "types": "build/index.d.ts",
7
- "exports": {
8
- "require": "./src/index.ts",
9
- "default": "./build/index.js"
10
- },
11
- "files": [
12
- "build",
13
- "src"
14
- ],
15
- "scripts": {
16
- "build": "rm -rf build && rollup -c rollup.config.js",
17
- "test": "echo \"0/0 tests passed. That's technically a perfect score. Keep up the great work!\""
18
- },
19
- "repository": {
20
- "type": "git",
21
- "url": "git+ssh://git@github.com/purecloudlabs/genesys-react-components.git"
22
- },
23
- "author": "Genesys",
24
- "license": "MIT",
25
- "bugs": {
26
- "url": "https://github.com/purecloudlabs/genesys-react-components/issues"
27
- },
28
- "homepage": "https://purecloudlabs.github.io/genesys-react-components",
29
- "devDependencies": {
30
- "@rollup/plugin-commonjs": "^21.0.1",
31
- "@rollup/plugin-node-resolve": "^13.0.6",
32
- "@types/react": "^16",
33
- "genesys-dev-icons": "^0.1.15",
34
- "react": "^16",
35
- "react-dom": "^16",
36
- "rollup": "^2.60.2",
37
- "rollup-plugin-peer-deps-external": "^2.2.4",
38
- "rollup-plugin-postcss": "^4.0.2",
39
- "rollup-plugin-typescript2": "^0.31.1",
40
- "sass": "^1.44.0",
41
- "typescript": "^4.5.2",
42
- "uuid": "^8.3.2"
43
- },
44
- "peerDependencies": {
45
- "genesys-dev-icons": "0.x",
46
- "react": ">=16",
47
- "react-dom": ">=16",
48
- "uuid": "^8.3.2"
49
- },
50
- "dependencies": {
51
- "postcss": "^8.4.6"
52
- }
53
- }
2
+ "name": "genesys-react-components",
3
+ "version": "0.3.0",
4
+ "description": "A React component library containing standardized form elements.",
5
+ "type": "module",
6
+ "types": "build/index.d.ts",
7
+ "exports": {
8
+ "require": "./src/index.ts",
9
+ "default": "./build/index.js"
10
+ },
11
+ "files": [
12
+ "build",
13
+ "src"
14
+ ],
15
+ "scripts": {
16
+ "build": "rm -rf build && rollup -c rollup.config.js",
17
+ "localbuild": "npm i && npm run build && rm -rf node_modules",
18
+ "test": "echo \"0/0 tests passed. That's technically a perfect score. Keep up the great work!\""
19
+ },
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "git+ssh://git@github.com/purecloudlabs/genesys-react-components.git"
23
+ },
24
+ "author": "Genesys",
25
+ "license": "MIT",
26
+ "bugs": {
27
+ "url": "https://github.com/purecloudlabs/genesys-react-components/issues"
28
+ },
29
+ "homepage": "https://purecloudlabs.github.io/genesys-react-components",
30
+ "devDependencies": {
31
+ "@rollup/plugin-commonjs": "^21.0.1",
32
+ "@rollup/plugin-node-resolve": "^13.0.6",
33
+ "@types/react": "^16",
34
+ "genesys-dev-icons": "^0.1.15",
35
+ "react": "^16",
36
+ "react-dom": "^16",
37
+ "rollup": "^2.60.2",
38
+ "rollup-plugin-peer-deps-external": "^2.2.4",
39
+ "rollup-plugin-postcss": "^4.0.2",
40
+ "rollup-plugin-typescript2": "^0.31.1",
41
+ "sass": "^1.44.0",
42
+ "typescript": "^4.5.2",
43
+ "uuid": "^8.3.2"
44
+ },
45
+ "peerDependencies": {
46
+ "genesys-dev-icons": "0.x",
47
+ "react": ">=16",
48
+ "react-dom": ">=16",
49
+ "uuid": "^8.3.2"
50
+ },
51
+ "dependencies": {
52
+ "postcss": "^8.4.6"
53
+ }
54
+ }
package/src/alertblock/AlertBlock.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../utils/theme/variables.scss';
1
+ @import '../theme/variables.scss';
2
2
 
3
3
  .alert-container {
4
4
  margin: 40px 0;
package/src/copybutton/CopyButton.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../utils/theme/variables.scss';
1
+ @import '../theme/variables.scss';
2
2
 
3
3
  .copy-button {
4
4
  cursor: pointer;
package/src/dxaccordion/DxAccordion.scss CHANGED
@@ -1,15 +1,17 @@
1
+ @import '../theme/variables.scss';
2
+
1
3
  .dx-accordion {
2
4
  margin: 0;
3
5
 
4
6
  .accordion-heading {
5
7
  border-width: 0 0 1px 0;
6
8
  border-style: solid;
7
- border-color: #bfd4e4;
9
+ border-color: var($--theme-core-layout-border-color);
8
10
  font-style: normal;
9
11
  font-weight: bold;
10
12
  font-size: 14px;
11
13
  line-height: 14px;
12
- color: #54565a;
14
+ color: var($--theme-core-text-color);
13
15
  padding: 13px 20px;
14
16
  display: flex;
15
17
  flex-flow: row nowrap;
@@ -27,8 +29,9 @@
27
29
  }
28
30
 
29
31
  .accordion-content {
32
+ color: var($--theme-core-text-color);
30
33
  padding: 13px 20px 20px 20px;
31
- border-bottom: 1px solid #bfd4e4;
34
+ border-bottom: 1px solid var($--theme-core-layout-border-color);
32
35
 
33
36
  // Clear excess margins from content, we provide the padding
34
37
  & > *:first-child {
package/src/dxbutton/DxButton.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import '../theme/variables.scss';
2
+
1
3
  .dx-button {
2
4
  margin: 15px 10px;
3
5
  border-radius: 2px;
@@ -6,67 +8,68 @@
6
8
  font-weight: 500;
7
9
 
8
10
  &-primary {
9
- color: #ffffff;
10
- border: 1px solid #419bb2;
11
- background-color: #419bb2;
11
+ color: var($--theme-dxbutton-primary-text-color);
12
+ border: 1px solid var($--theme-dxbutton-primary-background-color);
13
+ background-color: var($--theme-dxbutton-primary-background-color);
12
14
 
13
15
  &:hover {
14
- background-color: #317b8d;
15
- border-color: #317b8d;
16
+ background-color: var($--theme-dxbutton-primary-hover-background-color);
17
+ border-color: var($--theme-dxbutton-primary-hover-background-color);
16
18
  transition: 0.1s;
17
19
  }
18
20
 
19
21
  &:focus {
20
- background-color: #419bb2;
21
- border-color: #419bb2;
22
- box-shadow: 0 0 0 2px #aac9ff;
22
+ background-color: var($--theme-dxbutton-primary-background-color);
23
+ border-color: var($--theme-dxbutton-primary-background-color);
24
+ box-shadow: 0 0 0 2px var($--theme-dxbutton-primary-shadow-color);
23
25
  transition: 0.1s;
24
26
  }
25
27
 
26
28
  &:disabled {
27
- background-color: #9aafb540;
28
- border-color: #9aafb540;
29
+ background-color: var($--theme-dxbutton-primary-disabled-background-color);
30
+ border-color: var($--theme-dxbutton-primary-disabled-background-color);
29
31
  transition: 0.1s;
30
32
  cursor: not-allowed;
31
33
  }
32
34
  }
33
35
 
34
36
  &-secondary {
35
- color: #419bb2;
36
- border: 1px solid #419bb2;
37
- background-color: #ffffff;
37
+ background-color: var($--theme-dxbutton-secondary-background-color);
38
+ border: 1px solid var($--theme-dxbutton-secondary-border-color);
39
+ color: var($--theme-dxbutton-secondary-border-color);
38
40
 
39
41
  &:hover {
40
- color: #317b8d;
41
- border-color: #317b8d;
42
+ color: var($--theme-dxbutton-secondary-hover-border-color);
43
+ border-color: var($--theme-dxbutton-secondary-border-color);
42
44
  transition: 0.1s;
43
45
  }
44
46
 
45
47
  &:focus {
46
- color: #419bb2;
47
- border-color: #419bb2;
48
- box-shadow: 0 0 0 2px #aac9ff;
48
+ color: var($--theme-dxbutton-secondary-border-color);
49
+ border-color: var($--theme-dxbutton-secondary-border-color);
50
+ box-shadow: 0 0 0 2px var($--theme-dxbutton-secondary-shadow-color);
49
51
  transition: 0.1s;
50
52
  }
51
53
 
52
54
  &:disabled {
53
- color: #8a9a9e;
54
- background-color: #e0e6e8;
55
- border-color: #e0e6e8;
55
+ color: var($--theme-dxbutton-secondary-disabled-text-color);
56
+ background-color: var($--theme-dxbutton-secondary-disabled-background-color);
57
+ border-color: var($--theme-dxbutton-secondary-disabled-background-color);
56
58
  transition: 0.1s;
57
59
  cursor: not-allowed;
58
60
  }
59
61
  }
60
62
 
61
63
  &-link {
62
- color: #2f7bb1;
64
+ color: var($--theme-core-link-color);
63
65
  background: transparent;
64
66
  margin: 0;
65
67
  padding: 0 2px;
66
68
  border: 0;
67
69
 
68
70
  &:hover {
69
- color: #1c5176;
71
+ color: var($--theme-core-link-hover-color);
72
+ border-color: var($--theme-dxbutton-secondary-border-color);
70
73
  }
71
74
 
72
75
  &:disabled {
package/src/dxitemgroup/DxCheckbox.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import '../theme/variables.scss';
2
+
1
3
  .dx-checkbox {
2
4
  display: flex;
3
5
  flex-flow: row nowrap;
@@ -14,7 +16,7 @@
14
16
  font-weight: normal;
15
17
  font-size: 12px;
16
18
  line-height: 18px;
17
- color: #75757a;
19
+ color: var($--theme-core-text-color);
18
20
  }
19
21
 
20
22
  input[type='checkbox'] {
@@ -26,9 +28,9 @@
26
28
  margin: 0 8px 0 0;
27
29
  width: 16px;
28
30
  height: 16px;
29
- border: 1px solid #8a96a3;
31
+ border: 1px solid var($--theme-core-control-border-color);
30
32
  border-radius: 2px;
31
- background-color: #ffffff;
33
+ background-color: var($--theme-core-control-background-color);
32
34
  flex-shrink: 0;
33
35
  }
34
36
 
@@ -39,7 +41,7 @@
39
41
 
40
42
  // Fill in background on check
41
43
  input[type='checkbox']:checked {
42
- background-color: #8a96a3;
44
+ background-color: var($--theme-core-control-background-color);
43
45
  }
44
46
 
45
47
  // Display checkmark on check
@@ -50,10 +52,10 @@
50
52
  left: 3px;
51
53
  font-size: 9px;
52
54
  line-height: 0;
53
- color: #ffffff;
55
+ color: var($--theme-core-control-punch-color);
54
56
 
55
57
  // genesys-dev-icons app-check
56
- content: '\f103';
58
+ content: '\f104';
57
59
  font-family: genesys-dev-icons !important;
58
60
  font-style: normal;
59
61
  font-weight: normal !important;
@@ -64,19 +66,22 @@
64
66
  -moz-osx-font-smoothing: grayscale;
65
67
  }
66
68
 
67
- // Hover - radio button
69
+ // Hover - checkbox
68
70
  input[type='checkbox']:not(:disabled):hover {
69
- border-color: #4d5061;
71
+ border-color: var($--theme-core-control-punch-color);
70
72
  }
71
73
 
72
- // Focus - radio button
74
+ // Focus - checkbox
73
75
  input[type='checkbox']:not(:disabled):focus {
74
- outline: #aac9ff solid 2px;
76
+ outline: var($--theme-core-control-focus-color) solid 2px;
75
77
  }
76
78
  // Disable default focus outline
77
79
  input[type='checkbox']:not(:disabled):focus-visible {
78
80
  outline: 0;
79
81
  }
82
+
83
+ ////// RADIO
84
+
80
85
  input[type='radio'] {
81
86
  // Hide default appearance
82
87
  -webkit-appearance: none;
@@ -86,9 +91,9 @@
86
91
  margin: 0 8px 0 0;
87
92
  width: 16px;
88
93
  height: 16px;
89
- border: 1px solid #8a96a3;
94
+ border: 1px solid var($--theme-core-control-border-color);
90
95
  border-radius: 8px;
91
- background-color: #ffffff;
96
+ background-color: var($--theme-core-control-background-color);
92
97
  flex-shrink: 0;
93
98
  }
94
99
 
@@ -107,17 +112,17 @@
107
112
  position: relative;
108
113
  top: 2px;
109
114
  left: 2px;
110
- background-color: #8a96a3;
115
+ background-color: var($--theme-core-control-punch-color);
111
116
  }
112
117
 
113
118
  // Hover - radio button
114
119
  input[type='radio']:not(:disabled):hover {
115
- border-color: #4d5061;
120
+ border-color: var($--theme-core-control-punch-color);
116
121
  }
117
122
 
118
123
  // Focus - radio button
119
124
  input[type='radio']:not(:disabled):focus {
120
- outline: #aac9ff solid 2px;
125
+ outline: var($--theme-core-control-focus-color) solid 2px;
121
126
  }
122
127
  // Disable default focus outline
123
128
  input[type='radio']:not(:disabled):focus-visible {
@@ -128,13 +133,13 @@
128
133
  cursor: not-allowed;
129
134
 
130
135
  input {
131
- border-color: #e8eaed;
136
+ border-color: var($--theme-core-control-disabled-border-color);
132
137
  cursor: not-allowed;
133
138
  }
134
139
 
135
140
  // Fill in background on check
136
141
  input:checked {
137
- background-color: #e8eaed;
142
+ background-color: var($--theme-core-control-disabled-background-color);
138
143
  cursor: not-allowed;
139
144
  }
140
145
  }
package/src/dxitemgroup/dropdown.scss CHANGED
@@ -1,22 +1,24 @@
1
+ @import '../theme/variables.scss';
2
+
1
3
  .dx-select-group {
2
4
  appearance: none;
3
5
  position: relative;
4
6
 
5
7
  select {
6
- border: 1px solid #8a96a3;
8
+ border: 1px solid var($--theme-core-control-border-color);
7
9
  border-radius: 2px;
8
- background-color: #ffffff;
10
+ background-color: var($--theme-core-control-alt-background-color);
9
11
  font-style: normal;
10
12
  font-weight: 300;
11
13
  font-size: 12px;
12
14
  line-height: 14px;
13
- color: #75757a;
15
+ color: var($--theme-core-control-textbox-text-color);
14
16
  padding: 8px 32px 8px 12px;
15
17
  width: 100%;
16
18
  appearance: none;
17
19
 
18
20
  &:focus-visible {
19
- outline: 2px solid #aac9ff;
21
+ outline: 2px solid var($--theme-core-control-focus-color);
20
22
  }
21
23
  }
22
24
 
@@ -24,7 +26,7 @@
24
26
  position: absolute;
25
27
  bottom: 12px;
26
28
  right: 12px;
27
- content: '\f104';
29
+ content: '\f105';
28
30
  font-size: 8px;
29
31
  font-family: genesys-dev-icons !important;
30
32
  font-style: normal;
@@ -40,13 +42,13 @@
40
42
 
41
43
  &.disabled {
42
44
  &::after {
43
- color: #8a9a9e;
45
+ color: var($--theme-core-control-disabled-text-color);
44
46
  }
45
47
 
46
48
  select:disabled {
47
- background-color: #e6ebec;
48
- border-color: #e8eaed;
49
- color: #8a9a9e;
49
+ background-color: var($--theme-core-control-disabled-background-color);
50
+ border-color: var($--theme-core-control-disabled-border-color);
51
+ color: var($--theme-core-control-disabled-text-color);
50
52
  cursor: not-allowed;
51
53
  }
52
54
  }
package/src/dxitemgroup/multiselect.scss CHANGED
@@ -1,21 +1,23 @@
1
+ @import '../theme/variables.scss';
2
+
1
3
  .dx-multiselect-group {
2
4
  appearance: none;
3
5
  position: relative;
4
6
 
5
7
  select {
6
- border: 1px solid #8a96a3;
8
+ border: 1px solid var($--theme-core-control-border-color);
7
9
  border-radius: 2px;
8
- background-color: #ffffff;
10
+ background-color: var($--theme-core-control-alt-background-color);
9
11
  font-style: normal;
10
12
  font-weight: 300;
11
13
  font-size: 12px;
12
14
  line-height: 14px;
13
- color: #75757a;
15
+ color: var($--theme-core-control-textbox-text-color);
14
16
  width: 100%;
15
17
  appearance: none;
16
18
 
17
19
  &:focus-visible {
18
- outline: 2px solid #aac9ff;
20
+ outline: 2px solid var($--theme-core-control-focus-color);
19
21
  }
20
22
 
21
23
  option {
@@ -28,10 +30,11 @@
28
30
  font-size: 12px;
29
31
  line-height: 31px;
30
32
  padding: 8px 12px;
31
- color: #75757a;
33
+ color: var($--theme-core-control-textbox-text-color);
32
34
 
33
35
  &:checked {
34
- background: #aac9ff -webkit-linear-gradient(bottom, #aac9ff 0%, #aac9ff 100%);
36
+ color: var($--theme-core-tag-text-color);
37
+ background-color: var($--theme-core-tag-background-color);
35
38
  }
36
39
 
37
40
  &:disabled {
@@ -62,12 +65,12 @@
62
65
 
63
66
  &.disabled {
64
67
  select:disabled {
65
- background-color: #e6ebec;
66
- border-color: #e8eaed;
68
+ background-color: var($--theme-core-control-disabled-background-color);
69
+ border-color: var($--theme-core-control-disabled-border-color);
67
70
  cursor: not-allowed;
68
71
 
69
72
  option {
70
- color: #8a9a9e;
73
+ color: var($--theme-core-control-disabled-text-color);
71
74
  }
72
75
  }
73
76
  }
package/src/dxlabel/DxLabel.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import '../theme/variables.scss';
2
+
1
3
  .dx-label {
2
4
  margin: 20px 0;
3
5
  display: block;
@@ -10,7 +12,7 @@
10
12
  font-weight: 400;
11
13
  font-size: 12px;
12
14
  line-height: 14px;
13
- color: #75757a;
15
+ color: var($--theme-core-control-label-color);
14
16
  }
15
17
 
16
18
  .label-text {
@@ -24,8 +26,8 @@
24
26
  gap: 8px;
25
27
 
26
28
  .icon {
27
- color: #597393;
29
+ color: var($--theme-alertblock-info-icon-color);
28
30
  line-height: 0;
29
31
  }
30
32
  }
31
- }
33
+ }
package/src/dxtabbedcontent/DxTabbedContent.scss CHANGED
@@ -1,8 +1,10 @@
1
+ @import '../theme/variables.scss';
2
+
1
3
  .dx-tabbed-content {
2
4
  margin: 40px 0;
3
5
 
4
6
  .tab-titles {
5
- border-bottom: 1px solid #bfd4e4;
7
+ border-bottom: 1px solid var($--theme-core-layout-border-color);
6
8
  font-weight: normal;
7
9
  font-size: 14px;
8
10
  line-height: 20px;
@@ -14,11 +16,11 @@
14
16
  cursor: pointer;
15
17
 
16
18
  &:hover {
17
- border-color: #bfd4e4;
19
+ border-color: var($--theme-core-control-punch-color);
18
20
  }
19
21
 
20
22
  &.active {
21
- border-bottom-color: #597393;
23
+ border-bottom-color: var($--theme-core-control-punch-color);
22
24
  font-weight: bold;
23
25
  }
24
26
 
@@ -32,7 +34,7 @@
32
34
 
33
35
  .tab-content {
34
36
  padding: 13px 20px 20px 20px;
35
- border-bottom: 1px solid #bfd4e4;
37
+ border-bottom: 1px solid var($--theme-core-layout-border-color);
36
38
 
37
39
  // Clear excess margins from content, we provide the padding
38
40
  & > *:first-child {
package/src/dxtextbox/DxTextbox.scss CHANGED
@@ -1,15 +1,17 @@
1
+ @import '../theme/variables.scss';
2
+
1
3
  .dx-textbox {
2
4
  display: flex;
3
5
  flex-flow: row nowrap;
4
6
  justify-content: space-between;
5
7
  align-items: center;
6
8
  gap: 10px;
7
- border: 1px solid #c6cbd1;
9
+ border: 1px solid var($--theme-core-control-border-color);
8
10
  border-radius: 2px;
9
11
  margin: 0;
10
12
  padding: 0 10px;
11
13
  height: 32px;
12
- background-color: #ffffff;
14
+ background-color: var($--theme-core-control-alt-background-color);
13
15
 
14
16
  &.with-label {
15
17
  margin-top: 0;
@@ -22,7 +24,7 @@
22
24
  .icon {
23
25
  display: block;
24
26
  flex: none;
25
- color: #75757a;
27
+ color: var($--theme-core-control-textbox-text-color);
26
28
 
27
29
  &.input-icon {
28
30
  font-size: 14px;
@@ -52,7 +54,7 @@
52
54
  font-weight: normal;
53
55
  font-size: 14px;
54
56
  line-height: 16px;
55
- color: #272d2d;
57
+ color: var($--theme-core-control-textbox-text-color);
56
58
 
57
59
  &:focus-visible {
58
60
  outline: 0;
@@ -63,37 +65,38 @@
63
65
  font-weight: 300;
64
66
  font-size: 14px;
65
67
  line-height: 16px;
66
- color: #757576;
68
+ color: var($--theme-core-control-textbox-placeholder-text-color);
67
69
  }
68
70
  }
69
71
 
70
72
  &.disabled {
71
- background-color: #e6ebec;
72
- border-color: #e8eaed;
73
+ background-color: var($--theme-dxbutton-secondary-disabled-background-color);
73
74
  cursor: not-allowed;
74
75
 
75
76
  input {
76
77
  cursor: not-allowed;
77
- color: #75757a;
78
+ color: var($--theme-dxbutton-secondary-disabled-text-color);
78
79
  }
79
80
 
80
81
  .icon,
81
82
  input::placeholder {
82
- color: #ffffff;
83
+ color: var($--theme-dxbutton-secondary-disabled-text-color);
83
84
  }
84
85
  }
85
86
  }
86
87
 
87
88
  .dx-textarea {
88
89
  padding: 10px;
89
- border: 1px solid #c6cbd1;
90
+ border: 1px solid var($--theme-core-control-border-color);
90
91
  border-radius: 2px;
91
92
  width: 100%;
92
93
  font-family: 'Roboto', sans-serif;
93
94
  box-sizing: border-box;
95
+ background-color: var($--theme-core-control-alt-background-color);
96
+ color: var($--theme-core-control-textbox-text-color);
94
97
 
95
98
  &:focus-within {
96
- outline: #aac9ff solid 2px;
99
+ outline: var($--theme-core-control-focus-color) solid 2px;
97
100
  }
98
101
 
99
102
  &::placeholder {
@@ -102,6 +105,6 @@
102
105
  font-weight: 300;
103
106
  font-size: 14px;
104
107
  line-height: 16px;
105
- color: #757576;
108
+ color: var($--theme-core-control-textbox-placeholder-text-color);
106
109
  }
107
110
  }