@inc2734/unitone-css 0.23.0

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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { Decorator } from '../../../layout-primitives/decorator/Decorator';
+import { Center } from '../../../layout-primitives/center/Center';
+import { Container } from '../../../layout-primitives/container/Container';
+import { Cover, CoverContent } from '../../../layout-primitives/cover/Cover';
+import { Layers } from '../../../layout-primitives/layers/Layers';
+import { Stack } from '../../../layout-primitives/stack/Stack';
+import { Text } from '../../../layout-primitives/text/Text';
+
+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.jsx

@@ -0,0 +1,58 @@
+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--s1)' } },
+      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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Decorator } from '../../../layout-primitives/decorator/Decorator';
+import { Container } from '../../../layout-primitives/container/Container';
+import { Cover, CoverContent } from '../../../layout-primitives/cover/Cover';
+import { Stack } from '../../../layout-primitives/stack/Stack';
+import { Text } from '../../../layout-primitives/text/Text';
+import { WithSidebar } from '../../../layout-primitives/with-sidebar/WithSidebar';
+
+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.jsx

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { Decorator } from '../../../layout-primitives/decorator/Decorator';
+import { Container } from '../../../layout-primitives/container/Container';
+import { Cover, CoverContent } from '../../../layout-primitives/cover/Cover';
+import { Stack } from '../../../layout-primitives/stack/Stack';
+import { WithSidebar } from '../../../layout-primitives/with-sidebar/WithSidebar';
+
+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.jsx

@@ -0,0 +1,34 @@
+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/settings/_body.scss

@@ -0,0 +1,8 @@
+body {
+  background-color: var(--unitone--color-white);
+  color: var(--unitone--color-text);
+  font-family: var(--unitone--font-family);
+  -webkit-font-smoothing: antialiased;
+  // -moz-osx-font-smooting: grayscale; // White out elements will activate this.
+  overflow-wrap: break-word;
+}

package/src/settings/_html.scss

@@ -0,0 +1,3 @@
+html {
+  font-size: calc(var(--unitone--base-font-size) * 1px);
+}

package/src/settings/_root.scss

@@ -0,0 +1,152 @@
+@use 'sass:list';
+@use 'sass:math';
+@use '../variables/variables' as variables;
+
+:root {
+  /**
+   * Column width in typography.
+   */
+  --unitone--measure: 38rem;
+
+  /**
+   * Collors.
+   */
+  --unitone--color-white: #fff;
+  --unitone--color-black: #000;
+  --unitone--color-text: #222;
+
+  /**
+   * Font size level.
+   * It is not recommended to override this value with :root in order to have the size determined based on 0.
+   */
+  --unitone--font-size: 0;
+
+  /**
+   * The 1rem px font size (no units).
+   */
+  --unitone--base-font-size: 16;
+
+  --unitone--harmonic-sequence-base: 8;
+  --unitone--min-harmonic-sequence-base: 9;
+  --unitone--max-harmonic-sequence-base: var(--unitone--harmonic-sequence-base);
+
+  /**
+   * Gutter provided above and below the text in a line.
+   */
+  --unitone--half-leading: .3;
+
+  /**
+   * The line-height slope. If smaller, the line-height is adjusted to a smaller value as the font size increases.
+   *
+   * A =(1, 1.6) // 1rem / 1.6
+   * B =(4, 1.1) // 4rem / 1.1
+   * y = -0.1666666666667x + 1.7666666666667 // y = line-height, x = Font size ratio
+   *
+   * @see https://www.geogebra.org/graphing?lang=ja
+   */
+  --unitone--line-height-slope: -0.16666;
+
+  /**
+   * Font family
+   */
+  --unitone--font-family: sans-serif;
+
+  /**
+   * Reference value of the modular scale for space.
+   */
+  --unitone--_space-reference-value: #{ variables.$line-height } / 3;
+
+  /**
+   * Modular scales for spaces.
+   */
+  --unitone--ms-2: calc(var(--unitone--_space-reference-value) * #{ list.nth(variables.$fibonacci-sequence, 1) });
+  --unitone--ms-1: calc(var(--unitone--_space-reference-value) * #{ list.nth(variables.$fibonacci-sequence, 2) });
+  --unitone--ms0: 0;
+  --unitone--ms1: calc(var(--unitone--_space-reference-value) * #{ list.nth(variables.$fibonacci-sequence, 3) });
+  --unitone--ms2: calc(var(--unitone--_space-reference-value) * #{ list.nth(variables.$fibonacci-sequence, 4) });
+  --unitone--ms3: calc(var(--unitone--_space-reference-value) * #{ list.nth(variables.$fibonacci-sequence, 5) });
+  --unitone--ms4: calc(var(--unitone--_space-reference-value) * #{ list.nth(variables.$fibonacci-sequence, 6) });
+  --unitone--ms5: calc(var(--unitone--_space-reference-value) * #{ list.nth(variables.$fibonacci-sequence, 7) });
+  --unitone--ms6: calc(var(--unitone--_space-reference-value) * #{ list.nth(variables.$fibonacci-sequence, 8) });
+  --unitone--ms7: calc(var(--unitone--_space-reference-value) * #{ list.nth(variables.$fibonacci-sequence, 9) });
+
+  /**
+   * Modular scales for spaces (em based).
+   */
+  --unitone--em-2: calc(1em * var(--unitone--ms-2));
+  --unitone--em-1: calc(1em * var(--unitone--ms-1));
+  --unitone--em0: 0em;
+  --unitone--em1: calc(1em * var(--unitone--ms1));
+  --unitone--em2: calc(1em * var(--unitone--ms2));
+  --unitone--em3: calc(1em * var(--unitone--ms3));
+  --unitone--em4: calc(1em * var(--unitone--ms4));
+  --unitone--em5: calc(1em * var(--unitone--ms5));
+  --unitone--em6: calc(1em * var(--unitone--ms6));
+  --unitone--em7: calc(1em * var(--unitone--ms7));
+
+  /**
+   * Modular scales for spaces (rem based).
+   */
+  --unitone--rem-2: calc(1rem * var(--unitone--ms-2));
+  --unitone--rem-1: calc(1rem * var(--unitone--ms-1));
+  --unitone--rem0: 0rem;
+  --unitone--rem1: calc(1rem * var(--unitone--ms1));
+  --unitone--rem2: calc(1rem * var(--unitone--ms2));
+  --unitone--rem3: calc(1rem * var(--unitone--ms3));
+  --unitone--rem4: calc(1rem * var(--unitone--ms4));
+  --unitone--rem5: calc(1rem * var(--unitone--ms5));
+  --unitone--rem6: calc(1rem * var(--unitone--ms6));
+  --unitone--rem7: calc(1rem * var(--unitone--ms7));
+
+  /**
+   * Modular scales for spaces.
+   */
+  @function _generate-fluid-spacing($min, $max) {
+    $slope: calc((#{ $max } - #{ $min }) / (#{ variables.$max-breakpoint - variables.$min-breakpoint }));
+    $yAxis: calc(#{ -1 * variables.$min-breakpoint } * #{ $slope } + #{ $min });
+    $preferredValue: calc(#{ $yAxis } * 1em + #{ $slope } * 100vw);
+    @return clamp(#{ $min } * 1em, #{ $preferredValue }, #{ $max } * 1em);
+  }
+  $_quotient: math.div(variables.$min-breakpoint, variables.$max-breakpoint);
+  --unitone--s-2: var(--unitone--em-2);
+  --unitone--s-1: var(--unitone--em-1);
+  --unitone--s0: var(--unitone--em0);
+  --unitone--s1: var(--unitone--em1);
+  --unitone--s2: #{ _generate-fluid-spacing(calc(var(--unitone--ms1) + var(--unitone--ms2) * #{ $_quotient }), var(--unitone--ms2)) };
+  --unitone--s3: #{ _generate-fluid-spacing(calc(var(--unitone--ms1) + var(--unitone--ms3) * #{ $_quotient }), var(--unitone--ms3)) };
+  --unitone--s4: #{ _generate-fluid-spacing(calc(var(--unitone--ms1) + var(--unitone--ms4) * #{ $_quotient }), var(--unitone--ms4)) };
+  --unitone--s5: #{ _generate-fluid-spacing(calc(var(--unitone--ms1) + var(--unitone--ms5) * #{ $_quotient }), var(--unitone--ms5)) };
+  --unitone--s6: #{ _generate-fluid-spacing(calc(var(--unitone--ms1) + var(--unitone--ms6) * #{ $_quotient }), var(--unitone--ms6)) };
+  --unitone--s7: #{ _generate-fluid-spacing(calc(var(--unitone--ms1) + var(--unitone--ms7) * #{ $_quotient }), var(--unitone--ms7)) };
+
+  /**
+   * Max width of the container.
+   */
+  --unitone--container-max-width: #{ variables.$container-max-width };
+
+  $_grid-columns: 12;
+  --unitone--_grid-gutters: calc(#{ $_grid-columns - 1 } * var(--unitone--s1));
+
+  /**
+   * Grid sizes (% based).
+   */
+  $_percentage-grid-width: calc((100% - var(--unitone--_grid-gutters)) / #{ $_grid-columns });
+  --unitone--pg0: 0%;
+  @for $i from 1 through $_grid-columns {
+    --unitone--pg#{ $i }: calc(#{ $_percentage-grid-width } * #{ $i } + var(--unitone--s1) * #{ $i - 1 });
+  }
+
+  /**
+   * Grid sizes (container based).
+   */
+  $_container-grid-width: calc((var(--unitone--container-max-width) - var(--unitone--_grid-gutters)) / #{ $_grid-columns });
+  --unitone--cg0: 0%;
+  @for $i from 1 through $_grid-columns {
+    --unitone--cg#{ $i }: calc(#{ $_container-grid-width } * #{ $i } + var(--unitone--s1) * #{ $i - 1 });
+  }
+
+  /**
+   * Box shadow
+   */
+  --unitone--shadow: 0 5px 20px -5px rgb(0 0 0 / 20%);
+}

package/src/settings/_settings.scss

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

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

@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="1: Introduction" />
+
+# Introduction
+
+unitone CSS is a CSS framework. This framework was inspired by [EVERY LAYOUT](https://every-layout.dev/).
+
+## 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

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="2: Get started" />
+
+# Get started
+
+## Install
+
+```shell
+$ npm install --save-dev @inc2734/unitone-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" />
+```

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

@@ -0,0 +1,57 @@
+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 `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.
+
+```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`.
+
+```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.
+
+```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
+
+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`.
+
+```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>
+```

package/src/storybook.scss

@@ -0,0 +1,11 @@
+@use 'settings/settings';
+@use 'foundation/foundation';
+@use 'layout-primitives/layout-primitives';
+@use 'helper/helper';
+
+#root,
+.docs-story {
+  @include foundation.foundation();
+  @include layout-primitives.layout-primitives();
+  @include helper.helper();
+}

package/src/variables/_variables.scss

@@ -0,0 +1,22 @@
+$fibonacci-sequence: 1, 2, 3, 5, 8, 13, 21, 34, 55;
+
+$min-breakpoint: 22.5; // = 360px
+$max-breakpoint: 80;   // = 1280px
+
+$_font-size-scale: calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - var(--unitone--font-size)));
+$font-size: calc($_font-size-scale * 1rem);
+
+$_max-font-size: calc(var(--unitone--max-harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - var(--unitone--font-size)));
+$_min-font-size: calc(var(--unitone--min-harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size)));
+$_slope: calc((#{ $_max-font-size } - #{ $_min-font-size }) / (#{ $max-breakpoint - $min-breakpoint }));
+$_yAxis: calc(#{-1 * $min-breakpoint } * #{ $_slope } + #{ $_min-font-size });
+$_preferred-font-size: calc((#{ $_yAxis } * 1rem) + (#{ $_slope } * 100vw));
+$fluid-font-size: clamp(1rem * #{ $_min-font-size }, #{ $_preferred-font-size }, 1rem * #{ $_max-font-size });
+
+$line-height: clamp(
+  1,
+  var(--unitone--line-height-slope) * var(--unitone--fluid-font-size-magnification, #{ $_font-size-scale }) + 1 + 2 * var(--unitone--half-leading) + -1 * var(--unitone--line-height-slope),
+  2 * var(--unitone--half-leading) + 1
+);
+
+$container-max-width: $max-breakpoint * 16px;  // = 1280px