pentatrion-design 0.0.1

package/.storybook/theme.ts

@@ -0,0 +1,14 @@
+import { create } from "@storybook/theming/create";
+
+// complete options
+// https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart
+export default create({
+  base: "light",
+  colorPrimary: "#dba726",
+  colorSecondary: "#dba726",
+
+  appBorderRadius: 6,
+  brandTitle: "Pentatrion Design",
+  brandImage: "/favicon.svg",
+  brandUrl: "/",
+});

package/Makefile

@@ -0,0 +1,14 @@
+local_path	:= $(PWD)
+remote_host	:= storybook.lonlat.pentatrion.com
+
+.PHONY: help
+help:
+	@grep -E '(^[a-zA-Z_-]+:.*?## .*$$)|(^##)' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[32m%-22s\033[0m %s\n", $$1, $$2}' | sed -e 's/\[32m##/[33m/'
+
+.PHONY: deploy
+deploy: ## Build and deploy examples
+	pnpm build
+	rsync -av --delete \
+		$(local_path)/storybook-static/ \
+		berlin:prod/$(remote_host)
+	@echo "go : https://$(remote_host)"

package/README.md

@@ -0,0 +1,40 @@
+# Pentatrion Design System
+
+## Installation
+
+La dépendance `pentatrion-fonts` est optionnelle.
+
+```bash
+pnpm add pentatrion-design pentatrion-fonts
+```
+
+```js
+// tailwind.config.js
+import pentatrionTw from "pentatrion-design";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./node_modules/pentatrion-design/dist/*.js",
+  ],
+  darkMode: ["class"],
+  plugins: [pentatrionTw],
+};
+```
+```css
+/* index.css */
+@import "tailwindcss/base";
+@import "pentatrion-design/src/tailwind/base.css" layer(base);
+
+@import "tailwindcss/components";
+@import "pentatrion-design/src/tailwind/components.css" layer(components);
+@import "pentatrion-design/src/tailwind/components-input-outline.css" layer(components);
+@import "pentatrion-design/src/tailwind/components-resize-area.css" layer(components);
+@import "pentatrion-design/src/tailwind/components-step.css" layer(components);
+
+@import "tailwindcss/utilities";
+@import "pentatrion-design/src/tailwind/utilities.css" layer(utilities);
+@import "pentatrion-design/src/tailwind/utilities-dialog.css" layer(utilities);
+
+@import "pentatrion-fonts/fontello-lonlat";
+```

package/TODO.md

@@ -0,0 +1,5 @@
+```css
+body {
+  background-image: radial-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 40%), radial-gradient(rgb(255, 209, 82) 30%, rgb(226, 105, 150), rgba(226, 105, 150, 0.4) 41%, rgba(0, 0, 0, 0) 52%), radial-gradient(rgb(160, 51, 255) 37%, rgba(0, 0, 0, 0) 46%), linear-gradient(155deg, rgba(0, 0, 0, 0) 65%, rgb(37, 212, 102) 95%), linear-gradient(45deg, rgb(0, 101, 224), rgb(15, 139, 255))
+}
+```