@akinon/ui-theme 1.0.2 → 1.1.1

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 +4 -0
  2. package/dist/cjs/colors.d.ts.map +1 -1
  3. package/dist/cjs/colors.js +4 -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 +32 -75
  10. package/dist/cjs/types.d.ts +6 -71
  11. package/dist/esm/colors.d.ts +4 -0
  12. package/dist/esm/colors.d.ts.map +1 -1
  13. package/dist/esm/colors.js +4 -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 +32 -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,8 @@ export declare const ebonyClay: {
50
50
  };
51
51
  export declare const gray: {
52
52
  '100': string;
53
+ '100-50': string;
54
+ '125': string;
53
55
  '150': string;
54
56
  '200': string;
55
57
  '250': string;
@@ -155,11 +157,13 @@ export declare const pink: {
155
157
  };
156
158
  export declare const azure: {
157
159
  '50': string;
160
+ '90': string;
158
161
  '100': string;
159
162
  '200': string;
160
163
  '300': string;
161
164
  '400': string;
162
165
  '500': string;
166
+ '500-20': string;
163
167
  '600': string;
164
168
  '700': string;
165
169
  '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;;;;;;;;;;;;;;;;;;CAkBhB,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,8 @@ exports.ebonyClay = {
54
54
  };
55
55
  exports.gray = {
56
56
  '100': '#f5f5f5',
57
+ '100-50': '#f5f5f580',
58
+ '125': '#eaeff0',
57
59
  '150': '#e9f0f7',
58
60
  '200': '#e5e5e5',
59
61
  '250': '#d4d6f0',
@@ -160,11 +162,13 @@ exports.pink = {
160
162
  // This will be our main primary.
161
163
  exports.azure = {
162
164
  '50': '#eef5ff',
165
+ '90': '#dae6ff',
163
166
  '100': '#d9e8ff',
164
167
  '200': '#bcd8ff',
165
168
  '300': '#8ec0ff',
166
169
  '400': '#599cff',
167
170
  '500': '#4482ff', // applied from design: primary button color
171
+ '500-20': '#4482ff33',
168
172
  '600': '#1b55f5',
169
173
  '700': '#1440e1',
170
174
  '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,kBAujBnB,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,43 @@ 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'],
401
+ multipleItemBg: colors.neutral['50']
445
402
  },
446
403
  Table: {
447
404
  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,8 @@ export declare const ebonyClay: {
50
50
  };
51
51
  export declare const gray: {
52
52
  '100': string;
53
+ '100-50': string;
54
+ '125': string;
53
55
  '150': string;
54
56
  '200': string;
55
57
  '250': string;
@@ -155,11 +157,13 @@ export declare const pink: {
155
157
  };
156
158
  export declare const azure: {
157
159
  '50': string;
160
+ '90': string;
158
161
  '100': string;
159
162
  '200': string;
160
163
  '300': string;
161
164
  '400': string;
162
165
  '500': string;
166
+ '500-20': string;
163
167
  '600': string;
164
168
  '700': string;
165
169
  '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;;;;;;;;;;;;;;;;;;CAkBhB,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,8 @@ export const ebonyClay = {
51
51
  };
52
52
  export const gray = {
53
53
  '100': '#f5f5f5',
54
+ '100-50': '#f5f5f580',
55
+ '125': '#eaeff0',
54
56
  '150': '#e9f0f7',
55
57
  '200': '#e5e5e5',
56
58
  '250': '#d4d6f0',
@@ -157,11 +159,13 @@ export const pink = {
157
159
  // This will be our main primary.
158
160
  export const azure = {
159
161
  '50': '#eef5ff',
162
+ '90': '#dae6ff',
160
163
  '100': '#d9e8ff',
161
164
  '200': '#bcd8ff',
162
165
  '300': '#8ec0ff',
163
166
  '400': '#599cff',
164
167
  '500': '#4482ff', // applied from design: primary button color
168
+ '500-20': '#4482ff33',
165
169
  '600': '#1b55f5',
166
170
  '700': '#1440e1',
167
171
  '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,kBAujBnB,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,43 @@ 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'],
397
+ multipleItemBg: colors.neutral['50']
441
398
  },
442
399
  Table: {
443
400
  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.1",
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
  }