Merge pull request #10523 from marmelab/bwTheme

Add B&W Theme

docs/AppTheme.md

@@ -106,11 +106,11 @@ const App = () => (
 
 ## Built-In Themes
 
-React-admin comes with 4 built-in themes, each one having a light and a dark variant. You can use them as a starting point for your custom theme, or use them as-is.
+React-admin comes with 5 built-in themes, each one having a light and a dark variant. You can use them as a starting point for your custom theme, or use them as-is.
 
-| :---: | :---: |
-|    [Default](#default) [![Default light theme](./img/defaultLightTheme1.jpg)]((#default)) |    [Nano](#nano) [![Nano light theme](./img/nanoLightTheme1.jpg)](#nano) |
-|    [Radiant](#radiant) [![Radiant light theme](./img/radiantLightTheme1.jpg)](#radiant) |    [House](#house) [![House light theme](./img/houseLightTheme1.jpg)](#house) |
+|    [Default](#default) [![Default light theme](./img/defaultLightTheme1.jpg)]((#default)) |    [B&W](#bw) [![B&W light theme](./img/bwLightTheme1.jpg)](#bw) |
+|    [Nano](#nano) [![Nano light theme](./img/nanoLightTheme1.jpg)](#nano) |    [Radiant](#radiant) [![Radiant light theme](./img/radiantLightTheme1.jpg)](#radiant) |
+|    [House](#house) [![House light theme](./img/houseLightTheme1.jpg)](#house) |
 
 ### Default
 
@@ -123,6 +123,37 @@ The default theme is a good fit for every application, and works equally well on
 
 You don't need to configure anything to use the default theme - it comes out of the box with react-admin.
 
+### B&W
+
+A high-contrast theme with a black and white palette, ideal for visually impaired users. Its modern-looking style, reminiscent of shadcn, is suitable for desktop apps.
+
+[![B&W light theme](./img/bwLightTheme1.jpg)](./img/bwLightTheme1.jpg)
+[![B&W light theme](./img/bwLightTheme2.jpg)](./img/bwLightTheme2.jpg)
+[![B&W dark theme](./img/bwDarkTheme1.jpg)](./img/bwDarkTheme1.jpg)
+[![B&W dark theme](./img/bwDarkTheme2.jpg)](./img/bwDarkTheme2.jpg)
+
+To use the B&W theme, import the `bwLightTheme` and `bwDarkTheme` objects, and pass them to the `<Admin>` component:
+
+```jsx
+import { Admin, bwLightTheme, bwDarkTheme } from 'react-admin';
+
+export const App = () => (
+    <Admin
+        dataProvider={dataProvider}
+        theme={bwLightTheme}
+        darkTheme={bwDarkTheme}
+    >
+        // ...
+    </Admin>
+);
+```
+
+You must also import the Geist font in your `index.html` file:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
+```
+
 ### Nano
 
 A dense theme with minimal chrome, ideal for complex apps. It uses a small font size, reduced spacing, text buttons, standard variant inputs, pale colors. Only fit for desktop apps.

docs/Theming.md

@@ -18,7 +18,7 @@ If you need to adjust the style of a single component, you can use [the `sx` pro
 
 The following example shows how to change the color, decoration, width, and font weight of a `<Datagrid>` column:
 
-| Default style | Styled with `sx` | 
+| Default style | Styled with `sx` |
 | --- | --- |
 | [![Default style](./img/datagrid-sx-unstyled.webp)](./img/datagrid-sx-unstyled.webp) | [![Styled with `sx`](./img/datagrid-sx-styled.webp)](./img/datagrid-sx-styled.webp) |
 
@@ -69,7 +69,7 @@ The `sx` prop supports all the CSS features you need to style your components, i
 
 If you need to customize the look and feel of the whole application, you can use the `theme` prop of the `<Admin>` component. It accepts a theme object, which is a plain JavaScript object with a specific structure. You can either create your own theme object, or extend the default theme object provided by react-admin.
 
-| Default style | Styled with `theme` | 
+| Default style | Styled with `theme` |
 | --- | --- |
 | [![Default style](./img/datagrid-theme-unstyled.webp)](./img/datagrid-theme-unstyled.webp) | [![Styled with `theme`](./img/datagrid-theme-styled.webp)](./img/datagrid-theme-styled.webp) |
 
@@ -119,13 +119,13 @@ const App = () => (
 );
 ```
 
-React-admin comes with 4 built-in themes: 
+React-admin comes with 5 built-in themes:
 
-| :---: | :---: |
-| &nbsp;&nbsp; [Default](./AppTheme.md#default) [![Default light theme](./img/defaultLightTheme1.jpg)]((./AppTheme.md#default)) | &nbsp;&nbsp; [Nano](./AppTheme.md#nano) [![Nano light theme](./img/nanoLightTheme1.jpg)](./AppTheme.md#nano) |
-| &nbsp;&nbsp; [Radiant](./AppTheme.md#radiant) [![Radiant light theme](./img/radiantLightTheme1.jpg)](./AppTheme.md#radiant) | &nbsp;&nbsp; [House](./AppTheme.md#house) [![House light theme](./img/houseLightTheme1.jpg)](./AppTheme.md#house) |
+| &nbsp;&nbsp; [Default](./AppTheme.md#default) [![Default light theme](./img/defaultLightTheme1.jpg)]((#default)) | &nbsp;&nbsp; [B&W](./AppTheme.md#bw) [![B&W light theme](./img/bwLightTheme1.jpg)](./AppTheme.md#bw) |
+| &nbsp;&nbsp; [Nano](./AppTheme.md#nano) [![Nano light theme](./img/nanoLightTheme1.jpg)](./AppTheme.md#nano) | &nbsp;&nbsp; [Radiant](./AppTheme.md#radiant) [![Radiant light theme](./img/radiantLightTheme1.jpg)](./AppTheme.md#radiant) |
+| &nbsp;&nbsp; [House](./AppTheme.md#house) [![House light theme](./img/houseLightTheme1.jpg)](./AppTheme.md#house) |
 
-The [e-commerce demo](https://marmelab.com/react-admin-demo/) contains a theme switcher, so you can test them in a real application. 
+The [e-commerce demo](https://marmelab.com/react-admin-demo/) contains a theme switcher, so you can test them in a real application.
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/demo-themes.mp4" type="video/mp4"/>

examples/data-generator/src/orders.ts

@@ -19,13 +19,24 @@ export const generateOrders = (db: Db): Order[] => {
             [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
             [30, 20, 5, 2, 1, 1, 1, 1, 1, 1]
         );
-        const basket = Array.from(Array(nbProducts).keys()).map(() => ({
-            product_id: random.number({ min: 0, max: 10 * 13 - 1 }),
-            quantity: weightedArrayElement(
-                [1, 2, 3, 4, 5],
-                [10, 5, 3, 2, 1]
-            ) as number,
-        }));
+        const productIds = new Set<number>();
+        const basket = Array.from(Array(nbProducts).keys()).map(() => {
+            let product_id;
+            do {
+                product_id = random.number({
+                    min: 0,
+                    max: 10 * 13 - 1,
+                });
+            } while (productIds.has(product_id));
+            productIds.add(product_id);
+            return {
+                product_id,
+                quantity: weightedArrayElement(
+                    [1, 2, 3, 4, 5],
+                    [10, 5, 3, 2, 1]
+                ) as number,
+            };
+        });
 
         const total_ex_taxes = basket.reduce(
             (total, product) =>

examples/demo/index.html

@@ -121,6 +121,10 @@
             href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;600;700&display=swap"
             rel="stylesheet"
         />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap"
+            rel="stylesheet"
+        />
     </head>
 
     <body>

examples/demo/src/themes/themes.tsx

@@ -8,13 +8,16 @@ import {
     radiantLightTheme,
     houseDarkTheme,
     houseLightTheme,
+    bwLightTheme,
+    bwDarkTheme,
 } from 'react-admin';
 
 import { softDarkTheme, softLightTheme } from './softTheme';
 import { chiptuneTheme } from './chiptuneTheme';
 
 export type ThemeName =
     | 'soft'
+    | 'B&W'
     | 'default'
     | 'nano'
     | 'radiant'
@@ -30,6 +33,7 @@ export interface Theme {
 export const themes: Theme[] = [
     { name: 'soft', light: softLightTheme, dark: softDarkTheme },
     { name: 'default', light: defaultLightTheme, dark: defaultDarkTheme },
+    { name: 'B&W', light: bwLightTheme, dark: bwDarkTheme },
     { name: 'nano', light: nanoLightTheme, dark: nanoDarkTheme },
     { name: 'radiant', light: radiantLightTheme, dark: radiantDarkTheme },
     { name: 'house', light: houseLightTheme, dark: houseDarkTheme },