Added canvas theme for tableComponent in core component

src/components/table/_table.scss

@@ -0,0 +1,221 @@
+/* ===============Table================== */
+.cmp-adaptiveform-table {
+  color: $dark-gray;
+  font-size: $font-md;
+  margin: 1rem 0;
+}
+
+.cmp-adaptiveform-table__title {
+  font-size: $font-lg;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.cmp-adaptiveform-table__help-container {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.cmp-adaptiveform-table__questionmark {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9px;
+  background: url(./resources/images/question.svg) center center / cover no-repeat, $light-gray;
+  cursor: pointer;
+  position: absolute;
+  right: 20px;
+}
+
+.cmp-adaptiveform-table__help-container .cmp-adaptiveform-table__questionmark {
+  position: unset;
+  right: unset;
+}
+
+.cmp-adaptiveform-table__shortdescription {
+  font-size: $font-sm;
+  margin-top: $error-top-margin;
+}
+
+.cmp-adaptiveform-table__longdescription {
+  color: $dark-gray;
+  background-color: $very-light-gray;
+  font-size: $font-sm;
+  margin-top: $error-top-margin;
+  margin-bottom: 5px;
+  padding: 10px;
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.cmp-adaptiveform-table__widget {
+  display: table;
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid $silver;
+}
+
+.cmp-adaptiveform-table__head {
+  display: table-header-group;
+}
+
+.cmp-adaptiveform-table__body {
+  display: table-row-group;
+}
+
+/* ===============Table Header================== */
+.cmp-adaptiveform-tableheader {
+  display: table-row;
+}
+
+.cmp-adaptiveform-tablehead {
+  display: table-cell;
+  padding: 0.75rem;
+  border: 1px solid $silver;
+  text-align: left;
+  vertical-align: top;
+  background-color: $panel-bg-color;
+  font-weight: 600;
+}
+
+.cmp-adaptiveform-table__head .cmp-adaptiveform-tableheader:hover > .cmp-adaptiveform-tablehead {
+  background-color: $very-light-gray;
+}
+
+.cmp-adaptiveform-table__head .cmp-adaptiveform-tableheader > .cmp-adaptiveform-tablehead:hover {
+  filter: brightness(0.95);
+}
+
+/* ===============Table Row & Cell================== */
+.cmp-adaptiveform-tablerow {
+  display: table-row;
+}
+
+.cmp-adaptiveform-tablecell {
+  display: table-cell;
+  padding: 0.75rem;
+  border: 1px solid $silver;
+  text-align: left;
+  vertical-align: top;
+}
+
+.cmp-adaptiveform-table__body .cmp-adaptiveform-tablerow:hover > .cmp-adaptiveform-tablecell {
+  background-color: $wizard-bg-color;
+}
+
+.cmp-adaptiveform-table__body .cmp-adaptiveform-tablerow > .cmp-adaptiveform-tablecell:hover {
+  background-color: $very-light-gray;
+}
+
+/* ===============Table Row Controls (repeatable)================== */
+.cmp-adaptiveform-tablecell.cmp-adaptiveform-tablecell--with-row-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 0.5rem 0.75rem;
+  border: 1px solid $silver;
+  margin: -1px;
+}
+
+.cmp-adaptiveform-tablecell--with-row-controls > div:first-of-type {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.cmp-adaptiveform-tablerow__runtime-controls {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  align-self: center;
+  gap: 0.25rem;
+}
+
+.cmp-adaptiveform-tablerow__add-button,
+.cmp-adaptiveform-tablerow__remove-button {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 1.25rem 1.25rem;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid $focus-ring-color;
+    outline-offset: 2px;
+  }
+
+  &[data-cmp-visible="false"] {
+    display: none;
+  }
+}
+
+.cmp-adaptiveform-tablerow__add-button {
+  background-image: url(./resources/images/add-button.svg);
+}
+
+.cmp-adaptiveform-tablerow__remove-button {
+  background-image: url(./resources/images/remove-button.svg);
+}
+
+/* ===============Column Sorting================== */
+.cmp-adaptiveform-table__sort-header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.cmp-adaptiveform-table__sort-button {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  margin: 0;
+  border: 1px solid $silver;
+  border-radius: 2px;
+  background-color: $white;
+  background-image: url(./resources/images/sort-neutral.svg);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 18px 18px;
+  cursor: pointer;
+
+  &:hover,
+  &:focus-visible {
+    background-color: $very-light-gray;
+    outline: 2px solid $focus-ring-color;
+    outline-offset: 1px;
+  }
+
+  &.cmp-adaptiveform-table__sort-button--asc {
+    background-image: url(./resources/images/sort-asc.svg);
+  }
+
+  &.cmp-adaptiveform-table__sort-button--desc {
+    background-image: url(./resources/images/sort-desc.svg);
+  }
+}
+
+.cell-wrapper {
+  width: 80%;
+}
+
+/* ===============Responsive================== */
+@media (max-width: 768px) {
+  .cmp-adaptiveform-table__widget {
+    font-size: $font-sm;
+  }
+
+  .cmp-adaptiveform-tablecell,
+  .cmp-adaptiveform-tablehead {
+    padding: 0.5rem;
+  }
+}

src/theme.scss

@@ -45,3 +45,4 @@
 @import './components/scribble/_scribble.scss';
 @import './components/datetime/_datetime.scss';
 @import './components/imagechoice/_imagechoice.scss';
+@import './components/table/_table.scss';