@nuralyui/button 0.0.10 → 0.0.12

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 (47) hide show
  1. package/demo/{hy-buttons-demo.d.ts → nr-buttons-demo.d.ts} +3 -3
  2. package/demo/nr-buttons-demo.d.ts.map +1 -0
  3. package/demo/nr-buttons-demo.js +211 -0
  4. package/demo/nr-buttons-demo.js.map +1 -0
  5. package/index.d.ts +1 -1
  6. package/index.js +1 -1
  7. package/index.js.map +1 -1
  8. package/nr-button.component.d.ts +36 -0
  9. package/nr-button.component.d.ts.map +1 -0
  10. package/{hy-button.component.js → nr-button.component.js} +45 -19
  11. package/nr-button.component.js.map +1 -0
  12. package/nr-button.style.d.ts +19 -0
  13. package/nr-button.style.d.ts.map +1 -0
  14. package/{hy-button.style.js → nr-button.style.js} +182 -111
  15. package/nr-button.style.js.map +1 -0
  16. package/nr-button.style.variables.d.ts +11 -0
  17. package/nr-button.style.variables.d.ts.map +1 -0
  18. package/nr-button.style.variables.js +194 -0
  19. package/nr-button.style.variables.js.map +1 -0
  20. package/{hy-button.constants.d.ts → nr-button.types.d.ts} +2 -2
  21. package/nr-button.types.d.ts.map +1 -0
  22. package/nr-button.types.js +2 -0
  23. package/nr-button.types.js.map +1 -0
  24. package/package.json +11 -3
  25. package/react.d.ts +2 -2
  26. package/react.d.ts.map +1 -1
  27. package/react.js +4 -4
  28. package/react.js.map +1 -1
  29. package/test/nr-button_test.d.ts +2 -0
  30. package/test/nr-button_test.d.ts.map +1 -0
  31. package/test/{hy-button_test.js → nr-button_test.js} +15 -15
  32. package/test/nr-button_test.js.map +1 -0
  33. package/demo/hy-buttons-demo.d.ts.map +0 -1
  34. package/demo/hy-buttons-demo.js +0 -211
  35. package/demo/hy-buttons-demo.js.map +0 -1
  36. package/hy-button.component.d.ts +0 -21
  37. package/hy-button.component.d.ts.map +0 -1
  38. package/hy-button.component.js.map +0 -1
  39. package/hy-button.constants.d.ts.map +0 -1
  40. package/hy-button.constants.js +0 -2
  41. package/hy-button.constants.js.map +0 -1
  42. package/hy-button.style.d.ts +0 -2
  43. package/hy-button.style.d.ts.map +0 -1
  44. package/hy-button.style.js.map +0 -1
  45. package/test/hy-button_test.d.ts +0 -2
  46. package/test/hy-button_test.d.ts.map +0 -1
  47. package/test/hy-button_test.js.map +0 -1
package/{hy-button.style.js → nr-button.style.js} RENAMED
@@ -1,17 +1,36 @@
1
1
  import { css } from 'lit';
2
+ import { buttonVariables } from './nr-button.style.variables.js';
3
+ /**
4
+ * Button component styles for the Hybrid UI Library
5
+ *
6
+ * This file contains all the styling for the nr-button component, including:
7
+ * - Base button styles with CSS custom properties for theming
8
+ * - Multiple button variants (primary, secondary, ghost, danger)
9
+ * - Size variations (small, large)
10
+ * - State styles (hover, active, disabled, loading)
11
+ * - Dark theme support
12
+ * - Icon positioning and styling
13
+ * - Responsive design considerations
14
+ *
15
+ * The styling system uses CSS custom properties with fallbacks to allow
16
+ * for both global and local customization of button appearance.
17
+ */
2
18
  const buttonStyles = css `
19
+ /* Container for button content and icon positioning */
3
20
  #container {
4
21
  display: flex;
5
22
  justify-content: center;
6
23
  align-items: center;
7
- width:100%;
8
- height:100%;
24
+ width: 100%;
25
+ height: 100%;
9
26
  }
10
27
 
28
+ /* Icon positioned to the right of text when iconPosition='right' */
11
29
  :host([iconPosition='right']) #container {
12
30
  flex-direction: row-reverse;
13
31
  }
14
32
 
33
+ /* Icon styling within button */
15
34
  hy-icon {
16
35
  display: flex;
17
36
  justify-content: center;
@@ -19,55 +38,104 @@ const buttonStyles = css `
19
38
  padding: 2px;
20
39
  }
21
40
 
41
+ /*
42
+ * Base button element styles
43
+ * Uses CSS custom properties with fallbacks for comprehensive theming support
44
+ * Properties follow the pattern: --hybrid-button-{property}, --hybrid-button-local-{property}
45
+ */
46
+
47
+ /*
48
+ * Base button element styles
49
+ * Uses CSS custom properties with fallbacks for comprehensive theming support
50
+ * Properties follow the pattern: --hybrid-button-{property}, --hybrid-button-local-{property}
51
+ */
22
52
  button {
53
+ /* Dimensions */
23
54
  height: var(--hybrid-button-height,var(--hybrid-button-local-height));
24
55
  width: var(--hybrid-button-width,var(--hybrid-button-local-width));
56
+
57
+ /* Border properties - individual sides for granular control */
25
58
  border-left: var(--hybrid-button-border-left,var(--hybrid-button-local-border-left));
26
59
  border-right: var(--hybrid-button-border-right,var(--hybrid-button-local-border-right));
27
60
  border-top: var(--hybrid-button-border-top,var(--hybrid-button-local-border-top));
28
61
  border-bottom: var(--hybrid-button-border-bottom,var(--hybrid-button-local-border-bottom));
62
+
63
+ /* Border radius - individual corners for design flexibility */
29
64
  border-top-left-radius:var(--hybrid-button-border-top-left-radius,var(--hybrid-button-local-border-top-left-radius)) ;
30
65
  border-top-right-radius: var(--hybrid-button-border-top-right-radius,var(--hybrid-button-local-border-top-right-radius));
31
66
  border-bottom-left-radius: var(--hybrid-button-border-bottom-left-radius,var(--hybrid-button-local-border-bottom-left-radius));
32
67
  border-bottom-right-radius: var(--hybrid-button-border-bottom-right-radius,var(--hybrid-button-local-border-bottom-right-radius));
68
+
69
+ /* Colors */
33
70
  background-color: var(--hybrid-button-background-color,var(--hybrid-button-local-background-color));
34
71
  color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));
72
+
73
+ /* Typography */
35
74
  font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));
36
75
  font-weight: var(--hybrid-button-font-weight,var(--hybrid-button-local-font-weight));
37
76
  text-transform: var(--hybrid-button-text-transform,var(--hybrid-button-local-text-transform));
77
+
78
+ /* Spacing */
38
79
  padding-top: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));
39
- margin-top: var(--hybrid-button-margin-y,var(--hybrid-button-local-margin-y));
80
+ margin-top: var(--hybrid-button-margin-y,var(--hybrid-button-local-margin-y));
40
81
  padding-bottom: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));
41
82
  padding-right: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));
42
83
  padding-left: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));
43
84
  font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));
44
85
  }
86
+
87
+ /* Icon styling within button - inherits text color and size */
45
88
  button hy-icon {
46
89
  --hybrid-icon-color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));
47
90
  --hybrid-icon-width: var(--hybrid-button-icon-width,var(--hybrid-button-local-icon-width));
48
91
  --hybrid-icon-height: var(--hybrid-button-icon-height,var(--hybrid-button-local-icon-height));
49
-
50
92
  }
51
93
 
94
+ /*
95
+ * Hover state styles
96
+ * Applied when button is hovered but not disabled
97
+ */
98
+
99
+ /*
100
+ * Hover state styles
101
+ * Applied when button is hovered but not disabled
102
+ */
52
103
  button:hover:not(:disabled) {
53
104
  cursor: pointer;
54
105
  border-color: var(--hybrid-button-hover-border-color,var(--hybrid-button-local-hover-border-color));
55
106
  background-color: var(--hybrid-button-hover-background-color,var(--hybrid-button-local-hover-background-color));
56
107
  color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));
57
108
  }
109
+
110
+ /* Icon color on hover */
58
111
  button:hover:not(:disabled) hy-icon {
59
112
  --hybrid-icon-color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));
60
113
  }
61
114
 
115
+ /*
116
+ * Active state styles
117
+ * Applied when button is being clicked/pressed but not disabled
118
+ */
62
119
  button:active:not(:disabled) {
63
120
  outline: none;
64
121
  border-color: var(--hybrid-button-active-border-color,var(--hybrid-button-local-active-border-color));
65
122
  color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));
66
123
  }
124
+
125
+ /* Icon color on active state */
67
126
  button:active:not(:disabled) hy-icon {
68
127
  --hybrid-icon-color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));
69
128
  }
70
129
 
130
+ /*
131
+ * Disabled state styles
132
+ * Applied when button is disabled - removes interactivity and applies muted colors
133
+ */
134
+
135
+ /*
136
+ * Disabled state styles
137
+ * Applied when button is disabled - removes interactivity and applies muted colors
138
+ */
71
139
  button:disabled {
72
140
  cursor: auto;
73
141
  background-color: var(--hybrid-button-disabled-background-color,var(--hybrid-button-local-disabled-background-color));
@@ -75,6 +143,13 @@ const buttonStyles = css `
75
143
  border-color: var(--hybrid-button-disabled-border-color,var(--hybrid-button-local-disabled-border-color));
76
144
  }
77
145
 
146
+ /* ========================================
147
+ * SIZE VARIATIONS
148
+ * ======================================== */
149
+
150
+ /* Small button size variant */
151
+
152
+ /* Small button size variant */
78
153
  button[data-size='small'] {
79
154
  padding-top: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));
80
155
  padding-bottom: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));
@@ -83,6 +158,7 @@ const buttonStyles = css `
83
158
  font-size: var(--hybrid-small-button-font-size,var(--hybrid-small-button-local-font-size));
84
159
  }
85
160
 
161
+ /* Large button size variant */
86
162
  button[data-size='large'] {
87
163
  padding-top: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));
88
164
  padding-bottom: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));
@@ -91,9 +167,23 @@ const buttonStyles = css `
91
167
  font-size: var(--hybrid-large-button-font-size,var(--hybrid-large-button-local-font-size));
92
168
  }
93
169
 
170
+ /* ========================================
171
+ * BUTTON STATES
172
+ * ======================================== */
173
+
174
+ /* Loading state - reduces opacity to indicate processing */
94
175
  button[data-state='loading'] {
95
176
  opacity: 0.5;
96
177
  }
178
+
179
+ /* ========================================
180
+ * BUTTON TYPE VARIANTS
181
+ * ======================================== */
182
+
183
+ /* DANGER BUTTON VARIANT */
184
+ /* DANGER BUTTON VARIANT */
185
+
186
+ /* Danger button base styles and icon */
97
187
  button[data-type='danger'] hy-icon {
98
188
  --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));
99
189
  }
@@ -102,15 +192,20 @@ const buttonStyles = css `
102
192
  background-color: var(--hybrid-button-danger-background-color,var(--hybrid-button-local-danger-background-color));
103
193
  color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));
104
194
  }
195
+
196
+ /* Danger button with dashed border variant */
105
197
  button[data-type='danger'].button-dashed {
106
198
  border-color: var(--hybrid-button-danger-dashed-border-color,var(--hybrid-button-local-danger-dashed-border-color));
107
199
  }
200
+
201
+ /* Danger button disabled state */
108
202
  button[data-type='danger']:disabled {
109
203
  border-color: var(--hybrid-button-danger-disabled-border-color,var(--hybrid-button-local-danger-disabled-border-color));
110
204
  background-color: var(--hybrid-button-danger-disabled-background-color,var(--hybrid-button-local-danger-disabled-background-color));
111
205
  color: var(--hybrid-button-danger-disabled-text-color,var(--hybrid-button-local-danger-disabled-text-color));
112
206
  }
113
207
 
208
+ /* Danger button hover state */
114
209
  button[data-type='danger']:hover:not(:disabled) {
115
210
  background-color: var(--hybrid-button-danger-hover-background-color,var(--hybrid-button-local-danger-hover-background-color));
116
211
  border-color: var(--hybrid-button-danger-hover-border-color,var(--hybrid-button-local-danger-hover-border-color));
@@ -120,12 +215,18 @@ const buttonStyles = css `
120
215
  --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));
121
216
  }
122
217
 
218
+ /* Danger button active state */
123
219
  button[data-type='danger']:active:not(:disabled) {
124
220
  background-color: var(--hybrid-button-danger-active-background-color,var(--hybrid-button-local-danger-active-background-color));
125
221
  border-color: var(--hybrid-button-danger-active-border-color,var(--hybrid-button-local-danger-active-border-color));
126
222
  outline: var(--hybrid-button-danger-outline,var(--hybrid-button-local-danger-outline));
127
223
  outline-offset: var(--hybrid-button-danger-outline-offset,var(--hybrid-button-local-danger-outline-offset));
128
224
  }
225
+
226
+ /* PRIMARY BUTTON VARIANT */
227
+ /* PRIMARY BUTTON VARIANT */
228
+
229
+ /* Primary button base styles and icon */
129
230
  button[data-type='primary'] hy-icon {
130
231
  --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));
131
232
  }
@@ -134,16 +235,20 @@ const buttonStyles = css `
134
235
  background-color: var(--hybrid-button-primary-background-color,var(--hybrid-button-local-primary-background-color));
135
236
  color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));
136
237
  }
238
+
239
+ /* Primary button with dashed border variant */
137
240
  button[data-type='primary'].button-dashed {
138
241
  border-color: var(--hybrid-button-primary-dashed-border-color,var(--hybrid-button-local-primary-dashed-border-color));
139
242
  }
140
243
 
244
+ /* Primary button disabled state */
141
245
  button[data-type='primary']:disabled {
142
246
  border-color: var(--hybrid-button-primary-disabled-border-color,var(--hybrid-button-local-primary-disabled-border-color));
143
247
  background-color: var(--hybrid-button-primary-disabled-background-color,var(--hybrid-button-local-primary-disabled-background-color));
144
248
  color: var(--hybrid-button-primary-disabled-text-color,var(--hybrid-button-local-primary-disabled-text-color));
145
249
  }
146
250
 
251
+ /* Primary button hover state */
147
252
  button[data-type='primary']:hover:not(:disabled) {
148
253
  background-color: var(--hybrid-button-primary-hover-background-color,var(--hybrid-button-local-primary-hover-background-color));
149
254
  border-color: var(--hybrid-button-primary-hover-border-color,var(--hybrid-button-local-primary-hover-border-color));
@@ -152,12 +257,19 @@ const buttonStyles = css `
152
257
  button[data-type='primary']:hover:not(:disabled) hy-icon {
153
258
  --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));
154
259
  }
260
+
261
+ /* Primary button active state */
155
262
  button[data-type='primary']:active:not(:disabled) {
156
263
  border-color: var(--hybrid-button-primary-active-border-color,var(--hybrid-button-local-primary-active-border-color));
157
264
  background-color: var(--hybrid-button-primary-active-background-color,var(--hybrid-button-local-primary-active-background-color));
158
265
  outline: var(--hybrid-button-primary-outline,var(--hybrid-button-local-primary-outline));
159
266
  outline-offset: var(--hybrid-button-primary-outline-offset,var(--hybrid-button-local-primary-outline-offset));
160
267
  }
268
+
269
+ /* GHOST BUTTON VARIANT */
270
+ /* GHOST BUTTON VARIANT */
271
+
272
+ /* Ghost button base styles and icon */
161
273
  button[data-type='ghost'] hy-icon {
162
274
  --hybrid-icon-color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));
163
275
  }
@@ -166,15 +278,20 @@ const buttonStyles = css `
166
278
  color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));
167
279
  border-color: var(--hybrid-button-ghost-border-color,var(--hybrid-button-local-ghost-border-color));
168
280
  }
281
+
282
+ /* Ghost button with dashed border variant */
169
283
  button[data-type='ghost'].button-dashed {
170
284
  border-color: var(--hybrid-button-ghost-dashed-border-color,var(--hybrid-button-local-ghost-dashed-border-color));
171
285
  }
286
+
287
+ /* Ghost button disabled state */
172
288
  button[data-type='ghost']:disabled {
173
289
  background-color: var(--hybrid-button-ghost-disabled-background-color,var(--hybrid-button-local-ghost-disabled-background-color));
174
290
  color: var(--hybrid-button-ghost-disabled-text-color,var(--hybrid-button-local-ghost-disabled-text-color));
175
291
  border-color: var(--hybrid-button-ghost-disabled-border-color,var(--hybrid-button-local-ghost-disabled-border-color));
176
292
  }
177
293
 
294
+ /* Ghost button hover state */
178
295
  button[data-type='ghost']:hover:not(:disabled) {
179
296
  background-color: var(--hybrid-button-ghost-hover-background-color,var(--hybrid-button-local-ghost-hover-background-color));
180
297
  color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));
@@ -183,10 +300,17 @@ const buttonStyles = css `
183
300
  button[data-type='ghost']:hover:not(:disabled) hy-icon {
184
301
  --hybrid-icon-color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));
185
302
  }
303
+
304
+ /* Ghost button active state */
186
305
  button[data-type='ghost']:active:not(:disabled) {
187
306
  background-color: var(--hybrid-button-ghost-active-background-color,var(--hybrid-button-local-ghost-active-background-color));
188
307
  border-color: var(--hybrid-button-ghost-active-border-color,var(--hybrid-button-local-ghost-active-border-color));
189
308
  }
309
+
310
+ /* SECONDARY BUTTON VARIANT */
311
+ /* SECONDARY BUTTON VARIANT */
312
+
313
+ /* Secondary button base styles and icon */
190
314
  button[data-type='secondary'] hy-icon {
191
315
  --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));
192
316
  }
@@ -195,14 +319,20 @@ const buttonStyles = css `
195
319
  color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));
196
320
  border-color: var(--hybrid-button-secondary-border-color,var(--hybrid-button-local-secondary-border-color));
197
321
  }
322
+
323
+ /* Secondary button with dashed border variant */
198
324
  button[data-type='secondary'].button-dashed {
199
325
  border-color: var(--hybrid-button-secondary-dashed-border-color,var(--hybrid-button-local-secondary-dashed-border-color));
200
326
  }
327
+
328
+ /* Secondary button disabled state */
201
329
  button[data-type='secondary']:disabled {
202
330
  background-color: var(--hybrid-button-secondary-disabled-background-color,var(--hybrid-button-local-secondary-disabled-background-color));
203
331
  color: var(--hybrid-button-secondary-disabled-text-color,var(--hybrid-button-local-secondary-disabled-text-color));
204
332
  border-color: var(--hybrid-button-secondary-disabled-border-color,var(--hybrid-button-local-secondary-disabled-border-color));
205
333
  }
334
+
335
+ /* Secondary button hover state */
206
336
  button[data-type='secondary']:hover:not(:disabled) {
207
337
  background-color: var(--hybrid-button-secondary-hover-background-color,var(--hybrid-button-local-secondary-hover-background-color));
208
338
  color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));
@@ -212,119 +342,43 @@ const buttonStyles = css `
212
342
  --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));
213
343
  }
214
344
 
345
+ /* Secondary button active state */
215
346
  button[data-type='secondary']:active:not(:disabled) {
216
347
  background-color: var(--hybrid-button-secondary-active-background-color,var(--hybrid-button-local-secondary-active-background-color));
217
348
  border-color: var(--hybrid-button-secondary-active-border-color,var(--hybrid-button-local-secondary-active-border-color));
218
349
  outline: var(--hybrid-button-secondary-outline,var(--hybrid-button-local-secondary-outline));
219
350
  outline-offset: var(--hybrid-button-secondary-outline-offset,var(--hybrid-button-local-secondary-outline-offset));
220
351
  }
352
+
353
+ /* ========================================
354
+ * UTILITY CLASSES
355
+ * ======================================== */
356
+
357
+ /* Dashed border style modifier */
221
358
  .button-dashed {
222
359
  border-style: dashed;
223
360
  }
224
- :host {
225
- /* Default Button Style */
226
- --hybrid-button-local-border-top: 2px solid #d0d0d0;
227
- --hybrid-button-local-border-bottom: 2px solid #d0d0d0;
228
- --hybrid-button-local-border-left: 2px solid #d0d0d0;
229
- --hybrid-button-local-border-right: 2px solid #d0d0d0;
230
- --hybrid-button-local-border-top-left-radius: 0px;
231
- --hybrid-button-local-border-top-right-radius: 0px;
232
- --hybrid-button-local-border-bottom-left-radius: 0px;
233
- --hybrid-button-local-border-bottom-right-radius: 0px;
234
- --hybrid-button-local-background-color: #f9f9f9;
235
- --hybrid-button-local-text-color: #393939;
236
- --hybrid-button-local-hover-border-color: #1677ff;
237
- --hybrid-button-local-hover-color: #1677ff;
238
- --hybrid-button-local-font-size: 0.9rem;
239
- --hybrid-button-local-font-weight: normal;
240
- --hybrid-button-local-text-transform: none;
241
- --hybrid-button-local-active-border-color: #1661b1;
242
- --hybrid-button-local-active-color: #184d86;
243
- --hybrid-button-local-disabled-background-color: #c6c6c6;
244
- --hybrid-button-local-disabled-text-color: #8d8d8d;
245
- --hybrid-button-local-disabled-border-color: #bbb;
246
- --hybrid-button-local-height: auto;
247
- --hybrid-button-local-width: auto;
248
- --hybrid-button-local-padding-y: 0.5rem;
249
- --hybrid-button-local-padding-x: 0.6rem;
250
- --hybrid-button-local-icon-width:18px;
251
- --hybrid-button-local-icon-height:14px;
252
-
253
- /* Primary Button Style */
254
- --hybrid-button-local-primary-border-color: #0f62fe;
255
- --hybrid-button-local-primary-background-color: #0f62fe;
256
- --hybrid-button-local-primary-text-color: #ffffff;
257
- --hybrid-button-local-primary-outline: 1px solid white;
258
- --hybrid-button-local-primary-outline-offset: -3px;
259
- --hybrid-button-local-primary-hover-background-color: #0353e9;
260
- --hybrid-button-local-primary-hover-border-color: #0353e9;
261
- --hybrid-button-local-primary-active-background-color: #0f62fe;
262
- --hybrid-button-local-primary-active-border-color: #0f62fe;
263
- --hybrid-button-local-primary-disabled-text-color: #8d8d8d;
264
- --hybrid-button-local-primary-disabled-background-color: #c6c6c6;
265
- --hybrid-button-local-primary-disabled-border-color: #c6c6c6;
266
- --hybrid-button-local-primary-dashed-border-color: #ffffff;
267
-
268
- /* Danger button style */
269
- --hybrid-button-local-danger-background-color: #da1e28;
270
- --hybrid-button-local-danger-text-color: #ffffff;
271
- --hybrid-button-local-danger-border-color: #da1e28;
272
- --hybrid-button-local-danger-outline: 1px solid white;
273
- --hybrid-button-local-danger-outline-offset: -3px;
274
- --hybrid-button-local-danger-hover-background-color: #ba1b23;
275
- --hybrid-button-local-danger-hover-border-color: #ba1b23;
276
- --hybrid-button-local-danger-active-background-color: #da1e28;
277
- --hybrid-button-local-danger-active-border-color: #0f62fe;
278
- --hybrid-button-local-danger-disabled-background-color: #c6c6c6;
279
- --hybrid-button-local-danger-disabled-text-color: #8d8d8d;
280
- --hybrid-button-local-danger-disabled-border-color: #c6c6c6;
281
- --hybrid-button-local-danger-dashed-border-color: #ffffff;
282
-
283
- /* Ghost button style */
284
- --hybrid-button-local-ghost-background-color: #ffffff;
285
- --hybrid-button-local-ghost-text-color: #0f62fe;
286
- --hybrid-button-local-ghost-border-color: #ffffff;
287
- --hybrid-button-local-ghost-active-background-color: #ffffff;
288
- --hybrid-button-local-ghost-active-text-color: #054ada;
289
- --hybrid-button-local-ghost-active-border-color: #0f62fe;
290
- --hybrid-button-local-ghost-hover-background-color: #e5e5e5;
291
- --hybrid-button-local-ghost-hover-border-color: #e5e5e5;
292
- --hybrid-button-local-ghost-hover-text-color: #054ada;
293
- --hybrid-button-local-ghost-disabled-background-color: #ffffff;
294
- --hybrid-button-local-ghost-disabled-text-color: #c6c6c6;
295
- --hybrid-button-local-ghost-disabled-border-color: #ffffff;
296
- --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;
297
-
298
- /* Secondary button style */
299
361
 
300
- --hybrid-button-local-secondary-background-color: #393939;
301
- --hybrid-button-local-secondary-border-color: #393939;
302
- --hybrid-button-local-secondary-text-color: #ffffff;
303
- --hybrid-button-local-secondary-outline: 1px solid white;
304
- --hybrid-button-local-secondary-outline-offset: -3px;
305
- --hybrid-button-local-secondary-hover-background-color: #4c4c4c;
306
- --hybrid-button-local-secondary-hover-border-color: #4c4c4c;
307
- --hybrid-button-local-secondary-active-background-color: #393939;
308
- --hybrid-button-local-secondary-active-border-color: #0f62fe;
309
- --hybrid-button-local-secondary-disabled-background-color: #c6c6c6;
310
- --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;
311
- --hybrid-button-local-secondary-disabled-border-color: #c6c6c6;
312
- --hybrid-button-local-secondary-dashed-border-color: #ffffff;
313
-
314
- /* Sizes */
315
-
316
- --hybrid-large-button-local-padding-y: 0.5rem;
317
- --hybrid-large-button-local-padding-x: 0.9rem;
318
- --hybrid-large-button-local-font-size: 1rem;
319
-
320
- --hybrid-small-button-local-padding-y: 0.5rem;
321
- --hybrid-small-button-local-padding-x: 0.4rem;
322
- --hybrid-small-button-local-font-size: 0.7rem;
323
- }
362
+ /* ========================================
363
+ * VARIANT STYLES
364
+ * ======================================== */
324
365
 
325
- /* Dark theme styles using data-theme attribute on button element */
326
- button[data-theme="dark"] {
366
+ /* Primary button variant */
327
367
 
368
+ /* ========================================
369
+ * DARK THEME OVERRIDES
370
+ * ======================================== */
371
+
372
+ /**
373
+ * Dark theme styles using data-theme attribute on button element
374
+ * These override the light theme defaults when data-theme="dark" is applied
375
+ */
376
+ /**
377
+ * Dark theme styles using data-theme attribute on button element
378
+ * These override the light theme defaults when data-theme="dark" is applied
379
+ */
380
+ button[data-theme="dark"] {
381
+ /* Default button dark theme overrides */
328
382
  --hybrid-button-local-background-color: #000000;
329
383
  --hybrid-button-local-text-color: #ffffff;
330
384
  --hybrid-button-local-hover-border-color: #6f6f6f;
@@ -333,7 +387,7 @@ const buttonStyles = css `
333
387
  --hybrid-button-local-active-color: #c6c6c6;
334
388
  --hybrid-button-local-disabled-background-color: #c6c6c6;
335
389
 
336
- /* Primary button style */
390
+ /* Primary button dark theme overrides */
337
391
  --hybrid-button-local-primary-outline: 1px solid black;
338
392
  --hybrid-button-local-primary-outline-offset: -3px;
339
393
  --hybrid-button-local-primary-active-border-color: #ffffff;
@@ -341,7 +395,7 @@ const buttonStyles = css `
341
395
  --hybrid-button-local-primary-disabled-background-color: #8d8d8d;
342
396
  --hybrid-button-local-primary-disabled-border-color: #8d8d8d;
343
397
 
344
- /* Secondary button style */
398
+ /* Secondary button dark theme overrides */
345
399
  --hybrid-button-local-secondary-background-color: #6f6f6f;
346
400
  --hybrid-button-local-secondary-border-color: #6f6f6f;
347
401
  --hybrid-button-local-secondary-text-color: #ffffff;
@@ -356,7 +410,7 @@ const buttonStyles = css `
356
410
  --hybrid-button-local-secondary-disabled-border-color: #6f6f6f;
357
411
  --hybrid-button-local-secondary-dashed-border-color: #ffffff;
358
412
 
359
- /* Ghost button style */
413
+ /* Ghost button dark theme overrides */
360
414
  --hybrid-button-local-ghost-background-color: transparent;
361
415
  --hybrid-button-local-ghost-text-color: #78a9ff;
362
416
  --hybrid-button-local-ghost-border-color: transparent;
@@ -371,7 +425,7 @@ const buttonStyles = css `
371
425
  --hybrid-button-local-ghost-disabled-border-color: transparent;
372
426
  --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;
373
427
 
374
- /* Danger button style */
428
+ /* Danger button dark theme overrides */
375
429
  --hybrid-button-local-danger-outline: 1px solid #000000;
376
430
  --hybrid-button-local-danger-outline-offset: -3px;
377
431
  --hybrid-button-local-danger-hover-background-color: #ba1b23;
@@ -384,5 +438,22 @@ const buttonStyles = css `
384
438
  --hybrid-button-local-danger-dashed-border-color: #ffffff;
385
439
  }
386
440
  `;
387
- export const styles = [buttonStyles];
388
- //# sourceMappingURL=hy-button.style.js.map
441
+ /**
442
+ * Exported styles for the nr-button component
443
+ *
444
+ * @description
445
+ * This export provides the complete styling system for the button component,
446
+ * including all variants, states, sizes, theme support, and CSS custom properties.
447
+ *
448
+ * @usage
449
+ * Import and use in the component's styles property:
450
+ * ```typescript
451
+ * import { styles } from './nr-button.style.ts';
452
+ *
453
+ * @Component({
454
+ * styles: styles
455
+ * })
456
+ * ```
457
+ */
458
+ export const styles = [buttonStyles, buttonVariables];
459
+ //# sourceMappingURL=nr-button.style.js.map
package/nr-button.style.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nr-button.style.js","sourceRoot":"","sources":["../../../src/components/button/nr-button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE;;;;;;;;;;;;;;GAcG;AACH,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsavB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { buttonVariables } from './nr-button.style.variables.js';\n\n/**\n * Button component styles for the Hybrid UI Library\n * \n * This file contains all the styling for the nr-button component, including:\n * - Base button styles with CSS custom properties for theming\n * - Multiple button variants (primary, secondary, ghost, danger)\n * - Size variations (small, large)\n * - State styles (hover, active, disabled, loading)\n * - Dark theme support\n * - Icon positioning and styling\n * - Responsive design considerations\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of button appearance.\n */\nconst buttonStyles = css`\n /* Container for button content and icon positioning */\n #container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n\n /* Icon positioned to the right of text when iconPosition='right' */\n :host([iconPosition='right']) #container {\n flex-direction: row-reverse;\n }\n\n /* Icon styling within button */\n hy-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 2px;\n }\n\n /* \n * Base button element styles\n * Uses CSS custom properties with fallbacks for comprehensive theming support\n * Properties follow the pattern: --hybrid-button-{property}, --hybrid-button-local-{property}\n */\n\n /* \n * Base button element styles\n * Uses CSS custom properties with fallbacks for comprehensive theming support\n * Properties follow the pattern: --hybrid-button-{property}, --hybrid-button-local-{property}\n */\n button {\n /* Dimensions */\n height: var(--hybrid-button-height,var(--hybrid-button-local-height));\n width: var(--hybrid-button-width,var(--hybrid-button-local-width));\n \n /* Border properties - individual sides for granular control */\n border-left: var(--hybrid-button-border-left,var(--hybrid-button-local-border-left));\n border-right: var(--hybrid-button-border-right,var(--hybrid-button-local-border-right));\n border-top: var(--hybrid-button-border-top,var(--hybrid-button-local-border-top));\n border-bottom: var(--hybrid-button-border-bottom,var(--hybrid-button-local-border-bottom));\n \n /* Border radius - individual corners for design flexibility */\n border-top-left-radius:var(--hybrid-button-border-top-left-radius,var(--hybrid-button-local-border-top-left-radius)) ;\n border-top-right-radius: var(--hybrid-button-border-top-right-radius,var(--hybrid-button-local-border-top-right-radius));\n border-bottom-left-radius: var(--hybrid-button-border-bottom-left-radius,var(--hybrid-button-local-border-bottom-left-radius));\n border-bottom-right-radius: var(--hybrid-button-border-bottom-right-radius,var(--hybrid-button-local-border-bottom-right-radius));\n \n /* Colors */\n background-color: var(--hybrid-button-background-color,var(--hybrid-button-local-background-color));\n color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));\n \n /* Typography */\n font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));\n font-weight: var(--hybrid-button-font-weight,var(--hybrid-button-local-font-weight));\n text-transform: var(--hybrid-button-text-transform,var(--hybrid-button-local-text-transform));\n \n /* Spacing */\n padding-top: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));\n margin-top: var(--hybrid-button-margin-y,var(--hybrid-button-local-margin-y));\n padding-bottom: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));\n padding-right: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));\n padding-left: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));\n font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));\n }\n \n /* Icon styling within button - inherits text color and size */\n button hy-icon {\n --hybrid-icon-color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));\n --hybrid-icon-width: var(--hybrid-button-icon-width,var(--hybrid-button-local-icon-width));\n --hybrid-icon-height: var(--hybrid-button-icon-height,var(--hybrid-button-local-icon-height));\n }\n\n /* \n * Hover state styles\n * Applied when button is hovered but not disabled\n */\n\n /* \n * Hover state styles\n * Applied when button is hovered but not disabled\n */\n button:hover:not(:disabled) {\n cursor: pointer;\n border-color: var(--hybrid-button-hover-border-color,var(--hybrid-button-local-hover-border-color));\n background-color: var(--hybrid-button-hover-background-color,var(--hybrid-button-local-hover-background-color));\n color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));\n }\n \n /* Icon color on hover */\n button:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));\n }\n\n /* \n * Active state styles\n * Applied when button is being clicked/pressed but not disabled\n */\n button:active:not(:disabled) {\n outline: none;\n border-color: var(--hybrid-button-active-border-color,var(--hybrid-button-local-active-border-color));\n color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));\n }\n \n /* Icon color on active state */\n button:active:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));\n }\n\n /* \n * Disabled state styles\n * Applied when button is disabled - removes interactivity and applies muted colors\n */\n\n /* \n * Disabled state styles\n * Applied when button is disabled - removes interactivity and applies muted colors\n */\n button:disabled {\n cursor: auto;\n background-color: var(--hybrid-button-disabled-background-color,var(--hybrid-button-local-disabled-background-color));\n color: var(--hybrid-button-disabled-text-color,var(--hybrid-button-local-disabled-text-color));\n border-color: var(--hybrid-button-disabled-border-color,var(--hybrid-button-local-disabled-border-color));\n }\n\n /* ========================================\n * SIZE VARIATIONS\n * ======================================== */\n\n /* Small button size variant */\n\n /* Small button size variant */\n button[data-size='small'] {\n padding-top: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));\n padding-bottom: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));\n padding-right: var(--hybrid-small-button-padding-x,var(--hybrid-small-button-local-padding-x));\n padding-left: var(--hybrid-small-button-padding-x,var(--hybrid-small-button-local-padding-x));\n font-size: var(--hybrid-small-button-font-size,var(--hybrid-small-button-local-font-size));\n }\n\n /* Large button size variant */\n button[data-size='large'] {\n padding-top: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));\n padding-bottom: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));\n padding-right: var(--hybrid-large-button-padding-x,var(--hybrid-large-button-local-padding-x));\n padding-left: var(--hybrid-large-button-padding-x,var(--hybrid-large-button-local-padding-x));\n font-size: var(--hybrid-large-button-font-size,var(--hybrid-large-button-local-font-size));\n }\n\n /* ========================================\n * BUTTON STATES\n * ======================================== */\n\n /* Loading state - reduces opacity to indicate processing */\n button[data-state='loading'] {\n opacity: 0.5;\n }\n\n /* ========================================\n * BUTTON TYPE VARIANTS\n * ======================================== */\n\n /* DANGER BUTTON VARIANT */\n /* DANGER BUTTON VARIANT */\n \n /* Danger button base styles and icon */\n button[data-type='danger'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n button[data-type='danger'] {\n border-color: var(--hybrid-button-danger-border-color,var(--hybrid-button-local-danger-border-color));\n background-color: var(--hybrid-button-danger-background-color,var(--hybrid-button-local-danger-background-color));\n color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n \n /* Danger button with dashed border variant */\n button[data-type='danger'].button-dashed {\n border-color: var(--hybrid-button-danger-dashed-border-color,var(--hybrid-button-local-danger-dashed-border-color));\n }\n \n /* Danger button disabled state */\n button[data-type='danger']:disabled {\n border-color: var(--hybrid-button-danger-disabled-border-color,var(--hybrid-button-local-danger-disabled-border-color));\n background-color: var(--hybrid-button-danger-disabled-background-color,var(--hybrid-button-local-danger-disabled-background-color));\n color: var(--hybrid-button-danger-disabled-text-color,var(--hybrid-button-local-danger-disabled-text-color));\n }\n\n /* Danger button hover state */\n button[data-type='danger']:hover:not(:disabled) {\n background-color: var(--hybrid-button-danger-hover-background-color,var(--hybrid-button-local-danger-hover-background-color));\n border-color: var(--hybrid-button-danger-hover-border-color,var(--hybrid-button-local-danger-hover-border-color));\n color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n button[data-type='danger']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n\n /* Danger button active state */\n button[data-type='danger']:active:not(:disabled) {\n background-color: var(--hybrid-button-danger-active-background-color,var(--hybrid-button-local-danger-active-background-color));\n border-color: var(--hybrid-button-danger-active-border-color,var(--hybrid-button-local-danger-active-border-color));\n outline: var(--hybrid-button-danger-outline,var(--hybrid-button-local-danger-outline));\n outline-offset: var(--hybrid-button-danger-outline-offset,var(--hybrid-button-local-danger-outline-offset));\n }\n\n /* PRIMARY BUTTON VARIANT */\n /* PRIMARY BUTTON VARIANT */\n \n /* Primary button base styles and icon */\n button[data-type='primary'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n button[data-type='primary'] {\n border-color: var(--hybrid-button-primary-border-color,var(--hybrid-button-local-primary-border-color));\n background-color: var(--hybrid-button-primary-background-color,var(--hybrid-button-local-primary-background-color));\n color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n \n /* Primary button with dashed border variant */\n button[data-type='primary'].button-dashed {\n border-color: var(--hybrid-button-primary-dashed-border-color,var(--hybrid-button-local-primary-dashed-border-color));\n }\n\n /* Primary button disabled state */\n button[data-type='primary']:disabled {\n border-color: var(--hybrid-button-primary-disabled-border-color,var(--hybrid-button-local-primary-disabled-border-color));\n background-color: var(--hybrid-button-primary-disabled-background-color,var(--hybrid-button-local-primary-disabled-background-color));\n color: var(--hybrid-button-primary-disabled-text-color,var(--hybrid-button-local-primary-disabled-text-color));\n }\n\n /* Primary button hover state */\n button[data-type='primary']:hover:not(:disabled) {\n background-color: var(--hybrid-button-primary-hover-background-color,var(--hybrid-button-local-primary-hover-background-color));\n border-color: var(--hybrid-button-primary-hover-border-color,var(--hybrid-button-local-primary-hover-border-color));\n color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n button[data-type='primary']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n \n /* Primary button active state */\n button[data-type='primary']:active:not(:disabled) {\n border-color: var(--hybrid-button-primary-active-border-color,var(--hybrid-button-local-primary-active-border-color));\n background-color: var(--hybrid-button-primary-active-background-color,var(--hybrid-button-local-primary-active-background-color));\n outline: var(--hybrid-button-primary-outline,var(--hybrid-button-local-primary-outline));\n outline-offset: var(--hybrid-button-primary-outline-offset,var(--hybrid-button-local-primary-outline-offset));\n }\n\n /* GHOST BUTTON VARIANT */\n /* GHOST BUTTON VARIANT */\n \n /* Ghost button base styles and icon */\n button[data-type='ghost'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));\n }\n button[data-type='ghost'] {\n background-color: var(--hybrid-button-ghost-background-color,var(--hybrid-button-local-ghost-background-color));\n color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));\n border-color: var(--hybrid-button-ghost-border-color,var(--hybrid-button-local-ghost-border-color));\n }\n \n /* Ghost button with dashed border variant */\n button[data-type='ghost'].button-dashed {\n border-color: var(--hybrid-button-ghost-dashed-border-color,var(--hybrid-button-local-ghost-dashed-border-color));\n }\n \n /* Ghost button disabled state */\n button[data-type='ghost']:disabled {\n background-color: var(--hybrid-button-ghost-disabled-background-color,var(--hybrid-button-local-ghost-disabled-background-color));\n color: var(--hybrid-button-ghost-disabled-text-color,var(--hybrid-button-local-ghost-disabled-text-color));\n border-color: var(--hybrid-button-ghost-disabled-border-color,var(--hybrid-button-local-ghost-disabled-border-color));\n }\n\n /* Ghost button hover state */\n button[data-type='ghost']:hover:not(:disabled) {\n background-color: var(--hybrid-button-ghost-hover-background-color,var(--hybrid-button-local-ghost-hover-background-color));\n color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));\n border-color: var(--hybrid-button-local-ghost-hover-border-color,var(--hybrid-button-local-ghost-hover-border-color));\n }\n button[data-type='ghost']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));\n }\n \n /* Ghost button active state */\n button[data-type='ghost']:active:not(:disabled) {\n background-color: var(--hybrid-button-ghost-active-background-color,var(--hybrid-button-local-ghost-active-background-color));\n border-color: var(--hybrid-button-ghost-active-border-color,var(--hybrid-button-local-ghost-active-border-color));\n }\n\n /* SECONDARY BUTTON VARIANT */\n /* SECONDARY BUTTON VARIANT */\n \n /* Secondary button base styles and icon */\n button[data-type='secondary'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n }\n button[data-type='secondary'] {\n background-color: var(--hybrid-button-secondary-background-color,var(--hybrid-button-local-secondary-background-color));\n color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n border-color: var(--hybrid-button-secondary-border-color,var(--hybrid-button-local-secondary-border-color));\n }\n \n /* Secondary button with dashed border variant */\n button[data-type='secondary'].button-dashed {\n border-color: var(--hybrid-button-secondary-dashed-border-color,var(--hybrid-button-local-secondary-dashed-border-color));\n }\n \n /* Secondary button disabled state */\n button[data-type='secondary']:disabled {\n background-color: var(--hybrid-button-secondary-disabled-background-color,var(--hybrid-button-local-secondary-disabled-background-color));\n color: var(--hybrid-button-secondary-disabled-text-color,var(--hybrid-button-local-secondary-disabled-text-color));\n border-color: var(--hybrid-button-secondary-disabled-border-color,var(--hybrid-button-local-secondary-disabled-border-color));\n }\n \n /* Secondary button hover state */\n button[data-type='secondary']:hover:not(:disabled) {\n background-color: var(--hybrid-button-secondary-hover-background-color,var(--hybrid-button-local-secondary-hover-background-color));\n color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n border-color: var(--hybrid-button-secondary-hover-border-color,var(--hybrid-button-local-secondary-hover-border-color));\n }\n button[data-type='secondary']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n }\n\n /* Secondary button active state */\n button[data-type='secondary']:active:not(:disabled) {\n background-color: var(--hybrid-button-secondary-active-background-color,var(--hybrid-button-local-secondary-active-background-color));\n border-color: var(--hybrid-button-secondary-active-border-color,var(--hybrid-button-local-secondary-active-border-color));\n outline: var(--hybrid-button-secondary-outline,var(--hybrid-button-local-secondary-outline));\n outline-offset: var(--hybrid-button-secondary-outline-offset,var(--hybrid-button-local-secondary-outline-offset));\n }\n\n /* ========================================\n * UTILITY CLASSES\n * ======================================== */\n\n /* Dashed border style modifier */\n .button-dashed {\n border-style: dashed;\n }\n\n /* ========================================\n * VARIANT STYLES\n * ======================================== */\n\n /* Primary button variant */\n\n /* ========================================\n * DARK THEME OVERRIDES\n * ======================================== */\n \n /**\n * Dark theme styles using data-theme attribute on button element\n * These override the light theme defaults when data-theme=\"dark\" is applied\n */\n /**\n * Dark theme styles using data-theme attribute on button element\n * These override the light theme defaults when data-theme=\"dark\" is applied\n */\n button[data-theme=\"dark\"] {\n /* Default button dark theme overrides */\n --hybrid-button-local-background-color: #000000;\n --hybrid-button-local-text-color: #ffffff;\n --hybrid-button-local-hover-border-color: #6f6f6f;\n --hybrid-button-local-hover-color: #6f6f6f;\n --hybrid-button-local-active-border-color: #c6c6c6;\n --hybrid-button-local-active-color: #c6c6c6;\n --hybrid-button-local-disabled-background-color: #c6c6c6;\n\n /* Primary button dark theme overrides */\n --hybrid-button-local-primary-outline: 1px solid black;\n --hybrid-button-local-primary-outline-offset: -3px;\n --hybrid-button-local-primary-active-border-color: #ffffff;\n --hybrid-button-local-primary-disabled-text-color: #c6c6c6;\n --hybrid-button-local-primary-disabled-background-color: #8d8d8d;\n --hybrid-button-local-primary-disabled-border-color: #8d8d8d;\n\n /* Secondary button dark theme overrides */\n --hybrid-button-local-secondary-background-color: #6f6f6f;\n --hybrid-button-local-secondary-border-color: #6f6f6f;\n --hybrid-button-local-secondary-text-color: #ffffff;\n --hybrid-button-local-secondary-active-border-color: #ffffff;\n --hybrid-button-local-secondary-active-background-color: #6f6f6f;\n --hybrid-button-local-secondary-outline: 1px solid black;\n --hybrid-button-local-secondary-outline-offset: -3px;\n --hybrid-button-local-secondary-hover-background-color: #606060;\n --hybrid-button-local-secondary-hover-border-color: #606060;\n --hybrid-button-local-secondary-disabled-background-color: #6f6f6f;\n --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;\n --hybrid-button-local-secondary-disabled-border-color: #6f6f6f;\n --hybrid-button-local-secondary-dashed-border-color: #ffffff;\n\n /* Ghost button dark theme overrides */\n --hybrid-button-local-ghost-background-color: transparent;\n --hybrid-button-local-ghost-text-color: #78a9ff;\n --hybrid-button-local-ghost-border-color: transparent;\n --hybrid-button-local-ghost-active-background-color: transparent;\n --hybrid-button-local-ghost-active-text-color: #a6c8ff;\n --hybrid-button-local-ghost-active-border-color: #ffffff;\n --hybrid-button-local-ghost-hover-background-color: #4c4c4c;\n --hybrid-button-local-ghost-hover-border-color: #4c4c4c;\n --hybrid-button-local-ghost-hover-text-color: #a6c8ff;\n --hybrid-button-local-ghost-disabled-background-color: transparent;\n --hybrid-button-local-ghost-disabled-text-color: #6f6f6f;\n --hybrid-button-local-ghost-disabled-border-color: transparent;\n --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;\n\n /* Danger button dark theme overrides */\n --hybrid-button-local-danger-outline: 1px solid #000000;\n --hybrid-button-local-danger-outline-offset: -3px;\n --hybrid-button-local-danger-hover-background-color: #ba1b23;\n --hybrid-button-local-danger-hover-border-color: #ba1b23;\n --hybrid-button-local-danger-active-background-color: #da1e28;\n --hybrid-button-local-danger-active-border-color: #ffffff;\n --hybrid-button-local-danger-disabled-background-color: #6f6f6f;\n --hybrid-button-local-danger-disabled-text-color: #8d8d8d;\n --hybrid-button-local-danger-disabled-border-color: #6f6f6f;\n --hybrid-button-local-danger-dashed-border-color: #ffffff;\n }\n`;\n\n/**\n * Exported styles for the nr-button component\n * \n * @description\n * This export provides the complete styling system for the button component,\n * including all variants, states, sizes, theme support, and CSS custom properties.\n * \n * @usage\n * Import and use in the component's styles property:\n * ```typescript\n * import { styles } from './nr-button.style.ts';\n * \n * @Component({\n * styles: styles\n * })\n * ```\n */\nexport const styles = [buttonStyles, buttonVariables];\n"]}
package/nr-button.style.variables.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Button component CSS custom properties (design tokens)
3
+ *
4
+ * This file contains all the CSS custom properties used by the nr-button component,
5
+ * organized by functionality and including both light and dark theme variants.
6
+ *
7
+ * The styling system uses CSS custom properties with fallbacks to allow
8
+ * for both global and local customization of button appearance.
9
+ */
10
+ export declare const buttonVariables: import("lit").CSSResult;
11
+ //# sourceMappingURL=nr-button.style.variables.d.ts.map
package/nr-button.style.variables.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nr-button.style.variables.d.ts","sourceRoot":"","sources":["../../../src/components/button/nr-button.style.variables.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,yBAsL3B,CAAC"}