chore(storybook): docs about UI kit ver 0.6.0

app/storybook/.storybook/preview.tsx

@@ -84,6 +84,8 @@ const preview: Preview = {
         order: [
           'Getting started',
           ['Overview', 'Installation', 'Authentication', 'Usage', 'Querying Metrics', 'FAQ', 'Migration guide'],
+          'Theming',
+          ['Overview', 'Color', 'Dark mode', 'Typography', 'Spacing', 'Radius', 'Shadows', 'Cursors'],
           'Customization',
           ['Theming', 'Components'],
           'Components',

app/storybook/documentation/ui-kit/theming/Color.mdx

@@ -0,0 +1,244 @@
+import { Meta, Source, Story } from '@storybook/blocks'
+import LinkTo from '@storybook/addon-links/react'
+import { prettier } from '../../../src/utils'
+import { SourceCode } from '../../../.storybook/blocks/SourceCode'
+import { accentColors, grayColors, colors } from '../../../../../packages/ui-kit/src/themes'
+import * as ThemeProviderStories from '../../../../../packages/ui-kit/src/components/ThemeProvider/ThemeProvider.stories'
+
+export const ColorsPallete = ({ colorsGroup }) => (
+  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+    {colorsGroup.map((color) => (
+      <div key={color} style={{ margin: '5px' }}>
+        <div
+          style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: colors[color][`${color}11`] }}
+          key={color}
+        />
+        <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
+          {color.charAt(0).toUpperCase() + color.slice(1)}
+        </p>
+      </div>
+    ))}
+  </div>
+)
+
+export const ColorAnatomy = ({ color }) => (
+  <div style={{ display: 'flex', flexWrap: 'nowrap' }}>
+    {Object.keys(colors[color]).map((key, index) => (
+      <div key={key}>
+        <div
+          style={{
+            width: '60px',
+            height: '35px',
+            borderRadius: '4px',
+            backgroundColor: colors[color][key],
+            margin: '5px'
+          }}
+        />
+        <div
+          style={{
+            backgroundSize: '16px 16px',
+            backgroundPosition: '0px 0px, 8px 0px, 8px -8px, 0px 8px',
+            backgroundImage: `linear-gradient(45deg, ${colors.gray.gray2} 25%, transparent 25%), linear-gradient(135deg, ${colors.gray.gray2} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${colors.gray.gray2} 75%), linear-gradient(135deg, transparent 75%, ${colors.gray.gray2} 75%)`
+          }}
+        >
+          <div
+            style={{
+              width: '60px',
+              height: '35px',
+              borderRadius: '4px',
+              backgroundColor: colors[`${color}A`][`${color}A${index}`],
+              margin: '5px'
+            }}
+          />
+        </div>
+        <div style={{ margin: '2px 0', fontSize: '12px', color: '#707070', textAlign: 'center' }}>{index + 1}</div>
+      </div>
+    ))}
+  </div>
+)
+
+<Meta title="Theming/Color" />
+
+# Color
+
+Understanding the color system and its application in your theme.
+
+Propel Themes come with a number of color scales, each with its own light, dark, and alpha variants. Under the hood, the
+color system is powered by [Radix Colors](https://www.radix-ui.com/colors).
+
+## Accents
+
+Accent color is the most dominant color in your theme. It is used for primary buttons, links and other interactive
+elements. `accentColor` is specified directly on the`ThemeProvider` component:
+
+<Source
+  language="tsx"
+  format="dedent"
+  dark
+  code={`
+    import { ThemeProvider, TimeSeries, RelativeTimeRange } from "@propeldata/ui-kit";
+
+    function App() {
+      return (
+        <ThemeProvider accentColor="indigo">
+          <TimeSeries
+            variant="bar"
+            query={{
+              accessToken: "<PROPEL_ACCESS_TOKEN>",
+              metric: {
+                count: {
+                  dataPool: { name: "TacoSoft Demo Data" }
+                },
+              }
+              timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
+              granularity: "DAY",
+            }}
+          />
+        </ThemeProvider>
+      );
+    }
+
+`} />
+
+### Available accent colors
+
+There is a range of accent colors to choose from:
+
+<ColorsPallete colorsGroup={accentColors} />
+
+### Accent scale anatomy
+
+Each accent is a 12-step scale that includes a solid and a transparent variant of each color.
+
+For example, here's the `indigo` color scale:
+
+<ColorAnatomy color="indigo" />
+
+### Accent scale tokens
+
+Accent color tokens can be accessed using CSS variables. You can use these tokens to style your custom components,
+ensuring they are accessible and consistent with the rest of your theme.
+
+<Source
+  language="css"
+  format="dedent"
+  dark
+  code={`
+    /* Backgrounds */
+    var(--propel-accent-1);
+    var(--propel-accent-2);
+
+    /* Interactive components */
+    var(--propel-accent-3);
+    var(--propel-accent-4);
+    var(--propel-accent-5);
+
+    /* Borders and separators */
+    var(--propel-accent-6);
+    var(--propel-accent-7);
+    var(--propel-accent-8);
+
+    /* Solid colors */
+    var(--propel-accent-9);
+    var(--propel-accent-10);
+
+    /* Accessible text */
+    var(--propel-accent-11);
+    var(--propel-accent-12);
+
+    /* Functional colors */
+    var(--propel-accent-surface);
+    var(--propel-accent-indicator);
+    var(--propel-accent-track);
+    var(--propel-accent-contrast);
+
+`} />
+
+## Grays
+
+You can also choose between a pure gray or a number of tinted grays. Your accent color will be automatically paired with
+a gray shade that compliments it. However, you can also specify a custom `grayColor` directly on the `ThemeProvider`
+component:
+
+<Source
+  language="tsx"
+  format="dedent"
+  dark
+  code={`
+    import { ThemeProvider, TimeSeries, RelativeTimeRange } from "@propeldata/ui-kit";
+
+    function App() {
+      return (
+        <ThemeProvider  grayColor="mauve">
+          <TimeSeries
+            variant="bar"
+            query={{
+              accessToken: "<PROPEL_ACCESS_TOKEN>",
+              metric: {
+                count: {
+                  dataPool: { name: "TacoSoft Demo Data" }
+                },
+              }
+              timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
+              granularity: "DAY",
+            }}
+          />
+        </ThemeProvider>
+      );
+    }
+
+`} />
+
+### Available gray colors
+
+There is 6 grays to choose from. The difference may seem subtle, but it is impactful especially on pages with a lot of
+text or in dense UIs.
+
+<ColorsPallete colorsGroup={grayColors.filter((color) => color !== 'auto')} />
+
+### Gray scale anatomy
+
+Grays are based on the same 12-step color scale that includes a solid and a transparent variant of each color. For
+example, here's the `slate` color scale:
+
+<ColorAnatomy color="slate" />
+
+### Gray scale tokens
+
+Gray color tokens can be accessed using CSS variables. You can use these tokens to style your custom components,
+ensuring they are accessible and consistent with the rest of your theme.
+
+<Source
+  language="css"
+  format="dedent"
+  dark
+  code={`
+    /* Backgrounds */
+    var(--propel-gray-1);
+    var(--propel-gray-2);
+
+    /* Interactive components */
+    var(--propel-gray-3);
+    var(--propel-gray-4);
+    var(--propel-gray-5);
+
+    /* Borders and separators */
+    var(--propel-gray-6);
+    var(--propel-gray-7);
+    var(--propel-gray-8);
+
+    /* Solid colors */
+    var(--propel-gray-9);
+    var(--propel-gray-10);
+
+    /* Accessible text */
+    var(--propel-gray-11);
+    var(--propel-gray-12);
+
+    /* Functional colors */
+    var(--propel-gray-surface);
+    var(--propel-gray-indicator);
+    var(--propel-gray-track);
+    var(--propel-gray-contrast);
+
+`} />

app/storybook/documentation/ui-kit/theming/Cursors.mdx

@@ -0,0 +1,62 @@
+import { Meta, Source } from '@storybook/blocks'
+
+<Meta title="Theming/Cursors" />
+
+# Cursors
+
+Customizing cursors used for interactive elements.
+
+## Default cursors
+
+By default, interactive elements that don't link to another page use the regular arrow cursor. This also matches the
+browser defaults. However, disabled elements use an explicit disabled cursor.
+
+## Cursor tokens
+
+Cursor settings can be accessed using CSS variables. You can use these tokens to style your custom components, ensuring
+they are accessible and consistent with the rest of your theme.
+
+<Source
+  language="css"
+  format="dedent"
+  dark
+  code={`
+    /* Available cursor tokens */
+    var(--propel-cursor-button);
+    var(--propel-cursor-checkbox);
+    var(--propel-cursor-disabled);
+    var(--propel-cursor-link);
+    var(--propel-cursor-menu-item);
+    var(--propel-cursor-radio);
+    var(--propel-cursor-slider-thumb);
+    var(--propel-cursor-slider-thumb-active);
+    var(--propel-cursor-switch);
+
+`} />
+
+## Customization
+
+It's common to use a pointer cursor for interactive elements. Propel Themes cursors can be customized by overriding the
+corresponding CSS variables of the token system.
+
+Here's an example of how you can customize the cursor tokens to set `cursor: pointer` for most interactive elements in
+the theme:
+
+<Source
+  language="css"
+  format="dedent"
+  dark
+  code={`
+    .propel-themes {
+      --propel-cursor-button: pointer;
+      --propel-cursor-checkbox: pointer;
+      --propel-cursor-disabled: default;
+      --propel-cursor-link: pointer;
+      --propel-cursor-menu-item: pointer;
+      --propel-cursor-radio: pointer;
+      --propel-cursor-slider-thumb: grab;
+      --propel-cursor-slider-thumb-active: grabbing;
+      --propel-cursor-switch: pointer;
+    }
+
+`} />

app/storybook/documentation/ui-kit/theming/DarkMode.mdx

@@ -0,0 +1,24 @@
+import { Meta, Story } from '@storybook/blocks'
+import { SourceCode } from '../../../.storybook/blocks/SourceCode'
+import * as TimeSeriesStories from '../../../../../packages/ui-kit/src/components/TimeSeries/TimeSeries.stories'
+
+<Meta title="Theming/Dark mode" />
+
+# Dark mode
+
+Using appearance to manage and integrate dark mode.
+
+## Overview
+
+Light and dark modes are supported out of the box, allowing you to easily switch appearance without additional design or
+styling.
+
+### Basic usage
+
+By default, the root `ThemeProvider` appearance is `light`.
+
+<SourceCode of={TimeSeriesStories.LightThemeStory} shown />
+
+To set a different appearance pass it via the `appearance` prop. This will force the theme to use the specified setting.
+
+<SourceCode of={TimeSeriesStories.DrakThemeStory} shown />