1 files changed, 333 insertions, 0 deletions
diff --git a/toolkit/themes/shared/design-system/tokens-table.css b/toolkit/themes/shared/design-system/tokens-table.css
new file mode 100644
index 0000000000..54f01a962a
--- /dev/null
+++ b/toolkit/themes/shared/design-system/tokens-table.css
@@ -0,0 +1,333 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:host {
+  --table-border: 2px solid var(--color-gray-50);
+  --table-background-color: color-mix(in srgb,
+      var(--color-gray-50) 20%,
+      transparent);
+}
+
+/* Wrapper and filter styles */
+
+.page-wrapper {
+  margin: 3rem;
+}
+
+.filters-wrapper {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--space-large);
+  background: var(--background-color-canvas);
+  padding: var(--space-small);
+}
+
+fieldset {
+  flex: 1;
+  margin: 0;
+  padding-block: var(--space-small);
+  height: var(--input-text-min-height);
+  box-sizing: border-box;
+  gap: var(--space-medium);
+}
+
+fieldset,
+.search-wrapper {
+  border: 1px solid var(--border-color-interactive);
+  border-radius: var(--border-radius-small);
+  height: var(--input-text-min-height);
+  display: inline-flex;
+  align-items: center;
+}
+
+.search-wrapper {
+  position: relative;
+}
+
+.search-icon,
+.clear-icon {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: var(--size-item-small);
+  fill: currentColor;
+  -moz-context-properties: fill;
+  height: var(--size-item-small);
+  width: var(--size-item-small);
+  position: absolute;
+  inset-block: 0;
+  margin: auto 0;
+  padding: var(--space-xxsmall);
+}
+
+.search-icon {
+  background-image: url(chrome://global/skin/icons/search-textbox.svg);
+  inset-inline-start: var(--space-small);
+}
+
+.clear-icon {
+  background-image: url(chrome://global/skin/icons/close-12.svg);
+  inset-inline-end: var(--space-small);
+}
+
+input[type="search"] {
+  border: none;
+  padding-block: var(--space-small);
+  padding-inline: var(--space-xxlarge);
+  border-radius: var(--border-radius-small);
+}
+
+/* Table styles */
+
+.table-wrapper {
+  box-sizing: border-box;
+  border-radius: var(--border-radius-small);
+  border: var(--table-border);
+  margin-block: 1em;
+  width: 100%;
+
+  & > summary {
+    list-style-image: url("chrome://global/skin/icons/arrow-down.svg");
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    &::before {
+      content: "";
+      background-image: url("chrome://global/skin/icons/arrow-down.svg");
+      background-position: center;
+      background-repeat: no-repeat;
+      height: 16px;
+      width: 16px;
+      position: absolute;
+      inset-inline-start: 8px;
+    }
+  }
+
+  &[open] > summary::before {
+    background-image: url("chrome://global/skin/icons/arrow-up.svg");
+  }
+}
+
+.table-heading {
+  background-color: var(--table-background-color);
+  border-radius: var(---border-radius-small);
+  padding: 0 24px;
+
+  & h3 {
+    margin: 0;
+    padding: 0.5em;
+    font-size: var(--font-size-large);
+    font-weight: var(--font-weight-bold);
+    text-transform: uppercase;
+    color: var(--text-color);
+    display: inline-block;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  text-align: left;
+  width: 100%;
+  table-layout: fixed;
+}
+
+thead {
+  background-color: var(--table-background-color);
+  border-bottom: 1px solid var(--color-gray-50);
+
+  & tr {
+    border-block-end: var(--table-border);
+  }
+}
+
+tbody td {
+  vertical-align: top;
+  color: var(--color-gray-100);
+  border-bottom: var(--border-width) solid var(--color-gray-50);
+
+  &.hcm-theme {
+    border-inline-start: var(--border-width) solid var(--color-gray-50);
+  }
+}
+
+tr td:last-of-type {
+  border-inline-end: 0;
+}
+
+tr td:first-of-type {
+  border-inline-start: 0;
+}
+
+tbody tr:first-of-type td {
+  border-block-start: 2px solid var(--color-gray-50);
+}
+
+tbody tr:last-of-type {
+  & td {
+    border-block-end: 0;
+  }
+
+  & td:first-of-type {
+    border-radius: 0 0 0 2px;
+  }
+
+  & td:last-of-type {
+    border-radius: 0 0 2px 0;
+  }
+}
+
+th {
+  font-size: var(--font-size-small);
+  text-transform: uppercase;
+  font-weight: var(--font-weight);
+  text-align: center;
+}
+
+tr td,
+tr th {
+  padding: 8px;
+}
+
+td {
+  background: var(--color-white);
+  text-align: center;
+}
+
+th:first-of-type,
+td:first-of-type {
+  text-align: start;
+}
+
+.light-theme {
+  background: var(--color-white);
+  color: var(--color-gray-100);
+}
+
+.dark-theme {
+  background-color: var(--color-gray-90);
+  color: var(--color-gray-05);
+}
+
+.hcm-theme {
+  background-color: #000000;
+  color: #ffffff;
+}
+
+.preview-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  height: 100%;
+}
+
+.value {
+  width: 100%;
+  margin: 0;
+}
+
+/* Preview cell styles */
+
+/** Default **/
+
+.default-preview {
+  height: 50px;
+  width: 100px;
+  background-color: var(--button-background-color);
+  border: 1px solid var(--color-gray-60);
+  border-radius: 4px;
+}
+
+/** Outline **/
+
+.outline-preview {
+  height: 50px;
+  width: 100px;
+  background-color: color-mix(in srgb, currentColor 20%, transparent);
+  outline: 2px solid var(--color-gray-60);
+}
+
+/** Font **/
+
+.text-wrapper {
+  backdrop-filter: contrast(0.4);
+  padding: var(--space-small);
+  width: 100%;
+}
+
+/** Icon **/
+
+.icon-preview {
+  background-color: var(--color-gray-60);
+  height: var(--size-item-large);
+  width: var(--size-item-large);
+  /* FIXME: our icons don't seem to work when used as a mask */
+  mask: url(https://upload.wikimedia.org/wikipedia/commons/c/c4/Globe_icon.svg) no-repeat center / contain;
+}
+
+/** Link **/
+
+.link-preview {
+  text-decoration: underline;
+
+  &.outline {
+    outline: 2px solid var(--color-blue-50);
+    outline-offset: var(--link-focus-outline-offset);
+  }
+}
+
+/** Space and size **/
+
+.space-size-preview {
+  display: flex;
+  height: 50px;
+  width: 75%;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+
+  & .item {
+    height: 50%;
+    width: 40%;
+    background-color: var(--color-blue-60);
+    border-radius: var(--border-radius-small);
+  }
+}
+
+.space-size-background {
+  background-color: var(--color-blue-05);
+  background-image: linear-gradient(135deg,
+      var(--color-blue-30) 10%,
+      #0000 0,
+      #0000 50%,
+      var(--color-blue-30) 0,
+      var(--color-blue-30) 60%,
+      #0000 0,
+      #0000);
+  background-size: 8px 8px;
+  border-radius: var(--border-radius-small);
+  border: var(--border-width) solid var(--color-gray-50);
+}
+
+/** Padding **/
+
+.padding-item {
+  min-height: calc(1.5 * var(--size-item-large));
+  width: calc(3 * var(--size-item-large));
+  border-radius: var(--border-radius-small);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.inner {
+    background-color: var(--color-blue-60);
+    opacity: 0.5;
+    border-radius: 3px;
+  }
+}