Generated by SassMeister.com.

input.scss

@use "sass:string";
@use "sass:list";

@function replace($str, $s1, $s2) {
    $n: string.index($str, $s1);
    @return string.slice($str, 1, $n - 1) + $s2 + string.slice($str, $n + string.length($s1));
}

@mixin variants($variants...) {
    @each $variant in $variants {
        @if $variant == core {
            @content;
        } @else if $variant == hover {
            @at-root {
                .hover\:#{string.slice("" + &, 2)}:hover {
                    @content;
                }
            }
        } @else if $variant == focus {
            @at-root {
                .focus\:#{string.slice("" + &, 2)}:focus {
                    @content;
                }
            }
        } @else if $variant == touch {
            @at-root {
                .touch\:#{string.slice("" + &, 2)}:hover,
                .focus\:#{string.slice("" + &, 2)}:focus {
                    @content;
                }
            }
        } @else if $variant == group-hover {
            @at-root {
                .group:hover .group-hover\:#{string.slice("" + &, 2)} {
                    @content;
                }
            }
        } @else if $variant == group-focus {
            @at-root {
                .group:focus .group-focus\:#{string.slice("" + &, 2)} {
                    @content;
                }
            }
        } @else if $variant == group-touch {
            @at-root {
                .group:hover .group-hover\:#{string.slice("" + &, 2)},
                .group:focus .group-focus\:#{string.slice("" + &, 2)} {
                    @content;
                }
            }
        } @else if $variant == responsive {
            @at-root {
                .#{replace(string.slice("" + &, 2), "\\: .", "\\:")} {
                    @content;
                }
            }
        }
    }
}

// $colors: (
//     my-red: var(--my-red),
//     my-blue: var(--my-blue),
//     my-green: var(--my-green),
// );
// 
// @mixin colors($variants...) {
//     @each $k, $v in $colors {
//         .#{$k} {
//             @include variants($variants...) {
//                 background-color: $v;
//             }
//         }
//     }
// }
// 
// $breakpoints: (
//     xs: 512,
//     sm: 640,
//     md: 768,
//     lg: 1024,
//     // 2xl: 1280,
// );

// @function color-props() {
//     @return (
//         color: color,
//         bg: background-color,
//         border: border,
//     ); 
// }

// @at-root {
//     // @include colors(core);
//     // @each $k, $v in $breakpoints {
//     //     @media (min-width: $v + px) {
//     //         .#{$k}\: {
//     //             @include colors(responsive);
//     //         }
//     //     }
//     // }
//     
//     $colors: (
//         my-red: var(--my-red),
//         my-blue: var(--my-blue),
//         my-green: var(--my-green),
//     );
//     
//     $shadows: (
//         my-shadow: var(--my-shadow),
//     );
// 
//     @each $k1, $v1 in color-props() {
//         @each $k2, $v2 in $colors {
//             .#{$k1}-#{$k2} {
//                 // --#{$k1}-opacity: 1;
//                 #{$v1}: $v2;
//             }
//         }
//     }
//     @each $k, $v in $shadows {
//         .shadow-#{$k} {
//             box-shadow: $v;
//         }
//     }
// }

$breakpoints: (
    xs: 512,
    sm: 640,
    md: 768,
    lg: 1024,
    // 2xl: 1280,
);

$-opts: (
	hstack: flex,
	vstack: flex,
	zstack: grid,
	grid: grid
);

@mixin hidden-polyfill($variants...) {
    @if list.index($variants, core) {
        :root {
            --dm-display-default: block;
            --dm-display: var(--dm-display-default);
        }
        @each $k, $v in $-opts {
        	.#{$k} > * {
        		--dm-display: var(--dm-display-default);
        	}
        	.#{$k} {
        		--dm-display: #{$v};
        	}
        }
    }

    .hidden {
        @include variants($variants...) {
    	    display: none;
        }
    }
    .unhidden {
        @include variants($variants...) {
    	    display: var(--dm-display);
        }
    }
}

@at-root {
    @include hidden-polyfill(core, hover, focus, group-hover, group-focus);
    @each $k, $v in $breakpoints {
        @media (min-width: $v + px) {
            .#{$k}\: {
                @include hidden-polyfill(responsive);
            }
        }
    }
}

// @each $k, $v in (xs: 512, sm: 640, md: 768, lg: 1280) {
// 	@media (min-width: $v + px) {
// 		.#{$k}\:hidden {
// 			display: none;
// 		}
// 		.#{$k}\:unhidden {
// 			display: var(--dm-display, block);
// 		}
// 	}
// }

output.css

:root {
  --dm-display-default: block;
  --dm-display: var(--dm-display-default);
}

.hstack > * {
  --dm-display: var(--dm-display-default);
}

.hstack {
  --dm-display: flex;
}

.vstack > * {
  --dm-display: var(--dm-display-default);
}

.vstack {
  --dm-display: flex;
}

.zstack > * {
  --dm-display: var(--dm-display-default);
}

.zstack {
  --dm-display: grid;
}

.grid > * {
  --dm-display: var(--dm-display-default);
}

.grid {
  --dm-display: grid;
}

.hidden {
  display: none;
}
.hover\:hidden:hover {
  display: none;
}

.focus\:hidden:focus {
  display: none;
}

.group:hover .group-hover\:hidden {
  display: none;
}

.group:focus .group-focus\:hidden {
  display: none;
}

.unhidden {
  display: var(--dm-display);
}
.hover\:unhidden:hover {
  display: var(--dm-display);
}

.focus\:unhidden:focus {
  display: var(--dm-display);
}

.group:hover .group-hover\:unhidden {
  display: var(--dm-display);
}

.group:focus .group-focus\:unhidden {
  display: var(--dm-display);
}

@media (min-width: 512px) {
  .xs\:hidden {
    display: none;
  }

  .xs\:unhidden {
    display: var(--dm-display);
  }
}
@media (min-width: 640px) {
  .sm\:hidden {
    display: none;
  }

  .sm\:unhidden {
    display: var(--dm-display);
  }
}
@media (min-width: 768px) {
  .md\:hidden {
    display: none;
  }

  .md\:unhidden {
    display: var(--dm-display);
  }
}
@media (min-width: 1024px) {
  .lg\:hidden {
    display: none;
  }

  .lg\:unhidden {
    display: var(--dm-display);
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}