@exponential_app/eui 0.0.0-stage → 0.2.0

package/themes/exponential.theme.json

@@ -0,0 +1,768 @@
+{
+  "$comment": "AUTO-GENERATED by packages/exponential-ui/scripts/generate.ts — do not edit.\nSource of truth: packages/exponential-ui/themes/*.theme.json, themes/exponential.recipes.json, catalog/recipes.json, catalog/tokens.json (+ packages/design-tokens/tokens.json and packages/ui/src/styles.css for the exponential theme). Composed by scripts/generate-themes.ts composeExponential(): edit themes/exponential.recipes.json, packages/design-tokens/tokens.json or packages/ui/src/styles.css and regenerate.",
+  "$schema": "https://ui.exponential.at/schemas/theme/v1.json",
+  "id": "exponential",
+  "name": "Exponential",
+  "extends": "neutral",
+  "modes": {
+    "light": {
+      "color": {
+        "background": "#ffffff",
+        "foreground": "#0a0a0a",
+        "card": "#ffffff",
+        "cardForeground": "#0a0a0a",
+        "popover": "#ffffff",
+        "popoverForeground": "#0a0a0a",
+        "primary": "#171717",
+        "primaryForeground": "#fafafa",
+        "secondary": "#f5f5f5",
+        "secondaryForeground": "#171717",
+        "muted": "#f5f5f5",
+        "mutedForeground": "#737373",
+        "accent": "#f5f5f5",
+        "accentForeground": "#171717",
+        "destructive": "#e7000b",
+        "border": "#e5e5e5",
+        "input": "#e5e5e5",
+        "ring": "#a1a1a1",
+        "chart1": "#f54900",
+        "chart2": "#009689",
+        "chart3": "#104e64",
+        "chart4": "#ffb900",
+        "chart5": "#fe9a00",
+        "success": "#22c55e",
+        "warning": "#facc15",
+        "info": "#3b82f6",
+        "warningForeground": "#1c1917",
+        "infoForeground": "#ffffff",
+        "successForeground": "#ffffff",
+        "destructiveForeground": "#ffffff"
+      },
+      "shadow": {
+        "none": [],
+        "sm": [
+          {
+            "x": 0,
+            "y": 1,
+            "blur": 2,
+            "spread": 0,
+            "color": "#00000014"
+          }
+        ],
+        "md": [
+          {
+            "x": 0,
+            "y": 4,
+            "blur": 12,
+            "spread": -2,
+            "color": "#00000014"
+          }
+        ],
+        "lg": [
+          {
+            "x": 0,
+            "y": 12,
+            "blur": 32,
+            "spread": -8,
+            "color": "#00000014"
+          }
+        ],
+        "xl": [
+          {
+            "x": 0,
+            "y": 20,
+            "blur": 48,
+            "spread": -12,
+            "color": "#00000014"
+          }
+        ]
+      }
+    },
+    "dark": {
+      "color": {
+        "background": "#0a0a0a",
+        "foreground": "#fafafa",
+        "card": "#ffffff0f",
+        "cardForeground": "#fafafa",
+        "popover": "#171717",
+        "popoverForeground": "#fafafa",
+        "primary": "#e5e5e5",
+        "primaryForeground": "#171717",
+        "secondary": "#ffffff0f",
+        "secondaryForeground": "#fafafa",
+        "muted": "#ffffff0a",
+        "mutedForeground": "#a1a1a1",
+        "accent": "#ffffff1c",
+        "accentForeground": "#fafafa",
+        "destructive": "#ff6467",
+        "border": "#ffffff1a",
+        "input": "#ffffff26",
+        "ring": "#737373",
+        "chart1": "#1447e6",
+        "chart2": "#00bc7d",
+        "chart3": "#fe9a00",
+        "chart4": "#ad46ff",
+        "chart5": "#ff2056",
+        "success": "#22c55e",
+        "warning": "#facc15",
+        "info": "#3b82f6",
+        "warningForeground": "#1c1917",
+        "infoForeground": "#ffffff",
+        "successForeground": "#052e16",
+        "destructiveForeground": "#0a0a0a"
+      },
+      "shadow": {
+        "none": [],
+        "sm": [
+          {
+            "x": 0,
+            "y": 1,
+            "blur": 2,
+            "spread": 0,
+            "color": "#00000066"
+          }
+        ],
+        "md": [
+          {
+            "x": 0,
+            "y": 4,
+            "blur": 12,
+            "spread": -2,
+            "color": "#00000066"
+          }
+        ],
+        "lg": [
+          {
+            "x": 0,
+            "y": 12,
+            "blur": 32,
+            "spread": -8,
+            "color": "#00000066"
+          }
+        ],
+        "xl": [
+          {
+            "x": 0,
+            "y": 20,
+            "blur": 48,
+            "spread": -12,
+            "color": "#00000066"
+          }
+        ]
+      }
+    }
+  },
+  "tokens": {
+    "spacing": {
+      "none": 0,
+      "xxs": 2,
+      "xs": 4,
+      "sm": 8,
+      "md": 12,
+      "lg": 16,
+      "xl": 24,
+      "xl2": 32,
+      "xl3": 48
+    },
+    "radius": {
+      "none": 0,
+      "sm": 8,
+      "md": 10,
+      "lg": 12,
+      "xl": 16,
+      "xl2": 20,
+      "xl3": 24,
+      "full": 9999
+    },
+    "type": {
+      "size": {
+        "xs": 12,
+        "sm": 14,
+        "base": 16,
+        "lg": 18,
+        "xl": 20,
+        "xl2": 24,
+        "xl3": 30
+      },
+      "lineHeight": {
+        "xs": 16,
+        "sm": 20,
+        "base": 24,
+        "lg": 28,
+        "xl": 28,
+        "xl2": 32,
+        "xl3": 36
+      },
+      "weight": {
+        "regular": 400,
+        "medium": 500,
+        "semibold": 600,
+        "bold": 700
+      },
+      "family": {
+        "sans": "Inter",
+        "mono": "ui-monospace",
+        "serif": "ui-serif"
+      }
+    },
+    "control": {
+      "buttonSm": 24,
+      "buttonMd": 32,
+      "buttonLg": 36,
+      "buttonIcon": 32,
+      "input": 36,
+      "textarea": 64,
+      "row": 32,
+      "rowCompact": 28,
+      "pill": 24,
+      "badge": 20,
+      "chip": 24,
+      "toggle": 32,
+      "switch": 20,
+      "checkbox": 16,
+      "slider": 16,
+      "progress": 8,
+      "meter": 8,
+      "avatarSm": 24,
+      "avatarMd": 32,
+      "avatarLg": 40,
+      "iconSm": 16,
+      "iconMd": 20,
+      "iconLg": 24,
+      "hairline": 1,
+      "appBar": 48,
+      "tabBar": 56,
+      "toast": 56
+    },
+    "opacity": {
+      "primary": 1,
+      "secondary": 0.7,
+      "tertiary": 0.5,
+      "quaternary": 0.3,
+      "disabled": 0.5
+    },
+    "border": {
+      "none": 0,
+      "hairline": 1,
+      "thick": 2
+    },
+    "motion": {
+      "fast": 120,
+      "standard": 180,
+      "slow": 280
+    },
+    "ease": {
+      "standard": [
+        0.2,
+        0,
+        0,
+        1
+      ],
+      "decelerate": [
+        0,
+        0,
+        0.2,
+        1
+      ],
+      "accelerate": [
+        0.3,
+        0,
+        1,
+        1
+      ]
+    },
+    "scale": {
+      "press": 0.97,
+      "popoverFrom": 0.96
+    }
+  },
+  "fonts": {
+    "Inter": {
+      "fallback": "ui-sans-serif, system-ui, sans-serif",
+      "weights": [
+        400,
+        500,
+        600,
+        700
+      ],
+      "source": "host"
+    },
+    "ui-monospace": {
+      "fallback": "SFMono-Regular, Menlo, Consolas, monospace",
+      "source": "system"
+    },
+    "ui-serif": {
+      "fallback": "Georgia, serif",
+      "source": "system"
+    }
+  },
+  "recipes": {
+    "Card": {
+      "root": [
+        {
+          "style": {
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ]
+    },
+    "Group": {
+      "body": [
+        {
+          "style": {
+            "backgroundColor": "$color.card"
+          }
+        }
+      ]
+    },
+    "Section": {
+      "header": [
+        {
+          "style": {
+            "backgroundColor": "$color.muted"
+          }
+        }
+      ]
+    },
+    "Button": {
+      "root": [
+        {
+          "style": {
+            "boxShadow": "$shadow.none",
+            "fontWeight": "$type.weight.medium"
+          }
+        },
+        {
+          "when": {
+            "variant": "outline"
+          },
+          "style": {
+            "backgroundColor": "$color.secondary",
+            "borderColor": "$color.border",
+            "boxShadow": "$shadow.none"
+          }
+        },
+        {
+          "when": {
+            "variant": "outline",
+            "state": "hover"
+          },
+          "style": {
+            "backgroundColor": "$color.accent"
+          }
+        },
+        {
+          "when": {
+            "variant": "secondary"
+          },
+          "style": {
+            "backgroundColor": "$color.secondary"
+          }
+        }
+      ]
+    },
+    "Input": {
+      "field": [
+        {
+          "style": {
+            "backgroundColor": "$color.card",
+            "borderColor": "$color.input",
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ]
+    },
+    "Textarea": {
+      "field": [
+        {
+          "style": {
+            "backgroundColor": "$color.card",
+            "borderColor": "$color.input",
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ]
+    },
+    "Select": {
+      "trigger": [
+        {
+          "style": {
+            "backgroundColor": "$color.card",
+            "borderColor": "$color.input",
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ]
+    },
+    "DatePicker": {
+      "trigger": [
+        {
+          "style": {
+            "backgroundColor": "$color.card",
+            "borderColor": "$color.input",
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ]
+    },
+    "Composer": {
+      "root": [
+        {
+          "style": {
+            "backgroundColor": "$color.card",
+            "borderColor": "$color.border",
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ]
+    },
+    "Tabs": {
+      "list": [
+        {
+          "style": {
+            "backgroundColor": "$color.muted"
+          }
+        }
+      ],
+      "tab": [
+        {
+          "when": {
+            "state": "selected"
+          },
+          "style": {
+            "backgroundColor": "$color.accent",
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ]
+    },
+    "Segmented": {
+      "root": [
+        {
+          "when": {
+            "variant": "bar"
+          },
+          "style": {
+            "backgroundColor": "$color.card"
+          }
+        }
+      ],
+      "item": [
+        {
+          "when": {
+            "variant": "segmented",
+            "state": "selected"
+          },
+          "style": {
+            "backgroundColor": "$color.accent",
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ]
+    },
+    "Chip": {
+      "root": [
+        {
+          "style": {
+            "backgroundColor": "$color.secondary",
+            "borderColor": "$color.border"
+          }
+        },
+        {
+          "when": {
+            "shape": "rect"
+          },
+          "style": {
+            "backgroundColor": "$color.secondary"
+          }
+        },
+        {
+          "when": {
+            "selected": true
+          },
+          "style": {
+            "backgroundColor": "$color.accent",
+            "borderColor": "$color.ring"
+          }
+        }
+      ]
+    },
+    "Row": {
+      "root": [
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "backgroundColor": "$color.secondary"
+          }
+        },
+        {
+          "when": {
+            "selected": true
+          },
+          "style": {
+            "backgroundColor": "$color.accent"
+          }
+        }
+      ]
+    },
+    "Menu": {
+      "item": [
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "backgroundColor": "$color.secondary"
+          }
+        },
+        {
+          "when": {
+            "state": "selected"
+          },
+          "style": {
+            "backgroundColor": "$color.accent"
+          }
+        }
+      ]
+    },
+    "Alert": {
+      "root": [
+        {
+          "style": {
+            "backgroundColor": "$color.card"
+          }
+        }
+      ]
+    },
+    "Dialog": {
+      "content": [
+        {
+          "style": {
+            "backgroundColor": "$color.popover",
+            "borderRadius": "$radius.xl"
+          }
+        }
+      ]
+    },
+    "Drawer": {
+      "content": [
+        {
+          "style": {
+            "backgroundColor": "$color.popover",
+            "borderRadius": "$radius.xl3"
+          }
+        }
+      ]
+    },
+    "Checkbox": {
+      "box": [
+        {
+          "style": {
+            "backgroundColor": "$color.card",
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ],
+      "check": [
+        {
+          "style": {
+            "width": 14,
+            "height": 14
+          }
+        }
+      ]
+    },
+    "Radio": {
+      "item": [
+        {
+          "style": {
+            "backgroundColor": "$color.card",
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ]
+    },
+    "ChoiceTiles": {
+      "tile": [
+        {
+          "style": {
+            "backgroundColor": "$color.card"
+          }
+        },
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "backgroundColor": "$color.secondary"
+          }
+        },
+        {
+          "when": {
+            "state": "selected"
+          },
+          "style": {
+            "backgroundColor": "$color.accent"
+          }
+        }
+      ]
+    },
+    "Switch": {
+      "track": [
+        {
+          "style": {
+            "backgroundColor": "$color.input"
+          }
+        }
+      ],
+      "thumb": [
+        {
+          "style": {
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ]
+    },
+    "Skeleton": {
+      "root": [
+        {
+          "style": {
+            "backgroundColor": "$color.secondary"
+          }
+        }
+      ]
+    },
+    "NumberField": {
+      "field": [
+        {
+          "style": {
+            "backgroundColor": "$color.card",
+            "borderColor": "$color.input",
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ]
+    },
+    "ChipInput": {
+      "field": [
+        {
+          "style": {
+            "backgroundColor": "$color.card",
+            "borderColor": "$color.input",
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ],
+      "chip": [
+        {
+          "style": {
+            "backgroundColor": "$color.accent",
+            "color": "$color.foreground"
+          }
+        }
+      ]
+    },
+    "TimePicker": {
+      "trigger": [
+        {
+          "style": {
+            "backgroundColor": "$color.card",
+            "borderColor": "$color.input",
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ],
+      "item": [
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "backgroundColor": "$color.secondary"
+          }
+        }
+      ]
+    },
+    "DateRangePicker": {
+      "trigger": [
+        {
+          "style": {
+            "backgroundColor": "$color.card",
+            "borderColor": "$color.input",
+            "boxShadow": "$shadow.none"
+          }
+        }
+      ]
+    },
+    "Toast": {
+      "root": [
+        {
+          "style": {
+            "backgroundColor": "$color.popover",
+            "borderColor": "$color.border",
+            "borderRadius": "$radius.xl"
+          }
+        }
+      ]
+    },
+    "CodeBlock": {
+      "root": [
+        {
+          "style": {
+            "backgroundColor": "$color.muted"
+          }
+        }
+      ]
+    },
+    "Table": {
+      "row": [
+        {
+          "when": {
+            "state": "hover"
+          },
+          "style": {
+            "backgroundColor": "$color.secondary"
+          }
+        },
+        {
+          "when": {
+            "striped": true
+          },
+          "style": {
+            "backgroundColor": "$color.card"
+          }
+        }
+      ]
+    },
+    "FileUpload": {
+      "dropzone": [
+        {
+          "style": {
+            "backgroundColor": "$color.card",
+            "borderColor": "$color.border"
+          }
+        },
+        {
+          "when": {
+            "state": "dragover"
+          },
+          "style": {
+            "backgroundColor": "$color.accent",
+            "borderColor": "$color.ring"
+          }
+        }
+      ]
+    },
+    "Sidebar": {
+      "sidebar": [
+        {
+          "style": {
+            "backgroundColor": "$color.card"
+          }
+        }
+      ]
+    }
+  }
+}