gd-design-library 0.7.0 → 0.7.2

package/tokens/button.d.ts

@@ -1,155 +0,0 @@
-export declare const button: {
-    default: {
-        border: number;
-        outline: number;
-        padding: string;
-        display: string;
-        alignItems: string;
-        gap: string;
-        transition: any;
-        cursor: string;
-        '&:focus-visible': {
-            position: string;
-            '&::after': {
-                content: string;
-                position: string;
-                top: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
-                right: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
-                bottom: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
-                left: `${number}px` | `${number}rem` | `${number}%` | `${number}em`;
-                border: string;
-                borderRadius: `${number}px` | `${number}rem` | `${number}%` | `${number}em` | undefined;
-            };
-        };
-        '&:disabled, &:disabled *': {
-            cursor: string;
-            color: any;
-        };
-    };
-    icon: {
-        padding: string;
-        '& span': {
-            display: string;
-            justifyContent: string;
-            alignItems: string;
-        };
-    };
-    content: {
-        default: {
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            width: string;
-            minWidth: string;
-        };
-    };
-    fullWidth: {
-        width: string;
-    };
-    startIcon: {
-        default: {};
-    };
-    endIcon: {
-        default: {};
-    };
-    contained: {
-        primary: {
-            border: string;
-            background: any;
-            color: any;
-            '&:hover': {
-                background: any;
-                border: string;
-            };
-            '&:disabled': {
-                background: any;
-                border: string;
-            };
-        };
-        secondary: {
-            border: string;
-            color: any;
-            background: any;
-            '&:hover': {
-                background: any;
-                border: string;
-            };
-            '&:disabled': {
-                border: string;
-                background: any;
-            };
-        };
-    };
-    outlined: {
-        primary: {
-            border: string;
-            background: any;
-            color: any;
-            '&:hover': {
-                background: any;
-            };
-            '&:disabled': {
-                background: any;
-                color: any;
-                border: string;
-            };
-        };
-        secondary: {
-            color: any;
-            border: string;
-            background: any;
-            '&:hover': {
-                background: any;
-                border: string;
-            };
-            '&:disabled': {
-                background: any;
-                border: string;
-            };
-        };
-    };
-    text: {
-        primary: {
-            background: any;
-            border: string;
-            color: any;
-            '&:not(:disabled):hover': {
-                border: string;
-                background: any;
-            };
-            '&:disabled': {
-                background: any;
-            };
-        };
-        secondary: {
-            background: any;
-            border: string;
-            color: any;
-            '&:not(:disabled):hover': {
-                textDecoration: string;
-            };
-            '&:disabled': {
-                background: any;
-            };
-        };
-    };
-    inherit: {
-        primary: {
-            backgroundColor: string;
-            padding: string;
-            '&:hover': {
-                background: any;
-            };
-            '&:disabled': {
-                background: string;
-            };
-        };
-        secondary: {
-            padding: string;
-            backgroundColor: string;
-            '&:not(:disabled):hover': {
-                background: string;
-            };
-        };
-    };
-};

package/tokens/button.js

@@ -1,200 +0,0 @@
-import { borders as o } from "./borders.js";
-import { colors as r } from "./colors.js";
-import { spacing as l } from "./spacing.js";
-import { cursors as c } from "./cursors.js";
-import { flexAlignItems as a, display as b } from "./display.js";
-import { values as d } from "./values.js";
-import { getFocusStyles as g } from "./utils.js";
-import { get as e } from "../utils/helpers.js";
-import { ButtonVariant as t, ButtonColorVariant as i } from "../types/button.js";
-import { SizeVariant as n } from "../types/common.js";
-const x = {
-  default: {
-    border: o.none,
-    outline: o.none,
-    padding: `${l[n.Sm]} ${l[n.Lg]}`,
-    display: b.flex,
-    alignItems: a.center,
-    gap: l[n.Sm],
-    transition: e(d, "transitions.button.default"),
-    cursor: c.pointer,
-    "&:focus-visible": g({
-      inset: "-6px"
-    }),
-    "&:disabled, &:disabled *": {
-      cursor: c.default,
-      color: e(r, "text.disabled")
-    }
-  },
-  icon: {
-    padding: l[n.Sm],
-    "& span": {
-      display: b.flex,
-      justifyContent: a.center,
-      alignItems: a.center
-    }
-  },
-  content: {
-    default: {
-      display: b.flex,
-      alignItems: a.center,
-      justifyContent: a.center,
-      width: "100%",
-      minWidth: "0"
-    }
-  },
-  fullWidth: {
-    width: "100%"
-  },
-  startIcon: {
-    default: {}
-  },
-  endIcon: {
-    default: {}
-  },
-  [t.Contained]: {
-    [i.Primary]: {
-      border: o.generic({
-        width: d.borderMedium,
-        color: e(r, "bg.fill.primary.default")
-      }),
-      background: e(r, "bg.fill.primary.default"),
-      color: e(r, "text.active"),
-      "&:hover": {
-        background: e(r, "bg.fill.primary.hover"),
-        border: o.generic({
-          width: d.borderMedium,
-          color: e(r, "bg.fill.primary.hover")
-        })
-      },
-      "&:disabled": {
-        background: e(r, "bg.fill.disabled"),
-        border: o.generic({
-          width: d.borderMedium,
-          color: e(r, "bg.fill.disabled")
-        })
-      }
-    },
-    [i.Secondary]: {
-      border: o.generic({
-        width: d.borderMedium,
-        color: e(r, "bg.fill.error.primary.default")
-      }),
-      color: e(r, "neutral.white"),
-      background: e(r, "bg.fill.error.primary.default"),
-      "&:hover": {
-        background: e(r, "bg.fill.error.primary.hover"),
-        border: o.generic({
-          width: d.borderMedium,
-          color: e(r, "bg.fill.error.primary.hover")
-        })
-      },
-      "&:disabled": {
-        border: o.generic({
-          width: d.borderMedium,
-          color: e(r, "bg.fill.disabled")
-        }),
-        background: e(r, "bg.fill.disabled")
-      }
-    }
-  },
-  [t.Outlined]: {
-    [i.Primary]: {
-      border: o.generic({
-        width: d.borderMedium,
-        color: e(r, "border.secondary.default")
-      }),
-      background: e(r, "bg.fill.secondary.default"),
-      color: e(r, "text.active"),
-      "&:hover": {
-        background: e(r, "bg.fill.secondary.hover")
-      },
-      "&:disabled": {
-        background: e(r, "bg.fill.secondary.default"),
-        color: e(r, "bg.fill.secondary.default"),
-        border: o.generic({
-          width: d.borderMedium,
-          color: e(r, "border.default")
-        })
-      }
-    },
-    [i.Secondary]: {
-      color: e(r, "text.error"),
-      border: o.generic({
-        width: d.borderMedium,
-        color: e(r, "bg.fill.error.secondary.default")
-      }),
-      background: e(r, "bg.fill.error.secondary.default"),
-      "&:hover": {
-        background: e(r, "bg.fill.error.secondary.hover"),
-        border: o.generic({
-          width: d.borderMedium,
-          color: e(r, "bg.fill.error.secondary.hover")
-        })
-      },
-      "&:disabled": {
-        background: e(r, "bg.fill.disabled"),
-        border: o.generic({
-          width: d.borderMedium,
-          color: e(r, "bg.fill.disabled")
-        })
-      }
-    }
-  },
-  [t.Text]: {
-    [i.Primary]: {
-      background: e(r, "bg.fill.secondary.default"),
-      border: o.generic({
-        width: d.borderMedium,
-        color: e(r, "bg.fill.secondary.default")
-      }),
-      color: e(r, "text.active"),
-      "&:not(:disabled):hover": {
-        border: o.generic({
-          width: d.borderMedium,
-          color: e(r, "bg.fill.secondary.hover")
-        }),
-        background: e(r, "bg.fill.secondary.hover")
-      },
-      "&:disabled": {
-        background: e(r, "bg.fill.secondary.default")
-      }
-    },
-    [i.Secondary]: {
-      background: e(r, "bg.fill.secondary.default"),
-      border: o.generic({
-        width: d.borderMedium,
-        color: e(r, "bg.fill.secondary.default")
-      }),
-      color: e(r, "text.active"),
-      "&:not(:disabled):hover": {
-        textDecoration: "underline"
-      },
-      "&:disabled": {
-        background: e(r, "bg.fill.secondary.default")
-      }
-    }
-  },
-  [t.Inherit]: {
-    [i.Primary]: {
-      backgroundColor: r.bg.fill.primary.default,
-      padding: l.xs,
-      "&:hover": {
-        background: e(r, "bg.fill.primary.hover")
-      },
-      "&:disabled": {
-        background: r.bg.fill.disabled
-      }
-    },
-    [i.Secondary]: {
-      padding: l.xs,
-      backgroundColor: r.transparent,
-      "&:not(:disabled):hover": {
-        background: r.bg.fill.secondary.hover
-      }
-    }
-  }
-};
-export {
-  x as button
-};

package/tokens/card.d.ts

@@ -1,175 +0,0 @@
-import { FlexDirection } from '../types';
-export declare const card: {
-    default: {
-        display: string;
-        '&:focus-visible': {
-            outline: string;
-            '&:hover': {
-                boxShadow: string;
-            };
-        };
-    };
-    Vertical: {
-        default: {
-            flexDirection: FlexDirection;
-            '&:hover': {
-                boxShadow: string;
-            };
-        };
-        bordered: {
-            border: string;
-        };
-        highlighted: {
-            '&:not(:focus-visible):hover': {
-                boxShadow: string;
-                outline: string;
-            };
-        };
-    };
-    Horizontal: {
-        default: {
-            flexDirection: FlexDirection;
-            '&:hover': {
-                boxShadow: string;
-            };
-        };
-        bordered: {
-            border: string;
-        };
-        highlighted: {
-            '&:not(:focus-visible):hover': {
-                boxShadow: string;
-                outline: string;
-            };
-        };
-    };
-    title: {
-        default: {
-            margin: number;
-            padding: number;
-        };
-        Vertical: {
-            default: {};
-            sm: {};
-        };
-        Horizontal: {
-            default: {};
-            sm: {};
-        };
-    };
-    description: {
-        default: {
-            margin: number;
-            padding: number;
-        };
-        Vertical: {
-            default: {};
-            sm: {};
-        };
-        Horizontal: {
-            default: {};
-            sm: {};
-        };
-    };
-    rating: {
-        default: {
-            display: string;
-            alignItems: string;
-            gap: string;
-        };
-        Vertical: {
-            default: {
-                fontSize: string;
-                fontWeight: number;
-                lineHeight: string;
-                color: string;
-            };
-            sm: {
-                fontSize: string;
-                fontWeight: number;
-                lineHeight: string;
-                color: string;
-                flexDirection: FlexDirection;
-            };
-        };
-        Horizontal: {
-            default: {
-                fontSize: string;
-                fontWeight: number;
-                lineHeight: string;
-                color: string;
-            };
-            sm: {
-                fontSize: string;
-                fontWeight: number;
-                lineHeight: string;
-                color: string;
-                flexDirection: FlexDirection;
-            };
-        };
-    };
-    button: {
-        default: {
-            display: string;
-        };
-        Vertical: {
-            default: {};
-            sm: {};
-        };
-        Horizontal: {
-            default: {};
-            sm: {};
-        };
-    };
-    image: {
-        default: {};
-        Vertical: {
-            default: {};
-            sm: {};
-        };
-        Horizontal: {
-            default: {};
-            sm: {};
-        };
-    };
-    counter: {
-        default: {};
-        Vertical: {
-            default: {};
-            sm: {};
-        };
-        Horizontal: {
-            default: {};
-            sm: {};
-        };
-    };
-    price: {
-        default: {
-            display: string;
-        };
-        Vertical: {
-            default: {};
-            sm: {
-                '& > div > *': {
-                    fontWeight: number;
-                    fontSize: string;
-                    lineHeight: string;
-                    marginTop: string;
-                    marginBottom: string;
-                };
-            };
-        };
-        Horizontal: {
-            default: {};
-            sm: {
-                '& > div > *': {
-                    fontWeight: number;
-                    fontSize: string;
-                    lineHeight: string;
-                    marginTop: string;
-                    marginBottom: string;
-                };
-            };
-        };
-    };
-};

package/tokens/card.js

@@ -1,187 +0,0 @@
-import { font as m } from "./font.js";
-import { typography as r } from "./typography.js";
-import { values as d } from "./values.js";
-import { borders as f } from "./borders.js";
-import { display as l, flexAlignItems as h } from "./display.js";
-import { colors as e } from "./colors.js";
-import { shadows as s } from "./shadow.js";
-import { spacing as a } from "./spacing.js";
-import { CardVariant as t, CardSizeVariant as o } from "../types/card.js";
-import { FlexDirection as n } from "../types/layout.js";
-import { TypographyVariant as i } from "../types/typography.js";
-import { SizeVariant as g } from "../types/common.js";
-const c = {
-  border: f.generic({
-    width: d.borderThin,
-    color: e.border.default
-  })
-}, u = {
-  "&:not(:focus-visible):hover": {
-    boxShadow: "none",
-    outline: f.generic({
-      width: d.borderThin,
-      color: e.primary.default
-    })
-  }
-}, p = {
-  boxShadow: s.card.default
-}, I = {
-  default: {
-    display: l.flex,
-    "&:focus-visible": {
-      outline: f.generic({
-        width: d.borderMedium,
-        color: e.border.focus
-      }),
-      "&:hover": {
-        boxShadow: "none"
-      }
-    }
-  },
-  [t.Vertical]: {
-    default: {
-      flexDirection: n.Column,
-      "&:hover": {
-        ...p
-      }
-    },
-    bordered: {
-      ...c
-    },
-    highlighted: {
-      ...u
-    }
-  },
-  [t.Horizontal]: {
-    default: {
-      flexDirection: n.Row,
-      "&:hover": {
-        ...p
-      }
-    },
-    bordered: {
-      ...c
-    },
-    highlighted: {
-      ...u
-    }
-  },
-  title: {
-    default: {
-      margin: a.none,
-      padding: a.none
-    },
-    [t.Vertical]: {
-      [o.Default]: {},
-      [o.Sm]: {}
-    },
-    [t.Horizontal]: {
-      [o.Default]: {},
-      [o.Sm]: {}
-    }
-  },
-  description: {
-    default: {
-      margin: a.none,
-      padding: a.none
-    },
-    [t.Vertical]: {
-      [o.Default]: {},
-      [o.Sm]: {}
-    },
-    [t.Horizontal]: {
-      [o.Default]: {},
-      [o.Sm]: {}
-    }
-  },
-  rating: {
-    default: {
-      display: l.flex,
-      alignItems: h.start,
-      gap: a[g.Sm]
-    },
-    [t.Vertical]: {
-      [o.Default]: {
-        color: e.text.caption,
-        ...r[i.Caption]
-      },
-      [o.Sm]: {
-        color: e.text.caption,
-        flexDirection: n.Column,
-        ...r[i.Caption]
-      }
-    },
-    [t.Horizontal]: {
-      [o.Default]: {
-        color: e.text.caption,
-        ...r[i.Caption]
-      },
-      [o.Sm]: {
-        color: e.text.caption,
-        flexDirection: n.Column,
-        ...r[i.Caption]
-      }
-    }
-  },
-  button: {
-    default: {
-      display: l.flex
-    },
-    [t.Vertical]: {
-      [o.Default]: {},
-      [o.Sm]: {}
-    },
-    [t.Horizontal]: {
-      [o.Default]: {},
-      [o.Sm]: {}
-    }
-  },
-  image: {
-    default: {},
-    [t.Vertical]: {
-      [o.Default]: {},
-      [o.Sm]: {}
-    },
-    [t.Horizontal]: {
-      [o.Default]: {},
-      [o.Sm]: {}
-    }
-  },
-  counter: {
-    default: {},
-    [t.Vertical]: {
-      [o.Default]: {},
-      [o.Sm]: {}
-    },
-    [t.Horizontal]: {
-      [o.Default]: {},
-      [o.Sm]: {}
-    }
-  },
-  price: {
-    default: {
-      display: l.flex
-    },
-    [t.Vertical]: {
-      [o.Default]: {},
-      [o.Sm]: {
-        "& > div > *": {
-          ...r[i.H6],
-          fontWeight: m.weight.medium
-        }
-      }
-    },
-    [t.Horizontal]: {
-      [o.Default]: {},
-      [o.Sm]: {
-        "& > div > *": {
-          ...r[i.H6],
-          fontWeight: m.weight.medium
-        }
-      }
-    }
-  }
-};
-export {
-  I as card
-};