From c2f1171302dd7aae119a8b97fdaec2441c960c4e Mon Sep 17 00:00:00 2001 From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com> Date: Sat, 4 Mar 2023 03:54:39 -0600 Subject: [PATCH 1/4] refactor: change tokens colors to not clash with tailwind colors https://github.com/Siumauricio/rippleui/issues/39 --- __test__/newVariables.test.ts | 8 +- __test__/safeList.test.ts | 4 +- __test__/theme.test.ts | 4 +- components/informational/accordion.css | 18 +- components/informational/alert.css | 10 +- components/informational/avatar.css | 10 +- components/informational/badge.css | 16 +- components/informational/card.css | 2 +- components/informational/divider.css | 8 +- components/informational/dot.css | 2 +- components/informational/kbd.css | 2 +- components/informational/menu.css | 4 +- components/informational/modal.css | 2 +- components/informational/pagination.css | 4 +- components/informational/popover.css | 4 +- components/informational/progress.css | 24 +-- components/informational/skeleton.css | 10 +- components/informational/stepper.css | 24 +-- components/informational/table.css | 14 +- components/informational/tabs.css | 16 +- components/inputs/button-group.css | 4 +- components/inputs/button.css | 14 +- components/inputs/checkbox.css | 10 +- components/inputs/dropdown.css | 10 +- components/inputs/input.css | 2 +- components/inputs/radio.css | 10 +- components/inputs/range.css | 12 +- components/inputs/select.css | 2 +- components/inputs/switch.css | 42 ++-- components/inputs/textarea.css | 2 +- components/navigation/drawer.css | 2 +- components/navigation/link.css | 4 +- components/navigation/navbar.css | 6 +- config/colors/blue.ts | 48 ++--- config/colors/cyan.ts | 48 ++--- config/colors/gray.ts | 48 ++--- config/colors/green.ts | 48 ++--- config/colors/pink.ts | 48 ++--- config/colors/purple.ts | 48 ++--- config/colors/red.ts | 48 ++--- config/colors/slate.ts | 48 ++--- config/colors/yellow.ts | 48 ++--- config/theme/var-theme.ts | 216 +++++++++---------- config/types/theme.types.ts | 24 +-- config/utils/safeList.ts | 2 +- docs/components/icons/BookIcon.tsx | 2 +- docs/components/mdx/ExamplesRepositories.tsx | 16 +- docs/components/mdx/Heading.tsx | 4 +- docs/components/mdx/LinkRedirect.tsx | 6 +- docs/components/styles/Community.tsx | 10 +- docs/components/styles/Comparison.tsx | 28 +-- docs/components/styles/Footer.tsx | 2 +- docs/components/styles/GetStarted.tsx | 10 +- docs/components/styles/Navbar.tsx | 2 +- docs/components/styles/NavbarDocs.tsx | 6 +- docs/components/styles/Searcher.tsx | 2 +- docs/components/styles/SideNav.tsx | 6 +- docs/components/styles/Sidebar.tsx | 6 +- docs/content/components/dropdown.mdx | 4 +- docs/content/components/forms.mdx | 16 +- docs/content/components/link.mdx | 98 ++++----- docs/content/components/menu.mdx | 28 +-- docs/content/components/popover.mdx | 22 +- docs/content/components/progress.mdx | 2 +- docs/styles/globals.css | 4 +- docs/styles/playground.css | 2 +- docs/styles/searcher.css | 8 +- docs/utils/pallete.ts | 192 ++++++++--------- 68 files changed, 730 insertions(+), 726 deletions(-) diff --git a/__test__/newVariables.test.ts b/__test__/newVariables.test.ts index 002ce69..4109c82 100644 --- a/__test__/newVariables.test.ts +++ b/__test__/newVariables.test.ts @@ -3,22 +3,22 @@ import { expect, test } from "vitest"; test("Should return colors with -- in each property", (t) => { const colorsMap1: any = { - "blue-100": "#fff", + "blue-2": "#fff", }; const colorsMap2: any = { - "blue-200": "#fff", + "blue-3": "#fff", }; const result = extractNewVariables(colorsMap1, colorsMap2); expect(result).toEqual({ - "blue-200": expect.any(Function), + "blue-3": expect.any(Function), }); }); test("Should return empty obj is obj1 is empty", (t) => { const colorsMap1: any = { - "blue-100": "#fff", + "blue-2": "#fff", }; const colorsMap2: any = {}; diff --git a/__test__/safeList.test.ts b/__test__/safeList.test.ts index 8880efc..29be388 100644 --- a/__test__/safeList.test.ts +++ b/__test__/safeList.test.ts @@ -14,8 +14,8 @@ test("should accept the following colors", (t) => { expect(regex.pattern.test("bg-black")).toBe(true); expect(regex.pattern.test("bg-blackInverted")).toBe(true); expect(regex.pattern.test("bg-whiteInverted")).toBe(true); - expect(regex.pattern.test("bg-blue-50")).toBe(true); - expect(regex.pattern.test("bg-blue-100")).toBe(true); + expect(regex.pattern.test("bg-blue-1")).toBe(true); + expect(regex.pattern.test("bg-blue-2")).toBe(true); }); test("should not accept the following colors", (t) => { diff --git a/__test__/theme.test.ts b/__test__/theme.test.ts index 88f6f48..d641cb2 100644 --- a/__test__/theme.test.ts +++ b/__test__/theme.test.ts @@ -118,8 +118,8 @@ test("it should merge 2 object", (t) => { prefersColorScheme: false, // @ts-ignore colors: { - "gray-400": "#4a5568", - "gray-500": "#718096", + "gray-5": "#4a5568", + "gray-6": "#718096", }, }; diff --git a/components/informational/accordion.css b/components/informational/accordion.css index a43520a..7eb2c46 100644 --- a/components/informational/accordion.css +++ b/components/informational/accordion.css @@ -3,19 +3,19 @@ } .accordion { - @apply relative flex flex-col focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-gray-500; + @apply focus-visible:outline-gray-6 relative flex flex-col focus:outline-2 focus-visible:outline focus-visible:outline-offset-2; } .accordion-group-secondary .accordion-title { - @apply bg-gray-200; + @apply bg-gray-3; } .accordion-group-bordered { - @apply overflow-auto rounded-xl border border-gray-500; + @apply border-gray-6 overflow-auto rounded-xl border; } .accordion-title { - @apply relative flex w-full cursor-pointer flex-col border-b border-gray-500 bg-gray-50 py-5 text-left text-xl font-semibold transition-none; + @apply border-gray-6 bg-gray-1 relative flex w-full cursor-pointer flex-col border-b py-5 text-left text-xl font-semibold transition-none; } .accordion-group.accordion-group-bordered @@ -54,15 +54,15 @@ } .accordion-group .accordion.accordion-open .accordion-content { - @apply grid-rows-[1fr] border-b border-gray-500 py-5; + @apply border-gray-6 grid-rows-[1fr] border-b py-5; } .accordion-toggle:checked ~ .accordion-content { - @apply grid-rows-[1fr] border-b border-gray-500 py-5; + @apply border-gray-6 grid-rows-[1fr] border-b py-5; } .accordion:focus .accordion-content { - @apply grid-rows-[1fr] border-b border-gray-500 py-5; + @apply border-gray-6 grid-rows-[1fr] border-b py-5; } .accordion-group.accordion-group-hover .accordion-title, @@ -80,11 +80,11 @@ .accordion-group.accordion-group-hover > .accordion.accordion-open .accordion-title { - @apply bg-gray-200; + @apply bg-gray-3; } .accordion-group.accordion-group-hover > .accordion .accordion-title { - @apply hover:bg-gray-200; + @apply hover:bg-gray-3; } .accordion-icon { diff --git a/components/informational/alert.css b/components/informational/alert.css index 9e92464..4f75754 100644 --- a/components/informational/alert.css +++ b/components/informational/alert.css @@ -1,19 +1,19 @@ .alert { - @apply relative flex w-full flex-row items-center gap-3 rounded-xl bg-gray-300 p-4; + @apply bg-gray-4 relative flex w-full flex-row items-center gap-3 rounded-xl p-4; } .alert-info { - @apply bg-blue-300; + @apply bg-blue-4; } .alert-success { - @apply bg-green-300; + @apply bg-green-4; } .alert-warning { - @apply bg-yellow-300; + @apply bg-yellow-4; } .alert-error { - @apply bg-red-300; + @apply bg-red-4; } diff --git a/components/informational/avatar.css b/components/informational/avatar.css index e10800a..97f188e 100644 --- a/components/informational/avatar.css +++ b/components/informational/avatar.css @@ -1,5 +1,5 @@ .avatar { - @apply relative inline-flex h-10 w-10 max-w-xs bg-gray-200 align-top text-xs; + @apply bg-gray-3 relative inline-flex h-10 w-10 max-w-xs align-top text-xs; } .avatar > * { @@ -23,7 +23,7 @@ } .avatar-ring { - @apply ring-2 ring-gray-500; + @apply ring-gray-6 ring-2; } .avatar-ring-primary { @apply ring-2 ring-primary; @@ -56,11 +56,11 @@ .avatar-online.avatar-squared::before { transform: translate(50%, -50%); - @apply absolute right-0 top-0 flex h-2 w-2 items-center justify-center overflow-auto rounded-full border-2 border-success bg-green-500 content-[""]; + @apply bg-green-6 absolute right-0 top-0 flex h-2 w-2 items-center justify-center overflow-auto rounded-full border-2 border-success content-[""]; } .avatar-online:not(.avatar-squared)::before { - @apply absolute right-0 block h-2 w-2 overflow-auto rounded-full border-2 border-success bg-green-500 content-[""]; + @apply bg-green-6 absolute right-0 block h-2 w-2 overflow-auto rounded-full border-2 border-success content-[""]; } .avatar-group { @@ -81,7 +81,7 @@ .avatar-ring-warning ) ) { - @apply ring-gray-500; + @apply ring-gray-6; } .avatar-xs { diff --git a/components/informational/badge.css b/components/informational/badge.css index 0f8b70a..bcb1265 100644 --- a/components/informational/badge.css +++ b/components/informational/badge.css @@ -1,5 +1,5 @@ .badge { - @apply inline-flex items-center whitespace-nowrap rounded-full border border-gray-200 bg-gray-200 py-[0.3rem] px-2 text-center align-middle text-xs font-bold leading-none text-content1; + @apply border-gray-3 bg-gray-3 inline-flex items-center whitespace-nowrap rounded-full border py-[0.3rem] px-2 text-center align-middle text-xs font-bold leading-none text-content1; } .badge-primary { @@ -23,7 +23,7 @@ } .badge-outline { - @apply border border-gray-500 bg-transparent text-content1; + @apply border-gray-6 border bg-transparent text-content1; } .badge-outline-primary { @@ -47,27 +47,27 @@ } .badge-flat { - @apply border-none bg-transparent bg-gray-300 text-gray-1000; + @apply text-gray-11 bg-gray-4 border-none bg-transparent; } .badge-flat-primary { - @apply border-none bg-blue-300 text-blue-1000; + @apply text-blue-11 bg-blue-4 border-none; } .badge-flat-secondary { - @apply border-none bg-purple-300 text-purple-1000; + @apply text-purple-11 bg-purple-4 border-none; } .badge-flat-success { - @apply border-none bg-green-300 text-green-1000; + @apply text-green-11 bg-green-4 border-none; } .badge-flat-error { - @apply border-none bg-red-300 text-red-1000; + @apply text-red-11 bg-red-4 border-none; } .badge-flat-warning { - @apply border-none bg-yellow-300 text-yellow-1000; + @apply text-yellow-11 bg-yellow-4 border-none; } .badge-xs { diff --git a/components/informational/card.css b/components/informational/card.css index 1e800cc..094e077 100644 --- a/components/informational/card.css +++ b/components/informational/card.css @@ -1,5 +1,5 @@ .card { - @apply flex w-full max-w-sm flex-col gap-2 rounded-xl bg-gray-200 shadow-md; + @apply bg-gray-3 flex w-full max-w-sm flex-col gap-2 rounded-xl shadow-md; } .card.card-image-cover img:first-child { diff --git a/components/informational/divider.css b/components/informational/divider.css index 13c89ca..f9e608e 100644 --- a/components/informational/divider.css +++ b/components/informational/divider.css @@ -8,12 +8,12 @@ .divider::before, .divider-horizontal::before { - @apply h-px w-full bg-gray-500 content-[""]; + @apply bg-gray-6 h-px w-full content-[""]; } .divider::after, .divider-horizontal::after { - @apply h-px w-full bg-gray-500 content-[""]; + @apply bg-gray-6 h-px w-full content-[""]; } .divider-vertical { @@ -21,9 +21,9 @@ } .divider-vertical::before { - @apply h-full w-px bg-gray-500 content-[""]; + @apply bg-gray-6 h-full w-px content-[""]; } .divider-vertical::after { - @apply h-full w-px bg-gray-500 content-[""]; + @apply bg-gray-6 h-full w-px content-[""]; } diff --git a/components/informational/dot.css b/components/informational/dot.css index d2d57b1..e8eb2f5 100644 --- a/components/informational/dot.css +++ b/components/informational/dot.css @@ -1,5 +1,5 @@ .dot { - @apply inline-flex h-2.5 min-h-[10px] w-2.5 min-w-[10px] select-none rounded-[50%] bg-gray-700 leading-3; + @apply bg-gray-8 inline-flex h-2.5 min-h-[10px] w-2.5 min-w-[10px] select-none rounded-[50%] leading-3; } .dot-primary { diff --git a/components/informational/kbd.css b/components/informational/kbd.css index 11e9de3..2dd4c15 100644 --- a/components/informational/kbd.css +++ b/components/informational/kbd.css @@ -1,5 +1,5 @@ .kbd { - @apply inline-flex h-fit items-center justify-center whitespace-nowrap rounded-md border border-gray-500 bg-gray-200 py-1.5 px-2.5 text-xs font-semibold shadow-[0px_1.5px_0px_rgba(0,0,0,0.1)]; + @apply border-gray-6 bg-gray-3 inline-flex h-fit items-center justify-center whitespace-nowrap rounded-md border py-1.5 px-2.5 text-xs font-semibold shadow-[0px_1.5px_0px_rgba(0,0,0,0.1)]; } .kbd-xs { diff --git a/components/informational/menu.css b/components/informational/menu.css index 68da39a..90cf166 100644 --- a/components/informational/menu.css +++ b/components/informational/menu.css @@ -16,7 +16,7 @@ .menu-item { transition: transform 0.12s ease; - @apply flex cursor-pointer select-none flex-row items-center gap-2 rounded-lg px-4 py-2 text-sm text-content1 hover:bg-gray-300 active:scale-[0.97] active:bg-gray-400; + @apply active:bg-gray-5 hover:bg-gray-4 flex cursor-pointer select-none flex-row items-center gap-2 rounded-lg px-4 py-2 text-sm text-content1 active:scale-[0.97]; } .menu-item-disabled { @@ -28,7 +28,7 @@ } .menu-item.menu-active { - @apply bg-gray-400 transition-none active:scale-[1]; + @apply bg-gray-5 transition-none active:scale-[1]; } .menu-toggle { diff --git a/components/informational/modal.css b/components/informational/modal.css index 5a4afb4..9c1b91f 100644 --- a/components/informational/modal.css +++ b/components/informational/modal.css @@ -22,5 +22,5 @@ html:has(.modal-state:checked) { } .modal-content { - @apply relative h-max max-h-[calc(100%-10%)] max-w-lg scale-90 overflow-auto rounded-xl bg-gray-50 p-6 transition duration-75 ease-in-out; + @apply bg-gray-1 relative h-max max-h-[calc(100%-10%)] max-w-lg scale-90 overflow-auto rounded-xl p-6 transition duration-75 ease-in-out; } diff --git a/components/informational/pagination.css b/components/informational/pagination.css index 91399e0..ded6361 100644 --- a/components/informational/pagination.css +++ b/components/informational/pagination.css @@ -3,7 +3,7 @@ } .pagination .btn { - @apply min-w-[2.5rem] border border-transparent px-0 py-2 hover:bg-gray-300; + @apply hover:bg-gray-4 min-w-[2.5rem] border border-transparent px-0 py-2; } .pagination .btn.btn-active { @@ -31,7 +31,7 @@ } .pagination.pagination-bordered .btn { - @apply border border-gray-500; + @apply border-gray-6 border; } .pagination.pagination-bordered .btn.btn-active { diff --git a/components/informational/popover.css b/components/informational/popover.css index 5d254b7..5f1f496 100644 --- a/components/informational/popover.css +++ b/components/informational/popover.css @@ -10,7 +10,7 @@ transition-property: transform, opacity, visibility; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; - @apply invisible absolute left-1/2 right-full z-[49] flex w-56 origin-top -translate-y-2 -translate-x-1/2 scale-95 transform flex-col rounded-xl border border-transparent bg-gray-200 p-2 opacity-0 shadow-lg outline-none; + @apply bg-gray-3 invisible absolute left-1/2 right-full z-[49] flex w-56 origin-top -translate-y-2 -translate-x-1/2 scale-95 transform flex-col rounded-xl border border-transparent p-2 opacity-0 shadow-lg outline-none; } .popover-bottom-center { @@ -149,7 +149,7 @@ @apply visible translate-x-0 translate-y-0 scale-100 opacity-100; } .popover-arrow { - @apply absolute h-[0.7rem] w-[0.7rem] border-transparent bg-gray-200; + @apply bg-gray-3 absolute h-[0.7rem] w-[0.7rem] border-transparent; } .popover-border .popover-content .popover-arrow, .popover-border .popover-content { diff --git a/components/informational/progress.css b/components/informational/progress.css index e0a6049..3f71b55 100644 --- a/components/informational/progress.css +++ b/components/informational/progress.css @@ -8,11 +8,11 @@ } .progress { - @apply relative h-4 w-40 appearance-none overflow-hidden rounded-full bg-gray-400; + @apply bg-gray-5 relative h-4 w-40 appearance-none overflow-hidden rounded-full; } .progress::-webkit-progress-bar { - @apply rounded-full bg-gray-400; + @apply bg-gray-5 rounded-full; } .progress::-moz-progress-bar { @@ -96,49 +96,49 @@ .progress-flat-primary::-webkit-progress-bar, .progress-flat-primary.progress-indeterminate { - @apply bg-blue-400; + @apply bg-blue-5; } .progress-flat-secondary::-webkit-progress-bar, .progress-flat-secondary.progress-indeterminate { - @apply bg-purple-400; + @apply bg-purple-5; } .progress-flat-success::-webkit-progress-bar, .progress-flat-success.progress-indeterminate { - @apply bg-green-400; + @apply bg-green-5; } .progress-flat-error::-webkit-progress-bar, .progress-flat-error.progress-indeterminate { - @apply bg-red-400; + @apply bg-red-5; } .progress-flat-warning::-webkit-progress-bar, .progress-flat-warning.progress-indeterminate { - @apply bg-yellow-400; + @apply bg-yellow-5; } /* Firefox Target */ @supports (-moz-appearance: none) { .progress-flat-primary { - @apply bg-blue-400; + @apply bg-blue-5; } .progress-flat-secondary { - @apply bg-purple-400; + @apply bg-purple-5; } .progress-flat-success { - @apply bg-green-400; + @apply bg-green-5; } .progress-flat-error { - @apply bg-red-400; + @apply bg-red-5; } .progress-flat-warning { - @apply bg-yellow-400; + @apply bg-yellow-5; } .progress-primary::-moz-progress-bar, diff --git a/components/informational/skeleton.css b/components/informational/skeleton.css index 1e39197..6f2aad2 100644 --- a/components/informational/skeleton.css +++ b/components/informational/skeleton.css @@ -23,10 +23,10 @@ animation: skeletonWave 2.5s linear infinite; background: linear-gradient( 270deg, - rgb(var(--gray-800)), - rgb(var(--gray-600)), - rgb(var(--gray-600)), - rgb(var(--gray-800)) + rgb(var(--gray-9)), + rgb(var(--gray-7)), + rgb(var(--gray-7)), + rgb(var(--gray-9)) ); background-size: 400% 100%; transition: opacity 300ms ease-out; @@ -37,5 +37,5 @@ animation: skeletonPulse 2s linear infinite; background: no-repeat; animation-delay: 0.5s; - @apply h-full w-full bg-gray-600; + @apply bg-gray-7 h-full w-full; } diff --git a/components/informational/stepper.css b/components/informational/stepper.css index ba0e3fe..b94205f 100644 --- a/components/informational/stepper.css +++ b/components/informational/stepper.css @@ -23,11 +23,11 @@ } .step-circle { - @apply flex min-h-[2rem] min-w-[2rem] items-center justify-center rounded-full border border-gray-500 bg-gray-200 text-content1; + @apply border-gray-6 bg-gray-3 flex min-h-[2rem] min-w-[2rem] items-center justify-center rounded-full border text-content1; } .step:not(:last-child):after { - @apply relative h-px min-h-0 w-full min-w-[2rem] flex-1 bg-gray-500 content-[""]; + @apply bg-gray-6 relative h-px min-h-0 w-full min-w-[2rem] flex-1 content-[""]; } .steps-horizontal .step:not(:last-child):after { @apply relative h-px min-h-0 w-full min-w-[2rem] flex-1 content-[""]; @@ -59,40 +59,40 @@ .step-done.step-primary .step-circle, .step-done .step-circle { - @apply border-blue-600 bg-blue-300 text-content1; + @apply border-blue-7 bg-blue-4 text-content1; } .step-done.step-primary::after { - @apply bg-blue-600; + @apply bg-blue-7; } .step-done.step-secondary .step-circle { - @apply border-purple-600 bg-purple-300 text-content1; + @apply border-purple-7 bg-purple-4 text-content1; } .step-done.step-secondary::after { - @apply bg-purple-600; + @apply bg-purple-7; } .step-done.step-success .step-circle { - @apply border-green-600 bg-green-300 text-content1; + @apply border-green-7 bg-green-4 text-content1; } .step-done.step-success::after { - @apply bg-green-600; + @apply bg-green-7; } .step-done.step-error .step-circle { - @apply border-red-600 bg-red-300 text-content1; + @apply border-red-7 bg-red-4 text-content1; } .step-done.step-error::after { - @apply bg-red-600; + @apply bg-red-7; } .step-done.step-warning .step-circle { - @apply border-yellow-600 bg-yellow-300 text-content1; + @apply border-yellow-7 bg-yellow-4 text-content1; } .step-done.step-warning::after { - @apply bg-yellow-600; + @apply bg-yellow-7; } diff --git a/components/informational/table.css b/components/informational/table.css index 84b5314..14f0c60 100644 --- a/components/informational/table.css +++ b/components/informational/table.css @@ -4,24 +4,24 @@ } .table > thead > tr th:first-child { - @apply rounded-l-md border-y border-l border-gray-500; + @apply border-gray-6 rounded-l-md border-y border-l; } .table > thead > tr th:last-child { - @apply rounded-r-md border-y border-r border-gray-500; + @apply border-gray-6 rounded-r-md border-y border-r; } .table > thead > tr :not(.th:first-child, .th:last-child) { - @apply border-y border-gray-500; + @apply border-gray-6 border-y; } .table > thead > tr > th { - @apply whitespace-nowrap bg-gray-200 py-4 px-2.5 text-start text-sm font-normal text-content1; + @apply bg-gray-3 whitespace-nowrap py-4 px-2.5 text-start text-sm font-normal text-content1; } .table > tbody > tr > td, .table > tbody > tr > th { - @apply whitespace-nowrap border-b border-gray-500 py-4 px-2.5 text-start text-sm text-content2; + @apply border-gray-6 whitespace-nowrap border-b py-4 px-2.5 text-start text-sm text-content2; } /* Compact */ @@ -56,11 +56,11 @@ /* Zebra */ .table.table-zebra > tbody > tr:nth-child(even) > td, .table.table-zebra > tbody > tr:nth-child(even) > th { - @apply bg-gray-200; + @apply bg-gray-3; } /* Hover */ .table.table-hover > tbody > tr:hover > td, .table.table-hover > tbody > tr:hover > th { - @apply bg-gray-200; + @apply bg-gray-3; } diff --git a/components/informational/tabs.css b/components/informational/tabs.css index c05c770..6c683e1 100644 --- a/components/informational/tabs.css +++ b/components/informational/tabs.css @@ -11,7 +11,7 @@ } .tab-bordered { - @apply border-b-2 border-gray-500 py-2; + @apply border-gray-6 border-b-2 py-2; } .tab { @@ -44,15 +44,15 @@ } .tab-pill:not(.tab-active) { - @apply hover:bg-gray-300 active:bg-gray-400; + @apply active:bg-gray-5 hover:bg-gray-4; } .tab-pill.tab-active { - @apply border-gray-500 bg-gray-400 text-content1; + @apply border-gray-6 bg-gray-5 text-content1; } .tabs-boxed { - @apply rounded-xl bg-gray-200 p-1; + @apply bg-gray-3 rounded-xl p-1; } .tabs-boxed .tab { @@ -60,11 +60,11 @@ } .tabs-boxed .tab:not(.tab-active) { - @apply hover:bg-gray-300 hover:text-content1 active:bg-gray-400; + @apply active:bg-gray-5 hover:bg-gray-4 hover:text-content1; } .tabs-boxed .tab.tab-active { - @apply bg-gray-400 text-content1; + @apply bg-gray-5 text-content1; } .tab-toggle { @@ -84,9 +84,9 @@ } .tab-toggle:checked + .tab.tab-pill { - @apply bg-gray-400 text-content1; + @apply bg-gray-5 text-content1; } .tabs-boxed .tab-toggle:checked + .tab { - @apply bg-gray-400 text-content1; + @apply bg-gray-5 text-content1; } diff --git a/components/inputs/button-group.css b/components/inputs/button-group.css index 5106f5d..f01efe8 100644 --- a/components/inputs/button-group.css +++ b/components/inputs/button-group.css @@ -12,7 +12,7 @@ } .btn-group > .btn:not(.btn-active) { - @apply hover:bg-gray-300 active:bg-gray-400; + @apply active:bg-gray-5 hover:bg-gray-4; } .btn-group > *:last-child { @@ -82,7 +82,7 @@ .btn-group > input[type="radio"]:checked.btn, .btn-group > .btn-active { - @apply bg-gray-400; + @apply bg-gray-5; } /* For rounded btn-group */ diff --git a/components/inputs/button.css b/components/inputs/button.css index 6681e5c..a368cf8 100644 --- a/components/inputs/button.css +++ b/components/inputs/button.css @@ -1,6 +1,10 @@ /* Base Button */ .btn { - @apply inline-flex h-10 cursor-pointer select-none items-center justify-center rounded-xl bg-gray-200 px-5 text-center text-sm font-medium text-content1 transition-transform focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-gray-500 active:scale-[0.97]; + transition-duration: 150ms; + transition-property: background, color, transform; + transition-timing-function: ease-in; + will-change: transform; + @apply focus-visible:outline-gray-6 bg-gray-3 inline-flex h-10 cursor-pointer select-none items-center justify-center rounded-xl px-5 text-center text-sm font-medium text-content1 focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 active:scale-[0.97]; } .btn:where( @@ -36,7 +40,7 @@ /* Outline colors */ .btn-outline { - @apply border-2 border-gray-500 bg-transparent text-whiteInverted transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:border-gray-300 hover:bg-gray-300 focus-visible:outline-gray-600; + @apply focus-visible:outline-gray-7 border-gray-6 hover:border-gray-4 hover:bg-gray-4 border-2 bg-transparent text-whiteInverted transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke]; } .btn-outline-primary { @apply border-2 border-primary bg-transparent text-primary transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-primary hover:text-white focus-visible:outline-primary; @@ -96,7 +100,7 @@ } .btn-loading { - @apply pointer-events-none cursor-not-allowed select-none before:mr-2 before:box-border before:h-4 before:w-4 before:animate-spin before:rounded-[50%] before:border-2 before:border-gray-500 before:border-t-gray-800 before:content-['']; + @apply before:border-t-gray-9 before:border-gray-6 pointer-events-none cursor-not-allowed select-none before:mr-2 before:box-border before:h-4 before:w-4 before:animate-spin before:rounded-[50%] before:border-2 before:content-['']; } .btn-no-animation { @@ -104,9 +108,9 @@ } .btn-ghost { - @apply border-none bg-transparent text-whiteInverted transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-gray-300; + @apply hover:bg-gray-4 border-none bg-transparent text-whiteInverted transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke]; } .btn-active { - @apply bg-gray-400; + @apply bg-gray-5; } diff --git a/components/inputs/checkbox.css b/components/inputs/checkbox.css index 405a11c..8aec6bb 100644 --- a/components/inputs/checkbox.css +++ b/components/inputs/checkbox.css @@ -1,12 +1,12 @@ .checkbox { -webkit-appearance: none; -moz-appearance: none; - --checkbox-bg: rgb(var(--gray-50)); - --checkbox-border: rgb(var(--gray-500)); + --checkbox-bg: rgb(var(--gray-1)); + --checkbox-border: rgb(var(--gray-6)); --checkbox-bg-checked: rgb(var(--primary)); --checkbox-border-checked: rgb(var(--primary)); - --checkbox-border-hover: rgb(var(--gray-600)); - --checkbox-bg-hover: rgb(var(--gray-200)); + --checkbox-border-hover: rgb(var(--gray-7)); + --checkbox-bg-hover: rgb(var(--gray-3)); --checkline-color: rgb(var(--white)); transition: background 0.3s, border-color 0.3s, box-shadow 0.2s; @apply relative m-0 inline-block h-5 w-5 cursor-pointer appearance-none rounded-md border border-[var(--checkbox-border)] bg-[var(--checkbox-bg)] align-top accent-backgroundPrimary outline-none focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-primary; @@ -28,7 +28,7 @@ } .checkbox:disabled { - @apply cursor-not-allowed border-gray-600 bg-gray-600 opacity-50; + @apply border-gray-7 bg-gray-7 cursor-not-allowed opacity-50; } .checkbox:disabled + label { diff --git a/components/inputs/dropdown.css b/components/inputs/dropdown.css index 12e0c2e..6fadea4 100644 --- a/components/inputs/dropdown.css +++ b/components/inputs/dropdown.css @@ -7,16 +7,16 @@ } .dropdown-menu { - @apply invisible absolute right-0 z-[49] flex w-56 origin-top-right -translate-y-2 scale-95 transform flex-col rounded-xl bg-gray-200 p-2 opacity-0 shadow-2xl outline-none transition-all; + @apply bg-gray-3 invisible absolute right-0 z-[49] flex w-56 origin-top-right -translate-y-2 scale-95 transform flex-col rounded-xl p-2 opacity-0 shadow-2xl outline-none transition-all; } .dropdown-item { transition: transform 0.12s ease; - @apply flex w-full cursor-pointer flex-col rounded-[5px] p-2 hover:bg-gray-300 active:scale-[0.97] active:bg-gray-400; + @apply active:bg-gray-5 hover:bg-gray-4 flex w-full cursor-pointer flex-col rounded-[5px] p-2 active:scale-[0.97]; } .dropdown-item.dropdown-active { - @apply transition-none hover:bg-gray-400 active:scale-[1]; + @apply hover:bg-gray-5 transition-none active:scale-[1]; } .dropdown-divider { @@ -24,11 +24,11 @@ } .dropdown-divider::before { - @apply absolute top-0 right-0 -left-2 h-px bg-gray-500 content-[""]; + @apply bg-gray-6 absolute top-0 right-0 -left-2 h-px content-[""]; } .dropdown-active { - @apply bg-gray-400; + @apply bg-gray-5; } .dropdown-item-no-animation { diff --git a/components/inputs/input.css b/components/inputs/input.css index 5a14c61..8c163b2 100644 --- a/components/inputs/input.css +++ b/components/inputs/input.css @@ -1,5 +1,5 @@ .input { - @apply h-10 w-full max-w-xs rounded-xl border-2 border-gray-500 bg-gray-50 px-3 text-base text-content1 outline-none; + @apply border-gray-6 bg-gray-1 h-10 w-full max-w-xs rounded-xl border-2 px-3 text-base text-content1 outline-none; } /* Colors */ diff --git a/components/inputs/radio.css b/components/inputs/radio.css index cb8dd89..6b8c1b1 100644 --- a/components/inputs/radio.css +++ b/components/inputs/radio.css @@ -1,12 +1,12 @@ .radio { -webkit-appearance: none; -moz-appearance: none; - --radio-bg: rgb(var(--gray-50)); - --radio-border: rgb(var(--gray-500)); + --radio-bg: rgb(var(--gray-1)); + --radio-border: rgb(var(--gray-6)); --radio-bg-checked: rgb(var(--primary)); --radio-border-checked: rgb(var(--primary)); - --radio-border-hover: rgb(var(--gray-600)); - --radio-bg-hover: rgb(var(--gray-200)); + --radio-border-hover: rgb(var(--gray-7)); + --radio-bg-hover: rgb(var(--gray-3)); --checkline-color: rgb(var(--white)); transition: background 0.3s, border-color 0.3s, box-shadow 0.2s; @apply relative m-0 flex h-5 w-5 cursor-pointer appearance-none items-center justify-center rounded-full border border-[var(--radio-border)] bg-[var(--radio-bg)] align-top accent-backgroundPrimary focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-primary; @@ -20,7 +20,7 @@ --r: 43deg; } .radio:disabled { - @apply cursor-not-allowed border-gray-600 bg-gray-600 opacity-50; + @apply border-gray-7 bg-gray-7 cursor-not-allowed opacity-50; } .radio:disabled + label { diff --git a/components/inputs/range.css b/components/inputs/range.css index a30bffb..3eab110 100644 --- a/components/inputs/range.css +++ b/components/inputs/range.css @@ -3,7 +3,7 @@ --circle-color: rgb(var(--white)); --left-track-color: rgb(var(--primary)); --circle-border: rgb(var(--primary)); - --track-color: rgb(var(--gray-400)); + --track-color: rgb(var(--gray-5)); --brightness-hover: 180%; --brightness-down: 80%; --thumb-height: 1.125em; @@ -161,35 +161,35 @@ .range-flat-primary { --left-track-color: rgb(var(--primary)); --circle-border: rgb(var(--primary)); - --track-color: rgb(var(--blue-400)); + --track-color: rgb(var(--blue-5)); @apply text-primary; } .range-flat-secondary { --left-track-color: rgb(var(--secondary)); --circle-border: rgb(var(--secondary)); - --track-color: rgb(var(--purple-400)); + --track-color: rgb(var(--purple-5)); @apply text-secondary; } .range-flat-success { --left-track-color: rgb(var(--success)); --circle-border: rgb(var(--success)); - --track-color: rgb(var(--green-400)); + --track-color: rgb(var(--green-5)); @apply text-success; } .range-flat-error { --left-track-color: rgb(var(--error)); --circle-border: rgb(var(--error)); - --track-color: rgb(var(--red-400)); + --track-color: rgb(var(--red-5)); @apply text-error; } .range-flat-warning { --left-track-color: rgb(var(--warning)); --circle-border: rgb(var(--warning)); - --track-color: rgb(var(--yellow-400)); + --track-color: rgb(var(--yellow-5)); @apply text-warning; } diff --git a/components/inputs/select.css b/components/inputs/select.css index 55c1609..081089e 100644 --- a/components/inputs/select.css +++ b/components/inputs/select.css @@ -4,7 +4,7 @@ background-image: url("data:image/svg+xml,%3Csvg class='select-icon' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: %237E868C;transform: ;msFilter:;'%3E%3Cpath d='M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z'%3E%3C/path%3E%3C/svg%3E"); background-position: right 0.5rem center; background-size: 1.5em 1.5em; - @apply h-10 w-full max-w-xs rounded-xl border-2 border-gray-500 bg-gray-50 bg-no-repeat px-3 text-base text-content1 outline-none; + @apply border-gray-6 bg-gray-1 h-10 w-full max-w-xs rounded-xl border-2 bg-no-repeat px-3 text-base text-content1 outline-none; } .select-primary { diff --git a/components/inputs/switch.css b/components/inputs/switch.css index 07d7221..4ac982b 100644 --- a/components/inputs/switch.css +++ b/components/inputs/switch.css @@ -1,14 +1,14 @@ .switch { -webkit-appearance: none; -moz-appearance: none; - --switch-bg: rgb(var(--gray-500)); - --switch-border: rgb(var(--gray-500)); + --switch-bg: rgb(var(--gray-6)); + --switch-border: rgb(var(--gray-6)); --switch-bg-checked: rgb(var(--primary)); --switch-border-checked: rgb(var(--primary)); - --switch-border-hover: rgb(var(--gray-600)); - --switch-bg-hover: rgb(var(--gray-500)); + --switch-border-hover: rgb(var(--gray-7)); + --switch-bg-hover: rgb(var(--gray-6)); --checkline-color: rgb(var(--white)); - --circle-color: rgb(var(--gray-50)); + --circle-color: rgb(var(--gray-1)); transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; @apply relative m-0 inline-block h-[21px] w-[38px] cursor-pointer appearance-none rounded-xl border border-[var(--switch-border)] bg-[var(--switch-bg)] align-top outline-none focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-primary; } @@ -27,7 +27,7 @@ } .switch:disabled { - @apply cursor-not-allowed border-gray-600 bg-gray-600 opacity-50; + @apply border-gray-7 bg-gray-7 cursor-not-allowed opacity-50; } .switch:disabled:checked { @@ -134,18 +134,18 @@ /* Ghost */ .switch-ghost-primary { - --switch-bg: rgb(var(--gray-50)); - --circle-color: rgb(var(--gray-500)); - --switch-bg-hover: rgb(var(--gray-50)); + --switch-bg: rgb(var(--gray-1)); + --circle-color: rgb(var(--gray-6)); + --switch-bg-hover: rgb(var(--gray-1)); --switch-border-hover: rgb(var(--primary)); --switch-bg-checked: rgb(var(--primary)); @apply focus-visible:outline-primary; } .switch-ghost-secondary { - --switch-bg: rgb(var(--gray-50)); - --circle-color: rgb(var(--gray-500)); - --switch-bg-hover: rgb(var(--gray-50)); + --switch-bg: rgb(var(--gray-1)); + --circle-color: rgb(var(--gray-6)); + --switch-bg-hover: rgb(var(--gray-1)); --switch-border-hover: rgb(var(--secondary)); --switch-border-checked: rgb(var(--secondary)); --switch-bg-checked: rgb(var(--secondary)); @@ -153,9 +153,9 @@ } .switch-ghost-success { - --switch-bg: rgb(var(--gray-50)); - --circle-color: rgb(var(--gray-500)); - --switch-bg-hover: rgb(var(--gray-50)); + --switch-bg: rgb(var(--gray-1)); + --circle-color: rgb(var(--gray-6)); + --switch-bg-hover: rgb(var(--gray-1)); --switch-border-hover: rgb(var(--success)); --switch-border-checked: rgb(var(--success)); --switch-bg-checked: rgb(var(--success)); @@ -163,9 +163,9 @@ } .switch-ghost-error { - --switch-bg: rgb(var(--gray-50)); - --circle-color: rgb(var(--gray-500)); - --switch-bg-hover: rgb(var(--gray-50)); + --switch-bg: rgb(var(--gray-1)); + --circle-color: rgb(var(--gray-6)); + --switch-bg-hover: rgb(var(--gray-1)); --switch-border-hover: rgb(var(--error)); --switch-border-checked: rgb(var(--error)); --switch-bg-checked: rgb(var(--error)); @@ -173,9 +173,9 @@ } .switch-ghost-warning { - --switch-bg: rgb(var(--gray-50)); - --circle-color: rgb(var(--gray-500)); - --switch-bg-hover: rgb(var(--gray-50)); + --switch-bg: rgb(var(--gray-1)); + --circle-color: rgb(var(--gray-6)); + --switch-bg-hover: rgb(var(--gray-1)); --switch-border-hover: rgb(var(--warning)); --switch-border-checked: rgb(var(--warning)); --switch-bg-checked: rgb(var(--warning)); diff --git a/components/inputs/textarea.css b/components/inputs/textarea.css index bc7cdb4..f1f632d 100644 --- a/components/inputs/textarea.css +++ b/components/inputs/textarea.css @@ -1,5 +1,5 @@ .textarea { - @apply h-fit w-full max-w-xs rounded-xl border-2 border-gray-500 bg-gray-50 py-2.5 px-3 text-base text-content1 outline-none; + @apply border-gray-6 bg-gray-1 h-fit w-full max-w-xs rounded-xl border-2 py-2.5 px-3 text-base text-content1 outline-none; } /* Colors */ diff --git a/components/navigation/drawer.css b/components/navigation/drawer.css index 87d1370..7b49c3d 100644 --- a/components/navigation/drawer.css +++ b/components/navigation/drawer.css @@ -7,7 +7,7 @@ html:has(.drawer-toggle:checked) { } .drawer { - @apply fixed top-0 left-0 z-[9999] h-screen w-full max-w-xs -translate-x-full overflow-auto bg-gray-50 transition-transform duration-150 ease-out; + @apply bg-gray-1 fixed top-0 left-0 z-[9999] h-screen w-full max-w-xs -translate-x-full overflow-auto transition-transform duration-150 ease-out; } .drawer-right { diff --git a/components/navigation/link.css b/components/navigation/link.css index 51b302c..4cea694 100644 --- a/components/navigation/link.css +++ b/components/navigation/link.css @@ -1,6 +1,6 @@ .link { transition-property: color, background-color, transform, underline; - @apply inline-flex cursor-pointer items-center text-base text-content1 duration-150 hover:text-content2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500; + @apply focus-visible:outline-gray-6 inline-flex cursor-pointer items-center text-base text-content1 duration-150 hover:text-content2 focus-visible:outline-2 focus-visible:outline-offset-2; } .link-primary { @@ -32,7 +32,7 @@ } .link-ghost { - @apply rounded-2xl py-1 px-2 hover:bg-gray-300 hover:text-content1; + @apply hover:bg-gray-4 rounded-2xl py-1 px-2 hover:text-content1; } .link-ghost-primary { diff --git a/components/navigation/navbar.css b/components/navigation/navbar.css index 505c666..f185c0d 100644 --- a/components/navigation/navbar.css +++ b/components/navigation/navbar.css @@ -1,8 +1,8 @@ .navbar { - @apply flex w-full items-center bg-gray-50 px-2 py-2.5 shadow-xl sm:px-4; + @apply bg-gray-1 flex w-full items-center px-2 py-2.5 shadow-xl sm:px-4; } .navbar-bordered { - @apply border-b border-gray-500; + @apply border-gray-6 border-b; } .navbar-sticky { @@ -18,7 +18,7 @@ } .navbar-glass { - @apply bg-gray-50/70 backdrop-blur-[8px] backdrop-saturate-[50%]; + @apply bg-gray-1/70 backdrop-blur-[8px] backdrop-saturate-[50%]; } .navbar-rounded { diff --git a/config/colors/blue.ts b/config/colors/blue.ts index 461d76e..193a1f1 100644 --- a/config/colors/blue.ts +++ b/config/colors/blue.ts @@ -2,31 +2,31 @@ import { ColorsTheme } from "../types/theme.types"; import { hexToRGB } from "../utils/hexToRGB"; export const blue: ColorsTheme<"blue"> = { - "blue-50": "251 253 255", - "blue-100": "245 250 255", - "blue-200": "237 246 255", - "blue-300": "225 240 255", - "blue-400": "206 231 254", - "blue-500": "183 217 248", - "blue-600": "150 199 242", - "blue-700": "94 176 239", - "blue-800": "0 145 255", - "blue-900": "0 129 241", - "blue-1000": "0 106 220", - "blue-1100": "0 37 77", + "blue-1": "251 253 255", + "blue-2": "245 250 255", + "blue-3": "237 246 255", + "blue-4": "225 240 255", + "blue-5": "206 231 254", + "blue-6": "183 217 248", + "blue-7": "150 199 242", + "blue-8": "94 176 239", + "blue-9": "0 145 255", + "blue-10": "0 129 241", + "blue-11": "0 106 220", + "blue-12": "0 37 77", }; export const blueDark: ColorsTheme<"blue"> = { - "blue-50": "15 23 32", - "blue-100": "15 27 45", - "blue-200": "16 36 62", - "blue-300": "16 42 76", - "blue-400": "15 48 88", - "blue-500": "13 56 104", - "blue-600": "10 68 129", - "blue-700": "9 84 165", - "blue-800": "0 145 255", - "blue-900": "54 158 255", - "blue-1000": "82 169 255", - "blue-1100": "234 246 255", + "blue-1": "15 23 32", + "blue-2": "15 27 45", + "blue-3": "16 36 62", + "blue-4": "16 42 76", + "blue-5": "15 48 88", + "blue-6": "13 56 104", + "blue-7": "10 68 129", + "blue-8": "9 84 165", + "blue-9": "0 145 255", + "blue-10": "54 158 255", + "blue-11": "82 169 255", + "blue-12": "234 246 255", }; diff --git a/config/colors/cyan.ts b/config/colors/cyan.ts index 675718c..ae50768 100644 --- a/config/colors/cyan.ts +++ b/config/colors/cyan.ts @@ -1,31 +1,31 @@ import { ColorsTheme } from "../types/theme.types"; export const cyan: ColorsTheme<"cyan"> = { - "cyan-50": "250 253 254", - "cyan-100": "242 252 253", - "cyan-200": "231 249 251", - "cyan-300": "216 243 246", - "cyan-400": "196 234 239", - "cyan-500": "170 222 230", - "cyan-600": "132 205 218", - "cyan-700": "61 185 207", - "cyan-800": "5 162 194", - "cyan-900": "8 148 179", - "cyan-1000": "12 119 146", - "cyan-1100": "4 49 60", + "cyan-1": "250 253 254", + "cyan-2": "242 252 253", + "cyan-3": "231 249 251", + "cyan-4": "216 243 246", + "cyan-5": "196 234 239", + "cyan-6": "170 222 230", + "cyan-7": "132 205 218", + "cyan-8": "61 185 207", + "cyan-9": "5 162 194", + "cyan-10": "8 148 179", + "cyan-11": "12 119 146", + "cyan-12": "4 49 60", }; export const cyanDark: ColorsTheme<"cyan"> = { - "cyan-50": "7 25 29", - "cyan-100": "6 30 36", - "cyan-200": "7 40 48", - "cyan-300": "7 48 59", - "cyan-400": "7 56 68", - "cyan-500": "6 65 80", - "cyan-600": "4 80 99", - "cyan-700": "0 100 125", - "cyan-800": "5 162 194", - "cyan-900": "0 177 204", - "cyan-1000": "0 194 215", - "cyan-1100": "225 248 250", + "cyan-1": "7 25 29", + "cyan-2": "6 30 36", + "cyan-3": "7 40 48", + "cyan-4": "7 48 59", + "cyan-5": "7 56 68", + "cyan-6": "6 65 80", + "cyan-7": "4 80 99", + "cyan-8": "0 100 125", + "cyan-9": "5 162 194", + "cyan-10": "0 177 204", + "cyan-11": "0 194 215", + "cyan-12": "225 248 250", }; diff --git a/config/colors/gray.ts b/config/colors/gray.ts index 464d443..51e3526 100644 --- a/config/colors/gray.ts +++ b/config/colors/gray.ts @@ -1,31 +1,31 @@ import { ColorsTheme } from "../types/theme.types"; export const gray: ColorsTheme<"gray"> = { - "gray-50": "252 252 252", - "gray-100": "248 248 248", - "gray-200": "243 243 243", - "gray-300": "237 237 237", - "gray-400": "232 232 232", - "gray-500": "226 226 226", - "gray-600": "219 219 219", - "gray-700": "199 199 199", - "gray-800": "143 143 143", - "gray-900": "133 133 133", - "gray-1000": "111 111 111", - "gray-1100": "23 23 23", + "gray-1": "252 252 252", + "gray-2": "248 248 248", + "gray-3": "243 243 243", + "gray-4": "237 237 237", + "gray-5": "232 232 232", + "gray-6": "226 226 226", + "gray-7": "219 219 219", + "gray-8": "199 199 199", + "gray-9": "143 143 143", + "gray-10": "133 133 133", + "gray-11": "111 111 111", + "gray-12": "23 23 23", }; export const grayDark: ColorsTheme<"gray"> = { - "gray-50": "22 22 22", - "gray-100": "28 28 28", - "gray-200": "35 35 35", - "gray-300": "40 40 40", - "gray-400": "46 46 46", - "gray-500": "52 52 52", - "gray-600": "62 62 62", - "gray-700": "80 80 80", - "gray-800": "112 112 112", - "gray-900": "126 126 126", - "gray-1000": "160 160 160", - "gray-1100": "237 237 237", + "gray-1": "22 22 22", + "gray-2": "28 28 28", + "gray-3": "35 35 35", + "gray-4": "40 40 40", + "gray-5": "46 46 46", + "gray-6": "52 52 52", + "gray-7": "62 62 62", + "gray-8": "80 80 80", + "gray-9": "112 112 112", + "gray-10": "126 126 126", + "gray-11": "160 160 160", + "gray-12": "237 237 237", }; diff --git a/config/colors/green.ts b/config/colors/green.ts index c48f986..bf648d5 100644 --- a/config/colors/green.ts +++ b/config/colors/green.ts @@ -1,31 +1,31 @@ import { ColorsTheme } from "../types/theme.types"; export const green: ColorsTheme<"green"> = { - "green-50": "251 254 252", - "green-100": "242 252 245", - "green-200": "233 249 238", - "green-300": "221 243 228", - "green-400": "204 235 215", - "green-500": "180 223 196", - "green-600": "146 206 172", - "green-700": "91 185 140", - "green-800": "48 164 108", - "green-900": "41 151 100", - "green-1000": "24 121 78", - "green-1100": "21 50 38", + "green-1": "251 254 252", + "green-2": "242 252 245", + "green-3": "233 249 238", + "green-4": "221 243 228", + "green-5": "204 235 215", + "green-6": "180 223 196", + "green-7": "146 206 172", + "green-8": "91 185 140", + "green-9": "48 164 108", + "green-10": "41 151 100", + "green-11": "24 121 78", + "green-12": "21 50 38", }; export const greenDark: ColorsTheme<"green"> = { - "green-50": "13 25 18", - "green-100": "12 31 23", - "green-200": "15 41 30", - "green-300": "17 49 35", - "green-400": "19 57 41", - "green-500": "22 68 48", - "green-600": "27 84 58", - "green-700": "35 110 74", - "green-800": "48 164 108", - "green-900": "60 177 121", - "green-1000": "76 195 138", - "green-1100": "229 251 235", + "green-1": "13 25 18", + "green-2": "12 31 23", + "green-3": "15 41 30", + "green-4": "17 49 35", + "green-5": "19 57 41", + "green-6": "22 68 48", + "green-7": "27 84 58", + "green-8": "35 110 74", + "green-9": "48 164 108", + "green-10": "60 177 121", + "green-11": "76 195 138", + "green-12": "229 251 235", }; diff --git a/config/colors/pink.ts b/config/colors/pink.ts index d5ceb59..a08227a 100644 --- a/config/colors/pink.ts +++ b/config/colors/pink.ts @@ -1,31 +1,31 @@ import { ColorsTheme } from "../types/theme.types"; export const pink: ColorsTheme<"pink"> = { - "pink-50": "255 252 254", - "pink-100": "255 247 252", - "pink-200": "254 238 248", - "pink-300": "252 229 243", - "pink-400": "249 216 236", - "pink-500": "243 198 226", - "pink-600": "236 173 212", - "pink-700": "227 142 195", - "pink-800": "214 64 159", - "pink-900": "210 49 151", - "pink-1000": "205 29 141", - "pink-1100": "59 10 42", + "pink-1": "255 252 254", + "pink-2": "255 247 252", + "pink-3": "254 238 248", + "pink-4": "252 229 243", + "pink-5": "249 216 236", + "pink-6": "243 198 226", + "pink-7": "236 173 212", + "pink-8": "227 142 195", + "pink-9": "214 64 159", + "pink-10":"210 49 151", + "pink-11": "205 29 141", + "pink-12": "59 10 42", }; export const pinkDark: ColorsTheme<"pink"> = { - "pink-50": "31 18 27", - "pink-100": "39 20 33", - "pink-200": "58 24 47", - "pink-300": "69 26 55", - "pink-400": "80 27 63", - "pink-500": "96 29 72", - "pink-600": "122 29 90", - "pink-700": "167 24 115", - "pink-800": "214 64 159", - "pink-900": "227 75 169", - "pink-1000": "246 92 182", - "pink-1100": "254 235 247", + "pink-1": "31 18 27", + "pink-2": "39 20 33", + "pink-3": "58 24 47", + "pink-4": "69 26 55", + "pink-5": "80 27 63", + "pink-6": "96 29 72", + "pink-7": "122 29 90", + "pink-8": "167 24 115", + "pink-9": "214 64 159", + "pink-10":"227 75 169", + "pink-11": "246 92 182", + "pink-12": "254 235 247", }; diff --git a/config/colors/purple.ts b/config/colors/purple.ts index 46f3d83..b4792ff 100644 --- a/config/colors/purple.ts +++ b/config/colors/purple.ts @@ -1,31 +1,31 @@ import { ColorsTheme } from "../types/theme.types"; export const purple: ColorsTheme<"purple"> = { - "purple-50": "254 252 254", - "purple-100": "253 250 255", - "purple-200": "249 241 254", - "purple-300": "243 231 252", - "purple-400": "237 219 249", - "purple-500": "227 204 244", - "purple-600": "211 180 237", - "purple-700": "190 147 228", - "purple-800": "142 78 198", - "purple-900": "132 69 188", - "purple-1000": "121 58 175", - "purple-1100": "43 14 68", + "purple-1": "254 252 254", + "purple-2": "253 250 255", + "purple-3": "249 241 254", + "purple-4": "243 231 252", + "purple-5": "237 219 249", + "purple-6": "227 204 244", + "purple-7": "211 180 237", + "purple-8": "190 147 228", + "purple-9": "142 78 198", + "purple-10": "132 69 188", + "purple-11": "121 58 175", + "purple-12": "43 14 68", }; export const purpleDark: ColorsTheme<"purple"> = { - "purple-50": "27 20 29", - "purple-100": "34 21 39", - "purple-200": "48 26 58", - "purple-300": "58 30 72", - "purple-400": "67 33 85", - "purple-500": "78 38 103", - "purple-600": "95 45 132", - "purple-700": "121 56 178", - "purple-800": "142 78 198", - "purple-900": "157 91 210", - "purple-1000": "191 122 240", - "purple-1100": "247 236 252", + "purple-1": "27 20 29", + "purple-2": "34 21 39", + "purple-3": "48 26 58", + "purple-4": "58 30 72", + "purple-5": "67 33 85", + "purple-6": "78 38 103", + "purple-7": "95 45 132", + "purple-8": "121 56 178", + "purple-9": "142 78 198", + "purple-10": "157 91 210", + "purple-11": "191 122 240", + "purple-12": "247 236 252", }; diff --git a/config/colors/red.ts b/config/colors/red.ts index 7e91978..454e58b 100644 --- a/config/colors/red.ts +++ b/config/colors/red.ts @@ -1,31 +1,31 @@ import { ColorsTheme } from "../types/theme.types"; export const red: ColorsTheme<"red"> = { - "red-50": "255 252 252", - "red-100": "255 248 248", - "red-200": "255 239 239", - "red-300": "255 229 229", - "red-400": "253 216 216", - "red-500": "249 198 198", - "red-600": "243 174 175", - "red-700": "235 144 145", - "red-800": "229 72 77", - "red-900": "220 61 67", - "red-1000": "205 43 49", - "red-1100": "56 19 22", + "red-1": "255 252 252", + "red-2": "255 248 248", + "red-3": "255 239 239", + "red-4": "255 229 229", + "red-5": "253 216 216", + "red-6": "249 198 198", + "red-7": "243 174 175", + "red-8": "235 144 145", + "red-9": "229 72 77", + "red-10": "220 61 67", + "red-11": "205 43 49", + "red-12": "56 19 22", }; export const redDark: ColorsTheme<"red"> = { - "red-50": "31 19 21", - "red-100": "41 20 21", - "red-200": "60 24 26", - "red-300": "72 26 29", - "red-400": "84 27 31", - "red-500": "103 30 34", - "red-600": "130 32 37", - "red-700": "170 36 41", - "red-800": "229 72 77", - "red-900": "242 85 90", - "red-1000": "255 99 105", - "red-1100": "254 236 238", + "red-1": "31 19 21", + "red-2": "41 20 21", + "red-3": "60 24 26", + "red-4": "72 26 29", + "red-5": "84 27 31", + "red-6": "103 30 34", + "red-7": "130 32 37", + "red-8": "170 36 41", + "red-9": "229 72 77", + "red-10": "242 85 90", + "red-11": "255 99 105", + "red-12": "254 236 238", }; diff --git a/config/colors/slate.ts b/config/colors/slate.ts index b92c2f4..94a4a5a 100644 --- a/config/colors/slate.ts +++ b/config/colors/slate.ts @@ -1,31 +1,31 @@ import { ColorsTheme } from "../types/theme.types"; export const slate: ColorsTheme<"slate"> = { - "slate-50": "251 252 253", - "slate-100": "248 249 250", - "slate-200": "241 243 245", - "slate-300": "236 238 240", - "slate-400": "230 232 235", - "slate-500": "223 227 230", - "slate-600": "215 219 223", - "slate-700": "193 200 205", - "slate-800": "136 144 150", - "slate-900": "126 134 140", - "slate-1000": "104 112 118", - "slate-1100": "17 24 28", + "slate-1": "251 252 253", + "slate-2": "248 249 250", + "slate-3": "241 243 245", + "slate-4": "236 238 240", + "slate-5": "230 232 235", + "slate-6": "223 227 230", + "slate-7": "215 219 223", + "slate-8": "193 200 205", + "slate-9": "136 144 150", + "slate-10": "126 134 140", + "slate-11": "104 112 118", + "slate-12": "17 24 28", }; export const slateDark: ColorsTheme<"slate"> = { - "slate-50": "21 23 24", - "slate-100": "26 29 30", - "slate-200": "32 36 37", - "slate-300": "38 41 43", - "slate-400": "43 47 49", - "slate-500": "49 53 56", - "slate-600": "58 63 66", - "slate-700": "76 81 85", - "slate-800": "105 113 119", - "slate-900": "120 127 133", - "slate-1000": "155 161 166", - "slate-1100": "236 237 238", + "slate-1": "21 23 24", + "slate-2": "26 29 30", + "slate-3": "32 36 37", + "slate-4": "38 41 43", + "slate-5": "43 47 49", + "slate-6": "49 53 56", + "slate-7": "58 63 66", + "slate-8": "76 81 85", + "slate-9": "105 113 119", + "slate-10": "120 127 133", + "slate-11": "155 161 166", + "slate-12": "236 237 238", }; diff --git a/config/colors/yellow.ts b/config/colors/yellow.ts index 485c845..59d6696 100644 --- a/config/colors/yellow.ts +++ b/config/colors/yellow.ts @@ -1,31 +1,31 @@ import { ColorsTheme } from "../types/theme.types"; export const yellow: ColorsTheme<"yellow"> = { - "yellow-50": "253 253 249", - "yellow-100": "255 252 232", - "yellow-200": "255 251 209", - "yellow-300": "255 248 187", - "yellow-400": "254 242 164", - "yellow-500": "249 230 140", - "yellow-600": "239 211 108", - "yellow-700": "235 188 0", - "yellow-800": "245 217 10", - "yellow-900": "247 206 0", - "yellow-1000": "148 104 0", - "yellow-1100": "53 41 15", + "yellow-1": "253 253 249", + "yellow-2": "255 252 232", + "yellow-3": "255 251 209", + "yellow-4": "255 248 187", + "yellow-5": "254 242 164", + "yellow-6": "249 230 140", + "yellow-7": "239 211 108", + "yellow-8": "235 188 0", + "yellow-9": "245 217 10", + "yellow-10": "247 206 0", + "yellow-11": "148 104 0", + "yellow-12": "53 41 15", }; export const yellowDark: ColorsTheme<"yellow"> = { - "yellow-50": "28 21 0", - "yellow-100": "34 26 0", - "yellow-200": "44 33 0", - "yellow-300": "53 40 0", - "yellow-400": "62 48 0", - "yellow-500": "73 60 0", - "yellow-600": "89 74 5", - "yellow-700": "112 94 0", - "yellow-800": "245 217 10", - "yellow-900": "255 239 92", - "yellow-1000": "240 192 0", - "yellow-1100": "255 250 209", + "yellow-1": "28 21 0", + "yellow-2": "34 26 0", + "yellow-3": "44 33 0", + "yellow-4": "53 40 0", + "yellow-5": "62 48 0", + "yellow-6": "73 60 0", + "yellow-7": "89 74 5", + "yellow-8": "112 94 0", + "yellow-9": "245 217 10", + "yellow-10": "255 239 92", + "yellow-11": "240 192 0", + "yellow-12": "255 250 209", }; diff --git a/config/theme/var-theme.ts b/config/theme/var-theme.ts index 84f9cb3..697bf07 100644 --- a/config/theme/var-theme.ts +++ b/config/theme/var-theme.ts @@ -9,137 +9,137 @@ import { import { applyOpacityValue } from "../utils/applyOpacityValue"; const blue: ColorsVariables<"blue"> = { - "blue-50": applyOpacityValue("--blue-50"), - "blue-100": applyOpacityValue("--blue-100"), - "blue-200": applyOpacityValue("--blue-200"), - "blue-300": applyOpacityValue("--blue-300"), - "blue-400": applyOpacityValue("--blue-400"), - "blue-500": applyOpacityValue("--blue-500"), - "blue-600": applyOpacityValue("--blue-600"), - "blue-700": applyOpacityValue("--blue-700"), - "blue-800": applyOpacityValue("--blue-800"), - "blue-900": applyOpacityValue("--blue-900"), - "blue-1000": applyOpacityValue("--blue-1000"), - "blue-1100": applyOpacityValue("--blue-1100"), + "blue-1": applyOpacityValue("--blue-1"), + "blue-2": applyOpacityValue("--blue-2"), + "blue-3": applyOpacityValue("--blue-3"), + "blue-4": applyOpacityValue("--blue-4"), + "blue-5": applyOpacityValue("--blue-5"), + "blue-6": applyOpacityValue("--blue-6"), + "blue-7": applyOpacityValue("--blue-7"), + "blue-8": applyOpacityValue("--blue-8"), + "blue-9": applyOpacityValue("--blue-9"), + "blue-10": applyOpacityValue("--blue-10"), + "blue-11": applyOpacityValue("--blue-11"), + "blue-12": applyOpacityValue("--blue-12"), }; const green: ColorsVariables<"green"> = { - "green-50": applyOpacityValue("--green-50"), - "green-100": applyOpacityValue("--green-100"), - "green-200": applyOpacityValue("--green-200"), - "green-300": applyOpacityValue("--green-300"), - "green-400": applyOpacityValue("--green-400"), - "green-500": applyOpacityValue("--green-500"), - "green-600": applyOpacityValue("--green-600"), - "green-700": applyOpacityValue("--green-700"), - "green-800": applyOpacityValue("--green-800"), - "green-900": applyOpacityValue("--green-900"), - "green-1000": applyOpacityValue("--green-1000"), - "green-1100": applyOpacityValue("--green-1100"), + "green-1": applyOpacityValue("--green-1"), + "green-2": applyOpacityValue("--green-2"), + "green-3": applyOpacityValue("--green-3"), + "green-4": applyOpacityValue("--green-4"), + "green-5": applyOpacityValue("--green-5"), + "green-6": applyOpacityValue("--green-6"), + "green-7": applyOpacityValue("--green-7"), + "green-8": applyOpacityValue("--green-8"), + "green-9": applyOpacityValue("--green-9"), + "green-10": applyOpacityValue("--green-10"), + "green-11": applyOpacityValue("--green-11"), + "green-12": applyOpacityValue("--green-12"), }; const cyan: ColorsVariables<"cyan"> = { - "cyan-50": applyOpacityValue("--cyan-50"), - "cyan-100": applyOpacityValue("--cyan-100"), - "cyan-200": applyOpacityValue("--cyan-200"), - "cyan-300": applyOpacityValue("--cyan-300"), - "cyan-400": applyOpacityValue("--cyan-400"), - "cyan-500": applyOpacityValue("--cyan-500"), - "cyan-600": applyOpacityValue("--cyan-600"), - "cyan-700": applyOpacityValue("--cyan-700"), - "cyan-800": applyOpacityValue("--cyan-800"), - "cyan-900": applyOpacityValue("--cyan-900"), - "cyan-1000": applyOpacityValue("--cyan-1000"), - "cyan-1100": applyOpacityValue("--cyan-1100"), + "cyan-1": applyOpacityValue("--cyan-1"), + "cyan-2": applyOpacityValue("--cyan-2"), + "cyan-3": applyOpacityValue("--cyan-3"), + "cyan-4": applyOpacityValue("--cyan-4"), + "cyan-5": applyOpacityValue("--cyan-5"), + "cyan-6": applyOpacityValue("--cyan-6"), + "cyan-7": applyOpacityValue("--cyan-7"), + "cyan-8": applyOpacityValue("--cyan-8"), + "cyan-9": applyOpacityValue("--cyan-9"), + "cyan-10": applyOpacityValue("--cyan-10"), + "cyan-11": applyOpacityValue("--cyan-11"), + "cyan-12": applyOpacityValue("--cyan-12"), }; const gray: ColorsVariables<"gray"> = { - "gray-50": applyOpacityValue("--gray-50"), - "gray-100": applyOpacityValue("--gray-100"), - "gray-200": applyOpacityValue("--gray-200"), - "gray-300": applyOpacityValue("--gray-300"), - "gray-400": applyOpacityValue("--gray-400"), - "gray-500": applyOpacityValue("--gray-500"), - "gray-600": applyOpacityValue("--gray-600"), - "gray-700": applyOpacityValue("--gray-700"), - "gray-800": applyOpacityValue("--gray-800"), - "gray-900": applyOpacityValue("--gray-900"), - "gray-1000": applyOpacityValue("--gray-1000"), - "gray-1100": applyOpacityValue("--gray-1100"), + "gray-1": applyOpacityValue("--gray-1"), + "gray-2": applyOpacityValue("--gray-2"), + "gray-3": applyOpacityValue("--gray-3"), + "gray-4": applyOpacityValue("--gray-4"), + "gray-5": applyOpacityValue("--gray-5"), + "gray-6": applyOpacityValue("--gray-6"), + "gray-7": applyOpacityValue("--gray-7"), + "gray-8": applyOpacityValue("--gray-8"), + "gray-9": applyOpacityValue("--gray-9"), + "gray-10": applyOpacityValue("--gray-10"), + "gray-11": applyOpacityValue("--gray-11"), + "gray-12": applyOpacityValue("--gray-12"), }; const pink: ColorsVariables<"pink"> = { - "pink-50": applyOpacityValue("--pink-50"), - "pink-100": applyOpacityValue("--pink-100"), - "pink-200": applyOpacityValue("--pink-200"), - "pink-300": applyOpacityValue("--pink-300"), - "pink-400": applyOpacityValue("--pink-400"), - "pink-500": applyOpacityValue("--pink-500"), - "pink-600": applyOpacityValue("--pink-600"), - "pink-700": applyOpacityValue("--pink-700"), - "pink-800": applyOpacityValue("--pink-800"), - "pink-900": applyOpacityValue("--pink-900"), - "pink-1000": applyOpacityValue("--pink-1000"), - "pink-1100": applyOpacityValue("--pink-1100"), + "pink-1": applyOpacityValue("--pink-1"), + "pink-2": applyOpacityValue("--pink-2"), + "pink-3": applyOpacityValue("--pink-3"), + "pink-4": applyOpacityValue("--pink-4"), + "pink-5": applyOpacityValue("--pink-5"), + "pink-6": applyOpacityValue("--pink-6"), + "pink-7": applyOpacityValue("--pink-7"), + "pink-8": applyOpacityValue("--pink-8"), + "pink-9": applyOpacityValue("--pink-9"), + "pink-10": applyOpacityValue("--pink-10"), + "pink-11": applyOpacityValue("--pink-11"), + "pink-12": applyOpacityValue("--pink-12"), }; const purple: ColorsVariables<"purple"> = { - "purple-50": applyOpacityValue("--purple-50"), - "purple-100": applyOpacityValue("--purple-100"), - "purple-200": applyOpacityValue("--purple-200"), - "purple-300": applyOpacityValue("--purple-300"), - "purple-400": applyOpacityValue("--purple-400"), - "purple-500": applyOpacityValue("--purple-500"), - "purple-600": applyOpacityValue("--purple-600"), - "purple-700": applyOpacityValue("--purple-700"), - "purple-800": applyOpacityValue("--purple-800"), - "purple-900": applyOpacityValue("--purple-900"), - "purple-1000": applyOpacityValue("--purple-1000"), - "purple-1100": applyOpacityValue("--purple-1100"), + "purple-1": applyOpacityValue("--purple-1"), + "purple-2": applyOpacityValue("--purple-2"), + "purple-3": applyOpacityValue("--purple-3"), + "purple-4": applyOpacityValue("--purple-4"), + "purple-5": applyOpacityValue("--purple-5"), + "purple-6": applyOpacityValue("--purple-6"), + "purple-7": applyOpacityValue("--purple-7"), + "purple-8": applyOpacityValue("--purple-8"), + "purple-9": applyOpacityValue("--purple-9"), + "purple-10": applyOpacityValue("--purple-10"), + "purple-11": applyOpacityValue("--purple-11"), + "purple-12": applyOpacityValue("--purple-12"), }; const yellow: ColorsVariables<"yellow"> = { - "yellow-50": applyOpacityValue("--yellow-50"), - "yellow-100": applyOpacityValue("--yellow-100"), - "yellow-200": applyOpacityValue("--yellow-200"), - "yellow-300": applyOpacityValue("--yellow-300"), - "yellow-400": applyOpacityValue("--yellow-400"), - "yellow-500": applyOpacityValue("--yellow-500"), - "yellow-600": applyOpacityValue("--yellow-600"), - "yellow-700": applyOpacityValue("--yellow-700"), - "yellow-800": applyOpacityValue("--yellow-800"), - "yellow-900": applyOpacityValue("--yellow-900"), - "yellow-1000": applyOpacityValue("--yellow-1000"), - "yellow-1100": applyOpacityValue("--yellow-1100"), + "yellow-1": applyOpacityValue("--yellow-1"), + "yellow-2": applyOpacityValue("--yellow-2"), + "yellow-3": applyOpacityValue("--yellow-3"), + "yellow-4": applyOpacityValue("--yellow-4"), + "yellow-5": applyOpacityValue("--yellow-5"), + "yellow-6": applyOpacityValue("--yellow-6"), + "yellow-7": applyOpacityValue("--yellow-7"), + "yellow-8": applyOpacityValue("--yellow-8"), + "yellow-9": applyOpacityValue("--yellow-9"), + "yellow-10": applyOpacityValue("--yellow-10"), + "yellow-11": applyOpacityValue("--yellow-11"), + "yellow-12": applyOpacityValue("--yellow-12"), }; const red: ColorsVariables<"red"> = { - "red-50": applyOpacityValue("--red-50"), - "red-100": applyOpacityValue("--red-100"), - "red-200": applyOpacityValue("--red-200"), - "red-300": applyOpacityValue("--red-300"), - "red-400": applyOpacityValue("--red-400"), - "red-500": applyOpacityValue("--red-500"), - "red-600": applyOpacityValue("--red-600"), - "red-700": applyOpacityValue("--red-700"), - "red-800": applyOpacityValue("--red-800"), - "red-900": applyOpacityValue("--red-900"), - "red-1000": applyOpacityValue("--red-1000"), - "red-1100": applyOpacityValue("--red-1100"), + "red-1": applyOpacityValue("--red-1"), + "red-2": applyOpacityValue("--red-2"), + "red-3": applyOpacityValue("--red-3"), + "red-4": applyOpacityValue("--red-4"), + "red-5": applyOpacityValue("--red-5"), + "red-6": applyOpacityValue("--red-6"), + "red-7": applyOpacityValue("--red-7"), + "red-8": applyOpacityValue("--red-8"), + "red-9": applyOpacityValue("--red-9"), + "red-10": applyOpacityValue("--red-10"), + "red-11": applyOpacityValue("--red-11"), + "red-12": applyOpacityValue("--red-12"), }; const slate: ColorsVariables<"slate"> = { - "slate-50": applyOpacityValue("--slate-50"), - "slate-100": applyOpacityValue("--slate-100"), - "slate-200": applyOpacityValue("--slate-200"), - "slate-300": applyOpacityValue("--slate-300"), - "slate-400": applyOpacityValue("--slate-400"), - "slate-500": applyOpacityValue("--slate-500"), - "slate-600": applyOpacityValue("--slate-600"), - "slate-700": applyOpacityValue("--slate-700"), - "slate-800": applyOpacityValue("--slate-800"), - "slate-900": applyOpacityValue("--slate-900"), - "slate-1000": applyOpacityValue("--slate-1000"), - "slate-1100": applyOpacityValue("--slate-1100"), + "slate-1": applyOpacityValue("--slate-1"), + "slate-2": applyOpacityValue("--slate-2"), + "slate-3": applyOpacityValue("--slate-3"), + "slate-4": applyOpacityValue("--slate-4"), + "slate-5": applyOpacityValue("--slate-5"), + "slate-6": applyOpacityValue("--slate-6"), + "slate-7": applyOpacityValue("--slate-7"), + "slate-8": applyOpacityValue("--slate-8"), + "slate-9": applyOpacityValue("--slate-9"), + "slate-10": applyOpacityValue("--slate-10"), + "slate-11": applyOpacityValue("--slate-11"), + "slate-12": applyOpacityValue("--slate-12"), }; const background: BackgroundVariables = { backgroundPrimary: applyOpacityValue("--backgroundPrimary"), diff --git a/config/types/theme.types.ts b/config/types/theme.types.ts index a0e443d..16a3882 100644 --- a/config/types/theme.types.ts +++ b/config/types/theme.types.ts @@ -12,18 +12,18 @@ export type ColorScale = | "slate"; export type PalleteScale = - | "50" - | "100" - | "200" - | "300" - | "400" - | "500" - | "600" - | "700" - | "800" - | "900" - | "1000" - | "1100"; + | "1" + | "2" + | "3" + | "4" + | "5" + | "6" + | "7" + | "8" + | "9" + | "10" + | "11" + | "12"; export type BaseScale = | "primary" diff --git a/config/utils/safeList.ts b/config/utils/safeList.ts index 1df1b12..7e31932 100644 --- a/config/utils/safeList.ts +++ b/config/utils/safeList.ts @@ -3,7 +3,7 @@ import { SafelistConfig } from "tailwindcss/types/config"; export const safeList: Partial = [ { pattern: - /^(bg|to|via|from|text|fill|stroke|border|outline)-((primary|secondary|warning|error|success|content1|content2|content3|backgroundPrimary|backgroundSecondary|border|black|white|whiteInverted|blackInverted)|((blue|red|green|purple|pink|gray|cyan|slate)-(50|100|200|300|400|500|600|700|800|900)))/, + /^(bg|to|via|from|text|fill|stroke|border|outline)-((primary|secondary|warning|error|success|content1|content2|content3|backgroundPrimary|backgroundSecondary|border|black|white|whiteInverted|blackInverted)|((blue|red|green|purple|pink|gray|cyan|slate)-(1|2|3|4|5|6|7|8|9|10)\D))/, variants: [ // "first", // "last", diff --git a/docs/components/icons/BookIcon.tsx b/docs/components/icons/BookIcon.tsx index 16a5a1a..89c1947 100644 --- a/docs/components/icons/BookIcon.tsx +++ b/docs/components/icons/BookIcon.tsx @@ -13,7 +13,7 @@ export const BookIcon = () => { fillRule="evenodd" clipRule="evenodd" d="M15.5 7c1.093 0 2.617.27 3.5.743V17c-.883-.473-2.407-.743-3.5-.743s-2.117.27-3 .743V7.743a6.344 6.344 0 0 1 3-.743Z" - className="fill-purple-700 " + className="fill-purple-8 " > ); diff --git a/docs/components/mdx/ExamplesRepositories.tsx b/docs/components/mdx/ExamplesRepositories.tsx index ed8d634..1848f33 100644 --- a/docs/components/mdx/ExamplesRepositories.tsx +++ b/docs/components/mdx/ExamplesRepositories.tsx @@ -9,7 +9,7 @@ export const ExamplesRepositories = () => { "https://github.com/Siumauricio/rippleui/tree/main/examples/my-react-app" } target="_blank" - className="flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 hover:bg-gray-300" + className="hover:bg-gray-4 flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1" > { "https://github.com/Siumauricio/rippleui/tree/main/examples/nextjs-example" } target="_blank" - className="flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 hover:bg-gray-300 " + className="hover:bg-gray-4 flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 " > { "https://github.com/Siumauricio/rippleui/tree/main/examples/vuejs-example" } target="_blank" - className="flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 hover:bg-gray-300 " + className="hover:bg-gray-4 flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 " > { "https://github.com/Siumauricio/rippleui/tree/main/examples/my-angular-project" } target="_blank" - className="flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 hover:bg-gray-300 " + className="hover:bg-gray-4 flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 " > { "https://github.com/Siumauricio/rippleui/tree/main/examples/my-remix-app" } target="_blank" - className="flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 hover:bg-gray-300 " + className="hover:bg-gray-4 flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 " > { "https://github.com/Siumauricio/rippleui/tree/main/examples/gastby-example" } target="_blank" - className="flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 hover:bg-gray-300 " + className="hover:bg-gray-4 flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 " > { "https://github.com/Siumauricio/rippleui/tree/main/examples/my-svelte-app" } target="_blank" - className="flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 hover:bg-gray-300 " + className="hover:bg-gray-4 flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 " > { "https://codi.link/PGxpbmsNCiAgcmVsPSJzdHlsZXNoZWV0Ig0KICBocmVmPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL3JpcHBsZXVpL2Rpc3QvY3NzL3N0eWxlcy5jc3MiDQovPg0KDQo8IS0tIEFuZCAtLT4NCjxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0Pg0KDQo8YnV0dG9uIGNsYXNzPSJidG4gYnRuLXByaW1hcnkiPkhlbGxvIFdvcmxkITwvYnV0dG9uPg==%7C%7C" } target="_blank" - className="flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 hover:bg-gray-300 " + className="hover:bg-gray-4 flex w-fit cursor-pointer flex-col gap-2 rounded-lg border border-border p-5 transition-transform hover:-translate-y-1 " > { { aria-label="Anchor" > ​ -
+
{
@@ -41,9 +41,9 @@ export const Community = () => { aria-label="RippleUI Github" href={"https://github.com/Siumauricio/rippleui"} target="_blank" - className="card cursor-pointer p-8 shadow-md transition-colors hover:bg-gray-300" + className="card cursor-pointer p-8 shadow-md transition-colors hover:bg-gray-4" > -
+
{ -
+
{ disabledFormat > {``}
@@ -55,7 +55,7 @@ export const Comparison = () => { Click me `} - +
Another comparison. @@ -69,8 +69,8 @@ export const Comparison = () => { disabledFormat > {` { `}
@@ -123,7 +123,7 @@ export const Comparison = () => {
`} @@ -137,7 +137,7 @@ export const Comparison = () => { />
diff --git a/docs/components/styles/Footer.tsx b/docs/components/styles/Footer.tsx index e335dae..07db676 100644 --- a/docs/components/styles/Footer.tsx +++ b/docs/components/styles/Footer.tsx @@ -4,7 +4,7 @@ import { LogoIcon } from "../icons/LogoIcon"; export const Footer = () => { return ( -