@sofya-ds/tokens 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/README.md +31 -0
- package/dist/index.cjs +625 -0
- package/dist/index.d.cts +149 -0
- package/dist/index.d.ts +149 -0
- package/dist/index.js +584 -0
- package/package.json +36 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
type DeepPartial<T> = {
|
|
2
|
+
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
|
|
3
|
+
};
|
|
4
|
+
type HexColor = `#${string}`;
|
|
5
|
+
interface SofyaColorScale {
|
|
6
|
+
background: string;
|
|
7
|
+
foreground: string;
|
|
8
|
+
card: string;
|
|
9
|
+
cardForeground: string;
|
|
10
|
+
popover: string;
|
|
11
|
+
popoverForeground: string;
|
|
12
|
+
primary: string;
|
|
13
|
+
primaryForeground: string;
|
|
14
|
+
secondary: string;
|
|
15
|
+
secondaryForeground: string;
|
|
16
|
+
muted: string;
|
|
17
|
+
mutedForeground: string;
|
|
18
|
+
accent: string;
|
|
19
|
+
accentForeground: string;
|
|
20
|
+
destructive: string;
|
|
21
|
+
destructiveForeground: string;
|
|
22
|
+
success: string;
|
|
23
|
+
successForeground: string;
|
|
24
|
+
warning: string;
|
|
25
|
+
warningForeground: string;
|
|
26
|
+
border: string;
|
|
27
|
+
input: string;
|
|
28
|
+
ring: string;
|
|
29
|
+
focus: string;
|
|
30
|
+
subtle: string;
|
|
31
|
+
buttonGradientFrom: string;
|
|
32
|
+
buttonGradientTo: string;
|
|
33
|
+
}
|
|
34
|
+
interface SofyaRadiusScale {
|
|
35
|
+
sm: string;
|
|
36
|
+
md: string;
|
|
37
|
+
lg: string;
|
|
38
|
+
xl: string;
|
|
39
|
+
full: string;
|
|
40
|
+
}
|
|
41
|
+
interface SofyaShadowScale {
|
|
42
|
+
sm: string;
|
|
43
|
+
md: string;
|
|
44
|
+
lg: string;
|
|
45
|
+
xl: string;
|
|
46
|
+
focus: string;
|
|
47
|
+
}
|
|
48
|
+
interface SofyaTypographyScale {
|
|
49
|
+
sans: string;
|
|
50
|
+
display: string;
|
|
51
|
+
mono: string;
|
|
52
|
+
}
|
|
53
|
+
declare const sofyaTextStyleNames: readonly ["h1", "h2", "h3", "h4", "body", "tiny"];
|
|
54
|
+
type SofyaTextStyleName = (typeof sofyaTextStyleNames)[number];
|
|
55
|
+
interface SofyaTextStyle {
|
|
56
|
+
fontFamily: string;
|
|
57
|
+
fontSize: string;
|
|
58
|
+
fontWeight: string;
|
|
59
|
+
lineHeight: string;
|
|
60
|
+
letterSpacing: string;
|
|
61
|
+
}
|
|
62
|
+
type SofyaResolvedTextStyle = SofyaTextStyle;
|
|
63
|
+
type SofyaTextStyleScale = Record<SofyaTextStyleName, SofyaTextStyle>;
|
|
64
|
+
declare const sofyaSurfaceNames: readonly ["card", "panel", "focus"];
|
|
65
|
+
type SofyaSurfaceName = (typeof sofyaSurfaceNames)[number];
|
|
66
|
+
interface SofyaSurfaceToken {
|
|
67
|
+
background: string;
|
|
68
|
+
borderColor: string;
|
|
69
|
+
borderWidth: string;
|
|
70
|
+
radius: string;
|
|
71
|
+
shadow: string;
|
|
72
|
+
}
|
|
73
|
+
type SofyaResolvedSurfaceToken = SofyaSurfaceToken;
|
|
74
|
+
type SofyaSurfaceScale = Record<SofyaSurfaceName, SofyaSurfaceToken>;
|
|
75
|
+
interface SofyaTheme {
|
|
76
|
+
name: string;
|
|
77
|
+
colors: SofyaColorScale;
|
|
78
|
+
radii: SofyaRadiusScale;
|
|
79
|
+
shadows: SofyaShadowScale;
|
|
80
|
+
typography: SofyaTypographyScale;
|
|
81
|
+
textStyles: SofyaTextStyleScale;
|
|
82
|
+
surfaces: SofyaSurfaceScale;
|
|
83
|
+
}
|
|
84
|
+
interface SofyaGradientToken {
|
|
85
|
+
angle: string;
|
|
86
|
+
from: HexColor;
|
|
87
|
+
via?: HexColor;
|
|
88
|
+
to: HexColor;
|
|
89
|
+
}
|
|
90
|
+
interface SofyaBrandPalette {
|
|
91
|
+
neutrals: {
|
|
92
|
+
50: HexColor;
|
|
93
|
+
100: HexColor;
|
|
94
|
+
200: HexColor;
|
|
95
|
+
600: HexColor;
|
|
96
|
+
700: HexColor;
|
|
97
|
+
800: HexColor;
|
|
98
|
+
900: HexColor;
|
|
99
|
+
};
|
|
100
|
+
tags: {
|
|
101
|
+
navy: HexColor;
|
|
102
|
+
blue: HexColor;
|
|
103
|
+
violet: HexColor;
|
|
104
|
+
magenta: HexColor;
|
|
105
|
+
red: HexColor;
|
|
106
|
+
brick: HexColor;
|
|
107
|
+
sand: HexColor;
|
|
108
|
+
green: HexColor;
|
|
109
|
+
};
|
|
110
|
+
agent: {
|
|
111
|
+
pink: HexColor;
|
|
112
|
+
sky: HexColor;
|
|
113
|
+
lavender: HexColor;
|
|
114
|
+
mint: HexColor;
|
|
115
|
+
green: HexColor;
|
|
116
|
+
};
|
|
117
|
+
gradients: {
|
|
118
|
+
brand: SofyaGradientToken;
|
|
119
|
+
ocean: SofyaGradientToken;
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
interface SofyaColorPalette {
|
|
123
|
+
neutrals: SofyaBrandPalette["neutrals"];
|
|
124
|
+
tags: SofyaBrandPalette["tags"];
|
|
125
|
+
agentCodes: SofyaBrandPalette["agent"];
|
|
126
|
+
gradients: SofyaBrandPalette["gradients"];
|
|
127
|
+
}
|
|
128
|
+
declare const sofyaBrandPalette: SofyaBrandPalette;
|
|
129
|
+
declare const sofyaColorPalette: SofyaColorPalette;
|
|
130
|
+
declare function hexToHslChannels(hex: string): string;
|
|
131
|
+
declare function gradientToCss(token: SofyaGradientToken): string;
|
|
132
|
+
declare function brandPaletteToCssVariables(palette?: SofyaBrandPalette): Record<string, string>;
|
|
133
|
+
declare const sofyaSemanticColorHex: Record<keyof SofyaColorScale, HexColor>;
|
|
134
|
+
declare const themePresets: {
|
|
135
|
+
sofya: SofyaTheme;
|
|
136
|
+
ocean: SofyaTheme;
|
|
137
|
+
midnight: SofyaTheme;
|
|
138
|
+
};
|
|
139
|
+
type ThemePresetName = keyof typeof themePresets;
|
|
140
|
+
declare const themePresetNames: ThemePresetName[];
|
|
141
|
+
declare const defaultTheme: SofyaTheme;
|
|
142
|
+
declare function resolveTextStyle(name: SofyaTextStyleName, theme?: SofyaTheme): SofyaResolvedTextStyle;
|
|
143
|
+
declare function resolveSurfaceToken(name: SofyaSurfaceName, theme?: SofyaTheme): SofyaResolvedSurfaceToken;
|
|
144
|
+
declare function mergeTheme(baseTheme: SofyaTheme, overrides?: DeepPartial<SofyaTheme>): SofyaTheme;
|
|
145
|
+
declare function resolveTheme(preset?: ThemePresetName | SofyaTheme, overrides?: DeepPartial<SofyaTheme>): SofyaTheme;
|
|
146
|
+
declare function themeToCssVariables(theme: SofyaTheme): Record<string, string>;
|
|
147
|
+
declare function createWhitelabelTheme(overrides: DeepPartial<SofyaTheme>, preset?: ThemePresetName | SofyaTheme): SofyaTheme;
|
|
148
|
+
|
|
149
|
+
export { type DeepPartial, type HexColor, type SofyaBrandPalette, type SofyaColorPalette, type SofyaColorScale, type SofyaGradientToken, type SofyaRadiusScale, type SofyaResolvedSurfaceToken, type SofyaResolvedTextStyle, type SofyaShadowScale, type SofyaSurfaceName, type SofyaSurfaceScale, type SofyaSurfaceToken, type SofyaTextStyle, type SofyaTextStyleName, type SofyaTextStyleScale, type SofyaTheme, type SofyaTypographyScale, type ThemePresetName, brandPaletteToCssVariables, createWhitelabelTheme, defaultTheme, gradientToCss, hexToHslChannels, mergeTheme, resolveSurfaceToken, resolveTextStyle, resolveTheme, sofyaBrandPalette, sofyaColorPalette, sofyaSemanticColorHex, sofyaSurfaceNames, sofyaTextStyleNames, themePresetNames, themePresets, themeToCssVariables };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
type DeepPartial<T> = {
|
|
2
|
+
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
|
|
3
|
+
};
|
|
4
|
+
type HexColor = `#${string}`;
|
|
5
|
+
interface SofyaColorScale {
|
|
6
|
+
background: string;
|
|
7
|
+
foreground: string;
|
|
8
|
+
card: string;
|
|
9
|
+
cardForeground: string;
|
|
10
|
+
popover: string;
|
|
11
|
+
popoverForeground: string;
|
|
12
|
+
primary: string;
|
|
13
|
+
primaryForeground: string;
|
|
14
|
+
secondary: string;
|
|
15
|
+
secondaryForeground: string;
|
|
16
|
+
muted: string;
|
|
17
|
+
mutedForeground: string;
|
|
18
|
+
accent: string;
|
|
19
|
+
accentForeground: string;
|
|
20
|
+
destructive: string;
|
|
21
|
+
destructiveForeground: string;
|
|
22
|
+
success: string;
|
|
23
|
+
successForeground: string;
|
|
24
|
+
warning: string;
|
|
25
|
+
warningForeground: string;
|
|
26
|
+
border: string;
|
|
27
|
+
input: string;
|
|
28
|
+
ring: string;
|
|
29
|
+
focus: string;
|
|
30
|
+
subtle: string;
|
|
31
|
+
buttonGradientFrom: string;
|
|
32
|
+
buttonGradientTo: string;
|
|
33
|
+
}
|
|
34
|
+
interface SofyaRadiusScale {
|
|
35
|
+
sm: string;
|
|
36
|
+
md: string;
|
|
37
|
+
lg: string;
|
|
38
|
+
xl: string;
|
|
39
|
+
full: string;
|
|
40
|
+
}
|
|
41
|
+
interface SofyaShadowScale {
|
|
42
|
+
sm: string;
|
|
43
|
+
md: string;
|
|
44
|
+
lg: string;
|
|
45
|
+
xl: string;
|
|
46
|
+
focus: string;
|
|
47
|
+
}
|
|
48
|
+
interface SofyaTypographyScale {
|
|
49
|
+
sans: string;
|
|
50
|
+
display: string;
|
|
51
|
+
mono: string;
|
|
52
|
+
}
|
|
53
|
+
declare const sofyaTextStyleNames: readonly ["h1", "h2", "h3", "h4", "body", "tiny"];
|
|
54
|
+
type SofyaTextStyleName = (typeof sofyaTextStyleNames)[number];
|
|
55
|
+
interface SofyaTextStyle {
|
|
56
|
+
fontFamily: string;
|
|
57
|
+
fontSize: string;
|
|
58
|
+
fontWeight: string;
|
|
59
|
+
lineHeight: string;
|
|
60
|
+
letterSpacing: string;
|
|
61
|
+
}
|
|
62
|
+
type SofyaResolvedTextStyle = SofyaTextStyle;
|
|
63
|
+
type SofyaTextStyleScale = Record<SofyaTextStyleName, SofyaTextStyle>;
|
|
64
|
+
declare const sofyaSurfaceNames: readonly ["card", "panel", "focus"];
|
|
65
|
+
type SofyaSurfaceName = (typeof sofyaSurfaceNames)[number];
|
|
66
|
+
interface SofyaSurfaceToken {
|
|
67
|
+
background: string;
|
|
68
|
+
borderColor: string;
|
|
69
|
+
borderWidth: string;
|
|
70
|
+
radius: string;
|
|
71
|
+
shadow: string;
|
|
72
|
+
}
|
|
73
|
+
type SofyaResolvedSurfaceToken = SofyaSurfaceToken;
|
|
74
|
+
type SofyaSurfaceScale = Record<SofyaSurfaceName, SofyaSurfaceToken>;
|
|
75
|
+
interface SofyaTheme {
|
|
76
|
+
name: string;
|
|
77
|
+
colors: SofyaColorScale;
|
|
78
|
+
radii: SofyaRadiusScale;
|
|
79
|
+
shadows: SofyaShadowScale;
|
|
80
|
+
typography: SofyaTypographyScale;
|
|
81
|
+
textStyles: SofyaTextStyleScale;
|
|
82
|
+
surfaces: SofyaSurfaceScale;
|
|
83
|
+
}
|
|
84
|
+
interface SofyaGradientToken {
|
|
85
|
+
angle: string;
|
|
86
|
+
from: HexColor;
|
|
87
|
+
via?: HexColor;
|
|
88
|
+
to: HexColor;
|
|
89
|
+
}
|
|
90
|
+
interface SofyaBrandPalette {
|
|
91
|
+
neutrals: {
|
|
92
|
+
50: HexColor;
|
|
93
|
+
100: HexColor;
|
|
94
|
+
200: HexColor;
|
|
95
|
+
600: HexColor;
|
|
96
|
+
700: HexColor;
|
|
97
|
+
800: HexColor;
|
|
98
|
+
900: HexColor;
|
|
99
|
+
};
|
|
100
|
+
tags: {
|
|
101
|
+
navy: HexColor;
|
|
102
|
+
blue: HexColor;
|
|
103
|
+
violet: HexColor;
|
|
104
|
+
magenta: HexColor;
|
|
105
|
+
red: HexColor;
|
|
106
|
+
brick: HexColor;
|
|
107
|
+
sand: HexColor;
|
|
108
|
+
green: HexColor;
|
|
109
|
+
};
|
|
110
|
+
agent: {
|
|
111
|
+
pink: HexColor;
|
|
112
|
+
sky: HexColor;
|
|
113
|
+
lavender: HexColor;
|
|
114
|
+
mint: HexColor;
|
|
115
|
+
green: HexColor;
|
|
116
|
+
};
|
|
117
|
+
gradients: {
|
|
118
|
+
brand: SofyaGradientToken;
|
|
119
|
+
ocean: SofyaGradientToken;
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
interface SofyaColorPalette {
|
|
123
|
+
neutrals: SofyaBrandPalette["neutrals"];
|
|
124
|
+
tags: SofyaBrandPalette["tags"];
|
|
125
|
+
agentCodes: SofyaBrandPalette["agent"];
|
|
126
|
+
gradients: SofyaBrandPalette["gradients"];
|
|
127
|
+
}
|
|
128
|
+
declare const sofyaBrandPalette: SofyaBrandPalette;
|
|
129
|
+
declare const sofyaColorPalette: SofyaColorPalette;
|
|
130
|
+
declare function hexToHslChannels(hex: string): string;
|
|
131
|
+
declare function gradientToCss(token: SofyaGradientToken): string;
|
|
132
|
+
declare function brandPaletteToCssVariables(palette?: SofyaBrandPalette): Record<string, string>;
|
|
133
|
+
declare const sofyaSemanticColorHex: Record<keyof SofyaColorScale, HexColor>;
|
|
134
|
+
declare const themePresets: {
|
|
135
|
+
sofya: SofyaTheme;
|
|
136
|
+
ocean: SofyaTheme;
|
|
137
|
+
midnight: SofyaTheme;
|
|
138
|
+
};
|
|
139
|
+
type ThemePresetName = keyof typeof themePresets;
|
|
140
|
+
declare const themePresetNames: ThemePresetName[];
|
|
141
|
+
declare const defaultTheme: SofyaTheme;
|
|
142
|
+
declare function resolveTextStyle(name: SofyaTextStyleName, theme?: SofyaTheme): SofyaResolvedTextStyle;
|
|
143
|
+
declare function resolveSurfaceToken(name: SofyaSurfaceName, theme?: SofyaTheme): SofyaResolvedSurfaceToken;
|
|
144
|
+
declare function mergeTheme(baseTheme: SofyaTheme, overrides?: DeepPartial<SofyaTheme>): SofyaTheme;
|
|
145
|
+
declare function resolveTheme(preset?: ThemePresetName | SofyaTheme, overrides?: DeepPartial<SofyaTheme>): SofyaTheme;
|
|
146
|
+
declare function themeToCssVariables(theme: SofyaTheme): Record<string, string>;
|
|
147
|
+
declare function createWhitelabelTheme(overrides: DeepPartial<SofyaTheme>, preset?: ThemePresetName | SofyaTheme): SofyaTheme;
|
|
148
|
+
|
|
149
|
+
export { type DeepPartial, type HexColor, type SofyaBrandPalette, type SofyaColorPalette, type SofyaColorScale, type SofyaGradientToken, type SofyaRadiusScale, type SofyaResolvedSurfaceToken, type SofyaResolvedTextStyle, type SofyaShadowScale, type SofyaSurfaceName, type SofyaSurfaceScale, type SofyaSurfaceToken, type SofyaTextStyle, type SofyaTextStyleName, type SofyaTextStyleScale, type SofyaTheme, type SofyaTypographyScale, type ThemePresetName, brandPaletteToCssVariables, createWhitelabelTheme, defaultTheme, gradientToCss, hexToHslChannels, mergeTheme, resolveSurfaceToken, resolveTextStyle, resolveTheme, sofyaBrandPalette, sofyaColorPalette, sofyaSemanticColorHex, sofyaSurfaceNames, sofyaTextStyleNames, themePresetNames, themePresets, themeToCssVariables };
|