@f1falcha/stimulus 1.0.0

package/chart/chart-config.scss

@@ -0,0 +1,21 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-chart-padding: 1rem 1.25rem,
+        scl-chart-max-width: 26.25rem,
+        scl-chart-border-radius: 0.375rem,
+        scl-chart-gap: 1.25rem,
+        scl-chart-background-color: color-basic-50,
+        scl-chart-border-width: 0.063rem,
+        scl-chart-border-color: color-basic-200,
+
+        scl-chart-image-width: 7.5rem,
+        scl-chart-legend-icon-width: 1rem,
+        scl-chart-legend-icon-border-radius: 0.25rem,
+        scl-chart-legend-item-gap: 0.375rem,
+        scl-chart-content-gap: 0.5rem,
+    ),
+    default,
+    default
+);

package/chart/chart.component.d.ts

@@ -0,0 +1,21 @@
+import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
+import { Chart, ChartType } from 'chart.js';
+import * as i0 from "@angular/core";
+export interface ChartData {
+    label: string;
+    value: number;
+}
+export declare class SclChartComponent implements AfterViewInit, OnDestroy {
+    chartCanvas: ElementRef<HTMLCanvasElement>;
+    type: ChartType;
+    data: ChartData[];
+    chart: Chart;
+    chartColors: string[];
+    constructor();
+    ngAfterViewInit(): void;
+    initializeChart(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclChartComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclChartComponent, "scl-chart", never, { "type": { "alias": "type"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=chart.component.d.ts.map

package/chart/chart.component.scss

@@ -0,0 +1,34 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-chart {
+    display: flex;
+    padding: nb-theme(scl-chart-padding);
+    max-width: nb-theme(scl-chart-max-width);
+    border-radius: nb-theme(scl-chart-border-radius);
+    gap: nb-theme(scl-chart-gap);
+    align-items: center;
+    background-color: nb-theme(scl-chart-background-color);
+    border: nb-theme(scl-chart-border-width) solid nb-theme(scl-chart-border-color);
+
+    &__image {
+        width: nb-theme(scl-chart-image-width);
+        height: nb-theme(scl-chart-image-width);
+    }
+
+    &__legend-item {
+        display: flex;
+        gap: nb-theme(scl-chart-legend-item-gap);
+        align-items: center;
+    }
+
+    &__legend-icon {
+        width: nb-theme(scl-chart-legend-icon-width);
+        height: nb-theme(scl-chart-legend-icon-width);
+        border-radius: nb-theme(scl-chart-legend-icon-border-radius);
+    }
+
+    &__content {
+        display: grid;
+        gap: nb-theme(scl-chart-content-gap);
+    }
+}

package/checkbox/checkbox-config.scss

@@ -0,0 +1,62 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        // Nebular checkbox styles
+        checkbox-text-font-weight: scl-text-medium-font-weight,
+        checkbox-text-font-size: scl-text-label-large-font-size,
+        checkbox-text-font-height: 1.25rem,
+        checkbox-basic-text-color: color-basic-900,
+        checkbox-padding: 0 1.25rem 0 0,
+
+        checkbox-height: 1.25rem,
+        checkbox-width: 1.25rem,
+
+        checkbox-basic-border-color: color-basic-300,
+        checkbox-basic-checked-border-color: color-primary-500,
+        checkbox-basic-checked-background-color: color-primary-50,
+
+        //checkbox hover states
+        checkbox-basic-hover-background-color: color-primary-50,
+        checkbox-basic-hover-border-color: color-primary-500,
+
+        checkbox-basic-hover-checked-background-color: color-primary-100,
+        checkbox-basic-hover-checked-border-color: color-primary-600,
+
+        //checkbox active states
+        checkbox-basic-active-background-color: color-primary-100,
+        checkbox-basic-active-border-color: color-primary-500,
+
+        checkbox-basic-active-checked-background-color: color-primary-200,
+        checkbox-basic-active-checked-border-color: color-primary-700,
+
+        //checkbox focus states
+        checkbox-basic-focus-background-color: color-base-white,
+        checkbox-basic-focus-border-color: color-primary-50,
+
+        checkbox-basic-focus-checked-background-color: color-primary-50,
+        checkbox-basic-focus-checked-border-color: color-primary-100,
+
+        //checkbox-checkmark color
+        checkbox-basic-checked-checkmark-color: color-primary-500,
+        checkbox-basic-indeterminate-checkmark-color: color-primary-500,
+
+        //checkbox indeterminate states
+        checkbox-basic-indeterminate-background-color: color-primary-50,
+        checkbox-basic-indeterminate-border-color: color-primary-500,
+
+        //disabled states
+        checkbox-basic-disabled-background-color: color-basic-100,
+        checkbox-basic-disabled-border-color: color-basic-300,
+        checkbox-basic-disabled-checkmark-color: color-basic-300,
+        checkbox-basic-disabled-text-color: color-basic-900,
+
+        checkbox-basic-disabled-checked-background-color: color-basic-100,
+        checkbox-basic-disabled-checked-border-color: color-basic-300,
+
+        checkbox-outline-width: 0.125rem,
+        checkbox-outline-color: color-primary-50
+    ),
+    default,
+    default
+);

package/checkbox/checkbox.scss

@@ -0,0 +1,45 @@
+@use '@nebular/theme/styles/theming' as *;
+
+nb-checkbox {
+    &.nb-transition {
+        .native-input:focus:not(:checked) + .custom-checkbox:not(:hover):not(:active) {
+            box-shadow: 0 0 0 nb-theme(checkbox-outline-width) nb-theme(checkbox-outline-color);
+        }
+
+        nb-icon.custom-checkbox-icon {
+            width: 0.875rem;
+        }
+
+        .custom-checkbox.checked .custom-checkbox-icon {
+            &:hover {
+                color: nb-theme(checkbox-basic-hover-checked-border-color);
+            }
+
+            &:focus {
+                color: nb-theme(checkbox-basic-focus-checked-border-color);
+            }
+
+            &:active {
+                color: nb-theme(checkbox-basic-active-checked-border-color);
+            }
+        }
+    }
+
+    &.status-basic {
+        .native-input {
+            &:disabled {
+                & ~ .text {
+                    color: nb-theme(checkbox-basic-disabled-text-color);
+                }
+
+                &:checked,
+                &:indeterminate {
+                    + .custom-checkbox {
+                        background-color: nb-theme(checkbox-basic-disabled-background-color);
+                        border-color: nb-theme(checkbox-basic-disabled-border-color);
+                    }
+                }
+            }
+        }
+    }
+}

package/checkbox-dropdown/checkbox-dropdown.component.d.ts

@@ -0,0 +1,139 @@
+import { EventEmitter } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { NbIconLibraries } from '@nebular/theme';
+import * as i0 from "@angular/core";
+/**
+ * Interface for items that can be selected in the dropdown
+ * @interface SelectableItem
+ * @property {number | string} id - Unique identifier for the item
+ * @property {string} label - Display text for the item
+ * @property {string} [code] - Optional code identifier for the item
+ * @property {any} [key: string] - Additional properties can be included
+ */
+export interface SelectableItem {
+    id: number | string;
+    label: string;
+    code?: string;
+    [key: string]: any;
+}
+/**
+ * A versatile checkbox dropdown component that supports single and multiple selection.
+ *
+ * @example
+ * Basic usage:
+ * ```html
+ * <scl-checkbox-dropdown
+ *   [items]="items"
+ *   [multiSelect]="true"
+ *   [displayProperty]="'name'"
+ *   (selectedItems)="onSelectionChange($event)">
+ * </scl-checkbox-dropdown>
+ * ```
+ *
+ * @template T Type of items in the dropdown, must extend SelectableItem
+ */
+export declare class SclCheckboxDropdownComponent<T extends SelectableItem> {
+    private readonly fb;
+    private readonly iconLibraries;
+    /**
+     * Event emitted when selection changes with the current list of selected items
+     */
+    selectedItems: EventEmitter<T[]>;
+    private _items;
+    /**
+     * The list of selectable items to display in the dropdown
+     * @required
+     */
+    set items(value: T[]);
+    get items(): T[];
+    /**
+     * Icon to display on the dropdown button
+     * @default 'translate'
+     */
+    buttonIcon: string;
+    /**
+     * Icon pack for the button icon
+     * @default 'scl-checkbox-dropdown-icon'
+     */
+    buttonIconPack: string;
+    /**
+     * Title displayed when no items are selected or as dropdown header
+     * @default 'Select Item'
+     */
+    dropdownTitle: string;
+    /**
+     * Property name to display from each item
+     * @default 'label'
+     */
+    displayProperty: keyof T | string;
+    /**
+     * Whether multiple items can be selected
+     * @default true
+     */
+    multiSelect: boolean;
+    /**
+     * Whether to show loading spinner
+     * @default false
+     */
+    loading: boolean;
+    private _allowEmpty;
+    /**
+     * Whether to allow no items to be selected
+     * If false, the first item will be selected by default when no selection exists
+     * @default true
+     */
+    set allowEmpty(value: string | boolean);
+    get allowEmpty(): boolean;
+    private _selectAllByDefault;
+    /**
+     * Whether to select all items by default when items are loaded
+     * @default false
+     */
+    set selectAllByDefault(value: string | boolean);
+    get selectAllByDefault(): boolean;
+    /**
+     * Internal form for tracking selected items
+     */
+    form: FormGroup;
+    /**
+     * Creates an instance of SclCheckboxDropdownComponent.
+     * @param fb - Angular FormBuilder for creating the internal form
+     * @param iconLibraries - NbIconLibraries service to register icon packs
+     */
+    constructor(fb: FormBuilder, iconLibraries: NbIconLibraries);
+    /**
+     * Returns the number of currently selected items
+     */
+    get selectedCount(): number;
+    /**
+     * Returns the display label for the dropdown button based on selection
+     * - If one item is selected, shows that item's display property
+     * - If multiple items are selected, shows the count
+     * - If no items are selected, shows the dropdown title
+     */
+    get selectedLabel(): string;
+    /**
+     * Updates the selection state of an item
+     * @param item - The item to update
+     * @param checked - Whether the item should be selected (true) or unselected (false)
+     */
+    updateSelection(item: T, checked: boolean): void;
+    /**
+     * Checks if an item is currently selected
+     * @param item - The item to check
+     * @returns True if the item is selected, false otherwise
+     */
+    isSelected(item: T): boolean;
+    /**
+     * Determines if an item should be disabled
+     * When allowEmpty is false and there's only one selected item,
+     * first item cannot be deselected
+     *
+     * @param item - The item to check
+     * @returns True if the item should be disabled, false otherwise
+     */
+    isDisabled(item: T): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclCheckboxDropdownComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclCheckboxDropdownComponent<any>, "scl-checkbox-dropdown", never, { "items": { "alias": "items"; "required": true; }; "buttonIcon": { "alias": "buttonIcon"; "required": false; }; "buttonIconPack": { "alias": "buttonIconPack"; "required": false; }; "dropdownTitle": { "alias": "dropdownTitle"; "required": false; }; "displayProperty": { "alias": "displayProperty"; "required": false; }; "multiSelect": { "alias": "multiSelect"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; }; "selectAllByDefault": { "alias": "selectAllByDefault"; "required": false; }; }, { "selectedItems": "selectedItems"; }, never, never, true, never>;
+}
+//# sourceMappingURL=checkbox-dropdown.component.d.ts.map

package/checkbox-dropdown/checkbox-dropdown.component.scss

@@ -0,0 +1,11 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-checkbox-dropdown {
+    &__content {
+        min-width: 200px;
+
+        nb-checkbox.status-basic .native-input:disabled + .custom-checkbox .custom-checkbox-icon {
+            color: nb-theme(color-base-white);
+        }
+    }
+}

package/checkbox-dropdown/checkbox-dropdown.icon.d.ts

@@ -0,0 +1,3 @@
+import { NbIcons } from '@nebular/theme';
+export declare const SclCheckboxDropdownIcon: NbIcons;
+//# sourceMappingURL=checkbox-dropdown.icon.d.ts.map

package/clipboard/clipboard-config.scss

@@ -0,0 +1,23 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        scl-clipboard-gap: 2.5rem,
+        scl-clipboard-border-radius: 0.375rem,
+        scl-clipboard-background-color: color-primary-50,
+        scl-clipboard-max-height: 2.5rem,
+        scl-clipboard-max-width: 22.5rem,
+        scl-clipboard-padding: 0.625rem 0.875rem,
+
+        scl-clipboard-content-min-width: 16rem,
+        scl-clipboard-content-font-family: 'Inter',
+        scl-clipboard-content-font-size: scl-text-scl-text-body-medium-font-size,
+        scl-clipboard-content-font-weight: scl-text-scl-text-medium-font-weight,
+        scl-clipboard-content-line-height: scl-text-scl-text-body-medium-line-height,
+        scl-clipboard-content-color: color-primary-600,
+
+        scl-clipboard-button-padding: 0.375rem,
+    ),
+    default,
+    default
+);

package/clipboard/clipboard.component.d.ts

@@ -0,0 +1,15 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { NbIconLibraries } from '@nebular/theme';
+import { SclAlertService } from '../alert/alert.service';
+import * as i0 from "@angular/core";
+export declare class SclClipBoardComponent {
+    private iconLibraries;
+    private clipboard;
+    private alertService;
+    content: string;
+    constructor(iconLibraries: NbIconLibraries, clipboard: Clipboard, alertService: SclAlertService);
+    copy(value: HTMLElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SclClipBoardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SclClipBoardComponent, "scl-clipboard", never, { "content": { "alias": "content"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=clipboard.component.d.ts.map

package/clipboard/clipboard.component.scss

@@ -0,0 +1,37 @@
+@use '@nebular/theme/styles/theming' as *;
+
+.scl-clipboard {
+    display: flex;
+    gap: nb-theme(scl-clipboard-gap);
+    align-items: center;
+    border-radius: nb-theme(scl-clipboard-border-radius);
+    background-color: nb-theme(scl-clipboard-background-color);
+    max-height: nb-theme(scl-clipboard-max-height);
+    max-width: nb-theme(scl-clipboard-max-width);
+    padding: nb-theme(scl-clipboard-padding);
+
+    &__content {
+        min-width: nb-theme(scl-clipboard-content-min-width);
+        font-family: nb-theme(scl-clipboard-content-font-family);
+        font-size: nb-theme(scl-clipboard-content-font-size);
+        font-weight: nb-theme(scl-clipboard-content-font-weight);
+        line-height: nb-theme(scl-clipboard-content-line-height);
+        color: nb-theme(scl-clipboard-content-color);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: left;
+    }
+
+    button[nbButton] {
+        &.size-medium {
+            &.icon-start {
+                &.icon-end {
+                    &.appearance-ghost {
+                        padding: nb-theme(scl-clipboard-button-padding);
+                    }
+                }
+            }
+        }
+    }
+}

package/clipboard/clipboard.icon.d.ts

@@ -0,0 +1,3 @@
+import { NbIcons } from '@nebular/theme';
+export declare const SclClipBoardIcons: NbIcons;
+//# sourceMappingURL=clipboard.icon.d.ts.map

package/color/cherry.scss

@@ -0,0 +1,19 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        color-primary-25: #f6eaea,
+        color-primary-50: #fce9e9,
+        color-primary-100: #f7cbcb,
+        color-primary-200: #f0a2a1,
+        color-primary-300: #ea7676,
+        color-primary-400: #e34d4c,
+        color-primary-500: #dd2625,
+        color-primary-600: #bc201f,
+        color-primary-700: #9d1b1a,
+        color-primary-800: #7e1615,
+        color-primary-900: #631111,
+    ),
+    default,
+    default
+);

package/color/chilli.scss

@@ -0,0 +1,19 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        color-primary-25: #fcf1f2,
+        color-primary-50: #eed5d6,
+        color-primary-100: #e5bfc1,
+        color-primary-200: #d49598,
+        color-primary-300: #cb8083,
+        color-primary-400: #b9555a,
+        color-primary-500: #a82b31,
+        color-primary-600: #862227,
+        color-primary-700: #651a1d,
+        color-primary-800: #541619,
+        color-primary-900: #320d0f,
+    ),
+    default,
+    default
+);

package/color/comet.scss

@@ -0,0 +1,19 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        color-primary-25: #f0f7fe,
+        color-primary-50: #e6f1fd,
+        color-primary-100: #c3ddfa,
+        color-primary-200: #94c3f6,
+        color-primary-300: #62a7f1,
+        color-primary-400: #328ced,
+        color-primary-500: #0573e9,
+        color-primary-600: #0462c6,
+        color-primary-700: #0452a5,
+        color-primary-800: #034285,
+        color-primary-900: #023469,
+    ),
+    default,
+    default
+);

package/color/cotton-candy.scss

@@ -0,0 +1,19 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        color-primary-25: #fff5fa,
+        color-primary-50: #ffeef7,
+        color-primary-100: #ffd6ec,
+        color-primary-200: #ffb5dd,
+        color-primary-300: #ff93cd,
+        color-primary-400: #ff72be,
+        color-primary-500: #ff53b0,
+        color-primary-600: #d94796,
+        color-primary-700: #b53b7d,
+        color-primary-800: #912f64,
+        color-primary-900: #73254f,
+    ),
+    default,
+    default
+);

package/color/default.scss

@@ -0,0 +1,154 @@
+@use '@nebular/theme/styles/theming' as *;
+
+$nb-themes: nb-register-theme(
+    (
+        color-base-white: #ffffff,
+        color-base-black: #000000,
+        color-base-transparent: transparent,
+
+        color-basic-25: #fcfcfd,
+        color-basic-50: #f9fafb,
+        color-basic-100: #f3f4f6,
+        color-basic-200: #e5e7eb,
+        color-basic-300: #d1d5db,
+        color-basic-400: #9ca3af,
+        color-basic-500: #6b7280,
+        color-basic-600: #4b5563,
+        color-basic-700: #374151,
+        color-basic-800: #1f2937,
+        color-basic-900: #111827,
+
+        color-primary-25: #fdfeff,
+        color-primary-50: #e2eafd,
+        color-primary-100: #becff9,
+        color-primary-200: #96b1f6,
+        color-primary-300: #6d93f3,
+        color-primary-400: #4576ef,
+        color-primary-500: #1e58ec,
+        color-primary-600: #1145c8,
+        color-primary-700: #0d369d,
+        color-primary-800: #0a2874,
+        color-primary-900: #051439,
+
+        color-primary-transparent-100: rgba(30, 88, 236, 0.08),
+        color-primary-transparent-200: rgba(30, 88, 236, 0.16),
+        color-primary-transparent-300: rgba(30, 88, 236, 0.24),
+        color-primary-transparent-400: rgba(30, 88, 236, 0.32),
+        color-primary-transparent-500: rgba(30, 88, 236, 0.4),
+        color-primary-transparent-600: rgba(30, 88, 236, 0.48),
+        color-success-25: #f6fef9,
+        color-success-50: #ecfdf3,
+        color-success-100: #d1fadf,
+        color-success-200: #a6f4c5,
+        color-success-300: #6ce9a6,
+        color-success-400: #32d583,
+        color-success-500: #039855,
+        color-success-600: #1a7842,
+        color-success-700: #027a48,
+        color-success-800: #05603a,
+        color-success-900: #054f31,
+
+        color-success-transparent-100: rgba(2, 152, 85, 0.08),
+        color-success-transparent-200: rgba(2, 152, 85, 0.16),
+        color-success-transparent-300: rgba(2, 152, 85, 0.24),
+        color-success-transparent-400: rgba(2, 152, 85, 0.32),
+        color-success-transparent-500: rgba(2, 152, 85, 0.4),
+        color-success-transparent-600: rgba(2, 152, 85, 0.48),
+        color-info-25: #f5f8ff,
+        color-info-50: #eff4ff,
+        color-info-100: #d1e0ff,
+        color-info-200: #b2ccff,
+        color-info-300: #84adff,
+        color-info-400: #528bff,
+        color-info-500: #2970ff,
+        color-info-600: #155eef,
+        color-info-700: #004eeb,
+        color-info-800: #0040c1,
+        color-info-900: #00359e,
+
+        color-info-transparent-100: rgba(41, 112, 255, 0.08),
+        color-info-transparent-200: rgba(41, 112, 255, 0.16),
+        color-info-transparent-300: rgba(41, 112, 255, 0.24),
+        color-info-transparent-400: rgba(41, 112, 255, 0.32),
+        color-info-transparent-500: rgba(41, 112, 255, 0.4),
+        color-info-transparent-600: rgba(41, 112, 255, 0.48),
+        color-warning-25: #fffcf5,
+        color-warning-50: #fffaeb,
+        color-warning-100: #fef0c7,
+        color-warning-200: #fedf89,
+        color-warning-300: #fec84b,
+        color-warning-400: #fdb022,
+        color-warning-500: #f79009,
+        color-warning-600: #dc6803,
+        color-warning-700: #b54708,
+        color-warning-800: #93370d,
+        color-warning-900: #7a2e0e,
+
+        color-warning-transparent-100: rgba(247, 144, 9, 0.08),
+        color-warning-transparent-200: rgba(247, 144, 9, 0.16),
+        color-warning-transparent-300: rgba(247, 144, 9, 0.24),
+        color-warning-transparent-400: rgba(247, 144, 9, 0.32),
+        color-warning-transparent-500: rgba(247, 144, 9, 0.4),
+        color-warning-transparent-600: rgba(247, 144, 9, 0.48),
+        color-danger-25: #fffbfa,
+        color-danger-50: #fef3f2,
+        color-danger-100: #fee4e2,
+        color-danger-200: #fecdca,
+        color-danger-300: #fda29b,
+        color-danger-400: #f97066,
+        color-danger-500: #f04438,
+        color-danger-600: #d92d20,
+        color-danger-700: #b42318,
+        color-danger-800: #912018,
+        color-danger-900: #7a271a,
+
+        color-danger-transparent-100: rgba(240, 68, 56, 0.08),
+        color-danger-transparent-200: rgba(240, 68, 56, 0.16),
+        color-danger-transparent-300: rgba(240, 68, 56, 0.24),
+        color-danger-transparent-400: rgba(240, 68, 56, 0.32),
+        color-danger-transparent-500: rgba(240, 68, 56, 0.4),
+        color-danger-transparent-600: rgba(240, 68, 56, 0.48),
+        color-supporting-light-green-100: #e4fbcc,
+        color-supporting-light-green-800: #326212,
+        color-supporting-rose-100: #ffe4e8,
+        color-supporting-rose-800: #a11043,
+        color-supporting-orange-100: #ffe6d5,
+        color-supporting-orange-800: #97180c,
+        color-supporting-teal-100: #ccfbef,
+        color-supporting-teal-900: #134e48,
+        color-supporting-blue-light-100: #e0f2fe,
+        color-supporting-purple-50: #f4f3ff,
+
+        color-supporting-light-blue-100: #e0f2fe,
+        color-supporting-light-blue-900: #0b4a6f,
+        color-supporting-pink-100: #fce7f6,
+        color-supporting-pink-900: #851651,
+
+        background-basic-color-3: color-basic-100,
+
+        color-primary-active: color-primary-700,
+        color-primary-hover: color-primary-600,
+        color-primary-focus: color-primary-500,
+        color-primary-focus-border: color-primary-500,
+
+        color-primary-disabled: color-primary-200,
+        color-primary-disabled-border: color-primary-200,
+
+        color-basic-disabled-border: color-basic-300,
+        text-disabled-color: color-control-default,
+
+        color-control-default: color-base-white,
+        color-basic-transparent-default: color-base-transparent,
+        color-basic-transparent-hover: color-basic-50,
+        color-basic-transparent-active: color-basic-100,
+
+        text-basic-color: color-basic-900,
+
+        color-shadow-depth-extra-small: rgba(#051439, 0.06),
+        color-shadow-depth-basic-extra-small: #1118270f,
+        color-shadow-depth-medium-larger-offset: #1118270f,
+        color-shadow-depth-medium-smaller-offset: #11182714,
+    ),
+    default,
+    default
+);