@rarui/styles 1.0.0-rc.1 → 1.0.0

package/src/packages/atomic/button/rarui-button.css.ts

@@ -1,331 +0,0 @@
-import { globalStyle, style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-import { varsThemeBase } from "../../../themes";
-import { buttonVariants } from "./rarui-button.commons";
-
-export const button = recipe({
-  base: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "fit-content",
-    textDecoration: "none",
-    cursor: "pointer",
-    boxSizing: "border-box",
-    position: "relative",
-    overflow: "hidden",
-    gap: varsThemeBase.spacing["4xs"],
-    fontWeight: varsThemeBase.fontWeight.semiBold,
-    lineHeight: varsThemeBase.lineWeight.button.l,
-    fontSize: varsThemeBase.fontSize.button.l,
-    fontFamily: varsThemeBase.fontFamily.inter,
-    borderRadius: varsThemeBase.shape.border.radius["2xs"],
-    borderWidth: varsThemeBase.shape.border.width[1],
-    borderStyle: "solid",
-    borderColor: varsThemeBase.colors.surface.brand,
-    ":disabled": {
-      background: varsThemeBase.colors.surface.disabled,
-      borderColor: varsThemeBase.colors.surface.disabled,
-      color: varsThemeBase.colors.content.disabled,
-      cursor: "not-allowed",
-    },
-  },
-  variants: {
-    appearance: {
-      brand: {
-        backgroundColor: varsThemeBase.colors.surface.brand,
-        borderColor: varsThemeBase.colors.surface.brand,
-        color: varsThemeBase.colors.content["on-brand"],
-      },
-      "brand-secondary": {
-        backgroundColor: varsThemeBase.colors.surface["brand-secondary"],
-        borderColor: varsThemeBase.colors.surface["brand-secondary"],
-        color: varsThemeBase.colors.content["on-brand-secondary"],
-      },
-      danger: {
-        backgroundColor: varsThemeBase.colors.surface.error,
-        borderColor: varsThemeBase.colors.surface.error,
-        color: varsThemeBase.colors.content["on-error"],
-      },
-      success: {
-        backgroundColor: varsThemeBase.colors.surface.success,
-        borderColor: varsThemeBase.colors.surface.success,
-        color: varsThemeBase.colors.content["on-success"],
-      },
-      warning: {
-        backgroundColor: varsThemeBase.colors.surface.warning,
-        borderColor: varsThemeBase.colors.surface.warning,
-        color: varsThemeBase.colors.content["on-warning"],
-      },
-      neutral: {
-        backgroundColor: varsThemeBase.colors.surface.invert,
-        borderColor: varsThemeBase.colors.surface.invert,
-        color: varsThemeBase.colors.content.invert,
-      },
-      inverted: {
-        backgroundColor: varsThemeBase.colors.surface.primary,
-        borderColor: varsThemeBase.colors.surface.primary,
-        color: varsThemeBase.colors.content.primary,
-      },
-    },
-    size: {
-      large: {
-        padding: varsThemeBase.spacing.xs,
-        height: "3rem",
-        fontSize: varsThemeBase.fontSize.button.l,
-      },
-      medium: {
-        padding: varsThemeBase.spacing.xs,
-        height: "2.75rem",
-        fontSize: varsThemeBase.fontSize.button.m,
-      },
-      small: {
-        padding: varsThemeBase.spacing["3xs"],
-        height: "2rem",
-        fontSize: varsThemeBase.fontSize.button.s,
-      },
-    },
-    variant: {
-      solid: {},
-      outlined: {
-        backgroundColor: "transparent",
-      },
-      text: {
-        backgroundColor: "transparent",
-        textDecoration: "underline",
-        border: "none",
-        borderRadius: varsThemeBase.shape.border.radius.button,
-        ":hover": {
-          borderRadius: varsThemeBase.shape.border.radius.button,
-        },
-        ":active": {
-          borderRadius: varsThemeBase.shape.border.radius.button,
-        },
-      },
-      tonal: {
-        border: "none",
-        borderRadius: varsThemeBase.shape.border.radius.button,
-      },
-    },
-  },
-  compoundVariants: [
-    // variant outlined
-    {
-      variants: {
-        appearance: "brand",
-        variant: "outlined",
-      },
-      style: {
-        ...buttonVariants.outlined.brand,
-        borderColor: varsThemeBase.colors.border.brand,
-      },
-    },
-    {
-      variants: {
-        appearance: "brand-secondary",
-        variant: "outlined",
-      },
-      style: {
-        ...buttonVariants.outlined["brand-secondary"],
-        borderColor: varsThemeBase.colors.border["brand-secondary"],
-      },
-    },
-    {
-      variants: {
-        appearance: "danger",
-        variant: "outlined",
-      },
-      style: {
-        ...buttonVariants.outlined.danger,
-        borderColor: varsThemeBase.colors.border.error,
-      },
-    },
-    {
-      variants: {
-        appearance: "success",
-        variant: "outlined",
-      },
-      style: {
-        ...buttonVariants.outlined.success,
-        borderColor: varsThemeBase.colors.border.success,
-      },
-    },
-    {
-      variants: {
-        appearance: "warning",
-        variant: "outlined",
-      },
-      style: {
-        ...buttonVariants.outlined.warning,
-        borderColor: varsThemeBase.colors.border.warning,
-      },
-    },
-    {
-      variants: {
-        appearance: "neutral",
-        variant: "outlined",
-      },
-      style: {
-        ...buttonVariants.outlined.neutral,
-        borderColor: varsThemeBase.colors.border.secondary,
-      },
-    },
-    {
-      variants: {
-        appearance: "inverted",
-        variant: "outlined",
-      },
-      style: {
-        ...buttonVariants.outlined.inverted,
-        borderColor: varsThemeBase.colors.border.invert,
-      },
-    },
-    // variant text
-    {
-      variants: {
-        appearance: "brand",
-        variant: "text",
-      },
-      style: buttonVariants.text.brand,
-    },
-    {
-      variants: {
-        appearance: "brand-secondary",
-        variant: "text",
-      },
-      style: buttonVariants.text["brand-secondary"],
-    },
-    {
-      variants: {
-        appearance: "danger",
-        variant: "text",
-      },
-      style: buttonVariants.text.danger,
-    },
-    {
-      variants: {
-        appearance: "success",
-        variant: "text",
-      },
-      style: buttonVariants.text.success,
-    },
-    {
-      variants: {
-        appearance: "warning",
-        variant: "text",
-      },
-      style: buttonVariants.text.warning,
-    },
-    {
-      variants: {
-        appearance: "neutral",
-        variant: "text",
-      },
-      style: {
-        ...buttonVariants.text.neutral,
-      },
-    },
-    {
-      variants: {
-        appearance: "inverted",
-        variant: "text",
-      },
-      style: buttonVariants.text.inverted,
-    },
-    // variant tonal
-    {
-      variants: {
-        appearance: "brand",
-        variant: "tonal",
-      },
-      style: {
-        ...buttonVariants.text.brand,
-        backgroundColor: varsThemeBase.colors.surface["brand-subdued"],
-      },
-    },
-    {
-      variants: {
-        appearance: "brand-secondary",
-        variant: "tonal",
-      },
-      style: {
-        ...buttonVariants.text["brand-secondary"],
-        backgroundColor:
-          varsThemeBase.colors.surface["brand-secondary-subdued"],
-      },
-    },
-    {
-      variants: {
-        appearance: "danger",
-        variant: "tonal",
-      },
-      style: {
-        ...buttonVariants.text.danger,
-        backgroundColor: varsThemeBase.colors.surface["error-subdued"],
-      },
-    },
-    {
-      variants: {
-        appearance: "success",
-        variant: "tonal",
-      },
-      style: {
-        ...buttonVariants.text.success,
-        backgroundColor: varsThemeBase.colors.surface["success-subdued"],
-      },
-    },
-    {
-      variants: {
-        appearance: "warning",
-        variant: "tonal",
-      },
-      style: {
-        ...buttonVariants.text.warning,
-        backgroundColor: varsThemeBase.colors.surface["warning-subdued"],
-      },
-    },
-    {
-      variants: {
-        appearance: "neutral",
-        variant: "tonal",
-      },
-      style: {
-        ...buttonVariants.text.neutral,
-        backgroundColor: varsThemeBase.colors.surface.secondary,
-      },
-    },
-    {
-      variants: {
-        appearance: "brand",
-        variant: "tonal",
-      },
-      style: {
-        ...buttonVariants.text.brand,
-        backgroundColor: varsThemeBase.colors.surface["invert-secondary"],
-      },
-    },
-  ],
-});
-
-export const overlay = style({
-  position: "absolute",
-  top: -1,
-  left: -1,
-  bottom: -1,
-  right: -1,
-  pointerEvents: "none",
-  opacity: 0,
-  borderRadius: varsThemeBase.shape.border.radius["2xs"],
-});
-
-globalStyle(`${button()}:hover ${overlay}`, {
-  opacity: 1,
-  backgroundColor: varsThemeBase.colors.surface["on-brand-hover"],
-  borderColor: varsThemeBase.colors.surface["on-brand-hover"],
-});
-
-globalStyle(`${button()}:active ${overlay}`, {
-  opacity: 1,
-  backgroundColor: varsThemeBase.colors.surface["on-brand-press"],
-  borderColor: varsThemeBase.colors.surface["on-brand-press"],
-});

package/src/packages/atomic/button/rarui-button.types.ts

@@ -1,4 +0,0 @@
-import { RecipeVariants } from "@vanilla-extract/recipes";
-import { button } from "./rarui-button.css";
-
-export type ButtonVariants = RecipeVariants<typeof button>;

package/src/themes/contract.css.ts

@@ -1,241 +0,0 @@
-import { createGlobalThemeContract } from "@vanilla-extract/css";
-
-export const vars = createGlobalThemeContract(
-  {
-    colors: {
-      surface: {
-        background: "",
-        brand: "",
-        "brand-hover": "",
-        "brand-press": "",
-        "brand-secondary": "",
-        "brand-secondary-hover": "",
-        "brand-secondary-press": "",
-        "brand-secondary-subdued": "",
-        "brand-subdued": "",
-        disabled: "",
-        error: "",
-        "error-hover": "",
-        "error-press": "",
-        "error-subdued": "",
-        hover: "",
-        info: "",
-        "info-hover": "",
-        "info-press": "",
-        "info-subdued": "",
-        invert: "",
-        "invert-disabled": "",
-        "invert-hover": "",
-        "invert-press": "",
-        "invert-secondary": "",
-        "on-brand-hover": "",
-        "on-brand-press": "",
-        "on-brand-secondary-hover": "",
-        "on-brand-secondary-press": "",
-        "on-error-hover": "",
-        "on-error-press": "",
-        "on-info-hover": "",
-        "on-info-press": "",
-        "on-success-hover": "",
-        "on-success-press": "",
-        "on-warning-hover": "",
-        "on-warning-press": "",
-        overlay: "",
-        press: "",
-        primary: "",
-        secondary: "",
-        success: "",
-        "success-hover": "",
-        "success-press": "",
-        "success-subdued": "",
-        warning: "",
-        "warning-hover": "",
-        "warning-press": "",
-        "warning-subdued": "",
-      },
-      content: {
-        brand: "",
-        "brand-alt": "",
-        "brand-secondary": "",
-        disabled: "",
-        error: "",
-        info: "",
-        invert: "",
-        "invert-disabled": "",
-        "invert-secondary": "",
-        "on-brand": "",
-        "on-brand-secondary": "",
-        "on-error": "",
-        "on-info": "",
-        "on-success": "",
-        "on-warning": "",
-        primary: "",
-        secondary: "",
-        success: "",
-        warning: "",
-        "warning-alt": "",
-      },
-      border: {
-        brand: "",
-        "brand-alt": "",
-        "brand-secondary": "",
-        disabled: "",
-        divider: "",
-        error: "",
-        info: "",
-        invert: "",
-        "invert-disabled": "",
-        primary: "",
-        secondary: "",
-        subdued: "",
-        success: "",
-        warning: "",
-      },
-    },
-    fontFamily: {
-      inter: "",
-    },
-    fontSize: {
-      hero: {
-        caption: "",
-      },
-      body: {
-        xxs: "",
-        xs: "",
-        s: "",
-        m: "",
-        l: "",
-        xl: "",
-      },
-      heading: {
-        xs: "",
-        s: "",
-        m: "",
-        l: "",
-        xl: "",
-      },
-      button: {
-        s: "",
-        m: "",
-        l: "",
-      },
-      label: {
-        s: "",
-        m: "",
-        l: "",
-      },
-    },
-    fontWeight: {
-      regular: "",
-      medium: "",
-      semiBold: "",
-      bold: "",
-    },
-    lineWeight: {
-      hero: {
-        caption: "",
-      },
-      body: {
-        xxs: "",
-        xs: "",
-        s: "",
-        m: "",
-        l: "",
-        xl: "",
-      },
-      heading: {
-        xs: "",
-        s: "",
-        m: "",
-        l: "",
-        xl: "",
-      },
-      button: {
-        s: "",
-        m: "",
-        l: "",
-      },
-      label: {
-        s: "",
-        m: "",
-        l: "",
-      },
-    },
-    elevation: {
-      none: "",
-      top: {
-        "1": "",
-        "2": "",
-        "3": "",
-        "4": "",
-        "5": "",
-      },
-      bottom: {
-        "1": "",
-        "2": "",
-        "3": "",
-        "4": "",
-        "5": "",
-      },
-    },
-    shape: {
-      border: {
-        radius: {
-          none: "",
-          "2xs": "",
-          xs: "",
-          sm: "",
-          md: "",
-          lg: "",
-          xl: "",
-          "2xl": "",
-          pill: "",
-          button: "",
-          input: "",
-        },
-        width: {
-          "1": "",
-          "2": "",
-          "3": "",
-          "4": "",
-          "5": "",
-        },
-      },
-    },
-    spacing: {
-      "4xs": "",
-      "3xs": "",
-      "2xs": "",
-      xs: "",
-      s: "",
-      md: "",
-      lg: "",
-      xl: "",
-      "2xl": "",
-      "3xl": "",
-      "4xl": "",
-      "5xl": "",
-      "6xl": "",
-      "7xl": "",
-      "8xl": "",
-    },
-    zIndex: {
-      100: "",
-      200: "",
-      300: "",
-      400: "",
-      500: "",
-      600: "",
-      700: "",
-      800: "",
-      900: "",
-    },
-    breakpoint: {
-      xs: "",
-      md: "",
-      lg: "",
-      xl: "",
-    },
-  },
-  (_value, path) => `rarui-${path.join("-")}`,
-);