@radioactive-labs/plutonium 0.49.1 → 0.50.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.
Files changed (21) hide show
  1. package/package.json +1 -1
  2. package/src/css/components.css +304 -131
  3. package/src/css/tokens.css +101 -85
  4. package/src/dist/css/plutonium.css +2 -2
  5. package/src/dist/js/plutonium.js +369 -25
  6. package/src/dist/js/plutonium.js.map +4 -4
  7. package/src/dist/js/plutonium.min.js +45 -45
  8. package/src/dist/js/plutonium.min.js.map +4 -4
  9. package/src/js/controllers/autosubmit_controller.js +24 -0
  10. package/src/js/controllers/bulk_actions_controller.js +15 -16
  11. package/src/js/controllers/capture_url_controller.js +14 -0
  12. package/src/js/controllers/filter_panel_controller.js +77 -19
  13. package/src/js/controllers/frame_navigator_controller.js +34 -6
  14. package/src/js/controllers/icon_rail_controller.js +22 -0
  15. package/src/js/controllers/icon_rail_flyout_controller.js +128 -0
  16. package/src/js/controllers/register_controllers.js +16 -0
  17. package/src/js/controllers/resource_tab_list_controller.js +56 -3
  18. package/src/js/controllers/row_click_controller.js +21 -0
  19. package/src/js/controllers/table_column_menu_controller.js +43 -0
  20. package/src/js/controllers/table_header_controller.js +16 -0
  21. package/src/js/controllers/view_switcher_controller.js +29 -0
package/src/css/tokens.css CHANGED
@@ -5,147 +5,163 @@
5
5
  */
6
6
 
7
7
  :root {
8
- /* ===================
8
+ /* ===================
9
9
  Body/Page Background
10
10
  =================== */
11
- --pu-body: #f8fafc;
11
+ --pu-body: #f8fafc;
12
12
 
13
- /* ===================
13
+ /* ===================
14
14
  Surface Colors - Softer, more refined
15
15
  =================== */
16
- --pu-surface: #ffffff;
17
- --pu-surface-alt: #f1f5f9;
18
- --pu-surface-raised: #ffffff;
19
- --pu-surface-overlay: rgba(255, 255, 255, 0.95);
16
+ --pu-surface: #ffffff;
17
+ --pu-surface-alt: #f1f5f9;
18
+ --pu-surface-raised: #ffffff;
19
+ --pu-surface-overlay: rgba(255, 255, 255, 0.95);
20
20
 
21
- /* ===================
21
+ /* ===================
22
22
  Border Colors - Subtle
23
23
  =================== */
24
- --pu-border: #e2e8f0;
25
- --pu-border-muted: #f1f5f9;
26
- --pu-border-strong: #cbd5e1;
24
+ --pu-border: #e2e8f0;
25
+ --pu-border-muted: #f1f5f9;
26
+ --pu-border-strong: #cbd5e1;
27
27
 
28
- /* ===================
28
+ /* ===================
29
29
  Text Colors - Better hierarchy
30
30
  =================== */
31
- --pu-text: #0f172a;
32
- --pu-text-muted: #64748b;
33
- --pu-text-subtle: #94a3b8;
34
- --pu-text-danger: #dc2626;
31
+ --pu-text: #0f172a;
32
+ --pu-text-muted: #64748b;
33
+ --pu-text-subtle: #94a3b8;
34
+ --pu-text-danger: #dc2626;
35
35
 
36
- /* ===================
36
+ /* ===================
37
37
  Table Tokens - Clean minimal design
38
38
  =================== */
39
- --pu-table-header-bg: #f8fafc;
40
- --pu-table-header-text: #475569;
41
- --pu-table-row-bg: #ffffff;
42
- --pu-table-row-hover: #f8fafc;
43
- --pu-table-row-selected: theme(colors.primary.50);
44
- --pu-table-border: #f1f5f9;
39
+ --pu-table-header-bg: #f8fafc;
40
+ --pu-table-header-text: #475569;
41
+ --pu-table-row-bg: #ffffff;
42
+ --pu-table-row-hover: #f8fafc;
43
+ --pu-table-row-selected: theme(colors.primary.50);
44
+ --pu-table-border: #f1f5f9;
45
45
 
46
- /* ===================
46
+ /* ===================
47
47
  Form Tokens
48
48
  =================== */
49
- --pu-input-bg: #ffffff;
50
- --pu-input-border: #e2e8f0;
51
- --pu-input-focus-ring: theme(colors.primary.500);
52
- --pu-input-placeholder: #94a3b8;
49
+ --pu-input-bg: #ffffff;
50
+ --pu-input-border: #e2e8f0;
51
+ --pu-input-focus-ring: theme(colors.primary.500);
52
+ --pu-input-placeholder: #94a3b8;
53
53
 
54
- /* ===================
54
+ /* ===================
55
55
  Card Tokens - Refined shadows
56
56
  =================== */
57
- --pu-card-bg: #ffffff;
58
- --pu-card-border: #e2e8f0;
57
+ --pu-card-bg: #ffffff;
58
+ --pu-card-border: #e2e8f0;
59
59
 
60
- /* ===================
60
+ /* ===================
61
61
  Shadow System - Layered, soft
62
62
  =================== */
63
- --pu-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03), 0 1px 3px 0 rgb(0 0 0 / 0.05);
64
- --pu-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.04), 0 4px 6px -1px rgb(0 0 0 / 0.06);
65
- --pu-shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.03), 0 10px 15px -3px rgb(0 0 0 / 0.08);
63
+ --pu-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03), 0 1px 3px 0 rgb(0 0 0 / 0.05);
64
+ --pu-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.04), 0 4px 6px -1px rgb(0 0 0 / 0.06);
65
+ --pu-shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.03), 0 10px 15px -3px rgb(0 0 0 / 0.08);
66
66
 
67
- /* ===================
67
+ /* ===================
68
68
  Spacing Scale
69
69
  =================== */
70
- --pu-space-xs: 0.25rem;
71
- --pu-space-sm: 0.5rem;
72
- --pu-space-md: 1rem;
73
- --pu-space-lg: 1.5rem;
74
- --pu-space-xl: 2rem;
70
+ --pu-space-xs: 0.25rem;
71
+ --pu-space-sm: 0.5rem;
72
+ --pu-space-md: 1rem;
73
+ --pu-space-lg: 1.5rem;
74
+ --pu-space-xl: 2rem;
75
75
 
76
- /* ===================
76
+ /* ===================
77
77
  Border Radius - Refined
78
78
  =================== */
79
- --pu-radius-sm: 0.375rem;
80
- --pu-radius-md: 0.5rem;
81
- --pu-radius-lg: 0.75rem;
82
- --pu-radius-xl: 1rem;
83
- --pu-radius-full: 9999px;
79
+ --pu-radius-sm: 0.375rem;
80
+ --pu-radius-md: 0.5rem;
81
+ --pu-radius-lg: 0.75rem;
82
+ --pu-radius-xl: 1rem;
83
+ --pu-radius-full: 9999px;
84
84
 
85
- /* ===================
85
+ /* ===================
86
86
  Transitions - Smooth
87
87
  =================== */
88
- --pu-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
89
- --pu-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
90
- --pu-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
88
+ --pu-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
89
+ --pu-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
90
+ --pu-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
91
+
92
+ /* ===================
93
+ Density Scale
94
+ =================== */
95
+ --pu-row-height: 32px;
96
+ --pu-section-gap: 16px;
97
+ --pu-field-gap: 12px;
98
+ --pu-page-padding: 24px;
91
99
  }
92
100
 
93
101
  .dark {
94
- /* ===================
102
+ /* ===================
95
103
  Body/Page Background (Dark)
96
104
  =================== */
97
- --pu-body: #0f172a;
105
+ --pu-body: #0f172a;
98
106
 
99
- /* ===================
107
+ /* ===================
100
108
  Surface Colors (Dark) - Rich, not too dark
101
109
  =================== */
102
- --pu-surface: #1e293b;
103
- --pu-surface-alt: #0f172a;
104
- --pu-surface-raised: #334155;
105
- --pu-surface-overlay: rgba(30, 41, 59, 0.95);
110
+ --pu-surface: #1e293b;
111
+ --pu-surface-alt: #0f172a;
112
+ --pu-surface-raised: #334155;
113
+ --pu-surface-overlay: rgba(30, 41, 59, 0.95);
106
114
 
107
- /* ===================
115
+ /* ===================
108
116
  Border Colors (Dark)
109
117
  =================== */
110
- --pu-border: #334155;
111
- --pu-border-muted: #1e293b;
112
- --pu-border-strong: #475569;
118
+ --pu-border: #334155;
119
+ --pu-border-muted: #1e293b;
120
+ --pu-border-strong: #475569;
113
121
 
114
- /* ===================
122
+ /* ===================
115
123
  Text Colors (Dark)
116
124
  =================== */
117
- --pu-text: #f8fafc;
118
- --pu-text-muted: #94a3b8;
119
- --pu-text-subtle: #64748b;
120
- --pu-text-danger: #f87171;
125
+ --pu-text: #f8fafc;
126
+ --pu-text-muted: #94a3b8;
127
+ --pu-text-subtle: #64748b;
128
+ --pu-text-danger: #f87171;
121
129
 
122
- /* ===================
130
+ /* ===================
123
131
  Table Tokens (Dark)
124
132
  =================== */
125
- --pu-table-header-bg: #0f172a;
126
- --pu-table-header-text: #cbd5e1;
127
- --pu-table-row-bg: #1e293b;
128
- --pu-table-row-hover: #334155;
129
- --pu-table-row-selected: theme(colors.primary.900 / 40%);
130
- --pu-table-border: #334155;
133
+ --pu-table-header-bg: #0f172a;
134
+ --pu-table-header-text: #cbd5e1;
135
+ --pu-table-row-bg: #1e293b;
136
+ --pu-table-row-hover: #334155;
137
+ --pu-table-row-selected: theme(colors.primary.900 / 40%);
138
+ --pu-table-border: #334155;
131
139
 
132
- /* ===================
140
+ /* ===================
133
141
  Form Tokens (Dark)
134
142
  =================== */
135
- --pu-input-bg: #1e293b;
136
- --pu-input-border: #475569;
137
- --pu-input-placeholder: #64748b;
143
+ --pu-input-bg: #1e293b;
144
+ --pu-input-border: #475569;
145
+ --pu-input-placeholder: #64748b;
138
146
 
139
- /* ===================
147
+ /* ===================
140
148
  Card Tokens (Dark)
141
149
  =================== */
142
- --pu-card-bg: #1e293b;
143
- --pu-card-border: #334155;
150
+ --pu-card-bg: #1e293b;
151
+ --pu-card-border: #334155;
144
152
 
145
- /* ===================
153
+ /* ===================
146
154
  Shadow System (Dark)
147
155
  =================== */
148
- --pu-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2), 0 1px 3px 0 rgb(0 0 0 / 0.3);
149
- --pu-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.25), 0 4px 6px -1px rgb(0 0 0 / 0.35);
150
- --pu-shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.2), 0 10px 15px -3px rgb(0 0 0 / 0.4);
156
+ --pu-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2), 0 1px 3px 0 rgb(0 0 0 / 0.3);
157
+ --pu-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.25), 0 4px 6px -1px rgb(0 0 0 / 0.35);
158
+ --pu-shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.2), 0 10px 15px -3px rgb(0 0 0 / 0.4);
159
+
160
+ /* ===================
161
+ Density Scale (Dark)
162
+ =================== */
163
+ --pu-row-height: 32px;
164
+ --pu-section-gap: 16px;
165
+ --pu-field-gap: 12px;
166
+ --pu-page-padding: 24px;
151
167
  }