update: scss,nextjs,module (2 files)

frontends/nextjs/src/components/ui/organisms/data/Form.module.scss

@@ -0,0 +1,26 @@
+/* Form organism styles */
+
+.formItem {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.formLabel {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
+
+  &.error {
+    color: var(--color-error-main, #d32f2f);
+  }
+}
+
+.formHelperText {
+  margin-top: 2px;
+  font-size: 0.75rem;
+
+  &.error {
+    color: var(--color-error-main, #d32f2f);
+  }
+}

frontends/nextjs/src/components/ui/organisms/data/Table.module.scss

@@ -0,0 +1,53 @@
+/* Table organism styles */
+
+.tableContainer {
+  border: 1px solid var(--color-divider, rgba(0, 0, 0, 0.12));
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.tableHeader {
+  background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
+}
+
+.tableFooter {
+  background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
+}
+
+.tableRow {
+  &:last-child td,
+  &:last-child th {
+    border-bottom: 0;
+  }
+
+  &:hover {
+    background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
+  }
+}
+
+.tableHeadCell {
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+
+  &.clickable {
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
+    }
+  }
+}
+
+.tableCell {
+  font-size: 0.875rem;
+}
+
+.tableCaption {
+  caption-side: bottom;
+  padding: 16px;
+  color: inherit;
+  font-size: 0.875rem;
+}