From 363403f69dbd8195ac02fbbefda29e1c970dbf1c Mon Sep 17 00:00:00 2001
From: Jan Dvorak <storytellercz@proton.me>
Date: Mon, 7 Jul 2025 18:49:48 +0200
Subject: [PATCH] Add docs for the new accounts-ui CSS variables

---
 v3-docs/docs/packages/accounts-ui.md | 110 +++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)

diff --git a/v3-docs/docs/packages/accounts-ui.md b/v3-docs/docs/packages/accounts-ui.md
index c7246efcb6..e4f7d341ed 100644
--- a/v3-docs/docs/packages/accounts-ui.md
+++ b/v3-docs/docs/packages/accounts-ui.md
@@ -26,4 +26,114 @@ and [`sendEnrollmentEmail`](../api/accounts.md#Accounts-sendEnrollmentEmail). Th
 do not have to be manually placed in HTML: they are automatically activated
 when the URLs are loaded.
 
+## Customizing the UI
+
 If you want to control the look and feel of your accounts system a little more, we recommend reading the [useraccounts](http://guide.meteor.com/accounts.html#useraccounts) section of the Meteor Guide.
+
+### CSS Variables
+
+The `accounts-ui` package uses CSS variables for styling, making it easy to customize the appearance to match your application. You can override these variables in your own CSS to create a custom theme.
+
+#### Basic Usage
+
+To customize the styling, add CSS variables to your application's CSS:
+
+```css
+/* In your app CSS */
+:root {
+  /* Override light theme variables */
+  --login-buttons-color: #4e40b8;
+  --color-background-primary: #ffffff;
+  
+  /* Override dark theme variables */
+  --login-buttons-color-dark: #8c7ae6;
+  --color-background-primary-dark: #121212;
+}
+```
+
+#### Dark Theme Support
+
+The package automatically supports dark mode using the `prefers-color-scheme: dark` media query. You can customize both light and dark themes independently.
+
+#### Available Variables
+
+Here's a complete list of CSS variables you can customize with the current default values:
+
+##### Layout and Sizing
+```css
+--meteor-accounts-dialog-border-width: 1px;
+--login-buttons-accounts-dialog-width: 280px;
+--button-border-radius: 6px;
+--input-border-radius: 6px;
+--dialog-border-radius: 12px;
+```
+
+##### Colors - Light Theme
+```css
+--login-buttons-color: #4e40b8;
+--login-buttons-color-active: #6c5ce7;
+--login-buttons-config-color: #cc3a1a;
+--login-buttons-config-border: #b8351a;
+--color-text-primary: #2d2d2d;
+--color-text-secondary: #4a4a4a;
+--color-text-disabled: #999;
+--color-background-primary: #fff;
+--color-background-secondary: #f8f9fa;
+--color-background-disabled: #e0e0e0;
+--color-border: #e6e6e6;
+--color-input-border: #d1d1d1;
+--color-input-focus-border: var(--login-buttons-color);
+--color-error: #e74c3c;
+--color-success: #2ecc71;
+--color-overlay: rgba(0, 0, 0, 0.6);
+```
+
+##### Colors - Dark Theme
+```css
+--login-buttons-color-dark: #8c7ae6;
+--login-buttons-color-active-dark: #a29bfe;
+--color-text-primary-dark: #f5f5f5;
+--color-text-secondary-dark: #d1d1d1;
+--color-text-disabled-dark: #777;
+--color-background-primary-dark: #121212;
+--color-background-secondary-dark: #1e1e1e;
+--color-background-disabled-dark: #444;
+--color-border-dark: #333;
+--color-input-border-dark: #444;
+--color-input-focus-border-dark: var(--login-buttons-color-dark);
+--color-error-dark: #ff6b6b;
+--color-success-dark: #55efc4;
+--color-overlay-dark: rgba(0, 0, 0, 0.8);
+```
+
+##### Typography
+```css
+--font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+--font-family-monospace: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+--font-size-base: 16px;
+--font-size-small: 0.875rem;
+--font-size-smaller: 0.8125rem;
+--font-size-smallest: 0.75rem;
+--font-weight-normal: 400;
+--font-weight-medium: 500;
+--font-weight-bold: 600;
+--line-height-base: 1.5;
+```
+
+##### Effects
+```css
+--box-shadow-dialog: 0 10px 25px rgba(0, 0, 0, 0.1);
+--box-shadow-button-active: 0 2px 4px 0 rgba(0, 0, 0, 0.1) inset;
+--box-shadow-input-focus: 0 0 0 3px rgba(78, 64, 184, 0.2);
+--box-shadow-dialog-dark: 0 10px 25px rgba(0, 0, 0, 0.3);
+--box-shadow-button-active-dark: 0 2px 4px 0 rgba(0, 0, 0, 0.3) inset;
+--box-shadow-input-focus-dark: 0 0 0 3px rgba(140, 122, 230, 0.3);
+```
+
+##### Transitions
+```css
+--transition-speed-fast: 0.1s;
+--transition-speed-normal: 0.2s;
+--transition-speed-slow: 0.3s;
+--transition-timing: cubic-bezier(0.25, 0.1, 0.25, 1);
+```