npm - @flightlesslabs/dodo-ui - Versions diffs - 0.12.0 → 0.13.0 - Mend

@flightlesslabs/dodo-ui 0.12.0 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (170) hide show

package/src/lib/stories/developer tools/philosophy/Colors/Colors.mdx ADDED Viewed

@@ -0,0 +1,43 @@
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
+import * as ColorsStories from './Colors.stories.svelte';
+import * as OpacityStories from './Opacity.stories.svelte';
+<Meta of={ColorsStories} />
+# Colors
+We are using an extensive color pallet identical to [Tailwind Css](https://tailwindcss.com/docs/colors) Colors. The colors are adjusted for dark and light themes.
+## Main Colors
+<Story of={ColorsStories.Main} />
+Greyscale colors
+<Story of={ColorsStories.ColorsNeutral} />
+Constant Colors
+<Story of={ColorsStories.ColorsConstant} />
+## Base Color
+<Story of={ColorsStories.ColorsBase} />
+Greyscale colors
+<Story of={ColorsStories.BaseColorsNeutral} />
+## Adjusting opacity
+Opacity can be adjusted using css `color-mix` function.
+<Source
+  dark
+  language="css"
+  code={`
+color-mix(in oklab, var(--dodo-color-primary-800) 10%, transparent)
+`}
+/>
+<Story of={OpacityStories.Main} meta={OpacityStories} />

package/src/lib/stories/developer tools/philosophy/Colors/Colors.stories.svelte ADDED Viewed

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Colors from './Colors.svelte';
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Colors,
+    args: {
+      swatchType: 'colors',
+    },
+  });
+</script>
+<Story name="Main" />
+<Story name="ColorsNeutral" args={{ swatchType: 'colors-neutral' }} />
+<Story name="ColorsConstant" args={{ swatchType: 'colors-constant' }} />
+<Story name="ColorsBase" args={{ swatchType: 'base-colors' }} />
+<Story name="BaseColorsNeutral" args={{ swatchType: 'base-colors-neutral' }} />

package/src/lib/stories/developer tools/philosophy/Colors/Opacity.stories.svelte ADDED Viewed

@@ -0,0 +1,11 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Opacity from './Opacity.svelte';
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Opacity,
+  });
+</script>
+<Story name="Main" />

package/src/lib/stories/developer tools/philosophy/Themes.mdx ADDED Viewed

@@ -0,0 +1,23 @@
+import { Source } from '@storybook/addon-docs/blocks';
+import darkThemeToggleImage from '$lib/stories/assets/dark-theme-toggle.png';
+# Themes
+## Dark theme
+dark theme can be activated by adding `.dodo-theme--dark` class on the top container.
+<Source
+  dark
+  language="html"
+  code={`
+ <body class="dodo-theme--dark">
+ ...
+`}
+/>
+## Toggle theme in documentation
+Use the moon icon to toogle theme in documentation mode
+<img src={darkThemeToggleImage} />