@starasia/admin 14.44.0 → 14.45.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 (5) hide show
  1. package/dist/index.cjs.js +3 -3
  2. package/dist/index.es.js +10 -10
  3. package/dist/index.umd.js +3 -3
  4. package/dist/skins/tech.css +152 -0
  5. package/package.json +15 -14
package/dist/skins/tech.css ADDED
@@ -0,0 +1,152 @@
1
+ @import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
2
+
3
+ /*
4
+ * Starasia Skin — Tech
5
+ *
6
+ * Skin opt-in untuk produk tech/monitoring (machine health, OFA, dsb.).
7
+ * Nilai diambil dari machine-health-monitoring-web (app/globals.css):
8
+ * cyan + navy, sudut tajam, JetBrains Mono (body) + Chakra Petch (heading).
9
+ *
10
+ * Pemakaian — import SETELAH style.css, lalu pasang atribut di <html>:
11
+ * import "@starasia/css/dist/style.css";
12
+ * import "@starasia/css/skins/tech.css";
13
+ * <html data-skin="tech"> → tech light
14
+ * <html data-skin="tech" data-theme="dark"> → tech dark
15
+ *
16
+ * Spesifisitas:
17
+ * - [data-skin="tech"] (0,1,0) setara :root → file ini HARUS dimuat setelah
18
+ * style.css supaya menang lewat source order.
19
+ * - [data-skin="tech"][data-theme="dark"] (0,2,0) menang atas
20
+ * [data-theme="dark"] di urutan mana pun.
21
+ * - Override brand runtime dari <ThemeProvider> (:root, disisipkan ke <head>
22
+ * belakangan) tetap menang atas skin — app masih bisa re-brand.
23
+ *
24
+ * Skin hanya mengganti token. Tanpa atribut data-skin, file ini tidak
25
+ * berpengaruh apa-apa (selain memuat font).
26
+ */
27
+
28
+ /* ==========================================================
29
+ Tech — Light (dan nilai bersama untuk dark)
30
+ ========================================================== */
31
+ [data-skin="tech"] {
32
+ /* brand → cyan. 600 = primary light (#0E7490), 300 = primary dark
33
+ (#4CC9FF) — sesuai pemetaan semantic starasia (light pakai brand-600,
34
+ dark pakai brand-300 untuk --sa-background-brand). */
35
+ --sa-color-brand-50: #e6f3f9;
36
+ --sa-color-brand-100: #c9e8f5;
37
+ --sa-color-brand-200: #99d8ee;
38
+ --sa-color-brand-300: #4cc9ff;
39
+ --sa-color-brand-400: #1fa9d6;
40
+ --sa-color-brand-500: #0e9bc4;
41
+ --sa-color-brand-600: #0e7490;
42
+ --sa-color-brand-700: #0b5d73;
43
+ --sa-color-brand-800: #0b4b5e;
44
+ --sa-color-brand-900: #072f3b;
45
+
46
+ /* gray → slate kebiruan */
47
+ --sa-color-gray-50: #ffffff;
48
+ --sa-color-gray-100: #f6f8fb;
49
+ --sa-color-gray-200: #eef2f8;
50
+ --sa-color-gray-300: #e3e9f1;
51
+ --sa-color-gray-400: #c3cedc;
52
+ --sa-color-gray-500: #8695ac;
53
+ --sa-color-gray-600: #6e7e96;
54
+ --sa-color-gray-700: #5a6b82;
55
+ --sa-color-gray-800: #3a4a61;
56
+ --sa-color-gray-900: #1b2637;
57
+ --sa-color-gray-1000: #0b1220;
58
+ --sa-color-gray-1100: #06080f;
59
+
60
+ /* dark surface scale → navy */
61
+ --sa-color-dark-50: #06080f;
62
+ --sa-color-dark-100: #0a1120;
63
+ --sa-color-dark-200: #111a2b;
64
+ --sa-color-dark-300: #16203a;
65
+ --sa-color-dark-400: #1f2b45;
66
+ --sa-color-dark-500: #3d4f6e;
67
+ --sa-color-dark-600: #5a6b82;
68
+ --sa-color-dark-700: #8695ac;
69
+ --sa-color-dark-800: #a3b1c4;
70
+ --sa-color-dark-900: #bcc8d8;
71
+ --sa-color-dark-1000: #cbd7e6;
72
+ --sa-color-dark-1100: #e6edf6;
73
+
74
+ /* alpha → tint navy (light) / biru (dark) */
75
+ --sa-color-black-alpha-a5: #0b12200d;
76
+ --sa-color-black-alpha-a10: #0b12201a;
77
+ --sa-color-white-alpha-a5: #78b4ff0d;
78
+ --sa-color-white-alpha-a10: #78b4ff1a;
79
+ --sa-color-white-alpha-a20: #78b4ff33;
80
+
81
+ /* semantic light */
82
+ --sa-border-subtle: #e3e9f1;
83
+ --sa-background-error: #cc3340;
84
+ --sa-background-success: #157c54;
85
+ --sa-background-warning: #c77d19;
86
+ --sa-border-danger: #cc3340;
87
+ --sa-border-success: #157c54;
88
+ --sa-border-warning: #c77d19;
89
+
90
+ /* radius → sudut tajam (pakai `0px`, bukan `0`: komponen memakai
91
+ `min(3px, var(--sa-radii-xs))` dan angka tanpa unit tidak valid di min()).
92
+ full & circular TIDAK diubah: pill, LED status,
93
+ avatar tetap bulat. */
94
+ --sa-radii-xs: 0px;
95
+ --sa-radii-sm: 0px;
96
+ --sa-radii-md: 0px;
97
+ --sa-radii-lg: 0px;
98
+ --sa-radii-xl: 0px;
99
+ --sa-radii-2xl: 0px;
100
+ --sa-radii-rounded: 0px;
101
+
102
+ /* font */
103
+ --sa-font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
104
+ Consolas, "Liberation Mono", monospace;
105
+ --sa-font-family-heading: "Chakra Petch", "JetBrains Mono", ui-monospace,
106
+ monospace;
107
+
108
+ /* elevation datar — kartu cukup hairline border (sudah ada di Card) */
109
+ --sa-shadow-card: none;
110
+
111
+ /* token khusus tech — untuk dekorasi HUD/circuit di app */
112
+ --sa-glow-accent: rgba(14, 155, 196, 0.25);
113
+ --sa-grid-line: rgba(11, 18, 32, 0.05);
114
+ --sa-circuit-line: rgba(14, 116, 144, 0.18);
115
+ }
116
+
117
+ /* ==========================================================
118
+ Tech — Dark
119
+ ========================================================== */
120
+ [data-skin="tech"][data-theme="dark"] {
121
+ /* text */
122
+ --sa-text-primary: #e6edf6;
123
+
124
+ /* surface: card #0E1524 di atas halaman #06080F */
125
+ --sa-background-primary: #0e1524;
126
+ --sa-background-primary-inverse: #06080f;
127
+ --sa-background-subtle: #1f2b45;
128
+ --sa-background-hover: #15263f;
129
+ --sa-background-pressed: #16203a;
130
+ --sa-background-neutral: #16203a;
131
+ --sa-background-neutral-hover: #1b2a47;
132
+ --sa-background-neutral-pressed: #22324f;
133
+ --sa-background-brand-subtlest: #15263f;
134
+
135
+ /* status */
136
+ --sa-background-error: #ff5c6c;
137
+ --sa-background-success: #43d9a3;
138
+ --sa-background-warning: #f5a524;
139
+ --sa-border-danger: #ff5c6c;
140
+ --sa-border-success: #43d9a3;
141
+ --sa-border-warning: #f5a524;
142
+
143
+ /* border-subtle mengikuti white-alpha-a10 (sudah di-tint biru di atas),
144
+ tapi light menimpanya dengan hex → kembalikan ke alpha di dark */
145
+ --sa-border-subtle: var(--sa-color-white-alpha-a10, #78b4ff1a);
146
+
147
+ --sa-shadow-card: none;
148
+
149
+ --sa-glow-accent: rgba(76, 201, 255, 0.35);
150
+ --sa-grid-line: rgba(120, 180, 255, 0.06);
151
+ --sa-circuit-line: rgba(120, 180, 255, 0.14);
152
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/admin",
3
- "version": "14.44.0",
3
+ "version": "14.45.0",
4
4
  "description": "Core Admin Dashboard for starasia UI",
5
5
  "author": "Rizki Izzul Haq",
6
6
  "main": "dist/index.umd.js",
@@ -22,6 +22,7 @@
22
22
  "import": "./dist/adapters/tanstack.es.js",
23
23
  "require": "./dist/adapters/tanstack.cjs.js"
24
24
  },
25
+ "./skins/*": "./dist/skins/*",
25
26
  "./dist/*": "./dist/*",
26
27
  "./package.json": "./package.json"
27
28
  },
@@ -52,40 +53,40 @@
52
53
  "@starasia/accordion": "3.2.1",
53
54
  "@starasia/alert": "5.0.5",
54
55
  "@starasia/avatar": "1.0.1",
55
- "@starasia/badges": "4.1.2",
56
+ "@starasia/badges": "4.1.3",
56
57
  "@starasia/box": "7.5.1",
57
58
  "@starasia/breadcrumb": "6.0.2",
58
59
  "@starasia/button": "6.0.4",
59
60
  "@starasia/card": "5.6.2",
60
- "@starasia/checkbox": "5.1.0",
61
- "@starasia/css": "5.4.0",
62
- "@starasia/date": "7.0.2",
61
+ "@starasia/checkbox": "5.1.1",
62
+ "@starasia/css": "5.5.0",
63
+ "@starasia/date": "7.0.3",
63
64
  "@starasia/dialog": "5.2.1",
64
65
  "@starasia/drawer": "3.5.0",
65
- "@starasia/dropdown": "6.0.1",
66
+ "@starasia/dropdown": "6.0.2",
66
67
  "@starasia/flex": "4.4.0",
67
68
  "@starasia/grid": "1.3.0",
68
69
  "@starasia/hooks": "1.0.2",
69
70
  "@starasia/http": "1.0.5",
70
71
  "@starasia/icon": "3.18.1",
71
- "@starasia/input": "6.0.2",
72
+ "@starasia/input": "6.0.3",
72
73
  "@starasia/menu": "3.6.6",
73
74
  "@starasia/pagination": "3.3.3",
74
- "@starasia/progress": "4.4.0",
75
+ "@starasia/progress": "4.4.1",
75
76
  "@starasia/progress-stepper": "4.0.0",
76
77
  "@starasia/radio": "5.1.0",
77
- "@starasia/skeleton": "3.1.3",
78
- "@starasia/stepper": "4.1.0",
78
+ "@starasia/skeleton": "3.1.4",
79
+ "@starasia/stepper": "4.1.1",
79
80
  "@starasia/storage": "1.0.2",
80
81
  "@starasia/story-record": "4.2.0",
81
82
  "@starasia/table": "5.1.2",
82
83
  "@starasia/tabs": "5.2.2",
83
- "@starasia/text": "5.1.0",
84
- "@starasia/textarea": "5.0.1",
84
+ "@starasia/text": "5.2.0",
85
+ "@starasia/textarea": "5.0.2",
85
86
  "@starasia/theme": "3.0.4",
86
87
  "@starasia/toast": "4.3.1",
87
88
  "@starasia/toggle": "5.1.0",
88
- "@starasia/tooltip": "4.3.2",
89
+ "@starasia/tooltip": "4.3.3",
89
90
  "react-easy-crop": "^5.5.6"
90
91
  },
91
92
  "devDependencies": {
@@ -104,6 +105,6 @@
104
105
  },
105
106
  "scripts": {
106
107
  "dev": "vite --config vite.config.ts --port 3002",
107
- "build": "vite build --config vite.config.ts && vite build --config vite.adapters.config.ts"
108
+ "build": "vite build --config vite.config.ts && vite build --config vite.adapters.config.ts && mkdir -p dist/skins && cp node_modules/@starasia/css/dist/skins/*.css dist/skins/"
108
109
  }
109
110
  }