@splendidlabz/styles 2.2.0

package/.stylelintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@splendidlabz/stylelint-config'],
+}

package/.turbo/turbo-lint.log

@@ -0,0 +1,4 @@
+
+> @splendidlabs/scss@1.0.0 lint
+> stylelint '**/*.{css,scss}' --fix
+

package/Base/_Accessibility.scss

@@ -0,0 +1,32 @@
+// ========================
+// 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/
+  // ========================
+  .sr-only {
+    overflow: hidden;
+    position: absolute;
+    width: 1px;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+}

package/Base/_Base.scss

@@ -0,0 +1,57 @@
+// ========================
+// 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.
+// ========================
+@layer components {
+  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;
+  }
+
+  // ========================
+  // Default form and buttons decorations
+  // ========================
+  fieldset {
+    border: none;
+  }
+
+  a {
+    color: var(--text-color, currentcolor);
+    text-decoration: none;
+
+    &:visited {
+      color: var(--text-visited-color, var(--text-color, currentcolor));
+    }
+
+    &:hover {
+      color: var(--text-hover-color);
+    }
+
+    &:focus {
+      color: var(--text-focus-color, var(--text-hover-color));
+    }
+
+    &:active {
+      color: var(--text-active-color, var(--text-hover-color));
+    }
+  }
+}

package/Base/_Focus.scss

@@ -0,0 +1,38 @@
+// Might have to rename this file to Outlines instead
+// Setup Outlines for all elements for transitions and animations. If we do this, we don't have to specify each focusable element (which can be a lot).
+
+@layer components {
+  * {
+    outline: var(--outline-width) var(--outline-style) transparent;
+    outline-offset: var(--outline-offset);
+  }
+
+  // Styling Focus Visible States
+  a,
+  button,
+  :where([tabindex]:not([tabindex='-1'])) {
+    &:focus-visible {
+      outline-color: var(--outline-color);
+    }
+  }
+
+  .Focus-within {
+    &:focus-within {
+      outline: var(--outline-width) var(--outline-style) transparent;
+      outline-offset: var(--outline-offset);
+    }
+
+    *:focus-visible {
+      outline-color: transparent;
+    }
+  }
+
+  // TODO: Blog about this.
+  // These three properties used to preserve outlines, because overflow cuts off outlines. For scrollable elements.
+  // Content-box is necessary. If not, box will cut on the right side.
+  .Preserve-outlines {
+    box-sizing: content-box;
+    margin: calc(var(--outline-width) * -1);
+    padding: calc(var(--outline-width));
+  }
+}

package/Base/_Transition.scss

@@ -0,0 +1,8 @@
+// Prepares every element for transition
+// This doesn't work and creates a lot of problems
+// @layer components {
+//   * {
+//     transition: none var(--transition-values);
+//     transition-property: var(--transition-props);
+//   }
+// }

package/Base/_index.scss

@@ -0,0 +1,4 @@
+@use 'Accessibility';
+@use 'Base';
+@use 'Focus';
+@use 'Transition';

package/CHANGELOG.md

@@ -0,0 +1,56 @@
+# @splendidlabz/styles
+
+## 2.2.0
+
+### Minor Changes
+
+- - Changed default button styles
+  - Removed `text:balance` from `Prose`
+  - Update Callout Styles
+
+## 2.1.3
+
+### Patch Changes
+
+- Fix Layouts dependency
+
+## 2.1.2
+
+### Patch Changes
+
+- - Update `PopoverContent` and `DrawerContent` default z-index values.
+  - `Divider` classes from influencing any class with `Divider` class names by modifying the `*=` class selector to target `Divider-`.
+
+## 2.1.1
+
+### Patch Changes
+
+- Prevent Divider class from influencing others with the 'Divider' name
+
+## 2.1.0
+
+### Minor Changes
+
+- Add robust before/after element styling with InputGroup
+
+### Patch Changes
+
+- Cleanup form base styles
+- 8ef3178: Ensure combobox options use default cursor
+
+## 2.0.0
+
+### Major Changes
+
+- 6c6ecec: Cleaned up Layouts by moving non-layout related components and declarations from `@splendidlabz/layouts` to `@splendidlabz/styles`.
+
+  Changes include:
+
+  - Moving `Box` and `Shapes` to `@splendidlabz/styles`
+  - Moving style-related resets to `@splendidlabz/styles`
+  - Moving accessibility preferences to `@splendidlabz/styles`
+  - Moving typography preferences to `@splendidlabz/styles`
+
+### Minor Changes
+
+- a9128f4: - Add `disabled` and `readonly` input styles

package/Components/_Box.scss

@@ -0,0 +1,9 @@
+@layer components {
+  .Box {
+    // overflow: hidden;
+    padding: 1rem;
+    border: var(--border-width, 1px) var(--border-style, solid)
+      var(--border-color, black);
+    border-radius: var(--radius, 0.5em);
+  }
+}

package/Components/_BrowserFrame.scss

@@ -0,0 +1,89 @@
+// radius
+// bg-frame-header. NEED FALLBACK COLOR
+// bg-frame-content. NEED FALLBACK COLOR
+// border-width
+// border-frame-header
+// border-frame-content
+// border-color
+
+// dot-size
+// dot-gap
+// dot-color
+// dot-1-color
+// dot-2-color
+// dot-3-color
+
+@layer components {
+  :where([class*='BrowserFrame']) {
+    .FrameHeader {
+      display: flex;
+      flex-flow: row;
+      align-items: center;
+      border: var(--border-width, 1px) solid
+        var(--border-frame-header, var(--border-color));
+      border-bottom: 0;
+      border-radius: var(--radius) var(--radius) 0 0;
+      background: var(--bg-frame-header);
+    }
+
+    .FrameHeaderDots {
+      display: flex;
+      flex-flow: row;
+      align-items: center;
+      gap: var(--dot-gap, 0.5rem);
+      padding: 0.75rem 1rem;
+    }
+
+    .FrameHeaderDot {
+      width: var(--dot-size, 0.7rem);
+      height: var(--dot-size, 0.7rem);
+      border-radius: 50%;
+      background-color: var(--dot-color, #424242);
+    }
+
+    .FrameHeaderTabs {
+      overflow: hidden;
+      align-self: end;
+      padding-top: 0.5rem;
+
+      .Tablist {
+        gap: 0.25rem;
+        padding-inline: calc(var(--outline-width) * 2);
+      }
+    }
+
+    .FrameContent {
+      border: var(--border-width, 1px) solid
+        var(--border-frame-content, var(--border-color));
+      border-radius: 0 0 var(--radius) var(--radius);
+      background: var(--bg-frame-content);
+
+      > :where(.Content) {
+        // overflow: auto;
+        padding: 1rem;
+      }
+
+      > :where(.Background) svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  // Colored dots
+  .BrowserFrame-colored {
+    .FrameHeaderDot {
+      &:first-child {
+        background-color: var(--dot-1-color, #e2544d);
+      }
+
+      &:nth-child(2) {
+        background-color: var(--dot-2-color, #d79f27);
+      }
+
+      &:last-child {
+        background-color: var(--dot-3-color, #22a936);
+      }
+    }
+  }
+}

package/Components/_Figure.scss

@@ -0,0 +1,5 @@
+figcaption {
+  margin-block: 0.5em;
+  font-size: 0.8em;
+  text-align: center;
+}

package/Components/_List.scss

@@ -0,0 +1,19 @@
+@layer components {
+  // Not sure what is used for now... might be able to delete.
+  .List {
+    margin-left: 1em;
+    list-style-position: outside;
+
+    > :where(ul, ol) {
+      padding-left: 1em;
+    }
+  }
+
+  ul[class~='List'] {
+    list-style-type: disc;
+  }
+
+  ol[class='List'] {
+    list-style: decimal;
+  }
+}

package/Components/_Prose.scss

@@ -0,0 +1,82 @@
+@layer components {
+  // Updating Prose to use Flex too, but this is incomplete
+  .Prose {
+    display: flex;
+    flex-flow: column;
+    gap: 1em;
+    max-width: 100%;
+
+    // Using padding instead of margin, so #targets will leave some whitespace above when scolling to the component. (We can also use scroll-margin-top + margin-top... but this is simpler).
+    * + :where(h2, h3),
+    * + :where(astro-island, astro-slot) > :where(:where(h2, h3):first-child) {
+      padding-top: 2em;
+    }
+
+    * + :where(h4, h5, h6),
+    *
+      + :where(astro-island, astro-slot)
+      > :where(:where(h4, h5, h6):first-child) {
+      padding-top: 1em;
+    }
+
+    :where(ul, ol) {
+      list-style-type: revert-layer;
+    }
+
+    // Basic list styles
+    > :where(ul, ol),
+    > :where(astro-island, astro-slot) > :where(ul, ol) {
+      list-style-position: outside;
+      margin-left: 2em;
+
+      :where(ul, ol) {
+        padding-left: 2em;
+      }
+
+      li {
+        font-variant-numeric: lining-nums;
+      }
+
+      li + li {
+        margin-top: 0.25em;
+      }
+
+      li:has(li) + li {
+        margin-top: 0.5em;
+      }
+
+      li > :where(ul, ol) {
+        margin-top: 0.25em;
+      }
+    }
+
+    code {
+      font-size: 0.8em;
+    }
+
+    :not(pre) > code {
+      display: inline;
+      padding: 0.2em 0.25em;
+      border-radius: var(--radius);
+    }
+
+    // Code Styles
+    pre {
+      padding: 1em;
+      border-radius: var(--radius);
+
+      code {
+        background-color: transparent;
+      }
+    }
+
+    :where(a) {
+      text-decoration: underline;
+    }
+
+    > img {
+      border: 1px solid oklch(90% 0 0deg);
+      border-radius: var(--radius);
+    }
+  }
+}

package/Components/_Scrollbars.scss

@@ -0,0 +1,40 @@
+// Custom Scrollbars
+:root {
+  --scrollbar-width: thin;
+  --scrollbar-size: 12px;
+  color-scheme: dark light;
+
+  @media (prefers-color-scheme: light) {
+    --scrollbar-thumb-color: #c1c1c1;
+    --scrollbar-track-color: #fafafa;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --scrollbar-thumb-color: #6b6b6b;
+    --scrollbar-track-color: #2d2d2d;
+  }
+}
+
+@layer components {
+  * {
+    scroll-behavior: var(--scroll-behavior, smooth);
+    scrollbar-width: var(--scrollbar-width, auto);
+    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+
+    /* Works on Chrome, Edge, and Safari */
+    &::-webkit-scrollbar {
+      width: var(--scrollbar-size);
+      height: var(--scrollbar-size);
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--scrollbar-track-color);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border: 3px solid var(--scrollbar-track-color);
+      border-radius: 100px;
+      background-color: var(--scrollbar-thumb-color);
+    }
+  }
+}

package/Components/_SimpleSVG.scss

@@ -0,0 +1,9 @@
+@layer components {
+  .SimpleSVG {
+    :where(path) {
+      fill: var(--fill-color);
+      stroke: var(--stroke-color); // Fallback to text color
+      stroke-width: var(--stroke-width);
+    }
+  }
+}

package/Components/_index.scss

@@ -0,0 +1,12 @@
+// ========================
+// Components
+// ========================
+// These can be used without JavaScript
+
+@use 'Box';
+@use 'Scrollbars';
+@use 'BrowserFrame';
+@use 'List';
+@use 'Prose';
+@use 'Figure';
+@use 'SimpleSVG';

package/Effects/_Backdrop.scss

@@ -0,0 +1,4 @@
+.Backdrop-blur {
+  transition-property: backdrop-filter;
+  backdrop-filter: blur(var(--blur, 8px));
+}

package/Effects/_Elevation.scss

@@ -0,0 +1,92 @@
+@use './SpecialShadows' as *;
+
+@layer components {
+  @for $i from 1 through 6 {
+    .elevation-#{$i} {
+      --shadow-color: rgb(0 0 0 / 8%);
+
+      @include StackedShadow($elevation: $i);
+    }
+  }
+
+  .tw-elevation {
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  }
+
+  .tw-elevation-2 {
+    box-shadow:
+      0 1px 3px 0 rgb(0 0 0 / 10%),
+      0 1px 2px -1px rgb(0 0 0 / 10%);
+  }
+
+  .tw-elevation-3 {
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 10%),
+      0 2px 4px -2px rgb(0 0 0 / 10%);
+  }
+
+  .tw-elevation-4 {
+    box-shadow:
+      0 10px 15px -3px rgb(0 0 0 / 10%),
+      0 4px 6px -4px rgb(0 0 0 / 10%);
+  }
+
+  .tw-elevation-5 {
+    box-shadow:
+      0 20px 25px -5px rgb(0 0 0 / 10%),
+      0 8px 10px -6px rgb(0 0 0 / 10%);
+  }
+
+  .tw-elevation-6 {
+    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
+  }
+
+  .mui-elevation-1 {
+    box-shadow:
+      0 2px 1px -1px rgb(0 0 0 / 20%),
+      0 1px 1px 0 rgb(0 0 0 / 14%),
+      0 1px 3px 0 rgb(0 0 0 / 12%);
+  }
+
+  .mui-elevation-2 {
+    box-shadow:
+      0 3px 1px -2px rgb(0 0 0 / 20%),
+      0 2px 2px 0 rgb(0 0 0 / 14%),
+      0 1px 5px 0 rgb(0 0 0 / 12%);
+  }
+
+  .mui-elevation-3 {
+    box-shadow:
+      0 3px 3px -2px rgb(0 0 0 / 20%),
+      0 3px 4px 0 rgb(0 0 0 / 14%),
+      0 1px 8px 0 rgb(0 0 0 / 12%);
+  }
+
+  .mui-elevation-4 {
+    box-shadow:
+      0 2px 4px -1px rgb(0 0 0 / 20%),
+      0 4px 5px 0 rgb(0 0 0 / 14%),
+      0 1px 10px 0 rgb(0 0 0 / 12%);
+  }
+
+  .mui-elevation-5 {
+    box-shadow:
+      0 3px 5px -1px rgb(0 0 0 / 20%),
+      0 5px 8px 0 rgb(0 0 0 / 14%),
+      0 1px 14px 0 rgb(0 0 0 / 12%);
+  }
+
+  .mui-elevation-6 {
+    box-shadow:
+      0 3px 5px -1px rgb(0 0 0 / 20%),
+      0 6px 10px 0 rgb(0 0 0 / 14%),
+      0 1px 18px 0 rgb(0 0 0 / 12%);
+  }
+
+  .mui-elevation-7 {
+    box-shadow:
+      0 4px 5px -2px rgb(0 0 0 / 20%),
+      0 7px 10px 1px rgb(0 0 0 / 14%),
+      0 2px 16px 1px rgb(0 0 0 / 12%);
+  }
+}

package/Effects/_Glow.scss

@@ -0,0 +1,51 @@
+// Not ready. May be removing this in favour of shadow instead.
+@layer components {
+  .glow {
+    --shadow-x: 0;
+    --shadow-y: 0;
+    --shadow-blur: 0.5em;
+    --shadow-spread: 0.25em;
+    --shadow-alpha: 0.5;
+
+    position: relative;
+
+    > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    &:hover,
+    &:focus {
+      --shadow-alpha: 1;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      // Required if parent element is inline-block.
+      // Not required if parent element is inline-flex
+      top: calc(var(--border-width, 0px) * -1);
+      left: calc(var(--border-width, 0px) * -1);
+      box-sizing: content-box;
+      width: 100%;
+      height: 100%;
+      border: inherit;
+      border-radius: inherit;
+      box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur)
+        var(--shadow-spread) var(--shadow-color);
+      opacity: var(--shadow-alpha);
+      transition: var(--transition-values);
+      transition-property: opacity;
+    }
+  }
+
+  .glow-2 {
+    --shadow-blur: 1em;
+    --shadow-spread: 0.375em;
+  }
+
+  .glow-3 {
+    --shadow-blur: 1.5em;
+    --shadow-spread: 0.5em;
+  }
+}