@flightlesslabs/dodo-ui 0.19.1 → 1.0.0--beta-2

package/src/lib/index.ts

@@ -1,241 +1,32 @@
-export type {
-  ComponentColorPriority,
-  ComponentColorSeverity,
-  ComponentColor,
-} from './types/colors.js';
-
-export type { ComponentRoundness } from './types/roundness.js';
-
-export type { ComponentSize } from './types/size.js';
-
-export type { ComponentWeight } from './types/weight.js';
-
-export type { PositionY, PositionX } from './types/position.js';
-
-export type { IconPosition } from './types/special.js';
-
-/** developer tools: helpers: logger */
-export { default as createLogger } from '$lib/stories/developer tools/helpers/logger/logger.js';
-export type {
-  LogLevel,
-  LoggerOptions,
-} from '$lib/stories/developer tools/helpers/logger/logger.js';
-
-/** developer tools: helpers: Numbers: isValidNumberValue */
-export { default as isValidNumberValue } from '$lib/stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
-export type { IsValidNumberValueSettings } from '$lib/stories/developer tools/helpers/Numbers/isValidNumberValue/isValidNumberValue.js';
-
-/** developer tools: helpers: Numbers: cleanNumericString */
-export { default as cleanNumericString } from '$lib/stories/developer tools/helpers/Numbers/cleanNumericString/cleanNumericString.js';
-
-/** developer tools: helpers: Numbers: cleanNumericString */
-export { default as getMoment } from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
-export type {
-  GetMomentDate,
-  GetMomentFormat,
-  GetMomentSettings,
-} from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
-
-/** developer tools: directives: clickOutside */
-export { clickOutside } from '$lib/stories/developer tools/directives/clickOutside/clickOutside.js';
+// =====================================================
+// Form Components – Public API
+// =====================================================
 
-/** developer tools: components: UtilityButton */
-export { default as UtilityButton } from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
-export type { UtilityButtonProps } from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+/**
+ * Button component and related prop types.
+ */
+export { Button } from './components/Form/index.js';
 
-/** developer tools: components: InputEnclosure */
-export { default as InputEnclosure } from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
-export type { InputEnclosureProps } from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
-
-/** developer tools: components: DynamicInput */
-export { default as DynamicInput } from '$lib/stories/developer tools/components/DynamicInput/DynamicInput.svelte';
-export type {
-  DynamicInputVariant,
-  DynamicInputProps,
-  DynamicInputClickEvent,
-  DynamicInputFocusEvent,
-  DynamicInputKeyboardEvent,
-} from '$lib/stories/developer tools/components/DynamicInput/DynamicInput.svelte';
-
-/** developer tools: components: Popper */
-export { default as Popper } from '$lib/stories/developer tools/components/Popper/Popper.svelte';
-export type { PopperProps } from '$lib/stories/developer tools/components/Popper/Popper.svelte';
-export { default as PopperPopup } from '$lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
-export type { PopperPopupProps } from '$lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
-
-/** Form: Button */
-export { default as Button } from '$lib/stories/components/Form/Button/Button.svelte';
 export type {
-  ButtonLinkTarget,
-  ButtonLinkReferrerpolicy,
-  ButtonType,
+  ButtonAsButtonProps,
+  ButtonAsAnchorProps,
   ButtonProps,
-  ButtonClickEvent,
-} from '$lib/stories/components/Form/Button/Button.svelte';
+} from './components/Form/index.js';
+
+/**
+ * TextInput component and related types/events.
+ */
+export { TextInput } from './components/Form/index.js';
 
-/** Form: TextInput */
-export { default as TextInput } from '$lib/stories/components/Form/TextInput/TextInput.svelte';
 export type {
-  TextInputType,
+  TextInputEvent,
   TextInputFocusEvent,
-  TextInputClipboardEvent,
-  TextInputInputEvent,
-  TextInputKeyboardEvent,
   TextInputProps,
-} from '$lib/stories/components/Form/TextInput/TextInput.svelte';
-
-/** Form: PasswordInput */
-export { default as PasswordInput } from '$lib/stories/components/Form/PasswordInput/PasswordInput.svelte';
-export type {
-  PasswordInputToggleEvent,
-  PasswordInputProps,
-} from '$lib/stories/components/Form/PasswordInput/PasswordInput.svelte';
+} from './components/Form/index.js';
 
-/** Form: Label */
-export { default as Label } from '$lib/stories/components/Form/Label/Label.svelte';
-export type { LabelProps } from '$lib/stories/components/Form/Label/Label.svelte';
-
-/** Form: FormControl */
-export { default as FormControl } from '$lib/stories/components/Form/FormControl/FormControl.svelte';
-export type { FormControlProps } from '$lib/stories/components/Form/FormControl/FormControl.svelte';
-
-/** Form: Message */
-export { default as Message } from '$lib/stories/components/Form/Message/Message.svelte';
-export type { MessageProps } from '$lib/stories/components/Form/Message/Message.svelte';
-
-/** Form: Select */
-export { default as Select } from '$lib/stories/components/Form/Select/Select.svelte';
-export type { SelectOption, SelectProps } from '$lib/stories/components/Form/Select/Select.svelte';
-
-/** Form: NumericInput */
-export { default as NumericInput } from '$lib/stories/components/Form/NumericInput/NumericInput.svelte';
-export type { NumericInputProps } from '$lib/stories/components/Form/NumericInput/NumericInput.svelte';
-
-/** Form: DatePicker */
-export { default as DatePicker } from '$lib/stories/components/Form/DatePicker/DatePicker.svelte';
-export type {
-  DatePickerProps,
-  DatePickerCalendarIconPosition,
-} from '$lib/stories/components/Form/DatePicker/DatePicker.svelte';
+/**
+ * InputEnclosure component and related prop types.
+ */
+export { InputEnclosure } from './components/Form/index.js';
 
-/** Form: RangeSlider */
-export { default as RangeSlider } from '$lib/stories/components/Form/RangeSlider/RangeSlider.svelte';
-export type { RangeSliderProps } from '$lib/stories/components/Form/RangeSlider/RangeSlider.svelte';
-
-/** Form: Toggle */
-export { default as Toggle } from '$lib/stories/components/Form/Toggle/Toggle.svelte';
-export type { ToggleProps } from '$lib/stories/components/Form/Toggle/Toggle.svelte';
-
-/** Form: Checkbox */
-export { default as Checkbox } from '$lib/stories/components/Form/Checkbox/Checkbox.svelte';
-export type { CheckboxProps } from '$lib/stories/components/Form/Checkbox/Checkbox.svelte';
-
-/** Form: Radio */
-export { default as Radio } from '$lib/stories/components/Form/Radio/Radio.svelte';
-export type { RadioProps } from '$lib/stories/components/Form/Radio/Radio.svelte';
-
-/** Form: Search */
-export { default as Search } from '$lib/stories/components/Form/Search/Search.svelte';
-export type { SearchProps } from '$lib/stories/components/Form/Search/Search.svelte';
-
-/** Layout: Paper */
-export { default as Paper } from '$lib/stories/components/Layout/Paper/Paper.svelte';
-export type { PaperColor, PaperProps } from '$lib/stories/components/Layout/Paper/Paper.svelte';
-
-/** Layout: Separator */
-export { default as Separator } from '$lib/stories/components/Layout/Separator/Separator.svelte';
-export type {
-  SeparatorProps,
-  SeparatorOrientation,
-} from '$lib/stories/components/Layout/Separator/Separator.svelte';
-
-/** Layout: Menu */
-export { default as Menu } from '$lib/stories/components/Layout/Menu/Menu.svelte';
-export type { MenuProps } from '$lib/stories/components/Layout/Menu/Menu.svelte';
-export { default as MenuItem } from '$lib/stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
-export type {
-  MenuItemType,
-  MenuItemProps,
-} from '$lib/stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
-export { default as DynamicMenu } from '$lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
-export type {
-  DynamicMenuItemOption,
-  DynamicMenuProps,
-} from '$lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
-
-/** Layout: Grid */
-export { default as Grid } from '$lib/stories/components/Layout/Grid/Grid.svelte';
-export type { GridProps } from '$lib/stories/components/Layout/Grid/Grid.svelte';
-export { default as Row } from '$lib/stories/components/Layout/Grid/Row/Row.svelte';
-export type { GridRowProps } from '$lib/stories/components/Layout/Grid/Row/Row.svelte';
-export { default as Column } from '$lib/stories/components/Layout/Grid/Column/Column.svelte';
-export type {
-  GridColumnSize,
-  GridColumnProps,
-} from '$lib/stories/components/Layout/Grid/Column/Column.svelte';
-
-/** Layout: Accordian */
-export { default as Accordian } from '$lib/stories/components/Layout/Accordian/Accordian.svelte';
-export type {
-  AccordianProps,
-  AccordianToggleEvent,
-} from '$lib/stories/components/Layout/Accordian/Accordian.svelte';
-
-/** Info: Calendar */
-export { default as Calendar } from '$lib/stories/components/Info/Calendar/Calendar.svelte';
-export type {
-  CalendarProps,
-  CalendarActiveSection,
-} from '$lib/stories/components/Info/Calendar/Calendar.svelte';
-
-export { default as CalendarDatesChart } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';
-export type { CalendarDatesChartProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';
-export { default as CalendarDateChip } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte';
-export type { CalendarDateChipProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte';
-export {
-  default as CalendarWeek,
-  calendarWeekOptions,
-} from '$lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
-export type {
-  CalendarWeekProps,
-  CalendarWeekOption,
-  CalendarWeekNames,
-  CalendarWeekDayNameType,
-} from '$lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.svelte';
-
-export type { CalendarControlsProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.svelte';
-export { default as CalendarControls } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.svelte';
-export type {
-  CalendarMonthNames,
-  CalendarMonthOption,
-  calendarMonthNameType,
-  CalendarMonthSelectorProps,
-} from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
-export {
-  default as CalendarMonthSelector,
-  calendarMonthOptions,
-} from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
-export type { CalendarYearSelectorProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.svelte';
-export { default as CalendarYearSelector } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.svelte';
-
-export type { CalendarNavigationProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.svelte';
-export { default as CalendarNavigation } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.svelte';
-
-export type { CalendarMonthListProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.svelte';
-export { default as CalendarMonthList } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.svelte';
-export type { CalendarMonthChipProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.svelte';
-export { default as CalendarMonthChip } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.svelte';
-
-export type { CalendarYearListProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.svelte';
-export { default as CalendarYearList } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.svelte';
-export type { CalendarYearChipProps } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.svelte';
-export { default as CalendarYearChip } from '$lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.svelte';
-
-export type { DateOfMonth } from '$lib/stories/components/Info/Calendar/utils/types.js';
-export { DAYS_OF_WEEK, MONTHS } from '$lib/stories/components/Info/Calendar/utils/types.js';
-export { default as getDatesOfMonth } from '$lib/stories/components/Info/Calendar/utils/getDatesOfMonth/getDatesOfMonth.js';
-export { default as createDateOfMonth } from '$lib/stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.js';
-export type {
-  CreateDatesOfMonthSettings,
-  CreateDateOfMonthType,
-} from '$lib/stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.js';
+export type { InputEnclosureProps } from './components/Form/index.js';

package/src/lib/styles/scss/mixins/_button-color.scss

@@ -0,0 +1,140 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+
+// ======================================================
+// 1. Token Maps (Defined first to avoid Undefined Variable errors)
+// ======================================================
+
+$dodo-ui-button-scale-light: (
+  outline: 400,
+  text-bg: 100,
+  text-hover: 200,
+  text-active: 300,
+  solid-bg: 500,
+  solid-hover: 600,
+  solid-active: 700,
+);
+
+$dodo-ui-button-scale-dark: (
+  outline: (
+    300,
+    90%,
+    #fff,
+  ),
+  text-bg: (
+    50,
+    90%,
+    #fff,
+  ),
+  text-hover: (
+    100,
+    90%,
+    #fff,
+  ),
+  text-active: (
+    200,
+    90%,
+    #fff,
+  ),
+  solid-bg: 400,
+  solid-hover: 300,
+  solid-active: 200,
+);
+
+// ======================================================
+// 2. Helpers
+// ======================================================
+
+@function _dodo-ui-resolve-color($color-name, $value) {
+  @if meta.type-of($value) == list {
+    $shade: list.nth($value, 1);
+    $mix: list.nth($value, 2);
+    $mix-color: list.nth($value, 3);
+
+    @return color-mix(in oklab, var(--dodo-color-#{$color-name}-#{$shade}) #{$mix}, #{$mix-color});
+  }
+
+  @return var(--dodo-color-#{$color-name}-#{$value});
+}
+
+// ======================================================
+// 3. Mixins
+// ======================================================
+
+@mixin generate-dodo-ui-button-colors($color-name, $mode: light) {
+  // Fix for Deprecation Warning [if-function] and Undefined Variable
+  $scale: null;
+  @if $mode == dark {
+    $scale: $dodo-ui-button-scale-dark;
+  } @else {
+    $scale: $dodo-ui-button-scale-light;
+  }
+
+  --dodo-ui-Button-outline-#{$color-name}: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, outline)
+    )};
+
+  --dodo-ui-Button-text-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-bg)
+    )};
+  --dodo-ui-Button-text-#{$color-name}-hover-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-hover)
+    )};
+  --dodo-ui-Button-text-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, text-active)
+    )};
+
+  --dodo-ui-Button-solid-#{$color-name}-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-bg)
+    )};
+  --dodo-ui-Button-solid-#{$color-name}-hover-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-hover)
+    )};
+  --dodo-ui-Button-solid-#{$color-name}-active-bg: #{_dodo-ui-resolve-color(
+      $color-name,
+      map.get($scale, solid-active)
+    )};
+}
+
+@mixin generate-dodo-ui-button-color($theme) {
+  &--#{$theme} {
+    &.variant {
+      &--text {
+        color: var(--dodo-color-#{$theme}-800);
+        background-color: var(--dodo-ui-Button-text-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-Button-text-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-Button-text-#{$theme}-active-bg);
+        }
+
+        &.outline {
+          border-color: var(--dodo-ui-Button-outline-#{$theme});
+        }
+      }
+
+      &--solid {
+        color: var(--dodo-color-constant-white);
+        background-color: var(--dodo-ui-Button-solid-#{$theme}-bg);
+
+        &:hover {
+          background-color: var(--dodo-ui-Button-solid-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background-color: var(--dodo-ui-Button-solid-#{$theme}-active-bg);
+        }
+      }
+    }
+  }
+}

package/dist/stories/components/Form/Button/Button.stories.svelte

@@ -1,57 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Button, { buttonTypeArray } from './Button.svelte';
-import { componentRoundnessArray } from '../../../../types/roundness.js';
-import { componentColorArray } from '../../../../types/colors.js';
-import { componentWeightArray } from '../../../../types/weight.js';
-import { componentSizeArray } from '../../../../types/size.js';
-export const storyButtonArgTypes = {
-    type: {
-        control: { type: 'select' },
-        options: buttonTypeArray,
-    },
-    color: {
-        control: { type: 'select' },
-        options: componentColorArray,
-    },
-    variant: {
-        control: { type: 'select' },
-        options: componentWeightArray,
-    },
-    roundness: {
-        control: { type: 'select' },
-        options: componentRoundnessArray,
-    },
-    size: {
-        control: { type: 'select' },
-        options: componentSizeArray,
-    },
-};
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: Button,
-    tags: ['autodocs'],
-    argTypes: storyButtonArgTypes,
-});
-</script>
-
-<!-- Button with default style -->
-<Story name="Primary">Click me!</Story>
-
-<!-- Button with border around it -->
-<Story name="Outline" args={{ outline: true, variant: 'text' }}>Click me!</Story>
-
-<Story name="Disabled" args={{ disabled: true }}>Click me!</Story>
-
-<!-- Form submit button -->
-<Story name="Sumbit Button" args={{ type: 'submit' }}>Submit Form</Story>
-
-<!-- Form submit button -->
-<Story name="Full width Button" args={{ fullWidth: true }}>Click me!</Story>
-
-<!-- Anchor Link styled like a Button -->
-<Story
-  name="Link Button"
-  args={{ href: 'https://www.w3schools.com/tags/tag_a.asp', target: '_blank' }}
->
-  Link
-</Story>