;
@@ -98,10 +137,28 @@ export class StyleInjector {
});
}
+ const resolvedNativeValue = getNativeValuesFromCSSVariables(
+ styledResolved?.resolved,
+ CONFIG?.tokens
+ );
+
+ const resolvedThemeNativeValue: any = {};
+
+ Object.keys(styledResolved?.themeResolved).forEach((key) => {
+ const currentThemeStyleObj = styledResolved?.themeResolved[key];
+ const resolvedCurrentThemeNativeValue =
+ getNativeValuesFromCSSVariables(
+ currentThemeStyleObj,
+ CONFIG?.themes?.[key]
+ );
+ resolvedThemeNativeValue[key] = resolvedCurrentThemeNativeValue;
+ });
+
if (styledResolved) {
this.#globalStyleMap.set(styledResolved.meta.cssId, {
...styledResolved,
- value: styledResolved?.resolved,
+ resolved: resolvedNativeValue,
+ themeResolved: resolvedThemeNativeValue,
});
}
}
@@ -116,6 +173,8 @@ export class StyleInjector {
orderResolvedStyleMap.forEach((styledResolved: any) => {
this.#globalStyleMap.set(styledResolved.meta.cssId, styledResolved);
+ this.#idCounter++;
+
this.#toBeInjectedIdsArray.push(styledResolved.meta.cssId);
const type = styledResolved?.type;
@@ -167,22 +226,23 @@ export class StyleInjector {
componentExtendedConfig,
ignoreKeys
);
- addThemeConditionInMeta(componentTheme, CONFIG);
+ componentTheme.themeResolved = themeStyledValueToCSSObject(
+ theme,
+ componentExtendedConfig,
+ ignoreKeys
+ );
+ // addThemeConditionInMeta(componentTheme, CONFIG);
// delete componentTheme.meta.cssRuleset;
if (componentTheme.meta && componentTheme.meta.queryCondition) {
- // console.log(
- // JSON.parse(JSON.stringify(CONFIG)),
- // componentTheme.meta,
- // componentTheme.meta.queryCondition
- // );
-
- const queryCondition = resolveTokensFromConfig(CONFIG, {
- condition: componentTheme.meta.queryCondition,
- })?.condition;
- // console.log(JSON.parse(JSON.stringify(CONFIG)), queryCondition);
-
+ const queryCondition = resolveTokensFromConfig(
+ CONFIG,
+ {
+ condition: componentTheme.meta.queryCondition,
+ },
+ true
+ )?.condition;
componentTheme.meta.queryCondition = queryCondition;
}
diff --git a/packages/styled/react/src/styled.tsx b/packages/styled/react/src/styled.tsx
index 3b91401f74..03454bed2c 100644
--- a/packages/styled/react/src/styled.tsx
+++ b/packages/styled/react/src/styled.tsx
@@ -987,7 +987,6 @@ export function verboseStyled(
const orderedSXResolved =
styledResolvedToOrderedSXResolved(sxStyledResolved);
-
INTERNAL_updateCSSStyleInOrderedResolved(
orderedSXResolved,
sxHash,
@@ -1002,7 +1001,8 @@ export function verboseStyled
(
GluestackStyleSheet,
Platform.OS,
inlineStyleMap,
- ignoreKeys
+ ignoreKeys,
+ CONFIG
);
return orderedSXResolved;
@@ -1058,7 +1058,7 @@ export function verboseStyled
(
const styledContext = useStyled();
- const { theme: activeTheme } = useTheme();
+ const { themes: activeThemes } = useTheme();
const ancestorStyleContext = useContext(AncestorStyleContext);
let incomingComponentProps = {};
@@ -2002,7 +2002,7 @@ export function verboseStyled
(
applyComponentInlineProps,
styleCSSIds,
CONFIG,
- activeTheme,
+ activeThemes,
componentConfig
);
diff --git a/packages/styled/react/src/types.ts b/packages/styled/react/src/types.ts
index 0ad2cdfe77..05e1d65973 100644
--- a/packages/styled/react/src/types.ts
+++ b/packages/styled/react/src/types.ts
@@ -91,14 +91,20 @@ export type CreateConfig = {
export type ThemeStyles = Partial<{
[key: string]: {
[key in keyof IToken]?: {
- // @ts-ignore
- [k in `$${keyof IToken[key]}`]?: // @ts-ignore
+ //@ts-ignore
+ [k in `${keyof IToken[key]}`]?: // @ts-ignore
| `$${key}$${keyof IToken[key]}`
- | (String & {});
+ | (String & {})
+ | number;
};
+ //& Partial<{ [Key: string]: any }>;
};
}>;
+// export type ThemeStyles = Partial<{
+// [key: string]: Tokens;
+// }>;
+
// Generic Creator
export type GlueStackConfig<
IToken extends Tokens,
@@ -176,6 +182,7 @@ export type SxStyleProps<
//@ts-ignore
type GlobalVariants = GSConfig['globalStyle']['variants'];
+type GlobalThemes = keyof GSConfig['themes'];
export type IComponentStyleConfig = Partial<{
descendantStyle: any;
@@ -461,6 +468,44 @@ export type SxProps<
MediaQuery,
PluginType
>;
+ } & {
+ [Key in `.${GlobalThemes}`]?: SxProps<
+ GenericComponentStyles,
+ Variants,
+ GenericComponentProps,
+ PLATFORM,
+ MediaQuery,
+ PluginType
+ > &
+ PassingPropsType<
+ GenericComponentStyles,
+ Variants,
+ GenericComponentProps,
+ MediaQuery,
+ PluginType
+ > &
+ Partial<{
+ [key: string]: any;
+ }>;
+ } & {
+ [Key in `.${string}`]?: SxProps<
+ GenericComponentStyles,
+ Variants,
+ GenericComponentProps,
+ PLATFORM,
+ MediaQuery,
+ PluginType
+ > &
+ PassingPropsType<
+ GenericComponentStyles,
+ Variants,
+ GenericComponentProps,
+ MediaQuery,
+ PluginType
+ > &
+ Partial<{
+ [key: string]: any;
+ }>;
} & {
[Key in `:${IState}`]?: SxProps<
GenericComponentStyles,
@@ -641,6 +686,7 @@ export type VerbosedSX = {
queries?: Array;
platform?: { [K in PLATFORMS]?: VerbosedSX };
colorMode?: { [K in COLORMODES]?: VerbosedSX };
+ theme?: { [key: string]: VerbosedSX };
state?: { [K in IState]?: VerbosedSX };
descendants?: { [key: string]: VerbosedSX };
};
@@ -650,6 +696,7 @@ export type VerbosedSxResolved = {
queriesResolved: Array;
platform?: { [K in PLATFORMS]?: VerbosedSX };
colorMode?: { [key: string]: VerbosedSxResolved };
+ theme?: { [key: string]: VerbosedSxResolved };
state?: { [key: string]: VerbosedSxResolved };
descendants?: { [key: string]: VerbosedSxResolved };
};
@@ -826,6 +873,7 @@ type StatePropsCombination = Permutations;
type PlatformPropsCombination = Permutations;
type MediaQueryCombination = Permutations;
type ColorModeCombination = Permutations;
+type ThemeCombination = Permutations<`t_${GlobalThemes}`, keyof Aliases>;
type LastPart = T extends `${string}-${infer Rest}`
? LastPart
@@ -835,7 +883,8 @@ export type PropsCombinations =
| StatePropsCombination
| PlatformPropsCombination
| MediaQueryCombination
- | ColorModeCombination;
+ | ColorModeCombination
+ | ThemeCombination;
export type UtilityProps<
GenericComponentStyles,
diff --git a/packages/styled/react/src/updateCSSStyleInOrderedResolved.web.ts b/packages/styled/react/src/updateCSSStyleInOrderedResolved.web.ts
index 2292979678..4c5467d91b 100644
--- a/packages/styled/react/src/updateCSSStyleInOrderedResolved.web.ts
+++ b/packages/styled/react/src/updateCSSStyleInOrderedResolved.web.ts
@@ -28,11 +28,11 @@ export function getCSSIdAndRuleset(
toBeInjectedStyle.colorMode = styleValueResolvedWithMeta.meta.colorMode;
}
// @ts-ignore
- if (styleValueResolvedWithMeta.meta.themeCondition) {
+ if (styleValueResolvedWithMeta.meta.theme) {
// @ts-ignore
- toBeInjectedStyle.themeCondition =
+ toBeInjectedStyle.theme =
// @ts-ignore
- styleValueResolvedWithMeta.meta.themeCondition;
+ styleValueResolvedWithMeta.meta.theme;
}
//@ts-ignore
@@ -49,13 +49,6 @@ export function getCSSIdAndRuleset(
hasState
);
- // var hr = stableHash({ hello: 'helloworld' });
-
- // console.log(
- // toBeInjectedStyle,
- // stableHash(toBeInjectedStyle),
- // 'consistant hash @@@@'
- // );
return cssObject;
}
diff --git a/packages/styled/react/src/utils.ts b/packages/styled/react/src/utils.ts
index df9905f2e1..33a3ebb9d6 100644
--- a/packages/styled/react/src/utils.ts
+++ b/packages/styled/react/src/utils.ts
@@ -1,6 +1,89 @@
-// import { stableHash } from './stableHash';
import type { Config } from './types';
+const propsNotToConvertToCSSVariables = ['shadowColor', 'textShadowColor'];
+
+export function convertToUnicodeString(inputString: any) {
+ let result = '';
+ if (!inputString) {
+ return result;
+ }
+ for (let i = 0; i < inputString.length; i++) {
+ const currentChar = inputString.charAt(i);
+
+ // Check if the character is a special character (excluding "-" and "_")
+ if (/[^a-zA-Z0-9\-_]/.test(currentChar)) {
+ // Convert the special character to its Unicode representation
+ const unicodeValue = currentChar.charCodeAt(0).toString(16);
+ result += `\\u${'0000'.slice(unicodeValue.length)}${unicodeValue}`;
+ } else {
+ // Keep non-special characters, "-", and "_" as they are
+ result += currentChar;
+ }
+ }
+
+ return result;
+}
+
+export function convertFromUnicodeString(inputString: any) {
+ let result = '';
+ if (!inputString) {
+ return result;
+ }
+
+ // Use a regular expression to match Unicode sequences (e.g., \uXXXX)
+ const unicodeRegex = /\\u[0-9a-fA-F]{4}/g;
+
+ // Replace each Unicode sequence with its corresponding character
+ result = inputString.replace(unicodeRegex, (match: any) => {
+ // Extract the Unicode value from the matched sequence
+ const unicodeValue = parseInt(match.substring(2), 16);
+ // Convert the Unicode value to the corresponding character
+ return String.fromCharCode(unicodeValue);
+ });
+
+ return result;
+}
+
+export function convertTokensToCssVariables(currentConfig: any) {
+ function objectToCssVariables(obj: any, prefix = '') {
+ return Object.keys(obj).reduce((acc, key) => {
+ const variableName = `--${prefix}${key}`;
+ const variableValue = obj[key];
+
+ if (typeof variableValue === 'object') {
+ // Recursively process nested objects
+ acc += objectToCssVariables(variableValue, `${prefix}${key}-`);
+ } else {
+ acc += `${convertToUnicodeString(variableName)}: ${variableValue};\n`;
+ }
+
+ return acc;
+ }, '');
+ }
+
+ const tokens = currentConfig.tokens;
+ const cssVariables = objectToCssVariables(tokens);
+ let content = `:root {\n${cssVariables}}`;
+
+ if (currentConfig.themes) {
+ Object.keys(currentConfig.themes).forEach((key) => {
+ const theme = currentConfig.themes[key];
+ const cssVariables = objectToCssVariables(theme);
+ content += `\n\n[data-theme-id=${key}] {\n${cssVariables}}`;
+ });
+ }
+
+ return content;
+
+ // const cssVariablesBlock = `
+ // :root {
+ // --colors-red500: blue;
+ // }
+ // `;
+
+ // return cssVariablesBlock;
+}
+
// --------------------------------- 3. Preparing style map for Css Injection based on precedence --------------------------------------
export const setObjectKeyValue = (obj: any, keys: any, value: any) => {
@@ -31,6 +114,10 @@ export const getObjectProperty = (object: any, keyPath: any) => {
);
};
+export const getCssVariableValue = (_object: any, _keyPath: any) => {
+ // console.log(keyPath, 'key path here');
+};
+
export function resolveAliasesFromConfig(
config: any,
props: any,
@@ -58,17 +145,19 @@ function isNumeric(str: string) {
// return /^[-+]?[0-9]*\.?[0-9]+$/.test(str);
}
export function resolveStringToken(
- string: string,
+ stringValue: string,
config: any,
tokenScaleMap: any,
propName: any,
- scale?: any
+ scale?: any,
+ useResolvedValue = false,
+ deleteIfTokenNotExist: boolean = false
) {
// console.setStartTimeStamp('resolveStringToken');
let typeofResult = 'string';
const token_scale = scale ?? tokenScaleMap[propName];
- const splitTokenBySpace = string.split(' ');
+ const splitTokenBySpace = stringValue.split(' ');
const result: any = splitTokenBySpace.map((currentToken) => {
let splitCurrentToken = currentToken.split('$');
@@ -78,7 +167,13 @@ export function resolveStringToken(
}
if (splitCurrentToken.length > 1) {
+ //
+
+ // console.log('>>>>> 22');
const tokenValue = getObjectProperty(config.tokens, splitCurrentToken);
+
+ // console.log(tokenValue, '.>>>>', currentToken);
+ // const tokenValue = getCssVariableValue(config.tokens, splitCurrentToken);
typeofResult = typeof tokenValue;
return tokenValue;
} else {
@@ -96,16 +191,35 @@ export function resolveStringToken(
'You cannot use tokens without wrapping the component with StyledProvider. Please wrap the component with a StyledProvider and pass theme config.'
);
}
+
+ if (deleteIfTokenNotExist) {
+ if (!config?.tokens[modifiedTokenScale]) {
+ return '';
+ }
+ }
+
if (
config?.tokens[modifiedTokenScale] &&
config?.tokens[modifiedTokenScale].hasOwnProperty(
splitCurrentToken[0]
)
) {
- const tokenValue =
+ let tokenValue =
config?.tokens?.[modifiedTokenScale]?.[splitCurrentToken[0]];
+
typeofResult = typeof tokenValue;
+ if (
+ propsNotToConvertToCSSVariables.indexOf(propName) === -1 &&
+ !useResolvedValue &&
+ typeofResult !== 'undefined'
+ ) {
+ typeofResult = 'string';
+ tokenValue = `var(--${modifiedTokenScale}-${convertToUnicodeString(
+ splitCurrentToken[0]
+ )})`;
+ }
+
if (typeof tokenValue !== 'undefined' && tokenValue !== null) {
return tokenValue;
} else {
@@ -113,12 +227,15 @@ export function resolveStringToken(
}
}
}
+ if (deleteIfTokenNotExist) {
+ return '';
+ }
+
return splitCurrentToken[splitCurrentToken.length - 1];
}
});
let finalResult = result;
-
// console.setEndTimeStamp('resolveStringToken');
if (finalResult.length !== 0 && finalResult[0] === '') {
return undefined;
@@ -133,8 +250,15 @@ export function resolveStringToken(
}
}
-export const getTokenFromConfig = (config: any, prop: any, value: any) => {
+export const getTokenFromConfig = (
+ config: any,
+ prop: any,
+ value: any,
+ useResolvedValue = false,
+ deleteIfTokenNotExist: boolean = false
+) => {
// console.setStartTimeStamp('getTokenFromConfig');
+
const aliasTokenType = config.propertyTokenMap[prop];
let IsNegativeToken = false;
@@ -150,10 +274,26 @@ export const getTokenFromConfig = (config: any, prop: any, value: any) => {
if (config.propertyResolver?.[prop]) {
let transformer = config.propertyResolver?.[prop];
token = transformer(value, (value1: any, scale = aliasTokenType) =>
- resolveStringToken(value1, config, config.propertyTokenMap, prop, scale)
+ resolveStringToken(
+ value1,
+ config,
+ config.propertyTokenMap,
+ prop,
+ scale,
+ useResolvedValue,
+ deleteIfTokenNotExist
+ )
);
} else {
- token = resolveStringToken(value, config, config.propertyTokenMap, prop);
+ token = resolveStringToken(
+ value,
+ config,
+ config.propertyTokenMap,
+ prop,
+ undefined,
+ useResolvedValue,
+ deleteIfTokenNotExist
+ );
}
} else {
if (config.propertyResolver?.[prop]) {
@@ -165,7 +305,9 @@ export const getTokenFromConfig = (config: any, prop: any, value: any) => {
config,
config.propertyTokenMap,
prop,
- scale
+ scale,
+ useResolvedValue,
+ deleteIfTokenNotExist
);
} else {
return value;
@@ -193,9 +335,17 @@ export function getResolvedTokenValueFromConfig(
config: any,
_props: any,
prop: any,
- value: any
+ value: any,
+ useResolvedValue = false,
+ deleteIfTokenNotExist: boolean = false
) {
- let resolvedTokenValue = getTokenFromConfig(config, prop, value);
+ let resolvedTokenValue = getTokenFromConfig(
+ config,
+ prop,
+ value,
+ useResolvedValue,
+ deleteIfTokenNotExist
+ );
// Special case for token ends with em on mobile
// This will work for lineHeight and letterSpacing
@@ -213,7 +363,12 @@ export function getResolvedTokenValueFromConfig(
return resolvedTokenValue;
}
-export function resolveTokensFromConfig(config: any, props: any) {
+export function resolveTokensFromConfig(
+ config: any,
+ props: any,
+ useResolvedValue = false,
+ deleteIfTokenNotExist: boolean = false
+) {
let newProps: any = {};
Object.keys(props).map((prop: any) => {
@@ -222,7 +377,9 @@ export function resolveTokensFromConfig(config: any, props: any) {
config,
props,
prop,
- value
+ value,
+ useResolvedValue,
+ deleteIfTokenNotExist
);
});
@@ -232,7 +389,8 @@ export function resolveTokensFromConfig(config: any, props: any) {
export function resolvedTokenization(
props: any,
config: any,
- ignoreKeys: Set = new Set()
+ ignoreKeys: Set = new Set(),
+ deleteIfTokenNotExist: boolean = false
) {
// console.setStartTimeStamp('resolvedTokenization');
const aliasedResolvedProps = resolveAliasesFromConfig(
@@ -240,7 +398,13 @@ export function resolvedTokenization(
props,
ignoreKeys
);
- const newProps = resolveTokensFromConfig(config, aliasedResolvedProps);
+
+ const newProps = resolveTokensFromConfig(
+ config,
+ aliasedResolvedProps,
+ false,
+ deleteIfTokenNotExist
+ );
// console.setEndTimeStamp('resolvedTokenization');
return newProps;
}
diff --git a/packages/styled/react/src/utils/css-injector/utils/inject.web.ts b/packages/styled/react/src/utils/css-injector/utils/inject.web.ts
index 135ccbe7f7..ef8eb0cfd8 100644
--- a/packages/styled/react/src/utils/css-injector/utils/inject.web.ts
+++ b/packages/styled/react/src/utils/css-injector/utils/inject.web.ts
@@ -139,23 +139,20 @@ export const injectCss = (
if (!style) {
style = createStyle(styleTagId, css);
- // console.log(inlineStyleMap, 'append child here >>>>>');
- if (inlineStyleMap) {
- if (!inlineStyleMap?.initialStyleInjected) {
- const styleMapId = `${WRAPPER_BLOCK_PREFIX}-${wrapperType}`;
- const inlineMapStyles = inlineStyleMap[styleMapId];
-
- if (inlineMapStyles) {
- inlineMapStyles[id] = style;
- } else {
- inlineStyleMap[styleMapId] = [];
- inlineStyleMap[styleMapId][id] = style;
- }
- // console.log('hello here >>>> there');
+ if (inlineStyleMap && !inlineStyleMap?.initialStyleInjected) {
+ const styleMapId = `${WRAPPER_BLOCK_PREFIX}-${wrapperType}`;
+ const inlineMapStyles = inlineStyleMap[styleMapId];
+
+ if (inlineMapStyles) {
+ inlineMapStyles[id] = style;
} else {
- // console.log('hello here >>>>');
- wrapperElement.appendChild(style);
+ inlineStyleMap[styleMapId] = [];
+ inlineStyleMap[styleMapId][id] = style;
}
+ // console.log('hello here >>>> there');
+ } else {
+ // console.log('hello here >>>>');
+ wrapperElement.appendChild(style);
}
}
}
diff --git a/packages/styled/react/src/utils/cssify/create-stylesheet/index.ts b/packages/styled/react/src/utils/cssify/create-stylesheet/index.ts
index c29d03f7d8..1863e34dfc 100644
--- a/packages/styled/react/src/utils/cssify/create-stylesheet/index.ts
+++ b/packages/styled/react/src/utils/cssify/create-stylesheet/index.ts
@@ -17,7 +17,7 @@ const createStyleSheet = (
Object.keys(stylesObject).map((key) => {
if (!stylesObject?.[key]) return;
- let { condition, colorMode, style, themeCondition } = stylesObject[key];
+ let { condition, colorMode, style, theme } = stylesObject[key];
const mediaQuery = createQuery(condition);
@@ -28,12 +28,12 @@ const createStyleSheet = (
const css = createDeclarationBlock(style);
const themeCssObj = {} as any;
- if (themeCondition) {
- Object.keys(themeCondition).forEach((themeName) => {
- const themeConditionValue = themeCondition[themeName];
- themeCssObj[themeName] = createDeclarationBlock(themeConditionValue);
- });
- }
+ // if (themeCondition) {
+ // Object.keys(themeCondition).forEach((themeName) => {
+ // const themeConditionValue = themeCondition[themeName];
+ // themeCssObj[themeName] = createDeclarationBlock(themeConditionValue);
+ // });
+ // }
// console.log(css, style, 'css', mediaQuery, 'mediaQuery', colorSchemeQuery);
// const stringHash = `cssinjected-${hash(`${key}${css}`)}`;
@@ -48,7 +48,7 @@ const createStyleSheet = (
prefixClassName,
prefixColorMode,
hasState,
- themeCondition,
+ theme,
themeCssObj
);
diff --git a/packages/styled/react/src/utils/cssify/utils/common.ts b/packages/styled/react/src/utils/cssify/utils/common.ts
index 975bcdab03..f029e462f7 100644
--- a/packages/styled/react/src/utils/cssify/utils/common.ts
+++ b/packages/styled/react/src/utils/cssify/utils/common.ts
@@ -105,7 +105,7 @@ const createCssRule = (
prefixColorMode: string,
hasState: boolean,
themeCondition: any,
- themeCssObj: any
+ _themeCssObj?: any
) => {
const dataMediaSelector = `[data-${dataType}~="${stringHash}"]`;
const stateRulePrefix = hasState ? '.gs' : '';
@@ -116,29 +116,53 @@ const createCssRule = (
const inlineAndStatePrefix = `${inlineRulePrefix}${stateRulePrefix}`;
let rule = ``;
- if (isMedia(mediaQuery) && isColorScheme(colorSchemeQuery)) {
+
+ const themeConditionArray = themeCondition ? themeCondition.split('.') : [];
+ let themeDataIds = ' ';
+ themeConditionArray.forEach((themeName: any) => {
+ themeDataIds += `:where([data-theme-id~="${themeName}"]) `;
+ });
+
+ if (
+ isMedia(mediaQuery) &&
+ isColorScheme(colorSchemeQuery) &&
+ themeCondition
+ ) {
+ rule = `${mediaQuery} {${mediaQueryPrefix}${inlineAndStatePrefix}${colorModeRulePrefix} ${themeDataIds} ${dataMediaSelector} ${css}}`;
+ }
+ if (isMedia(mediaQuery) && themeCondition) {
+ rule = `${mediaQuery} {${mediaQueryPrefix}${inlineAndStatePrefix}${colorModeRulePrefix} ${themeDataIds} ${dataMediaSelector} ${css}}`;
+ } else if (isMedia(mediaQuery) && isColorScheme(colorSchemeQuery)) {
rule = `${mediaQuery} {${mediaQueryPrefix}${inlineAndStatePrefix}${colorModeRulePrefix} ${dataMediaSelector} ${css}}`;
} else if (isMedia(mediaQuery)) {
rule = `${mediaQuery} {${mediaQueryPrefix}${inlineAndStatePrefix} ${dataMediaSelector} ${css}}`;
+ } else if (isColorScheme(colorSchemeQuery) && themeCondition) {
+ rule = `${inlineAndStatePrefix}${colorModeRulePrefix} ${themeDataIds} ${dataMediaSelector} ${css}`;
} else if (isColorScheme(colorSchemeQuery)) {
rule = `${inlineAndStatePrefix}${colorModeRulePrefix} ${dataMediaSelector} ${css}`;
+ } else if (themeCondition) {
+ rule = `${inlineAndStatePrefix} ${themeDataIds} ${dataMediaSelector} ${css}`;
+ // rule = ` \n${themeConditionString}\n ${rule} `;
} else {
rule = `${inlineAndStatePrefix} ${dataMediaSelector}${mediaQuery} ${css}`;
}
- if (themeCondition) {
- const themeConditionString = Object.keys(themeCondition)
- .map((themeName) => {
- return `
- [data-theme-id~="${themeName}"] ${dataMediaSelector} ${themeCssObj[themeName]}
- ${inlineAndStatePrefix} [data-theme-id~="${themeName}"] ${dataMediaSelector} ${themeCssObj[themeName]}
- ${colorModeRulePrefix}${inlineAndStatePrefix} [data-theme-id~="${themeName}"] ${dataMediaSelector} ${themeCssObj[themeName]}
- `;
- })
- .join('\n');
- // themeCondition is of higher specificity than the rest of the rules
- rule = ` \n${themeConditionString}\n ${rule} `;
- }
+ // if (themeCondition) {
+ // // const themeConditionString = Object.keys(themeCondition)
+ // // .map((themeName) => {
+ // // return `
+ // // [data-theme-id~="${themeName}"] ${dataMediaSelector} ${themeCssObj[themeName]}
+ // // ${inlineAndStatePrefix} [data-theme-id~="${themeName}"] ${dataMediaSelector} ${themeCssObj[themeName]}
+ // // ${colorModeRulePrefix}${inlineAndStatePrefix} [data-theme-id~="${themeName}"] ${dataMediaSelector} ${themeCssObj[themeName]}
+ // // `;
+ // // })
+ // // .join('\n');
+ // // themeCondition is of higher specificity than the rest of the rules
+ // const themeConditionString = `[data-theme-id~="${themeCondition}"] ${dataMediaSelector} ${css}`;
+
+ // console.log(themeConditionString, '>>>>');
+ // // rule = ` \n${themeConditionString}\n ${rule} `;
+ // }
return rule;
};
diff --git a/packages/themed/CHANGELOG.md b/packages/themed/CHANGELOG.md
index 1e42811e4e..bd6fa7d2e1 100644
--- a/packages/themed/CHANGELOG.md
+++ b/packages/themed/CHANGELOG.md
@@ -1,5 +1,13 @@
# @gluestack-ui/themed
+## 1.0.35
+
+### Patch Changes
+
+- Fix
+- Updated dependencies
+ - @gluestack-style/react@1.0.32
+
## 1.0.34
### Patch Changes
diff --git a/packages/themed/package.json b/packages/themed/package.json
index bbab9053ae..6f97026d71 100644
--- a/packages/themed/package.json
+++ b/packages/themed/package.json
@@ -1,6 +1,6 @@
{
"name": "@gluestack-ui/themed",
- "version": "1.0.34",
+ "version": "1.0.35",
"main": "build/index.js",
"types": "build/index.d.ts",
"module": "build/index",
@@ -69,7 +69,7 @@
"@babel/preset-env": "^7.22.9",
"@babel/preset-react": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
- "@gluestack-style/react": "^1.0.22",
+ "@gluestack-style/react": "^1.0.32",
"@types/react-native": "^0.72.3",
"file-loader": "^6.2.0",
"react": "^18.2.0",
diff --git a/packages/themed/src/components/Provider/index.tsx b/packages/themed/src/components/Provider/index.tsx
index 5db616bf7d..bf7561bcaf 100644
--- a/packages/themed/src/components/Provider/index.tsx
+++ b/packages/themed/src/components/Provider/index.tsx
@@ -17,7 +17,7 @@ const GluestackUIProvider = ({
return (
<>
{/** @ts-ignore */}
-
+
{children}