dhre-component-lib 0.0.9 → 0.1.0

package/src/components/index.ts

@@ -0,0 +1,15 @@
+export { default as Button } from "./Button";
+export { default as Avatar } from "./Avatar";
+export { default as Badge } from "./Badge";
+export { default as BreadCrumb } from "./BreadCrumb";
+export { default as Checkbox } from "./Checkbox";
+export { default as CircularProgress } from "./CircularProgress";
+export { default as Divider } from "./Divider";
+export { default as Link } from "./Link";
+export { default as Progress } from "./Progress";
+export { default as RadioButton } from "./RadioButton";
+export { default as InputTextField } from "./InputTextField";
+export { default } from "./PdfView";
+export { default as Directions } from "./Map/Directions";
+export { default as GoogleMap } from "./Map/GoogleMap";
+export { default as OtpInput } from "./OtpInput/OtpInput";

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/theme/Typography/typography.scss

@@ -0,0 +1,117 @@
+$bold-weight: 700;
+$semi-bold-weight: 400;
+$medium-weight: 300;
+
+
+$font-sizes: (
+  'H1': 40px,
+  'H2': 36px,
+  'H3': 32px,
+  'H4': 26px,
+  'H5': 24px,
+  'H6': 22px,
+  'H7': 20px,
+  'H8': 18px,
+  'B1':20px,
+  'B2':18px,
+  'B3':16px,
+  'B4':14px,
+  'L1':14px,
+  'L2':12px,
+  'L3':10px,
+);
+
+$line-heights: (
+  'H1': 56px,
+  'H2': 50.4px,
+  'H3': 44.8px,
+  'H4': 36.4px,
+  'H5': 33.6px,
+  'H6': 30.8px,
+  'H7': 28px,
+  'H8': 25.2px,
+  'B1': 28px,
+  'B2': 25.2px,
+  'B3': 22.4px,
+  'B4': 22.4px,
+  'L1': 19.6px,
+  'L2': 16.8px,
+  'L3': 14px,
+);
+
+@mixin font-style($type, $weight, $font-size-key) {
+  $font-size: map-get($font-sizes, $font-size-key);
+  $line-height: map-get($line-heights, $font-size-key);
+  
+  font-weight: $weight;
+  font-size: $font-size;
+  line-height: $line-height;
+}
+
+// H1 Styles
+.H1_BOLD { @include font-style('heading', $bold-weight, 'H1'); }
+.H1_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H1'); }
+.H1_MEDIUM { @include font-style('heading', $medium-weight, 'H1'); }
+
+// H2 Styles
+.H2_BOLD { @include font-style('heading', $bold-weight, 'H2'); }
+.H2_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H2'); }
+.H2_MEDIUM { @include font-style('heading', $medium-weight, 'H2'); }
+
+// H3 Styles
+.H3_BOLD { @include font-style('heading', $bold-weight, 'H3'); }
+.H3_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H3'); }
+.H3_MEDIUM { @include font-style('heading', $medium-weight, 'H3'); }
+
+// H4 Styles
+.H4_BOLD { @include font-style('heading', $bold-weight, 'H4'); }
+.H4_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H4'); }
+.H4_MEDIUM { @include font-style('heading', $medium-weight, 'H4'); }
+
+// H5 Styles
+.H5_BOLD { @include font-style('heading', $bold-weight, 'H5'); }
+.H5_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H5'); }
+.H5_MEDIUM { @include font-style('heading', $medium-weight, 'H5'); }
+
+// H6 Styles
+.H6_BOLD { @include font-style('heading', $bold-weight, 'H6'); }
+.H6_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H6'); }
+.H6_MEDIUM { @include font-style('heading', $medium-weight, 'H6'); }
+
+// H7 Styles
+.H7_BOLD { @include font-style('heading', $bold-weight, 'H7'); }
+.H7_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H7'); }
+.H7_MEDIUM { @include font-style('heading', $medium-weight, 'H7'); }
+
+// H8 Styles
+.H8_BOLD { @include font-style('heading', $bold-weight, 'H8'); }
+.H8_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H8'); }
+.H8_MEDIUM { @include font-style('heading', $medium-weight, 'H8'); }
+
+// B1 Styles
+.B1_BOLD { @include font-style('body', $bold-weight, 'B1'); }
+.B1_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'B1'); }
+
+// B2 Styles
+.B2_BOLD { @include font-style('body', $bold-weight, 'B2'); }
+.B2_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'B2'); }
+
+// B3 Styles
+.B3_BOLD { @include font-style('body', $bold-weight, 'B3'); }
+.B3_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'B3'); }
+
+// B4 Styles
+.B4_BOLD { @include font-style('body', $bold-weight, 'B4'); }
+.B4_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'B4'); }
+
+// L1 Styles
+.L1_BOLD { @include font-style('body', $bold-weight, 'L1'); }
+.L1_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'L1'); }
+
+// L2 Styles
+.L2_BOLD { @include font-style('body', $bold-weight, 'L2'); }
+.L2_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'L2'); }
+
+// L3 Styles
+.L3_BOLD { @include font-style('body', $bold-weight, 'L3'); }
+.L3_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'L3'); }

package/src/theme/colors/colors.scss

@@ -0,0 +1,22 @@
+$surface-primary: #FFFFFF;
+$surface-secondary: #F5F5F5;
+$surface-static: #FFFFFF;
+$surface-brand-static: #D92D27;
+$surface-brand-transparent-static: #D92D3E33;
+$surface-disabled: #E1E1E1;
+$surface-inverted-transparent: #68686833;
+
+$content-primary: #000000;
+$content-secondary: #686868;
+$content-disabled: #A7A7A7;
+$content-inverted: #FFFFFF;
+$content-static: #FFFFFF;
+$content-secondary-static: #CECECE;
+
+$border-primary: #686868;
+$border-secondary: #A7A7A7;
+$border-disabled: #CECECE;
+$border-inverted: #000000;
+$border-brand-static: #D92D27;
+$border-static: #FFFFFF;
+$border-brand-danger: #EB0542;

package/src/theme/colors.ts

@@ -0,0 +1,3 @@
+// format: Color name: BRAND_800
+
+export const COLORS = {};

package/src/typings.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';