@lobehub/ui 5.32.0 → 5.32.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Alert/style.mjs +17 -4
- package/es/Alert/style.mjs.map +1 -1
- package/es/Avatar/Avatar.mjs +2 -4
- package/es/Avatar/Avatar.mjs.map +1 -1
- package/es/Avatar/utils.mjs +1 -10
- package/es/Avatar/utils.mjs.map +1 -1
- package/es/ColorSwatches/ColorSwatches.mjs +1 -3
- package/es/ColorSwatches/ColorSwatches.mjs.map +1 -1
- package/es/Tag/Tag.mjs +2 -9
- package/es/Tag/Tag.mjs.map +1 -1
- package/es/awesome/Giscus/style.mjs +5 -1
- package/es/awesome/Giscus/style.mjs.map +1 -1
- package/es/static-css/themeVars.d.mts +1 -1
- package/es/static-css/themeVars.mjs +3 -21
- package/es/static-css/themeVars.mjs.map +1 -1
- package/es/utils/safeReadableColor.mjs +1 -10
- package/es/utils/safeReadableColor.mjs.map +1 -1
- package/package.json +1 -1
package/es/Alert/style.mjs
CHANGED
|
@@ -69,21 +69,34 @@ const styles = createStaticStyles(({ css, cssVar }) => {
|
|
|
69
69
|
|
|
70
70
|
max-width: 100%;
|
|
71
71
|
|
|
72
|
+
/* Every control anchors itself to the title's FIRST 24px line box via
|
|
73
|
+
align-self. Root-level align-items cannot be relied on: antd v6's own
|
|
74
|
+
base style centers the row, and whether it or these static styles win
|
|
75
|
+
depends on stylesheet injection order, which differs between
|
|
76
|
+
environments. Centering the row is also wrong for message-only alerts
|
|
77
|
+
whose content wraps - the icon drifts to the middle of the block. */
|
|
72
78
|
.${prefixCls}-alert-icon {
|
|
73
79
|
display: flex;
|
|
74
80
|
align-items: center;
|
|
81
|
+
align-self: flex-start;
|
|
82
|
+
|
|
75
83
|
height: 24px;
|
|
76
84
|
margin: 0;
|
|
77
85
|
}
|
|
78
86
|
.${prefixCls}-alert-close-icon {
|
|
79
87
|
display: flex;
|
|
80
88
|
align-items: center;
|
|
89
|
+
align-self: flex-start;
|
|
90
|
+
|
|
81
91
|
height: 24px;
|
|
82
92
|
margin: 0;
|
|
83
93
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
94
|
+
.${prefixCls}-alert-actions {
|
|
95
|
+
display: flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
align-self: flex-start;
|
|
98
|
+
height: 24px;
|
|
99
|
+
}
|
|
87
100
|
`,
|
|
88
101
|
rootNoTitleNoIconNoClosable: css`
|
|
89
102
|
gap: 8px;
|
|
@@ -290,7 +303,7 @@ const rootVariants = cva(styles.rootBase, {
|
|
|
290
303
|
true: styles.glass
|
|
291
304
|
},
|
|
292
305
|
hasTitle: {
|
|
293
|
-
false:
|
|
306
|
+
false: null,
|
|
294
307
|
true: null
|
|
295
308
|
},
|
|
296
309
|
showIcon: {
|
package/es/Alert/style.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Alert/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n banner: css`\n border: none !important;\n border-radius: 0 !important;\n `,\n borderless: css`\n padding: 0 !important;\n border: none !important;\n background: transparent !important;\n `,\n borderlessExtraHeaderNoTitle: css`\n margin-block-start: 8px;\n padding-inline: 0;\n `,\n borderlessExtraHeaderWithTitle: css`\n margin-block-start: 16px;\n padding-inline: 0;\n `,\n colorfulText: css`\n .${prefixCls}-alert-message,.${prefixCls}-alert-description {\n color: inherit;\n }\n `,\n expandText: css`\n padding-inline-end: 12px;\n\n &:hover {\n cursor: pointer;\n }\n `,\n extra: css`\n position: relative;\n\n overflow: hidden;\n\n max-width: 100%;\n border: 1px solid;\n border-block-start: none;\n border-end-start-radius: ${cssVar.borderRadiusLG};\n border-end-end-radius: ${cssVar.borderRadiusLG};\n `,\n extraHeader: css`\n border-block-start: 1px dashed;\n border-radius: 0;\n background: transparent !important;\n `,\n filled: css``,\n glass: lobeStaticStylish.blur,\n hasExtra: css`\n border-block-end: none;\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n `,\n outlined: css`\n background: transparent !important;\n `,\n // Root variants based on closable, hasTitle, showIcon combinations\n rootBase: css`\n position: relative;\n\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n\n max-width: 100%;\n\n .${prefixCls}-alert-icon {\n display: flex;\n align-items: center;\n height: 24px;\n margin: 0;\n }\n .${prefixCls}-alert-close-icon {\n display: flex;\n align-items: center;\n height: 24px;\n margin: 0;\n }\n `,\n rootSingleLine: css`\n align-items: center;\n `,\n rootNoTitleNoIconNoClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootNoTitleNoIconWithClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 12px 9px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootNoTitleWithIconNoClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 9px 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootNoTitleWithIconWithClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 9px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootWithTitleNoIconNoClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 16px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n rootWithTitleNoIconWithClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 16px 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n rootWithTitleWithIconNoClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 12px 16px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n rootWithTitleWithIconWithClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n };\n});\n\nexport const extraVariants = cva(styles.extra, {\n defaultVariants: {\n variant: 'filled',\n },\n\n variants: {\n variant: {\n filled: styles.filled,\n outlined: styles.outlined,\n borderless: styles.borderless,\n },\n banner: {\n false: null,\n true: styles.banner,\n },\n },\n});\n\nexport const rootVariants = cva(styles.rootBase, {\n compoundVariants: [\n {\n class: styles.rootNoTitleNoIconNoClosable,\n closable: false,\n hasTitle: false,\n showIcon: false,\n },\n {\n class: styles.rootNoTitleNoIconWithClosable,\n closable: true,\n hasTitle: false,\n showIcon: false,\n },\n {\n class: styles.rootNoTitleWithIconNoClosable,\n closable: false,\n hasTitle: false,\n showIcon: true,\n },\n {\n class: styles.rootNoTitleWithIconWithClosable,\n closable: true,\n hasTitle: false,\n showIcon: true,\n },\n {\n class: styles.rootWithTitleNoIconNoClosable,\n closable: false,\n hasTitle: true,\n showIcon: false,\n },\n {\n class: styles.rootWithTitleNoIconWithClosable,\n closable: true,\n hasTitle: true,\n showIcon: false,\n },\n {\n class: styles.rootWithTitleWithIconNoClosable,\n closable: false,\n hasTitle: true,\n showIcon: true,\n },\n {\n class: styles.rootWithTitleWithIconWithClosable,\n closable: true,\n hasTitle: true,\n showIcon: true,\n },\n ],\n defaultVariants: {\n closable: false,\n colorfulText: true,\n glass: false,\n hasTitle: false,\n showIcon: false,\n variant: 'filled',\n },\n\n variants: {\n closable: {\n false: null,\n true: null,\n },\n colorfulText: {\n false: null,\n true: styles.colorfulText,\n },\n glass: {\n false: null,\n true: styles.glass,\n },\n hasTitle: {\n false: styles.rootSingleLine,\n true: null,\n },\n showIcon: {\n false: null,\n true: null,\n },\n variant: {\n borderless: styles.borderless,\n filled: styles.filled,\n outlined: styles.outlined,\n },\n hasExtra: {\n false: null,\n true: styles.hasExtra,\n },\n },\n});\n\nexport const extraHeaderVariants = cva(styles.extraHeader, {\n compoundVariants: [\n {\n class: styles.borderlessExtraHeaderNoTitle,\n hasTitle: false,\n variant: 'borderless',\n },\n {\n class: styles.borderlessExtraHeaderWithTitle,\n hasTitle: true,\n variant: 'borderless',\n },\n ],\n defaultVariants: {\n hasTitle: false,\n variant: 'filled',\n },\n\n variants: {\n hasTitle: {\n false: null,\n true: null,\n },\n variant: {\n borderless: null,\n filled: null,\n outlined: null,\n },\n },\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Alert/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n banner: css`\n border: none !important;\n border-radius: 0 !important;\n `,\n borderless: css`\n padding: 0 !important;\n border: none !important;\n background: transparent !important;\n `,\n borderlessExtraHeaderNoTitle: css`\n margin-block-start: 8px;\n padding-inline: 0;\n `,\n borderlessExtraHeaderWithTitle: css`\n margin-block-start: 16px;\n padding-inline: 0;\n `,\n colorfulText: css`\n .${prefixCls}-alert-message,.${prefixCls}-alert-description {\n color: inherit;\n }\n `,\n expandText: css`\n padding-inline-end: 12px;\n\n &:hover {\n cursor: pointer;\n }\n `,\n extra: css`\n position: relative;\n\n overflow: hidden;\n\n max-width: 100%;\n border: 1px solid;\n border-block-start: none;\n border-end-start-radius: ${cssVar.borderRadiusLG};\n border-end-end-radius: ${cssVar.borderRadiusLG};\n `,\n extraHeader: css`\n border-block-start: 1px dashed;\n border-radius: 0;\n background: transparent !important;\n `,\n filled: css``,\n glass: lobeStaticStylish.blur,\n hasExtra: css`\n border-block-end: none;\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n `,\n outlined: css`\n background: transparent !important;\n `,\n // Root variants based on closable, hasTitle, showIcon combinations\n rootBase: css`\n position: relative;\n\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n\n max-width: 100%;\n\n /* Every control anchors itself to the title's FIRST 24px line box via\n align-self. Root-level align-items cannot be relied on: antd v6's own\n base style centers the row, and whether it or these static styles win\n depends on stylesheet injection order, which differs between\n environments. Centering the row is also wrong for message-only alerts\n whose content wraps - the icon drifts to the middle of the block. */\n .${prefixCls}-alert-icon {\n display: flex;\n align-items: center;\n align-self: flex-start;\n\n height: 24px;\n margin: 0;\n }\n .${prefixCls}-alert-close-icon {\n display: flex;\n align-items: center;\n align-self: flex-start;\n\n height: 24px;\n margin: 0;\n }\n .${prefixCls}-alert-actions {\n display: flex;\n align-items: center;\n align-self: flex-start;\n height: 24px;\n }\n `,\n rootNoTitleNoIconNoClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootNoTitleNoIconWithClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 12px 9px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootNoTitleWithIconNoClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 9px 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootNoTitleWithIconWithClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 9px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootWithTitleNoIconNoClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 16px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n rootWithTitleNoIconWithClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 16px 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n rootWithTitleWithIconNoClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 12px 16px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n rootWithTitleWithIconWithClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n };\n});\n\nexport const extraVariants = cva(styles.extra, {\n defaultVariants: {\n variant: 'filled',\n },\n\n variants: {\n variant: {\n filled: styles.filled,\n outlined: styles.outlined,\n borderless: styles.borderless,\n },\n banner: {\n false: null,\n true: styles.banner,\n },\n },\n});\n\nexport const rootVariants = cva(styles.rootBase, {\n compoundVariants: [\n {\n class: styles.rootNoTitleNoIconNoClosable,\n closable: false,\n hasTitle: false,\n showIcon: false,\n },\n {\n class: styles.rootNoTitleNoIconWithClosable,\n closable: true,\n hasTitle: false,\n showIcon: false,\n },\n {\n class: styles.rootNoTitleWithIconNoClosable,\n closable: false,\n hasTitle: false,\n showIcon: true,\n },\n {\n class: styles.rootNoTitleWithIconWithClosable,\n closable: true,\n hasTitle: false,\n showIcon: true,\n },\n {\n class: styles.rootWithTitleNoIconNoClosable,\n closable: false,\n hasTitle: true,\n showIcon: false,\n },\n {\n class: styles.rootWithTitleNoIconWithClosable,\n closable: true,\n hasTitle: true,\n showIcon: false,\n },\n {\n class: styles.rootWithTitleWithIconNoClosable,\n closable: false,\n hasTitle: true,\n showIcon: true,\n },\n {\n class: styles.rootWithTitleWithIconWithClosable,\n closable: true,\n hasTitle: true,\n showIcon: true,\n },\n ],\n defaultVariants: {\n closable: false,\n colorfulText: true,\n glass: false,\n hasTitle: false,\n showIcon: false,\n variant: 'filled',\n },\n\n variants: {\n closable: {\n false: null,\n true: null,\n },\n colorfulText: {\n false: null,\n true: styles.colorfulText,\n },\n glass: {\n false: null,\n true: styles.glass,\n },\n hasTitle: {\n false: null,\n true: null,\n },\n showIcon: {\n false: null,\n true: null,\n },\n variant: {\n borderless: styles.borderless,\n filled: styles.filled,\n outlined: styles.outlined,\n },\n hasExtra: {\n false: null,\n true: styles.hasExtra,\n },\n },\n});\n\nexport const extraHeaderVariants = cva(styles.extraHeader, {\n compoundVariants: [\n {\n class: styles.borderlessExtraHeaderNoTitle,\n hasTitle: false,\n variant: 'borderless',\n },\n {\n class: styles.borderlessExtraHeaderWithTitle,\n hasTitle: true,\n variant: 'borderless',\n },\n ],\n defaultVariants: {\n hasTitle: false,\n variant: 'filled',\n },\n\n variants: {\n hasTitle: {\n false: null,\n true: null,\n },\n variant: {\n borderless: null,\n filled: null,\n outlined: null,\n },\n },\n});\n"],"mappings":";;;;AAKA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQ,GAAG;;;;EAIX,YAAY,GAAG;;;;;EAKf,8BAA8B,GAAG;;;;EAIjC,gCAAgC,GAAG;;;;EAInC,cAAc,GAAG;SACZ,UAAU,kBAAkB,UAAU;;;;EAI3C,YAAY,GAAG;;;;;;;EAOf,OAAO,GAAG;;;;;;;;iCAQmB,OAAO,eAAe;+BACxB,OAAO,eAAe;;EAEjD,aAAa,GAAG;;;;;EAKhB,QAAQ,GAAG;EACX,OAAOA,cAAkB;EACzB,UAAU,GAAG;;;;;EAKb,UAAU,GAAG;;;EAIb,UAAU,GAAG;;;;;;;;;;;;;;;SAeR,UAAU;;;;;;;;SAQV,UAAU;;;;;;;;SAQV,UAAU;;;;;;;EAOf,6BAA6B,GAAG;;;;;SAK3B,UAAU;;;;;;;EAOf,+BAA+B,GAAG;;;;;SAK7B,UAAU;;;;;;;EAOf,+BAA+B,GAAG;;;;;SAK7B,UAAU;;;;;;;EAOf,iCAAiC,GAAG;;;;;SAK/B,UAAU;;;;;;;EAOf,+BAA+B,GAAG;;;;;SAK7B,UAAU;;;;;;SAMV,UAAU;;;;;;EAMf,iCAAiC,GAAG;;;;;SAK/B,UAAU;;;;;;SAMV,UAAU;;;;;;EAMf,iCAAiC,GAAG;;;;;SAK/B,UAAU;;;;;;SAMV,UAAU;;;;;;EAMf,mCAAmC,GAAG;;;;;SAKjC,UAAU;;;;;;SAMV,UAAU;;;;;;CAMjB;AACF,CAAC;AAED,MAAa,gBAAgB,IAAI,OAAO,OAAO;CAC7C,iBAAiB,EACf,SAAS,SACX;CAEA,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;EACrB;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,UAAU;CAC/C,kBAAkB;EAChB;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;CACF;CACA,iBAAiB;EACf,UAAU;EACV,cAAc;EACd,OAAO;EACP,UAAU;EACV,UAAU;EACV,SAAS;CACX;CAEA,UAAU;EACR,UAAU;GACR,OAAO;GACP,MAAM;EACR;EACA,cAAc;GACZ,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,UAAU;GACR,OAAO;GACP,MAAM;EACR;EACA,UAAU;GACR,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;EACA,UAAU;GACR,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC;AAED,MAAa,sBAAsB,IAAI,OAAO,aAAa;CACzD,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,UAAU;EACV,SAAS;CACX,GACA;EACE,OAAO,OAAO;EACd,UAAU;EACV,SAAS;CACX,CACF;CACA,iBAAiB;EACf,UAAU;EACV,SAAS;CACX;CAEA,UAAU;EACR,UAAU;GACR,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY;GACZ,QAAQ;GACR,UAAU;EACZ;CACF;AACF,CAAC"}
|
package/es/Avatar/Avatar.mjs
CHANGED
|
@@ -5,7 +5,7 @@ import Icon from "../Icon/Icon.mjs";
|
|
|
5
5
|
import Img from "../Img/index.mjs";
|
|
6
6
|
import FluentEmoji from "../FluentEmoji/FluentEmoji.mjs";
|
|
7
7
|
import { styles, variants } from "./style.mjs";
|
|
8
|
-
import { calculateEmojiSize, formatAvatarText,
|
|
8
|
+
import { calculateEmojiSize, formatAvatarText, hasValidBackground, isDefaultAntAvatar } from "./utils.mjs";
|
|
9
9
|
import { memo, useMemo, useState } from "react";
|
|
10
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
11
|
import { Avatar } from "antd";
|
|
@@ -55,12 +55,11 @@ const Avatar$1 = memo(({ bordered, className, avatar, title, animation, bordered
|
|
|
55
55
|
unoptimized,
|
|
56
56
|
emojiScaleWithBackground
|
|
57
57
|
]);
|
|
58
|
-
const actualColorForReadable = useMemo(() => getActualColorForReadable(background, cssVar.colorBorder), [background]);
|
|
59
58
|
const avatarStyle = useMemo(() => ({
|
|
60
59
|
backgroundColor: isDefaultAntAvatar$1 && !isImgError || emoji ? background : background || cssVar.colorBorder,
|
|
61
60
|
borderRadius: shape === "square" && size && size < 24 ? "33%" : void 0,
|
|
62
61
|
boxShadow: bordered ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px` : void 0,
|
|
63
|
-
color: safeReadableColor(
|
|
62
|
+
color: safeReadableColor(background || cssVar.colorBorder),
|
|
64
63
|
cursor: rest?.onClick ? "pointer" : void 0,
|
|
65
64
|
fontSize: size * (emoji ? .7 : .5),
|
|
66
65
|
...style
|
|
@@ -73,7 +72,6 @@ const Avatar$1 = memo(({ bordered, className, avatar, title, animation, bordered
|
|
|
73
72
|
size,
|
|
74
73
|
bordered,
|
|
75
74
|
borderedColor,
|
|
76
|
-
actualColorForReadable,
|
|
77
75
|
rest?.onClick,
|
|
78
76
|
style
|
|
79
77
|
]);
|
package/es/Avatar/Avatar.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.mjs","names":["Avatar","isDefaultAntAvatar","checkIsDefaultAntAvatar","AntAvatar"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport { Avatar as AntAvatar } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { memo, useMemo, useState } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles, variants } from './style';\nimport { type AvatarProps } from './type';\nimport {\n calculateEmojiSize,\n formatAvatarText,\n
|
|
1
|
+
{"version":3,"file":"Avatar.mjs","names":["Avatar","isDefaultAntAvatar","checkIsDefaultAntAvatar","AntAvatar"],"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport { Avatar as AntAvatar } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { memo, useMemo, useState } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles, variants } from './style';\nimport { type AvatarProps } from './type';\nimport {\n calculateEmojiSize,\n formatAvatarText,\n hasValidBackground,\n isDefaultAntAvatar as checkIsDefaultAntAvatar,\n} from './utils';\n\nconst Avatar = memo<AvatarProps>(\n ({\n bordered,\n className,\n avatar,\n title,\n animation,\n borderedColor,\n size = 48,\n shape = 'square',\n background,\n style,\n unoptimized,\n alt,\n variant = 'borderless',\n shadow,\n loading,\n sliceText = true,\n emojiScaleWithBackground = true,\n ref,\n ...rest\n }) => {\n const isStringAvatar = typeof avatar === 'string';\n\n const isDefaultAntAvatar = useMemo(() => checkIsDefaultAntAvatar(avatar), [avatar]);\n const [isImgError, setIsImgError] = useState(false);\n\n const emoji = useMemo(\n () => avatar && !isDefaultAntAvatar && isStringAvatar && getEmoji(avatar),\n [avatar, isStringAvatar, isDefaultAntAvatar],\n );\n\n const text = String(isDefaultAntAvatar ? title : avatar);\n\n const imgAlt = alt || title || 'avatar';\n\n const defaultAvatar = useMemo(\n () =>\n typeof avatar === 'string' ? (\n <Img\n alt={imgAlt}\n height={size}\n loading={'lazy'}\n src={avatar}\n unoptimized={unoptimized}\n width={size}\n onError={() => setIsImgError(true)}\n />\n ) : (\n avatar\n ),\n [avatar, imgAlt, size, unoptimized],\n );\n\n const hasBackground = hasValidBackground(background);\n\n const customAvatar = useMemo(\n () =>\n emoji ? (\n <FluentEmoji\n emoji={emoji}\n size={calculateEmojiSize(size, hasBackground, emojiScaleWithBackground)}\n type={animation ? 'anim' : '3d'}\n unoptimized={unoptimized}\n />\n ) : (\n formatAvatarText(text || title, sliceText)\n ),\n [\n animation,\n emoji,\n hasBackground,\n size,\n sliceText,\n text,\n title,\n unoptimized,\n emojiScaleWithBackground,\n ],\n );\n\n const avatarStyle = useMemo(\n () => ({\n backgroundColor:\n (isDefaultAntAvatar && !isImgError) || emoji\n ? background\n : background || cssVar.colorBorder,\n borderRadius: shape === 'square' && size && size < 24 ? '33%' : undefined,\n boxShadow: bordered\n ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px`\n : undefined,\n color: safeReadableColor(background || cssVar.colorBorder),\n cursor: rest?.onClick ? 'pointer' : undefined,\n fontSize: size * (emoji ? 0.7 : 0.5),\n ...style,\n }),\n [\n isDefaultAntAvatar,\n isImgError,\n background,\n shape,\n emoji,\n size,\n bordered,\n borderedColor,\n rest?.onClick,\n style,\n ],\n );\n\n const showFallback = !isDefaultAntAvatar || isImgError;\n\n return (\n <AntAvatar\n alt={imgAlt}\n className={cx(variants({ shadow, variant }), className)}\n draggable={false}\n ref={ref}\n shape={shape}\n size={size}\n src={isDefaultAntAvatar && !isImgError ? defaultAvatar : undefined}\n style={avatarStyle}\n {...rest}\n >\n {loading && (\n <Center className={styles.loading} height={'100%'} width={'100%'}>\n <Icon spin icon={Loader2} />\n </Center>\n )}\n {showFallback && customAvatar}\n </AntAvatar>\n );\n },\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAMA,WAAS,MACZ,EACC,UACA,WACA,QACA,OACA,WACA,eACA,OAAO,IACP,QAAQ,UACR,YACA,OACA,aACA,KACA,UAAU,cACV,QACA,SACA,YAAY,MACZ,2BAA2B,MAC3B,KACA,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,WAAW;CAEzC,MAAMC,uBAAqB,cAAcC,mBAAwB,MAAM,GAAG,CAAC,MAAM,CAAC;CAClF,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,QAAQ,cACN,UAAU,CAACD,wBAAsB,kBAAkB,SAAS,MAAM,GACxE;EAAC;EAAQ;EAAgBA;CAAkB,CAC7C;CAEA,MAAM,OAAO,OAAOA,uBAAqB,QAAQ,MAAM;CAEvD,MAAM,SAAS,OAAO,SAAS;CAE/B,MAAM,gBAAgB,cAElB,OAAO,WAAW,WAChB,oBAAC,KAAD;EACE,KAAK;EACL,QAAQ;EACR,SAAS;EACT,KAAK;EACQ;EACb,OAAO;EACP,eAAe,cAAc,IAAI;CAClC,CAAA,IAED,QAEJ;EAAC;EAAQ;EAAQ;EAAM;CAAW,CACpC;CAEA,MAAM,gBAAgB,mBAAmB,UAAU;CAEnD,MAAM,eAAe,cAEjB,QACE,oBAAC,aAAD;EACS;EACP,MAAM,mBAAmB,MAAM,eAAe,wBAAwB;EACtE,MAAM,YAAY,SAAS;EACd;CACd,CAAA,IAED,iBAAiB,QAAQ,OAAO,SAAS,GAE7C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,cAAc,eACX;EACL,iBACGA,wBAAsB,CAAC,cAAe,QACnC,aACA,cAAc,OAAO;EAC3B,cAAc,UAAU,YAAY,QAAQ,OAAO,KAAK,QAAQ,KAAA;EAChE,WAAW,WACP,GAAG,OAAO,cAAc,cAAc,iBAAiB,OAAO,kBAAkB,cAChF,KAAA;EACJ,OAAO,kBAAkB,cAAc,OAAO,WAAW;EACzD,QAAQ,MAAM,UAAU,YAAY,KAAA;EACpC,UAAU,QAAQ,QAAQ,KAAM;EAChC,GAAG;CACL,IACA;EACEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM;EACN;CACF,CACF;CAEA,MAAM,eAAe,CAACA,wBAAsB;CAE5C,OACE,qBAACE,QAAD;EACE,KAAK;EACL,WAAW,GAAG,SAAS;GAAE;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACtD,WAAW;EACN;EACE;EACD;EACN,KAAKF,wBAAsB,CAAC,aAAa,gBAAgB,KAAA;EACzD,OAAO;EACP,GAAI;EATN,UAAA,CAWG,WACC,oBAAC,QAAD;GAAQ,WAAW,OAAO;GAAS,QAAQ;GAAQ,OAAO;GACxD,UAAA,oBAAC,MAAD;IAAM,MAAA;IAAK,MAAM;GAAU,CAAA;EACrB,CAAA,GAET,gBAAgB,YACR;;AAEf,CACF;AAEA,SAAO,cAAc"}
|
package/es/Avatar/utils.mjs
CHANGED
|
@@ -20,15 +20,6 @@ const hasValidBackground = (background) => {
|
|
|
20
20
|
return Boolean(background && background !== "transparent" && background !== "rgba(0,0,0,0)" && background !== null);
|
|
21
21
|
};
|
|
22
22
|
/**
|
|
23
|
-
* 获取用于可读性计算的实际颜色值
|
|
24
|
-
* 如果是 CSS 变量，返回 fallback 值
|
|
25
|
-
*/
|
|
26
|
-
const getActualColorForReadable = (background, fallbackColor) => {
|
|
27
|
-
const bgColor = background || fallbackColor;
|
|
28
|
-
if (typeof bgColor === "string" && bgColor.startsWith("var(")) return fallbackColor;
|
|
29
|
-
return bgColor;
|
|
30
|
-
};
|
|
31
|
-
/**
|
|
32
23
|
* 格式化头像文本（转大写并可选切片）
|
|
33
24
|
*/
|
|
34
25
|
const formatAvatarText = (text, sliceText) => {
|
|
@@ -44,6 +35,6 @@ const calculateEmojiSize = (size, hasBackground, emojiScaleWithBackground) => {
|
|
|
44
35
|
return size * .85;
|
|
45
36
|
};
|
|
46
37
|
//#endregion
|
|
47
|
-
export { calculateEmojiSize, formatAvatarText,
|
|
38
|
+
export { calculateEmojiSize, formatAvatarText, hasValidBackground, isDefaultAntAvatar };
|
|
48
39
|
|
|
49
40
|
//# sourceMappingURL=utils.mjs.map
|
package/es/Avatar/utils.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/Avatar/utils.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from 'react';\n\n/**\n * 判断 avatar 是否是默认的 Ant Design Avatar 类型\n * (URL 路径或 React 元素)\n */\nexport const isDefaultAntAvatar = (avatar: ReactNode): boolean => {\n if (!avatar) return false;\n\n const isStringAvatar = typeof avatar === 'string';\n const isUrlOrDataUri =\n isStringAvatar && ['/', 'http', 'data:'].some((prefix) => avatar.startsWith(prefix));\n\n return Boolean(isUrlOrDataUri || isValidElement(avatar));\n};\n\n/**\n * 判断是否有有效的背景色\n */\nexport const hasValidBackground = (background?: string | null): boolean => {\n return Boolean(\n background &&\n background !== 'transparent' &&\n background !== 'rgba(0,0,0,0)' &&\n background !== null,\n );\n};\n\n/**\n *
|
|
1
|
+
{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/Avatar/utils.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from 'react';\n\n/**\n * 判断 avatar 是否是默认的 Ant Design Avatar 类型\n * (URL 路径或 React 元素)\n */\nexport const isDefaultAntAvatar = (avatar: ReactNode): boolean => {\n if (!avatar) return false;\n\n const isStringAvatar = typeof avatar === 'string';\n const isUrlOrDataUri =\n isStringAvatar && ['/', 'http', 'data:'].some((prefix) => avatar.startsWith(prefix));\n\n return Boolean(isUrlOrDataUri || isValidElement(avatar));\n};\n\n/**\n * 判断是否有有效的背景色\n */\nexport const hasValidBackground = (background?: string | null): boolean => {\n return Boolean(\n background &&\n background !== 'transparent' &&\n background !== 'rgba(0,0,0,0)' &&\n background !== null,\n );\n};\n\n/**\n * 格式化头像文本（转大写并可选切片）\n */\nexport const formatAvatarText = (text: string | undefined, sliceText: boolean): string => {\n if (!text) return '';\n\n const upperText = text.toUpperCase();\n return sliceText ? upperText.slice(0, 2) : upperText;\n};\n\n/**\n * 计算 emoji 大小\n */\nexport const calculateEmojiSize = (\n size: number,\n hasBackground: boolean,\n emojiScaleWithBackground: boolean,\n): number => {\n if (emojiScaleWithBackground) {\n return hasBackground ? size * 0.85 : size;\n }\n return size * 0.85;\n};\n"],"mappings":";;;;;;AAMA,MAAa,sBAAsB,WAA+B;CAChE,IAAI,CAAC,QAAQ,OAAO;CAGpB,MAAM,iBADiB,OAAO,WAAW,YAErB;EAAC;EAAK;EAAQ;CAAO,CAAC,CAAC,MAAM,WAAW,OAAO,WAAW,MAAM,CAAC;CAErF,OAAO,QAAQ,kBAAkB,eAAe,MAAM,CAAC;AACzD;;;;AAKA,MAAa,sBAAsB,eAAwC;CACzE,OAAO,QACL,cACA,eAAe,iBACf,eAAe,mBACf,eAAe,IACjB;AACF;;;;AAKA,MAAa,oBAAoB,MAA0B,cAA+B;CACxF,IAAI,CAAC,MAAM,OAAO;CAElB,MAAM,YAAY,KAAK,YAAY;CACnC,OAAO,YAAY,UAAU,MAAM,GAAG,CAAC,IAAI;AAC7C;;;;AAKA,MAAa,sBACX,MACA,eACA,6BACW;CACX,IAAI,0BACF,OAAO,gBAAgB,OAAO,MAAO;CAEvC,OAAO,OAAO;AAChB"}
|
|
@@ -10,7 +10,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
10
10
|
import { ColorPicker } from "antd";
|
|
11
11
|
import { cssVar, cx } from "antd-style";
|
|
12
12
|
import useMergeState from "use-merge-value";
|
|
13
|
-
import { rgba } from "polished";
|
|
14
13
|
import { CheckIcon } from "lucide-react";
|
|
15
14
|
import chroma from "chroma-js";
|
|
16
15
|
//#region src/ColorSwatches/ColorSwatches.tsx
|
|
@@ -42,7 +41,6 @@ const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultV
|
|
|
42
41
|
return false;
|
|
43
42
|
}
|
|
44
43
|
})();
|
|
45
|
-
const actualColorForReadable = c.color?.startsWith("var(") ? cssVar.colorPrimary : color;
|
|
46
44
|
return /* @__PURE__ */ jsx(Tooltip$1, {
|
|
47
45
|
title: c.title,
|
|
48
46
|
children: /* @__PURE__ */ jsx(Center, {
|
|
@@ -53,7 +51,7 @@ const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultV
|
|
|
53
51
|
},
|
|
54
52
|
onClick: () => setActive(c.color || void 0),
|
|
55
53
|
children: isActive && /* @__PURE__ */ jsx(Icon, {
|
|
56
|
-
color:
|
|
54
|
+
color: `color-mix(in srgb, ${safeReadableColor(color)} 33%, transparent)`,
|
|
57
55
|
icon: CheckIcon,
|
|
58
56
|
size: {
|
|
59
57
|
size: 14,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorSwatches.mjs","names":["Flexbox","Tooltip"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport { ColorPicker } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport {
|
|
1
|
+
{"version":3,"file":"ColorSwatches.mjs","names":["Flexbox","Tooltip"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport { ColorPicker } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Tooltip from '@/Tooltip';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles } from './style';\nimport type { ColorSwatchesProps } from './type';\n\nconst ColorSwatches: FC<ColorSwatchesProps> = ({\n enableColorPicker,\n enableColorSwatches = true,\n defaultValue,\n value,\n style,\n colors,\n onChange,\n size = 24,\n shape = 'circle',\n texts,\n ref,\n ...rest\n}) => {\n const [active, setActive] = useMergeState(defaultValue, {\n defaultValue,\n onChange,\n value,\n });\n\n // Convert size prop to CSS variable\n const cssVariables = useMemo<Record<string, string>>(\n () => ({\n '--color-swatches-size': `${size}px`,\n }),\n [size],\n );\n\n const isCustomActive = useMemo(\n () => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active),\n [active, colors],\n );\n\n return (\n <Flexbox\n horizontal\n gap={6}\n ref={ref}\n style={{\n ...cssVariables,\n flexWrap: 'wrap',\n ...style,\n }}\n {...rest}\n >\n {enableColorSwatches &&\n colors.map((c, i) => {\n const color = c.color || cssVar.colorPrimary;\n const isActive = (!active && !c.color) || color === active;\n // Check if color is transparent or CSS variable (which chroma can't parse)\n const isTransparent =\n c.color === 'transparent' ||\n (c.color &&\n !c.color.startsWith('var(') &&\n (() => {\n try {\n return chroma(c.color).alpha() === 0;\n } catch {\n return false;\n }\n })());\n return (\n <Tooltip key={c?.key || i} title={c.title}>\n <Center\n className={cx(\n styles.container,\n isTransparent && styles.transparent,\n isActive && styles.active,\n )}\n style={{\n background: isTransparent ? undefined : color,\n borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n }}\n onClick={() => setActive(c.color || undefined)}\n >\n {isActive && (\n <Icon\n color={`color-mix(in srgb, ${safeReadableColor(color)} 33%, transparent)`}\n icon={CheckIcon}\n size={{ size: 14, strokeWidth: 4 }}\n style={{\n pointerEvents: 'none',\n }}\n />\n )}\n </Center>\n </Tooltip>\n );\n })}\n {enableColorPicker && (\n <Tooltip title={texts?.custom || 'Custom'}>\n <ColorPicker\n disabledAlpha\n arrow={false}\n defaultValue={cssVar.colorPrimary}\n format={'hex'}\n value={enableColorSwatches ? undefined : active}\n className={cx(\n styles.picker,\n enableColorSwatches && styles.conic,\n isCustomActive && styles.active,\n )}\n presets={\n enableColorSwatches\n ? undefined\n : [\n {\n colors: colors.map((c) => c.color),\n label: texts?.presets || 'Presets',\n },\n ]\n }\n style={{\n borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n }}\n onChangeComplete={(c) => {\n if (c.toHexString() === cssVar.colorPrimary) {\n setActive('');\n } else {\n setActive(c.toHexString());\n }\n }}\n />\n </Tooltip>\n )}\n </Flexbox>\n );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,cAAc,cAAc;EACtD;EACA;EACA;CACF,CAAC;CAGD,MAAM,eAAe,eACZ,EACL,yBAAyB,GAAG,KAAK,IACnC,IACA,CAAC,IAAI,CACP;CAEA,MAAM,iBAAiB,cACf,UAAU,WAAW,OAAO,gBAAgB,CAAC,OAAO,MAAM,MAAM,EAAE,UAAU,MAAM,GACxF,CAAC,QAAQ,MAAM,CACjB;CAEA,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,KAAK;EACA;EACL,OAAO;GACL,GAAG;GACH,UAAU;GACV,GAAG;EACL;EACA,GAAI;EATN,UAAA,CAWG,uBACC,OAAO,KAAK,GAAG,MAAM;GACnB,MAAM,QAAQ,EAAE,SAAS,OAAO;GAChC,MAAM,WAAY,CAAC,UAAU,CAAC,EAAE,SAAU,UAAU;GAEpD,MAAM,gBACJ,EAAE,UAAU,iBACX,EAAE,SACD,CAAC,EAAE,MAAM,WAAW,MAAM,YACnB;IACL,IAAI;KACF,OAAO,OAAO,EAAE,KAAK,CAAC,CAAC,MAAM,MAAM;IACrC,QAAQ;KACN,OAAO;IACT;GACF,EAAA,CAAG;GACP,OACE,oBAACC,WAAD;IAA2B,OAAO,EAAE;IAClC,UAAA,oBAAC,QAAD;KACE,WAAW,GACT,OAAO,WACP,iBAAiB,OAAO,aACxB,YAAY,OAAO,MACrB;KACA,OAAO;MACL,YAAY,gBAAgB,KAAA,IAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,OAAO;KACpD;KACA,eAAe,UAAU,EAAE,SAAS,KAAA,CAAS;KAE5C,UAAA,YACC,oBAAC,MAAD;MACE,OAAO,sBAAsB,kBAAkB,KAAK,EAAE;MACtD,MAAM;MACN,MAAM;OAAE,MAAM;OAAI,aAAa;MAAE;MACjC,OAAO,EACL,eAAe,OACjB;KACD,CAAA;IAEG,CAAA;GACD,GAxBK,GAAG,OAAO,CAwBf;EAEb,CAAC,GACF,qBACC,oBAACA,WAAD;GAAS,OAAO,OAAO,UAAU;GAC/B,UAAA,oBAAC,aAAD;IACE,eAAA;IACA,OAAO;IACP,cAAc,OAAO;IACrB,QAAQ;IACR,OAAO,sBAAsB,KAAA,IAAY;IACzC,WAAW,GACT,OAAO,QACP,uBAAuB,OAAO,OAC9B,kBAAkB,OAAO,MAC3B;IACA,SACE,sBACI,KAAA,IACA,CACE;KACE,QAAQ,OAAO,KAAK,MAAM,EAAE,KAAK;KACjC,OAAO,OAAO,WAAW;IAC3B,CACF;IAEN,OAAO,EACL,cAAc,UAAU,WAAW,QAAQ,OAAO,aACpD;IACA,mBAAmB,MAAM;KACvB,IAAI,EAAE,YAAY,MAAM,OAAO,cAC7B,UAAU,EAAE;UAEZ,UAAU,EAAE,YAAY,CAAC;IAE7B;GACD,CAAA;EACM,CAAA,CAEJ;;AAEb;AAEA,cAAc,cAAc"}
|
package/es/Tag/Tag.mjs
CHANGED
|
@@ -9,13 +9,6 @@ import { cssVar, cx } from "antd-style";
|
|
|
9
9
|
//#region src/Tag/Tag.tsx
|
|
10
10
|
const Tag$1 = ({ className, ref, shape = "normal", size = "middle", color, variant = "filled", children, onClick, style, ...rest }) => {
|
|
11
11
|
const colors = useMemo(() => {
|
|
12
|
-
const resolveActualColor = (colorValue) => {
|
|
13
|
-
if (!colorValue || !colorValue.startsWith("var(")) return colorValue;
|
|
14
|
-
if (typeof window === "undefined") return colorValue;
|
|
15
|
-
const matched = colorValue.match(/var\((--[^,\s)]+)/);
|
|
16
|
-
if (!matched?.[1]) return colorValue;
|
|
17
|
-
return window.getComputedStyle(document.documentElement).getPropertyValue(matched[1]).trim() || colorValue;
|
|
18
|
-
};
|
|
19
12
|
let textColor = cssVar.colorTextSecondary;
|
|
20
13
|
let backgroundColor;
|
|
21
14
|
let borderColor;
|
|
@@ -27,13 +20,13 @@ const Tag$1 = ({ className, ref, shape = "normal", size = "middle", color, varia
|
|
|
27
20
|
const isHexColor = color && color.startsWith("#");
|
|
28
21
|
if (isPresetColor) {
|
|
29
22
|
const solidBgColor = colorsPreset(color);
|
|
30
|
-
textColor = isSolid ? safeReadableColor(
|
|
23
|
+
textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPreset(color, "active");
|
|
31
24
|
backgroundColor = isSolid ? solidBgColor : isBorderless ? "transparent" : colorsPreset(color, "fillTertiary");
|
|
32
25
|
borderColor = isSolid ? solidBgColor : colorsPreset(color, isFilled ? "fillQuaternary" : "fillTertiary");
|
|
33
26
|
}
|
|
34
27
|
if (isPresetSystemColors) {
|
|
35
28
|
const solidBgColor = colorsPresetSystem(color);
|
|
36
|
-
textColor = isSolid ? safeReadableColor(
|
|
29
|
+
textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPresetSystem(color);
|
|
37
30
|
backgroundColor = isSolid ? solidBgColor : isBorderless ? "transparent" : colorsPresetSystem(color, "fillTertiary");
|
|
38
31
|
borderColor = isSolid ? solidBgColor : colorsPresetSystem(color, isFilled ? "fillQuaternary" : "fillTertiary");
|
|
39
32
|
}
|
package/es/Tag/Tag.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.mjs","names":["Tag","AntTag"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport { Tag as AntTag } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from '@/Tag/utils';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { variants } from './styles';\nimport type { TagProps } from './type';\n\nconst Tag: FC<TagProps> = ({\n className,\n ref,\n shape = 'normal',\n size = 'middle',\n color,\n variant = 'filled',\n children,\n onClick,\n style,\n ...rest\n}) => {\n const colors = useMemo(() => {\n
|
|
1
|
+
{"version":3,"file":"Tag.mjs","names":["Tag","AntTag"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport { Tag as AntTag } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from '@/Tag/utils';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { variants } from './styles';\nimport type { TagProps } from './type';\n\nconst Tag: FC<TagProps> = ({\n className,\n ref,\n shape = 'normal',\n size = 'middle',\n color,\n variant = 'filled',\n children,\n onClick,\n style,\n ...rest\n}) => {\n const colors = useMemo(() => {\n let textColor = cssVar.colorTextSecondary;\n let backgroundColor;\n let borderColor;\n const isBorderless = variant === 'borderless';\n const isFilled = variant === 'filled';\n const isSolid = variant === 'solid';\n const isPresetColor = color && presetColors.includes(color);\n const isPresetSystemColors = color && presetSystemColors.has(color);\n const isHexColor = color && color.startsWith('#');\n\n if (isPresetColor) {\n const solidBgColor = colorsPreset(color);\n textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPreset(color, 'active');\n backgroundColor = isSolid\n ? solidBgColor\n : isBorderless\n ? 'transparent'\n : colorsPreset(color, 'fillTertiary');\n borderColor = isSolid\n ? solidBgColor\n : colorsPreset(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n }\n if (isPresetSystemColors) {\n const solidBgColor = colorsPresetSystem(color);\n textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPresetSystem(color);\n backgroundColor = isSolid\n ? solidBgColor\n : isBorderless\n ? 'transparent'\n : colorsPresetSystem(color, 'fillTertiary');\n borderColor = isSolid\n ? solidBgColor\n : colorsPresetSystem(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n }\n if (isHexColor) {\n textColor = isSolid ? safeReadableColor(color) : cssVar.colorBgLayout;\n backgroundColor = isSolid ? color : isBorderless ? 'transparent' : color;\n borderColor = isSolid ? color : borderColor;\n }\n\n return {\n backgroundColor,\n borderColor,\n textColor,\n };\n }, [color, variant]);\n\n return (\n <AntTag\n className={cx(variants({ shape, size, variant: variant as any }), className)}\n color={color}\n ref={ref}\n variant={variant === 'borderless' ? 'outlined' : variant === 'solid' ? 'filled' : variant}\n style={{\n background: colors?.backgroundColor,\n borderColor: colors?.borderColor,\n color: colors?.textColor,\n cursor: onClick ? 'pointer' : undefined,\n ...style,\n }}\n onClick={onClick}\n {...rest}\n >\n {children}\n </AntTag>\n );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;;AAYA,MAAMA,SAAqB,EACzB,WACA,KACA,QAAQ,UACR,OAAO,UACP,OACA,UAAU,UACV,UACA,SACA,OACA,GAAG,WACC;CACJ,MAAM,SAAS,cAAc;EAC3B,IAAI,YAAY,OAAO;EACvB,IAAI;EACJ,IAAI;EACJ,MAAM,eAAe,YAAY;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,UAAU,YAAY;EAC5B,MAAM,gBAAgB,SAAS,aAAa,SAAS,KAAK;EAC1D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,KAAK;EAClE,MAAM,aAAa,SAAS,MAAM,WAAW,GAAG;EAEhD,IAAI,eAAe;GACjB,MAAM,eAAe,aAAa,KAAK;GACvC,YAAY,UAAU,kBAAkB,YAAY,IAAI,aAAa,OAAO,QAAQ;GACpF,kBAAkB,UACd,eACA,eACE,gBACA,aAAa,OAAO,cAAc;GACxC,cAAc,UACV,eACA,aAAa,OAAO,WAAW,mBAAmB,cAAc;EACtE;EACA,IAAI,sBAAsB;GACxB,MAAM,eAAe,mBAAmB,KAAK;GAC7C,YAAY,UAAU,kBAAkB,YAAY,IAAI,mBAAmB,KAAK;GAChF,kBAAkB,UACd,eACA,eACE,gBACA,mBAAmB,OAAO,cAAc;GAC9C,cAAc,UACV,eACA,mBAAmB,OAAO,WAAW,mBAAmB,cAAc;EAC5E;EACA,IAAI,YAAY;GACd,YAAY,UAAU,kBAAkB,KAAK,IAAI,OAAO;GACxD,kBAAkB,UAAU,QAAQ,eAAe,gBAAgB;GACnE,cAAc,UAAU,QAAQ;EAClC;EAEA,OAAO;GACL;GACA;GACA;EACF;CACF,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,OACE,oBAACC,KAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAO;GAAe;EAAe,CAAC,GAAG,SAAS;EACpE;EACF;EACL,SAAS,YAAY,eAAe,aAAa,YAAY,UAAU,WAAW;EAClF,OAAO;GACL,YAAY,QAAQ;GACpB,aAAa,QAAQ;GACrB,OAAO,QAAQ;GACf,QAAQ,UAAU,YAAY,KAAA;GAC9B,GAAG;EACL;EACS;EACT,GAAI;EAEH;CACK,CAAA;AAEZ;AAEA,MAAI,cAAc"}
|
|
@@ -65,7 +65,11 @@ const useStyles = () => {
|
|
|
65
65
|
--color-btn-primary-hover-border: ${theme.colorPrimaryBorderHover};
|
|
66
66
|
--color-btn-primary-selected-bg: ${theme.colorPrimaryActive};
|
|
67
67
|
--color-btn-primary-selected-shadow: 0 0 transparent;
|
|
68
|
-
--color-btn-primary-disabled-text:
|
|
68
|
+
--color-btn-primary-disabled-text: color-mix(
|
|
69
|
+
in srgb,
|
|
70
|
+
${safeReadableColor(theme.colorPrimary)} 50%,
|
|
71
|
+
transparent
|
|
72
|
+
);
|
|
69
73
|
--color-btn-primary-disabled-bg: ${rgba(theme.colorPrimary, .5)};
|
|
70
74
|
--color-btn-primary-disabled-border: ${rgba(theme.colorPrimaryBorder, .5)};
|
|
71
75
|
--color-action-list-item-default-hover-bg: ${theme.colorFillQuaternary};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Giscus/style.ts"],"sourcesContent":["import { css, useTheme } from 'antd-style';\nimport { rgba } from 'polished';\nimport { useMemo } from 'react';\n\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nexport const useStyles = () => {\n const theme = useTheme();\n const colorText = theme.colorText;\n const colorTextSecondary = theme.colorTextSecondary;\n const colorTextTertiary = theme.colorTextTertiary;\n const colorRed = theme.colorError;\n const colorOrange = theme.colorWarning;\n const colorGreen = theme.colorSuccess;\n const colorBlue = theme.colorInfo;\n const loaderContainer = theme.isDarkMode\n ? 'https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg'\n : 'https://github.com/images/modules/pulls/progressive-disclosure-line.svg';\n const loadingImage = theme.isDarkMode\n ? 'https://github.githubassets.com/images/mona-loading-dark.gif'\n : 'https://github.githubassets.com/images/mona-loading-default.gif';\n const { styles } = css`\n main {\n --color-prettylights-syntax-comment: ${colorTextTertiary};\n --color-prettylights-syntax-constant: ${colorGreen};\n --color-prettylights-syntax-entity: ${colorOrange};\n --color-prettylights-syntax-storage-modifier-import: ${colorRed};\n --color-prettylights-syntax-entity-tag: ${colorBlue};\n --color-prettylights-syntax-keyword: ${colorBlue};\n --color-prettylights-syntax-string: ${colorGreen};\n --color-prettylights-syntax-variable: ${colorRed};\n --color-prettylights-syntax-brackethighlighter-unmatched: ${colorRed};\n --color-prettylights-syntax-invalid-illegal-text: ${colorTextSecondary};\n --color-prettylights-syntax-invalid-illegal-bg: ${rgba(colorRed, 0.4)};\n --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};\n --color-prettylights-syntax-carriage-return-bg: ${rgba(colorRed, 0.6)};\n --color-prettylights-syntax-string-regexp: ${colorGreen};\n --color-prettylights-syntax-markup-list: ${colorOrange};\n --color-prettylights-syntax-markup-heading: ${colorBlue};\n --color-prettylights-syntax-markup-italic: ${colorTextSecondary};\n --color-prettylights-syntax-markup-bold: ${colorTextSecondary};\n --color-prettylights-syntax-markup-deleted-text: ${colorTextSecondary};\n --color-prettylights-syntax-markup-deleted-bg: ${rgba(colorRed, 0.2)};\n --color-prettylights-syntax-markup-inserted-text: ${colorGreen};\n --color-prettylights-syntax-markup-inserted-bg: ${rgba(colorGreen, 0.2)};\n --color-prettylights-syntax-markup-changed-text: ${colorOrange};\n --color-prettylights-syntax-markup-changed-bg: ${rgba(colorRed, 0.2)};\n --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};\n --color-prettylights-syntax-markup-ignored-bg: ${rgba(colorBlue, 0.2)};\n --color-prettylights-syntax-meta-diff-range: ${colorOrange};\n --color-prettylights-syntax-brackethighlighter-angle: ${colorTextSecondary};\n --color-prettylights-syntax-sublimelinter-gutter-mark: ${colorTextTertiary};\n --color-prettylights-syntax-constant-other-reference-link: ${colorBlue};\n --color-btn-text: ${theme.colorText};\n --color-btn-bg: ${theme.colorFillTertiary};\n --color-btn-border: ${theme.colorBorderSecondary};\n --color-btn-shadow: 0 0 transparent;\n --color-btn-inset-shadow: 0 0 transparent;\n --color-btn-hover-bg: ${theme.colorFillSecondary};\n --color-btn-hover-border: ${theme.colorBorder};\n --color-btn-active-bg: ${theme.colorFillSecondary};\n --color-btn-active-border: ${theme.colorBorder};\n --color-btn-selected-bg: ${theme.colorFillSecondary};\n --color-btn-primary-text: ${safeReadableColor(theme.colorPrimary)};\n --color-btn-primary-bg: ${theme.colorPrimary};\n --color-btn-primary-border: ${theme.colorPrimaryBorder};\n --color-btn-primary-shadow: 0 0 transparent;\n --color-btn-primary-inset-shadow: 0 0 transparent;\n --color-btn-primary-hover-bg: ${theme.colorPrimaryHover};\n --color-btn-primary-hover-border: ${theme.colorPrimaryBorderHover};\n --color-btn-primary-selected-bg: ${theme.colorPrimaryActive};\n --color-btn-primary-selected-shadow: 0 0 transparent;\n --color-btn-primary-disabled-text: ${
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Giscus/style.ts"],"sourcesContent":["import { css, useTheme } from 'antd-style';\nimport { rgba } from 'polished';\nimport { useMemo } from 'react';\n\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nexport const useStyles = () => {\n const theme = useTheme();\n const colorText = theme.colorText;\n const colorTextSecondary = theme.colorTextSecondary;\n const colorTextTertiary = theme.colorTextTertiary;\n const colorRed = theme.colorError;\n const colorOrange = theme.colorWarning;\n const colorGreen = theme.colorSuccess;\n const colorBlue = theme.colorInfo;\n const loaderContainer = theme.isDarkMode\n ? 'https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg'\n : 'https://github.com/images/modules/pulls/progressive-disclosure-line.svg';\n const loadingImage = theme.isDarkMode\n ? 'https://github.githubassets.com/images/mona-loading-dark.gif'\n : 'https://github.githubassets.com/images/mona-loading-default.gif';\n const { styles } = css`\n main {\n --color-prettylights-syntax-comment: ${colorTextTertiary};\n --color-prettylights-syntax-constant: ${colorGreen};\n --color-prettylights-syntax-entity: ${colorOrange};\n --color-prettylights-syntax-storage-modifier-import: ${colorRed};\n --color-prettylights-syntax-entity-tag: ${colorBlue};\n --color-prettylights-syntax-keyword: ${colorBlue};\n --color-prettylights-syntax-string: ${colorGreen};\n --color-prettylights-syntax-variable: ${colorRed};\n --color-prettylights-syntax-brackethighlighter-unmatched: ${colorRed};\n --color-prettylights-syntax-invalid-illegal-text: ${colorTextSecondary};\n --color-prettylights-syntax-invalid-illegal-bg: ${rgba(colorRed, 0.4)};\n --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};\n --color-prettylights-syntax-carriage-return-bg: ${rgba(colorRed, 0.6)};\n --color-prettylights-syntax-string-regexp: ${colorGreen};\n --color-prettylights-syntax-markup-list: ${colorOrange};\n --color-prettylights-syntax-markup-heading: ${colorBlue};\n --color-prettylights-syntax-markup-italic: ${colorTextSecondary};\n --color-prettylights-syntax-markup-bold: ${colorTextSecondary};\n --color-prettylights-syntax-markup-deleted-text: ${colorTextSecondary};\n --color-prettylights-syntax-markup-deleted-bg: ${rgba(colorRed, 0.2)};\n --color-prettylights-syntax-markup-inserted-text: ${colorGreen};\n --color-prettylights-syntax-markup-inserted-bg: ${rgba(colorGreen, 0.2)};\n --color-prettylights-syntax-markup-changed-text: ${colorOrange};\n --color-prettylights-syntax-markup-changed-bg: ${rgba(colorRed, 0.2)};\n --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};\n --color-prettylights-syntax-markup-ignored-bg: ${rgba(colorBlue, 0.2)};\n --color-prettylights-syntax-meta-diff-range: ${colorOrange};\n --color-prettylights-syntax-brackethighlighter-angle: ${colorTextSecondary};\n --color-prettylights-syntax-sublimelinter-gutter-mark: ${colorTextTertiary};\n --color-prettylights-syntax-constant-other-reference-link: ${colorBlue};\n --color-btn-text: ${theme.colorText};\n --color-btn-bg: ${theme.colorFillTertiary};\n --color-btn-border: ${theme.colorBorderSecondary};\n --color-btn-shadow: 0 0 transparent;\n --color-btn-inset-shadow: 0 0 transparent;\n --color-btn-hover-bg: ${theme.colorFillSecondary};\n --color-btn-hover-border: ${theme.colorBorder};\n --color-btn-active-bg: ${theme.colorFillSecondary};\n --color-btn-active-border: ${theme.colorBorder};\n --color-btn-selected-bg: ${theme.colorFillSecondary};\n --color-btn-primary-text: ${safeReadableColor(theme.colorPrimary)};\n --color-btn-primary-bg: ${theme.colorPrimary};\n --color-btn-primary-border: ${theme.colorPrimaryBorder};\n --color-btn-primary-shadow: 0 0 transparent;\n --color-btn-primary-inset-shadow: 0 0 transparent;\n --color-btn-primary-hover-bg: ${theme.colorPrimaryHover};\n --color-btn-primary-hover-border: ${theme.colorPrimaryBorderHover};\n --color-btn-primary-selected-bg: ${theme.colorPrimaryActive};\n --color-btn-primary-selected-shadow: 0 0 transparent;\n --color-btn-primary-disabled-text: color-mix(\n in srgb,\n ${safeReadableColor(theme.colorPrimary)} 50%,\n transparent\n );\n --color-btn-primary-disabled-bg: ${rgba(theme.colorPrimary, 0.5)};\n --color-btn-primary-disabled-border: ${rgba(theme.colorPrimaryBorder, 0.5)};\n --color-action-list-item-default-hover-bg: ${theme.colorFillQuaternary};\n --color-segmented-control-bg: ${theme.colorFillTertiary};\n --color-segmented-control-button-bg: transparent;\n --color-segmented-control-button-selected-border: ${theme.colorBorder};\n --color-fg-default: ${theme.colorText};\n --color-fg-muted: ${theme.colorTextSecondary};\n --color-fg-subtle: ${theme.colorTextQuaternary};\n --color-canvas-default: transparent;\n --color-canvas-overlay: ${theme.colorBgElevated};\n --color-canvas-inset: transparent;\n --color-canvas-subtle: ${theme.colorFillQuaternary};\n --color-border-default: ${theme.colorBorder};\n --color-border-muted: ${theme.colorBorderSecondary};\n --color-neutral-muted: ${theme.colorFillQuaternary};\n --color-neutral-subtle: ${theme.colorFillTertiary};\n --color-accent-fg: ${theme.colorInfo};\n --color-accent-emphasis: ${theme.colorInfoBorderHover};\n --color-accent-muted: ${theme.colorInfoBorder};\n --color-accent-subtle: ${theme.colorInfoBg};\n --color-success-fg: ${theme.colorSuccess};\n --color-attention-fg: ${theme.colorWarning};\n --color-attention-muted: ${theme.colorWarningBorder};\n --color-attention-subtle: ${theme.colorWarningBg};\n --color-danger-fg: ${theme.colorError};\n --color-danger-muted: ${theme.colorErrorBorder};\n --color-danger-subtle: ${theme.colorErrorBg};\n --color-primer-shadow-inset: 0 0 transparent;\n --color-scale-gray-7: ${theme.colorBgContainer};\n --color-scale-blue-8: ${theme.colorInfoBg};\n --color-social-reaction-bg-hover: ${theme.colorFillSecondary};\n --color-social-reaction-bg-reacted-hover: ${theme.colorInfoBgHover};\n\n .markdown pre {\n color: ${colorText};\n }\n\n .pagination-loader-container {\n background-image: url(${loaderContainer});\n }\n\n .gsc-pagination-button {\n background-color: var(--color-btn-bg);\n }\n\n .gsc-reactions-popover {\n width: 170px;\n\n > .m-2 {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n }\n\n .gsc-emoji-button.has-reacted {\n border-color: ${theme.colorInfoBorderHover};\n border-radius: ${theme.borderRadius}px;\n }\n\n .gsc-loading-image {\n background-image: url(${loadingImage});\n }\n }\n `;\n\n return useMemo(() => `data:text/css;base64,${btoa(styles)}`, [styles]);\n};\n\nexport const formatLang = (lang: string) => {\n if (['zh_CN', 'zh_TW'].includes(lang)) {\n return lang.replace('_', '-');\n } else if (lang === 'zh_HK') {\n return 'zh-TW';\n } else {\n return lang.split('_')[0];\n }\n};\n"],"mappings":";;;;;AAMA,MAAa,kBAAkB;CAC7B,MAAM,QAAQ,SAAS;CACvB,MAAM,YAAY,MAAM;CACxB,MAAM,qBAAqB,MAAM;CACjC,MAAM,oBAAoB,MAAM;CAChC,MAAM,WAAW,MAAM;CACvB,MAAM,cAAc,MAAM;CAC1B,MAAM,aAAa,MAAM;CACzB,MAAM,YAAY,MAAM;CACxB,MAAM,kBAAkB,MAAM,aAC1B,iFACA;CACJ,MAAM,eAAe,MAAM,aACvB,iEACA;CACJ,MAAM,EAAE,WAAW,GAAG;;6CAEqB,kBAAkB;8CACjB,WAAW;4CACb,YAAY;6DACK,SAAS;gDACtB,UAAU;6CACb,UAAU;4CACX,WAAW;8CACT,SAAS;kEACW,SAAS;0DACjB,mBAAmB;wDACrB,KAAK,UAAU,EAAG,EAAE;0DAClB,mBAAmB;wDACrB,KAAK,UAAU,EAAG,EAAE;mDACzB,WAAW;iDACb,YAAY;oDACT,UAAU;mDACX,mBAAmB;iDACrB,mBAAmB;yDACX,mBAAmB;uDACrB,KAAK,UAAU,EAAG,EAAE;0DACjB,WAAW;wDACb,KAAK,YAAY,EAAG,EAAE;yDACrB,YAAY;uDACd,KAAK,UAAU,EAAG,EAAE;yDAClB,mBAAmB;uDACrB,KAAK,WAAW,EAAG,EAAE;qDACvB,YAAY;8DACH,mBAAmB;+DAClB,kBAAkB;mEACd,UAAU;0BACnD,MAAM,UAAU;wBAClB,MAAM,kBAAkB;4BACpB,MAAM,qBAAqB;;;8BAGzB,MAAM,mBAAmB;kCACrB,MAAM,YAAY;+BACrB,MAAM,mBAAmB;mCACrB,MAAM,YAAY;iCACpB,MAAM,mBAAmB;kCACxB,kBAAkB,MAAM,YAAY,EAAE;gCACxC,MAAM,aAAa;oCACf,MAAM,mBAAmB;;;sCAGvB,MAAM,kBAAkB;0CACpB,MAAM,wBAAwB;yCAC/B,MAAM,mBAAmB;;;;UAIxD,kBAAkB,MAAM,YAAY,EAAE;;;yCAGP,KAAK,MAAM,cAAc,EAAG,EAAE;6CAC1B,KAAK,MAAM,oBAAoB,EAAG,EAAE;mDAC9B,MAAM,oBAAoB;sCACvC,MAAM,kBAAkB;;0DAEJ,MAAM,YAAY;4BAChD,MAAM,UAAU;0BAClB,MAAM,mBAAmB;2BACxB,MAAM,oBAAoB;;gCAErB,MAAM,gBAAgB;;+BAEvB,MAAM,oBAAoB;gCACzB,MAAM,YAAY;8BACpB,MAAM,qBAAqB;+BAC1B,MAAM,oBAAoB;gCACzB,MAAM,kBAAkB;2BAC7B,MAAM,UAAU;iCACV,MAAM,qBAAqB;8BAC9B,MAAM,gBAAgB;+BACrB,MAAM,YAAY;4BACrB,MAAM,aAAa;8BACjB,MAAM,aAAa;iCAChB,MAAM,mBAAmB;kCACxB,MAAM,eAAe;2BAC5B,MAAM,WAAW;8BACd,MAAM,iBAAiB;+BACtB,MAAM,aAAa;;8BAEpB,MAAM,iBAAiB;8BACvB,MAAM,YAAY;0CACN,MAAM,mBAAmB;kDACjB,MAAM,iBAAiB;;;iBAGxD,UAAU;;;;gCAIK,gBAAgB;;;;;;;;;;;;;;;;;;wBAkBxB,MAAM,qBAAqB;yBAC1B,MAAM,aAAa;;;;gCAIZ,aAAa;;;;CAK3C,OAAO,cAAc,wBAAwB,KAAK,MAAM,KAAK,CAAC,MAAM,CAAC;AACvE;AAEA,MAAa,cAAc,SAAiB;CAC1C,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,IAAI,GAClC,OAAO,KAAK,QAAQ,KAAK,GAAG;MACvB,IAAI,SAAS,SAClB,OAAO;MAEP,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC;AAE3B"}
|
|
@@ -4,7 +4,7 @@ type ThemeAppearance = 'dark' | 'light';
|
|
|
4
4
|
interface ThemeVarsCssOptions {
|
|
5
5
|
/** selector activating an appearance; default matches next-themes' data-theme attribute */
|
|
6
6
|
appearanceSelector?: (appearance: ThemeAppearance) => string;
|
|
7
|
-
/** dark fixups for lobe-ui antdOverride
|
|
7
|
+
/** dark fixups for lobe-ui antdOverride primary-on-contrast rules */
|
|
8
8
|
compatRules?: boolean;
|
|
9
9
|
hrefTemplate?: (hash: string) => string;
|
|
10
10
|
/** same theme factory the app hands to ConfigProvider/ThemeProvider */
|
|
@@ -35,24 +35,6 @@ const toDeclarations = (token) => Object.entries(token).filter(([key, value]) =>
|
|
|
35
35
|
const cssValue = typeof value === "number" && !unitless.has(key) ? `${value}px` : String(value);
|
|
36
36
|
return `--ant-${toKebabCase(key)}: ${cssValue};`;
|
|
37
37
|
}).join("\n");
|
|
38
|
-
const isBrightColor = (value) => {
|
|
39
|
-
const hex = /^#([\da-f]{6})/i.exec(value)?.[1];
|
|
40
|
-
const rgb = /^rgba?\((\d+)[\s,]+(\d+)[\s,]+(\d+)/.exec(value);
|
|
41
|
-
const [r, g, b] = hex ? [
|
|
42
|
-
Number.parseInt(hex.slice(0, 2), 16),
|
|
43
|
-
Number.parseInt(hex.slice(2, 4), 16),
|
|
44
|
-
Number.parseInt(hex.slice(4, 6), 16)
|
|
45
|
-
] : rgb ? [
|
|
46
|
-
Number(rgb[1]),
|
|
47
|
-
Number(rgb[2]),
|
|
48
|
-
Number(rgb[3])
|
|
49
|
-
] : [
|
|
50
|
-
0,
|
|
51
|
-
0,
|
|
52
|
-
0
|
|
53
|
-
];
|
|
54
|
-
return (r * 299 + g * 587 + b * 114) / 1e3 > 128;
|
|
55
|
-
};
|
|
56
38
|
const loadAntdTokenModules = () => {
|
|
57
39
|
const antdLibDir = path.join(path.dirname(require.resolve("antd/package.json")), "lib");
|
|
58
40
|
return readdirSync(antdLibDir, { withFileTypes: true }).filter((entry) => entry.isDirectory()).map((entry) => entry.name).sort().map((name) => ({
|
|
@@ -80,8 +62,8 @@ const buildDarkComponentVars = (tokens) => {
|
|
|
80
62
|
skipped
|
|
81
63
|
};
|
|
82
64
|
};
|
|
83
|
-
const
|
|
84
|
-
|
|
65
|
+
const readableOnPrimary = "contrast-color(var(--ant-color-primary))";
|
|
66
|
+
const buildCompatRules = (darkSelector) => {
|
|
85
67
|
return [
|
|
86
68
|
[
|
|
87
69
|
`${darkSelector} .ant-btn-primary:not(:disabled)`,
|
|
@@ -114,7 +96,7 @@ const buildThemeVarsCss = (options = {}) => {
|
|
|
114
96
|
].join(",") + `{${toDeclarations(tokens.dark)}}`,
|
|
115
97
|
`${dark} [class*='css-var-']{${componentVars.css}}`
|
|
116
98
|
];
|
|
117
|
-
if (compatRules) blocks.push(buildCompatRules(dark
|
|
99
|
+
if (compatRules) blocks.push(buildCompatRules(dark));
|
|
118
100
|
const css = blocks.join("\n");
|
|
119
101
|
const hash = hashCss(css);
|
|
120
102
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeVars.mjs","names":["antdTheme"],"sources":["../../src/static-css/themeVars.ts"],"sourcesContent":["import { existsSync, readdirSync } from 'node:fs';\nimport { createRequire } from 'node:module';\nimport path from 'node:path';\n\nimport type { ThemeConfig } from 'antd';\nimport { theme as antdTheme } from 'antd';\n\nimport { createLobeAntdTheme } from '@/styles/theme/antdTheme';\n\nimport { hashCss } from './hash';\n\ntype ThemeAppearance = 'dark' | 'light';\n\nexport interface ThemeVarsCssOptions {\n /** selector activating an appearance; default matches next-themes' data-theme attribute */\n appearanceSelector?: (appearance: ThemeAppearance) => string;\n /** dark fixups for lobe-ui antdOverride rules that keep literal polished-derived colors */\n compatRules?: boolean;\n hrefTemplate?: (hash: string) => string;\n /** same theme factory the app hands to ConfigProvider/ThemeProvider */\n theme?: (appearance: ThemeAppearance) => ThemeConfig;\n}\n\nexport interface ThemeVarsCssPayload {\n css: string;\n hash: string;\n href: string;\n skippedComponents: string[];\n}\n\nconst require = createRequire(import.meta.url);\n\nconst unitless = new Set([\n 'fontWeightStrong',\n 'lineHeight',\n 'lineHeightHeading1',\n 'lineHeightHeading2',\n 'lineHeightHeading3',\n 'lineHeightHeading4',\n 'lineHeightHeading5',\n 'lineHeightLG',\n 'lineHeightSM',\n 'opacityImage',\n 'opacityLoading',\n 'zIndexBase',\n 'zIndexPopupBase',\n]);\n\nconst ignoredTokens = new Set(['motionBase', 'motionUnit']);\n\n// same kebab algorithm as antd-style's toKebabCase, so names match antd's emitted vars\nexport const toKebabCase = (str: string) =>\n str\n .replaceAll(/([a-z])([A-Z])/g, '$1-$2')\n .replaceAll(/([a-z])(\\d)/g, '$1-$2')\n .replaceAll(/(\\d)([A-Z])/g, '$1-$2')\n .replaceAll(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')\n .toLowerCase();\n\nconst defaultThemeFactory = (appearance: ThemeAppearance): ThemeConfig =>\n createLobeAntdTheme({ appearance });\n\nconst buildDesignToken = (\n themeFactory: (appearance: ThemeAppearance) => ThemeConfig,\n appearance: ThemeAppearance,\n) => {\n const themeConfig = themeFactory(appearance);\n return antdTheme.getDesignToken({\n ...themeConfig,\n algorithm: [\n appearance === 'dark' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,\n themeConfig.algorithm ?? [],\n ].flat(),\n }) as unknown as Record<string, number | string>;\n};\n\nconst toDeclarations = (token: Record<string, number | string>) =>\n Object.entries(token)\n .filter(\n ([key, value]) =>\n !key.startsWith('_') &&\n !key.startsWith('screen') &&\n !key.includes('-') &&\n !ignoredTokens.has(key) &&\n (typeof value === 'string' || typeof value === 'number'),\n )\n .map(([key, value]) => {\n const cssValue =\n typeof value === 'number' && !unitless.has(key) ? `${value}px` : String(value);\n return `--ant-${toKebabCase(key)}: ${cssValue};`;\n })\n .join('\\n');\n\nconst isBrightColor = (value: string) => {\n const hex = /^#([\\da-f]{6})/i.exec(value)?.[1];\n const rgb = /^rgba?\\((\\d+)[\\s,]+(\\d+)[\\s,]+(\\d+)/.exec(value);\n const [r, g, b] = hex\n ? [\n Number.parseInt(hex.slice(0, 2), 16),\n Number.parseInt(hex.slice(2, 4), 16),\n Number.parseInt(hex.slice(4, 6), 16),\n ]\n : rgb\n ? [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])]\n : [0, 0, 0];\n return (r * 299 + g * 587 + b * 114) / 1000 > 128;\n};\n\nconst loadAntdTokenModules = () => {\n const antdLibDir = path.join(path.dirname(require.resolve('antd/package.json')), 'lib');\n\n return readdirSync(antdLibDir, { withFileTypes: true })\n .filter((entry) => entry.isDirectory())\n .map((entry) => entry.name)\n .sort()\n .map((name) => ({ component: name, path: path.join(antdLibDir, name, 'style', 'token.js') }))\n .filter(({ path }) => existsSync(path));\n};\n\nconst buildDarkComponentVars = (tokens: {\n dark: Record<string, number | string>;\n light: Record<string, number | string>;\n}) => {\n const declarations: string[] = [];\n const skipped: string[] = [];\n\n for (const { component, path } of loadAntdTokenModules()) {\n try {\n const mod = require(path) as { prepareComponentToken?: unknown };\n const prepare = mod.prepareComponentToken;\n if (typeof prepare !== 'function') continue;\n\n const light = prepare(tokens.light) as Record<string, unknown>;\n const dark = prepare(tokens.dark) as Record<string, unknown>;\n\n for (const [key, value] of Object.entries(dark)) {\n if (typeof value !== 'string' || light[key] === value) continue;\n declarations.push(`--ant-${component}-${toKebabCase(key)}:${value};`);\n }\n } catch {\n skipped.push(component);\n }\n }\n\n return { css: declarations.join(''), skipped };\n};\n\nconst buildCompatRules = (\n darkSelector: string,\n darkToken: Record<string, number | string>,\n): string => {\n // mirrors polished's readableColor for the antdOverride rules that keep colorPrimary literal\n const readableOnPrimary = isBrightColor(String(darkToken.colorPrimary)) ? '#000' : '#fff';\n\n return [\n [\n `${darkSelector} .ant-btn-primary:not(:disabled)`,\n `${darkSelector} .ant-btn-primary:not(:disabled):hover`,\n `${darkSelector} .ant-btn-primary:not(:disabled):active`,\n ].join(',') + `{color:${readableOnPrimary} !important;}`,\n `${darkSelector} .ant-checkbox-inner:after{border-color:${readableOnPrimary} !important;}`,\n `${darkSelector} .ant-radio-wrapper .ant-radio-checked .ant-radio-inner:after{background:${readableOnPrimary};}`,\n ].join('\\n');\n};\n\nexport const buildThemeVarsCss = (options: ThemeVarsCssOptions = {}): ThemeVarsCssPayload => {\n const {\n theme = defaultThemeFactory,\n appearanceSelector = (appearance) => `html[data-theme='${appearance}']`,\n compatRules = true,\n hrefTemplate = (hash) => `/theme-vars.css?v=${hash}`,\n } = options;\n\n const tokens = {\n dark: buildDesignToken(theme, 'dark'),\n light: buildDesignToken(theme, 'light'),\n };\n\n const light = appearanceSelector('light');\n const dark = appearanceSelector('dark');\n const componentVars = buildDarkComponentVars(tokens);\n\n // antd v6 cssVar mode re-declares all --ant-* with SSR-light literals on\n // [class*='css-var-'] / .ant-app, which would shadow the html-level palettes\n const blocks = [\n [':root', `${light} [class*='css-var-']`, `${light} .ant-app`].join(',') +\n `{${toDeclarations(tokens.light)}}`,\n [dark, `${dark} [class*='css-var-']`, `${dark} .ant-app`].join(',') +\n `{${toDeclarations(tokens.dark)}}`,\n `${dark} [class*='css-var-']{${componentVars.css}}`,\n ];\n\n if (compatRules) blocks.push(buildCompatRules(dark, tokens.dark));\n\n const css = blocks.join('\\n');\n const hash = hashCss(css);\n\n return { css, hash, href: hrefTemplate(hash), skippedComponents: componentVars.skipped };\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"themeVars.mjs","names":["antdTheme"],"sources":["../../src/static-css/themeVars.ts"],"sourcesContent":["import { existsSync, readdirSync } from 'node:fs';\nimport { createRequire } from 'node:module';\nimport path from 'node:path';\n\nimport type { ThemeConfig } from 'antd';\nimport { theme as antdTheme } from 'antd';\n\nimport { createLobeAntdTheme } from '@/styles/theme/antdTheme';\n\nimport { hashCss } from './hash';\n\ntype ThemeAppearance = 'dark' | 'light';\n\nexport interface ThemeVarsCssOptions {\n /** selector activating an appearance; default matches next-themes' data-theme attribute */\n appearanceSelector?: (appearance: ThemeAppearance) => string;\n /** dark fixups for lobe-ui antdOverride primary-on-contrast rules */\n compatRules?: boolean;\n hrefTemplate?: (hash: string) => string;\n /** same theme factory the app hands to ConfigProvider/ThemeProvider */\n theme?: (appearance: ThemeAppearance) => ThemeConfig;\n}\n\nexport interface ThemeVarsCssPayload {\n css: string;\n hash: string;\n href: string;\n skippedComponents: string[];\n}\n\nconst require = createRequire(import.meta.url);\n\nconst unitless = new Set([\n 'fontWeightStrong',\n 'lineHeight',\n 'lineHeightHeading1',\n 'lineHeightHeading2',\n 'lineHeightHeading3',\n 'lineHeightHeading4',\n 'lineHeightHeading5',\n 'lineHeightLG',\n 'lineHeightSM',\n 'opacityImage',\n 'opacityLoading',\n 'zIndexBase',\n 'zIndexPopupBase',\n]);\n\nconst ignoredTokens = new Set(['motionBase', 'motionUnit']);\n\n// same kebab algorithm as antd-style's toKebabCase, so names match antd's emitted vars\nexport const toKebabCase = (str: string) =>\n str\n .replaceAll(/([a-z])([A-Z])/g, '$1-$2')\n .replaceAll(/([a-z])(\\d)/g, '$1-$2')\n .replaceAll(/(\\d)([A-Z])/g, '$1-$2')\n .replaceAll(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')\n .toLowerCase();\n\nconst defaultThemeFactory = (appearance: ThemeAppearance): ThemeConfig =>\n createLobeAntdTheme({ appearance });\n\nconst buildDesignToken = (\n themeFactory: (appearance: ThemeAppearance) => ThemeConfig,\n appearance: ThemeAppearance,\n) => {\n const themeConfig = themeFactory(appearance);\n return antdTheme.getDesignToken({\n ...themeConfig,\n algorithm: [\n appearance === 'dark' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,\n themeConfig.algorithm ?? [],\n ].flat(),\n }) as unknown as Record<string, number | string>;\n};\n\nconst toDeclarations = (token: Record<string, number | string>) =>\n Object.entries(token)\n .filter(\n ([key, value]) =>\n !key.startsWith('_') &&\n !key.startsWith('screen') &&\n !key.includes('-') &&\n !ignoredTokens.has(key) &&\n (typeof value === 'string' || typeof value === 'number'),\n )\n .map(([key, value]) => {\n const cssValue =\n typeof value === 'number' && !unitless.has(key) ? `${value}px` : String(value);\n return `--ant-${toKebabCase(key)}: ${cssValue};`;\n })\n .join('\\n');\n\nconst loadAntdTokenModules = () => {\n const antdLibDir = path.join(path.dirname(require.resolve('antd/package.json')), 'lib');\n\n return readdirSync(antdLibDir, { withFileTypes: true })\n .filter((entry) => entry.isDirectory())\n .map((entry) => entry.name)\n .sort()\n .map((name) => ({ component: name, path: path.join(antdLibDir, name, 'style', 'token.js') }))\n .filter(({ path }) => existsSync(path));\n};\n\nconst buildDarkComponentVars = (tokens: {\n dark: Record<string, number | string>;\n light: Record<string, number | string>;\n}) => {\n const declarations: string[] = [];\n const skipped: string[] = [];\n\n for (const { component, path } of loadAntdTokenModules()) {\n try {\n const mod = require(path) as { prepareComponentToken?: unknown };\n const prepare = mod.prepareComponentToken;\n if (typeof prepare !== 'function') continue;\n\n const light = prepare(tokens.light) as Record<string, unknown>;\n const dark = prepare(tokens.dark) as Record<string, unknown>;\n\n for (const [key, value] of Object.entries(dark)) {\n if (typeof value !== 'string' || light[key] === value) continue;\n declarations.push(`--ant-${component}-${toKebabCase(key)}:${value};`);\n }\n } catch {\n skipped.push(component);\n }\n }\n\n return { css: declarations.join(''), skipped };\n};\n\nconst readableOnPrimary = 'contrast-color(var(--ant-color-primary))';\n\nconst buildCompatRules = (darkSelector: string): string => {\n return [\n [\n `${darkSelector} .ant-btn-primary:not(:disabled)`,\n `${darkSelector} .ant-btn-primary:not(:disabled):hover`,\n `${darkSelector} .ant-btn-primary:not(:disabled):active`,\n ].join(',') + `{color:${readableOnPrimary} !important;}`,\n `${darkSelector} .ant-checkbox-inner:after{border-color:${readableOnPrimary} !important;}`,\n `${darkSelector} .ant-radio-wrapper .ant-radio-checked .ant-radio-inner:after{background:${readableOnPrimary};}`,\n ].join('\\n');\n};\n\nexport const buildThemeVarsCss = (options: ThemeVarsCssOptions = {}): ThemeVarsCssPayload => {\n const {\n theme = defaultThemeFactory,\n appearanceSelector = (appearance) => `html[data-theme='${appearance}']`,\n compatRules = true,\n hrefTemplate = (hash) => `/theme-vars.css?v=${hash}`,\n } = options;\n\n const tokens = {\n dark: buildDesignToken(theme, 'dark'),\n light: buildDesignToken(theme, 'light'),\n };\n\n const light = appearanceSelector('light');\n const dark = appearanceSelector('dark');\n const componentVars = buildDarkComponentVars(tokens);\n\n // antd v6 cssVar mode re-declares all --ant-* with SSR-light literals on\n // [class*='css-var-'] / .ant-app, which would shadow the html-level palettes\n const blocks = [\n [':root', `${light} [class*='css-var-']`, `${light} .ant-app`].join(',') +\n `{${toDeclarations(tokens.light)}}`,\n [dark, `${dark} [class*='css-var-']`, `${dark} .ant-app`].join(',') +\n `{${toDeclarations(tokens.dark)}}`,\n `${dark} [class*='css-var-']{${componentVars.css}}`,\n ];\n\n if (compatRules) blocks.push(buildCompatRules(dark));\n\n const css = blocks.join('\\n');\n const hash = hashCss(css);\n\n return { css, hash, href: hrefTemplate(hash), skippedComponents: componentVars.skipped };\n};\n"],"mappings":"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"}
|
|
@@ -1,14 +1,5 @@
|
|
|
1
|
-
import { cssVar } from "antd-style";
|
|
2
|
-
import { readableColor } from "polished";
|
|
3
1
|
//#region src/utils/safeReadableColor.ts
|
|
4
|
-
const safeReadableColor = (bgColor
|
|
5
|
-
try {
|
|
6
|
-
return readableColor(bgColor);
|
|
7
|
-
} catch {
|
|
8
|
-
if (bgColor.startsWith("var(")) return `contrast-color(${bgColor})`;
|
|
9
|
-
return fallbackColor || cssVar.colorText;
|
|
10
|
-
}
|
|
11
|
-
};
|
|
2
|
+
const safeReadableColor = (bgColor) => `contrast-color(${bgColor})`;
|
|
12
3
|
//#endregion
|
|
13
4
|
export { safeReadableColor };
|
|
14
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"safeReadableColor.mjs","names":[],"sources":["../../src/utils/safeReadableColor.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"safeReadableColor.mjs","names":[],"sources":["../../src/utils/safeReadableColor.ts"],"sourcesContent":["export const safeReadableColor = (bgColor: string): string => `contrast-color(${bgColor})`;\n"],"mappings":";AAAA,MAAa,qBAAqB,YAA4B,kBAAkB,QAAQ"}
|