@ory/elements-react 1.0.0-next.9 → 1.0.0-rc.1

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: #dc2626;
+  --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

@@ -17,19 +17,20 @@
     "declarationDir": "dist/types",
     "jsx": "react-jsx",
     "lib": ["ES6", "DOM", "WebWorker"],
-    "rootDir": "src",
+    "rootDir": ".",
     "paths": {
       "@ory/elements-react": ["./src/index.ts"],
-      "@tests/*": ["./src/tests/*"]
+      "$snapshots/*": ["./.stub-responses/*"]
     }
   },
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules", "dist"],
   "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/global.d.ts",
-    "src/tests/**/*.ts",
-    "src/tests/**/*.tsx",
-    "tsup.config.ts"
+    "**/*.ts",
+    "**/*.tsx",
+    "src/theme/default/assets/global.d.ts",
+    "tsup.config.ts",
+    "jest.config.ts",
+    "tailwind.config.ts",
+    ".storybook/**/*.ts"
   ]
 }

package/tsconfig.runtime.json

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

package/.eslintrc.js

@@ -1,61 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-    browser: true,
-    es2021: true,
-  },
-  extends: [
-    "../../.eslintrc.cjs",
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react/jsx-runtime",
-    "plugin:react-hooks/recommended",
-  ],
-  ignorePatterns: ["playwright/", "playwright-ct.config.ts", ".eslintrc.js"],
-  parserOptions: {
-    ecmaVersion: 12,
-    sourceType: "module",
-    project: __dirname + "/tsconfig.json",
-  },
-  rules: {
-    // false positive with typescript enums, and is covered by the typescript rule
-    "no-unused-vars": "off",
-    // covered by typescript
-    "no-undef": "off",
-    // TODO(jonas): define if we want to use this rule and if we want types or interfaces
-    "@typescript-eslint/consistent-type-definitions": "off",
-    "react/prop-types": "off",
-    "@typescript-eslint/no-unsafe-assignment": "off",
-    "@typescript-eslint/no-unsafe-member-access": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_",
-        caughtErrorsIgnorePattern: "^_",
-      },
-    ],
-  },
-  env: {
-    jest: true,
-  },
-  overrides: [
-    {
-      files: ["**/*.spec.ts", "**/*.spec.tsx", "playwright/"],
-
-      parserOptions: {
-        ecmaVersion: 12,
-        sourceType: "module",
-        project: __dirname + "/tsconfig.test.json",
-      },
-      rules: {
-        // covered by typescript
-        "react/prop-types": "off",
-      },
-    },
-  ],
-}

package/.vscode/i18n-ally-reviews.yml

@@ -1,3 +0,0 @@
-# Review comments generated by i18n-ally. Please commit this file.
-
-{}

package/.vscode/settings.json

@@ -1,4 +0,0 @@
-{
-  "i18n-ally.localesPaths": ["src/locales", "src/util/i18n"],
-  "i18n-ally.keystyle": "flat"
-}