@nubitio/ui 0.1.0
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.
- package/LICENSE +21 -0
- package/README.md +75 -0
- package/dist/index.cjs +2396 -0
- package/dist/index.d.cts +780 -0
- package/dist/index.d.mts +780 -0
- package/dist/index.mjs +2332 -0
- package/dist/style.css +2614 -0
- package/dist/themes/nb-theme-dark.css +79 -0
- package/dist/themes/nb-theme-light.css +78 -0
- package/package.json +56 -0
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/* stylelint-disable */
|
|
2
|
+
:root,
|
|
3
|
+
[data-theme=dark] {
|
|
4
|
+
--base-bg: #1f1f1f;
|
|
5
|
+
--base-bg-darken-4: #171717;
|
|
6
|
+
--base-bg-darken-5: #0f0f0f;
|
|
7
|
+
--base-text-color: #f5f5f5;
|
|
8
|
+
--base-text-color-alpha: rgba(245, 245, 245, 0.65);
|
|
9
|
+
--background-gray-color: rgba(245, 245, 245, 0.04);
|
|
10
|
+
--typography-bg: var(--base-bg);
|
|
11
|
+
--accent-color: #60a5fa;
|
|
12
|
+
--accent-hover: #7ab8fc;
|
|
13
|
+
--accent-pressed: #4b8ef3;
|
|
14
|
+
--accent-subtle: color-mix(in srgb, var(--accent-color) 18%, var(--surface-0));
|
|
15
|
+
--success-color: #4cc84c;
|
|
16
|
+
--info-color: var(--accent-color);
|
|
17
|
+
--warning-color: #e07530;
|
|
18
|
+
--dark-warning-color: #c5622a;
|
|
19
|
+
--error-color: #ef5a5a;
|
|
20
|
+
--on-accent-color: #05112a;
|
|
21
|
+
--on-success-color: #031403;
|
|
22
|
+
--on-error-color: #1f0707;
|
|
23
|
+
--border-color: #404040;
|
|
24
|
+
--border-subtle: #2e2e2e;
|
|
25
|
+
--base-border-color: var(--border-color);
|
|
26
|
+
--text-primary: var(--base-text-color);
|
|
27
|
+
--text-secondary: #c7c7c7;
|
|
28
|
+
--text-tertiary: #969696;
|
|
29
|
+
--text-disabled: #4d4d4d;
|
|
30
|
+
--text-on-accent: var(--on-accent-color);
|
|
31
|
+
--texteditor-edit-color: var(--text-primary);
|
|
32
|
+
--texteditor-label-color: var(--text-secondary);
|
|
33
|
+
--subtitle-text-color: var(--text-secondary);
|
|
34
|
+
--surface-0: #0f0f0f;
|
|
35
|
+
--surface-1: #1f1f1f;
|
|
36
|
+
--surface-2: #2b2b2b;
|
|
37
|
+
--surface-3: color-mix(in srgb, var(--accent-color) 16%, #0f0f0f);
|
|
38
|
+
--surface-canvas: var(--surface-0);
|
|
39
|
+
--surface-card: var(--surface-1);
|
|
40
|
+
--surface-elevated: #333333;
|
|
41
|
+
--surface-subtle: var(--surface-2);
|
|
42
|
+
--surface-selected: var(--surface-3);
|
|
43
|
+
--card-background: var(--surface-1);
|
|
44
|
+
--side-panel-background: #1a1a1a;
|
|
45
|
+
--control-bg: var(--surface-1);
|
|
46
|
+
--control-bg-hover: #2b2b2b;
|
|
47
|
+
--control-border: var(--border-color);
|
|
48
|
+
--grid-header-bg: #1a1a1a;
|
|
49
|
+
--grid-filter-bg: #1f1f1f;
|
|
50
|
+
--grid-row-hover-bg: #2e2e2e;
|
|
51
|
+
--grid-row-selected-bg: color-mix(in srgb, var(--accent-color) 14%, #0f0f0f);
|
|
52
|
+
--grid-row-selected-border: color-mix(in srgb, var(--accent-color) 60%, #0f0f0f);
|
|
53
|
+
--grid-row-alt-bg: color-mix(in srgb, var(--surface-0) 40%, var(--surface-1));
|
|
54
|
+
--status-success-bg: rgba(76, 200, 76, 0.14);
|
|
55
|
+
--status-success-text: #7ddc7d;
|
|
56
|
+
--status-success-border: rgba(76, 200, 76, 0.32);
|
|
57
|
+
--status-warning-bg: rgba(224, 117, 48, 0.14);
|
|
58
|
+
--status-warning-text: #f0a070;
|
|
59
|
+
--status-warning-border: rgba(224, 117, 48, 0.32);
|
|
60
|
+
--status-danger-bg: rgba(239, 90, 90, 0.14);
|
|
61
|
+
--status-danger-text: #f79898;
|
|
62
|
+
--status-danger-border: rgba(239, 90, 90, 0.34);
|
|
63
|
+
--status-info-bg: rgba(96, 165, 250, 0.14);
|
|
64
|
+
--status-info-text: #93c5fd;
|
|
65
|
+
--status-info-border: rgba(96, 165, 250, 0.32);
|
|
66
|
+
--shadow-sm: 0 1px 3px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.05);
|
|
67
|
+
--shadow-md: 0 4px 10px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
|
|
68
|
+
--shadow-lg: 0 12px 28px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35),
|
|
69
|
+
0 0 0 1px rgba(255,255,255,.07);
|
|
70
|
+
--focus-ring-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
|
|
71
|
+
--overlay-bg: rgb(0 0 0 / 58%);
|
|
72
|
+
--overlay-bg-subtle: rgb(0 0 0 / 30%);
|
|
73
|
+
--tooltip-danger-button-color: rgba(239, 90, 90, 0.12);
|
|
74
|
+
--tooltip-success-button-color: rgba(76, 200, 76, 0.12);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
[data-theme=dark] {
|
|
78
|
+
content: "";
|
|
79
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/* stylelint-disable */
|
|
2
|
+
:root,
|
|
3
|
+
[data-theme=light] {
|
|
4
|
+
--base-bg: #ffffff;
|
|
5
|
+
--base-bg-darken-4: #f5f5f5;
|
|
6
|
+
--base-bg-darken-5: #ebebeb;
|
|
7
|
+
--base-text-color: #242424;
|
|
8
|
+
--base-text-color-alpha: rgba(36, 36, 36, 0.65);
|
|
9
|
+
--background-gray-color: rgba(36, 36, 36, 0.04);
|
|
10
|
+
--typography-bg: var(--base-bg);
|
|
11
|
+
--accent-color: #2463eb;
|
|
12
|
+
--accent-hover: #1d52d4;
|
|
13
|
+
--accent-pressed: #1641b8;
|
|
14
|
+
--accent-subtle: color-mix(in srgb, var(--accent-color) 10%, #fff);
|
|
15
|
+
--success-color: #0e7a0b;
|
|
16
|
+
--info-color: var(--accent-color);
|
|
17
|
+
--warning-color: #bc4b09;
|
|
18
|
+
--dark-warning-color: #9a3d07;
|
|
19
|
+
--error-color: #c50f1f;
|
|
20
|
+
--on-accent-color: #ffffff;
|
|
21
|
+
--on-success-color: #ffffff;
|
|
22
|
+
--on-error-color: #ffffff;
|
|
23
|
+
--border-color: #d1d1d1;
|
|
24
|
+
--border-subtle: #e0e0e0;
|
|
25
|
+
--base-border-color: var(--border-color);
|
|
26
|
+
--text-primary: var(--base-text-color);
|
|
27
|
+
--text-secondary: #616161;
|
|
28
|
+
--text-tertiary: #8a8a8a;
|
|
29
|
+
--text-disabled: #bdbdbd;
|
|
30
|
+
--text-on-accent: var(--on-accent-color);
|
|
31
|
+
--texteditor-edit-color: var(--text-primary);
|
|
32
|
+
--texteditor-label-color: var(--text-secondary);
|
|
33
|
+
--subtitle-text-color: var(--text-secondary);
|
|
34
|
+
--surface-0: #f5f5f5;
|
|
35
|
+
--surface-1: #ffffff;
|
|
36
|
+
--surface-2: #f0f0f0;
|
|
37
|
+
--surface-3: color-mix(in srgb, var(--accent-color) 9%, #ffffff);
|
|
38
|
+
--surface-canvas: var(--surface-0);
|
|
39
|
+
--surface-card: var(--surface-1);
|
|
40
|
+
--surface-elevated: var(--surface-1);
|
|
41
|
+
--surface-subtle: var(--surface-2);
|
|
42
|
+
--surface-selected: var(--surface-3);
|
|
43
|
+
--card-background: var(--surface-1);
|
|
44
|
+
--side-panel-background: var(--surface-1);
|
|
45
|
+
--control-bg: var(--surface-1);
|
|
46
|
+
--control-bg-hover: #f5f5f5;
|
|
47
|
+
--control-border: var(--border-color);
|
|
48
|
+
--grid-header-bg: #f8f8f8;
|
|
49
|
+
--grid-filter-bg: #ffffff;
|
|
50
|
+
--grid-row-hover-bg: #ebebeb;
|
|
51
|
+
--grid-row-selected-bg: color-mix(in srgb, var(--accent-color) 9%, #ffffff);
|
|
52
|
+
--grid-row-selected-border: color-mix(in srgb, var(--accent-color) 72%, #ffffff);
|
|
53
|
+
--grid-row-alt-bg: #f7f7f7;
|
|
54
|
+
--status-success-bg: #e8f5e9;
|
|
55
|
+
--status-success-text: #0b6a08;
|
|
56
|
+
--status-success-border: #b6e0b8;
|
|
57
|
+
--status-warning-bg: #fdf3e7;
|
|
58
|
+
--status-warning-text: #9a3d07;
|
|
59
|
+
--status-warning-border: #f3c09a;
|
|
60
|
+
--status-danger-bg: #fdeced;
|
|
61
|
+
--status-danger-text: #b10e1c;
|
|
62
|
+
--status-danger-border: #f3c2c6;
|
|
63
|
+
--status-info-bg: #eff4ff;
|
|
64
|
+
--status-info-text: #1d52d4;
|
|
65
|
+
--status-info-border: #bfcffe;
|
|
66
|
+
--shadow-sm: 0 1px 3px rgba(0,0,0,.09), 0 0 0 1px rgba(0,0,0,.04);
|
|
67
|
+
--shadow-md: 0 4px 10px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04);
|
|
68
|
+
--shadow-lg: 0 12px 28px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.07);
|
|
69
|
+
--focus-ring-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
|
|
70
|
+
--overlay-bg: rgb(0 0 0 / 42%);
|
|
71
|
+
--overlay-bg-subtle: rgb(0 0 0 / 18%);
|
|
72
|
+
--tooltip-danger-button-color: rgba(197, 15, 31, 0.10);
|
|
73
|
+
--tooltip-success-button-color: rgba(14, 122, 11, 0.10);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
[data-theme=light] {
|
|
77
|
+
content: "";
|
|
78
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nubitio/ui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "Visual primitives and theme system for the Nubit admin stack (dialogs, cards, toolbar, light/dark theme).",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"react",
|
|
9
|
+
"ui",
|
|
10
|
+
"components",
|
|
11
|
+
"theme",
|
|
12
|
+
"admin"
|
|
13
|
+
],
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"url": "git+https://github.com/nubitio/nubit-react.git",
|
|
17
|
+
"directory": "packages/ui"
|
|
18
|
+
},
|
|
19
|
+
"bugs": {
|
|
20
|
+
"url": "https://github.com/nubitio/nubit-react/issues"
|
|
21
|
+
},
|
|
22
|
+
"homepage": "https://github.com/nubitio/nubit-react/tree/main/packages/ui#readme",
|
|
23
|
+
"source": "./public.ts",
|
|
24
|
+
"main": "./dist/index.cjs",
|
|
25
|
+
"module": "./dist/index.mjs",
|
|
26
|
+
"types": "./dist/index.d.mts",
|
|
27
|
+
"exports": {
|
|
28
|
+
".": {
|
|
29
|
+
"types": {
|
|
30
|
+
"import": "./dist/index.d.mts",
|
|
31
|
+
"require": "./dist/index.d.cts"
|
|
32
|
+
},
|
|
33
|
+
"import": "./dist/index.mjs",
|
|
34
|
+
"require": "./dist/index.cjs"
|
|
35
|
+
},
|
|
36
|
+
"./style.css": "./dist/style.css",
|
|
37
|
+
"./themes/*": "./dist/themes/*",
|
|
38
|
+
"./package.json": "./package.json"
|
|
39
|
+
},
|
|
40
|
+
"files": [
|
|
41
|
+
"dist"
|
|
42
|
+
],
|
|
43
|
+
"sideEffects": [
|
|
44
|
+
"**/*.css"
|
|
45
|
+
],
|
|
46
|
+
"engines": {
|
|
47
|
+
"node": ">=18.0.0"
|
|
48
|
+
},
|
|
49
|
+
"publishConfig": {
|
|
50
|
+
"access": "public"
|
|
51
|
+
},
|
|
52
|
+
"peerDependencies": {
|
|
53
|
+
"react": "^19.0.0",
|
|
54
|
+
"react-dom": "^19.0.0"
|
|
55
|
+
}
|
|
56
|
+
}
|