@splendidlabz/styles 3.0.0 → 4.0.0-alpha.1

package/src/effects/fancy-box.css

@@ -0,0 +1,259 @@
+:root {
+  /* --inner-gradient: linear-gradient(var(--gradient-angle), #563444, #4ecdc4); */
+  /* --bg-color: transparent;
+  --outer-gradient: linear-gradient(
+    var(--gradient-angle) in oklch,
+    rgb(112 190 190) 0%,
+    rgb(13 13 98)
+  );
+  --text-color: white; */
+}
+
+@utility fancy-box {
+  & {
+    @apply border-scaffold;
+    --a: var(--arrow-angle, 90deg);
+    --h: var(--arrow-height, 0.75em);
+    --p: var(--arrow-position, 50%);
+    --b: var(--border-width);
+    --r: var(--radius);
+    --_bg-gradient-fallback: linear-gradient(
+      var(--bg-color, transparent),
+      var(--bg-color, transparent)
+    );
+    --_border-gradient-fallback: linear-gradient(
+      var(--border-color),
+      var(--border-color)
+    );
+    overflow: visible;
+    position: relative;
+    z-index: 0;
+    padding: 0.5em; /* To remove */
+    border-width: var(--b);
+    border-color: transparent;
+    color: var(--text-color);
+    background:
+      padding-box var(--inner-gradient, var(--_bg-gradient-fallback)),
+      border-box var(--outer-gradient, var(--_border-gradient-fallback));
+
+    /* animation: rotate-angle 10s linear infinite paused; */
+  }
+}
+
+@utility fancy-box-arrow {
+  & {
+    @apply fancy-box;
+  }
+
+  &.arrow-top,
+  &.arrow-bottom {
+    background-size: 100% calc(100% + var(--h));
+  }
+
+  &.arrow-left,
+  &.arrow-right {
+    background-size: calc(100% + var(--h)) 100%;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--b));
+    z-index: -1;
+    background: inherit;
+  }
+
+  &::before {
+    background-size:
+      0 0,
+      100% 100%;
+  }
+
+  &::after {
+    border: inherit;
+    background-size:
+      100% 100%,
+      0 0;
+  }
+
+  &.arrow-top {
+    border-radius: min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2))
+      min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r)
+      var(--r) / var(--r);
+    background-position: bottom;
+
+    &::before,
+    &::after {
+      top: calc(-1 * var(--b) - var(--h));
+    }
+
+    &::before {
+      clip-path: polygon(
+        min(100%, var(--p) + var(--h) * tan(var(--a) / 2))
+          calc(var(--h) + var(--b)),
+        min(100%, var(--p) + var(--h) * tan(var(--a) / 2)) var(--h),
+        var(--p) 0,
+        max(0%, var(--p) - var(--h) * tan(var(--a) / 2)) var(--h),
+        max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
+          calc(var(--h) + var(--b))
+      );
+    }
+
+    &::after {
+      clip-path: polygon(
+        min(
+            100% - var(--b),
+            var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
+              tan(45deg - var(--a) / 4)
+          )
+          calc(var(--h) + var(--b)),
+        var(--p) calc(var(--b) / sin(var(--a) / 2)),
+        max(
+            var(--b),
+            var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
+              tan(45deg - var(--a) / 4)
+          )
+          calc(var(--h) + var(--b)),
+        50% 50%
+      );
+    }
+  }
+
+  &.arrow-bottom {
+    border-radius: var(--r) var(--r)
+      min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2))
+      min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2)) / var(--r);
+
+    &::before,
+    &::after {
+      bottom: calc(-1 * var(--b) - var(--h));
+    }
+
+    &::before {
+      clip-path: polygon(
+        min(100%, var(--p) + var(--h) * tan(var(--a) / 2))
+          calc(100% - var(--h) - var(--b)),
+        min(100%, var(--p) + var(--h) * tan(var(--a) / 2)) calc(100% - var(--h)),
+        var(--p) 100%,
+        max(0%, var(--p) - var(--h) * tan(var(--a) / 2)) calc(100% - var(--h)),
+        max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
+          calc(100% - var(--h) - var(--b))
+      );
+    }
+
+    &::after {
+      clip-path: polygon(
+        min(
+            100% - var(--b),
+            var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
+              tan(45deg - var(--a) / 4)
+          )
+          calc(100% - var(--h) - var(--b)),
+        var(--p) calc(100% - var(--b) / sin(var(--a) / 2)),
+        max(
+            var(--b),
+            var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
+              tan(45deg - var(--a) / 4)
+          )
+          calc(100% - var(--h) - var(--b)),
+        50% 50%
+      );
+    }
+  }
+
+  &.arrow-left {
+    border-radius: var(--r) /
+      min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2)) var(--r) var(--r)
+      min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2));
+    background-position: right;
+
+    &::before,
+    &::after {
+      left: calc(-1 * var(--b) - var(--h));
+    }
+
+    &::before {
+      clip-path: polygon(
+        calc(var(--h) + var(--b))
+          min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
+        var(--h) min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
+        0 var(--p),
+        var(--h) max(0%, var(--p) - var(--h) * tan(var(--a) / 2)),
+        calc(var(--h) + var(--b))
+          max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
+      );
+    }
+
+    &::after {
+      clip-path: polygon(
+        calc(var(--h) + var(--b))
+          min(
+            100% - var(--b),
+            var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
+              tan(45deg - var(--a) / 4)
+          ),
+        calc(var(--b) / sin(var(--a) / 2)) var(--p),
+        calc(var(--h) + var(--b))
+          max(
+            var(--b),
+            var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
+              tan(45deg - var(--a) / 4)
+          ),
+        50% 50%
+      );
+    }
+  }
+
+  &.arrow-right {
+    border-radius: var(--r) / var(--r)
+      min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2))
+      min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r);
+
+    &::before,
+    &::after {
+      right: calc(-1 * var(--b) - var(--h));
+    }
+
+    &::before {
+      clip-path: polygon(
+        calc(100% - var(--h) - var(--b))
+          min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
+        calc(100% - var(--h)) min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
+        100% var(--p),
+        calc(100% - var(--h)) max(0%, var(--p) - var(--h) * tan(var(--a) / 2)),
+        calc(100% - var(--h) - var(--b))
+          max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
+      );
+    }
+
+    &::after {
+      clip-path: polygon(
+        calc(100% - var(--h) - var(--b))
+          min(
+            100% - var(--b),
+            var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
+              tan(45deg - var(--a) / 4)
+          ),
+        calc(100% - var(--b) / sin(var(--a) / 2)) var(--p),
+        calc(100% - var(--h) - var(--b))
+          max(
+            var(--b),
+            var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
+              tan(45deg - var(--a) / 4)
+          ),
+        50% 50%
+      );
+    }
+  }
+}
+
+@keyframes rotate-angle {
+  from {
+    --gradient-angle: 0deg;
+  }
+
+  to {
+    --gradient-angle: 360deg;
+  }
+}

package/src/effects/gradients.css

@@ -1,3 +1,9 @@
+@property --gradient-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
 /* Gradient Defaults */
 @layer base {
   :root {
@@ -23,17 +29,10 @@
 @utility gradient {
   & {
     @apply tw-gradient;
-    background-image: linear-gradient(
-      var(--gradient-angle),
+    background: linear-gradient(
+      var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
       var(--gradient, var(--tw-gradient))
     );
-
-    @supports (linear-gradient(in oklab)) {
-      background: linear-gradient(
-        var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
-        var(--gradient, var(--tw-gradient))
-      );
-    }
   }
 }
 

package/src/effects/index.css

@@ -1,6 +1,8 @@
 @import './elevation.css';
 @import './gradients.css';
+@import './fancy-box.css';
 @import './highlight.css';
 @import './shadows.css';
-@import './text-outline.css';
+@import './text.css';
 @import './frosted-glass.css';
+@import './stroke.css';

package/src/effects/shadows.css

@@ -38,12 +38,3 @@
     filter: drop-shadow(var(--drop-shadow, var(--drop-shadow-string)));
   }
 }
-
-/* Will this work? */
-/*********************
- * Shadow Utilities *
- * Haven't managed to get Functional Utilities to work yet
- *********************/
-/* @utility shadow-x-* {
-  --shadow-x: --value([integer]);
-} */

package/src/effects/stroke.css

@@ -0,0 +1,25 @@
+/*********************
+ * Stroke *
+ * Allows spl-stroke-<length> to create --stroke-width
+ * Allows spl-stroke-<color>/<modifier> to create --stroke-color
+ *********************/
+/* prettier-ignore */
+@utility spl-stroke-* {
+  & {
+    --stroke-width: --value([length]);
+    --stroke-color: --value(--color-*, [color]);
+    --stroke-color: oklch(from --value(--color-*, [color]) l c h / --modifier(integer)%);
+  }
+}
+
+/*********************
+ * Fill *
+ * Allows spl-fill-<color>/<modifier> to create --fill-color
+ *********************/
+/* prettier-ignore */
+@utility spl-fill-* {
+  & {
+    --fill-color: --value(--color-*, [color]);
+    --fill-color: oklch(from --value(--color-*, [color]) l c h / --modifier(integer)%);
+  }
+}

package/src/form/checkbox-and-radio.css

@@ -0,0 +1,137 @@
+@utility checkbox-and-radio {
+  & {
+    --size: 1em;
+    --fill-color: none;
+    --stroke-color: transparent;
+    --fill-checked-color: none;
+    --stroke-checked-color: white;
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+
+    > .group {
+      display: flex;
+      align-items: start;
+      gap: inherit;
+    }
+
+    .checkmark-container,
+    .radiomark-container {
+      @apply stack;
+      flex-shrink: 0;
+      display: grid;
+      place-items: center;
+
+      .input {
+        @apply transition-scaffold;
+        @apply focus-outline-visible;
+        appearance: none;
+        display: grid;
+        place-content: center;
+        width: var(--size);
+        height: var(--size);
+        margin-block: calc((1lh - var(--size)) / 2);
+        padding: 0;
+        border: var(--border-width, 1px) var(--border-style, solid)
+          var(--border-color, black);
+        font: inherit;
+        background-color: var(--bg-color, transparent);
+
+        &:checked {
+          background-color: var(--border-color);
+        }
+
+        &:active {
+          transform: scale(0.85);
+        }
+
+        &[type='checkbox'] {
+          border-radius: var(--checkbox-radius, var(--border-radius, 0.25em));
+        }
+
+        &[type='radio'] {
+          border-radius: 50%;
+        }
+      }
+    }
+
+    /* Checkbox and SVG */
+    svg {
+      @apply transition-scaffold;
+      pointer-events: none;
+      transition-property: transform, opacity;
+    }
+
+    .checkmark {
+      width: calc(var(--size) - 2px);
+      height: calc(var(--size) - 2px);
+
+      path {
+        @apply transition-scaffold;
+        fill: var(--fill-color);
+        stroke: var(--stroke-color);
+        stroke-width: var(--stroke-width, 3);
+      }
+    }
+
+    .radiomark {
+      width: calc(var(--size) * 1);
+      height: calc(var(--size) * 1);
+
+      circle {
+        @apply transition-scaffold;
+        fill: var(--stroke-color);
+        stroke: var(--stroke-color);
+      }
+    }
+
+    /* Show the SVG/radio item when the input is checked */
+    input:checked {
+      & ~ svg {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      & ~ .checkmark path {
+        @apply transition-scaffold;
+        fill: var(--fill-checked-color);
+        stroke: var(--stroke-checked-color);
+      }
+
+      & ~ .radiomark circle {
+        @apply transition-scaffold;
+        fill: var(--stroke-checked-color);
+        stroke: var(--stroke-checked-color);
+      }
+    }
+
+    /*********************
+     * Text Input that is used along with Checkboxes and Radios *
+     * Usually for an others field *
+     *********************/
+    .text-input {
+      display: none;
+    }
+
+    :where(.group):has(:checked) ~ .text-input {
+      display: block;
+    }
+  }
+}
+
+@layer utility {
+  .checkbox,
+  .radio {
+    @apply checkbox-and-radio;
+    --transition-duration: 125ms;
+    --transition-easing: ease-in;
+  }
+
+  /* TODO: Display flex doesn't work on fieldset */
+  .fieldset,
+  .checkboxes,
+  .radios {
+    @apply vertical;
+    gap: 0.125em;
+  }
+}

package/src/form/index.css

@@ -1,2 +1,4 @@
-@import './text-field.css';
+@import './input.css';
 @import './textarea.css';
+@import './select.css';
+@import './checkbox-and-radio.css';

package/src/form/{text-field.css → input.css}

@@ -30,7 +30,10 @@
     > :where(astro-slot, astro-content, astro-island) > * {
       padding: var(--padding);
       border-width: 0;
-      border-radius: 0;
+
+      &:where(:not(:first-child, :last-child)) {
+        border-radius: 0;
+      }
 
       /* Raise position for nicer focus */
       &:focus,
@@ -53,20 +56,5 @@
 
 /* Use this when you want the button or arrow to be floating over the input element. When doing this, make sure you set a minimum width for the input! (or input-group) */
 .input-group.stack {
-  /* Before elements *
-   *********************/
-  *:has(~ :where(.input)),
-  *:has(~ :where(.input)):where(astro-slot, astro-content, astro-island) > * {
-    z-index: 2;
-    display: flex;
-    place-self: center start;
-  }
-
-  /* After elements *
-   *********************/
-  :where(.input) ~ *,
-  :where(.input) ~ *:where(astro-slot, astro-content, astro-island) > * {
-    display: flex;
-    place-self: center end;
-  }
+  display: grid;
 }

package/src/form/select.css

@@ -0,0 +1,55 @@
+/* The :selected state of the options is fairly customizable in Chrome, somewhat in Firefox, and not at all in Safari. See the CodePen demo for a section that can be uncommented to preview this. */
+/* Might want to create a custom select component in the future */
+@utility select {
+  select {
+    appearance: none;
+    color: var(--text-color);
+    background: var(--bg-color);
+  }
+
+  select[multiple],
+  select[multiple]:focus {
+    overflow: auto;
+    padding: 0;
+
+    option {
+      padding: 0.375em 0.75em;
+      color: var(--text-color);
+      background-image: linear-gradient(
+        0deg,
+        var(--bg-color) 0%,
+        var(--bg-color) 100%
+      );
+    }
+
+    option:hover {
+      color: var(--text-hover-color, var(--text-color));
+      background-image: linear-gradient(
+        0deg,
+        var(--bg-hover-color, var(--bg-color)) 0%,
+        var(--bg-hover-color, var(--bg-color)) 100%
+      );
+    }
+
+    option:focus {
+      color: var(
+        --text-focus-color,
+        var(--text-hover-color, var(--text-color))
+      );
+      background-image: linear-gradient(
+        0deg,
+        var(--bg-focus-color, var(--bg-hover-color, var(--bg-color))) 0%,
+        var(--bg-focus-color, var(--bg-hover-color, var(--bg-color))) 100%
+      );
+    }
+
+    option:checked {
+      color: var(--text-selected-color);
+      background-image: linear-gradient(
+        0deg,
+        var(--bg-selected-color,) 0%,
+        var(--bg-selected-color,) 100%
+      );
+    }
+  }
+}

package/src/generic/anchors-and-buttons.css

@@ -27,17 +27,24 @@
 
 @utility button-icon {
   & {
-    padding: var(--padding, 0.5em);
-    line-height: 1;
+    padding: 0.5em;
   }
 }
 
-@layer utilities {
+@utility button-round {
+  & {
+    border-radius: 50%;
+  }
+}
+
+@layer base {
   a {
     @apply pigment;
+    border-radius: 0;
   }
 
   a:where(:not(.button)) {
+    --bg-color: transparent;
     --border-color: transparent;
   }
 
@@ -48,8 +55,6 @@
   /* focus states with outlines */
   :is(a, button, .button),
   :where([tabindex]:not([tabindex='-1'])) {
-    &:focus-visible {
-      @apply outline-visible;
-    }
+    @apply focus-outline-visible;
   }
 }

package/src/generic/form.css

@@ -17,6 +17,7 @@
   .field {
     @apply pigment;
     @apply border-scaffold;
+    @apply focus-outline-visible;
     display: block;
     width: 100%;
     padding: 0.25em 0.5em;
@@ -26,13 +27,6 @@
     background-color: var(--bg-color);
   }
 
-  input,
-  textarea {
-    &:focus-visible {
-      @apply outline-visible;
-    }
-  }
-
   /* Friendly password dots */
 
   /* See https://pqina.nl/blog/styling-password-field-dots/ */

package/src/layouts/macro/grid.css

@@ -1,12 +1,40 @@
-@theme {
-  --cols: 1;
+@property --cols {
+  syntax: '<integer>';
+  initial-value: 1;
+  inherits: false;
+}
+
+@property --colstart {
+  syntax: '<integer>';
+  initial-value: auto;
+  inherits: false;
+}
+
+/* Gotta test for subgrid after adding inherit-false to --span */
+@property --span {
+  syntax: '<integer>';
+  initial-value: 1;
+  inherits: false;
+}
+
+@property --rowspan {
+  syntax: '<integer>';
+  initial-value: 1;
+  inherits: false;
+}
+
+@property --rowstart {
+  syntax: '<integer>';
+  initial-value: auto;
+  inherits: false;
 }
 
 @utility grid-scaffold {
   & {
-    --span: 1; /* Revert to default span for children in nested grids */
+    /* --span: 1;  */
+    /* Revert to default span for children in nested grids */
     display: grid;
-    gap: var(--gap-y, var(--gap, 1rem)) var(--gap-x, var(--gap, 1rem));
+    gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
     max-width: 100%;
 
     /* width: 100%; */
@@ -15,9 +43,10 @@
     > *,
     > *:where(.contents) > *,
     > *:where(astro-island, astro-slot) > * {
-      --cols: 1; /* Reset cols */
-      grid-column: var(--colstart, auto) / span var(--span, 1);
-      grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+      /* Reset cols */
+      /* --cols: 1;  */
+      grid-column: var(--colstart) / span var(--span);
+      grid-row: var(--rowstart) / span var(--rowspan);
       max-width: 100%;
     }
   }

package/src/layouts/micro/micro.css

@@ -1,7 +1,3 @@
-@theme {
-  --gap: 1rem;
-}
-
 /* Used for every micro utility in this file */
 
 @utility micro {