@makolabs/ripple 0.0.1-dev.3 → 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 (3) hide show
  1. package/README.md +4 -98
  2. package/dist/layout/Card.svelte +22 -22
  3. package/package.json +72 -102
package/README.md CHANGED
@@ -5,8 +5,7 @@ This is a simplistic UI library by makolabs.
5
5
  ## Getting started
6
6
 
7
7
  Install the project
8
-
9
- ```shell
8
+ ```bash
10
9
  npm i @makolabs/ripple
11
10
  ```
12
11
 
@@ -20,8 +19,8 @@ Import ripple UI
20
19
  </script>
21
20
 
22
21
  <div class="px-12 pt-12">
23
- <Card title="Hello World" color="warning">
24
- <p>This is a card component</p>
22
+ <Card title="Hello World" color="warning">
23
+ <p>This is a card component</p>
25
24
  </Card>
26
25
  </div>
27
26
  ```
@@ -29,101 +28,8 @@ Import ripple UI
29
28
 
30
29
  Paste the following CSS import code in `app.css`
31
30
 
32
- ```css
31
+ ```
33
32
  @source "../node_modules/@makolabs/ripple";
34
-
35
- @theme {
36
- /* Default (Gray) */
37
- --color-default-50: oklch(0.984 0.003 247.858);
38
- --color-default-100: oklch(0.960 0.006 247.858);
39
- --color-default-200: oklch(0.910 0.008 247.858);
40
- --color-default-300: oklch(0.850 0.010 247.858);
41
- --color-default-400: oklch(0.760 0.012 247.858);
42
- --color-default-500: oklch(0.650 0.015 247.858);
43
- --color-default-600: oklch(0.540 0.018 247.858);
44
- --color-default-700: oklch(0.450 0.015 247.858);
45
- --color-default-800: oklch(0.350 0.012 247.858);
46
- --color-default-900: oklch(0.250 0.010 247.858);
47
- --color-default-950: oklch(0.150 0.008 247.858);
48
-
49
- /* Primary (Blue) */
50
- --color-primary-50: oklch(0.970 0.025 250.0);
51
- --color-primary-100: oklch(0.940 0.035 250.0);
52
- --color-primary-200: oklch(0.890 0.055 250.0);
53
- --color-primary-300: oklch(0.820 0.075 250.0);
54
- --color-primary-400: oklch(0.740 0.095 250.0);
55
- --color-primary-500: oklch(0.650 0.115 250.0);
56
- --color-primary-600: oklch(0.550 0.125 250.0);
57
- --color-primary-700: oklch(0.450 0.115 250.0);
58
- --color-primary-800: oklch(0.350 0.095 250.0);
59
- --color-primary-900: oklch(0.250 0.075 250.0);
60
- --color-primary-950: oklch(0.150 0.055 250.0);
61
-
62
- /* Secondary (Slate) */
63
- --color-secondary-50: oklch(0.970 0.020 255.0);
64
- --color-secondary-100: oklch(0.940 0.030 255.0);
65
- --color-secondary-200: oklch(0.890 0.040 255.0);
66
- --color-secondary-300: oklch(0.820 0.050 255.0);
67
- --color-secondary-400: oklch(0.740 0.060 255.0);
68
- --color-secondary-500: oklch(0.650 0.070 255.0);
69
- --color-secondary-600: oklch(0.550 0.065 255.0);
70
- --color-secondary-700: oklch(0.450 0.055 255.0);
71
- --color-secondary-800: oklch(0.350 0.045 255.0);
72
- --color-secondary-900: oklch(0.250 0.035 255.0);
73
- --color-secondary-950: oklch(0.150 0.025 255.0);
74
-
75
- /* Info (Sky) */
76
- --color-info-50: oklch(0.970 0.025 220.0);
77
- --color-info-100: oklch(0.940 0.040 220.0);
78
- --color-info-200: oklch(0.890 0.060 220.0);
79
- --color-info-300: oklch(0.820 0.085 220.0);
80
- --color-info-400: oklch(0.740 0.105 220.0);
81
- --color-info-500: oklch(0.650 0.125 220.0);
82
- --color-info-600: oklch(0.550 0.115 220.0);
83
- --color-info-700: oklch(0.450 0.105 220.0);
84
- --color-info-800: oklch(0.350 0.085 220.0);
85
- --color-info-900: oklch(0.250 0.065 220.0);
86
- --color-info-950: oklch(0.150 0.045 220.0);
87
-
88
- /* Success (Green) */
89
- --color-success-50: oklch(0.970 0.025 145.0);
90
- --color-success-100: oklch(0.940 0.040 145.0);
91
- --color-success-200: oklch(0.890 0.060 145.0);
92
- --color-success-300: oklch(0.820 0.080 145.0);
93
- --color-success-400: oklch(0.740 0.100 145.0);
94
- --color-success-500: oklch(0.650 0.120 145.0);
95
- --color-success-600: oklch(0.550 0.110 145.0);
96
- --color-success-700: oklch(0.450 0.100 145.0);
97
- --color-success-800: oklch(0.350 0.080 145.0);
98
- --color-success-900: oklch(0.250 0.060 145.0);
99
- --color-success-950: oklch(0.150 0.040 145.0);
100
-
101
- /* Warning (Yellow) */
102
- --color-warning-50: oklch(0.970 0.025 90.0);
103
- --color-warning-100: oklch(0.940 0.045 90.0);
104
- --color-warning-200: oklch(0.890 0.065 90.0);
105
- --color-warning-300: oklch(0.820 0.085 90.0);
106
- --color-warning-400: oklch(0.740 0.105 90.0);
107
- --color-warning-500: oklch(0.650 0.125 90.0);
108
- --color-warning-600: oklch(0.550 0.115 90.0);
109
- --color-warning-700: oklch(0.450 0.105 90.0);
110
- --color-warning-800: oklch(0.350 0.085 90.0);
111
- --color-warning-900: oklch(0.250 0.065 90.0);
112
- --color-warning-950: oklch(0.150 0.045 90.0);
113
-
114
- /* Danger (Red) */
115
- --color-danger-50: oklch(0.970 0.025 25.0);
116
- --color-danger-100: oklch(0.940 0.045 25.0);
117
- --color-danger-200: oklch(0.890 0.065 25.0);
118
- --color-danger-300: oklch(0.820 0.085 25.0);
119
- --color-danger-400: oklch(0.740 0.105 25.0);
120
- --color-danger-500: oklch(0.650 0.125 25.0);
121
- --color-danger-600: oklch(0.550 0.115 25.0);
122
- --color-danger-700: oklch(0.450 0.105 25.0);
123
- --color-danger-800: oklch(0.350 0.085 25.0);
124
- --color-danger-900: oklch(0.250 0.065 25.0);
125
- --color-danger-950: oklch(0.150 0.045 25.0);
126
- }
127
33
  ```
128
34
 
129
35
  > More coming soon!
package/dist/layout/Card.svelte CHANGED
@@ -14,17 +14,17 @@
14
14
  '2xl': 'p-8'
15
15
  },
16
16
  color: {
17
- 'default': 'bg-default-50',
18
- 'primary': 'bg-primary-50',
19
- 'secondary': 'bg-secondary-50',
20
- 'info': 'bg-info-50',
21
- 'success': 'bg-success-50',
22
- 'warning': 'bg-warning-50',
23
- 'danger': 'bg-danger-50'
17
+ 'default': 'bg-default-50 dark:bg-default-800',
18
+ 'primary': 'bg-primary-50 dark:bg-primary-900/20',
19
+ 'secondary': 'bg-secondary-50 dark:bg-secondary-800/20',
20
+ 'info': 'bg-info-50 dark:bg-info-900/20',
21
+ 'success': 'bg-success-50 dark:bg-success-900/20',
22
+ 'warning': 'bg-warning-50 dark:bg-warning-900/20',
23
+ 'danger': 'bg-danger-50 dark:bg-danger-900/20'
24
24
  },
25
25
  border: {
26
26
  'none': 'border-0',
27
- 'default': 'border border-gray-200',
27
+ 'default': 'border border-gray-200 dark:border-gray-700',
28
28
  'colored': 'border'
29
29
  },
30
30
  rounded: {
@@ -62,13 +62,13 @@
62
62
  const cardTitleVariants = tv({
63
63
  variants: {
64
64
  color: {
65
- 'default': 'text-default-900',
66
- 'primary': 'text-primary-900',
67
- 'secondary': 'text-secondary-900',
68
- 'info': 'text-info-900',
69
- 'success': 'text-success-900',
70
- 'warning': 'text-warning-900',
71
- 'danger': 'text-danger-900'
65
+ 'default': 'text-default-900 dark:text-default-100',
66
+ 'primary': 'text-primary-900 dark:text-primary-100',
67
+ 'secondary': 'text-secondary-900 dark:text-secondary-100',
68
+ 'info': 'text-info-900 dark:text-info-100',
69
+ 'success': 'text-success-900 dark:text-success-100',
70
+ 'warning': 'text-warning-900 dark:text-warning-100',
71
+ 'danger': 'text-danger-900 dark:text-danger-100'
72
72
  },
73
73
  weight: {
74
74
  'normal': 'font-normal',
@@ -88,13 +88,13 @@
88
88
  const cardBodyVariants = tv({
89
89
  variants: {
90
90
  color: {
91
- 'default': 'text-default-700',
92
- 'primary': 'text-primary-700',
93
- 'secondary': 'text-secondary-700',
94
- 'info': 'text-info-700',
95
- 'success': 'text-success-700',
96
- 'warning': 'text-warning-700',
97
- 'danger': 'text-danger-700'
91
+ 'default': 'text-default-700 dark:text-default-300',
92
+ 'primary': 'text-primary-700 dark:text-primary-300',
93
+ 'secondary': 'text-secondary-700 dark:text-secondary-300',
94
+ 'info': 'text-info-700 dark:text-info-300',
95
+ 'success': 'text-success-700 dark:text-success-300',
96
+ 'warning': 'text-warning-700 dark:text-warning-300',
97
+ 'danger': 'text-danger-700 dark:text-danger-300'
98
98
  },
99
99
  size: SIZE_TEXT_VARIANTS
100
100
  },
package/package.json CHANGED
@@ -1,104 +1,74 @@
1
1
  {
2
- "name": "@makolabs/ripple",
3
- "version": "0.0.1-dev.3",
4
- "description": "Simple Svelte 5 powered component library ✨",
5
- "repository": {
6
- "type": "git",
7
- "url": "https://github.com/makolabsai/mako-ui-components.git"
8
- },
9
- "scripts": {
10
- "dev": "vite dev",
11
- "build": "vite build && npm run prepack",
12
- "preview": "vite preview",
13
- "prepare": "svelte-kit sync || echo ''",
14
- "prepack": "svelte-kit sync && svelte-package && publint",
15
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
16
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
17
- "format": "prettier --write .",
18
- "lint": "prettier --check . && eslint .",
19
- "test:unit": "vitest",
20
- "test": "npm run test:unit -- --run && npm run test:e2e",
21
- "test:e2e": "playwright test"
22
- },
23
- "files": [
24
- "dist",
25
- "!dist/**/*.test.*",
26
- "!dist/**/*.spec.*"
27
- ],
28
- "sideEffects": [
29
- "**/*.css"
30
- ],
31
- "svelte": "./dist/index.js",
32
- "types": "./dist/index.d.ts",
33
- "type": "module",
34
- "exports": {
35
- ".": {
36
- "types": "./dist/index.d.ts",
37
- "svelte": "./dist/index.js"
38
- },
39
- "./layout": {
40
- "types": "./dist/layout/index.d.ts",
41
- "svelte": "./dist/layout/index.js"
42
- }
43
- },
44
- "peerDependencies": {
45
- "svelte": "^5.0.0"
46
- },
47
- "devDependencies": {
48
- "@eslint/compat": "^1.2.5",
49
- "@eslint/js": "^9.18.0",
50
- "@playwright/test": "^1.49.1",
51
- "@sveltejs/adapter-cloudflare": "^5.0.1",
52
- "@sveltejs/kit": "^2.16.0",
53
- "@sveltejs/package": "^2.0.0",
54
- "@sveltejs/vite-plugin-svelte": "^5.0.0",
55
- "@tailwindcss/vite": "^4.0.0",
56
- "@testing-library/jest-dom": "^6.6.3",
57
- "@testing-library/svelte": "^5.2.4",
58
- "eslint": "^9.18.0",
59
- "eslint-config-prettier": "^10.0.1",
60
- "eslint-plugin-svelte": "^3.0.0",
61
- "globals": "^16.0.0",
62
- "jsdom": "^26.0.0",
63
- "prettier": "^3.4.2",
64
- "prettier-plugin-svelte": "^3.3.3",
65
- "prettier-plugin-tailwindcss": "^0.6.11",
66
- "publint": "^0.3.2",
67
- "svelte": "^5.0.0",
68
- "svelte-check": "^4.0.0",
69
- "tailwindcss": "^4.0.0",
70
- "typescript": "^5.0.0",
71
- "typescript-eslint": "^8.20.0",
72
- "vite": "^6.0.0",
73
- "vitest": "^3.0.0"
74
- },
75
- "keywords": [
76
- "svelte",
77
- "ui",
78
- "svelte5",
79
- "modal",
80
- "navigation",
81
- "ripple",
82
- "button",
83
- "sidebar",
84
- "card",
85
- "dropdown",
86
- "tooltip",
87
- "accordion",
88
- "tabs",
89
- "alert",
90
- "badge",
91
- "breadcrumb",
92
- "carousel",
93
- "collapse",
94
- "list-group",
95
- "pagination",
96
- "progress",
97
- "spinner",
98
- "toast"
99
- ],
100
- "dependencies": {
101
- "tailwind-merge": "^3.0.2",
102
- "tailwind-variants": "^1.0.0"
103
- }
2
+ "name": "@makolabs/ripple",
3
+ "version": "0.0.1",
4
+ "scripts": {
5
+ "dev": "vite dev",
6
+ "build": "vite build && npm run prepack",
7
+ "preview": "vite preview",
8
+ "prepare": "svelte-kit sync || echo ''",
9
+ "prepack": "svelte-kit sync && svelte-package && publint",
10
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
11
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
12
+ "format": "prettier --write .",
13
+ "lint": "prettier --check . && eslint .",
14
+ "test:unit": "vitest",
15
+ "test": "npm run test:unit -- --run && npm run test:e2e",
16
+ "test:e2e": "playwright test"
17
+ },
18
+ "files": [
19
+ "dist",
20
+ "!dist/**/*.test.*",
21
+ "!dist/**/*.spec.*"
22
+ ],
23
+ "sideEffects": [
24
+ "**/*.css"
25
+ ],
26
+ "svelte": "./dist/index.js",
27
+ "types": "./dist/index.d.ts",
28
+ "type": "module",
29
+ "exports": {
30
+ ".": {
31
+ "types": "./dist/index.d.ts",
32
+ "svelte": "./dist/index.js"
33
+ }
34
+ },
35
+ "peerDependencies": {
36
+ "svelte": "^5.0.0"
37
+ },
38
+ "devDependencies": {
39
+ "@eslint/compat": "^1.2.5",
40
+ "@eslint/js": "^9.18.0",
41
+ "@playwright/test": "^1.49.1",
42
+ "@sveltejs/adapter-cloudflare": "^5.0.1",
43
+ "@sveltejs/kit": "^2.16.0",
44
+ "@sveltejs/package": "^2.0.0",
45
+ "@sveltejs/vite-plugin-svelte": "^5.0.0",
46
+ "@tailwindcss/vite": "^4.0.0",
47
+ "@testing-library/jest-dom": "^6.6.3",
48
+ "@testing-library/svelte": "^5.2.4",
49
+ "eslint": "^9.18.0",
50
+ "eslint-config-prettier": "^10.0.1",
51
+ "eslint-plugin-svelte": "^3.0.0",
52
+ "globals": "^16.0.0",
53
+ "jsdom": "^26.0.0",
54
+ "prettier": "^3.4.2",
55
+ "prettier-plugin-svelte": "^3.3.3",
56
+ "prettier-plugin-tailwindcss": "^0.6.11",
57
+ "publint": "^0.3.2",
58
+ "svelte": "^5.0.0",
59
+ "svelte-check": "^4.0.0",
60
+ "tailwindcss": "^4.0.0",
61
+ "typescript": "^5.0.0",
62
+ "typescript-eslint": "^8.20.0",
63
+ "vite": "^6.0.0",
64
+ "vitest": "^3.0.0"
65
+ },
66
+ "keywords": [
67
+ "svelte"
68
+ ],
69
+ "dependencies": {
70
+ "mako-ui-components": "github:makolabsai/mako-ui-components",
71
+ "tailwind-merge": "^3.0.2",
72
+ "tailwind-variants": "^1.0.0"
73
+ }
104
74
  }