@akinon/ui-theme 1.0.1 → 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.
@@ -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;
@@ -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"}
@@ -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',
@@ -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
@@ -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);
@@ -20,6 +20,14 @@ export type DefaultThemeConfig = ThemeConfig & {
20
20
  * to learn about properties and their effects.
21
21
  */
22
22
  export declare const theme: DefaultThemeConfig;
23
+ /**
24
+ * Safely retrieves CustomTokens from theme with fallback to default values.
25
+ * This prevents undefined access errors when theme is not properly initialized.
26
+ *
27
+ * @param theme - The theme object from ConfigProvider context
28
+ * @returns CustomTokens with guaranteed defined values
29
+ */
30
+ export declare function getSafeCustomTokens(theme: ThemeConfig | undefined): CustomTokens;
23
31
  /**
24
32
  * Used to access antd's token values from react components.
25
33
  * For detailed usage see,
@@ -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,EAUZ,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;AAEF;;;;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
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.getCssVariables = exports.useToken = exports.theme = exports.fontSize = void 0;
4
+ exports.getSafeCustomTokens = getSafeCustomTokens;
4
5
  const antd_1 = require("antd");
5
6
  const colors_1 = require("./colors");
6
7
  // antd works with numbers. use this to convert px to rem.
@@ -27,6 +28,8 @@ const colors = {
27
28
  * to learn about properties and their effects.
28
29
  */
29
30
  exports.theme = {
31
+ cssVar: true,
32
+ // TODO: hashed:false for reducing CSS bundle size
30
33
  // We use dark algorithm from antd by default,
31
34
  // since our applications are dark themed.
32
35
  algorithm: antd_1.theme.darkAlgorithm,
@@ -231,7 +234,7 @@ exports.theme = {
231
234
  controlPaddingHorizontal: exports.fontSize
232
235
  },
233
236
  Menu: {
234
- minWidth: '250px',
237
+ minWidth: '249px',
235
238
  darkItemBg: colors.ebonyClay['500'],
236
239
  darkSubMenuItemBg: colors.ebonyClay['600'],
237
240
  darkItemSelectedBg: colors.ebonyClay['700'],
@@ -359,88 +362,42 @@ exports.theme = {
359
362
  verticalErrorPadding: '7px 0'
360
363
  },
361
364
  Pagination: {
362
- fontSize: '14px !important',
363
- Simple: {
364
- minWidth: '68.56px !important',
365
- fontWeight: 'normal !important',
366
- color: `${colors.gray['500']} !important`,
367
- input: {
368
- textColor: `${colors.ebonyClay['960']} !important`
369
- },
370
- prevNextButton: {
371
- svgWidth: '10px !important',
372
- svgFill: `${colors.gray['500']} !important`
373
- },
374
- slashPadding: '8px !important',
375
- lightInputTextColor: `${colors.ebonyClay['960']} !important`,
376
- darkInputTextColor: `${colors.neutral['50']} !important`
377
- },
378
- Table: {
379
- totalText: {
380
- color: `${colors.gray['500']} !important`,
381
- margin: 'auto 32px !important'
382
- },
383
- prevNextButton: {
384
- svgWidth: '10px !important',
385
- svgFill: `${colors.gray['500']} !important`,
386
- svgPadding: '14px 14px !important',
387
- svgBorder: `1px solid ${colors.neutral['350']} !important`,
388
- prevSvgBorderRadius: '5px 0 0 5px !important',
389
- nextSvgBorderRadius: '0 5px 5px 0 !important'
390
- },
391
- pageInfo: {
392
- border: `1px solid ${colors.neutral['350']} !important`,
393
- padding: '12px 10px !important',
394
- currentPageBgColor: `${colors.neutral['75']} !important`,
395
- currentPageMinWidth: '18px !important',
396
- currentPageTextColor: `${colors.ebonyClay['960']} !important`,
397
- currentPageFontWeight: '600 !important',
398
- totalPageBgColor: `${colors.neutral['50']} !important`,
399
- totalPageTextColor: `${colors.gray['500']} !important`
400
- },
401
- sizeChanger: {
402
- bgColor: `${colors.neutral['50']} !important`,
403
- textColor: `${colors.ebonyClay['951']} !important`,
404
- colGap: '10px !important',
405
- border: `1px solid ${colors.neutral['350']} !important`,
406
- borderRadius: '5px !important',
407
- item1: {
408
- bgColor: `${colors.neutral['50']} !important`,
409
- textColor: `${colors.ebonyClay['951']} !important`,
410
- padding: '10px 16px !important'
411
- },
412
- item2: {
413
- textColor: `${colors.gray['500']} !important`
414
- },
415
- icon: {
416
- bgColor: `${colors.neutral['50']} !important`,
417
- textColor: `${colors.gray['500']} !important`,
418
- width: '10px !important'
419
- }
420
- }
421
- },
422
- Jumper: {
423
- border: `1px solid ${colors.neutral['350']} !important`,
424
- bgColor: `${colors.neutral['75']} !important`,
425
- textColor: `${colors.ebonyClay['960']} !important`,
426
- minWidth: '18px',
427
- height: 'calc(100% - 3px)'
428
- }
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
429
379
  },
430
380
  Select: {
431
381
  colorTextDisabled: colors.ebonyClay['350'],
432
382
  colorBgContainerDisabled: colors.gray['925'],
433
383
  colorBgContainer: colors.ebonyClay['475'],
434
384
  fontSizeLG: exports.fontSize * 0.875,
385
+ paddingXXS: 0,
386
+ borderRadiusSM: 0,
435
387
  colorBorder: colors.ebonyClay['550'],
436
388
  lineWidth: 2,
437
- colorBgElevated: '#fffcfc',
438
- optionActiveBg: 'rgba(68, 130, 255, 0.2)',
439
- colorText: '#9b9b9b',
440
- selectedOptionColor: 'black',
441
- selectItemBorderShadowColor: '#eaeff0',
442
- selectItemBgColor: 'rgba(245, 245, 245, 0.5)',
443
- 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']
444
401
  },
445
402
  Table: {
446
403
  headerBorderRadius: 0,
@@ -630,6 +587,114 @@ exports.theme = {
630
587
  }
631
588
  }
632
589
  };
590
+ /**
591
+ * Default CustomTokens fallback values to prevent undefined access errors.
592
+ * This provides a complete fallback structure matching the CustomTokens interface.
593
+ */
594
+ const defaultCustomTokens = {
595
+ layout: {
596
+ displayFlex: 'flex',
597
+ displayGrid: 'grid',
598
+ displayBlock: 'block',
599
+ displayInline: 'inline',
600
+ displayInlineBlock: 'inline-block',
601
+ displayNone: 'none',
602
+ displayContents: 'contents',
603
+ positionAbsolute: 'absolute',
604
+ positionRelative: 'relative',
605
+ positionFixed: 'fixed',
606
+ positionSticky: 'sticky',
607
+ positionStatic: 'static',
608
+ flexStart: 'start',
609
+ flexCenter: 'center',
610
+ flexDirectionRow: 'row',
611
+ flexDirectionRowReverse: 'row-reverse',
612
+ flexDirectionColumn: 'column',
613
+ flexDirectionColumnReverse: 'column-reverse'
614
+ },
615
+ typography: {
616
+ textTransformUppercase: 'uppercase',
617
+ textTransformLowercase: 'lowercase',
618
+ textTransformCapitalize: 'capitalize',
619
+ textAlignLeft: 'left',
620
+ textAlignCenter: 'center',
621
+ textAlignRight: 'right',
622
+ textAlignJustify: 'justify',
623
+ whiteSpaceNormal: 'normal',
624
+ whiteSpaceNoWrap: 'nowrap',
625
+ whiteSpacePre: 'pre',
626
+ whiteSpacePreLine: 'pre-line',
627
+ whiteSpacePreWrap: 'pre-wrap',
628
+ whiteSpaceBreakSpaces: 'break-spaces',
629
+ wordBreak: 'break-word',
630
+ textDecorationUnderline: 'underline',
631
+ textDecorationOverline: 'overline',
632
+ textDecorationLineThrough: 'line-through',
633
+ fontWeightBold: '600',
634
+ fontWeightMedium: '500'
635
+ },
636
+ sizing: {
637
+ sizeMaxContent: 'max-content',
638
+ sizeMinContent: 'min-content',
639
+ sizeFitContent: 'fit-content',
640
+ valueFull: '100%',
641
+ valueThreeQuarter: '75%',
642
+ valueHalf: '50%',
643
+ valueQuarter: '25%',
644
+ valueZero: '0',
645
+ valueAuto: 'auto',
646
+ valueInherit: 'inherit'
647
+ },
648
+ others: {
649
+ colorTransparent: 'transparent',
650
+ valueHidden: 'hidden',
651
+ valueUnset: 'unset',
652
+ emptyContent: '""',
653
+ lineHeightShort: '1',
654
+ lineHeightTall: '2',
655
+ cursorNotAllowed: 'not-allowed',
656
+ cursorPointer: 'pointer',
657
+ verticalAlignMiddle: 'middle',
658
+ opacityFull: '1',
659
+ opacityNone: '0'
660
+ },
661
+ border: {
662
+ borderNone: 'none',
663
+ borderSolid: 'solid',
664
+ borderDashed: 'dashed',
665
+ borderDotted: 'dotted',
666
+ borderWidthThin: '1px',
667
+ borderWidthThick: '2px',
668
+ borderRadiusSm: '0.125rem'
669
+ },
670
+ overflow: {
671
+ overflowVisible: 'visible',
672
+ overflowHidden: 'hidden',
673
+ overflowScroll: 'scroll'
674
+ }
675
+ };
676
+ /**
677
+ * Safely retrieves CustomTokens from theme with fallback to default values.
678
+ * This prevents undefined access errors when theme is not properly initialized.
679
+ *
680
+ * @param theme - The theme object from ConfigProvider context
681
+ * @returns CustomTokens with guaranteed defined values
682
+ */
683
+ function getSafeCustomTokens(theme) {
684
+ const themeCustomTokens = theme === null || theme === void 0 ? void 0 : theme.CustomTokens;
685
+ if (!themeCustomTokens) {
686
+ return defaultCustomTokens;
687
+ }
688
+ // Deep merge to ensure all nested properties are available
689
+ return {
690
+ layout: Object.assign(Object.assign({}, defaultCustomTokens.layout), themeCustomTokens.layout),
691
+ typography: Object.assign(Object.assign({}, defaultCustomTokens.typography), themeCustomTokens.typography),
692
+ sizing: Object.assign(Object.assign({}, defaultCustomTokens.sizing), themeCustomTokens.sizing),
693
+ others: Object.assign(Object.assign({}, defaultCustomTokens.others), themeCustomTokens.others),
694
+ border: Object.assign(Object.assign({}, defaultCustomTokens.border), themeCustomTokens.border),
695
+ overflow: Object.assign(Object.assign({}, defaultCustomTokens.overflow), themeCustomTokens.overflow)
696
+ };
697
+ }
633
698
  /**
634
699
  * Used to access antd's token values from react components.
635
700
  * For detailed usage see,
@@ -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 & {};
@@ -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;
@@ -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"}
@@ -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',
@@ -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
@@ -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';
@@ -20,6 +20,14 @@ export type DefaultThemeConfig = ThemeConfig & {
20
20
  * to learn about properties and their effects.
21
21
  */
22
22
  export declare const theme: DefaultThemeConfig;
23
+ /**
24
+ * Safely retrieves CustomTokens from theme with fallback to default values.
25
+ * This prevents undefined access errors when theme is not properly initialized.
26
+ *
27
+ * @param theme - The theme object from ConfigProvider context
28
+ * @returns CustomTokens with guaranteed defined values
29
+ */
30
+ export declare function getSafeCustomTokens(theme: ThemeConfig | undefined): CustomTokens;
23
31
  /**
24
32
  * Used to access antd's token values from react components.
25
33
  * For detailed usage see,
@@ -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,EAUZ,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;AAEF;;;;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,
@@ -627,6 +583,114 @@ export const theme = {
627
583
  }
628
584
  }
629
585
  };
586
+ /**
587
+ * Default CustomTokens fallback values to prevent undefined access errors.
588
+ * This provides a complete fallback structure matching the CustomTokens interface.
589
+ */
590
+ const defaultCustomTokens = {
591
+ layout: {
592
+ displayFlex: 'flex',
593
+ displayGrid: 'grid',
594
+ displayBlock: 'block',
595
+ displayInline: 'inline',
596
+ displayInlineBlock: 'inline-block',
597
+ displayNone: 'none',
598
+ displayContents: 'contents',
599
+ positionAbsolute: 'absolute',
600
+ positionRelative: 'relative',
601
+ positionFixed: 'fixed',
602
+ positionSticky: 'sticky',
603
+ positionStatic: 'static',
604
+ flexStart: 'start',
605
+ flexCenter: 'center',
606
+ flexDirectionRow: 'row',
607
+ flexDirectionRowReverse: 'row-reverse',
608
+ flexDirectionColumn: 'column',
609
+ flexDirectionColumnReverse: 'column-reverse'
610
+ },
611
+ typography: {
612
+ textTransformUppercase: 'uppercase',
613
+ textTransformLowercase: 'lowercase',
614
+ textTransformCapitalize: 'capitalize',
615
+ textAlignLeft: 'left',
616
+ textAlignCenter: 'center',
617
+ textAlignRight: 'right',
618
+ textAlignJustify: 'justify',
619
+ whiteSpaceNormal: 'normal',
620
+ whiteSpaceNoWrap: 'nowrap',
621
+ whiteSpacePre: 'pre',
622
+ whiteSpacePreLine: 'pre-line',
623
+ whiteSpacePreWrap: 'pre-wrap',
624
+ whiteSpaceBreakSpaces: 'break-spaces',
625
+ wordBreak: 'break-word',
626
+ textDecorationUnderline: 'underline',
627
+ textDecorationOverline: 'overline',
628
+ textDecorationLineThrough: 'line-through',
629
+ fontWeightBold: '600',
630
+ fontWeightMedium: '500'
631
+ },
632
+ sizing: {
633
+ sizeMaxContent: 'max-content',
634
+ sizeMinContent: 'min-content',
635
+ sizeFitContent: 'fit-content',
636
+ valueFull: '100%',
637
+ valueThreeQuarter: '75%',
638
+ valueHalf: '50%',
639
+ valueQuarter: '25%',
640
+ valueZero: '0',
641
+ valueAuto: 'auto',
642
+ valueInherit: 'inherit'
643
+ },
644
+ others: {
645
+ colorTransparent: 'transparent',
646
+ valueHidden: 'hidden',
647
+ valueUnset: 'unset',
648
+ emptyContent: '""',
649
+ lineHeightShort: '1',
650
+ lineHeightTall: '2',
651
+ cursorNotAllowed: 'not-allowed',
652
+ cursorPointer: 'pointer',
653
+ verticalAlignMiddle: 'middle',
654
+ opacityFull: '1',
655
+ opacityNone: '0'
656
+ },
657
+ border: {
658
+ borderNone: 'none',
659
+ borderSolid: 'solid',
660
+ borderDashed: 'dashed',
661
+ borderDotted: 'dotted',
662
+ borderWidthThin: '1px',
663
+ borderWidthThick: '2px',
664
+ borderRadiusSm: '0.125rem'
665
+ },
666
+ overflow: {
667
+ overflowVisible: 'visible',
668
+ overflowHidden: 'hidden',
669
+ overflowScroll: 'scroll'
670
+ }
671
+ };
672
+ /**
673
+ * Safely retrieves CustomTokens from theme with fallback to default values.
674
+ * This prevents undefined access errors when theme is not properly initialized.
675
+ *
676
+ * @param theme - The theme object from ConfigProvider context
677
+ * @returns CustomTokens with guaranteed defined values
678
+ */
679
+ export function getSafeCustomTokens(theme) {
680
+ const themeCustomTokens = theme === null || theme === void 0 ? void 0 : theme.CustomTokens;
681
+ if (!themeCustomTokens) {
682
+ return defaultCustomTokens;
683
+ }
684
+ // Deep merge to ensure all nested properties are available
685
+ return {
686
+ layout: Object.assign(Object.assign({}, defaultCustomTokens.layout), themeCustomTokens.layout),
687
+ typography: Object.assign(Object.assign({}, defaultCustomTokens.typography), themeCustomTokens.typography),
688
+ sizing: Object.assign(Object.assign({}, defaultCustomTokens.sizing), themeCustomTokens.sizing),
689
+ others: Object.assign(Object.assign({}, defaultCustomTokens.others), themeCustomTokens.others),
690
+ border: Object.assign(Object.assign({}, defaultCustomTokens.border), themeCustomTokens.border),
691
+ overflow: Object.assign(Object.assign({}, defaultCustomTokens.overflow), themeCustomTokens.overflow)
692
+ };
693
+ }
630
694
  /**
631
695
  * Used to access antd's token values from react components.
632
696
  * For detailed usage see,
@@ -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.1",
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
  }