@ory/elements-react 1.0.0-next.25 → 1.0.0-next.28

package/tailwind/defaults.ts

@@ -0,0 +1,34 @@
+// Copyright © 2025 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { CustomThemeConfig } from "tailwindcss/types/config"
+import variables from "./generated/variables-processed.json"
+
+export default {
+  colors: {
+    ...variables.colors.light,
+    ...variables.colors.brand,
+    ...variables.colors.primitives,
+  },
+  backgroundColor: {
+    ...variables.colors.light,
+    ...variables.colors.brand,
+    ...variables.colors.primitives,
+  },
+  borderColor: {
+    ...variables.colors.light,
+    ...variables.colors.brand,
+    ...variables.colors.primitives,
+  },
+  ringColor: {
+    ...variables.colors.light,
+    ...variables.colors.brand,
+    ...variables.colors.primitives,
+  },
+  fill: {
+    ...variables.colors.light,
+    ...variables.colors.brand,
+    ...variables.colors.primitives,
+  },
+  borderRadius: variables.borderRadius,
+} satisfies Partial<CustomThemeConfig>

package/tailwind/generated/README.md

@@ -0,0 +1,2 @@
+Check `scripts/theme-variable-helper` for instructions on how to generate thes
+files!!

package/tailwind/generated/default-variables.css

@@ -0,0 +1,216 @@
+/* Copyright © 2025 Ory Corp */
+/* SPDX-License-Identifier: Apache-2.0 */
+
+:root {
+  --ui-100: #f1f5f9;
+  --ui-200: #e2e8f0;
+  --ui-300: #cbd5e1;
+  --ui-400: #94a3b8;
+  --ui-50: #f8fafc;
+  --ui-500: #64748b;
+  --ui-600: #475569;
+  --ui-700: #334155;
+  --ui-800: #1e293b;
+  --ui-900: #0f172a;
+  --ui-950: #020617;
+  --ui-black: #000000;
+  --ui-danger: #ef4444;
+  --ui-success: #22c55e;
+  --ui-transparent: #ffffff00;
+  --ui-warning: #eab308;
+  --ui-white: #ffffff;
+  --button-identifier-background-default: var(
+    --interface-background-brand-secondary
+  );
+  --button-identifier-background-hover: var(
+    --interface-background-brand-secondary-hover
+  );
+  --button-identifier-border-border-default: var(
+    --interface-border-brand-brand
+  );
+  --button-identifier-border-border-hover: var(--interface-border-brand-brand);
+  --button-identifier-foreground-default: var(
+    --interface-foreground-brand-on-secondary
+  );
+  --button-identifier-foreground-hover: var(
+    --interface-foreground-brand-on-secondary
+  );
+  --button-link-brand-brand: var(--interface-foreground-brand-primary);
+  --button-link-brand-brand-hover: var(--interface-foreground-default-primary);
+  --button-link-default-primary: var(--interface-foreground-default-primary);
+  --button-link-default-primary-hover: var(
+    --interface-foreground-brand-primary
+  );
+  --button-link-default-secondary: var(
+    --interface-foreground-default-secondary
+  );
+  --button-link-default-secondary-hover: var(
+    --interface-foreground-default-tertiary
+  );
+  --button-link-disabled-disabled: var(
+    --interface-foreground-disabled-disabled
+  );
+  --button-primary-background-default: var(
+    --interface-background-brand-primary
+  );
+  --button-primary-background-disabled: var(
+    --interface-background-disabled-disabled
+  );
+  --button-primary-background-hover: var(
+    --interface-background-brand-primary-hover
+  );
+  --button-primary-border-default: var(--interface-border-default-none);
+  --button-primary-border-disabled: var(--interface-border-disabled-disabled);
+  --button-primary-border-hover: var(--interface-border-default-none);
+  --button-primary-foreground-default: var(
+    --interface-foreground-brand-on-primary
+  );
+  --button-primary-foreground-disabled: var(
+    --interface-foreground-disabled-on-disabled
+  );
+  --button-primary-foreground-hover: var(
+    --interface-foreground-brand-on-primary
+  );
+  --button-secondary-background-default: var(
+    --interface-background-default-primary
+  );
+  --button-secondary-background-disabled: var(
+    --interface-background-disabled-disabled
+  );
+  --button-secondary-background-hover: var(
+    --interface-background-default-primary-hover
+  );
+  --button-secondary-border-default: var(--interface-border-default-primary);
+  --button-secondary-border-disabled: var(--interface-border-disabled-disabled);
+  --button-secondary-border-hover: var(--interface-border-default-primary);
+  --button-secondary-foreground-default: var(
+    --interface-foreground-default-primary
+  );
+  --button-secondary-foreground-disabled: var(
+    --interface-foreground-disabled-on-disabled
+  );
+  --button-secondary-foreground-hover: var(
+    --interface-foreground-default-secondary
+  );
+  --button-social-background-default: var(
+    --interface-background-default-primary
+  );
+  --button-social-background-disabled: var(
+    --interface-background-disabled-disabled
+  );
+  --button-social-background-generic-provider: var(
+    --interface-background-default-inverted
+  );
+  --button-social-background-hover: var(
+    --interface-background-default-primary-hover
+  );
+  --button-social-border-default: var(--interface-border-default-primary);
+  --button-social-border-disabled: var(--interface-border-disabled-disabled);
+  --button-social-border-generic-provider: var(--interface-border-default-none);
+  --button-social-border-hover: var(--interface-border-default-primary);
+  --button-social-foreground-default: var(
+    --interface-foreground-default-primary
+  );
+  --button-social-foreground-disabled: var(
+    --interface-foreground-disabled-on-disabled
+  );
+  --button-social-foreground-generic-provider: var(
+    --interface-foreground-default-inverted
+  );
+  --button-social-foreground-hover: var(
+    --interface-foreground-default-secondary
+  );
+  --checkbox-background-checked: var(--interface-background-brand-primary);
+  --checkbox-background-default: var(--interface-background-default-secondary);
+  --checkbox-border-checkbox-border-checked: var(
+    --interface-border-brand-brand
+  );
+  --checkbox-border-checkbox-border-default: var(
+    --interface-border-default-primary
+  );
+  --checkbox-foreground-checked: var(--interface-foreground-brand-on-primary);
+  --checkbox-foreground-default: var(--interface-foreground-default-primary);
+  --form-background-default: var(--interface-background-default-primary);
+  --form-border-default: var(--interface-border-default-primary);
+  --input-background-default: var(--interface-background-default-primary);
+  --input-background-disabled: var(--interface-background-disabled-disabled);
+  --input-background-hover: var(--interface-background-default-primary-hover);
+  --input-border-default: var(--interface-border-default-primary);
+  --input-border-disabled: var(--interface-border-disabled-disabled);
+  --input-border-focus: var(--interface-border-brand-brand);
+  --input-border-hover: var(--interface-border-default-primary);
+  --input-foreground-disabled: var(--interface-foreground-disabled-on-disabled);
+  --input-foreground-primary: var(--interface-foreground-default-primary);
+  --input-foreground-secondary: var(--interface-foreground-default-secondary);
+  --input-foreground-tertiary: var(--interface-foreground-default-tertiary);
+  --interface-background-brand-primary: var(--brand-500);
+  --interface-background-brand-primary-hover: var(--brand-400);
+  --interface-background-brand-secondary: var(--brand-50);
+  --interface-background-brand-secondary-hover: var(--brand-100);
+  --interface-background-default-inverted: var(--ui-900);
+  --interface-background-default-inverted-hover: var(--ui-800);
+  --interface-background-default-none: var(--ui-transparent);
+  --interface-background-default-primary: var(--ui-white);
+  --interface-background-default-primary-hover: var(--ui-50);
+  --interface-background-default-secondary: var(--ui-50);
+  --interface-background-default-secondary-hover: var(--ui-200);
+  --interface-background-default-tertiary: var(--ui-200);
+  --interface-background-default-tertiary-hover: var(--ui-300);
+  --interface-background-disabled-disabled: var(--ui-200);
+  --interface-background-validation-danger: var(--ui-danger);
+  --interface-background-validation-success: var(--ui-success);
+  --interface-background-validation-warning: var(--ui-warning);
+  --interface-border-brand-brand: var(--brand-500);
+  --interface-border-default-inverted: var(--ui-700);
+  --interface-border-default-none: var(--ui-transparent);
+  --interface-border-default-primary: var(--ui-300);
+  --interface-border-disabled-disabled: var(--ui-300);
+  --interface-border-validation-danger: var(--ui-danger);
+  --interface-border-validation-success: var(--ui-success);
+  --interface-border-validation-warning: var(--ui-warning);
+  --interface-foreground-brand-on-primary: var(--brand-50);
+  --interface-foreground-brand-on-secondary: var(--brand-950);
+  --interface-foreground-brand-primary: var(--brand-500);
+  --interface-foreground-brand-secondary: var(--brand-50);
+  --interface-foreground-default-inverted: var(--ui-white);
+  --interface-foreground-default-primary: var(--ui-900);
+  --interface-foreground-default-secondary: var(--ui-700);
+  --interface-foreground-default-tertiary: var(--ui-500);
+  --interface-foreground-disabled-disabled: var(--ui-300);
+  --interface-foreground-disabled-on-disabled: var(--ui-400);
+  --interface-foreground-validation-danger: var(--ui-danger);
+  --interface-foreground-validation-success: var(--ui-success);
+  --interface-foreground-validation-warning: var(--ui-warning);
+  --ory-background-default: var(--interface-background-default-primary);
+  --ory-border-default: var(--interface-border-default-primary);
+  --ory-foreground-default: var(--interface-foreground-default-primary);
+  --radio-background-checked: var(--interface-background-brand-primary);
+  --radio-background-default: var(--interface-background-default-secondary);
+  --radio-border-checked: var(--interface-border-brand-brand);
+  --radio-border-default: var(--interface-border-default-primary);
+  --radio-foreground-checked: var(--interface-foreground-brand-on-primary);
+  --radio-foreground-default: var(--interface-foreground-default-primary);
+  --toggle-background-checked: var(--interface-background-brand-primary);
+  --toggle-background-default: var(--interface-background-default-secondary);
+  --toggle-border-checked: var(--interface-border-default-none);
+  --toggle-border-default: var(--interface-border-default-primary);
+  --toggle-foreground-checked: var(--interface-foreground-brand-on-primary);
+  --toggle-foreground-default: var(--interface-foreground-brand-primary);
+  --brand-100: var(--ui-100);
+  --brand-200: var(--ui-300);
+  --brand-300: var(--ui-500);
+  --brand-400: var(--ui-700);
+  --brand-50: var(--ui-50);
+  --brand-500: var(--ui-900);
+  --brand-600: var(--ui-white);
+  --brand-700: var(--ui-200);
+  --brand-800: var(--ui-400);
+  --brand-900: var(--ui-600);
+  --brand-950: var(--ui-800);
+  --border-radius-buttons: 0.25rem;
+  --border-radius-forms: 0.25rem;
+  --border-radius-general: 0.25rem;
+  --border-radius-branding: 0.5rem;
+  --border-radius-cards: 0.75rem;
+  --border-radius-identifier: 62.4375rem;
+}

package/tailwind/generated/variables-processed.json

@@ -0,0 +1,161 @@
+{
+  "colors": {
+    "light": {
+      "button-identifier-background-default": "var(--button-identifier-background-default)",
+      "button-identifier-background-hover": "var(--button-identifier-background-hover)",
+      "button-identifier-border-border-default": "var(--button-identifier-border-border-default)",
+      "button-identifier-border-border-hover": "var(--button-identifier-border-border-hover)",
+      "button-identifier-foreground-default": "var(--button-identifier-foreground-default)",
+      "button-identifier-foreground-hover": "var(--button-identifier-foreground-hover)",
+      "button-link-brand-brand": "var(--button-link-brand-brand)",
+      "button-link-brand-brand-hover": "var(--button-link-brand-brand-hover)",
+      "button-link-default-primary": "var(--button-link-default-primary)",
+      "button-link-default-primary-hover": "var(--button-link-default-primary-hover)",
+      "button-link-default-secondary": "var(--button-link-default-secondary)",
+      "button-link-default-secondary-hover": "var(--button-link-default-secondary-hover)",
+      "button-link-disabled-disabled": "var(--button-link-disabled-disabled)",
+      "button-primary-background-default": "var(--button-primary-background-default)",
+      "button-primary-background-disabled": "var(--button-primary-background-disabled)",
+      "button-primary-background-hover": "var(--button-primary-background-hover)",
+      "button-primary-border-default": "var(--button-primary-border-default)",
+      "button-primary-border-disabled": "var(--button-primary-border-disabled)",
+      "button-primary-border-hover": "var(--button-primary-border-hover)",
+      "button-primary-foreground-default": "var(--button-primary-foreground-default)",
+      "button-primary-foreground-disabled": "var(--button-primary-foreground-disabled)",
+      "button-primary-foreground-hover": "var(--button-primary-foreground-hover)",
+      "button-secondary-background-default": "var(--button-secondary-background-default)",
+      "button-secondary-background-disabled": "var(--button-secondary-background-disabled)",
+      "button-secondary-background-hover": "var(--button-secondary-background-hover)",
+      "button-secondary-border-default": "var(--button-secondary-border-default)",
+      "button-secondary-border-disabled": "var(--button-secondary-border-disabled)",
+      "button-secondary-border-hover": "var(--button-secondary-border-hover)",
+      "button-secondary-foreground-default": "var(--button-secondary-foreground-default)",
+      "button-secondary-foreground-disabled": "var(--button-secondary-foreground-disabled)",
+      "button-secondary-foreground-hover": "var(--button-secondary-foreground-hover)",
+      "button-social-background-default": "var(--button-social-background-default)",
+      "button-social-background-disabled": "var(--button-social-background-disabled)",
+      "button-social-background-generic-provider": "var(--button-social-background-generic-provider)",
+      "button-social-background-hover": "var(--button-social-background-hover)",
+      "button-social-border-default": "var(--button-social-border-default)",
+      "button-social-border-disabled": "var(--button-social-border-disabled)",
+      "button-social-border-generic-provider": "var(--button-social-border-generic-provider)",
+      "button-social-border-hover": "var(--button-social-border-hover)",
+      "button-social-foreground-default": "var(--button-social-foreground-default)",
+      "button-social-foreground-disabled": "var(--button-social-foreground-disabled)",
+      "button-social-foreground-generic-provider": "var(--button-social-foreground-generic-provider)",
+      "button-social-foreground-hover": "var(--button-social-foreground-hover)",
+      "checkbox-background-checked": "var(--checkbox-background-checked)",
+      "checkbox-background-default": "var(--checkbox-background-default)",
+      "checkbox-border-checkbox-border-checked": "var(--checkbox-border-checkbox-border-checked)",
+      "checkbox-border-checkbox-border-default": "var(--checkbox-border-checkbox-border-default)",
+      "checkbox-foreground-checked": "var(--checkbox-foreground-checked)",
+      "checkbox-foreground-default": "var(--checkbox-foreground-default)",
+      "form-background-default": "var(--form-background-default)",
+      "form-border-default": "var(--form-border-default)",
+      "input-background-default": "var(--input-background-default)",
+      "input-background-disabled": "var(--input-background-disabled)",
+      "input-background-hover": "var(--input-background-hover)",
+      "input-border-default": "var(--input-border-default)",
+      "input-border-disabled": "var(--input-border-disabled)",
+      "input-border-focus": "var(--input-border-focus)",
+      "input-border-hover": "var(--input-border-hover)",
+      "input-foreground-disabled": "var(--input-foreground-disabled)",
+      "input-foreground-primary": "var(--input-foreground-primary)",
+      "input-foreground-secondary": "var(--input-foreground-secondary)",
+      "input-foreground-tertiary": "var(--input-foreground-tertiary)",
+      "interface-background-brand-primary": "var(--interface-background-brand-primary)",
+      "interface-background-brand-primary-hover": "var(--interface-background-brand-primary-hover)",
+      "interface-background-brand-secondary": "var(--interface-background-brand-secondary)",
+      "interface-background-brand-secondary-hover": "var(--interface-background-brand-secondary-hover)",
+      "interface-background-default-inverted": "var(--interface-background-default-inverted)",
+      "interface-background-default-inverted-hover": "var(--interface-background-default-inverted-hover)",
+      "interface-background-default-none": "var(--interface-background-default-none)",
+      "interface-background-default-primary": "var(--interface-background-default-primary)",
+      "interface-background-default-primary-hover": "var(--interface-background-default-primary-hover)",
+      "interface-background-default-secondary": "var(--interface-background-default-secondary)",
+      "interface-background-default-secondary-hover": "var(--interface-background-default-secondary-hover)",
+      "interface-background-default-tertiary": "var(--interface-background-default-tertiary)",
+      "interface-background-default-tertiary-hover": "var(--interface-background-default-tertiary-hover)",
+      "interface-background-disabled-disabled": "var(--interface-background-disabled-disabled)",
+      "interface-background-validation-danger": "var(--interface-background-validation-danger)",
+      "interface-background-validation-success": "var(--interface-background-validation-success)",
+      "interface-background-validation-warning": "var(--interface-background-validation-warning)",
+      "interface-border-brand-brand": "var(--interface-border-brand-brand)",
+      "interface-border-default-inverted": "var(--interface-border-default-inverted)",
+      "interface-border-default-none": "var(--interface-border-default-none)",
+      "interface-border-default-primary": "var(--interface-border-default-primary)",
+      "interface-border-disabled-disabled": "var(--interface-border-disabled-disabled)",
+      "interface-border-validation-danger": "var(--interface-border-validation-danger)",
+      "interface-border-validation-success": "var(--interface-border-validation-success)",
+      "interface-border-validation-warning": "var(--interface-border-validation-warning)",
+      "interface-foreground-brand-on-primary": "var(--interface-foreground-brand-on-primary)",
+      "interface-foreground-brand-on-secondary": "var(--interface-foreground-brand-on-secondary)",
+      "interface-foreground-brand-primary": "var(--interface-foreground-brand-primary)",
+      "interface-foreground-brand-secondary": "var(--interface-foreground-brand-secondary)",
+      "interface-foreground-default-inverted": "var(--interface-foreground-default-inverted)",
+      "interface-foreground-default-primary": "var(--interface-foreground-default-primary)",
+      "interface-foreground-default-secondary": "var(--interface-foreground-default-secondary)",
+      "interface-foreground-default-tertiary": "var(--interface-foreground-default-tertiary)",
+      "interface-foreground-disabled-disabled": "var(--interface-foreground-disabled-disabled)",
+      "interface-foreground-disabled-on-disabled": "var(--interface-foreground-disabled-on-disabled)",
+      "interface-foreground-validation-danger": "var(--interface-foreground-validation-danger)",
+      "interface-foreground-validation-success": "var(--interface-foreground-validation-success)",
+      "interface-foreground-validation-warning": "var(--interface-foreground-validation-warning)",
+      "ory-background-default": "var(--ory-background-default)",
+      "ory-border-default": "var(--ory-border-default)",
+      "ory-foreground-default": "var(--ory-foreground-default)",
+      "radio-background-checked": "var(--radio-background-checked)",
+      "radio-background-default": "var(--radio-background-default)",
+      "radio-border-checked": "var(--radio-border-checked)",
+      "radio-border-default": "var(--radio-border-default)",
+      "radio-foreground-checked": "var(--radio-foreground-checked)",
+      "radio-foreground-default": "var(--radio-foreground-default)",
+      "toggle-background-checked": "var(--toggle-background-checked)",
+      "toggle-background-default": "var(--toggle-background-default)",
+      "toggle-border-checked": "var(--toggle-border-checked)",
+      "toggle-border-default": "var(--toggle-border-default)",
+      "toggle-foreground-checked": "var(--toggle-foreground-checked)",
+      "toggle-foreground-default": "var(--toggle-foreground-default)"
+    },
+    "brand": {
+      "brand-100": "var(--brand-100)",
+      "brand-200": "var(--brand-200)",
+      "brand-300": "var(--brand-300)",
+      "brand-400": "var(--brand-400)",
+      "brand-50": "var(--brand-50)",
+      "brand-500": "var(--brand-500)",
+      "brand-600": "var(--brand-600)",
+      "brand-700": "var(--brand-700)",
+      "brand-800": "var(--brand-800)",
+      "brand-900": "var(--brand-900)",
+      "brand-950": "var(--brand-950)"
+    },
+    "primitives": {
+      "ui-100": "var(--ui-100)",
+      "ui-200": "var(--ui-200)",
+      "ui-300": "var(--ui-300)",
+      "ui-400": "var(--ui-400)",
+      "ui-50": "var(--ui-50)",
+      "ui-500": "var(--ui-500)",
+      "ui-600": "var(--ui-600)",
+      "ui-700": "var(--ui-700)",
+      "ui-800": "var(--ui-800)",
+      "ui-900": "var(--ui-900)",
+      "ui-950": "var(--ui-950)",
+      "ui-black": "var(--ui-black)",
+      "ui-danger": "var(--ui-danger)",
+      "ui-success": "var(--ui-success)",
+      "ui-transparent": "var(--ui-transparent)",
+      "ui-warning": "var(--ui-warning)",
+      "ui-white": "var(--ui-white)"
+    }
+  },
+  "borderRadius": {
+    "buttons": "var(--border-radius-buttons)",
+    "forms": "var(--border-radius-forms)",
+    "general": "var(--border-radius-general)",
+    "branding": "var(--border-radius-branding)",
+    "cards": "var(--border-radius-cards)",
+    "identifier": "var(--border-radius-identifier)"
+  }
+}

package/tsconfig.json

@@ -19,7 +19,8 @@
     "lib": ["ES6", "DOM", "WebWorker"],
     "rootDir": ".",
     "paths": {
-      "@ory/elements-react": ["./src/index.ts"]
+      "@ory/elements-react": ["./src/index.ts"],
+      "$snapshots/*": ["./.stub-responses/*"]
     }
   },
   "exclude": ["node_modules", "dist"],
@@ -27,8 +28,6 @@
     "**/*.ts",
     "**/*.tsx",
     "src/global.d.ts",
-    "src/tests/**/*.ts",
-    "src/tests/**/*.tsx",
     "tsup.config.ts",
     "jest.config.ts",
     "tailwind.config.ts"

package/tsconfig.runtime.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "dist", "**/*.spec.ts", "**/*.spec.tsx"]
+}

package/tsconfig.test.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": [
-    "**/*.spec.ts",
-    "**/*.spec.tsx",
-    "playwright/",
-    "playwright-ct.config.ts"
-  ]
-}