platformcommons-web-lib 1.0.0

package/src/lib/modules/alert/components/alert/alert.component.html

@@ -0,0 +1,27 @@
+<div class="cc-alert" [ngClass]="'cc-alert-' + variant" [style.width]="width" [style.height]="height"
+    [style.border-radius]="borderRadius" [style.border-top-left-radius]="borderTopLeftRadius"
+    [style.border-top-right-radius]="borderTopRightRadius" [style.border-bottom-left-radius]="borderBottomLeftRadius"
+    [style.border-bottom-right-radius]="borderBottomRightRadius" [style.padding]="padding" [style.gap]="gap"
+    [style.background-color]="backgroundColor" [style.color]="color" [style.border-color]="borderColor"
+    [style.font-size]="fontSize" [style.font-weight]="fontWeight" [style.box-shadow]="boxShadow">
+
+    <div class="cc-alert-icon" *ngIf="icon">
+        <i *ngIf="customIcon" [ngClass]="customIcon"></i>
+        <i *ngIf="!customIcon && isDefaultIcon" [ngClass]="defaultIconClass"></i>
+        <i *ngIf="!customIcon && isStringIcon && !isImgIcon" [ngClass]="iconString"></i>
+        <img *ngIf="!customIcon && isStringIcon && isImgIcon" [src]="iconString"
+            [attr.alt]="labels?.iconAltText || 'alert icon'" />
+        <ng-container *ngIf="isObjectIcon">
+            <i *ngIf="iconObject.type === 'fontawesome'" [ngClass]="iconObject.value"></i>
+            <span *ngIf="iconObject.type === 'material'" class="material-icons">{{ iconObject.value }}</span>
+            <img *ngIf="iconObject.type === 'img'" [src]="iconObject.value"
+                [attr.alt]="labels?.iconAltText || 'alert icon'" />
+        </ng-container>
+    </div>
+
+    <div class="cc-alert-content">
+        <div class="cc-alert-title" *ngIf="title">{{ title }}</div>
+        <div class="cc-alert-message" *ngIf="message">{{ message }}</div>
+        <ng-content></ng-content>
+    </div>
+</div>

package/src/lib/modules/alert/components/alert/alert.component.scss

@@ -0,0 +1,92 @@
+.cc-alert {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    padding: var(--cc-alert-padding, 1rem 2rem);
+    border-radius: var(--cc-alert-radius, 0.75rem);
+    gap: var(--cc-alert-gap, 1rem);
+    box-sizing: border-box;
+    font-family: var(--cc-alert-font-family, inherit);
+
+    .cc-alert-icon {
+        font-size: var(--cc-alert-icon-size, 1.25rem);
+        flex-shrink: 0;
+        margin-top: var(--cc-alert-icon-margin-top, 0.125rem);
+
+        img {
+            width: var(--cc-alert-icon-size, 1.25rem);
+            height: var(--cc-alert-icon-size, 1.25rem);
+            object-fit: contain;
+        }
+    }
+
+    .cc-alert-content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem; // Keeping small internal gap as is, or could be a var
+        flex-grow: 1;
+
+        .cc-alert-title {
+            font-weight: 700;
+            font-size: var(--cc-alert-title-size, 1rem);
+            line-height: var(--cc-alert-title-line-height, 1.5rem);
+        }
+
+        .cc-alert-message {
+            font-size: var(--cc-alert-message-size, 0.875rem);
+            line-height: 200%; // Relative unit is fine
+            opacity: 0.9;
+        }
+    }
+
+    // Variants
+    &.cc-alert-info {
+        background-color: var(--cc-alert-info-bg);
+        color: var(--cc-alert-info-color);
+
+        .cc-alert-icon {
+            color: #5F6368;
+        }
+    }
+
+    &.cc-alert-warning {
+        background-color: var(--cc-alert-warning-bg);
+        color: var(--cc-alert-warning-color);
+
+        .cc-alert-title {
+            color: var(--cc-alert-warning-title-color);
+        }
+
+        .cc-alert-icon {
+            color: var(--cc-alert-warning-title-color);
+        }
+    }
+
+    &.cc-alert-warning-shadow {
+        background-color: var(--cc-alert-warning-bg);
+        color: var(--cc-alert-warning-color);
+        box-shadow: var(--cc-alert-warning-shadow);
+
+        .cc-alert-title {
+            color: var(--cc-alert-warning-title-color);
+        }
+
+        .cc-alert-icon {
+            color: var(--cc-alert-warning-title-color);
+        }
+    }
+
+    &.cc-alert-success {
+        background-color: var(--cc-alert-success-bg);
+        color: var(--cc-alert-success-color);
+    }
+
+    &.cc-alert-error {
+        background-color: var(--cc-alert-error-bg);
+        color: var(--cc-alert-error-color);
+
+        .cc-alert-icon {
+            color: var(--cc-alert-error-color);
+        }
+    }
+}

package/src/lib/modules/alert/components/alert/alert.component.ts

@@ -0,0 +1,81 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AlertLabels, AlertVariant, IconInput } from '../../alert.models';
+
+@Component({
+    selector: 'lib-alert',
+    templateUrl: './alert.component.html',
+    styleUrls: ['./alert.component.scss'],
+    standalone: false
+})
+export class AlertComponent implements OnInit {
+    @Input() variant: AlertVariant = 'info';
+    @Input() title: string = '';
+    @Input() message: string = '';
+    @Input() icon: IconInput = true;
+    @Input() customIcon: string = ''; // New input for custom class
+    @Input() labels?: AlertLabels;
+
+    // Customization Inputs
+    @Input() width?: string;
+    @Input() height?: string;
+    @Input() borderRadius?: string;
+    @Input() padding?: string;
+    @Input() gap?: string;
+    @Input() backgroundColor?: string;
+    @Input() color?: string; // New input for custom text color
+    @Input() borderColor?: string;
+    @Input() fontSize?: string;
+    @Input() fontWeight?: string;
+    @Input() boxShadow?: string;
+
+    // Granular Border Radius Customization
+    @Input() borderTopLeftRadius?: string;
+    @Input() borderTopRightRadius?: string;
+    @Input() borderBottomLeftRadius?: string;
+    @Input() borderBottomRightRadius?: string;
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+    get isDefaultIcon(): boolean {
+        return this.icon === true;
+    }
+
+    get isStringIcon(): boolean {
+        return typeof this.icon === 'string';
+    }
+
+    get isObjectIcon(): boolean {
+        return typeof this.icon === 'object' && this.icon !== null;
+    }
+
+    get iconString(): string {
+        return typeof this.icon === 'string' ? this.icon : '';
+    }
+
+    get isImgIcon(): boolean {
+        const icon = this.icon;
+        if (typeof icon === 'string') {
+            return icon.includes('/') || icon.includes('.') || icon.startsWith('http');
+        }
+        return typeof icon === 'object' && icon !== null && icon.type === 'img';
+    }
+
+    get iconObject(): { type: string; value: string } {
+        return typeof this.icon === 'object' ? this.icon as any : { type: '', value: '' };
+    }
+
+    get defaultIconClass(): string {
+        switch (this.variant) {
+            case 'success': return 'fa-solid fa-circle-check';
+            case 'warning':
+            case 'warning-shadow': return 'fa-solid fa-triangle-exclamation';
+            case 'error': return 'fa-solid fa-triangle-exclamation';
+            case 'info':
+            default: return 'fa-solid fa-circle-info';
+        }
+    }
+}

package/src/lib/modules/button/button.models.ts

@@ -0,0 +1,13 @@
+export type ButtonVariant =
+    | 'primary'
+    | 'warning'
+    | 'outline'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'danger-outline'
+    | 'text';
+
+export interface ButtonLabels {
+    iconAltText?: string;
+}

package/src/lib/modules/button/button.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonComponent } from './components/button/button.component';
+
+@NgModule({
+  declarations: [
+    ButtonComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    ButtonComponent
+  ]
+})
+export class ButtonModule { }

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

@@ -0,0 +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)};
+}

package/src/lib/modules/button/components/button/button.component.html

@@ -0,0 +1,22 @@
+<button [type]="type" [disabled]="disabled" class="cc-btn" [ngClass]="'cc-btn-' + variant" [style.width]="width"
+  [style.height]="height" [style.border-radius]="borderRadius" [style.font-size]="fontSize"
+  [style.font-weight]="fontWeight" [style.background-color]="backgroundColor" [style.color]="color"
+  [style.border]="border">
+  <div class="cc-btn-icon-wrapper" *ngIf="icon">
+    <!-- String Icons -->
+    <ng-container *ngIf="isStringIcon">
+      <i *ngIf="!isImgIcon" [ngClass]="iconString" class="cc-btn-icon"></i>
+      <img *ngIf="isImgIcon" [src]="iconString" [attr.alt]="labels?.iconAltText || 'button icon'"
+        class="cc-btn-icon cc-btn-img-icon" />
+    </ng-container>
+
+    <!-- Object Icons -->
+    <ng-container *ngIf="isObjectIcon">
+      <i *ngIf="iconObject.type === 'fontawesome'" [ngClass]="iconObject.value" class="cc-btn-icon"></i>
+      <span *ngIf="iconObject.type === 'material'" class="material-icons cc-btn-icon">{{ iconObject.value }}</span>
+      <img *ngIf="iconObject.type === 'img'" [src]="iconObject.value" [attr.alt]="labels?.iconAltText || 'button icon'"
+        class="cc-btn-icon cc-btn-img-icon" />
+    </ng-container>
+  </div>
+  <ng-content></ng-content>
+</button>

package/src/lib/modules/button/components/button/button.component.scss

@@ -0,0 +1,88 @@
+.cc-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    // Common styles from variables
+    font-family: var(--cc-btn-font-family);
+    font-weight: var(--cc-btn-font-weight);
+    font-size: var(--cc-btn-font-size);
+    padding: var(--cc-btn-padding);
+
+    // Disabled State
+    &:disabled {
+        opacity: var(--cc-btn-disabled-opacity);
+        cursor: var(--cc-btn-disabled-cursor);
+        pointer-events: none;
+    }
+
+    // Variants
+    &.cc-btn-primary {
+        background-color: var(--cc-btn-primary-bg);
+        color: var(--cc-btn-primary-color);
+        border-radius: var(--cc-btn-primary-radius);
+        border: var(--cc-btn-primary-border);
+    }
+
+    &.cc-btn-warning {
+        background-color: var(--cc-btn-warning-bg);
+        color: var(--cc-btn-warning-color);
+        border-radius: var(--cc-btn-warning-radius);
+        border: var(--cc-btn-warning-border);
+    }
+
+    &.cc-btn-outline {
+        background-color: var(--cc-btn-outline-bg);
+        color: var(--cc-btn-outline-color);
+        border-radius: var(--cc-btn-outline-radius);
+        border: var(--cc-btn-outline-border);
+    }
+
+    &.cc-btn-secondary {
+        background-color: var(--cc-btn-secondary-bg);
+        color: var(--cc-btn-secondary-color);
+        border-radius: var(--cc-btn-secondary-radius);
+        border: var(--cc-btn-secondary-border);
+    }
+
+    &.cc-btn-success {
+        background-color: var(--cc-btn-success-bg);
+        color: var(--cc-btn-success-color);
+        border-radius: var(--cc-btn-success-radius);
+        border: var(--cc-btn-success-border);
+    }
+
+    &.cc-btn-danger {
+        background-color: var(--cc-btn-danger-bg);
+        color: var(--cc-btn-danger-color);
+        border-radius: var(--cc-btn-danger-radius);
+        border: var(--cc-btn-danger-border);
+    }
+
+    &.cc-btn-danger-outline {
+        background-color: var(--cc-btn-danger-outline-bg);
+        color: var(--cc-btn-danger-outline-color);
+        border-radius: var(--cc-btn-danger-outline-radius);
+        border: var(--cc-btn-danger-outline-border);
+    }
+
+    .cc-btn-icon-wrapper {
+        display: inline-flex;
+        align-items: center;
+        margin-right: 0.5rem; // 8px
+    }
+
+    .cc-btn-icon {
+        font-size: 1.1em;
+        line-height: 1;
+    }
+
+    .cc-btn-img-icon {
+        width: 1.25rem;
+        height: 1.25rem;
+        object-fit: contain;
+    }
+}

package/src/lib/modules/button/components/button/button.component.ts

@@ -0,0 +1,67 @@
+import { Component, Input, OnInit, HostBinding } from '@angular/core';
+
+import { ButtonLabels, ButtonVariant } from '../../button.models';
+
+@Component({
+    selector: 'lib-button',
+    templateUrl: './button.component.html',
+    styleUrls: ['./button.component.scss'],
+    standalone: false
+})
+export class ButtonComponent implements OnInit {
+
+    @Input() variant: ButtonVariant = 'primary';
+    @Input() type: 'button' | 'submit' | 'reset' = 'button';
+    @Input() disabled: boolean = false;
+
+    @HostBinding('style.pointer-events')
+    get pointerEvents(): string {
+        return this.disabled ? 'none' : 'auto';
+    }
+
+    // Customization Inputs
+    @Input() width?: string;
+    @Input() height?: string;
+    @Input() borderRadius?: string;
+    @Input() fontSize?: string;
+    @Input() fontWeight?: string;
+    @Input() backgroundColor?: string;
+    @Input() color?: string;
+    @Input() border?: string;
+    @Input() icon: boolean | string | { type: 'material' | 'fontawesome' | 'img'; value: string } = '';
+    @Input() labels?: ButtonLabels;
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+    get isDefaultIcon(): boolean {
+        return this.icon === true;
+    }
+
+    get isStringIcon(): boolean {
+        return typeof this.icon === 'string' && this.icon !== '';
+    }
+
+    get isImgIcon(): boolean {
+        const icon = this.icon;
+        if (typeof icon === 'string') {
+            return icon.includes('/') || icon.includes('.') || icon.startsWith('http');
+        }
+        return typeof icon === 'object' && icon !== null && !!icon.value && (icon.type === 'img' || icon.value.includes('/') || icon.value.includes('.') || icon.value.startsWith('http'));
+    }
+
+    get isObjectIcon(): boolean {
+        return typeof this.icon === 'object' && this.icon !== null;
+    }
+
+    get iconString(): string {
+        return typeof this.icon === 'string' ? this.icon : '';
+    }
+
+    get iconObject(): { type: string; value: string } {
+        return typeof this.icon === 'object' ? this.icon as any : { type: '', value: '' };
+    }
+
+}

package/src/lib/modules/button-dropdown/button-dropdown.models.ts

@@ -0,0 +1,26 @@
+import { ButtonVariant } from '../button/button.models';
+
+export interface DropdownAction {
+    label: string;
+    type: 'api' | 'route' | 'callback';
+    icon?: string;
+    color?: string; // Generic override
+    variant?: ButtonVariant; // Explict variant (primary, warning, danger, etc)
+
+    // For 'route' type
+    route?: string;
+
+    // For 'api' type
+    apiUrl?: string;
+    apiMethod?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    apiPayload?: any;
+
+    // For 'callback' type
+    callback?: (data: any) => void;
+
+    // Universal options
+    disabled?: boolean;
+    confirmationNeeded?: boolean;
+    confirmationMessage?: string;
+    confirmationTitle?: string;
+}

package/src/lib/modules/button-dropdown/button-dropdown.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { ButtonDropdownComponent } from './components/button-dropdown/button-dropdown.component';
+import { ButtonModule } from '../button/button.module';
+import { ConfirmationModalModule } from '../confirmation-modal/confirmation-modal.module';
+
+@NgModule({
+    declarations: [
+        ButtonDropdownComponent
+    ],
+    imports: [
+        CommonModule,
+        RouterModule,
+        ButtonModule,
+        ConfirmationModalModule
+    ],
+    exports: [
+        ButtonDropdownComponent
+    ]
+})
+export class ButtonDropdownModule { }

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

@@ -0,0 +1,87 @@
+@use 'sass:map';
+
+$default-button-dropdown-config: (
+    // General Structure
+    menu-radius: 4px,
+    menu-border-light: 1px solid #e0e0e0,
+    menu-border-dark: 1px solid #444444,
+    menu-shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1),
+    menu-shadow-dark: 0 4px 6px rgba(0, 0, 0, 0.5),
+
+    // Light Theme Map
+    light-bg: #ffffff,
+    light-item-color: #333333,
+    light-item-hover-bg: #f5f5f5,
+
+    // Dark Theme Map
+    dark-bg: #1a1a1a,
+    dark-item-color: #ffffff,
+    dark-item-hover-bg: #2d2d2d,
+
+    // Button Variants (For Explicit Actions)
+    primary-bg: #262125,
+    primary-color: #ffffff,
+    primary-hover: #3d353b,
+
+    warning-bg: #F9C80E,
+    warning-color: #000000,
+    warning-hover: #ebd573,
+
+    success-bg: #16A34A,
+    success-color: #ffffff,
+    success-hover: #148f41,
+
+    danger-bg: #E63E30,
+    danger-color: #ffffff,
+    danger-hover: #c93528,
+
+    secondary-bg: #E8EAED,
+    secondary-color: #000000,
+    secondary-hover: #d1d5db,
+
+    outline-bg: transparent,
+    outline-color: #000000,
+    outline-hover: rgba(0,0,0,0.05)
+);
+
+@mixin button-dropdown-theme($user-config: ()) {
+    $config: map.merge($default-button-dropdown-config, $user-config);
+
+    --cc-btn-dropdown-radius: #{map.get($config, menu-radius)};
+    --cc-btn-dropdown-border-light: #{map.get($config, menu-border-light)};
+    --cc-btn-dropdown-border-dark: #{map.get($config, menu-border-dark)};
+    --cc-btn-dropdown-shadow-light: #{map.get($config, menu-shadow-light)};
+    --cc-btn-dropdown-shadow-dark: #{map.get($config, menu-shadow-dark)};
+
+    --cc-btn-dropdown-light-bg: #{map.get($config, light-bg)};
+    --cc-btn-dropdown-light-item-color: #{map.get($config, light-item-color)};
+    --cc-btn-dropdown-light-item-hover-bg: #{map.get($config, light-item-hover-bg)};
+
+    --cc-btn-dropdown-dark-bg: #{map.get($config, dark-bg)};
+    --cc-btn-dropdown-dark-item-color: #{map.get($config, dark-item-color)};
+    --cc-btn-dropdown-dark-item-hover-bg: #{map.get($config, dark-item-hover-bg)};
+
+    --cc-btn-dropdown-primary-bg: #{map.get($config, primary-bg)};
+    --cc-btn-dropdown-primary-color: #{map.get($config, primary-color)};
+    --cc-btn-dropdown-primary-hover: #{map.get($config, primary-hover)};
+
+    --cc-btn-dropdown-warning-bg: #{map.get($config, warning-bg)};
+    --cc-btn-dropdown-warning-color: #{map.get($config, warning-color)};
+    --cc-btn-dropdown-warning-hover: #{map.get($config, warning-hover)};
+
+    --cc-btn-dropdown-success-bg: #{map.get($config, success-bg)};
+    --cc-btn-dropdown-success-color: #{map.get($config, success-color)};
+    --cc-btn-dropdown-success-hover: #{map.get($config, success-hover)};
+
+    --cc-btn-dropdown-danger-bg: #{map.get($config, danger-bg)};
+    --cc-btn-dropdown-danger-color: #{map.get($config, danger-color)};
+    --cc-btn-dropdown-danger-hover: #{map.get($config, danger-hover)};
+
+    --cc-btn-dropdown-secondary-bg: #{map.get($config, secondary-bg)};
+    --cc-btn-dropdown-secondary-color: #{map.get($config, secondary-color)};
+    --cc-btn-dropdown-secondary-hover: #{map.get($config, secondary-hover)};
+    
+    --cc-btn-dropdown-outline-bg: #{map.get($config, outline-bg)};
+    --cc-btn-dropdown-outline-color: #{map.get($config, outline-color)};
+    --cc-btn-dropdown-outline-hover: #{map.get($config, outline-hover)};
+}