@inc2734/unitone-css 0.46.5 → 0.47.2

package/src/settings/_root.scss

@@ -166,25 +166,25 @@
    */
   --unitone--container-max-width: #{ variables.$container-max-width };
 
-  $_grid-columns: 12;
-  $_grid-rows: 7;
-  --unitone--grid-columns: #{ $_grid-columns };
-  --unitone--grid-rows: #{ $_grid-rows };
+  --unitone--grid-columns: #{ variables.$grid-columns };
+  --unitone--grid-rows: #{ variables.$grid-rows };
   --unitone--grid-gap: var(--unitone--global--gap);
 
   /**
    * Grid sizes (% based).
    */
+  --unitone--_pg-base: calc((100% - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns));
   --unitone--pg0: 0%;
-  @for $i from 1 through $_grid-columns {
-    --unitone--pg#{ $i }: calc((100% - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns) * #{ $i } + var(--unitone--grid-gap) * #{ $i - 1 });
+  @for $i from 1 through variables.$grid-columns {
+    --unitone--pg#{ $i }: calc(var(--unitone--_pg-base) * #{ $i } + var(--unitone--grid-gap) * #{ $i - 1 });
   }
 
   /**
    * Grid sizes (container based).
    */
+  --unitone--_cg-base: calc((var(--unitone--container-max-width) - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns));
   --unitone--cg0: 0%;
-  @for $i from 1 through $_grid-columns {
-    --unitone--cg#{ $i }: calc((var(--unitone--container-max-width) - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns) * #{ $i } + var(--unitone--grid-gap) * #{ $i - 1 });
+  @for $i from 1 through variables.$grid-columns {
+    --unitone--cg#{ $i }: calc(var(--unitone--_cg-base) * #{ $i } + var(--unitone--grid-gap) * #{ $i - 1 });
   }
 }

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

@@ -2,21 +2,54 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="1: Introduction" />
 
-# 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
+https://github.com/inc2734/unitone CSS
 
 ## NPM
 
-https://www.npmjs.com/package/@inc2734/unitone-css
+https://www.npmjs.com/package/@inc2734/unitone CSS
 
 ## Storybook
 
-https://inc2734.github.io/unitone-css
+https://inc2734.github.io/unitone CSS
 
 ## Browser support
 

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

@@ -10,14 +10,40 @@ import { Meta } from '@storybook/addon-docs';
 $ npm install --save-dev @inc2734/unitone-css
 ```
 
-### Using Sass
+### Import CSS
+
+#### Using Sass
 
 ```scss
 @use 'PATH/TO/node_modules/@inc2734/unitone-css/src/app';
 ```
 
-### Using CSS
+#### 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

@@ -6,52 +6,56 @@ import { Meta } from '@storybook/addon-docs';
 
 ## Font size
 
-You can scale the font size with the CSS custom property `--unitone--font-size`. The minimum value is `1` 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.
+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">
-  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>
 ```
 
 ## Line height
 
-The half leading can be set. The default value is `0.3`.
+The half leading can be set. The default value is `0.4`.
 
 ```html
 <p style="--unitone--half-leading: .4">
-  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>
 ```
 
 ## Fluid typography
 
-You can using fluid typography. The font-size and the line-height change fluidly according to screen size.
+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">
-  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>
 ```
 
-## Margin / Padding
+## 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`.
 
-You can set the properly scaled margin and padding by using CSS custom properties. The minimum value is `--unitone--s-2` and the maximum value is `--unitone--s4`. `--unitone--s1` is the base value (`1rem`) and `--unitone--s0` is `0`.
+Variations on padding are available based on the Fibonacci sequence.
 
 ```html
-<div style="margin: var(--unitone--s2); padding: var(--unitone--s1)">
-  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
+<div style="padding: var(--unitone--p2)">
+  ...
 </div>
 ```

package/src/stories/4.global-css-variables.stories.mdx

@@ -0,0 +1,198 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="4: Global CSS variables" />
+
+# Global CSS variables
+
+## Typography
+
+### --unitone--measure
+
+Length of one line of text.
+
+### --unitone--font-size
+
+Font size level. Font sizes are available in variations based on harmonic sequences. Can be set from `-2` to `7`. Default is `0`.
+
+### --unitone--half-leading
+
+The size of the margins added above and below the text.
+
+The size of one line (`line-height`) is calculated by the following formula.
+
+```css
+1 * var(--unitone--half-leading) * 2
+```
+
+### --unitone--line-height-slope
+
+In general, the larger the font size, the narrower the line spacing between lines, making text easier to read. For this reason, `line-height` is often specified together with `font-size`, for example, `line-height: 1.1` for `font-size: 4rem`.
+
+That's a lot of work. Therefore, we created a mechanism to automatically optimize the line spacing according to the font size at all times.
+
+For example, suppose you want to use the following as a standard for `line-height`.
+
+```
+A = (1, 1.6) // When font-size: 1rem, line-height: 1.6
+B = (4, 1.1) // When font-size: 4rem, line-height: 1.1
+```
+
+Then, the following formula is formed.
+
+```
+y = -0.1666666666667x + 1.7666666666667 // y = line-height, x = Font size ratio
+```
+
+This `-0.16666666666666666667` becomes `--unitone--line-height-slope`. This line-height-slope can be customized by overriding `--unitone--line-height-slope`.
+
+### --unitone--font-family
+
+Basic `font-family`.
+
+## Margin / Gap / Padding
+
+Space sizes are available in variations based on the Fibonacci sequence.
+
+### Standard (Mainly for `margin` / `gap`)
+
+Can be set from `-2` to `7`.
+
+For levels `2` and above, `clamp` is used to adjust the margins so that they do not become too large on small screens.
+
+| CSS variables | Specific value |
+| ---- | ---- |
+| `--unitone--s-2` | The default is about `0.53em`. |
+| `--unitone--s-1` | The default is about `1.07em`. |
+| `--unitone--s0` | `0em` |
+| `--unitone--s1` | The default is `1.8em`. |
+| `--unitone--s2` | Default is `3em` to about `2.65em`. |
+| `--unitone--s3` | Default is `4.8em` to about `3.18em`. |
+| `--unitone--s4` | Default is `7.8em` to about `4.06em`. |
+| `--unitone--s5` | Default is `12.6em` to about `5.46em`. |
+| `--unitone--s6` | Default is `20.4em` to about `7.75em`. |
+| `--unitone--s7` | Default is `33em` to about `11.44em`. |
+
+### For padding
+
+Can be set from `-2` to `7`.
+
+For levels `2` and above, `clamp` is used to adjust the margins so that they do not become too large on small screens (`--unitone--s{level}` will also be adjusted, but with a larger reduction).
+
+| CSS variables | Specific value |
+| ---- | ---- |
+| `--unitone--p-2` | The default is about `0.53em`. |
+| `--unitone--p-1` | The default is about `1.07em`. |
+| `--unitone--p0` | `0em` |
+| `--unitone--p1` | The default is `1.8em`. |
+| `--unitone--p2` | Default is `3em` to about `1.99em`. |
+| `--unitone--p3` | Default is `4.8em` to about `2.11em`. |
+| `--unitone--p4` | Default is `7.8em` to about `2.33em`. |
+| `--unitone--p5` | Default is `12.6em` to about `2.67em`. |
+| `--unitone--p6` | Default is `20.4em` to about `3.23em`. |
+| `--unitone--p7` | Default is `33em` to about `4.13em`. |
+
+### em base
+
+Can be set from `-2` to `7`.
+
+| CSS variables | Specific value |
+| ---- | ---- |
+| `--unitone--em-2` | The default is about `0.53em`. |
+| `--unitone--em-1` | The default is about `1.07em`. |
+| `--unitone--em0` | `0em` |
+| `--unitone--em1` | The default is `1.8em`. |
+| `--unitone--em2` | Default is `3em``. |
+| `--unitone--em3` | Default is `4.8em`. |
+| `--unitone--em4` | Default is `7.8em`. |
+| `--unitone--em5` | Default is `12.6em`. |
+| `--unitone--em6` | Default is `20.4em`. |
+| `--unitone--em7` | Default is `33em`. |
+
+### rem base
+
+Can be set from `-2` to `7`.
+
+| CSS variables | Specific value |
+| ---- | ---- |
+| `--unitone--rem-2` | The default is about `0.53rem`. |
+| `--unitone--rem-1` | The default is about `1.07rem`. |
+| `--unitone--rem0` | `0rem` |
+| `--unitone--rem1` | The default is `1.8rem`. |
+| `--unitone--rem2` | Default is `3em``. |
+| `--unitone--rem3` | Default is `4.8rem`. |
+| `--unitone--rem4` | Default is `7.8rem`. |
+| `--unitone--rem5` | Default is `12.6rem`. |
+| `--unitone--rem6` | Default is `20.4rem`. |
+| `--unitone--rem7` | Default is `33rem`. |
+
+### Grid (%) base
+
+Size (`100%`) of the parent element divided and multiplied by an arbitrary number of grids.
+
+The number of divisions is defined by `var(--unitone--grid-columns)`, and the margins between each grid are defined by var`(--unitone--grid-gap)`.
+
+| CSS variables | Specific value |
+| ---- | ---- |
+| `--unitone--pg0` | 0% |
+| `--unitone--pg1` | `((100% - {grid-gap} * ({grid-columns} - 1)) / {grid-columns})` |
+| `--unitone--pg2` | `((100% - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 2 + {grid-gap}` |
+| `--unitone--pg3` | `((100% - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 3 + {grid-gap} * 2` |
+| `--unitone--pg4` | `((100% - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 4 + {grid-gap} * 3` |
+| `--unitone--pg5` | `((100% - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 5 + {grid-gap} * 4` |
+| `--unitone--pg6` | `((100% - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 6 + {grid-gap} * 5` |
+| `--unitone--pg7` | `((100% - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 7 + {grid-gap} * 6` |
+| `--unitone--pg8` | `((100% - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 8 + {grid-gap} * 7` |
+| `--unitone--pg9` | `((100% - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 9 + {grid-gap} * 8` |
+| `--unitone--pg10` | `((100% - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 10 + {grid-gap} * 9` |
+| `--unitone--pg11` | `((100% - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 11 + {grid-gap} * 10` |
+| `--unitone--pg12` | `((100% - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 12 + {grid-gap} * 11` |
+
+### Grid (Container size) base
+
+Size (`var(--unitone--container-max-width)`) of the parent element divided and multiplied by an arbitrary number of grids.
+
+The number of divisions is defined by `var(--unitone--grid-columns)`, and the margins between each grid are defined by var`(--unitone--grid-gap)`.
+
+| CSS variables | Specific value |
+| ---- | ---- |
+| `--unitone--cg0` | 0% |
+| `--unitone--cg1` | `(({container-max-width} - {grid-gap} * ({grid-columns} - 1)) / {grid-columns})` |
+| `--unitone--cg2` | `(({container-max-width} - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 2 + {grid-gap}` |
+| `--unitone--cg3` | `(({container-max-width} - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 3 + {grid-gap} * 2` |
+| `--unitone--cg4` | `(({container-max-width} - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 4 + {grid-gap} * 3` |
+| `--unitone--cg5` | `(({container-max-width} - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 5 + {grid-gap} * 4` |
+| `--unitone--cg6` | `(({container-max-width} - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 6 + {grid-gap} * 5` |
+| `--unitone--cg7` | `(({container-max-width} - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 7 + {grid-gap} * 6` |
+| `--unitone--cg8` | `(({container-max-width} - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 8 + {grid-gap} * 7` |
+| `--unitone--cg9` | `(({container-max-width} - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 9 + {grid-gap} * 8` |
+| `--unitone--cg10` | `(({container-max-width} - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 10 + {grid-gap} * 9` |
+| `--unitone--cg11` | `(({container-max-width} - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 11 + {grid-gap} * 10` |
+| `--unitone--cg12` | `(({container-max-width} - {grid-gap} * ({grid-columns} - 1)) / {grid-columns}) * 12 + {grid-gap} * 11` |
+
+## Global gap
+
+### --unitone--global--gap
+
+It is mainly specified for block gaps where the blocks are aligned left to right or on a grid.
+
+### --unitone--global--text-gap
+
+It is mainly used for gaps between blocks of text that are aligned vertically or horizontally.
+
+## Global gutters
+
+### --unitone--global--gutters
+
+It is specified in the left and right margins of the container.
+
+## Container size
+
+### --unitone--container-max-width
+
+Container width.
+
+## Global shadow
+
+### --unitone--global--box-shadow
+
+Basic `box-shadow`.

package/src/variables/_variables.scss

@@ -23,3 +23,5 @@ $line-height: clamp(
 );
 
 $container-max-width: $max-breakpoint * 16px;  // = 1280px
+$grid-columns: 12;
+$grid-rows: 7;

package/src/layout-primitives/cover/Cover.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-export const Cover = ({ gap, minHeight, justifyContent, noPadding, style, ...props }) => {
-  style = {
-    ...style,
-    '--unitone--min-height': !!minHeight ? minHeight : undefined,
-  };
-
-  return (
-    <div
-      data-unitone-layout={[
-        'cover',
-        noPadding ? '-no-padding' : undefined,
-        'undefined' !== typeof gap ? `-gap:${gap}` : undefined,
-        'undefined' !== typeof justifyContent ? `-justify-content:${justifyContent}` : undefined,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      {props.children}
-    </div>
-  );
-};
-
-export const CoverContent = ({ position, tagName = 'div', ...props }) => {
-  const Tag = tagName;
-
-  return (
-    <Tag
-      data-unitone-layout={[
-        'cover__content',
-        'undefined' !== typeof position ? `-valign:${position}` : undefined,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {props.children}
-    </Tag>
-  );
-};