@erplora/outfitkit 0.1.27 → 0.1.28
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.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './ok-cta-band.js';
|
package/dist/ok-cta-band.js
CHANGED
|
@@ -20,12 +20,29 @@ class OkCtaBand extends LitElement {
|
|
|
20
20
|
:host {
|
|
21
21
|
display: block;
|
|
22
22
|
width: 100%;
|
|
23
|
-
--primary: var(--ion-color-primary, #1496d6);
|
|
24
|
-
--primary-contrast: var(--ion-color-primary-contrast, #ffffff);
|
|
23
|
+
--primary: var(--ok-primary, var(--ion-color-primary, #1496d6));
|
|
24
|
+
--primary-contrast: var(--ok-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
|
|
25
25
|
--color: var(--ok-text, var(--ion-text-color, #18181b));
|
|
26
26
|
--muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
|
|
27
27
|
--surface: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #fff)));
|
|
28
28
|
--radius: var(--ok-radius-lg, 28px);
|
|
29
|
+
--action-outline-color: var(--ok-cta-action-outline-color, var(--primary-contrast));
|
|
30
|
+
--action-outline-border-color: var(
|
|
31
|
+
--ok-cta-action-outline-border-color,
|
|
32
|
+
color-mix(in oklab, var(--action-outline-color) 62%, transparent)
|
|
33
|
+
);
|
|
34
|
+
--action-outline-background-hover: var(
|
|
35
|
+
--ok-cta-action-outline-background-hover,
|
|
36
|
+
color-mix(in oklab, var(--action-outline-color) 12%, transparent)
|
|
37
|
+
);
|
|
38
|
+
--action-outline-background-focused: var(
|
|
39
|
+
--ok-cta-action-outline-background-focused,
|
|
40
|
+
color-mix(in oklab, var(--action-outline-color) 16%, transparent)
|
|
41
|
+
);
|
|
42
|
+
--action-outline-background-activated: var(
|
|
43
|
+
--ok-cta-action-outline-background-activated,
|
|
44
|
+
color-mix(in oklab, var(--action-outline-color) 20%, transparent)
|
|
45
|
+
);
|
|
29
46
|
font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
|
|
30
47
|
}
|
|
31
48
|
.band {
|
|
@@ -106,6 +123,18 @@ class OkCtaBand extends LitElement {
|
|
|
106
123
|
justify-content: center;
|
|
107
124
|
margin-top: 0.6rem;
|
|
108
125
|
}
|
|
126
|
+
:host(:not([variant])) ::slotted(ion-button[fill='outline']),
|
|
127
|
+
:host([variant='solid']) ::slotted(ion-button[fill='outline']) {
|
|
128
|
+
--color: var(--action-outline-color);
|
|
129
|
+
--color-hover: var(--action-outline-color);
|
|
130
|
+
--color-focused: var(--action-outline-color);
|
|
131
|
+
--color-activated: var(--action-outline-color);
|
|
132
|
+
--border-color: var(--action-outline-border-color);
|
|
133
|
+
--background-hover: var(--action-outline-background-hover);
|
|
134
|
+
--background-focused: var(--action-outline-background-focused);
|
|
135
|
+
--background-activated: var(--action-outline-background-activated);
|
|
136
|
+
--ripple-color: var(--action-outline-color);
|
|
137
|
+
}
|
|
109
138
|
`;
|
|
110
139
|
}
|
|
111
140
|
render() {
|
package/dist/outfitkit.bundle.js
CHANGED
|
@@ -14023,12 +14023,29 @@ class Ir extends g {
|
|
|
14023
14023
|
:host {
|
|
14024
14024
|
display: block;
|
|
14025
14025
|
width: 100%;
|
|
14026
|
-
--primary: var(--ion-color-primary, #1496d6);
|
|
14027
|
-
--primary-contrast: var(--ion-color-primary-contrast, #ffffff);
|
|
14026
|
+
--primary: var(--ok-primary, var(--ion-color-primary, #1496d6));
|
|
14027
|
+
--primary-contrast: var(--ok-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
|
|
14028
14028
|
--color: var(--ok-text, var(--ion-text-color, #18181b));
|
|
14029
14029
|
--muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
|
|
14030
14030
|
--surface: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #fff)));
|
|
14031
14031
|
--radius: var(--ok-radius-lg, 28px);
|
|
14032
|
+
--action-outline-color: var(--ok-cta-action-outline-color, var(--primary-contrast));
|
|
14033
|
+
--action-outline-border-color: var(
|
|
14034
|
+
--ok-cta-action-outline-border-color,
|
|
14035
|
+
color-mix(in oklab, var(--action-outline-color) 62%, transparent)
|
|
14036
|
+
);
|
|
14037
|
+
--action-outline-background-hover: var(
|
|
14038
|
+
--ok-cta-action-outline-background-hover,
|
|
14039
|
+
color-mix(in oklab, var(--action-outline-color) 12%, transparent)
|
|
14040
|
+
);
|
|
14041
|
+
--action-outline-background-focused: var(
|
|
14042
|
+
--ok-cta-action-outline-background-focused,
|
|
14043
|
+
color-mix(in oklab, var(--action-outline-color) 16%, transparent)
|
|
14044
|
+
);
|
|
14045
|
+
--action-outline-background-activated: var(
|
|
14046
|
+
--ok-cta-action-outline-background-activated,
|
|
14047
|
+
color-mix(in oklab, var(--action-outline-color) 20%, transparent)
|
|
14048
|
+
);
|
|
14032
14049
|
font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
|
|
14033
14050
|
}
|
|
14034
14051
|
.band {
|
|
@@ -14109,6 +14126,18 @@ class Ir extends g {
|
|
|
14109
14126
|
justify-content: center;
|
|
14110
14127
|
margin-top: 0.6rem;
|
|
14111
14128
|
}
|
|
14129
|
+
:host(:not([variant])) ::slotted(ion-button[fill='outline']),
|
|
14130
|
+
:host([variant='solid']) ::slotted(ion-button[fill='outline']) {
|
|
14131
|
+
--color: var(--action-outline-color);
|
|
14132
|
+
--color-hover: var(--action-outline-color);
|
|
14133
|
+
--color-focused: var(--action-outline-color);
|
|
14134
|
+
--color-activated: var(--action-outline-color);
|
|
14135
|
+
--border-color: var(--action-outline-border-color);
|
|
14136
|
+
--background-hover: var(--action-outline-background-hover);
|
|
14137
|
+
--background-focused: var(--action-outline-background-focused);
|
|
14138
|
+
--background-activated: var(--action-outline-background-activated);
|
|
14139
|
+
--ripple-color: var(--action-outline-color);
|
|
14140
|
+
}
|
|
14112
14141
|
`;
|
|
14113
14142
|
}
|
|
14114
14143
|
render() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@erplora/outfitkit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.28",
|
|
4
4
|
"description": "OutfitKit — librería de Web Components (Lit) que CONSTRUYE lo que Ionic no tiene (tree, data-table rica, inline-feedback, kpi/stat, stepper/wizard, calendar, kanban…) sobre primitivos de Ionic. Ionic es la base; OutfitKit cubre los huecos. npm + CDN, imports individuales, CSP-safe. Tema vía tokens --ok-* (fallback a --ion-*).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|