Skip to content

Tailwind v4 support #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eshimischi wants to merge 17 commits into
base: main
Choose a base branch
from
Open

Tailwind v4 support #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
dddfc82
chore(dep): update
Mar 22, 2026
c3bf15b
chore: remove needless spaces here and there
Mar 22, 2026
998aa2c
chore(dep): update
Mar 22, 2026
1fa8019
chore(tsconfig): nodenext as module resolution
Mar 22, 2026
5294d2b
refctor(bitrix24ui): Typescript adaptation
Mar 22, 2026
b867f92
chore(index): update
Mar 22, 2026
1f0ab6a
refactor(tailwind.config.ts): TS adaptation
Mar 22, 2026
948e56b
chore(docs): postcss update Tailwind v4
Mar 22, 2026
b46e756
chore(docs): update
Mar 22, 2026
df2afe9
chore(playground): update Tailwind v4
Mar 22, 2026
9c1b4fd
chore(playground): update vite.config and postcss.config
Mar 22, 2026
c1a9bbc
refactor(playground): update Tailwind v4
Mar 22, 2026
d118b98
chore: update
Mar 22, 2026
c99c5b4
chore: update .gitignore
Mar 22, 2026
8ab2c66
chore: exclude tailwind.config from tsc
Mar 22, 2026
f970dac
chore(docs): update
Mar 22, 2026
9913eac
chore(docs): update
Mar 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
203 changes: 203 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,206 @@ docs/.vitepress/cache

# vercel
.vercel
/public/fonts/comforter-brush/comforter-brush-regular.woff2
/public/fonts/montserrat/montserrat-bold.eot
/public/fonts/montserrat/montserrat-bold.ttf
/public/fonts/montserrat/montserrat-bold.woff
/public/fonts/montserrat/montserrat-bold.woff2
/public/fonts/montserrat/montserrat-bolditalic.eot
/public/fonts/montserrat/montserrat-bolditalic.ttf
/public/fonts/montserrat/montserrat-bolditalic.woff
/public/fonts/montserrat/montserrat-light.eot
/public/fonts/montserrat/montserrat-light.ttf
/public/fonts/montserrat/montserrat-light.woff
/public/fonts/montserrat/montserrat-lightitalic.eot
/public/fonts/montserrat/montserrat-lightitalic.ttf
/public/fonts/montserrat/montserrat-lightitalic.woff
/public/fonts/montserrat/montserrat-medium.eot
/public/fonts/montserrat/montserrat-medium.ttf
/public/fonts/montserrat/montserrat-medium.woff
/public/fonts/montserrat/montserrat-medium.woff2
/public/fonts/montserrat/montserrat-mediumitalic.eot
/public/fonts/montserrat/montserrat-mediumitalic.ttf
/public/fonts/montserrat/montserrat-mediumitalic.woff
/public/fonts/montserrat/montserrat-regular.eot
/public/fonts/montserrat/montserrat-regular.ttf
/public/fonts/montserrat/montserrat-regular.woff
/public/fonts/montserrat/montserrat-regular.woff2
/public/fonts/montserrat/montserrat-regularitalic.eot
/public/fonts/montserrat/montserrat-regularitalic.ttf
/public/fonts/montserrat/montserrat-regularitalic.woff
/public/fonts/montserrat/montserrat-semibold.eot
/public/fonts/montserrat/montserrat-semibold.ttf
/public/fonts/montserrat/montserrat-semibold.woff
/public/fonts/montserrat/montserrat-semibold.woff2
/public/fonts/montserrat/montserrat-semibolditalic.eot
/public/fonts/montserrat/montserrat-semibolditalic.ttf
/public/fonts/montserrat/montserrat-semibolditalic.woff
/public/fonts/opensans/opensans-bold.eot
/public/fonts/opensans/opensans-bold.ttf
/public/fonts/opensans/opensans-bold.woff
/public/fonts/opensans/opensans-light.eot
/public/fonts/opensans/opensans-light.ttf
/public/fonts/opensans/opensans-light.woff
/public/fonts/opensans/opensans-regular.eot
/public/fonts/opensans/opensans-regular.ttf
/public/fonts/opensans/opensans-regular.woff
/public/fonts/opensans/opensans-semibold.eot
/public/fonts/opensans/opensans-semibold.ttf
/public/fonts/opensans/opensans-semibold.woff
/public/fonts/roboto/roboto-bold-webfont.woff
/public/fonts/roboto/roboto-bold-webfont.woff2
/public/fonts/roboto/roboto-bolditalic-webfont.woff
/public/fonts/roboto/roboto-bolditalic-webfont.woff2
/public/fonts/roboto/roboto-italic-webfont.woff
/public/fonts/roboto/roboto-italic-webfont.woff2
/public/fonts/roboto/roboto-light-webfont.woff
/public/fonts/roboto/roboto-light-webfont.woff2
/public/fonts/roboto/roboto-lightitalic-webfont.woff
/public/fonts/roboto/roboto-lightitalic-webfont.woff2
/public/fonts/roboto/roboto-medium-webfont.woff
/public/fonts/roboto/roboto-medium-webfont.woff2
/public/fonts/roboto/roboto-mediumitalic-webfont.woff
/public/fonts/roboto/roboto-mediumitalic-webfont.woff2
/public/fonts/roboto/roboto-regular-webfont.woff
/public/fonts/roboto/roboto-regular-webfont.woff2
/public/fonts/robotomono/robotomono-bold.eot
/public/fonts/robotomono/robotomono-bold.ttf
/public/fonts/robotomono/robotomono-bold.woff
/public/fonts/robotomono/robotomono-bold.woff2
/public/fonts/robotomono/robotomono-bolditalic.eot
/public/fonts/robotomono/robotomono-bolditalic.ttf
/public/fonts/robotomono/robotomono-bolditalic.woff
/public/fonts/robotomono/robotomono-bolditalic.woff2
/public/fonts/robotomono/robotomono-light.eot
/public/fonts/robotomono/robotomono-light.ttf
/public/fonts/robotomono/robotomono-light.woff
/public/fonts/robotomono/robotomono-light.woff2
/public/fonts/robotomono/robotomono-lightitalic.eot
/public/fonts/robotomono/robotomono-lightitalic.ttf
/public/fonts/robotomono/robotomono-lightitalic.woff
/public/fonts/robotomono/robotomono-lightitalic.woff2
/public/fonts/robotomono/robotomono-medium.eot
/public/fonts/robotomono/robotomono-medium.ttf
/public/fonts/robotomono/robotomono-medium.woff
/public/fonts/robotomono/robotomono-medium.woff2
/public/fonts/robotomono/robotomono-mediumitalic.eot
/public/fonts/robotomono/robotomono-mediumitalic.ttf
/public/fonts/robotomono/robotomono-mediumitalic.woff
/public/fonts/robotomono/robotomono-mediumitalic.woff2
/public/fonts/robotomono/robotomono-regular.eot
/public/fonts/robotomono/robotomono-regular.ttf
/public/fonts/robotomono/robotomono-regular.woff
/public/fonts/robotomono/robotomono-regular.woff2
/public/fonts/robotomono/robotomono-regularitalic.eot
/public/fonts/robotomono/robotomono-regularitalic.ttf
/public/fonts/robotomono/robotomono-regularitalic.woff
/public/fonts/robotomono/robotomono-regularitalic.woff2
/public/fonts/robotomono/robotomono-semibold.eot
/public/fonts/robotomono/robotomono-semibold.ttf
/public/fonts/robotomono/robotomono-semibold.woff
/public/fonts/robotomono/robotomono-semibolditalic.eot
/public/fonts/robotomono/robotomono-semibolditalic.ttf
/public/fonts/robotomono/robotomono-semibolditalic.woff
/asset/css/fonts/comforter-brush/comforter-brush-regular.woff2
/asset/css/fonts/montserrat/montserrat-bold.eot
/asset/css/fonts/montserrat/montserrat-bold.ttf
/asset/css/fonts/montserrat/montserrat-bold.woff
/asset/css/fonts/montserrat/montserrat-bold.woff2
/asset/css/fonts/montserrat/montserrat-bolditalic.eot
/asset/css/fonts/montserrat/montserrat-bolditalic.ttf
/asset/css/fonts/montserrat/montserrat-bolditalic.woff
/asset/css/fonts/montserrat/montserrat-light.eot
/asset/css/fonts/montserrat/montserrat-light.ttf
/asset/css/fonts/montserrat/montserrat-light.woff
/asset/css/fonts/montserrat/montserrat-lightitalic.eot
/asset/css/fonts/montserrat/montserrat-lightitalic.ttf
/asset/css/fonts/montserrat/montserrat-lightitalic.woff
/asset/css/fonts/montserrat/montserrat-medium.eot
/asset/css/fonts/montserrat/montserrat-medium.ttf
/asset/css/fonts/montserrat/montserrat-medium.woff
/asset/css/fonts/montserrat/montserrat-medium.woff2
/asset/css/fonts/montserrat/montserrat-mediumitalic.eot
/asset/css/fonts/montserrat/montserrat-mediumitalic.ttf
/asset/css/fonts/montserrat/montserrat-mediumitalic.woff
/asset/css/fonts/montserrat/montserrat-regular.eot
/asset/css/fonts/montserrat/montserrat-regular.ttf
/asset/css/fonts/montserrat/montserrat-regular.woff
/asset/css/fonts/montserrat/montserrat-regular.woff2
/asset/css/fonts/montserrat/montserrat-regularitalic.eot
/asset/css/fonts/montserrat/montserrat-regularitalic.ttf
/asset/css/fonts/montserrat/montserrat-regularitalic.woff
/asset/css/fonts/montserrat/montserrat-semibold.eot
/asset/css/fonts/montserrat/montserrat-semibold.ttf
/asset/css/fonts/montserrat/montserrat-semibold.woff
/asset/css/fonts/montserrat/montserrat-semibold.woff2
/asset/css/fonts/montserrat/montserrat-semibolditalic.eot
/asset/css/fonts/montserrat/montserrat-semibolditalic.ttf
/asset/css/fonts/montserrat/montserrat-semibolditalic.woff
/asset/css/fonts/opensans/opensans-bold.eot
/asset/css/fonts/opensans/opensans-bold.ttf
/asset/css/fonts/opensans/opensans-bold.woff
/asset/css/fonts/opensans/opensans-light.eot
/asset/css/fonts/opensans/opensans-light.ttf
/asset/css/fonts/opensans/opensans-light.woff
/asset/css/fonts/opensans/opensans-regular.eot
/asset/css/fonts/opensans/opensans-regular.ttf
/asset/css/fonts/opensans/opensans-regular.woff
/asset/css/fonts/opensans/opensans-semibold.eot
/asset/css/fonts/opensans/opensans-semibold.ttf
/asset/css/fonts/opensans/opensans-semibold.woff
/asset/css/fonts/roboto/roboto-bold-webfont.woff
/asset/css/fonts/roboto/roboto-bold-webfont.woff2
/asset/css/fonts/roboto/roboto-bolditalic-webfont.woff
/asset/css/fonts/roboto/roboto-bolditalic-webfont.woff2
/asset/css/fonts/roboto/roboto-italic-webfont.woff
/asset/css/fonts/roboto/roboto-italic-webfont.woff2
/asset/css/fonts/roboto/roboto-light-webfont.woff
/asset/css/fonts/roboto/roboto-light-webfont.woff2
/asset/css/fonts/roboto/roboto-lightitalic-webfont.woff
/asset/css/fonts/roboto/roboto-lightitalic-webfont.woff2
/asset/css/fonts/roboto/roboto-medium-webfont.woff
/asset/css/fonts/roboto/roboto-medium-webfont.woff2
/asset/css/fonts/roboto/roboto-mediumitalic-webfont.woff
/asset/css/fonts/roboto/roboto-mediumitalic-webfont.woff2
/asset/css/fonts/roboto/roboto-regular-webfont.woff
/asset/css/fonts/roboto/roboto-regular-webfont.woff2
/asset/css/fonts/robotomono/robotomono-bold.eot
/asset/css/fonts/robotomono/robotomono-bold.ttf
/asset/css/fonts/robotomono/robotomono-bold.woff
/asset/css/fonts/robotomono/robotomono-bold.woff2
/asset/css/fonts/robotomono/robotomono-bolditalic.eot
/asset/css/fonts/robotomono/robotomono-bolditalic.ttf
/asset/css/fonts/robotomono/robotomono-bolditalic.woff
/asset/css/fonts/robotomono/robotomono-bolditalic.woff2
/asset/css/fonts/robotomono/robotomono-light.eot
/asset/css/fonts/robotomono/robotomono-light.ttf
/asset/css/fonts/robotomono/robotomono-light.woff
/asset/css/fonts/robotomono/robotomono-light.woff2
/asset/css/fonts/robotomono/robotomono-lightitalic.eot
/asset/css/fonts/robotomono/robotomono-lightitalic.ttf
/asset/css/fonts/robotomono/robotomono-lightitalic.woff
/asset/css/fonts/robotomono/robotomono-lightitalic.woff2
/asset/css/fonts/robotomono/robotomono-medium.eot
/asset/css/fonts/robotomono/robotomono-medium.ttf
/asset/css/fonts/robotomono/robotomono-medium.woff
/asset/css/fonts/robotomono/robotomono-medium.woff2
/asset/css/fonts/robotomono/robotomono-mediumitalic.eot
/asset/css/fonts/robotomono/robotomono-mediumitalic.ttf
/asset/css/fonts/robotomono/robotomono-mediumitalic.woff
/asset/css/fonts/robotomono/robotomono-mediumitalic.woff2
/asset/css/fonts/robotomono/robotomono-regular.eot
/asset/css/fonts/robotomono/robotomono-regular.ttf
/asset/css/fonts/robotomono/robotomono-regular.woff
/asset/css/fonts/robotomono/robotomono-regular.woff2
/asset/css/fonts/robotomono/robotomono-regularitalic.eot
/asset/css/fonts/robotomono/robotomono-regularitalic.ttf
/asset/css/fonts/robotomono/robotomono-regularitalic.woff
/asset/css/fonts/robotomono/robotomono-regularitalic.woff2
/asset/css/fonts/robotomono/robotomono-semibold.eot
/asset/css/fonts/robotomono/robotomono-semibold.ttf
/asset/css/fonts/robotomono/robotomono-semibold.woff
/asset/css/fonts/robotomono/robotomono-semibolditalic.eot
/asset/css/fonts/robotomono/robotomono-semibolditalic.ttf
/asset/css/fonts/robotomono/robotomono-semibolditalic.woff
/tailwind.config.js
26 changes: 11 additions & 15 deletions docs/.vitepress/components/ColorPalette.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ const props = withDefaults(defineProps<Props>(), {})
</script>

<template>
<div class="color-palette" data-class="relative flex">
<div class="color-palette--inner" data-class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="color-palette" data-class="flex relative">
<div class="color-palette--inner" data-class="flex gap-x-3 items-center w-full cursor-pointer sm:block sm:space-y-1.5">
<div class="color-palette--value"
:style="{backgroundColor: color.value}"
data-class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full"
data-class="w-10 h-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full"
></div>
<div class="color-palette--is-default" v-if="color.isDefault" data-class="absolute -top-2 -left-1 bg-accent-light-blue text-white px-2xs py-3xs text-5xs rounded-lg">default</div>
<div class="color-palette--is-default" v-if="color.isDefault" data-class="absolute -left-1 -top-2 text-white rounded-lg bg-accent-light-blue px-2xs py-3xs text-5xs">default</div>
<div class="color-palette--wrapper-title" data-class="px-0.5">
<div class="color-palette--title" data-class="w-6 font-medium text-xs text-gray-900 2xl:w-full dark:text-white">
<div class="color-palette--title" data-class="w-6 text-xs font-medium text-gray-900 2xl:w-full dark:text-white">
{{ color.title }}
</div>
<div class="color-palette--title-data" data-class="text-gray-500 text-xs font-mono lowercase dark:text-gray-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
Expand All @@ -35,15 +35,14 @@ const props = withDefaults(defineProps<Props>(), {})
{
position: relative;
display: flex;

--sh-ring-offset-width: 0px;
--sh-ring-offset-color: #fff;
--sh-shadow: 0 0 #0000;
--sh-ring-color: #6b64641a;
--sh-ring-inset: inset;
--sh-ring-offset-shadow: var(--sh-ring-inset) 0 0 0 var(--sh-ring-offset-width) var(--sh-ring-offset-color);
--sh-ring-shadow: var(--sh-ring-inset) 0 0 0 calc(1px + var(--sh-ring-offset-width)) var(--sh-ring-color);

--sh-title-color: #0f172a;
--sh-title-data-color: #64748b;
}
Expand All @@ -52,7 +51,6 @@ const props = withDefaults(defineProps<Props>(), {})
{
--sh-ring-offset-color: #fff;
--sh-ring-color: #ffffff57;

--sh-title-color: #ffffff;
--sh-title-data-color: #64748b;
}
Expand All @@ -70,7 +68,6 @@ const props = withDefaults(defineProps<Props>(), {})
height: 2.5rem;
width: 2.5rem;
border-radius: .25rem;

box-shadow: var(--sh-ring-offset-shadow), var(--sh-ring-shadow), var(--sh-shadow, 0 0 #0000);
}

Expand Down Expand Up @@ -119,25 +116,25 @@ const props = withDefaults(defineProps<Props>(), {})
{
display: block;
}

.color-palette--value
{
width: 100%;
}

.color-palette--is-default
{
--sh-space-y-reverse: 0;
margin-top: calc(0.375rem* calc(1 - var(--sh-space-y-reverse)));
margin-bottom: calc(0.375rem* var(--sh-space-y-reverse));
}

.color-palette--inner>:not([hidden])~:not([hidden]) {
--sh-space-y-reverse: 0;
margin-top: calc(.375rem* calc(1 - var(--sh-space-y-reverse)));
margin-bottom: calc(.375rem* var(--sh-space-y-reverse));
}

.color-palette--title-data
{
font-size: .625rem;
Expand All @@ -164,12 +161,11 @@ const props = withDefaults(defineProps<Props>(), {})
{
width: 100%;
}

.color-palette--title-data
{
font-size: .75rem;
line-height: 1rem;
}
}

</style>
Loading