gd-design-library 0.7.0 → 0.7.2

package/tokens/switch.js

@@ -1,75 +0,0 @@
-import { getSpacing as i } from "./utils.js";
-import { colors as o } from "./colors.js";
-import { display as r } from "./display.js";
-import { cursors as t } from "./cursors.js";
-import { LabelPosition as e } from "../types/label.js";
-const s = {
-  default: {
-    position: "relative",
-    display: r.inlineBlock,
-    width: "45px",
-    height: "24px",
-    flexShrink: 0,
-    borderRadius: "20px"
-  },
-  label: {
-    [e.Right]: {
-      order: 1
-    }
-  },
-  wrapper: {
-    default: {
-      display: "inline-flex",
-      gap: i(2),
-      justifyContent: "center",
-      cursor: t.pointer
-    },
-    disabled: {
-      cursor: t.default,
-      opacity: "50%"
-    }
-  },
-  slider: {
-    default: {
-      position: "absolute",
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0,
-      transition: "0.2s",
-      backgroundColor: o.bg.fill.disabled,
-      borderRadius: "inherit",
-      "&::before": {
-        position: "absolute",
-        content: '""',
-        borderRadius: "50%",
-        width: "18px",
-        height: "18px",
-        left: "3px",
-        bottom: "3px",
-        transition: "0.2s",
-        backgroundColor: o.neutral.white
-      }
-    },
-    checked: {
-      backgroundColor: o.primary.default,
-      "&::before": {
-        transform: "translateX(21px)"
-      }
-    }
-  },
-  checkbox: {
-    border: 0,
-    clip: "rect(0 0 0 0)",
-    height: "1px",
-    margin: "-1px",
-    overflow: "hidden",
-    padding: 0,
-    position: "absolute",
-    whiteSpace: "nowrap",
-    width: "1px"
-  }
-};
-export {
-  s as switchToken
-};

package/tokens/tabs.d.ts

@@ -1,88 +0,0 @@
-export declare const tabs: {
-    default: {
-        display: string;
-        flexDirection: string;
-        width: string;
-    };
-    header: {
-        default: {
-            display: string;
-            flexDirection: string;
-            position: string;
-            overflow: string;
-            '&::after': {
-                content: string;
-                position: string;
-                width: string;
-                bottom: number;
-                zIndex: number;
-                borderBottom: string;
-            };
-        };
-    };
-    label: {
-        default: {
-            fontWeight: any;
-            fontSize: any;
-            color: any;
-            transition: string;
-            borderBottom: string;
-            whiteSpace: string;
-            flex: number;
-            '&:hover': {
-                ".Tabs__noticeCounter": {
-                    backgroundColor: any;
-                };
-            };
-        };
-        active: {
-            borderBottomColor: any;
-        };
-        disabled: {
-            default: {
-                '&:hover': {
-                    ".Tabs__noticeCounter": {
-                        backgroundColor: any;
-                    };
-                };
-                ".Tabs__noticeCounter": {
-                    color: string;
-                };
-                borderBottom: string;
-            };
-            active: {
-                borderBottomWidth: string;
-                borderBottomColor: any;
-            };
-        };
-    };
-    panelsWrapper: {
-        default: {};
-    };
-    panel: {
-        default: {};
-    };
-    noticeCounter: {
-        default: {
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            backgroundColor: any;
-            color: any;
-            fontWeight: any;
-            fontSize: any;
-            borderRadius: string;
-        };
-        active: {
-            backgroundColor: any;
-        };
-        disabled: {
-            backgroundColor: any;
-        };
-    };
-    tabButton: {
-        default: {
-            width: string;
-        };
-    };
-};

package/tokens/tabs.js

@@ -1,110 +0,0 @@
-import { icon as d } from "./icon.js";
-import { font as e } from "./font.js";
-import { colors as r } from "./colors.js";
-import { borders as i } from "./borders.js";
-import { radius as n } from "./radius.js";
-import { values as t } from "./values.js";
-import { get as o } from "../utils/helpers.js";
-import { SizeVariant as l } from "../types/common.js";
-import { TypographyVariant as a } from "../types/typography.js";
-const y = {
-  default: {
-    display: "flex",
-    flexDirection: "column",
-    width: "100%"
-  },
-  header: {
-    default: {
-      display: "flex",
-      flexDirection: "row",
-      position: "relative",
-      overflow: "auto",
-      "&::after": {
-        content: '""',
-        position: "absolute",
-        width: "100%",
-        bottom: 0,
-        zIndex: -100,
-        borderBottom: i.generic({
-          width: t.borderThin,
-          color: o(r, "border.default")
-        })
-      }
-    }
-  },
-  label: {
-    default: {
-      fontWeight: o(e, "weight.medium"),
-      fontSize: o(e, ["size", a.Body2]),
-      color: o(r, "text.default"),
-      transition: t.transitions.tabs.label,
-      borderBottom: i.generic({
-        width: t.borderMedium,
-        color: r.transparent
-      }),
-      whiteSpace: "nowrap",
-      flex: 1,
-      "&:hover": {
-        ".Tabs__noticeCounter": {
-          backgroundColor: o(r, "icon.primary.active")
-        }
-      }
-    },
-    active: {
-      borderBottomColor: o(r, "border.primary.default")
-    },
-    disabled: {
-      default: {
-        "&:hover": {
-          ".Tabs__noticeCounter": {
-            backgroundColor: o(r, "icon.primary.disabled")
-          }
-        },
-        ".Tabs__noticeCounter": {
-          color: r.neutral.white
-        },
-        borderBottom: i.generic({
-          width: t.borderThin,
-          color: o(r, "border.secondary.disabled")
-        })
-      },
-      active: {
-        borderBottomWidth: "2px",
-        borderBottomColor: o(r, "border.secondary.disabled")
-      }
-    }
-  },
-  panelsWrapper: {
-    default: {}
-  },
-  panel: {
-    default: {}
-  },
-  noticeCounter: {
-    default: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      backgroundColor: o(r, "icon.primary.default"),
-      color: o(r, "neutral.white"),
-      fontWeight: o(e, "weight.normal"),
-      fontSize: o(e, ["size", a.Caption]),
-      borderRadius: n.round,
-      ...o(d, ["size", l.Sm], {})
-    },
-    active: {
-      backgroundColor: o(r, "icon.primary.active")
-    },
-    disabled: {
-      backgroundColor: o(r, "icon.primary.disabled")
-    }
-  },
-  tabButton: {
-    default: {
-      width: "100%"
-    }
-  }
-};
-export {
-  y as tabs
-};

package/tokens/textarea.d.ts

@@ -1,44 +0,0 @@
-export declare const textarea: {
-    default: {
-        width: string;
-    };
-    outlined: {
-        primary: {
-            '&:hover': {};
-            '&:active': {};
-            '&:focus': {};
-            '&:disabled': {};
-            '&:read-only': {};
-        };
-        secondary: {
-            '&:hover': {};
-            '&:active': {};
-            '&:focus': {};
-            '&:disabled': {};
-            '&:read-only': {};
-        };
-        success: {
-            '&:hover': {};
-            '&:active': {};
-            '&:focus': {};
-            '&:disabled': {};
-            '&:read-only': {};
-        };
-        warning: {
-            '&:hover': {};
-            '&:active': {};
-            '&:focus': {};
-            '&:disabled': {};
-            '&:read-only': {};
-        };
-        error: {
-            '&:hover': {};
-            '&:active': {};
-            '&:focus': {};
-            '&:disabled': {};
-            '&:read-only': {};
-        };
-    };
-    contained: {};
-    text: {};
-};

package/tokens/textarea.js

@@ -1,47 +0,0 @@
-const e = {
-  default: {
-    width: "100%"
-  },
-  outlined: {
-    primary: {
-      "&:hover": {},
-      "&:active": {},
-      "&:focus": {},
-      "&:disabled": {},
-      "&:read-only": {}
-    },
-    secondary: {
-      "&:hover": {},
-      "&:active": {},
-      "&:focus": {},
-      "&:disabled": {},
-      "&:read-only": {}
-    },
-    success: {
-      "&:hover": {},
-      "&:active": {},
-      "&:focus": {},
-      "&:disabled": {},
-      "&:read-only": {}
-    },
-    warning: {
-      "&:hover": {},
-      "&:active": {},
-      "&:focus": {},
-      "&:disabled": {},
-      "&:read-only": {}
-    },
-    error: {
-      "&:hover": {},
-      "&:active": {},
-      "&:focus": {},
-      "&:disabled": {},
-      "&:read-only": {}
-    }
-  },
-  contained: {},
-  text: {}
-};
-export {
-  e as textarea
-};

package/tokens/toggle.d.ts

@@ -1,9 +0,0 @@
-export declare const switchToggle: {
-    default: {
-        display: string;
-        position: string;
-        padding: string;
-        border: string;
-    };
-    disabled: {};
-};

package/tokens/toggle.js

@@ -1,19 +0,0 @@
-import { display as o } from "./display.js";
-import { spacing as r } from "./spacing.js";
-import { colors as i } from "./colors.js";
-import { borders as e } from "./borders.js";
-import { SizeVariant as t } from "../types/common.js";
-const s = {
-  default: {
-    display: o.inlineFlex,
-    position: "relative",
-    padding: r[t.Xs],
-    border: e.generic({
-      color: i.border.default
-    })
-  },
-  disabled: {}
-};
-export {
-  s as switchToggle
-};

package/tokens/tooltip.d.ts

@@ -1,61 +0,0 @@
-export declare const tooltip: {
-    default: {
-        position: string;
-        display: string;
-        whiteSpace: string;
-        backgroundColor: string;
-        padding: string;
-        zIndex: number;
-        '&::after': {
-            position: string;
-            content: string;
-            border: string;
-        };
-        '&.tooltip-bottom': {
-            transform: string;
-            '&::after': {
-                top: number;
-                left: string;
-                borderLeftColor: string;
-                borderTopColor: string;
-                transform: string;
-            };
-        };
-        '&.tooltip-top': {
-            transform: string;
-            '&::after': {
-                bottom: number;
-                left: string;
-                borderRightColor: string;
-                borderBottomColor: string;
-                transform: string;
-            };
-        };
-        '&.tooltip-left': {
-            transform: string;
-            '&::after': {
-                right: number;
-                top: string;
-                borderRightColor: string;
-                borderTopColor: string;
-                transform: string;
-            };
-        };
-        '&.tooltip-right': {
-            transform: string;
-            '&::after': {
-                left: number;
-                top: string;
-                borderLeftColor: string;
-                borderBottomColor: string;
-                transform: string;
-            };
-        };
-    };
-    wrapper: {
-        default: {
-            display: string;
-            position: string;
-        };
-    };
-};

package/tokens/tooltip.js

@@ -1,68 +0,0 @@
-import { colors as t } from "./colors.js";
-import { display as o } from "./display.js";
-import { spacing as e } from "./spacing.js";
-import { Z_INDEX as a } from "../constants/positioning.js";
-const r = 7, i = {
-  default: {
-    position: "absolute",
-    display: "block",
-    whiteSpace: "nowrap",
-    backgroundColor: t.neutral["grey.40"],
-    padding: e.md,
-    zIndex: a.TOP,
-    "&::after": {
-      position: "absolute",
-      content: '""',
-      border: `${r}px solid transparent`
-    },
-    "&.tooltip-bottom": {
-      transform: "translateX(-50%)",
-      "&::after": {
-        top: -r,
-        left: "50%",
-        borderLeftColor: t.neutral["grey.40"],
-        borderTopColor: t.neutral["grey.40"],
-        transform: "translateX(-50%) rotate(45deg)"
-      }
-    },
-    "&.tooltip-top": {
-      transform: "translateX(-50%)",
-      "&::after": {
-        bottom: -r,
-        left: "50%",
-        borderRightColor: t.neutral["grey.40"],
-        borderBottomColor: t.neutral["grey.40"],
-        transform: "translateX(-50%) rotate(45deg)"
-      }
-    },
-    "&.tooltip-left": {
-      transform: "translateY(-50%)",
-      "&::after": {
-        right: -r,
-        top: "50%",
-        borderRightColor: t.neutral["grey.40"],
-        borderTopColor: t.neutral["grey.40"],
-        transform: "translateY(-50%) rotate(45deg)"
-      }
-    },
-    "&.tooltip-right": {
-      transform: "translateY(-50%)",
-      "&::after": {
-        left: -r,
-        top: "50%",
-        borderLeftColor: t.neutral["grey.40"],
-        borderBottomColor: t.neutral["grey.40"],
-        transform: "translateY(-50%) rotate(45deg) "
-      }
-    }
-  },
-  wrapper: {
-    default: {
-      display: o.inlineBlock,
-      position: "relative"
-    }
-  }
-};
-export {
-  i as tooltip
-};

package/tokens/types/index.types.d.ts

@@ -1,14 +0,0 @@
-import { spacing } from '..';
-export type LayoutSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
-export type SpacingKey = keyof typeof spacing;
-export declare enum Unit {
-    Px = "px",
-    Rem = "rem",
-    Percents = "%",
-    Em = "em"
-}
-export type FocusStyles = {
-    inset: `${number}${Unit}`;
-    borderRadius?: `${number}${Unit}`;
-    border?: string;
-};

package/tokens/types/index.types.js

@@ -1,4 +0,0 @@
-var r = /* @__PURE__ */ ((e) => (e.Px = "px", e.Rem = "rem", e.Percents = "%", e.Em = "em", e))(r || {});
-export {
-  r as Unit
-};

package/tokens/typography.d.ts

@@ -1,127 +0,0 @@
-export declare const typography: {
-    base: {
-        fontFamily: string;
-    };
-    span: {
-        fontSize: string;
-        fontWeight: string;
-        lineHeight: string;
-    };
-    h1: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        marginTop: string;
-        marginBottom: string;
-    };
-    h2: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        marginTop: string;
-        marginBottom: string;
-    };
-    h3: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        marginTop: string;
-        marginBottom: string;
-    };
-    h4: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        marginTop: string;
-        marginBottom: string;
-    };
-    h5: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        marginTop: string;
-        marginBottom: string;
-    };
-    h6: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        marginTop: string;
-        marginBottom: string;
-    };
-    strong: {
-        fontWeight: number;
-    };
-    i: {
-        fontStyle: string;
-    };
-    p: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-    };
-    small: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-    };
-    caption: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-    };
-    div: {
-        xs: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        sm: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        md: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        lg: {
-            fontSize: string;
-            lineHeight: string;
-        };
-        xl: {
-            fontSize: string;
-            lineHeight: string;
-        };
-    };
-    styleVariant: {
-        light: {
-            fontWeight: number;
-        };
-        normal: {
-            fontWeight: number;
-        };
-        semibold: {
-            fontWeight: number;
-        };
-        bold: {
-            fontWeight: number;
-        };
-        italic: {
-            fontStyle: string;
-        };
-        small: {
-            fontSize: string;
-        };
-        uppercase: {
-            textTransform: string;
-        };
-        lowercase: {
-            textTransform: string;
-        };
-        underline: {
-            textDecoration: string;
-        };
-        strike: {
-            textDecoration: string;
-        };
-    };
-};