@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/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.css.js CHANGED
@@ -72,127 +72,176 @@ export const styles = css `
72
72
  }
73
73
 
74
74
  .button--standard.button--secondary {
75
- background-color: var(--nile-colors-neutral-400);
76
- border-color: var(--nile-colors-neutral-400);
77
- color: var(--nile-colors-neutral-900);
75
+ background-color: var(--nile-colors-button-secondary);
76
+ border-color: var(--nile-colors-button-secondary-border);
77
+ color: var(--nile-colors-button-secondary-text);
78
78
  }
79
79
 
80
80
  .button--standard.button--secondary:hover:not(.button--disabled) {
81
- background-color: var(--nile-colors-neutral-500);
82
- border : none;
83
- box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
84
- color: var(--nile-colors-neutral-900);
81
+ background-color: var(--nile-colors-button-secondary-hover);
82
+ border-color: var(--nile-colors-button-secondary-border);
83
+ color: var(--nile-colors-button-secondary-text);
85
84
  }
86
85
 
87
86
  .button--standard.button--secondary:active:not(.button--disabled) {
88
- background-color: var(--nile-colors-neutral-500);
89
- border-color: var(--nile-colors-neutral-700);
90
- color: var(--nile-colors-neutral-900);
87
+ background-color: var(--nile-colors-button-secondary-pressed);
88
+ border-color: var(--nile-colors-button-secondary-pressed-border);
89
+ color: var(--nile-colors-button-secondary-text);
91
90
  }
92
91
 
93
92
  .button--standard.button--secondary.button--disabled {
94
- background-color: var(--nile-colors-neutral-400);
95
- border-color: var(--nile-colors-neutral-400);
96
- color: var(--nile-colors-dark-500);
93
+ background-color: var(--nile-colors-button-secondary-disabled);
94
+ border-color: var(--nile-colors-button-secondary-disabled-border);
95
+ color: var(--nile-colors-button-secondary-disabled-text);
97
96
  cursor: not-allowed;
98
97
  }
99
98
 
100
99
  .button--standard.button--secondary.button--disabled:hover,
101
100
  .button--standard.button--secondary.button--disabled:active {
102
- background-color: var(--nile-colors-neutral-400);
103
- border-color: var(--nile-colors-neutral-400);
104
- color: var(--nile-colors-dark-500);
105
- box-shadow: none;
101
+ background-color: var(--nile-colors-button-secondary-disabled);
102
+ border-color: var(--nile-colors-button-secondary-disabled-border);
103
+ color: var(--nile-colors-button-secondary-disabled-text);
104
+ cursor: not-allowed;
106
105
  }
107
106
 
108
107
  /* Primary */
109
108
  .button--standard.button--primary {
110
- background-color: var(--nile-colors-primary-600);
111
- border-color: var(--nile-colors-primary-600);
112
- color: var(--nile-colors-white-base);
109
+ background-color: var(--nile-colors-button-primary);
110
+ border-color: var(--nile-colors-button-primary-border);
111
+ color: var(--nile-colors-button-primary-text);
113
112
  }
114
113
 
115
114
  .button--standard.button--primary:hover:not(.button--disabled) {
116
- background-color: var(--nile-colors-primary-700);
117
- border-color: var(--nile-colors-primary-700);
118
- box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
119
- color: var(--nile-colors-white-base);
115
+ background-color: var(--nile-colors-button-primary-hover);
116
+ border-color: var(--nile-colors-button-primary-hover);
117
+ color: var(--nile-colors-button-primary-text);
120
118
  }
121
119
 
122
120
  .button--standard.button--primary:active:not(.button--disabled) {
123
- background-color: var(--nile-colors-primary-700);
124
- border-color: var(--nile-colors-primary-900);
125
- color: var(--nile-colors-white-base);
121
+ background-color: var(--nile-colors-button-primary-pressed);
122
+ border-color: var(--nile-colors-button-primary-pressed);
123
+ color: var(--nile-colors-button-primary-text);
126
124
  }
127
125
 
128
126
  .button--standard.button--primary.button--disabled {
129
- background-color: var(--nile-colors-neutral-700);
130
- border-color: var(--nile-colors-neutral-700);
131
- color: var(--nile-colors-white-base);
127
+ background-color: var(--nile-colors-button-primary-disabled);
128
+ border-color: var(--nile-colors-button-primary-disabled);
129
+ color: var(--nile-colors-button-primary-disabled-text);
132
130
  cursor: not-allowed;
133
131
  }
134
132
 
135
133
  .button--standard.button--primary.button--disabled:hover,
136
134
  .button--standard.button--primary.button--disabled:active {
137
- background-color: var(--nile-colors-neutral-700);
138
- border-color: var(--nile-colors-neutral-700);
139
- color: var(--nile-colors-white-base);
140
- box-shadow: none;
135
+ background-color: var(--nile-colors-button-primary-disabled);
136
+ border-color: var(--nile-colors-button-primary-disabled);
137
+ color: var(--nile-colors-button-primary-disabled-text);
138
+ cursor: not-allowed;
141
139
  }
142
140
 
143
141
  /* Tertiary */
144
142
  .button--standard.button--tertiary {
145
- background-color: var(--nile-colors-white-base);
146
- border-color: var(--nile-colors-neutral-500);
147
- color: var(--nile-colors-dark-900);
148
- box-shadow: 0px 2px 4px var(--nile-colors-dark-200);
143
+ background-color: var(--nile-colors-button-tertiary);
144
+ border-color: var(--nile-colors-button-tertiary-border);
145
+ color: var(--nile-colors-button-tertiary-text);
149
146
  }
150
147
 
151
148
  .button--standard.button--tertiary:hover:not(.button--disabled) {
152
- background-color: var(--nile-colors-neutral-100);
149
+ background-color: var(--nile-colors-button-tertiary-hover);
153
150
  border-color: var(--nile-colors-neutral-500);
154
- box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
155
- color: var(--nile-colors-neutral-700);
151
+ color: var(--nile-colors-button-tertiary-text);
156
152
  }
157
153
 
158
154
  .button--standard.button--tertiary:active:not(.button--disabled) {
159
- background-color: var(--nile-colors-neutral-400);
160
- border-color: var(--nile-colors-neutral-700);
161
- color: var(--nile-colors-neutral-700);
162
- }
163
- .button--standard.button--tertiary.button--disabled {
164
- border-color: #e5e9eb;
165
- background-color: var(--nile-colors-white-base);
166
- color: var(--nile-colors-neutral-700);
167
- cursor: not-allowed;
168
- box-shadow: none;
155
+ background-color: var(--nile-colors-button-tertiary-pressed);
156
+ border-color: var(--nile-colors-button-tertiary-pressed-border);
157
+ color: var(--nile-colors-button-tertiary-text);
169
158
  }
170
159
 
160
+ .button--standard.button--tertiary.button--disabled,
171
161
  .button--standard.button--tertiary.button--disabled:hover,
172
162
  .button--standard.button--tertiary.button--disabled:active {
173
- border-color: #e5e9eb;
174
- background-color: var(--nile-colors-white-base);
175
- color: var(--nile-colors-neutral-700);
163
+ border-color: var(--nile-colors-neutral-500);
164
+ background-color: var(--nile-colors-button-tertiary-disabled);
165
+ color: var(--nile-colors-button-tertiary-disabled-text);
166
+ cursor: not-allowed;
176
167
  box-shadow: none;
177
168
  }
178
169
 
179
170
  /* caution */
180
171
  .button--standard.button--caution {
181
- background-color: var(--nile-colors-red-500);
182
- border-color: var(--nile-colors-red-500);
183
- color: var(--nile-colors-white-base);
172
+ background-color: var(--nile-colors-button-caution);
173
+ border-color: var(--nile-colors-button-caution);
174
+ color: var(--nile-colors-button-caution-text);
184
175
  }
176
+
185
177
  .button--standard.button--caution:hover:not(.button--disabled) {
186
- background-color: var(--nile-colors-red-700);
187
- border-color: var(--nile-colors-red-700);
188
- color: var(--nile-colors-white-base);
178
+ background-color: var(--nile-colors-button-caution-hover);
179
+ border-color: var(--nile-colors-button-caution-hover);
180
+ color: var(--nile-colors-button-caution-text);
189
181
  }
190
182
 
191
183
  .button--standard.button--caution:active:not(.button--disabled) {
192
- background-color: var(--nile-colors-red-700);
193
- border-color: var(--nile-colors-red-500);
194
- color: var(--nile-colors-white-base);
195
- }
184
+ background-color: var(--nile-colors-button-caution-pressed);
185
+ border-color: var(--nile-colors-button-caution-pressed);
186
+ color: var(--nile-colors-button-caution-text);
187
+ }
188
+
189
+ .button--standard.button--caution.button--disabled,
190
+ .button--standard.button--caution.button--disabled:hover,
191
+ .button--standard.button--caution.button--disabled:active {
192
+ background-color: var(--nile-colors-button-caution-disabled);
193
+ border-color: var(--nile-colors-button-caution-disabled);
194
+ color: var(--nile-colors-button-caution-disabled-text);
195
+ }
196
+
197
+
198
+ /* Primary Variant - Nile Icon Fill */
199
+ .button--standard.button--primary ::slotted(nile-icon) {
200
+ --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
201
+ }
202
+ .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),
203
+ .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {
204
+ --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
205
+ }
206
+ .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
207
+ --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
208
+ }
209
+
210
+ /* Secondary Variant */
211
+ .button--standard.button--secondary ::slotted(nile-icon) {
212
+ --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
213
+ }
214
+ .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),
215
+ .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {
216
+ --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
217
+ }
218
+ .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
219
+ --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;
220
+ }
221
+
222
+ /* Tertiary Variant */
223
+ .button--standard.button--tertiary ::slotted(nile-icon) {
224
+ --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
225
+ }
226
+ .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),
227
+ .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {
228
+ --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
229
+ }
230
+ .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
231
+ --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
232
+ }
233
+
234
+ /* Caution Variant */
235
+ .button--standard.button--caution ::slotted(nile-icon) {
236
+ --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
237
+ }
238
+ .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),
239
+ .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {
240
+ --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
241
+ }
242
+ .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
243
+ --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
244
+ }
196
245
 
197
246
  /*
198
247
  * Outline buttons
package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-button/nile-button.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkYxB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Button CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-style: solid;\n border-width: 1px;\n font-style: normal;\n font-weight: var(--nile-font-weight-regular);\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-3);\n text-align: center;\n letter-spacing: 0.2px;\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n transition: var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default) border,\n var(--nile-transition-duration-default) box-shadow;\n cursor: inherit;\n padding: var(--nile-spacing-2-x);\n gap: var(--nile-spacing-2-x);\n border-radius: var(--nile-radius-base-standard);\n line-height: var(--nile-type-scale-3);\n box-sizing: border-box;\n height: 38px;\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n\n .button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .button--disabled * {\n pointer-events: none;\n }\n\n .button__label::slotted(nile-icon) {\n /* vertical-align: -2px; */\n }\n\n .button--standard.button--secondary {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-neutral-900);\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500);\n border : none;\n box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n color: var(--nile-colors-neutral-900);\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-900);\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-500);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary.button--disabled:hover,\n .button--standard.button--secondary.button--disabled:active {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-dark-500);\n box-shadow: none;\n }\n\n /* Primary */\n .button--standard.button--primary {\n background-color: var(--nile-colors-primary-600);\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700);\n border-color: var(--nile-colors-primary-700);\n box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700);\n border-color: var(--nile-colors-primary-900);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-neutral-700);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n cursor: not-allowed;\n }\n\n .button--standard.button--primary.button--disabled:hover,\n .button--standard.button--primary.button--disabled:active {\n background-color: var(--nile-colors-neutral-700);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n box-shadow: none;\n }\n\n /* Tertiary */\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n box-shadow: 0px 2px 4px var(--nile-colors-dark-200);\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-100);\n border-color: var(--nile-colors-neutral-500);\n box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-700);\n }\n .button--standard.button--tertiary.button--disabled {\n border-color: #e5e9eb;\n background-color: var(--nile-colors-white-base);\n color: var(--nile-colors-neutral-700);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--tertiary.button--disabled:hover,\n .button--standard.button--tertiary.button--disabled:active {\n border-color: #e5e9eb;\n background-color: var(--nile-colors-white-base);\n color: var(--nile-colors-neutral-700);\n box-shadow: none;\n }\n\n /* caution */\n .button--standard.button--caution {\n background-color: var(--nile-colors-red-500);\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base);\n }\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base);\n }\n\n /*\n * Outline buttons\n */\n\n .button--outline {\n background: none;\n border: solid 2px;\n }\n\n /* Default */\n .button--outline.button--secondary {\n border-color: var(--nile-colors-neutral-300);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--outline.button--secondary:hover:not(.button--disabled),\n .button--outline.button--secondary.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--secondary:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Primary */\n .button--outline.button--primary {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Success */\n .button--outline.button--success {\n border-color: var(--nile-colors-green-600);\n color: var(--nile-colors-green-600);\n }\n\n .button--outline.button--success:hover:not(.button--disabled),\n .button--outline.button--success.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--success:active:not(.button--disabled) {\n border-color: var(--nile-colors-green-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Neutral */\n .button--outline.button--neutral {\n border-color: var(--nile-colors-neutral-600);\n color: var(--nile-colors-neutral-600);\n }\n\n .button--outline.button--neutral:hover:not(.button--disabled),\n .button--outline.button--neutral.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--neutral:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Warning */\n .button--outline.button--warning {\n border-color: var(--nile-colors-orange-600);\n color: var(--nile-colors-orange-600);\n }\n\n .button--outline.button--warning:hover:not(.button--disabled),\n .button--outline.button--warning.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--warning:active:not(.button--disabled) {\n border-color: var(--nile-colors-orange-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Danger */\n .button--outline.button--danger {\n border-color: var(--nile-colors-red-600);\n color: var(--nile-colors-red-600);\n }\n\n .button--outline.button--danger:hover:not(.button--disabled),\n .button--outline.button--danger.button--checked:not(.button--disabled) {\n background-color: var(--nile-colors-red-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n @media (forced-colors: active) {\n .button.button--outline.button--checked:not(.button--disabled) {\n outline: solid 2px transparent;\n }\n }\n\n /*\n * Pill modifier\n */\n\n .button--pill.button--small {\n border-radius: 24px;\n }\n\n .button--pill.button--medium {\n border-radius: 32px;\n }\n\n /*\n * Circle modifier\n */\n\n .button--circle {\n padding-left: 0;\n padding-right: 0;\n }\n\n .button--circle.button--small {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n }\n\n .button--circle.button--medium {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n }\n\n .button--circle .button__prefix,\n .button--circle .button__suffix,\n .button--circle .button__caret {\n display: none;\n }\n\n /* Caret modifier */\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /*\n * Loading modifier\n */\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading nile-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: 1em;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n /*\n * Badges\n */\n\n .button ::slotted(nile-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n`;\n"]}
1
+ {"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmbxB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Button CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-style: solid;\n border-width: 1px;\n font-style: normal;\n font-weight: var(--nile-font-weight-regular);\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-3);\n text-align: center;\n letter-spacing: 0.2px;\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n transition: var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default) border,\n var(--nile-transition-duration-default) box-shadow;\n cursor: inherit;\n padding: var(--nile-spacing-2-x);\n gap: var(--nile-spacing-2-x);\n border-radius: var(--nile-radius-base-standard);\n line-height: var(--nile-type-scale-3);\n box-sizing: border-box;\n height: 38px;\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: 5px auto -webkit-focus-ring-color;\n outline-offset: 2px;\n }\n\n .button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .button--disabled * {\n pointer-events: none;\n }\n\n .button__label::slotted(nile-icon) {\n /* vertical-align: -2px; */\n }\n\n .button--standard.button--secondary {\n background-color: var(--nile-colors-button-secondary);\n border-color: var(--nile-colors-button-secondary-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-secondary-hover);\n border-color: var(--nile-colors-button-secondary-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-secondary-pressed);\n border-color: var(--nile-colors-button-secondary-pressed-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-button-secondary-disabled);\n border-color: var(--nile-colors-button-secondary-disabled-border);\n color: var(--nile-colors-button-secondary-disabled-text);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary.button--disabled:hover,\n .button--standard.button--secondary.button--disabled:active {\n background-color: var(--nile-colors-button-secondary-disabled);\n border-color: var(--nile-colors-button-secondary-disabled-border);\n color: var(--nile-colors-button-secondary-disabled-text);\n cursor: not-allowed;\n }\n\n /* Primary */\n .button--standard.button--primary {\n background-color: var(--nile-colors-button-primary);\n border-color: var(--nile-colors-button-primary-border);\n color: var(--nile-colors-button-primary-text);\n }\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-primary-hover);\n border-color: var(--nile-colors-button-primary-hover);\n color: var(--nile-colors-button-primary-text);\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-primary-pressed);\n border-color: var(--nile-colors-button-primary-pressed);\n color: var(--nile-colors-button-primary-text);\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-button-primary-disabled);\n border-color: var(--nile-colors-button-primary-disabled);\n color: var(--nile-colors-button-primary-disabled-text);\n cursor: not-allowed;\n }\n\n .button--standard.button--primary.button--disabled:hover,\n .button--standard.button--primary.button--disabled:active {\n background-color: var(--nile-colors-button-primary-disabled);\n border-color: var(--nile-colors-button-primary-disabled);\n color: var(--nile-colors-button-primary-disabled-text);\n cursor: not-allowed;\n }\n\n /* Tertiary */\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-button-tertiary);\n border-color: var(--nile-colors-button-tertiary-border);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-hover);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-pressed);\n border-color: var(--nile-colors-button-tertiary-pressed-border);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary.button--disabled,\n .button--standard.button--tertiary.button--disabled:hover,\n .button--standard.button--tertiary.button--disabled:active {\n border-color: var(--nile-colors-neutral-500);\n background-color: var(--nile-colors-button-tertiary-disabled);\n color: var(--nile-colors-button-tertiary-disabled-text);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n /* caution */\n .button--standard.button--caution {\n background-color: var(--nile-colors-button-caution);\n border-color: var(--nile-colors-button-caution);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-caution-hover);\n border-color: var(--nile-colors-button-caution-hover);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-caution-pressed);\n border-color: var(--nile-colors-button-caution-pressed);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution.button--disabled,\n .button--standard.button--caution.button--disabled:hover,\n .button--standard.button--caution.button--disabled:active {\n background-color: var(--nile-colors-button-caution-disabled);\n border-color: var(--nile-colors-button-caution-disabled);\n color: var(--nile-colors-button-caution-disabled-text);\n }\n\n\n /* Primary Variant - Nile Icon Fill */\n .button--standard.button--primary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),\n .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n }\n\n /* Secondary Variant */\n .button--standard.button--secondary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),\n .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;\n }\n\n /* Tertiary Variant */\n .button--standard.button--tertiary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),\n .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;\n }\n\n /* Caution Variant */\n .button--standard.button--caution ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),\n .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n }\n\n /*\n * Outline buttons\n */\n\n .button--outline {\n background: none;\n border: solid 2px;\n }\n\n /* Default */\n .button--outline.button--secondary {\n border-color: var(--nile-colors-neutral-300);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--outline.button--secondary:hover:not(.button--disabled),\n .button--outline.button--secondary.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--secondary:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Primary */\n .button--outline.button--primary {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Success */\n .button--outline.button--success {\n border-color: var(--nile-colors-green-600);\n color: var(--nile-colors-green-600);\n }\n\n .button--outline.button--success:hover:not(.button--disabled),\n .button--outline.button--success.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--success:active:not(.button--disabled) {\n border-color: var(--nile-colors-green-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Neutral */\n .button--outline.button--neutral {\n border-color: var(--nile-colors-neutral-600);\n color: var(--nile-colors-neutral-600);\n }\n\n .button--outline.button--neutral:hover:not(.button--disabled),\n .button--outline.button--neutral.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--neutral:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Warning */\n .button--outline.button--warning {\n border-color: var(--nile-colors-orange-600);\n color: var(--nile-colors-orange-600);\n }\n\n .button--outline.button--warning:hover:not(.button--disabled),\n .button--outline.button--warning.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--warning:active:not(.button--disabled) {\n border-color: var(--nile-colors-orange-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Danger */\n .button--outline.button--danger {\n border-color: var(--nile-colors-red-600);\n color: var(--nile-colors-red-600);\n }\n\n .button--outline.button--danger:hover:not(.button--disabled),\n .button--outline.button--danger.button--checked:not(.button--disabled) {\n background-color: var(--nile-colors-red-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n @media (forced-colors: active) {\n .button.button--outline.button--checked:not(.button--disabled) {\n outline: solid 2px transparent;\n }\n }\n\n /*\n * Pill modifier\n */\n\n .button--pill.button--small {\n border-radius: 24px;\n }\n\n .button--pill.button--medium {\n border-radius: 32px;\n }\n\n /*\n * Circle modifier\n */\n\n .button--circle {\n padding-left: 0;\n padding-right: 0;\n }\n\n .button--circle.button--small {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n }\n\n .button--circle.button--medium {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n }\n\n .button--circle .button__prefix,\n .button--circle .button__suffix,\n .button--circle .button__caret {\n display: none;\n }\n\n /* Caret modifier */\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /*\n * Loading modifier\n */\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading nile-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: 1em;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n /*\n * Badges\n */\n\n .button ::slotted(nile-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n`;\n"]}