@graupl/core 1.0.0-beta.10

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

@@ -0,0 +1,370 @@
+// @graupl/core 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-initial-text-decoration}
+);
+$link-visited-text-decoration: var(
+  --#{root-defaults.$prefix}link-visited-text-decoration,
+  #{$link-text-decoration}
+);
+$link-focus-text-decoration: var(
+  --#{root-defaults.$prefix}link-focus-text-decoration,
+  #{$link-text-decoration}
+);
+$link-hover-text-decoration: var(
+  --#{root-defaults.$prefix}link-hover-text-decoration,
+  #{defaults.$link-final-text-decoration}
+);
+$link-active-text-decoration: var(
+  --#{root-defaults.$prefix}link-active-text-decoration,
+  #{$link-hover-text-decoration}
+);
+$link-disabled-text-decoration: var(
+  --#{root-defaults.$prefix}link-disabled-text-decoration,
+  #{defaults.$link-disabled-text-decoration}
+);
+$link-text-decoration-states: (
+  default: $link-text-decoration,
+  visited: $link-visited-text-decoration,
+  focus: $link-focus-text-decoration,
+  hover: $link-hover-text-decoration,
+  active: $link-active-text-decoration,
+  disabled: $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,
+  #{$link-text-decoration-thickness}
+);
+$link-focus-text-decoration-thickness: var(
+  --#{root-defaults.$prefix}link-focus-text-decoration-thickness,
+  #{$link-text-decoration-thickness}
+);
+$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,
+  #{$link-hover-text-decoration-thickness}
+);
+$link-disabled-text-decoration-thickness: var(
+  --#{root-defaults.$prefix}link-disabled-text-decoration-thickness,
+  #{root-variables.$border-width}
+);
+$link-text-decoration-thickness-states: (
+  default: $link-text-decoration-thickness,
+  visited: $link-visited-text-decoration-thickness,
+  focus: $link-focus-text-decoration-thickness,
+  hover: $link-hover-text-decoration-thickness,
+  active: $link-active-text-decoration-thickness,
+  disabled: $link-disabled-text-decoration-thickness,
+);
+$link-text-decoration-style: var(
+  --#{root-defaults.$prefix}link-text-decoration-style,
+  #{defaults.$link-initial-text-decoration-style}
+);
+$link-visited-text-decoration-style: var(
+  --#{root-defaults.$prefix}link-visited-text-decoration-style,
+  #{$link-text-decoration-style}
+);
+$link-focus-text-decoration-style: var(
+  --#{root-defaults.$prefix}link-focus-text-decoration-style,
+  #{$link-text-decoration-style}
+);
+$link-hover-text-decoration-style: var(
+  --#{root-defaults.$prefix}link-hover-text-decoration-style,
+  #{defaults.$link-final-text-decoration-style}
+);
+$link-active-text-decoration-style: var(
+  --#{root-defaults.$prefix}link-active-text-decoration-style,
+  #{$link-hover-text-decoration-style}
+);
+$link-disabled-text-decoration-style: var(
+  --#{root-defaults.$prefix}link-disabled-text-decoration-style,
+  #{defaults.$link-disabled-text-decoration-style}
+);
+$link-text-decoration-style-states: (
+  default: $link-text-decoration-style,
+  visited: $link-visited-text-decoration-style,
+  focus: $link-focus-text-decoration-style,
+  hover: $link-hover-text-decoration-style,
+  active: $link-active-text-decoration-style,
+  disabled: $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,
+  #{$link-color}
+);
+$link-focus-color: var(
+  --#{root-defaults.$prefix}link-focus-color,
+  #{$link-color}
+);
+$link-hover-color: var(
+  --#{root-defaults.$prefix}link-hover-color,
+  #{theme.get(tertiary, 700)}
+);
+$link-active-color: var(
+  --#{root-defaults.$prefix}link-active-color,
+  #{$link-hover-color}
+);
+$link-disabled-color: var(
+  --#{root-defaults.$prefix}link-disabled-color,
+  #{theme.get(primary, 200)}
+);
+$link-color-states: (
+  default: $link-color,
+  visited: $link-visited-color,
+  focus: $link-focus-color,
+  hover: $link-hover-color,
+  active: $link-active-color,
+  disabled: $link-disabled-color,
+);
+$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-text-decoration-color-states: (
+  default: $link-text-decoration-color,
+  visited: $link-visited-text-decoration-color,
+  focus: $link-focus-text-decoration-color,
+  hover: $link-hover-text-decoration-color,
+  active: $link-active-text-decoration-color,
+  disabled: $link-disabled-text-decoration-color,
+);
+$link-background: var(
+  --#{root-defaults.$prefix}link-background,
+  #{theme.get(transparent)}
+);
+$link-visited-background: var(
+  --#{root-defaults.$prefix}link-visited-background,
+  #{$link-background}
+);
+$link-focus-background: var(
+  --#{root-defaults.$prefix}link-focus-background,
+  #{$link-background}
+);
+$link-hover-background: var(
+  --#{root-defaults.$prefix}link-hover-background,
+  #{theme.get(transparent)}
+);
+$link-active-background: var(
+  --#{root-defaults.$prefix}link-active-background,
+  #{$link-hover-background}
+);
+$link-disabled-background: var(
+  --#{root-defaults.$prefix}link-disabled-background,
+  #{theme.get(transparent)}
+);
+$link-background-states: (
+  default: $link-background,
+  visited: $link-visited-background,
+  focus: $link-focus-background,
+  hover: $link-hover-background,
+  active: $link-active-background,
+  disabled: $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-initial-transform}
+);
+$link-visited-transform: var(
+  --#{root-defaults.$prefix}link-visited-transform,
+  #{$link-transform}
+);
+$link-focus-transform: var(
+  --#{root-defaults.$prefix}link-focus-transform,
+  #{$link-transform}
+);
+$link-hover-transform: var(
+  --#{root-defaults.$prefix}link-hover-transform,
+  #{defaults.$link-final-transform}
+);
+$link-active-transform: var(
+  --#{root-defaults.$prefix}link-active-transform,
+  #{$link-hover-transform}
+);
+$link-disabled-transform: var(
+  --#{root-defaults.$prefix}link-disabled-transform,
+  #{defaults.$link-disabled-transform}
+);
+$link-transform-states: (
+  default: $link-transform,
+  visited: $link-visited-transform,
+  focus: $link-focus-transform,
+  hover: $link-hover-transform,
+  active: $link-active-transform,
+  disabled: $link-disabled-transform,
+);
+$link-border-top-width: var(--#{root-defaults.$prefix}link-border-top-width, 0);
+$link-border-right-width: var(
+  --#{root-defaults.$prefix}link-border-right-width,
+  0
+);
+$link-border-bottom-width: var(
+  --#{root-defaults.$prefix}link-border-bottom-width,
+  0
+);
+$link-border-left-width: var(
+  --#{root-defaults.$prefix}link-border-left-width,
+  0
+);
+$link-border-width: var(
+  --#{root-defaults.$prefix}link-border-width,
+  #{$link-border-top-width} #{$link-border-right-width}
+    #{$link-border-bottom-width} #{$link-border-left-width}
+);
+$link-border-top-style: var(
+  --#{root-defaults.$prefix}link-border-top-style,
+  #{root-variables.$border-top-style}
+);
+$link-border-right-style: var(
+  --#{root-defaults.$prefix}link-border-right-style,
+  #{root-variables.$border-right-style}
+);
+$link-border-bottom-style: var(
+  --#{root-defaults.$prefix}link-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$link-border-left-style: var(
+  --#{root-defaults.$prefix}link-border-left-style,
+  #{root-variables.$border-left-style}
+);
+$link-border-style: var(
+  --#{root-defaults.$prefix}link-border-style,
+  #{$link-border-top-style} #{$link-border-right-style}
+    #{$link-border-bottom-style} #{$link-border-left-style}
+);
+$link-border-top-left-radius: var(
+  --#{root-defaults.$prefix}link-border-top-left-radius,
+  #{root-variables.$border-top-left-radius}
+);
+$link-border-top-right-radius: var(
+  --#{root-defaults.$prefix}link-border-top-right-radius,
+  #{root-variables.$border-top-right-radius}
+);
+$link-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}link-border-bottom-right-radius,
+  #{root-variables.$border-bottom-right-radius}
+);
+$link-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}link-border-bottom-left-radius,
+  #{root-variables.$border-bottom-left-radius}
+);
+$link-border-radius: var(
+  --#{root-defaults.$prefix}link-border-radius,
+  #{$link-border-top-left-radius} #{$link-border-top-right-radius}
+    #{$link-border-bottom-right-radius} #{$link-border-bottom-left-radius}
+);
+$link-border-color: var(
+  --#{root-defaults.$prefix}link-border-color,
+  #{theme.get(transparent)}
+);
+$link-visited-border-color: var(
+  --#{root-defaults.$prefix}link-visited-border-color,
+  #{$link-border-color}
+);
+$link-focus-border-color: var(
+  --#{root-defaults.$prefix}link-focus-border-color,
+  #{$link-border-color}
+);
+$link-hover-border-color: var(
+  --#{root-defaults.$prefix}link-hover-border-color,
+  #{theme.get(transparent)}
+);
+$link-active-border-color: var(
+  --#{root-defaults.$prefix}link-active-border-color,
+  #{$link-hover-border-color}
+);
+$link-disabled-border-color: var(
+  --#{root-defaults.$prefix}link-disabled-border-color,
+  #{theme.get(transparent)}
+);
+$link-border-color-states: (
+  default: $link-border-color,
+  visited: $link-visited-border-color,
+  focus: $link-focus-border-color,
+  hover: $link-hover-border-color,
+  active: $link-active-border-color,
+  disabled: $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

@@ -0,0 +1,68 @@
+// @graupl/core 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";
+@use "../../defaults" as root-defaults;
+
+// Table selectors.
+$selector-base: root-defaults.$element-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$table-selector-base: $selector-base !default;
+$table-selector: "table" !default;
+$table-caption-selector-base: $selector-base !default;
+$table-caption-selector: "caption" !default;
+$table-header-selector-base: $selector-base !default;
+$table-header-selector: "th" !default;
+$table-cell-selector-base: $selector-base !default;
+$table-cell-selector: "td" !default;
+$table-row-selector-base: $selector-base !default;
+$table-row-selector: "tr" !default;
+$table-body-selector-base: $selector-base !default;
+$table-body-selector: "tbody" !default;
+$table-theme-prefix-selector-base: $modifier-selector-base !default;
+$table-theme-prefix-selector: "" !default;
+$table-bordered-selector-base: $modifier-selector-base !default;
+$table-bordered-selector: "bordered" !default;
+$table-collapsed-selector-base: $modifier-selector-base !default;
+$table-collapsed-selector: "collapsed" !default;
+$table-striped-columns-selector-base: $modifier-selector-base !default;
+$table-striped-columns-selector: "striped-columns" !default;
+$table-striped-rows-selector-base: $modifier-selector-base !default;
+$table-striped-rows-selector: "striped-rows" !default;
+$table-hoverable-selector-base: $modifier-selector-base !default;
+$table-hoverable-selector: "hoverable" !default;
+$table-highlight-selector-base: $modifier-selector-base !default;
+$table-highlight-selector: "highlight" !default;
+$table-responsive-selector-base: $modifier-selector-base !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);