Browse Source
* chore: update deps * fix: tailwindcss config * fix: lint * fix: lint * chore: update depspull/7700/head
xingyu
5 days ago
committed by
GitHub
GitHub
26 changed files with 1258 additions and 1321 deletions
@ -0,0 +1,38 @@ |
|||
{ |
|||
"name": "@vben/tailwind-config", |
|||
"version": "5.7.0", |
|||
"private": true, |
|||
"homepage": "https://github.com/vbenjs/vue-vben-admin", |
|||
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues", |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git+https://github.com/vbenjs/vue-vben-admin.git", |
|||
"directory": "internal/tailwind-config" |
|||
}, |
|||
"license": "MIT", |
|||
"type": "module", |
|||
"files": [ |
|||
"src" |
|||
], |
|||
"sideEffects": [ |
|||
"**/*.css" |
|||
], |
|||
"main": "./src/index.ts", |
|||
"module": "./src/index.ts", |
|||
"types": "./src/index.ts", |
|||
"exports": { |
|||
".": { |
|||
"types": "./src/index.ts", |
|||
"default": "./src/index.ts" |
|||
}, |
|||
"./theme": { |
|||
"default": "./src/theme.css" |
|||
} |
|||
}, |
|||
"dependencies": { |
|||
"@iconify/tailwind4": "catalog:", |
|||
"@tailwindcss/typography": "catalog:", |
|||
"tailwindcss": "catalog:", |
|||
"tw-animate-css": "catalog:" |
|||
} |
|||
} |
|||
@ -0,0 +1 @@ |
|||
import './theme.css'; |
|||
@ -0,0 +1,569 @@ |
|||
@import 'tailwindcss'; |
|||
@import 'tw-animate-css'; |
|||
|
|||
@plugin '@tailwindcss/typography'; |
|||
@plugin '@iconify/tailwind4'; |
|||
|
|||
/* Monorepo source detection: scan all packages and apps for utility classes */ |
|||
@source '../../../packages/'; |
|||
@source '../../../apps/'; |
|||
@source '../../../docs/'; |
|||
@source '../../../playground/'; |
|||
|
|||
/* Dark mode uses .dark class selector, not prefers-color-scheme */ |
|||
@custom-variant dark (&:is(.dark *)); |
|||
|
|||
/* Explicitly pin Tailwind v4 dynamic spacing for classes like w-150/h-55. */ |
|||
@theme { |
|||
--spacing: 0.25rem; |
|||
} |
|||
|
|||
@theme inline { |
|||
/* Font */ |
|||
--font-sans: var(--font-family); |
|||
|
|||
/* Border Radius */ |
|||
--radius-sm: calc(var(--radius) - 4px); |
|||
--radius-md: calc(var(--radius) - 2px); |
|||
--radius-lg: var(--radius); |
|||
--radius-xl: calc(var(--radius) + 4px); |
|||
|
|||
/* Box Shadow */ |
|||
--shadow-float: |
|||
0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), |
|||
0 9px 28px 8px rgb(0 0 0 / 5%); |
|||
|
|||
/* Animations */ |
|||
--animate-accordion-down: accordion-down 0.2s ease-out; |
|||
--animate-accordion-up: accordion-up 0.2s ease-out; |
|||
--animate-collapsible-down: collapsible-down 0.2s ease-in-out; |
|||
--animate-collapsible-up: collapsible-up 0.2s ease-in-out; |
|||
--animate-float: float 5s linear 0ms infinite; |
|||
|
|||
/* ===== Semantic Colors (shadcn-ui) ===== */ |
|||
|
|||
--color-background: hsl(var(--background)); |
|||
--color-background-deep: hsl(var(--background-deep)); |
|||
--color-foreground: hsl(var(--foreground)); |
|||
--color-card: hsl(var(--card)); |
|||
--color-card-foreground: hsl(var(--card-foreground)); |
|||
--color-popover: hsl(var(--popover)); |
|||
--color-popover-foreground: hsl(var(--popover-foreground)); |
|||
--color-muted: hsl(var(--muted)); |
|||
--color-muted-foreground: hsl(var(--muted-foreground)); |
|||
--color-accent: hsl(var(--accent)); |
|||
--color-accent-foreground: hsl(var(--accent-foreground)); |
|||
--color-accent-hover: hsl(var(--accent-hover)); |
|||
--color-accent-lighter: hsl(var(--accent-lighter)); |
|||
--color-border: hsl(var(--border)); |
|||
--color-input: hsl(var(--input)); |
|||
--color-input-background: hsl(var(--input-background)); |
|||
--color-ring: hsl(var(--ring)); |
|||
--color-secondary: hsl(var(--secondary)); |
|||
--color-secondary-desc: hsl(var(--secondary-desc)); |
|||
--color-secondary-foreground: hsl(var(--secondary-foreground)); |
|||
|
|||
/* ===== Custom Semantic Colors ===== */ |
|||
|
|||
--color-header: hsl(var(--header)); |
|||
--color-heavy: hsl(var(--heavy)); |
|||
--color-heavy-foreground: hsl(var(--heavy-foreground)); |
|||
--color-main: hsl(var(--main)); |
|||
--color-overlay: hsl(var(--overlay)); |
|||
--color-overlay-content: hsl(var(--overlay-content)); |
|||
--color-sidebar: hsl(var(--sidebar)); |
|||
--color-sidebar-deep: hsl(var(--sidebar-deep)); |
|||
|
|||
/* ===== Primary Palette ===== */ |
|||
|
|||
--color-primary: hsl(var(--primary)); |
|||
--color-primary-foreground: hsl(var(--primary-foreground)); |
|||
--color-primary-50: hsl(var(--primary-50)); |
|||
--color-primary-100: hsl(var(--primary-100)); |
|||
--color-primary-200: hsl(var(--primary-200)); |
|||
--color-primary-300: hsl(var(--primary-300)); |
|||
--color-primary-400: hsl(var(--primary-400)); |
|||
--color-primary-500: hsl(var(--primary-500)); |
|||
--color-primary-600: hsl(var(--primary-600)); |
|||
--color-primary-700: hsl(var(--primary-700)); |
|||
--color-primary-active: hsl(var(--primary-700)); |
|||
--color-primary-background-light: hsl(var(--primary-200)); |
|||
--color-primary-background-lighter: hsl(var(--primary-100)); |
|||
--color-primary-background-lightest: hsl(var(--primary-50)); |
|||
--color-primary-border: hsl(var(--primary-400)); |
|||
--color-primary-border-light: hsl(var(--primary-300)); |
|||
--color-primary-hover: hsl(var(--primary-600)); |
|||
--color-primary-text: hsl(var(--primary-500)); |
|||
--color-primary-text-active: hsl(var(--primary-700)); |
|||
--color-primary-text-hover: hsl(var(--primary-600)); |
|||
|
|||
/* ===== Destructive Palette ===== */ |
|||
|
|||
--color-destructive: hsl(var(--destructive)); |
|||
--color-destructive-foreground: hsl(var(--destructive-foreground)); |
|||
--color-destructive-50: hsl(var(--destructive-50)); |
|||
--color-destructive-100: hsl(var(--destructive-100)); |
|||
--color-destructive-200: hsl(var(--destructive-200)); |
|||
--color-destructive-300: hsl(var(--destructive-300)); |
|||
--color-destructive-400: hsl(var(--destructive-400)); |
|||
--color-destructive-500: hsl(var(--destructive-500)); |
|||
--color-destructive-600: hsl(var(--destructive-600)); |
|||
--color-destructive-700: hsl(var(--destructive-700)); |
|||
--color-destructive-active: hsl(var(--destructive-700)); |
|||
--color-destructive-background-light: hsl(var(--destructive-200)); |
|||
--color-destructive-background-lighter: hsl(var(--destructive-100)); |
|||
--color-destructive-background-lightest: hsl(var(--destructive-50)); |
|||
--color-destructive-border: hsl(var(--destructive-400)); |
|||
--color-destructive-border-light: hsl(var(--destructive-300)); |
|||
--color-destructive-hover: hsl(var(--destructive-600)); |
|||
--color-destructive-text: hsl(var(--destructive-500)); |
|||
--color-destructive-text-active: hsl(var(--destructive-700)); |
|||
--color-destructive-text-hover: hsl(var(--destructive-600)); |
|||
|
|||
/* ===== Success Palette ===== */ |
|||
|
|||
--color-success: hsl(var(--success)); |
|||
--color-success-foreground: hsl(var(--success-foreground)); |
|||
--color-success-50: hsl(var(--success-50)); |
|||
--color-success-100: hsl(var(--success-100)); |
|||
--color-success-200: hsl(var(--success-200)); |
|||
--color-success-300: hsl(var(--success-300)); |
|||
--color-success-400: hsl(var(--success-400)); |
|||
--color-success-500: hsl(var(--success-500)); |
|||
--color-success-600: hsl(var(--success-600)); |
|||
--color-success-700: hsl(var(--success-700)); |
|||
--color-success-active: hsl(var(--success-700)); |
|||
--color-success-background-light: hsl(var(--success-200)); |
|||
--color-success-background-lighter: hsl(var(--success-100)); |
|||
--color-success-background-lightest: hsl(var(--success-50)); |
|||
--color-success-border: hsl(var(--success-400)); |
|||
--color-success-border-light: hsl(var(--success-300)); |
|||
--color-success-hover: hsl(var(--success-600)); |
|||
--color-success-text: hsl(var(--success-500)); |
|||
--color-success-text-active: hsl(var(--success-700)); |
|||
--color-success-text-hover: hsl(var(--success-600)); |
|||
|
|||
/* ===== Warning Palette ===== */ |
|||
|
|||
--color-warning: hsl(var(--warning)); |
|||
--color-warning-foreground: hsl(var(--warning-foreground)); |
|||
--color-warning-50: hsl(var(--warning-50)); |
|||
--color-warning-100: hsl(var(--warning-100)); |
|||
--color-warning-200: hsl(var(--warning-200)); |
|||
--color-warning-300: hsl(var(--warning-300)); |
|||
--color-warning-400: hsl(var(--warning-400)); |
|||
--color-warning-500: hsl(var(--warning-500)); |
|||
--color-warning-600: hsl(var(--warning-600)); |
|||
--color-warning-700: hsl(var(--warning-700)); |
|||
--color-warning-active: hsl(var(--warning-700)); |
|||
--color-warning-background-light: hsl(var(--warning-200)); |
|||
--color-warning-background-lighter: hsl(var(--warning-100)); |
|||
--color-warning-background-lightest: hsl(var(--warning-50)); |
|||
--color-warning-border: hsl(var(--warning-400)); |
|||
--color-warning-border-light: hsl(var(--warning-300)); |
|||
--color-warning-hover: hsl(var(--warning-600)); |
|||
--color-warning-text: hsl(var(--warning-500)); |
|||
--color-warning-text-active: hsl(var(--warning-700)); |
|||
--color-warning-text-hover: hsl(var(--warning-600)); |
|||
|
|||
/* ===== Green Palette (alias for success shades) ===== */ |
|||
|
|||
--color-green-50: hsl(var(--green-50)); |
|||
--color-green-100: hsl(var(--green-100)); |
|||
--color-green-200: hsl(var(--green-200)); |
|||
--color-green-300: hsl(var(--green-300)); |
|||
--color-green-400: hsl(var(--green-400)); |
|||
--color-green-500: hsl(var(--green-500)); |
|||
--color-green-600: hsl(var(--green-600)); |
|||
--color-green-700: hsl(var(--green-700)); |
|||
--color-green-active: hsl(var(--green-700)); |
|||
--color-green-background-light: hsl(var(--green-200)); |
|||
--color-green-background-lighter: hsl(var(--green-100)); |
|||
--color-green-background-lightest: hsl(var(--green-50)); |
|||
--color-green-border: hsl(var(--green-400)); |
|||
--color-green-border-light: hsl(var(--green-300)); |
|||
--color-green-foreground: hsl(var(--success-foreground)); |
|||
--color-green-hover: hsl(var(--green-600)); |
|||
--color-green-text: hsl(var(--green-500)); |
|||
--color-green-text-active: hsl(var(--green-700)); |
|||
--color-green-text-hover: hsl(var(--green-600)); |
|||
|
|||
/* ===== Red Palette (alias for destructive shades) ===== */ |
|||
|
|||
--color-red-50: hsl(var(--red-50)); |
|||
--color-red-100: hsl(var(--red-100)); |
|||
--color-red-200: hsl(var(--red-200)); |
|||
--color-red-300: hsl(var(--red-300)); |
|||
--color-red-400: hsl(var(--red-400)); |
|||
--color-red-500: hsl(var(--red-500)); |
|||
--color-red-600: hsl(var(--red-600)); |
|||
--color-red-700: hsl(var(--red-700)); |
|||
--color-red-active: hsl(var(--red-700)); |
|||
--color-red-background-light: hsl(var(--red-200)); |
|||
--color-red-background-lighter: hsl(var(--red-100)); |
|||
--color-red-background-lightest: hsl(var(--red-50)); |
|||
--color-red-border: hsl(var(--red-400)); |
|||
--color-red-border-light: hsl(var(--red-300)); |
|||
--color-red-foreground: hsl(var(--destructive-foreground)); |
|||
--color-red-hover: hsl(var(--red-600)); |
|||
--color-red-text: hsl(var(--red-500)); |
|||
--color-red-text-active: hsl(var(--red-700)); |
|||
--color-red-text-hover: hsl(var(--red-600)); |
|||
|
|||
/* ===== Yellow Palette (alias for warning shades) ===== */ |
|||
|
|||
--color-yellow-50: hsl(var(--yellow-50)); |
|||
--color-yellow-100: hsl(var(--yellow-100)); |
|||
--color-yellow-200: hsl(var(--yellow-200)); |
|||
--color-yellow-300: hsl(var(--yellow-300)); |
|||
--color-yellow-400: hsl(var(--yellow-400)); |
|||
--color-yellow-500: hsl(var(--yellow-500)); |
|||
--color-yellow-600: hsl(var(--yellow-600)); |
|||
--color-yellow-700: hsl(var(--yellow-700)); |
|||
--color-yellow-active: hsl(var(--yellow-700)); |
|||
--color-yellow-background-light: hsl(var(--yellow-200)); |
|||
--color-yellow-background-lighter: hsl(var(--yellow-100)); |
|||
--color-yellow-background-lightest: hsl(var(--yellow-50)); |
|||
--color-yellow-border: hsl(var(--yellow-400)); |
|||
--color-yellow-border-light: hsl(var(--yellow-300)); |
|||
--color-yellow-foreground: hsl(var(--warning-foreground)); |
|||
--color-yellow-hover: hsl(var(--yellow-600)); |
|||
--color-yellow-text: hsl(var(--yellow-500)); |
|||
--color-yellow-text-active: hsl(var(--yellow-700)); |
|||
--color-yellow-text-hover: hsl(var(--yellow-600)); |
|||
} |
|||
|
|||
/* Keyframes */ |
|||
@keyframes accordion-down { |
|||
from { |
|||
height: 0; |
|||
} |
|||
|
|||
to { |
|||
height: var(--reka-accordion-content-height); |
|||
} |
|||
} |
|||
|
|||
@keyframes accordion-up { |
|||
from { |
|||
height: var(--reka-accordion-content-height); |
|||
} |
|||
|
|||
to { |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
@keyframes collapsible-down { |
|||
from { |
|||
height: 0; |
|||
} |
|||
|
|||
to { |
|||
height: var(--reka-collapsible-content-height); |
|||
} |
|||
} |
|||
|
|||
@keyframes collapsible-up { |
|||
from { |
|||
height: var(--reka-collapsible-content-height); |
|||
} |
|||
|
|||
to { |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
@keyframes float { |
|||
0% { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
50% { |
|||
transform: translateY(-20px); |
|||
} |
|||
|
|||
100% { |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* Base styles */ |
|||
@layer base { |
|||
*, |
|||
::after, |
|||
::before { |
|||
@apply border-border outline-ring/50; |
|||
|
|||
box-sizing: border-box; |
|||
border-style: solid; |
|||
border-width: 0; |
|||
} |
|||
|
|||
html { |
|||
@apply text-foreground bg-background font-sans; |
|||
|
|||
scroll-behavior: smooth; |
|||
font-size: var(--font-size-base, 16px); |
|||
font-variation-settings: normal; |
|||
font-synthesis-weight: none; |
|||
line-height: 1.15; |
|||
text-rendering: optimizelegibility; |
|||
text-size-adjust: 100%; |
|||
-webkit-tap-highlight-color: transparent; |
|||
} |
|||
|
|||
#app, |
|||
body, |
|||
html { |
|||
@apply size-full; |
|||
} |
|||
|
|||
body { |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
a, |
|||
a:active, |
|||
a:hover, |
|||
a:link, |
|||
a:visited { |
|||
@apply no-underline; |
|||
} |
|||
|
|||
::view-transition-new(root), |
|||
::view-transition-old(root) { |
|||
@apply animate-none mix-blend-normal; |
|||
} |
|||
|
|||
::view-transition-old(root) { |
|||
@apply z-1; |
|||
} |
|||
|
|||
::view-transition-new(root) { |
|||
@apply z-2147483646; |
|||
} |
|||
|
|||
html.dark::view-transition-old(root) { |
|||
@apply z-2147483646; |
|||
} |
|||
|
|||
html.dark::view-transition-new(root) { |
|||
@apply z-1; |
|||
} |
|||
|
|||
input::placeholder, |
|||
textarea::placeholder { |
|||
@apply opacity-100; |
|||
} |
|||
|
|||
input[type='number']::-webkit-inner-spin-button, |
|||
input[type='number']::-webkit-outer-spin-button { |
|||
@apply m-0 appearance-none; |
|||
} |
|||
|
|||
/* Only adjust scrollbar for non-macOS */ |
|||
html:not([data-platform='macOs']) { |
|||
::-webkit-scrollbar { |
|||
@apply h-2.5 w-2.5; |
|||
} |
|||
|
|||
::-webkit-scrollbar-thumb { |
|||
@apply bg-border rounded-sm border-none; |
|||
} |
|||
|
|||
::-webkit-scrollbar-track { |
|||
@apply rounded-sm border-none bg-transparent shadow-none; |
|||
} |
|||
|
|||
::-webkit-scrollbar-button { |
|||
@apply hidden; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Custom utilities (v4 @utility syntax) */ |
|||
@utility flex-center { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
@utility flex-col-center { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
/* Component styles (complex selectors, not convertible to @utility) */ |
|||
.outline-box { |
|||
@apply outline-border relative cursor-pointer rounded-md p-1 outline-1; |
|||
} |
|||
|
|||
.outline-box::after { |
|||
@apply absolute top-1/2 left-1/2 z-20 h-0 w-px rounded-sm opacity-0 outline-2 outline-transparent transition-all duration-300 content-[""]; |
|||
} |
|||
|
|||
.outline-box.outline-box-active { |
|||
@apply outline-primary outline-2; |
|||
} |
|||
|
|||
.outline-box.outline-box-active::after { |
|||
display: none; |
|||
} |
|||
|
|||
.outline-box:not(.outline-box-active):hover::after { |
|||
@apply outline-primary top-0 left-0 h-full w-full p-1 opacity-100; |
|||
} |
|||
|
|||
.vben-link { |
|||
@apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer; |
|||
} |
|||
|
|||
.card-box { |
|||
@apply bg-card text-card-foreground border-border rounded-xl border; |
|||
} |
|||
|
|||
/* Enter animations (converted from enterAnimationPlugin) */ |
|||
@keyframes enter-x-animation { |
|||
to { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
|
|||
@keyframes enter-y-animation { |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.enter-x:nth-child(1) { |
|||
opacity: 0; |
|||
transform: translateX(50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.1s forwards; |
|||
} |
|||
|
|||
.enter-x:nth-child(2) { |
|||
opacity: 0; |
|||
transform: translateX(50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.2s forwards; |
|||
} |
|||
|
|||
.enter-x:nth-child(3) { |
|||
opacity: 0; |
|||
transform: translateX(50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.3s forwards; |
|||
} |
|||
|
|||
.enter-x:nth-child(4) { |
|||
opacity: 0; |
|||
transform: translateX(50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.4s forwards; |
|||
} |
|||
|
|||
.enter-x:nth-child(5) { |
|||
opacity: 0; |
|||
transform: translateX(50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.5s forwards; |
|||
} |
|||
|
|||
.enter-y:nth-child(1) { |
|||
opacity: 0; |
|||
transform: translateY(50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.1s forwards; |
|||
} |
|||
|
|||
.enter-y:nth-child(2) { |
|||
opacity: 0; |
|||
transform: translateY(50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.2s forwards; |
|||
} |
|||
|
|||
.enter-y:nth-child(3) { |
|||
opacity: 0; |
|||
transform: translateY(50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.3s forwards; |
|||
} |
|||
|
|||
.enter-y:nth-child(4) { |
|||
opacity: 0; |
|||
transform: translateY(50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.4s forwards; |
|||
} |
|||
|
|||
.enter-y:nth-child(5) { |
|||
opacity: 0; |
|||
transform: translateY(50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.5s forwards; |
|||
} |
|||
|
|||
.-enter-x:nth-child(1) { |
|||
opacity: 0; |
|||
transform: translateX(-50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.1s forwards; |
|||
} |
|||
|
|||
.-enter-x:nth-child(2) { |
|||
opacity: 0; |
|||
transform: translateX(-50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.2s forwards; |
|||
} |
|||
|
|||
.-enter-x:nth-child(3) { |
|||
opacity: 0; |
|||
transform: translateX(-50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.3s forwards; |
|||
} |
|||
|
|||
.-enter-x:nth-child(4) { |
|||
opacity: 0; |
|||
transform: translateX(-50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.4s forwards; |
|||
} |
|||
|
|||
.-enter-x:nth-child(5) { |
|||
opacity: 0; |
|||
transform: translateX(-50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.5s forwards; |
|||
} |
|||
|
|||
.-enter-y:nth-child(1) { |
|||
opacity: 0; |
|||
transform: translateY(-50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.1s forwards; |
|||
} |
|||
|
|||
.-enter-y:nth-child(2) { |
|||
opacity: 0; |
|||
transform: translateY(-50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.2s forwards; |
|||
} |
|||
|
|||
.-enter-y:nth-child(3) { |
|||
opacity: 0; |
|||
transform: translateY(-50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.3s forwards; |
|||
} |
|||
|
|||
.-enter-y:nth-child(4) { |
|||
opacity: 0; |
|||
transform: translateY(-50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.4s forwards; |
|||
} |
|||
|
|||
.-enter-y:nth-child(5) { |
|||
opacity: 0; |
|||
transform: translateY(-50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.5s forwards; |
|||
} |
|||
|
|||
html.invert-mode { |
|||
@apply invert; |
|||
} |
|||
|
|||
html.grayscale-mode { |
|||
@apply grayscale; |
|||
} |
|||
@ -1,569 +1 @@ |
|||
@import 'tailwindcss'; |
|||
@import 'tw-animate-css'; |
|||
|
|||
@plugin '@tailwindcss/typography'; |
|||
@plugin '@iconify/tailwind4'; |
|||
|
|||
/* Monorepo source detection: scan all packages and apps for utility classes */ |
|||
@source '../../../../../../packages/'; |
|||
@source '../../../../../../apps/'; |
|||
@source '../../../../../../docs/'; |
|||
@source '../../../../../../playground/'; |
|||
|
|||
/* Dark mode uses .dark class selector, not prefers-color-scheme */ |
|||
@custom-variant dark (&:is(.dark *)); |
|||
|
|||
/* Explicitly pin Tailwind v4 dynamic spacing for classes like w-150/h-55. */ |
|||
@theme { |
|||
--spacing: 0.25rem; |
|||
} |
|||
|
|||
@theme inline { |
|||
/* Font */ |
|||
--font-sans: var(--font-family); |
|||
|
|||
/* Border Radius */ |
|||
--radius-sm: calc(var(--radius) - 4px); |
|||
--radius-md: calc(var(--radius) - 2px); |
|||
--radius-lg: var(--radius); |
|||
--radius-xl: calc(var(--radius) + 4px); |
|||
|
|||
/* Box Shadow */ |
|||
--shadow-float: |
|||
0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), |
|||
0 9px 28px 8px rgb(0 0 0 / 5%); |
|||
|
|||
/* Animations */ |
|||
--animate-accordion-down: accordion-down 0.2s ease-out; |
|||
--animate-accordion-up: accordion-up 0.2s ease-out; |
|||
--animate-collapsible-down: collapsible-down 0.2s ease-in-out; |
|||
--animate-collapsible-up: collapsible-up 0.2s ease-in-out; |
|||
--animate-float: float 5s linear 0ms infinite; |
|||
|
|||
/* ===== Semantic Colors (shadcn-ui) ===== */ |
|||
|
|||
--color-background: hsl(var(--background)); |
|||
--color-background-deep: hsl(var(--background-deep)); |
|||
--color-foreground: hsl(var(--foreground)); |
|||
--color-card: hsl(var(--card)); |
|||
--color-card-foreground: hsl(var(--card-foreground)); |
|||
--color-popover: hsl(var(--popover)); |
|||
--color-popover-foreground: hsl(var(--popover-foreground)); |
|||
--color-muted: hsl(var(--muted)); |
|||
--color-muted-foreground: hsl(var(--muted-foreground)); |
|||
--color-accent: hsl(var(--accent)); |
|||
--color-accent-foreground: hsl(var(--accent-foreground)); |
|||
--color-accent-hover: hsl(var(--accent-hover)); |
|||
--color-accent-lighter: hsl(var(--accent-lighter)); |
|||
--color-border: hsl(var(--border)); |
|||
--color-input: hsl(var(--input)); |
|||
--color-input-background: hsl(var(--input-background)); |
|||
--color-ring: hsl(var(--ring)); |
|||
--color-secondary: hsl(var(--secondary)); |
|||
--color-secondary-desc: hsl(var(--secondary-desc)); |
|||
--color-secondary-foreground: hsl(var(--secondary-foreground)); |
|||
|
|||
/* ===== Custom Semantic Colors ===== */ |
|||
|
|||
--color-header: hsl(var(--header)); |
|||
--color-heavy: hsl(var(--heavy)); |
|||
--color-heavy-foreground: hsl(var(--heavy-foreground)); |
|||
--color-main: hsl(var(--main)); |
|||
--color-overlay: hsl(var(--overlay)); |
|||
--color-overlay-content: hsl(var(--overlay-content)); |
|||
--color-sidebar: hsl(var(--sidebar)); |
|||
--color-sidebar-deep: hsl(var(--sidebar-deep)); |
|||
|
|||
/* ===== Primary Palette ===== */ |
|||
|
|||
--color-primary: hsl(var(--primary)); |
|||
--color-primary-foreground: hsl(var(--primary-foreground)); |
|||
--color-primary-50: hsl(var(--primary-50)); |
|||
--color-primary-100: hsl(var(--primary-100)); |
|||
--color-primary-200: hsl(var(--primary-200)); |
|||
--color-primary-300: hsl(var(--primary-300)); |
|||
--color-primary-400: hsl(var(--primary-400)); |
|||
--color-primary-500: hsl(var(--primary-500)); |
|||
--color-primary-600: hsl(var(--primary-600)); |
|||
--color-primary-700: hsl(var(--primary-700)); |
|||
--color-primary-active: hsl(var(--primary-700)); |
|||
--color-primary-background-light: hsl(var(--primary-200)); |
|||
--color-primary-background-lighter: hsl(var(--primary-100)); |
|||
--color-primary-background-lightest: hsl(var(--primary-50)); |
|||
--color-primary-border: hsl(var(--primary-400)); |
|||
--color-primary-border-light: hsl(var(--primary-300)); |
|||
--color-primary-hover: hsl(var(--primary-600)); |
|||
--color-primary-text: hsl(var(--primary-500)); |
|||
--color-primary-text-active: hsl(var(--primary-700)); |
|||
--color-primary-text-hover: hsl(var(--primary-600)); |
|||
|
|||
/* ===== Destructive Palette ===== */ |
|||
|
|||
--color-destructive: hsl(var(--destructive)); |
|||
--color-destructive-foreground: hsl(var(--destructive-foreground)); |
|||
--color-destructive-50: hsl(var(--destructive-50)); |
|||
--color-destructive-100: hsl(var(--destructive-100)); |
|||
--color-destructive-200: hsl(var(--destructive-200)); |
|||
--color-destructive-300: hsl(var(--destructive-300)); |
|||
--color-destructive-400: hsl(var(--destructive-400)); |
|||
--color-destructive-500: hsl(var(--destructive-500)); |
|||
--color-destructive-600: hsl(var(--destructive-600)); |
|||
--color-destructive-700: hsl(var(--destructive-700)); |
|||
--color-destructive-active: hsl(var(--destructive-700)); |
|||
--color-destructive-background-light: hsl(var(--destructive-200)); |
|||
--color-destructive-background-lighter: hsl(var(--destructive-100)); |
|||
--color-destructive-background-lightest: hsl(var(--destructive-50)); |
|||
--color-destructive-border: hsl(var(--destructive-400)); |
|||
--color-destructive-border-light: hsl(var(--destructive-300)); |
|||
--color-destructive-hover: hsl(var(--destructive-600)); |
|||
--color-destructive-text: hsl(var(--destructive-500)); |
|||
--color-destructive-text-active: hsl(var(--destructive-700)); |
|||
--color-destructive-text-hover: hsl(var(--destructive-600)); |
|||
|
|||
/* ===== Success Palette ===== */ |
|||
|
|||
--color-success: hsl(var(--success)); |
|||
--color-success-foreground: hsl(var(--success-foreground)); |
|||
--color-success-50: hsl(var(--success-50)); |
|||
--color-success-100: hsl(var(--success-100)); |
|||
--color-success-200: hsl(var(--success-200)); |
|||
--color-success-300: hsl(var(--success-300)); |
|||
--color-success-400: hsl(var(--success-400)); |
|||
--color-success-500: hsl(var(--success-500)); |
|||
--color-success-600: hsl(var(--success-600)); |
|||
--color-success-700: hsl(var(--success-700)); |
|||
--color-success-active: hsl(var(--success-700)); |
|||
--color-success-background-light: hsl(var(--success-200)); |
|||
--color-success-background-lighter: hsl(var(--success-100)); |
|||
--color-success-background-lightest: hsl(var(--success-50)); |
|||
--color-success-border: hsl(var(--success-400)); |
|||
--color-success-border-light: hsl(var(--success-300)); |
|||
--color-success-hover: hsl(var(--success-600)); |
|||
--color-success-text: hsl(var(--success-500)); |
|||
--color-success-text-active: hsl(var(--success-700)); |
|||
--color-success-text-hover: hsl(var(--success-600)); |
|||
|
|||
/* ===== Warning Palette ===== */ |
|||
|
|||
--color-warning: hsl(var(--warning)); |
|||
--color-warning-foreground: hsl(var(--warning-foreground)); |
|||
--color-warning-50: hsl(var(--warning-50)); |
|||
--color-warning-100: hsl(var(--warning-100)); |
|||
--color-warning-200: hsl(var(--warning-200)); |
|||
--color-warning-300: hsl(var(--warning-300)); |
|||
--color-warning-400: hsl(var(--warning-400)); |
|||
--color-warning-500: hsl(var(--warning-500)); |
|||
--color-warning-600: hsl(var(--warning-600)); |
|||
--color-warning-700: hsl(var(--warning-700)); |
|||
--color-warning-active: hsl(var(--warning-700)); |
|||
--color-warning-background-light: hsl(var(--warning-200)); |
|||
--color-warning-background-lighter: hsl(var(--warning-100)); |
|||
--color-warning-background-lightest: hsl(var(--warning-50)); |
|||
--color-warning-border: hsl(var(--warning-400)); |
|||
--color-warning-border-light: hsl(var(--warning-300)); |
|||
--color-warning-hover: hsl(var(--warning-600)); |
|||
--color-warning-text: hsl(var(--warning-500)); |
|||
--color-warning-text-active: hsl(var(--warning-700)); |
|||
--color-warning-text-hover: hsl(var(--warning-600)); |
|||
|
|||
/* ===== Green Palette (alias for success shades) ===== */ |
|||
|
|||
--color-green-50: hsl(var(--green-50)); |
|||
--color-green-100: hsl(var(--green-100)); |
|||
--color-green-200: hsl(var(--green-200)); |
|||
--color-green-300: hsl(var(--green-300)); |
|||
--color-green-400: hsl(var(--green-400)); |
|||
--color-green-500: hsl(var(--green-500)); |
|||
--color-green-600: hsl(var(--green-600)); |
|||
--color-green-700: hsl(var(--green-700)); |
|||
--color-green-active: hsl(var(--green-700)); |
|||
--color-green-background-light: hsl(var(--green-200)); |
|||
--color-green-background-lighter: hsl(var(--green-100)); |
|||
--color-green-background-lightest: hsl(var(--green-50)); |
|||
--color-green-border: hsl(var(--green-400)); |
|||
--color-green-border-light: hsl(var(--green-300)); |
|||
--color-green-foreground: hsl(var(--success-foreground)); |
|||
--color-green-hover: hsl(var(--green-600)); |
|||
--color-green-text: hsl(var(--green-500)); |
|||
--color-green-text-active: hsl(var(--green-700)); |
|||
--color-green-text-hover: hsl(var(--green-600)); |
|||
|
|||
/* ===== Red Palette (alias for destructive shades) ===== */ |
|||
|
|||
--color-red-50: hsl(var(--red-50)); |
|||
--color-red-100: hsl(var(--red-100)); |
|||
--color-red-200: hsl(var(--red-200)); |
|||
--color-red-300: hsl(var(--red-300)); |
|||
--color-red-400: hsl(var(--red-400)); |
|||
--color-red-500: hsl(var(--red-500)); |
|||
--color-red-600: hsl(var(--red-600)); |
|||
--color-red-700: hsl(var(--red-700)); |
|||
--color-red-active: hsl(var(--red-700)); |
|||
--color-red-background-light: hsl(var(--red-200)); |
|||
--color-red-background-lighter: hsl(var(--red-100)); |
|||
--color-red-background-lightest: hsl(var(--red-50)); |
|||
--color-red-border: hsl(var(--red-400)); |
|||
--color-red-border-light: hsl(var(--red-300)); |
|||
--color-red-foreground: hsl(var(--destructive-foreground)); |
|||
--color-red-hover: hsl(var(--red-600)); |
|||
--color-red-text: hsl(var(--red-500)); |
|||
--color-red-text-active: hsl(var(--red-700)); |
|||
--color-red-text-hover: hsl(var(--red-600)); |
|||
|
|||
/* ===== Yellow Palette (alias for warning shades) ===== */ |
|||
|
|||
--color-yellow-50: hsl(var(--yellow-50)); |
|||
--color-yellow-100: hsl(var(--yellow-100)); |
|||
--color-yellow-200: hsl(var(--yellow-200)); |
|||
--color-yellow-300: hsl(var(--yellow-300)); |
|||
--color-yellow-400: hsl(var(--yellow-400)); |
|||
--color-yellow-500: hsl(var(--yellow-500)); |
|||
--color-yellow-600: hsl(var(--yellow-600)); |
|||
--color-yellow-700: hsl(var(--yellow-700)); |
|||
--color-yellow-active: hsl(var(--yellow-700)); |
|||
--color-yellow-background-light: hsl(var(--yellow-200)); |
|||
--color-yellow-background-lighter: hsl(var(--yellow-100)); |
|||
--color-yellow-background-lightest: hsl(var(--yellow-50)); |
|||
--color-yellow-border: hsl(var(--yellow-400)); |
|||
--color-yellow-border-light: hsl(var(--yellow-300)); |
|||
--color-yellow-foreground: hsl(var(--warning-foreground)); |
|||
--color-yellow-hover: hsl(var(--yellow-600)); |
|||
--color-yellow-text: hsl(var(--yellow-500)); |
|||
--color-yellow-text-active: hsl(var(--yellow-700)); |
|||
--color-yellow-text-hover: hsl(var(--yellow-600)); |
|||
} |
|||
|
|||
/* Keyframes */ |
|||
@keyframes accordion-down { |
|||
from { |
|||
height: 0; |
|||
} |
|||
|
|||
to { |
|||
height: var(--reka-accordion-content-height); |
|||
} |
|||
} |
|||
|
|||
@keyframes accordion-up { |
|||
from { |
|||
height: var(--reka-accordion-content-height); |
|||
} |
|||
|
|||
to { |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
@keyframes collapsible-down { |
|||
from { |
|||
height: 0; |
|||
} |
|||
|
|||
to { |
|||
height: var(--reka-collapsible-content-height); |
|||
} |
|||
} |
|||
|
|||
@keyframes collapsible-up { |
|||
from { |
|||
height: var(--reka-collapsible-content-height); |
|||
} |
|||
|
|||
to { |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
@keyframes float { |
|||
0% { |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
50% { |
|||
transform: translateY(-20px); |
|||
} |
|||
|
|||
100% { |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* Base styles */ |
|||
@layer base { |
|||
*, |
|||
::after, |
|||
::before { |
|||
@apply border-border outline-ring/50; |
|||
|
|||
box-sizing: border-box; |
|||
border-style: solid; |
|||
border-width: 0; |
|||
} |
|||
|
|||
html { |
|||
@apply text-foreground bg-background font-sans; |
|||
|
|||
scroll-behavior: smooth; |
|||
font-size: var(--font-size-base, 16px); |
|||
font-variation-settings: normal; |
|||
font-synthesis-weight: none; |
|||
line-height: 1.15; |
|||
text-rendering: optimizelegibility; |
|||
text-size-adjust: 100%; |
|||
-webkit-tap-highlight-color: transparent; |
|||
} |
|||
|
|||
#app, |
|||
body, |
|||
html { |
|||
@apply size-full; |
|||
} |
|||
|
|||
body { |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
a, |
|||
a:active, |
|||
a:hover, |
|||
a:link, |
|||
a:visited { |
|||
@apply no-underline; |
|||
} |
|||
|
|||
::view-transition-new(root), |
|||
::view-transition-old(root) { |
|||
@apply animate-none mix-blend-normal; |
|||
} |
|||
|
|||
::view-transition-old(root) { |
|||
@apply z-1; |
|||
} |
|||
|
|||
::view-transition-new(root) { |
|||
@apply z-2147483646; |
|||
} |
|||
|
|||
html.dark::view-transition-old(root) { |
|||
@apply z-2147483646; |
|||
} |
|||
|
|||
html.dark::view-transition-new(root) { |
|||
@apply z-1; |
|||
} |
|||
|
|||
input::placeholder, |
|||
textarea::placeholder { |
|||
@apply opacity-100; |
|||
} |
|||
|
|||
input[type='number']::-webkit-inner-spin-button, |
|||
input[type='number']::-webkit-outer-spin-button { |
|||
@apply m-0 appearance-none; |
|||
} |
|||
|
|||
/* Only adjust scrollbar for non-macOS */ |
|||
html:not([data-platform='macOs']) { |
|||
::-webkit-scrollbar { |
|||
@apply h-2.5 w-2.5; |
|||
} |
|||
|
|||
::-webkit-scrollbar-thumb { |
|||
@apply bg-border rounded-sm border-none; |
|||
} |
|||
|
|||
::-webkit-scrollbar-track { |
|||
@apply rounded-sm border-none bg-transparent shadow-none; |
|||
} |
|||
|
|||
::-webkit-scrollbar-button { |
|||
@apply hidden; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* Custom utilities (v4 @utility syntax) */ |
|||
@utility flex-center { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
@utility flex-col-center { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
/* Component styles (complex selectors, not convertible to @utility) */ |
|||
.outline-box { |
|||
@apply outline-border relative cursor-pointer rounded-md p-1 outline-1; |
|||
} |
|||
|
|||
.outline-box::after { |
|||
@apply absolute top-1/2 left-1/2 z-20 h-0 w-px rounded-sm opacity-0 outline-2 outline-transparent transition-all duration-300 content-[""]; |
|||
} |
|||
|
|||
.outline-box.outline-box-active { |
|||
@apply outline-primary outline-2; |
|||
} |
|||
|
|||
.outline-box.outline-box-active::after { |
|||
display: none; |
|||
} |
|||
|
|||
.outline-box:not(.outline-box-active):hover::after { |
|||
@apply outline-primary top-0 left-0 h-full w-full p-1 opacity-100; |
|||
} |
|||
|
|||
.vben-link { |
|||
@apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer; |
|||
} |
|||
|
|||
.card-box { |
|||
@apply bg-card text-card-foreground border-border rounded-xl border; |
|||
} |
|||
|
|||
/* Enter animations (converted from enterAnimationPlugin) */ |
|||
@keyframes enter-x-animation { |
|||
to { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
|
|||
@keyframes enter-y-animation { |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
.enter-x:nth-child(1) { |
|||
opacity: 0; |
|||
transform: translateX(50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.1s forwards; |
|||
} |
|||
|
|||
.enter-x:nth-child(2) { |
|||
opacity: 0; |
|||
transform: translateX(50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.2s forwards; |
|||
} |
|||
|
|||
.enter-x:nth-child(3) { |
|||
opacity: 0; |
|||
transform: translateX(50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.3s forwards; |
|||
} |
|||
|
|||
.enter-x:nth-child(4) { |
|||
opacity: 0; |
|||
transform: translateX(50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.4s forwards; |
|||
} |
|||
|
|||
.enter-x:nth-child(5) { |
|||
opacity: 0; |
|||
transform: translateX(50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.5s forwards; |
|||
} |
|||
|
|||
.enter-y:nth-child(1) { |
|||
opacity: 0; |
|||
transform: translateY(50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.1s forwards; |
|||
} |
|||
|
|||
.enter-y:nth-child(2) { |
|||
opacity: 0; |
|||
transform: translateY(50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.2s forwards; |
|||
} |
|||
|
|||
.enter-y:nth-child(3) { |
|||
opacity: 0; |
|||
transform: translateY(50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.3s forwards; |
|||
} |
|||
|
|||
.enter-y:nth-child(4) { |
|||
opacity: 0; |
|||
transform: translateY(50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.4s forwards; |
|||
} |
|||
|
|||
.enter-y:nth-child(5) { |
|||
opacity: 0; |
|||
transform: translateY(50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.5s forwards; |
|||
} |
|||
|
|||
.-enter-x:nth-child(1) { |
|||
opacity: 0; |
|||
transform: translateX(-50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.1s forwards; |
|||
} |
|||
|
|||
.-enter-x:nth-child(2) { |
|||
opacity: 0; |
|||
transform: translateX(-50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.2s forwards; |
|||
} |
|||
|
|||
.-enter-x:nth-child(3) { |
|||
opacity: 0; |
|||
transform: translateX(-50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.3s forwards; |
|||
} |
|||
|
|||
.-enter-x:nth-child(4) { |
|||
opacity: 0; |
|||
transform: translateX(-50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.4s forwards; |
|||
} |
|||
|
|||
.-enter-x:nth-child(5) { |
|||
opacity: 0; |
|||
transform: translateX(-50px); |
|||
animation: enter-x-animation 0.3s ease-in-out 0.5s forwards; |
|||
} |
|||
|
|||
.-enter-y:nth-child(1) { |
|||
opacity: 0; |
|||
transform: translateY(-50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.1s forwards; |
|||
} |
|||
|
|||
.-enter-y:nth-child(2) { |
|||
opacity: 0; |
|||
transform: translateY(-50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.2s forwards; |
|||
} |
|||
|
|||
.-enter-y:nth-child(3) { |
|||
opacity: 0; |
|||
transform: translateY(-50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.3s forwards; |
|||
} |
|||
|
|||
.-enter-y:nth-child(4) { |
|||
opacity: 0; |
|||
transform: translateY(-50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.4s forwards; |
|||
} |
|||
|
|||
.-enter-y:nth-child(5) { |
|||
opacity: 0; |
|||
transform: translateY(-50px); |
|||
animation: enter-y-animation 0.3s ease-in-out 0.5s forwards; |
|||
} |
|||
|
|||
html.invert-mode { |
|||
@apply invert; |
|||
} |
|||
|
|||
html.grayscale-mode { |
|||
@apply grayscale; |
|||
} |
|||
@import '@vben/tailwind-config/theme'; |
|||
|
|||
@ -0,0 +1 @@ |
|||
@reference "@vben/tailwind-config/theme"; |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue