@lizzy-liang-bigstack/theme 0.0.1

package/src/plugins/iconPlugin.ts

@@ -0,0 +1,54 @@
+import type { PluginCreator } from 'tailwindcss/types/config'
+
+export const iconPlugin: PluginCreator = ({ addComponents }) => {
+  addComponents({
+    '.icon-xs': {
+      width: '10px',
+      height: '10px',
+    },
+    '.icon-frame-xs': {
+      width: '16px',
+      height: '16px',
+    },
+    '.icon-sm': {
+      width: '12px',
+      height: '12px',
+    },
+    '.icon-frame-sm': {
+      width: '24px',
+      height: '24px',
+    },
+    '.icon-md-sm': {
+      width: '14px',
+      height: '14px',
+    },
+    '.icon-frame-md-sm': {
+      width: '28px',
+      height: '28px',
+    },
+    '.icon-md': {
+      width: '16px',
+      height: '16px',
+    },
+    '.icon-frame-md': {
+      width: '32px',
+      height: '32px',
+    },
+    '.icon-lg': {
+      width: '18px',
+      height: '18px',
+    },
+    '.icon-frame-lg': {
+      width: '40px',
+      height: '40px',
+    },
+    '.icon-xl': {
+      width: '24px',
+      height: '24px',
+    },
+    '.icon-frame-xl': {
+      width: '48px',
+      height: '48px',
+    },
+  })
+}

package/src/plugins/skeletonPlugin.ts

@@ -0,0 +1,13 @@
+import type { PluginCreator } from 'tailwindcss/types/config'
+
+export const skeletonPlugin: PluginCreator = ({ addComponents, theme }) => {
+  const skeletonColor = theme('colors.functional.skeleton')
+
+  addComponents({
+    '.cos-skeleton': {
+      background: `linear-gradient(90deg, transparent 60%, rgba(255, 255, 255, .5) 70%, transparent 80%) ${skeletonColor}`,
+      backgroundSize: '200% 100%',
+      backgroundPositionX: '180%',
+    },
+  })
+}

package/src/plugins/typographyPlugin.ts

@@ -0,0 +1,22 @@
+import type { CSSRuleObject, PluginCreator } from 'tailwindcss/types/config'
+import { typographyMap } from '../utils/typography/typography'
+import { cubeTheme } from '../cubeTheme'
+
+export const typographyPlugin: PluginCreator = ({ addComponents }) => {
+  const components: CSSRuleObject = Object.fromEntries(
+    Object.entries(typographyMap).map(([className, typography]) => {
+      const selector = `.${className}`
+      const fontFamily =
+        cubeTheme.fontFamily[typography.fontFamily].join(', ')
+      const definition = {
+        fontFamily,
+        fontSize: typography.fontSize,
+        lineHeight: typography.lineHeight,
+        letterSpacing: typography.letterSpacing ?? null,
+        fontWeight: typography.fontWeight.toString(),
+      }
+      return [selector, definition]
+    }),
+  )
+  addComponents(components)
+}

package/src/utils/animationKeyframes.ts

@@ -0,0 +1,81 @@
+import type { KeyValuePair } from 'tailwindcss/types/config'
+
+const skeletonKeyframes = {
+  'cos-skeleton': {
+    '100%': {
+      backgroundPositionX: '-20%',
+    },
+  },
+} satisfies KeyValuePair<string, KeyValuePair<string, KeyValuePair>>
+
+const dotSpinner45Keyframes = {
+  'cos-dot-spinner-45-vector-0': {
+    '0%, 100%': { opacity: '1' },
+    '12.5%, 87.5%': { opacity: '0' },
+  },
+  'cos-dot-spinner-45-vector-1': {
+    '0%, 25%, 100%': { opacity: '0' },
+    '12.5%': { opacity: '1' },
+  },
+  'cos-dot-spinner-45-vector-2': {
+    '0%, 12.5%, 37.5%, 100%': { opacity: '0' },
+    '25%': { opacity: '1' },
+  },
+  'cos-dot-spinner-45-vector-3': {
+    '0%, 25%, 50%, 100%': { opacity: '0' },
+    '37.5%': { opacity: '1' },
+  },
+  'cos-dot-spinner-45-vector-4': {
+    '0%, 37.5%, 62.5%, 100%': { opacity: '0' },
+    '50%': { opacity: '1' },
+  },
+  'cos-dot-spinner-45-vector-5': {
+    '0%, 50%, 75%, 100%': { opacity: '0' },
+    '62.5%': { opacity: '1' },
+  },
+  'cos-dot-spinner-45-vector-6': {
+    '0%, 62.5%, 87.5%, 100%': { opacity: '0' },
+    '75%': { opacity: '1' },
+  },
+  'cos-dot-spinner-45-vector-7': {
+    '0%, 75%, 100%': { opacity: '0' },
+    '87.5%': { opacity: '1' },
+  },
+} satisfies KeyValuePair<string, KeyValuePair<string, KeyValuePair>>
+
+const dotSpinner120Keyframes = {
+  'cos-dot-spinner-120-vector-0': {
+    '0%, 100%': { opacity: '1' },
+    '33.3%, 66.6%': { opacity: '0' },
+  },
+  'cos-dot-spinner-120-vector-1': {
+    '0%, 66.6%, 100%': { opacity: '0' },
+    '33.3%': { opacity: '1' },
+  },
+  'cos-dot-spinner-120-vector-2': {
+    '0%, 33.3%, 100%': { opacity: '0' },
+    '66.6%': { opacity: '1' },
+  },
+} satisfies KeyValuePair<string, KeyValuePair<string, KeyValuePair>>
+
+const cubeSpinnerKeyframes = {
+  'cos-cube-spinner-vector-0': {
+    '0%, 100%': { opacity: '1' },
+    '33.3%, 66.6%': { opacity: '0' },
+  },
+  'cos-cube-spinner-vector-1': {
+    '0%, 66.6%, 100%': { opacity: '0' },
+    '33.3%': { opacity: '1' },
+  },
+  'cos-cube-spinner-vector-2': {
+    '0%, 33.3%, 100%': { opacity: '0' },
+    '66.6%': { opacity: '1' },
+  },
+} satisfies KeyValuePair<string, KeyValuePair<string, KeyValuePair>>
+
+export const cosAnimationKeyframes = {
+  ...skeletonKeyframes,
+  ...dotSpinner45Keyframes,
+  ...dotSpinner120Keyframes,
+  ...cubeSpinnerKeyframes,
+} satisfies KeyValuePair<string, KeyValuePair<string, KeyValuePair>>

package/src/utils/animations.ts

@@ -0,0 +1,44 @@
+import type { KeyValuePair } from 'tailwindcss/types/config'
+
+const skeletonAnimations = {
+  'cos-skeleton': 'cos-skeleton 1.5s ease-in-out infinite',
+} satisfies KeyValuePair
+
+const dotSpinner45VectorShorthand = (vectorIndex: number) =>
+  `cos-dot-spinner-45-vector-${vectorIndex} 1s linear infinite`
+
+const dotSpinner45Animations = {
+  'cos-dot-spinner-45-vector-0': dotSpinner45VectorShorthand(0),
+  'cos-dot-spinner-45-vector-1': dotSpinner45VectorShorthand(1),
+  'cos-dot-spinner-45-vector-2': dotSpinner45VectorShorthand(2),
+  'cos-dot-spinner-45-vector-3': dotSpinner45VectorShorthand(3),
+  'cos-dot-spinner-45-vector-4': dotSpinner45VectorShorthand(4),
+  'cos-dot-spinner-45-vector-5': dotSpinner45VectorShorthand(5),
+  'cos-dot-spinner-45-vector-6': dotSpinner45VectorShorthand(6),
+  'cos-dot-spinner-45-vector-7': dotSpinner45VectorShorthand(7),
+} satisfies KeyValuePair
+
+const dotSpinner120VectorShorthand = (vectorIndex: number) =>
+  `cos-dot-spinner-120-vector-${vectorIndex} 1s linear infinite`
+
+const dotSpinner120Animations = {
+  'cos-dot-spinner-120-vector-0': dotSpinner120VectorShorthand(0),
+  'cos-dot-spinner-120-vector-1': dotSpinner120VectorShorthand(1),
+  'cos-dot-spinner-120-vector-2': dotSpinner120VectorShorthand(2),
+} satisfies KeyValuePair
+
+const cubeSpinnerVectorShorthand = (vectorIndex: number) =>
+  `cos-cube-spinner-vector-${vectorIndex} 1.25s linear infinite`
+
+const cubeSpinnerAnimations = {
+  'cos-cube-spinner-vector-0': cubeSpinnerVectorShorthand(0),
+  'cos-cube-spinner-vector-1': cubeSpinnerVectorShorthand(1),
+  'cos-cube-spinner-vector-2': cubeSpinnerVectorShorthand(2),
+} satisfies KeyValuePair
+
+export const cosAnimations = {
+  ...skeletonAnimations,
+  ...dotSpinner45Animations,
+  ...dotSpinner120Animations,
+  ...cubeSpinnerAnimations,
+} satisfies KeyValuePair

package/src/utils/genericTypes.ts

@@ -0,0 +1,19 @@
+type FlattenObjectKeysInternal<
+  T extends Record<string | number, unknown>,
+  Separator extends string = '.',
+  ExcludedKeys extends string | number = '',
+  Key = keyof T,
+> = Key extends string | number
+  ? Key extends ExcludedKeys
+    ? never
+    : T[Key] extends Record<string | number, unknown>
+      ? `${Key}${Separator}${FlattenObjectKeysInternal<T[Key], Separator, ExcludedKeys>}`
+      : `${Key}`
+  : never
+
+export type FlattenedObjectKeys<
+  T extends Record<string | number, unknown>,
+  Separator extends string = '.',
+  ExcludedKeys extends string | number = '',
+> = FlattenObjectKeysInternal<T, Separator, ExcludedKeys>
+

package/src/utils/typography/primaryBodies.ts

@@ -0,0 +1,53 @@
+import type { Typography } from './typography'
+
+const FONT_FAMILY = 'inter' satisfies Typography['fontFamily']
+const LETTER_SPACING = 'normal' as const
+const FONT_WEIGHT = 400 as const
+
+export const primaryBody1: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '15px',
+  lineHeight: '22px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const primaryBody2: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '14px',
+  lineHeight: '20px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const primaryBody3: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '13px',
+  lineHeight: '18px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const primaryBody4: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '12px',
+  lineHeight: '16px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const primaryBody5: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '11px',
+  lineHeight: '15px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const primaryBody6: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '10px',
+  lineHeight: '13px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}

package/src/utils/typography/primaryHeadings.ts

@@ -0,0 +1,45 @@
+import type { Typography } from './typography'
+
+const FONT_FAMILY = 'urbanist' satisfies Typography['fontFamily']
+const LETTER_SPACING = '0.02em' as const
+const FONT_WEIGHT = 600 as const
+
+export const primaryH1: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '30px',
+  lineHeight: '38px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const primaryH2: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '24px',
+  lineHeight: '30px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const primaryH3: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '20px',
+  lineHeight: '24px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const primaryH4: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '18px',
+  lineHeight: '22px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const primaryH5: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '16px',
+  lineHeight: '20px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}

package/src/utils/typography/secondaryBodies.ts

@@ -0,0 +1,61 @@
+import type { Typography } from './typography'
+
+const FONT_FAMILY = 'urbanist' satisfies Typography['fontFamily']
+const LETTER_SPACING = '0.02em' as const
+const FONT_WEIGHT = 400 as const
+
+export const secondaryBody1: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '15px',
+  lineHeight: '22px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const secondaryBody2: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '14px',
+  lineHeight: '18px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const secondaryBody3: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '13px',
+  lineHeight: '16px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const secondaryBody4: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '12px',
+  lineHeight: '16px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const secondaryBody5: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '11px',
+  lineHeight: '15px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const secondaryBody6: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '10px',
+  lineHeight: '14px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const secondaryBody7: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '9px',
+  lineHeight: '12px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}

package/src/utils/typography/secondaryHeadings.ts

@@ -0,0 +1,45 @@
+import type { Typography } from './typography'
+
+const FONT_FAMILY = 'inter' satisfies Typography['fontFamily']
+const LETTER_SPACING = '0.02em' as const
+const FONT_WEIGHT = 600 as const
+
+export const secondaryH1: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '30px',
+  lineHeight: '38px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const secondaryH2: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '24px',
+  lineHeight: '30px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const secondaryH3: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '20px',
+  lineHeight: '24px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const secondaryH4: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '18px',
+  lineHeight: '22px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}
+
+export const secondaryH5: Typography = {
+  fontFamily: FONT_FAMILY,
+  fontSize: '16px',
+  lineHeight: '20px',
+  letterSpacing: LETTER_SPACING,
+  fontWeight: FONT_WEIGHT,
+}

package/src/utils/typography/typography.ts

@@ -0,0 +1,72 @@
+import { cubeTheme } from '../../cubeTheme'
+import {
+  primaryBody1,
+  primaryBody2,
+  primaryBody3,
+  primaryBody4,
+  primaryBody5,
+  primaryBody6,
+} from './primaryBodies'
+import {
+  primaryH1,
+  primaryH2,
+  primaryH3,
+  primaryH4,
+  primaryH5,
+} from './primaryHeadings'
+import {
+  secondaryBody1,
+  secondaryBody2,
+  secondaryBody3,
+  secondaryBody4,
+  secondaryBody5,
+  secondaryBody6,
+  secondaryBody7,
+} from './secondaryBodies'
+import {
+  secondaryH1,
+  secondaryH2,
+  secondaryH3,
+  secondaryH4,
+  secondaryH5,
+} from './secondaryHeadings'
+
+export type Typography = {
+  fontFamily: keyof (typeof cubeTheme)['fontFamily']
+  fontSize: string
+  lineHeight: string
+  letterSpacing: string
+  fontWeight: number
+}
+
+export const typographyMap = {
+  'primary-h1': primaryH1,
+  'primary-h2': primaryH2,
+  'primary-h3': primaryH3,
+  'primary-h4': primaryH4,
+  'primary-h5': primaryH5,
+  'secondary-h1': secondaryH1,
+  'secondary-h2': secondaryH2,
+  'secondary-h3': secondaryH3,
+  'secondary-h4': secondaryH4,
+  'secondary-h5': secondaryH5,
+  'primary-body1': primaryBody1,
+  'primary-body2': primaryBody2,
+  'primary-body3': primaryBody3,
+  'primary-body4': primaryBody4,
+  'primary-body5': primaryBody5,
+  'primary-body6': primaryBody6,
+  'secondary-body1': secondaryBody1,
+  'secondary-body2': secondaryBody2,
+  'secondary-body3': secondaryBody3,
+  'secondary-body4': secondaryBody4,
+  'secondary-body5': secondaryBody5,
+  'secondary-body6': secondaryBody6,
+  'secondary-body7': secondaryBody7,
+} as const
+
+export type TypographyClassName = keyof typeof typographyMap
+
+export const getTypography = (className: TypographyClassName): Typography => {
+  return typographyMap[className]
+}