@outs-tand-ing/ui 0.2.28 → 0.3.3
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/README.md +3 -5
- package/dist/brand/app-icon/palette.d.ts +1 -0
- package/dist/brand/app-icon/palette.d.ts.map +1 -1
- package/package.json +16 -17
- package/src/brand/app-icon/README.md +20 -7
- package/src/brand/app-icon/palette.ts +4 -1
- package/src/brand/app-icon/ring-back.svg +3 -0
- package/src/brand/app-icon/ring-front.svg +3 -0
- package/src/shims-vue.d.ts +10 -0
- package/src/brand/app-icon/triangle-back.svg +0 -3
- package/src/brand/app-icon/triangle-front.svg +0 -3
package/README.md
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ui
|
|
2
2
|
|
|
3
|
-
Shared
|
|
3
|
+
Shared Vue components, icons, and design tokens.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- [Bundle Size Log](./docs/BUNDLE_SIZE.md)
|
|
5
|
+
Documentation lives in the `knowledge` repo (`docs/design/system/`). This file stays short by design so it cannot drift.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../src/brand/app-icon/palette.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../src/brand/app-icon/palette.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@outs-tand-ing/ui",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Shared Vue components, icons, and design tokens for
|
|
3
|
+
"version": "0.3.3",
|
|
4
|
+
"description": "Shared Vue components, icons, and design tokens for the outstanding platform",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
7
7
|
"*.css"
|
|
@@ -52,34 +52,33 @@
|
|
|
52
52
|
"build": "bun run build:clean && vite build && vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly",
|
|
53
53
|
"build:clean": "rm -rf dist",
|
|
54
54
|
"typecheck": "vue-tsc --noEmit",
|
|
55
|
-
"lint": "NODE_NO_WARNINGS=1 eslint .",
|
|
55
|
+
"lint": "NODE_NO_WARNINGS=1 eslint . --max-warnings 0",
|
|
56
56
|
"lint:fix": "NODE_NO_WARNINGS=1 eslint . --fix",
|
|
57
57
|
"bump": "bun scripts/bump.ts",
|
|
58
58
|
"bump:patch": "bun scripts/bump.ts patch",
|
|
59
59
|
"bump:minor": "bun scripts/bump.ts minor",
|
|
60
60
|
"bump:major": "bun scripts/bump.ts major",
|
|
61
|
-
"
|
|
62
|
-
"release
|
|
63
|
-
"release:minor": "bun scripts/release.ts minor",
|
|
64
|
-
"release:major": "bun scripts/release.ts major",
|
|
61
|
+
"prepublishOnly": "bun run build",
|
|
62
|
+
"release": "npm publish --access public",
|
|
65
63
|
"palette": "bun scripts/generate-palette.ts",
|
|
66
64
|
"generate:android": "bun scripts/generate-android-colors.ts",
|
|
67
65
|
"generate:ios": "bun scripts/generate-ios-colors.ts",
|
|
68
|
-
"generate:android:icon": "bun scripts/generate-android-icon.ts"
|
|
66
|
+
"generate:android:icon": "bun scripts/generate-android-icon.ts",
|
|
67
|
+
"generate:favicon": "bun scripts/generate-favicon.ts"
|
|
69
68
|
},
|
|
70
69
|
"peerDependencies": {
|
|
71
70
|
"vue": "^3.5.0"
|
|
72
71
|
},
|
|
73
72
|
"devDependencies": {
|
|
74
|
-
"@vitejs/plugin-vue": "^6.0.
|
|
73
|
+
"@vitejs/plugin-vue": "^6.0.8",
|
|
75
74
|
"bun-types": "^1.3.14",
|
|
76
|
-
"eslint": "^10.
|
|
77
|
-
"eslint-plugin-vue": "^10.
|
|
78
|
-
"sharp": "^0.35.
|
|
79
|
-
"typescript": "
|
|
80
|
-
"typescript-eslint": "^8.
|
|
81
|
-
"vite": "^8.
|
|
82
|
-
"vue": "^3.5.
|
|
83
|
-
"vue-tsc": "^3.3.
|
|
75
|
+
"eslint": "^10.8.1",
|
|
76
|
+
"eslint-plugin-vue": "^10.10.0",
|
|
77
|
+
"sharp": "^0.35.3",
|
|
78
|
+
"typescript": "6.0.3",
|
|
79
|
+
"typescript-eslint": "^8.67.0",
|
|
80
|
+
"vite": "^8.2.1",
|
|
81
|
+
"vue": "^3.5.41",
|
|
82
|
+
"vue-tsc": "^3.3.10"
|
|
84
83
|
}
|
|
85
84
|
}
|
|
@@ -1,13 +1,26 @@
|
|
|
1
1
|
# App icon — single source
|
|
2
2
|
|
|
3
|
-
The brand mark (two overlapping
|
|
4
|
-
editable source for both platforms. The
|
|
3
|
+
The brand mark (two overlapping rings, placeholder) lives here and is the **only**
|
|
4
|
+
editable source for both platforms. The ring SVGs are not duplicated into the iOS or Android
|
|
5
5
|
trees — those hold generated/authored artifacts only.
|
|
6
6
|
|
|
7
7
|
| Source | What it drives |
|
|
8
8
|
|---|---|
|
|
9
|
-
| `
|
|
10
|
-
| `palette.ts` | channel colours (dev red / prod green) + background |
|
|
9
|
+
| `ring-back.svg`, `ring-front.svg` | the mark geometry (1024 canvas, neutral fill — colour is applied per platform) |
|
|
10
|
+
| `palette.ts` | channel colours (dev red / prod green / staging violet) + background |
|
|
11
|
+
|
|
12
|
+
## Favicon — generated, channel-coloured
|
|
13
|
+
|
|
14
|
+
```sh
|
|
15
|
+
bun run generate:favicon <dev|staging|prod>
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
`scripts/generate-favicon.ts` composes `ring-back.svg` + `ring-front.svg` into one flat SVG,
|
|
19
|
+
recolours it for the given channel, and writes `favicon.svg` / `favicon-48x48.png` /
|
|
20
|
+
`icons/apple-touch-icon.png` into both `www/public/` and `web/public/`. Unlike Android/iOS,
|
|
21
|
+
a favicon has no platform-level colour override, so the colour is baked into the file bytes —
|
|
22
|
+
one channel per run. Normally run via `make assets-sync ENV=<env>` from the repo root, not by
|
|
23
|
+
hand.
|
|
11
24
|
|
|
12
25
|
## Android — generated
|
|
13
26
|
|
|
@@ -25,9 +38,9 @@ Structural files (adaptive-icon XML, themes, manifest) stay hand-authored.
|
|
|
25
38
|
|
|
26
39
|
iOS has no generation step — the layered Liquid Glass `.icon` is authored in **Icon Composer**:
|
|
27
40
|
|
|
28
|
-
1. Import `
|
|
29
|
-
2. Set the channel fill (green prod / red dev) and tune Liquid Glass.
|
|
30
|
-
3. Save over the project's `.icon` files at `ios/outstanding/AppIcon.icon` / `AppIconDev.icon`.
|
|
41
|
+
1. Import `ring-back.svg` then `ring-front.svg` from **this folder** as two layers.
|
|
42
|
+
2. Set the channel fill (green prod / red dev / violet staging) and tune Liquid Glass.
|
|
43
|
+
3. Save over the project's `.icon` files at `ios/outstanding/AppIcon.icon` / `AppIconDev.icon` / `AppIconStaging.icon`.
|
|
31
44
|
|
|
32
45
|
The `.icon` is the build artifact (it stays in the iOS tree); these SVGs are only its inputs.
|
|
33
46
|
A future enhancement can stamp the channel colour straight into the `.icon` layers to skip the GUI
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
// Launcher-icon colour tokens — the single source for the Android icon generator.
|
|
2
|
-
// `dev`/`prod` are the build-channel signal (red dev / green prod
|
|
2
|
+
// `dev`/`prod`/`staging` are the build-channel signal (red dev / green prod / violet
|
|
3
|
+
// staging), independent of season. `staging` matches the gradient already chosen for
|
|
4
|
+
// iOS's AppIconStaging.icon, so the channel signal reads the same across platforms.
|
|
3
5
|
export const iconPalette = {
|
|
4
6
|
background: '#EDEDED',
|
|
5
7
|
fallback: '#888888',
|
|
6
8
|
dev: '#FF3B30',
|
|
7
9
|
prod: '#34C759',
|
|
10
|
+
staging: '#9642EB',
|
|
8
11
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
// Fallback module declaration for SFC imports. vue-tsc resolves `.vue` files to their real
|
|
2
|
+
// component types when it can; on Linux's case-sensitive FS it intermittently fails to resolve
|
|
3
|
+
// `.vue` imported from a `.ts` barrel (export { default as X } from './X.vue'), breaking
|
|
4
|
+
// typecheck and build in CI while macOS passes. As an ambient wildcard, this is only used as a
|
|
5
|
+
// fallback — real per-component types still win wherever resolution succeeds.
|
|
6
|
+
declare module '*.vue' {
|
|
7
|
+
import type { DefineComponent } from 'vue'
|
|
8
|
+
const component: DefineComponent<object, object, unknown>
|
|
9
|
+
export default component
|
|
10
|
+
}
|