@giddaa-housing/ui 0.1.0 → 1.1.0

package/css/giddaa.css

@@ -0,0 +1,402 @@
+@theme static {
+	--color-forest-50: #ecf2ea;
+	--color-forest-100: #cfdfcb;
+	--color-forest-200: #a8c2a1;
+	--color-forest-300: #7aa071;
+	--color-forest-400: #4f7b47;
+	--color-forest-500: #2f5a2c;
+	--color-forest-600: #224320;
+	--color-forest-700: #173016;
+	--color-forest-900: #0b1b0a;
+
+	--color-forest-dark-100: #cdeed5;
+	--color-forest-dark-200: #95d4a6;
+	--color-forest-dark-300: #5bb874;
+	--color-forest-dark-400: #2e9a4f;
+	--color-forest-dark-500: #0a7e32;
+	--color-forest-dark-600: #0a6328;
+	--color-forest-dark-700: #0f4d28;
+	--color-forest-dark-900: #0a2e18;
+	--color-forest-dark-950: #051a0d;
+
+	--color-moss-50: #f1f0e4;
+	--color-moss-100: #dcdbbe;
+	--color-moss-200: #bdbc8c;
+	--color-moss-300: #969560;
+	--color-moss-400: #6f6e40;
+	--color-moss-500: #4e4d29;
+	--color-moss-600: #38371d;
+	--color-moss-700: #252513;
+	--color-moss-900: #141408;
+
+	--color-brass-50: #fcf4e1;
+	--color-brass-100: #f8e9c2;
+	--color-brass-200: #ebc76a;
+	--color-brass-300: #dca838;
+	--color-brass-400: #b8861a;
+	--color-brass-500: #946810;
+	--color-brass-600: #6e4d0b;
+	--color-brass-700: #4d3508;
+	--color-brass-900: #2b1e04;
+
+	--color-clay-50: #fbf1ec;
+	--color-clay-100: #f4d6c7;
+	--color-clay-200: #f2bd9a;
+	--color-clay-300: #e89968;
+	--color-clay-400: #d17646;
+	--color-clay-500: #b2542b;
+	--color-clay-600: #8f4220;
+	--color-clay-700: #6b3118;
+	--color-clay-900: #3d1b0d;
+
+	--color-stone-0: #ffffff;
+	--color-stone-50: #faf9f5;
+	--color-stone-200: #f3f2ed;
+	--color-stone-300: #e0dcd0;
+	--color-stone-400: #b8b0a0;
+	--color-stone-500: #8a8270;
+	--color-stone-600: #5c5648;
+	--color-stone-700: #3d3830;
+	--color-stone-900: #1f1c18;
+	--color-stone-950: #000000;
+
+	--color-stone-dark-0: #11160f;
+	--color-stone-dark-10: #ffffff;
+	--color-stone-dark-100: #ecf2ea;
+	--color-stone-dark-300: #c4c8bc;
+	--color-stone-dark-400: #8c9182;
+	--color-stone-dark-500: #6e7466;
+	--color-stone-dark-600: #4d5247;
+	--color-stone-dark-700: #383f33;
+	--color-stone-dark-750: #2c3329;
+	--color-stone-dark-800: #232921;
+	--color-stone-dark-875: #1a1f18;
+
+	--color-button-glass-overlay: rgb(0 0 0 / 0.5);
+	/*
+   * Glassmorphic chrome that overlays imagery (Carousel arrows + indicator).
+   * Intentionally dark in BOTH themes — it sits on top of photos, not the
+   * canvas, so it must not flip with the theme. 35% fill over a 16px blur.
+   */
+	--color-glass-overlay-button: rgb(17 22 15 / 0.35);
+	--color-container-glass-overlay-1: rgb(255 255 255 / 0.85);
+	--color-container-glass-overlay-2: rgb(255 255 255 / 0.95);
+
+	--color-button-glass-overlay-dark: rgba(17, 22, 15, 0.5);
+	--color-botton-glass-overlay-dark: var(--color-button-glass-overlay-dark);
+	--color-container-glass-overlay-dark-1: rgba(17, 22, 15, 0.85);
+	--color-container-glass-overlay-dark-2: rgba(17, 22, 15, 0.95);
+
+	/*
+   * Semantic aliases.
+   * Tailwind's utility prefix already supplies the CSS category:
+   * use bg-surface, text-fg-primary, border-line, not bg-bg-surface.
+   */
+	/* For background colors, in figma they are prefixed with bg, e.g bg-surface, so if you see bg-surface, use surface.*/
+	--color-canvas: var(--color-stone-0);
+	--color-surface: var(--color-stone-50);
+	--color-surface-raised: var(--color-stone-200);
+	--color-surface-overlay: var(--color-stone-0);
+	--color-surface-brand: var(--color-forest-500);
+	--color-surface-brand-subtle: var(--color-forest-50);
+	--color-surface-accent: var(--color-brass-400);
+	--color-surface-accent-subtle: var(--color-brass-50);
+	--color-surface-danger-subtle: var(--color-clay-50);
+	--color-surface-info-subtle: var(--color-moss-50);
+	--color-surface-glass-button: var(--color-stone-950);
+	--color-surface-glass-overlay-button: var(--color-button-glass-overlay);
+	--color-surface-glass-overlay-container-1: var(
+		--color-container-glass-overlay-1
+	);
+	--color-surface-glass-overlay-container-2: var(
+		--color-container-glass-overlay-2
+	);
+
+	/* For texts mostly, in figma they are prefixed with text, e.g text-primary, so if you see text-primary, it means fg-primary*/
+	--color-fg-primary: var(--color-stone-900);
+	--color-fg-secondary: var(--color-stone-600);
+	--color-fg-caption-placeholder: var(--color-stone-500);
+	--color-fg-brand: var(--color-forest-600);
+	--color-fg-danger: var(--color-clay-600);
+	--color-fg-info: var(--color-moss-600);
+	--color-fg-accent: var(--color-brass-600);
+	--color-fg-on-brand: var(--color-forest-50);
+	--color-fg-on-accent: var(--color-brass-900);
+
+	/* For borders and dividers, in figma they are prefixed witth border, e.g border-subtle, so if you border-subtle, use line-subtle;*/
+	--color-line-subtle: var(--color-stone-200);
+	--color-line: var(--color-stone-300);
+	--color-line-strong: var(--color-stone-400);
+	--color-line-focus: var(--color-forest-500);
+	--color-line-danger: var(--color-clay-500);
+	--border: var(--color-stone-300);
+
+	--color-action-primary: var(--color-forest-500);
+	--color-action-primary-hover: var(--color-forest-600);
+	--color-action-primary-pressed: var(--color-forest-700);
+	--color-action-secondary: var(--color-forest-500);
+	--color-action-secondary-hover: var(--color-forest-600);
+	--color-action-secondary-pressed: var(--color-forest-700);
+	--color-action-tertiary: var(--color-stone-200);
+	--color-action-tertiary-hover: var(--color-stone-300);
+	--color-action-tertiary-pressed: var(--color-stone-400);
+	--color-action-accent: var(--color-brass-400);
+	--color-action-danger: var(--color-clay-500);
+	--color-action-danger-hover: var(--color-clay-600);
+	--color-action-danger-pressed: var(--color-clay-700);
+	--color-whatsapp-button: #00d158;
+
+	--color-status-success: var(--color-forest-500);
+	--color-status-warning: var(--color-brass-400);
+	--color-status-danger: var(--color-clay-500);
+	--color-status-info: var(--color-moss-500);
+
+	/*
+	 * Categorical chart palette — series colours assigned in fixed slot order,
+	 * never cycled. Each theme's steps were validated (lightness band, chroma
+	 * floor, adjacent-pair CVD separation, 3:1 contrast) against that theme's
+	 * chart surface (surface-raised); the muted moss/stone scales fail the
+	 * chroma floor, so the palette stays at three slots — fold further series
+	 * into "Other" or use small multiples.
+	 */
+	--color-chart-1: var(--color-forest-dark-600);
+	--color-chart-2: var(--color-brass-400);
+	--color-chart-3: var(--color-clay-400);
+
+	--gradient-hero-forest: linear-gradient(
+		45deg,
+		var(--color-forest-700) 50%,
+		var(--color-forest-500) 80%,
+		var(--color-forest-400) 100%
+	);
+	--gradient-hero-forest-moss: linear-gradient(
+		45deg,
+		var(--color-forest-600) 50%,
+		var(--color-moss-500) 100%
+	);
+	--gradient-surface-canvas-lift: linear-gradient(
+		180deg,
+		var(--color-stone-0) 0%,
+		var(--color-stone-50) 100%
+	);
+	--gradient-surface-card-lift: linear-gradient(
+		180deg,
+		var(--color-stone-0) 0%,
+		var(--color-stone-200) 100%
+	);
+	--gradient-surface-brand-tint: linear-gradient(
+		45deg,
+		var(--color-forest-50) 50%,
+		var(--color-stone-50) 100%
+	);
+	--gradient-accent-brass-rise: linear-gradient(
+		45deg,
+		var(--color-brass-400) 50%,
+		var(--color-brass-300) 80%,
+		var(--color-brass-200) 100%
+	);
+	--gradient-accent-forest-to-brass: linear-gradient(
+		45deg,
+		var(--color-forest-700) 50%,
+		var(--color-forest-500) 75%,
+		var(--color-brass-400) 100%
+	);
+	--gradient-accent-emerald-to-brass: var(--gradient-accent-forest-to-brass);
+	--gradient-overlay-photo-bottom: linear-gradient(
+		180deg,
+		rgb(from var(--color-forest-900) r g b / 0) 0%,
+		rgb(from var(--color-forest-900) r g b / 0) 40%,
+		rgb(from var(--color-forest-900) r g b / 0.88) 100%
+	);
+	--gradient-overlay-photo-dual: linear-gradient(
+		180deg,
+		rgb(from var(--color-forest-900) r g b / 0.6) 0%,
+		rgb(from var(--color-forest-900) r g b / 0) 40%,
+		rgb(from var(--color-forest-900) r g b / 0) 60%,
+		rgb(from var(--color-forest-900) r g b / 0.78) 100%
+	);
+
+	--shadow-1: 0 1px 2px rgb(from var(--color-forest-700) r g b / 0.06);
+	--shadow-2:
+		0 4px 8px rgb(from var(--color-forest-700) r g b / 0.1),
+		0 8px 16px rgb(from var(--color-forest-700) r g b / 0.06);
+	--shadow-3:
+		0 8px 16px rgb(from var(--color-forest-700) r g b / 0.14),
+		0 16px 32px rgb(from var(--color-forest-700) r g b / 0.1),
+		0 24px 48px rgb(from var(--color-forest-700) r g b / 0.06);
+	--shadow-4:
+		0 8px 16px rgb(from var(--color-forest-700) r g b / 0.14),
+		0 16px 32px rgb(from var(--color-forest-700) r g b / 0.1),
+		0 24px 48px rgb(from var(--color-forest-700) r g b / 0.06);
+
+	--elevation-e0-bg: var(--color-stone-50);
+	--elevation-e0-border: var(--color-line-subtle);
+	--elevation-e0-shadow: none;
+
+	--elevation-e1-bg: var(--color-stone-0);
+	--elevation-e1-border: var(--color-line-subtle);
+	--elevation-e1-shadow:
+		0 1px 2px rgb(from var(--color-stone-900) r g b / 0.06),
+		0 1px 1px rgb(from var(--color-stone-900) r g b / 0.04);
+
+	--elevation-e2-bg: var(--color-stone-0);
+	--elevation-e2-border: var(--color-line-subtle);
+	--elevation-e2-shadow:
+		0 2px 6px rgb(from var(--color-stone-900) r g b / 0.08),
+		0 8px 24px rgb(from var(--color-stone-900) r g b / 0.06);
+
+	--elevation-e3-bg: var(--color-stone-0);
+	--elevation-e3-border: var(--color-line);
+	--elevation-e3-shadow:
+		0 4px 12px rgb(from var(--color-stone-900) r g b / 0.1),
+		0 16px 40px rgb(from var(--color-stone-900) r g b / 0.1);
+
+	--elevation-e4-bg: var(--color-stone-0);
+	--elevation-e4-border: var(--color-line);
+	--elevation-e4-shadow:
+		0 8px 20px rgb(from var(--color-stone-900) r g b / 0.14),
+		0 24px 64px rgb(from var(--color-stone-900) r g b / 0.16);
+}
+
+.dark {
+	--color-canvas: var(--color-stone-dark-0);
+	--color-surface: var(--color-stone-dark-875);
+	--color-surface-raised: var(--color-stone-dark-800);
+	--color-surface-overlay: var(--color-stone-dark-750);
+	--color-surface-brand: var(--color-forest-dark-500);
+	--color-surface-brand-subtle: var(--color-forest-dark-900);
+	--color-surface-accent: var(--color-brass-300);
+	--color-surface-accent-subtle: var(--color-brass-700);
+	--color-surface-danger-subtle: var(--color-clay-900);
+	--color-surface-info-subtle: var(--color-moss-700);
+	--color-surface-glass-button: var(--color-stone-dark-875);
+	--color-surface-glass-overlay-button: var(--color-button-glass-overlay-dark);
+	--color-surface-glass-overlay-container-1: var(
+		--color-container-glass-overlay-dark-1
+	);
+	--color-surface-glass-overlay-container-2: var(
+		--color-container-glass-overlay-dark-2
+	);
+
+	--color-fg-primary: var(--color-stone-dark-10);
+	--color-fg-secondary: var(--color-stone-dark-300);
+	--color-fg-caption-placeholder: var(--color-stone-dark-500);
+	--color-fg-brand: var(--color-forest-dark-200);
+	--color-fg-danger: var(--color-clay-300);
+	--color-fg-info: var(--color-moss-200);
+	--color-fg-accent: var(--color-brass-200);
+	--color-fg-on-brand: var(--color-stone-dark-10);
+	--color-fg-on-accent: var(--color-brass-700);
+
+	--color-line-subtle: var(--color-stone-dark-800);
+	--color-line: var(--color-stone-dark-700);
+	--color-line-strong: var(--color-stone-dark-600);
+	--color-line-focus: var(--color-forest-dark-500);
+	--color-line-danger: var(--color-clay-400);
+
+	--color-action-primary: var(--color-forest-dark-500);
+	--color-action-primary-hover: var(--color-forest-dark-400);
+	--color-action-primary-pressed: var(--color-forest-dark-600);
+	--color-action-secondary: var(--color-forest-dark-500);
+	--color-action-secondary-hover: var(--color-forest-dark-400);
+	--color-action-secondary-pressed: var(--color-forest-dark-600);
+	--color-action-tertiary: var(--color-stone-dark-600);
+	--color-action-tertiary-hover: var(--color-stone-dark-700);
+	--color-action-tertiary-pressed: var(--color-stone-dark-800);
+	--color-action-accent: var(--color-brass-300);
+	--color-action-danger: var(--color-clay-400);
+	--color-action-danger-hover: var(--color-clay-500);
+	--color-action-danger-pressed: var(--color-clay-600);
+	--color-whatsapp-button: #00d158;
+
+	--color-status-success: var(--color-forest-dark-300);
+	--color-status-warning: var(--color-brass-200);
+	--color-status-danger: var(--color-clay-300);
+	--color-status-info: var(--color-moss-200);
+
+	--color-chart-1: var(--color-forest-dark-400);
+	--color-chart-2: var(--color-brass-400);
+	--color-chart-3: var(--color-clay-400);
+
+	--gradient-hero-forest: linear-gradient(
+		45deg,
+		var(--color-forest-dark-950) 50%,
+		var(--color-forest-dark-900) 75%,
+		var(--color-forest-dark-500) 100%
+	);
+	--gradient-hero-forest-moss: linear-gradient(
+		45deg,
+		var(--color-forest-dark-900) 50%,
+		var(--color-moss-700) 100%
+	);
+	--gradient-surface-canvas-lift: linear-gradient(
+		180deg,
+		var(--color-stone-dark-0) 0%,
+		var(--color-stone-dark-875) 100%
+	);
+	--gradient-surface-card-lift: linear-gradient(
+		180deg,
+		var(--color-stone-dark-875) 0%,
+		var(--color-stone-dark-750) 100%
+	);
+	--gradient-surface-brand-tint: linear-gradient(
+		45deg,
+		var(--color-forest-dark-900) 50%,
+		var(--color-stone-dark-875) 100%
+	);
+	--gradient-accent-brass-rise: linear-gradient(
+		45deg,
+		var(--color-brass-500) 50%,
+		var(--color-brass-400) 80%,
+		var(--color-brass-300) 100%
+	);
+	--gradient-accent-forest-to-brass: linear-gradient(
+		45deg,
+		var(--color-forest-dark-950) 50%,
+		var(--color-forest-dark-500) 75%,
+		var(--color-brass-500) 100%
+	);
+	--gradient-accent-emerald-to-brass: var(--gradient-accent-forest-to-brass);
+	--gradient-overlay-photo-bottom: linear-gradient(
+		180deg,
+		rgb(from var(--color-forest-900) r g b / 0) 0%,
+		rgb(from var(--color-forest-900) r g b / 0) 40%,
+		rgb(from var(--color-forest-900) r g b / 0.88) 100%
+	);
+	--gradient-overlay-photo-dual: linear-gradient(
+		180deg,
+		rgb(from var(--color-forest-900) r g b / 0.6) 0%,
+		rgb(from var(--color-forest-900) r g b / 0) 40%,
+		rgb(from var(--color-forest-900) r g b / 0) 60%,
+		rgb(from var(--color-forest-900) r g b / 0.78) 100%
+	);
+
+	--shadow-1: 0 1px 2px rgb(from var(--color-forest-700) r g b / 0.04);
+	--shadow-2: 0 4px 12px rgb(0 0 0 / 0.35);
+	--shadow-3: 0 8px 24px rgb(0 0 0 / 0.5), 0 16px 48px rgb(0 0 0 / 0.3);
+	--shadow-4:
+		0 8px 16px rgb(0 0 0 / 0.14), 0 16px 32px rgb(0 0 0 / 0.1),
+		0 24px 48px rgb(0 0 0 / 0.06);
+
+	--elevation-e0-bg: var(--color-stone-dark-0);
+	--elevation-e0-border: var(--color-stone-dark-800);
+	--elevation-e0-shadow: none;
+
+	--elevation-e1-bg: var(--color-stone-dark-875);
+	--elevation-e1-border: var(--color-stone-dark-750);
+	--elevation-e1-shadow: none;
+
+	--elevation-e2-bg: var(--color-stone-dark-800);
+	--elevation-e2-border: var(--color-stone-dark-700);
+	--elevation-e2-shadow: none;
+
+	--elevation-e3-bg: var(--color-stone-dark-750);
+	--elevation-e3-border: var(--color-stone-dark-600);
+	--elevation-e3-shadow: 0 6px 18px rgb(from var(--color-black) r g b / 0.28);
+
+	--elevation-e4-bg: var(--color-stone-dark-700);
+	--elevation-e4-border: var(--color-stone-dark-500);
+	--elevation-e4-shadow:
+		0 10px 30px rgb(from var(--color-black) r g b / 0.38),
+		0 24px 64px rgb(from var(--color-black) r g b / 0.18);
+}

package/css/preset.css

@@ -0,0 +1,77 @@
+@import "./theme.css";
+@import "./base.css";
+@import "./components.css";
+@import "./generated/shared.css";
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@utility elevation-e0 {
+	border-style: solid;
+	border-width: 1px;
+	background-color: var(--elevation-e0-bg);
+	border-color: var(--elevation-e0-border);
+	box-shadow: var(--elevation-e0-shadow);
+	transition:
+		background-color 200ms ease,
+		border-color 200ms ease,
+		box-shadow 200ms ease;
+}
+
+@utility elevation-e1 {
+	border-style: solid;
+	border-width: 1px;
+	background-color: var(--elevation-e1-bg);
+	border-color: var(--elevation-e1-border);
+	box-shadow: var(--elevation-e1-shadow);
+	transition:
+		background-color 200ms ease,
+		border-color 200ms ease,
+		box-shadow 200ms ease;
+}
+
+@utility elevation-e2 {
+	border-style: solid;
+	border-width: 1px;
+	background-color: var(--elevation-e2-bg);
+	border-color: var(--elevation-e2-border);
+	box-shadow: var(--elevation-e2-shadow);
+	transition:
+		background-color 200ms ease,
+		border-color 200ms ease,
+		box-shadow 200ms ease;
+}
+
+@utility elevation-e3 {
+	border-style: solid;
+	border-width: 1px;
+	background-color: var(--elevation-e3-bg);
+	border-color: var(--elevation-e3-border);
+	box-shadow: var(--elevation-e3-shadow);
+	transition:
+		background-color 200ms ease,
+		border-color 200ms ease,
+		box-shadow 200ms ease;
+}
+
+@utility elevation-e4 {
+	border-style: solid;
+	border-width: 1px;
+	background-color: var(--elevation-e4-bg);
+	border-color: var(--elevation-e4-border);
+	box-shadow: var(--elevation-e4-shadow);
+	transition:
+		background-color 200ms ease,
+		border-color 200ms ease,
+		box-shadow 200ms ease;
+}
+
+@utility container {
+	margin-inline: auto;
+	width: 100%;
+
+	@media (width >= 96rem) {
+		max-width: 96rem;
+		padding-inline: 40px;
+	}
+}

package/css/styles.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "./preset.css";