1.7.0 (2023-01-25)

Features

• divider: divider component (c3b67d9)
• link: link component (ddde65c)
• pagination: pagination component (853564c)
• skeleton: skeleton component (b50e16f)
• stepper: add stepper component (875385c)

Bug Fixes

• radio: center the circle (0206530)

1.6.2 (2023-01-20)

Bug Fixes

• inputs: add focus state (823dcc7) #50

1.6.1 (2023-01-19)

Bug Fixes

• Dark mode with 'media' is not supported (41d24ce) #51

1.6.0 (2023-01-15)

Features

• config: add prefix option (349498a)

Bug Fixes

• tooltip: allow to use breakpoints (99de37e)

Refactor

• button-group: add direction to horizontal class (c14f6d2)
• card: change shadow box to sm (4ca5d94)
• config: update types (baceb83)
• input and select: adjust height to be more standard size (6073359)
• tabs: support for radio tabs (f8b0e89)

1.5.0 (2023-01-07)

Features

• accordion component (894e39d)
• tabs component (bd855b3)

Bug Fixes

• navbar: add backdrop saturate to navbar glass and update colors to radixUI (a71d9a7)

Refactor

• config: add safelist on production styles.css for CDN purposes (367975b)
• new-pallete: add slate color (07b9249)
• new-types: expand pallete scalle (0b83ec4)
• base: device highlight transparent (0fd3717)
• button: prevent select content (faace23)
• card: update to radixUI colors (711d704)
• button: change loader color (2da97bb)
• utilities: clean utilities (c326698)
• components-colors: update colors to new radixUI colors (0bec47d)
• config: force match at init in regexExpr safelist (58047da)
• config: separate utilities to another config (e3aa62b)
• navbar: set gray-50 instead of gray-100 (23ed3d9)
• table: prevent text content wrap (dd5f3ed)
• background-colors: update background borders (0efce60)
• tab: update to radixUI colors (29fdcf0)
• theme: use radixUI pallete (b514482)

1.4.0 (2022-12-30)

Features

• config: support for theme customization (9fa2904)
• config: types for rippleui theme config (e3a5910)

Refactor

• base: removed duplicate selector (97f80fa)
• move the base to separate config (b376066)
• set type to configValue (a98490b)
• update colors type (b52afd5)
• update themes type (05440f6)

⚠️ This is a dev pre-release.

Sumary

We introduce the theme customization in the tailwind.config.js.

Install

npm install [email protected]

We can add, modify or delete themes with the new configuration, since RippleUI loads light and dark mode by default you can disable this behavior.

1. To add a new theme just simply add a new object to the themes array and then you will have to autocomplete about what properties are required and what are optional, also for colors you will have all support for all the available colors.

/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
  themes: [
  {
      themeName: "custom",
      colorScheme: "dark",
      colors: {
        primary: "#573242",
        backgroundPrimary: "#123673",
        // Same Variables
      },
    },
  ],
};

2. If you want to modify the existing theme like dark or light simply set the themeName property as light or dark

/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
  themes: [
  {
      themeName: "light",
      colors: {
        primary: "#573242",
      },
    },
  ],
};

3. If you want to remove the existing themes that are set in the config object

/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
   removeThemes: ["dark"],
};

4. If you want to remove the default background-color and color properties that are by default turned on you can disable this behavior.

/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
     defaultStyle: false,
};

This is a fully example using the config

in the tailwind.config.js add the following code

/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
  defaultStyle: true,
  removeThemes: [],
  themes: [
    {
      themeName: "light",
      colorScheme: "light",
      colors: {
        // Customize Colors
        primary: "#235264",
      },
    },
    {
      themeName: "custom",
      colorScheme: "dark",
      colors: {
        primary: "#573242",
        backgroundPrimary: "#123673",
        // Same Variables
      },
    },
  ],
};

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: [],
  rippleui: {
    ...config,
  },
  theme: {
    extend: {},
  },
  plugins: [require("rippleui")],
};

5. If you declare custom colors in whatever theme use this.

/** @type {import('rippleui/dist/js/types/config.types').Config} */
const config = {
   themes: [
     {
      themeName: "light",
      colorScheme: "dark",
      colors: {
!        customColor: "#123673",
      },
    },
  ],
};

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: [],
- rippleui: {
-   ...config,
- },
  theme: {
    extend: {},
  },
+  plugins: [require("rippleui")({
+         ....config
+   )],
};

1.3.3 (2022-12-26)

Features

• config: utils function for convert and handle opacity (45da8a1)

Refactor

• base: removed base styles (a40b60b)
• button: change button size props (491921e)
• components: add rgb function to each variable (5755038)
• config: change type return to colors (76574d9)
• config: convert hexa to rgb (9ec6174)
• config: inject base bg and text color by default (d0cb4d5)
• config: trigger function when color called (68d8201)
• dropdown: reduce z-index to z-49 (df5e6ce)
• modal: increase z-index to be in front of navbar (0fac4e0)
• utilites: add hide-scrollbar (4bb05b9)

1.3.2 (2022-12-25)

Bug Fixes

• add h-screen to drawer and overlay (5e4c7b8)
• change disabled class to native disabled selector (7b95eeb)
• dropdown: left and right positions stay at center (0c2ca61)

:bug: Bug Fixes

• a8bf967 - duplicate dark query css (commit by @Siumauricio)

:wrench: Chores

• 94bd1e0 - release: 1.3.1 (commit by @Siumauricio)