gd-design-library 0.0.1

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "gd-design-library",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "devDependencies": {
+  }
+}

package/style.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:Fira Sans,sans-serif;line-height:1.6}ol,ul{list-style:none}table{border-collapse:collapse}img{max-width:100%;height:auto;display:block}a{text-decoration:none;color:inherit}

package/tokens/animations.d.ts

@@ -0,0 +1,41 @@
+export declare const animations: {
+    spinKeyframes: {
+        '0%': {
+            transform: string;
+        };
+        '100%': {
+            transform: string;
+        };
+    };
+    slideIn: {
+        '0%': {
+            transform: string;
+            opacity: number;
+        };
+        '100%': {
+            transform: string;
+            opacity: number;
+        };
+    };
+    slideOut: {
+        '0%': {
+            transform: string;
+            opacity: number;
+        };
+        '100%': {
+            transform: string;
+            opacity: number;
+        };
+    };
+    blinkKeyframes: {
+        '0%': {
+            opacity: number;
+        };
+        '50%': {
+            opacity: number;
+        };
+        '100%': {
+            opacity: number;
+        };
+    };
+};

package/tokens/borders.d.ts

@@ -0,0 +1,8 @@
+export declare const borders: {
+    none: string;
+    generic: ({ width, color, type }: {
+        width: string;
+        color?: string;
+        type?: string;
+    }) => string;
+};

package/tokens/breadcrumbs.d.ts

@@ -0,0 +1,23 @@
+export declare const breadcrumbs: {
+    wrapper: {
+        display: string;
+        alignItems: string;
+        gap: number;
+    };
+    bordered: {
+        padding: string;
+        border: string;
+    };
+    itemStart: {
+        color: string;
+    };
+    itemEnd: {
+        color: string;
+    };
+    item: {};
+    separator: {
+        display: string;
+        alignItems: string;
+        color: string;
+    };
+};

package/tokens/button.d.ts

@@ -0,0 +1,109 @@
+export declare const button: {
+    default: {
+        border: string;
+        outline: string;
+        padding: string;
+        display: string;
+        alignItems: string;
+        gap: string;
+        transition: string;
+        cursor: string;
+        '&:focus-visible': {
+            position: string;
+            '&::after': {
+                content: string;
+                position: string;
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+                border: string;
+            };
+        };
+        '&:disabled, &:disabled *': {
+            cursor: string;
+            color: string;
+        };
+    };
+    icon: {
+        padding: string;
+    };
+    content: {};
+    startIcon: {};
+    endIcon: {};
+    contained: {
+        primary: {
+            background: string;
+            color: string;
+            '&:hover': {
+                background: string;
+            };
+            '&:disabled': {
+                background: string;
+            };
+        };
+        secondary: {
+            color: string;
+            background: string;
+            '&:hover': {
+                background: string;
+            };
+            '&:disabled': {
+                background: string;
+            };
+        };
+    };
+    outlined: {
+        primary: {
+            border: string;
+            background: string;
+            color: string;
+            '&:hover': {
+                background: string;
+            };
+            '&:disabled': {
+                background: string;
+            };
+        };
+        secondary: {
+            color: string;
+            background: string;
+            '&:hover': {
+                background: string;
+            };
+            '&:disabled': {
+                background: string;
+            };
+        };
+    };
+    text: {
+        primary: {
+            background: string;
+            color: string;
+            '&:hover': {
+                background: string;
+            };
+            '&:disabled': {
+                background: string;
+            };
+        };
+        secondary: {
+            background: string;
+            color: string;
+            '&:not(:disabled):hover': {
+                textDecoration: string;
+            };
+            '&:disabled': {
+                background: string;
+            };
+        };
+    };
+    inherit: {
+        primary: {
+            padding: string;
+        };
+        secondary: {
+            padding: string;
+        };
+    };
+};

package/tokens/colors.d.ts

@@ -0,0 +1,150 @@
+export declare const colors: {
+    transparent: string;
+    primary: {
+        default: string;
+        'default.80': string;
+        'default.10': string;
+    };
+    secondary: {
+        default: string;
+        'default.80': string;
+        'default.10': string;
+    };
+    neutral: {
+        white: string;
+        black: string;
+        'grey.100': string;
+        'grey.90': string;
+        'grey.80': string;
+        'grey.40': string;
+        'grey.30': string;
+        'grey.10': string;
+    };
+    status: {
+        red: string;
+        'red.80': string;
+        'red.20': string;
+        'red.10': string;
+        green: string;
+        'green.80': string;
+        'green.20': string;
+        'green.10': string;
+        blue: string;
+        'blue.80': string;
+        'blue.20': string;
+        'blue.10': string;
+        orange: string;
+        'orange.80': string;
+        'orange.20': string;
+        'orange.10': string;
+    };
+    bg: {
+        default: string;
+        surface: string;
+        input: {
+            default: string;
+            disabled: string;
+        };
+        fill: {
+            disabled: string;
+            primary: {
+                default: string;
+                hover: string;
+            };
+            secondary: {
+                default: string;
+                hover: string;
+            };
+            error: {
+                primary: {
+                    default: string;
+                    hover: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                };
+            };
+            success: {
+                primary: {
+                    default: string;
+                    hover: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                };
+            };
+            warning: {
+                primary: {
+                    default: string;
+                    hover: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                };
+            };
+            info: {
+                primary: {
+                    default: string;
+                    hover: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                };
+            };
+        };
+        toast: {
+            success: string;
+            error: string;
+            warning: string;
+            info: string;
+        };
+    };
+    border: {
+        primary: {
+            default: string;
+            hover: string;
+        };
+        secondary: {
+            default: string;
+            disabled: string;
+            hover: string;
+        };
+        error: string;
+        success: string;
+        info: string;
+        warning: string;
+        default: string;
+        focus: string;
+    };
+    text: {
+        default: string;
+        active: string;
+        disabled: string;
+        title: string;
+        caption: string;
+        error: string;
+        success: string;
+        info: string;
+        link: string;
+        warning: string;
+        primary: {
+            default: string;
+            hover: string;
+        };
+    };
+    icon: {
+        primary: {
+            default: string;
+            active: string;
+            disabled: string;
+        };
+        success: string;
+        info: string;
+        warning: string;
+        error: string;
+    };
+};

package/tokens/column.d.ts

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

package/tokens/cursors.d.ts

@@ -0,0 +1,16 @@
+export declare const cursors: {
+    default: string;
+    pointer: string;
+    text: string;
+    move: string;
+    wait: string;
+    crosshair: string;
+    notAllowed: string;
+    grab: string;
+    grabbing: string;
+    help: string;
+    progress: string;
+    alias: string;
+    zoomIn: string;
+    zoomOut: string;
+};