scaffolding

.storybook/main.ts

@@ -0,0 +1,18 @@
+import { StorybookConfig } from '@storybook/html-vite'
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.mdx"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/html-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import { Preview } from '@storybook/html'
+import '../src/core'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -0,0 +1,3 @@
+# NES.css@next
+
+This is experimenal branch.

package.json

@@ -2,6 +2,8 @@
   "name": "nes.css",
   "description": "NES.css is NES-style CSS Framework.",
   "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "repository": {
     "type": "git",
@@ -14,5 +16,18 @@
     "framework"
   ],
   "author": "BcRikko (https://github.com/Bcrikko)",
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.0.0",
+    "@storybook/addon-interactions": "^7.0.0",
+    "@storybook/addon-links": "^7.0.0",
+    "@storybook/blocks": "^7.0.0",
+    "@storybook/html": "^7.0.0",
+    "@storybook/html-vite": "^7.0.0",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.0"
+  },
+  "peerDependencies": {}
 }

src/core/foundation.css

@@ -0,0 +1,14 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}

src/core/index.ts

@@ -0,0 +1 @@
+import './foundation.css'

src/core/properties.css

@@ -0,0 +1 @@
+/* keep */

src/elements/button/button.css

@@ -0,0 +1,48 @@
+@property --nes-btn-border-width {
+  syntax: '<line-width>';
+  inherits: false;
+  initial-value: 4px;
+}
+
+@property --nes-btn-border-color {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: black;
+}
+
+@property --nes-btn-border-inset-color {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: gray;
+}
+
+/**
+ * CSS Variables
+ */
+.nes-btn {
+  --nes-btn-border-width: 4px;
+  --nes-btn-border-color: black;
+  --nes-btn-border-inset-color: gray;
+
+}
+
+/**
+ * Basic Style
+ */
+.nes-btn {
+  border: solid var(--nes-btn-border-width) var(--nes-btn-border-color);
+  box-shadow:
+    inset 0 calc(var(--nes-btn-border-width) * -1) var(--nes-btn-border-inset-color),
+    inset calc(var(--nes-btn-border-width) * -1) 0 var(--nes-btn-border-inset-color);
+
+  --nes-n: var(--nes-btn-border-width);
+  --nes-m: calc(100% - var(--nes-btn-border-width));
+  clip-path: polygon(
+    0 var(--nes-n), var(--nes-n) var(--nes-n), var(--nes-n) 0,
+    var(--nes-m) 0, var(--nes-m) var(--nes-n), 100% var(--nes-n),
+    100% var(--nes-m), var(--nes-m) var(--nes-m), var(--nes-m) 100%,
+    var(--nes-n) 100%, var(--nes-n) var(--nes-m), 0 var(--nes-m)
+  );
+
+  padding: 0.5em 1em;
+}

src/elements/button/button.stories.mdx

@@ -0,0 +1,55 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import "./button.css";
+
+<Meta title="MDX/Elements/Button" />
+
+# Elements/Button
+
+This is button.
+
+<Canvas>
+  <Story name="Button">
+    {() => `
+      <button class="nes-btn">
+        Click me!
+      </button>
+    `}
+  </Story>
+</Canvas>
+
+## CSS Variables
+
+<table>
+  <thead>
+    <tr>
+      <th>@property</th>
+      <th>syntax</th>
+      <th>inherits</th>
+      <th>initial-value</th>
+      <th>comments</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`--nes-btn-border-width`</td>
+      <td>`<line-width>`</td>
+      <td>`false`</td>
+      <td>`4px`</td>
+      <td>...</td>
+    </tr>
+    <tr>
+      <td>`--nes-btn-border-color`</td>
+      <td>`<color>`</td>
+      <td>`false`</td>
+      <td>`black`</td>
+      <td>...</td>
+    </tr>
+    <tr>
+      <td>`--nes-btn-border-inset-color`</td>
+      <td>`<color>`</td>
+      <td>`false`</td>
+      <td>`gray`</td>
+      <td>...</td>
+    </tr>
+  </tbody>
+</table>