commons-shared-web-ui 0.0.39 → 0.0.40

package/index.d.ts

@@ -9,7 +9,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import * as i3$2 from '@angular/router';
 import { Router, ActivatedRoute } from '@angular/router';
 import { BehaviorSubject, Subject, Observable } from 'rxjs';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { DomSanitizer, SafeResourceUrl, SafeHtml } from '@angular/platform-browser';
 import * as i1 from '@angular/material/card';
 import * as i3 from '@angular/material/checkbox';
 import * as i4 from '@angular/material/divider';
@@ -3182,6 +3182,18 @@ interface TableOption {
     label: string;
     value: any;
 }
+interface TableColumnSubField {
+    key: string;
+    label?: string;
+    dataType: 'text' | 'number' | 'email' | 'select' | 'date';
+    placeholder?: string;
+    editable?: boolean;
+    options?: TableOption[];
+    editConfig?: {
+        disabled?: boolean;
+        defaultValue?: any;
+    };
+}
 interface TableColumn {
     key: string;
     label: string;
@@ -3201,6 +3213,11 @@ interface TableColumn {
     dateFormat?: string;
     clickAction?: 'route' | 'callback';
     clickRoute?: string;
+    subFields?: TableColumnSubField[];
+    editConfig?: {
+        disabled?: boolean;
+        defaultValue?: any;
+    };
 }
 interface TableFilter {
     key: string;
@@ -3308,6 +3325,7 @@ interface TableConfig {
     stickyColumnCount?: number;
     token?: string;
     tokenHeader?: string;
+    editingRowClass?: string;
 }
 interface SearchConfig {
     enabled: boolean;
@@ -3321,6 +3339,13 @@ interface TableLabels {
     noDataMessage?: string;
     itemsPerPageLabel?: string;
     defaultConfirmationMessage?: string;
+    saveLabel?: string;
+    cancelLabel?: string;
+    addLabel?: string;
+    /** Variant for the Add button (new row). Defaults to 'danger'. */
+    addButtonVariant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'warning' | 'success' | 'danger-outline';
+    /** Variant for the Save button (edit row). Defaults to 'primary'. */
+    saveButtonVariant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'warning' | 'success' | 'danger-outline';
 }
 /**
  * Emitted by the SmartTableComponent when operating in external-data mode
@@ -3338,6 +3363,10 @@ interface TableDataChangeEvent {
         [key: string]: any;
     };
 }
+interface TableRowSaveEvent {
+    row: any;
+    isNew: boolean;
+}
 
 /**
  * Maps a SmartForm field name to its corresponding API query-param key.
@@ -3579,10 +3608,13 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
     pageChange: EventEmitter<TableDataChangeEvent>;
     /** Emitted in external-data mode when the user types in the search box. */
     searchChange: EventEmitter<TableDataChangeEvent>;
+    /** Emitted when an inline-edited or inline-added row is saved. */
+    rowSave: EventEmitter<TableRowSaveEvent>;
     data: any[];
     totalItems: number;
     currentPage: number;
     loading: boolean;
+    originalRowsCache: Map<any, any>;
     activeSort: {
         key: string;
         direction: 'ASC' | 'DESC';
@@ -3682,8 +3714,28 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
     private getHeaders;
     toggleDropdown(id: string, event: Event, items: any[], row: any): void;
     closeDropdown(): void;
+    onCancelRow(row: any, index: number): void;
+    onSaveRow(row: any): void;
+    /** Convert any parseable date value to a native Date object for mat-datepicker binding. */
+    private toDateObject;
+    /** Pre-process all date columns on a row before entering edit mode. */
+    private prepareDateFieldsForEdit;
+    /** Normalize Date objects back to ISO strings before sending payloads. */
+    private normalizeDateFieldsForSave;
     static ɵfac: i0.ɵɵFactoryDeclaration<SmartTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SmartTableComponent, "lib-smart-table", never, { "config": { "alias": "config"; "required": false; }; "tableData": { "alias": "tableData"; "required": false; }; "totalItemsCount": { "alias": "totalItemsCount"; "required": false; }; "selectedRows": { "alias": "selectedRows"; "required": false; }; }, { "action": "action"; "topAction": "topAction"; "filterChange": "filterChange"; "rowSelect": "rowSelect"; "columnClick": "columnClick"; "sortChange": "sortChange"; "pageChange": "pageChange"; "searchChange": "searchChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SmartTableComponent, "lib-smart-table", never, { "config": { "alias": "config"; "required": false; }; "tableData": { "alias": "tableData"; "required": false; }; "totalItemsCount": { "alias": "totalItemsCount"; "required": false; }; "selectedRows": { "alias": "selectedRows"; "required": false; }; }, { "action": "action"; "topAction": "topAction"; "filterChange": "filterChange"; "rowSelect": "rowSelect"; "columnClick": "columnClick"; "sortChange": "sortChange"; "pageChange": "pageChange"; "searchChange": "searchChange"; "rowSave": "rowSave"; }, never, never, false, never>;
+}
+
+/**
+ * Sanitizes and bypasses Angular's DomSanitizer security for HTML content.
+ * Prevents execution of unsafe scripts/attributes while allowing safe rendering of formatting tags in [innerHTML].
+ */
+declare class SafeHtmlPipe implements PipeTransform {
+    private sanitizer;
+    constructor(sanitizer: DomSanitizer);
+    transform(value: string): SafeHtml | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SafeHtmlPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SafeHtmlPipe, "safeHtml", false>;
 }
 
 interface PaginationLabels {
@@ -3725,7 +3777,7 @@ declare class PaginationModule {
 
 declare class SmartTableModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SmartTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SmartTableModule, [typeof SmartTableComponent], [typeof i2$1.CommonModule, typeof i3$1.FormsModule, typeof PaginationModule, typeof ButtonModule, typeof MaterialModule, typeof ConfirmationModalModule], [typeof SmartTableComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SmartTableModule, [typeof SmartTableComponent, typeof SafeHtmlPipe], [typeof i2$1.CommonModule, typeof i3$1.FormsModule, typeof PaginationModule, typeof ButtonModule, typeof MaterialModule, typeof ConfirmationModalModule], [typeof SmartTableComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SmartTableModule>;
 }
 
@@ -3914,4 +3966,4 @@ declare class SnackbarModule {
 }
 
 export { AlertComponent, AlertModule, ButtonComponent, ButtonDropdownComponent, ButtonDropdownModule, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples_d as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_SIDE_NAV_TOOLTIP_POSITION, DatepickerComponent, DropdownComponent, ExpressionService, FieldConfiguratorComponent, FieldSelectionComponent, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FilterTableSelectorComponent, FilterTableSelectorModule, FormBuilderModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SideNavComponent, SideNavModule, SmartFormComponent, SmartFormController, smartForm_examples_d as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, appendBaseUrlRecursively, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
-export type { AlertLabels, AlertVariant, AttachmentConfig, ButtonLabels, ButtonVariant, CheckboxConfig, CheckboxLabels, CheckboxOption, ConfirmationModalConfig, DateConfig, DatePickerConfig, DatepickerLabels, DropdownAction, DropdownConfig, DropdownLabels, DropdownOption, EmailConfig, FieldConfig, FieldType, FilterChangeEvent, FilterConfig, FilterItem, FilterItemType, FilterOutput, FilterPanelConfig, FilterParamMap, FilterSearchConfig, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOutput, FilterTableConfig, FilterTableSelectorConfig, FormConfig, FormField, FormOption, FormSchema, FormSection, GeneratedConfig, IconInput, InputConfig, InputLabels, InputType, JsonFieldConfig, JsonFormConfig, KeyType, LengthConstraint, LocationConfig, NavItem, NavStyleConfig, NestedStringConfig, NumberConfig, OptionConfig, OptionDTO, OptionItem, PaginationConfig, PaginationLabels, PhoneConfig, QueryParamsConfig, RadioConfig, RadioLabels, RadioOption, RangeConfig, RatingConfig, SearchConfig, SearchLabels, SectionConfig, SelectionConfig, SideNavItem, SideNavSection, SideNavStyleConfig, SnackbarConfig, SnackbarVariant, StepperConfig, SubmitConfig, SummaryCardConfig, SummaryCardLabels, SummaryCardMeta, TableAction, TableActionItem, TableColumn, TableConfig, TableDataChangeEvent, TableFilter, TableFilterChangeEvent, TableFilterColumn, TableFilterConfig, TableFilterItem, TableFilterLabels, TableFilterOutput, TableLabels, TableOption, TableTheme, TextConfig, ToggleConfig, ToggleLabels, UIConfig, UISubType, UIType, UploadedFile, ValidationResult, ValidationRules };
+export type { AlertLabels, AlertVariant, AttachmentConfig, ButtonLabels, ButtonVariant, CheckboxConfig, CheckboxLabels, CheckboxOption, ConfirmationModalConfig, DateConfig, DatePickerConfig, DatepickerLabels, DropdownAction, DropdownConfig, DropdownLabels, DropdownOption, EmailConfig, FieldConfig, FieldType, FilterChangeEvent, FilterConfig, FilterItem, FilterItemType, FilterOutput, FilterPanelConfig, FilterParamMap, FilterSearchConfig, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOutput, FilterTableConfig, FilterTableSelectorConfig, FormConfig, FormField, FormOption, FormSchema, FormSection, GeneratedConfig, IconInput, InputConfig, InputLabels, InputType, JsonFieldConfig, JsonFormConfig, KeyType, LengthConstraint, LocationConfig, NavItem, NavStyleConfig, NestedStringConfig, NumberConfig, OptionConfig, OptionDTO, OptionItem, PaginationConfig, PaginationLabels, PhoneConfig, QueryParamsConfig, RadioConfig, RadioLabels, RadioOption, RangeConfig, RatingConfig, SearchConfig, SearchLabels, SectionConfig, SelectionConfig, SideNavItem, SideNavSection, SideNavStyleConfig, SnackbarConfig, SnackbarVariant, StepperConfig, SubmitConfig, SummaryCardConfig, SummaryCardLabels, SummaryCardMeta, TableAction, TableActionItem, TableColumn, TableColumnSubField, TableConfig, TableDataChangeEvent, TableFilter, TableFilterChangeEvent, TableFilterColumn, TableFilterConfig, TableFilterItem, TableFilterLabels, TableFilterOutput, TableLabels, TableOption, TableRowSaveEvent, TableTheme, TextConfig, ToggleConfig, ToggleLabels, UIConfig, UISubType, UIType, UploadedFile, ValidationResult, ValidationRules };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commons-shared-web-ui",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "peerDependencies": {
     "@angular/animations": "20.3.15",
     "@angular/cdk": "20.2.14",

package/src/lib/modules/alert/alert.theme.scss

@@ -1,85 +1,85 @@
-@use 'sass:map';
-
-$default-alert-config: (
-    font-family: ('Roboto', sans-serif),
-
-    // Structure (Default values in rem, assuming 16px root)
-    padding: 1rem 2rem,
-    // 16px 32px
-    radius: 0.75rem,
-    // 12px
-    gap: 1rem,
-    // 16px
-
-    // Icon
-    icon-size: 1.25rem,
-    // 20px
-    icon-margin-top: 0.125rem,
-    // 2px
-
-    // Text
-    title-size: 1rem,
-    // 16px
-    title-line-height: 1.5rem,
-    // 24px
-    message-size: 0.875rem,
-    // 14px
-
-    // Info
-    info-bg: #F1F3F4,
-    info-color: #3C4043,
-
-    // Warning
-    warning-bg: #F9C80E1F,
-    warning-color: #3C4043,
-    // Default text color for warning usually dark
-    warning-title-color: #3C4043,
-    // Making title dark for better contrast with light yellow bg
-    warning-shadow: none,
-    // Removing shadow as per clean flat design, or keeping if specified. User said "warning-shadow" variant exists.
-
-    // Success
-    success-bg: #E6F4EA,
-    // Light green similar to Info/Error pattern
-    success-color: #16A34A,
-
-    // Error
-    error-bg: #FCE8E6,
-    // Light red
-    error-color: #D93025
-);
-
-@mixin alert-theme($user-config: ()) {
-    $config: map.merge($default-alert-config, $user-config);
-
-    --cc-alert-font-family: #{map.get($config, font-family)};
-
-    // Structure
-    --cc-alert-padding: #{map.get($config, padding)};
-    --cc-alert-radius: #{map.get($config, radius)};
-    --cc-alert-gap: #{map.get($config, gap)};
-
-    // Icon
-    --cc-alert-icon-size: #{map.get($config, icon-size)};
-    --cc-alert-icon-margin-top: #{map.get($config, icon-margin-top)};
-
-    // Text
-    --cc-alert-title-size: #{map.get($config, title-size)};
-    --cc-alert-title-line-height: #{map.get($config, title-line-height)};
-    --cc-alert-message-size: #{map.get($config, message-size)};
-
-    // Colors
-    --cc-alert-info-bg: #{map.get($config, info-bg)};
-    --cc-alert-info-color: #{map.get($config, info-color)};
-
-    --cc-alert-warning-bg: #{map.get($config, warning-bg)};
-    --cc-alert-warning-color: #{map.get($config, warning-color)};
-    --cc-alert-warning-title-color: #{map.get($config, warning-title-color)};
-    --cc-alert-warning-shadow: #{map.get($config, warning-shadow)};
-    --cc-alert-success-bg: #{map.get($config, success-bg)};
-    --cc-alert-success-color: #{map.get($config, success-color)};
-
-    --cc-alert-error-bg: #{map.get($config, error-bg)};
-    --cc-alert-error-color: #{map.get($config, error-color)};
-    --cc-alert-warning-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25); // 0px 4px 4px
+@use 'sass:map';
+
+$default-alert-config: (
+    font-family: ('Roboto', sans-serif),
+
+    // Structure (Default values in rem, assuming 16px root)
+    padding: 1rem 2rem,
+    // 16px 32px
+    radius: 0.75rem,
+    // 12px
+    gap: 1rem,
+    // 16px
+
+    // Icon
+    icon-size: 1.25rem,
+    // 20px
+    icon-margin-top: 0.125rem,
+    // 2px
+
+    // Text
+    title-size: 1rem,
+    // 16px
+    title-line-height: 1.5rem,
+    // 24px
+    message-size: 0.875rem,
+    // 14px
+
+    // Info
+    info-bg: #F1F3F4,
+    info-color: #3C4043,
+
+    // Warning
+    warning-bg: #F9C80E1F,
+    warning-color: #3C4043,
+    // Default text color for warning usually dark
+    warning-title-color: #3C4043,
+    // Making title dark for better contrast with light yellow bg
+    warning-shadow: none,
+    // Removing shadow as per clean flat design, or keeping if specified. User said "warning-shadow" variant exists.
+
+    // Success
+    success-bg: #E6F4EA,
+    // Light green similar to Info/Error pattern
+    success-color: #16A34A,
+
+    // Error
+    error-bg: #FCE8E6,
+    // Light red
+    error-color: #D93025
+);
+
+@mixin alert-theme($user-config: ()) {
+    $config: map.merge($default-alert-config, $user-config);
+
+    --cc-alert-font-family: #{map.get($config, font-family)};
+
+    // Structure
+    --cc-alert-padding: #{map.get($config, padding)};
+    --cc-alert-radius: #{map.get($config, radius)};
+    --cc-alert-gap: #{map.get($config, gap)};
+
+    // Icon
+    --cc-alert-icon-size: #{map.get($config, icon-size)};
+    --cc-alert-icon-margin-top: #{map.get($config, icon-margin-top)};
+
+    // Text
+    --cc-alert-title-size: #{map.get($config, title-size)};
+    --cc-alert-title-line-height: #{map.get($config, title-line-height)};
+    --cc-alert-message-size: #{map.get($config, message-size)};
+
+    // Colors
+    --cc-alert-info-bg: #{map.get($config, info-bg)};
+    --cc-alert-info-color: #{map.get($config, info-color)};
+
+    --cc-alert-warning-bg: #{map.get($config, warning-bg)};
+    --cc-alert-warning-color: #{map.get($config, warning-color)};
+    --cc-alert-warning-title-color: #{map.get($config, warning-title-color)};
+    --cc-alert-warning-shadow: #{map.get($config, warning-shadow)};
+    --cc-alert-success-bg: #{map.get($config, success-bg)};
+    --cc-alert-success-color: #{map.get($config, success-color)};
+
+    --cc-alert-error-bg: #{map.get($config, error-bg)};
+    --cc-alert-error-color: #{map.get($config, error-color)};
+    --cc-alert-warning-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25); // 0px 4px 4px
 }

package/src/lib/modules/button/button.theme.scss

@@ -1,121 +1,121 @@
-@use 'sass:map';
-
-// Default Button Configuration
-$default-button-config: (
-    // Common
-    font-family: ('Roboto', sans-serif),
-    font-weight: 500,
-    font-size: 1rem,
-    // 16px
-    padding: 0.5rem 1rem,
-    // 8px 16px
-
-    // Primary (Dark)
-    primary-bg: #262125,
-    primary-color: #FFFFFF,
-    primary-radius: 0.5rem,
-    // 8px
-    primary-border: none,
-
-    // Warning (Yellow)
-    warning-bg: #F9C80E,
-    warning-color: #000000,
-    warning-radius: 0.25rem,
-    // 4px
-    warning-border: none,
-
-    // Outline (Grey Outline)
-    outline-bg: transparent,
-    outline-color: #000000,
-    outline-radius: 0.25rem,
-    // 4px
-    outline-border: 0.0625rem solid #BDC1C6,
-    // 1px solid
-
-    // Secondary (Light Grey)
-    secondary-bg: #E8EAED,
-    secondary-color: #000000,
-    secondary-radius: 0.25rem,
-    // 4px
-    secondary-border: none,
-
-    // Success (Green)
-    success-bg: #16A34A,
-    success-color: #FFFFFF,
-    success-radius: 0.5rem,
-    // 8px
-    success-border: none,
-
-    // Danger (Red)
-    danger-bg: #E63E30,
-    danger-color: #FFFFFF,
-    danger-radius: 0.25rem,
-    // 4px
-    danger-border: none,
-
-    // Danger Outline (Red Outline)
-    danger-outline-bg: transparent,
-    danger-outline-color: #E63E30,
-    danger-outline-radius: 0.5rem,
-    // 8px
-    danger-outline-border: 0.0625rem solid #E63E30,
-    // 1px solid
-
-    // Disabled State
-    disabled-opacity: 0.6,
-    disabled-cursor: not-allowed
-);
-
-@mixin button-theme($user-config: ()) {
-    $config: map.merge($default-button-config, $user-config);
-
-    // Common
-    --cc-btn-font-family: #{map.get($config, font-family)};
-    --cc-btn-font-weight: #{map.get($config, font-weight)};
-    --cc-btn-font-size: #{map.get($config, font-size)};
-    --cc-btn-padding: #{map.get($config, padding)};
-    --cc-btn-disabled-opacity: #{map.get($config, disabled-opacity)};
-    --cc-btn-disabled-cursor: #{map.get($config, disabled-cursor)};
-
-    // Primary
-    --cc-btn-primary-bg: #{map.get($config, primary-bg)};
-    --cc-btn-primary-color: #{map.get($config, primary-color)};
-    --cc-btn-primary-radius: #{map.get($config, primary-radius)};
-    --cc-btn-primary-border: #{map.get($config, primary-border)};
-
-    // Warning
-    --cc-btn-warning-bg: #{map.get($config, warning-bg)};
-    --cc-btn-warning-color: #{map.get($config, warning-color)};
-    --cc-btn-warning-radius: #{map.get($config, warning-radius)};
-    --cc-btn-warning-border: #{map.get($config, warning-border)};
-
-    // Outline
-    --cc-btn-outline-bg: #{map.get($config, outline-bg)};
-    --cc-btn-outline-color: #{map.get($config, outline-color)};
-    --cc-btn-outline-radius: #{map.get($config, outline-radius)};
-    --cc-btn-outline-border: #{map.get($config, outline-border)};
-
-    // Secondary
-    --cc-btn-secondary-bg: #{map.get($config, secondary-bg)};
-    --cc-btn-secondary-color: #{map.get($config, secondary-color)};
-    --cc-btn-secondary-radius: #{map.get($config, secondary-radius)};
-    --cc-btn-secondary-border: #{map.get($config, secondary-border)};
-
-    // Success
-    --cc-btn-success-bg: #{map.get($config, success-bg)};
-    --cc-btn-success-color: #{map.get($config, success-color)};
-    --cc-btn-success-radius: #{map.get($config, success-radius)};
-    --cc-btn-success-border: #{map.get($config, success-border)};
-
-    // Danger
-    --cc-btn-danger-bg: #{map.get($config, danger-bg)};
-    --cc-btn-danger-color: #{map.get($config, danger-color)};
-    --cc-btn-danger-radius: #{map.get($config, danger-radius)};
-    --cc-btn-danger-border: #{map.get($config, danger-border)};
-
-    // Danger Outline
-    --cc-btn-danger-outline-bg: #{map.get($config, danger-outline-bg)};
-    --cc-btn-danger-outline-color: #{map.get($config, danger-outline-color)};
-    --cc-btn-danger-outline-radius: #{map.get($config, danger-outline-radius)};
-    --cc-btn-danger-outline-border: #{map.get($config, danger-outline-border)};
+@use 'sass:map';
+
+// Default Button Configuration
+$default-button-config: (
+    // Common
+    font-family: ('Roboto', sans-serif),
+    font-weight: 500,
+    font-size: 1rem,
+    // 16px
+    padding: 0.5rem 1rem,
+    // 8px 16px
+
+    // Primary (Dark)
+    primary-bg: #262125,
+    primary-color: #FFFFFF,
+    primary-radius: 0.5rem,
+    // 8px
+    primary-border: none,
+
+    // Warning (Yellow)
+    warning-bg: #F9C80E,
+    warning-color: #000000,
+    warning-radius: 0.25rem,
+    // 4px
+    warning-border: none,
+
+    // Outline (Grey Outline)
+    outline-bg: transparent,
+    outline-color: #000000,
+    outline-radius: 0.25rem,
+    // 4px
+    outline-border: 0.0625rem solid #BDC1C6,
+    // 1px solid
+
+    // Secondary (Light Grey)
+    secondary-bg: #E8EAED,
+    secondary-color: #000000,
+    secondary-radius: 0.25rem,
+    // 4px
+    secondary-border: none,
+
+    // Success (Green)
+    success-bg: #16A34A,
+    success-color: #FFFFFF,
+    success-radius: 0.5rem,
+    // 8px
+    success-border: none,
+
+    // Danger (Red)
+    danger-bg: #E63E30,
+    danger-color: #FFFFFF,
+    danger-radius: 0.25rem,
+    // 4px
+    danger-border: none,
+
+    // Danger Outline (Red Outline)
+    danger-outline-bg: transparent,
+    danger-outline-color: #E63E30,
+    danger-outline-radius: 0.5rem,
+    // 8px
+    danger-outline-border: 0.0625rem solid #E63E30,
+    // 1px solid
+
+    // Disabled State
+    disabled-opacity: 0.6,
+    disabled-cursor: not-allowed
+);
+
+@mixin button-theme($user-config: ()) {
+    $config: map.merge($default-button-config, $user-config);
+
+    // Common
+    --cc-btn-font-family: #{map.get($config, font-family)};
+    --cc-btn-font-weight: #{map.get($config, font-weight)};
+    --cc-btn-font-size: #{map.get($config, font-size)};
+    --cc-btn-padding: #{map.get($config, padding)};
+    --cc-btn-disabled-opacity: #{map.get($config, disabled-opacity)};
+    --cc-btn-disabled-cursor: #{map.get($config, disabled-cursor)};
+
+    // Primary
+    --cc-btn-primary-bg: #{map.get($config, primary-bg)};
+    --cc-btn-primary-color: #{map.get($config, primary-color)};
+    --cc-btn-primary-radius: #{map.get($config, primary-radius)};
+    --cc-btn-primary-border: #{map.get($config, primary-border)};
+
+    // Warning
+    --cc-btn-warning-bg: #{map.get($config, warning-bg)};
+    --cc-btn-warning-color: #{map.get($config, warning-color)};
+    --cc-btn-warning-radius: #{map.get($config, warning-radius)};
+    --cc-btn-warning-border: #{map.get($config, warning-border)};
+
+    // Outline
+    --cc-btn-outline-bg: #{map.get($config, outline-bg)};
+    --cc-btn-outline-color: #{map.get($config, outline-color)};
+    --cc-btn-outline-radius: #{map.get($config, outline-radius)};
+    --cc-btn-outline-border: #{map.get($config, outline-border)};
+
+    // Secondary
+    --cc-btn-secondary-bg: #{map.get($config, secondary-bg)};
+    --cc-btn-secondary-color: #{map.get($config, secondary-color)};
+    --cc-btn-secondary-radius: #{map.get($config, secondary-radius)};
+    --cc-btn-secondary-border: #{map.get($config, secondary-border)};
+
+    // Success
+    --cc-btn-success-bg: #{map.get($config, success-bg)};
+    --cc-btn-success-color: #{map.get($config, success-color)};
+    --cc-btn-success-radius: #{map.get($config, success-radius)};
+    --cc-btn-success-border: #{map.get($config, success-border)};
+
+    // Danger
+    --cc-btn-danger-bg: #{map.get($config, danger-bg)};
+    --cc-btn-danger-color: #{map.get($config, danger-color)};
+    --cc-btn-danger-radius: #{map.get($config, danger-radius)};
+    --cc-btn-danger-border: #{map.get($config, danger-border)};
+
+    // Danger Outline
+    --cc-btn-danger-outline-bg: #{map.get($config, danger-outline-bg)};
+    --cc-btn-danger-outline-color: #{map.get($config, danger-outline-color)};
+    --cc-btn-danger-outline-radius: #{map.get($config, danger-outline-radius)};
+    --cc-btn-danger-outline-border: #{map.get($config, danger-outline-border)};
 }