@dbcdk/react-components 0.0.3 → 0.0.5

package/dist/src/styles/styles.css

@@ -1,4 +1,6 @@
 @import './css-helper-classes/spacing.css';
+@import './css-helper-classes/flex.css';
+@import './css-helper-classes/typography.css';
 
 @font-face {
   font-family: 'Roboto';
@@ -25,8 +27,8 @@
 }
 
 body {
-  color: var(--color-text);
-  background-color: var(--color-background);
+  color: var(--color-fg-default);
+  background-color: var(--color-bg-page);
   --density: var(--density-comfortable);
 }
 
@@ -42,10 +44,73 @@ h3 {
   font-size: var(--font-size-lg);
 }
 
+h4 {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+}
+
 body.dbc-app {
   max-width: 1600px;
 }
 
+.dbc-table {
+  --card-label-width: 260px;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  tr + tr th,
+  tr + tr td {
+    padding-top: var(--spacing-xxs);
+  }
+
+  th {
+    width: 1%;
+    white-space: nowrap;
+    color: var(--color-fg-subtle);
+    font-weight: var(--font-weight-default);
+    padding-right: var(--spacing-lg);
+    vertical-align: top;
+    text-align: left;
+  }
+
+  td {
+    color: var(--color-fg-default);
+    vertical-align: top;
+    min-width: 0;
+  }
+
+  th {
+    max-width: var(--card-label-width);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.dbc-table--bordered {
+  width: auto;
+  border: 1px solid var(--color-border-default);
+}
+
+.dbc-table--bordered th,
+.dbc-table--bordered td {
+  border: 1px solid var(--color-border-default);
+  padding: var(--spacing-xs) var(--spacing-sm);
+}
+
+.dbc-table--bordered thead th {
+  background-color: var(--color-bg-surface);
+}
+
+.dbc-table--align-middle {
+  vertical-align: middle;
+  th {
+    vertical-align: middle;
+  }
+  td {
+    vertical-align: middle;
+  }
+}
+
 @media screen and (min-height: 400px) {
   .body.dbc-app {
     overflow: hidden;
@@ -55,10 +120,17 @@ body.dbc-app {
 .grow-container {
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  flex: 1;
   overflow: auto;
 }
 
+.hideScrollBar {
+  scrollbar-width: none; /* Firefox */
+}
+.hideScrollBar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
 /* Apply globally */
 ::-webkit-scrollbar {
   width: 10px; /* or thinner: 6px */
@@ -69,13 +141,13 @@ body.dbc-app {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--opac-bg-dark); /* neutral gray thumb */
+  background-color: var(--color-border-strong);
   border-radius: 4px; /* rounded for modern look */
-  border: 2px solid #f9fafb; /* creates padding effect */
+  border: 2px solid var(--color-bg-surface); /* creates padding effect */
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #9ca3af; /* darker gray on hover */
+  background-color: var(--color-fg-subtle);
 }
 
 .animate--expand {
@@ -87,9 +159,19 @@ body.dbc-app {
 }
 
 .fitContent {
-  white-space: nowrap;
-  width: 1%;
+  white-space: nowrap !important;
+  width: 1% !important;
+  min-width: unset !important;
+}
+
+.dbc-full-height {
+  height: 100%;
+}
+
+.dbc-offset-height {
+  transform: translateY(-8vh);
 }
+
 /* Animations */
 @keyframes expand {
   0% {
@@ -122,3 +204,14 @@ body.dbc-app {
   display: inline-block;
   animation: spin 2s linear infinite;
 }
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

package/dist/styles/css-helper-classes/flex.css

@@ -0,0 +1,97 @@
+.dbc-flex {
+  display: flex;
+}
+
+.dbc-flex-row {
+  flex-direction: row;
+}
+.dbc-flex-column {
+  flex-direction: column;
+}
+
+.dbc-flex-wrap {
+  flex-wrap: wrap;
+}
+.dbc-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.dbc-justify-start {
+  justify-content: flex-start;
+}
+.dbc-justify-center {
+  justify-content: center;
+}
+.dbc-justify-end {
+  justify-content: flex-end;
+}
+.dbc-justify-between {
+  justify-content: space-between;
+}
+.dbc-justify-around {
+  justify-content: space-around;
+}
+.dbc-justify-evenly {
+  justify-content: space-evenly;
+}
+
+.dbc-items-start {
+  align-items: flex-start;
+}
+.dbc-items-center {
+  align-items: center;
+}
+.dbc-items-end {
+  align-items: flex-end;
+}
+.dbc-items-stretch {
+  align-items: stretch;
+}
+
+.dbc-self-start {
+  align-self: flex-start;
+}
+.dbc-self-center {
+  align-self: center;
+}
+.dbc-self-end {
+  align-self: flex-end;
+}
+.dbc-self-stretch {
+  align-self: stretch;
+}
+
+.dbc-gap-xxs {
+  gap: var(--spacing-xxs);
+}
+.dbc-gap-xs {
+  gap: var(--spacing-xs);
+}
+.dbc-gap-sm {
+  gap: var(--spacing-sm);
+}
+.dbc-gap-md {
+  gap: var(--spacing-md);
+}
+.dbc-gap-lg {
+  gap: var(--spacing-lg);
+}
+.dbc-gap-xl {
+  gap: var(--spacing-xl);
+}
+
+.dbc-flex-grow {
+  flex-grow: 1;
+}
+.dbc-flex-shrink {
+  flex-shrink: 1;
+}
+.dbc-flex-none {
+  flex: none;
+}
+
+.dbc-flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/dist/styles/css-helper-classes/typography.css

@@ -0,0 +1,7 @@
+.dbc-muted-text {
+  color: var(--color-text-muted);
+}
+
+.dbc-strong-text {
+  font-weight: var(--font-weight-semibold);
+}

package/dist/styles/styles.css

@@ -1,4 +1,6 @@
 @import './css-helper-classes/spacing.css';
+@import './css-helper-classes/flex.css';
+@import './css-helper-classes/typography.css';
 
 @font-face {
   font-family: 'Roboto';
@@ -25,8 +27,8 @@
 }
 
 body {
-  color: var(--color-text);
-  background-color: var(--color-background);
+  color: var(--color-fg-default);
+  background-color: var(--color-bg-page);
   --density: var(--density-comfortable);
 }
 
@@ -42,10 +44,73 @@ h3 {
   font-size: var(--font-size-lg);
 }
 
+h4 {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+}
+
 body.dbc-app {
   max-width: 1600px;
 }
 
+.dbc-table {
+  --card-label-width: 260px;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  tr + tr th,
+  tr + tr td {
+    padding-top: var(--spacing-xxs);
+  }
+
+  th {
+    width: 1%;
+    white-space: nowrap;
+    color: var(--color-fg-subtle);
+    font-weight: var(--font-weight-default);
+    padding-right: var(--spacing-lg);
+    vertical-align: top;
+    text-align: left;
+  }
+
+  td {
+    color: var(--color-fg-default);
+    vertical-align: top;
+    min-width: 0;
+  }
+
+  th {
+    max-width: var(--card-label-width);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.dbc-table--bordered {
+  width: auto;
+  border: 1px solid var(--color-border-default);
+}
+
+.dbc-table--bordered th,
+.dbc-table--bordered td {
+  border: 1px solid var(--color-border-default);
+  padding: var(--spacing-xs) var(--spacing-sm);
+}
+
+.dbc-table--bordered thead th {
+  background-color: var(--color-bg-surface);
+}
+
+.dbc-table--align-middle {
+  vertical-align: middle;
+  th {
+    vertical-align: middle;
+  }
+  td {
+    vertical-align: middle;
+  }
+}
+
 @media screen and (min-height: 400px) {
   .body.dbc-app {
     overflow: hidden;
@@ -55,10 +120,17 @@ body.dbc-app {
 .grow-container {
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  flex: 1;
   overflow: auto;
 }
 
+.hideScrollBar {
+  scrollbar-width: none; /* Firefox */
+}
+.hideScrollBar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
 /* Apply globally */
 ::-webkit-scrollbar {
   width: 10px; /* or thinner: 6px */
@@ -69,13 +141,13 @@ body.dbc-app {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--opac-bg-dark); /* neutral gray thumb */
+  background-color: var(--color-border-strong);
   border-radius: 4px; /* rounded for modern look */
-  border: 2px solid #f9fafb; /* creates padding effect */
+  border: 2px solid var(--color-bg-surface); /* creates padding effect */
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #9ca3af; /* darker gray on hover */
+  background-color: var(--color-fg-subtle);
 }
 
 .animate--expand {
@@ -87,9 +159,19 @@ body.dbc-app {
 }
 
 .fitContent {
-  white-space: nowrap;
-  width: 1%;
+  white-space: nowrap !important;
+  width: 1% !important;
+  min-width: unset !important;
+}
+
+.dbc-full-height {
+  height: 100%;
+}
+
+.dbc-offset-height {
+  transform: translateY(-8vh);
 }
+
 /* Animations */
 @keyframes expand {
   0% {
@@ -122,3 +204,14 @@ body.dbc-app {
   display: inline-block;
   animation: spin 2s linear infinite;
 }
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}