feat: docs on new styles

lukasbach · lukasbach · commit a2519e4594bb · 2023-02-03T21:07:55.000+01:00
diff --git a/next-release-notes.md b/next-release-notes.md
@@ -1,9 +1,8 @@
-<!--
 ### Breaking Changes
 
 ### Features
+* Introduced new tree theme. You can opt into the new theme by importing `style-modern.css` instead of `style.css`
 
 ### Bug Fixes and Improvements
 
 ### Other Changes
--->
diff --git a/packages/docs/docs/getstarted.mdx b/packages/docs/docs/getstarted.mdx
@@ -37,19 +37,26 @@ CSS in one of the following ways:
 
 - Import it directly in your JS code, if you use Webpack with a loader that can load CSS files:
   ```js
-  import 'react-complex-tree/lib/style.css';
+  import 'react-complex-tree/lib/style-modern.css';
   ```
 - Import it from within a CSS file with node-style package resolution:
   ```css
-  @import '~react-complex-tree/lib/style.css';
+  @import '~react-complex-tree/lib/style-modern.css';
   ```
 - Import it in your HTML by linking to the CSS file in your `node_modules` or on unpkg:
   ```html
   <head>
-    <link href="https://unpkg.com/react-complex-tree/lib/style.css" rel="stylesheet" />
+    <link href="https://unpkg.com/react-complex-tree/lib/style-modern.css" rel="stylesheet" />
   </head>
   ```
 
+:::info
+
+This will use the new styles introduced in v2.0.3.
+If you want the old default styles, import `.../style.css` instead of `.../style-modern.css`.
+
+:::
+
 React Complex Tree comes compiled as CommonJS package, ESM package and ESNext package.
 
 ## Using CDNs
diff --git a/packages/docs/docs/guides/styling.mdx b/packages/docs/docs/guides/styling.mdx
@@ -38,7 +38,7 @@ values:
 
   --rct-color-search-highlight-bg: #a2aed2;
   --rct-color-drag-between-line-bg: #0366d6;
-  --rct-color-arrow: #9aa5b3;
+  --rct-color-arrow: #373a3f;
 
   --rct-item-height: 22px;
 
@@ -52,9 +52,52 @@ values:
 }
 ```
 
+If you are using the modern styles (i.e. importing `style-modern.css` instead of `style.css`), you have
+additional possibilities:
+
+```css
+:root {
+  --rct-color-tree-bg: transparent;
+  --rct-item-height: 28px;
+  --rct-color-search-highlight-bg: #acccf1;
+
+  --rct-color-tree-focus-outline: transparent;
+  --rct-item-margin: 1px;
+  --rct-item-padding: 8px;
+  --rct-radius: 4px;
+  --rct-bar-offset: 6px;
+  --rct-bar-width: 4px;
+  --rct-bar-color: #0366d6;
+  --rct-focus-outline: #000000;
+
+  --rct-color-focustree-item-selected-bg: #f0f2f5;
+  --rct-color-focustree-item-hover-bg: #f0f2f5;
+  --rct-color-focustree-item-hover-text: inherit;
+  --rct-color-focustree-item-active-bg: #e4e6eb;
+  --rct-color-focustree-item-active-text: #4f4f4f;
+
+  --rct-arrow-size: 10px;
+  --rct-arrow-container-size: 16px;
+  --rct-arrow-padding: 6px;
+
+  --rct-cursor: pointer;
+
+  --rct-search-width: 120px;
+  --rct-search-height: 16px;
+  --rct-search-padding: 8px;
+  --rct-search-border: #b4b7bd;
+  --rct-search-border-bottom: #0366d6;
+  --rct-search-bg: #f8f9fa;
+  --rct-search-text: #000000;
+  --rct-search-text-offset: calc(var(--rct-search-padding) * 2 + 16px);
+}
+```
+
 :::note
 This may not reflect the current possibilities. Look into the
-[CSS source file](https://github.com/lukasbach/react-complex-tree/blob/main/packages/core/src/style.css)
+[source file for the default styles](https://github.com/lukasbach/react-complex-tree/blob/main/packages/core/src/style.css)
+or the
+[source file for the modern styles](https://github.com/lukasbach/react-complex-tree/blob/main/packages/core/src/style-modern.css)
 to see all available variables.
 :::
 
