@inc2734/unitone-css 0.102.4 → 1.0.0

package/src/layout-primitives/with-sidebar/_with-sidebar-core.scss

@@ -1,304 +0,0 @@
-@use 'sass:list';
-@use 'sass:selector';
-@use 'sass:string';
-
-@mixin _aside() {
-  flex-basis: var(--unitone--sidebar-width);
-  flex-grow: 1;
-  min-width: 1rem;
-}
-
-@mixin _main() {
-  flex-basis: 0;
-  flex-grow: 999;
-  min-width: min(100%, var(--unitone--content-min-width));
-  max-width: min(100%, var(--unitone--content-max-width));
-}
-
-$selector-main-aside: (
-  ':not([data-unitone-layout~="-revert"]):not([data-unitone-layout~="-sidebar:left"])',
-  '[data-unitone-layout~="-revert"][data-unitone-layout~="-sidebar:left"]'
-);
-
-$selector-aside-main: (
-  ':not([data-unitone-layout~="-revert"])[data-unitone-layout~="-sidebar:left"]',
-  '[data-unitone-layout~="-revert"]:not([data-unitone-layout~="-sidebar:left"])'
-);
-
-@mixin abstract-with-sidebar() {
-  --unitone--sidebar-width: auto;
-  --unitone--content-min-width: 50%;
-  --unitone--content-max-width: 100%;
-  --unitone--gap: var(--unitone--global--gap);
-  --unitone--column-gap: var(--unitone--gap);
-  --unitone--row-gap: var(--unitone--gap);
-  --unitone--align-items: stretch;
-  --unitone--overflow: visible;
-
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: var(--unitone--column-gap);
-  row-gap: var(--unitone--row-gap);
-  align-items: var(--unitone--align-items);
-  overflow: var(--unitone--overflow);
-
-  &:where(#{ $selector-main-aside }) > :first-child,
-  &:where(#{ $selector-aside-main }) > :nth-child(2) {
-    @include _main();
-  }
-
-  &:where(#{ $selector-main-aside }) > :nth-child(2),
-  &:where(#{ $selector-aside-main }) > :first-child {
-    @include _aside();
-  }
-
-  &[data-unitone-layout~="-revert"] {
-    flex-direction: row-reverse;
-  }
-
-  &:where([data-unitone-layout*="-divider\:"]) {
-    > * {
-      display: flex;
-      flex-direction: column;
-      justify-content: var(--unitone--align-items);
-    }
-
-    // For vertical layout.
-    &[data-unitone-layout~="-stack"] {
-      // When -bol / -linewrap is added, the vertical/horizontal layout may switch.
-      // This will break the design.
-      // This is necessary to prevent this.
-      --unitone--content-min-width: 100% !important;
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:stripe"] {
-    align-items: stretch;
-
-    // For vertical layout.
-    &[data-unitone-layout~="-stack"] {
-      row-gap: 0;
-
-      &:where(#{ $selector-main-aside }) > :first-child,
-      &:where(#{ $selector-aside-main }) > :nth-child(2) {
-        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-
-        &::before {
-          border-top-width: var(--unitone--divider-width);
-          border-bottom-width: var(--unitone--divider-width);
-        }
-      }
-
-      &:where(#{ $selector-aside-main }) > :first-child {
-        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-        padding-bottom: calc(var(--unitone--row-gap));
-
-        &::before {
-          border-top-width: var(--unitone--divider-width);
-        }
-      }
-
-       &:where(#{ $selector-main-aside }) > :nth-child(2) {
-        padding-top: var(--unitone--row-gap);
-        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-
-        &::before {
-          border-bottom-width: var(--unitone--divider-width);
-        }
-      }
-    }
-
-    // For horizontal layout.
-    &:not([data-unitone-layout~="-stack"]) {
-      column-gap: 0;
-
-      > * {
-        padding-right: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
-        padding-left: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
-      }
-
-      &:where(:not([data-unitone-layout~="-revert"])) > :first-child,
-      &:where([data-unitone-layout~="-revert"]) > :nth-child(2) {
-        &::before {
-          border-right-width: var(--unitone--divider-width);
-          border-left-width: var(--unitone--divider-width);
-        }
-      }
-
-      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
-      &:where([data-unitone-layout~="-revert"]) > :first-child {
-        &::before {
-          border-right-width: var(--unitone--divider-width);
-        }
-      }
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:divide"] {
-    align-items: stretch;
-
-    // For vertical layout.
-    &[data-unitone-layout~="-stack"] {
-      row-gap: 0;
-
-      > :first-child {
-        &::before {
-          border-width: 0 0 var(--unitone--divider-width);
-        }
-      }
-
-      &:where(#{ $selector-main-aside }) > :first-child {
-        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-      }
-
-      &:where(#{ $selector-main-aside }) > :nth-child(2) {
-        padding-top: var(--unitone--row-gap);
-      }
-
-      &:where(#{ $selector-aside-main }) > :first-child {
-        padding-bottom: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-      }
-
-      &:where(#{ $selector-aside-main }) > :nth-child(2) {
-        padding-top: var(--unitone--row-gap);
-      }
-    }
-
-    // For horizontal layout.
-    &:not([data-unitone-layout~="-stack"]) {
-      column-gap: 0;
-
-      &:where(:not([data-unitone-layout~="-revert"])) > :first-child,
-      &:where([data-unitone-layout~="-revert"]) > :nth-child(2) {
-        padding-right: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
-
-        &::before {
-          border-right-width: var(--unitone--divider-width);
-        }
-      }
-
-      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
-      &:where([data-unitone-layout~="-revert"]) > :first-child {
-        padding-left: var(--unitone--column-gap);
-      }
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:slash"] {
-    --unitone--divider-height: 2rem;
-
-    gap: 0;
-    align-items: stretch;
-
-    > :first-child::before {
-      right: auto;
-      height: var(--unitone--divider-height);
-      border-left-width: var(--unitone--divider-width);
-      border-color: color-mix(in oklab, var(--unitone--divider-color) 97%, #000);
-      transform: rotate(22.5deg);
-    }
-
-    // For vertical layout.
-    &[data-unitone-layout~="-stack"] {
-      > :first-child {
-        padding-bottom: var(--unitone--row-gap);
-
-        &::before {
-          inset:
-            100%
-            auto
-            auto
-            calc(50% - var(--unitone--divider-width) / 2);
-        }
-      }
-
-      > :nth-child(2) {
-        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-height));
-      }
-    }
-
-    // For horizontal layout.
-    &:not([data-unitone-layout~="-stack"]) {
-      &:where(:not([data-unitone-layout~="-revert"])) > :first-child,
-      &:where([data-unitone-layout~="-revert"]) > :nth-child(2) {
-        padding-right: var(--unitone--column-gap);
-
-        &::before {
-          right: auto;
-          bottom: auto;
-          left: 100%;
-        }
-      }
-
-      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
-      &:where([data-unitone-layout~="-revert"]) > :first-child {
-        padding-left: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
-      }
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:bordered"] {
-    gap: 0;
-    align-items: stretch;
-
-    // For vertical layout.
-    &[data-unitone-layout~="-stack"] {
-      > ::before {
-        border-width: var(--unitone--divider-width);
-      }
-
-      > :nth-child(2)::before {
-        border-top-width: 0;
-      }
-
-      &:where(#{ $selector-main-aside }) > :first-child {
-        padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-      }
-
-      &:where(#{ $selector-main-aside }) > :nth-child(2) {
-        padding:
-          var(--unitone--row-gap)
-          calc(var(--unitone--row-gap) + var(--unitone--divider-width))
-          calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-      }
-
-      &:where(#{ $selector-aside-main }) > :first-child {
-        padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-      }
-
-      &:where(#{ $selector-aside-main }) > :nth-child(2) {
-        padding:
-          var(--unitone--row-gap)
-          calc(var(--unitone--row-gap) + var(--unitone--divider-width))
-          calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-      }
-    }
-
-    // For horizontal layout.
-    &:not([data-unitone-layout~="-stack"]) {
-      > * {
-        padding: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
-
-        &::before {
-          border-width: var(--unitone--divider-width);
-        }
-      }
-
-      &:where(:not([data-unitone-layout~="-revert"])) > :nth-child(2),
-      &:where([data-unitone-layout~="-revert"]) > :first-child {
-        padding-left: var(--unitone--column-gap);
-
-        &::before {
-          border-left: 0;
-        }
-      }
-    }
-  }
-}
-
-@mixin with-sidebar() {
-  [data-unitone-layout~="with-sidebar"] {
-    @include abstract-with-sidebar();
-  }
-}

package/src/layout-primitives/with-sidebar/_with-sidebar.scss

@@ -1,3 +0,0 @@
-@forward './with-sidebar-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/with-sidebar/with-sidebar' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/with-sidebar' instead.";

package/src/settings/_settings-core.scss

@@ -1,3 +0,0 @@
-@use 'root';
-@use 'html';
-@use 'body';

package/src/settings/_settings.scss

@@ -1,3 +0,0 @@
-@forward './settings-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/settings/settings' will be removed in a future release. Use '@inc2734/unitone-css/src/settings' instead.";

package/src/utilities/_typography.scss

@@ -1,5 +0,0 @@
-@use '../variables' as variables;
-
-.-fluid-typography {
-  @include variables.fluid-typography();
-}

package/src/variables/_variables-core.scss

@@ -1,79 +0,0 @@
-$fibonacci-sequence: 1, 2, 3, 5, 8, 13, 21, 34, 55;
-
-$min-breakpoint: 27; // = 432px
-$max-breakpoint: 80; // = 1280px
-
-$root-font-size: calc(var(--unitone--base-font-size) * 1px);
-
-$_max-font-size: calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - var(--unitone--font-size)));
-$_min-font-size: calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size)) + 1 - (var(--unitone--harmonic-sequence-base) / var(--unitone--min-harmonic-sequence-base)));
-$_slope: calc((#{ $_max-font-size } - #{ $_min-font-size }) / (#{ $max-breakpoint - $min-breakpoint }));
-$_intercept: calc(#{-1 * $min-breakpoint } * #{ $_slope } + #{ $_min-font-size });
-$_preferred-font-size: calc((#{ $_intercept } * 1rem) + (#{ $_slope } * 100vw));
-$_font-size-fluid: clamp(var(--unitone--fluid-typography-min-length, calc(1rem * #{ $_min-font-size })), #{ $_preferred-font-size }, var(--unitone--fluid-typography-max-length, calc(1rem * $_max-font-size)));
-
-$_font-size-scale: calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - var(--unitone--font-size)));
-
-/**
- * Line-height scaling (non-linear / hyperbolic reciprocal curve)
- *
- * This block computes a font-size–dependent line-height using a hyperbolic (reciprocal) curve:
- *
- * LH(fs) = Lmin' + K / (fs + C)
- *
- * ### Internal bias (-0.1) for the effective minimum (Lmin')
- * We slightly lower the effective minimum to compensate for the
- * asymptotic nature of the reciprocal curve. This makes the observed
- * minimum in typical font-size ranges closer to the user’s expectation.
- *
- * ### C: Curvature / controls how quickly the curve approaches the minimum
- * Larger C => slower decay (more generous line-height for larger text)
- * Smaller C => faster decay (tighter line-height sooner)
- *
- * ### K: Amplitude / scale factor for the reciprocal term
- * We compute K so that the curve respects the intended range between
- * max-line-height and the biased minimum, and so that near the base
- * font size the line-height stays close to max (and is clamped there).
- */
-$_min-line-height: calc(var(--unitone--min-line-height) - 0.1);
-$_line-height-amplitude: calc((var(--unitone--max-line-height) - #{ $_min-line-height }) * (var(--unitone--base-font-size) + var(--unitone--line-height-curvature)));
-$_line-height: clamp(
-  var(--unitone--min-line-height),
-  (#{ $_min-line-height } + #{ $_line-height-amplitude } / (var(--unitone--result--1em-px) + var(--unitone--line-height-curvature))),
-  var(--unitone--max-line-height)
-);
-
-$_font-size: calc($_font-size-scale * 1rem);
-$_font-size-em: calc($_font-size-scale * 1em);
-
-@mixin typography {
-  --unitone--font-size-rem: #{ $_font-size };
-  --unitone--font-size-em: #{ $_font-size-em };
-  --unitone--font-size-fluid: #{ $_font-size-fluid };
-  --unitone--calculated-font-size: var(--unitone--font-size-rem);
-
-  --unitone--min-line-height: calc(1 + 2 * min(var(--unitone--min-half-leading), var(--unitone--half-leading)));
-  --unitone--max-line-height: calc(1 + 2 * var(--unitone--half-leading));
-  --unitone--line-height: #{ $_line-height };
-
-  font-size: var(--unitone--calculated-font-size);
-  line-height: var(--unitone--line-height);
-
-  // @todo In Firefox, using tan(atan2()) for line-height is considered invalid.
-  // Therefore, a fallback line-height is applied.
-  @supports (-moz-appearance: none) {
-    --unitone--result--1em-px: calc(#{ $_font-size-scale } * var(--unitone--base-font-size));
-  }
-}
-
-@mixin typography-em {
-  --unitone--calculated-font-size: var(--unitone--font-size-em);
-}
-
-@mixin fluid-typography {
-  --unitone--calculated-font-size: var(--unitone--font-size-fluid);
-}
-
-$container-max-width: $max-breakpoint * 16px; // = 1280px
-$grid-columns: 12;
-$grid-rows: 7;

package/src/variables/_variables.scss

@@ -1,3 +0,0 @@
-@forward './variables-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/variables/variables' will be removed in a future release. Use '@inc2734/unitone-css/src/variables' instead.";