stargazer-ui 1.2.0 → 1.2.1

package/src/styles/_functions.scss

@@ -0,0 +1,134 @@
+@use "sass:map";
+@use 'sass:color';
+@use 'sass:math';
+@use 'sass:list';
+@use 'sass:string';
+
+$color-contrast-dark: black !default;
+$color-contrast-light: white !default;
+$min-contrast-ratio:   4.5 !default;
+$_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) {
+    $foregrounds: $color-contrast-light, $color-contrast-dark, white, black;
+    $max-ratio: 0;
+    $max-ratio-color: null;
+  
+    @each $color in $foregrounds {
+      $contrast-ratio: contrast-ratio($background, $color);
+      @if $contrast-ratio > $min-contrast-ratio {
+        @return $color;        
+      } @else if $contrast-ratio > $max-ratio {
+        $max-ratio: $contrast-ratio;
+        $max-ratio-color: $color;
+      }
+    }
+  
+    @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+  
+    @return $max-ratio-color;
+  }
+  
+  @function contrast-ratio($background, $foreground: $color-contrast-light) {
+    $l1: luminance($background);
+    $l2: luminance(opaque($background, $foreground));
+    @if $l1 > $l2 {
+      $lum: math.div($l1 + .05, $l2 + .05);
+    }
+    @else {
+      $lum: math.div($l2 + .05, $l1 + .05);
+    }
+    @return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
+  }
+  
+  // Return WCAG2.1 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)
+    );
+  
+    @each $name, $value in $rgb {
+      $value: if(math.div($value, 255) < .03928, math.div(math.div($value, 255), 12.92), nth($_luminance-list, $value + 1));
+      $rgb: map-merge($rgb, ($name: $value));
+    }
+    
+    @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+  }
+  
+  // Return opaque color
+  // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+  @function opaque($background, $foreground) {
+    @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+}
+
+
+@function str-replace($string, $search, $replace: "") {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@function escape-svg($string) {
+  @if string.index($string, "data:image/svg+xml") {
+    @each $char, $encoded in $escaped-characters {
+      // Do not escape the url brackets
+      @if string.index($string, "url(") == 1 {
+        $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+
+  @return $string;
+}
+  
+
+@function hsb($h, $s, $b, $a: 1) {
+  $h-int: $h;//math.div($h, if(math.unit($h) == "", 1, 1*math.unit($h)) );
+  $s-int: math.div($s, if(math.unit($s) == "", 1, $s * 0 + 1 ) );
+  $b-int: math.div($b, if(math.unit($b) == "", 1, $b * 0 + 1 ) );
+  @if $b-int == 0 {
+    @return hsla(0, 0 * 1%, 0 * 1%, $a)
+  } @else {
+    $l-hsl: calc( ($b-int/2) * (2 - ($s-int /(100))) );
+    $s-hsl: math.div( ($b-int * $s-int), if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2) );
+    @return hsla($h-int, calc($s-hsl * 1%), calc($l-hsl * 1%), $a);
+  }
+}
+@function shade-creator($color) {
+  $h-int: color.hue($color);
+
+  $s-int: color.saturation($color);
+  $s-max: calc(100 * 1%);
+  $s-min: calc(7 * 1%);
+  $s-step-light: calc(($s-int - 7 * 1%)/4);
+  $s-step-dark: calc((100 * 1% - $s-int)/4);
+
+  $b-int: calc( (2 * color.lightness($color) / (2 - ($s-int/(100 * 1%)))) );
+  $b-max: calc(100 * 1%);
+  $b-min: calc(20 * 1%);
+  $b-step-light: calc(($b-int - 20 * 1%)/4);
+  $b-step-dark: calc((100 * 1% - $b-int)/4);
+
+  @return (
+    "100": hsb($h-int, $s-min, $b-max), 
+    "200": hsb($h-int, $s-min + $s-step-light, $b-max - $b-step-dark), 
+    "300": hsb($h-int, $s-min + 2*$s-step-light, $b-max - 2*$b-step-dark), 
+    "400": hsb($h-int, $s-min + 3*$s-step-light, $b-max - 3*$b-step-dark), 
+    "500": hsb($h-int, $s-int, $b-int), 
+    "600": hsb($h-int, $s-max - 3*$s-step-dark, $b-min + 3*$b-step-light), 
+    "700": hsb($h-int, $s-max - 2*$s-step-dark, $b-min + 2*$b-step-light), 
+    "800": hsb($h-int, $s-max - $s-step-dark, $b-min + $b-step-light), 
+    "900": hsb($h-int, $s-max, $b-min), 
+  );
+}

package/src/styles/_mixins.scss

@@ -0,0 +1,26 @@
+@mixin border-top-radius($radius: 0.375rem) {
+      border-top-left-radius: $radius;
+      border-top-right-radius: $radius;
+  }
+  
+@mixin border-end-radius($radius: 0.375rem) {
+      border-top-right-radius: $radius;
+      border-bottom-right-radius: $radius;
+}
+  
+@mixin border-bottom-radius($radius: 0.375rem) {
+      border-bottom-right-radius: $radius;
+      border-bottom-left-radius: $radius;
+}
+  
+@mixin border-start-radius($radius: 0.375rem) {
+      border-top-left-radius: $radius;
+      border-bottom-left-radius: $radius;
+}
+
+@mixin sg-focus-visible($text-color: white, $color:#0d6efd) {
+      box-shadow: 0 0 0 3px $text-color;
+      //border: 1px solid $text-color;
+      outline: 2px solid $color;
+      z-index: 5;
+  }

package/src/styles/_reset.scss

@@ -0,0 +1,231 @@
+@use "sass:color";
+@use "sass:map";
+
+:root {
+  --sg-body-bg: #212529;
+  --sg-body-color: white;
+  --sg-nav-color: #1a1b1d;
+  --sg-code-color: #fc5d5d;
+  --sg-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+  --sg-highlight-bg: #fff3cd;
+  --sg-link-color: #fc5d5d;// #4D9DE0;// #0d6efd;
+  --sg-link-hover-color: color.mix(black, #E15554, 15%);// #62a4da;// #0a58ca;
+
+  --sg-primary: rgb(73, 149, 213);
+  --sg-secondary: rgb(108, 117, 125);
+  --sg-success: rgb(31, 173, 97); //hsl(148, 50%, 46%)
+  --sg-info: rgb(145, 132, 189);
+  --sg-warning: rgb(224, 188, 41);
+  --sg-danger: rgb(252, 95, 95);
+  --sg-light: rgb(248, 249, 250);
+  --sg-dark: rgb(33, 37, 41);
+
+  --red-2: rgb(248, 113, 113);
+  --orange-2: rgb(251 146 60);
+  --yellow-2: rgb(251 191 36);
+
+  --nav-bar-height: 3.5rem;
+  --tab-controls-height: 2.5rem;
+  --column-header-height: 2rem;
+
+	font-size: 18px;
+	line-height: 1.4;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+		sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+    height: 100dvh;
+	color: var(--sg-body-color);
+	background-color: var(--sg-body-bg);
+}
+
+#root {
+	height: 100%;
+	overflow: auto;
+}
+
+.visually-hidden {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: auto;
+	margin: 0;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	white-space: nowrap;
+}
+
+::-webkit-scrollbar {
+	display: none;
+}
+
+.full-width {
+	width: 100%;
+}
+.top-left-grid {
+	border-top-left-radius: 0.375rem;
+	border-bottom-left-radius: 0;
+}
+.top-right-grid {
+	border-top-right-radius: 0.375rem;
+	border-bottom-right-radius: 0;
+}
+.middle-grid {
+	border-radius: 0;
+}
+.bottom-left-grid {
+	border-bottom-left-radius: 0.375rem;
+	border-top-left-radius: 0;
+}
+.bottom-right-grid {
+	border-bottom-right-radius: 0.375rem;
+	border-top-right-radius: 0;
+}
+
+:focus-visible {
+  //z-index: 9999;
+}
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.test-red {
+  background-color: red;
+}
+
+* {
+  box-sizing: border-box;
+  scrollbar-color: var(--sg-link-color) rgba(0,0,0,0);
+  scrollbar-width: thin;
+}
+
+dialog {
+  padding: 0;
+  margin: 0;
+  color: inherit
+}
+
+input, textarea, select {
+  font-size: 1rem * 0.85;
+}
+
+button {
+  cursor: pointer;
+  font-size: calc(1rem * 0.85);
+}
+
+hr {
+  margin: 0.5rem 0;
+  color: inherit;
+  border: 0;
+  border-top: 1px solid;
+  opacity: 0.25;
+}
+
+h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    line-height: 1.2;
+}
+
+h1, .h1 {
+    --unit: 1rem;
+    font-size: calc(1.375*var(--unit) + 1.5vw);
+}
+@media (min-width: 1200px) {
+h1, .h1 {
+    font-size: calc(2.5*var(--unit));
+}
+}
+
+h2, .h2 {
+    --unit: 1rem;
+    font-size: calc(1.325*var(--unit) + 0.9vw);
+}
+@media (min-width: 1200px) {
+    h2, .h2 {
+        font-size: calc(2*var(--unit));
+    }
+}
+
+h3, .h3 {
+    --unit: 1rem;
+    font-size: calc(1.3*var(--unit) + 0.6vw);
+}
+@media (min-width: 1200px) {
+    h3, .h3 {
+        font-size: calc(1.75*var(--unit));
+    }
+}
+
+h4, .h4 {
+    --unit: 1rem;
+    font-size: calc(1.275*var(--unit) + 0.3vw);
+}
+@media (min-width: 1200px) {
+    h4, .h4 {
+        font-size: calc(1.5*var(--unit));
+    }
+}
+
+h5, .h5 {
+    --unit: 1rem;
+    font-size: calc(1.25*var(--unit));
+}
+
+h6, .h6 {
+    --unit: 1rem;
+    font-size: calc(1*var(--unit));
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol, ul, dl {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+b, strong {
+  font-weight: bolder;
+}
+
+a {
+  color: var(--sg-link-color);
+  text-decoration: underline;
+}
+a:hover {
+  color: var(--sg-link-hover-color);
+}
+
+img, svg {
+  vertical-align: middle;
+}
+
+label {
+  display: inline-block;
+}