feat: Design improvements, better scaling of spark charts, generic data and for barlist, new props for SearchSelect, new readme

.gitignore

@@ -3,4 +3,5 @@ dist
 .DS_Store
 storybook-static
 package-lock.json
-.vscode
+.vscode
+yarn.lock

README.md

@@ -1,116 +1,84 @@
-<br>
-<br>
-<br>
-<div align="center">
-  <img alt="Tremor Logo" src="images/tremor-logo.svg" height="50"/>
-<br>
-<br>
-<br>
-
-  <div align="center">
-    <a href="https://www.npmjs.com/package/@tremor/react">
-      <img alt="npm" src="https://img.shields.io/npm/dm/@tremor/react?color=3b82f6&label=npm&logo=npm&labelColor=334155">
-    </a>
-    <a href="https://tremor.so/docs/getting-started/introduction">
-      <img alt="Read the documentation" src="https://img.shields.io/badge/Docs-blue?style=flat&logo=readthedocs&color=3b82f6&labelColor=334155&logoColor=f5f5f5" height="20" width="auto">
-    </a>
-    <a href="https://github.com/tremorlabs/tremor/blob/main/License">
-      <img alt="License Apache 2.0" src="https://img.shields.io/badge/license-Apache 2.0-blue.svg?style=flat&color=3b82f6&labelColor=334155 " height="20" width="auto">
-    </a>
-    <a href="https://join.slack.com/t/tremor-community/shared_invite/zt-21ug6czv6-RckDPEAR6GdYOqfMGKOWpQ">
-      <img src="https://img.shields.io/badge/Join-important.svg?color=4A154B&label=Slack&logo=slack&labelColor=334155&logoColor=f5f5f5" alt="Join Slack" />
-    </a>
-    <!-- <a href="https://twitter.com/intent/follow?screen_name=tremorlabs">
-      <img src="https://img.shields.io/twitter/follow/tremorlabs?style=social" alt="Follow on Twitter" />
-    </a> -->
-        <a href="https://twitter.com/intent/follow?screen_name=tremorlabs">
-      <img src="https://img.shields.io/badge/Follow-important.svg?color=000000&label=@tremorlabs&logo=X&labelColor=334155&logoColor=f5f5f5" alt="Follow at Tremorlabs" />
-    </a>
-
-  </div>
-  <h3 align="center">
-    <a href="https://www.tremor.so/docs/getting-started/installation">Documentation</a> &bull;
-    <a href="https://www.tremor.so">Website</a>
-  </h3>
 
-<br>
+<br />
+<br />
+<p align="center">
+  <a href="https://tremor.so">
+    <picture>
+       <source media="(prefers-color-scheme: dark)" srcset="images/tremor-logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="images/tremor-logo-light.svg">
+    <img alt="Tremor Logo" src="images/tremor-logo-light.svg" height="50"/>
+    </picture>
+  </a>
+</p>
+<div align="center">
+<br />
+<br />
 
+<div align="center">
+  <a href="https://www.npmjs.com/package/@tremor/react">
+    <img alt="npm" src="https://img.shields.io/npm/dm/@tremor/react?color=3b82f6&label=npm&logo=npm&labelColor=334155">
+  </a>
+  <a href="https://tremor.so/docs/getting-started/introduction">
+    <img alt="Read the documentation" src="https://img.shields.io/badge/Docs-blue?style=flat&logo=readthedocs&color=3b82f6&labelColor=334155&logoColor=f5f5f5" height="20" width="auto">
+  </a>
+  <a href="https://github.com/tremorlabs/tremor/blob/main/License">
+    <img alt="License Apache 2.0" src="https://img.shields.io/badge/license-Apache 2.0-blue.svg?style=flat&color=3b82f6&labelColor=334155 " height="20" width="auto">
+  </a>
+  <a href="https://join.slack.com/t/tremor-community/shared_invite/zt-21ug6czv6-RckDPEAR6GdYOqfMGKOWpQ">
+    <img src="https://img.shields.io/badge/Join-important.svg?color=4A154B&label=Slack&logo=slack&labelColor=334155&logoColor=f5f5f5" alt="Join Slack" />
+  </a>
+  <a href="https://twitter.com/intent/follow?screen_name=tremorlabs">
+    <img src="https://img.shields.io/badge/Follow-important.svg?color=000000&label=@tremorlabs&logo=X&labelColor=334155&logoColor=f5f5f5" alt="Follow at Tremorlabs" />
+  </a>
+</div>
+<h3 align="center">
+  <a href="https://www.tremor.so/docs/getting-started/installation">Documentation</a> &bull;
+  <a href="https://www.tremor.so">Website</a>
+</h3>
+<br />
   <h1>The react library to build dashboards fast</h1>
-
 </div>
 
-[Tremor](https://tremor.so/) lets you create simple and modular components to build insightful dashboards in a breeze. Fully open-source, made by data scientists and software engineers with a sweet spot for design.
+[Tremor](https://tremor.so/) provides React components to build charts and dashboards. Fully open-source, made by data scientists and software engineers with a sweet spot for design.
 
-<br>
-<br>
+<br />
 
 ![Tremor Banner](images/banner-github-readme.png)
 
-<br>
-<br>
+<br />
 
 ## Getting Started
 
-For new projects, we recommend using Next.js 13.4+. For other frameworks, see our [Installation Guide](https://www.tremor.so/docs/getting-started/installation). To make use of the library we also need Tailwind CSS setup in the project. For manual installation, refer to the installation guide on our website.
-
-<br>
-
-## Using NextJS
-
-In your terminal, we create a new Next project. When prompted `Would you like to use Tailwind CSS with this project?`, select `Yes`.
-
-```bash
-npx create-next-app@latest my-project
-cd my-project
-```
-
-### Installation using the Tremor CLI
-
-We recommend installing Tremor with our CLI. To do so, run this command and select Next as your framework. If you prefer a manual installation, check the [installation guide](https://www.tremor.so/docs/getting-started/installation) on our website.
-
-```bash
-npx @tremor/cli@latest init
-```
-
-Now you are set and you can start the dev server.
-
-```bash
-npm run dev
-```
+See our [Installation Guide](https://www.tremor.so/docs/getting-started/installation). To make use of the library we also need Tailwind CSS setup in the project.
 
 ## Example
 
 With Tremor creating an analytical interface is easy.
 
-<br>
-
 ```jsx
 //Card.tsx
-import { Card, Text, Metric, Flex, ProgressBar } from "@tremor/react";
+import { Card, ProgressBar } from "@tremor/react";
 export default () => (
-  <Card className="max-w-sm">
-    <Text>Sales</Text>
-    <Metric>$ 71,465</Metric>
-    <Flex className="mt-4">
-      <Text>32% of annual target</Text>
-      <Text>$ 225,000</Text>
-    </Flex>
-    <ProgressBar value={32} className="mt-2" />
-  </Card>
+<Card className="max-w-sm">
+  <span className="text-tremor-default text-tremor-content">Sales</span>
+  <p className="text-tremor-metric text-tremor-content-strong font-semibold">$71,465</p>
+  <div className="flex items-center justify-between">
+    <span className="text-tremor-default text-tremor-content">32% of annual target</span>
+    <span className="text-tremor-default text-tremor-content">$ 225,000</span>
+  </div>
+  <ProgressBar value={32} className="mt-2" />
+</Card>
 );
 ```
 
-<br>
+<br />
 
 ![Tremor Example](images/example.png)
 
-<br>
 
 ## Community and Contribution
 
-We are always looking for new ideas or other ways to improve Tremor. If you have developed anything cool or found a bug, send us a pull request.
-<br>
-<br>
+We are always looking for new ideas or other ways to improve Tremor. If you have developed anything cool or found a bug, send us a pull request. Check out our Contributor License Agreement [here](https://www.tremor.so/contributors).
 
 ## License
 

src/components/icon-elements/Badge/Badge.tsx

@@ -35,18 +35,22 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
       className={tremorTwMerge(
         makeBadgeClassName("root"),
         // common
-        "w-max flex-shrink-0 inline-flex justify-center items-center cursor-default rounded-tremor-full",
+        "w-max shrink-0 inline-flex justify-center items-center cursor-default rounded-tremor-small ring-1 ring-inset",
         color
           ? tremorTwMerge(
               getColorClassNames(color, colorPalette.background).bgColor,
-              getColorClassNames(color, colorPalette.text).textColor,
-              "bg-opacity-20 dark:bg-opacity-25",
+              getColorClassNames(color, colorPalette.iconText).textColor,
+              getColorClassNames(color, colorPalette.iconRing).ringColor,
+              // light
+              "bg-opacity-10 ring-opacity-20",
+              // dark
+              "dark:bg-opacity-5 dark:ring-opacity-60",
             )
           : tremorTwMerge(
               // light
-              "bg-tremor-brand-muted text-tremor-brand-emphasis",
+              "bg-tremor-brand-faint text-tremor-brand-emphasis ring-tremor-brand/20",
               // dark
-              "dark:bg-dark-tremor-brand-muted dark:text-dark-tremor-brand-emphasis",
+              "dark:bg-dark-tremor-brand-muted/50 dark:text-dark-tremor-brand dark:ring-dark-tremor-subtle/20",
             ),
         badgeProportions[size].paddingX,
         badgeProportions[size].paddingY,
@@ -67,9 +71,9 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
           )}
         />
       ) : null}
-      <p className={tremorTwMerge(makeBadgeClassName("text"), "text-sm whitespace-nowrap")}>
+      <span className={tremorTwMerge(makeBadgeClassName("text"), "whitespace-nowrap")}>
         {children}
-      </p>
+      </span>
     </span>
   );
 });

src/components/icon-elements/BadgeDelta/BadgeDelta.tsx

@@ -50,12 +50,17 @@ const BadgeDelta = React.forwardRef<HTMLSpanElement, BadgeDeltaProps>((props, re
       className={tremorTwMerge(
         makeBadgeDeltaClassName("root"),
         // common
-        "w-max flex-shrink-0 inline-flex justify-center items-center cursor-default rounded-tremor-full bg-opacity-20 dark:bg-opacity-25",
+        "w-max shrink-0 inline-flex justify-center items-center cursor-default rounded-tremor-small ring-1 ring-inset",
         colors[mappedDeltaType].bgColor,
         colors[mappedDeltaType].textColor,
+        colors[mappedDeltaType].ringColor,
         badgeProportions[size].paddingX,
         badgeProportions[size].paddingY,
         badgeProportions[size].fontSize,
+        // light
+        "bg-opacity-10 ring-opacity-20",
+        // dark
+        "dark:bg-opacity-5 dark:ring-opacity-60",
         className,
       )}
       {...getReferenceProps}
@@ -71,9 +76,9 @@ const BadgeDelta = React.forwardRef<HTMLSpanElement, BadgeDeltaProps>((props, re
         )}
       />
       {children ? (
-        <p className={tremorTwMerge(makeBadgeDeltaClassName("text"), "text-sm whitespace-nowrap")}>
+        <span className={tremorTwMerge(makeBadgeDeltaClassName("text"), "whitespace-nowrap")}>
           {children}
-        </p>
+        </span>
       ) : null}
     </span>
   );

src/components/icon-elements/BadgeDelta/styles.ts

@@ -105,28 +105,34 @@ export const iconSizes: {
 export type ColorTypes = {
   bgColor: string;
   textColor: string;
+  ringColor: string;
 };
 
 export const colors: { [key: string]: ColorTypes } = {
   [DeltaTypes.Increase]: {
     bgColor: getColorClassNames(BaseColors.Emerald, colorPalette.background).bgColor,
-    textColor: getColorClassNames(BaseColors.Emerald, colorPalette.text).textColor,
+    textColor: getColorClassNames(BaseColors.Emerald, colorPalette.iconText).textColor,
+    ringColor: getColorClassNames(BaseColors.Emerald, colorPalette.iconRing).ringColor,
   },
   [DeltaTypes.ModerateIncrease]: {
     bgColor: getColorClassNames(BaseColors.Emerald, colorPalette.background).bgColor,
-    textColor: getColorClassNames(BaseColors.Emerald, colorPalette.text).textColor,
+    textColor: getColorClassNames(BaseColors.Emerald, colorPalette.iconText).textColor,
+    ringColor: getColorClassNames(BaseColors.Emerald, colorPalette.iconRing).ringColor,
   },
   [DeltaTypes.Decrease]: {
-    bgColor: getColorClassNames(BaseColors.Rose, colorPalette.background).bgColor,
-    textColor: getColorClassNames(BaseColors.Rose, colorPalette.text).textColor,
+    bgColor: getColorClassNames(BaseColors.Red, colorPalette.background).bgColor,
+    textColor: getColorClassNames(BaseColors.Red, colorPalette.iconText).textColor,
+    ringColor: getColorClassNames(BaseColors.Red, colorPalette.iconRing).ringColor,
   },
   [DeltaTypes.ModerateDecrease]: {
-    bgColor: getColorClassNames(BaseColors.Rose, colorPalette.background).bgColor,
-    textColor: getColorClassNames(BaseColors.Rose, colorPalette.text).textColor,
+    bgColor: getColorClassNames(BaseColors.Red, colorPalette.background).bgColor,
+    textColor: getColorClassNames(BaseColors.Red, colorPalette.iconText).textColor,
+    ringColor: getColorClassNames(BaseColors.Red, colorPalette.iconRing).ringColor,
   },
   [DeltaTypes.Unchanged]: {
     bgColor: getColorClassNames(BaseColors.Orange, colorPalette.background).bgColor,
-    textColor: getColorClassNames(BaseColors.Orange, colorPalette.text).textColor,
+    textColor: getColorClassNames(BaseColors.Orange, colorPalette.iconText).textColor,
+    ringColor: getColorClassNames(BaseColors.Orange, colorPalette.iconRing).ringColor,
   },
 };
 

src/components/icon-elements/Icon/Icon.tsx

@@ -44,7 +44,7 @@ const Icon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
       ref={mergeRefs([ref, tooltipProps.refs.setReference])}
       className={tremorTwMerge(
         makeIconClassName("root"),
-        "inline-flex flex-shrink-0 items-center",
+        "inline-flex shrink-0 items-center justify-center",
         iconColorStyles.bgColor,
         iconColorStyles.textColor,
         iconColorStyles.borderColor,