gd-design-library 0.0.1

package/tokens/input.d.ts

@@ -0,0 +1,66 @@
+export declare const input: {
+    base: {
+        display: string;
+        boxSizing: string;
+        borderRadius: string;
+        border: string;
+        lineHeight: string;
+        paddingLeft: string;
+        paddingRight: string;
+        outline: string;
+        position: string;
+        borderColor: string;
+        '&[type="text"], &[type="password"]': {
+            height: string;
+        };
+        '&[type="text"].input--error': {
+            borderColor: string;
+        };
+        '&[type="text"].input--success': {
+            borderColor: string;
+        };
+        '&[readonly], &:disabled': {
+            backgroundColor: string;
+            cursor: string;
+        };
+        '&[type="checkbox"]': {
+            appearance: string;
+            height: string;
+            width: string;
+            backgroundColor: string;
+            border: string;
+            backgroundImage: string;
+        };
+        '&[type="checkbox"]:checked': {
+            backgroundRepeat: string;
+            backgroundPosition: string;
+            backgroundSize: string;
+            backgroundColor: string;
+            border: string;
+            backgroundImage: string;
+            '&[readonly], &:disabled': {
+                backgroundImage: string;
+            };
+        };
+        '&[type="radio"]': {
+            appearance: string;
+            height: string;
+            width: string;
+            border: string;
+            backgroundImage: string;
+        };
+        '&[type="radio"]:checked': {
+            backgroundImage: string;
+        };
+    };
+    error: {
+        '&[type="text"]': {
+            borderColor: string;
+        };
+    };
+    success: {
+        '&[type="text"]': {
+            borderColor: string;
+        };
+    };
+};

package/tokens/label.d.ts

@@ -0,0 +1,18 @@
+export declare const label: {
+    default: {};
+    variants: {
+        default: {};
+        text: {
+            '&:hover': {};
+            '&:disabled': {};
+            primary: {
+                '&:hover': {};
+                '&:disabled': {};
+            };
+            error: {
+                '&:hover': {};
+                '&:disabled': {};
+            };
+        };
+    };
+};

package/tokens/link.d.ts

@@ -0,0 +1,64 @@
+import { Cursors } from '../components/core/types/cursors.types';
+export declare const link: {
+    default: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+        position: string;
+        '&:visited': {
+            color: string;
+            '&::after': {
+                borderBottom: string;
+            };
+        };
+        '&:focus, &:active, &:focus-visible': {
+            outline: string;
+        };
+        "&.Link--disabled": {
+            color: string;
+            cursor: Cursors;
+            textDecoration: string;
+            backgroundColor: string;
+            '&::after': {
+                borderBottomColor: string;
+            };
+        };
+    };
+    primary: {
+        '&::after': {
+            content: string;
+            position: string;
+            right: string;
+            bottom: string;
+            left: string;
+            borderBottom: string;
+        };
+        '&:hover': {
+            backgroundColor: string;
+            '&::after': {
+                borderBottomColor: string;
+            };
+        };
+    };
+    secondary: {
+        '&::after': {
+            content: string;
+            position: string;
+            right: string;
+            bottom: string;
+            left: string;
+            borderBottom: string;
+        };
+        '&:hover': {
+            backgroundColor: string;
+            '&::after': {
+                borderBottomColor: string;
+            };
+        };
+    };
+    inherit: {
+        color: string;
+    };
+};

package/tokens/list.d.ts

@@ -0,0 +1,76 @@
+export declare const list: {
+    wrapper: {
+        base: {
+            listStyle: string;
+            padding: string;
+            margin: string;
+        };
+        "ordered-circle": {
+            counterReset: string;
+            paddingLeft: string;
+        };
+        "ordered-square": {
+            counterReset: string;
+            paddingLeft: string;
+        };
+    };
+    item: {
+        base: {
+            display: string;
+            alignItems: string;
+            flexDirection: string;
+            margin: string;
+        };
+        "ordered-circle": {
+            '&::before': {
+                content: string;
+                counterIncrement: string;
+                background: string;
+                fontFamily: string;
+                fontSize: string;
+                fontWeight: number;
+                width: string;
+                height: string;
+                color: string;
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                marginRight: string;
+                borderRadius: string;
+            };
+        };
+        "ordered-square": {
+            '&::before': {
+                content: string;
+                counterIncrement: string;
+                background: string;
+                fontFamily: string;
+                fontSize: string;
+                fontWeight: number;
+                width: string;
+                height: string;
+                color: string;
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                marginRight: string;
+            };
+        };
+        "unordered-check": {
+            counterReset: string;
+            paddingLeft: string;
+            "& .List__bulletPoint": {
+                marginRight: string;
+                color: string;
+            };
+        };
+        "unordered-dot": {
+            counterReset: string;
+            paddingLeft: string;
+            "& .List__bulletPoint": {
+                marginRight: string;
+                color: string;
+            };
+        };
+    };
+};

package/tokens/loader.d.ts

@@ -0,0 +1,42 @@
+export declare const loader: {
+    default: {
+        border: string;
+        borderTop: string;
+        borderRadius: string;
+    };
+    xs: {
+        borderWidth: string;
+        width: string;
+        height: string;
+        minWidth: string;
+        minHeight: string;
+    };
+    sm: {
+        borderWidth: string;
+        width: string;
+        height: string;
+        maxWidth: string;
+        maxHeight: string;
+    };
+    md: {
+        borderWidth: string;
+        width: string;
+        height: string;
+        maxWidth: string;
+        maxHeight: string;
+    };
+    lg: {
+        borderWidth: string;
+        width: string;
+        height: string;
+        maxWidth: string;
+        maxHeight: string;
+    };
+    xl: {
+        borderWidth: string;
+        width: string;
+        height: string;
+        maxWidth: string;
+        maxHeight: string;
+    };
+};

package/tokens/modal.d.ts

@@ -0,0 +1,59 @@
+export declare const BORDER_COLOR = "#e0e0e0";
+export declare const modal: {
+    header: {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        padding: string;
+        fontSize: string;
+        fontWeight: string;
+        borderBottom: string;
+    };
+    title: {
+        display: string;
+        alignItems: string;
+        padding: string;
+        margin: string;
+    };
+    body: {
+        padding: string;
+        fontSize: string;
+        color: string;
+    };
+    content: {
+        background: string;
+        padding: string;
+        borderRadius: string;
+        maxWidth: string;
+        width: string;
+        boxShadow: string;
+        position: string;
+        display: string;
+        flexDirection: string;
+    };
+    footer: {
+        display: string;
+        justifyContent: string;
+        gap: string;
+        padding: string;
+        borderTop: string;
+    };
+    closeButton: {
+        background: string;
+        border: string;
+        cursor: string;
+        padding: string;
+    };
+    overlay: {
+        position: string;
+        top: number;
+        left: number;
+        width: string;
+        height: string;
+        background: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        zIndex: number;
+    };
+};

package/tokens/radius.d.ts

@@ -0,0 +1,10 @@
+export declare const radius: {
+    default: string;
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    round: string;
+};

package/tokens/reset.d.ts

@@ -0,0 +1 @@
+export declare const reset: {};

package/tokens/row.d.ts

@@ -0,0 +1,5 @@
+export declare const row: {
+    default: {
+        display: string;
+    };
+};

package/tokens/shadow.d.ts

@@ -0,0 +1,10 @@
+export declare const DEFAULT_SHADOW: string;
+export declare const shadows: {
+    modal: {
+        default: string;
+        content: string;
+    };
+    snackbar: {
+        default: string;
+    };
+};

package/tokens/skeleton.d.ts

@@ -0,0 +1,24 @@
+export declare const skeleton: {
+    default: {
+        display: string;
+        position: string;
+        backgroundColor: string;
+        alignItems: string;
+        justifyContent: string;
+        width: string;
+        height: string;
+        overflow: string;
+        '&:empty::before': {
+            content: string;
+        };
+    };
+    rounded: {
+        borderRadius: string;
+    };
+    rectangular: {
+        borderRadius: string;
+    };
+    circular: {
+        borderRadius: string;
+    };
+};

package/tokens/snackbar.d.ts

@@ -0,0 +1,198 @@
+export declare const DEFAULT_SNACKBAR_WIDTH = "302px";
+export declare const snackbar: {
+    zIndex: number;
+    backgroundColor: {
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+    };
+    spacing: {
+        body: string;
+    };
+    closeIcon: {
+        name: string;
+        width: number;
+        height: number;
+    };
+    container: {
+        position: string;
+        display: string;
+        flexDirection: string;
+        gap: string;
+        padding: string;
+        boxSizing: string;
+        maxHeight: string;
+        overflowY: string;
+        overflowX: string;
+        scrollbarWidth: string;
+        scrollbarColor: string;
+        zIndex: number;
+        '&::-webkit-scrollbar': {
+            width: string;
+            background: string;
+        };
+        '&::-webkit-scrollbar-thumb': {
+            background: string;
+            borderRadius: string;
+        };
+        '&::-webkit-scrollbar-track': {
+            background: string;
+        };
+        '&:hover::-webkit-scrollbar-thumb': {
+            background: string;
+        };
+        '&.scrolling::-webkit-scrollbar-thumb': {
+            background: string;
+        };
+    };
+    snackbar: {
+        base: {
+            position: "relative";
+            boxShadow: string;
+            width: string;
+            fontFamily: "\"Fira Sans\", sans-serif";
+            fontSize: string;
+            display: "flex";
+            flexDirection: "column";
+            gap: string;
+            color: string;
+            '& .content': {
+                display: "flex";
+                alignItems: "flex-start";
+                gap: string;
+            };
+            '& .title': {
+                fontWeight: number;
+                margin: number;
+            };
+            '& .description': {
+                fontWeight: number;
+                margin: number;
+                color: string;
+            };
+            '& .actions': {
+                display: "flex";
+                justifyContent: "flex-start";
+                gap: string;
+                paddingTop: string;
+                marginLeft: string;
+            };
+        };
+        background: {
+            default: string;
+            variants: {
+                success: string;
+                error: string;
+                warning: string;
+                info: string;
+            };
+        };
+        spacing: {
+            body: string;
+        };
+        animation: {
+            duration: string;
+            timing: "ease-out";
+        };
+        content: {
+            display: "flex";
+            alignItems: "flex-start";
+            gap: string;
+        };
+        title: {
+            fontWeight: number;
+            margin: number;
+        };
+        description: {
+            fontWeight: number;
+            margin: number;
+            color: string;
+        };
+        actions: {
+            display: "flex";
+            justifyContent: "flex-start";
+            gap: string;
+            paddingTop: string;
+            marginLeft: string;
+        };
+    };
+    scrollbar: {
+        width: string;
+        background: string;
+        thumb: {
+            background: string;
+            borderRadius: string;
+        };
+        track: {
+            background: string;
+        };
+        hoverThumb: {
+            background: string;
+        };
+        scrollingThumb: {
+            background: string;
+        };
+    };
+    positions: {
+        "top-left": {
+            top: number;
+            left: number;
+            alignItems: string;
+        };
+        "top-center": {
+            top: string;
+            left: string;
+            transform: string;
+            alignItems: string;
+        };
+        "top-right": {
+            top: string;
+            right: string;
+            alignItems: string;
+        };
+        "bottom-left": {
+            bottom: string;
+            left: string;
+            alignItems: string;
+            flexDirection: string;
+        };
+        "bottom-center": {
+            bottom: string;
+            left: string;
+            transform: string;
+            alignItems: string;
+            flexDirection: string;
+        };
+        "bottom-right": {
+            bottom: string;
+            right: string;
+            alignItems: string;
+            flexDirection: string;
+        };
+    };
+    defaultPosition: {
+        bottom: string;
+        right: string;
+        alignItems: string;
+        flexDirection: string;
+    };
+    actionButton: {
+        base: {
+            padding: string;
+            borderRadius: string;
+            cursor: string;
+            fontSize: string;
+            transition: "background 0.2s";
+        };
+    };
+    closeButton: {
+        position: "absolute";
+        top: string;
+        right: string;
+        background: string;
+        border: string;
+        cursor: string;
+        padding: string;
+    };
+};

package/tokens/spacing.d.ts

@@ -0,0 +1,9 @@
+export declare const spacing: {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+};

package/tokens/stepper.d.ts

@@ -0,0 +1,110 @@
+import { Cursors } from '../components/core/types/cursors.types';
+export declare const stepper: {
+    default: {
+        display: string;
+        flexDirection: string;
+        justifyContent: string;
+        width: string;
+    };
+    separator: {
+        default: {
+            width: string;
+            position: string;
+            zIndex: number;
+            top: string;
+            marginLeft: string;
+            marginRight: string;
+            transition: string;
+            borderTop: string;
+        };
+        active: {};
+        complete: {
+            borderTopColor: string;
+        };
+        inactive: {};
+    };
+    step: {
+        default: {
+            display: string;
+            flexDirection: string;
+            alignItems: string;
+            justifyContent: string;
+            minWidth: string;
+        };
+        active: {};
+        inactive: {};
+        complete: {
+            cursor: Cursors;
+        };
+    };
+    stepIcon: {
+        default: {
+            width: number;
+            height: number;
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            borderRadius: string;
+            border: string;
+            fontSize: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: string;
+                marginTop: string;
+                marginBottom: string;
+            };
+            transition: string;
+            colors: string;
+        };
+        active: {
+            default: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            success: {};
+            error: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+        };
+        inactive: {
+            default: {
+                backgroundColor: string;
+            };
+            success: {};
+            error: {};
+        };
+        complete: {
+            default: {
+                fontWeight: number;
+                backgroundColor: string;
+            };
+            success: {};
+            error: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+        };
+        success: {
+            default: {};
+            success: {};
+            error: {};
+        };
+    };
+    stepLabel: {
+        default: {
+            marginTop: string;
+            fontSize: {
+                fontSize: string;
+                fontWeight: number;
+                lineHeight: string;
+            };
+            colors: string;
+        };
+        active: {};
+        inactive: {};
+        complete: {};
+        error: {};
+        success: {};
+    };
+};