feat(theme): default theme support added

This commit is contained in:
Junior Garcia 2023-03-25 23:47:19 -03:00
parent 72c6dcf6ff
commit 9382f49c2f
40 changed files with 376 additions and 38 deletions

View File

@ -1,5 +1,19 @@
# @nextui-org/accordion
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/accordion",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
"keywords": [
"react",

View File

@ -1,5 +1,19 @@
# @nextui-org/avatar
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/avatar",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
"keywords": [
"avatar"

View File

@ -1,5 +1,19 @@
# @nextui-org/badge
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/badge",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "Badges are used as a small numerical value or status descriptor for UI elements.",
"keywords": [
"badge"

View File

@ -1,5 +1,23 @@
# @nextui-org/button
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
- @nextui-org/drip@0.0.0-dev-v2-20230326024632
- @nextui-org/spinner@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
- @nextui-org/drip@0.0.0-dev-v2-20230326015909
- @nextui-org/spinner@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/button",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "Buttons allow users to perform actions and choose with a single tap.",
"keywords": [
"button"

View File

@ -1,5 +1,21 @@
# @nextui-org/card
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
- @nextui-org/drip@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
- @nextui-org/drip@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/card",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "Card is a container for text, photos, and actions in the context of a single subject.",
"keywords": [
"card"

View File

@ -1,5 +1,19 @@
# @nextui-org/checkbox
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/checkbox",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
"keywords": [
"checkbox"

View File

@ -1,5 +1,19 @@
# @nextui-org/chip
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/chip",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "Chips help people enter information, make selections, filter content, or trigger actions.",
"keywords": [
"chip"

View File

@ -1,5 +1,19 @@
# @nextui-org/code
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/code",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "Code is a component used to display inline code.",
"keywords": [
"code"

View File

@ -1,5 +1,19 @@
# @nextui-org/drip
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/drip",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "A ripple effect for ensuring that the user fells the system is reacting instantaneously",
"keywords": [
"drip"

View File

@ -1,5 +1,19 @@
# @nextui-org/link
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/link",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
"keywords": [
"link"

View File

@ -1,5 +1,19 @@
# @nextui-org/pagination
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/pagination",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "The Pagination component allows you to display active page and navigate between multiple pages.",
"keywords": [
"pagination"

View File

@ -1,5 +1,19 @@
# @nextui-org/radio
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/radio",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "Radios allow users to select a single option from a list of mutually exclusive options.",
"keywords": [
"radio"

View File

@ -1,5 +1,21 @@
# @nextui-org/snippet
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
- @nextui-org/tooltip@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
- @nextui-org/tooltip@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/snippet",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "Display a snippet of copyable code for the command line.",
"keywords": [
"snippet"

View File

@ -1,5 +1,19 @@
# @nextui-org/spinner
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/spinner",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "Loaders express an unspecified wait time or display the length of a process.",
"keywords": [
"loading",

View File

@ -1,5 +1,19 @@
# @nextui-org/switch
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/switch",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
"keywords": [
"switch"

View File

@ -1,5 +1,19 @@
# @nextui-org/tooltip
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/tooltip",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "A React Component for rendering dynamically positioned Tooltips",
"keywords": [
"tooltip"

View File

@ -1,5 +1,21 @@
# @nextui-org/user
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
- @nextui-org/avatar@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
- @nextui-org/avatar@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/user",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "Flexible User Profile Component.",
"keywords": [
"user"

View File

@ -1,5 +1,51 @@
# @nextui-org/react
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326024632
- @nextui-org/accordion@0.0.0-dev-v2-20230326024632
- @nextui-org/avatar@0.0.0-dev-v2-20230326024632
- @nextui-org/badge@0.0.0-dev-v2-20230326024632
- @nextui-org/button@0.0.0-dev-v2-20230326024632
- @nextui-org/card@0.0.0-dev-v2-20230326024632
- @nextui-org/checkbox@0.0.0-dev-v2-20230326024632
- @nextui-org/code@0.0.0-dev-v2-20230326024632
- @nextui-org/drip@0.0.0-dev-v2-20230326024632
- @nextui-org/link@0.0.0-dev-v2-20230326024632
- @nextui-org/pagination@0.0.0-dev-v2-20230326024632
- @nextui-org/radio@0.0.0-dev-v2-20230326024632
- @nextui-org/snippet@0.0.0-dev-v2-20230326024632
- @nextui-org/spinner@0.0.0-dev-v2-20230326024632
- @nextui-org/switch@0.0.0-dev-v2-20230326024632
- @nextui-org/tooltip@0.0.0-dev-v2-20230326024632
- @nextui-org/user@0.0.0-dev-v2-20230326024632
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Updated dependencies
- @nextui-org/theme@0.0.0-dev-v2-20230326015909
- @nextui-org/accordion@0.0.0-dev-v2-20230326015909
- @nextui-org/avatar@0.0.0-dev-v2-20230326015909
- @nextui-org/badge@0.0.0-dev-v2-20230326015909
- @nextui-org/button@0.0.0-dev-v2-20230326015909
- @nextui-org/card@0.0.0-dev-v2-20230326015909
- @nextui-org/checkbox@0.0.0-dev-v2-20230326015909
- @nextui-org/code@0.0.0-dev-v2-20230326015909
- @nextui-org/drip@0.0.0-dev-v2-20230326015909
- @nextui-org/link@0.0.0-dev-v2-20230326015909
- @nextui-org/pagination@0.0.0-dev-v2-20230326015909
- @nextui-org/radio@0.0.0-dev-v2-20230326015909
- @nextui-org/snippet@0.0.0-dev-v2-20230326015909
- @nextui-org/spinner@0.0.0-dev-v2-20230326015909
- @nextui-org/switch@0.0.0-dev-v2-20230326015909
- @nextui-org/tooltip@0.0.0-dev-v2-20230326015909
- @nextui-org/user@0.0.0-dev-v2-20230326015909
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/react",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "🚀 Beautiful and modern React UI library.",
"author": "Junior Garcia <jrgarciadev@gmail.com>",
"homepage": "https://nextui.org",

View File

@ -1,5 +1,17 @@
# @nextui-org/theme
## 0.0.0-dev-v2-20230326024632
### Patch Changes
- Default theme support added
## 0.0.0-dev-v2-20230326015909
### Patch Changes
- Package exports fixed
## 0.0.0-dev-v2-20230326015124
### Patch Changes

View File

@ -1,23 +1,23 @@
{
"replace": {
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.esm.js",
"require": "./dist/index.cjs.js"
"import": "./dist/index.mjs",
"require": "./dist/index.js"
},
"./plugin": {
"types": "./dist/plugin.d.ts",
"import": "./dist/plugin.esm.js",
"require": "./dist/plugin.cjs.js"
"import": "./dist/plugin.mjs",
"require": "./dist/plugin.js"
},
"./colors": {
"types": "./dist/colors.d.ts",
"import": "./dist/colors.esm.js",
"require": "./dist/colors.cjs.js"
"import": "./dist/colors.mjs",
"require": "./dist/colors.js"
},
"./package.json": "./package.json"
}

View File

@ -1,6 +1,6 @@
{
"name": "@nextui-org/theme",
"version": "0.0.0-dev-v2-20230326015124",
"version": "0.0.0-dev-v2-20230326024632",
"description": "The default theme for NextUI components",
"keywords": [
"theme",

View File

@ -49,7 +49,10 @@ const light: SchemerFn<"light"> = (colors) => {
};
};
export type DefaultTheme = "light" | "dark";
export type ConfigObject = Record<string, ColorsWithScheme<"light" | "dark">>;
export type ConfigFunction = ({
light,
dark,
@ -58,7 +61,22 @@ export type ConfigFunction = ({
dark: SchemerFn<"dark">;
}) => ConfigObject;
export const resolveConfig = (config: ConfigObject | ConfigFunction = {}) => {
export type NextUIConfig = {
/**
* The theme definitions.
*/
themes?: ConfigObject | ConfigFunction;
/**
* The default theme to use.
* @default "light"
*/
defaultTheme?: DefaultTheme;
};
export const resolveConfig = (
config: ConfigObject | ConfigFunction = {},
defaultTheme: DefaultTheme,
) => {
const resolved: {
variants: {name: string; definition: string[]}[];
utilities: Record<string, Record<string, any>>;
@ -74,7 +92,12 @@ export const resolveConfig = (config: ConfigObject | ConfigFunction = {}) => {
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}"]`;
let cssSelector = `.${themeName},.theme-${themeName},[data-theme="${themeName}"]`;
// if the theme is the default theme, add the selector to the root element
if (themeName === defaultTheme) {
cssSelector = `:root,${cssSelector}`;
}
resolved.utilities[cssSelector] = colors[SCHEME]
? {
@ -138,8 +161,8 @@ export const resolveConfig = (config: ConfigObject | ConfigFunction = {}) => {
return resolved;
};
const corePlugin = (config: ConfigObject | ConfigFunction = {}) => {
const resolved = resolveConfig(config);
const corePlugin = (config: ConfigObject | ConfigFunction = {}, defaultTheme: DefaultTheme) => {
const resolved = resolveConfig(config, defaultTheme);
return plugin(
({addBase, addUtilities, addVariant}) => {
@ -185,12 +208,21 @@ const corePlugin = (config: ConfigObject | ConfigFunction = {}) => {
);
};
export const nextui = (config: ConfigObject | ConfigFunction = {}) => {
const userLightColors = get(config, "light", {});
const userDarkColors = get(config, "dark", {});
export const nextui = (config: NextUIConfig = {}) => {
const userLightColors = get(config.themes, "light", {});
const userDarkColors = get(config.themes, "dark", {});
return corePlugin({
light: deepMerge(semanticColors.light, userLightColors),
dark: deepMerge(semanticColors.dark, userDarkColors),
});
const defaultTheme = config.defaultTheme || "light";
return corePlugin(
{
light: deepMerge(semanticColors.light, userLightColors),
dark: deepMerge(semanticColors.dark, userDarkColors),
},
defaultTheme,
);
};
nextui({
defaultTheme: "light",
});