dhre-component-lib 0.0.4 → 0.0.6

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/components/Badge/Badge.css

@@ -1,15 +0,0 @@
-.custom-badge-class {
-    display: inline-block;
-    padding: 6px 12px;
-    background-color: red;
-    color: white;
-    border-radius: 12px;
-    font-size: 14px;
-    text-align: center;
-    cursor: pointer;
-  }
-  
-  .custom-badge-class:hover {
-    background-color: darkred;
-  }
-  

package/src/components/BreadCrumb/Breadcrumb.css

@@ -1,21 +0,0 @@
-.custom-breadcrumb-class {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-  }
-  
-  .custom-breadcrumb-item {
-    color: blue;
-    cursor: pointer;
-    margin-right: 8px;
-  }
-  
-  .custom-breadcrumb-item:hover {
-    text-decoration: underline;
-  }
-  
-  .breadcrumb-separator {
-    margin: 0 8px;
-    color: grey;
-  }
-  

package/src/components/Button/Button.css

@@ -1,92 +0,0 @@
-/* Base button styling */
-.button {
-    padding: 8px 16px;
-    font-size: 14px;
-    border-radius: 4px;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
-  
-  /* Variants */
-  .button.text {
-    background-color: transparent;
-    color: inherit;
-  }
-  
-  .button.outlined {
-    background-color: transparent;
-    border: 2px solid currentColor;
-  }
-  
-  .button.contained {
-    background-color: currentColor;
-    color: #fff;
-  }
-  
-  /* Colors */
-  .button.primary {
-    color: #1976d2;
-  }
-  
-  .button.secondary {
-    color: #9c27b0;
-  }
-  
-  .button.success {
-    color: #4caf50;
-  }
-  
-  .button.error {
-    color: #f44336;
-  }
-  
-  .button.warning {
-    color: #ff9800;
-  }
-  
-  .button.info {
-    color: #2196f3;
-  }
-  
-  /* Sizes */
-  .button.small {
-    padding: 4px 8px;
-    font-size: 12px;
-  }
-  
-  .button.medium {
-    padding: 8px 16px;
-    font-size: 14px;
-  }
-  
-  .button.large {
-    padding: 12px 24px;
-    font-size: 16px;
-  }
-  
-  /* Hover effects for contained buttons */
-  .button.contained.primary:hover {
-    background-color: #1565c0;
-  }
-  
-  .button.contained.secondary:hover {
-    background-color: #7b1fa2;
-  }
-  
-  .button.contained.success:hover {
-    background-color: #388e3c;
-  }
-  
-  .button.contained.error:hover {
-    background-color: #d32f2f;
-  }
-  
-  .button.contained.warning:hover {
-    background-color: #f57c00;
-  }
-  
-  .button.contained.info:hover {
-    background-color: #1976d2;
-  }
-  

package/src/components/CircularProgress/CircularProgress.css

@@ -1,19 +0,0 @@
-.spinner {
-    border-style: solid;
-    border-radius: 50%;
-    border-color: transparent;
-    border-top-color: currentColor;
-    animation: spin 1s linear infinite;
-  }
-  
-  .spinner.primary { color: #007bff; }
-  .spinner.secondary { color: #6c757d; }
-  .spinner.error { color: #dc3545; }
-  .spinner.success { color: #28a745; }
-  .spinner.info { color: #17a2b8; }
-  .spinner.warning { color: #ffc107; }
-  
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }

package/src/components/PdfView/PdfView.css

@@ -1,70 +0,0 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .spinner {
-    border: 2px solid transparent;
-    border-radius: 50%;
-    border-top: 2px solid currentColor;
-    animation: spin 1s linear infinite;
-  }
-  
-  .spinner-inner {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-  }
-  
-  .error-text {
-    color: red;
-  }
-  
-  .button {
-    padding: 8px 16px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 16px;
-  }
-  
-  .button-text {
-    background: none;
-  }
-  
-  .button-outlined {
-    border: 1px solid currentColor;
-  }
-  
-  .button-contained {
-    background-color: currentColor;
-    color: white;
-  }
-  
-  .button-primary {
-    color: blue;
-  }
-  
-  .button-secondary {
-    color: gray;
-  }
-  
-  .button-small {
-    font-size: 12px;
-  }
-  
-  .button-medium {
-    font-size: 16px;
-  }
-  
-  .button-large {
-    font-size: 20px;
-  }
-  
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-  

package/src/components/Tooltip/Tooltip.css

@@ -1,38 +0,0 @@
-.tooltip-wrapper {
-    display: inline-block;
-    position: relative;
-    margin-right: 20px;
-  }
-  
-  .custom-tooltip-class {
-    position: absolute;
-    bottom: 125%; /* Position above the element */
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #333;
-    color: #fff;
-    padding: 5px 10px;
-    border-radius: 4px;
-    font-size: 14px;
-    white-space: nowrap;
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.2s ease-in-out;
-  }
-  
-  .tooltip-wrapper .custom-tooltip-class::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 5px;
-    border-style: solid;
-    border-color: #333 transparent transparent transparent;
-  }
-  
-  .hover-text {
-    color: blue;
-    cursor: pointer;
-  }
-