@okshaun/components 0.5.8 → 1.0.1

package/src/styles/primitives/durations.ts

@@ -0,0 +1,25 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const durations = defineTokens.durations({
+  fastest: {
+    value: '50ms',
+  },
+  faster: {
+    value: '100ms',
+  },
+  fast: {
+    value: '150ms',
+  },
+  normal: {
+    value: '200ms',
+  },
+  slow: {
+    value: '300ms',
+  },
+  slower: {
+    value: '400ms',
+  },
+  slowest: {
+    value: '500ms',
+  },
+});

package/src/styles/primitives/easings.ts

@@ -0,0 +1,19 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const easings = defineTokens.easings({
+  default: {
+    value: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  },
+  linear: {
+    value: 'linear',
+  },
+  in: {
+    value: 'cubic-bezier(0.4, 0, 1, 1)',
+  },
+  out: {
+    value: 'cubic-bezier(0, 0, 0.2, 1)',
+  },
+  'in-out': {
+    value: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  },
+});

package/src/styles/primitives/fontSizes.ts

@@ -0,0 +1,16 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const fontSizes = defineTokens.fontSizes({
+  '12': { value: '{sizes.12}' },
+  '14': { value: '{sizes.14}' },
+  '16': { value: '{sizes.16}' },
+  '20': { value: '{sizes.20}' },
+  '24': { value: '{sizes.24}' },
+  '32': { value: '{sizes.32}' },
+  '40': { value: '{sizes.40}' },
+  '48': { value: '{sizes.48}' },
+  '64': { value: '{sizes.64}' },
+  '72': { value: '{sizes.72}' },
+  '80': { value: '{sizes.80}' },
+  '96': { value: '{sizes.96}' },
+});

package/src/styles/primitives/fontWeights.ts

@@ -0,0 +1,9 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const fontWeights = defineTokens.fontWeights({
+  light: { value: 300 },
+  normal: { value: 400 },
+  medium: { value: 500 },
+  bold: { value: 700 },
+  black: { value: 900 },
+});

package/src/styles/primitives/fonts.ts

@@ -0,0 +1,18 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const fonts = defineTokens.fonts({
+  heading: { value: "'IBM Plex Sans', Geneva, Tahoma, Verdana, sans-serif" },
+  sans: { value: "'IBM Plex Sans', Geneva, Tahoma, Verdana, sans-serif" },
+  body: {
+    value:
+      "'Piazzolla Variable', 'Piazzolla', Georgia, 'Times New Roman', Times, serif",
+  },
+  serif: {
+    value:
+      "'Piazzolla Variable', 'Piazzolla', Georgia, 'Times New Roman', Times, serif",
+  },
+  mono: {
+    value:
+      "'IBM Plex Mono', Andale Mono, monaco, Consolas, Lucida Console, monospace",
+  },
+});

package/src/styles/primitives/index.ts

@@ -0,0 +1,46 @@
+export * from './animations';
+export * from './aspectRatios';
+export * from './blurs';
+export * from './borders';
+export * from './borderWidths';
+export * from './colors';
+export * from './durations';
+export * from './easings';
+export * from './fonts';
+export * from './fontSizes';
+export * from './fontWeights';
+export * from './letterSpacings';
+export * from './lineHeights';
+export * from './radii';
+export * from './shadows';
+export * from './sizes';
+export * from './spacings';
+
+/*
+Officially supported token types
+from @pandacss/types/dist/tokens.d.ts
+----------------------------------------
+animations: string
+aspectRatios: string
+assets: string | Asset // not currently using
+blurs: string
+borders: string | Border
+borderWidths: string
+colors: string
+containerNames: string // not currently using
+cursor: string // not currently using
+durations: string
+easings: string | number[]
+fonts: string | string[]
+fontSizes: string
+fontWeights: string | number
+gradients: string | Gradient // not currently using
+letterSpacings: string
+lineHeights: string | number
+opacity: string | number // not currently using
+radii: string
+shadows: Shadow | Shadow[] | string | string[] // setup as semantic tokens
+sizes: string
+spacing: string | number
+zIndex: string | number // not currently using
+*/

package/src/styles/primitives/letterSpacings.ts

@@ -0,0 +1,22 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const letterSpacings = defineTokens.letterSpacings({
+  tighter: {
+    value: '-0.05em',
+  },
+  tight: {
+    value: '-0.025em',
+  },
+  normal: {
+    value: '0em',
+  },
+  wide: {
+    value: '0.025em',
+  },
+  wider: {
+    value: '0.05em',
+  },
+  widest: {
+    value: '0.1em',
+  },
+});

package/src/styles/primitives/lineHeights.ts

@@ -0,0 +1,16 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const lineHeights = defineTokens.lineHeights({
+  none: {
+    value: '1',
+  },
+  tight: {
+    value: 'calc(1em + 0.25rem)', // 4
+  },
+  default: {
+    value: 'calc(1em + 0.5rem)', // 8
+  },
+  loose: {
+    value: 'calc(1em + 0.75rem)', // 12
+  },
+});

package/src/styles/primitives/radii.ts

@@ -0,0 +1,14 @@
+import { defineTokens } from '@pandacss/dev';
+import { utilitySizes } from './sizes';
+
+export const radii = defineTokens.radii({
+  '0': { value: '{sizes.0}' },
+  '1': { value: '{sizes.1}' },
+  '2': { value: '{sizes.2}' },
+  '3': { value: '{sizes.3}' },
+  '4': { value: '{sizes.4}' },
+  '8': { value: '{sizes.8}' },
+  '16': { value: '{sizes.16}' },
+  '100': { value: utilitySizes['full'].value },
+  '999': { value: '999px' },
+});

package/src/styles/primitives/shadows.ts

@@ -0,0 +1,73 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const shadows = defineTokens.shadows({
+  zeroShadow: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.0} rgba(0, 0, 0, 0), {sizes.0} {sizes.0} {sizes.0} rgba(0, 0, 0, 0)',
+  },
+  raisedLight: {
+    value:
+      '{sizes.0} {sizes.1} {sizes.1} rgba(30, 31, 33, 0.25), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.31)',
+  },
+  raisedDark: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.0} rgba(0, 0, 0, 0), {sizes.0} {sizes.1} {sizes.1} rgba(1, 4, 4, 0.5), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)',
+  },
+  elevatedLight: {
+    value:
+      '{sizes.0} {sizes.4} {sizes.7} rgba(30, 31, 33, 0.2), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.31)',
+  },
+  elevatedDark: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.0} rgba(95, 95, 95, 0.06), {sizes.0} {sizes.4} {sizes.7} rgba(1, 4, 4, 0.43), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)',
+  },
+  overlayLight: {
+    value:
+      '{sizes.0} {sizes.8} {sizes.12} rgba(30, 31, 33, 0.15), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.31)',
+  },
+  overlayDark: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.0} rgba(189, 189, 189, 0.12), {sizes.0} {sizes.8} {sizes.12} rgba(1, 4, 4, 0.36), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)',
+  },
+  overflowLight: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.8} rgba(30, 31, 33, 0.16), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.12)',
+  },
+  overflowDark: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.12} rgba(1, 4, 4, 0.56), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)',
+  },
+  // TODO: delete below once migration is complete
+  lowLight: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.1} {sizes.1} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.3} rgba(30, 30, 30, 0.2)',
+  },
+  lowDark: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.1} {sizes.1} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.3} rgba(0, 0, 0, 0.4)',
+  },
+  mediumLight: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.4} {sizes.4} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.8} {sizes.8} rgba(30, 30, 30, 0.2)',
+  },
+  mediumDark: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.4} {sizes.4} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.8} {sizes.8} rgba(0, 0, 0, 0.4)',
+  },
+  highLight: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.4} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.6} {sizes.8} {sizes.1} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.14} {sizes.16} {sizes.2} rgba(30, 30, 30, 0.2)',
+  },
+  highDark: {
+    value:
+      '{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.4} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.6} {sizes.8} {sizes.1} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.14} {sizes.16} {sizes.2} rgba(0, 0, 0, 0.4)',
+  },
+  insetLight: {
+    value:
+      'inset {sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), inset {sizes.0} {sizes.2} {sizes.1} rgba(30, 30, 30, 0.2), inset {sizes.0} {sizes.3} {sizes.2} rgba(30, 30, 30, 0.2)',
+  },
+  insetDark: {
+    value:
+      'inset {sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), inset {sizes.0} {sizes.2} {sizes.1} rgba(0, 0, 0, 0.4), inset {sizes.0} {sizes.3} {sizes.2} rgba(0, 0, 0, 0.4)',
+  },
+});

package/src/styles/primitives/sizes.ts

@@ -0,0 +1,86 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const numericSizes = {
+  '0': { value: '0' },
+  '1': { value: '0.0625rem' },
+  '2': { value: '0.125rem' },
+  '3': { value: '0.1875rem' },
+  '4': { value: '0.25rem' },
+  '5': { value: '0.3125rem' },
+  '6': { value: '0.375rem' },
+  '7': { value: '0.4375rem' },
+  '8': { value: '0.5rem' },
+  '9': { value: '0.5625rem' },
+  '10': { value: '0.625rem' },
+  '12': { value: '0.75rem' },
+  '14': { value: '0.875rem' },
+  '16': { value: '1rem' },
+  '20': { value: '1.25rem' },
+  '22': { value: '1.375rem' },
+  '24': { value: '1.5rem' },
+  '32': { value: '2rem' },
+  '40': { value: '2.5rem' },
+  '48': { value: '3rem' },
+  '56': { value: '3.5rem' },
+  '64': { value: '4rem' },
+  '72': { value: '4.5rem' },
+  '80': { value: '5rem' },
+  '88': { value: '5.5rem' },
+  '96': { value: '6rem' },
+  '104': { value: '6.5rem' },
+  '112': { value: '7rem' },
+  '120': { value: '7.5rem' },
+  '128': { value: '8rem' },
+  '136': { value: '8.5rem' },
+  '144': { value: '9rem' },
+  '152': { value: '9.5rem' },
+  '160': { value: '10rem' },
+  '168': { value: '10.5rem' },
+  '176': { value: '11rem' },
+  '184': { value: '11.5rem' },
+  '192': { value: '12rem' },
+  '200': { value: '12.5rem' },
+  '208': { value: '13rem' },
+  '216': { value: '13.5rem' },
+  '224': { value: '14rem' },
+  '232': { value: '14.5rem' },
+  '240': { value: '15rem' },
+  '248': { value: '15.5rem' },
+  '256': { value: '16rem' },
+  '264': { value: '16.5rem' },
+  '272': { value: '17rem' },
+  '280': { value: '17.5rem' },
+};
+
+export const utilitySizes = {
+  full: { value: '100%' },
+  half: { value: '50%' },
+  min: { value: 'min-content' },
+  max: { value: 'max-content' },
+  fit: { value: 'fit-content' },
+  prose: { value: '65ch' },
+  auto: { value: 'auto' },
+};
+
+// Container size tokens for the sizes scale (with value wrappers)
+export const containerSizeTokens = {
+  '2xs': { value: '16rem' }, // 256px
+  xs: { value: '20rem' }, // 320px
+  sm: { value: '24rem' }, // 384px
+  md: { value: '28rem' }, // 448px
+  lg: { value: '32rem' }, // 512px
+  xl: { value: '36rem' }, // 576px
+  '2xl': { value: '42rem' }, // 672px
+  '3xl': { value: '48rem' }, // 768px
+  '4xl': { value: '56rem' }, // 896px
+  '5xl': { value: '64rem' }, // 1024px
+  '6xl': { value: '72rem' }, // 1152px
+  '7xl': { value: '80rem' }, // 1280px
+  '8xl': { value: '90rem' }, // 1440px
+};
+
+export const sizes = defineTokens.sizes({
+  ...numericSizes,
+  ...utilitySizes,
+  ...containerSizeTokens,
+});

package/src/styles/primitives/spacings.ts

@@ -0,0 +1,7 @@
+import { defineTokens } from '@pandacss/dev';
+import { numericSizes, utilitySizes } from './sizes';
+
+export const spacing = defineTokens.spacing({
+  ...numericSizes,
+  ...utilitySizes,
+});