Move base URL to root; Update based on Sass compiler messages

TangibleInc · Oct 7, 2024 · b2260fe · b2260fe
1 parent 5f79666
commit b2260fe
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 45 deletions.
diff --git a/core-global.ts b/core-global.ts
@@ -1,8 +1,9 @@
 import { create } from './index'
 
 const design = create({
-  // data- attributes are still prefixed
   classPrefix: '',
+  // data- attributes are still prefixed
+  dataPrefix: 't-',
   components: {},
 })
 

diff --git a/core-prefixed.ts b/core-prefixed.ts
@@ -1,6 +1,8 @@
 import { create } from './index'
 
 const design = create({
+  classPrefix: 't-',
+  dataPrefix: 't-',
   components: {},
 })
 

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -14,7 +14,7 @@ const config: Config = {
 
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: '/design/',
+  baseUrl: '/',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.

diff --git a/functions.scss b/functions.scss
@@ -1,3 +1,6 @@
+@use 'sass:color';
+@use 'sass:math';
+
 // Utility mixins and functions for evaluating source code across variables, maps, and mixins.
 
 // Ascending
@@ -6,7 +9,7 @@
   $prev-key: null;
   $prev-num: null;
   @each $key, $num in $map {
-    @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
+    @if $prev-num == null or unit($num) == '%' or unit($prev-num) == '%' {
       // Do nothing
     } @else if not comparable($prev-num, $num) {
       @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@@ -20,7 +23,7 @@
 
 // Starts at zero
 // Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
   @if length($map) > 0 {
     $values: map-values($map);
     $first-value: nth($values, 1);
@@ -31,18 +34,31 @@
 }
 
 // Colors
-@function to-rgb($value) {
-  @return red($value), green($value), blue($value);
+@function to-rgb($color) {
+  @return red($color), green($color), blue($color);
+  // @return color.channel($color, 'red', $space: rgb),
+  //   color.channel($color, 'green', $space: rgb),
+  //   color.channel($color, 'blue', $space: rgb);
 }
 
 // stylelint-disable scss/dollar-variable-pattern
 @function rgba-css-var($identifier, $target) {
-  @if $identifier == "body" and $target == "bg" {
-    @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
-  } @if $identifier == "body" and $target == "text" {
-    @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
+  @if $identifier == 'body' and $target == 'bg' {
+    @return rgba(
+      var(--#{$prefix}#{$identifier}-bg-rgb),
+      var(--#{$prefix}#{$target}-opacity)
+    );
+  }
+  @if $identifier == 'body' and $target == 'text' {
+    @return rgba(
+      var(--#{$prefix}#{$identifier}-color-rgb),
+      var(--#{$prefix}#{$target}-opacity)
+    );
   } @else {
-    @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
+    @return rgba(
+      var(--#{$prefix}#{$identifier}-rgb),
+      var(--#{$prefix}#{$target}-opacity)
+    );
   }
 }
 
@@ -53,10 +69,18 @@
     // allow to pass the $key and $value of the map as an function argument
     $_args: ();
     @each $arg in $args {
-      $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
+      $_args: append(
+        $_args,
+        if($arg == '$key', $key, if($arg == '$value', $value, $arg))
+      );
     }
 
-    $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
+    $_map: map-merge(
+      $_map,
+      (
+        $key: call(get-function($func), $_args...),
+      )
+    );
   }
 
   @return $_map;
@@ -77,7 +101,7 @@
   $result: ();
   @each $key, $value in $map {
     @if $key != 0 {
-      $result: map-merge($result, ("n" + $key: (-$value)));
+      $result: map-merge($result, ('n' + $key: (-$value)));
     }
   }
   @return $result;
@@ -88,7 +112,12 @@
   $result: ();
   @each $key, $value in $map {
     @if (index($values, $key) != null) {
-      $result: map-merge($result, ($key: $value));
+      $result: map-merge(
+        $result,
+        (
+          $key: $value,
+        )
+      );
     }
   }
   @return $result;
@@ -112,11 +141,16 @@
 // @param {String} $search - Substring to replace
 // @param {String} $replace ('') - New value
 // @return {String} - Updated string
-@function str-replace($string, $search, $replace: "") {
+@function str-replace($string, $search, $replace: '') {
   $index: str-index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
   }
 
   @return $string;
@@ -127,11 +161,11 @@
 // Requires the use of quotes around data URIs.
 
 @function escape-svg($string) {
-  @if str-index($string, "data:image/svg+xml") {
+  @if str-index($string, 'data:image/svg+xml') {
     @each $char, $encoded in $escaped-characters {
       // Do not escape the url brackets
-      @if str-index($string, "url(") == 1 {
-        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      @if str-index($string, 'url(') == 1 {
+        $string: url('#{str-replace(str-slice($string, 6, -3), $char, $encoded)}');
       } @else {
         $string: str-replace($string, $char, $encoded);
       }
@@ -146,9 +180,37 @@
 
 // A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
 // stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
-$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
-
-@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
+$_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025
+  0.0027 0.003 0.0033 0.0037 0.004 0.0044 0.0048 0.0052 0.0056 0.006 0.0065
+  0.007 0.0075 0.008 0.0086 0.0091 0.0097 0.0103 0.011 0.0116 0.0123 0.013
+  0.0137 0.0144 0.0152 0.016 0.0168 0.0176 0.0185 0.0194 0.0203 0.0212 0.0222
+  0.0232 0.0242 0.0252 0.0262 0.0273 0.0284 0.0296 0.0307 0.0319 0.0331 0.0343
+  0.0356 0.0369 0.0382 0.0395 0.0409 0.0423 0.0437 0.0452 0.0467 0.0482 0.0497
+  0.0513 0.0529 0.0545 0.0561 0.0578 0.0595 0.0612 0.063 0.0648 0.0666 0.0685
+  0.0704 0.0723 0.0742 0.0762 0.0782 0.0802 0.0823 0.0844 0.0865 0.0887 0.0908
+  0.0931 0.0953 0.0976 0.0999 0.1022 0.1046 0.107 0.1095 0.1119 0.1144 0.117
+  0.1195 0.1221 0.1248 0.1274 0.1301 0.1329 0.1356 0.1384 0.1413 0.1441 0.147
+  0.15 0.1529 0.1559 0.159 0.162 0.1651 0.1683 0.1714 0.1746 0.1779 0.1812
+  0.1845 0.1878 0.1912 0.1946 0.1981 0.2016 0.2051 0.2086 0.2122 0.2159 0.2195
+  0.2232 0.227 0.2307 0.2346 0.2384 0.2423 0.2462 0.2502 0.2542 0.2582 0.2623
+  0.2664 0.2705 0.2747 0.2789 0.2831 0.2874 0.2918 0.2961 0.3005 0.305 0.3095
+  0.314 0.3185 0.3231 0.3278 0.3325 0.3372 0.3419 0.3467 0.3515 0.3564 0.3613
+  0.3663 0.3712 0.3763 0.3813 0.3864 0.3916 0.3968 0.402 0.4072 0.4125 0.4179
+  0.4233 0.4287 0.4342 0.4397 0.4452 0.4508 0.4564 0.4621 0.4678 0.4735 0.4793
+  0.4851 0.491 0.4969 0.5029 0.5089 0.5149 0.521 0.5271 0.5333 0.5395 0.5457
+  0.552 0.5583 0.5647 0.5711 0.5776 0.5841 0.5906 0.5972 0.6038 0.6105 0.6172
+  0.624 0.6308 0.6376 0.6445 0.6514 0.6584 0.6654 0.6724 0.6795 0.6867 0.6939
+  0.7011 0.7084 0.7157 0.7231 0.7305 0.7379 0.7454 0.7529 0.7605 0.7682 0.7758
+  0.7835 0.7913 0.7991 0.807 0.8148 0.8228 0.8308 0.8388 0.8469 0.855 0.8632
+  0.8714 0.8796 0.8879 0.8963 0.9047 0.9131 0.9216 0.9301 0.9387 0.9473 0.956
+  0.9647 0.9734 0.9823 0.9911 1;
+
+@function color-contrast(
+  $background,
+  $color-contrast-dark: $color-contrast-dark,
+  $color-contrast-light: $color-contrast-light,
+  $min-contrast-ratio: $min-contrast-ratio
+) {
   $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
   $max-ratio: 0;
   $max-ratio-color: null;
@@ -172,25 +234,46 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   $l1: luminance($background);
   $l2: luminance(opaque($background, $foreground));
 
-  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+  @return if(
+    $l1 > $l2,
+    divide($l1 + 0.05, $l2 + 0.05),
+    divide($l2 + 0.05, $l1 + 0.05)
+  );
 }
 
 // Return WCAG2.2 relative luminance
 // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
 @function luminance($color) {
   $rgb: (
-    "r": red($color),
-    "g": green($color),
-    "b": blue($color)
+    'r': red($color),
+    // color.channel($color, "red", $space: rgb),
+    'g': green($color),
+    // color.channel($color, "green", $space: rgb),
+    'b': blue($color),
+    // color.channel($color, "blue", $space: rgb),
   );
 
   @each $name, $value in $rgb {
-    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
-    $rgb: map-merge($rgb, ($name: $value));
+    $value: if(
+      divide($value, 255) < 0.04045,
+      divide(divide($value, 255), 12.92),
+      nth(
+        $_luminance-list,
+        math.round($value + 1)
+          // Integer expected
+      )
+    );
+    $rgb: map-merge(
+      $rgb,
+      (
+        $name: $value,
+      )
+    );
   }
 
-  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+  @return (map-get($rgb, 'r') * 0.2126) + (map-get($rgb, 'g') * 0.7152) +
+    (map-get($rgb, 'b') * 0.0722);
 }
 
 // Return opaque color
@@ -212,7 +295,11 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 
 // Shade the color if the weight is positive, else tint it
 @function shift-color($color, $weight) {
-  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+  @return if(
+    $weight > 0,
+    shade-color($color, $weight),
+    tint-color($color, -$weight)
+  );
 }
 // scss-docs-end color-functions
 
@@ -226,11 +313,20 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if type-of($value1) ==
+    number and
+    type-of($value2) ==
+    number and
+    comparable($value1, $value2)
+  {
     @return $value1 + $value2;
   }
 
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
+  @return if(
+    $return-calc == true,
+    calc(#{$value1} + #{$value2}),
+    $value1 + unquote(' + ') + $value2
+  );
 }
 
 @function subtract($value1, $value2, $return-calc: true) {
@@ -246,19 +342,32 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if type-of($value1) ==
+    number and
+    type-of($value2) ==
+    number and
+    comparable($value1, $value2)
+  {
     @return $value1 - $value2;
   }
 
   @if type-of($value2) != number {
-    $value2: unquote("(") + $value2 + unquote(")");
+    $value2: unquote('(') + $value2 + unquote(')');
   }
 
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+  @return if(
+    $return-calc == true,
+    calc(#{$value1} - #{$value2}),
+    $value1 + unquote(' - ') + $value2
+  );
 }
 
 @function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $sign: if(
+    $dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0,
+    1,
+    -1
+  );
   $dividend: abs($dividend);
   $divisor: abs($divisor);
   @if $dividend == 0 {
@@ -277,7 +386,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
       $quotient: $quotient + 1;
     }
     $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
+    $factor: $factor * 0.1;
     $remainder: $remainder * 10;
     $precision: $precision - 1;
     @if ($precision < 0 and $remainder >= $divisor * 5) {
@@ -288,12 +397,14 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   $dividend-unit: unit($dividend);
   $divisor-unit: unit($divisor);
   $unit-map: (
-    "px": 1px,
-    "rem": 1rem,
-    "em": 1em,
-    "%": 1%
+    'px': 1px,
+    'rem': 1rem,
+    'em': 1em,
+    '%': 1%,
   );
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+  @if (
+    $dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)
+  ) {
     $result: $result * map-get($unit-map, $dividend-unit);
   }
   @return $result;

diff --git a/index.ts b/index.ts
@@ -88,9 +88,8 @@ export type ComponentCreator = (
  * prefix for HTML data attributes.
  */
 export function create({
+  classPrefix: CLASS_PREFIX = 't-', // Or '' for no prefix
   dataPrefix: DATA_PREFIX = 't-',
-  dataPrefixBase: DATA_PREFIX_BASE = 't',
-  classPrefix: CLASS_PREFIX = 't-', // Or '' for global with no prefix
   components = {},
 }: {
   dataPrefix?: string
@@ -100,6 +99,9 @@ export function create({
     [name: string]: ComponentCreator
   }
 }) {
+
+  const DATA_PREFIX_BASE = DATA_PREFIX.slice(0, -1)
+
   const Manipulator = createManipulator({
     DATA_PREFIX,
     DATA_PREFIX_BASE,