@saas-ui/react 3.0.0-next.15 → 3.0.0-next.17

package/dist/src/theme/conditions.js

@@ -0,0 +1,18 @@
+import { defineConditions } from '@chakra-ui/react';
+export const conditions = defineConditions({
+    collapsible: '&:is([data-scope=collapsible])',
+    groupCollapsible: '.group:is([data-scope=collapsible]) &, [role=group]:is([data-scope=collapsible]) &',
+    groupOpen: '.group:is([data-state=open]) &, [role=group]:is([data-state=open]) &',
+    groupFocus: '.group:is(:focus, [data-focus]) &, [role=group]:is(:focus, [data-focus]) &',
+    groupHover: '.group:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &, [role=group]:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &',
+    groupActive: '.group:is(:active, [data-active]):not(:disabled, [data-disabled]) &, [role=group]:is(:active, [data-active]):not(:disabled, [data-disabled]) &',
+    groupFocusWithin: '.group:focus-within &, [role=group]:focus-within &',
+    groupFocusVisible: '.group:is(:focus-visible, [data-focus-visible]) &, [role=group]:is(:focus-visible, [data-focus-visible]) &',
+    groupDisabled: '.group:is(:disabled, [disabled], [data-disabled]) &, [role=group]:is(:disabled, [disabled], [data-disabled]) &',
+    groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &, [role=group]:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &',
+    groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &, [role=group]:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &',
+    groupInvalid: '.group:invalid &, [role=group]:invalid &',
+    parentHover: 'button:hover &, a:hover &, [role=button]:hover &',
+    pressable: '&:is(a, button, [role=button])',
+    popupExpanded: '&:is([aria-haspopup][aria-expanded=true], [aria-haspopup][data-expanded], [aria-haspopup][data-state=expanded])',
+});

package/dist/src/theme/fluid-font-sizes.js

@@ -0,0 +1,61 @@
+"use strict";
+// const fluidFontSizes = {
+//   'min-max': fluid({
+//     property: 'fluid-text-size',
+//     from: breakpointValues.sm,
+//     to: breakpointValues['2xl'],
+//     divider: 1,
+//   }),
+// }
+// 'fluid-text-size': {
+//   'min-max': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_2XL, divider: 1 }),
+//   'sm-md': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_MD, divider: 1 }),
+//   'sm-lg': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_LG, divider: 1 }),
+//   'sm-xl': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_XL, divider: 1 }),
+//   'md-lg': fluid({ property: 'fluid-text-size', from: BP_MD, to: BP_LG, divider: 1 }),
+//   'md-xl': fluid({ property: 'fluid-text-size', from: BP_MD, to: BP_XL, divider: 1 }),
+//   'md-2xl': fluid({ property: 'fluid-text-size', from: BP_MD, to: BP_2XL, divider: 1 }),
+//   'lg-xl': fluid({ property: 'fluid-text-size', from: BP_LG, to: BP_XL, divider: 1 }),
+//   'lg-2xl': fluid({ property: 'fluid-text-size', from: BP_LG, to: BP_2XL, divider: 1 }),
+// },
+// {
+//   utilities: {
+//     fluidFontSize: {
+//       shorthand: ['fluidFontSize'],
+//       transform(value, args) {
+//         console.log(value, args)
+//         const val = 'min-max(sm, lg)'
+//         const match = val.match(/(\w+-\w+)\((\w+),\s*(\w+)\)/)
+//         if (!match) {
+//           return {}
+//         }
+//         const [, breakpoints, min, max] = match
+//         console.log(match)
+//         const minSize = args.token.raw(`fontSizes.${min}`)?.value
+//         const maxSize = args.token.raw(`fontSizes.${max}`)?.value
+//         console.log(minSize, maxSize)
+//         return {
+//           fontSize: `var(--fluid-text-size-${breakpoints})`,
+//           '--fluid-text-size-min': minSize,
+//           '--fluid-text-size-max': maxSize,
+//         }
+//       },
+//     },
+//     fluidFontSizeMin: {
+//       shorthand: ['fluidFontSizeMin'],
+//       transform(value, args) {
+//         return {
+//           '--fluid-text-size-min': value,
+//         }
+//       },
+//     },
+//     fluidFontSizeMax: {
+//       shorthand: ['fluidFontSizeMax'],
+//       transform(value, args) {
+//         return {
+//           '--fluid-text-size-max': value,
+//         }
+//       },
+//     },
+//   },
+// },

package/dist/src/theme/global-css.d.ts

@@ -0,0 +1 @@
+export declare const globalCss: import("@chakra-ui/react").GlobalStyleObject;

package/dist/src/theme/global-css.js

@@ -0,0 +1,58 @@
+import { defineGlobalStyles } from '@chakra-ui/react';
+const empty = 'var(--chakra-empty,/*!*/ /*!*/)';
+export const globalCss = defineGlobalStyles({
+    '*': {
+        '--ring-inset': empty,
+        '--ring-offset-width': '0px',
+        '--ring-offset-color': '#fff',
+        '--ring-color': 'rgba(66, 153, 225, 0.6)',
+        '--ring-offset-shadow': '0 0 #0000',
+        '--ring-shadow': '0 0 #0000',
+        ...Object.fromEntries([
+            'brightness',
+            'contrast',
+            'grayscale',
+            'hue-rotate',
+            'invert',
+            'saturate',
+            'sepia',
+            'drop-shadow',
+        ].map((prop) => [`--${prop}`, empty])),
+        ...Object.fromEntries([
+            'blur',
+            'brightness',
+            'contrast',
+            'grayscale',
+            'hue-rotate',
+            'invert',
+            'opacity',
+            'saturate',
+            'sepia',
+        ].map((prop) => [`--backdrop-${prop}`, empty])),
+        '--global-font-mono': 'fonts.mono',
+        '--global-font-body': 'fonts.body',
+        '--global-color-border': 'colors.border',
+        '--cursor-button': 'default',
+        // '--radius-factor': '1',
+        // '--radius-control': '1',
+        // '--radius-panel': '1',
+        // '--radius-indicator': '1',
+        '--radius-full': '9999px',
+        '--scale-factor': '1',
+        '--overlay-translucency': '95%',
+        '--overlay-effect': 'blur({blurs.lg})',
+        '--backdrop-effect': 'none',
+    },
+    body: {
+        color: 'fg',
+        bg: 'bg',
+        lineHeight: '1.5',
+        colorPalette: 'accent',
+    },
+    '*::placeholder': {
+        color: 'fg.subtle',
+    },
+    '*::selection': {
+        bg: 'colorPalette.solid/20',
+    },
+});

package/dist/src/theme/index.d.ts

@@ -0,0 +1 @@
+export declare const defaultThemeConfig: import("@chakra-ui/react").SystemConfig;

package/dist/src/theme/index.js

@@ -0,0 +1,72 @@
+import { defineConfig } from '@chakra-ui/react';
+import { animationStyles } from './animation-styles';
+import { breakpoints } from './breakpoints';
+import { conditions } from './conditions';
+import { globalCss } from './global-css';
+import { layerStyles } from './layer-styles';
+import { recipes } from './recipes';
+import { semanticColors } from './semantic-tokens/colors';
+import { semanticRadii } from './semantic-tokens/radii';
+import { semanticShadows } from './semantic-tokens/shadows';
+import { slotRecipes } from './slot-recipes';
+import { textStyles } from './text-styles';
+import { animations } from './tokens/animations';
+import { aspectRatios } from './tokens/aspect-ratios';
+import { blurs } from './tokens/blurs';
+import { borders } from './tokens/borders';
+import { colors } from './tokens/colors';
+import { cursor } from './tokens/cursor';
+import { durations } from './tokens/durations';
+import { easings } from './tokens/easings';
+import { fontSizes } from './tokens/font-sizes';
+import { fontWeights } from './tokens/font-weights';
+import { fonts } from './tokens/fonts';
+import { keyframes } from './tokens/keyframes';
+import { letterSpacings } from './tokens/letter-spacing';
+import { lineHeights } from './tokens/line-heights';
+import { radii } from './tokens/radius';
+import { sizes } from './tokens/sizes';
+import { spacing } from './tokens/spacing';
+import { zIndices } from './tokens/z-indices';
+import { utilities } from './utilities';
+export const defaultThemeConfig = defineConfig({
+    preflight: true,
+    cssVarsPrefix: 'chakra',
+    cssVarsRoot: ':where(html, .chakra-theme)',
+    globalCss: globalCss,
+    utilities: utilities,
+    theme: {
+        breakpoints: breakpoints,
+        keyframes: keyframes,
+        tokens: {
+            animations,
+            aspectRatios,
+            blurs,
+            borders,
+            colors,
+            durations,
+            easings,
+            fonts,
+            fontSizes,
+            fontWeights,
+            letterSpacings,
+            lineHeights,
+            radii,
+            spacing,
+            sizes,
+            zIndex: zIndices,
+            cursor,
+        },
+        semanticTokens: {
+            colors: semanticColors,
+            radii: semanticRadii,
+            shadows: semanticShadows,
+        },
+        recipes: recipes,
+        slotRecipes: slotRecipes,
+        textStyles: textStyles,
+        layerStyles: layerStyles,
+        animationStyles: animationStyles,
+    },
+    conditions,
+});

package/dist/src/theme/layer-styles.d.ts

@@ -0,0 +1 @@
+export declare const layerStyles: any;

package/dist/src/theme/layer-styles.js

@@ -0,0 +1,125 @@
+import { defineLayerStyles } from '@chakra-ui/react';
+export const layerStyles = defineLayerStyles({
+    // fill: some background color + color combination
+    'fill.muted': {
+        value: {
+            background: 'colorPalette.muted',
+            color: 'colorPalette.fg',
+        },
+    },
+    'fill.subtle': {
+        value: {
+            background: 'colorPalette.subtle',
+            color: 'colorPalette.fg',
+        },
+    },
+    'fill.surface': {
+        value: {
+            background: 'colorPalette.muted',
+            color: 'colorPalette.fg',
+            boxShadow: 'inset 0 0 0px 1px var(--shadow-color)',
+            boxShadowColor: 'colorPalette.subtle',
+        },
+    },
+    'fill.solid': {
+        value: {
+            background: 'colorPalette.solid',
+            color: 'colorPalette.contrast',
+        },
+    },
+    // outline: some border color + color combination
+    'outline.subtle': {
+        value: {
+            color: 'colorPalette.fg',
+            boxShadow: 'inset 0 0 0px 1px var(--shadow-color)',
+            boxShadowColor: 'colorPalette.subtle',
+        },
+    },
+    'outline.solid': {
+        value: {
+            borderWidth: '1px',
+            borderColor: 'colorPalette.solid',
+            color: 'colorPalette.fg',
+        },
+    },
+    // indicator: floating border color or left/bottom border
+    'indicator.bottom': {
+        value: {
+            position: 'relative',
+            '--indicator-color-fallback': 'colors.colorPalette.solid',
+            _before: {
+                content: `""`,
+                position: 'absolute',
+                bottom: 'var(--indicator-offset-y, 0)',
+                insetInline: 'var(--indicator-offset-x, 0)',
+                height: 'var(--indicator-thickness, 2px)',
+                background: 'var(--indicator-color, var(--indicator-color-fallback))',
+            },
+        },
+    },
+    'indicator.top': {
+        value: {
+            position: 'relative',
+            '--indicator-color-fallback': 'colors.colorPalette.solid',
+            _before: {
+                content: `""`,
+                position: 'absolute',
+                top: 'var(--indicator-offset-y, 0)',
+                insetInline: 'var(--indicator-offset-x, 0)',
+                height: 'var(--indicator-thickness, 2px)',
+                background: 'var(--indicator-color, var(--indicator-color-fallback))',
+            },
+        },
+    },
+    'indicator.start': {
+        value: {
+            position: 'relative',
+            '--indicator-color-fallback': 'colors.colorPalette.solid',
+            _before: {
+                content: `""`,
+                position: 'absolute',
+                insetInlineStart: 'var(--indicator-offset-x, 0)',
+                insetBlock: 'var(--indicator-offset-y, 0)',
+                width: 'var(--indicator-thickness, 2px)',
+                background: 'var(--indicator-color, var(--indicator-color-fallback))',
+            },
+        },
+    },
+    'indicator.end': {
+        value: {
+            position: 'relative',
+            '--indicator-color-fallback': 'colors.colorPalette.solid',
+            _before: {
+                content: `""`,
+                position: 'absolute',
+                insetInlineEnd: 'var(--indicator-offset-x, 0)',
+                insetBlock: 'var(--indicator-offset-y, 0)',
+                width: 'var(--indicator-thickness, 2px)',
+                background: 'var(--indicator-color, var(--indicator-color-fallback))',
+            },
+        },
+    },
+    disabled: {
+        value: {
+            opacity: '0.5',
+            cursor: 'not-allowed',
+        },
+    },
+    none: {
+        value: {},
+    },
+    overlay: {
+        value: {
+            bg: 'bg.overlay',
+            backdropFilter: 'var(--overlay-effect)',
+            borderRadius: 'panel.lg',
+            boxShadow: 'lg',
+        },
+    },
+    backdrop: {
+        value: {
+            bg: 'bg.backdrop',
+            backdropFilter: 'var(--backdrop-effect)',
+        },
+    },
+});