@inc2734/unitone-css 0.23.0

package/src/layout-primitives/frame/_frame.scss

@@ -0,0 +1,45 @@
+@mixin abstract-frame() {
+  --unitone--ratio: 16/9;
+
+  position: relative;
+
+  &::before {
+    content: '';
+    display: block;
+    padding: calc(100% / (var(--unitone--ratio))) 0 0;
+  }
+
+  > * {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  img,
+  video {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  @media (orientation: portrait) {
+    &[data-unitone-layout~="-switch"] {
+      &::before {
+        padding-top: calc(var(--unitone--ratio) * 100%);
+      }
+    }
+  }
+}
+
+@mixin frame() {
+  [data-unitone-layout~="frame"] {
+    @include abstract-frame();
+  }
+}

package/src/layout-primitives/frame/stories/index.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { Frame } from '../Frame';
+
+export default {
+  title: 'Layout Primitives/Frame',
+  component: Frame,
+  parameters: {
+    notes: { readme },
+  },
+  argTypes: {
+    ratio: {
+      control: { type: 'text' },
+      description: 'Aspect ratio. Set by CSS var `--unitone--ratio`.',
+      table: { defaultValue: { summary: '16/9' } },
+      type: { name: 'string', required: false },
+    },
+    switchRatio: {
+      control: { type: 'inline-radio' },
+      description: 'When the orientation switches, the `--unitone--ratio` also switches.',
+      options: [false, true],
+      table: { defaultValue: { summary: false } },
+      type: { name: 'boolean', required: false },
+    },
+  },
+  args: {
+    ratio: '16/9',
+    switchRatio: false,
+  },
+};
+
+export const Default = (args) => {
+  return (
+    <Frame {...args}>
+      <img src="https://placehold.jp/400x300.jpg" alt="" />
+    </Frame>
+  );
+};
+
+export const Switch = (args) => {
+  return (
+    <Frame {...args}>
+      <img src="https://placehold.jp/400x300.jpg" alt="" />
+    </Frame>
+  );
+};
+Switch.args = {
+  switchRatio: true,
+};

package/src/layout-primitives/gutters/Gutters.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const Gutters = ({ padding, style, ...props }) => {
+  return (
+    <div
+      data-unitone-layout={[
+        'gutters',
+        'undefined' !== typeof padding ? `-padding:${padding}` : undefined,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/layout-primitives/gutters/README.md

@@ -0,0 +1,23 @@
+## Usage
+
+```html
+<div data-unitone-layout="section">
+  <div data-unitone-layout="stack">
+    <h2>Lorem ipsum dolor sit amet</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+      ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+      reprehenderit in voluptate velit esse cill
+    </p>
+  </div>
+</div>
+```
+
+### Customizing padding
+
+```html
+<div data-unitone-layout="section -padding:1">
+  ...
+</div>
+```

package/src/layout-primitives/gutters/_gutters.scss

@@ -0,0 +1,12 @@
+@mixin abstract-gutters() {
+  --unitone--padding: var(--unitone--s4);
+
+  padding-top: var(--unitone--padding);
+  padding-bottom: var(--unitone--padding);
+}
+
+@mixin gutters() {
+  [data-unitone-layout~="gutters"] {
+    @include abstract-gutters();
+  }
+}

package/src/layout-primitives/gutters/stories/index.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { Gutters } from '../Gutters';
+import { Center } from '../../center/Center';
+import { Container } from '../../container/Container';
+import { Stack } from '../../stack/Stack';
+
+export default {
+  title: 'Layout Primitives/Gutters',
+  component: Gutters,
+  parameters: {
+    notes: { readme },
+  },
+  argTypes: {
+    padding: {
+      control: { type: 'inline-radio' },
+      description:
+        'Top and bottom padding. Set by CSS var `--unitone--padding` or `data-unitone-layout` attribute `-padding:x`.',
+      options: [1, 2, 3, 4, 5, 6, 7],
+      table: { defaultValue: { summary: 'var(--unitone--s4)' } },
+      type: { name: 'number', required: false },
+    },
+  },
+  args: {
+    padding: 4,
+  },
+};
+
+export const Default = (args) => {
+  return (
+    <Gutters {...args}>
+      <Container>
+        <Stack gap={2}>
+          <Center>
+            <h2 style={{ '--unitone--font-size': 2 }}>Lorem ipsum dolor sit amet</h2>
+          </Center>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cill
+          </p>
+        </Stack>
+      </Container>
+    </Gutters>
+  );
+};

package/src/layout-primitives/layers/Layers.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const Layers = ({ cover, style, ...props }) => {
+  style = {
+    ...style,
+  };
+
+  return (
+    <div
+      data-unitone-layout={['layers', true === cover ? `-cover` : undefined]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/layout-primitives/layers/README.md

@@ -0,0 +1,32 @@
+## Usage
+
+```html
+<div data-unitone-layout="layers">
+  <img src="https://placehold.jp/400x300.jpg" alt="" />
+  <div data-unitone-layout="decorator" style="--unitone--align-self:end">
+    Lorem ipsum dolor sit amet
+  </div>
+</div>
+```
+
+### Covered image
+
+```html
+<div data-unitone-layout="layers -cover">
+  <img ...>
+  <div>
+    ...
+  </div>
+</div>
+```
+
+### Customizing position
+
+```html
+<div data-unitone-layout="layers">
+  <img ...>
+  <div style="--unitone--alilgn-self: end; --unitone--justify-self: center">
+    ...
+  </div>
+</div>
+```

package/src/layout-primitives/layers/_layers.scss

@@ -0,0 +1,51 @@
+@mixin abstract-layers() {
+  --unitone--gap: var(--unitone--s1);
+  --unitone--columns: 12;
+
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--unitone--columns), 1fr);
+  grid-template-rows: max-content;
+  gap: var(--unitone--gap);
+  overflow: hidden;
+
+  > * {
+    --unitone--align-self: auto;
+    --unitone--justify-self: auto;
+    --unitone--grid-column: 1/-1;
+    --unitone--grid-row: 1/-1;
+
+    position: relative;
+    grid-column: var(--unitone--grid-column);
+    grid-row: var(--unitone--grid-row);
+    align-self: var(--unitone--align-self);
+    justify-self: var(--unitone--justify-self);
+  }
+
+  &[data-unitone-layout~="-cover"] {
+    > :where(img:first-child, video:first-child, picture:first-child, figure:first-child),
+    > :first-child :where(picture, figure) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    > :where(img:first-child, video:first-child),
+    > :first-child :where(img, video) {
+      object-fit: cover;
+      object-position: 50% 50%;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+
+@mixin layers() {
+  [data-unitone-layout~="layers"] {
+    @include abstract-layers();
+  }
+}

package/src/layout-primitives/layers/stories/index.jsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { Layers } from '../Layers';
+import { Decorator } from '../../decorator/Decorator';
+
+export default {
+  title: 'Layout Primitives/Layers',
+  component: Layers,
+  parameters: {
+    notes: { readme },
+  },
+  argTypes: {
+    cover: {
+      control: { type: 'inline-radio' },
+      description:
+        "Background image/video is sized to maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.",
+      options: [false, true],
+      table: { defaultValue: { summary: false } },
+      type: { name: 'boolean', required: false },
+    },
+  },
+  args: {
+    cover: false,
+  },
+};
+
+export const Default = (args) => {
+  return (
+    <Layers {...args}>
+      <img src="https://placehold.jp/600x400.jpg" alt="" />
+      <Decorator style={{ '--unitone--align-self': 'end' }} padding={1}>
+        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+        irure dolor in reprehenderit in voluptate velit esse cillLorem ipsum dolor sit amet,
+        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+        voluptate velit esse cillLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+        irure dolor in reprehenderit in voluptate velit esse cill
+      </Decorator>
+    </Layers>
+  );
+};
+
+export const ExamplePicture = (args) => {
+  return (
+    <Layers {...args}>
+      <picture>
+        <img src="https://placehold.jp/600x400.jpg" alt="" />
+      </picture>
+      <Decorator style={{ '--unitone--align-self': 'end' }} padding={1}>
+        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+        irure dolor in reprehenderit in voluptate velit esse cillLorem ipsum dolor sit amet,
+        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+        voluptate velit esse cillLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+        irure dolor in reprehenderit in voluptate velit esse cill
+      </Decorator>
+    </Layers>
+  );
+};
+ExamplePicture.storyName = 'Example : picture';
+
+export const ExampleFigure = (args) => {
+  return (
+    <Layers {...args}>
+      <figure>
+        <img src="https://placehold.jp/600x400.jpg" alt="" />
+      </figure>
+      <Decorator style={{ '--unitone--align-self': 'end' }} padding={1}>
+        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+        irure dolor in reprehenderit in voluptate velit esse cillLorem ipsum dolor sit amet,
+        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+        voluptate velit esse cillLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+        irure dolor in reprehenderit in voluptate velit esse cill
+      </Decorator>
+    </Layers>
+  );
+};
+ExampleFigure.storyName = 'Example : figure';
+
+export const ExampleFigurePicture = (args) => {
+  return (
+    <Layers {...args}>
+      <figure>
+        <picture>
+          <img src="https://placehold.jp/600x400.jpg" alt="" />
+        </picture>
+      </figure>
+      <Decorator style={{ '--unitone--align-self': 'end' }} padding={1}>
+        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+        irure dolor in reprehenderit in voluptate velit esse cillLorem ipsum dolor sit amet,
+        consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+        ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+        voluptate velit esse cillLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+        irure dolor in reprehenderit in voluptate velit esse cill
+      </Decorator>
+    </Layers>
+  );
+};
+ExampleFigurePicture.storyName = 'Example : figure > picture';

package/src/layout-primitives/responsive-grid/README.md

@@ -0,0 +1,11 @@
+## Usage
+
+```html
+<div data-unitone-layout="responsive-grid">
+  <div data-unitone-layout="stack">
+    <img src="https://placehold.jp/400x300.jpg" alt="" />
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
+  </div>
+  ...
+</div>
+```

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export const ResponsiveGrid = ({ columnMinWidth, gap, style, ...props }) => {
+  style = {
+    ...style,
+    '--unitone--column-min-width': !!columnMinWidth ? columnMinWidth : undefined,
+  };
+
+  return (
+    <div
+      data-unitone-layout={[
+        'responsive-grid',
+        'undefined' !== typeof gap ? `-gap:${gap}` : undefined,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,14 @@
+@mixin abstract-responsive-grid() {
+  --unitone--column-min-width: 250px;
+  --unitone--gap: var(--unitone--s1);
+
+  display: grid;
+  grid-gap: var(--unitone--gap);
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--unitone--column-min-width), 100%), 1fr));
+}
+
+@mixin responsive-grid() {
+  [data-unitone-layout~="responsive-grid"] {
+    @include abstract-responsive-grid();
+  }
+}

package/src/layout-primitives/responsive-grid/stories/index.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import readme from '../README.md';
+
+import { ResponsiveGrid } from '../ResponsiveGrid';
+import { Stack } from '../../stack/Stack';
+
+export default {
+  title: 'Layout Primitives/ResponsiveGrid',
+  component: ResponsiveGrid,
+  parameters: {
+    notes: { readme },
+  },
+  argTypes: {
+    columnMinWidth: {
+      control: { type: 'text' },
+      description: 'Min width of each columns. Set by CSS var `--unitone--column-min-width`.',
+      table: { defaultValue: { summary: '250px' } },
+      type: { name: 'string', required: false },
+    },
+    gap: {
+      control: { type: 'inline-radio' },
+      description: 'Gap. Set by CSS var `--unitone--gap`.',
+      options: [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7],
+      table: { defaultValue: { summary: 'var(--unitone--s1)' } },
+      type: { name: 'number', required: false },
+    },
+  },
+  args: {
+    columnMinWidth: '250px',
+    gap: 1,
+  },
+};
+
+const content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit';
+
+export const Default = (args) => {
+  return (
+    <ResponsiveGrid {...args}>
+      <Stack gap={-2}>
+        <img src="https://placehold.jp/400x300.jpg" alt="" />
+        <p>{content}</p>
+      </Stack>
+      <Stack gap={-2}>
+        <img src="https://placehold.jp/400x300.jpg" alt="" />
+        <p>{content}</p>
+      </Stack>
+      <Stack gap={-2}>
+        <img src="https://placehold.jp/400x300.jpg" alt="" />
+        <p>{content}</p>
+      </Stack>
+      <Stack gap={-2}>
+        <img src="https://placehold.jp/400x300.jpg" alt="" />
+        <p>{content}</p>
+      </Stack>
+      <Stack gap={-2}>
+        <img src="https://placehold.jp/400x300.jpg" alt="" />
+        <p>{content}</p>
+      </Stack>
+      <Stack gap={-2}>
+        <img src="https://placehold.jp/400x300.jpg" alt="" />
+        <p>{content}</p>
+      </Stack>
+    </ResponsiveGrid>
+  );
+};

package/src/layout-primitives/stack/README.md

@@ -0,0 +1,24 @@
+## Usage
+
+```html
+<div data-unitone-layout="stack">
+  <p>Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
+  <p>Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
+</div>
+```
+
+### Customizing gap
+
+```html
+<div data-unitone-layout="stack -gap:1">
+  ...
+</div>
+```
+
+### Using negative gap
+
+```html
+<div data-unitone-layout="stack -gap:1 -negative">
+  ...
+</div>
+```

package/src/layout-primitives/stack/Stack.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export const Stack = ({ center, gap, negative, style, ...props }) => {
+  style = {
+    ...style,
+  };
+
+  return (
+    <div
+      data-unitone-layout={[
+        'stack',
+        'undefined' !== typeof gap ? `-gap:${gap}` : undefined,
+        true === negative ? '-negative' : undefined,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={style}
+    >
+      {props.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,31 @@
+@mixin abstract-stack() {
+  --unitone--gap: var(--unitone--s1);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--unitone--gap);
+
+  > * {
+    margin-top: 0;
+    margin-bottom: 0;
+    flex: 0 0 auto;
+  }
+
+  &:only-child {
+    height: 100%;
+  }
+
+  &[data-unitone-layout~="-negative"] {
+    gap: 0;
+
+    > * + * {
+      margin-top: calc(-1 * var(--unitone--gap));
+    }
+  }
+}
+
+@mixin stack() {
+  [data-unitone-layout~="stack"] {
+    @include abstract-stack();
+  }
+}