@saas-ui/react 3.0.0-next.2 → 3.0.0-next.20

package/dist/theme/semantic-tokens/radii.d.ts

@@ -0,0 +1,44 @@
+export declare const semanticRadii: {
+    l1: {
+        value: string;
+    };
+    l2: {
+        value: string;
+    };
+    l3: {
+        value: string;
+    };
+    control: {
+        sm: {
+            value: string;
+        };
+        md: {
+            value: string;
+        };
+        lg: {
+            value: string;
+        };
+    };
+    panel: {
+        sm: {
+            value: string;
+        };
+        md: {
+            value: string;
+        };
+        lg: {
+            value: string;
+        };
+    };
+    indicator: {
+        sm: {
+            value: string;
+        };
+        md: {
+            value: string;
+        };
+        lg: {
+            value: string;
+        };
+    };
+};

package/dist/theme/semantic-tokens/radii.js

@@ -0,0 +1,39 @@
+import { defineSemanticTokens } from '@chakra-ui/react';
+export const semanticRadii = defineSemanticTokens.radii({
+    l1: { value: '{radii.xs}' },
+    l2: { value: '{radii.sm}' },
+    l3: { value: '{radii.md}' },
+    control: {
+        sm: {
+            value: 'calc({radii.xs} * var(--scale-factor, 1) * var(--radius-control, 1))',
+        },
+        md: {
+            value: 'calc({radii.sm} * var(--scale-factor, 1) * var(--radius-control, 1))',
+        },
+        lg: {
+            value: 'calc({radii.md} * var(--scale-factor, 1) * var(--radius-control, 1))',
+        },
+    },
+    panel: {
+        sm: {
+            value: 'calc({radii.sm} * var(--scale-factor, 1) * var(--radius-panel, 1))',
+        },
+        md: {
+            value: 'calc({radii.md} * var(--scale-factor, 1) * var(--radius-panel, 1  ))',
+        },
+        lg: {
+            value: 'calc({radii.lg} * var(--scale-factor, 1) * var(--radius-panel, 1))',
+        },
+    },
+    indicator: {
+        sm: {
+            value: 'calc({radii.xs} * var(--scale-factor, 1) * var(--radius-indicator, 1))',
+        },
+        md: {
+            value: 'calc({radii.sm} * var(--scale-factor, 1) * var(--radius-indicator, 1  ))',
+        },
+        lg: {
+            value: 'calc({radii.md} * var(--scale-factor, 1) * var(--radius-indicator, 1))',
+        },
+    },
+});

package/dist/theme/semantic-tokens/shadows.d.ts

@@ -0,0 +1,50 @@
+export declare const semanticShadows: {
+    xs: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    sm: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    md: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    lg: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    xl: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    '2xl': {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    inner: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    inset: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+};

package/dist/theme/semantic-tokens/shadows.js

@@ -0,0 +1,51 @@
+import { defineSemanticTokens } from '@chakra-ui/react';
+export const semanticShadows = defineSemanticTokens.shadows({
+    xs: {
+        value: {
+            _light: '0px 1px 2px {colors.gray.900/5}, 0px 0px 1px {colors.gray.900/5}',
+            _dark: '0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}',
+        },
+    },
+    sm: {
+        value: {
+            _light: '0px 2px 4px {colors.gray.900/5}, 0px 0px 2px {colors.gray.900/5}',
+            _dark: '0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
+        },
+    },
+    md: {
+        value: {
+            _light: '0px 4px 8px {colors.gray.900/5}, 0px 0px 3px {colors.gray.900/5}',
+            _dark: '0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
+        },
+    },
+    lg: {
+        value: {
+            _light: '0px 8px 16px {colors.gray.900/5}, 0px 0px 4px {colors.gray.900/5}',
+            _dark: '0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
+        },
+    },
+    xl: {
+        value: {
+            _light: '0px 16px 24px {colors.gray.900/5}, 0px 0px 5px {colors.gray.900/5}',
+            _dark: '0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
+        },
+    },
+    '2xl': {
+        value: {
+            _light: '0px 24px 40px {colors.gray.900/10}, 0px 0px 6px {colors.gray.900/5}',
+            _dark: '0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}',
+        },
+    },
+    inner: {
+        value: {
+            _light: 'inset 0 2px 4px 0 {black/5}',
+            _dark: 'inset 0 2px 4px 0 black',
+        },
+    },
+    inset: {
+        value: {
+            _light: 'inset 0 1px 2px 0 {black/5}',
+            _dark: 'inset 0 1px 2px 0 {colors.gray.300/5}',
+        },
+    },
+});