@regardio/brand 0.8.1 → 0.9.0

package/src/styles/typography.css

@@ -1,7 +1,11 @@
 /**
  * Typography System
- * Fluid typography using viewport-based scaling with Georama Variable font
- * Scales automatically between 320px and 2560px viewports
+ * Fluid typography using Utopia scales with Georama Variable font
+ *
+ * Uses Utopia --step-* tokens for fluid type scaling.
+ * Base font size (--step-0) applied to body, not html, to avoid interfering with other tools.
+ *
+ * @link https://utopia.fyi/type/calculator
  */
 
 @import "@fontsource-variable/georama";
@@ -12,22 +16,6 @@
   --font-mono:
     ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
 
-  /* Fluid font sizes - viewport-based scaling */
-  /* Base: 16px at 320px viewport, scales to 18px at 2560px */
-  --font-size-xs: clamp(0.75rem, 0.7455rem + 0.0196vw, 0.84rem);
-  --font-size-sm: clamp(0.875rem, 0.8696rem + 0.0234vw, 0.98rem);
-  --font-size-base: clamp(1rem, 0.9937rem + 0.0272vw, 1.125rem);
-  --font-size-lg: clamp(1.125rem, 1.1179rem + 0.0308vw, 1.266rem);
-  --font-size-xl: clamp(1.25rem, 1.242rem + 0.0348vw, 1.406rem);
-  --font-size-2xl: clamp(1.5rem, 1.4902rem + 0.0424vw, 1.688rem);
-  --font-size-3xl: clamp(1.875rem, 1.8627rem + 0.0533vw, 2.109rem);
-  --font-size-4xl: clamp(2.25rem, 2.2353rem + 0.0641vw, 2.531rem);
-  --font-size-5xl: clamp(3rem, 2.9804rem + 0.0848vw, 3.375rem);
-  --font-size-6xl: clamp(3.75rem, 3.7255rem + 0.106vw, 4.219rem);
-  --font-size-7xl: clamp(4.5rem, 4.4706rem + 0.1272vw, 5.063rem);
-  --font-size-8xl: clamp(6rem, 5.9608rem + 0.1696vw, 6.75rem);
-  --font-size-9xl: clamp(8rem, 7.9412rem + 0.2544vw, 9rem);
-
   /* Line heights */
   --line-height-none: 1;
   --line-height-tight: 1.25;
@@ -46,15 +34,9 @@
 }
 
 @layer base {
-  /* Fluid root font size - scales from 16px at 320px to 27px at 2560px */
-  /* This makes ALL rem values fluid throughout the system */
-  html {
-    font-size: clamp(16px, 14.429px + 0.4911vw, 27px);
-  }
-
   body {
     font-family: var(--font-sans);
-    font-size: var(--font-size-base);
+    font-size: var(--step-0);
     font-feature-settings:
       "liga" 1,
       "dlig" 1,
@@ -66,41 +48,41 @@
     line-height: var(--line-height-normal);
   }
 
-  /* Headings with fluid sizing */
+  /* Headings with Utopia fluid sizing */
   h1 {
-    font-size: var(--font-size-5xl);
+    font-size: var(--step-5);
     font-weight: 700;
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
   }
 
   h2 {
-    font-size: var(--font-size-4xl);
+    font-size: var(--step-4);
     font-weight: 700;
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
   }
 
   h3 {
-    font-size: var(--font-size-3xl);
+    font-size: var(--step-3);
     font-weight: 600;
     line-height: var(--line-height-snug);
   }
 
   h4 {
-    font-size: var(--font-size-2xl);
+    font-size: var(--step-2);
     font-weight: 600;
     line-height: var(--line-height-snug);
   }
 
   h5 {
-    font-size: var(--font-size-xl);
+    font-size: var(--step-1);
     font-weight: 600;
     line-height: var(--line-height-snug);
   }
 
   h6 {
-    font-size: var(--font-size-lg);
+    font-size: var(--step-0);
     font-weight: 600;
     line-height: var(--line-height-normal);
   }

package/src/styles/utopia.css

@@ -0,0 +1,59 @@
+/**
+ * Utopia Fluid Scales
+ * Generated from https://utopia.fyi
+ *
+ * This file defines fluid type and spacing scales that adapt smoothly across viewports.
+ * Use these tokens with fluid-tailwindcss utilities or directly in your CSS.
+ *
+ * TYPOGRAPHY:
+ * Apply --step-0 to body or main container (not html to avoid interfering with other tools)
+ * Use --step-1 through --step-7 for headings and larger text
+ * Use --step--1 and --step--2 for smaller text
+ *
+ * SPACING:
+ * Use with fluid-tailwindcss: fl-gap-s/m, fl-py-m/l, etc.
+ * Or use directly: gap: var(--space-s-m)
+ *
+ * GRID:
+ * Configure grid gutter with fluid spacing for perfect square cells
+ */
+
+/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,2560,26,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,2xs-2xl&g=2xs,2xl,2xl,12 */
+:root {
+  --step--2: clamp(0.6944rem, 0.6451rem + 0.2468vw, 1.04rem);
+  --step--1: clamp(0.8333rem, 0.7667rem + 0.3333vw, 1.3rem);
+  --step-0: clamp(1rem, 0.9107rem + 0.4464vw, 1.625rem);
+  --step-1: clamp(1.2rem, 1.0813rem + 0.5938vw, 2.0313rem);
+  --step-2: clamp(1.44rem, 1.283rem + 0.785vw, 2.5391rem);
+  --step-3: clamp(1.728rem, 1.5215rem + 1.0327vw, 3.1738rem);
+  --step-4: clamp(2.0736rem, 1.8031rem + 1.3526vw, 3.9673rem);
+  --step-5: clamp(2.4883rem, 2.1354rem + 1.7648vw, 4.9591rem);
+  --step-6: clamp(2.986rem, 2.527rem + 2.2949vw, 6.1989rem);
+  --step-7: clamp(3.5832rem, 2.9881rem + 2.9753vw, 7.7486rem);
+}
+
+/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,2560,26,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,2xs-2xl&g=2xs,2xl,2xl,12 */
+:root {
+  --space-3xs: clamp(0.25rem, 0.2232rem + 0.1339vw, 0.4375rem);
+  --space-2xs: clamp(0.5rem, 0.4554rem + 0.2232vw, 0.8125rem);
+  --space-xs: clamp(0.75rem, 0.6786rem + 0.3571vw, 1.25rem);
+  --space-s: clamp(1rem, 0.9107rem + 0.4464vw, 1.625rem);
+  --space-m: clamp(1.5rem, 1.3661rem + 0.6696vw, 2.4375rem);
+  --space-l: clamp(2rem, 1.8214rem + 0.8929vw, 3.25rem);
+  --space-xl: clamp(3rem, 2.7321rem + 1.3393vw, 4.875rem);
+  --space-2xl: clamp(4rem, 3.6429rem + 1.7857vw, 6.5rem);
+  --space-3xl: clamp(6rem, 5.4643rem + 2.6786vw, 9.75rem);
+
+  /* One-up pairs */
+  --space-3xs-2xs: clamp(0.25rem, 0.1696rem + 0.4018vw, 0.8125rem);
+  --space-2xs-xs: clamp(0.5rem, 0.3929rem + 0.5357vw, 1.25rem);
+  --space-xs-s: clamp(0.75rem, 0.625rem + 0.625vw, 1.625rem);
+  --space-s-m: clamp(1rem, 0.7946rem + 1.0268vw, 2.4375rem);
+  --space-m-l: clamp(1.5rem, 1.25rem + 1.25vw, 3.25rem);
+  --space-l-xl: clamp(2rem, 1.5893rem + 2.0536vw, 4.875rem);
+  --space-xl-2xl: clamp(3rem, 2.5rem + 2.5vw, 6.5rem);
+  --space-2xl-3xl: clamp(4rem, 3.1786rem + 4.1071vw, 9.75rem);
+
+  /* Custom pairs */
+  --space-2xs-2xl: clamp(0.5rem, -0.3571rem + 4.2857vw, 6.5rem);
+}

package/dist/generated/icons/regardio-system-bridge-icon.d.mts

@@ -1,14 +0,0 @@
-import React, { SVGProps } from "react";
-
-//#region src/generated/icons/regardio-system-bridge-icon.d.ts
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
-declare const SvgRegardioSystemBridgeIcon: ({
-  title,
-  titleId,
-  ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => React.JSX.Element;
-//#endregion
-export { SvgRegardioSystemBridgeIcon as default };

package/dist/generated/icons/regardio-system-circle-icon.d.mts

@@ -1,14 +0,0 @@
-import React, { SVGProps } from "react";
-
-//#region src/generated/icons/regardio-system-circle-icon.d.ts
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
-declare const SvgRegardioSystemCircleIcon: ({
-  title,
-  titleId,
-  ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => React.JSX.Element;
-//#endregion
-export { SvgRegardioSystemCircleIcon as default };

package/dist/generated/icons/regardio-system-plan-icon.mjs

@@ -1,19 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/generated/icons/regardio-system-plan-icon.tsx
-const SvgRegardioSystemPlanIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs("svg", {
-	"aria-labelledby": titleId,
-	height: "1em",
-	viewBox: "0 0 1024 1024",
-	width: "1em",
-	xmlns: "http://www.w3.org/2000/svg",
-	...props,
-	children: [title ? /* @__PURE__ */ jsx("title", {
-		id: titleId,
-		children: title
-	}) : null, /* @__PURE__ */ jsx("path", {
-		className: "fill-blue-400",
-		d: "M873.95 845.65c-7.51-131.78-13.49-263.5-18.02-395.15-2.13-61.75-3.94-123.49-5.45-185.21-.21-8.8-4.56-16.93-11.45-21.33a5104 5104 0 0 0-147.84-91c-7.05-4.18-15.66-3.89-22.53.7-47.93 31.99-96.35 63.8-145.48 95.7-7.04 4.57-15.79 4.82-22.82.68-49.13-28.89-97.56-56.69-145.48-83.72-6.87-3.88-15.48-3.44-22.53 1.12-49.26 31.87-98.87 64.03-147.95 95.94-6.9 4.48-11.26 12.24-11.48 20.39-1.55 57.15-3.38 114.26-5.48 171.34-4.49 121.69-10.26 243.21-17.39 364.57-1.09 17.66 18.46 29.84 34.93 21.82 45.43-22.2 90.05-44.78 134.46-68.11 7.52-3.95 16.71-3.57 24.07 1.01 51.38 32 103.55 64.01 156.05 95.89 7.53 4.57 16.87 4.95 24.4.97 52.51-27.78 104.72-56.75 156.12-86.81 7.37-4.31 16.56-4.16 24.09.42 44.47 27.06 89.19 54.12 134.8 81.57 16.54 9.96 36.12-1.57 34.97-20.78z"
-	})]
-});
-//#endregion
-export { SvgRegardioSystemPlanIcon as default };

package/dist/generated/icons/regardio-system-pursuit-icon.d.mts

@@ -1,14 +0,0 @@
-import React, { SVGProps } from "react";
-
-//#region src/generated/icons/regardio-system-pursuit-icon.d.ts
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
-declare const SvgRegardioSystemPursuitIcon: ({
-  title,
-  titleId,
-  ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => React.JSX.Element;
-//#endregion
-export { SvgRegardioSystemPursuitIcon as default };

package/dist/generated/icons/regardio-system-spark-icon.mjs

@@ -1,19 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/generated/icons/regardio-system-spark-icon.tsx
-const SvgRegardioSystemSparkIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs("svg", {
-	"aria-labelledby": titleId,
-	height: "1em",
-	viewBox: "0 0 1024 1024",
-	width: "1em",
-	xmlns: "http://www.w3.org/2000/svg",
-	...props,
-	children: [title ? /* @__PURE__ */ jsx("title", {
-		id: titleId,
-		children: title
-	}) : null, /* @__PURE__ */ jsx("path", {
-		className: "fill-coral-400",
-		d: "M762.95 434.78c-36.02.15-72.67.42-109.69.81-4.38.05-6.92-4.81-4.54-8.72 19.9-32.67 40.28-65.43 61.38-98.34 1.82-2.84 1.09-6.42-1.65-7.95-40.08-22.45-81.63-43.87-123.95-64-2.85-1.36-6.54-.26-8.25 2.45-20.25 31.99-39.99 64.06-59.24 96.1-2.27 3.79-7.88 3.99-10.16.37-19.25-30.56-39-60.29-59.2-89.1-1.71-2.44-5.39-3.08-8.23-1.45-42.22 24.31-83.62 48.55-123.6 72.46-2.73 1.63-3.48 4.97-1.67 7.42 20.92 28.45 41.21 57.62 61.05 87.52 2.37 3.58-.16 8.24-4.55 8.35-36.99.95-73.61 2-109.59 3.14-3.05.1-5.3 2.52-5.04 5.4 3.78 42.13 7.3 84.34 10.57 126.61.22 2.9 2.76 5.32 5.68 5.4 34.41 1 69.42 1.92 104.76 2.76 4.19.1 6.99 4.75 5.03 8.35-16.31 30.02-32.04 59.36-47.37 88.1-1.32 2.48-.27 5.83 2.34 7.45 38.18 23.79 76.03 47.86 112.98 71.94 2.48 1.62 5.59.95 6.96-1.51 16.21-29.01 32.99-58.86 50.35-89.49 2.05-3.62 7.16-3.44 9.21.34 17.35 31.98 34.11 63.94 50.3 95.78 1.37 2.7 4.48 3.78 6.96 2.41 36.92-20.29 74.71-41.75 112.8-64.19 2.6-1.53 3.66-5.1 2.34-7.93-15.28-32.76-30.95-65.42-47.22-98.03-1.95-3.9.85-8.76 5.03-8.72 35.29.34 70.23.58 104.55.72 2.91.01 5.44-2.62 5.67-5.88 3.37-47.53 7.03-95.1 11.01-142.71.27-3.26-1.97-5.9-5.02-5.89z"
-	})]
-});
-//#endregion
-export { SvgRegardioSystemSparkIcon as default };

package/dist/generated/icons/regardio-system-zest-icon.mjs

@@ -1,19 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/generated/icons/regardio-system-zest-icon.tsx
-const SvgRegardioSystemZestIcon = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs("svg", {
-	"aria-labelledby": titleId,
-	height: "1em",
-	viewBox: "0 0 1024 1024",
-	width: "1em",
-	xmlns: "http://www.w3.org/2000/svg",
-	...props,
-	children: [title ? /* @__PURE__ */ jsx("title", {
-		id: titleId,
-		children: title
-	}) : null, /* @__PURE__ */ jsx("path", {
-		className: "fill-yellow-400",
-		d: "M822.01 152.4c-1.1-2.52-4.37-3.21-6.37-1.33-158.41 147.85-405.77 113.49-561.45 290.44-118.41 134.6-106.36 234.27-101.11 260.14 16.3 80.44 93.47 148.49 202.18 167.36 46.6 8.09 93.25 6.09 136.21-4.04 20.44-4.82 40.03-11.49 58.38-19.82 251.03-100.53 412.48-370.12 272.16-692.73z"
-	})]
-});
-//#endregion
-export { SvgRegardioSystemZestIcon as default };