@rarui/styles 1.0.0-rc.1

package/src/components/themeProvider.spec.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import { ThemeProvider } from ".";
+import { ThemeProviderProps } from "./themeProvider.types";
+
+const makeSut = (props: ThemeProviderProps) => {
+  render(<ThemeProvider {...props} data-testid="theme-provider-element" />);
+};
+
+describe("GIVEN <ThemeProvider />", () => {
+  describe("WHEN rendered", () => {
+    it("THEN should render the submitted children", () => {
+      makeSut({ children: "My children" });
+      expect(screen.getByText("My children")).toBeDefined();
+    });
+  });
+
+  describe("THEN should correctly render the submitted theme", () => {
+    it("THEN should correctly render the padding default", () => {
+      makeSut({ children: "My children" });
+      expect(
+        screen.getByTestId("theme-provider-element").getAttribute("class"),
+      ).toEqual("");
+    });
+
+    it("THEN should correctly render the padding base", () => {
+      makeSut({ children: "My children", theme: "base" });
+      expect(
+        screen.getByTestId("theme-provider-element").getAttribute("class"),
+      ).toEqual("");
+    });
+
+    it("THEN should correctly render the padding dark", () => {
+      makeSut({ children: "My children", theme: "dark" });
+      expect(
+        screen.getByTestId("theme-provider-element").getAttribute("class"),
+      ).toContain("dark");
+    });
+  });
+});

package/src/components/themeProvider.types.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from "react";
+
+export type Theme = "dark" | "base";
+
+export interface ThemeProviderProperties {
+  theme?: Theme;
+}
+
+export type ThemeProviderProps = ThemeProviderProperties &
+  HTMLAttributes<HTMLElement>;

package/src/index.ts

@@ -0,0 +1,8 @@
+// components
+export * from "./components";
+
+// atomics
+export { button } from "./packages/atomic/button";
+
+// types
+export type { ButtonVariants } from "./packages/atomic/button";

package/src/index.types.ts

@@ -0,0 +1,71 @@
+export interface Conditions<T> {
+  xs?: T;
+  md?: T;
+  lg?: T;
+  xl?: T;
+}
+export type AspectRatio =
+  | "1/1"
+  | "16/9"
+  | "9/16"
+  | "4/3"
+  | "3/4"
+  | "2/1"
+  | "1/2";
+export type BorderStyle = "solid" | "none" | "hidden" | "dashed" | "dotted";
+export type BoxSizing = "border-box" | "content-box";
+export type Cursor = "auto" | "pointer" | "not-allowed" | "grab" | "inherit";
+export type Display =
+  | "block"
+  | "flex"
+  | "inline-flex"
+  | "grid"
+  | "inline-grid"
+  | "none";
+export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
+export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
+export type JustifyContent =
+  | "flex-start"
+  | "flex-end"
+  | "center"
+  | "space-between"
+  | "space-around"
+  | "space-evenly";
+export type AlignItems =
+  | "stretch"
+  | "flex-start"
+  | "flex-end"
+  | "center"
+  | "baseline";
+export type AlignSelf =
+  | "auto"
+  | "flex-start"
+  | "flex-end"
+  | "center"
+  | "baseline"
+  | "stretch";
+export type TextAlign = "left" | "right" | "center" | "justify";
+export type TextDecoration = "none" | "underline";
+export type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
+export type Overflow = "visible" | "hidden" | "scroll" | "auto";
+export type PointerEvents =
+  | "auto"
+  | "none"
+  | "visiblePainted"
+  | "visibleFill"
+  | "visibleStroke"
+  | "visible"
+  | "painted"
+  | "fill"
+  | "stroke"
+  | "all"
+  | "inherit";
+export type TransitionTiming =
+  | "ease"
+  | "ease-in"
+  | "ease-out"
+  | "ease-in-out"
+  | "linear"
+  | "step-start"
+  | "step-end";
+export type WordBreak = "normal" | "break-all" | "keep-all" | "break-word";

package/src/packages/atomic/button/index.ts

@@ -0,0 +1,6 @@
+import * as styles from "./rarui-button.css";
+
+export const button = {
+  classnames: { ...styles },
+};
+export type { ButtonVariants } from "./rarui-button.types";

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

@@ -0,0 +1,82 @@
+import { varsThemeBase } from "../../../themes";
+
+export const buttonOutlined = {
+  brand: {
+    ":hover": {
+      backgroundColor: varsThemeBase.colors.surface["brand-hover"],
+    },
+    ":active": {
+      backgroundColor: varsThemeBase.colors.surface["brand-press"],
+    },
+    color: varsThemeBase.colors.content.brand,
+  },
+  "brand-secondary": {
+    ":hover": {
+      backgroundColor: varsThemeBase.colors.surface["brand-secondary-hover"],
+    },
+    ":active": {
+      backgroundColor: varsThemeBase.colors.surface["brand-secondary-press"],
+    },
+    color: varsThemeBase.colors.content["brand-secondary"],
+  },
+  danger: {
+    ":hover": {
+      backgroundColor: varsThemeBase.colors.surface["error-hover"],
+    },
+    ":active": {
+      backgroundColor: varsThemeBase.colors.surface["error-press"],
+    },
+    color: varsThemeBase.colors.content.error,
+  },
+  success: {
+    ":hover": {
+      backgroundColor: varsThemeBase.colors.surface["success-hover"],
+    },
+    ":active": {
+      backgroundColor: varsThemeBase.colors.surface["success-press"],
+    },
+    color: varsThemeBase.colors.content.success,
+  },
+  warning: {
+    ":hover": {
+      backgroundColor: varsThemeBase.colors.surface["warning-hover"],
+    },
+    ":active": {
+      backgroundColor: varsThemeBase.colors.surface["warning-press"],
+    },
+    color: varsThemeBase.colors.content.warning,
+  },
+  neutral: {
+    ":hover": {
+      backgroundColor: varsThemeBase.colors.surface.hover,
+    },
+    ":active": {
+      backgroundColor: varsThemeBase.colors.surface.press,
+    },
+    color: varsThemeBase.colors.content.primary,
+  },
+  inverted: {
+    ":hover": {
+      backgroundColor: varsThemeBase.colors.surface["invert-hover"],
+    },
+    ":active": {
+      backgroundColor: varsThemeBase.colors.surface["invert-press"],
+    },
+    color: varsThemeBase.colors.content.invert,
+  },
+};
+
+export const buttonText = {
+  brand: buttonOutlined.brand,
+  "brand-secondary": buttonOutlined["brand-secondary"],
+  danger: buttonOutlined.danger,
+  success: buttonOutlined.success,
+  warning: buttonOutlined.warning,
+  neutral: buttonOutlined.neutral,
+  inverted: buttonOutlined.inverted,
+};
+
+export const buttonVariants = {
+  outlined: buttonOutlined,
+  text: buttonText,
+};

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

@@ -0,0 +1,331 @@
+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

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