@graupl/graupl 1.0.0-beta.10 → 1.0.0-beta.11

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

@@ -1,245 +0,0 @@
-// @graupl/core form base variables.
-//
-// These values are to be used to directly style bases and provide a
-// cleaner way to reference custom properties.
-
-@use "defaults";
-@use "../../variables" as root-variables;
-@use "../../defaults" as root-defaults;
-@use "../../theme/typography/variables" as typography;
-@use "../../theme/color/variables" as color;
-@use "../../functions/theme";
-@use "sass:map";
-
-$input-padding-x: var(
-  --#{root-defaults.$prefix}input-padding-x,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$input-padding-y: var(
-  --#{root-defaults.$prefix}input-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$input-padding: var(
-  --#{root-defaults.$prefix}input-padding,
-  #{$input-padding-y} #{$input-padding-x}
-);
-$input-font-size: var(
-  --#{root-defaults.$prefix}input-font-size,
-  #{map.get(typography.$font-sizes, base)}
-);
-$label-font-size: var(
-  --#{root-defaults.$prefix}label-font-size,
-  #{$input-font-size}
-);
-$fieldset-direction: var(
-  --#{root-defaults.$prefix}fieldset-direction,
-  #{defaults.$fieldset-direction}
-);
-$fieldset-gap: var(
-  --#{root-defaults.$prefix}fieldset-gap,
-  map.get(root-variables.$spacers, 2)
-);
-$fieldset-padding-x: var(
-  --#{root-defaults.$prefix}fieldset-padding-x,
-  #{$input-padding-x}
-);
-$fieldset-padding-y: var(
-  --#{root-defaults.$prefix}fieldset-padding-y,
-  #{$input-padding-y}
-);
-$fieldset-padding: var(
-  --#{root-defaults.$prefix}fieldset-padding,
-  #{$fieldset-padding-y} #{$fieldset-padding-x}
-);
-$fieldset-font-size: var(
-  --#{root-defaults.$prefix}fieldset-font-size,
-  #{$input-font-size}
-);
-
-// Background properties.
-$input-background: var(
-  --#{root-defaults.$prefix}input-background,
-  #{color.$background}
-);
-$fieldset-background: var(
-  --#{root-defaults.$prefix}fieldset-background,
-  #{$input-background}
-);
-
-// Text properties.
-$input-color: var(--#{root-defaults.$prefix}input-color, #{color.$color});
-$input-placeholder-color: var(
-  --#{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});
-$input-disabled-color: var(
-  --#{root-defaults.$prefix}input-disabled-color,
-  #{theme.get(secondary, 400)}
-);
-$input-placeholder-disabled-color: var(
-  --#{root-defaults.$prefix}input-placeholder-disabled-color,
-  #{$input-disabled-color}
-);
-$label-disabled-color: var(
-  --#{root-defaults.$prefix}label-disabled-color,
-  #{$input-disabled-color}
-);
-$fieldset-disabled-color: var(
-  --#{root-defaults.$prefix}fieldset-disabled-color,
-  #{$input-disabled-color}
-);
-
-// Border properties.
-$input-border-top-width: var(
-  --#{root-defaults.$prefix}input-border-top-width,
-  #{root-variables.$border-top-width}
-);
-$input-border-right-width: var(
-  --#{root-defaults.$prefix}input-border-right-width,
-  #{root-variables.$border-right-width}
-);
-$input-border-bottom-width: var(
-  --#{root-defaults.$prefix}input-border-bottom-width,
-  #{root-variables.$border-bottom-width}
-);
-$input-border-left-width: var(
-  --#{root-defaults.$prefix}input-border-left-width,
-  #{root-variables.$border-left-width}
-);
-$input-border-width: var(
-  --#{root-defaults.$prefix}input-border-width,
-  #{$input-border-top-width} #{$input-border-right-width}
-    #{$input-border-bottom-width} #{$input-border-left-width}
-);
-$input-border-top-style: var(
-  --#{root-defaults.$prefix}input-border-top-style,
-  #{root-variables.$border-top-style}
-);
-$input-border-right-style: var(
-  --#{root-defaults.$prefix}input-border-right-style,
-  #{root-variables.$border-right-style}
-);
-$input-border-bottom-style: var(
-  --#{root-defaults.$prefix}input-border-bottom-style,
-  #{root-variables.$border-bottom-style}
-);
-$input-border-left-style: var(
-  --#{root-defaults.$prefix}input-border-left-style,
-  #{root-variables.$border-left-style}
-);
-$input-border-style: var(
-  --#{root-defaults.$prefix}input-border-style,
-  #{$input-border-top-style} #{$input-border-right-style}
-    #{$input-border-bottom-style} #{$input-border-left-style}
-);
-$input-border-top-left-radius: var(
-  --#{root-defaults.$prefix}input-border-top-left-radius,
-  #{root-variables.$border-top-left-radius}
-);
-$input-border-top-right-radius: var(
-  --#{root-defaults.$prefix}input-border-top-right-radius,
-  #{root-variables.$border-top-right-radius}
-);
-$input-border-bottom-left-radius: var(
-  --#{root-defaults.$prefix}input-border-bottom-left-radius,
-  #{root-variables.$border-bottom-left-radius}
-);
-$input-border-bottom-right-radius: var(
-  --#{root-defaults.$prefix}input-border-bottom-right-radius,
-  #{root-variables.$border-bottom-right-radius}
-);
-$input-border-radius: var(
-  --#{root-defaults.$prefix}input-border-radius,
-  #{$input-border-top-left-radius} #{$input-border-top-right-radius}
-    #{$input-border-bottom-right-radius} #{$input-border-bottom-left-radius}
-);
-$fieldset-border-top-width: var(
-  --#{root-defaults.$prefix}fieldset-border-top-width,
-  #{$input-border-top-width}
-);
-$fieldset-border-right-width: var(
-  --#{root-defaults.$prefix}fieldset-border-right-width,
-  #{$input-border-right-width}
-);
-$fieldset-border-bottom-width: var(
-  --#{root-defaults.$prefix}fieldset-border-bottom-width,
-  #{$input-border-bottom-width}
-);
-$fieldset-border-left-width: var(
-  --#{root-defaults.$prefix}fieldset-border-left-width,
-  #{$input-border-left-width}
-);
-$fieldset-border-width: var(
-  --#{root-defaults.$prefix}fieldset-border-width,
-  #{$fieldset-border-top-width} #{$fieldset-border-right-width}
-    #{$fieldset-border-bottom-width} #{$fieldset-border-left-width}
-);
-$fieldset-border-top-style: var(
-  --#{root-defaults.$prefix}fieldset-border-top-style,
-  #{$input-border-top-style}
-);
-$fieldset-border-right-style: var(
-  --#{root-defaults.$prefix}fieldset-border-right-style,
-  #{$input-border-right-style}
-);
-$fieldset-border-bottom-style: var(
-  --#{root-defaults.$prefix}fieldset-border-bottom-style,
-  #{$input-border-bottom-style}
-);
-$fieldset-border-left-style: var(
-  --#{root-defaults.$prefix}fieldset-border-left-style,
-  #{$input-border-left-style}
-);
-$fieldset-border-style: var(
-  --#{root-defaults.$prefix}fieldset-border-style,
-  #{$fieldset-border-top-style} #{$fieldset-border-right-style}
-    #{$fieldset-border-bottom-style} #{$fieldset-border-left-style}
-);
-$fieldset-border-top-left-radius: var(
-  --#{root-defaults.$prefix}fieldset-border-top-left-radius,
-  #{$input-border-top-left-radius}
-);
-$fieldset-border-top-right-radius: var(
-  --#{root-defaults.$prefix}fieldset-border-top-right-radius,
-  #{$input-border-top-right-radius}
-);
-$fieldset-border-bottom-left-radius: var(
-  --#{root-defaults.$prefix}fieldset-border-bottom-left-radius,
-  #{$input-border-bottom-left-radius}
-);
-$fieldset-border-bottom-right-radius: var(
-  --#{root-defaults.$prefix}fieldset-border-bottom-right-radius,
-  #{$input-border-bottom-right-radius}
-);
-$fieldset-border-radius: var(
-  --#{root-defaults.$prefix}fieldset-border-radius,
-  #{$fieldset-border-top-left-radius} #{$fieldset-border-top-right-radius}
-    #{$fieldset-border-bottom-right-radius}
-    #{$fieldset-border-bottom-left-radius}
-);
-
-// Border colour properties.
-$input-border-color: var(
-  --#{root-defaults.$prefix}input-border-color,
-  #{color.$border-color}
-);
-$input-disabled-border-color: var(
-  --#{root-defaults.$prefix}input-disabled-border-color,
-  #{theme.get(secondary, 200)}
-);
-$fieldset-border-color: var(
-  --#{root-defaults.$prefix}fieldset-border-color,
-  #{$input-border-color}
-);
-$fieldset-disabled-border-color: var(
-  --#{root-defaults.$prefix}fieldset-disabled-border-color,
-  #{$input-disabled-border-color}
-);
-
-// Accent color properties.
-$input-accent-color: var(
-  --#{root-defaults.$prefix}input-accent-color,
-  #{$input-color}
-);

package/packages/core/src/scss/base/link/_defaults.scss

@@ -1,35 +0,0 @@
-// @graupl/core link base default values.
-//
-// Generally, these should not be used directly when styling bases unless a static value is needed.
-// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
-//
-// They should not be used to define direct property values (i.e. font-size, color, etc.).
-// Those should be defined as custom properties in the `_variables.scss` file.
-
-@use "../../defaults" as root-defaults;
-
-// Link selectors.
-$selector-base: root-defaults.$element-selector-base !default;
-$modifier-selector-base: root-defaults.$modifier-selector-base !default;
-$link-selector-base: $selector-base !default;
-$link-selector: "a" !default;
-$stretched-link-selector-base: $modifier-selector-base !default;
-$stretched-link-selector: "stretched" !default;
-$stretched-link-pseudo-selector: "before" !default;
-
-// Link properties.
-$link-initial-text-decoration: underline !default;
-$link-final-text-decoration: $link-initial-text-decoration !default;
-$link-disabled-text-decoration: $link-initial-text-decoration !default;
-$link-initial-text-decoration-style: solid !default;
-$link-final-text-decoration-style: $link-initial-text-decoration-style !default;
-$link-disabled-text-decoration-style: $link-initial-text-decoration-style !default;
-$link-initial-transform: none !default;
-$link-final-transform: $link-initial-transform !default;
-$link-disabled-transform: $link-initial-transform !default;
-$link-border-width: 0 !default;
-$link-min-width: auto;
-$link-min-height: auto;
-
-// Stretched link properties.
-$stretched-link-z-index: 5 !default;

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

@@ -1,245 +0,0 @@
-// @graupl/core link base styles.
-//
-// This module provides the base styles for the link component.
-//
-// The link component is a styled anchor element that provides a consistent look and feel for links.
-//
-// The following selectors are generated by default:
-// - `a`: The link component.
-// - `.stretched`: A component modifier that makes the link component stretch to fill nearest relative container.
-//
-// The following custom properties control the generated selectors:
-// - `--graupl-link-text-decoration`: The text decoration for the link component.
-// - `--graupl-link-visited-text-decoration`: The text decoration for a visited link component.
-// - `--graupl-link-focus-text-decoration`: The text decoration for a focused link component.
-// - `--graupl-link-hover-text-decoration`: The text decoration for a hovered link component.
-// - `--graupl-link-active-text-decoration`: The text decoration for an active link component.
-// - `--graupl-link-disabled-text-decoration`: The text decoration for a disabled link component.
-// - `--graupl-link-text-decoration-thickness`: The text decoration thickness for the link component.
-// - `--graupl-link-visited-text-decoration-thickness`: The text decoration thickness for a visited link component.
-// - `--graupl-link-focus-text-decoration-thickness`: The text decoration thickness for a focused link component.
-// - `--graupl-link-hover-text-decoration-thickness`: The text decoration thickness for a hovered link component.
-// - `--graupl-link-active-text-decoration-thickness`: The text decoration thickness for an active link component.
-// - `--graupl-link-disabled-text-decoration-thickness`: The text decoration thickness for a disabled link component.
-// - `--graupl-link-text-decoration-style`: The text decoration style for the link component.
-// - `--graupl-link-visited-text-decoration-style`: The text decoration style for a visited link component.
-// - `--graupl-link-focus-text-decoration-style`: The text decoration style for a focused link component.
-// - `--graupl-link-hover-text-decoration-style`: The text decoration style for a hovered link component.
-// - `--graupl-link-active-text-decoration-style`: The text decoration style for an active link component.
-// - `--graupl-link-disabled-text-decoration-style`: The text decoration style for a disabled link component.
-// - `--graupl-link-color`: The color for the link component.
-// - `--graupl-link-visited-color`: The color for a visited link component.
-// - `--graupl-link-focus-color`: The color for a focused link component.
-// - `--graupl-link-hover-color`: The color for a hovered link component.
-// - `--graupl-link-active-color`: The color for an active link component.
-// - `--graupl-link-disabled-color`: The color for a disabled link component.
-// - `--graupl-link-text-decoration-color`: The text decoration color for the link component.
-// - `--graupl-link-visited-text-decoration-color`: The text decoration color for a visited link component.
-// - `--graupl-link-focus-text-decoration-color`: The text decoration color for a focused link component.
-// - `--graupl-link-hover-text-decoration-color`: The text decoration color for a hovered link component.
-// - `--graupl-link-active-text-decoration-color`: The text decoration color for an active link component.
-// - `--graupl-link-disabled-text-decoration-color`: The text decoration color for a disabled link component.
-// - `--graupl-link-background`: The background color for the link component.
-// - `--graupl-link-visited-background`: The background color for a visited link component.
-// - `--graupl-link-focus-background`: The background color for a focused link component.
-// - `--graupl-link-hover-background`: The background color for a hovered link component.
-// - `--graupl-link-active-background`: The background color for an active link component.
-// - `--graupl-link-disabled-background`: The background color for a disabled link component.
-// - `--graupl-link-padding-x`: The horizontal padding for the link component.
-// - `--graupl-link-padding-y`: The vertical padding for the link component.
-// - `--graupl-link-padding`: The padding for the link component (combines x and y padding).
-// - `--graupl-link-transition`: The transition for the link component.
-// - `--graupl-link-transition-reduced-motion`: The transition for the link component when reduced motion is enabled.
-// - `--graupl-link-transform`: The transform for the link component.
-// - `--graupl-link-transform-visited`: The transform for a visited link component.
-// - `--graupl-link-transform-focus`: The transform for a focused link component.
-// - `--graupl-link-transform-hover`: The transform for a hovered link component.
-// - `--graupl-link-transform-active`: The transform for an active link component.
-// - `--graupl-link-transform-disabled`: The transform for a disabled link component.
-// - `--graupl-link-border-top-width`: The top border width for the link component.
-// - `--graupl-link-border-right-width`: The right border width for the link component.
-// - `--graupl-link-border-bottom-width`: The bottom border width for the link component.
-// - `--graupl-link-border-left-width`: The left border width for the link component.
-// - `--graupl-link-border-width`: The border width for the link component (combines top, right, bottom, and left widths).
-// - `--graupl-link-border-top-style`: The top border style for the link component.
-// - `--graupl-link-border-right-style`: The right border style for the link component.
-// - `--graupl-link-border-bottom-style`: The bottom border style for the link component.
-// - `--graupl-link-border-left-style`: The left border style for the link component.
-// - `--graupl-link-border-style`: The border style for the link component (combines top, right, bottom, and left styles).
-// - `--graupl-link-border-top-left-radius`: The top left border radius for the link component.
-// - `--graupl-link-border-top-right-radius`: The top right border radius for the link component.
-// - `--graupl-link-border-bottom-right-radius`: The bottom right border radius for the link component.
-// - `--graupl-link-border-bottom-left-radius`: The bottom left border radius for the link component.
-// - `--graupl-link-border-radius`: The border radius for the link component (combines top-left, top-right, bottom-right, and bottom-left radii).
-// - `--graupl-link-border-color`: The border color for the link component.
-// - `--graupl-link-visited-border-color`: The border color for a visited link component.
-// - `--graupl-link-focus-border-color`: The border color for a focused link component.
-// - `--graupl-link-hover-border-color`: The border color for a hovered link component.
-// - `--graupl-link-active-border-color`: The border color for an active link component.
-// - `--graupl-link-disabled-border-color`: The border color for a disabled link component.
-// - `--graupl-link-min-width`: The minimum width for the link component.
-// - `--graupl-link-min-height`: The minimum height for the link component.
-// - `--graupl-link-stretched-link-z-index`: The z-index for the stretched link component modifier.
-//
-// The following variables control the generated selectors:
-// - `$selector-base`: The selector base for the component.
-// - `$modifier-selector-base`: The selector base for component modifiers.
-// - `$link-selector-base`: The base selector for the link component.
-// - `$link-selector`: The selector for the link component.
-// - `$stretched-link-selector-base`: The base selector for the stretched link component modifier.
-// - `$stretched-link-selector`: The selector for the stretched link component modifier.
-// - `$stretched-link-pseudo-selector`: The pseudo selector for the stretched link component modifier.
-// - `$link-initial-text-decoration`: The initial text decoration for the link component.
-// - `$link-final-text-decoration`: The final text decoration for the link component.
-// - `$link-disabled-text-decoration`: The disabled text decoration for the link component.
-// - `$link-initial-text-decoration-style`: The initial text decoration style for the link component.
-// - `$link-final-text-decoration-style`: The final text decoration style for the link component.
-// - `$link-disabled-text-decoration-style`: The disabled text decoration style for the link component.
-// - `$link-initial-transform`: The initial transform for the link component.
-// - `$link-final-transform`: The final transform for the link component.
-// - `$link-disabled-transform`: The disabled transform for the link component.
-// - `$link-border-width`: The border width for the link component.
-// - `$link-min-width`: The minimum width for the link component.
-// - `$link-min-height`: The minimum height for the link component.
-// - `$stretched-link-z-index`: The z-index for the stretched link component modifier.
-//
-// @example
-//   <a href="#">Link</a>
-//
-// @example
-//   <a href="#" class="stretched">Stretched Link</a>
-
-@use "../../defaults" as root-defaults;
-@use "../../mixins/animation";
-@use "../../mixins/layer" as *;
-@use "defaults";
-@use "sass:map";
-@use "variables" as *;
-
-@include layer(base) {
-  // a
-  #{defaults.$link-selector-base}#{defaults.$link-selector} {
-    min-width: $link-min-width;
-    min-height: $link-min-height;
-    padding: $link-padding;
-    transform: $link-transform;
-    transition: $link-transition;
-    border-width: $link-border-width;
-    border-style: $link-border-style;
-    border-radius: $link-border-radius;
-    text-decoration: $link-text-decoration;
-    text-decoration-style: $link-text-decoration-style;
-    text-decoration-thickness: $link-text-decoration-thickness;
-
-    @each $state, $selectors in root-defaults.$state-selectors {
-      @each $selector in $selectors {
-        // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled
-        &#{$selector} {
-          transform: map.get($link-transform-states, $state);
-          text-decoration: map.get($link-text-decoration-states, $state);
-          text-decoration-style: map.get(
-            $link-text-decoration-style-states,
-            $state
-          );
-          text-decoration-thickness: map.get(
-            $link-text-decoration-thickness-states,
-            $state
-          );
-
-          // If the state is disabled, we want that to supersede all other states.
-          @if $state == "disabled" {
-            cursor: not-allowed;
-
-            @each $sub-state, $sub-selectors in root-defaults.$state-selectors {
-              @if $sub-state != $state {
-                @each $sub-selector in $sub-selectors {
-                  // e.g &:visited, &:focus-visible, &:hover, &:active
-                  &#{$sub-selector} {
-                    transform: map.get($link-transform-states, $state);
-                    text-decoration: map.get(
-                      $link-text-decoration-states,
-                      $state
-                    );
-                    text-decoration-style: map.get(
-                      $link-text-decoration-style-states,
-                      $state
-                    );
-                    text-decoration-thickness: map.get(
-                      $link-text-decoration-thickness-states,
-                      $state
-                    );
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // &.stretched
-    &#{defaults.$stretched-link-selector-base}#{defaults.$stretched-link-selector} {
-      isolation: isolate;
-
-      // &::after
-      &::#{defaults.$stretched-link-pseudo-selector} {
-        content: "";
-        position: absolute;
-        inset: 0;
-        z-index: $stretched-link-z-index;
-      }
-    }
-  }
-
-  @include animation.off {
-    // a
-    #{defaults.$link-selector-base}#{defaults.$link-selector} {
-      --#{root-defaults.$prefix}link-transition: #{$link-transition-reduced-motion};
-    }
-  }
-}
-
-@include layer(theme) {
-  // a
-  #{defaults.$link-selector-base}#{defaults.$link-selector} {
-    border-color: $link-border-color;
-    background: $link-background;
-    color: $link-color;
-    text-decoration-color: $link-text-decoration-color;
-
-    @each $state, $selectors in root-defaults.$state-selectors {
-      @each $selector in $selectors {
-        // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled
-        &#{$selector} {
-          border-color: map.get($link-border-color-states, $state);
-          background: map.get($link-background-states, $state);
-          color: map.get($link-color-states, $state);
-          text-decoration-color: map.get(
-            $link-text-decoration-color-states,
-            $state
-          );
-
-          // If the state is disabled, we want that to supersede all other states.
-          @if $state == "disabled" {
-            @each $sub-state, $sub-selectors in root-defaults.$state-selectors {
-              @if $sub-state != $state {
-                @each $sub-selector in $sub-selectors {
-                  // e.g &:visited, &:focus-visible, &:hover, &:active
-                  &#{$sub-selector} {
-                    border-color: map.get($link-border-color-states, $state);
-                    background: map.get($link-background-states, $state);
-                    color: map.get($link-color-states, $state);
-                    text-decoration-color: map.get(
-                      $link-text-decoration-color-states,
-                      $state
-                    );
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}