@graupl/graupl 1.0.0-beta.0 → 1.0.0-beta.1

package/src/scss/state/focus/_variables.scss

@@ -9,35 +9,35 @@
 @use "../../functions/theme";
 
 $focus-width: var(
-  --#{root-defaults.$prefix}-focus-width,
+  --#{root-defaults.$prefix}focus-width,
   #{root-variables.$border-width}
 );
 $focus-outline-color: var(
-  --#{root-defaults.$prefix}-focus-outline-color,
+  --#{root-defaults.$prefix}focus-outline-color,
   #{theme.get(primary, 900)}
 );
 $focus-outline-width: var(
-  --#{root-defaults.$prefix}-focus-outline-width,
+  --#{root-defaults.$prefix}focus-outline-width,
   #{$focus-width}
 );
 $focus-outline-style: var(
-  --#{root-defaults.$prefix}-focus-outline-style,
+  --#{root-defaults.$prefix}focus-outline-style,
   #{defaults.$focus-outline-style}
 );
 $focus-outline-offset: var(
-  --#{root-defaults.$prefix}-focus-outline-offset,
+  --#{root-defaults.$prefix}focus-outline-offset,
   calc(-1 * #{$focus-outline-width})
 );
 $focus-box-shadow-color: var(
-  --#{root-defaults.$prefix}-focus-box-shadow-color,
+  --#{root-defaults.$prefix}focus-box-shadow-color,
   #{theme.get(primary, 100)}
 );
 $focus-box-shadow-style: var(
-  --#{root-defaults.$prefix}-focus-box-shadow-style,
+  --#{root-defaults.$prefix}focus-box-shadow-style,
   #{defaults.$focus-box-shadow-style}
 );
 $focus-box-shadow: var(
-  --#{root-defaults.$prefix}-focus-box-shadow,
+  --#{root-defaults.$prefix}focus-box-shadow,
   #{$focus-width $focus-width} 0 0 #{$focus-box-shadow-style}
     #{$focus-box-shadow-color},
   0 0 0 #{$focus-width} #{$focus-box-shadow-style} #{$focus-box-shadow-color}

package/src/scss/theme/color/_index.scss

@@ -15,14 +15,14 @@
     // Generate the default colour properties.
     @each $color, $map in defaults.$colors {
       @each $shade, $value in $map {
-        --#{root-defaults.$prefix}-#{$color}--#{$shade}: #{$value};
+        --#{root-defaults.$prefix}#{$color}--#{$shade}: #{$value};
       }
     }
 
     // Generate the active theme properties.
     @each $color, $map in map.get($themes, defaults.$default-theme) {
       @each $shade, $value in $map {
-        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+        --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};
       }
     }
   }
@@ -32,7 +32,7 @@
     #{defaults.$theme-selector-prefix}#{$theme-name}#{defaults.$theme-selector-suffix} {
       @each $color, $map in $theme {
         @each $shade, $value in $map {
-          --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+          --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};
         }
       }
 

package/src/scss/theme/color/_variables.scss

@@ -18,7 +18,7 @@ $colors: ();
   @each $shade, $value in $map {
     // Set the custom prop name and fallback value.
     $color-property: var(
-      --#{root-defaults.$prefix}-#{$color}--#{$shade},
+      --#{root-defaults.$prefix}#{$color}--#{$shade},
       $value
     );
 
@@ -53,7 +53,7 @@ $themes: (
 
     @each $shade, $value in $map {
       $color-property: var(
-        --#{root-defaults.$prefix}-theme-#{$theme-name}--#{$color-name}--#{$shade},
+        --#{root-defaults.$prefix}theme-#{$theme-name}--#{$color-name}--#{$shade},
         #{map.get($colors, map.get($value, color), map.get($value, shade))}
       );
       $color-map: map.merge(
@@ -86,7 +86,7 @@ $themes: (
 
   @each $shade, $value in $map {
     $color-property: var(
-      --#{root-defaults.$prefix}-theme-active--#{$color-name}--#{$shade},
+      --#{root-defaults.$prefix}theme-active--#{$color-name}--#{$shade},
       #{$value}
     );
     $color-map: map.merge(
@@ -111,19 +111,19 @@ $themes: (
 }
 
 // Colour properties.
-$root-color: var(--#{root-defaults.$prefix}-root-color);
-$root-background: var(--#{root-defaults.$prefix}-root-background);
+$root-color: var(--#{root-defaults.$prefix}root-color);
+$root-background: var(--#{root-defaults.$prefix}root-background);
 
 @if map.has-key($themes, active, primary, 900) {
   $root-color: var(
-    --#{root-defaults.$prefix}-root-color,
+    --#{root-defaults.$prefix}root-color,
     #{map.get(map.get(map.get($themes, active), primary), 900)}
   );
 }
 
 @if map.has-key($themes, active, primary, 100) {
   $root-background: var(
-    --#{root-defaults.$prefix}-root-background,
+    --#{root-defaults.$prefix}root-background,
     #{map.get(map.get(map.get($themes, active), primary), 100)}
   );
 }

package/src/scss/theme/typography/_variables.scss

@@ -10,11 +10,11 @@
 
 // Font properties.
 $font-size-base: var(
-  --#{root-defaults.$prefix}-font-size-base,
+  --#{root-defaults.$prefix}font-size-base,
   #{defaults.$font-size-base}
 );
 $line-height: var(
-  --#{root-defaults.$prefix}-line-height,
+  --#{root-defaults.$prefix}line-height,
   #{defaults.$line-height}
 );
 
@@ -23,7 +23,7 @@ $font-sizes: ();
 
 @each $key, $value in defaults.$font-size-multipliers {
   $size: var(
-    --#{root-defaults.$prefix}-font-#{$key},
+    --#{root-defaults.$prefix}font-#{$key},
     calc(#{$value} * #{$font-size-base})
   );
   $font-sizes: map.set($font-sizes, $key, $size);
@@ -32,200 +32,200 @@ $font-sizes: ();
 $font-weights: ();
 
 @each $key, $value in defaults.$font-weights {
-  $weight: var(--#{root-defaults.$prefix}-font-weight-#{$key}, $value);
+  $weight: var(--#{root-defaults.$prefix}font-weight-#{$key}, $value);
   $font-weights: map.set($font-weights, $key, $weight);
 }
 
 $font-weight-bold: var(
-  --#{root-defaults.$prefix}-font-weight-bold,
+  --#{root-defaults.$prefix}font-weight-bold,
   #{map.get($font-weights, bold)}
 );
 
 // Root properties.
 $root-font-family: var(
-  --#{root-defaults.$prefix}-root-font-family,
+  --#{root-defaults.$prefix}root-font-family,
   #{defaults.$root-font-family}
 );
 $root-font-size: var(
-  --#{root-defaults.$prefix}-root-font-size,
+  --#{root-defaults.$prefix}root-font-size,
   #{defaults.$root-font-size}
 );
 
 // Typography properties.
 $body-font-size: var(
-  --#{root-defaults.$prefix}-body-font-size,
+  --#{root-defaults.$prefix}body-font-size,
   #{map.get($font-sizes, base)}
 );
 $body-line-height: var(
-  --#{root-defaults.$prefix}-body-line-height,
+  --#{root-defaults.$prefix}body-line-height,
   #{$line-height}
 );
 $body-font-weight: var(
-  --#{root-defaults.$prefix}-body-font-weight,
+  --#{root-defaults.$prefix}body-font-weight,
   #{map.get($font-weights, normal)}
 );
 $paragraph-font-size: var(
-  --#{root-defaults.$prefix}-paragraph-font-size,
+  --#{root-defaults.$prefix}paragraph-font-size,
   #{$body-font-size}
 );
 $paragraph-line-height: var(
-  --#{root-defaults.$prefix}-paragraph-line-height,
+  --#{root-defaults.$prefix}paragraph-line-height,
   #{$body-line-height}
 );
 $paragraph-margin: var(
-  --#{root-defaults.$prefix}-paragraph-margin,
+  --#{root-defaults.$prefix}paragraph-margin,
   0 0 #{map.get(root-variables.$spacers, 2)} 0
 );
 $paragraph-font-weight: var(
-  --#{root-defaults.$prefix}-paragraph-font-weight,
+  --#{root-defaults.$prefix}paragraph-font-weight,
   #{$body-font-weight}
 );
 $small-font-size: var(
-  --#{root-defaults.$prefix}-small-font-size,
+  --#{root-defaults.$prefix}small-font-size,
   #{map.get($font-sizes, sm)}
 );
 $small-line-height: var(
-  --#{root-defaults.$prefix}-small-line-height,
+  --#{root-defaults.$prefix}small-line-height,
   #{$line-height}
 );
 $small-margin: var(
-  --#{root-defaults.$prefix}-small-margin,
+  --#{root-defaults.$prefix}small-margin,
   0 0 #{map.get(root-variables.$spacers, 2)} 0
 );
 $small-font-weight: var(
-  --#{root-defaults.$prefix}-small-font-weight,
+  --#{root-defaults.$prefix}small-font-weight,
   #{$body-font-weight}
 );
 
 // Headings properties.
 $heading-font-family: var(
-  --#{root-defaults.$prefix}-heading-font-family,
+  --#{root-defaults.$prefix}heading-font-family,
   $root-font-family
 );
 $heading-line-height: var(
-  --#{root-defaults.$prefix}-heading-line-height,
+  --#{root-defaults.$prefix}heading-line-height,
   #{$line-height}
 );
 $heading-margin: var(
-  --#{root-defaults.$prefix}-heading-margin,
+  --#{root-defaults.$prefix}heading-margin,
   #{map.get(root-variables.$spacers, 5)} 0
     #{map.get(root-variables.$spacers, 2)} 0
 );
 $heading-font-weight: var(
-  --#{root-defaults.$prefix}-heading-font-weight,
+  --#{root-defaults.$prefix}heading-font-weight,
   #{$font-weight-bold}
 );
 
 // H1 properties.
 $h1-font-size: var(
-  --#{root-defaults.$prefix}-h1-font-size,
+  --#{root-defaults.$prefix}h1-font-size,
   #{map.get($font-sizes, 5xl)}
 );
 $h1-line-height: var(
-  --#{root-defaults.$prefix}-h1-line-height,
+  --#{root-defaults.$prefix}h1-line-height,
   #{$heading-line-height}
 );
-$h1-margin: var(--#{root-defaults.$prefix}-h1-margin, #{$heading-margin});
+$h1-margin: var(--#{root-defaults.$prefix}h1-margin, #{$heading-margin});
 $h1-font-family: var(
-  --#{root-defaults.$prefix}-h1-font-family,
+  --#{root-defaults.$prefix}h1-font-family,
   $heading-font-family
 );
 $h1-font-weight: var(
-  --#{root-defaults.$prefix}-h1-font-weight,
+  --#{root-defaults.$prefix}h1-font-weight,
   $heading-font-weight
 );
 
 // H2 properties.
 $h2-font-size: var(
-  --#{root-defaults.$prefix}-h2-font-size,
+  --#{root-defaults.$prefix}h2-font-size,
   #{map.get($font-sizes, 4xl)}
 );
 $h2-line-height: var(
-  --#{root-defaults.$prefix}-h2-line-height,
+  --#{root-defaults.$prefix}h2-line-height,
   #{$heading-line-height}
 );
-$h2-margin: var(--#{root-defaults.$prefix}-h2-margin, #{$heading-margin});
+$h2-margin: var(--#{root-defaults.$prefix}h2-margin, #{$heading-margin});
 $h2-font-family: var(
-  --#{root-defaults.$prefix}-h2-font-family,
+  --#{root-defaults.$prefix}h2-font-family,
   $heading-font-family
 );
 $h2-font-weight: var(
-  --#{root-defaults.$prefix}-h2-font-weight,
+  --#{root-defaults.$prefix}h2-font-weight,
   $heading-font-weight
 );
 
 // H3 properties.
 $h3-font-size: var(
-  --#{root-defaults.$prefix}-h3-font-size,
+  --#{root-defaults.$prefix}h3-font-size,
   #{map.get($font-sizes, 3xl)}
 );
 $h3-line-height: var(
-  --#{root-defaults.$prefix}-h3-line-height,
+  --#{root-defaults.$prefix}h3-line-height,
   #{$heading-line-height}
 );
-$h3-margin: var(--#{root-defaults.$prefix}-h3-margin, #{$heading-margin});
+$h3-margin: var(--#{root-defaults.$prefix}h3-margin, #{$heading-margin});
 $h3-font-family: var(
-  --#{root-defaults.$prefix}-h3-font-family,
+  --#{root-defaults.$prefix}h3-font-family,
   $heading-font-family
 );
 $h3-font-weight: var(
-  --#{root-defaults.$prefix}-h3-font-weight,
+  --#{root-defaults.$prefix}h3-font-weight,
   $heading-font-weight
 );
 
 // H4 properties.
 $h4-font-size: var(
-  --#{root-defaults.$prefix}-h4-font-size,
+  --#{root-defaults.$prefix}h4-font-size,
   #{map.get($font-sizes, 2xl)}
 );
 $h4-line-height: var(
-  --#{root-defaults.$prefix}-h4-line-height,
+  --#{root-defaults.$prefix}h4-line-height,
   #{$heading-line-height}
 );
-$h4-margin: var(--#{root-defaults.$prefix}-h4-margin, #{$heading-margin});
+$h4-margin: var(--#{root-defaults.$prefix}h4-margin, #{$heading-margin});
 $h4-font-family: var(
-  --#{root-defaults.$prefix}-h4-font-family,
+  --#{root-defaults.$prefix}h4-font-family,
   $heading-font-family
 );
 $h4-font-weight: var(
-  --#{root-defaults.$prefix}-h4-font-weight,
+  --#{root-defaults.$prefix}h4-font-weight,
   $heading-font-weight
 );
 
 // H5 properties.
 $h5-font-size: var(
-  --#{root-defaults.$prefix}-h5-font-size,
+  --#{root-defaults.$prefix}h5-font-size,
   #{map.get($font-sizes, xl)}
 );
 $h5-line-height: var(
-  --#{root-defaults.$prefix}-h5-line-height,
+  --#{root-defaults.$prefix}h5-line-height,
   #{$heading-line-height}
 );
-$h5-margin: var(--#{root-defaults.$prefix}-h5-margin, #{$heading-margin});
+$h5-margin: var(--#{root-defaults.$prefix}h5-margin, #{$heading-margin});
 $h5-font-family: var(
-  --#{root-defaults.$prefix}-h5-font-family,
+  --#{root-defaults.$prefix}h5-font-family,
   $heading-font-family
 );
 $h5-font-weight: var(
-  --#{root-defaults.$prefix}-h5-font-weight,
+  --#{root-defaults.$prefix}h5-font-weight,
   $heading-font-weight
 );
 
 // H6 properties.
 $h6-font-size: var(
-  --#{root-defaults.$prefix}-h6-font-size,
+  --#{root-defaults.$prefix}h6-font-size,
   #{map.get($font-sizes, lg)}
 );
 $h6-line-height: var(
-  --#{root-defaults.$prefix}-h6-line-height,
+  --#{root-defaults.$prefix}h6-line-height,
   #{$heading-line-height}
 );
-$h6-margin: var(--#{root-defaults.$prefix}-h6-margin, #{$heading-margin});
+$h6-margin: var(--#{root-defaults.$prefix}h6-margin, #{$heading-margin});
 $h6-font-family: var(
-  --#{root-defaults.$prefix}-h6-font-family,
+  --#{root-defaults.$prefix}h6-font-family,
   $heading-font-family
 );
 $h6-font-weight: var(
-  --#{root-defaults.$prefix}-h6-font-weight,
+  --#{root-defaults.$prefix}h6-font-weight,
   $heading-font-weight
 );

package/src/scss/utilities/ratio/_index.scss

@@ -33,7 +33,7 @@
 
   @each $ratio-class, $value in defaults.$ratios {
     .#{defaults.$ratio-variant-class-prefix}#{$ratio-class} {
-      --#{root-defaults.$prefix}-ratio: #{$value};
+      --#{root-defaults.$prefix}ratio: #{$value};
     }
   }
 
@@ -43,7 +43,7 @@
       @each $ratio-class, $value in defaults.$ratios {
         .#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$ratio-variant-class-prefix}#{$ratio-class} {
           @include screen.up($screen-size) {
-            --#{root-defaults.$prefix}-ratio: #{$value};
+            --#{root-defaults.$prefix}ratio: #{$value};
           }
         }
       }

package/src/scss/utilities/ratio/_variables.scss

@@ -6,4 +6,4 @@
 @use "defaults";
 @use "../../defaults" as root-defaults;
 
-$ratio: var(--#{root-defaults.$prefix}-ratio);
+$ratio: var(--#{root-defaults.$prefix}ratio);

package/src/scss/utilities/spacing/_index.scss

@@ -25,19 +25,19 @@
       @if $name == "g" {
         @include utility.create($selector, $property, $value) {
           &#{columns-defaults.$columns-selector} {
-            --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
+            --#{root-defaults.$prefix}columns-column-gap: #{important.insert(
                 $value
               )};
-            --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
+            --#{root-defaults.$prefix}columns-row-gap: #{important.insert(
                 $value
               )};
           }
 
           &#{flex-columns-defaults.$flex-columns-selector} {
-            --#{root-defaults.$prefix}-flex-columns-column-gap: #{important.insert(
+            --#{root-defaults.$prefix}flex-columns-column-gap: #{important.insert(
                 $value
               )};
-            --#{root-defaults.$prefix}-flex-columns-row-gap: #{important.insert(
+            --#{root-defaults.$prefix}flex-columns-row-gap: #{important.insert(
                 $value
               )};
           }
@@ -45,13 +45,13 @@
       } @else if $name == "cg" {
         @include utility.create($selector, $property, $value) {
           &#{columns-defaults.$columns-selector} {
-            --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
+            --#{root-defaults.$prefix}columns-column-gap: #{important.insert(
                 $value
               )};
           }
 
           &#{flex-columns-defaults.$flex-columns-selector} {
-            --#{root-defaults.$prefix}-flex-columns-column-gap: #{important.insert(
+            --#{root-defaults.$prefix}flex-columns-column-gap: #{important.insert(
                 $value
               )};
           }
@@ -59,13 +59,13 @@
       } @else if $name == "rg" {
         @include utility.create($selector, $property, $value) {
           &#{columns-defaults.$columns-selector} {
-            --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
+            --#{root-defaults.$prefix}columns-row-gap: #{important.insert(
                 $value
               )};
           }
 
           &#{flex-columns-defaults.$flex-columns-selector} {
-            --#{root-defaults.$prefix}-flex-columns-row-gap: #{important.insert(
+            --#{root-defaults.$prefix}flex-columns-row-gap: #{important.insert(
                 $value
               )};
           }
@@ -96,19 +96,19 @@
               $screen-size
             ) {
               &#{columns-defaults.$columns-selector} {
-                --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
+                --#{root-defaults.$prefix}columns-column-gap: #{important.insert(
                     $value
                   )};
-                --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
+                --#{root-defaults.$prefix}columns-row-gap: #{important.insert(
                     $value
                   )};
               }
 
               &#{flex-columns-defaults.$flex-columns-selector} {
-                --#{root-defaults.$prefix}-flex-columns-column-gap: #{important.insert(
+                --#{root-defaults.$prefix}flex-columns-column-gap: #{important.insert(
                     $value
                   )};
-                --#{root-defaults.$prefix}-flex-columns-row-gap: #{important.insert(
+                --#{root-defaults.$prefix}flex-columns-row-gap: #{important.insert(
                     $value
                   )};
               }
@@ -121,13 +121,13 @@
               $screen-size
             ) {
               &#{columns-defaults.$columns-selector} {
-                --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
+                --#{root-defaults.$prefix}columns-column-gap: #{important.insert(
                     $value
                   )};
               }
 
               &#{flex-columns-defaults.$flex-columns-selector} {
-                --#{root-defaults.$prefix}-flex-columns-column-gap: #{important.insert(
+                --#{root-defaults.$prefix}flex-columns-column-gap: #{important.insert(
                     $value
                   )};
               }
@@ -140,13 +140,13 @@
               $screen-size
             ) {
               &#{columns-defaults.$columns-selector} {
-                --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
+                --#{root-defaults.$prefix}columns-row-gap: #{important.insert(
                     $value
                   )};
               }
 
               &#{flex-columns-defaults.$flex-columns-selector} {
-                --#{root-defaults.$prefix}-flex-columns-row-gap: #{important.insert(
+                --#{root-defaults.$prefix}flex-columns-row-gap: #{important.insert(
                     $value
                   )};
               }