fix: hardcoded the vars - css extraction not working when imported in…

… consumer project atm and need to investigate - this is considered a temp fix
EAVFW · Nov 14, 2024 · 9ee1c1c · 9ee1c1c
1 parent 5e4fd64
commit 9ee1c1c
Showing 1 changed file with 73 additions and 1 deletion.
diff --git a/packages/core/src/style/quickFormTokensDefinition.ts b/packages/core/src/style/quickFormTokensDefinition.ts
@@ -107,5 +107,77 @@ export const defineQuickFormTokens = (...tokens: Array<Partial<QuickFormTokens>>
  * Provides QuickForm with css tokens to be passed around in the components so they refer to the same css variables that are loaded into the QuickFormProvider upon application instantiation.
  * @returns A flat object with CSS variables in camelCase that have corresponding values provided as kebab-case tokens variable names that map to globally defined colors.
  * See example: quickformtokens = { onPrimary: "var(--on-primary)"; onSecondary: "var(--on-secondary)" } and so on. You get the idea.
+ * export const quickformtokens = camelToKebabCase(defaultQuickFormTokens); 
  */
-export const quickformtokens = camelToKebabCase(defaultQuickFormTokens);
+export const quickformtokens = {
+    "white": "var(--white)",
+    "black": "var(--black)",
+    "warning": "var(--warning)",
+    "success": "var(--success)",
+    "info": "var(--info)",
+    "primary": "var(--primary)",
+    "primaryLighter": "var(--primary-lighter)",
+    "secondary": "var(--secondary)",
+    "background": "var(--background)",
+    "onBackground": "var(--on-background)",
+    "onBackgroundDarker100": "var(--on-background-darker100)",
+    "onBackgroundDarker200": "var(--on-background-darker200)",
+    "onBackgroundDarker300": "var(--on-background-darker300)",
+    "onBackgroundDarker400": "var(--on-background-darker400)",
+    "onBackgroundDarker500": "var(--on-background-darker500)",
+    "onBackgroundDarker600": "var(--on-background-darker600)",
+    "onBackgroundDarker700": "var(--on-background-darker700)",
+    "onBackgroundDarker800": "var(--on-background-darker800)",
+    "onBackgroundDarker900": "var(--on-background-darker900)",
+    "onBackgroundLighter": "var(--on-background-lighter)",
+    "surface": "var(--surface)",
+    "onSurface": "var(--on-surface)",
+    "error": "var(--error)",
+    "onError": "var(--on-error)",
+    "onErrorDarker100": "var(--on-error-darker100)",
+    "onErrorDarker200": "var(--on-error-darker200)",
+    "onErrorDarker300": "var(--on-error-darker300)",
+    "onErrorDarker400": "var(--on-error-darker400)",
+    "onErrorDarker500": "var(--on-error-darker500)",
+    "onErrorDarker600": "var(--on-error-darker600)",
+    "onErrorDarker700": "var(--on-error-darker700)",
+    "onErrorDarker800": "var(--on-error-darker800)",
+    "onErrorDarker900": "var(--on-error-darker900)",
+    "onPrimary": "var(--on-primary)",
+    "onSecondary": "var(--on-secondary)",
+    "fontFamily": "var(--font-family)",
+    "headlineFontSize": "var(--headline-font-size)",
+    "subtitleFontSize": "var(--subtitle-font-size)",
+    "paragraphFontSize": "var(--paragraph-font-size)",
+    "paragraphMobileFontSize": "var(--paragraph-mobile-font-size)",
+    "btnFontSize": "var(--btn-font-size)",
+    "btnFontWeight": "var(--btn-font-weight)",
+    "btnEnterKeyTextFontSize": "var(--btn-enter-key-text-font-size)",
+    "multilineTextFontSize": "var(--multiline-text-font-size)",
+    "multilineTextMobileFontSize": "var(--multiline-text-mobile-font-size)",
+    "questionHeadlineFontSize": "var(--question-headline-font-size)",
+    "questionParagraphFontSize": "var(--question-paragraph-font-size)",
+    "questionNumberFontSize": "var(--question-number-font-size)",
+    "questionInputFontSize": "var(--question-input-font-size)",
+    "questionInputGap": "var(--question-input-gap)",
+    "questionPlaceholderColor": "var(--question-placeholder-color)",
+    "questionHeadlineFontWeight": "var(--question-headline-font-weight)",
+    "questionBottomMargin": "var(--question-bottom-margin)",
+    "questionTopMargin": "var(--question-top-margin)",
+    "questionBorderRadius": "var(--question-border-radius)",
+    "questionPadding": "var(--question-padding)",
+    "questionPaddingBottom": "var(--question-padding-bottom)",
+    "gap1": "var(--gap1)",
+    "gap2": "var(--gap2)",
+    "gap4": "var(--gap4)",
+    "disabledOpacity": "var(--disabled-opacity)",
+    "dividerOpacity": "var(--divider-opacity)",
+    "lowEmphasisOpacity": "var(--low-emphasis-opacity)",
+    "mediumEmphasisOpacity": "var(--medium-emphasis-opacity)",
+    "highEmphasisOpacity": "var(--high-emphasis-opacity)",
+    "slideButtonIconSize": "var(--slide-button-icon-size)",
+    "headlineColor": "var(--headline-color,var(--primary))",
+    "subtitleColor": "var(--subtitle-color,inherit)",
+    "strongWeight": "var(--strong-weight,900)",
+    "slideButtonBorderRadius": "var(--slide-button-border-radius,100px)"
+}