feat: add docs for ory elements (#2198)

Co-authored-by: Vincent <vincent@ory.sh>
Co-authored-by: hackerman <3372410+aeneasr@users.noreply.github.com>

Author: 3 people

docs/ecosystem/projects.mdx

@@ -84,6 +84,17 @@ enterprise identity providers. It’s modular, supports your preferred database,
 data and privacy. Built for flexibility and scale, Ory Polis handles as many tenants and identity providers as your business
 demands. If you're delivering enterprise-grade SaaS and need SSO that just works, Ory Polis is the missing link.
 
+## Ory Elements
+
+![Ory Elements](https://raw.githubusercontent.com/ory/meta/master/static/logos/logo-elements.svg)
+
+Ory Elements is a component library that allows you to build custom user interfaces for Ory self-service flows. It provides a set
+of pre-built components that can be easily integrated into your application, enabling you to create a seamless user experience
+while leveraging Ory's powerful authentication and identity management capabilities. Ory Elements is designed to work with Ory
+Kratos' self-service flows, such as login, registration, settings, verification, and recovery, as well as the OAuth2 consent flow.
+It allows you to customize the look and feel of your UI to match your brand and user experience requirements. You can use Ory
+Elements to build a custom UI that fits your application's design and user experience.
+
 ## All of Ory Open Source
 
 ```mdx-code-block
@@ -92,6 +103,32 @@ import { ProjectOverviewGraph } from "@site/src/pages/_assets/project-overview-g
 <ProjectOverviewGraph />
 ```
 
+```mdx-code-block
+import Mermaid from "@site/src/theme/Mermaid"
+
+<Mermaid
+  chart={`graph LR
+
+User[User]
+Devices[Devices Web, Mobile, etc.]
+Oathkeeper[Ory / oathkeeper<br>Identity and Access Proxy IAP]
+Hydra[Ory / hydra<br>OAuth 2.0 and OpenID Connect]
+Kratos[Ory / kratos<br>Cloud native identity infrastructure]
+Keto[Ory / keto<br>Permission and Role Management]
+API[Your Code<br>API Endpoint 1 & API Endpoint 2]
+
+User --> Devices
+Devices --> Oathkeeper
+
+Oathkeeper -->|protects| API
+Oathkeeper -->|authenticates credentials with| Hydra
+User -->|Registers, log in, manages profiles, ...| Kratos
+Oathkeeper --> Kratos
+Oathkeeper -->|checks permissions with| Keto
+`}
+  width="100%" />
+```
+
 If you were to use the full Ory Ecosystem, it would probably look something like this. Keep in mind that any component shown here
 can be replaced or removed, depending on your use case.
 

docs/elements/assets/figma-variables-deps.gen.mermaid

@@ -0,0 +1,129 @@
+%% AUTOGENERATED - DO NOT EDIT
+graph LR
+  ui-white --> brand-600
+  ui-white --> interface-background-default-primary
+  ui-white --> interface-foreground-default-inverted
+  ui-warning --> interface-background-validation-warning
+  ui-warning --> interface-border-validation-warning
+  ui-warning --> interface-foreground-validation-warning
+  ui-transparent --> interface-background-default-none
+  ui-transparent --> interface-border-default-none
+  ui-success --> interface-background-validation-success
+  ui-success --> interface-border-validation-success
+  ui-success --> interface-foreground-validation-success
+  ui-danger --> interface-background-validation-danger
+  ui-danger --> interface-border-validation-danger
+  ui-danger --> interface-foreground-validation-danger
+  ui-900 --> brand-500
+  ui-900 --> interface-background-default-inverted
+  ui-900 --> interface-foreground-default-primary
+  ui-800 --> brand-950
+  ui-800 --> interface-background-default-inverted-hover
+  ui-700 --> brand-400
+  ui-700 --> interface-border-default-inverted
+  ui-700 --> interface-foreground-default-secondary
+  ui-600 --> brand-900
+  ui-500 --> brand-300
+  ui-500 --> interface-foreground-default-tertiary
+  ui-50 --> brand-50
+  ui-50 --> interface-background-default-primary-hover
+  ui-50 --> interface-background-default-secondary
+  ui-400 --> brand-800
+  ui-400 --> interface-foreground-disabled-on-disabled
+  ui-300 --> brand-200
+  ui-300 --> interface-background-default-tertiary-hover
+  ui-300 --> interface-border-default-primary
+  ui-300 --> interface-border-disabled-disabled
+  ui-300 --> interface-foreground-disabled-disabled
+  ui-200 --> brand-700
+  ui-200 --> interface-background-default-secondary-hover
+  ui-200 --> interface-background-default-tertiary
+  ui-200 --> interface-background-disabled-disabled
+  ui-100 --> brand-100
+  interface-foreground-disabled-on-disabled --> button-primary-foreground-disabled
+  interface-foreground-disabled-on-disabled --> button-secondary-foreground-disabled
+  interface-foreground-disabled-on-disabled --> button-social-foreground-disabled
+  interface-foreground-disabled-on-disabled --> input-foreground-disabled
+  interface-foreground-disabled-disabled --> button-link-disabled-disabled
+  interface-foreground-default-tertiary --> button-link-default-secondary-hover
+  interface-foreground-default-tertiary --> input-foreground-tertiary
+  interface-foreground-default-secondary --> button-link-default-secondary
+  interface-foreground-default-secondary --> button-secondary-foreground-hover
+  interface-foreground-default-secondary --> button-social-foreground-hover
+  interface-foreground-default-secondary --> input-foreground-secondary
+  interface-foreground-default-primary --> button-link-brand-brand-hover
+  interface-foreground-default-primary --> button-link-default-primary
+  interface-foreground-default-primary --> button-secondary-foreground-default
+  interface-foreground-default-primary --> button-social-foreground-default
+  interface-foreground-default-primary --> checkbox-foreground-default
+  interface-foreground-default-primary --> input-foreground-primary
+  interface-foreground-default-primary --> ory-foreground-default
+  interface-foreground-default-primary --> radio-foreground-default
+  interface-foreground-default-inverted --> button-social-foreground-generic-provider
+  interface-foreground-brand-primary --> button-link-brand-brand
+  interface-foreground-brand-primary --> button-link-default-primary-hover
+  interface-foreground-brand-primary --> toggle-foreground-default
+  interface-foreground-brand-on-secondary --> button-identifier-foreground-default
+  interface-foreground-brand-on-secondary --> button-identifier-foreground-hover
+  interface-foreground-brand-on-primary --> button-primary-foreground-default
+  interface-foreground-brand-on-primary --> button-primary-foreground-hover
+  interface-foreground-brand-on-primary --> checkbox-foreground-checked
+  interface-foreground-brand-on-primary --> radio-foreground-checked
+  interface-foreground-brand-on-primary --> toggle-foreground-checked
+  interface-border-disabled-disabled --> button-primary-border-disabled
+  interface-border-disabled-disabled --> button-secondary-border-disabled
+  interface-border-disabled-disabled --> button-social-border-disabled
+  interface-border-disabled-disabled --> input-border-disabled
+  interface-border-default-primary --> button-secondary-border-default
+  interface-border-default-primary --> button-secondary-border-hover
+  interface-border-default-primary --> button-social-border-default
+  interface-border-default-primary --> button-social-border-hover
+  interface-border-default-primary --> checkbox-border-checkbox-border-default
+  interface-border-default-primary --> form-border-default
+  interface-border-default-primary --> input-border-default
+  interface-border-default-primary --> input-border-hover
+  interface-border-default-primary --> ory-border-default
+  interface-border-default-primary --> radio-border-default
+  interface-border-default-primary --> toggle-border-default
+  interface-border-default-none --> button-primary-border-default
+  interface-border-default-none --> button-primary-border-hover
+  interface-border-default-none --> button-social-border-generic-provider
+  interface-border-default-none --> toggle-border-checked
+  interface-border-brand-brand --> button-identifier-border-border-default
+  interface-border-brand-brand --> button-identifier-border-border-hover
+  interface-border-brand-brand --> checkbox-border-checkbox-border-checked
+  interface-border-brand-brand --> input-border-focus
+  interface-border-brand-brand --> radio-border-checked
+  interface-background-disabled-disabled --> button-primary-background-disabled
+  interface-background-disabled-disabled --> button-secondary-background-disabled
+  interface-background-disabled-disabled --> button-social-background-disabled
+  interface-background-disabled-disabled --> input-background-disabled
+  interface-background-default-secondary --> checkbox-background-default
+  interface-background-default-secondary --> radio-background-default
+  interface-background-default-secondary --> toggle-background-default
+  interface-background-default-primary-hover --> button-secondary-background-hover
+  interface-background-default-primary-hover --> button-social-background-hover
+  interface-background-default-primary-hover --> input-background-hover
+  interface-background-default-primary --> button-secondary-background-default
+  interface-background-default-primary --> button-social-background-default
+  interface-background-default-primary --> form-background-default
+  interface-background-default-primary --> input-background-default
+  interface-background-default-primary --> ory-background-default
+  interface-background-default-inverted --> button-social-background-generic-provider
+  interface-background-brand-secondary-hover --> button-identifier-background-hover
+  interface-background-brand-secondary --> button-identifier-background-default
+  interface-background-brand-primary-hover --> button-primary-background-hover
+  interface-background-brand-primary --> button-primary-background-default
+  interface-background-brand-primary --> checkbox-background-checked
+  interface-background-brand-primary --> radio-background-checked
+  interface-background-brand-primary --> toggle-background-checked
+  brand-950 --> interface-foreground-brand-on-secondary
+  brand-500 --> interface-background-brand-primary
+  brand-500 --> interface-border-brand-brand
+  brand-500 --> interface-foreground-brand-primary
+  brand-50 --> interface-background-brand-secondary
+  brand-50 --> interface-foreground-brand-on-primary
+  brand-50 --> interface-foreground-brand-secondary
+  brand-400 --> interface-background-brand-primary-hover
+  brand-100 --> interface-background-brand-secondary-hover
+