CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

TalwindCSS Update #10

Merged
an.di merged 10 commits from adilallo/TailwindCSSUpdate into adilallo/component/RuleStack 2025-08-23 23:20:25 +00:00
Conversation 0 Commits 10 Files Changed 20
+4 -4
3 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d428bf0c09 - Show all commits
app/components/HeaderTab.js
+1 -1
View File
@@ -10,7 +10,7 @@ export default function HeaderTab({
return (
<div
className={`HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-scale-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${stretchClasses} ${className}`}
className={`HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-inverse-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-scale-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${stretchClasses} ${className}`}
{...props}
>
{children}
app/components/HeroBanner.js
+1 -1
View File
@@ -8,7 +8,7 @@ const HeroBanner = ({ title, subtitle, description, ctaText, ctaHref }) => {
<section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]">
<div className="flex flex-col gap-[var(--spacing-scale-010)]">
{/* Frame container for content */}
<div className="bg-[var(--color-surface-default-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[var(--radius-measures-radius-medium)] rounded-br-[var(--radius-measures-radius-medium)] rounded-bl-[var(--radius-measures-radius-medium)] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden">
<div className="bg-[var(--color-surface-inverse-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[var(--radius-measures-radius-medium)] rounded-br-[var(--radius-measures-radius-medium)] rounded-bl-[var(--radius-measures-radius-medium)] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden">
{/* DECORATIONS (behind content) */}
<HeroDecor
className="pointer-events-none absolute z-0
app/tailwind.css
+2 -2
View File
@@ -372,7 +372,7 @@
--color-surface-default-brand-lavender: var(--color-lavender-lavender200);
--color-surface-default-brand-lighter-accent: var(--color-yellow-yellow100);
--color-surface-default-brand-lime: var(--color-lime-lime100);
--color-surface-default-brand-primary: var(--color-yellow-yellow50);
--color-surface-default-brand-primary: var(--color-yellow-yellow100);
--color-surface-default-brand-royal: var(--color-royal-blue-royal-blue50);
--color-surface-default-brand-rust: var(--color-rust-rust100);
--color-surface-default-brand-teal: var(--color-teal-teal50);
@@ -389,7 +389,7 @@
--color-surface-default-utility-warning: var(--color-yellow-yellow500);
--color-surface-inverse-brand-accent: var(--color-yellow-yellow100);
--color-surface-inverse-brand-primary: var(--color-yellow-yellow100);
--color-surface-inverse-brand-primary: var(--color-yellow-yellow50);
--color-surface-inverse-brand-secondary: var(--color-rust-rust300);
--color-surface-inverse-primary: var(--color-gray-000);
--color-surface-inverse-secondary: var(--color-gray-100);