@sparkux/themes 0.0.0-stage → 2.0.3

package/types/image/index.d.ts

@@ -0,0 +1,243 @@
+/**
+ *
+ * Image Design Tokens
+ *
+ * @module image
+ *
+ */
+
+import type { ColorScheme as CS, DesignTokens, ExtendedCSS, ExtendedTokens } from '..';
+
+/**
+ * Design Token Sections
+ */
+export declare namespace ImageTokenSections {
+    interface Root {
+        /**
+         * Transition duration of root
+         *
+         * @designToken image.transition.duration
+         */
+        transitionDuration?: string;
+    }
+
+    interface Preview {
+        /**
+         * Icon of preview
+         */
+        icon?: {
+            /**
+             * Icon size of preview
+             *
+             * @designToken image.preview.icon.size
+             */
+            size?: string;
+        };
+        /**
+         * Mask of preview
+         */
+        mask?: {
+            /**
+             * Mask background of preview
+             *
+             * @designToken image.preview.mask.background
+             */
+            background?: string;
+            /**
+             * Mask color of preview
+             *
+             * @designToken image.preview.mask.color
+             */
+            color?: string;
+        };
+    }
+
+    interface Toolbar {
+        /**
+         * Position of toolbar
+         */
+        position?: {
+            /**
+             * Position left of toolbar
+             *
+             * @designToken image.toolbar.position.left
+             */
+            left?: string;
+            /**
+             * Position right of toolbar
+             *
+             * @designToken image.toolbar.position.right
+             */
+            right?: string;
+            /**
+             * Position top of toolbar
+             *
+             * @designToken image.toolbar.position.top
+             */
+            top?: string;
+            /**
+             * Position bottom of toolbar
+             *
+             * @designToken image.toolbar.position.bottom
+             */
+            bottom?: string;
+        };
+        /**
+         * Blur of toolbar
+         *
+         * @designToken image.toolbar.blur
+         */
+        blur?: string;
+        /**
+         * Background of toolbar
+         *
+         * @designToken image.toolbar.background
+         */
+        background?: string;
+        /**
+         * Border color of toolbar
+         *
+         * @designToken image.toolbar.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of toolbar
+         *
+         * @designToken image.toolbar.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border radius of toolbar
+         *
+         * @designToken image.toolbar.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Padding of toolbar
+         *
+         * @designToken image.toolbar.padding
+         */
+        padding?: string;
+        /**
+         * Gap of toolbar
+         *
+         * @designToken image.toolbar.gap
+         */
+        gap?: string;
+    }
+
+    interface Action {
+        /**
+         * Hover background of action
+         *
+         * @designToken image.action.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Color of action
+         *
+         * @designToken image.action.color
+         */
+        color?: string;
+        /**
+         * Hover color of action
+         *
+         * @designToken image.action.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Size of action
+         *
+         * @designToken image.action.size
+         */
+        size?: string;
+        /**
+         * Icon size of action
+         *
+         * @designToken image.action.icon.size
+         */
+        iconSize?: string;
+        /**
+         * Border radius of action
+         *
+         * @designToken image.action.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of action
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of action
+             *
+             * @designToken image.action.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of action
+             *
+             * @designToken image.action.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of action
+             *
+             * @designToken image.action.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of action
+             *
+             * @designToken image.action.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of action
+             *
+             * @designToken image.action.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    }
+
+    /* Static Sections */
+    type ColorScheme = CS<ImageDesignTokens>;
+    type CSS = ExtendedCSS;
+    type Extend = ExtendedTokens;
+}
+
+/**
+ *
+ * _Image Design Tokens_
+ *
+ * @group components
+ * @module image
+ * @see
+ * --- ---
+ * **Compatible Libraries**
+ *
+ * [![PrimeNG](https://i.postimg.cc/63f7jVST/primeng-icon-24.png)](https://primeng.org/theming/styled)
+ * --- ---
+ * **Figma UI Kit**
+ *
+ * [PrimeNG](https://primeng.org/uikit)
+ *
+ */
+export interface ImageDesignTokens extends DesignTokens<ImageDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: ImageTokenSections.Root;
+    /**
+     * Used to pass tokens of the preview section
+     */
+    preview?: ImageTokenSections.Preview;
+    /**
+     * Used to pass tokens of the toolbar section
+     */
+    toolbar?: ImageTokenSections.Toolbar;
+    /**
+     * Used to pass tokens of the action section
+     */
+    action?: ImageTokenSections.Action;
+}

package/types/imagecompare/index.d.ts

@@ -0,0 +1,135 @@
+/**
+ *
+ * ImageCompare Design Tokens
+ *
+ * @module imagecompare
+ *
+ */
+
+import type { ColorScheme as CS, DesignTokens, ExtendedCSS, ExtendedTokens } from '..';
+
+/**
+ * Design Token Sections
+ */
+export declare namespace ImageCompareTokenSections {
+    interface Handle {
+        /**
+         * Size of handle
+         *
+         * @designToken imagecompare.handle.size
+         */
+        size?: string;
+        /**
+         * Hover size of handle
+         *
+         * @designToken imagecompare.handle.hover.size
+         */
+        hoverSize?: string;
+        /**
+         * Background of handle
+         *
+         * @designToken imagecompare.handle.background
+         */
+        background?: string;
+        /**
+         * Hover background of handle
+         *
+         * @designToken imagecompare.handle.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Border color of handle
+         *
+         * @designToken imagecompare.handle.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of handle
+         *
+         * @designToken imagecompare.handle.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Border width of handle
+         *
+         * @designToken imagecompare.handle.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border radius of handle
+         *
+         * @designToken imagecompare.handle.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Transition duration of handle
+         *
+         * @designToken imagecompare.handle.transition.duration
+         */
+        transitionDuration?: string;
+        /**
+         * Focus ring of handle
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of handle
+             *
+             * @designToken imagecompare.handle.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of handle
+             *
+             * @designToken imagecompare.handle.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of handle
+             *
+             * @designToken imagecompare.handle.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of handle
+             *
+             * @designToken imagecompare.handle.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of handle
+             *
+             * @designToken imagecompare.handle.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    }
+
+    /* Static Sections */
+    type ColorScheme = CS<ImageCompareDesignTokens>;
+    type CSS = ExtendedCSS;
+    type Extend = ExtendedTokens;
+}
+
+/**
+ *
+ * _ImageCompare Design Tokens_
+ *
+ * @group components
+ * @module imagecompare
+ * @see
+ * --- ---
+ * **Compatible Libraries**
+ *
+ * [![PrimeNG](https://i.postimg.cc/63f7jVST/primeng-icon-24.png)](https://primeng.org/theming/styled)
+ * --- ---
+ * **Figma UI Kit**
+ *
+ * [PrimeNG](https://primeng.org/uikit)
+ *
+ */
+export interface ImageCompareDesignTokens extends DesignTokens<ImageCompareDesignTokens> {
+    /**
+     * Used to pass tokens of the handle section
+     */
+    handle?: ImageCompareTokenSections.Handle;
+}

package/types/index.d.ts

@@ -0,0 +1,244 @@
+/**
+ *
+ * @module themes
+ *
+ */
+import type { StyleOptions, ThemeOptions } from '@sparkux/styled';
+
+import type { AccordionDesignTokens } from './accordion';
+import type { AutoCompleteDesignTokens } from './autocomplete';
+import type { AvatarDesignTokens } from './avatar';
+import type { BadgeDesignTokens } from './badge';
+import type { BlockUIDesignTokens } from './blockui';
+import type { BreadcrumbDesignTokens } from './breadcrumb';
+import type { ButtonDesignTokens } from './button';
+import type { CardDesignTokens } from './card';
+import type { CarouselDesignTokens } from './carousel';
+import type { CascadeSelectDesignTokens } from './cascadeselect';
+import type { CheckboxDesignTokens } from './checkbox';
+import type { ChipDesignTokens } from './chip';
+import type { ColorPickerDesignTokens } from './colorpicker';
+import type { ConfirmDialogDesignTokens } from './confirmdialog';
+import type { ConfirmPopupDesignTokens } from './confirmpopup';
+import type { ContextMenuDesignTokens } from './contextmenu';
+import type { DataTableDesignTokens } from './datatable';
+import type { DataViewDesignTokens } from './dataview';
+import type { DatePickerDesignTokens } from './datepicker';
+import type { DialogDesignTokens } from './dialog';
+import type { DividerDesignTokens } from './divider';
+import type { DockDesignTokens } from './dock';
+import type { DrawerDesignTokens } from './drawer';
+import type { EditorDesignTokens } from './editor';
+import type { FieldsetDesignTokens } from './fieldset';
+import type { FileUploadDesignTokens } from './fileupload';
+import type { FloatLabelDesignTokens } from './floatlabel';
+import type { GalleriaDesignTokens } from './galleria';
+import type { IconFieldDesignTokens } from './iconfield';
+import type { IftaLabelDesignTokens } from './iftalabel';
+import type { ImageDesignTokens } from './image';
+import type { ImageCompareDesignTokens } from './imagecompare';
+import type { InlineMessageDesignTokens } from './inlinemessage';
+import type { InplaceDesignTokens } from './inplace';
+import type { InputChipsDesignTokens } from './inputchips';
+import type { InputGroupDesignTokens } from './inputgroup';
+import type { InputNumberDesignTokens } from './inputnumber';
+import type { InputOtpDesignTokens } from './inputotp';
+import type { InputTextDesignTokens } from './inputtext';
+import type { KnobDesignTokens } from './knob';
+import type { ListboxDesignTokens } from './listbox';
+import type { MegaMenuDesignTokens } from './megamenu';
+import type { MenuDesignTokens } from './menu';
+import type { MenubarDesignTokens } from './menubar';
+import type { MessageDesignTokens } from './message';
+import type { MeterGroupDesignTokens } from './metergroup';
+import type { MultiSelectDesignTokens } from './multiselect';
+import type { OrderListDesignTokens } from './orderlist';
+import type { OrganizationChartDesignTokens } from './organizationchart';
+import type { OverlayBadgeDesignTokens } from './overlaybadge';
+import type { PaginatorDesignTokens } from './paginator';
+import type { PanelDesignTokens } from './panel';
+import type { PanelMenuDesignTokens } from './panelmenu';
+import type { PasswordDesignTokens } from './password';
+import type { PickListDesignTokens } from './picklist';
+import type { PopoverDesignTokens } from './popover';
+import type { ProgressBarDesignTokens } from './progressbar';
+import type { ProgressSpinnerDesignTokens } from './progressspinner';
+import type { RadioButtonDesignTokens } from './radiobutton';
+import type { RatingDesignTokens } from './rating';
+import type { RippleDesignTokens } from './ripple';
+import type { ScrollPanelDesignTokens } from './scrollpanel';
+import type { SelectDesignTokens } from './select';
+import type { SelectButtonDesignTokens } from './selectbutton';
+import type { SkeletonDesignTokens } from './skeleton';
+import type { SliderDesignTokens } from './slider';
+import type { SpeedDialDesignTokens } from './speeddial';
+import type { SplitButtonDesignTokens } from './splitbutton';
+import type { SplitterDesignTokens } from './splitter';
+import type { StepperDesignTokens } from './stepper';
+import type { StepsDesignTokens } from './steps';
+import type { TabmenuDesignTokens } from './tabmenu';
+import type { TabsDesignTokens } from './tabs';
+import type { TabViewDesignTokens } from './tabview';
+import type { TagDesignTokens } from './tag';
+import type { TerminalDesignTokens } from './terminal';
+import type { TextareaDesignTokens } from './textarea';
+import type { TieredMenuDesignTokens } from './tieredmenu';
+import type { TimelineDesignTokens } from './timeline';
+import type { ToastDesignTokens } from './toast';
+import type { ToggleButtonDesignTokens } from './togglebutton';
+import type { ToggleSwitchDesignTokens } from './toggleswitch';
+import type { ToolbarDesignTokens } from './toolbar';
+import type { TooltipDesignTokens } from './tooltip';
+import type { TreeDesignTokens } from './tree';
+import type { TreeSelectDesignTokens } from './treeselect';
+import type { TreeTableDesignTokens } from './treetable';
+import type { VirtualScrollerDesignTokens } from './virtualscroller';
+
+export interface ColorScheme<T> {
+    light?: Omit<T, 'colorScheme' | 'extend' | 'css'>;
+    dark?: Omit<T, 'colorScheme' | 'extend' | 'css'>;
+}
+
+export interface ColorSchemeDesignToken<T> {
+    colorScheme?: ColorScheme<T>;
+}
+
+export declare type ExtendedCSS = string | ((options: StyleOptions) => string) | undefined;
+export declare type ExtendedTokens = Record<string, object | string | number>;
+
+export interface DesignTokens<T> extends ColorSchemeDesignToken<T> {
+    css?: ExtendedCSS;
+    extend?: ExtendedTokens;
+}
+
+export declare type RequiredDesignTokens<T, C = never> = {
+    [K in keyof Omit<T, keyof DesignTokens<T>>]-?: DeepRequired<T[K]>;
+} & DesignTokens<T> &
+    (C extends never ? object : ColorSchemeDesignToken<C>);
+
+// @todo: Remove this when the types are fixed in the styled package. Use `ColorScale` from `@sparkux/styled` instead.
+export interface PaletteDesignToken {
+    0?: string;
+    50?: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+    950?: string;
+}
+
+export interface ComponentsDesignTokens {
+    accordion?: AccordionDesignTokens;
+    autocomplete?: AutoCompleteDesignTokens;
+    avatar?: AvatarDesignTokens;
+    badge?: BadgeDesignTokens;
+    blockui?: BlockUIDesignTokens;
+    breadcrumb?: BreadcrumbDesignTokens;
+    button?: ButtonDesignTokens;
+    card?: CardDesignTokens;
+    carousel?: CarouselDesignTokens;
+    cascadeselect?: CascadeSelectDesignTokens;
+    checkbox?: CheckboxDesignTokens;
+    chip?: ChipDesignTokens;
+    colorpicker?: ColorPickerDesignTokens;
+    confirmdialog?: ConfirmDialogDesignTokens;
+    confirmpopup?: ConfirmPopupDesignTokens;
+    contextmenu?: ContextMenuDesignTokens;
+    datatable?: DataTableDesignTokens;
+    dataview?: DataViewDesignTokens;
+    datepicker?: DatePickerDesignTokens;
+    dialog?: DialogDesignTokens;
+    divider?: DividerDesignTokens;
+    dock?: DockDesignTokens;
+    drawer?: DrawerDesignTokens;
+    editor?: EditorDesignTokens;
+    fieldset?: FieldsetDesignTokens;
+    fileupload?: FileUploadDesignTokens;
+    floatlabel?: FloatLabelDesignTokens;
+    galleria?: GalleriaDesignTokens;
+    iconfield?: IconFieldDesignTokens;
+    iftalabel?: IftaLabelDesignTokens;
+    image?: ImageDesignTokens;
+    imagecompare?: ImageCompareDesignTokens;
+    inlinemessage?: InlineMessageDesignTokens;
+    inplace?: InplaceDesignTokens;
+    inputchips?: InputChipsDesignTokens;
+    inputgroup?: InputGroupDesignTokens;
+    inputnumber?: InputNumberDesignTokens;
+    inputotp?: InputOtpDesignTokens;
+    inputtext?: InputTextDesignTokens;
+    knob?: KnobDesignTokens;
+    listbox?: ListboxDesignTokens;
+    megamenu?: MegaMenuDesignTokens;
+    menu?: MenuDesignTokens;
+    menubar?: MenubarDesignTokens;
+    message?: MessageDesignTokens;
+    metergroup?: MeterGroupDesignTokens;
+    multiselect?: MultiSelectDesignTokens;
+    orderlist?: OrderListDesignTokens;
+    organizationchart?: OrganizationChartDesignTokens;
+    overlaybadge?: OverlayBadgeDesignTokens;
+    paginator?: PaginatorDesignTokens;
+    panel?: PanelDesignTokens;
+    panelmenu?: PanelMenuDesignTokens;
+    password?: PasswordDesignTokens;
+    picklist?: PickListDesignTokens;
+    popover?: PopoverDesignTokens;
+    progressbar?: ProgressBarDesignTokens;
+    progressspinner?: ProgressSpinnerDesignTokens;
+    radiobutton?: RadioButtonDesignTokens;
+    rating?: RatingDesignTokens;
+    ripple?: RippleDesignTokens;
+    scrollpanel?: ScrollPanelDesignTokens;
+    select?: SelectDesignTokens;
+    selectbutton?: SelectButtonDesignTokens;
+    skeleton?: SkeletonDesignTokens;
+    slider?: SliderDesignTokens;
+    speeddial?: SpeedDialDesignTokens;
+    splitbutton?: SplitButtonDesignTokens;
+    splitter?: SplitterDesignTokens;
+    stepper?: StepperDesignTokens;
+    steps?: StepsDesignTokens;
+    tabmenu?: TabmenuDesignTokens;
+    tabs?: TabsDesignTokens;
+    tabview?: TabViewDesignTokens;
+    tag?: TagDesignTokens;
+    terminal?: TerminalDesignTokens;
+    textarea?: TextareaDesignTokens;
+    tieredmenu?: TieredMenuDesignTokens;
+    timeline?: TimelineDesignTokens;
+    toast?: ToastDesignTokens;
+    togglebutton?: ToggleButtonDesignTokens;
+    toggleswitch?: ToggleSwitchDesignTokens;
+    toolbar?: ToolbarDesignTokens;
+    tooltip?: TooltipDesignTokens;
+    tree?: TreeDesignTokens;
+    treeselect?: TreeSelectDesignTokens;
+    treetable?: TreeTableDesignTokens;
+    virtualscroller?: VirtualScrollerDesignTokens;
+    [key: PropertyKey]: object | string | number | undefined;
+}
+
+export declare type BaseDesignTokens<T extends Partial<{ primitive: unknown; semantic: unknown }> = object> = {
+    primitive?: T extends { primitive?: infer P } ? P : undefined;
+    semantic?: T extends { semantic?: infer S } ? S : undefined;
+};
+
+export declare type Preset<T extends Partial<{ primitive: unknown; semantic: unknown }> = object> = BaseDesignTokens<T> & {
+    components?: ComponentsDesignTokens;
+    extend?: ExtendedTokens;
+    css?: ExtendedCSS;
+    [key: PropertyKey]: object | string | number | undefined;
+};
+
+export declare type Theme = { preset?: Preset; options?: ThemeOptions };
+
+/**
+ * Custom types
+ */
+export declare type DeepRequired<T> = T extends object ? { [K in keyof T]-?: DeepRequired<T[K]> } : T;