ecmc-design-core 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/README.md +55 -0
  2. package/dist/atoms/button/Button.svelte +61 -0
  3. package/dist/atoms/button/Button.svelte.d.ts +4 -0
  4. package/dist/atoms/button/constants.d.ts +7 -0
  5. package/dist/atoms/button/constants.js +8 -0
  6. package/dist/atoms/button/types.d.ts +35 -0
  7. package/dist/atoms/container/Container.svelte +106 -0
  8. package/dist/atoms/container/Container.svelte.d.ts +4 -0
  9. package/dist/atoms/container/constants.d.ts +16 -0
  10. package/dist/atoms/container/constants.js +19 -0
  11. package/dist/atoms/container/sub/box.container.svelte +33 -0
  12. package/dist/atoms/container/sub/box.container.svelte.d.ts +4 -0
  13. package/dist/atoms/container/sub/centered.container.svelte +28 -0
  14. package/dist/atoms/container/sub/centered.container.svelte.d.ts +4 -0
  15. package/dist/atoms/container/sub/gridbox.container.svelte +32 -0
  16. package/dist/atoms/container/sub/gridbox.container.svelte.d.ts +4 -0
  17. package/dist/atoms/container/sub/hbox.container.svelte +10 -0
  18. package/dist/atoms/container/sub/hbox.container.svelte.d.ts +4 -0
  19. package/dist/atoms/container/sub/vbox.container.svelte +10 -0
  20. package/dist/atoms/container/sub/vbox.container.svelte.d.ts +4 -0
  21. package/dist/atoms/container/types.d.ts +252 -0
  22. package/dist/atoms/input/Input.svelte +75 -0
  23. package/dist/atoms/input/Input.svelte.d.ts +4 -0
  24. package/dist/atoms/input/constants.d.ts +2 -0
  25. package/dist/atoms/input/constants.js +6 -0
  26. package/dist/atoms/input/types.d.ts +92 -0
  27. package/dist/atoms/text/Text.svelte +68 -0
  28. package/dist/atoms/text/Text.svelte.d.ts +4 -0
  29. package/dist/atoms/text/constants.d.ts +23 -0
  30. package/dist/atoms/text/constants.js +27 -0
  31. package/dist/atoms/text/types.d.ts +62 -0
  32. package/dist/index.d.ts +12 -0
  33. package/dist/index.js +11 -0
  34. package/dist/utils/cn.d.ts +6 -0
  35. package/dist/utils/cn.js +8 -0
  36. package/dist/utils/ecmc.css +126 -0
  37. package/package.json +91 -0
package/dist/utils/ecmc.css ADDED
@@ -0,0 +1,126 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
2
+
3
+ *,
4
+ *::before,
5
+ *::after {
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ font: inherit;
13
+ }
14
+
15
+ body {
16
+ min-height: 100vh;
17
+ background-color: light-dark(var(--neutral-100), var(--neutral-900));
18
+ }
19
+
20
+ html {
21
+ color-scheme: dark light;
22
+ }
23
+
24
+ img,
25
+ picture,
26
+ svg,
27
+ video {
28
+ display: block;
29
+ max-width: 100%;
30
+ }
31
+
32
+ /* ---- ATOMS ---- */
33
+
34
+ /* Font Atoms */
35
+ :root {
36
+ font-family: 'Roboto Mono', monospace;
37
+ font-optical-sizing: auto;
38
+ font-weight: 300;
39
+ font-style: normal;
40
+ font-size: 16px;
41
+ color: light-dark(var(--neutral-900), var(--neutral-100));
42
+
43
+ --font-size-0: 0.7rem;
44
+ --font-size-1: 1rem;
45
+ --font-size-2: 1.2rem;
46
+ --font-size-3: 2.5rem;
47
+ --font-size-4: 3rem;
48
+ }
49
+
50
+ /* Colour Atoms */
51
+ :root {
52
+ --neutral-50: #f5f7fa;
53
+ --neutral-100: #dfe2e6;
54
+ --neutral-200: #c0c5ce;
55
+ --neutral-300: #a7adba;
56
+ --neutral-400: #65737e;
57
+ --neutral-500: #4f5b66;
58
+ --neutral-600: #343d46;
59
+ --neutral-700: #23292f;
60
+ --neutral-800: #1a1e23;
61
+ --neutral-900: #111417;
62
+
63
+ --primary-900: #660708;
64
+ --primary-700: #a4161a;
65
+ --primary-600: #ba181b;
66
+ --primary-500: #e5383b;
67
+ }
68
+
69
+ /* Spacing Atoms */
70
+ :root {
71
+ --spacing-none: 0rem;
72
+ --spacing-xsm: 0.5rem;
73
+ --spacing-sm: 1rem;
74
+ --spacing-md: 1.5rem;
75
+ --spacing-lg: 2rem;
76
+ --spacing-xl: 3rem;
77
+ }
78
+
79
+ /* Rounding Atoms */
80
+ :root {
81
+ --rounding-size-1: 5px;
82
+ --rounding-size-2: 15px;
83
+ }
84
+
85
+ /* responsive breakpoints (mobile-first) */
86
+ @media (min-width: 480px) {
87
+ :root {
88
+ --font-size-2: 1.1rem;
89
+ --spacing-md: 1.25rem;
90
+ }
91
+ }
92
+
93
+ @media (min-width: 640px) {
94
+ :root {
95
+ --font-size-3: 2.3rem;
96
+ --spacing-lg: 2.25rem;
97
+ }
98
+ }
99
+
100
+ @media (min-width: 768px) {
101
+ :root {
102
+ --font-size-2: 1.2rem;
103
+ --font-size-3: 2.5rem;
104
+ --spacing-xl: 3.25rem;
105
+ }
106
+ }
107
+
108
+ @media (min-width: 1024px) {
109
+ :root {
110
+ --font-size-4: 3.25rem;
111
+ }
112
+ }
113
+
114
+ @media (min-width: 1280px) {
115
+ :root {
116
+ --font-size-3: 2.7rem;
117
+ --font-size-4: 3.5rem;
118
+ }
119
+ }
120
+
121
+ @media (min-width: 1536px) {
122
+ :root {
123
+ --font-size-3: 2.9rem;
124
+ --font-size-4: 3.75rem;
125
+ }
126
+ }
package/package.json ADDED
@@ -0,0 +1,91 @@
1
+ {
2
+ "name": "ecmc-design-core",
3
+ "description": "Atoms and molecules for ecmc design system",
4
+ "license": "MIT",
5
+ "version": "0.0.1",
6
+ "author": {
7
+ "name": "Arad Fadaei",
8
+ "url": "https://www.fadaei.dev"
9
+ },
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "git+https://github.com/Downmoto/ecmc-design-core.git"
13
+ },
14
+ "scripts": {
15
+ "dev": "vite dev",
16
+ "build": "vite build && bun run prepack",
17
+ "preview": "vite preview",
18
+ "prepare": "husky",
19
+ "prepack": "svelte-kit sync && svelte-package && publint",
20
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
21
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
22
+ "format": "prettier --write .",
23
+ "lint": "prettier --check . && eslint .",
24
+ "storybook": "storybook dev -p 6006",
25
+ "build-storybook": "storybook build",
26
+ "test": "vitest --project=storybook"
27
+ },
28
+ "files": [
29
+ "dist",
30
+ "!dist/**/*.test.*",
31
+ "!dist/**/*.spec.*"
32
+ ],
33
+ "sideEffects": [
34
+ "**/*.css"
35
+ ],
36
+ "svelte": "./dist/index.js",
37
+ "types": "./dist/index.d.ts",
38
+ "type": "module",
39
+ "exports": {
40
+ ".": {
41
+ "types": "./dist/index.d.ts",
42
+ "svelte": "./dist/index.js"
43
+ }
44
+ },
45
+ "peerDependencies": {
46
+ "svelte": "^5.0.0"
47
+ },
48
+ "devDependencies": {
49
+ "@eslint/compat": "^1.4.0",
50
+ "@eslint/js": "^9.39.1",
51
+ "@sveltejs/adapter-auto": "^7.0.0",
52
+ "@sveltejs/kit": "^2.49.1",
53
+ "@sveltejs/package": "^2.5.7",
54
+ "@sveltejs/vite-plugin-svelte": "^6.2.1",
55
+ "@types/node": "^24",
56
+ "eslint": "^9.39.1",
57
+ "eslint-config-prettier": "^10.1.8",
58
+ "eslint-plugin-svelte": "^3.13.1",
59
+ "globals": "^16.5.0",
60
+ "husky": "^9.1.7",
61
+ "lint-staged": "^16.2.7",
62
+ "prettier": "^3.7.4",
63
+ "prettier-plugin-svelte": "^3.4.0",
64
+ "publint": "^0.3.15",
65
+ "svelte": "^5.45.6",
66
+ "svelte-adapter-bun": "^1.0.1",
67
+ "svelte-check": "^4.3.4",
68
+ "typescript": "^5.9.3",
69
+ "typescript-eslint": "^8.48.1",
70
+ "vite": "^7.2.6",
71
+ "storybook": "^10.1.10",
72
+ "@storybook/sveltekit": "^10.1.10",
73
+ "@storybook/addon-svelte-csf": "^5.0.10",
74
+ "@chromatic-com/storybook": "^4.1.3",
75
+ "@storybook/addon-vitest": "^10.1.10",
76
+ "@storybook/addon-a11y": "^10.1.10",
77
+ "@storybook/addon-docs": "^10.1.10",
78
+ "eslint-plugin-storybook": "^10.1.10",
79
+ "vitest": "^4.0.16",
80
+ "playwright": "^1.57.0",
81
+ "@vitest/browser-playwright": "^4.0.16",
82
+ "@vitest/coverage-v8": "^4.0.16"
83
+ },
84
+ "keywords": [
85
+ "svelte"
86
+ ],
87
+ "lint-staged": {
88
+ "*": "prettier --write --ignore-unknown",
89
+ "*.{js,ts,svelte}": "eslint --fix"
90
+ }
91
+ }