@splendidlabz/styles 4.0.1 → 4.2.0

package/src/reset.css

@@ -99,7 +99,7 @@ hr {
 * The hidden attribute *
 *********************/
 [hidden] {
-  display: none;
+  display: none !important;
   opacity: 0;
   visibility: hidden;
 }

package/src/tools/color.css

@@ -0,0 +1,4 @@
+/* Returns a color with alpha value */
+@function --color(--color, --alpha) {
+  result: oklch(from var(--color) l c h / var(--alpha));
+}

package/src/tools/index.css

@@ -1,5 +1,6 @@
+@import './color.css';
 @import './pigment.css';
 @import './outlines.css';
-@import './border.css';
+@import './scaffolds.css';
 @import './object.css';
 @import './transitions.css';

package/src/tools/pigment.css

@@ -33,109 +33,93 @@ Usage with the Fill System
   & {
     @apply border-scaffold;
     @apply transition-scaffold;
-    border-color: var(--border-color, currentcolor);
-    color: var(--text-color, currentcolor);
-    background-color: var(--bg-color);
+    --_bgc: var(--bg-color);
+    --_tc: var(--text-color, currentcolor);
+    --_bc: var(--border-color, currentcolor);
+    border-color: var(--_bc, currentcolor);
+    color: var(--_tc);
+    background: var(--_bgc);
   }
 }
 
 @utility pigment-svg-scaffold {
+  --_fc: var(--fill-color, transparent);
+  --_sc: var(--stroke-color, var(--text-color, currentcolor));
   & {
     :where(svg path) {
       @apply transition-scaffold;
-      fill: var(--fill-color, var(--text-color));
-      stroke: var(
-        --stroke-color,
-        var(--text-color)
-      ); /* Fallback to text color */
+      fill: var(--_fc);
+      stroke: var(--_sc);
     }
   }
 }
 
 @utility pigment-hover-scaffold {
   &:hover {
-    border-color: var(--border-hover-color, var(--border-color));
-    color: var(--text-hover-color, var(--text-color));
-    background-color: var(--bg-hover-color, var(--bg-color));
+    --_bgc: var(--bg-hover-color, var(--bg-color));
+    --_tc: var(--text-hover-color, var(--text-color));
+    --_bc: var(--border-hover-color, var(--border-color));
   }
 }
 
 @utility pigment-hover-svg-scaffold {
   &:hover {
-    :where(svg path) {
-      fill: var(
-        --fill-hover-color,
-        var(--text-hover-color, var(--fill-color, var(--text-color)))
-      );
-      stroke: var(
-        --stroke-hover-color,
-        var(--text-hover-color, var(--stroke-color, var(--text-color)))
-      );
-    }
+    --_fc: var(--fill-hover-color, var(--fill-color, transparent));
+    --_sc: var(
+      --stroke-hover-color,
+      var(
+        --text-hover-color,
+        var(--stroke-color, var(--text-color, currentcolor))
+      )
+    );
   }
 }
 
 @utility pigment-focus-scaffold {
   &:focus {
-    border-color: var(
+    --_bc: var(
       --border-focus-color,
       var(--border-hover-color, var(--border-color))
     );
-    color: var(--text-focus-color, var(--text-hover-color, var(--text-color)));
-    background-color: var(
-      --bg-focus-color,
-      var(--bg-hover-color, var(--bg-color))
-    );
+    --_tc: var(--text-focus-color, var(--text-hover-color, var(--text-color)));
+    --_bgc: var(--bg-focus-color, var(--bg-hover-color, var(--bg-color)));
   }
 }
 
 @utility pigment-focus-svg-scaffold {
   &:focus {
-    :where(svg path) {
-      fill: var(
-        --fill-focus-color,
+    --_fc: var(--fill-focus-color, var(--fill-color, transparent));
+    --_sc: var(
+      --stroke-focus-color,
+      var(
+        --text-focus-color,
         var(
-          --text-focus-color,
-          var(
-            --fill-hover-color,
-            var(--text-hover-color, var(--fill-color, var(--text-color)))
-          )
+          --stroke-hover-color,
+          var(--stroke-color, var(--text-color, currentcolor))
         )
-      );
-      stroke: var(
-        --stroke-focus-color,
-        var(
-          --text-focus-color,
-          var(
-            --stroke-hover-color,
-            var(--text-hover-color, var(--stroke-color, var(--text-color)))
-          )
-        )
-      );
-    }
+      )
+    );
   }
 }
 
 @utility pigment-active-scaffold {
   &:active {
-    border-color: var(--border-active-color, var(--border-color));
-    color: var(--text-active-color, var(--text-color));
-    background-color: var(--bg-active-color, var(--bg-color));
+    --_bc: var(--border-active-color, var(--border-color));
+    --_tc: var(--text-active-color, var(--text-color));
+    --_bgc: var(--bg-active-color, var(--bg-color));
   }
 }
 
 @utility pigment-active-svg-scaffold {
   &:active {
-    :where(svg path) {
-      fill: var(
-        --fill-active-color,
-        var(--text-active-color, var(--fill-color, var(--text-color)))
-      );
-      stroke: var(
-        --stroke-active-color,
-        var(--text-active-color, var(--stroke-color, var(--text-color)))
-      );
-    }
+    --_fc: var(--fill-active-color, var(--fill-color, transparent));
+    --_sc: var(
+      --stroke-active-color,
+      var(
+        --text-active-color,
+        var(--stroke-color, var(--text-color, currentcolor))
+      )
+    );
   }
 }
 
@@ -144,10 +128,11 @@ Usage with the Fill System
   &.checked,
   &[aria-current],
   &[aria-selected='true'],
+  &[aria-pressed='true'],
   &[aria-expanded='true'] {
-    border-color: var(--border-selected-color, var(--border-color));
-    color: var(--text-selected-color, var(--text-color));
-    background-color: var(--bg-selected-color, var(--bg-color));
+    --_bc: var(--border-selected-color, var(--border-color));
+    --_tc: var(--text-selected-color, var(--text-color));
+    --_bgc: var(--bg-selected-color, var(--bg-color));
   }
 }
 
@@ -156,14 +141,16 @@ Usage with the Fill System
   &.checked,
   &[aria-current],
   &[aria-selected='true'],
+  &[aria-pressed='true'],
   &[aria-expanded='true'] {
-    :where(svg path) {
-      fill: var(--fill-selected-color, var(--fill-color, var(--text-color)));
-      stroke: var(
-        --stroke-selected-color,
-        var(--stroke-color, var(--text-color))
-      );
-    }
+    --_fc: var(--fill-selected-color, var(--fill-color, transparent));
+    --_sc: var(
+      --stroke-selected-color,
+      var(
+        --text-selected-color,
+        var(--stroke-color, var(--text-color, currentcolor))
+      )
+    );
   }
 }
 
@@ -179,6 +166,14 @@ Usage with the Fill System
   @apply pigment-selected-scaffold;
 }
 
+@utility pigment-svg {
+  @apply pigment-svg-scaffold;
+  @apply pigment-hover-svg-scaffold;
+  @apply pigment-focus-svg-scaffold;
+  @apply pigment-active-svg-scaffold;
+  @apply pigment-selected-svg-scaffold;
+}
+
 @utility pigment-with-svg {
   @apply pigment-scaffold;
   @apply pigment-svg-scaffold;

package/src/tools/scaffolds.css

@@ -0,0 +1,119 @@
+@utility margin-scaffold {
+  margin-block: var(--margin-block, var(--margin, var(--fallback-margin)));
+  margin-inline: var(--margin-inline, var(--margin, var(--fallback-margin)));
+}
+
+@utility padding-scaffold {
+  padding-block: var(--padding-block, var(--padding, var(--fallback-padding)));
+  padding-inline: var(
+    --padding-inline,
+    var(--padding, var(--fallback-padding))
+  );
+}
+
+@utility border-scaffold {
+  border: var(--border-width) var(--border-style)
+    var(--_bc, var(--border-color));
+  border-radius: var(--radius);
+}
+
+@utility radius-* {
+  --radius: --value([length]);
+  --radius: calc(var(--spacing) * --value(integer));
+}
+
+@utility rounded-* {
+  border-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-t-* {
+  border-top-left-radius: calc(var(--spacing) --value(integer));
+  border-top-right-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-b-* {
+  border-bottom-left-radius: calc(var(--spacing) --value(integer));
+  border-bottom-right-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-l-* {
+  border-top-left-radius: calc(var(--spacing) --value(integer));
+  border-bottom-left-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-r-* {
+  border-top-right-radius: calc(var(--spacing) --value(integer));
+  border-bottom-right-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-tl-* {
+  border-top-left-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-tr-* {
+  border-top-right-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-bl-* {
+  border-bottom-left-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-br-* {
+  border-bottom-right-radius: calc(var(--spacing) --value(integer));
+}
+
+@utility rounded-x {
+  > :where(:first-child) {
+    border-top-left-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
+  }
+
+  > :where(:last-child) {
+    border-top-right-radius: var(--radius);
+    border-bottom-right-radius: var(--radius);
+  }
+}
+
+@utility rounded-x-* {
+  > :where(:first-child) {
+    border-top-left-radius: --value([length]);
+    border-top-left-radius: calc(var(--spacing) --value(integer));
+    border-bottom-left-radius: --value([length]);
+    border-bottom-left-radius: calc(var(--spacing) --value(integer));
+  }
+
+  > :where(:last-child) {
+    border-top-right-radius: --value([length]);
+    border-top-right-radius: calc(var(--spacing) --value(integer));
+    border-bottom-right-radius: --value([length]);
+    border-bottom-right-radius: calc(var(--spacing) --value(integer));
+  }
+}
+
+@utility rounded-y {
+  > :first-child {
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+  }
+
+  > :last-child {
+    border-bottom-left-radius: var(--radius);
+    border-bottom-right-radius: var(--radius);
+  }
+}
+
+@utility rounded-y-* {
+  > :first-child {
+    border-top-left-radius: --value([length]);
+    border-top-left-radius: calc(var(--spacing) --value(integer));
+    border-top-right-radius: --value([length]);
+    border-top-right-radius: calc(var(--spacing) --value(integer));
+  }
+
+  > :last-child {
+    border-bottom-left-radius: --value([length]);
+    border-bottom-left-radius: calc(var(--spacing) --value(integer));
+    border-bottom-right-radius: --value([length]);
+    border-bottom-right-radius: calc(var(--spacing) --value(integer));
+  }
+}

package/src/tools/transitions.css

@@ -6,10 +6,19 @@
     --transition-values: var(--transition-duration) var(--transition-delay)
       var(--transition-easing);
     --transition-props:
-      backdrop-filter, background, border, color, display, fill, filter, gap,
-      opacity, outline, overlay, stroke, transform;
+      background, border, color, display, fill, opacity, outline, stroke,
+      transform;
     transition: var(--transition-values);
     transition-property: var(--transition-props);
+  }
+}
+
+@utility transition-scaffold-extended {
+  & {
+    @apply transition-scaffold;
+    --transition-props:
+      backdrop-filter, background, border, color, display, fill, filter, gap,
+      opacity, outline, overlay, stroke, transform;
     transition-behavior: allow-discrete;
   }
 }
@@ -23,3 +32,10 @@
     transition-property: var(--transition-props);
   }
 }
+
+@keyframes z-index-hack {
+  0%,
+  100% {
+    z-index: var(--z-index, 5);
+  }
+}

package/src/type/index.css

@@ -1 +1,3 @@
 @import './font-position.css';
+@import './text-relative.css';
+@import './text-edge.css';

package/src/type/text-edge.css

@@ -0,0 +1,3 @@
+@utility text-edge {
+  text-box-edge: cap alphabetic;
+}

package/src/type/text-relative.css

@@ -0,0 +1,51 @@
+@theme {
+  --base-size: var(--text-7m);
+}
+
+@utility base-anchor {
+  font-size: calc(var(--base-size) * 1em);
+}
+
+@utility text-relative {
+  font-size: calc(var(--font-size) / var(--base-size) * 1em);
+}
+
+/* To use this today */
+@utility base-font-size {
+  --base-font-size: calc(var(--base-size) / var(--font-size) * 1em);
+}
+
+/* Easier usage when CSS functions become available */
+@function --bem(--multiplier) {
+  result: calc(var(--font-size / var(--base-size) * 1em * --multiplier));
+}
+
+@function --blh(--multiplier, --lh-multiplier) {
+  result: calc(
+    var(
+      --font-size / var(--base-size) * 1em * --multiplier *
+        var(--lh-multiplier, var(--leading))
+    )
+  );
+}
+
+/*********************
+ * Legacy Versions *
+ *********************/
+/* @utility text-relative-base {
+  font-size: calc(var(--text-base-size) * 1rem);
+}
+
+@utility text-relative {
+  font-size: calc(var(--text-size) / var(--text-base-size) * 1em);
+}
+
+@utility rtext-base-* {
+  @apply text-base;
+  --text-base-size: --value(--text-base-*, [size]);
+}
+
+@utility rtext-* {
+  @apply text-relative;
+  --text-size: --value(--text-*, [size]);
+} */

package/src/variables/font.css

@@ -3,6 +3,7 @@
 
 /* prettier-ignore */
 @theme {
+  /* REM Values */
   --text-1: 0.625rem;   /* 10px */
   --text-2: 0.6875rem;  /* 11px */
   --text-3: 0.75rem;    /* 12px */
@@ -25,6 +26,9 @@
   --text-20: 6rem;      /* 96px */
   --text-21: 6.75rem;   /* 108px */
   --text-22: 7.5rem;    /* 120px */
+
+
+  /* EM Values */
   --text-1e: 0.625em;   /* 10px */
   --text-2e: 0.6875em;  /* 11px */
   --text-3e: 0.75em;    /* 12px */
@@ -47,6 +51,31 @@
   --text-20e: 6em;      /* 96px */
   --text-21e: 6.75em;   /* 108px */
   --text-22e: 7.5em;    /* 120px */
+
+  /* Multiplier Values */
+  --text-1m: 0.625;   /* 10px */
+  --text-2m: 0.6875;  /* 11px */
+  --text-3m: 0.75;    /* 12px */
+  --text-4m: 0.8125;  /* 13px */
+  --text-5m: 0.875;   /* 14px */
+  --text-6m: 0.9375;  /* 15px */
+  --text-7m: 1;       /* 16px */
+  --text-8m: 1.125;   /* 18px */
+  --text-9m: 1.3125;  /* 21px */
+  --text-10m: 1.5;    /* 24px */
+  --text-11m: 1.75;   /* 28px */
+  --text-12m: 2;      /* 32px */
+  --text-13m: 2.25;   /* 36px */
+  --text-14m: 2.625;  /* 42px */
+  --text-15m: 3;      /* 48px */
+  --text-16m: 3.375;  /* 54px */
+  --text-17m: 3.75;   /* 60px */
+  --text-18m: 4.5;    /* 72px */
+  --text-19m: 5.25;   /* 84px */
+  --text-20m: 6;      /* 96px */
+  --text-21m: 6.75;   /* 108px */
+  --text-22m: 7.5;    /* 120px */
+
 }
 
 /* Font weights *

package/src/variables/radius.css

@@ -1,46 +1,46 @@
 /* Border radius *
  *********************/
 @theme {
-  --radius-0.5: 0.125rem;
-  --radius-1: 0.25rem;
-  --radius-1.5: 0.375rem;
-  --radius-2: 0.5rem;
-  --radius-2.5: 0.625rem;
-  --radius-3: 0.75rem;
-  --radius-3.5: 0.875rem;
-  --radius-4: 1rem;
-  --radius-4.5: 1.125rem;
-  --radius-5: 1.25rem;
-  --radius-5.5: 1.375rem;
-  --radius-6: 1.5rem;
-  --radius-6.5: 1.625rem;
-  --radius-7: 1.75rem;
-  --radius-7.5: 1.875rem;
-  --radius-8: 2rem;
-  --radius-8.5: 2.125rem;
-  --radius-9: 2.25rem;
-  --radius-9.5: 2.375rem;
-  --radius-10: 2.5rem;
-  --radius-10.5: 2.625rem;
-  --radius-11: 2.75rem;
-  --radius-11.5: 2.875rem;
-  --radius-12: 3rem;
-  --radius-12.5: 3.125rem;
-  --radius-13: 3.25rem;
-  --radius-13.5: 3.375rem;
-  --radius-14: 3.5rem;
-  --radius-14.5: 3.625rem;
-  --radius-15: 3.75rem;
-  --radius-15.5: 3.875rem;
-  --radius-16: 4rem;
-  --radius-16.5: 4.125rem;
-  --radius-17: 4.25rem;
-  --radius-17.5: 4.375rem;
-  --radius-18: 4.5rem;
-  --radius-18.5: 4.625rem;
-  --radius-19: 4.75rem;
-  --radius-19.5: 4.875rem;
-  --radius-20: 5rem;
+  --radius-0.5: calc(var(--spacing) * 0.5);
+  --radius-1: calc(var(--spacing) * 1);
+  --radius-1.5: calc(var(--spacing) * 1.5);
+  --radius-2: calc(var(--spacing) * 2);
+  --radius-2.5: calc(var(--spacing) * 2.5);
+  --radius-3: calc(var(--spacing) * 3);
+  --radius-3.5: calc(var(--spacing) * 3.5);
+  --radius-4: calc(var(--spacing) * 4);
+  --radius-4.5: calc(var(--spacing) * 4.5);
+  --radius-5: calc(var(--spacing) * 5);
+  --radius-5.5: calc(var(--spacing) * 5.5);
+  --radius-6: calc(var(--spacing) * 6);
+  --radius-6.5: calc(var(--spacing) * 6.5);
+  --radius-7: calc(var(--spacing) * 7);
+  --radius-7.5: calc(var(--spacing) * 7.5);
+  --radius-8: calc(var(--spacing) * 8);
+  --radius-8.5: calc(var(--spacing) * 8.5);
+  --radius-9: calc(var(--spacing) * 9);
+  --radius-9.5: calc(var(--spacing) * 9.5);
+  --radius-10: calc(var(--spacing) * 10);
+  --radius-10.5: calc(var(--spacing) * 10.5);
+  --radius-11: calc(var(--spacing) * 11);
+  --radius-11.5: calc(var(--spacing) * 11.5);
+  --radius-12: calc(var(--spacing) * 12);
+  --radius-12.5: calc(var(--spacing) * 12.5);
+  --radius-13: calc(var(--spacing) * 13);
+  --radius-13.5: calc(var(--spacing) * 13.5);
+  --radius-14: calc(var(--spacing) * 14);
+  --radius-14.5: calc(var(--spacing) * 14.5);
+  --radius-15: calc(var(--spacing) * 15);
+  --radius-15.5: calc(var(--spacing) * 15.5);
+  --radius-16: calc(var(--spacing) * 16);
+  --radius-16.5: calc(var(--spacing) * 16.5);
+  --radius-17: calc(var(--spacing) * 17);
+  --radius-17.5: calc(var(--spacing) * 17.5);
+  --radius-18: calc(var(--spacing) * 18);
+  --radius-18.5: calc(var(--spacing) * 18.5);
+  --radius-19: calc(var(--spacing) * 19);
+  --radius-19.5: calc(var(--spacing) * 19.5);
+  --radius-20: calc(var(--spacing) * 20);
   --radius-0.5r: calc(var(--radius) * 0.5);
   --radius-1r: var(--radius);
   --radius-1.5r: calc(var(--radius) * 1.5);

package/src/variables/variables.css

@@ -1,7 +1,5 @@
 @theme {
   /* Typography */
-  --bg-color: var(--color-cdarkblue-900);
-  --text-color: var(--color-cneutral-100);
   --leading: 1.5;
   --gap: 1rlh;