@almadar/core 10.111.0 → 10.113.0

package/themes/comic.json

@@ -1,5 +1,6 @@
 {
   "name": "comic",
+  "displayName": "Comic Studio",
   "tokens": {
     "density": {
       "spacing": {
@@ -33,8 +34,8 @@
       "sectionGap": "32px"
     },
     "typeScale": {
-      "displayFamily": "\"Fredoka\", \"Inter\", -apple-system, BlinkMacSystemFont, sans-serif",
-      "bodyFamily": "var(--font-family)",
+      "displayFamily": "\"Bangers\", \"Comic Sans MS\", cursive",
+      "bodyFamily": "\"Fredoka\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
       "monoFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
       "scale": {
         "xs": {
@@ -114,7 +115,12 @@
           "size": "sm",
           "weight": "medium"
         }
-      }
+      },
+      "fontImport": "https://fonts.googleapis.com/css2?family=Bangers&family=Fredoka:wght@400;500;600;700&display=swap",
+      "headingWeight": "400",
+      "headingTransform": "uppercase",
+      "headingTracking": "0.05em",
+      "headingStyle": "normal"
     },
     "motion": {
       "durations": {
@@ -129,6 +135,15 @@
         "standard": "var(--transition-timing)",
         "emphasized": "cubic-bezier(0.2, 0, 0, 1)",
         "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
+      },
+      "shapes": {
+        "modalEnter": "scale(0.8) rotate(-2deg)",
+        "modalExit": "scale(0.8) rotate(-2deg)",
+        "pageEnter": "translateY(12px)",
+        "popoverEnter": "scale(0.85)",
+        "popoverExit": "scale(0.85)",
+        "toastEnter": "translateY(20px) scale(0.9)",
+        "toastExit": "translateY(20px) scale(0.9)"
       }
     },
     "iconography": {
@@ -140,7 +155,9 @@
       "cardElevation": "var(--shadow-sm)",
       "popoverElevation": "var(--shadow-main)",
       "dialogElevation": "var(--shadow-lg)",
-      "toastElevation": "var(--shadow-main)"
+      "toastElevation": "var(--shadow-main)",
+      "interactiveElevation": "var(--shadow-sm)",
+      "pressedElevation": "var(--shadow-active)"
     },
     "geometry": {
       "radiusContainer": "var(--radius-md)",
@@ -148,7 +165,11 @@
       "radiusPill": "var(--radius-full)",
       "borderHairline": "1px",
       "borderStandard": "var(--border-width)",
-      "borderHeavy": "var(--border-width-thick)"
+      "borderHeavy": "var(--border-width-thick)",
+      "cornerShape": "round",
+      "cornerShapePill": "round",
+      "borderStyle": "solid",
+      "borderStyleInteractive": "solid"
     },
     "colors": {
       "primary": "#c2301b",
@@ -182,7 +203,8 @@
       "warning": "#f5a623",
       "warning-foreground": "#2a1a00",
       "info": "#2f6fed",
-      "info-foreground": "#ffffff"
+      "info-foreground": "#ffffff",
+      "scrim": "rgba(0, 0, 0, 0.6)"
     },
     "radii": {
       "none": "0px",
@@ -205,7 +227,7 @@
       "border-width": "3px",
       "border-width-thin": "2px",
       "border-width-thick": "4px",
-      "font-family": "\"Fredoka\", \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+      "font-family": "\"Fredoka\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
       "font-weight-normal": "400",
       "font-weight-medium": "500",
       "font-weight-bold": "700",
@@ -224,44 +246,85 @@
       "focus-ring-width": "3px",
       "focus-ring-offset": "2px",
       "focus-ring-color": "#2f6fed"
+    },
+    "surface": {
+      "pageImage": "radial-gradient(rgba(28, 28, 40, 0.13) 1.4px, transparent 1.8px)",
+      "pageImageSize": "10px 10px"
     }
   },
   "variants": {
     "dark": {
-      "density": {
-        "spacing": {
-          "space0": "0px",
-          "space1": "4px",
-          "space2": "8px",
-          "space3": "12px",
-          "space4": "16px",
-          "space5": "20px",
-          "space6": "24px",
-          "space7": "28px",
-          "space8": "32px",
-          "space9": "36px",
-          "space10": "40px",
-          "space11": "44px",
-          "space12": "48px"
-        },
-        "buttonHeightSm": "30px",
-        "buttonHeightMd": "40px",
-        "buttonHeightLg": "48px",
-        "inputHeightSm": "30px",
-        "inputHeightMd": "40px",
-        "inputHeightLg": "48px",
-        "rowHeightCompact": "32px",
-        "rowHeightNormal": "40px",
-        "rowHeightSpacious": "48px",
-        "cardPaddingSm": "12px",
-        "cardPaddingMd": "18px",
-        "cardPaddingLg": "24px",
-        "dialogPadding": "24px",
-        "sectionGap": "32px"
+      "colors": {
+        "primary": "#ff7a5c",
+        "primary-hover": "#ff9174",
+        "primary-foreground": "#180a05",
+        "secondary": "#6fe3c4",
+        "secondary-hover": "#8ceccf",
+        "secondary-foreground": "#062a1e",
+        "accent": "#ffdd57",
+        "accent-foreground": "#2a1e00",
+        "muted": "#262a4d",
+        "muted-foreground": "#b7bbe3",
+        "background": "#14162c",
+        "foreground": "#f5efe0",
+        "card": "#1d2044",
+        "card-foreground": "#f5efe0",
+        "surface": "#1a1d3c",
+        "border": "#f0e9d8",
+        "input": "#c9c2a9",
+        "ring": "#6fa8ff",
+        "table-header": "#1a1d3c",
+        "table-border": "#f0e9d8",
+        "table-row-hover": "#20244a",
+        "surface-hover": "#262a52",
+        "border-hover": "#ff7a5c",
+        "placeholder": "#8e92c0",
+        "error": "#ff6b6b",
+        "error-foreground": "#180505",
+        "success": "#4ede93",
+        "success-foreground": "#04210f",
+        "warning": "#ffc24c",
+        "warning-foreground": "#2a1a00",
+        "info": "#6fa8ff",
+        "info-foreground": "#071b3d",
+        "scrim": "rgba(0, 0, 0, 0.7)"
+      },
+      "typography": {
+        "border-width": "3px",
+        "border-width-thin": "2px",
+        "border-width-thick": "4px",
+        "font-family": "\"Fredoka\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+        "font-weight-normal": "400",
+        "font-weight-medium": "500",
+        "font-weight-bold": "700",
+        "letter-spacing": "0em",
+        "line-height": "1.55",
+        "icon-color": "#ff7a5c",
+        "transition-fast": "120ms",
+        "transition-normal": "200ms",
+        "transition-slow": "320ms",
+        "transition-timing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+        "hover-scale": "1.03",
+        "hover-translate-y": "-2px",
+        "hover-translate-x": "-1px",
+        "active-scale": "0.97",
+        "active-translate-y": "1px",
+        "focus-ring-width": "3px",
+        "focus-ring-offset": "2px",
+        "focus-ring-color": "#6fa8ff"
+      },
+      "shadows": {
+        "main": "4px 4px 0 0 #f0e9d8",
+        "sm": "2px 2px 0 0 #f0e9d8",
+        "lg": "6px 6px 0 0 #f0e9d8",
+        "inner": "inset 2px 2px 0 0 rgba(240, 233, 216, 0.15)",
+        "none": "none",
+        "hover": "6px 6px 0 0 #f0e9d8",
+        "active": "1px 1px 0 0 #f0e9d8"
       },
       "typeScale": {
-        "displayFamily": "\"Fredoka\", \"Inter\", -apple-system, BlinkMacSystemFont, sans-serif",
-        "bodyFamily": "var(--font-family)",
+        "displayFamily": "\"Bangers\", \"Comic Sans MS\", cursive",
+        "bodyFamily": "\"Fredoka\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
         "monoFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
         "scale": {
           "xs": {
@@ -341,116 +404,16 @@
             "size": "sm",
             "weight": "medium"
           }
-        }
-      },
-      "motion": {
-        "durations": {
-          "instant": "0ms",
-          "fast": "var(--transition-fast)",
-          "normal": "var(--transition-normal)",
-          "slow": "var(--transition-slow)",
-          "dramatic": "600ms"
         },
-        "easings": {
-          "linear": "linear",
-          "standard": "var(--transition-timing)",
-          "emphasized": "cubic-bezier(0.2, 0, 0, 1)",
-          "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
-        }
-      },
-      "iconography": {
-        "family": "lucide",
-        "strokeWidth": "2.5",
-        "defaultSize": "16px"
-      },
-      "elevation": {
-        "cardElevation": "var(--shadow-sm)",
-        "popoverElevation": "var(--shadow-main)",
-        "dialogElevation": "var(--shadow-lg)",
-        "toastElevation": "var(--shadow-main)"
-      },
-      "geometry": {
-        "radiusContainer": "var(--radius-md)",
-        "radiusInteractive": "var(--radius-md)",
-        "radiusPill": "var(--radius-full)",
-        "borderHairline": "1px",
-        "borderStandard": "var(--border-width)",
-        "borderHeavy": "var(--border-width-thick)"
-      },
-      "colors": {
-        "primary": "#ff7a5c",
-        "primary-hover": "#ff9174",
-        "primary-foreground": "#180a05",
-        "secondary": "#6fe3c4",
-        "secondary-hover": "#8ceccf",
-        "secondary-foreground": "#062a1e",
-        "accent": "#ffdd57",
-        "accent-foreground": "#2a1e00",
-        "muted": "#262a4d",
-        "muted-foreground": "#b7bbe3",
-        "background": "#14162c",
-        "foreground": "#f5efe0",
-        "card": "#1d2044",
-        "card-foreground": "#f5efe0",
-        "surface": "#1a1d3c",
-        "border": "#f0e9d8",
-        "input": "#c9c2a9",
-        "ring": "#6fa8ff",
-        "table-header": "#1a1d3c",
-        "table-border": "#f0e9d8",
-        "table-row-hover": "#20244a",
-        "surface-hover": "#262a52",
-        "border-hover": "#ff7a5c",
-        "placeholder": "#8e92c0",
-        "error": "#ff6b6b",
-        "error-foreground": "#180505",
-        "success": "#4ede93",
-        "success-foreground": "#04210f",
-        "warning": "#ffc24c",
-        "warning-foreground": "#2a1a00",
-        "info": "#6fa8ff",
-        "info-foreground": "#071b3d"
-      },
-      "radii": {
-        "none": "0px",
-        "sm": "8px",
-        "md": "14px",
-        "lg": "20px",
-        "xl": "28px",
-        "full": "9999px"
-      },
-      "shadows": {
-        "main": "4px 4px 0 0 #f0e9d8",
-        "sm": "2px 2px 0 0 #f0e9d8",
-        "lg": "6px 6px 0 0 #f0e9d8",
-        "inner": "inset 2px 2px 0 0 rgba(240, 233, 216, 0.15)",
-        "none": "none",
-        "hover": "6px 6px 0 0 #f0e9d8",
-        "active": "1px 1px 0 0 #f0e9d8"
+        "fontImport": "https://fonts.googleapis.com/css2?family=Bangers&family=Fredoka:wght@400;500;600;700&display=swap",
+        "headingWeight": "400",
+        "headingTransform": "uppercase",
+        "headingTracking": "0.05em",
+        "headingStyle": "normal"
       },
-      "typography": {
-        "border-width": "3px",
-        "border-width-thin": "2px",
-        "border-width-thick": "4px",
-        "font-family": "\"Fredoka\", \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
-        "font-weight-normal": "400",
-        "font-weight-medium": "500",
-        "font-weight-bold": "700",
-        "letter-spacing": "0em",
-        "line-height": "1.55",
-        "icon-color": "#ff7a5c",
-        "transition-fast": "120ms",
-        "transition-normal": "200ms",
-        "transition-slow": "320ms",
-        "transition-timing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
-        "hover-scale": "1.03",
-        "hover-translate-y": "-2px",
-        "hover-translate-x": "-1px",
-        "active-scale": "0.97",
-        "active-translate-y": "1px",
-        "focus-ring-width": "3px",
-        "focus-ring-offset": "2px",
-        "focus-ring-color": "#6fa8ff"
+      "surface": {
+        "pageImage": "radial-gradient(rgba(240, 233, 216, 0.09) 1.4px, transparent 1.8px)",
+        "pageImageSize": "10px 10px"
       }
     }
   }

package/themes/constructivist.json

@@ -0,0 +1,342 @@
+{
+  "name": "constructivist",
+  "displayName": "Constructivist",
+  "tokens": {
+    "density": {
+      "spacing": {
+        "space0": "0px",
+        "space1": "4px",
+        "space2": "8px",
+        "space3": "12px",
+        "space4": "16px",
+        "space5": "20px",
+        "space6": "24px",
+        "space7": "28px",
+        "space8": "32px",
+        "space9": "36px",
+        "space10": "40px",
+        "space11": "44px",
+        "space12": "48px"
+      },
+      "buttonHeightSm": "32px",
+      "buttonHeightMd": "42px",
+      "buttonHeightLg": "52px",
+      "inputHeightSm": "32px",
+      "inputHeightMd": "42px",
+      "inputHeightLg": "52px",
+      "rowHeightCompact": "34px",
+      "rowHeightNormal": "42px",
+      "rowHeightSpacious": "52px",
+      "cardPaddingSm": "12px",
+      "cardPaddingMd": "20px",
+      "cardPaddingLg": "28px",
+      "dialogPadding": "28px",
+      "sectionGap": "32px"
+    },
+    "typeScale": {
+      "displayFamily": "\"Russo One\", \"Oswald\", \"Impact\", sans-serif",
+      "bodyFamily": "\"Roboto Condensed\", \"Arial Narrow\", sans-serif",
+      "monoFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+      "fontImport": "https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Russo+One&family=Roboto+Condensed:wght@400;500;700&display=swap",
+      "headingWeight": "700",
+      "headingTransform": "uppercase",
+      "headingTracking": "-0.01em",
+      "headingStyle": "normal",
+      "headingShadow": "none",
+      "scale": {
+        "xs": {
+          "size": "12px",
+          "lineHeight": "16px"
+        },
+        "sm": {
+          "size": "14px",
+          "lineHeight": "20px"
+        },
+        "base": {
+          "size": "16px",
+          "lineHeight": "24px"
+        },
+        "lg": {
+          "size": "18px",
+          "lineHeight": "28px"
+        },
+        "xl": {
+          "size": "20px",
+          "lineHeight": "28px"
+        },
+        "2xl": {
+          "size": "24px",
+          "lineHeight": "32px"
+        },
+        "3xl": {
+          "size": "30px",
+          "lineHeight": "36px"
+        },
+        "4xl": {
+          "size": "36px",
+          "lineHeight": "40px"
+        },
+        "display-1": {
+          "size": "48px",
+          "lineHeight": "52px"
+        },
+        "display-2": {
+          "size": "60px",
+          "lineHeight": "64px"
+        }
+      },
+      "intents": {
+        "headingMajor": {
+          "slot": "display",
+          "size": "2xl",
+          "weight": "bold"
+        },
+        "headingMinor": {
+          "slot": "display",
+          "size": "lg",
+          "weight": "bold"
+        },
+        "bodyEmphasis": {
+          "slot": "body",
+          "size": "base",
+          "weight": "medium"
+        },
+        "bodyDefault": {
+          "slot": "body",
+          "size": "sm",
+          "weight": "normal"
+        },
+        "bodyQuiet": {
+          "slot": "body",
+          "size": "sm",
+          "weight": "normal"
+        },
+        "caption": {
+          "slot": "body",
+          "size": "xs",
+          "weight": "normal"
+        },
+        "numeric": {
+          "slot": "mono",
+          "size": "sm",
+          "weight": "medium"
+        }
+      }
+    },
+    "motion": {
+      "durations": {
+        "instant": "0ms",
+        "fast": "var(--transition-fast)",
+        "normal": "var(--transition-normal)",
+        "slow": "var(--transition-slow)",
+        "dramatic": "160ms"
+      },
+      "easings": {
+        "linear": "linear",
+        "standard": "var(--transition-timing)",
+        "emphasized": "linear",
+        "spring": "linear"
+      },
+      "shapes": {
+        "modalEnter": "rotate(-3deg) translateY(24px)",
+        "modalExit": "rotate(-3deg) translateY(24px)",
+        "pageEnter": "translateX(-24px)",
+        "popoverEnter": "rotate(-2deg)",
+        "popoverExit": "rotate(-2deg)",
+        "toastEnter": "translateX(32px) rotate(2deg)",
+        "toastExit": "translateX(32px) rotate(2deg)"
+      }
+    },
+    "iconography": {
+      "family": "phosphor-fill",
+      "strokeWidth": "2.5",
+      "defaultSize": "18px"
+    },
+    "elevation": {
+      "cardElevation": "var(--shadow-sm)",
+      "popoverElevation": "var(--shadow-main)",
+      "dialogElevation": "var(--shadow-lg)",
+      "toastElevation": "var(--shadow-main)",
+      "interactiveElevation": "var(--shadow-sm)",
+      "pressedElevation": "var(--shadow-active)"
+    },
+    "geometry": {
+      "radiusContainer": "var(--radius-sm)",
+      "radiusInteractive": "var(--radius-sm)",
+      "radiusPill": "var(--radius-none)",
+      "cornerShape": "notch",
+      "cornerShapePill": "notch",
+      "borderHairline": "2px",
+      "borderStandard": "var(--border-width)",
+      "borderHeavy": "var(--border-width-thick)",
+      "borderStyle": "solid",
+      "borderStyleInteractive": "solid"
+    },
+    "colors": {
+      "primary": "#c8101e",
+      "primary-hover": "#a00c18",
+      "primary-foreground": "#fff3dc",
+      "secondary": "#111111",
+      "secondary-hover": "#2a2a2a",
+      "secondary-foreground": "#f3e6c8",
+      "accent": "#e8d9b0",
+      "accent-foreground": "#111111",
+      "muted": "#e6d8b4",
+      "muted-foreground": "#3f3826",
+      "background": "#f3e6c8",
+      "foreground": "#111111",
+      "card": "#faf0d8",
+      "card-foreground": "#111111",
+      "surface": "#ecddb8",
+      "border": "#111111",
+      "input": "#111111",
+      "ring": "#c8101e",
+      "table-header": "#ecddb8",
+      "table-border": "#111111",
+      "table-row-hover": "#f3e6c8",
+      "surface-hover": "#e3d3a8",
+      "border-hover": "#c8101e",
+      "placeholder": "#5f563c",
+      "error": "#b00c18",
+      "error-foreground": "#ffffff",
+      "success": "#1d6a3a",
+      "success-foreground": "#ffffff",
+      "warning": "#e8a20c",
+      "warning-foreground": "#111111",
+      "info": "#1a3a6a",
+      "info-foreground": "#ffffff",
+      "scrim": "rgba(0, 0, 0, 0.6)"
+    },
+    "radii": {
+      "none": "0px",
+      "sm": "6px",
+      "md": "6px",
+      "lg": "10px",
+      "xl": "14px",
+      "full": "0px"
+    },
+    "shadows": {
+      "main": "6px 6px 0 0 #111111",
+      "sm": "3px 3px 0 0 #111111",
+      "lg": "10px 10px 0 0 #111111",
+      "inner": "inset 3px 3px 0 0 rgba(17,17,17,0.2)",
+      "none": "none",
+      "hover": "8px 8px 0 0 #c8101e",
+      "active": "1px 1px 0 0 #111111"
+    },
+    "typography": {
+      "border-width": "4px",
+      "border-width-thin": "2px",
+      "border-width-thick": "6px",
+      "font-family": "\"Roboto Condensed\", \"Arial Narrow\", sans-serif",
+      "font-weight-normal": "400",
+      "font-weight-medium": "500",
+      "font-weight-bold": "700",
+      "letter-spacing": "0em",
+      "line-height": "1.4",
+      "icon-color": "currentColor",
+      "transition-fast": "50ms",
+      "transition-normal": "90ms",
+      "transition-slow": "140ms",
+      "transition-timing": "linear",
+      "hover-scale": "1.0",
+      "hover-translate-y": "-2px",
+      "hover-translate-x": "-2px",
+      "active-scale": "1.0",
+      "active-translate-y": "2px",
+      "focus-ring-width": "3px",
+      "focus-ring-offset": "2px",
+      "focus-ring-color": "#c8101e"
+    },
+    "surface": {
+      "cardImage": "none",
+      "pageImage": "radial-gradient(rgba(17,17,17,0.12) 1.2px, transparent 1.6px)",
+      "pageImageSize": "7px 7px"
+    }
+  },
+  "variants": {
+    "dark": {
+      "colors": {
+        "primary": "#ff4a55",
+        "primary-hover": "#ff6a73",
+        "primary-foreground": "#140204",
+        "secondary": "#f3e6c8",
+        "secondary-hover": "#ffffff",
+        "secondary-foreground": "#111111",
+        "accent": "#e8d9b0",
+        "accent-foreground": "#111111",
+        "muted": "#2b2622",
+        "muted-foreground": "#d8ccae",
+        "background": "#14110f",
+        "foreground": "#f3e6c8",
+        "card": "#1e1a17",
+        "card-foreground": "#f3e6c8",
+        "surface": "#191512",
+        "border": "#f3e6c8",
+        "input": "#f3e6c8",
+        "ring": "#ff4a55",
+        "table-header": "#191512",
+        "table-border": "#f3e6c8",
+        "table-row-hover": "#24201c",
+        "surface-hover": "#2e2924",
+        "border-hover": "#ff4a55",
+        "placeholder": "#a39878",
+        "error": "#ff6b75",
+        "error-foreground": "#190204",
+        "success": "#4ed68a",
+        "success-foreground": "#03170b",
+        "warning": "#f0b030",
+        "warning-foreground": "#111111",
+        "info": "#7fa6e8",
+        "info-foreground": "#051226",
+        "scrim": "rgba(0, 0, 0, 0.7)"
+      },
+      "shadows": {
+        "main": "6px 6px 0 0 #ff4a55",
+        "sm": "3px 3px 0 0 #ff4a55",
+        "lg": "10px 10px 0 0 #ff4a55",
+        "inner": "inset 3px 3px 0 0 rgba(243,230,200,0.2)",
+        "none": "none",
+        "hover": "8px 8px 0 0 #f3e6c8",
+        "active": "1px 1px 0 0 #ff4a55"
+      },
+      "typography": {
+        "border-width": "4px",
+        "border-width-thin": "2px",
+        "border-width-thick": "6px",
+        "font-family": "\"Roboto Condensed\", \"Arial Narrow\", sans-serif",
+        "font-weight-normal": "400",
+        "font-weight-medium": "500",
+        "font-weight-bold": "700",
+        "letter-spacing": "0em",
+        "line-height": "1.4",
+        "icon-color": "currentColor",
+        "transition-fast": "50ms",
+        "transition-normal": "90ms",
+        "transition-slow": "140ms",
+        "transition-timing": "linear",
+        "hover-scale": "1.0",
+        "hover-translate-y": "-2px",
+        "hover-translate-x": "-2px",
+        "active-scale": "1.0",
+        "active-translate-y": "2px",
+        "focus-ring-width": "3px",
+        "focus-ring-offset": "2px",
+        "focus-ring-color": "#ff4a55"
+      },
+      "radii": {
+        "none": "0px",
+        "sm": "6px",
+        "md": "6px",
+        "lg": "10px",
+        "xl": "14px",
+        "full": "0px"
+      },
+      "surface": {
+        "cardImage": "none",
+        "pageImage": "radial-gradient(rgba(243,230,200,0.08) 1.2px, transparent 1.6px)",
+        "pageImageSize": "7px 7px"
+      }
+    }
+  }
+}