@inc2734/unitone-css 0.94.3 → 0.95.0

package/src/layout-primitives/responsive-grid/_responsive-grid-core.scss

@@ -0,0 +1,249 @@
+@mixin abstract-responsive-grid() {
+  --unitone--auto-repeat: auto-fit;
+  --unitone--column-min-width: 240px;
+  --unitone--gap: var(--unitone--global--gap);
+  --unitone--column-gap: var(--unitone--gap);
+  --unitone--row-gap: var(--unitone--gap);
+
+  display: grid;
+  column-gap: var(--unitone--column-gap);
+  row-gap: var(--unitone--row-gap);
+  grid-template-columns: repeat(var(--unitone--auto-repeat), minmax(min(var(--unitone--column-min-width), 100%), 1fr));
+  list-style: none;
+
+  > * {
+    margin: 0;
+    min-width: 0;
+  }
+
+  &:where([data-unitone-layout*="-divider\:"]) {
+    --unitone--divider-width: 1px;
+    --unitone--divider-style: solid;
+    --unitone--divider-color: var(--unitone--color--gray);
+
+    visibility: hidden;
+
+    &[data-unitone-layout~="divider:initialized"] {
+      visibility: visible;
+    }
+
+    > * {
+      position: relative;
+    }
+
+    > ::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      user-select: none;
+      pointer-events: none;
+      border-width: 0;
+      border-style: var(--unitone--divider-style);
+      border-color: var(--unitone--divider-color);
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:stripe"] {
+    row-gap: 0;
+
+    > * {
+      padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width)) 0;
+
+      &::before {
+        left: calc(var(--unitone--column-gap) * -1);
+        border-width: var(--unitone--divider-width) 0;
+      }
+    }
+
+    > [data-unitone-layout~="-bol"]::before {
+      left: 0;
+    }
+
+    > [data-unitone-layout~="-linewrap"] {
+      padding-top: var(--unitone--row-gap);
+
+      &::before {
+        border-top-width: 0;
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:underline"] {
+    row-gap: 0;
+
+    > * {
+      padding: 0 0 calc(var(--unitone--row-gap) + var(--unitone--divider-width));
+
+      &::before {
+        left: calc(var(--unitone--column-gap) * -1);
+        border-width: 0 0 var(--unitone--divider-width);
+      }
+    }
+
+    > [data-unitone-layout~="-bol"]::before {
+      left: 0;
+    }
+
+    > [data-unitone-layout~="-linewrap"] {
+      padding-top: var(--unitone--row-gap);
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:stripe-vertical"] {
+    // For vertical layout.
+    &[data-unitone-layout~="-stack"] {
+      row-gap: 0;
+
+      > * {
+        padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width)) 0;
+
+        &::before {
+          border-width: var(--unitone--divider-width) 0;
+        }
+      }
+
+      > [data-unitone-layout~="-linewrap"] {
+        padding-top: var(--unitone--row-gap);
+
+        &::before {
+          border-top-width: 0;
+        }
+      }
+    }
+
+    // For horizontal layout.
+    &:not([data-unitone-layout~="-stack"]) {
+     column-gap: 0;
+
+      > * {
+        padding: 0 calc(var(--unitone--column-gap) + var(--unitone--divider-width));
+
+        &::before {
+          border-width: 0 var(--unitone--divider-width);
+        }
+      }
+
+      > :not([data-unitone-layout~="-bol"]) {
+        &::before {
+          border-left: 0;
+        }
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:divide-vertical"] {
+    // For vertical layout.
+    &[data-unitone-layout~="-stack"] {
+      row-gap: 0;
+
+      // Without this, -stack will be added but there will be times when it does not become one column.
+      column-gap: calc(var(--unitone--column-gap) * 2 + var(--unitone--divider-width));
+
+      > :not(:last-child) {
+        padding-bottom: var(--unitone--row-gap);
+      }
+
+      > [data-unitone-layout~="-linewrap"] {
+        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
+
+        &::before {
+          border-top-width: var(--unitone--divider-width);
+        }
+      }
+    }
+
+    // For horizontal layout.
+    &:not([data-unitone-layout~="-stack"]) {
+      column-gap: calc(var(--unitone--column-gap) * 2 + var(--unitone--divider-width));
+
+      > :not([data-unitone-layout~="-bol"]) {
+        &::before {
+          left: calc(var(--unitone--column-gap) * -1 - var(--unitone--divider-width));
+          border-left-width: var(--unitone--divider-width);
+        }
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:bordered"] {
+    gap: 0;
+
+    > * {
+      padding: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
+
+      &::before {
+        border-width: var(--unitone--divider-width);
+      }
+    }
+
+    > :not([data-unitone-layout~="-bol"]) {
+      padding-left: var(--unitone--column-gap);
+
+      &::before {
+        border-left-width: 0;
+      }
+    }
+
+    > [data-unitone-layout~="-linewrap"] {
+      padding-top: var(--unitone--column-gap);
+
+      &::before {
+        border-top-width: 0;
+      }
+    }
+
+    &[data-unitone-layout~="-stack"] {
+      > * {
+        padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
+      }
+
+      > [data-unitone-layout~="-linewrap"] {
+        padding-top: var(--unitone--row-gap);
+      }
+    }
+  }
+
+  &:where([data-unitone-layout*="-stairs\:"]) {
+    align-items: start;
+    padding-bottom: calc(var(--unitone--stairs-step-overflow-volume, 0) * 1px);
+    visibility: hidden;
+
+    &[data-unitone-layout~="stairs:initialized"] {
+      visibility: visible;
+    }
+
+    > :where([style*="--unitone--stairs-step:"]) {
+      position: relative;
+    }
+
+    &:where(:not([data-unitone-layout~="-stairs-up\:right"])) {
+      > * {
+        top: calc(var(--unitone--stairs-margin) * var(--unitone--stairs-step));
+      }
+    }
+
+    &:where([data-unitone-layout~="-stairs-up\:right"]) {
+      > * {
+        top: calc(var(--unitone--stairs-margin) * (var(--unitone--max-stairs-step) - var(--unitone--stairs-step)));
+      }
+    }
+
+    &:where([data-unitone-layout~="-stairs-up\:up-down"]) {
+      > * {
+        top: calc(var(--unitone--stairs-margin) * var(--unitone--stairs-step));
+      }
+    }
+
+    &:where([data-unitone-layout~="-stairs-up\:down-up"]) {
+      > * {
+        top: calc(var(--unitone--stairs-margin) * (var(--unitone--max-stairs-step) - var(--unitone--stairs-step)));
+      }
+    }
+  }
+}
+
+@mixin responsive-grid() {
+  [data-unitone-layout~="responsive-grid"] {
+    @include abstract-responsive-grid();
+  }
+}

package/src/layout-primitives/responsive-grid/_responsive-grid.scss

@@ -1,249 +1,3 @@
-@mixin abstract-responsive-grid() {
-  --unitone--auto-repeat: auto-fit;
-  --unitone--column-min-width: 240px;
-  --unitone--gap: var(--unitone--global--gap);
-  --unitone--column-gap: var(--unitone--gap);
-  --unitone--row-gap: var(--unitone--gap);
+@forward './responsive-grid-core';
 
-  display: grid;
-  column-gap: var(--unitone--column-gap);
-  row-gap: var(--unitone--row-gap);
-  grid-template-columns: repeat(var(--unitone--auto-repeat), minmax(min(var(--unitone--column-min-width), 100%), 1fr));
-  list-style: none;
-
-  > * {
-    margin: 0;
-    min-width: 0;
-  }
-
-  &:where([data-unitone-layout*="-divider\:"]) {
-    --unitone--divider-width: 1px;
-    --unitone--divider-style: solid;
-    --unitone--divider-color: var(--unitone--color--gray);
-
-    visibility: hidden;
-
-    &[data-unitone-layout~="divider:initialized"] {
-      visibility: visible;
-    }
-
-    > * {
-      position: relative;
-    }
-
-    > ::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      user-select: none;
-      pointer-events: none;
-      border-width: 0;
-      border-style: var(--unitone--divider-style);
-      border-color: var(--unitone--divider-color);
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:stripe"] {
-    row-gap: 0;
-
-    > * {
-      padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width)) 0;
-
-      &::before {
-        left: calc(var(--unitone--column-gap) * -1);
-        border-width: var(--unitone--divider-width) 0;
-      }
-    }
-
-    > [data-unitone-layout~="-bol"]::before {
-      left: 0;
-    }
-
-    > [data-unitone-layout~="-linewrap"] {
-      padding-top: var(--unitone--row-gap);
-
-      &::before {
-        border-top-width: 0;
-      }
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:underline"] {
-    row-gap: 0;
-
-    > * {
-      padding: 0 0 calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-
-      &::before {
-        left: calc(var(--unitone--column-gap) * -1);
-        border-width: 0 0 var(--unitone--divider-width);
-      }
-    }
-
-    > [data-unitone-layout~="-bol"]::before {
-      left: 0;
-    }
-
-    > [data-unitone-layout~="-linewrap"] {
-      padding-top: var(--unitone--row-gap);
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:stripe-vertical"] {
-    // For vertical layout.
-    &[data-unitone-layout~="-stack"] {
-      row-gap: 0;
-
-      > * {
-        padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width)) 0;
-
-        &::before {
-          border-width: var(--unitone--divider-width) 0;
-        }
-      }
-
-      > [data-unitone-layout~="-linewrap"] {
-        padding-top: var(--unitone--row-gap);
-
-        &::before {
-          border-top-width: 0;
-        }
-      }
-    }
-
-    // For horizontal layout.
-    &:not([data-unitone-layout~="-stack"]) {
-     column-gap: 0;
-
-      > * {
-        padding: 0 calc(var(--unitone--column-gap) + var(--unitone--divider-width));
-
-        &::before {
-          border-width: 0 var(--unitone--divider-width);
-        }
-      }
-
-      > :not([data-unitone-layout~="-bol"]) {
-        &::before {
-          border-left: 0;
-        }
-      }
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:divide-vertical"] {
-    // For vertical layout.
-    &[data-unitone-layout~="-stack"] {
-      row-gap: 0;
-
-      // Without this, -stack will be added but there will be times when it does not become one column.
-      column-gap: calc(var(--unitone--column-gap) * 2 + var(--unitone--divider-width));
-
-      > :not(:last-child) {
-        padding-bottom: var(--unitone--row-gap);
-      }
-
-      > [data-unitone-layout~="-linewrap"] {
-        padding-top: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-
-        &::before {
-          border-top-width: var(--unitone--divider-width);
-        }
-      }
-    }
-
-    // For horizontal layout.
-    &:not([data-unitone-layout~="-stack"]) {
-      column-gap: calc(var(--unitone--column-gap) * 2 + var(--unitone--divider-width));
-
-      > :not([data-unitone-layout~="-bol"]) {
-        &::before {
-          left: calc(var(--unitone--column-gap) * -1 - var(--unitone--divider-width));
-          border-left-width: var(--unitone--divider-width);
-        }
-      }
-    }
-  }
-
-  &[data-unitone-layout~="-divider\:bordered"] {
-    gap: 0;
-
-    > * {
-      padding: calc(var(--unitone--column-gap) + var(--unitone--divider-width));
-
-      &::before {
-        border-width: var(--unitone--divider-width);
-      }
-    }
-
-    > :not([data-unitone-layout~="-bol"]) {
-      padding-left: var(--unitone--column-gap);
-
-      &::before {
-        border-left-width: 0;
-      }
-    }
-
-    > [data-unitone-layout~="-linewrap"] {
-      padding-top: var(--unitone--column-gap);
-
-      &::before {
-        border-top-width: 0;
-      }
-    }
-
-    &[data-unitone-layout~="-stack"] {
-      > * {
-        padding: calc(var(--unitone--row-gap) + var(--unitone--divider-width));
-      }
-
-      > [data-unitone-layout~="-linewrap"] {
-        padding-top: var(--unitone--row-gap);
-      }
-    }
-  }
-
-  &:where([data-unitone-layout*="-stairs\:"]) {
-    align-items: start;
-    padding-bottom: calc(var(--unitone--stairs-step-overflow-volume, 0) * 1px);
-    visibility: hidden;
-
-    &[data-unitone-layout~="stairs:initialized"] {
-      visibility: visible;
-    }
-
-    > :where([style*="--unitone--stairs-step:"]) {
-      position: relative;
-    }
-
-    &:where(:not([data-unitone-layout~="-stairs-up\:right"])) {
-      > * {
-        top: calc(var(--unitone--stairs-margin) * var(--unitone--stairs-step));
-      }
-    }
-
-    &:where([data-unitone-layout~="-stairs-up\:right"]) {
-      > * {
-        top: calc(var(--unitone--stairs-margin) * (var(--unitone--max-stairs-step) - var(--unitone--stairs-step)));
-      }
-    }
-
-    &:where([data-unitone-layout~="-stairs-up\:up-down"]) {
-      > * {
-        top: calc(var(--unitone--stairs-margin) * var(--unitone--stairs-step));
-      }
-    }
-
-    &:where([data-unitone-layout~="-stairs-up\:down-up"]) {
-      > * {
-        top: calc(var(--unitone--stairs-margin) * (var(--unitone--max-stairs-step) - var(--unitone--stairs-step)));
-      }
-    }
-  }
-}
-
-@mixin responsive-grid() {
-  [data-unitone-layout~="responsive-grid"] {
-    @include abstract-responsive-grid();
-  }
-}
+@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/responsive-grid/responsive-grid' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/responsive-grid' instead.";

package/src/layout-primitives/responsive-grid/react.jsx

@@ -0,0 +1,4 @@
+import '../../behaviors/dividers';
+import '../../behaviors/stairs';
+
+export { ResponsiveGrid } from './index';

package/src/layout-primitives/stack/_index.scss

@@ -0,0 +1 @@
+@forward './stack-core';

package/src/layout-primitives/stack/_stack-core.scss

@@ -0,0 +1,201 @@
+@mixin abstract-stack() {
+  --unitone--gap: var(--unitone--global--text-gap);
+  --unitone--negative-gap: var(--unitone--global--text-gap);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--unitone--gap);
+  list-style: none;
+
+  > * {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+
+  > li {
+    margin-left: 0;
+  }
+
+  &:only-child {
+    height: 100%;
+  }
+
+  &[data-unitone-layout~="-revert"] {
+    flex-direction: column-reverse;
+  }
+
+  &:where([data-unitone-layout*="-divider\:"]) {
+    --unitone--divider-width: 1px;
+    --unitone--divider-style: solid;
+    --unitone--divider-color: var(--unitone--color--gray);
+
+    gap: 0;
+
+    > * {
+      position: relative;
+    }
+
+    > ::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      user-select: none;
+      pointer-events: none;
+      border-width: 0;
+      border-style: var(--unitone--divider-style);
+      border-color: var(--unitone--divider-color);
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:stripe"] {
+    > * {
+      padding: calc(var(--unitone--gap) + var(--unitone--divider-width)) 0;
+
+      &::before {
+        border-width: var(--unitone--divider-width) 0;
+      }
+    }
+
+    &:where(:not([data-unitone-layout~="-revert"])) {
+      > :not(:first-child) {
+        padding-top: var(--unitone--gap);
+
+        &::before {
+          border-top-width: 0;
+        }
+      }
+    }
+
+    &:where([data-unitone-layout~="-revert"]) {
+      > :not(:last-child) {
+        padding-top: var(--unitone--gap);
+
+        &::before {
+          border-top-width: 0;
+        }
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:underline"] {
+    > * {
+      padding-top: var(--unitone--gap);
+      padding-bottom: calc(var(--unitone--gap) + var(--unitone--divider-width));
+
+      &::before {
+        border-width: 0 0 var(--unitone--divider-width);
+      }
+    }
+
+    &:where(:not([data-unitone-layout~="-revert"])) {
+      > :first-child {
+        padding-top: 0;
+      }
+    }
+
+    &:where([data-unitone-layout~="-revert"]) {
+      > :last-child {
+        padding-top: 0;
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:bordered"] {
+    > * {
+      padding: calc(var(--unitone--gap) + var(--unitone--divider-width));
+
+      &::before {
+        border-width: var(--unitone--divider-width);
+      }
+    }
+
+    &:where(:not([data-unitone-layout~="-revert"])) {
+      > :not(:first-child) {
+        padding-top: var(--unitone--gap);
+
+        &::before {
+          border-top-width: 0;
+        }
+      }
+    }
+
+    &:where([data-unitone-layout~="-revert"]) {
+      > :not(:last-child) {
+        padding-top: var(--unitone--gap);
+
+        &::before {
+          border-top-width: 0;
+        }
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-divider\:divide"] {
+    > * {
+      padding-top: var(--unitone--gap);
+      padding-bottom: calc(var(--unitone--gap) + var(--unitone--divider-width));
+    }
+
+    &:where(:not([data-unitone-layout~="-revert"])) {
+      > :first-child {
+        padding-top: 0;
+      }
+
+      > :last-child {
+        padding-bottom: 0;
+      }
+
+      > :not(:last-child) {
+        &::before {
+          border-width: 0 0 var(--unitone--divider-width);
+        }
+      }
+    }
+
+    &:where([data-unitone-layout~="-revert"]) {
+      > :first-child {
+        padding-bottom: 0;
+      }
+
+      > :last-child {
+        padding-top: 0;
+      }
+
+      > :not(:first-child) {
+        &::before {
+          border-width: 0 0 var(--unitone--divider-width);
+        }
+      }
+    }
+  }
+
+  &[data-unitone-layout~="-negative"] {
+    gap: 0;
+
+    &:where(:not([data-unitone-layout~="-revert"])) {
+      > :not(:first-child) {
+        margin-top: calc(-1 * var(--unitone--negative-gap));
+      }
+    }
+
+    &:where([data-unitone-layout~="-revert"]) {
+      > :not(:last-child) {
+        margin-top: calc(-1 * var(--unitone--negative-gap));
+      }
+    }
+  }
+}
+
+@mixin stack() {
+  [data-unitone-layout~="stack"] {
+    @include abstract-stack();
+
+    // @todo
+    // Specify a component whose width is specified by max-width of the child element, not by itself.
+    > [data-unitone-layout~="text"]:where(:not([data-unitone-layout*="align\:"])) {
+      margin-right: 0;
+      margin-left: 0;
+      max-width: none;
+    }
+  }
+}