@axinom/mosaic-ui 0.67.0-rc.2 → 0.67.0-rc.6

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 (29) hide show
  1. package/dist/index.es.js +4 -4
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +4 -4
  4. package/dist/index.js.map +1 -1
  5. package/package.json +2 -2
  6. package/src/components/Accordion/Accordion.scss +1 -1
  7. package/src/components/Accordion/AccordionItem/AccordionItem.scss +2 -2
  8. package/src/components/Buttons/Button/Button.scss +5 -5
  9. package/src/components/Buttons/CompositeButton/CompositeButton.scss +5 -5
  10. package/src/components/Buttons/TextButton/TextButton.scss +4 -4
  11. package/src/components/ConfirmDialog/ConfirmDialog.scss +1 -1
  12. package/src/components/DateTime/DatePicker/DatePicker.scss +12 -12
  13. package/src/components/DateTime/TimePicker/ScrollColumn/ScrollColumn.scss +7 -7
  14. package/src/components/DateTime/TimePicker/TimePicker.scss +1 -1
  15. package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.scss +2 -2
  16. package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.scss +2 -2
  17. package/src/components/FormElements/Checkbox/Checkbox.scss +4 -4
  18. package/src/components/FormElements/CustomTags/CustomTags.scss +1 -1
  19. package/src/components/FormElements/FileUploadControl/FileUploadControl.scss +3 -3
  20. package/src/components/FormElements/Radio/Radio.scss +5 -5
  21. package/src/components/FormElements/ToggleButton/ToggleButton.scss +7 -7
  22. package/src/components/List/List.scss +4 -4
  23. package/src/components/List/ListHeader/ListHeader.scss +2 -2
  24. package/src/components/List/ListRow/ListRow.scss +1 -1
  25. package/src/components/PageHeader/PageHeader.scss +1 -1
  26. package/src/components/Tabs/Tab/CustomTab.scss +4 -4
  27. package/src/components/Tabs/TabList/CustomTabList.scss +2 -2
  28. package/src/styles/branding.scss +32 -28
  29. package/src/styles/variables.scss +275 -150
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axinom/mosaic-ui",
3
- "version": "0.67.0-rc.2",
3
+ "version": "0.67.0-rc.6",
4
4
  "description": "UI components for building Axinom Mosaic applications",
5
5
  "author": "Axinom",
6
6
  "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
112
112
  "publishConfig": {
113
113
  "access": "public"
114
114
  },
115
- "gitHead": "2364d1ad780b65c4974987c3f3ac30e09dfe850e"
115
+ "gitHead": "41f4fdec6d54a9d6c3222f37b3b0388e2874e802"
116
116
  }
package/src/components/Accordion/Accordion.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  color: var(--accordion-header-text-color, $accordion-header-text-color);
34
34
  font-weight: bold;
35
35
 
36
- border-bottom: solid 1px color-mix(in srgb, var(--ax-neutral) 85%, white);
36
+ border-bottom: solid 1px var(--accordion-header-border-color, $accordion-header-border-color);
37
37
 
38
38
  top: 0;
39
39
  position: sticky;
package/src/components/Accordion/AccordionItem/AccordionItem.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  display: grid;
5
5
  grid-template-columns: 50px auto;
6
6
  align-items: center;
7
- background-color: var(--ax-neutral-light);
7
+ background-color: var(--accordion-item-row-background-color, $accordion-item-row-background-color);
8
8
  margin-top: 4px;
9
9
  height: 50px;
10
10
  cursor: pointer;
@@ -19,7 +19,7 @@
19
19
  }
20
20
 
21
21
  &.rowExpanded {
22
- background-color: var(--ax-neutral-lighter);
22
+ background-color: var(--accordion-item-row-expanded-background-color, $accordion-item-row-expanded-background-color);
23
23
  }
24
24
 
25
25
  &.sticky {
package/src/components/Buttons/Button/Button.scss CHANGED
@@ -108,10 +108,10 @@
108
108
  }
109
109
 
110
110
  &:disabled {
111
- border: 1px solid var(--ax-neutral);
111
+ border: 1px solid var(--button-context-disabled-border-color, $button-context-disabled-border-color);
112
112
 
113
113
  svg * {
114
- stroke: var(--ax-neutral);
114
+ stroke: var(--button-context-disabled-stroke-color, $button-context-disabled-stroke-color);
115
115
  }
116
116
  }
117
117
  }
@@ -146,7 +146,7 @@
146
146
  background-color: white;
147
147
 
148
148
  svg * {
149
- stroke: var(--ax-primary);
149
+ stroke: var(--button-icon-active-stroke-color, $button-icon-active-stroke-color);
150
150
  }
151
151
  }
152
152
 
@@ -154,7 +154,7 @@
154
154
  border: none;
155
155
 
156
156
  svg * {
157
- stroke: var(--ax-neutral);
157
+ stroke: var(--button-icon-disabled-stroke-color, $button-icon-disabled-stroke-color);
158
158
  }
159
159
  }
160
160
  }
@@ -193,7 +193,7 @@
193
193
  }
194
194
 
195
195
  &:disabled {
196
- background-color: var(--ax-neutral);
196
+ background-color: var(--button-active-disabled-background-color, $button-active-disabled-background-color);
197
197
 
198
198
  svg * {
199
199
  opacity: 0.5;
package/src/components/Buttons/CompositeButton/CompositeButton.scss CHANGED
@@ -121,11 +121,11 @@
121
121
  }
122
122
 
123
123
  &:disabled {
124
- border: 1px solid var(--ax-neutral);
125
- color: var(--ax-neutral);
124
+ border: 1px solid var(--composite-button-context-disabled-border-color, $composite-button-context-disabled-border-color);
125
+ color: var(--composite-button-context-disabled-color, $composite-button-context-disabled-color);
126
126
 
127
127
  svg * {
128
- stroke: var(--ax-neutral);
128
+ stroke: var(--composite-button-context-disabled-color, $composite-button-context-disabled-color);
129
129
  }
130
130
  }
131
131
  }
@@ -146,11 +146,11 @@
146
146
 
147
147
  &:active {
148
148
  background-color: white;
149
- color: var(--ax-primary);
149
+ color: var(--composite-button-active-color, $composite-button-active-color);
150
150
  }
151
151
 
152
152
  &:disabled {
153
- background-color: var(--ax-neutral);
153
+ background-color: var(--composite-button-active-disabled-background-color, $composite-button-active-disabled-background-color);
154
154
  color: color-mix(in srgb, white 50%, transparent);
155
155
  }
156
156
  }
package/src/components/Buttons/TextButton/TextButton.scss CHANGED
@@ -84,8 +84,8 @@
84
84
  }
85
85
 
86
86
  &:disabled {
87
- border: 1px solid var(--ax-neutral);
88
- color: var(--ax-neutral);
87
+ border: 1px solid var(--text-button-context-disabled-border-color, $text-button-context-disabled-border-color);
88
+ color: var(--text-button-context-disabled-color, $text-button-context-disabled-color);
89
89
  }
90
90
  }
91
91
 
@@ -105,11 +105,11 @@
105
105
 
106
106
  &:active {
107
107
  background-color: white;
108
- color: var(--ax-primary);
108
+ color: var(--text-button-active-color, $text-button-active-color);
109
109
  }
110
110
 
111
111
  &:disabled {
112
- background-color: var(--ax-neutral);
112
+ background-color: var(--text-button-active-disabled-background-color, $text-button-active-disabled-background-color);
113
113
  color: color-mix(in srgb, white 50%, transparent);
114
114
  }
115
115
  }
package/src/components/ConfirmDialog/ConfirmDialog.scss CHANGED
@@ -32,7 +32,7 @@ $pop-up-horizontal-arrow: 47%;
32
32
 
33
33
  padding: 5px;
34
34
 
35
- color: var(--ax-neutral-dark);
35
+ color: var(--confirm-dialog-body-text-color, $confirm-dialog-body-text-color);
36
36
  font-size: 14px;
37
37
 
38
38
  .defaultText {
package/src/components/DateTime/DatePicker/DatePicker.scss CHANGED
@@ -36,7 +36,7 @@
36
36
  cursor: pointer;
37
37
  }
38
38
  :global(.react-calendar__navigation) button[disabled] {
39
- background-color: var(--ax-neutral-lighter);
39
+ background-color: var(--datepicker-navigation-button-disabled-bg, $datepicker-navigation-button-disabled-bg);
40
40
  }
41
41
  :global(.react-calendar__month-view__weekdays) {
42
42
  text-align: center;
@@ -59,7 +59,7 @@
59
59
  padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
60
60
  }
61
61
  :global(.react-calendar__month-view__days__day--neighboringMonth) {
62
- color: var(--ax-neutral);
62
+ color: var(--datepicker-neighbor-month-color, $datepicker-neighbor-month-color);
63
63
  }
64
64
  :global(.react-calendar__year-view) :global(.react-calendar__tile),
65
65
  :global(.react-calendar__decade-view) :global(.react-calendar__tile),
@@ -74,37 +74,37 @@
74
74
  background: none;
75
75
  }
76
76
  :global(.react-calendar__tile):disabled {
77
- background-color: var(--ax-neutral-lighter);
77
+ background-color: var(--datepicker-tile-disabled-bg, $datepicker-tile-disabled-bg);
78
78
  }
79
79
  :global(.react-calendar__tile):enabled:hover {
80
- background-color: var(--ax-neutral-light);
80
+ background-color: var(--datepicker-tile-hover-bg, $datepicker-tile-hover-bg);
81
81
  }
82
82
  :global(.react-calendar__tile--hasActive) {
83
- background: var(--ax-primary-light);
83
+ background: var(--datepicker-tile-has-active-bg, $datepicker-tile-has-active-bg);
84
84
  }
85
85
  :global(.react-calendar__tile--hasActive):enabled:hover,
86
86
  :global(.react-calendar__tile--hasActive):enabled:focus {
87
- background: color-mix(in srgb, var(--ax-primary-light), white 30%);
87
+ background: var(--datepicker-tile-has-active-hover-bg, $datepicker-tile-has-active-hover-bg);
88
88
  }
89
89
  :global(.react-calendar__tile--active) {
90
- background: var(--ax-primary-dark);
90
+ background: var(--datepicker-tile-active-bg, $datepicker-tile-active-bg);
91
91
  color: white;
92
92
  }
93
93
  :global(.react-calendar__tile--active):enabled:hover,
94
94
  :global(.react-calendar__tile--active):enabled:focus {
95
- background: var(--ax-primary);
95
+ background: var(--datepicker-tile-active-hover-bg, $datepicker-tile-active-hover-bg);
96
96
  }
97
97
  :global(.react-calendar--selectRange) :global(.react-calendar__tile--hover) {
98
- background-color: var(--ax-neutral-light);
98
+ background-color: var(--datepicker-select-range-hover-bg, $datepicker-select-range-hover-bg);
99
99
  }
100
100
 
101
101
  :global(.react-calendar__tile) {
102
102
  transition: background-color 0.15s ease-in-out 0s;
103
103
 
104
- color: var(--ax-neutral-dark);
104
+ color: var(--datepicker-tile-text-color, $datepicker-tile-text-color);
105
105
 
106
106
  * {
107
- color: var(--ax-neutral-dark);
107
+ color: var(--datepicker-tile-text-color, $datepicker-tile-text-color);
108
108
  }
109
109
 
110
110
  &:hover {
@@ -171,7 +171,7 @@
171
171
  }
172
172
 
173
173
  :global(.react-calendar__month-view__days__day--neighboringMonth) * {
174
- color: var(--ax-neutral-light);
174
+ color: var(--datepicker-neighbor-month-light-color, $datepicker-neighbor-month-light-color);
175
175
  }
176
176
 
177
177
  :global(.react-calendar__tile--active),
package/src/components/DateTime/TimePicker/ScrollColumn/ScrollColumn.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  .inactive-title {
14
14
  display: grid;
15
15
  font-size: 12px;
16
- color: var(--ax-neutral);
16
+ color: var(--timepicker-inactive-title-color, $timepicker-inactive-title-color);
17
17
  text-align: center;
18
18
  align-items: center;
19
19
  }
@@ -23,7 +23,7 @@
23
23
 
24
24
  display: grid;
25
25
  font-size: 18px;
26
- color: var(--ax-neutral-dark);
26
+ color: var(--timepicker-item-color, $timepicker-item-color);
27
27
  text-align: center;
28
28
  align-items: center;
29
29
 
@@ -35,10 +35,10 @@
35
35
 
36
36
  &.active {
37
37
  visibility: visible;
38
- background-color: color-mix(in srgb, var(--ax-primary) 15%, transparent);
38
+ background-color: var(--timepicker-item-active-bg, $timepicker-item-active-bg);
39
39
 
40
40
  &.selected {
41
- background-color: var(--ax-primary);
41
+ background-color: var(--timepicker-item-selected-bg, $timepicker-item-selected-bg);
42
42
  color: white;
43
43
  }
44
44
  }
@@ -46,11 +46,11 @@
46
46
  &.selected {
47
47
  visibility: visible;
48
48
 
49
- border: 1px solid var(--ax-primary);
49
+ border: 1px solid var(--timepicker-item-selected-border, $timepicker-item-selected-border);
50
50
  }
51
51
 
52
52
  &:hover {
53
- background-color: color-mix(in srgb, var(--ax-primary) 15%, transparent);
53
+ background-color: var(--timepicker-item-hover-bg, $timepicker-item-hover-bg);
54
54
  }
55
55
  }
56
56
 
@@ -70,7 +70,7 @@
70
70
  }
71
71
 
72
72
  svg * {
73
- stroke: var(--ax-primary);
73
+ stroke: var(--timepicker-button-stroke-color, $timepicker-button-stroke-color);
74
74
  }
75
75
 
76
76
  &.hidden {
package/src/components/DateTime/TimePicker/TimePicker.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  display: grid;
13
13
  grid-column: 1 / 5;
14
14
  font-size: 20px;
15
- color: var(--ax-neutral-dark);
15
+ color: var(--timepicker-title-color, $timepicker-title-color);
16
16
  text-align: center;
17
17
  height: 40px;
18
18
  align-items: center;
package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  grid-auto-rows: var(--dynamic-list-row-height, $dynamic-list-row-height);
14
14
  column-gap: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
15
15
 
16
- border-bottom: solid 1px var(--ax-neutral-light);
16
+ border-bottom: solid 1px var(--dynamic-list-header-border-color, $dynamic-list-header-border-color);
17
17
 
18
18
  justify-items: left;
19
19
  align-items: center;
@@ -36,7 +36,7 @@
36
36
  height: 100%;
37
37
 
38
38
  z-index: 1;
39
- border-right: var(--explorer-list-row-border, 1px solid var(--ax-neutral-light));
39
+ border-right: var(--explorer-list-row-border, 1px solid var(--dynamic-list-header-resize-border-color, $dynamic-list-header-resize-border-color));
40
40
  position: absolute;
41
41
  right: 0;
42
42
 
package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.scss CHANGED
@@ -79,10 +79,10 @@
79
79
  }
80
80
 
81
81
  .dragIcon {
82
- stroke: var(--ax-neutral-light);
82
+ stroke: var(--dynamic-list-row-disabled-drag-icon-color, $dynamic-list-row-disabled-drag-icon-color);
83
83
 
84
84
  rect {
85
- fill: var(--ax-neutral-light);
85
+ fill: var(--dynamic-list-row-disabled-drag-icon-color, $dynamic-list-row-disabled-drag-icon-color);
86
86
  }
87
87
  }
88
88
  }
package/src/components/FormElements/Checkbox/Checkbox.scss CHANGED
@@ -26,7 +26,7 @@
26
26
  // transition: background-color 0.15s ease-in-out 0s;
27
27
 
28
28
  &.hasConfirm {
29
- border: 1px solid var(--ax-warning);
29
+ border: 1px solid var(--checkbox-warning-border-color, $checkbox-warning-border-color);
30
30
  }
31
31
 
32
32
  &.hasError {
@@ -54,8 +54,8 @@
54
54
  box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
55
55
 
56
56
  &.hasConfirm {
57
- border: 1px solid var(--ax-warning);
58
- box-shadow: 0 0 0 2px var(--ax-warning);
57
+ border: 1px solid var(--checkbox-warning-hover-border-color, $checkbox-warning-hover-border-color);
58
+ box-shadow: 0 0 0 2px var(--checkbox-warning-hover-border-color, $checkbox-warning-hover-border-color);
59
59
  }
60
60
 
61
61
  &.hasError {
@@ -70,7 +70,7 @@
70
70
  background-color: var(--input-hover-color, $input-hover-color);
71
71
 
72
72
  &.hasConfirm {
73
- background-color: var(--ax-warning);
73
+ background-color: var(--checkbox-warning-checked-bg-color, $checkbox-warning-checked-bg-color);
74
74
  }
75
75
 
76
76
  &.hasError {
package/src/components/FormElements/CustomTags/CustomTags.scss CHANGED
@@ -145,7 +145,7 @@
145
145
  &.hasError {
146
146
  background-color: white;
147
147
  svg * {
148
- stroke: color-mix(in srgb, var(--ax-neutral) 50%, transparent);
148
+ stroke: var(--custom-tags-disabled-button-stroke-color, $custom-tags-disabled-button-stroke-color);
149
149
  }
150
150
  }
151
151
 
package/src/components/FormElements/FileUploadControl/FileUploadControl.scss CHANGED
@@ -19,7 +19,7 @@
19
19
 
20
20
  margin-left: -50px;
21
21
  border: none;
22
- background-color: var(--ax-primary);
22
+ background-color: var(--file-upload-button-bg-color, $file-upload-button-bg-color);
23
23
 
24
24
  transition: box-shadow 0.15s ease-in-out 0s;
25
25
 
@@ -35,12 +35,12 @@
35
35
 
36
36
  &:hover {
37
37
  border: none;
38
- background-color: color-mix(in srgb, var(--ax-primary) 75%, transparent);
38
+ background-color: var(--file-upload-button-hover-bg-color, $file-upload-button-hover-bg-color);
39
39
  }
40
40
 
41
41
  &.disabled {
42
42
  border: none;
43
- background-color: var(--ax-neutral);
43
+ background-color: var(--file-upload-button-disabled-bg-color, $file-upload-button-disabled-bg-color);
44
44
  cursor: default;
45
45
 
46
46
  svg * {
package/src/components/FormElements/Radio/Radio.scss CHANGED
@@ -27,7 +27,7 @@
27
27
  grid: 1fr / 30px 1fr;
28
28
  column-gap: 8px;
29
29
 
30
- color: var(--ax-neutral-dark);
30
+ color: var(--radio-label-color, $radio-label-color);
31
31
  font-size: 16px;
32
32
  font-weight: unset;
33
33
 
@@ -37,12 +37,12 @@
37
37
 
38
38
  &.disabled {
39
39
  .radioOutline {
40
- fill: var(--ax-neutral-lighter);
40
+ fill: var(--radio-disabled-outline-color, $radio-disabled-outline-color);
41
41
  }
42
42
 
43
43
  .checked {
44
44
  .radioDot {
45
- fill: var(--ax-neutral-light);
45
+ fill: var(--radio-disabled-dot-color, $radio-disabled-dot-color);
46
46
  }
47
47
  }
48
48
  }
@@ -60,7 +60,7 @@
60
60
 
61
61
  .radioOutline {
62
62
  fill: none;
63
- stroke: var(--ax-neutral);
63
+ stroke: var(--radio-outline-stroke-color, $radio-outline-stroke-color);
64
64
  stroke-width: 1;
65
65
  }
66
66
 
@@ -87,7 +87,7 @@
87
87
 
88
88
  &.hasConfirm {
89
89
  .radioOutline {
90
- stroke: var(--ax-warning);
90
+ stroke: var(--radio-warning-stroke-color, $radio-warning-stroke-color);
91
91
  stroke-width: 3;
92
92
  }
93
93
  }
package/src/components/FormElements/ToggleButton/ToggleButton.scss CHANGED
@@ -94,13 +94,13 @@
94
94
  }
95
95
  }
96
96
  &.off {
97
- border-top: 1px solid var(--ax-warning);
98
- border-bottom: 1px solid var(--ax-warning);
99
- border-left: 1px solid var(--ax-warning);
97
+ border-top: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
98
+ border-bottom: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
99
+ border-left: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
100
100
  transition: border $confirmation-transition linear;
101
101
  }
102
102
  &.on {
103
- border: 1px solid var(--ax-warning);
103
+ border: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
104
104
  transition: border $confirmation-transition linear;
105
105
  }
106
106
  }
@@ -108,19 +108,19 @@
108
108
  div.active.off {
109
109
  svg {
110
110
  .svgText {
111
- fill: var(--ax-warning);
111
+ fill: var(--toggle-button-warning-text-color, $toggle-button-warning-text-color);
112
112
  transition: fill $confirmation-transition linear;
113
113
  }
114
114
  }
115
115
  }
116
116
 
117
117
  div.active.on {
118
- background-color: var(--ax-warning) !important;
118
+ background-color: var(--toggle-button-warning-bg-color, $toggle-button-warning-bg-color) !important;
119
119
  transition: background-color $confirmation-transition linear;
120
120
  }
121
121
 
122
122
  &:hover {
123
- box-shadow: 0 0 0 2px var(--ax-warning);
123
+ box-shadow: 0 0 0 2px var(--toggle-button-warning-hover-shadow-color, $toggle-button-warning-hover-shadow-color);
124
124
  transition: box-shadow $confirmation-transition linear;
125
125
  }
126
126
  }
package/src/components/List/List.scss CHANGED
@@ -42,10 +42,10 @@
42
42
  p {
43
43
  margin-left: 10px;
44
44
 
45
- color: var(--ax-neutral-dark);
45
+ color: var(--list-no-data-text-color, $list-no-data-text-color);
46
46
  }
47
47
 
48
- background-color: var(--ax-neutral-light) !important;
48
+ background-color: var(--list-no-data-bg-color, $list-no-data-bg-color) !important;
49
49
  }
50
50
 
51
51
  .error {
@@ -56,9 +56,9 @@
56
56
  p {
57
57
  margin: 10px 0px 10px 10px;
58
58
 
59
- color: var(--ax-error);
59
+ color: var(--list-error-text-color, $list-error-text-color);
60
60
  }
61
61
 
62
- background-color: color-mix(in srgb, var(--ax-error) 15%, transparent) !important;
62
+ background-color: var(--list-error-bg-color, $list-error-bg-color) !important;
63
63
  }
64
64
  }
package/src/components/List/ListHeader/ListHeader.scss CHANGED
@@ -12,7 +12,7 @@
12
12
  );
13
13
 
14
14
  box-sizing: border-box;
15
- border-bottom: solid 1px var(--ax-neutral-light);
15
+ border-bottom: solid 1px var(--list-header-border-color, $list-header-border-color);
16
16
 
17
17
  .columnLabel {
18
18
  box-sizing: border-box;
@@ -28,7 +28,7 @@
28
28
  height: 100%;
29
29
 
30
30
  z-index: 1;
31
- border-right: var(--explorer-list-row-border, 1px solid var(--ax-neutral-light));
31
+ border-right: var(--explorer-list-row-border, 1px solid var(--list-header-resize-handle-border-color, $list-header-resize-handle-border-color));
32
32
  position: absolute;
33
33
  right: 0;
34
34
 
package/src/components/List/ListRow/ListRow.scss CHANGED
@@ -29,7 +29,7 @@
29
29
 
30
30
  &.disabled {
31
31
  cursor: not-allowed;
32
- color: var(--disabled-text-color, var(--ax-neutral));
32
+ color: var(--disabled-text-color, var(--list-row-disabled-text-color, $list-row-disabled-text-color));
33
33
  }
34
34
 
35
35
  .actions {
package/src/components/PageHeader/PageHeader.scss CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  margin-top: 12px;
40
40
 
41
- color: var(--ax-neutral);
41
+ color: var(--page-header-subtitle-color, $page-header-subtitle-color);
42
42
  font-size: 16px;
43
43
  }
44
44
 
package/src/components/Tabs/Tab/CustomTab.scss CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  display: grid;
7
7
  height: 50px;
8
- color: var(--ax-primary);
8
+ color: var(--tab-text-color, $tab-text-color);
9
9
  font-size: 14px;
10
10
  font-weight: bold;
11
11
  border-bottom: none;
@@ -17,17 +17,17 @@
17
17
 
18
18
  &.selected {
19
19
  background: white;
20
- color: var(--ax-primary-dark);
20
+ color: var(--tab-selected-text-color, $tab-selected-text-color);
21
21
  }
22
22
 
23
23
  &:hover:not(.selected):not(.disabled) {
24
- background-color: var(--ax-primary);
24
+ background-color: var(--tab-hover-bg-color, $tab-hover-bg-color);
25
25
  transition: background-color $confirmation-transition linear;
26
26
  color: white;
27
27
  }
28
28
 
29
29
  &.disabled {
30
- color: var(--ax-neutral);
30
+ color: var(--tab-disabled-text-color, $tab-disabled-text-color);
31
31
  cursor: default;
32
32
  }
33
33
  }
package/src/components/Tabs/TabList/CustomTabList.scss CHANGED
@@ -4,6 +4,6 @@
4
4
  border: none;
5
5
  margin: 0;
6
6
  padding: 0;
7
- background-color: var(--ax-neutral-lighter);
8
- border-top: 1px solid var(--ax-neutral-lighter);
7
+ background-color: var(--tab-list-bg-color, $tab-list-bg-color);
8
+ border-top: 1px solid var(--tab-list-border-color, $tab-list-border-color);
9
9
  }