@almadar/core 10.111.0 → 10.113.0

package/themes/game-rpg.json

@@ -1,5 +1,6 @@
 {
   "name": "game-rpg",
+  "displayName": "Game: RPG",
   "tokens": {},
   "variants": {
     "dark": {
@@ -35,7 +36,7 @@
         "sectionGap": "32px"
       },
       "typeScale": {
-        "displayFamily": "var(--font-family)",
+        "displayFamily": "\"MedievalSharp\", Georgia, serif",
         "bodyFamily": "var(--font-family)",
         "monoFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
         "scale": {
@@ -116,7 +117,12 @@
             "size": "sm",
             "weight": "medium"
           }
-        }
+        },
+        "fontImport": "https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap",
+        "headingWeight": "400",
+        "headingTransform": "none",
+        "headingTracking": "0.02em",
+        "headingStyle": "normal"
       },
       "motion": {
         "durations": {
@@ -128,26 +134,41 @@
         },
         "easings": {
           "linear": "linear",
-          "standard": "var(--transition-timing)",
+          "standard": "cubic-bezier(0.4, 0, 0.2, 1)",
           "emphasized": "cubic-bezier(0.2, 0, 0, 1)",
           "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
+        },
+        "shapes": {
+          "modalEnter": "perspective(800px) rotateX(-20deg)",
+          "modalExit": "perspective(800px) rotateX(-20deg)",
+          "pageEnter": "translateY(8px)",
+          "popoverEnter": "scale(0.95)",
+          "popoverExit": "scale(0.95)",
+          "toastEnter": "translateY(-16px)",
+          "toastExit": "translateY(-16px)"
         }
       },
       "iconography": {
-        "family": "lucide",
-        "strokeWidth": "1.75",
+        "family": "phosphor-duotone",
+        "strokeWidth": "1.5",
         "defaultSize": "16px"
       },
       "elevation": {
-        "cardElevation": "var(--shadow-sm)",
-        "popoverElevation": "var(--shadow-main)",
+        "cardElevation": "var(--shadow-main)",
+        "popoverElevation": "var(--shadow-lg)",
         "dialogElevation": "var(--shadow-lg)",
-        "toastElevation": "var(--shadow-main)"
+        "toastElevation": "var(--shadow-main)",
+        "interactiveElevation": "var(--shadow-sm)",
+        "pressedElevation": "var(--shadow-inner)"
       },
       "geometry": {
-        "radiusContainer": "var(--radius-md)",
+        "radiusContainer": "var(--radius-lg)",
         "radiusInteractive": "var(--radius-md)",
         "radiusPill": "var(--radius-full)",
+        "cornerShape": "scoop",
+        "cornerShapePill": "scoop",
+        "borderStyle": "ridge",
+        "borderStyleInteractive": "ridge",
         "borderHairline": "1px",
         "borderStandard": "var(--border-width)",
         "borderHeavy": "var(--border-width-thick)"
@@ -178,29 +199,30 @@
         "warning": "#f0c869",
         "warning-foreground": "#1a1108",
         "info": "#d99a4e",
-        "info-foreground": "#1a1108"
+        "info-foreground": "#1a1108",
+        "scrim": "rgba(0, 0, 0, 0.7)"
       },
       "radii": {
         "none": "0px",
-        "sm": "3px",
-        "md": "5px",
-        "lg": "8px",
-        "xl": "12px",
+        "sm": "6px",
+        "md": "10px",
+        "lg": "14px",
+        "xl": "18px",
         "full": "9999px"
       },
       "shadows": {
-        "main": "0 4px 14px rgba(240, 200, 105, 0.14), 0 1px 3px rgba(0, 0, 0, 0.45)",
-        "sm": "0 2px 4px rgba(0, 0, 0, 0.3)",
-        "lg": "0 8px 30px rgba(240, 200, 105, 0.2), 0 4px 10px rgba(0, 0, 0, 0.4)",
-        "inner": "inset 0 1px 3px rgba(0, 0, 0, 0.45)",
+        "main": "inset 0 0 0 1px rgba(240,200,105,0.30), 0 4px 10px rgba(0,0,0,0.55)",
+        "sm": "inset 0 0 0 1px rgba(240,200,105,0.25), 0 2px 5px rgba(0,0,0,0.5)",
+        "lg": "inset 0 0 0 1px rgba(240,200,105,0.35), 0 12px 28px rgba(0,0,0,0.65)",
+        "inner": "inset 0 2px 6px rgba(0,0,0,0.55)",
         "none": "none",
-        "hover": "0 12px 40px rgba(240, 200, 105, 0.25), 0 4px 12px rgba(0, 0, 0, 0.35)",
-        "active": "0 2px 8px rgba(0, 0, 0, 0.4)"
+        "hover": "inset 0 0 0 1px rgba(240,200,105,0.5), 0 6px 16px rgba(240,200,105,0.22)",
+        "active": "inset 0 3px 6px rgba(0,0,0,0.6)"
       },
       "typography": {
-        "border-width": "1px",
-        "border-width-thin": "1px",
-        "border-width-thick": "2px",
+        "border-width": "3px",
+        "border-width-thin": "2px",
+        "border-width-thick": "4px",
         "game-panel-border-image": "url('https://almadar-kflow-assets.web.app/shared/ui-game-shell/kenney-ui-adventure-pack/ui/panel_brown.png')",
         "game-panel-border-image-slice": "26 fill",
         "game-panel-border-image-width": "22px",
@@ -224,6 +246,11 @@
         "focus-ring-width": "2px",
         "focus-ring-offset": "2px",
         "focus-ring-color": "#f0c869"
+      },
+      "surface": {
+        "cardImage": "linear-gradient(180deg, rgba(240,200,105,0.10) 0%, rgba(0,0,0,0.12) 100%)",
+        "pageImage": "radial-gradient(ellipse at 50% 0%, rgba(240,200,105,0.10), transparent 60%)",
+        "pageImageSize": "100% 100%"
       }
     }
   }

package/themes/game-sci-fi.json

@@ -1,5 +1,6 @@
 {
   "name": "game-sci-fi",
+  "displayName": "Game: Sci-Fi",
   "tokens": {},
   "variants": {
     "dark": {
@@ -35,8 +36,8 @@
         "sectionGap": "32px"
       },
       "typeScale": {
-        "displayFamily": "var(--font-family)",
-        "bodyFamily": "var(--font-family)",
+        "displayFamily": "\"Orbitron\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+        "bodyFamily": "\"Rajdhani\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
         "monoFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
         "scale": {
           "xs": {
@@ -116,7 +117,12 @@
             "size": "sm",
             "weight": "medium"
           }
-        }
+        },
+        "fontImport": "https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&display=swap",
+        "headingWeight": "700",
+        "headingTransform": "uppercase",
+        "headingTracking": "0.14em",
+        "headingStyle": "normal"
       },
       "motion": {
         "durations": {
@@ -128,26 +134,41 @@
         },
         "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)"
+          "standard": "cubic-bezier(0.25, 0, 0.35, 1)",
+          "emphasized": "cubic-bezier(0.25, 0, 0.35, 1)",
+          "spring": "cubic-bezier(0.25, 0, 0.35, 1)"
+        },
+        "shapes": {
+          "modalEnter": "scaleY(0.04)",
+          "modalExit": "scaleY(0.04)",
+          "pageEnter": "translateX(-12px)",
+          "popoverEnter": "scaleY(0.1)",
+          "popoverExit": "scaleY(0.1)",
+          "toastEnter": "translateX(24px)",
+          "toastExit": "translateX(24px)"
         }
       },
       "iconography": {
-        "family": "lucide",
-        "strokeWidth": "1.75",
+        "family": "tabler",
+        "strokeWidth": "1.5",
         "defaultSize": "16px"
       },
       "elevation": {
         "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)",
-        "radiusInteractive": "var(--radius-md)",
+        "radiusInteractive": "var(--radius-sm)",
         "radiusPill": "var(--radius-full)",
+        "cornerShape": "bevel",
+        "cornerShapePill": "bevel",
+        "borderStyle": "solid",
+        "borderStyleInteractive": "solid",
         "borderHairline": "1px",
         "borderStandard": "var(--border-width)",
         "borderHeavy": "var(--border-width-thick)"
@@ -178,24 +199,25 @@
         "warning": "#ffcc4d",
         "warning-foreground": "#1a1408",
         "info": "#3ea6ff",
-        "info-foreground": "#071018"
+        "info-foreground": "#071018",
+        "scrim": "rgba(0, 0, 0, 0.7)"
       },
       "radii": {
         "none": "0px",
-        "sm": "4px",
-        "md": "6px",
-        "lg": "8px",
-        "xl": "12px",
+        "sm": "2px",
+        "md": "4px",
+        "lg": "6px",
+        "xl": "8px",
         "full": "9999px"
       },
       "shadows": {
-        "main": "0 4px 14px rgba(62, 166, 255, 0.14), 0 1px 3px rgba(0, 0, 0, 0.35)",
-        "sm": "0 2px 4px rgba(62, 166, 255, 0.08)",
-        "lg": "0 8px 30px rgba(62, 166, 255, 0.20), 0 4px 10px rgba(0, 0, 0, 0.30)",
-        "inner": "inset 0 1px 3px rgba(0, 0, 0, 0.35)",
+        "main": "0 0 14px rgba(62,166,255,0.35), inset 0 0 0 1px rgba(62,166,255,0.3)",
+        "sm": "0 0 6px rgba(62,166,255,0.3)",
+        "lg": "0 0 28px rgba(62,166,255,0.45), inset 0 0 0 1px rgba(62,166,255,0.4)",
+        "inner": "inset 0 0 10px rgba(62,166,255,0.2)",
         "none": "none",
-        "hover": "0 12px 40px rgba(62, 166, 255, 0.25), 0 4px 12px rgba(79, 195, 247, 0.12)",
-        "active": "0 2px 8px rgba(62, 166, 255, 0.18)"
+        "hover": "0 0 22px rgba(62,166,255,0.55), inset 0 0 0 1px rgba(62,166,255,0.5)",
+        "active": "0 0 4px rgba(62,166,255,0.5), inset 0 0 14px rgba(62,166,255,0.3)"
       },
       "typography": {
         "border-width": "1px",
@@ -204,7 +226,7 @@
         "game-panel-border-image": "url('https://almadar-kflow-assets.web.app/shared/ui-game-shell/kenney-ui-pack-sci-fi/ui/metalPanel_blue.png')",
         "game-panel-border-image-slice": "26 fill",
         "game-panel-border-image-width": "22px",
-        "font-family": "\"Kenney Future\", \"Orbitron\", \"Rajdhani\", ui-sans-serif, system-ui, sans-serif",
+        "font-family": "\"Rajdhani\", \"Kenney Future\", ui-sans-serif, system-ui, sans-serif",
         "font-weight-normal": "400",
         "font-weight-medium": "500",
         "font-weight-bold": "700",
@@ -223,6 +245,11 @@
         "focus-ring-width": "2px",
         "focus-ring-offset": "2px",
         "focus-ring-color": "#3ea6ff"
+      },
+      "surface": {
+        "cardImage": "linear-gradient(180deg, rgba(62,166,255,0.10), rgba(62,166,255,0.00) 60%)",
+        "pageImage": "repeating-linear-gradient(0deg, rgba(62,166,255,0.06) 0px, rgba(62,166,255,0.06) 1px, transparent 1px, transparent 3px)",
+        "pageImageSize": "auto"
       }
     }
   }

package/themes/game-ui-pack.json

@@ -1,5 +1,6 @@
 {
   "name": "game-ui-pack",
+  "displayName": "Game: Flat UI",
   "tokens": {},
   "variants": {
     "dark": {
@@ -116,7 +117,12 @@
             "size": "sm",
             "weight": "medium"
           }
-        }
+        },
+        "headingWeight": "600",
+        "headingTransform": "none",
+        "headingTracking": "0.02em",
+        "headingStyle": "normal",
+        "headingShadow": "none"
       },
       "motion": {
         "durations": {
@@ -128,26 +134,41 @@
         },
         "easings": {
           "linear": "linear",
-          "standard": "var(--transition-timing)",
-          "emphasized": "cubic-bezier(0.2, 0, 0, 1)",
+          "standard": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+          "emphasized": "cubic-bezier(0.34, 1.56, 0.64, 1)",
           "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
+        },
+        "shapes": {
+          "modalEnter": "translateY(-24px)",
+          "modalExit": "translateY(-24px)",
+          "pageEnter": "translateY(12px)",
+          "popoverEnter": "scale(0.9)",
+          "popoverExit": "scale(0.9)",
+          "toastEnter": "translateY(-20px)",
+          "toastExit": "translateY(-20px)"
         }
       },
       "iconography": {
         "family": "lucide",
-        "strokeWidth": "1.75",
+        "strokeWidth": "2.5",
         "defaultSize": "16px"
       },
       "elevation": {
         "cardElevation": "var(--shadow-sm)",
         "popoverElevation": "var(--shadow-main)",
         "dialogElevation": "var(--shadow-lg)",
-        "toastElevation": "var(--shadow-main)"
+        "toastElevation": "var(--shadow-main)",
+        "interactiveElevation": "var(--shadow-main)",
+        "pressedElevation": "var(--shadow-active)"
       },
       "geometry": {
-        "radiusContainer": "var(--radius-md)",
+        "radiusContainer": "var(--radius-lg)",
         "radiusInteractive": "var(--radius-md)",
         "radiusPill": "var(--radius-full)",
+        "cornerShape": "round",
+        "cornerShapePill": "round",
+        "borderStyle": "none",
+        "borderStyleInteractive": "none",
         "borderHairline": "1px",
         "borderStandard": "var(--border-width)",
         "borderHeavy": "var(--border-width-thick)"
@@ -178,24 +199,25 @@
         "warning": "#ffb703",
         "warning-foreground": "#241a00",
         "info": "#2ea7e1",
-        "info-foreground": "#06202c"
+        "info-foreground": "#06202c",
+        "scrim": "rgba(0, 0, 0, 0.7)"
       },
       "radii": {
         "none": "0px",
-        "sm": "4px",
-        "md": "6px",
-        "lg": "8px",
-        "xl": "12px",
+        "sm": "10px",
+        "md": "12px",
+        "lg": "16px",
+        "xl": "22px",
         "full": "9999px"
       },
       "shadows": {
-        "main": "0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4)",
-        "sm": "0 2px 4px rgba(0, 0, 0, 0.25)",
-        "lg": "0 8px 30px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.3)",
-        "inner": "inset 0 1px 3px rgba(0, 0, 0, 0.35)",
+        "main": "0 4px 0 0 rgba(0,0,0,0.45)",
+        "sm": "0 2px 0 0 rgba(0,0,0,0.45)",
+        "lg": "0 6px 0 0 rgba(0,0,0,0.5)",
+        "inner": "inset 0 2px 0 0 rgba(0,0,0,0.35)",
         "none": "none",
-        "hover": "0 12px 40px rgba(46, 167, 225, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3)",
-        "active": "0 2px 8px rgba(0, 0, 0, 0.3)"
+        "hover": "0 6px 0 0 rgba(0,0,0,0.45)",
+        "active": "0 1px 0 0 rgba(0,0,0,0.5)"
       },
       "typography": {
         "border-width": "1px",
@@ -224,7 +246,8 @@
         "focus-ring-width": "2px",
         "focus-ring-offset": "2px",
         "focus-ring-color": "#2ea7e1"
-      }
+      },
+      "surface": {}
     }
   }
 }