@nuraly/lumenui 0.1.0

package/packages/themes/dist/editor.css

@@ -0,0 +1,1063 @@
+/**
+ * Editor Theme Bundle
+ * Generated automatically - do not edit directly
+ * Source: src/shared/themes/editor
+ */
+
+/* ==============================================
+ * theme.css
+ * ============================================== */
+
+:root,
+[data-theme="editor-light"] {
+
+  --nuraly-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "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-xs: 0.6875rem;   
+  --nuraly-font-size-sm: 0.8125rem;   
+  --nuraly-font-size-base: 0.875rem;  
+  --nuraly-font-size-lg: 0.9375rem;   
+  --nuraly-font-size-xl: 1rem;        
+  --nuraly-font-size-2xl: 1.125rem;   
+
+  --nuraly-line-height-tight: 1.3;
+  --nuraly-line-height-normal: 1.5;
+  --nuraly-line-height-relaxed: 1.7;
+
+  --nuraly-color-primary: #0d6efd;
+  --nuraly-color-primary-hover: #0b5ed7;
+  --nuraly-color-primary-active: #0a58ca;
+  --nuraly-color-primary-light: #cfe2ff;
+  --nuraly-color-primary-dark: #084298;
+
+  --nuraly-color-secondary: #6c757d;
+  --nuraly-color-secondary-hover: #7c858e;
+  --nuraly-color-secondary-active: #5a6268;
+  --nuraly-color-secondary-light: #e9ecef;
+  --nuraly-color-secondary-dark: #343a40;
+
+  --nuraly-color-success: #28a745;
+  --nuraly-color-success-hover: #34ce57;
+  --nuraly-color-success-active: #218838;
+  --nuraly-color-success-light: #d4edda;
+  --nuraly-color-success-dark: #155724;
+
+  --nuraly-color-warning: #ffc107;
+  --nuraly-color-warning-hover: #ffcd39;
+  --nuraly-color-warning-active: #e0a800;
+  --nuraly-color-warning-light: #fff3cd;
+  --nuraly-color-warning-dark: #856404;
+
+  --nuraly-color-danger: #dc3545;
+  --nuraly-color-danger-hover: #e4606d;
+  --nuraly-color-danger-active: #bd2130;
+  --nuraly-color-danger-light: #f8d7da;
+  --nuraly-color-danger-dark: #721c24;
+
+  --nuraly-color-info: #17a2b8;
+  --nuraly-color-info-hover: #1fc8e3;
+  --nuraly-color-info-active: #117a8b;
+  --nuraly-color-info-light: #d1ecf1;
+  --nuraly-color-info-dark: #0c5460;
+
+  --nuraly-color-background: #f8f9fa;           
+  --nuraly-color-background-panel: #ffffff;     
+  --nuraly-color-background-panel-alt: #f8f9fa; 
+  --nuraly-color-background-hover: #f8f9fa;     
+  --nuraly-color-background-active: #e9ecef;    
+  --nuraly-color-background-disabled: #e9ecef;
+  --nuraly-color-background-overlay: rgba(0, 0, 0, 0.5);
+  --nuraly-color-background-toolbar: #ffffff;   
+  --nuraly-color-background-header: #ffffff;    
+
+  --nuraly-color-text: #212529;                 
+  --nuraly-color-text-panel: #212529;           
+  --nuraly-color-text-secondary: #6c757d;       
+  --nuraly-color-text-panel-secondary: #6c757d; 
+  --nuraly-color-text-tertiary: #adb5bd;        
+  --nuraly-color-text-on-color: #ffffff;
+  --nuraly-color-text-disabled: #adb5bd;
+  --nuraly-color-text-inverse: #ffffff;
+  --nuraly-color-text-muted: #6c757d;
+
+  --nuraly-color-border: #dee2e6;               
+  --nuraly-color-border-panel: #dee2e6;         
+  --nuraly-color-border-subtle: #f1f3f5;
+  --nuraly-color-border-strong: #adb5bd;
+  --nuraly-color-border-inverse: #495057;
+  --nuraly-color-border-brand: #0d6efd;
+  --nuraly-color-border-danger: #dc3545;
+  --nuraly-color-border-success: #198754;
+  --nuraly-color-border-warning: #ffc107;
+
+  --nuraly-border-radius-none: 0;
+  --nuraly-border-radius-xs: 2px;
+  --nuraly-border-radius-sm: 3px;
+  --nuraly-border-radius-md: 4px;
+  --nuraly-border-radius-lg: 6px;
+  --nuraly-border-radius-xl: 8px;
+  --nuraly-border-radius-2xl: 12px;
+  --nuraly-border-radius-full: 9999px;
+
+  --nuraly-spacing-xs: 4px;
+  --nuraly-spacing-sm: 8px;
+  --nuraly-spacing-md: 12px;
+  --nuraly-spacing-lg: 16px;
+  --nuraly-spacing-xl: 24px;
+  --nuraly-spacing-2xl: 32px;
+
+  --nuraly-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --nuraly-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --nuraly-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --nuraly-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.2);
+  --nuraly-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.25);
+
+  --nuraly-shadow-panel: 2px 0 8px rgba(0, 0, 0, 0.15);
+  --nuraly-shadow-dropdown: 0 3px 12px rgba(0, 0, 0, 0.2);
+  --nuraly-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.3);
+
+  --nuraly-transition-fast: 150ms ease-in-out;
+  --nuraly-transition-base: 200ms ease-in-out;
+  --nuraly-transition-slow: 300ms ease-in-out;
+
+  --nuraly-z-index-dropdown: 1000;
+  --nuraly-z-index-sticky: 1020;
+  --nuraly-z-index-fixed: 1030;
+  --nuraly-z-index-modal-backdrop: 1040;
+  --nuraly-z-index-modal: 1050;
+  --nuraly-z-index-popover: 1060;
+  --nuraly-z-index-tooltip: 1070;
+
+  --nuraly-sidebar-width: 260px;
+  --nuraly-toolbar-height: 48px;
+  --nuraly-header-height: 56px;
+  --nuraly-panel-min-width: 220px;
+  --nuraly-panel-max-width: 360px;
+
+  --nuraly-icon-size-sm: 14px;
+  --nuraly-icon-size-md: 16px;
+  --nuraly-icon-size-lg: 20px;
+  --nuraly-icon-size-xl: 24px;
+
+  --nuraly-layout-background: #f8f9fa;
+  --nuraly-layout-sider-background: var(--nuraly-color-background-panel);
+  --nuraly-layout-sider-text: var(--nuraly-color-text-panel);
+  --nuraly-layout-sider-border: var(--nuraly-color-border-panel);
+  --nuraly-layout-header-background: var(--nuraly-color-background-header);
+  --nuraly-layout-footer-background: #f8f9fa;
+
+  --nuraly-button-height-sm: 28px;
+  --nuraly-button-height-md: 32px;
+  --nuraly-button-height-lg: 40px;
+  --nuraly-button-padding-sm: 0 12px;
+  --nuraly-button-padding-md: 0 16px;
+  --nuraly-button-padding-lg: 0 20px;
+  --nuraly-button-border-radius: var(--nuraly-border-radius-md);
+
+  --nuraly-input-height-sm: 28px;
+  --nuraly-input-height-md: 32px;
+  --nuraly-input-height-lg: 40px;
+  --nuraly-input-border-radius: var(--nuraly-border-radius-md);
+  --nuraly-input-border-color: var(--nuraly-color-border);
+  --nuraly-input-focus-border-color: var(--nuraly-color-primary);
+  --nuraly-input-background: #ffffff;
+
+  --nuraly-card-background: #ffffff;
+  --nuraly-card-border: var(--nuraly-color-border);
+  --nuraly-card-border-radius: var(--nuraly-border-radius-lg);
+  --nuraly-card-shadow: var(--nuraly-shadow-sm);
+  --nuraly-card-padding: 16px;
+
+  --nuraly-modal-background: #ffffff;
+  --nuraly-modal-border-radius: var(--nuraly-border-radius-lg);
+  --nuraly-modal-shadow: var(--nuraly-shadow-modal);
+  --nuraly-modal-header-background: #f8f9fa;
+  --nuraly-modal-header-border: var(--nuraly-color-border);
+
+  --nuraly-dropdown-background: #ffffff;
+  --nuraly-dropdown-border: var(--nuraly-color-border);
+  --nuraly-dropdown-shadow: var(--nuraly-shadow-dropdown);
+  --nuraly-dropdown-item-hover: #f8f9fa;
+  --nuraly-dropdown-item-active: #e9ecef;
+
+  --nuraly-tabs-border: var(--nuraly-color-border);
+  --nuraly-tabs-active-color: var(--nuraly-color-primary);
+  --nuraly-tabs-background: transparent;
+
+  --nuraly-menu-background: transparent;
+  --nuraly-menu-item-color: var(--nuraly-color-text-panel);
+  --nuraly-menu-item-hover-background: var(--nuraly-color-background-hover);
+  --nuraly-menu-item-active-background: var(--nuraly-color-background-active);
+  --nuraly-menu-item-active-color: #ffffff;
+
+  --nuraly-scrollbar-width: 8px;
+  --nuraly-scrollbar-track: #3a3d40;
+  --nuraly-scrollbar-thumb: #5a5d60;
+  --nuraly-scrollbar-thumb-hover: #6a6d70;
+}
+
+[data-theme="editor-dark"] {
+  
+  --nuraly-color-background: #1e1e1e;
+  --nuraly-color-background-panel: #252729;
+  --nuraly-color-background-panel-alt: #2b2d30;
+
+  --nuraly-color-text: #e8e8e8;
+  --nuraly-color-text-secondary: #abb2bf;
+  --nuraly-color-text-tertiary: #6c757d;
+
+  --nuraly-color-border: #3e4144;
+  --nuraly-color-border-subtle: #2b2d30;
+
+  --nuraly-card-background: #252729;
+  --nuraly-modal-background: #2b2d30;
+  --nuraly-input-background: #1e1e1e;
+  --nuraly-dropdown-background: #2b2d30;
+}
+
+.editor-panel {
+  background: var(--nuraly-color-background-panel);
+  color: var(--nuraly-color-text-panel);
+  border-right: 1px solid var(--nuraly-color-border-panel);
+}
+
+.editor-toolbar {
+  background: var(--nuraly-color-background-toolbar);
+  border-bottom: 1px solid var(--nuraly-color-border-panel);
+  height: var(--nuraly-toolbar-height);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--nuraly-spacing-md);
+  gap: var(--nuraly-spacing-sm);
+}
+
+.editor-canvas {
+  background: var(--nuraly-color-background);
+  flex: 1;
+  overflow: auto;
+}
+
+.editor-panel::-webkit-scrollbar,
+.editor-toolbar::-webkit-scrollbar {
+  width: var(--nuraly-scrollbar-width);
+  height: var(--nuraly-scrollbar-width);
+}
+
+.editor-panel::-webkit-scrollbar-track,
+.editor-toolbar::-webkit-scrollbar-track {
+  background: var(--nuraly-scrollbar-track);
+}
+
+.editor-panel::-webkit-scrollbar-thumb,
+.editor-toolbar::-webkit-scrollbar-thumb {
+  background: var(--nuraly-scrollbar-thumb);
+  border-radius: var(--nuraly-border-radius-sm);
+}
+
+.editor-panel::-webkit-scrollbar-thumb:hover,
+.editor-toolbar::-webkit-scrollbar-thumb:hover {
+  background: var(--nuraly-scrollbar-thumb-hover);
+}
+
+/* ==============================================
+ * index.css
+ * ============================================== */
+
+/* ==============================================
+ * button/index.css
+ * ============================================== */
+
+/* ==============================================
+ * button/common.css
+ * ============================================== */
+
+[data-theme^="editor"] {
+  
+  --nuraly-button-height-small: 28px;
+  --nuraly-button-height-medium: 32px;
+  --nuraly-button-height-large: 40px;
+
+  --nuraly-button-padding-small: 0 12px;
+  --nuraly-button-padding-medium: 0 16px;
+  --nuraly-button-padding-large: 0 20px;
+
+  --nuraly-button-font-size-small: 0.8125rem;
+  --nuraly-button-font-size-medium: 0.875rem;
+  --nuraly-button-font-size-large: 0.9375rem;
+
+  --nuraly-button-border-radius: 4px;
+
+  --nuraly-button-transition: all 0.15s ease-in-out;
+
+  --nuraly-button-shadow: none;
+  --nuraly-button-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --nuraly-button-shadow-active: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+
+  --nuraly-button-icon-gap: 6px;
+  --nuraly-button-icon-only-padding: 0;
+}
+
+/* ==============================================
+ * button/light.css
+ * ============================================== */
+
+:root,
+[data-theme="editor-light"] {
+  
+  --nuraly-button-primary-background: #4a90e2;
+  --nuraly-button-primary-color: #ffffff;
+  --nuraly-button-primary-border: #4a90e2;
+  --nuraly-button-primary-hover-background: #5fa3f5;
+  --nuraly-button-primary-hover-color: #ffffff;
+  --nuraly-button-primary-hover-border: #5fa3f5;
+  --nuraly-button-primary-active-background: #3680d8;
+  --nuraly-button-primary-active-color: #ffffff;
+  --nuraly-button-primary-active-border: #3680d8;
+
+  --nuraly-button-secondary-background: #6c757d;
+  --nuraly-button-secondary-color: #ffffff;
+  --nuraly-button-secondary-border: #6c757d;
+  --nuraly-button-secondary-hover-background: #7c858e;
+  --nuraly-button-secondary-hover-color: #ffffff;
+  --nuraly-button-secondary-hover-border: #7c858e;
+  --nuraly-button-secondary-active-background: #5a6268;
+  --nuraly-button-secondary-active-color: #ffffff;
+  --nuraly-button-secondary-active-border: #5a6268;
+
+  --nuraly-button-default-background: #ffffff;
+  --nuraly-button-default-color: #333333;
+  --nuraly-button-default-border: #dee2e6;
+  --nuraly-button-default-hover-background: #f8f9fa;
+  --nuraly-button-default-hover-color: #333333;
+  --nuraly-button-default-hover-border: #c8cdd1;
+  --nuraly-button-default-active-background: #e9ecef;
+  --nuraly-button-default-active-color: #333333;
+  --nuraly-button-default-active-border: #adb5bd;
+
+  --nuraly-button-success-background: #28a745;
+  --nuraly-button-success-color: #ffffff;
+  --nuraly-button-success-border: #28a745;
+  --nuraly-button-success-hover-background: #34ce57;
+  --nuraly-button-success-hover-color: #ffffff;
+  --nuraly-button-success-hover-border: #34ce57;
+  --nuraly-button-success-active-background: #218838;
+  --nuraly-button-success-active-color: #ffffff;
+  --nuraly-button-success-active-border: #218838;
+
+  --nuraly-button-danger-background: #dc3545;
+  --nuraly-button-danger-color: #ffffff;
+  --nuraly-button-danger-border: #dc3545;
+  --nuraly-button-danger-hover-background: #e4606d;
+  --nuraly-button-danger-hover-color: #ffffff;
+  --nuraly-button-danger-hover-border: #e4606d;
+  --nuraly-button-danger-active-background: #bd2130;
+  --nuraly-button-danger-active-color: #ffffff;
+  --nuraly-button-danger-active-border: #bd2130;
+
+  --nuraly-button-warning-background: #ffc107;
+  --nuraly-button-warning-color: #212529;
+  --nuraly-button-warning-border: #ffc107;
+  --nuraly-button-warning-hover-background: #ffcd39;
+  --nuraly-button-warning-hover-color: #212529;
+  --nuraly-button-warning-hover-border: #ffcd39;
+  --nuraly-button-warning-active-background: #e0a800;
+  --nuraly-button-warning-active-color: #212529;
+  --nuraly-button-warning-active-border: #e0a800;
+
+  --nuraly-button-text-background: transparent;
+  --nuraly-button-text-color: #4a90e2;
+  --nuraly-button-text-border: transparent;
+  --nuraly-button-text-hover-background: rgba(74, 144, 226, 0.1);
+  --nuraly-button-text-hover-color: #5fa3f5;
+  --nuraly-button-text-hover-border: transparent;
+  --nuraly-button-text-active-background: rgba(74, 144, 226, 0.15);
+  --nuraly-button-text-active-color: #3680d8;
+  --nuraly-button-text-active-border: transparent;
+
+  --nuraly-button-disabled-background: #e9ecef;
+  --nuraly-button-disabled-color: #adb5bd;
+  --nuraly-button-disabled-border: #dee2e6;
+  --nuraly-button-disabled-opacity: 0.65;
+}
+
+/* ==============================================
+ * button/dark.css
+ * ============================================== */
+
+[data-theme="editor-dark"] {
+  
+  --nuraly-button-primary-background: #4a90e2;
+  --nuraly-button-primary-color: #ffffff;
+  --nuraly-button-primary-border: #4a90e2;
+  --nuraly-button-primary-hover-background: #5fa3f5;
+  --nuraly-button-primary-hover-color: #ffffff;
+  --nuraly-button-primary-hover-border: #5fa3f5;
+  --nuraly-button-primary-active-background: #3680d8;
+  --nuraly-button-primary-active-color: #ffffff;
+  --nuraly-button-primary-active-border: #3680d8;
+
+  --nuraly-button-secondary-background: #495057;
+  --nuraly-button-secondary-color: #e8e8e8;
+  --nuraly-button-secondary-border: #495057;
+  --nuraly-button-secondary-hover-background: #5a6268;
+  --nuraly-button-secondary-hover-color: #ffffff;
+  --nuraly-button-secondary-hover-border: #5a6268;
+  --nuraly-button-secondary-active-background: #3e4347;
+  --nuraly-button-secondary-active-color: #ffffff;
+  --nuraly-button-secondary-active-border: #3e4347;
+
+  --nuraly-button-default-background: #3a3d40;
+  --nuraly-button-default-color: #e8e8e8;
+  --nuraly-button-default-border: #3e4144;
+  --nuraly-button-default-hover-background: #4a4d50;
+  --nuraly-button-default-hover-color: #ffffff;
+  --nuraly-button-default-hover-border: #4e5154;
+  --nuraly-button-default-active-background: #2b2d30;
+  --nuraly-button-default-active-color: #ffffff;
+  --nuraly-button-default-active-border: #2e3134;
+
+  --nuraly-button-disabled-background: #2b2d30;
+  --nuraly-button-disabled-color: #6c757d;
+  --nuraly-button-disabled-border: #3e4144;
+  --nuraly-button-disabled-opacity: 0.65;
+
+  --nuraly-button-text-background: transparent;
+  --nuraly-button-text-color: #4a90e2;
+  --nuraly-button-text-border: transparent;
+  --nuraly-button-text-hover-background: rgba(74, 144, 226, 0.15);
+  --nuraly-button-text-hover-color: #5fa3f5;
+  --nuraly-button-text-hover-border: transparent;
+  --nuraly-button-text-active-background: rgba(74, 144, 226, 0.2);
+  --nuraly-button-text-active-color: #3680d8;
+  --nuraly-button-text-active-border: transparent;
+}
+
+/* ==============================================
+ * input/index.css
+ * ============================================== */
+
+/* ==============================================
+ * input/common.css
+ * ============================================== */
+
+[data-theme^="editor"] {
+  
+  --nuraly-input-height-small: 28px;
+  --nuraly-input-height-medium: 39px; 
+  --nuraly-input-height-large: 44px;
+
+  --nuraly-spacing-input-small-vertical: 3px;
+  --nuraly-spacing-input-small-horizontal: 8px;
+  --nuraly-spacing-input-medium-vertical: 6px; 
+  --nuraly-spacing-input-medium-horizontal: 8px;
+  --nuraly-spacing-input-large-vertical: 8px;
+  --nuraly-spacing-input-large-horizontal: 12px;
+
+  --nuraly-font-size-input: 16px;
+  --nuraly-font-size-input-small: 0.8125rem; 
+  --nuraly-font-size-input-medium: 0.875rem; 
+  --nuraly-font-size-input-large: 0.9375rem; 
+  --nuraly-font-size-input-placeholder: 0.875rem; 
+
+  --nuraly-input-border-width: 1px;
+  --nuraly-input-border-radius: 6px;
+  --nuraly-input-border-style: solid;
+  --nuraly-input-border: 1px solid var(--nuraly-color-input-border, #dee2e6);
+
+  --nuraly-input-underlined-border-radius: 6px;
+  --nuraly-input-outlined-border-radius: 6px;
+  --nuraly-outlined-border-radius: 6px;
+  --nuraly-border-radius-input: 6px;
+
+  --nuraly-input-transition: all 0.15s ease-in-out;
+
+  --nuraly-input-shadow: none;
+  --nuraly-input-focus-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
+
+  --nuraly-input-prefix-color: #6c757d;
+  --nuraly-input-suffix-color: #6c757d;
+
+  --nuraly-font-family-input: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+/* ==============================================
+ * input/light.css
+ * ============================================== */
+
+:root,
+[data-theme="editor-light"] {
+  
+  --nuraly-color-input-background: #ffffff;
+  --nuraly-color-input-background-hover: #ffffff;
+  --nuraly-color-input-background-focus: #ffffff;
+  --nuraly-color-input-disabled-background: #e9ecef;
+
+  --nuraly-color-input-text: #212529;
+  --nuraly-color-input-disabled-text: #adb5bd;
+  --nuraly-color-input-placeholder: #6c757d;
+  --nuraly-color-input-disabled-placeholder: #c6c6c6;
+
+  --nuraly-color-input-border: #dee2e6;
+  --nuraly-color-input-border-hover: #c8cdd1;
+  --nuraly-color-input-border-focus: #0d6efd; 
+  --nuraly-color-input-border-disabled: #e9ecef;
+
+  --nuraly-color-input-error-border: #dc3545;
+  --nuraly-color-input-error: #dc3545;
+  --nuraly-color-input-error-background: #fff5f5;
+  
+  --nuraly-color-input-success-border: #28a745;
+  --nuraly-color-input-success: #28a745;
+  --nuraly-color-input-success-background: #f0fff4;
+  
+  --nuraly-color-input-warning-border: #ffc107;
+  --nuraly-color-input-warning: #856404;
+  --nuraly-color-input-warning-background: #fffbf0;
+
+  --nuraly-color-input-label: #333333;
+  --nuraly-font-size-input-label: 0.875rem;
+  --nuraly-font-weight-input-label: 500;
+
+  --nuraly-color-input-help: #6c757d;
+  --nuraly-font-size-input-help: 0.8125rem;
+
+  --nuraly-input-addon-background-color: #f8f9fa;
+  --nuraly-input-addon-color: #6c757d;
+  --nuraly-input-addon-padding: 0 12px;
+}
+
+/* ==============================================
+ * input/dark.css
+ * ============================================== */
+
+[data-theme="editor-dark"] {
+  
+  --nuraly-color-input-background: #1e1e1e;
+  --nuraly-color-input-background-hover: #252729;
+  --nuraly-color-input-background-focus: #252729;
+  --nuraly-color-input-disabled-background: #2b2d30;
+
+  --nuraly-color-input-text: #e8e8e8;
+  --nuraly-color-input-disabled-text: #6c757d;
+  --nuraly-color-input-placeholder: #abb2bf;
+  --nuraly-color-input-disabled-placeholder: #6c757d;
+
+  --nuraly-color-input-border: #3e4144;
+  --nuraly-color-input-border-hover: #4e5154;
+  --nuraly-color-input-border-focus: #4a90e2;
+  --nuraly-color-input-border-disabled: #2b2d30;
+
+  --nuraly-color-input-error-border: #dc3545;
+  --nuraly-color-input-error: #ff6b6b;
+  --nuraly-color-input-error-background: #2b1e1e;
+  
+  --nuraly-color-input-success-border: #28a745;
+  --nuraly-color-input-success: #51cf66;
+  --nuraly-color-input-success-background: #1e2b1e;
+  
+  --nuraly-color-input-warning-border: #ffc107;
+  --nuraly-color-input-warning: #ffd43b;
+  --nuraly-color-input-warning-background: #2b2a1e;
+
+  --nuraly-color-input-label: #e8e8e8;
+  --nuraly-font-size-input-label: 0.875rem;
+  --nuraly-font-weight-input-label: 500;
+
+  --nuraly-color-input-help: #abb2bf;
+  --nuraly-font-size-input-help: 0.8125rem;
+
+  --nuraly-input-addon-background-color: #2b2d30;
+  --nuraly-input-addon-color: #abb2bf;
+  --nuraly-input-addon-padding: 0 12px;
+}
+
+/* ==============================================
+ * select/index.css
+ * ============================================== */
+
+/* ==============================================
+ * select/common.css
+ * ============================================== */
+
+[data-theme^="editor"] {
+  
+  --nuraly-select-height-small: var(--nuraly-input-height-small);
+  --nuraly-select-height-medium: var(--nuraly-input-height-medium);
+  --nuraly-select-height-large: var(--nuraly-input-height-large);
+
+  --nuraly-select-padding-small: var(--nuraly-input-padding-small);
+  --nuraly-select-padding-medium: var(--nuraly-input-padding-medium);
+  --nuraly-select-padding-large: var(--nuraly-input-padding-large);
+
+  --nuraly-select-border-radius: var(--nuraly-input-border-radius); 
+  --nuraly-select-transition: var(--nuraly-input-transition);
+
+  --nuraly-select-dropdown-max-height: 256px;
+  --nuraly-select-dropdown-border-radius: 6px; 
+  --nuraly-select-dropdown-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
+
+  --nuraly-select-option-padding: 6px 12px;
+  --nuraly-select-option-min-height: 32px;
+}
+
+/* ==============================================
+ * select/light.css
+ * ============================================== */
+
+:root,
+[data-theme="editor-light"] {
+  --nuraly-select-background: var(--nuraly-input-background);
+  --nuraly-select-color: var(--nuraly-input-color);
+  --nuraly-select-border-color: var(--nuraly-input-border-color);
+
+  --nuraly-select-dropdown-background: #ffffff;
+  --nuraly-select-dropdown-border-color: #dee2e6;
+
+  --nuraly-select-option-color: #333333;
+  --nuraly-select-option-hover-background: #f8f9fa;
+  --nuraly-select-option-hover-color: #333333;
+  --nuraly-select-option-selected-background: #e8f2fd;
+  --nuraly-select-option-selected-color: #4a90e2;
+  --nuraly-select-option-disabled-color: #adb5bd;
+}
+
+/* ==============================================
+ * select/dark.css
+ * ============================================== */
+
+[data-theme="editor-dark"] {
+  --nuraly-select-background: var(--nuraly-input-background);
+  --nuraly-select-color: var(--nuraly-input-color);
+  --nuraly-select-border-color: var(--nuraly-input-border-color);
+
+  --nuraly-select-dropdown-background: #2b2d30;
+  --nuraly-select-dropdown-border-color: #3e4144;
+
+  --nuraly-select-option-color: #e8e8e8;
+  --nuraly-select-option-hover-background: #3a3d40;
+  --nuraly-select-option-hover-color: #ffffff;
+  --nuraly-select-option-selected-background: rgba(74, 144, 226, 0.2);
+  --nuraly-select-option-selected-color: #5fa3f5;
+  --nuraly-select-option-disabled-color: #6c757d;
+}
+
+/* ==============================================
+ * modal/index.css
+ * ============================================== */
+
+/* ==============================================
+ * modal/common.css
+ * ============================================== */
+
+[data-theme^="editor"] {
+  
+  --nuraly-modal-width-small: 400px;
+  --nuraly-modal-width-medium: 600px;
+  --nuraly-modal-width-large: 800px;
+  --nuraly-modal-max-width: 90vw;
+  --nuraly-modal-max-height: 90vh;
+
+  --nuraly-modal-padding: 24px;
+  --nuraly-modal-header-padding: 16px 24px;
+  --nuraly-modal-footer-padding: 16px 24px;
+  --nuraly-modal-body-padding: 24px;
+
+  --nuraly-modal-border-radius: 6px;
+  --nuraly-modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+
+  --nuraly-modal-backdrop-opacity: 0.6;
+
+  --nuraly-modal-z-index: 1050;
+  --nuraly-modal-backdrop-z-index: 1040;
+}
+
+/* ==============================================
+ * modal/light.css
+ * ============================================== */
+
+:root,
+[data-theme="editor-light"] {
+  --nuraly-modal-background: #ffffff;
+  --nuraly-modal-color: #333333;
+
+  --nuraly-modal-header-background: #f8f9fa;
+  --nuraly-modal-header-color: #333333;
+  --nuraly-modal-header-border-color: #dee2e6;
+
+  --nuraly-modal-footer-background: #f8f9fa;
+  --nuraly-modal-footer-color: #333333;
+  --nuraly-modal-footer-border-color: #dee2e6;
+
+  --nuraly-modal-body-background: #ffffff;
+  --nuraly-modal-body-color: #333333;
+
+  --nuraly-modal-backdrop-background: rgba(0, 0, 0, 0.6);
+
+  --nuraly-modal-close-color: #6c757d;
+  --nuraly-modal-close-hover-color: #333333;
+}
+
+/* ==============================================
+ * modal/dark.css
+ * ============================================== */
+
+[data-theme="editor-dark"] {
+  --nuraly-modal-background: #2b2d30;
+  --nuraly-modal-color: #e8e8e8;
+
+  --nuraly-modal-header-background: #252729;
+  --nuraly-modal-header-color: #e8e8e8;
+  --nuraly-modal-header-border-color: #3e4144;
+
+  --nuraly-modal-footer-background: #252729;
+  --nuraly-modal-footer-color: #e8e8e8;
+  --nuraly-modal-footer-border-color: #3e4144;
+
+  --nuraly-modal-body-background: #2b2d30;
+  --nuraly-modal-body-color: #e8e8e8;
+
+  --nuraly-modal-backdrop-background: rgba(0, 0, 0, 0.75);
+
+  --nuraly-modal-close-color: #abb2bf;
+  --nuraly-modal-close-hover-color: #ffffff;
+}
+
+/* ==============================================
+ * card/index.css
+ * ============================================== */
+
+/* ==============================================
+ * card/common.css
+ * ============================================== */
+
+[data-theme^="editor"] {
+  
+  --nuraly-card-padding: 16px;
+  --nuraly-card-header-padding: 12px 16px;
+  --nuraly-card-body-padding: 16px;
+  --nuraly-card-footer-padding: 12px 16px;
+
+  --nuraly-card-border-radius: 6px;
+  --nuraly-card-border-width: 1px;
+  --nuraly-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --nuraly-card-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  --nuraly-card-header-font-size: 0.9375rem;
+  --nuraly-card-header-font-weight: 600;
+
+  --nuraly-card-title-font-size: 1rem;
+  --nuraly-card-title-font-weight: 600;
+}
+
+/* ==============================================
+ * card/light.css
+ * ============================================== */
+
+:root,
+[data-theme="editor-light"] {
+  --nuraly-card-background: #ffffff;
+  --nuraly-card-color: #333333;
+  --nuraly-card-border-color: #dee2e6;
+
+  --nuraly-card-header-background: #f8f9fa;
+  --nuraly-card-header-color: #333333;
+  --nuraly-card-header-border-color: #dee2e6;
+
+  --nuraly-card-footer-background: #f8f9fa;
+  --nuraly-card-footer-color: #333333;
+  --nuraly-card-footer-border-color: #dee2e6;
+
+  --nuraly-card-hover-border-color: #c8cdd1;
+}
+
+/* ==============================================
+ * card/dark.css
+ * ============================================== */
+
+[data-theme="editor-dark"] {
+  --nuraly-card-background: #252729;
+  --nuraly-card-color: #e8e8e8;
+  --nuraly-card-border-color: #3e4144;
+
+  --nuraly-card-header-background: #2b2d30;
+  --nuraly-card-header-color: #e8e8e8;
+  --nuraly-card-header-border-color: #3e4144;
+
+  --nuraly-card-footer-background: #2b2d30;
+  --nuraly-card-footer-color: #e8e8e8;
+  --nuraly-card-footer-border-color: #3e4144;
+
+  --nuraly-card-hover-border-color: #4e5154;
+}
+
+/* ==============================================
+ * tabs/index.css
+ * ============================================== */
+
+/* ==============================================
+ * tabs/common.css
+ * ============================================== */
+
+[data-theme^="editor"] {
+  
+  --nuraly-tabs-padding: 8px 16px;
+  --nuraly-tabs-content-padding: 16px 0;
+
+  --nuraly-tabs-border-width: 2px;
+  --nuraly-tabs-border-radius: 4px 4px 0 0;
+  --nuraly-tabs-indicator-height: 2px;
+
+  --nuraly-tabs-font-size: 0.875rem;
+  --nuraly-tabs-font-weight: 500;
+  --nuraly-tabs-active-font-weight: 600;
+
+  --nuraly-tabs-transition: all 0.2s ease-in-out;
+}
+
+/* ==============================================
+ * tabs/light.css
+ * ============================================== */
+
+[data-theme="editor-light"] {
+  --nuraly-tabs-background: transparent;
+  --nuraly-tabs-border-color: #dee2e6;
+
+  --nuraly-tabs-item-color: #6c757d;
+  --nuraly-tabs-item-background: transparent;
+  --nuraly-tabs-item-hover-color: #333333;
+  --nuraly-tabs-item-hover-background: #f8f9fa;
+
+  --nuraly-tabs-active-color: #4a90e2;
+  --nuraly-tabs-active-background: transparent;
+  --nuraly-tabs-active-border-color: #4a90e2;
+  --nuraly-tabs-active-indicator-color: #4a90e2;
+
+  --nuraly-tabs-disabled-color: #adb5bd;
+  --nuraly-tabs-disabled-background: transparent;
+
+  --nuraly-tabs-content-background: transparent;
+  --nuraly-tabs-content-color: #333333;
+}
+
+/* ==============================================
+ * tabs/dark.css
+ * ============================================== */
+
+[data-theme="editor-dark"] {
+  --nuraly-tabs-background: transparent;
+  --nuraly-tabs-border-color: #3e4144;
+
+  --nuraly-tabs-item-color: #abb2bf;
+  --nuraly-tabs-item-background: transparent;
+  --nuraly-tabs-item-hover-color: #ffffff;
+  --nuraly-tabs-item-hover-background: #3a3d40;
+
+  --nuraly-tabs-active-color: #5fa3f5;
+  --nuraly-tabs-active-background: transparent;
+  --nuraly-tabs-active-border-color: #5fa3f5;
+  --nuraly-tabs-active-indicator-color: #5fa3f5;
+
+  --nuraly-tabs-disabled-color: #6c757d;
+  --nuraly-tabs-disabled-background: transparent;
+
+  --nuraly-tabs-content-background: transparent;
+  --nuraly-tabs-content-color: #e8e8e8;
+}
+
+/* ==============================================
+ * dropdown/index.css
+ * ============================================== */
+
+/* ==============================================
+ * dropdown/common.css
+ * ============================================== */
+
+[data-theme^="editor"] {
+  
+  --nuraly-dropdown-min-width: 120px;
+  --nuraly-dropdown-max-height: 300px;
+  --nuraly-dropdown-border-radius: 4px;
+  --nuraly-dropdown-border-width: 1px;
+  --nuraly-dropdown-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
+  --nuraly-dropdown-padding: 4px 0;
+
+  --nuraly-dropdown-item-padding: 6px 12px;
+  --nuraly-dropdown-item-min-height: 32px;
+  --nuraly-dropdown-item-font-size: 0.875rem;
+  --nuraly-dropdown-item-border-radius: 0;
+
+  --nuraly-dropdown-divider-margin: 4px 0;
+  --nuraly-dropdown-divider-height: 1px;
+
+  --nuraly-dropdown-transition: all 0.15s ease-in-out;
+}
+
+/* ==============================================
+ * dropdown/light.css
+ * ============================================== */
+
+:root,
+[data-theme="editor-light"] {
+  --nuraly-dropdown-background: #ffffff;
+  --nuraly-dropdown-border-color: #dee2e6;
+
+  --nuraly-dropdown-item-color: #333333;
+  --nuraly-dropdown-item-background: transparent;
+  --nuraly-dropdown-item-hover-color: #333333;
+  --nuraly-dropdown-item-hover-background: #f8f9fa;
+  --nuraly-dropdown-item-active-color: #4a90e2;
+  --nuraly-dropdown-item-active-background: #e8f2fd;
+  --nuraly-dropdown-item-disabled-color: #adb5bd;
+  --nuraly-dropdown-item-disabled-background: transparent;
+
+  --nuraly-dropdown-divider-color: #dee2e6;
+
+  --nuraly-dropdown-header-color: #6c757d;
+  --nuraly-dropdown-header-font-size: 0.8125rem;
+  --nuraly-dropdown-header-font-weight: 600;
+}
+
+/* ==============================================
+ * dropdown/dark.css
+ * ============================================== */
+
+[data-theme="editor-dark"] {
+  --nuraly-dropdown-background: #2b2d30;
+  --nuraly-dropdown-border-color: #3e4144;
+
+  --nuraly-dropdown-item-color: #e8e8e8;
+  --nuraly-dropdown-item-background: transparent;
+  --nuraly-dropdown-item-hover-color: #ffffff;
+  --nuraly-dropdown-item-hover-background: #3a3d40;
+  --nuraly-dropdown-item-active-color: #5fa3f5;
+  --nuraly-dropdown-item-active-background: rgba(74, 144, 226, 0.2);
+  --nuraly-dropdown-item-disabled-color: #6c757d;
+  --nuraly-dropdown-item-disabled-background: transparent;
+
+  --nuraly-dropdown-divider-color: #3e4144;
+
+  --nuraly-dropdown-header-color: #abb2bf;
+  --nuraly-dropdown-header-font-size: 0.8125rem;
+  --nuraly-dropdown-header-font-weight: 600;
+}
+
+/* ==============================================
+ * menu/index.css
+ * ============================================== */
+
+/* ==============================================
+ * menu/common.css
+ * ============================================== */
+
+[data-theme^="editor"] {
+  
+  --nuraly-menu-font-size: 12px;
+  --nuraly-menu-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --nuraly-menu-font-weight: 400;
+  --nuraly-menu-line-height: 1.5;
+
+  --nuraly-menu-link-padding-vertical: 4px;
+  --nuraly-menu-link-padding-horizontal: 8px;
+
+  --nuraly-menu-link-padding-vertical-small: 2px;
+  --nuraly-menu-link-padding-horizontal-small: 6px;
+
+  --nuraly-menu-link-padding-vertical-medium: 4px;
+  --nuraly-menu-link-padding-horizontal-medium: 8px;
+
+  --nuraly-menu-link-padding-vertical-large: 6px;
+  --nuraly-menu-link-padding-horizontal-large: 12px;
+
+  --nuraly-menu-icon-padding-right: 4px;
+  --nuraly-menu-icon-padding-left: 0px;
+
+  --nuraly-menu-icon-size: 14px;
+
+  --nuraly-menu-border-radius: 0px;
+
+  --nuraly-menu-transition-duration: 0.15s;
+  --nuraly-menu-transition-timing: ease;
+
+  --nuraly-menu-z-index: 1;
+}
+
+/* ==============================================
+ * menu/light.css
+ * ============================================== */
+
+:root,
+[data-theme="editor-light"] {
+  
+  --nuraly-menu-link-color: #0a58ca !important;
+  --nuraly-menu-link-background-color: transparent !important;
+  --nuraly-menu-disabled-link-color: #6c757d !important;
+
+  --nuraly-menu-hover-link-background-color: #e7f1ff !important;
+  --nuraly-menu-hover-link-color: #0842a0 !important;
+
+  --nuraly-menu-selected-link-background-color: #e7f1ff !important;
+  --nuraly-menu-selected-color: #0842a0 !important;
+  --nuraly-menu-selected-link-border: 3px solid #0d6efd !important;
+
+  --nuraly-menu-focus-border: 2px solid #0d6efd !important;
+  --nuraly-menu-focus-color: #0842a0 !important;
+
+  --nuraly-menu-active-color: #0842a0 !important;
+  --nuraly-menu-active-background-color: #cfe2ff !important;
+
+  --nuraly-menu-submenu-background-color: #ffffff !important;
+  --nuraly-menu-submenu-border-color: #dee2e6 !important;
+  --nuraly-menu-submenu-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
+
+  --nuraly-menu-divider-color: #dee2e6 !important;
+
+  --nuraly-menu-link-icon-color: #6c757d !important;
+  --nuraly-menu-hover-link-icon-color: #495057 !important;
+  --nuraly-menu-selected-link-icon-color: #495057 !important;
+
+  --nuraly-menu-chevron-color: #6c757d !important;
+  --nuraly-menu-hover-chevron-color: #495057 !important;
+}
+
+/* ==============================================
+ * menu/dark.css
+ * ============================================== */
+
+[data-theme="editor-dark"] {
+  
+  --nuraly-menu-link-color: #6ea8fe !important;
+  --nuraly-menu-link-background-color: transparent !important;
+  --nuraly-menu-disabled-link-color: #6c757d !important;
+
+  --nuraly-menu-hover-link-background-color: #1a3a52 !important;
+  --nuraly-menu-hover-link-color: #9ec5fe !important;
+
+  --nuraly-menu-selected-link-background-color: #1a3a52 !important;
+  --nuraly-menu-selected-color: #9ec5fe !important;
+  --nuraly-menu-selected-link-border: 3px solid #0d6efd !important;
+
+  --nuraly-menu-focus-border: 2px solid #0d6efd !important;
+  --nuraly-menu-focus-color: #9ec5fe !important;
+
+  --nuraly-menu-active-color: #9ec5fe !important;
+  --nuraly-menu-active-background-color: #0d3a5c !important;
+
+  --nuraly-menu-submenu-background-color: #212529 !important;
+  --nuraly-menu-submenu-border-color: #495057 !important;
+  --nuraly-menu-submenu-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
+
+  --nuraly-menu-divider-color: #495057 !important;
+
+  --nuraly-menu-link-icon-color: #6ea8fe !important;
+  --nuraly-menu-hover-link-icon-color: #9ec5fe !important;
+  --nuraly-menu-selected-link-icon-color: #9ec5fe !important;
+
+  --nuraly-menu-chevron-color: #adb5bd !important;
+  --nuraly-menu-hover-chevron-color: #dee2e6 !important;
+}
+