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

package/src/scss/base/button/_variables.scss

@@ -13,31 +13,31 @@
 
 // Button properties.
 $button-min-width: var(
-  --#{root-defaults.$prefix}-button-min-width,
+  --#{root-defaults.$prefix}button-min-width,
   #{root-defaults.$interactive-min-width}
 );
 $button-min-height: var(
-  --#{root-defaults.$prefix}-button-min-height,
+  --#{root-defaults.$prefix}button-min-height,
   #{root-defaults.$interactive-min-height}
 );
 $button-padding-x: var(
-  --#{root-defaults.$prefix}-button-padding-x,
+  --#{root-defaults.$prefix}button-padding-x,
   #{map.get(root-variables.$spacers, 5)}
 );
 $button-padding-y: var(
-  --#{root-defaults.$prefix}-button-padding-y,
+  --#{root-defaults.$prefix}button-padding-y,
   #{map.get(root-variables.$spacers, 3)}
 );
 $button-padding: var(
-  --#{root-defaults.$prefix}-button-padding,
+  --#{root-defaults.$prefix}button-padding,
   #{$button-padding-y} #{$button-padding-x}
 );
 $button-font-size: var(
-  --#{root-defaults.$prefix}-button-font-size,
+  --#{root-defaults.$prefix}button-font-size,
   #{map.get(typography.$font-sizes, base)}
 );
 $button-transition: var(
-  --#{root-defaults.$prefix}-button-transition,
+  --#{root-defaults.$prefix}button-transition,
   background #{map.get(root-variables.$transition-durations, fast)}
     #{root-variables.$transition-timing-function},
   color #{map.get(root-variables.$transition-durations, fast)}
@@ -46,7 +46,7 @@ $button-transition: var(
     #{root-variables.$transition-timing-function}
 );
 $button-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}-button-transition-reduced-motion,
+  --#{root-defaults.$prefix}button-transition-reduced-motion,
   background #{map.get(root-variables.$transition-durations, none)}
     #{root-variables.$transition-timing-function},
   color #{map.get(root-variables.$transition-durations, none)}
@@ -55,122 +55,122 @@ $button-transition-reduced-motion: var(
 
 // Transform properties.
 $button-transform: var(
-  --#{root-defaults.$prefix}-button-transform,
+  --#{root-defaults.$prefix}button-transform,
   #{defaults.$button-transform}
 );
 $button-visited-transform: var(
-  --#{root-defaults.$prefix}-button-visited-transform,
+  --#{root-defaults.$prefix}button-visited-transform,
   #{defaults.$button-visited-transform}
 );
 $button-focus-transform: var(
-  --#{root-defaults.$prefix}-button-focus-transform,
+  --#{root-defaults.$prefix}button-focus-transform,
   #{defaults.$button-focus-transform}
 );
 $button-hover-transform: var(
-  --#{root-defaults.$prefix}-button-hover-transform,
+  --#{root-defaults.$prefix}button-hover-transform,
   #{defaults.$button-hover-transform}
 );
 $button-active-transform: var(
-  --#{root-defaults.$prefix}-button-active-transform,
+  --#{root-defaults.$prefix}button-active-transform,
   #{defaults.$button-active-transform}
 );
 $button-disabled-transform: var(
-  --#{root-defaults.$prefix}-button-disabled-transform,
+  --#{root-defaults.$prefix}button-disabled-transform,
   #{defaults.$button-disabled-transform}
 );
 
 // Background properties.
 $button-background: var(
-  --#{root-defaults.$prefix}-button-background,
+  --#{root-defaults.$prefix}button-background,
   #{color.$root-background}
 );
 $button-visited-background: var(
-  --#{root-defaults.$prefix}-button-visited-background,
+  --#{root-defaults.$prefix}button-visited-background,
   #{color.$root-background}
 );
 $button-focus-background: var(
-  --#{root-defaults.$prefix}-button-focus-background,
+  --#{root-defaults.$prefix}button-focus-background,
   #{color.$root-background}
 );
 $button-hover-background: var(
-  --#{root-defaults.$prefix}-button-hover-background,
+  --#{root-defaults.$prefix}button-hover-background,
   #{theme.get(primary, 900)}
 );
 $button-active-background: var(
-  --#{root-defaults.$prefix}-button-active-background,
+  --#{root-defaults.$prefix}button-active-background,
   #{theme.get(primary, 900)}
 );
 $button-disabled-background: var(
-  --#{root-defaults.$prefix}-button-disabled-background,
+  --#{root-defaults.$prefix}button-disabled-background,
   #{color.$root-background}
 );
 
 // Text properties.
 $button-color: var(
-  --#{root-defaults.$prefix}-button-color,
+  --#{root-defaults.$prefix}button-color,
   #{color.$root-color}
 );
 $button-visited-color: var(
-  --#{root-defaults.$prefix}-button-visited-color,
+  --#{root-defaults.$prefix}button-visited-color,
   #{color.$root-color}
 );
 $button-focus-color: var(
-  --#{root-defaults.$prefix}-button-focus-color,
+  --#{root-defaults.$prefix}button-focus-color,
   #{color.$root-color}
 );
 $button-hover-color: var(
-  --#{root-defaults.$prefix}-button-hover-color,
+  --#{root-defaults.$prefix}button-hover-color,
   #{theme.get(primary, 100)}
 );
 $button-active-color: var(
-  --#{root-defaults.$prefix}-button-active-color,
+  --#{root-defaults.$prefix}button-active-color,
   #{theme.get(primary, 100)}
 );
 $button-disabled-color: var(
-  --#{root-defaults.$prefix}-button-disabled-color,
+  --#{root-defaults.$prefix}button-disabled-color,
   #{theme.get(primary, 200)}
 );
 
 // Border properties.
 $button-border-width: var(
-  --#{root-defaults.$prefix}-button-border-width,
+  --#{root-defaults.$prefix}button-border-width,
   #{root-variables.$border-width}
 );
 $button-border-style: var(
-  --#{root-defaults.$prefix}-botton-border-style,
+  --#{root-defaults.$prefix}botton-border-style,
   #{root-variables.$border-style}
 );
 $button-border: var(
-  --#{root-defaults.$prefix}-button-border,
+  --#{root-defaults.$prefix}button-border,
   #{$button-border-width} #{$button-border-style}
 );
 $button-border-radius: var(
-  --#{root-defaults.$prefix}-button-border-radius,
+  --#{root-defaults.$prefix}button-border-radius,
   #{root-variables.$border-radius}
 );
 
 // Border colour properties.
 $button-border-color: var(
-  --#{root-defaults.$prefix}-button-border-color,
+  --#{root-defaults.$prefix}button-border-color,
   #{color.$root-color}
 );
 $button-visited-border-color: var(
-  --#{root-defaults.$prefix}-button-visited-border-color,
+  --#{root-defaults.$prefix}button-visited-border-color,
   #{color.$root-color}
 );
 $button-focus-border-color: var(
-  --#{root-defaults.$prefix}-button-focus-border-color,
+  --#{root-defaults.$prefix}button-focus-border-color,
   #{color.$root-color}
 );
 $button-hover-border-color: var(
-  --#{root-defaults.$prefix}-button-hover-border-color,
+  --#{root-defaults.$prefix}button-hover-border-color,
   #{color.$root-color}
 );
 $button-active-border-color: var(
-  --#{root-defaults.$prefix}-button-active-border-color,
+  --#{root-defaults.$prefix}button-active-border-color,
   #{color.$root-color}
 );
 $button-disabled-border-color: var(
-  --#{root-defaults.$prefix}-button-disabled-border-color,
+  --#{root-defaults.$prefix}button-disabled-border-color,
   #{theme.get(primary, 200)}
 );

package/src/scss/base/form/_variables.scss

@@ -12,145 +12,142 @@
 @use "sass:map";
 
 $input-padding-x: var(
-  --#{root-defaults.$prefix}-input-padding-x,
+  --#{root-defaults.$prefix}input-padding-x,
   #{map.get(root-variables.$spacers, 5)}
 );
 $input-padding-y: var(
-  --#{root-defaults.$prefix}-input-padding-y,
+  --#{root-defaults.$prefix}input-padding-y,
   #{map.get(root-variables.$spacers, 3)}
 );
 $input-padding: var(
-  --#{root-defaults.$prefix}-input-padding,
+  --#{root-defaults.$prefix}input-padding,
   #{$input-padding-y} #{$input-padding-x}
 );
 $input-font-size: var(
-  --#{root-defaults.$prefix}-input-font-size,
+  --#{root-defaults.$prefix}input-font-size,
   #{map.get(typography.$font-sizes, base)}
 );
 $label-font-size: var(
-  --#{root-defaults.$prefix}-label-font-size,
+  --#{root-defaults.$prefix}label-font-size,
   #{$input-font-size}
 );
 $fieldset-direction: var(
-  --#{root-defaults.$prefix}-fieldset-direction,
+  --#{root-defaults.$prefix}fieldset-direction,
   #{defaults.$fieldset-direction}
 );
 $fieldset-gap: var(
-  --#{root-defaults.$prefix}-fieldset-gap,
+  --#{root-defaults.$prefix}fieldset-gap,
   map.get(root-variables.$spacers, 2)
 );
 $fieldset-padding-x: var(
-  --#{root-defaults.$prefix}-fieldset-padding-x,
+  --#{root-defaults.$prefix}fieldset-padding-x,
   #{$input-padding-x}
 );
 $fieldset-padding-y: var(
-  --#{root-defaults.$prefix}-fieldset-padding-y,
+  --#{root-defaults.$prefix}fieldset-padding-y,
   #{$input-padding-y}
 );
 $fieldset-padding: var(
-  --#{root-defaults.$prefix}-fieldset-padding,
+  --#{root-defaults.$prefix}fieldset-padding,
   #{$fieldset-padding-y} #{$fieldset-padding-x}
 );
 $fieldset-font-size: var(
-  --#{root-defaults.$prefix}-fieldset-font-size,
+  --#{root-defaults.$prefix}fieldset-font-size,
   #{$input-font-size}
 );
 
 // Background properties.
 $input-background: var(
-  --#{root-defaults.$prefix}-input-background,
+  --#{root-defaults.$prefix}input-background,
   #{color.$root-background}
 );
 $fieldset-background: var(
-  --#{root-defaults.$prefix}-fieldset-background,
+  --#{root-defaults.$prefix}fieldset-background,
   #{$input-background}
 );
 
 // Text properties.
 $input-color: var(
-  --#{root-defaults.$prefix}-input-color,
+  --#{root-defaults.$prefix}input-color,
   #{theme.get(primary, 900)}
 );
 $input-placeholder-color: var(
-  --#{root-defaults.$prefix}-input-placeholder-color,
+  --#{root-defaults.$prefix}input-placeholder-color,
   #{theme.get(secondary, 600)}
 );
-$label-color: var(--#{root-defaults.$prefix}-label-color, #{$input-color});
-$fieldset-color: var(
-  --#{root-defaults.$prefix}-fieldset-color,
-  #{$input-color}
-);
+$label-color: var(--#{root-defaults.$prefix}label-color, #{$input-color});
+$fieldset-color: var(--#{root-defaults.$prefix}fieldset-color, #{$input-color});
 $input-disabled-color: var(
-  --#{root-defaults.$prefix}-input-disabled-color,
+  --#{root-defaults.$prefix}input-disabled-color,
   #{theme.get(secondary, 400)}
 );
 $input-disabled-placeholder-color: var(
-  --#{root-defaults.$prefix}-input-disabled-placeholder-color,
+  --#{root-defaults.$prefix}input-disabled-placeholder-color,
   #{$input-disabled-color}
 );
 $label-disabled-color: var(
-  --#{root-defaults.$prefix}-label-disabled-color,
+  --#{root-defaults.$prefix}label-disabled-color,
   #{$input-disabled-color}
 );
 $fieldset-disabled-color: var(
-  --#{root-defaults.$prefix}-fieldset-disabled-color,
+  --#{root-defaults.$prefix}fieldset-disabled-color,
   #{$input-disabled-color}
 );
 
 // Border properties.
 $input-border-width: var(
-  --#{root-defaults.$prefix}-input-border-width,
+  --#{root-defaults.$prefix}input-border-width,
   #{root-variables.$border-width}
 );
 $input-border-style: var(
-  --#{root-defaults.$prefix}-botton-border-style,
+  --#{root-defaults.$prefix}botton-border-style,
   #{root-variables.$border-style}
 );
 $input-border: var(
-  --#{root-defaults.$prefix}-input-border,
+  --#{root-defaults.$prefix}input-border,
   #{$input-border-width} #{$input-border-style}
 );
 $input-border-radius: var(
-  --#{root-defaults.$prefix}-input-border-radius,
+  --#{root-defaults.$prefix}input-border-radius,
   #{root-variables.$border-radius}
 );
 $fieldset-border-width: var(
-  --#{root-defaults.$prefix}-fieldset-border-width,
+  --#{root-defaults.$prefix}fieldset-border-width,
   #{$input-border-width}
 );
 $fieldset-border-style: var(
-  --#{root-defaults.$prefix}-fieldset-border-style,
+  --#{root-defaults.$prefix}fieldset-border-style,
   #{$input-border-style}
 );
 $fieldset-border: var(
-  --#{root-defaults.$prefix}-fieldset-border,
+  --#{root-defaults.$prefix}fieldset-border,
   #{$fieldset-border-width} #{$fieldset-border-style}
 );
 $fieldset-border-radius: var(
-  --#{root-defaults.$prefix}-fieldset-border-radius,
+  --#{root-defaults.$prefix}fieldset-border-radius,
   #{$input-border-radius}
 );
 
 // Border colour properties.
 $input-border-color: var(
-  --#{root-defaults.$prefix}-input-border-color,
+  --#{root-defaults.$prefix}input-border-color,
   #{theme.get(secondary, 700)}
 );
 $input-disabled-border-color: var(
-  --#{root-defaults.$prefix}-input-disabled-border-color,
+  --#{root-defaults.$prefix}input-disabled-border-color,
   #{theme.get(secondary, 200)}
 );
 $fieldset-border-color: var(
-  --#{root-defaults.$prefix}-fieldset-border-color,
+  --#{root-defaults.$prefix}fieldset-border-color,
   #{$input-border-color}
 );
 $fieldset-disabled-border-color: var(
-  --#{root-defaults.$prefix}-fieldset-disabled-border-color,
+  --#{root-defaults.$prefix}fieldset-disabled-border-color,
   #{$input-disabled-border-color}
 );
 
 // Accent color properties.
 $input-accent-color: var(
-  --#{root-defaults.$prefix}-input-accent-color,
+  --#{root-defaults.$prefix}input-accent-color,
   #{theme.get(primary, 700)}
 );

package/src/scss/base/link/_index.scss

@@ -20,31 +20,31 @@
     text-decoration-thickness: $link-text-decoration-thickness;
 
     &:visited {
-      --#{root-defaults.$prefix}-link-text-decoration: #{$link-visited-text-decoration};
-      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-visited-text-decoration-thickness};
-      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-visited-text-decoration-style};
-      --#{root-defaults.$prefix}-link-transform: #{$link-visited-transform};
+      --#{root-defaults.$prefix}link-text-decoration: #{$link-visited-text-decoration};
+      --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-visited-text-decoration-thickness};
+      --#{root-defaults.$prefix}link-text-decoration-style: #{$link-visited-text-decoration-style};
+      --#{root-defaults.$prefix}link-transform: #{$link-visited-transform};
     }
 
     &:focus-visible {
-      --#{root-defaults.$prefix}-link-text-decoration: #{$link-focus-text-decoration};
-      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-focus-text-decoration-thickness};
-      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-focus-text-decoration-style};
-      --#{root-defaults.$prefix}-link-transform: #{$link-focus-transform};
+      --#{root-defaults.$prefix}link-text-decoration: #{$link-focus-text-decoration};
+      --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-focus-text-decoration-thickness};
+      --#{root-defaults.$prefix}link-text-decoration-style: #{$link-focus-text-decoration-style};
+      --#{root-defaults.$prefix}link-transform: #{$link-focus-transform};
     }
 
     &:hover {
-      --#{root-defaults.$prefix}-link-text-decoration: #{$link-hover-text-decoration};
-      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-hover-text-decoration-thickness};
-      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-hover-text-decoration-style};
-      --#{root-defaults.$prefix}-link-transform: #{$link-hover-transform};
+      --#{root-defaults.$prefix}link-text-decoration: #{$link-hover-text-decoration};
+      --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-hover-text-decoration-thickness};
+      --#{root-defaults.$prefix}link-text-decoration-style: #{$link-hover-text-decoration-style};
+      --#{root-defaults.$prefix}link-transform: #{$link-hover-transform};
     }
 
     &:active {
-      --#{root-defaults.$prefix}-link-text-decoration: #{$link-active-text-decoration};
-      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-active-text-decoration-thickness};
-      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-active-text-decoration-style};
-      --#{root-defaults.$prefix}-link-transform: #{$link-active-transform};
+      --#{root-defaults.$prefix}link-text-decoration: #{$link-active-text-decoration};
+      --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-active-text-decoration-thickness};
+      --#{root-defaults.$prefix}link-text-decoration-style: #{$link-active-text-decoration-style};
+      --#{root-defaults.$prefix}link-transform: #{$link-active-transform};
     }
 
     &:disabled,
@@ -56,10 +56,10 @@
       &:focus-visible,
       &:hover,
       &:active {
-        --#{root-defaults.$prefix}-link-text-decoration: #{$link-disabled-text-decoration};
-        --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-disabled-text-decoration-thickness};
-        --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-disabled-text-decoration-style};
-        --#{root-defaults.$prefix}-link-transform: #{$link-disabled-transform};
+        --#{root-defaults.$prefix}link-text-decoration: #{$link-disabled-text-decoration};
+        --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-disabled-text-decoration-thickness};
+        --#{root-defaults.$prefix}link-text-decoration-style: #{$link-disabled-text-decoration-style};
+        --#{root-defaults.$prefix}link-transform: #{$link-disabled-transform};
       }
     }
 
@@ -77,7 +77,7 @@
 
   @include animation.off {
     #{defaults.$link-selector} {
-      --#{root-defaults.$prefix}-link-transition: #{$link-transition-reduced-motion};
+      --#{root-defaults.$prefix}link-transition: #{$link-transition-reduced-motion};
     }
   }
 }
@@ -90,31 +90,31 @@
     text-decoration-color: $link-text-decoration-color;
 
     &:visited {
-      --#{root-defaults.$prefix}-link-color: #{$link-visited-color};
-      --#{root-defaults.$prefix}-link-background: #{$link-visited-background};
-      --#{root-defaults.$prefix}-link-border-color: #{$link-visited-border-color};
-      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-visited-text-decoration-color};
+      --#{root-defaults.$prefix}link-color: #{$link-visited-color};
+      --#{root-defaults.$prefix}link-background: #{$link-visited-background};
+      --#{root-defaults.$prefix}link-border-color: #{$link-visited-border-color};
+      --#{root-defaults.$prefix}link-text-decoration-color: #{$link-visited-text-decoration-color};
     }
 
     &:focus-visible {
-      --#{root-defaults.$prefix}-link-color: #{$link-focus-color};
-      --#{root-defaults.$prefix}-link-background: #{$link-focus-background};
-      --#{root-defaults.$prefix}-link-border-color: #{$link-focus-border-color};
-      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-focus-text-decoration-color};
+      --#{root-defaults.$prefix}link-color: #{$link-focus-color};
+      --#{root-defaults.$prefix}link-background: #{$link-focus-background};
+      --#{root-defaults.$prefix}link-border-color: #{$link-focus-border-color};
+      --#{root-defaults.$prefix}link-text-decoration-color: #{$link-focus-text-decoration-color};
     }
 
     &:hover {
-      --#{root-defaults.$prefix}-link-color: #{$link-hover-color};
-      --#{root-defaults.$prefix}-link-background: #{$link-hover-background};
-      --#{root-defaults.$prefix}-link-border-color: #{$link-hover-border-color};
-      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-hover-text-decoration-color};
+      --#{root-defaults.$prefix}link-color: #{$link-hover-color};
+      --#{root-defaults.$prefix}link-background: #{$link-hover-background};
+      --#{root-defaults.$prefix}link-border-color: #{$link-hover-border-color};
+      --#{root-defaults.$prefix}link-text-decoration-color: #{$link-hover-text-decoration-color};
     }
 
     &:active {
-      --#{root-defaults.$prefix}-link-color: #{$link-active-color};
-      --#{root-defaults.$prefix}-link-background: #{$link-active-background};
-      --#{root-defaults.$prefix}-link-border-color: #{$link-active-border-color};
-      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-active-text-decoration-color};
+      --#{root-defaults.$prefix}link-color: #{$link-active-color};
+      --#{root-defaults.$prefix}link-background: #{$link-active-background};
+      --#{root-defaults.$prefix}link-border-color: #{$link-active-border-color};
+      --#{root-defaults.$prefix}link-text-decoration-color: #{$link-active-text-decoration-color};
     }
 
     &:disabled,
@@ -124,10 +124,10 @@
       &:focus-visible,
       &:hover,
       &:active {
-        --#{root-defaults.$prefix}-link-color: #{$link-disabled-color};
-        --#{root-defaults.$prefix}-link-background: #{$link-disabled-background};
-        --#{root-defaults.$prefix}-link-border-color: #{$link-disabled-border-color};
-        --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-disabled-text-decoration-color};
+        --#{root-defaults.$prefix}link-color: #{$link-disabled-color};
+        --#{root-defaults.$prefix}link-background: #{$link-disabled-background};
+        --#{root-defaults.$prefix}link-border-color: #{$link-disabled-border-color};
+        --#{root-defaults.$prefix}link-text-decoration-color: #{$link-disabled-text-decoration-color};
       }
     }
   }