@kya-os/consent 0.1.21 → 0.1.23
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/bundle/inline.d.ts.map +1 -1
- package/dist/bundle/inline.js +2 -2
- package/dist/bundle/inline.js.map +1 -1
- package/dist/cjs/bundle/inline.js +2 -2
- package/dist/cjs/bundle/inline.js.map +1 -1
- package/dist/cjs/components/mcp-consent.js +0 -14
- package/dist/cjs/components/mcp-consent.js.map +1 -1
- package/dist/cjs/templates/modes/oauth.template.js +0 -28
- package/dist/cjs/templates/modes/oauth.template.js.map +1 -1
- package/dist/components/mcp-consent.d.ts.map +1 -1
- package/dist/components/mcp-consent.js +0 -14
- package/dist/components/mcp-consent.js.map +1 -1
- package/dist/consent.js +0 -14
- package/dist/consent.min.js +11 -25
- package/dist/templates/modes/oauth.template.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/bundle/index.d.ts +0 -44
- package/dist/bundle/shell.d.ts +0 -126
- package/dist/bundle/shell.js +0 -295
- package/dist/bundle/shell.js.map +0 -1
- package/dist/components/consent-button.d.ts +0 -61
- package/dist/components/consent-button.js +0 -177
- package/dist/components/consent-button.js.map +0 -1
- package/dist/components/consent-checkbox.d.ts +0 -61
- package/dist/components/consent-checkbox.js +0 -220
- package/dist/components/consent-checkbox.js.map +0 -1
- package/dist/components/consent-input.d.ts +0 -91
- package/dist/components/consent-input.js +0 -332
- package/dist/components/consent-input.js.map +0 -1
- package/dist/components/consent-oauth-button.d.ts +0 -87
- package/dist/components/consent-oauth-button.js +0 -389
- package/dist/components/consent-oauth-button.js.map +0 -1
- package/dist/components/consent-otp-input.d.ts +0 -92
- package/dist/components/consent-otp-input.js +0 -385
- package/dist/components/consent-otp-input.js.map +0 -1
- package/dist/components/consent-permissions.d.ts +0 -104
- package/dist/components/consent-permissions.js +0 -430
- package/dist/components/consent-permissions.js.map +0 -1
- package/dist/components/consent-shell.d.ts +0 -72
- package/dist/components/consent-shell.js +0 -231
- package/dist/components/consent-shell.js.map +0 -1
- package/dist/components/consent-terms.d.ts +0 -89
- package/dist/components/consent-terms.js +0 -284
- package/dist/components/consent-terms.js.map +0 -1
- package/dist/components/index.d.ts +0 -19
- package/dist/constants/auth-modes.d.ts +0 -59
- package/dist/constants/auth-modes.js +0 -120
- package/dist/constants/auth-modes.js.map +0 -1
- package/dist/constants/colors.d.ts +0 -38
- package/dist/constants/colors.js +0 -37
- package/dist/constants/colors.js.map +0 -1
- package/dist/constants/defaults.d.ts +0 -112
- package/dist/constants/defaults.js +0 -143
- package/dist/constants/defaults.js.map +0 -1
- package/dist/constants/index.d.ts +0 -12
- package/dist/constants/index.js +0 -16
- package/dist/constants/index.js.map +0 -1
- package/dist/index.d.ts +0 -19
- package/dist/index.js +0 -28
- package/dist/index.js.map +0 -1
- package/dist/react/index.d.ts +0 -123
- package/dist/resolution/index.d.ts +0 -12
- package/dist/resolution/index.js +0 -12
- package/dist/resolution/index.js.map +0 -1
- package/dist/resolution/resolve-branding.d.ts +0 -70
- package/dist/resolution/resolve-branding.js +0 -149
- package/dist/resolution/resolve-branding.js.map +0 -1
- package/dist/resolution/resolve-config.d.ts +0 -81
- package/dist/resolution/resolve-config.js +0 -258
- package/dist/resolution/resolve-config.js.map +0 -1
- package/dist/resolution/resolve-copy.d.ts +0 -53
- package/dist/resolution/resolve-copy.js +0 -128
- package/dist/resolution/resolve-copy.js.map +0 -1
- package/dist/schemas/api.schemas.js +0 -162
- package/dist/schemas/api.schemas.js.map +0 -1
- package/dist/schemas/branding.schemas.d.ts +0 -100
- package/dist/schemas/branding.schemas.js +0 -54
- package/dist/schemas/branding.schemas.js.map +0 -1
- package/dist/schemas/config.schemas.js +0 -141
- package/dist/schemas/config.schemas.js.map +0 -1
- package/dist/schemas/index.d.ts +0 -13
- package/dist/schemas/index.js +0 -13
- package/dist/schemas/index.js.map +0 -1
- package/dist/schemas/modes.schemas.js +0 -104
- package/dist/schemas/modes.schemas.js.map +0 -1
- package/dist/security/escape.d.ts +0 -114
- package/dist/security/escape.js +0 -197
- package/dist/security/escape.js.map +0 -1
- package/dist/security/index.d.ts +0 -10
- package/dist/security/index.js +0 -10
- package/dist/security/index.js.map +0 -1
- package/dist/security/validators.d.ts +0 -98
- package/dist/security/validators.js +0 -199
- package/dist/security/validators.js.map +0 -1
- package/dist/styles/css-variables.d.ts +0 -78
- package/dist/styles/css-variables.js +0 -120
- package/dist/styles/css-variables.js.map +0 -1
- package/dist/styles/index.d.ts +0 -12
- package/dist/styles/index.js +0 -12
- package/dist/styles/index.js.map +0 -1
- package/dist/styles/stylesheet.d.ts +0 -57
- package/dist/styles/stylesheet.js +0 -197
- package/dist/styles/stylesheet.js.map +0 -1
- package/dist/styles/tokens.d.ts +0 -141
- package/dist/styles/tokens.js +0 -180
- package/dist/styles/tokens.js.map +0 -1
- package/dist/templates/base/base-template.d.ts +0 -81
- package/dist/templates/base/base-template.js +0 -278
- package/dist/templates/base/base-template.js.map +0 -1
- package/dist/templates/base/components.d.ts +0 -120
- package/dist/templates/base/components.js +0 -279
- package/dist/templates/base/components.js.map +0 -1
- package/dist/templates/base/index.d.ts +0 -8
- package/dist/templates/base/index.js +0 -8
- package/dist/templates/base/index.js.map +0 -1
- package/dist/templates/index.d.ts +0 -18
- package/dist/templates/index.js +0 -18
- package/dist/templates/index.js.map +0 -1
- package/dist/templates/modes/consent-only.template.d.ts +0 -36
- package/dist/templates/modes/consent-only.template.js +0 -70
- package/dist/templates/modes/consent-only.template.js.map +0 -1
- package/dist/templates/modes/credentials.template.d.ts +0 -65
- package/dist/templates/modes/credentials.template.js +0 -410
- package/dist/templates/modes/credentials.template.js.map +0 -1
- package/dist/templates/modes/index.d.ts +0 -14
- package/dist/templates/modes/index.js +0 -14
- package/dist/templates/modes/index.js.map +0 -1
- package/dist/templates/modes/magic-link.template.d.ts +0 -33
- package/dist/templates/modes/magic-link.template.js +0 -192
- package/dist/templates/modes/magic-link.template.js.map +0 -1
- package/dist/templates/modes/oauth.template.d.ts +0 -40
- package/dist/templates/modes/oauth.template.js +0 -149
- package/dist/templates/modes/oauth.template.js.map +0 -1
- package/dist/templates/modes/otp.template.d.ts +0 -35
- package/dist/templates/modes/otp.template.js +0 -312
- package/dist/templates/modes/otp.template.js.map +0 -1
- package/dist/templates/modes/success.template.d.ts +0 -41
- package/dist/templates/registry.d.ts +0 -68
- package/dist/templates/registry.js +0 -125
- package/dist/templates/registry.js.map +0 -1
- package/dist/types/api.types.d.ts +0 -147
- package/dist/types/api.types.js +0 -9
- package/dist/types/api.types.js.map +0 -1
- package/dist/types/branding.types.d.ts +0 -53
- package/dist/types/branding.types.js +0 -9
- package/dist/types/branding.types.js.map +0 -1
- package/dist/types/config.types.d.ts +0 -201
- package/dist/types/config.types.js +0 -9
- package/dist/types/config.types.js.map +0 -1
- package/dist/types/copy.types.d.ts +0 -109
- package/dist/types/copy.types.js +0 -9
- package/dist/types/copy.types.js.map +0 -1
- package/dist/types/index.d.ts +0 -15
- package/dist/types/index.js +0 -15
- package/dist/types/index.js.map +0 -1
- package/dist/types/modes.types.d.ts +0 -287
- package/dist/types/modes.types.js +0 -136
- package/dist/types/modes.types.js.map +0 -1
- package/dist/types/page.types.d.ts +0 -120
- package/dist/types/page.types.js +0 -9
- package/dist/types/page.types.js.map +0 -1
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Security Validators
|
|
3
|
-
*
|
|
4
|
-
* Input validation utilities for secure rendering.
|
|
5
|
-
*
|
|
6
|
-
* @module @kya-os/consent/security/validators
|
|
7
|
-
*/
|
|
8
|
-
/**
|
|
9
|
-
* Validate that a string is a valid hex color
|
|
10
|
-
*
|
|
11
|
-
* Only accepts 6-digit hex colors with # prefix.
|
|
12
|
-
*
|
|
13
|
-
* @param color - Color string to validate
|
|
14
|
-
* @returns The color if valid, undefined otherwise
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* ```typescript
|
|
18
|
-
* validateColor('#2563EB') // Returns '#2563EB'
|
|
19
|
-
* validateColor('2563EB') // Returns undefined
|
|
20
|
-
* validateColor('#fff') // Returns undefined (3-digit not allowed)
|
|
21
|
-
* ```
|
|
22
|
-
*/
|
|
23
|
-
export function validateColor(color) {
|
|
24
|
-
if (!color)
|
|
25
|
-
return undefined;
|
|
26
|
-
const hex6Pattern = /^#[0-9A-Fa-f]{6}$/;
|
|
27
|
-
if (hex6Pattern.test(color)) {
|
|
28
|
-
return color;
|
|
29
|
-
}
|
|
30
|
-
return undefined;
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* Validate that a string is a valid URL
|
|
34
|
-
*
|
|
35
|
-
* Only accepts http and https protocols.
|
|
36
|
-
*
|
|
37
|
-
* @param url - URL string to validate
|
|
38
|
-
* @returns The URL if valid, undefined otherwise
|
|
39
|
-
*
|
|
40
|
-
* @example
|
|
41
|
-
* ```typescript
|
|
42
|
-
* validateUrl('https://example.com') // Returns 'https://example.com'
|
|
43
|
-
* validateUrl('javascript:alert(1)') // Returns undefined
|
|
44
|
-
* validateUrl('ftp://files.example.com') // Returns undefined
|
|
45
|
-
* ```
|
|
46
|
-
*/
|
|
47
|
-
export function validateUrl(url) {
|
|
48
|
-
if (!url)
|
|
49
|
-
return undefined;
|
|
50
|
-
try {
|
|
51
|
-
const parsed = new URL(url);
|
|
52
|
-
if (parsed.protocol === "http:" || parsed.protocol === "https:") {
|
|
53
|
-
return url;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
catch {
|
|
57
|
-
// Invalid URL
|
|
58
|
-
}
|
|
59
|
-
return undefined;
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* Validate that a string is a valid email address
|
|
63
|
-
*
|
|
64
|
-
* Uses a simple but effective email pattern.
|
|
65
|
-
*
|
|
66
|
-
* @param email - Email string to validate
|
|
67
|
-
* @returns The email if valid, undefined otherwise
|
|
68
|
-
*/
|
|
69
|
-
export function validateEmail(email) {
|
|
70
|
-
if (!email)
|
|
71
|
-
return undefined;
|
|
72
|
-
// Simple email pattern - not exhaustive but catches most issues
|
|
73
|
-
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
74
|
-
if (emailPattern.test(email) && email.length <= 255) {
|
|
75
|
-
return email;
|
|
76
|
-
}
|
|
77
|
-
return undefined;
|
|
78
|
-
}
|
|
79
|
-
/**
|
|
80
|
-
* Validate that a string is a valid DID
|
|
81
|
-
*
|
|
82
|
-
* @param did - DID string to validate
|
|
83
|
-
* @returns The DID if valid, undefined otherwise
|
|
84
|
-
*/
|
|
85
|
-
export function validateDid(did) {
|
|
86
|
-
if (!did)
|
|
87
|
-
return undefined;
|
|
88
|
-
// DID must start with did:
|
|
89
|
-
if (!did.startsWith("did:")) {
|
|
90
|
-
return undefined;
|
|
91
|
-
}
|
|
92
|
-
// Must have at least method and identifier (did:method:identifier)
|
|
93
|
-
const parts = did.split(":");
|
|
94
|
-
if (parts.length < 3) {
|
|
95
|
-
return undefined;
|
|
96
|
-
}
|
|
97
|
-
// Method must be alphanumeric
|
|
98
|
-
const method = parts[1];
|
|
99
|
-
if (!method || !/^[a-z0-9]+$/.test(method)) {
|
|
100
|
-
return undefined;
|
|
101
|
-
}
|
|
102
|
-
// Reasonable length limit
|
|
103
|
-
if (did.length > 500) {
|
|
104
|
-
return undefined;
|
|
105
|
-
}
|
|
106
|
-
return did;
|
|
107
|
-
}
|
|
108
|
-
/**
|
|
109
|
-
* Validate that a string contains no control characters
|
|
110
|
-
*
|
|
111
|
-
* @param text - Text to validate
|
|
112
|
-
* @returns The text if valid, undefined otherwise
|
|
113
|
-
*/
|
|
114
|
-
export function validateNoControlChars(text) {
|
|
115
|
-
if (!text)
|
|
116
|
-
return undefined;
|
|
117
|
-
// Allow only printable ASCII and common whitespace
|
|
118
|
-
// eslint-disable-next-line no-control-regex
|
|
119
|
-
const controlPattern = /[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/;
|
|
120
|
-
if (controlPattern.test(text)) {
|
|
121
|
-
return undefined;
|
|
122
|
-
}
|
|
123
|
-
return text;
|
|
124
|
-
}
|
|
125
|
-
/**
|
|
126
|
-
* Validate and sanitize a string for display
|
|
127
|
-
*
|
|
128
|
-
* Removes control characters and trims whitespace.
|
|
129
|
-
*
|
|
130
|
-
* @param text - Text to sanitize
|
|
131
|
-
* @param maxLength - Maximum allowed length
|
|
132
|
-
* @returns Sanitized text or undefined if invalid
|
|
133
|
-
*/
|
|
134
|
-
export function sanitizeDisplayText(text, maxLength = 500) {
|
|
135
|
-
if (!text)
|
|
136
|
-
return undefined;
|
|
137
|
-
// Remove control characters
|
|
138
|
-
// eslint-disable-next-line no-control-regex
|
|
139
|
-
const cleaned = text.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, "");
|
|
140
|
-
// Trim and check length
|
|
141
|
-
const trimmed = cleaned.trim();
|
|
142
|
-
if (trimmed.length === 0 || trimmed.length > maxLength) {
|
|
143
|
-
return undefined;
|
|
144
|
-
}
|
|
145
|
-
return trimmed;
|
|
146
|
-
}
|
|
147
|
-
/**
|
|
148
|
-
* Validate that a string is alphanumeric with underscores only
|
|
149
|
-
*
|
|
150
|
-
* Useful for field names and identifiers.
|
|
151
|
-
*
|
|
152
|
-
* @param text - Text to validate
|
|
153
|
-
* @returns The text if valid, undefined otherwise
|
|
154
|
-
*/
|
|
155
|
-
export function validateIdentifier(text) {
|
|
156
|
-
if (!text)
|
|
157
|
-
return undefined;
|
|
158
|
-
if (/^[a-zA-Z0-9_]+$/.test(text)) {
|
|
159
|
-
return text;
|
|
160
|
-
}
|
|
161
|
-
return undefined;
|
|
162
|
-
}
|
|
163
|
-
/**
|
|
164
|
-
* Check if a value is a safe integer within range
|
|
165
|
-
*
|
|
166
|
-
* @param value - Value to check
|
|
167
|
-
* @param min - Minimum value (inclusive)
|
|
168
|
-
* @param max - Maximum value (inclusive)
|
|
169
|
-
* @returns True if valid
|
|
170
|
-
*/
|
|
171
|
-
export function isValidInteger(value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
|
|
172
|
-
if (typeof value !== "number")
|
|
173
|
-
return false;
|
|
174
|
-
if (!Number.isFinite(value))
|
|
175
|
-
return false;
|
|
176
|
-
if (!Number.isInteger(value))
|
|
177
|
-
return false;
|
|
178
|
-
return value >= min && value <= max;
|
|
179
|
-
}
|
|
180
|
-
/**
|
|
181
|
-
* Validate a CSRF token format
|
|
182
|
-
*
|
|
183
|
-
* @param token - Token to validate
|
|
184
|
-
* @returns The token if valid, undefined otherwise
|
|
185
|
-
*/
|
|
186
|
-
export function validateCSRFToken(token) {
|
|
187
|
-
if (!token)
|
|
188
|
-
return undefined;
|
|
189
|
-
// CSRF tokens should be reasonably long random strings
|
|
190
|
-
if (token.length < 16 || token.length > 256) {
|
|
191
|
-
return undefined;
|
|
192
|
-
}
|
|
193
|
-
// Should only contain safe characters
|
|
194
|
-
if (!/^[a-zA-Z0-9_-]+$/.test(token)) {
|
|
195
|
-
return undefined;
|
|
196
|
-
}
|
|
197
|
-
return token;
|
|
198
|
-
}
|
|
199
|
-
//# sourceMappingURL=validators.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"validators.js","sourceRoot":"","sources":["../../src/security/validators.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* CSS Variable Generation
|
|
3
|
-
*
|
|
4
|
-
* Generates CSS custom properties for theming consent pages.
|
|
5
|
-
*
|
|
6
|
-
* @module @kya-os/consent/styles/css-variables
|
|
7
|
-
*/
|
|
8
|
-
import type { ConsentBranding, ConsentCSSVars } from "../types/branding.types.js";
|
|
9
|
-
/**
|
|
10
|
-
* CSS variable names used in consent pages
|
|
11
|
-
*/
|
|
12
|
-
export declare const CSS_VAR_NAMES: {
|
|
13
|
-
readonly PRIMARY: "--consent-primary";
|
|
14
|
-
readonly SECONDARY: "--consent-secondary";
|
|
15
|
-
readonly PRIMARY_RGB: "--consent-primary-rgb";
|
|
16
|
-
readonly SECONDARY_RGB: "--consent-secondary-rgb";
|
|
17
|
-
readonly BACKGROUND: "--consent-background";
|
|
18
|
-
readonly TEXT_PRIMARY: "--consent-text-primary";
|
|
19
|
-
readonly TEXT_SECONDARY: "--consent-text-secondary";
|
|
20
|
-
readonly BORDER: "--consent-border";
|
|
21
|
-
};
|
|
22
|
-
export type CSSVarName = (typeof CSS_VAR_NAMES)[keyof typeof CSS_VAR_NAMES];
|
|
23
|
-
/**
|
|
24
|
-
* Convert hex color to RGB string
|
|
25
|
-
*
|
|
26
|
-
* @param hex - Hex color string (e.g., '#2563EB')
|
|
27
|
-
* @returns RGB string (e.g., '37, 99, 235')
|
|
28
|
-
*/
|
|
29
|
-
export declare function hexToRgb(hex: string): string;
|
|
30
|
-
/**
|
|
31
|
-
* Generate CSS variables from branding configuration
|
|
32
|
-
*
|
|
33
|
-
* @param branding - Branding config (optional fields)
|
|
34
|
-
* @returns CSS variable object with resolved values
|
|
35
|
-
*/
|
|
36
|
-
export declare function generateCSSVariables(branding?: ConsentBranding): ConsentCSSVars;
|
|
37
|
-
/**
|
|
38
|
-
* Generate CSS variable declarations as a style string
|
|
39
|
-
*
|
|
40
|
-
* @param branding - Branding config
|
|
41
|
-
* @returns CSS style string (e.g., "--consent-primary: #2563EB;")
|
|
42
|
-
*/
|
|
43
|
-
export declare function generateCSSVariableString(branding?: ConsentBranding): string;
|
|
44
|
-
/**
|
|
45
|
-
* Generate CSS variable declarations with all theme colors
|
|
46
|
-
*
|
|
47
|
-
* @param branding - Branding config
|
|
48
|
-
* @returns Complete CSS variable declarations including derived colors
|
|
49
|
-
*/
|
|
50
|
-
export declare function generateFullCSSVariables(branding?: ConsentBranding): Record<string, string>;
|
|
51
|
-
/**
|
|
52
|
-
* Generate a style attribute value with CSS variables
|
|
53
|
-
*
|
|
54
|
-
* @param branding - Branding config
|
|
55
|
-
* @returns Style attribute value for inline styling
|
|
56
|
-
*
|
|
57
|
-
* @example
|
|
58
|
-
* ```html
|
|
59
|
-
* <div style="${generateStyleAttribute(branding)}">...</div>
|
|
60
|
-
* ```
|
|
61
|
-
*/
|
|
62
|
-
export declare function generateStyleAttribute(branding?: ConsentBranding): string;
|
|
63
|
-
/**
|
|
64
|
-
* Generate a :root CSS block with all variables
|
|
65
|
-
*
|
|
66
|
-
* @param branding - Branding config
|
|
67
|
-
* @returns CSS :root block
|
|
68
|
-
*
|
|
69
|
-
* @example
|
|
70
|
-
* ```css
|
|
71
|
-
* :root {
|
|
72
|
-
* --consent-primary: #2563EB;
|
|
73
|
-
* --consent-secondary: #DBEAFE;
|
|
74
|
-
* }
|
|
75
|
-
* ```
|
|
76
|
-
*/
|
|
77
|
-
export declare function generateRootCSSBlock(branding?: ConsentBranding): string;
|
|
78
|
-
//# sourceMappingURL=css-variables.d.ts.map
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* CSS Variable Generation
|
|
3
|
-
*
|
|
4
|
-
* Generates CSS custom properties for theming consent pages.
|
|
5
|
-
*
|
|
6
|
-
* @module @kya-os/consent/styles/css-variables
|
|
7
|
-
*/
|
|
8
|
-
import { DEFAULT_COLORS } from "../constants/colors.js";
|
|
9
|
-
/**
|
|
10
|
-
* CSS variable names used in consent pages
|
|
11
|
-
*/
|
|
12
|
-
export const CSS_VAR_NAMES = {
|
|
13
|
-
PRIMARY: "--consent-primary",
|
|
14
|
-
SECONDARY: "--consent-secondary",
|
|
15
|
-
PRIMARY_RGB: "--consent-primary-rgb",
|
|
16
|
-
SECONDARY_RGB: "--consent-secondary-rgb",
|
|
17
|
-
BACKGROUND: "--consent-background",
|
|
18
|
-
TEXT_PRIMARY: "--consent-text-primary",
|
|
19
|
-
TEXT_SECONDARY: "--consent-text-secondary",
|
|
20
|
-
BORDER: "--consent-border",
|
|
21
|
-
};
|
|
22
|
-
/**
|
|
23
|
-
* Convert hex color to RGB string
|
|
24
|
-
*
|
|
25
|
-
* @param hex - Hex color string (e.g., '#2563EB')
|
|
26
|
-
* @returns RGB string (e.g., '37, 99, 235')
|
|
27
|
-
*/
|
|
28
|
-
export function hexToRgb(hex) {
|
|
29
|
-
// Remove # if present
|
|
30
|
-
const cleanHex = hex.replace(/^#/, '');
|
|
31
|
-
// Parse hex to RGB
|
|
32
|
-
const r = parseInt(cleanHex.slice(0, 2), 16);
|
|
33
|
-
const g = parseInt(cleanHex.slice(2, 4), 16);
|
|
34
|
-
const b = parseInt(cleanHex.slice(4, 6), 16);
|
|
35
|
-
return `${r}, ${g}, ${b}`;
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Generate CSS variables from branding configuration
|
|
39
|
-
*
|
|
40
|
-
* @param branding - Branding config (optional fields)
|
|
41
|
-
* @returns CSS variable object with resolved values
|
|
42
|
-
*/
|
|
43
|
-
export function generateCSSVariables(branding) {
|
|
44
|
-
const primary = branding?.primaryColor ?? DEFAULT_COLORS.PRIMARY;
|
|
45
|
-
const secondary = branding?.secondaryColor ?? DEFAULT_COLORS.SECONDARY;
|
|
46
|
-
return {
|
|
47
|
-
"--consent-primary": primary,
|
|
48
|
-
"--consent-secondary": secondary,
|
|
49
|
-
"--consent-primary-rgb": hexToRgb(primary),
|
|
50
|
-
"--consent-secondary-rgb": hexToRgb(secondary),
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
/**
|
|
54
|
-
* Generate CSS variable declarations as a style string
|
|
55
|
-
*
|
|
56
|
-
* @param branding - Branding config
|
|
57
|
-
* @returns CSS style string (e.g., "--consent-primary: #2563EB;")
|
|
58
|
-
*/
|
|
59
|
-
export function generateCSSVariableString(branding) {
|
|
60
|
-
const vars = generateCSSVariables(branding);
|
|
61
|
-
return Object.entries(vars)
|
|
62
|
-
.map(([name, value]) => `${name}: ${value};`)
|
|
63
|
-
.join(" ");
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* Generate CSS variable declarations with all theme colors
|
|
67
|
-
*
|
|
68
|
-
* @param branding - Branding config
|
|
69
|
-
* @returns Complete CSS variable declarations including derived colors
|
|
70
|
-
*/
|
|
71
|
-
export function generateFullCSSVariables(branding) {
|
|
72
|
-
const primary = branding?.primaryColor ?? DEFAULT_COLORS.PRIMARY;
|
|
73
|
-
const secondary = branding?.secondaryColor ?? DEFAULT_COLORS.SECONDARY;
|
|
74
|
-
return {
|
|
75
|
-
// Core branding colors
|
|
76
|
-
[CSS_VAR_NAMES.PRIMARY]: primary,
|
|
77
|
-
[CSS_VAR_NAMES.SECONDARY]: secondary,
|
|
78
|
-
// Additional theme colors
|
|
79
|
-
[CSS_VAR_NAMES.BACKGROUND]: DEFAULT_COLORS.BACKGROUND,
|
|
80
|
-
[CSS_VAR_NAMES.TEXT_PRIMARY]: DEFAULT_COLORS.TEXT_PRIMARY,
|
|
81
|
-
[CSS_VAR_NAMES.TEXT_SECONDARY]: DEFAULT_COLORS.TEXT_SECONDARY,
|
|
82
|
-
[CSS_VAR_NAMES.BORDER]: DEFAULT_COLORS.BORDER,
|
|
83
|
-
};
|
|
84
|
-
}
|
|
85
|
-
/**
|
|
86
|
-
* Generate a style attribute value with CSS variables
|
|
87
|
-
*
|
|
88
|
-
* @param branding - Branding config
|
|
89
|
-
* @returns Style attribute value for inline styling
|
|
90
|
-
*
|
|
91
|
-
* @example
|
|
92
|
-
* ```html
|
|
93
|
-
* <div style="${generateStyleAttribute(branding)}">...</div>
|
|
94
|
-
* ```
|
|
95
|
-
*/
|
|
96
|
-
export function generateStyleAttribute(branding) {
|
|
97
|
-
return generateCSSVariableString(branding);
|
|
98
|
-
}
|
|
99
|
-
/**
|
|
100
|
-
* Generate a :root CSS block with all variables
|
|
101
|
-
*
|
|
102
|
-
* @param branding - Branding config
|
|
103
|
-
* @returns CSS :root block
|
|
104
|
-
*
|
|
105
|
-
* @example
|
|
106
|
-
* ```css
|
|
107
|
-
* :root {
|
|
108
|
-
* --consent-primary: #2563EB;
|
|
109
|
-
* --consent-secondary: #DBEAFE;
|
|
110
|
-
* }
|
|
111
|
-
* ```
|
|
112
|
-
*/
|
|
113
|
-
export function generateRootCSSBlock(branding) {
|
|
114
|
-
const vars = generateFullCSSVariables(branding);
|
|
115
|
-
const declarations = Object.entries(vars)
|
|
116
|
-
.map(([name, value]) => ` ${name}: ${value};`)
|
|
117
|
-
.join("\n");
|
|
118
|
-
return `:root {\n${declarations}\n}`;
|
|
119
|
-
}
|
|
120
|
-
//# sourceMappingURL=css-variables.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"css-variables.js","sourceRoot":"","sources":["../../src/styles/css-variables.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,OAAO,EAAE,mBAAmB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,WAAW,EAAE,uBAAuB;IACpC,aAAa,EAAE,yBAAyB;IACxC,UAAU,EAAE,sBAAsB;IAClC,YAAY,EAAE,wBAAwB;IACtC,cAAc,EAAE,0BAA0B;IAC1C,MAAM,EAAE,kBAAkB;CAClB,CAAC;AAIX;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,GAAW;IAClC,sBAAsB;IACtB,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAEvC,mBAAmB;IACnB,MAAM,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7C,MAAM,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7C,MAAM,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAE7C,OAAO,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;AAC5B,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,QAA0B;IAC7D,MAAM,OAAO,GAAG,QAAQ,EAAE,YAAY,IAAI,cAAc,CAAC,OAAO,CAAC;IACjE,MAAM,SAAS,GAAG,QAAQ,EAAE,cAAc,IAAI,cAAc,CAAC,SAAS,CAAC;IAEvE,OAAO;QACL,mBAAmB,EAAE,OAAO;QAC5B,qBAAqB,EAAE,SAAS;QAChC,uBAAuB,EAAE,QAAQ,CAAC,OAAO,CAAC;QAC1C,yBAAyB,EAAE,QAAQ,CAAC,SAAS,CAAC;KAC/C,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,yBAAyB,CAAC,QAA0B;IAClE,MAAM,IAAI,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IAC5C,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SACxB,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,KAAK,GAAG,CAAC;SAC5C,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,wBAAwB,CAAC,QAA0B;IACjE,MAAM,OAAO,GAAG,QAAQ,EAAE,YAAY,IAAI,cAAc,CAAC,OAAO,CAAC;IACjE,MAAM,SAAS,GAAG,QAAQ,EAAE,cAAc,IAAI,cAAc,CAAC,SAAS,CAAC;IAEvE,OAAO;QACL,uBAAuB;QACvB,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,OAAO;QAChC,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE,SAAS;QACpC,0BAA0B;QAC1B,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC,UAAU;QACrD,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY;QACzD,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,cAAc;QAC7D,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,cAAc,CAAC,MAAM;KAC9C,CAAC;AACJ,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,sBAAsB,CAAC,QAA0B;IAC/D,OAAO,yBAAyB,CAAC,QAAQ,CAAC,CAAC;AAC7C,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,oBAAoB,CAAC,QAA0B;IAC7D,MAAM,IAAI,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SACtC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,KAAK,KAAK,GAAG,CAAC;SAC9C,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,OAAO,YAAY,YAAY,KAAK,CAAC;AACvC,CAAC"}
|
package/dist/styles/index.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Consent Styles
|
|
3
|
-
*
|
|
4
|
-
* CSS tokens and generators for consent page styling.
|
|
5
|
-
* Matches AgentShield preview components exactly for pixel-perfect parity.
|
|
6
|
-
*
|
|
7
|
-
* @module @kya-os/consent/styles
|
|
8
|
-
*/
|
|
9
|
-
export * from "./tokens.js";
|
|
10
|
-
export * from "./css-variables.js";
|
|
11
|
-
export * from "./stylesheet.js";
|
|
12
|
-
//# sourceMappingURL=index.d.ts.map
|
package/dist/styles/index.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Consent Styles
|
|
3
|
-
*
|
|
4
|
-
* CSS tokens and generators for consent page styling.
|
|
5
|
-
* Matches AgentShield preview components exactly for pixel-perfect parity.
|
|
6
|
-
*
|
|
7
|
-
* @module @kya-os/consent/styles
|
|
8
|
-
*/
|
|
9
|
-
export * from "./tokens.js";
|
|
10
|
-
export * from "./css-variables.js";
|
|
11
|
-
export * from "./stylesheet.js";
|
|
12
|
-
//# sourceMappingURL=index.js.map
|
package/dist/styles/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Stylesheet Generation
|
|
3
|
-
*
|
|
4
|
-
* Generates complete CSS stylesheets for consent pages.
|
|
5
|
-
*
|
|
6
|
-
* @module @kya-os/consent/styles/stylesheet
|
|
7
|
-
*/
|
|
8
|
-
import type { ConsentBranding } from "../types/branding.types.js";
|
|
9
|
-
/**
|
|
10
|
-
* Custom checkbox styles that work with Tailwind's appearance-none
|
|
11
|
-
*
|
|
12
|
-
* Creates a checkmark using CSS that appears when checked.
|
|
13
|
-
*/
|
|
14
|
-
export declare const CHECKBOX_STYLES = "\n/* Custom checkbox checkmark */\ninput[type=\"checkbox\"]:checked::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n width: 5px;\n height: 9px;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: translate(-50%, -60%) rotate(45deg);\n}\n\n/* Focus ring for accessibility */\ninput[type=\"checkbox\"]:focus-visible {\n outline: 2px solid var(--consent-primary);\n outline-offset: 2px;\n}\n";
|
|
15
|
-
/**
|
|
16
|
-
* Form input focus styles
|
|
17
|
-
*/
|
|
18
|
-
export declare const INPUT_STYLES = "\n/* Input focus states */\ninput:focus,\nselect:focus,\ntextarea:focus {\n outline: none;\n ring: 2px;\n ring-color: var(--consent-primary);\n border-color: transparent;\n}\n\n/* Password visibility toggle button */\n.password-toggle {\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n padding: 4px;\n cursor: pointer;\n color: #6B7280;\n}\n\n.password-toggle:hover {\n color: #374151;\n}\n";
|
|
19
|
-
/**
|
|
20
|
-
* Loading spinner animation
|
|
21
|
-
*/
|
|
22
|
-
export declare const SPINNER_STYLES = "\n/* Loading spinner */\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n";
|
|
23
|
-
/**
|
|
24
|
-
* Smooth transitions
|
|
25
|
-
*/
|
|
26
|
-
export declare const TRANSITION_STYLES = "\n/* Smooth transitions */\n.transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.transition-colors {\n transition-property: color, background-color, border-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n";
|
|
27
|
-
/**
|
|
28
|
-
* Generate a complete stylesheet for consent pages
|
|
29
|
-
*
|
|
30
|
-
* @param branding - Branding configuration
|
|
31
|
-
* @returns Complete CSS stylesheet string
|
|
32
|
-
*/
|
|
33
|
-
export declare function generateStylesheet(branding?: ConsentBranding): string;
|
|
34
|
-
/**
|
|
35
|
-
* Generate minimal inline styles (for embedding in HTML)
|
|
36
|
-
*
|
|
37
|
-
* @param branding - Branding configuration
|
|
38
|
-
* @returns Minimal CSS for inline <style> tag
|
|
39
|
-
*/
|
|
40
|
-
export declare function generateInlineStyles(branding?: ConsentBranding): string;
|
|
41
|
-
/**
|
|
42
|
-
* Generate styles for a specific component
|
|
43
|
-
*
|
|
44
|
-
* @param component - Component name
|
|
45
|
-
* @returns Component-specific CSS
|
|
46
|
-
*/
|
|
47
|
-
export declare function generateComponentStyles(component: "checkbox" | "input" | "spinner" | "all"): string;
|
|
48
|
-
/**
|
|
49
|
-
* Generate styles for the <head> section of consent pages
|
|
50
|
-
*
|
|
51
|
-
* This is an alias for generateStylesheet for compatibility with templates.
|
|
52
|
-
*
|
|
53
|
-
* @param branding - Branding configuration
|
|
54
|
-
* @returns CSS styles for <style> tag in <head>
|
|
55
|
-
*/
|
|
56
|
-
export declare function generateHeadStyles(branding?: ConsentBranding): string;
|
|
57
|
-
//# sourceMappingURL=stylesheet.d.ts.map
|
|
@@ -1,197 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Stylesheet Generation
|
|
3
|
-
*
|
|
4
|
-
* Generates complete CSS stylesheets for consent pages.
|
|
5
|
-
*
|
|
6
|
-
* @module @kya-os/consent/styles/stylesheet
|
|
7
|
-
*/
|
|
8
|
-
import { generateRootCSSBlock } from "./css-variables.js";
|
|
9
|
-
/**
|
|
10
|
-
* Custom checkbox styles that work with Tailwind's appearance-none
|
|
11
|
-
*
|
|
12
|
-
* Creates a checkmark using CSS that appears when checked.
|
|
13
|
-
*/
|
|
14
|
-
export const CHECKBOX_STYLES = `
|
|
15
|
-
/* Custom checkbox checkmark */
|
|
16
|
-
input[type="checkbox"]:checked::before {
|
|
17
|
-
content: '';
|
|
18
|
-
position: absolute;
|
|
19
|
-
left: 50%;
|
|
20
|
-
top: 50%;
|
|
21
|
-
width: 5px;
|
|
22
|
-
height: 9px;
|
|
23
|
-
border: solid white;
|
|
24
|
-
border-width: 0 2px 2px 0;
|
|
25
|
-
transform: translate(-50%, -60%) rotate(45deg);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/* Focus ring for accessibility */
|
|
29
|
-
input[type="checkbox"]:focus-visible {
|
|
30
|
-
outline: 2px solid var(--consent-primary);
|
|
31
|
-
outline-offset: 2px;
|
|
32
|
-
}
|
|
33
|
-
`;
|
|
34
|
-
/**
|
|
35
|
-
* Form input focus styles
|
|
36
|
-
*/
|
|
37
|
-
export const INPUT_STYLES = `
|
|
38
|
-
/* Input focus states */
|
|
39
|
-
input:focus,
|
|
40
|
-
select:focus,
|
|
41
|
-
textarea:focus {
|
|
42
|
-
outline: none;
|
|
43
|
-
ring: 2px;
|
|
44
|
-
ring-color: var(--consent-primary);
|
|
45
|
-
border-color: transparent;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
/* Password visibility toggle button */
|
|
49
|
-
.password-toggle {
|
|
50
|
-
position: absolute;
|
|
51
|
-
right: 12px;
|
|
52
|
-
top: 50%;
|
|
53
|
-
transform: translateY(-50%);
|
|
54
|
-
background: none;
|
|
55
|
-
border: none;
|
|
56
|
-
padding: 4px;
|
|
57
|
-
cursor: pointer;
|
|
58
|
-
color: #6B7280;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.password-toggle:hover {
|
|
62
|
-
color: #374151;
|
|
63
|
-
}
|
|
64
|
-
`;
|
|
65
|
-
/**
|
|
66
|
-
* Loading spinner animation
|
|
67
|
-
*/
|
|
68
|
-
export const SPINNER_STYLES = `
|
|
69
|
-
/* Loading spinner */
|
|
70
|
-
@keyframes spin {
|
|
71
|
-
to {
|
|
72
|
-
transform: rotate(360deg);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.animate-spin {
|
|
77
|
-
animation: spin 1s linear infinite;
|
|
78
|
-
}
|
|
79
|
-
`;
|
|
80
|
-
/**
|
|
81
|
-
* Smooth transitions
|
|
82
|
-
*/
|
|
83
|
-
export const TRANSITION_STYLES = `
|
|
84
|
-
/* Smooth transitions */
|
|
85
|
-
.transition-opacity {
|
|
86
|
-
transition-property: opacity;
|
|
87
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
88
|
-
transition-duration: 150ms;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.transition-colors {
|
|
92
|
-
transition-property: color, background-color, border-color;
|
|
93
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
94
|
-
transition-duration: 150ms;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.transition-shadow {
|
|
98
|
-
transition-property: box-shadow;
|
|
99
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
100
|
-
transition-duration: 150ms;
|
|
101
|
-
}
|
|
102
|
-
`;
|
|
103
|
-
/**
|
|
104
|
-
* Generate a complete stylesheet for consent pages
|
|
105
|
-
*
|
|
106
|
-
* @param branding - Branding configuration
|
|
107
|
-
* @returns Complete CSS stylesheet string
|
|
108
|
-
*/
|
|
109
|
-
export function generateStylesheet(branding) {
|
|
110
|
-
const rootVars = generateRootCSSBlock(branding);
|
|
111
|
-
return `
|
|
112
|
-
/* Consent Page Styles - Generated by @kya-os/consent */
|
|
113
|
-
|
|
114
|
-
${rootVars}
|
|
115
|
-
|
|
116
|
-
${CHECKBOX_STYLES}
|
|
117
|
-
|
|
118
|
-
${INPUT_STYLES}
|
|
119
|
-
|
|
120
|
-
${SPINNER_STYLES}
|
|
121
|
-
|
|
122
|
-
${TRANSITION_STYLES}
|
|
123
|
-
|
|
124
|
-
/* Button hover states with primary color */
|
|
125
|
-
button[type="submit"]:not(:disabled):hover,
|
|
126
|
-
.btn-primary:not(:disabled):hover {
|
|
127
|
-
opacity: 0.9;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
/* Disabled states */
|
|
131
|
-
button:disabled,
|
|
132
|
-
input:disabled {
|
|
133
|
-
opacity: 0.5;
|
|
134
|
-
cursor: not-allowed;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
/* Link with primary color */
|
|
138
|
-
a.consent-link {
|
|
139
|
-
color: var(--consent-primary);
|
|
140
|
-
text-decoration: none;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
a.consent-link:hover {
|
|
144
|
-
text-decoration: underline;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
/* Scope badge with derived colors */
|
|
148
|
-
.scope-badge {
|
|
149
|
-
background-color: var(--consent-secondary);
|
|
150
|
-
color: var(--consent-primary);
|
|
151
|
-
}
|
|
152
|
-
`.trim();
|
|
153
|
-
}
|
|
154
|
-
/**
|
|
155
|
-
* Generate minimal inline styles (for embedding in HTML)
|
|
156
|
-
*
|
|
157
|
-
* @param branding - Branding configuration
|
|
158
|
-
* @returns Minimal CSS for inline <style> tag
|
|
159
|
-
*/
|
|
160
|
-
export function generateInlineStyles(branding) {
|
|
161
|
-
const rootVars = generateRootCSSBlock(branding);
|
|
162
|
-
return `
|
|
163
|
-
${rootVars}
|
|
164
|
-
${CHECKBOX_STYLES}
|
|
165
|
-
input:focus { outline: none; box-shadow: 0 0 0 2px var(--consent-primary); }
|
|
166
|
-
`.trim();
|
|
167
|
-
}
|
|
168
|
-
/**
|
|
169
|
-
* Generate styles for a specific component
|
|
170
|
-
*
|
|
171
|
-
* @param component - Component name
|
|
172
|
-
* @returns Component-specific CSS
|
|
173
|
-
*/
|
|
174
|
-
export function generateComponentStyles(component) {
|
|
175
|
-
switch (component) {
|
|
176
|
-
case "checkbox":
|
|
177
|
-
return CHECKBOX_STYLES;
|
|
178
|
-
case "input":
|
|
179
|
-
return INPUT_STYLES;
|
|
180
|
-
case "spinner":
|
|
181
|
-
return SPINNER_STYLES;
|
|
182
|
-
case "all":
|
|
183
|
-
return [CHECKBOX_STYLES, INPUT_STYLES, SPINNER_STYLES, TRANSITION_STYLES].join("\n");
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
/**
|
|
187
|
-
* Generate styles for the <head> section of consent pages
|
|
188
|
-
*
|
|
189
|
-
* This is an alias for generateStylesheet for compatibility with templates.
|
|
190
|
-
*
|
|
191
|
-
* @param branding - Branding configuration
|
|
192
|
-
* @returns CSS styles for <style> tag in <head>
|
|
193
|
-
*/
|
|
194
|
-
export function generateHeadStyles(branding) {
|
|
195
|
-
return generateStylesheet(branding);
|
|
196
|
-
}
|
|
197
|
-
//# sourceMappingURL=stylesheet.js.map
|