mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(root): plugin created to add multiples themes, standard variants created
This commit is contained in:
Junior Garcia
parent
d49fa43aeb
commit
38230e2f02
@ -13,7 +13,7 @@ export default {
|
||||
variant: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["solid", "bordered", "light", "flat", "shadow", "ghost"],
|
||||
options: ["solid", "bordered", "light", "flat", "faded", "shadow", "ghost"],
|
||||
},
|
||||
},
|
||||
color: {
|
||||
|
||||
@ -38,11 +38,16 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/dom-utils": "workspace:*",
|
||||
"@nextui-org/shared-icons": "workspace:*",
|
||||
"@nextui-org/shared-utils": "workspace:*",
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/theme": "workspace:*"
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
"@react-aria/focus": "^3.9.0",
|
||||
"@react-aria/interactions": "^3.12.0",
|
||||
"@react-aria/utils": "^3.14.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/avatar": "workspace:*",
|
||||
"@react-types/checkbox": "^3.4.0",
|
||||
"clean-package": "2.1.1",
|
||||
"react": "^17.0.2"
|
||||
|
||||
@ -1,17 +1,45 @@
|
||||
import {forwardRef} from "@nextui-org/system";
|
||||
import {__DEV__} from "@nextui-org/shared-utils";
|
||||
import {CloseFilledIcon} from "@nextui-org/shared-icons";
|
||||
import {useMemo} from "react";
|
||||
|
||||
import {UseChipProps, useChip} from "./use-chip";
|
||||
|
||||
export interface ChipProps extends Omit<UseChipProps, "ref"> {}
|
||||
|
||||
const Chip = forwardRef<ChipProps, "div">((props, ref) => {
|
||||
const {Component, children, getChipProps} = useChip({
|
||||
const {
|
||||
Component,
|
||||
children,
|
||||
slots,
|
||||
styles,
|
||||
isCloseable,
|
||||
leftContent,
|
||||
rightContent,
|
||||
getCloseButtonProps,
|
||||
getChipProps,
|
||||
} = useChip({
|
||||
ref,
|
||||
...props,
|
||||
});
|
||||
|
||||
return <Component {...getChipProps()}>{children}</Component>;
|
||||
const right = useMemo(() => {
|
||||
if (isCloseable) {
|
||||
return (
|
||||
<span {...getCloseButtonProps()}>{!rightContent ? <CloseFilledIcon /> : rightContent}</span>
|
||||
);
|
||||
}
|
||||
|
||||
return rightContent;
|
||||
}, [rightContent, isCloseable, getCloseButtonProps]);
|
||||
|
||||
return (
|
||||
<Component {...getChipProps()}>
|
||||
{leftContent}
|
||||
<label className={slots.label({class: styles?.label})}>{children}</label>
|
||||
{right}
|
||||
</Component>
|
||||
);
|
||||
});
|
||||
|
||||
if (__DEV__) {
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
import type {ChipVariantProps} from "@nextui-org/theme";
|
||||
import type {ChipVariantProps, ChipSlots, SlotsToClasses} from "@nextui-org/theme";
|
||||
import type {ReactNode} from "react";
|
||||
|
||||
import {HTMLNextUIProps, mapPropsVariants} from "@nextui-org/system";
|
||||
import {mergeProps} from "@react-aria/utils";
|
||||
import {usePress} from "@react-aria/interactions";
|
||||
import {useFocusRing} from "@react-aria/focus";
|
||||
import {chip} from "@nextui-org/theme";
|
||||
import {useDOMRef} from "@nextui-org/dom-utils";
|
||||
import {ReactRef} from "@nextui-org/shared-utils";
|
||||
import {useMemo} from "react";
|
||||
import {clsx, ReactRef} from "@nextui-org/shared-utils";
|
||||
import {useMemo, isValidElement, cloneElement} from "react";
|
||||
|
||||
export interface UseChipProps extends HTMLNextUIProps<"div">, ChipVariantProps {
|
||||
/**
|
||||
@ -19,37 +23,90 @@ export interface UseChipProps extends HTMLNextUIProps<"div">, ChipVariantProps {
|
||||
* Element to be rendered in the right side of the chip.
|
||||
*/
|
||||
rightContent?: React.ReactNode;
|
||||
/**
|
||||
* Classname or List of classes to change the styles of the avatar.
|
||||
* if `className` is passed, it will be added to the base slot.
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* <Chip styles={{
|
||||
* base:"base-classes",
|
||||
* label: "label-classes",
|
||||
* closeButton: "close-button-classes",
|
||||
* }} />
|
||||
* ```
|
||||
*/
|
||||
styles?: SlotsToClasses<ChipSlots>;
|
||||
/**
|
||||
* Callback fired when the chip is closed. if you pass this prop,
|
||||
* the chip will display a close button (rightContent).
|
||||
*/
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export function useChip(originalProps: UseChipProps) {
|
||||
const [props, variantProps] = mapPropsVariants(originalProps, chip.variantKeys);
|
||||
|
||||
const {ref, as, children, className, ...otherProps} = props;
|
||||
const {ref, as, children, leftContent, rightContent, onClose, styles, className, ...otherProps} =
|
||||
props;
|
||||
|
||||
const Component = as || "div";
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
const styles = useMemo(
|
||||
const baseStyles = clsx(styles?.base, className);
|
||||
|
||||
const isCloseable = !!onClose;
|
||||
|
||||
const {focusProps: closeFocusProps, isFocusVisible: isCloseButtonFocusVisible} = useFocusRing();
|
||||
|
||||
const slots = useMemo(
|
||||
() =>
|
||||
chip({
|
||||
...variantProps,
|
||||
className,
|
||||
isCloseButtonFocusVisible,
|
||||
}),
|
||||
[...Object.values(variantProps), className],
|
||||
[...Object.values(variantProps), isCloseButtonFocusVisible, className],
|
||||
);
|
||||
|
||||
const {pressProps: closePressProps} = usePress({
|
||||
isDisabled: !!originalProps?.isDisabled,
|
||||
onPress: onClose,
|
||||
});
|
||||
|
||||
const getChipProps = () => {
|
||||
return {
|
||||
ref: domRef,
|
||||
className: styles,
|
||||
className: slots.base({class: baseStyles}),
|
||||
...otherProps,
|
||||
};
|
||||
};
|
||||
|
||||
const getCloseButtonProps = () => {
|
||||
return {
|
||||
role: "button",
|
||||
tabIndex: 0,
|
||||
className: slots.closeButton({class: styles?.closeButton}),
|
||||
...mergeProps(closePressProps, closeFocusProps),
|
||||
};
|
||||
};
|
||||
|
||||
const getContentClone = (content: ReactNode) =>
|
||||
isValidElement(content)
|
||||
? cloneElement(content, {
|
||||
className: clsx("w-full h-4/5", content.props.className),
|
||||
})
|
||||
: null;
|
||||
|
||||
return {
|
||||
Component,
|
||||
children,
|
||||
slots,
|
||||
styles,
|
||||
leftContent: getContentClone(leftContent),
|
||||
rightContent: getContentClone(rightContent),
|
||||
isCloseable,
|
||||
getCloseButtonProps,
|
||||
getChipProps,
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React from "react";
|
||||
import {ComponentStory, ComponentMeta} from "@storybook/react";
|
||||
import {chip} from "@nextui-org/theme";
|
||||
import {Avatar} from "@nextui-org/avatar";
|
||||
import {CheckIcon} from "@nextui-org/shared-icons";
|
||||
|
||||
import {Chip, ChipProps} from "../src";
|
||||
|
||||
@ -11,7 +13,7 @@ export default {
|
||||
variant: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["solid", "bordered", "light", "flat", "shadow"],
|
||||
options: ["solid", "bordered", "light", "flat", "faded", "shadow"],
|
||||
},
|
||||
},
|
||||
color: {
|
||||
@ -56,3 +58,26 @@ export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
...defaultProps,
|
||||
};
|
||||
|
||||
export const Closeable = Template.bind({});
|
||||
Closeable.args = {
|
||||
...defaultProps,
|
||||
// eslint-disable-next-line
|
||||
onClose: () => console.log("Close"),
|
||||
};
|
||||
|
||||
export const CustomCloseIcon = Template.bind({});
|
||||
CustomCloseIcon.args = {
|
||||
...defaultProps,
|
||||
rightContent: <CheckIcon />,
|
||||
// eslint-disable-next-line
|
||||
onClose: () => console.log("Close"),
|
||||
};
|
||||
|
||||
export const WithAvatar = Template.bind({});
|
||||
WithAvatar.args = {
|
||||
...defaultProps,
|
||||
variant: "flat",
|
||||
color: "secondary",
|
||||
leftContent: <Avatar name="JW" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />,
|
||||
};
|
||||
|
||||
@ -57,11 +57,17 @@ export default {
|
||||
type: "boolean",
|
||||
},
|
||||
},
|
||||
symbol: {
|
||||
control: {
|
||||
type: "text",
|
||||
},
|
||||
},
|
||||
},
|
||||
} as ComponentMeta<typeof Snippet>;
|
||||
|
||||
const defaultProps = {
|
||||
children: "npm install @nextui-org/react",
|
||||
symbol: "$",
|
||||
disableCopy: false,
|
||||
disableTooltip: false,
|
||||
hideCopyButton: false,
|
||||
|
||||
@ -20,8 +20,10 @@ export const parameters = {
|
||||
},
|
||||
darkMode: {
|
||||
current: "dark",
|
||||
darkClass: "dark",
|
||||
stylePreview: true,
|
||||
darkClass: 'dark',
|
||||
lightClass: 'light',
|
||||
classTarget: 'html',
|
||||
dark: {
|
||||
...themes.dark,
|
||||
appBg: "#161616",
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
const {theme} = require("@nextui-org/theme/plugin");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["../**/src/**/*.{js,jsx,ts,tsx}", "../**/stories/**/*.{js,jsx,ts,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require("@nextui-org/theme/plugin")],
|
||||
};
|
||||
darkMode: 'class',
|
||||
plugins: [theme()],
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ export default {
|
||||
variant: {
|
||||
control: {
|
||||
type: "select",
|
||||
options: ["solid", "bordered", "light", "flat", "shadow", "ghost"],
|
||||
options: ["solid", "bordered", "light", "flat", "faded", "shadow"],
|
||||
},
|
||||
},
|
||||
color: {
|
||||
|
||||
1
packages/core/theme/config.d.ts
vendored
Normal file
1
packages/core/theme/config.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
export * from "./dist/config";
|
||||
1
packages/core/theme/config.js
Normal file
1
packages/core/theme/config.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = require("./dist/config");
|
||||
@ -18,6 +18,8 @@
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist",
|
||||
"config.js",
|
||||
"config.d.ts",
|
||||
"plugin.js",
|
||||
"plugin.d.ts",
|
||||
"colors.js",
|
||||
@ -44,12 +46,26 @@
|
||||
"postpack": "clean-package restore"
|
||||
},
|
||||
"dependencies": {
|
||||
"tailwind-variants": "^0.0.30"
|
||||
"color": "^4.2.3",
|
||||
"color2k": "^2.0.2",
|
||||
"deepmerge": "4.2.2",
|
||||
"flat": "^5.0.2",
|
||||
"lodash.foreach": "^4.5.0",
|
||||
"lodash.get": "^4.4.2",
|
||||
"lodash.isempty": "^4.4.0",
|
||||
"tailwind-variants": "^0.0.30",
|
||||
"tailwindcss": "^3.2.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"tailwindcss": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-storysource": "^6.5.12",
|
||||
"clean-package": "2.1.1",
|
||||
"tailwindcss": "^3.2.4"
|
||||
"@types/color": "^3.0.3",
|
||||
"@types/flat": "^5.0.2",
|
||||
"@types/lodash.foreach": "^4.5.7",
|
||||
"@types/lodash.get": "^4.4.7",
|
||||
"@types/lodash.isempty": "^4.4.7",
|
||||
"clean-package": "2.1.1"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
62
packages/core/theme/src/animations/index.ts
Normal file
62
packages/core/theme/src/animations/index.ts
Normal file
@ -0,0 +1,62 @@
|
||||
export const animations = {
|
||||
animation: {
|
||||
"drip-expand": "drip-expand 350ms linear",
|
||||
"spinner-ease-spin": "spinner-spin 0.8s ease infinite",
|
||||
"spinner-linear-spin": "spinner-spin 0.8s linear infinite",
|
||||
"appearance-in": "appearance-in 250ms ease-out normal both",
|
||||
"appearance-out": "appearance-out 60ms ease-in normal both",
|
||||
},
|
||||
keyframes: {
|
||||
"spinner-spin": {
|
||||
"0%": {
|
||||
transform: "rotate(0deg)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "rotate(360deg)",
|
||||
},
|
||||
},
|
||||
"drip-expand": {
|
||||
"0%": {
|
||||
opacity: "0",
|
||||
transform: "scale(0.25)",
|
||||
},
|
||||
"30%": {
|
||||
opacity: "1",
|
||||
},
|
||||
"80%": {
|
||||
opacity: "0.5",
|
||||
},
|
||||
"100%": {
|
||||
transform: "scale(28)",
|
||||
opacity: "0",
|
||||
},
|
||||
},
|
||||
"appearance-in": {
|
||||
"0%": {
|
||||
opacity: "0",
|
||||
transform: "translateZ(0) scale(0.95)",
|
||||
},
|
||||
"60%": {
|
||||
opacity: "0.75",
|
||||
/* Avoid blurriness */
|
||||
backfaceVisibility: "hidden",
|
||||
webkitFontSmoothing: "antialiased",
|
||||
transform: "translateZ(0) scale(1.05)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: "1",
|
||||
transform: "translateZ(0) scale(1)",
|
||||
},
|
||||
},
|
||||
"appearance-out": {
|
||||
"0%": {
|
||||
opacity: "1",
|
||||
transform: "scale(1)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: "0",
|
||||
transform: "scale(0.85)",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,74 +0,0 @@
|
||||
module.exports = {
|
||||
blue: {
|
||||
50: "#e6f1fe",
|
||||
100: "#cce3fd",
|
||||
200: "#99c7fb",
|
||||
300: "#66aaf9",
|
||||
400: "#338ef7",
|
||||
500: "#0072f5",
|
||||
600: "#005bc4",
|
||||
700: "#004493",
|
||||
800: "#002e62",
|
||||
900: "#001731",
|
||||
},
|
||||
green: {
|
||||
50: "#e8faf0",
|
||||
100: "#d1f4e0",
|
||||
200: "#a2e9c1",
|
||||
300: "#74dfa2",
|
||||
400: "#45d483",
|
||||
500: "#17c964",
|
||||
600: "#12a150",
|
||||
700: "#0e793c",
|
||||
800: "#095028",
|
||||
900: "#052814",
|
||||
},
|
||||
pink: {
|
||||
50: "#ffedfa",
|
||||
100: "#ffdcf5",
|
||||
200: "#ffb8eb",
|
||||
300: "#ff95e1",
|
||||
400: "#ff71d7",
|
||||
500: "#ff4ecd",
|
||||
600: "#cc3ea4",
|
||||
700: "#992f7b",
|
||||
800: "#661f52",
|
||||
900: "#331029",
|
||||
},
|
||||
purple: {
|
||||
50: "#f2eafa",
|
||||
100: "#e4d4f4",
|
||||
200: "#c9a9e9",
|
||||
300: "#ae7ede",
|
||||
400: "#9353d3",
|
||||
500: "#7828c8",
|
||||
600: "#6020a0",
|
||||
700: "#481878",
|
||||
800: "#301050",
|
||||
900: "#180828",
|
||||
},
|
||||
red: {
|
||||
50: "#fee7ef",
|
||||
100: "#fdd0df",
|
||||
200: "#faa0bf",
|
||||
300: "#f871a0",
|
||||
400: "#f54180",
|
||||
500: "#f31260",
|
||||
600: "#c20e4d",
|
||||
700: "#920b3a",
|
||||
800: "#610726",
|
||||
900: "#310413",
|
||||
},
|
||||
yellow: {
|
||||
50: "#fef6e9",
|
||||
100: "#fdedd3",
|
||||
200: "#fbdba7",
|
||||
300: "#f9c97c",
|
||||
400: "#f7b750",
|
||||
500: "#f5a524",
|
||||
600: "#c4841d",
|
||||
700: "#936316",
|
||||
800: "#62420e",
|
||||
900: "#312107",
|
||||
},
|
||||
};
|
||||
1
packages/core/theme/src/colors.ts
Normal file
1
packages/core/theme/src/colors.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from "./colors/index";
|
||||
12
packages/core/theme/src/colors/blue.ts
Normal file
12
packages/core/theme/src/colors/blue.ts
Normal file
@ -0,0 +1,12 @@
|
||||
export const blue = {
|
||||
50: "#e6f1fe",
|
||||
100: "#cce3fd",
|
||||
200: "#99c7fb",
|
||||
300: "#66aaf9",
|
||||
400: "#338ef7",
|
||||
500: "#0072f5",
|
||||
600: "#005bc4",
|
||||
700: "#004493",
|
||||
800: "#002e62",
|
||||
900: "#001731",
|
||||
};
|
||||
17
packages/core/theme/src/colors/common.ts
Normal file
17
packages/core/theme/src/colors/common.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import {blue} from "./blue";
|
||||
import {green} from "./green";
|
||||
import {pink} from "./pink";
|
||||
import {purple} from "./purple";
|
||||
import {red} from "./red";
|
||||
import {yellow} from "./yellow";
|
||||
|
||||
export const commonColors = {
|
||||
white: "#ffffff",
|
||||
black: "#000000",
|
||||
blue,
|
||||
green,
|
||||
pink,
|
||||
purple,
|
||||
red,
|
||||
yellow,
|
||||
};
|
||||
12
packages/core/theme/src/colors/green.ts
Normal file
12
packages/core/theme/src/colors/green.ts
Normal file
@ -0,0 +1,12 @@
|
||||
export const green = {
|
||||
50: "#e8faf0",
|
||||
100: "#d1f4e0",
|
||||
200: "#a2e9c1",
|
||||
300: "#74dfa2",
|
||||
400: "#45d483",
|
||||
500: "#17c964",
|
||||
600: "#12a150",
|
||||
700: "#0e793c",
|
||||
800: "#095028",
|
||||
900: "#052814",
|
||||
};
|
||||
3
packages/core/theme/src/colors/index.ts
Normal file
3
packages/core/theme/src/colors/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export * from "./common";
|
||||
export * from "./semantic";
|
||||
export * from "./types";
|
||||
12
packages/core/theme/src/colors/pink.ts
Normal file
12
packages/core/theme/src/colors/pink.ts
Normal file
@ -0,0 +1,12 @@
|
||||
export const pink = {
|
||||
50: "#ffedfa",
|
||||
100: "#ffdcf5",
|
||||
200: "#ffb8eb",
|
||||
300: "#ff95e1",
|
||||
400: "#ff71d7",
|
||||
500: "#ff4ecd",
|
||||
600: "#cc3ea4",
|
||||
700: "#992f7b",
|
||||
800: "#661f52",
|
||||
900: "#331029",
|
||||
};
|
||||
12
packages/core/theme/src/colors/purple.ts
Normal file
12
packages/core/theme/src/colors/purple.ts
Normal file
@ -0,0 +1,12 @@
|
||||
export const purple = {
|
||||
50: "#f2eafa",
|
||||
100: "#e4d4f4",
|
||||
200: "#c9a9e9",
|
||||
300: "#ae7ede",
|
||||
400: "#9353d3",
|
||||
500: "#7828c8",
|
||||
600: "#6020a0",
|
||||
700: "#481878",
|
||||
800: "#301050",
|
||||
900: "#180828",
|
||||
};
|
||||
12
packages/core/theme/src/colors/red.ts
Normal file
12
packages/core/theme/src/colors/red.ts
Normal file
@ -0,0 +1,12 @@
|
||||
export const red = {
|
||||
50: "#fee7ef",
|
||||
100: "#fdd0df",
|
||||
200: "#faa0bf",
|
||||
300: "#f871a0",
|
||||
400: "#f54180",
|
||||
500: "#f31260",
|
||||
600: "#c20e4d",
|
||||
700: "#920b3a",
|
||||
800: "#610726",
|
||||
900: "#310413",
|
||||
};
|
||||
106
packages/core/theme/src/colors/semantic.ts
Normal file
106
packages/core/theme/src/colors/semantic.ts
Normal file
@ -0,0 +1,106 @@
|
||||
import type {SemanticColors, SemanticBaseColors} from "./types";
|
||||
|
||||
import twColors from "tailwindcss/colors";
|
||||
import {readableColor} from "color2k";
|
||||
|
||||
import {swapColorValues} from "../utils/object";
|
||||
|
||||
import {commonColors as common} from "./common";
|
||||
|
||||
const base: SemanticBaseColors = {
|
||||
light: {
|
||||
background: {
|
||||
DEFAULT: "#ffffff",
|
||||
},
|
||||
foreground: {
|
||||
DEFAULT: "#11181C",
|
||||
},
|
||||
border: {
|
||||
DEFAULT: "#00000026",
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
background: {
|
||||
DEFAULT: "#000000",
|
||||
},
|
||||
foreground: {
|
||||
DEFAULT: "#ECEDEE",
|
||||
},
|
||||
border: {
|
||||
DEFAULT: "#ffffff26",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const semanticColorsLight: SemanticColors = {
|
||||
...base.light,
|
||||
neutral: {
|
||||
...twColors.zinc,
|
||||
contrastText: readableColor(twColors.zinc[300]),
|
||||
DEFAULT: twColors.zinc[300],
|
||||
},
|
||||
primary: {
|
||||
...common.blue,
|
||||
contrastText: common.white,
|
||||
DEFAULT: common.blue[500],
|
||||
},
|
||||
secondary: {
|
||||
...common.purple,
|
||||
contrastText: common.white,
|
||||
DEFAULT: common.purple[500],
|
||||
},
|
||||
success: {
|
||||
...common.green,
|
||||
contrastText: common.white,
|
||||
DEFAULT: common.green[500],
|
||||
},
|
||||
warning: {
|
||||
...common.yellow,
|
||||
contrastText: common.white,
|
||||
DEFAULT: common.yellow[500],
|
||||
},
|
||||
danger: {
|
||||
...common.red,
|
||||
contrastText: common.white,
|
||||
DEFAULT: common.red[500],
|
||||
},
|
||||
};
|
||||
|
||||
export const semanticColorsDark: SemanticColors = {
|
||||
...base.dark,
|
||||
neutral: {
|
||||
...swapColorValues(twColors.zinc),
|
||||
contrastText: readableColor(twColors.zinc[700]),
|
||||
DEFAULT: twColors.zinc[700],
|
||||
},
|
||||
primary: {
|
||||
...swapColorValues(common.blue),
|
||||
DEFAULT: common.blue[500],
|
||||
contrastText: common.white,
|
||||
},
|
||||
secondary: {
|
||||
...swapColorValues(common.purple),
|
||||
contrastText: common.white,
|
||||
DEFAULT: common.purple[400],
|
||||
},
|
||||
success: {
|
||||
...swapColorValues(common.green),
|
||||
contrastText: readableColor(common.green[500]),
|
||||
DEFAULT: common.green[500],
|
||||
},
|
||||
warning: {
|
||||
...swapColorValues(common.yellow),
|
||||
contrastText: readableColor(common.yellow[500]),
|
||||
DEFAULT: common.yellow[500],
|
||||
},
|
||||
danger: {
|
||||
...swapColorValues(common.red),
|
||||
contrastText: common.white,
|
||||
DEFAULT: common.red[500],
|
||||
},
|
||||
};
|
||||
|
||||
export const semanticColors = {
|
||||
light: semanticColorsLight,
|
||||
dark: semanticColorsDark,
|
||||
};
|
||||
34
packages/core/theme/src/colors/types.ts
Normal file
34
packages/core/theme/src/colors/types.ts
Normal file
@ -0,0 +1,34 @@
|
||||
export type ColorScale = Partial<{
|
||||
50: string;
|
||||
100: string;
|
||||
200: string;
|
||||
300: string;
|
||||
400: string;
|
||||
500: string;
|
||||
600: string;
|
||||
700: string;
|
||||
800: string;
|
||||
900: string;
|
||||
contrastText: string;
|
||||
DEFAULT: string;
|
||||
}>;
|
||||
|
||||
export type BaseColors = {
|
||||
background: ColorScale;
|
||||
foreground: ColorScale;
|
||||
border: ColorScale;
|
||||
};
|
||||
|
||||
export type SemanticColors = BaseColors & {
|
||||
neutral: ColorScale;
|
||||
primary: ColorScale;
|
||||
secondary: ColorScale;
|
||||
success: ColorScale;
|
||||
warning: ColorScale;
|
||||
danger: ColorScale;
|
||||
};
|
||||
|
||||
export type SemanticBaseColors = {
|
||||
light: BaseColors;
|
||||
dark: BaseColors;
|
||||
};
|
||||
12
packages/core/theme/src/colors/yellow.ts
Normal file
12
packages/core/theme/src/colors/yellow.ts
Normal file
@ -0,0 +1,12 @@
|
||||
export const yellow = {
|
||||
50: "#fef6e9",
|
||||
100: "#fdedd3",
|
||||
200: "#fbdba7",
|
||||
300: "#f9c97c",
|
||||
400: "#f7b750",
|
||||
500: "#f5a524",
|
||||
600: "#c4841d",
|
||||
700: "#936316",
|
||||
800: "#62420e",
|
||||
900: "#312107",
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {translateCenterClasses, ringClasses} from "../../utils";
|
||||
import {translateCenterClasses, ringClasses, colorVariants} from "../../utils";
|
||||
|
||||
/**
|
||||
* Avatar wrapper **Tailwind Variants** component
|
||||
@ -60,22 +60,22 @@ const avatar = tv({
|
||||
},
|
||||
color: {
|
||||
neutral: {
|
||||
base: "bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-100",
|
||||
base: colorVariants.solid.neutral,
|
||||
},
|
||||
primary: {
|
||||
base: "bg-primary",
|
||||
base: colorVariants.solid.primary,
|
||||
},
|
||||
secondary: {
|
||||
base: "bg-secondary",
|
||||
base: colorVariants.solid.secondary,
|
||||
},
|
||||
success: {
|
||||
base: "bg-success text-success-800 dark:text-success-800",
|
||||
base: colorVariants.solid.success,
|
||||
},
|
||||
warning: {
|
||||
base: "bg-warning text-warning-800 dark:text-warning-800",
|
||||
base: colorVariants.solid.warning,
|
||||
},
|
||||
danger: {
|
||||
base: "bg-danger",
|
||||
base: colorVariants.solid.danger,
|
||||
},
|
||||
},
|
||||
radius: {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {ringClasses} from "../../utils";
|
||||
import {ringClasses, colorVariants} from "../../utils";
|
||||
|
||||
/**
|
||||
* Button wrapper **Tailwind Variants** component
|
||||
@ -34,6 +34,7 @@ const button = tv({
|
||||
bordered: "border-2 !bg-transparent",
|
||||
light: "!bg-transparent",
|
||||
flat: "",
|
||||
faded: "border-2",
|
||||
shadow: "",
|
||||
ghost: "border-2 !bg-transparent",
|
||||
},
|
||||
@ -45,12 +46,12 @@ const button = tv({
|
||||
xl: "px-8 h-14 text-lg",
|
||||
},
|
||||
color: {
|
||||
neutral: "bg-neutral-300 dark:bg-neutral-700 text-neutral-800 dark:text-neutral-100",
|
||||
primary: "bg-primary text-white",
|
||||
secondary: "bg-secondary text-white",
|
||||
success: "bg-success text-success-800",
|
||||
warning: "bg-warning text-warning-800",
|
||||
danger: "bg-danger text-white",
|
||||
neutral: colorVariants.solid.neutral,
|
||||
primary: colorVariants.solid.primary,
|
||||
secondary: colorVariants.solid.secondary,
|
||||
success: colorVariants.solid.success,
|
||||
warning: colorVariants.solid.warning,
|
||||
danger: colorVariants.solid.danger,
|
||||
},
|
||||
radius: {
|
||||
none: "rounded-none",
|
||||
@ -95,156 +96,187 @@ const button = tv({
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "neutral",
|
||||
class: "shadow-lg shadow-neutral/40",
|
||||
class: colorVariants.shadow.neutral,
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "primary",
|
||||
class: "shadow-lg shadow-primary/40",
|
||||
class: colorVariants.shadow.primary,
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "secondary",
|
||||
class: "shadow-lg shadow-secondary/40",
|
||||
class: colorVariants.shadow.secondary,
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "success",
|
||||
class: "shadow-lg shadow-success/40",
|
||||
class: colorVariants.shadow.success,
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "warning",
|
||||
class: "shadow-lg shadow-warning/40",
|
||||
class: colorVariants.shadow.warning,
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "danger",
|
||||
class: "shadow-lg shadow-danger/40",
|
||||
class: colorVariants.shadow.danger,
|
||||
},
|
||||
// bordered / color
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "neutral",
|
||||
class: "border-neutral-300 dark:border-neutral-700 text-neutral-700 dark:text-neutral-100",
|
||||
class: colorVariants.bordered.neutral,
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "primary",
|
||||
class: "border-primary text-primary",
|
||||
class: colorVariants.bordered.primary,
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "secondary",
|
||||
class: "border-secondary text-secondary",
|
||||
class: colorVariants.bordered.secondary,
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "success",
|
||||
class: "border-success text-success",
|
||||
class: colorVariants.bordered.success,
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "warning",
|
||||
class: "border-warning text-warning",
|
||||
class: colorVariants.bordered.warning,
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "danger",
|
||||
class: "border-danger text-danger",
|
||||
class: colorVariants.bordered.danger,
|
||||
},
|
||||
// flat / color
|
||||
{
|
||||
variant: "flat",
|
||||
color: "neutral",
|
||||
class: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-100",
|
||||
class: colorVariants.flat.neutral,
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "primary",
|
||||
class: "bg-primary-50 dark:bg-primary-900 text-primary",
|
||||
class: colorVariants.flat.primary,
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "secondary",
|
||||
class: "bg-secondary-50 dark:bg-secondary-900 text-secondary dark:text-secondary-400",
|
||||
class: colorVariants.flat.secondary,
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "success",
|
||||
class: "bg-success-50 dark:bg-success-900 text-success-600 dark:text-success",
|
||||
class: colorVariants.flat.success,
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "warning",
|
||||
class: "bg-warning-50 dark:bg-warning-900 text-warning-600 dark:text-warning",
|
||||
class: colorVariants.flat.warning,
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "danger",
|
||||
class: "bg-danger-50 dark:bg-danger-900 text-danger dark:text-danger-400",
|
||||
class: colorVariants.flat.danger,
|
||||
},
|
||||
// faded / color
|
||||
{
|
||||
variant: "faded",
|
||||
color: "neutral",
|
||||
class: colorVariants.faded.neutral,
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "primary",
|
||||
class: colorVariants.faded.primary,
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "secondary",
|
||||
class: colorVariants.faded.secondary,
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "success",
|
||||
class: colorVariants.faded.success,
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "warning",
|
||||
class: colorVariants.faded.warning,
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "danger",
|
||||
class: colorVariants.faded.danger,
|
||||
},
|
||||
// light / color
|
||||
{
|
||||
variant: "light",
|
||||
color: "neutral",
|
||||
class: "text-neutral-700 dark:text-neutral-100",
|
||||
class: colorVariants.light.neutral,
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "primary",
|
||||
class: "text-primary",
|
||||
class: colorVariants.light.primary,
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "secondary",
|
||||
class: "text-secondary",
|
||||
class: colorVariants.light.secondary,
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "success",
|
||||
class: "text-success",
|
||||
class: colorVariants.light.success,
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "warning",
|
||||
class: "text-warning",
|
||||
class: colorVariants.light.warning,
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "danger",
|
||||
class: "text-danger",
|
||||
class: colorVariants.light.danger,
|
||||
},
|
||||
// ghost / color
|
||||
{
|
||||
variant: "ghost",
|
||||
color: "neutral",
|
||||
class: "border-neutral-300 dark:border-neutral-700 hover:!bg-neutral-300",
|
||||
class: colorVariants.ghost.neutral,
|
||||
},
|
||||
{
|
||||
variant: "ghost",
|
||||
color: "primary",
|
||||
class: "border-primary text-primary hover:text-white hover:!bg-primary",
|
||||
class: colorVariants.ghost.primary,
|
||||
},
|
||||
{
|
||||
variant: "ghost",
|
||||
color: "secondary",
|
||||
class: "border-secondary text-secondary hover:text-white hover:!bg-secondary",
|
||||
class: colorVariants.ghost.secondary,
|
||||
},
|
||||
{
|
||||
variant: "ghost",
|
||||
color: "success",
|
||||
class: "border-success text-success hover:text-white hover:!bg-success",
|
||||
class: colorVariants.ghost.success,
|
||||
},
|
||||
{
|
||||
variant: "ghost",
|
||||
color: "warning",
|
||||
class: "border-warning text-warning hover:text-white hover:!bg-warning",
|
||||
class: colorVariants.ghost.warning,
|
||||
},
|
||||
{
|
||||
variant: "ghost",
|
||||
color: "danger",
|
||||
class: "border-danger text-danger hover:text-white hover:!bg-danger",
|
||||
class: colorVariants.ghost.danger,
|
||||
},
|
||||
// !disabledAnimation / ghost
|
||||
{
|
||||
|
||||
@ -1,70 +1,116 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {ringClasses, colorVariants} from "../../utils";
|
||||
|
||||
/**
|
||||
* Chip wrapper **Tailwind Variants** component
|
||||
*
|
||||
* const styles = chip({...})
|
||||
* const {base, label,closeButton} = chip({...})
|
||||
*
|
||||
* @example
|
||||
* <div className={styles)}>
|
||||
* Default
|
||||
* <div className={base())}>
|
||||
* <label className={label()}>Default</label>
|
||||
* <svg className={closeButton()}>close button</svg>
|
||||
* </div>
|
||||
*/
|
||||
const chip = tv({
|
||||
base: [
|
||||
"relative",
|
||||
"inline-flex",
|
||||
"items-center",
|
||||
"justify-center",
|
||||
"box-border",
|
||||
"font-medium",
|
||||
"select-none",
|
||||
"gap-3",
|
||||
],
|
||||
slots: {
|
||||
base: ["relative", "inline-flex", "items-center", "justify-between", "box-border"],
|
||||
label: "flex-1 text-inherit select-none font-regular",
|
||||
closeButton: [
|
||||
"z-10",
|
||||
"apparance-none",
|
||||
"outline-none",
|
||||
"select-none",
|
||||
"transition-opacity",
|
||||
"opacity-70",
|
||||
"hover:opacity-100",
|
||||
"cursor-pointer",
|
||||
],
|
||||
},
|
||||
variants: {
|
||||
variant: {
|
||||
solid: "",
|
||||
bordered: "border-2 !bg-transparent",
|
||||
light: "!bg-transparent",
|
||||
flat: "",
|
||||
shadow: "",
|
||||
solid: {},
|
||||
bordered: {
|
||||
base: "border-2 !bg-transparent",
|
||||
},
|
||||
light: {
|
||||
base: "!bg-transparent",
|
||||
},
|
||||
flat: {},
|
||||
faded: {
|
||||
base: "border-2",
|
||||
},
|
||||
shadow: {},
|
||||
},
|
||||
color: {
|
||||
neutral: [
|
||||
"bg-neutral-300",
|
||||
"dark:bg-neutral-700",
|
||||
"text-neutral-800",
|
||||
"dark:text-neutral-100",
|
||||
],
|
||||
primary: ["bg-primary", "text-white", "data-[status=checked]:bg-primary-600"],
|
||||
secondary: ["bg-secondary", "text-white", "data-[status=checked]:bg-secondary-600"],
|
||||
success: ["bg-success", "text-success-800", "data-[status=checked]:bg-success-600"],
|
||||
warning: ["bg-warning", "text-warning-800", "data-[status=checked]:bg-warning-600"],
|
||||
danger: ["bg-danger", "text-white", "data-[status=checked]:bg-danger-600"],
|
||||
neutral: {
|
||||
base: [colorVariants.solid.neutral],
|
||||
},
|
||||
primary: {
|
||||
base: [colorVariants.solid.primary, "data-[status=checked]:bg-primary-600"],
|
||||
},
|
||||
secondary: {
|
||||
base: [colorVariants.solid.secondary, "data-[status=checked]:bg-secondary-600"],
|
||||
},
|
||||
success: {
|
||||
base: [colorVariants.solid.success, "data-[status=checked]:bg-success-600"],
|
||||
},
|
||||
warning: {
|
||||
base: [colorVariants.solid.warning, "data-[status=checked]:bg-warning-600"],
|
||||
},
|
||||
danger: {
|
||||
base: [colorVariants.solid.danger, "data-[status=checked]:bg-danger-600"],
|
||||
},
|
||||
},
|
||||
size: {
|
||||
xs: "px-1 h-5 text-xs",
|
||||
sm: "px-2 h-6 text-sm",
|
||||
md: "px-3 h-7 text-base",
|
||||
lg: "px-4 h-8 text-lg",
|
||||
xl: "px-5 h-9 text-xl",
|
||||
xs: {
|
||||
base: "px-0.5 h-5 text-xs",
|
||||
label: "px-0.5",
|
||||
closeButton: "text-sm",
|
||||
},
|
||||
sm: {
|
||||
base: "px-1 h-6 text-sm",
|
||||
label: "px-1",
|
||||
closeButton: "text-base",
|
||||
},
|
||||
md: {
|
||||
base: "px-1 h-7 text-base",
|
||||
label: "px-1",
|
||||
closeButton: "text-lg",
|
||||
},
|
||||
lg: {
|
||||
base: "px-1 h-8 text-lg",
|
||||
label: "px-1",
|
||||
closeButton: "text-xl",
|
||||
},
|
||||
xl: {
|
||||
base: "px-1 h-9 text-xl",
|
||||
label: "px-1",
|
||||
closeButton: "text-2xl",
|
||||
},
|
||||
},
|
||||
radius: {
|
||||
none: "rounded-none",
|
||||
base: "rounded",
|
||||
sm: "rounded-sm",
|
||||
md: "rounded-md",
|
||||
lg: "rounded-lg",
|
||||
xl: "rounded-xl",
|
||||
"2xl": "rounded-2xl",
|
||||
"3xl": "rounded-3xl",
|
||||
full: "rounded-full",
|
||||
none: {base: "rounded-none"},
|
||||
base: {base: "rounded"},
|
||||
sm: {base: "rounded-sm"},
|
||||
md: {base: "rounded-md"},
|
||||
lg: {base: "rounded-lg"},
|
||||
xl: {base: "rounded-xl"},
|
||||
"2xl": {base: "rounded-2xl"},
|
||||
"3xl": {base: "rounded-3xl"},
|
||||
full: {base: "rounded-full"},
|
||||
},
|
||||
isDisabled: {
|
||||
true: "opacity-50 pointer-events-none",
|
||||
true: {base: "opacity-50 pointer-events-none"},
|
||||
},
|
||||
fullWidth: {
|
||||
true: "w-full",
|
||||
true: {base: "w-full"},
|
||||
},
|
||||
isCloseButtonFocusVisible: {
|
||||
true: {
|
||||
closeButton: [...ringClasses, "ring-1", "rounded-full"],
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
@ -80,129 +126,221 @@ const chip = tv({
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "neutral",
|
||||
class: "shadow-lg shadow-neutral/40",
|
||||
class: {
|
||||
base: colorVariants.shadow.neutral,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "primary",
|
||||
class: "shadow-lg shadow-primary/40",
|
||||
class: {
|
||||
base: colorVariants.shadow.primary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "secondary",
|
||||
class: "shadow-lg shadow-secondary/40",
|
||||
class: {
|
||||
base: colorVariants.shadow.secondary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "success",
|
||||
class: "shadow-lg shadow-success/40",
|
||||
class: {
|
||||
base: colorVariants.shadow.success,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "warning",
|
||||
class: "shadow-lg shadow-warning/40",
|
||||
class: {
|
||||
base: colorVariants.shadow.warning,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "danger",
|
||||
class: "shadow-lg shadow-danger/40",
|
||||
class: {
|
||||
base: colorVariants.shadow.danger,
|
||||
},
|
||||
},
|
||||
// bordered / color
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "neutral",
|
||||
class: "border-neutral-300 dark:border-neutral-700 text-neutral-700 dark:text-neutral-100",
|
||||
class: {
|
||||
base: colorVariants.bordered.neutral,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "primary",
|
||||
class: "border-primary text-primary",
|
||||
class: {
|
||||
base: colorVariants.bordered.primary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "secondary",
|
||||
class: "border-secondary text-secondary",
|
||||
class: {
|
||||
base: colorVariants.bordered.secondary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "success",
|
||||
class: "border-success text-success",
|
||||
class: {
|
||||
base: colorVariants.bordered.success,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "warning",
|
||||
class: "border-warning text-warning",
|
||||
class: {
|
||||
base: colorVariants.bordered.warning,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "danger",
|
||||
class: "border-danger text-danger",
|
||||
class: {
|
||||
base: colorVariants.bordered.danger,
|
||||
},
|
||||
},
|
||||
// flat / color
|
||||
{
|
||||
variant: "flat",
|
||||
color: "neutral",
|
||||
class: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-100",
|
||||
class: {
|
||||
base: colorVariants.flat.neutral,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "primary",
|
||||
class: "bg-primary-50 dark:bg-primary-900 text-primary",
|
||||
class: {
|
||||
base: colorVariants.flat.primary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "secondary",
|
||||
class: "bg-secondary-50 dark:bg-secondary-900 text-secondary dark:text-secondary-400",
|
||||
class: {
|
||||
base: colorVariants.flat.secondary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "success",
|
||||
class: "bg-success-50 dark:bg-success-900 text-success-600 dark:text-success",
|
||||
class: {
|
||||
base: colorVariants.flat.success,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "warning",
|
||||
class: "bg-warning-50 dark:bg-warning-900 text-warning-600 dark:text-warning",
|
||||
class: {
|
||||
base: colorVariants.flat.warning,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "danger",
|
||||
class: "bg-danger-50 dark:bg-danger-900 text-danger dark:text-danger-400",
|
||||
class: {
|
||||
base: colorVariants.flat.danger,
|
||||
},
|
||||
},
|
||||
// faded / color
|
||||
{
|
||||
variant: "faded",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: colorVariants.faded.neutral,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: colorVariants.faded.primary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: colorVariants.faded.secondary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "success",
|
||||
class: {
|
||||
base: colorVariants.faded.success,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: colorVariants.faded.warning,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: colorVariants.faded.danger,
|
||||
},
|
||||
},
|
||||
// light / color
|
||||
{
|
||||
variant: "light",
|
||||
color: "neutral",
|
||||
class: "text-neutral-700 dark:text-neutral-100",
|
||||
class: {
|
||||
base: colorVariants.light.neutral,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "primary",
|
||||
class: "text-primary",
|
||||
class: {
|
||||
base: colorVariants.light.primary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "secondary",
|
||||
class: "text-secondary",
|
||||
class: {
|
||||
base: colorVariants.light.secondary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "success",
|
||||
class: "text-success",
|
||||
class: {
|
||||
base: colorVariants.light.success,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "warning",
|
||||
class: "text-warning",
|
||||
class: {
|
||||
base: colorVariants.light.warning,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "danger",
|
||||
class: "text-danger",
|
||||
class: {
|
||||
base: colorVariants.light.danger,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export type ChipVariantProps = VariantProps<typeof chip>;
|
||||
export type ChipSlots = keyof ReturnType<typeof chip>;
|
||||
|
||||
export {chip};
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {colorVariants} from "../../utils";
|
||||
|
||||
/**
|
||||
* Code wrapper **Tailwind Variants** component
|
||||
*
|
||||
@ -14,12 +16,12 @@ const code = tv({
|
||||
base: ["px-2", "py-1", "font-mono", "whitespace-pre-wrap"],
|
||||
variants: {
|
||||
color: {
|
||||
neutral: "text-neutral-800 bg-neutral-100 dark:text-neutral-100 dark:bg-neutral-800",
|
||||
primary: "bg-primary-50 dark:bg-primary-900 text-primary",
|
||||
secondary: "bg-secondary-50 dark:bg-secondary-900 text-secondary dark:text-secondary-400",
|
||||
success: "bg-success-50 dark:bg-success-900 text-success-600 dark:text-success",
|
||||
warning: "bg-warning-50 dark:bg-warning-900 text-warning-600 dark:text-warning",
|
||||
danger: "bg-danger-50 dark:bg-danger-900 text-danger",
|
||||
neutral: colorVariants.flat.neutral,
|
||||
primary: colorVariants.flat.primary,
|
||||
secondary: colorVariants.flat.secondary,
|
||||
success: colorVariants.flat.success,
|
||||
warning: colorVariants.flat.warning,
|
||||
danger: colorVariants.flat.danger,
|
||||
},
|
||||
size: {
|
||||
xs: "text-xs",
|
||||
|
||||
@ -19,9 +19,9 @@ const link = tv({
|
||||
xl: "text-xl",
|
||||
},
|
||||
color: {
|
||||
foreground: "text-foreground dark:text-foreground-dark",
|
||||
foreground: "text-foreground",
|
||||
primary: "text-primary",
|
||||
secondary: "text-secondary dark:text-secondary-dark",
|
||||
secondary: "text-secondary",
|
||||
success: "text-success",
|
||||
warning: "text-warning",
|
||||
danger: "text-danger",
|
||||
@ -45,32 +45,32 @@ const link = tv({
|
||||
{
|
||||
isBlock: true,
|
||||
color: "foreground",
|
||||
class: "hover:after:bg-foreground/25 dark:hover:after:bg-foreground-dark/25",
|
||||
class: "hover:after:bg-foreground/20",
|
||||
},
|
||||
{
|
||||
isBlock: true,
|
||||
color: "primary",
|
||||
class: "hover:after:bg-primary/25",
|
||||
class: "hover:after:bg-primary/20",
|
||||
},
|
||||
{
|
||||
isBlock: true,
|
||||
color: "secondary",
|
||||
class: "hover:after:bg-secondary/25 dark:hover:after:bg-secondary-dark/25",
|
||||
class: "hover:after:bg-secondary/20",
|
||||
},
|
||||
{
|
||||
isBlock: true,
|
||||
color: "success",
|
||||
class: "hover:after:bg-success/25",
|
||||
class: "hover:after:bg-success/20",
|
||||
},
|
||||
{
|
||||
isBlock: true,
|
||||
color: "warning",
|
||||
class: "hover:after:bg-warning/25",
|
||||
class: "hover:after:bg-warning/20",
|
||||
},
|
||||
{
|
||||
isBlock: true,
|
||||
color: "danger",
|
||||
class: "hover:after:bg-danger/25",
|
||||
class: "hover:after:bg-danger/20",
|
||||
},
|
||||
],
|
||||
defaultVariants: {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {ringClasses} from "../../utils";
|
||||
import {ringClasses, colorVariants} from "../../utils";
|
||||
|
||||
/**
|
||||
* Snippet wrapper **Tailwind Variants** component
|
||||
@ -34,22 +34,22 @@ const snippet = tv({
|
||||
},
|
||||
color: {
|
||||
neutral: {
|
||||
base: "text-neutral-800 bg-neutral-100 dark:text-neutral-100 dark:bg-neutral-800",
|
||||
base: colorVariants.flat.neutral,
|
||||
},
|
||||
primary: {
|
||||
base: "bg-primary-50 dark:bg-primary-900 text-primary",
|
||||
base: colorVariants.flat.primary,
|
||||
},
|
||||
secondary: {
|
||||
base: "bg-secondary-50 dark:bg-secondary-900 text-secondary dark:text-secondary-400",
|
||||
base: colorVariants.flat.secondary,
|
||||
},
|
||||
success: {
|
||||
base: "bg-success-50 dark:bg-success-900 text-success-600 dark:text-success",
|
||||
base: colorVariants.flat.success,
|
||||
},
|
||||
warning: {
|
||||
base: "bg-warning-50 dark:bg-warning-900 text-warning-600 dark:text-warning",
|
||||
base: colorVariants.flat.warning,
|
||||
},
|
||||
danger: {
|
||||
base: "bg-danger-50 dark:bg-danger-900 text-danger",
|
||||
base: colorVariants.flat.danger,
|
||||
},
|
||||
},
|
||||
size: {
|
||||
@ -120,45 +120,45 @@ const snippet = tv({
|
||||
compoundVariants: [
|
||||
// solid & shadow / color
|
||||
{
|
||||
variant: ["solid", "shadow"],
|
||||
variant: "solid",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: "bg-neutral-300 dark:bg-neutral-700 text-neutral-800 dark:text-neutral-100",
|
||||
base: colorVariants.solid.neutral,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: ["solid", "shadow"],
|
||||
variant: "solid",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "bg-primary text-white",
|
||||
base: colorVariants.solid.primary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: ["solid", "shadow"],
|
||||
variant: "solid",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "bg-secondary text-white",
|
||||
base: colorVariants.solid.secondary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: ["solid", "shadow"],
|
||||
variant: "solid",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "bg-success text-success-800",
|
||||
base: colorVariants.solid.success,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: ["solid", "shadow"],
|
||||
variant: "solid",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "bg-warning text-warning-800",
|
||||
base: colorVariants.solid.warning,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: ["solid", "shadow"],
|
||||
variant: "solid",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "bg-danger text-white",
|
||||
base: colorVariants.solid.danger,
|
||||
},
|
||||
},
|
||||
// shadow / color
|
||||
@ -166,42 +166,42 @@ const snippet = tv({
|
||||
variant: "shadow",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: "shadow-lg shadow-neutral/40",
|
||||
base: colorVariants.shadow.neutral,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "shadow-lg shadow-primary/40",
|
||||
base: colorVariants.shadow.primary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "shadow-lg shadow-secondary/40",
|
||||
base: colorVariants.shadow.secondary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "shadow-lg shadow-success/40",
|
||||
base: colorVariants.shadow.success,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "shadow-lg shadow-warning/40",
|
||||
base: colorVariants.shadow.warning,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "shadow-lg shadow-danger/40",
|
||||
base: colorVariants.shadow.danger,
|
||||
},
|
||||
},
|
||||
// bordered / color
|
||||
@ -209,42 +209,42 @@ const snippet = tv({
|
||||
variant: "bordered",
|
||||
color: "neutral",
|
||||
class: {
|
||||
base: "border-neutral-300 dark:border-neutral-700 text-neutral-700 dark:text-neutral-100",
|
||||
base: colorVariants.bordered.neutral,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "primary",
|
||||
class: {
|
||||
base: "border-primary text-primary",
|
||||
base: colorVariants.bordered.primary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "secondary",
|
||||
class: {
|
||||
base: "border-secondary text-secondary",
|
||||
base: colorVariants.bordered.secondary,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "success",
|
||||
class: {
|
||||
base: "border-success text-success",
|
||||
base: colorVariants.bordered.success,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "warning",
|
||||
class: {
|
||||
base: "border-warning text-warning",
|
||||
base: colorVariants.bordered.warning,
|
||||
},
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "danger",
|
||||
class: {
|
||||
base: "border-danger text-danger",
|
||||
base: colorVariants.bordered.danger,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -46,8 +46,8 @@ const spinner = tv({
|
||||
size: {
|
||||
xs: {
|
||||
base: "w-4 h-4",
|
||||
circle1: "border-1.5",
|
||||
circle2: "border-1.5",
|
||||
circle1: "border-2",
|
||||
circle2: "border-2",
|
||||
label: "translate-y-6 text-xs",
|
||||
},
|
||||
sm: {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import {tv, type VariantProps} from "tailwind-variants";
|
||||
|
||||
import {colorVariants} from "../../utils";
|
||||
/**
|
||||
* Tooltip wrapper **Tailwind Variants** component
|
||||
*
|
||||
@ -28,17 +29,18 @@ const tooltip = tv({
|
||||
solid: "",
|
||||
bordered: "border-2 !bg-transparent",
|
||||
light: "!bg-transparent",
|
||||
faded: "border-2",
|
||||
flat: "",
|
||||
shadow: "",
|
||||
},
|
||||
color: {
|
||||
neutral: "bg-neutral-300 dark:bg-neutral-700 text-neutral-800 dark:text-neutral-100",
|
||||
foreground: "bg-foreground text-foreground-dark dark:text-foreground-light",
|
||||
primary: "bg-primary text-white",
|
||||
secondary: "bg-secondary text-white",
|
||||
success: "bg-success text-success-800",
|
||||
warning: "bg-warning text-warning-800",
|
||||
danger: "bg-danger text-white",
|
||||
neutral: colorVariants.solid.neutral,
|
||||
foreground: colorVariants.solid.foreground,
|
||||
primary: colorVariants.solid.primary,
|
||||
secondary: colorVariants.solid.secondary,
|
||||
success: colorVariants.solid.success,
|
||||
warning: colorVariants.solid.warning,
|
||||
danger: colorVariants.solid.danger,
|
||||
},
|
||||
size: {
|
||||
xs: "px-2 h-4 text-xs",
|
||||
@ -71,152 +73,187 @@ const tooltip = tv({
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "neutral",
|
||||
class: "shadow-lg shadow-neutral/40",
|
||||
class: colorVariants.shadow.neutral,
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "foreground",
|
||||
class: "shadow-lg shadow-foreground/40",
|
||||
class: colorVariants.shadow.foreground,
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "primary",
|
||||
class: "shadow-lg shadow-primary/40",
|
||||
class: colorVariants.shadow.primary,
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "secondary",
|
||||
class: "shadow-lg shadow-secondary/40",
|
||||
class: colorVariants.shadow.secondary,
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "success",
|
||||
class: "shadow-lg shadow-success/40",
|
||||
class: colorVariants.shadow.success,
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "warning",
|
||||
class: "shadow-lg shadow-warning/40",
|
||||
class: colorVariants.shadow.warning,
|
||||
},
|
||||
{
|
||||
variant: "shadow",
|
||||
color: "danger",
|
||||
class: "shadow-lg shadow-danger/40",
|
||||
class: colorVariants.shadow.danger,
|
||||
},
|
||||
// bordered / color
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "neutral",
|
||||
class: "border-neutral-300 dark:border-neutral-700 text-neutral-700 dark:text-neutral-100",
|
||||
class: colorVariants.bordered.neutral,
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "foreground",
|
||||
class: "border-foreground text-foreground dark:text-foreground-dark",
|
||||
class: colorVariants.bordered.foreground,
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "primary",
|
||||
class: "border-primary text-primary",
|
||||
class: colorVariants.bordered.primary,
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "secondary",
|
||||
class: "border-secondary text-secondary",
|
||||
class: colorVariants.bordered.secondary,
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "success",
|
||||
class: "border-success text-success",
|
||||
class: colorVariants.bordered.success,
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "warning",
|
||||
class: "border-warning text-warning",
|
||||
class: colorVariants.bordered.warning,
|
||||
},
|
||||
{
|
||||
variant: "bordered",
|
||||
color: "danger",
|
||||
class: "border-danger text-danger",
|
||||
class: colorVariants.bordered.danger,
|
||||
},
|
||||
// flat / color
|
||||
{
|
||||
variant: "flat",
|
||||
color: "neutral",
|
||||
class: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-100",
|
||||
class: colorVariants.flat.neutral,
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "foreground",
|
||||
class:
|
||||
"bg-foreground/20 text-foreground dark:bg-foreground-dark/20 dark:text-foreground-dark",
|
||||
class: colorVariants.flat.foreground,
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "primary",
|
||||
class: "bg-primary-50 dark:bg-primary-900 text-primary",
|
||||
class: colorVariants.flat.primary,
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "secondary",
|
||||
class: "bg-secondary-50 dark:bg-secondary-900 text-secondary dark:text-secondary-400",
|
||||
class: colorVariants.flat.secondary,
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "success",
|
||||
class: "bg-success-50 dark:bg-success-900 text-success-600 dark:text-success",
|
||||
class: colorVariants.flat.success,
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "warning",
|
||||
class: "bg-warning-50 dark:bg-warning-900 text-warning-600 dark:text-warning",
|
||||
class: colorVariants.flat.warning,
|
||||
},
|
||||
{
|
||||
variant: "flat",
|
||||
color: "danger",
|
||||
class: "bg-danger-50 dark:bg-danger-900 text-danger dark:text-danger-400",
|
||||
class: colorVariants.flat.danger,
|
||||
},
|
||||
// faded / color
|
||||
{
|
||||
variant: "faded",
|
||||
color: "neutral",
|
||||
class: colorVariants.faded.neutral,
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "foreground",
|
||||
class: colorVariants.faded.foreground,
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "primary",
|
||||
class: colorVariants.faded.primary,
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "secondary",
|
||||
class: colorVariants.faded.secondary,
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "success",
|
||||
class: colorVariants.faded.success,
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "warning",
|
||||
class: colorVariants.faded.warning,
|
||||
},
|
||||
{
|
||||
variant: "faded",
|
||||
color: "danger",
|
||||
class: colorVariants.faded.danger,
|
||||
},
|
||||
// light / color
|
||||
{
|
||||
variant: "light",
|
||||
color: "neutral",
|
||||
class: "text-neutral-700 dark:text-neutral-100",
|
||||
class: colorVariants.light.neutral,
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "foreground",
|
||||
class: "text-foreground dark:text-foreground-dark",
|
||||
class: colorVariants.light.foreground,
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "primary",
|
||||
class: "text-primary",
|
||||
class: colorVariants.light.primary,
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "secondary",
|
||||
class: "text-secondary",
|
||||
class: colorVariants.light.secondary,
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "success",
|
||||
class: "text-success",
|
||||
class: colorVariants.light.success,
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "warning",
|
||||
class: "text-warning",
|
||||
class: colorVariants.light.warning,
|
||||
},
|
||||
{
|
||||
variant: "light",
|
||||
color: "danger",
|
||||
class: "text-danger",
|
||||
class: colorVariants.light.danger,
|
||||
},
|
||||
// size (xs) / bordered
|
||||
{
|
||||
size: "xs",
|
||||
variant: "bordered",
|
||||
class: "border-1.5",
|
||||
class: "border-2",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
80
packages/core/theme/src/config.ts
Normal file
80
packages/core/theme/src/config.ts
Normal file
@ -0,0 +1,80 @@
|
||||
import type {Config as TWConfig} from "tailwindcss/types/config";
|
||||
|
||||
import get from "lodash.get";
|
||||
import deepMerge from "deepmerge";
|
||||
import resolveConfig from "tailwindcss/resolveConfig";
|
||||
|
||||
import {commonColors} from "./colors";
|
||||
// import {theme} from "./plugin";
|
||||
|
||||
export type NextUIDefaultColors = {
|
||||
background: string;
|
||||
foreground: string;
|
||||
border: string;
|
||||
neutral: string;
|
||||
primary: string;
|
||||
secondary: string;
|
||||
success: string;
|
||||
danger: string;
|
||||
warning: string;
|
||||
};
|
||||
|
||||
export type ColorValue =
|
||||
| NextUIDefaultColors
|
||||
| Record<string, string>
|
||||
| Record<string, Record<number, string>>;
|
||||
|
||||
export type Colors = {
|
||||
common?: ColorValue;
|
||||
light?: ColorValue;
|
||||
dark?: ColorValue;
|
||||
};
|
||||
|
||||
export type ExtendedThemeConfig = TWConfig["theme"] & {
|
||||
extend?: Omit<TWConfig["theme"], "extend"> & {
|
||||
colors?: Colors;
|
||||
};
|
||||
};
|
||||
|
||||
export interface Config extends TWConfig {
|
||||
theme?: ExtendedThemeConfig;
|
||||
}
|
||||
|
||||
export type WithNextUI = {
|
||||
<C extends Config>(nextuiConfig: Config): C;
|
||||
};
|
||||
|
||||
export const withNextUI = (tailwindConfig: Config) => {
|
||||
let config = resolveConfig(tailwindConfig);
|
||||
|
||||
const userColors = get(config.theme, "colors", {});
|
||||
// const userLightColors = get(userColors, "light", {});
|
||||
// const userDarkColors = get(userColors, "dark", {});
|
||||
|
||||
if (userColors && config.theme?.colors) {
|
||||
config.theme.colors = deepMerge(userColors, commonColors);
|
||||
}
|
||||
|
||||
// config.plugins = [
|
||||
// theme({
|
||||
// light: {
|
||||
// primary: "#0072f5",
|
||||
// secondary: "darkblue",
|
||||
// brand: "#F3F3F3",
|
||||
// },
|
||||
// dark: {
|
||||
// primary: "#17c964",
|
||||
// secondary: "tomato",
|
||||
// brand: "#4A4A4A",
|
||||
// },
|
||||
// }),
|
||||
// theme({
|
||||
// light: deepMerge(semanticColors.light, userLightColors),
|
||||
// dark: deepMerge(semanticColors.dark, userDarkColors),
|
||||
// }),
|
||||
// ];
|
||||
|
||||
// console.log(config);
|
||||
|
||||
return config;
|
||||
};
|
||||
@ -1,222 +0,0 @@
|
||||
const plugin = require("tailwindcss/plugin");
|
||||
const twColors = require("tailwindcss/colors");
|
||||
|
||||
const colors = require("./colors.js");
|
||||
|
||||
const DEFAULT_TRANSITION_DURATION = "200ms";
|
||||
|
||||
module.exports = plugin(
|
||||
function ({addUtilities}) {
|
||||
addUtilities({
|
||||
/**
|
||||
* Custom utilities
|
||||
*/
|
||||
".leading-inherit": {
|
||||
"line-height": "inherit",
|
||||
},
|
||||
".bg-img-inherit": {
|
||||
"background-image": "inherit",
|
||||
},
|
||||
".bg-clip-inherit": {
|
||||
"background-clip": "inherit",
|
||||
},
|
||||
".text-fill-inherit": {
|
||||
"-webkit-text-fill-color": "inherit",
|
||||
},
|
||||
".transition-background": {
|
||||
"transition-property": "background",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
/**
|
||||
* Tailwind utilities
|
||||
*/
|
||||
".transition-all": {
|
||||
"transition-property": "all",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
".transition": {
|
||||
"transition-property":
|
||||
"color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
".transition-colors": {
|
||||
"transition-property":
|
||||
"color, background-color, border-color, text-decoration-color, fill, stroke",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
".transition-opacity": {
|
||||
"transition-property": "opacity",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
|
||||
".transition-shadow": {
|
||||
"transition-property": "box-shadow",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
|
||||
".transition-transform": {
|
||||
"transition-property": "transform",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
});
|
||||
},
|
||||
{
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
transparent: "transparent",
|
||||
white: "#ffffff",
|
||||
black: "#000000",
|
||||
background: {
|
||||
light: "#ffffff",
|
||||
DEFAULT: "#ffffff",
|
||||
dark: "#000000",
|
||||
},
|
||||
foreground: {
|
||||
light: "#11181C",
|
||||
DEFAULT: "#11181C",
|
||||
dark: "#ECEDEE",
|
||||
},
|
||||
border: {
|
||||
light: "#00000026",
|
||||
DEFAULT: "#00000026",
|
||||
dark: "#ffffff26",
|
||||
},
|
||||
neutral: {
|
||||
...twColors.neutral,
|
||||
light: "#889096",
|
||||
DEFAULT: "#889096",
|
||||
dark: "#697177",
|
||||
},
|
||||
primary: {
|
||||
...colors.blue,
|
||||
light: colors.blue[200],
|
||||
DEFAULT: colors.blue[500],
|
||||
dark: colors.blue[500],
|
||||
},
|
||||
secondary: {
|
||||
...colors.purple,
|
||||
light: colors.purple[200],
|
||||
DEFAULT: colors.purple[500],
|
||||
dark: colors.purple[400],
|
||||
},
|
||||
success: {
|
||||
...colors.green,
|
||||
light: colors.green[200],
|
||||
DEFAULT: colors.green[500],
|
||||
dark: colors.green[500],
|
||||
},
|
||||
warning: {
|
||||
...colors.yellow,
|
||||
light: colors.yellow[400],
|
||||
DEFAULT: colors.yellow[500],
|
||||
dark: colors.yellow[500],
|
||||
},
|
||||
danger: {
|
||||
...colors.red,
|
||||
light: colors.red[200],
|
||||
DEFAULT: colors.red[500],
|
||||
dark: colors.red[500],
|
||||
},
|
||||
red: {
|
||||
...colors.red,
|
||||
DEFAULT: colors.red[500],
|
||||
},
|
||||
yellow: {
|
||||
...colors.yellow,
|
||||
DEFAULT: colors.yellow[500],
|
||||
},
|
||||
green: {
|
||||
...colors.green,
|
||||
DEFAULT: colors.green[500],
|
||||
},
|
||||
blue: {
|
||||
...colors.blue,
|
||||
DEFAULT: colors.blue[500],
|
||||
},
|
||||
purple: {
|
||||
...colors.purple,
|
||||
DEFAULT: colors.purple[500],
|
||||
},
|
||||
pink: {
|
||||
...colors.pink,
|
||||
DEFAULT: colors.pink[500],
|
||||
},
|
||||
},
|
||||
borderWidth: {
|
||||
1.5: "1.5px",
|
||||
3: "3px",
|
||||
5: "5px",
|
||||
},
|
||||
animation: {
|
||||
"drip-expand": "drip-expand 350ms linear",
|
||||
"spinner-ease-spin": "spinner-spin 0.8s ease infinite",
|
||||
"spinner-linear-spin": "spinner-spin 0.8s linear infinite",
|
||||
"appearance-in": "appearance-in 250ms ease-out normal both",
|
||||
"appearance-out": "appearance-out 60ms ease-in normal both",
|
||||
},
|
||||
keyframes: {
|
||||
"spinner-spin": {
|
||||
"0%": {
|
||||
transform: "rotate(0deg)",
|
||||
},
|
||||
"100%": {
|
||||
transform: "rotate(360deg)",
|
||||
},
|
||||
},
|
||||
"drip-expand": {
|
||||
"0%": {
|
||||
opacity: 0,
|
||||
transform: "scale(0.25)",
|
||||
},
|
||||
"30%": {
|
||||
opacity: 1,
|
||||
},
|
||||
"80%": {
|
||||
opacity: 0.5,
|
||||
},
|
||||
"100%": {
|
||||
transform: "scale(28)",
|
||||
opacity: 0,
|
||||
},
|
||||
},
|
||||
"appearance-in": {
|
||||
"0%": {
|
||||
opacity: 0,
|
||||
transform: "translateZ(0) scale(0.95)",
|
||||
},
|
||||
"60%": {
|
||||
opacity: 0.75,
|
||||
/* Avoid blurriness */
|
||||
backfaceVisibility: "hidden",
|
||||
webkitFontSmoothing: "antialiased",
|
||||
transform: "translateZ(0) scale(1.05)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 1,
|
||||
transform: "translateZ(0) scale(1)",
|
||||
},
|
||||
},
|
||||
"appearance-out": {
|
||||
"0%": {
|
||||
opacity: 1,
|
||||
transform: "scale(1)",
|
||||
},
|
||||
"100%": {
|
||||
opacity: 0,
|
||||
transform: "scale(0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
181
packages/core/theme/src/plugin.ts
Normal file
181
packages/core/theme/src/plugin.ts
Normal file
@ -0,0 +1,181 @@
|
||||
/**
|
||||
* Based on the tw-colors by L-Blondy
|
||||
* @see https://github.com/L-Blondy/tw-colors
|
||||
*/
|
||||
|
||||
import Color from "color";
|
||||
import plugin from "tailwindcss/plugin";
|
||||
import forEach from "lodash.foreach";
|
||||
import flatten from "flat";
|
||||
import get from "lodash.get";
|
||||
import deepMerge from "deepmerge";
|
||||
|
||||
import {semanticColors, commonColors} from "./colors";
|
||||
import {animations} from "./animations";
|
||||
import {utilities} from "./utilities";
|
||||
import {removeDefaultKeys} from "./utils/object";
|
||||
|
||||
interface MaybeNested<K extends keyof any = string, V = string> {
|
||||
[key: string]: V | MaybeNested<K, V>;
|
||||
}
|
||||
|
||||
const SCHEME = Symbol("color-scheme");
|
||||
const VAR_PREFIX = "nextui";
|
||||
|
||||
export type Colors = MaybeNested<string, string>;
|
||||
|
||||
export interface ColorsWithScheme<T> extends Colors {
|
||||
[SCHEME]?: T;
|
||||
}
|
||||
|
||||
interface FlatColorsWithScheme<T> extends Record<string, string> {
|
||||
[SCHEME]?: T;
|
||||
}
|
||||
|
||||
type SchemerFn<T> = (colors: Colors) => ColorsWithScheme<T>;
|
||||
|
||||
const dark: SchemerFn<"dark"> = (colors) => {
|
||||
return {
|
||||
[SCHEME]: "dark",
|
||||
...colors,
|
||||
};
|
||||
};
|
||||
|
||||
const light: SchemerFn<"light"> = (colors) => {
|
||||
return {
|
||||
[SCHEME]: "light",
|
||||
...colors,
|
||||
};
|
||||
};
|
||||
|
||||
export type ConfigObject = Record<string, ColorsWithScheme<"light" | "dark">>;
|
||||
export type ConfigFunction = ({
|
||||
light,
|
||||
dark,
|
||||
}: {
|
||||
light: SchemerFn<"light">;
|
||||
dark: SchemerFn<"dark">;
|
||||
}) => ConfigObject;
|
||||
|
||||
export const resolveConfig = (config: ConfigObject | ConfigFunction = {}) => {
|
||||
const resolved: {
|
||||
variants: {name: string; definition: string[]}[];
|
||||
utilities: Record<string, Record<string, any>>;
|
||||
colors: Record<
|
||||
string,
|
||||
({opacityValue, opacityVariable}: {opacityValue: string; opacityVariable: string}) => string
|
||||
>;
|
||||
} = {
|
||||
variants: [],
|
||||
utilities: {},
|
||||
colors: {},
|
||||
};
|
||||
const configObject = typeof config === "function" ? config({dark, light}) : config;
|
||||
|
||||
forEach(configObject, (colors: ColorsWithScheme<"light" | "dark">, themeName: string) => {
|
||||
const cssSelector = `.${themeName},.theme-${themeName},[data-theme="${themeName}"]`;
|
||||
|
||||
resolved.utilities[cssSelector] = colors[SCHEME]
|
||||
? {
|
||||
"color-scheme": colors[SCHEME],
|
||||
}
|
||||
: {};
|
||||
|
||||
// flatten color definitions
|
||||
const flatColors = removeDefaultKeys(
|
||||
flatten(colors, {
|
||||
safe: true,
|
||||
delimiter: "-",
|
||||
}) as Object,
|
||||
) as FlatColorsWithScheme<"light" | "dark">;
|
||||
|
||||
// resolved.variants
|
||||
resolved.variants.push({
|
||||
name: `theme-${themeName}`,
|
||||
definition: [`&.${themeName}`, `&.theme-${themeName}`, `&[data-theme='${themeName}']`],
|
||||
});
|
||||
|
||||
forEach(flatColors, (colorValue, colorName) => {
|
||||
// this case was handled above
|
||||
if ((colorName as any) === SCHEME || !colorValue) return;
|
||||
|
||||
try {
|
||||
// const [h, s, l, defaultAlphaValue] = parseToHsla(colorValue);
|
||||
const [h, s, l, defaultAlphaValue] = Color(colorValue).hsl().round().array();
|
||||
const nextuiColorVariable = `--${VAR_PREFIX}-${colorName}`;
|
||||
const nextuiOpacityVariable = `--${VAR_PREFIX}-${colorName}-opacity`;
|
||||
|
||||
// set the css variable in "@layer utilities"
|
||||
resolved.utilities[cssSelector]![nextuiColorVariable] = `${h} ${s}% ${l}%`;
|
||||
// if an alpha value was provided in the color definition, store it in a css variable
|
||||
if (typeof defaultAlphaValue === "number") {
|
||||
resolved.utilities[cssSelector]![nextuiOpacityVariable] = defaultAlphaValue.toFixed(2);
|
||||
}
|
||||
// set the dynamic color in tailwind config theme.colors
|
||||
resolved.colors[colorName] = ({opacityVariable, opacityValue}) => {
|
||||
// if the opacity is set with a slash (e.g. bg-primary/90), use the provided value
|
||||
if (!isNaN(+opacityValue)) {
|
||||
return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
|
||||
}
|
||||
// if no opacityValue was provided (=it is not parsable to a number)
|
||||
// the nextuiOpacityVariable (opacity defined in the color definition rgb(0, 0, 0, 0.5)) should have the priority
|
||||
// over the tw class based opacity(e.g. "bg-opacity-90")
|
||||
// This is how tailwind behaves as for v3.2.4
|
||||
if (opacityVariable) {
|
||||
return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;
|
||||
}
|
||||
|
||||
return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, 1))`;
|
||||
};
|
||||
} catch (error: any) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("error", error?.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return resolved;
|
||||
};
|
||||
|
||||
const corePlugin = (config: ConfigObject | ConfigFunction = {}) => {
|
||||
const resolved = resolveConfig(config);
|
||||
|
||||
return plugin(
|
||||
({addUtilities, addVariant}) => {
|
||||
// add the css variables to "@layer utilities"
|
||||
addUtilities({...resolved.utilities, ...utilities});
|
||||
// add the theme as variant e.g. "theme-[name]:text-2xl"
|
||||
resolved.variants.forEach((variant) => {
|
||||
addVariant(variant.name, variant.definition);
|
||||
});
|
||||
},
|
||||
// extend the colors config
|
||||
{
|
||||
theme: {
|
||||
extend: {
|
||||
// @ts-ignore
|
||||
colors: {
|
||||
...commonColors,
|
||||
...resolved.colors,
|
||||
},
|
||||
borderWidth: {
|
||||
1.5: "1.5px",
|
||||
3: "3px",
|
||||
5: "5px",
|
||||
},
|
||||
...animations,
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
export const theme = (config: ConfigObject | ConfigFunction = {}) => {
|
||||
const userLightColors = get(config, "light", {});
|
||||
const userDarkColors = get(config, "dark", {});
|
||||
|
||||
return corePlugin({
|
||||
light: deepMerge(semanticColors.light, userLightColors),
|
||||
dark: deepMerge(semanticColors.dark, userDarkColors),
|
||||
});
|
||||
};
|
||||
61
packages/core/theme/src/utilities/index.ts
Normal file
61
packages/core/theme/src/utilities/index.ts
Normal file
@ -0,0 +1,61 @@
|
||||
const DEFAULT_TRANSITION_DURATION = "200ms";
|
||||
|
||||
export const utilities = {
|
||||
/**
|
||||
* Custom utilities
|
||||
*/
|
||||
".leading-inherit": {
|
||||
"line-height": "inherit",
|
||||
},
|
||||
".bg-img-inherit": {
|
||||
"background-image": "inherit",
|
||||
},
|
||||
".bg-clip-inherit": {
|
||||
"background-clip": "inherit",
|
||||
},
|
||||
".text-fill-inherit": {
|
||||
"-webkit-text-fill-color": "inherit",
|
||||
},
|
||||
".transition-background": {
|
||||
"transition-property": "background",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
/**
|
||||
* Tailwind utilities
|
||||
*/
|
||||
".transition-all": {
|
||||
"transition-property": "all",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
".transition": {
|
||||
"transition-property":
|
||||
"color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
".transition-colors": {
|
||||
"transition-property":
|
||||
"color, background-color, border-color, text-decoration-color, fill, stroke",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
".transition-opacity": {
|
||||
"transition-property": "opacity",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
|
||||
".transition-shadow": {
|
||||
"transition-property": "box-shadow",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
|
||||
".transition-transform": {
|
||||
"transition-property": "transform",
|
||||
"transition-timing-function": "ease",
|
||||
"transition-duration": DEFAULT_TRANSITION_DURATION,
|
||||
},
|
||||
};
|
||||
@ -1,2 +1,3 @@
|
||||
export * from "./styles";
|
||||
export * from "./types";
|
||||
export * from "./variants";
|
||||
|
||||
39
packages/core/theme/src/utils/object.ts
Normal file
39
packages/core/theme/src/utils/object.ts
Normal file
@ -0,0 +1,39 @@
|
||||
export function swapColorValues<T extends Object>(colors: T) {
|
||||
const swappedColors = {};
|
||||
const keys = Object.keys(colors);
|
||||
const length = keys.length;
|
||||
|
||||
for (let i = 0; i < length / 2; i++) {
|
||||
const key1 = keys[i];
|
||||
const key2 = keys[length - 1 - i];
|
||||
|
||||
// @ts-ignore
|
||||
swappedColors[key1] = colors[key2];
|
||||
// @ts-ignore
|
||||
swappedColors[key2] = colors[key1];
|
||||
}
|
||||
if (length % 2 !== 0) {
|
||||
const middleKey = keys[Math.floor(length / 2)];
|
||||
|
||||
// @ts-ignore
|
||||
swappedColors[middleKey] = colors[middleKey];
|
||||
}
|
||||
|
||||
return swappedColors;
|
||||
}
|
||||
|
||||
export function removeDefaultKeys<T extends Object>(obj: T) {
|
||||
const newObj = {};
|
||||
|
||||
for (const key in obj) {
|
||||
if (key.endsWith("-DEFAULT")) {
|
||||
// @ts-ignore
|
||||
newObj[key.replace("-DEFAULT", "")] = obj[key];
|
||||
continue;
|
||||
}
|
||||
// @ts-ignore
|
||||
newObj[key] = obj[key];
|
||||
}
|
||||
|
||||
return newObj;
|
||||
}
|
||||
80
packages/core/theme/src/utils/variants.ts
Normal file
80
packages/core/theme/src/utils/variants.ts
Normal file
@ -0,0 +1,80 @@
|
||||
const solid = {
|
||||
neutral: "bg-neutral text-neutral-contrastText",
|
||||
primary: "bg-primary text-primary-contrastText",
|
||||
secondary: "bg-secondary text-secondary-contrastText",
|
||||
success: "bg-success text-success-contrastText",
|
||||
warning: "bg-warning text-warning-contrastText",
|
||||
danger: "bg-danger text-danger-contrastText",
|
||||
foreground: "bg-foreground text-background",
|
||||
};
|
||||
|
||||
const shadow = {
|
||||
neutral: "shadow-lg shadow-neutral/50 bg-neutral text-neutral-contrastText",
|
||||
primary: "shadow-lg shadow-primary/40 bg-primary text-primary-contrastText",
|
||||
secondary: "shadow-lg shadow-secondary/40 bg-secondary text-secondary-contrastText",
|
||||
success: "shadow-lg shadow-success/40 bg-success text-success-contrastText",
|
||||
warning: "shadow-lg shadow-warning/40 bg-warning text-warning-contrastText",
|
||||
danger: "shadow-lg shadow-danger/40 bg-danger text-danger-contrastText",
|
||||
foreground: "shadow-lg shadow-foreground/40 bg-foreground text-background",
|
||||
};
|
||||
|
||||
const bordered = {
|
||||
neutral: "bg-transparent border-neutral text-foreground",
|
||||
primary: "bg-transparent border-primary text-primary",
|
||||
secondary: "bg-transparent border-secondary text-secondary",
|
||||
success: "bg-transparent border-success text-success",
|
||||
warning: "bg-transparent border-warning text-warning",
|
||||
danger: "bg-transparent border-danger text-danger",
|
||||
foreground: "bg-transparent border-foreground text-foreground",
|
||||
};
|
||||
|
||||
const flat = {
|
||||
neutral: "bg-neutral-100 text-neutral-contrastText",
|
||||
primary: "bg-primary-50 text-primary",
|
||||
secondary: "bg-secondary-50 text-secondary",
|
||||
success: "bg-success-50 text-success",
|
||||
warning: "bg-warning-50 text-warning",
|
||||
danger: "bg-danger-50 text-danger",
|
||||
foreground: "bg-foreground/10 text-foreground",
|
||||
};
|
||||
|
||||
const faded = {
|
||||
neutral: "border-neutral bg-neutral-100 text-neutral-contrastText",
|
||||
primary: "border-neutral bg-neutral-100 text-primary",
|
||||
secondary: "border-neutral bg-neutral-100 text-secondary",
|
||||
success: "border-neutral bg-neutral-100 text-success",
|
||||
warning: "border-neutral bg-neutral-100 text-warning",
|
||||
danger: "border-neutral bg-neutral-100 text-danger",
|
||||
foreground: "border-neutral bg-neutral-100 text-foreground",
|
||||
};
|
||||
|
||||
const light = {
|
||||
neutral: "bg-transparent text-foreground",
|
||||
primary: "bg-transparent text-primary",
|
||||
secondary: "bg-transparent text-secondary",
|
||||
success: "bg-transparent text-success",
|
||||
warning: "bg-transparent text-warning",
|
||||
danger: "bg-transparent text-danger",
|
||||
foreground: "bg-transparent text-foreground",
|
||||
};
|
||||
|
||||
const ghost = {
|
||||
neutral: "border-neutral text-neutral-contrastText hover:!bg-neutral",
|
||||
primary: "border-primary text-primary hover:!text-primary-contrastText hover:!bg-primary",
|
||||
secondary:
|
||||
"border-secondary text-secondary hover:text-secondary-contrastText hover:!bg-secondary",
|
||||
success: "border-success text-success hover:!text-success-contrastText hover:!bg-success",
|
||||
warning: "border-warning text-warning hover:!text-warning-contrastText hover:!bg-warning",
|
||||
danger: "border-danger text-danger hover:!text-danger-contrastText hover:!bg-danger",
|
||||
foreground: "border-foreground text-foreground hover:!bg-foreground",
|
||||
};
|
||||
|
||||
export const colorVariants = {
|
||||
solid,
|
||||
shadow,
|
||||
bordered,
|
||||
flat,
|
||||
faded,
|
||||
light,
|
||||
ghost,
|
||||
};
|
||||
20
packages/utilities/shared-icons/src/avatar.tsx
Normal file
20
packages/utilities/shared-icons/src/avatar.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
export const AvatarIcon = () => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M12 2C9.38 2 7.25 4.13 7.25 6.75C7.25 9.32 9.26 11.4 11.88 11.49C11.96 11.48 12.04 11.48 12.1 11.49C12.12 11.49 12.13 11.49 12.15 11.49C12.16 11.49 12.16 11.49 12.17 11.49C14.73 11.4 16.74 9.32 16.75 6.75C16.75 4.13 14.62 2 12 2Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M17.0809 14.1489C14.2909 12.2889 9.74094 12.2889 6.93094 14.1489C5.66094 14.9989 4.96094 16.1489 4.96094 17.3789C4.96094 18.6089 5.66094 19.7489 6.92094 20.5889C8.32094 21.5289 10.1609 21.9989 12.0009 21.9989C13.8409 21.9989 15.6809 21.5289 17.0809 20.5889C18.3409 19.7389 19.0409 18.5989 19.0409 17.3589C19.0309 16.1289 18.3409 14.9889 17.0809 14.1489Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
15
packages/utilities/shared-icons/src/check.tsx
Normal file
15
packages/utilities/shared-icons/src/check.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
export const CheckIcon = () => (
|
||||
<svg
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12" />
|
||||
</svg>
|
||||
);
|
||||
15
packages/utilities/shared-icons/src/close-filled.tsx
Normal file
15
packages/utilities/shared-icons/src/close-filled.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
export const CloseFilledIcon = () => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M12 2a10 10 0 1010 10A10.016 10.016 0 0012 2zm3.36 12.3a.754.754 0 010 1.06.748.748 0 01-1.06 0l-2.3-2.3-2.3 2.3a.748.748 0 01-1.06 0 .754.754 0 010-1.06l2.3-2.3-2.3-2.3A.75.75 0 019.7 8.64l2.3 2.3 2.3-2.3a.75.75 0 011.06 1.06l-2.3 2.3z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
17
packages/utilities/shared-icons/src/close.tsx
Normal file
17
packages/utilities/shared-icons/src/close.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
export const CloseIcon = () => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
role="presentation"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
>
|
||||
<path d="M18 6L6 18M6 6l12 12" />
|
||||
</svg>
|
||||
);
|
||||
15
packages/utilities/shared-icons/src/copy.tsx
Normal file
15
packages/utilities/shared-icons/src/copy.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
export const CopyIcon = () => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@ -1 +1,6 @@
|
||||
export * from "./icons";
|
||||
export * from "./copy";
|
||||
export * from "./check";
|
||||
export * from "./avatar";
|
||||
export * from "./close";
|
||||
export * from "./close-filled";
|
||||
|
||||
205
pnpm-lock.yaml
generated
205
pnpm-lock.yaml
generated
@ -484,19 +484,29 @@ importers:
|
||||
|
||||
packages/components/chip:
|
||||
specifiers:
|
||||
'@nextui-org/avatar': workspace:*
|
||||
'@nextui-org/dom-utils': workspace:*
|
||||
'@nextui-org/shared-icons': workspace:*
|
||||
'@nextui-org/shared-utils': workspace:*
|
||||
'@nextui-org/system': workspace:*
|
||||
'@nextui-org/theme': workspace:*
|
||||
'@react-aria/focus': ^3.9.0
|
||||
'@react-aria/interactions': ^3.12.0
|
||||
'@react-aria/utils': ^3.14.0
|
||||
'@react-types/checkbox': ^3.4.0
|
||||
clean-package: 2.1.1
|
||||
react: ^17.0.2
|
||||
dependencies:
|
||||
'@nextui-org/dom-utils': link:../../utilities/dom-utils
|
||||
'@nextui-org/shared-icons': link:../../utilities/shared-icons
|
||||
'@nextui-org/shared-utils': link:../../utilities/shared-utils
|
||||
'@nextui-org/system': link:../../core/system
|
||||
'@nextui-org/theme': link:../../core/theme
|
||||
'@react-aria/focus': 3.10.1_react@17.0.2
|
||||
'@react-aria/interactions': 3.13.1_react@17.0.2
|
||||
'@react-aria/utils': 3.14.2_react@17.0.2
|
||||
devDependencies:
|
||||
'@nextui-org/avatar': link:../avatar
|
||||
'@react-types/checkbox': 3.4.1_react@17.0.2
|
||||
clean-package: 2.1.1
|
||||
react: 17.0.2
|
||||
@ -891,16 +901,38 @@ importers:
|
||||
|
||||
packages/core/theme:
|
||||
specifiers:
|
||||
'@storybook/addon-storysource': ^6.5.12
|
||||
'@types/color': ^3.0.3
|
||||
'@types/flat': ^5.0.2
|
||||
'@types/lodash.foreach': ^4.5.7
|
||||
'@types/lodash.get': ^4.4.7
|
||||
'@types/lodash.isempty': ^4.4.7
|
||||
clean-package: 2.1.1
|
||||
color: ^4.2.3
|
||||
color2k: ^2.0.2
|
||||
deepmerge: 4.2.2
|
||||
flat: ^5.0.2
|
||||
lodash.foreach: ^4.5.0
|
||||
lodash.get: ^4.4.2
|
||||
lodash.isempty: ^4.4.0
|
||||
tailwind-variants: ^0.0.30
|
||||
tailwindcss: ^3.2.4
|
||||
dependencies:
|
||||
color: 4.2.3
|
||||
color2k: 2.0.2
|
||||
deepmerge: 4.2.2
|
||||
flat: 5.0.2
|
||||
lodash.foreach: 4.5.0
|
||||
lodash.get: 4.4.2
|
||||
lodash.isempty: 4.4.0
|
||||
tailwind-variants: 0.0.30_tailwindcss@3.2.6
|
||||
devDependencies:
|
||||
'@storybook/addon-storysource': 6.5.16
|
||||
clean-package: 2.1.1
|
||||
tailwindcss: 3.2.6
|
||||
devDependencies:
|
||||
'@types/color': 3.0.3
|
||||
'@types/flat': 5.0.2
|
||||
'@types/lodash.foreach': 4.5.7
|
||||
'@types/lodash.get': 4.4.7
|
||||
'@types/lodash.isempty': 4.4.7
|
||||
clean-package: 2.1.1
|
||||
|
||||
packages/hooks/use-clipboard:
|
||||
specifiers:
|
||||
@ -5353,7 +5385,7 @@ packages:
|
||||
react-refresh: 0.11.0
|
||||
schema-utils: 3.1.1
|
||||
source-map: 0.7.4
|
||||
webpack: 5.75.0
|
||||
webpack: 5.75.0_igc2o5duttbeim43y2d2sdpxx4
|
||||
dev: true
|
||||
|
||||
/@polka/url/1.0.0-next.21:
|
||||
@ -8811,6 +8843,22 @@ packages:
|
||||
resolution: {integrity: sha512-Yq6rIccwcco0TLD5SMUrIM7Fk7Fe/C0jmNRxJJCLtAF6gebDkPuUjK5EHedxecm69Pi/aA+It39Ux4OHmFhjRw==}
|
||||
dev: true
|
||||
|
||||
/@types/color-convert/2.0.0:
|
||||
resolution: {integrity: sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==}
|
||||
dependencies:
|
||||
'@types/color-name': 1.1.1
|
||||
dev: true
|
||||
|
||||
/@types/color-name/1.1.1:
|
||||
resolution: {integrity: sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==}
|
||||
dev: true
|
||||
|
||||
/@types/color/3.0.3:
|
||||
resolution: {integrity: sha512-X//qzJ3d3Zj82J9sC/C18ZY5f43utPbAJ6PhYt/M7uG6etcF6MRpKdN880KBy43B0BMzSfeT96MzrsNjFI3GbA==}
|
||||
dependencies:
|
||||
'@types/color-convert': 2.0.0
|
||||
dev: true
|
||||
|
||||
/@types/eslint-scope/3.7.4:
|
||||
resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==}
|
||||
dependencies:
|
||||
@ -8837,6 +8885,10 @@ packages:
|
||||
resolution: {integrity: sha512-CWYnSRnun3CGbt6taXeVo2lCbuaj4mchVJ4UF/BdU5TSuIn3AmS13pGMwCsBUoehGbhZrBrpNJZSZI5EVilXww==}
|
||||
dev: true
|
||||
|
||||
/@types/flat/5.0.2:
|
||||
resolution: {integrity: sha512-3zsplnP2djeps5P9OyarTxwRpMLoe5Ash8aL9iprw0JxB+FAHjY+ifn4yZUuW4/9hqtnmor6uvjSRzJhiVbrEQ==}
|
||||
dev: true
|
||||
|
||||
/@types/github-slugger/1.3.0:
|
||||
resolution: {integrity: sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g==}
|
||||
dev: true
|
||||
@ -8936,6 +8988,24 @@ packages:
|
||||
'@types/node': 16.18.12
|
||||
dev: true
|
||||
|
||||
/@types/lodash.foreach/4.5.7:
|
||||
resolution: {integrity: sha512-YjBEB6/Bl19V+R70IpyB/MhMb2IvrSgD26maRNyqbGRNDTH9AnPrQoT+ECvhFJ/hwhQ+RgYWaZKvF+knCguMJw==}
|
||||
dependencies:
|
||||
'@types/lodash': 4.14.191
|
||||
dev: true
|
||||
|
||||
/@types/lodash.get/4.4.7:
|
||||
resolution: {integrity: sha512-af34Mj+KdDeuzsJBxc/XeTtOx0SZHZNLd+hdrn+PcKGQs0EG2TJTzQAOTCZTgDJCArahlCzLWSy8c2w59JRz7Q==}
|
||||
dependencies:
|
||||
'@types/lodash': 4.14.191
|
||||
dev: true
|
||||
|
||||
/@types/lodash.isempty/4.4.7:
|
||||
resolution: {integrity: sha512-YOzlpoIn9jrfHzjIukKnu9Le3tmi+0PhUdOt2rMpJW/4J6jX7s0HeBatXdh9QckLga8qt4EKBxVIEqtEq6pzLg==}
|
||||
dependencies:
|
||||
'@types/lodash': 4.14.191
|
||||
dev: true
|
||||
|
||||
/@types/lodash/4.14.191:
|
||||
resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
|
||||
|
||||
@ -10471,7 +10541,7 @@ packages:
|
||||
loader-utils: 2.0.4
|
||||
make-dir: 3.1.0
|
||||
schema-utils: 2.7.1
|
||||
webpack: 4.46.0
|
||||
webpack: 4.46.0_webpack-cli@3.3.12
|
||||
dev: true
|
||||
|
||||
/babel-plugin-add-module-exports/1.0.4:
|
||||
@ -11059,7 +11129,7 @@ packages:
|
||||
mississippi: 3.0.0
|
||||
mkdirp: 0.5.6
|
||||
move-concurrently: 1.0.1
|
||||
promise-inflight: 1.0.1
|
||||
promise-inflight: 1.0.1_bluebird@3.7.2
|
||||
rimraf: 2.7.1
|
||||
ssri: 6.0.2
|
||||
unique-filename: 1.1.1
|
||||
@ -11588,7 +11658,6 @@ packages:
|
||||
engines: {node: '>=7.0.0'}
|
||||
dependencies:
|
||||
color-name: 1.1.4
|
||||
dev: true
|
||||
|
||||
/color-name/1.1.3:
|
||||
resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
|
||||
@ -11596,11 +11665,30 @@ packages:
|
||||
/color-name/1.1.4:
|
||||
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
|
||||
|
||||
/color-string/1.9.1:
|
||||
resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
|
||||
dependencies:
|
||||
color-name: 1.1.4
|
||||
simple-swizzle: 0.2.2
|
||||
dev: false
|
||||
|
||||
/color-support/1.1.3:
|
||||
resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/color/4.2.3:
|
||||
resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
|
||||
engines: {node: '>=12.5.0'}
|
||||
dependencies:
|
||||
color-convert: 2.0.1
|
||||
color-string: 1.9.1
|
||||
dev: false
|
||||
|
||||
/color2k/2.0.2:
|
||||
resolution: {integrity: sha512-kJhwH5nAwb34tmyuqq/lgjEKzlFXn1U99NlnB6Ws4qVaERcRUYeYP1cBw6BJ4vxaWStAUEef4WMr7WjOCnBt8w==}
|
||||
dev: false
|
||||
|
||||
/colorette/1.4.0:
|
||||
resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
|
||||
dev: true
|
||||
@ -12066,7 +12154,7 @@ packages:
|
||||
postcss-value-parser: 4.2.0
|
||||
schema-utils: 2.7.1
|
||||
semver: 6.3.0
|
||||
webpack: 4.46.0
|
||||
webpack: 4.46.0_webpack-cli@3.3.12
|
||||
dev: true
|
||||
|
||||
/css-loader/5.2.7_webpack@5.75.0:
|
||||
@ -14289,7 +14377,7 @@ packages:
|
||||
dependencies:
|
||||
loader-utils: 2.0.4
|
||||
schema-utils: 3.1.1
|
||||
webpack: 4.46.0
|
||||
webpack: 4.46.0_webpack-cli@3.3.12
|
||||
dev: true
|
||||
|
||||
/file-system-cache/1.1.0:
|
||||
@ -14473,6 +14561,11 @@ packages:
|
||||
rimraf: 3.0.2
|
||||
dev: true
|
||||
|
||||
/flat/5.0.2:
|
||||
resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
|
||||
hasBin: true
|
||||
dev: false
|
||||
|
||||
/flatted/2.0.2:
|
||||
resolution: {integrity: sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==}
|
||||
dev: true
|
||||
@ -15508,7 +15601,7 @@ packages:
|
||||
pretty-error: 2.1.2
|
||||
tapable: 1.1.3
|
||||
util.promisify: 1.0.0
|
||||
webpack: 4.46.0
|
||||
webpack: 4.46.0_webpack-cli@3.3.12
|
||||
dev: true
|
||||
|
||||
/html-webpack-plugin/5.5.0_webpack@5.75.0:
|
||||
@ -15894,6 +15987,10 @@ packages:
|
||||
resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
|
||||
dev: true
|
||||
|
||||
/is-arrayish/0.3.2:
|
||||
resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
|
||||
dev: false
|
||||
|
||||
/is-bigint/1.0.4:
|
||||
resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
|
||||
dependencies:
|
||||
@ -17530,9 +17627,16 @@ packages:
|
||||
resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
|
||||
dev: true
|
||||
|
||||
/lodash.foreach/4.5.0:
|
||||
resolution: {integrity: sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==}
|
||||
dev: false
|
||||
|
||||
/lodash.get/4.4.2:
|
||||
resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
|
||||
dev: true
|
||||
|
||||
/lodash.isempty/4.4.0:
|
||||
resolution: {integrity: sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg==}
|
||||
dev: false
|
||||
|
||||
/lodash.isequal/4.5.0:
|
||||
resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
|
||||
@ -19492,16 +19596,6 @@ packages:
|
||||
postcss: 7.0.39
|
||||
dev: true
|
||||
|
||||
/postcss-import/14.1.0:
|
||||
resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
peerDependencies:
|
||||
postcss: ^8.0.0
|
||||
dependencies:
|
||||
postcss-value-parser: 4.2.0
|
||||
read-cache: 1.0.0
|
||||
resolve: 1.22.1
|
||||
|
||||
/postcss-import/14.1.0_postcss@8.4.21:
|
||||
resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
@ -19512,15 +19606,6 @@ packages:
|
||||
postcss-value-parser: 4.2.0
|
||||
read-cache: 1.0.0
|
||||
resolve: 1.22.1
|
||||
dev: true
|
||||
|
||||
/postcss-js/4.0.1:
|
||||
resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
|
||||
engines: {node: ^12 || ^14 || >= 16}
|
||||
peerDependencies:
|
||||
postcss: ^8.4.21
|
||||
dependencies:
|
||||
camelcase-css: 2.0.1
|
||||
|
||||
/postcss-js/4.0.1_postcss@8.4.21:
|
||||
resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
|
||||
@ -19530,7 +19615,6 @@ packages:
|
||||
dependencies:
|
||||
camelcase-css: 2.0.1
|
||||
postcss: 8.4.21
|
||||
dev: true
|
||||
|
||||
/postcss-load-config/3.1.4:
|
||||
resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
|
||||
@ -19546,6 +19630,7 @@ packages:
|
||||
dependencies:
|
||||
lilconfig: 2.0.6
|
||||
yaml: 1.10.2
|
||||
dev: true
|
||||
|
||||
/postcss-load-config/3.1.4_postcss@8.4.21:
|
||||
resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
|
||||
@ -19562,7 +19647,6 @@ packages:
|
||||
lilconfig: 2.0.6
|
||||
postcss: 8.4.21
|
||||
yaml: 1.10.2
|
||||
dev: true
|
||||
|
||||
/postcss-loader/4.3.0_gzaxsinx64nntyd3vmdqwl7coe:
|
||||
resolution: {integrity: sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==}
|
||||
@ -19577,7 +19661,7 @@ packages:
|
||||
postcss: 7.0.39
|
||||
schema-utils: 3.1.1
|
||||
semver: 7.3.8
|
||||
webpack: 4.46.0
|
||||
webpack: 4.46.0_webpack-cli@3.3.12
|
||||
dev: true
|
||||
|
||||
/postcss-loader/4.3.0_postcss@7.0.39:
|
||||
@ -19668,14 +19752,6 @@ packages:
|
||||
postcss: 8.4.21
|
||||
dev: true
|
||||
|
||||
/postcss-nested/6.0.0:
|
||||
resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
|
||||
engines: {node: '>=12.0'}
|
||||
peerDependencies:
|
||||
postcss: ^8.2.14
|
||||
dependencies:
|
||||
postcss-selector-parser: 6.0.11
|
||||
|
||||
/postcss-nested/6.0.0_postcss@8.4.21:
|
||||
resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
|
||||
engines: {node: '>=12.0'}
|
||||
@ -19684,7 +19760,6 @@ packages:
|
||||
dependencies:
|
||||
postcss: 8.4.21
|
||||
postcss-selector-parser: 6.0.11
|
||||
dev: true
|
||||
|
||||
/postcss-selector-parser/6.0.11:
|
||||
resolution: {integrity: sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==}
|
||||
@ -19719,7 +19794,6 @@ packages:
|
||||
nanoid: 3.3.4
|
||||
picocolors: 1.0.0
|
||||
source-map-js: 1.0.2
|
||||
dev: true
|
||||
|
||||
/posthtml-parser/0.10.2:
|
||||
resolution: {integrity: sha512-PId6zZ/2lyJi9LiKfe+i2xv57oEjJgWbsHGGANwos5AvdQp98i6AtamAl8gzSVFGfQ43Glb5D614cvZf012VKg==}
|
||||
@ -19954,6 +20028,17 @@ packages:
|
||||
optional: true
|
||||
dev: true
|
||||
|
||||
/promise-inflight/1.0.1_bluebird@3.7.2:
|
||||
resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
|
||||
peerDependencies:
|
||||
bluebird: '*'
|
||||
peerDependenciesMeta:
|
||||
bluebird:
|
||||
optional: true
|
||||
dependencies:
|
||||
bluebird: 3.7.2
|
||||
dev: true
|
||||
|
||||
/promise.allsettled/1.0.6:
|
||||
resolution: {integrity: sha512-22wJUOD3zswWFqgwjNHa1965LvqTX87WPu/lreY2KSd7SVcERfuZ4GfUaOnJNnvtoIv2yXT/W00YIGMetXtFXg==}
|
||||
engines: {node: '>= 0.4'}
|
||||
@ -20155,7 +20240,7 @@ packages:
|
||||
dependencies:
|
||||
loader-utils: 2.0.4
|
||||
schema-utils: 3.1.1
|
||||
webpack: 4.46.0
|
||||
webpack: 4.46.0_webpack-cli@3.3.12
|
||||
dev: true
|
||||
|
||||
/react-autosuggest/10.1.0_react@17.0.2:
|
||||
@ -21402,6 +21487,12 @@ packages:
|
||||
resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
|
||||
dev: true
|
||||
|
||||
/simple-swizzle/0.2.2:
|
||||
resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
|
||||
dependencies:
|
||||
is-arrayish: 0.3.2
|
||||
dev: false
|
||||
|
||||
/sirv/1.0.19:
|
||||
resolution: {integrity: sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==}
|
||||
engines: {node: '>= 10'}
|
||||
@ -22016,7 +22107,7 @@ packages:
|
||||
dependencies:
|
||||
loader-utils: 2.0.4
|
||||
schema-utils: 2.7.1
|
||||
webpack: 4.46.0
|
||||
webpack: 4.46.0_webpack-cli@3.3.12
|
||||
dev: true
|
||||
|
||||
/style-loader/2.0.0_webpack@5.75.0:
|
||||
@ -22222,8 +22313,6 @@ packages:
|
||||
resolution: {integrity: sha512-BfgQWZrtqowOQMC2bwaSNe7xcIjdDEgixWGYOd6AL0CbKHJlvhfdbINeAW76l1sO+1ov/MJ93ODJ9yluRituIw==}
|
||||
engines: {node: '>=12.13.0'}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
postcss: ^8.0.9
|
||||
dependencies:
|
||||
arg: 5.0.2
|
||||
chokidar: 3.5.3
|
||||
@ -22239,16 +22328,18 @@ packages:
|
||||
normalize-path: 3.0.0
|
||||
object-hash: 3.0.0
|
||||
picocolors: 1.0.0
|
||||
postcss-import: 14.1.0
|
||||
postcss-js: 4.0.1
|
||||
postcss-load-config: 3.1.4
|
||||
postcss-nested: 6.0.0
|
||||
postcss: 8.4.21
|
||||
postcss-import: 14.1.0_postcss@8.4.21
|
||||
postcss-js: 4.0.1_postcss@8.4.21
|
||||
postcss-load-config: 3.1.4_postcss@8.4.21
|
||||
postcss-nested: 6.0.0_postcss@8.4.21
|
||||
postcss-selector-parser: 6.0.11
|
||||
postcss-value-parser: 4.2.0
|
||||
quick-lru: 5.1.1
|
||||
resolve: 1.22.1
|
||||
transitivePeerDependencies:
|
||||
- ts-node
|
||||
dev: false
|
||||
|
||||
/tailwindcss/3.2.6_postcss@8.4.21:
|
||||
resolution: {integrity: sha512-BfgQWZrtqowOQMC2bwaSNe7xcIjdDEgixWGYOd6AL0CbKHJlvhfdbINeAW76l1sO+1ov/MJ93ODJ9yluRituIw==}
|
||||
@ -22345,7 +22436,7 @@ packages:
|
||||
serialize-javascript: 4.0.0
|
||||
source-map: 0.6.1
|
||||
terser: 4.8.1
|
||||
webpack: 4.46.0
|
||||
webpack: 4.46.0_webpack-cli@3.3.12
|
||||
webpack-sources: 1.4.3
|
||||
worker-farm: 1.7.0
|
||||
dev: true
|
||||
@ -22364,7 +22455,7 @@ packages:
|
||||
serialize-javascript: 5.0.1
|
||||
source-map: 0.6.1
|
||||
terser: 5.16.3
|
||||
webpack: 4.46.0
|
||||
webpack: 4.46.0_webpack-cli@3.3.12
|
||||
webpack-sources: 1.4.3
|
||||
transitivePeerDependencies:
|
||||
- bluebird
|
||||
@ -23192,7 +23283,7 @@ packages:
|
||||
loader-utils: 2.0.4
|
||||
mime-types: 2.1.35
|
||||
schema-utils: 3.1.1
|
||||
webpack: 4.46.0
|
||||
webpack: 4.46.0_webpack-cli@3.3.12
|
||||
dev: true
|
||||
|
||||
/url-parse/1.5.10:
|
||||
@ -23538,7 +23629,7 @@ packages:
|
||||
mime: 2.6.0
|
||||
mkdirp: 0.5.6
|
||||
range-parser: 1.2.1
|
||||
webpack: 4.46.0
|
||||
webpack: 4.46.0_webpack-cli@3.3.12
|
||||
webpack-log: 2.0.0
|
||||
dev: true
|
||||
|
||||
@ -23563,7 +23654,7 @@ packages:
|
||||
peerDependencies:
|
||||
webpack: ^2.0.0 || ^3.0.0 || ^4.0.0
|
||||
dependencies:
|
||||
webpack: 4.46.0
|
||||
webpack: 4.46.0_webpack-cli@3.3.12
|
||||
dev: true
|
||||
|
||||
/webpack-hot-middleware/2.25.3:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user