oddsgate-ds 1.0.169 → 1.0.171

package/src/styles/variables.ts

@@ -1,180 +1,180 @@
-export const pxToRem = (size: number) => {
-  return (size / 16) * 1 + 'rem'
-}
-
-export const fontName = "MD Nichrome"
-export const alternativeFont = "Epilogue";
-
-export const gutter = pxToRem(8); //needs to be in this file
-
-export const desktop_width: number = 1620; //container size of design on desktop
-export const tablet_width: number = 768; //container size of design on tablet
-export const mobile_width: number = 375; //container size of design on mobile
-export const responsiveMedia = "769px"; //container size of design on mobile
-export const responsiveMediaMax = "768px"; //mobile media value for bootstrap -> use this for max-width media queries
-export const mobileMedia = "360px"; //mobile media value
-
-export const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";
-
-export type IBreakpoints = {
-  $xs?: string,
-  $sm?: string,
-  $md?: string,
-  $lg?: string,
-  $xl?: string,
-  $xxl?: string,
-}
-
-export const colors = <Record<string, string>>{
-  // Defaults
-  white: '#fff',
-  black: '#000',
-  transparent: "transparent",
-
-  // Gray
-  gray10: '#FDFDF1',
-  gray20: '#FFFECC',
-  gray50: '#FFFECC',
-  gray70: '#82816C',
-  gray90: '#82816C',
-
-  primary50: '#FF4552',
-
-  secondary10: '#FDFDF1',
-  secondary50: '#FFFECC',
-
-  third10: '#440E3F',
-  third50: '#33052F',
-
-  // Feedback
-  warning: '#ea9a1a',
-  success: '#00FFD2',
-  error: '#E91101',
-};
-
-export const gradients = <Record<string, string>>{
-  // Defaults
-  primary: 'linear-gradient(to bottom, var(--color-secondary50) 0%, var(--color-secondary50) 50%, var(--color-third50) 50%, var(--color-third50) 100%)',
-};
-
-
-export const spaces = <Record<string, string>>{
-  0: '0',
-  1: pxToRem(4),
-  2: pxToRem(8),
-  3: pxToRem(12),
-  4: pxToRem(16),
-  5: pxToRem(20),
-  6: pxToRem(28),
-  7: pxToRem(36),
-  8: pxToRem(48),
-  9: pxToRem(64),
-  10: pxToRem(88),
-  11: pxToRem(120),
-}
-export const spacesNegative = <Record<string, string>>{
-  0: '0',
-  1: pxToRem(-4),
-  2: pxToRem(-8),
-  3: pxToRem(-12),
-  4: pxToRem(-20),
-  5: pxToRem(-28),
-  6: pxToRem(-36),
-  7: pxToRem(-48),
-  8: pxToRem(-64),
-  9: pxToRem(-88),
-  10: pxToRem(-120),
-}
-
-//if responsive is not needed for a size just set the size as px instead of rem
-export const typography = <Record<string, Record<string, unknown>>>{
-  display: {
-    size: "250px",
-    sizeMob: "64px",
-    height: 0.9,
-  },
-  h1: {
-    size: "120px",
-    sizeMob: "48px",
-    height: 0.9,
-  },
-  h2: {
-    size: "80px",
-    sizeMob: "36px",
-    height: 1.2,
-  },
-  h3: {
-    size: "48px",
-    sizeMob: "24px",
-    height: 1.2,
-  },
-  h4: {
-    size: "36px",
-    sizeMob: "20px",
-    height: 1.4,
-  },
-  h5: {
-    size: "24px",
-    sizeMob: "18px",
-    height: 1.4,
-  },
-  h6: {
-    size: "18px",
-    sizeMob: "16px",
-    height: 1.4,
-  },
-  texts: {
-    size: "18px",
-    sizeMob: "16px",
-    height: 1.6,
-  },
-  captions: {
-    size: "16px",
-    sizeMob: "13px",
-    height: 1.2,
-  },
-};
-
-export const radius = <Record<string, string>>{
-  sm: '12px',
-  md: '24px',
-  lg: '48px',
-  rounded: '100px',
-}
-export const shadows = <Record<string, string>>{
-  sm: '10px 20px 20px rgba(0, 78, 210, 0.03)',
-  md: '10px 30px 30px rgba(0, 78, 210, 0.05)',
-  lg: '10px 40px 40px rgba(0, 78, 210, 0.07)',
-}
-export const zIndexes = <Record<number, number>>{
-  1: 1,
-  2: 2,
-  3: 3,
-  4: 4,
-  5: 5
-}
-export const grid_conf: {
-  gridSize: number,
-  gutter: number,
-  mediaQuery: string,
-  container: IBreakpoints,
-  breakpoints: IBreakpoints
-} = {
-  gridSize: 12,
-  gutter: 16,
-  mediaQuery: 'only screen',
-  container: {
-    $sm: "960px",
-    $md: "1140px",
-    $lg: "1320px",
-    $xl: "1560px",
-    $xxl: "1720px"
-  },
-  breakpoints: {
-    $xs: "",
-    $sm: "576px",
-    $md: "769px",
-    $lg: "980px",
-    $xl: "1280px"
-  }
-}
+export const pxToRem = (size: number) => {
+  return (size / 16) * 1 + 'rem'
+}
+
+export const fontName = "MD Nichrome"
+export const alternativeFont = "Epilogue";
+
+export const gutter = pxToRem(8); //needs to be in this file
+
+export const desktop_width: number = 1620; //container size of design on desktop
+export const tablet_width: number = 768; //container size of design on tablet
+export const mobile_width: number = 375; //container size of design on mobile
+export const responsiveMedia = "769px"; //container size of design on mobile
+export const responsiveMediaMax = "768px"; //mobile media value for bootstrap -> use this for max-width media queries
+export const mobileMedia = "360px"; //mobile media value
+
+export const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";
+
+export type IBreakpoints = {
+  $xs?: string,
+  $sm?: string,
+  $md?: string,
+  $lg?: string,
+  $xl?: string,
+  $xxl?: string,
+}
+
+export const colors = <Record<string, string>>{
+  // Defaults
+  white: '#fff',
+  black: '#000',
+  transparent: "transparent",
+
+  // Gray
+  gray10: '#FDFDF1',
+  gray20: '#FFFECC',
+  gray50: '#FFFECC',
+  gray70: '#82816C',
+  gray90: '#82816C',
+
+  primary50: '#FF4552',
+
+  secondary10: '#FDFDF1',
+  secondary50: '#FFFECC',
+
+  third10: '#440E3F',
+  third50: '#33052F',
+
+  // Feedback
+  warning: '#ea9a1a',
+  success: '#00FFD2',
+  error: '#E91101',
+};
+
+export const gradients = <Record<string, string>>{
+  // Defaults
+  primary: 'linear-gradient(to bottom, var(--color-secondary50) 0%, var(--color-secondary50) 50%, var(--color-third50) 50%, var(--color-third50) 100%)',
+};
+
+
+export const spaces = <Record<string, string>>{
+  0: '0',
+  1: pxToRem(4),
+  2: pxToRem(8),
+  3: pxToRem(12),
+  4: pxToRem(16),
+  5: pxToRem(20),
+  6: pxToRem(28),
+  7: pxToRem(36),
+  8: pxToRem(48),
+  9: pxToRem(64),
+  10: pxToRem(88),
+  11: pxToRem(120),
+}
+export const spacesNegative = <Record<string, string>>{
+  0: '0',
+  1: pxToRem(-4),
+  2: pxToRem(-8),
+  3: pxToRem(-12),
+  4: pxToRem(-20),
+  5: pxToRem(-28),
+  6: pxToRem(-36),
+  7: pxToRem(-48),
+  8: pxToRem(-64),
+  9: pxToRem(-88),
+  10: pxToRem(-120),
+}
+
+//if responsive is not needed for a size just set the size as px instead of rem
+export const typography = <Record<string, Record<string, unknown>>>{
+  display: {
+    size: "250px",
+    sizeMob: "64px",
+    height: 0.9,
+  },
+  h1: {
+    size: "120px",
+    sizeMob: "48px",
+    height: 0.9,
+  },
+  h2: {
+    size: "80px",
+    sizeMob: "36px",
+    height: 1.2,
+  },
+  h3: {
+    size: "48px",
+    sizeMob: "24px",
+    height: 1.2,
+  },
+  h4: {
+    size: "36px",
+    sizeMob: "20px",
+    height: 1.4,
+  },
+  h5: {
+    size: "24px",
+    sizeMob: "18px",
+    height: 1.4,
+  },
+  h6: {
+    size: "18px",
+    sizeMob: "16px",
+    height: 1.4,
+  },
+  texts: {
+    size: "18px",
+    sizeMob: "16px",
+    height: 1.6,
+  },
+  captions: {
+    size: "16px",
+    sizeMob: "13px",
+    height: 1.2,
+  },
+};
+
+export const radius = <Record<string, string>>{
+  sm: '12px',
+  md: '24px',
+  lg: '48px',
+  rounded: '100px',
+}
+export const shadows = <Record<string, string>>{
+  sm: '10px 20px 20px rgba(0, 78, 210, 0.03)',
+  md: '10px 30px 30px rgba(0, 78, 210, 0.05)',
+  lg: '10px 40px 40px rgba(0, 78, 210, 0.07)',
+}
+export const zIndexes = <Record<number, number>>{
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5
+}
+export const grid_conf: {
+  gridSize: number,
+  gutter: number,
+  mediaQuery: string,
+  container: IBreakpoints,
+  breakpoints: IBreakpoints
+} = {
+  gridSize: 12,
+  gutter: 16,
+  mediaQuery: 'only screen',
+  container: {
+    $sm: "960px",
+    $md: "1140px",
+    $lg: "1320px",
+    $xl: "1560px",
+    $xxl: "1720px"
+  },
+  breakpoints: {
+    $xs: "",
+    $sm: "576px",
+    $md: "769px",
+    $lg: "980px",
+    $xl: "1280px"
+  }
+}

package/tsconfig.json

@@ -1,31 +1,31 @@
-{
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "jsx": "react",
-    "module": "ESNext",
-    "declaration": true,
-    "declarationDir": "dist/types",
-    "noImplicitAny": false,
-    "sourceMap": true,
-    "outDir": "dist",
-    "moduleResolution": "node",
-    "emitDeclarationOnly": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "preserveSymlinks": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["**/*"],
-  "exclude": [
-    "dist",
-    "node_modules",
-    "storybook-static",
-    "src/**/*.test.tsx",
-    "src/**/*.stories.tsx"
-  ]
-}
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "module": "ESNext",
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "noImplicitAny": false,
+    "sourceMap": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "emitDeclarationOnly": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "preserveSymlinks": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["**/*"],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "storybook-static",
+    "src/**/*.test.tsx",
+    "src/**/*.stories.tsx"
+  ]
+}