@chakra-ui/panda-preset 3.3.0

package/dist/esm/semantic-tokens/colors.js

@@ -0,0 +1,615 @@
+"use strict";
+import { defineSemanticTokens } from '../def.js';
+
+const colors = defineSemanticTokens.colors({
+  bg: {
+    DEFAULT: {
+      value: {
+        _light: "{colors.white}",
+        _dark: "{colors.black}"
+      }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.gray.50}",
+        _dark: "{colors.gray.950}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.gray.100}",
+        _dark: "{colors.gray.900}"
+      }
+    },
+    emphasized: {
+      value: {
+        _light: "{colors.gray.200}",
+        _dark: "{colors.gray.800}"
+      }
+    },
+    inverted: {
+      value: {
+        _light: "{colors.black}",
+        _dark: "{colors.white}"
+      }
+    },
+    panel: {
+      value: {
+        _light: "{colors.white}",
+        _dark: "{colors.gray.950}"
+      }
+    },
+    error: {
+      value: {
+        _light: "{colors.red.50}",
+        _dark: "{colors.red.950}"
+      }
+    },
+    warning: {
+      value: {
+        _light: "{colors.orange.50}",
+        _dark: "{colors.orange.950}"
+      }
+    },
+    success: {
+      value: {
+        _light: "{colors.green.50}",
+        _dark: "{colors.green.950}"
+      }
+    },
+    info: {
+      value: {
+        _light: "{colors.blue.50}",
+        _dark: "{colors.blue.950}"
+      }
+    }
+  },
+  fg: {
+    DEFAULT: {
+      value: {
+        _light: "{colors.black}",
+        _dark: "{colors.gray.50}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.gray.600}",
+        _dark: "{colors.gray.400}"
+      }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.gray.400}",
+        _dark: "{colors.gray.500}"
+      }
+    },
+    inverted: {
+      value: {
+        _light: "{colors.gray.50}",
+        _dark: "{colors.black}"
+      }
+    },
+    error: {
+      value: {
+        _light: "{colors.red.500}",
+        _dark: "{colors.red.400}"
+      }
+    },
+    warning: {
+      value: {
+        _light: "{colors.orange.600}",
+        _dark: "{colors.orange.300}"
+      }
+    },
+    success: {
+      value: {
+        _light: "{colors.green.600}",
+        _dark: "{colors.green.300}"
+      }
+    },
+    info: {
+      value: {
+        _light: "{colors.blue.600}",
+        _dark: "{colors.blue.300}"
+      }
+    }
+  },
+  border: {
+    DEFAULT: {
+      value: {
+        _light: "{colors.gray.200}",
+        _dark: "{colors.gray.800}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.gray.100}",
+        _dark: "{colors.gray.900}"
+      }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.gray.50}",
+        _dark: "{colors.gray.950}"
+      }
+    },
+    emphasized: {
+      value: {
+        _light: "{colors.gray.300}",
+        _dark: "{colors.gray.700}"
+      }
+    },
+    inverted: {
+      value: {
+        _light: "{colors.gray.800}",
+        _dark: "{colors.gray.200}"
+      }
+    },
+    error: {
+      value: {
+        _light: "{colors.red.500}",
+        _dark: "{colors.red.400}"
+      }
+    },
+    warning: {
+      value: {
+        _light: "{colors.orange.500}",
+        _dark: "{colors.orange.400}"
+      }
+    },
+    success: {
+      value: {
+        _light: "{colors.green.500}",
+        _dark: "{colors.green.400}"
+      }
+    },
+    info: {
+      value: {
+        _light: "{colors.blue.500}",
+        _dark: "{colors.blue.400}"
+      }
+    }
+  },
+  gray: {
+    contrast: {
+      value: {
+        _light: "{colors.white}",
+        _dark: "{colors.black}"
+      }
+    },
+    fg: {
+      value: {
+        _light: "{colors.gray.800}",
+        _dark: "{colors.gray.200}"
+      }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.gray.100}",
+        _dark: "{colors.gray.900}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.gray.200}",
+        _dark: "{colors.gray.800}"
+      }
+    },
+    emphasized: {
+      value: {
+        _light: "{colors.gray.300}",
+        _dark: "{colors.gray.700}"
+      }
+    },
+    solid: {
+      value: {
+        _light: "{colors.gray.900}",
+        _dark: "{colors.white}"
+      }
+    },
+    focusRing: {
+      value: {
+        _light: "{colors.gray.800}",
+        _dark: "{colors.gray.200}"
+      }
+    }
+  },
+  red: {
+    contrast: {
+      value: {
+        _light: "white",
+        _dark: "white"
+      }
+    },
+    fg: {
+      value: {
+        _light: "{colors.red.700}",
+        _dark: "{colors.red.300}"
+      }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.red.100}",
+        _dark: "{colors.red.900}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.red.200}",
+        _dark: "{colors.red.800}"
+      }
+    },
+    emphasized: {
+      value: {
+        _light: "{colors.red.300}",
+        _dark: "{colors.red.700}"
+      }
+    },
+    solid: {
+      value: {
+        _light: "{colors.red.600}",
+        _dark: "{colors.red.600}"
+      }
+    },
+    focusRing: {
+      value: {
+        _light: "{colors.red.600}",
+        _dark: "{colors.red.600}"
+      }
+    }
+  },
+  orange: {
+    contrast: {
+      value: {
+        _light: "white",
+        _dark: "black"
+      }
+    },
+    fg: {
+      value: {
+        _light: "{colors.orange.700}",
+        _dark: "{colors.orange.300}"
+      }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.orange.100}",
+        _dark: "{colors.orange.900}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.orange.200}",
+        _dark: "{colors.orange.800}"
+      }
+    },
+    emphasized: {
+      value: {
+        _light: "{colors.orange.300}",
+        _dark: "{colors.orange.700}"
+      }
+    },
+    solid: {
+      value: {
+        _light: "{colors.orange.600}",
+        _dark: "{colors.orange.500}"
+      }
+    },
+    focusRing: {
+      value: {
+        _light: "{colors.orange.600}",
+        _dark: "{colors.orange.500}"
+      }
+    }
+  },
+  green: {
+    contrast: {
+      value: {
+        _light: "white",
+        _dark: "white"
+      }
+    },
+    fg: {
+      value: {
+        _light: "{colors.green.700}",
+        _dark: "{colors.green.300}"
+      }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.green.100}",
+        _dark: "{colors.green.900}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.green.200}",
+        _dark: "{colors.green.800}"
+      }
+    },
+    emphasized: {
+      value: {
+        _light: "{colors.green.300}",
+        _dark: "{colors.green.700}"
+      }
+    },
+    solid: {
+      value: {
+        _light: "{colors.green.600}",
+        _dark: "{colors.green.600}"
+      }
+    },
+    focusRing: {
+      value: {
+        _light: "{colors.green.600}",
+        _dark: "{colors.green.600}"
+      }
+    }
+  },
+  blue: {
+    contrast: {
+      value: {
+        _light: "white",
+        _dark: "white"
+      }
+    },
+    fg: {
+      value: {
+        _light: "{colors.blue.700}",
+        _dark: "{colors.blue.300}"
+      }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.blue.100}",
+        _dark: "{colors.blue.900}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.blue.200}",
+        _dark: "{colors.blue.800}"
+      }
+    },
+    emphasized: {
+      value: {
+        _light: "{colors.blue.300}",
+        _dark: "{colors.blue.700}"
+      }
+    },
+    solid: {
+      value: {
+        _light: "{colors.blue.600}",
+        _dark: "{colors.blue.600}"
+      }
+    },
+    focusRing: {
+      value: {
+        _light: "{colors.blue.600}",
+        _dark: "{colors.blue.600}"
+      }
+    }
+  },
+  yellow: {
+    contrast: {
+      value: {
+        _light: "black",
+        _dark: "black"
+      }
+    },
+    fg: {
+      value: {
+        _light: "{colors.yellow.800}",
+        _dark: "{colors.yellow.300}"
+      }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.yellow.100}",
+        _dark: "{colors.yellow.900}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.yellow.200}",
+        _dark: "{colors.yellow.800}"
+      }
+    },
+    emphasized: {
+      value: {
+        _light: "{colors.yellow.300}",
+        _dark: "{colors.yellow.700}"
+      }
+    },
+    solid: {
+      value: {
+        _light: "{colors.yellow.300}",
+        _dark: "{colors.yellow.300}"
+      }
+    },
+    focusRing: {
+      value: {
+        _light: "{colors.yellow.300}",
+        _dark: "{colors.yellow.300}"
+      }
+    }
+  },
+  teal: {
+    contrast: {
+      value: {
+        _light: "white",
+        _dark: "white"
+      }
+    },
+    fg: {
+      value: {
+        _light: "{colors.teal.700}",
+        _dark: "{colors.teal.300}"
+      }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.teal.100}",
+        _dark: "{colors.teal.900}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.teal.200}",
+        _dark: "{colors.teal.800}"
+      }
+    },
+    emphasized: {
+      value: {
+        _light: "{colors.teal.300}",
+        _dark: "{colors.teal.700}"
+      }
+    },
+    solid: {
+      value: {
+        _light: "{colors.teal.600}",
+        _dark: "{colors.teal.600}"
+      }
+    },
+    focusRing: {
+      value: {
+        _light: "{colors.teal.600}",
+        _dark: "{colors.teal.600}"
+      }
+    }
+  },
+  purple: {
+    contrast: {
+      value: {
+        _light: "white",
+        _dark: "white"
+      }
+    },
+    fg: {
+      value: {
+        _light: "{colors.purple.700}",
+        _dark: "{colors.purple.300}"
+      }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.purple.100}",
+        _dark: "{colors.purple.900}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.purple.200}",
+        _dark: "{colors.purple.800}"
+      }
+    },
+    emphasized: {
+      value: {
+        _light: "{colors.purple.300}",
+        _dark: "{colors.purple.700}"
+      }
+    },
+    solid: {
+      value: {
+        _light: "{colors.purple.600}",
+        _dark: "{colors.purple.600}"
+      }
+    },
+    focusRing: {
+      value: {
+        _light: "{colors.purple.600}",
+        _dark: "{colors.purple.600}"
+      }
+    }
+  },
+  pink: {
+    contrast: {
+      value: {
+        _light: "white",
+        _dark: "white"
+      }
+    },
+    fg: {
+      value: {
+        _light: "{colors.pink.700}",
+        _dark: "{colors.pink.300}"
+      }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.pink.100}",
+        _dark: "{colors.pink.900}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.pink.200}",
+        _dark: "{colors.pink.800}"
+      }
+    },
+    emphasized: {
+      value: {
+        _light: "{colors.pink.300}",
+        _dark: "{colors.pink.700}"
+      }
+    },
+    solid: {
+      value: {
+        _light: "{colors.pink.600}",
+        _dark: "{colors.pink.600}"
+      }
+    },
+    focusRing: {
+      value: {
+        _light: "{colors.pink.600}",
+        _dark: "{colors.pink.600}"
+      }
+    }
+  },
+  cyan: {
+    contrast: {
+      value: {
+        _light: "white",
+        _dark: "white"
+      }
+    },
+    fg: {
+      value: {
+        _light: "{colors.cyan.700}",
+        _dark: "{colors.cyan.300}"
+      }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.cyan.100}",
+        _dark: "{colors.cyan.900}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.cyan.200}",
+        _dark: "{colors.cyan.800}"
+      }
+    },
+    emphasized: {
+      value: {
+        _light: "{colors.cyan.300}",
+        _dark: "{colors.cyan.700}"
+      }
+    },
+    solid: {
+      value: {
+        _light: "{colors.cyan.600}",
+        _dark: "{colors.cyan.600}"
+      }
+    },
+    focusRing: {
+      value: {
+        _light: "{colors.cyan.600}",
+        _dark: "{colors.cyan.600}"
+      }
+    }
+  }
+});
+
+export { colors };

package/dist/esm/semantic-tokens/index.js

@@ -0,0 +1,12 @@
+"use strict";
+import { colors } from './colors.js';
+import { radii } from './radii.js';
+import { shadows } from './shadows.js';
+
+const semanticTokens = {
+  colors,
+  shadows,
+  radii
+};
+
+export { semanticTokens };

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

@@ -0,0 +1,16 @@
+"use strict";
+import { defineSemanticTokens } from '../def.js';
+
+const radii = defineSemanticTokens.radii({
+  l1: {
+    value: "{radii.xs}"
+  },
+  l2: {
+    value: "{radii.sm}"
+  },
+  l3: {
+    value: "{radii.md}"
+  }
+});
+
+export { radii };

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

@@ -0,0 +1,55 @@
+"use strict";
+import { defineSemanticTokens } from '../def.js';
+
+const shadows = defineSemanticTokens.shadows({
+  xs: {
+    value: {
+      _light: "0px 1px 2px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/20}",
+      _dark: "0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}"
+    }
+  },
+  sm: {
+    value: {
+      _light: "0px 2px 4px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+    }
+  },
+  md: {
+    value: {
+      _light: "0px 4px 8px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+    }
+  },
+  lg: {
+    value: {
+      _light: "0px 8px 16px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+    }
+  },
+  xl: {
+    value: {
+      _light: "0px 16px 24px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+      _dark: "0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+    }
+  },
+  "2xl": {
+    value: {
+      _light: "0px 24px 40px {colors.gray.900/16}, 0px 0px 1px {colors.gray.900/30}",
+      _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 0 0 1px {black/5}",
+      _dark: "inset 0 0 0 1px {colors.gray.300/5}"
+    }
+  }
+});
+
+export { shadows };