@indico-data/design-system 2.1.3 → 2.3.0

package/lib/index.esm.css

@@ -1,5 +1,4 @@
 @import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
@@ -162,6 +161,14 @@
   --pf-info-color: var(--pf-gray-color);
 }
 
+:root {
+  --pf-icon-size-xs: 0.6rem;
+  --pf-icon-size-sm: 0.75rem;
+  --pf-icon-size-md: 1rem;
+  --pf-icon-size-lg: 1.5rem;
+  --pf-icon-size-xl: 2rem;
+}
+
 :root {
   --pf-border-thin: thin;
   --pf-border-sm: 1px;
@@ -236,56 +243,6 @@
   --pf-negative-margin-16: -64px;
 }
 
-.pf__drawer__wrapper {
-  color: #444444;
-  background-color: white;
-  box-sizing: border-box;
-  height: 100vh;
-  padding: 30px 4px 10px 4px;
-  transition: width 0.2s ease-in-out;
-  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-  width: 100%;
-}
-.pf__drawer__wrapper .pf__drawer__header__logo-text {
-  font-family: "Poppins", sans-serif;
-  font-weight: 600;
-}
-.pf__drawer__wrapper a:link {
-  color: #444444;
-}
-.pf__drawer__wrapper a {
-  color: #444444;
-  text-decoration: none;
-}
-.pf__drawer__wrapper .pf__drawer__header {
-  margin-bottom: 30px;
-  color: black;
-  display: flex;
-  align-items: center;
-  padding-left: 10px;
-  white-space: nowrap;
-}
-.pf__drawer__wrapper .pf__drawer__header .pf__drawer__header__text {
-  overflow: hidden;
-  transition: opacity 0.2s ease-in-out;
-}
-.pf__drawer__wrapper .pf__drawer__header span {
-  display: flex;
-  align-items: center;
-}
-.pf__drawer__wrapper .pf__drawer__header p {
-  font-size: 20px;
-  margin: 0 0 0 12px;
-}
-.pf__drawer__wrapper .pf__drawer__content {
-  height: calc(100% - 42px);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding-bottom: 10px;
-}
-
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
@@ -735,6 +692,140 @@
   background-color: var(--pf-button-outline-background-color);
 }
 
+.icon {
+  display: inline-block;
+}
+.icon--xs {
+  width: var(--pf-icon-size-xs);
+  height: var(--pf-icon-size-xs);
+  font-size: var(--pf-icon-size-xs);
+}
+.icon--sm {
+  width: var(--pf-icon-size-sm);
+  height: var(--pf-icon-size-sm);
+  font-size: var(--pf-icon-size-sm);
+}
+.icon--md {
+  width: var(--pf-icon-size-md);
+  height: var(--pf-icon-size-md);
+  font-size: var(--pf-icon-size-md);
+}
+.icon--lg {
+  width: var(--pf-icon-size-lg);
+  height: var(--pf-icon-size-lg);
+  font-size: var(--pf-icon-size-lg);
+}
+.icon--xl {
+  width: var(--pf-icon-size-xl);
+  height: var(--pf-icon-size-xl);
+  font-size: var(--pf-icon-size-xl);
+}
+
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-table-font-color: var(--pf-gray-color);
+  --pf-table-stripe-color: var(--pf-gray-color-100);
+}
+
+:root [data-theme=light] {
+  --pf-table-background-color: var(--pf-white-color);
+  --pf-table-stripe-color: var(--pf-gray-color-100);
+}
+
+:root [data-theme=dark] {
+  --pf-table-background-color: var(--pf-primary-color-700);
+  --pf-table-stripe-color: var(--pf-primary-color-400);
+}
+
+:root .table-loading,
+:root [data-theme=light] .table-loading,
+:root [data-theme=dark] .table-loading {
+  color: var(--pf-table-font-color);
+}
+:root .table-wrapper,
+:root [data-theme=light] .table-wrapper,
+:root [data-theme=dark] .table-wrapper {
+  background-color: var(--pf-table-background-color);
+  color: var(--pf-table-font-color);
+}
+:root .table-wrapper .rdt_Table,
+:root .table-wrapper .rdt_TableRow,
+:root .table-wrapper .rdt_TableCol,
+:root .table-wrapper .rdt_TableCol_Sortable,
+:root .table-wrapper .rdt_TableCell,
+:root .table-wrapper .rdt_TableHeader,
+:root .table-wrapper .rdt_TableFooter,
+:root .table-wrapper .rdt_TableHead,
+:root .table-wrapper .rdt_TableHeadRow,
+:root .table-wrapper .rdt_TableBody,
+:root .table-wrapper .rdt_ExpanderRow,
+:root .table-wrapper .rdt_Pagination,
+:root [data-theme=light] .table-wrapper .rdt_Table,
+:root [data-theme=light] .table-wrapper .rdt_TableRow,
+:root [data-theme=light] .table-wrapper .rdt_TableCol,
+:root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
+:root [data-theme=light] .table-wrapper .rdt_TableCell,
+:root [data-theme=light] .table-wrapper .rdt_TableHeader,
+:root [data-theme=light] .table-wrapper .rdt_TableFooter,
+:root [data-theme=light] .table-wrapper .rdt_TableHead,
+:root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
+:root [data-theme=light] .table-wrapper .rdt_TableBody,
+:root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
+:root [data-theme=light] .table-wrapper .rdt_Pagination,
+:root [data-theme=dark] .table-wrapper .rdt_Table,
+:root [data-theme=dark] .table-wrapper .rdt_TableRow,
+:root [data-theme=dark] .table-wrapper .rdt_TableCol,
+:root [data-theme=dark] .table-wrapper .rdt_TableCol_Sortable,
+:root [data-theme=dark] .table-wrapper .rdt_TableCell,
+:root [data-theme=dark] .table-wrapper .rdt_TableHeader,
+:root [data-theme=dark] .table-wrapper .rdt_TableFooter,
+:root [data-theme=dark] .table-wrapper .rdt_TableHead,
+:root [data-theme=dark] .table-wrapper .rdt_TableHeadRow,
+:root [data-theme=dark] .table-wrapper .rdt_TableBody,
+:root [data-theme=dark] .table-wrapper .rdt_ExpanderRow,
+:root [data-theme=dark] .table-wrapper .rdt_Pagination {
+  background-color: var(--pf-table-background-color);
+  color: var(--pf-table-font-color);
+}
+:root .table-wrapper button svg,
+:root [data-theme=light] .table-wrapper button svg,
+:root [data-theme=dark] .table-wrapper button svg {
+  fill: var(--pf-table-font-color);
+}
+:root .table-wrapper button:disabled svg,
+:root [data-theme=light] .table-wrapper button:disabled svg,
+:root [data-theme=dark] .table-wrapper button:disabled svg {
+  fill: var(--pf-gray-color-900);
+}
+:root .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
+:root [data-theme=light] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
+:root [data-theme=dark] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
+  background-color: var(--pf-table-stripe-color);
+}
+
+:root [data-theme=light] .table-wrapper .rdt_Table,
+:root [data-theme=light] .table-wrapper .rdt_TableRow,
+:root [data-theme=light] .table-wrapper .rdt_TableCol,
+:root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
+:root [data-theme=light] .table-wrapper .rdt_TableCell,
+:root [data-theme=light] .table-wrapper .rdt_TableHeader,
+:root [data-theme=light] .table-wrapper .rdt_TableFooter,
+:root [data-theme=light] .table-wrapper .rdt_TableHead,
+:root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
+:root [data-theme=light] .table-wrapper .rdt_TableBody,
+:root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
+:root [data-theme=light] .table-wrapper .rdt_Pagination {
+  background-color: var(--pf-table-background-color);
+  color: var(--pf-table-font-color);
+}
+:root [data-theme=light] .table-wrapper button svg {
+  fill: var(--pf-table-font-color);
+}
+:root [data-theme=light] .table-wrapper button:disabled svg {
+  fill: var(--pf-gray-color-300);
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;
@@ -3455,54 +3546,4 @@ p,
   100% {
     transform: rotate(360deg);
   }
-}
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
-.pf__drawer__wrapper {
-  color: #444444;
-  background-color: white;
-  box-sizing: border-box;
-  height: 100vh;
-  padding: 30px 4px 10px 4px;
-  transition: width 0.2s ease-in-out;
-  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-  width: 100%;
-}
-.pf__drawer__wrapper .pf__drawer__header__logo-text {
-  font-family: "Poppins", sans-serif;
-  font-weight: 600;
-}
-.pf__drawer__wrapper a:link {
-  color: #444444;
-}
-.pf__drawer__wrapper a {
-  color: #444444;
-  text-decoration: none;
-}
-.pf__drawer__wrapper .pf__drawer__header {
-  margin-bottom: 30px;
-  color: black;
-  display: flex;
-  align-items: center;
-  padding-left: 10px;
-  white-space: nowrap;
-}
-.pf__drawer__wrapper .pf__drawer__header .pf__drawer__header__text {
-  overflow: hidden;
-  transition: opacity 0.2s ease-in-out;
-}
-.pf__drawer__wrapper .pf__drawer__header span {
-  display: flex;
-  align-items: center;
-}
-.pf__drawer__wrapper .pf__drawer__header p {
-  font-size: 20px;
-  margin: 0 0 0 12px;
-}
-.pf__drawer__wrapper .pf__drawer__content {
-  height: calc(100% - 42px);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding-bottom: 10px;
 }