@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/dist/themes.js DELETED
@@ -1,191 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.themes = void 0;
4
- exports.createTheme = createTheme;
5
- exports.createThemes = createThemes;
6
- const atoms_1 = require("./atoms");
7
- const alpha_1 = require("./utils/alpha");
8
- const palette_1 = require("./palette");
9
- exports.themes = createThemes({
10
- defaultPalette: palette_1.DEFAULT_PALETTE,
11
- });
12
- function buildDefaultSemantic(palette) {
13
- return {
14
- primary: {
15
- 100: palette.primary_100,
16
- 200: palette.primary_200,
17
- 300: palette.primary_300,
18
- 400: palette.primary_400,
19
- 500: palette.primary_500,
20
- 600: palette.primary_600,
21
- 700: palette.primary_700,
22
- 800: palette.primary_800,
23
- 900: palette.primary_900,
24
- },
25
- success: {
26
- 100: palette.positive_100,
27
- 200: palette.positive_200,
28
- 300: palette.positive_300,
29
- 400: palette.positive_400,
30
- 500: palette.positive_500,
31
- 600: palette.positive_600,
32
- 700: palette.positive_700,
33
- 800: palette.positive_800,
34
- 900: palette.positive_900,
35
- },
36
- error: {
37
- 100: palette.negative_100,
38
- 200: palette.negative_200,
39
- 300: palette.negative_300,
40
- 400: palette.negative_400,
41
- 500: palette.negative_500,
42
- 600: palette.negative_600,
43
- 700: palette.negative_700,
44
- 800: palette.negative_800,
45
- 900: palette.negative_900,
46
- },
47
- warning: {
48
- 100: palette.warning_100,
49
- 200: palette.warning_200,
50
- 300: palette.warning_300,
51
- 400: palette.warning_400,
52
- 500: palette.warning_500,
53
- 600: palette.warning_600,
54
- 700: palette.warning_700,
55
- 800: palette.warning_800,
56
- 900: palette.warning_900,
57
- },
58
- info: {
59
- 100: palette.info_100,
60
- 200: palette.info_200,
61
- 300: palette.info_300,
62
- 400: palette.info_400,
63
- 500: palette.info_500,
64
- 600: palette.info_600,
65
- 700: palette.info_700,
66
- 800: palette.info_800,
67
- 900: palette.info_900,
68
- },
69
- secondary: {
70
- 100: palette.secondary_100,
71
- 200: palette.secondary_200,
72
- 300: palette.secondary_300,
73
- 400: palette.secondary_400,
74
- 500: palette.secondary_500,
75
- 600: palette.secondary_600,
76
- 700: palette.secondary_700,
77
- 800: palette.secondary_800,
78
- 900: palette.secondary_900,
79
- },
80
- };
81
- }
82
- function createTheme({ scheme, name, palette, options = {}, }) {
83
- const shadowOpacity = options.shadowOpacity ?? 0.1;
84
- const shadowColor = (0, alpha_1.alpha)(palette.black, shadowOpacity);
85
- const baseSemantic = buildDefaultSemantic(palette);
86
- const semantic = {
87
- ...baseSemantic,
88
- ...options.semanticOverrides,
89
- };
90
- return {
91
- scheme,
92
- name,
93
- palette,
94
- semantic,
95
- atoms: {
96
- // Base text colors using primary neutral (scheme-dependent)
97
- text: {
98
- color: scheme === "light" ? palette.primary_900 : palette.white,
99
- },
100
- text_low: {
101
- color: scheme === "light" ? palette.primary_400 : palette.primary_300,
102
- },
103
- text_medium: {
104
- color: scheme === "light" ? palette.primary_700 : palette.primary_200,
105
- },
106
- text_high: {
107
- color: scheme === "light" ? palette.primary_900 : palette.primary_100,
108
- },
109
- text_inverted: {
110
- color: scheme === "light" ? palette.white : palette.primary_900,
111
- },
112
- // Base backgrounds using primary neutral
113
- bg: {
114
- backgroundColor: scheme === "light" ? palette.white : palette.primary_900,
115
- },
116
- bg_25: {
117
- backgroundColor: scheme === "light" ? palette.primary_25 : palette.primary_800,
118
- },
119
- bg_50: {
120
- backgroundColor: scheme === "light" ? palette.primary_50 : palette.primary_700,
121
- },
122
- // Base borders using primary neutral
123
- border_low: {
124
- borderColor: scheme === "light" ? palette.primary_100 : palette.primary_700,
125
- },
126
- border_medium: {
127
- borderColor: scheme === "light" ? palette.primary_200 : palette.primary_600,
128
- },
129
- border_high: {
130
- borderColor: scheme === "light" ? palette.primary_300 : palette.primary_500,
131
- },
132
- // Semantic text atoms (900 for text)
133
- text_primary: { color: semantic.primary[900] },
134
- text_success: { color: semantic.success[900] },
135
- text_error: { color: semantic.error[900] },
136
- text_warning: { color: semantic.warning[900] },
137
- text_info: { color: semantic.info[900] },
138
- text_secondary: { color: semantic.secondary[900] },
139
- // Semantic background atoms (500 for bg)
140
- bg_primary: { backgroundColor: semantic.primary[500] },
141
- bg_success: { backgroundColor: semantic.success[500] },
142
- bg_error: { backgroundColor: semantic.error[500] },
143
- bg_warning: { backgroundColor: semantic.warning[500] },
144
- bg_info: { backgroundColor: semantic.info[500] },
145
- bg_secondary: { backgroundColor: semantic.secondary[500] },
146
- // Semantic border atoms (300 for border)
147
- border_primary: { borderColor: semantic.primary[300] },
148
- border_success: { borderColor: semantic.success[300] },
149
- border_error: { borderColor: semantic.error[300] },
150
- border_warning: { borderColor: semantic.warning[300] },
151
- border_info: { borderColor: semantic.info[300] },
152
- border_secondary: { borderColor: semantic.secondary[300] },
153
- // Shadows
154
- shadow_sm: {
155
- ...atoms_1.atoms.shadow_sm,
156
- shadowColor: palette.black,
157
- boxShadow: `0 4px 6px -1px ${shadowColor}, 0 2px 4px -2px ${shadowColor}`,
158
- },
159
- shadow_md: {
160
- ...atoms_1.atoms.shadow_md,
161
- shadowColor: palette.black,
162
- boxShadow: `0 10px 15px -3px ${shadowColor}, 0 4px 6px -4px ${shadowColor}`,
163
- },
164
- shadow_lg: {
165
- ...atoms_1.atoms.shadow_lg,
166
- shadowColor: palette.black,
167
- boxShadow: `0 20px 25px -5px ${shadowColor}, 0 8px 10px -6px ${shadowColor}`,
168
- },
169
- },
170
- };
171
- }
172
- function createThemes({ defaultPalette }) {
173
- const light = createTheme({
174
- scheme: "light",
175
- name: "light",
176
- palette: defaultPalette,
177
- });
178
- const dark = createTheme({
179
- scheme: "dark",
180
- name: "dark",
181
- palette: (0, palette_1.invertPalette)(defaultPalette),
182
- options: {
183
- shadowOpacity: 0.4,
184
- },
185
- });
186
- return {
187
- light,
188
- dark,
189
- };
190
- }
191
- //# sourceMappingURL=themes.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"themes.js","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":";;;AAiMA,kCAkHC;AAED,oCAsBC;AA3UD,mCAAgC;AAChC,yCAAsC;AAEtC,uCAAoE;AAGvD,QAAA,MAAM,GAAG,YAAY,CAAC;IACjC,cAAc,EAAE,yBAAe;CAChC,CAAC,CAAC;AAkHH,SAAS,oBAAoB,CAAC,OAAgB;IAC5C,OAAO;QACL,OAAO,EAAE;YACP,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;SACzB;QACD,OAAO,EAAE;YACP,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;SAC1B;QACD,KAAK,EAAE;YACL,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;YACzB,GAAG,EAAE,OAAO,CAAC,YAAY;SAC1B;QACD,OAAO,EAAE;YACP,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;YACxB,GAAG,EAAE,OAAO,CAAC,WAAW;SACzB;QACD,IAAI,EAAE;YACJ,GAAG,EAAE,OAAO,CAAC,QAAQ;YACrB,GAAG,EAAE,OAAO,CAAC,QAAQ;YACrB,GAAG,EAAE,OAAO,CAAC,QAAQ;YACrB,GAAG,EAAE,OAAO,CAAC,QAAQ;YACrB,GAAG,EAAE,OAAO,CAAC,QAAQ;YACrB,GAAG,EAAE,OAAO,CAAC,QAAQ;YACrB,GAAG,EAAE,OAAO,CAAC,QAAQ;YACrB,GAAG,EAAE,OAAO,CAAC,QAAQ;YACrB,GAAG,EAAE,OAAO,CAAC,QAAQ;SACtB;QACD,SAAS,EAAE;YACT,GAAG,EAAE,OAAO,CAAC,aAAa;YAC1B,GAAG,EAAE,OAAO,CAAC,aAAa;YAC1B,GAAG,EAAE,OAAO,CAAC,aAAa;YAC1B,GAAG,EAAE,OAAO,CAAC,aAAa;YAC1B,GAAG,EAAE,OAAO,CAAC,aAAa;YAC1B,GAAG,EAAE,OAAO,CAAC,aAAa;YAC1B,GAAG,EAAE,OAAO,CAAC,aAAa;YAC1B,GAAG,EAAE,OAAO,CAAC,aAAa;YAC1B,GAAG,EAAE,OAAO,CAAC,aAAa;SAC3B;KACF,CAAC;AACJ,CAAC;AAED,SAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,IAAI,EACJ,OAAO,EACP,OAAO,GAAG,EAAE,GASb;IACC,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,IAAI,GAAG,CAAC;IACnD,MAAM,WAAW,GAAG,IAAA,aAAK,EAAC,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACxD,MAAM,YAAY,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAmB;QAC/B,GAAG,YAAY;QACf,GAAG,OAAO,CAAC,iBAAiB;KACX,CAAC;IACpB,OAAO;QACL,MAAM;QACN,IAAI;QACJ,OAAO;QACP,QAAQ;QACR,KAAK,EAAE;YACL,4DAA4D;YAC5D,IAAI,EAAE;gBACJ,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK;aAChE;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW;aACtE;YACD,WAAW,EAAE;gBACX,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW;aACtE;YACD,SAAS,EAAE;gBACT,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW;aACtE;YACD,aAAa,EAAE;gBACb,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW;aAChE;YAED,yCAAyC;YACzC,EAAE,EAAE;gBACF,eAAe,EACb,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW;aAC3D;YACD,KAAK,EAAE;gBACL,eAAe,EACb,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW;aAChE;YACD,KAAK,EAAE;gBACL,eAAe,EACb,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW;aAChE;YAED,qCAAqC;YACrC,UAAU,EAAE;gBACV,WAAW,EACT,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW;aACjE;YACD,aAAa,EAAE;gBACb,WAAW,EACT,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW;aACjE;YACD,WAAW,EAAE;gBACX,WAAW,EACT,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW;aACjE;YAED,qCAAqC;YACrC,YAAY,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,YAAY,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,UAAU,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YAC1C,YAAY,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,SAAS,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;YACxC,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;YAElD,yCAAyC;YACzC,UAAU,EAAE,EAAE,eAAe,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACtD,UAAU,EAAE,EAAE,eAAe,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACtD,QAAQ,EAAE,EAAE,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YAClD,UAAU,EAAE,EAAE,eAAe,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACtD,OAAO,EAAE,EAAE,eAAe,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;YAChD,YAAY,EAAE,EAAE,eAAe,EAAE,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;YAE1D,yCAAyC;YACzC,cAAc,EAAE,EAAE,WAAW,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACtD,cAAc,EAAE,EAAE,WAAW,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACtD,YAAY,EAAE,EAAE,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YAClD,cAAc,EAAE,EAAE,WAAW,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACtD,WAAW,EAAE,EAAE,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;YAChD,gBAAgB,EAAE,EAAE,WAAW,EAAE,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;YAE1D,UAAU;YACV,SAAS,EAAE;gBACT,GAAG,aAAK,CAAC,SAAS;gBAClB,WAAW,EAAE,OAAO,CAAC,KAAK;gBAC1B,SAAS,EAAE,kBAAkB,WAAW,oBAAoB,WAAW,EAAE;aAC1E;YACD,SAAS,EAAE;gBACT,GAAG,aAAK,CAAC,SAAS;gBAClB,WAAW,EAAE,OAAO,CAAC,KAAK;gBAC1B,SAAS,EAAE,oBAAoB,WAAW,oBAAoB,WAAW,EAAE;aAC5E;YACD,SAAS,EAAE;gBACT,GAAG,aAAK,CAAC,SAAS;gBAClB,WAAW,EAAE,OAAO,CAAC,KAAK;gBAC1B,SAAS,EAAE,oBAAoB,WAAW,qBAAqB,WAAW,EAAE;aAC7E;SACF;KACF,CAAC;AACJ,CAAC;AAED,SAAgB,YAAY,CAAC,EAAE,cAAc,EAA+B;IAI1E,MAAM,KAAK,GAAG,WAAW,CAAC;QACxB,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,cAAc;KACxB,CAAC,CAAC;IACH,MAAM,IAAI,GAAG,WAAW,CAAC;QACvB,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,IAAA,uBAAa,EAAC,cAAc,CAAC;QACtC,OAAO,EAAE;YACP,aAAa,EAAE,GAAG;SACnB;KACF,CAAC,CAAC;IAEH,OAAO;QACL,KAAK;QACL,IAAI;KACL,CAAC;AACJ,CAAC"}
@@ -1,7 +0,0 @@
1
- import { type ThemeName } from "../themes";
2
- export declare function select<T>(name: ThemeName, options: (Record<ThemeName, T> & {
3
- default?: undefined;
4
- }) | (Partial<Record<ThemeName, T>> & {
5
- default: T;
6
- })): T;
7
- //# sourceMappingURL=select.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/utils/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C,wBAAgB,MAAM,CAAC,CAAC,EACtB,IAAI,EAAE,SAAS,EACf,OAAO,EACH,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,GAChD,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,GAAG;IAAE,OAAO,EAAE,CAAC,CAAA;CAAE,CAAC,GACnD,CAAC,CASH"}
@@ -1,14 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.select = select;
4
- function select(name, options) {
5
- switch (name) {
6
- case "light":
7
- return options.light;
8
- case "dark":
9
- return options.dark;
10
- default:
11
- return options.default;
12
- }
13
- }
14
- //# sourceMappingURL=select.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/utils/select.ts"],"names":[],"mappings":";;AAEA,wBAcC;AAdD,SAAgB,MAAM,CACpB,IAAe,EACf,OAEoD;IAEpD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,OAAO,OAAO,CAAC,KAAU,CAAC;QAC5B,KAAK,MAAM;YACT,OAAO,OAAO,CAAC,IAAS,CAAC;QAC3B;YACE,OAAO,OAAO,CAAC,OAAY,CAAC;IAChC,CAAC;AACH,CAAC"}
package/src/themes.ts DELETED
@@ -1,332 +0,0 @@
1
- import { atoms } from "./atoms";
2
- import { alpha } from "./utils/alpha";
3
-
4
- import { Palette, DEFAULT_PALETTE, invertPalette } from "./palette";
5
- import { type ShadowStyle } from "./atoms/types";
6
-
7
- export const themes = createThemes({
8
- defaultPalette: DEFAULT_PALETTE,
9
- });
10
-
11
- export type ThemeAtoms = {
12
- // Base text colors (using primary neutral scale)
13
- text: {
14
- color: string;
15
- };
16
- text_low: {
17
- color: string;
18
- };
19
- text_medium: {
20
- color: string;
21
- };
22
- text_high: {
23
- color: string;
24
- };
25
- text_inverted: {
26
- color: string;
27
- };
28
-
29
- // Base backgrounds (using primary neutral scale)
30
- bg: {
31
- backgroundColor: string;
32
- };
33
- bg_25: {
34
- backgroundColor: string;
35
- };
36
- bg_50: {
37
- backgroundColor: string;
38
- };
39
-
40
- // Base borders (using primary neutral scale)
41
- border_low: {
42
- borderColor: string;
43
- };
44
- border_medium: {
45
- borderColor: string;
46
- };
47
- border_high: {
48
- borderColor: string;
49
- };
50
-
51
- // Semantic text atoms
52
- text_primary: { color: string };
53
- text_success: { color: string };
54
- text_error: { color: string };
55
- text_warning: { color: string };
56
- text_info: { color: string };
57
- text_secondary: { color: string };
58
-
59
- // Semantic background atoms
60
- bg_primary: { backgroundColor: string };
61
- bg_success: { backgroundColor: string };
62
- bg_error: { backgroundColor: string };
63
- bg_warning: { backgroundColor: string };
64
- bg_info: { backgroundColor: string };
65
- bg_secondary: { backgroundColor: string };
66
-
67
- // Semantic border atoms
68
- border_primary: { borderColor: string };
69
- border_success: { borderColor: string };
70
- border_error: { borderColor: string };
71
- border_warning: { borderColor: string };
72
- border_info: { borderColor: string };
73
- border_secondary: { borderColor: string };
74
-
75
- // Shadows
76
- shadow_sm: ShadowStyle;
77
- shadow_md: ShadowStyle;
78
- shadow_lg: ShadowStyle;
79
- };
80
-
81
- /**
82
- * Categorical representation of the theme
83
- */
84
- export type ThemeScheme = "light" | "dark";
85
-
86
- /**
87
- * Specific theme name, including low-contrast variants
88
- */
89
- export type ThemeName = "light" | "dark";
90
-
91
- /**
92
- * A theme object, containing the color palette and atoms for the theme
93
- */
94
- export type Theme = {
95
- scheme: ThemeScheme;
96
- name: ThemeName;
97
- palette: Palette;
98
- semantic: SemanticColors;
99
- atoms: ThemeAtoms;
100
- };
101
-
102
- export type ScaleSteps = {
103
- 100: string;
104
- 200: string;
105
- 300: string;
106
- 400: string;
107
- 500: string;
108
- 600: string;
109
- 700: string;
110
- 800: string;
111
- 900: string;
112
- };
113
-
114
- export type SemanticColors = {
115
- primary: ScaleSteps;
116
- success: ScaleSteps;
117
- error: ScaleSteps;
118
- warning: ScaleSteps;
119
- info: ScaleSteps;
120
- secondary: ScaleSteps;
121
- };
122
-
123
- function buildDefaultSemantic(palette: Palette): SemanticColors {
124
- return {
125
- primary: {
126
- 100: palette.primary_100,
127
- 200: palette.primary_200,
128
- 300: palette.primary_300,
129
- 400: palette.primary_400,
130
- 500: palette.primary_500,
131
- 600: palette.primary_600,
132
- 700: palette.primary_700,
133
- 800: palette.primary_800,
134
- 900: palette.primary_900,
135
- },
136
- success: {
137
- 100: palette.positive_100,
138
- 200: palette.positive_200,
139
- 300: palette.positive_300,
140
- 400: palette.positive_400,
141
- 500: palette.positive_500,
142
- 600: palette.positive_600,
143
- 700: palette.positive_700,
144
- 800: palette.positive_800,
145
- 900: palette.positive_900,
146
- },
147
- error: {
148
- 100: palette.negative_100,
149
- 200: palette.negative_200,
150
- 300: palette.negative_300,
151
- 400: palette.negative_400,
152
- 500: palette.negative_500,
153
- 600: palette.negative_600,
154
- 700: palette.negative_700,
155
- 800: palette.negative_800,
156
- 900: palette.negative_900,
157
- },
158
- warning: {
159
- 100: palette.warning_100,
160
- 200: palette.warning_200,
161
- 300: palette.warning_300,
162
- 400: palette.warning_400,
163
- 500: palette.warning_500,
164
- 600: palette.warning_600,
165
- 700: palette.warning_700,
166
- 800: palette.warning_800,
167
- 900: palette.warning_900,
168
- },
169
- info: {
170
- 100: palette.info_100,
171
- 200: palette.info_200,
172
- 300: palette.info_300,
173
- 400: palette.info_400,
174
- 500: palette.info_500,
175
- 600: palette.info_600,
176
- 700: palette.info_700,
177
- 800: palette.info_800,
178
- 900: palette.info_900,
179
- },
180
- secondary: {
181
- 100: palette.secondary_100,
182
- 200: palette.secondary_200,
183
- 300: palette.secondary_300,
184
- 400: palette.secondary_400,
185
- 500: palette.secondary_500,
186
- 600: palette.secondary_600,
187
- 700: palette.secondary_700,
188
- 800: palette.secondary_800,
189
- 900: palette.secondary_900,
190
- },
191
- };
192
- }
193
-
194
- export function createTheme({
195
- scheme,
196
- name,
197
- palette,
198
- options = {},
199
- }: {
200
- scheme: ThemeScheme;
201
- name: ThemeName;
202
- palette: Palette;
203
- options?: {
204
- shadowOpacity?: number;
205
- semanticOverrides?: Partial<SemanticColors>;
206
- };
207
- }): Theme {
208
- const shadowOpacity = options.shadowOpacity ?? 0.1;
209
- const shadowColor = alpha(palette.black, shadowOpacity);
210
- const baseSemantic = buildDefaultSemantic(palette);
211
- const semantic: SemanticColors = {
212
- ...baseSemantic,
213
- ...options.semanticOverrides,
214
- } as SemanticColors;
215
- return {
216
- scheme,
217
- name,
218
- palette,
219
- semantic,
220
- atoms: {
221
- // Base text colors using primary neutral (scheme-dependent)
222
- text: {
223
- color: scheme === "light" ? palette.primary_900 : palette.white,
224
- },
225
- text_low: {
226
- color: scheme === "light" ? palette.primary_400 : palette.primary_300,
227
- },
228
- text_medium: {
229
- color: scheme === "light" ? palette.primary_700 : palette.primary_200,
230
- },
231
- text_high: {
232
- color: scheme === "light" ? palette.primary_900 : palette.primary_100,
233
- },
234
- text_inverted: {
235
- color: scheme === "light" ? palette.white : palette.primary_900,
236
- },
237
-
238
- // Base backgrounds using primary neutral
239
- bg: {
240
- backgroundColor:
241
- scheme === "light" ? palette.white : palette.primary_900,
242
- },
243
- bg_25: {
244
- backgroundColor:
245
- scheme === "light" ? palette.primary_25 : palette.primary_800,
246
- },
247
- bg_50: {
248
- backgroundColor:
249
- scheme === "light" ? palette.primary_50 : palette.primary_700,
250
- },
251
-
252
- // Base borders using primary neutral
253
- border_low: {
254
- borderColor:
255
- scheme === "light" ? palette.primary_100 : palette.primary_700,
256
- },
257
- border_medium: {
258
- borderColor:
259
- scheme === "light" ? palette.primary_200 : palette.primary_600,
260
- },
261
- border_high: {
262
- borderColor:
263
- scheme === "light" ? palette.primary_300 : palette.primary_500,
264
- },
265
-
266
- // Semantic text atoms (900 for text)
267
- text_primary: { color: semantic.primary[900] },
268
- text_success: { color: semantic.success[900] },
269
- text_error: { color: semantic.error[900] },
270
- text_warning: { color: semantic.warning[900] },
271
- text_info: { color: semantic.info[900] },
272
- text_secondary: { color: semantic.secondary[900] },
273
-
274
- // Semantic background atoms (500 for bg)
275
- bg_primary: { backgroundColor: semantic.primary[500] },
276
- bg_success: { backgroundColor: semantic.success[500] },
277
- bg_error: { backgroundColor: semantic.error[500] },
278
- bg_warning: { backgroundColor: semantic.warning[500] },
279
- bg_info: { backgroundColor: semantic.info[500] },
280
- bg_secondary: { backgroundColor: semantic.secondary[500] },
281
-
282
- // Semantic border atoms (300 for border)
283
- border_primary: { borderColor: semantic.primary[300] },
284
- border_success: { borderColor: semantic.success[300] },
285
- border_error: { borderColor: semantic.error[300] },
286
- border_warning: { borderColor: semantic.warning[300] },
287
- border_info: { borderColor: semantic.info[300] },
288
- border_secondary: { borderColor: semantic.secondary[300] },
289
-
290
- // Shadows
291
- shadow_sm: {
292
- ...atoms.shadow_sm,
293
- shadowColor: palette.black,
294
- boxShadow: `0 4px 6px -1px ${shadowColor}, 0 2px 4px -2px ${shadowColor}`,
295
- },
296
- shadow_md: {
297
- ...atoms.shadow_md,
298
- shadowColor: palette.black,
299
- boxShadow: `0 10px 15px -3px ${shadowColor}, 0 4px 6px -4px ${shadowColor}`,
300
- },
301
- shadow_lg: {
302
- ...atoms.shadow_lg,
303
- shadowColor: palette.black,
304
- boxShadow: `0 20px 25px -5px ${shadowColor}, 0 8px 10px -6px ${shadowColor}`,
305
- },
306
- },
307
- };
308
- }
309
-
310
- export function createThemes({ defaultPalette }: { defaultPalette: Palette }): {
311
- light: Theme;
312
- dark: Theme;
313
- } {
314
- const light = createTheme({
315
- scheme: "light",
316
- name: "light",
317
- palette: defaultPalette,
318
- });
319
- const dark = createTheme({
320
- scheme: "dark",
321
- name: "dark",
322
- palette: invertPalette(defaultPalette),
323
- options: {
324
- shadowOpacity: 0.4,
325
- },
326
- });
327
-
328
- return {
329
- light,
330
- dark,
331
- };
332
- }
@@ -1,17 +0,0 @@
1
- import { type ThemeName } from "../themes";
2
-
3
- export function select<T>(
4
- name: ThemeName,
5
- options:
6
- | (Record<ThemeName, T> & { default?: undefined })
7
- | (Partial<Record<ThemeName, T>> & { default: T })
8
- ): T {
9
- switch (name) {
10
- case "light":
11
- return options.light as T;
12
- case "dark":
13
- return options.dark as T;
14
- default:
15
- return options.default as T;
16
- }
17
- }