npm - @flightlesslabs/dodo-ui - Versions diffs - 0.6.4 → 0.6.5 - Mend

@flightlesslabs/dodo-ui 0.6.4 → 0.6.5

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 (50) hide show

package/src/lib/stories/philosophy/Colors/Swatches/Swatch.svelte ADDED Viewed

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import Palette from './Palette.svelte';
+  interface SwatchProps {
+    colorPalette: string;
+    colorPaletteValue?: string;
+    prefix?: string;
+  }
+  const { colorPalette, colorPaletteValue, prefix = '--dodo-color-' }: SwatchProps = $props();
+</script>
+<div class="Swatch">
+  {#if colorPaletteValue}
+    <Palette backgroundColor={`var(${prefix}${colorPalette}-${colorPaletteValue})`} />
+  {:else}
+    <Palette backgroundColor={`var(${prefix}${colorPalette})`} />
+  {/if}
+  <div class="colorPaletteValue">{colorPaletteValue}</div>
+</div>
+<style lang="scss">
+  .Swatch {
+    color: var(--dodo-color-default-900);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin: 4px;
+    .colorPaletteValue {
+      margin-top: 8px;
+    }
+  }
+</style>

package/src/lib/stories/philosophy/Colors/Swatches/Swatches.svelte ADDED Viewed

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { colorPaletteValues } from '../utils/color.js';
+  import Swatch from './Swatch.svelte';
+  interface SwatchesProps {
+    colorPalette: string;
+    prefix?: string;
+    isColorPaletteValues?: boolean;
+  }
+  const { colorPalette, prefix, isColorPaletteValues = false }: SwatchesProps = $props();
+</script>
+<ul class="Swatches">
+  <b>{colorPalette}</b>
+  {#if isColorPaletteValues}
+    {#each colorPaletteValues as colorPaletteValue (colorPaletteValue)}
+      <li>
+        <Swatch {colorPalette} {colorPaletteValue} {prefix} />
+      </li>
+    {/each}
+  {:else}
+    <li>
+      <Swatch {colorPalette} {prefix} />
+    </li>
+  {/if}
+</ul>
+<style lang="scss">
+  .Swatches {
+    color: var(--dodo-color-default-900);
+    margin: 0;
+    padding: 0;
+    width: 150px;
+    margin: 16px 0;
+    display: flex;
+    width: 100%;
+    b {
+      text-transform: capitalize;
+      display: flex;
+      font-weight: 500;
+      width: 100px;
+      align-items: center;
+      margin-bottom: 30px;
+    }
+    li {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+  }
+</style>

package/src/lib/stories/philosophy/Colors/utils/color.ts ADDED Viewed

@@ -0,0 +1,41 @@
+export const colorPaletteBase = [
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
+  'slate',
+  'gray',
+  'zinc',
+  'neutral',
+  'stone',
+];
+export const colorPaletteNeutral = ['black', 'white'];
+export const colorPalette = ['default', 'primary', 'safe', 'warning', 'danger', 'secondary'];
+export const colorPaletteValues = [
+  '50',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+  '950',
+];

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

@@ -0,0 +1,23 @@
+import { Source } from '@storybook/blocks';
+import darkThemeToggleImage from '../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} />