@timus-networks/theme 2.2.2 → 2.3.0

package/dist/runtime/components/production/timus-breadcrumb.vue.d.ts

@@ -36,305 +36,3 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     paths: unknown[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
-declare module 'vue' {
-    interface GlobalComponents {
-    }
-    interface GlobalDirectives {
-    }
-}
-declare global {
-    const __VLS_intrinsicElements: __VLS_IntrinsicElements;
-    const __VLS_directiveBindingRestFields: {
-        instance: null;
-        oldValue: null;
-        modifiers: any;
-        dir: any;
-    };
-    const __VLS_unref: typeof import('vue').unref;
-    const __VLS_nativeElements: {
-        a: HTMLAnchorElement;
-        abbr: HTMLElement;
-        address: HTMLElement;
-        area: HTMLAreaElement;
-        article: HTMLElement;
-        aside: HTMLElement;
-        audio: HTMLAudioElement;
-        b: HTMLElement;
-        base: HTMLBaseElement;
-        bdi: HTMLElement;
-        bdo: HTMLElement;
-        blockquote: HTMLQuoteElement;
-        body: HTMLBodyElement;
-        br: HTMLBRElement;
-        button: HTMLButtonElement;
-        canvas: HTMLCanvasElement;
-        caption: HTMLTableCaptionElement;
-        cite: HTMLElement;
-        code: HTMLElement;
-        col: HTMLTableColElement;
-        colgroup: HTMLTableColElement;
-        data: HTMLDataElement;
-        datalist: HTMLDataListElement;
-        dd: HTMLElement;
-        del: HTMLModElement;
-        details: HTMLDetailsElement;
-        dfn: HTMLElement;
-        dialog: HTMLDialogElement;
-        div: HTMLDivElement;
-        dl: HTMLDListElement;
-        dt: HTMLElement;
-        em: HTMLElement;
-        embed: HTMLEmbedElement;
-        fieldset: HTMLFieldSetElement;
-        figcaption: HTMLElement;
-        figure: HTMLElement;
-        footer: HTMLElement;
-        form: HTMLFormElement;
-        h1: HTMLHeadingElement;
-        h2: HTMLHeadingElement;
-        h3: HTMLHeadingElement;
-        h4: HTMLHeadingElement;
-        h5: HTMLHeadingElement;
-        h6: HTMLHeadingElement;
-        head: HTMLHeadElement;
-        header: HTMLElement;
-        hgroup: HTMLElement;
-        hr: HTMLHRElement;
-        html: HTMLHtmlElement;
-        i: HTMLElement;
-        iframe: HTMLIFrameElement;
-        img: HTMLImageElement;
-        input: HTMLInputElement;
-        ins: HTMLModElement;
-        kbd: HTMLElement;
-        label: HTMLLabelElement;
-        legend: HTMLLegendElement;
-        li: HTMLLIElement;
-        link: HTMLLinkElement;
-        main: HTMLElement;
-        map: HTMLMapElement;
-        mark: HTMLElement;
-        menu: HTMLMenuElement;
-        meta: HTMLMetaElement;
-        meter: HTMLMeterElement;
-        nav: HTMLElement;
-        noscript: HTMLElement;
-        object: HTMLObjectElement;
-        ol: HTMLOListElement;
-        optgroup: HTMLOptGroupElement;
-        option: HTMLOptionElement;
-        output: HTMLOutputElement;
-        p: HTMLParagraphElement;
-        picture: HTMLPictureElement;
-        pre: HTMLPreElement;
-        progress: HTMLProgressElement;
-        q: HTMLQuoteElement;
-        rp: HTMLElement;
-        rt: HTMLElement;
-        ruby: HTMLElement;
-        s: HTMLElement;
-        samp: HTMLElement;
-        script: HTMLScriptElement;
-        search: HTMLElement;
-        section: HTMLElement;
-        select: HTMLSelectElement;
-        slot: HTMLSlotElement;
-        small: HTMLElement;
-        source: HTMLSourceElement;
-        span: HTMLSpanElement;
-        strong: HTMLElement;
-        style: HTMLStyleElement;
-        sub: HTMLElement;
-        summary: HTMLElement;
-        sup: HTMLElement;
-        table: HTMLTableElement;
-        tbody: HTMLTableSectionElement;
-        td: HTMLTableCellElement;
-        template: HTMLTemplateElement;
-        textarea: HTMLTextAreaElement;
-        tfoot: HTMLTableSectionElement;
-        th: HTMLTableCellElement;
-        thead: HTMLTableSectionElement;
-        time: HTMLTimeElement;
-        title: HTMLTitleElement;
-        tr: HTMLTableRowElement;
-        track: HTMLTrackElement;
-        u: HTMLElement;
-        ul: HTMLUListElement;
-        var: HTMLElement;
-        video: HTMLVideoElement;
-        wbr: HTMLElement;
-        animate: SVGAnimateElement;
-        animateMotion: SVGAnimateMotionElement;
-        animateTransform: SVGAnimateTransformElement;
-        circle: SVGCircleElement;
-        clipPath: SVGClipPathElement;
-        defs: SVGDefsElement;
-        desc: SVGDescElement;
-        ellipse: SVGEllipseElement;
-        feBlend: SVGFEBlendElement;
-        feColorMatrix: SVGFEColorMatrixElement;
-        feComponentTransfer: SVGFEComponentTransferElement;
-        feComposite: SVGFECompositeElement;
-        feConvolveMatrix: SVGFEConvolveMatrixElement;
-        feDiffuseLighting: SVGFEDiffuseLightingElement;
-        feDisplacementMap: SVGFEDisplacementMapElement;
-        feDistantLight: SVGFEDistantLightElement;
-        feDropShadow: SVGFEDropShadowElement;
-        feFlood: SVGFEFloodElement;
-        feFuncA: SVGFEFuncAElement;
-        feFuncB: SVGFEFuncBElement;
-        feFuncG: SVGFEFuncGElement;
-        feFuncR: SVGFEFuncRElement;
-        feGaussianBlur: SVGFEGaussianBlurElement;
-        feImage: SVGFEImageElement;
-        feMerge: SVGFEMergeElement;
-        feMergeNode: SVGFEMergeNodeElement;
-        feMorphology: SVGFEMorphologyElement;
-        feOffset: SVGFEOffsetElement;
-        fePointLight: SVGFEPointLightElement;
-        feSpecularLighting: SVGFESpecularLightingElement;
-        feSpotLight: SVGFESpotLightElement;
-        feTile: SVGFETileElement;
-        feTurbulence: SVGFETurbulenceElement;
-        filter: SVGFilterElement;
-        foreignObject: SVGForeignObjectElement;
-        g: SVGGElement;
-        image: SVGImageElement;
-        line: SVGLineElement;
-        linearGradient: SVGLinearGradientElement;
-        marker: SVGMarkerElement;
-        mask: SVGMaskElement;
-        metadata: SVGMetadataElement;
-        mpath: SVGMPathElement;
-        path: SVGPathElement;
-        pattern: SVGPatternElement;
-        polygon: SVGPolygonElement;
-        polyline: SVGPolylineElement;
-        radialGradient: SVGRadialGradientElement;
-        rect: SVGRectElement;
-        set: SVGSetElement;
-        stop: SVGStopElement;
-        svg: SVGSVGElement;
-        switch: SVGSwitchElement;
-        symbol: SVGSymbolElement;
-        text: SVGTextElement;
-        textPath: SVGTextPathElement;
-        tspan: SVGTSpanElement;
-        use: SVGUseElement;
-        view: SVGViewElement;
-    };
-    type __VLS_IntrinsicElements = import('vue/jsx-runtime').JSX.IntrinsicElements;
-    type __VLS_Element = import('vue/jsx-runtime').JSX.Element;
-    type __VLS_GlobalComponents = import('vue').GlobalComponents & Pick<typeof import('vue'), 'Transition' | 'TransitionGroup' | 'KeepAlive' | 'Suspense' | 'Teleport'>;
-    type __VLS_GlobalDirectives = import('vue').GlobalDirectives;
-    type __VLS_IsAny<T> = 0 extends 1 & T ? true : false;
-    type __VLS_PickNotAny<A, B> = __VLS_IsAny<A> extends true ? B : A;
-    type __VLS_unknownDirective = (arg1: unknown, arg2: unknown, arg3: unknown, arg4: unknown) => void;
-    type __VLS_WithComponent<N0 extends string, LocalComponents, N1 extends string, N2 extends string, N3 extends string> = N1 extends keyof LocalComponents ? N1 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
-        [K in N0]: LocalComponents[N1];
-    } : N2 extends keyof LocalComponents ? N2 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
-        [K in N0]: LocalComponents[N2];
-    } : N3 extends keyof LocalComponents ? N3 extends N0 ? Pick<LocalComponents, N0 extends keyof LocalComponents ? N0 : never> : {
-        [K in N0]: LocalComponents[N3];
-    } : N1 extends keyof __VLS_GlobalComponents ? N1 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
-        [K in N0]: __VLS_GlobalComponents[N1];
-    } : N2 extends keyof __VLS_GlobalComponents ? N2 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
-        [K in N0]: __VLS_GlobalComponents[N2];
-    } : N3 extends keyof __VLS_GlobalComponents ? N3 extends N0 ? Pick<__VLS_GlobalComponents, N0 extends keyof __VLS_GlobalComponents ? N0 : never> : {
-        [K in N0]: __VLS_GlobalComponents[N3];
-    } : {
-        [K in N0]: unknown;
-    };
-    type __VLS_FunctionalComponentProps<T, K> = '__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
-        __ctx?: {
-            props?: infer P;
-        };
-    } ? NonNullable<P> : never : T extends (props: infer P, ...args: any) => any ? P : {};
-    type __VLS_IsFunction<T, K> = K extends keyof T ? __VLS_IsAny<T[K]> extends false ? unknown extends T[K] ? false : true : false : false;
-    type __VLS_UnionToIntersection<U> = (U extends unknown ? (arg: U) => unknown : never) extends ((arg: infer P) => unknown) ? P : never;
-    type __VLS_OverloadUnionInner<T, U = unknown> = U & T extends (...args: infer A) => infer R ? U extends T ? never : __VLS_OverloadUnionInner<T, Pick<T, keyof T> & U & ((...args: A) => R)> | ((...args: A) => R) : never;
-    type __VLS_OverloadUnion<T> = Exclude<__VLS_OverloadUnionInner<(() => never) & T>, T extends () => never ? never : () => never>;
-    type __VLS_ConstructorOverloads<T> = __VLS_OverloadUnion<T> extends infer F ? F extends (event: infer E, ...args: infer A) => any ? {
-        [K in E & string]: (...args: A) => void;
-    } : never : never;
-    type __VLS_NormalizeEmits<T> = __VLS_PrettifyGlobal<__VLS_UnionToIntersection<__VLS_ConstructorOverloads<T> & {
-        [K in keyof T]: T[K] extends any[] ? {
-            (...args: T[K]): void;
-        } : never;
-    }>>;
-    type __VLS_PrettifyGlobal<T> = {
-        [K in keyof T]: T[K];
-    } & {};
-    function __VLS_getVForSourceType(source: number): [number, number, number][];
-    function __VLS_getVForSourceType(source: string): [string, number, number][];
-    function __VLS_getVForSourceType<T extends any[]>(source: T): [
-        item: T[number],
-        key: number,
-        index: number
-    ][];
-    function __VLS_getVForSourceType<T extends {
-        [Symbol.iterator](): Iterator<any>;
-    }>(source: T): [
-        item: T extends {
-            [Symbol.iterator](): Iterator<infer T1>;
-        } ? T1 : never,
-        key: number,
-        index: undefined
-    ][];
-    function __VLS_getVForSourceType<T extends number | {
-        [Symbol.iterator](): Iterator<any>;
-    }>(source: T): [
-        item: number | (Exclude<T, number> extends {
-            [Symbol.iterator](): Iterator<infer T1>;
-        } ? T1 : never),
-        key: number,
-        index: undefined
-    ][];
-    function __VLS_getVForSourceType<T>(source: T): [
-        item: T[keyof T],
-        key: keyof T,
-        index: number
-    ][];
-    function __VLS_getSlotParams<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>;
-    function __VLS_getSlotParam<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>[0];
-    function __VLS_directiveAsFunction<T extends import('vue').Directive>(dir: T): T extends (...args: any) => any ? T | __VLS_unknownDirective : NonNullable<(T & Record<string, __VLS_unknownDirective>)['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']>;
-    function __VLS_withScope<T, K>(ctx: T, scope: K): ctx is T & K;
-    function __VLS_makeOptional<T>(t: T): {
-        [K in keyof T]?: T[K];
-    };
-    function __VLS_nonNullable<T>(t: T): T extends null | undefined ? never : T;
-    function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K): T extends new (...args: any) => any ? (props: (K extends {
-        $props: infer Props;
-    } ? Props : any) & Record<string, unknown>, ctx?: any) => __VLS_Element & {
-        __ctx?: {
-            attrs?: any;
-            slots?: K extends {
-                $slots: infer Slots;
-            } ? Slots : any;
-            emit?: K extends {
-                $emit: infer Emit;
-            } ? Emit : any;
-        } & {
-            props?: (K extends {
-                $props: infer Props;
-            } ? Props : any) & Record<string, unknown>;
-            expose?(exposed: K): void;
-        };
-    } : T extends () => any ? (props: {}, ctx?: any) => ReturnType<T> : T extends (...args: any) => any ? T : (_: {} & Record<string, unknown>, ctx?: any) => {
-        __ctx?: {
-            attrs?: any;
-            expose?: any;
-            slots?: any;
-            emit?: any;
-            props?: {} & Record<string, unknown>;
-        };
-    };
-    function __VLS_elementAsFunction<T>(tag: T, endTag?: T): (_: T & Record<string, unknown>) => void;
-    function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
-    function __VLS_pickFunctionalComponentCtx<T, K>(comp: T, compInstance: K): NonNullable<__VLS_PickNotAny<'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
-        __ctx?: infer Ctx;
-    } ? Ctx : never : any, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any>>;
-    function __VLS_normalizeSlot<S>(s: S): S extends () => infer R ? (props: {}) => R : S;
-    function __VLS_tryAsConstant<const T>(t: T): T;
-}

package/dist/runtime/public/scss/_buttons.scss

@@ -0,0 +1,159 @@
+$btn-config: (
+  'xs': (
+    min-width: 24px,
+    min-height: 24px,
+    padding: 0 4px,
+    font-size: 10px,
+    line-height: 10px,
+    border-radius: 3px,
+  ),
+  'sm': (
+    min-width: 32px,
+    min-height: 32px,
+    padding: 0 6px,
+    font-size: 12px,
+    line-height: 16px,
+    border-radius: 3px,
+  ),
+  'md': (
+    min-width: 36px,
+    min-height: 36px,
+    padding: 0 8px,
+    font-size: 14px,
+    line-height: 18px,
+    border-radius: 3px,
+  ),
+  'lg': (
+    min-width: 40px,
+    min-height: 40px,
+    padding: 0 12px,
+    font-size: 14px,
+    line-height: 20px,
+    border-radius: 4px,
+  ),
+  'xl': (
+    min-width: 48px,
+    min-height: 48px,
+    padding: 0 16px,
+    font-size: 14px,
+    line-height: 22px,
+    border-radius: 6px,
+  ),
+);
+$btn-font-color: white;
+$btn-bg: 500;
+$btn-border: 200;
+$btn-hover-bg: 600;
+$btn-active-bg: 700;
+
+// #### Generate Size Classes
+.btn {
+  // border-color: var(--button-border-color);
+  // background-color: var(--button-background-color);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  @each $size, $value in $btn-config {
+    &-#{$size} {
+      @extend %icon-#{$size};
+      @each $prop-name, $prop-value in $value {
+        --button-#{$size}-#{$prop-name}: #{$prop-value};
+        #{$prop-name}: var(--button-#{$size}-#{$prop-name});
+      }
+    }
+  }
+}
+
+// #### Generate Color Classes
+
+@each $name, $item in $theme {
+  $name: '#{$name}';
+
+  .btn-#{$name} {
+    $light: if($name==light, var(--#{secondary}-#{600}), var(--button-font-color)); // var(--button-font-color); //
+
+    --button-background-color: var(--#{$name}-#{500}); // #{map.get($item, #{$btn-bg})};
+    --button-border-color: var(--#{$name}-#{500});
+    --button-hover-color: var(--button-hover-font-color);
+    --button-hover-background-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
+    --button-hover-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
+    --button-active-color: var(--button-active-font-color);
+    --button-active-background-color: rgba(var(--#{$name}-#{600}-rgb), 0.95); // #{map.get($item, #{$btn-active-bg})};
+    --button-active-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-active-bg})};
+    background-color: var(--button-background-color);
+    border-color: var(--button-border-color);
+    color: #{$light};
+
+    &:disabled {
+      &:not(.btn-ghost, .btn-outline) {
+        background-color: var(--button-border-color);
+        border-color: var(--button-border-color);
+      }
+    }
+
+    &-outline, &-ghost {
+      --button-background-color: var(--#{$name}-#{500}); // #{map.get($item, #{$btn-bg})};
+      --button-border-color: var(--#{$name}-#{500});
+      --button-hover-color: var(--button-hover-font-color);
+      --button-hover-background-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
+      --button-hover-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-hover-bg})};
+      --button-active-color: var(--button-active-font-color);
+      --button-active-background-color: rgba(var(--#{$name}-#{600}-rgb), 0.95); // #{map.get($item, #{$btn-active-bg})};
+      --button-active-border-color: var(--#{$name}-#{600}); // #{map.get($item, #{$btn-active-bg})};
+      border-color: var(--button-border-color);
+      color: var(--button-background-color);
+
+      &:disabled {
+        // color: #{$light};
+      }
+
+      &:hover {
+        background-color: var(--button-hover-background-color);
+        border-color: var(--button-hover-background-color);
+        color: if($name==light, var(--#{light}-#{900}), var(--button-font-color)); // var(--button-font-color);
+        // background-color: transparent;
+        @if ($name==light) {
+          background-color: var(--#{light}-#{200});
+        }
+      }
+
+      &:focus {
+        // background-color: transparent;
+        // color: var(--light-500);
+        @if ($name==light) {
+          background-color: var(--#{light}-#{200});
+        }
+      }
+
+      &:active {
+        border-color: var(--button-active-background-color);
+        color: var(--button-font-color);
+        @if ($name==light) {
+          background-color: var(--#{light}-#{300});
+        } @else {
+          background-color: var(--button-active-background-color);
+        }
+      }
+    }
+
+    &:focus {
+      // @extend :focus-visible;
+    }
+
+    &-outline {
+      background-color: transparent;
+      border-style: solid;
+      border-width: 1px;
+    }
+
+    &-ghost {
+      background-color: transparent;
+      border-color: transparent !important;
+    }
+  }
+
+  // @each $key,$value in $item {
+  //   .#{$name}-#{$key} {
+  //     background-color: #{$value};
+  //   }
+  // }
+}

package/dist/runtime/public/scss/_colors.scss

@@ -0,0 +1,188 @@
+@use 'sass:map';
+
+$default-color: 5;
+$prefix: '';
+$theme-colors: (
+  'cta': purple,
+  'success': green,
+  'warning': yellow,
+  'danger': red,
+);
+
+$theme: (
+  light: (
+    '1': rgba(255, 255, 255, 1%),
+    '2': rgba(255, 255, 255, 1%),
+    '3': rgba(255, 255, 255, 1%),
+    '4': rgba(255, 255, 255, 1%),
+    '5': rgba(255, 255, 255, 1%),
+    '6': rgba(255, 255, 255, 1%),
+    '7': rgba(255, 255, 255, 1%),
+    '8': rgba(255, 255, 255, 1%),
+    '9': rgba(255, 255, 255, 1%),
+  ),
+  default: (
+    '1': #ddd7f7,
+    '2': #bcafef,
+    '3': #9a87e6,
+    '4': #795fde,
+    '5': #5737d6,
+    '6': #462cab,
+    '7': #342180,
+    '8': #231656,
+    '9': #110b2b,
+  ),
+  primary: (
+    '1': #ddd7f7,
+    '2': #bcafef,
+    '3': #9a87e6,
+    '4': #795fde,
+    '5': #5737d6,
+    '6': #462cab,
+    '7': #342180,
+    '8': #231656,
+    '9': #110b2b,
+  ),
+  secondary: (
+    '1': #e9fdf7,
+    '2': #d4fbee,
+    '3': #bef8e6,
+    '4': #a9f6dd,
+    '5': #93f4d5,
+    '6': #77d4b7,
+    '7': #5cb599,
+    '8': #40957a,
+    '9': #25765c,
+  ),
+  neutral: (
+    '1': #eeedef,
+    '2': #dcdbe0,
+    '3': #cbcad0,
+    '4': #b9b8c1,
+    '5': #a8a6b1,
+    '6': #8b8993,
+    '7': #6e6c74,
+    '8': #515056,
+    '9': #343337,
+  ),
+  info: (
+    '1': #e3f1fb,
+    '2': #c0e5f7,
+    '3': #88d1f1,
+    '4': #3cb5e6,
+    '5': #21a1d6,
+    '6': #1382b6,
+    '7': #116793,
+    '8': #12587a,
+    '9': #144a66,
+  ),
+  danger: (
+    '1': #f9dede,
+    '2': #f4bcbd,
+    '3': #ee9b9d,
+    '4': #e9797c,
+    '5': #e3585b,
+    '6': #b94749,
+    '7': #8f3638,
+    '8': #642526,
+    '9': #3a1415,
+  ),
+  error: (
+    '1': #f9dede,
+    '2': #f4bcbd,
+    '3': #ee9b9d,
+    '4': #e9797c,
+    '5': #e3585b,
+    '6': #b94749,
+    '7': #8f3638,
+    '8': #642526,
+    '9': #3a1415,
+  ),
+  success: (
+    '1': #dbf1e2,
+    '2': #b7e2c6,
+    '3': #94d4a9,
+    '4': #70c58d,
+    '5': #4cb770,
+    '6': #3d925a,
+    '7': #2e6e43,
+    '8': #1e492d,
+    '9': #0f2516,
+  ),
+  warning: (
+    '1': #faf3dc,
+    '2': #f6e8ba,
+    '3': #f1dc97,
+    '4': #edd175,
+    '5': #e8c552,
+    '6': #bda042,
+    '7': #927b32,
+    '8': #665722,
+    '9': #3b3212,
+  ),
+);
+
+@function to-rgb($value) {
+  @return red($value), green($value), blue($value);
+}
+
+@each $color, $item in $theme {
+  // add to theme colors
+  $color-list: (
+    $color: map.get($item, #{$default-color}),
+  );
+  $theme-colors: map.merge($theme-colors, $color-list);
+}
+
+// set variable
+:root {
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-bg-opacity: 1;
+  --el-color-white: white;
+  --el-color-black: black;
+  @each $color, $item in $theme {
+    @each $key, $value in $item {
+      & {
+        // --#{$prefix}#{"#{$color}"}-#{$key}: #{$value};
+        --el-color-#{"#{$color}"}-light-#{$key}: #{$value};
+        @if $key== '5' {
+          --el-color-#{"#{$color}"}: #{$value};
+        }
+      }
+
+      .#{$prefix}#{'#{$color}'}-#{$key} {
+        // color: #{$value};
+      }
+
+      .#{$prefix}bg-#{'#{$color}'}-#{$key} {
+        // background-color: #{$value};
+      }
+
+      // .#{$name}-#{$key} {
+      //   background-color: #{$value};
+      // }
+    }
+  }
+}
+
+// Color Shade and Tint Generator
+// :root {
+//   @mixin variations($name, $color) {
+//     $percentages: (80%, 60%, 40%, 20%, 0, -20%, -40%, -60%, -80%);
+//     @each $percentage in $percentages {
+//       $i: list.index($percentages, $percentage);
+//       $variation: $color;
+//       @if $percentage > 0 {
+//         $variation: color.mix(white, $color, $percentage);
+//       }
+//       @else if $percentage < 0 {
+//         $variation: color.mix(black, $color, $percentage * -1);
+//       }
+//       --bs-#{$name}-#{$i * 1}: #{$variation};
+//     }
+//   }
+//   @each $name, $value in $colors {
+//     @include variations($name, $value);
+//   }
+// }

package/dist/runtime/public/scss/_containers.scss

@@ -0,0 +1,7 @@
+.container {
+  @apply w-full px-4 mx-auto md:max-w-screen-sm lg:max-w-screen-lg xl:max-w-screen-xl 2xl:max-w-screen-xl;
+}
+
+.fluid {
+  @apply w-full px-4;
+}