v0.12.4

• Fix gray colors on switches to use variables instead of fixed colors

v0.12.3

FIXED

Fixes an issue where in some cases if the global font color (@base-font-color) is a light color (e.g.: your site runs a dark theme by default), button with light background colors would have invisible texts (incorrectly calculated color) on hover.

This was fixed by using a static color instead of referring to the @base-font-color global variable when calculating the button text colors in dynamic button generator mixins. The generator will now output the correct variant (either white or black) of text color depending on the button background color.

v0.12.1

ADDED

• Dark mode support for tabs component.
• 3 new variables added: @panel-bg-color-light, @panel-bg-color-dark, @label-badge-bg-color

v0.12.0

CHANGED

• Color palette has been expanded to a 13-step system, with 6 levels of lighter shades and darker shades. (Was previously 2 levels for lighter and darker shades) This subtly affects the appearance of gray tones in some UI instances.

In more detail: existing @{color}-l2 tones have been pushed down to @{color}-l3. As a result, if you have used the @{color}-l2 shade in your project and update Petal to 0.12.0, your color will look slightly darker than before. All other shades of colors remain the same.

ADDED

• Dark mode support for tabs component.

v0.11.2

FIXED

• Fixed selecter dropdown menu item's active state (on click) background color.

ADDED

• Added new variables:

@background-color-light
@foreground-color-light
@background-color-dark
@foreground-color-dark
@input-border-color
@input-bg-color-light
@input-bg-color-dark
@form-caption-color
@checkbox-border-color
@checkbox-bg-color-light
@checkbox-bg-color-dark
@selectbox-border-color
@selectbox-bg-color-light
@selectbox-bg-color-dark
@selectbox-menu-bg-color-light
@selectbox-menu-bg-color-dark
@table-bg-color-light
@table-bg-color-dark
@spinner-base-color

The default actual output values (colors) are the same or similar to previous colors. Many of the statically defined colors have been changed follow relative color shades of the base color, so there may be minor differences.

If you want to customize these newly added variables, add them to your custom variables (override) sheet.

v0.11.1

FIXED

• Fixed checkbox/radiobox ticks' color not changing according to primary-accent-color value when placed in dark mode.

v0.11.0

REMOVED

• .ondark optional class for applying dark mode styles has been removed. It was present since earlier versions along with the .dark class, and was originally intended to be used as a class that can be applied directly to an element to change the style to dark mode—but made the code messy and ultimately didn't properly work for many elements. Now dark mode can be only applied when .dark class exists on parent element. (See "Dark Mode" docs page)

ADDED

• Added a new way to apply dark mode styles even in encapsulated elements (Web Components), by using :host-context(.dark) pseudo class. Enable this by setting the new @use-webcomponents global variable to true if you're using Petal in such specific environment. (See "Dark Mode" docs page)

v0.10.3

FIXED (Reverted)

• Fixed checkbox/radiobox labels inner html elements displaying in a weird way.

  In 0.9.2 the checkbox/radiobox started using flex instead of absolute positioning to achieve perfect centering... but apparently had some serious side effects when you started using other html elements inside label, like a links or spans because the way flex works. I could not find any alternative ways to keep flex (and perfect centering) while not requiring additional wrapper elements inside label, so decided to revert back to the good old method of overlaying :before and :after pseudo elements that make up the checkbox/radiobox appearance with absolute positioning.

REMOVED

• Because of reasons above, .align-top optional class for checkbox/radiobox that was introduced in 0.10.2 is now gone, because checkbox will always align to top by default.

CHANGED

• The effect that used to slightly shift the switch handles when hovering over them has been removed because it may cause confusion on mobile devices when hover state is preserved after tapping on a switch (makes it look like it's half-switched on or off)

v0.10.2

FIXED

• Fixed checkmark and radiobox being slightly squished when adjacent label text has too much text.

ADDED

• New optional class .align-top for aligning checkbox and radiobox to top of the label instead of aligning in the middle. See docs for more detail.

v0.10.1

FIXED

• Fixed checkmark and radiobox marker becoming overly thick when sizing them up.
• Fixed spinner animation not running when applied on an input with validation icons

REMOVED

• Lato font is no longer included in Petal by default. Petal will use the 'system font stack' for faster load times and OS integration. If you want your previous (Lato) font back after upgrading, you can add it manually from Google Fonts, and set your @base-font variable value to 'Lato'.

CHANGED

• [Possible breaking change] Wrapper class used for form validation icons is no longer input-group, use input-wrap instead. This was done to prevent style collision. (See Issue #9 )
• [Possible breaking change] All previously named input-label variables are renamed to form-label- to better match what it actually affects. This will not break your existing builds (because the stock variable sheet will be used), but if you had customized any of these values in your project you'll need to change the variable names to form-label-. (See commit 807a495)
• petal-functions.js (compiled to petal.js and petal.min.js) is now in vanilla JS. 👋 jQuery! (See PR #15 )
• Selecter jQuery plugin is no more included in standard petal.js. You'll need to include it separately if you want to use this. See the documentation.
• Changed background-color for code blocks when used on .dark for better legibility.
• color-palette.less are now imported inside variables.less as a dependency.
• 'Warning' context color now uses a newly added color @gold instead of @yellow (It's a slightly darker, saturated yellow that looks more legible on a light background.)

ADDED

• New global variable @checkbox-check-thickness: You can now adjust checkmark thickness separately from the border width.
• New global variable @form-label-uppercase: Set to false if you don't want forced uppercase style on form labels.
• New class .limit-width: add them to .container.stretch to limit the max-width of a fluid-width container.
• New global variable @container-max-width: Adjust the value to change the max-width of the .limit-width class.
• Added color override for hr tags on dark mode.
• Added new preset color variables: see them here

OTHERS

• Documentation has been greatly revised, both in contents and design. Now a global 'dark mode' toggle sits in the site header so you can conveniently preview 'dark mode' styles for UI elements.