@syscore/ui-library 1.4.0 → 1.5.0

package/client/global.css

@@ -758,49 +758,49 @@ layer(base);
  * These variables are used by Tailwind CSS and should be expressed as HSL values.
  */
 :root {
-    --background: 0 0% 100%;
-    --foreground: 230 15% 12%;
+  --background: 0 0% 100%;
+  --foreground: 230 15% 12%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 230 15% 12%;
+  --card: 0 0% 100%;
+  --card-foreground: 230 15% 12%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 230 15% 12%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 230 15% 12%;
 
-    --primary: 190 84% 29%;
-    --primary-foreground: 210 40% 98%;
+  --primary: 190 84% 29%;
+  --primary-foreground: 210 40% 98%;
 
-    --secondary: 252 100% 97%;
-    --secondary-foreground: 255 35% 20%;
+  --secondary: 252 100% 97%;
+  --secondary-foreground: 255 35% 20%;
 
-    --muted: 240 33% 98%;
-    --muted-foreground: 230 12% 40%;
+  --muted: 240 33% 98%;
+  --muted-foreground: 230 12% 40%;
 
-    --accent: 255 85% 55%;
-    --accent-foreground: 210 40% 98%;
+  --accent: 255 85% 55%;
+  --accent-foreground: 210 40% 98%;
 
-    --destructive: 0 72% 51%;
-    --destructive-foreground: 210 40% 98%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 210 40% 98%;
 
-    --border: 240 13% 92%;
-    --input: 240 13% 92%;
-    --ring: 255 85% 55%;
+  --border: 240 13% 92%;
+  --input: 240 13% 92%;
+  --ring: 255 85% 55%;
 
-    --radius: 0.625rem;
+  --radius: 0.625rem;
 
-    /* Utility colors */
-    --white: 0 0% 100%;
-    --black: 0 0% 0%;
-    --coolGrey-400: 225 7% 35%;
+  /* Utility colors */
+  --white: 0 0% 100%;
+  --black: 0 0% 0%;
+  --coolGrey-400: 225 7% 35%;
 
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
 }
 
 .dark {
@@ -1287,7 +1287,9 @@ body {
   background-color: var(--color-white, #fff);
   padding: 1.5rem;
   gap: 1.5rem;
-  transition: transform 200ms ease-in-out, border-color 200ms ease-in-out;
+  transition:
+    transform 200ms ease-in-out,
+    border-color 200ms ease-in-out;
   will-change: transform;
 }
 
@@ -6771,3 +6773,152 @@ body {
   text-decoration-thickness: 0.75px;
   text-underline-offset: 2px;
 }
+
+/* Standard Table Styles */
+.standard-table {
+  border: 1px solid var(--color-blue-200, #cbe0f1);
+  border-radius: var(--radius-lg, 12px);
+  overflow: hidden;
+}
+
+.standard-table-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-blue-50, #fbfdfe);
+}
+
+.standard-table-header__title {
+  /* Uses body-large utility */
+  color: var(--color-cyan-800, #0f748a);
+  font-weight: 600;
+}
+
+.standard-table-row {
+  border-bottom: 1px solid var(--color-blue-200, #cbe0f1);
+}
+
+.standard-table-row:last-child {
+  border-bottom: 0;
+}
+
+.standard-table-row-header {
+  height: 5rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  background-color: var(--color-blue-50, #fbfdfe);
+  transition: background-color 0.2s ease-in-out;
+  cursor: pointer;
+}
+
+.standard-table-row-header:hover {
+  background-color: var(--color-gray-50, #f9f9fa);
+}
+
+.standard-table-trigger {
+  background-color: transparent;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.standard-table-trigger:hover {
+  background-color: rgba(214, 244, 251, 0.5); /* cyan-100/50 */
+}
+
+.standard-table-content {
+  overflow: hidden;
+  background-color: var(--color-white, #fff);
+  border-top: 1px solid var(--color-blue-200, #cbe0f1);
+}
+
+.standard-table-content__inner {
+  display: flex;
+  flex-direction: column;
+}
+
+.standard-table-content__inner > * {
+  border-bottom: 1px solid var(--color-blue-200, #cbe0f1);
+}
+
+.standard-table-content__inner > *:last-child {
+  border-bottom: 0;
+}
+
+.standard-table-list-row {
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  transition: background-color 0.2s ease-in-out;
+  cursor: pointer;
+}
+
+.standard-table-list-row--default {
+  background-color: var(--color-blue-50, #fbfdfe);
+}
+
+.standard-table-list-row--default:hover {
+  background-color: var(--color-gray-50, #f9f9fa);
+}
+
+.standard-table-list-row--nested {
+  background-color: var(--color-white, #fff);
+}
+
+.standard-table-list-row--nested:hover {
+  background-color: var(--color-gray-50, #f9f9fa);
+}
+
+.standard-table-list-row__title {
+  font-weight: 500;
+  flex: 1;
+  text-align: left;
+}
+
+.standard-table-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* PageHeader Styles */
+.page-header {
+  margin-bottom: 1.5rem;
+}
+
+.page-header-top-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+  min-height: 52px;
+}
+
+.page-header-left-content {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.page-header-title {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  min-height: 32px;
+}
+
+.page-header-title:last-child {
+  margin-bottom: 0;
+}
+
+.page-header-description {
+  /* Uses body-large utility */
+  max-width: 680px;
+}