From a8f17cc6c7407fecc0e2764b5b63878b0d3ca55a Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Thu, 21 Aug 2025 20:10:46 -0600 Subject: [PATCH 01/10] Fix Storybook fonts --- .storybook/main.js | 4 ---- .storybook/preview.js | 22 ++++++++++++++++++++++ .storybook/preview.local.js | 22 ++++++++++++++++++++++ 3 files changed, 44 insertions(+), 4 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 7afbb5d..6e3993d 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -16,11 +16,7 @@ const config = { options: {}, }, staticDirs: ["../public"], - managerHead: (head) => `${head}`, - previewHead: (head) => `${head}`, async viteFinal(cfg) { - // IMPORTANT: Set base path for GitHub Pages sub-path hosting - cfg.base = "/communityrulestorybook/"; // Ensure esbuild treats .js as JSX during dep pre-bundling cfg.optimizeDeps ??= {}; cfg.optimizeDeps.esbuildOptions ??= {}; diff --git a/.storybook/preview.js b/.storybook/preview.js index 1fd25df..59394fb 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,5 +1,20 @@ import "../app/globals.css"; +// Import Google Fonts for Storybook +import { Inter, Bricolage_Grotesque } from "next/font/google"; + +const inter = Inter({ + subsets: ["latin"], + weight: ["400", "500"], + variable: "--font-inter", +}); + +const bricolageGrotesque = Bricolage_Grotesque({ + subsets: ["latin"], + weight: ["400", "500"], + variable: "--font-bricolage-grotesque", +}); + /** @type { import('@storybook/react').Preview } */ const preview = { parameters: { @@ -11,6 +26,13 @@ const preview = { }, }, }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], }; export default preview; diff --git a/.storybook/preview.local.js b/.storybook/preview.local.js index 1fd25df..59394fb 100644 --- a/.storybook/preview.local.js +++ b/.storybook/preview.local.js @@ -1,5 +1,20 @@ import "../app/globals.css"; +// Import Google Fonts for Storybook +import { Inter, Bricolage_Grotesque } from "next/font/google"; + +const inter = Inter({ + subsets: ["latin"], + weight: ["400", "500"], + variable: "--font-inter", +}); + +const bricolageGrotesque = Bricolage_Grotesque({ + subsets: ["latin"], + weight: ["400", "500"], + variable: "--font-bricolage-grotesque", +}); + /** @type { import('@storybook/react').Preview } */ const preview = { parameters: { @@ -11,6 +26,13 @@ const preview = { }, }, }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], }; export default preview; From a9557ddedf1e392cf77a156c6d96f8b89a1ea35e Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Fri, 22 Aug 2025 13:57:56 -0600 Subject: [PATCH 02/10] Rule Stack Start --- app/components/RuleCard.js | 40 +++++++++++++++ app/components/RuleStack.js | 75 +++++++++++++++++++++++++++++ app/components/SectionHeader.js | 18 +++++-- app/globals.css | 5 ++ app/layout.js | 14 ++++-- app/page.js | 2 + public/assets/Icon_Consensus.svg | 10 ++++ public/assets/Icon_ElectedBoard.svg | 9 ++++ public/assets/Icon_Petition.svg | 13 +++++ public/assets/Icon_Sociocracy.svg | 3 ++ 10 files changed, 183 insertions(+), 6 deletions(-) create mode 100644 app/components/RuleCard.js create mode 100644 app/components/RuleStack.js create mode 100644 public/assets/Icon_Consensus.svg create mode 100644 public/assets/Icon_ElectedBoard.svg create mode 100644 public/assets/Icon_Petition.svg create mode 100644 public/assets/Icon_Sociocracy.svg diff --git a/app/components/RuleCard.js b/app/components/RuleCard.js new file mode 100644 index 0000000..aaa94f4 --- /dev/null +++ b/app/components/RuleCard.js @@ -0,0 +1,40 @@ +"use client"; + +const RuleCard = ({ + title, + description, + icon, + backgroundColor = "bg-[var(--color-community-teal-100)]", + className = "", +}) => { + return ( +
+ {/* Header Container */} +
+ {/* Icon Container */} + {icon && ( +
+ {icon} +
+ )} + {/* Title Container */} + {title && ( +
+

+ {title} +

+
+ )} +
+ {description && ( +

+ {description} +

+ )} +
+ ); +}; + +export default RuleCard; diff --git a/app/components/RuleStack.js b/app/components/RuleStack.js new file mode 100644 index 0000000..a6d67d6 --- /dev/null +++ b/app/components/RuleStack.js @@ -0,0 +1,75 @@ +"use client"; + +import SectionHeader from "./SectionHeader"; +import RuleCard from "./RuleCard"; +import Image from "next/image"; + +const RuleStack = ({ children, className = "" }) => { + return ( +
+ +
+ + } + backgroundColor="bg-[var(--color-community-kiwi-200)]" + /> + + } + backgroundColor="bg-[var(--color-community-red-200)]" + /> + + } + backgroundColor="bg-[var(--color-surface-default-brand-accent)]" + /> + + } + backgroundColor="bg-[var(--color-community-blue-300)]" + /> +
+
+ ); +}; + +export default RuleStack; diff --git a/app/components/SectionHeader.js b/app/components/SectionHeader.js index e6dfe6c..0009f7d 100644 --- a/app/components/SectionHeader.js +++ b/app/components/SectionHeader.js @@ -1,11 +1,17 @@ "use client"; -const SectionHeader = ({ title, subtitle, titleLg }) => { +const SectionHeader = ({ title, subtitle, titleLg, variant = "default" }) => { return (
{/* Title Container - Left side (lg breakpoint) */}
-

+

{title} {titleLg || title}

@@ -13,7 +19,13 @@ const SectionHeader = ({ title, subtitle, titleLg }) => { {/* Subtitle Container */}
-

+

{subtitle}

diff --git a/app/globals.css b/app/globals.css index bdc4871..a8c908b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -12,6 +12,11 @@ -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } +.font-space-grotesk { + font-family: var(--font-space-grotesk), ui-sans-serif, system-ui, + -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; +} + /* Set default body text face */ html, body { diff --git a/app/layout.js b/app/layout.js index 18e97dc..34589a7 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,4 +1,4 @@ -import { Inter, Bricolage_Grotesque } from "next/font/google"; +import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google"; import "./globals.css"; import HomeHeader from "./components/HomeHeader"; import Footer from "./components/Footer"; @@ -11,14 +11,22 @@ const inter = Inter({ const bricolageGrotesque = Bricolage_Grotesque({ subsets: ["latin"], - weight: ["400", "500"], + weight: ["400", "500", "700"], variable: "--font-bricolage-grotesque", }); +const spaceGrotesk = Space_Grotesk({ + subsets: ["latin"], + weight: ["400", "500", "700"], + variable: "--font-space-grotesk", +}); + export default function RootLayout({ children }) { return ( - +
{children}
diff --git a/app/page.js b/app/page.js index 5e07816..e6a48ad 100644 --- a/app/page.js +++ b/app/page.js @@ -1,6 +1,7 @@ import NumberedCards from "./components/NumberedCards"; import HeroBanner from "./components/HeroBanner"; import LogoWall from "./components/LogoWall"; +import RuleStack from "./components/RuleStack"; export default function Page() { const heroBannerData = { @@ -39,6 +40,7 @@ export default function Page() { +
); } diff --git a/public/assets/Icon_Consensus.svg b/public/assets/Icon_Consensus.svg new file mode 100644 index 0000000..0bcac3e --- /dev/null +++ b/public/assets/Icon_Consensus.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/Icon_ElectedBoard.svg b/public/assets/Icon_ElectedBoard.svg new file mode 100644 index 0000000..1e4405c --- /dev/null +++ b/public/assets/Icon_ElectedBoard.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/Icon_Petition.svg b/public/assets/Icon_Petition.svg new file mode 100644 index 0000000..ba2d443 --- /dev/null +++ b/public/assets/Icon_Petition.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/assets/Icon_Sociocracy.svg b/public/assets/Icon_Sociocracy.svg new file mode 100644 index 0000000..85fc35f --- /dev/null +++ b/public/assets/Icon_Sociocracy.svg @@ -0,0 +1,3 @@ + + + From ff14e39f2167e53ef4a9683433b21fc885081b1a Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Fri, 22 Aug 2025 16:27:34 -0600 Subject: [PATCH 03/10] Update Tailwind CSS --- app/components/Avatar.js | 6 +- app/components/AvatarContainer.js | 4 +- app/components/HeaderTab.js | 2 +- app/components/HeroBanner.js | 2 +- app/components/NavigationItem.js | 2 +- app/components/NumberedCards.js | 2 +- app/components/RuleStack.js | 8 +- app/components/SectionHeader.js | 12 +- app/components/SectionNumber.js | 4 +- app/tailwind.css | 1152 ++++++++++++++++++++++++----- 10 files changed, 990 insertions(+), 204 deletions(-) diff --git a/app/components/Avatar.js b/app/components/Avatar.js index 2abbefe..fbb366a 100644 --- a/app/components/Avatar.js +++ b/app/components/Avatar.js @@ -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}`; diff --git a/app/components/AvatarContainer.js b/app/components/AvatarContainer.js index 55ecfff..128775d 100644 --- a/app/components/AvatarContainer.js +++ b/app/components/AvatarContainer.js @@ -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]", }; diff --git a/app/components/HeaderTab.js b/app/components/HeaderTab.js index 1a1f7c3..6e1e18a 100644 --- a/app/components/HeaderTab.js +++ b/app/components/HeaderTab.js @@ -10,7 +10,7 @@ export default function HeaderTab({ return (
{children} diff --git a/app/components/HeroBanner.js b/app/components/HeroBanner.js index 419f16c..e68f3c7 100644 --- a/app/components/HeroBanner.js +++ b/app/components/HeroBanner.js @@ -8,7 +8,7 @@ const HeroBanner = ({ title, subtitle, description, ctaText, ctaHref }) => {
{/* Frame container for content */} -
+
{/* DECORATIONS (behind content) */} { dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }} />
-
+
{/* Section Header */}
diff --git a/app/components/RuleStack.js b/app/components/RuleStack.js index a6d67d6..42d3ce9 100644 --- a/app/components/RuleStack.js +++ b/app/components/RuleStack.js @@ -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)]" /> { height={40} /> } - backgroundColor="bg-[var(--color-community-red-200)]" + backgroundColor="bg-[var(--color-surface-default-brand-rust)]" /> { height={40} /> } - backgroundColor="bg-[var(--color-surface-default-brand-accent)]" + backgroundColor="bg-[var(--color-surface-default-brand-red)]" /> { height={40} /> } - backgroundColor="bg-[var(--color-community-blue-300)]" + backgroundColor="bg-[var(--color-surface-default-brand-teal)]" />
diff --git a/app/components/SectionHeader.js b/app/components/SectionHeader.js index 0009f7d..f32d2ee 100644 --- a/app/components/SectionHeader.js +++ b/app/components/SectionHeader.js @@ -4,12 +4,12 @@ const SectionHeader = ({ title, subtitle, titleLg, variant = "default" }) => { return (
{/* Title Container - Left side (lg breakpoint) */} -
+

{title} @@ -18,12 +18,12 @@ const SectionHeader = ({ title, subtitle, titleLg, variant = "default" }) => {

{/* Subtitle Container */} -
+

{subtitle} diff --git a/app/components/SectionNumber.js b/app/components/SectionNumber.js index 14d5f4d..cee6814 100644 --- a/app/components/SectionNumber.js +++ b/app/components/SectionNumber.js @@ -15,14 +15,14 @@ const SectionNumber = ({ number }) => { }; return ( -

+
{`Section
- + {number}
diff --git a/app/tailwind.css b/app/tailwind.css index 6cb9b11..2942914 100644 --- a/app/tailwind.css +++ b/app/tailwind.css @@ -1,8 +1,3 @@ -/** - * This file was generated by Supernova.io and should not be changed manually. - * To modify the format or content of this file, please contact your design system team. - */ - @import "tailwindcss"; /* Make sure Tailwind scans stories and .storybook files */ @@ -18,7 +13,7 @@ --breakpoint-lg: 1024px; --breakpoint-xl: 1440px; - /* Reset default Tailwind configuration */ + /* Reset Tailwind color defaults to avoid collisions */ --color-*: initial; /* Dimension */ @@ -44,8 +39,10 @@ --spacing-scale-076: 76px; --spacing-scale-096: 96px; --spacing-scale-120: 120px; + --spacing-scale-160: 160px; --spacing-scale-260: 260px; --spacing-scale-290: 290px; + --spacing-measures-sizing-008: var(--spacing-scale-008); --spacing-measures-sizing-010: var(--spacing-scale-010); --spacing-measures-sizing-012: var(--spacing-scale-012); @@ -60,11 +57,14 @@ --spacing-measures-sizing-064: var(--spacing-scale-064); --spacing-measures-sizing-076: var(--spacing-scale-076); --spacing-measures-sizing-096: var(--spacing-scale-096); - --spacing-measures-spacing-000: var(--spacing-scale-000); --spacing-measures-sizing-120: var(--spacing-scale-120); + + /* Spacing aliases */ + --spacing-measures-spacing-000: var(--spacing-scale-000); --spacing-measures-spacing-001: var(--spacing-scale-001); --spacing-measures-spacing-002: var(--spacing-scale-002); --spacing-measures-spacing-004: var(--spacing-scale-004); + --spacing-measures-spacing-006: var(--spacing-scale-006); --spacing-measures-spacing-008: var(--spacing-scale-008); --spacing-measures-spacing-010: var(--spacing-scale-010); --spacing-measures-spacing-012: var(--spacing-scale-012); @@ -80,196 +80,982 @@ --spacing-measures-spacing-076: var(--spacing-scale-076); --spacing-measures-spacing-096: var(--spacing-scale-096); --spacing-measures-spacing-120: var(--spacing-scale-120); + --spacing-measures-spacing-160: var(--spacing-scale-160); + --spacing-measures-spacing-260: var(--spacing-scale-260); - /* BorderRadius */ + /* Border radius */ --radius-measures-radius-none: var(--spacing-scale-000); - --radius-measures-radius-small: var(--spacing-scale-002); - --radius-measures-radius-medium: var(--spacing-scale-004); - --radius-measures-radius-large: var(--spacing-scale-008); - --radius-measures-radius-xlarge: var(--spacing-scale-012); - --radius-measures-radius-full: var(--spacing-scale-120); + --radius-measures-radius-xsmall: var(--spacing-scale-006); + --radius-measures-radius-small: var(--spacing-scale-012); + --radius-measures-radius-medium: var(--spacing-scale-016); + --radius-measures-radius-large: var(--spacing-scale-024); + --radius-measures-radius-xlarge: var(--spacing-scale-032); + --radius-measures-radius-full: 9999px; - /* BorderWidth */ - --border-measures-stroke-large: var(--spacing-scale-003); - --border-measures-stroke-medium: var(--spacing-scale-002); + /* Border widths */ --border-measures-stroke-small: var(--spacing-scale-001); + --border-measures-stroke-medium: var(--spacing-scale-002); + --border-measures-stroke-large: var(--spacing-scale-003); - /* Color */ - --color-community-yellow-100: oklch(98.48% 0.055 105.21); - --color-community-yellow-200: oklch(94.76% 0.083 103.43); - --color-community-yellow-300: oklch(90.22% 0.095 102.92); - --color-community-yellow-400: oklch(84.34% 0.097 101.09); - --color-community-yellow-500: oklch(76.71% 0.094 100.01); - --color-community-yellow-600: oklch(66.85% 0.083 99.46); - --color-community-yellow-700: oklch(55.29% 0.069 98.1); - --color-community-yellow-800: oklch(42.89% 0.054 98.59); - --color-community-yellow-900: oklch(30.32% 0.036 99.23); - --color-community-teal-050: oklch(95.63% 0.022 13.86); - --color-community-orange-050: oklch(98.55% 0.017 201.66); - --color-community-mauve-050: oklch(98.1% 0.009 100.14); - --color-community-orange-100: oklch(95.43% 0.06 198.83); - --color-community-orange-200: oklch(83.58% 0.121 198.44); - --color-community-orange-300: oklch(69.29% 0.124 217.83); - --color-community-orange-400: oklch(50.04% 0.102 233.41); - --color-community-orange-500: oklch(39.59% 0.091 242.29); - --color-community-orange-600: oklch(31.94% 0.096 255.01); - --color-community-orange-700: oklch(20.28% 0.053 252.69); - --color-community-blue-050: oklch(39.46% 0.149 259.87); - --color-community-kiwi-050: oklch(97.77% 0.031 127.13); - --color-community-pink-050: oklch(95.93% 0.032 321.01); - --color-community-pink-100: oklch(90.78% 0.072 319.41); - --color-community-pink-200: oklch(85.82% 0.091 318.38); - --color-community-pink-300: oklch(81.18% 0.096 318.17); - --color-community-pink-400: oklch(75.77% 0.097 317.51); - --color-community-pink-500: oklch(68.84% 0.092 316.79); - --color-community-pink-600: oklch(60.22% 0.08 316.45); - --color-community-pink-700: oklch(50.08% 0.065 315.63); - --color-community-pink-800: oklch(38.98% 0.049 315.23); - --color-community-pink-900: oklch(27.83% 0.03 314.26); - --color-community-red-050: oklch(96.51% 0.014 22.47); - --color-yellow-opacity-000: oklch(30.32% 0.036 99.23 / 0%); - --color-yellow-opacity-001: oklch(30.32% 0.036 99.23 / 1%); - --color-yellow-opacity-050: oklch(30.32% 0.036 99.23 / 5%); - --color-yellow-opacity-100: oklch(30.32% 0.036 99.23 / 10%); - --color-yellow-opacity-200: oklch(42.89% 0.054 98.59 / 20%); - --color-yellow-opacity-300: oklch(55.29% 0.069 98.1 / 30%); - --color-yellow-opacity-400: oklch(66.85% 0.083 99.46 / 40%); - --color-yellow-opacity-500: oklch(76.71% 0.094 100.01 / 50%); - --color-yellow-opacity-600: oklch(84.34% 0.097 101.09 / 60%); - --color-yellow-opacity-700: oklch(90.22% 0.095 102.92 / 70%); - --color-yellow-opacity-800: oklch(94.76% 0.083 103.43 / 80%); - --color-yellow-opacity-900: oklch(98.48% 0.055 105.21 / 90%); - --color-opacity-000: oklch(97.31% 0 263.28 / 0%); - --color-opacity-001: oklch(97.31% 0 263.28 / 1%); - --color-opacity-050: oklch(97.31% 0 263.28 / 50%); - --color-opacity-100: oklch(94.91% 0 263.28 / 50%); - --color-opacity-200: oklch(91.28% 0 263.28 / 50%); - --color-opacity-300: oklch(84.21% 0 263.28 / 50%); - --color-opacity-400: oklch(75.4% 0 263.28 / 50%); - --color-opacity-500: oklch(56.24% 0 263.28 / 50%); - --color-opacity-600: oklch(44.59% 0 263.28 / 50%); - --color-opacity-700: oklch(32.11% 0 263.28 / 50%); - --color-opacity-800: oklch(23.93% 0 263.28 / 50%); - --color-opacity-900: oklch(19.13% 0 263.28 / 50%); - --color-gray-000: oklch(100% 0 263.28); - --color-gray-050: oklch(97.31% 0 263.28); - --color-gray-100: oklch(92.19% 0 263.28); - --color-gray-200: oklch(86.38% 0 263.28); - --color-gray-300: oklch(76.99% 0 263.28); - --color-gray-400: oklch(65% 0 263.28); - --color-gray-500: oklch(51.03% 0 263.28); - --color-gray-600: oklch(39.42% 0 263.28); - --color-gray-700: oklch(29.72% 0 263.28); - --color-gray-800: oklch(23.93% 0 263.28); - --color-gray-900: oklch(19.13% 0 263.28); - --color-gray-1000: oklch(0% 0 0); - --color-community-blue-100: oklch(94.43% 0.038 211.19); - --color-community-blue-200: oklch(91.44% 0.048 211.24); - --color-community-blue-300: oklch(87.85% 0.052 210.11); - --color-community-blue-400: oklch(82.74% 0.054 206.72); - --color-community-blue-500: oklch(75.92% 0.052 204.06); - --color-community-blue-600: oklch(66.92% 0.047 201.57); - --color-community-blue-700: oklch(55.72% 0.04 200.59); - --color-community-blue-800: oklch(43.34% 0.03 199.27); - --color-community-blue-900: oklch(30.78% 0.02 196.24); - --color-community-red-100: oklch(86.1% 0.051 359.55); - --color-community-red-200: oklch(82% 0.065 0.21); - --color-community-red-300: oklch(77.79% 0.072 359.58); - --color-community-red-400: oklch(73.06% 0.073 359.79); - --color-community-red-500: oklch(66.82% 0.07 359.71); - --color-community-red-600: oklch(58.65% 0.062 357.88); - --color-community-red-700: oklch(49.14% 0.05 359.07); - --color-community-red-800: oklch(38.48% 0.039 356.54); - --color-community-red-900: oklch(28.01% 0.024 356.91); - --color-community-orange-800: oklch(40.58% 0.027 46.54); - --color-community-orange-900: oklch(29.05% 0.017 48.05); - --color-community-mauve-100: oklch(88.23% 0.059 282.99); - --color-community-mauve-200: oklch(82.9% 0.074 281.26); - --color-community-mauve-300: oklch(78.02% 0.08 281.18); - --color-community-mauve-400: oklch(72.83% 0.08 280.17); - --color-community-mauve-500: oklch(66.39% 0.075 278.85); - --color-community-mauve-600: oklch(58.34% 0.063 277.78); - --color-community-mauve-700: oklch(48.68% 0.052 277.4); - --color-community-mauve-800: oklch(38.09% 0.038 276.43); - --color-community-mauve-900: oklch(27.24% 0.024 277.83); - --color-green0: oklch(98.15% 0.028 155.49); - --color-community-teal-100: oklch(96.1% 0.059 157.85); - --color-community-teal-200: oklch(92.78% 0.075 157.69); - --color-community-teal-300: oklch(88.65% 0.079 158.06); - --color-community-teal-400: oklch(83.47% 0.079 158.61); - --color-community-teal-500: oklch(76.31% 0.074 159.02); - --color-community-teal-600: oklch(66.77% 0.064 159.89); - --color-community-teal-700: oklch(55.57% 0.052 160.52); - --color-community-teal-800: oklch(43.12% 0.039 160.72); - --color-community-teal-900: oklch(30.48% 0.025 161.27); - --color-community-kiwi-100: oklch(92.3% 0.055 122.16); - --color-community-kiwi-200: oklch(89.94% 0.07 122.82); - --color-community-kiwi-300: oklch(86.7% 0.077 122.51); - --color-community-kiwi-400: oklch(81.99% 0.078 123.36); - --color-community-kiwi-500: oklch(75.31% 0.074 122.9); - --color-community-kiwi-600: oklch(66.25% 0.066 123.19); - --color-community-kiwi-700: oklch(55.28% 0.055 123.2); - --color-community-kiwi-800: oklch(43.14% 0.041 122.55); - --color-community-kiwi-900: oklch(31.14% 0.027 122.95); - --color-content-default-utility-positive: oklch(55.09% 0.151 143.2); - --color-content-default-utility-negative: oklch(58.87% 0.184 29.83); - --color-content-default-utility-info: oklch(55.14% 0.217 260.1); - --color-content-inverse-utility-positive: oklch(70.5% 0.146 138.3); - --color-content-inverse-utility-warning: oklch(79.77% 0.155 89.66); - --color-content-inverse-utility-negative: oklch(69.63% 0.149 28.39); - --color-content-inverse-utility-info: oklch(61.97% 0.194 258.88); - --color-surface-default-utility-info: oklch(55.14% 0.217 260.1); - --color-surface-default-utility-negative: oklch(58.87% 0.184 29.83); - --color-surface-default-utility-warning: oklch(57.3% 0.12 74.7); - --color-surface-default-utility-positive: oklch(55.09% 0.151 143.2); - --color-surface-default-brand-accent: oklch(79.17% 0.121 16.33); - --color-surface-inverse-utility-info: oklch(61.97% 0.194 258.88); - --color-surface-inverse-utility-negative: oklch(69.63% 0.149 28.39); - --color-surface-inverse-utility-warning: oklch(79.77% 0.155 89.66); - --color-surface-inverse-utility-positive: oklch(70.5% 0.146 138.3); - --border-color-default-utility-info: oklch(61.97% 0.194 258.88); - --border-color-default-utility-negative: oklch(69.63% 0.149 28.39); - --border-color-default-utility-warning: oklch(79.77% 0.155 89.66); - --border-color-default-utility-positive: oklch(70.5% 0.146 138.3); - --border-color-inverse-brandaccent: oklch(62.78% 0.234 25.05); - --color-content-default-utility-warning: var(--color-community-yellow-500); + /* Compatibility aliases */ + --measures-radius-none: var(--radius-measures-radius-none); + --measures-radius-xsmall: var(--radius-measures-radius-xsmall); + --measures-radius-small: var(--radius-measures-radius-small); + --measures-radius-medium: var(--radius-measures-radius-medium); + --measures-radius-large: var(--radius-measures-radius-large); + --measures-radius-xlarge: var(--radius-measures-radius-xlarge); + --measures-radius-full: var(--radius-measures-radius-full); + --measures-stroke-small: var(--border-measures-stroke-small); + --measures-stroke-medium: var(--border-measures-stroke-medium); + --measures-stroke-large: var(--border-measures-stroke-large); + --measures-sizing-008: var(--spacing-measures-sizing-008); + --measures-sizing-010: var(--spacing-measures-sizing-010); + --measures-sizing-012: var(--spacing-measures-sizing-012); + --measures-sizing-016: var(--spacing-measures-sizing-016); + --measures-sizing-020: var(--spacing-measures-sizing-020); + --measures-sizing-024: var(--spacing-measures-sizing-024); + --measures-sizing-032: var(--spacing-measures-sizing-032); + --measures-sizing-040: var(--spacing-measures-sizing-040); + --measures-sizing-048: var(--spacing-measures-sizing-048); + --measures-sizing-056: var(--spacing-measures-sizing-056); + --measures-sizing-060: var(--spacing-measures-sizing-060); + --measures-sizing-064: var(--spacing-measures-sizing-064); + --measures-sizing-076: var(--spacing-measures-sizing-076); + --measures-sizing-096: var(--spacing-measures-sizing-096); + --measures-sizing-120: var(--spacing-measures-sizing-120); + --measures-spacing-000: var(--spacing-measures-spacing-000); + --measures-spacing-001: var(--spacing-measures-spacing-001); + --measures-spacing-002: var(--spacing-measures-spacing-002); + --measures-spacing-004: var(--spacing-measures-spacing-004); + --measures-spacing-006: var(--spacing-measures-spacing-006); + --measures-spacing-008: var(--spacing-measures-spacing-008); + --measures-spacing-010: var(--spacing-measures-spacing-010); + --measures-spacing-012: var(--spacing-measures-spacing-012); + --measures-spacing-016: var(--spacing-measures-spacing-016); + --measures-spacing-020: var(--spacing-measures-spacing-020); + --measures-spacing-024: var(--spacing-measures-spacing-024); + --measures-spacing-032: var(--spacing-measures-spacing-032); + --measures-spacing-040: var(--spacing-measures-spacing-040); + --measures-spacing-048: var(--spacing-measures-spacing-048); + --measures-spacing-056: var(--spacing-measures-spacing-056); + --measures-spacing-060: var(--spacing-measures-spacing-060); + --measures-spacing-064: var(--spacing-measures-spacing-064); + --measures-spacing-076: var(--spacing-measures-spacing-076); + --measures-spacing-096: var(--spacing-measures-spacing-096); + --measures-spacing-120: var(--spacing-measures-spacing-120); + --measures-spacing-160: var(--spacing-measures-spacing-160); + --measures-spacing-260: var(--spacing-measures-spacing-260); + + /* Grays & alpha */ + --color-gray-000: #ffffff; + --color-gray-050: #f6f6f6; + --color-gray-100: #e5e5e5; + --color-gray-200: #d2d2d2; + --color-gray-300: #b4b4b4; + --color-gray-400: #8f8f8f; + --color-gray-500: #666666; + --color-gray-600: #464646; + --color-gray-700: #2d2d2d; + --color-gray-800: #1f1f1f; + --color-gray-900: #141414; + --color-gray-1000: #000000; + + --color-opacity-000: #00000000; + --color-opacity-001: #00000003; + --color-opacity-050: #0000000d; + --color-opacity-100: #0000001a; + --color-opacity-200: #00000033; + --color-opacity-300: #0000004d; + --color-opacity-400: #00000066; + --color-opacity-500: #00000080; + --color-opacity-600: #00000099; + --color-opacity-700: #000000b2; + --color-opacity-800: #000000cc; + --color-opacity-900: #000000e5; + + /* Kiwi */ + --color-kiwi-kiwi0: #ebfff2; + --color-kiwi-kiwi50: #c9fedf; + --color-kiwi-kiwi100: #a8fdcd; + --color-kiwi-kiwi150: #8cf9bd; + --color-kiwi-kiwi200: #6ff6ae; + --color-kiwi-kiwi300: #45ea97; + --color-kiwi-kiwi400: #29d984; + --color-kiwi-kiwi500: #16c472; + --color-kiwi-kiwi600: #0ba960; + --color-kiwi-kiwi700: #058c4e; + --color-kiwi-kiwi800: #016c3c; + --color-kiwi-kiwi900: #004d2b; + --color-kiwi-kiwi1000: #00331c; + + /* Lavender */ + --color-lavender-lavender0: #f0ebff; + --color-lavender-lavender50: #e8defe; + --color-lavender-lavender100: #e0d1fd; + --color-lavender-lavender150: #d7c3f9; + --color-lavender-lavender200: #ceb5f6; + --color-lavender-lavender300: #bb97ea; + --color-lavender-lavender400: #a578d9; + --color-lavender-lavender500: #8d5ac4; + --color-lavender-lavender600: #743ea9; + --color-lavender-lavender700: #5a278c; + --color-lavender-lavender800: #41146c; + --color-lavender-lavender900: #2b074d; + --color-lavender-lavender1000: #1a0033; + + /* Lime */ + --color-lime-lime0: #fbffeb; + --color-lime-lime50: #f2fec9; + --color-lime-lime100: #e7fda8; + --color-lime-lime150: #daf98c; + --color-lime-lime200: #ccf66f; + --color-lime-lime300: #b1ea45; + --color-lime-lime400: #98d929; + --color-lime-lime500: #80c416; + --color-lime-lime600: #6aa90b; + --color-lime-lime700: #548c05; + --color-lime-lime800: #406c01; + --color-lime-lime900: #2d4d00; + --color-lime-lime1000: #1e3300; + + /* Magenta */ + --color-magenta-magenta0: #ffebf0; + --color-magenta-magenta50: #fedee7; + --color-magenta-magenta100: #fdd1dd; + --color-magenta-magenta150: #f9c3d2; + --color-magenta-magenta200: #f6b5c7; + --color-magenta-magenta300: #ea97ad; + --color-magenta-magenta400: #d97892; + --color-magenta-magenta500: #c45a76; + --color-magenta-magenta600: #a93e5b; + --color-magenta-magenta700: #8c2742; + --color-magenta-magenta800: #6c142b; + --color-magenta-magenta900: #4d071a; + --color-magenta-magenta1000: #33000e; + + /* Red */ + --color-red-red0: #ffebf1; + --color-red-red50: #fec9d6; + --color-red-red100: #fda8b7; + --color-red-red150: #f98c98; + --color-red-red200: #f66f78; + --color-red-red300: #ea4845; + --color-red-red400: #d93529; + --color-red-red500: #c42916; + --color-red-red600: #a9200b; + --color-red-red700: #8c1905; + --color-red-red800: #6c1301; + --color-red-red900: #4d0d00; + --color-red-red1000: #330800; + + /* Royal Blue */ + --color-royal-blue-royal-blue0: #ebecff; + --color-royal-blue-royal-blue50: #c9cdfe; + --color-royal-blue-royal-blue100: #a8adfd; + --color-royal-blue-royal-blue150: #8c91f9; + --color-royal-blue-royal-blue200: #6f74f6; + --color-royal-blue-royal-blue300: #4548ea; + --color-royal-blue-royal-blue400: #2b29d9; + --color-royal-blue-royal-blue500: #1c16c4; + --color-royal-blue-royal-blue600: #140ba9; + --color-royal-blue-royal-blue700: #0f058c; + --color-royal-blue-royal-blue800: #0c016c; + --color-royal-blue-royal-blue900: #0a004d; + --color-royal-blue-royal-blue1000: #080033; + + /* Rust */ + --color-rust-rust0: #ffedeb; + --color-rust-rust50: #fed8d4; + --color-rust-rust100: #fdc4bd; + --color-rust-rust150: #f9b0a6; + --color-rust-rust200: #f69c8f; + --color-rust-rust300: #ea7a65; + --color-rust-rust400: #d96043; + --color-rust-rust500: #c44e29; + --color-rust-rust600: #a94417; + --color-rust-rust700: #8c3d0b; + --color-rust-rust800: #6c3604; + --color-rust-rust900: #4d2c01; + --color-rust-rust1000: #332100; + + /* Teal */ + --color-teal-teal0: #ebfffc; + --color-teal-teal50: #c9fef9; + --color-teal-teal100: #a8fdf8; + --color-teal-teal150: #8cf9f8; + --color-teal-teal200: #6ff2f6; + --color-teal-teal300: #45dcea; + --color-teal-teal400: #29c3d9; + --color-teal-teal500: #16a9c4; + --color-teal-teal600: #0b8ea9; + --color-teal-teal700: #05728c; + --color-teal-teal800: #01576c; + --color-teal-teal900: #003e4d; + --color-teal-teal1000: #002933; + + /* Yellow */ + --color-yellow-yellow0: #fffeeb; + --color-yellow-yellow50: #fefcc9; + --color-yellow-yellow100: #fdfaa8; + --color-yellow-yellow150: #f9f58c; + --color-yellow-yellow200: #f6f06f; + --color-yellow-yellow300: #eae345; + --color-yellow-yellow400: #d9d129; + --color-yellow-yellow500: #c4bb16; + --color-yellow-yellow600: #a9a20b; + --color-yellow-yellow700: #8c8505; + --color-yellow-yellow800: #6c6701; + --color-yellow-yellow900: #4d4a00; + --color-yellow-yellow1000: #333000; + + /* Border */ + --color-border-default-brand-accent: var(--color-yellow-yellow300); + --color-border-default-brand-primary: var(--color-yellow-yellow100); + --color-border-default-brand-secondary: var(--color-rust-rust100); + --color-border-default-primary: var(--color-gray-900); + --color-border-default-secondary: var(--color-gray-800); + --color-border-default-tertiary: var(--color-gray-600); + --color-border-default-utility-info: var(--color-royal-blue-royal-blue300); + --color-border-default-utility-negative: var(--color-red-red300); + --color-border-default-utility-positive: var(--color-kiwi-kiwi300); + --color-border-default-utility-warning: var(--color-yellow-yellow300); + + --color-border-inverse-brand-accent: var(--color-yellow-yellow50); + --color-border-inverse-brand-primary: var(--color-yellow-yellow800); + --color-border-inverse-brand-secondary: var(--color-rust-rust800); + --color-border-inverse-primary: var(--color-gray-000); + --color-border-inverse-secondary: var(--color-opacity-200); + --color-border-inverse-tertiary: var(--color-opacity-300); + --color-border-inverse-utility-info: var(--color-royal-blue-royal-blue300); + --color-border-inverse-utility-negative: var(--color-red-red300); + --color-border-inverse-utility-positive: var(--color-kiwi-kiwi400); + --color-border-inverse-utility-warning: var(--color-yellow-yellow400); + + /* Content */ + --color-content-brand-darker-accent-2: var(--color-yellow-yellow200); + --color-content-brand-kiwi: var(--color-kiwi-kiwi600); + --color-content-brand-lavender: var(--color-lavender-lavender500); + --color-content-brand-lighter-accent-2: var(--color-yellow-yellow100); + --color-content-brand-lime: var(--color-lime-lime500); + --color-content-brand-primary: var(--color-yellow-yellow50); + --color-content-brand-red: var(--color-red-red400); + --color-content-brand-royal: var(--color-royal-blue-royal-blue400); + --color-content-brand-rust: var(--color-rust-rust400); + --color-content-brand-teal: var(--color-teal-teal500); + + --color-content-default-brand-accent: var(--color-opacity-700); + --color-content-default-brand-primary: var(--color-yellow-yellow100); + --color-content-default-brand-secondary: var(--color-rust-rust400); --color-content-default-primary: var(--color-gray-000); --color-content-default-secondary: var(--color-gray-200); --color-content-default-tertiary: var(--color-gray-300); - --color-content-default-brand-primary: var(--color-community-yellow-100); - --color-content-default-brand-secondary: var(--color-community-orange-400); - --color-content-default-brand-accent: var(--color-yellow-opacity-700); + --color-content-default-utility-info: var(--color-royal-blue-royal-blue500); + --color-content-default-utility-negative: var(--color-red-red400); + --color-content-default-utility-positive: var(--color-lime-lime400); + --color-content-default-utility-warning: var(--color-yellow-yellow500); + + --color-content-inverse-brand-accent: var(--color-yellow-yellow700); + --color-content-inverse-brand-primary: var(--color-yellow-yellow900); + --color-content-inverse-brand-secondary: var(--color-rust-rust800); --color-content-inverse-primary: var(--color-gray-1000); --color-content-inverse-secondary: var(--color-gray-800); --color-content-inverse-tertiary: var(--color-gray-700); - --color-content-inverse-brand-primary: var(--color-community-yellow-900); - --color-content-inverse-brand-secondary: var(--color-community-orange-300); - --color-content-inverse-brand-accent: var(--color-yellow-opacity-400); - --color-surface-default-brand-primary: var(--color-community-yellow-100); - --color-surface-default-brand-secondary: var(--color-community-yellow-900); + --color-content-inverse-utility-info: var(--color-royal-blue-royal-blue300); + --color-content-inverse-utility-negative: var(--color-red-red300); + --color-content-inverse-utility-positive: var(--color-kiwi-kiwi300); + --color-content-inverse-utility-warning: var(--color-yellow-yellow300); + + /* Surface */ + --color-surface-default-brand-red: var(--color-red-red100); + --color-surface-default-brand-darker-accent: var(--color-yellow-yellow200); + --color-surface-default-brand-kiwi: var(--color-kiwi-kiwi200); + --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-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); + --color-surface-default-primary: var(--color-gray-1000); --color-surface-default-secondary: var(--color-gray-900); - --color-surface-inverse-primary: var(--color-gray-000); + --color-surface-default-semi-opaque: var(--color-opacity-050); --color-surface-default-tertiary: var(--color-gray-800); + --color-surface-default-transparent: var(--color-opacity-000); + + --color-surface-default-utility-info: var(--color-royal-blue-royal-blue400); + --color-surface-default-utility-negative: var(--color-red-red400); + --color-surface-default-utility-positive: var(--color-kiwi-kiwi500); + --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-secondary: var(--color-rust-rust300); + --color-surface-inverse-primary: var(--color-gray-000); --color-surface-inverse-secondary: var(--color-gray-100); --color-surface-inverse-tertiary: var(--color-gray-200); - --color-surface-inverse-brand-primary: var(--color-community-yellow-100); - --color-surface-inverse-brand-secondary: var(--color-community-orange-300); - --color-surface-inverse-brand-accent: var(--color-yellow-opacity-100); - --border-color-default-primary: var(--color-gray-900); - --border-color-inverse-utility-info: var(--color-community-blue-300); - --border-color-inverse-primary: var(--color-gray-000); - --border-color-default-secondary: var(--color-gray-800); - --border-color-inverse-secondary: var(--color-opacity-200); - --border-color-inverse-tertiary: var(--color-opacity-300); - --border-color-default-tertiary: var(--color-gray-600); - --border-color-inverse-utility-negative: var(--color-community-red-300); - --border-color-default-brandprimary: var(--color-community-yellow-100); - --border-color-inverse-utility-warning: var(--color-community-yellow-400); - --border-color-inverse-utility-positive: var(--color-community-kiwi-400); - --border-color-default-brandsecondary: var(--color-community-orange-400); - --border-color-default-brandaccent: var(--color-yellow-opacity-300); - --border-color-inverse-brandprimary: var(--color-community-yellow-800); - --border-color-inverse-brandsecondary: var(--color-community-orange-300); - --color-surface-default-transparent: var(--color-opacity-000); + --color-surface-inverse-utility-info: var(--color-royal-blue-royal-blue300); + --color-surface-inverse-utility-negative: var(--color-red-red300); + --color-surface-inverse-utility-positive: var(--color-kiwi-kiwi300); + --color-surface-inverse-utility-warning: var(--color-yellow-yellow300); + + /* Color */ + --color-config-europe-morning-magenta: oklch(66.27% 0.264 321.73); + /* white */ + --bg-color-light-primary: oklch(100% 0 263.28); + + /* Shadow */ + --shadow-focus-default: 0px 0px 10px 1px oklch(98.01% 0.065 105.71); + --shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%); + --shadow-minimal-shadow: 0px 0px 8px 0px oklch(0% 0 0 / 15%); + --shadow-focus-inverse: 0px 0px 10px 1px oklch(23.93% 0 263.28); + --shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%); + /* Use this shadow most of the time */ + --shadow-shallow-below: 0px 4px 16px 0px oklch(0% 0 0 / 12%); + --shadow-default: 0px 4px 6px 0px oklch(0% 0 0 / 9%); + + /* Typography */ + --text-xx-large-display: 96px; + --text-xx-large-display--line-height: 110%; + --text-xx-large-display--letter-spacing: 0px; + --text-xx-large-display--font-weight: 400; + + --text-xx-large-heading: 40px; + --text-xx-large-heading--line-height: 52px; + --text-xx-large-heading--letter-spacing: 0px; + --text-xx-large-heading--font-weight: 700; + + --text-x-large-heading: 36px; + --text-x-large-heading--line-height: 44px; + --text-x-large-heading--letter-spacing: 0px; + --text-x-large-heading--font-weight: 800; + + --text-large-heading: 32px; + --text-large-heading--line-height: 40px; + --text-large-heading--letter-spacing: 0px; + --text-large-heading--font-weight: 700; + + --text-medium-heading: 28px; + --text-medium-heading--line-height: 36px; + --text-medium-heading--letter-spacing: 0px; + --text-medium-heading--font-weight: 700; + + --text-small-heading: 24px; + --text-small-heading--line-height: 32px; + --text-small-heading--letter-spacing: 0px; + --text-small-heading--font-weight: 700; + + --text-x-small-heading: 20px; + --text-x-small-heading--line-height: 28px; + --text-x-small-heading--letter-spacing: 0px; + --text-x-small-heading--font-weight: 700; + + --text-large-label: 18px; + --text-large-label--line-height: 24px; + --text-large-label--letter-spacing: 0px; + --text-large-label--font-weight: 500; + + --text-medium-label: 16px; + --text-medium-label--line-height: 20px; + --text-medium-label--letter-spacing: 0px; + --text-medium-label--font-weight: 500; + + --text-small-label: 14px; + --text-small-label--line-height: 16px; + --text-small-label--letter-spacing: 0px; + --text-small-label--font-weight: 500; + + /* Regular 400 */ + --text-large-paragraph: 18px; + --text-large-paragraph--line-height: 130%; + --text-large-paragraph--letter-spacing: 0px; + --text-large-paragraph--font-weight: 400; + + --text-medium-paragraph: 16px; + --text-medium-paragraph--line-height: 24px; + --text-medium-paragraph--letter-spacing: 0px; + --text-medium-paragraph--font-weight: 400; + + --text-small-paragraph: 14px; + --text-small-paragraph--line-height: 20px; + --text-small-paragraph--letter-spacing: 0px; + --text-small-paragraph--font-weight: 400; + + --text-x-small-paragraph: 12px; + --text-x-small-paragraph--line-height: 16px; + --text-x-small-paragraph--letter-spacing: 0px; + --text-x-small-paragraph--font-weight: 400; + + --text-xx-small-label: 10px; + --text-xx-small-label--line-height: 12px; + --text-xx-small-label--letter-spacing: 0px; + --text-xx-small-label--font-weight: 500; + + --text-xx-small-paragraph: 10px; + --text-xx-small-paragraph--line-height: 14px; + --text-xx-small-paragraph--letter-spacing: 0px; + --text-xx-small-paragraph--font-weight: 400; + + --text-xx-small-italic: 10px; + --text-xx-small-italic--line-height: 14px; + --text-xx-small-italic--letter-spacing: 0px; + --text-xx-small-italic--font-weight: 400; + + --text-x-large-label: 24px; + --text-x-large-label--line-height: 28px; + --text-x-large-label--letter-spacing: 0px; + --text-x-large-label--font-weight: 400; + + --text-x-large-paragraph: 24px; + --text-x-large-paragraph--line-height: 32px; + --text-x-large-paragraph--letter-spacing: 0px; + --text-x-large-paragraph--font-weight: 400; + + --text-xx-large-paragraph: 32px; + --text-xx-large-paragraph--line-height: 40px; + --text-xx-large-paragraph--letter-spacing: 0px; + --text-xx-large-paragraph--font-weight: 400; + + --text-xx-large-label: 32px; + --text-xx-large-label--line-height: 36px; + --text-xx-large-label--letter-spacing: 0px; + --text-xx-large-label--font-weight: 400; + + --text-x-small-underline: 12px; + --text-x-small-underline--line-height: 14px; + --text-x-small-underline--letter-spacing: 0px; + --text-x-small-underline--font-weight: 400; + + --text-small-underline: 14px; + --text-small-underline--line-height: 16px; + --text-small-underline--letter-spacing: 0px; + --text-small-underline--font-weight: 400; + + --text-medium-underline: 16px; + --text-medium-underline--line-height: 20px; + --text-medium-underline--letter-spacing: 0px; + --text-medium-underline--font-weight: 400; + + --text-large-underline: 18px; + --text-large-underline--line-height: 24px; + --text-large-underline--letter-spacing: 0px; + --text-large-underline--font-weight: 400; + + --text-x-large-underline: 24px; + --text-x-large-underline--line-height: 28px; + --text-x-large-underline--letter-spacing: 0px; + --text-x-large-underline--font-weight: 400; + + --text-x-small-label: 12px; + --text-x-small-label--line-height: 14px; + --text-x-small-label--letter-spacing: 0px; + --text-x-small-label--font-weight: 500; + + --text-x-small-label-caps: 10px; + --text-x-small-label-caps--line-height: 12px; + --text-x-small-label-caps--letter-spacing: 0px; + --text-x-small-label-caps--font-weight: 500; + + --text-xx-small-heading: 16px; + --text-xx-small-heading--line-height: 22px; + --text-xx-small-heading--letter-spacing: 0px; + --text-xx-small-heading--font-weight: 700; + + --text-x-small-display: 24px; + --text-x-small-display--line-height: 24px; + --text-x-small-display--letter-spacing: 0px; + --text-x-small-display--font-weight: 400; + + --text-x-large-uppercase: 24px; + --text-x-large-uppercase--line-height: 120%; + --text-x-large-uppercase--letter-spacing: 0.48px; + --text-x-large-uppercase--font-weight: 400; + + --text-xx-large-uppercase: 32px; + --text-xx-large-uppercase--line-height: 120%; + --text-xx-large-uppercase--letter-spacing: 0.64px; + --text-xx-large-uppercase--font-weight: 400; + + --text-x-large-display: 64px; + --text-x-large-display--line-height: 110%; + --text-x-large-display--letter-spacing: 0px; + --text-x-large-display--font-weight: 400; + + --text-large-display: 52px; + --text-large-display--line-height: 110%; + --text-large-display--letter-spacing: 0px; + --text-large-display--font-weight: 400; + + --text-medium-display: 44px; + --text-medium-display--line-height: 110%; + --text-medium-display--letter-spacing: 0px; + --text-medium-display--font-weight: 400; + + --text-xx-small-display: 18px; + --text-xx-small-display--line-height: 120%; + --text-xx-small-display--letter-spacing: 0px; + --text-xx-small-display--font-weight: 400; + + --text-x-small-uppercase: 12px; + --text-x-small-uppercase--line-height: 120%; + --text-x-small-uppercase--letter-spacing: 0.24px; + --text-x-small-uppercase--font-weight: 400; + + --text-large-uppercase: 18px; + --text-large-uppercase--line-height: 120%; + --text-large-uppercase--letter-spacing: 0.36px; + --text-large-uppercase--font-weight: 400; + + --text-small-display: 36px; + --text-small-display--line-height: 110%; + --text-small-display--letter-spacing: 0px; + --text-small-display--font-weight: 400; +} + +@layer utilities { + .text-x-small-heading { + font-size: var(--text-x-small-heading); + line-height: var(--text-x-small-heading--line-height); + font-weight: var(--text-x-small-heading--font-weight); + letter-spacing: var(--text-x-small-heading--letter-spacing); + } + .text-x-small-paragraph { + font-size: var(--text-x-small-paragraph); + line-height: var(--text-x-small-paragraph--line-height); + font-weight: var(--text-x-small-paragraph--font-weight); + letter-spacing: var(--text-x-small-paragraph--letter-spacing); + } +} + +@layer components { + .xx-large-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-xx-large-display); + font-weight: var(--text-xx-large-display--font-weight); + line-height: var(--text-xx-large-display--line-height); + letter-spacing: var(--text-xx-large-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-large-heading { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-xx-large-heading); + font-weight: var(--text-xx-large-heading--font-weight); + line-height: var(--text-xx-large-heading--line-height); + letter-spacing: var(--text-xx-large-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-large-heading { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-x-large-heading); + font-weight: var(--text-x-large-heading--font-weight); + line-height: var(--text-x-large-heading--line-height); + letter-spacing: var(--text-x-large-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .large-heading { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-large-heading); + font-weight: var(--text-large-heading--font-weight); + line-height: var(--text-large-heading--line-height); + letter-spacing: var(--text-large-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .medium-heading { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-medium-heading); + font-weight: var(--text-medium-heading--font-weight); + line-height: var(--text-medium-heading--line-height); + letter-spacing: var(--text-medium-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .small-heading { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-small-heading); + font-weight: var(--text-small-heading--font-weight); + line-height: var(--text-small-heading--line-height); + letter-spacing: var(--text-small-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-heading { + font-family: var(--font-space-grotesk); + font-size: var(--text-x-small-heading); + font-weight: var(--text-x-small-heading--font-weight); + line-height: var(--text-x-small-heading--line-height); + letter-spacing: var(--text-x-small-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .large-label { + font-family: var(--font-inter); + font-size: var(--text-large-label); + font-weight: var(--text-large-label--font-weight); + line-height: var(--text-large-label--line-height); + letter-spacing: var(--text-large-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .medium-label { + font-family: var(--font-inter); + font-size: var(--text-medium-label); + font-weight: var(--text-medium-label--font-weight); + line-height: var(--text-medium-label--line-height); + letter-spacing: var(--text-medium-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .small-label { + font-family: var(--font-inter); + font-size: var(--text-small-label); + font-weight: var(--text-small-label--font-weight); + line-height: var(--text-small-label--line-height); + letter-spacing: var(--text-small-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + /* Regular 400 */ + .large-paragraph { + font-family: var(--font-inter); + font-size: var(--text-large-paragraph); + font-weight: var(--text-large-paragraph--font-weight); + line-height: var(--text-large-paragraph--line-height); + letter-spacing: var(--text-large-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .medium-paragraph { + font-family: var(--font-inter); + font-size: var(--text-medium-paragraph); + font-weight: var(--text-medium-paragraph--font-weight); + line-height: var(--text-medium-paragraph--line-height); + letter-spacing: var(--text-medium-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .small-paragraph { + font-family: var(--font-inter); + font-size: var(--text-small-paragraph); + font-weight: var(--text-small-paragraph--font-weight); + line-height: var(--text-small-paragraph--line-height); + letter-spacing: var(--text-small-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-paragraph { + font-family: var(--font-inter); + font-size: var(--text-x-small-paragraph); + font-weight: var(--text-x-small-paragraph--font-weight); + line-height: var(--text-x-small-paragraph--line-height); + letter-spacing: var(--text-x-small-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-small-label { + font-family: var(--font-inter); + font-size: var(--text-xx-small-label); + font-weight: var(--text-xx-small-label--font-weight); + line-height: var(--text-xx-small-label--line-height); + letter-spacing: var(--text-xx-small-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-small-paragraph { + font-family: var(--font-inter); + font-size: var(--text-xx-small-paragraph); + font-weight: var(--text-xx-small-paragraph--font-weight); + line-height: var(--text-xx-small-paragraph--line-height); + letter-spacing: var(--text-xx-small-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-small-italic { + font-family: var(--font-inter); + font-size: var(--text-xx-small-italic); + font-weight: var(--text-xx-small-italic--font-weight); + line-height: var(--text-xx-small-italic--line-height); + letter-spacing: var(--text-xx-small-italic--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-large-label { + font-family: var(--font-inter); + font-size: var(--text-x-large-label); + font-weight: var(--text-x-large-label--font-weight); + line-height: var(--text-x-large-label--line-height); + letter-spacing: var(--text-x-large-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-large-paragraph { + font-family: var(--font-inter); + font-size: var(--text-x-large-paragraph); + font-weight: var(--text-x-large-paragraph--font-weight); + line-height: var(--text-x-large-paragraph--line-height); + letter-spacing: var(--text-x-large-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-large-paragraph { + font-family: var(--font-inter); + font-size: var(--text-xx-large-paragraph); + font-weight: var(--text-xx-large-paragraph--font-weight); + line-height: var(--text-xx-large-paragraph--line-height); + letter-spacing: var(--text-xx-large-paragraph--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-large-label { + font-family: var(--font-inter); + font-size: var(--text-xx-large-label); + font-weight: var(--text-xx-large-label--font-weight); + line-height: var(--text-xx-large-label--line-height); + letter-spacing: var(--text-xx-large-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-underline { + font-family: var(--font-inter); + font-size: var(--text-x-small-underline); + font-weight: var(--text-x-small-underline--font-weight); + line-height: var(--text-x-small-underline--line-height); + letter-spacing: var(--text-x-small-underline--letter-spacing); + text-decoration: underline; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .small-underline { + font-family: var(--font-inter); + font-size: var(--text-small-underline); + font-weight: var(--text-small-underline--font-weight); + line-height: var(--text-small-underline--line-height); + letter-spacing: var(--text-small-underline--letter-spacing); + text-decoration: underline; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .medium-underline { + font-family: var(--font-inter); + font-size: var(--text-medium-underline); + font-weight: var(--text-medium-underline--font-weight); + line-height: var(--text-medium-underline--line-height); + letter-spacing: var(--text-medium-underline--letter-spacing); + text-decoration: underline; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .large-underline { + font-family: var(--font-inter); + font-size: var(--text-large-underline); + font-weight: var(--text-large-underline--font-weight); + line-height: var(--text-large-underline--line-height); + letter-spacing: var(--text-large-underline--letter-spacing); + text-decoration: underline; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-large-underline { + font-family: var(--font-inter); + font-size: var(--text-x-large-underline); + font-weight: var(--text-x-large-underline--font-weight); + line-height: var(--text-x-large-underline--line-height); + letter-spacing: var(--text-x-large-underline--letter-spacing); + text-decoration: underline; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-label { + font-family: var(--font-inter); + font-size: var(--text-x-small-label); + font-weight: var(--text-x-small-label--font-weight); + line-height: var(--text-x-small-label--line-height); + letter-spacing: var(--text-x-small-label--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-label-caps { + font-family: var(--font-inter); + font-size: var(--text-x-small-label-caps); + font-weight: var(--text-x-small-label-caps--font-weight); + line-height: var(--text-x-small-label-caps--line-height); + letter-spacing: var(--text-x-small-label-caps--letter-spacing); + text-decoration: none; + text-transform: uppercase; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-small-heading { + font-family: var(--font-inter); + font-size: var(--text-xx-small-heading); + font-weight: var(--text-xx-small-heading--font-weight); + line-height: var(--text-xx-small-heading--line-height); + letter-spacing: var(--text-xx-small-heading--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-x-small-display); + font-weight: var(--text-x-small-display--font-weight); + line-height: var(--text-x-small-display--line-height); + letter-spacing: var(--text-x-small-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-large-uppercase { + font-family: var(--font-inter); + font-size: var(--text-x-large-uppercase); + font-weight: var(--text-x-large-uppercase--font-weight); + line-height: var(--text-x-large-uppercase--line-height); + letter-spacing: var(--text-x-large-uppercase--letter-spacing); + text-decoration: none; + text-transform: uppercase; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-large-uppercase { + font-family: var(--font-inter); + font-size: var(--text-xx-large-uppercase); + font-weight: var(--text-xx-large-uppercase--font-weight); + line-height: var(--text-xx-large-uppercase--line-height); + letter-spacing: var(--text-xx-large-uppercase--letter-spacing); + text-decoration: none; + text-transform: uppercase; + text-indent: 0px; + margin-bottom: 0px; + } + .x-large-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-x-large-display); + font-weight: var(--text-x-large-display--font-weight); + line-height: var(--text-x-large-display--line-height); + letter-spacing: var(--text-x-large-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .large-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-large-display); + font-weight: var(--text-large-display--font-weight); + line-height: var(--text-large-display--line-height); + letter-spacing: var(--text-large-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .medium-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-medium-display); + font-weight: var(--text-medium-display--font-weight); + line-height: var(--text-medium-display--line-height); + letter-spacing: var(--text-medium-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .xx-small-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-xx-small-display); + font-weight: var(--text-xx-small-display--font-weight); + line-height: var(--text-xx-small-display--line-height); + letter-spacing: var(--text-xx-small-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } + .x-small-uppercase { + font-family: var(--font-inter); + font-size: var(--text-x-small-uppercase); + font-weight: var(--text-x-small-uppercase--font-weight); + line-height: var(--text-x-small-uppercase--line-height); + letter-spacing: var(--text-x-small-uppercase--letter-spacing); + text-decoration: none; + text-transform: uppercase; + text-indent: 0px; + margin-bottom: 0px; + } + .large-uppercase { + font-family: var(--font-inter); + font-size: var(--text-large-uppercase); + font-weight: var(--text-large-uppercase--font-weight); + line-height: var(--text-large-uppercase--line-height); + letter-spacing: var(--text-large-uppercase--letter-spacing); + text-decoration: none; + text-transform: uppercase; + text-indent: 0px; + margin-bottom: 0px; + } + .small-display { + font-family: var(--font-bricolage-grotesque); + font-size: var(--text-small-display); + font-weight: var(--text-small-display--font-weight); + line-height: var(--text-small-display--line-height); + letter-spacing: var(--text-small-display--letter-spacing); + text-decoration: none; + text-transform: none; + text-indent: 0px; + margin-bottom: 0px; + } } From 6f5279cf7df18e2bb447c321b445c5cc1f04d8a7 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Fri, 22 Aug 2025 16:43:57 -0600 Subject: [PATCH 04/10] Update NumberedCards.js --- app/components/NumberedCards.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/app/components/NumberedCards.js b/app/components/NumberedCards.js index e7a09fc..dcf6b45 100644 --- a/app/components/NumberedCards.js +++ b/app/components/NumberedCards.js @@ -33,7 +33,14 @@ const NumberedCards = ({ title, subtitle, cards }) => { + How
+ CommunityRule +
+ helps + + } />
From 8113658d8b4b1c42e16b8369e64eeccf43d509a2 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Fri, 22 Aug 2025 16:51:22 -0600 Subject: [PATCH 05/10] Fix Section Header --- app/components/NumberedCards.js | 11 ++--------- app/components/SectionHeader.js | 10 +++++----- 2 files changed, 7 insertions(+), 14 deletions(-) diff --git a/app/components/NumberedCards.js b/app/components/NumberedCards.js index dcf6b45..ac196d7 100644 --- a/app/components/NumberedCards.js +++ b/app/components/NumberedCards.js @@ -26,21 +26,14 @@ const NumberedCards = ({ title, subtitle, cards }) => { dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }} />
-
+
{/* Section Header */}
- How
- CommunityRule -
- helps - - } + titleLg="How CommunityRule helps" />
diff --git a/app/components/SectionHeader.js b/app/components/SectionHeader.js index f32d2ee..7345db5 100644 --- a/app/components/SectionHeader.js +++ b/app/components/SectionHeader.js @@ -8,8 +8,8 @@ const SectionHeader = ({ title, subtitle, titleLg, variant = "default" }) => {

{title} @@ -18,12 +18,12 @@ const SectionHeader = ({ title, subtitle, titleLg, variant = "default" }) => {

{/* Subtitle Container */} -
+

{subtitle} From eb1bfcfe8d2a879ec61bd272c0d989ae676d82ad Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Fri, 22 Aug 2025 17:00:28 -0600 Subject: [PATCH 06/10] Update tailwind.css --- app/tailwind.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/tailwind.css b/app/tailwind.css index 2942914..a05ba7e 100644 --- a/app/tailwind.css +++ b/app/tailwind.css @@ -344,7 +344,7 @@ --color-content-brand-teal: var(--color-teal-teal500); --color-content-default-brand-accent: var(--color-opacity-700); - --color-content-default-brand-primary: var(--color-yellow-yellow100); + --color-content-default-brand-primary: var(--color-yellow-yellow50); --color-content-default-brand-secondary: var(--color-rust-rust400); --color-content-default-primary: var(--color-gray-000); --color-content-default-secondary: var(--color-gray-200); From a8efb34d63f1c93d9fed70905aaef962cb667213 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Fri, 22 Aug 2025 17:01:05 -0600 Subject: [PATCH 07/10] Update SectionNumber.js --- app/components/SectionNumber.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/SectionNumber.js b/app/components/SectionNumber.js index cee6814..14d5f4d 100644 --- a/app/components/SectionNumber.js +++ b/app/components/SectionNumber.js @@ -15,14 +15,14 @@ const SectionNumber = ({ number }) => { }; return ( -

+
{`Section
- + {number}
From d428bf0c0938ee4342698db5e5356c117905db98 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Sat, 23 Aug 2025 16:38:37 -0600 Subject: [PATCH 08/10] Brand color changes --- app/components/HeaderTab.js | 2 +- app/components/HeroBanner.js | 2 +- app/tailwind.css | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/HeaderTab.js b/app/components/HeaderTab.js index 6e1e18a..0756504 100644 --- a/app/components/HeaderTab.js +++ b/app/components/HeaderTab.js @@ -10,7 +10,7 @@ export default function HeaderTab({ return (
{children} diff --git a/app/components/HeroBanner.js b/app/components/HeroBanner.js index e68f3c7..af595c9 100644 --- a/app/components/HeroBanner.js +++ b/app/components/HeroBanner.js @@ -8,7 +8,7 @@ const HeroBanner = ({ title, subtitle, description, ctaText, ctaHref }) => {
{/* Frame container for content */} -
+
{/* DECORATIONS (behind content) */} +
Hero illustration { return ( diff --git a/app/tailwind.css b/app/tailwind.css index df97465..90f379a 100644 --- a/app/tailwind.css +++ b/app/tailwind.css @@ -4,6 +4,7 @@ @source "../stories/**/*"; @source "../app/**/*"; @source "../.storybook/**/*"; +@source "./**/*"; @theme inline { /* Custom breakpoints */ @@ -16,6 +17,14 @@ /* Reset Tailwind color defaults to avoid collisions */ --color-*: initial; + /* Font families */ + --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, + "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-display: var(--font-bricolage-grotesque), ui-sans-serif, system-ui, + -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-mono: var(--font-space-grotesk), ui-monospace, SFMono-Regular, + "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; + /* Dimension */ --spacing-scale-000: 0px; --spacing-scale-001: 1px; @@ -409,7 +418,6 @@ --shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%); --shadow-minimal-shadow: 0px 0px 8px 0px oklch(0% 0 0 / 15%); --shadow-focus-inverse: 0px 0px 10px 1px oklch(23.93% 0 263.28); - --shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%); /* Use this shadow most of the time */ --shadow-shallow-below: 0px 4px 16px 0px oklch(0% 0 0 / 12%); --shadow-default: 0px 4px 6px 0px oklch(0% 0 0 / 9%);