mirror of
https://github.com/imfing/hextra.git
synced 2025-07-01 18:07:16 -04:00
chore: migrate to Tailwind CSS v4.0 (#632)
* chore: migrate PostCSS configuration to v4 * chore: update dependencies in package.json and package-lock.json - Bump versions for autoprefixer, postcss, postcss-cli, prettier, and tailwindcss. - Remove unused dependencies to streamline the project. * chore: add @tailwindcss/postcss and update package-lock.json * fix: update import paths in CSS files for consistency * fix: change prefix from `hx-` to `hx:` * chore: migrate primary color theme variables to CSS * fix: remove unnecessary text decoration property from anchor styles in typography CSS * fix: update CSS styles for improved consistency and clarity across components * chore: clean up package.json and package-lock.json, remove unused dependencies, and update CSS imports for better organization * fix: bulk replace prefix `hx-` with `hx:` * fix: update tailwind css prefix * fix: styling consistent issues - steps counter fix in v4 - removed tailwind.css - update hr border colors - fix button cursor in v4 - fix border colors in various places * fix: update class prefixes for consistency in menu and sidebar components * fix: refine CSS classes and transitions for navbar and sidebar components - Updated hamburger menu styles for improved animation and structure. - Adjusted sidebar transition duration for smoother effects. - Standardized class prefixes for consistency across components. * fix: update border color in hero badge component for improved styling consistency * fix: update tab button cursor style for improved user interaction * chore: recompile css * fix: dark mode color not applied for before / after elements * fix: docs navigation * chore: recompile CSS * chore: update Tailwind CSS and PostCSS dependencies to version 4.0.17, recompile CSS, and add safelist * fix: typo in class name and add back decoration-from-font for typography a tags * fix: update class syntax for Tailwind CSS compatibility in mermaid code block
This commit is contained in:
Xin
@ -9,10 +9,10 @@
|
||||
{{- $icon := .Get "icon" -}}
|
||||
{{- $content := .InnerDeindent | markdownify -}}
|
||||
|
||||
{{- $defaultClass := "hx-border-orange-100 hx-bg-orange-50 hx-text-orange-800 dark:hx-border-orange-400/30 dark:hx-bg-orange-400/20 dark:hx-text-orange-300" -}}
|
||||
{{- $infoClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" -}}
|
||||
{{- $warningClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" -}}
|
||||
{{- $errorClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" -}}
|
||||
{{- $defaultClass := "hx:border-orange-100 hx:bg-orange-50 hx:text-orange-800 hx:dark:border-orange-400/30 hx:dark:bg-orange-400/20 hx:dark:text-orange-300" -}}
|
||||
{{- $infoClass := "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200" -}}
|
||||
{{- $warningClass := "hx:border-yellow-100 hx:bg-yellow-50 hx:text-yellow-900 hx:dark:border-yellow-200/30 hx:dark:bg-yellow-700/30 hx:dark:text-yellow-200" -}}
|
||||
{{- $errorClass := "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200" -}}
|
||||
|
||||
{{- $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) -}}
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
{{- $title := .Get "title" | default "" -}}
|
||||
{{- $closed := eq (.Get "closed") "true" | default false -}}
|
||||
|
||||
<details class="last-of-type:hx-mb-0 hx-rounded-lg hx-bg-neutral-50 dark:hx-bg-neutral-800 hx-p-2 hx-mt-4 hx-group" {{ if not $closed }}open{{ end }}>
|
||||
<summary class="hx-flex hx-items-center hx-cursor-pointer hx-select-none hx-list-none hx-p-1 hx-rounded hx-transition-colors hover:hx-bg-gray-100 dark:hover:hx-bg-neutral-800 before:hx-mr-1 before:hx-inline-block before:hx-transition-transform before:hx-content-[''] dark:before:hx-invert rtl:before:hx-rotate-180 group-open:before:hx-rotate-90">
|
||||
<strong class="hx-text-lg">{{ $title | markdownify }}</strong>
|
||||
<details class="hx:last-of-type:mb-0 hx:rounded-lg hx:bg-neutral-50 hx:dark:bg-neutral-800 hx:p-2 hx:mt-4 hx:group" {{ if not $closed }}open{{ end }}>
|
||||
<summary class="hx:flex hx:items-center hx:cursor-pointer hx:select-none hx:list-none hx:p-1 hx:rounded-sm hx:transition-colors hx:hover:bg-gray-100 hx:dark:hover:bg-neutral-800 hx:before:mr-1 hx:before:inline-block hx:before:transition-transform hx:before:content-[''] hx:dark:before:invert hx:rtl:before:rotate-180 hx:group-open:before:rotate-90">
|
||||
<strong class="hx:text-lg">{{ $title | markdownify }}</strong>
|
||||
</summary>
|
||||
<div class="hx-p-2 hx-overflow-hidden">
|
||||
<div class="hx:p-2 hx:overflow-hidden">
|
||||
{{ .InnerDeindent | markdownify }}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="hextra-filetree hx-mt-6 hx-select-none hx-text-sm hx-text-gray-800 dark:hx-text-gray-300 not-prose">
|
||||
<div class="hx-inline-block hx-rounded-lg hx-border hx-px-4 hx-py-2 dark:hx-border-neutral-800">
|
||||
<div class="hextra-filetree hx:mt-6 hx:select-none hx:text-sm hx:text-gray-800 hx:dark:text-gray-300 not-prose">
|
||||
<div class="hx:inline-block hx:rounded-lg hx:px-4 hx:py-2 hx:border hx:border-gray-200 hx:dark:border-neutral-800">
|
||||
{{- .InnerDeindent -}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{{- $name := .Get "name" -}}
|
||||
|
||||
|
||||
<li class="hx-flex hx-list-none">
|
||||
<span class="hx-inline-flex hx-cursor-default hx-items-center hx-py-1">
|
||||
<li class="hx:flex hx:list-none">
|
||||
<span class="hx:inline-flex hx:cursor-default hx:items-center hx:py-1">
|
||||
{{- partial "utils/icon" (dict "name" "document-text" "attributes" "width=1em") -}}
|
||||
<span class="ltr:hx-ml-1 rtl:hx-mr-1">{{ $name | markdownify }}</span>
|
||||
<span class="hx:ltr:ml-1 hx:rtl:mr-1">{{ $name | markdownify }}</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
{{- $name := .Get "name" -}}
|
||||
{{- $state := .Get "state" | default "open" }}
|
||||
|
||||
<li class="hx-group hx-flex hx-list-none hx-flex-col">
|
||||
<button class="hextra-filetree-folder hx-inline-flex hx-cursor-pointer hx-items-center hx-py-1 hover:hx-opacity-60">
|
||||
<span data-state="{{ $state }}" class="data-[state=open]:hx-hidden">
|
||||
<li class="hx:group hx:flex hx:list-none hx:flex-col">
|
||||
<button class="hextra-filetree-folder hx:inline-flex hx:cursor-pointer hx:items-center hx:py-1 hx:hover:opacity-60">
|
||||
<span data-state="{{ $state }}" class="hx:data-[state=open]:hidden">
|
||||
{{- partial "utils/icon" (dict "name" "folder" "attributes" "width=1em") -}}
|
||||
</span>
|
||||
<span data-state="{{ $state }}" class="data-[state=closed]:hx-hidden">
|
||||
<span data-state="{{ $state }}" class="hx:data-[state=closed]:hidden">
|
||||
{{- partial "utils/icon" (dict "name" "folder-open" "attributes" "width=1em") -}}
|
||||
</span>
|
||||
<span class="ltr:hx-ml-1 rtl:hx-mr-1">{{ $name }}</span>
|
||||
<span class="hx:ltr:ml-1 hx:rtl:mr-1">{{ $name }}</span>
|
||||
</button>
|
||||
<ul data-state="{{ $state }}" class="ltr:hx-pl-5 rtl:hx-pr-5 data-[state=closed]:hx-hidden">
|
||||
<ul data-state="{{ $state }}" class="hx:ltr:pl-5 hx:rtl:pr-5 hx:data-[state=closed]:hidden">
|
||||
{{- .InnerDeindent -}}
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -17,20 +17,20 @@
|
||||
<a
|
||||
{{ with $link }}href="{{ $href }}" {{ with $external }} target="_blank" rel="noreferrer"{{ end }}{{ end }}
|
||||
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
|
||||
class="{{ $class }} hextra-feature-card not-prose hx-block hx-relative hx-overflow-hidden hx-rounded-3xl hx-border hx-border-gray-200 hover:hx-border-gray-300 dark:hx-border-neutral-800 dark:hover:hx-border-neutral-700 before:hx-pointer-events-none before:hx-absolute before:hx-inset-0 before:hx-bg-glass-gradient"
|
||||
class="{{ $class }} hextra-feature-card not-prose hx:block hx:relative hx:overflow-hidden hx:rounded-3xl hx:border hx:border-gray-200 hx:hover:border-gray-300 hx:dark:border-neutral-800 hx:dark:hover:border-neutral-700 hx:before:pointer-events-none hx:before:absolute hx:before:inset-0 hx:before:bg-glass-gradient"
|
||||
>
|
||||
<div class="hx-relative hx-w-full hx-p-6">
|
||||
<h3 class="hx-text-2xl hx-font-medium hx-leading-6 hx-mb-2 hx-flex hx-items-center">
|
||||
<div class="hx:relative hx:w-full hx:p-6">
|
||||
<h3 class="hx:text-2xl hx:font-medium hx:leading-6 hx:mb-2 hx:flex hx:items-center">
|
||||
{{ with $icon -}}
|
||||
<span class="hx-pr-2">
|
||||
<span class="hx:pr-2">
|
||||
{{- partial "utils/icon.html" (dict "name" . "attributes" "height=1.5rem") -}}
|
||||
</span>
|
||||
{{ end -}}
|
||||
<span>{{ $title }}</span>
|
||||
</h3>
|
||||
<p class="hx-text-gray-500 dark:hx-text-gray-400 hx-text-sm hx-leading-6">{{ $subtitle | markdownify }}</p>
|
||||
<p class="hx:text-gray-500 hx:dark:text-gray-400 hx:text-sm hx:leading-6">{{ $subtitle | markdownify }}</p>
|
||||
</div>
|
||||
{{- with $image -}}
|
||||
<img src="{{ . }}" class="hx-absolute hx-max-w-none {{ $imageClass }}" alt="{{ $title }}" />
|
||||
<img src="{{ . }}" class="hx:absolute hx:max-w-none {{ $imageClass }}" alt="{{ $title }}" />
|
||||
{{- end -}}
|
||||
</a>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
|
||||
<div
|
||||
class="hextra-feature-grid hx-grid sm:max-lg:hx-grid-cols-2 max-sm:hx-grid-cols-1 hx-gap-4 hx-w-full not-prose"
|
||||
class="hextra-feature-grid hx:grid hx:sm:max-lg:grid-cols-2 hx:max-sm:grid-cols-1 hx:gap-4 hx:w-full not-prose"
|
||||
{{ with $css }}style="{{ . | safeCSS }}"{{ end }}
|
||||
>
|
||||
{{ .Inner }}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<a
|
||||
{{ if $link }}href="{{ $href }}"{{ end }}
|
||||
class="{{ $class }} not-prose hx-inline-flex hx-items-center hx-rounded-full hx-gap-2 hx-px-3 hx-py-1 hx-text-xs hx-text-gray-600 dark:hx-text-gray-400 hx-bg-gray-100 dark:hx-bg-neutral-800 dark:hx-border-neutral-800 hx-border hover:hx-border-gray-400 dark:hover:hx-text-gray-50 dark:hover:hx-border-gray-600 hx-transition-all hx-ease-in hx-duration-200"
|
||||
class="{{ $class }} not-prose hx:inline-flex hx:items-center hx:rounded-full hx:gap-2 hx:px-3 hx:py-1 hx:text-xs hx:text-gray-600 hx:dark:text-gray-400 hx:bg-gray-100 hx:dark:bg-neutral-800 hx:border-gray-200 hx:dark:border-neutral-800 hx:border hx:hover:border-gray-400 hx:dark:hover:text-gray-50 hx:dark:hover:border-gray-600 hx:transition-all hx:ease-in hx:duration-200"
|
||||
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
|
||||
{{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
|
||||
>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<a
|
||||
href="{{ $href }}"
|
||||
class="not-prose hx-font-medium hx-cursor-pointer hx-px-6 hx-py-3 hx-rounded-full hx-text-center hx-text-white hx-inline-block hx-bg-primary-600 hover:hx-bg-primary-700 focus:hx-outline-none focus:hx-ring-4 focus:hx-ring-primary-300 dark:hx-bg-primary-600 dark:hover:hx-bg-primary-700 dark:focus:hx-ring-primary-800 hx-transition-all hx-ease-in hx-duration-200"
|
||||
class="not-prose hx:font-medium hx:cursor-pointer hx:px-6 hx:py-3 hx:rounded-full hx:text-center hx:text-white hx:inline-block hx:bg-primary-600 hx:hover:bg-primary-700 hx:focus:outline-hidden hx:focus:ring-4 hx:focus:ring-primary-300 hx:dark:bg-primary-600 hx:dark:hover:bg-primary-700 hx:dark:focus:ring-primary-800 hx:transition-all hx:ease-in hx:duration-200"
|
||||
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
|
||||
{{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
|
||||
>
|
||||
|
||||
@ -18,18 +18,18 @@
|
||||
{{- end -}}
|
||||
|
||||
<div
|
||||
class="{{ $class }} hextra-feature-grid hx-grid sm:max-lg:hx-grid-cols-2 max-sm:hx-grid-cols-1 hx-gap-4 hx-w-full not-prose"
|
||||
class="{{ $class }} hextra-feature-grid hx:grid hx:sm:max-lg:grid-cols-2 hx:max-sm:grid-cols-1 hx:gap-4 hx:w-full not-prose"
|
||||
{{ with $css }}style="{{ . | safeCSS }}"{{ end }}
|
||||
>
|
||||
<div class="hx-w-full">
|
||||
<div class="hx:w-full">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
{{- with $image }}
|
||||
<div class="hx-mx-auto">
|
||||
<div class="hx:mx-auto">
|
||||
<a
|
||||
{{ with $imageLink }}href="{{ $href }}" {{ with $imageLinkExternal }} target="_blank" rel="noreferrer"{{ end }}{{ end }}
|
||||
{{ with $imageStyle }}style="{{ . | safeCSS }}"{{ end }}
|
||||
class="{{ $imageClass }} {{ if $imageCard }}hextra-feature-card not-prose hx-block hx-relative hx-p-6 hx-overflow-hidden hx-rounded-3xl hx-border hx-border-gray-200 hover:hx-border-gray-300 dark:hx-border-neutral-800 dark:hover:hx-border-neutral-700 before:hx-pointer-events-none before:hx-absolute before:hx-inset-0 before:hx-bg-glass-gradient{{ end }}"
|
||||
class="{{ $imageClass }} {{ if $imageCard }}hextra-feature-card not-prose hx:block hx:relative hx:p-6 hx:overflow-hidden hx:rounded-3xl hx:border hx:border-gray-200 hx:hover:border-gray-300 hx:dark:border-neutral-800 hx:dark:hover:border-neutral-700 hx:before:pointer-events-none hx:before:absolute hx:before:inset-0 hx:before:bg-glass-gradient{{ end }}"
|
||||
>
|
||||
<img src="{{ $image }}" width="{{ $imageWidth }}" height="{{ $imageHeight }}" {{ with $imageTitle }}alt="{{ $imageTitle }}"{{ end }}/>
|
||||
</a>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
|
||||
<h1
|
||||
class="not-prose hx-text-4xl hx-font-bold hx-leading-none hx-tracking-tighter md:hx-text-5xl hx-py-2 hx-bg-clip-text hx-text-transparent hx-bg-gradient-to-r hx-from-gray-900 hx-to-gray-600 dark:hx-from-gray-100 dark:hx-to-gray-400"
|
||||
class="not-prose hx:text-4xl hx:font-bold hx:leading-none hx:tracking-tighter hx:md:text-5xl hx:py-2 hx:bg-clip-text hx:text-transparent hx:bg-gradient-to-r hx:from-gray-900 hx:to-gray-600 hx:dark:from-gray-100 hx:dark:to-gray-400"
|
||||
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
|
||||
>
|
||||
{{ .Inner | markdownify }}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
{{- $size := cond (ge $heading 4) "xl" (cond (eq $heading 3) "2xl" "4xl") -}}
|
||||
|
||||
<h{{ $heading }}
|
||||
class="not-prose hx-text-{{ $size }} hx-font-bold hx-leading-none hx-tracking-tighter md:hx-text-3xl hx-py-2 hx-bg-clip-text hx-text-transparent hx-bg-gradient-to-r hx-from-gray-900 hx-to-gray-600 dark:hx-from-gray-100 dark:hx-to-gray-400"
|
||||
class="not-prose hx:text-{{ $size }} hx:font-bold hx:leading-none hx:tracking-tighter hx:md:text-3xl hx:py-2 hx:bg-clip-text hx:text-transparent hx:bg-gradient-to-r hx:from-gray-900 hx:to-gray-600 hx:dark:from-gray-100 hx:dark:to-gray-400"
|
||||
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
|
||||
>
|
||||
{{ .Inner | markdownify }}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
|
||||
<p
|
||||
class="not-prose hx-text-xl hx-text-gray-600 dark:hx-text-gray-400 sm:hx-text-xl"
|
||||
class="not-prose hx:text-xl hx:text-gray-600 hx:dark:text-gray-400 hx:sm:text-xl"
|
||||
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
|
||||
>
|
||||
{{ .Inner | markdownify }}
|
||||
|
||||
@ -8,6 +8,6 @@
|
||||
|
||||
{{- $icon = replaceRE "<svg" (printf "<svg %s" $attributes) $icon -}}
|
||||
|
||||
<span class="hx-inline-block hx-align-text-bottom icon">
|
||||
<span class="hx:inline-block hx:align-text-bottom icon">
|
||||
{{- $icon | safeHTML -}}
|
||||
</span>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<div class="steps hx-ml-4 hx-mb-12 ltr:hx-border-l rtl:hx-border-r hx-border-gray-200 ltr:hx-pl-6 rtl:hx-pr-6 dark:hx-border-neutral-800 [counter-reset:step]">
|
||||
<div class="steps hx:ml-4 hx:mb-12 hx:ltr:border-l hx:rtl:border-r hx:border-gray-200 hx:ltr:pl-6 hx:rtl:pr-6 hx:dark:border-neutral-800 [counter-reset:step]">
|
||||
{{- .Inner -}}
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{{- $defaultIndex := int ((.Parent.Get "defaultIndex") | default "0") -}}
|
||||
|
||||
<div
|
||||
class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
|
||||
class="hextra-tabs-panel hx:rounded-sm hx:pt-6 hx:hidden hx:data-[state=selected]:block"
|
||||
id="tabs-panel-{{ .Ordinal }}"
|
||||
role="tabpanel"
|
||||
{{- if eq .Ordinal $defaultIndex }} tabindex="0" {{ end -}}
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
{{ errorf "no items provided" }}
|
||||
{{- end -}}
|
||||
|
||||
<div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
|
||||
<div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800">
|
||||
<div class="hextra-scrollbar hx:overflow-x-auto hx:overflow-y-hidden hx:overscroll-x-contain">
|
||||
<div class="hx:mt-4 hx:flex hx:w-max hx:min-w-full hx:border-b hx:border-gray-200 hx:pb-px hx:dark:border-neutral-800">
|
||||
{{- range $i, $item := $items -}}
|
||||
<button
|
||||
class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 data-[state=selected]:dark:hx-border-primary-500 data-[state=selected]:dark:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
|
||||
class="hextra-tabs-toggle hx:cursor-pointer hx:data-[state=selected]:border-primary-500 hx:data-[state=selected]:text-primary-600 hx:data-[state=selected]:dark:border-primary-500 hx:data-[state=selected]:dark:text-primary-600 hx:mr-2 hx:rounded-t hx:p-2 hx:font-medium hx:leading-5 hx:transition-colors hx:-mb-0.5 hx:select-none hx:border-b-2 hx:border-transparent hx:text-gray-600 hx:hover:border-gray-200 hx:hover:text-black hx:dark:text-gray-200 hx:dark:hover:border-neutral-800 hx:dark:hover:text-white"
|
||||
role="tab"
|
||||
type="button"
|
||||
aria-controls="tabs-panel-{{ $i }}"
|
||||
|
||||
Reference in New Issue
Block a user