@flightlesslabs/dodo-ui 0.11.1 → 0.12.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.
- package/dist/index.d.ts +3 -0
- package/dist/index.js +2 -0
- package/dist/stories/components/Form/Button/Button.svelte +18 -18
- package/dist/stories/components/Form/Button/utils/scss/mixins.scss +3 -3
- package/{src/lib/stories/components/Form/PasswordInput → dist/stories/components/Form/NumericInput}/Roundness/Roundness.stories.svelte +4 -4
- package/dist/stories/components/Form/NumericInput/Roundness/Roundness.stories.svelte.d.ts +26 -0
- package/{src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek → dist/stories/components/Form/NumericInput}/Size/Size.stories.svelte +4 -4
- package/dist/stories/components/Form/NumericInput/Size/Size.stories.svelte.d.ts +26 -0
- package/{src/lib/stories/components/Form/PasswordInput → dist/stories/components/Form/NumericInput}/WithIcon/WithIcon.stories.svelte +10 -10
- package/dist/stories/components/Form/NumericInput/WithIcon/WithIcon.stories.svelte.d.ts +26 -0
- package/{src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList → dist/stories/components/Form/RangeSlider}/Color/Color.stories.svelte +4 -7
- package/dist/stories/components/Form/RangeSlider/Color/Color.stories.svelte.d.ts +26 -0
- package/dist/stories/components/Form/RangeSlider/Events/Events.stories.svelte +59 -0
- package/dist/stories/components/Form/RangeSlider/Events/Events.stories.svelte.d.ts +18 -0
- package/dist/stories/components/Form/RangeSlider/RangeSlider.stories.svelte +64 -0
- package/dist/stories/components/Form/RangeSlider/RangeSlider.stories.svelte.d.ts +21 -0
- package/dist/stories/components/Form/RangeSlider/RangeSlider.svelte +525 -0
- package/dist/stories/components/Form/RangeSlider/RangeSlider.svelte.d.ts +48 -0
- package/dist/stories/components/Form/RangeSlider/Roundness/Roundness.stories.svelte +30 -0
- package/dist/stories/components/Form/RangeSlider/Roundness/Roundness.stories.svelte.d.ts +26 -0
- package/{src/lib/stories/components/Form/PasswordInput → dist/stories/components/Form/RangeSlider}/Size/Size.stories.svelte +4 -4
- package/dist/stories/components/Form/RangeSlider/Size/Size.stories.svelte.d.ts +26 -0
- package/dist/stories/components/Form/RangeSlider/WithIcon/WithIcon.stories.svelte +30 -0
- package/dist/stories/components/Form/RangeSlider/WithIcon/WithIcon.stories.svelte.d.ts +18 -0
- package/dist/stories/components/Form/RangeSlider/utils/scss/mixins.scss +91 -0
- package/dist/stories/developer tools/directives/drag/drag.d.ts +3 -0
- package/dist/stories/developer tools/directives/drag/drag.js +40 -0
- package/dist/styles/_components.css +5 -0
- package/package.json +23 -21
- package/src/lib/index.ts +4 -0
- package/src/lib/stories/components/Form/Button/utils/scss/mixins.scss +3 -3
- package/src/lib/stories/components/Form/RangeSlider/RangeSlider.svelte +476 -0
- package/src/lib/stories/components/Form/RangeSlider/utils/scss/mixins.scss +91 -0
- package/src/lib/stories/developer tools/directives/drag/drag.ts +47 -0
- package/src/lib/styles/_components.css +5 -0
- package/src/lib/stories/Home.mdx +0 -59
- package/src/lib/stories/assets/dark-theme-toggle.png +0 -0
- package/src/lib/stories/components/Form/Button/Button.stories.svelte +0 -61
- package/src/lib/stories/components/Form/Button/Color/Color.stories.svelte +0 -43
- package/src/lib/stories/components/Form/Button/Events/Events.stories.svelte +0 -36
- package/src/lib/stories/components/Form/Button/IconButton/IconButton.stories.svelte +0 -43
- package/src/lib/stories/components/Form/Button/Roundness/Roundness.stories.svelte +0 -23
- package/src/lib/stories/components/Form/Button/Size/Size.stories.svelte +0 -16
- package/src/lib/stories/components/Form/Button/Variant/Variant.stories.svelte +0 -18
- package/src/lib/stories/components/Form/DatePicker/Color/Color.stories.svelte +0 -47
- package/src/lib/stories/components/Form/DatePicker/Controls/Controls.stories.svelte +0 -58
- package/src/lib/stories/components/Form/DatePicker/Customize/Customize.stories.svelte +0 -167
- package/src/lib/stories/components/Form/DatePicker/DatePicker.stories.svelte +0 -107
- package/src/lib/stories/components/Form/DatePicker/Events/Events.stories.svelte +0 -147
- package/src/lib/stories/components/Form/DatePicker/FilterDates/FilterDates.stories.svelte +0 -61
- package/src/lib/stories/components/Form/DatePicker/Positions/AutoPosition/AutoPosition.stories.svelte +0 -46
- package/src/lib/stories/components/Form/DatePicker/Positions/Positions.stories.svelte +0 -57
- package/src/lib/stories/components/Form/DatePicker/Roundness/Roundness.stories.svelte +0 -38
- package/src/lib/stories/components/Form/DatePicker/Size/Size.stories.svelte +0 -41
- package/src/lib/stories/components/Form/DatePicker/WithIcon/WithIcon.stories.svelte +0 -41
- package/src/lib/stories/components/Form/FormControl/FormControl.stories.svelte +0 -28
- package/src/lib/stories/components/Form/Label/Label.stories.svelte +0 -13
- package/src/lib/stories/components/Form/Message/Color/Color.stories.svelte +0 -36
- package/src/lib/stories/components/Form/Message/Message.stories.svelte +0 -27
- package/src/lib/stories/components/Form/Message/Size/Size.stories.svelte +0 -22
- package/src/lib/stories/components/Form/NumericInput/Events/Events.stories.svelte +0 -134
- package/src/lib/stories/components/Form/NumericInput/NumericInput.stories.svelte +0 -84
- package/src/lib/stories/components/Form/NumericInput/Validation/Validation.stories.svelte +0 -87
- package/src/lib/stories/components/Form/PasswordInput/Events/Events.stories.svelte +0 -132
- package/src/lib/stories/components/Form/PasswordInput/PasswordInput.stories.svelte +0 -58
- package/src/lib/stories/components/Form/Select/Customize/Customize.stories.svelte +0 -139
- package/src/lib/stories/components/Form/Select/DropDownArrow/DropDownArrow.stories.svelte +0 -63
- package/src/lib/stories/components/Form/Select/Events/Events.stories.svelte +0 -174
- package/src/lib/stories/components/Form/Select/Options/OptionFormat.mdx +0 -40
- package/src/lib/stories/components/Form/Select/Positions/AutoPosition/AutoPosition.stories.svelte +0 -58
- package/src/lib/stories/components/Form/Select/Positions/Positions.stories.svelte +0 -87
- package/src/lib/stories/components/Form/Select/Roundness/Roundness.stories.svelte +0 -32
- package/src/lib/stories/components/Form/Select/Select.stories.svelte +0 -125
- package/src/lib/stories/components/Form/Select/Size/Size.stories.svelte +0 -28
- package/src/lib/stories/components/Form/Select/WithIcon/WithIcon.stories.svelte +0 -43
- package/src/lib/stories/components/Form/TextInput/Events/Events.stories.svelte +0 -125
- package/src/lib/stories/components/Form/TextInput/Roundness/Roundness.stories.svelte +0 -21
- package/src/lib/stories/components/Form/TextInput/Size/Size.stories.svelte +0 -17
- package/src/lib/stories/components/Form/TextInput/TextInput.stories.svelte +0 -43
- package/src/lib/stories/components/Form/TextInput/WithIcon/WithIcon.stories.svelte +0 -47
- package/src/lib/stories/components/Info/Calendar/Calendar.stories.svelte +0 -121
- package/src/lib/stories/components/Info/Calendar/Color/Color.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/Controls/Controls.stories.svelte +0 -26
- package/src/lib/stories/components/Info/Calendar/Customize/Customize.stories.svelte +0 -160
- package/src/lib/stories/components/Info/Calendar/Events/Events.stories.svelte +0 -122
- package/src/lib/stories/components/Info/Calendar/FilterDates/FilterDates.stories.svelte +0 -70
- package/src/lib/stories/components/Info/Calendar/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.stories.svelte +0 -36
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.stories.svelte +0 -58
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Color/Color.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Customize/Customize.stories.svelte +0 -30
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Events/Events.stories.svelte +0 -25
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/NameTypes/NameTypes.stories.svelte +0 -25
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Roundness/Roundness.stories.svelte +0 -26
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.stories.svelte +0 -36
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Color/Color.stories.svelte +0 -19
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Customize/Customize.stories.svelte +0 -33
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Events/Events.stories.svelte +0 -37
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Size/Size.stories.svelte +0 -16
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.stories.svelte +0 -58
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Color/Color.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Customize/Customize.stories.svelte +0 -30
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Events/Events.stories.svelte +0 -25
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Roundness/Roundness.stories.svelte +0 -26
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Color/Color.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Controls/Controls.stories.svelte +0 -21
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Customize/Customize.stories.svelte +0 -69
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Events/Events.stories.svelte +0 -61
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.stories.svelte +0 -75
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Color/Color.stories.svelte +0 -41
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Customize/Customize.stories.svelte +0 -45
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Events/Events.stories.svelte +0 -28
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Roundness/Roundness.stories.svelte +0 -31
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Size/Size.stories.svelte +0 -24
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/SpecialChips/SpecialChips.stories.svelte +0 -96
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.stories.svelte +0 -104
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.stories.svelte +0 -38
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/Customize/Customize.stories.svelte +0 -32
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/NameTypes/NameTypes.stories.svelte +0 -28
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Color/Color.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Customize/Customize.stories.svelte +0 -68
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Events/Events.stories.svelte +0 -24
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.stories.svelte +0 -40
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Color/Color.stories.svelte +0 -29
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Customize/Customize.stories.svelte +0 -33
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Events/Events.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Roundness/Roundness.stories.svelte +0 -26
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Size/Size.stories.svelte +0 -19
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.stories.svelte +0 -45
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Customize/Customize.stories.svelte +0 -36
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Events/Events.stories.svelte +0 -33
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Size/Size.stories.svelte +0 -19
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.stories.svelte +0 -41
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Color/Color.stories.svelte +0 -30
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Customize/Customize.stories.svelte +0 -33
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Events/Events.stories.svelte +0 -24
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Roundness/Roundness.stories.svelte +0 -27
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.stories.svelte +0 -39
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Color/Color.stories.svelte +0 -23
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Customize/Customize.stories.svelte +0 -36
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Events/Events.stories.svelte +0 -24
- package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Size/Size.stories.svelte +0 -20
- package/src/lib/stories/components/Info/Calendar/utils/createDateOfMonth/index.mdx +0 -121
- package/src/lib/stories/components/Info/Calendar/utils/getDatesOfMonth/index.mdx +0 -37
- package/src/lib/stories/components/Layout/Menu/DynamicMenu/Customize/Customize.stories.svelte +0 -30
- package/src/lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.stories.svelte +0 -56
- package/src/lib/stories/components/Layout/Menu/DynamicMenu/Events/Events.stories.svelte +0 -48
- package/src/lib/stories/components/Layout/Menu/DynamicMenu/KeybaordNavigation/KeybaordNavigation.stories.svelte +0 -29
- package/src/lib/stories/components/Layout/Menu/DynamicMenu/Options/OptionFormat.mdx +0 -72
- package/src/lib/stories/components/Layout/Menu/Menu.stories.svelte +0 -69
- package/src/lib/stories/components/Layout/Menu/MenuItem/MenuItem.stories.svelte +0 -34
- package/src/lib/stories/components/Layout/Menu/MenuItem/Size/Size.stories.svelte +0 -16
- package/src/lib/stories/components/Layout/Menu/MenuItem/Type/Type.stories.svelte +0 -21
- package/src/lib/stories/components/Layout/Menu/Size/Size.stories.svelte +0 -37
- package/src/lib/stories/components/Layout/Paper/Color/Color.stories.svelte +0 -63
- package/src/lib/stories/components/Layout/Paper/Paper.stories.svelte +0 -50
- package/src/lib/stories/components/Layout/Paper/Roundness/Roundness.stories.svelte +0 -25
- package/src/lib/stories/components/Layout/Paper/Shadow/Shadow.stories.svelte +0 -24
- package/src/lib/stories/components/Layout/Separator/Color/Color.stories.svelte +0 -19
- package/src/lib/stories/components/Layout/Separator/Separator.stories.svelte +0 -30
- package/src/lib/stories/developer tools/Intro.mdx +0 -9
- package/src/lib/stories/developer tools/components/DynamicInput/DynamicInput.stories.svelte +0 -53
- package/src/lib/stories/developer tools/components/DynamicInput/Events/Events.stories.svelte +0 -121
- package/src/lib/stories/developer tools/components/DynamicInput/Size/Size.stories.svelte +0 -17
- package/src/lib/stories/developer tools/components/InputEnclosure/InputEnclosure.stories.svelte +0 -38
- package/src/lib/stories/developer tools/components/InputEnclosure/Roundness/Roundness.stories.svelte +0 -20
- package/src/lib/stories/developer tools/components/InputEnclosure/Size/Size.stories.svelte +0 -16
- package/src/lib/stories/developer tools/components/InputEnclosure/WithIcon/WithIcon.stories.svelte +0 -47
- package/src/lib/stories/developer tools/components/Popper/Popper.stories.svelte +0 -140
- package/src/lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.stories.svelte +0 -64
- package/src/lib/stories/developer tools/components/Popper/Positions/AutoPosition/AutoPosition.stories.svelte +0 -92
- package/src/lib/stories/developer tools/components/Popper/Positions/Positions.stories.svelte +0 -114
- package/src/lib/stories/developer tools/components/UtilityButton/Size/Size.stories.svelte +0 -25
- package/src/lib/stories/developer tools/components/UtilityButton/UtilityButton.stories.svelte +0 -30
- package/src/lib/stories/developer tools/directives/clickOutside/index.mdx +0 -25
- package/src/lib/stories/developer tools/helpers/Numbers/cleanNumericString/index.mdx +0 -20
- package/src/lib/stories/developer tools/helpers/Numbers/isValidNumberValue/index.mdx +0 -71
- package/src/lib/stories/developer tools/helpers/Time/getMoment/index.mdx +0 -45
- package/src/lib/stories/developer tools/helpers/logger/index.mdx +0 -63
- package/src/lib/stories/developer tools/philosophy/Colors/Colors.mdx +0 -43
- package/src/lib/stories/developer tools/philosophy/Colors/Colors.stories.svelte +0 -22
- package/src/lib/stories/developer tools/philosophy/Colors/Opacity.stories.svelte +0 -11
- package/src/lib/stories/developer tools/philosophy/Themes.mdx +0 -23
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
|
|
2
|
-
import * as ColorsStories from './Colors.stories.svelte';
|
|
3
|
-
import * as OpacityStories from './Opacity.stories.svelte';
|
|
4
|
-
|
|
5
|
-
<Meta of={ColorsStories} />
|
|
6
|
-
|
|
7
|
-
# Colors
|
|
8
|
-
|
|
9
|
-
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.
|
|
10
|
-
|
|
11
|
-
## Main Colors
|
|
12
|
-
|
|
13
|
-
<Story of={ColorsStories.Main} />
|
|
14
|
-
|
|
15
|
-
Greyscale colors
|
|
16
|
-
|
|
17
|
-
<Story of={ColorsStories.ColorsNeutral} />
|
|
18
|
-
|
|
19
|
-
Constant Colors
|
|
20
|
-
|
|
21
|
-
<Story of={ColorsStories.ColorsConstant} />
|
|
22
|
-
|
|
23
|
-
## Base Color
|
|
24
|
-
|
|
25
|
-
<Story of={ColorsStories.ColorsBase} />
|
|
26
|
-
|
|
27
|
-
Greyscale colors
|
|
28
|
-
|
|
29
|
-
<Story of={ColorsStories.BaseColorsNeutral} />
|
|
30
|
-
|
|
31
|
-
## Adjusting opacity
|
|
32
|
-
|
|
33
|
-
Opacity can be adjusted using css `color-mix` function.
|
|
34
|
-
|
|
35
|
-
<Source
|
|
36
|
-
dark
|
|
37
|
-
language="css"
|
|
38
|
-
code={`
|
|
39
|
-
color-mix(in oklab, var(--dodo-color-primary-800) 10%, transparent)
|
|
40
|
-
`}
|
|
41
|
-
/>
|
|
42
|
-
|
|
43
|
-
<Story of={OpacityStories.Main} meta={OpacityStories} />
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import Colors from './Colors.svelte';
|
|
4
|
-
|
|
5
|
-
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
6
|
-
const { Story } = defineMeta({
|
|
7
|
-
component: Colors,
|
|
8
|
-
args: {
|
|
9
|
-
swatchType: 'colors',
|
|
10
|
-
},
|
|
11
|
-
});
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<Story name="Main" />
|
|
15
|
-
|
|
16
|
-
<Story name="ColorsNeutral" args={{ swatchType: 'colors-neutral' }} />
|
|
17
|
-
|
|
18
|
-
<Story name="ColorsConstant" args={{ swatchType: 'colors-constant' }} />
|
|
19
|
-
|
|
20
|
-
<Story name="ColorsBase" args={{ swatchType: 'base-colors' }} />
|
|
21
|
-
|
|
22
|
-
<Story name="BaseColorsNeutral" args={{ swatchType: 'base-colors-neutral' }} />
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
<script module lang="ts">
|
|
2
|
-
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
3
|
-
import Opacity from './Opacity.svelte';
|
|
4
|
-
|
|
5
|
-
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
6
|
-
const { Story } = defineMeta({
|
|
7
|
-
component: Opacity,
|
|
8
|
-
});
|
|
9
|
-
</script>
|
|
10
|
-
|
|
11
|
-
<Story name="Main" />
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { Source } from '@storybook/addon-docs/blocks';
|
|
2
|
-
import darkThemeToggleImage from '$lib/stories/assets/dark-theme-toggle.png';
|
|
3
|
-
|
|
4
|
-
# Themes
|
|
5
|
-
|
|
6
|
-
## Dark theme
|
|
7
|
-
|
|
8
|
-
dark theme can be activated by adding `.dodo-theme--dark` class on the top container.
|
|
9
|
-
|
|
10
|
-
<Source
|
|
11
|
-
dark
|
|
12
|
-
language="html"
|
|
13
|
-
code={`
|
|
14
|
-
<body class="dodo-theme--dark">
|
|
15
|
-
...
|
|
16
|
-
`}
|
|
17
|
-
/>
|
|
18
|
-
|
|
19
|
-
## Toggle theme in documentation
|
|
20
|
-
|
|
21
|
-
Use the moon icon to toogle theme in documentation mode
|
|
22
|
-
|
|
23
|
-
<img src={darkThemeToggleImage} />
|