Skip to content

Delta I

Latest
Latest
Compare
Choose a tag to compare
@Spiderpig86 Spiderpig86 released this 05 Feb 19:23
0.8.0
642ee32

🎉 Features

  • Major rewrite of class generation system.
  • New utility mixins to replace old ones:
    • generator.utility -> generator_v2.utility
    • generator.utility-with-body -> generator_v2.utility-with-body
  • Class generator now supports class grouping via group:[pseudo] and group-[pseudo] CSS classes. These allow developers to use events on a parent element to affect the styles of child elements.
@include generator_v2.utility(
    $base-class-name: 'text',
    $class-value-pairs: (
        'blue': (
            'color': blue,
        ),
    ),
    $variants: (
        'group-hover'
    ),
    $generate-viewports: true,
    $override: '!important'
);
.group:hover .group-hover\:u-text-blue {
    color: blue !important;
}

...
<div class="group">
    <p>test</p>
    <div class="group-hover:u-text-blue">
        <p>this is blue on hover</p>
        <p>this is also blue on hover</p>
    </div>
</div>
  • Class generator now supports many more variants (pseudos):
    • 'responsive',
    • 'dark', 'light',
    • 'reduce-motion',
    • 'first-of-type',
    • 'last-of-type',
    • 'portrait', 'landscape',
    • 'hover', 'group-hover',
    • 'focus', 'group-focus', 'focus-visible', 'focus-within',
    • 'active',
    • 'visited',
    • 'checked',
    • 'disabled'
@include generator_v2.utility(
    $base-class-name: 'text',
    $class-value-pairs: (
        'blue': (
            'color': blue,
        ),
    ),
    $variants: (
        'dark',
        'hover',
        'reduce-motion',
        'group-hover',
        'group-focus',
    ),
    $generate-viewports: true,
    $override: '!important'
);
.u-text-blue {
    color: blue !important;
}

.hover\:u-text-blue:hover {
    color: blue !important;
}

.group:hover .group-hover\:u-text-blue {
    color: blue !important;
}

.group:focus .group-focus\:u-text-blue {
    color: blue !important;
}

@media screen and (min-width: 640px) {
    .sm\:u-text-blue {
        color: blue !important;
    }

    .sm\:hover\:u-text-blue:hover {
        color: blue !important;
    }

...
  • Update grid class utilities to support generation with viewports and modifiers b3be15f
  • Enable hover pseudo selector for v2 colors 839cd47
  • Add custom button behaviors for v1 color classes (only apply on button selectors and add hover behavior) d4a6b6a
  • Add cursor util classes 32e0897
  • Add tooltip--visible class to show tooltips outside of :hover and :focus 9b77f78
  • Add new pseudo-variants config with integration to existing class generation 459dbba
@use "cirrus-ext" with (
    $config: (
        pseudo-variants: (
            CLEARFIX: ('responsive', 'hover', ...),
            FLEX: ('responsive'),
            ...
        ),
    ),
);

🐛 Fixes

  • Remove unnecessary forward for cirrus-all build 3dfa6e6
  • Migrate to ESM for Gulp, update Gulp deps, update CI to use Node 20 3697dee
  • Fix left padding for form-ext inputs 6453943
  • Remove inconsistent padding for table header and footer th 3842fce
  • Fix incorrect class name and property for italic font util class 6591ca1
  • Remove extra letter spacing from all text elements 6cb8f76
  • Add missing viewport config entries ea038be
  • Add missing grid-row styles grid-rows-, grid-r-, grid-rs-, and grid-re- 1295016
  • Fix grid row column style c95fe41
  • Link font weight and color adjustments no longer apply on nested input elements a6b5e25
  • Remove background color from avatar when there is a child image element 7d4ea82
  • Fix text color with a tag and .btn class c1c7fa5
  • Remove button shadow on focus for .btn--disabled 867eeff
  • Fix broken tab styles, remove remaining hardcoded colors #330 bfa64c6

💥 Breaking Changes

  • New viewport syntax across all classes that support different viewports, unifying the fractured viewport system.
    • The main difference from before is now all viewport modifiers will use the same syntax instead of inconsistent system from before. All classes that are meant to apply at a certain viewport size and above will be in the form of [sm|md|lg|xl]:classname. This will be the case for all classes whether it is for columns or utility classes.
    • Below are the main syntax changes:
      • col-sm-1 -> sm:col-1 - column classes will all have the viewport modifier prefixed at the front.
      • col-6 -> md:col-6 - all column classes that did not have the modifier class must be prefixed with md: to get the same behavior as before. This is to address the confusing implicit behavior where a class like col-6 would have 50% width for md and above but 100% width for viewports below md.
      • u-block-md -> md:u-block - for all utility classes, the viewport modifier will be prefixed at the front.
  • Deprecated margin:1 rem 0; style for p, article, blockquote since it leads to unexpected behaviors for users 9bcda3a
  • Deprecating row.no-space classes 8e802f9
  • Update Modal class names for clarity 9da499f
  • Deprecated .modal.small 9da499f
  • Deprecating placeholder.scss 39e663b
  • Deprecated .title and .subtitle classes b07c76d
  • Deprecated viewports config in favor of using 'responsive' entry in pseudo-variant config 1f33d83
Assets 2
Loading