@nuraly/lumenui 0.1.0

package/packages/themes/dist/carbon.css

@@ -0,0 +1,2987 @@
+/**
+ * Carbon Theme Bundle
+ * Generated automatically - do not edit directly
+ * Source: src/shared/themes/carbon
+ */
+
+/* ==============================================
+ * theme.css
+ * ============================================== */
+
+:root {
+
+  --nuraly-font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  --nuraly-font-weight-regular: 400;
+  --nuraly-font-weight-medium: 500;
+  --nuraly-font-weight-semibold: 600;
+  --nuraly-font-weight-bold: 700;
+
+  --nuraly-font-size-01: 0.75rem;    
+  --nuraly-font-size-02: 0.875rem;   
+  --nuraly-font-size-03: 1rem;       
+  --nuraly-font-size-04: 1.125rem;   
+  --nuraly-font-size-05: 1.25rem;    
+  --nuraly-font-size-06: 1.5rem;     
+  --nuraly-font-size-07: 1.75rem;    
+  --nuraly-font-size-08: 2rem;       
+
+  --nuraly-line-height-01: 1.25;
+  --nuraly-line-height-02: 1.375;
+  --nuraly-line-height-03: 1.5;
+
+  --nuraly-color-primary: #0f62fe;
+  --nuraly-color-primary-hover: #0050e6;
+  --nuraly-color-primary-active: #002d9c;
+  --nuraly-color-primary-light: #a6c8ff;
+  --nuraly-color-primary-dark: #002d9c;
+  
+  --nuraly-color-secondary: #393939;
+  --nuraly-color-secondary-hover: #4c4c4c;
+  --nuraly-color-secondary-active: #656565;
+  --nuraly-color-secondary-light: #c6c6c6;
+  --nuraly-color-secondary-dark: #161616;
+  
+  --nuraly-color-success: #198038;
+  --nuraly-color-success-hover: #156930;
+  --nuraly-color-success-active: #0e4b25;
+  --nuraly-color-success-light: #9ef0a9;
+  --nuraly-color-success-dark: #0e4b25;
+  
+  --nuraly-color-warning: #f1c21b;
+  --nuraly-color-warning-hover: #ddb00e;
+  --nuraly-color-warning-active: #b3900c;
+  --nuraly-color-warning-light: #fcf4d6;
+  --nuraly-color-warning-dark: #b3900c;
+  
+  --nuraly-color-danger: #da1e28;
+  --nuraly-color-danger-hover: #b81921;
+  --nuraly-color-danger-active: #750e13;
+  --nuraly-color-danger-light: #ffb3b8;
+  --nuraly-color-danger-dark: #750e13;
+  
+  --nuraly-color-info: #0f62fe;
+  --nuraly-color-info-hover: #0050e6;
+  --nuraly-color-info-active: #002d9c;
+  --nuraly-color-info-light: #a6c8ff;
+  --nuraly-color-info-dark: #002d9c;
+
+  --nuraly-color-background: #ffffff;
+  --nuraly-color-background-hover: #f4f4f4;
+  --nuraly-color-background-active: #c6c6c6;
+  --nuraly-color-background-disabled: #f4f4f4;
+  --nuraly-color-background-overlay: rgba(22, 22, 22, 0.5);
+
+  --nuraly-color-text: #161616;
+  --nuraly-color-text-secondary: #525252;
+  --nuraly-color-text-tertiary: #8d8d8d;
+  --nuraly-color-text-on-color: #ffffff;
+  --nuraly-color-text-disabled: #c6c6c6;
+  --nuraly-color-text-inverse: #ffffff;
+
+  --nuraly-color-border: #e0e0e0;
+  --nuraly-color-border-subtle: #f4f4f4;
+  --nuraly-color-border-strong: #8d8d8d;
+  --nuraly-color-border-inverse: #393939;
+  --nuraly-color-border-brand: #0f62fe;
+  --nuraly-color-border-danger: #da1e28;
+  --nuraly-color-border-success: #198038;
+  --nuraly-color-border-warning: #f1c21b;
+
+  --nuraly-border-radius-none: 0;
+  --nuraly-border-radius-xs: 0;
+  --nuraly-border-radius-sm: 0;
+  --nuraly-border-radius-md: 0;
+  --nuraly-border-radius-lg: 0;
+  --nuraly-border-radius-xl: 0;
+  --nuraly-border-radius-2xl: 0;
+  --nuraly-border-radius-full: 0;
+
+  --nuraly-border-width-0: 0;
+  --nuraly-border-width-1: 1px;
+  --nuraly-border-width-2: 2px;
+  --nuraly-border-width-4: 4px;
+
+  --nuraly-spacing-01: 0.125rem;  
+  --nuraly-spacing-02: 0.25rem;   
+  --nuraly-spacing-03: 0.5rem;    
+  --nuraly-spacing-04: 0.75rem;   
+  --nuraly-spacing-05: 1rem;      
+  --nuraly-spacing-06: 1.5rem;    
+  --nuraly-spacing-07: 2rem;      
+  --nuraly-spacing-08: 2.5rem;    
+  --nuraly-spacing-09: 3rem;      
+  --nuraly-spacing-10: 4rem;      
+  --nuraly-spacing-11: 5rem;      
+  --nuraly-spacing-12: 6rem;      
+
+  --nuraly-shadow-xs: none;
+  --nuraly-shadow-sm: none;
+  --nuraly-shadow-md: none;
+  --nuraly-shadow-lg: none;
+  --nuraly-shadow-xl: none;
+  --nuraly-shadow-2xl: none;
+  --nuraly-shadow-inner: none;
+
+  --nuraly-focus-outline: 2px solid #0f62fe;
+  --nuraly-focus-outline-offset: 1px;
+  --nuraly-focus-color: #0f62fe;
+  --nuraly-focus-ring: 0 0 0 2px rgba(15, 98, 254, 0.2);
+
+  --nuraly-size-sm: 2rem;     
+  --nuraly-size-md: 2.5rem;   
+  --nuraly-size-lg: 3rem;     
+  --nuraly-size-xl: 4rem;     
+
+  --nuraly-z-dropdown: 1000;
+  --nuraly-z-sticky: 1020;
+  --nuraly-z-fixed: 1030;
+  --nuraly-z-modal: 1040;
+  --nuraly-z-popover: 1050;
+  --nuraly-z-tooltip: 1060;
+  --nuraly-z-toast: 1070;
+
+  --nuraly-transition-fast: 110ms;
+  --nuraly-transition-normal: 240ms;
+  --nuraly-transition-slow: 400ms;
+
+  --nuraly-ease-linear: linear;
+  --nuraly-ease-in: cubic-bezier(0.25, 0, 1, 1);
+  --nuraly-ease-out: cubic-bezier(0, 0, 0.25, 1);
+  --nuraly-ease-in-out: cubic-bezier(0.25, 0, 0.25, 1);
+
+  --nuraly-color-surface: #ffffff;
+  --nuraly-color-surface-hover: #f4f4f4;
+  --nuraly-color-surface-active: #e0e0e0;
+  --nuraly-color-surface-disabled: #f4f4f4;
+  --nuraly-color-surface-elevated: #ffffff;
+}
+
+[data-theme="carbon-light"]{
+  
+  --nuraly-color-primary: #0f62fe;
+}
+
+[data-theme="carbon-dark"],
+html[data-theme="carbon-dark"],
+body[data-theme="carbon-dark"],
+html[data-theme="carbon-dark"] *,
+body[data-theme="carbon-dark"] * {
+  
+  --nuraly-color-primary: #78a9ff !important;
+  --nuraly-color-primary-hover: #4589ff !important;
+  --nuraly-color-primary-active: #0f62fe !important;
+  --nuraly-color-primary-light: #a6c8ff !important;
+  --nuraly-color-primary-dark: #002d9c !important;
+  
+  --nuraly-color-secondary: #6f6f6f !important;
+  --nuraly-color-secondary-hover: #8d8d8d !important;
+  --nuraly-color-secondary-active: #a8a8a8 !important;
+  --nuraly-color-secondary-light: #c6c6c6 !important;
+  --nuraly-color-secondary-dark: #161616 !important;
+  
+  --nuraly-color-success: #42be65 !important;
+  --nuraly-color-success-hover: #24a148 !important;
+  --nuraly-color-success-active: #198038 !important;
+  --nuraly-color-success-light: #9ef0a9 !important;
+  --nuraly-color-success-dark: #0e4b25 !important;
+  
+  --nuraly-color-warning: #f1c21b !important;
+  --nuraly-color-warning-hover: #ddb00e !important;
+  --nuraly-color-warning-active: #b3900c !important;
+  --nuraly-color-warning-light: #fcf4d6 !important;
+  --nuraly-color-warning-dark: #b3900c !important;
+  
+  --nuraly-color-danger: #ff8389 !important;
+  --nuraly-color-danger-hover: #ff6168 !important;
+  --nuraly-color-danger-active: #da1e28 !important;
+  --nuraly-color-danger-light: #ffb3b8 !important;
+  --nuraly-color-danger-dark: #750e13 !important;
+  
+  --nuraly-color-info: #78a9ff !important;
+  --nuraly-color-info-hover: #4589ff !important;
+  --nuraly-color-info-active: #0f62fe !important;
+  --nuraly-color-info-light: #a6c8ff !important;
+  --nuraly-color-info-dark: #002d9c !important;
+
+  --nuraly-color-background: #161616 !important;
+  --nuraly-color-background-hover: #262626 !important;
+  --nuraly-color-background-active: #393939 !important;
+  --nuraly-color-background-disabled: #262626 !important;
+  --nuraly-color-background-overlay: rgba(22, 22, 22, 0.75) !important;
+
+  --nuraly-color-text: #ffffff !important;
+  --nuraly-color-text-secondary: #c6c6c6 !important;
+  --nuraly-color-text-tertiary: #8d8d8d !important;
+  --nuraly-color-text-on-color: #161616 !important;
+  --nuraly-color-text-disabled: #8d8d8d !important;
+  --nuraly-color-text-inverse: #161616 !important;
+
+  --nuraly-color-border: #393939 !important;
+  --nuraly-color-border-subtle: #262626 !important;
+  --nuraly-color-border-strong: #6f6f6f !important;
+  --nuraly-color-border-inverse: #e0e0e0 !important;
+  --nuraly-color-border-brand: #78a9ff !important;
+  --nuraly-color-border-danger: #ff8389 !important;
+  --nuraly-color-border-success: #42be65 !important;
+  --nuraly-color-border-warning: #f1c21b !important;
+
+  --nuraly-focus-outline: 2px solid #78a9ff !important;
+  --nuraly-focus-color: #78a9ff !important;
+  --nuraly-focus-ring: 0 0 0 2px rgba(120, 169, 255, 0.2) !important;
+
+  --nuraly-color-surface: #262626 !important;
+  --nuraly-color-surface-hover: #393939 !important;
+  --nuraly-color-surface-active: #525252 !important;
+  --nuraly-color-surface-disabled: #262626 !important;
+  --nuraly-color-surface-elevated: #393939 !important;
+
+  --nuraly-input-border: none;
+  --nuraly-input-outline: none;
+
+  --nuraly-cursor-disabled: not-allowed;
+  --nuraly-cursor-interactive: pointer;
+
+  --nuraly-input-number-icons-width: 24px;
+  --nuraly-input-number-icons-height: 24px;
+  --nuraly-input-number-icons-container-width: 50px;
+  --nuraly-input-number-icons-container-padding-right: 8px;
+  --nuraly-number-icons-padding-left: 4px;
+  --nuraly-number-icons-padding-right: 4px;
+
+  --nuraly-password-icon-padding-left: 8px;
+  --nuraly-password-icon-padding-right: 8px;
+  --nuraly-copy-icon-padding-right: 8px;
+  --nuraly-clear-icon-padding-right: 8px;
+}
+
+/* ==============================================
+ * index.css
+ * ============================================== */
+
+/* ==============================================
+ * button/index.css
+ * ============================================== */
+
+@media screen {
+  [data-theme="carbon-dark"] {
+    
+    --theme-mode: dark;
+  }
+  
+  [data-theme="carbon-light"],
+  :root {
+    
+    --theme-mode: light;
+  }
+}
+
+/* ==============================================
+ * button/common.css
+ * ============================================== */
+
+[data-theme^="carbon"] {
+
+  --nuraly-color-button-disabled: #c6c6c6;
+  --nuraly-color-button-disabled-text: #8d8d8d;
+  --nuraly-color-button-disabled-border: #c6c6c6;
+
+  --nuraly-color-button-focus-outline: #0f62fe;
+  --nuraly-color-button-focus-ring: rgba(15, 98, 254, 0.2);
+
+  --nuraly-shadow-button: none;
+  --nuraly-shadow-button-hover: none;
+  --nuraly-shadow-button-active: none;
+  --nuraly-shadow-button-focus: 0 0 0 2px rgba(15, 98, 254, 0.2);
+
+  --nuraly-border-radius-button: 0;
+
+  --nuraly-button-padding-vertical: 0.5rem;      
+  --nuraly-button-padding-horizontal: 1rem;      
+
+  --nuraly-spacing-2: 0.5rem;    
+  --nuraly-spacing-4: 1rem;      
+
+  --nuraly-size-sm: 1.5rem;    
+  --nuraly-size-md: 2rem;      
+  --nuraly-size-lg: 2.5rem;    
+
+  --nuraly-button-icon-spacing: 0.5rem;  
+  --nuraly-button-icon-size: 1rem;       
+}
+
+/* ==============================================
+ * button/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"] {
+
+  --nuraly-color-button-primary: #0f62fe;
+  --nuraly-color-button-primary-hover: #0353e9;
+  --nuraly-color-button-primary-active: #002d9c;
+  --nuraly-color-button-primary-text: #ffffff;
+  --nuraly-color-button-primary-text-hover: #ffffff;
+  --nuraly-color-button-primary-text-active: #ffffff;
+
+  --nuraly-color-button-secondary: #8d8d8d;
+  --nuraly-color-button-secondary-hover: #6f6f6f;
+  --nuraly-color-button-secondary-active: #525252;
+  --nuraly-color-button-secondary-text: #ffffff;
+  --nuraly-color-button-secondary-text-hover: #ffffff;
+  --nuraly-color-button-secondary-text-active: #ffffff;
+
+  --nuraly-color-button-tertiary: #0f62fe;
+  --nuraly-color-button-tertiary-hover: #0353e9;
+  --nuraly-color-button-tertiary-active: #002d9c;
+
+  --nuraly-color-button-danger: #da1e28;
+  --nuraly-color-button-danger-hover: #ba1b23;
+  --nuraly-color-button-danger-active: #750e13;
+  --nuraly-color-button-danger-text: #ffffff;
+  --nuraly-color-button-danger-text-hover: #ffffff;
+  --nuraly-color-button-danger-text-active: #ffffff;
+
+  --nuraly-color-button-outline: transparent;
+  --nuraly-color-button-outline-hover: #f4f4f4;
+  --nuraly-color-button-outline-active: #e0e0e0;
+  --nuraly-color-button-outline-text: #0f62fe;
+  --nuraly-color-button-outline-text-hover: #0353e9;
+  --nuraly-color-button-outline-text-active: #002d9c;
+  --nuraly-color-button-outline-border: #0f62fe;
+  --nuraly-color-button-outline-border-hover: #0353e9;
+  --nuraly-color-button-outline-border-active: #002d9c;
+
+  --nuraly-color-button-ghost: transparent;
+  --nuraly-color-button-ghost-hover: #f4f4f4;
+  --nuraly-color-button-ghost-active: #e0e0e0;
+  --nuraly-color-button-ghost-text: #161616;
+  --nuraly-color-button-ghost-text-hover: #161616;
+  --nuraly-color-button-ghost-text-active: #161616;
+
+  --nuraly-color-button-gradient-bg-start: #0f62fe;
+  --nuraly-color-button-gradient-bg-end: #0f62fe;
+  --nuraly-color-button-gradient-text: #ffffff;
+
+  --nuraly-color-button-separator: #e0e0e0;
+}
+
+/* ==============================================
+ * button/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"],
+html[data-theme="carbon-dark"],
+body[data-theme="carbon-dark"],
+html[data-theme="carbon-dark"] *,
+body[data-theme="carbon-dark"] * {
+
+  --nuraly-color-button-primary: #0362ff !important;
+  --nuraly-color-button-primary-hover: #0050e6 !important;
+  --nuraly-color-button-primary-active: #002d9c !important;
+  --nuraly-color-button-primary-text: #ffffff !important;
+  --nuraly-color-button-primary-text-hover: #ffffff !important;
+  --nuraly-color-button-primary-text-active: #ffffff !important;
+
+  --nuraly-color-button-secondary: #8d8d8d !important;
+  --nuraly-color-button-secondary-hover: #6f6f6f !important;
+  --nuraly-color-button-secondary-active: #525252 !important;
+  --nuraly-color-button-secondary-text: #ffffff !important;
+  --nuraly-color-button-secondary-text-hover: #ffffff !important;
+  --nuraly-color-button-secondary-text-active: #ffffff !important;
+
+  --nuraly-color-button-tertiary: transparent !important;
+  --nuraly-color-button-tertiary-hover: #002d9c !important;
+  --nuraly-color-button-tertiary-active: #0050e6 !important;
+
+  --nuraly-color-button-danger: #da1e28 !important;
+  --nuraly-color-button-danger-hover: #ba1b23 !important;
+  --nuraly-color-button-danger-active: #750e13 !important;
+  --nuraly-color-button-danger-text: #ffffff !important;
+  --nuraly-color-button-danger-text-hover: #ffffff !important;
+  --nuraly-color-button-danger-text-active: #ffffff !important;
+
+  --nuraly-color-button-outline: transparent !important;
+  --nuraly-color-button-outline-hover: #0f62fe !important;
+  --nuraly-color-button-outline-active: #002d9c !important;
+  --nuraly-color-button-outline-text: #0f62fe !important;
+  --nuraly-color-button-outline-text-hover: #ffffff !important;
+  --nuraly-color-button-outline-text-active: #ffffff !important;
+  --nuraly-color-button-outline-border: #0f62fe !important;
+  --nuraly-color-button-outline-border-hover: #0f62fe !important;
+  --nuraly-color-button-outline-border-active: #002d9c !important;
+
+  --nuraly-color-button-ghost: transparent !important;
+  --nuraly-color-button-ghost-hover: #262626 !important;
+  --nuraly-color-button-ghost-active: #393939 !important;
+  --nuraly-color-button-ghost-text: #0f62fe !important;
+  --nuraly-color-button-ghost-text-hover: #0f62fe !important;
+  --nuraly-color-button-ghost-text-active: #0f62fe !important;
+
+  --nuraly-color-button-gradient-bg-start: #0f62fe !important;
+  --nuraly-color-button-gradient-bg-end: #0050e6 !important;
+  --nuraly-color-button-gradient-text: #ffffff !important;
+
+  --nuraly-color-button-disabled: #c6c6c6 !important;
+  --nuraly-color-button-disabled-text: #8d8d8d !important;
+  --nuraly-color-button-disabled-border: #c6c6c6 !important;
+
+  --nuraly-color-button-separator: #393939 !important;
+}
+
+[data-theme="carbon-dark"] nr-button,
+html[data-theme="carbon-dark"] nr-button,
+body[data-theme="carbon-dark"] nr-button,
+[data-theme="carbon-dark"] .nr-button,
+html[data-theme="carbon-dark"] .nr-button,
+body[data-theme="carbon-dark"] .nr-button {
+  
+  --button-theme: carbon-dark;
+}
+
+[data-theme="carbon-dark"] nr-button[type="primary"],
+html[data-theme="carbon-dark"] nr-button[type="primary"],
+body[data-theme="carbon-dark"] nr-button[type="primary"] {
+  --current-bg: var(--nuraly-color-button-primary) !important;
+  --current-text: var(--nuraly-color-button-primary-text) !important;
+}
+
+[data-theme="carbon-dark"] nr-button[type="secondary"],
+html[data-theme="carbon-dark"] nr-button[type="secondary"],
+body[data-theme="carbon-dark"] nr-button[type="secondary"] {
+  --current-bg: var(--nuraly-color-button-secondary) !important;
+  --current-text: var(--nuraly-color-button-secondary-text) !important;
+}
+
+[data-theme="carbon-dark"] nr-button[type="danger"],
+html[data-theme="carbon-dark"] nr-button[type="danger"],
+body[data-theme="carbon-dark"] nr-button[type="danger"] {
+  --current-bg: var(--nuraly-color-button-danger) !important;
+  --current-text: var(--nuraly-color-button-danger-text) !important;
+}
+
+[data-theme="carbon-dark"] nr-button[type="ghost"],
+html[data-theme="carbon-dark"] nr-button[type="ghost"],
+body[data-theme="carbon-dark"] nr-button[type="ghost"] {
+  --current-bg: var(--nuraly-color-button-ghost) !important;
+  --current-text: var(--nuraly-color-button-ghost-text) !important;
+}
+
+/* ==============================================
+ * input/index.css
+ * ============================================== */
+
+/* ==============================================
+ * input/common.css
+ * ============================================== */
+
+:root,
+[data-theme="carbon-light"],
+[data-theme="carbon-dark"] {
+
+  --nuraly-border-width-input: 2px;
+  --nuraly-border-radius-input: 0px;
+  --nuraly-color-input-border: transparent;
+  --nuraly-color-input-border-focus: #0f62fe;
+
+  --nuraly-size-input-small-height: 32px;
+  --nuraly-size-input-medium-height: 40px;
+  --nuraly-size-input-large-height: 48px;
+
+  --nuraly-spacing-input-small-vertical: 4px;
+  --nuraly-spacing-input-small-horizontal: 12px;
+  --nuraly-spacing-input-medium-vertical: 7px;
+  --nuraly-spacing-input-medium-horizontal: 16px;
+  --nuraly-spacing-input-large-vertical: 10px;
+  --nuraly-spacing-input-large-horizontal: 16px;
+
+  --nuraly-font-family-input: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
+  --nuraly-font-size-input: 14px;
+  --nuraly-font-size-input-label: 12px;
+  --nuraly-font-size-input-helper: 12px;
+  --nuraly-font-size-input-placeholder: 14px;
+
+  --nuraly-size-input-icon: 16px;
+
+  --nuraly-border-radius-input-outlined: 4px;
+  --nuraly-border-radius-input-filled-top: 4px;
+
+  --nuraly-spacing-input-label-bottom: 8px;
+  --nuraly-spacing-input-helper-top: 8px;
+  --nuraly-spacing-input-icon: 8px;
+
+  --nuraly-color-input-filled-border-bottom: transparent;
+}
+
+/* ==============================================
+ * input/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"]{
+
+  --nuraly-color-input-background: #f4f4f4;
+  --nuraly-color-input-text: #161616;
+  --nuraly-color-input-placeholder: #a8a8a8;
+  --nuraly-color-input-label: #393939;
+  --nuraly-color-input-helper-text: #6f6f6f;
+
+  --nuraly-color-input-text-fallback: rgba(0, 0, 0, 0.88);
+  --nuraly-color-input-background-fallback: #ffffff;
+  --nuraly-color-input-disabled-text-fallback: rgba(0, 0, 0, 0.25);
+  --nuraly-color-input-disabled-background-fallback: #f4f4f4;
+  --nuraly-color-input-placeholder-fallback: #a8a8a8;
+  --nuraly-color-input-disabled-placeholder-fallback: #c6c6c6;
+
+  --nuraly-color-input-border: transparent;
+  --nuraly-color-input-border-bottom: #8d8d8d;
+  --nuraly-color-input-border-focus: #0f62fe;
+  --nuraly-border-width-input: 2px;
+  --nuraly-border-radius-input: 0px;
+
+  --nuraly-color-input-disabled-background: #f4f4f4;
+  --nuraly-color-input-disabled-text: #c6c6c6;
+  --nuraly-color-input-disabled-placeholder: #c6c6c6;
+  --nuraly-color-input-disabled-label: #c6c6c6;
+  --nuraly-color-input-disabled-helper-text: #c6c6c6;
+
+  --nuraly-color-input-error-border: #da1e28;
+  --nuraly-color-input-error-text: #da1e28;
+  --nuraly-color-input-error-icon: #da1e28;
+
+  --nuraly-color-input-warning-text: #161616;
+  --nuraly-color-input-warning-icon: #f1c21b;
+
+[data-theme="carbon-light"]{
+
+  --nuraly-color-input-background: #f4f4f4;
+  --nuraly-color-input-text: #161616;
+  --nuraly-color-input-placeholder: #a8a8a8;
+  --nuraly-color-input-label: #393939;
+  --nuraly-color-input-helper-text: #6f6f6f;
+
+  --nuraly-color-input-text-fallback: rgba(0, 0, 0, 0.88);
+  --nuraly-color-input-background-fallback: #ffffff;
+  --nuraly-color-input-disabled-text-fallback: rgba(0, 0, 0, 0.25);
+  --nuraly-color-input-disabled-background-fallback: #f4f4f4;
+  --nuraly-color-input-placeholder-fallback: #a8a8a8;
+  --nuraly-color-input-disabled-placeholder-fallback: #c6c6c6;
+
+  --nuraly-color-input-border-bottom: #8d8d8d;
+
+  --nuraly-color-input-disabled-background: #f4f4f4;
+  --nuraly-color-input-disabled-text: #c6c6c6;
+  --nuraly-color-input-disabled-placeholder: #c6c6c6;
+  --nuraly-color-input-disabled-label: #c6c6c6;
+  --nuraly-color-input-disabled-helper-text: #c6c6c6;
+
+  --nuraly-color-input-error-border: #da1e28;
+  --nuraly-color-input-error-text: #da1e28;
+  --nuraly-color-input-error-icon: #da1e28;
+
+  --nuraly-color-input-warning-text: #161616;
+  --nuraly-color-input-warning-icon: #f1c21b;
+
+  --nuraly-color-input-icon: #393939;
+  --nuraly-color-input-password-icon: #393939;
+  --nuraly-color-input-calendar-icon: #393939;
+  --nuraly-color-input-copy-icon: #393939;
+  --nuraly-color-input-clear-icon: #393939;
+  --nuraly-color-input-number-icons: #393939;
+
+  --nuraly-color-input-addon-background: #e0e0e0;
+  --nuraly-color-input-addon-text: #393939;
+  --nuraly-color-input-prefix-text: #6f6f6f;
+  --nuraly-color-input-suffix-text: #6f6f6f;
+
+  --nuraly-color-input-outlined-border: #8d8d8d;
+  --nuraly-color-input-outlined-background: #ffffff;
+  --nuraly-color-input-filled-background: #f4f4f4;
+}
+}
+
+/* ==============================================
+ * input/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"]{
+
+  --nuraly-color-input-background: #393939;
+  --nuraly-color-input-text: #f4f4f4;
+  --nuraly-color-input-placeholder: #a8a8a8;
+  --nuraly-color-input-label: #c6c6c6;
+  --nuraly-color-input-helper-text: #8d8d8d;
+
+  --nuraly-color-input-text-fallback: #f4f4f4;
+  --nuraly-color-input-background-fallback: #393939;
+  --nuraly-color-input-disabled-text-fallback: #6f6f6f;
+  --nuraly-color-input-disabled-background-fallback: #393939;
+  --nuraly-color-input-placeholder-fallback: #a8a8a8;
+  --nuraly-color-input-disabled-placeholder-fallback: #6f6f6f;
+
+  --nuraly-color-input-border: transparent;
+  --nuraly-color-input-border-bottom: #6f6f6f;
+  --nuraly-color-input-border-focus: #0f62fe;
+  --nuraly-border-width-input: 2px;
+  --nuraly-border-radius-input: 0px;
+
+  --nuraly-color-input-disabled-background: #393939;
+  --nuraly-color-input-disabled-text: #6f6f6f;
+  --nuraly-color-input-disabled-placeholder: #6f6f6f;
+  --nuraly-color-input-disabled-label: #6f6f6f;
+  --nuraly-color-input-disabled-helper-text: #6f6f6f;
+
+  --nuraly-color-input-error-border: #fa4d56;
+  --nuraly-color-input-error-text: #ffb3b8;
+  --nuraly-color-input-error-icon: #fa4d56;
+
+  --nuraly-color-input-warning-text: #f4f4f4;
+  --nuraly-color-input-warning-icon: #f1c21b;
+
+[data-theme="carbon-dark"]{
+
+  --nuraly-color-input-background: #393939;
+  --nuraly-color-input-text: #f4f4f4;
+  --nuraly-color-input-placeholder: #a8a8a8;
+  --nuraly-color-input-label: #c6c6c6;
+  --nuraly-color-input-helper-text: #8d8d8d;
+
+  --nuraly-color-input-text-fallback: #f4f4f4;
+  --nuraly-color-input-background-fallback: #393939;
+  --nuraly-color-input-disabled-text-fallback: #6f6f6f;
+  --nuraly-color-input-disabled-background-fallback: #393939;
+  --nuraly-color-input-placeholder-fallback: #a8a8a8;
+  --nuraly-color-input-disabled-placeholder-fallback: #6f6f6f;
+
+  --nuraly-color-input-border-bottom: #6f6f6f;
+
+  --nuraly-color-input-disabled-background: #393939;
+  --nuraly-color-input-disabled-text: #6f6f6f;
+  --nuraly-color-input-disabled-placeholder: #6f6f6f;
+  --nuraly-color-input-disabled-label: #6f6f6f;
+  --nuraly-color-input-disabled-helper-text: #6f6f6f;
+
+  --nuraly-color-input-error-border: #fa4d56;
+  --nuraly-color-input-error-text: #ffb3b8;
+  --nuraly-color-input-error-icon: #fa4d56;
+
+  --nuraly-color-input-warning-text: #f4f4f4;
+  --nuraly-color-input-warning-icon: #f1c21b;
+
+  --nuraly-color-input-icon: #c6c6c6;
+  --nuraly-color-input-password-icon: #c6c6c6;
+  --nuraly-color-input-calendar-icon: #c6c6c6;
+  --nuraly-color-input-copy-icon: #c6c6c6;
+  --nuraly-color-input-clear-icon: #c6c6c6;
+  --nuraly-color-input-number-icons: #c6c6c6;
+
+  --nuraly-color-input-addon-background: #525252;
+  --nuraly-color-input-addon-text: #f4f4f4;
+  --nuraly-color-input-prefix-text: #8d8d8d;
+  --nuraly-color-input-suffix-text: #8d8d8d;
+
+  --nuraly-color-input-outlined-border: #6f6f6f;
+  --nuraly-color-input-outlined-background: #262626;
+  --nuraly-color-input-filled-background: #393939;
+}
+}
+
+/* ==============================================
+ * icon/index.css
+ * ============================================== */
+
+/* ==============================================
+ * icon/common.css
+ * ============================================== */
+
+:root,
+[data-theme="carbon-light"],
+[data-theme="carbon-dark"] {
+
+  --nuraly-icon-size: 20px;
+  --nuraly-icon-size-fallback: 18px;
+  --nuraly-icon-size-small: 14px;
+  --nuraly-icon-size-small-fallback: 14px;
+  --nuraly-icon-size-medium: 20px;
+  --nuraly-icon-size-medium-fallback: 20px;
+  --nuraly-icon-size-large: 24px;
+  --nuraly-icon-size-large-fallback: 24px;
+  --nuraly-icon-size-xlarge: 32px;
+  --nuraly-icon-size-xlarge-fallback: 32px;
+  --nuraly-icon-size-xxlarge: 40px;
+  --nuraly-icon-size-xxlarge-fallback: 40px;
+  --nuraly-icon-min-size: 12px;
+  --nuraly-icon-min-size-fallback: 12px;
+
+  --nuraly-icon-disabled-opacity: 0.25;
+  --nuraly-icon-disabled-opacity-fallback: 0.25;
+
+  --nuraly-icon-focus-outline-offset: 1px;
+  --nuraly-icon-focus-outline-offset-fallback: 2px;
+  --nuraly-icon-focus-background: transparent;
+  --nuraly-icon-focus-border-radius: 0px;
+  --nuraly-icon-focus-border-radius-fallback: 4px;
+  --nuraly-icon-focus-shadow: none;
+  --nuraly-icon-focus-shadow-fallback: none;
+
+  --nuraly-icon-transition: opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease;
+  --nuraly-icon-transition-fallback: opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease;
+  --nuraly-icon-hover-opacity: 0.8;
+  --nuraly-icon-hover-opacity-fallback: 0.8;
+  --nuraly-icon-hover-transform: scale(1.0625);
+  --nuraly-icon-hover-transform-fallback: scale(1.05);
+  --nuraly-icon-active-opacity: 0.6;
+  --nuraly-icon-active-opacity-fallback: 0.6;
+  --nuraly-icon-active-transform: scale(0.9375);
+  --nuraly-icon-active-transform-fallback: scale(0.95);
+
+  --nuraly-color-error: #da1e28;
+  --nuraly-color-warning: #f1c21b;
+  --nuraly-color-success: #24a148;
+  --nuraly-color-info: #0f62fe;
+
+  --nuraly-cursor-default: default;
+  --nuraly-cursor-interactive: pointer;
+  --nuraly-cursor-disabled: not-allowed;
+
+  --nuraly-font-family-icon: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
+}
+
+/* ==============================================
+ * icon/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"]{
+
+  --nuraly-color-icon: #161616;
+  --nuraly-color-icon-fallback: #161616;
+
+  --nuraly-color-icon-hover: #0f62fe;
+  --nuraly-color-icon-hover-fallback: #0f62fe;
+  --nuraly-color-icon-active: #054ada;
+  --nuraly-color-icon-active-fallback: #054ada;
+
+  --nuraly-color-icon-disabled: #c6c6c6;
+  --nuraly-color-icon-disabled-fallback: #c6c6c6;
+
+  --nuraly-color-icon-focus: #0f62fe;
+  --nuraly-icon-focus-outline: 2px solid #0f62fe;
+  --nuraly-icon-focus-outline-fallback: 2px solid #0f62fe;
+  --nuraly-icon-focus-background-fallback: rgba(15, 98, 254, 0.1);
+}
+
+html[data-theme="carbon-light"] nr-icon .svg-icon.clickable:focus,
+body[data-theme="carbon-light"] nr-icon .svg-icon.clickable:focus,
+[data-theme="carbon-light"] nr-icon .svg-icon.clickable:focus {
+  outline: 2px solid #0f62fe !important;
+  outline-offset: 1px !important;
+  background: none !important;
+  border-radius: 0 !important;
+}
+
+html[data-theme="carbon-light"] nr-icon[size='small'] .svg-icon,
+body[data-theme="carbon-light"] nr-icon[size='small'] .svg-icon,
+[data-theme="carbon-light"] nr-icon[size='small'] .svg-icon {
+  width: 16px !important;
+  height: 16px !important;
+}
+
+html[data-theme="carbon-light"] nr-icon[size='medium'] .svg-icon,
+body[data-theme="carbon-light"] nr-icon[size='medium'] .svg-icon,
+[data-theme="carbon-light"] nr-icon[size='medium'] .svg-icon {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+html[data-theme="carbon-light"] nr-icon[size='large'] .svg-icon,
+body[data-theme="carbon-light"] nr-icon[size='large'] .svg-icon,
+[data-theme="carbon-light"] nr-icon[size='large'] .svg-icon {
+  width: 24px !important;
+  height: 24px !important;
+}
+
+/* ==============================================
+ * icon/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"]{
+
+  --nuraly-color-icon: #a6a6a6;
+  --nuraly-color-icon-fallback: #f4f4f4;
+
+  --nuraly-color-icon-hover: #78a9ff;
+  --nuraly-color-icon-hover-fallback: #78a9ff;
+  --nuraly-color-icon-active: #a6c8ff;
+  --nuraly-color-icon-active-fallback: #a6c8ff;
+
+  --nuraly-color-icon-disabled: #6f6f6f;
+  --nuraly-color-icon-disabled-fallback: #6f6f6f;
+
+  --nuraly-color-icon-focus: #78a9ff;
+  --nuraly-icon-focus-outline: 2px solid #78a9ff;
+  --nuraly-icon-focus-outline-fallback: 2px solid #78a9ff;
+  --nuraly-icon-focus-background-fallback: rgba(120, 169, 255, 0.1);
+
+  --nuraly-color-error: #fa4d56;
+  --nuraly-color-success: #42be65;
+  --nuraly-color-info: #78a9ff;
+}
+
+html[data-theme="carbon-dark"] nr-icon .svg-icon.clickable:focus,
+body[data-theme="carbon-dark"] nr-icon .svg-icon.clickable:focus,
+[data-theme="carbon-dark"] nr-icon .svg-icon.clickable:focus {
+  outline: 2px solid #78a9ff !important;
+  outline-offset: 1px !important;
+  background: none !important;
+  border-radius: 0 !important;
+}
+
+html[data-theme="carbon-dark"] nr-icon[size='small'] .svg-icon,
+body[data-theme="carbon-dark"] nr-icon[size='small'] .svg-icon,
+[data-theme="carbon-dark"] nr-icon[size='small'] .svg-icon {
+  width: 16px !important;
+  height: 16px !important;
+}
+
+html[data-theme="carbon-dark"] nr-icon[size='medium'] .svg-icon,
+body[data-theme="carbon-dark"] nr-icon[size='medium'] .svg-icon,
+[data-theme="carbon-dark"] nr-icon[size='medium'] .svg-icon {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+html[data-theme="carbon-dark"] nr-icon[size='large'] .svg-icon,
+body[data-theme="carbon-dark"] nr-icon[size='large'] .svg-icon,
+[data-theme="carbon-dark"] nr-icon[size='large'] .svg-icon {
+  width: 24px !important;
+  height: 24px !important;
+}
+
+/* ==============================================
+ * checkbox/index.css
+ * ============================================== */
+
+@media screen {
+  [data-theme="carbon-dark"] {
+    
+    --theme-mode: dark;
+  }
+  
+  [data-theme="carbon-light"]
+  :root {
+    
+    --theme-mode: light;
+  }
+}
+
+/* ==============================================
+ * checkbox/common.css
+ * ============================================== */
+
+:root,
+[data-theme="carbon-light"],
+[data-theme="carbon-dark"] {
+
+  --nuraly-border-width-checkbox: 1px;
+  --nuraly-border-radius-checkbox: 0px; 
+
+  --nuraly-color-checkbox-border-focus: #0f62fe;
+  --nuraly-color-checkbox-border-hover: #0f62fe;
+  --nuraly-color-checkbox-checked-background: #0f62fe;
+  --nuraly-color-checkbox-checked-border: #0f62fe;
+  --nuraly-color-checkbox-checkmark: #ffffff;
+  --nuraly-color-checkbox-indeterminate-background: #0f62fe;
+  --nuraly-color-checkbox-indeterminate-mark: #ffffff;
+
+  --nuraly-size-checkbox-small: 16px;
+  --nuraly-size-checkbox-medium: 20px;
+  --nuraly-size-checkbox-large: 24px;
+
+  --nuraly-spacing-checkbox-gap: 8px;
+  --nuraly-spacing-checkbox-padding: 0px;
+
+  --nuraly-size-checkbox-focus-outline: 2px;
+
+  --nuraly-font-family-checkbox: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  --nuraly-font-size-checkbox: 14px;
+  --nuraly-font-weight-checkbox: 400;
+  --nuraly-line-height-checkbox: 1.29;
+
+  --nuraly-transition-checkbox: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+/* ==============================================
+ * checkbox/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"]{
+
+  --nuraly-color-checkbox-background: #ffffff;
+  --nuraly-color-checkbox-text: #161616;
+  --nuraly-color-checkbox-label: #161616;
+
+  --nuraly-color-checkbox-border: #8d8d8d;
+
+  --nuraly-color-checkbox-disabled-background: #f4f4f4;
+  --nuraly-color-checkbox-disabled-border: #c6c6c6;
+  --nuraly-color-checkbox-disabled-text: #c6c6c6;
+  --nuraly-color-checkbox-disabled-checkmark: #c6c6c6;
+
+  --nuraly-color-checkbox-focus-outline: rgba(15, 98, 254, 0.2);
+}
+
+/* ==============================================
+ * checkbox/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"],
+html[data-theme="carbon-dark"],
+body[data-theme="carbon-dark"],
+html[data-theme="carbon-dark"] *,
+body[data-theme="carbon-dark"] * {
+
+  --nuraly-color-checkbox-background: #161616;
+  --nuraly-color-checkbox-text: #f4f4f4;
+  --nuraly-color-checkbox-label: #f4f4f4;
+
+  --nuraly-color-checkbox-border: #6f6f6f;
+
+  --nuraly-color-checkbox-disabled-background: #262626;
+  --nuraly-color-checkbox-disabled-border: #525252;
+  --nuraly-color-checkbox-disabled-text: #525252;
+  --nuraly-color-checkbox-disabled-checkmark: #525252;
+
+  --nuraly-color-checkbox-focus-outline: rgba(15, 98, 254, 0.4);
+
+  --nuraly-color-checkbox-background: transparent;
+}
+
+/* ==============================================
+ * radio/index.css
+ * ============================================== */
+
+/* ==============================================
+ * radio/common.css
+ * ============================================== */
+
+:root,
+[data-theme="carbon-light"],
+[data-theme="carbon-dark"] {
+
+  --nuraly-border-width-radio: 1px;
+
+  --nuraly-color-radio-warning-icon: #f1c21b;
+
+  --nuraly-size-radio-small: 16px;
+  --nuraly-size-radio-medium: 20px;
+  --nuraly-size-radio-large: 24px;
+
+  --nuraly-font-family-radio: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --nuraly-font-size-radio-label: 14px;
+  --nuraly-font-size-radio-message: 12px;
+
+  --nuraly-border-radius-radio: 8px;
+  --nuraly-border-radius-radio-dot: 6px;
+}
+
+[data-theme="carbon-light"] .radio-circle,
+[data-theme="carbon-dark"] .radio-circle {
+  border-radius: var(--nuraly-border-radius-radio, 8px);
+}
+
+[data-theme="carbon-light"] .radio-circle::after,
+[data-theme="carbon-dark"] .radio-circle::after {
+  border-radius: var(--nuraly-border-radius-radio-dot, 6px);
+}
+
+/* ==============================================
+ * radio/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"]{
+
+  --nuraly-color-radio-background: #ffffff;
+  --nuraly-color-radio-text: #161616;
+  --nuraly-color-radio-label: #161616;
+
+  --nuraly-color-radio-border: #8d8d8d;
+  --nuraly-color-radio-border-focus: #0f62fe;
+  --nuraly-color-radio-border-hover: #0f62fe;
+  --nuraly-border-width-radio: 1px;
+
+  --nuraly-color-radio-checked-border: #0f62fe;
+  --nuraly-color-radio-dot: #0f62fe;
+  --nuraly-color-radio-hover-enhanced: #0353e9;
+
+  --nuraly-color-radio-error-border: #da1e28;
+  --nuraly-color-radio-error-icon: #da1e28;
+  --nuraly-color-radio-error-text: #da1e28;
+
+[data-theme="carbon-light"]{
+
+  --nuraly-color-radio-background: #ffffff;
+  --nuraly-color-radio-text: #161616;
+  --nuraly-color-radio-label: #161616;
+
+  --nuraly-color-radio-border: #8d8d8d;
+  --nuraly-color-radio-border-focus: #0f62fe;
+  --nuraly-color-radio-border-hover: #0f62fe;
+
+  --nuraly-color-radio-checked-border: #0f62fe;
+  --nuraly-color-radio-dot: #0f62fe;
+  --nuraly-color-radio-hover-enhanced: #0353e9;
+
+  --nuraly-color-radio-error-border: #da1e28;
+  --nuraly-color-radio-error-icon: #da1e28;
+  --nuraly-color-radio-error-text: #da1e28;
+
+  --nuraly-color-radio-disabled-background: #f4f4f4;
+  --nuraly-color-radio-disabled-border: #c6c6c6;
+  --nuraly-color-radio-disabled-text: #c6c6c6;
+  --nuraly-color-radio-disabled-dot: #c6c6c6;
+
+  --nuraly-color-radio-focus-outline: rgba(15, 98, 254, 0.4);
+  --nuraly-color-radio-hover-ring: rgba(15, 98, 254, 0.1);
+  --nuraly-color-radio-ripple: rgba(15, 98, 254, 0.2);
+}
+}
+
+/* ==============================================
+ * radio/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"]{
+
+  --nuraly-color-radio-background: #262626;
+  --nuraly-color-radio-text: #f4f4f4;
+  --nuraly-color-radio-label: #f4f4f4;
+
+  --nuraly-color-radio-border: #8d8d8d;
+  --nuraly-color-radio-border-focus: #78a9ff;
+  --nuraly-color-radio-border-hover: #78a9ff;
+
+  --nuraly-color-radio-checked-border: #78a9ff;
+  --nuraly-color-radio-dot: #78a9ff;
+  --nuraly-color-radio-hover-enhanced: #a6c8ff;
+
+  --nuraly-color-radio-error-border: #fa4d56;
+  --nuraly-color-radio-error-icon: #fa4d56;
+  --nuraly-color-radio-error-text: #fa4d56;
+
+  --nuraly-color-radio-disabled-background: #262626;
+  --nuraly-color-radio-disabled-border: #525252;
+  --nuraly-color-radio-disabled-text: #525252;
+  --nuraly-color-radio-disabled-dot: #525252;
+
+  --nuraly-color-radio-focus-outline: rgba(120, 169, 255, 0.4);
+  --nuraly-color-radio-hover-ring: rgba(120, 169, 255, 0.1);
+  --nuraly-color-radio-ripple: rgba(120, 169, 255, 0.2);
+}
+
+/* ==============================================
+ * select/index.css
+ * ============================================== */
+
+/* ==============================================
+ * select/common.css
+ * ============================================== */
+
+[data-theme^="carbon"] {
+
+  --nuraly-select-border-width: 1px;
+  --nuraly-select-border-radius: 0px;
+
+  --nuraly-select-dropdown-z-index: 9999;
+  --nuraly-select-dropdown-max-height: 200px;
+  --nuraly-select-dropdown-border-radius: 0px;
+  --nuraly-select-dropdown-border-width: 1px;
+
+  --nuraly-select-option-padding: 11px 16px;
+  --nuraly-select-option-min-height: 40px;
+
+  --nuraly-select-warning-border-color: #f1c21b;
+  --nuraly-select-warning-text-color: #f1c21b;
+
+  --nuraly-select-disabled-opacity: 1;
+
+  --nuraly-select-icon-size: 16px;
+  --nuraly-select-arrow-icon-size: 16px;
+
+  --nuraly-select-tag-border-radius: 2px;
+
+  --nuraly-select-font-family: 'IBM Plex Sans', sans-serif;
+  --nuraly-select-font-size: 14px;
+  --nuraly-select-line-height: 1.28572;
+
+  --nuraly-select-min-height: 40px;
+  --nuraly-select-padding: 11px 16px;
+  --nuraly-select-small-height: 28px;
+  --nuraly-select-small-font-size: 12px;
+  --nuraly-select-small-padding: 7px 16px;
+  --nuraly-select-medium-height: 44px;
+  --nuraly-select-medium-font-size: 14px;
+  --nuraly-select-medium-padding: 11px 16px;
+  --nuraly-select-large-height: 48px;
+  --nuraly-select-large-font-size: 16px;
+  --nuraly-select-large-padding: 13px 16px;
+
+  --nuraly-select-transition-duration: 70ms;
+  --nuraly-select-transition-timing: cubic-bezier(0.2, 0, 0.38, 0.9);
+  --nuraly-select-dropdown-animation-duration: 110ms;
+}
+
+/* ==============================================
+ * select/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"] {
+
+  --nuraly-select-background-color: #ffffff;
+  --nuraly-select-text-color: #161616;
+  --nuraly-select-placeholder-color: #6f6f6f;
+
+  --nuraly-select-border-color: #8d8d8d;
+  --nuraly-select-border-focus: #0f62fe;
+  --nuraly-select-border-hover: #0f62fe;
+
+  --nuraly-select-dropdown-background: #ffffff;
+  --nuraly-select-dropdown-border-color: #e0e0e0;
+  --nuraly-select-dropdown-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
+
+  --nuraly-select-option-hover-background: #e8e8e8;
+  --nuraly-select-option-selected-background: #e0e0e0;
+  --nuraly-select-option-selected-color: #0f62fe;
+  --nuraly-select-option-text-color: #161616;
+
+  --nuraly-select-error-border-color: #da1e28;
+  --nuraly-select-error-text-color: #da1e28;
+
+  --nuraly-select-success-border-color: #24a148;
+  --nuraly-select-success-text-color: #24a148;
+
+  --nuraly-select-disabled-background: #f4f4f4;
+  --nuraly-select-disabled-border-color: #c6c6c6;
+  --nuraly-select-disabled-text-color: #c6c6c6;
+
+  --nuraly-select-icon-color: #6f6f6f;
+  --nuraly-select-icon-hover-color: #0f62fe;
+
+  --nuraly-select-tag-background: #e8e8e8;
+  --nuraly-select-tag-color: #161616;
+  --nuraly-select-tag-close-color: #6f6f6f;
+  --nuraly-select-tag-close-hover-color: #da1e28;
+
+  --nuraly-select-focus-outline: rgba(15, 98, 254, 0.4);
+  --nuraly-select-hover-ring: rgba(15, 98, 254, 0.1);
+}
+
+/* ==============================================
+ * select/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"] {
+
+  --nuraly-select-background-color: #262626;
+  --nuraly-select-text-color: #f4f4f4;
+  --nuraly-select-placeholder-color: #a8a8a8;
+
+  --nuraly-select-border-color: #525252;
+  --nuraly-select-border-focus: #78a9ff;
+  --nuraly-select-border-hover: #78a9ff;
+
+  --nuraly-select-dropdown-background: #262626;
+  --nuraly-select-dropdown-border-color: #393939;
+  --nuraly-select-dropdown-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.8);
+
+  --nuraly-select-option-hover-background: #393939;
+  --nuraly-select-option-selected-background: #393939;
+  --nuraly-select-option-selected-color: #78a9ff;
+  --nuraly-select-option-text-color: #f4f4f4;
+
+  --nuraly-select-error-border-color: #ff8389;
+  --nuraly-select-error-text-color: #ff8389;
+
+  --nuraly-select-success-border-color: #42be65;
+  --nuraly-select-success-text-color: #42be65;
+
+  --nuraly-select-disabled-background: #161616;
+  --nuraly-select-disabled-border-color: #525252;
+  --nuraly-select-disabled-text-color: #6f6f6f;
+
+  --nuraly-select-icon-color: #a8a8a8;
+  --nuraly-select-icon-hover-color: #78a9ff;
+
+  --nuraly-select-tag-background: #393939;
+  --nuraly-select-tag-color: #f4f4f4;
+  --nuraly-select-tag-close-color: #a8a8a8;
+  --nuraly-select-tag-close-hover-color: #ff8389;
+
+  --nuraly-select-focus-outline: rgba(120, 169, 255, 0.5);
+  --nuraly-select-hover-ring: rgba(120, 169, 255, 0.2);
+}
+
+/* ==============================================
+ * textarea/index.css
+ * ============================================== */
+
+/* ==============================================
+ * textarea/common.css
+ * ============================================== */
+
+:root,
+[data-theme="carbon-light"],
+[data-theme="carbon-dark"] {
+
+  --nuraly-border-width-textarea: 2px;
+  --nuraly-border-radius-textarea: 0px;
+  --nuraly-color-textarea-border: transparent;
+  --nuraly-color-textarea-border-focus: #0f62fe;
+  --nuraly-textarea-border-radius:0px;
+
+  --nuraly-size-textarea-small-min-height: 32px;
+  --nuraly-size-textarea-medium-min-height: 40px;
+  --nuraly-size-textarea-large-min-height: 48px;
+
+  --nuraly-spacing-textarea-small-vertical: 4px;
+  --nuraly-spacing-textarea-small-horizontal: 12px;
+  --nuraly-spacing-textarea-medium-vertical: 7px;
+  --nuraly-spacing-textarea-medium-horizontal: 16px;
+  --nuraly-spacing-textarea-large-vertical: 10px;
+  --nuraly-spacing-textarea-large-horizontal: 16px;
+
+  --nuraly-font-family-textarea: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
+  --nuraly-font-size-textarea: 14px;
+  --nuraly-font-size-textarea-label: 12px;
+  --nuraly-font-size-textarea-helper: 12px;
+  --nuraly-font-size-textarea-placeholder: 14px;
+  --nuraly-line-height-textarea: 1.28;
+
+  --nuraly-size-textarea-icon: 16px;
+
+  --nuraly-border-radius-textarea-outlined: 0px;
+  --nuraly-border-radius-textarea-filled-top: 0px;
+
+  --nuraly-spacing-textarea-label-bottom: 8px;
+  --nuraly-spacing-textarea-helper-top: 8px;
+  --nuraly-spacing-textarea-icon: 8px;
+
+  --nuraly-color-textarea-warning-icon: #f1c21b;
+
+  --nuraly-spacing-textarea-count-top: 4px;
+  --nuraly-font-size-textarea-count: 12px;
+}
+
+/* ==============================================
+ * textarea/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"]{
+
+  --nuraly-color-textarea-background: #f4f4f4;
+  --nuraly-color-textarea-text: #161616;
+  --nuraly-color-textarea-placeholder: #a8a8a8;
+  --nuraly-color-textarea-label: #393939;
+  --nuraly-color-textarea-helper-text: #6f6f6f;
+
+  --nuraly-color-textarea-text-fallback: rgba(0, 0, 0, 0.88);
+  --nuraly-color-textarea-background-fallback: #ffffff;
+  --nuraly-color-textarea-disabled-text-fallback: rgba(0, 0, 0, 0.25);
+  --nuraly-color-textarea-disabled-background-fallback: #f4f4f4;
+  --nuraly-color-textarea-placeholder-fallback: #a8a8a8;
+  --nuraly-color-textarea-disabled-placeholder-fallback: #c6c6c6;
+
+  --nuraly-color-textarea-border: #f4f4f4; 
+  --nuraly-color-textarea-border-bottom: #8d8d8d; 
+  --nuraly-color-textarea-border-focus: #0f62fe;
+  --nuraly-color-textarea-border-hover: #0f62fe;
+  --nuraly-border-width-textarea: 2px;
+  --nuraly-border-radius-textarea: 0px;
+
+  --nuraly-color-textarea-disabled-background: #f4f4f4;
+  --nuraly-color-textarea-disabled-text: #c6c6c6;
+  --nuraly-color-textarea-disabled-placeholder: #c6c6c6;
+  --nuraly-color-textarea-disabled-label: #c6c6c6;
+  --nuraly-color-textarea-disabled-helper-text: #c6c6c6;
+
+  --nuraly-color-textarea-error-border: #da1e28;
+  --nuraly-color-textarea-error-text: #da1e28;
+  --nuraly-color-textarea-error-icon: #da1e28;
+
+  --nuraly-color-textarea-warning-text: #161616;
+  --nuraly-color-textarea-warning-icon: #f1c21b;
+
+  --nuraly-color-textarea-success-border: #24a148;
+  --nuraly-color-textarea-success-text: #161616;
+  --nuraly-color-textarea-success-icon: #24a148;
+
+  --nuraly-color-textarea-focus-outline: rgba(15, 98, 254, 0.2);
+  --nuraly-color-textarea-hover-ring: rgba(15, 98, 254, 0.1);
+
+  --nuraly-color-textarea-icon: #525252;
+  --nuraly-color-textarea-icon-hover: #0f62fe;
+  --nuraly-color-textarea-icon-active: #0043ce;
+  --nuraly-color-textarea-icon-disabled: #c6c6c6;
+  --nuraly-color-textarea-clear-icon: #525252;
+  --nuraly-color-textarea-clear-icon-hover: #0f62fe;
+
+  --nuraly-color-textarea-count: #6f6f6f;
+  --nuraly-color-textarea-count-over-limit: #da1e28;
+
+  --nuraly-color-textarea-validation-icon: #525252;
+  --nuraly-color-textarea-validation-error: #da1e28;
+  --nuraly-color-textarea-validation-warning: #f1c21b;
+  --nuraly-color-textarea-validation-success: #24a148;
+
+  --nuraly-color-textarea-outlined-border: #8d8d8d;
+  --nuraly-color-textarea-outlined-background: transparent;
+
+  --nuraly-color-textarea-filled-background: #f4f4f4;
+  --nuraly-color-textarea-filled-border: transparent;
+}
+
+/* ==============================================
+ * textarea/dark.css
+ * ============================================== */
+
+:root,
+[data-theme="carbon-dark"]{
+
+  --nuraly-color-textarea-background: #393939;
+  --nuraly-color-textarea-text: #f4f4f4;
+  --nuraly-color-textarea-placeholder: #a8a8a8;
+  --nuraly-color-textarea-label: #f4f4f4;
+  --nuraly-color-textarea-helper-text: #c6c6c6;
+
+  --nuraly-color-textarea-text-fallback: rgba(255, 255, 255, 0.88);
+  --nuraly-color-textarea-background-fallback: #262626;
+  --nuraly-color-textarea-disabled-text-fallback: rgba(255, 255, 255, 0.25);
+  --nuraly-color-textarea-disabled-background-fallback: #525252;
+  --nuraly-color-textarea-placeholder-fallback: #a8a8a8;
+  --nuraly-color-textarea-disabled-placeholder-fallback: #8d8d8d;
+
+  --nuraly-color-textarea-border: #393939; 
+  --nuraly-color-textarea-border-bottom: #a8a8a8; 
+  --nuraly-color-textarea-border-focus: #78a9ff;
+  --nuraly-color-textarea-border-hover: #78a9ff;
+  --nuraly-border-width-textarea: 2px;
+  --nuraly-border-radius-textarea: 0px;
+
+  --nuraly-color-textarea-disabled-background: #525252;
+  --nuraly-color-textarea-disabled-text: #8d8d8d;
+  --nuraly-color-textarea-disabled-placeholder: #8d8d8d;
+  --nuraly-color-textarea-disabled-label: #8d8d8d;
+  --nuraly-color-textarea-disabled-helper-text: #8d8d8d;
+
+  --nuraly-color-textarea-error-border: #ff8389;
+  --nuraly-color-textarea-error-text: #ffb3b8;
+  --nuraly-color-textarea-error-icon: #ff8389;
+
+  --nuraly-color-textarea-warning-text: #f4f4f4;
+  --nuraly-color-textarea-warning-icon: #f1c21b;
+
+  --nuraly-color-textarea-success-border: #42be65;
+  --nuraly-color-textarea-success-text: #f4f4f4;
+  --nuraly-color-textarea-success-icon: #42be65;
+
+  --nuraly-color-textarea-focus-outline: rgba(120, 169, 255, 0.2);
+  --nuraly-color-textarea-hover-ring: rgba(120, 169, 255, 0.1);
+
+  --nuraly-color-textarea-icon: #a8a8a8;
+  --nuraly-color-textarea-icon-hover: #78a9ff;
+  --nuraly-color-textarea-icon-active: #4589ff;
+  --nuraly-color-textarea-icon-disabled: #8d8d8d;
+  --nuraly-color-textarea-clear-icon: #a8a8a8;
+  --nuraly-color-textarea-clear-icon-hover: #78a9ff;
+
+  --nuraly-color-textarea-count: #c6c6c6;
+  --nuraly-color-textarea-count-over-limit: #ff8389;
+
+  --nuraly-color-textarea-validation-icon: #a8a8a8;
+  --nuraly-color-textarea-validation-error: #ff8389;
+  --nuraly-color-textarea-validation-warning: #f1c21b;
+  --nuraly-color-textarea-validation-success: #42be65;
+
+  --nuraly-color-textarea-outlined-border: #a8a8a8;
+  --nuraly-color-textarea-outlined-background: transparent;
+
+  --nuraly-color-textarea-filled-background: #393939;
+  --nuraly-color-textarea-filled-border: transparent;
+}
+
+/* ==============================================
+ * datepicker/index.css
+ * ============================================== */
+
+@media screen {
+  [data-theme="carbon-dark"] {
+    
+    --theme-mode: dark;
+  }
+  
+  [data-theme="carbon-light"]
+  :root {
+    
+    --theme-mode: light;
+  }
+}
+
+/* ==============================================
+ * datepicker/common.css
+ * ============================================== */
+
+[data-theme^="carbon"] {
+
+  --nuraly-color-datepicker-disabled: #c6c6c6;
+  --nuraly-color-datepicker-disabled-text: #8d8d8d;
+  --nuraly-color-datepicker-disabled-background: #f4f4f4;
+
+  --nuraly-color-datepicker-primary: #0f62fe;
+  --nuraly-color-datepicker-selected: #0f62fe;
+  --nuraly-color-datepicker-today: #0f62fe;
+  --nuraly-color-datepicker-input-focus-border: #0f62fe;
+
+  --nuraly-shadow-datepicker-box: 0 2px 6px rgba(0, 0, 0, 0.2);
+  --nuraly-shadow-datepicker-input-focus: 0 0 0 2px rgba(15, 98, 254, 0.2);
+
+  --nuraly-border-radius-datepicker: 0;
+
+  --nuraly-font-family-datepicker: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  --nuraly-font-size-datepicker: 14px;
+  --nuraly-font-weight-datepicker: 400;
+  --nuraly-font-size-datepicker-header: 14px;
+  --nuraly-font-weight-datepicker-header: 600;
+
+  --nuraly-spacing-datepicker-gap: 8px;
+  --nuraly-spacing-datepicker-calendar-padding: 16px;
+  --nuraly-spacing-datepicker-day-padding: 8px;
+  --nuraly-spacing-datepicker-input-padding: 11px 16px;
+
+  --nuraly-size-datepicker-width: 288px;
+  --nuraly-size-datepicker-calendar-width: 288px;
+  --nuraly-size-datepicker-day: 40px;
+  --nuraly-size-datepicker-header-height: 48px;
+
+  --nuraly-border-width-datepicker: 1px;
+  --nuraly-border-width-datepicker-input: 1px;
+  --nuraly-border-width-datepicker-focus: 2px;
+
+  --nuraly-transition-duration-datepicker: 0.11s;
+  --nuraly-transition-timing-datepicker: cubic-bezier(0.2, 0, 0.38, 0.9);
+  --nuraly-transition-duration-datepicker-calendar: 0.11s;
+
+  --nuraly-z-index-datepicker-calendar: 9000;
+
+  --nuraly-size-datepicker-icon: 16px;
+  --nuraly-size-datepicker-arrow-icon: 16px;
+
+  --nuraly-color-datepicker-error: #da1e28;
+  --nuraly-color-datepicker-warning: #f1c21b;
+  --nuraly-color-datepicker-success: #24a148;
+}
+
+/* ==============================================
+ * datepicker/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"] {
+
+  --nuraly-color-datepicker-background: #ffffff;
+  --nuraly-color-datepicker-header-background: #ffffff;
+  --nuraly-color-datepicker-hover-background: #e0e0e0;
+  --nuraly-color-datepicker-active-background: #c6c6c6;
+
+  --nuraly-color-datepicker-text: #161616;
+  --nuraly-color-datepicker-selected-text: #ffffff;
+  --nuraly-color-datepicker-weekday: #6f6f6f;
+  --nuraly-color-datepicker-weekend: #da1e28;
+
+  --nuraly-color-datepicker-border: #c6c6c6;
+
+  --nuraly-color-datepicker-input-background: #ffffff;
+  --nuraly-color-datepicker-input-border: #8d8d8d;
+  --nuraly-color-datepicker-input-text: #161616;
+  --nuraly-color-datepicker-input-placeholder: #a8a8a8;
+
+  --nuraly-color-datepicker-hover: #e0e0e0;
+
+  --nuraly-color-datepicker-range: rgba(15, 98, 254, 0.1);
+
+  --nuraly-color-datepicker-shadow: rgba(0, 0, 0, 0.3);
+
+  --nuraly-opacity-datepicker-disabled: 0.5;
+  --nuraly-opacity-datepicker-hover: 1;
+}
+
+/* ==============================================
+ * datepicker/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"] {
+
+  --nuraly-color-datepicker-background: #262626;
+  --nuraly-color-datepicker-header-background: #262626;
+  --nuraly-color-datepicker-hover-background: #353535;
+  --nuraly-color-datepicker-active-background: #525252;
+
+  --nuraly-color-datepicker-text: #f4f4f4;
+  --nuraly-color-datepicker-selected-text: #161616;
+  --nuraly-color-datepicker-weekday: #c6c6c6;
+  --nuraly-color-datepicker-weekend: #ff8389;
+
+  --nuraly-color-datepicker-border: #6f6f6f;
+
+  --nuraly-color-datepicker-input-background: #393939;
+  --nuraly-color-datepicker-input-border: #6f6f6f;
+  --nuraly-color-datepicker-input-text: #f4f4f4;
+  --nuraly-color-datepicker-input-placeholder: #a8a8a8;
+
+  --nuraly-color-datepicker-hover: #393939;
+
+  --nuraly-color-datepicker-range: rgba(78, 151, 253, 0.2);
+
+  --nuraly-color-datepicker-shadow: rgba(0, 0, 0, 0.8);
+
+  --nuraly-opacity-datepicker-disabled: 0.25;
+  --nuraly-opacity-datepicker-hover: 1;
+
+  --nuraly-color-datepicker-disabled: #6f6f6f;
+  --nuraly-color-datepicker-disabled-text: #525252;
+  --nuraly-color-datepicker-disabled-background: #262626;
+}
+
+/* ==============================================
+ * timepicker/index.css
+ * ============================================== */
+
+@media screen {
+  [data-theme="carbon-dark"] {
+    
+    --theme-mode: dark;
+  }
+
+  [data-theme="carbon-light"] {
+    
+    --theme-mode: light;
+  }
+}
+
+/* ==============================================
+ * timepicker/common.css
+ * ============================================== */
+
+[data-theme^="carbon"] {
+
+  --nuraly-color-timepicker-disabled: #c6c6c6;
+  --nuraly-color-timepicker-disabled-text: #8d8d8d;
+  --nuraly-color-timepicker-disabled-background: #f4f4f4;
+
+  --nuraly-color-timepicker-primary: #0f62fe;
+  --nuraly-color-timepicker-selected: #0f62fe;
+  --nuraly-color-timepicker-input-focus-border: #0f62fe;
+  --nuraly-color-timepicker-clock-hand: #0f62fe;
+
+  --nuraly-shadow-timepicker-box: 0 2px 6px rgba(0, 0, 0, 0.2);
+  --nuraly-shadow-timepicker-input-focus: 0 0 0 2px rgba(15, 98, 254, 0.2);
+
+  --nuraly-border-radius-timepicker: 0;
+  --nuraly-border-radius-timepicker-sm: 0;
+
+  --nuraly-font-family-timepicker: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  --nuraly-font-size-timepicker: 14px;
+  --nuraly-font-weight-timepicker: 400;
+  --nuraly-font-size-timepicker-clock: 14px;
+
+  --nuraly-spacing-timepicker-gap: 8px;
+  --nuraly-spacing-timepicker-dropdown-padding: 16px;
+  --nuraly-spacing-timepicker-input-padding: 11px 16px;
+
+  --nuraly-size-timepicker-width: 288px;
+  --nuraly-size-timepicker-height: 48px;
+  --nuraly-size-timepicker-dropdown-width: 200px;
+  --nuraly-size-timepicker-clock: 200px;
+
+  --nuraly-border-width-timepicker: 1px;
+  --nuraly-border-width-timepicker-input: 1px;
+  --nuraly-border-width-timepicker-focus: 2px;
+
+  --nuraly-transition-duration-timepicker: 0.11s;
+  --nuraly-transition-timing-timepicker: cubic-bezier(0.2, 0, 0.38, 0.9);
+
+  --nuraly-z-index-timepicker-dropdown: 9000;
+
+  --nuraly-size-timepicker-icon: 16px;
+
+  --nuraly-color-timepicker-error: #da1e28;
+  --nuraly-color-timepicker-warning: #f1c21b;
+  --nuraly-color-timepicker-success: #24a148;
+}
+
+/* ==============================================
+ * timepicker/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"] {
+
+  --nuraly-color-timepicker-background: #ffffff;
+  --nuraly-color-timepicker-dropdown-background: #ffffff;
+  --nuraly-color-timepicker-clock-background: #ffffff;
+  --nuraly-color-timepicker-hover-background: #e0e0e0;
+  --nuraly-color-timepicker-active-background: #c6c6c6;
+
+  --nuraly-color-timepicker-text: #161616;
+  --nuraly-color-timepicker-selected-text: #ffffff;
+  --nuraly-color-timepicker-clock-text: #161616;
+  --nuraly-color-timepicker-clock-face: #6f6f6f;
+
+  --nuraly-color-timepicker-border: #c6c6c6;
+  --nuraly-color-timepicker-clock-border: #e0e0e0;
+
+  --nuraly-color-timepicker-input-background: #ffffff;
+  --nuraly-color-timepicker-input-border: #8d8d8d;
+  --nuraly-color-timepicker-input-text: #161616;
+  --nuraly-color-timepicker-input-placeholder: #a8a8a8;
+
+  --nuraly-color-timepicker-hover: #e0e0e0;
+
+  --nuraly-color-timepicker-item-hover: #e0e0e0;
+  --nuraly-color-timepicker-item-active: #e0e0e0;
+  --nuraly-color-timepicker-item-selected: #0f62fe;
+  --nuraly-color-timepicker-item-selected-text: #ffffff;
+
+  --nuraly-color-timepicker-shadow: rgba(0, 0, 0, 0.3);
+
+  --nuraly-opacity-timepicker-disabled: 0.5;
+  --nuraly-opacity-timepicker-hover: 1;
+}
+
+/* ==============================================
+ * timepicker/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"] {
+
+  --nuraly-color-timepicker-background: #262626;
+  --nuraly-color-timepicker-dropdown-background: #262626;
+  --nuraly-color-timepicker-clock-background: #262626;
+  --nuraly-color-timepicker-hover-background: #353535;
+  --nuraly-color-timepicker-active-background: #525252;
+
+  --nuraly-color-timepicker-text: #f4f4f4;
+  --nuraly-color-timepicker-selected-text: #161616;
+  --nuraly-color-timepicker-clock-text: #f4f4f4;
+  --nuraly-color-timepicker-clock-face: #c6c6c6;
+
+  --nuraly-color-timepicker-border: #6f6f6f;
+  --nuraly-color-timepicker-clock-border: #525252;
+
+  --nuraly-color-timepicker-input-background: #393939;
+  --nuraly-color-timepicker-input-border: #6f6f6f;
+  --nuraly-color-timepicker-input-text: #f4f4f4;
+  --nuraly-color-timepicker-input-placeholder: #a8a8a8;
+
+  --nuraly-color-timepicker-hover: #393939;
+
+  --nuraly-color-timepicker-item-hover: #393939;
+  --nuraly-color-timepicker-item-active: #525252;
+  --nuraly-color-timepicker-item-selected: #0f62fe;
+  --nuraly-color-timepicker-item-selected-text: #161616;
+
+  --nuraly-color-timepicker-shadow: rgba(0, 0, 0, 0.8);
+
+  --nuraly-opacity-timepicker-disabled: 0.25;
+  --nuraly-opacity-timepicker-hover: 1;
+
+  --nuraly-color-timepicker-disabled: #6f6f6f;
+  --nuraly-color-timepicker-disabled-text: #525252;
+  --nuraly-color-timepicker-disabled-background: #262626;
+}
+
+/* ==============================================
+ * slider-input/index.css
+ * ============================================== */
+
+/* ==============================================
+ * slider-input/common.css
+ * ============================================== */
+
+[data-theme^="carbon"] {
+
+  --nuraly-color-slider-input-disabled: #c6c6c6;
+  --nuraly-color-slider-input-disabled-text: #8d8d8d;
+  --nuraly-color-slider-input-disabled-background: #f4f4f4;
+
+  --nuraly-color-slider-input-primary: #0f62fe;
+  --nuraly-color-slider-input-selected: #0f62fe;
+  --nuraly-color-slider-input-focus: #0f62fe;
+
+  --nuraly-border-slider-input-radius: 0;
+  --nuraly-border-slider-input-thumb-radius: 0;
+
+  --nuraly-font-family-slider-input: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  --nuraly-font-size-slider-input: 14px;
+  --nuraly-font-weight-slider-input: 400;
+
+  --nuraly-spacing-slider-input-gap: 8px;
+  --nuraly-spacing-slider-input-padding: 16px;
+
+  --nuraly-size-slider-input-height: 2px;
+  --nuraly-size-slider-input-thumb-diameter: 16px;
+  --nuraly-size-slider-input-width: 100%;
+
+  --nuraly-border-width-slider-input: 0;
+  --nuraly-border-width-slider-input-focus: 2px;
+
+  --nuraly-transition-duration-slider-input: 0.11s;
+  --nuraly-transition-timing-slider-input: cubic-bezier(0.2, 0, 0.38, 0.9);
+
+  --nuraly-z-index-slider-input: 1;
+
+  --nuraly-color-slider-input-error: #da1e28;
+  --nuraly-color-slider-input-warning: #f1c21b;
+  --nuraly-color-slider-input-success: #24a148;
+
+  --nuraly-shadow-slider-input-focus: 0 0 0 2px rgba(15, 98, 254, 0.2);
+}
+
+/* ==============================================
+ * slider-input/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"] {
+
+  --nuraly-color-slider-input-background: #f4f4f4;
+  --nuraly-color-slider-input-track: #e0e0e0;
+  --nuraly-color-slider-input-track-filled: #0f62fe;
+
+  --nuraly-color-slider-input-text: #161616;
+  --nuraly-color-slider-input-text-secondary: #525252;
+
+  --nuraly-color-slider-input-border: #c6c6c6;
+  --nuraly-color-slider-input-border-hover: #a8a8a8;
+
+  --nuraly-color-slider-input-thumb: #ffffff;
+  --nuraly-color-slider-input-thumb-hover: #f4f4f4;
+  --nuraly-color-slider-input-thumb-active: #0f62fe;
+  --nuraly-color-slider-input-thumb-border: #8d8d8d;
+
+  --nuraly-color-slider-input-hover: #e5e5e5;
+  --nuraly-color-slider-input-active: #0f62fe;
+
+  --nuraly-color-slider-input-disabled-track: #c6c6c6;
+  --nuraly-color-slider-input-disabled-thumb: #f4f4f4;
+  --nuraly-color-slider-input-disabled-border: #c6c6c6;
+}
+
+/* ==============================================
+ * slider-input/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"] {
+
+  --nuraly-color-slider-input-background: #262626;
+  --nuraly-color-slider-input-track: #393939;
+  --nuraly-color-slider-input-track-filled: #4589ff;
+
+  --nuraly-color-slider-input-text: #f4f4f4;
+  --nuraly-color-slider-input-text-secondary: #c6c6c6;
+
+  --nuraly-color-slider-input-border: #525252;
+  --nuraly-color-slider-input-border-hover: #697077;
+
+  --nuraly-color-slider-input-thumb: #f4f4f4;
+  --nuraly-color-slider-input-thumb-hover: #e0e0e0;
+  --nuraly-color-slider-input-thumb-active: #4589ff;
+  --nuraly-color-slider-input-thumb-border: #8d8d8d;
+
+  --nuraly-color-slider-input-hover: #393939;
+  --nuraly-color-slider-input-active: #4589ff;
+
+  --nuraly-color-slider-input-disabled-track: #525252;
+  --nuraly-color-slider-input-disabled-thumb: #393939;
+  --nuraly-color-slider-input-disabled-border: #525252;
+}
+
+/* ==============================================
+ * label/index.css
+ * ============================================== */
+
+/* ==============================================
+ * label/common.css
+ * ============================================== */
+
+:root {
+
+  --nuraly-label-font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  --nuraly-label-font-weight-normal: 400;
+  --nuraly-label-font-weight-medium: 500;
+
+  --nuraly-label-size-xs-font-size: 0.75rem; 
+  --nuraly-label-size-xs-line-height: 1rem; 
+
+  --nuraly-label-size-sm-font-size: 0.875rem; 
+  --nuraly-label-size-sm-line-height: 1.125rem; 
+
+  --nuraly-label-size-md-font-size: 1rem; 
+  --nuraly-label-size-md-line-height: 1.375rem; 
+
+  --nuraly-label-size-lg-font-size: 1.125rem; 
+  --nuraly-label-size-lg-line-height: 1.5rem; 
+
+  --nuraly-label-size-xl-font-size: 1.25rem; 
+  --nuraly-label-size-xl-line-height: 1.625rem; 
+
+  --nuraly-label-margin-bottom: 0.5rem; 
+  --nuraly-label-required-margin-left: 0.25rem; 
+}
+
+/* ==============================================
+ * label/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"],
+[data-theme^="carbon"]:where([data-theme*="light"]) {
+
+  --nuraly-color-label-text: #161616;
+  --nuraly-color-label-secondary: #525252;
+
+  --nuraly-color-label-error: #da1e28;
+  --nuraly-color-label-warning: #f1c21b;
+  --nuraly-color-label-success: #198038;
+
+  --nuraly-color-label-required: #da1e28;
+
+  --nuraly-color-label-disabled: #c6c6c6;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]),
+  [data-theme^="carbon"]:not([data-theme*="dark"]) {
+    
+    --nuraly-color-label-text: #161616;
+    --nuraly-color-label-secondary: #525252;
+
+    --nuraly-color-label-error: #da1e28;
+    --nuraly-color-label-warning: #f1c21b;
+    --nuraly-color-label-success: #198038;
+
+    --nuraly-color-label-required: #da1e28;
+
+    --nuraly-color-label-disabled: #c6c6c6;
+  }
+}
+
+/* ==============================================
+ * label/dark.css
+ * ============================================== */
+
+:root,
+[data-theme="carbon-dark"],
+[data-theme^="carbon"]:where([data-theme*="dark"]) {
+
+  --nuraly-color-label-text: #f4f4f4;
+  --nuraly-color-label-secondary: #c6c6c6;
+
+  --nuraly-color-label-error: #ff8389;
+  --nuraly-color-label-warning: #f1c21b;
+  --nuraly-color-label-success: #42be65;
+
+  --nuraly-color-label-required: #ff8389;
+
+  --nuraly-color-label-disabled: #6f6f6f;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  [data-theme^="carbon"]:not([data-theme*="light"]) {
+    
+    --nuraly-color-label-text: #f4f4f4;
+    --nuraly-color-label-secondary: #c6c6c6;
+
+    --nuraly-color-label-error: #ff8389;
+    --nuraly-color-label-warning: #f1c21b;
+    --nuraly-color-label-success: #42be65;
+
+    --nuraly-color-label-required: #ff8389;
+
+    --nuraly-color-label-disabled: #6f6f6f;
+  }
+}
+
+/* ==============================================
+ * card/index.css
+ * ============================================== */
+
+@media screen {
+  [data-theme="carbon-dark"] {
+    
+    --theme-mode: dark;
+  }
+  
+  [data-theme="carbon-light"]
+  :root {
+    
+    --theme-mode: light;
+  }
+}
+
+/* ==============================================
+ * card/common.css
+ * ============================================== */
+
+[data-theme^="carbon"] {
+
+  --nuraly-card-border-radius: 0;
+
+  --nuraly-card-shadow: none;
+  --nuraly-card-hover-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+
+  --nuraly-card-font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --nuraly-card-font-size: 14px;
+  --nuraly-card-line-height: 1.28571;
+  --nuraly-card-header-font-weight: 600;
+
+  --nuraly-card-padding: 16px;
+  --nuraly-card-small-padding: 12px;
+  --nuraly-card-large-padding: 24px;
+
+  --nuraly-card-small-font-size: 12px;
+  --nuraly-card-large-font-size: 16px;
+
+  --nuraly-card-transition: all 0.15s cubic-bezier(0.2, 0, 0.38, 0.9);
+
+  --nuraly-card-cursor: default;
+}
+
+/* ==============================================
+ * card/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"] {
+
+  --nuraly-card-background-color: #f4f4f4;
+  --nuraly-card-header-background-color: #ffffff;
+
+  --nuraly-card-border: 1px solid #e0e0e0;
+  --nuraly-card-header-border-bottom: 1px solid #e0e0e0;
+
+  --nuraly-card-header-color: #161616;
+  --nuraly-card-content-color: #525252;
+
+  --nuraly-card-hover-background-color: #f4f4f4;
+  --nuraly-card-hover-border-color: #c6c6c6;
+
+  --nuraly-card-focus-outline: 2px solid #0f62fe;
+  --nuraly-card-focus-offset: 2px;
+}
+
+/* ==============================================
+ * card/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"] {
+
+  --nuraly-card-background-color: #262626;
+  --nuraly-card-header-background-color: #393939;
+
+  --nuraly-card-border: 1px solid #525252;
+  --nuraly-card-header-border-bottom: 1px solid #525252;
+
+  --nuraly-card-header-color: #f4f4f4;
+  --nuraly-card-content-color: #c6c6c6;
+
+  --nuraly-card-hover-background-color: #393939;
+  --nuraly-card-hover-border-color: #6f6f6f;
+
+  --nuraly-card-focus-outline: 2px solid #0f62fe;
+  --nuraly-card-focus-offset: 2px;
+
+  --nuraly-card-hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+}
+
+/* ==============================================
+ * dropdown/index.css
+ * ============================================== */
+
+/* ==============================================
+ * dropdown/common.css
+ * ============================================== */
+
+[data-theme^="carbon"] {
+
+  --nuraly-dropdown-font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --nuraly-dropdown-font-size: 0.875rem;
+  --nuraly-dropdown-font-weight: 400;
+  --nuraly-dropdown-line-height: 1.28571;
+
+  --nuraly-dropdown-trigger-padding: 0;
+  --nuraly-dropdown-trigger-border-radius: 0px;
+
+  --nuraly-dropdown-border-radius: 0px;
+  --nuraly-dropdown-border-width: 1px;
+  --nuraly-dropdown-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  --nuraly-dropdown-z-index: 9999;
+  --nuraly-dropdown-min-width: 10rem;
+  --nuraly-dropdown-max-width: 20rem;
+
+  --nuraly-dropdown-item-padding: 0.75rem 1rem;
+  --nuraly-dropdown-item-font-size: 0.875rem;
+  --nuraly-dropdown-item-font-weight: 400;
+  --nuraly-dropdown-item-line-height: 1.28571;
+  --nuraly-dropdown-item-border-radius: 0px;
+  --nuraly-dropdown-item-gap: 0.5rem;
+  --nuraly-dropdown-item-transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
+
+  --nuraly-dropdown-icon-size: 1rem;
+
+  --nuraly-dropdown-divider-width: 1px;
+  --nuraly-dropdown-divider-margin: 0.25rem 0;
+
+  --nuraly-dropdown-arrow-size: 0.5rem;
+  --nuraly-dropdown-arrow-offset: 0.75rem;
+
+  --nuraly-dropdown-small-font-size: 0.75rem;
+  --nuraly-dropdown-small-item-padding: 0.5rem 0.75rem;
+  --nuraly-dropdown-small-icon-size: 0.875rem;
+
+  --nuraly-dropdown-large-font-size: 1rem;
+  --nuraly-dropdown-large-item-padding: 1rem 1.25rem;
+  --nuraly-dropdown-large-icon-size: 1.25rem;
+
+  --nuraly-dropdown-animation-duration: 0.15s;
+  --nuraly-dropdown-animation-timing: cubic-bezier(0.2, 0, 0.38, 0.9);
+
+  --nuraly-dropdown-offset: 0.25rem;
+
+  --nuraly-dropdown-disabled-opacity: 1;
+  --nuraly-dropdown-item-disabled-opacity: 0.25;
+}
+
+/* ==============================================
+ * dropdown/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"] {
+
+  --nuraly-color-dropdown-background: #ffffff;
+  --nuraly-color-dropdown-border: #e0e0e0;
+  --nuraly-color-dropdown-shadow: rgba(0, 0, 0, 0.1);
+
+  --nuraly-color-dropdown-trigger-text: #161616;
+  --nuraly-color-dropdown-trigger-background: transparent;
+  --nuraly-color-dropdown-trigger-border: transparent;
+
+  --nuraly-color-dropdown-item-text: #161616;
+  --nuraly-color-dropdown-item-background: transparent;
+  --nuraly-color-dropdown-item-background-hover: #e5e5e5;
+  --nuraly-color-dropdown-item-text-hover: #161616;
+  --nuraly-color-dropdown-item-background-focus: #e5e5e5;
+  --nuraly-color-dropdown-item-text-focus: #0f62fe;
+  --nuraly-color-dropdown-item-background-active: #c6c6c6;
+  --nuraly-color-dropdown-item-text-active: #161616;
+
+  --nuraly-color-dropdown-item-text-disabled: #c6c6c6;
+  --nuraly-color-dropdown-item-background-disabled: transparent;
+
+  --nuraly-color-dropdown-icon: #525252;
+  --nuraly-color-dropdown-icon-disabled: #c6c6c6;
+
+  --nuraly-color-dropdown-divider: #e0e0e0;
+
+  --nuraly-color-dropdown-arrow: #ffffff;
+  --nuraly-color-dropdown-arrow-border: #e0e0e0;
+}
+
+/* ==============================================
+ * dropdown/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"] {
+
+  --nuraly-color-dropdown-background: #262626;
+  --nuraly-color-dropdown-border: #525252;
+  --nuraly-color-dropdown-shadow: rgba(0, 0, 0, 0.5);
+
+  --nuraly-color-dropdown-trigger-text: #f4f4f4;
+  --nuraly-color-dropdown-trigger-background: transparent;
+  --nuraly-color-dropdown-trigger-border: transparent;
+
+  --nuraly-color-dropdown-item-text: #f4f4f4;
+  --nuraly-color-dropdown-item-background: transparent;
+  --nuraly-color-dropdown-item-background-hover: #353535;
+  --nuraly-color-dropdown-item-text-hover: #ffffff;
+  --nuraly-color-dropdown-item-background-focus: #353535;
+  --nuraly-color-dropdown-item-text-focus: #78a9ff;
+  --nuraly-color-dropdown-item-background-active: #525252;
+  --nuraly-color-dropdown-item-text-active: #ffffff;
+
+  --nuraly-color-dropdown-item-text-disabled: #6f6f6f;
+  --nuraly-color-dropdown-item-background-disabled: transparent;
+
+  --nuraly-color-dropdown-icon: #c6c6c6;
+  --nuraly-color-dropdown-icon-disabled: #6f6f6f;
+
+  --nuraly-color-dropdown-divider: #525252;
+
+  --nuraly-color-dropdown-arrow: #262626;
+  --nuraly-color-dropdown-arrow-border: #525252;
+}
+
+/* ==============================================
+ * modal/index.css
+ * ============================================== */
+
+@media screen {
+  [data-theme="carbon-dark"] {
+    
+    --theme-mode: dark;
+  }
+  
+  [data-theme="carbon-light"] {
+    
+    --theme-mode: light;
+  }
+}
+
+/* ==============================================
+ * modal/common.css
+ * ============================================== */
+
+[data-theme^="carbon"]{
+  
+  --nuraly-modal-width-small: 400px;
+  --nuraly-modal-width-medium: 600px;
+  --nuraly-modal-width-large: 800px;
+  --nuraly-modal-width-xl: 1000px;
+  
+  --nuraly-modal-min-height-small: 200px;
+  --nuraly-modal-min-height-medium: 300px;
+  --nuraly-modal-min-height-large: 400px;
+  --nuraly-modal-min-height-xl: 500px;
+
+  --nuraly-spacing-modal-padding: var(--nuraly-spacing-05, 1rem);
+  --nuraly-spacing-modal-margin: var(--nuraly-spacing-07, 2rem);
+  --nuraly-spacing-modal-top: var(--nuraly-spacing-07, 2rem);
+  --nuraly-spacing-modal-bottom: var(--nuraly-spacing-07, 2rem);
+
+  --nuraly-modal-header-height: 48px;
+  --nuraly-spacing-modal-header: var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem);
+  --nuraly-modal-header-icon-size: 20px;
+
+  --nuraly-spacing-modal-body: var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem);
+
+  --nuraly-modal-footer-height: 64px;
+  --nuraly-spacing-modal-footer: var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem);
+
+  --nuraly-modal-close-size: 28px;
+  --nuraly-modal-close-icon-size: 14px;
+
+  --nuraly-border-radius-modal: 0;
+
+  --nuraly-transition-modal: 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
+  --nuraly-z-modal-backdrop: 1000;
+}
+
+/* ==============================================
+ * modal/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"] {
+  
+  --nuraly-color-modal-backdrop: rgba(22, 22, 22, 0.5);
+  --nuraly-color-modal-backdrop-nested: rgba(22, 22, 22, 0.7);
+  --nuraly-modal-backdrop-filter: none;
+
+  --nuraly-color-modal-background: #ffffff;
+  --nuraly-border-modal: 1px solid #e0e0e0;
+  --nuraly-shadow-modal: 
+    0 6px 16px 0 rgba(0, 0, 0, 0.08), 
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+  --nuraly-border-modal-header: 1px solid #e0e0e0;
+  --nuraly-color-modal-title: #161616;
+  --nuraly-font-size-modal-title: var(--nuraly-font-size-04, 1.125rem);
+  --nuraly-font-weight-modal-title: var(--nuraly-font-weight-medium, 500);
+  --nuraly-color-modal-header-icon: #525252;
+
+  --nuraly-color-modal-body-text: #161616;
+
+  --nuraly-border-modal-footer: 1px solid #e0e0e0;
+
+  --nuraly-color-modal-close-icon: #525252;
+  --nuraly-color-modal-close-icon-hover: #161616;
+  --nuraly-color-modal-close-hover: #f4f4f4;
+  --nuraly-color-modal-close-active: #c6c6c6;
+}
+
+/* ==============================================
+ * modal/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"] {
+  
+  --nuraly-color-modal-backdrop: rgba(0, 0, 0, 0.6);
+  --nuraly-color-modal-backdrop-nested: rgba(0, 0, 0, 0.8);
+  --nuraly-modal-backdrop-filter: none;
+
+  --nuraly-color-modal-background: #262626;
+  --nuraly-border-modal: 1px solid #525252;
+  --nuraly-shadow-modal: 
+    0 6px 16px 0 rgba(0, 0, 0, 0.3), 
+    0 3px 6px -4px rgba(0, 0, 0, 0.2),
+    0 9px 28px 8px rgba(0, 0, 0, 0.15);
+
+  --nuraly-border-modal-header: 1px solid #525252;
+  --nuraly-color-modal-title: #f4f4f4;
+  --nuraly-font-size-modal-title: var(--nuraly-font-size-04, 1.125rem);
+  --nuraly-font-weight-modal-title: var(--nuraly-font-weight-medium, 500);
+  --nuraly-color-modal-header-icon: #c6c6c6;
+
+  --nuraly-color-modal-body-text: #f4f4f4;
+
+  --nuraly-border-modal-footer: 1px solid #525252;
+
+  --nuraly-color-modal-close-icon: #c6c6c6;
+  --nuraly-color-modal-close-icon-hover: #f4f4f4;
+  --nuraly-color-modal-close-hover: #393939;
+  --nuraly-color-modal-close-active: #525252;
+}
+
+/* ==============================================
+ * tabs/index.css
+ * ============================================== */
+
+@media screen {
+  [data-theme="carbon-dark"] {
+    
+    --theme-mode: dark;
+  }
+
+  [data-theme="carbon-light"] {
+    
+    --theme-mode: light;
+  }
+}
+
+/* ==============================================
+ * tabs/common.css
+ * ============================================== */
+
+[data-theme^="carbon"] {
+
+  --nuraly-spacing-tabs-padding: 0.875rem 1rem; 
+  --nuraly-spacing-tabs-content-padding: 1rem;   
+
+  --nuraly-border-radius-tabs: 0; 
+  --nuraly-border-radius-tabs-active: 0.125rem; 
+  --nuraly-border-width-tabs: 1px;
+
+  --nuraly-border-radius-tabs-first: 0.125rem 0 0 0.125rem; 
+  --nuraly-border-radius-tabs-middle: 0; 
+  --nuraly-border-radius-tabs-last: 0 0.125rem 0.125rem 0; 
+  --nuraly-border-radius-tabs-single: 0.125rem; 
+
+  --nuraly-border-radius-small: 0.125rem; 
+  --nuraly-border-radius-medium: 0.25rem; 
+
+  --nuraly-font-tabs-weight: 400;
+  --nuraly-font-tabs-size: 0.875rem; 
+  --nuraly-font-tabs-line-height: 1.125rem; 
+
+  --nuraly-tabs-icon-size: 1rem; 
+  --nuraly-tabs-close-icon-size: 1rem; 
+  --nuraly-tabs-add-icon-size: 1rem; 
+  --nuraly-tabs-add-button-size: 2.5rem; 
+
+  --nuraly-tabs-vertical-width: 12rem; 
+
+  --nuraly-color-tabs-focus-outline: #0f62fe;
+  --nuraly-color-tabs-focus-ring: rgba(15, 98, 254, 0.2);
+
+  --nuraly-shadow-tabs: none;
+  --nuraly-shadow-tabs-hover: none;
+  --nuraly-shadow-tabs-active: none;
+  --nuraly-shadow-tabs-focus: 0 0 0 2px rgba(15, 98, 254, 0.2);
+
+  --nuraly-transition-tabs: all 0.15s ease;
+
+  --nuraly-color-tabs-disabled: #c6c6c6;
+  --nuraly-color-tabs-disabled-text: #8d8d8d;
+  --nuraly-color-tabs-disabled-border: #c6c6c6;
+}
+
+/* ==============================================
+ * tabs/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"] {
+
+  --nuraly-color-tabs-header-background: #f4f4f4;
+  --nuraly-border-tabs-header: 1px solid #e0e0e0;
+
+  --nuraly-color-tabs-label-background: #f4f4f4;
+  --nuraly-color-tabs-label-text: #161616;
+  --nuraly-border-tabs-label: 1px solid #e0e0e0;
+
+  --nuraly-color-tabs-label-background-hover: #e0e0e0;
+  --nuraly-color-tabs-label-text-hover: #161616;
+  --nuraly-color-tabs-label-border-hover: #c6c6c6;
+
+  --nuraly-color-tabs-label-background-active: #ffffff;
+  --nuraly-color-tabs-label-text-active: #161616;
+  --nuraly-color-tabs-label-border-active: #0f62fe;
+
+  --nuraly-color-tabs-content-background: #ffffff;
+  --nuraly-border-tabs-content: 1px solid #e0e0e0;
+
+  --nuraly-color-tabs-edit-background: rgba(15, 98, 254, 0.1); 
+
+  --nuraly-color-tabs-close-icon: #525252;
+  --nuraly-color-tabs-close-icon-hover: #da1e28; 
+  --nuraly-color-tabs-close-icon-background-hover: rgba(218, 30, 40, 0.1);
+  --nuraly-color-tabs-close-icon-active: #ba1b23; 
+  --nuraly-color-tabs-close-icon-background-active: rgba(218, 30, 40, 0.2);
+
+  --nuraly-color-tabs-add-icon: #0f62fe;
+  --nuraly-color-tabs-add-icon-hover: #0353e9; 
+  --nuraly-color-tabs-add-background-hover: rgba(15, 98, 254, 0.1);
+
+  --nuraly-color-border: #e0e0e0; 
+}
+
+/* ==============================================
+ * tabs/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"] {
+
+  --nuraly-color-tabs-header-background: #262626;
+  --nuraly-border-tabs-header: 1px solid #393939;
+
+  --nuraly-color-tabs-label-background: #262626;
+  --nuraly-color-tabs-label-text: #f4f4f4;
+  --nuraly-border-tabs-label: 1px solid #393939;
+
+  --nuraly-color-tabs-label-background-hover: #393939;
+  --nuraly-color-tabs-label-text-hover: #f4f4f4;
+  --nuraly-color-tabs-label-border-hover: #525252;
+
+  --nuraly-color-tabs-label-background-active: #161616;
+  --nuraly-color-tabs-label-text-active: #f4f4f4;
+  --nuraly-color-tabs-label-border-active: #4589ff; 
+
+  --nuraly-color-tabs-content-background: #161616;
+  --nuraly-border-tabs-content: 1px solid #393939;
+
+  --nuraly-color-tabs-edit-background: rgba(69, 137, 255, 0.2); 
+
+  --nuraly-color-tabs-close-icon: #c6c6c6;
+  --nuraly-color-tabs-close-icon-hover: #ff8389; 
+  --nuraly-color-tabs-close-icon-background-hover: rgba(255, 131, 137, 0.2);
+  --nuraly-color-tabs-close-icon-active: #ff6168; 
+  --nuraly-color-tabs-close-icon-background-active: rgba(255, 131, 137, 0.3);
+
+  --nuraly-color-tabs-add-icon: #4589ff;
+  --nuraly-color-tabs-add-icon-hover: #78a9ff; 
+  --nuraly-color-tabs-add-background-hover: rgba(69, 137, 255, 0.2);
+
+  --nuraly-color-border: #393939; 
+}
+
+/* ==============================================
+ * collapse/index.css
+ * ============================================== */
+
+/* ==============================================
+ * collapse/common.css
+ * ============================================== */
+
+[data-theme^="carbon"] {
+
+  --nuraly-spacing-collapse-padding: 0.75rem 1rem; 
+  --nuraly-spacing-collapse-content-padding: 1rem; 
+  --nuraly-spacing-collapse-gap: 0; 
+
+  --nuraly-border-radius-collapse: 0; 
+  --nuraly-border-radius-collapse-header: 0; 
+  --nuraly-border-radius-collapse-content: 0; 
+  --nuraly-border-width-collapse: 1px;
+
+  --nuraly-font-collapse-header-weight: 600; 
+  --nuraly-font-collapse-header-size: 0.875rem; 
+  --nuraly-font-collapse-header-line-height: 1.25rem; 
+  --nuraly-font-collapse-content-weight: 400; 
+  --nuraly-font-collapse-content-size: 0.875rem; 
+  --nuraly-font-collapse-content-line-height: 1.5rem; 
+
+  --nuraly-collapse-icon-size: 1rem; 
+  --nuraly-collapse-icon-transition: transform 0.2s ease;
+
+  --nuraly-spacing-collapse-small-padding: 0.5rem 0.75rem; 
+  --nuraly-spacing-collapse-small-content-padding: 0.75rem; 
+  --nuraly-spacing-collapse-medium-padding: 0.75rem 1rem; 
+  --nuraly-spacing-collapse-medium-content-padding: 1rem; 
+  --nuraly-spacing-collapse-large-padding: 1rem 1.25rem; 
+  --nuraly-spacing-collapse-large-content-padding: 1.25rem; 
+
+  --nuraly-collapse-transition-duration: 0.15s; 
+  --nuraly-collapse-transition-easing: cubic-bezier(0.2, 0, 0.38, 0.9); 
+
+  --nuraly-color-collapse-focus-outline: #0f62fe;
+  --nuraly-color-collapse-focus-ring: rgba(15, 98, 254, 0.4);
+
+  --nuraly-opacity-collapse-disabled: 0.5;
+}
+
+/* ==============================================
+ * collapse/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"],
+:root {
+
+  --nuraly-color-collapse-header-background: #f4f4f4; 
+  --nuraly-color-collapse-header-background-hover: #e0e0e0; 
+  --nuraly-color-collapse-header-background-active: #c6c6c6; 
+  --nuraly-color-collapse-header-background-expanded: #e0e0e0; 
+  --nuraly-color-collapse-header-text: #161616; 
+  --nuraly-color-collapse-header-text-disabled: #a8a8a8; 
+
+  --nuraly-color-collapse-content-background: #ffffff; 
+  --nuraly-color-collapse-content-text: #393939; 
+  --nuraly-color-collapse-content-text-secondary: #6f6f6f; 
+
+  --nuraly-color-collapse-border: #e0e0e0; 
+  --nuraly-color-collapse-border-hover: #c6c6c6; 
+  --nuraly-color-collapse-border-active: #a8a8a8; 
+  --nuraly-color-collapse-border-focus: #0f62fe; 
+
+  --nuraly-color-collapse-icon: #393939; 
+  --nuraly-color-collapse-icon-hover: #161616; 
+  --nuraly-color-collapse-icon-disabled: #a8a8a8; 
+
+  --nuraly-shadow-collapse: none; 
+  --nuraly-shadow-collapse-hover: none;
+  --nuraly-shadow-collapse-focus: 0 0 0 2px rgba(15, 98, 254, 0.4);
+
+  --nuraly-color-collapse-bordered-border: #e0e0e0; 
+  --nuraly-color-collapse-bordered-background: #ffffff; 
+  
+  --nuraly-color-collapse-ghost-background: transparent;
+  --nuraly-color-collapse-ghost-border: transparent;
+  --nuraly-color-collapse-ghost-hover: #f4f4f4; 
+}
+
+/* ==============================================
+ * collapse/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"] {
+
+  --nuraly-color-collapse-header-background: #393939; 
+  --nuraly-color-collapse-header-background-hover: #4c4c4c; 
+  --nuraly-color-collapse-header-background-active: #6f6f6f; 
+  --nuraly-color-collapse-header-background-expanded: #4c4c4c; 
+  --nuraly-color-collapse-header-text: #f4f4f4; 
+  --nuraly-color-collapse-header-text-disabled: #6f6f6f; 
+
+  --nuraly-color-collapse-content-background: #262626; 
+  --nuraly-color-collapse-content-text: #e0e0e0; 
+  --nuraly-color-collapse-content-text-secondary: #a8a8a8; 
+
+  --nuraly-color-collapse-border: #525252; 
+  --nuraly-color-collapse-border-hover: #6f6f6f; 
+  --nuraly-color-collapse-border-active: #8d8d8d; 
+  --nuraly-color-collapse-border-focus: #4589ff; 
+
+  --nuraly-color-collapse-icon: #e0e0e0; 
+  --nuraly-color-collapse-icon-hover: #f4f4f4; 
+  --nuraly-color-collapse-icon-disabled: #6f6f6f; 
+
+  --nuraly-shadow-collapse: none; 
+  --nuraly-shadow-collapse-hover: none;
+  --nuraly-shadow-collapse-focus: 0 0 0 2px rgba(69, 137, 255, 0.4);
+
+  --nuraly-color-collapse-bordered-border: #525252; 
+  --nuraly-color-collapse-bordered-background: #262626; 
+  
+  --nuraly-color-collapse-ghost-background: transparent;
+  --nuraly-color-collapse-ghost-border: transparent;
+  --nuraly-color-collapse-ghost-hover: #393939; 
+}
+
+/* ==============================================
+ * colorpicker/index.css
+ * ============================================== */
+
+@media screen {
+  [data-theme="carbon-dark"] {
+    
+    --theme-mode: dark;
+  }
+  
+  [data-theme="carbon-light"]
+  :root {
+    
+    --theme-mode: light;
+  }
+}
+
+/* ==============================================
+ * colorpicker/common.css
+ * ============================================== */
+
+:root,
+[data-theme="carbon-light"],
+[data-theme="carbon-dark"] {
+
+  --nuraly-size-colorpicker-default: 32px;
+  --nuraly-size-colorpicker-default-height: 32px;
+  --nuraly-size-colorpicker-small: 24px;
+  --nuraly-size-colorpicker-small-height: 24px;
+  --nuraly-size-colorpicker-large: 40px;
+  --nuraly-size-colorpicker-large-height: 40px;
+
+  --nuraly-border-radius-colorpicker: 0px;
+  --nuraly-border-width-colorpicker: 1px;
+
+  --nuraly-z-index-dropdown: 6000; 
+  --nuraly-shadow-dropdown: 0 2px 6px rgba(0, 0, 0, 0.3);
+  --nuraly-border-radius-dropdown: 0px;
+
+  --nuraly-spacing-colorpicker-padding: 8px;
+  --nuraly-spacing-colorpicker-preset-gap: 4px;
+
+  --nuraly-opacity-disabled: 0.5;
+  --nuraly-opacity-hover: 0.85;
+
+  --nuraly-color-focus: rgba(15, 98, 254, 0.5);
+  --nuraly-color-focus-active: rgba(15, 98, 254, 0.8);
+
+  --nuraly-transition-fast: 0.11s; 
+  --nuraly-transition-base: 0.15s;
+}
+
+/* ==============================================
+ * colorpicker/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"] {
+
+  --nuraly-color-surface: #f4f4f4;
+  --nuraly-color-surface-hover: #e8e8e8;
+
+  --nuraly-color-border: #c6c6c6;
+  --nuraly-color-border-hover: #8d8d8d;
+
+  --nuraly-color-text: #161616;
+  --nuraly-color-text-secondary: #525252;
+
+  --nuraly-color-background: #ffffff;
+  --nuraly-color-background-hover: #f4f4f4;
+
+  --nuraly-color-dropdown-background: #f4f4f4;
+  --nuraly-color-dropdown-border: #8d8d8d;
+
+  --nuraly-color-colorholder-border: #e0e0e0;
+  --nuraly-color-colorholder-border-hover: #8d8d8d;
+
+  --nuraly-color-preset-background: transparent;
+  --nuraly-color-preset-border: transparent;
+}
+
+/* ==============================================
+ * colorpicker/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"],
+html[data-theme="carbon-dark"],
+body[data-theme="carbon-dark"],
+html[data-theme="carbon-dark"] *,
+body[data-theme="carbon-dark"] * {
+
+  --nuraly-color-surface: #262626 !important;
+  --nuraly-color-surface-hover: #333333 !important;
+
+  --nuraly-color-border: #6f6f6f !important;
+  --nuraly-color-border-hover: #8d8d8d !important;
+
+  --nuraly-color-text: #f4f4f4 !important;
+  --nuraly-color-text-secondary: #c6c6c6 !important;
+
+  --nuraly-color-background: #161616 !important;
+  --nuraly-color-background-hover: #262626 !important;
+
+  --nuraly-color-dropdown-background: #262626 !important;
+  --nuraly-color-dropdown-border: #6f6f6f !important;
+
+  --nuraly-color-colorholder-border: #525252 !important;
+  --nuraly-color-colorholder-border-hover: #8d8d8d !important;
+
+  --nuraly-color-preset-background: transparent !important;
+  --nuraly-color-preset-border: transparent !important;
+
+  --nuraly-shadow-dropdown: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
+}
+
+/* ==============================================
+ * tag/index.css
+ * ============================================== */
+
+/* ==============================================
+ * tag/common.css
+ * ============================================== */
+
+:root,
+[data-theme="carbon-light"],
+[data-theme="carbon-dark"] {
+  --nuraly-tag-padding-x: 8px;
+  --nuraly-tag-padding-y: 2px;
+  --nuraly-tag-padding-x-sm: 6px;
+  --nuraly-tag-padding-y-sm: 1px;
+  --nuraly-tag-font-size: var(--nuraly-font-size-sm);
+  --nuraly-tag-font-size-sm: var(--nuraly-font-size-xs);
+  --nuraly-tag-radius: var(--nuraly-border-radius-sm);
+  --nuraly-tag-gap: 6px;
+}
+
+/* ==============================================
+ * tag/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"] {
+  --nuraly-tag-bg: var(--nuraly-color-surface, #f4f4f4);
+  --nuraly-tag-color: var(--nuraly-color-text, #161616);
+  --nuraly-tag-border-color: var(--nuraly-color-border, #e0e0e0);
+  --nuraly-tag-checkable-hover-bg: #e8e8e8;
+  --nuraly-tag-checked-bg: #ddeeff;
+  --nuraly-tag-checked-color: #0043ce;
+  --nuraly-tag-checked-border-color: #0f62fe;
+}
+
+/* ==============================================
+ * tag/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"] {
+  --nuraly-tag-bg: #262626;
+  --nuraly-tag-color: #f4f4f4;
+  --nuraly-tag-border-color: #393939;
+  --nuraly-tag-checkable-hover-bg: #333333;
+  --nuraly-tag-checked-bg: #002d9c33;
+  --nuraly-tag-checked-color: #4589ff;
+  --nuraly-tag-checked-border-color: #78a9ff;
+}
+
+/* ==============================================
+ * chatbot/index.css
+ * ============================================== */
+
+/* ==============================================
+ * chatbot/common.css
+ * ============================================== */
+
+[data-theme^="carbon"] {
+
+  --nuraly-size-chatbot-width: 100%;
+  --nuraly-size-chatbot-max-width: none; 
+  --nuraly-size-chatbot-height: 600px;
+  --nuraly-size-chatbot-min-height: 400px;
+  --nuraly-border-radius-chatbot: 0; 
+
+  --nuraly-spacing-chatbot-messages-padding: var(--nuraly-spacing-04, 0.75rem);
+  --nuraly-spacing-chatbot-messages-gap: var(--nuraly-spacing-04, 0.75rem);
+  --nuraly-size-chatbot-messages-max-height: calc(100% - 140px);
+  --nuraly-size-chatbot-messages-max-width: none; 
+
+  --nuraly-spacing-chatbot-message-padding-vertical: var(--nuraly-spacing-03, 0.5rem);
+  --nuraly-spacing-chatbot-message-padding-horizontal: var(--nuraly-spacing-04, 0.75rem);
+  --nuraly-spacing-chatbot-message-margin: var(--nuraly-spacing-03, 0.5rem) 0;
+  --nuraly-border-radius-chatbot-message: 18px; 
+  --nuraly-size-chatbot-message-max-width: 90%;
+  --nuraly-font-size-chatbot-message: 16px;
+  --nuraly-line-height-chatbot-message: 1.5;
+
+  --nuraly-font-size-chatbot-timestamp: 11px;
+  --nuraly-spacing-chatbot-timestamp-margin: var(--nuraly-spacing-02, 0.25rem) 0 0 0;
+  --nuraly-opacity-chatbot-timestamp: 0.7;
+
+  --nuraly-spacing-chatbot-input-area-padding: var(--nuraly-spacing-06, 1.5rem);
+  --nuraly-border-width-chatbot-input-area: 1px;
+  --nuraly-size-chatbot-input-min-height: 52px;
+  --nuraly-spacing-chatbot-input-gap: var(--nuraly-spacing-04, 0.75rem);
+  --nuraly-border-radius-chatbot-input: 26px; 
+
+  --nuraly-spacing-chatbot-suggestions-gap: var(--nuraly-spacing-04, 0.75rem);
+  --nuraly-spacing-chatbot-suggestions-margin: var(--nuraly-spacing-05, 1rem) 0;
+  --nuraly-spacing-chatbot-suggestion-padding-vertical: var(--nuraly-spacing-02, 0.25rem);
+  --nuraly-spacing-chatbot-suggestion-padding-horizontal: var(--nuraly-spacing-04, 0.75rem);
+  --nuraly-border-radius-chatbot-suggestion: 24px; 
+  --nuraly-font-size-chatbot-suggestion: 15px;
+
+  --nuraly-spacing-chatbot-file-upload-padding: var(--nuraly-spacing-05, 1rem);
+  --nuraly-border-radius-chatbot-file-upload: 12px;
+  --nuraly-border-width-chatbot-file-upload: 2px;
+  --nuraly-border-style-chatbot-file-upload: dashed;
+  --nuraly-size-chatbot-file-upload-min-height: 120px;
+
+  --nuraly-size-chatbot-file-preview: 32px;
+  --nuraly-spacing-chatbot-file-preview-gap: var(--nuraly-spacing-03, 0.5rem);
+  --nuraly-border-radius-chatbot-file-preview: var(--nuraly-spacing-02, 0.25rem);
+
+  --nuraly-size-chatbot-typing-dot: 6px;
+  --nuraly-animation-chatbot-typing-duration: 1.4s;
+
+  --nuraly-size-chatbot-action-button: 32px;
+  --nuraly-spacing-chatbot-action-button-gap: var(--nuraly-spacing-02, 0.25rem);
+  --nuraly-border-radius-chatbot-action-button: 16px; 
+
+  --nuraly-size-chatbot-sidebar-width: 260px;
+  --nuraly-spacing-chatbot-sidebar-padding: var(--nuraly-spacing-04, 0.75rem);
+
+  --nuraly-size-chatbot-send-button-width: 32px;
+  --nuraly-size-chatbot-send-button-height: 32px;
+  --nuraly-border-radius-chatbot-send-button: 16px; 
+
+  --nuraly-border-radius-chatbot-dropdown-panel: 8px;
+  --nuraly-size-chatbot-dropdown-panel-min-width: 160px;
+  --nuraly-shadow-chatbot-dropdown-panel: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  --nuraly-transition-chatbot-fast: var(--nuraly-transition-fast, 0.15s ease-out);
+  --nuraly-transition-chatbot-normal: var(--nuraly-transition-normal, 0.25s ease-out);
+  --nuraly-transition-chatbot-slow: var(--nuraly-transition-slow, 0.35s ease-out);
+
+  --nuraly-z-index-chatbot-input: 10;
+  --nuraly-z-index-chatbot-suggestions: 20;
+  --nuraly-z-index-chatbot-file-upload: 30;
+  --nuraly-z-index-chatbot-typing: 5;
+  --nuraly-z-index-chatbot-dropdown: 100;
+
+  --nuraly-spacing-chatbot-boxed-padding: var(--nuraly-spacing-07, 1.5rem);
+  --nuraly-size-chatbot-boxed-max-width: 768px;
+  --nuraly-size-chatbot-boxed-content-max-width: 100%;
+  --nuraly-spacing-chatbot-boxed-content-padding: var(--nuraly-spacing-06, 1.5rem);
+  --nuraly-border-radius-chatbot-boxed: 12px;
+  --nuraly-shadow-chatbot-boxed: 0 4px 24px rgba(0, 0, 0, 0.1);
+}
+
+/* ==============================================
+ * chatbot/light.css
+ * ============================================== */
+
+[data-theme="carbon-light"] {
+
+  --nuraly-color-chatbot-background: #ffffff;
+  --nuraly-color-chatbot-surface: #f9f9f9;
+  --nuraly-color-chatbot-surface-hover: #f1f1f1;
+  --nuraly-color-chatbot-border: #e5e5e5;
+  --nuraly-shadow-chatbot: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  --nuraly-color-chatbot-sidebar-background: #f7f7f8;
+  --nuraly-color-chatbot-sidebar-border: #d1d5db;
+  --nuraly-color-chatbot-sidebar-text: #374151;
+
+  --nuraly-color-chatbot-message-user-background: #343541;
+  --nuraly-color-chatbot-message-user-text: #ffffff;
+  --nuraly-color-chatbot-message-user-border: transparent;
+
+  --nuraly-color-chatbot-message-bot-background: transparent;
+  --nuraly-color-chatbot-message-bot-text: #374151;
+  --nuraly-color-chatbot-message-bot-border: transparent;
+
+  --nuraly-color-chatbot-message-error-background: #fff1f1;
+  --nuraly-color-chatbot-message-error-text: #da1e28;
+  --nuraly-color-chatbot-message-error-border: #da1e28;
+
+  --nuraly-color-chatbot-message-system-background: #f4f4f4;
+  --nuraly-color-chatbot-message-system-text: #6f6f6f;
+  --nuraly-color-chatbot-message-system-border: #e0e0e0;
+
+  --nuraly-color-chatbot-text-primary: #2d2d2d;
+  --nuraly-color-chatbot-text-secondary: #676767;
+  --nuraly-color-chatbot-text-helper: #8e8e8e;
+  --nuraly-color-chatbot-text-on-accent: #ffffff;
+  --nuraly-color-chatbot-text-disabled: #c4c4c4;
+
+  --nuraly-color-chatbot-timestamp: #9ca3af;
+
+  --nuraly-color-chatbot-input-background: #ffffff;
+  --nuraly-color-chatbot-input-text: #2d2d2d;
+  --nuraly-color-chatbot-input-placeholder: #8e8ea0;
+  --nuraly-color-chatbot-input-border: #d9d9e3;
+  --nuraly-color-chatbot-input-border-focus: #10a37f;
+
+  --nuraly-color-chatbot-suggestion-background: #f4f4f4;
+  --nuraly-color-chatbot-suggestion-background-hover: #e8e8e8;
+  --nuraly-color-chatbot-suggestion-background-active: #d9d9d9;
+  --nuraly-color-chatbot-suggestion-text: #2d2d2d;
+  --nuraly-color-chatbot-suggestion-border: #e0e0e0;
+  --nuraly-color-chatbot-suggestion-border-hover: #c5c5d2;
+  --nuraly-color-chatbot-suggestion-focus: #10a37f;
+
+  --nuraly-color-chatbot-send-button-background: #10a37f;
+  --nuraly-color-chatbot-send-button-background-hover: #0d8f6e;
+  --nuraly-color-chatbot-send-button-background-active: #0a7c5d;
+  --nuraly-color-chatbot-send-button-background-disabled: #d9d9e3;
+  --nuraly-color-chatbot-send-button-text: #ffffff;
+  --nuraly-color-chatbot-send-button-text-disabled: #8e8ea0;
+  --nuraly-color-chatbot-send-button-focus: #10a37f;
+
+  --nuraly-color-chatbot-file-upload-background: rgba(15, 98, 254, 0.05);
+  --nuraly-color-chatbot-file-upload-background-hover: rgba(15, 98, 254, 0.1);
+  --nuraly-color-chatbot-file-upload-border: #0f62fe;
+  --nuraly-color-chatbot-file-upload-text: #161616;
+  --nuraly-color-chatbot-file-upload-helper: #6f6f6f;
+
+  --nuraly-color-chatbot-file-preview-background: #ffffff;
+  --nuraly-color-chatbot-file-preview-border: #e0e0e0;
+  --nuraly-color-chatbot-file-preview-text: #161616;
+  --nuraly-color-chatbot-file-preview-icon: #525252;
+
+  --nuraly-color-chatbot-typing-dot: #8d8d8d;
+  --nuraly-color-chatbot-typing-background: #ffffff;
+  --nuraly-color-chatbot-typing-text: #6f6f6f;
+
+  --nuraly-color-chatbot-action-button-background: transparent;
+  --nuraly-color-chatbot-action-button-background-hover: #f4f4f4;
+  --nuraly-color-chatbot-action-button-text: #525252;
+  --nuraly-color-chatbot-action-button-text-hover: #161616;
+  --nuraly-color-chatbot-action-button-border: #e0e0e0;
+  --nuraly-color-chatbot-action-button-border-hover: #525252;
+  --nuraly-color-chatbot-action-button-focus: #0f62fe;
+  --nuraly-color-chatbot-action-button-background-disabled: #f4f4f4;
+  --nuraly-color-chatbot-action-button-text-disabled: #c6c6c6;
+  --nuraly-color-chatbot-action-button-border-disabled: #e0e0e0;
+
+  --nuraly-color-chatbot-dropdown-panel-background: #ffffff;
+  --nuraly-color-chatbot-dropdown-panel-border: #e5e5e5;
+
+  --nuraly-color-chatbot-boxed-background: #f7f7f8;
+
+  --nuraly-color-chatbot-accent: #10a37f;
+  --nuraly-color-chatbot-accent-hover: #0d8f72;
+  --nuraly-color-chatbot-accent-active: #0a7c66;
+
+  --nuraly-color-chatbot-thread-background: transparent;
+  --nuraly-color-chatbot-thread-background-hover: #e8e8e8;
+  --nuraly-color-chatbot-thread-background-active: #0f62fe;
+  --nuraly-color-chatbot-thread-text: #161616;
+  --nuraly-color-chatbot-thread-text-active: #ffffff;
+
+  --nuraly-color-chatbot-disabled: #c6c6c6;
+  --nuraly-color-chatbot-disabled-text: #8d8d8d;
+
+  --nuraly-color-chatbot-scrollbar-track: #f4f4f4;
+  --nuraly-color-chatbot-scrollbar-thumb: #c6c6c6;
+  --nuraly-color-chatbot-scrollbar-thumb-hover: #a8a8a8;
+}
+
+/* ==============================================
+ * chatbot/dark.css
+ * ============================================== */
+
+[data-theme="carbon-dark"] {
+
+  --nuraly-color-chatbot-background: #161616;
+  --nuraly-color-chatbot-surface: #262626;
+  --nuraly-color-chatbot-surface-hover: #353535;
+  --nuraly-color-chatbot-border: #393939;
+  --nuraly-shadow-chatbot: none; 
+
+  --nuraly-color-chatbot-sidebar-background: #262626;
+  --nuraly-color-chatbot-sidebar-border: #393939;
+  --nuraly-color-chatbot-sidebar-text: #f4f4f4;
+
+  --nuraly-color-chatbot-message-user-background: #262626;
+  --nuraly-color-chatbot-message-user-text: #f4f4f4;
+  --nuraly-color-chatbot-message-user-border: transparent;
+
+  --nuraly-color-chatbot-message-bot-background: transparent;
+  --nuraly-color-chatbot-message-bot-text: #f4f4f4;
+  --nuraly-color-chatbot-message-bot-border: transparent;
+
+  --nuraly-color-chatbot-message-error-background: rgba(218, 30, 40, 0.1);
+  --nuraly-color-chatbot-message-error-text: #ff8389;
+  --nuraly-color-chatbot-message-error-border: #da1e28;
+
+  --nuraly-color-chatbot-message-system-background: #262626;
+  --nuraly-color-chatbot-message-system-text: #a8a8a8;
+  --nuraly-color-chatbot-message-system-border: #393939;
+
+  --nuraly-color-chatbot-text-primary: #f4f4f4;
+  --nuraly-color-chatbot-text-secondary: #c6c6c6;
+  --nuraly-color-chatbot-text-helper: #a8a8a8;
+  --nuraly-color-chatbot-text-on-accent: #ffffff;
+  --nuraly-color-chatbot-text-disabled: #6f6f6f;
+
+  --nuraly-color-chatbot-timestamp: #8d8d8d;
+
+  --nuraly-color-chatbot-input-background: #262626;
+  --nuraly-color-chatbot-input-text: #f4f4f4;
+  --nuraly-color-chatbot-input-placeholder: #6f6f6f;
+  --nuraly-color-chatbot-input-border: #393939;
+  --nuraly-color-chatbot-input-border-focus: #0f62fe;
+
+  --nuraly-color-chatbot-suggestion-background: #262626;
+  --nuraly-color-chatbot-suggestion-background-hover: #353535;
+  --nuraly-color-chatbot-suggestion-background-active: #404040;
+  --nuraly-color-chatbot-suggestion-text: #f4f4f4;
+  --nuraly-color-chatbot-suggestion-border: #393939;
+  --nuraly-color-chatbot-suggestion-border-hover: #0f62fe;
+  --nuraly-color-chatbot-suggestion-focus: #0f62fe;
+
+  --nuraly-color-chatbot-send-button-background: #0f62fe;
+  --nuraly-color-chatbot-send-button-background-hover: #0353e9;
+  --nuraly-color-chatbot-send-button-background-active: #0530ad;
+  --nuraly-color-chatbot-send-button-background-disabled: #393939;
+  --nuraly-color-chatbot-send-button-text: #ffffff;
+  --nuraly-color-chatbot-send-button-text-disabled: #6f6f6f;
+  --nuraly-color-chatbot-send-button-focus: #0f62fe;
+
+  --nuraly-color-chatbot-file-upload-background: rgba(15, 98, 254, 0.1);
+  --nuraly-color-chatbot-file-upload-background-hover: rgba(15, 98, 254, 0.15);
+  --nuraly-color-chatbot-file-upload-border: #0f62fe;
+  --nuraly-color-chatbot-file-upload-text: #f4f4f4;
+  --nuraly-color-chatbot-file-upload-helper: #a8a8a8;
+
+  --nuraly-color-chatbot-file-preview-background: #262626;
+  --nuraly-color-chatbot-file-preview-border: #393939;
+  --nuraly-color-chatbot-file-preview-text: #f4f4f4;
+  --nuraly-color-chatbot-file-preview-icon: #c6c6c6;
+
+  --nuraly-color-chatbot-typing-dot: #8d8d8d;
+  --nuraly-color-chatbot-typing-background: #161616;
+  --nuraly-color-chatbot-typing-text: #a8a8a8;
+
+  --nuraly-color-chatbot-action-button-background: transparent;
+  --nuraly-color-chatbot-action-button-background-hover: #393939;
+  --nuraly-color-chatbot-action-button-text: #c6c6c6;
+  --nuraly-color-chatbot-action-button-text-hover: #f4f4f4;
+  --nuraly-color-chatbot-action-button-border: #525252;
+  --nuraly-color-chatbot-action-button-border-hover: #c6c6c6;
+  --nuraly-color-chatbot-action-button-focus: #0f62fe;
+  --nuraly-color-chatbot-action-button-background-disabled: #262626;
+  --nuraly-color-chatbot-action-button-text-disabled: #6f6f6f;
+  --nuraly-color-chatbot-action-button-border-disabled: #393939;
+
+  --nuraly-color-chatbot-dropdown-panel-background: #262626;
+  --nuraly-color-chatbot-dropdown-panel-border: #393939;
+
+  --nuraly-color-chatbot-boxed-background: #0d1117;
+
+  --nuraly-color-chatbot-accent: #0f62fe;
+  --nuraly-color-chatbot-accent-hover: #0353e9;
+  --nuraly-color-chatbot-accent-active: #002d9c;
+
+  --nuraly-color-chatbot-thread-background: transparent;
+  --nuraly-color-chatbot-thread-background-hover: #353535;
+  --nuraly-color-chatbot-thread-background-active: #0f62fe;
+  --nuraly-color-chatbot-thread-text: #f4f4f4;
+  --nuraly-color-chatbot-thread-text-active: #ffffff;
+
+  --nuraly-color-chatbot-disabled: #6f6f6f;
+  --nuraly-color-chatbot-disabled-text: #525252;
+
+  --nuraly-color-chatbot-scrollbar-track: #262626;
+  --nuraly-color-chatbot-scrollbar-thumb: #525252;
+  --nuraly-color-chatbot-scrollbar-thumb-hover: #6f6f6f;
+}
+