@splendidlabz/styles 2.3.2 → 3.0.0

package/src/effects/shadows.css

@@ -0,0 +1,49 @@
+/*********************
+ * Shadow Variables *
+ * --shadow-x: 0;
+ * --shadow-y: 0;
+ * --shadow-blur: 0;
+ * --shadow-spread: 0;
+ * --shadow-color: transparent;
+ * --text-shadow-x: 0;
+ * --text-shadow-y: 0;
+ * --text-shadow-blur: 0;
+ * --text-shadow-color: transparent;
+ * --drop-shadow-x: 0;
+ * --drop-shadow-y: 0;
+ * --drop-shadow-blur: 0;
+ * --drop-shadow-color: transparent;
+*********************/
+
+@utility shadow {
+  & {
+    --shadow-string: var(--shadow-x, 0) var(--shadow-y, 0) var(--shadow-blur, 0)
+      var(--shadow-spread, 0) var(--shadow-color, var(--tw-shadow-color));
+    box-shadow: var(--shadow, var(--shadow-string));
+  }
+}
+
+@utility text-shadow {
+  & {
+    --text-shadow-string: var(--text-shadow-x, 0) var(--text-shadow-y, 0)
+      var(--text-shadow-blur, 0) var(--text-shadow-color);
+    text-shadow: var(--text-shadow, var(--text-shadow-string));
+  }
+}
+
+@utility drop-shadow {
+  & {
+    --drop-shadow-string: var(--drop-shadow-x, 0) var(--drop-shadow-y, 0)
+      var(--drop-shadow-blur, 0) var(--drop-shadow-color);
+    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/text-outline.css

@@ -0,0 +1,27 @@
+@utility text-stroke {
+  @supports (-webkit-text-stroke-width: 1px) {
+    /* Need to adjust this font size?? */
+
+    /* font-size: calc(1em - var(--stroke-width, 0.1em) / 2); */
+    -webkit-text-stroke-width: var(--stroke-width, 0.1em);
+    -webkit-text-stroke-color: var(--stroke-color);
+    paint-order: stroke fill;
+  }
+}
+
+/* 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 */
+
+  @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);
+    paint-order: stroke fill;
+  }
+}

package/src/form/index.css

@@ -0,0 +1,2 @@
+@import './text-field.css';
+@import './textarea.css';

package/src/form/text-field.css

@@ -0,0 +1,72 @@
+@utility input-container {
+  & {
+    --padding: 0.25em 0.5em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+
+    :where(.label) {
+      color: var(--text-color, inherit);
+    }
+
+    :where(.hint) {
+      opacity: 0.5;
+    }
+
+    :where(.error) {
+      color: red;
+    }
+  }
+}
+
+@utility input-group {
+  & {
+    @apply pigment;
+    position: relative;
+    display: flex;
+
+    /* Allow all inner items to use the same padding values */
+    > *,
+    > :where(astro-slot, astro-content, astro-island) > * {
+      padding: var(--padding);
+      border-width: 0;
+      border-radius: 0;
+
+      /* Raise position for nicer focus */
+      &:focus,
+      &:focus-visible {
+        z-index: 2;
+      }
+
+      &:first-child {
+        border-start-start-radius: calc(var(--radius) - var(--border-width));
+        border-end-start-radius: calc(var(--radius) - var(--border-width));
+      }
+
+      &:last-child {
+        border-start-end-radius: calc(var(--radius) - var(--border-width));
+        border-end-end-radius: calc(var(--radius) - var(--border-width));
+      }
+    }
+  }
+}
+
+/* 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;
+  }
+}

package/src/form/textarea.css

@@ -0,0 +1,37 @@
+@theme {
+  --textarea-height: 9em;
+}
+
+@layer base {
+  textarea {
+    min-height: var(--textarea-height);
+    resize: vertical;
+    field-sizing: normal; /* Allows textarea to auto */
+  }
+}
+
+/*********************
+ * Autogrowing Textarea, 
+   Feature to be implemented again *
+ *********************/
+/* @layer components { */
+/* .replica { */
+/* This is how textarea text behaves */
+/* white-space: pre-wrap; */
+
+/* Hidden from view, clicks, and screen readers */
+/* visibility: hidden; */
+
+/* &::after { */
+/* content: attr(data-replicated-value) ' '; */
+/* } */
+/* } */
+/* } */
+
+/* .textarea-autogrow { */
+/* textarea { */
+/* Prevents user from resizing so it doesn't screw up the auto resizing */
+/* resize: none;
+    overflow: hidden;
+  }
+} */

package/src/{Base/_Accessibility.scss → generic/accessibility.css}

@@ -1,23 +1,15 @@
-// ========================
-// Remove animations and transitions
-// @see https://hankchizljaw.com/wrote/a-modern-css-reset/
-// ========================
-@layer components {
-  @media (prefers-reduced-motion: reduce) {
-    * {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
-
-  // ========================
-  // Hides content visually.
-  // So it's only available to screen readers and bots 🤖
-  // Solution by Joe Watkins.
-  // @see https://zellwk.com/blog/hide-content-accessibly/
-  // ========================
+/*********************
+* Remove animations and transitions *
+@see https://hankchizljaw.com/wrote/a-modern-css-reset/
+========================
+*********************/
+@layer base {
+  /*********************
+  * Hides content visually. *
+  So it's only available to screen readers and bots 🤖
+  Solution by Joe Watkins.
+  @see https://zellwk.com/blog/hide-content-accessibly/
+  **********************/
   .sr-only {
     overflow: hidden;
     position: absolute;
@@ -29,4 +21,13 @@
     clip: rect(0 0 0 0);
     white-space: nowrap;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
 }

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

@@ -0,0 +1,55 @@
+@utility button {
+  & {
+    @apply pigment-with-svg;
+    flex-shrink: 0; /* Prevents button from shrinking when used in flex elements */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5em;
+    max-width: 100%;
+    padding: 0.25em 1em;
+    font: inherit;
+    font-family: var(--input-font);
+    text-decoration: none !important;
+    cursor: pointer;
+
+    * {
+      pointer-events: none;
+    }
+
+    svg path {
+      @apply transition-scaffold;
+      transition: var(--transition-values);
+      transition-property: var(--transition-props);
+    }
+  }
+}
+
+@utility button-icon {
+  & {
+    padding: var(--padding, 0.5em);
+    line-height: 1;
+  }
+}
+
+@layer utilities {
+  a {
+    @apply pigment;
+  }
+
+  a:where(:not(.button)) {
+    --border-color: transparent;
+  }
+
+  button {
+    @apply button;
+  }
+
+  /* focus states with outlines */
+  :is(a, button, .button),
+  :where([tabindex]:not([tabindex='-1'])) {
+    &:focus-visible {
+      @apply outline-visible;
+    }
+  }
+}

package/src/generic/form.css

@@ -0,0 +1,62 @@
+@layer base {
+  fieldset {
+    border: none;
+  }
+
+  /* Text inputs */
+  input:where(
+      [type='text'],
+      [type='search'],
+      [type='email'],
+      [type='password'],
+      [type='tel'],
+      [type='url']
+    ),
+  textarea,
+  select,
+  .field {
+    @apply pigment;
+    @apply border-scaffold;
+    display: block;
+    width: 100%;
+    padding: 0.25em 0.5em;
+    font: inherit;
+    font-family: var(--input-font);
+    color: var(--text-color, currentcolor);
+    background-color: var(--bg-color);
+  }
+
+  input,
+  textarea {
+    &:focus-visible {
+      @apply outline-visible;
+    }
+  }
+
+  /* Friendly password dots */
+
+  /* See https://pqina.nl/blog/styling-password-field-dots/ */
+  input[type='password'] {
+    font-family: Verdana, sans-serif;
+    letter-spacing: 0.125em;
+  }
+
+  /* disabled and readonly states */
+  .disabled,
+  .readonly,
+  [disabled],
+  [readonly] {
+    opacity: 0.5;
+
+    &:where(input) {
+      /* Super simple way. Styles can be improved. */
+      cursor: not-allowed;
+    }
+
+    /* Prevents users from focusing on them */
+    &:focus,
+    &:focus-visible {
+      outline-color: transparent;
+    }
+  }
+}

package/src/generic/index.css

@@ -0,0 +1,4 @@
+@import './accessibility.css';
+@import './typography.css';
+@import './form.css';
+@import './anchors-and-buttons.css';

package/src/generic/typography.css

@@ -0,0 +1,48 @@
+@layer base {
+  /*********************
+  * HTML and Body *
+  * We don't set a default typography size here because it's better for the user to set it in the root of the project.
+  *********************/
+  html {
+    font-family: system-ui, sans-serif;
+    line-height: var(--leading, 1.5);
+    font-variant-ligatures: common-ligatures;
+  }
+
+  body {
+    color: var(--text-color);
+    background-color: var(--bg-color);
+    text-rendering: optimizelegibility;
+  }
+
+  /*********************
+  * Nicer Headers *
+  *********************/
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-variant-numeric: oldstyle-nums proportional-nums;
+  }
+
+  pre {
+    padding: 1em;
+    border-radius: var(--radius);
+  }
+
+  code {
+    font-size: 0.8em;
+
+    :not(pre) > & {
+      display: inline;
+      padding: 0.2em 0.25em;
+      border-radius: var(--radius);
+    }
+
+    pre > & {
+      background-color: transparent;
+    }
+  }
+}

package/src/layouts/index.css

@@ -0,0 +1,6 @@
+/* Micro needs to come first 
+because it contains vertical that macro uses */
+@import './micro/index.css';
+@import './shell/index.css';
+@import './macro/index.css';
+@import './position/index.css';

package/src/layouts/macro/flex-grid.css

@@ -0,0 +1,33 @@
+@utility flex-grid {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--gap, 1rem);
+  max-width: 100%;
+
+  > *,
+  > *:where(astro-island, astro-slot) > *,
+  > :where(.contents) > * {
+    --one-column: var(--gap, 1rem) * (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)
+      );
+    min-width: min(100%, var(--item-width, 3rem));
+    max-width: 100%;
+  }
+}
+
+@utility flex-grid-gallery {
+  & {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--gap, 1rem);
+    max-width: 100%;
+
+    > * {
+      flex: 1 1 0px;
+      min-width: var(--item-width, 3rem);
+    }
+  }
+}

package/src/layouts/macro/grid.css

@@ -0,0 +1,127 @@
+@theme {
+  --cols: 1;
+}
+
+@utility grid-scaffold {
+  & {
+    --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));
+    max-width: 100%;
+
+    /* width: 100%; */
+    /* margin-inline: auto; */
+
+    > *,
+    > *: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);
+      max-width: 100%;
+    }
+  }
+}
+
+/*********************
+ * Simple Grid and Repeat Auto *
+ *********************/
+@utility grid-simple {
+  @apply grid-scaffold;
+  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
+}
+
+@utility grid-repeat-auto {
+  @apply grid-scaffold;
+  grid-template-columns: repeat(var(--cols, 1), minmax(0, auto));
+}
+
+/*********************
+ * Fr Auto / Auto Fr *
+ * These are often used with :md modifier
+ *********************/
+@utility grid-fr-auto {
+  @apply grid-scaffold;
+  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
+}
+
+@utility grid-auto-fr {
+  @apply grid-scaffold;
+  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
+}
+
+@utility grid-with-breakout {
+  & {
+    @apply grid-scaffold;
+    grid-template-columns:
+      [breakout-start] 1fr [content-start] repeat(
+        var(--cols, 1),
+        minmax(0, 1fr)
+      )
+      [content-end] 1fr [breakout-end];
+
+    > *:not([class*='breakout-full']) {
+      grid-column: content-start / content-end;
+    }
+
+    > *:where(.breakout-full) {
+      grid-column: breakout-start / breakout-end;
+    }
+  }
+}
+
+/*********************
+ * Galleries *
+ *********************/
+@utility grid-gallery {
+  @apply grid-scaffold;
+  grid-template-columns: repeat(
+    var(--fit, auto-fill),
+    minmax(min(var(--item-width, 3rem), 100%), 1fr)
+  );
+}
+
+@utility grid-gallery-fit {
+  @apply grid-gallery;
+  --fit: auto-fit;
+}
+
+@utility grid-gallery-fill {
+  @apply grid-gallery;
+  --fit: auto-fill;
+}
+
+/*********************
+ * Useful grid utilities *
+ *********************/
+@utility dense {
+  grid-auto-flow: dense;
+}
+
+@utility dense-column {
+  grid-auto-columns: dense;
+}
+
+@utility dense-row {
+  grid-auto-rows: dense;
+}
+
+/*********************
+ * Two Column Alternate Grid *
+ *********************/
+
+@utility grid-alternate {
+  & {
+    &[data-start='left'] {
+      :where(& ~ .grid-alternate:nth-child(even)) .right-col {
+        order: -1;
+      }
+    }
+
+    &[data-start='right'] {
+      :where(&, & ~ .grid-alternate:nth-child(odd)) .right-col {
+        order: -1;
+      }
+    }
+  }
+}

package/src/layouts/macro/index.css

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

package/src/layouts/macro/masonry.css

@@ -0,0 +1,23 @@
+@utility masonry {
+  & {
+    @apply grid-repeat-auto;
+    grid-template-rows: masonry;
+
+    > *,
+    > *:where(.contents) > *,
+    > *:where(astro-island, astro-slot) > * {
+      grid-column-end: span var(--span, 1);
+      align-self: start;
+    }
+  }
+}
+
+@utility masonry-gallery {
+  & {
+    @apply masonry;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(var(--item-width, 3rem), 100%), 1fr)
+    );
+  }
+}

package/src/layouts/macro/subgrid.css

@@ -0,0 +1,33 @@
+@utility subgrid-scaffold {
+  display: grid;
+  gap: inherit;
+}
+
+@utility subgrid {
+  @apply subgrid-columns;
+  @apply subgrid-rows;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
+}
+
+@utility subgrid-columns {
+  @apply subgrid-scaffold;
+  grid-column: var(--start, auto) / span var(--span, 1);
+  grid-template-columns: subgrid;
+
+  > *:not([class*='subgrid']) {
+    grid-column-end: span var(--ispan, 1);
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
+@utility subgrid-rows {
+  @apply subgrid-scaffold;
+  grid-row: var(--rowstart, auto) / span var(--rowspan, 1);
+  grid-template-rows: subgrid;
+
+  > *:not([class*='subgrid']) {
+    grid-row-end: span var(--irowspan, 1);
+  }
+}

package/src/layouts/macro/wrap.css

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

package/src/layouts/micro/breakout.css

@@ -0,0 +1,38 @@
+/* prettier-ignore */
+@utility breakout-* {
+  margin-inline: --value(--spacing-*);
+}
+
+/* prettier-ignore */
+@utility breakout-x-* {
+  margin-inline: --value(--spacing-*);
+}
+
+/* prettier-ignore */
+@utility breakout-l-* {
+  margin-inline-start: --value(--spacing-*);
+}
+
+/* prettier-ignore */
+@utility breakout-r-* {
+  margin-inline-end: --value(--spacing-*);
+}
+
+/*********************
+ * Vertical breakouts *
+ *********************/
+
+/* prettier-ignore */
+@utility breakout-y-* {
+  margin-block: --value(--spacing-*);
+}
+
+/* prettier-ignore */
+@utility breakout-t-* {
+  margin-block-start: --value(--spacing-*);
+}
+
+/* prettier-ignore */
+@utility breakout-b-* {
+  margin-block-end: --value(--spacing-*);
+}