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

package/src/scss/base/link/_variables.scss

@@ -1,262 +0,0 @@
-// @graupl/graupl link 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 "../../functions/theme";
-@use "sass:map";
-
-// Link properties.
-$link-text-decoration: var(
-  --#{root-defaults.$prefix}link-text-decoration,
-  #{defaults.$link-text-decoration}
-);
-$link-visited-text-decoration: var(
-  --#{root-defaults.$prefix}link-visited-text-decoration,
-  #{defaults.$link-visited-text-decoration}
-);
-$link-focus-text-decoration: var(
-  --#{root-defaults.$prefix}link-focus-text-decoration,
-  #{defaults.$link-focus-text-decoration}
-);
-$link-hover-text-decoration: var(
-  --#{root-defaults.$prefix}link-hover-text-decoration,
-  #{defaults.$link-hover-text-decoration}
-);
-$link-active-text-decoration: var(
-  --#{root-defaults.$prefix}link-active-text-decoration,
-  #{defaults.$link-active-text-decoration}
-);
-$link-disabled-text-decoration: var(
-  --#{root-defaults.$prefix}link-disabled-text-decoration,
-  #{defaults.$link-disabled-text-decoration}
-);
-$link-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}link-text-decoration-thickness,
-  #{root-variables.$border-width}
-);
-$link-visited-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}link-visited-text-decoration-thickness,
-  #{root-variables.$border-width}
-);
-$link-focus-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}link-focus-text-decoration-thickness,
-  #{root-variables.$border-width}
-);
-$link-hover-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}link-hover-text-decoration-thickness,
-  #{root-variables.$border-width}
-);
-$link-active-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}link-active-text-decoration-thickness,
-  #{root-variables.$border-width}
-);
-$link-disabled-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}link-disabled-text-decoration-thickness,
-  #{root-variables.$border-width}
-);
-$link-text-decoration-style: var(
-  --#{root-defaults.$prefix}link-text-decoration-style,
-  #{defaults.$link-text-decoration-style}
-);
-$link-visited-text-decoration-style: var(
-  --#{root-defaults.$prefix}link-visited-text-decoration-style,
-  #{defaults.$link-visited-text-decoration-style}
-);
-$link-focus-text-decoration-style: var(
-  --#{root-defaults.$prefix}link-focus-text-decoration-style,
-  #{defaults.$link-focus-text-decoration-style}
-);
-$link-hover-text-decoration-style: var(
-  --#{root-defaults.$prefix}link-hover-text-decoration-style,
-  #{defaults.$link-hover-text-decoration-style}
-);
-$link-active-text-decoration-style: var(
-  --#{root-defaults.$prefix}link-active-text-decoration-style,
-  #{defaults.$link-active-text-decoration-style}
-);
-$link-disabled-text-decoration-style: var(
-  --#{root-defaults.$prefix}link-disabled-text-decoration-style,
-  #{defaults.$link-disabled-text-decoration-style}
-);
-$link-color: var(
-  --#{root-defaults.$prefix}link-color,
-  #{theme.get(primary, 700)}
-);
-$link-visited-color: var(
-  --#{root-defaults.$prefix}link-visited-color,
-  #{theme.get(primary, 700)}
-);
-$link-focus-color: var(
-  --#{root-defaults.$prefix}link-focus-color,
-  #{theme.get(primary, 700)}
-);
-$link-hover-color: var(
-  --#{root-defaults.$prefix}link-hover-color,
-  #{theme.get(tertiary, 700)}
-);
-$link-active-color: var(
-  --#{root-defaults.$prefix}link-active-color,
-  #{theme.get(tertiary, 700)}
-);
-$link-disabled-color: var(
-  --#{root-defaults.$prefix}link-disabled-color,
-  #{theme.get(primary, 200)}
-);
-$link-text-decoration-color: var(
-  --#{root-defaults.$prefix}link-text-decoration-color,
-  #{$link-color}
-);
-$link-visited-text-decoration-color: var(
-  --#{root-defaults.$prefix}link-visited-text-decoration-color,
-  #{$link-visited-color}
-);
-$link-focus-text-decoration-color: var(
-  --#{root-defaults.$prefix}link-focus-text-decoration-color,
-  #{$link-focus-color}
-);
-$link-hover-text-decoration-color: var(
-  --#{root-defaults.$prefix}link-hover-text-decoration-color,
-  #{$link-hover-color}
-);
-$link-active-text-decoration-color: var(
-  --#{root-defaults.$prefix}link-active-text-decoration-color,
-  #{$link-active-color}
-);
-$link-disabled-text-decoration-color: var(
-  --#{root-defaults.$prefix}link-disabled-text-decoration-color,
-  #{$link-disabled-color}
-);
-$link-background: var(
-  --#{root-defaults.$prefix}link-background,
-  #{defaults.$link-background}
-);
-$link-visited-background: var(
-  --#{root-defaults.$prefix}link-visited-background,
-  #{defaults.$link-visited-background}
-);
-$link-focus-background: var(
-  --#{root-defaults.$prefix}link-focus-background,
-  #{defaults.$link-focus-background}
-);
-$link-hover-background: var(
-  --#{root-defaults.$prefix}link-hover-background,
-  #{defaults.$link-hover-background}
-);
-$link-active-background: var(
-  --#{root-defaults.$prefix}link-active-background,
-  #{defaults.$link-active-background}
-);
-$link-disabled-background: var(
-  --#{root-defaults.$prefix}link-disabled-background,
-  #{defaults.$link-disabled-background}
-);
-$link-padding-x: var(
-  --#{root-defaults.$prefix}link-padding-x,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$link-padding-y: var(
-  --#{root-defaults.$prefix}link-padding-y,
-  #{map.get(root-variables.$spacers, 0)}
-);
-$link-padding: var(
-  --#{root-defaults.$prefix}link-padding,
-  #{$link-padding-y} #{$link-padding-x}
-);
-$link-transition: var(
-  --#{root-defaults.$prefix}link-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}
-);
-$link-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}link-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}
-);
-$link-transform: var(
-  --#{root-defaults.$prefix}link-transform,
-  #{defaults.$link-transform}
-);
-$link-visited-transform: var(
-  --#{root-defaults.$prefix}link-visited-transform,
-  #{defaults.$link-visited-transform}
-);
-$link-focus-transform: var(
-  --#{root-defaults.$prefix}link-focus-transform,
-  #{defaults.$link-focus-transform}
-);
-$link-hover-transform: var(
-  --#{root-defaults.$prefix}link-hover-transform,
-  #{defaults.$link-hover-transform}
-);
-$link-active-transform: var(
-  --#{root-defaults.$prefix}link-active-transform,
-  #{defaults.$link-active-transform}
-);
-$link-disabled-transform: var(
-  --#{root-defaults.$prefix}link-disabled-transform,
-  #{defaults.$link-disabled-transform}
-);
-$link-border-width: var(
-  --#{root-defaults.$prefix}link-border-width,
-  #{defaults.$link-border-width}
-);
-$link-border-style: var(
-  --#{root-defaults.$prefix}link-border-style,
-  #{root-variables.$border-style}
-);
-$link-border: var(
-  --#{root-defaults.$prefix}link-border,
-  #{$link-border-width} #{$link-border-style}
-);
-$link-border-radius: var(
-  --#{root-defaults.$prefix}link-border-radius,
-  #{root-variables.$border-radius}
-);
-$link-border-color: var(
-  --#{root-defaults.$prefix}link-border-color,
-  #{defaults.$link-border-color}
-);
-$link-visited-border-color: var(
-  --#{root-defaults.$prefix}link-visited-border-color,
-  #{defaults.$link-visited-border-color}
-);
-$link-focus-border-color: var(
-  --#{root-defaults.$prefix}link-focus-border-color,
-  #{defaults.$link-focus-border-color}
-);
-$link-hover-border-color: var(
-  --#{root-defaults.$prefix}link-hover-border-color,
-  #{defaults.$link-hover-border-color}
-);
-$link-active-border-color: var(
-  --#{root-defaults.$prefix}link-active-border-color,
-  #{defaults.$link-active-border-color}
-);
-$link-disabled-border-color: var(
-  --#{root-defaults.$prefix}link-disabled-border-color,
-  #{defaults.$link-disabled-border-color}
-);
-$link-min-width: var(
-  --#{root-defaults.$prefix}link-min-width,
-  defaults.$link-min-width
-);
-$link-min-height: var(
-  --#{root-defaults.$prefix}link-min-height,
-  defaults.$link-min-height
-);
-
-// Stretched link properties.
-$stretched-link-z-index: var(
-  --#{root-defaults.$prefix}stretched-link-z-index,
-  #{defaults.$stretched-link-z-index}
-);

package/src/scss/base/table/_defaults.scss

@@ -1,53 +0,0 @@
-// @graupl/graupl table 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 "sass:map";
-
-// Table selectors.
-$table-selector: "table" !default;
-$table-caption-selector: "caption" !default;
-$table-header-selector: "th" !default;
-$table-cell-selector: "td" !default;
-$table-row-selector: "tr" !default;
-$table-head-selector: "thead" !default;
-$table-body-selector: "tbody" !default;
-$table-foot-selector: "tfoot" !default;
-$table-theme-prefix-selector: "." !default;
-$table-bordered-selector: ".bordered" !default;
-$table-collapsed-selector: ".collapsed" !default;
-$table-striped-columns-selector: ".striped-columns" !default;
-$table-striped-rows-selector: ".striped-rows" !default;
-$table-hoverable-selector: ".hoverable" !default;
-$table-highlight-selector: ".highlight" !default;
-$table-responsive-selector: ".responsive-table" !default;
-
-// Table properties.
-$table-caption-side: bottom !default;
-
-// Table theme defaults.
-// This map is used to define the default colour shades for the
-// themed table bases.
-//
-// e.g.
-// Primary tables will use primary--700 as the header background,
-// and primary--100 as the header text colour.
-//
-// Secondary/tertiary tables will use the same shade for their respective colours.
-$base-table-theme-map: (
-  header-background: 700,
-  header-color: 100,
-  striped-background: 200,
-  striped-color: 900,
-  hover-background: 300,
-  hover-color: 900,
-  border-color: 900,
-  highlight-background: 500,
-  highlight-color: 100,
-);
-$custom-table-theme-map: () !default;
-$table-theme-map: map.merge($base-table-theme-map, $custom-table-theme-map);

package/src/scss/base/table/_index.scss

@@ -1,121 +0,0 @@
-// @graupl/graupl table base styles.
-
-@use "defaults";
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-@use "../../defaults" as root-defaults;
-@use "../../functions/theme";
-
-@include layer(base) {
-  #{defaults.$table-selector} {
-    #{defaults.$table-caption-selector} {
-      padding: $table-caption-padding;
-      caption-side: $table-caption-side;
-    }
-
-    #{defaults.$table-header-selector} {
-      padding: $table-header-padding;
-      font-weight: $table-header-font-weight;
-    }
-
-    #{defaults.$table-cell-selector},
-    #{defaults.$table-body-selector} #{defaults.$table-header-selector} {
-      padding: $table-cell-padding;
-    }
-
-    &#{defaults.$table-collapsed-selector} {
-      border-collapse: collapse;
-    }
-
-    &#{defaults.$table-bordered-selector} {
-      border-collapse: collapse;
-      border: $table-border;
-
-      #{defaults.$table-row-selector} > * {
-        border: $table-cell-border;
-      }
-    }
-  }
-
-  #{defaults.$table-responsive-selector} {
-    display: block;
-    width: 100%;
-    overflow: scroll hidden;
-
-    #{defaults.$table-selector} {
-      width: 100%;
-      margin-bottom: 0;
-    }
-  }
-}
-
-@include layer(theme) {
-  #{defaults.$table-selector} {
-    @each $variant in theme.variants() {
-      &#{defaults.$table-theme-prefix-selector}#{$variant},
-      #{defaults.$table-theme-prefix-selector}#{$variant} {
-        @each $prop, $key in defaults.$table-theme-map {
-          --#{root-defaults.$prefix}table-#{$prop}: #{theme.get(
-              $variant,
-              $key
-            )};
-        }
-      }
-    }
-
-    #{defaults.$table-header-selector} {
-      background: $table-header-background;
-      color: $table-header-color;
-    }
-
-    #{defaults.$table-cell-selector},
-    #{defaults.$table-body-selector} #{defaults.$table-header-selector} {
-      background: $table-cell-background;
-      color: $table-cell-color;
-    }
-
-    &#{defaults.$table-bordered-selector} {
-      border-color: $table-border-color;
-
-      #{defaults.$table-row-selector} > * {
-        border-color: $table-cell-border-color;
-      }
-    }
-
-    &#{defaults.$table-striped-columns-selector} {
-      #{defaults.$table-body-selector}
-        #{defaults.$table-row-selector}:nth-child(odd)
-        > * {
-        background: $table-striped-background;
-        color: $table-striped-color;
-      }
-    }
-
-    &#{defaults.$table-striped-rows-selector} {
-      #{defaults.$table-body-selector}
-        #{defaults.$table-row-selector}
-        > :nth-child(odd) {
-        background: $table-striped-background;
-        color: $table-striped-color;
-      }
-    }
-
-    &#{defaults.$table-hoverable-selector} {
-      #{defaults.$table-body-selector}
-        #{defaults.$table-row-selector}:hover
-        > * {
-        background: $table-hover-background;
-        color: $table-hover-color;
-      }
-    }
-
-    #{defaults.$table-highlight-selector} {
-      --#{root-defaults.$prefix}table-cell-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}table-cell-color: #{$table-highlight-color};
-      --#{root-defaults.$prefix}table-header-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}table-header-color: #{$table-highlight-color};
-      --#{root-defaults.$prefix}table-striped-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}table-striped-color: #{$table-highlight-color};
-    }
-  }
-}

package/src/scss/base/table/_variables.scss

@@ -1,135 +0,0 @@
-// @graupl/graupl table base variables.
-//
-// These values are to be used to directly style bases and provide a
-// cleaner way to reference custom properties.
-
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../../variables" as root-variables;
-@use "../../theme/typography/variables" as typography;
-@use "../../theme/color/variables" as color;
-@use "../../functions/theme";
-@use "sass:map";
-
-// Table caption properties.
-$table-caption-side: var(
-  --#{root-defaults.$prefix}table-caption-side,
-  #{defaults.$table-caption-side}
-);
-$table-caption-padding-x: var(
-  --#{root-defaults.$prefix}table-caption-padding-x,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-caption-padding-y: var(
-  --#{root-defaults.$prefix}table-caption-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-caption-padding: $table-caption-padding-y $table-caption-padding-x;
-
-// Table header properties.
-$table-header-font-weight: var(
-  --#{root-defaults.$prefix}table-header-font-weight,
-  #{typography.$font-weight-bold}
-);
-$table-header-padding-x: var(
-  --#{root-defaults.$prefix}table-header-padding-x,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-header-padding-y: var(
-  --#{root-defaults.$prefix}table-header-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-header-padding: $table-header-padding-y $table-header-padding-x;
-$table-header-background: var(
-  --#{root-defaults.$prefix}table-header-background,
-  #{color.$root-background}
-);
-$table-header-color: var(
-  --#{root-defaults.$prefix}table-header-color,
-  #{color.$root-color}
-);
-
-// Table cell properties.
-$table-cell-padding-x: var(
-  --#{root-defaults.$prefix}table-cell-padding-x,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-cell-padding-y: var(
-  --#{root-defaults.$prefix}table-cell-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$table-cell-padding: $table-cell-padding-y $table-cell-padding-x;
-$table-cell-background: var(
-  --#{root-defaults.$prefix}table-cell-background,
-  #{color.$root-background}
-);
-$table-cell-color: var(
-  --#{root-defaults.$prefix}table-cell-color,
-  #{color.$root-color}
-);
-
-// Table border properties.
-$table-border-width: var(
-  --#{root-defaults.$prefix}table-border-width,
-  #{root-variables.$border-width}
-);
-$table-border-style: var(
-  --#{root-defaults.$prefix}table-border-style,
-  #{root-variables.$border-style}
-);
-$table-border: var(
-  --#{root-defaults.$prefix}table-border,
-  #{$table-border-width} #{$table-border-style}
-);
-$table-border-color: var(
-  --#{root-defaults.$prefix}table-border-color,
-  #{theme.get(primary, 900)}
-);
-
-// Table cell border properties.
-$table-cell-border-width: var(
-  --#{root-defaults.$prefix}table-cell-border-width,
-  #{$table-border-width}
-);
-$table-cell-border-style: var(
-  --#{root-defaults.$prefix}table-cell-border-style,
-  #{$table-border-style}
-);
-$table-cell-border: var(
-  --#{root-defaults.$prefix}table-cell-border,
-  #{$table-cell-border-width} #{$table-cell-border-style}
-);
-$table-cell-border-color: var(
-  --#{root-defaults.$prefix}table-cell-border-color,
-  #{$table-border-color}
-);
-
-// Table striped properties.
-$table-striped-background: var(
-  --#{root-defaults.$prefix}table-striped-background,
-  #{theme.get(secondary, 200)}
-);
-$table-striped-color: var(
-  --#{root-defaults.$prefix}table-striped-color,
-  #{theme.get(secondary, 900)}
-);
-
-// Table hover properties.
-$table-hover-background: var(
-  --#{root-defaults.$prefix}table-hover-background,
-  #{theme.get(secondary, 300)}
-);
-$table-hover-color: var(
-  --#{root-defaults.$prefix}table-hover-color,
-  #{theme.get(secondary, 900)}
-);
-
-// Table highlight properties.
-$table-highlight-background: var(
-  --#{root-defaults.$prefix}table-highlight-background,
-  #{theme.get(secondary, 500)}
-);
-$table-highlight-color: var(
-  --#{root-defaults.$prefix}table-highlight-color,
-  #{theme.get(secondary, 100)}
-);

package/src/scss/component/_index.scss

@@ -1,9 +0,0 @@
-// @graupl/graupl component styles.
-
-@forward "alert";
-@forward "accordion";
-@forward "card";
-@forward "carousel";
-@forward "input-group";
-@forward "menu";
-@forward "navigation";

package/src/scss/component/accordion/_defaults.scss

@@ -1,40 +0,0 @@
-// @graupl/graupl accordion component default values.
-//
-// Generally, these should not be used directly when styling components 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 "sass:map";
-
-// Accordion selectors.
-$accordion-selector: ".accordion" !default;
-$accordion-item-selector: ".accordion-item" !default;
-$accordion-item-header-selector: ".accordion-item-header" !default;
-$accordion-item-title-selector: ".accordion-item-title" !default;
-$accordion-item-toggle-selector: ".accordion-item-toggle" !default;
-$accordion-item-content-selector: ".accordion-item-content" !default;
-$accordion-item-body-selector: ".accordion-item-body" !default;
-$accordion-item-footer-selector: ".accordion-item-footer" !default;
-$accordion-item-open-selector: ".show" !default;
-$accordion-item-close-selector: ".hide" !default;
-$accordion-item-transition-selector: ".transitioning" !default;
-$accordion-item-toggle-pseudo-selector: "::after" !default;
-
-// Toggle transform properties.
-$accordion-item-toggle-transform: none !default;
-$accordion-item-toggle-visited-transform: $accordion-item-toggle-transform !default;
-$accordion-item-toggle-focus-transform: $accordion-item-toggle-transform !default;
-$accordion-item-toggle-hover-transform: $accordion-item-toggle-transform !default;
-$accordion-item-toggle-active-transform: $accordion-item-toggle-transform !default;
-$accordion-item-toggle-disabled-transform: $accordion-item-toggle-transform !default;
-$accordion-item-toggle-pseudo-transform: none !default;
-$accordion-item-toggle-pseudo-open-transform: rotate(-180deg) !default;
-
-// Toggle properties.
-$accordion-item-toggle-pseudo-content: "▼" !default;
-
-// Accordion transform properties.
-$accordion-item-content-transform: translateY(-100%) !default;
-$accordion-item-content-open-transform: translateY(0) !default;