@veracity/vui 2.1.0 → 2.2.0

package/dist/esm/tree/treeItem.d.ts

@@ -0,0 +1,8 @@
+import { TreeItemProps } from './tree.types';
+export declare const TreeItemBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Displays a tree item with text and optional icons. Can be shown as selected.
+ */
+export declare const TreeItem: import("../core").VuiComponent<"div", TreeItemProps>;
+export default TreeItem;
+//# sourceMappingURL=treeItem.d.ts.map

package/dist/esm/tree/treeItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeItem.d.ts","sourceRoot":"","sources":["../../../src/tree/treeItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAI5C,eAAO,MAAM,YAAY,+HAcxB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,sDAiJnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/esm/tree/treeItem.js

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import { Box } from '../box';
+import { styled, useStyleConfig, vui } from '../core';
+import { cs, isArray, isReactText } from '../utils';
+import { useTreeContext } from './context';
+import TreeIcon from './treeIcon';
+import TreeText from './treeText';
+export const TreeItemBase = styled.divBox `
+  display: flex;
+  flex-direction: column;
+  line-height: normal;
+  outline: none;
+  align-content: flex-start;
+  align-items: flex-start;
+  overflow: visible;
+  height: auto;
+
+  & [aria-disabled='true'] {
+    cursor: not-allowed;
+    user-select: none;
+  }
+`;
+/**
+ * Displays a tree item with text and optional icons. Can be shown as selected.
+ */
+export const TreeItem = vui((props, ref) => {
+    const mergedProps = { ...useTreeContext(), ...props };
+    const { activeItemId, activeItemIndex, children, center, centerH, centerV = true, className, iconCollapse = 'falMinus', isCollapsed, disabled, iconExpand = 'falPlus', id, items, isActive, isTruncated, key, onClickTreeItem, onToggle, text, ...rest } = mergedProps;
+    const styles = useStyleConfig('Tree', useTreeContext());
+    const { activeBg, h, hoverBg, p, px, py, selectedBg, ...itemStyles } = styles.item;
+    const [collapsedInternal, setIsCollapsedInternal] = useState(false);
+    useEffect(() => {
+        setIsCollapsedInternal(!!isCollapsed);
+    }, [isCollapsed]);
+    const toggle = (e) => {
+        if (!disabled) {
+            onToggle?.({ id, collapsed: !collapsedInternal });
+            setIsCollapsedInternal(!collapsedInternal);
+        }
+        const target = e.target;
+        const active = target?.closest('.vui-tree')?.getElementsByClassName('vui-treeItem-active')[0];
+        active ? (active.style.backgroundColor = 'transparent') : null;
+        onClickTreeItem?.(id);
+        // Avoids triggering parent's onClick
+        e.stopPropagation();
+    };
+    const interactiveProps = !disabled
+        ? {
+            cursor: 'pointer',
+            focusVisibleRing: 2,
+            hoverBg: 'transparent',
+            activeBg: 'transparent',
+            userSelect: 'none'
+        }
+        : {};
+    const hoverTreeItem = (e, type) => {
+        const target = e.target;
+        if (target.classList.contains('vui-treeItem-permanent')) {
+            target.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent';
+            e.stopPropagation();
+        }
+        else {
+            e.preventDefault();
+            const permanent = target
+                .closest('.vui-treeItem')
+                ?.getElementsByClassName('vui-treeItem-permanent')[0];
+            const collapsible = target
+                .closest('.vui-treeItem')
+                ?.getElementsByClassName('vui-treeItem-collapsible')[0];
+            const active = target.closest('.vui-treeItem')?.getElementsByClassName('vui-treeItem-active')[0];
+            permanent ? (permanent.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent') : null;
+            collapsible ? (collapsible.style.backgroundColor = 'transparent') : null;
+            active ? (active.style.backgroundColor = 'hsl(139, 100%, 90%)') : null;
+        }
+    };
+    const isCollapsable = (isArray(children) && children.length > 0) || (isArray(items) && items.length > 0);
+    const isActiveInternal = (!activeItemIndex && isActive) || activeItemIndex === id;
+    return (React.createElement(TreeItemBase, { alignItems: "start", className: cs('vui-treeItem', className), h: collapsedInternal ? h : isCollapsable ? 'auto' : h, id: id, m: 0, onClick: !disabled ? (e) => toggle(e) : undefined, onMouseOut: !disabled ? (e) => hoverTreeItem(e, 'out') : undefined, onMouseOver: !disabled ? (e) => hoverTreeItem(e, 'over') : undefined, p: 0, ref: ref, w: 1, ...itemStyles, ...interactiveProps, ...rest, hoverBg: "transparent" },
+        React.createElement(Box, { flexDirection: "column", hoverBg: "transparent", m: 0, pl: 2, pr: 0, py: py, w: 1 },
+            React.createElement(Box, { alignItems: "center", bg: isActiveInternal ? 'hsl(139, 100%, 90%)' : 'transparent', className: isActiveInternal ? 'vui-treeItem-active' : 'vui-treeItem-permanent', flexDirection: "row", hoverBg: "transparent", m: 0, p: 0, w: 1 },
+                items && items?.length > 0 && (React.createElement(React.Fragment, null, collapsedInternal ? React.createElement(TreeIcon, { mr: 1, name: iconExpand }) : React.createElement(TreeIcon, { mr: 1, name: iconCollapse }))),
+                items?.length === 0 && React.createElement(TreeIcon, { mr: 1, name: "cusDotFullAlt" }),
+                isReactText(text) ? React.createElement(TreeText, { ...{ isTruncated, text } }) : text),
+            isCollapsable && !collapsedInternal && (React.createElement(Box, { className: "vui-treeItem-collapsible", flexDirection: "column", hoverBg: "transparent", m: 0, p: 0, w: 1 }, children ??
+                (isArray(items)
+                    ? items.map(({ key, ...props }, index) => {
+                        return (React.createElement(TreeItem, { activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, key: key ?? index, onClickTreeItem: onClickTreeItem, ...props }));
+                    })
+                    : items))))));
+});
+export default TreeItem;

package/dist/esm/tree/treeText.d.ts

@@ -0,0 +1,5 @@
+import { TProps } from '../t';
+/** Displays text within the TreeItem. */
+export declare const TreeText: import("../core").VuiComponent<"span", TProps>;
+export default TreeText;
+//# sourceMappingURL=treeText.d.ts.map

package/dist/esm/tree/treeText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeText.d.ts","sourceRoot":"","sources":["../../../src/tree/treeText.tsx"],"names":[],"mappings":"AAGA,OAAU,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAIhC,yCAAyC;AACzC,eAAO,MAAM,QAAQ,gDAenB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/esm/tree/treeText.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useStyleConfig, vui } from '../core';
+import T from '../t';
+import { cs, ellipsisOverflow } from '../utils';
+import { useTreeContext } from './context';
+/** Displays text within the TreeItem. */
+export const TreeText = vui((props, ref) => {
+    const { className, ...rest } = props;
+    const styles = useStyleConfig('Tree', useTreeContext());
+    return (React.createElement(T, { className: cs('vui-treeText', className), fontSize: "inherit", py: styles.item.py, ref: ref, ...ellipsisOverflow, ...styles.text, ...rest }));
+});
+export default TreeText;

package/dist/esm/tree/useTreeState.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TreeItemId, TreeItemProps } from './tree.types';
+export declare const useTreeState: (activeItemId?: TreeItemId) => {
+    itemsInternal: TreeItemProps[];
+    setItemsInternal: import("react").Dispatch<import("react").SetStateAction<TreeItemProps[]>>;
+    activeItemIndex: TreeItemId;
+    setActiveItemIndex: import("react").Dispatch<import("react").SetStateAction<TreeItemId>>;
+};
+//# sourceMappingURL=useTreeState.d.ts.map

package/dist/esm/tree/useTreeState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTreeState.d.ts","sourceRoot":"","sources":["../../../src/tree/useTreeState.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAExD,eAAO,MAAM,YAAY,kBAAmB,UAAU;;;;;CAKrD,CAAA"}

package/dist/esm/tree/useTreeState.js

@@ -0,0 +1,6 @@
+import { useState } from 'react';
+export const useTreeState = (activeItemId) => {
+    const [itemsInternal, setItemsInternal] = useState([]);
+    const [activeItemIndex, setActiveItemIndex] = useState(activeItemId ?? '');
+    return { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/avatar/theme.ts

@@ -60,7 +60,8 @@ const baseStyle = {}
 const defaultProps = {
   colorScheme: 'blue',
   size: 'md',
-  variant: 'subtle'
+  variant: 'subtle',
+  fontWeight: 'medium'
 }
 
 const sizes = {

package/src/badge/theme.ts

@@ -2,7 +2,8 @@ const baseStyle = {}
 
 const defaultProps = {
   size: 'md',
-  variant: 'subtleSandstone'
+  variant: 'subtleSandstone',
+  fontWeight: 'medium'
 }
 
 const parts = ['container', 'icon', 'text']

package/src/button/theme.ts

@@ -2,7 +2,8 @@ const baseStyle = {}
 
 const defaultProps = {
   size: 'md',
-  variant: 'primaryDark'
+  variant: 'primaryDark',
+  fontWeight: 'medium'
 }
 
 const parts = ['container', 'icon', 'text']

package/src/divider/divider.tsx

@@ -5,7 +5,7 @@ import { cs, filterUndefined } from '../utils'
 import { DividerProps } from './divider.types'
 
 export const DividerBase = styled.hrBox`
-  border-color: grey.30;
+  border-color: sandstone.90;
 `
 
 /** Visually separates content with a horizontal or vertical line. */

package/src/dragAndDrop/dragAndDrop.tsx

@@ -17,7 +17,7 @@ const DragAndDropBase = styled.labelBox`
   justify-content: center;
 `
 
-/** [Beta] Prepares uploading files by selecting or dragging. */
+/** Prepares uploading files by selecting or dragging. */
 export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
   const {
     accept,
@@ -51,12 +51,12 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
 
   return (
     <DragAndDropBase
-      bg={disabled ? 'grey.20' : 'blue.20'}
       className={cs('vui-drag-and-drop', className)}
       cursor={disabled ? 'not-allowed' : 'pointer'}
       onDragEnter={e => e.preventDefault()}
       onDragOver={e => e.preventDefault()}
       onDrop={e => handleDrop(e)}
+      opacity={disabled ? 0.5 : 1}
       p={5}
       pointerEvents={disabled ? 'none' : 'auto'}
       ref={ref}
@@ -64,7 +64,7 @@ export const DragAndDrop = vui<'label', DragAndDropProps>((props, ref) => {
       {...rest}
     >
       {children || (
-        <T color={disabled ? 'grey.50' : 'auto'} display="flex">
+        <T display="flex">
           <Icon mr={1} name={icon} />
           {text}
         </T>

package/src/dragAndDrop/dragAndDrop.types.ts

@@ -2,7 +2,7 @@ import { BoxProps } from '../box'
 import { IconProp } from '../icon'
 import { ThemingProps } from '../theme'
 
-export type DragAndDropProps = BoxProps &
+export type DragAndDropProps = Omit<BoxProps, 'variant'> &
   ThemingProps<'DragAndDrop'> & {
     /** A string that defines the file types the file input should accept. This string is a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
     accept?: string

package/src/dragAndDrop/theme.ts

@@ -1,10 +1,31 @@
-const baseStyle = {}
+const colors = {
+  bg: 'skyBlue.95',
+  main: 'seaBlue.28',
+  hover: 'skyBlue.90'
+}
 
-const defaultProps = {}
+const baseStyle = {
+  borderWidth: 2,
+  borderStyle: 'solid',
+  borderColor: 'transparent',
+  bg: colors.bg,
+  color: colors.main,
+  hoverBg: colors.hover
+}
+
+const defaultProps = {
+  variant: 'default'
+}
 
 const sizes = {}
 
-const variants = {}
+const variants = {
+  default: {},
+  outlined: {
+    borderColor: colors.main,
+    borderStyle: 'dashed'
+  }
+}
 
 export default {
   baseStyle,

package/src/index.ts

@@ -50,5 +50,6 @@ export * from './tabs'
 export * from './tag'
 export * from './textarea'
 export * from './theme'
+export * from './tree'
 export * from './tutorial'
 export * from './utils'

package/src/input/consts.ts

@@ -1,30 +1,45 @@
 import { InputStateMapping } from './input.types'
 
-export const greyLightColor = 'warmGrey.90'
-export const greyColor = 'sandstone.60'
-export const redColor = 'energyRed.45'
+export const inputColors = {
+  border: 'sandstone.60',
+  placeholder: 'sandstone.55',
+  inputText: 'sandstone.10',
+  helpText: 'sandstone.30',
+  icons: 'seaBlue.28',
+  disabled: 'sandstone.95',
+  focus: 'seaBlue.28',
+  error: 'energyRed.45',
+  loading: 'seaBlue.70',
+  success: 'landGreen.41'
+}
+
+export const stateIcons = {
+  error: 'falExclamationTriangle',
+  loading: 'fadSpinnerThird',
+  success: 'falCheck'
+}
 
 export const inputStateMapping: InputStateMapping = {
   error: {
-    colorScheme: 'red',
+    variant: 'red',
     iconProps: {
-      color: 'energyRed.45',
-      icon: 'falExclamationTriangle'
+      color: inputColors.error,
+      icon: stateIcons.error
     }
   },
   loading: {
-    colorScheme: 'grey',
+    variant: 'grey',
     iconProps: {
       animation: 'vui-spin 0.6s linear infinite',
-      name: 'fadSpinnerThird',
-      pathFill: ['seaBlue.90', 'seaBlue.28']
+      name: stateIcons.loading,
+      pathFill: [inputColors.loading, inputColors.icons]
     }
   },
   success: {
-    colorScheme: 'green',
+    variant: 'green',
     iconProps: {
-      color: 'landGreen.30',
-      icon: 'falCheck'
+      color: inputColors.success,
+      icon: stateIcons.success
     }
   }
 }

package/src/input/helpText.tsx

@@ -4,7 +4,7 @@ import { useStyleConfig, vui } from '../core'
 import Icon from '../icon'
 import P from '../p'
 import { cs } from '../utils'
-import { greyColor, redColor } from './consts'
+import { inputColors } from './consts'
 import { useInputContext } from './context'
 import { HelpTextProps } from './input.types'
 
@@ -15,7 +15,7 @@ export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
   const mergedProps = { ...inputProps, ...props }
   const styles = useStyleConfig('Input', mergedProps)
 
-  const color = isError ? redColor : greyColor
+  const color = isError ? inputColors.error : inputColors.helpText
 
   return (
     <P
@@ -27,7 +27,7 @@ export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
       {...styles.helpText}
       {...rest}
     >
-      {isError && <Icon mr={1} name="falExclamationTriangle" pathFill={redColor} size="sm" />}
+      {isError && <Icon mr={1} name="falExclamationTriangle" pathFill={inputColors.error} size="sm" />}
       {children}
     </P>
   )

package/src/input/input.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
-import { greyColor, greyLightColor, inputStateMapping, redColor } from './consts'
+import { inputColors, inputStateMapping } from './consts'
 import { InputProvider } from './context'
 import { getInitialCount } from './helpers'
 import HelpText from './helpText'
@@ -40,7 +40,6 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     autoFocus,
     children,
     className,
-    colorScheme,
     defaultValue,
     disabled,
     errorText,
@@ -50,7 +49,6 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     input,
     inputProps,
     inputRef,
-    isInvalid,
     itemLeft,
     itemRight,
     helpText,
@@ -80,16 +78,9 @@ export const Input = vui<'div', InputProps>((props, ref) => {
   const [valueInternal, setValueInternal] = useState(defaultValue || '')
   const states = { ...inputStateMapping, ...stateMapping }
 
-  const computedColorScheme = filterUndefined({
-    colorScheme: colorScheme ?? (isInvalid ? 'red' : undefined) ?? states[state]?.colorScheme
-  })
-
-  const styles = useStyleConfig('Input', { ...computedColorScheme, ...props })
+  const styles = useStyleConfig('Input', props)
 
-  const context = useMemo(
-    () => filterUndefined({ colorScheme, disabled, size, variant }),
-    [colorScheme, disabled, size, variant]
-  )
+  const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
 
   function onChange(e: ChangeEvent) {
     setValueInternal(e.target.value)
@@ -99,7 +90,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
 
   const aliasedProps = filterUndefined({
     'aria-disabled': disabled,
-    bg: readOnly ? greyLightColor : undefined,
+    bg: readOnly ? inputColors.disabled : undefined,
     focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
     focusWithinRingColor: readOnly ? 'transparent' : undefined
   })
@@ -147,7 +138,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
         {showCount && (
           <T
             className="vui-inputCount"
-            color={maxLength && count > maxLength ? redColor : greyColor}
+            color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
             position="absolute"
             right={0}
             size="sm"

package/src/input/input.types.ts

@@ -14,7 +14,7 @@ export type InputProps = SystemProps &
     autoComplete?: string
     /** Passed to the inner input. */
     autoFocus?: boolean
-    /** Available theme colors for this component. @default grey */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'green' | 'grey' | 'red'
     /** Passed to the inner input. */
     defaultValue?: number | string
@@ -32,7 +32,7 @@ export type InputProps = SystemProps &
     inputProps?: InputInputProps
     /** Ref passed to the inner input. */
     inputRef?: React.MutableRefObject<HTMLInputElement | null> | null
-    /** Styles the input in invalid state. */
+    /** Deprecated. Please use variant="red" and/or state="error" instead. @deprecated*/
     isInvalid?: boolean
     /** Socket displaying a custom element on the left. */
     itemLeft?: React.ReactNode
@@ -41,11 +41,11 @@ export type InputProps = SystemProps &
     /** Socket displaying help text bellow an input. */
     helpText?: React.ReactNode | string
     /** Passed to the inner input. */
-    max?: number | string
+    max?: number
     /** Passed to the inner input. */
     maxLength?: number
     /** Passed to the inner input. */
-    min?: number | string
+    min?: number
     /** Passed to the inner input. */
     name?: string
     /** Passed to the inner input. */
@@ -69,7 +69,7 @@ export type InputProps = SystemProps &
     /** Object definition of styles and content for each state. */
     stateMapping?: InputStateMapping
     /** Passed to the inner input. */
-    step?: number | string
+    step?: number
     /** Passed to the inner input. */
     type?: InputType
     /** Passed to the inner input. */
@@ -85,7 +85,7 @@ export type InputState = 'default' | 'error' | 'loading' | 'success'
 export type InputStateMapping = Record<
   string,
   {
-    colorScheme?: InputProps['colorScheme']
+    variant?: InputProps['variant']
     iconProps: IconProps
   }
 >

package/src/input/inputIcon.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { useStyleConfig, vui } from '../core'
 import Icon, { IconProps } from '../icon'
 import { cs } from '../utils'
+import { inputColors } from './consts'
 import { useInputContext } from './context'
 
 /** Displays an icon within the Input. */
@@ -12,7 +13,7 @@ export const InputIcon = vui<'svg', IconProps>((props, ref) => {
   const mergedProps = { ...inputProps, ...props }
   const styles = useStyleConfig('Input', mergedProps)
 
-  const color = !mergedProps.disabled ? 'blue.80' : 'grey.50'
+  const color = !mergedProps.disabled ? inputColors.icons : inputColors.placeholder
 
   return <Icon className={cs('vui-inputIcon', className)} color={color} ref={ref} {...styles.icon} {...rest} />
 })

package/src/input/theme.ts

@@ -1,37 +1,24 @@
-import { Dict } from '../utils'
+import { inputColors } from './consts'
 
-function variantDefault(props: Dict) {
-  const { colorScheme: c } = props
-
-  const container = {
-    borderColor: `${c}.80`,
+const baseStyle = {
+  container: {
     focusWithinRing: 2,
-    focusWithinRingColor: `${c}.80`
-  }
-
-  if (c === 'grey') {
-    container.borderColor = `${c}.60`
-    container.focusWithinRingColor = 'blue.50'
+    color: inputColors.inputText
+  },
+  input: {
+    color: { placeholder: inputColors.placeholder }
   }
-
-  const icon = {}
-  const input = {}
-
-  return { container, icon, input }
 }
 
-const baseStyle = {}
-
 const defaultProps = {
-  colorScheme: 'grey',
-  size: 'md',
-  variant: 'default'
+  size: 'lg',
+  variant: 'grey'
 }
 
 const parts = ['container', 'icon', 'input']
 
 const sizes = {
-  xs: {
+  sm: {
     container: {
       fontSize: 'sm',
       h: 24
@@ -41,7 +28,7 @@ const sizes = {
     },
     input: {}
   },
-  sm: {
+  md: {
     container: {
       fontSize: 'sm',
       h: 32
@@ -51,7 +38,7 @@ const sizes = {
     },
     input: {}
   },
-  md: {
+  lg: {
     container: {
       fontSize: 'md',
       h: 40
@@ -61,7 +48,7 @@ const sizes = {
     },
     input: {}
   },
-  lg: {
+  xl: {
     container: {
       fontSize: 'lg',
       h: 48
@@ -74,7 +61,24 @@ const sizes = {
 }
 
 const variants = {
-  default: variantDefault
+  grey: {
+    container: {
+      borderColor: inputColors.border,
+      focusWithinRingColor: inputColors.focus
+    }
+  },
+  green: {
+    container: {
+      borderColor: inputColors.success,
+      focusWithinRingColor: inputColors.success
+    }
+  },
+  red: {
+    container: {
+      borderColor: inputColors.error,
+      focusWithinRingColor: inputColors.error
+    }
+  }
 }
 
 export default {

package/src/skeleton/skeleton.types.ts

@@ -5,7 +5,7 @@ export type SkeletonProps = SystemProps &
   ThemingProps<'Skeleton'> & {
     /** Children are disabled for this component. */
     children?: never
-    /** Available theme colors for this component. @default blue */
+    /** Available theme colors for this component. @deprecated */
     colorScheme?: 'blue' | 'grey'
     /** Displays given amount of skeleton elements. */
     repeat?: number

package/src/skeleton/theme.ts

@@ -1,32 +1,8 @@
-import { Dict } from '../utils'
-
-function variantCircle(props: Dict) {
-  const { colorScheme: c } = props
-
-  const styles = {
-    borderRadius: '50%',
-    bg: `${c}.20`
-  }
-
-  return styles
-}
-
-function variantRectangle(props: Dict) {
-  const { colorScheme: c } = props
-
-  const styles = {
-    borderRadius: 'md',
-    bg: `${c}.20`,
-    w: '100%'
-  }
-
-  return styles
+const baseStyle = {
+  bg: 'skyBlue.95'
 }
 
-const baseStyle = {}
-
 const defaultProps = {
-  colorScheme: 'blue',
   size: 'md',
   variant: 'rect'
 }
@@ -47,8 +23,13 @@ const sizes = {
 }
 
 const variants = {
-  circle: variantCircle,
-  rect: variantRectangle
+  circle: {
+    borderRadius: '50%'
+  },
+  rect: {
+    borderRadius: 'md',
+    w: '100%'
+  }
 }
 
 export default {