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
+990 -204
10 changed files with 990 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ff14e39f21 - Show all commits
app/components/Avatar.js
+3 -3
View File
@@ -6,10 +6,10 @@ export default function Avatar({
...props
}) {
const sizeStyles = {
small: "w-[16px] h-[16px]",
small: "w-[var(--spacing-scale-016)] h-[var(--spacing-scale-016)]",
medium: "w-[18px] h-[18px]",
large: "w-[24px] h-[24px]",
xlarge: "w-[32px] h-[32px]",
large: "w-[var(--spacing-scale-024)] h-[var(--spacing-scale-024)]",
xlarge: "w-[var(--spacing-scale-032)] h-[var(--spacing-scale-032)]",
};
const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover ${sizeStyles[size]} ${className}`;
app/components/AvatarContainer.js
+2 -2
View File
@@ -5,9 +5,9 @@ export default function AvatarContainer({
...props
}) {
const sizeStyles = {
small: "flex -space-x-2",
small: "flex -space-x-[var(--spacing-scale-008)]",
medium: "flex -space-x-[9px]",
large: "flex -space-x-[10px]",
large: "flex -space-x-[var(--spacing-scale-010)]",
xlarge: "flex -space-x-[13px]",
};
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-measures-spacing-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-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}`}
{...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-[16px] rounded-br-[16px] rounded-bl-[16px] 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-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">
{/* DECORATIONS (behind content) */}
<HeroDecor
className="pointer-events-none absolute z-0
app/components/NavigationItem.js
+1 -1
View File
@@ -16,7 +16,7 @@ export default function NavigationItem({
// Size styles
const sizeStyles = {
default:
"px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-016)] gap-[var(--spacing-scale-004)]",
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)]",
xsmall:
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
};
app/components/NumberedCards.js
+1 -1
View File
@@ -26,7 +26,7 @@ const NumberedCards = ({ title, subtitle, cards }) => {
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
/>
<section className="bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]">
<div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
<div className="max-w-[var(--spacing-scale-1200)] mx-auto">
<div className="grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]">
{/* Section Header */}
<div>
app/components/RuleStack.js
+4 -4
View File
@@ -26,7 +26,7 @@ const RuleStack = ({ children, className = "" }) => {
height={40}
/>
}
backgroundColor="bg-[var(--color-community-kiwi-200)]"
backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
/>
<RuleCard
title="Consensus"
@@ -39,7 +39,7 @@ const RuleStack = ({ children, className = "" }) => {
height={40}
/>
}
backgroundColor="bg-[var(--color-community-red-200)]"
backgroundColor="bg-[var(--color-surface-default-brand-rust)]"
/>
<RuleCard
title="Elected Board"
@@ -52,7 +52,7 @@ const RuleStack = ({ children, className = "" }) => {
height={40}
/>
}
backgroundColor="bg-[var(--color-surface-default-brand-accent)]"
backgroundColor="bg-[var(--color-surface-default-brand-red)]"
/>
<RuleCard
title="Petition"
@@ -65,7 +65,7 @@ const RuleStack = ({ children, className = "" }) => {
height={40}
/>
}
backgroundColor="bg-[var(--color-community-blue-300)]"
backgroundColor="bg-[var(--color-surface-default-brand-teal)]"
/>
</div>
</div>
app/components/SectionHeader.js
+6 -6
View File
@@ -4,12 +4,12 @@ const SectionHeader = ({ title, subtitle, titleLg, variant = "default" }) => {
return (
<div className="flex flex-col gap-1 w-full lg:flex-row lg:justify-between lg:items-start xl:gap-[var(--spacing-scale-024)]">
{/* Title Container - Left side (lg breakpoint) */}
<div className="lg:w-[369px] lg:h-[120px] lg:flex lg:items-center xl:w-[452px] xl:h-[156px] xl:flex xl:items-center">
<div className="lg:w-[369px] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center xl:w-[452px] xl:h-[156px] xl:flex xl:items-center">
<h2
className={
variant === "small"
? "font-bricolage-grotesque font-bold text-[28px] leading-[36px] text-[var(--color-content-default-primary)]"
: "font-bricolage-grotesque font-bold text-[28px] leading-[36px] sm:text-[32px] sm:leading-[40px] lg:text-[32px] lg:leading-[40px] lg:w-[369px] lg:pr-24 xl:text-[40px] xl:leading-[52px] xl:w-[452px] xl:pr-24 text-[var(--color-content-default-primary)]"
? "font-bricolage-grotesque font-bold text-medium-heading text-[var(--color-content-default-primary)]"
: "font-bricolage-grotesque font-bold text-medium-heading sm:text-large-heading lg:text-large-heading lg:w-[369px] lg:pr-[var(--spacing-scale-024)] xl:text-xx-large-heading xl:w-[452px] xl:pr-[var(--spacing-scale-024)] text-[var(--color-content-default-primary)]"
}
>
<span className="block lg:hidden">{title}</span>
@@ -18,12 +18,12 @@ const SectionHeader = ({ title, subtitle, titleLg, variant = "default" }) => {
</div>
{/* Subtitle Container */}
<div className="lg:w-[928px] lg:h-[120px] lg:flex lg:items-center lg:justify-end xl:w-[763px] xl:h-[156px] xl:flex xl:items-center xl:justify-end">
<div className="lg:w-[928px] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center lg:justify-end xl:w-[763px] xl:h-[156px] xl:flex xl:items-center xl:justify-end">
<p
className={
variant === "small"
? "font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-default-tertiary)]"
: "font-inter font-normal text-[18px] leading-[130%] sm:text-[18px] sm:leading-[32px] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] xl:text-right text-[#484848] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)] tracking-[0px]"
? "font-inter font-normal text-small-paragraph text-[var(--color-content-default-tertiary)]"
: "font-inter font-normal text-large-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph xl:text-right text-[#484848] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)] tracking-[0px]"
}
>
{subtitle}
app/components/SectionNumber.js
+2 -2
View File
@@ -15,14 +15,14 @@ const SectionNumber = ({ number }) => {
};
return (
<div className="relative size-[40px] overflow-visible -rotate-[15deg]">
<div className="relative size-[var(--spacing-scale-040)] overflow-visible -rotate-[15deg]">
<img
src={getImageSrc(number)}
alt={`Section ${number}`}
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 size-[47.37px] max-w-none"
/>
<div className="absolute inset-0 flex items-center justify-center">
<span className="text-[var(--font-size-body-small)] font-[var(--font-weight-bold)] text-[var(--color-content-inverse-primary)]">
<span className="text-small-label font-bold text-[var(--color-content-inverse-primary)]">
{number}
</span>
</div>
app/tailwind.css
+969 -183
View File
File diff suppressed because it is too large Load Diff