StyleMods v1.2.6

New

Dropdowns (components/dropdowns.scss)

Added new dropdown components using restyled HTML <details> disclosure elements and an adapted Mark Otto script method for optional light-dismiss functionality. See https://stylemods.com/docs/components/dropdowns/.

Updates

Theme colors (color/theme.scss)

• Added new dropdown property values to theme colors.

All primary colors (color/*)

• Added new dropdown property values to color utility variables.

Typography (content/typography.scss)

• Added focus-visible box shadow to the default <summary> element.

Forms and buttons (content/forms-buttons.scss)

• Changed the buttons and forms box-shadow focus width values to improve how they looked.

Accordions (components/accordions.scss)

• Renamed $summary-focus-color to $summary-background-focus to differenatiate from focus shadow variable added to conent/typography.scss styles.

Buttons (components/buttons.scss)

• Changed the buttons box-shadow focus width values to match the new values in the forms-buttons.scss.

Dialogs (components/dialogs.scss)

• Removed the z-index property values from the faux dialog backdrop utility (.close-dialog) which wasn't required.

List groups (components/list-groups.scss)

• Removed the color property values included with the :where(.list-links a) style which wasn't required.

StyleMods v1.2.5

New

Buttons (buttons.scss)

• Added .btn-flex and .btn-flex-column utilities for grouping buttons together with customizable gap between buttons.
• Added next/previous and up/down icon buttons to use with both button group and flex styles for pagination style button groups.
• Added .btn-img utility to display buttons as images. Resets button margins, adjusts image radius to match the button and changes the cursor to zoom-in.

Dialogs (dialogs.scss)

• Added icon styles to include with close buttons.
• Added card-like title header modifier styles to apply to dialog headings.
• Added .dialog-img and .dialog-figure utilities to include image/figure only dialogs.
• Added .dialog-btn-img utility that applies the same styles as the new .btn-img utility described above. Designed to be used with the .dialog-img and .dialog-figure utilities to enable setting up dialog galleries.

Updates

Forms and buttons (forms-buttons.scss)

• Increased inline padding for default forms and buttons.

Buttons (buttons.scss)

• Increased inline padding for the .btn utility.
• Adjusted padding on all button size modifier utilities.
• Re-wrote .btn-group and .btn-group-column styles to enable using ordered and unordered lists for both button group utilities.

Dialogs (dialogs.scss)

• Added base margins to dialogs to override global margin reset styles if included.

Popovers (popovers.scss)

• Added base margins to popovers to override global margin reset styles if included.

Alerts (alerts.scss)

• Added higher specificity to the internal margins.

Colors

• Added new dialog header color properties to theme variable tokens.
• Added new dialog header color property values to the grayscale and all primary color modifier utilities.

StyleMods v1.2.4

Updates

Typography (typography.scss)

• The link colors have been changed to use custom HEX colors as fallback values instead of the previous LinkText value which only worked with Firefox. Experimented with -webkit-link color values but was unable to find a working solution for all browsers using system colors as fallback values.
• Fixed the incorrect outline values included with the :where(a:focus-visible) styles.
• Added inline-size: fit-content; to figure and contain: inline-size; to the figcaption to ensure the caption content stays the same width as the figure image.
• Simplified the hr styles and added customizable Sass variables for color and margin.
• Where the CSS variable fallback method didn't add much value to the styles the variable fallbacks have been replaced with regular values and included as Sass variables to allow customizing with overrides.

Forms and buttons (forms-buttons.scss)

• Removed line-height properties from individual styles and added to shared styles with font family.
• Simplified the shared styles to include inherit values directly instead of via Sass variables.
• Changed the accent color fallback values to custom colors as the fallback method couldn't be reverted or initialized due to the form styles including a text color to enable customizing.
• Also changed accent color CSS variable name from --accent to --form-accent for consistency after noticing they weren't working with optional theme colors (theme.scss) that used the CSS variable.
• Removed the $fieldset-* and $legend-* Sass variables, removed some unrequired properties and changed others to use the default $form-* variables.
• Removed some styles completely that were not required and cleaned up styles that included some redundant properties and over-zealous use of variable fallbacks.
• Rearranged the order of the simplified Sass variables and changed the order of shared styles to alphabetical, i.e. :where(button, input, optgroup, select, textarea).

Theme colors (theme.scss)

• Added $theme- to light and dark base Sass variables (e.g. $text-light is now $theme-text-light) to provide stronger association with the variable names as being specifically theme orientated.

Theme switch script (theme-switch.js)

• Changed (theme.value = e ? "true" : "false") under window.matchMedia to (theme.value = e ? "dark" : "light") so the whole script uses consistent language.

Buttons (buttons.scss)

• Removed line-height properties with the variable fallback values from the Sass variables and included the inherit value directly with the styles to keep them consistent with the styles included with forms and buttons.

StyleMods v1.2.3

Grid changes

The grids setup has been overhauled to accommodate a new grid layouts module but the styles provided previously still work the same as before.

Grid (grid.scss)

The grids.scss has been changed to grid.scss and now only includes the display: grid and display: inline-grid utilities along with all the optional responsive modifiers. It's also still provided as an option with the generic display utilities (display.scss) along with the basic block and flex styles.

Grid templates (grid-templates.scss)

The 12 column grid utilities have been moved to the new grid-templates.scss, these also provide the required display: grid utility that can be used if not including the basic utility as described above.

The way the grids are compiled has also been changed to enable using a single value to customize the amount of columns included when compiling. The examples and documentation is now on the new Grid templates page.

Grid layouts (grid-layouts.scss)

A new grid layout system has been added, it uses grid-column and grid-row properties to provide utilities for page layout with modifiers for responsive design. Documentation is provided on the new Grid layouts page, the styles are included with the new grid-layouts.scss document.

Updates

Typography (typography.scss)

• Fixed up $font-family variable method which presented problems if using overrides.

Columns (columns.scss)

• Changed columns utilities names from .col-* to .columns-* so the names don't conflict with new grid columns utilities.
• Simplified the way the modifier utilities are generated for simpler customizing.

Display (display.scss)

• Changed mixin names from display-utilities-css to display-css for consistency.

Text (text.scss)

• Changed all the font size names to numbered values from smallest to largest, i.e. .fs-xxs is now .fs-1. The reason for this is to make the responsive modifiers now available for the text sizes more logical to use, e.g. .fs-1-xxs makes more sense than .fs-xxs-xxs.

StyleMods v1.2.2

New

Cards (cards.scss)

• Added .card-body and .card-title styles to adapt the default cards into different card types. See the updated card page on the docs site for more information.

Buttons (buttons.scss)

• Added .btn-group-column styles for vertical button groups. See the updated button page on the docs site for more information.

Updates

Accordions (accordions.scss)

• Setup border inner radius values as Sass variable for consistent approach that's easier to customize. Styles remain unchanged.

Borders (borders.scss)

• Included basic border styles as border-position-css with the borders-css mixin now being used to include both the border-radius-css and border-position-css styles.

Buttons (buttons.scss)

• Added .btn-group-column styles as described above.
• Updated button radius to use same values as forms and button styles for consistency.

Cards (cards.scss)

• Added .card-body and .card-title styles as described above.
• Setup border inner radius values as Sass variable for consistent approach that's easier to customize.
• Removed the unrequired card image styles that created display layout issues.
• Removed the redundant light and dark modifiers for .card-link options.

Colors

• For all colors the customizable pseudo-class styles to contain the CSS variables have been updated to enable changing them from a pseudo-class if required.

Dialogs (dialogs.scss)

• Setup the dialogs to include the transition styles by default but provided the option to include them without if required. Both styles and transition styles can still be included individually.
• Moved the light and dark modifier classes outside of the transition mixin where they had been included accidently.

Gradients (gradients.scss)

• The customizable pseudo-class style to contain the gradient CSS variables has been updated to enable changing it from a pseudo-class if required.

Grids (grids.scss)

• Changed the name of the base grid utilities mixin from grid-utilities-css to grid-css for consistent approach.
• Moved the grouped mixins to the bottom of file for consistent approach.
• The customizable pseudo-class style to contain the grids CSS variables has been updated to enable changing it from a pseudo-class if required.

List groups (list-groups.scss)

• Simplified border inner radius values as Sass variable for consistent approach that's easier to customize. Styles remain unchanged.

Popovers (popovers.scss)

• Setup the popovers to include the transition styles by default but provided the option to include them without if required. Both styles and transition styles can still be included individually.
• Moved the light and dark modifier classes outside of the transition mixin where they had been included accidently.

Shadows (shadows.scss)

• The customizable pseudo-class style to contain the shadows CSS variables has been updated to enable changing it from a pseudo-class if required.

Text (text.scss)

• Decreased the font size value for the .fs-xs utility from 0.875rem to 0.85rem.
• Added all the missing grouped responsive mixins options I'd forgotten to include.
• Changed links-utilities-css to text-links-css for consistency.

StyleMods v1.2.1

New

Each module category now includes a document to enable compiling all the modules from that category using a single mixin, so now you can compile everything currently included with StyleMods as follows:

@use "stylemods/scss" as *;
@include all-content-css;
@include all-color-css;
@include all-components-css;
@include all-utilities-css;
@include all-layout-css;
@include all-icons-css;

Documentation about using the new options is provided on the Using StyleMods page on the docs site.

Updates

The index.scss files for each module categories have been updated to forward the new styles described above.

All colors (all-colors.scss)

• Forwarded the theme colors (theme.scss) and theme switch (theme-switch.scss) to all-colors.scss to enable compiling them with the all-color mixins.
• Created new all-color-css mixin which compiles all the color variables, utilities, theme colors and theme switch.
• Created primary colors mixin to also enable compiling them separately from the surface and grayscale colors.
• Changed the color-utilities-css name to all-color-utilities-css for consistency.
• Changed the color-modules-css name to all-color-modules-css for consistency.

Theme colors (theme.scss)

• Changed the $theme-surface value from var(--background) to var(--surface) to save confusion about how the style works as both values use the same colors.
• Changed $theme-surface-tint-1 and $theme-surface-tint-2 values to match those of the table striped and hover row colors they're provided for to simplify matching the tints correctly.

SVG icons (svg-icons.scss)

• Added -svg to all icon mixin names to delineate them from utility styles, e.g default-icon-variables is now default-svg-icon-variables.

Columns (columns.scss)

• Removed column-values-css mixins and moved the values into the columns-css to simplify using the styles.

Grids (grids.scss)

• Added optional responsive modifier mixins for the base grid-utilities-css styles.
• Created the all-grids-css mixin to enable compiling all grid variables, utilities and modifier classes using a single mixin. Also includes optional mixins for the responsive modifier classes.
• Changed default fraction grid map values and mixin names from grid-* to fraction-grid-* wherever used to better describe the exact purpose of each.
• Changed the auto grid map values and mixin names from autogrid-* to auto-grid-* for consistency.

Bug fixes

Object fit (object-fit.scss)

• Fixed the incorrect mixin names for xs and xxs which both still included the xxl size that hadn't been updated when originally copy/pasting the styles to create the modifier mixins.

Z-index (z-index.scss)

• Fixed typo in modifier mixin name changing xss to xxs.

StyleMods v1.2.0

The release has been updated to version 1.2.0 due to the major changes below.

Major changes

Icons

The Icons (icons.scss) have been removed from the components modules group and into their own dedicated category, and the styles split into three separate style modules:

• SVG icons (svg-icons.scss)
• Custom icons (custom-icons.scss)
• Icon utilities (icon-utilities.scss)

The methods for including them has been updated but how the icons and utilities are used remains the same as previously.

Reason: The icons consist of three different elements that work together but can be used individually in various ways. The previous documentation included highlighted this was confusing to understand, the simplest option to fix this was to include them as their own style modules in a dedicated category to provide better clarity.

Alignment

The Alignment (alignment.scss) layout styles have been removed with the individual utilities previously provided split into three new different layout modules:

• Align (align.scss)
• Justify (justify.scss)
• Place (place.scss)

The justify and place utilities have also both been expanded to include optional *-items and *-self property value utilities to complement the existing *-content utility styles already provided for each.

The abbreviated utility class names previously used have all been updated to provide definitive names for the styles, for example .ai-center is changed .align-items-center for better clarity on the utility's role. The new docs pages for each module includes updated utility names tables with all the new class names used.

Reason: The source code was originally from the Themalize project and didn't match the individual nature of the way the rest of StyleMods is written. This brings them up-to-spec with other utilities to expand how they can be used.

Bug fixes

Theme (theme.scss)

• Changed incorrect variable mixin name theme-dialog-list-group to theme-list-group-variables.

Typography (typography.scss)

• Removed the leftover Themalize attribute --mb: 0 variable from nested list styles and replaced it with margin-block-end: var(--list-child-mb, 0).

Updates

Images (images.scss)

• Added background image size and attachment utilities.
• Simplified utility names for practical usage.

Icons (icons.scss)

• Updated StyleMods logo.

StyleMods v1.1.9

New

Aspect-ratio (aspect-ratio.scss)

• Added new aspect-ratio utilities for single or grouped elements with variable utilities for customizing inline and module mixins for responsive modifiers.

Object-fit (object-fit.scss)

• Added object-fit utilities for images and other media with variable utilities for customizing inline and module mixins for responsive modifiers.

Updates

Images (images.scss)

The image wrapper utilities (.portrait, .landscape, etc.) have been replaced with the new aspect-ratio.scss and object-fit.scss layout utilities described above, the images now include the following utilities instead:

• Responsive image utility class.
• Variable class utilities for background-image, list-style-image and border-image-source.
• image-rendering utility classes.
• background-repeat utility classes.
• background-position utility classes.

Typography (typography.scss)

• Changed the figure value for margin-block-end from 1rem to var(--fig-mb, 1rem) to enable customizing inline.

Alerts (alerts.scss)

• Updated close button for dismissable alerts to stay fixed to the right hand corner of the alerts, added extra padding on the right for text to wrap and accomodate the button's position.

StyleMods v1.1.8

New

Columns (columns.scss)

• Added new columns: property utilities to the layout modules, includes variable utility for customizing columns inline and preset values (1-12) columns with optional responsive modifier mixins.
• Updated layout module index.scss file to include new utilities.

Updates

Typography (typography.scss)

• Beefed up horizontal rule <hr> colors to provide better contrast.

Gaps (gaps.scss)

• Changed name of Sass map from $gap-value to $gap-sizes for the same name convention used for the other spacing utilities margins and padding.

Overflow (overflow.scss)

• Changed name of Sass map from $overflow to $overflow-values for consistent naming convention.

Overscroll (overscroll.scss)

• Changed name of Sass map from $overscroll-behavior to $overscroll-values for consistent naming convention.
• Changed name of Sass mixin from overscroll-behavior-css to overscroll-css for simpler naming convention.

Position (position.scss)

• Changed name of Sass map from $position-value to $position-values for consistent naming convention.

Opacity (opacity.scss)

• Changed name of Sass map from $opacity to $opacity-values for consistent naming convention.

Shadows (shadows.scss)

• Provided Sass variable for default :where(html) pseudo-class style to make it customizable if preferred.

Text (text.scss)

• Removed font-weight, text-align and text-wrap Sass variables, moved values directly into maps.
• Added optional responsive modifier utilities for the font-weight mixins.

StyleMods v1.1.7

New

Opacity (opacity.scss)

• Added standard opacity utility classes with variable utility class for customizing inline and module mixins for responsive modifiers.

Scrollbar colors (scrollbars.scss)

• Added variable utility class .scroll-color using scrollbar-color property*, includes variables for thumb and track colors with initial fallback value to enable customizing via global, local or inline CSS.

Gradients (gradients.scss)

• Removed gradient styles from backgrounds.scss to include as it's own module style. Opens up scope for expanding both documents in future but no existing styles have been changed.

Updates

Colors

• Made minor changes to the blue, red, green and purple primary colors palettes to adjust the contrast differences between the different tints/shades. Using and customizing remains unchanged.

Colors (all-colors.scss)

• Removed the extra @include blue-variables; included with the file, now only compiles blue variable tokens once.

Backgrounds (backgrounds.scss)

• Moved gradients styles from backgrounds.scss to the new gradients.scss style module. The background utility style hasn't been changed and the way it's used and/or customized remains the same.

Badges (backgrounds.scss) and Buttons (buttons.scss)

• Moved both buttons and badges from utilities to group them with the more appropriate components category. None of the styles have been changed and the way both are used and/or customized remains the same.