@akinon/ui-theme 1.0.2 → 1.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.
Files changed (21) hide show
  1. package/dist/cjs/colors.d.ts +3 -0
  2. package/dist/cjs/colors.d.ts.map +1 -1
  3. package/dist/cjs/colors.js +3 -0
  4. package/dist/cjs/index.d.ts +1 -1
  5. package/dist/cjs/index.d.ts.map +1 -1
  6. package/dist/cjs/index.js +0 -1
  7. package/dist/cjs/theme.d.ts +1 -1
  8. package/dist/cjs/theme.d.ts.map +1 -1
  9. package/dist/cjs/theme.js +31 -75
  10. package/dist/cjs/types.d.ts +6 -71
  11. package/dist/esm/colors.d.ts +3 -0
  12. package/dist/esm/colors.d.ts.map +1 -1
  13. package/dist/esm/colors.js +3 -0
  14. package/dist/esm/index.d.ts +1 -1
  15. package/dist/esm/index.d.ts.map +1 -1
  16. package/dist/esm/index.js +0 -1
  17. package/dist/esm/theme.d.ts +1 -1
  18. package/dist/esm/theme.d.ts.map +1 -1
  19. package/dist/esm/theme.js +31 -75
  20. package/dist/esm/types.d.ts +6 -71
  21. package/package.json +7 -7
package/dist/cjs/colors.d.ts CHANGED
@@ -50,6 +50,7 @@ export declare const ebonyClay: {
50
50
  };
51
51
  export declare const gray: {
52
52
  '100': string;
53
+ '100-50': string;
53
54
  '150': string;
54
55
  '200': string;
55
56
  '250': string;
@@ -155,11 +156,13 @@ export declare const pink: {
155
156
  };
156
157
  export declare const azure: {
157
158
  '50': string;
159
+ '90': string;
158
160
  '100': string;
159
161
  '200': string;
160
162
  '300': string;
161
163
  '400': string;
162
164
  '500': string;
165
+ '500-20': string;
163
166
  '600': string;
164
167
  '700': string;
165
168
  '800': string;
package/dist/cjs/colors.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;CAsBnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;CAgBhB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;CAiBf,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;CAkBjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAqBhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAelB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAGF,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYjB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;CAkBlB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC"}
1
+ {"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;CAsBnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;CAiBhB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;CAiBf,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;CAkBjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAqBhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAelB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAGF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;CAcjB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;CAkBlB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC"}
package/dist/cjs/colors.js CHANGED
@@ -54,6 +54,7 @@ exports.ebonyClay = {
54
54
  };
55
55
  exports.gray = {
56
56
  '100': '#f5f5f5',
57
+ '100-50': '#f5f5f580',
57
58
  '150': '#e9f0f7',
58
59
  '200': '#e5e5e5',
59
60
  '250': '#d4d6f0',
@@ -160,11 +161,13 @@ exports.pink = {
160
161
  // This will be our main primary.
161
162
  exports.azure = {
162
163
  '50': '#eef5ff',
164
+ '90': '#dae6ff',
163
165
  '100': '#d9e8ff',
164
166
  '200': '#bcd8ff',
165
167
  '300': '#8ec0ff',
166
168
  '400': '#599cff',
167
169
  '500': '#4482ff', // applied from design: primary button color
170
+ '500-20': '#4482ff33',
168
171
  '600': '#1b55f5',
169
172
  '700': '#1440e1',
170
173
  '800': '#1734b6',
package/dist/cjs/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export * from './theme';
2
- export * from './types.d';
2
+ export type * from './types';
3
3
  //# sourceMappingURL=index.d.ts.map
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,mBAAmB,SAAS,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  __exportStar(require("./theme"), exports);
18
- __exportStar(require("./types.d"), exports);
package/dist/cjs/theme.d.ts CHANGED
@@ -27,7 +27,7 @@ export declare const theme: DefaultThemeConfig;
27
27
  * @param theme - The theme object from ConfigProvider context
28
28
  * @returns CustomTokens with guaranteed defined values
29
29
  */
30
- export declare function getSafeCustomTokens(theme: any): CustomTokens;
30
+ export declare function getSafeCustomTokens(theme: ThemeConfig | undefined): CustomTokens;
31
31
  /**
32
32
  * Used to access antd's token values from react components.
33
33
  * For detailed usage see,
package/dist/cjs/theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAevD,OAAO,EAML,YAAY,EAWZ,YAAY,EAWb,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,QAAQ,KAAK,CAAC;AAE3B,KAAK,SAAS,GACV,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,OAAO,GACP,MAAM,GACN,QAAQ,GACR,MAAM,GACN,WAAW,GACX,SAAS,CAAC;AAEd,KAAK,KAAK,GAAG;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAevC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,YAAY,CAAC;IAC5B,YAAY,EAAE,YAAY,CAAC;CAC5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,kBAgmBnB,CAAC;AAyFF;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,GAAG,GAAG,YAAY,CAmB5D;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,CAAC,QAA6B,CAAC;AAEtE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;CA2B3B,CAAC"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAgBvD,OAAO,EAML,YAAY,EAWZ,YAAY,EAWb,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,QAAQ,KAAK,CAAC;AAE3B,KAAK,SAAS,GACV,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,OAAO,GACP,MAAM,GACN,QAAQ,GACR,MAAM,GACN,WAAW,GACX,SAAS,CAAC;AAEd,KAAK,KAAK,GAAG;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAevC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,YAAY,CAAC;IAC5B,YAAY,EAAE,YAAY,CAAC;CAC5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,kBAsjBnB,CAAC;AAyFF;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,WAAW,GAAG,SAAS,GAC7B,YAAY,CAmBd;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,CAAC,QAA6B,CAAC;AAEtE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;CA2B3B,CAAC"}
package/dist/cjs/theme.js CHANGED
@@ -28,6 +28,8 @@ const colors = {
28
28
  * to learn about properties and their effects.
29
29
  */
30
30
  exports.theme = {
31
+ cssVar: true,
32
+ // TODO: hashed:false for reducing CSS bundle size
31
33
  // We use dark algorithm from antd by default,
32
34
  // since our applications are dark themed.
33
35
  algorithm: antd_1.theme.darkAlgorithm,
@@ -232,7 +234,7 @@ exports.theme = {
232
234
  controlPaddingHorizontal: exports.fontSize
233
235
  },
234
236
  Menu: {
235
- minWidth: '250px',
237
+ minWidth: '249px',
236
238
  darkItemBg: colors.ebonyClay['500'],
237
239
  darkSubMenuItemBg: colors.ebonyClay['600'],
238
240
  darkItemSelectedBg: colors.ebonyClay['700'],
@@ -360,88 +362,42 @@ exports.theme = {
360
362
  verticalErrorPadding: '7px 0'
361
363
  },
362
364
  Pagination: {
363
- fontSize: '14px !important',
364
- Simple: {
365
- minWidth: '68.56px !important',
366
- fontWeight: 'normal !important',
367
- color: `${colors.gray['500']} !important`,
368
- input: {
369
- textColor: `${colors.ebonyClay['960']} !important`
370
- },
371
- prevNextButton: {
372
- svgWidth: '10px !important',
373
- svgFill: `${colors.gray['500']} !important`
374
- },
375
- slashPadding: '8px !important',
376
- lightInputTextColor: `${colors.ebonyClay['960']} !important`,
377
- darkInputTextColor: `${colors.neutral['50']} !important`
378
- },
379
- Table: {
380
- totalText: {
381
- color: `${colors.gray['500']} !important`,
382
- margin: 'auto 32px !important'
383
- },
384
- prevNextButton: {
385
- svgWidth: '10px !important',
386
- svgFill: `${colors.gray['500']} !important`,
387
- svgPadding: '14px 14px !important',
388
- svgBorder: `1px solid ${colors.neutral['350']} !important`,
389
- prevSvgBorderRadius: '5px 0 0 5px !important',
390
- nextSvgBorderRadius: '0 5px 5px 0 !important'
391
- },
392
- pageInfo: {
393
- border: `1px solid ${colors.neutral['350']} !important`,
394
- padding: '12px 10px !important',
395
- currentPageBgColor: `${colors.neutral['75']} !important`,
396
- currentPageMinWidth: '18px !important',
397
- currentPageTextColor: `${colors.ebonyClay['960']} !important`,
398
- currentPageFontWeight: '600 !important',
399
- totalPageBgColor: `${colors.neutral['50']} !important`,
400
- totalPageTextColor: `${colors.gray['500']} !important`
401
- },
402
- sizeChanger: {
403
- bgColor: `${colors.neutral['50']} !important`,
404
- textColor: `${colors.ebonyClay['951']} !important`,
405
- colGap: '10px !important',
406
- border: `1px solid ${colors.neutral['350']} !important`,
407
- borderRadius: '5px !important',
408
- item1: {
409
- bgColor: `${colors.neutral['50']} !important`,
410
- textColor: `${colors.ebonyClay['951']} !important`,
411
- padding: '10px 16px !important'
412
- },
413
- item2: {
414
- textColor: `${colors.gray['500']} !important`
415
- },
416
- icon: {
417
- bgColor: `${colors.neutral['50']} !important`,
418
- textColor: `${colors.gray['500']} !important`,
419
- width: '10px !important'
420
- }
421
- }
422
- },
423
- Jumper: {
424
- border: `1px solid ${colors.neutral['350']} !important`,
425
- bgColor: `${colors.neutral['75']} !important`,
426
- textColor: `${colors.ebonyClay['960']} !important`,
427
- minWidth: '18px',
428
- height: 'calc(100% - 3px)'
429
- }
365
+ marginXS: 0,
366
+ marginSM: 0,
367
+ margin: 0,
368
+ colorText: colors.gray['500'],
369
+ colorTextBase: colors.ebonyClay['950'],
370
+ lineWidth: 0,
371
+ marginXXS: 0,
372
+ borderRadius: 0,
373
+ colorBorder: colors.neutral['350'],
374
+ boxShadow: colors.gray['150'],
375
+ // works with antd but types don't exist :)
376
+ itemInputBg: colors.neutral['75'],
377
+ itemSizeSM: 'auto',
378
+ itemSize: 42
430
379
  },
431
380
  Select: {
432
381
  colorTextDisabled: colors.ebonyClay['350'],
433
382
  colorBgContainerDisabled: colors.gray['925'],
434
383
  colorBgContainer: colors.ebonyClay['475'],
435
384
  fontSizeLG: exports.fontSize * 0.875,
385
+ paddingXXS: 0,
386
+ borderRadiusSM: 0,
436
387
  colorBorder: colors.ebonyClay['550'],
437
388
  lineWidth: 2,
438
- colorBgElevated: '#fffcfc',
439
- optionActiveBg: 'rgba(68, 130, 255, 0.2)',
440
- colorText: '#9b9b9b',
441
- selectedOptionColor: 'black',
442
- selectItemBorderShadowColor: '#eaeff0',
443
- selectItemBgColor: 'rgba(245, 245, 245, 0.5)',
444
- selectItemHoverBgColor: 'rgba(68, 130, 255, 0.2)'
389
+ colorBgElevated: colors.neutral['50'],
390
+ optionOddColor: colors.gray['100-50'],
391
+ optionSelectedBg: colors.azure['500-20'],
392
+ optionSelectedColor: colors.azure['500'],
393
+ optionActiveColor: colors.azure['500'],
394
+ optionActiveBg: colors.azure['500-20'],
395
+ colorText: colors.neutral['50'],
396
+ selectItemColor: colors.neutral['500'],
397
+ colorTextPlaceholder: colors.gray['500'],
398
+ selectorBg: colors.ebonyClay['475'],
399
+ colorFillTertiary: colors.neutral['50'],
400
+ colorFillSecondary: colors.neutral['100']
445
401
  },
446
402
  Table: {
447
403
  headerBorderRadius: 0,
package/dist/cjs/types.d.ts CHANGED
@@ -405,81 +405,16 @@ export type CustomTokens = {
405
405
 
406
406
  export type PaginationToken = AntdPaginationToken &
407
407
  AliasToken & {
408
- fontSize: string;
409
- Simple: {
410
- minWidth: string;
411
- fontWeight: string;
412
- color: string;
413
- input: {
414
- textColor: string;
415
- };
416
- prevNextButton: {
417
- svgWidth: string;
418
- svgFill: string;
419
- };
420
- slashPadding: string;
421
- lightInputTextColor: string;
422
- darkInputTextColor: string;
423
- };
424
- Table: {
425
- totalText: {
426
- color: string;
427
- margin: string;
428
- };
429
- prevNextButton: {
430
- svgWidth: string;
431
- svgFill: string;
432
- svgPadding: string;
433
- svgBorder: string;
434
- prevSvgBorderRadius: string;
435
- nextSvgBorderRadius: string;
436
- };
437
- pageInfo: {
438
- border: string;
439
- padding: string;
440
- currentPageBgColor: string;
441
- currentPageMinWidth: string;
442
- currentPageTextColor: string;
443
- currentPageFontWeight: string;
444
- totalPageBgColor: string;
445
- totalPageTextColor: string;
446
- };
447
- sizeChanger: {
448
- bgColor: string;
449
- textColor: string;
450
- colGap: string;
451
- border: string;
452
- borderRadius: string;
453
- item1: {
454
- bgColor: string;
455
- textColor: string;
456
- padding: string;
457
- };
458
- item2: {
459
- textColor: string;
460
- };
461
- icon: {
462
- bgColor: string;
463
- textColor: string;
464
- width: string;
465
- };
466
- };
467
- };
468
- Jumper: {
469
- border: string;
470
- bgColor: string;
471
- textColor: string;
472
- minWidth: string;
473
- height: string;
474
- };
408
+ itemSize?: number;
409
+ itemSizeSM?: number | 'auto';
410
+ itemInputBg?: string;
475
411
  };
476
412
 
477
413
  export type SelectToken = AntdSelectToken &
478
414
  AliasToken & {
479
- selectedOptionColor: string;
480
- selectItemBorderShadowColor: string;
481
- selectItemBgColor: string;
482
- selectItemHoverBgColor: string;
415
+ selectItemColor?: string;
416
+ optionActiveColor?: string;
417
+ optionOddColor?: string;
483
418
  };
484
419
 
485
420
  export type TableToken = AntdTableToken & AliasToken & {};
package/dist/esm/colors.d.ts CHANGED
@@ -50,6 +50,7 @@ export declare const ebonyClay: {
50
50
  };
51
51
  export declare const gray: {
52
52
  '100': string;
53
+ '100-50': string;
53
54
  '150': string;
54
55
  '200': string;
55
56
  '250': string;
@@ -155,11 +156,13 @@ export declare const pink: {
155
156
  };
156
157
  export declare const azure: {
157
158
  '50': string;
159
+ '90': string;
158
160
  '100': string;
159
161
  '200': string;
160
162
  '300': string;
161
163
  '400': string;
162
164
  '500': string;
165
+ '500-20': string;
163
166
  '600': string;
164
167
  '700': string;
165
168
  '800': string;
package/dist/esm/colors.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;CAsBnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;CAgBhB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;CAiBf,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;CAkBjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAqBhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAelB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAGF,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYjB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;CAkBlB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC"}
1
+ {"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;CAsBnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;CAiBhB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;CAiBf,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;CAkBjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAqBhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAelB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAGF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;CAcjB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;CAkBlB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC"}
package/dist/esm/colors.js CHANGED
@@ -51,6 +51,7 @@ export const ebonyClay = {
51
51
  };
52
52
  export const gray = {
53
53
  '100': '#f5f5f5',
54
+ '100-50': '#f5f5f580',
54
55
  '150': '#e9f0f7',
55
56
  '200': '#e5e5e5',
56
57
  '250': '#d4d6f0',
@@ -157,11 +158,13 @@ export const pink = {
157
158
  // This will be our main primary.
158
159
  export const azure = {
159
160
  '50': '#eef5ff',
161
+ '90': '#dae6ff',
160
162
  '100': '#d9e8ff',
161
163
  '200': '#bcd8ff',
162
164
  '300': '#8ec0ff',
163
165
  '400': '#599cff',
164
166
  '500': '#4482ff', // applied from design: primary button color
167
+ '500-20': '#4482ff33',
165
168
  '600': '#1b55f5',
166
169
  '700': '#1440e1',
167
170
  '800': '#1734b6',
package/dist/esm/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export * from './theme';
2
- export * from './types.d';
2
+ export type * from './types';
3
3
  //# sourceMappingURL=index.d.ts.map
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,mBAAmB,SAAS,CAAC"}
package/dist/esm/index.js CHANGED
@@ -1,2 +1 @@
1
1
  export * from './theme';
2
- export * from './types.d';
package/dist/esm/theme.d.ts CHANGED
@@ -27,7 +27,7 @@ export declare const theme: DefaultThemeConfig;
27
27
  * @param theme - The theme object from ConfigProvider context
28
28
  * @returns CustomTokens with guaranteed defined values
29
29
  */
30
- export declare function getSafeCustomTokens(theme: any): CustomTokens;
30
+ export declare function getSafeCustomTokens(theme: ThemeConfig | undefined): CustomTokens;
31
31
  /**
32
32
  * Used to access antd's token values from react components.
33
33
  * For detailed usage see,
package/dist/esm/theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAevD,OAAO,EAML,YAAY,EAWZ,YAAY,EAWb,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,QAAQ,KAAK,CAAC;AAE3B,KAAK,SAAS,GACV,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,OAAO,GACP,MAAM,GACN,QAAQ,GACR,MAAM,GACN,WAAW,GACX,SAAS,CAAC;AAEd,KAAK,KAAK,GAAG;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAevC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,YAAY,CAAC;IAC5B,YAAY,EAAE,YAAY,CAAC;CAC5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,kBAgmBnB,CAAC;AAyFF;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,GAAG,GAAG,YAAY,CAmB5D;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,CAAC,QAA6B,CAAC;AAEtE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;CA2B3B,CAAC"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAgBvD,OAAO,EAML,YAAY,EAWZ,YAAY,EAWb,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,QAAQ,KAAK,CAAC;AAE3B,KAAK,SAAS,GACV,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,OAAO,GACP,MAAM,GACN,QAAQ,GACR,MAAM,GACN,WAAW,GACX,SAAS,CAAC;AAEd,KAAK,KAAK,GAAG;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAevC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,YAAY,CAAC;IAC5B,YAAY,EAAE,YAAY,CAAC;CAC5B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,kBAsjBnB,CAAC;AAyFF;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,WAAW,GAAG,SAAS,GAC7B,YAAY,CAmBd;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,CAAC,QAA6B,CAAC;AAEtE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;CA2B3B,CAAC"}
package/dist/esm/theme.js CHANGED
@@ -24,6 +24,8 @@ const colors = {
24
24
  * to learn about properties and their effects.
25
25
  */
26
26
  export const theme = {
27
+ cssVar: true,
28
+ // TODO: hashed:false for reducing CSS bundle size
27
29
  // We use dark algorithm from antd by default,
28
30
  // since our applications are dark themed.
29
31
  algorithm: antdTheme.darkAlgorithm,
@@ -228,7 +230,7 @@ export const theme = {
228
230
  controlPaddingHorizontal: fontSize
229
231
  },
230
232
  Menu: {
231
- minWidth: '250px',
233
+ minWidth: '249px',
232
234
  darkItemBg: colors.ebonyClay['500'],
233
235
  darkSubMenuItemBg: colors.ebonyClay['600'],
234
236
  darkItemSelectedBg: colors.ebonyClay['700'],
@@ -356,88 +358,42 @@ export const theme = {
356
358
  verticalErrorPadding: '7px 0'
357
359
  },
358
360
  Pagination: {
359
- fontSize: '14px !important',
360
- Simple: {
361
- minWidth: '68.56px !important',
362
- fontWeight: 'normal !important',
363
- color: `${colors.gray['500']} !important`,
364
- input: {
365
- textColor: `${colors.ebonyClay['960']} !important`
366
- },
367
- prevNextButton: {
368
- svgWidth: '10px !important',
369
- svgFill: `${colors.gray['500']} !important`
370
- },
371
- slashPadding: '8px !important',
372
- lightInputTextColor: `${colors.ebonyClay['960']} !important`,
373
- darkInputTextColor: `${colors.neutral['50']} !important`
374
- },
375
- Table: {
376
- totalText: {
377
- color: `${colors.gray['500']} !important`,
378
- margin: 'auto 32px !important'
379
- },
380
- prevNextButton: {
381
- svgWidth: '10px !important',
382
- svgFill: `${colors.gray['500']} !important`,
383
- svgPadding: '14px 14px !important',
384
- svgBorder: `1px solid ${colors.neutral['350']} !important`,
385
- prevSvgBorderRadius: '5px 0 0 5px !important',
386
- nextSvgBorderRadius: '0 5px 5px 0 !important'
387
- },
388
- pageInfo: {
389
- border: `1px solid ${colors.neutral['350']} !important`,
390
- padding: '12px 10px !important',
391
- currentPageBgColor: `${colors.neutral['75']} !important`,
392
- currentPageMinWidth: '18px !important',
393
- currentPageTextColor: `${colors.ebonyClay['960']} !important`,
394
- currentPageFontWeight: '600 !important',
395
- totalPageBgColor: `${colors.neutral['50']} !important`,
396
- totalPageTextColor: `${colors.gray['500']} !important`
397
- },
398
- sizeChanger: {
399
- bgColor: `${colors.neutral['50']} !important`,
400
- textColor: `${colors.ebonyClay['951']} !important`,
401
- colGap: '10px !important',
402
- border: `1px solid ${colors.neutral['350']} !important`,
403
- borderRadius: '5px !important',
404
- item1: {
405
- bgColor: `${colors.neutral['50']} !important`,
406
- textColor: `${colors.ebonyClay['951']} !important`,
407
- padding: '10px 16px !important'
408
- },
409
- item2: {
410
- textColor: `${colors.gray['500']} !important`
411
- },
412
- icon: {
413
- bgColor: `${colors.neutral['50']} !important`,
414
- textColor: `${colors.gray['500']} !important`,
415
- width: '10px !important'
416
- }
417
- }
418
- },
419
- Jumper: {
420
- border: `1px solid ${colors.neutral['350']} !important`,
421
- bgColor: `${colors.neutral['75']} !important`,
422
- textColor: `${colors.ebonyClay['960']} !important`,
423
- minWidth: '18px',
424
- height: 'calc(100% - 3px)'
425
- }
361
+ marginXS: 0,
362
+ marginSM: 0,
363
+ margin: 0,
364
+ colorText: colors.gray['500'],
365
+ colorTextBase: colors.ebonyClay['950'],
366
+ lineWidth: 0,
367
+ marginXXS: 0,
368
+ borderRadius: 0,
369
+ colorBorder: colors.neutral['350'],
370
+ boxShadow: colors.gray['150'],
371
+ // works with antd but types don't exist :)
372
+ itemInputBg: colors.neutral['75'],
373
+ itemSizeSM: 'auto',
374
+ itemSize: 42
426
375
  },
427
376
  Select: {
428
377
  colorTextDisabled: colors.ebonyClay['350'],
429
378
  colorBgContainerDisabled: colors.gray['925'],
430
379
  colorBgContainer: colors.ebonyClay['475'],
431
380
  fontSizeLG: fontSize * 0.875,
381
+ paddingXXS: 0,
382
+ borderRadiusSM: 0,
432
383
  colorBorder: colors.ebonyClay['550'],
433
384
  lineWidth: 2,
434
- colorBgElevated: '#fffcfc',
435
- optionActiveBg: 'rgba(68, 130, 255, 0.2)',
436
- colorText: '#9b9b9b',
437
- selectedOptionColor: 'black',
438
- selectItemBorderShadowColor: '#eaeff0',
439
- selectItemBgColor: 'rgba(245, 245, 245, 0.5)',
440
- selectItemHoverBgColor: 'rgba(68, 130, 255, 0.2)'
385
+ colorBgElevated: colors.neutral['50'],
386
+ optionOddColor: colors.gray['100-50'],
387
+ optionSelectedBg: colors.azure['500-20'],
388
+ optionSelectedColor: colors.azure['500'],
389
+ optionActiveColor: colors.azure['500'],
390
+ optionActiveBg: colors.azure['500-20'],
391
+ colorText: colors.neutral['50'],
392
+ selectItemColor: colors.neutral['500'],
393
+ colorTextPlaceholder: colors.gray['500'],
394
+ selectorBg: colors.ebonyClay['475'],
395
+ colorFillTertiary: colors.neutral['50'],
396
+ colorFillSecondary: colors.neutral['100']
441
397
  },
442
398
  Table: {
443
399
  headerBorderRadius: 0,
package/dist/esm/types.d.ts CHANGED
@@ -405,81 +405,16 @@ export type CustomTokens = {
405
405
 
406
406
  export type PaginationToken = AntdPaginationToken &
407
407
  AliasToken & {
408
- fontSize: string;
409
- Simple: {
410
- minWidth: string;
411
- fontWeight: string;
412
- color: string;
413
- input: {
414
- textColor: string;
415
- };
416
- prevNextButton: {
417
- svgWidth: string;
418
- svgFill: string;
419
- };
420
- slashPadding: string;
421
- lightInputTextColor: string;
422
- darkInputTextColor: string;
423
- };
424
- Table: {
425
- totalText: {
426
- color: string;
427
- margin: string;
428
- };
429
- prevNextButton: {
430
- svgWidth: string;
431
- svgFill: string;
432
- svgPadding: string;
433
- svgBorder: string;
434
- prevSvgBorderRadius: string;
435
- nextSvgBorderRadius: string;
436
- };
437
- pageInfo: {
438
- border: string;
439
- padding: string;
440
- currentPageBgColor: string;
441
- currentPageMinWidth: string;
442
- currentPageTextColor: string;
443
- currentPageFontWeight: string;
444
- totalPageBgColor: string;
445
- totalPageTextColor: string;
446
- };
447
- sizeChanger: {
448
- bgColor: string;
449
- textColor: string;
450
- colGap: string;
451
- border: string;
452
- borderRadius: string;
453
- item1: {
454
- bgColor: string;
455
- textColor: string;
456
- padding: string;
457
- };
458
- item2: {
459
- textColor: string;
460
- };
461
- icon: {
462
- bgColor: string;
463
- textColor: string;
464
- width: string;
465
- };
466
- };
467
- };
468
- Jumper: {
469
- border: string;
470
- bgColor: string;
471
- textColor: string;
472
- minWidth: string;
473
- height: string;
474
- };
408
+ itemSize?: number;
409
+ itemSizeSM?: number | 'auto';
410
+ itemInputBg?: string;
475
411
  };
476
412
 
477
413
  export type SelectToken = AntdSelectToken &
478
414
  AliasToken & {
479
- selectedOptionColor: string;
480
- selectItemBorderShadowColor: string;
481
- selectItemBgColor: string;
482
- selectItemHoverBgColor: string;
415
+ selectItemColor?: string;
416
+ optionActiveColor?: string;
417
+ optionOddColor?: string;
483
418
  };
484
419
 
485
420
  export type TableToken = AntdTableToken & AliasToken & {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-theme",
3
- "version": "1.0.2",
3
+ "version": "1.1.0",
4
4
  "private": false,
5
5
  "description": "Akinon UI's default theme values.",
6
6
  "type": "module",
@@ -10,18 +10,18 @@
10
10
  "dist"
11
11
  ],
12
12
  "dependencies": {
13
- "antd": "5.22.6"
13
+ "antd": "^5.27.0"
14
14
  },
15
15
  "devDependencies": {
16
16
  "clean-package": "2.2.0",
17
17
  "copyfiles": "^2.4.1",
18
18
  "rimraf": "^5.0.5",
19
19
  "typescript": "*",
20
- "@akinon/typescript-config": "1.0.1"
20
+ "@akinon/typescript-config": "1.1.0"
21
21
  },
22
22
  "peerDependencies": {
23
- "react": ">=18",
24
- "react-dom": ">=18"
23
+ "react": "^18 || ^19",
24
+ "react-dom": "^18 || ^19"
25
25
  },
26
26
  "clean-package": "../../../clean-package.config.json",
27
27
  "types": "dist/esm/index.d.ts",
@@ -35,10 +35,10 @@
35
35
  },
36
36
  "scripts": {
37
37
  "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
38
- "build:esm": "tsc --outDir dist/esm",
39
38
  "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
40
- "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
39
+ "build:esm": "tsc --outDir dist/esm",
41
40
  "clean": "rimraf dist/",
41
+ "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
42
42
  "typecheck": "tsc --noEmit"
43
43
  }
44
44
  }