create template

.gitignore

@@ -1,10 +1,4 @@
 node_modules
-.vscode
-.idea
-css
-storybook-static
 .DS_Store
 
-# Ignoring built up css and map files
+*.properties.json
-scss/*.css
-scss/*.css.map

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": true
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "files.insertFinalNewline": true,
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    "**/node_modules": true,
+  }
+}

src/_template/index.css

@@ -0,0 +1,3 @@
+@import './template.properties.css';
+@import './template.theme.css';
+@import './template.css';

src/_template/template.css

@@ -0,0 +1,13 @@
+/**
+ * Override & Local CSS Variables
+ */
+.nes-tmp {
+  --nes_tmp-val: black;
+}
+
+/**
+* Basic Style
+*/
+.nes-tmp {
+  color: var(--nes_tmp-val);
+}

src/_template/template.properties.css

@@ -0,0 +1,11 @@
+@property --nes-btn-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: var(--nes-color-dark);
+
+}
+@property --nes-btn-bg-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: var(--nes-color-default);
+}

src/_template/template.stories.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import "./index.css";
+
+import { PropsDocs } from '../../../scripts/docgen/PropsDocs'
+import json from './template.properties.json'
+
+<Meta title="MDX/Category/Template" />
+
+# Category/Template
+
+This is template.
+
+<Canvas>
+  <Story name="Showcase">
+    {() => `
+      <div class="stack">
+        <div class="nes-tmp"></div>
+      </div>
+    `}
+  </Story>
+</Canvas>
+
+## CSS Variables
+
+<PropsDocs json={json}></PropsDocs>

src/_template/template.theme.css

@@ -0,0 +1,68 @@
+/**
+ * Global CSS Variables
+ *
+ * There are  variables that you can change.
+ */
+.nes-tmp {
+  /* Color theme */
+  --nes-tmp-color: var(--nes-color-dark);
+  --nes-tmp-bg-color: var(--nes-color-default);
+  --nes-tmp-border-color: var(--nes-color-dark);
+  --nes-tmp-border-color-inner: var(--nes-color-default-shade);
+
+  /* Appearance */
+  --nes-tmp-border-width: 4px;
+  --nes-tmp-border-width-inner: 4px;
+}
+.nes-tmp:hover {
+  --nes-tmp-border-width-inner: 6px;
+  --nes-tmp-bg-color: var(--nes-color-default-tint);
+}
+
+/**
+ * Primary theme
+ */
+.nes-tmp.isPrimary {
+  --nes-tmp-color: var(--nes-color-light);
+  --nes-tmp-bg-color: var(--nes-color-primary);
+  --nes-tmp-border-color-inner: var(--nes-color-primary-shade);
+}
+.nes-tmp.isPrimary:hover {
+  --nes-tmp-bg-color: var(--nes-color-primary-tint);
+}
+
+/**
+ * Secondary theme
+ */
+.nes-tmp.isSecondary {
+  --nes-tmp-color: var(--nes-color-light);
+  --nes-tmp-bg-color: var(--nes-color-secondary);
+  --nes-tmp-border-color-inner: var(--nes-color-secondary-shade);
+}
+.nes-tmp.isSecondary:hover {
+  --nes-tmp-bg-color: var(--nes-color-secondary-tint);
+}
+
+/**
+ * Warning theme
+ */
+.nes-tmp.isWarning {
+  --nes-tmp-color: var(--nes-color-dark);
+  --nes-tmp-bg-color: var(--nes-color-warning);
+  --nes-tmp-border-color-inner: var(--nes-color-warning-shade);
+}
+.nes-tmp.isWarning:hover {
+  --nes-tmp-bg-color: var(--nes-color-warning-tint);
+}
+
+/**
+ * Danger theme
+ */
+.nes-tmp.isDanger {
+  --nes-tmp-color: var(--nes-color-light);
+  --nes-tmp-bg-color: var(--nes-color-danger);
+  --nes-tmp-border-color-inner: var(--nes-color-danger-shade);
+}
+.nes-tmp.isDanger:hover {
+  --nes-tmp-bg-color: var(--nes-color-danger-tint);
+}

src/core/foundation.css

@@ -13,6 +13,7 @@ textarea {
   line-height: inherit;
 }
 
-:focus {
+:focus-visible {
+  outline: 3px solid var(--nes-color-primary);
   outline-offset: 2px;
 }

src/elements/button/button.css

@@ -23,6 +23,7 @@
   color: var(--nes-btn-color);
   background-color: transparent;
   border: none;
+  border-radius: 0;
 }
 
 /**

src/elements/button/button.stories.mdx

@@ -11,7 +11,7 @@ import json from './button.properties.json'
 This is button.
 
 <Canvas>
-  <Story name="Button">
+  <Story name="Showcase">
     {() => `
       <div class="stack">
         <button class="nes-btn">

src/elements/button/button.theme.css

@@ -3,7 +3,7 @@
  *
  * There are  variables that you can change.
  */
- :root .nes-btn {
+.nes-btn {
   /* Color theme */
   --nes-btn-color: var(--nes-color-dark);
   --nes-btn-bg-color: var(--nes-color-default);
@@ -14,55 +14,56 @@
   --nes-btn-border-width: 4px;
   --nes-btn-border-width-inner: 4px;
 }
-:root .nes-btn:hover {
+.nes-btn:hover {
-  --nes-btn-border-width-inner: 6px;
+  /* Variation */
   --nes-btn-bg-color: var(--nes-color-default-tint);
+  --nes-btn-border-width-inner: 6px;
 }
 
 /**
  * Primary theme
  */
-:root .nes-btn.isPrimary {
+.nes-btn.isPrimary {
   --nes-btn-color: var(--nes-color-light);
   --nes-btn-bg-color: var(--nes-color-primary);
   --nes-btn-border-color-inner: var(--nes-color-primary-shade);
 }
-:root .nes-btn.isPrimary:hover {
+.nes-btn.isPrimary:hover {
   --nes-btn-bg-color: var(--nes-color-primary-tint);
 }
 
 /**
  * Secondary theme
  */
-:root .nes-btn.isSecondary {
+.nes-btn.isSecondary {
   --nes-btn-color: var(--nes-color-light);
   --nes-btn-bg-color: var(--nes-color-secondary);
   --nes-btn-border-color-inner: var(--nes-color-secondary-shade);
 }
-:root .nes-btn.isSecondary:hover {
+.nes-btn.isSecondary:hover {
   --nes-btn-bg-color: var(--nes-color-secondary-tint);
 }
 
 /**
  * Warning theme
  */
-:root .nes-btn.isWarning {
+.nes-btn.isWarning {
   --nes-btn-color: var(--nes-color-dark);
   --nes-btn-bg-color: var(--nes-color-warning);
   --nes-btn-border-color-inner: var(--nes-color-warning-shade);
 }
-:root .nes-btn.isWarning:hover {
+.nes-btn.isWarning:hover {
   --nes-btn-bg-color: var(--nes-color-warning-tint);
 }
 
 /**
  * Danger theme
  */
-:root .nes-btn.isDanger {
+.nes-btn.isDanger {
   --nes-btn-color: var(--nes-color-light);
   --nes-btn-bg-color: var(--nes-color-danger);
   --nes-btn-border-color-inner: var(--nes-color-danger-shade);
 }
-:root .nes-btn.isDanger:hover {
+.nes-btn.isDanger:hover {
   --nes-btn-bg-color: var(--nes-color-danger-tint);
 }