@xetwa/design-system 1.0.29 → 1.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xetwa/design-system",
-  "version": "1.0.29",
+  "version": "1.0.32",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/Cards/AnswerOptionCard/AnswerOptionCard.tsx

@@ -1,10 +1,10 @@
-import { View, StyleSheet, Pressable, Platform, Animated } from 'react-native';
+import { Check, X } from 'lucide-react-native';
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { ViewStyle } from 'react-native';
-import { theme } from '../../../styles/theme';
-import type { ReactNode } from 'react';
-import { Check, X } from 'lucide-react-native';
+import { Animated, Platform, Pressable, StyleSheet, View } from 'react-native';
 import { useResponsive } from '../../../hooks/useResponsive';
+import { theme } from '../../../styles/theme';
 import { Typography } from '../../Typography/Typography';
 
 export type AnswerOptionStatus = 'default' | 'selected' | 'correct' | 'wrong' | 'disabled';
@@ -65,28 +65,32 @@ export const AnswerOptionCard = ({
         return {
           borderColor: theme.colors.primary,
           backgroundColor: theme.colors.primaryLight,
-          shadowColor: '#FCE5D2',
+          shadowColorRaw: theme.colors.primary,
+          shadowOpacity: 0.3,
           textColor: theme.colors.brown[800],
         };
       case 'correct':
         return {
           borderColor: theme.colors.success,
           backgroundColor: '#eafaf2',
-          shadowColor: '#D0E9DE',
+          shadowColorRaw: theme.colors.success,
+          shadowOpacity: 0.2,
           textColor: theme.colors.brown[800],
         };
       case 'wrong':
         return {
           borderColor: theme.colors.error,
           backgroundColor: '#fdf0ee',
-          shadowColor: '#F5DEDA',
+          shadowColorRaw: theme.colors.error,
+          shadowOpacity: 0.2,
           textColor: theme.colors.brown[800],
         };
       case 'disabled':
         return {
           borderColor: theme.colors.brown[100],
           backgroundColor: theme.colors.white,
-          shadowColor: theme.colors.brown[100],
+          shadowColorRaw: theme.colors.brown[100],
+          shadowOpacity: 1,
           textColor: theme.colors.brown[300],
         };
       case 'default':
@@ -94,7 +98,8 @@ export const AnswerOptionCard = ({
         return {
           borderColor: theme.colors.brown[100],
           backgroundColor: theme.colors.white,
-          shadowColor: theme.colors.brown[100],
+          shadowColorRaw: theme.colors.brown[100],
+          shadowOpacity: 1,
           textColor: theme.colors.brown[800],
         };
     }
@@ -104,10 +109,13 @@ export const AnswerOptionCard = ({
 
   const webShadow = Platform.OS === 'web' ? {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    boxShadow: `0 3px 0 ${vStyles.shadowColor}` as any,
+    boxShadow: `0 3px 0 rgba(${vStyles.shadowColorRaw === theme.colors.primary ? '242,151,75' : vStyles.shadowColorRaw === theme.colors.success ? '22,145,90' : vStyles.shadowColorRaw === theme.colors.error ? '207,91,72' : '224,213,205'},${vStyles.shadowOpacity})` as any,
   } : {
-    borderBottomWidth: 5,
-    borderBottomColor: vStyles.shadowColor,
+    shadowColor: vStyles.shadowColorRaw,
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: vStyles.shadowOpacity,
+    shadowRadius: 0,
+    elevation: 0,
   };
 
   const renderSuffix = () => {
@@ -210,41 +218,41 @@ export const AnswerOptionCard = ({
             {prefixNode && <View style={[styles.prefixContainer, { marginRight: scale(12) }]}>{prefixNode}</View>}
             {prefix && !prefixNode && (
               <View style={[
-                styles.prefixContainer, 
-                { 
+                styles.prefixContainer,
+                {
                   marginRight: scale(12),
                   width: scale(28),
                   height: scale(28),
                   borderRadius: scale(14),
-                backgroundColor: status === 'correct' ? theme.colors.success : status === 'wrong' ? theme.colors.error : status === 'selected' ? theme.colors.primary : theme.colors.brown[100],
-                alignItems: 'center',
-                justifyContent: 'center'
-              }
-            ]}>
-              <Typography style={{ 
-                color: status === 'correct' || status === 'wrong' || status === 'selected' ? theme.colors.white : theme.colors.brown[500],
-                fontWeight: 'bold',
-                fontSize: scaleText(14)
-              }}>
-                {prefix}
-              </Typography>
-            </View>
-          )}
-          <Typography
-            style={[
-              styles.label,
-              {
-                color: status === 'disabled' ? theme.colors.brown[300] : vStyles.textColor,
-                fontSize: getFontSize(),
-              }
-            ]}
-          >
-            {label}
-          </Typography>
+                  backgroundColor: status === 'correct' ? theme.colors.success : status === 'wrong' ? theme.colors.error : status === 'selected' ? theme.colors.primary : theme.colors.brown[100],
+                  alignItems: 'center',
+                  justifyContent: 'center'
+                }
+              ]}>
+                <Typography style={{
+                  color: status === 'correct' || status === 'wrong' || status === 'selected' ? theme.colors.white : theme.colors.brown[500],
+                  fontWeight: 'bold',
+                  fontSize: scaleText(14)
+                }}>
+                  {prefix}
+                </Typography>
+              </View>
+            )}
+            <Typography
+              style={[
+                styles.label,
+                {
+                  color: status === 'disabled' ? theme.colors.brown[300] : vStyles.textColor,
+                  fontSize: getFontSize(),
+                }
+              ]}
+            >
+              {label}
+            </Typography>
+          </View>
+          {renderSuffix()}
         </View>
-        {renderSuffix()}
-      </View>
-    </Pressable>
+      </Pressable>
     </Animated.View>
   );
 };

package/src/components/DataDisplay/InstructionBubble/InstructionBubble.tsx

@@ -45,7 +45,7 @@ export const InstructionBubble = ({
           borderWidth: scale(2),
         }
       ]}>
-        <Typography style={[styles.title, { fontSize: scaleText(22) }]}>
+        <Typography style={[styles.title, { fontSize: scaleText(22), lineHeight: scaleText(28) }]}>
           {title}
         </Typography>
         {subtitle && (