@aquera/nile-elements 0.0.17 → 0.0.18

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 (13) hide show
  1. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.css.js +113 -64
  2. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.css.js.map +1 -1
  3. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
  4. package/demo/index.html +18 -1
  5. package/dist/index.iife.js +303 -254
  6. package/dist/nile-button/nile-button.css.cjs.js +1 -1
  7. package/dist/nile-button/nile-button.css.cjs.js.map +1 -1
  8. package/dist/nile-button/nile-button.css.esm.js +115 -66
  9. package/dist/src/nile-button/nile-button.css.js +113 -64
  10. package/dist/src/nile-button/nile-button.css.js.map +1 -1
  11. package/dist/tsconfig.tsbuildinfo +1 -1
  12. package/package.json +1 -1
  13. package/src/nile-button/nile-button.css.ts +113 -64
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent nile-elements following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "nile-elements",
6
- "version": "0.0.17",
6
+ "version": "0.0.18",
7
7
  "main": "dist/src/index.js",
8
8
  "type": "module",
9
9
  "module": "dist/src/index.js",
package/src/nile-button/nile-button.css.ts CHANGED
@@ -74,127 +74,176 @@ export const styles = css`
74
74
  }
75
75
 
76
76
  .button--standard.button--secondary {
77
- background-color: var(--nile-colors-neutral-400);
78
- border-color: var(--nile-colors-neutral-400);
79
- color: var(--nile-colors-neutral-900);
77
+ background-color: var(--nile-colors-button-secondary);
78
+ border-color: var(--nile-colors-button-secondary-border);
79
+ color: var(--nile-colors-button-secondary-text);
80
80
  }
81
81
 
82
82
  .button--standard.button--secondary:hover:not(.button--disabled) {
83
- background-color: var(--nile-colors-neutral-500);
84
- border : none;
85
- box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
86
- color: var(--nile-colors-neutral-900);
83
+ background-color: var(--nile-colors-button-secondary-hover);
84
+ border-color: var(--nile-colors-button-secondary-border);
85
+ color: var(--nile-colors-button-secondary-text);
87
86
  }
88
87
 
89
88
  .button--standard.button--secondary:active:not(.button--disabled) {
90
- background-color: var(--nile-colors-neutral-500);
91
- border-color: var(--nile-colors-neutral-700);
92
- color: var(--nile-colors-neutral-900);
89
+ background-color: var(--nile-colors-button-secondary-pressed);
90
+ border-color: var(--nile-colors-button-secondary-pressed-border);
91
+ color: var(--nile-colors-button-secondary-text);
93
92
  }
94
93
 
95
94
  .button--standard.button--secondary.button--disabled {
96
- background-color: var(--nile-colors-neutral-400);
97
- border-color: var(--nile-colors-neutral-400);
98
- color: var(--nile-colors-dark-500);
95
+ background-color: var(--nile-colors-button-secondary-disabled);
96
+ border-color: var(--nile-colors-button-secondary-disabled-border);
97
+ color: var(--nile-colors-button-secondary-disabled-text);
99
98
  cursor: not-allowed;
100
99
  }
101
100
 
102
101
  .button--standard.button--secondary.button--disabled:hover,
103
102
  .button--standard.button--secondary.button--disabled:active {
104
- background-color: var(--nile-colors-neutral-400);
105
- border-color: var(--nile-colors-neutral-400);
106
- color: var(--nile-colors-dark-500);
107
- box-shadow: none;
103
+ background-color: var(--nile-colors-button-secondary-disabled);
104
+ border-color: var(--nile-colors-button-secondary-disabled-border);
105
+ color: var(--nile-colors-button-secondary-disabled-text);
106
+ cursor: not-allowed;
108
107
  }
109
108
 
110
109
  /* Primary */
111
110
  .button--standard.button--primary {
112
- background-color: var(--nile-colors-primary-600);
113
- border-color: var(--nile-colors-primary-600);
114
- color: var(--nile-colors-white-base);
111
+ background-color: var(--nile-colors-button-primary);
112
+ border-color: var(--nile-colors-button-primary-border);
113
+ color: var(--nile-colors-button-primary-text);
115
114
  }
116
115
 
117
116
  .button--standard.button--primary:hover:not(.button--disabled) {
118
- background-color: var(--nile-colors-primary-700);
119
- border-color: var(--nile-colors-primary-700);
120
- box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
121
- color: var(--nile-colors-white-base);
117
+ background-color: var(--nile-colors-button-primary-hover);
118
+ border-color: var(--nile-colors-button-primary-hover);
119
+ color: var(--nile-colors-button-primary-text);
122
120
  }
123
121
 
124
122
  .button--standard.button--primary:active:not(.button--disabled) {
125
- background-color: var(--nile-colors-primary-700);
126
- border-color: var(--nile-colors-primary-900);
127
- color: var(--nile-colors-white-base);
123
+ background-color: var(--nile-colors-button-primary-pressed);
124
+ border-color: var(--nile-colors-button-primary-pressed);
125
+ color: var(--nile-colors-button-primary-text);
128
126
  }
129
127
 
130
128
  .button--standard.button--primary.button--disabled {
131
- background-color: var(--nile-colors-neutral-700);
132
- border-color: var(--nile-colors-neutral-700);
133
- color: var(--nile-colors-white-base);
129
+ background-color: var(--nile-colors-button-primary-disabled);
130
+ border-color: var(--nile-colors-button-primary-disabled);
131
+ color: var(--nile-colors-button-primary-disabled-text);
134
132
  cursor: not-allowed;
135
133
  }
136
134
 
137
135
  .button--standard.button--primary.button--disabled:hover,
138
136
  .button--standard.button--primary.button--disabled:active {
139
- background-color: var(--nile-colors-neutral-700);
140
- border-color: var(--nile-colors-neutral-700);
141
- color: var(--nile-colors-white-base);
142
- box-shadow: none;
137
+ background-color: var(--nile-colors-button-primary-disabled);
138
+ border-color: var(--nile-colors-button-primary-disabled);
139
+ color: var(--nile-colors-button-primary-disabled-text);
140
+ cursor: not-allowed;
143
141
  }
144
142
 
145
143
  /* Tertiary */
146
144
  .button--standard.button--tertiary {
147
- background-color: var(--nile-colors-white-base);
148
- border-color: var(--nile-colors-neutral-500);
149
- color: var(--nile-colors-dark-900);
150
- box-shadow: 0px 2px 4px var(--nile-colors-dark-200);
145
+ background-color: var(--nile-colors-button-tertiary);
146
+ border-color: var(--nile-colors-button-tertiary-border);
147
+ color: var(--nile-colors-button-tertiary-text);
151
148
  }
152
149
 
153
150
  .button--standard.button--tertiary:hover:not(.button--disabled) {
154
- background-color: var(--nile-colors-neutral-100);
151
+ background-color: var(--nile-colors-button-tertiary-hover);
155
152
  border-color: var(--nile-colors-neutral-500);
156
- box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
157
- color: var(--nile-colors-neutral-700);
153
+ color: var(--nile-colors-button-tertiary-text);
158
154
  }
159
155
 
160
156
  .button--standard.button--tertiary:active:not(.button--disabled) {
161
- background-color: var(--nile-colors-neutral-400);
162
- border-color: var(--nile-colors-neutral-700);
163
- color: var(--nile-colors-neutral-700);
164
- }
165
- .button--standard.button--tertiary.button--disabled {
166
- border-color: #e5e9eb;
167
- background-color: var(--nile-colors-white-base);
168
- color: var(--nile-colors-neutral-700);
169
- cursor: not-allowed;
170
- box-shadow: none;
157
+ background-color: var(--nile-colors-button-tertiary-pressed);
158
+ border-color: var(--nile-colors-button-tertiary-pressed-border);
159
+ color: var(--nile-colors-button-tertiary-text);
171
160
  }
172
161
 
162
+ .button--standard.button--tertiary.button--disabled,
173
163
  .button--standard.button--tertiary.button--disabled:hover,
174
164
  .button--standard.button--tertiary.button--disabled:active {
175
- border-color: #e5e9eb;
176
- background-color: var(--nile-colors-white-base);
177
- color: var(--nile-colors-neutral-700);
165
+ border-color: var(--nile-colors-neutral-500);
166
+ background-color: var(--nile-colors-button-tertiary-disabled);
167
+ color: var(--nile-colors-button-tertiary-disabled-text);
168
+ cursor: not-allowed;
178
169
  box-shadow: none;
179
170
  }
180
171
 
181
172
  /* caution */
182
173
  .button--standard.button--caution {
183
- background-color: var(--nile-colors-red-500);
184
- border-color: var(--nile-colors-red-500);
185
- color: var(--nile-colors-white-base);
174
+ background-color: var(--nile-colors-button-caution);
175
+ border-color: var(--nile-colors-button-caution);
176
+ color: var(--nile-colors-button-caution-text);
186
177
  }
178
+
187
179
  .button--standard.button--caution:hover:not(.button--disabled) {
188
- background-color: var(--nile-colors-red-700);
189
- border-color: var(--nile-colors-red-700);
190
- color: var(--nile-colors-white-base);
180
+ background-color: var(--nile-colors-button-caution-hover);
181
+ border-color: var(--nile-colors-button-caution-hover);
182
+ color: var(--nile-colors-button-caution-text);
191
183
  }
192
184
 
193
185
  .button--standard.button--caution:active:not(.button--disabled) {
194
- background-color: var(--nile-colors-red-700);
195
- border-color: var(--nile-colors-red-500);
196
- color: var(--nile-colors-white-base);
197
- }
186
+ background-color: var(--nile-colors-button-caution-pressed);
187
+ border-color: var(--nile-colors-button-caution-pressed);
188
+ color: var(--nile-colors-button-caution-text);
189
+ }
190
+
191
+ .button--standard.button--caution.button--disabled,
192
+ .button--standard.button--caution.button--disabled:hover,
193
+ .button--standard.button--caution.button--disabled:active {
194
+ background-color: var(--nile-colors-button-caution-disabled);
195
+ border-color: var(--nile-colors-button-caution-disabled);
196
+ color: var(--nile-colors-button-caution-disabled-text);
197
+ }
198
+
199
+
200
+ /* Primary Variant - Nile Icon Fill */
201
+ .button--standard.button--primary ::slotted(nile-icon) {
202
+ --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
203
+ }
204
+ .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),
205
+ .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {
206
+ --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
207
+ }
208
+ .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
209
+ --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
210
+ }
211
+
212
+ /* Secondary Variant */
213
+ .button--standard.button--secondary ::slotted(nile-icon) {
214
+ --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
215
+ }
216
+ .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),
217
+ .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {
218
+ --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
219
+ }
220
+ .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
221
+ --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;
222
+ }
223
+
224
+ /* Tertiary Variant */
225
+ .button--standard.button--tertiary ::slotted(nile-icon) {
226
+ --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
227
+ }
228
+ .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),
229
+ .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {
230
+ --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
231
+ }
232
+ .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
233
+ --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
234
+ }
235
+
236
+ /* Caution Variant */
237
+ .button--standard.button--caution ::slotted(nile-icon) {
238
+ --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
239
+ }
240
+ .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),
241
+ .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {
242
+ --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
243
+ }
244
+ .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
245
+ --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
246
+ }
198
247
 
199
248
  /*
200
249
  * Outline buttons