@documental-xyz/core 0.1.0

package/src/assets/styles/utils/grrr/_grrr.scss

@@ -0,0 +1,433 @@
+@use "sass:map";
+@use "sass:math";
+@use "sass:list";
+
+@use '../../config/breakpoints' as *;
+@use '../../config/grrr.configs' as *;
+@use '../../config/mixins' as *;
+@use '../../config/functions' as *;
+
+@mixin grrr($type: 'board', $start: 'full', $end: 'full', $offset: true, $config: $grrr-config, $prefix: false) {
+
+	// defining sass vars
+	@if $prefix == false {
+		$prefix: map.get($config, 'name');
+	}
+	$breakpoints: map.get($map: $config, $key: 'breakpoints');
+	$board-max: map.get($map: $config, $key: 'board-max');
+	$last_item: list.nth(map.values($breakpoints), -1);
+	$board-max-w-margins: map.get($map: $last_item, $key: 'margin') * 2 + $board-max;
+
+	//defining breakpoint vars
+	@include grrr-bp-vars($type,$start,$end,$offset,$config,$prefix,$breakpoints);
+
+	//defining css vars
+	@include grrr-css-vars($type,$start,$end,$offset,$config,$prefix, $board-max, $board-max-w-margins);
+
+	& {
+		//default grid css properties
+		display: grid;
+		grid-auto-rows: -webkit-max-content;
+		grid-auto-rows: max-content;
+		grid-auto-flow: row;
+		column-gap: 0 !important;
+		@if $type =='board' {
+	
+			@if $start =='full' and $end =='full' {
+				grid-column: full-start / full-end;
+				grid-template-columns: [full-start offset-start] minmax(var(--#{$prefix}-board-margin), var(--#{$prefix}-margin)) [offset-end board-full-start content-start board-start] minmax(0, 1fr) repeat(calc(var(--#{$prefix}-cols) - 1), [board-end gap-start] min(var(--#{$prefix}-gutter)) [gap-end board-start] minmax(0, 1fr)) [board-full-end content-end board-end offset-start] minmax(var(--#{$prefix}-board-margin), var(--#{$prefix}-margin)) [full-end offset-end];
+			}
+	
+			@if $start =='full' and $end !='full' {
+				$end-cols: calc($end - 1);
+				--#{$prefix}-child-margin: calc(100% - (#{$end} * (var(--#{$prefix}-col-size) + var(--#{$prefix}-gutter))));
+				--#{$prefix}-child-margin-left: calc(var(--#{$prefix}-child-margin) + var(--#{$prefix}-gutter));
+	
+				grid-column: full-start / board-end $end;
+				margin-right: calc(var(--#{$prefix}-out-left) * -1);
+				grid-template-columns: [full-start offset-start] minmax(var(--#{$prefix}-margin), var(--#{$prefix}-child-margin)) [offset-end board-full-start content-start board-start] minmax(0, 1fr) repeat($end-cols, [board-end gap-start] min(var(--#{$prefix}-gutter)) [gap-end board-start] minmax(0, 1fr)) [board-full-end content-end board-end full-end offset-start] var(--#{$prefix}-out-right) [offset-end];
+	
+				@media (max-width: #{ $board-max-w-margins }) {
+					--#{$prefix}-child-margin: var(--#{$prefix}-margin);
+					--#{$prefix}-child-margin-left: var(--#{$prefix}-margin);
+				}
+			}
+	
+			@if $start !='full' and $end =='full' {
+				$start-cols: calc(var(--#{$prefix}-cols) - #{$start});
+				--#{$prefix}-child-margin: calc(100% - ((#{$start-cols} + 1) * (var(--#{$prefix}-col-size) + var(--#{$prefix}-gutter))));
+				--#{$prefix}-child-margin-right: calc(var(--#{$prefix}-child-margin) + var(--#{$prefix}-gutter));
+	
+				grid-column: board-start $start / full-end;
+				margin-left: calc(var(--#{$prefix}-out-left) * -1);
+				grid-template-columns: [offset-start] var(--#{$prefix}-out-left) [offset-end full-start board-full-start content-start board-start] minmax(0, 1fr) repeat($start-cols , [board-end gap-start] min(var(--#{$prefix}-gutter)) [gap-end board-start] minmax(0, 1fr)) [board-full-end content-end board-end offset-start] minmax(var(--#{$prefix}-margin), var(--#{$prefix}-child-margin)) [offset-end full-end];
+	
+				@media (max-width: #{ $board-max-w-margins }) {
+					--#{$prefix}-child-margin: var(--#{$prefix}-margin);
+					--#{$prefix}-child-margin-right: var(--#{$prefix}-margin);
+				}
+			}
+	
+			@if $start !='full' and $end !='full' {
+				$end-cols: calc($end - $start);
+	
+				margin-inline: calc(var(--#{$prefix}-out-left) * -1) calc(var(--#{$prefix}-out-right) * -1);
+				grid-column: board-start $start / board-end $end;
+				grid-template-columns:
+					[offset-start] var(--#{$prefix}-out-left) [offset-end full-start board-full-start content-start board-start]
+					minmax(0, 1fr)
+					repeat($end-cols, [board-end gap-start] min(var(--#{$prefix}-gutter)) [gap-end board-start] minmax(0, 1fr))
+					[board-full-end content-end board-end full-end offset-start] var(--#{$prefix}-out-right) [offset-end];
+			}
+		}
+	
+		@if $type =='fluid' {
+			--#{$prefix}-col-context-size: var(--#{$prefix}-col-responsive-size);
+	
+			@if $start =='full' and $end =='full' {
+				grid-column: full-start / full-end;
+				grid-template-columns: [full-start offset-start] var(--#{$prefix}-margin) [board-full-start content-start board-start offset-end] minmax(0, 1fr) repeat(calc(var(--#{$prefix}-cols) - 1), [board-end gap-start] min(var(--#{$prefix}-gutter)) [gap-end board-start] minmax(0, 1fr)) [board-full-end content-end board-end offset-start] min(var(--#{$prefix}-margin)) [offset-end full-end];
+			}
+	
+			@if $start =='full' and $end !='full' {
+				$end-cols: calc($end - 1);
+	
+				grid-column: full-start / board-end $end;
+				margin-right: calc(var(--#{$prefix}-out-right) * -1);
+				grid-template-columns: [full-start offset-start] min(var(--#{$prefix}-margin)) [offset-end board-full-start content-start board-start] minmax(0, 1fr) repeat($end-cols, [board-end gap-start] min(var(--#{$prefix}-gutter)) [gap-end board-start] minmax(0, 1fr)) [board-full-end content-end board-end full-end offset-start] var(--#{$prefix}-out-right) [offset-end];
+			}
+	
+			@if $start !='full' and $end =='full' {
+				$start-cols: calc(var(--#{$prefix}-cols) - #{$start});
+	
+				grid-column: board-start $start / full-end;
+				margin-left: calc(var(--#{$prefix}-gutter) * -1);
+				grid-template-columns: [offset-start] var(--#{$prefix}-gutter) [offset-end full-start board-full-start content-start board-start] minmax(0, 1fr) repeat($start-cols , [board-end gap-start] min(var(--#{$prefix}-gutter)) [gap-end board-start] minmax(0, 1fr)) [board-full-end content-end board-end offset-start] min(var(--#{$prefix}-margin)) [offset-end full-end];
+			}
+	
+			@if $start !='full' and $end !='full' {
+				$end-cols: calc($end - $start);
+	
+				margin-inline: calc(var(--#{$prefix}-out-left) * -1) calc(var(--#{$prefix}-out-right) * -1);
+				grid-column: board-start $start / board-end $end;
+				grid-template-columns: [offset-start] var(--#{$prefix}-out-left) [offset-end full-start board-full-start content-start board-start] minmax(0, 1fr) repeat($end-cols, [board-end gap-start] min(var(--#{$prefix}-gutter)) [gap-end board-start] minmax(0, 1fr)) [board-full-end content-end board-end full-end offset-start] var(--#{$prefix}-out-right) [offset-end];
+	
+			}
+	
+		}
+	}
+
+
+}
+
+@mixin grrr-content($type: 'board', $content-start: 3, $content-end: 10, $config: $grrr-config, $prefix: false){
+
+	// defining sass vars
+	@if $prefix == false {
+		$prefix: map.get($config, 'name');
+	}
+	$breakpoints: map.get($map: $config, $key: 'breakpoints');
+	$board-max: map.get($map: $config, $key: 'board-max');
+	$last_item: list.nth(map.values($breakpoints), -1);
+	$board-max-w-margins: map.get($map: $last_item, $key: 'margin') * 2 + $board-max;
+
+	//calculate col for the highest breakpoint
+	$content-cols: $content-end - $content-start + 1 ;
+	$left-cols: $content-start - 1;
+	$right-cols: map.get($map: $last_item, $key: 'cols') - $left-cols - $content-cols;
+	$gutter: map.get($map: $last_item, $key: 'gutter');
+	$max-col-size: calc( ($board-max - ( map.get($map: $last_item, $key: 'gutter') * (map.get($map: $last_item, $key: 'cols') - 1) )) / map.get($map: $last_item, $key: 'cols') );
+	$content-size: ( $max-col-size * $content-cols ) + (map.get($map: $last_item, $key: 'gutter') * ($content-cols - 1)) + (map.get($map: $last_item, $key: 'margin') * 2);
+
+
+	//defining breakpoint vars
+	@include grrr-bp-vars($type,'full','full',true,$config,$prefix,$breakpoints);
+
+	//defining css vars
+	@include grrr-css-vars($type,'full','full',true,$config,$prefix, $board-max, $board-max-w-margins);
+
+	$grid-left: '';
+	@if( $left-cols == 0 ){
+		$grid-left: [offset-end board-full-start board-start content-start];
+	}@else{
+		$grid-left: [offset-end board-full-start board-start];
+		@for $x from 1 through $left-cols{
+			@if( $x == 1 ){
+				$grid-left: #{$grid-left} minmax(0, 1fr) [board-end gap-start] minmax(0,#{$gutter});
+			}@else{
+				$grid-left: #{$grid-left} [gap-end board-start] minmax(0, 1fr) [board-end gap-start] minmax(0,#{$gutter});
+			}
+		}
+		$grid-left: #{$grid-left} [gap-end board-start content-start];
+	}
+
+	$grid-right: '';
+	@if( $right-cols == 0 ){
+		$grid-right: [offset-start board-full-end board-end content-end]
+	}@else{
+		$grid-right: [board-end gap-start content-end];
+		@for $x from 1 through $right-cols {
+			@if( $x == 1 ){
+				$grid-right: #{$grid-right} minmax(0,#{$gutter}) [gap-end board-start] minmax(0, 1fr);
+			}@else{
+				$grid-right: #{$grid-right} [board-end gap-start] minmax(0,#{$gutter}) [gap-end board-start] minmax(0, 1fr);
+			}
+		}
+		$grid-right: #{$grid-right} [offset-start board-full-end board-end];
+	}
+
+	$grid-margins: null;
+	@if $type == 'fluid' {
+		$grid-margins: var(--#{$prefix}-margin);
+	} @else {
+		$grid-margins: minmax(var(--#{$prefix}-board-margin), var(--#{$prefix}-margin));
+	}
+
+	& {
+		display: grid;
+		grid-auto-rows: -webkit-max-content;
+		grid-auto-rows: max-content;
+		grid-auto-flow: row;
+		column-gap: 0 !important;
+		grid-column: full-start / full-end;
+	}
+
+
+
+	@if( $type == 'board'){
+		& {
+			grid-template-columns:
+				[full-start offset-start] #{$grid-margins}
+				#{$grid-left}
+				repeat( #{$content-cols - 1 }, #{$max-col-size} [board-end gap-start] #{$gutter} [gap-end board-start] )
+				#{$max-col-size}
+				#{$grid-right}
+				#{$grid-margins} [full-end offset-end];
+		}
+	}
+
+	@if( $type == 'fluid'){
+		& {
+			grid-template-columns:
+				[full-start offset-start] var(--#{$prefix}-margin)
+				#{$grid-left}
+				repeat( #{$content-cols - 1 }, #{$max-col-size} [board-end gap-start] #{$gutter} [gap-end board-start]  )
+				#{$max-col-size}
+				#{$grid-right}
+				var(--#{$prefix}-margin)
+				[full-end offset-end];
+		}
+	}
+}
+
+@mixin grrr-css-vars($type,$start,$end,$offset,$config,$prefix,$board-max,$board-max-w-margins){
+	&{
+		@if $type == 'board' {
+			--#{$prefix}-board-size: #{$board-max};
+		} @else {
+			--#{$prefix}-board-size: calc(100% - 2 * var(--#{$prefix}-margin));
+		}
+		--#{$prefix}-board-margin: calc((100% - var(--#{$prefix}-board-size)) * .5);
+		--#{$prefix}-col-size: calc((var(--#{$prefix}-board-size) - var(--#{$prefix}-total-gutters)) / var(--#{$prefix}-cols));
+		--#{$prefix}-col-width: var(--#{$prefix}-col-size);
+		@if $type == 'board' {
+			--#{$prefix}-offset-out: var(--#{$prefix}-gutter);
+		} @else {
+			--#{$prefix}-offset-out: var(--#{$prefix}-margin);
+		}
+		--#{$prefix}-total-gutters: calc((var(--#{$prefix}-cols) - 1) * var(--#{$prefix}-gutter));
+		--#{$prefix}-col-responsive-size: calc((100vw - var(--scrollbar-interface-width, 0px) - (2 * var(--#{$prefix}-margin)) - ((var(--#{$prefix}-cols) - 1) * var(--#{$prefix}-gutter))) / var(--#{$prefix}-cols));
+
+			@media (max-width: #{$board-max-w-margins}) {
+				--#{$prefix}-col-width: var(--#{$prefix}-col-responsive-size);
+				--#{$prefix}-offset-out: var(--#{$prefix}-margin);
+			}
+	}
+}
+
+@mixin grrr-bp-vars($type,$start,$end,$offset,$config,$prefix,$breakpoints){
+	$prev-gutter: null;
+	$prev-margin: null;
+	$prev-cols: null;
+	@each $name, $props in $breakpoints {
+		$bppx: map.get($props, 'breakpoint');
+		$gutter: map.get($props, 'gutter');
+		$margin: map.get($props, 'margin');
+		$cols: map.get($props, 'cols');
+		$values-changed: $gutter != $prev-gutter or $margin != $prev-margin or $cols != $prev-cols;
+
+		@if( $values-changed ){
+			@if $bppx {
+				@include media-break-up( $name ) {
+					@if( $gutter != $prev-gutter ){
+						--#{$prefix}-gutter: #{$gutter};
+					}
+					@if( $margin != $prev-margin ){
+						--#{$prefix}-margin: #{$margin};
+					}
+					@if( $cols != $prev-cols ){
+						--#{$prefix}-cols: #{$cols};
+						@if $offset {
+							@if $start != 'full' and $start > 1 {
+								--#{$prefix}-out-left: var(--#{$prefix}-gutter);
+							} @else {
+								--#{$prefix}-out-left: var(--#{$prefix}-offset-out);
+							}
+							@if $end != 'full' and $cols > $end {
+								--#{$prefix}-out-right: var(--#{$prefix}-gutter);
+							} @else {
+								--#{$prefix}-out-right: var(--#{$prefix}-offset-out);
+							}
+						} @else {
+							--#{$prefix}-out-left: 0px;
+							--#{$prefix}-out-right: 0px;
+						}
+					}
+				}
+			}@else {
+				@if( $gutter != $prev-gutter ){
+					--#{$prefix}-gutter: #{$gutter};
+				}
+				@if( $margin != $prev-margin ){
+					--#{$prefix}-margin: #{$margin};
+				}
+				@if( $cols != $prev-cols ){
+					--#{$prefix}-cols: #{$cols};
+					@if $offset {
+						@if $start != 'full' and $start > 1 {
+							--#{$prefix}-out-left: var(--#{$prefix}-gutter);
+						} @else {
+							--#{$prefix}-out-left: var(--#{$prefix}-offset-out);
+						}
+						@if $end != 'full' and $cols > $end {
+							--#{$prefix}-out-right: var(--#{$prefix}-gutter);
+						} @else {
+							--#{$prefix}-out-right: var(--#{$prefix}-offset-out);
+						}
+					} @else {
+						--#{$prefix}-out-left: 0px;
+						--#{$prefix}-out-right: 0px;
+					}
+				}
+			}
+			$prev-gutter: $gutter;
+			$prev-margin: $margin;
+			$prev-cols: $cols;
+		}
+	}
+}
+
+@function grrr-cols-size($cols: 1, $extra-gutter: 0, $config: $grrr-config, $prefix: false) {
+	@if $prefix == false {
+		$prefix: map.get($config, 'name');
+	}
+
+	@return calc(var(--#{$prefix}-col-context-size, var(--#{$prefix}-col-width)) * #{$cols} + (var(--#{$prefix}-gutter) * ($cols - 1 + $extra-gutter) ));
+}
+
+@mixin media-grrr-down($breakcol, $with-margins: false, $config: $grrr-config) {
+	$board: map.get($config, 'board-max');
+	$breakpoints: map.get($config, "breakpoints");
+	$last_item: list.nth(map.values($breakpoints), -1);
+
+	$cols: map.get($map: $last_item, $key: 'cols');
+	$gap: map.get($map: $last_item, $key: 'gutter');
+	$margin: map.get($map: $last_item, $key: 'margin');
+
+	$gutter_total_size: calc($gap * ($cols - 1));
+	$col_size: calc(($board - $gutter_total_size) / $cols );
+	$group_size: $col_size * $breakcol;
+
+	$gutters_size: calc($gap * ($breakcol - 1));
+	$break-px: null;
+	@if $with-margins {
+		$break-px: #{math.ceil($group_size + $gutters_size + ($margin * 2))};
+	} @else {
+		$break-px: #{math.ceil($group_size + $gutters_size)};
+	}
+
+	@media (max-width: $break-px) {
+		@content;
+	}
+}
+
+@mixin media-grrr-up($breakcol, $with-margins: false, $config: $grrr-config) {
+	$board: map.get($config, 'board-max');
+	$breakpoints: map.get($config, "breakpoints");
+	$last_item: list.nth(map.values($breakpoints), -1);
+
+	$cols: map.get($map: $last_item, $key: 'cols');
+	$gap: map.get($map: $last_item, $key: 'gutter');
+	$margin: map.get($map: $last_item, $key: 'margin');
+
+	$gutter_total_size: calc($gap * ($cols - 1));
+	$col_size: calc(($board - $gutter_total_size) / $cols );
+	$group_size: $col_size * $breakcol;
+
+	$gutters_size: calc($gap * ($breakcol - 1));
+	$break-px: null;
+	@if $with-margins {
+		$break-px: #{math.ceil($group_size + $gutters_size + 1px + ($margin * 2))};
+	} @else {
+		$break-px: #{math.ceil($group_size + $gutters_size + 1px)};
+	}
+
+	@media (min-width: $break-px) {
+		@content;
+	}
+}
+
+@mixin media-grrr-between($breakcol-lower, $breakcol-upper, $with-margins: false, $config: $grrr-config) {
+	$board: map.get($config, 'board-max');
+	$breakpoints: map.get($config, "breakpoints");
+	$last_item: list.nth(map.values($breakpoints), -1);
+
+	$cols: map.get($map: $last_item, $key: 'cols');
+	$gap: map.get($map: $last_item, $key: 'gutter');
+	$margin: map.get($map: $last_item, $key: 'margin');
+
+	$gutter_total_size: calc($gap * ($cols - 1));
+	$col_size: calc(($board - $gutter_total_size) / $cols);
+
+	$group_size-lower: $col_size * $breakcol-lower;
+	$gutters_size-lower: calc($gap * ($breakcol-lower - 1));
+	$break-px-lower: null;
+	@if $with-margins {
+		$break-px-lower: #{math.ceil($group_size-lower + $gutters_size-lower + ($margin * 2))};
+	} @else {
+		$break-px-lower: #{math.ceil($group_size-lower + $gutters_size-lower)};
+	}
+
+	$group_size-upper: $col_size * $breakcol-upper;
+	$gutters_size-upper: calc($gap * ($breakcol-upper - 1));
+	$break-px-upper: null;
+	@if $with-margins {
+		$break-px-upper: #{math.ceil($group_size-upper + $gutters_size-upper + 1px + ($margin * 2))};
+	} @else {
+		$break-px-upper: #{math.ceil($group_size-upper + $gutters_size-upper + 1px)};
+	}
+
+	@media (min-width: $break-px-lower) and (max-width: $break-px-upper) {
+		@content;
+	}
+}
+
+@mixin grrr-inherit{
+	display: inherit;
+	grid-auto-rows: inherit;
+	grid-auto-flow: inherit;
+	column-gap: inherit;
+	grid-column: inherit;
+	grid-template-columns:inherit;
+	margin-inline: inherit;
+}
+
+@mixin grrr-unset{
+	display: unset;
+	grid-auto-rows: unset;
+	grid-auto-flow: unset;
+	column-gap: unset;
+	grid-column: unset;
+	grid-template-columns:unset;
+	margin-inline: unset;
+}

package/src/assets/styles/utils/list-styles/_list-styles.scss

@@ -0,0 +1,190 @@
+@use "sass:string";
+
+// basic styles.
+.atnl-ul,
+.atnl-ol,
+.atnl-ul ul,
+.atnl-ol ol {
+	--_li-left: var(--li-left, 2ch);
+	--_li-gutter: var(--li-gutter, .5ch);
+	--_li-marker-sep: var(--li-marker-sep, ".");
+	--_li-marker-sep-end: var(--li-marker-sep-end, "");
+	list-style: none;
+	list-style-type: none !important;
+	margin-inline: 0;
+	margin-bottom: 0;
+	padding: 0;
+
+	ul,
+	ol {
+		padding: 0px;
+	}
+
+	li {
+		position: relative;
+
+		> div.rich-text{
+			display: inline;
+		}
+	}
+}
+
+.atnl-ul,
+.atnl-ul ul,
+.atnl-ol ul {
+	li {
+		padding-left: calc( var(--_li-left) + var(--_li-gutter) );
+	}
+}
+
+//ul bullet
+.atnl-ul > li,
+.atnl-ul ul > li,
+.atnl-ol ul > li{
+	&:before{
+		content: '';
+		background-color: currentColor;
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		// use mask to be able to handle any figure.
+		mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4" fill="white"/></svg>');
+		mask-size: 100%;
+		mask-position: center;
+		mask-repeat: no-repeat;
+
+		width: 8px; //control the size of marker
+		height: 26px; //use line height
+	}
+}
+
+
+//ol basic nested style
+.atnl-ol,
+.atnl-ol ol {
+	list-style-type: none !important;
+	& > li {
+		display: table;
+		padding-left: 0;
+		&:before {
+			content: '';
+			min-width: calc( var(--_li-left) + var(--_li-gutter) );
+			padding-right: var(--_li-gutter);
+			display: table-cell;
+		}
+	}
+}
+
+// counter
+@mixin nested-ol($max-level, $current-level: 1) {
+  $current-counter: string.unquote('sublistCounter' + ($current-level - 1));
+  ol {
+    counter-reset: #{$current-counter};
+    & > li {
+      counter-increment: #{$current-counter};
+      &::before {
+        content: #{generate-counter-string($current-level)}
+      }
+			@if $current-level < $max-level {
+				& > {
+					@include nested-ol($max-level, $current-level + 1);
+				}
+			}
+		}
+  }
+}
+
+@function generate-counter-string($level) {
+  $counter-string: "counter(listCounter, var(--ol-counter-style, decimal))";
+  @for $i from 0 through $level - 1 {
+    $counter-string: $counter-string + ' var(--_li-marker-sep) counter(sublistCounter#{$i}, var(--ol-counter-style-sub,var(--ol-counter-style, decimal)))';
+  }
+  @return $counter-string + ' var(--_li-marker-sep-end)';
+}
+
+.atnl-ol {
+	//listCounter is a variabled defined to continue the list from a specific number
+	counter-reset: listCounter calc(var(--listCounter, 1) - 1);
+
+	&[reversed],
+	&.reversed {
+		counter-reset: listCounter calc(var(--listCounter, 1) + 1);
+
+		>li {
+			counter-increment: listCounter -1;
+		}
+	}
+
+	& > li {
+		counter-increment: listCounter;
+		&:before {
+			content: counter(listCounter, var(--ol-counter-style, decimal)) + ' var(--_li-marker-sep-end)';
+		}
+
+		@include nested-ol(6);
+	}
+
+	ul{
+		width: 100%;
+
+		& > li > ol {
+			counter-reset: listCounter calc(var(--listCounter, 1) - 1);
+			& > li {
+				@include nested-ol(6);
+
+				& {
+					counter-increment: listCounter;
+				}
+
+				&::before {
+					content: counter(listCounter, var(--ol-counter-style, decimal));
+				}
+			}
+		}
+	}
+}
+
+// ol list styles
+.atnl-ol{
+	&.upper-alpha,
+	&[style*='list-style-type:upper-alpha'],
+	&[style*='list-style-type: upper-alpha'] {
+		li:before {
+			--ol-counter-style: upper-alpha;
+		}
+		ol li:before{
+			--ol-counter-style-sub: lower-alpha;
+		}
+	}
+
+	&.lower-alpha,
+	&[style*='list-style-type:lower-alpha'],
+	&[style*='list-style-type: lower-alpha'] {
+		li:before {
+			--ol-counter-style: lower-alpha;
+		}
+	}
+
+	&.upper-roman,
+	&[style*='list-style-type:upper-roman'],
+	&[style*='list-style-type: upper-roman'] {
+		li:before {
+			--ol-counter-style: upper-roman;
+		}
+		ol li:before{
+			--ol-counter-style-sub: lower-alpha;
+		}
+	}
+
+	&.lower-roman,
+	&[style*='list-style-type:lower-roman'],
+	&[style*='list-style-type: lower-roman'] {
+		li:before {
+			--ol-counter-style: lower-roman;
+		}
+		ol li:before{
+			--ol-counter-style-sub: lower-alpha;
+		}
+	}
+}

package/src/components/AnimationToggle.astro

@@ -0,0 +1,19 @@
+---
+const { disabled } = Astro.props;
+---
+
+{
+  disabled ? (
+    <div class='animation-disabled'>
+      <slot />
+    </div>
+  ) : (
+    <slot />
+  )
+}
+
+<style>
+  .animation-disabled {
+    display: contents;
+  }
+</style>