@energycap/components 0.33.5-ECAP-18301-commodity-resources-and-units-page.20230605-1523 → 0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230605-1635

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 (18) hide show
  1. package/energycap-components.min.css +2 -2
  2. package/esm2020/lib/controls/button/button.component.mjs +2 -2
  3. package/esm2020/lib/controls/combobox/combobox.component.mjs +2 -2
  4. package/esm2020/lib/controls/dropdown/dropdown.component.mjs +2 -2
  5. package/esm2020/lib/controls/menu/menu.component.mjs +3 -3
  6. package/esm2020/lib/display/app-bar/app-bar.component.mjs +3 -3
  7. package/esm2020/lib/display/avatar/avatar.component.mjs +2 -2
  8. package/esm2020/lib/display/hierarchy/hierarchy-tree/hierarchy-tree.component.mjs +2 -2
  9. package/esm2020/lib/display/tags/tags.component.mjs +2 -2
  10. package/esm2020/lib/shared/page/page-view/page-view.component.mjs +3 -3
  11. package/fesm2015/energycap-components.mjs +18 -18
  12. package/fesm2015/energycap-components.mjs.map +1 -1
  13. package/fesm2020/energycap-components.mjs +18 -18
  14. package/fesm2020/energycap-components.mjs.map +1 -1
  15. package/package.json +1 -1
  16. package/src/styles/_global-variables.scss +3 -3
  17. package/src/styles/mixins/_button-base.scss +33 -25
  18. package/src/styles/mixins/_nav-control-base.scss +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@energycap/components",
3
- "version": "0.33.5-ECAP-18301-commodity-resources-and-units-page.20230605-1523",
3
+ "version": "0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230605-1635",
4
4
  "dependencies": {
5
5
  "tslib": "^2.0.0"
6
6
  },
package/src/styles/_global-variables.scss CHANGED
@@ -130,9 +130,9 @@
130
130
  --ec-box-shadow-overlay: 0px .0625rem .5rem var(--ec-color-shadow-overlay);
131
131
 
132
132
  // Borders
133
- --ec-border-color: rgba(26, 26, 35, .18);
134
- --ec-border-color-dark: rgba(26, 26, 35, .87);
135
- --ec-border-color-hint: rgba(26,26,35, .1);
133
+ --ec-border-color: #D6D6D7;
134
+ --ec-border-color-dark: #383840;
135
+ --ec-border-color-hint: #EDEDED;
136
136
  --ec-border-color-legacy: rgb(210, 215, 217);
137
137
  --ec-border-radius: .25rem;
138
138
  --ec-border-radius-card: .375rem;
package/src/styles/mixins/_button-base.scss CHANGED
@@ -30,67 +30,67 @@
30
30
  }
31
31
 
32
32
  @mixin primary-button {
33
- background-color: $green-3;
34
- border-color: $green-4;
35
- color: var(--ec-color-primary-dark);
33
+ background-color: var(--ec-button-background-color-primary, var(--ec-color-green-3));
34
+ border-color: var(--ec-button-border-color-primary, var(--ec-color-green-4));
35
+ color: var(--ec-button-color-primary, var(--ec-color-primary-dark));
36
36
 
37
37
  &:active:not(:disabled) {
38
- background-color: $green-4;
38
+ background-color: var(--ec-button-background-color-primary-active, var(--ec-color-green-4));
39
39
  color: var(--ec-color-primary-dark);
40
40
  }
41
41
 
42
42
  .ec-icon {
43
- color: var(--ec-button-color-icon, var(--ec-color-icon));
43
+ color: var(--ec-button-color-icon-primary, var(--ec-color-icon));
44
44
  }
45
45
  }
46
46
 
47
47
  @mixin secondary-button {
48
- background-color: var(--ec-background-color);
49
- border-color: $control-border-color;
50
- color: var(--ec-color-primary-dark);
48
+ background-color: var(--ec-button-background-color-secondary, var(--ec-background-color));
49
+ border-color: var(--ec-button-border-color-secondary, #{$control-border-color});
50
+ color: var(--ec-button-color-secondary, var(--ec-color-primary-dark));
51
51
 
52
52
  &:active:not(:disabled) {
53
- background-color: var(--ec-background-color);
54
- color: var(--ec-color-primary-dark);
53
+ background-color: var(--ec-button-background-color-secondary-active, var(--ec-background-color));
54
+ color: var(--ec-button-color-secondary-active, var(--ec-color-primary-dark));
55
55
  }
56
56
 
57
57
  .ec-icon {
58
- color: var(--ec-button-color-icon, var(--ec-color-icon));
58
+ color: var(--ec-button-color-icon-secondary, var(--ec-color-icon));
59
59
  }
60
60
  }
61
61
 
62
62
  @mixin common-button {
63
- background-color: $blue-3;
64
- border-color: $blue-4;
63
+ background-color: var(--ec-button-background-color-common, var(--ec-color-blue-3));
64
+ border-color: var(--ec-button-border-color-common, var(--ec-color-blue-4));
65
65
  color: var(--ec-color-primary-light);
66
66
 
67
67
  .ec-icon {
68
- color: var(--ec-button-color-icon, inherit);
68
+ color: var(--ec-button-color-icon-common, var(--ec-color-primary-light));
69
69
  }
70
70
 
71
71
  &:active:not(:disabled) {
72
- background-color: $blue-4;
73
- border-color: $blue-6;
72
+ background-color: var(--ec-button-background-color-common-active, var(--ec-color-blue-4));
73
+ border-color: var(--ec-button-border-color-common-active, var(--ec-color-blue-6));
74
74
  }
75
75
  }
76
76
 
77
77
  @mixin danger-button {
78
- background-color: var(--ec-color-danger);
79
- border-color: $red-4;
80
- color: var(--ec-color-primary-light);
78
+ background-color: var(--ec-button-background-color-danger, var(--ec-color-danger));
79
+ border-color: var(--ec-button-border-color-danger, var(--ec-color-red-4));
80
+ color: var(--ec-button-color-danger, var(--ec-color-primary-light));
81
81
 
82
82
  .ec-icon {
83
- color: var(--ec-button-color-icon, inherit);
83
+ color: var(--ec-button-color-icon-danger, var(--ec-color-primary-light));
84
84
  }
85
85
 
86
86
  &:active:not(:disabled) {
87
- background-color: $red-4;
87
+ background-color: var(--ec-button-background-color-danger-active, var(--ec-color-red-4));
88
88
  }
89
89
  }
90
90
 
91
91
  @mixin icon-button{
92
92
  background-color: transparent;
93
- color: var(--ec-color-icon);
93
+ color: var(--ec-button-color-icon, var(--ec-color-icon));
94
94
  width: $control-height;
95
95
  padding: 0;
96
96
 
@@ -101,8 +101,12 @@
101
101
  color: var(--ec-button-color-icon, var(--ec-color-icon));
102
102
  }
103
103
 
104
- &:hover {
104
+ &:hover:not(:disabled) {
105
105
  @include nav-hover('span');
106
+
107
+ .ec-icon {
108
+ color: var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)));
109
+ }
106
110
  }
107
111
 
108
112
  &:disabled {
@@ -122,12 +126,16 @@
122
126
  }
123
127
  }
124
128
 
125
- @mixin text-button($color: var(--ec-color-primary-dark), $icon-color: inherit) {
129
+ @mixin text-button(
130
+ $type: 'text',
131
+ $color: var(--ec-color-primary-dark),
132
+ $icon-color: inherit
133
+ ) {
126
134
  background-color: transparent;
127
135
  color: $color;
128
136
 
129
137
  .ec-icon {
130
- color: var(--ec-button-color-icon, $icon-color);
138
+ color: var(--ec-button-color-icon-#{$type}, $icon-color);
131
139
  }
132
140
 
133
141
  &:active:not(:disabled) {
package/src/styles/mixins/_nav-control-base.scss CHANGED
@@ -4,8 +4,8 @@ $nav-font-size: var(--ec-font-size-action);
4
4
  $nav-item-bg: var(--ec-background-color);
5
5
  $nav-item-height: rem-calc(28px);
6
6
  $nav-item-line-height: rem-calc(18px);
7
- $nav-item-bg-hover: #BFE0E9;
8
- $nav-item-bg-selected: #D9EDF2;
7
+ $nav-item-bg-hover: var(--ec-background-color-hover);
8
+ $nav-item-bg-selected: var(--ec-background-color-selected);
9
9
  $nav-icon-height: var(--ec-font-size-icon);
10
10
  $nav-item-transition-duration: .2s;
11
11