@splendidlabz/styles 4.0.0-alpha.2 → 4.0.0-beta.3

package/src/effects/text.css

@@ -9,8 +9,6 @@
   }
 }
 
-/* Extends Text-stroke */
-
 /* Sets color to background color and stroke to actual color you want for the stroke */
 @utility text-outline {
   color: var(--stroke-color); /* fallback */
@@ -18,10 +16,44 @@
   @supports (-webkit-text-stroke-width: 1px) {
     font-size: calc(1em - var(--stroke-width, 0.1em) / 2);
     color: var(--bg-color);
-    -webkit-text-stroke-width: var(--stroke-width, 2px);
-
-    /* // We cannot use currentcolor because current color is set to --bg-color. That's why we need a --stroke variable */
     -webkit-text-stroke-color: var(--stroke-color);
+
+    /* We cannot use currentcolor because current color is set to --bg-color. That's why we need a --stroke variable */
+    -webkit-text-stroke-width: var(--stroke-width, 0.1em);
     paint-order: stroke fill;
   }
 }
+
+@utility writing-normal {
+  transition: none;
+  writing-mode: horizontal-tb;
+}
+
+@utility writing-rotate-left {
+  transform: rotate(180deg);
+  transition: none;
+  writing-mode: vertical-rl;
+  text-orientation: sideways;
+
+  /* // transform: scale( -1, -1 ); // This is the alternative if we don't want to use rotate (though I'm not sure if there is a specific reason why. */
+}
+
+@utility writing-rotate-right {
+  transition: none;
+  writing-mode: vertical-rl;
+  text-orientation: sideways;
+}
+
+@utility writing-downwards {
+  writing-mode: vertical-lr;
+  text-orientation: upright;
+}
+
+@utility writing-downwards-lr {
+  @apply writing-downwards;
+}
+
+@utility writing-downwards-rl {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}

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

@@ -24,7 +24,7 @@
 
       .input {
         @apply transition-scaffold;
-        @apply focus-outline-visible;
+        @apply outline-scaffold;
         appearance: none;
         display: grid;
         place-content: center;

package/src/form/input.css

@@ -1,9 +1,9 @@
 @utility input-container {
   & {
-    --padding: 0.25em 0.5em;
+    --padding: 0.25lh 0.5lh;
     display: flex;
     flex-direction: column;
-    gap: 0.25em;
+    gap: 0.25lh;
 
     :where(.label) {
       color: var(--text-color, inherit);

package/src/form/textarea.css

@@ -6,6 +6,7 @@
   textarea {
     min-height: var(--textarea-height);
     resize: vertical;
+    /* stylelint-disable-next-line */
     field-sizing: normal; /* Allows textarea to auto */
   }
 }

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

@@ -39,8 +39,9 @@
 
 @layer base {
   a {
-    @apply pigment;
+    @apply pigment-with-svg;
     border-radius: 0;
+    text-decoration: none;
   }
 
   a:where(:not(.button)) {
@@ -55,6 +56,6 @@
   /* focus states with outlines */
   :is(a, button, .button),
   :where([tabindex]:not([tabindex='-1'])) {
-    @apply focus-outline-visible;
+    @apply outline-scaffold;
   }
 }

package/src/generic/form.css

@@ -17,10 +17,10 @@
   .field {
     @apply pigment;
     @apply border-scaffold;
-    @apply focus-outline-visible;
+    @apply outline-scaffold;
     display: block;
     width: 100%;
-    padding: 0.25em 0.5em;
+    padding: 0.25lh 0.5lh;
     font: inherit;
     font-family: var(--input-font);
     color: var(--text-color, currentcolor);

package/src/layouts/macro/{flex-grid.css → grid-flex.css}

@@ -1,28 +1,29 @@
-@utility flex-grid {
+@utility grid-flex {
+  --_cols: var(--cols);
   display: flex;
   flex-flow: row wrap;
-  gap: var(--gap, 1rem);
+  gap: var(--gap, 1rlh);
   max-width: 100%;
 
   > *,
   > *:where(astro-island, astro-slot) > *,
   > :where(.contents) > * {
-    --one-column: var(--gap, 1rem) * (var(--cols, 1) - 1);
+    --one-column: var(--gap, 1rlh) * (var(--_cols, 1) - 1);
     flex: var(--grow, var(--span, 1)) var(--span, 1)
       calc(
-        (100% - var(--one-column)) / var(--cols, 1) * var(--span, 1) +
-          (var(--span, 1) - 1) * var(--gap, 1rem)
+        (100% - var(--one-column)) / var(--_cols, 1) * var(--span, 1) +
+          (var(--span, 1) - 1) * var(--gap, 1rlh)
       );
     min-width: min(100%, var(--item-width, 3rem));
     max-width: 100%;
   }
 }
 
-@utility flex-grid-gallery {
+@utility grid-flex-gallery {
   & {
     display: flex;
     flex-flow: row wrap;
-    gap: var(--gap, 1rem);
+    gap: var(--gap, 1rlh);
     max-width: 100%;
 
     > * {

package/src/layouts/macro/grid.css

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

package/src/layouts/macro/index.css

@@ -1,5 +1,5 @@
 @import './grid.css';
 @import './subgrid.css';
 @import './masonry.css';
-@import './flex-grid.css';
+@import './grid-flex.css';
 @import './wrap.css';

package/src/layouts/macro/subgrid.css

@@ -12,12 +12,11 @@
 
 @utility subgrid-columns {
   @apply subgrid-scaffold;
-  grid-column: var(--start, auto) / span var(--span, 1);
+  grid-column: var(--colstart, auto) / span var(--span, 1);
   grid-template-columns: subgrid;
 
   > *:not([class*='subgrid']) {
-    grid-column-end: span var(--ispan, 1);
-    width: 100%;
+    grid-column-end: span var(--span, 1);
     max-width: 100%;
   }
 }
@@ -28,6 +27,6 @@
   grid-template-rows: subgrid;
 
   > *:not([class*='subgrid']) {
-    grid-row-end: span var(--irowspan, 1);
+    grid-row-end: span var(--rowspan, 1);
   }
 }

package/src/layouts/macro/wrap.css

@@ -2,5 +2,5 @@
  * Wrap *
  *********************/
 @utility wrap {
-  padding-inline: var(--wrap-padding, 1rem);
+  padding-inline: var(--wrap-padding, 1rlh);
 }

package/src/layouts/micro/breakout.css

@@ -1,21 +1,25 @@
 /* prettier-ignore */
 @utility breakout-* {
-  margin-inline: --value(--spacing-*);
+  margin-inline: calc(var(--spacing) * --value(integer) * -1);
+  margin-inline: calc(--value([length]) * -1);
 }
 
 /* prettier-ignore */
 @utility breakout-x-* {
-  margin-inline: --value(--spacing-*);
+  margin-inline: calc(var(--spacing) * --value(integer) * -1);
+  margin-inline: calc(--value([length]) * -1);
 }
 
 /* prettier-ignore */
 @utility breakout-l-* {
-  margin-inline-start: --value(--spacing-*);
+  margin-inline-start: calc(var(--spacing) * --value(integer) * -1);
+  margin-inline-start: calc(--value([length]) * -1);
 }
 
 /* prettier-ignore */
 @utility breakout-r-* {
-  margin-inline-end: --value(--spacing-*);
+  margin-inline-end: calc(var(--spacing) * --value(integer) * -1);
+  margin-inline-end: calc(--value([length]) * -1);
 }
 
 /*********************
@@ -24,15 +28,18 @@
 
 /* prettier-ignore */
 @utility breakout-y-* {
-  margin-block: --value(--spacing-*);
+  margin-block: calc(var(--spacing) * --value(integer) * -1);
+  margin-block: calc(--value([length]) * -1);
 }
 
 /* prettier-ignore */
 @utility breakout-t-* {
-  margin-block-start: --value(--spacing-*);
+  margin-block-start: calc(var(--spacing) * --value(integer) * -1);
+  margin-block-start: calc(--value([length]) * -1);
 }
 
 /* prettier-ignore */
 @utility breakout-b-* {
-  margin-block-end: --value(--spacing-*);
+  margin-block-end: calc(var(--spacing) * --value(integer) * -1);
+  margin-block-end: calc(--value([length]) * -1);
 }

package/src/layouts/micro/divider.css

@@ -1,11 +1,13 @@
 @utility divider-scaffold {
   & {
     align-self: stretch;
+    display: flex;
+    align-items: center;
     padding: 0 !important;
     border-radius: 0 !important;
 
     &:where(:not(:empty)) {
-      gap: var(--gap, 1rem);
+      gap: var(--gap, 1rlh);
     }
 
     &::before,
@@ -20,8 +22,6 @@
   & {
     @apply divider-scaffold;
     flex-grow: 1;
-    display: flex;
-    align-items: center;
 
     &::before,
     &::after {
@@ -34,14 +34,7 @@
 @utility divider-y {
   & {
     @apply divider-scaffold;
-    align-self: stretch;
-    display: flex;
     flex-direction: column;
-    align-items: center;
-
-    :where(.vertical, .single-col, .wrap) > & {
-      flex-grow: 1;
-    }
 
     &::before,
     &::after {
@@ -66,7 +59,6 @@
  *********************/
 @utility divider-between-x {
   & {
-    @apply divider-scaffold;
     flex-direction: column;
     row-gap: 0;
 
@@ -80,7 +72,6 @@
 
 @utility divider-between-y {
   & {
-    @apply divider-scaffold;
     column-gap: 0;
 
     > * + *,

package/src/layouts/micro/micro.css

@@ -34,12 +34,6 @@
   }
 }
 
-/* Set alignment to stretch so children are stretched by default  */
-@utility single-col {
-  @apply vertical;
-  align-items: stretch;
-}
-
 /* flow *
  *********************/
 @utility flow {

package/src/layouts/micro/scrollable.css

@@ -1,13 +1,13 @@
 @theme {
   --snap-align: start;
   --snap-type: proximity;
-  --scroll-margin: 1rem;
+  --scroll-margin: 1rlh;
 }
 
 @utility scrollable {
   & {
     display: flex;
-    gap: var(--gap, 1rem);
+    gap: var(--gap, 1rlh);
 
     > :where(*) {
       flex-grow: 0;
@@ -37,18 +37,6 @@
   }
 }
 
-/* Maybe Blog about this.
-  These three properties used to preserve outlines, because overflow cuts off outlines. Content-box is necessary. If not, box will cut on the right side. (in Flex environments). */
-@utility scrollable-preserve-outlines {
-  & {
-    box-sizing: content-box;
-    margin: calc(var(--outline-width) * -1);
-    padding: calc(var(--outline-width));
-  }
-}
-
-/* Does this work? */
-
 /* prettier-ignore */
 @utility snap-type-* {
   --snap-type: --value(--snap-type-*);

package/src/layouts/micro/stack.css

@@ -8,6 +8,7 @@
     &::before,
     &::after,
     > *,
+    > *:where(.contents) > *,
     > *:where(astro-island, astro-slot) > * {
       position: relative;
       z-index: 1;