@idealyst/theme 1.0.83 → 1.0.84

package/src/styles.ts

@@ -0,0 +1,14 @@
+export type Styles = Record<string, any> & {
+    _web?: Styles,
+}
+export type Variants = Record<string, Record<string, Styles>>
+export type CompoundDefinition<V extends string> = Partial<Record<V, any>> & { styles: Styles }
+export type CompoundVariants<V extends string> = CompoundDefinition<V>[]
+export type ExpandedStyles<V extends string> = Styles & {
+    compoundVariants?: CompoundVariants<V>;
+    variants?: Variants;
+}
+
+export type StaticStyles<V extends string> = ExpandedStyles<V>;
+export type DynamicStyles<V extends string> = (dynamic: Partial<Record<V, any>>) => ExpandedStyles<V>;
+export type StylesheetStyles<V extends string> = StaticStyles<V> | DynamicStyles<V>;

package/src/theme/color.ts

@@ -0,0 +1,15 @@
+export type Pallet = 'red' | 'orange' | 'blue' | 'green' | 'yellow' | 'purple' | 'gray' | 'black' | 'white';
+export type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+export type Color = `${Pallet}.${Shade}` | Pallet;
+export type ColorValue = string;
+
+export type Surface = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'inverse-secondary' | 'inverse-tertiary';
+export type Text = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'inverse-secondary' | 'inverse-tertiary';
+export type Border = 'primary' | 'secondary' | 'tertiary' | 'disabled';
+
+export type AllColorTypes = {
+    surface: Record<Surface, ColorValue>;
+    text: Record<Text, ColorValue>;
+    border: Record<Border, ColorValue>;
+    pallet: Record<Pallet, Record<Shade, ColorValue>>;
+}

package/src/theme/index.ts

@@ -0,0 +1,16 @@
+import { AllColorTypes, Color, ColorValue } from "./color";
+import { Intent, IntentValue } from "./intent";
+import { AllComponentSizes, SizeValue } from "./size";
+import { AllShadowTypes } from "./shadow";
+
+export type Theme = {
+    intents: Record<Intent, IntentValue>;
+    colors: AllColorTypes;
+    sizes: AllComponentSizes;
+    shadows: AllShadowTypes;
+};
+
+export * from "./intent";
+export * from "./size";
+export * from "./color";
+export * from "./shadow";

package/src/theme/intent.ts

@@ -0,0 +1,8 @@
+export type Intent = 'primary' | 'success' | 'error' | 'warning' | 'neutral' | 'info';
+
+export type IntentValue = {
+    primary: string;
+    contrast: string;
+    light: string;
+    dark: string;
+}

package/src/theme/shadow.ts

@@ -0,0 +1,18 @@
+export type ShadowVariant = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type ShadowValue = {
+    // Android: elevation value
+    elevation: number;
+
+    // iOS: shadow properties
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+    boxShadow?: string;
+} | {}
+
+export type AllShadowTypes = Record<ShadowVariant, ShadowValue>;

package/src/theme/size.ts

@@ -0,0 +1,182 @@
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type SizeValue = number | string
+
+// Size alone is not very useful, as sizes are contextual based on the component
+export type AllComponentSizes = {
+    button: Record<Size, ButtonSizeValue>;
+    chip: Record<Size, ChipSizeValue>;
+    badge: Record<Size, BadgeSizeValue>;
+    icon: Record<Size, IconSizeValue>;
+    input: Record<Size, InputSizeValue>;
+    radioButton: Record<Size, RadioButtonSizeValue>;
+    select: Record<Size, SelectSizeValue>;
+    slider: Record<Size, SliderSizeValue>;
+    switch: Record<Size, SwitchSizeValue>;
+    textarea: Record<Size, TextAreaSizeValue>;
+    avatar: Record<Size, AvatarSizeValue>;
+    progress: Record<Size, ProgressSizeValue>;
+    accordion: Record<Size, AccordionSizeValue>;
+    activityIndicator: Record<Size, ActivityIndicatorSizeValue>;
+    breadcrumb: Record<Size, BreadcrumbSizeValue>;
+    list: Record<Size, ListSizeValue>;
+    menu: Record<Size, MenuSizeValue>;
+    text: Record<Size, TextSizeValue>;
+    tabBar: Record<Size, TabBarSizeValue>;
+    table: Record<Size, TableSizeValue>;
+    tooltip: Record<Size, TooltipSizeValue>;
+    view: Record<Size, ViewSizeValue>;
+}
+
+
+// Derivative size values based on context
+export type ButtonSizeValue = {
+    paddingVertical: SizeValue;
+    paddingHorizontal: SizeValue;
+    minHeight: SizeValue;
+    fontSize: SizeValue;
+    iconSize: SizeValue;
+}
+
+export type ChipSizeValue = {
+    paddingVertical: SizeValue;
+    paddingHorizontal: SizeValue;
+    minHeight: SizeValue;
+    borderRadius: SizeValue;
+    fontSize: SizeValue;
+    lineHeight: SizeValue;
+    iconSize: SizeValue;
+}
+
+export type BadgeSizeValue = {
+    minWidth: SizeValue;
+    height: SizeValue;
+    paddingHorizontal: SizeValue;
+    fontSize: SizeValue;
+    lineHeight: SizeValue;
+    iconSize: SizeValue;
+}
+
+export type IconSizeValue = {
+    width: SizeValue;
+    height: SizeValue;
+    fontSize: SizeValue;
+}
+
+export type InputSizeValue = {
+    height: SizeValue;
+    paddingHorizontal: SizeValue;
+    fontSize: SizeValue;
+    iconSize: SizeValue;
+    iconMargin: SizeValue;
+}
+
+export type RadioButtonSizeValue = {
+    radioSize: SizeValue;
+    radioDotSize: SizeValue;
+    fontSize: SizeValue;
+    gap: SizeValue;
+}
+
+export type SelectSizeValue = {
+    paddingHorizontal: SizeValue;
+    minHeight: SizeValue;
+    fontSize: SizeValue;
+    iconSize: SizeValue;
+}
+
+export type SliderSizeValue = {
+    trackHeight: SizeValue;
+    thumbSize: SizeValue;
+    thumbIconSize: SizeValue;
+    markHeight: SizeValue;
+    labelFontSize: SizeValue;
+}
+
+export type SwitchSizeValue = {
+    trackWidth: SizeValue;
+    trackHeight: SizeValue;
+    thumbSize: SizeValue;
+    thumbIconSize: SizeValue;
+    translateX: SizeValue;
+}
+
+export type TextAreaSizeValue = {
+    fontSize: SizeValue;
+    padding: SizeValue;
+    lineHeight: SizeValue;
+    minHeight: SizeValue;
+}
+
+export type AvatarSizeValue = {
+    width: SizeValue;
+    height: SizeValue;
+    fontSize: SizeValue;
+}
+
+export type ProgressSizeValue = {
+    linearHeight: SizeValue;
+    circularSize: SizeValue;
+    labelFontSize: SizeValue;
+    circularLabelFontSize: SizeValue;
+}
+
+export type AccordionSizeValue = {
+    headerPadding: SizeValue;
+    headerFontSize: SizeValue;
+    iconSize: SizeValue;
+    contentPadding: SizeValue;
+}
+
+export type ActivityIndicatorSizeValue = {
+    size: SizeValue;
+    borderWidth: SizeValue;
+}
+
+export type BreadcrumbSizeValue = {
+    fontSize: SizeValue;
+    lineHeight: SizeValue;
+    iconSize: SizeValue;
+}
+
+export type ListSizeValue = {
+    paddingVertical: SizeValue;
+    paddingHorizontal: SizeValue;
+    minHeight: SizeValue;
+    iconSize: SizeValue;
+    labelFontSize: SizeValue;
+    labelLineHeight: SizeValue;
+}
+
+export type MenuSizeValue = {
+    paddingVertical: SizeValue;
+    paddingHorizontal: SizeValue;
+    iconSize: SizeValue;
+    labelFontSize: SizeValue;
+}
+
+export type TextSizeValue = {
+    fontSize: SizeValue;
+    lineHeight: SizeValue;
+}
+
+export type TabBarSizeValue = {
+    fontSize: SizeValue;
+    lineHeight: SizeValue;
+    padding: SizeValue;
+}
+
+export type TableSizeValue = {
+    padding: SizeValue;
+    fontSize: SizeValue;
+    lineHeight: SizeValue;
+}
+
+export type TooltipSizeValue = {
+    fontSize: SizeValue;
+    padding: SizeValue;
+}
+
+export type ViewSizeValue = {
+    padding: SizeValue;
+    spacing: SizeValue;
+}

package/src/theme/surface.ts

@@ -0,0 +1,3 @@
+export type Surface = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'inverse-secondary' | 'inverse-tertiary';
+
+export type SurfaceValue = string;

package/src/unistyles.ts

@@ -1,14 +1,15 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { breakpoints } from './breakpoints';
-import { defaultLightTheme as lightTheme, defaultDarkTheme as darkTheme } from './defaultThemes';
+import { darkTheme } from './darkTheme';
+import { lightTheme } from './lightTheme';
 
 // Export enhanced theme types
 export type AppTheme = typeof lightTheme;
 export type AppIntents = typeof lightTheme.intents;
 export type AppColors = typeof lightTheme.colors;
-export type AppPalettes = typeof lightTheme.palettes;
-export type IntentNames = keyof AppIntents;
-export type ColorNames = keyof AppColors;
+
+// Utility types to extract keys from theme
+export type ThemeIntentKeys = keyof AppIntents;
+export type ThemeColorKeys = keyof AppColors;
 
 // Unistyles v3 themes declaration
 declare module 'react-native-unistyles' {
@@ -16,14 +17,6 @@ declare module 'react-native-unistyles' {
     light: typeof lightTheme;
     dark: typeof darkTheme;
   }
-  
-  export interface UnistylesBreakpoints {
-    xs: typeof breakpoints.xs;
-    sm: typeof breakpoints.sm;
-    md: typeof breakpoints.md;
-    lg: typeof breakpoints.lg;
-    xl: typeof breakpoints.xl;
-  }
 }
 
 
@@ -31,7 +24,6 @@ StyleSheet.configure({
     settings: {
         initialTheme: 'light',
     },
-    breakpoints,
     themes: {
       light: lightTheme,
       dark: darkTheme,

package/src/variants/color.ts

@@ -0,0 +1,9 @@
+import { Styles } from "../styles";
+import { Color, ColorValue, Theme } from "../theme";
+
+export function getColorFromString(theme: Theme, color: Color): ColorValue {
+    const [colorName, shade] = color.split('.') as [Color, string | undefined];
+    const colorPallet = theme.colors.pallet;
+    return colorPallet[colorName]?.[shade || '500']
+
+}   

package/src/variants/index.ts

@@ -0,0 +1,2 @@
+export * from "./intent";
+export * from "./color";

package/src/variants/intent.ts

@@ -0,0 +1,16 @@
+import { Intent, IntentValue, Theme } from "../theme";
+import { Styles } from "../styles";
+
+/**
+ * Build the intent variants using a builder function
+ * @param theme 
+ * @param builder 
+ * @returns 
+ */
+export function buildIntentVariants(theme: Theme, builder: (intent: IntentValue) => Styles): Record<Intent, Styles> {
+    const variants = {} as Record<Intent, Styles>;
+    for (const intent in theme.intents) {
+        variants[intent as Intent] = builder(theme.intents[intent as Intent]);
+    }
+    return variants;
+}