@flightlesslabs/dodo-ui 0.19.0 → 0.20.0

package/src/lib/components/Layout/Theme/Theme.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module>
+  import { BROWSER } from 'esm-env';
+
+  import type { Snippet } from 'svelte';
+  import type { ComponentTheme, ComponentThemeColors } from '$lib/attributes/theme.js';
+  import { setThemeContext } from './ThemeSystem/context.js';
+  import { useThemeStore } from './ThemeSystem/theme.svelte.js';
+
+  /**
+   * Public props for Theme
+   */
+  export interface ThemeProps {
+    /** Custom CSS class names */
+    class?: string;
+
+    /** Slot content */
+    children?: Snippet;
+
+    /** Theme mode: 'auto' | 'light' | 'dark' */
+    type?: ComponentTheme;
+
+    /** Syncs the theme with the global theme store */
+    global?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  let { class: className = '', children, type = 'auto', global = false }: ThemeProps = $props();
+
+  // 🔁 Local theme state
+  let theme = $state<ComponentThemeColors>('light');
+
+  /**
+   * 🌍 Global sync (store → local)
+   */
+  $effect(() => {
+    if (!global) return;
+
+    const storeTheme = useThemeStore.theme;
+
+    if (theme !== storeTheme) {
+      theme = storeTheme;
+    }
+  });
+
+  /**
+   * 🎛 Theme resolution (local logic)
+   */
+  $effect(() => {
+    if (global) return;
+
+    if (type !== 'auto') {
+      if (theme !== type) {
+        theme = type;
+      }
+      return;
+    }
+
+    if (!BROWSER) return;
+
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const apply = (isDark: boolean) => {
+      const next = isDark ? 'dark' : 'light';
+      if (theme !== next) theme = next;
+    };
+
+    apply(mq.matches);
+
+    const listener = (e: MediaQueryListEvent) => {
+      apply(e.matches);
+    };
+
+    mq.addEventListener('change', listener);
+
+    return () => {
+      mq.removeEventListener('change', listener);
+    };
+  });
+
+  /**
+   * 📡 Global sync (local → store)
+   */
+  $effect(() => {
+    if (!global) return;
+
+    const storeTheme = useThemeStore.theme;
+
+    if (storeTheme !== theme) {
+      useThemeStore.updateSystemTheme(theme);
+    }
+  });
+
+  /**
+   * 🧩 Context (reactive via getters)
+   */
+  setThemeContext({
+    get theme() {
+      return theme;
+    },
+  });
+
+  /**
+   * 🎨 Classes
+   */
+  const classes = $derived(['dodo-ui-Theme', `dodo-theme--${theme}`, className]);
+</script>
+
+<div class={classes.join(' ')}>
+  {@render children?.()}
+</div>

package/src/lib/components/Layout/Theme/ThemeSystem/context.ts

@@ -0,0 +1,18 @@
+import type { ComponentThemeColors } from '$lib/attributes/theme.js';
+import { createContext } from 'svelte';
+
+export interface ThemeContext {
+  theme: ComponentThemeColors;
+}
+
+export const [getThemeContext, setThemeContext] = createContext<ThemeContext>();
+
+export function useThemeContext(): ThemeContext {
+  try {
+    return getThemeContext();
+  } catch {
+    return {
+      theme: 'light',
+    };
+  }
+}

package/src/lib/components/Layout/Theme/ThemeSystem/index.mdx

@@ -0,0 +1,53 @@
+import { Source } from '@storybook/addon-docs/blocks';
+
+# 🎨 Theme System
+
+A lightweight theme system built using context + local store.
+
+## 🧩 Theme Context
+
+### 📦 Import
+
+<Source
+  dark
+  language="ts"
+  code={`
+import { useThemeContext } from '@flightlesslabs/dodo-ui';
+`}
+/>
+
+Provides access to the active theme.
+
+### Usage
+
+<Source
+  dark
+  language="ts"
+  code={`
+const { theme } = useThemeContext();
+`}
+/>
+
+## 🏪 Theme Store
+
+Global theme state.
+
+### 📦 Import
+
+<Source
+  dark
+  language="ts"
+  code={`
+import { useThemeStore } from '@flightlesslabs/dodo-ui';
+`}
+/>
+
+### Read
+
+<Source
+  dark
+  language="ts"
+  code={`
+const theme = useThemeStore.theme;
+`}
+/>

package/src/lib/components/Layout/Theme/ThemeSystem/theme.svelte.ts

@@ -0,0 +1,16 @@
+import type { ComponentThemeColors } from '$lib/attributes/theme.js';
+
+function createThemeStore() {
+  let systemTheme = $state<ComponentThemeColors>('light');
+
+  return {
+    get theme() {
+      return systemTheme;
+    },
+    updateSystemTheme(theme: ComponentThemeColors) {
+      systemTheme = theme;
+    },
+  };
+}
+
+export const useThemeStore = createThemeStore();

package/src/lib/index.ts

@@ -1,241 +1,225 @@
-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';
-
-/** 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,
-  ButtonProps,
-  ButtonClickEvent,
-} from '$lib/stories/components/Form/Button/Button.svelte';
-
-/** Form: TextInput */
-export { default as TextInput } from '$lib/stories/components/Form/TextInput/TextInput.svelte';
-export type {
-  TextInputType,
-  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';
-
-/** 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';
+/**
+ * Button component and related prop types.
+ */
+export {
+  default as Button,
+  type ButtonAsButtonProps,
+  type ButtonAsAnchorProps,
+  type ButtonProps,
+} from './components/Form/Button/Button.svelte';
+
+/**
+ * TextInput component and related types/events.
+ */
+export {
+  default as TextInput,
+  type TextInputEvent,
+  type TextInputFocusEvent,
+  type TextInputProps,
+} from './components/Form/TextInput/TextInput.svelte';
+
+/**
+ * InputEnclosure component and related prop types.
+ */
+export {
+  default as InputEnclosure,
+  type InputEnclosureProps,
+} from './components/Form/InputEnclosure/InputEnclosure.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';
+/**
+ * FormField component and related prop types.
+ */
+export {
+  default as FormField,
+  type FormFieldProps,
+} from './components/Form/FormField/FormField.svelte';
 
-/** 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';
+/**
+ * Checkbox component and related prop types.
+ */
+export {
+  default as Checkbox,
+  type CheckboxProps,
+} from './components/Form/Checkbox/Checkbox.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';
+/**
+ * RadioGroup component and related prop types.
+ */
+export {
+  default as RadioGroup,
+  type RadioGroupProps,
+} from './components/Form/RadioGroup/RadioGroup.svelte';
+export { default as Radio, type RadioProps } from './components/Form/RadioGroup/Radio/Radio.svelte';
+
+/**
+ * Switch component and related prop types.
+ */
+export { default as Switch, type SwitchProps } from './components/Form/Switch/Switch.svelte';
+
+/**
+ * UtilityButton component and related prop types.
+ */
+export {
+  default as UtilityButton,
+  type UtilityButtonAsButtonProps,
+  type UtilityButtonAsAnchorProps,
+  type UtilityButtonProps,
+} from './components/Form/UtilityButton/UtilityButton.svelte';
+
+/**
+ * Select component and related prop types.
+ */
+export {
+  default as Select,
+  type SelectProps,
+  type SelectOption,
+} from './components/Form/Select/Select.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';
+export { type SelectInputProps } from './components/Form/Select/SelectInput.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';
+export { type SelectPopupProps } from './components/Form/Select/SelectPopup.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';
+/**
+ * DatePicker component and related prop types.
+ */
+export {
+  default as DatePicker,
+  type DatePickerProps,
+} from './components/Form/DatePicker/DatePicker.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';
+export { type DatePickerInputProps } from './components/Form/DatePicker/DatePickerInput/DatePickerInput.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';
+export { type DatePickerPopupProps } from './components/Form/DatePicker/DatePickerPopup/DatePickerPopup.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';
+// =====================================================
+// Layout Components – Public API
+// =====================================================
 
-/** 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';
+/**
+ * Theme component and related prop types.
+ */
+export { default as Theme, type ThemeProps } from './components/Layout/Theme/Theme.svelte';
+export {
+  useThemeContext,
+  type ThemeContext,
+} from './components/Layout/Theme/ThemeSystem/context.js';
+export { useThemeStore } from './components/Layout/Theme/ThemeSystem/theme.svelte.js';
+
+/**
+ * Card component and related prop types.
+ */
+export {
+  CARD_COLOR,
+  default as Card,
+  cardColorOptions,
+  type CardColor,
+  type CardProps,
+} from './components/Layout/Card/Card.svelte';
+
+// =====================================================
+// Info Components – Public API
+// =====================================================
+
+/**
+ * Calendar component and related prop types.
+ */
+export {
+  default as Calendar,
+  type CalendarProps,
+} from './components/Info/Calendar/Calendar.svelte';
+
+// =====================================================
+// utils – Public API
+// =====================================================
+
+// =====================================================
+// time – Public API
+// =====================================================
+
+/**
+ * createDateFactory and related prop types.
+ */
+export { createDateFactory } from './utils/time/date-creator/createDateFactory/createDateFactory.js';
+export type {
+  CreateDateInput,
+  CreateDateFormat,
+  CreateDateOptions,
+} from './utils/time/date-creator/createDateFactory/types.js';
+
+/**
+ * createDate and related prop types.
+ */
+export { createDate } from './utils/time/date-creator/createDate/createDate.js';
+
+/**
+ * timeout and related prop types.
+ */
+export { timeout } from './utils/time/timeout/timeout.js';
+
+// =====================================================
+// attributes – Public API
+// =====================================================
+
+/**
+ * color attribute related prop types.
+ */
+export {
+  COMPONENT_COLOR,
+  componentColorOptions,
+  componentColorPriorityOptions,
+  componentColorSeverityOptions,
+  type ComponentColorPriority,
+  type ComponentColorSeverity,
+  type ComponentColor,
+} from './attributes/color.js';
+
+/**
+ * roundness attribute related prop types.
+ */
+export {
+  COMPONENT_ROUNDNESS,
+  componentRoundnessNumericalOptions,
+  componenRoundnessShapeOptions,
+  componentRoundnessOptions,
+  type ComponentRoundnessNumerical,
+  type ComponentRoundnessShape,
+  type ComponentRoundness,
+} from './attributes/roundness.js';
+
+/**
+ * size attribute related prop types.
+ */
+export { COMPONENT_SIZE, componentSizeOptions, type ComponentSize } from './attributes/size.js';
+
+/**
+ * variant attribute related prop types.
+ */
+export {
+  COMPONENT_VARIANT,
+  componentVariantOptions,
+  type ComponentVariant,
+} from './attributes/variant.js';
+
+/**
+ * shadow attribute related prop types.
+ */
+export {
+  COMPONENT_SHADOW,
+  ComponentShadowOptions,
+  type ComponentShadow,
+} from './attributes/shadow.js';
+
+/**
+ * theme attribute related prop types.
+ */
+export {
+  COMPONENT_THEME,
+  componentThemeOptions,
+  componentThemeColorsOptions,
+  type ComponentThemeColors,
+  type ComponentTheme,
+} from './attributes/theme.js';