@graupl/core 1.0.0-beta.17 → 1.0.0-beta.19

package/src/scss/functions/_theme.scss

@@ -5,7 +5,19 @@
 @use "sass:map";
 @use "../theme/color/variables" as color;
 
-// A function to get the specific theme shades.
+/// Get a specific color shade in a specific theme.
+///
+/// $color and $shade both have special values for returning specific colours.
+/// "transparent", "none", "inherit", and "initial" will all return their respective
+/// default CSS values.
+///
+/// If a shade cannot be found in a requested colour, it will fall back to the `_default` shade before returning `null`.
+///
+/// @param {string}        $color          - The color.
+/// @param {string|number} $shade [null]   - The shade.
+/// @param {string}        $theme [active] - The theme.
+///
+/// @return {string|null} The custom property pointing to the correct colour or null if none is found.
 @function get($color, $shade: null, $theme: active) {
   @if $shade == transparent or $color == transparent {
     @return transparent;
@@ -34,6 +46,12 @@
   @return null;
 }
 
+/// Gets a full shade map of a specific color in a specific theme.
+///
+/// @param {string} $color          - The color.
+/// @param {string} $theme [active] - The theme.
+///
+/// @return {map|null} The shade map or null if none is found.
 @function get-color($color, $theme: active) {
   @if map.has-key(color.$themes, $theme, $color) {
     @return map.get(map.get(color.$themes, $theme), $color);
@@ -42,6 +60,11 @@
   @return null;
 }
 
+/// Gets the names of all colours in a specific theme.
+///
+/// @param {string} $theme [active] - The theme.
+///
+/// @return {map} The map of color names.
 @function get-colors($theme: active) {
   @if map.has-key(color.$themes, $theme) {
     @return map.keys(map.get(color.$themes, $theme));
@@ -49,3 +72,33 @@
 
   @return ();
 }
+
+/// Generates a map to tie different properties to color/shade values based on all colors in a specific theme.
+@function generate-property-map($mapping, $theme: active) {
+  $theme-map: ();
+
+  @each $color in map.keys(map.get(color.$themes, $theme)) {
+    $map: ();
+
+    @each $prop, $shade in $mapping {
+      $map: map.merge(
+        $map,
+        (
+          $prop: (
+              color: $color,
+              shade: $shade,
+            ),
+        )
+      );
+    }
+
+    $theme-map: map.merge(
+      $theme-map,
+      (
+        $color: $map,
+      )
+    );
+  }
+
+  @return $theme-map;
+}

package/src/scss/utilities/border/_index.scss

@@ -103,6 +103,8 @@
 //   <div class="bordered">This element has a border.</div>
 
 @use "../../defaults" as root-defaults;
+@use "../../base/table/defaults" as table-defaults;
+@use "../../base/table/variables" as table-variables;
 @use "../../functions/important";
 @use "../../mixins/layer" as *;
 @use "../../mixins/screen";
@@ -138,6 +140,23 @@
     $important: defaults.$use-important
   );
 
+  // Checks to see if the table.bordered is already in place, then gives the tables variables instead.
+  /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+  @if #{table-defaults.$table-bordered-selector-base}#{table-defaults.$table-bordered-selector} ==
+    $selector
+  {
+    /* stylelint-enable  scss/operator-no-newline-after */
+    @include utility.create-mapped(
+      #{table-defaults.$table-selector-base}#{table-defaults.$table-selector}#{$selector},
+      (
+        border-width: table-variables.$table-border-width,
+        border-radius: table-variables.$table-border-radius,
+        border-style: table-variables.$table-border-style,
+      ),
+      $important: defaults.$use-important
+    );
+  }
+
   // For each border width, create a class to apply the border width.
   @each $width, $value in defaults.$border-width-properties {
     // e.g. `.border-thick` or `.border-thin`
@@ -222,6 +241,24 @@
         $screen: $screen-name
       );
 
+      // Checks to see if the table.bordered is already in place, then gives the tables variables instead.
+      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+      @if #{table-defaults.$table-bordered-selector-base}#{table-defaults.$table-bordered-selector} ==
+        #{defaults.$selector-base}#{defaults.$default-border-selector}
+      {
+        /* stylelint-enable  scss/operator-no-newline-after */
+        @include utility.create-mapped(
+          #{table-defaults.$table-selector-base}#{table-defaults.$table-selector}#{$selector},
+          (
+            border-width: table-variables.$table-border-width,
+            border-radius: table-variables.$table-border-radius,
+            border-style: table-variables.$table-border-style,
+          ),
+          $important: defaults.$use-important,
+          $screen: $screen-name
+        );
+      }
+
       // For each border width, create a class to apply the border width.
       @each $width, $value in defaults.$border-width-properties {
         // e.g. `.md:border-thick` or `.lg:border-thin`
@@ -313,6 +350,24 @@
           $theme: $theme-name
         );
 
+        // Checks to see if the table.bordered is already in place, then gives the tables variables instead.
+        /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+        @if #{table-defaults.$table-bordered-selector-base}#{table-defaults.$table-bordered-selector} ==
+          #{defaults.$selector-base}#{defaults.$default-border-selector}
+        {
+          /* stylelint-enable  scss/operator-no-newline-after */
+          @include utility.create-mapped(
+            #{table-defaults.$table-selector-base}#{table-defaults.$table-selector}#{$selector},
+            (
+              border-width: table-variables.$table-border-width,
+              border-radius: table-variables.$table-border-radius,
+              border-style: table-variables.$table-border-style,
+            ),
+            $important: defaults.$use-important,
+            $theme: $theme-name
+          );
+        }
+
         // For each border width, create a class to apply the border width.
         @each $width, $value in defaults.$border-width-properties {
           // e.g. `.dark:border-thick` or `.light:border-thin`
@@ -404,6 +459,24 @@
         $state: $state-name
       );
 
+      // Checks to see if the table.bordered is already in place, then gives the tables variables instead.
+      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+      @if #{table-defaults.$table-bordered-selector-base}#{table-defaults.$table-bordered-selector} ==
+        #{defaults.$selector-base}#{defaults.$default-border-selector}
+      {
+        /* stylelint-enable  scss/operator-no-newline-after */
+        @include utility.create-mapped(
+          #{table-defaults.$table-selector-base}#{table-defaults.$table-selector}#{$selector},
+          (
+            border-width: table-variables.$table-border-width,
+            border-radius: table-variables.$table-border-radius,
+            border-style: table-variables.$table-border-style,
+          ),
+          $important: defaults.$use-important,
+          $state: $state-name
+        );
+      }
+
       // For each border width, create a class to apply the border width.
       @each $width, $value in defaults.$border-width-properties {
         // e.g. `.hover:border-thick` or `.focus:border-thin`
@@ -494,6 +567,24 @@
         $container: $container-name
       );
 
+      // Checks to see if the table.bordered is already in place, then gives the tables variables instead.
+      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+      @if #{table-defaults.$table-bordered-selector-base}#{table-defaults.$table-bordered-selector} ==
+        #{defaults.$selector-base}#{defaults.$default-border-selector}
+      {
+        /* stylelint-enable  scss/operator-no-newline-after */
+        @include utility.create-mapped(
+          #{table-defaults.$table-selector-base}#{table-defaults.$table-selector}#{$selector},
+          (
+            border-width: table-variables.$table-border-width,
+            border-radius: table-variables.$table-border-radius,
+            border-style: table-variables.$table-border-style,
+          ),
+          $important: defaults.$use-important,
+          $container: $container-name
+        );
+      }
+
       // For each border width, create a class to apply the border width.
       @each $width, $value in defaults.$border-width-properties {
         // e.g. `.md:border-thick` or `.lg:border-thin`