Skip to content

Commit

Permalink
Merge pull request #22 from babylonlabs-io/tw-prefixes
Browse files Browse the repository at this point in the history
feat: add tailwind prefixes
  • Loading branch information
totraev authored Nov 23, 2024
2 parents a5f78fa + 97e84cf commit 5c82785
Show file tree
Hide file tree
Showing 23 changed files with 97 additions and 95 deletions.
16 changes: 8 additions & 8 deletions src/components/Avatar/Avatar.css
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
.bbn-avatar {
@apply inline-flex items-center justify-center overflow-hidden;
@apply b-inline-flex b-items-center b-justify-center b-overflow-hidden;

&-img {
@apply size-full object-cover object-center;
@apply b-size-full b-object-cover b-object-center;
}

&-tiny {
@apply size-[1.125rem];
@apply b-size-[1.125rem];
}

&-small {
@apply size-6;
@apply b-size-6;
}

&-medium {
@apply size-8;
@apply b-size-8;
}

&-large {
@apply size-10;
@apply b-size-10;
}

&-circular {
@apply rounded-full;
@apply b-rounded-full;
}

&-rounded {
@apply rounded;
@apply b-rounded;
}
}
2 changes: 1 addition & 1 deletion src/components/Avatar/Avatar.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const Image: Story = {

export const Text: Story = {
args: {
className: "bg-primary text-primary-contrast",
className: "b-bg-primary b-text-primary-contrast",
children: "DT",
},
};
2 changes: 1 addition & 1 deletion src/components/Avatar/AvatarGroup.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.bbn-avatar-group {
@apply flex -space-x-2.5;
@apply b-flex -b-space-x-2.5;
}
8 changes: 4 additions & 4 deletions src/components/Avatar/AvatarGroup.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,17 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
max: 3,
avatarClassName: "bg-primary/50 text-primary-contrast",
avatarClassName: "b-bg-primary/50 b-text-primary-contrast",
variant: "circular",
children: [
<Avatar alt="Binance" url="/images/wallets/binance.webp" />,
<Avatar
className="border border-primary bg-primary-contrast"
className="b-border b-border-primary b-bg-primary-contrast"
alt="Keystone"
url="/images/wallets/keystone.svg"
/>,
<Avatar className="bg-primary-main text-primary-contrast">DT</Avatar>,
<Avatar className="bg-primary-main text-primary-contrast">JK</Avatar>,
<Avatar className="b-bg-primary-main b-text-primary-contrast">DT</Avatar>,
<Avatar className="b-bg-primary-main b-text-primary-contrast">JK</Avatar>,
],
},
};
3 changes: 2 additions & 1 deletion src/components/Avatar/AvatarGroup.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { type PropsWithChildren, Children, cloneElement, isValidElement } from "react";
import { twJoin, twMerge } from "tailwind-merge";
import { twJoin, extendTailwindMerge } from "tailwind-merge";
import "./AvatarGroup.css";

import { type AvatarProps, Avatar } from "./Avatar";
const twMerge = extendTailwindMerge({ prefix: "b-" });

export interface AvatarGroupProps extends PropsWithChildren, AvatarProps {
max?: number;
Expand Down
18 changes: 9 additions & 9 deletions src/components/Button/Button.css
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
.bbn-btn {
@apply rounded tracking-0.4 transition-colors duration-200;
@apply b-rounded b-tracking-0.4 b-transition-colors b-duration-200;

&-fluid {
@apply w-full;
@apply b-w-full;
}

&-contained {
&.bbn-btn-primary {
@apply bg-primary-light text-secondary-contrast hover:bg-primary-main disabled:bg-primary/12;
@apply b-bg-primary-light b-text-secondary-contrast hover:b-bg-primary-main disabled:b-bg-primary/12;
}

&.bbn-btn-secondary {
@apply bg-secondary-main text-secondary-contrast hover:bg-secondary-dark disabled:bg-primary/12;
@apply b-bg-secondary-main b-text-secondary-contrast hover:b-bg-secondary-dark disabled:b-bg-primary/12;
}
}

&-outlined {
&.bbn-btn-primary {
@apply border border-primary-light text-primary-main hover:border-primary hover:bg-primary/10;
@apply b-border b-border-primary-light b-text-primary-main hover:b-border-primary hover:b-bg-primary/10;
}

&.bbn-btn-secondary {
@apply border border-secondary-main text-secondary-main hover:border-secondary-light hover:bg-secondary-light/10;
@apply b-border b-border-secondary-main b-text-secondary-main hover:b-border-secondary-light hover:b-bg-secondary-light/10;
}
}

&-large {
@apply h-10 px-6 text-base tracking-0.5;
@apply b-h-10 b-px-6 b-text-base b-tracking-0.5;
}

&-medium {
@apply h-9 px-4 text-sm tracking-0.5;
@apply b-h-9 b-px-4 b-text-sm b-tracking-0.5;
}

&-small {
@apply h-8 px-2.5 text-xs tracking-0.5;
@apply b-h-8 b-px-2.5 b-text-xs b-tracking-0.5;
}
}
2 changes: 1 addition & 1 deletion src/components/Button/IconButton.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.bbn-btn-icon {
@apply inline-flex size-10 items-center justify-center rounded border border-current text-primary-light;
@apply b-inline-flex b-size-10 b-items-center b-justify-center b-rounded b-border b-border-current b-text-primary-light;
}
2 changes: 1 addition & 1 deletion src/components/Chip/Chip.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.bbn-chip {
@apply inline-flex items-center justify-center rounded-full bg-primary-contrast px-2.5 py-1 text-[0.5rem] leading-4 tracking-0.4 text-primary-light;
@apply b-inline-flex b-items-center b-justify-center b-rounded-full b-bg-primary-contrast b-px-2.5 b-py-1 b-text-[0.5rem] b-leading-4 b-tracking-0.4 b-text-primary-light;
}
23 changes: 0 additions & 23 deletions src/components/Dialog/Dialog.css

This file was deleted.

8 changes: 4 additions & 4 deletions src/components/Dialog/Dialog.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,16 @@ export const Default: Story = {
}}
>
<DialogHeader
className="text-primary-main"
className="b-text-primary-main"
onClose={() => {
setVisibility(false);
}}
>
Bitcoin Inscriptions
</DialogHeader>

<DialogBody className="pb-8 pt-4 text-primary-dark">
<Text className="mb-6" variant="body1">
<DialogBody className="b-pb-8 b-pt-4 b-text-primary-dark">
<Text className="b-mb-6" variant="body1">
This staking interface attempts to detect bitcoin ordinals, NFTs, Ruins, and other inscriptions
(“Inscriptions”) within the Unspent Transaction Outputs (“UTXOs”) in your wallet. If you stake bitcoin
with Inscriptions, those UTXOs may be spent on staking, unbonding, or withdrawal fees, which will cause
Expand All @@ -59,7 +59,7 @@ export const Default: Story = {

<Text variant="body1">Chose one: (you can change this later)</Text>

<Checkbox checked labelClassName="mt-6" label="Don't show again" />
<Checkbox checked labelClassName="b-mt-6" label="Don't show again" />
</DialogBody>

<DialogFooter>
Expand Down
3 changes: 1 addition & 2 deletions src/components/Dialog/Dialog.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { type DetailedHTMLProps, type HTMLAttributes } from "react";
import { twJoin } from "tailwind-merge";
import "./Dialog.css";

import { Portal } from "@/components/Portal";
import { useModalManager } from "@/hooks/useModalManager";
Expand All @@ -26,7 +25,7 @@ export const Dialog = ({
<Portal mounted={mounted}>
<div {...restProps} className="bbn-dialog-wrapper">
<div
className={twJoin("bbn-dialog", open ? "animate-modal-in" : "animate-modal-out", className)}
className={twJoin("bbn-dialog", open ? "b-animate-modal-in" : "b-animate-modal-out", className)}
onAnimationEnd={unmount}
>
{children}
Expand Down
8 changes: 4 additions & 4 deletions src/components/Dialog/MobileDialog.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,16 @@ export const Default: Story = {
}}
>
<DialogHeader
className="text-primary-main"
className="b-text-primary-main"
onClose={() => {
setVisibility(false);
}}
>
Bitcoin Inscriptions
</DialogHeader>

<DialogBody className="pb-8 pt-4 text-primary-dark">
<Text className="mb-6" variant="body1">
<DialogBody className="b-pb-8 b-pt-4 b-text-primary-dark">
<Text className="b-mb-6" variant="body1">
This staking interface attempts to detect bitcoin ordinals, NFTs, Ruins, and other inscriptions
(“Inscriptions”) within the Unspent Transaction Outputs (“UTXOs”) in your wallet. If you stake bitcoin
with Inscriptions, those UTXOs may be spent on staking, unbonding, or withdrawal fees, which will cause
Expand All @@ -58,7 +58,7 @@ export const Default: Story = {

<Text variant="body1">Chose one: (you can change this later)</Text>

<Checkbox checked labelClassName="mt-6" label="Don't show again" />
<Checkbox checked labelClassName="b-mt-6" label="Don't show again" />
</DialogBody>

<DialogFooter>
Expand Down
3 changes: 1 addition & 2 deletions src/components/Dialog/MobileDialog.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { type DetailedHTMLProps, type HTMLAttributes } from "react";
import { twJoin } from "tailwind-merge";
import "./Dialog.css";

import { Portal } from "@/components/Portal";
import { useModalManager } from "@/hooks/useModalManager";
Expand All @@ -20,7 +19,7 @@ export const MobileDialog = ({ children, open = false, className, onClose, ...re
{...restProps}
className={twJoin(
"bbn-dialog-mobile",
open ? "animate-mobile-modal-in" : "animate-mobile-modal-out",
open ? "b-animate-mobile-modal-in" : "b-animate-mobile-modal-out",
className,
)}
onAnimationEnd={unmount}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Dialog/components/Backdrop.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.bbn-backdrop {
@apply fixed inset-0 z-40 flex items-center justify-center bg-primary/50 transition-opacity duration-500;
@apply b-fixed b-inset-0 b-z-40 b-flex b-items-center b-justify-center b-bg-primary/50 b-transition-opacity b-duration-500;
}
4 changes: 2 additions & 2 deletions src/components/Dialog/components/Backdrop.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ export const Backdrop = ({ open = false, ...props }: BackdropProps) => (
<div
{...props}
className={twJoin(
"fixed inset-0 z-40 flex items-center justify-center bg-primary/50 transition-opacity duration-500",
open ? "animate-backdrop-in" : "animate-backdrop-out",
"b-fixed b-inset-0 b-z-40 b-flex b-items-center b-justify-center b-bg-primary/50 b-transition-opacity b-duration-500",
open ? "b-animate-backdrop-in" : "b-animate-backdrop-out",
props.className,
)}
/>
Expand Down
23 changes: 23 additions & 0 deletions src/components/Dialog/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.bbn-dialog {
@apply b-rounded b-border b-border-primary-light/20 b-bg-[#ffffff] b-p-6;

&-wrapper {
@apply b-fixed b-left-1/2 b-top-1/2 b-z-50 b-max-w-full -b-translate-x-1/2 -b-translate-y-1/2;
}

&-body {
@apply custom-scrollbar b-min-h-0 b-flex-1 b-overflow-y-auto;
}

&-header {
@apply b-flex b-items-center b-justify-between b-gap-2;
}

&-footer {
@apply b-shrink-0;
}

&-mobile {
@apply b-fixed b-inset-x-0 b-bottom-0 b-z-50 b-flex b-flex-col b-rounded-t-3xl b-bg-[#ffffff] b-px-4 b-pb-4 b-pt-6;
}
}
2 changes: 2 additions & 0 deletions src/components/Dialog/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import "./index.css";

export * from "./Dialog";
export * from "./MobileDialog";
export * from "./components/DialogHeader";
Expand Down
12 changes: 6 additions & 6 deletions src/components/Heading/Heading.css
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
.bbn {
&-h1 {
@apply text-8xl leading-[7rem];
@apply b-text-8xl b-leading-[7rem];
}
&-h2 {
@apply text-6xl leading-[4.5rem];
@apply b-text-6xl b-leading-[4.5rem];
}
&-h3 {
@apply text-5xl leading-[3.5rem];
@apply b-text-5xl b-leading-[3.5rem];
}
&-h4 {
@apply text-[2.125rem] leading-[2.625rem] tracking-0.25;
@apply b-text-[2.125rem] b-leading-[2.625rem] b-tracking-0.25;
}
&-h5 {
@apply text-2xl;
@apply b-text-2xl;
}
&-h6 {
@apply text-xl leading-8 tracking-0.15;
@apply b-text-xl b-leading-8 b-tracking-0.15;
}
}
18 changes: 9 additions & 9 deletions src/components/Input/components/Toggle.css
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
.bbn-toggle {
@apply relative inline-block transition-colors duration-200;
@apply b-relative b-inline-block b-transition-colors b-duration-200;

&:not(&-disabled) {
@apply text-primary-light hover:text-primary-main;
@apply b-text-primary-light hover:b-text-primary-main;
}

&-disabled {
@apply text-primary/12;
@apply b-text-primary/12;
}
}

.bbn-toggle-input {
@apply absolute inset-0 z-[1] opacity-0;
@apply b-absolute b-inset-0 b-z-[1] b-opacity-0;

&:not(:disabled) {
@apply cursor-pointer;
@apply b-cursor-pointer;
}

&:disabled {
@apply cursor-default;
@apply b-cursor-default;
}
}

.bbn-toggle-label {
@apply inline-flex h-5 items-center gap-4;
@apply b-inline-flex b-h-5 b-items-center b-gap-4;
}

.bbn-toggle-left {
&.bbn-toggle-label {
@apply flex-row;
@apply b-flex-row;
}
}

.bbn-toggle-right {
&.bbn-toggle-label {
@apply flex-row-reverse;
@apply b-flex-row-reverse;
}
}
Loading

0 comments on commit 5c82785

Please sign in to comment.