@tujyane/alf 1.0.3 → 1.2.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/README.md +107 -93
- package/dist/index.d.ts +1 -10
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -20
- package/dist/index.js.map +1 -1
- package/dist/palette.d.ts +6 -3
- package/dist/palette.d.ts.map +1 -1
- package/dist/palette.js +67 -136
- package/dist/palette.js.map +1 -1
- package/dist/semantic.d.ts +21 -0
- package/dist/semantic.d.ts.map +1 -0
- package/dist/semantic.js +73 -0
- package/dist/semantic.js.map +1 -0
- package/dist/utils/index.d.ts +0 -1
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +0 -1
- package/dist/utils/index.js.map +1 -1
- package/package.json +1 -1
- package/src/index.tsx +1 -31
- package/src/palette.ts +1 -84
- package/src/semantic.ts +91 -0
- package/src/utils/alpha.ts +1 -1
- package/src/utils/flatten/index.ts +1 -1
- package/src/utils/index.ts +0 -1
- package/dist/themes.d.ts +0 -151
- package/dist/themes.d.ts.map +0 -1
- package/dist/themes.js +0 -191
- package/dist/themes.js.map +0 -1
- package/dist/utils/select.d.ts +0 -7
- package/dist/utils/select.d.ts.map +0 -1
- package/dist/utils/select.js +0 -14
- package/dist/utils/select.js.map +0 -1
- package/src/themes.ts +0 -332
- package/src/utils/select.ts +0 -17
package/README.md
CHANGED
|
@@ -1,18 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
# Tujyane Application Layout Framework (ALF)
|
|
2
2
|
|
|
3
|
-
Modern, typed primitives for building consistent application layouts across web and React Native targets.
|
|
3
|
+
Modern, typed primitives for building consistent application layouts across web and React Native targets. Light theme only.
|
|
4
4
|
|
|
5
5
|
## Overview
|
|
6
6
|
|
|
7
7
|
ALF provides:
|
|
8
8
|
|
|
9
|
-
- **
|
|
10
|
-
- **
|
|
11
|
-
- **
|
|
12
|
-
- **
|
|
13
|
-
- **
|
|
14
|
-
|
|
15
|
-
The package re-exports from `src/index.tsx` so consumers can import from a single entrypoint.
|
|
9
|
+
- **Atoms**: 100+ minimal, composable atomic CSS classes exposed via `atoms`
|
|
10
|
+
- **Palette**: Direct color palette access with 90+ color tokens
|
|
11
|
+
- **Semantic**: Semantic color scales organized by purpose (primary, success, error, etc.)
|
|
12
|
+
- **Tokens**: Design tokens for consistent spacing, typography, and borders
|
|
13
|
+
- **Utilities**: Helper utilities like `alpha`, `leading`, `flatten` for style composition
|
|
14
|
+
- **Platform helpers**: `platform.select` wrapper and guards (`web`, `ios`, `android`, `native`) to keep code portable
|
|
16
15
|
|
|
17
16
|
## Installation
|
|
18
17
|
|
|
@@ -32,118 +31,125 @@ Peer dependencies expected:
|
|
|
32
31
|
## Quick Start
|
|
33
32
|
|
|
34
33
|
```tsx
|
|
35
|
-
import {
|
|
34
|
+
import { atoms, palette, tokens } from "@tujyane/alf";
|
|
36
35
|
|
|
37
36
|
export function App() {
|
|
38
37
|
return (
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
</Provider>
|
|
38
|
+
<div style={{ ...atoms.flex_col, ...atoms.gap_md }}>
|
|
39
|
+
<header style={{ ...atoms.p_lg, backgroundColor: palette.primary_500 }}>
|
|
40
|
+
<h1 style={{ ...atoms.text_2xl, color: palette.white }}>Hello World</h1>
|
|
41
|
+
</header>
|
|
42
|
+
</div>
|
|
45
43
|
);
|
|
46
44
|
}
|
|
47
45
|
```
|
|
48
46
|
|
|
49
|
-
|
|
47
|
+
## Exports
|
|
48
|
+
|
|
49
|
+
From `src/index.tsx`:
|
|
50
|
+
|
|
51
|
+
- `atoms`: Atomic CSS utility classes (flex, padding, margin, typography, etc.)
|
|
52
|
+
- `palette`: Color palette with 90+ color tokens
|
|
53
|
+
- `semantic`: Semantic color scales (primary, success, error, warning, info, secondary)
|
|
54
|
+
- `platform`: Platform helpers and selectors
|
|
55
|
+
- `tokens`: Design tokens namespace (spacing, typography, borders)
|
|
56
|
+
- `utils`: Utility helpers namespace (alpha, leading, flatten)
|
|
57
|
+
- `TextStyleProp`, `ViewStyleProp`: Convenience prop types for components
|
|
58
|
+
|
|
59
|
+
## Design System
|
|
60
|
+
|
|
61
|
+
### Color Palette
|
|
62
|
+
|
|
63
|
+
Access colors directly via the `palette` export:
|
|
50
64
|
|
|
51
65
|
```tsx
|
|
52
|
-
import {
|
|
66
|
+
import { palette } from "@tujyane/alf";
|
|
53
67
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
return (
|
|
57
|
-
<header style={{ backgroundColor: theme.background, color: theme.text }}>
|
|
58
|
-
My App
|
|
59
|
-
</header>
|
|
60
|
-
);
|
|
61
|
-
};
|
|
62
|
-
```
|
|
68
|
+
// Primary scale
|
|
69
|
+
const primary = palette.primary_500; // "#3563E9"
|
|
63
70
|
|
|
64
|
-
|
|
71
|
+
// Semantic colors
|
|
72
|
+
const success = palette.positive_500; // "#22C55E"
|
|
73
|
+
const error = palette.negative_500; // "#FF4423"
|
|
74
|
+
const warning = palette.warning_500; // "#FFC73A"
|
|
75
|
+
const info = palette.info_500; // "#54A6FF"
|
|
65
76
|
|
|
66
|
-
|
|
77
|
+
// Base colors
|
|
78
|
+
const white = palette.white; // "#FFFFFF"
|
|
79
|
+
const black = palette.black; // "#000000"
|
|
80
|
+
```
|
|
67
81
|
|
|
68
|
-
|
|
69
|
-
- `useTheme`: Hook to read the current theme (returns `Theme` with `scheme`, `palette`, `semantic`, `atoms`).
|
|
70
|
-
- `Context`: Internal context (typed) for advanced usage.
|
|
71
|
-
- `themes`: Theme presets (`light`, `dark`).
|
|
72
|
-
- `palette`: Color palette helpers.
|
|
73
|
-
- `platform`: Platform helpers and selectors.
|
|
74
|
-
- `tokens`: Design tokens namespace (spacing, typography, borders).
|
|
75
|
-
- `utils`: Utility helpers namespace (alpha, leading, flatten, select).
|
|
76
|
-
- `TextStyleProp`, `ViewStyleProp`: Convenience prop types for components.
|
|
77
|
-
- `atoms`: All atoms from `src/atoms` are re-exported.
|
|
82
|
+
### Semantic Color Scales
|
|
78
83
|
|
|
79
|
-
|
|
84
|
+
Use semantic scales for consistent color usage:
|
|
80
85
|
|
|
81
86
|
```tsx
|
|
82
|
-
import {
|
|
87
|
+
import { semantic } from "@tujyane/alf";
|
|
88
|
+
|
|
89
|
+
// Access any step in the scale
|
|
90
|
+
const primaryLight = semantic.primary[100]; // Lightest
|
|
91
|
+
const primaryBase = semantic.primary[500]; // Base
|
|
92
|
+
const primaryDark = semantic.primary[900]; // Darkest
|
|
93
|
+
|
|
94
|
+
// Available scales:
|
|
95
|
+
// - semantic.primary (neutral/primary)
|
|
96
|
+
// - semantic.success (green)
|
|
97
|
+
// - semantic.error (red)
|
|
98
|
+
// - semantic.warning (yellow)
|
|
99
|
+
// - semantic.info (blue)
|
|
100
|
+
// - semantic.secondary (grayscale)
|
|
101
|
+
```
|
|
83
102
|
|
|
84
|
-
|
|
103
|
+
### Atomic CSS
|
|
85
104
|
|
|
86
|
-
|
|
105
|
+
Compose styles using atomic classes:
|
|
87
106
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
{children}
|
|
91
|
-
</Provider>
|
|
92
|
-
);
|
|
93
|
-
```
|
|
107
|
+
```tsx
|
|
108
|
+
import { atoms } from "@tujyane/alf";
|
|
94
109
|
|
|
95
|
-
|
|
110
|
+
// Layout
|
|
111
|
+
<div style={{ ...atoms.flex_row, ...atoms.gap_md, ...atoms.justify_between }}>
|
|
96
112
|
|
|
97
|
-
|
|
113
|
+
// Spacing
|
|
114
|
+
<div style={{ ...atoms.p_lg, ...atoms.mx_auto }}>
|
|
98
115
|
|
|
99
|
-
|
|
116
|
+
// Typography
|
|
117
|
+
<span style={{ ...atoms.text_lg, ...atoms.font_bold, ...atoms.text_center }}>
|
|
100
118
|
|
|
101
|
-
|
|
119
|
+
// Borders
|
|
120
|
+
<div style={{ ...atoms.rounded_md, ...atoms.border, borderColor: palette.primary_200 }}>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
#### Available Atoms
|
|
102
124
|
|
|
103
|
-
|
|
104
|
-
- **Success**: `positive_100` through `positive_900` - green/success states
|
|
105
|
-
- **Error**: `negative_100` through `negative_900` - red/error states
|
|
106
|
-
- **Warning**: `warning_100` through `warning_900` - yellow/warning states
|
|
107
|
-
- **Info**: `info_100` through `info_900` - blue/information states
|
|
108
|
-
- **Secondary**: `secondary_100` through `secondary_900` - accent colors
|
|
125
|
+
**Layout:** `flex`, `flex_col`, `flex_row`, `justify_center`, `justify_between`, `align_center`, `gap_sm`, `gap_md`, `gap_lg`
|
|
109
126
|
|
|
110
|
-
|
|
127
|
+
**Spacing:** `p_sm`, `p_md`, `p_lg`, `px_lg`, `py_md`, `m_auto`, `mx_auto`, `mt_lg`, etc.
|
|
111
128
|
|
|
112
|
-
|
|
129
|
+
**Typography:** `text_sm`, `text_md`, `text_lg`, `text_2xl`, `font_bold`, `text_center`, `leading_relaxed`
|
|
113
130
|
|
|
114
|
-
**
|
|
131
|
+
**Borders:** `rounded_sm`, `rounded_md`, `rounded_lg`, `rounded_full`, `border`, `border_t`
|
|
115
132
|
|
|
116
|
-
|
|
117
|
-
- Backgrounds: `bg`, `bg_25`, `bg_50`
|
|
118
|
-
- Borders: `border_low`, `border_medium`, `border_high`
|
|
133
|
+
**Positioning:** `relative`, `absolute`, `fixed`, `inset_0`, `z_10`, `z_20`
|
|
119
134
|
|
|
120
|
-
|
|
135
|
+
### Design Tokens
|
|
121
136
|
|
|
122
|
-
|
|
123
|
-
- Backgrounds: `bg_primary`, `bg_success`, `bg_error`, `bg_warning`, `bg_info`, `bg_secondary`
|
|
124
|
-
- Borders: `border_primary`, `border_success`, `border_error`, `border_warning`, `border_info`, `border_secondary`
|
|
137
|
+
Access raw design values:
|
|
125
138
|
|
|
126
139
|
```tsx
|
|
127
|
-
import {
|
|
140
|
+
import { tokens } from "@tujyane/alf";
|
|
128
141
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
return (
|
|
132
|
-
<button style={{ ...theme.atoms.bg_primary, ...theme.atoms.text_inverted }}>
|
|
133
|
-
Click me
|
|
134
|
-
</button>
|
|
135
|
-
);
|
|
136
|
-
};
|
|
137
|
-
```
|
|
142
|
+
// Spacing (in pixels)
|
|
143
|
+
const space = tokens.space.md; // 12
|
|
138
144
|
|
|
139
|
-
|
|
145
|
+
// Font sizes (in pixels)
|
|
146
|
+
const size = tokens.fontSize.lg; // 16.9
|
|
140
147
|
|
|
141
|
-
|
|
142
|
-
const
|
|
148
|
+
// Border radius
|
|
149
|
+
const radius = tokens.borderRadius.md; // 12
|
|
143
150
|
|
|
144
|
-
//
|
|
145
|
-
const
|
|
146
|
-
const errorText = theme.semantic.error[900];
|
|
151
|
+
// Line heights (multipliers)
|
|
152
|
+
const height = tokens.lineHeight.snug; // 1.3
|
|
147
153
|
```
|
|
148
154
|
|
|
149
155
|
## Platform Helpers
|
|
@@ -174,14 +180,13 @@ Available under the `utils` namespace:
|
|
|
174
180
|
- `alpha(color, amount)`: Apply alpha to a color.
|
|
175
181
|
- `leading(value)`: Compute leading (line-height) helpers.
|
|
176
182
|
- `flatten(...)`: Flatten style arrays into a single object.
|
|
177
|
-
- `select(map, key)`: Safe selection helper.
|
|
178
183
|
|
|
179
184
|
Import examples:
|
|
180
185
|
|
|
181
186
|
```ts
|
|
182
|
-
import { utils } from "@tujyane/alf";
|
|
187
|
+
import { utils, palette } from "@tujyane/alf";
|
|
183
188
|
|
|
184
|
-
const translucent = utils.alpha(
|
|
189
|
+
const translucent = utils.alpha(palette.black, 0.2);
|
|
185
190
|
```
|
|
186
191
|
|
|
187
192
|
## Atoms and Types
|
|
@@ -208,19 +213,28 @@ pnpm i
|
|
|
208
213
|
pnpm build
|
|
209
214
|
```
|
|
210
215
|
|
|
211
|
-
4.
|
|
216
|
+
4. Run typecheck
|
|
217
|
+
|
|
218
|
+
```bash
|
|
219
|
+
pnpm typecheck
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
5. Develop against a local app or storybook of your choice.
|
|
212
223
|
|
|
213
224
|
## FAQ
|
|
214
225
|
|
|
215
|
-
- Why React Native types on web
|
|
226
|
+
- **Why React Native types on web?**
|
|
216
227
|
- We use `react-native` types like `ViewStyle` for cross-platform consistency. On web, they compile to plain objects.
|
|
217
228
|
|
|
218
|
-
- How do I
|
|
219
|
-
-
|
|
229
|
+
- **How do I customize colors?**
|
|
230
|
+
- Import the palette directly and override specific values, or use the semantic scales for consistent theming.
|
|
220
231
|
|
|
221
|
-
- Can I tree-shake utilities
|
|
232
|
+
- **Can I tree-shake utilities?**
|
|
222
233
|
- Yes, everything is module-scoped and re-exported. Use ESM imports for best results.
|
|
223
234
|
|
|
235
|
+
- **Is dark mode supported?**
|
|
236
|
+
- No, this version only supports a light theme. For dark mode, you would need to manually swap color values or use a different approach.
|
|
237
|
+
|
|
224
238
|
## License
|
|
225
239
|
|
|
226
240
|
MIT
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
|
|
2
|
-
import { type Theme } from "./themes";
|
|
3
2
|
export * from "./atoms";
|
|
4
3
|
export * from "./palette";
|
|
5
|
-
export * from "./
|
|
4
|
+
export * from "./semantic";
|
|
6
5
|
export * from "./platform";
|
|
7
6
|
export * as tokens from "./tokens";
|
|
8
7
|
export * as utils from "./utils";
|
|
@@ -12,12 +11,4 @@ export type TextStyleProp = {
|
|
|
12
11
|
export type ViewStyleProp = {
|
|
13
12
|
style?: StyleProp<ViewStyle>;
|
|
14
13
|
};
|
|
15
|
-
export declare const Context: import("react").Context<{
|
|
16
|
-
theme: Theme;
|
|
17
|
-
}>;
|
|
18
|
-
export declare function Provider<T extends string, A extends Record<T, Theme>>({ children, activeTheme, themes, }: React.PropsWithChildren<{
|
|
19
|
-
activeTheme: T;
|
|
20
|
-
themes: A;
|
|
21
|
-
}>): import("react/jsx-runtime").JSX.Element;
|
|
22
|
-
export declare function useTheme(): Theme;
|
|
23
14
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9E,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -36,29 +36,11 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
36
36
|
};
|
|
37
37
|
})();
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
exports.
|
|
40
|
-
exports.Provider = Provider;
|
|
41
|
-
exports.useTheme = useTheme;
|
|
42
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
43
|
-
const react_1 = require("react");
|
|
44
|
-
const themes_1 = require("./themes");
|
|
39
|
+
exports.utils = exports.tokens = void 0;
|
|
45
40
|
__exportStar(require("./atoms"), exports);
|
|
46
41
|
__exportStar(require("./palette"), exports);
|
|
47
|
-
__exportStar(require("./
|
|
42
|
+
__exportStar(require("./semantic"), exports);
|
|
48
43
|
__exportStar(require("./platform"), exports);
|
|
49
44
|
exports.tokens = __importStar(require("./tokens"));
|
|
50
45
|
exports.utils = __importStar(require("./utils"));
|
|
51
|
-
exports.Context = (0, react_1.createContext)({
|
|
52
|
-
theme: themes_1.themes.light,
|
|
53
|
-
});
|
|
54
|
-
exports.Context.displayName = "AlfContext";
|
|
55
|
-
function Provider({ children, activeTheme, themes, }) {
|
|
56
|
-
const value = (0, react_1.useMemo)(() => ({
|
|
57
|
-
theme: themes[activeTheme],
|
|
58
|
-
}), [activeTheme, themes]);
|
|
59
|
-
return (0, jsx_runtime_1.jsx)(exports.Context.Provider, { value: value, children: children });
|
|
60
|
-
}
|
|
61
|
-
function useTheme() {
|
|
62
|
-
return (0, react_1.useContext)(exports.Context).theme;
|
|
63
|
-
}
|
|
64
46
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,0CAAwB;AACxB,4CAA0B;AAC1B,6CAA2B;AAC3B,6CAA2B;AAC3B,mDAAmC;AACnC,iDAAiC"}
|
package/dist/palette.d.ts
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
export type Palette = {
|
|
2
2
|
white: string;
|
|
3
3
|
black: string;
|
|
4
|
-
|
|
4
|
+
stroke_primary: string;
|
|
5
|
+
text_primary: string;
|
|
6
|
+
text_secondary: string;
|
|
7
|
+
primary: string;
|
|
8
|
+
secondary: string;
|
|
5
9
|
primary_25: string;
|
|
6
10
|
primary_50: string;
|
|
7
11
|
primary_100: string;
|
|
@@ -67,6 +71,5 @@ export type Palette = {
|
|
|
67
71
|
secondary_800: string;
|
|
68
72
|
secondary_900: string;
|
|
69
73
|
};
|
|
70
|
-
export declare const
|
|
71
|
-
export declare function invertPalette(palette: Palette): Palette;
|
|
74
|
+
export declare const palette: Palette;
|
|
72
75
|
//# sourceMappingURL=palette.d.ts.map
|
package/dist/palette.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../src/palette.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,
|
|
1
|
+
{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../src/palette.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAElB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IAEpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IAErB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IAGrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IAEpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IAEjB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,OAoFrB,CAAC"}
|
package/dist/palette.js
CHANGED
|
@@ -1,152 +1,83 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
4
|
-
exports.
|
|
5
|
-
exports.DEFAULT_PALETTE = {
|
|
3
|
+
exports.palette = void 0;
|
|
4
|
+
exports.palette = {
|
|
6
5
|
white: "#FFFFFF",
|
|
7
6
|
black: "#000000",
|
|
8
|
-
|
|
7
|
+
stroke_primary: "#E8F2F2",
|
|
8
|
+
text_primary: "#020204",
|
|
9
|
+
text_secondary: "#625F6E",
|
|
10
|
+
primary: "#4372B8",
|
|
11
|
+
secondary: "#2D3F60",
|
|
9
12
|
// Primary
|
|
10
|
-
primary_25: "#
|
|
11
|
-
primary_50: "#
|
|
12
|
-
primary_100: "#
|
|
13
|
-
primary_200: "#
|
|
14
|
-
primary_300: "#
|
|
15
|
-
primary_400: "#
|
|
16
|
-
primary_500: "#
|
|
17
|
-
primary_600: "#
|
|
18
|
-
primary_700: "#
|
|
19
|
-
primary_800: "#
|
|
20
|
-
primary_900: "#
|
|
13
|
+
primary_25: "#F8FAFB",
|
|
14
|
+
primary_50: "#F8FAFB",
|
|
15
|
+
primary_100: "#D6E4FD",
|
|
16
|
+
primary_200: "#AEC8FC",
|
|
17
|
+
primary_300: "#85A8F8",
|
|
18
|
+
primary_400: "#658DF1",
|
|
19
|
+
primary_500: "#3563E9",
|
|
20
|
+
primary_600: "#264BC8",
|
|
21
|
+
primary_700: "#1A37A7",
|
|
22
|
+
primary_800: "#102587",
|
|
23
|
+
primary_900: "#0A196F",
|
|
21
24
|
// Success
|
|
22
|
-
positive_25: "#
|
|
23
|
-
positive_50: "#
|
|
24
|
-
positive_100: "#
|
|
25
|
-
positive_200: "#
|
|
26
|
-
positive_300: "#
|
|
27
|
-
positive_400: "#
|
|
28
|
-
positive_500: "#
|
|
29
|
-
positive_600: "#
|
|
30
|
-
positive_700: "#
|
|
31
|
-
positive_800: "#
|
|
32
|
-
positive_900: "#
|
|
33
|
-
positive_950: "#
|
|
34
|
-
positive_975: "#
|
|
25
|
+
positive_25: "#F0FDF4",
|
|
26
|
+
positive_50: "#F0FDF4",
|
|
27
|
+
positive_100: "#DCFCE7",
|
|
28
|
+
positive_200: "#BBF7D0",
|
|
29
|
+
positive_300: "#86EFAC",
|
|
30
|
+
positive_400: "#4ADE80",
|
|
31
|
+
positive_500: "#22C55E",
|
|
32
|
+
positive_600: "#16A34A",
|
|
33
|
+
positive_700: "#15803D",
|
|
34
|
+
positive_800: "#166534",
|
|
35
|
+
positive_900: "#14532D",
|
|
36
|
+
positive_950: "#0A2818",
|
|
37
|
+
positive_975: "#051C0F",
|
|
35
38
|
// Error
|
|
36
39
|
negative_25: "#FFF5F7",
|
|
37
|
-
negative_50: "#
|
|
38
|
-
negative_100: "#
|
|
39
|
-
negative_200: "#
|
|
40
|
-
negative_300: "#
|
|
41
|
-
negative_400: "#
|
|
42
|
-
negative_500: "#
|
|
43
|
-
negative_600: "#
|
|
44
|
-
negative_700: "#
|
|
45
|
-
negative_800: "#
|
|
40
|
+
negative_50: "#FFF5F7",
|
|
41
|
+
negative_100: "#FFE7D3",
|
|
42
|
+
negative_200: "#FFC8A6",
|
|
43
|
+
negative_300: "#FFA37A",
|
|
44
|
+
negative_400: "#FF7F59",
|
|
45
|
+
negative_500: "#FF4423",
|
|
46
|
+
negative_600: "#DB2719",
|
|
47
|
+
negative_700: "#B71112",
|
|
48
|
+
negative_800: "#930B16",
|
|
46
49
|
negative_900: "#7A0619",
|
|
47
|
-
negative_950: "#
|
|
50
|
+
negative_950: "#4D0410",
|
|
48
51
|
negative_975: "#30030D",
|
|
49
52
|
// Warning
|
|
50
|
-
warning_100: "#
|
|
51
|
-
warning_200: "#
|
|
52
|
-
warning_300: "#
|
|
53
|
-
warning_400: "#
|
|
54
|
-
warning_500: "#
|
|
55
|
-
warning_600: "#
|
|
56
|
-
warning_700: "#
|
|
57
|
-
warning_800: "#
|
|
58
|
-
warning_900: "#
|
|
53
|
+
warning_100: "#FFF8D7",
|
|
54
|
+
warning_200: "#FFEFB0",
|
|
55
|
+
warning_300: "#FFE488",
|
|
56
|
+
warning_400: "#FFD96B",
|
|
57
|
+
warning_500: "#FFC73A",
|
|
58
|
+
warning_600: "#DBA32A",
|
|
59
|
+
warning_700: "#B7821D",
|
|
60
|
+
warning_800: "#936312",
|
|
61
|
+
warning_900: "#7A4D0B",
|
|
59
62
|
// Info
|
|
60
|
-
info_100: "#
|
|
61
|
-
info_200: "#
|
|
62
|
-
info_300: "#
|
|
63
|
+
info_100: "#DCF3FF",
|
|
64
|
+
info_200: "#BAE5FF",
|
|
65
|
+
info_300: "#98D3FF",
|
|
63
66
|
info_400: "#7EC2FF",
|
|
64
|
-
info_500: "#
|
|
65
|
-
info_600: "#
|
|
66
|
-
info_700: "#
|
|
67
|
-
info_800: "#
|
|
68
|
-
info_900: "#
|
|
67
|
+
info_500: "#54A6FF",
|
|
68
|
+
info_600: "#3D81DB",
|
|
69
|
+
info_700: "#2A60B7",
|
|
70
|
+
info_800: "#1A4393",
|
|
71
|
+
info_900: "#102E7A",
|
|
69
72
|
// Secondary
|
|
70
|
-
secondary_100: "#
|
|
71
|
-
secondary_200: "#
|
|
72
|
-
secondary_300: "#
|
|
73
|
-
secondary_400: "#
|
|
74
|
-
secondary_500: "#
|
|
75
|
-
secondary_600: "#
|
|
76
|
-
secondary_700: "#
|
|
77
|
-
secondary_800: "#
|
|
78
|
-
secondary_900: "#
|
|
73
|
+
secondary_100: "#E0E9F4",
|
|
74
|
+
secondary_200: "#C3D4E9",
|
|
75
|
+
secondary_300: "#90A3BF",
|
|
76
|
+
secondary_400: "#596780",
|
|
77
|
+
secondary_500: "#1A202C",
|
|
78
|
+
secondary_600: "#131825",
|
|
79
|
+
secondary_700: "#0D121F",
|
|
80
|
+
secondary_800: "#080C19",
|
|
81
|
+
secondary_900: "#040815",
|
|
79
82
|
};
|
|
80
|
-
function invertPalette(palette) {
|
|
81
|
-
return {
|
|
82
|
-
white: palette.white,
|
|
83
|
-
black: palette.black,
|
|
84
|
-
like: palette.like,
|
|
85
|
-
primary_25: palette.primary_50,
|
|
86
|
-
primary_50: palette.primary_25,
|
|
87
|
-
primary_100: palette.primary_900,
|
|
88
|
-
primary_200: palette.primary_800,
|
|
89
|
-
primary_300: palette.primary_700,
|
|
90
|
-
primary_400: palette.primary_600,
|
|
91
|
-
primary_500: palette.primary_500,
|
|
92
|
-
primary_600: palette.primary_400,
|
|
93
|
-
primary_700: palette.primary_300,
|
|
94
|
-
primary_800: palette.primary_200,
|
|
95
|
-
primary_900: palette.primary_100,
|
|
96
|
-
positive_25: palette.positive_975,
|
|
97
|
-
positive_50: palette.positive_950,
|
|
98
|
-
positive_100: palette.positive_900,
|
|
99
|
-
positive_200: palette.positive_800,
|
|
100
|
-
positive_300: palette.positive_700,
|
|
101
|
-
positive_400: palette.positive_600,
|
|
102
|
-
positive_500: palette.positive_500,
|
|
103
|
-
positive_600: palette.positive_400,
|
|
104
|
-
positive_700: palette.positive_300,
|
|
105
|
-
positive_800: palette.positive_200,
|
|
106
|
-
positive_900: palette.positive_100,
|
|
107
|
-
positive_950: palette.positive_50,
|
|
108
|
-
positive_975: palette.positive_25,
|
|
109
|
-
negative_25: palette.negative_975,
|
|
110
|
-
negative_50: palette.negative_950,
|
|
111
|
-
negative_100: palette.negative_900,
|
|
112
|
-
negative_200: palette.negative_800,
|
|
113
|
-
negative_300: palette.negative_700,
|
|
114
|
-
negative_400: palette.negative_600,
|
|
115
|
-
negative_500: palette.negative_500,
|
|
116
|
-
negative_600: palette.negative_400,
|
|
117
|
-
negative_700: palette.negative_300,
|
|
118
|
-
negative_800: palette.negative_200,
|
|
119
|
-
negative_900: palette.negative_100,
|
|
120
|
-
negative_950: palette.negative_50,
|
|
121
|
-
negative_975: palette.negative_25,
|
|
122
|
-
// New scales invert
|
|
123
|
-
warning_100: palette.warning_900,
|
|
124
|
-
warning_200: palette.warning_800,
|
|
125
|
-
warning_300: palette.warning_700,
|
|
126
|
-
warning_400: palette.warning_600,
|
|
127
|
-
warning_500: palette.warning_500,
|
|
128
|
-
warning_600: palette.warning_400,
|
|
129
|
-
warning_700: palette.warning_300,
|
|
130
|
-
warning_800: palette.warning_200,
|
|
131
|
-
warning_900: palette.warning_100,
|
|
132
|
-
info_100: palette.info_900,
|
|
133
|
-
info_200: palette.info_800,
|
|
134
|
-
info_300: palette.info_700,
|
|
135
|
-
info_400: palette.info_600,
|
|
136
|
-
info_500: palette.info_500,
|
|
137
|
-
info_600: palette.info_400,
|
|
138
|
-
info_700: palette.info_300,
|
|
139
|
-
info_800: palette.info_200,
|
|
140
|
-
info_900: palette.info_100,
|
|
141
|
-
secondary_100: palette.secondary_900,
|
|
142
|
-
secondary_200: palette.secondary_800,
|
|
143
|
-
secondary_300: palette.secondary_700,
|
|
144
|
-
secondary_400: palette.secondary_600,
|
|
145
|
-
secondary_500: palette.secondary_500,
|
|
146
|
-
secondary_600: palette.secondary_400,
|
|
147
|
-
secondary_700: palette.secondary_300,
|
|
148
|
-
secondary_800: palette.secondary_200,
|
|
149
|
-
secondary_900: palette.secondary_100,
|
|
150
|
-
};
|
|
151
|
-
}
|
|
152
83
|
//# sourceMappingURL=palette.js.map
|
package/dist/palette.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"palette.js","sourceRoot":"","sources":["../src/palette.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"palette.js","sourceRoot":"","sources":["../src/palette.ts"],"names":[],"mappings":";;;AAiFa,QAAA,OAAO,GAAY;IAC9B,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,cAAc,EAAE,SAAS;IACzB,YAAY,EAAE,SAAS;IACvB,cAAc,EAAE,SAAS;IACzB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,SAAS;IAEpB,UAAU;IACV,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IAEtB,UAAU;IACV,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IAEvB,QAAQ;IACR,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IAEvB,UAAU;IACV,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IAEtB,OAAO;IACP,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IAEnB,YAAY;IACZ,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;CACzB,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export type ScaleSteps = {
|
|
2
|
+
100: string;
|
|
3
|
+
200: string;
|
|
4
|
+
300: string;
|
|
5
|
+
400: string;
|
|
6
|
+
500: string;
|
|
7
|
+
600: string;
|
|
8
|
+
700: string;
|
|
9
|
+
800: string;
|
|
10
|
+
900: string;
|
|
11
|
+
};
|
|
12
|
+
export type SemanticColors = {
|
|
13
|
+
primary: ScaleSteps;
|
|
14
|
+
success: ScaleSteps;
|
|
15
|
+
error: ScaleSteps;
|
|
16
|
+
warning: ScaleSteps;
|
|
17
|
+
info: ScaleSteps;
|
|
18
|
+
secondary: ScaleSteps;
|
|
19
|
+
};
|
|
20
|
+
export declare const semantic: SemanticColors;
|
|
21
|
+
//# sourceMappingURL=semantic.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"semantic.d.ts","sourceRoot":"","sources":["../src/semantic.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,UAAU,CAAC;IACpB,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,UAAU,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,UAAU,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,cAmEtB,CAAC"}
|