Merge pull request #5 from kspeyanski/fluent-2

Fluent 2
kirchoni · Jun 29, 2024 · 51b0c78 · 51b0c78
2 parents 64ce702 + 55cc4b0
commit 51b0c78
Show file tree

Hide file tree

Showing 60 changed files with 8,941 additions and 12,666 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,3 +1,3 @@
 {
-    "printWidth": 100
-}
+    "printWidth": 120
+}
diff --git a/apps/docs/design/fluent-2/fluent-2.d.ts b/apps/docs/design/fluent-2/fluent-2.d.ts
@@ -0,0 +1,5 @@
+declare module "baka-core" {
+  import { BakaDesignFluent2 } from "baka-fluent-2/types/design";
+
+  export interface BakaDesign extends BakaDesignFluent2 {}
+}
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -22,6 +22,7 @@
     "autoprefixer": "^10.4.16",
     "baka-core": "workspace:*",
     "baka-material-you": "workspace:*",
+    "baka-fluent-2": "workspace:*",
     "baka-ui": "workspace:*",
     "clsx": "^1.2.1",
     "contentlayer": "^0.3.4",

diff --git a/apps/docs/public/avatar.jpeg b/apps/docs/public/avatar.jpeg
diff --git a/apps/docs/public/demos.json b/apps/docs/public/demos.json
diff --git a/apps/docs/src/app/demos/fluent-2/avatar/page.tsx b/apps/docs/src/app/demos/fluent-2/avatar/page.tsx
@@ -0,0 +1,51 @@
+import { BakaAvatar, BakaIcon, BakaText } from "baka-ui";
+import Image from "next/image";
+
+export default function AvatarDemo() {
+  return (
+    <div className="flex gap-[32px]">
+      <BakaAvatar>
+        <Image src="/avatar.jpeg" width={56} height={56} alt="" />
+      </BakaAvatar>
+      <BakaAvatar>
+        <BakaIcon variant={"size-28"}>
+          <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M17 14C18.6569 14 20 15.3431 20 17V17.7146C20 21.2924 15.7895 24 10 24C4.21053 24 0 21.4333 0 17.7146V17C0 15.3431 1.34315 14 3 14H17ZM17 15.5H3C2.2203 15.5 1.57955 16.0949 1.50687 16.8555L1.5 17V17.7146C1.5 20.389 4.88879 22.5 10 22.5C14.926 22.5 18.3548 20.3951 18.4955 17.876L18.5 17.7146V17C18.5 16.2203 17.9051 15.5796 17.1445 15.5069L17 15.5ZM10 0C13.3137 0 16 2.68629 16 6C16 9.31371 13.3137 12 10 12C6.68629 12 4 9.31371 4 6C4 2.68629 6.68629 0 10 0ZM10 1.5C7.51472 1.5 5.5 3.51472 5.5 6C5.5 8.48528 7.51472 10.5 10 10.5C12.4853 10.5 14.5 8.48528 14.5 6C14.5 3.51472 12.4853 1.5 10 1.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </BakaIcon>
+      </BakaAvatar>
+      <BakaAvatar>
+        <BakaText>TS</BakaText>
+      </BakaAvatar>
+      <BakaAvatar variant={"brand"}>
+        <BakaIcon variant={"size-28"}>
+          <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M17 14C18.6569 14 20 15.3431 20 17V17.7146C20 21.2924 15.7895 24 10 24C4.21053 24 0 21.4333 0 17.7146V17C0 15.3431 1.34315 14 3 14H17ZM17 15.5H3C2.2203 15.5 1.57955 16.0949 1.50687 16.8555L1.5 17V17.7146C1.5 20.389 4.88879 22.5 10 22.5C14.926 22.5 18.3548 20.3951 18.4955 17.876L18.5 17.7146V17C18.5 16.2203 17.9051 15.5796 17.1445 15.5069L17 15.5ZM10 0C13.3137 0 16 2.68629 16 6C16 9.31371 13.3137 12 10 12C6.68629 12 4 9.31371 4 6C4 2.68629 6.68629 0 10 0ZM10 1.5C7.51472 1.5 5.5 3.51472 5.5 6C5.5 8.48528 7.51472 10.5 10 10.5C12.4853 10.5 14.5 8.48528 14.5 6C14.5 3.51472 12.4853 1.5 10 1.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </BakaIcon>
+      </BakaAvatar>
+      <BakaAvatar variant={"brand"}>
+        <BakaText>TS</BakaText>
+      </BakaAvatar>
+      <BakaAvatar variant={"darkred"}>
+        <BakaIcon variant={"size-28"}>
+          <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M17 14C18.6569 14 20 15.3431 20 17V17.7146C20 21.2924 15.7895 24 10 24C4.21053 24 0 21.4333 0 17.7146V17C0 15.3431 1.34315 14 3 14H17ZM17 15.5H3C2.2203 15.5 1.57955 16.0949 1.50687 16.8555L1.5 17V17.7146C1.5 20.389 4.88879 22.5 10 22.5C14.926 22.5 18.3548 20.3951 18.4955 17.876L18.5 17.7146V17C18.5 16.2203 17.9051 15.5796 17.1445 15.5069L17 15.5ZM10 0C13.3137 0 16 2.68629 16 6C16 9.31371 13.3137 12 10 12C6.68629 12 4 9.31371 4 6C4 2.68629 6.68629 0 10 0ZM10 1.5C7.51472 1.5 5.5 3.51472 5.5 6C5.5 8.48528 7.51472 10.5 10 10.5C12.4853 10.5 14.5 8.48528 14.5 6C14.5 3.51472 12.4853 1.5 10 1.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </BakaIcon>
+      </BakaAvatar>
+      <BakaAvatar variant={"darkred"}>
+        <BakaText>TS</BakaText>
+      </BakaAvatar>
+    </div>
+  );
+}
diff --git a/apps/docs/src/app/demos/fluent-2/badge/catalog.tsx b/apps/docs/src/app/demos/fluent-2/badge/catalog.tsx
@@ -0,0 +1,74 @@
+import { BakaBadge, BakaBadgeProps, BakaIcon, BakaText } from "baka-ui";
+
+export default function BadgeCatalog(props: { variant: BakaBadgeProps["variant"] }) {
+  if (!props.variant) return null;
+
+  return (
+    <div className="flex flex-row gap-[28px]">
+      <div className="flex flex-col gap-[32px]">
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "filled"]}>
+          <BakaIcon></BakaIcon>
+          <BakaText>1</BakaText>
+        </BakaBadge>
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "filled"]}>
+          <BakaText>1</BakaText>
+          <BakaIcon></BakaIcon>
+        </BakaBadge>
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "filled"]}>
+          <BakaText>1</BakaText>
+        </BakaBadge>
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "filled"]}>
+          <BakaIcon></BakaIcon>
+        </BakaBadge>
+      </div>
+      <div className="flex flex-col gap-[32px]">
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "tint"]}>
+          <BakaIcon></BakaIcon>
+          <BakaText>1</BakaText>
+        </BakaBadge>
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "tint"]}>
+          <BakaText>1</BakaText>
+          <BakaIcon></BakaIcon>
+        </BakaBadge>
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "tint"]}>
+          <BakaText>1</BakaText>
+        </BakaBadge>
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "tint"]}>
+          <BakaIcon></BakaIcon>
+        </BakaBadge>
+      </div>
+      <div className="flex flex-col gap-[32px]">
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "outline"]}>
+          <BakaIcon></BakaIcon>
+          <BakaText>1</BakaText>
+        </BakaBadge>
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "outline"]}>
+          <BakaText>1</BakaText>
+          <BakaIcon></BakaIcon>
+        </BakaBadge>
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "outline"]}>
+          <BakaText>1</BakaText>
+        </BakaBadge>
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "outline"]}>
+          <BakaIcon></BakaIcon>
+        </BakaBadge>
+      </div>
+      <div className="flex flex-col gap-[32px]">
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "subtle"]}>
+          <BakaIcon></BakaIcon>
+          <BakaText>1</BakaText>
+        </BakaBadge>
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "subtle"]}>
+          <BakaText>1</BakaText>
+          <BakaIcon></BakaIcon>
+        </BakaBadge>
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "subtle"]}>
+          <BakaText>1</BakaText>
+        </BakaBadge>
+        <BakaBadge variant={[...(Array.isArray(props.variant) ? props.variant : [props.variant]), "subtle"]}>
+          <BakaIcon></BakaIcon>
+        </BakaBadge>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/src/app/demos/fluent-2/badge/page.tsx b/apps/docs/src/app/demos/fluent-2/badge/page.tsx
@@ -0,0 +1,31 @@
+import { BakaBadge } from "baka-ui";
+import BadgeCatalog from "./catalog";
+
+export default function BadgeDemo() {
+  return (
+    <div className="flex flex-row gap-[32px]">
+      <div className="flex flex-col gap-[32px]">
+        <BadgeCatalog variant="color-brand" />
+        <BadgeCatalog variant="color-danger" />
+        <BadgeCatalog variant="color-warning" />
+        <BadgeCatalog variant="color-success" />
+        <BadgeCatalog variant="color-important" />
+        <BadgeCatalog variant="color-informative" />
+        <div className="bg-neutral-background-static p-4 m-[-16px]">
+          <BadgeCatalog variant="color-subtle" />
+        </div>
+      </div>
+      <div className="flex flex-col gap-[32px]">
+        <BadgeCatalog variant={["circular", "color-brand"]} />
+        <BadgeCatalog variant={["circular", "color-danger"]} />
+        <BadgeCatalog variant={["circular", "color-warning"]} />
+        <BadgeCatalog variant={["circular", "color-success"]} />
+        <BadgeCatalog variant={["circular", "color-important"]} />
+        <BadgeCatalog variant={["circular", "color-informative"]} />
+        <div className="bg-neutral-background-static p-4 m-[-16px]">
+          <BadgeCatalog variant={["circular", "color-subtle"]} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/src/app/demos/fluent-2/button/outline/page.tsx b/apps/docs/src/app/demos/fluent-2/button/outline/page.tsx
@@ -0,0 +1,80 @@
+import { BakaButton, BakaIcon } from "baka-ui";
+
+export default function ButtonDemo() {
+  return (
+    <>
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-4">
+          <BakaButton variant={"outline"}>Text</BakaButton>
+          <BakaButton variant={"outline"}>
+            <BakaIcon></BakaIcon>
+            Text
+          </BakaButton>
+          <BakaButton variant={["outline", "icon"]}>
+            <BakaIcon></BakaIcon>
+          </BakaButton>
+        </div>
+        <div className="flex flex-col gap-4">
+          <BakaButton hovered={true} variant={"outline"}>
+            Text
+          </BakaButton>
+          <BakaButton hovered={true} variant={"outline"}>
+            <BakaIcon></BakaIcon>
+            Text
+          </BakaButton>
+          <BakaButton hovered={true} variant={["outline", "icon"]}>
+            <BakaIcon></BakaIcon>
+          </BakaButton>
+        </div>
+        <div className="flex flex-col gap-4">
+          <BakaButton activated={true} variant={"outline"}>
+            Text
+          </BakaButton>
+          <BakaButton activated={true} variant={"outline"}>
+            <BakaIcon></BakaIcon>
+            Text
+          </BakaButton>
+          <BakaButton activated={true} variant={["outline", "icon"]}>
+            <BakaIcon></BakaIcon>
+          </BakaButton>
+        </div>
+        <div className="flex flex-col gap-4">
+          <BakaButton selected={true} variant={"outline"}>
+            Text
+          </BakaButton>
+          <BakaButton selected={true} variant={"outline"}>
+            <BakaIcon></BakaIcon>
+            Text
+          </BakaButton>
+          <BakaButton selected={true} variant={["outline", "icon"]}>
+            <BakaIcon></BakaIcon>
+          </BakaButton>
+        </div>
+        <div className="flex flex-col gap-4">
+          <BakaButton focused={true} variant={"outline"}>
+            Text
+          </BakaButton>
+          <BakaButton focused={true} variant={"outline"}>
+            <BakaIcon></BakaIcon>
+            Text
+          </BakaButton>
+          <BakaButton focused={true} variant={["outline", "icon"]}>
+            <BakaIcon></BakaIcon>
+          </BakaButton>
+        </div>
+        <div className="flex flex-col gap-4">
+          <BakaButton disabled={true} variant={"outline"}>
+            Text
+          </BakaButton>
+          <BakaButton disabled={true} variant={"outline"}>
+            <BakaIcon></BakaIcon>
+            Text
+          </BakaButton>
+          <BakaButton disabled={true} variant={["outline", "icon"]}>
+            <BakaIcon></BakaIcon>
+          </BakaButton>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/docs/src/app/demos/fluent-2/button/page.tsx b/apps/docs/src/app/demos/fluent-2/button/page.tsx
@@ -0,0 +1,24 @@
+import ButtonPrimaryDemo from "./primary/page";
+import ButtonSecondaryDemo from "./secondary/page";
+import ButtonOutlineDemo from "./outline/page";
+import ButtonSubtleDemo from "./subtle/page";
+import ButtonTransparentDemo from "./transparent/page";
+
+export default function ButtonDemo() {
+  return (
+    <>
+      <div className="flex flex-col gap-[24px]">
+        <label>primary</label>
+        <ButtonPrimaryDemo />
+        <label>secondary</label>
+        <ButtonSecondaryDemo />
+        <label>outline</label>
+        <ButtonOutlineDemo />
+        <label>subtle</label>
+        <ButtonSubtleDemo />
+        <label>transparent</label>
+        <ButtonTransparentDemo />
+      </div>
+    </>
+  );
+}
diff --git a/apps/docs/src/app/demos/fluent-2/button/primary/page.tsx b/apps/docs/src/app/demos/fluent-2/button/primary/page.tsx
@@ -0,0 +1,80 @@
+import { BakaButton, BakaIcon } from "baka-ui";
+
+export default function ButtonDemo() {
+  return (
+    <>
+      <div className="flex gap-4">
+        <div className="flex flex-col gap-4">
+          <BakaButton variant={"primary"}>Text</BakaButton>
+          <BakaButton variant={"primary"}>
+            <BakaIcon></BakaIcon>
+            Text
+          </BakaButton>
+          <BakaButton variant={["primary", "icon"]}>
+            <BakaIcon></BakaIcon>
+          </BakaButton>
+        </div>
+        <div className="flex flex-col gap-4">
+          <BakaButton hovered={true} variant={"primary"}>
+            Text
+          </BakaButton>
+          <BakaButton hovered={true} variant={"primary"}>
+            <BakaIcon></BakaIcon>
+            Text
+          </BakaButton>
+          <BakaButton hovered={true} variant={["primary", "icon"]}>
+            <BakaIcon></BakaIcon>
+          </BakaButton>
+        </div>
+        <div className="flex flex-col gap-4">
+          <BakaButton activated={true} variant={"primary"}>
+            Text
+          </BakaButton>
+          <BakaButton activated={true} variant={"primary"}>
+            <BakaIcon></BakaIcon>
+            Text
+          </BakaButton>
+          <BakaButton activated={true} variant={["primary", "icon"]}>
+            <BakaIcon></BakaIcon>
+          </BakaButton>
+        </div>
+        <div className="flex flex-col gap-4">
+          <BakaButton selected={true} variant={"primary"}>
+            Text
+          </BakaButton>
+          <BakaButton selected={true} variant={"primary"}>
+            <BakaIcon></BakaIcon>
+            Text
+          </BakaButton>
+          <BakaButton selected={true} variant={["primary", "icon"]}>
+            <BakaIcon></BakaIcon>
+          </BakaButton>
+        </div>
+        <div className="flex flex-col gap-4">
+          <BakaButton focused={true} variant={"primary"}>
+            Text
+          </BakaButton>
+          <BakaButton focused={true} variant={"primary"}>
+            <BakaIcon></BakaIcon>
+            Text
+          </BakaButton>
+          <BakaButton focused={true} variant={["primary", "icon"]}>
+            <BakaIcon></BakaIcon>
+          </BakaButton>
+        </div>
+        <div className="flex flex-col gap-4">
+          <BakaButton disabled={true} variant={"primary"}>
+            Text
+          </BakaButton>
+          <BakaButton disabled={true} variant={"primary"}>
+            <BakaIcon></BakaIcon>
+            Text
+          </BakaButton>
+          <BakaButton disabled={true} variant={["primary", "icon"]}>
+            <BakaIcon></BakaIcon>
+          </BakaButton>
+        </div>
+      </div>
+    </>
+  );
+}