@nuralyui/button 0.0.14 → 0.0.16

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 (43) hide show
  1. package/bundle.js +619 -0
  2. package/button.component.d.ts +64 -25
  3. package/button.component.js +136 -52
  4. package/button.component.js.map +1 -1
  5. package/button.style.d.ts +6 -15
  6. package/button.style.js +406 -545
  7. package/button.style.js.map +1 -1
  8. package/button.types.d.ts +38 -2
  9. package/button.types.js.map +1 -1
  10. package/package.json +29 -2
  11. package/button.component.d.ts.map +0 -1
  12. package/button.style.d.ts.map +0 -1
  13. package/button.style.variables.d.ts +0 -11
  14. package/button.style.variables.d.ts.map +0 -1
  15. package/button.style.variables.js +0 -194
  16. package/button.style.variables.js.map +0 -1
  17. package/button.types.d.ts.map +0 -1
  18. package/demo/buttons-demo.d.ts +0 -17
  19. package/demo/buttons-demo.d.ts.map +0 -1
  20. package/demo/buttons-demo.js +0 -273
  21. package/demo/buttons-demo.js.map +0 -1
  22. package/index.d.ts.map +0 -1
  23. package/mixins/index.d.ts +0 -14
  24. package/mixins/index.d.ts.map +0 -1
  25. package/mixins/index.js +0 -10
  26. package/mixins/index.js.map +0 -1
  27. package/mixins/keyboard-mixin.d.ts +0 -52
  28. package/mixins/keyboard-mixin.d.ts.map +0 -1
  29. package/mixins/keyboard-mixin.js +0 -78
  30. package/mixins/keyboard-mixin.js.map +0 -1
  31. package/mixins/link-mixin.d.ts +0 -67
  32. package/mixins/link-mixin.d.ts.map +0 -1
  33. package/mixins/link-mixin.js +0 -87
  34. package/mixins/link-mixin.js.map +0 -1
  35. package/mixins/ripple-mixin.d.ts +0 -53
  36. package/mixins/ripple-mixin.d.ts.map +0 -1
  37. package/mixins/ripple-mixin.js +0 -77
  38. package/mixins/ripple-mixin.js.map +0 -1
  39. package/react.d.ts.map +0 -1
  40. package/test/nr-button_test.d.ts +0 -2
  41. package/test/nr-button_test.d.ts.map +0 -1
  42. package/test/nr-button_test.js +0 -91
  43. package/test/nr-button_test.js.map +0 -1
package/button.style.js CHANGED
@@ -1,637 +1,498 @@
1
1
  import { css } from 'lit';
2
- import { buttonVariables } from './button.style.variables.js';
3
2
  /**
4
3
  * Button component styles for the Hybrid UI Library
4
+ * Using shared CSS variables from /src/shared/themes/
5
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.
6
+ * This file contains all the styling for the nr-button component with
7
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
17
8
  */
18
- const buttonStyles = css `
19
- /* Container for button content and icon positioning */
20
- #container {
21
- display: flex;
22
- justify-content: center;
23
- align-items: center;
24
- width: 100%;
25
- height: 100%;
26
- }
27
-
28
- /* Icon positioned to the right of text when iconPosition='right' */
29
- :host([iconPosition='right']) #container {
30
- flex-direction: row-reverse;
9
+ export const buttonStyles = css `
10
+ :host {
11
+ display: inline-block;
12
+ vertical-align: middle;
13
+
14
+ /* Force CSS custom property inheritance to ensure theme switching works properly */
15
+ color: var(--nuraly-color-text);
16
+ background-color: var(--nuraly-color-background);
17
+ border-color: var(--nuraly-color-border);
18
+
19
+ /* Ensure clean state transitions when theme changes */
20
+ * {
21
+ transition: all var(--nuraly-transition-fast, 0.15s) ease;
22
+ }
31
23
  }
32
24
 
33
- /* Icon styling within button */
34
- hy-icon {
35
- display: flex;
36
- justify-content: center;
37
- align-items: center;
38
- padding: 2px;
25
+ /* Force re-evaluation of theme-dependent properties on theme change */
26
+ :host([data-theme]) {
27
+ color: inherit;
28
+ background-color: inherit;
39
29
  }
40
30
 
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
- */
52
31
  button {
53
- /* Dimensions */
54
- height: var(--hybrid-button-height,var(--hybrid-button-local-height));
55
- width: var(--hybrid-button-width,var(--hybrid-button-local-width));
56
-
57
- /* Border properties - individual sides for granular control */
58
- border-left: var(--hybrid-button-border-left,var(--hybrid-button-local-border-left));
59
- border-right: var(--hybrid-button-border-right,var(--hybrid-button-local-border-right));
60
- border-top: var(--hybrid-button-border-top,var(--hybrid-button-local-border-top));
61
- border-bottom: var(--hybrid-button-border-bottom,var(--hybrid-button-local-border-bottom));
62
-
63
- /* Border radius - individual corners for design flexibility */
64
- border-top-left-radius:var(--hybrid-button-border-top-left-radius,var(--hybrid-button-local-border-top-left-radius)) ;
65
- border-top-right-radius: var(--hybrid-button-border-top-right-radius,var(--hybrid-button-local-border-top-right-radius));
66
- border-bottom-left-radius: var(--hybrid-button-border-bottom-left-radius,var(--hybrid-button-local-border-bottom-left-radius));
67
- border-bottom-right-radius: var(--hybrid-button-border-bottom-right-radius,var(--hybrid-button-local-border-bottom-right-radius));
68
-
69
- /* Colors */
70
- background-color: var(--hybrid-button-background-color,var(--hybrid-button-local-background-color));
71
- color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));
72
-
73
- /* Typography */
74
- font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));
75
- font-weight: var(--hybrid-button-font-weight,var(--hybrid-button-local-font-weight));
76
- text-transform: var(--hybrid-button-text-transform,var(--hybrid-button-local-text-transform));
77
-
78
- /* Spacing */
79
- padding-top: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));
80
- margin-top: var(--hybrid-button-margin-y,var(--hybrid-button-local-margin-y));
81
- padding-bottom: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));
82
- padding-right: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));
83
- padding-left: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));
84
- font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));
85
-
86
- /* Positioning for ripple effect */
32
+ display: inline-flex;
33
+ align-items: center;
34
+ justify-content: center;
87
35
  position: relative;
88
- overflow: hidden;
89
- }
90
-
91
- /* Icon styling within button - inherits text color and size */
92
- button hy-icon {
93
- --hybrid-icon-color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));
94
- --hybrid-icon-width: var(--hybrid-button-icon-width,var(--hybrid-button-local-icon-width));
95
- --hybrid-icon-height: var(--hybrid-button-icon-height,var(--hybrid-button-local-icon-height));
96
- }
97
-
98
- /*
99
- * Hover state styles
100
- * Applied when button is hovered but not disabled
101
- */
102
-
103
- /*
104
- * Hover state styles
105
- * Applied when button is hovered but not disabled
106
- */
107
- button:hover:not(:disabled) {
36
+ font-family: var(--nuraly-font-family);
37
+ font-size: 0.875rem;
38
+ font-weight: var(--nuraly-font-weight-regular);
39
+ line-height: 1.125rem;
40
+ letter-spacing: 0.16px;
41
+ min-width: 5rem;
42
+ height: 3rem;
43
+ padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
44
+ border: 1px solid transparent;
45
+ border-radius: var(--nuraly-border-radius-button, var(--nuraly-border-radius-medium, 0));
46
+ background-color: var(--nuraly-color-background);
47
+ color: var(--nuraly-color-text);
48
+ text-decoration: none;
108
49
  cursor: pointer;
109
- border-color: var(--hybrid-button-hover-border-color,var(--hybrid-button-local-hover-border-color));
110
- background-color: var(--hybrid-button-hover-background-color,var(--hybrid-button-local-hover-background-color));
111
- color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));
112
- }
113
-
114
- /* Icon color on hover */
115
- button:hover:not(:disabled) hy-icon {
116
- --hybrid-icon-color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));
117
- }
50
+ transition: all var(--nuraly-transition-fast, 0.15s) ease;
51
+ white-space: nowrap;
52
+ overflow: hidden;
53
+ text-overflow: ellipsis;
118
54
 
119
- /*
120
- * Active state styles
121
- * Applied when button is being clicked/pressed but not disabled
122
- */
123
- button:active:not(:disabled) {
124
- outline: none;
125
- border-color: var(--hybrid-button-active-border-color,var(--hybrid-button-local-active-border-color));
126
- color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));
127
- }
128
-
129
- /* Icon color on active state */
130
- button:active:not(:disabled) hy-icon {
131
- --hybrid-icon-color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));
132
- }
55
+ /* Reset any inherited styles that might interfere with theme switching */
56
+ box-shadow: none;
57
+ text-shadow: none;
58
+
59
+ &:focus {
60
+ outline: var(--nuraly-focus-outline);
61
+ outline-offset: var(--nuraly-focus-outline-offset);
62
+ }
133
63
 
134
- /*
135
- * Disabled state styles
136
- * Applied when button is disabled - removes interactivity and applies muted colors
137
- */
64
+ &:disabled {
65
+ cursor: not-allowed;
66
+ /* Remove generic opacity - use specific disabled colors instead */
67
+ }
138
68
 
139
- /*
140
- * Disabled state styles
141
- * Applied when button is disabled - removes interactivity and applies muted colors
142
- */
143
- button:disabled {
144
- cursor: auto;
145
- background-color: var(--hybrid-button-disabled-background-color,var(--hybrid-button-local-disabled-background-color));
146
- color: var(--hybrid-button-disabled-text-color,var(--hybrid-button-local-disabled-text-color));
147
- border-color: var(--hybrid-button-disabled-border-color,var(--hybrid-button-local-disabled-border-color));
148
- }
69
+ /* Icon styling */
70
+ nr-icon {
71
+ flex-shrink: 0;
72
+ width: var(--nuraly-button-icon-size, 1rem);
73
+ height: var(--nuraly-button-icon-size, 1rem);
74
+ display: inline-flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ /* Better text alignment */
78
+ vertical-align: middle;
79
+ line-height: 1;
80
+ /* Ensure icon inherits text color */
81
+ color: inherit;
82
+ /* Override any size attribute with CSS variable */
83
+ font-size: var(--nuraly-button-icon-size, 1rem) !important;
84
+ transition: all var(--nuraly-transition-fast, 0.15s) ease;
85
+ /* Inherit cursor from button */
86
+ cursor: inherit;
87
+ /* Prevent icon from being focusable */
88
+ pointer-events: none;
89
+ }
149
90
 
150
- /* ========================================
151
- * SIZE VARIATIONS
152
- * ======================================== */
91
+ /* Icon focus state */
92
+ &:focus:not(:disabled) nr-icon {
93
+ opacity: 1;
94
+ filter: brightness(1.1);
95
+ }
153
96
 
154
- /* Small button size variant */
97
+ /* Icon active state */
98
+ &:active:not(:disabled) nr-icon {
99
+ opacity: 0.9;
100
+ transform: scale(0.95);
101
+ }
155
102
 
156
- /* Small button size variant */
157
- button[data-size='small'] {
158
- padding-top: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));
159
- padding-bottom: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));
160
- padding-right: var(--hybrid-small-button-padding-x,var(--hybrid-small-button-local-padding-x));
161
- padding-left: var(--hybrid-small-button-padding-x,var(--hybrid-small-button-local-padding-x));
162
- font-size: var(--hybrid-small-button-font-size,var(--hybrid-small-button-local-font-size));
163
- }
103
+ /* Icon hover state */
104
+ &:hover:not(:disabled) nr-icon {
105
+ opacity: 1;
106
+ }
164
107
 
165
- /* Large button size variant */
166
- button[data-size='large'] {
167
- padding-top: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));
168
- padding-bottom: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));
169
- padding-right: var(--hybrid-large-button-padding-x,var(--hybrid-large-button-local-padding-x));
170
- padding-left: var(--hybrid-large-button-padding-x,var(--hybrid-large-button-local-padding-x));
171
- font-size: var(--hybrid-large-button-font-size,var(--hybrid-large-button-local-font-size));
108
+ /* Icon spacing - use gap for cleaner spacing */
109
+ gap: 0.5rem;
110
+
111
+ /* Ensure proper alignment of content */
112
+ #container, [part="container"] {
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: center;
116
+ gap: inherit;
117
+ }
172
118
  }
173
119
 
174
- /* ========================================
175
- * BUTTON STATES
176
- * ======================================== */
120
+ /* Primary Button - Carbon Design System compliant */
121
+ :host([type="primary"]) button {
122
+ background-color: var(--nuraly-color-button-primary);
123
+ border-color: var(--nuraly-color-button-primary);
124
+ color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));
177
125
 
178
- /* Loading state - reduces opacity to indicate processing */
179
- button[data-state='loading'] {
180
- opacity: 0.5;
181
- }
126
+ &:hover:not(:disabled) {
127
+ background-color: var(--nuraly-color-button-primary-hover);
128
+ border-color: var(--nuraly-color-button-primary-hover);
129
+ color: var(--nuraly-color-button-primary-text-hover, var(--nuraly-color-text-on-color));
130
+ }
182
131
 
183
- /* ========================================
184
- * BUTTON TYPE VARIANTS
185
- * ======================================== */
132
+ &:active:not(:disabled) {
133
+ background-color: var(--nuraly-color-button-primary-active);
134
+ border-color: var(--nuraly-color-button-primary-active);
135
+ color: var(--nuraly-color-button-primary-text-active, var(--nuraly-color-text-on-color));
136
+ }
186
137
 
187
- /* DANGER BUTTON VARIANT */
188
- /* DANGER BUTTON VARIANT */
189
-
190
- /* Danger button base styles and icon */
191
- button[data-type='danger'] hy-icon {
192
- --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));
193
- }
194
- button[data-type='danger'] {
195
- border-color: var(--hybrid-button-danger-border-color,var(--hybrid-button-local-danger-border-color));
196
- background-color: var(--hybrid-button-danger-background-color,var(--hybrid-button-local-danger-background-color));
197
- color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));
198
- }
199
-
200
- /* Danger button with dashed border variant */
201
- button[data-type='danger'].button-dashed {
202
- border-color: var(--hybrid-button-danger-dashed-border-color,var(--hybrid-button-local-danger-dashed-border-color));
203
- }
204
-
205
- /* Danger button disabled state */
206
- button[data-type='danger']:disabled {
207
- border-color: var(--hybrid-button-danger-disabled-border-color,var(--hybrid-button-local-danger-disabled-border-color));
208
- background-color: var(--hybrid-button-danger-disabled-background-color,var(--hybrid-button-local-danger-disabled-background-color));
209
- color: var(--hybrid-button-danger-disabled-text-color,var(--hybrid-button-local-danger-disabled-text-color));
210
- }
138
+ &:focus:not(:disabled) {
139
+ outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
140
+ outline-offset: 2px;
141
+ box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
142
+ }
211
143
 
212
- /* Danger button hover state */
213
- button[data-type='danger']:hover:not(:disabled) {
214
- background-color: var(--hybrid-button-danger-hover-background-color,var(--hybrid-button-local-danger-hover-background-color));
215
- border-color: var(--hybrid-button-danger-hover-border-color,var(--hybrid-button-local-danger-hover-border-color));
216
- color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));
217
- }
218
- button[data-type='danger']:hover:not(:disabled) hy-icon {
219
- --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));
144
+ &:disabled {
145
+ background-color: var(--nuraly-color-button-disabled);
146
+ border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
147
+ color: var(--nuraly-color-button-disabled-text);
148
+ cursor: not-allowed;
149
+ opacity: 1; /* Reset opacity for proper disabled state */
150
+ }
220
151
  }
221
152
 
222
- /* Danger button active state */
223
- button[data-type='danger']:active:not(:disabled) {
224
- background-color: var(--hybrid-button-danger-active-background-color,var(--hybrid-button-local-danger-active-background-color));
225
- border-color: var(--hybrid-button-danger-active-border-color,var(--hybrid-button-local-danger-active-border-color));
226
- outline: var(--hybrid-button-danger-outline,var(--hybrid-button-local-danger-outline));
227
- outline-offset: var(--hybrid-button-danger-outline-offset,var(--hybrid-button-local-danger-outline-offset));
228
- }
153
+ /* Secondary Button - Carbon Design System compliant */
154
+ :host([type="secondary"]) button {
155
+ background-color: var(--nuraly-color-button-secondary);
156
+ border-color: var(--nuraly-color-button-secondary);
157
+ color: var(--nuraly-color-button-secondary-text, var(--nuraly-color-text-on-color));
229
158
 
230
- /* PRIMARY BUTTON VARIANT */
231
- /* PRIMARY BUTTON VARIANT */
232
-
233
- /* Primary button base styles and icon */
234
- button[data-type='primary'] hy-icon {
235
- --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));
236
- }
237
- button[data-type='primary'] {
238
- border-color: var(--hybrid-button-primary-border-color,var(--hybrid-button-local-primary-border-color));
239
- background-color: var(--hybrid-button-primary-background-color,var(--hybrid-button-local-primary-background-color));
240
- color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));
241
- }
242
-
243
- /* Primary button with dashed border variant */
244
- button[data-type='primary'].button-dashed {
245
- border-color: var(--hybrid-button-primary-dashed-border-color,var(--hybrid-button-local-primary-dashed-border-color));
246
- }
159
+ &:hover:not(:disabled) {
160
+ background-color: var(--nuraly-color-button-secondary-hover);
161
+ border-color: var(--nuraly-color-button-secondary-hover);
162
+ color: var(--nuraly-color-button-secondary-text-hover, var(--nuraly-color-text-on-color));
163
+ }
247
164
 
248
- /* Primary button disabled state */
249
- button[data-type='primary']:disabled {
250
- border-color: var(--hybrid-button-primary-disabled-border-color,var(--hybrid-button-local-primary-disabled-border-color));
251
- background-color: var(--hybrid-button-primary-disabled-background-color,var(--hybrid-button-local-primary-disabled-background-color));
252
- color: var(--hybrid-button-primary-disabled-text-color,var(--hybrid-button-local-primary-disabled-text-color));
253
- }
165
+ &:active:not(:disabled) {
166
+ background-color: var(--nuraly-color-button-secondary-active);
167
+ border-color: var(--nuraly-color-button-secondary-active);
168
+ color: var(--nuraly-color-button-secondary-text-active, var(--nuraly-color-text-on-color));
169
+ }
254
170
 
255
- /* Primary button hover state */
256
- button[data-type='primary']:hover:not(:disabled) {
257
- background-color: var(--hybrid-button-primary-hover-background-color,var(--hybrid-button-local-primary-hover-background-color));
258
- border-color: var(--hybrid-button-primary-hover-border-color,var(--hybrid-button-local-primary-hover-border-color));
259
- color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));
260
- }
261
- button[data-type='primary']:hover:not(:disabled) hy-icon {
262
- --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));
263
- }
264
-
265
- /* Primary button active state */
266
- button[data-type='primary']:active:not(:disabled) {
267
- border-color: var(--hybrid-button-primary-active-border-color,var(--hybrid-button-local-primary-active-border-color));
268
- background-color: var(--hybrid-button-primary-active-background-color,var(--hybrid-button-local-primary-active-background-color));
269
- outline: var(--hybrid-button-primary-outline,var(--hybrid-button-local-primary-outline));
270
- outline-offset: var(--hybrid-button-primary-outline-offset,var(--hybrid-button-local-primary-outline-offset));
271
- }
171
+ &:focus:not(:disabled) {
172
+ outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
173
+ outline-offset: 2px;
174
+ box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
175
+ }
272
176
 
273
- /* GHOST BUTTON VARIANT */
274
- /* GHOST BUTTON VARIANT */
275
-
276
- /* Ghost button base styles and icon */
277
- button[data-type='ghost'] hy-icon {
278
- --hybrid-icon-color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));
279
- }
280
- button[data-type='ghost'] {
281
- background-color: var(--hybrid-button-ghost-background-color,var(--hybrid-button-local-ghost-background-color));
282
- color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));
283
- border-color: var(--hybrid-button-ghost-border-color,var(--hybrid-button-local-ghost-border-color));
284
- }
285
-
286
- /* Ghost button with dashed border variant */
287
- button[data-type='ghost'].button-dashed {
288
- border-color: var(--hybrid-button-ghost-dashed-border-color,var(--hybrid-button-local-ghost-dashed-border-color));
289
- }
290
-
291
- /* Ghost button disabled state */
292
- button[data-type='ghost']:disabled {
293
- background-color: var(--hybrid-button-ghost-disabled-background-color,var(--hybrid-button-local-ghost-disabled-background-color));
294
- color: var(--hybrid-button-ghost-disabled-text-color,var(--hybrid-button-local-ghost-disabled-text-color));
295
- border-color: var(--hybrid-button-ghost-disabled-border-color,var(--hybrid-button-local-ghost-disabled-border-color));
177
+ &:disabled {
178
+ background-color: var(--nuraly-color-button-disabled);
179
+ border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
180
+ color: var(--nuraly-color-button-disabled-text);
181
+ cursor: not-allowed;
182
+ opacity: 1; /* Reset opacity for proper disabled state */
183
+ }
296
184
  }
297
185
 
298
- /* Ghost button hover state */
299
- button[data-type='ghost']:hover:not(:disabled) {
300
- background-color: var(--hybrid-button-ghost-hover-background-color,var(--hybrid-button-local-ghost-hover-background-color));
301
- color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));
302
- border-color: var(--hybrid-button-local-ghost-hover-border-color,var(--hybrid-button-local-ghost-hover-border-color));
303
- }
304
- button[data-type='ghost']:hover:not(:disabled) hy-icon {
305
- --hybrid-icon-color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));
306
- }
307
-
308
- /* Ghost button active state */
309
- button[data-type='ghost']:active:not(:disabled) {
310
- background-color: var(--hybrid-button-ghost-active-background-color,var(--hybrid-button-local-ghost-active-background-color));
311
- border-color: var(--hybrid-button-ghost-active-border-color,var(--hybrid-button-local-ghost-active-border-color));
312
- }
186
+ /* Default Button - Clean white/light style with defined border */
187
+ :host([type="default"]) button {
188
+ background-color: var(--nuraly-color-background, #ffffff);
189
+ border-color: var(--nuraly-color-border, #d0d0d0);
190
+ color: var(--nuraly-color-text, #161616);
313
191
 
314
- /* SECONDARY BUTTON VARIANT */
315
- /* SECONDARY BUTTON VARIANT */
316
-
317
- /* Secondary button base styles and icon */
318
- button[data-type='secondary'] hy-icon {
319
- --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));
320
- }
321
- button[data-type='secondary'] {
322
- background-color: var(--hybrid-button-secondary-background-color,var(--hybrid-button-local-secondary-background-color));
323
- color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));
324
- border-color: var(--hybrid-button-secondary-border-color,var(--hybrid-button-local-secondary-border-color));
325
- }
326
-
327
- /* Secondary button with dashed border variant */
328
- button[data-type='secondary'].button-dashed {
329
- border-color: var(--hybrid-button-secondary-dashed-border-color,var(--hybrid-button-local-secondary-dashed-border-color));
330
- }
331
-
332
- /* Secondary button disabled state */
333
- button[data-type='secondary']:disabled {
334
- background-color: var(--hybrid-button-secondary-disabled-background-color,var(--hybrid-button-local-secondary-disabled-background-color));
335
- color: var(--hybrid-button-secondary-disabled-text-color,var(--hybrid-button-local-secondary-disabled-text-color));
336
- border-color: var(--hybrid-button-secondary-disabled-border-color,var(--hybrid-button-local-secondary-disabled-border-color));
337
- }
338
-
339
- /* Secondary button hover state */
340
- button[data-type='secondary']:hover:not(:disabled) {
341
- background-color: var(--hybrid-button-secondary-hover-background-color,var(--hybrid-button-local-secondary-hover-background-color));
342
- color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));
343
- border-color: var(--hybrid-button-secondary-hover-border-color,var(--hybrid-button-local-secondary-hover-border-color));
344
- }
345
- button[data-type='secondary']:hover:not(:disabled) hy-icon {
346
- --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));
347
- }
192
+ &:hover:not(:disabled) {
193
+ background-color: var(--nuraly-color-background-hover, #f4f4f4);
194
+ border-color: var(--nuraly-color-border-hover, #a8a8a8);
195
+ color: var(--nuraly-color-text, #161616);
196
+ }
348
197
 
349
- /* Secondary button active state */
350
- button[data-type='secondary']:active:not(:disabled) {
351
- background-color: var(--hybrid-button-secondary-active-background-color,var(--hybrid-button-local-secondary-active-background-color));
352
- border-color: var(--hybrid-button-secondary-active-border-color,var(--hybrid-button-local-secondary-active-border-color));
353
- outline: var(--hybrid-button-secondary-outline,var(--hybrid-button-local-secondary-outline));
354
- outline-offset: var(--hybrid-button-secondary-outline-offset,var(--hybrid-button-local-secondary-outline-offset));
355
- }
198
+ &:active:not(:disabled) {
199
+ background-color: var(--nuraly-color-background-active, #e0e0e0);
200
+ border-color: var(--nuraly-color-border-active, #8d8d8d);
201
+ color: var(--nuraly-color-text, #161616);
202
+ }
356
203
 
357
- /* ========================================
358
- * UTILITY CLASSES
359
- * ======================================== */
204
+ &:focus:not(:disabled) {
205
+ outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
206
+ outline-offset: 2px;
207
+ box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
208
+ }
360
209
 
361
- /* Dashed border style modifier */
362
- .button-dashed {
363
- border-style: dashed;
210
+ &:disabled {
211
+ background-color: var(--nuraly-color-button-disabled, #f4f4f4);
212
+ border-color: var(--nuraly-color-button-disabled-border, #c6c6c6);
213
+ color: var(--nuraly-color-button-disabled-text, #c6c6c6);
214
+ cursor: not-allowed;
215
+ opacity: 1; /* Reset opacity for proper disabled state */
216
+ }
364
217
  }
365
218
 
366
- /* ========================================
367
- * NEW BUTTON TYPES
368
- * ======================================== */
219
+ /* Tertiary/Ghost Button - Carbon Design System compliant */
220
+ :host([type="tertiary"]), :host([type="ghost"]) button {
221
+ background-color: var(--nuraly-color-button-outline, transparent);
222
+ border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));
223
+ color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-tertiary, var(--nuraly-color-button-primary)));
369
224
 
370
- /* TEXT BUTTON VARIANT */
371
- button[data-type='text'] {
372
- background-color: var(--hybrid-button-text-background-color, var(--hybrid-button-local-text-background-color, transparent));
373
- color: var(--hybrid-button-text-text-color, var(--hybrid-button-local-text-text-color, #1890ff));
374
- border: none;
375
- box-shadow: none;
225
+ &:hover:not(:disabled) {
226
+ background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));
227
+ border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary)));
228
+ color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary-hover)));
229
+ }
230
+
231
+ &:active:not(:disabled) {
232
+ background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));
233
+ border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));
234
+ color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));
235
+ }
236
+
237
+ &:focus:not(:disabled) {
238
+ outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
239
+ outline-offset: 2px;
240
+ box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
241
+ }
242
+
243
+ &:disabled {
244
+ background-color: transparent;
245
+ border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
246
+ color: var(--nuraly-color-button-disabled-text);
247
+ cursor: not-allowed;
248
+ opacity: 1; /* Reset opacity for proper disabled state */
249
+ }
376
250
  }
377
251
 
378
- button[data-type='text'] hy-icon {
379
- --hybrid-icon-color: var(--hybrid-button-text-text-color, var(--hybrid-button-local-text-text-color, #1890ff));
252
+ /* Danger Button - Carbon Design System compliant */
253
+ :host([type="danger"]) button {
254
+ background-color: var(--nuraly-color-button-danger);
255
+ border-color: var(--nuraly-color-button-danger);
256
+ color: var(--nuraly-color-button-danger-text, var(--nuraly-color-text-on-color));
257
+
258
+ &:hover:not(:disabled) {
259
+ background-color: var(--nuraly-color-button-danger-hover);
260
+ border-color: var(--nuraly-color-button-danger-hover);
261
+ color: var(--nuraly-color-button-danger-text-hover, var(--nuraly-color-text-on-color));
262
+ }
263
+
264
+ &:active:not(:disabled) {
265
+ background-color: var(--nuraly-color-button-danger-active);
266
+ border-color: var(--nuraly-color-button-danger-active);
267
+ color: var(--nuraly-color-button-danger-text-active, var(--nuraly-color-text-on-color));
268
+ }
269
+
270
+ &:focus:not(:disabled) {
271
+ outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));
272
+ outline-offset: 2px;
273
+ box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));
274
+ }
275
+
276
+ &:disabled {
277
+ background-color: var(--nuraly-color-button-disabled);
278
+ border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));
279
+ color: var(--nuraly-color-button-disabled-text);
280
+ cursor: not-allowed;
281
+ opacity: 1; /* Reset opacity for proper disabled state */
282
+ }
380
283
  }
381
284
 
382
- button[data-type='text']:hover:not(:disabled) {
383
- background-color: var(--hybrid-button-text-hover-background-color, var(--hybrid-button-local-text-hover-background-color, rgba(24, 144, 255, 0.06)));
384
- color: var(--hybrid-button-text-hover-text-color, var(--hybrid-button-local-text-hover-text-color, #40a9ff));
285
+ /* Default size when no size attribute is provided (medium) */
286
+ :host(:not([size])) button {
287
+ height: var(--nuraly-size-md);
288
+ padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
385
289
  }
386
290
 
387
- button[data-type='text']:hover:not(:disabled) hy-icon {
388
- --hybrid-icon-color: var(--hybrid-button-text-hover-text-color, var(--hybrid-button-local-text-hover-text-color, #40a9ff));
291
+ /* Size variants */
292
+ :host([size="small"]) button {
293
+ height: var(--nuraly-size-sm);
294
+ padding: var(--nuraly-spacing-01) var(--nuraly-spacing-03);
295
+ font-size: 0.75rem;
296
+ min-width: 4rem;
389
297
  }
390
298
 
391
- button[data-type='text']:active:not(:disabled) {
392
- background-color: var(--hybrid-button-text-active-background-color, var(--hybrid-button-local-text-active-background-color, rgba(24, 144, 255, 0.15)));
393
- color: var(--hybrid-button-text-active-text-color, var(--hybrid-button-local-text-active-text-color, #096dd9));
299
+ :host([size="medium"]) button {
300
+ height: var(--nuraly-size-md);
301
+ padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);
394
302
  }
395
303
 
396
- button[data-type='text']:disabled {
397
- background-color: transparent;
398
- color: var(--hybrid-button-text-disabled-text-color, var(--hybrid-button-local-text-disabled-text-color, rgba(0, 0, 0, 0.25)));
399
- border: none;
304
+ :host([size="large"]) button {
305
+ height: var(--nuraly-size-lg);
306
+ padding: var(--nuraly-spacing-05) var(--nuraly-spacing-06);
307
+ font-size: 1rem;
308
+ min-width: 6rem;
400
309
  }
401
310
 
402
- /* LINK BUTTON VARIANT */
403
- a[data-type='link'], button[data-type='link'] {
404
- background-color: transparent;
405
- color: var(--hybrid-button-link-text-color, var(--hybrid-button-local-link-text-color, #1890ff));
406
- border: none;
407
- box-shadow: none;
408
- text-decoration: underline;
409
- cursor: pointer;
311
+ /* Full width */
312
+ :host([full-width]) {
313
+ width: 100%;
410
314
  }
411
315
 
412
- a[data-type='link'] hy-icon, button[data-type='link'] hy-icon {
413
- --hybrid-icon-color: var(--hybrid-button-link-text-color, var(--hybrid-button-local-link-text-color, #1890ff));
316
+ :host([full-width]) button {
317
+ width: 100%;
414
318
  }
415
319
 
416
- a[data-type='link']:hover, button[data-type='link']:hover:not(:disabled) {
417
- color: var(--hybrid-button-link-hover-text-color, var(--hybrid-button-local-link-hover-text-color, #40a9ff));
320
+ /* Loading state */
321
+ :host([loading]) button {
322
+ cursor: not-allowed;
323
+ opacity: 0.7;
418
324
  }
419
325
 
420
- a[data-type='link']:hover hy-icon, button[data-type='link']:hover:not(:disabled) hy-icon {
421
- --hybrid-icon-color: var(--hybrid-button-link-hover-text-color, var(--hybrid-button-local-link-hover-text-color, #40a9ff));
326
+ /* Shape variants */
327
+ :host([shape="round"]) button {
328
+ border-radius: 50%;
329
+ min-width: auto;
330
+ width: var(--nuraly-size-md);
331
+ aspect-ratio: 1;
332
+ padding: 0;
422
333
  }
423
334
 
424
- a[data-type='link']:active, button[data-type='link']:active:not(:disabled) {
425
- color: var(--hybrid-button-link-active-text-color, var(--hybrid-button-local-link-active-text-color, #096dd9));
335
+ :host([shape="round"][size="small"]) button {
336
+ width: var(--nuraly-size-sm);
426
337
  }
427
338
 
428
- button[data-type='link']:disabled {
429
- color: var(--hybrid-button-link-disabled-text-color, var(--hybrid-button-local-link-disabled-text-color, rgba(0, 0, 0, 0.25)));
430
- text-decoration: none;
431
- cursor: not-allowed;
339
+ :host([shape="round"][size="medium"]) button {
340
+ width: var(--nuraly-size-md);
432
341
  }
433
342
 
434
- /* ========================================
435
- * SHAPE VARIANTS
436
- * ======================================== */
343
+ :host([shape="round"][size="large"]) button {
344
+ width: var(--nuraly-size-lg);
345
+ }
437
346
 
438
- /* Circle button shape */
439
- button[data-shape='circle'], a[data-shape='circle'] {
347
+ /* Enhanced Ripple Effect Animation - Theme-aware */
348
+ .ripple {
349
+ position: absolute;
440
350
  border-radius: 50%;
441
- width: var(--hybrid-button-circle-size, var(--hybrid-button-local-circle-size, 32px));
442
- height: var(--hybrid-button-circle-size, var(--hybrid-button-local-circle-size, 32px));
443
- padding: 0;
444
- display: inline-flex;
445
- align-items: center;
446
- justify-content: center;
351
+ background: rgba(255, 255, 255, 0.6);
352
+ transform: scale(0);
353
+ animation: ripple-animation 0.6s linear;
354
+ pointer-events: none;
355
+ z-index: 1;
447
356
  }
448
357
 
449
- button[data-shape='circle'][data-size='small'], a[data-shape='circle'][data-size='small'] {
450
- width: var(--hybrid-button-circle-size-small, var(--hybrid-button-local-circle-size-small, 24px));
451
- height: var(--hybrid-button-circle-size-small, var(--hybrid-button-local-circle-size-small, 24px));
358
+ @keyframes ripple-animation {
359
+ 0% {
360
+ transform: scale(0);
361
+ opacity: 1;
362
+ }
363
+ 70% {
364
+ transform: scale(3);
365
+ opacity: 0.5;
366
+ }
367
+ 100% {
368
+ transform: scale(4);
369
+ opacity: 0;
370
+ }
452
371
  }
453
372
 
454
- button[data-shape='circle'][data-size='large'], a[data-shape='circle'][data-size='large'] {
455
- width: var(--hybrid-button-circle-size-large, var(--hybrid-button-local-circle-size-large, 40px));
456
- height: var(--hybrid-button-circle-size-large, var(--hybrid-button-local-circle-size-large, 40px));
373
+ /* Ripple effect for different button types - Carbon Design System compliant */
374
+ :host([type="primary"]) .ripple {
375
+ background: rgba(255, 255, 255, 0.4);
457
376
  }
458
377
 
459
- /* Round button shape */
460
- button[data-shape='round'], a[data-shape='round'] {
461
- border-radius: var(--hybrid-button-round-border-radius, var(--hybrid-button-local-round-border-radius, 16px));
378
+ :host([type="secondary"]) .ripple {
379
+ background: rgba(255, 255, 255, 0.3);
462
380
  }
463
381
 
464
- /* ========================================
465
- * BLOCK BUTTON
466
- * ======================================== */
467
-
468
- button[data-block='true'], a[data-block='true'] {
469
- width: 100%;
470
- display: block;
382
+ :host([type="default"]) .ripple {
383
+ background: var(--nuraly-color-text, #161616);
384
+ opacity: 0.1;
471
385
  }
472
386
 
473
- /* ========================================
474
- * VARIANT STYLES
475
- * ======================================== */
387
+ :host([type="ghost"]) .ripple,
388
+ :host([type="tertiary"]) .ripple {
389
+ background: var(--nuraly-color-button-tertiary, #0f62fe);
390
+ opacity: 0.2;
391
+ }
476
392
 
477
- /* Primary button variant */
393
+ :host([type="danger"]) .ripple {
394
+ background: rgba(255, 255, 255, 0.4);
395
+ }
478
396
 
479
- /* ========================================
480
- * DARK THEME OVERRIDES
481
- * ======================================== */
482
-
483
- /**
484
- * Dark theme styles using data-theme attribute on button element
485
- * These override the light theme defaults when data-theme="dark" is applied
486
- */
487
- /**
488
- * Dark theme styles using data-theme attribute on button element
489
- * These override the light theme defaults when data-theme="dark" is applied
490
- */
491
- button[data-theme="dark"] {
492
- /* Default button dark theme overrides */
493
- --hybrid-button-local-background-color: #000000;
494
- --hybrid-button-local-text-color: #ffffff;
495
- --hybrid-button-local-hover-border-color: #6f6f6f;
496
- --hybrid-button-local-hover-color: #6f6f6f;
497
- --hybrid-button-local-active-border-color: #c6c6c6;
498
- --hybrid-button-local-active-color: #c6c6c6;
499
- --hybrid-button-local-disabled-background-color: #c6c6c6;
500
-
501
- /* Primary button dark theme overrides */
502
- --hybrid-button-local-primary-outline: 1px solid black;
503
- --hybrid-button-local-primary-outline-offset: -3px;
504
- --hybrid-button-local-primary-active-border-color: #ffffff;
505
- --hybrid-button-local-primary-disabled-text-color: #c6c6c6;
506
- --hybrid-button-local-primary-disabled-background-color: #8d8d8d;
507
- --hybrid-button-local-primary-disabled-border-color: #8d8d8d;
508
-
509
- /* Secondary button dark theme overrides */
510
- --hybrid-button-local-secondary-background-color: #6f6f6f;
511
- --hybrid-button-local-secondary-border-color: #6f6f6f;
512
- --hybrid-button-local-secondary-text-color: #ffffff;
513
- --hybrid-button-local-secondary-active-border-color: #ffffff;
514
- --hybrid-button-local-secondary-active-background-color: #6f6f6f;
515
- --hybrid-button-local-secondary-outline: 1px solid black;
516
- --hybrid-button-local-secondary-outline-offset: -3px;
517
- --hybrid-button-local-secondary-hover-background-color: #606060;
518
- --hybrid-button-local-secondary-hover-border-color: #606060;
519
- --hybrid-button-local-secondary-disabled-background-color: #6f6f6f;
520
- --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;
521
- --hybrid-button-local-secondary-disabled-border-color: #6f6f6f;
522
- --hybrid-button-local-secondary-dashed-border-color: #ffffff;
523
-
524
- /* Ghost button dark theme overrides */
525
- --hybrid-button-local-ghost-background-color: transparent;
526
- --hybrid-button-local-ghost-text-color: #78a9ff;
527
- --hybrid-button-local-ghost-border-color: transparent;
528
- --hybrid-button-local-ghost-active-background-color: transparent;
529
- --hybrid-button-local-ghost-active-text-color: #a6c8ff;
530
- --hybrid-button-local-ghost-active-border-color: #ffffff;
531
- --hybrid-button-local-ghost-hover-background-color: #4c4c4c;
532
- --hybrid-button-local-ghost-hover-border-color: #4c4c4c;
533
- --hybrid-button-local-ghost-hover-text-color: #a6c8ff;
534
- --hybrid-button-local-ghost-disabled-background-color: transparent;
535
- --hybrid-button-local-ghost-disabled-text-color: #6f6f6f;
536
- --hybrid-button-local-ghost-disabled-border-color: transparent;
537
- --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;
538
-
539
- /* Danger button dark theme overrides */
540
- --hybrid-button-local-danger-outline: 1px solid #000000;
541
- --hybrid-button-local-danger-outline-offset: -3px;
542
- --hybrid-button-local-danger-hover-background-color: #ba1b23;
543
- --hybrid-button-local-danger-hover-border-color: #ba1b23;
544
- --hybrid-button-local-danger-active-background-color: #da1e28;
545
- --hybrid-button-local-danger-active-border-color: #ffffff;
546
- --hybrid-button-local-danger-disabled-background-color: #6f6f6f;
547
- --hybrid-button-local-danger-disabled-text-color: #8d8d8d;
548
- --hybrid-button-local-danger-disabled-border-color: #6f6f6f;
549
- --hybrid-button-local-danger-dashed-border-color: #ffffff;
550
-
551
- /* Text button dark theme overrides */
552
- --hybrid-button-local-text-background-color: transparent;
553
- --hybrid-button-local-text-text-color: #ffffff;
554
- --hybrid-button-local-text-border-color: transparent;
555
- --hybrid-button-local-text-hover-background-color: rgba(255, 255, 255, 0.1);
556
- --hybrid-button-local-text-hover-text-color: #ffffff;
557
- --hybrid-button-local-text-hover-border-color: transparent;
558
- --hybrid-button-local-text-active-background-color: rgba(255, 255, 255, 0.15);
559
- --hybrid-button-local-text-active-text-color: #ffffff;
560
- --hybrid-button-local-text-active-border-color: transparent;
561
- --hybrid-button-local-text-disabled-background-color: transparent;
562
- --hybrid-button-local-text-disabled-text-color: #6f6f6f;
563
- --hybrid-button-local-text-disabled-border-color: transparent;
564
-
565
- /* Link button dark theme overrides */
566
- --hybrid-button-local-link-background-color: transparent;
567
- --hybrid-button-local-link-text-color: #78a9ff;
568
- --hybrid-button-local-link-border-color: transparent;
569
- --hybrid-button-local-link-hover-background-color: transparent;
570
- --hybrid-button-local-link-hover-text-color: #a6c8ff;
571
- --hybrid-button-local-link-hover-border-color: transparent;
572
- --hybrid-button-local-link-active-background-color: transparent;
573
- --hybrid-button-local-link-active-text-color: #a6c8ff;
574
- --hybrid-button-local-link-active-border-color: transparent;
575
- --hybrid-button-local-link-disabled-background-color: transparent;
576
- --hybrid-button-local-link-disabled-text-color: #6f6f6f;
577
- --hybrid-button-local-link-disabled-border-color: transparent;
397
+ /* Theme-specific ripple adjustments for dark theme */
398
+ [data-theme="carbon-dark"] :host([type="default"]) .ripple {
399
+ background: var(--nuraly-color-text, #f4f4f4);
400
+ opacity: 0.1;
578
401
  }
579
402
 
580
- /* ========================================
581
- * RIPPLE EFFECT STYLES
582
- * ======================================== */
403
+ [data-theme="carbon-dark"] :host([type="ghost"]) .ripple,
404
+ [data-theme="carbon-dark"] :host([type="tertiary"]) .ripple {
405
+ background: var(--nuraly-color-button-tertiary, #78a9ff);
406
+ opacity: 0.2;
407
+ }
583
408
 
584
- /* Ripple effect animation */
585
- .ripple {
586
- position: absolute;
587
- border-radius: 50%;
588
- background-color: rgba(255, 255, 255, 0.4);
589
- transform: scale(0);
590
- animation: ripple-animation 0.6s linear;
591
- pointer-events: none;
409
+ [data-theme="carbon-dark"] :host([type="primary"]) .ripple {
410
+ background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */
592
411
  }
593
412
 
594
- /* Darker ripple for light buttons */
595
- button[data-type='default'] .ripple,
596
- button[data-type='ghost'] .ripple {
597
- background-color: rgba(0, 0, 0, 0.1);
413
+ [data-theme="carbon-dark"] :host([type="secondary"]) .ripple {
414
+ background: rgba(22, 22, 22, 0.3); /* Dark ripple for light buttons */
598
415
  }
599
416
 
600
- /* Lighter ripple for dark buttons */
601
- button[data-type='primary'] .ripple,
602
- button[data-type='danger'] .ripple {
603
- background-color: rgba(255, 255, 255, 0.3);
417
+ [data-theme="carbon-dark"] :host([type="danger"]) .ripple {
418
+ background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */
604
419
  }
605
420
 
606
- /* Ripple animation keyframes */
607
- @keyframes ripple-animation {
608
- to {
609
- transform: scale(4);
610
- opacity: 0;
421
+ /* ========================================
422
+ * CARBON THEME SPECIFIC STYLING
423
+ * Enhanced padding and icon centering for Carbon Design System
424
+ * ======================================== */
425
+
426
+ /* Carbon theme button styling - apply to all carbon themes */
427
+ :host([data-theme*="carbon"]) button,
428
+ [data-theme*="carbon"] :host button {
429
+ /* Better baseline alignment for icon and text */
430
+ align-items: center;
431
+
432
+ /* Enhanced icon alignment and spacing for Carbon */
433
+ nr-icon {
434
+ width: var(--nuraly-button-icon-size, 1rem);
435
+ height: var(--nuraly-button-icon-size, 1rem);
436
+ display: inline-flex;
437
+ align-items: center;
438
+ justify-content: center;
439
+ flex-shrink: 0;
440
+ /* Perfect vertical alignment with text baseline */
441
+ vertical-align: middle;
442
+ line-height: 1;
611
443
  }
444
+
445
+ /* Icon spacing for Carbon theme - improved approach */
446
+ gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));
612
447
  }
613
-
614
- /* Disable ripple when component is disabled */
615
- button:disabled .ripple {
616
- display: none;
448
+
449
+ /* Specific Carbon theme selectors for better targeting */
450
+ [data-theme="carbon-light"] nr-button button,
451
+ [data-theme="carbon-dark"] nr-button button,
452
+ [data-theme="carbon"] nr-button button {
453
+ /* Better baseline alignment for icon and text */
454
+ align-items: center;
455
+
456
+ /* Enhanced icon alignment and spacing for Carbon */
457
+ nr-icon {
458
+ width: var(--nuraly-button-icon-size, 1rem);
459
+ height: var(--nuraly-button-icon-size, 1rem);
460
+ display: inline-flex;
461
+ align-items: center;
462
+ justify-content: center;
463
+ flex-shrink: 0;
464
+ /* Perfect vertical alignment with text baseline */
465
+ vertical-align: middle;
466
+ line-height: 1;
467
+ /* Slight adjustment for perfect optical centering */
468
+ margin-top: -1px;
469
+ }
470
+
471
+ /* Target the SVG inside nr-icon for better alignment */
472
+ nr-icon svg {
473
+ display: block;
474
+ margin: 0 auto;
475
+ }
476
+
477
+ /* Icon spacing for Carbon theme */
478
+ gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));
479
+
480
+ /* Ensure text is also properly centered */
481
+ span#container {
482
+ display: flex;
483
+ align-items: center;
484
+ justify-content: center;
485
+ width: 100%;
486
+ height: 100%;
487
+ line-height: 1;
488
+ }
489
+
490
+ /* Ensure slot content aligns properly */
491
+ slot#slot {
492
+ display: inline-block;
493
+ line-height: inherit;
494
+ }
617
495
  }
618
496
  `;
619
- /**
620
- * Exported styles for the nr-button component
621
- *
622
- * @description
623
- * This export provides the complete styling system for the button component,
624
- * including all variants, states, sizes, theme support, and CSS custom properties.
625
- *
626
- * @usage
627
- * Import and use in the component's styles property:
628
- * ```typescript
629
- * import { styles } from './nr-button.style.ts';
630
- *
631
- * @Component({
632
- * styles: styles
633
- * })
634
- * ```
635
- */
636
- export const styles = [buttonStyles, buttonVariables];
497
+ export const styles = buttonStyles;
637
498
  //# sourceMappingURL=button.style.js.map