Skip to content

Commit

Permalink
fix: custom theme colors not work for tailwindcss classes.
Browse files Browse the repository at this point in the history 
perf: input placeholder text color adjusted.
docs: responsive adapted.

Signed-off-by: Ricco Xie <ricco@riccox.com>
  • Loading branch information
@riccox
riccox committed Jan 26, 2023
1 parent fa47f44 commit 877c2a2
Show file tree
Hide file tree
Showing 15 changed files with 167 additions and 196 deletions.
2 changes: 1 addition & 1 deletion apps/website/components/ComponentOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const ComponentOverviewCard = ({
{name}
</div>
<div
className={`flex-1 flex justify-center items-center gap-2 px-6 py-4 has-border !border-x-0 !border-b-0`}
className={`flex-1 flex flex-wrap justify-center items-center gap-2 px-6 py-4 has-border !border-x-0 !border-b-0`}
>
{component}
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/website/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import nextSeoConfig from "../next-seo.config";
export const Footer = () => {
return (
<footer className="bg-transparent">
<div className="grid grid-cols-4 gap-10 place-items-stretch">
<div className="grid xl:grid-cols-4 gap-10 place-items-stretch">
<div className="col-span-2 flex flex-col gap-3">
<div className="flex items-center gap-5">
<LogoIcon className={"w-8 h-fit"} />
Expand Down
6 changes: 4 additions & 2 deletions apps/website/components/Home/Feature.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,10 @@ export const Feature = () => {
<h1 className={"text-3xl font-bold text-primary-500"}>
Why choose us ?
</h1>
<h1 className={"text-5xl font-bold"}>Where you all wants here !</h1>
<div className={"grid grid-cols-3 gap-8 pt-4"}>
<h1 className={"text-2xl xl:text-5xl font-bold"}>
Where you all wants here !
</h1>
<div className={"grid xl:grid-cols-3 gap-8 pt-4"}>
<FeatureCard
icon={<FcMultipleInputs size={"100%"} />}
title={"Components Collection"}
Expand Down
17 changes: 10 additions & 7 deletions apps/website/components/Home/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ import Link from "next/link";
export const Hero = () => {
return (
<>
<section className="py-10 flex gap-8">
<section className="py-10 flex flex-wrap xl:flex-nowrap gap-8 w-full">
<div className="flex flex-col justify-center gap-10">
<h1>
<span className="text-primary-500 text-7xl font-bold leading-relaxed">
<span className="text-primary-500 text-5xl xl:text-7xl font-bold leading-relaxed">
Sira UI
</span>
<br />
<span className="font-bold leading-tight text-6xl">
<span className="font-bold leading-tight text-4xl xl:text-6xl break-words">
Excellent <u>design system</u> for{" "}
<strong className={"text-rose-500"}>modern</strong> user interface
design used by <u>developers & designers</u>.
Expand All @@ -23,17 +23,20 @@ export const Hero = () => {
{nextSeoConfig.description}
</p>
<div className={"flex gap-4 items-center"}>
<Link href={"/docs/guide/installation"} className={" scale-90"}>
<Link
href={"/docs/guide/installation"}
className={"mx-auto xl:mx-0 scale-90"}
>
<button className="btn solid primary xl">Launch it</button>
</Link>
<CodeBlock
blockClass={"w-fit h-fit"}
blockClass={"w-fit h-fit hidden xl:block"}
language="bash"
>{`npm install @sira-ui/tailwind`}</CodeBlock>
</div>
</div>
<div className="w-full flex-col gap-3 flex">
<div className="flex gap-4">
<div className="w-full flex-col gap-3 hidden xl:flex">
<div className="flex flex-wrap gap-4">
<button className="btn solid primary">Primary</button>
<button className="btn solid secondary">Secondary</button>
<button className="btn solid success active">Success</button>
Expand Down
2 changes: 1 addition & 1 deletion apps/website/components/demo/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const ModalDemo = ({
<div
className={`modal ${
pauseScroll ? "pause-scroll" : ""
} flex flex-col gap-5`}
} flex flex-col gap-5 w-auto xl:w-1/4`}
id={eleId}
>
<button className="absolute right-4 top-3" onClick={toggle}>
Expand Down
4 changes: 2 additions & 2 deletions apps/website/pages/docs/components/badge.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
## Size

```html
<div class="flex gap-4">
<div class="grid gap-4">
<div class="badge solid success xs">size-xs</div>
<div class="badge solid success sm">size-sm</div>
<div class="badge solid success md">size-md</div>
Expand All @@ -64,7 +64,7 @@
</div>
```

<div className="flex gap-4">
<div className="grid gap-4">
<div className="badge solid success xs">size-xs</div>
<div className="badge solid success sm">size-sm</div>
<div className="badge solid success md">size-md</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/website/pages/docs/components/dropdown.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Use the specified value to modify the position of the drop-down list at the `bot
</div>
```

<div className={`grid grid-cols-3 gap-5 place-items-center`}>
<div className={`grid xl:grid-cols-3 gap-5 place-items-center`}>
<DropdownDemo position={"top"} labelText={"top"} />
<DropdownDemo position={"top-left"} labelText={"top-left"} />
<DropdownDemo position={"top-right"} labelText={"top-right"} />
Expand Down
10 changes: 5 additions & 5 deletions apps/website/pages/docs/components/input.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,11 @@
```

<div className="grid gap-4">
<input className="!input success xs" placeholder="xs" />
<input className="!input success sm" placeholder="sm" />
<input className="!input success md" placeholder="md" />
<input className="!input success lg" placeholder="lg" />
<input className="!input success xl" placeholder="xl" />
<input className="!input success !xs" placeholder="xs" />
<input className="!input success !sm" placeholder="sm" />
<input className="!input success !md" placeholder="md" />
<input className="!input success !lg" placeholder="lg" />
<input className="!input success !xl" placeholder="xl" />
</div>

## Pill
Expand Down
8 changes: 4 additions & 4 deletions apps/website/pages/docs/components/overview.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ComponentOverviewCard } from "../../../components/ComponentOverview";

---

<div className="grid grid-cols-2 gap-4">
<div className="grid xl:grid-cols-2 gap-4">
<ComponentOverviewCard
name={"Button"}
href={"button"}
Expand Down Expand Up @@ -37,7 +37,7 @@ import { ComponentOverviewCard } from "../../../components/ComponentOverview";
src="https://i.pravatar.cc/150?u=fake@pravatar.com"
/>
</div>
<div className="avatar ring danger">
<div className="avatar ring danger hidden xl:block">
<img
alt="avatar"
src="https://i.pravatar.cc/150?u=fake@pravatar.com"
Expand All @@ -52,7 +52,7 @@ import { ComponentOverviewCard } from "../../../components/ComponentOverview";
component={
<>
<div className="badge solid success">badge</div>
<div className="badge solid success cornered">rounded</div>
<div className="badge solid success cornered">cornered</div>
<div className="badge solid success square">square</div>
<div className="badge light success">light</div>
</>
Expand Down Expand Up @@ -98,7 +98,7 @@ import { ComponentOverviewCard } from "../../../components/ComponentOverview";
href={"tabs"}
component={
<>
<div className="tabs boxed danger pill">
<div className="!tabs boxed danger pill">
<div className="tab p-4">Tab 1</div>
<div className="tab p-4">Tab 2</div>
<div className="tab active p-4">Tab 3</div>
Expand Down
186 changes: 96 additions & 90 deletions apps/website/pages/docs/components/table.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,36 +35,38 @@
</table>
```

<table className="table success">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
<div className={"overflow-scroll"}>
<table className="table success">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>

## Zebra

Expand Down Expand Up @@ -101,36 +103,38 @@
</table>
```

<table className="table zebra warn">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
<div className={"overflow-scroll"}>
<table className="table zebra warn">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>

## Compact

Expand Down Expand Up @@ -167,33 +171,35 @@
</table>
```

<table className="table compact danger">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
<div className={"overflow-scroll"}>
<table className="table compact danger">
<thead>
<tr>
<th>Type</th>
<th>Where</th>
<th>Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>
15 changes: 2 additions & 13 deletions apps/website/pages/docs/guide/customization.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,7 @@ You can also create your own theme or remove the built-in themes.

To use this feature go to your `tailwind.config.js`:

```js {3}
/** @type {import('tailwindcss').Config} */
module.exports = {
sira: {
// ... sira config
},
};
```

or

```js {5}
```js {4-6}
/** @type {import('tailwindcss').Config} */
module.exports = {
plugins: [
Expand Down Expand Up @@ -111,7 +100,7 @@ Here we list our built-in colors:

<br />

<div className="grid grid-cols-4 gap-4 p-4 has-border rounded-xl">
<div className="grid grid-cols-2 xl:grid-cols-4 gap-4 p-4 has-border rounded-xl">
<h1 className="text-3xl col-span-full">Colors</h1>
<div className="grid gap-4">
<div className="p-4 rounded-lg bg-bw-50">bw-50</div>
Expand Down
Loading

1 comment on commit 877c2a2

@vercel
Copy link

@vercel vercel bot commented on 877c2a2 Jan 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

sira – ./

sira.vercel.app
sira-git-main-riccox.vercel.app
sira-riccox.vercel.app
sira.riccox.com

Please sign in to comment.