@energycap/components 0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230605-1635 → 0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230606-0953

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@energycap/components",
3
- "version": "0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230605-1635",
3
+ "version": "0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230606-0953",
4
4
  "dependencies": {
5
5
  "tslib": "^2.0.0"
6
6
  },
@@ -132,8 +132,7 @@
132
132
  // Borders
133
133
  --ec-border-color: #D6D6D7;
134
134
  --ec-border-color-dark: #383840;
135
- --ec-border-color-hint: #EDEDED;
136
- --ec-border-color-legacy: rgb(210, 215, 217);
135
+ --ec-border-color-hint: #EDEDED;
137
136
  --ec-border-radius: .25rem;
138
137
  --ec-border-radius-card: .375rem;
139
138
  --ec-border-radius-dialog: .5rem;
@@ -31,12 +31,12 @@
31
31
 
32
32
  @mixin primary-button {
33
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));
34
+ border-color: var(--ec-border-color);
35
35
  color: var(--ec-button-color-primary, var(--ec-color-primary-dark));
36
36
 
37
37
  &:active:not(:disabled) {
38
- background-color: var(--ec-button-background-color-primary-active, var(--ec-color-green-4));
39
- color: var(--ec-color-primary-dark);
38
+ background-color: var(--ec-button-background-color-primary, var(--ec-color-green-3));
39
+ color: var(--ec-button-color-primary, var(--ec-color-primary-dark));
40
40
  }
41
41
 
42
42
  .ec-icon {
@@ -45,13 +45,13 @@
45
45
  }
46
46
 
47
47
  @mixin secondary-button {
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});
48
+ background-color: var(--ec-background-color);
49
+ border-color: var(--ec-button-border-color-secondary, var(--ec-border-color));
50
50
  color: var(--ec-button-color-secondary, var(--ec-color-primary-dark));
51
51
 
52
52
  &:active:not(:disabled) {
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));
53
+ background-color: var(--ec-background-color);
54
+ color: var(--ec-button-color-secondary, var(--ec-color-primary-dark));
55
55
  }
56
56
 
57
57
  .ec-icon {
@@ -60,31 +60,31 @@
60
60
  }
61
61
 
62
62
  @mixin common-button {
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));
63
+ background-color: $blue-3;
64
+ border-color: $blue-4;
65
65
  color: var(--ec-color-primary-light);
66
66
 
67
67
  .ec-icon {
68
- color: var(--ec-button-color-icon-common, var(--ec-color-primary-light));
68
+ color: var(--ec-button-color-icon, inherit);
69
69
  }
70
70
 
71
71
  &:active:not(:disabled) {
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));
72
+ background-color: $blue-4;
73
+ border-color: $blue-6;
74
74
  }
75
75
  }
76
76
 
77
77
  @mixin danger-button {
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));
78
+ background-color: var(--ec-color-danger);
79
+ border-color: var(--ec-border-color);
80
+ color: var(--ec-color-primary-light);
81
81
 
82
82
  .ec-icon {
83
- color: var(--ec-button-color-icon-danger, var(--ec-color-primary-light));
83
+ color: var(--ec-button-color-icon, inherit);
84
84
  }
85
85
 
86
86
  &:active:not(:disabled) {
87
- background-color: var(--ec-button-background-color-danger-active, var(--ec-color-red-4));
87
+ background-color: var(--ec-color-danger);
88
88
  }
89
89
  }
90
90
 
@@ -1,6 +1,6 @@
1
1
  @import '../core';
2
2
 
3
- $control-border-color: var(--ec-border-color-legacy);
3
+ $control-border-color: var(--ec-border-color);
4
4
  $control-border-width: rem-calc(1px);
5
5
  $control-color: var(--ec-color-primary-dark);
6
6
  $control-bg: var(--ec-background-color);
@@ -367,7 +367,7 @@ $checkbox-indicator-size: $form-control-icon-size;
367
367
 
368
368
  @mixin toggle() {
369
369
  font-size: $control-font-size;
370
- background-color: var(--ec-border-color-legacy);
370
+ background-color: var(--ec-border-color);
371
371
  border-radius: var(--ec-border-radius);
372
372
  border: $control-border-width solid $control-border-color;
373
373
  min-height: 2em;
@@ -250,7 +250,7 @@ $table-z-indexes: (
250
250
 
251
251
  @mixin table-detail-content() {
252
252
  background-color: transparent;
253
- border-top: 1px solid var(--ec-border-color-legacy);
253
+ border-top: 1px solid var(--ec-border-color);
254
254
  padding: 1rem 2rem 1rem 0 !important;
255
255
  }
256
256
 
@@ -1,7 +1,7 @@
1
1
  @import 'nav-control-base';
2
2
 
3
3
  $tab-border-width: 1px;
4
- $tab-border-color: var(--ec-border-color-legacy);
4
+ $tab-border-color: var(--ec-border-color);
5
5
  $tab-color: var(--ec-color-secondary-dark);
6
6
  $tab-color-active: $gray-7;
7
7
  $tab-color-hover: $gray-7;