@hanzogui/config 2.0.0

package/src/animations.reanimated.ts

@@ -0,0 +1,41 @@
+import { createAnimations } from '@hanzogui/animations-moti'
+
+export const animations = createAnimations({
+  '100ms': {
+    type: 'timing',
+    duration: 100,
+  },
+  bouncy: {
+    type: 'spring',
+    damping: 9,
+    mass: 0.9,
+    stiffness: 150,
+  },
+  lazy: {
+    type: 'spring',
+    damping: 18,
+    stiffness: 50,
+  },
+  medium: {
+    damping: 15,
+    stiffness: 120,
+    mass: 1,
+  },
+  slow: {
+    type: 'spring',
+    damping: 15,
+    stiffness: 40,
+  },
+  quick: {
+    type: 'spring',
+    damping: 20,
+    mass: 1.2,
+    stiffness: 250,
+  },
+  tooltip: {
+    type: 'spring',
+    damping: 10,
+    mass: 0.9,
+    stiffness: 100,
+  },
+})

package/src/animations.ts

@@ -0,0 +1,68 @@
+import { createAnimations } from '@hanzogui/animations-react-native'
+
+export const animations = createAnimations({
+  '0ms': {
+    type: 'timing',
+    duration: 0,
+  },
+  '50ms': {
+    type: 'timing',
+    duration: 50,
+  },
+  '75ms': {
+    type: 'timing',
+    duration: 75,
+  },
+  '100ms': {
+    type: 'timing',
+    duration: 100,
+  },
+  '200ms': {
+    type: 'timing',
+    duration: 200,
+  },
+  '250ms': {
+    type: 'timing',
+    duration: 250,
+  },
+  '300ms': {
+    type: 'timing',
+    duration: 300,
+  },
+  '400ms': {
+    type: 'timing',
+    duration: 400,
+  },
+  '500ms': {
+    type: 'timing',
+    duration: 500,
+  },
+  bouncy: {
+    damping: 9,
+    mass: 0.9,
+    stiffness: 150,
+  },
+  lazy: {
+    damping: 18,
+    stiffness: 50,
+  },
+  medium: {
+    damping: 15,
+    stiffness: 120,
+    mass: 1,
+  },
+  slow: {
+    damping: 15,
+    stiffness: 40,
+  },
+  quick: {
+    damping: 20,
+    mass: 1.2,
+    stiffness: 250,
+  },
+  tooltip: {
+    damping: 10,
+    mass: 0.9,
+    stiffness: 100,
+  },
+})

package/src/animationsCSS.ts

@@ -0,0 +1,33 @@
+import { createAnimations as c1 } from '@hanzogui/animations-css'
+
+const easeOut = 'cubic-bezier(0.25, 0.1, 0.25, 1)'
+const bouncy = 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+const kindaBouncyBezier = 'cubic-bezier(0.34, 1.56, 0.64, 1)'
+
+export const animationsCSS = c1({
+  '0ms': '0ms linear',
+  '30ms': '30ms linear',
+  '50ms': '50ms linear',
+  '75ms': '75ms linear',
+  '100ms': '100ms ease-out',
+  '200ms': '200ms ease-out',
+  '250ms': '250ms ease-out',
+  '300ms': '300ms ease-out',
+  '400ms': '400ms ease-out',
+  '500ms': '500ms ease-out',
+  superBouncy: `300ms cubic-bezier(0.175, 0.885, 0.32, 1.5)`,
+  bouncy: `350ms ${bouncy}`,
+  kindaBouncy: `400ms ${kindaBouncyBezier}`,
+  superLazy: `600ms ${easeOut}`,
+  lazy: `500ms ${easeOut}`,
+  medium: `300ms ${easeOut}`,
+  slowest: `800ms ${easeOut}`,
+  slow: `450ms ${easeOut}`,
+  quick: `150ms ${easeOut}`,
+  quickLessBouncy: `180ms ${easeOut}`,
+  tooltip: `200ms cubic-bezier(0.175, 0.885, 0.32, 1.1)`,
+  quicker: `120ms ${easeOut}`,
+  quickerLessBouncy: `100ms ${easeOut}`,
+  quickest: `80ms ${easeOut}`,
+  quickestLessBouncy: `60ms ${easeOut}`,
+})

package/src/animationsMotion.ts

@@ -0,0 +1,122 @@
+import { createAnimations } from '@hanzogui/animations-motion'
+
+export const animationsMotion = createAnimations({
+  '0ms': {
+    duration: 0,
+  },
+  '30ms': {
+    duration: 30,
+  },
+  '50ms': {
+    duration: 50,
+  },
+  '75ms': {
+    duration: 75,
+  },
+  '100ms': {
+    duration: 100,
+  },
+  '200ms': {
+    duration: 200,
+  },
+  '250ms': {
+    duration: 250,
+  },
+  '300ms': {
+    duration: 300,
+  },
+  '400ms': {
+    duration: 400,
+  },
+  '500ms': {
+    duration: 500,
+  },
+  superBouncy: {
+    type: 'spring',
+    damping: 3,
+    mass: 0.7,
+    stiffness: 135,
+  },
+  bouncy: {
+    type: 'spring',
+    damping: 5.4,
+    mass: 0.9,
+    stiffness: 90,
+  },
+  kindaBouncy: {
+    type: 'spring',
+    damping: 9.6,
+    mass: 1,
+    stiffness: 18.75,
+  },
+  superLazy: {
+    type: 'spring',
+    damping: 15,
+    mass: 2,
+    stiffness: 18.75,
+  },
+  lazy: {
+    type: 'spring',
+    damping: 10.8,
+    mass: 0.2,
+    stiffness: 7.5,
+  },
+  medium: {
+    damping: 9.6,
+    stiffness: 67.5,
+    mass: 0.8,
+  },
+  slowest: {
+    type: 'spring',
+    damping: 9,
+    stiffness: 7.5,
+  },
+  slow: {
+    type: 'spring',
+    damping: 27,
+    stiffness: 45,
+  },
+  quick: {
+    type: 'spring',
+    damping: 15,
+    mass: 1,
+    stiffness: 412.5,
+  },
+  quickLessBouncy: {
+    type: 'spring',
+    damping: 40,
+    mass: 2,
+    stiffness: 400,
+    velocity: 5,
+  },
+  tooltip: {
+    type: 'spring',
+    damping: 6,
+    mass: 0.9,
+    stiffness: 75,
+  },
+  quicker: {
+    type: 'spring',
+    damping: 20,
+    mass: 0.4,
+    stiffness: 450,
+  },
+  quickerLessBouncy: {
+    type: 'spring',
+    damping: 26,
+    mass: 0.35,
+    stiffness: 500,
+  },
+  quickest: {
+    type: 'spring',
+    damping: 22,
+    mass: 0.3,
+    stiffness: 550,
+  },
+  quickestLessBouncy: {
+    type: 'spring',
+    damping: 28,
+    mass: 0.25,
+    stiffness: 600,
+  },
+})

package/src/animationsReactNative.ts

@@ -0,0 +1,129 @@
+import { createAnimations as c2 } from '@hanzogui/animations-react-native'
+
+export const animationsReactNative = c2({
+  '0ms': {
+    type: 'timing',
+    duration: 0,
+  },
+  '30ms': {
+    type: 'timing',
+    duration: 30,
+  },
+  '50ms': {
+    type: 'timing',
+    duration: 50,
+  },
+  '75ms': {
+    type: 'timing',
+    duration: 75,
+  },
+  '100ms': {
+    type: 'timing',
+    duration: 100,
+  },
+  '200ms': {
+    type: 'timing',
+    duration: 200,
+  },
+  '250ms': {
+    type: 'timing',
+    duration: 250,
+  },
+  '300ms': {
+    type: 'timing',
+    duration: 300,
+  },
+  '400ms': {
+    type: 'timing',
+    duration: 400,
+  },
+  '500ms': {
+    type: 'timing',
+    duration: 500,
+  },
+  superBouncy: {
+    type: 'spring',
+    damping: 5,
+    mass: 0.7,
+    stiffness: 180,
+  },
+  bouncy: {
+    type: 'spring',
+    damping: 9,
+    mass: 0.9,
+    stiffness: 120,
+  },
+  kindaBouncy: {
+    type: 'spring',
+    damping: 16,
+    mass: 1,
+    stiffness: 25,
+  },
+  superLazy: {
+    type: 'spring',
+    damping: 25,
+    mass: 2,
+    stiffness: 25,
+  },
+  lazy: {
+    type: 'spring',
+    damping: 18,
+    mass: 0.2,
+    stiffness: 10,
+  },
+  medium: {
+    damping: 16,
+    stiffness: 90,
+    mass: 0.8,
+  },
+  slowest: {
+    type: 'spring',
+    damping: 15,
+    stiffness: 10,
+  },
+  slow: {
+    type: 'spring',
+    damping: 45,
+    stiffness: 60,
+  },
+  quick: {
+    type: 'spring',
+    damping: 25,
+    mass: 1,
+    stiffness: 550,
+  },
+  quickLessBouncy: {
+    type: 'spring',
+    damping: 40,
+    mass: 2,
+    stiffness: 400,
+  },
+  tooltip: {
+    type: 'spring',
+    damping: 10,
+    mass: 0.9,
+    stiffness: 100,
+  },
+  quicker: {
+    type: 'spring',
+    damping: 16,
+    mass: 0.6,
+    stiffness: 700,
+  },
+  quickerLessBouncy: {
+    type: 'spring',
+    damping: 27,
+    mass: 0.45,
+    stiffness: 750,
+  },
+  quickest: {
+    damping: 15,
+    mass: 0.6,
+    stiffness: 400,
+  },
+  quickestLessBouncy: {
+    damping: 24,
+    mass: 0.35,
+    stiffness: 750,
+  },
+})

package/src/animationsReanimated.ts

@@ -0,0 +1,117 @@
+import { createAnimations } from '@hanzogui/animations-reanimated'
+
+export const animationsReanimated = createAnimations({
+  '0ms': {
+    type: 'timing',
+    duration: 0,
+  },
+  '30ms': {
+    type: 'timing',
+    duration: 30,
+  },
+  '50ms': {
+    type: 'timing',
+    duration: 50,
+  },
+  '75ms': {
+    type: 'timing',
+    duration: 75,
+  },
+  '100ms': {
+    type: 'timing',
+    duration: 100,
+  },
+  '200ms': {
+    type: 'timing',
+    duration: 200,
+  },
+  '250ms': {
+    type: 'timing',
+    duration: 250,
+  },
+  '300ms': {
+    type: 'timing',
+    duration: 300,
+  },
+  '400ms': {
+    type: 'timing',
+    duration: 400,
+  },
+  '500ms': {
+    type: 'timing',
+    duration: 500,
+  },
+  superBouncy: {
+    damping: 5,
+    mass: 0.7,
+    stiffness: 180,
+  },
+  bouncy: {
+    damping: 9,
+    mass: 0.9,
+    stiffness: 120,
+  },
+  kindaBouncy: {
+    damping: 16,
+    mass: 1,
+    stiffness: 25,
+  },
+  superLazy: {
+    damping: 25,
+    mass: 2,
+    stiffness: 25,
+  },
+  medium: {
+    damping: 16,
+    stiffness: 90,
+    mass: 0.8,
+  },
+  lazy: {
+    damping: 18,
+    mass: 0.2,
+    stiffness: 10,
+  },
+  slowest: {
+    damping: 15,
+    stiffness: 10,
+  },
+  slow: {
+    damping: 45,
+    stiffness: 60,
+  },
+  quick: {
+    damping: 25,
+    mass: 1,
+    stiffness: 550,
+  },
+  quickLessBouncy: {
+    damping: 40,
+    mass: 2,
+    stiffness: 400,
+  },
+  tooltip: {
+    damping: 10,
+    mass: 0.9,
+    stiffness: 100,
+  },
+  quicker: {
+    damping: 16,
+    mass: 0.6,
+    stiffness: 700,
+  },
+  quickerLessBouncy: {
+    damping: 27,
+    mass: 0.45,
+    stiffness: 750,
+  },
+  quickest: {
+    damping: 15,
+    mass: 0.6,
+    stiffness: 400,
+  },
+  quickestLessBouncy: {
+    damping: 24,
+    mass: 0.35,
+    stiffness: 750,
+  },
+})

package/src/config.ts

@@ -0,0 +1,27 @@
+import { shorthands } from '@hanzogui/shorthands'
+import { themes, tokens } from '@hanzogui/themes'
+import type { CreateGuiProps } from '@hanzogui/web'
+
+import { fonts } from './fonts'
+import { media, mediaQueryDefaultActive } from './media'
+
+export const configWithoutAnimations = {
+  themes,
+  media,
+  shorthands,
+  tokens,
+  fonts,
+  selectionStyles: (theme) =>
+    theme.color5
+      ? {
+          backgroundColor: theme.color5,
+          color: theme.color11,
+        }
+      : null,
+
+  settings: {
+    defaultFont: 'body',
+    shouldAddPrefersColorThemes: true,
+    mediaQueryDefaultActive,
+  },
+} satisfies CreateGuiProps

package/src/createGenericFont.ts

@@ -0,0 +1,43 @@
+import type { GenericFont } from '@hanzogui/web'
+import { createFont } from '@hanzogui/web'
+
+const genericFontSizes = {
+  1: 10,
+  2: 11,
+  3: 12,
+  4: 14,
+  5: 15,
+  6: 16,
+  7: 20,
+  8: 22,
+  9: 30,
+  10: 42,
+  11: 52,
+  12: 62,
+  13: 72,
+  14: 92,
+  15: 114,
+  16: 124,
+} as const
+
+export function createGenericFont<A extends GenericFont<keyof typeof genericFontSizes>>(
+  family: string,
+  font: Partial<A> = {},
+  {
+    sizeLineHeight = (val) => val * 1.35,
+  }: {
+    sizeLineHeight?: (val: number) => number
+  } = {}
+): A {
+  const size = font.size || genericFontSizes
+  return createFont({
+    family,
+    size,
+    lineHeight: Object.fromEntries(
+      Object.entries(size).map(([k, v]) => [k, sizeLineHeight(+v)])
+    ) as typeof size,
+    weight: { 0: '300' },
+    letterSpacing: { 4: 0 },
+    ...(font as any),
+  })
+}

package/src/fonts.ts

@@ -0,0 +1,71 @@
+import { createGeistSansFont } from '@hanzogui/font-geist-sans'
+import { createGeistMonoFont } from '@hanzogui/font-geist-mono'
+
+const headingFont = createGeistSansFont(
+  {
+    size: {
+      5: 13,
+      6: 15,
+      9: 32,
+      10: 44,
+    },
+    transform: {
+      6: 'uppercase',
+      7: 'none',
+    },
+    weight: {
+      6: '400',
+      7: '700',
+    },
+    color: {
+      6: '$colorFocus',
+      7: '$color',
+    },
+    letterSpacing: {
+      5: 2,
+      6: 1,
+      7: 0,
+      8: 0,
+      9: -1,
+      10: -1.5,
+      12: -2,
+      14: -3,
+      15: -4,
+    },
+    face: {
+      700: { normal: 'GeistBold' },
+      800: { normal: 'GeistBold' },
+      900: { normal: 'GeistBold' },
+    },
+  },
+  { sizeLineHeight: (size) => Math.round(size * 1.1 + (size < 30 ? 10 : 5)) }
+)
+
+const bodyFont = createGeistSansFont(
+  {
+    weight: {
+      1: '400',
+    },
+  },
+  {
+    sizeSize: (size) => Math.round(size),
+    sizeLineHeight: (size) => Math.round(size * 1.1 + (size >= 12 ? 8 : 4)),
+  }
+)
+
+const monoFont = createGeistMonoFont(
+  {
+    weight: {
+      1: '500',
+    },
+  },
+  {
+    sizeLineHeight: (x) => Math.round(x * 1.5),
+  }
+)
+
+export const fonts = {
+  heading: headingFont,
+  body: bodyFont,
+  mono: monoFont,
+}

package/src/index.reanimated.ts

@@ -0,0 +1,10 @@
+import { animations } from './animations.reanimated'
+import { configWithoutAnimations } from './config'
+export * from './media'
+export * from './createGenericFont'
+export * from './animations.reanimated'
+
+export const config = {
+  ...configWithoutAnimations,
+  animations,
+}

package/src/index.tsx

@@ -0,0 +1,16 @@
+import { themes } from '@hanzogui/themes'
+
+import { animations } from './animations'
+import { configWithoutAnimations } from './config'
+
+export { configWithoutAnimations } from './config'
+export * from './media'
+export * from './createGenericFont'
+export * from './animations'
+
+export const config = {
+  ...configWithoutAnimations,
+  // fixes typescript exporting this using internal /types/ path
+  themes: themes as typeof themes,
+  animations,
+}

package/src/media.ts

@@ -0,0 +1,32 @@
+export const demoMedia = [500, 620, 780, 900]
+export const widths = [660, 800, 1020, 1280]
+
+// note order is important!
+// earlier defined = less important
+
+export const media = {
+  // for site
+  xl: { maxWidth: 1650 },
+  lg: { maxWidth: 1280 },
+  md: { maxWidth: 1020 },
+  sm: { maxWidth: 800 },
+  xs: { maxWidth: 660 },
+  xxs: { maxWidth: 390 },
+  gtXs: { minWidth: 660 + 1 },
+  gtSm: { minWidth: 800 + 1 },
+  gtMd: { minWidth: 1020 + 1 },
+  gtLg: { minWidth: 1280 + 1 },
+  gtXl: { minWidth: 1650 + 1 },
+}
+
+// note all the non "gt" ones should be true to start to match mobile-first
+// were aiming for "xs" to be the default to "gtXs" true too
+export const mediaQueryDefaultActive = {
+  xl: true,
+  lg: true,
+  md: true,
+  sm: true,
+  xs: true,
+  // false
+  xxs: false,
+}

package/src/v3-animations.native.ts

@@ -0,0 +1 @@
+export { animationsReactNative as animations } from './animationsReactNative'