@ieeesa-npm/shared-styles 0.2.6 → 0.2.7

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 (6) hide show
  1. package/package.json +1 -1
  2. package/styles/dark-theme.scss +189 -0
  3. package/styles/lighter-theme.scss +189 -0
  4. package/styles/theme.scss +1 -1
  5. package/styles/typography.scss +2 -13
  6. package/styles/variables.scss +27 -27
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ieeesa-npm/shared-styles",
3
- "version": "0.2.6",
3
+ "version": "0.2.7",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^16.1.0",
6
6
  "@angular/core": "^16.1.0"
package/styles/dark-theme.scss ADDED
@@ -0,0 +1,189 @@
1
+ @import "./variables.scss";
2
+ @import "./typography.scss";
3
+ @import "./mixins.scss";
4
+
5
+ // button variant classes
6
+ .mat-mdc-button.mat-mdc-button-base {
7
+ &.mat-primary-button,
8
+ &.mat-secondary-button,
9
+ &.mat-tertiary-button,
10
+ &.mat-text-button {
11
+ min-width: 103px;
12
+ width: auto;
13
+ min-height: 40px;
14
+ height: auto;
15
+ border-radius: 3px;
16
+ text-align: center;
17
+ padding: 0.625em 1.5em;
18
+ border: none;
19
+ @include set-font-style(
20
+ $ieeesa-font-calibri-bold,
21
+ $ieeesa-font-style-normal,
22
+ $ieeesa-font-wt-700,
23
+ $ieeesa-font-size-16,
24
+ $ieeesa-line-height-20,
25
+ $ieeesa-black,
26
+ $ieeesa-letter-space-point-1
27
+ );
28
+ }
29
+ & > .mat-icon {
30
+ margin-right: 11px;
31
+ }
32
+ &.mat-primary-button {
33
+ background-color: $ieeesa-primary-btn-active;
34
+ color: $ieeesa-white;
35
+ }
36
+ &.mat-primary-button:hover {
37
+ background-color: $ieeesa-primary-btn-hover;
38
+ }
39
+ &.mat-primary-button:active {
40
+ background-color: $ieeesa-primary-btn-active;
41
+ }
42
+ &.mat-primary-button:disabled {
43
+ background-color: $ieeesa-primary-btn-disabled;
44
+ }
45
+
46
+ &.mat-secondary-button {
47
+ color: $ieeesa-white;
48
+ background: $ieeesa-medium-grey;
49
+ box-shadow: $ieeesa-box-shadow-2;
50
+ }
51
+ &.mat-secondary-button:hover {
52
+ background: $ieeesa-secondary-btn-hover;
53
+ }
54
+ &.mat-secondary-button:active {
55
+ background: $ieeesa-secondary-btn-active;
56
+ }
57
+ &.mat-secondary-button:disabled {
58
+ background: $ieeesa-primary-btn-disabled;
59
+ color: $ieeesa-background-dark-color;
60
+ opacity: $ieeesa-opacity-point-38;
61
+ }
62
+
63
+ &.mat-tertiary-button {
64
+ background-color: $ieeesa-white;
65
+ border: 1px solid $ieeesa-tertiary-btn-color;
66
+ color: $ieeesa-tertiary-btn-color;
67
+ }
68
+ &.mat-tertiary-button:hover {
69
+ background-color: $ieeesa-tertiary-btn-hover;
70
+ }
71
+ &.mat-tertiary-button:active {
72
+ background: $ieeesa-tertiary-btn-active;
73
+ }
74
+ &.mat-tertiary-button:disabled {
75
+ border: 1px solid $ieeesa-tertiary-btn-disabled;
76
+ color: $ieeesa-background-dark-color;
77
+ opacity: $ieeesa-opacity-point-38;
78
+ }
79
+
80
+ &.mat-text-button {
81
+ color: $ieeesa-blue;
82
+ &:hover {
83
+ background: $ieeesa-tertiary-btn-hover;
84
+ }
85
+ &:active {
86
+ background: $ieeesa-tertiary-btn-hover;
87
+ }
88
+ &:disabled {
89
+ color: $ieeesa-title-color;
90
+ opacity: $ieeesa-opacity-point-38;
91
+ }
92
+ }
93
+ }
94
+ .ieeesa-text-button {
95
+ color: $ieeesa-outline-variant;
96
+ background: none;
97
+ border: none;
98
+ }
99
+ .ieeesa-view-more-or-less-button {
100
+ border: none;
101
+ background: none;
102
+ text-decoration: underline;
103
+ color: $ieeesa-blue;
104
+ }
105
+ .flex-align-center {
106
+ display: flex;
107
+ align-items: center;
108
+ justify-content: center;
109
+ }
110
+ // mat-toggle-button theme
111
+ .mat-button-toggle-checked {
112
+ background-color: $ieeesa-secondary-btn-hover;
113
+ .mat-button-toggle-label-content::before {
114
+ font-family: "Font Awesome 5 Free";
115
+ font-weight: $ieeesa-font-wt-900;
116
+ content: "\f00c";
117
+ padding-right: 0.5625em;
118
+ }
119
+ }
120
+ .mat-button-toggle-group {
121
+ .mat-button-toggle-label-content {
122
+ @include set-font-style(
123
+ $ieeesa-font-calibri-bold,
124
+ $ieeesa-font-style-normal,
125
+ $ieeesa-font-wt-700,
126
+ $ieeesa-font-size-16,
127
+ $ieeesa-line-height-20,
128
+ $ieeesa-background-dark-color,
129
+ $ieeesa-letter-space-point-1
130
+ );
131
+ }
132
+ }
133
+ // Bordered button with no background
134
+ .no-bg-color-btn {
135
+ color: $ieeesa-blue;
136
+ border-radius: 3px;
137
+ border: 1px solid $ieeesa-blue;
138
+ min-height: 40px;
139
+ height: auto;
140
+ }
141
+ @media (max-width: 768px) {
142
+ .mat-button-toggle-group {
143
+ .mat-button-toggle-label-content {
144
+ max-width: 8ch;
145
+ text-overflow: ellipsis;
146
+ white-space: nowrap;
147
+ overflow: hidden;
148
+ position: relative;
149
+ }
150
+ }
151
+ }
152
+ .cdk-overlay-pane {
153
+ .mat-mdc-tooltip .mdc-tooltip__surface {
154
+ color: #525252;
155
+ padding: 6px 12px;
156
+ font-family: $ieeesa-font-calibri-regular;
157
+ font-size: $ieeesa-font-size-16;
158
+ border: 1px solid $ieeesa-outline-variant;
159
+ background: $ieeesa-white;
160
+ box-shadow: $ieeesa-box-shadow-11;
161
+ max-width: unset !important;
162
+ }
163
+ }
164
+ .cdk-overlay-pane {
165
+ .mat-mdc-option .mdc-list-item__primary-text {
166
+ font-family: $ieeesa-font-calibri-regular !important;
167
+ }
168
+ }
169
+ // Modal component styles
170
+ .cdk-overlay-pane {
171
+ &.ieeesa-modal-confirm-dialog,
172
+ &.ieeesa-modal-dialog,
173
+ &.ieeesa-alert-dialog {
174
+ width: 100%;
175
+ min-width: 312px;
176
+ }
177
+ }
178
+
179
+ .mat-mdc-form-field {
180
+ @include set-font-style(
181
+ $ieeesa-font-calibri-regular,
182
+ $ieeesa-font-style-normal,
183
+ $ieeesa-font-wt-400,
184
+ $ieeesa-font-size-18,
185
+ $ieeesa-line-height-24,
186
+ $ieeesa-on-surface-variant-color,
187
+ $ieeesa-letter-space-point-5
188
+ );
189
+ }
package/styles/lighter-theme.scss ADDED
@@ -0,0 +1,189 @@
1
+ @import "./variables.scss";
2
+ @import "./typography.scss";
3
+ @import "./mixins.scss";
4
+
5
+ // button variant classes
6
+ .mat-mdc-button.mat-mdc-button-base {
7
+ &.mat-primary-button,
8
+ &.mat-secondary-button,
9
+ &.mat-tertiary-button,
10
+ &.mat-text-button {
11
+ min-width: 103px;
12
+ width: auto;
13
+ min-height: 40px;
14
+ height: auto;
15
+ border-radius: 3px;
16
+ text-align: center;
17
+ padding: 0.625em 1.5em;
18
+ border: none;
19
+ @include set-font-style(
20
+ $ieeesa-font-calibri-bold,
21
+ $ieeesa-font-style-normal,
22
+ $ieeesa-font-wt-700,
23
+ $ieeesa-font-size-16,
24
+ $ieeesa-line-height-20,
25
+ $ieeesa-black,
26
+ $ieeesa-letter-space-point-1
27
+ );
28
+ }
29
+ & > .mat-icon {
30
+ margin-right: 11px;
31
+ }
32
+ &.mat-primary-button {
33
+ background-color: $ieeesa-primary-btn-active;
34
+ color: $ieeesa-white;
35
+ }
36
+ &.mat-primary-button:hover {
37
+ background-color: $ieeesa-primary-btn-hover;
38
+ }
39
+ &.mat-primary-button:active {
40
+ background-color: $ieeesa-primary-btn-active;
41
+ }
42
+ &.mat-primary-button:disabled {
43
+ background-color: $ieeesa-primary-btn-disabled;
44
+ }
45
+
46
+ &.mat-secondary-button {
47
+ color: $ieeesa-white;
48
+ background: $ieeesa-medium-grey;
49
+ box-shadow: $ieeesa-box-shadow-2;
50
+ }
51
+ &.mat-secondary-button:hover {
52
+ background: $ieeesa-secondary-btn-hover;
53
+ }
54
+ &.mat-secondary-button:active {
55
+ background: $ieeesa-secondary-btn-active;
56
+ }
57
+ &.mat-secondary-button:disabled {
58
+ background: $ieeesa-primary-btn-disabled;
59
+ color: $ieeesa-background-dark-color;
60
+ opacity: $ieeesa-opacity-point-38;
61
+ }
62
+
63
+ &.mat-tertiary-button {
64
+ background-color: $ieeesa-white;
65
+ border: 1px solid $ieeesa-tertiary-btn-color;
66
+ color: $ieeesa-tertiary-btn-color;
67
+ }
68
+ &.mat-tertiary-button:hover {
69
+ background-color: $ieeesa-tertiary-btn-hover;
70
+ }
71
+ &.mat-tertiary-button:active {
72
+ background: $ieeesa-tertiary-btn-active;
73
+ }
74
+ &.mat-tertiary-button:disabled {
75
+ border: 1px solid $ieeesa-tertiary-btn-disabled;
76
+ color: $ieeesa-background-dark-color;
77
+ opacity: $ieeesa-opacity-point-38;
78
+ }
79
+
80
+ &.mat-text-button {
81
+ color: $ieeesa-blue;
82
+ &:hover {
83
+ background: $ieeesa-tertiary-btn-hover;
84
+ }
85
+ &:active {
86
+ background: $ieeesa-tertiary-btn-hover;
87
+ }
88
+ &:disabled {
89
+ color: $ieeesa-title-color;
90
+ opacity: $ieeesa-opacity-point-38;
91
+ }
92
+ }
93
+ }
94
+ .ieeesa-text-button {
95
+ color: $ieeesa-outline-variant;
96
+ background: none;
97
+ border: none;
98
+ }
99
+ .ieeesa-view-more-or-less-button {
100
+ border: none;
101
+ background: none;
102
+ text-decoration: underline;
103
+ color: $ieeesa-blue;
104
+ }
105
+ .flex-align-center {
106
+ display: flex;
107
+ align-items: center;
108
+ justify-content: center;
109
+ }
110
+ // mat-toggle-button theme
111
+ .mat-button-toggle-checked {
112
+ background-color: $ieeesa-secondary-btn-hover;
113
+ .mat-button-toggle-label-content::before {
114
+ font-family: "Font Awesome 5 Free";
115
+ font-weight: $ieeesa-font-wt-900;
116
+ content: "\f00c";
117
+ padding-right: 0.5625em;
118
+ }
119
+ }
120
+ .mat-button-toggle-group {
121
+ .mat-button-toggle-label-content {
122
+ @include set-font-style(
123
+ $ieeesa-font-calibri-bold,
124
+ $ieeesa-font-style-normal,
125
+ $ieeesa-font-wt-700,
126
+ $ieeesa-font-size-16,
127
+ $ieeesa-line-height-20,
128
+ $ieeesa-background-dark-color,
129
+ $ieeesa-letter-space-point-1
130
+ );
131
+ }
132
+ }
133
+ // Bordered button with no background
134
+ .no-bg-color-btn {
135
+ color: $ieeesa-blue;
136
+ border-radius: 3px;
137
+ border: 1px solid $ieeesa-blue;
138
+ min-height: 40px;
139
+ height: auto;
140
+ }
141
+ @media (max-width: 768px) {
142
+ .mat-button-toggle-group {
143
+ .mat-button-toggle-label-content {
144
+ max-width: 8ch;
145
+ text-overflow: ellipsis;
146
+ white-space: nowrap;
147
+ overflow: hidden;
148
+ position: relative;
149
+ }
150
+ }
151
+ }
152
+ .cdk-overlay-pane {
153
+ .mat-mdc-tooltip .mdc-tooltip__surface {
154
+ color: #525252;
155
+ padding: 6px 12px;
156
+ font-family: $ieeesa-font-calibri-regular;
157
+ font-size: $ieeesa-font-size-16;
158
+ border: 1px solid $ieeesa-outline-variant;
159
+ background: $ieeesa-white;
160
+ box-shadow: $ieeesa-box-shadow-11;
161
+ max-width: unset !important;
162
+ }
163
+ }
164
+ .cdk-overlay-pane {
165
+ .mat-mdc-option .mdc-list-item__primary-text {
166
+ font-family: $ieeesa-font-calibri-regular !important;
167
+ }
168
+ }
169
+ // Modal component styles
170
+ .cdk-overlay-pane {
171
+ &.ieeesa-modal-confirm-dialog,
172
+ &.ieeesa-modal-dialog,
173
+ &.ieeesa-alert-dialog {
174
+ width: 100%;
175
+ min-width: 312px;
176
+ }
177
+ }
178
+
179
+ .mat-mdc-form-field {
180
+ @include set-font-style(
181
+ $ieeesa-font-calibri-regular,
182
+ $ieeesa-font-style-normal,
183
+ $ieeesa-font-wt-400,
184
+ $ieeesa-font-size-18,
185
+ $ieeesa-line-height-24,
186
+ $ieeesa-on-surface-variant-color,
187
+ $ieeesa-letter-space-point-5
188
+ );
189
+ }
package/styles/theme.scss CHANGED
@@ -181,7 +181,7 @@
181
181
  $ieeesa-font-calibri-regular,
182
182
  $ieeesa-font-style-normal,
183
183
  $ieeesa-font-wt-400,
184
- $ieeesa-font-size-16,
184
+ $ieeesa-font-size-18,
185
185
  $ieeesa-line-height-24,
186
186
  $ieeesa-on-surface-variant-color,
187
187
  $ieeesa-letter-space-point-5
package/styles/typography.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  .ieeesa-subtitle {
5
5
  text-align: left;
6
6
  font-family: $ieeesa-font-calibri-regular;
7
- font-size: $ieeesa-font-size-25;
7
+ font-size: 1.56em;
8
8
  letter-spacing: $ieeesa-letter-space-0;
9
9
  color: $ieeesa-black;
10
10
  opacity: 1;
@@ -12,7 +12,7 @@
12
12
  .ieeesa-body {
13
13
  text-align: left;
14
14
  font-family: $ieeesa-font-calibri-regular;
15
- font-size: $ieeesa-font-size-20;
15
+ font-size: 1.25em;
16
16
  letter-spacing: $ieeesa-letter-space-0;
17
17
  color: $ieeesa-black;
18
18
  opacity: 1;
@@ -149,17 +149,6 @@
149
149
  $ieeesa-letter-space-point-15
150
150
  );
151
151
  }
152
- .ieeesa-title-sm-14 {
153
- @include set-font-style(
154
- $ieeesa-font-calibri-regular,
155
- $ieeesa-font-style-normal,
156
- $ieeesa-font-wt-400,
157
- $ieeesa-font-size-14,
158
- $ieeesa-line-height-20,
159
- $ieeesa-black,
160
- $ieeesa-letter-space-point-1
161
- );
162
- }
163
152
  .ieeesa-title-sm-16 {
164
153
  @include set-font-style(
165
154
  $ieeesa-font-calibri-regular,
package/styles/variables.scss CHANGED
@@ -8,32 +8,32 @@ $ieeesa-font-style-normal: normal;
8
8
  $ieeesa-font-variant-normal: normal;
9
9
  $ieeesa-font-inter-bold: "Inter Bold";
10
10
  // Font size
11
- $ieeesa-font-size-6: 0.375rem;
12
- $ieeesa-font-size-10: 0.625rem;
13
- $ieeesa-font-size-12: 0.75rem;
14
- $ieeesa-font-size-13: 0.8125rem;
15
- $ieeesa-font-size-14: 0.875rem;
16
- $ieeesa-font-size-15: 0.9375rem;
17
- $ieeesa-font-size-16: 1rem;
18
- $ieeesa-font-size-18: 1.125rem;
19
- $ieeesa-font-size-20: 1.25rem;
20
- $ieeesa-font-size-22: 1.375rem;
21
- $ieeesa-font-size-24: 1.5rem;
22
- $ieeesa-font-size-25: 1.5625rem;
23
- $ieeesa-font-size-26: 1.625rem;
24
- $ieeesa-font-size-28: 1.75rem;
25
- $ieeesa-font-size-30: 1.875rem;
26
- $ieeesa-font-size-31: 1.938rem;
27
- $ieeesa-font-size-32: 2rem;
28
- $ieeesa-font-size-34: 2.125rem;
29
- $ieeesa-font-size-38: 2.375rem;
30
- $ieeesa-font-size-45: 2.813rem;
31
- $ieeesa-font-size-47: 2.9375rem;
32
- $ieeesa-font-size-48: 3rem;
33
- $ieeesa-font-size-50: 3.125rem;
34
- $ieeesa-font-size-57: 3.5625rem;
35
- $ieeesa-font-size-59: 3.6875rem;
36
- $ieeesa-font-size-76: 4.75rem;
11
+ $ieeesa-font-size-6: 0.375em;
12
+ $ieeesa-font-size-10: 0.625em;
13
+ $ieeesa-font-size-12: 0.75em;
14
+ $ieeesa-font-size-13: 0.8125em;
15
+ $ieeesa-font-size-14: 0.875em;
16
+ $ieeesa-font-size-15: 0.9375em;
17
+ $ieeesa-font-size-16: 1em;
18
+ $ieeesa-font-size-18: 1.125em;
19
+ $ieeesa-font-size-20: 1.25em;
20
+ $ieeesa-font-size-22: 1.375em;
21
+ $ieeesa-font-size-24: 1.5em;
22
+ $ieeesa-font-size-25: 1.5625em;
23
+ $ieeesa-font-size-26: 1.625em;
24
+ $ieeesa-font-size-28: 1.75em;
25
+ $ieeesa-font-size-30: 1.875em;
26
+ $ieeesa-font-size-31: 1.938em;
27
+ $ieeesa-font-size-32: 2em;
28
+ $ieeesa-font-size-34: 2.125em;
29
+ $ieeesa-font-size-38: 2.375em;
30
+ $ieeesa-font-size-45: 2.813em;
31
+ $ieeesa-font-size-47: 2.9375em;
32
+ $ieeesa-font-size-48: 3em;
33
+ $ieeesa-font-size-50: 3.125em;
34
+ $ieeesa-font-size-57: 3.5625em;
35
+ $ieeesa-font-size-59: 3.6875em;
36
+ $ieeesa-font-size-76: 4.75em;
37
37
  // Font-weight
38
38
  $ieeesa-font-wt-normal: normal;
39
39
  $ieeesa-font-wt-bold: bold;
@@ -142,6 +142,7 @@ $ieeesa-opacity-point-38: 0.38;
142
142
  $ieeesa-primary-brand-10: #002c37;
143
143
  $ieeesa-primary-brand-30: #0188aa;
144
144
  $ieeesa-dark-grey-30: #4a4d50;
145
+ $ieeesa-dark-grey-60: #878b8f;
145
146
  $ieeesa-dark-grey-99: #f4f8fe;
146
147
  $ieeesa-brand-grey-50: #777a7e;
147
148
  $ieeesa-brand-grey-70: #9ba0a6;
@@ -168,4 +169,3 @@ $ieeesa-tile-background: linear-gradient(
168
169
  $ieeesa-neutral-60: #939094;
169
170
  $ieeesa-background-color-gray: #f2f2f2;
170
171
  $ieeesa-mobile-min-width: 767px;
171
- $ieeesa-disabled-border-color: #c0c7cd;