@graupl/graupl 1.0.0-beta.2 → 1.0.0-beta.21

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

@@ -1,176 +0,0 @@
-// @graupl/graupl button 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/color/variables" as color;
-@use "../../theme/typography/variables" as typography;
-@use "../../functions/theme";
-@use "sass:map";
-
-// Button properties.
-$button-min-width: var(
-  --#{root-defaults.$prefix}button-min-width,
-  #{root-defaults.$interactive-min-width}
-);
-$button-min-height: var(
-  --#{root-defaults.$prefix}button-min-height,
-  #{root-defaults.$interactive-min-height}
-);
-$button-padding-x: var(
-  --#{root-defaults.$prefix}button-padding-x,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$button-padding-y: var(
-  --#{root-defaults.$prefix}button-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$button-padding: var(
-  --#{root-defaults.$prefix}button-padding,
-  #{$button-padding-y} #{$button-padding-x}
-);
-$button-font-size: var(
-  --#{root-defaults.$prefix}button-font-size,
-  #{map.get(typography.$font-sizes, base)}
-);
-$button-transition: var(
-  --#{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)}
-    #{root-variables.$transition-timing-function},
-  transform #{map.get(root-variables.$transition-durations, fast)}
-    #{root-variables.$transition-timing-function}
-);
-$button-transition-reduced-motion: var(
-  --#{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)}
-    #{root-variables.$transition-timing-function}
-);
-
-// Transform properties.
-$button-transform: var(
-  --#{root-defaults.$prefix}button-transform,
-  #{defaults.$button-transform}
-);
-$button-visited-transform: var(
-  --#{root-defaults.$prefix}button-visited-transform,
-  #{defaults.$button-visited-transform}
-);
-$button-focus-transform: var(
-  --#{root-defaults.$prefix}button-focus-transform,
-  #{defaults.$button-focus-transform}
-);
-$button-hover-transform: var(
-  --#{root-defaults.$prefix}button-hover-transform,
-  #{defaults.$button-hover-transform}
-);
-$button-active-transform: var(
-  --#{root-defaults.$prefix}button-active-transform,
-  #{defaults.$button-active-transform}
-);
-$button-disabled-transform: var(
-  --#{root-defaults.$prefix}button-disabled-transform,
-  #{defaults.$button-disabled-transform}
-);
-
-// Background properties.
-$button-background: var(
-  --#{root-defaults.$prefix}button-background,
-  #{color.$root-background}
-);
-$button-visited-background: var(
-  --#{root-defaults.$prefix}button-visited-background,
-  #{color.$root-background}
-);
-$button-focus-background: var(
-  --#{root-defaults.$prefix}button-focus-background,
-  #{color.$root-background}
-);
-$button-hover-background: var(
-  --#{root-defaults.$prefix}button-hover-background,
-  #{theme.get(primary, 900)}
-);
-$button-active-background: var(
-  --#{root-defaults.$prefix}button-active-background,
-  #{theme.get(primary, 900)}
-);
-$button-disabled-background: var(
-  --#{root-defaults.$prefix}button-disabled-background,
-  #{color.$root-background}
-);
-
-// Text properties.
-$button-color: var(
-  --#{root-defaults.$prefix}button-color,
-  #{color.$root-color}
-);
-$button-visited-color: var(
-  --#{root-defaults.$prefix}button-visited-color,
-  #{color.$root-color}
-);
-$button-focus-color: var(
-  --#{root-defaults.$prefix}button-focus-color,
-  #{color.$root-color}
-);
-$button-hover-color: var(
-  --#{root-defaults.$prefix}button-hover-color,
-  #{theme.get(primary, 100)}
-);
-$button-active-color: var(
-  --#{root-defaults.$prefix}button-active-color,
-  #{theme.get(primary, 100)}
-);
-$button-disabled-color: var(
-  --#{root-defaults.$prefix}button-disabled-color,
-  #{theme.get(primary, 200)}
-);
-
-// Border properties.
-$button-border-width: var(
-  --#{root-defaults.$prefix}button-border-width,
-  #{root-variables.$border-width}
-);
-$button-border-style: var(
-  --#{root-defaults.$prefix}botton-border-style,
-  #{root-variables.$border-style}
-);
-$button-border: var(
-  --#{root-defaults.$prefix}button-border,
-  #{$button-border-width} #{$button-border-style}
-);
-$button-border-radius: var(
-  --#{root-defaults.$prefix}button-border-radius,
-  #{root-variables.$border-radius}
-);
-
-// Border colour properties.
-$button-border-color: var(
-  --#{root-defaults.$prefix}button-border-color,
-  #{color.$root-color}
-);
-$button-visited-border-color: var(
-  --#{root-defaults.$prefix}button-visited-border-color,
-  #{color.$root-color}
-);
-$button-focus-border-color: var(
-  --#{root-defaults.$prefix}button-focus-border-color,
-  #{color.$root-color}
-);
-$button-hover-border-color: var(
-  --#{root-defaults.$prefix}button-hover-border-color,
-  #{color.$root-color}
-);
-$button-active-border-color: var(
-  --#{root-defaults.$prefix}button-active-border-color,
-  #{color.$root-color}
-);
-$button-disabled-border-color: var(
-  --#{root-defaults.$prefix}button-disabled-border-color,
-  #{theme.get(primary, 200)}
-);

package/src/scss/base/form/_defaults.scss

@@ -1,17 +0,0 @@
-// @graupl/graupl form 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.
-
-// Form selectors.
-$input-selector: "input" !default;
-$textarea-selector: "textarea" !default;
-$select-selector: "select" !default;
-$label-selector: "label" !default;
-$fieldset-selector: "fieldset" !default;
-
-// Fieldset properties.
-$fieldset-direction: column !default;

package/src/scss/base/form/_index.scss

@@ -1,93 +0,0 @@
-// @graupl/graupl form base styles.
-
-@use "defaults";
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-
-@include layer(base) {
-  #{defaults.$input-selector},
-  #{defaults.$textarea-selector},
-  #{defaults.$select-selector} {
-    padding: $input-padding;
-    border: $input-border;
-    border-radius: $input-border-radius;
-    font-size: $input-font-size;
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  #{defaults.$label-selector} {
-    font-size: $label-font-size;
-  }
-
-  #{defaults.$fieldset-selector} {
-    display: flex;
-    flex-flow: $fieldset-direction wrap;
-    gap: $fieldset-gap;
-    padding: $fieldset-padding;
-    border: $fieldset-border;
-    border-radius: $fieldset-border-radius;
-    font-size: $fieldset-font-size;
-
-    &:disabled {
-      #{defaults.$input-selector},
-      #{defaults.$textarea-selector},
-      #{defaults.$select-selector} {
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-@include layer(theme) {
-  #{defaults.$input-selector},
-  #{defaults.$textarea-selector},
-  #{defaults.$select-selector} {
-    border-color: $input-border-color;
-    background: $input-background;
-    color: $input-color;
-    accent-color: $input-accent-color;
-
-    &::placeholder {
-      color: $input-placeholder-color;
-    }
-
-    &:disabled {
-      border-color: $input-disabled-border-color;
-      color: $input-disabled-color;
-
-      &::placeholder {
-        color: $input-disabled-placeholder-color;
-      }
-    }
-  }
-
-  #{defaults.$label-selector} {
-    color: $label-color;
-
-    &:has(
-        + #{defaults.$input-selector}:disabled,
-        + #{defaults.$textarea-selector}:disabled,
-        + #{defaults.$select-selector}:disabled
-      ) {
-      color: $label-disabled-color;
-    }
-  }
-
-  #{defaults.$fieldset-selector} {
-    border-color: $fieldset-border-color;
-    background: $fieldset-background;
-    color: $fieldset-color;
-
-    &:disabled {
-      border-color: $fieldset-disabled-border-color;
-      color: $fieldset-disabled-color;
-
-      #{defaults.$label-selector} {
-        color: $label-disabled-color;
-      }
-    }
-  }
-}

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

@@ -1,153 +0,0 @@
-// @graupl/graupl 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.$root-background}
-);
-$fieldset-background: var(
-  --#{root-defaults.$prefix}fieldset-background,
-  #{$input-background}
-);
-
-// Text properties.
-$input-color: var(
-  --#{root-defaults.$prefix}input-color,
-  #{theme.get(primary, 900)}
-);
-$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-disabled-placeholder-color: var(
-  --#{root-defaults.$prefix}input-disabled-placeholder-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-width: var(
-  --#{root-defaults.$prefix}input-border-width,
-  #{root-variables.$border-width}
-);
-$input-border-style: var(
-  --#{root-defaults.$prefix}botton-border-style,
-  #{root-variables.$border-style}
-);
-$input-border: var(
-  --#{root-defaults.$prefix}input-border,
-  #{$input-border-width} #{$input-border-style}
-);
-$input-border-radius: var(
-  --#{root-defaults.$prefix}input-border-radius,
-  #{root-variables.$border-radius}
-);
-$fieldset-border-width: var(
-  --#{root-defaults.$prefix}fieldset-border-width,
-  #{$input-border-width}
-);
-$fieldset-border-style: var(
-  --#{root-defaults.$prefix}fieldset-border-style,
-  #{$input-border-style}
-);
-$fieldset-border: var(
-  --#{root-defaults.$prefix}fieldset-border,
-  #{$fieldset-border-width} #{$fieldset-border-style}
-);
-$fieldset-border-radius: var(
-  --#{root-defaults.$prefix}fieldset-border-radius,
-  #{$input-border-radius}
-);
-
-// Border colour properties.
-$input-border-color: var(
-  --#{root-defaults.$prefix}input-border-color,
-  #{theme.get(secondary, 700)}
-);
-$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,
-  #{theme.get(primary, 700)}
-);

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

@@ -1,50 +0,0 @@
-// @graupl/graupl 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.
-
-// Link selectors.
-$link-selector: "a" !default;
-$stretched-link-selector: ".stretched" !default;
-$stretched-link-pseudo-selector: "before" !default;
-
-// Link properties.
-$link-text-decoration: underline !default;
-$link-visited-text-decoration: $link-text-decoration !default;
-$link-active-text-decoration: $link-text-decoration !default;
-$link-hover-text-decoration: $link-text-decoration !default;
-$link-focus-text-decoration: $link-text-decoration !default;
-$link-disabled-text-decoration: $link-text-decoration !default;
-$link-text-decoration-style: solid !default;
-$link-visited-text-decoration-style: $link-text-decoration-style !default;
-$link-active-text-decoration-style: $link-text-decoration-style !default;
-$link-hover-text-decoration-style: $link-text-decoration-style !default;
-$link-focus-text-decoration-style: $link-text-decoration-style !default;
-$link-disabled-text-decoration-style: $link-text-decoration-style !default;
-$link-transform: none !default;
-$link-visited-transform: $link-transform !default;
-$link-focus-transform: $link-transform !default;
-$link-hover-transform: $link-transform !default;
-$link-active-transform: $link-transform !default;
-$link-disabled-transform: $link-transform !default;
-$link-border-width: 0 !default;
-$link-border-color: transparent !default;
-$link-visited-border-color: $link-border-color !default;
-$link-focus-border-color: $link-border-color !default;
-$link-hover-border-color: $link-border-color !default;
-$link-active-border-color: $link-border-color !default;
-$link-disabled-border-color: $link-border-color !default;
-$link-background: transparent !default;
-$link-visited-background: $link-background !default;
-$link-focus-background: $link-background !default;
-$link-hover-background: $link-background !default;
-$link-active-background: $link-background !default;
-$link-disabled-background: $link-background !default;
-$link-min-width: auto;
-$link-min-height: auto;
-
-// Stretched link properties.
-$stretched-link-z-index: 5 !default;

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

@@ -1,134 +0,0 @@
-// @graupl/graupl link base styles.
-
-@use "defaults";
-@use "variables" as *;
-@use "../../defaults" as root-defaults;
-@use "../../mixins/layer" as *;
-@use "../../mixins/animation";
-
-@include layer(base) {
-  #{defaults.$link-selector} {
-    min-width: $link-min-width;
-    min-height: $link-min-height;
-    padding: $link-padding;
-    transform: $link-transform;
-    transition: $link-transition;
-    border: $link-border;
-    border-radius: $link-border-radius;
-    text-decoration: $link-text-decoration;
-    text-decoration-style: $link-text-decoration-style;
-    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};
-    }
-
-    &: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};
-    }
-
-    &: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};
-    }
-
-    &: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};
-    }
-
-    &:disabled,
-    &[disabled] {
-      cursor: not-allowed;
-
-      &,
-      &:visited,
-      &: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};
-      }
-    }
-
-    &#{defaults.$stretched-link-selector} {
-      isolation: isolate;
-
-      &::#{defaults.$stretched-link-pseudo-selector} {
-        content: "";
-        position: absolute;
-        inset: 0;
-        z-index: $stretched-link-z-index;
-      }
-    }
-  }
-
-  @include animation.off {
-    #{defaults.$link-selector} {
-      --#{root-defaults.$prefix}link-transition: #{$link-transition-reduced-motion};
-    }
-  }
-}
-
-@include layer(theme) {
-  #{defaults.$link-selector} {
-    border-color: $link-border-color;
-    background: $link-background;
-    color: $link-color;
-    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};
-    }
-
-    &: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};
-    }
-
-    &: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};
-    }
-
-    &: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};
-    }
-
-    &:disabled,
-    &[disabled] {
-      &,
-      &:visited,
-      &: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};
-      }
-    }
-  }
-}