@codebit-programando-solucoes/codebit-web-antd 1.1.29 → 1.1.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CssTokenBridge.d.ts +61 -18
- package/dist/index.cjs +44 -1
- package/package.json +1 -1
|
@@ -8,14 +8,57 @@ import { FC } from 'react';
|
|
|
8
8
|
*
|
|
9
9
|
* **Color tokens:**
|
|
10
10
|
*
|
|
11
|
-
* - --antd-color-bg-
|
|
12
|
-
* - --antd-color-bg-
|
|
13
|
-
* - --antd-color-bg-
|
|
14
|
-
* - --antd-color-
|
|
11
|
+
* - --antd-color-bg-base (Base background color - page background)
|
|
12
|
+
* - --antd-color-bg-container (Background for containers like cards and panels)
|
|
13
|
+
* - --antd-color-bg-elevated (Background for elevated surfaces like modals)
|
|
14
|
+
* - --antd-color-bg-layout (Background for layout components)
|
|
15
|
+
* - --antd-color-bg-mask (Overlay mask background)
|
|
16
|
+
* - --antd-color-bg-spotlight (Spotlight background for focus rings)
|
|
17
|
+
* - --antd-color-border (Base border color)
|
|
18
|
+
* - --antd-color-border-secondary (Secondary border color)
|
|
19
|
+
* - --antd-color-border-hover (Border color on hover state)
|
|
20
|
+
* - --antd-color-border-disabled (Disabled border color)
|
|
15
21
|
* - --antd-color-primary (Primary brand color)
|
|
22
|
+
* - --antd-color-success (Success state color)
|
|
23
|
+
* - --antd-color-success-bg (Success background color)
|
|
24
|
+
* - --antd-color-success-border (Success border color)
|
|
25
|
+
* - --antd-color-success-text (Success text color)
|
|
26
|
+
* - --antd-color-error (Error state color)
|
|
27
|
+
* - --antd-color-error-bg (Error background color)
|
|
28
|
+
* - --antd-color-error-border (Error border color)
|
|
29
|
+
* - --antd-color-error-text (Error text color)
|
|
30
|
+
* - --antd-color-warning (Warning state color)
|
|
31
|
+
* - --antd-color-warning-bg (Warning background color)
|
|
32
|
+
* - --antd-color-warning-border (Warning border color)
|
|
33
|
+
* - --antd-color-warning-text (Warning text color)
|
|
34
|
+
* - --antd-color-info (Informational state color)
|
|
35
|
+
* - --antd-color-info-bg (Info background color)
|
|
36
|
+
* - --antd-color-info-border (Info border color)
|
|
37
|
+
* - --antd-color-info-text (Info text color)
|
|
16
38
|
* - --antd-color-text (Main text color)
|
|
17
39
|
* - --antd-color-text-secondary (Secondary text color)
|
|
40
|
+
* - --antd-color-text-tertiary (Tertiary text color)
|
|
41
|
+
* - --antd-color-text-quaternary (Quaternary text color)
|
|
42
|
+
* - --antd-color-text-disabled (Disabled text color)
|
|
18
43
|
* - --antd-color-split (Split/divider color)
|
|
44
|
+
* - --antd-color-link (Link color)
|
|
45
|
+
* - --antd-color-link-hover (Link hover color)
|
|
46
|
+
* - --antd-color-link-active (Link active color)
|
|
47
|
+
* - --antd-color-fill (General fill color for interactions)
|
|
48
|
+
* - --antd-color-fill-secondary (Secondary fill color for subtle backgrounds)
|
|
49
|
+
* - --antd-color-fill-tertiary (Tertiary fill color for very subtle backgrounds)
|
|
50
|
+
* - --antd-color-fill-quaternary (Quaternary fill color for minimal backgrounds)
|
|
51
|
+
* - --antd-color-fill-content (Content fill color)
|
|
52
|
+
* - --antd-color-fill-content-hover (Content fill hover state)
|
|
53
|
+
* - --antd-color-fill-content-selected (Content fill selected state)
|
|
54
|
+
* - --antd-color-fill-alter (Alternate fill color for alternating rows)
|
|
55
|
+
* - --antd-color-fill-alter-hover (Alternate fill hover state)
|
|
56
|
+
* - --antd-color-fill-alter-active (Alternate fill active state)
|
|
57
|
+
* - --antd-color-fill-alter-selected (Alternate fill selected state)
|
|
58
|
+
* - --antd-color-fill-alter-disabled (Alternate fill disabled state)
|
|
59
|
+
* - --antd-color-fill-disabled (General fill disabled state)
|
|
60
|
+
* - --antd-color-white (Pure white)
|
|
61
|
+
* - --antd-color-black (Pure black)
|
|
19
62
|
*
|
|
20
63
|
* **Margin tokens:**
|
|
21
64
|
*
|
|
@@ -40,18 +83,18 @@ import { FC } from 'react';
|
|
|
40
83
|
*
|
|
41
84
|
* **Font size tokens:**
|
|
42
85
|
*
|
|
43
|
-
* - --antd-font-size-xxs: 8px (Micro text, accessibility disclaimers
|
|
44
|
-
* - --antd-font-size-xs: 10px (Extra small text, fine print
|
|
86
|
+
* - --antd-font-size-xxs: 8px (Micro text, accessibility disclaimers)
|
|
87
|
+
* - --antd-font-size-xs: 10px (Extra small text, fine print)
|
|
45
88
|
* - --antd-font-size-sm: 12px (Small text, captions, labels)
|
|
46
89
|
* - --antd-font-size: 14px (Base font size, body text)
|
|
47
90
|
* - --antd-font-size-lg: 16px (Large text, emphasis)
|
|
48
91
|
* - --antd-font-size-xl: 20px (Extra large text, subheadings)
|
|
49
|
-
* - --antd-font-size-xxl: 24px (Largest base text size
|
|
50
|
-
* - --antd-font-size-heading1: 38px (Primary heading
|
|
51
|
-
* - --antd-font-size-heading2: 30px (Secondary heading
|
|
52
|
-
* - --antd-font-size-heading3: 24px (Tertiary heading
|
|
53
|
-
* - --antd-font-size-heading4: 20px (Quaternary heading
|
|
54
|
-
* - --antd-font-size-heading5: 16px (Quinary heading
|
|
92
|
+
* - --antd-font-size-xxl: 24px (Largest base text size)
|
|
93
|
+
* - --antd-font-size-heading1: 38px (Primary heading)
|
|
94
|
+
* - --antd-font-size-heading2: 30px (Secondary heading)
|
|
95
|
+
* - --antd-font-size-heading3: 24px (Tertiary heading)
|
|
96
|
+
* - --antd-font-size-heading4: 20px (Quaternary heading)
|
|
97
|
+
* - --antd-font-size-heading5: 16px (Quinary heading)
|
|
55
98
|
*
|
|
56
99
|
* **Line height tokens:**
|
|
57
100
|
*
|
|
@@ -72,7 +115,6 @@ import { FC } from 'react';
|
|
|
72
115
|
*
|
|
73
116
|
* @example
|
|
74
117
|
* ```tsx
|
|
75
|
-
*
|
|
76
118
|
* // Place this component at the root level of your app
|
|
77
119
|
* function App() {
|
|
78
120
|
* return (
|
|
@@ -86,13 +128,14 @@ import { FC } from 'react';
|
|
|
86
128
|
*
|
|
87
129
|
* @example
|
|
88
130
|
* ```css
|
|
131
|
+
* // Use the exposed CSS variables
|
|
132
|
+
* .table-row:nth-child(odd) {
|
|
133
|
+
* background-color: var(--antd-color-fill-alter);
|
|
134
|
+
* }
|
|
89
135
|
*
|
|
90
|
-
*
|
|
91
|
-
*
|
|
136
|
+
* .card {
|
|
137
|
+
* border: 1px solid var(--antd-color-border);
|
|
92
138
|
* background-color: var(--antd-color-bg-container);
|
|
93
|
-
* padding: var(--antd-padding-md);
|
|
94
|
-
* color: var(--antd-color-text);
|
|
95
|
-
* font-size: var(--antd-font-size);
|
|
96
139
|
* }
|
|
97
140
|
* ```;
|
|
98
141
|
*/
|
package/dist/index.cjs
CHANGED
|
@@ -801,14 +801,57 @@ var __webpack_exports__ = {};
|
|
|
801
801
|
const { token } = external_antd_namespaceObject.theme.useToken();
|
|
802
802
|
(0, external_react_.useLayoutEffect)(()=>{
|
|
803
803
|
const root = document.documentElement;
|
|
804
|
+
root.style.setProperty('--antd-color-bg-base', token['colorBgBase']);
|
|
804
805
|
root.style.setProperty('--antd-color-bg-container', token['colorBgContainer']);
|
|
805
806
|
root.style.setProperty('--antd-color-bg-elevated', token['colorBgElevated']);
|
|
806
807
|
root.style.setProperty('--antd-color-bg-layout', token['colorBgLayout']);
|
|
807
|
-
root.style.setProperty('--antd-color-
|
|
808
|
+
root.style.setProperty('--antd-color-bg-mask', token['colorBgMask']);
|
|
809
|
+
root.style.setProperty('--antd-color-bg-spotlight', token['colorBgSpotlight']);
|
|
808
810
|
root.style.setProperty('--antd-color-primary', token['colorPrimary']);
|
|
811
|
+
root.style.setProperty('--antd-color-success', token['colorSuccess']);
|
|
812
|
+
root.style.setProperty('--antd-color-success-bg', token['colorSuccessBg']);
|
|
813
|
+
root.style.setProperty('--antd-color-success-border', token['colorSuccessBorder']);
|
|
814
|
+
root.style.setProperty('--antd-color-success-text', token['colorSuccessText']);
|
|
815
|
+
root.style.setProperty('--antd-color-warning', token['colorWarning']);
|
|
816
|
+
root.style.setProperty('--antd-color-warning-bg', token['colorWarningBg']);
|
|
817
|
+
root.style.setProperty('--antd-color-warning-border', token['colorWarningBorder']);
|
|
818
|
+
root.style.setProperty('--antd-color-warning-text', token['colorWarningText']);
|
|
819
|
+
root.style.setProperty('--antd-color-error', token['colorError']);
|
|
820
|
+
root.style.setProperty('--antd-color-error-bg', token['colorErrorBg']);
|
|
821
|
+
root.style.setProperty('--antd-color-error-border', token['colorErrorBorder']);
|
|
822
|
+
root.style.setProperty('--antd-color-error-text', token['colorErrorText']);
|
|
823
|
+
root.style.setProperty('--antd-color-info', token['colorInfo']);
|
|
824
|
+
root.style.setProperty('--antd-color-info-bg', token['colorInfoBg']);
|
|
825
|
+
root.style.setProperty('--antd-color-info-border', token['colorInfoBorder']);
|
|
826
|
+
root.style.setProperty('--antd-color-info-text', token['colorInfoText']);
|
|
809
827
|
root.style.setProperty('--antd-color-text', token['colorText']);
|
|
810
828
|
root.style.setProperty('--antd-color-text-secondary', token['colorTextSecondary']);
|
|
829
|
+
root.style.setProperty('--antd-color-text-tertiary', token['colorTextTertiary']);
|
|
830
|
+
root.style.setProperty('--antd-color-text-quaternary', token['colorTextQuaternary']);
|
|
831
|
+
root.style.setProperty('--antd-color-text-disabled', token['colorTextDisabled']);
|
|
832
|
+
root.style.setProperty('--antd-color-border', token['colorBorder']);
|
|
833
|
+
root.style.setProperty('--antd-color-border-secondary', token['colorBorderSecondary']);
|
|
834
|
+
root.style.setProperty('--antd-color-border-hover', token['colorBorderHover']);
|
|
835
|
+
root.style.setProperty('--antd-color-border-secondary-hover', token['colorBorderSecondaryHover']);
|
|
836
|
+
root.style.setProperty('--antd-color-border-disabled', token['colorBorderDisabled']);
|
|
811
837
|
root.style.setProperty('--antd-color-split', token['colorSplit']);
|
|
838
|
+
root.style.setProperty('--antd-color-link', token['colorLink']);
|
|
839
|
+
root.style.setProperty('--antd-color-link-hover', token['colorLinkHover']);
|
|
840
|
+
root.style.setProperty('--antd-color-link-active', token['colorLinkActive']);
|
|
841
|
+
root.style.setProperty('--antd-color-fill', token['colorFill']);
|
|
842
|
+
root.style.setProperty('--antd-color-fill-secondary', token['colorFillSecondary']);
|
|
843
|
+
root.style.setProperty('--antd-color-fill-tertiary', token['colorFillTertiary']);
|
|
844
|
+
root.style.setProperty('--antd-color-fill-quaternary', token['colorFillQuaternary']);
|
|
845
|
+
root.style.setProperty('--antd-color-fill-content', token['colorFillContent']);
|
|
846
|
+
root.style.setProperty('--antd-color-fill-content-hover', token['colorFillContentHover']);
|
|
847
|
+
root.style.setProperty('--antd-color-fill-content-selected', token['colorFillContentSelected']);
|
|
848
|
+
root.style.setProperty('--antd-color-fill-alter', token['colorFillAlter']);
|
|
849
|
+
root.style.setProperty('--antd-color-fill-alter-hover', token['colorFillAlterHover']);
|
|
850
|
+
root.style.setProperty('--antd-color-fill-alter-active', token['colorFillAlterActive']);
|
|
851
|
+
root.style.setProperty('--antd-color-fill-alter-selected', token['colorFillAlterSelected']);
|
|
852
|
+
root.style.setProperty('--antd-color-fill-alter-disabled', token['colorFillAlterDisabled']);
|
|
853
|
+
root.style.setProperty('--antd-color-white', token['colorWhite']);
|
|
854
|
+
root.style.setProperty('--antd-color-black', token['colorBlack']);
|
|
812
855
|
root.style.setProperty('--antd-margin-xxs', `${token['marginXXS']}px`);
|
|
813
856
|
root.style.setProperty('--antd-margin-xs', `${token['marginXS']}px`);
|
|
814
857
|
root.style.setProperty('--antd-margin-sm', `${token['marginSM']}px`);
|