@inc2734/unitone-css 0.47.2 → 0.48.0

package/src/patterns/header/header-3/stories/index.stories.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-
-import { Header3 } from '../Header3';
-
-export default {
-  title: 'Patterns/Header/Header-3',
-  component: Header3,
-  argTypes: {
-    backgroundColor: {
-      control: { type: 'color' },
-      table: { defaultValue: { summary: 'transparent' } },
-      type: { name: 'string', required: false },
-    },
-    color: {
-      control: { type: 'color' },
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    backgroundColor: 'transparent',
-    color: 'initial',
-  },
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const Default = (props) => (
-  <Header3
-    src="https://placehold.jp/1280x1024.jpg"
-    title="Lorem ipsum dolor sit amet, consectetur adipisicing elit"
-    backgroundColor={props.backgroundColor}
-    color={props.color}
-  >
-    <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>
-  </Header3>
-);

package/src/patterns/header/header-4/Header4.jsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import {
-  Decorator,
-  Container,
-  Cover,
-  CoverContent,
-  Layers,
-  Stack,
-  Text,
-} from '@inc2734/unitone-css';
-
-export const Header4 = (props) => (
-  <Decorator backgroundColor={props.backgroundColor} color={props.color}>
-    <Layers cover>
-      {!!props.src && <img src={props.src} alt="" />}
-      <Cover>
-        <CoverContent></CoverContent>
-        <Container align="start" gutters={0} maxWidth="var(--unitone--measure)">
-          <Stack gap={2}>
-            {!!props.title && <h2 style={{ '--unitone--font-size': 4 }}>{props.title}</h2>}
-            {!!props.children && <Text>{props.children}</Text>}
-          </Stack>
-        </Container>
-      </Cover>
-    </Layers>
-  </Decorator>
-);

package/src/patterns/header/header-4/stories/index.stories.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import { Header4 } from '../Header4';
-
-export default {
-  title: 'Patterns/Header/Header-4',
-  component: Header4,
-  argTypes: {
-    backgroundColor: {
-      control: { type: 'color' },
-      table: { defaultValue: { summary: 'transparent' } },
-      type: { name: 'string', required: false },
-    },
-    color: {
-      control: { type: 'color' },
-      table: { defaultValue: { summary: '#fff' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    backgroundColor: 'transparent',
-    color: '#fff',
-  },
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const Default = (props) => (
-  <Header4
-    src="https://placehold.jp/1280x1024.jpg"
-    title="Lorem ipsum dolor sit amet, consectetur adipisicing elit"
-    backgroundColor={props.backgroundColor}
-    color={props.color}
-  >
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
-      labore et dolore magna aliqua.
-    </p>
-  </Header4>
-);

package/src/patterns/header/header-5/Header5.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import {
-  Decorator,
-  Container,
-  Cover,
-  CoverContent,
-  Layers,
-  Stack,
-  Text,
-} from '@inc2734/unitone-css';
-
-export const Header5 = (props) => (
-  <Decorator backgroundColor={props.backgroundColor} color={props.color}>
-    <Layers cover>
-      {!!props.src && (
-        <img src={props.src} alt="" style={{ width: 'var(--unitone--pg10)', left: 'auto' }} />
-      )}
-      <Cover>
-        <CoverContent>
-          <Container align="start" gutters={0} maxWidth="var(--unitone--measure)">
-            <Stack gap={2}>
-              {!!props.title && (
-                <Stack style={{ '--unitone--font-size': 5 }}>
-                  <h2>{props.title}</h2>
-                </Stack>
-              )}
-              {!!props.children && <Text>{props.children}</Text>}
-            </Stack>
-          </Container>
-        </CoverContent>
-      </Cover>
-    </Layers>
-  </Decorator>
-);

package/src/patterns/header/header-5/stories/index.stories.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-
-import { Header5 } from '../Header5';
-
-export default {
-  title: 'Patterns/Header/Header-5',
-  component: Header5,
-  argTypes: {
-    backgroundColor: {
-      control: { type: 'color' },
-      table: { defaultValue: { summary: 'transparent' } },
-      type: { name: 'string', required: false },
-    },
-    color: {
-      control: { type: 'color' },
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    backgroundColor: 'transparent',
-    color: 'initial',
-  },
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const Default = (props) => (
-  <Header5
-    src="https://placehold.jp/1280x1024.jpg"
-    title="Lorem ipsum dolor sit amet, consectetur adipisicing elit"
-    backgroundColor={props.backgroundColor}
-    color={props.color}
-  >
-    <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>
-  </Header5>
-);

package/src/patterns/header/header-6/Header6.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-import {
-  Decorator,
-  Center,
-  Container,
-  Cover,
-  CoverContent,
-  Layers,
-  Stack,
-  Text,
-} from '@inc2734/unitone-css';
-
-export const Header6 = (props) => (
-  <Decorator backgroundColor={props.backgroundColor} color={props.color}>
-    <Layers cover>
-      <Decorator padding={props.padding}>
-        <Decorator backgroundColor="transparent" borderColor={props.borderColor} borderWidth="1px">
-          <Cover minHeight={`calc(100vh - var(--unitone--s${props.padding}) * 2`}>
-            <CoverContent>
-              <Container gutters={0} maxWidth="var(--unitone--measure)">
-                <Stack gap={2}>
-                  {!!props.title && (
-                    <Center>
-                      <h2 style={{ '--unitone--font-size': 5 }}>{props.title}</h2>
-                    </Center>
-                  )}
-                  {!!props.children && <Text center>{props.children}</Text>}
-                </Stack>
-              </Container>
-            </CoverContent>
-          </Cover>
-        </Decorator>
-      </Decorator>
-    </Layers>
-  </Decorator>
-);

package/src/patterns/header/header-6/stories/index.stories.jsx

@@ -1,58 +0,0 @@
-import React from 'react';
-
-import { Header6 } from '../Header6';
-
-export default {
-  title: 'Patterns/Header/Header-6',
-  component: Header6,
-  argTypes: {
-    backgroundColor: {
-      control: { type: 'color' },
-      table: { defaultValue: { summary: '#000' } },
-      type: { name: 'string', required: false },
-    },
-    borderColor: {
-      control: { type: 'color' },
-      table: { defaultValue: { summary: '#fff' } },
-      type: { name: 'string', required: false },
-    },
-    color: {
-      control: { type: 'color' },
-      table: { defaultValue: { summary: '#fff' } },
-      type: { name: 'string', required: false },
-    },
-    padding: {
-      control: { type: 'inline-radio' },
-      options: [-2, -1, 1, 2, 3],
-      table: { defaultValue: { summary: 'var(--unitone--s0)' } },
-      type: { name: 'number', required: false },
-    },
-  },
-  args: {
-    backgroundColor: '#000',
-    borderColor: '#fff',
-    color: '#fff',
-    padding: 1,
-  },
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const Default = (props) => (
-  <Header6
-    src="https://placehold.jp/1280x1024.jpg"
-    title="Lorem ipsum dolor"
-    backgroundColor={props.backgroundColor}
-    borderColor={props.borderColor}
-    color={props.color}
-    padding={props.padding}
-  >
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit 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>
-  </Header6>
-);

package/src/patterns/media-text/media-text-1/MediaText1.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-
-import {
-  Decorator,
-  Container,
-  Cover,
-  CoverContent,
-  Stack,
-  Text,
-  WithSidebar,
-} from '@inc2734/unitone-css';
-
-export const MediaText1 = (props) => (
-  <Decorator color={props.color}>
-    <WithSidebar
-      gap={2}
-      contentMinWidth="min(100%, var(--unitone--measure) / 2)"
-      sidebar="left"
-      sidebarWidth="50%"
-      alignItems="center"
-      revert
-    >
-      <Cover noPadding minHeight="0">
-        <CoverContent>
-          <Container gutters={0} maxWidth="var(--unitone--measure)">
-            <Stack gap={2}>
-              {!!props.title && (
-                <Stack style={{ '--unitone--font-size': 4 }}>
-                  <h2>{props.title}</h2>
-                </Stack>
-              )}
-              <Text center>{props.children}</Text>
-            </Stack>
-          </Container>
-        </CoverContent>
-      </Cover>
-      {!!props.src && (
-        <div>
-          <img src={props.src} alt="" />
-        </div>
-      )}
-    </WithSidebar>
-  </Decorator>
-);

package/src/patterns/media-text/media-text-1/stories/index.stories.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import { MediaText1 } from '../MediaText1';
-
-export default {
-  title: 'Patterns/MediaText/MediaText-1',
-  component: MediaText1,
-  argTypes: {
-    color: {
-      control: { type: 'color' },
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    color: 'initial',
-  },
-};
-
-export const Default = (props) => (
-  <MediaText1
-    src="https://placehold.jp/1024x1280.jpg"
-    title="Lorem ipsum dolor sit amet, consectetur adipisicing elit"
-    backgroundColor={props.backgroundColor}
-    color={props.color}
-  >
-    <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>
-  </MediaText1>
-);

package/src/patterns/media-text/media-text-2/MediaText2.jsx

@@ -1,42 +0,0 @@
-import React from 'react';
-
-import {
-  Decorator,
-  Container,
-  Cover,
-  CoverContent,
-  Stack,
-  WithSidebar,
-} from '@inc2734/unitone-css';
-
-export const MediaText2 = (props) => (
-  <Decorator color={props.color}>
-    <WithSidebar
-      gap={2}
-      contentMinWidth="min(100%, var(--unitone--measure) / 2)"
-      sidebar="right"
-      sidebarWidth="50%"
-      alignItems="center"
-    >
-      <Cover noPadding minHeight="0">
-        <CoverContent>
-          <Container gutters={0} maxWidth="var(--unitone--measure)">
-            <Stack gap={2}>
-              {!!props.title && (
-                <Stack style={{ '--unitone--font-size': 4 }}>
-                  <h2>{props.title}</h2>
-                </Stack>
-              )}
-              <Stack>{props.children}</Stack>
-            </Stack>
-          </Container>
-        </CoverContent>
-      </Cover>
-      {!!props.src && (
-        <div>
-          <img src={props.src} alt="" />
-        </div>
-      )}
-    </WithSidebar>
-  </Decorator>
-);

package/src/patterns/media-text/media-text-2/stories/index.stories.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import { MediaText2 } from '../MediaText2';
-
-export default {
-  title: 'Patterns/MediaText/MediaText-2',
-  component: MediaText2,
-  argTypes: {
-    color: {
-      control: { type: 'color' },
-      table: { defaultValue: { summary: 'initial' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    color: 'initial',
-  },
-};
-
-export const Default = (props) => (
-  <MediaText2
-    src="https://placehold.jp/1024x1280.jpg"
-    title="Lorem ipsum dolor sit amet, consectetur adipisicing elit"
-    backgroundColor={props.backgroundColor}
-    color={props.color}
-  >
-    <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>
-  </MediaText2>
-);

package/src/stories/1.introduction.stories.mdx

@@ -1,60 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="1: Introduction" />
-
-# unitone CSS
-
-unitone CSS is a CSS framework. This framework was inspired by [EVERY LAYOUT](https://every-layout.dev/).
-
-unitone CSS has the following features:
-
-- Intrinsic web design
-- Layout primitives
-- Modular scales
-- Fully CSS variables
-
-## Intrinsic web design
-
-Responsive web design, which is based on viewport width, causes problems with component portability.
-
-By adopting "Intrinsic Web Design" based on content rather than viewport width, we can achieve true responsive web design that can be used on devices of all sizes.
-
-## Layout primitives
-
-Layout is achieved by combining components with a single responsibility, such as "provide vertical space between elements" or "place elements at equal intervals".
-
-This allows for flexible layout and CSS size reduction.
-
-## Modular scales
-
-Adopting and following some uniform standard results in a harmonious and orderly design.
-
-In unitone CSS, variations are provided based on the harmonic sequence for font size and the Fibonacci sequence for margins.
-
-Also, if you follow the unitone CSS method of specifying font size, a balanced `line-height` will automatically be applied.
-
-## Fully CSS variables
-
-CSS variables are used everywhere, including each design tokens and component properties.
-
-<hr />
-
-## GitHub
-
-https://github.com/inc2734/unitone CSS
-
-## NPM
-
-https://www.npmjs.com/package/@inc2734/unitone CSS
-
-## Storybook
-
-https://inc2734.github.io/unitone CSS
-
-## Browser support
-
-Modern browser only.
-
-## License
-
-MIT

package/src/stories/2.get-started.stories.mdx

@@ -1,49 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="2: Get started" />
-
-# Get started
-
-## Install
-
-```shell
-$ npm install --save-dev @inc2734/unitone-css
-```
-
-### Import CSS
-
-#### Using Sass
-
-```scss
-@use 'PATH/TO/node_modules/@inc2734/unitone-css/src/app';
-```
-
-#### Using CSS
-
-```html
-<link rel="stylesheet" href="/node_modules/@inc2734/unitone-css/dist/app.css" />
-```
-
-### Import js
-
-#### Using import
-
-```js
-import '@inc2734/unitone-css/app';
-```
-
-#### Using script
-
-```html
-<script src="/node_modules/@inc2734/unitone-css/dist/app.js"></script>
-```
-
-## Using React components
-
-```jsx
-import { Decorator } from '@inc2734/unitone-css';
-
-<Decorator padding={ 1 }>
-  <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>
-</Decorator>
-```

package/src/stories/3.global-api.stories.mdx

@@ -1,61 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="3: Global API" />
-
-# Global API
-
-## Font size
-
-You can scale the font size with the CSS custom property `--unitone--font-size`. The minimum value is `-2` and the maximum value is `7`. If you scale the font size with this CSS custom property, the `line-height` will be automatically set to an appropriate value.
-
-Variations on font size are available based on the harmonic sequence.
-
-```html
-<p style="--unitone--font-size: 2">
-  ...
-</p>
-```
-
-## Line height
-
-The half leading can be set. The default value is `0.4`.
-
-```html
-<p style="--unitone--half-leading: .4">
-  ...
-</p>
-```
-
-## Fluid typography
-
-You can using fluid typography. The `font-size` and the `line-height` change fluidly according to screen size.
-
-```html
-<p style="--unitone--font-size: 7" data-unitone-layout="-fluid-typography">
-  ...
-</p>
-```
-
-## Margin / Gap
-
-You can set the properly scaled margin and gap by using CSS custom properties. The minimum value is `--unitone--s-2` and the maximum value is `--unitone--s7`. `--unitone--s1` is the base value and `--unitone--s0` is `0`.
-
-Variations on margin and gap are available based on the Fibonacci sequence.
-
-```html
-<div style="margin: var(--unitone--s2); gap: var(--unitone--s1)">
-  ...
-</div>
-```
-
-## Padding
-
-You can set the properly scaled padding by using CSS custom properties. The minimum value is `--unitone--p-2` and the maximum value is `--unitone--p7`. `--unitone--p1` is the base value and `--unitone--p0` is `0`.
-
-Variations on padding are available based on the Fibonacci sequence.
-
-```html
-<div style="padding: var(--unitone--p2)">
-  ...
-</div>
-```