@graupl/graupl 1.0.0-alpha.10 → 1.0.0-alpha.12

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

@@ -1,33 +1,74 @@
-// Link base styles.
+// @gruapl/graupl link base styles.
 
+@use "defaults";
 @use "variables" as *;
+@use "../../defaults" as root-defaults;
 @use "../../mixins/layer" as *;
+@use "../../mixins/media-queries" as *;
 
 @include layer(base) {
-  a {
+  #{defaults.$link-selector} {
+    padding: $link-padding;
+    transform: $link-transform;
+    transition: $link-transition;
     text-decoration: $link-text-decoration;
     text-decoration-thickness: $link-text-decoration-thickness;
+
+    &: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-transform: #{$link-hover-transform};
+    }
+
+    &:active {
+      --#{root-defaults.$prefix}-link-transform: #{$link-active-transform};
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+    }
+  }
+
+  @include animation-off {
+    #{defaults.$link-selector} {
+      --#{root-defaults.$prefix}-link-transition: #{$link-transition-reduced-motion};
+    }
   }
 }
 
 @include layer(theme) {
-  a {
+  #{defaults.$link-selector} {
+    background: $link-background;
     color: $link-color;
 
     &:hover {
-      color: $link-hover-color;
+      --#{root-defaults.$prefix}-link-color: #{$link-hover-color};
+      --#{root-defaults.$prefix}-link-background: #{$link-hover-background};
     }
 
     &:active {
-      color: $link-active-color;
+      --#{root-defaults.$prefix}-link-color: #{$link-active-color};
+      --#{root-defaults.$prefix}-link-background: #{$link-active-background};
     }
 
+    // stylelint-disable no-descending-specificity
     &:visited {
-      color: $link-visited-color;
-
+      &,
       &:hover {
-        color: $link-hover-color;
+        --#{root-defaults.$prefix}-link-color: #{$link-visited-color};
+        --#{root-defaults.$prefix}-link-background: #{$link-visited-background};
+      }
+    }
+
+    &[disabled] {
+      &,
+      &:hover,
+      &:active,
+      &:visited {
+        --#{root-defaults.$prefix}-link-color: #{$link-disabled-color};
+        --#{root-defaults.$prefix}-link-background: #{$link-disabled-background};
       }
     }
+    // stylelint-enable no-descending-specificity
   }
 }

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

@@ -1,9 +1,13 @@
-// Variables referencing custom properties.
+// @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(
@@ -18,6 +22,14 @@ $link-color: var(
   --#{root-defaults.$prefix}-link-color,
   #{theme.get(primary, 700)}
 );
+$link-hover-text-decoration: var(
+  --#{root-defaults.$prefix}-link-hover-text-decoration,
+  #{defaults.$link-hover-text-decoration}
+);
+$link-hover-text-decoration-thickness: var(
+  --#{root-defaults.$prefix}-link-hover-text-decoration-thickness,
+  #{root-variables.$border-width}
+);
 $link-hover-color: var(
   --#{root-defaults.$prefix}-link-hover-color,
   #{theme.get(tertiary, 700)}
@@ -30,3 +42,59 @@ $link-visited-color: var(
   --#{root-defaults.$prefix}-link-visited-color,
   #{theme.get(primary, 700)}
 );
+$link-disabled-color: var(
+  --#{root-defaults.$prefix}-link-disabled-color,
+  #{theme.get(primary, 200)}
+);
+$link-background: var(--#{root-defaults.$prefix}-link-background, transparent);
+$link-hover-background: var(
+  --#{root-defaults.$prefix}-link-hover-background,
+  transparent
+);
+$link-active-background: var(
+  --#{root-defaults.$prefix}-link-active-background,
+  transparent
+);
+$link-visited-background: var(
+  --#{root-defaults.$prefix}-link-visited-background,
+  transparent
+);
+$link-disabled-background: var(
+  --#{root-defaults.$prefix}-link-disabled-background,
+  transparent
+);
+$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-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}
+);

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

@@ -1,8 +1,53 @@
-// Default values for Graupl.
+// @graupl/graupl table base default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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,27 +1,123 @@
-// Table base styles.
+// @gruapl/graupl table base styles.
 
+@use "defaults";
 @use "variables" as *;
 @use "../../mixins/layer" as *;
+@use "../../defaults" as root-defaults;
+@use "../../functions/theme";
 
 @include layer(base) {
-  table {
-    caption {
+  #{defaults.$table-selector} {
+    #{defaults.$table-caption-selector} {
       padding: $table-caption-padding;
       caption-side: $table-caption-side;
     }
 
-    th {
+    #{defaults.$table-header-selector} {
       padding: $table-header-padding;
-      background: $table-header-background;
-      color: $table-header-color;
       font-weight: $table-header-font-weight;
     }
 
-    td,
-    tbody th {
+    #{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-width: $table-border-width;
+      border-style: $table-border-style;
+
+      #{defaults.$table-row-selector} > * {
+        border-width: $table-cell-border-width;
+        border-style: $table-cell-border-style;
+      }
+    }
+  }
+
+  #{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,10 +1,14 @@
-// Variables referencing custom properties.
+// @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 "../../functions/theme" as theme;
+@use "../../theme/color/variables" as color;
+@use "../../functions/theme";
 @use "sass:map";
 
 // Table caption properties.
@@ -38,11 +42,11 @@ $table-header-padding-y: var(
 $table-header-padding: $table-header-padding-y $table-header-padding-x;
 $table-header-background: var(
   --#{root-defaults.$prefix}-table-header-background,
-  #{theme.get(primary, 100)}
+  #{color.$root-background}
 );
 $table-header-color: var(
   --#{root-defaults.$prefix}-table-header-color,
-  #{theme.get(primary, 900)}
+  #{color.$root-color}
 );
 
 // Table cell properties.
@@ -57,9 +61,67 @@ $table-cell-padding-y: var(
 $table-cell-padding: $table-cell-padding-y $table-cell-padding-x;
 $table-cell-background: var(
   --#{root-defaults.$prefix}-table-cell-background,
-  #{theme.get(primary, 100)}
+  #{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-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-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,5 +1,3 @@
-// Graupl components.
+// @gruapl/graupl component styles.
 
-@forward "button";
 @forward "input-group";
-@forward "table";

package/src/scss/component/input-group/_defaults.scss

@@ -1,8 +1,15 @@
-// Default values for Graupl.
+// @graupl/graupl input group component default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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.
+
+// Input group selectors.
+$input-group-selector: ".input-group" !default;
+$input-group-inline-selector: ".inline" !default;
+$input-group-help-text-selector: ".help-text" !default;
 
 // Grid names.
 $input-group-grid-label-name: label !default;

package/src/scss/component/input-group/_index.scss

@@ -1,12 +1,14 @@
-// Graupl Input group Component.
+// @gruapl/graupl input group component styles.
 
+@use "defaults";
+@use "../../base/form/defaults" as form-defaults;
 @use "variables" as *;
 @use "../../mixins/layer" as *;
 @use "../../mixins/media-queries" as *;
 
 // stylelint-disable declaration-block-no-redundant-longhand-properties
 @include layer(component) {
-  .input-group {
+  #{defaults.$input-group-selector} {
     display: grid;
     grid-template-areas: $input-group-grid-template-areas;
     grid-template-columns: $input-group-grid-template-columns;
@@ -14,21 +16,21 @@
     align-items: center;
     gap: $input-group-gap;
 
-    label {
+    #{form-defaults.$label-selector} {
       grid-area: $input-group-label-grid-area;
     }
 
-    input,
-    textarea,
-    select {
+    #{form-defaults.$input-selector},
+    #{form-defaults.$textarea-selector},
+    #{form-defaults.$select-selector} {
       grid-area: $input-group-input-grid-area;
     }
 
-    .help-text {
+    #{defaults.$input-group-help-text-selector} {
       grid-area: $input-group-help-grid-area;
     }
 
-    &.inline {
+    &#{defaults.$input-group-inline-selector} {
       grid-template-areas: $input-group-inline-grid-template-areas;
       grid-template-columns: $input-group-inline-grid-template-columns;
       grid-template-rows: $input-group-inline-grid-template-rows;
@@ -36,7 +38,7 @@
   }
 
   @include screen(xs) {
-    .input-group.inline {
+    #{defaults.$input-group-selector}#{defaults.$input-group-inline-selector} {
       grid-template-areas: $input-group-grid-template-areas;
       grid-template-columns: $input-group-grid-template-columns;
       grid-template-rows: $input-group-grid-template-rows;

package/src/scss/component/input-group/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl input group component variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @use "defaults";
 @use "../../defaults" as root-defaults;

package/src/scss/functions/_important.scss

@@ -1,3 +1,5 @@
+// @graupl/graupl important functions.
+//
 // A function to determine if the !important flag should be added to a property.
 
 @use "../defaults";

package/src/scss/functions/_theme.scss

@@ -1,3 +1,5 @@
+// @graupl/graupl theme functions.
+//
 // Functions to help with getting information about the theme.
 
 @use "sass:map";

package/src/scss/layout/_index.scss

@@ -1,4 +1,4 @@
-// Graupl layouts.
+// @gruapl/graupl layout styles.
 
 @forward "container";
 @forward "columns";

package/src/scss/layout/columns/_defaults.scss

@@ -1,9 +1,17 @@
-// Default values for Graupl.
+// @graupl/graupl columns layout default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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.
+
+// Columns selectors.
+$columns-selector: ".columns" !default;
+$columns-count-selector-prefix: ".count-" !default;
+$columns-span-selector-prefix: ".span-" !default;
 
+// Columns properties.
 $columns-max-width: 1fr !default;
 $columns-count: 3 !default;
 $columns-min-count: 1 !default;

package/src/scss/layout/columns/_index.scss

@@ -1,4 +1,4 @@
-// Graupl Columns layout.
+// @gruapl/graupl columns layout styles.
 
 @use "variables" as *;
 @use "defaults";
@@ -7,7 +7,7 @@
 @use "../../mixins/media-queries" as *;
 
 @include layer(layout) {
-  .columns {
+  #{defaults.$columns-selector} {
     display: grid;
     grid-template-columns: $columns-grid-template-columns;
     gap: $columns-row-gap $columns-column-gap;
@@ -18,18 +18,18 @@
   }
 
   @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
-    .count-#{$i} {
+    #{defaults.$columns-count-selector-prefix}#{$i} {
       --#{root-defaults.$prefix}-columns-count: #{$i};
     }
 
-    .span-#{$i} {
+    #{defaults.$columns-span-selector-prefix}#{$i} {
       --#{root-defaults.$prefix}-columns-span: #{$i};
     }
   }
 
   // Disable columns on small screens to avoid horizontal bleeding.
   @include screen(xs) {
-    .columns {
+    #{defaults.$columns-selector} {
       --#{root-defaults.$prefix}-columns-min-width: #{defaults.$columns-max-width};
     }
   }

package/src/scss/layout/columns/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl columns layout variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @use "defaults";
 @use "../../variables" as root-variables;

package/src/scss/layout/container/_defaults.scss

@@ -1,8 +1,17 @@
-// Default values for Graupl.
+// @graupl/graupl container layout default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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.
+
+// Container selectors.
+$container-selector: ".container" !default;
+$container-breakout-selector: ".breakout" !default;
+$container-feature-selector: ".feature" !default;
+$container-full-width-selector: ".full-width" !default;
 
+// Container properties.
 $container-breakout-width: 15ch !default;
 $container-feature-width: 20ch !default;