npm - @nuralyui/button - Versions diffs - 0.0.11 → 0.0.13 - Mend

@nuralyui/button 0.0.11 → 0.0.13

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

package/{nr-button.component.d.ts → button.component.d.ts} +28 -2
package/button.component.d.ts.map +1 -0
package/button.component.js +240 -0
package/button.component.js.map +1 -0
package/{nr-button.style.d.ts → button.style.d.ts} +2 -2
package/button.style.d.ts.map +1 -0
package/{nr-button.style.js → button.style.js} +176 -127
package/button.style.js.map +1 -0
package/button.style.variables.d.ts +11 -0
package/button.style.variables.d.ts.map +1 -0
package/button.style.variables.js +194 -0
package/button.style.variables.js.map +1 -0
package/{nr-button.types.d.ts → button.types.d.ts} +9 -2
package/button.types.d.ts.map +1 -0
package/button.types.js +2 -0
package/button.types.js.map +1 -0
package/demo/{nr-buttons-demo.d.ts → buttons-demo.d.ts} +2 -2
package/demo/buttons-demo.d.ts.map +1 -0
package/demo/{nr-buttons-demo.js → buttons-demo.js} +64 -2
package/demo/buttons-demo.js.map +1 -0
package/index.d.ts +1 -1
package/index.d.ts.map +1 -1
package/index.js +1 -1
package/index.js.map +1 -1
package/package.json +1 -1
package/react.d.ts +1 -1
package/react.d.ts.map +1 -1
package/react.js +1 -1
package/react.js.map +1 -1
package/test/nr-button_test.d.ts +1 -1
package/test/nr-button_test.d.ts.map +1 -1
package/test/nr-button_test.js +2 -2
package/test/nr-button_test.js.map +1 -1
package/demo/nr-buttons-demo.d.ts.map +0 -1
package/demo/nr-buttons-demo.js.map +0 -1
package/nr-button.component.d.ts.map +0 -1
package/nr-button.component.js +0 -99
package/nr-button.component.js.map +0 -1
package/nr-button.style.d.ts.map +0 -1
package/nr-button.style.js.map +0 -1
package/nr-button.types.d.ts.map +0 -1
package/nr-button.types.js +0 -2
package/nr-button.types.js.map +0 -1

package/{nr-button.style.js → button.style.js} RENAMED Viewed

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { buttonVariables } from './button.style.variables.js';
 /**
  * Button component styles for the Hybrid UI Library
  *
@@ -81,6 +82,10 @@ const buttonStyles = css `
     padding-right: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));
     padding-left: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));
     font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));
+    /* Positioning for ripple effect */
+    position: relative;
+    overflow: hidden;
   }
   /* Icon styling within button - inherits text color and size */
@@ -359,141 +364,118 @@ const buttonStyles = css `
   }
   /* ========================================
-   * CSS CUSTOM PROPERTIES (Design Tokens)
+   * NEW BUTTON TYPES
    * ======================================== */
+  /* TEXT BUTTON VARIANT */
+  button[data-type='text'] {
+    background-color: var(--hybrid-button-text-background-color, var(--hybrid-button-local-text-background-color, transparent));
+    color: var(--hybrid-button-text-text-color, var(--hybrid-button-local-text-text-color, #1890ff));
+    border: none;
+    box-shadow: none;
+  }
+  button[data-type='text'] hy-icon {
+    --hybrid-icon-color: var(--hybrid-button-text-text-color, var(--hybrid-button-local-text-text-color, #1890ff));
+  }
+  button[data-type='text']:hover:not(:disabled) {
+    background-color: var(--hybrid-button-text-hover-background-color, var(--hybrid-button-local-text-hover-background-color, rgba(24, 144, 255, 0.06)));
+    color: var(--hybrid-button-text-hover-text-color, var(--hybrid-button-local-text-hover-text-color, #40a9ff));
+  }
+  button[data-type='text']:hover:not(:disabled) hy-icon {
+    --hybrid-icon-color: var(--hybrid-button-text-hover-text-color, var(--hybrid-button-local-text-hover-text-color, #40a9ff));
+  }
+  button[data-type='text']:active:not(:disabled) {
+    background-color: var(--hybrid-button-text-active-background-color, var(--hybrid-button-local-text-active-background-color, rgba(24, 144, 255, 0.15)));
+    color: var(--hybrid-button-text-active-text-color, var(--hybrid-button-local-text-active-text-color, #096dd9));
+  }
+  button[data-type='text']:disabled {
+    background-color: transparent;
+    color: var(--hybrid-button-text-disabled-text-color, var(--hybrid-button-local-text-disabled-text-color, rgba(0, 0, 0, 0.25)));
+    border: none;
+  }
+  /* LINK BUTTON VARIANT */
+  a[data-type='link'], button[data-type='link'] {
+    background-color: transparent;
+    color: var(--hybrid-button-link-text-color, var(--hybrid-button-local-link-text-color, #1890ff));
+    border: none;
+    box-shadow: none;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  a[data-type='link'] hy-icon, button[data-type='link'] hy-icon {
+    --hybrid-icon-color: var(--hybrid-button-link-text-color, var(--hybrid-button-local-link-text-color, #1890ff));
+  }
+  a[data-type='link']:hover, button[data-type='link']:hover:not(:disabled) {
+    color: var(--hybrid-button-link-hover-text-color, var(--hybrid-button-local-link-hover-text-color, #40a9ff));
+  }
+  a[data-type='link']:hover hy-icon, button[data-type='link']:hover:not(:disabled) hy-icon {
+    --hybrid-icon-color: var(--hybrid-button-link-hover-text-color, var(--hybrid-button-local-link-hover-text-color, #40a9ff));
+  }
+  a[data-type='link']:active, button[data-type='link']:active:not(:disabled) {
+    color: var(--hybrid-button-link-active-text-color, var(--hybrid-button-local-link-active-text-color, #096dd9));
+  }
+  button[data-type='link']:disabled {
+    color: var(--hybrid-button-link-disabled-text-color, var(--hybrid-button-local-link-disabled-text-color, rgba(0, 0, 0, 0.25)));
+    text-decoration: none;
+    cursor: not-allowed;
+  }
   /* ========================================
-   * CSS CUSTOM PROPERTIES (Design Tokens)
+   * SHAPE VARIANTS
    * ======================================== */
-  :host {
-    /* ----------------------------------------
-     * DEFAULT BUTTON STYLES
-     * ---------------------------------------- */
-    --hybrid-button-local-border-top: 2px solid #d0d0d0;
-    --hybrid-button-local-border-bottom: 2px solid #d0d0d0;
-    --hybrid-button-local-border-left: 2px solid #d0d0d0;
-    --hybrid-button-local-border-right: 2px solid #d0d0d0;
-    --hybrid-button-local-border-top-left-radius: 0px;
-    --hybrid-button-local-border-top-right-radius: 0px;
-    --hybrid-button-local-border-bottom-left-radius: 0px;
-    --hybrid-button-local-border-bottom-right-radius: 0px;
-    --hybrid-button-local-background-color: #f9f9f9;
-    --hybrid-button-local-text-color: #393939;
-    --hybrid-button-local-hover-border-color: #1677ff;
-    --hybrid-button-local-hover-color: #1677ff;
-    --hybrid-button-local-font-size: 0.9rem;
-    --hybrid-button-local-font-weight: normal;
-    --hybrid-button-local-text-transform: none;
-    --hybrid-button-local-active-border-color: #1661b1;
-    --hybrid-button-local-active-color: #184d86;
-    --hybrid-button-local-disabled-background-color: #c6c6c6;
-    --hybrid-button-local-disabled-text-color: #8d8d8d;
-    --hybrid-button-local-disabled-border-color: #bbb;
-    --hybrid-button-local-height: auto;
-    --hybrid-button-local-width: auto;
-    --hybrid-button-local-padding-y: 0.5rem;
-    --hybrid-button-local-padding-x: 0.6rem;
-    --hybrid-button-local-icon-width: 18px;
-    --hybrid-button-local-icon-height: 14px;
-    /* ----------------------------------------
-     * PRIMARY BUTTON STYLES
-     * ---------------------------------------- */
-    /* ----------------------------------------
-     * PRIMARY BUTTON STYLES
-     * ---------------------------------------- */
-    --hybrid-button-local-primary-border-color: #0f62fe;
-    --hybrid-button-local-primary-background-color: #0f62fe;
-    --hybrid-button-local-primary-text-color: #ffffff;
-    --hybrid-button-local-primary-outline: 1px solid white;
-    --hybrid-button-local-primary-outline-offset: -3px;
-    --hybrid-button-local-primary-hover-background-color: #0353e9;
-    --hybrid-button-local-primary-hover-border-color: #0353e9;
-    --hybrid-button-local-primary-active-background-color: #0f62fe;
-    --hybrid-button-local-primary-active-border-color: #0f62fe;
-    --hybrid-button-local-primary-disabled-text-color: #8d8d8d;
-    --hybrid-button-local-primary-disabled-background-color: #c6c6c6;
-    --hybrid-button-local-primary-disabled-border-color: #c6c6c6;
-    --hybrid-button-local-primary-dashed-border-color: #ffffff;
-    /* ----------------------------------------
-     * DANGER BUTTON STYLES
-     * ---------------------------------------- */
-    /* ----------------------------------------
-     * DANGER BUTTON STYLES
-     * ---------------------------------------- */
-    --hybrid-button-local-danger-background-color: #da1e28;
-    --hybrid-button-local-danger-text-color: #ffffff;
-    --hybrid-button-local-danger-border-color: #da1e28;
-    --hybrid-button-local-danger-outline: 1px solid white;
-    --hybrid-button-local-danger-outline-offset: -3px;
-    --hybrid-button-local-danger-hover-background-color: #ba1b23;
-    --hybrid-button-local-danger-hover-border-color: #ba1b23;
-    --hybrid-button-local-danger-active-background-color: #da1e28;
-    --hybrid-button-local-danger-active-border-color: #0f62fe;
-    --hybrid-button-local-danger-disabled-background-color: #c6c6c6;
-    --hybrid-button-local-danger-disabled-text-color: #8d8d8d;
-    --hybrid-button-local-danger-disabled-border-color: #c6c6c6;
-    --hybrid-button-local-danger-dashed-border-color: #ffffff;
-    /* ----------------------------------------
-     * GHOST BUTTON STYLES
-     * ---------------------------------------- */
-    /* ----------------------------------------
-     * GHOST BUTTON STYLES
-     * ---------------------------------------- */
-    --hybrid-button-local-ghost-background-color: #ffffff;
-    --hybrid-button-local-ghost-text-color: #0f62fe;
-    --hybrid-button-local-ghost-border-color: #ffffff;
-    --hybrid-button-local-ghost-active-background-color: #ffffff;
-    --hybrid-button-local-ghost-active-text-color: #054ada;
-    --hybrid-button-local-ghost-active-border-color: #0f62fe;
-    --hybrid-button-local-ghost-hover-background-color: #e5e5e5;
-    --hybrid-button-local-ghost-hover-border-color: #e5e5e5;
-    --hybrid-button-local-ghost-hover-text-color: #054ada;
-    --hybrid-button-local-ghost-disabled-background-color: #ffffff;
-    --hybrid-button-local-ghost-disabled-text-color: #c6c6c6;
-    --hybrid-button-local-ghost-disabled-border-color: #ffffff;
-    --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;
+  /* Circle button shape */
+  button[data-shape='circle'], a[data-shape='circle'] {
+    border-radius: 50%;
+    width: var(--hybrid-button-circle-size, var(--hybrid-button-local-circle-size, 32px));
+    height: var(--hybrid-button-circle-size, var(--hybrid-button-local-circle-size, 32px));
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
-    /* ----------------------------------------
-     * SECONDARY BUTTON STYLES
-     * ---------------------------------------- */
+  button[data-shape='circle'][data-size='small'], a[data-shape='circle'][data-size='small'] {
+    width: var(--hybrid-button-circle-size-small, var(--hybrid-button-local-circle-size-small, 24px));
+    height: var(--hybrid-button-circle-size-small, var(--hybrid-button-local-circle-size-small, 24px));
+  }
-    /* ----------------------------------------
-     * SECONDARY BUTTON STYLES
-     * ---------------------------------------- */
-    --hybrid-button-local-secondary-background-color: #393939;
-    --hybrid-button-local-secondary-border-color: #393939;
-    --hybrid-button-local-secondary-text-color: #ffffff;
-    --hybrid-button-local-secondary-outline: 1px solid white;
-    --hybrid-button-local-secondary-outline-offset: -3px;
-    --hybrid-button-local-secondary-hover-background-color: #4c4c4c;
-    --hybrid-button-local-secondary-hover-border-color: #4c4c4c;
-    --hybrid-button-local-secondary-active-background-color: #393939;
-    --hybrid-button-local-secondary-active-border-color: #0f62fe;
-    --hybrid-button-local-secondary-disabled-background-color: #c6c6c6;
-    --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;
-    --hybrid-button-local-secondary-disabled-border-color: #c6c6c6;
-    --hybrid-button-local-secondary-dashed-border-color: #ffffff;
+  button[data-shape='circle'][data-size='large'], a[data-shape='circle'][data-size='large'] {
+    width: var(--hybrid-button-circle-size-large, var(--hybrid-button-local-circle-size-large, 40px));
+    height: var(--hybrid-button-circle-size-large, var(--hybrid-button-local-circle-size-large, 40px));
+  }
-    /* ----------------------------------------
-     * SIZE VARIANTS
-     * ---------------------------------------- */
+  /* Round button shape */
+  button[data-shape='round'], a[data-shape='round'] {
+    border-radius: var(--hybrid-button-round-border-radius, var(--hybrid-button-local-round-border-radius, 16px));
+  }
-    /* ----------------------------------------
-     * SIZE VARIANTS
-     * ---------------------------------------- */
-    /* Large button sizing */
-    --hybrid-large-button-local-padding-y: 0.5rem;
-    --hybrid-large-button-local-padding-x: 0.9rem;
-    --hybrid-large-button-local-font-size: 1rem;
+  /* ========================================
+   * BLOCK BUTTON
+   * ======================================== */
-    /* Small button sizing */
-    --hybrid-small-button-local-padding-y: 0.5rem;
-    --hybrid-small-button-local-padding-x: 0.4rem;
-    --hybrid-small-button-local-font-size: 0.7rem;
+  button[data-block='true'], a[data-block='true'] {
+    width: 100%;
+    display: block;
   }
+  /* ========================================
+   * VARIANT STYLES
+   * ======================================== */
+  /* Primary button variant */
   /* ========================================
    * DARK THEME OVERRIDES
    * ======================================== */
@@ -565,6 +547,73 @@ const buttonStyles = css `
     --hybrid-button-local-danger-disabled-text-color: #8d8d8d;
     --hybrid-button-local-danger-disabled-border-color: #6f6f6f;
     --hybrid-button-local-danger-dashed-border-color: #ffffff;
+    /* Text button dark theme overrides */
+    --hybrid-button-local-text-background-color: transparent;
+    --hybrid-button-local-text-text-color: #ffffff;
+    --hybrid-button-local-text-border-color: transparent;
+    --hybrid-button-local-text-hover-background-color: rgba(255, 255, 255, 0.1);
+    --hybrid-button-local-text-hover-text-color: #ffffff;
+    --hybrid-button-local-text-hover-border-color: transparent;
+    --hybrid-button-local-text-active-background-color: rgba(255, 255, 255, 0.15);
+    --hybrid-button-local-text-active-text-color: #ffffff;
+    --hybrid-button-local-text-active-border-color: transparent;
+    --hybrid-button-local-text-disabled-background-color: transparent;
+    --hybrid-button-local-text-disabled-text-color: #6f6f6f;
+    --hybrid-button-local-text-disabled-border-color: transparent;
+    /* Link button dark theme overrides */
+    --hybrid-button-local-link-background-color: transparent;
+    --hybrid-button-local-link-text-color: #78a9ff;
+    --hybrid-button-local-link-border-color: transparent;
+    --hybrid-button-local-link-hover-background-color: transparent;
+    --hybrid-button-local-link-hover-text-color: #a6c8ff;
+    --hybrid-button-local-link-hover-border-color: transparent;
+    --hybrid-button-local-link-active-background-color: transparent;
+    --hybrid-button-local-link-active-text-color: #a6c8ff;
+    --hybrid-button-local-link-active-border-color: transparent;
+    --hybrid-button-local-link-disabled-background-color: transparent;
+    --hybrid-button-local-link-disabled-text-color: #6f6f6f;
+    --hybrid-button-local-link-disabled-border-color: transparent;
+  }
+  /* ========================================
+   * RIPPLE EFFECT STYLES
+   * ======================================== */
+  /* Ripple effect animation */
+  .ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.4);
+    transform: scale(0);
+    animation: ripple-animation 0.6s linear;
+    pointer-events: none;
+  }
+  /* Darker ripple for light buttons */
+  button[data-type='default'] .ripple,
+  button[data-type='ghost'] .ripple {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  /* Lighter ripple for dark buttons */
+  button[data-type='primary'] .ripple,
+  button[data-type='danger'] .ripple {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  /* Ripple animation keyframes */
+  @keyframes ripple-animation {
+    to {
+      transform: scale(4);
+      opacity: 0;
+    }
+  }
+  /* Disable ripple when component is disabled */
+  button:disabled .ripple {
+    display: none;
   }
 `;
 /**
@@ -572,7 +621,7 @@ const buttonStyles = css `
  *
  * @description
  * This export provides the complete styling system for the button component,
- * including all variants, states, sizes, and theme support.
+ * including all variants, states, sizes, theme support, and CSS custom properties.
  *
  * @usage
  * Import and use in the component's styles property:
@@ -584,5 +633,5 @@ const buttonStyles = css `
  * })
  * ```
  */
-export const styles = [buttonStyles];
-//# sourceMappingURL=nr-button.style.js.map
+export const styles = [buttonStyles, buttonVariables];
+//# sourceMappingURL=button.style.js.map

package/button.style.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"button.style.js","sourceRoot":"","sources":["../../../src/components/button/button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D;;;;;;;;;;;;;;GAcG;AACH,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwlBvB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { buttonVariables } from './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 /* Positioning for ripple effect */\n position: relative;\n overflow: hidden;\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 * NEW BUTTON TYPES\n * ======================================== */\n\n /* TEXT BUTTON VARIANT */\n button[data-type='text'] {\n background-color: var(--hybrid-button-text-background-color, var(--hybrid-button-local-text-background-color, transparent));\n color: var(--hybrid-button-text-text-color, var(--hybrid-button-local-text-text-color, #1890ff));\n border: none;\n box-shadow: none;\n }\n\n button[data-type='text'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-text-text-color, var(--hybrid-button-local-text-text-color, #1890ff));\n }\n\n button[data-type='text']:hover:not(:disabled) {\n background-color: var(--hybrid-button-text-hover-background-color, var(--hybrid-button-local-text-hover-background-color, rgba(24, 144, 255, 0.06)));\n color: var(--hybrid-button-text-hover-text-color, var(--hybrid-button-local-text-hover-text-color, #40a9ff));\n }\n\n button[data-type='text']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-text-hover-text-color, var(--hybrid-button-local-text-hover-text-color, #40a9ff));\n }\n\n button[data-type='text']:active:not(:disabled) {\n background-color: var(--hybrid-button-text-active-background-color, var(--hybrid-button-local-text-active-background-color, rgba(24, 144, 255, 0.15)));\n color: var(--hybrid-button-text-active-text-color, var(--hybrid-button-local-text-active-text-color, #096dd9));\n }\n\n button[data-type='text']:disabled {\n background-color: transparent;\n color: var(--hybrid-button-text-disabled-text-color, var(--hybrid-button-local-text-disabled-text-color, rgba(0, 0, 0, 0.25)));\n border: none;\n }\n\n /* LINK BUTTON VARIANT */\n a[data-type='link'], button[data-type='link'] {\n background-color: transparent;\n color: var(--hybrid-button-link-text-color, var(--hybrid-button-local-link-text-color, #1890ff));\n border: none;\n box-shadow: none;\n text-decoration: underline;\n cursor: pointer;\n }\n\n a[data-type='link'] hy-icon, button[data-type='link'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-link-text-color, var(--hybrid-button-local-link-text-color, #1890ff));\n }\n\n a[data-type='link']:hover, button[data-type='link']:hover:not(:disabled) {\n color: var(--hybrid-button-link-hover-text-color, var(--hybrid-button-local-link-hover-text-color, #40a9ff));\n }\n\n a[data-type='link']:hover hy-icon, button[data-type='link']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-link-hover-text-color, var(--hybrid-button-local-link-hover-text-color, #40a9ff));\n }\n\n a[data-type='link']:active, button[data-type='link']:active:not(:disabled) {\n color: var(--hybrid-button-link-active-text-color, var(--hybrid-button-local-link-active-text-color, #096dd9));\n }\n\n button[data-type='link']:disabled {\n color: var(--hybrid-button-link-disabled-text-color, var(--hybrid-button-local-link-disabled-text-color, rgba(0, 0, 0, 0.25)));\n text-decoration: none;\n cursor: not-allowed;\n }\n\n /* ========================================\n * SHAPE VARIANTS\n * ======================================== */\n\n /* Circle button shape */\n button[data-shape='circle'], a[data-shape='circle'] {\n border-radius: 50%;\n width: var(--hybrid-button-circle-size, var(--hybrid-button-local-circle-size, 32px));\n height: var(--hybrid-button-circle-size, var(--hybrid-button-local-circle-size, 32px));\n padding: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n button[data-shape='circle'][data-size='small'], a[data-shape='circle'][data-size='small'] {\n width: var(--hybrid-button-circle-size-small, var(--hybrid-button-local-circle-size-small, 24px));\n height: var(--hybrid-button-circle-size-small, var(--hybrid-button-local-circle-size-small, 24px));\n }\n\n button[data-shape='circle'][data-size='large'], a[data-shape='circle'][data-size='large'] {\n width: var(--hybrid-button-circle-size-large, var(--hybrid-button-local-circle-size-large, 40px));\n height: var(--hybrid-button-circle-size-large, var(--hybrid-button-local-circle-size-large, 40px));\n }\n\n /* Round button shape */\n button[data-shape='round'], a[data-shape='round'] {\n border-radius: var(--hybrid-button-round-border-radius, var(--hybrid-button-local-round-border-radius, 16px));\n }\n\n /* ========================================\n * BLOCK BUTTON\n * ======================================== */\n\n button[data-block='true'], a[data-block='true'] {\n width: 100%;\n display: block;\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 /* Text button dark theme overrides */\n --hybrid-button-local-text-background-color: transparent;\n --hybrid-button-local-text-text-color: #ffffff;\n --hybrid-button-local-text-border-color: transparent;\n --hybrid-button-local-text-hover-background-color: rgba(255, 255, 255, 0.1);\n --hybrid-button-local-text-hover-text-color: #ffffff;\n --hybrid-button-local-text-hover-border-color: transparent;\n --hybrid-button-local-text-active-background-color: rgba(255, 255, 255, 0.15);\n --hybrid-button-local-text-active-text-color: #ffffff;\n --hybrid-button-local-text-active-border-color: transparent;\n --hybrid-button-local-text-disabled-background-color: transparent;\n --hybrid-button-local-text-disabled-text-color: #6f6f6f;\n --hybrid-button-local-text-disabled-border-color: transparent;\n\n /* Link button dark theme overrides */\n --hybrid-button-local-link-background-color: transparent;\n --hybrid-button-local-link-text-color: #78a9ff;\n --hybrid-button-local-link-border-color: transparent;\n --hybrid-button-local-link-hover-background-color: transparent;\n --hybrid-button-local-link-hover-text-color: #a6c8ff;\n --hybrid-button-local-link-hover-border-color: transparent;\n --hybrid-button-local-link-active-background-color: transparent;\n --hybrid-button-local-link-active-text-color: #a6c8ff;\n --hybrid-button-local-link-active-border-color: transparent;\n --hybrid-button-local-link-disabled-background-color: transparent;\n --hybrid-button-local-link-disabled-text-color: #6f6f6f;\n --hybrid-button-local-link-disabled-border-color: transparent;\n }\n\n /* ========================================\n * RIPPLE EFFECT STYLES\n * ======================================== */\n\n /* Ripple effect animation */\n .ripple {\n position: absolute;\n border-radius: 50%;\n background-color: rgba(255, 255, 255, 0.4);\n transform: scale(0);\n animation: ripple-animation 0.6s linear;\n pointer-events: none;\n }\n\n /* Darker ripple for light buttons */\n button[data-type='default'] .ripple,\n button[data-type='ghost'] .ripple {\n background-color: rgba(0, 0, 0, 0.1);\n }\n\n /* Lighter ripple for dark buttons */\n button[data-type='primary'] .ripple,\n button[data-type='danger'] .ripple {\n background-color: rgba(255, 255, 255, 0.3);\n }\n\n /* Ripple animation keyframes */\n @keyframes ripple-animation {\n to {\n transform: scale(4);\n opacity: 0;\n }\n }\n\n /* Disable ripple when component is disabled */\n button:disabled .ripple {\n display: none;\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/button.style.variables.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * Button component CSS custom properties (design tokens)
+ *
+ * This file contains all the CSS custom properties used by the nr-button component,
+ * organized by functionality and including both light and dark theme variants.
+ *
+ * The styling system uses CSS custom properties with fallbacks to allow
+ * for both global and local customization of button appearance.
+ */
+export declare const buttonVariables: import("lit").CSSResult;
+//# sourceMappingURL=button.style.variables.d.ts.map

package/button.style.variables.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"button.style.variables.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.style.variables.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,yBAsL3B,CAAC"}

package/button.style.variables.js ADDED Viewed

@@ -0,0 +1,194 @@
+import { css } from 'lit';
+/**
+ * Button component CSS custom properties (design tokens)
+ *
+ * This file contains all the CSS custom properties used by the nr-button component,
+ * organized by functionality and including both light and dark theme variants.
+ *
+ * The styling system uses CSS custom properties with fallbacks to allow
+ * for both global and local customization of button appearance.
+ */
+export const buttonVariables = css `
+  :host {
+    /* ----------------------------------------
+     * DEFAULT BUTTON STYLES
+     * ---------------------------------------- */
+    --hybrid-button-local-border-top: 2px solid #d0d0d0;
+    --hybrid-button-local-border-bottom: 2px solid #d0d0d0;
+    --hybrid-button-local-border-left: 2px solid #d0d0d0;
+    --hybrid-button-local-border-right: 2px solid #d0d0d0;
+    --hybrid-button-local-border-top-left-radius: 0px;
+    --hybrid-button-local-border-top-right-radius: 0px;
+    --hybrid-button-local-border-bottom-left-radius: 0px;
+    --hybrid-button-local-border-bottom-right-radius: 0px;
+    --hybrid-button-local-background-color: #f9f9f9;
+    --hybrid-button-local-text-color: #393939;
+    --hybrid-button-local-hover-border-color: #1677ff;
+    --hybrid-button-local-hover-color: #1677ff;
+    --hybrid-button-local-font-size: 0.9rem;
+    --hybrid-button-local-font-weight: normal;
+    --hybrid-button-local-text-transform: none;
+    --hybrid-button-local-active-border-color: #1661b1;
+    --hybrid-button-local-active-color: #184d86;
+    --hybrid-button-local-disabled-background-color: #c6c6c6;
+    --hybrid-button-local-disabled-text-color: #8d8d8d;
+    --hybrid-button-local-disabled-border-color: #bbb;
+    --hybrid-button-local-height: auto;
+    --hybrid-button-local-width: auto;
+    --hybrid-button-local-padding-y: 0.5rem;
+    --hybrid-button-local-padding-x: 0.6rem;
+    --hybrid-button-local-icon-width: 18px;
+    --hybrid-button-local-icon-height: 14px;
+    /* ----------------------------------------
+     * PRIMARY BUTTON STYLES
+     * ---------------------------------------- */
+    --hybrid-button-local-primary-border-color: #0f62fe;
+    --hybrid-button-local-primary-background-color: #0f62fe;
+    --hybrid-button-local-primary-text-color: #ffffff;
+    --hybrid-button-local-primary-outline: 1px solid white;
+    --hybrid-button-local-primary-outline-offset: -3px;
+    --hybrid-button-local-primary-hover-background-color: #0353e9;
+    --hybrid-button-local-primary-hover-border-color: #0353e9;
+    --hybrid-button-local-primary-active-background-color: #0f62fe;
+    --hybrid-button-local-primary-active-border-color: #0f62fe;
+    --hybrid-button-local-primary-disabled-text-color: #8d8d8d;
+    --hybrid-button-local-primary-disabled-background-color: #c6c6c6;
+    --hybrid-button-local-primary-disabled-border-color: #c6c6c6;
+    --hybrid-button-local-primary-dashed-border-color: #ffffff;
+    /* ----------------------------------------
+     * DANGER BUTTON STYLES
+     * ---------------------------------------- */
+    --hybrid-button-local-danger-background-color: #da1e28;
+    --hybrid-button-local-danger-text-color: #ffffff;
+    --hybrid-button-local-danger-border-color: #da1e28;
+    --hybrid-button-local-danger-outline: 1px solid white;
+    --hybrid-button-local-danger-outline-offset: -3px;
+    --hybrid-button-local-danger-hover-background-color: #ba1b23;
+    --hybrid-button-local-danger-hover-border-color: #ba1b23;
+    --hybrid-button-local-danger-active-background-color: #da1e28;
+    --hybrid-button-local-danger-active-border-color: #0f62fe;
+    --hybrid-button-local-danger-disabled-background-color: #c6c6c6;
+    --hybrid-button-local-danger-disabled-text-color: #8d8d8d;
+    --hybrid-button-local-danger-disabled-border-color: #c6c6c6;
+    --hybrid-button-local-danger-dashed-border-color: #ffffff;
+    /* ----------------------------------------
+     * GHOST BUTTON STYLES
+     * ---------------------------------------- */
+    --hybrid-button-local-ghost-background-color: #ffffff;
+    --hybrid-button-local-ghost-text-color: #0f62fe;
+    --hybrid-button-local-ghost-border-color: #ffffff;
+    --hybrid-button-local-ghost-active-background-color: #ffffff;
+    --hybrid-button-local-ghost-active-text-color: #054ada;
+    --hybrid-button-local-ghost-active-border-color: #0f62fe;
+    --hybrid-button-local-ghost-hover-background-color: #e5e5e5;
+    --hybrid-button-local-ghost-hover-border-color: #e5e5e5;
+    --hybrid-button-local-ghost-hover-text-color: #054ada;
+    --hybrid-button-local-ghost-disabled-background-color: #ffffff;
+    --hybrid-button-local-ghost-disabled-text-color: #c6c6c6;
+    --hybrid-button-local-ghost-disabled-border-color: #ffffff;
+    --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;
+    /* ----------------------------------------
+     * SECONDARY BUTTON STYLES
+     * ---------------------------------------- */
+    --hybrid-button-local-secondary-background-color: #393939;
+    --hybrid-button-local-secondary-border-color: #393939;
+    --hybrid-button-local-secondary-text-color: #ffffff;
+    --hybrid-button-local-secondary-outline: 1px solid white;
+    --hybrid-button-local-secondary-outline-offset: -3px;
+    --hybrid-button-local-secondary-hover-background-color: #4c4c4c;
+    --hybrid-button-local-secondary-hover-border-color: #4c4c4c;
+    --hybrid-button-local-secondary-active-background-color: #393939;
+    --hybrid-button-local-secondary-active-border-color: #0f62fe;
+    --hybrid-button-local-secondary-disabled-background-color: #c6c6c6;
+    --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;
+    --hybrid-button-local-secondary-disabled-border-color: #c6c6c6;
+    --hybrid-button-local-secondary-dashed-border-color: #ffffff;
+    /* ----------------------------------------
+     * SIZE VARIANTS
+     * ---------------------------------------- */
+    /* Large button sizing */
+    --hybrid-large-button-local-padding-y: 0.5rem;
+    --hybrid-large-button-local-padding-x: 0.9rem;
+    --hybrid-large-button-local-font-size: 1rem;
+    /* Small button sizing */
+    --hybrid-small-button-local-padding-y: 0.5rem;
+    --hybrid-small-button-local-padding-x: 0.4rem;
+    --hybrid-small-button-local-font-size: 0.7rem;
+  }
+  /* ========================================
+   * DARK THEME OVERRIDES
+   * ======================================== */
+  /**
+   * Dark theme styles using data-theme attribute on button element
+   * These override the light theme defaults when data-theme="dark" is applied
+   */
+  button[data-theme="dark"] {
+    /* Default button dark theme overrides */
+    --hybrid-button-local-background-color: #000000;
+    --hybrid-button-local-text-color: #ffffff;
+    --hybrid-button-local-hover-border-color: #6f6f6f;
+    --hybrid-button-local-hover-color: #6f6f6f;
+    --hybrid-button-local-active-border-color: #c6c6c6;
+    --hybrid-button-local-active-color: #c6c6c6;
+    --hybrid-button-local-disabled-background-color: #c6c6c6;
+    /* Primary button dark theme overrides */
+    --hybrid-button-local-primary-outline: 1px solid black;
+    --hybrid-button-local-primary-outline-offset: -3px;
+    --hybrid-button-local-primary-active-border-color: #ffffff;
+    --hybrid-button-local-primary-disabled-text-color: #c6c6c6;
+    --hybrid-button-local-primary-disabled-background-color: #8d8d8d;
+    --hybrid-button-local-primary-disabled-border-color: #8d8d8d;
+    /* Secondary button dark theme overrides */
+    --hybrid-button-local-secondary-background-color: #6f6f6f;
+    --hybrid-button-local-secondary-border-color: #6f6f6f;
+    --hybrid-button-local-secondary-text-color: #ffffff;
+    --hybrid-button-local-secondary-active-border-color: #ffffff;
+    --hybrid-button-local-secondary-active-background-color: #6f6f6f;
+    --hybrid-button-local-secondary-outline: 1px solid black;
+    --hybrid-button-local-secondary-outline-offset: -3px;
+    --hybrid-button-local-secondary-hover-background-color: #606060;
+    --hybrid-button-local-secondary-hover-border-color: #606060;
+    --hybrid-button-local-secondary-disabled-background-color: #6f6f6f;
+    --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;
+    --hybrid-button-local-secondary-disabled-border-color: #6f6f6f;
+    --hybrid-button-local-secondary-dashed-border-color: #ffffff;
+    /* Ghost button dark theme overrides */
+    --hybrid-button-local-ghost-background-color: transparent;
+    --hybrid-button-local-ghost-text-color: #78a9ff;
+    --hybrid-button-local-ghost-border-color: transparent;
+    --hybrid-button-local-ghost-active-background-color: transparent;
+    --hybrid-button-local-ghost-active-text-color: #a6c8ff;
+    --hybrid-button-local-ghost-active-border-color: #ffffff;
+    --hybrid-button-local-ghost-hover-background-color: #4c4c4c;
+    --hybrid-button-local-ghost-hover-border-color: #4c4c4c;
+    --hybrid-button-local-ghost-hover-text-color: #a6c8ff;
+    --hybrid-button-local-ghost-disabled-background-color: transparent;
+    --hybrid-button-local-ghost-disabled-text-color: #6f6f6f;
+    --hybrid-button-local-ghost-disabled-border-color: transparent;
+    --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;
+    /* Danger button dark theme overrides */
+    --hybrid-button-local-danger-outline: 1px solid #000000;
+    --hybrid-button-local-danger-outline-offset: -3px;
+    --hybrid-button-local-danger-hover-background-color: #ba1b23;
+    --hybrid-button-local-danger-hover-border-color: #ba1b23;
+    --hybrid-button-local-danger-active-background-color: #da1e28;
+    --hybrid-button-local-danger-active-border-color: #ffffff;
+    --hybrid-button-local-danger-disabled-background-color: #6f6f6f;
+    --hybrid-button-local-danger-disabled-text-color: #8d8d8d;
+    --hybrid-button-local-danger-disabled-border-color: #6f6f6f;
+    --hybrid-button-local-danger-dashed-border-color: #ffffff;
+  }
+`;
+//# sourceMappingURL=button.style.variables.js.map