@jrgermain/stylesheet 0.2.1 → 0.4.0

package/src/styles/utils/reset.css

@@ -0,0 +1,29 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+:where(:focus-visible) {
+  outline: var(--border-m) solid var(--color-brand-5);
+}
+
+html {
+  text-size-adjust: none;
+  color-scheme: light dark;
+}
+
+body {
+  margin: 0;
+  background-color: var(--color-body);
+  color: var(--color-body-text);
+}
+
+img,
+picture,
+video,
+iframe {
+  max-width: 100%;
+  display: block;
+}

package/src/styles/utils/variables.css

@@ -0,0 +1,204 @@
+:root,
+::backdrop {
+  /* Brand */
+  --color-brand-1: light-dark(#08003b, #e5edff);
+  --color-brand-2: light-dark(#190074, #bbc9ff);
+  --color-brand-3: light-dark(#290fa3, #93a4ff);
+  --color-brand-4: light-dark(#3c35cb, #6f7dff);
+  --color-brand-5: #545be7;
+  --color-brand-6: light-dark(#6f7dff, #3c35cb);
+  --color-brand-7: light-dark(#93a4ff, #290fa3);
+  --color-brand-8: light-dark(#bbc9ff, #190074);
+  --color-brand-9: light-dark(#e5edff, #08003b);
+  --color-brand-transparent: light-dark(#545be766, #545be780);
+  --color-brand-extra-transparent: light-dark(#545be733, #545be759);
+
+  /* Red */
+  --color-red-1: light-dark(#240000, #ffe3dc);
+  --color-red-2: light-dark(#4d0000, #ffb4a5);
+  --color-red-3: light-dark(#7a0000, #ff7c68);
+  --color-red-4: light-dark(#a90000, #f0503d);
+  --color-red-5: #cc2a1b;
+  --color-red-6: light-dark(#f0503d, #a90000);
+  --color-red-7: light-dark(#ff7c68, #7a0000);
+  --color-red-8: light-dark(#ffb4a5, #4d0000);
+  --color-red-9: light-dark(#ffe3dc, #240000);
+  --color-red-transparent: light-dark(#cc2a1b66, #cc2a1b80);
+  --color-red-extra-transparent: light-dark(#cc2a1b33, #cc2a1b59);
+
+  /* Orange */
+  --color-orange-1: light-dark(#1c0300, #ffe6cc);
+  --color-orange-2: light-dark(#3e1200, #ffb87e);
+  --color-orange-3: light-dark(#632500, #f98f3a);
+  --color-orange-4: light-dark(#8b3a00, #d76f04);
+  --color-orange-5: #b45100;
+  --color-orange-6: light-dark(#d76f04, #8b3a00);
+  --color-orange-7: light-dark(#f98f3a, #632500);
+  --color-orange-8: light-dark(#ffb87e, #3e1200);
+  --color-orange-9: light-dark(#ffe6cc, #1c0300);
+  --color-orange-transparent: light-dark(#b4510066, #b4510080);
+  --color-orange-extra-transparent: light-dark(#b4510033, #b4510059);
+
+  /* Yellow */
+  --color-yellow-1: light-dark(#140900, #f8edc1);
+  --color-yellow-2: light-dark(#2f1e00, #efcb72);
+  --color-yellow-3: light-dark(#4e3700, #dfb22b);
+  --color-yellow-4: light-dark(#7a5700, #c89808);
+  --color-yellow-5: #a57c00;
+  --color-yellow-6: light-dark(#c89808, #7a5700);
+  --color-yellow-7: light-dark(#dfb22b, #4e3700);
+  --color-yellow-8: light-dark(#efcb72, #2f1e00);
+  --color-yellow-9: light-dark(#f8edc1, #140900);
+  --color-yellow-transparent: light-dark(#a57c0066, #a57c0080);
+  --color-yellow-extra-transparent: light-dark(#a57c0033, #a57c0059);
+
+  /* Green */
+  --color-green-1: light-dark(#011000, #dafbc4);
+  --color-green-2: light-dark(#0c2a00, #a4e472);
+  --color-green-3: light-dark(#1d4600, #7dc53a);
+  --color-green-4: light-dark(#2f6500, #5fa500);
+  --color-green-5: #438500;
+  --color-green-6: light-dark(#5fa500, #2f6500);
+  --color-green-7: light-dark(#7dc53a, #1d4600);
+  --color-green-8: light-dark(#a4e472, #0c2a00);
+  --color-green-9: light-dark(#dafbc4, #011000);
+  --color-green-transparent: light-dark(#43850066, #43850080);
+  --color-green-extra-transparent: light-dark(#43850033, #43850059);
+
+  /* Sky */
+  --color-sky-1: light-dark(#001011, #caf9f8);
+  --color-sky-2: light-dark(#002a2b, #76e2e2);
+  --color-sky-3: light-dark(#004747, #00c8c9);
+  --color-sky-4: light-dark(#006566, #00a7a8);
+  --color-sky-5: #008586;
+  --color-sky-6: light-dark(#00a7a8, #006566);
+  --color-sky-7: light-dark(#00c8c9, #004747);
+  --color-sky-8: light-dark(#76e2e2, #002a2b);
+  --color-sky-9: light-dark(#caf9f8, #001011);
+  --color-sky-transparent: light-dark(#00858666, #00858680);
+  --color-sky-extra-transparent: light-dark(#00858633, #00858659);
+
+  /* Blue */
+  --color-blue-1: light-dark(#00003e, #ddf0ff);
+  --color-blue-2: light-dark(#00007a, #a9cfff);
+  --color-blue-3: light-dark(#002b97, #74adff);
+  --color-blue-4: light-dark(#004abd, #3988ff);
+  --color-blue-5: #1c69e3;
+  --color-blue-6: light-dark(#3988ff, #004abd);
+  --color-blue-7: light-dark(#74adff, #002b97);
+  --color-blue-8: light-dark(#a9cfff, #00007a);
+  --color-blue-9: light-dark(#ddf0ff, #00003e);
+  --color-blue-transparent: light-dark(#1c69e366, #1c69e380);
+  --color-blue-extra-transparent: light-dark(#1c69e333, #1c69e359);
+
+  /* Purple */
+  --color-purple-1: light-dark(#170029, #fbe4ff);
+  --color-purple-2: light-dark(#370054, #e8b6ff);
+  --color-purple-3: light-dark(#5a0085, #ce8dfc);
+  --color-purple-4: light-dark(#7819a8, #b562ea);
+  --color-purple-5: #9640ca;
+  --color-purple-6: light-dark(#b562ea, #7819a8);
+  --color-purple-7: light-dark(#ce8dfc, #5a0085);
+  --color-purple-8: light-dark(#e8b6ff, #370054);
+  --color-purple-9: light-dark(#fbe4ff, #170029);
+  --color-purple-transparent: light-dark(#9640ca66, #9640ca80);
+  --color-purple-extra-transparent: light-dark(#9640ca33, #9640ca59);
+
+  /* Magenta */
+  --color-magenta-1: light-dark(#21000c, #ffe1f0);
+  --color-magenta-2: light-dark(#480023, #ffadd0);
+  --color-magenta-3: light-dark(#73003d, #fe7cb1);
+  --color-magenta-4: light-dark(#9b0058, #e45193);
+  --color-magenta-5: #c32775;
+  --color-magenta-6: light-dark(#e45193, #9b0058);
+  --color-magenta-7: light-dark(#fe7cb1, #73003d);
+  --color-magenta-8: light-dark(#ffadd0, #480023);
+  --color-magenta-9: light-dark(#ffe1f0, #21000c);
+  --color-magenta-transparent: light-dark(#c3277566, #c3277580);
+  --color-magenta-extra-transparent: light-dark(#c3277533, #c3277559);
+
+  /* Gray */
+  --color-gray-1: light-dark(#090b0f, #eceff4);
+  --color-gray-2: light-dark(#202226, #cbced3);
+  --color-gray-3: light-dark(#383b3f, #abaeb3);
+  --color-gray-4: light-dark(#53555a, #8d8f94);
+  --color-gray-5: #6f7276;
+  --color-gray-6: light-dark(#8d8f94, #53555a);
+  --color-gray-7: light-dark(#abaeb3, #383b3f);
+  --color-gray-8: light-dark(#cbced3, #202226);
+  --color-gray-9: light-dark(#eceff4, #090b0f);
+  --color-gray-transparent: light-dark(#6f727666, #6f727680);
+  --color-gray-extra-transparent: light-dark(#6f727633, #6f727659);
+
+  /* Semantic colors */
+  --color-body: light-dark(#f9fafc, #14161a);
+  --color-body-alt: light-dark(#fff, #010203);
+  --color-body-text: light-dark(#030305, #fff);
+  --color-body-text-alt: light-dark(#404247, #ccced0);
+  --color-shadow: light-dark(#45484c26, #00000166);
+  --color-outline: light-dark(#d8dbe0, #434549);
+
+  /* Font sizes */
+  --font-size-xs: clamp(0.6944rem, 0.6855rem + 0.0446vw, 0.72rem);
+  --font-size-s: clamp(0.8331rem, 0.8099rem + 0.1163vw, 0.9rem);
+  --font-size-m: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
+  --font-size-l: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
+  --font-size-xl: clamp(1.44rem, 1.3293rem + 0.5533vw, 1.7581rem);
+  --font-size-2xl: clamp(1.7281rem, 1.5649rem + 0.8163vw, 2.1975rem);
+  --font-size-3xl: clamp(2.0738rem, 1.8396rem + 1.1707vw, 2.7469rem);
+  --font-size-4xl: clamp(2.4881rem, 2.1594rem + 1.6435vw, 3.4331rem);
+
+  /* Font weights */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
+
+  /* Font families */
+  --font-family-body: "Avenir Next", avenir, corbel, source-sans-pro,
+    "DejaVu Sans", ui-sans-serif, sans-serif;
+  --font-family-heading: seravek, "Gill Sans Nova", verdana, "DejaVu Sans",
+    source-sans-pro, ui-sans-serif, sans-serif;
+  --font-family-mono: ui-monospace, "Source Code Pro", ui-monospace, monospace;
+
+  /* Spacing */
+  --space-3xs: clamp(4px, 3.6528px + 0.1087vw, 5px);
+  --space-2xs: clamp(8px, 7.6528px + 0.1087vw, 9px);
+  --space-xs: clamp(12px, 11.304px + 0.2174vw, 14px);
+  --space-s: clamp(16px, 15.304px + 0.2174vw, 18px);
+  --space-m: clamp(24px, 22.9568px + 0.3261vw, 27px);
+  --space-l: clamp(32px, 30.608px + 0.4348vw, 36px);
+  --space-xl: clamp(48px, 45.9136px + 0.6522vw, 54px);
+  --space-2xl: clamp(64px, 61.2176px + 0.8696vw, 72px);
+  --space-3xl: clamp(96px, 91.8256px + 1.3043vw, 108px);
+
+  /* Between xs and m based on screen width */
+  --space-body: clamp(12px, 6.7824px + 1.6304vw, 27px);
+
+  /* Radii */
+  --radius-none: 0;
+  --radius-s: 3px;
+  --radius-m: 6px;
+  --radius-l: 12px;
+  --radius-xl: 24px;
+  --radius-2xl: 64px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-none: none;
+  --shadow-s: 0 1px 3px -1px var(--color-shadow);
+  --shadow-m: 0 1px 7px -1px var(--color-shadow);
+  --shadow-l: var(--shadow-s), 0 1px 11px -1px var(--color-shadow);
+  --shadow-xl: var(--shadow-m), 0 1px 15px -1px var(--color-shadow);
+
+  /* Border widths */
+  --border-none: 0;
+  --border-s: 1px;
+  --border-m: 2px;
+  --border-l: 5px;
+  --border-xl: 8px;
+
+  /* Opacity */
+  --opacity-disabled: light-dark(0.65, 0.5);
+}

package/src/svg/dropdown-invert-thick.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+    d="m6 9l6 6l6-6" />
+</svg>

package/src/svg/dropdown-invert.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
+    d="m6 9l6 6l6-6" />
+</svg>

package/src/svg/dropdown-thick.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+    d="m6 9l6 6l6-6" />
+</svg>

package/src/svg/dropdown.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+  <path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
     d="m6 9l6 6l6-6" />
 </svg>

package/src/tokens.js

@@ -0,0 +1,141 @@
+export const colors = {  
+  brand: {
+    1: "var(--color-brand-1)",
+    2: "var(--color-brand-2)",
+    3: "var(--color-brand-3)",
+    4: "var(--color-brand-4)",
+    5: "var(--color-brand-5)",
+    6: "var(--color-brand-6)",
+    7: "var(--color-brand-7)",
+    8: "var(--color-brand-8)",
+    9: "var(--color-brand-9)",
+    transparent: "var(--color-brand-transparent)",
+    extraTransparent: "var(--color-brand-extra-transparent)",
+  },
+  red: {
+    1: "var(--color-red-1)",
+    2: "var(--color-red-2)",
+    3: "var(--color-red-3)",
+    4: "var(--color-red-4)",
+    5: "var(--color-red-5)",
+    6: "var(--color-red-6)",
+    7: "var(--color-red-7)",
+    8: "var(--color-red-8)",
+    9: "var(--color-red-9)",
+    transparent: "var(--color-red-transparent)",
+    extraTransparent: "var(--color-red-extra-transparent)",
+  },
+  orange: {
+    1: "var(--color-orange-1)",
+    2: "var(--color-orange-2)",
+    3: "var(--color-orange-3)",
+    4: "var(--color-orange-4)",
+    5: "var(--color-orange-5)",
+    6: "var(--color-orange-6)",
+    7: "var(--color-orange-7)",
+    8: "var(--color-orange-8)",
+    9: "var(--color-orange-9)",
+    transparent: "var(--color-orange-transparent)",
+    extraTransparent: "var(--color-orange-extra-transparent)",
+  },
+  yellow: {
+    1: "var(--color-yellow-1)",
+    2: "var(--color-yellow-2)",
+    3: "var(--color-yellow-3)",
+    4: "var(--color-yellow-4)",
+    5: "var(--color-yellow-5)",
+    6: "var(--color-yellow-6)",
+    7: "var(--color-yellow-7)",
+    8: "var(--color-yellow-8)",
+    9: "var(--color-yellow-9)",
+    transparent: "var(--color-yellow-transparent)",
+    extraTransparent: "var(--color-yellow-extra-transparent)",
+  },
+  green: {
+    1: "var(--color-green-1)",
+    2: "var(--color-green-2)",
+    3: "var(--color-green-3)",
+    4: "var(--color-green-4)",
+    5: "var(--color-green-5)",
+    6: "var(--color-green-6)",
+    7: "var(--color-green-7)",
+    8: "var(--color-green-8)",
+    9: "var(--color-green-9)",
+    transparent: "var(--color-green-transparent)",
+    extraTransparent: "var(--color-green-extra-transparent)",
+  },
+  sky: {
+    1: "var(--color-sky-1)",
+    2: "var(--color-sky-2)",
+    3: "var(--color-sky-3)",
+    4: "var(--color-sky-4)",
+    5: "var(--color-sky-5)",
+    6: "var(--color-sky-6)",
+    7: "var(--color-sky-7)",
+    8: "var(--color-sky-8)",
+    9: "var(--color-sky-9)",
+    transparent: "var(--color-sky-transparent)",
+    extraTransparent: "var(--color-sky-extra-transparent)",
+  },
+  blue: {
+    1: "var(--color-blue-1)",
+    2: "var(--color-blue-2)",
+    3: "var(--color-blue-3)",
+    4: "var(--color-blue-4)",
+    5: "var(--color-blue-5)",
+    6: "var(--color-blue-6)",
+    7: "var(--color-blue-7)",
+    8: "var(--color-blue-8)",
+    9: "var(--color-blue-9)",
+    transparent: "var(--color-blue-transparent)",
+    extraTransparent: "var(--color-blue-extra-transparent)",
+  },
+  purple: {
+    1: "var(--color-purple-1)",
+    2: "var(--color-purple-2)",
+    3: "var(--color-purple-3)",
+    4: "var(--color-purple-4)",
+    5: "var(--color-purple-5)",
+    6: "var(--color-purple-6)",
+    7: "var(--color-purple-7)",
+    8: "var(--color-purple-8)",
+    9: "var(--color-purple-9)",
+    transparent: "var(--color-purple-transparent)",
+    extraTransparent: "var(--color-purple-extra-transparent)",
+  },
+  magenta: {
+    1: "var(--color-magenta-1)",
+    2: "var(--color-magenta-2)",
+    3: "var(--color-magenta-3)",
+    4: "var(--color-magenta-4)",
+    5: "var(--color-magenta-5)",
+    6: "var(--color-magenta-6)",
+    7: "var(--color-magenta-7)",
+    8: "var(--color-magenta-8)",
+    9: "var(--color-magenta-9)",
+    transparent: "var(--color-magenta-transparent)",
+    extraTransparent: "var(--color-magenta-extra-transparent)",
+  },
+  gray: {
+    1: "var(--color-gray-1)",
+    2: "var(--color-gray-2)",
+    3: "var(--color-gray-3)",
+    4: "var(--color-gray-4)",
+    5: "var(--color-gray-5)",
+    6: "var(--color-gray-6)",
+    7: "var(--color-gray-7)",
+    8: "var(--color-gray-8)",
+    9: "var(--color-gray-9)",
+    transparent: "var(--color-gray-transparent)",
+    extraTransparent: "var(--color-gray-extra-transparent)",
+  },
+  body: 'var(--color-body)',
+  bodyAlt: 'var(--color-body-alt)',
+  bodyText: 'var(--color-body-text)',
+  bodyTextAlt: 'var(--color-body-text-alt)',
+  shadow: 'var(--color-shadow)',
+  outline: 'var(--color-outline)',
+};
+
+export const fontSizes = {
+  

package/src/styles/_utils.scss

@@ -1,87 +0,0 @@
-@use "sass:string";
-@use "sass:list";
-
-// Adapted from https://css-tricks.com/snippets/sass/str-replace-function/
-@function replace-all($string, $search, $replace) {
-  $index: string.index($string, $search);
-
-  @if $index {
-    /* stylelint-disable-next-line scss/operator-no-newline-after */
-    @return string.slice($string, 1, $index - 1) + $replace +
-      replace-all(
-        string.slice($string, $index + string.length($search)),
-        $search,
-        $replace
-      );
-  }
-
-  @return $string;
-}
-
-@function svg-to-data-url($svg) {
-  $svg: replace-all($svg, "%", "%25");
-  $svg: replace-all($svg, '"', "'");
-  $svg: replace-all($svg, "#", "%23");
-  $svg: replace-all($svg, "<", "%3C");
-  $svg: replace-all($svg, ">", "%3E");
-  $svg: replace-all($svg, "[", "%5B");
-  $svg: replace-all($svg, "]", "%5D");
-  $svg: replace-all($svg, "^", "%5E");
-  $svg: replace-all($svg, "`", "%60");
-  $svg: replace-all($svg, "{", "%7B");
-  $svg: replace-all($svg, "|", "%7C");
-  $svg: replace-all($svg, "}", "%7D");
-
-  // The below characters are tolerated by browsers, so don't NEED to be escaped:
-  // $svg: replace-all($svg, " ", "%20");
-  // $svg: replace-all($svg, "!", "%21");
-  // $svg: replace-all($svg, "$", "%24");
-  // $svg: replace-all($svg, "&", "%26");
-  // $svg: replace-all($svg, "'", "%27");
-  // $svg: replace-all($svg, "(", "%28");
-  // $svg: replace-all($svg, ")", "%29");
-  // $svg: replace-all($svg, "*", "%2A");
-  // $svg: replace-all($svg, "+", "%2B");
-  // $svg: replace-all($svg, ",", "%2C");
-  // $svg: replace-all($svg, "-", "%2D");
-  // $svg: replace-all($svg, ".", "%2E");
-  // $svg: replace-all($svg, "/", "%2F");
-  // $svg: replace-all($svg, ":", "%3A");
-  // $svg: replace-all($svg, ";", "%3B");
-  // $svg: replace-all($svg, "=", "%3D");
-  // $svg: replace-all($svg, "?", "%3F");
-  // $svg: replace-all($svg, "@", "%40");
-  // $svg: replace-all($svg, "\\", "%5C");
-  // $svg: replace-all($svg, "_", "%5F");
-  // $svg: replace-all($svg, "~", "%7F");
-
-  @return 'url("data:image/svg+xml,#{$svg}")';
-}
-
-@mixin transition($properties, $duration: 200ms, $timing-function: "ease") {
-  $properties-string: "";
-
-  @if type-of($properties) != list and type-of($properties) != string {
-    @error 'Properties must be a string or list of strings';
-  }
-
-  @each $property in $properties {
-    @if $properties-string != "" {
-      $properties-string: $properties-string + ", ";
-    }
-
-    $properties-string: $properties-string + $property;
-  }
-
-  @if list.length($properties) == 1 {
-    transition: #{string.unquote($properties-string)}
-      $duration
-      #{string.unquote($timing-function)};
-  }
-
-  @if list.length($properties) > 1 {
-    transition-property: string.unquote($properties-string);
-    transition-duration: $duration;
-    transition-timing-function: string.unquote($timing-function);
-  }
-}