oddsgate-ds 1.0.61 → 1.0.63

package/dist/esm/types/styles/variables.d.ts

@@ -23,7 +23,7 @@ export declare const spacesNegative: Record<string, string>;
 export declare const typography: Record<string, Record<string, unknown>>;
 export declare const radius: Record<string, string>;
 export declare const shadows: Record<string, string>;
-export declare const zIndexes: Record<string, string>;
+export declare const zIndexes: Record<number, number>;
 export declare const grid_conf: {
     gridSize: number;
     gutter: number;

package/dist/types.d.ts

@@ -28,7 +28,7 @@ declare const spacesNegative: Record<string, string>;
 declare const typography: Record<string, Record<string, unknown>>;
 declare const radius: Record<string, string>;
 declare const shadows: Record<string, string>;
-declare const zIndexes: Record<string, string>;
+declare const zIndexes: Record<number, number>;
 declare const grid_conf: {
     gridSize: number;
     gutter: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.61",
+  "version": "1.0.63",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/atoms/Button/Button.theme.ts

@@ -71,32 +71,6 @@ export const StyledButton = styled.a<IButtonSC>`
               }
             }
           `;
-      case "secondary":
-        return css`
-          ${fontSize('h5')};
-          font-weight: 700;
-          text-transform:uppercase;
-          padding: 0.8rem 1.6rem;
-          border-radius: 50px;
-
-          ${props.$mode === "light" ? `
-            color: ${colors.primary50};
-            background-color: ${colors.secondary50};
-
-            &:hover{
-              color: ${colors.secondary50};
-              background-color: ${colors.primary50};
-            }
-            ` : `
-            color: ${colors.secondary50};
-            background-color: ${colors.primary50};
-
-            &:hover{
-              color: ${colors.primary50};
-              background-color: ${colors.secondary50};
-            }
-          `}
-        `;
       case "link":
         return css`
             ${fontSize('h5')};

package/src/components/molecules/BlogCard/BlogCard.component.tsx

@@ -28,14 +28,14 @@ const BlogCard = ({
         </>
       }
     >
-      <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis'}>
+      <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis mt-4'}>
         {title}
       </Heading>
-      <Heading tag={'span'} size={'captions'} className={'textEllipsis mt-2'}>
+      <Heading tag={'span'} size={'captions'} className={'textEllipsis mt-3'}>
         {description}
       </Heading>
       {date && (
-        <RichText tag={'p'} className="fw-bold mt-3">
+        <RichText tag={'p'} className="fw-bold mt-4">
           {date}
         </RichText>
       )}

package/src/components/molecules/BlogCard/BlogCard.theme.ts

@@ -4,12 +4,14 @@ import styled, { css } from 'styled-components';
 import Card from '../Card/Card.component';
 import { IBlogCard } from './BlogCard.interface';
 import { StyledChip } from '@/components/atoms/Chip/Chip.theme';
+import { variables } from '@/index';
 
 export const StyledBlogCard = styled(Card) <IBlogCard>`
   padding: 1rem;
+  color: ${colors.secondary50};
   background-color: ${colors.primary50};
   border-radius: ${radius.sm};
-
+  text-align: center;
 
   ${StyledChip}{
     position: absolute;
@@ -22,11 +24,14 @@ export const StyledBlogCard = styled(Card) <IBlogCard>`
 
   }
 
-
   &:hover{
     & figcaption{
 
     }
   }
+
+  @media only screen and (min-width: ${variables.responsiveMedia}) {
+    text-align:left;
+  }
 `;
 

package/src/components/molecules/EventsCard/EventsCard.theme.ts

@@ -16,7 +16,6 @@ export const StyledEventsCard = styled(Card) <IEventsCard>`
     margin-top: 1rem;
   }
 
-
   &:hover{
 
   }

package/src/components/molecules/NewsCard/NewsCard.component.tsx

@@ -24,11 +24,14 @@ const NewsCard = ({
       }
     >
       {category && <Chip variant='light' className='mb-5'>{category}</Chip>}
-      <Heading tag={'h3'} size={variant === "featured" ? "h3" : 'h4'} className={'fw-bold textEllipsis'}>
+      <Heading tag={'h3'} size={variant === "featured" ? "h3" : 'h4'} className={'fw-bold textEllipsis mt-4'}>
         {title}
       </Heading>
+      <Heading tag={'span'} size={'captions'} className={'textEllipsis mt-3'}>
+        {description}
+      </Heading>
       {date && (
-        <Heading tag={'span'} size={variant === "featured" ? "h5" : 'texts'} className={'fw-bold mt-3'}>
+        <Heading tag={'span'} size={variant === "featured" ? "h5" : 'texts'} className={'fw-bold mt-4'}>
           {date}
         </Heading>
       )}

package/src/components/molecules/NewsCard/NewsCard.theme.ts

@@ -4,13 +4,14 @@ import styled, { css } from 'styled-components';
 import Card from '../Card/Card.component';
 import { INewsCard } from './NewsCard.interface';
 import { StyledChip } from '@/components/atoms/Chip/Chip.theme';
+import { variables } from '@/index';
 
 export const StyledNewsCard = styled(Card) <INewsCard>`
   padding: 1rem;
   color: ${colors.secondary50};
   background-color: ${colors.third10};
   border-radius: ${radius.sm};
-
+  text-align:center;
 
   ${StyledChip}{
     position: absolute;
@@ -62,5 +63,10 @@ export const StyledNewsCard = styled(Card) <INewsCard>`
 
     }
   }
+
+
+  @media only screen and (min-width: ${variables.responsiveMedia}) {
+    text-align:left;
+  }
 `;
 

package/src/styles/Global.ts

@@ -222,7 +222,7 @@ const GlobalStyles = createGlobalStyle`
 
     background: var(--color-secondary-70);
 
-    z-index: ${zIndexes.progress};
+    z-index: 200;
 
     transition: all 0.1s $ease-out-expo;
   }
@@ -239,7 +239,7 @@ const GlobalStyles = createGlobalStyle`
     flex-flow: row wrap;
     min-height: 100%;
 
-    z-index: ${zIndexes.content};
+    z-index: 96;
     transition: all 1.3s $ease-out-expo;
   }
 
@@ -268,7 +268,7 @@ const GlobalStyles = createGlobalStyle`
     border-radius: 50px;
 
     transform: translateX(-50%);
-    z-index: ${zIndexes.preloader};
+    z-index: 96;
   }
 
   .textEllipsis{

package/src/styles/utilities.ts

@@ -7,7 +7,8 @@ import {
   shadows,
   spaces,
   spacesNegative,
-  typography
+  typography,
+  zIndexes
 } from './variables';
 
 export const fontSize = (typo: string) => {
@@ -129,7 +130,8 @@ export const utilities: {
       between: "space-between",
       around: "space-around",
       evenly: "space-evenly",
-    }
+    },
+    important: true,
   },
   "align-items": {
     responsive: true,
@@ -140,7 +142,8 @@ export const utilities: {
       center: "center",
       baseline: "baseline",
       stretch: "stretch",
-    }
+    },
+    important: true,
   },
   "align-content": {
     responsive: true,
@@ -152,7 +155,8 @@ export const utilities: {
       between: "space-between",
       around: "space-around",
       stretch: "stretch",
-    }
+    },
+    important: true,
   },
   "align-self": {
     responsive: true,
@@ -164,7 +168,8 @@ export const utilities: {
       center: "center",
       baseline: "baseline",
       stretch: "stretch",
-    }
+    },
+    important: true,
   },
   "order": {
     responsive: true,
@@ -312,6 +317,11 @@ export const utilities: {
     class: "radius",
     values: radius
   },
+  "zIndex": {
+    property: "z-index",
+    class: "zIndex",
+    values: zIndexes
+  },
 };
 
 export function generateUtilities(utility: string, breakpoint: string): string {

package/src/styles/variables.ts

@@ -146,12 +146,12 @@ export const shadows = <Record<string, string>>{
   md: '10px 30px 30px rgba(0, 78, 210, 0.05)',
   lg: '10px 40px 40px rgba(0, 78, 210, 0.07)',
 }
-export const zIndexes = <Record<string, string>>{
-  progress: '200',
-  modal: '100',
-  content: '99',
-  preloader: '96',
-  linker: '95'
+export const zIndexes = <Record<number, number>>{
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5
 }
 export const grid_conf: {
   gridSize: number,