@ndlib/component-library 0.0.18 → 0.0.20

package/dist/components/elements/text/ReadMore/index.js

@@ -0,0 +1,74 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+/** @jsxImportSource theme-ui */
+import React, { useState } from 'react';
+import { useTheme } from '../../../../theme';
+import { COLOR } from '../../../../theme/colors';
+import { getTypographyStyles, } from '../../../../theme/typography';
+const ReadMoreLink = () => {
+    return (_jsx("div", Object.assign({ css: {
+            whiteSpace: 'nowrap',
+            position: 'absolute',
+            right: 0,
+            bottom: 0,
+            paddingLeft: '3rem',
+            background: 'linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 30%, rgb(255, 255, 255))',
+        } }, { children: _jsx("div", Object.assign({ "aria-hidden": "true", sx: {
+                transform: 'scale(0.9)',
+                color: COLOR.ND_BLUE_LIGHT,
+                cursor: 'pointer',
+            } }, { children: "Read More..." })) })));
+};
+const useLinesHeight = (args) => {
+    const theme = useTheme();
+    const styles = getTypographyStyles(args.typography);
+    const fontSize = styles.fontSize;
+    const fontSizeRem = theme.fontSizes[fontSize];
+    // slice of the 'rem' from end of fontSize string and convert to number
+    const fontSizeNumber = Number(fontSizeRem.slice(0, fontSizeRem.length - 3));
+    // Multiply the fontSize by the lineHeight ratio and the number of lines
+    const linesHeight = fontSizeNumber * theme.lineHeights[styles.lineHeight] * args.lines;
+    return `${linesHeight}rem`;
+};
+// A react component that accepts text content and truncates it 3 lines. If the content
+// exceeds the alloted space, an ellipsis will be placed at the end of the last line.
+// This component does not use the css property `text-overflow: ellipsis`
+// because it does not work with multiple lines of text.
+export const ReadMore = (_a) => {
+    var { text, typography, sx, role, lines, fixedHeight } = _a, rest = __rest(_a, ["text", "typography", "sx", "role", "lines", "fixedHeight"]);
+    const ref = React.useRef(null);
+    const [showEllipsis, setShowEllipsis] = useState(true);
+    const wrapperHeight = useLinesHeight({ typography, lines });
+    React.useEffect(() => {
+        if (ref.current) {
+            // Check if the content exceeds the alloted space
+            if (fixedHeight) {
+                ref.current.style.height = wrapperHeight;
+            }
+            else {
+                ref.current.style.maxHeight = wrapperHeight;
+            }
+            const isOverflowing = ref.current.scrollHeight > ref.current.clientHeight;
+            if (isOverflowing) {
+                setShowEllipsis(true);
+            }
+            else {
+                setShowEllipsis(false);
+            }
+        }
+    }, [text, wrapperHeight, fixedHeight]);
+    return (_jsxs("div", Object.assign({ role: role || 'paragraph', ref: ref, style: {
+            overflow: 'hidden',
+            position: 'relative',
+        }, sx: Object.assign(Object.assign({}, getTypographyStyles(typography)), sx) }, rest, { children: [text, showEllipsis && _jsx(ReadMoreLink, {})] })));
+};

package/dist/components/providers/menu.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+export declare enum MENU_ACTION_TYPE {
+    SUBMENU = "SUBMENU",
+    LINK = "LINK"
+}
+export declare enum MENU_ORIENTATION {
+    HORIZONTAL = "HORIZONTAL",
+    VERTICAL = "VERTICAL"
+}
+type SubmenuAction = {
+    type: MENU_ACTION_TYPE.SUBMENU;
+    submenu: Menu;
+};
+type LinkAction = {
+    type: MENU_ACTION_TYPE.LINK;
+    to: string;
+};
+type Action = SubmenuAction | LinkAction;
+type MenuItem = {
+    id: string;
+    label: string;
+    action: Action;
+};
+export type Menu = {
+    orientation: MENU_ORIENTATION;
+    items: MenuItem[];
+};
+type Path = string[];
+type HtmlAttributes = Omit<React.HTMLAttributes<any>, 'color'>;
+type MenuContextType = {
+    menu: Menu;
+    activePath: Path;
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    getMenuItem: (path: Path) => MenuItem | undefined;
+    getMenuItemProps: (path: Path) => HtmlAttributes;
+    getMenuProps: (path?: Path) => HtmlAttributes;
+};
+type MenuProviderProps = {
+    menu: Menu;
+    children: React.ReactNode | ((context: MenuContextType) => React.ReactNode);
+};
+export declare const useMenu: () => MenuContextType;
+export declare const MenuProvider: React.FC<MenuProviderProps>;
+export {};

package/dist/components/providers/menu.js

@@ -0,0 +1,305 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { useEnvironment } from './env';
+import { KEY_CODES, equals } from '../../utils/misc';
+import { useUniqueHtmlId } from '../../utils/hooks/useUniqueHtmlId';
+import { useCheckMidClick } from '../../utils/hooks/useCheckMidClick';
+export var MENU_ACTION_TYPE;
+(function (MENU_ACTION_TYPE) {
+    MENU_ACTION_TYPE["SUBMENU"] = "SUBMENU";
+    MENU_ACTION_TYPE["LINK"] = "LINK";
+})(MENU_ACTION_TYPE || (MENU_ACTION_TYPE = {}));
+export var MENU_ORIENTATION;
+(function (MENU_ORIENTATION) {
+    MENU_ORIENTATION["HORIZONTAL"] = "HORIZONTAL";
+    MENU_ORIENTATION["VERTICAL"] = "VERTICAL";
+})(MENU_ORIENTATION || (MENU_ORIENTATION = {}));
+const MenuContext = React.createContext({
+    menu: { items: [], orientation: MENU_ORIENTATION.HORIZONTAL },
+    activePath: [],
+    isOpen: false,
+    open: () => { },
+    close: () => { },
+    getMenuItem: () => undefined,
+    getMenuItemProps: () => ({}),
+    getMenuProps: () => ({}),
+});
+const getAriaRoleDescription = (orientation) => {
+    if (orientation === MENU_ORIENTATION.HORIZONTAL) {
+        return 'Menu item, press right arrow to navigate to next item, press enter to select';
+    }
+    else {
+        return 'Menu item, press down arrow to navigate to next item, press enter to select';
+    }
+};
+export const useMenu = () => React.useContext(MenuContext);
+const activeStyles = {
+    outline: '2px solid blue',
+};
+const inactiveStyles = {
+    outline: 'none',
+};
+export const MenuProvider = ({ menu, children, }) => {
+    const { flagInDevelopment } = useEnvironment();
+    const salt = useUniqueHtmlId();
+    const { isMidClick, elementProps: checkMidclickProps } = useCheckMidClick();
+    const [usingKeyboard, setUsingKeyboard] = useState(false);
+    const closeOnBlurTimeout = React.useRef();
+    const initialPath = React.useMemo(() => [menu.items[0].id], [menu]);
+    const [activePath, setActivePath] = useState(initialPath);
+    const [isOpen, setIsOpen] = useState(false);
+    const getItemId = React.useCallback((path) => `menu-${salt}-item-${path.join('-')}`, [salt]);
+    useEffect(() => {
+        if (activePath && isOpen) {
+            const activeChild = window.document.getElementById(getItemId(activePath));
+            activeChild === null || activeChild === void 0 ? void 0 : activeChild.focus();
+            clearTimeout(closeOnBlurTimeout.current);
+        }
+    }, [activePath, getItemId, isOpen]);
+    const open = React.useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    const close = React.useCallback(() => {
+        setIsOpen(false);
+        setUsingKeyboard(false);
+    }, []);
+    const getMenuItem = React.useCallback((path) => {
+        let menuItem = undefined;
+        for (const pathSegment of path) {
+            if (!menuItem) {
+                menuItem = menu.items.find((item) => item.id === pathSegment);
+            }
+            else if (menuItem.action.type === MENU_ACTION_TYPE.SUBMENU) {
+                menuItem = menuItem.action.submenu.items.find((item) => item.id === pathSegment);
+            }
+            if (!menuItem) {
+                return undefined;
+            }
+        }
+        return menuItem;
+    }, [menu]);
+    const activeMenuItem = React.useMemo(() => getMenuItem(activePath), [activePath, getMenuItem]);
+    const activeParentMenu = React.useMemo(() => {
+        let parentMenu = menu;
+        const tempActivePath = [...activePath];
+        tempActivePath.pop();
+        if (tempActivePath.length > 0) {
+            const parentMenuItem = getMenuItem(tempActivePath);
+            if ((parentMenuItem === null || parentMenuItem === void 0 ? void 0 : parentMenuItem.action.type) === MENU_ACTION_TYPE.SUBMENU) {
+                parentMenu = parentMenuItem === null || parentMenuItem === void 0 ? void 0 : parentMenuItem.action.submenu;
+            }
+            else {
+                flagInDevelopment('');
+            }
+        }
+        return parentMenu;
+    }, [activePath, menu, getMenuItem, flagInDevelopment]);
+    const activeIndex = React.useMemo(() => {
+        return activeParentMenu.items.findIndex((item) => item.id === activePath[activePath.length - 1]);
+    }, [activeParentMenu, activePath]);
+    const currentMenuLength = activeParentMenu.items.length;
+    const onFocus = React.useCallback(() => {
+        if (!isMidClick.current) {
+            setUsingKeyboard(true);
+            open();
+        }
+    }, [isMidClick, open]);
+    const onBlur = React.useCallback(() => {
+        closeOnBlurTimeout.current = setTimeout(() => {
+            close();
+            setActivePath(initialPath);
+        }, 300);
+    }, [close, initialPath]);
+    const onKeyDown = React.useCallback((e) => {
+        const navigateNext = () => {
+            const nextIndex = (activeIndex + 1) % currentMenuLength;
+            const nextId = activeParentMenu.items[nextIndex].id;
+            setActivePath([...activePath.slice(0, activePath.length - 1), nextId]);
+        };
+        const navigatePrevious = () => {
+            if (activeIndex === 0) {
+                navigateOut();
+            }
+            else {
+                const prevIndex = activeIndex - 1;
+                const prevId = activeParentMenu.items[prevIndex].id;
+                setActivePath([...activePath.slice(0, activePath.length - 1), prevId]);
+            }
+        };
+        const navigateIn = () => {
+            var _a;
+            if (((_a = activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action) === null || _a === void 0 ? void 0 : _a.type) === MENU_ACTION_TYPE.SUBMENU) {
+                setActivePath([
+                    ...activePath,
+                    activeMenuItem.action.submenu.items[0].id,
+                ]);
+            }
+            else {
+                navigateNext();
+            }
+        };
+        const navigateOut = () => {
+            if (activePath.length > 1) {
+                setActivePath(activePath.slice(0, activePath.length - 1));
+            }
+        };
+        const select = () => {
+            if ((activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action.type) === MENU_ACTION_TYPE.SUBMENU) {
+                setActivePath(activePath.concat([activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.id]));
+            }
+            else if ((activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action.type) === MENU_ACTION_TYPE.LINK) {
+                window.location.href = activeMenuItem.action.to;
+            }
+        };
+        const isVertical = activeParentMenu.orientation === MENU_ORIENTATION.VERTICAL;
+        if (e.key === KEY_CODES.ENTER) {
+            if ((activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action.type) === MENU_ACTION_TYPE.LINK) {
+                select();
+            }
+            else if ((activeMenuItem === null || activeMenuItem === void 0 ? void 0 : activeMenuItem.action.type) === MENU_ACTION_TYPE.SUBMENU) {
+                navigateIn();
+            }
+        }
+        else {
+            setUsingKeyboard(true);
+        }
+        if (e.key === KEY_CODES.ESCAPE) {
+            if (activePath.length > 1) {
+                navigateOut();
+            }
+            else {
+                const activeChild = window.document.getElementById(getItemId(activePath));
+                activeChild === null || activeChild === void 0 ? void 0 : activeChild.blur();
+            }
+        }
+        if (e.key === KEY_CODES.ARROW_DOWN) {
+            if (isVertical) {
+                navigateNext();
+            }
+            else {
+                navigateIn();
+            }
+        }
+        if (e.key === KEY_CODES.ARROW_UP) {
+            if (isVertical) {
+                navigatePrevious();
+            }
+            else {
+                navigateOut();
+            }
+        }
+        if (e.key === KEY_CODES.ARROW_RIGHT) {
+            if (isVertical) {
+                navigateIn();
+            }
+            else {
+                navigateNext();
+            }
+        }
+        if (e.key === KEY_CODES.ARROW_LEFT) {
+            if (isVertical) {
+                navigateOut();
+            }
+            else {
+                navigatePrevious();
+            }
+        }
+    }, [
+        activePath,
+        activeIndex,
+        activeMenuItem,
+        activeParentMenu,
+        currentMenuLength,
+        getItemId,
+    ]);
+    const getMenuProps = React.useCallback((path) => {
+        const isTopLevel = !path;
+        let _menu = menu;
+        let menuItem = undefined;
+        if (path) {
+            menuItem = getMenuItem(path);
+            if ((menuItem === null || menuItem === void 0 ? void 0 : menuItem.action.type) === MENU_ACTION_TYPE.SUBMENU) {
+                _menu = menuItem.action.submenu;
+            }
+        }
+        const isVertical = _menu.orientation === MENU_ORIENTATION.VERTICAL;
+        const topLevelProps = Object.assign(Object.assign({}, checkMidclickProps), { onKeyDown,
+            onFocus,
+            onBlur });
+        return Object.assign({ role: 'menu', 'aria-orientation': isVertical ? 'vertical' : 'horizontal', tabIndex: isTopLevel ? 0 : -1 }, (isTopLevel ? topLevelProps : {}));
+    }, [menu, onFocus, onBlur, checkMidclickProps, getMenuItem, onKeyDown]);
+    const getMenuItemProps = React.useCallback((path) => {
+        const isTopLevel = path.length === 1;
+        const isActivePath = equals(path, activePath);
+        return Object.assign(Object.assign({}, checkMidclickProps), { role: 'menuitem', 'aria-roledescription': getAriaRoleDescription(activeParentMenu.orientation), id: getItemId(path), onKeyDown: equals(path, activePath) ? onKeyDown : undefined, tabIndex: -1, onFocus: () => {
+                // Screen readers will send focus to buttons without firing keydown or click
+                // Call setActivePath to sync
+                if (!isMidClick) {
+                    setActivePath(path);
+                }
+            }, onMouseDown: () => {
+                checkMidclickProps.onMouseDown();
+                const menuItem = getMenuItem(path);
+                // Because blurring will close the dropdown menu, link navigation should be
+                // triggered before that happened. Mousedown is used instead of click because
+                // it is triggered before blur event
+                if ((menuItem === null || menuItem === void 0 ? void 0 : menuItem.action.type) === MENU_ACTION_TYPE.LINK) {
+                    window.location.href = menuItem.action.to;
+                }
+            }, onClick: (e) => {
+                const menuItem = getMenuItem(path);
+                const isSubmenu = (menuItem === null || menuItem === void 0 ? void 0 : menuItem.action.type) === MENU_ACTION_TYPE.SUBMENU;
+                if (!isSubmenu) {
+                    // Link menu items should not trigger navigation because that is handled by mousedown listener
+                    e.preventDefault();
+                }
+                // If user is using a mouse, clicking the top level menu that is open
+                // should close the menu
+                if (isSubmenu &&
+                    isActivePath &&
+                    isTopLevel &&
+                    !usingKeyboard &&
+                    isOpen) {
+                    close();
+                    // Clicking a top level menu that is closed or not the active menu should
+                    // open that menu
+                }
+                else if (isSubmenu && isTopLevel && !usingKeyboard && !isOpen) {
+                    setActivePath(path);
+                    open();
+                    // If user is using a mouse, or if the menu is a link, handle the same way
+                    // as enter key press
+                }
+                else {
+                    onKeyDown({
+                        key: KEY_CODES.ENTER,
+                    });
+                }
+            }, style: isOpen && usingKeyboard && equals(path, activePath)
+                ? activeStyles
+                : inactiveStyles });
+    }, [
+        getItemId,
+        getMenuItem,
+        activePath,
+        isOpen,
+        checkMidclickProps,
+        close,
+        open,
+        onKeyDown,
+        usingKeyboard,
+        activeParentMenu,
+        isMidClick,
+    ]);
+    const contextValue = {
+        menu,
+        isOpen,
+        open,
+        close,
+        activePath,
+        getMenuItem,
+        getMenuProps,
+        getMenuItemProps,
+    };
+    return (_jsx(MenuContext.Provider, Object.assign({ value: contextValue }, { children: typeof children === 'function' ? children(contextValue) : children })));
+};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { theme, ThemeProvider } from './theme';
+export { theme, ThemeProvider, useTheme } from './theme';
 export { COLOR } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
 export { Alert, Alerts } from './components/elements/Alerts';
@@ -13,6 +13,18 @@ export { Box } from './components/elements/layout/Box';
 export { Column } from './components/elements/layout/Column';
 export { Row } from './components/elements/layout/Row';
 export { Link, LINK_SIZE } from './components/elements/Link';
+export { NavMenu } from './components/composites/NavMenu';
+export { INPUT_SIZE, TextInput } from './components/elements/Fields/TextInput';
+export { Select } from './components/elements/Fields/Select';
+export { DatePicker } from './components/elements/Fields/DatePicker';
+export { MonthPicker } from './components/elements/Fields/MonthPicker';
+export { Checkbox } from './components/elements/Fields/Checkbox';
+export { CheckboxGroup } from './components/elements/Fields/CheckboxGroup';
+export { Radio } from './components/elements/Fields/Radio';
+export { RadioGroup } from './components/elements/Fields/RadioGroup';
+export { List, ListItem, LIST_SIZE } from './components/elements/List';
+export { ReadMore } from './components/elements/text/ReadMore';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
+export { MenuProvider, useMenu } from './components/providers/menu';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { theme, ThemeProvider } from './theme';
+export { theme, ThemeProvider, useTheme } from './theme';
 export { COLOR } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
 export { Alert, Alerts } from './components/elements/Alerts';
@@ -13,6 +13,18 @@ export { Box } from './components/elements/layout/Box';
 export { Column } from './components/elements/layout/Column';
 export { Row } from './components/elements/layout/Row';
 export { Link, LINK_SIZE } from './components/elements/Link';
+export { NavMenu } from './components/composites/NavMenu';
+export { INPUT_SIZE, TextInput } from './components/elements/Fields/TextInput';
+export { Select } from './components/elements/Fields/Select';
+export { DatePicker } from './components/elements/Fields/DatePicker';
+export { MonthPicker } from './components/elements/Fields/MonthPicker';
+export { Checkbox } from './components/elements/Fields/Checkbox';
+export { CheckboxGroup } from './components/elements/Fields/CheckboxGroup';
+export { Radio } from './components/elements/Fields/Radio';
+export { RadioGroup } from './components/elements/Fields/RadioGroup';
+export { List, ListItem, LIST_SIZE } from './components/elements/List';
+export { ReadMore } from './components/elements/text/ReadMore';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
+export { MenuProvider, useMenu } from './components/providers/menu';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';

package/dist/theme/GlobalStyles.d.ts

@@ -0,0 +1 @@
+export declare const GlobalStyles: () => import("react/jsx-runtime").JSX.Element;

package/dist/theme/GlobalStyles.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Global, css } from '@emotion/react';
+import { colors } from './colors';
+const globalStyles = css `
+  html,
+  body,
+  div,
+  span,
+  applet,
+  object,
+  iframe,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  a,
+  abbr,
+  acronym,
+  address,
+  big,
+  cite,
+  code,
+  del,
+  dfn,
+  em,
+  img,
+  ins,
+  kbd,
+  q,
+  s,
+  samp,
+  small,
+  strike,
+  strong,
+  sub,
+  sup,
+  tt,
+  var,
+  b,
+  u,
+  i,
+  center,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  fieldset,
+  form,
+  label,
+  legend,
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  article,
+  aside,
+  canvas,
+  details,
+  embed,
+  figure,
+  figcaption,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  output,
+  ruby,
+  section,
+  summary,
+  time,
+  mark,
+  audio,
+  video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+
+  /* HTML5 display-role reset for older browsers */
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+    font-size: 16px;
+  }
+  ol,
+  ul {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  .ndlib-date-picker .react-datepicker__header,
+  .ndlib-date-picker .react-datepicker__header * {
+    color: white;
+    background-color: ${colors.primary};
+  }
+
+  .ndlib-date-picker .react-datepicker__header {
+    width: 280px;
+  }
+
+  .ndlib-date-picker .react-datepicker__day-names {
+    margin-top: 4px;
+  }
+
+  .ndlib-date-picker .react-datepicker__month .react-datepicker__month-text {
+    padding: 4px;
+  }
+
+  @font-face {
+    font-family: GPCMed;
+    font-display: swap;
+    src: url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff2')
+        format('woff2'),
+      url('https://static.nd.edu/fonts/gp-min/gpc-medium.woff') format('woff'),
+      url('https://static.nd.edu/fonts/gp-min/gpc-medium.ttf')
+        format('truetype');
+  }
+`;
+export const GlobalStyles = () => {
+    return _jsx(Global, { styles: globalStyles });
+};

package/dist/theme/colors.d.ts

@@ -11,6 +11,7 @@ export declare enum COLOR {
     LIGHT_GRAY = "lightGray",
     FAINT_GRAY = "faintGray",
     ND_BLUE = "ndBlue",
+    ND_BLUE_LIGHT = "ndBlueLight",
     ND_GOLD = "ndGold",
     ND_SKY_BLUE = "ndSkyBlue",
     ND_SKY_BLUE_DARK = "ndSkyBlueDark",

package/dist/theme/colors.js

@@ -12,6 +12,7 @@ export var COLOR;
     COLOR["LIGHT_GRAY"] = "lightGray";
     COLOR["FAINT_GRAY"] = "faintGray";
     COLOR["ND_BLUE"] = "ndBlue";
+    COLOR["ND_BLUE_LIGHT"] = "ndBlueLight";
     COLOR["ND_GOLD"] = "ndGold";
     COLOR["ND_SKY_BLUE"] = "ndSkyBlue";
     COLOR["ND_SKY_BLUE_DARK"] = "ndSkyBlueDark";
@@ -49,6 +50,7 @@ export const colors = {
     [COLOR.LIGHT_GRAY]: '#949494',
     [COLOR.FAINT_GRAY]: '#eeeeee',
     [COLOR.ND_BLUE]: '#0c2340',
+    [COLOR.ND_BLUE_LIGHT]: '#143865',
     [COLOR.ND_GOLD]: '#d39F10',
     [COLOR.ND_SKY_BLUE]: '#e1e8f2',
     [COLOR.ND_SKY_BLUE_DARK]: '#c1cddd',

package/dist/theme/index.d.ts

@@ -18,6 +18,7 @@ export declare const theme: {
         lightGray: string;
         faintGray: string;
         ndBlue: string;
+        ndBlueLight: string;
         ndGold: string;
         ndSkyBlue: string;
         ndSkyBlueDark: string;
@@ -99,6 +100,7 @@ export declare const useTheme: () => {
         lightGray: string;
         faintGray: string;
         ndBlue: string;
+        ndBlueLight: string;
         ndGold: string;
         ndSkyBlue: string;
         ndSkyBlueDark: string;