From fd303776a11842a206deeff796e75bda87b7f001 Mon Sep 17 00:00:00 2001 From: BcRikko Date: Sun, 2 Apr 2023 11:39:57 +0900 Subject: [PATCH] create template --- .gitignore | 8 +-- .vscode/settings.json | 22 +++++++++ src/_template/index.css | 3 ++ src/_template/template.css | 13 +++++ src/_template/template.properties.css | 11 +++++ src/_template/template.stories.mdx | 25 ++++++++++ src/_template/template.theme.css | 68 ++++++++++++++++++++++++++ src/core/foundation.css | 3 +- src/elements/button/button.css | 1 + src/elements/button/button.stories.mdx | 2 +- src/elements/button/button.theme.css | 23 ++++----- 11 files changed, 159 insertions(+), 20 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/_template/index.css create mode 100644 src/_template/template.css create mode 100644 src/_template/template.properties.css create mode 100644 src/_template/template.stories.mdx create mode 100644 src/_template/template.theme.css diff --git a/.gitignore b/.gitignore index 978fe6b..ad0dc53 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,4 @@ node_modules -.vscode -.idea -css -storybook-static .DS_Store -# Ignoring built up css and map files -scss/*.css -scss/*.css.map +*.properties.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..d5a96b0 --- /dev/null +++ b/.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, + } +} diff --git a/src/_template/index.css b/src/_template/index.css new file mode 100644 index 0000000..8ad5cb5 --- /dev/null +++ b/src/_template/index.css @@ -0,0 +1,3 @@ +@import './template.properties.css'; +@import './template.theme.css'; +@import './template.css'; diff --git a/src/_template/template.css b/src/_template/template.css new file mode 100644 index 0000000..1c46a4f --- /dev/null +++ b/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); +} diff --git a/src/_template/template.properties.css b/src/_template/template.properties.css new file mode 100644 index 0000000..627d53e --- /dev/null +++ b/src/_template/template.properties.css @@ -0,0 +1,11 @@ +@property --nes-btn-color { + syntax: ''; + inherits: true; + initial-value: var(--nes-color-dark); + +} +@property --nes-btn-bg-color { + syntax: ''; + inherits: true; + initial-value: var(--nes-color-default); +} diff --git a/src/_template/template.stories.mdx b/src/_template/template.stories.mdx new file mode 100644 index 0000000..38e3c0e --- /dev/null +++ b/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' + + + +# Category/Template + +This is template. + + + + {() => ` +
+
+
+ `} + + + +## CSS Variables + + diff --git a/src/_template/template.theme.css b/src/_template/template.theme.css new file mode 100644 index 0000000..b3b7b52 --- /dev/null +++ b/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); +} diff --git a/src/core/foundation.css b/src/core/foundation.css index 9cde83f..331ce1e 100644 --- a/src/core/foundation.css +++ b/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; } diff --git a/src/elements/button/button.css b/src/elements/button/button.css index 42071b7..0165e05 100644 --- a/src/elements/button/button.css +++ b/src/elements/button/button.css @@ -23,6 +23,7 @@ color: var(--nes-btn-color); background-color: transparent; border: none; + border-radius: 0; } /** diff --git a/src/elements/button/button.stories.mdx b/src/elements/button/button.stories.mdx index 85e0aa9..8f61110 100644 --- a/src/elements/button/button.stories.mdx +++ b/src/elements/button/button.stories.mdx @@ -11,7 +11,7 @@ import json from './button.properties.json' This is button. - + {() => `